/* 
	Table of content:
 1. General styles (text, containers)
 2. Menu
 3. About
 4. Portfolio
 5. Resume
 6. Contacts
*/


/* --------------------------- */
/* ---- 1. General styles ---- */
/* --------------------------- */


/* Text styles */
h1  { display:block; color:#fff; margin:0; font-family:'Open sans', sans-serif; font-size:32px; font-weight:300;}
h2  { display:block; color:#fff; margin:0; font-family:'Open sans', sans-serif; font-size:22px; font-weight:300;}
h3  { display:block; color:#404040; margin:0; font-family:'Open sans', sans-serif; font-size:14px; font-weight:300;}
h4  { display:block; color:#fff; margin:0; font-family:'Open sans', sans-serif; font-size:13px; font-weight:300; line-height:18px;}
p  { display:block; color:#fff; margin:0; font-family:'Open sans', sans-serif; font-size:13px; font-weight:300; line-height:18px;}
label {display:block; color:#fff; margin:0; font-family:'Open sans', sans-serif; font-size:16px; font-weight:400;}
span {display:block; color:#404040; margin:0; font-family:'Open sans', sans-serif; font-size:14px; font-weight:300;}

/* Container styles */
.clear-1 { width:260px; height:305px; }
.clear-2 { width:540px; height:305px; }
.clear-3 { width:820px; height:305px; }
.portfolio-item { width:260px; height:260px; }

/* Whole site wrap style */
#wrap { 
	position:relative; 
	width:820px; 
	padding:90px 0; 
	margin: 0 auto;  
	clear: both; 
}
/* Body style */
body { 
	background: url(../images/background/bcg.jpg) no-repeat; 
	background-size: 100% auto; 
	background-attachment: fixed; 
}
/* Fade style needed for first appearing */
.fade-item { 
	display: none; 
	opacity: 0.0; 
	top:0px; 
}

/* Clear divs fix */
.clearfix:after {
	content: "."; 
	display: block; 
	height: 0; 
	clear: both; 
	visibility: hidden;
}
.clearfix { display: inline-block; }

/* Hides from IE-mac */
* html .clearfix { height: 1%; }
.clearfix { display: block; }


/* ------------------- */
/* ----- 2. Menu ----- */
/* ------------------- */


/* Logo */
#logo { 
	position:relative; 
	width:260px; 
	height:120px;
	margin-right:20px; 
	float:left; 
	background: url(../images/logo.png) #fff no-repeat 0px -3px; 
	background-size:110px 110px;  
}
#title { 
	position:absolute; 
	right:10px; 
	bottom:25px; 
}
#title h1 { 
	font-weight:normal; 
	color:#404040; 
	font-weight:700; 
}
#description { 
	position:absolute; 
	right:10px; 
	bottom:5px;
}
/* Soc icons */
#soc-icons ul { 
	position:absolute; 
	top:-40px;
}
#soc-icons ul li { 
	margin-right:10px; 
	float:left;
}
#soc-icons ul li a { 
	display:block; 
	width:30px; 
	height:30px; 
	background-position:0px -30px; 
	-webkit-transition: all 0.4s; 
	-moz-transition: all 0.4s; 
	-o-transition: all 0.4s;
}
#soc-icons ul li a:hover { background-position:0 0;  }
#facebook a { background-image: url(../images/soc-icons/facebook.png); }
#twitter a { background-image: url(../images/soc-icons/twitter.png); }
#linkedin a { background-image: url(../images/soc-icons/linkedin.png); }
#google a { background-image: url(../images/soc-icons/google.png); }

/* Menu */
#menu { 
	position:relative; 
	height:120px; 
}
#menu-items{ 
	position:relative; 
	width:820px; 
}
#menu-items .label  {
	position:absolute; 
	top:0px; 
	width:100%; 
	height:25px; 
	background:#fff;
}
#menu-items .bot-label  {
	position:absolute; 
	bottom:0px; 
	width:100%; 
	height:25px; 
}
#menu-items .bot-label span { 
	display:block; 
	color:#fff; 
	opacity:0.7; 
	margin-left:5px; 
	margin-top:7px; 
	font-family:'Open sans', sans-serif; 
	font-size:12px; 
	font-weight:500; 
	-webkit-transition: all 0.25s ease-in-out; 
	-moz-transition: all 0.25s ease-in-out; 
	-o-transition: all 0.25s ease-in-out; 
}
#menu-items .menu-item { 
	list-style:none; 
	position:relative; 
	width:120px; 
	height:120px; 
	margin-right:20px; 
	float:left;
	-webkit-transition: all 0.25s ease-in-out; 
	-moz-transition: all 0.25s ease-in-out; 
	-o-transition: all 0.25s ease-in-out; 
}
#menu-items .menu-item:hover .bot-label span { 
	opacity:1.0; 
}
#menu-items .menu-item:last-child { 
	margin-right:0px;	
}
#menu-items .menu-item a { 
	position:relative; 
	display: block; 
	height:100%; 
	width:100%;
}
#menu-items .menu-item h3 { 
	position:absolute; 
	bottom:5px; 
	left:5px; 
	text-transform:uppercase; 
	font-weight:400; 
}

/* About button */
#menu-items .menu-about { background: url(../images/icons/about.png) no-repeat #00aeef center; background-size:60px 60px;}
#menu-items .menu-about .label { border-bottom:1px solid #00a1dd; background-color:#fff;}
#menu-items .menu-about .bot-label { background-color:#00a1dd;}
#menu-items .menu-about:hover { background-color:#20bffa;}

/* Portfolio button */
#menu-items .menu-portfolio { background: url(../images/icons/portfolio.png) no-repeat #71aa00 center; background-size:60px 60px;}
#menu-items .menu-portfolio .label { border-bottom:1px solid #659800; }
#menu-items .menu-portfolio .bot-label { background-color:#659800;}
#menu-items .menu-portfolio:hover { background-color:#7ab800;}

/* Resume button */
#menu-items .menu-resume { background: url(../images/icons/resume.png) no-repeat #f3a231 center; background-size:60px 60px;}
#menu-items .menu-resume .label { border-bottom:1px solid #e19323; }
#menu-items .menu-resume .bot-label { background-color:#e19323;}
#menu-items .menu-resume:hover { background-color:#ffb141;} 

/* Contacts button */
#menu-items .menu-contacts { background: url(../images/icons/contacts.png) no-repeat #404040 center; background-size:60px 60px;}
#menu-items .menu-contacts .label { border-bottom:1px solid #303030; }
#menu-items .menu-contacts .bot-label { background-color:#303030;}
#menu-items .menu-contacts:hover { background-color:#555555;}


/* ------------------ */
/* ---- 3. About ---- */
/* ------------------ */


.data-wrap { 
	display:block; 
	position:relative; 
	margin-top:20px;  
}
#about { 
	position:relative; 
	display:block; 
}
#about .about-child { 
	position:relative; 
	float:left; 
	background:#00aeef; 
	margin-right:20px;
}
#about .about-child:last-child { 
	margin-right:0px; 
}
#about .about-child .bottom-label { 
	position:absolute; 
	height:25px; 
	width:100%; 
	bottom:0px; 
	background:#00a1dd; 
}
#about .about-child .top-label { 
	position:absolute; 
	height:25px; 
	width:100%; 
	top:0px; 
	background:#20bffa; 
}
#about .about-child .top-label .top-square { 
	position:absolute; 
	height:25px; 
	width:25px; 
	top:0px; 
	right:0px; 
	background: url(../images/icons/about-small.png) no-repeat #00a1dd center; 
}
#about-text .about-me { 
	position:relative; 
}
#about-text .about-me h2 { 
	background-color:#20bffa;  
	padding-left:10px; 
	padding-top:5px; 
	padding-bottom:5px; 
	font-size:22px; 
	line-height:28px;  
	-webkit-transition: all 0.1s ease-in-out; 
	-moz-transition: all 0.1s ease-in-out; 
	-o-transition: all 0.1s ease-in-out;
}
#about-text .about-me h4 { 
	padding-left:10px; 
	margin-top:5px; 
	line-height:20px; 
	width:240px;  
}
#about-info { 
	position:relative; 
	float:left; 
}
.personal-info { 
	width:260px; 
}
.personal-info li {
		background-color:#00aeef;
		padding:12px 12px;
		height:21px;
		margin-bottom:20px;
		overflow: hidden;
		-webkit-transition: all 0.15s ease-in-out; -moz-transition: all 0.15s ease-in-out; -o-transition: all 0.15s ease-in-out;
}
.personal-info li:hover { 
	background-color:#20bffa;
}
.personal-info li label {
		color: #fff;
		float: left;
		font-weight: 400;
		padding: 16px 13px;
		background-color: #20bffa;
		font-size:15px;
		margin: -13px 12px 0 -12px;
}
.personal-info li span {
		color:#fff;
		line-height:20px;
		margin-top:1px;
}
	
	
/* ---------------------- */
/* ---- 4. Portfolio ---- */
/* ---------------------- */


#portfolio { 
	position:relative; 
	width:840px; 
}
#portfolio .portfolio-child { 
	position:relative; 
	margin-right:20px; 
	margin-bottom:20px; 
	overflow:hidden; 
	float:left;  
}
#portfolio .portfolio-child:last-child { 
	margin-right:0; 
}
#portfolio .portfolio-child .bottom-label { 
	position:absolute; 
	height:25px; 
	width:100%; 
	bottom:0px; 
	background:#05957b; 
}
#portfolio .portfolio-child .top-label { 
	position:absolute; 
	height:25px; 
	width:100%; 
	top:0px; 
	background:#05b091; 
}
#portfolio .portfolio-child .top-label .top-square { 
	position:absolute; 
	height:25px; 
	width:25px; 
	top:0px; 
	right:0px; 
	background: url(../images/icons/portfolio-small.png) no-repeat #05957b center; 
}
#portfolio .portfolio-child .plate { 
	position:absolute; 
	bottom:-214px; 
	height:260px; 
	width:100%; 
	background:rgba(108, 190, 66, .90); 
	z-index:1; 
	-webkit-transition: all 0.9s; 
	-moz-transition: all 0.9s; 
	-o-transition: all 0.9s; 
}
#portfolio .portfolio-child:hover .plate { 
	bottom:0px; 
}
#portfolio .portfolio-child img { 
	width:260px; 
	height:260px; 
	-webkit-transition: all 1.2s; 
	-moz-transition: all 1.2s; 
	-o-transition: all 1.2s; 
}
#portfolio .portfolio-child:hover img { 
	width:280px; 
	height:280px; 
	margin-left:-10px; 
	margin-top:-10px; 
}
.portfolio-child .plate .text-title { 
	position:absolute;  
	height:50px; 
	width:100%; 
	background: url(../images/icons/portfolio_smaller.png) no-repeat 5px 5px; 
	background-size:36px 36px; 
}
.portfolio-child .plate .text-title h2 { 
	position:absolute;  
	font-size:20px; 
	left:48px;
	top:14px;
}
.portfolio-child .plate .text-wrap { 
	position:absolute; 
	left:10px; 
	top:55px; 
	width:240px;  
}


/* ------------------- */
/* ---- 5. Resume ---- */
/* ------------------- */


#resume .resume-child {  
	position:relative; 
	background:#f3a231; 
	float:left; 
	margin-right:20px; 
	height:310px; 
}
#resume .resume-child:last-child { 
	margin-right:0px; 
}
#resume { 
	position:relative;
	display:block; 
}
#resume ul { 
	position:relative; 
}
#resume h2 {  
	height:20px; 
	font-size:18px; 
	font-weight:300; 
	padding:10px 10px; 
	color:#fff; 
	background:#ffb141; 
	position:relative; 
}

/* Work experience styles */
#work { 
	margin-top:10px; 
	width:540px; 
	height:250px; 
	position:relative; 
	overflow:auto; 
}
#work .work-header { 
	margin-bottom:10px;
	background: url(../images/icons/resume_smaller.png) no-repeat 10px 10px; 
	background-size:36px 36px; 
}
#work h3 { 
	margin-left:3px; 
	color:#fff; 
	padding:10px 10px 10px 45px; 
	font-size:16px; 
	font-weight:400;
}
#work .date { 
	font-size:18px;
	background:#fff;
	color:#404040; 
	float:right; 
	margin-top:-30px; 
	padding:5px; 
	font-family:'Open sans', sans-serif;
}
#work h4 { 
	font-weight:400; 
	margin-left:49px; 
	margin-top:-7px; 
	color:#fee0b7}
#work p { 
	padding:0px 10px; 
	margin-bottom:10px; 
	width:500px; 
}

/* Skills styles */
#skills { 
	margin-top:10px;
	width:260px;
	height:250px; 
	position:relative; 
	overflow:auto; 
}
#skills ul li  { 
	width:220px; 
	height:42px; 
	margin:0 0 10px 10px; 
	background:#e19323; 
}
#skills ul li:last-child { 
	margin-bottom:0px;
}
#skills span {
	background:#fff; 
	padding:14px 0 14px 10px; 
	font-weight:400;
}
#skills .rate { 
	float:right; 
	margin-right:10px; 
	font-weight:400; 
	color:#404040; 
	font-size:14px;
}
#skills .c100 { width:210px;}
#skills .c90 { width:195px;}
#skills .c80 { width:180px;}
#skills .c70 { width:165px;}
#skills .c60 { width:150px;}
#skills .c50 { width:135px;}
#skills .c40 { width:120px;}
#skills .c30 { width:105px;}
#skills .c20 { width:90px;}
#skills .c10 { width:75px;}


/* --------------------- */
/* ---- 6. Contacts ---- */
/* --------------------- */


#map { 
	position:relative; 
	width:100%; 
	height:300px;
}
#contacts {  
	position:relative; 
	display:block; 
	clear: both; 
}
#contacts .contacts-child { 
	position:relative;  
	float:left; 
	background:#404040; 
	margin-right:20px; 
	height:332px; 
}
#contacts #contacts-map { 
	background:none; 
	margin-bottom:20px;  
	width:810px; 
	height:300px; 
	border: 5px solid #555555; 
	border-left: 5px solid #404040; 
	border-right: 5px solid #404040; 
	-webkit-transition: all 0.3s ease-in-out; 
	-moz-transition: all 0.3s ease-in-out; 
	-o-transition: all 0.3s ease-in-out; 
}
#contacts .contacts-child:last-child { 
	margin-right:0px; 
}
#contacts .contacts-child .bottom-label { 
	position:absolute; 
	height:25px; 
	width:100%; 
	bottom:0px; 
	background:#555555; 
}
#contacts .contacts-child .top-label { 
	position:absolute; 
	height:25px; 
	width:100%; 
	top:0px; 
	background:#555555; 
}
#contacts .contacts-child .top-label .top-square { 
	position:absolute; 
	height:25px; 
	width:25px; 
	top:0px; 
	right:0px; 
	background: url(../images/icons/contacts-small.png) no-repeat #555555 center; 
}
#contacts h2 { 
	font-size:18px; 
	background:#555555; 
	position:absolute; 
	padding-left: 10px; 
	padding-top: 10px; 
	padding-bottom: 10px; 
	width:250px; 
	background-color:#555555; 
	font-weight:300; 
}
#contacts-form h2 { 
	width:530px; 
}
#contacts-info label { 
	font-size:14px; 
}
#contacts-info ul { 
	position:absolute; 
	top:50px; 
	left:10px; 
	width:240px; 
}
#contacts-info li { 
	display:block; 
	color:#fff; 
	font-family:'Open sans', sans-serif; 
	font-size:14px; 
	font-weight:300; 
	line-height:22px;
	margin-bottom:15px;
}

/* Contact form */
.input { 
	width:300px;
	height:30px;  
}
.textarea { 
	max-width:514px; 
	max-height:80px; 
	border:3px solid #555555; 
	-webkit-transition: all 0.3s ease-in-out; 
	-moz-transition: all 0.3s ease-in-out; 
	-o-transition: all 0.3s ease-in-out;
}
.textarea:hover { 
	border:3px solid #303030;
}
#submit { 
	width:150px; 
	height:30px; 
	border:none;
	background:#707070; 
	color:#fff; 
	font-family:'Open sans', sans-serif; 
	font-size:14px; 
	font-weight:300;  
	-webkit-transition: all 0.3s ease-in-out; 
	-moz-transition: all 0.3s ease-in-out; 
	-o-transition: all 0.3s ease-in-out; 
}
#submit:hover {
	background-color:#585858;
}
#contacts-form form { 
	margin-left:10px; 
	margin-top:45px; 
}
#contacts-form p { 
	margin-bottom:5px; 
}
#contacts-form p label {  
	margin-left:3px; 
	margin-bottom:5px; 
	font-weight:300; 
	font-size:14px; 
}
#contacts-form p input  { 
	border:3px solid #555555;  
	-webkit-transition: all 0.3s ease-in-out; 
	-moz-transition: all 0.3s ease-in-out; 
	-o-transition: all 0.3s ease-in-out;
}
#contacts-form p input:hover  { 
	border:3px solid #303030; 
}