@import 'materialize_short_min.css';

body, html {width:100%; height:100vh; line-height: inherit; font:2vw "Open Sans","lucida sans unicode","lucida grande","Trebuchet MS",verdana,arial,helvetica,helve,sans-serif; font-weight:300; padding:0; height:100vh; color:#4e4e4e;}

* {text-rendering:optimizelegibility;}
*, *:before, *:after {-moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box;}

:root {
    --MainBlue: #1b2973;
    --StudioBlue: #3f4d98;
    --ExterGreen: #3f9869;
    --TopMenuColor: #f3f3f3;
    --TextFont: 'Open Sans', sans-serif; 
}

h1, h2, h3 {font-size:inherit; margin:inherit}
form {display:inherit;}
blockquote {border:inherit; padding:inherit; margin:inherit}
.material-icons {font-size:inherit};
button, html input[type="button"], input[type="reset"], input[type="submit"] {-webkit-appearance:button; cursor: pointer;}


.modal {background-color: var(--StudioBlue); border-radius:.5rem;}
#modal1, #modal2, #modal3 {width:30vw}
#modal4 {width:40vw}
#modal5 {width:20vw}
#modal6 {width:30vw}

.modalsv2 .modal-content {padding:0; margin-bottom:2rem;}
.modalsv2 h4 {text-align:center; font:var(--TextFont); font-size:.9rem; margin:2.5rem 0 1rem 0; color:var(--TopMenuColor);}
.modalsv2 .modal-content p {text-align:center; color:var(--TopMenuColor); font-weight:400}
.modalsv2 .modal-footer {display:flex; justify-content:center; padding:.8rem 0 1rem 0; align-items:center; background-color: var(--SecondaryBGColor);}
.modalsv2 .modal-footer button {display:block; font-size:.5rem; margin:0 1rem; padding:.2rem 2rem; border-radius:.1rem; border:inherit; font-weight: 400;}
.modalsv2 .modal-footer button:hover {box-shadow: inset 0px 0px 19px -3px rgb(143 149 161 / 43%);}
.modalsv2 cite {text-align:center; font-size:.9rem; display:block;}

#modal3 {background-color:#cdcdcd;}
#modal3 h4 {color:var(--MainBlue);}
#modal3 .modal-content p {color:var(--MainBlue); font-size:.5rem;}
#modal4 .modal-content p {margin:1rem 0 .5rem 0}
#modal5 .modal-content {height:10rem; margin-bottom:0; background-image:url('../images/Picto_Success100x102.png'); background-repeat:no-repeat; background-position:center center;}
#modal6 .modal-content {padding:.8rem .5rem 0 .5rem; margin-bottom:.7rem;}
#modal6 .modal-content p {font-size:.4rem; line-height:.4rem}
#modal6 .modal-footer {padding-bottom:1.4rem}

#mod-loader.modal:not(.modalsv2) .modal-body {padding-top:15px}
#mod-loader.modal:not(.modalsv2) .text-info {font-size:65px; height:80px}

.wrapper {position:relative; margin: 0 auto; border:10px solid var(--MainBlue);}

.langlinkc {opacity:1}
.langlinkc img.Dr {width:.65rem; margin:0 .2rem 0 .2rem;}
.langlinkc form {display: inline}

section.top {padding:.5rem 1.9rem; background-color:white;}
header.toppanel div.navbar p {margin-left:.2rem; font-size:.42rem; font-weight:400; align-self:center; cursor:pointer}
header.toppanel div.titlebar hr {width:100%; margin:.2rem auto;}
header.toppanel div.topcartbar i.fa {color:red; font-size:1.571rem; line-height:1rem; letter-spacing:0.30rem; font-style:normal;}

header.toppanel {display:flex; width:100%; align-items:center; padding:0rem 0rem;}
header.toppanel div.navbar {width:25%;}
header.toppanel div.titlebar {width:50%; justify-content:center;}
header.toppanel div.titlebar h1 {letter-spacing:0.318em;}
header.toppanel div.navbar, header.toppanel div.titlebar, header.toppanel div.topcartbar {display:flex;}
header.toppanel div.titlebar {justify-content:center;}
header.toppanel div.titlebar h1 {margin:inherit; line-height:1rem; font-weight:200; text-transform:uppercase;}
header.toppanel div.titlebar h2 {font-size:.45rem; font-weight:400;line-height:.8rem; margin:0; text-transform:uppercase;}
header.toppanel div.topcartbar {width:10rem; justify-content:flex-end;}
#buttonmenu .material-icons {line-height: inherit; font-size:.8rem}
#buttonmenu {display:block; color:var(--MainBlue); padding:0 0.2rem; line-height:1rem; border:1px solid var(--MainBlue); border-radius:3px; background-color:white; margin:0;}

main {width:100%; border-top:1px solid var(--MainBlue);}

main {width:100%; border-top:1px solid grey; }
main nav {position:absolute; display:none; line-height:inherit; color:inherit; padding:.4rem .4rem 1rem .4rem; background-color:white; z-index:1000}
main nav .triggerclosecontener {display:flex; justify-content:flex-end;}
main nav span#triggerclose {height:auto; font-size:1rem; color:gray; cursor:pointer}

main nav .titlenav h3 {width:100%; padding:inherit; font-size:.8rem; font-weight:300; text-transform:uppercase;text-align:center;}
main nav .titlenav h4 {display:block; width:100%; line-height:1rem; margin:0; padding:inherit; font-size:1rem; font-weight:300; text-align: center;}

main nav ul#mainmenu {display:flex; flex-direction:column; align-items:stretch; margin-top:.2rem;}
main nav ul#mainmenu li {float:inherit;}
main nav ul#mainmenu a, main nav a {display:block; color:inherit; text-decoration:none;}
nav ul a:hover {background-color:rgba(0,0,0,0.1); animation: fadeIn .8s;}
main nav ul#mainmenu a {font-size:.45rem; padding:.2rem .5rem; border-radius:3px; text-transform:uppercase;}
main nav ul#secondmenu {display:flex; flex-direction: column; align-items: stretch; margin-top:.5rem;}
main nav ul#secondmenu li {float:inherit; }
main nav ul#secondmenu a, main nav a {color:inherit; text-decoration:none;}
main nav ul#secondmenu a {font-size:.42rem; padding:.15rem .8rem; border-radius:2px}
.voile {background-color:#00000012}

#AjaxContent {width:100%} 
section#home div.mediac {display:flex; align-items:flex-start; width:100%; height:auto;}
section#home div.mediac .virtualtour {width:41.9vw; height:11.8rem; }
section#home div.mediac iframe {width:100%; height:100%}
section#home div.presentationc {width:56.6vw;}
section#home div.presentationc h1, section#tarif1 h1, section#tarifs h1, section#devis h1, section#contact h1, section#contact h4 {text-align:center; font-size:.8rem; font-weight:200; margin-top:1rem; text-transform:uppercase; letter-spacing:0.218em; line-height: inherit;}
section#home div.presentationc blockquote {display:block; width:20rem; margin:.7rem auto; font-size:.6rem}
section#home div.presentationc blockquote p {display:flex; align-items:center; cursor:pointer}
section#home div.presentationc blockquote p:hover {color:red; transition-delay:200ms;}
section#home div.presentationc blockquote p .material-icons {font-size:.6rem; margin-right:.15rem; color:green}

section#home div.presentationc blockquote div.linksc {display:flex; align-items:center; margin-top:.5rem;}
section#home div.presentationc blockquote div.linksc div.gmaps {display:flex; align-items:center; height:.8rem; background: url(../images/GoogleMapsIcon.svg) no-repeat;}
section#home div.presentationc blockquote div.linksc div.tarifsc {display:flex; margin:0 3rem 0 1rem; align-items:center; height:.7rem; background: url(../images/euro.png) no-repeat; background-size:.7rem;}
section#home div.presentationc blockquote div.linksc div.gmaps p, section#home div.presentationc blockquote div.linksc div.tarifsc p {padding-left:.9rem; font-size:.5rem;}


.studioblue {background-color:var(--StudioBlue); color:white;}
.extergreen {background-color:var(--ExterGreen); color:white;}
section#tarif1 h1 {margin:2rem auto 1rem auto}
section#tarif1 div.tarifsc {display:flex; justify-content:center; align-items:flex-start; flex-wrap:wrap; width:100%; height:auto; margin-bottom:3rem}
section#tarif1 div#tarifsc #options {display:flex; flex-direction:column; width:17.5vw; border:1px solid #3f4d98; border-radius:.1rem; margin-right:.5rem; margin-bottom:1rem; padding-bottom:.6rem; cursor:pointer}
section#tarif1 div#tarifsc #options:hover {box-shadow: 3px 5px 7px #d3c3c3; background-color:#fbfbfb}
section#tarif1 div#tarifsc #options .head {width:100%; padding:.15rem 0; font-size:.45rem; text-align:center; font-weight:400; background-color: #3f4d98; color:white; text-transform:uppercase;}
section#tarif1 div#tarifsc #options .bloc_info {display:flex; flex-direction:column; justify-content:flex-start; align-items:center; text-align:center; margin:0 .3rem; padding:.7rem 0; border-bottom:1px dotted #3f4d98}
section#tarif1 div#tarifsc #options .bloc_info p {display:flex; align-items:center;}
section#tarif1 div#tarifsc #options #bloc_info_1 {font-size:.7rem; font-weight:300}
section#tarif1 div#tarifsc #options #bloc_info_2, section#tarifs div#tarifsc #options #bloc_info_3 {font-size:.5rem; height:6rem; font-weight:300; line-height:.6rem}
section#tarif1 div#tarifsc #options #bloc_info_2 i {color:green; margin-right:.1rem;}
section#tarif1 div#tarifsc #options #bloc_info_3 {height:4rem; background-color: #f9f9f9;}
section#tarif1 div#tarifsc #options #bloc_info_3 table {width:80%; margin:0 auto}
section#tarif1 div#tarifsc #options #bloc_info_3 td {font-size:.4rem; padding:0; font-weight:400}
section#tarif1 div#tarifsc #options #bloc_info_3 tr td:first-child {text-align:right; padding-right:.3rem}
section#tarif1 div#tarifsc #options #bloc_info_3 tr td:nth-child(2) {width:1rem;text-align:right; padding-right:.3rem}
section#tarif1 div#tarifsc #options #bloc_info_4 {border-bottom:none}
section#tarif1 div#tarifsc #options #bloc_info_4 button {font-size:.4rem; padding:.2rem 1rem; text-transform:uppercase;}


section#tarifs h1 {margin:2rem auto 1rem auto}
section#tarifs div.tarifsc {display:flex; justify-content:center; align-items:flex-start; flex-wrap:wrap; width:100%; height:auto; margin-bottom:3rem}
section#tarifs div#tarifsc #options {display:flex; flex-direction:column; width:21rem; border:1px solid #3f4d98; border-radius:.1rem; margin-bottom:1rem; padding-bottom:0;}
section#tarifs div#tarifsc #options:hover {box-shadow: 3px 5px 7px #d3c3c3; background-color:#fbfbfb}
section#tarifs div#tarifsc #options .head {width:100%; padding:.45rem 0; font-size:.45rem; text-align:center; font-weight:400; text-transform:uppercase;}
section#tarifs div#tarifsc #options .bloc_info {display:flex; flex-direction:column; justify-content:flex-start; align-items:center; text-align:center; margin:0 .3rem; padding:.7rem 0; border-bottom:1px dotted #3f4d98}
section#tarifs div#tarifsc #options #bloc_info_3 {height:inherit}
section#tarifs div#tarifsc #options #bloc_info_3 table {width:20rem; margin:0 auto}
section#tarifs div#tarifsc #options #bloc_info_3 tr:nth-child(even) {background:#f3f3f3}
section#tarifs div#tarifsc #options #bloc_info_3 tr:nth-child(2) {background:inherit}
section#tarifs div#tarifsc #options #bloc_info_3 tr td:nth-child(1) {text-align:left; padding-left:.5rem}
section#tarifs div#tarifsc #options #bloc_info_3 td {font-size:.475rem; padding:.05rem 0.5rem .05rem .05rem; font-weight:400; text-align:left;}
section#tarifs div#tarifsc #options #bloc_info_3 tr td:nth-child(2) {text-align:right; padding-right:.1rem}
section#tarifs div#tarifsc #options #bloc_info_4 {border-bottom:none}
section#tarifs div#tarifsc #options #bloc_info_4 button {font-size:.4rem; padding:.2rem 1rem; border-radius:.1rem; text-transform:uppercase;}
section#tarifs div#tarifsc #options #bloc_info_4 cite, section#devis .main_container .validContainer cite {font-size:.4rem; font-weight:400; line-height:.4rem; margin-bottom:.4rem; color:red}
section#tarifs div#tarifsc #options .foot {width:100%; padding:.45rem 0; font-size:.45rem; text-align:center; font-weight:400; text-transform:uppercase;}

section#devis h1 {margin:2rem auto .6rem auto}
section#devis p.sous_titre {font-size:.5rem; margin-bottom:.6rem; text-align:center}
section#devis .main_container * {font-size:.5rem}
section#devis .main_container {display:flex; justify-content:center; align-items:flex-start; width:33rem; margin:0 auto 4rem auto; border-radius:.2rem; border:1px solid #d9d9d9}
section#devis .main_container .left_bloc {width:50%; height:100%;}
section#devis .main_container .right_bloc {width:50%; height:100%; background-color: #f5f5f5;}
section#devis .main_container .left_bloc, section#devis .main_container .right_bloc {padding:.6rem; min-height:9.8rem}
section#devis .left_bloc p:nth-child(2), section#devis .right_bloc p:nth-child(3), section#devis .right_bloc p:nth-child(5) {margin:.2rem 0 0 .1rem; font-size:.45rem; color:var(--MainBlue)}
section#devis .right_bloc p:nth-child(3) {margin-left:0}
section#devis .left_bloc input, 
section#devis .left_bloc input:focus,
section#devis .left_bloc select, 
section#devis .left_bloc textarea {border-width:inherit; margin-bottom:.2rem;}
::placeholder {color:var(--MainBlue)}
section#devis .left_bloc input[type="text"],
section#devis .left_bloc input[type="email"],
section#devis .left_bloc input[type="password"],
section#devis .left_bloc select,
section#devis .left_bloc textarea {font-size:.37rem; font-weight:400; padding:.2rem .3rem; border:1px solid #95969b; border-radius:.1rem; color:var(--MainBlue);}
section#devis .left_bloc input[type="submit"] {font-size:.5rem; margin-top:1.2rem; padding:1.5rem 5.5rem; border:1px solid #cdcdcd}

section#devis .profContainer {display:flex; align-items:center; margin:.05rem 0 .4rem .1rem;}
section#devis .profContainer label {font-size:.40rem; line-height:.55rem; font-weight:400; color:var(--MainBlue); margin-right:.65rem; padding-left:.7rem}
section#devis .left_bloc input[type="text"]#NOM,
section#devis .left_bloc input[type="text"]#PRENOM,
section#devis .left_bloc input[type="text"]#CP,
section#devis .left_bloc input[type="text"]#VILLE,
section#devis .left_bloc input[type="email"]#EMAIL,
section#devis .left_bloc input[type="text"]#TEL,
section#devis .left_bloc select {display:inline; width:14.1rem;}
section#devis .left_bloc textarea {width:14.1rem; height:3rem;}
section#devis .left_bloc input[type="text"]#CP {width:3.4rem}
section#devis .left_bloc input[type="text"]#VILLE {width:6.5rem}
section#devis .left_bloc select {width:4rem; height:.95rem}
section#devis .left_bloc input[type="email"]#EMAIL {width:8rem;}
section#devis .left_bloc input[type="text"]#TEL {width:6.05rem;}
section#devis .main_container .left_bloc .validContainer {display:flex; flex-direction:column; align-items:center; justify-content:center; padding:1.5rem 0;}
section#devis .main_container .validContainer button {font-size:.4rem; padding:.2rem 1rem; border-radius:.1rem; text-transform:uppercase;}
section#devis .main_container .validContainer cite {color:inherit; text-align:center;}


section#devis .right_bloc .studioCheckContainer {margin-left:.1rem;}
section#devis .right_bloc .studioCheckContainer label {font-size:.45rem; line-height:.55rem; font-weight:400; color:var(--MainBlue); margin-right:.65rem; padding-left:.7rem}
section#devis .right_bloc .datesContainer {display:flex; margin-bottom:.4rem; align-items:center;}
section#devis .right_bloc .datesContainer * {font-size:.4rem; font-weight:400; color:var(--MainBlue)}
section#devis .right_bloc .datesLoc {display:inline; width:9rem; font-size:.37rem; font-weight:400; padding:.2rem .3rem; border:1px solid #95969b; border-radius:.1rem; color:var(--MainBlue);}
section#devis .right_bloc .EqListContainer {display:flex; flex-direction:column; align-items:flex-start; margin:.25rem 0 .3rem .1rem;}
section#devis .right_bloc .EqListContainer label {font-size:.42rem; line-height:.55rem; font-weight:400; color:var(--MainBlue); margin-right:.65rem; padding-left:.7rem}
section#devis p.ErrorC {display:none; align-items:center; font-size:.35rem; font-weight:400; color:red;}
section#devis p.ErrorC .material-icons {font-size:.6rem; margin-right:.1rem}
section#devis .right_bloc div.descloc {margin:-.1rem 0rem .3rem .8rem;}
section#devis .right_bloc div.descloc p {font-size:.40rem;}

form p {margin-bottom:inherit; text-align: left;}

section#devis .main_container * {
    font-size: .5rem;
}

section#localisation h1 {font-size:2.19rem;}
section#localisation h2 {font-size:1.79rem;}
section#localisation h3 {font-size:.5rem; font-weight:300; text-align: center;}
section#localisation h4 {font-size:1.10rem;}
section#localisation p {font-size:1rem}
section#localisation .s5 {font-size:.50rem; margin-bottom:8vh}
section#localisation .s4 {font-size:.90rem}
section#localisation .s3 {font-size:.85rem}
section#localisation .s2 {font-size:.75rem}
section#localisation .s1 {font-size:.60rem}

section#localisation h1 {margin:10vh 0 5vh 0}
section#localisation div.mediac {display:flex; justify-content:center; align-items:flex-start; width:100%; height:55vh;}
section#localisation div.mediac .localisation {width:31vw; height:47vh; margin-top:7vh; margin-right:.25vw;}
section#localisation div.mediac .virtualtour {width:40vw; height:47vh; margin-top:7vh; margin-left:.25vw;}
section#localisation div.mediac iframe {border:1px solid black}
section#localisation div.mediac iframe {width:100%; height:100%}
section#localisation div.mediac .localisation p, section#home div.mediac .virtualtour p {font-weight:400; text-align:center; margin-bottom:5px}
section#localisation a:link, section#home a:visited {text-decoration:underline; color:#d34836}
section#localisation a:hover {color:#3b5998}

.add-bg {background:url('../images/PostIt.png') no-repeat; background-position:center center; min-height:6rem}
section#contact h1 {margin:2rem auto 1rem auto}
section#contact .contactc {position:relative;}
section#contact div.devbtn {display:flex; justify-content:space-evenly; width:26rem; margin:0 auto; border:1px solid #3f4d98; border-radius:.1rem; padding:1rem 0; margin-bottom:2rem}
section#contact div.devbtn button, section#contact .formc button {font-size: .4rem; padding: .2rem 1rem; border-radius: .1rem; text-transform: uppercase;}
section#contact div.formc {width:15rem; margin:0 auto}
section#contact div.formc h4 {font-size:.6rem; margin:0 auto .2rem auto}
section#contact div.formc form {display:flex; flex-direction:column; margin-bottom:2rem;}
section#contact .formc input[type="text"],
section#contact .formc input[type="email"],
section#contact .formc textarea {font-size:.37rem; font-weight:400; padding:.2rem .3rem;  margin-bottom:.2rem; border:1px solid #95969b; border-radius:.1rem; color:var(--MainBlue);}
section#contact .formc button[type="submit"] {width:7rem; margin:.5rem auto;}
section#contact div.formc textarea {height:3rem;}
section#contact div.formc input#TEL {margin-bottom:.4rem;}
input:invalid, textarea:invalid {border-color: red;}
input:valid, textarea:valid {border-color:green}



/* Ordinateur écran > 1440px et <= 1920px */  
@media only screen and (orientation:landscape) and (min-width:1920px) {
    .wrapper {width:49.5rem}
}

/* Laptop HDPI */
@media only screen and (orientation:landscape) and (min-width:1367px) and (max-width:1440px) {
    .wrapper {width:99%;}
}

/* Laptop MDPI */
@media only screen and (orientation:landscape) and (min-width:1113px) and (max-width:1280px) {
    .wrapper {width:99%;}
}

/* Ipads Pro 12.9 pouces en paysage */
@media only screen and (orientation:landscape) and (min-width:1281px) and (max-width:1366px) {
    .wrapper {width:99%;}
}

/* IPad2 et IpadPro 10.5 pouces orientation paysage jusqu'à 1180px */
@media only screen and (orientation:landscape) and (min-width:1025px) and (max-width:1180px) {
    .wrapper {width:99%;}
    body {font-size:100%;}
}

/* IPad orientation paysage */
@media only screen and (orientation:landscape) and (min-width:901px) and (max-width:1024px) {
    .wrapper {width:99%;}
    body {font-size:100%;}
}

@media only screen and (orientation:landscape) and (max-height:600px) {
    .wrapper {width:99%;}
    body {font-size:100%;} 
}

/* iPads Orientation Portrait */
@media only screen and (orientation:portrait) and (max-height:1400px) {
    .wrapper {width:99%;}
    body {font-size:100%;}
        
}

/* iPads 2 Orientation Portrait */
@media only screen and (orientation:portrait) and (max-height:1180px) {
    .wrapper {width:99%;}
    body {font-size:56%;}
    header.toppanel div.titlebar h1 {font-size:2.2rem;}
    header.toppanel div.titlebar h2 {font-size:.9rem;}
    section#home div.mediac .virtualtour {width:38rem; height:21.30rem; margin:2rem 0 2rem 0;}    
}