@font-face {
    font-family: 'OpenSans-Bold';
    src: url('fonts/OpenSans-Bold.eot');
    src: url('fonts/OpenSans-Bold.eot?#iefix') format('embedded-opentype'),
        url('fonts/OpenSans-Bold.woff2') format('woff2'),
        url('fonts/OpenSans-Bold.woff') format('woff'), 
        url('fonts/OpenSans-Bold.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'OpenSans-Regular';
    src: url(fonts/OpenSans-Regular.eot),url(fonts/OpenSans-Regular.ttf);
    font-weight: normal;
    font-style: normal;
}


@font-face {
    font-family: 'Oswald-Regular';
    src: url('fonts/Oswald-Regular.eot');
    src: url('fonts/Oswald-Regular.eot?#iefix') format('embedded-opentype'), url('fonts/Oswald-Regular.woff2') format('woff2'), url('fonts/Oswald-Regular.woff') format('woff'), url('fonts/Oswald-Regular.ttf') format('truetype'), url('fonts/Oswald-Regular.svg#Oswald-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Oswald-Medium';
    src: url('fonts/Oswald-Medium.eot');
    src: url('fonts/Oswald-Medium.eot?#iefix') format('embedded-opentype'), url('fonts/Oswald-Medium.woff2') format('woff2'), url('fonts/Oswald-Medium.woff') format('woff'), url('fonts/Oswald-Medium.ttf') format('truetype'), url('fonts/Oswald-Medium.svg#Oswald-Medium') format('svg');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Inter-Semi';
    src: url('fonts/Inter-SemiBold.eot');
    src: url('fonts/Inter-SemiBold.eot?#iefix') format('embedded-opentype'),
        url('fonts/Inter-SemiBold.woff2') format('woff2'),
        url('fonts/Inter-SemiBold.woff') format('woff'),
        url('fonts/Inter-SemiBold.ttf') format('truetype'),
        url('fonts/Inter-SemiBold.svg#Inter-SemiBold') format('svg');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Inter-Regular';
    src: url('fonts/Inter-Regular.eot');
    src: url('fonts/Inter-Regular.eot?#iefix') format('embedded-opentype'),
        url('fonts/Inter-Regular.woff2') format('woff2'),
        url('fonts/Inter-Regular.woff') format('woff'),
        url('fonts/Inter-Regular.ttf') format('truetype'),
        url('fonts/Inter-Regular.svg#Inter-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}




.loadingbg {
    background-color: rgba(0, 0, 0, 0.4);
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    display: none;
    z-index: 10000;
}

.loadinginnerbg {
    background-color:#fff;
    width: 300px;
    height:300px;
    position: fixed;
    left: 50%;
    top: 50%; 
    margin-top: -150px; 
    margin-left: -150px; 
    border-radius:7px
}

.loading {
    background-image:url(../images/loading.gif);
    width:150px;
    height:150px;
    margin:0 auto;
    text-align:center;
    margin-top:50px;
}

.loadingtext {
    font-family:'SourceSansPro';
    font-size:16px;
    color:#000;
    text-align:center;
}

body {
    height: 100%;
    width: 100%;
    text-align: center;
    padding: 0;
    margin: 0 auto;
    font-family: 'OpenSans-Regular';
    font-size:1vw;
    color: #555;
}

.text {
    font-family:'SourceSansPro';
    line-height:32px;
    font-size:18px;
    color:#3e3937;
}

.text18 {
    font-family:'SourceSansPro';
    line-height:30px;
    font-size:18px;
    color:#3e3937;
}




/* Reset */
*,
*:after,
*:before {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

a {
	-webkit-transition:all 0.3s ease;
	-moz-transition:all 0.3s ease;
	-o-transition:all 0.3s ease;
	transition:all 0.3s ease;
    text-decoration:none;
}
a, a:hover, a:visited, a:link, a:active{
    outline: none;
    /*background: transparent;*/
    /*border:0 !important;*/
  
    text-decoration:none !important;
    -webkit-transition:all 0.3s ease; -moz-transition:all 0.3s ease; -o-transition:all 0.3s ease; transition:all 0.3s ease; 
}
    a:focus {
    outline: none;
    color:transparent;
    text-decoration: none;
    }

input:focus,
select:focus,
textarea:focus,
button:focus {
    outline: none;
}
input::-ms-clear{display:none;}
input::-ms-reveal{display:none;}
/*ul,li { list-style: none;}*/
h1, h2, h3, h4, h5, h6 { margin:0; }

a img {border:none}
.white{color:#ffffff;text-decoration:none;}
.red{color:#8e7a3f;}
.green{color:#2a884a}
.blue{color:#0069b5}
.orange{color:#f79638}

.cap {text-transform:uppercase;border: none; text-decoration:none !important}



.center{text-align:center; padding:0px; margin:0 auto;}
.clear{clear:both}
.bold {font-weight: 600;}
.fixed{position:fixed !important; display:block !important}

.hide{display:none}
.show{display:block}
.h580view{display:block}
.h580hide{display:none}
.mbhide{display:block}
.mbshow{display:none}
.padhide{display:block}
.padshow{display:none}


a.link:link {
    color: #ee3f2b;
    text-decoration: none;
    -webkit-transition: all 0.25s ease;
    -o-transition: all 0.25s ease;
    transition: all 0.25s ease;
    cursor: pointer
}
a.link:hover {
    color: #f17f44;
    text-decoration: none;
    cursor: pointer
}
.link {
    color: #ee3f2b;
    text-decoration: none;
    cursor: pointer
}


a.linkwt:link{color:#fff; text-decoration:underline;  -webkit-transition: all 0.25s ease; -o-transition: all 0.25s ease;	transition: all 0.25s ease; cursor:pointer}
a.linkwt:hover {
    color: #ee3f2b;
    text-decoration: underline;
    cursor: pointer
}
.linkwt{color:#fff; text-decoration:underline;  cursor:pointer}


a.linkgold:link{color:#ad974f; text-decoration:none; -webkit-transition: all 0.25s ease; -o-transition: all 0.25s ease;	transition: all 0.25s ease; cursor:pointer}
a.linkgold:hover{color:#000; text-decoration:none;  cursor:pointer}
.linkgold{color:#ad974f; text-decoration:none;  cursor:pointer; }

a.linkred:link{color:#8e7a3f; text-decoration:none; -webkit-transition: all 0.25s ease; -o-transition: all 0.25s ease;	transition: all 0.25s ease; cursor:pointer}
a.linkred:hover{color:#aeaeae; text-decoration:none;  cursor:pointer}
.linkred{color:#8e7a3f; text-decoration:none;  cursor:pointer; }

a.linkbreadcrum:link{color:#737270; text-decoration:none; -webkit-transition: all 0.25s ease; -o-transition: all 0.25s ease;	transition: all 0.25s ease; cursor:pointer}
a.linkbreadcrum:hover{color:#ad974f; text-decoration:none;  cursor:pointer}
.linkbreadcrum{color:#737270; text-decoration:none;  cursor:pointer; }

a.linkwt2red:link{color:#fff; text-decoration:underline;  -webkit-transition: all 0.25s ease; -o-transition: all 0.25s ease;	transition: all 0.25s ease; cursor:pointer}
a.linkwt2red:hover{color:#8e7a3f; text-decoration:underline;  cursor:pointer}
.linkwt2red{color:#fff; text-decoration:underline;  cursor:pointer}

/**/


button, html input[type="button"], input[type="reset"], input[type="submit"] {
-webkit-appearance: button;
cursor: pointer;
}

h1 {
   
    font-size: 86.44px;
    line-height: 102px;
    color: #222f3e;
    text-align: center;
    font-family: 'jinmeixinmaokai';
}

h2 {
    font-family: 'Oswald-Regular';
    font-size: 36px;
    line-height: 60px;
    letter-spacing:1PX;
    color:#323033;
    padding: 0;
    margin: 0;
    font-weight: normal;
}


h3 {
    font-size: 16px;
    font-family: 'Oswald-Medium';
    color: #fff;
    line-height: 30px;
    letter-spacing: 1px;
    font-weight: normal;
}

h4 {
    font-family: 'Oswald-Regular'; font-size: 24px;
    color: #323033;
    line-height: 32px;
     letter-spacing: 1px;
}

h5 {
    font-size: 14px;
    font-family: 'Oswald-Medium';
    color: #fff;
    line-height: 24px;
    letter-spacing: 1px;
    font-weight: normal;
}

.chinese {
    font-family: 'Poppins-Light','AdobeHeitiStd-Regular';
}
.language{position:absolute;right:300px;height:37px;}
.language-toggle {
    position: absolute;
    top: 50%;
    right: 10px;
    width: 80px;
    height: 40px;
    cursor: pointer;
    overflow: hidden;
    border-radius: 5px;
    background-color: #e6e6e6;
    transform: translateY(-50%);
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    font-family: 'Poppins-Medium','AdobeHeitiStd-Regular';
}
.language-toggle .lang{position:absolute;width:100%;padding:11px 10px;box-sizing:border-box;}
.language-toggle .en{left:-50%;text-align:left;}
.language-toggle .zh{left:50%;text-align:right;}
.language-toggle .toggleBtn{width:25px;height:85%;margin:4%;border-radius:5px;background-color:#9a1116;}
.en .en{left:0%;}
.en .zh{left:100%;}
.en .toggleBtn{transform:translateX(48px);}
.zh .en{left:-100%;}
.zh .zh{left:0%;}
.zh .toggleBtn{transform:translateX(0);}
.langLink {
    font-family: 'Poppins-Medium','AdobeHeitiStd-Regular';
    font-size: 14px;
    letter-spacing: 1px;
    line-height: 40px;
    color: #fff;
    background: none;
    width: auto;
    text-align: center;
    text-transform: uppercase;
    vertical-align: middle;
}
    .langLink:hover, .en_select {
        color: #d8bb83;
        /*font-weight: bold;*/
    }


/*********backtotop**********/
.actGotop{position:fixed; _position:absolute; bottom:120px; right:20px; width:40px; height:40px; display:none;z-index: 99999;}
.actGotop a,.actGotop a:link{width:40px;height:40px;display:inline-block; background:url(../images/backtotop.png) no-repeat;    background-size: 100%; outline:none;}
.actGotop a:hover{width:40px; height:40px; outline:none;background:url(../images/backtotop_ov.png) no-repeat;    background-size: 100%;}

.actGotWhatsApp {
    position: fixed;
    _position: absolute;
    bottom: 70px;
    right: 20px;
    width: 48px;
    height: 48px;
    z-index: 99999;
}
    .actGotWhatsApp a, .actGotWhatsApp a:link {
        width: 48px;
        height: 48px;
        display: inline-block;
        background: url(../images/whatsapp.png) no-repeat;
        outline: none;
    }
        .actGotWhatsApp a:hover {
            width: 48px;
            height: 48px;
            outline: none;
            background: url(../images/whatsapp_ov.png) no-repeat;
        }
/***************************/

/*#footer_contact{position:fixed; _position:absolute; bottom:0px; left:0px; width:100%; height:70px; transform: translateY(100%);z-index: 1;padding:10px 0px}
#footer_contact.hover {transform: translateY(0);background-color: rgba(0, 0, 0, 0.7);}
#footer_contact .home_appbtn{height:50px;width:250px;color:#fff;padding:0 20px;text-transform:uppercase;font-family:'Futura-Medium', 'STHeiti', '\534E\6587\9ED1\4F53', ' SimHei', '\9ED1\4F53';border-radius: 30px; font-size:14px;line-height:50px;-webkit-transition: all 0.25s ease; -o-transition: all 0.25s ease;	transition: all 0.25s ease; cursor:pointer}
#footer_contact .home_enqbtn{background:transparent;border:1px solid #fff;height:50px;width:180px;color:#fff;padding:0 20px;text-transform:uppercase;font-family:'Futura-Medium', 'STHeiti', '\534E\6587\9ED1\4F53', ' SimHei', '\9ED1\4F53';border-radius: 30px; font-size:14px;line-height:50px;-webkit-transition: all 0.25s ease; -o-transition: all 0.25s ease;	transition: all 0.25s ease; cursor:pointer}
#footer_contact .home_enqbtn:hover{background: #77cebd;}
#footer_contact .content_10{line-height:50px;}
.content_5 img{width:100%; max-width:11px}*/


/*----------------------------Navigation--------------------------------------*/
.maincontent{position:relative;width:100%;min-height:500px;margin-top:-4px;z-index:1;}
.content1280{width:100%; height:100%; max-width:1280px; text-align:center; margin:0 auto; position:relative; padding:0px; min-height:50px;}
.content1215 {
    width: 100%;
    height: 100%;
    max-width: 1215px;
    text-align: center;
    margin: 0 auto;
    position: relative;
    padding: 0px;
    min-height: 50px;
}

.content1050{width:100%; height:100%; max-width:1050px; text-align:center; margin:0 auto; position:relative; padding:0px; min-height:50px;}
.content1024{width:100%; max-width:1024px; text-align:center; margin:0 auto; position:relative; padding:0px;min-height:50px;}
.content960{width:100%; max-width:960px; text-align:center; margin:0 auto; position:relative; padding:0px;min-height:50px; }
.content880{width:100%; max-width:880px; text-align:center; margin:0 auto; position:relative; padding:0px;min-height:50px; }
.content800{width:100%; max-width:800px; text-align:center; margin:0 auto; position:relative; padding:0px;min-height:50px; }
.content500{width:100%; max-width:500px; text-align:center; margin:0 auto; position:relative; padding:0px;min-height:50px; }
.content_half{width:50%; float:left; position:relative;}
.content_half_r{width:50%; float:right; position:relative;}
.content_5{width:5%; float:left; position:relative; display:block}
.content_10{width:10%; float:left; position:relative; display:block}
.content_15{width:15%; float:left; position:relative; display:block}
.content_20{width:20%; float:left; position:relative; display:block}
.content_25{width:25%; float:left; position:relative; display:block}
.content_30{width:30%; float:left; position:relative;}
.content_33{width:33.3333333333333%; float:left; position:relative;}
.content_35{width:35%; float:left; position:relative; display:block}
.content_40{width:40%; float:left; position:relative;}
.content_45{width:45%; float:left; position:relative;}
.content_50{width:50%; float:left; position:relative;}
.content_55{width:55%; float:left; position:relative;}
.content_60{width:60%; float:left; position:relative;}
.content_65{width:65%; float:left; position:relative;}
.content_70{width:70%; float:left; position:relative;}
.content_75{width:75%; float:left; position:relative;}

.content_80{width:80%; margin:0 auto; position:relative;}
.content_85{width:85%; margin:0 auto; position:relative;}

.content_90{width:90%; float:left; position:relative;}
.content_pc{display:block}
.content_mb{display:none}
.content1280_pc{display:block}
.content1279_mb{display:none}
.left{float:left}
.right{float:right}
.alignleft {text-align:left}
.alignright {text-align:right}
.justify {text-align:justify }
.marginauto{ margin:0 auto;}

#header {width: 100%; position: fixed; z-index: 99999; max-height: 105px; min-height:100px;}
#slider-menu {display:none}
.menu-trigger {display:none}
#navi{display:block}
#mobilenavi{display:none}
#logo_area {width:45%; min-width:300px; height:100px; text-align:center; float:left; position:relative; display:block; top:52px; }

#nav_wrap{width:55%; float:right; min-width:1000px;max-width:1300px}

a.navLink:link{color:#000; text-decoration:none; -webkit-transition: all 0.25s ease; -o-transition: all 0.25s ease;	transition: all 0.25s ease; cursor:pointer}
a.navLink:hover{color:#009ae0; text-decoration:none;  cursor:pointer; -webkit-transition: all 0.25s ease; -o-transition: all 0.25s ease;	transition: all 0.25s ease; cursor:pointer}
a.navLink.nav_active{color:#009ae0 !important}
.nav_active{color:#009ae0}

.navi_area{width:100%; height:100px;   text-align:center;margin-top:0;}
.navi_area ul li {float:right; position:relative; display:inline; padding:0;}


.logo{position:absolute;z-index:9;left: 48.5%; margin-left: -5.07vw; top: 1vw; width: 10.14vw;}
div.just {text-align: justify;}
.just:after {content: ''; display: inline-block; width: 100%; height: 0;}

.opacity{opacity: 0;}
.inView .opacity{opacity: 1; /*transform: translate(0px);*/}
.inView .css1000{-moz-transition: all 500ms linear; -webkit-transition: all 500ms linear; -o-transition: all 500ms linear; transition: all 500ms linear;}

.navitopbg{float:right; width:380px; height:50px; background:#eeeeee; padding:12px 0px; border-radius:0 0 15px 15px; -moz-border-radius:0 0 15px 15px; -webkit-border-radius:0 0 15px 15px; display:block}
.navitopbg a{font-family: 'OpenSans Regular', 'Open Sans'; font-weight:600; font-size:14px; line-height:20px; height:20px; text-transform:uppercase; color:#c5263a; text-decoration:none;  -webkit-transition: all 0.25s ease; -o-transition: all 0.25s ease;	transition: all 0.25s ease; cursor:pointer}
.navitopbg a:hover{font-family: 'OpenSans Regular', 'Open Sans'; font-weight:600; color:#232323; text-decoration:none;  -webkit-transition: all 0.25s ease; -o-transition: all 0.25s ease;	transition: all 0.25s ease; cursor:pointer}
.navitopbg img{margin-right:10px; margin-top: 3px; margin-left:25px;}
.menu_top{
    font-family: 'Inter-Regular';font-size:20px;
    line-height:24px;color:#271770;
        position: relative;
    top: -30px;
}
.menu-trigger:before {
        position: absolute;
        left: 0;
        width: 35px;
        height: 29px;
        /*background: linear-gradient(to right, #0358ff, #02afed);
        box-shadow: 0 11px #0502ff, 0 11px #fff, 0 22px #0502ff, 0 22px #fff;*/
        top:15px;
        background:url(../images/menu_trigger.png) no-repeat;
        box-shadow:none;
        content: '';
    }
    .menu-trigger {
        position: relative;
        padding-left: 0px;
        width: 35px;
        height: 29px;
        font-size: 0.9em;
    }
.footer {
    position: absolute;
    bottom: 0;
    z-index: 3;
    background: url(../images/topzone_footer_bg.png) no-repeat;
    background-size: 110%;
    width: 100%;
    text-align: center;
    margin: 0 auto;
    color: #fff;
    font-family: 'OpenSans-Regular';
    font-size: 14px;
}
.footerlogoarea{width:100%; max-width:9.375vw;margin-top:-1.042vw;}
.footerlogo{width:100%; max-width:62px; }
.footer_copywrite{min-height:60px; background:#f9f3e9; text-align:center; padding:20px 5%; margin:0 auto; color:#2f2f2f; font-family:'OpenSans Regular','AdobeHeitiStd-Regular';font-size:14px;}
.footernavi{width:100%;margin:0px auto;}
.footernavi .content_70{width:70%; padding:0;}
.footernavi .content_70 ul{padding:0; max-width:720px; text-align:center; margin:0 auto;}
.footernavi .content_70 ul li{padding:0; margin:0; width:20%; float:left;font-family:'Exo-ExtraBold','AdobeHeitiStd-Regular'; text-transform:uppercase; font-size:16px;color:#3e3937; text-align:center; margin:0 auto;list-style:none;}
.padshow{display:none !important}
.padhide{ display: block}

.height30{height:30px}
.height50{height:50px}
.height20{height:20px} 
.height10{height:10px}
.height80 {
    height: 80px;
}
.height150 {
    height: 150px;
}
.height180 {
    height: 180px;
}


.navifakebg{width:100%; height:90px;background:#fff;position:fixed; z-index:5}
#Master.onScroll #Nav {
    height: 100px;
    -moz-transition: all 800ms;
    -webkit-transition: all 800ms;
    -o-transition: all 800ms;
    transition: all 300ms;
}
#Master.onScroll > #Nav > .bg {width:85%;}
#Master.onScroll #Nav #logo_area{height: 55px !important;padding-top:0px;z-index:99;    top: 7px;    text-align: left;}

#Master.onScroll > #Nav > .bg > #nav_wrap {
    transform: translateY(-25%);
    -moz-transition: 800ms, height 1.2s;
    -webkit-transition: 800ms, height 1.2s;
    -o-transition: 800ms, height 1.2s;
    transition: 800ms, height 1.2s;
}
#Master.onScroll #navClear{height: 70px;}
#Master.onScroll>#Nav>.bg>#nav_wrap .btmnavi{height:24px}
#Master.onScroll>#Nav #navUL.topnavi{height:40px; margin-top:5px;}
 
.content_top li{
    width:30%;
    text-align:left;
    float:left;
    list-style:none;

}
.callme{
        width: 25px;
    position: absolute;
    left: -30px;
}

    .content_top li:nth-child(2) {
        width: 40%;
    }
.content_top {
    padding:50px 0;
}
.content_top h3:hover,.content_top h5:hover{
    cursor:pointer;
    color:#009ae0;
}
.content_bottom {
    padding:15px 0;
    background:#fff;
    color:#091167;
}
.content_bottom a{color:#091167;}
    .content_bottom a:hover {
        color: #009ae0;
    }
.navi_area ul li.Navifun {
    position: relative;
}
.navi_area ul li.Navifun div.cpms-ul{position: absolute; top: 10px; height: 0; overflow: hidden; width: 185px;  left: -50%; margin-left:-5px; background: url(../images/dropdown_menu.png) no-repeat; background-size:100%;}
    .navi_area ul li.Navifun.navi_server div.cpms-ul {
        width: 400px;
        height: 0px;
        left: -70%;
        box-shadow: 1px 2px 20px rgba(0, 0, 0, 0.38);
        background: #7d1e1c url(../images/server-dropdown.png) no-repeat;
        background-size: 100%;
        text-align: left;
        padding: 0;
    }
  
.navi_area ul li.Navifun:hover div.cpms-ul{color:#009ae0;  height: 250px; padding-top: 20px; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; text-decoration: none;}

.navi_area ul li.Navifun div.cpms-ul li{width:100%;}

.mbbookbtn {
    background: #d8bb83 linear-gradient(to right, #fbeeda, #d8bb83);
    font-family: 'Poppins-Medium','AdobeHeitiStd-Regular';
    border-radius: 5px;
    width: 150px;
    height: 45px;
    line-height: 45px;
    font-size: 18px;
    text-align: center;
    margin: 0 auto;
    cursor: pointer;
    color: #555;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
    text-decoration: none;
}
    .mbbookbtn:hover {
        background: #fbeeda linear-gradient(to right, #d8bb83,#fbeeda);
        cursor: pointer;
    }
.mbbookbtn img{
    position:relative;
    left:-5px;
    top:4px;
}

.mb_culvision {
    margin-top: 20px;
    text-align: center;
}
    .mb_culvision a {
        color: #fff;
    }
    .mb_culvision a:hover {
        color: #d8bb83;
    }

.footer_last {
    width: 285px;
    height: 65px;
    display:table;
}

.footer_iconbg {
    background:url(../images/icon_bg.png) no-repeat;
    background-size:100%;
    width:70px;
    height:65px;
    text-align:center;
    display:table-cell;
}
.footer_last_limg {
    position:relative;
    top:2px;
}
#Master #Nav #navUL.topnavi li.mas_vesion {
    padding-top: 9px;
    padding-left: 15px;
}

.navi_area ul li .navidiv.donate {
    width: 160px;
    height: 38px;
    background: olive linear-gradient(to right, #fbeeda, #d8bb83);
    transition: background-color .5s;
    margin: 0px 10px;
    padding-top: 0px;
    border-radius: 8px;
    box-shadow: 1px 2px 15px rgba(0, 0, 0, 0.41);
    color:#000;
}
    .navi_area ul li .navidiv.donate:hover {
        background-color: #d8bb83;
        cursor:pointer;
        color:#8e7a3f;
    }
    .navtop{
top:10px;
    }
.navtop2 {
    top: 6px;
}


/************************************************************yoyo end*********************************************/
@media only screen and (min-width: 1280px) {
    #logo_area {
        min-width: inherit;
            width: 40%;
    }
      #logo_area .logo_top {
      width: 100%;
        position:absolute;
     top: -52px;
    left: 0;
    height: 10px;
    background: #ccc;
    }

    #nav_wrap {
        min-width: inherit;
        max-width: none;
         width:60%;
    }

    #Master.onScroll #Nav {
        height: 60px;
        background: #fff;
        box-shadow: 1px 2px 10px rgb(9, 17, 103);
        opacity: 1;
        transform: translateY(0);
        -moz-transition: opacity 800ms, height 1.2s;
        -webkit-transition: opacity 800ms, height 1.2s;
        -o-transition: opacity 800ms, height 1.2s;
        transition: opacity 800ms, height 1.2s;
    }


    .content_top {
        width: 90%;
        margin: 0 auto;
        padding: 12% 10% 40px 10%;
    }
    .footer {
        font-size: 14px;
        line-height:22px;
    }
    .navi_area ul li.Navifun div.cpms-ul {
        top: 3.016vw;
        width: 12.453vw;
        left:-40%;
    }

    .navi_area ul li.Navifun:hover div.cpms-ul {
        height: 13.125vw;
        padding: 1vw;
    }
        .navi_area ul li.Navifun:hover div.cpms-ul.volun {
            left: -10%;
        }

    .navi_area ul li.Navifun.navi_server div.cpms-ul {
        width: 25vw;
    }
    .navi_area ul li.Navifun.navi_server:hover div.cpms-ul {
        height: 13.125vw;
        padding: 0.888vw 1.0vw;
    }


    #Master #Nav #navUL.topnavi li .cpms-ul a.navLink .navidiv {
        font-size: 0.949vw;
        line-height: 2.075vw;
        height: 2.775vw;
        padding: 0.6vw 0;
        text-align: left;
        padding-left: 3.600vw;
        position:relative;
        /*border-bottom:0.01vw solid #d8bb83;*/

    }
    .server_navi_img {
        position: absolute;
        width: 1.725vw;
        left: 0.791vw;
        top: 9px;
    }
        #Master #Nav #navUL.topnavi li .cpms-ul a.navLink .navidiv:before {
            content: "";
            color: #2e86de;
            top: 0.3vw;
            left: 1.372vw;
            position: absolute;
            font-size: 1.844vw;
        }
    #Master #Nav #navUL.topnavi li .cpms-ul a.navLink .navidiv:after {
        content: "";
        content: "";
        position: absolute;
        width: 80%;
        height: 1px;
        right: 6%;
        bottom: 0;
        border-bottom: 0.01vw solid #8e7a3f;
    }
    #Master #Nav #navUL.topnavi li .cpms-ul a.navLink .navidiv.lastbottom:after {
        border-bottom: 0 solid #8e7a3f;
    }
    /*.navi_area ul li.Navifun.navi_server div.cpms-ul .navi_server_div:last-child div.server_title {
        padding-left: 2.300vw;
    }*/

}


@media only screen and (min-width: 1367px) {
    .callme {
    width: 1.829vw;
    position: absolute;
    left: -1.195vw;
}

    #Master #Nav #navUL.topnavi li.mas_vesion {
        padding-top: 0.463vw;
        padding-left: 0.938vw;
    }

    .navi_area ul li.Navifun.navi_server:hover div.cpms-ul {
        height: 11.492vw; left: -100%;
        padding: 0;
        /*padding-top: 0.5vw;*/
        top: 3.516vw;
    }


    #Master.onScroll #Nav {
        height: 4.225vw !important;
        background: #fff;
        box-shadow: 1px 2px 10px rgba(62, 57, 55, 0.6784313725490196);
        opacity: 1;
        transform: translateY(0);
        -moz-transition: opacity 800ms, height 1.2s;
        -webkit-transition: opacity 800ms, height 1.2s;
        -o-transition: opacity 800ms, height 1.2s;
        transition: opacity 800ms, height 1.2s;
    }

    .height30{height:2.195vw;}
.height50{height:3.658vw;}
.height20{height:1.463vw;} 
.height10{height:0.732vw;}
.height80 {
    height: 5.852vw;
}



    .height120 {
        height: 8.778vw;
    }

    .height150 {
        height: 10.973vw;
    }

    .height180 {
        height: 13.168vw;
    }

    .footer ul li {
        font-size: 1.025vw;
    }

    #Master #Nav {
        padding: 0 5%;
    }

    .navi_area {
        height: 5vw;
    }

        .navi_area .btmnavi {
            height: 2.500vw;
            width: 68%;
        }

    .footer .content1280 {
        width: 100%;
        max-width: 200vw
    }

    #logo_area {
        width: 20%;
        height: 5vw;
        text-align: center;
        float: left;
        position: relative;
        display: block;
        padding-left: 0;
    }

      #logo_area img {
    width: 15.094vw;
}

            #logo_area img.logo_font {
                width: 7vw;
            }

    #nav_wrap {
        width: 60%;
        float: right;
    }

    .navi_area ul li .navidiv {
        width: 100%;
        padding: 10px 1.3vw;
        height: 3.748vw;
    }

    h1 {
        font-size: 4.0vw;
        line-height: 4.5vw;
    }

    h2 {
        font-size: 2.250vw;
        line-height: 2.875vw; /*letter-spacing: 0.175vw*/
    }

    h3 {
           font-size: 1.170vw;
    line-height: 2.195vw;
    }

    footer {
        font-size: 0.750vw;
        line-height: 1.875vw;
    }

    h4 {
        font-size: 1.756vw;
            line-height: 2.865vw;
    }

    h5 {
        font-size: 1.024vw;
    line-height: 1.756vw;
    }

    .text {
        line-height: 2vw;
        font-size: 1.125vw;
        color: #555;
    }

    .footer_top {
        height: 1.042vw;
    }

    .footer {
        min-height: 1.330vw;
        padding: 0;
        font-size: 1.050vw;
        line-height:1.609vw;
    }

    .footerlogo {
        width: 3.229vw;
    }


    .footernavi .content_70 ul {
        max-width: 36.364vw
    }

        .footernavi .content_70 ul li {
            font-size: 0.833vw
        }

    .content_5 img {
        width: 0.573vw;
        max-width: 0.573vw
    }




    .navifakebg {
        width: 100%;
        height: 4.225vw
    }

    /*#Master.onScroll #Nav {
            height: 7.075vw !important;
            background: #e1e1e1;
            transform: scale(0.9);
        }*/
     #logo_area{
        height: 60px !important;
        /*padding-top: 0.938vw;*/
        z-index: 99;
        width: 40%;
    }

    #Master.onScroll #Nav #logo_area{
      
        width: 35%;
    }
    #Master.onScroll > #Nav > .bg > #nav_wrap{
        width: 65%;
    }

    #Master.onScroll > #Nav > .bg > #logo_area img {
        transform: scale(1);
        width: 8.5vw;
        padding-top: 0.2vw;
    }
    .menu_top {
         font-size: 1.463vw;
    line-height:1.756vw;
    letter-spacing: 0.073vw;
    color: #271770;
    position: relative;
    top: -2.195vw;
        }

        #Master.onScroll > #Nav > .bg > #logo_area .menu_top {
        
    top: -1.195vw;
        }




    #Master.onScroll #navClear {
        height: 70px;
    }

    #Master.onScroll > #Nav > .bg > #nav_wrap .btmnavi {
        height: 24px
    }

    #Master.onScroll > #Nav #navUL.topnavi {
        height: 2.500vw;
        /*margin-top: 0.938vw;*/
        padding: 2.375vw 0;
        width: 100%;
    }


    .navi_area ul li.Navifun:hover div.cpms-ul {
        padding: 35% 0;
        left: -35%;
    }

        .navi_area ul li.Navifun:hover div.cpms-ul.volun {
            padding: 20% 20% 0;
            left: 0;
        }
    .navi_area ul li.Navifun.navi_server:hover div.cpms-ul {
        height: 12.625vw;
       
    }


    .content1280 {
        max-width: 80vw;
    }

    .navi_area ul li .navidiv.donate {
        width: 9.243vw;
        height: 2.298vw;
        margin: 0.625vw 1.249vw;
        border-radius: 0.500vw;
        box-shadow: 0.062vw 0.125vw 0.937vw rgba(0, 0, 0, 0.41);
    }

    .footer_last {
        width: 17.813vw;
        height: 65px;
    }

    .footer_iconbg {
        width: 4.372vw;
        height: 4.060vw;
            padding-top: 1vw;
    }

        .footer_iconbg img {
            width: 3.123vw;
        }

            .footer_iconbg img.footer_last_limg {
                position: relative;
                top: 0vw;
            }

    .content1024 {
        width: 100%;
        max-width: 63.960vw;
    }

    .content800 {
        width: 100%;
        max-width: 45.969vw;
    }

    .content960 {
        width: 100%;
        max-width: 60vw;
    }
    .langLink {
        font-size: 0.875vw;
        line-height: 2.498vw;
        height: 2.498vw;
    }
    .navtop {
        top: 0.925vw;
    }

    .navtop2 {
        top: 0.575vw;
    }
            #Master #Nav #navUL.topnavi li {
    padding-left: 3%;
    padding-right: 1%;
}
        #Master #Nav #navUL.topnavi {
            width: 750px;
        }
}

@media only screen and (min-width: 1600px){
    .callme {
            top: 0.8vw;
}
            #Master #Nav #navUL.topnavi li {
    padding-left: 4%;
    padding-right: 1%;
}
        #Master #Nav #navUL.topnavi {
            width: 900px;
        }
          .content_top {
     
        padding: 12% 10% 50px 10%;
    }
}

@media only screen and (max-width: 1600px) {
    #Master #Nav #navUL.topnavi li.mas_vesion {
        padding-top: 0px;
        padding-left: 0px;
    }
}

    @media only screen and (max-width: 1279px) {
        #Nav .bg {
            display: none
        }

        #slider-menu {
            display: block;
            margin-right: 30px;
        }

        .menu-trigger {
            display: block;
            z-index: 99999;
            top: 10px;
            float: right;
        }

        .mp-menu {
            text-align: left;
        }

        #header {
            padding: 0
        }

        #mobilenavi {
            display: block;
            background: #fff;
            box-shadow: 1px 2px 10px rgba(62, 57, 55, 0.6784313725490196);
            min-width: 200px;
            text-align: center;
            margin: 0 auto;
            height: 90px;
            position: relative;
            margin-top: -3px;
        }

        .mobilenavilogo {
           position: relative;
    right: 0;
    margin-left: -40px;
    margin-top: 10px;
    width: 170px;
    float: left;
        }
        .mobilenavi_companyname{
                font-size: 18px;
                line-height:90px;
                color: #091167;
    text-transform:uppercase;
    font-family: 'Oswald-Regular';
    padding-left:20px;
        }

        .topheader_icon {
            margin-top: 0px;
            margin-right: 5px;
            float: left;
        }

        #header {
            width: 100%;
            position: fixed;
            z-index: 99999;
            height: 65px;
            min-height: 65px;
            border-bottom: 1px solid #fff;
            padding: 0px;
            box-shadow: 0px 1px 10px #ccc;
            -moz-box-shadow: 0px 1px 10px #ccc;
            -webkit-box-shadow: 0px 1px 10px #ccc;
        }

        .maincontent {
            position: relative;
            width: 100%;
            margin-top: 0;
        }

        .navi_area ul li .navidiv.fb, .navi_area ul li .navidiv.tel {
            padding: 20px
        }

        .content1280 {
            width: 100%;
            height: 100%;
            max-width: 1279px;
            text-align: center;
            margin: 0 auto;
            position: relative;
            padding: 0px;
        }

        .content1024 {
            width: 92%;
            max-width: 1024px;
            text-align: center;
            margin: 0 auto;
            position: relative;
            padding: 0px;
            padding: 0px 5%;
        }

        .content960 {
            width: 92%;
            max-width: 1280px;
            text-align: center;
            margin: 0 auto;
            position: relative;
            padding: 0px;
            padding: 0px;
        }
        .content_85 {
            width: 92%;
        }

    

        .footer .content1280 {
            padding: 0
        }

        .footer {
            font-size: 14px;
            background-size:cover;
        }

        h1 {
            font-size: 56px;
            line-height: 60px;
        }

        h2 {
            font-size: 36px;
            line-height: 36px;
        }

        h3 {
            font-size: 19px;
            line-height: 32px;
        }

        h4 {
            font-size: 22px;
            line-height: 28px;
        }

        .text {
            font-family: 'SourceSansPro','OpenSans Regular', 'AdobeHeitiStd-Regular';
            line-height: 28px;
            font-size: 18px;
            color: #555;
        }

        #Master #Nav {
            background: none !important
        }

        #Master.onScroll #Nav {
            height: 60px;
            background: none;
        }

        #Master.onScroll > #Nav > .bg > #logo_area img {
            transform: none;
        }

        #Master.onScroll > #Nav > .bg > #nav_wrap {
            transform: none;
        }

        #Master.onScroll #navClear {
            height: 70px;
        }
        .content_top {
            padding:150px 0 30px;
            width: 80%;
            margin: 0 auto;
        }
          .mobie_nav{
              width:300px;
              margin:0 auto;
          }
    }

    @media only screen and (max-width: 1079px) {
            .content1280_pc {
            display: none
        }

        .content1279_mb {
            display: block;
            padding: 0 4%;
        }
        .content_bottom{
            /*background:none;*/
        }
    }
@media only screen and (max-width: 959px) {
    h2 {
        font-size: 32px;
    }

    h4 {
        /*font-size: 15px;*/
    }

    .padshow {
        display: block !important;
    }

    .padhide {
        display: none !important;
    }

    .content880 {
        width: 100%;
        max-width: 880px;
        text-align: center;
        margin: 0 auto;
        position: relative;
        padding: 0px 5%;
        min-height: 30px;
    }

    .footer .content_20.logo20 {
        width: 20%;
    }

    .footer .content_20 {
        width: 10%;
    }

    .footer .content_60 {
        width: 70%;
    }

    .footerlogoarea {
        width: 100%;
        max-width: 200px;
        margin-top: -10px;
    }

    .content_top {
        display: none;
    }

    h1 {
        font-size: 48px;
        line-height: 52px;
    }

    .content_bottom a {
        color: #fff;
    }

    .content_bottom {
        background: none;
            padding: 100px 0 0;
        height:42px;
        color: #fff;
    }

   .footer { background: url(../images/topzone_footer_bg.png) no-repeat top; background-size: 100%;height: 140px;}
   .height180 {
    height: 80px;
}
    }


    @media only screen and (max-width: 767px) {
        #mobilenavi {
            display: block;
           
            min-width: 200px;
            text-align: center;
            margin: 0 auto;
            position: relative;
            margin-top: 0;
            height:80px;
        }

        .mobilenavilogo {
           
            margin-top: 8px;
        }
        .mobilenavi_companyname {
            line-height: 80px;
             
        }
        .menu-trigger {
            top:10px;
        }

        .text {
            line-height: 26px;
            font-size: 16px;
        }

        .content_pc {
            display: none
        }

        .content_mb {
            display: block
        }

        .content_50, .content_35, .content_half, .content_half_r, .content_30, .content_40, .content_60, .content_70, .content_54, .content_46 {
            width: 100%;
            float: none
        }

        .content_25, .content_75 {
            width: 100%;
            float: none;
            position: relative;
        }
        /*********backtotop**********/
        /*.actGotop{position:fixed; position:absolute; bottom:50px; right:10px; width:40px; height:40px; display:none;z-index: 99999;}
.actGotop span, .actGotop span:link{width:40px;height:40px;display:inline-block; background:url(../images/backtotop_mb.png) no-repeat; outline:none;}*/
        .mbhide {
            display: none
        }

        .mbshow {
            display: block
        }


        /***************************/
        .footer {
            min-height: 30px;
            width: 100%;
            text-align: center;
            margin: 0 auto;
            font-size: 12px;
            line-height: 18px;
                padding-top: 80px;
        }

        .footernavi {
            margin-top: 0
        }

        h1 {
            font-size: 42px;
        }
        h2 {
            font-size: 28px;
        }

       
        h5 {
            font-size: 18px;
        }

        #footer_contact {
            position: fixed;
            _position: absolute;
            bottom: 0px;
            left: 0px;
            width: 100%;
            height: 70px;
            transform: translateY(100%);
            z-index: 1;
            padding-top: 20px;
            color: #fff;
        }

            #footer_contact.hover {
                transform: translateY(0);
            }

            #footer_contact .home_appbtn {
                height: 50px;
                width: 250px;
                color: #fff;
                padding: 0 20px;
                text-transform: uppercase;
                font-family: 'Istok-Bold';
                border-radius: 10px;
                font-size: 14px;
                line-height: 50px;
                letter-spacing: 1.5px;
                -webkit-transition: all 0.25s ease;
                -o-transition: all 0.25s ease;
                transition: all 0.25s ease;
                cursor: pointer
            }

            #footer_contact .home_enqbtn {
                background: transparent;
                border: 1px solid #fff;
                height: 50px;
                width: 180px;
                color: #fff;
                padding: 0 20px;
                text-transform: uppercase;
                font-family: 'Istok-Bold';
                border-radius: 10px;
                font-size: 14px;
                line-height: 50px;
                letter-spacing: 1.5px;
                -webkit-transition: all 0.25s ease;
                -o-transition: all 0.25s ease;
                transition: all 0.25s ease;
                cursor: pointer
            }

                #footer_contact .home_enqbtn:hover {
                    background: #016f52;
                }

            #footer_contact .content_10 {
                line-height: 50px;
            }

            #footer_contact .content_33 {
                height: 50px;
            }

                #footer_contact .content_33 img {
                    width: 6.519vw;
                    height: 6.519vw;
                    margin-bottom: -2vw;
                    margin-top: 2vw;
                }

            #footer_contact a.linkwt {
                background-color: rgba(0, 0, 0, 0.8);
            }

                #footer_contact a.linkwt:hover {
                    color: #fff !important;
                    background: rgba(0, 0, 0, 1);
                }
        /*#footer_contact .closebtn{position:absolute;top:-20px;right:-3px;cursor:pointer;}*/
        .footer .content_20 {
            width: 20%
        }

        .footer .content_60 {
            width: 60%;
            float: left;
        }
        .content_bottom {
    background: none;
    padding: 20px 4% 0;
    height: 42px;
    color: #fff;
}


    }

    @media only screen and (max-width: 580px) {
        .h580view {
            display: none
        }

        .h580hide {
            display: block
        }

        #footer_contact .content_10 {
            line-height: 50px;
        }

        #footer_contact .home_appbtn {
            height: 50px;
            width: 230px;
            padding: 0 20px;
            font-size: 12px;
            text-align: center;
            margin: 0 auto;
        }

        #footer_contact .home_enqbtn {
            height: 50px;
            width: 170px;
            font-size: 12px;
            cursor: pointer;
            text-align: center;
            margin: 0 auto;
        }

        .actGotop {
            bottom: 80px;
            right: 5px;
        }

        h1 {
            font-size: 36px;
            line-height: 40px;
            padding-top: 10px;
        }

        h2 {
            font-size: 26px;
            line-height: 32px;
        }

       

        .footer .content_20 {
            width: 50%
        }

        .footer .content_60 {
            width: 0%;
            float: left;
            display: none;
        }

        .footer .content_20.logo20 {
            width: 50%;
            font-size: 14px;
            max-width: 200px
        }

        .footerlogo {
            width: 100%;
            max-width: 50px;
        }
        .footer {
    background: url(../images/topzone_footer_bg.png) no-repeat bottom;
    background-size: 100%;
  
}
    }

    @media only screen and (max-width: 480px) {
        #footer_contact .content_50 {
            width: 52%;
            float: left;
            text-align: center;
            margin: 0 auto;
        }

        #footer_contact .content_40 {
            width: 38%;
            float: left;
            text-align: center;
            margin: 0 auto;
        }

        #footer_contact .home_appbtn {
            height: 50px;
            width: 200px;
            padding: 0 10px;
            font-size: 12px;
        }

        #footer_contact .home_enqbtn {
            height: 50px;
            width: 140px;
            padding: 0 10px;
            font-size: 12px;
            cursor: pointer
        }
    }

    @media only screen and (max-width: 430px) {

        #footer_contact {
            height: 60px
        }

            #footer_contact .content500 {
                padding: 0 0px
            }

            #footer_contact .content_10 {
                line-height: 40px;
            }

            #footer_contact .home_appbtn {
                height: 40px;
                width: 180px;
                padding: 0 10px;
                font-size: 12px;
                line-height: 40px;
            }

            #footer_contact .home_enqbtn {
                height: 40px;
                width: 120px;
                padding: 0 10px;
                font-size: 12px;
                cursor: pointer;
                line-height: 40px;
            }
        .mobilenavilogo {
            width: 150px;
                margin-left: 0px;
        }
          .mobilenavi_companyname {
            line-height: 80px;
                width: 130px;
    float: left;
    padding-left: 0;
        }
          .mobie_nav{
              width:380px;
              margin:0 auto;
          }
              .content_bottom {
    padding: 10px 4% 0;
}
              .footer{
                  height: 100px;
                      padding-top: 50px;
              }

       
    }
      @media only screen and (max-width: 380px) {
            .footer{
                  height: 85px;
                      padding-top: 35px;
              }
    
        .mobilenavilogo {
            width: 100px;
                margin-left: 10px;
                margin-top: 15px;
        }
       #mobilenavi {
   
    height: 70px;
}
       .mobilenavi_companyname {
    line-height: 70px;
}
       .content_bottom {
    padding: 10px 4% 0;
}
    }

    .moveDown {
        -o-animation: moveDown;
        -o-animation-duration: 3s;
        -o-animation-direction: alternate;
        -o-animation-timing-function: ease-in-out;
        -o-animation-iteration-count: infinite;
        -moz-animation: moveDown;
        -moz-animation-duration: 3s;
        -moz-animation-direction: alternate;
        -moz-animation-timing-function: ease-in-out;
        -moz-animation-iteration-count: infinite;
        -webkit-animation-name: moveDown;
        -webkit-animation-duration: 3s;
        -webkit-animation-direction: alternate;
        -webkit-animation-timing-function: ease-in-out;
        -webkit-animation-iteration-count: infinite;
        animation-name: moveDown;
        animation-duration: 3s;
        animation-direction: alternate;
        animation-timing-function: ease-in-out;
        animation-iteration-count: infinite;
    }

    @-o-keyframes moveDown {
        from {
            -o-transform: translateY(0%);
        }

        to {
            -o-transform: translateY(5%);
        }
    }

    @-moz-keyframes moveDown {
        from {
            -moz-transform: translateY(0%);
        }

        to {
            -moz-transform: translateY(5%);
        }
    }

    @-webkit-keyframes moveDown {
        from {
            -webkit-transform: translateY(0%);
        }

        to {
            -webkit-transform: translateY(5%);
        }
    }

    @keyframes moveDown {
        from {
            transform: translateY(0%);
        }

        to {
            transform: translateY(5%);
        }
    }

    .moveUp {
        -o-animation: moveUp;
        -o-animation-duration: 3s;
        -o-animation-direction: alternate;
        -o-animation-timing-function: ease-in-out;
        -o-animation-iteration-count: infinite;
        -moz-animation: moveUp;
        -moz-animation-duration: 3s;
        -moz-animation-direction: alternate;
        -moz-animation-timing-function: ease-in-out;
        -moz-animation-iteration-count: infinite;
        -webkit-animation-name: moveUp;
        -webkit-animation-duration: 3s;
        -webkit-animation-direction: alternate;
        -webkit-animation-timing-function: ease-in-out;
        -webkit-animation-iteration-count: infinite;
        animation-name: moveUp;
        animation-duration: 3s;
        animation-direction: alternate;
        animation-timing-function: ease-in-out;
        animation-iteration-count: infinite;
    }

    @-o-keyframes moveUp {
        from {
            -o-transform: translateY(0%);
        }

        to {
            -o-transform: translateY(-5%);
        }
    }

    @-moz-keyframes moveUp {
        from {
            -moz-transform: translateY(0%);
        }

        to {
            -moz-transform: translateY(-5%);
        }
    }

    @-webkit-keyframes moveUp {
        from {
            -webkit-transform: translateY(0%);
        }

        to {
            -webkit-transform: translateY(-5%);
        }
    }

    @keyframes moveUp {
        from {
            transform: translateY(0%);
        }

        to {
            transform: translateY(-5%);
        }
    }



    @-webkit-keyframes test {
        0% {
            transform: translate(0,0)
        }

        50% {
            transform: translate(0,5px)
        }

        100% {
            transform: translate(0,0)
        }
    }

    .jmp img:hover {
        -webkit-animation: test 0.35s ease-in 3;
        cursor: pointer
    }

    .sharethis {
        display: block;
    }



    @-webkit-keyframes flipOutY {
        from {
            -webkit-transform: perspective(1400px);
            transform: perspective(1400px);
        }

        40% {
            -webkit-transform: perspective(1400px) rotate3d(0, 1, 0, 60deg);
            transform: perspective(1400px) rotate3d(0, 1, 0, 60deg);
            opacity: 1;
        }

        50% {
            -webkit-transform: perspective(1400px) rotate3d(0, 1, 0, 90deg);
            transform: perspective(1400px) rotate3d(0, 1, 0, 90deg);
            opacity: 0;
        }

        to {
            -webkit-transform: perspective(1400px) rotate3d(0, 1, 0, 180deg);
            transform: perspective(1400px) rotate3d(0, 1, 0, 180deg);
            opacity: 0;
        }
    }

    .flipOutY {
        -webkit-animation: flipOutY 0.75s linear;
        animation: flipOutY 0.75s linear;
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;
    }


    @-webkit-keyframes flipInY {
        from {
            -webkit-transform: perspective(1400px) rotate3d(0, 1, 0, -180deg);
            transform: perspective(1400px) rotate3d(0, 1, 0, -180deg);
            opacity: 0;
        }

        50% {
            -webkit-transform: perspective(1400px) rotate3d(0, 1, 0, -90deg);
            transform: perspective(1400px) rotate3d(0, 1, 0, -90deg);
            opacity: 0;
        }

        60% {
            -webkit-transform: perspective(1400px) rotate3d(0, 1, 0, -60deg);
            transform: perspective(1400px) rotate3d(0, 1, 0, -60deg);
            opacity: 1;
        }

        to {
            -webkit-transform: perspective(1400px);
            transform: perspective(1400px);
            opacity: 1;
        }
    }

    .flipInY {
        -webkit-animation: flipInY 0.75s linear;
        animation: flipInY 0.75s linear;
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;
    }

    .animated {
        -webkit-animation-duration: 1.4s;
        animation-duration: 1.4s;
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both
    }

    @-webkit-keyframes bounceIn {
        0% {
            opacity: 0;
            -webkit-transform: scale(.3);
            transform: scale(.3)
        }

        50% {
            opacity: 1;
            -webkit-transform: scale(1.05);
            transform: scale(1.05)
        }

        70% {
            -webkit-transform: scale(.9);
            transform: scale(.9)
        }

        100% {
            opacity: 1;
            -webkit-transform: scale(1);
            transform: scale(1)
        }
    }

    @keyframes bounceIn {
        0% {
            opacity: 0;
            -webkit-transform: scale(.3);
            -ms-transform: scale(.3);
            transform: scale(.3)
        }

        50% {
            opacity: 1;
            -webkit-transform: scale(1.05);
            -ms-transform: scale(1.05);
            transform: scale(1.05)
        }

        70% {
            -webkit-transform: scale(.9);
            -ms-transform: scale(.9);
            transform: scale(.9)
        }

        100% {
            opacity: 1;
            -webkit-transform: scale(1);
            -ms-transform: scale(1);
            transform: scale(1)
        }
    }

    .bounceIn {
        -webkit-animation-name: bounceIn;
        animation-name: bounceIn
    }

    @-webkit-keyframes bounceInDown {
        0% {
            opacity: 0;
            -webkit-transform: translateY(-2000px);
            transform: translateY(-2000px);
        }

        60% {
            opacity: 1;
            -webkit-transform: translateY(30px);
            transform: translateY(30px);
        }

        80% {
            -webkit-transform: translateY(-10px);
            transform: translateY(-10px);
        }

        100% {
            -webkit-transform: translateY(0);
            transform: translateY(0);
        }
    }

    @keyframes bounceInDown {
        0% {
            opacity: 0;
            -webkit-transform: translateY(-2000px);
            -ms-transform: translateY(-2000px);
            transform: translateY(-2000px);
        }

        60% {
            opacity: 1;
            -webkit-transform: translateY(30px);
            -ms-transform: translateY(30px);
            transform: translateY(30px);
        }

        80% {
            -webkit-transform: translateY(-10px);
            -ms-transform: translateY(-10px);
            transform: translateY(-10px);
        }

        100% {
            -webkit-transform: translateY(0);
            -ms-transform: translateY(0);
            transform: translateY(0);
        }
    }

    .bounceInDown {
        -webkit-animation-name: bounceInDown;
        animation-name: bounceInDown;
    }

    @-webkit-keyframes bounceOutUp {
        0% {
            -webkit-transform: translateY(0);
            transform: translateY(0);
        }

        20% {
            opacity: 1;
            -webkit-transform: translateY(20px);
            transform: translateY(20px);
        }

        100% {
            opacity: 0;
            -webkit-transform: translateY(-2000px);
            transform: translateY(-2000px);
        }
    }

    @keyframes bounceOutUp {
        0% {
            -webkit-transform: translateY(0);
            -ms-transform: translateY(0);
            transform: translateY(0);
        }

        20% {
            opacity: 1;
            -webkit-transform: translateY(20px);
            -ms-transform: translateY(20px);
            transform: translateY(20px);
        }

        100% {
            opacity: 0;
            -webkit-transform: translateY(-2000px);
            -ms-transform: translateY(-2000px);
            transform: translateY(-2000px);
        }
    }

    .bounceOutUp {
        -webkit-animation-name: bounceOutUp;
        animation-name: bounceOutUp;
    }

    @-webkit-keyframes rollIn {
        0% {
            opacity: 0;
            -webkit-transform: translateX(-100%) rotate(-120deg);
            transform: translateX(-100%) rotate(-120deg);
        }

        100% {
            opacity: 1;
            -webkit-transform: translateX(0px) rotate(0deg);
            transform: translateX(0px) rotate(0deg);
        }
    }

    @keyframes rollIn {
        0% {
            opacity: 0;
            -webkit-transform: translateX(-100%) rotate(-120deg);
            -ms-transform: translateX(-100%) rotate(-120deg);
            transform: translateX(-100%) rotate(-120deg);
        }

        100% {
            opacity: 1;
            -webkit-transform: translateX(0px) rotate(0deg);
            -ms-transform: translateX(0px) rotate(0deg);
            transform: translateX(0px) rotate(0deg);
        }
    }

    .rollIn {
        -webkit-animation-name: rollIn;
        animation-name: rollIn;
    }