/******************************************************** CSS pour le site de Gynécomédic Création du css : Martin Durette Date : Décembre 2018 Une réalisation de Synaps Design ********************************************************/ /* Rouge #a93021 Bleu #00a4ef Gris #333 */ .megamenu h6{color:#00a4ef; text-transform:uppercase; border-bottom:1px solid #ddd; font-size:0.9rem; padding-bottom:0.3rem;} .megamenu li{list-style: none; position:relative; padding-left:1rem} #Menu li.nav-item .megamenu a{color:#333; font-weight: 400} #Menu li.nav-item .megamenu a:hover{text-decoration:none; color:#fff} #Menu li.nav-item .megamenu a i{font-size:0.75em;} .megamenu li::before {font-family: "Font Awesome 5 Pro"; font-weight: 900; content: '\f054'; position:absolute; font-size:0.75rem; color:#333; top:0.38rem; left:0; font-style: normal; font-variant: normal; text-rendering: auto; -webkit-font-smoothing: antialiased;} .megamenu li:hover::before{color:#fff; margin-left:0.25rem} /******************************************************** HTML ********************************************************/ body{font-family: 'Open Sans', sans-serif; font-size:16px; font-weight:400;} .wow {visibility: hidden;} .clear{clear:both} .shadowbox{-webkit-box-shadow: 2px 2px 5px 0px rgba(50, 50, 50, 0.3);-moz-box-shadow: 2px 2px 5px 0px rgba(50, 50, 50, 0.3);box-shadow: 2px 2px 5px 0px rgba(50, 50, 50, 0.3);} h1,h2,h3,h4,h5,h6{font-weight:700; color:#00a4ef;} h1{font-size:2rem; margin:2rem 0 1rem 0; color:#00a4ef; text-transform:uppercase; border-bottom:1px solid #ddd} h2{font-size:2rem; margin:0 0 1rem 0; color:#00a4ef; text-transform:uppercase} h2 strong{color:#444; border-bottom:2px solid #00a4ef; } h3{font-size:1.4rem; margin:1rem 0;} h4{font-size:1.1rem; margin:1rem 0;} h5{font-size:1rem; margin:1rem 0;} h6{font-size:1rem; margin:1rem 0;} p, td{font-size:1rem; margin:1rem 0; color:#444} ul,ol{margin-left:0; padding-left:2rem; color:#444} li{font-size:1rem;} a:hover{color:#000;} strong, b{font-weight:700;} blockquote{margin-top:1rem; margin-bottom:1rem; border-left:5px solid #6c757d; padding-left:1rem;} .fa-stack { font-size: 1.2rem;} i { vertical-align: middle;} .GoogleMap{width:100%; } .GoogleMapContact{width:100%; height:450px} /******************************************************** Responsive ********************************************************/ /* HEADER */ #Top{position:relative; top:0; left:0; width:100%; background:#333} #Top p{margin:0; padding:0; color:#fff;} #TopReseaux{position:relative; top:0; left:0; width:100%; background:#333} #Logo{max-width:300px} #TopReseaux a{color:#00a4ef; text-decoration:none} #TopReseaux a:hover{color:#a93021;} #Menu{background:#333; z-index: 9999} #Menu li.nav-item a{color:#fff; font-weight:700} #Menu li.active{background:#00a4ef} #Menu li:hover{background:#00a4ef} #Menu li.nav-item a.dropdown-item{color:#00a4ef; font-weight:700} #Menu.Zebra_Pin {border-bottom: 1px solid #ccc; box-shadow: 0px 0px 5px 0px rgba(50, 50, 50, 0.75); transition: box-shadow .25s linear;} #Menu .dropdown-menu{margin-top:-1px} #Menu .dropdown-item:hover{background:#00a4ef; color:#fff;} #Menu li.nav-item a.dropdown-item:hover{color:#fff;} #Banner{position:relative; width:100%; height:450px; border-bottom:20px solid #333; overflow:hidden} #Banner-texte{position:relative; z-index: 10} #Banner h4{text-transform:uppercase; font-size:2.5rem; color:#fff; text-shadow: 1px 1px 2px rgba(0,0,0, 1);} #Banner h5{text-transform:uppercase; font-size:1.5rem; color:#fff; text-shadow: 1px 1px 2px rgba(0,0,0, 1);} #Banner p{text-tranform:none; font-size:1.2rem; color:#fff; text-shadow: 1px 1px 2px rgba(0,0,0, 1);} .ServiceWrap{position:relative; padding:10px 10px 10px 90px; background:#fff; border:1px solid #fff; border-radius: 0.25rem; -webkit-transition: all 0.4s ease-out; -moz-transition: all 0.4s ease-out; -o-transition: all 0.4s ease-out; transition: all 0.4s ease-out; cursor:pointer} .ServiceWrap:hover{background:#d1ecf1; border:1px solid #00a4ef;} .ServiceWrap img{position:absolute; top:10px; left:10px; width:70px; border:1px solid #fff} .ServiceWrap h3{font-size:1.1rem; color:#00a4ef} .ServiceWrap p{font-size:0.9rem;} .TeaserWrap blockquote::before {font-family: "Font Awesome 5 Pro"; font-weight: 900; content: '\f10d'; position:absolute; font-size:3rem; color:#fff; top:0; left:0; font-style: normal; font-variant: normal; text-rendering: auto; -webkit-font-smoothing: antialiased;} .TeaserWrap blockquote::after {font-family: "Font Awesome 5 Pro"; font-weight: 900; content: '\f10e'; position:absolute; font-size:3rem; color:#fff; bottom:0; right:0; font-style: normal; font-variant: normal; text-rendering: auto; -webkit-font-smoothing: antialiased;} .TeaserWrap blockquote{padding-left:3.5rem; padding-right:3.5rem;} .TeaserWrap blockquote p{font-size: 1.5rem;} .TeaserWrap.bg-primary blockquote p{color:#fff} .EquipeWrap .card-img-wrap{border: 1px solid rgba(0,0,0,.125); border-top-right-radius: .25rem; border-top-left-radius:.25rem; overflow:hidden} .EquipeWrap .card{border: 1px solid rgba(0,0,0,.125); border-top:none; border-top-right-radius:0; border-top-left-radius:0;} .reseaux a,.reseaux a:hover{text-decoration:none} .section-0{background:#f5f5f5; border-top:1px solid #ddd; border-bottom:1px solid #ddd} .section-0 .table{background:#fff} #footer{background:#333} #footer h3{padding-bottom:0.5rem;color:#fff; text-transform:uppercase; font-size:1rem; background:url(../medias/img/bordure-bleu-grise.png) bottom left no-repeat;} #footer p, #footer li{color:#fff; font-size:0.9rem;} #footer a{color:#fff; text-decoration:none} #footer a:hover{color:#00a4ef;} #footer ul{margin-left:0; padding-left:0} #footer li{list-style-type:none; margin-left:0; padding-left:0; padding-top:0.5rem; padding-bottom:0.5rem; border-bottom:1px solid #555} #footer li:before{font-family: "Font Awesome 5 Pro"; font-weight: 900; content: '\f054'; font-size:0.8rem; color:#00a4ef; margin-right:0.5rem;} #footer li em{float:right; font-style: normal} #footer li.today{background:#00a4ef; padding-left:0.5rem; padding-right:0.5rem;} #footer li.today:before{color:#fff} #footer .table-bordered{border:none} #footer .table-bordered td, #footer .table-bordered th {color:#fff; font-size: 0.9rem; padding-top:0.5rem; padding-bottom:0.5rem; border-bottom:1px solid #555; border-top:none; border-left:none; border-right:none} #footer .table td, #footer .table th { padding: 0.5rem 0; vertical-align: top; border-top: none; } #copyright{background:#222} #copyright p{color:#fff; font-size:0.9rem;} #copyright a{color:#fff; text-decoration:none} #copyright a:hover{color:#00a4ef;} /* BootStrap : SM */ @media only screen and (min-width : 768px) { #Banner{height:275px;} .PageWrap{position:relative;} #FloatSidebar{position:absolute; top:0; right:calc(50% - 384px); width:60px; background:#00a4ef; border:1px solid #ededed; padding:0.5rem; text-align:center} #FloatSidebar a{font-size:2rem; color:#fff;} #FloatSidebar a:hover{font-size:2rem; color:#333;} #FloatSidebar.Zebra_Pin {border-bottom: 1px solid #ccc; box-shadow: 2px 2px 5px 0px rgba(50, 50, 50, 0.3); transition: box-shadow .25s linear;} .section-service{padding-right:80px;} } /* BootStrap : MD */ @media only screen and (min-width : 992px) { #Banner{height:300px;} .section-service{padding-right:80px;} #FloatSidebar{right:calc(50% - 512px);} } /* BootStrap : LG */ @media only screen and (min-width : 1024px) { h1{font-size:1.8rem; margin:2rem 0 1rem 0; border-bottom:1px solid #ddd} h2{font-size:1.8rem; margin:0 0 1rem 0;} li.dropdown:hover > .dropdown-menu {display: block;} } /* BootStrap : XL */ @media only screen and (min-width : 1200px) { #FloatSidebar{right:calc(50% - 640px); width:60px;} .section-service{padding-right:0;} h1{font-size:2rem; margin:2rem 0 1rem 0; border-bottom:1px solid #ddd} h2{font-size:2rem; margin:0 0 1rem 0;} .megamenu{min-width:700px} #Banner{height:450px;} #Banner-baton{position:absolute; top:0; left:50%; margin-left:-835px; z-index: 10; border:0px solid #fff; padding-top:1rem; padding-bottom:1rem;} #Banner-baton img{width:470px} #Banner-lignes-gauche{position:absolute; top:0; left:0; width:15%} #ligne-grise{background:#7f7f7f; width:29%; display:inline-block; margin-right:2%} #ligne-rouge{background:#a2140a; width:35%; display:inline-block; margin-right:2%} #ligne-verte{background:#96c020; width:15%; display:inline-block; margin-right:2%} #ligne-bleu{background:#00a4ef; width:10%; display:inline-block;} #Banner-lignes-droite{position:absolute; top:0; right:0; width:10%; text-align:right} #ligne-rouge2{background:#a2140a; width:30%; display:inline-block; margin-right:2%} #ligne-bleu2{background:#00a4ef; width:65%; display:inline-block;} } @media only screen and (max-width : 1024px) { #LogoMobile{width:250px} #Menu .navbar-toggler{color:#fff; border-color:transparent;} } @media only screen and (max-width : 767px) { #Banner{height:250px;} .megamenu li{list-style: none} #Banner h4{font-size:1.5rem;} #Banner h5{font-size:1rem;} .TeaserWrap{padding:1rem;} } .d-flex-comm{border-bottom:1px solid #ddd} .d-flex-comm-thumb{color:#00a4ef} .d-flex-fontawesome{width:70px; text-align:center; padding-right:1.25rem;} .d-flex-1{flex: 1;} #LoadAjaxTimer{display:none; position:fixed; top:0; left:0; width:100vw; height:100vh; z-index:9999999; background:rgba(0,0,0,0.75); color:#fff; vertical-align:middle; line-height:100vh} #Contact-Modal .modal-header{background: #00a4ef;box-shadow: inset 0 3px 5px rgba(0,0,0,.125); font-variant:small-caps; -webkit-border-top-left-radius: 5px;-webkit-border-top-right-radius: 5px;-moz-border-radius-topleft: 5px;-moz-border-radius-topright: 5px;border-top-left-radius: 5px;border-top-right-radius: 5px; } #Contact-Modal .modal-title{text-transform:uppercase; color:#fff;} #Contact-Modal .modal-content{border:none} .has-error{border:1px solid #dc3545;} .custom-control-label::before{background:#fff; border: 1px solid #ced4da;}