/* 
Theme Name: Griffin
Description: Griffin is a multi-column responsive theme ideal for blogs or personal websites.  
Author: Michael Burrows  
Author URI: http://www.wpmultiverse.com/
Theme URI: http://www.wpmultiverse.com/themes/griffin/
Tags: blue, gray, white, light, three-columns, two-columns, right-sidebar, responsive-layout, custom-colors, custom-header, custom-menu, editor-style, featured-images, sticky-post, threaded-comments   
Version: 1.0.9
License: GNU General Public License v3.0
License URI: http://www.gnu.org/licenses/gpl-3.0.html 
Griffin WordPress Theme, Copyright 2014 wpmultiverse.com
Griffin WordPress Theme is distributed under the terms of the GNU GPL
Text Domain: griffin
*/ 

body {background-color:#f3f3f3; color:#333; font-family:'Ubuntu', sans-serif;}
h1, h2, h3, h4, h5, h6 {margin-top:0; color:#000;}
a {color:#444;}
a:hover {color:#009dd9; text-decoration:none;}

/* ----- header & footer ----- */
header {position:relative; width:100%; text-align:center; display:block; margin-bottom:90px; padding:8% 0 6% 0; background-size:cover; background-position:center;}
header #hamburger {display:none;}
header #header-name {color:#fff; font-size:32px; border:3px solid #fff; padding:6px 12px; text-transform:uppercase; z-index:999; position:relative;}
header #header-logo {z-index:999; position:relative;}
header #header-logo img {max-height:120px;}
header #header-name:hover {opacity:0.65;}
header #header-description {color:#999; font-size:16px; font-style:italic; z-index:999; position:relative; top:10px; text-shadow: 1px 1px 1px #000;}
header #header-img {position:absolute; top:0; left:0; width:100%; z-index:99;}
#primary-menu {background-color:#222; width:100%; position:absolute; bottom:-50px; z-index:999; display:block;}
#primary-menu ul {position:relative; clear:left; float:right; right:50%; margin:0; padding:0; list-style:none; text-align:center;}
#primary-menu li {position:relative; float:left; left:50%; padding:16px 26px; font-size:16px; display:block;}
#primary-menu li a {color:#999; text-transform:uppercase; font-weight:bold;}
#primary-menu li a:hover {color:#fff; text-decoration:none; transition:color 0.2s ease;}
#primary-menu .sub-menu {display:none; background-color:#222; float:none; right:auto; position:absolute; left:-1px; z-index:9999; top:50px; padding:3px 26px 8px 26px;}
#primary-menu .sub-menu li {float:none; border:0; position:static; right:0; white-space:nowrap; text-align:left; font-size:14px; padding:0;}
#primary-menu .sub-menu li a {padding:4px 0; width:100%; display:block; text-transform:none; color:#999; font-weight:normal;}
#primary-menu .menu-item-has-children:hover a {color:#fff;}
#primary-menu .menu-item-has-children:hover .sub-menu li a:hover {color:#009dd9;}
footer {margin-top:50px;}
footer .menu li {display:inline; margin-right:10px;}
#footer-meta {width:100%; background-color:#111; text-align:center; font-size:13px;}
#footer-meta p a {color:#333;}

/* ----- widgets ----- */
.widget {margin-bottom:45px;}
.widget h4 {font-size:16px; padding-bottom:3px; border-bottom:2px solid; text-transform:uppercase; display:inline-block;}
.widget img {display:inline-block; height:auto; max-width:100%;}
.widget p {line-height:21px;}
.widget ul {padding:0;}
.widget li {list-style:none; margin:0 0 10px 0; padding-bottom:10px; border-bottom:1px solid;}
.widget select {max-width:100%; min-width:200px;}
.widget_search #s {width:70%;}
.widget_search label {display:none;}
.widget_recent_entries .post-date {width:100%; display:block; margin-bottom:10px;}
.widget_calendar table {width:100%; text-align:center;}
.widget_calendar table th {background-color:#444; color:#999; padding:8px 6px;}
.widget_calendar table td {border:1px solid #eee; padding:8px 6px; background-color:#fff;}
.widget_calendar table #prev, .widget_calendar table #next, .widget_calendar table tfoot .pad {border:0; border-left:1px solid #eee;}
.widget_calendar table tfoot td {background-color:#f7f7f7;}
.widget_calendar caption {background-color:#e9e9e9; padding:10px;}
.widget_tag_cloud a {font-size:13px!important; background-color:#444; color:#fff; display:inline-block; padding:5px 8px; margin:0 6px 6px 0; -webkit-border-radius:3px; -moz-border-radius:3px; border-radius:3px;}
.widget_tag_cloud a:hover {color:#009dd9;}
.widget .children, .widget .sub-menu {margin-top:12px;}
.widget .children li, .widget .sub-menu li {list-style:disc; border:0; margin-left:24px; padding:0;}
#sidebar-widgets {padding-top:15px;}
#sidebar-widgets .widget li {border-color:#ddd;}
#sidebar-widgets .widget h4 {border-color:#009dd9;}
#footer-widgets {width:100%; background-color:#222;}
#footer-widgets .col-md-4 {padding-top:30px;}
#footer-widgets .widget {color:#999;}
#footer-widgets .widget h4 {border-color:#fff; color:#fff;}
#footer-widgets .widget li {border-color:#333;}
#footer-widgets .widget a {color:#999;}
#footer-widgets .widget a:hover {color:#009dd9;}

/* ----- post teasers ----- */
#teaser-holder {visibility:hidden;}
.teaser {background-color:#fff; margin:0 15px 30px 15px; box-shadow:0 1px 4px rgba(0, 0, 0, 0.1); -webkit-border-radius:3px; -moz-border-radius:3px; border-radius:3px;}
.teaser, .teaser .attachment-featured-teaser {width:358px;}
.teaser .attachment-featured-teaser {height:auto; -webkit-border-top-left-radius:3px; -webkit-border-top-right-radius:3px; -moz-border-radius-topleft:3px; -moz-border-radius-topright:3px; border-top-left-radius:3px; border-top-right-radius:3px;}
.teaser-comment-total {float:right; color:#aaa; font-size:10px; font-family:arial,sans-serif; text-align:center; margin-top:4px; width:24px; height:23px; background:transparent url('assets/img/icon-comments-sm.png') 0 2px no-repeat;}
.teaser-title {padding-right:50px; font-size:24px; line-height:28px; margin-bottom:15px;  font-weight:700;}
.teaser-title a {color:#000;}
.teaser-title a:hover {color:#009dd9; transition:color 0.2s ease;}
.teaser-text {padding:15px 20px; line-height:22px;}
.teaser-more {border-bottom:2px solid #009dd9; text-transform:uppercase; padding-bottom:3px; font-weight:700;}
.teaser-footer {background-color:#f7f7f7; padding:10px 15px; color:#999; border-top:1px solid #f1f1f1;}
.teaser-footer img {margin-right:6px;}
.teaser-footer p {margin:0; font-size:13px;}
.teaser-footer span {position:relative; top:2px;}
.sticky h3 {line-height:35px;}
.sticky h3 span {color:#009dd9; font-size:16px; margin-right:12px; border:2px solid #009dd9; padding:3px 6px; position:relative; top:-2px; -webkit-border-radius:50px; -moz-border-radius:50px; border-radius:50px;}
.pager {width:100%; float:left; margin-top:150px; text-align:center; font-size:16px;}
.pager .page-numbers {border:1px solid #ccc; padding:3px 10px; color:#aaa;}
.pager a.page-numbers:hover {background-color:#ccc; color:#009dd9;}
.pager .current {font-weight:bold; background-color:#ccc; color:#fff;}
.pager .next, .pager .prev {border:0;}
.pager .next span, .pager .prev span {font-size:22px; position:relative; top:2px;}
.pager a.next:hover, .pager a.prev:hover {background-color:transparent;}
.search-results h1 {margin-top:30px;}
.search-results #teaser-holder {margin-top:30px;}

/* ----- posts & pages ----- */
article {line-height:1.75em; font-size:17px; background-color:#fff; margin-bottom:45px; box-shadow:0 1px 4px rgba(0, 0, 0, 0.1); -webkit-border-radius:3px; -moz-border-radius:3px; border-radius:3px;}
article h1 {font-size:42px;}
article h2 {font-size:37px;}
article h3 {font-size:32px;}
article h4 {font-size:27px;}
article h5 {font-size:22px;}
article h6 {font-size:17px;}
article p, article ul, article ol {margin-bottom:25px;}
article ul, article ol {padding:0; margin-left:16px;}
article ul ul, article ol ol {margin-bottom:0;}
article li {margin-bottom:12px;}
article a {text-decoration:underline;}
article img {display:inline-block; height:auto; max-width:100%;}
article blockquote {text-align:center; font-size:18px; color:#999;}
article blockquote cite {width:100%; display:block; font-size:15px; color:#777;}
article table {margin-bottom:25px;}
article table td, article table th {border:1px solid #ddd; padding:3px 6px;}
article dl {margin-bottom:25px;}
article dt {font-weight:bold;}
article dd {margin:0 0 12px 0;}
article .alignleft {float:left; margin:0 20px 12px 0;}
article .alignright {float:right; margin:0 0 12px 20px;}
article .aligncenter {margin:0 auto 25px auto;}
article .wp-caption-text, .gallery-caption {font-size:15px; margin-top:0; text-decoration:italic;}
article .wp-audio-shortcode {margin-bottom:30px;}
article #post-content {padding:30px;}
article #post-title {font-size:42px; line-height:48px; padding-right:150px; margin-bottom:30px;}
article #post-comment-total {float:right; font-size:15px; text-align:center; color:#aaa; width:32px; height:30px; margin-top:10px; background:transparent url('assets/img/icon-comments-lg.png') 0 2px no-repeat;}
article #post-tags a {background-color:#444; display:inline-block; margin:0 6px 6px 0; padding:0 8px; font-size:13px; text-decoration:none; color:#fff; -webkit-border-radius:3px; -moz-border-radius:3px; border-radius:3px;}
article #post-links {margin:0 30px 30px 30px;}
article #post-links a {border:1px solid #ccc; padding:3px 8px; color:#aaa; text-decoration:none; font-size:15px;}
article #post-links a:hover {background-color:#ccc; color:#009dd9;}
article #post-footer {background-color:#f7f7f7; padding:30px; color:#999; border-top:1px solid #f1f1f1;}
article #post-footer p {margin:0; font-size:15px;}
article #post-footer .avatar {margin-right:10px;}
article #post-nav {margin-bottom:20px; line-height:22px; font-size:14px;}
article #post-nav p {color:#999; margin-bottom:6px; font-size:12px; font-style:italic;}
article #post-nav span {font-size:24px; color:#bbb; position:relative; top:2px;}
article #post-nav-prev {float:left; width:50%;}
article #post-nav-next {float:right; width:50%; text-align:right;}
article .attachment-featured-full {-webkit-border-top-left-radius:3px; -webkit-border-top-right-radius:3px; -moz-border-radius-topleft:3px; -moz-border-radius-topright:3px; border-top-left-radius:3px; border-top-right-radius:3px;}

/* ----- comments ----- */
#comments h4 {font-size:22px; margin-bottom:30px;}
#comments .comment-list {padding:0;}
#comments .comment-list li {list-style:none; margin-bottom:45px; clear:both; float:left;}
#comments .comment-list .children {margin-left:15px;}
#comments .comment-list .children li {margin:45px 0 0 0;}
#comments .comment-list .pingback {margin-bottom:10px; list-style:disc; margin-left:15px;}
#comments .comment {width:100%;}
#comments .comment-avatar {margin-right:15px; float:left;}
#comments .comment-author {text-transform:uppercase; font-weight:bold;}
#comments .bypostauthor .comment-author {color:#009dd9;}
#comments .comment-meta {margin:0 0 3px 0;}
#comments .comment-meta a {text-transform:uppercase; font-size:12px;}
#comments .comment-date {color:#999; font-style:italic; margin:0 15px 0 5px;}
#comments .comment-text {float:left; width:90%;}
#comments .comment-body p {font-size:16px; line-height:1.6em; margin:0; color:#555;}
#comments #commentform label, #comments .form-allowed-tags {display:none;}
#comments .no-comments {clear:both;}

/* ----- form elements ----- */
input[type=text], input[type=email], input[type=password], input[type=search], textarea {border:1px solid #ddd; margin-right:5px; padding:12px; width:85%; font-size:14px; color:#222; margin-bottom:10px; -webkit-border-radius:3px; -moz-border-radius:3px; border-radius:3px;}
input[type=submit], input[type=reset] {background-color:#444; border:0; color:#fff; padding:10px 14px; text-align:center; font-size:14px; -webkit-border-radius:2px; -moz-border-radius:2px; border-radius:2px;}
input[type=password] {width:50%;}
.screen-reader-text {display:none;}

/* ----- spinner ----- */
.spinner {margin:100px auto; width:50px; height:30px; text-align:center; font-size:10px;}
.spinner > div {background-color:#333; height:100%; width:6px; display:inline-block; -webkit-animation:stretchdelay 1.2s infinite ease-in-out; animation:stretchdelay 1.2s infinite ease-in-out;}
.spinner .rect2 {-webkit-animation-delay:-1.1s; animation-delay:-1.1s;}
.spinner .rect3 {-webkit-animation-delay:-1.0s; animation-delay:-1.0s;}
.spinner .rect4 {-webkit-animation-delay:-0.9s; animation-delay:-0.9s;}
.spinner .rect5 {-webkit-animation-delay:-0.8s; animation-delay:-0.8s;}
@-webkit-keyframes stretchdelay {
  0%, 40%, 100% {-webkit-transform:scaleY(0.4)}  
  20% {-webkit-transform:scaleY(1.0)}
}
@keyframes stretchdelay {
  0%, 40%, 100% { 
    transform: scaleY(0.4);
    -webkit-transform: scaleY(0.4);
  }  20% { 
    transform: scaleY(1.0);
    -webkit-transform: scaleY(1.0);
  }
}

/* ----- media queries ----- */
@media (max-width:1200px) {	
	header {padding:10% 0 8% 0;}
	.teaser, .teaser .attachment-featured-teaser {width:450px;}
}
@media (max-width:992px) {	
	header {padding:10% 0 9% 0;}
	#primary-menu li {font-size:15px;}
	.teaser, .teaser .attachment-featured-teaser {width:344px;}
}
@media (max-width:768px) {	
	header {padding:11% 0 8% 0; margin-bottom:45px;}	
	header #header-name {font-size:22px;}
	header #hamburger {display:block; position:absolute; top:15px; margin-right:30px; float:right; z-index:9999; border:1px solid #eee; background-color:#eee; width:30px; right:0; padding:4px 4px 0 4px; -webkit-border-radius:2px; -moz-border-radius:2px; border-radius:2px;}
	header #hamburger span {height:3px; width:100%; background-color:#333; margin-bottom:4px; display:block;}
	#primary-menu {display:none; bottom:inherit; top:0;}
	#primary-menu ul {float:none; clear:none; text-align:left; left:0;}
	#primary-menu li {padding:8px; font-size:13px; width:100%; left:0;}	
	#content-holder {padding:0;}
	.teaser {width:96%;}
	.teaser .attachment-featured-teaser {width:100%;}
	.teaser-title {padding-right:0;}
}