/* Grid Responsiveness
------------------------------------------------------------------------ */
/* Large desktop size */
@media only screen and (max-width: 1120px) {
	.container { max-width: 1100px; width: 100%;}
}
@media only screen and (max-width: 960px) {
	.container { max-width: 940px; width: 100%;}
}
/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
@media only screen and (min-width: 480px) and (max-width: 782px) {
	.row-fluid, .row {
		margin-left: 0%;
		margin-right: 0%;
	}
	.container { 
		width: 420px; 
	}
	.span1,
	.span2,
	.span3,
	.span4,
	.span5,
	.span6,
	.span7,
	.span8,
	.span9,
	.span10,
	.span11,
	.span12 { width: 420px; margin: 0 0 30px; padding-left: 0; padding-right: 0;}
	.span12 {
    	margin-bottom: 0;
    }

	.vc_col-sm-1, .vc_col-sm-2, .vc_col-sm-3, .vc_col-sm-4, .vc_col-sm-5, .vc_col-sm-6, .vc_col-sm-7, .vc_col-sm-8, .vc_col-sm-9, .vc_col-sm-10, .vc_col-sm-11, .vc_col-sm-12 {
		float: none !important;
		width: 100% !important;
	}
}
/* ------------------------------------------------------------------------ */
/* Mobile (Portrait)
/* ------------------------------------------------------------------------ */

/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
@media only screen and (max-width: 479px) {
  	.row-fluid, .row {
		margin-left: 0%;
		margin-right: 0%;
	}
    .container { width: 300px; }
    .span1,
    .span2,
    .span3,
    .span4,
    .span5,
    .span6,
    .span7,
    .span8,
    .span9,
    .span10,
    .span11,
    .span12,
    .one-third.column,
    .two-thirds.column { width: 300px; margin: 0 0 20px 0; padding-left: 0; padding-right: 0;}
    .span12 {
    	margin-bottom: 0;
    }
}	
/* ------------------------------------------------------------------------ */
/* Smaller than standard 1120 (devices and browsers) */
/* ------------------------------------------------------------------------ */
@media only screen and (max-width: 1120px) {

}
/* ------------------------------------------------------------------------ */
/* Tablet Portrait size to standard 960 (devices and browsers) / 1. Step */
/* ------------------------------------------------------------------------ */
@media only screen and (max-width: 1024px) {
	.title-block h2 {
	    font-size: 33px;
	    line-height: 43px;
	}
	#header {
		padding: 20px 0;
	}
	#header .ver {
		top: 32px;
	}
	#portfolio {
		padding: 50px 0;
	}
	#call-to-action {
		padding: 50px 0;
	}
	.purchase-button {
	    font-size: 14px;
	    padding: 17px 30px;
	}
}

/* ------------------------------------------------------------------------ */
/* All Mobile Sizes (devices and browser) / all under Tablet */
/* ------------------------------------------------------------------------ */
@media only screen and (max-width: 782px) {
	#header {
		padding: 15px 0;
	}
	#header .container {
		display: flex;
		align-items:center;
	}
	#header .ver {
		top: 32px;
	}
	*[data-scrolled-into-view] {
	    opacity: 1;
	    transform: translate3d(0,0px,0);
	    transition: opacity 0.7s cubic-bezier(.694,0,.335,1),transform 1.1s cubic-bezier(0.075, 0.82, 0.165, 1);
	}
	.row-flex {
		flex-direction:column;
	}
	#info-block .span6:first-child {
		order:2;
	}
	#info-block .span6:last-child {
		width: 480px;
		margin-bottom: 50px;
	}
	.title-block h2 {
	    font-size: 30px;
	    line-height: 44px;
	}
	#portfolio {
		padding: 50px 0 0;
	}
	#call-to-action {
		padding: 50px 0;
	}
	.purchase-button {
	    font-size: 14px;
	    padding: 17px 30px;
	}
	.title-block {
		text-align: center;
	}
	.fullscreen-section {
		height: auto;
	}
	#info-block {
		padding-bottom: 60px;
	}
	.container2 .row {
		display: block;
	}
	.container2 {
		max-width: 420px;
	}
	#how-to .extra-inner-bg {
		padding: 40px 30px;
	}
	#how-to {
		padding: 80px;
	}
	.button-purchase2 {
		margin-bottom: 30px;
	}

	.number-icons li br {
    	content: ' ';
	}

	.number-icons li br:before {
	    content: ' ';
	}
	.title-block br {
    	content: ' ';
	}

	.title-block br:before {
	    content: ' ';
	}
}

/* ------------------------------------------------------------------------ */
/* Mobile Portrait size (devices and browsers) */
/* ------------------------------------------------------------------------ */
@media only screen and (max-width: 480px) {
	#info-block .span6:last-child {
	    width: 300px;
	}
	.info-block.pad-top-liq {
		margin-bottom: 30px;
	}
	#header .logo img {
		max-width: 65px;
		display: inline-block !important;
	}
	#header .button.button-purchase {
		font-size: 12px;
		padding: 10px 18px;
		margin-bottom: 0;
	}
	.portfolio-item {
		margin-bottom: 35px;
	}
	.title h2, .title h3 {
		line-height: 1.2em;
	}
	#portfolio .container {
		max-width: 300px;
	}
	.container2 {
		max-width: 300px;
	}
	#how-to {
		padding: 10px;
	}

}
/* ------------------------------------------------------------------------ */
/* EOF
/* ------------------------------------------------------------------------ */