/*
Theme Name: Hannah Blog
Theme URI: http://www.hannahlynes.com
Description: A theme built around bootstrap 3.0
Author: Steph Gray & team
Author URI: http://www.helpfultechnology.com
Version: 0.01
*/

/* ====================================
   General 
   ================================= */

body {
	font-size: 1.6em;
	line-height: 1.8em;
	font-weight: 400;
	font-family: "IBM Plex Sans", Helvetica, Arial, sans-serif;
 	font-smooth: always;
 	-webkit-font-smoothing: antialiased;
	background: #ddd;
}

h1, h2, h3, h4, h5, h6 {
	font-weight: 600;
	font-family: "IBM Plex Sans", Helvetica, Arial, sans-serif;
}

h1 {
	font-size: 2.4em;	
}

h2 {
	font-size: 1.8em;
}

h3 {
	font-size: 1.4em;
}

h1 a, h2 a, h3 a {
	border-bottom: none !important;
}

.wrapper {
	background: white;
	overflow-x: hidden;
	padding-bottom: 40px;
}

.wrapper a:link, .wrapper a:visited {
	color: #777a93;
	text-decoration: none;
}

article a:link, article a:visited {
	border-bottom: 2px solid rgba(119,122,147,0.2);
}

p {
	margin: 0.2em 0 1em 0;
}

p.postmeta {
	margin: 0.5em 0;
	color: #888;
}
h1 a {
	text-decoration: none;
}

h1 a:hover, h1 a:active {
	text-decoration: underline;
}

article a:hover, article a:active, 
article.content-listing h2 a:hover, article.content-listing h2 a:active, 
.readmore a:hover, .readmore a:active, 
p.postmeta a:hover, p.postmeta a:active {
	color: #e56671 !important;
	border-bottom: 2px solid rgba(229,102,113,0.2) !important;
}



.intro {
	font-size: 130%;
	line-height: 140%;
	color: #888;
	font-weight: 300;
	font-family: "IBM Plex Sans", Helvetica, Arial, sans-serif;
}

.siteimage {
	border-radius: 50%;
	margin: 0 20px 0 0;
	width: 64px;
	height: 64px;
}

.siteimagelarge {
	border-radius: 50%;
	margin: 0 20px 0 0;
}

/* limit the container width */

@media (min-width: 1200px) {
	.container {
		max-width: 990px;
	}
}

.media.authorbox {
  margin-top: 1em;
}

.authorbox img {
	float: left;
	margin: 5px 0 0 0;
	border-radius: 50%;
}

.authorbox-author, .authorbox-bio {
  	margin-bottom: 0;
}

.authorbox .authorbox-author, .authorbox .authorbox-bio {
	font-size: 0.8em;
	color: #888;
}
  
.listing-thumbnail {
	float: left;
	margin: 0 1em 1em 0;	
}

.has-thumbnail {
	padding-left: 170px;
}

@media (max-width: 767px) {
	.has-thumbnail {
		padding-left: 0;
		clear: left;
	}
}

/* ====================================
   rulers
   ================================= */

hr.heavy {
	border-top: 4px solid #000;
}

hr.medium {
	border-top: 2px solid #000;
}

hr.light {
	border-top: 1px solid #000;
}

hr.invisible {
	border-top: 1px solid #fff;
}

/* ====================================
   header
   ================================= */

.navbar.mainnav .container {
	/* padding: 6px 0 10px 0; */
}

.navbar.mainnav {
	background: #ddd;
	margin-bottom: 0;
	filter: none;
}

/* navbar form */

.navbar-form {
	padding: 0;
	margin-top: 8px;
	margin-bottom: 0;
	margin-left: 0;
}

/* navbar toggle button */

.container button.navbar-toggle {
	border: 1px solid #ccc;
}

.container span.icon-bar {
	background: #ccc;
}

/* navbar collapse view  */

.navbar-collapse {
	text-align: center;
	padding-left: 0;
}

.navbar-collapse.in {
	border-top: 1px solid #ddd;
}

/* navbar search */

.mainnav .form-control {
	border: none;
	border-radius: 0;
	width: 100px;
	-webkit-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
	transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}

.btn {
	border: 1px solid #777a93;
	border-radius: 0;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	-o-user-select: none;
	background: #646fe5;
	background: #777a93 !important;
	color: #fff;
}

@media (min-width: 768px) {
	.navbar-form .form-group {
		margin-right: -4px;
	}
	.mainnav #searchsubmit {
		margin-left: -7px;
	}
}

@media (max-width: 767px) {

	.mainnav #s {
		float: left;
		width: 80px;
	}
	.mainnav #searchsubmit {
		float: left;
	}
	.navbar-form .form-group {
		margin-bottom: 0;
	}
	.mainnav .navbar-form {
		border-top: 0;
		border-bottom: 0;
		box-shadow: none;
		-webkit-box-shadow: none;
		overflow: hidden;
		display: inline-block;
		width: 40%;
	}
	.mainnav li.menu-item {
		padding-top: 10px;
	}
	.navbar-collapse.in {
		border-top: 0;
	}
	.navbar-collapse {
		padding-left: 15px;
	}
}

.navbar-header {
	font-family: Helvetica, Arial;
}

/* Nav menu */

.menu-primary-navigation-container {
	display: inline;
}

.navbar ul.menu  {
	display: inline;
	list-style: none;
	padding-left: 0;
	padding-top: 10px;
	margin-left: 0;
	float: left;
	
}

.navbar ul.menu li {
	float: left;
	position: relative;
	display: inline-block;
	font-weight: bold;
	font-family: "Playfair Display", Helvetica, Arial, sans-serif;	
}

.navbar ul.menu li a {
	padding: 5px 20px 5px 0;
	color: #646fe5 !important;
	color: #777a93 !important;
}

/* ===================================================
   home page
   ================================================ */

header h1, header h2 {
	padding: 40px 0 20px 0;	
}

.entry {
	padding-top: 10px;
	font-size: 110%;
}

.entry ul {
	font-size: 1em;
	line-height: 1.8em;
	margin: 30px 0 40px;
	padding: 0 0 0 25px;
}

.entry li {
	line-height: 1.5em;
	margin: 0.2em 0 1em 0;
}

.entry img {
	max-width: 100%;
	height: auto;
}


.entry img.size-full {
	max-width: 100%;
	width: 100%;
	height: auto;
}

div.find-out-more ul {
	font-size: 1em;
	line-height: 1.8em;
	margin: 0;
	padding: 0 0 0 25px;
}

.homewidgets ul {
	list-style: none;
}

.homewidgets ul li ul {
	list-style: square;
	padding-left: 20px;
}

blockquote p {
	line-height: 1.6em;
}

/* ===================================================
   Tweets
   ================================================ */   

.home-tweets-ul {
	padding-left: 20px;
	margin: 0px;
	list-style: square;
}

.home-tweet-date {
	padding-top: 5px;
	font-size: 0.8em;
	display: block;
	color: #888;
}

.home-tweet-date span {
	font-size: 0.8em;
}

/* ===================================================
   Metro tiles
   ================================================ */
   
.metro {
	overflow: hidden;
	margin-bottom: 0px;
	margin-left: -10px;
	margin-right: -10px;
	clear: both;
}

.metro .tile {
	width: 33.33%;
	float: left;
	position: relative;
	box-sizing: border-box;
	border: 10px solid white;
}

.metro .tile img {
	height: auto;
	width: 100%;
}

.metro .tile .descr-text {
	color: #fff;
	background: url(img/black-trans.png);
	position: absolute;
	bottom: 0;
	width: 100%;
	padding: 8px 14px;
	box-sizing: border-box;
	line-height: 140%;
}

.metro .tile .postinfo {
	position: absolute;
	top: 20px;
	left: 0;
	margin: 0 20px;
}

.metro .tile .postinfo .date-meta {
	margin-bottom: 12px;
	font-weight: 400;
	font-size: 14px;
	color: #fff;
	opacity: 0.8;
}

.metro .tile .postinfo .date-meta i {
	margin: 1px 0 0 0;
}

.metro .tile .postinfo h4 {
	font-weight: 400;
	line-height: 1.4;
}

.metro .tile .postinfo a {
	color: #fff;
	font-weight: normal;
}

.metro .tile .rtheme a {
	color: #fff;
	font-weight: normal;
}

@media (max-width: 992px) {
	.metro .tile h4 {
		font-size: 0.9em;
	}
}

@media (max-width: 767px) {
	.metro .tile {
		width: 50%;
	}
	.metro .tile h4 {
		font-size: 1.2em;
	}
}

@media (max-width: 554px) {
	.metro .tile {
		width: 100%;
	}
}

/* ===================================================
   Author pages
   ================================================ */

.author .bio {
	margin-bottom: 20px;
}

.author .bio .inner {
	padding: 10px 20px 20px 20px;
}

.author .bio img {
	max-width: 150px;
	margin-right: 20px;
}
  
.author .metro {
	margin-top: 10px;
}

.author-header h2 {
	padding: 0;
	margin: 0;
} 

.author-header h4 {
	padding-bottom: 0;
	margin-bottom: 0;
} 

.author .govukprofile {
	margin-top: 20px;
	font-size: 0.8em;
	font-weight: 500;
}
   

/* ===================================================
   comments
   ================================================ */

#respond {
	margin-top: 50px;
}

#respond ul, #respond ol, ol.commentlist {
	list-style: none;
	padding: 0;
}

#respond ol ul {
	padding-left: 2em;
}

#respond ol ul ul {
	padding-left: 4em;
}

#respond label {
	display: block;
}

#respond li.comment, ol.commentlist li.comment, ol.commentlist li.pingback {
	margin: 1em 0 2em 0;
}

ol.commentlist li.comment, ol.commentlist li.pingback {
	font-size: 90%;
	line-height: 160%;
}

ol.commentlist ol.children {
	font-size: 110% !important;
	list-style: none;
	padding: 0;
}

ol.commentlist ol.children li {
	padding: 1em;
}

ol.commentlist li.bypostauthor {
	background: #fafafa;	
}

li.comment .comment-author img {
	border-radius: 50%;
}

li.comment .comment-meta {
	margin: 0.5em 0;
	font-size: 90%;
}

li.pingback {
	font-style: italic;
	opacity: 0.5;
}

.comments-title {
	margin-bottom: 1em;
}

/* ===================================================
   sidebar
   ================================================ */

ul.sidebar {
	margin-top: 0;
	list-style: none;
}


.widget {
	margin-top: 0;
	margin-bottom: 1.5em;
	line-height: 1.3em !important;
	padding: 0;
	background: #fff;
}

.widget ul {
	padding-left: 20px;
	list-style: square;
}

.widget li {
	padding-bottom: 0.5em;
}

.widget select {
	width: 100%;
}

.sidebar h3.widget-title {
	font-size: 1.3em;
	font-weight: 700;
	margin: 0 0 20px 0;
	border-bottom: 0;
	
}

.sidebar ul.menu {
	list-style: none;
	padding: 0;
}

.sidebar ul.menu li {
	padding-bottom: 0.5em;
}

.sidebar p.tweet-text {
	margin: 0 0 20px;
}

.sidebar .widget_nav_menu {
}

.sidebar .widget_nav_menu li {
	border-bottom: 1px solid #ccc;
	padding: 0.25em 0 0 0;
}

.sidebar .widget_nav_menu li:last-child {
	border-bottom: none;
}

p.tweet-details {
	display: none;
}

.latest-tweets ul {
	list-style: none;
	padding: 0;
}

.alignleft {
	float: left;
	margin: 0 1em 1em 0;
}

/* ===================================================
   boxed content
   ================================================ */

.content-listing, .widget, .author .bio, .post {
	padding: 0;
	margin-top: 20px;
	margin-bottom: 30px;
	background: #fff;
	overflow: auto;
}

.inner {
	padding: 0 25px 20px 0;
}

   
h3.widget-title, .content-listing h2, .author-header {
	font-size: 2em;
	background: none;
	padding: 20px 20px 20px 0;
	margin: 0;
}


.single h1.entry-title, .archive h1.entry-title {
	font-size: 2.4em;
	padding-right: 0.5em;
}


/* ===================================================
   main content listings
   ================================================ */


.meta-author {
	margin-top: 24px;
}

.meta-author img {
	max-width: 50px;
	height: auto;
	margin-right: 10px;
}

.meta-author .inner {
	padding: 0 0 10px 0;
	font-size: 0.8em;
	color: #888;
}

.content-listing .readmore {
	font-weight: bold;
	margin-top: 12px;
}

.img-featured {
	padding: 10px 0 30px;
}


/* ===================================================
   pagination
   ================================================ */

.page_nav {
	margin-top: 30px;
}
.page_nav .page-numbers {
	padding: 0.25em 0.5em;
	background: #dee0e2;
}

/* ===================================================
   footer
   ================================================ */

#footer {
	padding: 40px;
	color: #333;
	line-height: 170%;
	font-size: 90%;
}

#footer .container {
	padding-left: 0;
	padding-right: 0;
}

#footer h3.widget-title {
	padding: 0 0 20px 0;
}

#footer a {
	color: #0b0c0c;
	border-bottom: 2px solid rgba(119,122,147,0.2);
}

#footer a:hover, #footer a:active {
	color: #e56671 !important;
	border-bottom: 2px solid rgba(229,102,113,0.2);
	text-decoration: none;
}

#footer > .container > ul {
	list-style: none;
}

#footer > .container > ul > li > ul {
	list-style: square;
	padding-left: 20px;
}

#footer > .container > ul > li > ul li {
	padding: 5px 0;
}

footer ul.menu {
	list-style: none;
	padding: 0;
	font-size: 110%;
}

footer h3.widget-title {
	font-size: 1.2em;
}


/* override captions with inline styles */

.wp-caption {
	width: 100% !important;
}

.wp-caption-text {
	font-size: 90%;
}

/* Social links */

.social-media-links {
    list-style: none;
    margin: 15px 0 0 0;
    padding: 0 !important;
    overflow: auto;
}

.social-media-links li a {
    height: 38px;
    background-image: url('img/social-media-vertical.png');
    background-repeat: no-repeat;
    border: 0;
    margin-top: 0;
    margin-bottom: 0;
    display: block;
    padding-left: 48px;
    padding-top: 10px;
}

.social-media-links li a.twitter {
    background-position: 0 0px;
}

.social-media-links li a.facebook {
    background-position: 0 -45px;
}

.social-media-links li a.youtube {
    background-position: 0 -92px;
}

.social-media-links li a.linkedin {
	background-position:0 -139px
}

.social-media-links li a.instagram {
	background-position:0 -187px
}

.social-media-links li a.rss {
    background-position: 0 -234px;
}

.social-media-links li a.email {
	background-position:0 -326px;
}

.social-media-links li a.web {
	background-position:0 -374px;
}

/* Spacer classes */

.margin-top-10 {
	margin-top: 10px;
}

.margin-top-20 {
	margin-top: 20px;
}

.margin-top-30 {
	margin-top: 30px;
}

.margin-top-40 {
	margin-top: 40px;
}

.margin-bottom-10 {
	margin-bottom: 10px;
}

.margin-bottom-20 {
	margin-bottom: 20px;
}

.margin-bottom-30 {
	margin-bottom: 30px;
}

.margin-bottom-40 {
	margin-bottom: 40px;
}

iframe {
	width: 100%;
}