@font-face {
font-family: OpenSans;
src: url("img/OpenSans-Regular.ttf");
}
@font-face {
font-family: OpenSansLight;
src: url("img/OpenSans-Light.ttf");
}
@font-face {
font-family: Champagne;
src: url("img/ChampagneLimousines.ttf");
}
@font-face {
font-family: Social;
src: url("img/Socialico.otf");
}

/* ==== [1] MAIN ==== */

/* -- [1.1] General */
html {
  scroll-behavior: smooth;
}

body {
 background: url('img/bg.png') no-repeat fixed #000;
 background-size: 100%; color: #fff;
 font: 85%/1.8 OpenSansLight, Helvetica, sans-serif;
 text-align: center;
 margin: 0;
 text-shadow: .1em 0 2px rgba(0,0,0,.8);
 -webkit-text-stroke: .2px;
}

/* -- [1.2] Headers */
h2, h3, h4, h5, h6 {
 margin: .2em; margin-left: 0;
 font-family: Champagne;
}
h2 {
 font-size: 3em;
 font-weight: normal;
 text-align: center;
 text-transform: uppercase;
 letter-spacing: 7px;
 margin-top: 50px;
}

h3 {
 font-size: 2.3em;
 font-weight: normal;
 text-transform: uppercase;
 letter-spacing: 5px;
}


/* -- [1.3] Links */
a, a:visited {
 text-decoration: none;
 font-weight: bold;
 color: #fff;
}
	a:hover, a:visited:hover {border: 0; text-decoration: underline;}

/* -- [1.4] Text */
p {
 line-height: 150%;
}
	p.indent {text-indent: .5in;}

/* -- [1.5] Lists */
ul {

}
	ul li {
	 padding: 0 .5em 1em .5em;
	}
	ul li a, ul li a:visited {font-size: 1.2em;}

/* -- [1.6] Images */
img {
 margin: 0; padding: 0;
}

/* -- [1.7] Tables */
table {
 width: 95%;
 margin: 1em auto;
 border: 0;
}
td, tr {
 border: 0; padding: .5em;
}
caption {
 font: 2em Champagne;
 color: #555;
 padding: .5em;
 text-align: left;
}
/* -- [1.8] Other */
.none {display: none;}
.center {text-align: center;}
sup {font-size: 75%;}

/* ==== [2] IDS ==== */

/* -- [2.1] Layout */
#wrapper {
 margin: 1em auto; margin-top: 0; padding: 0 2em 1em 2em;
 width: 70%; 
 text-align: center;
}
#layout {
 text-align: left;
 overflow: hidden;
 padding: 1.5em; min-width: 700px;
 background: url('img/bg-transparent.png');
}

/* -- [2.2] Header */
#header {
 padding: 0; margin: 0; border: 0;
 font: 5em Champagne; font-weight: bold;
 text-align: center;
 line-height: 66%;
}
#header span {font-size: 46%; font-weight: normal; display: block;}

h3#objective {
 text-align: center;
 text-transform: none;
 font-size: 2.5em;
 font-weight: normal;
 letter-spacing: 0;
 margin-top: 0;
 display: block; padding: 0.5em;
 background: url('img/bg-transparent.png');
 border-radius: 15px;
}

h3#objective a, h3#objective a:visited {
 font-weight: bold;
 text-transform: uppercase;
 font: 60% Champagne;
 letter-spacing: 1px;
 border: 1px rgba(224, 224, 224, 0.5) solid;
 padding: .7em;
}
	h3#objective a:hover, h3#objective a:visited:hover {
	 text-decoration: none;
	 border: 1px rgba(250, 250, 250, 0.9) solid;
	}


/* -- [2.3] Navigation */
nav ul {
 margin: .2em auto; margin-top: 0;
 width: 950px;
 text-align: center;
 list-style: none;
 overflow: hidden;
}

nav ul li {
 float: left;
 width: 150px;
}

nav ul li a {
 display: block;
 padding: 1em; margin: .1em; margin-top: 0;
 background: url('img/bg-transparent.png');
 border-radius: 0 0 30px 30px;
 font: 1.5em Champagne;
 font-weight: normal;
}
	nav ul li a:hover {background: url('img/bg-transparent-2.png'); color: #f9f9f9;}

nav ul li.linkedin {
 width: 75px;
}
	.linkedin a, .linkedin a:visited {
	 font: 2.3em Social;
	 padding: .5em;
	}
	.linkedin a:hover, .linkedin a:visited:hover {
	 text-decoration: none;
	 background: #0077B5;
	}
	
/* -- [2.4] Gallery */
ul.gallery {
 list-style: none; 
 padding: 0; margin: 0 auto;
 width: 90%;
 overflow: hidden;
}

ul.gallery li { 
 float: left;
}

.caption {font-weight: bold; font-size: 1.3em; text-align: left;}
.info {font-size: .9em; text-transform: uppercase; text-align: left;}
.download {font-size: .9em; text-transform: uppercase; text-align: left;}
.download a {
 font-size: .95em;
 padding: .5em; background: url('img/bg-transparent.png');
 border-radius: .5em;
 text-align: left;
}
.download a:hover {
 background: url('img/bg-transparent-2.png');
}

ul.gallery img {
 padding: .7em; margin: .5em;
 margin-left: 0;
 background: url('img/bg-transparent.png');
 border-radius: .5em;
}
	ul.gallery img:hover, .credit:hover {background: url('img/bg-transparent-2.png');}

.credit {
 display: block;
 font-size: 1.1em; text-transform: uppercase; letter-spacing: 2px;
 padding: 1em; background: url('img/bg-transparent.png');
 width: 200px; border-radius: 1em;
}

/* -- [2.5] Writing */
ul#writing {
 list-style: none;
}
	ul#writing li {margin: 0.5em 0 3em 0;}
	ul#writing .download a {
	font-size: 1.2em;
	text-transform: none;
	}

.trent {
 font-size: .8em;
 padding: .5em; background: url('img/bg-transparent.png');
 margin-left: .5em;
 border-radius: .5em;
 text-transform: uppercase;
 color: #eee;
}

/* -- [2.6] Skillset */
#skillset {
 margin: 0 auto;
 text-align: left;
 overflow: hidden;
}

#sleft {
 display: block;
 float: left;
 width: 30%;
}

#scentre {
 display: block;
 float: left;
 width: 33%;
}

#sright {
 display: block;
 float: right;
 width: 33%;
}

#skillset strong {
 padding: .5em; margin: .5em;
 text-transform: uppercase;
 background: url('img/bg-transparent.png');
 border-radius: .5em;
}

#abouttext {
 font-size: 1.5em;
 line-height: 1.7em;
}
#me {
 float: right;
 clear: bottom;
 background: url('img/bg-transparent.png');
 padding: .7em; margin: .5em;
 border-radius: .5em;
}

	
/* -- [2.7] Contact */
label {
 font: 95% Champagne;
 font-weight: bold;
 text-transform: uppercase;
 letter-spacing: 2px;
}

table#contact {
 margin: .5em auto;
 width: 80%;
}

table#contact input, table#contact textarea {
 border: 0; padding: 1em;
 border-radius: 1em;
 width: 95%;
 font: 95% OpenSans; line-height: 200%;
 color: #fff; background: url('img/bg-transparent.png');
 opacity: .7;
}
table#contact input:focus, table#contact textarea:focus {
 opacity: 1;
}
table#contact input#submit {
 width: 100%;
 font: 1.2em Champagne;
 font-weight: bold;
 letter-spacing: 2px;
 text-transform: uppercase;
}
table#contact input#submit:hover {
 cursor: pointer;
 background: url(img/bg-transparent-2.png);
}
table#contact td.contact-label {
 width: 10%;
}

#resume {
 margin: 0 auto; padding: 1em; width: 758px;
 background: url('img/bg-transparent.png'); 
 border-radius: 15px;
}


/* [2.8] Other */
/* Pure CSS PopUp: http://websemantics.co.uk/resources/accessible_css3_modal_pop-ups/#links */
  .pop-up {position:absolute; top:0; left:-500em}
  .pop-up:target {position:static; left:0;}
  .popBox {
  background: url('img/bg-transparent-3.png');

  /* alternatively fixed width / height and negative margins from 50% */
  position:absolute; left:20%; right:20%; top:15%; bottom:15%;

  z-index:1;
  /* padding:1%; removed 17/07/2012 */

  /* CSS3 rounded corners, drop-shadow and opacity fade in */
  -moz-border-radius:12px;
  border-radius:12px;
  opacity:0;
  -webkit-transition: opacity 0.5s ease-in-out;
  -moz-transition: opacity 0.5s ease-in-out;
  -o-transition: opacity 0.5s ease-in-out;
  -ms-transition: opacity 0.5s ease-in-out;
  transition: opacity 0.5s ease-in-out;
}
:target .popBox {position:fixed; opacity:1;}

.popBox:hover {}
.lightbox2 {display:none; text-indent:-200em; opacity:0.4; width:100%; height:100%; position:fixed; top:0; left:0; bottom:0; right:0;}
:target .lightbox2 {display:block;}

/* .popScroll {max-height:99%; overflow-y:scroll;} removed 17/07/2012 */
.popScroll {position:absolute; top:10%; left:5%; right:5%; bottom:9%; overflow-y:auto; *overflow-y:scroll; padding-right:0.5em}
.popScroll strong{
 font: bold 1.1em Champagne;
 text-transform: uppercase;
}
.popScroll a {
 font-weight: normal;
}

.close {
  position:absolute; top:-0.75em; right:-0.75em; display:block; width:1em; height:1em;
  font: bold large/1 Champagne, sans-serif; text-align:center; text-decoration:none;
  text-shadow: 0;
  background: url('img/bg-transparent-2.png'); color:#fff;
  padding: .5em;
  -moz-border-radius: 1em;
  -webkit-border-radius: 1em;
  border-radius: 1em;
}
.close:before {content:"X"}
.close:hover {
  -moz-border-radius: 1em;
  -webkit-border-radius: 1em;
  border-radius: 1em;
  text-decoration: none;
  }
.close span {text-indent:-200em; display:block;}