body{
    font-family: 'Open_Sans', "Microsoft JhengHei", "apple LiGothic Medium", Arial, Helvetica, sans-serif !important;
    margin: 0;
    font-size: 1.5em !important;
    color:#644f40;
    background-image: url(../images/top-bar-bg.jpg);
    background-color: #f4f4f4;
    background-repeat: no-repeat;
}
a{color:#f35329; text-decoration:underline; }
.otext{color:#f35329;}
.clear{ clear: both;}
.footer .innerContainer {
    border-top: 2px solid #ffd300;
    padding: 15px;
}
.footer .innerContainer > div {margin-bottom:5px; font-size: 12px;}

.container { max-width:800px;}
.container-max-width { max-width:800px; margin: 0 auto}


.tit-bar{ background-color:#ffcb05; height:76px; position: relative; width: 100%; margin-top: 50px;}
.tit-bar-os{ background-color:#313131; height:76px; position: relative; width: 100%; margin-top: 50px;}
.sub-tit-bar{ background-color:#ffcb05; padding:10px 30px; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; /* future proofing */ }
.sub-tit-bar-os{ background-color:#313131; padding:10px 30px; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; /* future proofing */ }

.tit-container img{ margin-right: 10px;}
.tit-bar-heading { font-size:1.5em; font-weight:bold; display:inline-block;padding-right:5px;}
.sub-tit-bar span {font-size:1.3em; padding:0 10px; vertical-align: text-bottom;}
.sub-tit-bar > a {color:inherit;}
#desktop.sub-tit-bar > a {opacity: 0.5;}
#mobile.sub-tit-bar > a {opacity: 0.5;}
#desktop.sub-tit-bar > a:hover {opacity: 1;}
#mobile.sub-tit-bar > a:hover {opacity: 1;}
.tit-bar-heading-os{ font-size:1.5em; font-weight:bold; color: #ffffff;}
.tit-bar-heading-s{font-size:1em; font-weight:bold;}
.mn-left{margin-top: -18px;}
.mn-right{ margin-top: 16px}
.top-os-btn { margin-top: 0px; border-left: 1px solid #ffffff;	padding-left:3%; width: 60px;}
.top-or-btn { margin-top: 0px;}

p{ font-size: 1.5em; line-height: 1.2em;}
.FL{ float: left;}
.FR{ float: right;}
.top-buffer { margin-top:20px; }

.li-point{ font-weight: bold; color:#ffcb05; position: relative;  margin-right: 5px;}
.li-point:after{
    content: '';
    width: 100%;
    position: absolute;
    left: 0;
    bottom: -2px;
    border-width: 0 0 4px;
    border-style: solid;
    border-bottom-color: #ffcb05;
}

.step-by-step {background-color: #fff; padding: 5px 25px 25px 25px;-moz-border-radius: 10px;-webkit-border-radius: 10px;border-radius: 10px; /* future proofing */
    border: 1px solid #fffbdc;
}
.step-by-step img{ border-radius: 10px; }
.mobi-step-bg{ background-color: #fffbdc; border-radius: 10px; }

/* centered columns styles */
.row-centered {
    text-align:center;
}
.col-centered {
    display:inline-block;
    float:none;
    /* reset the text-align */
    text-align:left;
    /* inline-block space fix */
    margin-right:-4px;
}
.col-fixed {
    /* custom width */
    width:320px;
}
.col-min {
    /* custom min width */
    min-width:320px;
}
.col-max {
    /* custom max width */
    max-width:320px;
}



/*----MEDIA QUERY SET----*/
@media all and (max-width:480px) {
}

@media all and (max-width:768px) {
    #deskmenu{ display: none;}
    body{font-size: 1.4em !important; }
}

@media all and (max-width:990px) {
}

@media all and (max-width:1300px) {
}

@media all and (min-width:768px) {
    #cssmenu{ display: none !important;}
}


#nav-trigger .burger-icon, #nav-trigger .burger-icon span, .menu-list {
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
}

#nav-trigger {
    width: 30px; height: 25px;
    position: absolute;
    top: 25px; right: 15px;
    cursor: pointer;
    z-index: 999;
}
#nav-trigger .burger-icon {
    width: 30px;
    height: 25px;
    position: relative;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);

}
    #nav-trigger .burger-icon span {
        display: block;
        position: absolute;
        height: 4px;
        width: 100%;
        background: #000;
        opacity: 1;
        left: 0;
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    .burger-icon span:nth-child(1) {
        top: 0px;
        -webkit-transform-origin: left center;
        -moz-transform-origin: left center;
        -o-transform-origin: left center;
        transform-origin: left center;
    }

    .burger-icon span:nth-child(2) {
        top: 10px;
        -webkit-transform-origin: left center;
        -moz-transform-origin: left center;
        -o-transform-origin: left center;
        transform-origin: left center;
    }

    .burger-icon span:nth-child(3) {
        top: 20px;
        -webkit-transform-origin: left center;
        -moz-transform-origin: left center;
        -o-transform-origin: left center;
        transform-origin: left center;
    }

    #nav-trigger.opened .burger-icon span:nth-child(1) {
        -webkit-transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        -o-transform: rotate(45deg);
        transform: rotate(45deg);
        top: -2px;
        left: 4px;
        background:#000;
    }

    #nav-trigger.opened .burger-icon span:nth-child(2) {
        width: 0%;
        opacity: 0;
    }

    #nav-trigger.opened .burger-icon span:nth-child(3) {
        -webkit-transform: rotate(-45deg);
        -moz-transform: rotate(-45deg);
        -o-transform: rotate(-45deg);
        transform: rotate(-45deg);
        top: 20px;
        left: 4px;
        background:#000;
    }


.tit-container .row {margin: 0;}
.menu-list {
    width: 100%; 
    list-style: none;
    background: #ffcb05;
    font-size: 1.6em !important;
    line-height: 2em;
    margin-top: -25px;
    max-height: 0;
    overflow: hidden;
    text-align: center;
    padding: 0;
}
.menu-list.opened {max-height: 700px;padding:30px 0 5px;}
.menu-list li {
    width: 100%;
    border-top: 1px solid rgba(120, 120, 120, 0.2);
    /*max-width: 1000px;*/
    margin: auto;
}
.menu-list li a {
    padding: 17px;
    letter-spacing: 1px;
    text-decoration: none;
    color: #644f40;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.7em;    
}

.container a.diffVerBtn {
    background-color: #ffcb05;
    padding: 10px 30px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    font-size: 1.4em;
    font-weight: bold;
    display: block;
    text-decoration: none;
    color: #644f40;
    width: 100%;
    max-width: 500px;
    margin: auto;
    text-align: center;
}

.container a.diffVerBtn:hover {background-color:#FF7805; color:#ffffff;}

@media all and (max-width:768px) {
    .menu-list {margin-top: 0;}
    /*.menu-list.opened {padding-top: 0;}*/
}
@media all and (max-width:640px) {
    p {font-size: 1.25em; line-height: 1.3em;}
    .container {margin: 0 5px;}
    .container a.diffVerBtn span {display: block;}
    .step-by-step img { width:100%;}
    .menu-list {padding-left:35px; text-align: left;}
     .menu-list.opened {padding:0 35px 5px; text-align: left;}
    }

}