@charset "UTF-8";
/* CSS Document */
body{
	background-image: url(../bg/texturetastic_gray.png);
	font-family: 'Port Lligat Slab', serif;
	font-size: 1.75em;
	font-weight: bold;
}

/*
============
***MENU***
============
*/

.menu{
	background: white;
	border-radius: 0 0 10px 10px;
	height: 3.25em;
	top: 0;
	padding-bottom: .71em;
	position: fixed;
	z-index:10;	
}

.menu ul{
	float: right;
	margin: -4.25% -34% 0 0;
	list-style: none;
	text-align: center;
}

.menu ul li{
	float: left;
	margin-right: 1em;
}

.menu ul li a{
	background-image: url(../imgs/website-sprite.jpg);
	background-repeat: no-repeat;
	display:block;
	height: 1.14em;
	text-decoration: none;
	text-indent: -9999px;
	width: 4.6em;
}

.menu img{
	height: 2.14em;
	width: 2.14em;
	margin: 4% 0 0 50%;
	z-index: 9;
}

/*
============
***SPRITE***
============
*/

ul li .home:link, 
ul li .home:visited {
	background-position: 0px -2px;
}

ul li .home:hover {
	background-position: 0px -35px;
}

ul li .home:active {
	background-position: -0px -68px;
}

ul li .about:link, 
ul li .about:visited {
	background-position: -100px -2px;
}

ul li .about:hover {
	background-position: -100px -35px;
}

ul li .about:active {
	background-position: -100px -68px;
}

ul li .resume:link, 
ul li .resume:visited {
	background-position: -275px -2px;
}

ul li .resume:hover {
	background-position: -275px -35px;
}

ul li .resume:active {
	background-position: -275px -68px;
}

ul li .contact:link, 
ul li .contact:visited {
	background-position: -400px -2px;
}

ul li .contact:hover {
	background-position: -400px -35px;
}

ul li .contact:active {
	background-position: -400px -68px;
}


#home{
	margin-right: -.71em;
	width: 3.75em;
}

#contact{
	margin-right: 10em;
}

/*
============
***container***
============
*/

.container_12{
	padding: 3.6em .35em;	
}

.section{
	min-height: 45em;
	padding-top: 1.78em;
}

.resSection{
	min-height: 30em;
	padding-top: 1.78em;
}

.line{
	margin-top: 0px;
	width: 95%;
}

/*
============
***WELCOME***
============
*/


.welcome{
	margin-top: 1.78em;
}

.me:link,.me:visited{
	background:url(../imgs/website-sprite-me.png) 0 0 no-repeat;
	background-size: 240px;
	content:'';
	float: right;
	height: 377.75px;
	margin-right: 1.78em;
	width: 225px;
	-webkit-animation: jamesBond 1.5s .25s steps(18) 1;
	-moz-animation: jamesBond 1.5s .25s steps(18) 1;
	animation: jamesBond 1.5s .25s steps(18) 1;
}

.me:hover{
	-webkit-animation: jamesBond2 1.5s .25s steps(18) 1;
	-moz-animation: jamesBond2 1.5s .25s steps(18) 1;
	animation: jamesBond2 1.5s .25s steps(18) 1;
}

@-webkit-keyframes jamesBond {
	 0% {background-position: 0 0; } 
	 100% {background-position: 0 -6814px; } /* Must be full height of sprite or skipping will happen.*/
}

@-moz-keyframes jamesBond {
	 0% {background-position: 0 0; } 
	 100% {background-position: 0 -6814px; } /* Must be full height of sprite or skipping will happen.*/
}

@-moz-keyframes jamesBond2 {
	 0% {background-position: 0 0; } 
	 100% {background-position: 0 -6814px; } /* Must be full height of sprite or skipping will happen.*/
}

@-webkit-keyframes jamesBond2 {
	 0% {background-position: 0 0; } 
	 100% {background-position: 0 -6814px; } /* Must be full height of sprite or skipping will happen.*/
}


.welcome{
	margin: 1.43em 0 0 -.7em;	
}

.intro{
	margin: -.5em 0 0 -1.2em;
}

.welcome p{
	font-size: .9em;
	line-height: 1em;
	margin: 0px 0 0 -.2em;
}

/*
============
***ABOUT***
============
*/
.aboutHead{
	float: left;
	padding-top: 2.14em;
	padding-right: 100%;;
}

.aboutMes p{
	float: left;
	font-size: .9em;
	line-height: 1em;
	margin: .5em 0 0 .64em;
	z-index: 7;
}

.week{
	margin: -2.68em 0 0 0;
}

.week img{
	display: inline;
	height: 30%;
	width: 112%;
	margin-top: -17%;
	padding-right: 3.25em;
	z-index: 8;
}

/*
============
***RESUME***
============
*/
#res{
	padding-top: 3.5em;
}

#resHeading{
	margin-left: -10px;
}

.resHead .aboutHead .contactHead{
	height: 2.85em;
	margin-bottom: .36em;
	width: 14.3em;
}

.education{
	margin: -1em 0 -1em 1em;
}

/*
============
***CONTACT***
============
*/
.contactSec{
	padding-top: 3.5em;
	min-height: 30em;
}

.contactSec p{
	margin-left: 1em;
}

/*
============
***PDF***
============
*/
.resPDF{
	margin-top: 20%;
	min-height:13em;
}

.education{
	font-size: .9em;
	float: left;
}

.pdf{
	background: url(../imgs/pdf.png) left no-repeat;
	background-size: 2em;
	background-position-x: -2px;
	padding: 1em 2em;
	text-decoration: none;
	font-size: 1em;
	font-variant:small-caps;
}

.pdf:link,
.pdf:visited{
	color: #31549B;
}

.pdf:hover{
	color: #000;
}

.pdf:active{
	color: #fff;
}



/*
============
***SLIDER***
============
*/

label, a {
  cursor: pointer;
  text-decoration: none;
}

* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
label, #active, img { -moz-user-select:none;-webkit-user-select:none; }
#slider {
	margin: 0 auto;
}


/* NEW EXPERIMENT */
/* Slider Setup */

input {
	display: none;
}

#slide1:checked ~ #slides .inner { margin-left:0; }
#slide2:checked ~ #slides .inner { margin-left:-100%; }
#slide3:checked ~ #slides .inner { margin-left:-200%; }
#slide4:checked ~ #slides .inner { margin-left:-300%; }
#slide5:checked ~ #slides .inner { margin-left:-400%; }

#overflow {
	width: 100%;
	overflow: hidden;
}


article .image {
	margin-left: 5.36em; 
	width: 70%;
  	z-index: 99999;
}

article .image:hover{
	border-width: 960px;
	-webkit-transform: width(100%);
	-webkit-transition: .3s linear;
	box-shadow: 0 0 10px #000;
}

#slides .inner {
	width: 500%;
}

#slides article {
	padding-top: 1em;
	width: 20%;
	float: left;
}

/* Slider Styling */

/* Control Setup */

#controls {
	margin: -25% 0 0 0;
	width: 100%;
	height: 50px;
}

#controls label { 
	width: 50px;
	height: 50px;
	opacity: 0.3;
  &:hover { opacity: 0.8; }
}

#slide1:checked ~ #controls label:nth-child(2), 
#slide2:checked ~ #controls label:nth-child(3), 
#slide3:checked ~ #controls label:nth-child(1) {
	background: url('http://csscience.com/responsiveslidercss3/next.png') no-repeat;
	float: right;
	margin: 0 -70px 0 0;
	display: block;
}


#slide1:checked ~ #controls label:nth-child(3),
#slide2:checked ~ #controls label:nth-child(1),
#slide3:checked ~ #controls label:nth-child(2){
	background: url('http://csscience.com/responsiveslidercss3/prev.png') no-repeat;
	float: left;
	margin: 0 0 0 -70px;
	display: block;
}

/* Info Box */

.info {
	line-height: 20px;
	margin: 0 0 -150%;
	position: absolute;
	padding: 30px 30px;
	opacity: 0;
	text-align: left;
}

.info h3 {
	margin: 0 0 5px;
	font-size: 22px;
	font-style: normal;
}


/* Animation */

#slides .inner {
	-webkit-transform: translateZ(0);
	-moz-transform: translateZ(0);
	-webkit-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000); 
	-moz-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000); 
    -ms-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000); 
     -o-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000); 
        transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000); /* easeInOutQuart */

	-webkit-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000); 
	-moz-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000); 
    -ms-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000); 
     -o-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000); 
        transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000); /* easeInOutQuart */
}

#slider {
	-webkit-transform: translateZ(0);
	-webkit-transition: all 0.5s ease-out;
	-moz-transform: translateZ(0);
	-moz-transition: all 0.5s ease-out;
	-o-transition: all 0.5s ease-out;
	transition: all 0.5s ease-out;
}

#controls label{
	-webkit-transform: translateZ(0);
	-webkit-transition: opacity 0.2s ease-out;
	-moz-transform: translateZ(0);
	-moz-transition: opacity 0.2s ease-out;
	-o-transition: opacity 0.2s ease-out;
	transition: opacity 0.2s ease-out;
}

#slide1:checked ~ #slides article:nth-child(1) .info,
#slide2:checked ~ #slides article:nth-child(2) .info,
#slide3:checked ~ #slides article:nth-child(3) .info,
#slide4:checked ~ #slides article:nth-child(4) .info,
#slide5:checked ~ #slides article:nth-child(5) .info {
	opacity: 1;
	-webkit-transition: all 1s ease-out 0.6s;
	-moz-transition: all 1s ease-out 0.6s;
	-o-transition: all 1s ease-out 0.6s;
	transition: all 1s ease-out 0.6s;
}

.info, #controls, #slides, #active, #active label, .info h3 {
	-webkit-transform: translateZ(0);
	-webkit-transition: all 0.5s ease-out;
	-moz-transition: all 0.5s ease-out;
	-o-transition: all 0.5s ease-out;
	transition: all 0.5s ease-out;
}

/* Responsive Styling */


@media only screen and (max-width: 850px) and (min-width: 450px) {

	#slider #controls {
		margin: -25% 0 0 15%;
		width: 70%;
		height: 50px;
	}

	#slider #controls label {
		-moz-transform: scale(0.8);
		-webkit-transform: scale(0.8);
		-o-transform: scale(0.8);
		-ms-transform: scale(0.8);
		transform: scale(0.8);
	}

}

@media only screen and (max-width: 450px) {

	#slider #controls {
		margin: -28% 0 0 24%;
		width: 50%;
		height: 50px;
	}

	#slider #slides {
		padding: 1% 0;
		-webkit-border-radius: 0px;
		-moz-border-radius: 0px;
		border-radius: 0px;
	}

	#slider #controls label {
		-moz-transform: scale(0.6);
		-webkit-transform: scale(0.6);
		-o-transform: scale(0.6);
		-ms-transform: scale(0.6);
		transform: scale(0.6);
	}

}


@media only screen and (min-width: 850px) {

	body {
		padding: 0 80px;
	}
}