/*
Theme Name: Clarity
Theme URI: http://captaintheme.com/themes/clarity/
Author: Captain Theme
Author URI: http://captaintheme.com
Description: An endless one page tumblog.
Version: 1.0.3
License: GNU General Public License
License URI: license.txt
Tags: one-column, post-formats, sticky-post, theme-options, custom-header, custom-background, translation-ready, photoblogging, flexible-width


   ================================================== */
/* ------------------------------------*\
    CONTENTS
\*------------------------------------
   ================================================== */
/* 

1. GLOBAL
2. HEADER
3. CONTENT / POSTS
4. SINGLE POSTS
5. COMMENTS
6. LIKES/LOVES
7. MEDIA
8. SIDEBAR (in footer)
9. FOOTER
10. VARIOUS OTHERS



 /*------------------------------------*\
 *     $GLOBAL
 * \*------------------------------------
 */

/* Some other global CSS rules can be found in inc/css/options-css.php, such as anchor styling */

.group:after {
  content: "";
  display: table;
  clear: both;
}

/* Alignment */
.alignleft { display: inline; float: left; margin-right: 1.5em; }
.alignright { display: inline; float: right; margin-left: 1.5em; }
.alright { text-align: right }
.aligncenter { clear: both; display: block; margin: 0 auto; }
.cent { text-align: center }

/* Screen Readers */
.assistive-text { clip: rect(1px 1px 1px 1px); /* IE6, IE7 */ clip: rect(1px, 1px, 1px, 1px); position: absolute !important; }


/* ------------------------------------*\
    $HEADER
\*------------------------------------*/

.row.header {
	border-left: 2px solid #bbb;
	border-right: 2px solid #bbb;
	border-bottom: 1px solid #ddd;
}

.row.container {
	background: #fff;
	padding-left: 15px; padding-right: 15px;
	padding-top: 10px;
	border: 2px solid #bbb;
	border-top: none;
}

header#masthead {
	text-align: center;
	padding-top: 10px;
	padding-bottom: 10px;
}

.logogroup {
	padding: 0 10px;
}

h1.site-title {
	font-family: "Scada", sans-serif;
	letter-spacing: 2px;
	font-size: 65px;
	text-transform: uppercase;
	margin-bottom: 0;
}

h1.site-title a {
	transition: all .35s ease-in-out;
	-moz-transition: all .35s ease-in-out;
	-ms-transition: all .35s ease-in-out;
	-webkit-transition: all .35s ease-in-out;
	-o-transition: all .35s ease-in-out;
}

h2.site-description {
	font-size: 20px;
	font-style: italic;
	margin-top: 5px;
}

header#masthead .sm {
	display: table;   /* Allow the centering to work */
	margin: 0 auto;
}

header#masthead .sm ul.social {
	text-align: center;
	margin: 0;
	padding: 0;
	height: 35px;
}

header#masthead .sm ul.social li a {
	text-align: center;
}

/* Social Media Icons  */
.social { list-style: none }
.social li { display: inline; float: left; opacity: 0.8; }
.social li a { display: block; width: 32px; height: 32px; position: relative; }
li.tumblr { background-image: url("../images/sm/tumblr.png") }
li.vimeo { background-image: url("../images/sm/vimeo.png") }
li.facebook { background-image: url("../images/sm/facebook.png") }
li.flickr { background-image: url("../images/sm/flickr.png") }
li.pinterest { background-image: url("../images/sm/pinterest.png") }
li.youtube { background-image: url("../images/sm/you-tube.png") }
li.rss { background-image: url("../images/sm/rss.png") }
li.twitter { background-image: url("../images/sm/twitter.png") }
/* for retina displays */
@media (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (min-resolution: 1.5dppx) { 
    li.tumblr { background-image: url("../images/sm/64/tumblr.png"); background-size: 32px 32px; }
    li.vimeo { background-image: url("../images/sm/64/vimeo.png"); background-size: 32px 32px; }
    li.facebook { background-image: url("../images/sm/64/facebook.png"); background-size: 32px 32px; }
    li.flickr { background-image: url("../images/sm/64/flickr.png"); background-size: 32px 32px; }
    li.pinterest { background-image: url("../images/sm/64/pinterest.png"); background-size: 32px 32px; }
    li.youtube { background-image: url("../images/sm/64/you-tube.png"); background-size: 32px 32px; }
    li.rss { background-image: url("../images/sm/64/rss.png"); background-size: 32px 32px; }
    li.twitter { background-image: url("../images/sm/64/twitter.png"); background-size: 32px 32px; }
}
.social:hover li { opacity: 0.2 }
.social li { transition-property: opacity; transition-duration: 500ms; -webkit-transition-property: opacity; -webkit-transition-duration: 500ms; -moz-transition-property: opacity; -moz-transition-duration: 500ms; -o-transition-property: opacity; -o-transition-duration: 500ms; }
.social li:hover { opacity: 1; filter: none; -webkit-filter: grayscale(0%); }


/* ------------------------------------*\
    $CONTENT / POSTS
\*------------------------------------*/

.row.container #main {
	padding-top: 10px;
}

h3.entry-title {
	text-align: center;
	font-family: 'Scada', sans-serif;
	font-size: 28px;
	text-transform: uppercase;
	letter-spacing: 2px;
	padding-bottom: 5px;
	margin-top: 5px;
}

h3.entry-title a {
	transition: all .25s ease-in-out;
	-moz-transition: all .25s ease-in-out;
	-ms-transition: all .25s ease-in-out;
	-webkit-transition: all .25s ease-in-out;
	-o-transition: all .25s ease-in-out;
}

h2.page-title {
	font-family: "Scada", sans-serif;
	text-transform: uppercase;
	letter-spacing: 1px;
	text-align: center;
}

footer.entry-meta {
	text-align: center;
	padding-top: 12px;
}


/* ASIDE FORMAT */
article.format-aside p {
	font-size: 16px;
}

/* LINK FORMAT */
article.format-link .entry-content {
	text-align: center;
}
article.format-link p {
	font-size: 20px;
	display: inline-block;
	padding-left: 5px;
}

/* IMAGE FORMAT */
article.format-image img {
	display: block;
	margin: 0 auto 7px;
}
article.format-image a img { box-shadow: 0px 0px 5px #999; transition: all .15s ease-in-out; -moz-transition: all .15s ease-in-out; -ms-transition: all .15s ease-in-out; -webkit-transition: all .15s ease-in-out; -o-transition: all .15s ease-in-out; }
article.format-image a:hover img { box-shadow: 0px 0px 12px #999; }

/* AUDIO FORMAT */
article.format-audio .entry-content {
	text-align: center;
}
article.format-audio p {
	font-size: 20px;
	display: inline-block;
	padding-left: 5px;
}

/* STATUS FORMAT */
article.format-status .entry-content {
	text-align: left;
}
article.format-status p {
	font-size: 20px;
	text-align: left;
}

/* QUOTE FORMAT */
article.format-quote p {
	text-align: left;
}

/* FORMAT ICON STYLES */
article .entry-content .iconic, article .row .iconic {
	font-size: 22px;
	color: #fff;
	background-color: #000;
	width: 36px;
	height: 36px;
	border-radius: 36px;
	-moz-border-radius: 36px;
	-webkit-border-radius: 36px;
	text-align: center;
	padding-top: 8px;
	transition: background-color .5s ease-in-out;
	-moz-transition: background-color .5s ease-in-out;
	-ms-transition: background-color .5s ease-in-out;
	-webkit-transition: background-color .5s ease-in-out;
	-o-transition: background-color .5s ease-in-out;
}

article footer.entry-meta .the-meta {
	padding-bottom: 8px;
}

article footer.entry-meta .perma {
	font-weight: bold;
	color: #222;
	transition: color .5s ease-in-out;
	-moz-transition: color .5s ease-in-out;
	-ms-transition: color .5s ease-in-out;
	-webkit-transition: color .5s ease-in-out;
	-o-transition: color .5s ease-in-out;
}

article p {
	text-align: center;
}

.sticky {
	
}

article img {
	padding: 5px;
}

/* ------------------------------------*\
    $SINGLE POSTS
\*------------------------------------*/

/* Arrow Nav */
.arrows-container .left-arrow {
	position: fixed;
	top: 44%;
	left: 10px;
	font-size: 40px;
}

.arrows-container .left-arrow a {
	color: rgba(12,12,12,0.85);
	transition: color .25s ease-in-out;
	-moz-transition: color .25s ease-in-out;
	-ms-transition: color .25s ease-in-out;
	-webkit-transition: color .25s ease-in-out;
	-o-transition: color .25s ease-in-out;
}

.arrows-container .left-arrow a:hover {
	color: #2BA6CB;
}

.arrows-container .right-arrow {
	position: fixed;
	top: 44%;
	right: 10px;
	font-size: 40px;
}

.arrows-container .right-arrow a {
	color: rgba(12,12,12,0.85);
	transition: color .25s ease-in-out;
	-moz-transition: color .25s ease-in-out;
	-ms-transition: color .25s ease-in-out;
	-webkit-transition: color .25s ease-in-out;
	-o-transition: color .25s ease-in-out;
}

.arrows-container .right-arrow a:hover {
	color: #2BA6CB;
}


/* ------------------------------------*\
    $COMMENTS
\*------------------------------------*/

/* extras */

.commentlist .comment .reply { text-align: right; }
.comment .children {display: block;}

/* the rest */

ul.commentlist { padding-top: 10px; list-style-type: none; }

.commentbox {
    background: #dadada;
    color: #222;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    padding: 10px; }

li.comment, li.pingback, li.trackback {
	margin-top: 10px;
	list-style-type: none;
}


/* let's highlight posts made by the author with a slightly-yellow background  */

.bypostauthor > .commentbox {background: #f4e8b5;}

.commentbox .avatar {
    float: left;
    margin-right: 5px; }

.commentbox .avatar img {
	border-radius: 16px;
}

.commentbox .name { padding-top: 4px }

.commentbox .authorpart { height: 40px }

.commentbox .timeago {
    font-size: 13px;
    padding-left: 4px; }

.commenttext { padding-top: 5px }

.commentbox hr {
    background: url('images/bevel.png');
    height: 2px;
    margin: 0; }

/* this is the replies text part that takes place after the comment counter  */

.replies, h3#reply-title {
    font-family: "Scada", sans-serif;
    font-size: 18px;
    text-align: center;
    text-transform: uppercase;
}

/* leave a reply text  */

.leavereplies {
    font-size: 25px;
    font-weight: bold;
    color: #555; }

.reqlabel {
	font-size:16px;
	color: #555;
	font-weight: normal; }

label[for=author], label[for=email], label[for=url], label[for=comment] {
	font-size:14px; }
	
.comment .reply { text-align: right }
.comment .reply a { background: #fff; font-weight: bold; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; padding: 2px 4px; }
.comment .reply a:hover { background: #f0f0f0; }
.comment .reply a:active { background: #ccc }

/* ** COMMENT RESPONSES **
   ================================================== */

/* ===[ Name/Email/Website text fields need some style ]=== */

#author,
#email,
#url {
    font-size: 14px;
    border: none;
    border: none;
    padding: 4px 5px;
    margin: 0;
    outline: none;
    resize: none;
    box-shadow: inset 0 2px 3px #ccc, 0 1px 0 #f4fff6;
    border-radius: 4px;
    background: #fefef6; }

/* ===[ This is to make fields look awesome when they're being used (not just comment-related ones) ]=== */

#author:focus,
#email:focus,
#url:focus,
#comment:focus,
input[type='password']:focus { background: #f9f9c8 }

/* ===[ Now let's style the comment text form ]=== */

#comment {
    font-size: 14px;
    width: 100%;
    border: none;
    border: none;
    padding: 8px 10px;
    margin: 0;
    outline: none;
    resize: none;
    box-shadow: inset 0 2px 3px #ccc, 0 1px 0 #f4fff6;
    border-radius: 4px;
    background: #fefef6; }

/* ===[ This styles the asterix (*) next to required fields ]=== */

.required { color: #e78932 }

/* button */

#mc_button {
	margin: 0 0 15px;
	padding: 10px 14px 11px;

	border-radius: 4px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	
	text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.4);
	text-align: center;	
	text-decoration: none;
	font-size: 14px;
	font-weight: bold;
	letter-spacing: 0.8px;
	background: #000;
	
	color: #fff;
	
	transition: all .15s ease-in-out;
	-moz-transition: all .15s ease-in-out;
	-ms-transition: all .15s ease-in-out;
	-webkit-transition: all .15s ease-in-out;
	-o-transition: all .15s ease-in-out;
}

#mc_button {
	border: 1px solid #5E5E5E;
	background-color: #E95C41;
	background-image: -webkit-gradient(linear,left top,left bottom,from(#E95C41),to(#D93E2A));
	background-image: -webkit-linear-gradient(top,#E95C41,#D93E2A);
	background-image: -moz-linear-gradient(top,#E95C41,#D93E2A);
	background-image: -ms-linear-gradient(top,#E95C41,#D93E2A);
	background-image: -o-linear-gradient(top,#E95C41,#D93E2A);
	background-image: linear-gradient(to bottom,#E95C41,#D93E2A);
}

#mc_button:hover {
	background: rgb(232,88,62);
	background: -moz-linear-gradient(top,  rgba(232,88,62,1) 0%, rgba(216,21,0,1) 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(232,88,62,1)), color-stop(100%,rgba(216,21,0,1)));
	background: -webkit-linear-gradient(top,  rgba(232,88,62,1) 0%,rgba(216,21,0,1) 100%);
	background: -o-linear-gradient(top,  rgba(232,88,62,1) 0%,rgba(216,21,0,1) 100%);
	background: -ms-linear-gradient(top,  rgba(232,88,62,1) 0%,rgba(216,21,0,1) 100%);
	background: linear-gradient(to bottom,  rgba(232,88,62,1) 0%,rgba(216,21,0,1) 100%);
}

#mc_button:active {
	background: rgb(216,21,0);
	background: -moz-linear-gradient(top,  rgba(216,21,0,1) 0%, rgba(232,88,62,1) 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(216,21,0,1)), color-stop(100%,rgba(232,88,62,1)));
	background: -webkit-linear-gradient(top,  rgba(216,21,0,1) 0%,rgba(232,88,62,1) 100%);
	background: -o-linear-gradient(top,  rgba(216,21,0,1) 0%,rgba(232,88,62,1) 100%);
	background: -ms-linear-gradient(top,  rgba(216,21,0,1) 0%,rgba(232,88,62,1) 100%);
	background: linear-gradient(to bottom,  rgba(216,21,0,1) 0%,rgba(232,88,62,1) 100%);
}



/* ------------------------------------*\
    $LIKES / LOVES (for Zilla Likes)
\*------------------------------------*/

.zilla-likes {
	background: url(../images/heart.png) no-repeat 0 49%;
	border: 0 !important;
	display: inline-block;
	margin-bottom: 10px;
	min-height: 14px;
	padding-left: 18px;
	text-decoration: none;
}
.zilla-likes:hover,
.zilla-likes.active {
	background: url(../images/heart_active.png) no-repeat 0 49%;
	border: 0 !important;
	margin: 0 0 10px 0 !important;
	padding-left: 18px !important;
	text-decoration: none;
}

.zilla-blog-widget .zilla-likes,
.tz_recentwork_widget .zilla-likes,
.tz_blog_widget .zilla-likes,
.home div#the_body #slider .excerpt .zilla-likes,
.archive div#the_body #slider .excerpt .zilla-likes { display: none; } /* Hide Zilla Share in custom post widget and sliders in themes */


/* ------------------------------------*\
    $MEDIA
\*------------------------------------
   ================================================== */
.site-header img,
.entry-content img,
.comment-content img,
.widget img { max-width: 100%; /* Fluid images for posts, comments, and widgets */ }
.site-header img,
.entry-content img,
img[class*="align"],
img[class*="wp-image-"] { height: auto; /* Make sure images with WordPress-added height and width attributes are scaled correctly */ }
.site-header img,
img.size-full { max-width: 100%; width: auto; /* Prevent stretching of full-size images with height and width attributes in IE8 */ }
.entry-content img.wp-smiley,
.comment-content img.wp-smiley { border: none; margin-bottom: 0; margin-top: 0; padding: 0; }
.wp-caption { max-width: 100%; }
.wp-caption.aligncenter,
.wp-caption.alignleft,
.wp-caption.alignright { margin-bottom: 1.5em }
.wp-caption img { display: block; margin: 1.2% auto 0; max-width: 98%; }
.wp-caption-text { text-align: center }
.wp-caption .wp-caption-text { margin: 0.8075em 0 }
#content .gallery { margin-bottom: 1.5em }
.gallery-caption { }
#content .gallery a img { border: none; height: auto; max-width: 90%; }
#content .gallery dd { margin: 0 }
#content .gallery-columns-4 .gallery-item { }
#content .gallery-columns-4 .gallery-item img { }
/*gallery*/
.gallery { margin: 0 auto 18px }
.gallery .gallery-item { float: left; margin-top: 0; text-align: center; width: 25%; }
.gallery-columns-2 .gallery-item { width: 50%; margin-top: 5px; }
.gallery-columns-3 .gallery-item { width: 33%; margin-top: 5px; }
.gallery-columns-4 .gallery-item { width: 25%; margin-top: 5px; }
.gallery-item .wp-caption-text { padding-top: 8px; }
.gallery img { box-shadow: 0px 0px 4px #999; border: none !important; 	transition: all .15s ease-in-out; -moz-transition: all .15s ease-in-out; -ms-transition: all .15s ease-in-out; -webkit-transition: all .15s ease-in-out; -o-transition: all .15s ease-in-out; }
.gallery img:hover { box-shadow: 0px 0px 12px #999; }
.gallery-columns-2 .attachment-medium { max-width: 92%; height: auto; }
.gallery-columns-3 .attachment-medium { max-width: 87%; height: auto; }
.gallery-columns-4 .attachment-thumbnail { max-width: 84%; height: auto; }
.gallery .gallery-caption { color: #888; font-size: 12px; margin: 0 0 12px; }
.gallery dl,
.gallery dt { margin: 0 }
.gallery br+br { display: none }
/* ===[ Make sure embeds and iframes fit their containers ]=== */
embed,
iframe,
object { max-width: 100% }



/* ------------------------------------*\
    $SIDEBAR + Widgets (in footer)
\*------------------------------------*/

h4.widget-title {
	font-family: 'Scada', sans-serif;
	font-size: 22px;
	text-transform: uppercase;
	letter-spacing: 2px;
}

/* wp calendar */
/* calendar widget */
.widget_calendar { float: left }
#wp-calendar { width: 100%; border: 1px solid #fff; }
#wp-calendar caption { text-align: right; color: #333; font-size: 12px; margin-bottom: 5px; }
#wp-calendar thead { font-size: 10px }
#wp-calendar thead th { padding-bottom: 10px }
#wp-calendar tbody { color: #aaa }
#wp-calendar tbody td { background: #f5f5f5; border: 1px solid #fff; text-align: center; padding: 8px; }
#wp-calendar tbody td:hover { background: #fff }
#wp-calendar tbody .pad { background: none }
#wp-calendar tfoot { background: none }
#wp-calendar tfoot #next { font-size: 10px; text-transform: uppercase; text-align: right; }
#wp-calendar tfoot #prev { font-size: 10px; text-transform: uppercase; padding-top: 10px; }
table#wp-calendar td { text-align: center }
table#wp-calendar td#today { background: #bbb; font-weight: bold; }


/* ------------------------------------*\
    $FOOTER
\*------------------------------------*/

footer.site-footer {
	text-align: center;
	padding-bottom: 15px;
}

footer .goup {
	font-size: 35px;
	padding-bottom: 5px;
}



/* ------------------------------------*\
    $VARIOUS OTHER ONES WITH NO OTHER HOME
\*------------------------------------
   ================================================== */

/* ===[ You can also add your extra CSS styles here but it's better to make a child theme or add in Theme Options as you will lose these changes during a theme update ]=== */