/*
Theme Name: #12 (by Oh My Morning)
Theme URI: http://ohmymorning.com
Author: Ray
Author URI: http://www.ohmymorning.com
*/

@font-face {
   font-family: 'fontawesome';
   src: url( 'http://johnny-depp.org/wordpress/wp-content/themes/sin21-wp25/fonts/fa/webfonts/webfonts/fa-solid-900.woff') format('woff');
   src: url('http://johnny-depp.org/wordpress/wp-content/themes/sin21-wp25/fonts/fa/webfonts/webfonts/fa-solid-900.woff2') format('woff2'), }

@font-face {
   font-family: 'font-awesome';
   src: url( 'http://johnny-depp.org/wordpress/wp-content/themes/sin21-wp25/fonts/fa/webfonts/webfonts/fa-brands-400.woff') format('woff');
   src: url('http://johnny-depp.org/wordpress/wp-content/themes/sin21-wp25/fonts/fa/webfonts/webfonts/fa-brands-400.woff2') format('woff2'), }

body { 
	background: #DBDBDB;
	font: 400 13px "Lato", Helvetica, Arial, sans-serif; 
	line-height: 26px; 
	text-align: justify;
	color: #6F6F6F; 
    max-width: 100%;
	margin: 0; 
	border: 0;
	padding: 0; }

div#qTip {  
	background-color: #5e534d;
	padding: 10px;
	display: none;
	color: #ffffff; 
	position: absolute; 
	z-index: 1000;
	-moz-opacity: .95;
	filter: alpha(opacity=95);
	opacity: .95; }

table, tr, td, table tr td { max-width: 100%; }
ol, ul { list-style: none; }
html, table tr td, table, tr, td, body, img { padding: 0; margin: 0; border: 0; }

/* ----------------- LINKS ----------------- */

a, a:active, a:visited, a:link { 
	color: #ccc; 
	text-decoration: none; 
	-webkit-transition: all 0.2s ease-in; 
	-moz-transition: all 0.2s ease-in; 
	-o-transition: all 0.2s ease-in; }

a:hover { 
	color: #fff; 
	-webkit-transition: all 0.2s ease-in; 
	-moz-transition: all 0.2s ease-in; 
	-o-transition: all 0.2s ease-in; }

/* ----------------- MAIN HEADER DIVS ----------------- */

#container, .wrapper { 
	max-width: 1100px;
	margin: 0 auto; }

#container { 
	overflow: Hidden;
	background: #F8F8F8;
	box-shadow: 0px 1px 4px 2px rgba(0, 0, 0, 0.1); }

#description { 
	text-align: center;
	background: URL("images/description.png") top center repeat; 
	max-width: 100%;
	padding: 15px; }

#description .title { font-size: 20px; color: #fff; padding-right: 10px; }
#description .title b { font-weight: 900; }
#description .tagline { padding: 5px; background: #332e2c; letter-spacing: 3px; color: #aaa; font-size: 11px; }
#description .social { padding-left: 10px; text-align: right; font-size: 17px; color: #ccc; }
#description .social a { padding-right: 5px; color: #ccc; }
#description .social a:hover { color: #fff; }

#header {
	background: URL("images/header.png") top center repeat; 
	max-width: 100%;
	height: 300px; }

#navigation { 
	text-align: center;
	max-width: 100%;
	padding: 5px 30px;
	background: #100e0c;  }

a.menu-link {
	color: #fff!important; 
  	float: right;
	display: block;
	padding: 1em; }

nav[role=navigation] {
	clear: both;
	-webkit-transition: all 0.3s ease-out;  
	-moz-transition: all 0.3s ease-out; 
	-ms-transition: all 0.3s ease-out; 
	-o-transition: all 0.3s ease-out; 
	transition: all 0.3s ease-out; }

.js nav[role=navigation] { overflow: hidden; max-height: 0; }
nav[role=navigation].active { max-height: 400em; }
nav[role=navigation] ul { margin: 0; padding: 0; }
nav[role=navigation] li a { font-family: Lato; text-transform: Uppercase; font-weight: 700; letter-spacinG: 1px; color: #000; font-size: 11px; text-transform: uppercase; display: block; color:#fff; border-bottom: 1px solid #2b2522; padding: 5px; }
nav[role=navigation] li a:hover { color: #ccc; }

#footer { 
	clear: both;
	color: #555;
	padding: 30px 0px;
	max-width: 100%; }

#footer blockquote { 
	font-family: 'Montserrat';
	font-weight:400; 
	font-size:14px; 
	letter-spacing:0px;
	text-shadow: 1px 1px #FFF;
	text-align:normal!important; 
	margin: 20px 0px 0px 0px; 
	border-top:1px solid #3c352f; 
	padding-top:20px; }

#footer blockquote a, #footer blockquote a:active { 
	font-family: 'Montserrat';
	font-weight:400; 
	font-size:14px; 
	letter-spacing:0px;
	text-shadow: 1px 1px #FFF;
	text-align:normal!important; 
    text-transform:none!important;
}

#footer blockquote a:hover { 
	font-family: 'Montserrat';
	font-weight:400; 
	font-size:14px; 
	letter-spacing:0px;
	color:#D6618F;
	text-shadow: 1px 1px #FFF;
	text-align:normal!important; 
    text-transform:none!important;
}

#footer b, #footer strong { 
	color:#118C8B; }

#footer a, #footer a:active {
    padding-top: 1px;
    padding-bottom: 2px;
    font-size: 11px;
    font-weight: 700;
    color: #F1931B;
    text-align: center;
    font-family: "Raleway";
    line-height: 16px;
    text-transform: uppercase;
}

#footer a:hover {
    padding-top: 1px;
    padding-bottom: 2px;
    font-size: 11px;
    font-weight: 700;
    color: #D6618F;
    text-align: center;
    font-family: "Raleway";
    line-height: 16px;
    text-transform: uppercase;
}

/* ----------------- CONTENT ----------------- */

#entry {
	float: left;
	max-width: 700px; }

#entry2 {
	float: left;
	max-width: 870px; }

.post { padding: 30px; margin-bottom: 20px; }

.post .title { 
    color : #282726;
	font-family: 'Montserrat';
	font-weight: 700;
	text-align: left;
	text-transform : uppercase;
	font-size: 16px;
	margin-top: 5px;
}

.post .title a { color: #282726; }
.post .title a:hover { color: #8F715B; }
.post .info { font-family: 'Open Sans'; padding-top: 2px; font-size: 10px; text-transform: uppercase; color: #888; padding-bottom: 10px; border-bottom: 1px solid #C8C8C8; margin-bottom: 20px; }
.post .info i { color: #3A5166; padding-right: 5px;}
.post .category { }
.post .category a { padding: 5px 10px; border-radius: 10px; background: #A7414A; color: #fff; text-transform: uppercase; font-size: 8px; color: #fff; font-family: lato; font-weight: 900; letter-spacing: 1px; }
.post .category a:hover { background: #F1931B; }
.post h1 { font-size: 15px; color: #c3ab55; font-family: Lato; font-weight: 900; }
.post h2 { 
    margin:0 0 1px; 
    padding:0;
    display:inline-block; 
    font-family: 'Raleway';
    font-size:12px; 
    font-weight:700;
    letter-spacing:1px; 
    text-transform:uppercase; 
    color: #474747;
}

.post .alignleft { margin-right: 10px; float: left; }
.post .alignright { margin-left: 10px; float: right; }
.post .aligncenter { margin: 0 auto; }

.post ul { 
	margin: 0; 
	padding: 0; }

.post li { 
	padding: 10px 0px; 
	border-bottom: 1px solid #DBDBDB; 
	list-style: none; 
	margin: 0; }


.post strong, .post b { 
	color: #D6618F; }

.post em, .post i { 
	color: #F1931B; }

.post a, .post a:active {
	color: #C0334D;
}

.post u {
	color: #F3D4A0;
}

.post .highlight { 	
	text-align: left!important;
	font-size: 23px;
	font-family: Source Sans Pro;
	margin: 0px;
	line-height: 26px;
	font-weight: 300; }

.post blockquote {
	margin:22px 10px; padding:5px 25px;
	background:#F2F2F2 url(images/quote.jpg) no-repeat;
	background-position: right bottom;
	font-family:'Raleway';
	font-size:13px;
	color: #8A8A8A;
	line-height:28px;
	text-shadow: 1px 1px 0 #ffffff;
	-webkit-border-radius:6px;
	-moz-border-radius:6px;
	-moz-box-shadow: 1px 1px 0 #E2E2E2, inset -1px -1px 0 #ffffff;
	-webkit-box-shadow: 1px 1px 0 #E2E2E2, inset -1px -1px 0 #ffffff;
}

.post .post-end {
    border-bottom: 1px solid #C8C8C8; 
}

.post img {
	background : #fff;
	border : 1px solid #efefef;
	padding : 6px;
	opacity:1.0;
	-moz-opacity:1.0;
	-khtml-opacity:1.0;
	filter:alpha(opacity=100);
	-webkit-transition:all .4s ease-in-out;
	 -moz-transition:all .4s ease-in-out;
	-o-transition:all .4s ease-in-out;
	-khtml-transition:all .4s ease-in-out;
	transition:all .4s ease-in-out;
    max-width: 620px !important;}

.post img:hover {
    background-image: linear-gradient(to bottom right, #C0334D 0%, #F1931B 100%);
  	background-size: 100% 100%;
	border : 1px solid #fff;
	padding : 6px;
}

.post .ext-links {
	margin:22px 10px; padding:5px 25px;
	background:#F2F2F2 url(images/gallery.jpg) repeat;
	background-position: right bottom;
	color: #B8B8B8;
	font-family: "Raleway";
	font-weight: 600;
	font-size: 11px;
	line-height: 20px;
	text-shadow: 1px 1px 0 #101010;
	-webkit-border-radius:6px;
	-moz-border-radius:6px;
	-moz-box-shadow: 1px 1px 0 #E2E2E2, inset -1px -1px 0 #ffffff;
	-webkit-box-shadow: 1px 1px 0 #E2E2E2, inset -1px -1px 0 #ffffff;
}

	
.post .ext-links a {
	color:#A37C27;
}

.post .ext-links b {
	text-transform:uppercase;
	font-family: 'Alegreya';
}

.post .ext-links a:hover,
.post .ext-links a:focus {
	color:#bd9c55;
}

.post .comments {
	margin:22px 10px; padding:5px 25px;
	background:#F2F2F2 url(images/quote.jpg) no-repeat;
	background-position: right bottom;
	font-family:'Raleway';
	font-size:13px;
	color: #8A8A8A;
	line-height:28px;
	text-shadow: 1px 1px 0 #ffffff;
	-webkit-border-radius:6px;
	-moz-border-radius:6px;
	-moz-box-shadow: 1px 1px 0 #E2E2E2, inset -1px -1px 0 #ffffff;
	-webkit-box-shadow: 1px 1px 0 #E2E2E2, inset -1px -1px 0 #ffffff;
}

.post .comments:hover {
	background:none;
}

.post .comments b {
    color: #A37C27; 
	text-transform:uppercase; 
	font-family: 'Alegreya';
}

.post .comments .comment-date {
    font-family: 'Open Sans'; 
	font-size: 10px; 
	text-transform: uppercase; 
	color: #888;
}


.buy  {
    margin:5px 0 15px; 
    padding:0; 
    font-size:10px; 
    font-weight:700; 
    color:#fff; 
    text-align:center; 
    text-transform:uppercase; 
    width:auto;
    text-shadow:1px 1px #523800;
}

.buy a {
	display: inline-block!important; 
    margin:0; 
    padding:3px 6px; 
    background:#A37C27; 
    color:#fff;
}

.buy a:hover,
.buy a:focus {
	background: #000000;
}

.pagetitle {
    margin:0 0 1px; 
    padding:0;
    display:inline-block; 
    font-family: 'Raleway';
    font-size:12px; 
    font-weight:700;
    letter-spacing:1px; 
    text-transform:uppercase; 
    color: #474747;
}

.career-navigation {
float: right;
margin: -45px 0px 0px 0px;
text-align: right;
}

.career-box {
float: left;
padding: 8px;
margin: 5px 25px 0px -10px;
width: 280px;
font-size: 11px!important;
}


.career-category { width: 235px; color: #808080; font-family: 'Montserrat'; font-weight: 700; text-transform: uppercase; font-size: 11px; padding-bottom: 5px; border-bottom: 1px solid #DDDDDD; margin-bottom: 5px; margin-left: 5px; margin-left: 20px;}
.career-categorx { width: 235px; color: #808080; font-family: 'Montserrat'; font-weight: 700; text-transform: uppercase; font-size: 11px; padding-bottom: 5px; margin-bottom: 4px; margin-left: 5px; margin-left: 20px;}
.career-categorz { width: 165px; color: #808080; font-family: 'Montserrat'; font-weight: 700; text-transform: uppercase; font-size: 11px; padding-bottom: 5px; border-bottom: 1px solid #DDDDDD; margin-bottom: 5px; margin-left: 5px;}
.career-subcategory { width: 200px; font-weight: bold; font-size: 12px; margin-left: 20px; padding-bottom: 4px; border-bottom: 1px solid #DDDDDD; margin-bottom: 4px;margin-right: 20px;}

.career-image {float:left; width: 280px;}
.career-image img { width: 280px; height: auto; border-radius: 0px 2px 2px 0px;}

.post .button, .post .button a,
.post .button a:visited {
	display: table; 
	margin-bottom:40px;
	padding:2px 12px;
	background:#F1931B;
	color:#fff;
	font-weight:700;
	text-transform:uppercase;
	border:0;

}

.post .button a:hover {
	background:#F1931B;
	color:#fff!important;
	box-shadow:0 0 0!important;
}

/* ----------------- SIDEBAR ----------------- */

#sidebar {
	margin-top: 30px;
	float: right;
	max-width: 390px; }

#sidebar2 {
	margin-top: 30px;
	float: right;
	max-width: 230px; }

.content { 
	margin-right: 30px;
	font-family: 'Montserrat';
	background: #101010;
	color: #525252;
	padding: 30px;
	font-size: 12px;
	line-height: 24px;
	margin-bottom: 30px; }

#sidebar .alignleft { margin-right: 10px; float: left; }
#sidebar .alignright { margin-left: 10px; float: right; }
#sidebar .aligncenter { margin: 0 auto; }

.content .title {
  font-family: 'Saira Condensed', sans-serif;
  font-weight:400;
  font-size: 140%;
  text-decoration: none;
  text-transform: uppercase;
  text-align: center;
  padding-bottom:2px;
  border-bottom: 1px solid #303030;
  border-top: 1px solid #303030;
  margin-bottom:13px;}

.content blockquote { 
	font-style: italic;
	margin: 20px 0px;
	font-size: 13px;
	line-height: 21px;
	font-family: 'Open Sans';
	padding: 20px;
	background: #000000;}

.content ul { 
	margin: 0; 
	padding: 0; }

.content li, #sidebar2 a { 
	padding: 5px;
	border-bottom: 1px solid #4c443d;
	margin: 0; }

.content li a, #sidebar2 a { 
	color: #D50B53; }

#sidebar2 a { display: block; }
.content li a:hover, #sidebar a:hover { color: #ccc; }
.content a { color: #D50B53; font-weight:500;}
.content b { color: #E0E0E0; display:inline-block; 
    font-family: 'Raleway';
    font-size:11px;
	font-weight:200;
    letter-spacing:1px; 
    text-transform:uppercase;}
.content i { color: #B9C406; }
.content u { text-decoration: none; padding-bottom: 2px; color: #A82CC1; border-bottom: 1px solid #A82CC1; }

.coppermine img { 
	max-width: 84px; }

.content img { 
	margin : 3px;
	padding: 4px;
	border : 1px solid #1c1c1c;
	opacity : 0.8;
	-webkit-transition: all 0.4s ease; 
	-moz-transition: all 0.4s ease; 
	-o-transition: all 0.4s ease; 
	transition: all 0.4s ease;}

.content img:hover { 
	margin : 3px;
	padding: 4px;
	background : #A882C1;
	border : 1px solid #b08dc1;
	opacity : 1.0;
	-webkit-transition: all 0.4s ease; 
	-moz-transition: all 0.4s ease; 
	-o-transition: all 0.4s ease; 
	transition: all 0.4s ease;}


.content .heading {
	padding-top: 1px;
    padding-bottom: 2px;
    font-size: 11px;
    font-weight: 700;
    color: #BCA18D;
    text-align: center;
    font-family: "Raleway";
    line-height: 16px;
    text-transform: uppercase;
}

.content .project {
	padding-top: 1px;
    padding-bottom: 2px;
    font-size: 11px;
    font-weight: 700;
    color: #BCA18D;
    text-align: center;
    font-family: "Raleway";
    line-height: 16px;
    text-transform: uppercase;
}

.content .affiliates { 
	text-transform : uppercase; 
	width : 100%;	
	font-size : 8px; 
	display: block;}

.content .affiliates a { 
	display: inline-block; 
	width:18%;
	color: #6f6f6f; 
	text-align: center; 
	font-size: 8px; 
	font-weight: 400;  
	padding : 7px; 
	margin: 2px; 
	line-height: 8pt; 
	background : #171717; }

.content .affiliates a:hover { 
	font-weight: 400;  
	color: #fff;	}

.content .affiliates i { 
	margin-top : 5px; 
	display : block; 
	color : #fff!important; 
	font-size: 8px;}


#projects b { color: #E0E0E0; text-transform:uppercase; font-family: 'Alegreya';}
#projects i { font-size: 13px; color: #B9C406; }
#projects u { border-bottom: 0px; background: #D50B53; letter-spacing: 1px; text-decoration: none; font-size: 9px; text-transform: uppercase; color: #fff; padding: 5px; }
#projects a i { text-decoration:none;color: #fff; padding-right: 5px; }
#projects a { color: #824CA7; font-size: 13px; font-weight: 500; }
#projects a:hover { color: #999; }
#projects .border { border-bottom: 0px; margin: 10px 0px; border-bottom: 1px solid #828282; }
#projects .alignright {margin-right: -57px; float: right;}
#projects .alignright img {opacity:1.0; border:none;}
#projects .alignright img:hover {border:none; opacity:1.0; background:none;}

/* ----------------- PAGES ----------------- */

.post-page { 
	margin: 0px 20px 0px 20px; 
	padding-top: 20px; 
	padding-bottom: 20px; 
	border-top: 3px double #dddddd; 
	border-bottom: 3px double #dddddd; }

.article {  
	font-size: 15px; 
	text-transform: uppercase; 
	color: #fff; 
	font-weight: 900;
	letter-spacing: 1px; }

.article { font-weight: 900; }
.article i { color: #84a48e; }
.previous:hover .article, .next:hover .article { border-bottom: 2px solid #fff; padding-bottom: 2px; }
.previous { max-width: 350px; float: left; padding-left: 20px; }
.next { float:right; max-width: 350px; text-align: right; padding-right: 20px; }
.previous a:hover, .next a:hover { color: #fff; }
.pages { 
	font-family: 'Montserrat';
	padding: 10px; 
	border-bottom: 0px; 
	background: #F5F5F5; 
	letter-spacing: 1px; 
	text-decoration: none; 
	font-size: 9px; 
	text-transform: uppercase; 
	color: #A8A8A8; 
}

/*---------WP-Pagenavi---------*/

.wp-pagenavi {
    color: #797979;
    font-family: 'Droid Serif', sans-serif;
    font-size: 13px;
    padding: 0 0 0 15px;
    margin: 25px 0;
    text-transform: none;
	text-align: center!important;
    background: transparent!important;
}

.wp-pagenavi a, .wp-pagenavi span {
    background: transparent!important;
	text-decoration: none;
	margin: 2px;
    color: #797979!important;
    padding: 8px;
    border: 1px solid #dcdcdc;
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -ms-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out!important;
}

.wp-pagenavi a:hover {
    background-color: #eee!important;
}

.wp-pagenavi span.current {
	font-weight: bold;
	color: inherit;
}

.wp-pagenavi .pages {
	background:#000;
}


@media screen and (max-width: 980px) {
	#footer { padding: 20px; }
	.post img { max-width: 80%; }
	.coppermine img { max-width: 70px; }
	a.menu-link { color: #fff; }
	#entry { max-width: 630px; }
	#sidebar { max-width: 350px; }
	}

@media screen and (min-width: 980px) {
	a.menu-link { display: none; }
	.js nav[role=navigation] { max-height: none; }
	nav[role=navigation] ul { margin: 0; border: 0; }
	nav[role=navigation] li { display: inline-block; padding: 5px; }
	nav[role=navigation] li a { border: 0; } 
	}

@media screen and (max-width: 800px) { 
	#navigation { text-align: left; }
	#entry { float: none; max-width: 100%; }
	#sidebar { display: none; }
	}

@media screen and (max-width: 360px) {
	#header { display: none; } 
	#description .title, #description .tagline, #description .social { display: block; }
	#description .tagline { padding: 2px!important; }
	#description .social { text-align: center; }
	.post img { max-width: 50%; }
	}

/* Social Share Buttons
---------------------------- */

.share-buttons {
	margin:0 auto; 
	padding-top:10px; 
	display:block; 
	text-align:left; 
	overflow:hidden;
	padding-bottom:20px;
}

.share-buttons:before {
	margin:0;
	padding:0;
	display:block;
	width:100px;
	content:'Share Post:';
	font-weight:700;
	border-bottom:0;
}

.share-button,
.share-button a,
.share-button a:focus {
	margin:2px 0 2px 0; 
	padding:1px 15px 1px!important; 
	display:inline-block; 
	min-width:10px; 
	padding:5px 7px; 
	background: #EEEEEE;
	color:#626262;
	font-weight:400; 
	font-size:12px; 
	text-transform:uppercasex; 
	text-align:center; 
	text-decoration:none;
	xborder: 1px solid #E3E3E3;
	xbox-shadow: inset 0 0 0 1px #fff;
}

.share-button a:hover {
    box-shadow:inset 0 -2px 0 #D41A4F;
}

.share-buttons .twitter:before,
.share-buttons .facebook:before,
.share-buttons .tumblr:before,
.share-buttons .pinterest:before {
	margin-right:0; 
	font:400 12px font-awesome;
}

.share-buttons .mail:before {
	margin-right:0; 
	font:400 12px fontawesome;
}

.share-buttons .twitter:before {
	content:'\f099';
}

.share-buttons .twitter:after {
	content:'';
}

.share-buttons .facebook:before {
	content:'\f09a';
}

.share-buttons .facebook:after {
	content:'';
}

.share-buttons .tumblr:before {
	content:'\f173';
}

.share-buttons .tumblr:after {
	content:'';
}

.share-buttons .pinterest:before {
	content:'\f0d2';
}

.share-buttons .pinterest:after {
	content:'';
}

.share-buttons .mail:before {
	content:'\f0e0';
}

.share-buttons .mail:after {
	content:'';
}
