/*  
Theme Name: Responsive Resume 
Description:  Responsive Resume is a clean resume template, which comes in 5 different colors, and can be use for any kind of bussines domain that you working.Display your professional skills,   		 			 education, portfolio,employment education in a new solid way, on every device, from phone, tablet, to desktop. 
Version: 1.0
Author: Moraru Razvan aka Hazmy
Author URI: http://themeforest.net/user/Hazmy
*/

/* Table of Content
==================================================
	#Site Styles
	#General Typography
	#Header
	#Navigation
	#Profile
	#Employment and Education
	#Skills
	#Portfolio
	#Contact
	#Footer	
	#Media Queries
	#Font-Face */

/* #Site Styles
================================================== */

/*========================================
 	==== General Typorgraphy ====  
========================================*/

body {
	background: url(../images/bg-header.png) repeat;
	font-family: Arial, Helvetica, sans-serif;
	line-height:1.6em;
	overflow-x:hidden;
}
* {
	-moz-box-sizing: border-box;
	-webkit-box-sizing:border-box;
-o-box-sizing:border:box;
	box-sizing:border-box;
}
/* ================================ 
	Typography and General Styling 
=================================== */
h1 {
	font-size:24px;
	font-family:'BebasRegular', Arial, Helvetica, sans-serif;
	color:#e6b030;
	letter-spacing:0.1em;
	word-spacing:5px;
}
h2 { font-size:22px; }
h3 { font-size:20px; }
h4 {
	font-size:18px;
	font-family: Arial, Helvetica, sans-serif;
	font-weight:bold;
	color:#373737;
	margin-bottom:0px;
}
h5 { font-size:16px; }
li p, p {
	color:#333231;
	font-family: Arial, Helvetica, sans-serif;
	line-height:1.5em;
	font-size:14px;
	margin-bottom:0px;
}
/* ===== End Headings and paragraphs ===== */

/*===== Lists =====*/
ul, ol { margin-bottom:0px; }
ul li { margin-bottom:15px; }
/*===== End Lists =====*/

/*===== Links ===== */
a { color:#333231; }
a:focus, a:hover, a.active {color:#242424;  }

/*===== End Links ===== */


/*========================================
 	==== End General Typorgraphy ====  
========================================*/


/*========================================
 	==== Header ====  
========================================*/
.outside-header {
	border-top: 5px solid #e6b030;
	width:100%;
	border-bottom:5px solid #e6b030;
}
.header { padding:60px 0px 40px; }
/*===== .logo =====*/
.header .logo {
	width:434px;
	height:114px;
	display:block;
}
.header .logo a {
	height:0px;
	line-height:0px;
	overflow:hidden;
	color:transparent;
}
/*===== End .logo =====*/

/*===== Contact-info =====*/
.header .contact-info { float:right; }
.contact-info li {
	color:#333231;
	font-size:12px;
	font-weight:bold;
	clear:both;
	margin-bottom:10px;
	height:20px;
	line-height:20px;
}
.contact-info span {
	text-align:right;
	float:right;
	margin-left:39px;
}
.contact-info a { float:right; }
.contact-icon {
	width:20px;
	height:17px;
	float:left;
	line-height:20px;
}


.iphone-icon {
	width:9px;
	height:17px;
	margin:0 auto;
	display:block;
	margin-top:2px;
}
.marker-icon {
	width:11px;
	height:16px;
	margin:0 auto;
	display:block;
	margin-top:2px;
}
.laptop-icon {
	width:16px;
	height:13px;
	margin:0 auto;
	display:block;
	margin-top:3px;
}
.email-icon {
	width:15px;
	height:12px;
	margin:0 auto;
	display:block;
	margin-top:4px;
}
/*===== End Contact-info =====*/




/*========================================
 	==== End Header ====  
========================================*/

/*========================================
 	==== Begin #Navigation ====  
========================================*/
.nav .contact-form-mob { display:none; }
.nav select { display:none; }
.nav .primary {
	position:fixed;
	display:block;
	z-index:1000;
}
.nav .primary li {
	font-family: BebasRegular, Arial, Helvetica, sans-serif;
	font-size:22px;
	color:#373737;
	text-align:left;
	text-shadow: 0px 1px 1px #604504;
	height:50px;
	text-transform:uppercase;
	margin-bottom:10px;
}
.nav .primary li span.active {
	line-height:39px;
	height:50px;
	width:5px;
	display:block;
	position:relative;
	left:190px;
	bottom:35px;
	background: #fff url(../images/bg-main.png) repeat;
}
.nav .primary li span.active img {
	position:relative;
	right:3px;
}
.nav .primary li a {
	text-decoration:none;
	background:#e6b030;
	padding:12px;
}
.nav .primary li.first { margin-top:50px; }
/*========================================
 	====End #Navigation ====  
========================================*/

/*========================================
 	====Begin #Profile ====  
========================================*/
.profile h4 {
	color:#e6b030;
	border-bottom:1px solid #e6b030;
	padding-bottom:5px;
}
.profile .four.columns { margin-top:20px; }
.profile .four.columns p {
	border-top:1px solid #fff;
	padding-top:10px
}
.profile .four.columns.about { margin-top:0px; }
.profile .eight.columns.about p { margin-bottom:15px; }
.profile .eight.columns.about p.me {
	font-size:14px;
	font-weight:bold;
}
.profile .eight.columns.about p.me span {
	color:#e6b030;
	text-decoration:underline;
}
.profile .eight.columns.about p.me span:first-child { text-decoration:none; }
.about.four.columns img {
	width:170px;
	height:190px;
	border:5px solid #e6b030;
}
.four.columns.img .img-holder {
	background: url(../images/image-shadow.png) right bottom no-repeat;
	padding-bottom:3px;
	width:175px;
	position:relative;
}
span.corner {
	position:absolute;
	background: url(../images/corner.png) no-repeat;
	width:40px;
	height:30px;
	right:6px;
	bottom:14px;
	display: block;
}
h1.title {
	margin-left:40px;
	background: url(../images/title-bg.png) repeat;
	display:block;
	line-height:40px;
	border-left:1px solid #fff;
	padding-left:20px;
	margin-top:40px;
	margin-bottom:40px;
	text-shadow:1px 1px 1px #b98f46;
}
span.cross {
	height:40px;
	width:40px;
	border-right:1px solid #e6b030;
	border-left:1px solid #e6b030;
	display:block;
	line-height:40px;
	float:left;
	margin-top:40px;
}
span.cross img {
	margin:12px auto 0px;
	width:15px;
	height:15px;
	display:block;
}
h1.title span.arrow-top {
	float:right;
	margin-right:10px;
}
/*========================================
 	====End #Profile ====  
========================================*/


/* ======= General styling for section ======= */
.thirteen.columns.offset-by-three {
	border-left:5px solid #e6b030;
	padding-left:55px;
	margin-left:200px;
	padding-bottom:100px;
	border-top:5px solid #e6b030;
}
.thirteen.columns.offset-by-three.first { border-top:none; }
.outside-main { background: #fff url(../images/bg-main.png) repeat; }
/* ======= End General styling for section ======= */


/*========================================
 	==== Main Content ====  
========================================*/
/*========================================
 	====Begin #Employment and #Education ====  
========================================*/
.employment .four.columns span, .education .four.columns span {
	display:block;
	float:left;
}
.date {
	font-family:BebasRegular, Arial, Helvetica, sans-serif;
	font-size:14px;
	padding:5px;
	background:rgba(230,176,48, 0.4);
	float:left;
}
.employment ul.description li span, .education ul.description li span {
	color:#e6b030;
	font-size:14px;
	font-weight:bold;
	font-family: Arial, Helvetica, sans-serif;
	margin-right:10px;
}
.employment ul.description li p, .education ul.description p { margin-top:10px; }
.employment span.emp-icon, .education span.emp-icon {
	width:40px;
	height:31px;
	display:block;
	margin-right:40px;
	text-align:center;
	line-height:31px;
}
.employment h4 span, .education h4 span { color:#e6b030; }
.employment h4, education h4 { margin-bottom:15px; }
.employment .eight.columns, .education .eight.columns {
	padding-bottom:40px;
	background: url(../images/sep-line.png) bottom center repeat-x;
	margin-top:40px;
}
.employment .four.columns, .education .four.columns { margin-top:40px; }
/*========================================
 	====End #Employment and #Education ====  
========================================*/




/*========================================
 	====Begin #Skills ====  
========================================*/
.skills .column, .skills .columns {
	margin-right:15px;
	margin-left:15px;
}
.skills .columns.omega { margin-right:0px; }
.skills .columns.alpha { margin-left:0px; }
.skills .six.columns {
	margin-bottom:40px;
	width:330px;
}
.skills p {
	font-size:12px;
	margin-bottom:20px;
}
.skills h4 span { color:#e6b030; }
.skill-bar li {
	width:50px;
	margin-right:20px;
	background:#e6b030;
	height:10px;
	float:left;
	display:inline;
}
.skill-bar li.last { margin-right:0px; }
.skill-bar .inactive { background:#d4d4d4; }
/*========================================
 	====End #Skills ====  
========================================*/


/*========================================
 	====Begin #Porfolio ====  
========================================*/

.portfolio ul.twelve.columns li {
	float:left;
	display:inline;
	margin-bottom:40px;
}
.portfolio .four.columns img {
	width:220px;
	height:160px;
	border:5px solid #e6b030;
	cursor:pointer;
}
.portfolio .four.columns.img .img-holder {
	position:relative;
	background:  url(../images/image-shadow.png) right bottom no-repeat;
	padding-bottom:3px;
	width:220px;
}
.portfolio .four.columns.img .img-holder div.hover {
	display:none;
	width:220px;
	height:160px;
	position:absolute;
	top:0px;
	left:0px;
	background:#fff;
	text-align:center;
}
.portfolio ul.twelve.columns li:hover .img-holder .hover {
	display: block;
	cursor:pointer;
}
.portfolio ul.twelve.columns li:hover .img-holder .hover h4 {
	text-decoration:none;
	font-size:20px;
	color:#e6b030;
	text-align:center;
	font-family:BebasRegular, Arial, Helvetica, sans-serif;
	margin-top:20px;
}
.portfolio ul.twelve.columns li:hover .img-holder .hover p {
	text-align:center;
	font-weight:bold;
	font-size:14px;
	color:#343433;
}
.portfolio ul.twelve.columns li:hover .img-holder .hover span {
	text-align:center;
	background:#343332;
	color:#e6b030;
	padding:5px;
	font-size:12px;
	font-weight:bold;
	margin-top:20px;
	display:block;
}
/*========================================
 	====End #Porfolio ====  
========================================*/


/*========================================
 	====Begin #Contact ====  
========================================*/
.hide { display:none; font-size:10px; color:red; }
#contact h1 {
	margin-top:20px;
	position:absolute;
	top:-65px;
	text-shadow:1px 1px 1px #b98f46;
}

#contact form label {
	color:#333231;
	font-size:12px;
}
#contact form input { width:280px; }
#contact form {
	padding:20px;
	margin-bottom:0px;
}
#contact form textarea { width:280px; }
#contact form button {
	font-family:Arial;
	margin-bottom:0px;
	width:100px;
	height:30px;
	background: url(../images/send-button.png) no-repeat;
	border:none;
	border-radius:0px;
	-webkti-border-radius:0px;
	-moz-border-radius:0px;
	color:#fff;
	text-shadow:1px 1px 1px #b98f46;
}


/*========================================
 	====End #Contact ====  
========================================*/


/*========================================
 	====Begin #Footer ====  
========================================*/

#footer {
	width:100%;
	height:33px;
	bottom:0px;
	background:#e6b030;
	border-top:2px solid #fff;
}
#footer ul.social { float:right; }
#footer ul.social li {
	float:left;
	display: inline;
	margin-right:15px;
	height:35px;
	line-height:35px;
	margin-top:3px;
	margin-bottom:0px;
}
#footer ul.social li:first-child { margin-top:0px; }
#footer ul.social li a.download-btn {
	position: relative;
	bottom:6px;
	width:128px;
	height:37px;
	display: block;
	font-size:12px;
	font-family:BebasRegular, Arial, Helvetica, sans-serif;
	color:#fff;
	text-shadow:1px 1px 1px #b98f46;
	background: url(../images/download-btn.png) no-repeat;
	text-decoration:none;
	text-align:center;
	line-height:37px;
	letter-spacing:0.1em;
	word-spacing:5px;
}
#footer ul.social li a:hover { color:#333; }
#footer ul.social li:last-child { margin-right:0px; }
#footer h5 {
	float:left;
	font-size:12px;
	font-family: Arial, Helvetica, sans-serif;
	color:#4c4535;/*letter-spacing:0.1em;
	word-spacing:5px;*/
	line-height:30px;
}
#footer .container .thirteen.columns.offset-by-three {
	border-left:none;
	padding-bottom:0px;
	border-top:none;
}
/*========================================
 	====End #Footer ====  
========================================*/

/* ========================================
 			==== MIsc ==== 
========================================*/ 

/* ===== Fancybox changes ==== */
#fancybox-title-over {
	margin-bottom:5px;
	margin-left:5px;
}
#fancybox-title {
	margin: 0 auto;
	width:100% !important;
	padding-right:5px;
}
#fancybox-bg-n, #fancybox-bg-ne, #fancybox-bg-e, #fancybox-bg-se, #fancybox-bg-s, #fancybox-bg-sw, #fancybox-bg-w, #fancybox-bg-nw { background-image: none !important; }
#fancybox-content {
	overflow: visible !important;
	border:3px solid #e6b030 !important;
	border-width:5px !important;
}
#fancybox-content div {
	overflow: visible !important;
	border-width:5px;
}
#fancybox-close { display: none !important; }
/* ===== End Fancybox changes ===== */

 
/* ==== Tipsy ==== */
.tipsy {
	padding: 5px;
	font-size: 10px;
	background-repeat: no-repeat;
	background-image: url(../images/tipsy.gif);
}
.tipsy-inner {
	padding: 5px 8px 4px 8px;
	background-color:black;
	color: white;
	max-width: 200px;
	text-align: center;
}
.tipsy-inner {
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
}
.tipsy-north { background-position: top center; }
.tipsy-south {
	background-position:  bottom center;
	margin:0 auto;
}
.tipsy-east { background-position: right center; }
.tipsy-west { background-position: left center; }
/* ==== End Tipsy ==== */	
 
/*========================================
 		==== End  MIsc ==== 
========================================*/ 











/* #Media Queries
================================================== */

	/* Smaller than standard 960 (devices and browsers) */
	@media only screen and (max-width: 959px) {
.nav ul.primary {
	display:block;
	z-index:99999;
}
}

	/* Tablet Portrait size to standard 960 (devices and browsers) */
	@media only screen and (min-width: 768px) and (max-width: 959px) {
.body { overflow-y:hidden; }
}

	/* All Mobile Sizes (devices and browser) */
	@media only screen and (max-width: 767px) {
/*===== .logo =====*/		
.header .logo {
	width:100%;
	height:108px;
}
/*===== End .logo =====*/	
	
		
/*========================================
 	==== Begin #Navigation ====  
========================================*/
.nav ul.primary { display:none; }
.nav .contact-form-mob {
	width:40px;
	height:30px;
	display:block;
	background: url(../images/mail-mob.png) no-repeat;
	float:left;
	margin-top:23px;
	margin-left:20px;
}
select {
	width:86%;
	height: 35px;
	margin-top: 20px;
	float: left;
	display: block;
	border:1px solid #e6b030;
	padding: 5px 20px 5px 0px;
}
ul.primary { display: none; }
.nav select { display: inline-block; }
.nav .primary select { display:block; }
/*========================================
 	==== End #Navigation ====  
========================================*/


.thirteen.columns.offset-by-three {
	border-left: none;
	padding-left:0px;
	margin-left:0px;
}
/*========================================
    ====Begin #Footer ====  
========================================*/
#footer {
	width:100%;
	height:33px;
	position:relative;
	background:#e6b030;
	border-top:2px solid #fff;
}
/*========================================
    ====End #Footer ====  
========================================*/
}

	/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
	@media only screen and (min-width: 480px) and (max-width: 767px) {
/*========================================
 	==== Begin #Navigation ====  
========================================*/
.nav ul.primary { display:none; }
ul.primary { display: none; }
.nav select { display: inline-block; }
.nav .contact-form-mob {
	width:40px;
	height:30px;
	display:block;
	background: url(../images/mail-mob.png) no-repeat;
	float:left;
	margin-top:23px;
	margin-left:15px;
}
select {
	border:1px solid #e6b030;
	width:86%;
	height: 35px;
	margin-top: 20px;
	float: left;
	display: block;
	padding: 5px 20px 5px 0px;
}
/*========================================
 	==== End #Navigation ====  
========================================*/
/*========================================
 	====End Begin #Porfolio ====  
========================================*/


.portfolio .four.columns.img .img-holder div.hover {
	display:block;
	background: none;
}

.portfolio ul.twelve.columns li .img-holder .hover h4 {
	font-size:20px;
	color:#e6b030;
	text-align:center;
	font-family:BebasRegular, Arial, Helvetica, sans-serif;
	margin-top:100px;
	background:#343332;
}
.portfolio ul.twelve.columns li .img-holder .hover p {
	display:none !important;
	text-align:center;
}
.portfolio ul.twelve.columns li .img-holder .hover span {
	display:none;
}
.portfolio ul.twelve.columns li:hover .img-holder .hover {
	display:block;
	cursor:pointer;
}
.portfolio ul.twelve.columns li:hover .img-holder .hover h4 {
	margin-top:100px;
}
.portfolio ul.twelve.columns li:hover .img-holder .hover p {
	display:none;

}
.portfolio ul.twelve.columns li:hover .img-holder .hover span {
	display:none;

}
/*========================================
 	====End #Porfolio ====  
========================================*/
/*========================================
    ====Begin #Footer ====  
========================================*/
#footer {
	width:100%;
	height:33px;
	position:relative;
	bottom:0px;
	background:#e6b030;
	border-top:2px solid #fff;
}
#footer ul.social li a.download-btn { display:none; }
/*========================================
    ====End #Footer ====  
========================================*/

/* Profile, portfolio, skills, */
.four.columns.img .img-holder { margin:0px auto 20px; }
.portfolio .four.columns.img .img-holder { margin:0 auto; }
.skills .column, .skills .columns { margin-left:0px; margin-right:0px;}
h4 { font-size:16px; }
h1.title { font-size:20px; }
.contact-info { display:none; }
/* End Profile, portfolio, skills, */
}

	/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
	@media only screen and (max-width: 479px) {
/*========================================
    ==== Navigation and Header ====  
========================================*/
h1.title { font-size:18px; }
h4 { font-size:16px; }
.header .logo img { max-width:100% }
.nav ul.primary { display:none; }
select {
	width:240px;
	border:1px solid #e6b030;
	height: 36px;
	margin-top: 20px;
	float: left;
	display: block;
	bordeR: 1px soldi #ccc;
	padding: 5px 10px 5px 10px;
}
.nav .contact-form-mob {
	width:40px;
	height:30px;
	display:block;
	background: url(../images/mail-mob.png) no-repeat;
	float:left;
	margin-top:23px;
	margin-left:20px;
}
.nav select { display: inline-block; }
.contact-info { display:none; }
/*========================================
    ==== End Navigation ====  
========================================*/


.hide-on-mobile { display:none; }

/*========================================
    ==== Employment, Skills, Education ====  
========================================*/
.skill-bar li {
	margin-right:10px;
	width:52px;
}
.skills .six.columns { width:300px; }
.skills .column, .skills .columns {
	margin-left:0px;
	margin-right:0px;
}
.skills .column, .skills .columns img { margin:0 auto; }
.four.columns.img .img-holder { margin:0px auto 20px; }

.employment .four.columns span, .education .four.columns span { display:none; }

/*========================================
 	====End Begin #Porfolio ====  
========================================*/

.portfolio .four.columns.img .img-holder { margin:0 auto; }
.portfolio .four.columns.img .img-holder div.hover {
	display:block;
	background: none;
}

.portfolio ul.twelve.columns li .img-holder .hover h4 {
	font-size:20px;
	color:#e6b030;
	text-align:center;
	font-family:BebasRegular, Arial, Helvetica, sans-serif;
	margin-top:100px;
	background:#343332;
}
.portfolio ul.twelve.columns li .img-holder .hover p {
	display:none !important;
	text-align:center;
}
.portfolio ul.twelve.columns li .img-holder .hover span {
	display:none;
}
.portfolio ul.twelve.columns li:hover .img-holder .hover {
	display:block;
	cursor:pointer;
}
.portfolio ul.twelve.columns li:hover .img-holder .hover h4 {
	margin-top:100px;
}
.portfolio ul.twelve.columns li:hover .img-holder .hover p {
	display:none;

}
.portfolio ul.twelve.columns li:hover .img-holder .hover span {
	display:none;

}
/*========================================
 	====End #Porfolio ====  
========================================*/


/*========================================
    ==== Footer ====  
========================================*/

#footer {
	width:100%;
	height:33px;
	position:relative;
	bottom:0px;
	background:#e6b030;
	border-top:2px solid #fff;
}
#footer ul.social { display:none; }
#footer ul.social li a.download-btn { display:none; }

/*========================================
    ==== End Footer ====  
========================================*/

/*========================================
    ==== Fancybox ====  
========================================*/
#fancybox-bg-n, #fancybox-bg-ne, #fancybox-bg-e, #fancybox-bg-se, #fancybox-bg-s, #fancybox-bg-sw, #fancybox-bg-w, #fancybox-bg-nw { background-image: none; }
#fancybox-content div {
	overflow: visible !important;
	border-width:5px;
}
#fancybox-wrap { top:50px !important;}
#fancybox-close { display: none !important; }
/*========================================
    ==== End Fancybox ====  
========================================*/


}
/* #Font-Face
================================================== */




@font-face {
    font-family: 'BebasNeueRegular';
    src: url('../fonts/BebasNeue-webfont.eot');
    src: url('../fonts/BebasNeue-webfontd41d.eot?#iefix') format('embedded-opentype'),
         url('../fonts/BebasNeue-webfont.woff') format('woff'),
         url('../fonts/BebasNeue-webfont.ttf') format('truetype'),
         url('../fonts/BebasNeue-webfont.svg#BebasNeueRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'BebasRegular';
    src: url('../fonts/BEBAS___-webfont.eot');
    src: url('../fonts/BEBAS___-webfontd41d.eot?#iefix') format('embedded-opentype'),
         url('../fonts/BEBAS___-webfont.woff') format('woff'),
         url('../fonts/BEBAS___-webfont.ttf') format('truetype'),
         url('../fonts/EBAS___-webfont.html#BebasRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}