@charset "utf-8";
/*Shiela Espiritu - Web & Graphic Designer - www.shielaespiritu.com*/
/*About Section CSS Stylesheet*/

#about-content{
	width:930px;
	height:auto;
	margin:auto;
	padding-left:50px;
	border:0;
	z-index:100;
}

/*Copy*/
#about-info{
	width:445px;
	float:left;
	text-align:justify;	
	margin-top:190px;
}

#about-info .about-copy{
	width:100%;
	line-height:22px;
	z-index:500;
}

#about-info .text{
	width:100px;
	font-family:OswaldRegular, Arial, Helvetica, sans-serif;
	font-size:18px;
	padding:2px 3px 0 5px;
	background-color:#991057;
	color:#cccccc;
	margin:30px 0 10px 0;
	z-index:500;		
}

/*Software Icons*/
#about-info .software-icons{
	width:100%;
	float:left;		
}

.software-icons img{
	width:38px;
	margin-top:0;
	padding-right:3px;
	border-style:none;
	z-index:500;
	-webkit-transition: all .1s linear;
	-moz-transition: all .1s linear;
	-o-transition: all.1s linear;
	transition: all .1s linear;
}

.software-icons img:hover{
	-webkit-transform: scale(1.3); 
	-moz-transform: scale(1.3); 
	-o-transform: scale(1.3); 
	-ms-transform: scale(1.3);
}

/*Image*/
#about-image{
	width:475px;
	height:780px;
	margin:0;
	padding-left:10px;
	float:left;
	z-index:100;
}

img.my-image{
	width:475px;
	height:480px;
	margin-top:140px;
	float:left;	
	z-index:100;
}

#material-ctr{
	width:100%;
	float:left
}

img.materials{
	width:238px;
	position:relative;
	top:-140px;
	left:10px;
	z-index:500;
	-webkit-transition: all .3s ease-in-out; 
	-moz-transition: all .3s ease-in-out; 
	-o-transition: all .3s ease-in-out; 
	-ms-transition: all .3s ease-in-out;
}

img.materials:hover{
	cursor:pointer;
	-webkit-transform: rotate(360deg) scale(1.1); 
	-moz-transform: rotate(360deg) scale(1.1); 
	-o-transform: rotate(360deg) scale(1.1); 
	-ms-transform: rotate(360deg) scale(1.1);
}

/*Material Buttons*/
#material-menu{
	width:200px;
	list-style:none;
	position:relative;
	top:-180px;
	left:205px;
	font-size:10px;
	color:#333333;
	z-index:600;
}

ul.material-btn{
	list-style:none;
}

.material-btn .color{
	float:left;
	width:10px;
	height:10px;
	color:block;
    margin:5px 5px 0 0;
	-webkit-transition: all .1s linear;
	-moz-transition: all .1s linear;
	-o-transition: all.1s linear;
	transition: all .1s linear;
}

.material-btn .color:hover{
	-webkit-transform: scale(1.5); 
	-moz-transform: scale(1.5); 
	-o-transform: scale(1.5); 
	-ms-transform: scale(1.5);	
}

.blue-green{
	background:#1cbbb4;
}

.pink{
	background:#ee0c7c;
}

.orange{
	background:#ff4a01;
}

.purple{
	background:#4b1b63;
}

.blue{
	background:#1c55c5;
}

/*Resume Button*/
img.resume-btn{
	width:95px;
	position:relative;
	top:-375px;
	left:230px;
	z-index:500;	
	-webkit-transition: all .5s linear;
	-moz-transition: all .5s linear;
	-o-transition: all.5s linear;
	transition: all .5s linear;
}

img.resume-btn:hover{
	-webkit-transform: scale(1.2); 
	-moz-transform: scale(1.2); 
	-o-transform: scale(1.2); 
	-ms-transform: scale(1.2);
}

/*Triangle Bg*/
img.triangle-bg1{
	height:160px;
	position:relative;
	top:-350px;
	left:-90px;
	opacity:0.8;
	z-index:-1;
}

img.triangle-bg2{
	width:465px;
	position:relative;	
	top:-600px;
	left:-50px;
	z-index:-1;
}

img.triangle-bg3{
	width:233px;
	position:relative;
	top:-418px;
	left:120px;
	opacity:0.8;
	z-index:-1;
}