/*====================================================
xtra small device
======================================================*/
@media (max-width:575.98px){
body{
font-size:16px;
}
.header__menu ul ul li a {
	color: #000;
}
p{
line-height:22px;
}
.header__content--fix-width, .section__content--fix-width, .footer__content--fix-width{
	width:90%;
	padding-left:5%;
	padding-right:5%;
}
/*  HEADER 	 */
/*---------------*/
.header{
height:50px;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-ms-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
background: #fff;
}
.header__content{
height:50px;
}
.header__logo-title img {
	max-width: 99px;
}
/*  MENU 	 */
/*---------------*/
.menu-open{
height:100% !important;
overflow-y:scroll;
background-color:#fff;
}
.header__logo-title{
	font-size:20px;
}
.header__menu {
width: 100%;
height:100%;
float:left;
clear:both;
}
 .header__menu ul {
 width: 100%;
 display: none;
 text-align:left;
 background-color:#fff;

}
	.open{
		margin-top: 50px !important;
	}
.section--intro {
	padding-top: 0px;
    padding-bottom: 400px;
}
 .header__menu ul li {
width: 100%;
}
 .header__menu ul li,  .header__menu ul ul li a,  .header__menu ul ul ul li a,  .header__menu ul ul ul li:last-child a {
border-bottom:1px #ebeced solid;
}
 .header__menu ul li a {
 width: 100%;
 font-size:13px;
  line-height:54px;
  height:auto;
  padding: 4px 35px;
  color:#000;
 margin-top: 14px;
}
 .header__menu > ul > li {
 float: none;

}
 .header__menu ul ul li a {
margin:0 0 0 0;
padding:0px 0px 0 15%;
width:100%;
 height:auto;
}
.header__menu > ul > li.header__btn--signup > a {
	width:80%;
    height:35px;
	line-height:35px;
	padding:0 5%;
	margin:5px 0 5px 10%;
	text-align:center;
	-webkit-transition: none;
	-moz-transition: none;
	transition: none;
}
.header__menu > ul > li.header__btn--login > a {
	width:80%;
    height:35px;
	line-height:35px;
	padding:0 5%;
	margin:5px 0 5px 10%;
	text-align:center;
	-webkit-transition: none;
	-moz-transition: none;
	transition: none;
}
 .header__menu ul ul li:first-child a {
	 border-top:1px #ebeced solid;
 }
 .header__menu ul ul li:last-child a {
border-bottom:none;
}
 .header__menu ul ul ul li a {
margin:0 0 0 0;
padding:0 0px 10px 0;

}
 .header__menu ul ul,  .header__menu ul ul ul {
 position: relative;
 left: 0;
 width: 100%;
 padding:0;
 top:0;
 border-top:none;
  -webkit-box-shadow: none;
  -moz-box-shadow:    none;
  box-shadow:         none;
 background:none;
 transition: none;
 visibility:visible;
 opacity: 1;
}
.header__menu ul ul.submenu-header-sticky{
  background-color:#fff;
  -webkit-box-shadow: none;
  -moz-box-shadow:    none;
  box-shadow:         none;
}
 .header__menu ul ul li,  .header__menu ul ul ul li{
  border-bottom:none;
}
.header__menu li:hover > ul {
transition: none;visibility:visible;top:auto;}

.menu-button {
 display: block;
 ! background: #fff;
 border-bottom: 1px solid #000;

}
    .menu-button::before {
        border-top: 1px double #000;
border-bottom: 1px solid #000;
    }
 .header__menu .submenu-button {
 position: absolute;
 z-index: 99;
 right: 0;
 top: 0;
 display: block;
 height: 38px;
 width: 50px;
 cursor: pointer;
border-left: 1px solid #ebeced;
background-color:#fff;
}
 .header__menu ul ul .submenu-button {
 height: 35px;
 width: 35px;
}
 .header__menu .submenu-button:after {
 content: '';
 position: absolute;
 top: 17px;
 left: 17px;
 display: block;
 width: 0;
 padding: 0;
 border: 5px solid transparent;
 border-top-color: #000;
}
 .header__menu ul ul .submenu-button:after {
 border-width: 4px;
 left: 14px;
 top: 12px;
}
 .header__menu .submenu-button.submenu-opened:after {
 top: 12px;
 border-top-color: transparent;
 border-bottom-color: #000;
}
 .header__menu ul ul .submenu-button.submenu-opened:after {
 top: 10px;
}

/*=============== modals ================*/
    .modal__content.modal__content--visible {
	background: #fff;
}
.grid--support .grid__item.grid__item--padding {
	background: none;
	width: calc((100% - 0px * 4) / 2);
	padding: 23px;
}
/*       SECTION 	   */
/*=====================*/
.section--page-top{
	padding-top:40px;
}
.section--page-bottom{
	padding-bottom:40px;
}
.section__content--padding{
	padding:50px 0;
}
.section__title{
	font-size:28px;
}
.section__description{
	font-size:14px;
	line-height:26px;
}
.section__description--centered{
	width:100%;
	padding:0 0 40px 0;
	text-align: justify;
}
.banner-img {
	left: 50%;
  top: 50%;
	transform: translate(-50%,-50%);
}

/*       GRID 	   */
/*=====================*/

.grid--2col .grid__item, .grid--3col .grid__item, .grid--4col .grid__item, .grid--5col .grid__item, .grid--6col .grid__item
{
	 margin-right:0px;
	 margin-bottom:10px;
	 width:100%;
}
.grid--3col .grid__item--x2, .grid--4col .grid__item--x3, .grid--5col .grid__item--x2,  .grid--5col .grid__item--x3,  .grid--5col .grid__item--x4,  .grid--6col .grid__item--x2,  .grid--6col .grid__item--x3, .grid--6col .grid__item--x4, .grid--6col .grid__item--x5 {
	 width: 100%;
}
.grid--2col .grid__item--padding, .grid--3col .grid__item.grid__item--padding,  .grid--3col .grid__item--x2.grid__item--padding, .grid--4col .grid__item.grid__item--padding, .grid--4col .grid__item--x3.grid__item--padding, .grid--5col .grid__item.grid__item--padding,  .grid--5col .grid__item--x2.grid__item--padding,  .grid--5col .grid__item--x3.grid__item--padding,  .grid--5col .grid__item--x4.grid__item--padding, .grid--6col .grid__item.grid__item--padding,  .grid--6col .grid__item--x2.grid__item--padding,  .grid--6col .grid__item--x3.grid__item--padding,  .grid--6col .grid__item--x4.grid__item--padding,  .grid--6col .grid__item--x5.grid__item--padding{
	 width: calc(100% - 20px * 2);
	 padding:20px;
}
.grid__title{
	font-size:18px;
}
.grid__text {
	padding-bottom:-18px;
	line-height:22px;
}
/*       FOOTER 	   */
/*=====================*/
.footer__content{
	padding-top:50px;
}
ul.grid__list--fmenu li {
	display:block;
    float:left;
	margin:0 20px 10px 0;
}


/*              CUSTOM SECTIONS 	      */
/*========================================*/
/*  INTRO 	 */
/*---------------*/
.intro{
	width:100%;
	padding:15% 0 0 0;
}
.intro__title{
	padding:0 0 25px 0;
	font-size:44px;
	line-height:55px;
}
.intro__subtitle{
	font-size:22px;
	line-height:24px;
	padding:0 0 20px 0;
}
.intro__description{
	font-size:16px;
	padding:0 0 20px 0;
}
.intro__buttons{
	 padding:20px 0 0 0;
	 text-align: center;
}
.intro__content{
	text-align: center;
}
.btn{
	padding:10px 30px;
	margin:0 5px;
}
.btn--play{
	padding-right:60px;
}
.intro-animation{
  width:90%;
  height:35%;
  float:left;
  text-align:right;
	position:absolute;
	bottom:0;
	left:5%;
	z-index:222;
}
.intro-animation img{
  max-width:90%;
}
.animation {
	text-align: center;
	margin-top: -273px;
}
/*  ABOUT 	 */
/*---------------*/
.section__content--about{
    position: relative;
}
.grid--about .grid__item{
}
.grid--about .grid__title{
	font-size:28px;
	line-height:36px;
}
.grid--about .grid__text{
	font-size:16px;
	line-height:24px;
}

.btn--blue-bg {
	color: #fff;
	background-color: #F15A24;
	border: 2px #F15A24 solid;
}
.btn--blue-bg:hover {
	background-color: transparent;
	color: #fff;
}
/*  FEATURES 	 */
/*---------------*/
.section--features{
	padding:0 0 40px 0;
}
svg.svg-features-bottom {
  height: 40px;
}



/*  PRICING 	 */
/*---------------*/
.pricing__switcher{
	width:260px;
	margin:0 auto 40px auto;
}
.pricing__plan{
	width: 100%;
	padding:20px 0;
	/*! margin:0 0 42px 0; */
	-webkit-box-shadow: none;
	box-shadow: none;
	-moz-box-shadow: none;

}

/*  TESTIMONIALS 	 */
/*---------------*/
 .testimonials{
  margin:0;
  padding:40px 0 80px 0;
}
.testimonials__slide {
	text-align: center;
	width:100%;
	float:left;
}
.testimonials__text p{
	padding:0 0 20px 0;
	font-size:14px;
	line-height:22px;
}
.testimonials__source{
	font-weight:700;
	font-size:12px;
}
.testimonials__source a{
	padding:0 5px;
}
/*  CONTACT 	 */
/*---------------*/
.grid--contact{
	display:block;
}
.grid--contact .grid__item, .grid--6col .grid__item{
	margin-bottom:0px !important;
}
.grid__form{
	width:90%;
	padding:0 5%;
	position:relative;
}
.form__submit{
	margin:40px 0 0 0;
}
.svg-form-left{
	display:none;
}
/*  CTA 	 */
/*---------------*/
.section--cta{
	padding:20px 0;
}
svg.svg-cta-top {
	height: 20px;
}
svg.svg-cta-bottom {
	height: 20px;
}
/*  Modal	 */
/*---------------*/
.modal__wrapper {
  top: 5%;
  width: 90%;
  margin-left: -45%;
}
.modal__wrapper--image {
  top: 10%;
  left: 14%;
  width: 86%;
  bottom:auto;
  margin-left: -7%;
}
.modal__content.modal__content--visible{
  display: block;
}
.modal__info{
	display:none;
}
.modal__form{
	width:90%;
	height:100%;
	display:block;
	padding:20px 5%;
}
.modal__content--login, .modal__content--forgot, .modal__content--signup{
  background-color:#fff;
}
.modal__image{
	height:auto;
}
.modal__image img{
	max-width:100%;
	max-height:auto;
}
.grid--support{
	display: block;
}
.grid--support .grid__item.grid__item--padding{
	background:none;
	width: 90%;
	padding:5%;
}
.svg-support-bottom{
	display:none;
}
.grid--features .grid__item{
	 margin-right:0px;
	 margin-bottom:20px;
	 width: 90%;
	 padding:5%;
}
.pricing__plan {
	background-color: #61fdf359;
	width: 24.5%;
	padding: 40px 0;
	float: left;
	position: relative;
}
/*=====================================*/
.header__menu ul ul li a {
	color: #000;
}
.header {
	background: #fff;
}
.menu-button {
	border-bottom: 1px solid #000;
}
.menu-button::before {
	border-top: 1px double #000;
	border-bottom: 1px solid #000;
}
.header__menu ul li a {
	 margin-top: 0px;
}
.intro__title{
	padding:5% 0 10px 0;
	font-size:30px;
	line-height:34px;
	/*! margin-top: 44px; */
}
.intro__subtitle{
	font-size:14px;
	padding:0 0 30px 0;
	line-height:20px;
}
.intro__description{
	font-size:12px;
}
.btn{
	padding:8px 15px;
}
.btn--play{
	padding-right:50px;
}
.section__content--features {
	padding: 0 0 0px 0;
}
.section__description--centered {
	width: 100%;
	padding: 0 0 11px 0;
	text-align: justify;
}
.section__title {
	font-size: 27px;
    padding: 8px 0 14px 0;
}

.section__content--padding {
	padding: 21px 0;
}
.animation {
	margin-top: -97px;
}
.intro-animation img {
	max-width: 65%;
	margin: 0 auto;
}
.banner-img img {
    max-width: 280px;
}
.modal__content--login {
	background: #fff;
}
.modal__content--signup {
	background: #fff;
}
.grid--support .grid__more {
	font-size: 14px;
	padding: 11px 33px;
    -webkit-box-shadow: 0 5px 10px 0 rgba(0,0,0,0.2);
    -moz-box-shadow: 0 5px 10px 0 rgba(0,0,0,0.2);
    -ms-box-shadow: 0 5px 10px 0 rgba(0,0,0,0.2);
    -o-box-shadow: 0 5px 10px 0 rgba(0,0,0,0.2);
}
.back-to-top i {
	width: 34px;
	height: 34px;
	line-height: 34px;

}
.grid__text {
	padding-bottom: 0px;
	line-height: 26px;
}
.intro__content {
	text-align: center;
}
.intro__buttons {
	text-align: center;
}
.grid__item .payment img {
	width: 289px;
}
.grid--5col .grid__item {
	 margin-top: 0;
}
.pricing__plan:nth-child(2) {
}
    .pricing__plan:nth-child(4) {
}
    .grid__client-logo {
        margin-top: 15px;
    }
.btn--blue-bg {
	color: #fff;
	background-color: #F15A24;
	border: 2px #F15A24 solid;
}
.btn--blue-bg:hover {
	background-color: transparent;
	color: #fff;
}
.grid--about .grid__title {
	font-size: 28px;
	line-height: 36px;
	margin-top: 30px;
}
.pricing__plan {
	background-color: #fff;
	width: 100%;
	padding: 40px 0;
	float: left;
	position: relative;
}
.pricing__signup {
	padding: 12px 23px;
}
.pricing__plan--popular {
	background-color: #fff;
	margin-top: 56px;
}
.pricing__plan--popular .pricing__title {
	font-size: 23px;
}
.testimonials {
	padding: 40px 0 2px 0;
}
.demotestimonial p {
	font-size: 19px;
}
}
@media (width:550px){
.banner-img {
	left: 99px;
	top: 17px;
}
}
@media (width:500px){
.banner-img {
	left: 214px;
	top: 92px;
}
}
@media (width:480px){
.banner-img {
	left: 68px;
	top: 12px;
}
}
@media (width:400px){
.banner-img {
	left: 25px;
	top: 12px;
}
}
@media (width:320px){
    .banner-img img {
	max-width: 275px;
}
}

/*=================================================
small device 576px
===================================================*/
@media (min-width:576px) and (max-width:767.98px){
    .grid__image img{
        max-width:100%;
    }
        body{
font-size:14px;
}
.header__menu ul ul li a {
	color: #000;
}
p{
line-height:22px;
}
.header__content--fix-width, .section__content--fix-width, .footer__content--fix-width{
	width:90%;
	padding-left:5%;
	padding-right:5%;
}
/*  HEADER 	 */
/*---------------*/
.header{
height:50px;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-ms-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
background: #fff;
}
.header__content{
height:50px;
}
/*  MENU 	 */
/*---------------*/
.menu-open{
height:100% !important;
overflow-y:scroll;
background-color:#fff;
}
.header__logo-title{
	font-size:20px;
}
.header__menu {
width: 100%;
height:100%;
float:left;
clear:both;
}
 .header__menu ul {
 width: 100%;
 display: none;
 text-align:left;
 background-color:#fff;

}
 .header__menu ul li {
width: 100%;
}
 .header__menu ul li,  .header__menu ul ul li a,  .header__menu ul ul ul li a,  .header__menu ul ul ul li:last-child a {
border-bottom:1px #ebeced solid;
}
 .header__menu ul li a {
 width: 100%;
 font-size:13px;
  line-height:54px;
  height:auto;
  padding: 4px 35px;
  color:#000;
 margin-top: 14px;
}
 .header__menu > ul > li {
 float: none;

}
 .header__menu ul ul li a {
margin:0 0 0 0;
padding:0px 0px 0 15%;
width:100%;
 height:auto;
}
.header__menu > ul > li.header__btn--signup > a {
	width:80%;
    height:35px;
	line-height:35px;
	padding:0 5%;
	margin:5px 0 5px 10%;
	text-align:center;
	-webkit-transition: none;
	-moz-transition: none;
	transition: none;
}
.header__menu > ul > li.header__btn--login > a {
	width:80%;
    height:35px;
	line-height:35px;
	padding:0 5%;
	margin:5px 0 5px 10%;
	text-align:center;
	-webkit-transition: none;
	-moz-transition: none;
	transition: none;
}
 .header__menu ul ul li:first-child a {
	 border-top:1px #ebeced solid;
 }
 .header__menu ul ul li:last-child a {
border-bottom:none;
}
 .header__menu ul ul ul li a {
margin:0 0 0 0;
padding:0 0px 10px 0;

}
 .header__menu ul ul,  .header__menu ul ul ul {
 position: relative;
 left: 0;
 width: 100%;
 padding:0;
 top:0;
 border-top:none;
  -webkit-box-shadow: none;
  -moz-box-shadow:    none;
  box-shadow:         none;
 background:none;
 transition: none;
 visibility:visible;
 opacity: 1;
}
.header__menu ul ul.submenu-header-sticky{
  background-color:#fff;
  -webkit-box-shadow: none;
  -moz-box-shadow:    none;
  box-shadow:         none;
}
 .header__menu ul ul li,  .header__menu ul ul ul li{
  border-bottom:none;
}
.header__menu li:hover > ul {
transition: none;visibility:visible;top:auto;}

.menu-button {
 display: block;
 ! background: #fff;
 border-bottom: 1px solid #000;

}
    .menu-button::before {
        border-top: 1px double #000;
border-bottom: 1px solid #000;
    }
 .header__menu .submenu-button {
 position: absolute;
 z-index: 99;
 right: 0;
 top: 0;
 display: block;
 height: 38px;
 width: 50px;
 cursor: pointer;
border-left: 1px solid #ebeced;
background-color:#fff;
}
 .header__menu ul ul .submenu-button {
 height: 35px;
 width: 35px;
}
 .header__menu .submenu-button:after {
 content: '';
 position: absolute;
 top: 17px;
 left: 17px;
 display: block;
 width: 0;
 padding: 0;
 border: 5px solid transparent;
 border-top-color: #000;
}
 .header__menu ul ul .submenu-button:after {
 border-width: 4px;
 left: 14px;
 top: 12px;
}
 .header__menu .submenu-button.submenu-opened:after {
 top: 12px;
 border-top-color: transparent;
 border-bottom-color: #000;
}
 .header__menu ul ul .submenu-button.submenu-opened:after {
 top: 10px;
}


/*       SECTION 	   */
/*=====================*/
.section--page-top{
	padding-top:40px;
}
.section--page-bottom{
	padding-bottom:40px;
}
.section__content--padding{
	padding:50px 0;
}
.section__title{
	font-size:28px;
}
.section__description{
	font-size:14px;
	line-height:26px;
}
.section__description--centered{
	width:100%;
	padding:10px 0 18px 0;
	text-align: justify;
}
.banner-img {
	/*! margin-top: 62px; */
	/*! margin-left: -250px; */
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
}

/*       GRID 	   */
/*=====================*/

.grid--2col .grid__item, .grid--3col .grid__item, .grid--4col .grid__item, .grid--5col .grid__item, .grid--6col .grid__item
{
	 margin-right:0px;
	 margin-bottom:0px;
	 width:100%;
}
.grid--3col .grid__item--x2, .grid--4col .grid__item--x3, .grid--5col .grid__item--x2,  .grid--5col .grid__item--x3,  .grid--5col .grid__item--x4,  .grid--6col .grid__item--x2,  .grid--6col .grid__item--x3, .grid--6col .grid__item--x4, .grid--6col .grid__item--x5 {
	 width: 100%;
}
.grid--2col .grid__item--padding, .grid--3col .grid__item.grid__item--padding,  .grid--3col .grid__item--x2.grid__item--padding, .grid--4col .grid__item.grid__item--padding, .grid--4col .grid__item--x3.grid__item--padding, .grid--5col .grid__item.grid__item--padding,  .grid--5col .grid__item--x2.grid__item--padding,  .grid--5col .grid__item--x3.grid__item--padding,  .grid--5col .grid__item--x4.grid__item--padding, .grid--6col .grid__item.grid__item--padding,  .grid--6col .grid__item--x2.grid__item--padding,  .grid--6col .grid__item--x3.grid__item--padding,  .grid--6col .grid__item--x4.grid__item--padding,  .grid--6col .grid__item--x5.grid__item--padding{
	 width: calc(100% - 20px * 2);
	 padding:20px;
}
.grid__title{
	font-size:18px;
}
.grid__text {
	padding-bottom:0px;
	line-height:22px;
}
/*       FOOTER 	   */
/*=====================*/
.footer__content{
	padding-top:20px;
}
ul.grid__list--fmenu li {
	display:block;
    float:left;
	margin:0 20px 10px 0;
}
.section--intro {
	padding-top: 0px;
    padding-bottom: 373px;
}

/*              CUSTOM SECTIONS 	      */
/*========================================*/
/*  INTRO 	 */
/*---------------*/
.intro{
	width:100%;
	padding:15% 0 0 0;
}
.intro__title{
	padding:0 0 25px 0;
	font-size:39px;
	line-height:55px;
}
.intro__subtitle{
	font-size:22px;
	line-height:24px;
	padding:0 0 20px 0;
}
.intro__description{
	font-size:16px;
	padding:0 0 20px 0;
}
.intro__buttons{
	 padding:20px 0 0 0;
	 text-align: center;
}
.intro__content{
	text-align: center;
}
.btn{
	padding:10px 30px;
	margin:0 5px;
}
.btn--play{
	padding-right:60px;
}
.intro-animation{
  width:90%;
  height:35%;
  float:left;
  text-align:right;
	position:absolute;
	bottom:0;
	left:5%;
	z-index:222;
}
.intro-animation img{
  max-width:60%;
  /*! margin-right: 116px; */
}
.banner-img img {
	max-width: 385px;
}
.animation {
	text-align: center;
	margin-top: -141px;
}
/*  ABOUT 	 */
/*---------------*/
.section__content--about{
    position: relative;
}
.grid--about .grid__item{
}
.grid--about .grid__title{
	font-size:28px;
	line-height:36px;
}
.grid--about .grid__text{
	font-size:16px;
	line-height:24px;
}

.btn--blue-bg {
	color: #fff;
	background-color: #F15A24;
	border: 2px #F15A24 solid;
}
.btn--blue-bg:hover {
	background-color: transparent;
	color: #fff;
}
/*  FEATURES 	 */
/*---------------*/
.section--features{
	padding:0 0 14px 0;
}
svg.svg-features-bottom {
  height: 40px;
}



/*  PRICING 	 */
/*---------------*/
.pricing__switcher{
	width:260px;
	margin:0 auto 40px auto;
}
.pricing__plan{
	width: 100%;
	padding:20px 0;
	margin:0 0 10px 0;
	-webkit-box-shadow: none;
	box-shadow: none;
	-moz-box-shadow: none;

}

/*  TESTIMONIALS 	 */
/*---------------*/
 .testimonials{
  margin:0;
  padding:29px 0 22px 0;
}
.testimonials__slide {
	text-align: center;
	width:100%;
	float:left;
}
.testimonials__text p{
	padding:0 0 20px 0;
	font-size:14px;
	line-height:22px;
}
.testimonials__source{
	font-weight:700;
	font-size:12px;
}
.testimonials__source a{
	padding:0 5px;
}
.testimonials__text p {
	 padding: 0 0 0px 0;
	font-size: 18px;
	line-height: 24px;
	text-align: center;
}
.section--testimonials {
	padding: 10px;
}
/*  CONTACT 	 */
/*---------------*/
.grid--contact{
	display:block;
}
.grid--contact .grid__item, .grid--6col .grid__item{
	margin-bottom:0px !important;
}
.grid__form{
	width:90%;
	padding:0 5%;
	position:relative;
}
.form__submit{
	margin:40px 0 0 0;
}
.svg-form-left{
	display:none;
}
/*  CTA 	 */
/*---------------*/
.section--cta{
	padding:20px 0;
}
svg.svg-cta-top {
	height: 20px;
}
svg.svg-cta-bottom {
	height: 20px;
}
/*  Modal	 */
/*---------------*/
.modal__wrapper {
  top: 5%;
  width: 90%;
  margin-left: -45%;
}
.modal__wrapper--image {
  top: 10%;
  left: 14%;
  width: 86%;
  bottom:auto;
  margin-left: -7%;
}
.modal__content.modal__content--visible{
  display: block;
	background: #fff;
}
.modal__info{
	display:none;
}
.modal__form{
	width:90%;
	height:100%;
	display:block;
	padding:20px 5%;
}
.modal__content--login, .modal__content--forgot, .modal__content--signup{
  background-color:#fff;
}
.modal__image{
	height:auto;
}
.modal__image img{
	max-width:100%;
	max-height:auto;
}
.grid--support{
	display: block;
}
.grid--support .grid__item.grid__item--padding{
	background:none;
	width: 90%;
	padding:20px;
}
.svg-support-bottom{
	display:none;
}
.grid--features .grid__item{
	 margin-right:0px;
	 margin-bottom:14px;
	 width: 90%;
	 padding:4%;
}
.pricing__plan {
	background-color: #fff;
	width: 49.5%;
	padding: 40px 0;
	float: left;
	position: relative;
}
.pricing__plan--popular {
	background-color: #fff;
}
.pricing__plan:nth-child(4) {
}
.pricing__plan:nth-child(2) {
}
.section__content--padding {
	padding-top: 0;
	padding-bottom: 5px;
}
.pricing__signup {
	padding: 12px 30px;
}
.demotestimonial p {
	font-size: 19px;
}
}


/*=================================================
mediam device 768px
===================================================*/
@media (min-width:768px) and (max-width:991.98px){
        body{
font-size:14px;
}
.header__menu ul ul li a {
	color: #000;
}
p{
line-height:24px;
}
.header__content--fix-width, .section__content--fix-width, .footer__content--fix-width{
	width:90%;
	padding-left:5%;
	padding-right:5%;
}
/*  HEADER 	 */
/*---------------*/
.header{
height:50px;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-ms-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
background: #fff;
}
.header__content{
height:50px;
}
/*  MENU 	 */
/*---------------*/
.menu-open{
height:100% !important;
overflow-y:scroll;
background-color:#fff;
}
.header__logo-title{
	font-size:20px;
}
.header__menu {
width: 100%;
height:100%;
float:left;
clear:both;
}
 .header__menu ul {
 width: 100%;
 display: none;
 text-align:left;
 background-color:#fff;

}
.banner-img img {
	max-width: 418px;
}
 .header__menu ul li {
width: 100%;
}
 .header__menu ul li,  .header__menu ul ul li a,  .header__menu ul ul ul li a,  .header__menu ul ul ul li:last-child a {
border-bottom:1px #ebeced solid;
}
 .header__menu ul li a {
 width: 100%;
 font-size:13px;
  line-height:54px;
  height:auto;
  padding: 4px 35px;
  color:#000;
 margin-top: 14px;
}
 .header__menu > ul > li {
 float: none;

}
 .header__menu ul ul li a {
margin:0 0 0 0;
padding:0px 0px 0 15%;
width:100%;
 height:auto;
}
.header__menu > ul > li.header__btn--signup > a {
	width:80%;
    height:35px;
	line-height:35px;
	padding:0 5%;
	margin:5px 0 5px 10%;
	text-align:center;
	-webkit-transition: none;
	-moz-transition: none;
	transition: none;
}
.header__menu > ul > li.header__btn--login > a {
	width:80%;
    height:35px;
	line-height:35px;
	padding:0 5%;
	margin:5px 0 5px 10%;
	text-align:center;
	-webkit-transition: none;
	-moz-transition: none;
	transition: none;
}
 .header__menu ul ul li:first-child a {
	 border-top:1px #ebeced solid;
 }
 .header__menu ul ul li:last-child a {
border-bottom:none;
}
 .header__menu ul ul ul li a {
margin:0 0 0 0;
padding:0 0px 10px 0;

}
 .header__menu ul ul,  .header__menu ul ul ul {
 position: relative;
 left: 0;
 width: 100%;
 padding:0;
 top:0;
 border-top:none;
  -webkit-box-shadow: none;
  -moz-box-shadow:    none;
  box-shadow:         none;
 background:none;
 transition: none;
 visibility:visible;
 opacity: 1;
}
.header__menu ul ul.submenu-header-sticky{
  background-color:#fff;
  -webkit-box-shadow: none;
  -moz-box-shadow:    none;
  box-shadow:         none;
}
 .header__menu ul ul li,  .header__menu ul ul ul li{
  border-bottom:none;
}
.header__menu li:hover > ul {
transition: none;visibility:visible;top:auto;}

.menu-button {
 display: block;
 ! background: #fff;
 border-bottom: 1px solid #000;

}
    .menu-button::before {
        border-top: 1px double #000;
border-bottom: 1px solid #000;
    }
 .header__menu .submenu-button {
 position: absolute;
 z-index: 99;
 right: 0;
 top: 0;
 display: block;
 height: 38px;
 width: 50px;
 cursor: pointer;
border-left: 1px solid #ebeced;
background-color:#fff;
}
 .header__menu ul ul .submenu-button {
 height: 35px;
 width: 35px;
}
 .header__menu .submenu-button:after {
 content: '';
 position: absolute;
 top: 17px;
 left: 17px;
 display: block;
 width: 0;
 padding: 0;
 border: 5px solid transparent;
 border-top-color: #000;
}
 .header__menu ul ul .submenu-button:after {
 border-width: 4px;
 left: 14px;
 top: 12px;
}
 .header__menu .submenu-button.submenu-opened:after {
 top: 12px;
 border-top-color: transparent;
 border-bottom-color: #000;
}
 .header__menu ul ul .submenu-button.submenu-opened:after {
 top: 10px;
}


/*       SECTION 	   */
/*=====================*/
.section--page-top{
	padding-top:40px;
}
.section--page-bottom{
	padding-bottom:40px;
}
.section__content--padding{
	/*! padding:50px 0; */
}
	.section__content--padding {
	/* padding: 100px 0; */
	padding-top: 10px;
	padding-bottom: 10px;
}
.section__title{
	font-size:28px;
}
.section__description{
	font-size:14px;
	line-height:26px;
}
.section__description--centered{
	width:100%;
	padding:10px 0 17px 0;
	text-align: justify;
}
.banner-img {
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}

/*       GRID 	   */
/*=====================*/

.grid--2col .grid__item, .grid--3col .grid__item, .grid--4col .grid__item, .grid--5col .grid__item, .grid--6col .grid__item
{
	 margin-right:0px;
	 /*! margin-bottom:40px; */
	 width:100%;
	 /*! padding: 10px; */
}
.grid--about .grid__item--floated-right {
	margin-left: 3px;
}
.grid--3col .grid__item--x2, .grid--4col .grid__item--x3, .grid--5col .grid__item--x2,  .grid--5col .grid__item--x3,  .grid--5col .grid__item--x4,  .grid--6col .grid__item--x2,  .grid--6col .grid__item--x3, .grid--6col .grid__item--x4, .grid--6col .grid__item--x5 {
	 width: 46%;
}
.grid--2col .grid__item--padding, .grid--3col .grid__item.grid__item--padding,  .grid--3col .grid__item--x2.grid__item--padding, .grid--4col .grid__item.grid__item--padding, .grid--4col .grid__item--x3.grid__item--padding, .grid--5col .grid__item.grid__item--padding,  .grid--5col .grid__item--x2.grid__item--padding,  .grid--5col .grid__item--x3.grid__item--padding,  .grid--5col .grid__item--x4.grid__item--padding, .grid--6col .grid__item.grid__item--padding,  .grid--6col .grid__item--x2.grid__item--padding,  .grid--6col .grid__item--x3.grid__item--padding,  .grid--6col .grid__item--x4.grid__item--padding,  .grid--6col .grid__item--x5.grid__item--padding{
	 width: calc(100% - 20px * 2);
	 padding:20px;
}
.grid__title{
	font-size:18px;
}
.grid__text {
	padding-bottom:6px;
	line-height:22px;
}
/*       FOOTER 	   */
/*=====================*/
.footer__content{
	padding-top:13px;
}
ul.grid__list--fmenu li {
	display:block;
    float:left;
	margin:0 20px 10px 0;
}
.section--intro {
	padding-top: 0px;
	padding-bottom: 425px;
}
.grid--about .grid__list li {
	padding: 3px 0 4px 40px;
}
/*              CUSTOM SECTIONS 	      */
/*========================================*/
/*  INTRO 	 */
/*---------------*/
.intro{
	width:100%;
	padding:10% 0 0 0;
}
.intro__title{
	padding:0 0 25px 0;
	font-size:39px;
	line-height:55px;
}
.intro__subtitle{
	font-size:22px;
	line-height:24px;
	padding:0 0 20px 0;
}
.intro__description{
	font-size:16px;
	padding:0 0 20px 0;
}
.intro__buttons{
	 padding:20px 0 0 0;
	 text-align: center;
}
.intro__content{
	text-align: center;
}
.btn{
	padding:10px 30px;
	margin:0 5px;
}
.btn--play{
	padding-right:60px;
}
.intro-animation{
  width:90%;
  height:35%;
  float:left;
  text-align:right;
	position:absolute;
	bottom:0;
	left:5%;
	z-index:222;
}
.intro-animation img{
  /*! max-width:62%; */
}
.animation {
	text-align: center;
	position: absolute;
	top: 120%;
	left: 50%;
	transform: translate(-50%,-50%);
}
/*  ABOUT 	 */
/*---------------*/
.section__content--about{
    position: relative;
}
.grid--about .grid__item{
}
.grid--about .grid__title{
	font-size:24px;
	line-height:32px;
}
.grid--about .grid__text{
	font-size:16px;
	line-height:23px;
}

.btn--blue-bg {
	color: #fff;
	background-color: #F15A24;
	border: 2px #F15A24 solid;
}
.btn--blue-bg:hover {
	background-color: transparent;
	color: #fff;
}
/*  FEATURES 	 */
/*---------------*/
.section--features{
	padding:0 0 16px 0;
}
svg.svg-features-bottom {
  height: 40px;
}



/*  PRICING 	 */
/*---------------*/
.pricing__switcher{
	width:260px;
	margin:0 auto 74px auto;
}
.pricing__plan{
	width: 100%;
	padding:20px 0;
	margin:0 0 10px 0;
	-webkit-box-shadow: none;
	box-shadow: none;
	-moz-box-shadow: none;

}
.pricing__plan--popular .pricing__title {
	font-size: 26px;
}
.pricing__signup {
	padding: 10px 42px;
}
/*  TESTIMONIALS 	 */
/*---------------*/
 .testimonials{
  margin:0;
  padding:40px 0 0px 0;
}
.testimonials__slide {
	text-align: center;
	width:100%;
	float:left;
}
.testimonials__text p{
	padding:0 0 20px 0;
	font-size:14px;
	line-height:22px;
}
.testimonials__source{
	font-weight:700;
	font-size:12px;
}
.testimonials__source a{
	padding:0 5px;
}
/*  CONTACT 	 */
/*---------------*/
.grid--contact{
	display:block;
}
.grid--contact .grid__item, .grid--6col .grid__item{
	margin-bottom:0px !important;
}
.grid__form{
	width:90%;
	padding:0 5%;
	position:relative;
}
.form__submit{
	margin:40px 0 0 0;
}
.svg-form-left{
	display:none;
}
.grid--support .grid__more {
	font-size: 14px;
	padding: 16px 36px;
}
.grid--support .grid__title {
	padding: 0px 0 20px 0;
}
.grid--5col .grid__item {
	margin-bottom: 7px;
	margin-top: 10px;
}
/*  CTA 	 */
/*---------------*/
.section--cta{
	padding:20px 0;
}
svg.svg-cta-top {
	height: 20px;
}
svg.svg-cta-bottom {
	height: 20px;
}
/*  Modal	 */
/*---------------*/
.modal__wrapper {
  top: 5%;
  width: 90%;
  margin-left: -45%;
}
.modal__wrapper--image {
  top: 10%;
  left: 14%;
  width: 86%;
  bottom:auto;
  margin-left: -7%;
}
.modal__content.modal__content--visible{
  display: block;
	background: #fff;
}
.modal__info{
	display:none;
}
.modal__form{
	width:90%;
	height:100%;
	display:block;
	padding:20px 5%;
}
.modal__content--login, .modal__content--forgot, .modal__content--signup{
  background-color:#fff;
}
.modal__image{
	height:auto;
}
.modal__image img{
	max-width:100%;
	max-height:auto;
}
.grid--support{
	display: block;
}
.grid--support .grid__item.grid__item--padding{
	background:none;
	width: 90%;
	padding:2%;
}
.svg-support-bottom{
	display:none;
}
.grid--features .grid__item{
	 margin-right:0px;
	 margin-bottom:0px;
	 width: 90%;
	 padding:1% 5%;
}
.pricing__plan {
	background-color: #fff;
	width: 24.5%;
	padding: 40px 0;
	float: left;
	position: relative;
}
	.pricing__plan--popular {
    z-index: 2;
    top: -30px;
    padding: 50px 0 70px 0;
    background-color: #fff;
    color: #fff;
    -moz-box-shadow: 10px 0 15px -10px rgba(0, 0, 0, .45), -10px 0 15px -10px rgba(0, 0, 0, .45);
    -webkit-box-shadow: 10px 0 15px -10px rgba(0, 0, 0, .45), -10px 0 15px -10px rgba(0, 0, 0, .45);
    box-shadow: 10px 0 15px -10px rgba(0, 0, 0, .45), -10px 0 15px -10px rgba(0, 0, 0, .45);
}
.grid--features .grid__item {
	margin-right: 45px;
	 /*! margin-bottom: 29px; */
	width: 19%;
}

}


/*=================================================
larged device
===================================================*/
@media (min-width:992px) and (max-width:1199.98px){
    .header__menu > ul > li > a {
	padding: 0 12px;
}
.animation img {
	max-width: 500px;
}
.animation {
	margin-top: -45px;
}
.intro__title {
	font-size: 37px;
}
.banner-img img {
	max-width: 501px;
}
.grid--support .grid__item.grid__item--padding {
	padding: 30px;
}
.demotestimonial {
	padding: 10px;
}
.grid--support .grid__title {
	padding: 0px 0 20px 0;
}
.grid__text {
	 padding-bottom: 0px;
}
.grid__item .payment img {
	width: 298px;
}
.grid--features .grid__item {
	padding-bottom: 10px;
}
.header__menu ul ul {
	position: absolute;
	left: -193px;
	width: 674px;
}
}
/*=================================================
xtra larged device
===================================================*/
@media (min-width:1200px){
    .animation {
	margin-top: -108px;
}
}



/*===============================================*/
/* Smaller than fixed width 1240 px		 */
/*===============================================*/
@media (min-width: 1240px) {
.header__content--fix-width, .section__content--fix-width, .footer__content--fix-width{
	width:92%;
	padding-left:4%;
	padding-right:4%;
}
.grid--support .grid__item.grid__item--padding{
	background:none;
	width: calc((100% - 0px * 4) / 2);
}
    .btn--blue-bg {
	color: #fff;
	background-color: rgb(206, 89, 89);
}
.btn--blue-bg:hover {
	background-color: transparent;
	color: #F15A24;
}
}