@charset "UTF-8";

@font-face {
    font-family: 'GillSansNova-Light';
    src: url('GillSansNova-Light.woff') format('woff');
}

@font-face {
    font-family: 'GillSansNovaforJL-Medium';
    src: url('GillSansNovaforJL-Medium.woff') format('woff');
}

body,body *{
	border: 0;
	outline: 0;
	padding: 0;
	margin: 0;
}
img{
	border: 0
}

button,div,img,svg,video{
	position: absolute
}

.retina {
    
/*    for display on retina screens images created @2x actual dimensions then scaled back by 50%.
    images are scaled from top left, which effects css when wanting to use other alignment
    e.g. bottom:0; right:0; also requires transform-origin:bottom right;
    02/2016 webkit browsers:
    images including their containers must be block or inline-block. 
    if css display:none or display:inline then transforms fail.
    */
    -webkit-transform: scale(0.5, 0.5);
    -moz-transform: scale(0.5, 0.5);
    -ms-transform: scale(0.5, 0.5);
    transform: scale(0.5, 0.5);
    -webkit-transform-origin: left top;
    -moz-transform-origin: left top;
    -ms-transform-origin: left top;
    transform-origin: left top;

    /* image-rendering: auto; */
    /*image-rendering: crisp-edges;*/
}

#default_exit, #main_container, .frame{
	width: 970px;
	height: 250px;
	top: 0px;
    left: 0px;
}

#main_container{
	position: absolute;
	width: 970px;
	height: 250px;
	background-color: #fff;
	overflow: hidden;
	border: 1px solid #999;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

#main_content{
	position: absolute;
	width: 970px;
	height: 250px;
	top: -1px;
	left: -1px;
	-moz-osx-font-smoothing: grayscale; 
    -webkit-font-smoothing: antialiased; 
   	-webkit-backface-visibility: hidden;
   	backface-visibility:hidden;
}

#thirdPartyLogo{
	position: absolute;
	top: 0px;
	left: 0px;
}

.hidden{
	visibility: hidden;
}

#headline{
	position: absolute;
	box-sizing: border-box;
	color: #000;
	font-family: GillSansNovaforJL-Medium;
	font-size: 26px;
    letter-spacing: 4px;
    line-height: 1.4;
    padding: 0px 0px 0px 0px;
    text-align: center;
    width: 340px;
    left: 520px;
/*	border: 1px solid #ff0000;*/
}

#subheadline1, #subheadline2{
	color: #000;
	font-family: GillSansNova-Light;
	font-size: 18px;
    letter-spacing: 0px;
    position: absolute;
    box-sizing: border-box;
    line-height: 1.2;
    padding: 40px 16px 0px 16px;
    text-align: left;
    width: 280px;
    height:auto;
    left: 0px;
/*    border: 1px solid #ff0000;*/
}

#frame1Logo{
  	position: absolute;
	top: 0px;
	right: 0px;
	width: 280px;
    height: 250px;
    overflow: hidden;
/*    border: 1px solid #ff0000;*/
    z-index: 101;
}

#frame1{
  	position: absolute;
	top: 0px;
	right: 0px;
	width: 280px;
    height: 250px;
    overflow: hidden;
    background-color: #fff;
/*    border: 1px solid #ff0000;*/
    z-index: 100;
}

#container1{
  	position: absolute;
	top: 0px;
	left: 0px;
	width: 970px;
    height: 250px;
    overflow: hidden;
/*    border: 1px solid #ff0000;
    z-index: 100;*/
}

#container2{
  	position: absolute;
	top: 0px;
	left: 0px;
	width: 970px;
    height: 250px;
    overflow: hidden;
/*    border: 1px solid #00ff00;
    z-index: 100;*/
}

#imageHolder1{
	position: absolute;
	top: 0px;
	left: 0px;

}

#imageHolder2{
	position: absolute;
	top: 0px;
	left: 0px;

}

#productImage1, #productImage2{
	position: absolute;
	top: 0px;
    left: 0px;
}


#productSpec{
	position: absolute;
    top: 0px;
    left: 0px;
	display: inline-block;
	width: 150px;
/*	border: 1px solid #00ff00;*/
}

#productSpecLine1, #productSpecLine2{
	box-sizing: border-box;
	color: #fff;
	font-family: GillSansNova-Light;
	font-size: 12px; /* @otomo string productTextSize */ 
    letter-spacing: .2px;
    position: absolute;
    line-height: 1.2;
    text-align: left;
    max-width: 150px;
/*    border: 1px solid #00ff00;*/
}

#productSpecLine2{
    padding: 2px 0px 0px 0px;
}

#productSpecLine0{
	box-sizing: border-box;
	color: #fff;
	font-family: GillSansNovaforJL-Medium;
	font-size: 22px; /* @otomo string productPriceSize */ 
    letter-spacing: 1px;
    position: absolute;
    line-height: 1.2;
    text-align: left;
    max-width: 150px;
/*    border: 1px solid #00ff00;*/
}

#cta{
	position: absolute;
	box-sizing: border-box;
	top:0px;
	left: 0px;
	display: inline-block;
	color: #000;
	font-family: GillSansNovaforJL-Medium;
	font-size: 17px;
    letter-spacing: 0px;
    line-height: .9;
    padding: 16px 14px 0px 14px;
    text-align: left;
    width: 262px;
/*    border: 1px solid #ff0000;*/

}
.ctaChar{
	overflow: hidden;
}

.ctaWord{
	overflow: hidden;
	padding-bottom: 2px;
}

.btn{
	position: absolute;
	top:0px;
	left:0px;
	cursor: pointer;
	background: url("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7");
	z-index: 200;
}

#logo_black{
	position: absolute;
	display: block;
	width: 94px;
	height: 60px;
	bottom: 16px;
	right: 15px;
   	-webkit-backface-visibility: hidden;
   	backface-visibility:hidden;
}

#logo_images{
	position: absolute;
	display: block;
	width: 94px;
	height: 60px;
	bottom: 16px;
	right: 15px;
/*	border: 1px solid #ff0000;*/
}

#logo{
	position: absolute;
	display: block;
	width: 94px;
	height: 60px;
	bottom: 16px;
	right: 15px;
}

#part_mask{
	position: absolute;
	display: block;
	width: 94px;
	height: 48px;
	top: 0px;
	left: 0px;
	overflow: hidden;
}

.bar1 {
	position: absolute;
	display: block;
	left: 0;
	width: 2px;
	height: 60px;
	background-color: #000000;
}
.bar2 {
	position: absolute;
	display: block;
	left: 11px;
	width: 5px;
	height: 60px;
	background-color: #000000;
}
.bar3 {
	position: absolute;
	display: block;
	left: 22px;
	width: 9px;
	height: 60px;
	background-color: #000000;
}
.bar4 {
	position: absolute;
	display: block;
	left: 34px;
	width: 59px;
	height: 60px;
	background-color: #000000;
}

:focus{outline: 0}

::-moz-focus-inner{border: 0}