* {box-sizing:border-box;}

html, body {
    font-family:'Open Sans', 'Averia Serif Libre', Arial, Helvetica, sans-serif;
    margin: 0;
    padding: 0;
    text-rendering: optimizeLegibility;
    box-sizing:border-box;
    overflow-x:hidden;
}

body {
    background:#000;
    color:#888;
}

h1, h2, h3, h4, h5, h6, h7, h8 {
    letter-spacing:-1px;
}

a {
    text-decoration:none;
    color:goldenrod;
}

main {
    margin-top:50px;
}

#top-toolbar {
    background:linear-gradient(#000, #222);
    text-align:center;
    height:50px;
    width:100%;
    padding:9px;
    top:0;
    position:fixed;
}

#bottom-toolbar {
    background:linear-gradient(#222, #000);
    text-align:center;
    height:65px;
    width:100%;
    padding:9px 0 24px 0;
    bottom:0;
    position:fixed;
}

#bottom-toolbar ul {
    width:100%;
    max-width:600px;
    display:table;
    margin:auto;
    padding:0;
}

#bottom-toolbar li {
    display:table-cell;
}

#bottom-toolbar a {
    padding-right:15px;
    padding-left:15px;
    color:goldenrod;
    font-size:24px;
}

#story h2 {
    color:#ddd;
    font-size:16px;
    margin:0;
    padding:0;
    font-weight:500;
    letter-spacing:0;
    text-transform:uppercase;
}

#story p {
    font-size:16px;
    line-height:18px;
    color:#999;
    margin-top:5px;
    margin-bottom:8px;
}

#story {
    font-size:16px;
}

#story li {
    font-size:16px;
}

#story img {
    max-width:100%;
}

#story .post {
    margin-bottom:48px;
}

#hero {
    background-size: cover;
    width: 100%;
    height: 80vh;
    min-height: 640px;
    display:table;
}

.hero-content {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    padding:48px;
    background:linear-gradient(rgba(0,0,0,.05) , rgba(0,0,0,.95) );
}

#hero h1, #hero h5 {
    color:#fff;
    text-shadow:0px 2px 3px rgba(0,0,0,0.75);
}

#hero h1 {
    font-size:60px;
    line-height:64px;
    margin-top:0;
    margin-bottom:20px;
    font-weight:500;
    font-family:'Rock Salt';
}

#hero h5 {
    font-size:30px;
    line-height:32px;
    margin-top:0;
    margin-bottom:30px;
    font-weight:400;
}

#hero p {
    color: gainsboro;
    font-size: 24px;
    text-shadow:0px 2px 3px rgba(0,0,0,0.4);
}


article {
    margin-bottom:10px;
    -webkit-column-break-inside: avoid;
          page-break-inside: avoid;
               break-inside: avoid;
}


footer{
    background:#000;
    color:#ddd;
    text-align:center;
    padding-top:40px;
    padding-bottom:60px;
}

#social_list, #quick_social_list {
list-style:none;
text-align:center;
padding:24px;
clear:both;
}

#social_list li, #quick_social_list li {
display: inline-block;
padding:5px;
}

#social_list img, #quick_social_list img {
height:40px;
width:40px;
}


footer a {
color:#ccc;
font-size:15px;
}

.dropbtn {
    background-color: transparent;
    color: goldenrod;
    padding-bottom:6px;
    font-size: 12px;
    font-weight: bold;
    border:0;
}

.dropdown {
    position: relative;
    display: inline-block;
    float:right;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #222;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    right:0;
}

.dropdown-content a {
    color: goldenrod;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    font-size:15px;
}

.dropdown-content a:hover {background-color: #444;}

.dropdown:hover .dropdown-content {
    display: block;
}

.dropdown:not(:hover) .dropdown-content {
    display:none;
}

.dropdown:hover .dropbtn {
    background-color: #222;
}

.container {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
    }

.video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    }

    #admintoolbar {
        overflow:auto;
        max-width:300px;
        margin:auto;
    }
    
    #admintoolbar a {
        float: left; /* Float links side by side */
        text-align: center; /* Center-align text */
        width: 33.3%; /* Equal width (5 icons with 20% width each = 100%) */
        padding: 12px 0; /* Some top and bottom padding */
        transition: all 0.3s ease; /* Add transition for hover effects */
        color: #777; /* White text color */
        font-size: 32px; /* Increased font size */
    }
    
    #admintoolbar a:hover {
        /* background: linear-gradient(#222, #444);  Add a hover color */
        color:goldenrod;
    }
    
    #admintoolbar a:active {
        background-color: #4CAF50; /* Add an active/current color */
    }

    .profile-picture {
        width: 120px;
    height: 120px;
    margin-bottom: 30px;
    border-radius: 1000px;
    vertical-align: middle;
    border: 5px solid rgba(0,0,0,.3);
        }

    .small-profile {
        width: 48px;
    height: 48px;
    border-radius: 1000px;
    vertical-align: middle;
    border: 1px solid goldenrod;
    margin:0 6px;
    }

    #stories {
        text-align:center;
        max-width:1100px;
        margin:auto;
    }

    #stories h2{
        text-align:left;
        color:goldenrod;
        font-weight:500;
    }

    article.story {
        text-align:center;
        padding:5px;
        width:336px;
        display:inline-block;
        vertical-align: top;
        box-sizing:content-box;
        margin:0;
    }

    article.story h2 {
        color:#fff;
        font-size:1em;
        font-weight:500;
        background:rgba(0,0,0,0.7);
        padding:10px;
        letter-spacing:0;
        text-transform:none;
    }

    .story-image {
        width:336px;
        height:280px;
        background-position:center;
        background-size:cover;
    }

    article.story h2 a {
        color:goldenrod;
    }

    article.story p {
        text-align:center;
        margin:0;
        padding:0 24px;
        font-size:15px;
        line-height:18px;
        color:#888;
    }

    .slide-control-right {
        position:fixed;
        right:5px;
        top:40%;
        padding:5px 15px 7px 17px;
        font-size:30px;
        z-index:999;
        border-radius:50px;
        background-color: rgba(128, 128, 128, 0.5);
        font-weight:bold;
        
    }

    .slide-control-left {
        position:fixed;
        left:5px;
        top:40%;
        padding:5px 17px 7px 15px;
        font-size:30px;
        z-index:999;
        border-radius:50px;
        background-color: rgba(128, 128, 128, 0.5);
        font-weight:bold;
        
    }

    .post .engagement {
        text-align:left;
        padding-top:0;
    }

    .post .goldstar {
        display:inline-block;
        color:goldenrod;
        font-size:26px;
        padding:0;
        cursor:pointer;
    }

    .post .goldstar .count {
        font-size:16px;
        color:#ddd;
        font-family:'Open Sans';
        position: relative;
        top: -4px;
        margin:0 15px 0 5px;
    }

    .post .social {
        display:inline-block;
        transition: all 0.3s ease;
        position:relative;
        top:-2px;
    }

    .post .hidden {
        display:none;
        transition: all 0.3s ease;
    }

    .post .social a {
        color:goldenrod;
        font-size:24px;
        padding:6px 12px;
    }

    h6 {
        font-size:24px;
        font-weight:500;
        color:#bbb;
    }

    .button {
        background: linear-gradient(257deg,goldenrod,darkgoldenrod);
        width:100%;
        max-width:400px;
        margin:auto;
        border: 0;
    border-radius: 5px;
    text-align: center;
    box-shadow: 0 1px 0 0 #315f85;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    cursor: pointer;
    padding: 13px 20px;
    }

    input[type=text], input[type=password], select, textarea {
        width: 100%;
        max-width:400px;
        margin:auto;
        background: #222;
        color: #ccc;
        font-size:18px;
        padding:10px 20px;
        border-radius: 3px;
        margin-bottom:10px;
        outline:none;
        border:1px solid #aaa;
        font-family: 'Open Sans', sans-serif;
        -webkit-appearance: none;
        -webkit-border-radius: 3px;
    }
    
    input:focus, select:focus, textarea:focus {
        border-color:goldenrod;
        background:#333;
        outline:none;
    }

@media screen and (max-width: 600px) {

    #story h2 {
        font-size:18px;
        line-height:1.2;
        padding-top:5px;
    }

    #story h5 {
        font-size:18px;
        line-height:1.2;
        color:#ccc;
        font-weight:500;
    }

    #story p {
        font-size:18px;
        line-height:1.3;
        color:#bbb;
    }

    #story li {
        font-size:19px;
        font-family:Raleway;
        color:#bbb;
    }

    #hero h1 {
        font-size:36px;
        letter-spacing:-1px;
        font-weight:500;
    }
    
    #hero h5 {
        font-size:20px;
        letter-spacing:-1px;
    }

    .profile-picture {
        height:120px;
        width:120px;
    }

    #hero p {
        font-size:20px;
    }


article h2 {
    font-size:20px;
    line-height:24px;
}

#hero {
    min-height:540px;
    height:auto;
}

.hero-content {
    margin:24px;
}

article.story {
    margin-bottom:10px;
}

article.story h2 {
    font-size:1.1em;
}

}