:root{--mainfont:'Roboto',sans-serif;--subfont:'Roboto Slab',serif;--maincolor:#2c3e50;--subcolor:#16a085;--tasks-color:#f39c12;--time-traker-color:#27ae60;--visual-tickets-color:#2980b9;--icons-color:#44b39d}
body{overflow-x:hidden}
body.overf{overflow:hidden!important}
a:hover{text-decoration:none}
button:focus{outline:0}
section{overflow:hidden}
.home{width:100vw;height:100vh;background-image:-webkit-gradient(linear,left top,left bottom,from(rgba(0,0,0,.7)),to(rgba(0,0,0,.8))),url(../images/header/01.jpg);background-image:linear-gradient(to bottom,rgba(0,0,0,.7),rgba(0,0,0,.8)),url(../images/header/01.jpg);background-size:cover;overflow:hidden;position:relative}
@media (max-width:767px){
.home{min-height:100vh}
}
.home header{position:fixed;top:0;left:0;width:100%;height:60px;z-index:9}
.home header .container{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;height:60px}
.home header ul{display:-webkit-box;display:-ms-flexbox;display:flex;margin:0;-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transition:-webkit-transform .5s;transition:-webkit-transform .5s;transition:transform .5s;transition:transform .5s,-webkit-transform .5s}
@media (max-width:767px){
.home header ul{-webkit-transform:rotateX(45deg) rotateY(90deg);transform:rotateX(45deg) rotateY(90deg);position:fixed;top:0;left:0;width:100vw;height:100vh;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background:rgba(255,255,255,.7)}
.home header ul.active{-webkit-transform:rotateX(0) rotateY(0);transform:rotateX(0) rotateY(0)}
}
.home header .brand{font-size:20px;font-family:var(--mainfont);color:#fff;cursor:pointer}
.home header .brand span{font-weight:900;color:#16a085;font-size:25px}
.home header .brand span.rotate-f{position:relative;-webkit-transform:rotate(180deg);transform:rotate(180deg);display:inline-block;margin-right:4px;margin-left:-1px}
.home header ul li a{display:block;padding:5px 14px;color:#8e8e8e;font-family:var(--mainfont);-webkit-transition:all .3s;transition:all .3s;font-size:17px;position:relative}
.home header ul li a.active{color:#fff}
.home header ul li a.active .main-effect{height:100%}
.home header ul li a .main-effect{background-color:rgba(22,160,133,.7)}
.home header ul li a:hover .main-effect{height:100%}
.home header ul li a:hover{color:#fff}
@media (max-width:767px){
.home header ul li{-webkit-transition-property:opacity,-webkit-transform;transition-property:opacity,-webkit-transform;transition-property:opacity,transform;transition-property:opacity,transform,-webkit-transform;-webkit-transition-duration:.5s,.8s;transition-duration:.5s,.8s;-webkit-transition-delay:.4s,.4s;transition-delay:.4s,.4s;-webkit-transform:translateX(150px);transform:translateX(150px);opacity:0}
.home header ul li.active{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}
.home header ul li a{display:inline-block;font-size:25px;margin-bottom:10px}
}
.home header.active{background-color:var(--maincolor)}
.home header.active ul li a{color:#a2a2a2}
.home header.active ul li a .main-effect{background-color:rgba(22,160,133,.6)}
.home header.active ul li a.active,.home header.active ul li a:hover{color:#fff}
.home header.active .brand{color:#fff}
.home header button.toggler{float:left;padding:5px;border-radius:3px;position:relative;border:1px solid #8e8e8e;background:0 0;cursor:pointer;overflow:hidden;-webkit-transition:all .5s;transition:all .5s}
.home header button.toggler:hover{border:1px solid var(--subcolor)}
.home header button.toggler.click:hover{border-color:transparent}
.home header button.toggler.click{border-color:transparent}
.home header button.toggler span{display:block;width:30px;height:3px;background:#8e8e8e;-webkit-transition:all .5s;transition:all .5s}
.home header button.toggler:hover span{background:var(--subcolor)}
.home header button.toggler span:not(:last-of-type){margin-bottom:5px}
.home header button.toggler.click span{background:var(--subcolor)}
.home header button.toggler.click span:nth-child(1){-webkit-transform:rotate(45deg) translate(5px,6px);transform:rotate(45deg) translate(5px,6px)}
.home header button.toggler.click span:nth-child(2){-webkit-transform:translateX(60px);transform:translateX(60px);opacity:0}
.home header button.toggler.click span:nth-child(3){-webkit-transform:rotate(-45deg) translate(6px,-6px);transform:rotate(-45deg) translate(6px,-6px)}
@media (max-width:767px){
.home header.active button.toggler{border-color:#fff}
.home header.active button.toggler span{background:#a2a2a2}
.home header.active button.toggler.click{border-color:transparent}
.home header.active button.toggler.click span{background:var(--subcolor)}
}
.home .home-content{z-index:3;position:relative;width:100%;height:100%}
.home .home-content .content .title{color:#8e8e8e;font-family:var(--mainfont)}
.home .home-content .content .title h1{line-height:1.4em;font-weight:bolder;margin:0}
.home .home-content .content .title .colla{margin-right:5px;padding:0 5px;font-weight:700;color:#fff;font-size:28px;display:inline-block;-webkit-transform:rotate(8deg) translate(-10px,-10px);transform:rotate(8deg) translate(-10px,-10px);position:relative}
.home .home-content .content .title .colla .main-effect{height:100%}
.home .home-content .content .desc p{margin:15px 0;color:#737373;letter-spacing:1px;font-family:var(--subfont);font-size:15px;line-height:1.7}
.home .home-content .content .buttons{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin-top:30px;-webkit-transform-style:preserve-3d;transform-style:preserve-3d;-webkit-transform:perspective(600px);transform:perspective(600px)}
.home .home-content .content .buttons .btn{font-family:var(--subfont);text-transform:capitalize;position:relative;padding:5px 15px;-webkit-transition:all .5s;transition:all .5s;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;margin-right:10px;margin-bottom:10px;width:174px;height:45px;font-size:15px;color:#fff;-webkit-transform-style:preserve-3d;transform-style:preserve-3d;-webkit-transform:perspective(600px);transform:perspective(600px);text-shadow:0 0 10px rgba(0,0,0,.5)}
.home .home-content .content .buttons .btn::after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;-webkit-transform-origin:left;transform-origin:left;z-index:-1;-webkit-transition:all .5s;transition:all .5s}
.home .home-content .content .buttons .btn.get::after{background:var(--maincolor)}
.home .home-content .content .buttons .btn.get:hover::after{-webkit-transform:rotateY(60deg);transform:rotateY(60deg)}
.home .home-content .content .buttons .btn.watch::after{-webkit-transform:rotateY(60deg);transform:rotateY(60deg);background:var(--subcolor)}
.home .home-content .content .buttons .btn.watch:hover::after{-webkit-transform:rotateY(0);transform:rotateY(0)}
.home .home-content .content .buttons .btn.watch i{margin-left:7px;padding:8px;background:var(--subcolor);border-radius:40% 30% 20% 10%/10% 20% 30% 40%}
@media (max-width:767px){
.home .home-content .content .buttons{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}
}
.about{width:100vw;min-height:100vh;overflow:hidden}
.about::after,.about::before{content:"";position:absolute}
.about::after{top:0;right:0;width:120px;height:100px;border-radius:50%;background:var(--subcolor);-webkit-transform:translate(50%);transform:translate(50%)}
.about::before{bottom:0;left:0;width:240px;height:220px;border-radius:50%;background:var(--maincolor);-webkit-transform:translate(-50%);transform:translate(-50%)}
@media (max-width:767px){
.about::before{display:none}
}
.about .ball-effect{position:absolute;bottom:0;right:0;width:320px;height:300px;border-radius:50%;background:#27ae60;-webkit-transform:translate(50%);transform:translate(50%);display:inline-block}
.about .about-content h3{position:relative;line-height:1.4;font-family:var(--mainfont);color:var(--maincolor);margin:0;letter-spacing:1px}
.about .about-content h3 span.cloud{position:relative;width:108px;height:30px;display:inline-block;color:var(--subcolor);text-align:center;-webkit-transition:all .3s;transition:all .3s;padding:0 4px}
.about .about-content h3 span.cloud span{display:block;margin-left:-100%;position:absolute;opacity:0;-webkit-box-shadow:0 60px 25px -20px rgba(0,0,0,.5);box-shadow:0 37px 25px -16px rgba(0,0,0,.5);font-size:0;left:50%;text-transform:uppercase}
.about .about-content h3 span.cloud span:nth-of-type(1){-webkit-animation:textslider 5s infinite linear 0s;animation:textslider 5s infinite linear 0s}
.about .about-content h3 span.cloud span:nth-of-type(2){-webkit-animation:textslider 5s infinite linear 1s;animation:textslider 5s infinite linear 1s}
.about .about-content h3 span.cloud span:nth-of-type(3){-webkit-animation:textslider 5s infinite linear 2s;animation:textslider 5s infinite linear 2s}
.about .about-content h3 span.cloud span:nth-of-type(4){-webkit-animation:textslider 5s infinite linear 3s;animation:textslider 5s infinite linear 3s}
@-webkit-keyframes textslider{
0%{margin-left:-100%;opacity:0;margin-top:0;-webkit-transform:rotate(-25deg);transform:rotate(-25deg)}
3%{opacity:1;-webkit-transform:rotate(0);transform:rotate(0)}
5%{opacity:1;margin-left:0;margin-top:0}
20%{opacity:1;margin-left:0;margin-top:0;-webkit-transform:rotate(0);transform:rotate(0)}
27%{opacity:.5;margin-left:100%;margin-top:50px}
100%{opacity:0;margin-left:-100%;margin-top:0;-webkit-transform:rotate(20deg);transform:rotate(20deg)}
}
@keyframes textslider{
0%{margin-left:-100%;opacity:0;margin-top:0;-webkit-transform:rotate(-25deg);transform:rotate(-25deg) translateX(-50%);font-size:0}
3%{opacity:1;-webkit-transform:rotate(0);transform:rotate(0) translateX(-50%)}
5%{opacity:1;margin-left:0;margin-top:0;font-size:27px}
20%{opacity:1;margin-left:0;margin-top:0;-webkit-transform:rotate(0);transform:rotate(0) translateX(-50%);font-size:27px}
27%{opacity:.5;margin-left:100%;margin-top:50px;font-size:0}
100%{opacity:0;margin-left:-100%;margin-top:0;-webkit-transform:rotate(20deg);transform:rotate(20deg) translateX(-50%);font-size:0}
}
.about .about-img{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;width:100%;height:100%;overflow:hidden}
.about .about-img .port{position:relative}
.about .about-img .port img{width:100%}
.about .about-content p{color:#cacaca;line-height:1.7;font-size:15px;font-family:var(--subfont);letter-spacing:1px;text-align:justify;margin:15px 0}
.about .translatingright{-webkit-transition:all .5s;transition:all .5s;-webkit-transform:translateX(200%);transform:translateX(200%)}
.about .translatingright.active{-webkit-transform:translateX(0);transform:translateX(0)}
.about .translatingtop{-webkit-transition:all .8s;transition:all .8s;-webkit-transition-delay:.5s;transition-delay:.5s;-webkit-transform:translateY(100%);transform:translateY(100%)}
.about .translatingtop.active{-webkit-transform:translateX(0);transform:translateX(0)}
.apps{min-height:100vh}
.apps .titles .title .app{display:inline-block;padding:2px 15px;color:#fff;-webkit-transform:rotate(8deg) translate(10px,-10px);transform:rotate(8deg) translate(10px,-10px)}
.apps .titles .title .main-effect{height:100%}
.apps .titles{-webkit-transform:translateX(500%);transform:translateX(500%);opacity:0;-webkit-transition:all .5s;transition:all .5s}
.apps .titles.active{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}
.apps .apps-content{width:100%;overflow:hidden;margin-bottom:30px;padding:15px;-webkit-transition:all .5s;transition:all .5s}
.apps .row>div:nth-of-type(even) .apps-content{-webkit-box-shadow:0 0 30px rgba(0,0,0,.3);box-shadow:0 0 30px rgba(0,0,0,.3);border-radius:4% 15% 4% 15%/15% 12% 15% 12%}
.apps .row>div:nth-of-type(odd) .apps-content{border:1px solid #eee;border-radius:15% 4% 15% 4%/12% 15% 12% 15%}
.apps .apps-content .content{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;width:100%;-webkit-transform-style:preserve-3d;transform-style:preserve-3d;-webkit-transform:perspective(600px);transform:perspective(600px)}
.apps .apps-content .icon{width:70px;height:70px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;border:1px solid #eee;border-radius:50%;font-size:28px;margin:60px auto 22px;color:var(--maincolor);-webkit-transition:all .3s;-webkit-transition:all .5s;transition:all .5s}
.apps .row>div:nth-of-type(even) .apps-content .icon{-webkit-box-shadow:0 0 0 7px rgba(22,160,133,.4);box-shadow:0 0 0 7px rgba(22,160,133,.4)}
.apps .row>div:nth-of-type(odd) .apps-content .icon{border-radius:15% 4% 15% 4%/12% 15% 12% 15%}
.apps .apps-content .content .desc{padding:20px 10px}
.apps .apps-content .content .desc h6{color:#5c7084;font-family:var(--mainfont);position:absolute;top:0;right:0;width:40%;padding:10px;background:var(--subcolor);color:#fff;text-align:center;-webkit-transform-origin:right;transform-origin:top right;-webkit-transform:skewX(-20deg);transform:skewX(-20deg);border-top-right-radius:50%}
.apps .apps-content .content .desc h5{margin:0;font-family:var(--mainfont);color:var(--maincolor);text-align:center}
.apps .apps-content .content .desc p{margin:22px auto;padding:0;text-align:center;width:90%}
.apps .apps-content .content .desc a{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:90%;margin:0 auto 15px;color:#2c3e50;border:1px solid var(--maincolor);height:42px;border-top-right-radius:20px;border-bottom-left-radius:20px;font-size:15px;font-family:var(--mainfont);-webkit-transition:all .3s;transition:all .3s}
.apps .apps-content .content .desc a:nth-of-type(2){border:none;border-right:1px solid var(--maincolor);border-left:1px solid var(--maincolor)}
.apps .apps-content .content .desc a:nth-of-type(1):hover{border-top:0;border-bottom:0;background:var(--subcolor);color:#fff;border-color:var(--subcolor)}
.apps .apps-content .content .desc a:nth-of-type(2):hover{background:var(--subcolor);color:#fff;border-color:var(--subcolor)}
.apps .row>div:nth-of-type(even) .apps-content .desc a:nth-of-type(2){border-color:var(--subcolor)}
.apps .row>div:nth-of-type(odd) .apps-content:hover{border-radius:4% 15% 4% 15%/15% 12% 15% 12%}
.apps .row>div:nth-of-type(odd) .apps-content:hover .icon{border-radius:50%;-webkit-box-shadow:0 0 0 7px rgba(22,160,133,.4);box-shadow:0 0 0 7px rgba(22,160,133,.4)}
.apps .row>div:nth-of-type(even) .apps-content:hover{border-radius:15% 4% 15% 4%/12% 15% 12% 15%}
.apps .fifth,.apps .first,.apps .fourth,.apps .second,.apps .six,.apps .third{-webkit-transition:-webkit-transform .5s;transition:-webkit-transform .5s;transition:transform .5s;transition:transform .5s,-webkit-transform .5s}
.apps .first,.apps .second,.apps .third{-webkit-transform:translateY(50%);transform:translateY(50%)}
.apps .first.active,.apps .second.active,.apps .third.active{-webkit-transform:translateY(0);transform:translateY(0)}
.apps .fifth,.apps .fourth,.apps .six{-webkit-transform-origin:right;transform-origin:right;-webkit-transform:rotateY(-90deg);transform:rotateY(-90deg)}
.apps .fifth.active,.apps .fourth.active,.apps .six.active{-webkit-transform:rotateX(0);transform:rotateX(0)}
.team{background:#182029;overflow:hidden;-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate(20deg) rotateY(90deg);transform:rotate(20deg) rotateY(90deg);-webkit-transition:all .5s;transition:all .5s}
.team.active{-webkit-transform:rotate(0) rotateY(0);transform:rotate(0) rotateY(0)}
.team .titles .title>span{-webkit-transform:rotate(8deg) translate(0,-10px);transform:rotate(8deg) translate(0,-10px)}
.team .titles .main-effect{height:100%}
.team .titles .title{color:#fff}
.team .titles{-webkit-transition:all .5s;transition:all .5s;-webkit-transition-delay:.6s;transition-delay:.6s;-webkit-transform:translateX(500%);transform:translateX(500%);opacity:0}
.team .titles.active{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}
.team .team-content{margin-bottom:20px}
.team .img{width:100%;height:auto;overflow:hidden;position:relative;border-radius:5px}
.team .img img{width:100%;-webkit-transition:all .5s;transition:all .5s;-webkit-filter:grayscale(100%);filter:grayscale(100%);border-radius:5px}
.team .desc h5{margin:0 0 3px;color:#ccc;font-family:var(--mainfont)}
.team .desc h6{color:#6b737b;font-family:var(--mainfont)}
.team .desc p{margin:12px 0 0;color:#484e54}
.team .desc a{color:var(--subcolor);width:140px;height:40px;display:block;border:1px solid rgba(22,160,133,.3);display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;font-family:var(--mainfont);font-weight:700;text-transform:capitalize;border-top-right-radius:10px;margin:12px 0;-webkit-transition:all .3s;transition:all .3s}
.team .desc a:hover{color:#fff;background:var(--subcolor)}
.team .team-content:hover .img img{-webkit-filter:grayscale(0);filter:grayscale(0);-webkit-transform:scale(1.2);transform:scale(1.2)}
.prices{min-height:100vh;-webkit-transform:translateY(20%);transform:translateY(20%);-webkit-transform-origin:right;transform-origin:right;-webkit-transition:all .5s;transition:all .5s}
.prices.active{-webkit-transform:translateY(0);transform:translateY(0)}
.prices .titles .main-effect{height:100%}
.prices .collaporation{color:#5d5f61;font-size:23px}
.prices .titles .trees-effect{-webkit-transform:rotate(8deg) translate(-2px,-10px);transform:rotate(8deg) translate(-2px,-10px)}
.prices nav ul{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center}
@media (min-width:767px){
.prices nav ul{border-bottom:1px solid #ccc}
}
@media (max-width:767px){
.prices nav ul{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}
}
.prices nav ul li{margin:10px;position:relative}
.prices nav ul li a{display:-webkit-box;display:-ms-flexbox;display:flex;font-size:17px;font-weight:700;font-family:var(--mainfont);padding:4px 15px;-webkit-transition:all .3s;transition:all .3s;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;position:relative}
.prices nav ul li a span{color:var(--maincolor)}
.prices nav ul li a::after{content:"";position:absolute;bottom:-11px;left:0;width:100%;height:2px;background-color:#000;-webkit-transform-origin:right;transform-origin:right;-webkit-transform:scaleX(0);transform:scaleX(0);-webkit-transition:all .3s;transition:all .3s}
.prices nav ul li a.orange::after{background-color:var(--tasks-color)}
.prices nav ul li a.orange:hover{color:var(--tasks-color)}
.prices nav ul li a.green::after{background-color:var(--time-traker-color)}
.prices nav ul li a.green:hover{color:var(--time-traker-color)}
.prices nav ul li a.sky::after{background-color:var(--visual-tickets-color)}
.prices nav ul li a.sky:hover{color:var(--visual-tickets-color)}
.prices nav ul li a.darkgreen::after{background-color:var(--icons-color)}
.prices nav ul li a.darkgreen:hover{color:var(--icons-color)}
.prices nav ul li a.active::after{-webkit-transform:scaleX(1);transform:scaleX(1)}
.prices nav ul li a:hover::after{-webkit-transform:scaleX(1);transform:scaleX(1)}
.prices nav ul li a i{font-size:25px;margin-right:12px}
.prices .content>div{display:none}
.prices .content>div.active{display:block}
.prices .tasks-content{padding:15px 30px;margin-bottom:20px}
.prices .content .small-teams{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end}
.prices .border-right{border-right:1px solid #eaeaea!important}
.prices .fixed-height{max-height:240px;height:240px;border-bottom:1px solid #eaeaea;padding:15px 0;position:relative}
.prices .content h4{color:var(--maincolor);margin:0;font-family:var(--mainfont);font-weight:bolder}
.prices .content h6{margin:6px 0 12px}
.prices .content .status{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;font-weight:900;font-size:2.5em;font-family:var(--mainfont);letter-spacing:1px}
.prices .content .status span{font-size:.8em}
.prices .content .desc{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;font-size:15px;color:var(--maincolor)}
.prices .content .desc span{color:#b7b7b7;margin-left:5px}
.prices .content p.absolute{position:absolute;bottom:0;left:0;color:#b7b7b7;font-family:var(--subfont);font-size:15px;letter-spacing:1px}
.prices .content .sign{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;margin:20px 0}
.prices .content .btn{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;font-family:var(--mainfont);font-size:15px;font-weight:700;padding:7px 15px;-webkit-transition:all .3s;transition:all .3s;text-transform:capitalize;border-radius:30px}
.prices .content .tasks .btn{border:1px solid rgba(243,156,18,.2)}
.prices .content .tasks .last{background:var(--tasks-color);color:#fff!important}
.prices .content .tasks .btn:hover{background:var(--tasks-color);color:#fff}
.prices .content .tasks .btn.last:hover{background:0 0;color:var(--tasks-color)!important}
.prices .content .time-traker .btn{border:1px solid rgba(39,174,96,.2);color:var(--time-traker-color)}
.prices .content .time-traker .last{background:var(--time-traker-color);color:#fff!important}
.prices .content .time-traker .btn:hover{background:var(--time-traker-color);color:#fff}
.prices .content .time-traker .btn.last:hover{background:0 0;color:var(--time-traker-color)!important}
.prices .content .visual-tickets .btn{border:1px solid rgba(41,128,185,.2);color:var(--visual-tickets-color)}
.prices .content .visual-tickets .last{background:var(--visual-tickets-color);color:#fff!important}
.prices .content .visual-tickets .btn:hover{background:var(--visual-tickets-color);color:#fff}
.prices .content .visual-tickets .btn.last:hover{background:0 0;color:var(--visual-tickets-color)!important}
.prices .content .icons .btn{border:1px solid rgba(68,179,157,.2);color:var(--icons-color)}
.prices .content .icons .last{background:var(--icons-color);color:#fff!important}
.prices .content .icons .btn:hover{background:var(--icons-color);color:#fff}
.prices .content .icons .btn.last:hover{background:0 0;color:var(--icons-color)!important}
.prices .content .what .p-title{color:var(--maincolor);font-size:17px;margin:30px 0}
.prices .content .gets{padding:10px;border-radius:10px;margin-bottom:30px;border:1px solid #f3f3f3;-webkit-transform:translateY(100%);transform:translateY(100%);-webkit-transition:all .5s;transition:all .5s}
.prices .content .gets.active{-webkit-transform:translateY(0);transform:translateY(0)}
.prices .content .gets .icon i{font-size:25px;width:60px;height:60px;line-height:60px;text-align:center;border-radius:50%;margin-bottom:15px}
.prices .content .tasks .gets .icon i{border:1px solid rgba(243,156,18,.2);color:var(--tasks-color)}
.prices .content .time-traker .gets .icon i{border:1px solid rgba(39,174,96,.2);color:var(--time-traker-color)}
.prices .content .visual-tickets .gets .icon i{border:1px solid rgba(41,128,185,.2);color:var(--visual-tickets-color)}
.prices .content .icons .gets .icon i{border:1px solid rgba(68,179,157,.2);color:var(--icons-color)}
.prices .content .gets .head h5{font-family:var(--mainfont);color:var(--maincolor);margin:0}
.prices .content .gets:hover .icon i{-webkit-animation:scales .7s 1 linear;animation:scales .7s 1 linear}
@-webkit-keyframes scales{
0%{-webkit-transform:scale(0);transform:scale(0)}
20%{-webkit-transform:scale(1.2);transform:scale(1.2)}
40%{-webkit-transform:scale(.8);transform:scale(.8)}
60%{-webkit-transform:scale(1.2);transform:scale(1.2)}
80%{-webkit-transform:scale(-1.2);transform:scale(-1.2)}
100%{-webkit-transform:scale(0);transform:scale(0)}
}
@keyframes scales{
0%{-webkit-transform:scale(0);transform:scale(0)}
20%{-webkit-transform:scale(1.2);transform:scale(1.2)}
40%{-webkit-transform:scale(.8);transform:scale(.8)}
60%{-webkit-transform:scale(1.2);transform:scale(1.2)}
80%{-webkit-transform:scale(.8);transform:scale(.8)}
100%{-webkit-transform:scale(1);transform:scale(1)}
}
.blog .titles{-webkit-transition:all .5s;transition:all .5s;-webkit-transform:rotate(20deg);transform:rotate(20deg);opacity:0}
.blog .titles.active{-webkit-transform:rotate(0);transform:rotate(0);opacity:1}
.blog .main-effect{height:100%}
.blog .blog-content{position:relative;background-color:var(--maincolor);border-radius:10px;margin-bottom:100px;padding:10px;-webkit-transition:all .5s;transition:all .5s}
@media (max-width:767px){
.blog .blog-content-one .blog-content{background-image:url(../images/blog/01.jpeg);background-size:cover}
.blog .blog-content-two .blog-content{background-image:url(../images/blog/02.jpeg);background-size:cover}
.blog .blog-content-three .blog-content{background-image:url(../images/blog/03.jpeg);background-size:cover}
.blog .blog-content::before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background-color:rgba(44,62,80,.9)}
}
.blog-content-one,.blog-content-three,.blog-content-two{-webkit-transition:all .5s;transition:all .5s;-webkit-transform:translateY(100%);transform:translateY(100%)}
.blog-content-one.active,.blog-content-three.active,.blog-content-two.active{-webkit-transform:translateY(0);transform:translateY(0)}
.blog .blog-content::after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;-webkit-transform:rotate(4deg);transform:rotate(4deg) scaleX(1.01);z-index:-1;border-radius:10px;border:1px solid var(--subcolor)}
.blog .blog-content .img{width:100%;height:100%;overflow:hidden;position:relative}
.blog .blog-content .img img{width:100%;max-width:100%;height:100%;-webkit-transition:all .3s;transition:all .3s}
.blog .blog-content .img::after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.5)}
.blog .blog-content:hover .img img{-webkit-transform:scale(1.1);transform:scale(1.2)}
.blog .blog-content .news{position:relative}
@media (max-width:767px){
.blog .blog-content .news{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center}
}
.blog .blog-content .news .icon{display:-webkit-box;display:-ms-flexbox;display:flex;padding:20px 0}
.blog .blog-content .news .icon i{width:45px;height:45px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;font-size:22px;color:#fff;margin-right:8px;border:1px solid #fff;border-radius:50%;-webkit-transition:all .3s;transition:all .3s;cursor:pointer}
.blog .blog-content .news .icon i:hover{color:var(--subcolor);border-color:var(--subcolor);-webkit-box-shadow:0 0 5px 2px var(--subcolor);box-shadow:0 0 5px 2px var(--subcolor)}
.blog .blog-content .news .news-title h4{color:#16a085;font-family:var(--mainfont);margin:0}
.blog .blog-content .news .news-desc{overflow:hidden;padding:20px 10px 20px 0}
.blog .blog-content .news .news-desc p{margin:10px 0}
@media (max-width:767px){
.blog .blog-content .news .news-desc p{text-align:center}
}
.blog .blog-content .news .news-desc a{color:rgba(22,160,133,.7);font-family:var(--mainfont);border:1px solid rgba(22,160,133,.7);padding:5px 15px;-webkit-transition:all .3s;transition:all .3s;float:right}
.blog .blog-content .news .news-desc a:hover{border-color:var(--subcolor);background:var(--subcolor);color:#fff}
.contact{min-height:100vh;background-image:-webkit-gradient(linear,left top,right top,from(rgba(44,62,80,.9)),to(rgba(44,62,80,.8))),url(../images/contact/bg.jpg);background-image:linear-gradient(to right,rgba(44,62,80,.9),rgba(44,62,80,.8)),url(../images/contact/bg.jpg);background-size:cover;background-position:center;-webkit-transform-style:preserve-3d;transform-style:preserve-3d}
input:focus{outline:0;-webkit-box-shadow:none;box-shadow:none!important}
.contact .main-effect{height:100%}
.contact form{padding:30px;background-color:rgba(255,255,255,1);border-radius:4% 13% 4% 0/29% 29% 10% 0;-webkit-box-shadow:0 0 34px #2c3e50;box-shadow:0 0 34px #2c3e50}
@media (max-width:767px){
.contact form{width:80%}
}
@media (min-width:768px){
.contact form{width:60%}
}
@media (min-width:991px){
.contact form{width:45%}
}
.contact form .head{margin-bottom:50px}
.contact form .head h5{text-align:center;font-family:var(--mainfont);font-weight:700;margin:0;color:var(--maincolor)}
.contact form .form-group{position:relative;margin-bottom:50px}
.contact form .form-group input{border:none;border-bottom:1px solid #e4e4e4;border-radius:0;padding:0;padding-bottom:5px;color:rgba(25,139,121,.6);font-size:15px;font-family:var(--subfont);background:0 0;z-index:2}
.contact form .form-group label{position:absolute;top:-5px;left:0;font-size:16px;color:rgba(44,62,80,.4);z-index:1;-webkit-transition:all .3s;transition:all .3s}
.contact form .form-group label.active{top:-27px;font-size:15px;color:rgba(44,62,80,.7)}
.contact form input[type=submit]{background:var(--subcolor);color:#fff;border:1px solid var(--subcolor);padding:5px 40px;text-transform:uppercase;font-family:var(--mainfont);float:right;cursor:pointer;-webkit-transition:all .3s;transition:all .3s}
.contact form input[type=submit]:hover{background:var(--maincolor);border-color:var(--maincolor)}
.contact form .form-group span{position:absolute;bottom:0;left:0;width:100%;height:2px;background-image:-webkit-gradient(linear,left top,right top,from(rgba(44,62,80,1)),color-stop(rgba(44,62,80,.5)),to(rgba(44,62,80,.2)));background-image:linear-gradient(to right,rgba(44,62,80,1),rgba(44,62,80,.5),rgba(44,62,80,.2));-webkit-transform:scaleX(0);transform:scaleX(0);-webkit-transition:all .3s;transition:all .3s}
.contact form .form-group span.left{-webkit-transform-origin:left;transform-origin:left}
.contact form .form-group input:focus~span{-webkit-transform:scaleX(1);transform:scaleX(1)}
.contact form .icon{position:absolute;top:0;right:0;width:50px;height:50px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-ms-flex-line-pack:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;border-radius:50%;background:var(--subcolor);color:#fff;font-size:20px;-webkit-box-shadow:0 0 0 7px #4c5d6b;box-shadow:0 0 0 7px #4c5d6b;cursor:pointer;-webkit-transition:all .3s;transition:all .3s}
.contact form .icon:hover{background:var(--maincolor)}
.contact form .icon.active{-webkit-transform:rotate(360deg);transform:rotate(360deg)}
.contact form.sign-up .icon{background:var(--maincolor)}
.contact form.sign-up .icon:hover{background:var(--subcolor)}
.contact form.sign-up{display:none}
.contact form.sign-up input[type=submit]{background:var(--maincolor)}
.contact form.sign-up input[type=submit]:hover{background:var(--subcolor)}
@media(max-width:767px){
.contact form .icon{right:50px}
}
.contact .translating{-webkit-transition:-webkit-transform .5s;transition:-webkit-transform .5s;transition:transform .5s;transition:transform .5s,-webkit-transform .5s;-webkit-transform:translateX(200%);transform:translateX(200%)}
.contact .translating.active{-webkit-transform:translateX(0);transform:translateX(0)}
footer{background:var(--maincolor);position:relative;overflow:hidden}
footer .icon i{width:50px;height:50px;text-align:center;line-height:50px;color:#fff;background:rgba(22,160,133,.5);border-radius:50% 40% 30% 20%/20% 30% 40% 50%;margin-right:15px;font-size:20px;position:relative;cursor:pointer;-webkit-transform:translateX(-5000%);transform:translateX(-5000%)}
footer .icon i.active{-webkit-transform:translateX(0);transform:translateX(0)}
footer .icon i:nth-of-type(1){-webkit-transition-property:border-radius,background,-webkit-transform;transition-property:border-radius,background,-webkit-transform;transition-property:border-radius,background,transform;transition-property:border-radius,background,transform,-webkit-transform;-webkit-transition-duration:.3s,.3s,.3s;transition-duration:.3s,.3s,.3s;-webkit-transition-delay:0s,0s,1.5s;transition-delay:0s,0s,1.5s}
footer .icon i:nth-of-type(2){-webkit-transition-property:border-radius,background,-webkit-transform;transition-property:border-radius,background,-webkit-transform;transition-property:border-radius,background,transform;transition-property:border-radius,background,transform,-webkit-transform;-webkit-transition-duration:.3s,.3s,.3s;transition-duration:.3s,.3s,.3s;-webkit-transition-delay:0s,0s,1s;transition-delay:0s,0s,1s}
footer .icon i:nth-of-type(3){-webkit-transition-property:border-radius,background,-webkit-transform;transition-property:border-radius,background,-webkit-transform;transition-property:border-radius,background,transform;transition-property:border-radius,background,transform,-webkit-transform;-webkit-transition-duration:.3s,.3s,.3s;transition-duration:.3s,.3s,.3s;-webkit-transition-delay:0s,0s,.5s;transition-delay:0s,0s,.5s}
footer .icon i:nth-of-type(4){-webkit-transition-property:border-radius,background,-webkit-transform;transition-property:border-radius,background,-webkit-transform;transition-property:border-radius,background,transform;transition-property:border-radius,background,transform,-webkit-transform;-webkit-transition-duration:.3s,.3s,.3s;transition-duration:.3s,.3s,.3s;-webkit-transition-delay:0s,0s,0s;transition-delay:0s,0s,0s}
footer .icon i:hover{background:rgba(22,160,133,1);border-radius:50%}
.arrow{position:fixed;bottom:30px;right:30px;width:45px;height:45px;line-height:45px;text-align:center;border-radius:10% 20% 30% 40%/40% 30% 20% 40%;background:var(--maincolor);color:#fff;cursor:pointer;display:none;-webkit-transform:rotate(-5deg);transform:rotate(-7deg);-webkit-transition:all .3s;transition:all .3s}
.arrow.active{display:block}
.arrow:hover{background:var(--subcolor);-webkit-transform:rotate(0);transform:rotate(0)}
.arrow::after{content:"";position:absolute;bottom:0;right:0;-webkit-box-shadow:0 0 0 -10px rgba(0,0,0,.5);box-shadow:0 6px 30px 8px rgba(0,0,0,.5);-webkit-transition:all .3s;transition:all .3s}
.arrow:hover::after{-webkit-box-shadow:none;box-shadow:none}
.preloader{position:fixed;top:0;left:0;width:100vw;height:100vh;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-transform-style:preserve-3d;transform-style:preserve-3d;-webkit-transform:perspective(600px);transform:perspective(600px);background:#000;z-index:99}
.preloader .container{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center}
.dash{margin:0 15px;width:35px;height:15px;border-radius:8px;background:var(--subcolor);-webkit-box-shadow:0 0 50px 2px var(--subcolor);box-shadow:0 0 50px 2px var(--subcolor)}
.uno{margin-right:-18px;-webkit-transform-origin:center left;transform-origin:center left;-webkit-animation:spin 3s linear infinite;animation:spin 3s linear infinite}
.dos{-webkit-transform-origin:center right;transform-origin:center right;-webkit-animation:spin2 3s linear infinite;animation:spin2 3s linear infinite;-webkit-animation-delay:.2s;animation-delay:.2s}
.tres{-webkit-transform-origin:center right;transform-origin:center right;-webkit-animation:spin3 3s linear infinite;animation:spin3 3s linear infinite;-webkit-animation-delay:.3s;animation-delay:.3s}
.cuatro{-webkit-transform-origin:center right;transform-origin:center right;-webkit-animation:spin4 3s linear infinite;animation:spin4 3s linear infinite;-webkit-animation-delay:.4s;animation-delay:.4s}
@-webkit-keyframes spin{
0%{-webkit-transform:rotate(0);transform:rotate(0)}
25%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}
30%{-webkit-transform:rotate(370deg);transform:rotate(370deg)}
35%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}
100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}
}
@keyframes spin{
0%{-webkit-transform:rotate(0);transform:rotate(0)}
25%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}
30%{-webkit-transform:rotate(370deg);transform:rotate(370deg)}
35%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}
100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}
}
@-webkit-keyframes spin2{
0%{-webkit-transform:rotate(0);transform:rotate(0)}
20%{-webkit-transform:rotate(0);transform:rotate(0)}
30%{-webkit-transform:rotate(-180deg);transform:rotate(-180deg)}
35%{-webkit-transform:rotate(-190deg);transform:rotate(-190deg)}
40%{-webkit-transform:rotate(-180deg);transform:rotate(-180deg)}
78%{-webkit-transform:rotate(-180deg);transform:rotate(-180deg)}
95%{-webkit-transform:rotate(-360deg);transform:rotate(-360deg)}
98%{-webkit-transform:rotate(-370deg);transform:rotate(-370deg)}
100%{-webkit-transform:rotate(-360deg);transform:rotate(-360deg)}
}
@keyframes spin2{
0%{-webkit-transform:rotate(0);transform:rotate(0)}
20%{-webkit-transform:rotate(0);transform:rotate(0)}
30%{-webkit-transform:rotate(-180deg);transform:rotate(-180deg)}
35%{-webkit-transform:rotate(-190deg);transform:rotate(-190deg)}
40%{-webkit-transform:rotate(-180deg);transform:rotate(-180deg)}
78%{-webkit-transform:rotate(-180deg);transform:rotate(-180deg)}
95%{-webkit-transform:rotate(-360deg);transform:rotate(-360deg)}
98%{-webkit-transform:rotate(-370deg);transform:rotate(-370deg)}
100%{-webkit-transform:rotate(-360deg);transform:rotate(-360deg)}
}
@-webkit-keyframes spin3{
0%{-webkit-transform:rotate(0);transform:rotate(0)}
27%{-webkit-transform:rotate(0);transform:rotate(0)}
40%{-webkit-transform:rotate(180deg);transform:rotate(180deg)}
45%{-webkit-transform:rotate(190deg);transform:rotate(190deg)}
50%{-webkit-transform:rotate(180deg);transform:rotate(180deg)}
62%{-webkit-transform:rotate(180deg);transform:rotate(180deg)}
75%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}
80%{-webkit-transform:rotate(370deg);transform:rotate(370deg)}
85%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}
100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}
}
@keyframes spin3{
0%{-webkit-transform:rotate(0);transform:rotate(0)}
27%{-webkit-transform:rotate(0);transform:rotate(0)}
40%{-webkit-transform:rotate(180deg);transform:rotate(180deg)}
45%{-webkit-transform:rotate(190deg);transform:rotate(190deg)}
50%{-webkit-transform:rotate(180deg);transform:rotate(180deg)}
62%{-webkit-transform:rotate(180deg);transform:rotate(180deg)}
75%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}
80%{-webkit-transform:rotate(370deg);transform:rotate(370deg)}
85%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}
100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}
}
@-webkit-keyframes spin4{
0%{-webkit-transform:rotate(0);transform:rotate(0)}
38%{-webkit-transform:rotate(0);transform:rotate(0)}
60%{-webkit-transform:rotate(-360deg);transform:rotate(-360deg)}
65%{-webkit-transform:rotate(-370deg);transform:rotate(-370deg)}
75%{-webkit-transform:rotate(-360deg);transform:rotate(-360deg)}
100%{-webkit-transform:rotate(-360deg);transform:rotate(-360deg)}
}
@keyframes spin4{
0%{-webkit-transform:rotate(0);transform:rotate(0)}
38%{-webkit-transform:rotate(0);transform:rotate(0)}
60%{-webkit-transform:rotate(-360deg);transform:rotate(-360deg)}
65%{-webkit-transform:rotate(-370deg);transform:rotate(-370deg)}
75%{-webkit-transform:rotate(-360deg);transform:rotate(-360deg)}
100%{-webkit-transform:rotate(-360deg);transform:rotate(-360deg)}
}
.titles{position:relative;margin:0 0 60px}
.titles .title{font-family:var(--mainfont);padding-left:5px;border-left:2px solid var(--subcolor);margin:0}
.titles .p-title{padding-left:5px}
.p-title{font-family:var(--subfont);font-weight:100;line-height:1.7;text-transform:lowercase;font-size:15px;color:#b7b7b7;margin:20px 0 0}
.main-effect{position:absolute;bottom:0;width:25%;height:0;background-color:rgba(22,160,133,.8);left:calc(25% * var(--n));-webkit-transition:all .3s;z-index:-1;transition:all .3s;border-radius:50% 50% 0 0/20% 20%}
.main-effect:nth-of-type(1){--n:0}
.main-effect:nth-of-type(2){--n:1;-webkit-transition-delay:.12s;transition-delay:.12s}
.main-effect:nth-of-type(3){--n:2;-webkit-transition-delay:.2s;transition-delay:.2s}
.main-effect:nth-of-type(4){--n:3;-webkit-transition-delay:.28s;transition-delay:.28s}
.trees-effect{display:inline-block;padding:2px 15px;color:#fff;-webkit-transform:rotate(8deg) translate(10px,-10px);transform:rotate(8deg) translate(10px,-10px)}
.trees-effect::after{content:"";position:absolute;top:0;left:0;width:50%;height:100%;-webkit-box-shadow:0 6px 13px rgba(0,0,0,.8);box-shadow:0 6px 13px rgba(0,0,0,.8)}
.orange{color:#f39c12}
.green{color:#27ae60}
.sky{color:#2980b9}
.darkgreen{color:#44b39d}