/*
Theme Name: The HTML5 Boilerplate
Theme URI: http://github.com/zencoder/html5-boilerplate-for-wordpress
Description: Based on the <a href="http://html5boilerplate.com">HTML5 Boilerplate</a> and Bruce Lawson's <a href="http://html5doctor.com/designing-a-blog-with-html5/">Designing a Blog with HTML5</a>. The sole purpose of this theme is to save developers the time it takes to apply the HTML5 Boilerplate to WordPress. See the README for instructions. The "HTML5 Boilerplate" name is used with permission from Paul Irish.
Version: 1.0
Author: Steve Heffernan
Author URI: http://steveheffernan.com/
Tags: white, two-columns
License: GNU General Public License v2.0
License URI: http://www.gnu.org/licenses/gpl-2.0.html

*/

/*
HTML Boilerplate styles can be found in the html5-boilerplate/css directory.
*/

/* WordPress Required Styles */
.aligncenter {
	display: block;
	margin-left: auto;
	margin-right: auto;
    max-width: 100%;
}

.alignleft {
	float: left;
}

.alignright {
	float: right;
}

.wp-caption {
	border: 1px solid #ddd;
	text-align: center;
	background-color: #f3f3f3;
	padding-top: 4px;
	margin: 10px;
	-moz-border-radius: 3px;
	-khtml-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
}

.wp-caption img {
	margin: 0;
	padding: 0;
	border: 0 none;
}

.wp-caption-dd {
	font-size: 11px;
	line-height: 17px;
	padding: 0 4px 5px;
	margin: 0;
}

.sticky {
	background: #f7f7f7;
	padding: 0 10px 10px;
}
	
.sticky h2 {
	padding-top: 10px;
}
body {
	font-family: 'Fira Sans', Georgia, serif;
	background-color: #f7f7f7;
	margin: 0 auto;
}
a {
	text-decoration: none;
	border: 0;
}
#container {
	max-width: 1600px;
	margin: 0 auto;
}
#sidebar {
	background-color: #f7f7f7;
	width: 260px;
    float: left;
    display: inline;
    position: relative;
    z-index: 1;
}
#sidebar .title {
    font-size: 14px;
    text-transform: uppercase;
    color: rgba(0,0,0,0.5);
    display: block;
    font-weight: 500;
}
#sidebar section {
	margin: 60px 23px;
}
#sidebar section:first-of-type {
	margin: 50px 23px 0;
}
#sidebar img {
    height: 70px;
    border-radius: 50px;
    float: left;
    margin: 10px;
}
#sidebar .name {
    font-size: 12px;
    line-height: 14px;
    position: relative;
    top: 8px;
    display: block;
}
#sidebar .pro {
    top: 12px;
}
#sidebar .name a,
#sidebar .name a:visited {
    color: #97bd3d;
}
#sidebar ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
#sidebar ul a {
    font-size: 12px;
    color: #555;
}
.f-user {
    line-height: 17px;
}
#main {
	width: calc(100% - 260px - (100px*2));
    float: left;
    background-color: white;
    padding: 50px 100px;
}
#main .columns {
    -moz-column-gap: 1.5em;
    -webkit-column-gap: 1.5em;
    column-gap: 1.5em;
}
.single #main .columns{
    -moz-column-count: 1;
    -webkit-column-count: 1;
    column-count: 1;
}
#main iframe {
    max-width: 100%;
}
h2.pagetitle {
    background-color: white;
    width: calc(100% - 260px - (100px*2));
    position: relative;
    padding: 40px 100px 0;
    font-weight: 300;
    font-size: 35px;
    margin: 0px 0 -30px;
    float: left;
    color: rgb(85,85,85);
}
#main .card {
	display: inline-block;
    background: #fff;
    margin: 0 0 1.5em;
    width: 100%;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    border: 1px solid lightgray;
	cursor: pointer;
}
#main .card:hover {
    background: rgb(250,250,250);
}
#main .card img {
	width: 100%;
}
.post {
    max-width: 800px;
    padding: 0 0 0 100px;
}
.post p {
    color: #555;
}
.post a {
    color: #2483B2;
}
h2 {
	padding: 0 10px;
    line-height: 23px;
	font-size: 21px;
    font-weight: 400;
}
h2 a {
    color: #555;
}
h2 a:hover {color: #555;}
h2 a:visited {color: #555;}
.content footer {
	color: #555;
	font-size: 12px;
	display: flex;
    justify-content: space-between;
    padding: 0 10px 7px;
}
.content footer a {
	color: #97bd3d;
}
.content footer a:hover {
	text-decoration: underline;
}
.content footer span {
    opacity: 0.5;
}
#main-sections {
	height: 58px;
	display: flex;
	justify-content: flex-end;
    align-items: center;
	background-color: rgb(255,255,255);
}
#main-sections a {
	padding: 13px 30px;
	text-transform: uppercase;
	color: rgb(85, 85, 85);
	font-size: 16px;
    border-bottom: 5px solid transparent;
    border-top: 5px solid transparent;
	transition: background-color 0.5s ease;
}
#main-sections a:hover {
	background-color: white;
	border-bottom: 5px solid #97bd3d;
    box-sizing: content-box;
}
a.logo {
    position: absolute;
    line-height:73px;
    float:left;
    margin-left: 185px;
    padding-left: 95px;
    font-size:21px;
    background:url('img/logo.png') no-repeat;
}
a.logo:after {
    content:"";
    display:block;
    width:30px;
    height:18px;
    position:relative;
    bottom:-7px;
    right:30px;
    background:url('img/beta.png?1422438711') no-repeat;
}
header[role=banner] {
	background: #ccc url('img/8898631382_a66b6f0bc0_o.jpg?1413278637') 50%;
    -moz-background-size: cover;
    -o-background-size: cover;
    -webkit-background-size: cover;
    background-size: cover;
    min-height: 370px;
    box-shadow: inset 0 0 0 1000px rgba(51,51,51,.7);
    position: relative;
    -webkit-font-smoothing: antialiased;
}
header h1 {
	margin: 0 100px 0 150px;
}
header h1 a {
    font-size: 47px;
    font-weight: 400;
    line-height: 53px;
    color: #fff;
    margin: 60px 40px 0;
    display: block;
    /*-webkit-font-smoothing: auto;*/
}
header h1 a:visited,
header h1 a:hover {
    color: #fff;
}
header p {
    line-height: 24px;
    font-size: 19px;
    color: #fff;
    font-weight: 300;
    margin: 15px 190px 0;
    display: inline;
    float: left;
}
header p.posted {
    display: inline;
    float: right;
    margin: 15px 20px 0;
}
.description a {
    color: #fff;
}
header > span {
    float: right;
    color: #fff;
    margin: 0 40px;
    font-size: 10px;
    position: absolute;
    bottom: 0px;
    left: 0;
    text-transform: uppercase;
}
.total_posts {
    position: relative;
    font-size: 12px;
    top: -9px;
    display: flex;
    width: 1px;
}
.line-wrapper {
	width: 190px;
    height: 10px;
    display: inline-block;
}
.line-wrapper .line {
	width: 100%;
	height: 5px;
    background-color: #b6b6ba;
    display: block;
    border-radius: 5px;
    margin: 4px 0 0 0;
}
.line-wrapper .line:after {
	content: ' ';
    height: 8px;
    width: 8px;
    background-color: #b6b6ba;
    display: block;
    position: relative;
    top: -3px;
    border-radius: 10px;
    border: 2px solid #f7f7f7;
    float: right;
}
.line-wrapper .line.first {
	background-color: #97bd3d;
}
.line-wrapper .line.first:after {
	background-color: #97bd3d;
}
.search-form label:before {
    content: '...';
    display: inline-block;
    position: relative;
    width: 23px;
    height: 25px;
    color: transparent;
    background-color: #999;
    mask: url(img/search.svg) no-repeat 50% 50%;
    -webkit-mask: url(img/search.svg) no-repeat 50% 50%;
    left: -5px;
    transform: scale(1.3);
}
.search-form span { display:none; }
.search-form .search-field {
    line-height: 20px;
    -webkit-appearance: none;
    background-color: transparent;
    font-size: 12px;
    width: 180px;
    border: 0;
    border-bottom: 2px solid rgba(0,0,0,0.3);
}
.search-form .search-submit{ display:none; }
.prev-p-cont {
    top: 650px;
    position: fixed;
    display: flex;
    width: calc(100% - 315px);
    justify-content: space-between;
    margin: 0 0 0 -60px;
    max-width: 1285px;
}
.prev-p {
    visibility: visible;
    height: 40px;
    width: 40px;
    border-radius: 100%;
    background-color: #97bd3d;
    display: inline-block;
    cursor: pointer;
}
.prev-p.next {
    left: calc(100% - 260px - 50px);
}
.prev-p:before {
    content: '...';
    display: inline-block;
    position: relative;
    width: 23px;
    height: 13px;
    color: transparent;
    background-color: white;
    mask: url(img/arrow.svg) no-repeat 50% 50%;
    -webkit-mask: url(img/arrow.svg) no-repeat 50% 50%;
    left: 16px;
    top: 14px;
    transform: rotate(180deg) scale(1.8);
}
.prev-p.next:before {
    left: 2px;
    transform: scale(1.8);
}
.navigation-dir {
    visibility: hidden;
}
.pagination {
    clear:both;
    padding:20px 0;
    position:relative;
    font-size:11px;
    line-height:13px;
    display: flex;
    justify-content: center;
    z-index: 4;
}
 
.pagination span, .pagination a {
    float: left;
    color: #555555;
    font-size: 16px;
    line-height: 24px;
    font-weight: 500;
    text-align: center;
    min-width: 24px;
    margin: 0 10px 0 0;
    background: none;
    text-decoration: none;
}
 
.pagination a:hover{
    color:#97bd3d;
}
 
.pagination .current{
    cursor: default;
    border-bottom: 2px solid #97bd3d;
}
#mobile-sidebar {
    display: none;
}
#mobile-sidebar ul {
    display: flex;
    justify-content: space-around;
    list-style: none;
}
#mobile-sidebar a {
    color: #555;
    font-size: 12px;
    text-transform: capitalize;
}
@media only screen and (max-width: 1049px) {
    a.logo {
        margin-left:15px;
    }
}
@media only screen and (max-width: 850px) {
    .post {
        padding: 0;
    }
    #main-sections {
        visibility: hidden;
        margin-bottom: -120px;
    }  
    #main {
        width: calc(100% - (50px*2)); 
        padding: 50px;
    }
    #main .columns {
        -moz-column-count: 2;
        -webkit-column-count: 2;
        column-count: 2;
    }
    #sidebar {
        display: none;
    }
    header[role=banner] {
        min-height: 220px;
    }
    header h1 {
        margin: 130px 0 0;
    }
    header h1 a {
        font-size: 34px;
    }
    header p {
        line-height: 20px;
        font-size: 15px;
        margin: 5px 40px 0;
    }
    header p {
        margin: 15px 40px 0;
    }
    .prev-p-cont {
        width: calc(100% - 13px);
        margin: 0px 0 0 -45px;
    }
    #mobile-sidebar {
        display: block;
    }
    a.logo {
        background-size: contain;
        width: 60px;
        height: 60px;
        margin-left:15px;
    }
    a.logo:after {
        bottom: 25px;
        right: 61px;
    }
}
@media only screen and (max-width: 585px) {
    #mobile-sidebar li:not(:last-child) {
        display: none;
    } 
    header[role=banner] {
        min-height: 250px;
    }
    header h1 {
        margin: 130px 0 0;
    }
    header h1 a {
        font-size: 30px;
        line-height: 28px;
    }
    header p {
        line-height: 20px;
        font-size: 15px;
        margin: 5px 40px 0;
    }
    #main {
        width: calc(100% - (20px*2)); 
        padding: 20px;
    }
    #main .columns {
        -moz-column-count: 1;
        -webkit-column-count: 1;
        column-count: 1;
    }
    #sidebar {
        display: none;
    }
    .prev-p-cont {
        width: calc(100% - 51px);
        margin: 12px 0 0px 5px;
    }
    .prev-p {
        position: relative;
        z-index: 5;
    }
    .prev-p.next {
        left: 0;
    }

}
@media only screen and (min-width: 1024px) {
    #main .columns {
        -moz-column-count: 2;
        -webkit-column-count: 2;
        column-count: 2;
    }
}
@media only screen and (min-width: 1200px) {
    #main .columns {
        -moz-column-count: 3;
        -webkit-column-count: 3;
        column-count: 3;
    }
}
.fb_iframe_widget {
    position: relative;
    top: -7px;
    left: -33px;
}