/* Sizmek EXPANDING  CSS */
/* M. Herholz @ Petrol Advertising, 2016 */



/* = Browser Reset
-----------------------------------------------------------------------------*/
/* http://meyerweb.com/eric/tools/css/reset/ */

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;
}

/* HTML5 display-role reset for older browsers */

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
	background: #FFF;
}

ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
/* /Browser Reset */



/* --------------------------------------------------*/
/* GENERAL CLASSES
/* --------------------------------------------------*/
html, body {
    font-family: Arial, Helvetica, sans-serif;
}

#container div,
#container img {
	position: absolute;
}

#container {
    position: absolute;
    display: block;
    width: 970px;
    height: 500px;
}

img, video, svg {
	display: block; /* now it doesn't adhere to line-height anymore */
}

.frame {
	box-sizing: border-box;
	border: 1px solid #000;
}

#ad {
    position: absolute;
    display: block;
    background: #000;
    border: #000 1px solid;
    overflow: hidden;
    -moz-user-select: -moz-none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    transition: all .5s cubic-bezier(0,.5,.25,1);
    -webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}

#ad.collapsed {
    width: 968px;
    /*2px smaller to account for border*/
    
    height: 248px;
    /*2px smaller to account for border*/
}

#ad.expanded {
    width: 968px;
    /*2px smaller to account for border*/
    
    height: 498px;
    /*2px smaller to account for border*/
}

.centered {
    bottom: 0;
    left: 0;
    margin: auto;
    position: absolute;
    right: 0;
    top: 0;
}

.fadeIn {
	opacity: 1 !important;
}

.fadeOut {
	transition: all .35s ease !important;
	opacity: 0 !important;
}


#flowTop {
	position: absolute;
	top: 0px;
	left:0px;
	cursor: default;
	pointer-events: none;
	transition: opacity .5s ease;
}

#flowBot {
	position: absolute;
	bottom: 0px;
	right:0px;
	cursor: default;
	pointer-events: none;
  	transition: opacity .5s ease;
}


/* --------------------------------------------------*/
/* Collapsed Panel*/
/* --------------------------------------------------*/
#col_panel {
    top: 0;
    left: 0;
    display: block;
    width: 968px;
    height: 248px;
    background: #000;
}

#expandBtn{
  	top: 280px;
	left: 425px; 
	width: 160px;
	height: 30px;
	background: #E00000;
	border: 1px solid #FFF;
	overflow: hidden;
	pointer-events: all;
	cursor: pointer;
	transition: all .8s ease;
}

#col_exp1 {
	position: absolute;
	top: -1px;
	left: 15px;
	transition: all .35s ease;
	pointer-events: none;
}
#col_exp1.rollOver { top: 35px; }
#col_exp1.rollOut { top: -1px; }


#col_exp2 {
	position: absolute;
	top: -35px;
	left: 15px;
	transition: all .35s ease;
	pointer-events: none;
}
#col_exp2.rollOver { top: -1px; }
#col_exp2.rollOut { top: -35px; }



#col_exit {
	width: 100%;
	height: 100%;
	cursor: pointer;
}

#canvas {
	pointer-events: all;
	cursor: pointer;
}


/* --------------------------------------------------*/
/* Expanded Panel*/
/* --------------------------------------------------*/
#expanded {
	display: none;
    position: absolute;
	left: 0px;
    width: 968px;
    height: 498px;
    overflow: hidden;
    transition: all .5s ease;
}

#exp_exit{
	width: 100%;
	height: 100%;
	cursor: pointer;
}

#exp_bg {
	
}

#closeBtn {
	position: absolute;
	top: 5px;
	right: 5px;
	padding: 1px 5px 0px 5px;
	color: #000;
	font-size: 20px;
	font-weight: 500;
	cursor: pointer;
	color: #FFF;
	border: 1px solid #142E72;
	transition: all .5s ease;
}

#closeBtn:hover {
	color: #E00000;
}


#exp_passport{ top: 40px; left: 100px; }
#exp_coins { top: 0px; left: 0px; }
#exp_rope { bottom: 0px; left: 0px; }

/*COINS*/
#coins_top{top: 0px; left:0px;}
#coin_3{top: 190px; left:120px;}
#coin_4{top: 190px; left:170px;}
#coin_5{top: -5px; left:145px;}

#coins_mid{top: 172px; left:0px; }
#coin_2{top: 250px; left:210px;}
#coins_bot{top: 288px; left:145px;}
#coin_1{top: 260px; left:310px;}

#exp_photo1{ top: 20px; left: 480px; }
#exp_photo2{ top: 78px; left: 595px; }
#exp_buckle{ top: 165px; left: 818px; }

#exp_slash { top: 140px; left: 436.5px; }
#exp_fortuna { top: 150px; left: 110px; padding: 60px; cursor: pointer;}
#exp_fortunaStripe { top: 255px;left: 140px; }
#exp_familia { top: 150px; left: 520px; padding: 60px; cursor: pointer;}
#exp_familiaStripe { top: 255px; left: 575px; }
#exp_text1 { top: 360px; left: 325px; }

.disable{
	pointer-events: none;
	cursor: default;
}

/* Fortuna black page divider */
#exp_fortunaDivider { 
	top: 0px; 
	left: -600px; 
	pointer-events: none; 
	transition: all .6s ease;
}
.fortuna {
	left: -15px !important;
}


/* Familia black page divider */
#exp_familiaDivider { 
	-ms-transform: rotate(180deg); /* IE 9 */
    -webkit-transform: rotate(180deg); /* Safari */
    transform: rotate(180deg);
	top: 0px; 
	left: 1000px; 
	pointer-events: none; 
	transition: all .8s ease;
}

.familia{
    left: 376px !important;
}

#exp_dividerRedLeft{ 
	top: 0px; 
	left: -600px;
	mix-blend-mode: overlay;
}

#exp_dividerRedRight{ 
	top: 0px; 
	left: 1000px; 
	-ms-transform: rotate(180deg); /* IE 9 */
    -webkit-transform: rotate(180deg); /* Safari */
    transform: rotate(180deg);
	mix-blend-mode: overlay;
}

@media screen\0 {
    #exp_dividerRedRight {opacity:.4;}
}

@media screen(-ms-high-contrast:none) {
    #exp_dividerRedRight {opacity:.4;}
}

@supports (-ms-accelerator:true) {
   #exp_dividerRedRight {opacity:.4;}
}


#exp_logo{
	top: 10px;
	left: 1000px;
}

#exp_pack{
	top: 130px;
	left: -220px;
}




/* -------------------------------
	CTA BUTTON
/* -------------------------------*/
#exp_ctaBtn {
	top: 410px;
	left: -220px; 
	width: 185px;
	height: 30px;
	background: #E00000;
	border: 1px solid #FFF;
	overflow: hidden;
	pointer-events: all;
	cursor: pointer;
}

#exp_cta1 {
	position: absolute;
	top: 0px;
	left: 1px;
	transition: all .35s ease;
	pointer-events: none;
}
#exp_cta1.rollOver { top: 35px; }
#exp_cta1.rollOut { top: 0px; }


#exp_cta2 {
	position: absolute;
	top: -35px;
	left: 1px;
	transition: all .35s ease;
	pointer-events: none;
}
#exp_cta2.rollOver { top: 0px; }
#exp_cta2.rollOut { top: -35px; }



/* -------------------------------
	BACK BUTTON
/* -------------------------------*/
#exp_backBtn {
	top: 450px;
	left: -220px; 
	width: 115px;
	height: 30px;
	background: #E00000;
	border: 1px solid #FFF;
	overflow: hidden;
	pointer-events: all;
	cursor: pointer;
}

#exp_back1 {
	position: absolute;
	top: 0px;
	left: 2px;
	transition: all .35s ease);
	pointer-events: none;
}
#exp_back1.rollOver { top: 35px; }
#exp_back1.rollOut { top: 0px; }


#exp_back2 {
	position: absolute;
	top: -35px;
	left: 2px;
	transition: all .35s ease;
	pointer-events: none;
}
#exp_back2.rollOver { top: 0px; }
#exp_back2.rollOut { top: -35px; }



/* -------------------------------
	VIDEO
/* -------------------------------*/
#vidContainer {
   	position: absolute;
	top: 160px;
	left: 1000px;
    width: 360px;
    height: 204px;
    border: 1px solid #FFF;   
  	opacity: 1;
  	background: #000;
}

#youtubeVideo {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 360px;
	height: 204px;
	display: block;
	background: #000;
  	cursor: pointer;
  	z-index: 1001;
}

gwd-youtube{display:block; width: 360px; height: 204px;}
gwd-youtube>.youtube-overlay{left:0;position:absolute;top:0}
gwd-youtube>.youtube-play-button{background-color:rgba(255,255,255,.3);background-position:center center;background-repeat:no-repeat; width: 360px; height: 204px;}
gwd-youtube>.youtube-play-button>.youtube-thumbnail{left:0;opacity:0;padding:0;position:absolute;top:0; width: 360px; height: 204px;}


/* -------------------------------
	BUTTONS
/* -------------------------------*/

#ctaBtn {
	position: absolute;
	top: 3.5px;
	right: 15px;
	width: 248px;
	height: 22px;
	cursor: pointer;
	overflow:hidden;
	transition: left .75s cubic-bezier(0,.46,.25,1);
	border: 1px solid #000;
}

#ctaTxt {
	position: absolute;
	top: 6px;
	left:20px;
	transition: top .4s ease;
}

#ctaTxt.rollOver {
	top: 30px !important;
}

#ctaOver {
	position: absolute;
	top: -30px;
	left: 25px;
	transition: top .4s ease;
}

#ctaOver.rollOver {
	top: 6px !important;
}