/* General Blueprint Style */
@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700);
@font-face {
	font-family: 'fontawesome';
	src:url('../fonts/font-awesome/font/fontawesome-webfont.eot');
	src:url('../fonts/font-awesome/font/fontawesome-webfont.eot?#iefix') format('embedded-opentype'),
		url('../fonts/font-awesome/font/fontawesome-webfont.svg#fontawesome') format('svg'),
		url('../fonts/font-awesome/font/fontawesome-webfont.woff') format('woff'),
		url('../fonts/font-awesome/font/fontawesome-webfont.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}

@font-face {
    font-family: 'kelsonlight' ;
	src: url('../fonts/kelsonlight.otf');
	font-weight: normal;
	font-style: normal;
}

@font-face {
    font-family: 'kelsonreg' ;
	src: url('../fonts/kelsonreg.otf');
	font-weight: normal;
	font-style: normal;
}

@font-face {
    font-family: 'airbag' ;
	src: url('../fonts/airbag.otf');
	font-weight: normal;
	font-style: normal;
}

@font-face {
    font-family: 'capsies' ;
	src: url('../fonts/capsies.ttf');
	font-weight: 600;
	font-style: normal;
}



*, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
body, html { font-size: 100%; padding: 0; margin: 0;}

/* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before, .clearfix:after { content: " "; display: table; }
.clearfix:after { clear: both; }

body {
    font-family: 'kelsonlight', Calibri, Verdana, sans-serif;
    color: #c1bfb9;
    background:#333333;
}




a {
	color: #d28806;
	text-decoration: none;
}

a:hover {
	color: #fcaa18;
}

h2 {
    font-family: 'capsies', Calibri, Verdana, sans-serif;
    font-weight: normal;
    font-size: 2.444em;
    color: #f0f0f0;
    text-shadow: 0.08em 0.08em 0.08em rgba(0,0,0,1);
}

.cv a {
	
	display: inline;
	float: left;
	padding: 0 1em 0 0;
	
}

.container > header {
  

	position: fixed;	
	width: 100%;
	padding: 4% 2%;
	z-index: 1000;
}

.container > header h1 {
	font-family: "kelsonreg", sans-serif;
	font-size: 2.125em;
	float: left;
	font-weight: 400;
}

.container > header span {
	display: block;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.5em;

}

.container > header nav {
	
	
	display: block;
	float: left;
	padding: 90px 10px;
	position: inherit;

}

.container > header nav a {
	display: block;
	float: left;
	position: relative;
	width: 2.5em;
	height: 2.5em;
	background: #7a7b75;
	border-radius: 50%;
	color: transparent;
	margin: 0 0.1em;
	border: 4px solid #c1bfb9;
	text-indent: -8000px;
}

.container > header nav a:after {
	content: attr(data-info);
	color: #c1bfb9;
	position: absolute;
	width: 600%;
	top: 120%;
	text-align: right;
	right: 0;
	opacity: 0;
	pointer-events: none;
}

.container > header nav a:hover:after {
	opacity: 1;
}

.container > header nav a:hover {
	background: #7a7b7a;
}

.icon-envelope:before, 
.icon-home:before {
	font-family: 'fontawesome';
	position: absolute;
	top: 0;
	width: 100%;
	height: 100%;
	speak: none;
	font-style: normal;
	font-weight: normal;
	line-height: 2;
	text-align: center;
	color: #c1bfb9;
	-webkit-font-smoothing: antialiased;
	text-indent: 8000px;
	padding-left: 8px;
}

.container > header nav a:hover:before {
	color: #f0f0f0;
	
}

.icon-envelope:before {
	content: "\f003";
}

.icon-home:before {
	content: "\f015";
}


/******** ARTICLE *********/

article {
	position: absolute;
	width: 82%;
	padding: 12% 2%  2% 20%;
}


article h3 a{
	font-family: 'capsies', Calibri, Verdana, sans-serif;
	font-size: 1.6em;
	color: #f0f0f0;
}

article p {font-size: 1.4em;} 
article p a {color: #f0f0f0;}
article h3 {font-size: 1.6em;}
article h3 a:hover {color: #fcaa18;}
article p, h1, h2, h3, {clear: both;}



/******** CONTENT NAVIGATION *********/

.contentnav {
	position: absolute;
	z-index: 999;
	width: 76%;
	padding: 15% 2%  2% 20%;
	top: 40%;
	font-family: 'capsies', Calibri, Verdana, sans-serif;
    font-weight: normal;
    font-size: 2.66em;
    text-shadow: 0.08em 0.08em 0.08em rgba(0,0,0,1);
	-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
}

.contentnav a {
	display: block;
	position: relative;
	z-index: 9999;
	color: #c1bfb9;
	
}

.contentnav a:after {
	content: attr(data-info);
	color: #f0f0f0;
	position: relative;
	width: 600%;
	top: 120%;
	right: 0;
	
}

.contentnav a:hover {
	color: #f0f0f0;
	text-decoration:line-through;
}

.contentnav h2 {
	font-size: 1em;
}

.contentnav .cv p a{
	font-family: 'kelsonlight', Calibri, Verdana, sans-serif;
	font-size: 0.6em;
	
	display: inline;
	text-decoration: none;
}

/******** BUTTONS 

.butt { 
	
	width:30em;
	text-align:left;
	padding: 30% 0 0 2.2em;
	}
	
.box
{
box-sizing:border-box;
-moz-box-sizing:border-box;
width:200px;
border:#7a7b7a 0.1em solid;
border-radius: 20px;
box-shadow: 0.4em 0.3em 0.4em rgba(0,0,0,1);
float:left;
display: block;
padding: 0.4em 0.4em 0.4em 0.4em;
margin: 0.4em 12%  0 0;
text-decoration:none;
background-color: #c1bfb9;
font-family: "kelsonlight", Calibri, Verdana, sans-serif; 
font-size: 2em;
list-style: none;
color:#7a7b7a;
text-align:center;

}


a:hover .box  {
background-color: #7a7b7a;
color:#efeedc;
border:#c1bfb9 0.1em solid;
}
*******/

/**  SHARE **/
	
	#share {
		
    position: fixed;
	z-index: 9999;
	left: 36px;
	top: 2.4%;
    width: 180px;
	-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);		
		
	}
	
	
	/* Set all parents to full height */
html, body, 
.container,
.cbp-fbscroller,
.cbp-fbscroller section { 
	height: 100%; 
}

.links {
column-count: 4;
column-gap: 2%;
column-rule: 1px outset #7a7b7a;
padding: 0 0 2% 0;
height: 70%;

/* Firefox */
-moz-column-count:4;
-moz-column-gap:2%;
-moz-column-rule:1px outset #7a7b7a;

/* Safari and Chrome */
-webkit-column-count:4;
-webkit-column-gap:2%;
-webkit-column-rule:1px outset #7a7b7a;
}



.column {

width: 26%;
margin-right: 40px;
height: 90%;
float: left;
display: inline;
text-align: center;

	
	
}


/* The nav is fixed on the right side  and we center it by translating it 50% 
(we don't know it's height so we can't use the negative margin trick) */
.cbp-fbscroller > nav {
	position: fixed;
	z-index: 9999;
	right: 50px;
	top: 50%;
	width: 26px;
	-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
}

.cbp-fbscroller > nav a {
	display: block;
	position: relative;
	z-index: 9999;
	color: transparent;
	width: 26px;
	height: 26px;
	outline: none;
	margin: 25px 0;
	border-radius: 50%;
	border: 4px solid #6f6f65;
}

.cbp-fbscroller > nav a:after {
	content: attr(data-info);
	color: #c1bfb9;
	position: relative;
	width: 600%;
	top: 120%;
	text-align: right;
	right: 0;
	opacity: 0;
	pointer-events: none;
}


.no-touch .cbp-fbscroller > nav a:hover {
	background: rgba(255,255,255,0.6);
}

.cbp-fbscroller > nav a.cbp-fbcurrent {
	background: #c1bfb9;
}

/* background-attachment does the trick */
.cbp-fbscroller section {
	position: relative;
	background-position: top center;
	background-repeat: no-repeat;
	background-size: cover;
}

.no-touch .cbp-fbscroller section {
	background-attachment: fixed;
}

#fbsection1 {
	background-image: url(../images/1.jpg);
}

#fbsection2 {
	background-image: url(../images/2.jpg);
}

#fbsection3 {
	background-image: url(../images/3.jpg);
}

#fbsection4 {
	background-image: url(../images/4.jpg);
}

#fbsection5 {
	background-image: url(../images/5.jpg);
}

#fbsection6 {
	background-image: url(../images/6.jpg);
}

#fbsection7 {
	background-image: url(../images/7.jpg);
}

#fbsection8 {
	background-image: url(../images/8.jpg);
}

/* Page */

.page{
    
    max-width: 100%;  
    padding:100px 10px 100px 10px;
	text-align: center;
	margin:auto;	
	font-size:larger;
}


.page img {
	
    max-width: 100%;
   border: #7A7B7A 1px solid;
 }

.column img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  max-width: 100%;
  
}


/***     responsive 0 - 576 ***/


     @media screen and (min-width: 0px) and (max-width:576px)
 {
 	
 	
.container > header nav {
 	
 	display:none;
 }
 
 	

 
 
 article {
	width: 83%;
	padding: 32% 2%  2% 4%;
	font-size:0.55em;
	
}


.column {
	width: 28%;
    padding: 1% 1% 1% 1%;
	margin-right:10px;
	display: block;
	
}

img {
	max-width: 60%;
}

   input{
    width: 80%;  
     
   }


/******** CONTENT NAVIGATION *********/

.contentnav {

	width: 44%;
	padding: 2% 2%  2% 12%;
	top: 61%;
    font-size: 1.2em;
  
}


 
 
 /******** SCROLLER *********/
 
 .cbp-fbscroller > nav {
	right: 10px;
	top: 50%;
	width: 16px;
	-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
}

.cbp-fbscroller > nav a {
	width: 12px;
	height: 12px;
	margin: 25px 0;
	border: 2px solid #6f6f65;
}

.cbp-fbscroller > nav a:after {
	content: attr(data-info);
	color: #c1bfb9;
	position: relative;
	width: 600%;
	top: 100%;
	text-align: right;
	right: 0;
	opacity: 0;
	pointer-events: none;
}

 
 	
 }



/***     responsive 577 - 768  ***/

   @media screen and (min-width: 577px) and (max-width: 768px)
 {

 

 
 
 article {
	width: 88%;
	padding: 28% 2%  2% 4%;
	font-size: 0.666em;
		
}


.column {
	width: 28%;
    padding: 1% 1% 1% 1%;
	margin-right:10px;
	display: block;
	
}


img {
	max-width: 70%;
}

   input{
    width: 90%;  
     
   }






/******** CONTENT NAVIGATION *********/

.contentnav {

	width: 60%;
	padding: 2% 2%  2% 12%;
	top: 42%;
    font-size: 1.444em;
  
}




 
 /******** SCROLLER *********/
 


 .cbp-fbscroller > nav {
	right: 20px;
	top: 50%;
	width: 20px;
	-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
}

.cbp-fbscroller > nav a {
	width: 16px;
	height: 16px;
	margin: 25px 0;
	border: 3px solid #6f6f65;
}


.cbp-fbscroller > nav a:after {
	content: attr(data-info);
	color: #c1bfb9;
	position: relative;
	width: 600%;
	top: 100%;
	text-align: right;
	right: 0;
	opacity: 0;
	pointer-events: none;
}

 
 	
 }
 
 
/***     responsive 769 - 992 ***/

   @media screen and (min-width: 769px) and (max-width: 992px)
 {
 	

 
 article {
	width: 80%;
	padding: 26% 2%  2% 4%;
	font-size: 0.8em;
	
}


.column {
	width: 30%;
    padding: 0 0 1% 0;
	margin-right:10px;
	display: block;
	
}



img {
	max-width: 80%;
}


/******** CONTENT NAVIGATION *********/

.contentnav {

	width: 60%;
	padding: 2% 2%  2% 12%;
	top: 44%;
    font-size: 2em;


  
}



.contentnav a:hover {
	color: #f0f0f0;
	text-decoration:line-through;
}
 
 
 /******** SCROLLER *********/
 


 .cbp-fbscroller > nav {
	right: 40px;
	top: 50%;
	width: 22px;
	-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
}

.cbp-fbscroller > nav a {
	width: 22px;
	height: 22px;
	margin: 25px 0;
	border: 4px solid #6f6f65;
}


.cbp-fbscroller > nav a:after {
	content: attr(data-info);
	color: #c1bfb9;
	position: relative;
	width: 600%;
	top: 100%;
	text-align: right;
	right: 0;
	opacity: 0;
	pointer-events: none;
}

 /***     responsive 993 - 1200 ***/
   
    @media screen and (min-width: 993px) and (max-width: 1200px)
 {
 	

 
 article {
	width: 90%;
	padding: 30% 2%  2% 0%;
	font-size: 0.8em;
	
}


.column {
	width: 24%;
   
	margin-right:50px;
	display: block;
	
}






/******** CONTENT NAVIGATION *********/

.contentnav {

	width: 60%;
	padding: 2% 2%  2% 12%;
	top: 44%;
    font-size: 2em;


  
}



.contentnav a:hover {
	color: #f0f0f0;
	text-decoration:line-through;
}
 
 
 /******** SCROLLER *********/
 


 .cbp-fbscroller > nav {
	right: 40px;
	top: 50%;
	width: 22px;
	-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
}

.cbp-fbscroller > nav a {
	width: 22px;
	height: 22px;
	margin: 25px 0;
	border: 4px solid #6f6f65;
}


.cbp-fbscroller > nav a:after {
	content: attr(data-info);
	color: #c1bfb9;
	position: relative;
	width: 600%;
	top: 100%;
	text-align: right;
	right: 0;
	opacity: 0;
	pointer-events: none;
}
   
   
   
 	
 }