/*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?aa120df0b9665a35f6b2028c33fa746d?#iefix) format("embedded-opentype"), url(/fonts/GothamPro.woff?bcc7bcc5a85422d9c56b9776bf75ace4) format("woff"), url(/fonts/GothamPro.ttf?2be5884cfacf402f5c51d11236433756) format("truetype"), url(/fonts/GothamPro.svg?73edbde45b1064c1d36d56c95258f822#GothamPro) format("svg");
	font-weight: normal;
	font-style: normal;
}

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

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

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

*{ -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;}

.landing-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%;}

.landing-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;
	transition: all .3s ease-in-out;
}
.landing-btn-lg{font-weight: 500;padding: 18px 30px 18px;min-width: 230px;}
.landing-btn-success{border-color: #21d353;color: #fff;background-color: #21d353;-webkit-box-shadow: 0 10px 20px 0 rgba(33, 211, 83, 0.33);box-shadow: 0 10px 20px 0 rgba(33, 211, 83, 0.33);}
.landing-btn-success:hover{background-color: #1fc64e;color: #fff;border-color: #1fc64e;}
.landing-btn-warning{border-color: #ffa510;color: #fff;background-color: #ffa510;-webkit-box-shadow: 0 10px 20px 0 rgba(230, 187, 25, 0.33);box-shadow: 0 10px 20px 0 rgba(230, 187, 25, 0.33);}
.landing-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;}
.p-text.white{color: #fff;}
.sub-title{ max-width: 490px; margin: -31px auto 29px;}
.sub-title p{margin: 0; color: #959da5; line-height: 1.76;}
.landing-btn-container{padding: 65px 0;}




/*===========================================================================
HEADER
===========================================================================*/
.landing-header{background-color: #fff;}
.landing-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;  -webkit-box-shadow: 0 20px 40px 0 rgba(0, 0, 0, 0.1);  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;}
.landing-menu-btn{float: right; width: 30px; height: 25px; cursor: pointer;background: url(/img/menu-btn.svg) no-repeat; margin: 27px 0 0; display: none;}
.landing-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: -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,1)),to(rgba(245,247,250,1)));
	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; -webkit-box-shadow: 0 38px 30px 0 rgba(0, 0, 0, 0.08); 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 .landing-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;}

.landing-left-col{float: left; width: 120px;margin: 0 15px;}
.landing-center-col{float: left; width: 270px; margin: 0 15px;}
.landing-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; -webkit-box-shadow: 0 10px 20px 0 rgba(33, 211, 83, 0.33); 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){
	.landing-left-col{margin: 0 10px; width: 110px;}
	.landing-center-col{margin: 0 10px; width: 258px;}
	.landing-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){
	.landing-left-col{margin: 0 10px; width: 100px;}
	.landing-center-col{margin: 0 10px; width: 231px;}
	.landing-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){
	.landing-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;}
	.landing-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;}

	.landing-left-col, .tpl-1{width: 88px;}
	.landing-right-col{width: 310px;}
	.landing-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;}
	.landing-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;}

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

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

	.format-box{width: 126px; height: 126px; margin: 0 10px 20px;}
	.landing-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: -webkit-grab;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{-webkit-animation-duration: 1000ms;animation-duration: 1000ms;-webkit-animation-fill-mode: both;animation-fill-mode: both;}
.owl-carousel .owl-animated-in{z-index: 0;}
.owl-carousel .owl-animated-out{z-index: 1;}
.owl-carousel .fadeOut{-webkit-animation-name: fadeOut;animation-name: fadeOut;}
@-webkit-keyframes fadeOut{
	0%{opacity: 1;}
	100%{opacity: 0;}
}
@keyframes fadeOut{
	0%{opacity: 1;}
	100%{opacity: 0;}
}
.owl-height{-webkit-transition: height 500ms ease-in-out;transition: height 500ms ease-in-out;}
.owl-carousel .owl-item .owl-lazy{opacity: 0;-webkit-transition: opacity 400ms ease;transition: opacity 400ms ease;}
.owl-carousel .owl-item img.owl-lazy{-webkit-transform-style: preserve-3d;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;-webkit-transition: -webkit-transform 100ms ease;transition: -webkit-transform 100ms ease;transition: transform 100ms ease;transition: transform 100ms ease, -webkit-transform 100ms ease;}
.owl-carousel .owl-video-play-icon:hover{-webkit-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;-webkit-transition: opacity 400ms ease;transition: opacity 400ms ease;}
.owl-carousel .owl-video-frame{position: relative;z-index: 1;height: 100%;width: 100%;}.db {
  display: block;
}

.dl {
  display: inline-block;
}

.max-ww {
  max-width: 100%;
}

.max-w100 {
  max-width: 100px;
}

.max-hh {
  max-height: 100%;
}

.max-h100 {
  max-height: 100px;
}

.ww {
  width: 100%;
}

.hh {
  height: 100%;
}

.w100 {
  width: 100px;
}

.w310 {
  width: 310px;
}

.h60 {
  height: 60px;
}

.fs14 {
  font-size: 14px;
}

.fs16 {
  font-size: 16px;
}

.xws {
  white-space: normal;
}

.nowrap {
  white-space: nowrap;
}

.xbr {
  border-radius: 0;
}

.xborder {
  border: none;
}

.mg10 > :nth-child(n+2) {
  margin-top: 10px;
}

.xmt {
  margin-top: 0;
}

.xmb {
  margin-bottom: 0;
}

.child-xmt > * {
  margin-top: 0;
}

.m1n {
  margin: -1px;
}

.ma {
  margin: auto;
}

.mr5 {
  margin-right: 5px;
}

.xpt {
  padding-top: 0;
}

.p5 {
  padding: 5px;
}

.p10 {
  padding: 10px;
}

.rel {
  position: relative;
}

.abs {
  position: absolute;
}

.abs-cl-cr {
  position: absolute;
  top: 50%;
  left: 0;
  -webkit-transform: translate(-100%, -50%);
          transform: translate(-100%, -50%);
}

.tlbr {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.hflip {
  -webkit-transform: scale(1, -1);
          transform: scale(1, -1);
}

.flex-row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
}

.title-box-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fade-enter-active,
.fade-leave-active {
  -webkit-transition: opacity .3s;
  transition: opacity .3s;
}

.fade-enter,
.fade-leave-to,
.fade-leave-active {
  opacity: 0;
}

.notification-menu .tab-content {
  margin-top: 65px;
}

.alert.alert-info {
  border: none;
  background: none;
  color: red;
}

.dashboard-main-container {
  padding-top: 105px;
}

.landing-main-container {
  line-height: normal;
}

code {
  word-break: break-all;
}

.notification-mark-as-read {
  margin-top: 10px;
}

.header-alert {
  color: red;
}

.notification-menu .btn-success.active {
  -webkit-box-shadow: 0 10px 20px 0 rgba(33, 211, 83, 0.33);
  box-shadow: 0 10px 20px 0 rgba(33, 211, 83, 0.33);
}

header .btn-warning.active {
  -webkit-box-shadow: 0 10px 20px 0 rgba(230, 187, 25, 0.33);
  box-shadow: 0 10px 20px 0 rgba(230, 187, 25, 0.33);
}

header .btn-success.active {
  -webkit-box-shadow: 0 10px 20px 0 rgba(33, 211, 83, 0.33);
  box-shadow: 0 10px 20px 0 rgba(33, 211, 83, 0.33);
}

.modal code {
  background-color: #f6f5f5;
  padding: 10px;
  margin: 20px 0;
}

.admin table {
  table-layout: auto !important;
}

.admin table td {
  vertical-align: middle !important;
}

.admin .btn-xs {
  font-size: 10px;
  padding: 5px 10px;
}

.admin-articles-open {
  position: relative;
}

.admin-articles-open button {
  position: absolute;
  top: 50%;
  left: 0;
  -webkit-transform: translate(-100%, -50%);
          transform: translate(-100%, -50%);
  margin-left: 20px;
}

.auth-login .form-error-msg {
  display: block;
  text-align: left;
}

.auth-login .form-error-msg p {
  color: inherit;
  margin-bottom: 1em;
}

.animation {
  background: white;
  padding: 10px;
  margin-bottom: 25px;
}

.animation-buttons {
  margin-bottom: -5px;
}

.animation-buttons > * {
  margin-bottom: 5px;
}

.animation-title {
  margin: 0;
  cursor: text;
}

.animation-title-text {
  display: inline-block;
  vertical-align: middle;
  max-width: 80%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.animation-mtime {
  position: absolute;
  top: -3px;
  margin: 5px;
}

.animation-thumbnail-link {
  display: block;
  position: relative;
}

.animation-thumbnail-link:before {
  display: block;
  content: '';
  padding-top: 75%;
}

.animation-thumbnail-image {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  margin: auto;
}

.animation-thumbnail-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.25);
}

.animation-thumbnail-overlay-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  font-size: 40px;
  background: rgba(255, 255, 255, 0.3);
  padding: 10px;
  border-radius: 999px;
  color: white;
}

.animation-buttons,
.animation-thumbnail-overlay,
.animation-title-icon {
  opacity: 0;
  pointer-events: none;
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
}

.animation:hover .animation-buttons,
.animation:hover .animation-thumbnail-overlay,
.animation:hover .animation-title-icon {
  opacity: 1;
  pointer-events: auto;
}

.animations-item .control-buttons button {
  text-transform: uppercase;
}

.braintree-hosted-field {
  position: relative;
  border: solid 1px #e0e2e5;
  border-radius: 4px;
}

.braintree-hosted-field iframe {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 3px 15px;
}

.braintree-hosted-field-paypal {
  position: relative;
}

.braintree-hosted-field-paypal #braintree-paypal-loggedin {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: none !important;
  z-index: 0;
}

.braintree-hosted-field-paypal #braintree-paypal-loggedin:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#f0f4f7));
  background: linear-gradient(to bottom, #ffffff, #f0f4f7);
}

.braintree-hosted-field-paypal #braintree-paypal-loggedin:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  background-image: url(/img/PayPal_logo.svg);
  background-position: 20px 50%;
  background-repeat: no-repeat;
  background-size: 75px 30px;
}

.braintree-hosted-field-paypal #braintree-paypal-loggedin #bt-pp-name {
  visibility: hidden;
}

.braintree-hosted-field-paypal #braintree-paypal-loggedout {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
}

.braintree-hosted-field-paypal #braintree-paypal-button {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100% !important;
  height: 100% !important;
}

.braintree-hosted-field-paypal2 {
  position: relative;
}

.braintree-hosted-field-paypal2 #braintree-paypal-loggedin {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: none !important;
  z-index: 0;
  max-width: none !important;
  line-height: 60px;
  text-align: center;
}

.braintree-hosted-field-paypal2 #braintree-paypal-loggedin:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#f0f4f7));
  background: linear-gradient(to bottom, #ffffff, #f0f4f7);
}

.braintree-hosted-field-paypal2 #braintree-paypal-loggedin:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  background-image: url(/img/PayPal_logo.svg);
  background-position: 20px 50%;
  background-repeat: no-repeat;
  background-size: 75px 30px;
}

.braintree-hosted-field-paypal2 #braintree-paypal-loggedin #bt-pp-name {
  display: none !important;
}

.braintree-hosted-field-paypal2 #braintree-paypal-loggedin #bt-pp-cancel {
  float: none !important;
}

.braintree-hosted-field-paypal2 #braintree-paypal-loggedin #bt-pp-name {
  visibility: hidden;
}

.braintree-hosted-field-paypal2 #braintree-paypal-loggedout {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
}

.braintree-hosted-field-paypal2 #braintree-paypal-button {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100% !important;
  height: 100% !important;
}

.layout-header-brand-hidden {
  width: 0;
  overflow: hidden;
  white-space: nowrap;
  vertical-align: middle;
}

.modal-payment-method .form-error-msg {
  position: absolute;
  top: -1.5em;
  right: 16px;
}

.modal-payment-method-loading {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-line-pack: center;
      align-content: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  z-index: 1;
  opacity: 0.75;
  pointer-events: none;
  position: absolute;
}

.modal-payment-method-loading span {
  padding: 5px 10px;
  color: white;
  background: black;
  border-radius: 3px;
}

.modal-payment-method-changed h2 {
  padding: 0 15px;
}

.modal-download .modal-dialog {
  width: auto;
}

.subscription-new-loading {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-line-pack: center;
      align-content: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  z-index: 1;
  opacity: 0.75;
  pointer-events: none;
}

.subscription-new-loading span {
  padding: 5px 10px;
  color: white;
  background: black;
  border-radius: 3px;
}

.marching-ants {
  background-image: -webkit-gradient(linear, left top, right top, color-stop(50%, #ccc), color-stop(0, transparent)), -webkit-gradient(linear, left top, right top, color-stop(70%, transparent), color-stop(70%, #ccc), color-stop(75%, #ccc), color-stop(0, transparent)), -webkit-gradient(linear, left top, right top, color-stop(50%, #ccc), color-stop(0, transparent)), -webkit-gradient(linear, left top, right top, color-stop(70%, transparent), color-stop(70%, #ccc), color-stop(75%, #ccc), color-stop(0, transparent)), -webkit-gradient(linear, left top, left bottom, color-stop(50%, #ccc), color-stop(0, transparent)), -webkit-gradient(linear, left top, left bottom, color-stop(70%, transparent), color-stop(70%, #ccc), color-stop(75%, #ccc), color-stop(0, transparent)), -webkit-gradient(linear, left top, left bottom, color-stop(50%, #ccc), color-stop(0, transparent)), -webkit-gradient(linear, left top, left bottom, color-stop(70%, transparent), color-stop(70%, #ccc), color-stop(75%, #ccc), color-stop(0, transparent));
  background-image: linear-gradient(90deg, #ccc 50%, transparent 0), linear-gradient(90deg, transparent 70%, #ccc 70%, #ccc 75%, transparent 0), linear-gradient(90deg, #ccc 50%, transparent 0), linear-gradient(90deg, transparent 70%, #ccc 70%, #ccc 75%, transparent 0), linear-gradient(180deg, #ccc 50%, transparent 0), linear-gradient(180deg, transparent 70%, #ccc 70%, #ccc 75%, transparent 0), linear-gradient(180deg, #ccc 50%, transparent 0), linear-gradient(180deg, transparent 70%, #ccc 70%, #ccc 75%, transparent 0);
  background-size: 20px 1px, 20px 1px, 20px 1px, 20px 1px, 1px 20px, 1px 20px, 1px 20px, 1px 20px;
  background-position: 0 0, 0 0, 0 100%, 0 100%, 0 0, 0 0, 100% 0, 100% 0;
  background-repeat: repeat-x, repeat-x, repeat-x, repeat-x, repeat-y, repeat-y, repeat-y, repeat-y;
  -webkit-animation: marching-ants 10s linear infinite;
          animation: marching-ants 10s linear infinite;
}

@-webkit-keyframes marching-ants {
  to {
    background-position: 600px 0, 600px 0, -600px 100%, -600px 100%, 0 -600px, 0 -600px, 100% 600px, 100% 600px;
  }
}

@keyframes marching-ants {
  to {
    background-position: 600px 0, 600px 0, -600px 100%, -600px 100%, 0 -600px, 0 -600px, 100% 600px, 100% 600px;
  }
}

.pie-spinner {
  width: 34px;
  height: 34px;
  margin: 0 0 0 -17px;
  left: 50%;
  border-radius: 50%;
  top: 0;
  position: absolute;
  display: block;
  outline: none;
  -webkit-box-shadow: 0 10px 20px 0 rgba(33, 211, 83, 0.33);
          box-shadow: 0 10px 20px 0 rgba(33, 211, 83, 0.33);
}

.pie-spinner > * {
  z-index: 1;
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 100%;
  clip: rect(0px, 34px, 34px, 17px);
  background-color: #fff;
}

.pie-spinner > * > * {
  background-color: #21d353;
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 100%;
  clip: rect(0px, 17px, 34px, 0px);
  -webkit-animation: pie-spinner 4s infinite linear;
          animation: pie-spinner 4s infinite linear;
}

.pie-spinner > :last-child {
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}

.pie-spinner > :last-child > * {
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}

@-webkit-keyframes pie-spinner {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }

  25% {
    -webkit-transform: rotate(180deg);
            transform: rotate(180deg);
  }

  75% {
    -webkit-transform: rotate(180deg);
            transform: rotate(180deg);
  }

  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

@keyframes pie-spinner {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }

  25% {
    -webkit-transform: rotate(180deg);
            transform: rotate(180deg);
  }

  75% {
    -webkit-transform: rotate(180deg);
            transform: rotate(180deg);
  }

  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

fieldset[disabled] .btn.load-anim {
  opacity: 1;
}