@charset "utf-8";
body{background:#000;color:#666;font-family:"Open Sans",sans-serif;font:300 16px/1.8 Roboto,sans-serif;letter-spacing:.03em;color:#444}
a{color:#2dc997}
a:hover,a:active,a:focus{color:#2dca98;outline:none;text-decoration:none}
p{padding:0}
.section-py-4{padding-top:4rem;padding-bottom:4rem;margin:0}
.section-py-8{padding-top:8rem;padding-bottom:8rem;margin:0}
.section-py-12{padding-top:12rem;padding-bottom:12rem;margin:0;font-size:24px;font-family:'roboto'}
.section-py-16{padding-top:16rem;padding-bottom:16rem;margin:0;font-size:28px;font-family:'roboto'}
.section-py-24{padding-top:24rem;padding-bottom:24rem;margin:0}
h1,h2,h3,h4,h5,h6{font-family:"Roboto",sans-serif;font-weight:400;margin:0 0 20px;padding:0;text-transform:uppercase;letter-spacing:.1em;line-height:1.7;font-weight:800}
#preloader{position:fixed;left:0;top:0;z-index:999;width:100%;height:100%;overflow:visible;background:#fff url(../img/preloader.svg) no-repeat center center}
.back-to-top{position:fixed;display:none;background:rgba(0,0,0,0.2);color:#fff;padding:6px 12px 9px;font-size:16px;border-radius:2px;right:15px;bottom:15px;transition:background .5s}
.no-text-trans { text-transform:none !important; font-weight:normal; letter-spacing: .02em;}

@media (max-width: 768px) {
.back-to-top{bottom:15px}
}
.back-to-top:focus{background:rgba(0,0,0,0.2);color:#fff;outline:none}
.back-to-top:hover{background:#2dc997;color:#fff}
#header{padding:30px 0;height:92px;position:fixed;left:0;top:0;right:0;transition:all .5s;z-index:997;background:url(../img/home-bg-3.jpg) top center;background-size:cover}
#header #logo{float:left; font-size:20px; font-weight:400;}
#header #logo h1{font-size:24px;margin:0;padding:0;line-height:1;font-family:"Roboto",sans-serif;font-weight:400;text-transform:uppercase;}
#header #logo h1 a,#header #logo h1 a:hover{color:#7a7a7a}
#header #logo img{padding:0;margin:0}
@media (max-width: 768px) {
#header #logo h1{font-size:26px}
#header #logo img{max-height:40px}
}
#main{margin-top:96px}
#header.header-fixed{background: #000;opacity:.9;filter:alpha(opacity=90);padding:20px 0;height:72px;transition:all .5s}
#hero-img{width:100%;height:100vh;background:/*linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)),*/url(../img/home-bg-3.jpg) top center;background-size:cover;position:relative}
@media (min-width: 1024px) {
#hero-img{background-attachment:fixed}
}
#hero-img:before{content:"";/*background:rgba(0,0,0,0.6);*/position:absolute;bottom:0;top:0;left:0;right:0}
#hero-img .hero-img-container{position:absolute;bottom:0;top:0;left:0;right:0;display:flex;justify-content:center;align-items:center;flex-direction:column;text-align:center}
#hero-img h1{margin:30px 0 10px;font-size:48px;font-weight:700;line-height:56px;text-transform:uppercase;color:#fff;font-size:60px;font-weight:900;line-height:80px}
@media (max-width: 768px) {
#hero-img h1{font-size:28px;line-height:36px}
}
#hero-img h2{color:#eee;font-size:1.15rem;font-weight:500;letter-spacing:.1em;margin-bottom:4rem}
@media (max-width: 768px) {
#hero-img h2{font-size:18px;line-height:24px;margin-bottom:30px}
}
#hero-img .btn-down{letter-spacing:1px;display:inline-block;padding:6px 2px;border-radius:24px;transition:.5s;/*border:1px solid #f90;*/color:#f90;line-height:48px;widows:32px;height:48px}
#hero-img .btn-down:hover{background-color:rgba(255,153,0,0.2);border:1px solid #f90;color:#fff}
#hero-img .btn-get-started{text-transform:uppercase;font-weight:500;font-size:16px;letter-spacing:1px;display:inline-block;padding:8px 28px;border-radius:50px;transition:.5s;margin:10px;border:2px solid #fff;color:#fff}
#hero-img .btn-get-started:hover{background:#2dc997;border:2px solid #2dc997}
.downArrow{text-align:center;margin:8% 0}
.bounce{-moz-animation:bounce 3s infinite;-webkit-animation:bounce 3s infinite;animation:bounce 3s infinite}
@keyframes bounce {
0%,20%,50%,80%,100%{transform:translateY(0)}
40%{transform:translateY(12px)}
60%{transform:translateY(6px)}
}
.nav-menu,.nav-menu *{margin:0;padding:0;list-style:none}
.nav-menu ul{position:absolute;display:none;top:100%;left:0;z-index:99}
.nav-menu li{position:relative;white-space:nowrap}
.nav-menu > li{float:left}
.nav-menu li:hover > ul,.nav-menu li.sfHover > ul{display:block}
.nav-menu ul ul{top:0;left:100%}
.nav-menu ul li{min-width:180px}
.sf-arrows .sf-with-ul{padding-right:30px}
.sf-arrows .sf-with-ul:after{content:"\f107";position:absolute;right:15px;font-family:FontAwesome;font-style:normal;font-weight:400}
.sf-arrows ul .sf-with-ul:after{content:"\f105"}
#nav-menu-container{float:right;margin:0}
@media (max-width: 768px) {
#nav-menu-container{display:none}
}
.nav-menu a{padding:0 8px 10px;text-decoration:none;display:inline-block;color:#fff;font-family:"Roboto",sans-serif;font-weight:400;text-transform:uppercase;font-size:13px;outline:none}
.nav-menu > li{margin-left:10px}
.nav-menu > li > a:before{content:"";position:absolute;width:100%;height:2px;bottom:0;left:0;background-color:#f90;visibility:hidden;-webkit-transform:scaleX(0);transform:scaleX(0);-webkit-transition:all .3s ease-in-out 0;transition:all .3s ease-in-out 0}
.nav-menu a:hover:before,.nav-menu li:hover > a:before,.nav-menu .menu-active > a:before{visibility:visible;-webkit-transform:scaleX(1);transform:scaleX(1)}
.nav-menu ul{margin:4px 0 0;border:1px solid #e7e7e7}
.nav-menu ul li{background:#fff}
.nav-menu ul li:first-child{border-top:0}
.nav-menu ul li a{padding:10px;color:#333;transition:.3s;display:block;font-size:13px;text-transform:none}
.nav-menu ul li a:hover{background:#2dc997;color:#fff}
.nav-menu ul ul{margin:0}
#mobile-nav-toggle{position:fixed;right:0;top:0;z-index:999;margin:20px 20px 0 0;border:0;background:none;font-size:24px;display:none;transition:all .4s;outline:none;cursor:pointer}
#mobile-nav-toggle i{color:#fff}
@media (max-width: 768px) {
#mobile-nav-toggle{display:inline}
}
#mobile-nav{position:fixed;top:0;padding-top:18px;bottom:0;z-index:998;background:rgba(52,59,64,0.9);left:-260px;width:260px;overflow-y:auto;transition:.4s}
#mobile-nav ul{padding:0;margin:0;list-style:none}
#mobile-nav ul li{position:relative}
#mobile-nav ul li a{color:#fff;font-size:16px;overflow:hidden;padding:10px 22px 10px 15px;position:relative;text-decoration:none;width:100%;display:block;outline:none}
#mobile-nav ul li a:hover{color:#fff}
#mobile-nav ul li li{padding-left:30px}
#mobile-nav ul .menu-has-children i{position:absolute;right:0;z-index:99;padding:15px;cursor:pointer;color:#fff}
#mobile-nav ul .menu-has-children i.fa-chevron-up{color:#2dc997}
#mobile-nav ul .menu-item-active{color:#2dc997}
#mobile-body-overly{width:100%;height:100%;z-index:997;top:0;left:0;position:fixed;background:rgba(52,59,64,0.9);display:none}
body.mobile-nav-active{overflow:hidden}
body.mobile-nav-active #mobile-nav{left:0}
body.mobile-nav-active #mobile-nav-toggle{color:#fff}
.section-header .section-title{font-size:32px;color:#111;text-transform:uppercase;text-align:center;font-weight:700;margin-bottom:5px}
.section-header .section-description{text-align:center;padding-bottom:40px;color:#999}
#ourdata{background:#fff;padding:80px 0;margin-top:96px}
#ourdata .ourdata-container .background{min-height:300px;background:url(../img/about-img.jpg) center top no-repeat;margin-bottom:10px}
#ourdata .ourdata-container .content{background:#fff}
#ourdata .ourdata-container .title{color:#333;font-weight:700;font-size:32px}
#about{background:#fff;padding:80px 0;margin-top:96px}
#about .about-container .background{min-height:300px;background:url(../img/about-img.jpg) center top no-repeat;margin-bottom:10px}
#about .about-container .content{background:#fff}
#about .about-container .title{color:#333;font-weight:700;font-size:32px}
@media (max-width: 768px) {
#about .about-container .title{padding-top:15px}
}
#about .about-container p{line-height:26px}
#about .about-container p:last-child{margin-bottom:0}
#about .about-container .icon-box{background:#fff;background-size:cover;padding:0 0 30px}
#about .about-container .icon-box .icon{float:left;background:#fff;width:64px;height:64px;display:flex;justify-content:center;align-items:center;flex-direction:column;text-align:center;border-radius:50%;border:2px solid #2dc997}
#about .about-container .icon-box .icon i{color:#2dc997;font-size:24px}
#about .about-container .icon-box .title{margin-left:80px;font-weight:500;margin-bottom:5px;font-size:18px;text-transform:uppercase}
#about .about-container .icon-box .title a{color:#111}
#about .about-container .icon-box .description{margin-left:80px;line-height:24px;font-size:14px}
#services{background:#fff;background-size:cover;padding:80px 0 60px}
#services .box{padding:50px 2px 20px;margin-bottom:50px;text-align:center;border:1px solid #e6e6e6;height:200px;position:relative;background:#fafafa}
#services .icon{position:absolute;top:-36px;left:calc(50% - 36px);transition:.2s;border-radius:50%;border:6px solid #fff;display:flex;justify-content:center;align-items:center;flex-direction:column;text-align:center;width:72px;height:72px;background:#b9b9b9}
#services .icon a{display:inline-block}
#services .icon i{color:#fff;font-size:24px}
#services .title{font-weight:700;font-size:18px;margin-bottom:15px;text-transform:uppercase}
#services .title a{color:#111}
#services .description{font-size:14px;line-height:24px}
#call-to-action{background:linear-gradient(rgba(0,0,0,0.6),rgba(0,0,0,0.6)),url(../img/call-to-action-bg.jpg) fixed center center;background-size:cover;padding:80px 0}
#call-to-action .cta-title{color:#fff;font-size:28px;font-weight:700}
#call-to-action .cta-text{color:#fff}
@media (min-width: 769px) {
#call-to-action .cta-btn-container{display:flex;align-items:center;justify-content:flex-end}
}
#call-to-action .cta-btn{font-family:"Roboto",sans-serif;text-transform:uppercase;font-weight:500;font-size:16px;letter-spacing:1px;display:inline-block;padding:8px 30px;border-radius:50px;transition:.5s;margin:10px;border:2px solid #fff;color:#fff}
#call-to-action .cta-btn:hover{background:#2dc997;border:2px solid #2dc997}
#maildata{background:#f7f7f7;padding:80px 0}
#maildata #maildata-wrapper{padding-right:15px}
#maildata #maildata-flters{padding:0;margin:0 0 45px;list-style:none;text-align:center}
#maildata #maildata-flters li{cursor:pointer;margin:0 10px;display:inline-block;padding:10px 22px;font-size:12px;line-height:20px;color:#666;border-radius:4px;text-transform:uppercase;background:#fff;margin-bottom:5px;transition:all .3s ease-in-out}
#maildata #maildata-flters li:hover,#maildata #maildata-flters li.filter-active{background:#2dc997;color:#fff}
#maildata .maildata-item{position:relative;height:200px;overflow:hidden!important;margin-bottom:15px;transition:all 350ms ease;transform:scale(1)}
#maildata .maildata-item a{display:block;margin-right:15px}
#maildata .maildata-item img{position:relative;top:0;transition:all 600ms cubic-bezier(0.645,0.045,0.355,1)}
#maildata .maildata-item .details{height:50px;background:#2dc997;position:absolute;width:100%;height:50px;bottom:-50px;transition:all 300ms cubic-bezier(0.645,0.045,0.355,1)}
#maildata .maildata-item .details h4{font-size:14px;font-weight:700;color:#fff;padding:8px 0 2px 8px;margin:0}
#maildata .maildata-item .details span{display:block;color:#fff;font-size:13px;padding-left:8px}
#maildata .maildata-item:hover .details{bottom:0}
#maildata .maildata-item:hover img{top:-30px}

#contact{padding:80px 0 40px}
#contact #google-map{height:300px;margin-bottom:20px}
#contact .info{color:#333}
#contact .info i{font-size:24px;color:#f90;float:left}
#contact .info p{padding:0 0 10px 50px;margin-bottom:20px;line-height:22px;font-size:14px}
#contact .info .email p{padding-top:5px}
#contact .social-links{padding-bottom:20px}
#contact .social-links a{font-size:18px;display:inline-block;background:#333;color:#fff;line-height:1;padding:8px 0;border-radius:50%;text-align:center;width:36px;height:36px;transition:.3s}
#contact .social-links a:hover{background:#2dc997;color:#fff}
#contact .form #sendmessage{color:#2dc997;border:1px solid #2dc997;display:none;text-align:center;padding:15px;font-weight:600;margin-bottom:15px}
#contact .form #errormessage{color:red;display:none;border:1px solid red;text-align:center;padding:15px;font-weight:600;margin-bottom:15px}
#contact .form #sendmessage.show,#contact .form #errormessage.show,#contact .form .show{display:block}
#contact .form .validation{color:red;display:none;margin:0 0 20px;font-weight:400;font-size:13px}
#contact .form input,#contact .form textarea{border-radius:0;box-shadow:none;font-size:14px}
#contact .form button[type="submit"]{background:#2dc997;border:0;padding:10px 24px;color:#fff;transition:.4s}
#contact .form button[type="submit"]:hover{background:#51d8ad}
#footer{background:#343b40;background:url(../img/blackwhite.jpg) top center;background-size:cover;padding:30px 0;color:#fff;font-size:14px}
#footer .copyright{text-align:center}
#footer .credits{padding-top:10px;text-align:center;font-size:13px;color:#ccc}
#usecases{padding:60px 0 40px;position:relative}
#usecases::before{content:'';position:absolute;left:0;right:0;top:0;bottom:0;background:rgba(255,255,255,0.92);z-index:9}
#usecases .container{position:relative;z-index:10}
#usecases .usecases-col{background:#fff;border-radius:0 0 4px 4px;box-shadow:0 2px 12px rgba(0,0,0,0.08);margin-bottom:30px}
#usecases .usecases-col .img{position:relative;text-align:center}
#usecases .usecases-col .img img{border-radius:4px 4px 0 0}
#usecases .usecases-col .icon{width:64px;height:64px;padding-top:8px;text-align:center;position:absolute;background-color:#18d26e;border-radius:50%;text-align:center;border:4px solid #fff;left:calc(50% - 32px);bottom:-30px;transition:.3s}
#usecases .usecases-col i{font-size:36px;line-height:1;color:#fff;transition:.3s}
#usecases .usecases-col:hover .icon{background-color:#fff}
#usecases .usecases-col:hover i{color:#18d26e}
#usecases .usecases-col h2{color:#000;text-align:center;font-weight:700;font-size:20px;padding:0;margin:40px 0 12px}
#usecases .usecases-col h2 a{color:#000}
#usecases .usecases-col h2 a:hover{color:#18d26e}
#usecases .usecases-col p{color:#333;margin-top:30px;margin-bottom:0;padding:0 20px 20px}
@media (max-width: 768px) {
#usecases .usecases-col .img{background:#000;border-radius:4px 4px 0 0}
#usecases .usecases-col .img img{border-radius:0}
}
@media (min-width: 769px) {
#usecases .usecases-col p{color:#333;margin-top:30px;margin-bottom:0;padding:0 20px 20px;min-height:108px}
}