/*
Theme Name: Time Inc Video
*/


/*css starts here*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}


article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section { display: block; }


table,
th,
td { border: none }


table {
	border-collapse: separate;
	border-spacing: 0;
	border-width: 1px 0 0 1px;
	margin: 0 0 1.6em;
	table-layout: fixed; /* Prevents HTML tables from becoming too wide */
	width: 100%;
}



caption,
th,
td {
	font-weight: normal;
	text-align: left;
}


th {
	border-width: 0 1px 1px 0;
	font-weight: 700;
}


td {
	border-width: 0 1px 1px 0;
}



th, td {
	padding: 0.4em;
}



th { font-size: 24px; letter-spacing: 1px; line-height: 28px;
}



/* =Global----------------------------------------------- */

* { margin: 0; padding: 0; border: none;box-sizing:border-box; -webkit-box-sizing:border-box;  -o-box-sizing:border-box;  -moz-box-sizing:border-box;  -ms-box-sizing:border-box; line-height: normal }

input { border: 0; outline: none }

img { border: none; outline: none; max-width: 100%; height: auto }

ul, ul li { list-style: none;}

ol, ol li { list-style: decimal;}

input[type="submit"], input[type="button"] { cursor: pointer }

.clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0 }

.clearfix { display: inline-block }

.clear{ display:block; width:100%; height:1px; background:none; clear:both; }

* html .clearfix { height:1%;}

.clearfix { display: block }

textarea, input[type="text"], input[type="button"], input[type="submit"] { -webkit-appearance: none; border-radius: 0; resize: none; max-width:100%; }

p, span, a, small, blockquote, ul, li {line-height: normal;}

figure { max-width: 100% }

blockquote, q {quotes:"" ""; font-size:26px; font-style:italic; line-height:1; color:#ffffff; font-family:Arial, Helvetica, sans-serif; padding:20px 0;}

a { text-decoration: none; color:inherit; outline: none; }

h1, h2, h3, h4, h5, h6 { margin: 0; line-height: normal; color:#ffffff; padding-bottom:5px; }

h1 { font-size:34px; line-height:36px;}

h2 { font-size:30px;line-height:32px;}

h3 { font-size:24px;line-height:28px;}

h4 { font-size:20px;line-height:24px;}

h5 { font-size:18px;line-height:20px;}

h6 { font-size:16px;line-height:18px;}


hr {
	background-color: #ccc;
	border: 0;
	height: 1px;
	margin-bottom: 1.625em;
}


/* Text elements */

p {
	margin-bottom: 0; font-family: 'Work Sans';
	 font-size:16px; line-height:22px; font-weight:300; color:#afafaf;
}



dl {
	margin: 0 1.625em;
}



dt {
	font-weight: bold;
}


dd {
	margin-bottom: 1.625em;
}


strong {
	font-weight: bold;
}


cite, em, i {
	font-style: italic;
}


blockquote {
	font-style: italic;
	font-weight: normal;
	margin: 0 1em;
}


blockquote em, blockquote i, blockquote cite {
	font-style: normal;
}


blockquote cite {
	color: #666;
	font: 12px "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight: 300;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}


blockquote:before, blockquote:after,
q:before, q:after {
	content: "";
}


blockquote, q {
	quotes: "" "";
}


a img {
	border: 0;
}


pre {
	background: #f4f4f4;
	font: 13px "Courier 10 Pitch", Courier, monospace;
	line-height: 1.5;
	margin-bottom: 1.625em;
	overflow: auto;
	padding: 0.75em 1.625em;
}



sup,
sub {
	font-size: 70%;
	height: 0;
	line-height: 1;
	position: relative;
	vertical-align: baseline;
}


sup {
	bottom: 1ex;
}


sub {
	top: .5ex;
}



/* Links */
a {
	color: #4e8abe;
	text-decoration: none;
	/*transition: all 0.5s ease-in-out 0s;*/
}


a:focus,
a:active,
a:hover {
	text-decoration: none;
}


:focus {/* remember to define focus styles! */
	outline: 0;
}


table {/* tables still need 'cellspacing="0"' in the markup */
	border-collapse: separate;
	border-spacing: 0;
}


caption, th, td {font-weight: normal;text-align: left;vertical-align:top;}


th,td{color: #000;
font-size: 16px;
line-height: 19px;
text-align: left;}


table img{ margin:0 !important; width:100%;}



/* Reset CSS ENDS HERE */

html { -webkit-font-smoothing: antialiased; height:100%;}
body { font-size:14px; color:#000; font-family: 'Work Sans', sans-serif; background:#031623;-webkit-font-smoothing: antialiased;height:100%; overflow-x: hidden;}

.wrapper { max-width:100%; margin:0 auto; padding:0 75px; }


div#siteloader { position: fixed; left: 0; top: 0; z-index: 9999999; width: 100%; height: 100%; overflow: visible; background: #000 url(../images/spin.gif) no-repeat center center; }

/*Brand Styles*/
.caption_cont_inner img.logo40 { height: 40px; width: auto; }
.caption_cont_inner img.logo35 { height: 35px; width: auto; }

.social-desc { font-family: 'Work Sans', sans-serif; }

/* layout */
#layout { float:left; width: 100%; height:100%; position:relative; }



/*********Header Css*********/
header{ float:left; width:100%; text-align:center; padding:25px 0 0; position:fixed; z-index:999999; left:0; top:0; min-height:60px; }



header a.logo{ display:inline-block; float:left; position:relative; }
header a.logo img{ vertical-align:top; position:relative;}

header a.toggle_menu{ position:absolute; left:50%; top:15px; transform:translateX(-50%); -webkit-transform:translateX(-50%); -moz-transform:translateX(-50%); display:none; width:30px; height:20px; }
header a.toggle_menu span{ width:100%; display:block; height:3px; background:#fff; position:absolute;left:50%; top:50%; transform:translate(-50%,-50%); -webkit-transform:translate(-50%,-50%); -moz-transform:translate(-50%,-50%); transition:all 0.5s ease; -webkit-transition:all 0.5s ease; -moz-transition:all 0.5s ease;}
header a.toggle_menu:after{content:""; position:absolute; left:0; top:1px; width:100%; height:3px; background:#fff; transition:all 0.5s ease; -webkit-transition:all 0.5s ease; -moz-transition:all 0.5s ease;}
header a.toggle_menu:before{content:""; position:absolute; left:0; bottom:0; width:100%; height:3px; background:#fff; transition:all 0.5s ease; -webkit-transition:all 0.5s ease; -moz-transition:all 0.5s ease;}


header a.contact_link{ display:inline-block; float:right; color:#fff; font-family: 'Work Sans'; font-weight:500; font-size:16px; line-height:22px;}

.navigation{ position:fixed; left:50%; top:0; width:100%; height:0; overflow-Y:scroll; z-index:99999; padding:50px 0 0; background:rgba(3,22,35,0.90); transform:translateX(-50%); -webkit-transform:translateX(-50%); -moz-transform:translateX(-50%);transition:all 0.3s ease; -webkit-transition:all 0.3s ease; -moz-transition:all 0.3s ease; display:none;}
.navigation ul{ list-style:none;  text-align:center; height:100%;}
.navigation ul li{ display:inline-block; width:100%; padding:2px 0 2px;}
.navigation ul li a{ display:inline-block; width:100%;  font-family: 'Work Sans'; font-weight:500; font-size:16px; line-height:40px; color:#fff; padding:30px 0; background-size: cover !important; position:relative;}
.navigation ul li a:after{content:""; position:absolute; left:0; top:0; width:100%; height:100%;  background:rgba(3,22,35,0.75);}
.navigation ul li a span{ position:relative; z-index:99;}
.navigation.active{ height:100%;}




/********************************************Big Slider Css******************************************************************/

.slider_container{ float:left; width:100%; height:calc(100vh - 230px); -webkit-height:calc(100vh - 230px);}

/****Css For Flex Slider*******/
.slider_container .flexslider { background:none; border:none; border-radius:0; height:100%; margin:0;}
.slider_container .flexslider .flex-viewport{ height:100%;}
.slider_container .flexslider .slides{height:100%;}
.slider_container .flexslider .slides > li{height:100%;}
.slider_container .flexslider .slides > li .big_slide{ float:left; width:100%;  height:100%; background:#031623; position:relative; overflow:hidden;}
.slider_container .flexslider .slides > li .big_slide:after{ content:""; position:absolute; left:0; top:0; width:100%; height:289px; z-index:-1; background:url(../images/top_overlay.webp) repeat-x 0 bottom; z-index:9;}
/****Css For Flex Slider*******/


.big_slide video{ position:absolute !important; top:50% !important; left: 50% !important; min-width: 100%; min-height: 100%; width: auto !important; height:auto !important; z-index:1; transform:translateX(-50%)translateY(-50%); -webkit-transform:translateX(-50%)translateY(-50%); -moz-transform:translateX(-50%)translateY(-50%); -ms-transform:translateX(-50%)translateY(-50%);}



.big_slide .overlay_cont{ display:block; width:100%; height:100%; position:absolute;left:0; right:0; top:0; bottom:0; background:rgba(3,22,35,0.70); z-index:99;}
.big_slide .overlay_cont a.big_logo{ position:absolute;left:50%; top:50%; transform:translate(-50%,-50%); -webkit-transform:translate(-50%,-50%); -moz-transform:translate(-50%,-50%); display:inline-block; }
.big_slide .overlay_cont a.big_logo img{ vertical-align:top;}

.big_slide .overlay_cont a.full_vid{ position:absolute;left:50%; bottom:0; transform:translateX(-50%); -webkit-transform:translateX(-50%); -moz-transform:translateX(-50%); font-family: 'Work Sans'; font-weight:700; font-size:16px; line-height:20px; color:#fff; text-decoration:underline; margin-bottom:15px; }
.big_slide .overlay_cont a.full_vid:hover{ text-decoration:none;}


.big_slide figure{ width:77%; float:right; height:100%; background-size:cover !important; position:absolute; right:0; top:0; transition:all 0.5s ease; -webkit-transition:all 0.5s ease; -moz-transition:all 0.5s ease; opacity:0; transform: scale(1.2,1.2); -webkit-transform: scale(1.2,1.2); -moz-transform: scale(1.2,1.2); -ms-transform: scale(1.2,1.2);}
.big_slide figure.img_active{ opacity:1; transform: scale(1,1); -webkit-transform: scale(1,1); -moz-transform: scale(1,1); -ms-transform: scale(1,1);}

.big_slide ul.gal_paging{ position:absolute; right:20px; bottom:20px; z-index:999;}
.big_slide ul.gal_paging li{ display:inline-block; /*width:10px; height:10px;*/ background:#fff; border-radius:50%; margin:0 5px; box-shadow:0 0 10px #000;}
.big_slide ul.gal_paging li.dot_active{ background:#00a3dd;}
.big_slide ul.gal_paging li a{ display:block; width:15px; height:15px; border-radius:50%;}

.big_slide .wrapper{ height:100%;}
.big_slide .caption_cont{ display:block; width:30%; height:100%; position:relative; background:#031623; z-index:99;}
.big_slide .caption_cont:after{content:""; position:absolute;left:-50vw; top:0; width:50vw; height:100%; background:#031623;}
.big_slide .caption_cont:before{content:""; position:absolute; right:-440px; top:0; width:717px; height:100%; background:url(../images/caption_shadow.webp) repeat-y right 0;}

.big_slide a.play_btn{ display:block; position:absolute; top:50%; right:35%; width:71px; height:71px; background:url(../images/play_btn_big.webp) no-repeat center center; transform:translateY(-50%); -webkit-transform:translateY(-50%); -moz-transform:translateY(-50%); z-index:999;}


.big_slide .caption_cont .caption_cont_inner{ position:absolute;left:0; top:30%; /*transform:translateY(50%); -webkit-transform:translateY(50%); -moz-transform:translateY(50%);*/ max-width:440px; padding:10px 0 0;}
.big_slide .caption_cont h3{font-family: 'Work Sans'; font-weight:700; font-size:50px; line-height:52px; position:relative; padding:0 0 10px;}
.big_slide .caption_cont h3:after{ content:""; position:absolute;left:0; top:-24px; width:85px; height:7px; background:#0194c9; }

.big_slide .caption_cont p{font-family: 'Work Sans'; font-size:16px; line-height:22px; color:#afafaf; padding:0 0 20px;}
.big_slide .caption_cont h4{font-family: 'Work Sans'; font-weight:500; font-size:16px; line-height:22px; padding:0 0 25px;}
.big_slide .caption_cont ul{ list-style:none; }
.big_slide .caption_cont ul li{ display:inline-block; list-style:none; margin-left:28px;}
.big_slide .caption_cont ul li:first-child{ margin-left:0;}
.big_slide .caption_cont ul li a{ display:block;}
.big_slide .caption_cont ul li a img{ vertical-align:top; }


/********************************************Nav Slider Css******************************************************************/

.nav_container{float:left; width:100%; height:225px; padding:40px 0 35px;}
.nav_container .wrapper{height:100%; }

.nav_container .slider_nav{float:left; width:100%;  height:100%; position:relative; }

.slider_nav .flex-prev{ position:absolute; font-size:0; background:url(../images/prev_arr.webp) no-repeat center center; width:11px; height:18px; margin:auto 0 ;left:-20px;  bottom:50%; z-index:999; cursor:pointer; opacity:0.7; margin-bottom:-18px; }
.slider_nav .flex-prev:hover{ opacity:1;}

.slider_nav .flex-next{ position:absolute; font-size:0; background:url(../images/next_arr.webp) no-repeat center center; width:11px; height:18px; margin:auto 0; right:-20px; bottom:50%; z-index:999; cursor:pointer; opacity:0.7; margin-bottom:-18px;}
.slider_nav .flex-next:hover{ opacity:1;}

/****Css For Flex Slider*******/
.nav_container .flexslider { background:none; border:none; border-radius:0; height:100%; margin:0;}
.nav_container .flexslider .flex-viewport{ height:100%; padding:15px 0 0;}
.nav_container .flexslider .slides{height:100%;}
.nav_container .flexslider .slides > li{height:100%;}
.nav_container .flexslider .slides > li .nav_slide{ float:left; width:100%;  height:100%; }
/****Css For Flex Slider*******/


li .nav_slide figure{float:left; width:100%;  height:100%; background-size:cover !important; position:relative;}
li .nav_slide figure:before{ content:""; position:absolute; left:0; top:-14px; width:100%; height:7px; background:#00a3dd; opacity:0; transition:all 0.3s ease; -webkit-transition:all 0.3s ease; -moz-transition:all 0.3s ease;}

li.flex-active-slide .nav_slide figure:before{ opacity:1;}
li.flex-active-slide .nav_slide figure:after{ content:""; position:absolute; left:0; top:0; width:100%; height:100%; border:2px solid #fff; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; }


.nav_slide figure a{ display:block; position:absolute; left:0; top:0; width:100%; height:100%; background:rgba(0,163,221,0.6); opacity:0; transition:all 0.3s ease; -webkit-transition:all 0.3s ease; -moz-transition:all 0.3s ease; z-index:999;}
.nav_slide figure a span{ position:absolute; display:block; width:31px; height:37px; background:url(../images/play_btn.webp) no-repeat 0 0; left:50%; top:50%; transform:translate(-50%,-50%); -webkit-transform:translate(-50%,-50%); -moz-transform:translate(-50%,-50%);}
.nav_slide figure a span:hover{ background-position:-31px 0;}
.nav_slide figure:hover a{ opacity:1;}





a#back_to_top{ box-shadow: 0px 0px 15px rgba(0,0,0,0.4) inset; -webkit-box-shadow: 0px 0px 15px rgba(0,0,0,0.4) inset; -ms-box-shadow: 0px 0px 15px rgba(0,0,0,0.4) inset; position: fixed; bottom: 20px; display: none; right: 15px; z-index: 9999; width: 34px; height: 34px; cursor: pointer; border-radius: 50%; -webkit-border-radius: 50%; background:#151747; opacity: 0.7; }
a#back_to_top:after { width: 0px; height: 0px; content: ''; position: absolute; left: 50%; top: 50%; border: 10px solid transparent; border-bottom-color: #fff; margin: -15px 0 0 -10px; }



/******* CSS LIGHTBOX *******/
/*Eliminates padding, centers the thumbnail */
.v_box{ position:relative; height:100%; width:100%; /*padding-top:40px;*/ /*padding-bottom: 56.25%;*/}
.video-js{ width:100%; height:100%; position:absolute; top:0px; bottom:0px; right:0px; left:0px; background:#000;}


/* Styles the lightbox, removes it from sight and adds the fade-in transition */
.vid_box { position: fixed; top: -100%; background: rgba(0,0,0,.8); opacity: 0; -webkit-transition: opacity .5s ease-in-out; -moz-transition: opacity .5s ease-in-out; -o-transition: opacity .5s ease-in-out; transition: opacity .5s ease-in-out; overflow: hidden; z-index:999999; width: 100%; max-width: 100%;padding:0; /*padding:50px 15% 0;*/ }

/* Styles the lightbox image, centers it vertically and horizontally, adds the zoom-in transition and makes it responsive using a combination of margin and absolute positioning */
.vid_box video { margin: auto; position: absolute; top: 0; left:0; right:0; bottom: 0; max-height: 0%; max-width: 0%; border: none; box-shadow: 0px 0px 8px rgba(0,0,0,.3); box-sizing: border-box; -webkit-transition: .5s ease-in-out; -moz-transition: .5s ease-in-out; -o-transition: .5s ease-in-out; transition: .5s ease-in-out; }

/* Styles the close link, adds the slide down transition */
a.vid-close { display: block; width:25px; height:30px; box-sizing: border-box; background: none; color: black; text-decoration: none; position: absolute; top: -80px; right: 35px; -webkit-transition: .5s ease-in-out; -moz-transition: .5s ease-in-out; -o-transition: .5s ease-in-out; transition: .5s ease-in-out; }

/* Provides part of the "X" to eliminate an image from the close link */
a.vid-close:before { content: ""; display: block; height: 30px; width: 4px; background: white; position: absolute; left: 12px; top:3px; -webkit-transform:rotate(45deg); -moz-transform:rotate(45deg); -o-transform:rotate(45deg); transform:rotate(45deg); }

/* Provides part of the "X" to eliminate an image from the close link */
a.vid-close:after { content: ""; display: block; height: 30px; width: 4px; background: white; position: absolute; left: 12px; top:3px; -webkit-transform:rotate(-45deg); -moz-transform:rotate(-45deg); -o-transform:rotate(-45deg); transform:rotate(-45deg); }

/* Uses the :target pseudo-class to perform the animations upon clicking the .vid_box anchor */
.vid_box.active { opacity: 1; top: 0; bottom: 0; }
.vid_box.active video { max-height: 100%; max-width: 100%; }
.vid_box.active a.vid-close { top: 35px; }



html { -webkit-text-size-adjust: 100%; /* Prevent font scaling in landscape while allowing user zoom */ }