@font-face {
    font-family: 'Playball';
    src: url(../../oneflow/css/fonts/Playball.ttf) format('truetype');
}

@font-face {
    font-family: 'La-Belle-Aurore';
    src: url(../../oneflow/css/fonts/La-Belle-Aurore.ttf) format('truetype');
}

html {
    float: left;
    width: 100%;
    height: auto;
    height: auto;
    font-family: Verdana,Sans-Serif;
    font-size: 14px;
    text-align: center;
    color: #292929;
    display: inline-block;
    background:transparent;
}

form {
    float: left;
    width: 100%;
    height: auto;
    height: auto;
    font-family: Verdana,Sans-Serif;
    font-size: 14px;
    text-align: center;
    color: #292929;
    display: inline-block;
    background: transparent;
}

body {
    width:100%;
    background:#101010;
    font-size:14px;
    margin:0;
    padding:0;
    float:left;
    display:block;
    position:relative;
}

section.menu {
    display: inline-block;
    width: 80%;
    text-align: center;
    background: transparent;
    position: absolute;
    z-index: 3;
    top: 0;
    left: 10%;
    /*background:rgba(51,116,171,0.8);*/
    background: rgba(30,30,30,0.2);
}

div.menu_spacer {
    float:left;
    display:inline-block;
    width:100%;
    box-sizing:border-box;
    height:50px;
    margin:0;
    padding:0;
}

nav.logo {
    width: auto;
    height: auto;
    float: left;
    font-size: 128%;
    line-height: 100%;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    /*margin-left:11%;*/
}

    nav.logo a {
        float: left;
        line-height: 1em;
        padding: 0.9em 0.9em 0.7em 0.9em;
        color: #ffffff;
        text-decoration: none;
        -webkit-transition: background-color 0.5s ease;
        -moz-transition: background-color 0.5s ease;
        -o-transition: background-color 0.5s ease;
        transition: background-color 0.5s ease;
        font-weight: normal;
        font-family: Georgia, Serif;
        font-style: normal;
        text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.5);
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        position: relative;
    }

    nav.logo a:hover {
        background: rgba(0,106,179, 0.8);
    }

nav.logo a i {
    float: none;
    font-size: 70%;
    padding: 0;
    margin: 0;
    text-transform: lowercase;
    font-style:normal;
}

    nav.logo sup {
        font-size: 45%;
        color: rgba(255, 255, 255, 0.1);
        position: relative;
        vertical-align: baseline;
        margin-left: 1px;
        margin-right: -1em;
        top: -1.4em;
        margin-bottom: -1.4em;
        text-shadow: 0px 0px 0px rgba(0, 0, 0, 0);
    }

nav.logo a img {
    float: left;
    width: 8px;
    height: 7px;
    border: none;
    display: inline-block;
    margin-right: -11px;
    margin-top: -2px;
    margin-left: 11px;
}

nav.logo a span {
    float: none;
    font-size: 100%;
    padding: 0;
    margin: 0;
    font-weight: normal;
    display: inline-block;
    margin-left: -11px;
}

nav.logo a strong {
    float: none;
    font-size: 100%;
    padding: 0;
    margin: 0;
    font-weight: normal;
}

nav.menu_nav {
    width: auto;
    height: auto;
    float: left;
    font-size: 110%;
    line-height: 100%;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

    nav.menu_nav a {
        float: left;
        line-height: 1em;
        padding: 1.1em 1.1em 1em 1.1em;
        color: #fff;
        height:50px;
        text-decoration: none;
        -webkit-transition: background-color .5s ease;
        -moz-transition: background-color .5s ease;
        -o-transition: background-color .5s ease;
        transition: background-color .5s ease;
        /*font-weight: bold;*/
        text-shadow: 0 0 2px rgba(0,0,0,.5);
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }

        nav.menu_nav a:hover {
            background: rgba(0,106,179, 0.8);
        }

nav.menu_nav_right {
    float:right;
}

    nav.menu_nav_right a {
        padding: 1.1em 1.5em 1em 1.5em;
    }

article.intro_article {
    display:inline-block;
    max-width:80%;
    width:80%;
    height:75vh;
    float:none;
    margin:0 auto;
    padding:0 0;
    box-sizing:border-box;
    position:relative;
    overflow:hidden;
}

article.intro_article div.image_table {
    width:100%;
    height:auto;
    float:left;
    text-align:center;
    position:relative;
    margin:0;
    padding:0;
    overflow:hidden;
}

article.intro_article div.gradient {
    width:100%;
    max-width:100%;
    height:auto;
    display:inline-block;
    text-align:center;
    margin:0 auto;
    position:relative;
}

article.intro_article  div.gradient::after {
    content:'';
    background: rgba(0, 106, 179, 0.8);
    width:100%;
    min-width:100%;
    height:100%;
    min-height:none;
    position:absolute;
    z-index:2;
    top:0;
    left:0;
}

article.intro_article img {
    /* max-height:calc(100vh - 3em); */
    /* min-width:100%;
    width:100%; */
    text-align:center;
    margin:0 auto;

    display: flex;
    align-items: center;
    justify-content: center; 
    min-width:100%;
    min-height:100%;
    object-fit: cover;
}

article.intro_article div.text {
    width:100%;
    top:0;
    left:0;
    z-index:2;
    height:75vh;
    display:table;
    position:absolute;
    text-align:center;
    vertical-align:middle;
}

article.intro_article div.title_wrap {
    display:table-cell;
    vertical-align:middle;
    text-align:center;
}

article.intro_article div.text span.logo_title {
    height:auto;
    width:100%;
    text-align:center;
    font-size:2.2em;
    font-family:La-Belle-Aurore;
    color:#fff;
    padding: 0 15% 0 15%;
    box-sizing:border-box;
    max-width:100%;
    margin:0 auto 0 auto;
    line-height:1.5em;
    display:inline-block;
    text-shadow: 1px 1px 3px black; 
}

article.intro_article div.text span.main_title {
    height:auto;
    width:100%;
    text-align:center;
    font-size:4em;
    font-family:Georgia;
    color:#fff;
    padding: 0 15% 0 15%;
    box-sizing:border-box;
    max-width:100%;
    margin:0 auto;
    line-height:1.5em;
    display:inline-block;
    text-shadow: 1px 1px 4px black; 
}

article.intro_article span.main_title em {
    /*background-image: linear-gradient(to right, #5195ce, #18699e);*/
    background:transparent;
    font-style:normal;
    padding:0 8px;
    white-space:nowrap;
}

article.intro_article div.text span.tagline_title {
    height:auto;
    width:100%;
    text-align:center;
    font-size:1.5em;
    font-family:Georgia;
    color:#fff;
    padding:2em 15% 0 15%;
    box-sizing:border-box;
    max-width:100%;
    margin:0 auto 0 auto;
    line-height:1.5em;
    display:inline-block;
    text-shadow: 1px 1px 3px black; 
}

article.intro_article span.downarrow {
    border: solid rgba(0,0,0,0.3);
    border-width: 0 12px 12px 0;
    display: inline-block;
    padding: 20px;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    position:absolute;
    z-index:3;
    bottom:40px;
    left:calc(50% - 26px);
}


section.story {
    display:inline-block;
    width:100%;
    text-align:center;
}

section.stories {
    background: #101010;
}

    /*section.stories:nth-child(even) {
        background: #101010;
    }*/

article.story_article {
    display:inline-block;
    max-width:75%;
    width:75%;
    height:100vh;
    float:none;
    margin:0 auto;
    padding:3em 0;
    box-sizing:border-box;
    position:relative;
}

article.stories_article {
    padding: 2em 0 2em 0;
    max-width: 76%;
    width: 80%;
    height: auto;
}

article.story_article table.image_table {
    width:40%;
    height:calc(100vh - 6em);
    float:left;
    text-align:center;
    vertical-align:middle;
    position:relative;
    margin:0;
    padding:0;
}

article.story_article table.image_small {
    height: calc(40vh - 6em);
    width: auto;
}

article.story_article div.gradient {
    width:auto;
    max-width:100%;
    height:auto;
    display:inline-block;
    text-align:center;
    margin:0 auto;
    display:table-cell;
    vertical-align:middle;
    position:relative;
}

article.story_article  div.gradient::after {
    content:'';
    background: transparent;
    width:100%;
    min-width:100%;
    height:100%;
    min-height:none;
    position:absolute;
    z-index:2;
    top:0;
    left:0;
}

article.story_article img {
    max-height:calc(100vh - 6em);
    max-width:100%;
    width:auto;
    float:none;
    text-align:center;
    margin:0 auto;
}

article.story_article video {
    max-height:calc(100vh - 6em);
    max-width:100%;
    width:auto;
    float:none;
    text-align:center;
    margin:0 auto;
}

article.story_article div.text {
    width:60%;
    height:calc(100vh - 6em);
    display:table-cell;
    vertical-align:middle;
    text-align:center;
}

    article.story_article img.img_small {
        max-height: calc(40vh - 6em);
    }

    article.stories_article video {
        max-height: calc(40vh - 6em);
    }

article.story_article div.text_small {
    height: calc(40vh - 6em);
    text-align: left;
    text-shadow: 1px 1px 3px black;
}

    article.story_article div.text p {
        height: auto;
        width: 100%;
        text-align: center;
        font-size: 2em;
        font-family: Georgia;
        color: #fff;
        padding: 2em 1em;
        box-sizing: border-box;
        max-width: 500px;
        margin: 0 auto;
        line-height: 1.5em;
    }

    article.stories_article div.text p {
        max-width:none;
        float:left;
        text-align:left;
    }

        article.stories_article div.text p a {
            /*background: #5195ce;
            font-style: normal;
            padding: 0 8px;*/
            /*margin-left: 10px;*/
            color: #fff;
            text-decoration: none;
        }

            article.stories_article div.text p a:hover {
                text-decoration: underline;
            }

        article.story_article div.text p a {
            color: #fff;
            text-decoration:none;
        }

            article.story_article div.text p a:hover {
                color: #ddd;
            }

article.story_article p em {
    background: #006ab3;
    font-style: normal;
    padding: 0 8px;
    white-space: nowrap;
}

article.story_article p i {
    background: #006ab3;
    font-style: normal;
    padding: 4px 8px;
    white-space: nowrap;
    margin-left: 8px;
    border-radius: 5px;
    font-size: 0.8em;
}

/* footer section */
footer {
    float: left;
    width: 100%;
    height: auto;
    margin: 0 0 0 0;
    padding: 0px;
    text-align: center;
    font-size: 1em;
    line-height: 1em;
    background-color: #010101;
    display: inline-block;
}

    footer section.middlefooter {
        float: left;
        width: 100%;
        height: auto;
        margin: 0;
        padding: 0;
        text-align: center;
        font-size: 1em;
        line-height: 1em;
        background-color: #1e1e1e;
        display: inline-block;
    }

    footer article.middlefooter_article {
        float: none;
        width: 80%;
        margin: 0 auto;
        padding: 4em 1.5em 3em 1.5em;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        display: inline-block;
    }

.footer_linkbar_wrap {
    float: left;
    width: 100%;
}

.footer_blogbar_wrap {
    float: left;
    width: 48%;
    padding: 0 2em 0 1em;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.footer_tweetbar_wrap {
    float: left;
    width: 30%;
    height: auto;
}

.footer_linkbar_item {
    float: none;
    width: auto;
    padding: 1em;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin:0 auto;
    display:inline-block;
}

    .footer_linkbar_item a {
        text-decoration: none;
        color: #ccc;
        margin-top:6px;
        float:left;
        display:inline-block;
    }

        .footer_linkbar_item a:hover {
            color: #006ab3;
        }

.footer_social_icon {
    float: left;
    width: 25px;
    height: 26px;
    margin-right: 8px;
    background-repeat: no-repeat;
}

.footer_icon_twitter {
    background-image: url(../../images/gensplash/master/footer-icons-2020.png);
    background-position: 0px 0px;
}

.footer_icon_facebook {
    background-image: url(../../images/gensplash/master/footer-icons-2020.png);
    background-position: -25px 0px;
}

.footer_icon_blog {
    background-image: url(../../images/gensplash/master/footer-icons-2020.png);
    background-position: -50px 0px;
}

.footer_icon_pinterest {
    background-image: url(../../images/gensplash/master/footer-icons-2020.png);
    background-position: -75px 0px;
}

.footer_icon_youtube {
    background-image: url(../../images/gensplash/master/footer-icons-2020.png);
    background-position: -100px 0px;
}

.footer_icon_instagram {
    background-image: url(../../images/gensplash/master/footer-icons-2020.png);
    background-position: -125px 0px;
}

.footer_icon_linkedin {
    background-image: url(../../images/gensplash/master/footer-icons-2020.png);
    background-position: -151px 0px;
}

.footer_icon_tiktok {
    background-image: url(../../images/gensplash/master/footer-icons-2020.png);
    background-position: -176px 0px;
}

nav.bottom_logo {
    float: none;
    margin:0 auto;
    display:inline-block;
    margin-top:2em;
}

a.bottom_button {
    position: fixed;
    bottom: 15px;
    right: 15px;
    background: rgba(0,0,0,0.2);
    border:1px solid rgba(255,255,255,0.5);
    box-sizing: border-box;
    padding: 1em 1.2em 1em 1.2em;
    color: #fff;
    text-align: center;
    display: inline-block;
    border-radius: 5px;
    text-decoration: none;
    font-weight: bold;
    -webkit-transition: color .5s ease;
    -moz-transition: color .5s ease;
    -o-transition: color .5s ease;
    transition: color .5s ease;
    z-index:3;
}

    a.bottom_button:hover {
        color: #006ab3;
    }


@media(max-width:1200px) {
    article .intro_article div.text span.main_title {
        font-size:3.5em;
        padding: 0 15% 0 15%;
    }

    article.intro_article div.text span.logo_title {
        font-size:2em;
    }
}


@media(max-width:1024px){
    section.menu {
        width:100%;
        left: 0;
    }

    
    nav.logo {
        margin-left:1%;
    }
    
    article.intro_article {
        max-width: 100%;
        width: 100%;
        height: 75vh;
    }

    article.intro_article div.text span.main_title {
        font-size:3.5em;
        padding: 0 10% 0 10%;
    }
    
    article.story_article {
        max-width:100%;
        width:100%;
        padding:0 0;
    }

    article.stories_article {
        padding: 0 0;
        max-width: 100%;
        width: 100%;
        height: 100vh;
    }
    
    article.story_article table.image_table {
        width:100%;
        height:calc(100vh - 3em);
        overflow:hidden;
        display:inline-block;
        position:relative;
    }

    article.story_article table.image_small {
        height: calc(100vh - 3em);
        width: 100%;
        overflow: hidden;
        display: inline-block;
        position: relative;
    }

    article.story_article table tbody, article.story_article table tbody, article.story_article table tr, article.story_article table td {
        width:100%;
        display:inline-block;
        position:relative;
    }

    article.story_article div.gradient {
        width:100%;
        max-width:100%;
        height:calc(100vh - 3em);
        overflow:hidden;
        display:inline-block;
        position:relative;
    }

    article.story_article div.gradient::after {
        background: linear-gradient(180deg, rgba(16,16,16,0) 0%, rgba(16,16,16,0) 50%, rgba(16,16,16,1) 85%, rgba(16,16,16,1) 100%);
    }

    article.story_article img {
        max-height:none;
        max-width:100%;
        width:100%;
        height:auto;
    }

        article.story_article img.img_small {
            max-height: none;
        }

    article.story_article video {
        max-height:none;
        max-width:100%;
        width:100%;
        height:auto;
    }

    article.stories_article video {
        max-height: none;
    }

    article.story_article div.text {
        display:inline-block;
        width:100%;
        position:absolute;
        top:0;
        left:0;
        z-index:2;
        height:calc(100vh - 3em);
    }

    article.story_article div.text_small {
        height: 100vh;
        text-align: center;
        font-size:1.8em;
    }

    /*article.story_article div.text p {
        width:100%;
        position:relative;
        bottom:0;
        left:0;
        max-width:100%;
        padding: 0 15% 1em 15%;
        display:table-cell;
        vertical-align:middle;
        height:100vh;
    }*/

    article.story_article div.text p {
        width: 100%;
        position: absolute;
        bottom: 0;
        left: 0;
        max-width: 100%;
        padding: 0 10% 1em 10%;
        display:inline-block;
        vertical-align:bottom;
        height:auto;
    }

    article.stories_article div.text p {
        max-width: 100%;
        float: none;
        text-align: center;
        bottom:unset;
        top:50%;
        width:100vw;
    }

    article.story_article p i {
        padding: 4px 8px;
        white-space: nowrap;
        margin-left: 8px;
        font-size: 0.7em;
    }

    a.bottom_button {
        position: fixed;
        bottom: 0px;
        right: 0px;
        width: 100%;
        border:none;
        background: rgba(0,0,0,0.5);
        color: #fff;
        border-radius: 0px;
        -webkit-transition: background-color .5s ease;
        -moz-transition: background-color .5s ease;
        -o-transition: background-color .5s ease;
        transition: background-color .5s ease;
        z-index: 3;
    }

        a.bottom_button:hover {
            background: rgba(0,0,0,1);
            color:#fff;
        }
}

@media(max-width:700px){
    article.intro_article div.text span.main_title {
        font-size:3em;
        padding: 0 10% 0 10%;
    }

    article.stories_article div.text p {
        width: 100%;
        word-break:break-word;
        white-space: normal;
    }
}

@media(max-width:500px){

    article.story_article div.gradient {
        width:100%;
        max-width:100%;
        height:auto;
        /* display:table-cell;
        vertical-align:middle; */
        display:inline-block;
        position:relative;
    }

    article.intro_article div.text span.main_title {
        font-size:2.5em;
    }

    article.story_article div.text_small {
        font-size: 1.5em;
    }

    nav.logo {
        font-size: 100%;
        height: 50px;
    }

        nav.logo a {
            padding: .9em .9em 1em .9em;
            height: 50px;
            line-height: 24px;
        }

            nav.logo a img {
                margin-right: -8px;
                margin-top: 3px;
                margin-left: 8px;
            }

    nav.menu_nav {
        font-size: 85%;
    }

        nav.menu_nav a {
            padding: 1.4em 1em 1em 1em;
            line-height: 16px;
        }
}

@media(max-width:400px) {
    /*nav.logo {
        font-size: 80%;
        height: 50px;
    }

        nav.logo a {
            padding: 1.1em .7em 1em .7em;
            height: 50px;
            line-height: 24px;
        }*/
    
    footer article.middlefooter_article {
        width: 100%;
        padding: 4em 1em 3em 1em;
    }
}