/*********************************************
 GLOBAL
*********************************************/
html {height:100%;}
body {min-height:100%; margin:0px; padding:0px; font-family:"Open Sans", Verdana; font-size:16px; color: #333; background-color:#FFF;}
h1 {font-family: "Roboto"; font-size:3.0em; line-height:1.4em; font-weight:300; margin:0.5em 0; color:#333;}
h2 {font-family: "Roboto"; font-size:2.4em; line-height:1.4em; font-weight:300; margin:0.5em 0; color:#333;}
h3 {font-family: "Roboto"; font-size:1.4em; line-height:1.4em; font-weight:300; margin:0.5em 0; color:#333;}
h4 {font-size:11px; line-height:1.6em; font-weight:bold;}
p { line-height:2em; margin:1em 0;}
a {color:inherit; text-decoration:underline; cursor:pointer;}
hr {border:0; height:0; border-top:1px solid rgba(0, 0, 0, 0.3); border-bottom:1px solid rgba(255, 255, 255, 0.3);}
em {font-style:italic;}
b,strong {font-weight:600;}
ul, ol { margin: 1em 0; padding: 0;}
ul li, ol li { line-height: 2em; margin-left: 25px; }
ul li { list-style: disc outside; }
ol li { list-style: decimal outside; }
img { max-width:100%; }

/*********************************************
 TEMPLATE SPECIFIC
*********************************************/
body::after { content: ''; display: block; width: 100%; height: 100vh; background:#000; z-index: -5; position: fixed; top:0; }
.main { position: relative; z-index: 6; margin-top: 100vh; background-color: #FFF; width: 100%; max-width:100%; box-shadow: 0 0 50px 0 rgba(0,0,0,.8); box-sizing: border-box; }
.content { box-sizing:border-box; width:1000px; max-width: 100%; margin:0 auto; padding:30px 10px; }
.builder_content > section > .grid-container { width: 1000px; max-width: 100%; margin: 0 auto; }
.builder_content > section:first-of-type { padding-top: 30px; }
.builder_content > section:last-of-type { padding-bottom: 30px; }
.black { background: #151515; position: fixed; opacity:0; top: 0; width: 100%; height: 100vh; z-index: 5; pointer-events: none; }
.footer { background-color:#151515; color:#AAA; text-align:center; padding:40px 0; border-top: 1px solid #555; }
.footer a { text-decoration: none; transition:all .125s ease-in-out; }
.footer a:hover { color:#FFF; }

/*********************************************
 NAVIGATION BIG
*********************************************/
.nav_big { position: fixed; z-index: 4; top: 0; width: 100%; height: 100vh; padding: 20px 0; box-sizing: border-box; display: flex; justify-content: center; flex-flow: column; color:#FFF; overflow: hidden; background: linear-gradient(to right, rgba(0,0,0,0.6) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,0) 100%); }
.nav_big li { margin: 0; padding: 0; list-style: none; }
.nav_big a { text-decoration: none; font-family: 'Roboto'; font-size: 44px; line-height: 70px; font-weight: 800; text-transform: uppercase; white-space: nowrap; transition:all .125s ease-in-out; }
.nav_big .brand a { border-bottom: 2px solid #FFF; padding-bottom: 5px; font-weight: 200; white-space: nowrap; }
.nav_big .main-menu { max-height: 420px; overflow-y: auto; width: calc(100% + 20px); box-sizing: border-box; }
.nav_big .main-menu a i { margin-right: 20px; }
.nav_big > * { padding-left: 75px;  }
.nav_big .sub-menu, .nav_big label, .nav_big input { display:none; }

/*********************************************
 NAVIGATION SMALL
*********************************************/
/* HEADER */
.nav_small { position: -webkit-sticky; position: -moz-sticky; position: -o-sticky;  position: -ms-sticky; position: sticky; top: 0px; z-index: 10; }
/* BRAND */
.nav_small .brand { display:inline-block; vertical-align:middle; text-transform: uppercase; }
.nav_small .brand a { display:block; font-size:1em; line-height:3.5em; padding:1em 0.5em; font-weight:600; text-decoration:none; }
.nav_small .brand img { vertical-align:middle; margin-right:7px; }
/* MENU */
.nav_small .menu { display: inline-block; vertical-align:middle; }
.nav_small .menu label { display: inline-block; }
.nav_small .menu label#toggle-menu { display:none; position:relative; font-family: 'Open sans'; font-size:1.2em; line-height:3.5em; padding:0 1em; }
.nav_small .menu label#toggle-menu img { vertical-align:text-bottom; margin-right: 10px; }
.nav_small .menu input[type="checkbox"] { display:none;}
.nav_small .menu .main-menu { margin:0; padding:0; }
.nav_small .menu .main-menu li { float:left; margin:0; position:relative; display:block; white-space:nowrap; list-style:none; }
.nav_small .menu .main-menu a { display:block; padding:0 0.8em; cursor:pointer; text-decoration:none; transition:color .125s ease-in-out; }
.nav_small .menu .main-menu i { margin-right:5px; }
.nav_small .menu .main-menu .sub-menu { display:none;}
.nav_small .menu .sub-menu { margin:0; position:absolute; top:100%; left:0; min-width:200px; z-index:10; }
.nav_small .menu .sub-menu li { float:none; }
.nav_small .menu .sub-menu .sub-menu {top:-5px;left:100%;}
/* MENU APPARENCE */
.nav_small { background-color:#151515; font-size: 14px; color:#CCC; border-bottom: 1px solid #555; }
.nav_small .menu { text-transform:uppercase; font-weight:600; }
.nav_small .menu .main-menu a { line-height:3.5em;}
.nav_small .menu .sub-menu { background-color:#333; border-top:5px solid #555; border-bottom: 1px solid #555; border-left: 1px solid #555; border-right: 1px solid #555; }
.nav_small .menu .sub-menu a:hover { background-color:rgba(0,0,0,.1); }

@media only screen and (min-width: 1024px) {
.nav_small { padding:0 20px; text-align: center;}
.nav_small .menu .main-menu li:hover > input[type="checkbox"] + .sub-menu {display:block;}
.nav_small .menu .main-menu li.top_level > a { display:inline-block; padding:1em 0.8em; }
.nav_small .menu .main-menu li.top_level > a::after { content:""; display:block; background-color: #999; width:0; height:2px; transition: width 0.2s ease-in-out;}
.nav_small .menu .main-menu li.top_level > a:hover::after { width: calc(100% + 5px); }
.nav_small .menu .main-menu .drop-icon { margin-left: -7px; opacity: 0.7; }
.nav_small .menu .sub-menu a {	padding: 0em 2.5em 0em 0.8em; text-align: left; }
.nav_small .menu .sub-menu .drop-icon { position:absolute; top:0; right:10px; line-height:3.5em; transform: rotate(-90deg); }
}

@media only screen and (max-width: 1024px) {
.nav_small .brand { display:none; }
.nav_small .menu { display:block; max-height:100vh; overflow:auto; }
.nav_small .menu label#toggle-menu { display:block; }
.nav_small .menu input#tm:checked + .main-menu { display:block; }
.nav_small .menu input[type="checkbox"]:checked + .sub-menu { display:block; }
.nav_small .menu .main-menu { display:none; }
.nav_small .menu .main-menu li { float:none; }
.nav_small .menu .sub-menu { position:inherit; top:0; left:0; }
.nav_small .menu .sub-menu .sub-menu { position:inherit; top:0; left:0; }
.nav_small .menu .drop-icon { position:absolute; top:0; right:0; line-height:3.5em; width:40px; padding: 0; text-align: center; box-sizing: border-box; }
/* MENU APPARENCE */
.nav_small .menu .main-menu { background-color:rgba(128,128,128,.1); }
.nav_small .menu .main-menu li { border-top:1px solid rgba(255,255,255,0.2); }
.nav_small .menu .main-menu a:hover { background-color:rgba(128,128,128,.1); }
.nav_small .menu .sub-menu { background-color:rgba(128,128,128,.1); border-top:2px solid rgba(255,255,255,0.2); border-bottom:2px solid rgba(255,255,255,0.2); border-left:hidden; border-right:hidden; }
.nav_small .menu .drop-icon { color:rgba(255,255,255,0.5); background-color:rgba(255,255,255,.1); }
}

/*********************************************
 SOCIAL
*********************************************/
.social > div { border-top: 2px solid #FFF; padding-top: 15px; }
.social a { position:relative; font-size:22px!important; display:inline-block; width:40px; height:40px; line-height:40px!important; margin:5px; text-align:center; vertical-align:middle; color:#FFFA; background:#FFF3; border-radius:50%; }
.social a:hover { color:#FFF }
.social a.facebook:hover { background:#3B5998 }
.social a.twitter:hover { background:#2DADDC }
.social a.mybusiness:hover { background:#C53727 }
.social a.instagram:hover { background:radial-gradient(circle farthest-corner at 35% 90%, #fec564, transparent 50%), radial-gradient(circle farthest-corner at 0 140%, #fec564, transparent 50%), radial-gradient(ellipse farthest-corner at 0 -25%, #5258cf, transparent 50%), radial-gradient(ellipse farthest-corner at 20% -50%, #5258cf, transparent 50%), radial-gradient(ellipse farthest-corner at 100% 0, #893dc2, transparent 50%), radial-gradient(ellipse farthest-corner at 60% -20%, #893dc2, transparent 50%), radial-gradient(ellipse farthest-corner at 100% 100%, #d9317a, transparent), linear-gradient(#6559ca, #bc318f 30%, #e33f5f 50%, #f77638 70%, #fec66d 100%); }
.social a.pinterest:hover { background:#E60023 }
.social a.linkedin:hover { background:#0077B5 }
.social a.tripadvisor:hover { background:#00A680 }
.social a.houzz:hover { background:#7CC04B }
.social a.tiktok:hover { background:#EF2950 }
.social a.oeil_de_france:hover{background:#EFAB29}
.social a.oeil_de_france img{width: 90%;padding: 5%; filter: grayscale(1);}
.social a.oeil_de_france:hover img{filter: grayscale(0);}
.social i { line-height:40px }
.footer .social a { color:#FFF }
.footer .social a.facebook { background:#3B5998 }
.footer .social a.twitter { background:#2DADDC }
.footer .social a.mybusiness { background:#C53727 }
.footer .social a.instagram { background:radial-gradient(circle farthest-corner at 35% 90%, #fec564, transparent 50%), radial-gradient(circle farthest-corner at 0 140%, #fec564, transparent 50%), radial-gradient(ellipse farthest-corner at 0 -25%, #5258cf, transparent 50%), radial-gradient(ellipse farthest-corner at 20% -50%, #5258cf, transparent 50%), radial-gradient(ellipse farthest-corner at 100% 0, #893dc2, transparent 50%), radial-gradient(ellipse farthest-corner at 60% -20%, #893dc2, transparent 50%), radial-gradient(ellipse farthest-corner at 100% 100%, #d9317a, transparent), linear-gradient(#6559ca, #bc318f 30%, #e33f5f 50%, #f77638 70%, #fec66d 100%); }
.footer .social a.pinterest { background:#E60023 }
.footer .social a.linkedin { background:#0077B5 }
.footer .social a.tripadvisor { background:#00A680 }
.footer .social a.houzz { background:#7CC04B }
.footer .social a.tiktok { background:#EF2950 }
.footer .social a.oeil_de_france{background:#EFAB29}
.footer .social a:hover { background:#FFF3 }

/*********************************************
 TUBULAR - YOUTUBE BG
*********************************************/
#tubular-container {position:fixed; top: 0; z-index: 1; }
#tubular-shield {position:fixed!important; background-color:rgba(0,0,0,0.5); z-index: 2;}

/*********************************************
 NAVIGATION ANIMATIONS DELAYS
*********************************************/
.nav_big { transition-delay: 0ms; animation-delay: 0ms; }
.nav_big .brand { transition-delay: 400ms; animation-delay: 400ms; }
.nav_big .main-menu > li:nth-child(1) { transition-delay: 600ms; animation-delay: 600ms; }
.nav_big .main-menu > li:nth-child(2) { transition-delay: 800ms; animation-delay: 800ms; }
.nav_big .main-menu > li:nth-child(3) { transition-delay: 1000ms; animation-delay: 1000ms; }
.nav_big .main-menu > li:nth-child(4) { transition-delay: 1200ms; animation-delay: 1200ms; }
.nav_big .main-menu > li:nth-child(5) { transition-delay: 1400ms; animation-delay: 1400ms; }
.nav_big .main-menu > li:nth-child(6) { transition-delay: 1600ms; animation-delay: 1600ms; }
.nav_big .main-menu > li:nth-child(7) { transition-delay: 1800ms; animation-delay: 1800ms; }
.nav_big .main-menu > li:nth-child(8) { transition-delay: 2000ms; animation-delay: 2000ms; }
.nav_big .main-menu > li:nth-child(9) { transition-delay: 2200ms; animation-delay: 2200ms; }
.nav_big .main-menu > li:nth-child(10) { transition-delay: 2400ms; animation-delay: 2400ms; }
.nav_big .main-menu > li:nth-child(11) { transition-delay: 2600ms; animation-delay: 2600ms; }
.nav_big .main-menu > li:nth-child(12) { transition-delay: 2800ms; animation-delay: 2800ms; }
.nav_big .main-menu > li:nth-child(13) { transition-delay: 3000ms; animation-delay: 3000ms; }
.nav_big .main-menu > li:nth-child(14) { transition-delay: 3200ms; animation-delay: 3200ms; }
.nav_big .main-menu > li:nth-child(15) { transition-delay: 3400ms; animation-delay: 3400ms; }
.nav_big .main-menu > li:nth-child(16) { transition-delay: 3600ms; animation-delay: 3600ms; }
.nav_big .main-menu > li:nth-child(17) { transition-delay: 3800ms; animation-delay: 3800ms; }
.nav_big .main-menu > li:nth-child(18) { transition-delay: 4000ms; animation-delay: 4000ms; }
.nav_big .main-menu > li:nth-child(19) { transition-delay: 4200ms; animation-delay: 4200ms; }
.nav_big .main-menu > li:nth-child(20) { transition-delay: 4400ms; animation-delay: 4400ms; }
.nav_big .social { transition-delay: 2500ms; animation-delay: 2500ms; }

/*********************************************
 MOUSE ICON
*********************************************/
.down_arrow { text-align: center; font-size: 40px; color: #FFF; position: fixed; width: 100%; top: calc(100vh - 100px); z-index: 3; }
.mouse-icon { border: 3px solid #FFF; border-radius: 16px; height: 40px; width: 24px; display: block; margin: 0 auto; opacity: 0.8; }
.mouse-icon .wheel { position: relative; border-radius: 10px; background: #FFF; width: 4px; height: 8px; top: 4px; margin-left: auto; margin-right: auto; }
.mouse-icon .wheel { animation: 1s ease-in 0s infinite both running drop; -webkit-animation: 1s ease-in 0s infinite both running drop; }
@-webkit-keyframes drop { 0% { top: 5px; opacity: 0; } 30% { top: 10px; opacity: 1; } 100% { top: 25px; opacity: 0; } }
@keyframes drop { 0% { top: 5px; opacity: 0; } 30% { top: 10px; opacity: 1; } 100% { top: 25px; opacity: 0; } }

/*********************************************
 MEDIA QUERIES
*********************************************/
@media only screen and (max-width: 1024px) {
	h1 { font-size: 2.5em; }
	h2 { font-size: 2.0em; }
    .nav_big > * { padding: 0 45px; }
    .nav_big a { font-size: 34px; line-height: 55px; }
    .nav_big .main-menu a i { margin-right: 10px; }
    .down_arrow { display: none; }
}
@media only screen and (max-width: 479px) {
	h1 { font-size: 2.0em; }
	h2 { font-size: 1.8em; }
    .nav_big > * { padding: 0 15px; }
    .nav_big a { font-size: 26px; line-height: 45px; }
    .nav_big .main-menu a i { margin-right: 5px; }
    .nav_big .social { display: none; }
}

