/*RESET CSS*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
caption {margin: 0; padding: 0; border: 0; outline: 0; vertical-align: baseline; font-size: 100%;}
ol, ul {list-style: none;}
article,aside,figcaption,figure,footer,header,hgroup,nav,section,time{display: block;}
/********************/

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

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

@font-face {
	font-family: 'GothamPro';
	src: url("fonts/GothamPro-Black.eot?#iefix") format("embedded-opentype"), url("fonts/GothamPro-Black.woff") format("woff"), url("fonts/GothamPro-Black.ttf") format("truetype"), url("fonts/GothamPro-Black.svg#GothamPro-Black") format("svg");
	font-weight: 800;
	font-style: normal;
}

body{font-size: 13px; color: #1c252a; font-family: 'GothamPro';}

*{-moz-box-sizing: border-box; -webkit-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box;}

img{max-width: 100%; height: auto;}

.pull-left{float: left;}
.pull-right{float: right;}
.clearfix:before, .clearfix:after {content: " ";display: table;}
.clearfix:after {clear: both;}
.text-center{text-align: center;}

.container{width: 100%; max-width: 920px; padding-left: 20px; padding-right: 20px; margin: 0 auto;}

.row{margin-left: -20px; margin-right: -20px;}
.row:before, .row:after {content: " ";display: table;}
.row:after {clear: both;}
div[class*="col-"]{padding-left: 20px; padding-right: 20px;float: left;}

.col-4{width: 25%;}

.btn{font-size: 13px; padding: 10px 30px; color: #fff; text-align: center; text-decoration: none; display: inline-block; border-radius: 4px; min-width: 180px; font-weight: 500;
	-webkit-transition: all .3s ease-in-out;
	-moz-transition: all .3s ease-in-out;
	-o-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out;
}
.btn-lg{font-weight: 500;padding: 18px 30px 18px;min-width: 230px;}
.btn-success{border-color: #21d353;color: #fff;background-color: #21d353;box-shadow: 0 10px 20px 0 rgba(33, 211, 83, 0.33);}
.btn-success:hover{background-color: #1fc64e;color: #fff;border-color: #1fc64e;}
.btn-warning{border-color: #ffa510;color: #fff;background-color: #ffa510;box-shadow: 0 10px 20px 0 rgba(230, 187, 25, 0.33);}
.btn-warning:hover{background-color: #f09b10;color: #fff;border-color: #f09b10;}
h1{font-size: 38px;font-weight: 800;margin: 0 0 20px;}
h4{font-size: 13px; font-weight: 800; margin-bottom: 10px;}

.title{font-size: 23px; font-weight: bold; text-align: center; margin: 0 0 56px;position: relative; color: #1c252a;}
.title:before{content: '';position: absolute; bottom: -19px; left: 50%; width: 24px; height: 2px; background-color: #21d353; margin-left: -12px;}
.title.white{color: #fff;}
.title.white:before{background-color: #fff;}
.sub-title{ max-width: 490px; margin: -31px auto 29px;}
.sub-title p{margin: 0; color: #959da5; line-height: 1.76;}
.btn-container{padding: 65px 0;}




/*===========================================================================
HEADER
===========================================================================*/
.header{background-color: #fff;}
.logo{max-width: 176px;margin-top: 21px;}
.main-menu li{list-style: none; float: left;margin-left: 25px;}
.main-menu li a{text-decoration: none; color: #1c252a;}
.main-menu > ul > li > a{display: block;height: 70px; line-height: 70px; min-width: 70px; text-align: center; padding: 0 5px;}
.main-menu .sign-in a{background-color: #21d353; color: #fff;}
.main-menu .lang{padding: 29px 33px 26px 19px; position: relative;}
.main-menu .lang > span{display: block;width: 34px;padding-right: 10px;position: relative;z-index: 6; min-width: 0; height: auto; line-height: normal; padding: 0;text-align: left; cursor: pointer;}
.main-menu .lang > span:after{content: '';width: 0;height: 0;border-style: solid;border-width: 4px 4px 0 4px;border-color: #e0e2e5 transparent transparent transparent; position: absolute; top: 50%; right: 0; margin-top: -2px;}
.main-menu .lang ul{display: none;border-radius: 4px; background-color: #ffffff;  box-shadow: 0 20px 40px 0 rgba(0, 0, 0, 0.1); border: solid 1px #e0e2e5; position: absolute; top: 17px; left: 5px; width: 60px; padding-top: 33px; z-index: 5;}
.main-menu .lang ul li{float: none;margin: 0;}
.main-menu .lang ul li a{display: block;padding: 9px 20px 9px 14px; color: #a4aab0;}
.main-menu .lang ul li a:hover{background-color: #21d353; color: #fff;}
.main-menu .lang.hover ul{display: block;}
.main-menu .lang.hover > span:after{border-width: 0 4px 4px 4px;border-color: transparent transparent #1c252a transparent;}
.menu-btn{float: right; width: 30px; height: 25px; cursor: pointer;background: url(../img/menu-btn.svg) no-repeat; margin: 27px 0 0; display: none;}
.menu-btn.active{background: url(../img/close-btn.svg) no-repeat;}

.lang-overlay{position: fixed;top: 0;left: 0; right: 0; bottom: 0;z-index: 2;}
/*===========================================================================
END HEADER
===========================================================================*/

/*===========================================================================
TOP SECTION
===========================================================================*/
.top-section{padding: 55px 0 45px;
	background: rgb(255,255,255);
	background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(245,247,250,1) 100%);
	background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(245,247,250,1) 100%);
	background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(245,247,250,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f5f7fa',GradientType=0 );
}

.top-animation{background-color: #fff; box-shadow: 0 38px 30px 0 rgba(0, 0, 0, 0.08); max-width: 673px; padding: 10px; position: relative; margin: 46px auto 0;}
.top-animation .inner{position: absolute; top: 10px; left: 10px; right: 10px; bottom: 10px;}
.top-animation .inner iframe{position: absolute;top: 0;left: 0;width: 100%; height: 100%;}

.logos{padding: 5px 0;border-bottom: 1px solid #eff1f5; text-align: justify; text-align-last: justify;}
.logos img{display: inline-block; margin: 20px 0 3px; vertical-align: middle;}
.logos .container:after{content:""; display: inline-block; width: 100%; height: 0; overflow: hidden;}
/*===========================================================================
END TOP SECTION
===========================================================================*/

/*===========================================================================
FOOTER
===========================================================================*/
.footer{background-color: #f5f7fa; padding: 77px 0 20px;}
.footer ul li{list-style: none;}
.footer li a{font-size: 13px; line-height: 2.35; text-decoration: none; color: #1c252a;}
.copyright{margin: 59px 0 0; text-align: center;font-size: 11px; line-height: 1.67; color: #949699;}

/*===========================================================================
END FOOTER
===========================================================================*/

/*===========================================================================
FORMATS
===========================================================================*/
.formats-section{padding: 62px 0 74px;background-color: #21d353; color: #fff; text-align: center;}

.formats{display: inline-block;margin-left: -15px;margin-right: -15px;}
.format-box{float: left;background-color: #fff; width: 135px; height: 135px; margin: 0 15px; text-align: center;padding-top: 43px;position: relative;}
.format-box:before{content: '';position: absolute;top: 0;right: 0;width: 0;height: 0;border-style: solid;border-width: 0 43px 43px 0;border-color: transparent #b9ffcc transparent transparent;}
.format-box span.img{height: 35px; margin: 0;}
.format-box span{display: block; font-size: 15px; color: #1c252a; font-weight: bold; margin-top: 11px;}

/*===========================================================================
END FORMATS
===========================================================================*/

/*===========================================================================
TEMPLATES
===========================================================================*/
.templates-section{padding: 51px 0 40px;}

.templates{margin: 0 -15px 36px; display: inline-block;}
.templates img{vertical-align: top; width: 100%; height: auto;}

.left-col{float: left; width: 120px;margin: 0 15px;}
.center-col{float: left; width: 270px; margin: 0 15px;}
.right-col{float: left; width: 270px; margin: 0 15px;}

.tpl-1{float: left; width: 120px;}
.tpl-2{margin-bottom: 30px;}
.tpl-3{margin-bottom: 30px;}
.tpl-4{margin-bottom: 0;}
.tpl-5{margin-bottom: 30px;}
.tpl-6{margin-bottom: 30px;}
.tpl-7{margin-right: 15px;width: 120px; float: left;}
.tpl-8{margin-left: 15px;width: 120px; float: left;}

/*===========================================================================
END TEMPLATES
===========================================================================*/

/*===========================================================================
ANIMATION SLIDER
===========================================================================*/
.responsive-section{padding: 30px 0 22px;}
.animation-slider-container{position: relative;padding-top: 46px;}
.animation-slider-container:before{content: ''; position: absolute; top: 0; left: 0; right: 0; height: 308px; background-color: #f5f7fa; z-index: -1;}

.animation-slider .item{text-align: center;}
.animation-slider .item img{margin: 0 auto;}

.owl-nav .owl-prev, .owl-nav .owl-next{position: absolute; top: 100px; text-indent: -9999999px; width: 20px; height: 13px; cursor: pointer;}

.owl-nav .owl-prev{background: url(../img/arrow-left.svg) no-repeat; left: 0;}
.owl-nav .owl-next{background: url(../img/arrow-right.svg) no-repeat; right: 0;}

.animation-slider-control{text-align: center;margin-bottom: 26px;}
.animation-slider-control .owl-dot{cursor: pointer; display: inline-block; color: #a4aab0; margin: 0 30px;}
.animation-slider-control .owl-dot span{display: block;width: 90px; height: 90px;margin-bottom: 19px; background-color: #fff; border: 1px solid #e1e3e7; position: relative; background-repeat: no-repeat; background-position: center center;}
.animation-slider-control .owl-dot.active{color: #1c252a; }
.animation-slider-control .owl-dot.active span{background-color: #21d353; box-shadow: 0 10px 20px 0 rgba(33, 211, 83, 0.33); border-color: #21d353;}

.animation-slider-control .mobile-dot{background-image: url(../img/mobile_icon.svg);}
.animation-slider-control .active .mobile-dot{background-image: url(../img/mobile_icon_w.svg);}

.animation-slider-control .tablet-dot{background-image: url(../img/tablet_icon.svg);}
.animation-slider-control .active .tablet-dot{background-image: url(../img/tablet_icon_w.svg);}

.animation-slider-control .desktop-dot{background-image: url(../img/macbook_icon.svg);}
.animation-slider-control .active .desktop-dot{background-image: url(../img/macbook_icon_w.svg);}

.phone-box{display: inline-block; position: relative;}
.phone-box .inner{position: absolute;top: 10%;left: 16.5%;right: 15.9%;bottom: 25.2%;}
.phone-box .inner iframe{position: absolute;top: 0;right: 0;left: 0; bottom: 0; width: 100%; height: 100%;}

.tablet-box{display: inline-block; position: relative;}
.tablet-box .inner{position: absolute;top: 4.3%;left: 12.1%;right: 12.6%;bottom: 18.6%;}
.tablet-box .inner iframe{position: absolute;top: 0;right: 0;left: 0; bottom: 0; width: 100%; height: 100%;}

.desktop-box{display: inline-block; position: relative;}
.desktop-box .inner{position: absolute;top: 6.3%;left: 12.5%;right: 11.9%;bottom: 20.8%;}
.desktop-box .inner iframe{position: absolute;top: 0;right: 0;left: 0; bottom: 0; width: 100%; height: 100%;}

/*===========================================================================
END ANIMATION SLIDER
===========================================================================*/

/*===========================================================================
ANIMATION BOX 2
===========================================================================*/

.animation-box2{position: relative;display: inline-block;margin: 6px 0 40px;}
.animation-box2 .inner{position: absolute; top: 0; left: 0; right: 0; bottom: 0;}
.animation-box2 .inner iframe{position: absolute;top: 0;left: 0;width: 100%; height: 100%;}

/*===========================================================================
END
===========================================================================*/

/*===========================================================================
RESPONSIVE
===========================================================================*/
@media (max-width: 780px){
	.left-col{margin: 0 10px; width: 110px;}
	.center-col{margin: 0 10px; width: 258px;}
	.right-col{margin: 0 10px; width: 258px;}

	.tpl-1{width: 110px;}
	.tpl-2{margin-bottom: 20px;}
	.tpl-3{margin-bottom: 20px;}
	.tpl-4{margin-bottom: 0;}
	.tpl-5{margin-bottom: 20px;}
	.tpl-6{margin-bottom: 20px;}
	.tpl-7{margin-right: 10px;width: 119px;}
	.tpl-8{margin-left: 10px;width: 119px;}
}

@media (max-width: 720px){
	.left-col{margin: 0 10px; width: 100px;}
	.center-col{margin: 0 10px; width: 231px;}
	.right-col{margin: 0 10px; width: 231px;}

	.tpl-1{width: 100px;}
	.tpl-7{width: 105px;}
	.tpl-8{width: 105px;}
}

@media (max-width: 690px){
	.formats{max-width: 330px;}
	.format-box{margin: 0 15px 30px;}
	.formats-section{padding: 62px 0 44px;}

	/*.logos span:nth-child(4):before{content: ''; display: table;height: 10px;}*/
	.logos .first-line span:nth-child(2) img{margin-left: 48px;}

	.logos .first-line{display: block;text-align: justify; text-align-last: justify;}
	.logos .first-line:after{content:""; display: inline-block; width: 100%; height: 0; overflow: hidden;}
	.logos .second-line{display: block;text-align: justify; text-align-last: justify;}
	.logos .second-line:after{content:""; display: inline-block; width: 100%; height: 0; overflow: hidden;}

}

@media (max-width: 650px){

	.templates{max-width: 371px;}
	.right-col{margin: 20px 10px 0; width: 351px;}
	.tpl-7{width: 165px;}
	.tpl-8{width: 165px;}

}

@media (min-width: 601px){
	.main-menu{display: block!important;}
}

@media (max-width: 600px){
	.menu-btn{display: block;position: relative;z-index: 11;}
	.main-menu{display: none; padding: 90px 20px 20px;}
	h1{font-size: 30px;	}
	.animation-slider-control .owl-dot{margin: 0 10px;}
	.animation-slider .owl-nav{display: none;}
	.animation-slider-container:before{height: 240px;}

	.col-4{width: 50%;}
	.footer .col-4:nth-child(3){clear: both;}
	.footer ul{margin-bottom: 20px;}
	.copyright{margin-top: 40px;}

	.main-menu{position: fixed;top: 0; left: 0; right: 0; bottom: 0; background-color: #fff; z-index: 10;}
	.logo{position: relative;z-index: 11;}

	.main-menu > ul > li{float: none;margin: 0 0 15px;}
	.main-menu > ul > li > a{display: block; width: auto; height: auto; line-height: 1; padding: 13px 0;}

	.main-menu .lang{position: absolute; bottom: 20px; left: 50%; padding: 10px 10px 10px 10px; margin-left: -27px;}
	.main-menu .lang ul{top: auto;left: -5px;padding-top: 0; padding-bottom: 35px; bottom: 0;}
	.main-menu .lang ul li a{line-height: 1; padding: 10px 20px 10px 14px;}
}

@media (max-width: 420px){
	.templates{max-width: 330px;}

	.left-col, .tpl-1{width: 88px;}
	.right-col{width: 310px;}
	.center-col{width: 201px;}

	.tpl-7, .tpl-8{width: 145px;}

	.animation-slider-control{margin-left: -10px; margin-right: -10px;}
	.animation-slider-control .owl-dot{margin: 0 7px;}
	.animation-slider-control .owl-dot span{width: 80px; height: 80px;}
	.formats-section {padding: 42px 0 24px;}
	.btn-container{padding: 40px 0;}
	.footer{padding: 43px 0 20px;}
	.copyright{margin-top: 10px;}
	.logos img{max-height: 21px;}

	.logos .first-line span:nth-child(2) img{margin-left: 21px;}

	.templates-section{padding: 41px 0 10px;}
	.animation-slider-container .container{padding-left: 2px; padding-right: 2px;}
}

@media (max-width: 359px){
	.templates{max-width: 298px;}

	.left-col, .tpl-1{width: 79px;}
	.right-col{width: 278px;}
	.center-col{width: 178px;}

	.tpl-7, .tpl-8{width: 129px;}

	.format-box{width: 126px; height: 126px; margin: 0 10px 20px;}
	.logo{margin-top: 20px;}
}

/*===========================================================================
END RESPONSIVE
===========================================================================*/

/**
 * Owl Carousel v2.2.1
 */
.owl-carousel{display: none;width: 100%;-webkit-tap-highlight-color: transparent;position: relative;z-index: 1;}
.owl-carousel .owl-stage{position: relative;-ms-touch-action: pan-Y;-moz-backface-visibility: hidden;}
.owl-carousel .owl-stage:after{content: ".";display: block;clear: both;visibility: hidden;line-height: 0;height: 0;}
.owl-carousel .owl-stage-outer{position: relative;overflow: hidden;-webkit-transform: translate3d(0px, 0px, 0px);}
.owl-carousel .owl-wrapper,
 .owl-carousel .owl-item{-webkit-backface-visibility: hidden;-moz-backface-visibility: hidden;ms-backface-visibility: hidden;-webkit-transform: translate3d(0, 0, 0);-moz-transform: translate3d(0, 0, 0);-ms-transform: translate3d(0, 0, 0);}
.owl-carousel .owl-item{position: relative;min-height: 1px;float: left;-webkit-backface-visibility: hidden;-webkit-tap-highlight-color: transparent;-webkit-touch-callout: none;}
.owl-carousel .owl-item img{display: block;}
.owl-carousel .owl-nav.disabled,
 .owl-carousel .owl-dots.disabled{display: none;}
.owl-carousel .owl-nav .owl-prev,
 .owl-carousel .owl-nav .owl-next,
 .owl-carousel .owl-dot{cursor: pointer;cursor: hand;-webkit-user-select: none;khtml-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;}
.owl-carousel.owl-loaded{display: block;}
.owl-carousel.owl-loading{opacity: 0;display: block;}
.owl-carousel.owl-hidden{opacity: 0;}
.owl-carousel.owl-refresh .owl-item{visibility: hidden;}
.owl-carousel.owl-drag .owl-item{-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;}
.owl-carousel.owl-grab{cursor: move;cursor: grab;}
.owl-carousel.owl-rtl{direction: rtl;}
.owl-carousel.owl-rtl .owl-item{float: right;}
.no-js .owl-carousel{display: block;}
.owl-carousel .animated{animation-duration: 1000ms;animation-fill-mode: both;}
.owl-carousel .owl-animated-in{z-index: 0;}
.owl-carousel .owl-animated-out{z-index: 1;}
.owl-carousel .fadeOut{animation-name: fadeOut;}
@keyframes fadeOut{
	0%{opacity: 1;}
	100%{opacity: 0;}
}
.owl-height{transition: height 500ms ease-in-out;}
.owl-carousel .owl-item .owl-lazy{opacity: 0;transition: opacity 400ms ease;}
.owl-carousel .owl-item img.owl-lazy{transform-style: preserve-3d;}
.owl-carousel .owl-video-wrapper{position: relative;height: 100%;background: #000;}
.owl-carousel .owl-video-play-icon{position: absolute;height: 80px;width: 80px;left: 50%;top: 50%;margin-left: -40px;margin-top: -40px;cursor: pointer;z-index: 1;-webkit-backface-visibility: hidden;transition: transform 100ms ease;}
.owl-carousel .owl-video-play-icon:hover{-ms-transform: scale(1.3, 1.3);transform: scale(1.3, 1.3);}
.owl-carousel .owl-video-playing .owl-video-tn,
.owl-carousel .owl-video-playing .owl-video-play-icon{display: none;}
.owl-carousel .owl-video-tn{opacity: 0;height: 100%;background-position: center center;background-repeat: no-repeat;background-size: contain;transition: opacity 400ms ease;}
.owl-carousel .owl-video-frame{position: relative;z-index: 1;height: 100%;width: 100%;}