@charset "utf-8";
/* CSS Document */

@media (min-width: 769px) {
	.full-grid {
		width: 100%;
	}
	.full-row {
		clear: both;
		width: 100%;
	}
	.full-row:before, .full-row:after {
		content: "";
		display: block;
		clear: both;
	}
	.vistaweb-grid {
		margin: 0 auto;
		max-width: 1200px;
		padding: 0 24px;
	}
	.vistaweb-row {
		clear: both;
		width: 100%;
	}
	.vistaweb-row:before, .vistaweb-row:after {
		content: "";
		display: block;
		clear: both;
	}
	.padding {
		padding: 48px 0;
	}
	.padding-extended {
		padding: 80px 0;
	}
	.padding-top {
		padding-top: 48px;
	}
	.margin-bottom {
		margin-bottom: 48px;
	}
	.col1, .col2, .col3, .col4, .col5, .col6, .col7, .col8, .col9, .col10, .col11, .col12 {
		float: left;
		margin: 0 3% 0 0;
	}
	.col1.last, .col2.last, .col3.last, .col4.last, .col5.last, .col6.last, .col7.last, .col8.last, .col9.last, .col10.last, .col11.last, .col12 {
		margin: 0;
	}
	.col1 { width: 5.5%; }
	.col2 { width: 14%; }
	.col3 { width: 22.5%; }
	.col4 { width: 31%; }
	.col5 { width: 39.5%; }
	.col6 { width: 48%; }
	.col7 { width: 56.5%; }
	.col8 { width: 65%; }
	.col9 { width: 73.5%; }
	.col10 { width: 82%; }
	.col11 { width: 90.5%; }
	.col12 { width: 100%; margin: 0; }
	
	/* RESPONSIVE MENU */
	div#responsive-menu {
		display: none;
	}
}

@media (max-width: 768px) {
	
	/* RESIZE ALL TEXT */
	body {
		font-size: 90%;
	}
	p {
		font-weight: 300;
	}
	
	/* RESIZE ALL LARGE IMAGES */
	img {
		display: block;
		max-width: 100%;
		margin-left: auto;
		margin-right: auto;
	}
	
	/* ADJUST THE GRID SIZES AND POSITIONING */
	.full-60, .full-40 {
		width: 100%;
	}
	.full-60 {
		float: left;
		height: 300px !important;
	}
	.full-40 {
		float: right;
		padding: 40px 7%;
	}
	.vistaweb-grid {
		width: 86%;
		margin: 0 auto;
	}
	.vistaweb-row {
		clear: both;
		width: 100%;
	}
	.vistaweb-row:before, .vistaweb-row:after {
		content: "";
		display: block;
		clear: both;
	}
	.col1, .col2, .col3, .col4, .col5, .col6, .col7, .col8, .col9, .col10, .col11, .col12 {
		clear: both;
		width: 100%;
		margin: 0 0 24px 0;
	}
	.col12:first-of-type {
		margin: 0;
	}
	.padding {
		padding: 24px 0;
	}
	.padding-extended {
		padding: 48px 0;
	}
	
	/* PAGE TITLES */
	div.verticalcenter {
		height: 360px;
	}
	.icon-large {
		height: 200px;
	}
	div.vistaweb-title h1 {
		font-size: 300%;
		font-weight: 100;
		letter-spacing: -1pt;
		padding: 24px 0 !important;
	}

	/* HOME */
	div#dynamic-home h1 {
		font-size: 240%;
		letter-spacing: -1pt;
	}
	div#dynamic-home h1 span {
		font-size: 400%;
		letter-spacing: -7pt;
	}
	
	/* RESPONSIVE MENU */
	div#vistaweb-menu {
		float: none;
		clear: both;
		padding: 14px 0;
		display: none;
	}
	nav#vistaweb-responsive ul {
		width: 100%;
	}
	nav#vistaweb-responsive ul li {
		display: block;
		margin: 0;
		padding: 0;
		font-size: 140%;
		font-weight: 100;
	}
	nav#vistaweb-responsive ul li a {
		display: block;
		padding: 10px 0;
		width: 100%;
	}
	.active {
		display: block !important;
	}
	.menu-bgcolor {
		background-color: #111111;
	}
	
	/* PORTFOLIO */
	div.dynamic-portfolio
	{
		background-size: auto !important;
	}
	ul.color-palette li {
		margin-right: 24px;
	}
	div.dot {
		width: 40px;
		height: 40px;
		margin: 14px auto;
	}
}

@media (max-width: 540px) {
	/* a bespoke measurement for homepage title */
		div#dynamic-home h1 span {
			font-size: 240%;
			letter-spacing: -5pt;
		}
}

@media (max-width: 320px) {
	
	
	
	/* PAGE TITLES */
	div.verticalcenter {
		height: 160px;
	}
	.icon-large {
		height: 100px;
	}
	div.vistaweb-title h1 {
		font-size: 200%;	
	}
	
	/* PORTFOLIO */
	div.dynamic-portfolio h1 {
		margin-top: 40px;
	}
	
	/* FOOTER */
	div#vistaweb-footer-menu ul li {
		display: block;
		margin: 0;
	}
	div#vistaweb-footer-menu ul li a {
		display: block;
		width: 100%;
		border-bottom: 1px solid #DDDDDD;
		padding: 10px 0;
	}
	div#vistaweb-footer-menu ul li:first-of-type a {
		border-top: 1px solid #DDDDDD;
	}
	
}