@charset "UTF-8";
/* CSS Document */

/* Default style, feel free to remove if not needed. */

@font-face {
	font-family: GTWalsheimBold;
	src: url(GTWalsheimBold.ttf);
  }
body, body * {
	vertical-align: baseline;
	border: 0 none;
	outline: 0;
	padding: 0;
	margin: 0;
	image-rendering: -webkit-optimize-contrast;
}

div{
	position: absolute;
	font-family: GTWalsheimBold;
}

.sharpenImg {
	image-rendering: crisp-edges;
  }
  
/* Div layer for the entire banner. */
#container_dc {
	position: absolute;
	width: 300px;
	height: 250px;
	top: 0px;
	left: 0px;
	overflow: hidden;
 	background-color: rgb(255, 255, 255);
}

#blockerMC {
	width: 300px;
	height: 250px;
	top:0px;
	left:0px;
	background-color: rgb(255, 255, 255);
	z-index: 140;
}


#border {
	width: 300px;
	height: 250px;
	position: absolute;
	z-index: 50;
	box-sizing: border-box;
	border:1px solid #3a3a3a;
}


.sprite {
    display: inline-block;
    overflow: hidden;
    background-repeat: no-repeat;
    background-image: url(sprite.png);
}


/* Invisible button for background clickthrough. */
#background_exit_dc {
	position: absolute;
	width: 300px;
	height: 250px;
	top: 0px;
	left: 0px;
	cursor: pointer;
	z-index: 50;
	background-color: rgba(255, 255, 255, 0);
}

#vid_cta_hotspot {
	position: absolute;
	width: 300px;
	height: 250px;
	top: 0px;
	left: 0px;
	cursor: pointer;
	z-index: 55;
	background-color: rgba(255, 255, 255, 0);

}

#shop_hotpsot {
	position: absolute;
	width: 300px;
	height: 200px;
	bottom: 0px;
	left: 0px;
	cursor: pointer;
	z-index: 55;
	background-color: rgba(255, 255, 255, 0);
}

#whiteBG{
	position: absolute;
	width: 300px;
	height: 250px;
	top: 0px;
	left: 0px;
	z-index: 50;
	border:1px solid black;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	/*background-image: url(bg.jpg);*/
	transform: translate3d(0, 0, 0);
	-webkit-transform: translate3d(0, 0, 0);
}

#bg {
	position: absolute;
	width: 300px;
	height: 250px;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;

	top: 0px;
	left: 0px;
	cursor: pointer;
	/*background-image: url(bg.jpg);*/
	z-index: 1;
}	



/* content */


#logo {
	position: absolute;
	width: 300px;
	height: 250px;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	top: 0px;
    left: 0px;
	cursor: pointer;
	z-index: 48;
}



#f1{
	width: 300px;
	height: 250px;
	top: 0px;
	left: 0px;
	cursor: pointer;
	z-index: 42;
	position: absolute;
}


/* VIDEO */


/* video controls*/

#muteBTN{
	position: absolute;
	width: 300px;
	height: 382px;
	right: 0px;
	top: 77px;
	z-index: 999;
	cursor: pointer;
	
}

#muteBTN_off {
	position: absolute;
	background-position:-104px -43px;
	width: 15px;
	height: 12px;
	right: 10px;
	top: 77px;
	z-index: 1;
}

#muteBTN_on {
	position: absolute;
	background-position:-104px -43px;
	width: 15px;
	height: 12px;
	right: 10px;
	top: 77px;
	z-index: 2;
}


#unmuteBTN{
	position: absolute;
	width: 300px;
	height: 382px;
	right: 0px;
	top: 77px;
	z-index: 999;
	cursor: pointer;

}

#unmuteBTN_off {
	position: absolute;
	background-position: -104px -22px;
	width: 15px;
	height: 12px;
	right: 10px;
	top: 77px;
	z-index: 1;
}

#unmuteBTN_on {
	position: absolute;
	background-position: -104px -22px;
	width: 15px;
	height: 12px;
	right: 10px;
	top: 77px;
	z-index: 2;
}
#replayBTN {
	width: 23px;
	height: 24px;
	right:5px;
	top:5px;
	cursor:pointer;
	position: absolute;
	z-index: 53;
}

#replayImg {
	background-position:-29px -19px;
	width: 27px;
	height: 26px;
	right:0px;
	top:0px;
	cursor:pointer;
	position: absolute;
	z-index: 53;
	transform: scale(0.8);
}

#video1_container_dc {
	position: absolute;
	width: 300px;
	height: 250px;
	top: 0px;
	left: 0px;
	z-index: 30;
	overflow:hidden;
	background-color: transparent;
}

#videoExit {
	width: 300px;
	height: 250px;
	top: 0px;
	left: 0px;
	/*box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
	box-shadow: 0px -1px 0px black inset;*/
	cursor: pointer;
	z-index: 30;
}

#video1_dc {
	position: absolute;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* endMC */
#endframe{
	width: 300px;
	height: 250px;
	top: 0px;
	left: 0px;
	cursor: pointer;
	z-index: 42;
	position: absolute;
}

#f6{
	width: 300px;
	height: 250px;
	top: 0px;
	left: 0px;
	cursor: pointer;
	z-index: 42;
	position: absolute;
}

#f6_text{
	width: 300px;
	height: 250px;
	top: 0px;
	left: 0px;
	cursor: pointer;
	z-index: 42;
	position: absolute;
}

.line1{
	position: absolute;
	top: 62px;
    left: 30px;
    cursor: pointer;
    z-index: 42;
    color: #fff;
    font-size: 26px;
    max-width: 16ch;
}



.line2{
	position: absolute;
	top:95px;
    left: 30px;
    cursor: pointer;
    z-index: 42;
    color: #fff;
    font-size: 26px;
    max-width: 16ch;
}


.line3{
	position: absolute;
    top: 128px;
    left: 30px;
    cursor: pointer;
    z-index: 42;
    color: #fff;
    font-size: 26px;
    max-width: 16ch;
}


.line4{
	position: absolute;
    top: 161px;
    left: 30px;
    cursor: pointer;
    z-index: 42;
    color: #fff;
    font-size: 26px;
    max-width: 16ch;
}


#f6_img{
	position: absolute;
	/*background-image: url(f6_img.jpg);*/
	width: 300px;
	height: 250px;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	top: 0px;
	left: 0px;
	cursor: pointer;
	z-index: 40;
}



.cta_btn{
    position: absolute;
	width: 155px;
    height: 33px;
    top: 205px;
    left: 20px;
    cursor: pointer;
    z-index: 48;
    background-color: #0f4293;
    color: #fff;
    text-align: center;
    border-radius: 0px;
    font-size: 20px;
    line-height: 1.6em;
	
}
#f7{
	width: 300px;
	height: 250px;
	top: 0px;
	left: 0px;
	cursor: pointer;
	z-index: 45;
	position: absolute;
}
#f7_text{
	width: 300px;
	height: 250px;
	top: 0px;
	left: 0px;
	cursor: pointer;
	z-index: 42;
	position: absolute;
}
#f7_img{
	position: absolute;
	/*background-image: url(f7_img.jpg);*/
	width: 300px;
	height: 250px;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	top: 0px;
	left: 0px;
	cursor: pointer;
	z-index: 40;
}


.text_highlight1{
	background-color: white;
    color: #ed197c;
    border-radius: 100px;
	padding-right: 10px;
    padding-left: 10px;
    padding-bottom: 3px;
	position: absolute;
	top: 62px;
    left: 20px;
    cursor: pointer;
    z-index: 42;
	margin: auto;
    font-size: 26px;
	max-width: 16ch;
	
	text-align: left;
	white-space: nowrap;
	
}

.text_highlight2{
	background-color: white;
    color: #ed197c;
    border-radius: 100px;
	padding-right: 10px;
    padding-left: 10px;
    padding-bottom: 3px;
	position: absolute;
	top: 95px;
    left: 20px;
    cursor: pointer;
    z-index: 42;
	margin: auto;
    font-size: 26px;
	max-width: 16ch;
	
	text-align: left;
	white-space: nowrap;
	
}

.text_highlight3{
	background-color: white;
    color:#ed197c;
    border-radius: 100px;
	padding-right: 10px;
    padding-left: 10px;
    padding-bottom: 3px;
	position: absolute;
	top: 128px;
    left: 20px;
    cursor: pointer;
    z-index: 42;
	margin: auto;
    font-size: 26px;
	max-width: 16ch;
	white-space: nowrap;
	text-align: left;

	
}
.text_highlight4{
	background-color: white;
    color:#ed197c;
    border-radius: 100px;
	padding-right: 10px;
    padding-left: 10px;
    padding-bottom: 3px;
	position: absolute;
	top: 161px;
    left: 20px;
    cursor: pointer;
    z-index: 42;
	margin: auto;
    font-size: 26px;
	max-width: 16ch;
	white-space: nowrap;
	text-align: left;

	
}

#f6_highlight_text{
	z-index: 48;
	width:300px;
	height: 250px;
	position: absolute;
	overflow: hidden;
}

#f7_highlight_text{
	z-index: 48;
	width:300px;
	height: 250px;
	position: absolute;
	overflow: hidden;
}