@import url(https://fonts.googleapis.com/css?family=Oswald:200,300,400,500,600&font-display=swap);
@import url(https://fonts.googleapis.com/css?family=Courgette&font-display=swap);
html,body,p,input,h1,h2,h3,h4,h5,h6,ul,ol,li,dl,dt,dd,form,figure,svg{margin:0;padding:0}img{border:none;border:0;vertical-align:middle}body,li,a,div,nav,header,footer,section,span,p,article,ol,ul,figure,form,input,textarea,em,dl,dt,dd,.h,i,img,:after,:before{box-sizing:border-box}input[type=text]::-ms-clear{display:none;width:0;height:0}input[type=text]::-ms-reveal{display:none;width:0;height:0}input[type="search"]::-webkit-search-decoration,input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-results-button,input[type="search"]::-webkit-search-results-decoration{display:none}input,button{-webkit-appearance:none}button{border:none}textarea,input,a,div,img,button,select,i,li{outline:none}a{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-decoration:none;text-decoration:none;color:#111}em,i,cite{font-style:normal}textarea,input{border:1px solid}body{overflow-x:hidden;color:#223344;font-weight:300;font-size:17px;font-family:'trueno';text-align:center}p{line-height:160%}a.full{position:absolute;width:100%;height:100%;top:0;left:0;background:rgba(0,0,0,0);opacity:0;z-index:99}header{position:relative;height:80vh;background-color:#666666;overflow:hidden;z-index:9999;display:flex;display:flex;align-items:center;justify-content:center}header .header-bg{position:absolute;left:0;bottom:0;right:0;top:0}header .header-bg>.bg-target{width:100%;height:100%;background-position:center;background-repeat:no-repeat;background-size:cover;background-attachment:fixed}header .text{position:relative;color:#fff;z-index:2}header .header-title{font-size:calc(35px + 3.5vw);margin-top:20px;text-transform:uppercase}header .header-title>span:nth-child(1){color:transparent;-webkit-text-stroke:1px rgba(59,223,133,0.5)}header .header-title>span:nth-child(2){color:#fff;-webkit-text-stroke:0}header .des{max-width:90vw;margin:20px auto 50px;padding:20px;font-size:25px}header .text a{cursor:pointer;color:#a5a5a5;font-family:'trueno';-webkit-text-decoration:underline;text-decoration:underline;transition:0.2s color}header a:hover{color:#3bdf85}header a.btn{position:relative;display:inline-block;top:0;padding:0 68px;line-height:68px;background-color:#3bdf85;border-radius:3px;color:#fff;font-weight:400}header a.btn:after{content:'';position:absolute;left:50%;top:120%;width:1px;height:0;background-color:#3bdf85}header a.btn:hover{background-color:#3bdf85;top:-10px}header a.btn:hover:after{height:100px}header .header-nav{position:absolute;color:#fff;z-index:1;left:0;right:0;top:0;padding:30px}body.manuals header,body.hosting header{height:50vh}body.manuals header .intro,body.hosting header .intro{font-size:calc(20px + 3vw);text-transform:uppercase;font-weight:bold}body.manuals header .intro-des,body.hosting header .intro-des{font-size:20px;max-width:700px;display:block;padding:0 20px;font-family:'trueno', sans-serif;color:#cccccc}h1,.intro,.box .item-label,header a.btn{font-family:'Oswald', 'Courgette', 'Cabin Sketch', 'trueno', sans-serif}footer .header-title{font-family:'Oswald', 'Courgette', 'Cabin Sketch', 'trueno', sans-serif;text-transform:capitalize}span.email{font-size:14px}span.email>i{font-size:14px;text-transform:none;color:#3bdf85;font-weight:100;font-style:normal;margin-left:5px}a.logo{width:70px;height:70px;display:block;position:absolute;margin:15px 25px;z-index:2;top:0;left:0}body.nav-fixed .header-nav{position:fixed;background:rgba(0,0,0,0.58);padding:15px}.side-menu-btn{display:none;position:fixed;top:0;right:0;margin:10px;z-index:99999;color:#fff;font-size:0;cursor:pointer;transition:color 0.2s;padding:10px}.side-menu-btn:before{content:'\e940';font-family:'myicon';font-size:40px}.side-menu-btn:hover{color:#3bdf85}ul.menu-list{padding:0;margin:0}li.menu-item{display:inline-block;padding:5px 12px;font-size:22px}li.menu-item a{color:#ffffff}li.menu-item a:before{content:'';width:0px;height:2px;background:#3bdf85;display:block;position:relative;left:-3px;top:16px;transition:all 0.2s;pointer-events:none}li.menu-item a:hover:before{width:calc(100% + 6px)}li.menu-item.current{pointer-events:none}li.menu-item.current a{color:#3bdf85}.footer-nav li.menu-item{padding:5px 3px;font-size:14px}.footer-nav li.menu-item:not(.current) a{color:#222222;-webkit-text-decoration:underline;text-decoration:underline;transition:color 0.2s}.footer-nav li.menu-item a:before{height:0}.footer-nav li.menu-item:hover a{color:#3bdf85}.list{position:relative;max-width:1300px;margin:0 auto;padding:0 3%;font-size:0;text-align:left}.col-2 .box{width:50%}.col-3 .box{width:33.333333%}.col-4 .box{width:25%}.col-4 .box .item-label{font-size:16px}.box{padding:50px;display:inline-block;vertical-align:top;text-align:center}.box .wrap{position:relative}.box .wrap .dot{z-index:1;position:absolute;top:-14px;left:8px}.box .wrap .dot>i{width:4px;height:4px;display:inline-block;background:#c5c5c5;position:relative;margin:1px;border-radius:50%;overflow:hidden;transition:background-color 0.3s}.box .wrap .item-label{display:inline-block;margin-top:30px;letter-spacing:1px;font-size:30px;line-height:120%;text-transform:uppercase;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;font-weight:400;transition:background-color 0.3s}.box .wrap .item-label em{display:block;margin-bottom:10px}.box .wrap .item-label i{display:inline-block;background-color:#d2d3d4;color:#fff;font-size:14px;padding:0 12px;line-height:30px;border-radius:14px}.box .wrap .item-img{position:relative;top:0;box-shadow:5px 12px 20px 0px #cccccc}.box .wrap .item-img:after{content:'';position:absolute;left:-4px;bottom:-4px;width:calc(100% + 8px);height:calc(100% + 28px);background-color:#f0f2f4;box-shadow:2px 28px 8px -20px rgba(0,0,0,0);border-radius:2px}.box .wrap .item-img img{max-width:100%;position:relative;width:100%;z-index:2}.box.hovering:hover .wrap .item-img:after{background-color:#3bdf85 !important}.box.hovering:hover .wrap .item-img:after{box-shadow:2px 28px 48px -20px rgba(0,0,0,0.2)}.box.hovering:hover .wrap .item-img:before{color:#fff}.box.hovering:hover .wrap .item-label i{background-color:#3bdf85}.box:hover .wrap .dot>i{background-color:#fff}.go-top{position:fixed;width:50px;height:50px;left:50%;bottom:-80px;margin-left:-25px;cursor:pointer;z-index:999999}.go-top:before{content:'\e90c';position:absolute;left:0;top:0;line-height:16px;font-family:'myicon';color:#111;width:100%;height:100%;text-align:center;z-index:9;transition:color 0.2s;font-size:12px}.go-top:after{content:'';position:absolute;width:100%;height:100%;left:0;top:0;background-color:#f0f0f0;transform:rotate(45deg);box-shadow:0 0 12px rgba(0,0,0,0.3);opacity:0.7}.go-top.show{bottom:-32px}.go-top:hover:after{opacity:1}.go-top:hover::before{color:#3bdf85}.go-top,.go-top:after,a.purchase:before,.item-img img,.box .item-label i,.item-img,.item-img:before,.item-img:after,header a.btn:after,header a.btn{transition:all 0.4s}@media screen and (max-width: 1280px){header h1{font-size:56px}.box .item-label{font-size:20px !important}.box .item-label{line-height:160%}.col-4 .box{width:50%}}@media screen and (max-width: 1023px){body{font-size:16px}header i{font-size:18px}header h1{font-size:48px}.title{font-size:30px}.list .box{width:100% !important}.list .box .item-label{font-size:18px !important}}.full-container{width:100%}a>img{height:auto;max-width:100%}.block{margin:50px 0;position:relative;z-index:999999}.filter{transition:0.3s;filter:saturate(1)}.filter:hover{filter:saturate(2)}.templates{display:flex;justify-content:center;background:#000000}.templates>.wrap{max-width:1440px}.copy-right{font-size:12px;padding:10px;color:#8c8c8c}footer{margin-bottom:35px}.sidebar{position:fixed;width:100%;height:100vh;background:rgba(34,34,34,0.8);top:0;left:0;z-index:99999;display:none;opacity:0;transition:opacity 0.5s}.sidebar.show{opacity:1}.sidebar.show .sidebar-wrap{right:0}.sidebar.show .side-close-btn{opacity:1}.sidebar .sidebar-wrap{width:280px;height:100%;position:absolute;top:0;right:-350px;background:#222;transition:right 0.5s;overflow-y:auto}.sidebar .side-nav .menu-list{margin-top:80px}.sidebar .side-nav li.menu-item{display:block;padding:5px 50px;text-align:left;font-size:22px}.sidebar .side-nav li.menu-item:not(.current) a{transition:color 0.2s}.sidebar .side-nav li.menu-item a:before{height:0}.sidebar .side-nav li.menu-item:hover a{color:#3bdf85}.sidebar .side-nav li.menu-item.current:before{content:'';width:18px;height:1px;display:block;position:relative;background:#3bdf85;left:-28px;top:15px}.sidebar .info{display:block;margin-top:80px}.sidebar .info-btn{padding:10px 0;width:66%;border:1px solid #fff;margin:10px 0;left:17%;position:relative;border-radius:20px;display:block;color:#fff;transition:all 0.2s}.sidebar .info-btn:hover{background-color:#3bdf85;border-color:#3bdf85}.sidebar .info-btn.invert{border-color:#3bdf85;color:#3bdf85}.sidebar .info-btn.invert:hover{color:#222;border-color:#fff;background-color:#fff}.sidebar .side-close-btn{position:absolute;right:0;top:0;padding:5px;margin:10px;opacity:0;transition:opacity 0.5s ease 0.5s;cursor:pointer;z-index:1}.sidebar .side-close-btn>svg{color:#fff;width:40px;height:40px;stroke-width:1px}.sidebar .side-close-btn:hover>svg{color:#3bdf85}.manuals-list>li{margin:60px 0;position:relative;list-style-type:none}.manuals-list>li>.wrap{display:inline-block}.manuals-list>li>.wrap:before{content:'';width:0;height:2px;display:block;position:absolute;left:50%;top:calc(50% - 1px);background:#3bdf85;z-index:-1;transition:all 0.5s}.manuals-list>li>.wrap:hover:before{left:0;width:100%}.manuals-list>li>.wrap:hover .item-img{transform:rotate(5deg)}.manuals-list>li>a{display:inline-block;border:solid 3px #eeeeee;transition:border-color 0.2s}.manuals-list>li>a:hover{border-color:#3bdf85}.manuals-list>li .item-img{transition:transform 0.3s}.manuals-list>li .item-img img{max-width:100%;border:solid 2px #eeeeee}.manuals-list>li .item-name{text-align:left;font-size:20px;padding:12px 0;z-index:1;position:relative}.manuals-list>li .item-name:before{content:'';width:20px;height:2px;background:#3bdf85;display:block;position:relative;top:12px;left:-30px}.manuals-list>li .item-name>i{font-weight:bold;color:#3bdf85}.manuals-list>li .label{display:none}body.hosting .main-content{display:flex;justify-content:center}.hosting-list{width:50%;padding:20px;box-sizing:border-box;text-align:left}.hosting-list li{list-style-type:none;margin:10px 0;padding:30px 0;box-sizing:border-box;border-bottom:1px solid #e0e0e0}.hosting-list li img{max-width:100%;height:auto}.hosting-list li:last-child{border-bottom:none}.hosting-list li a.image-link{width:150px;display:inline-block;padding:5px 10px;vertical-align:top}.hosting-list li h2{margin-bottom:0;font-weight:lighter}.hosting-list li h2>a{padding:5px 10px;display:inline-block;vertical-align:top;color:#222222;transition:color 0.2s}.hosting-list li h2>a:hover{color:#3bdf85}.hosting-list li p{width:calc(100% - 160px);display:inline-block;padding:5px 10px;vertical-align:top;margin:0}.hosting-list .browse-btn{font-size:15px;padding:8px 25px;background:#3bdf85;border-radius:3px;display:inline-block;cursor:pointer;margin-left:160px;margin-top:10px;transition:background-color 0.2s}.hosting-list .browse-btn a{color:#fff}.hosting-list .browse-btn:hover{background-color:#20c76b}.cooperate-list{width:50%;padding:20px;box-sizing:border-box;text-align:left}.cooperate-list li{list-style-type:none;margin:15px 0;padding:30px 0;box-sizing:border-box;text-align:center;border-radius:8px;background-color:#f5f5f5}.cooperate-list li strong{color:#3bdf85}.cooperate-list li img{max-width:100%;height:auto}.cooperate-list li:last-child{border-bottom:none}.cooperate-list li a.image-link{width:150px;display:inline-block;padding:5px 10px;vertical-align:top}.cooperate-list li h2{margin-bottom:0;font-weight:lighter}.cooperate-list li h2>a{padding:5px 10px;display:inline-block;vertical-align:top;color:#222222;transition:color 0.2s}.cooperate-list li h2>a:hover{color:#3bdf85}.cooperate-list li p{width:calc(100% - 160px);display:inline-block;padding:5px 10px;vertical-align:top;margin:0}.cooperate-list .browse-btn{font-size:15px;padding:8px 25px;background:#3bdf85;border-radius:3px;display:inline-block;cursor:pointer;margin-left:160px;margin-top:10px;transition:background-color 0.2s}.cooperate-list .browse-btn a{color:#fff}.cooperate-list .browse-btn:hover{background-color:#20c76b}.main-content{padding:100px 0}body.hosting .main-content,body.manuals .main-content{padding:50px 0}@media screen and (max-width: 1920px){.main-content{padding:80px 0}body.hosting .main-content{padding:20px 0}body.manuals .main-content{padding:20px 0}header a.btn{line-height:60px;padding:0 60px}}@media screen and (max-width: 1680px){.hosting-list{width:60%}}@media screen and (max-width: 1440px){.hosting-list{width:70%}}@media screen and (max-width: 1024px){.hosting-list{width:80%}.header-nav{display:none}header .des{font-size:20px}.side-menu-btn{display:block}.box{padding:50px 40px}header .header-bg>.bg-target{background-attachment:scroll;background-attachment:initial}a.logo{width:50px;height:50px;margin:18px}.manuals-list>li{margin:50px 30px;position:relative;list-style-type:none}}@media screen and (max-width: 720px){header .des{font-size:18px}.side-menu-btn{margin:5px}.box{padding:50px 20px}a.logo{width:40px;height:40px;margin:15px}body.manuals header .intro-des,body.hosting header .intro-des{font-size:18px;padding:20px}.hosting-list{width:100%}.hosting-list li{display:flex;flex-wrap:wrap;justify-content:center}.hosting-list li p{display:block;width:100%;text-align:center}.hosting-list li h2{text-align:center}.hosting-list li a{width:150px}.hosting-list .browse-btn{margin-left:10px}.hosting-list a.image-link{display:flex !important;width:100% !important}.hosting-list a.image-link{justify-content:center}.manuals-list>li{margin:50px 20px;position:relative;list-style-type:none}.manuals-list>li .item-name:before{width:0}.cooperate-list{width:100%}.cooperate-list li{display:flex;flex-wrap:wrap;justify-content:center}.cooperate-list li p{display:block;width:100%;text-align:center}.cooperate-list li h2{text-align:center}.cooperate-list li a{width:150px}.cooperate-list .browse-btn{margin-left:10px}.cooperate-list a.image-link{display:flex !important;width:100% !important}.cooperate-list a.image-link{justify-content:center}}.sash{position:absolute;top:0;z-index:999999;width:50px;pointer-events:none;transition:all 0.2s}.box .item-img:hover .sash{opacity:0}.view-projects.btn{border-radius:10px 0;text-decoration:none;text-decoration:initial}