/*********************************************
 GLOBAL
*********************************************/
html {height:100%;}
body {min-height:100%; margin:0px; padding:0px; font-family: "Open Sans", Verdana, sans-serif; font-size:14px; color: #FFF; background-color:#000;}
h1 {font-size:3.5em; line-height:1.4em; font-weight:300; margin:0.4em 0; color:#FFF;}
h2 {font-size:2.2em; line-height:1.6em; font-weight:300; margin:0.4em 0; color:#FFF;}
h3 {font-size:1.4em; line-height:1.6em; font-weight:400; margin:0.4em 0; color:#FFF;}
h4 {font-size:11px; line-height:1.6em; font-weight:bold;}
p {font-size:14px; line-height:2em; color:inherit; margin:1em 0; }
a {color:#FFF; 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:bold;}
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
*********************************************/
#content {min-height: 100vh; padding:0px; margin: 0 0 0; position:relative; z-index:5;}
#canvas { opacity: 0; width: 100%; height: 100vh; position: fixed; z-index: 4; overflow: hidden; top:0;}
#canvas_one, #canvas_two{ position:fixed; top:0; width:100%; height:100%; }
#tubular-container {position:fixed; top:0;}
#tubular-shield {background-color:rgba(0,0,0,0.5);}
.logo{ width: 75%; margin:0 auto; }
.logo img{ max-width:100%; max-height:450px; }
.footer{width:100%;text-align:center;padding: 25px 30px;background-color:#151515; color:#666;position: relative; z-index:5;line-height: 16px; box-sizing: border-box; }
.footer a{color:#666; text-decoration:none;cursor:pointer;transition: all 0.3s ease-out;}
.footer a:hover{color:#FFF;}
.content { width: 960px; margin: 0 auto; padding: 80px 20px; box-sizing: border-box; }
.builder_content > section:first-of-type { padding-top: 80px; }
.builder_content > section:last-of-type { padding-bottom: 80px; }
.builder_content > section > .grid-container { width: 960px; max-width: 100%; margin: 0 auto; }
.transition { position: relative; display: block; width: 100%; height: 35vh; overflow: hidden; text-shadow: 1px 1px 1px rgba(0,0,0,0.5);}
.transition.first{height:100vh; background: linear-gradient(to bottom,  rgba(0,0,0,0.5) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,0) 100%);}
.centralize { position: relative; top: 50%; -webkit-transform: translateZ(0px) translateX(0px) translateY(-50%); transform: translateX(0px) translateY(-50%); }
.darker {background:rgba(21,21,21,0.5); border-top: 1px solid #666; border-bottom: 1px solid #666; }
.hero{ color: #FFF; font: italic 700 45px "Open Sans", Verdana, sans-serif; text-transform: uppercase; }
.sub_hero{ color: rgba(255,255,255,0.6); font: italic 400 25px "Open Sans", Verdana, sans-serif; }
.animated_canvas { transition: opacity 2s;}
.transition_bg1, .transition_bg2{width: 100%; height: 100%; position: absolute;top:0;left:0;background-position: center center;background-repeat: no-repeat;background-size: cover;background-attachment: fixed;box-shadow:inset 0 0 5px 0 rgba(0,0,0,0.3);}

/*********************************************
 HEADER
*********************************************/
.header { position: fixed; top:0; width:100%; z-index:6; font-weight:600; text-transform:uppercase; border-bottom:1px solid rgba(102,102,102,0);}
.header > div { line-height:60px; vertical-align:middle;}
.header img { vertical-align:middle; margin-right:10px;}
.header a, .header a * { transition:all 300ms ease-out; text-decoration: none; }
.header .brand { margin-left:-15px; padding:0 15px 0 35px; position: relative;}
.header .brand::after { background-color:rgba(100%,100%,100%,0); padding-right:5px; content:''; width:100%; height:100%; position: absolute; top:0; left:0; transform: skewX(-25deg); z-index:-1; }
.header .brand a { color:#FFF; display:inline-block; margin:0 10px;}
.header.active { background-color: rgba(21,21,21,1); border-bottom:1px solid rgba(102,102,102,1);}
.header.active > div { line-height:60px;}
.header.active .brand a { color: #333; }
.header.active .brand::after { background-color:rgba(100%,100%,100%,1);}
.header.active .main-menu > li > a::after { content:''; width:100%; height:100%; position: absolute; top:0; left:0; transform: skewX(-25deg); z-index:-1;background: linear-gradient(to right, rgba(255,255,255,1) 50%, rgba(255,255,255,0) 50%);background-size: 220% 100%;background-position:right bottom;background-repeat:no-repeat;transition: all 300ms ease-in-out;}
.header.active .main-menu > li > a:hover::after { background-position:left bottom;}

/*********************************************
 MENU
*********************************************/
#menu a { color:#FFF; cursor:pointer;}
#menu i { margin-right:5px;}
#menu ul {margin:0;padding:0;}
#menu .main-menu {display:none;}
#tm:checked + .main-menu {display:block;}
#menu input[type="checkbox"], #menu ul span.drop-icon {display:none;}
#menu .main-menu {background-color:#333;}
#menu .sub-menu {background-color:#444;line-height:50px;}
#menu .sub-menu li a{border-bottom:1px solid #555;}
#menu li, #toggle-menu, #menu a {position:relative;display:block;margin:0;line-height:inherit;white-space:nowrap;}
#toggle-menu, #menu a {padding:0 1em;}
#menu a {transition:all .125s ease-in-out;}
#menu .sub-menu {display:none;}
#menu input[type="checkbox"]:checked + .sub-menu {display:block;}
#menu .sub-menu a:hover {color:#444;}
#toggle-menu .drop-icon, #menu li label.drop-icon {position:absolute;right:0;top:0;}
#menu label {cursor:pointer;}
#menu label.drop-icon, #toggle-menu span.drop-icon {padding:0 1em;font-size:1em;text-align:center;background-color:rgba(0, 0, 0, .125);color:rgba(255, 255, 255, .75);}

@media only screen and (min-width: 1024px) {
.header > div { line-height:100px; display: inline-block;}
.header > div > a, .header > div > ul > li > a{ font-size:1.2em;}
.header.active > div > a, .header.active > div > ul > li > a{ font-size:1em;}
.header.active #menu a:hover, #menu a.hovered { color:#333;}
#menu .main-menu {display:block;background-color:transparent;}
#toggle-menu,  #menu label.drop-icon {display:none;}
#menu ul span.drop-icon {display:inline-block;}
#menu li {float:left;}
#menu .sub-menu li {float:none;}
#menu .sub-menu {margin:0;position:absolute;top:100%;left:-15px;min-width:150px;z-index:3000;border-top:5px solid #666;}
#menu .sub-menu,  #menu input[type="checkbox"]:checked + .sub-menu {display:none;}
#menu .sub-menu .sub-menu {top:-5px;left:100%;}
#menu .sub-menu .drop-icon {position:absolute;top:0;right:0;padding:0 1em;}
#menu li:hover > input[type="checkbox"] + .sub-menu {display:block;}
}

/*********************************************
 SOCIAL
*********************************************/
.social { position: absolute; right:15px;}
.social a { position: relative; display: inline-block; color: #fff; font-size:18px!important; padding:0 10px; }
.social a.facebook:hover i{color:#3B5998}
.social a.twitter:hover i{color:#2DADDC}
.social a.mybusiness:hover i{color:#C53727}
.social a.instagram:hover i{color:#F68237}
.social a.pinterest:hover i{color:#E60023}
.social a.linkedin:hover i{color:#0077B5}
.social a.tripadvisor:hover i{color:#00A680}
.social a.houzz:hover i{color:#7CC04B}
.social a.tiktok:hover i{color:#EF2950}
.social a.oeil_de_france:hover i{color:#EFAB29}

/*********************************************
 MEDIA QUERIES
*********************************************/
@media only screen and (max-width: 1024px) {
	h1 { font-size: 2.5em; }
	h2 { font-size: 2em; }
	.logo { width: 65%; }
	.brand { display:none; }
	.social { display:none; }
	.content { width: 100%; padding: 60px 20px;}
	.builder_content .grid-container { width: 100%; }
	.hero { font-size: 35px; }
	.sub_hero { font-size: 20px; }
	section { height: auto; }
	section .content { width: 100%; }
	section .overlay { position: relative; }
	section .centralize { top: auto; -webkit-transform: none; transform: none; }
	section.first { height: auto; }
	.transition_bg1, .transition_bg2 { background-attachment: scroll!important; }
}
@media only screen and (max-width: 479px) {
	h1 { font-size: 2em; }
	h2 { font-size: 1.6em; }
	.logo { width: 80%;}
	.hero { font-size: 28px; }
	.sub_hero { font-size: 18px; }
}