/*===============================================*/
/* 5. GRID 	 						 */
/*===============================================*/

/* BLOCK - grid */
.grid{
	width:100%;
	float:left;
	clear:both;
}
.grid__item--padding{
	 background-color:#f7f8f9;
}
/* -----------------------------------------------------  */
 /* ELEMENT grid__item BASED ON BLOCK MODIFIER grid--2col  */
.grid--2col .grid__item{
	 float:left;
	 margin-right:80px;
	 margin-bottom:80px;
	           /* full width - space between cols / number of cols */
	 width: calc((100% - 80px) / 2); 
}
.grid--2col .grid__item--padding{
	          /* full width - space between cols - padding * nr of paddings / number of cols */
	 width: calc((100% - 80px - 20px * 4) / 2);
	 padding:20px;
}
.grid .grid__item:last-child, 
.grid--2col .grid__item:nth-child(2n+2){
	 float:right;
	 margin-right:0px;
}
/* -----------------------------------------------------  */
/* ELEMENT grid__item BASED ON BLOCK MODIFIER grid--3col  */
.grid--3col .grid__item{
	 float:left;
	 margin-right:80px;
	 margin-bottom:80px;
	          /* full width - space between cols * nr of inner spaces / number of cols */
	 width: calc((100% - 80px * 2) / 3);
}
.grid--3col .grid__item.grid__item--padding{
	         /* full width - space between cols * nr of inner spaces - padding * nr of paddings / number of cols */
	 width: calc((100% - 80px * 2 - 20px * 6) / 3);
	 padding:20px;
 }
.grid--3col .grid__item--x2{
	          /*(      one grid item    ) * 2 + space between cols */
	 width: calc((((100% - 80px * 2) / 3) * 2) + 80px);
}
 .grid--3col .grid__item--x2.grid__item--padding{
	
	         /*   (    one grid item with padding  ) * 2 + space between cols + padding */
	 width: calc((((100% - 80px * 2 - 20px * 6) / 3) * 2) + 80px + 20px * 2);
	 padding:20px;
}
.grid--3col .grid__item:nth-child(3n+3){
	 float:right;
	 margin-right:0px;
}
/* -----------------------------------------------------  */
/* ELEMENT grid__item BASED ON BLOCK MODIFIER grid--4col  */
.grid--4col .grid__item{
	 float:left;
	 margin-right:80px;
	 margin-bottom:80px;
	          /* full width - space between cols * nr of inner spaces / number of cols */
	 width: calc((100% - 80px * 3) / 4);
}
.grid--4col .grid__item.grid__item--padding{
	         /* full width - space between cols * nr of inner spaces - padding * nr of paddings / number of cols */
	 width: calc((100% - 80px * 3 - 20px * 8) / 4);
	 padding:20px;
 }
.grid--4col .grid__item--x3{
	          /*(      one grid item    ) * 3 + space between cols */
	 width: calc((((100% - 80px * 3) / 4) * 3) + 80px * 2);
}
 .grid--4col .grid__item--x3.grid__item--padding{
	
	         /*   (    one grid item with padding  ) * 3 + space between cols + padding */
	 width: calc((((100% - 80px * 3 - 20px * 8) / 4) * 3) + 80px * 2 + 20px * 4);
	 padding:20px;
}
.grid--4col .grid__item:nth-child(4n+4){
	 float:right;
	 margin-right:0px;
}
/* -----------------------------------------------------  */
/* ELEMENT grid__item BASED ON BLOCK MODIFIER grid--5col  */
.grid--5col .grid__item{
	 float:left;
	 margin-right:80px;
	 margin-bottom:80px;
	          /* full width - space between cols * nr of inner spaces / number of cols */
	 width: calc((100% - 80px * 4) / 5);
}
.grid--5col .grid__item.grid__item--padding{
	         /* full width - space between cols * nr of inner spaces - padding * nr of paddings / number of cols */
	 width: calc((100% - 80px * 4 - 20px * 10) / 5);
	 padding:20px;
 }
 .grid--5col .grid__item--x2{
	          /*(      one grid item    ) * 2 + space between cols */
	 width: calc((((100% - 80px * 4) / 5) * 2) + 80px);
}
 .grid--5col .grid__item--x2.grid__item--padding{
	
	         /*   (    one grid item with padding  ) * 2 + space between cols + padding */
	 width: calc((((100% - 80px * 4 - 20px * 10) / 5) * 2) + 80px + 20px * 2);
	 padding:20px;
}
 .grid--5col .grid__item--x3{
	          /*(      one grid item    ) * 3 + space between cols */
	 width: calc((((100% - 80px * 4) / 5) * 3) + 80px * 2);
}
 .grid--5col .grid__item--x3.grid__item--padding{
	
	         /*   (    one grid item with padding  ) * 3 + space between cols + padding */
	 width: calc((((100% - 80px * 4 - 20px * 10) / 5) * 3) + 80px * 2 + 20px * 4);
	 padding:20px;
}
 .grid--5col .grid__item--x4{
	          /*(      one grid item    ) * 4 + space between cols */
	 width: calc((((100% - 80px * 4) / 5) * 4) + 80px * 3);
}
 .grid--5col .grid__item--x4.grid__item--padding{
	
	         /*   (    one grid item with padding  ) * 4 + space between cols + padding */
	 width: calc((((100% - 80px * 4 - 20px * 10) / 5) * 4) + 80px * 3 + 20px * 6);
	 padding:20px;
}
.grid--5col .grid__item:nth-child(5n+5){
	 float:right;
	 margin-right:0px;
}
/* -----------------------------------------------------  */
/* ELEMENT grid__item BASED ON BLOCK MODIFIER grid--6col  */
.grid--6col .grid__item{
	 float:left;
	 margin-right:80px;
	 margin-bottom:80px;
	          /* full width - space between cols * nr of inner spaces / number of cols */
	 width: calc((100% - 80px * 5) / 6);
}
.grid--6col .grid__item.grid__item--padding{
	         /* full width - space between cols * nr of inner spaces - padding * nr of paddings / number of cols */
	 width: calc((100% - 80px * 5 - 20px * 12) / 6);
	 padding:20px;
 }
 .grid--6col .grid__item--x2{
	          /*(      one grid item    ) * 2 + space between cols */
	 width: calc((((100% - 80px * 5) / 6) * 2) + 80px);
}
 .grid--6col .grid__item--x2.grid__item--padding{
	
	         /*   (    one grid item with padding  ) * 2 + space between cols + padding */
	 width: calc((((100% - 80px * 5 - 20px * 12) / 6) * 2) + 80px + 20px * 2);
	 padding:20px;
}
 .grid--6col .grid__item--x3{
	          /*(      one grid item    ) * 3 + space between cols */
	 width: calc((((100% - 80px * 5) / 6) * 3) + 80px * 2);
}
 .grid--6col .grid__item--x3.grid__item--padding{
	
	         /*   (    one grid item with padding  ) * 3 + space between cols + padding */
	 width: calc((((100% - 80px * 5 - 20px * 12) / 6) * 3) + 80px * 2 + 20px * 4);
	 padding:20px;
}
 .grid--6col .grid__item--x4{
	          /*(      one grid item    ) * 4 + space between cols */
	 width: calc((((100% - 80px * 5) / 6) * 4) + 80px * 3);
}
 .grid--6col .grid__item--x4.grid__item--padding{
	
	         /*   (    one grid item with padding  ) * 4 + space between cols + padding */
	 width: calc((((100% - 80px * 5 - 20px * 12) / 6) * 4) + 80px * 3 + 20px * 6);
	 padding:20px;
}
 .grid--6col .grid__item--x5{
	          /*(      one grid item    ) * 5 + space between cols */
	 width: calc((((100% - 80px * 5) / 6) * 5) + 80px * 4);
}
 .grid--6col .grid__item--x5.grid__item--padding{
	
	         /*   (    one grid item with padding  ) * 5 + space between cols + padding */
	 width: calc((((100% - 80px * 5 - 20px * 12) / 6) * 5) + 80px * 4 + 20px * 8);
	 padding:20px;
}
.grid--6col .grid__item:nth-child(6n+6){
	 float:right;
	 margin-right:0px;
}

/* 5.1 GRID ELEMENTS   */
/*===============================================*/
 
 /* ELEMENT  grid__title  */
/* --------------------  */
.grid__title{
	font-size:24px;
	font-weight:400;
	padding:0 0 20px 0;
	margin:0px;
}
.grid__title span{
	font-weight:700;
}

/* ELEMENT  grid__text  */
/* --------------------  */
.grid__text {
	padding-bottom:20px;
	line-height:26px;
}
.grid__text span{
	font-weight:700;
}

/* ELEMENT  grid__more  */
/* --------------------  */
.grid__more{
	font-weight:400;
	font-size:14px;
	padding:0 0 0 0;
	display:inline-block;
}

/* ELEMENT grid__list  */
/* --------------------  */
.grid__list{
	list-style:none;
	padding:0px;
	margin:0px;
}
.grid__list li{
	list-style:none;
	padding:5px 0;
	margin:0px;
	line-height:22px;
}

 /* ELEMENT grid__image  */
 /* --------------------  */
.grid__image{
	width:100%;
}
.grid__image img{
	display:block;
	max-width:100%;
}
.grid__image--right img{
	float:right;
}
.grid__image--left img{
	float:left;
}




/*===============================================*/
/* DEMOS		 */
/*===============================================*/
.section--demos{
	background-color: #f7f8f9;
}
.grid--demos .grid__item{
	margin-bottom:80px; 
}
.grid--demos .grid__item--single{
	float:left !important; 
}
.grid__item--new{
	position:relative;
}
.new__badge-bg{
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 100px 100px 0;
	border-color: transparent #33ffbd transparent transparent;
	position:absolute;
	top:144px;
	right:0;
	z-index:333;
}
.new__badge-text{
	position:absolute;
	top:172px;
	right:0;
	z-index:444;
	color:#111935;
	font-size:16px;
	-webkit-transform: rotate(45deg); 
	-moz-transform: rotate(45deg);	
}
.grid__next{
	width:90%;
	display:block;
	padding:100px 5%;
	font-size:32px;
	color:#0e0325;
	text-align:center;
	letter-spacing:-2px;
}
.grid__next strong{
	font-weight:700;
	font-size:68px;
	display:block;
	padding-bottom:20px;
}
.grid--demos .grid__title span{
	color:#fff;
	font-weight:300;
	font-size:124px;
	position:relative;
	z-index:111;
	bottom:-60px;
	left:-20px;
}
.grid__thumb{
	width:100%;
	height:500px;
	display:block;
	position:relative;
	z-index:222;
	background-repeat: no-repeat;
	background-size: 100% auto;
	background-position-y: 0;
	overflow:hidden;
	-webkit-transition: all 7s ease-out;
	-moz-transition: all 7s ease-out;
	-o-transition: all 7s ease-out;
	transition: all 7s ease-out;
	 box-shadow: 0 0 2px 0px rgba(0,0,0,0.05);
	-moz-box-shadow: 0 0 20px 0px rgba(0,0,0,0.05);
	-webkit-box-shadow: 0 0 20px 0px rgba(0,0,0,0.05);
	text-align:center;
}
.grid__thumb:hover{
	background-position-y: 100%;
}
.grid--demos .grid__more{
	margin:10% auto 0 auto;
	color:#111935;
	background-color:#33ffbd;
	border:2px #33ffbd solid;
	padding:14px 50px;
	-webkit-border-radius: 25px;
	-moz-border-radius: 25px;
	border-radius: 25px;
	opacity:0;
	-webkit-transition:all 0.6s 0.12s;
	-moz-transition: all 0.6s 0.12s;
	transition: all 0.6s 0.12s;
}
.grid__thumb:hover .grid__more{
	opacity:.6;
	margin:50% auto 0 auto;
}
.section__quote{
	width:100%;
	text-align:center;
	background-color:#fcfcfc;
	padding:80px 0;
	margin:80px 0 40px 0;
	clear:both;
	float:left;
}
.quote__title{
	font-size:40px;
	font-weight:300;
	padding:0 0 20px 0;
}
.quote__description{
	font-size:18px;
	color:#4d3ee1;
	font-weight:700;
}
.quote__buttons{
	width:100%;
	padding:80px 0 0 0;
	text-align:center;
}
.quote__buttons .btn--green-bg:hover{
	color:#000;
}







/*===============================================*/
/* 9. MEDIA QUERIES   			 */
/*===============================================*/
/*===============================================*/
/* Small desktop and laptops 1400 px		 */
/*===============================================*/
@media screen and (max-width: 1400px) {

.header__content--fluid-width, .section__content--fluid-width, .footer__content--fluid-width{
	width:90%;
	padding-left:5%;
	padding-right:5%;
}
.intro{
	padding:15% 0 0 0;
}

}

/*===============================================*/
/* Smaller than fixed width 1240 px		 */
/*===============================================*/
@media screen and (max-width: 1240px) {
.header__content--fix-width, .section__content--fix-width, .footer__content--fix-width{
	width:92%;
	padding-left:4%;
	padding-right:4%;
}


}

/*===============================================*/
/* Mobile and portrait Tablets max 800 px */
/*===============================================*/
@media screen and (max-width: 800px) {


/*       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%; 
}
.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:20px;
	line-height:22px;
}
.grid--features .grid__item{
	 margin-right:0px;
	 margin-bottom:0px; 
	 width: calc(100% - 60px * 2 );
	 padding:60px;
}
.grid--support .grid__item.grid__item--padding{
	 width: calc(100% - 30px * 2 );
	 padding:30px;
}
.grid__thumb{
	height:300px;
}

}