@charset "UTF-8";
@font-face{font-family:'UglyQua'; src:url(../font/UglyQua.ttf) format('truetype');}

*{padding:0; margin:0;}
ol,ul{list-style:none;}
a{text-decoration:none; color:black;}
em,b,i{font-style:normal;}
h2{font-family:'UglyQua'; color:#fff; text-shadow:2px 2px 0 rgba(48,118,200,.8);}

/*background*/
body{background:url(../img/page2bg.PNG); background-size:100% 100%; /*background:url(../img/b2.png)bottom no-repeat/100%, url(../img/sky.jpg);*/ min-width:900px; max-width:1920px;}

/*Body Wrap*/
.wrap{width:90%; margin:0 auto;}



/*Top contents*/
.top{width:100%; height:300px; position:relative;}
.top .logo{position:absolute; margin-top:130px;}
.top .toggle{margin-top:130px; float:right; cursor:pointer;}
.top .toggle span img{width: 45px;filter:drop-shadow(3px 3px 0 rgba(48,118,200,.8));}
.top>img{width:120%; height:auto; position:absolute;}



/*Side nav*/
.sidenav{height:100%; width:0; position:fixed; z-index:999; top:0; right:0; background-color:white; overflow-x:hidden; padding-top:60px; transition:0.5s;}
.sidenav a, .sidenav p{padding:10px 8px 8px 80px; text-decoration:none; font-size:25px; display:block; transition:0.3s; font-family:'UglyQua'; color:#1a456f;}
.sidenav p{margin-top:60px; margin-bottom:-10px;}
.sidenav .hr{max-width:75%; height:auto; float:right; margin:15px 30px 10px 15px;}
.sidenav a:hover, .offcanvas a:focus{color:#F3EFB0;}
.sidenav .closebtn{position:absolute; top:-30px; right:25px; font-size:70px; margin-left:50px;}
@media screen and (max-height: 450px) {
    .sidenav{padding-top:15px;}
    .sidenav a{font-size:18px;}
}



/*User Screenshot*/
.userscreenshot{width:100%; height:430px; position:relative; padding-top:50px;}
.userscreenshot h2{padding:40px 0 50px 40px; font-size:40px; text-shadow:2px 2px 0 rgba(48,118,200,.8);}
.box{float:left; margin-left:20px; width:23%; height:280px; background:url(../img/pb1.png) no-repeat; background-size:100% 100%; position:relative;}
.box:nth-child(1){margin-left:0;}
.box a{display:block; width:90%; height:auto;}
.box a img{-webkit-back-visibility:hidden; display:block; width:100%; padding:12px; height:auto; vertical-align:bottom; transition:all 0.2s;}
.box a img:hover{opacity:0.8;}
.crown img{width:40px; position:absolute; padding:10px 20px;}
.box p{font-weight:bold; font-size:25px; text-align:center; padding-top:5px; font-family:'UglyQua'; color:#092d4d;}
.box:nth-child(4n+1){clear:both; margin-left:0}
.box:nth-child(4n+0){margin-right:0}



/*REVIEW*/
.review{width:100%; position:relative;}
.review h2{padding:60px 0 40px 40px; font-size:40px; text-shadow:2px 2px 0 rgba(48,118,200,.8);}

.review-wrap{width:100%; height:470px; background:url(../img/pb2.png) no-repeat; background-size:100% 100%;}
.review .review-wrap .rev{width:22%; float:left; text-align:center; margin-left:20px; padding-top:30px; transition:all 0.2s;}
.review .review-wrap .rev:hover{opacity:0.8;}
.review .review-wrap .review1{margin-left:40px;}
.review .review-wrap .rev img{width:80%;}
.review .review-wrap .rev p{padding-top:5px; font-size:20px; color:#092d4d; font-weight:100; font-family:'UglyQua'}
.review .review-wrap .rev i{display:block; font-size:20px; font-weight:bold; padding-top:5px; font-family:'UglyQua'; color:#092d4d;}



/*Achievements Tips*/
.tips{width:100%; position:relative;}
.tips h2{padding:60px 0 40px 40px; font-size:40px;}
.tips .tips-wrap{width:100%; height:870px; background:url(../img/pb3.png) no-repeat; background-size:100% 100%; margin-bottom:100px;}
.tips .tips-wrap .tip{width:100%; height:140px;}
.tips .tips-wrap .tip:first-child{padding-top:40px;}
.tips .tips-wrap .tip .leftbox{position:absolute;}
.tips .tips-wrap .tip .leftbox .thumbnail{padding:40px 20px 20px 32px; width:auto; height:100px;}
.tips .tips-wrap .tip .rightbox{width:70%; height:140px; padding-top:40px; position:relative; left:160px;}
.tips .tips-wrap .tip .rightbox .upbox{width:100%; height:50%; color:#092d4d; font-family:'UglyQua';}
.tips .tips-wrap .tip .rightbox .upbox h3{font-size:20px; font-family:'UglyQua'; color:#092d4d;}
.tips .tips-wrap .tip .rightbox .upbox p{font-size: 14px;}
.tips .tips-wrap .tip .rightbox .upbox .lefttxt{float:left;}
.tips .tips-wrap .tip .rightbox .upbox .righttxt{float:right; width:150px; transition:all 0.2s;}
.tips .tips-wrap .tip .rightbox .upbox .righttxt:hover{opacity:0.4;}
.tips .tips-wrap .tip .rightbox .upbox .righttxt h3{float:left; padding:10px;}
.tips .tips-wrap .tip .rightbox .upbox .righttxt img{width:40px; height:auto; padding:15px 0 0 0;}
.tips .tips-wrap .tip .rightbox .downbox{width:90%;}
.tips .tips-wrap .tip .rightbox .downbox img{width:100%; height:6px;}
.tips .tips-wrap .page{width:240px; height:50px; margin:0 auto; padding-top:50px; font-family:'UglyQua';}
.tips .tips-wrap .page .pagelist li a{color:#092d4d;}
.tips .tips-wrap .page .pagelist li{float:left; margin-left:20px; margin-top:50px; transition:all 0.2s;}
.tips .tips-wrap .page .pagelist li:hover{opacity:0.5;}
.tips .tips-wrap .page .pagelist li:nth-child(2){font-size:25px; top:-7px; position:relative;}
.tips .tips-wrap .page .pagelist li:nth-child(3){font-size:25px; top:-7px; position:relative;}
.tips .tips-wrap .page .pagelist li:nth-child(4){font-weight:bold; top:-5px; position:relative;}
.tips .tips-wrap .page .pagelist li:nth-child(5){font-weight:bold; top:-5px; position:relative;}
.tips-left{float:left; width:50%;}
.tips-right{float:right; width:50%;}



/*footer*/
.footer{width:100%; height:50px; background:black;}
.footer .footer-wrap{width:100%;text-align: center;}
.footer .footer-wrap img{width:auto; height:30px; padding:10px;}
.footer .footer-wrap p{color:#fff; font-size:15px; display:inline-block; position:absolute; line-height:50px; right: 10px;}