@charset "utf-8";

@font-face {
	font-family:'Gotham-Light';
	src: url('Gotham-Light_gdi.eot');
	src: url('Gotham-Light_gdi.eot?#iefix') format('embedded-opentype'),
		url('Gotham-Light_gdi.woff') format('woff'),
		url('Gotham-Light_gdi.ttf') format('truetype'),
		url('Gotham-Light_gdi.svg#Gotham-Light') format('svg');
	font-weight: 300;
	font-style: normal;
	font-stretch: normal;
	unicode-range: U+0020-2212;
}

/* COLORS
magenta: #ec268f;
red-orange: #f04c25;
dark grey: #222222;
 */

body{
	background: #f04c25;
}

.home {
	background: url(_images/stripes-k.png) no-repeat left top, url(_images/stripes-k-home.png) no-repeat 512px 378px #000000;
}

.about {
	background: url(_images/stripes-k.png) no-repeat 0 249.6px #000000;
}

.portfolio {
	background: url(_images/stripes-k.png) no-repeat left top, url(_images/stripes-portfolio-info-k.png) no-repeat 0 672px, url(_images/stripes-portfolio-nav-k.png) repeat-x 0 335px #000000;
}

.portfolio-first  {
	background: url(_images/stripes-k.png) no-repeat left top, url(_images/stripes-portfolio-info-k.png) no-repeat 0 672px, url(_images/stripes-portfolio-nav-k.png) no-repeat 512px 335px #000000;
}

.portfolio-last  {
	background: url(_images/stripes-k.png) no-repeat left top, url(_images/stripes-portfolio-info-k.png) no-repeat 0 672px, url(_images/stripes-portfolio-nav-k.png) no-repeat right 512px top 335px #000000;
}



/* Type */

h1, h3, h4, h5, h6{
	font-family: 'Gotham-Light' , sans-serif;
	color: #f04c25;
	font-style: normal;
	font-weight: 300;
}

h1 {
	font-size: 24px;
	text-transform: uppercase;
}

h2 {
	font-family: 'Gotham-Light' , sans-serif;
	color: #222222;
	font-style: normal;
	font-weight: 300;
	line-height: 1.3;
	font-size: 17px;
}

p, ul li {
	font-size: 12px;
	font-family: 'Gotham-Light', sans-serif;
	font-style: normal;
	color: #222222;
	line-height: 1.3;
}



nav {
	float: right;
	display: inline-block;
}

nav ul li {
	margin-right: 22px;
	margin-top: 34px;
}

nav ul li a {
	font-size: 12px;
	font-family: 'Gotham-Light', sans-serif;
	font-style: normal;
	color: #f04c25;
	text-transform: uppercase;
}



/* Link styles*/
a {
	color: #f04c25;
	text-decoration: none;
}

a:visited {
	color: #f04c25;
}

a:hover {
	text-decoration: underline;
}

/* Layout */

.container {
	margin: 0 auto;
	width: 100%;
	max-width: 1024px;
	min-height: 715px;
	background-color: #ffffff;
	clear: none;
	float: none;
}

#nameblock {
	width: 30%;
	height: 55px;
	background: #ec268f;
	color: #ffffff;
	margin-left: 0;
	margin-right: 8px;
	text-align: right;
	float: left;
	display: inline-block;
}

#nameblock h1 {
	color: #ffffff;
	font-style: normal;
	font-weight: 200;
	margin-right: 8px;
	margin-top: 22px;
}

#afternameblock {
	height: 55px;
	background: #ffffff;
	color: #f04c25;
	margin-left: 0;
	text-align: left;
	float: left;
	display: inline-block;
}

#afternameblock h1 {
	font-style: normal;
	font-weight: 300;
	margin-top: 22px;
}

#imageblock {
	clear: both;
	margin: 0 auto;
	padding-top: 20px;
	padding-bottom: 10px;
	min-height: 560px;
	width: 100%;
}

.thumbnails {
	position: relative;
	display: block;
	float: left;
	width: 21.875%;
	margin: 0 1.5625% 3.125% 1.5625%;
}

.introblock {
	width: 54%;
	text-align: left;
	float: left;
	margin: 0 0 5px 10%;
	display: block;
	text-align: left;
	position: relative;
}

#stripes {
	clear:  both;
	margin: 0 auto 0 10%;
	text-align: right;
	padding-right: 2.5%;
	padding-top: 9px;
	background: url(_images/stripes-grey-40.png) no-repeat left top #ffffff;
	width: 87.%;
	height: 35px;

}


.portnext {
	font-family: 'Gotham-Light' , sans-serif;
	color: #f04c25;
	font-style: normal;
	font-weight: 300;
	font-size: 15px;

}

a .portnext {
		z-index: 500;
		margin-right: 10px;
}


#back, #fwd {
	position: relative;
	z-index: 400;
	top: 260px;
	height: 30px;
	width: 30px;
	background: url(_images/stripes-grey.png) no-repeat left top #ffffff ;
	display: inline-block;
}

#back{
	float: left;
}

#fwd{
	float: right;
}

#back a, #fwd a {
	z-index: 600; s
	color: #f04c25;
	min-height: 100%;
	font-size: 20px;
	position: relative;
	text-align: center;
	padding: 4px 8px;
}

#back a:hover, #fwd a:hover {
	text-decoration: none;
	color: #ffffff;
}

#back:hover, #fwd:hover {
	background: #ec268f;
}

#touchnav {
	display: none;
}

#titleblock {
	height: 25px;
	width: 28%;
	margin-left: 0;
	margin-top: 0;
	margin-right: 8px;
	padding: 5px 8px 15px 0;
	text-align: right;
	float: left;
	display: inline-block;
}

#titleblock:before {
    content: "";
    position: relative;
	display: inline-block;
    width: 100%;
    margin-top: -8px;
    margin-left: 0;
    height: 0px;
    border-top: 15px solid #ec268f;
    float: left;
}

#titleblock p {
	color: #000000;
	font-style: normal;
	font-weight: 200;
	text-transform: uppercase;
	font-size: .9em;
	padding-left: 6%;
}


#infoblock {
	width: 62%;
	background: #ffffff;
	margin: 0 5% 0 0;
	padding: 5px 0 15px 0;
	text-align: left;
	float: left;
	display: inline-block;
}

#infoblock p {
	color: #000000;
	font-style: normal;
	font-weight: 200;
	font-size: .9em;
}

#aboutblock {
	float: right;
	text-align: left;
	width: 63%;
	margin-top: -33px;	
	padding: 0 10px 15px 0;
	display: inline-block;	
}

#aboutblock ul li{
	color: #000000;
	font-style: normal;
	font-weight: 200;
	font-size: .9em;
	margin-bottom: 8px;
	padding-right: 60px;
}

#aboutblock p{
	padding-left: 40px;
	font-size: .9em;
}

#aboutblock a:hover{
	color:#ec268f;
	text-decoration: none;
}

.break-word {
  word-wrap: break-word;
}

.clear {
	clear: both;
}

.center-page {
	margin-top: 200px;
}

.center-page-plus {
	margin-top: 225px;
}

#menu-icon {
	display: none;
	width: 20px;
	height: 20px;
}



/* Smartphones */
@media screen and (max-width: 375px) {
	body{
		background: #ffffff;
	}

	.home {
		background: none;
	}

	.about {
		background: none;
	}

	.portfolio {
		background: none;
	}


	.container {
		min-height: 100%;
	}

	#nameblock h1, #afternameblock h1 {
		text-align: center;
		margin: 0 auto;
		width: 100%;
	}

	#nameblock {
		width: 100%;
		height: 25px;
		margin: 0 auto;
		padding: 8px 0;
		display: block;
		clear: both;
	}

	#afternameblock {
		width: 100%;
		height: 22px;
		margin: 0 auto;
		display: block;
		clear: both;
	}

	#afternameblock h1 {
		margin-top: 4px;
	}

	nav {
		position: absolute;
		top: 13px;
		right: 10px;
		width: 20px;
		height: 20px;	
	}

	#menu-icon {
		display: inline;
	}

	nav ul, nav:active ul { 
		display: none;
		position: absolute;
		top: 0;
		left: -150px;
		width: 170px;
		z-index: 200;
		background: #ffffff;
		border: 1px solid #f04c25;
		z-index: 300;

	}

	nav li {
		text-align: center;
		padding: 5px 0 5px 25px;
		z-index: 400;
		display: inline;
	}

	nav:hover ul {
		display: inline;
	}

	header {
		width: 100%;
		top: 0;
		left: 0;
		z-index: 100;
		background: #ffffff;
	}

	#imageblock {
		padding: 30px 0 20px 0;
		min-height: 0;
	}

	#imageblock.big img{
		width:100%!important;
		height:auto!important;
	}

	#imageblock img.thumbnails {
		width: 43.75%;
		margin: 0 3.125% 6.25% 3.125%;
	}

	.center-page {
		margin-top: 0;
	}

	#aboutblock {
		clear: both;
		text-align: left;
		width: 90%;
		margin: 0 auto;	
		padding: 0 3% 0 7%;
		display: block;	
	}

	#aboutblock ul li{
		padding-right: 0;
	}
	
	#infoblock {
		width: 63%;
	}

	#back, #fwd {
		display: none;
	}

	#touchnav {
		clear: both;
		display: block;
		width: 100%;
		height: 45px;		
		background: url(_images/stripes-grey.png) no-repeat left top #ffffff ;
		margin: 0;
	}

	#touchnav-back a, #touchnav-fwd a {
		display: inline-block;
		color: #f04c25;
		min-height: 100%;
		font-size: 20px;
		letter-spacing: .2em;
		position: relative;
	}

	#touchnav-back a {
		text-align: left;
		float: left;	
		padding: 8px 8px 9px 25px;
	}

	#touchnav-fwd a {
		text-align: right;
		float: right;	
		padding: 8px 25px 9px 8px;
	}

	#touchnav-back a:hover, #touchnav-fwd a:hover {
		background: #ec268f;
		color: #ffffff;
		text-decoration: none;
	}

}

/* Phablets */
@media screen and (max-width: 649px) and (min-width: 376px){
	body{
		background: #ffffff;
	}

	.home {
		background: none;
	}

	.about {
		background: none;
	}

	.portfolio {
		background: none;
	}


	.container {
		min-height: 100%;
	}

	#nameblock h1, #afternameblock h1 {
		text-align: center;
		margin: 0 auto;
		width: 100%;
	}

	#nameblock {
		width: 100%;
		height: 25px;
		margin: 0 auto;
		padding: 8px 0;
		display: block;
		clear: both;
	}

	#afternameblock {
		width: 100%;
		height: 22px;
		margin: 0 auto;
		display: block;
		clear: both;
	}

	#afternameblock h1 {
		margin-top: 4px;
	}

	nav {
		position: absolute;
		top: 13px;
		right: 10px;
		width: 20px;
		height: 20px;	
	}

	#menu-icon {
		display: inline;
	}

	nav ul, nav:active ul { 
		display: none;
		position: absolute;
		top: 0;
		left: -150px;
		width: 170px;
		z-index: 200;
		background: #ffffff;
		border: 1px solid #f04c25;
		z-index: 300;

	}

	nav li {
		text-align: center;
		padding: 5px 0 5px 25px;
		z-index: 400;
		display: inline;
	}

	nav:hover ul {
		display: inline;
	}


	header {
		width: 100%;
		top: 0;
		left: 0;
		z-index: 100;
		background: #ffffff;
	}

	#imageblock {
		padding: 30px 0;
		margin: 0 auto;
		min-height: 0;
	}

	#imageblock.big img{
		width:100%!important;
		height:auto!important;
	}

	#imageblock img.thumbnails {
		width: 28.33%;
		margin: 0 2.5% 5% 2.5%;
	}

	.center-page {
		margin-top: 0;
	}

	#aboutblock {
		clear: both;
		text-align: left;
		width: 90%;
		margin: 0 auto;	
		padding: 0 3% 0 7%;
		display: block;	
	}

	#aboutblock ul li{
		padding-right: 0;
	}

	#infoblock {
		width: 63%;
	}

	#back, #fwd {
		display: none;
	}

	#touchnav {
		clear: both;
		display: block;
		width: 100%;
		height: 45px;		
		background: url(_images/stripes-grey.png) no-repeat left top #ffffff ;
		margin: 0;
	}

	#touchnav-back a, #touchnav-fwd a {
		display: inline-block;
		color: #f04c25;
		min-height: 100%;
		font-size: 20px;
		letter-spacing: .2em;
		position: relative;
	}

	#touchnav-back a {
		text-align: left;
		float: left;	
		padding: 8px 8px 9px 25px;
	}

	#touchnav-fwd a {
		text-align: right;
		float: right;	
		padding: 8px 25px 9px 8px;
	}

	#touchnav-back a:hover, #touchnav-fwd a:hover {
		background: #ec268f;
		color: #ffffff;
		text-decoration: none;
	}

}



/* Tablets ----------- */
@media screen and (max-width: 800px) and (min-width: 650px){
	body{
		background: #ffffff;
	}

	.home {
		background: none;
	}

	.about {
		background: none;
	}

	.portfolio {
		background: none;
	}


	.container {
		min-height: 100%;
	}

	#nameblock {
		width: 40%;
		margin-left: 0;
		margin-right: 8px;
	}

	nav ul li {
		margin-right: 22px;
		margin-top: 28px;
	}

	#aboutblock {
		float: right;
		text-align: left;
		width: 53%;
		margin-top: -33px;	
		padding: 0 10px 15px 0;
		display: inline-block;	
	}

	#titleblock {
		width:39%;
		float: left;
	}
	#infoblock {
		width: 55%;
	}

	#imageblock {
		min-height: 0;
	}

	#imageblock.big img{
		width:100%!important;
		height:auto!important;
	}
	
	#back, #fwd {
		display: none;
	}

	#touchnav {
		clear: both;
		display: block;
		width: 100%;
		height: 45px;		
		background: url(_images/stripes-grey.png) no-repeat left top #ffffff ;
		margin: 0;
	}

	#touchnav-back a, #touchnav-fwd a {
		display: inline-block;
		color: #f04c25;
		min-height: 100%;
		font-size: 20px;
		letter-spacing: .2em;
		position: relative;
	}

	#touchnav-back a {
		text-align: left;
		float: left;	
		padding: 8px 8px 9px 25px;
	}

	#touchnav-fwd a {
		text-align: right;
		float: right;	
		padding: 8px 25px 9px 8px;
	}

	#touchnav-back a:hover, #touchnav-fwd a:hover {
		background: #ec268f;
		color: #ffffff;
		text-decoration: none;
	}

}