@charset "utf-8";

html {
   background: #122B4D;
}

@font-face {
    font-family: 'built';
    src: url(https://www.ouinolanguages.com/assets/French/font/built-titling-bd.ttf);
	font-weight: bold; font-weight: 700;
}

@font-face {
     font-family: 'built';
    src: url(https://www.ouinolanguages.com/assets/French/font/built-titling-sb.ttf);
	font-weight: normal; font-weight: 600;
}


body {
	font-family: 'Noto Sans JP', sans-serif;
	font-weight: normal;
	margin:0;
   padding:0;   
  width: 100%;
  height: 100%;
}

#emailCover, #keyCover {
position: fixed;
z-index: 20000;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.8);
}

#dealEmail, #keyEmail {
position: absolute;
width: 320px;
height: 240px;
padding: 40px 30px 50px 30px;
top: 0;left: 0;bottom:0;right:0;
margin: auto auto;
background: white;
text-align:center;
font-size: 20px;
line-height: 30px;
border-radius: 10px;	
font-family: 'built', sans-serif;
}

#keyEmail {
border: solid 5px #6ab04c;
}

#dealEmail strong, #keyEmail strong {
font-weight: normal; font-size: 25px;
}

#dealForm, #keyForm {
font-size: 16px;
padding:15px 2% 15px 2%;
margin: 20px 0 0 0;
width: 96%;
text-align:center;
border-radius: 5px;	
border: 1px solid grey;	
}

#dealBtn, #keyBtn {
background: rgba(255,198,0,1.00);
border: 0;
border-radius: 5px;
padding: 25px;
cursor: pointer;
font-size: 22px;
font-family: 'built', sans-serif;
}

#keyBtn {
background: #6ab04c;
}

.loginTitleHover {
color:#F00;
}


body:before {
  content: "";
  display: block;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: -10;
  background: black no-repeat center center;
  background-size: cover;
}

@media screen and (max-width:1025px) {
body:before {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 128%;
  z-index: -10;
  background: black no-repeat center center;
  background-size: cover;
}	
	
}


#bodyDiv {
	margin:0;
   padding:0;
   height:100%;
   width: 100%;
   overflow-x:hidden;
}

.salePrice {
position: absolute;
width: 104%;
height: auto;
left: -2%;
top: auto;
bottom: 101%;
display:none;
}


li {
 list-style: none;
}

#textContent{
font-size:14px;
padding: 20px 20px;
}

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

.contactContent, .contactContent2{
position: relative;
font-size:14px;
padding: 0 2%;
width: 60%;
float: left;
margin: 0 auto;

}

.contactContent2{
float: right;
width: 250px;
}

@media screen and (max-width:850px) {.contactContent{width: 50%;}}
@media screen and (max-width:650px) {.contactContent{width: 96%} .contactContent2{display: none;} }

.faqContent{
position: relative;
font-size:14px;
padding: 0;
max-width: 44%;
float: left;
margin: 0 auto;
}

.faqContent p{
padding: 0 0 20px 0;
margin: 0;
}

.faqContent h5{
font-size:16px;
padding: 0;
margin: 0;
}


@media screen and (max-width:1000px) {.faqContent{float: none; max-width: 700px;} #firstTitle{margin-top: -40px;}}

#reviewContent, .faqContent{
font-size:14px;
padding: 20px;
}

#reviewContent h5{
font-size:19px;
padding: 0;
margin: 0;
}

#reviewContent h2, .faqContent h2{
font-size:13px;
color: #999;
line-height: 0;
}

#reviewContent img{
vertical-align: middle;
margin-left: -3px;
}

#topNav{
position: absolute;
top: 0;
left:0;
height:55px;
width: 100%;
background: rgba(0,0,0,0.9);
z-index: 10;
color: white;
}

#head1, #head2{
color: white;
text-align: center;
font-weight:normal;
}

#head1{
font-family: 'built';	
margin: 0 30px 0 20px;
font-size: 65px;
font-weight: 700;	
}

#head1 b{
font-weight: bold;	
}


#head2{
margin: 0px 10px 30px 10px !important;
font-size: 23px;
color: rgba(255,255,255,0.9);
font-family: 'Noto Sans JP', sans-serif;	
display: block !important;
	line-height: 1em;
}


#countbox{
color: red;
font-size: 27px;
position: absolute;
top: -38px;width: 100%; left: 0;
text-align: center;
font-family: 'built', sans-serif;
font-weight:normal !important;
}



#ouinoTitle{
position: absolute;
top: 15px;
left: 30px;
height: 25px; 
width:auto;
cursor: pointer;
}

.navItems{
font-family: 'Open Sans Condensed', sans-serif;
font-size: 19px;
line-height: 55px;
position: relative;
float: right;
margin: 0 20px 0 0;
color: white;
cursor: pointer;
}


.subMenuOptions{
font-family: 'Open Sans Condensed', sans-serif;
position: relative;
margin: 10px;
float: none;
cursor: pointer;
font-size: 18px;
color: white;
line-height:23px;
}

.navItems a, .subMenuOptions a{
color: white;
text-decoration:none;
}

.navItems a b, .subMenuOptions a b{
color: #EBB82F;
}



@media screen and (max-width:1000px) {.navItems{font-size: 18px;margin: 0 20px 0 0;} .subMenuOptions{font-size: 18px;}}

#myFooter{
position: relative;
margin-top: 20px;
height:290px;
width: 100%;
font-size: 13px;
line-height: 36px;
color: #999;
text-align:center;
float:left;
z-index: 6;
padding-top: 20px;
}

#myFooter p{
color: white;
font-size: 13px;
line-height: 17px;
margin-bottom: 30px;
}

#myFooter a{
color: #F27402;
}

#myFooter2{
position: relative;
height:40px;
padding: 20px 0;
width: 100%;
float:left;
font-size: 14px;
line-height: 36px;
color: #999;
text-align:center;
z-index: 6;
}

#myFooter2 a{
text-decoration:none;
color: #BCBCBC;
}

#myFooter2 a:hover{
color: #FFC600;
}

#footerBack{
position: absolute;
width: 202%;
left: -51%;
height: 102%;
top: -2%;
margin: 0;
background: rgb(30,30,30);
z-index: -1;
}

#footerBack2{
position: absolute;
width: 200%;
left: -50%;
height: 100%;
top: 0;
margin: 0;
background: rgb(20,20,20);
z-index: -1;
}


.footerIn{
position: relative;
width: 360px;
height: 94%;
margin: 1% auto 0 auto;
}

@media screen and (max-width:700px) {.footerIn{float: none; width: 95%; height:48%;}}


.footerTitle{
font-family: 'built', sans-serif;
font-weight:normal;
font-size: 30px !important;	
color: white;
text-shadow: 1px 1px 1px black;
}

.footerIn p{
font-family: 'Open Sans', sans-serif;
font-size: 15px !important;
line-height: 18px !important;
}

.footerImage{
vertical-align:middle;
margin: -8px 0 0 10px;
height: 40px;
width: 40px;
display:none;	
}

.currentPage{
font-weight: normal;
}

#tourCont{
position: absolute;
width:auto;
height: auto;
left:-15px;
top: 70px;
line-height: 16px;
background: rgba(0,0,0,0.7);
padding: 5px 10px 10px 10px;
display: none;
}

#mobileMenu, #otherLangCont{
position: absolute;
width:170px;
height: auto;
right:0;
top: 55px;
line-height: 16px;
background: rgba(0,0,0,1);
padding: 5px 10px 10px 10px;
font-size:14px;
display: none;
}

#mobileMenuLogo{
position: absolute;
right:15px;
cursor: pointer;
top: 7px;
height:40px; 
width:40px;
display: none;
}

@media screen and (max-width:672px) {
#mobileMenuLogo{display: block;}
.navItems{display: none;}
}

#topLogo{
position: absolute;
width:453px;
height:42px;
top: 14px;
left: 14px;
}

@media screen and (max-width:500px) {
#topLogo{
width:300px;
height:28px;
top: 20px;
}	
}

#topTitle{
color: black;
}


#mainBack, #mainBack2{
position: absolute;
top: 0;
left:0;
width: 100%;
}

#mainBack{
position: absolute;
background: url(../images/roadBack.jpg) no-repeat center center;
background-size: 100% 100%;
height:100%;
}


#mainBack2{
background: url(../images/mainBack2.svg) no-repeat center center;
background-size: 100% 300%;
background-position:bottom;
height:110px;
box-shadow: 2px 2px 7px black;
}

.mainSplash{
position: relative;
width: 100%;
margin: 20px 0 20px 2%;
max-width: 909px;
max-height: 455px;
}

.rowCont{
position: inline-block;
float: left;
width: 100%;
}

#mainContent{
position: relative;
width: 100%;
height: 100%;
max-width: 1176px;
margin: 120px auto 0px auto;
padding-bottom: 0 !important;
}




.sideBtns{
position: relative;
float: left;
min-height: 200px;
width: 40%;
margin: 0 2%;
padding-bottom: 15px;
text-align:center;
}


.sideBtns p{
margin: 0;
padding: 0;
font-size: 14px;
line-height: 5px;
}



.mainText{
position: relative;
float: left;
min-height: 200px;
width: 40%;
margin: 2%;
padding-bottom: 15px;
}

.mainText h4{
font-size: 22px;
margin: 0 0 10px 0;
}

.mainText p{
font-size: 15px;
margin: 0;
}

.mainPic{
position: relative;
height: auto;
min-height: 200px;
width: 56%;
padding-bottom: 15px;
}

.mainPic img{
width: 100%;
max-width: 530px;
height: auto;
}

.floatRight{float: right;}
.floatLeft{float: left;}

.blackTitle{
position: relative;
margin: 10px;
font-size: 32px;
color: white;
text-align:center;
text-shadow: 1px 1px 1px black;
font-family: 'built', sans-serif;	
}

.blackTitle2{
position: relative;
margin:0;
padding-top: 70px;
font-size: 28px;
font-weight: normal;
text-align:center;
font-family: 'built', sans-serif;	
}

.blackDescription{
position: relative;
margin: 0 10px 20px 10px;
font-size: 15px;
color: black;
text-align:center;
font-weight: normal;
}


.langButtons{
position:relative;
width: 31.3333%;
max-width: 310px;
margin: 15px 1% 0 1%;
float: left;
cursor: pointer;
}

.langBtnBottom{
width: 100%;
height: 100%;
}

.langBtnTop{
position: absolute;
width: 100%;
height: 98%;
left: 0;
z-index:3;
opacity: 0;
}

.langBtnTop:hover{
opacity: 1;
}

.mainImages{
position: relative;
margin: 0 auto;
width: 80%;
height: auto; 
max-width: 802px;
opacity: 1;
-ms-transform: translateX(-3.5%);
-webkit-transform: translateX(-3.5%);
transform: translateX(-3.5%);
display:none;
}

.addCartBtn{
font-family: 'built', sans-serif;
font-weight:normal;
position: absolute;
bottom: 20px;
right: 0;
left: 0;
margin: auto auto;
font-size: 20px;
padding: 14px 18px;
background-color: #EBB82F;
color: black;
border-radius: 5px; 
text-shadow:none;
cursor: pointer;
z-index: 999;
}

.revAm{
position: absolute;
height: 35px;
width: 135px;
bottom: 140px;
right: 10px;
z-index: 999;
display:none;
}



.guarantee{
position: absolute;
height: 70px;
padding: 20px;
width: 580px;
margin: 0 auto;
z-index: 999;
background: rgba(0,0,0,0.4);
bottom: -60px; right: 0; 
display:none;
}

.guarantee img{
top: 5px;
left: -10px;
position: absolute;
height: 100px;
}

.guarantee h2{
font-family: 'built', sans-serif;
font-weight:normal;
padding-left: 110px;
margin: 0;
color: white;
}

.guarantee h5{
padding-left: 110px;
font-weight:normal;
margin: 2px 0 0 0;
color: white;
font-size: 13px !important;
}

select{
	  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; 
}

#slct, #slct2{
 -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  
}

#slct2{
display:none;
  
}


#cart1, #cart2, #cart3, #cart4{
font-size: 25px;
box-shadow:none;
text-align: center;
opacity: 0.85;
right: 0;
top:auto;
bottom: 15px;
transition: 0.4s;
width: 70%;
}


#cart1:hover, #cart2:hover, #cart3:hover, #cart4:hover{
opacity: 1;
}


.largerBtn{
padding: 12px 15px;
}

#rowBtns{
position: inline-block;
float: left;
width: 100%;
margin: 40px auto 50px auto;
}

.ouinoBtns, .ouinoBtns2{
position: relative;
float: left;
font-size: 21px;
width: 29%;
margin: 2%;
padding: 15px 0;
background-color: #f39c12;
color: white;
-webkit-border-radius: 5px;
-ms-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
cursor: pointer;
font-weight:bold;
text-align: center;
border: 1px solid black;
}

.ouinoBtns2{float: none; width: 96%; max-width: 250px; margin: 2% auto; font-size:18px; margin-bottom: 30px;}

#btn1, #btn4{background-color: #f39c12;}
#btn2{background-color: #e67e22;}
#btn3, #btn5{background-color: #d35400;}

.ouinoBtns:hover, .ouinoBtns2:hover{
color: black;
text-decoration:none;
}

#rowBtns a, .sideBtns a{
text-decoration:none;
}

@media screen and (max-width:650px) {#btn1{display: none;} .ouinoBtns{width:45%} }
@media screen and (max-width:350px) {#btn2{float: none;} .ouinoBtns{width:96%; padding: 8px 0;}}

.emailDiv{
position: absolute;
top: 0;
left: 0;
background: #FFF;
height: 70px;
width: 100%;
text-align:left;
padding-left: 20px;
}

.emailDiv h2{
margin: 0;
padding: 0;
font-size: 19px;
}

#usCan{
position: absolute;
top:32px;
left: 105px;
font-size: 13px;
}

#phoneNum{
position: relative;
margin: 86px 0 20px 0;
font-size: 23px;
font-weight: bold;
text-align: center;
}

#callHours{
position: relative;
font-size: 16px;
font-weight: normal;
text-align: center;
}

.callHours2{
position: relative;
margin-top: 10px;
font-size: 13px;
padding: 0px 20px 0 20px;
font-weight: normal;
float: left;
}

.emailLogo{
height: 70px;
width: auto;
vertical-align:middle;
}

#bottomPad{
position: relative;
width: 100%;
float: left;
height: 50px;
}

.smallerTitle{
display: inline-block;
text-align: center;
padding: 0;
width: 100%;
}

.priceBox{
position: relative;
display:inline-block;
width: 330px;
height: auto;
margin: 30px auto 120px auto;
background: rgba(255,255,255,1);
padding-bottom: 120px;
border-radius: 3px;
z-index:2;
}

.priceBox .topLabel{
color: #EBB82F;
font-size: 55px;
}

.priceBox .topPrice{
background: #0F161C;
}


#cart4{
bottom: 60px;
}

.priceBox2{
position: relative;
display:inline-block;
width: 276px;
height: auto;
margin: 30px auto 120px auto;
background: rgba(255,255,255,1);
padding-bottom: 70px;
border-radius: 3px;
z-index:2;
display:none;
}

.starPrice{
position: absolute;
width: 50px;
height: auto;
left: auto;
right: 10px;
top: 0;
z-index: 3;
display:none;
}

.currSelect {
position: absolute;
top: 70px;
left: auto;
right: 12px;
width: 100px;
}

.currSelect select{
padding: 10px 10px 10px 15px;
font-family: 'built', sans-serif;
border: 0;
border-radius: 5px;
font-size: 17px;
background: #202020;
color: white;
cursor: pointer;
}

.langSelect {
position: absolute;
top: 70px;
left: 25px;
right: auto;
width: 100px;
z-index:534053;
}

.langSelect select{
padding: 10px 10px 10px 10px;
font-family: 'built', sans-serif;
border: 0;
border-radius: 5px;
font-size: 17px;
background: #202020;
color: white;
cursor: pointer;
}


.point{
font-family: 'Open Sans', sans-serif;
font-size:13.5px;
line-height: 20px;
padding: 5px 10px;
margin: 3px auto;
background: rgba(0,0,0,0.05);
max-width: 270px;
}

.priceBox2 .point{
font-family: 'Open Sans', sans-serif;
font-size:13px;
padding: 5px 5px;
margin: 3px 10px;
background: rgba(0,0,0,0.05);
}


.topPrice{
width: 100%;
position: relative;
display:inline-block;
height: auto;
background: #2980b9;
font-family: 'built', sans-serif;
color: white;
margin:0 0 20px 0;
text-align: center;
border-radius: 0;
padding: 15px 0 10px 0;
}

.priceBox2 .topPrice{
background: rgba(0,0,0,0.2);
color: #333333;
}

.priceBox2 .addCartBtn{
background: rgba(0,0,0,0.2);
}

.topLabel{font-size:24px; padding: 0; margin: 0; padding-top: 12px;}
.topAmount{font-size:45px; padding: 10px 0 0 0; margin: 0;}
.topMonth{font-size:20px; padding: 0 0 20px 0;}
.topMess{font-size:14px; font-weight: normal; font-family: arial; padding-top: 10px; padding-bottom: 20px;}

.price1d{
font-size: 1.5em; 
font-weight: bold; 
color: #EBB82F;
}

.check{
position: relative;
height: 16px;
width: 16px;
background-repeat: no-repeat;
background-size: cover;
float: left;
margin-top: 1px;
margin-right: 7px;
}

.theD{
position: absolute;
width: auto;
}

.dRight{left: 1100px; height: 400px; top: 0px;}
.dLeft{right: 100%; left:auto; height: 400px; top: 0px;}


.yes{background-image: url(https://www.ouinolanguages.com/images/yes.png);}
.no{background-image: url(https://www.ouinolanguages.com/images/no.png);}


@media screen and (max-width:2450px) {#mainContent{max-width: 840px; padding-bottom: 40px; margin-bottom: 0;} 
.dRight{left: 100%; height: 400px; top: 90px;}
.dLeft{right: 100%; left:auto; height: 500px; top: 50px;}
.priceBox{width: 50%;margin: 40px 25% 80px 25%; float:none;} .priceBox .point{font-size:15px; max-width: 330px;
padding: 10px 10px;
margin: 3px auto;}
.guarantee{bottom: 20px; left: 0; right: auto; margin: auto auto;} .revAm{bottom: 60px;right: 40px;}
}

@media screen and (max-width:900px) {#mainContent{max-width: 640px; padding-bottom: 240px; margin-bottom: 0;} 
.priceBox{width: 70%;margin: 40px 15% 40px 15%; float:none;} .priceBox2{width: 70%;margin: 20px 15% 10px 15%; float:none;} .priceBox .point, .priceBox2 .point{font-size:15px;
padding: 10px 10px;  max-width: 330px;
margin: 3px auto;}  
.guarantee{bottom: 90px; left: 0; right: 0; margin: auto auto;} .revAm{bottom: 30px;right: 0; left: 0; margin: 0 auto;}
}

@media screen and (max-width:600px) {
.theD{display:none;} .salePrice{width:104%;}
.priceBox{width: 90%; margin: 40px 5% 100px 5%; float:none;} .priceBox2{width: 90%; margin: 20px 5% 20px 5%; float:none;}
.priceBox2 .point{margin: 3px auto;}
.priceBox .point{margin: 3px auto; font-size: 14px; padding: 7px 10px;}
.guarantee{bottom: 110px;}
}


@media screen and (max-width:480px) {#mainContent{max-width: 420px;} #head2{display:none;}}



.satisfaction{
position: absolute;
width: 150px;
height: auto;
left: -30px;
bottom: -30px;
z-index: 4;
}

.boxImg2{
position: absolute;
width: 15%;
height: auto;
top: 10px;
left: 10px;
z-index: 4;
}

.boxImg3{
width: 110px;
position: absolute;
height: auto;
top: 55px;
left: 10px;
z-index: 0;
}

.boxFont1{
padding-left: 20px;
margin: 10px 0 10px 0;
font-family: 'built', sans-serif;
font-weight:normal;
}

.lineThru{
width:100%;
border-top: 1px solid white;
margin-bottom: 10px;
}

.boxFont3{
padding: 0 0px 0px 20px;
margin: 0 0 10px 0;
font-size: 35px;
font-family: 'built', sans-serif;
font-weight:normal;
}

.boxFont4{
text-align: center;
padding: 20px 15px 4px 10px;
margin: 0 auto;
font-size: 16px;
}

.boxFont4 em{
font-size: 13px;
color: #202020;
margin-top: -5px;
padding-bottom: 5px;
opacity: 0.7;
}

.boxFont4 strong{
font-family: 'built', sans-serif;
font-weight:normal;
font-size: 18px;
color: #101010;
}



.openBoxes{
position: relative;
text-align:center;
float: right;
margin: 0 auto;
font-weight:normal;
cursor: pointer;
color: white;
width: 1.4em;
background: rgba(0,0,0,0.2);
text-decoration: none;
border-radius: 50%;
padding-right: 0.04em;
}

.openBoxes:hover{
background: #2980b9;
}


#openBox1, #openBox2{
padding: 12px;
position: absolute;
text-align:center;
width: 280px;
bottom: -60px;
opacity: 0.7;
margin: 0 auto;
left: 0; right: 0;
font-family: 'built', sans-serif;
font-weight:normal;
font-size: 22px;
color: white;
cursor: pointer;
text-decoration:none;
transition: 0.3s;
line-height: 30px;
}

#openBox1{
display: none;
}

#openBox3{
position: relative;
float: right;
margin-left: 10px;
border-radius: 50%;
margin-top: 2px;
text-align: center;
color: white;
width: 1.4em;
background: rgba(0,0,0,0.2);
text-decoration:none;
cursor: pointer;
z-index: 99;
font-size: 17px;
display:none;
}


#openBox1:hover, #openBox2:hover{
opacity: 1;
}

#openBox3:hover{
background: #2980b9;
}

.fancybox-bg{
background: rgba(0,0,0,0.3) !important;
cursor: pointer !important;
}

#hidden-content1{
width: 100%;
max-width: 900px;
margin-top: 100px;
margin-bottom: 100px;
padding: 0 10px 10px 10px;
color: rgba(50,50,50,1.00);
background: white;
display:none;
}

#hidden-content1 h2{
font-family: 'built', sans-serif;
font-weight:bold;
font-size: 25px;
color: rgba(50,50,50,1.00);
margin: 70px 10px 30px 10px;
text-align: center;
}

#hidden-content2, #hidden-content3{
font-family: 'Open Sans', sans-serif;
font-size: 19px;
display:none;
color: rgba(50,50,50,1.00);
background: white;
max-width: 700px;
}

#hidden-content2 .greenFont{
font-family: 'built', sans-serif;
font-weight:bold;
font-size: 17px;
}

#hidden-content2{
padding: 40px 50px 60px 50px;
}

#hidden-content3, #hidden-content4, #hidden-content5{
font-size: 16px;
line-height:24px;
padding: 40px 50px 60px 50px;
font-family: arial;
max-width: 820px;
display:none;
}

#hidden-content3 h1, #hidden-content2 h1, #hidden-content4 h1, #hidden-content5 h1{
font-family: 'built', sans-serif;
font-weight:normal;
line-height:40px;
}


.counter{
margin-left: 20px;
margin-bottom: 60px;
padding: 5px;
width: 50px;
}

.smallProducts{
position: relative;
margin: 1% 0 1% 0;
padding: 30px 0 10px 0;
width: 100%;
float: left;
height: auto;
background: rgba(0,0,0,0.05);
display:inline-block;
}


.smallProducts p{
padding: 0px 30px 10px 150px;
font-size: 16px;
color: rgba(50,50,50,1.00);
}

.sPrice{
font-family: 'built', sans-serif;
padding-left: 20px;
font-size: 29px;
margin: 0;
padding: 0 0 0 30px;
font-weight: bold;
color: rgba(50,50,50,1.00);
}

.selector{
	position: relative;
	display:block;
	width: 240px;
	margin: 0 auto;
	text-align: center;
}


.boxFont2{
padding-left: 20px;
font-size: 45px;
margin: 0;
font-weight: bold;
}

.methods{
position: absolute;
height: 30px;
width: auto;
z-index: 6;
top:auto;
bottom: 10px;
left:0;
right:0;
margin: 0 auto;
}


#content2{display: none; }
#content2A{display: none;}
#content2B{display: none;}
#content2C{display: none;}
#content2D{position: relative; width: 480px; height: 480px; margin: 20px auto -80px auto; display: none;}
@media screen and (max-width:540px) {#content2D{margin-bottom:-90px; -webkit-transform: scale(0.93) translate(-1%, -1%); transform: scale(0.93) translate(-1%, -1%);}}
@media screen and (max-width:510px) {#content2D{margin-bottom:-100px; -webkit-transform: scale(0.88) translate(-3%, -3%); transform: scale(0.88) translate(-3%, -3%);}}
@media screen and (max-width:480px) {#content2D{margin-bottom:-120px; -webkit-transform: scale(0.86) translate(-5%, -6%); transform: scale(0.86) translate(-5%, -6%);}}
@media screen and (max-width:460px) {#content2D{margin-bottom:-140px; -webkit-transform: scale(0.83) translate(-8%, -7%); transform: scale(0.83) translate(-8%, -7%);}}
@media screen and (max-width:440px) {#content2D{margin-bottom:-160px; -webkit-transform: scale(0.79) translate(-12%, -9%); transform: scale(0.79) translate(-12%, -9%);}}
@media screen and (max-width:420px) {#content2D{margin-bottom:-180px; -webkit-transform: scale(0.75) translate(-15%, -11%); transform: scale(0.75) translate(-15%, -11%);}}
@media screen and (max-width:400px) {#content2D{margin-bottom:-200px; -webkit-transform: scale(0.72) translate(-19%, -13%); transform: scale(0.72) translate(-19%, -13%);}}
@media screen and (max-width:380px) {#content2D{margin-bottom:-220px; -webkit-transform: scale(0.68) translate(-22%, -17%); transform: scale(0.68) translate(-22%, -17%);}}
@media screen and (max-width:360px) {#content2D{margin-bottom:-240px; -webkit-transform: scale(0.64) translate(-27%, -21%); transform: scale(0.64) translate(-27%, -21%);}}
@media screen and (max-width:340px) {#content2D{margin-bottom:-260px; -webkit-transform: scale(0.60) translate(-33%, -25%); transform: scale(0.60) translate(-33%, -25%);}}

#content2B h3, #content2C h3{text-align: center; padding-top: 20px;}

#darkWrap{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.4);
z-index: -1;
}

.cartLogo{
position: relative;
height: 50px;
width: auto;
margin: 0;
padding: 6px 5px 7px 13px;
vertical-align: middle;
}


#checkout{
position: relative;
display: inline-block;
background: white;
width: 90%;
max-width: 1180px;
height: auto;
min-height: 200px;
margin: 10px 5% 0 5%;
padding-bottom: 100px;
}

#checkout2{
position: relative;
display: inline-block;
width: 90%;
max-width: 1180px;
height: 80px;
margin: 10px 5% 50px 5%;
color: white;

}

#checkText1{
position: relative;
float: left;
margin: 0;
line-height: 80px;
font-size: 22px;
font-weight: bold;
padding-left: 20px;
}

.checkText2{
position: relative;
margin: 0;
line-height: 80px;
font-size: 14px;
font-weight: bold;
padding-right: 7px;
float: right;
}

.checkText3{
position: relative;
margin: 0;
line-height: 80px;
font-size: 22px;
padding-right: 20px;
float: right;
}

#dollarConvert{
position: absolute;
margin: 0;
font-size: 11px;
bottom: 13px;
right: 20px;
}

.checkText4{
position: absolute;
margin: 0;
font-size: 15px;
top: 30px;
}

#checkText4A{left: 20px;}
#checkText4B{left: 50%;}
#checkText4C{left: 70%; display:none !important;}
#checkText4D{left: 85%;}

.cartItems{
position: relative;
width:92%;
height: 80px;
margin: 0 auto 10px auto;
background: #ecf0f1;
}

.cartItemsTop{
position: relative;
width:92%;
height: 55px;
margin: 0 auto 15px auto;
border-bottom: 1px solid #CCC;
}

.closeBtn2{
position: absolute;
margin: 0;
left: -6px;
top: -6px;
height: 20px;
width: 20px;
cursor: pointer;
z-index: 5;
}

.boxCartImg{
position: absolute;
margin: 0;
left: 20px;
top: 5px;
height: 70px;
width: auto;
}

.cartItemNames{
position: absolute;
margin: 0;
left: 90px;
top: 17px;
font-size: 18px;
font-weight: bold;
}

.offPrice{
position: absolute;
left: auto; right: -17px;
height: 40px; width: auto;
top: 20px;
}




.cartItemTypes{
position: absolute;
margin: 0;
left: 90px;
top: 40px;
font-size: 16px;
}

.cartItemPrices{
position: absolute;
margin: 0;
line-height: 80px;
font-size: 22px;
}

.cartItemPrice{left: 50%;}
.subPrice{left:85%;color: #E60000; font-weight: bold;}


#cartItem1 .subPrice{color: black; font-weight: normal;}

.counter2{
position: absolute;
width: 50px;
height:20px;
left: 70%;
top: 28px;
text-align: center;
display:none !important;
}

#returnBtn{
position: absolute;
font-family: 'built';		
bottom: 20px;
left:20px;
font-weight: 700;
cursor: pointer;
font-size: 20px;
z-index: 6;
}

#checkText4B, .cartItemPrice{opacity: 0; transition: 0.6s; }

@media screen and (max-width:850px) {.boxCartImg{display: none;} .cartItemNames, .cartItemTypes{left: 20px;}.cartItemPrices{font-size:18px;}}
@media screen and (max-width:650px) { .counter2{width: 35px;} }
@media screen and (max-width:500px) {#checkText4B, .cartItemPrice{opacity: 0 !important;} .cartItemNames, .cartItemTypes, #checkText4A{left: 15px;} #checkText4C{left: 63%;} .counter2{left: 63%;} #checkText4D, .subPrice{left: 79.2%;}}

#checkout2A, #checkout2B{
position: relative;
height: 100%;
margin: 0;
float: left;
}


#checkout2A{width: 70%; background: #0077C6;}
#checkout2B{width: 30%; background: #0A58C2;}

#checkout3{
position: relative;
display: inline-block;
width: 90%;
max-width: 1180px;
height: 60px;
padding: 0;
margin: 10px 5% 0 5%;
color: white;
}

#checkout3 p{
margin: 0;
padding: 0;
}

#closeBtn{
position: absolute;
margin: 0;
right: -7px;
top: -7px;
cursor: pointer;
z-index: 5;
}

.checkout3In{
position: relative;
float: left;
width: 25%;
height: 100%;
margin: 0;
background: #444;
}

.rightBorder{
position: absolute;
margin: 0;
width: 1px;
background:#000;
height: 100%;
top: 0;
right: 0;
}

.selectedCheckout{background: #0077C6;}

.billingInfo{
position: relative;
margin: 2% auto;
width: 92%;
height: 92%;
padding:2% 2% 2% 2%;
max-width: 550px;
background:rgba(0,0,0,0.07); border-radius: 5px;
}

.billingInfo input, .billingInfo select{
font-family: 'Noto Sans JP', sans-serif;
}


legend{
text-align: center;
}


.fullField{
height: 30px;
padding: 5px 0 5px 2%;
font-size: 16px;
margin-top: 10px;
width: 97.1%;

}

.halfField1, .halfField2{
height: 30px;
padding: 5px 0 5px 2%;
font-size: 16px;
width: 46%;
float: left;
}

.extraMargin{
margin-top: 15px;
}

.extraMargin2{
margin-top: 10px;
}

.noMargin{
margin-top: 0;
}

.halfField1{float: left;}
.halfField2{float: right;}

.billingInfo select{
height: 40px;
padding: 0 0 0 2%;
font-size: 16px;
margin-top: 10px;
width: 99.5%;

}

.billingInfo label{
position: relative;
font-size: 14px;
padding-left: 5px;
}

#checkUser{
vertical-align: bottom;
}





@media screen and (max-width:999px){.cartLogo{height: 40px;padding: 12px 2px 12px 6px;}#checkout3{font-size:13px;} #checkout2A, #checkout2B{width: 100%} .offPrice{right: -50px; height: 40px; top: 20px;}}
@media screen and (max-width:600px) {#checkout, #checkout2, #checkout3{width:96%;  margin: 10px 2% 0 2%;}.cartLogo{height: 50px; padding: 6px 5px 7px 8px;}#checkout3{color: rgba(0,0,0,0);}  #checkText1{display: none;} .offPrice{right: -20px; height: 34px; top: -5px;}}


@media screen and (min-width:1000px) {
#checkout, #checkout2, #checkout3{width: 100%; margin: 10px 0 0 0; }
}





.priceValue{
position: relative; 
float:left;  
padding-left:10px;
padding-top: 14px; 
font-size: 22px;
text-decoration:line-through;
display:none;
}


#choiceCont{
position: absolute;
width:400px;
height:340px;
text-align: center;
left: 0; top: 0; right: 0; bottom: 0;
margin: auto auto;
background: rgba(0,0,0,0.50);
}


@media screen and (max-width:500px) {#topTitle{font-size:25px;} #choiceCont{width: 300px;}}

.bannerBtnCont{
position: relative;
top: 20%;
height: 160px;
width: 230px;
padding: 20px;
margin: 0 auto;
}

.bannerBtnCont2{
position: relative;
top: 20%;
margin: 0 auto;
width: 100%;
padding-right: 50px;
font-weight: bold;
font-size: 35px;

text-align:center;
text-shadow: -1px -1px 3px #000,  1px -1px 3px #000, -1px 1px 3px #000, 1px 1px 3px #000;
color: white;
}

@media screen and (max-width:600px) {.bannerBtnCont, .bannerBtnCont2{top: 15%;}}

.bannerBtn {
width: 190px;
box-shadow: 0px 0px 3px black;
border: 2px solid white;
text-align:center;
margin: 15px;
cursor: pointer;
}


.bannerBtn a{
line-height: 50px;
padding: 20px 30px 20px 30px;
text-decoration: none;
font-size: 21px;
color: white;

}

.bannerBtn:hover{
border: 2px solid #FFC600;
color: #FFC600;
}
.bannerBtn a:hover{
color: #FFC600;
}


.prodLogo{
position: absolute;
left: -61px;
top: 20px;
width: 60px;
height: 120px;
}

.prodLogo2{
position: absolute;
left: -36px;
width: 35px;
height: auto;
}
#logo1{top: 40px; z-index: 2;}
#logo2{top: 240px;}
#logo3{top: 130px;z-index: 2;}
#logo4{top: 180px;}
#logo5{top: 90px;}

#allProd1 {
position: absolute;
color: #D90000;
font-size: 28px;
font-weight: bold;
text-shadow: 1px 1px 0px black;
bottom: 67px;
left: 25px;
}

#allProd2 {
position: absolute;
color: #D90000;
font-size: 15px;
bottom: 47px;
left: 25px;
}

#allProd3 {
position: absolute;
font-size: 16px;
font-weight: normal;
bottom: 15px;
left: 25px;
}

#bigPrice {
width: 100%;
padding-bottom: 15px;
height:45px; position: relative; float:left;
z-index: 99;
}

.price1b, .price2b, .price3b, .price4b{
color: #DB0003 !important;
text-decoration: line-through;
font-size: 18px !important;
line-height: 22px;
}

.price1 {
font-size: 55px !important;
}

.redText {
color: #DB0003;
line-height: 53px;
font-size: 13px;
display:none;
}

@media screen and (max-width:775px) {#allProd2,  #allProd3, #allProd1, #rText2{display: none;}}


@media screen and (max-width:660px) {.guarantee{height: 94px; width: 420px;} #mainContent{margin: 150px auto 0 auto;} #head1{font-size: 40px;}#head2{font-size: 19px;}  #hidden-content2{padding: 70px 30px;}}
@media screen and (max-width:580px) { .smallProducts p{padding: 0px 10px 10px 100px;font-size: 14px;} .boxImg3{width: 80px;top: 25px;left: 0px;}
	.guarantee{height: 50px; width: 280px;} .guarantee img{top: -10px;}  #head1{font-size: 38px;}#head2{font-size: 22px;} .guarantee h1, .guarantee h5{ display: none;} }
@media screen and (max-width:460px) {#head1{font-size: 50px;}#head2{font-size: 22px;} #head1 b{display:none;}}


#boxOrDown {
height: 30px;
margin: 0;
float: left;
padding-left: 20px;
padding-right: 16px;
cursor: pointer;
z-index: 99;
border-radius: 5px;
display: none;
}

.greenFont{
color: #090 !important;
}

.redFont{
color: #E60000;
}

.yellowFont{
color: #EBB82F;
}

h2 {
color: white;
font-size: 21px;
}

#counter1, #counter2,#counter3,#counter4,#counter5{
display:none;
}


.spStyle{
font-family: 'built', sans-serif;
font-size: 24px !important; 
font-weight: bold; 
padding-bottom: 0; 
margin: 0 0 7px 0; 
}


#continueBtn, #continueBtn2{
left: auto;
right: 20px;
}

@media screen and (max-width:750px) {#head1{font-size:52px;}#head2{font-size: 18px; margin-top: -5px; line-height: 23px;} }

@media screen and (max-width:600px) {#head1{font-size: 56px;}#head2{font-size: 17px;} #head1 b{display:none;}}
#content2B h3, #content2C h3{text-align: center; padding-top: 20px; font-family: 'built'; font-weight: 600; font-size: 25px; color: #222;}
#content2{padding-bottom: 100px;}
#head2{display:none !important;} #bodyDiv{opacity: 0.01;}