@charset "UTF-8";

@font-face {
    font-family: 'michromaregular';
    src: url('../../font/michroma-webfont.woff2') format('woff2'),
    url('../../font/michroma-webfont.woff') format('woff');
url('../../font/michroma.ttf') format('truetype'),
font-weight: normal;
    font-style: normal;

}
/*
	Identity by HTML5 UP
	html5up.net | @n33co
	Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
*/

/* 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: 12px;
    color: #fff;
    font: inherit;
    vertical-align: baseline;
    font-family: 'michromaregular',sans-serif;
    font-weight: normal;

}

h1 {
    font-size: 1.2em;
    line-height: 2em;
}
h2 {
    font-size: 1em;
    line-height: 1.4em;
}
h3 {
    font-size: 1.1em;
    line-height: 1.4em;
}

.big_title{
    font-size: 2em;
    line-height: 0.5em;
    margin-bottom: 8%;
}

.blue{
    color: #ff7f00!important;
}
#content{
    position: absolute;
    height: 100%;
}

#step10 h1{
    line-height: 1.3em;
}
#steps {
    position: absolute;
    height: 100%;
    width: 100%;
}
#step1{
    position: relative;
    height: 100%;
width: 100%;
    overflow: hidden;
}

#topbar, #topbar2{
    position: absolute;
    top: 0;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 2;
    text-align: center;
}

.mainbox{
    position: absolute;
    bottom: 0;
    width: 100%;
    min-height: 30%;
    background-color: rgba(0, 0, 0, 0.5);
    text-align: center;
    z-index: 3;
}

.mainwrp{
    padding: 3%;
}
.logo {
    width: 65%;
    padding-top: 3%;
    padding-bottom: 2%;


}


.girls{
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: url(../imgs/set/main/3D/step/01/step1.png) top center /cover no-repeat;
    z-index: -1;

}

.btn {
    color: #04080f;
    font-size: 1.3em;
    padding: 10px 20px 10px 20px;
    border: solid #ff7f00 1px;
    text-decoration: none;
    background: #ff7f00;
    position: relative;
    z-index: 100;
    min-width: 30%;
}

.btn:hover {
    color: #fff;
    background-color: transparent;
    border: solid #fff 1px;
    background-image: -webkit-linear-gradient(top, transparent, transparent);
    background-image: -moz-linear-gradient(top, transparent, transparent);
    background-image: -ms-linear-gradient(top, transparent, transparent);
    background-image: -o-linear-gradient(top, transparent, transparent);
    background-image: linear-gradient(to bottom, transparent, transparent);
    text-decoration: none;
    cursor: pointer;
    cursor: hand;
}
.grayback{
    background-color: rgba(255, 127, 0, 0.2)!important;
    border: none!important;
    text-decoration: none;
    background: #ff7f00;
    position: relative;
    z-index: 100;
    min-width: 30%;
}

.btnSmall{
    font-size: 1.2em!important;
    padding: 3px 15px 3px 15px!important;
    min-width: 15%;
}
.stepNav{
    margin: 3%;


}
.StepNum{
    width: 45%;
}
.bigNum{
    font-size: 1.2em!important;
    position: relative;
    left: 3%;
}

.bigNum2{
    font-size: 1em!important;
    position: relative;
    left: 3%;
}
.TBspace{
    margin-top: 8%;
    margin-bottom: 8%;
}

.step, .girls, .top3, .brgoog, #topbar2{
    display: none;
}

#step2 .big_title{
    line-height: 2.5em!important;
    margin-bottom: 0%!important;
}
.fltLeft{
    float: left;
}
.fltRight{
    float: right;
}
.clearAll{
    float: none;
    clear: both;
}
.loading{
    width: 100%;

}
.loading img{
    width: 90%;
    margin-top: 3%;
}

.checkdiv{

    width: 100%;
    margin: 10% 0 5%;
    padding: 0;
    font-size: 1.3em;
    line-height: 1.3em;
    position: relative;
    z-index: 100;
}

.checkWrpBtn{
    width: 48%;
    height: ;
}
.CheckBtn:hover{
    background-color: #ff7f00!important;
}

.checkmark{
    background-color: #fff;
    width: 10%;
    padding-bottom: 5%;
    background-image: url("../imgs/set/main/Check.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 60%;
    cursor: pointer;
    cursor: hand;
    font-size: 0.9em;
}

.checked{
    background-color: #ff7f00!important;

}

.checkedFont{
    color: #ff7f00;
}
.checked2{
    background-color: #021a24!important;
    color: #fff;

}
.CheckBtn{
    background-color: #fff;
    width: 89%;
    color: #000;
    padding-bottom: 5%;
    cursor: pointer;
    cursor: hand;
    font-size: 0.9em;

}
.checkLine {
    margin-top: 3%;
    margin-top: 3%;
    position: relative;
    z-index: 300;
}
.fill25{
    width: 25%;
}
@media only screen
and (min-device-width : 320px)
and (max-device-width : 374px)
and (orientation : portrait) {

    .btnSmall{
        font-size: 1.2em!important;

    }
    .bigNum{
        font-size: 1em!important;

    }
    .CheckBtn{

        font-size: 0.8em;

    }

}
@media only screen
and (min-device-width : 321px)
and (orientation : portrait) {

    .btnSmall{
        font-size: 1.2em!important;

    }
    .bigNum{
        font-size: 1.2em!important;

    }
    .CheckBtn{

        font-size: 0.9em;

    }

}
.incBtn{
    position: relative;
    margin: 6% 15%;
    height: 100%;

}
.incBtnWrp{
    position: relative;
    height: 100%;
}
.minus, .add{
    width: 20%;
    text-align: center;
    font-size: 3em;
    line-height: 0.1em;
    height: 100%;
}
.bselect{
    width: 18%;
    background-color: #ff7f00;
    font-size: 0.1em;
    line-height: 2.8em;
}
.bnselect{
    width: 18%;
    background-color: rgba(255, 127, 0, 0.4);
    font-size: 0.1em;
    line-height: 2.5em;
}

.spacer{
    width: 3%;
    font-size: 0.1em;
}

.mboxSmall{
    min-height: 18%!important;
}

.step p{
    margin-top: 5%;
}
.step_form{
    width: 100%;
    height: 100%;
    z-index: 200;
    text-align: center;
    background-color: rgba(0, 0, 0, 0.5);
}
iframe {
    min-width: 364px;
    min-height: 366px;
}

#turn {
    display: none;
    position: absolute;
    margin: 0;
    background: url(../imgs/set/main/turn.jpg) top center /cover no-repeat;
    z-index: 400;
    width:100%;
    height: 100%;
}



@media screen and (orientation:landscape){

    #turn {
        display: inherit!important;
    }

}
#top_bar {
    height: 6%;
    background-color: black;
    z-index: 12;
    position: relative;
    text-align: center;
    padding: 1%;
}

.log_btn{
    font-weight: lighter!important;
    text-transform: uppercase;
}

#topbar2_logo {
    width: 42%;
    padding: 12px;
}

.logo2 {
    width: 100%;
    padding-top: 3%;
    padding-bottom: 2%;
}
#login {
    text-align: right;
    width: 44%;
    padding: 10px;
}

#login a{
    text-decoration: none;
    font-size: 0.9em;
}