/*
Theme Name: Opus
Description: Designed by <a href="https://themeforest.net/user/josweb">josweb</a>.
Version: 1
Author: <a href="https://www.spiralpixel.com">Jo</a>

*/

/* --- TOC

01. GENERAL LAYOUT 
		1. Body
		2. Page Wrap
		3. Columns
		
02. GENERAL STYLING
		1. Paragraph Padding
		2. Links
		3. Section Headings
		4. Section Dividers
		
03. CATEGORY STYLING
		1. Top Information
		2. Details
		3. Experience, Skills, Awards

04. FOOTER
		1. Thumbnail Gallery
		2. Footer Columns
		3. Twitter Messages
		4. Buttons
		5. Contact Form

--- */


/* ________________________________________________________________________________________________________________
 										01. GENERAL LAYOUT
 ________________________________________________________________________________________________________________ */

/*--------------------------------------------------------------- */
/* 1: BODY */
/*--------------------------------------------------------------- */
body {
background-image: url(./images/bg1.jpg); 
background-color:#fff;
background-repeat:repeat;
margin:0px auto 40px auto;
color:#555;
font: normal normal .75em/1.6em helvetica, Arial, sans-serif;}

/*--------------------------------------------------------------- */
/* - 2: PAGE WRAP - */
/*--------------------------------------------------------------- */
#wrapper{
width:940px;padding-top:50px;
margin:0px auto;
}

/*--------------------------------------------------------------- */
/* - 3. COLUMNS - */
/*--------------------------------------------------------------- */
/* - left - */
.left_column { 
float:left;
width:440px;
margin:30px 0px 20px 0px;
padding:0px 30px 20px 0px;
}

/* - right - */
.right_column { 
float:right;
width:440px;
margin:30px 0px 20px 0px;
padding:0px 0px 20px 0px;
}

/* ________________________________________________________________________________________________________________
 										02. GENERAL STYLING
 ________________________________________________________________________________________________________________ */

/*--------------------------------------------------------------- */
/* - 1. PARAGRAPH MARGIN - */
/*--------------------------------------------------------------- */
p { 
margin-bottom:10px;
}

/*--------------------------------------------------------------- */
/* - 2. LINKS - */
/*--------------------------------------------------------------- */
a { 
color:#444; 
text-decoration:none;
outline:none;
}

a:hover { 
color:#666; 
}


/*--------------------------------------------------------------- */
/* - 3. SECTION HEADINGS - */
/*--------------------------------------------------------------- */
.title { font-family: 'LeagueGothicRegular', Arial, sans-serif;
font-size:30px;
font-weight:normal;
color: #333;
background-image: url(./images/dashedline.png);
background-repeat:repeat-x ;
background-position:0% 29px;
padding:10px 0px 27px 0px;
height:1px;
margin-bottom:20px;
}

/* ------- Heading Number ------- */
span.first{ 
font-family: 'LeagueGothicRegular', Arial, sans-serif;
font-size:30px;
color: #666;font-weight:normal;
margin-right:5px;
}

/*--------------------------------------------------------------- */
/* - 4. SECTION DIVIDERS - */
/*--------------------------------------------------------------- */
.hr{background: url(./images/dashedline.png) bottom repeat-x;
margin:0px 0px 0px 0px;
height:25px;}

.hr2{background: url(./images/shadow.png) bottom repeat-x;
margin:10px 0px 0px 0px;
height:25px;}

/* - divider - */
.divider {
background: url(./images/lightline.png) bottom repeat-x;
margin:20px 0px 20px 0px;
height:2px;
}


/* ________________________________________________________________________________________________________________
 										03. CATEGORY STYLING
 ________________________________________________________________________________________________________________ */


/*--------------------------------------------------------------- */
/* - 1. TOP INFORMATION -
/*--------------------------------------------------------------- */

/* ------- Your Name ------- */
h1 { 
font-family: 'LeagueGothicRegular', Arial, sans-serif;
font-size:70px;
font-weight:normal;
text-shadow: 0px 1px 0px #fff;
margin: 0px 0px;  
color: #333;
}

/* ------- Job Title ------- */
h2 { 
font-family: 'EBGaramondRegular', Georgia, serif;  
font-size:16px;
font-weight:normal;
letter-spacing: 1px;
text-transform:uppercase;
margin:20px 0px 15px 0px;
color: #222; 
}

/* ------- Profile ------- */
.profile { 
font-family: 'EBGaramondRegular', Georgia, serif;  
font-size:18px;
font-weight:normal;
line-height:23px;
color: #333;
margin: 0px 0px 25px 0px;
}

/* ------- Slider BG Shadow ------- */
#sliderbg{
height:422px;
width:940px;
background-image:url(./images/slider-shadow.png);
background-repeat:no-repeat; 
background-position:bottom;
position:relative;
}

/*--------------------------------------------------------------- */
/* - 02. DETAILS - */
/*--------------------------------------------------------------- */
.info { padding-bottom:0px;
margin:0px 0px 0px 0px;
padding-left:0px;
}
.info ul {
padding:0;margin:0;
}
.info li {
list-style:none;
padding-left:25px; 
background:url(./images/bullet.gif) 1px 0.5em no-repeat;
}

/*--------------------------------------------------------------- */
/* - 03. EXPERIENCE/JOBS/ SKILLS/ AWARDS - */
/*--------------------------------------------------------------- */

/* ------- Company Name ------- */
h3 { 
font-family: 'EBGaramondRegular', Georgia, serif;  
font-size:19px;
font-weight:normal;
margin: 0px 0px; 
color: #000;
text-shadow: 0px 0px 0px #fff;
margin-bottom:-4px;
}

/* ------- Date Span ------- */
.date {
color: #777;
}


.star{
margin: 0px 0px  0px -2px;
}

/* ________________________________________________________________________________________________________________
 										04. FOOTER
 ________________________________________________________________________________________________________________ */
#footer { 
padding:0px 0px;
}


/*--------------------------------------------------------------- */
/* - 1. THUMBNAIL GALLERY - */
/*--------------------------------------------------------------- */

.photo-top {
border:1px solid #ccc;
margin:25px 0px 0px 5px;
padding:5px;
background:#F5F5F5;
border:1px solid #ccc;
border-bottom:1px solid #999;
border-right:1px solid #999;}


.photo-top-last {
margin:25px 0px 0px 5px;
padding:5px;
background:#F5F5F5;
border:1px solid #ccc;
border-bottom:1px solid #999;
border-right:1px solid #999;
}
.photo-top a{
text-decoration:none;
}


/*--------------------------------------------------------------- */
/* - 2. FOOTER COLUMNS - */
/*--------------------------------------------------------------- */
/* - footer left - */
.footerleft{ 
width:440px;
height:270px;
float:left;
padding:35px 30px 10px 0px;
}

/* - footer right - */
.footerright{ 
width:440px;
padding-top:35px;
float:right;
}

/*--------------------------------------------------------------- */
/* - 3. TWITTER MESSAGES - */
/*--------------------------------------------------------------- */
.tweet, .query {
font-size:14px;
width:435px;
color:#999;
margin-top:0px;
}

.tweet .tweet_list, .query .tweet_list {
list-style-type: none;
padding:0;margin:0;
font:  normal 12px helvectica, arial, sans-serif; 
line-height:19px; 
}

.tweet .tweet_list li  {
color: #555;padding-left:0px;
margin-bottom:10px;
clear:both;
}

.tweet .tweet_list li a, .query .tweet_list li a {
color: #777; 
}
    
.tweet .tweet_list .tweet_avatar, .query .tweet_list .tweet_avatar {
padding-right: .5em; 
float: left; 
}
       
.tweet_avatar img { 
margin-top:3px;
vertical-align: middle;
border:1px solid #ccc;
padding:2px; 
background-color:#ededed; 
}


/*--------------------------------------------------------------- */
/* - 4. BUTTONS - */
/*--------------------------------------------------------------- */

/* - divider - */
.rule {
height:10px;
background: url(./images/dashedline.png) repeat-x;
background-position:4% 2px;
margin:0px 0px 15px 0px;
}

.buttons {
width:310px;
float:left;
margin:0px 0px;
}

/* -- sharing -- */
#sharing { 
width:440px;
height:70px;
float:left;
padding:0px 0px 0px 0px;  
}

#sharing ul { 
margin:0px 0px 0px -40px;
list-style-type: none;
}

#sharing li { 
float: left; 
display: block; 
height:56px;
width:42px; 
margin-right:20px;
}

#sharing li a {
display:block; 
height:56px; 
width:46px; 
text-indent: -9999px;
background-image: url(./images/icons.png); 
}

#sharing .print a {background-position: 0px 0; }
#sharing .contact a {background-position: 122px 0; }
#sharing .pdf a {background-position: 244px 0; }
#sharing .top a {background-position: 368px 0; }
#sharing .print a:hover {background-image: url(./images/icons_hover.png);
background-position:0px 0; }
#sharing .contact a:hover { background-image: url(./images/icons_hover.png);
background-position:122px 0; }
#sharing .pdf a:hover {background-image: url(./images/icons_hover.png);
background-position:244px 0; }
#sharing .top a:hover {background-image: url(./images/icons_hover.png);
background-position:368px 0; }

/* -- back to top link -- */
#back-top {
position: relative;
margin:0px 0px;
}

#back-top a {
width: 46px;
display: block;
text-decoration: none;
color: #bbb;
}

/* -- social icons -- */
.socialicons {
margin:0px 0px 0px 5px; 
background-color:transparent; 
}

.icons a{
outline:0;
text-decoration:none;
padding: 0px 4px 0px 0px;
}

/* -- testimonial -- */
.testimonial {
width:130px;
float:right;
margin:-3px 0px 0px 0px; 
}

.testimonial_badge {
outline:0;
border:none;
margin:0px 0px 0px -30px; 
}

.review {
line-height:15px;
}

/*--------------------------------------------------------------- */
/* - 5. CONTACT FORM - */
/*--------------------------------------------------------------- */
.hide {
display: none;
}

label {
display:block;
}

input {
outline:none;
border: 0px solid #ccc;
display:block;
}

#form_name, #form_email, #form_subject{
width:350px;
padding:5px;
margin-top:-40px;
margin-left:80px;
}

.label{
font-family: 'EBGaramondRegular', Georgia, serif;  
font-size:16px;
font-weight:normal;
width:80px;
color:#555; 
}

textarea{
width:350px;
height:80px;
border: 0px solid #ccc;
padding:5px;
margin-top:-40px;
margin-left:80px;
}

#form_submit{
color:#555;
font-family: 'EBGaramondRegular', Georgia, serif;  
font-size: 13px;
font-weight: normal;
text-transform:uppercase;
margin:5px 0px 0px 80px;
padding:0px;
outline:none;
background:transparent url(./images/form_button.png) no-repeat 0px 0px;
height:42px;width:97px;
text-decoration:none;
}


#form_name, #form_email, #form_subject,textarea{
background:#F9F9F9 url(./images/form-gradient.gif) repeat-x  0px -2px;
border:#ccc #edede #FFFFFF;
border-style:solid;
border-width:1px;
color:#666;}
}

/* -- extras -- */
.clear{ height:30px;
clear:both;
}

.clear2{ height:0px;
clear:both;
}
.clear3{ height:5px;
clear:both;
}



/* -- for demo -- */
.style { 
position:fixed; 
top: 0%;
left: 0px;
-moz-border-radius: 0px 0px 7px 7px;
-webkit-border-radius: 5px;
background:#ccc;
height:95px;width:40px;
border:1px solid #999;
text-align:left;
}

.style2  { 
margin:2px 2px 2px 1px;
}

.style2  a{ 
outline:0;text-decoration:none;}

.style p {
margin-top:12px;
margin-left:4px;
}

h6 { 
font-family: 'EBGaramondRegular', Georgia, serif;  
font-size: 16px;
font-weight: normal;
font-weight:normal;text-align:center;
text-shadow: 0px 1px 0px #fff;
margin: 2px 0px -10px 1px;  
color: #333;line-height:15px;
}