body {
				background-color: #54556E;
				margin: 0;
				padding: 0;
				text-align: center;
				font-family: 'Roboto', Arial, Sans-Serif; 
				font-weight: 300;
				color: #fff;
			}

			h1, h2, h3 {
				margin: 0;
				padding: 0;
				font-weight: normal;
				font-family: 'Roboto', Arial, Sans-Serif; 
				font-weight: 300;
			}
			
			
			a {
				text-decoration: none;	
				border: 0;	
				color: #3f93e9;		
				outline: 0;	
			}
			
			.landing a {
				color: #fff;
			}
			
			a:hover {
				text-decoration: underline;
			}
			
			p, .text-description {
				line-height: 1.6;				
			}
			
			
			img {
				vertical-align: bottom;
				border: 0;
			}
			
			.clearfix {
				clear: both;
			}
			
			header {
				height: 60px;
				width: 100%;
				background-color: #262a31;
				position: fixed;
				top: 0;			
				color: #fff;
				text-transform: uppercase;	
				z-index: 1000;
			}
			
			footer {
				width: 65%;
				max-width: 960px;
				margin: 0 auto 30px auto;
				color: #fff;
				font-size: 14px;
			}
			
			.header_title img {
				float: left;
				font-size: 32px;
				line-height: 60px;
				height: 44px;
				margin-top: 5px;
				margin-left: 20px;
			}
			
			.header_title, .header_title:hover {
				text-decoration: none;
				color: #fff;
			}
						
			
			.header_subtitle {
				float: left;
				font-size: 22px;
				margin: 23px 0 0 16px;			
				
			}
			
			nav {
				float: right;
				margin-top: 19px;
				margin-right: 15px;
			}
			
			nav a {
				color: #fff;
				font-size: 18px;
				margin-left: 0;
				padding: 10px 15px 10px 15px;
				transition: 200ms background-color ease-in-out;	
				-moz-border-radius: 10px;
				border-radius: 10px;	
			}
			
			nav a:hover {
				background-color: #42e998;
				text-decoration: none;		
			}			
			
			.header_centered, .body-centered {				
				width: 960px;
				margin: 0 auto;
				text-align: left;
			}
			
			.intro-pane-overlay {
				background-color: #000;
				width: 100%;
				height: 100%;
				opacity: 0.5;
			}
			
			.intro-pane {
				margin-top: 60px;
				width: 100%;
				min-width: 960px;
				background-color: #fff;
			}														
			
			.intro-pane_centered {
				width: 960px;
				margin: 0 auto;
				text-align: left;	
				position: relative;	
				overflow: hidden;	
			}
			
			.intro-pane_image {
				position: absolute;
				bottom: 0px;
				right: 20px;
			}
			
			.intro-pane_text-section {
				width: 960px;
			}
			
			.intro-text1 {
				font-size: 36px;
				line-height: 1.0;
				color: #fff;
				text-align: left;	
				text-transform: uppercase;		
			}
			
			.intro-text2 {
				margin-top: 7px;
				font-size: 30px;
				color: #fff;	
				text-align: right;				
			}			
			
			.intro-text3 {
				margin-top: 32px;
				font-size: 30px;
				color: #fff;	
				text-align: right;				
			}			

			
			.body-section {
				width: 840px;
				background-color: #fff;
				border: 7px solid #201c1b;
				-moz-border-radius: 10px;
				border-radius: 10px;
				float: left;
				margin-bottom: 50px;
			}
			
			.portfolio-section {
				min-height: 400px;
			}

			
			.list-first {
				padding: 27px 29px 27px 29px;
				background: none;
			}
			
			.list-item_image {
				position: relative;
				width: 380px;
				height: 266px;
				padding: 9px;
				margin-right: 32px;
				border: 2px solid #d2cdcb;
				-moz-border-radius: 3px;
				border-radius: 3px;
				float: left;	
				cursor: pointer;
				color: #ece3e1;
			}			

			
			.list-item_text {
				width: 338px;
				float: left;
				padding: 3px 0 7px 0;
			}
			
			.text-label {
				font-size: 20px;
				font-weight: 500;
			}
			
			.text-label__modal {
				margin-bottom: 6px;
			}
			
			.text-bigtype {
				font-size: 34px;
				margin-bottom: 18px;
				line-height: 1.1;
			}
			
			.text-bigtype2 {
				font-size: 24px;
				margin-bottom: 18px;
				line-height: 1.1;
			}			
			
			.body-section_title {
				width: 41px;
				margin-top: 0;
				margin-right: 29px;	
				margin-left: 20px;
				float: left;
				overflow-x: hidden;	
			}
						
			
			.title-rotated {
				font-size: 48px;	
				text-transform: uppercase;
				/* Safari */
				-webkit-transform: rotate(-90deg);
				/* Firefox */
				-moz-transform: rotate(-90deg);
				/* IE */
				-ms-transform: rotate(-90deg);
				/* Opera */
				-o-transform: rotate(-90deg);				
			}
			
			.title-portfolio {						
				margin-top: 167px;			
			}
			
			.title-about {						
				margin-top: 87px;			
			}
			
			.title-contact {						
				margin-top: 138px;			
			}
			
			.contact-container {
				padding-top: 26px;
				background-color: #3E3F5B;
			}
			
			.title-portfolio-icon {
				margin-left: 0;
				margin-bottom: 8px;
			}
			
			.button {				
				padding: 12px 40px;				
				background-color: transparent;
				color: #fff;
				font-size: 24px;
				-moz-border-radius: 10px;
				border-radius: 10px;
				display: inline-block;
				margin-top: 13px;
				cursor: pointer;
			}
			
			.button:hover {
				text-decoration: none;				
				background-color: #fff;
				color: #1f1f1f;
			}
			
			.button-text-link {
				margin-top: 18px;
				display: block;
			}
			
			.text-col1 {
				float: left;
				width: 499px;
				margin: 27px 38px 34px 29px;			
			}
			
			.text-col2 {
				float: left;
				width: 220px;	
				margin: 27px 0;		
			}	

			.side-image {
				width: 202px;
				height: 266px;
				padding: 9px;
				margin-right: 32px;
				border: 2px solid #d2cdcb;
				-moz-border-radius: 3px;
				border-radius: 3px;
			}		
			
			.text-title {
				font-size: 34px;
				line-height: 1;
				font-family:  'Raleway', Arial, Sans-Serif; 
				font-weight: 300;
			}	
			
			.text-big-inline {
				margin-top: -6px;
			}
			
			.text-title {
				margin-bottom: 24px;
			}

			
			.red {
				color: #c82615;
			}
			
			#dialog {
				display: none;
			}
			
			.dialog_col1 {
				width: 449px;
				margin-top: 5px;
				margin-bottom: 7px;
				margin-right: 43px;
				float: left;				
			}
			
			.dialog_col2 {
				width: 250px;
				margin-top: 5px;
				margin-bottom: 7px;				
				float: left;				
			}	
			

				
			.dialog-image {
				width: 720px;
				margin: 10px 0 10px 0px;
				padding: 9px;
				border: 2px solid #d2cdcb;
				-moz-border-radius: 3px;
				border-radius: 3px;				
			}
			
			.dialog-thumbs {
				margin-top: 10px;
				margin-bottom: 8px;
			}
			
			
			.dialog-thumb-list-container {
				float: right;				
			}		
			
			.modal-thumbs {
				float: left;
			}
			
			.dialog-btm-description {
				margin: 0px 0px 0px 0px;
			}

			
			.dialog-small-thumbs-title {
				float: left;
				width: 240px;				
				white-space:nowrap;
			}

			.thumb-highlighted, .dialog-small-thumbs:hover {
				border: 2px solid #c82615;
			}
			

			
			.dialog-arrow-right, .dialog-arrow-left {
				width: 26px;
				height: 26px;
				margin-top: 4px;		
				display: block;
				float: left;
				-moz-border-radius: 15px;
				border-radius: 15px;	
				background-color: #c82615;						
			}
			
			.dialog-arrow-right:hover, .dialog-arrow-left:hover {
				background-color: #b81100;						
			}
						
			
			.modal-overlay {
				position: fixed;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				background-color:rgba(14, 14, 14, 0.6);	
				z-index: 20;	
				display: none;	
			}
			
			.modal-container {				
				-moz-border-radius: 10px;
				border-radius: 10px;	
				width: 800px;
				background-color: #fff; 
				position: absolute;
				top: 58px;
				left: 50%;
				margin-left: -400px;
				overflow: hidden;	
				z-index: 30;		
				display: none;	
			}
			
			.modal-title-bar {
				background-color: #c82615;
				text-align: left;				
				padding: 8px 24px 6px 29px;		
				border-top-left-radius: 8px;
				border-top-right-radius: 8px;
				-moz-border-top-left-radius: 8px;
				-moz-border-top-right-radius: 8px;	
							
			}

			.modal-close-btn:hover {
				background-color: #b81100;
			}
			
			.modal-content {			
				padding: 12px 29px 29px 29px;
				text-align: left;
				min-height: 200px;
				
			}
			
			
			.modal-image {
				position: relative;
				width: 720px;
				padding: 9px;
				border: 2px solid #d2cdcb;
				-moz-border-radius: 3px;
				border-radius: 3px;
				cursor: pointer;
				color: #ece3e1;
			}
			
			.modal-image img {
				width: 720px;
			}
			
			
			.modal-overlay-crop {
				position: absolute;
				width: 720px;
				height: 266px;				
				bottom: 9px;
				left: 9px;	
				overflow: hidden;					
			}
			
			.modal-image-overlay {
				position: absolute;
				bottom: -130px;
				left: 0;
				width: 679px;				
				background-color:rgba(14, 14, 14, 0.8);
				color: #fff;
				padding: 15px 22px 19px 22px;
			}			
			
			.overlay-label {
				color: #fff;
			}

			.summary {
				min-height: 48px;
			}
			
			.mobile-description {
				margin-top: 15px;
				margin-bottom: 25px;
				width: 100%;
			}
			
			
/* banner styles */

.banner-container {
	position: relative;
	width: 100%;
	overflow: hidden;
	display: block;
}

.banner-button {
	background-color: #D55161;
	color: #fff;
	margin-top: 50px;
}

.landing .banner-button:hover {
	background-color: #c54151;
	color: #fff;
}

.banner-text {
	text-align: center;
	padding: 20px 20px;
	margin: 0 auto;
}

.banner-top .banner-text {
	padding: 70px 20px;
}

.banner-base {
	padding-top: 40px;
	padding-bottom: 40px;
}

.banner-logo {
	margin-bottom: 20px;
	width: 456px;
	max-width: 500px;
	margin-top: 62px;
}

.banner-title {
	font-size: 32px;
	margin-bottom: 20px;
	line-height: 1.2;
	margin: 8px auto 18px auto;
}

.banner-summary {
	font-size: 18px;
	text-decoration: none;
	margin: 8px auto 15px auto;
	line-height: 1.6;
	opacity: 0.7;
}

.banner-summary-top {
	font-size: 22px;
	color: #fff;
	opacity: 0.7;
}

a.banner-container:hover {
	text-decoration: none;
}

.banner-container__overlay {
	width: 100%;
	height: 100%;
	background-color:rgba(0, 0, 0, 0.4);
	position: absolute;
	top: 0;
	left: 0;
	display: none;	
	z-index: 1;
}

.banner-container__device {
	position: absolute;
	bottom: 0;
	z-index: 2;
	transition: all 0.4s ease-in-out 0s;
}

.banner-container__bg {
	width: 100%;
	z-index: 0;
	-webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    -ms-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
}

.banner-container:hover .banner-container__bg {
	opacity: 0.5;
}	

.banner-container:active .banner-container__bg {
	opacity: 0.7;	
}	

.portfolio-container {
	margin-top: 0;
}

.detailed-container {
	background-color: #fff;
	padding-top: 40px;
}

.detailed-content {
	margin: 0 auto;
	text-align: left;
	padding-bottom: 60px;
	max-width: 960px;
}

.detailed-content .text-label {
	line-height: 1.2;
}

.detailed-image-description {
	padding-top: 0;
}

.banner-container__bg-detailed {
	position: absolute;
	left: 0;
	top: 0;
	z-index: -1;
	opacity: 0.5;
	width: 100%;
}

.banner-container {
	display: flex;	
	justify-content: center;
}

.banner-top {
	background-color: #3e3f5b;
}

.banner-subtop {
	background-color: #54556E;
}

.banner-subtop .banner-text {
	color: #fff;
}

.body-centered-container{
	width: 100%;
	text-align: center;
}

.about-container {
	background-color: #181818;
}

.text-section {
	margin: 0 auto;
	text-align: left;
	width: 786px;
	color: #fff;
}

.text-title-banner {
	font-size: 34px;
	line-height: 1;
	font-family:  'Raleway', Arial, Sans-Serif; 
	font-weight: 300;
	margin-bottom: 24px;
	text-transform: uppercase;
}

.about-photo {
	margin-bottom: 20px;
	max-width: 300px;
}

.text-col1-banner {
	float: left;
	margin: 60px 10% 60px 0;
	width: 60%;			
}

.text-col2-banner {
	float: left;
	width: 30%;	
	margin: 60px 0 0;		
}	

.text-col2-banner img {
	width: 100%;
	max-width: 220px;
	margin-bottom: 60px;	
}

.text-section-banner {
	margin: 0 auto;
	text-align: left;
	max-width: 960px;
	color: #fff;
	text-align: center;
	padding: 40px 0;
}

.about-details {
	max-width: 500px; 
	margin: 0 auto;
	margin-bottom: 15px;
	font-size: 18px;
	line-height: 1.6;
}

.contact-col1-banner {
	width: 100%;
	margin-right: 0;
	margin-bottom: 20px;
}

.contact-cols-banner {
	margin-bottom: 15px;
}

.contact-cols-banner p {
	margin-top: 0;
}

.text-big-inline-banner {
	font-size: 18px;
	font-weight: 300;
}

.text-big-inline-banner a,
.text-big-inline-banner a:hover
{
	color: #fff;
}

.button-banner {
	margin-top: 20px;
}

.about-img-flow {
	display: none;
}

.detailed-project-description {
	padding-top: 18px;
	padding-bottom: 32px;
	border-bottom: 1px solid #ccc;
}

.banner-label {
	font-size: 30px;
	font-weight: 500;
	margin-top: 6px;
	margin-bottom: 3px;
}

.banner-label-small {
	font-size: 20px;
	font-weight: 500;
	margin-bottom: 6px;
	margin-top: 15px;
}

.banner-descripton {
}

/* grid columns */

.col2 {
	width: 65.5556%;
	margin-right: 3.3333%;
	float: left;
}

.col1 {
	width: 31.1111%;
	margin-right: 3.3333%;
	float: left;
}

.col50 {
	width: 47.4577%;
	margin-right: 5.0847%;
	float: left;
}

.col33 {
	width: 29.9435%;
	margin-right: 5.0847%;
	float: left;	
}

.col100 {
	width: 100%;
}

.col-btm {
	margin-bottom: 30px;
}

.lastcol {
	margin-right: 0;
}

.header-title-wide {
	display: inline-block;
}

.header-title-narrow {
	display: none;
}

nav a {
	padding: 12px 15px;
}


.nav_about {
	padding-left: 40px;
	background: url("portfolio-icon3.png") no-repeat scroll transparent;
	background-position: 13px 9px;
	background-size: 54% auto;
}	

.nav_contact {
	padding-left: 40px;
	margin-left: 1px;
	background: url("contact-icon3.png") no-repeat scroll transparent;
	background-position: 13px 9px;
	background-size: 54% auto;
}

.banner-cols {
	display: flex;
	width: 1100px;
}

.banner-ducks {
	width: 500px;
}

.banner-ducks img {
	width: 100%;
}

.duck-list {
	padding: 0;
	margin: 0;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
}

.duck-list li {
	width: 200px;
	margin: 10px;
}

.duck-list a {
	color: #fff;
}

.duck-list a:hover {
	color: #D55161;
	text-decoration: none;
}

.duck-list a:hover .duck-img {	
	border: 4px solid #D55161;
}

.duck-list a:hover .duck-price {	
	opacity: 1;
}

.duck-btn {
	
}

.duck-title {
	font-size: 22px;	
	margin-top: 8px;
	margin-bottom: 4px;    
}

.duck-price {
	opacity: 0.6;
	font-size: 16px;    
}

.duck-img {	
	border-radius: 10px;
	overflow: hidden;
	border: 4px solid transparent;
}

.duck-list img {
	width: 100%;
}




@media only screen and (max-width: 1120px) {
	.banner-cols {
		width: 100%;
	}
	
	.duck-list li {
		width: 21%;
		margin: 2%;
	}
	
	.banner-logo {
		width: 100%;
	}
}


@media only screen and (max-width: 800px) {
    	
    html, body { 
    	width: 100%;  
    	overflow-x: hidden; 
    }

	.list-item_text {
		float: none;
		margin-top: 15px;
		width: 100%;
	}
	
	.text-col2 {
		display: none;
	}
	
	.body-section {
		width: 90%;
		margin: 0 5% 15px 5% !important;
	    -webkit-box-sizing: border-box;
	    -moz-box-sizing: border-box;
	    box-sizing: border-box;		
	}
	
	.intro-pane {
		min-width: 90%;
		margin-top: 58px;
		padding-bottom: 0;
		/* temp  display: none; */
	}
	
	.text-col1 {
		width: 90%;
		margin: 5%;
	}
	
	footer {
		width: 90%;
		margin-left: 5%;
		margin-right: 5%;
		padding: 0;
		color: #fff;
	}
		
	.intro-pane_centered {
		width: 100%;
	}
		
	header {
		height: 58px;
	}
	
	nav {
		/* temp  display: none;		*/
		margin-right: calc(5% - 12px);
		margin-top: 18px;
	}
	
	.nav-text {
		display: none;
	}
	
	.header_title img {
		height: 36px;
		margin-left: 5%;
		margin-top: 9px;
	}
	
	.header_subtitle {
		display: none;
	}
	
	.header_centered, .body-centered {
		width: 100%;
	}	

	
	.title-portfolio, .title-about, .title-contact {
		margin: 0;		
	}
	
	.title-portfolio-icon, .title-about-icon, .title-contact-icon {
		float: left;
	}
	
	.portfolio-section-title {
		margin-top: 0;
		position: static;
	}
	
	.portfolio-section {
		/* margin-top: 80px !important; */
	}
		
	.title-rotated {		
		float: left;		
		font-size: 36px;
		margin-left: 10px;
		transform: none;
		-webkit-transform: none;
		/* Firefox */
		-moz-transform: none;
		/* IE */
		-ms-transform: none;
		/* Opera */
		-o-transform: none;	
	}
	
	.title-portfolio-icon {
		margin-top: 8px;
	}
	
	.body-section_title {
		float: none;
		clear: both;
		width: 82%;
		margin: 5px 5%;
		/* temp  display: none;	 */
	}
	
	.body-section .text-bigtype {
		font-size: 30px;
	}
	
	.list-item {
		padding: 7% 5% 4%; 
	}
	
	.list-first {
		padding: 4% 5%;
	}
	
	.list-item_image {
		float: none;
		width: 100%;
		height: auto;
		padding: 2%;
		margin: 0;
		overflow: hidden;
	    -webkit-box-sizing: border-box;
	    -moz-box-sizing: border-box;
	    box-sizing: border-box;
		
	}
	
	.list-item_image-overlay {
		display: none;
	}
	
	.list-item_overlay-crop {
		width: 100%;
		left: 0;
		top: 0;
		position: relative;
	}		
	
	.list-item_overlay-crop img {
		width: 100%;
		min-width: 380px;
	}
	
	.intro-text1 {
		font-size: 36px;		
		text-align: left;
	}
	
	.intro-text2 {
		font-size: 20px;
		line-height: 24px;	
		text-align: left;
	}
	
	.intro-text3 {
		font-size: 20px;	
		margin-top: 22px;	
		text-align: left;
	}
	
	.intro-pane_text-section {
		width: 65%;
		top: 14px;
		position: relative;
		left: auto;		
		margin: 0 30% 0 5%;
	}
	
	.intro-pane_image {
		bottom: -26px;
		left: auto;
		right: -105px;
	}
	
	.intro-pane_image img {
		height: 306px;
	}
	
	
	.modal-container {
		left: 0 !important;
		top: 0 !important;
		width: 100%;
		border-radius: 0;
	}

	.modal-title-bar {
		border-radius: 0;
		min-height: 26px;
		padding: 16px 4% 16px 5%;
	}

	
	.dialog_col1 {
		float: none;
		width: 100%;
		margin-right: 0;
	}

	.dialog_col2 {
		float: none;
		width: 100%;
	}
	
	.modal-image {
		width: 100%;
		padding: 2%;
	    -webkit-box-sizing: border-box;
	    -moz-box-sizing: border-box;
	    box-sizing: border-box;
	}
	
	.modal-overlay-crop {
		bottom: 2%;
		left: 2%;
		width: 96%;
	}
	
	.modal-full-image {
		min-height: 100px;
	}
	
	.modal-full-image img {
		width: 100%;
	}

	
	.modal-image-overlay {
		width: 92%;
		padding: 3% 4% 4%;
	}
	
	.dialog-thumbs {
		margin-top: 25px;
	}
	
	.dialog-small-thumbs-title {
		display: none;
	}
	
	.dialog-small-thumbs {
		margin-bottom: 5px;
	}
	
	.dialog-thumb-list-container {
		float: none;
	}
	
	.modal-thumbs {
		max-width: 75%;
	}
	
	.modal-image-overlay {
		display: none;
	}
	
	.mobile-description {
		margin-top: 15px;
		margin-bottom: 0;
	}
	
	.modal-content {
		padding: 3% 5% 5%;
	}
		
	.text-section-banner {
		width: 90%;
		margin-left: 5%;
		margin-right: 5%;
	}
	
	.about-img-flow {
		display: block;
		float: right;
		margin: 0 0 5% 5%;
		width: 45%;
		max-width: 183px;
	}
	
	.text-col1-banner {
		width: 100%;
	}
	
	.text-col2-banner {
		display: none;
	}
	
	.banner-container__bg {		
		position: static;
		left: auto;
		z-index: auto;
	}	
	
	.banner-container {
    	height: auto;
   }
	
	.banner-container__device {
	position: absolute;
	bottom: -11px;
	z-index: 2;
	transition: all 0.4s ease-in-out 0s;
	}
	
	.intro-pane_text-section,	
	.detailed-content {
		width: 90%;
		margin-left: 5%;
		margin-right: 5%;
		padding-bottom: 28px;
	}
	
	.col2 {
		float: none;
		width: 100%;
	}
	
	.detailed-project-description {
		padding-bottom: 34px;
		padding-top: 0;
	}
	
	.col1.detailed-image-description {
		float: none;
		margin-top: 20px;
		width: 100%;
	}
	
	.detailed-project-description .col1 {
		float: none;
		margin-top: 20px;
		width: 100%;
	}
	
	.banner-label-small {
		font-size: 20px;
	}
	
	.banner-label {
		font-size: 24px;
		line-height: 1.2;
		margin-bottom: 8px;
	}
	
	.detailed-image-description {
		border-top: 0;
		padding-top: 0;
	}
	
	.text-description {
		font-size: 14px;
		margin-bottom: 25px;
	}
	
	.detailed-container {
		padding-top: 25px;
	}
	
	.col-btm {
		margin-bottom: 20px;
	}
	
	.banner-text {
		padding: 20px 20px;
	}
	
	.banner-logo {
		width: 90%;
		margin-bottom: 12px;
		margin-top: 0;
	}
	
	.banner-title {
		width: 100%;
		font-size: 24px;
	}	
	
	.banner-base {
		padding-top: 20px;
	}
	
	.banner-summary {
		width: 100%;
		font-size: 16px;
	}
	
	.banner-descripton {
		margin-bottom: 0;
	}
	
	.about-photo {
		width: 80%;
	}
	
	.about-details {
		font-size: 16px;
	}
	
	.header-title-wide {
		display: none;
	}
	
	.header-title-narrow {
		display: inline-block;
	}	
	
	.banner-summary-top {
		font-size: 18px;
	}
	
	.banner-button {
		font-size: 18px;
	}
	
	.banner-top .banner-text {
		padding: 30px 10% 5px;
	}
	
	.cols-top {
		flex-direction: column;
		justify-content: center;
	}
	
	.duck-list li {
		width: 46%;
		margin: 2%;
	}
	
	.banner-ducks {
		width: auto;
		margin: 10px 10%;
	}
	
	.duck-title {
		font-size: 18px;
	}
}