@import url('reset.css');
@import url('slider.css');
@import url('anim.css');
@import url('../font/font.css');

body{
	margin: 0 0 0 0;
	padding: 0 0 0 0;
	height: 100%;
}

html{height: 100%;}

a{text-decoration: none;}
a:visited{text-decoration: none;color: #3E3D40;}

*::selection {background:#3FCBCD;color:#2D292D;}
*::-moz-selection {background:#3FCBCD;color:#2D292D;}
*::-webkit-selection {background:#3FCBCD;color:#2D292D;}

h1 {
    font-size: 54px;
    font-family:'BebasNeueRegular';
    margin: 0;
}


h2 {
    font-size: 14px;
    font-family:'open_sans_lightregular';
    margin: 15px 0 0 0;
    text-transform: uppercase;
}

#container {
	width:100%;
	height:700px;
	background:#ECEDED;	
	overflow:hidden;
}


#home-line{
	width: 100%;
	height: 9px;
	background-color: #3E3D40;
}

#project-container {
	width: 100%;
	height: 3000px;
	background-color:#1f2023;
	z-index: 10;
}

#home {
	width: 600px;
	height: 450px;
	position: absolute;
	left: 50%;
	padding-top: 120px;
	margin-left: -300px;
	color: #3E3D40;
	text-align: center;
	overflow: hidden;
	z-index: 200;
}

#menu{
	width: 295px;
	height: 30px;
	left: 50%;
	margin-left: -147px;
	top: 65%;
	position: absolute;
	z-index: 999;
}

.item-menu{
	float: left;
	font-family: 'open_sans_lightregular';
	font-size: 14px;
	color: #fff;
	background-color: #3E3D40;
	margin: 0 10px 0 0;
	padding: 5px;
	-webkit-transition: background-color 0.2s ease-in;
	-moz-transition: background-color 0.2s ease-in;
	-o-transition: background-color 0.2s ease-in;
	transition: background-color 0.2s ease-in;
}

.item-menu a{
	color: #fff;
	text-decoration: none;
	text-shadow: #000 0 2px 0;
}

.item-menu:hover{
	background-color: #666566;
}

.separator{
	height: 15px;
	width: 100%;
	background-color: #fff;
	-moz-box-shadow: 0px -1px 0px 0px #cfcfcf;
	-webkit-box-shadow: 0px -1px 0px 0px #cfcfcf;
	-o-box-shadow: 0px -1px 0px 0px #cfcfcf;
	box-shadow: 0px -1px 0px 0px #cfcfcf;
	filter:progid:DXImageTransform.Microsoft.Shadow(color=#cfcfcf, Direction=90, Strength=0);
}

.hello{font-family: 'BebasNeueRegular';font-size: 65pt;}
.hello img {margin-right: 5px;}
.name{font-family: 'CodeLightRegular';font-size: 60pt;margin-top:-10px;letter-spacing: -2px}
.student{font-family: 'CodeBoldRegular';font-size: 12pt;margin-top:-5px;}
.welcome{font-family: 'SnicklesRegular';font-size: 70pt;margin-top:30px;}
.to{font-family:'BebasNeueRegular';;font-size: 60pt;letter-spacing:-2px;	text-transform: uppercase;margin-top:-20px;}

#project-title {
	width: 100%;
	height: 100px;
	margin-top: 20px;
	background:  #fff;
	text-align: center;
	font-family: 'SnicklesRegular';
	font-size: 50px;
	color: #2D292D;
}


#p1-container{
	width: 960px;
	height: 890px;
	margin: 0 auto;
	padding-top: 20px;
}

#p1-text{
	width: 330px;
	height: 480px;
	color: #2D292D;
	margin: 20px 0 0 0;
	font-family: 'Open Sans Condensed', sans-serif;
	font-size: 16px;
	position: absolute;
}


#p1-text p {
	line-height:18px;
	color: #fff;
	margin: 40px 0 0 0 ;
}

#p1-text span{
	background-color: #FFF;
	padding: 0 5px 0 5px;
	margin: 0;
	color: #3E3D40;
}

#p1-text h2 span {
	padding: 5px; 
}

#p1-text a{
	letter-spacing: 0px;
	font-size: 14px;
	color: #fff;
}

#p1-text a:hover{color: #33BCBC;}

#p1-ipad{
	width: 600px;
	height: 356px;
	background: url('../img/p1-ipad2.jpg');
	position: absolute;
	margin: 0 0 0 360px;
	z-index: 10;
}

#p1-img{
	width: 960px;
	height: 367px;
	position: absolute;
	margin: 366px 0 0 0;
}

#p1-content1{
	width: 747px;
	height: 240px;
	position: absolute;
	background-color: green;
}

#p1-content2{
	width: 203px;
	height: 240px;
	position: absolute;
	background: url('../img/p1-content-2.jpg');
	margin: 0 0 0 757px;
}

#p1-content3{
	width: 167px;
	height: 117px;
	position: absolute;
	background: url('../img/p1-content-3.jpg');
	margin: 250px 0 0 0;
}

#p1-content4{
	width: 162px;
	height: 117px;
	position: absolute;
	background: url('../img/p1-content-4.jpg');
	margin: 250px 0 0 177px;
}

#p1-content5{
	width: 182px;
	height: 117px;
	position: absolute;
	background: url('../img/p1-content-5.jpg');
	margin: 250px 0 0 349px;
}

#p1-content6{
	width: 419px;
	height: 117px;
	position: absolute;
	background: url('../img/p1-content-6.jpg');
	margin: 250px 0 0 541px;
}



.tag1{
	margin: 15px 10px 0 0;
	padding: 5px 5px 3px 5px;
	background-color: #fff;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	float: left;
	color: #2D292D;
	text-transform: uppercase;
	font-family: 'Open Sans Condensed', sans-serif;
	font-size: 12px;
}

.tag2{
	margin: 15px 10px 0 0;
	padding: 5px 5px 3px 5px;
	background-color: #3E3D40;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	float: left;
	color: #fff;
	text-transform: uppercase;
	font-family: 'Open Sans Condensed', sans-serif;
	font-size: 12px;
}



#p2-background{
	width: 100%;
	height: 1300px;
	background-color: #ECEDED;
}

#p2-container{
	width: 960px;
	height:1200px;
	margin: 0 auto;
}

#p2-text{
	width: 480px;
	height: 560px;
	position: absolute;
	font-family: 'Open Sans Condensed', sans-serif;
	font-size: 16px;
	letter-spacing
}

.text-paragraph{
	font-family: 'Open Sans Condensed', sans-serif;
	font-size: 16px;
	letter-spacing: 0px;
}

#p2-text p {
	line-height:18px;
	color: #3E3D40;
	padding: 0 0 15px 0;
	margin: 40px 0 0 0;
}

#p2-text h1 {
	margin: 30px 0 0 0;
}

#p2-img{
	width: 470px;
	height: 560px;
	position: absolute;
	margin: 20px 0 0 490px;
}

#p2-text span{
	background-color: #3E3D40;
	padding: 0 5px 0 5px;
	margin: 0;
	color: #fff;
}

#p2-text h2 span{
	padding: 5px;
}

#p2-text a:hover{color: #33BCBC;}
#p2-text a:link{color: #3E3D40;}

#p2-text a{
	font-weight: bold;
	letter-spacing: -1px;
	font-size: 14px;
}

#p2-iphone-front{
	height: 560px;
	background: url('../img/iphone-front.png');
	position: relative;
}

#p2-iphone-back{
	height: 560px;
	background-image: url('../img/iphone-back.png');
	position: relative;
}

#p2-content{
	width: 960px;
	height: 537px;
	position: absolute;
	margin: 580px 0 0 0;
}


#p2-content-1{
	width: 743px;
	height: 246px;
	position: absolute;
	background: url('../img/p2-content-1.jpg');
}

#p2-content-2{
	width: 207px;
	height: 246px;
	position: absolute;
	margin: 0 0 0 753px;
	background: url('../img/p2-content-2.jpg');
}

#p2-content-3{
	width: 500px;
	height: 281px;
	position: absolute;
	margin: 256px 0 0 0;
}

#p2-content-4{
	width: 183px;
	height: 281px;
	background-color:#444;
	position: absolute;
	margin: 256px 0 0 510px;
	background: url('../img/p2-content-4.jpg');
}

#p2-content-5{
	width: 257px;
	height: 127px;
	background: url('../img/p2-content-5.jpg');
	position: absolute;
	margin: 256px 0 0 703px;
}

#p2-content-6{
	width: 257px;
	height: 144px;
	background: url('../img/p2-content-6.jpg');
	position: absolute;
	margin: 393px 0 0 703px;
}






#p3-background{
	width: 100%;
	height: 1000px;
	background-color:#ECEDED;
}

#p3-container{
	width: 960px;
	height:1200px;
	margin: 0 auto;
}

#p3-text{
	width: 480px;
	height: 560px;
	position: absolute;
	font-family: 'Open Sans Condensed', sans-serif;
	font-size: 16px;
	letter-spacing
}

#p3-text p {
	line-height:18px;
	color: #3E3D40;
	padding: 0 0 15px 0;
	margin: 40px 0 0 0;
}

#p3-text h1 {
	margin: 70px 0 0 0;
}

#p3-text span{
	background-color: #3E3D40;
	padding: 0 5px 0 5px;
	margin: 0;
	color: #FFF;
}

#p3-text h2 span{
	padding: 5px;
}

#p3-content{
	width: 960px;
	height: 800px;
	position: absolute;
	margin-top: -70px;
}

#p3-content-1{
	width: 475px;
	height: 267px;
	position: absolute;
	margin: 120px 0 0 0; 
}

#p3-content-2{
	width: 475px;
	height: 180px;
	background: url('../img/p3-content-2.jpg');
	position: absolute;
	margin: 0 0 0 485px; 
}

#p3-content-3{
	width: 475px;
	height: 267px;
	position: absolute;
	margin: 190px 0 0 485px; 
}

#p3-content-4{
	width: 475px;
	height: 267px;
	position: absolute;
	margin: 399px 0 0 0; 
}

#p3-content-5{
	width: 150px;
	height: 196px;
	background: url('../img/p3-content-5.jpg');
	position: absolute;
	margin: 470px 0 0 485px; 
}

#p3-content-6{
	width: 312px;
	height: 196px;
	background: url('../img/p3-content-6.jpg');
	position: absolute;
	margin: 470px 0 0 648px; 
}





#p6-background{
	width: 100%;
	height: 1050px;
	background-color:#1f2023;
}

#p6-container{
	width: 960px;
	height:1050px;
	margin: 0 auto;
}

#p6-text{
	width: 480px;
	height: 560px;
	position: absolute;
	font-family: 'Open Sans Condensed', sans-serif;
	font-size: 16px;
}

#p6-text p {
	line-height:18px;
	color: #FFF;
	padding: 0 0 15px 0;
	margin: 40px 0 0 0;
}

#p6-text h1 {
	margin: 70px 0 0 0;
}

#p6-text span{
	background-color: #FFF;
	padding: 0 5px 0 5px;
	margin: 0;
	color: #3E3D40;
}

#p6-text h2 span{
	padding: 5px;
}

#p6-text a{
	letter-spacing: 0px;
	font-size: 14px;
	color: #fff;
}

#p6-text a:hover{color: #33BCBC;}

#p6-content{
	width: 960px;
	height: 670px;
	position: absolute;
}

#p6-content-1{
	width: 475px;
	height: 319px;
	position: absolute;
	margin: 140px 0 0 0;
	background: url('../img/p6-content-4.jpg');
}

#p6-content-2{
	width: 475px;
	height: 470px;
	position: absolute;
	margin: -360px 0 0 485px;
	background: url('../img/p6-content-2.png');
}

#p6-content-3{
	width: 188px;
	height: 319px;
	position: absolute;
	margin: 140px 0 0 772px;
	background: url('../img/p6-content-3.jpg');
}



#p6-content-5{
	width: 275px;
	height: 319px;
	position: absolute;
	margin: 140px 0 0 485px;
	background-color: blue;
	background: url('../img/p6-content-5.jpg');
}








#p7-background{
	width: 100%;
	height: 900px;
	background-color:#ECEDED;
}

#p7-container{
	width: 960px;
	height:1100px;
	margin: 0 auto;
}

#p7-text{
	width: 480px;
	height: 560px;
	position: absolute;
	font-family: 'Open Sans Condensed', sans-serif;
	font-size: 16px;
}

#p7-text p {
	line-height:18px;
	color: #2D292D;
	padding: 0 0 15px 0;
	margin: 40px 0 0 0;
}

#p7-text h1 {
	margin: 70px 0 0 0;
}

#p7-text span{
	background-color: #3E3D40;
	padding: 0 5px 0 5px;
	margin: 0;
	color: #FFF;
}

#p7-text h2 span{
	padding: 5px;
}

#p7-text a:hover{color: #33BCBC;}

#p7-content{
	width: 960px;
	height: 600px;
	position: absolute;
}

#p7-content-1{
	width: 245px;
	height: 220px;
	position: absolute;
	background: url('../img/p7-content-1.jpg');
}

#p7-content-3{
	width: 220px;
	height: 220px;
	position: absolute;
	margin: 0 0 0 255px;
	background: url('../img/p7-content-3.jpg');
}

#p7-content-2{
	width: 475px;
	height: 679px;
	position: absolute;
	margin: -177px 0 0 485px;
	background: url('../img/p7-content-2.jpg');
}

#p7-content-4{
	width: 475px;
	height: 272px;
	position: absolute;
	margin: 230px 0 0 0; 
	background: url('../img/p7-content-4.jpg');
}







#p4-background{
	width: 100%;
	height: 1150px;
	background-color:#1f2023;
}

#p4-container{
	width: 960px;
	height: 1150px;
	margin: 0 auto;
}

#p4-text{
	width: 480px;
	height: 560px;
	position: absolute;
	font-family: 'Open Sans Condensed', sans-serif;
}

#p4-text p {
	line-height:18px;
	color: #fff;
	padding: 0 0 15px 0;
	margin: 50px 0 0 0;
}

#p4-text h1 {
	margin: 70px 0 0 0;
}

#p4-text span{
	background-color: #FFF;
	padding: 0 5px 0 5px;
	margin: 0;
	color: #3E3D40;
}

#p4-text h2 span{
	padding: 5px;
}


#p4-content{
	width: 960px;
	height: 780px;
	position: absolute;
	margin: 200px 0 0 0;
}

#p4-content-1{
	width: 500px;
	height: 281px;
	position: absolute;
	margin: 200px 0 0 0;
}

#p4-content-2{
	width: 223px;
	height: 281px;
	position: absolute;
	margin: 0 0 0 510px;
}

#p4-content-3{
	width: 216px;
	height: 281px;
	position: absolute;
	margin: 0 0 0 744px;
}

#p4-content-4{
	width: 450px;
	height: 190px;
	position: absolute;
	margin: 291px 0 0 510px;
}


#p4-content-5{
	width: 223px;
	height: 281px;
	position: absolute;
	margin: 520px 0 0 0;
}

#p4-content-6{
	width: 216px;
	height: 281px;
	position: absolute;
	margin: 520px 0 0 234px;
}

#p4-content-7{
	width: 500px;
	height: 281px;
	position: absolute;
	margin: 520px 0 0 460px;
}






#p5-background{
	width: 100%;
	height: 900px;
	background-color:#1f2023;
}

#p5-container{
	width: 650px;
	height: 800px;
	margin: 0 auto;
	color: #ECEDED;
	padding-top: 20px;
}

#p5-container p{
	font-family: 'Open Sans Condensed', sans-serif;
	margin-top: 20px;
		
}

#p5-container img{
	margin-right: 5px;
}

.about-link img{
    float: left;
    margin: 5px;
    -webkit-transition: margin 0.1s ease-out;
    -moz-transition: margin 0.1s ease-out;
    -o-transition: margin 0.1s ease-out;
}

.about-link img:hover {
    margin-top: 10px;
}

.about-cv{
	position: absolute;
	margin: 80px 0 0 -180px;
}



.about-title{font-family: 'SnicklesRegular';font-size: 65pt;text-align:center;}
.about-subtitle{font-family: 'BebasNeueRegular';font-size: 22pt;text-align:center;margin-top: -10px;}