@font-face { font-family:'raleway'; src:url('fonts/raleway-regular-webfont.woff2') format('woff2'), url('fonts/raleway-regular-webfont.woff') format('woff'); font-weight:normal; font-style:normal; }
@font-face { font-family:'raleway'; src:url('fonts/raleway-semibold-webfont.woff2') format('woff2'), url('fonts/raleway-semibold-webfont.woff') format('woff'); font-weight:bold; font-style:normal; }
@font-face { font-family: 'arial_narrowregular'; src: url('fonts/arial_narrow-webfont.eot'); src: url('fonts/arial_narrow-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/arial_narrow-webfont.woff') format('woff'), url('fonts/arial_narrow-webfont.ttf') format('truetype'); font-weight: normal; font-style: normal; }
@font-face { font-family:'league_gothicregular'; src:url('fonts/leaguegothic-regular-webfont.woff2') format('woff2'), url('fonts/leaguegothic-regular-webfont.woff') format('woff'); font-weight:normal; font-style:normal; }
@font-face { font-family:'league_gothicregular'; src:url('fonts/leaguegothic-regular-webfont.woff2') format('woff2'), url('fonts/leaguegothic-regular-webfont.woff') format('woff'); font-weight:normal; font-style:normal; }
@font-face { font-family:'allerregular'; src:url('fonts/aller_rg-webfont.woff2') format('woff2'), url('fonts/aller_rg-webfont.woff') format('woff'); font-weight:normal; font-style:normal; }
@font-face { font-family:'aller_lightregular'; src:url('fonts/aller_lt-webfont.woff2') format('woff2'), url('fonts/aller_lt-webfont.woff') format('woff'); font-weight:normal; font-style:normal; }

body{ min-height:100%; background:#fff; color:#333; margin:0; padding:0; font-family:"raleway", "arial_narrowregular", "Arial", arial, sans-serif; }

a:focus, a:active{ outline:0; }

a{ text-decoration:none; color:#3b8ec2; -moz-transition:all ease 0.3s; -webkit-transition:all ease 0.3s; transition:all ease 0.3s; }
a:hover{ color:#000; }

h1, h2, h3{ color:#333; }

hr { display:block; position:relative; width:auto; height:0; border:0; margin:20px auto; background:transparent; }

#wrapper{ display:block; position:relative; margin:0; padding:0; width:auto; min-height:100vh; }
#wrapper::before{ content:''; display:block; position:absolute; top:160px; left:0; right:0; width:100%; height:490px; background:transparent url('images/accueil.jpg') no-repeat center top; -moz-background-size:cover; -webkit-background-size:cover; background-size:cover; border-top:3px solid #3b8ec2; z-index:-2; }
#wrapper::after{ content:''; display:block; position:absolute; top:650px; left:0; right:0; width:100%; height:10px; background:#fff; -moz-box-shadow:0 -30px 60px 180px #fff; -webkit-box-shadow:0 -30px 60px 180px #fff; box-shadow:0 -30px 60px 180px #fff; z-index:-1; }

#header{ display:block; clear:both; position:relative; margin:0 auto; width:1000px; max-width:calc(100% - 40px); padding:17px 0 16px 0; }
#mainlogo{ display:inline-block; vertical-align:top; border:0; margin:-11px 0 -12px 0; width:auto; height:150px; width:288px; }

#header #menu{ display:block; position:relative; height:127px; width:calc(100% - 293px); float:right; overflow:hidden; }

#header #menu a{ font-family:"aller_lightregular", "arial_narrowregular", "raleway", "Arial", arial, sans-serif; font-size:1em; text-decoration:none; text-transform:uppercase; color:#777; display:inline-block; position:relative; height:127px; line-height:calc(236px - 1em); width:20%; margin:0; text-align:center; -moz-transition:all ease 0.3s; -webkit-transition:all ease 0.3s; transition:all ease 0.3s; }

#header #menu a:hover, #header #menu a.current{ color:#111; }

#header #menu a::before{ content:''; display:block; position:absolute; top:0; left:0; right:0; bottom:1em; background:transparent url('css/icone-accueil.png') no-repeat center center; -moz-opacity:0.6; -webkit-opacity:0.6; opacity:0.6; -moz-transition:all ease 0.3s; -webkit-transition:all ease 0.3s; transition:all ease 0.3s; }
#header #menu a:nth-of-type(1)::before{ background-image:url('css/icone-accueil.png'); }
#header #menu a:nth-of-type(2)::before{ background-image:url('css/icone-rendezvous.png'); }
#header #menu a:nth-of-type(3)::before{ background-image:url('css/icone-patient.png'); }
#header #menu a:nth-of-type(4)::before{ background-image:url('css/icone-medecin.png'); }
#header #menu a:nth-of-type(5)::before{ background-image:url('css/icone-contact.png'); }
#header #menu a:hover::before, #header #menu a.current::before{  -moz-opacity:1; -webkit-opacity:1; opacity:1; }

#header #menu #cach{ display:block; width:25%; height:4px; background:#3b8ec2; position:absolute; bottom:0; left:-26%; z-index:1; -moz-transition:all ease 0.3s 0.2s; -webkit-transition:all ease 0.3s 0.2s; transition:all ease 0.3s 0.2s; }

#page{ display:block; clear:both; position:relative; margin:370px auto 30px auto; width:1000px; max-width:calc(100% - 40px); min-height:calc(100vh - 650px); }

#page h1{ font-family:'allerregular', "arial_narrowregular", "raleway", "Arial", arial, sans-serif;  font-weight:normal; color:#666; margin:0 0 30px 0; text-align:center; text-transform:uppercase; }
#page h2{ margin-bottom:0; color:#3b8ec2; }

#page section form{ display:block; position:relative; text-align:center; width:480px; margin:20px auto; }
#page section form label{ display:inline-block; width:49%; margin:0 0 5px 0; text-align:right; }
#page section form input[type=text], #page section form input[type=password]{ display:inline-block; width:calc(49% - 8px); margin:0 0 5px 0; padding:3px; border:1px solid #777; text-align:left; -moz-transition:all ease 0.3s; -webkit-transition:all ease 0.3s; transition:all ease 0.3s; }
#page section form #jour, #page section form #mois, #page section form #annee{ display:inline-block; width:16%; margin:0 0.5% 5px 0; padding:3px; border:1px solid #777; text-align:left; -moz-transition:all ease 0.3s; -webkit-transition:all ease 0.3s; transition:all ease 0.3s; }
#page section form #jour{ width:10%; }
#page section form #mois{ width:25%; }
#page section form #annee{ width:13%; margin-right:0; }
#page section form input[type=text]:focus, #page section form input[type=password]:focus, #page section form #jour:focus, #page section form #mois:focus, #page section form #annee:focus{ border-color:#3b8ec2; }
#page section form input[type=submit]{ display:block; position:relative; width:150px; padding:15px 0; color:#fff; background:#3b8ec2; text-decoration:none; text-transform:uppercase; font-size:18px; text-align:center; -moz-opacity:0.8; -webkit-opacity:0.8; opacity:0.8; -moz-transition:all ease 0.3s; -webkit-transition:all ease 0.3s; transition:all ease 0.3s; -moz-border-radius:3px; -webkit-border-radius:3px; border-radius:3px; border:0; margin:20px auto; }
#page section form input[type=submit]:hover{ -moz-opacity:1; -webkit-opacity:1; opacity:1; }

#page section #howto{ display:block; position:absolute; bottom:100px; left:0; right:0; padding:10px; border:1px solid #aaa; -moz-box-shadow:2px 2px 5px -3px #000; -webkit-box-shadow:2px 2px 5px -3px #000; -o-box-shadow:2px 2px 5px -3px #000; -ms-box-shadow:2px 2px 5px -3px #000; box-shadow:2px 2px 5px -3px #000; z-index:10; background:#fefefe; color:#333; font-family:'arial_narrowregular', arial, sans-serif; font-size:1em; text-align:justify;  -moz-transition:0.5s ease; -webkit-transition:0.5s ease; -o-transition:0.5s ease; -ms-transition:0.5s ease; transition:0.5s ease; visibility:hidden; -moz-opacity:0; -webkit-opacity:0; -o-opacity:0; -ms-opacity:0; opacity:0; }
#page section #howto p{ margin:0; padding:0; text-align:justify; }
#page section #howto p:first-of-type{ padding-bottom:10px; }
#howLink{ display:block; width:250px; margin:0 auto; position:relative; text-align:center; color:#666; font-size:0.9em; text-decoration:none; -moz-transition:0.3s ease; -webkit-transition:0.3s ease; -o-transition:0.3s ease; -ms-transition:0.3s ease; transition:0.3s ease; }
#howLink:hover{ color:#333; }
#howLink:active #howto, #howLink:focus #howto, #howto.openhow{ visibility:visible; -moz-opacity:1; -webkit-opacity:1; -o-opacity:1; -ms-opacity:1; opacity:1; bottom:20px; }

#page section form .inscription{ display:block; position:relative; font-size:0.9em; text-decoration:none; color:#666; -moz-transition:0.3s ease; -webkit-transition:0.3s ease; -o-transition:0.3s ease; -ms-transition:0.3s ease; transition:0.3s ease; }
#page section form .lost{ display:block; position:absolute; bottom:145px; right:calc(2% + 8px); font-size:0.8em; text-decoration:none; color:#666; -moz-transition:0.3s ease; -webkit-transition:0.3s ease; -o-transition:0.3s ease; -ms-transition:0.3s ease; transition:0.3s ease; }
#page section form .inscription:hover, #page section form .lost:hover{ color:#333; }
#page section form fieldset{ border:1px solid #aaa; background:transparent; padding-top:15px; padding-bottom:15px; -moz-border-radius:3px; -webkit-border-radius:3px; border-radius:3px; }
#page section form fieldset legend{ text-transform:uppercase; color:#666; padding-left:5px; padding-right:5px; font-size:1.2em; font-weight:bold; color:#3b8ec2; }

#medecin #page section form{ display:inline-block; margin:0 0 20px 0; }
#medecin #page section form:last-of-type{ float:right; }

#accueil #page h1{ font-size:50px; }
#accueil #page h1 em, #page h1 small{ display:block; text-align:center; font-size:0.4em; color:#666; margin:0; font-style:normal; }
#accueil #page h1 small{ font-size:0.3em; color:#333; margin:0; }

#accueil #page section{ display:block; position:relative; clear:both; }
#accueil #page section .module{ display:table-cell; width:33%; vertical-align:top; text-align:justify; padding:0 40px 0 40px; font-size:0.9em; }
#accueil #page section .module h2{ text-align:center; color:#3b8ec2; margin-top:0; padding-top:100px; background:transparent url('css/icone-connect.png') no-repeat center top; }

#accueil #page section .module:nth-of-type(1){ padding-left:0; }
#accueil #page section .module:nth-of-type(1) h2{ background:transparent url('css/icone-connect.png') no-repeat center top; }
#accueil #page section .module:nth-of-type(2){ padding:0 20px 40px 20px; } 
#accueil #page section .module:nth-of-type(2) h2{ background:transparent url('css/icone-personnel.png') no-repeat center top; }
#accueil #page section .module:nth-of-type(3){ padding-right:0; } 
#accueil #page section .module:nth-of-type(3) h2{ background:transparent url('css/icone-specialistes.png') no-repeat center top; }

#footer{ display:block; clear:both; position:relative; margin:0; width:auto; background:#3b8ec2; color:#fff; font-family:"arial_narrowregular", "raleway", "Arial", arial, sans-serif; font-size:14px; padding:20px 0; height:60px; }
#footer .inner{ display:block; clear:both; position:relative; margin:0 auto; width:1000px; max-width:calc(100% - 40px); padding:0; }
#footer .inner p{ display:block; position:relative; height:20px; line-height:20px; padding:5px; margin:0; }
#footer .inner b{ font-weight:normal; }

#footer .inner div{ display:inline-block; width:50%; text-align:left; }
#footer .inner div:nth-of-type(2){ text-align:right; }

#footer p span{ display:inline-block; position:relative; width:20px; height:20px; line-height:20px; font-size:20px; font-family:arial, sans-serif; vertical-align:-3px; text-align:center; }
#footer p span img{ margin:0; border:0; width:auto; height:100%; vertical-align:-3px; }
#footer p a{ color:#fff; }

#linkRdv{ display:block; position:relative; width:250px; padding:15px 0; color:#fff; background:#3b8ec2; text-decoration:none; text-transform:uppercase; font-weight:bold; text-align:center; -moz-opacity:0.8; -webkit-opacity:0.8; opacity:0.8; -moz-transition:all ease 0.3s; -webkit-transition:all ease 0.3s; transition:all ease 0.3s; -moz-border-radius:3px; -webkit-border-radius:3px; border-radius:3px; border:0; margin:20px auto; }
#linkRdv:hover{ -moz-opacity:1; -webkit-opacity:1; opacity:1; }

#mentions-legales #page section strong{ display:block; text-transform:uppercase; padding:5px 0 5px 15px; }
#mentions-legales #page section small{ display:block; padding:5px 0 5px 15px;  }
#mentions-legales #page section p{ display:block; margin:0; padding:5px 0 5px 15px; }

#resultsFrame{ display:block; width:420px; height:200px; background:#fff url('css/loading.gif') no-repeat center center; border:3px solid #3b8ec2; -moz-border-radius:20px; -webkit-border-radius:20px; border-radius:20px; border-collapse:collapse; overflow:hidden; position:fixed; top:50vh; left:50%; margin:-103px 0 0 -213px; z-index:10; -moz-transition:all ease 0.5s; -webkit-transition:all ease 0.5s; transition:all ease 0.5s; -moz-opacity:0; -webkit-opacity:0; opacity:0; visibility:hidden; }

#bgCache{ display:block; position:fixed; top:0; left:0; right:0; bottom:0; width:100%; height:100%; z-index:8; background:url('css/bg_cadres.png'); -moz-transition:all ease 0.5s; -webkit-transition:all ease 0.5s; transition:all ease 0.5s; -moz-opacity:0; -webkit-opacity:0; opacity:0; visibility:hidden; cursor:pointer; }
#bgCache::after{ content:attr(title); color:#fff; background:#3b8ec2; padding:2px 5px 5px 5px; font-size:11px; position:absolute; bottom:50vh; right:50%; width:80px; text-align:center; margin:0 -150px -123px 0; border-radius:0 0 3px 3px; -moz-transition:all ease 0.5s; -webkit-transition:all ease 0.5s; transition:all ease 0.5s; }
#bgCache.openmed::after, #bgCache.openpat::after{ margin:0 -180px -123px 0; }

#bgCache::before{ content:"Connexion"; color:#3b8ec2; font-weight:bold; font-size:30px; text-transform:uppercase; -moz-text-shadow:0 0 10px #fff; -webkit-text-shadow:0 0 10px #fff; text-shadow:0 0 10px #fff; display:block; background:transparent url('css/icone-patient-form.png') no-repeat left center; -moz-background-size:contain; -webkit-background-size:contain; background-size:contain; width:360px; height:50px; padding:0; text-align:center; line-height:50px; white-space:nowrap; position:absolute; top:50vh; left:50%; margin:-153px 0 0 -150px; -moz-transition:all ease 0.5s; -webkit-transition:all ease 0.5s; transition:all ease 0.5s; }
#bgCache.openpat::before{ margin:-153px 0 0 -180px; }
#bgCache.openmed::before{ content:"Connexion"; background-image:url('css/icone-medecin-form.png'); margin:-153px 0 0 -180px; }

/*#contact #page section p{ display:block; margin:0; padding:5px 0 5px 15px; line-height:1.4em; }
#contact #page section p strong{ font-weight:normal; text-transform:uppercase; }
#contact #page section p span{ display:inline-block; width:100px; margin:0; text-align:right; }*/

/* Map */

#contact #page section #left{ display:block; float:left; width:190px; padding:0 10px 0 0; margin:0 0 20px 0; }
#contact #page section #left p{ font-size:0.9em; margin:0; padding:10px 0; }
#contact #page section #left p span{ display:block; float:left; font-family:"raleway", "Arial", arial, sans-serif; font-size:13px; color:#000; border:1px solid #000; width:20px; height:20px; line-height:20px; text-align:center; background:#ff5b52; -moz-border-radius:11px; -webkit-border-radius:11px; border-radius:11px; margin:0 8px 0 -8px; -moz-transition:all ease 0.3s; -webkit-transition:all ease 0.3s; transition:all ease 0.3s; }
#contact #page section #left p strong{ font-weight:bold; text-transform:none; }
#contact #page section #left p strong small{ display:block; padding-left:calc(1.5em + 8px); font-size:0.85em; font-family:inherit; }
#contact #page section #left p small{ display:block; padding-left:calc(1.5em + 8px); font-size:0.8em; font-family:'Arial', sans-serif; }

#centersContact{ display:block; position:relative; margin:0 0 30px 0; }
#centersContact section{ display:block; float:left; position:relative; width:calc(50% - 66px); margin:0 5px 30px 0; padding:10px 10px 10px 50px; border:0; min-width:220px; }
#centersContact section:nth-of-type(2n){ margin:0 0 30px 5px; }
#centersContact section br{ display:none; }
#centersContact section h4{ font-family:'raleway','arial_narrowregular','arial narrow',arial,sans-serif; text-transform:uppercase; color:#0596de; margin:0 0 10px 0; position:relative; z-index:3; }
#centersContact section h4 small{ text-transform:none; color:#111; display:block; margin:-5px 0 0 0; position:relative; top:0; left:0; bottom:0; right:0; }
#centersContact section em{ font-style:normal; display:block; padding:0 0 0 25px; margin:0 0 0 20px; white-space:nowrap; }
#centersContact section em:nth-of-type(1){ background:transparent url('css/icone_place-blue.png')no-repeat left center; }
#centersContact section em:nth-of-type(3){ background:transparent url('css/icone_phone-blue.png')no-repeat left center; margin-top:10px; }
#centersContact section em:nth-of-type(4){ background:transparent url('css/icone_fax-blue.png')no-repeat left center; margin-top:5px; }
#centersContact section em strong{ display:inline; margin:0; text-transform:uppercase; color:#111; }
#centersContact section strong{ display:block; position:relative; clear:both; color:#111; text-transform:none; margin:0 0 5px 0; }
#centersContact section small{ display:inline-block; margin:0; position:absolute; bottom:-0.8em; left:40px; }
#centersContact section ul{ margin:0; list-style:none; padding-left:30px; line-height:normal; position:relative; display:block; }
#centersContact section ul li{ margin:0 0 3px 0; padding:0; position:relative; display:block; }
#centersContact section ul li strong, #centersContact section small strong{ display:inline; font-weight:bold; color:#000; }
#centersContact section ul li::before { content:''; display:block; width:0.4em; height:0.4em; background:#fff; position:absolute; left:-1em; top:0.4em; border:1px solid #3b8ec2; -moz-border-radius:0.4em; -webkit-border-radius:0.4em; -o-border-radius:0.3em; -ms-border-radius:0.4em; border-radius:0.4em; z-index:1; -moz-transition:all ease 0.5s; -webkit-transition:all ease 0.5s; transition:all ease 0.5s; }

.liensext{ display:block; position:relative; }
.liensext h1{ margin-top:0; text-align:center; }
.liensext .note{ display:block; position:relative; margin-top:-25px; text-align:center; text-transform:uppercase; }
.liensext div div{ display:inline-block; width:220px; height:165px; position:relative; margin:20px; padding:0; background:#5baee2; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; -moz-transition:all ease 0.5s; -webkit-transition:all ease 0.5s; transition:all ease 0.5s; }
.liensext div div:hover{ background:#3b8ec2; }
.liensext div a{ font-family:'allerregular', "arial_narrowregular", "raleway", "Arial", arial, sans-serif; display:block; position:absolute; top:0; left:0; right:0; bottom:0; width:auto; height:auto; padding:0; text-decoration:none; color:#fff; cursor:pointer; -moz-transition:all ease 0.5s; -webkit-transition:all ease 0.5s; transition:all ease 0.5s; }
.liensext div a strong{ font-family:'league_gothicregular','allerregular', "arial_narrowregular", "raleway", "Arial", arial, sans-serif; text-transform:uppercase; font-weight:normal; display:block; font-size:26px; position:absolute; top:35px; left:0; right:0; }
.liensext div a strong small{ display:block; font-family:'allerregular', "arial_narrowregular", "raleway", "Arial", arial, sans-serif; font-size:11px; margin-top:-4px; position:relative; top:auto; left:auto; right:auto; bottom:auto; }
.liensext div a small{ display:block; position:absolute; bottom:35px; left:0; right:0; font-size:14px; }

.map-container{ display:block; position:relative; margin:0 0 50px 0; width:calc(100% - 203px); height:0; padding-top:45%; border:1px solid #666; float:right; overflow:hidden; }
.map-container iframe{display:block; position:absolute; top:0; left:0; width:100%; height:calc(100% + 80px); margin:-60px 0px -14px 0; bottom:0; right:0; border:0; border-collapse:collapse; padding:0; overflow:hidden; }

#contact #page section #left p span.map_dot { display:block; float:left; border:0; width:24px; height:24px; background:transparent url('css/map_dot.png') no-repeat center center; margin:0 8px 0 -8px; }

#map_canvas{ display:block; position:absolute; width:100%; height:100%; top:0; left:0; bottom:0; right:0; }

@media (max-width:1000px){
#medecin #page section form{ display:block !important; margin:20px auto 50px auto !important; float:none !important; clear:both !important; }
}

@media (max-width:940px){
body{ font-size:0.85em; }
#wrapper::before{ height:400px; }
#wrapper::after{ top:550px;-moz-box-shadow:0 -24px 64px 200px #fff; -webkit-box-shadow:0 -24px 64px 200px #fff; box-shadow:0 -24px 48px 144px #fff; }
#page{ margin:300px auto 30px auto; min-height:calc(100vh - 580px); }
}

@media (max-width:750px){
body{ width:500px; }
#wrapper::before, #wrapper::after{ display:none; }
#page{ margin:20px auto 30px auto; min-height:calc(100vh - 300px); }
#accueil #page section .module{ display:block !important; width:auto !important; vertical-align:top !important; text-align:justify !important; padding:0 0 20px 0 !important; font-size:1em !important; }
#accueil #page section .module:last-of-type{ padding-bottom:40px !important; }

#header #menu{ display:block; position:fixed; top:150px; left:0; bottom:0; width:0; height:calc(100vh - 150px); background:#fff; border:0; z-index:10; padding:0; margin:0; overflow:hidden; -moz-transition:all ease 0.5s; -webkit-transition:all ease 0.5s; transition:all ease 0.5s; }
#header #menu.open{ width:100%; }
#header #menu a::before{ display:none; }
#header #menu a{ display:block; clear:both; position:relative; text-align:center; padding:30px 15px 0 15px; margin:0; line-height:1em; width:auto; height:auto; white-space:nowrap; font-size:16px; }
#header #menu #cach{ display:none; }
#header .moblinks{ display:block !important; cursor:pointer; border:0; }
#header #openMenu{ display:block; position:absolute; top:55px; right:55px; width:40px; height:40px; z-index:5; }
#footer .inner b{ display:none; }

.liensext div div{ margin:5px 0; }
.liensext div div:nth-of-type(2n){ margin:5px 0 5px 10px; }

#contact #page section #left{ display:block; float:none; width:auto; padding:0; margin:0 0 20px 0; }
#contact #page section #left p{ font-size:0.9em; margin:0; padding:10px 0; display:inline-block; width:49%; }
.map-container{ display:block; position:relative; margin:0 0 20px 0; width:100%; height:0; padding-top:100%; border:1px solid #666; float:none; clear:both; }

}