@charset "UTF-8";
/* CSS Document */

body, table, td, tr, p, h1, h2, h3, h4, h5, div { margin:0; padding:0 }

body { font-size:1em; line-height:2em; font-family: 'Source Sans Pro', sans-serif; margin: 0 auto; color: #333}
h1 { margin: 10px 0 30px 0 ; font-size:50px; line-height:62px; color:#222}
h2 { font-weight:bold; font-size:22px; line-height:28px; margin-bottom:25px; margin-top:30px; color:#333 }
h3 { font-weight:bold; font-size:20px; line-height:28px; margin-bottom:20px; margin-top:30px; color:#333; }
h4 { font-weight:normal; font-size:20px; line-height:28px; margin-bottom:10px; color:#333; }
p, .bio-details { font-size:18px; line-height:30px; color:#333; margin-bottom:25px; font-family: Georgia, "Times New Roman", Times, serif;}
.bio-details { margin-bottom: 5px }
li { font-size:18px; line-height:28px; color:#333; margin-bottom:10px}
ul { margin-bottom:20px}
a { color:#53473b}

#tinymce.mce-content-body {
    font-size:18px; line-height:32px; color:#111; margin-bottom:25px; font-family: Georgia, "Times New Roman", Times, serif !important;
}
#flex-container { display: flex; flex-direction: row }
#outer-container { margin: 0 auto;}
#header { max-width:1200px; width:100%; height:80px; margin: 0 auto; padding: 0 50px; display: flex; align-items: center}
#logo{ float:left; width:15%; line-height: 0}
#logo img { width:100%; height:auto; max-width:60px}
#nav { text-align:right; line-height:70px; float: right; flex: 1}
#nav ul { margin:0; float:right}
#nav li { float:left; list-style:none; margin: 0 10px}
#nav a { text-decoration:none; color:#000}
#hero { height:300px; margin: 20px 0; background:#efefef; padding:5px 0}
#inner-container { max-width:1200px; width:100%; height:auto; margin: 0 auto; clear:both; padding: 30px 50px; border-top:1px solid #ccc;}
.row { clear:both; width:100%}
.col-4 { width:33.3%; float:left; text-align:center}
.col-6 { width:50%; float:left; text-align:center}
.col-12 { padding: 20px 0}
.col-9 { width:72%; float:left; padding: 0px 20px 0 0; box-sizing:border-box}
.col-3 { width:28%; float:left; padding: 0 20px; box-sizing:border-box}
.col-3.right-sidebar { border-left:1px solid #ccc; margin-top:30px; padding: 0; display: flex}
.col-4 > div {padding:20px}
.clear { clear:both}
.listing { margin:15px 0; padding:15px 0; border-bottom:1px solid #efefef}
#intro {font-family: Georgia, "Times New Roman", Times, serif; font-size:22px; line-height:30px; color: #333}
.center { text-align:center}
.right-sidebar ul { margin: 0 0 20px 0; padding:0}
.right-sidebar li { list-style:none; margin: 10px 0 20px 0; padding: 0}
.right-sidebar h3 { margin-top:0 }
.caption { font-size:12px; line-height:18px; text-align:center; margin-bottom:20px}
.post-image img { width:100%; height:auto;}
#footer { font-size:14px; text-align:center; clear:both; color:#666; margin-top:30px}
#footer p { font-size:12px}

.sticky-sidebar {
    position: -webkit-sticky; /* Safari */
    position: sticky;
    top: -30px;
    display: flex;
}

.post-image {
    width: 100%;
    height: auto;
    max-width: 500px;
    overflow: hidden;
    margin: 0 auto 30px;
}

.move-label,.moderate-label, .motivate-label { color:#fff; font-size:13px; border-radius:8px; padding:0px 8px; background:#69ac69; margin-left:15px; display:inline-block; text-decoration:none}
.moderate-label, .motivate-label { background:#4d5478}
.motivate-label { background:#4eb0c5}
.post-label {margin:15px 0 15px 0}

#pagination { text-align: center}
.pagination { padding:0 20px}

.b { margin-top:50px}

img {
    max-width: 100%;
    height: auto;
}

select { font-size: 16px; margin-bottom: 30px; margin-top: 20px; color: #333}

#f-b { width:100%; max-width:800px; margin: 10px auto}

.author-meta {
    display: flex;
    flex-direction: row;
    padding: 0px 0px;
    align-items: center;
    line-height: 1em;
}

.author-meta .avatar img{
    border-radius: 50%;
    height: auto;
    width: 30px;
}

.author-meta .avatar img.large {
    width: 50px;
}

.follow-button { margin-left: 10px}

.author-meta .name{
    margin-left: 10px;
    font-size: 14px;
}

#social-icons {
    display: flex;
    margin-bottom: 10px;
}
#social-icons img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    margin-right: 10px;
}
#bio-avatar {float: left; margin: 0 15px 10px 0; width: 80px; }
#bio-avatar img { width: 80px; height: auto }
.sidebar-padding { padding: 0 20px }

.login-btn {
    background: #efefef;
    border-radius: 6px;
    padding: 20px;
    text-decoration: none;
}

#outer-carousel {
}

.carousel-item {
    width: 100px;
    flex: none;
    margin: 0 10px 0 0;
}

.carousel-item img {
    width: 100%;
    height: auto;
}

#inner-carousel {
    overflow-y: hidden;
    overflow-x: scroll;
    display: flex;
    flex-wrap: nowrap;
    background: #fff;
}

blockquote { text-align: center; font-style: italic;}
blockquote p { color: #888; font-size: 20px; }

#hero-wide { background: #000; height: 400px; margin: 0; overflow: hidden }
#hero-wide img {
    width: 100%;
    height: auto;
}

@media (max-width:800px){
    #logo { width:40px; margin:0 0 0 10px}
    #header { max-width:1200px; width:100%; height:50px; margin: 0 auto; padding:0;}
    #nav {}
    #nav li { font-size: 15px}
    #outer-container { padding: 0}
    #inner-container { padding: 0}
    #intro {font-size:20px; line-height:30px}
    #hero-wide {background: #000; height: 200px; margin: 0}


    .row { clear:both; width:100%}
    .col-4 { width:100%; float:left; text-align:center}
    .col-6 { width:100%; float:left; text-align:center}
    .col-12 { padding: 20px 0;}
    .col-9,.col-3, .col-3.right-sidebar { clear:both; width:100%; border:none; padding: 0}
    .col-3.right-sidebar { padding: 10px}
    .sidebar-padding { padding: 0 }
    h1 { font-size:30px; line-height:40px; padding:10px; margin:0}
    p { padding:10px 10px 0; margin-bottom:10px;}
    .bio-details { padding:10px 10px 0; margin-bottom: 0px }
    h4 { padding:0 10px}
    h3 { padding: 0 10px }
    .right-sidebar h3 { padding: 0 20px 15px 20px; margin:0px -10px; border-bottom:1px solid #efefef }
    .right-sidebar li { list-style:none; margin: 0 -10px; padding: 20px; border-bottom:1px solid #efefef}


    #hero { height:200px; padding:0}
    .mobile-padded {padding-left:10px; padding-right:10px}
    .move-label,.moderate-label,.motivate-label { display:none}
    .post-label { display:inline-block; margin:0 0 0 10px }
    #comments { padding:10px}
    .author-meta { margin-left: 10px}
    .right-sidebar .author-meta { margin-left: 0px; margin-top: 5px}
    #social-icons { clear: both; padding: 10px; margin-bottom: 0}

    #bio-avatar { margin: 10px 10px 0 0; width: 60px }
    #bio-avatar img { width: 60px; height: auto; margin: 10px }

    #outer-carousel { padding: 0 10px}

    .carousel-item {
        width: 70px;
    }

    .post-label { margin-top: 10px }

    .sticky-sidebar {
        position: relative;
    }
    #flex-container {
        flex: none;
        display: block;
    }

}