/*
	www.yanavertigo.com
	2011

	 *  TABLE OF CONTENTS
	 *  
	 *  @Reset
	 *  @HTML5
	 *  @Fonts
	 *  @Global
	 *  @Wrapper
	 *  @Masthead
	 *  @Nav
	 *  @Lines
	 *  @GlobalStories
	 *  @Proof-Points
	 *  @Footer
	 *  @Icons
	 *  @Clear
*/



/* ---------------------------------- */
/* @Reset */
html { margin: 0; padding: 0; height: 100%; overflow-x: hidden; }
body { margin: 0; padding: 0; width: 100%; min-width: 1000px; overflow-x: hidden; }
* { margin: 0; padding: 0; outline: none; }
  body, div, dl,dt,dd, ul,ol,li, h1,h2,h3,h4,h5,h6, pre, form,fieldset, input,textarea, a, p,blockquote, th,td { 
   margin: 0; padding: 0; vertical-align: baseline;
  }
  img {
   border: 0
  }
  address, caption, cite, code, dfn, em, strong, th, var {
    font-style: normal;
    font-weight: normal;
  }
  ol,ul {
    list-style: none;
  }  
  h1,h2,h3,h4,h5,h6 {
    font-size: 100%;
    font-weight: normal;
  }

/* ---------------------------------- */
/* @CSS3 functions */
@-webkit-keyframes glow {
	0% {
			-webkit-box-shadow: 0 0 16px #bfbba0;
			border-color: #ebe6c5; 		
		}
		100% {
			-webkit-box-shadow: 0 0 16px #b1ad94, 0 0 36px #b1ad94;
			border-color: #f7eeb0; 
		}
}
@-moz-keyframes glow {
	0% {
		-moz-box-shadow: 0 0 16px #bfbba0;
		border-color: #ebe6c5;	
	}
	100% {
		-moz-box-shadow: 0 0 16px #b1ad94, 0 0 36px #b1ad94;
		border-color: #f7eeb0;
	}
}

/* ---------------------------------- */
/* @FontFace */
@font-face {
    font-family: 'RolkaLightRegular';
    src: url('../webfonts/rolka/rolka_light-webfont.eot');
    src: url('../webfonts/rolka/rolka_light-webfont.eot?#iefix') format('embedded-opentype'),
         url('../webfonts/rolka/rolka_light-webfont.woff') format('woff'),
         url('../webfonts/rolka/rolka_light-webfont.ttf') format('truetype'),
         url('../webfonts/rolka/rolka_light-webfont.svg#RolkaLightRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'RolkaUltraBold';
    src: url('../webfonts/rolka/rolka_ultra-webfont.eot');
    src: url('../webfonts/rolka/rolka_ultra-webfont.eot?#iefix') format('embedded-opentype'),
         url('../webfonts/rolka/rolka_ultra-webfont.woff') format('woff'),
         url('../webfonts/rolka/rolka_ultra-webfont.ttf') format('truetype'),
         url('../webfonts/rolka/rolka_ultra-webfont.svg#RolkaUltraBold') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
   font-family: 'FertigoPro-Regular';
   src: url('../webfonts/fertigo/eot/style_158307.eot');
   src: url('../webfonts/fertigo/eot/style_158307.eot?#iefix') format('embedded-opentype'),
		url('../webfonts/fertigo/woff/style_158307.woff') format('woff'),
		url('../webfonts/fertigo/ttf/style_158307.ttf') format('truetype'),
		url('../webfonts/fertigo/svg/style_158307.svg#FertigoPro-Regular') format('svg');
}
@font-face {
  font-family: 'Yanone Kaffeesatz';
  font-style: normal;
  font-weight: 400;
  src: local('Yanone Kaffeesatz Regular'), local('YanoneKaffeesatz-Regular'), url('http://themes.googleusercontent.com/font?kit=YDAoLskQQ5MOAgvHUQCcLQa6gm6bS00u2Qn-iPLo1Go') format('woff');
}

/* ---------------------------------- */
/* @Global */
body {
  background: #f8f5e4 url(../img/body.jpg) no-repeat center top;
  color:#000037;
  font:normal normal normal .75em/2em 'Lucida Grande', Helvetica, Arial, Verdana, sans-serif;
}

/* ---------------------------------- */
/* @Typography */
.FertigoPro-Regular { font-family: 'FertigoPro-Regular'; }
.RolkaUltra-Bold { font-family: 'RolkaUltraBold'; }
.RolkaLight-Regular { font-family: 'RolkaLightRegular'; }
.Yanone-Kaffeesatz { font-family: 'Yanone Kaffeesatz'; }

h1,h2,h3,h4,h5,h6, p,blockquote, ul,ol,dl {
 display: block;
 text-rendering: optimizelegibility;
}
h1 {
  /* color: #15658D; text-shadow:#9FD5F1 0 1px 0; */
  font-size: 3em;
 line-height: 1.5em;
}
h2 {
 font-size: 2.2em;
 line-height: 1.1em;
}

p {
 margin: 0 0 20px 0;
 /* font-size: 14px;
 line-height: 24px;
 font-family: "Din Display Pro Light", Helvetica, Arial, Verdana, sans-serif; */
}
  
a {
 color: #044eaf;
 font-style: italic;
 text-decoration: none;
}
 a:hover {
   color: #052886;
   border-bottom: 1px dashed #052886;
  }

/* ---------------------------------- */
/* @Wrapper */
div#siteWrap {
 background: url(../img/siteWrap.png) right top no-repeat;
  width: 100%;
  max-width: 1920px;
  min-width: 100px;
  padding: 0;
  margin: 0 auto;
  position:relative;
}

/* ---------------------------------- */
/* @Header */
div.header {
 margin: 0 auto;
 top: 0;
 position:relative;
 height: 130px;
 width: 910px;
}

h1.logo {
 color: #000037;
 font-family: 'RolkaLightRegular';
 font-size: 40px;
 letter-spacing: -4px;
 line-height: 40px;

height:100px;
  position:absolute;
  top:16px;
  width:320px;
}
h1.logo span.sizeText {
 font-size: 36px;
 margin-left: 6px;
}

h1.logo a.vertigo {
 border: 1px dashed #f8f5e4;
 color: #15658D;
 display: block;
 font-size: 62px;
 font-style: normal;
 height: 40px;
 padding: 6px;
 text-decoration: none;
 width: 280px;
}
h1.logo a.vertigo:hover {
 -moz-transition: background-color 0.4s linear 0s, color 0.4s linear 0s;
 -webkit-transition: background-color 0.4s linear 0s, color 0.4s linear 0s;
 border: 1px dashed #e18500;
 background-color: #f9c500;
 color: #f8f5e4;
 font-family: 'RolkaUltraBold';
 letter-spacing: -3px;
 text-shadow:#e18500 0 1px 0;
}

h2.signature {
 font-family: 'Lucida Grande', Helvetica, Arial, Verdana, sans-serif;
 font-size: 12px;
 height:20px;
 position:absolute;
 top:110px;
 width:320px;
}
/* ---------------------------------- */
/* @Main navigation */
ul.nav {
 list-style-type:none;
 position:absolute;
 right: 30px;
 top:24px;
 z-index:9000;	
}
ul.nav li {
 display: inline;
 font-family: 'Yanone Kaffeesatz';
 font-size: 28px;
 line-height: 82px;
 text-align: center;
 text-transform: lowercase;
}
ul.nav li a {
 background-image: url(../img/nav.png);
 background-repeat: no-repeat;
 display: block;
 float:left;
 font-style: normal;
 height: 57px;
 margin: 0 0 0 10px;
}
ul.nav li a:hover {
 border: 0;
 text-indent: 16px;
 -webkit-transition: background-position .2s ease-in, color 0.4s ease-in 0s, text-indent .2s ease-in 0s;
 -moz-transition: background-position .2s ease-in, color 0.4s ease-in 0s, text-indent .2s ease-in 0s;
 transition: background-position .2s ease-in, color 0.4s ease-in 0s, text-indent .2s ease-in 0s;
}
.selected {
 cursor: default;
}
 a.home {
 background-position: 0 0;
 color: #b3cbe7;
 text-shadow:#2e5b87 0 1px 0;
 width: 70px;
 }
	a.home:hover {
	 background-position: 0 -57px;
	 color: #3c77b1;
	}
	a.home.selected {
	 background-position: 0 -114px;
	 color: #052886;
	}
 a.work {
  background-position: -70px 0;
  color: #efa466;
  text-shadow:#c06a29 0 1px 0;
  width: 80px;
 }
	a.work:hover {
	 background-position: -70px -57px;
	 color: #e89d3b;
	}
	a.work.selected {
	 background-position: -70px -114px;
	 color: #fbb034;
	}
 a.about {
  background-position: -150px 0;
  color: #f27b9d;
  text-shadow:#e63a63 0 1px 0;
  width: 80px;
 }
	a.about:hover {
	 background-position: -150px -57px;
	 color: #f25f89;
	}
	a.about.selected {
	 background-position: -150px -114px;
	 color: #a94a61;
	}
 a.contact {
  background-position: -230px 0;
  color: #54764c;
  text-shadow:#3f5739 0 1px 0;
  width: 90px;
 }
	a.contact:hover {
	 background-position: -230px -57px;
	 color: #09784c;
	}
	a.contact.selected {
	 background-position: -230px -114px;
	 color: #09784c;
	}

/* Back to top button  */
	#back-top {
		position: fixed;
		bottom: 30px;
		margin-left: -150px;
	}
	#back-top a {
		width: 108px;
		display: block;
		text-align: center;
		font: 11px/100% Arial, Helvetica, sans-serif;
		text-transform: uppercase;
		text-decoration: none;
		color: #bbb;
		/* background color transition */
		-webkit-transition: 1s;
		-moz-transition: 1s;
		transition: 1s;
	}
	#back-top a:hover {
		color: #000;
	}
	/* arrow icon (span tag) */
	#back-top span {
		width: 108px;
		height: 108px;
		display: block;
		margin-bottom: 7px;
		background: #ddd url(../img/up-arrow.png) no-repeat center center;
		/* rounded corners */
		-webkit-border-radius: 15px;
		-moz-border-radius: 15px;
		border-radius: 15px;
		/* background color transition */
		-webkit-transition: 1s;
		-moz-transition: 1s;
		transition: 1s;
	}
	#back-top a:hover span {
		background-color: #777;
	}
/* ---------------------------------- */
/* @Footer */
#footer {
 color: #efa466;
 text-align: center;
}
/* ---------------------------------- */
/* @Main content */
div.section {
 width:100%;
 position: relative;
}
	div.section.bk-portfolio {
		height:957px;
	}
	div.section.bk-about {
		height:686px;
		margin-bottom: -72px;
	    top: -72px;
	}
div.article {
 width: 900px;
 margin: 0 auto;
 padding-top: 60px;
 min-height: 100%;
 position: relative;
 /* z-index: 8888; */
} 


/* ---------------------------------- */
/* @bg themes - TO DO! */
.bk_blank{
	width:100%;
	height:350px;
	position: relative;
	z-index:2;
}
.title_1{
	background:url(../img/title_1.png) 0 0 no-repeat;
	bottom: -100px;		
}
.title_2{
	background:url(../img/title_2.png) 0 0 no-repeat;
	bottom: -90px;
	margin-top:-202px;
}
.title_3{
	background:url(../img/title_3.png) 0 0 no-repeat  ;		
}

/* sections backgrounds */
.bk-intro {
 background:url(../img/bk-intro.png) 54% 60px fixed no-repeat;
}
.bk-portfolio {
 background:url(../img/bk-portfolio.png) 0 0  no-repeat;	
}
.bk-about {
 background:url(../img/bk-about.png) 0 0  no-repeat;	
}
.bk-contact {
 background:url(../img/bk-contact.png) 0 0  no-repeat;	
}
/* parallax effect backgrounds */
.parallax {
 position: relative;
 width:100%;
}

.img-about {
 background: url(../img/me.png) 0 106px no-repeat;
}

.img-contact {
 background:url(../img/img-contact.png) 0 0  no-repeat;
/*  height:805px;
margin-bottom: -805px;
 top: -454px; */
 height: 336px;
 margin-bottom: -111px;
}
/* articles backgrounds */
.front-contact {
 background:url(../img/front-contact.png) 0 0 no-repeat;
 height: 513px;
 width: 487px;
 float: left;
}

/* ---------------------------------- */
/* @Home */
div#intro div.article {
 text-align: center;
}
.home-title {
 color: #efa466;
 text-shadow:#c06a29 0 1px 0;
}
.home-subtitle {
 color: #c06a29;
 text-shadow: #965320 0 1px 0;
}
div#intro div.article img {
 margin-top: 40px;
}
/* @Work */
.work-title {
 color: #54764c;
 text-shadow:#3f5739 0 1px 0;
}
/* @About */
div#about div.article h1,
div#about div.article h2,
div#about div.article p {
 margin-left: 340px;
}
.about-title {
 color: #3c77b1;
 text-shadow:#2e5b87 0 1px 0;
}
.about-subtitle {
 color: #b3cbe7;
 text-shadow:#2e5b87 0 1px 0;
}
/* @Contact */
.contact-title {
 color: #f25f89;
 text-shadow:#e63a63 0 1px 0;
}
.contact-subtitle {
 color: #efa466;
 text-shadow:#e63a63 0 1px 0;
}
/* ---------------------------------- */
/* @Portfolio */
ul.portfolio-items {
 margin: 10px 0;
}
ul.portfolio-items li {
 float: left;
 margin: 0 10px 20px;
 width: 280px;
}
	ul.portfolio-items li.thumb-big {
 	 width: 430px;
	}
	ul.portfolio-items li.last-thumb {
	 clear: both;
	}
ul.portfolio-items li a {
 text-decoration: none;
}
ul.portfolio-items li a:hover {
 border: 0;
}
ul.portfolio-items li a img {
 border-color: #f6f6f6;
 /* border-color: rgba(170, 180, 63, 1.0); */
 border-style: solid;
 border-width: 4px;
 -moz-border-radius:4px;
 -webkit-border-radius:4px;
 border-radius:4px;
 box-shadow: 0 0 16px #bfbba0;
 -moz-box-shadow: 0 0 16px #bfbba0;
 -webkit-box-shadow: 0 0 16px #bfbba0;
 height: 164px;
 width: 265px;
}
ul.portfolio-items li a:hover img {
 border-color: #f7eeb0;
 box-shadow: 0 0 26px #b1ad94;
 -moz-box-shadow: 0 0 26px #b1ad94;
 -webkit-box-shadow: 0 0 26px #b1ad94;
}
ul.portfolio-items li a:hover img {
 -moz-animation-name: glow;
 -moz-animation-duration: 1s;
 -moz-animation-iteration-count: infinite;
 -moz-animation-direction: alternate;
 -moz-animation-timing-function: ease-in-out;

 -webkit-animation-name: glow;
 -webkit-animation-duration: 1s;
 -webkit-animation-iteration-count: infinite;
 -webkit-animation-direction: alternate;
 -webkit-animation-timing-function: ease-in-out;
}

	ul.portfolio-items li.thumb-big a img {
	 height: 243px;
	 width: 412px;
	}
ul.portfolio-items li a span {
 margin: 0 8px 0 6px;
 padding: 2px;
 text-shadow:#cce9e3 0 1px 0;
}
span.thumb-title {
 color: #232827;
 font-weight: bold;
 text-transform: uppercase;
 width: auto;
}
	ul.portfolio-items li a:hover span.thumb-title {	
	 /* -moz-transition: background-color 0.4s linear 0s;
	 -webkit-transition: background-color 0.4s linear 0s;
	 -moz-transition: color 0.4s linear 0s;
	 -webkit-transition: color 0.4s linear 0s; */
	 background-color: #fbb034;
	 color: #232827;
	}
span.thumb-tags {
 display: block;
 font-style: italic;
 margin: 0 8px 0 6px;
}
span.thumb-tags a {
 padding: 2px;
 text-decoration: none;
}
span.thumb-tags a:hover {
 border-bottom: 1px dashed #285B74;
}