/*
    CSS-file for mobile screens
*/

@media screen and (max-width: 900px) {
    header { display: none; }    

    #mobile-header {
        display: block;
        width: 100%;
        padding: 10px 0 10px 0;
        background-color: #151515;
        text-align: center;
        font-size: 1.3em;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 3;
    }
    #mobile-header #menu-btn {
        display: block;
        width: 100%;
        text-transform: uppercase;
        letter-spacing: 2px;
        position: relative;
    }
    #mobile-header #menu-btn div#close {
        height: 100%;
        width: 25px;
        display: inline;
        position: absolute;
        top: 50%;
        transform: translate(0, -50%);
        margin: 1px 0 0 10px;
        font-size: 25px;
    }
    #mobile-header #menu-btn div#close img {
        width: 25px;
    }
    #mobile-header nav {
        display: none;
        padding-top: 15px;
    }
    #mobile-header nav ul {
        list-style-type: none;
        padding: 0;
        margin: 0;
    }
    #mobile-header nav ul li a {
        display: block;
        padding: 5px 0 5px 0;
        color: #FFFFFF;
        text-decoration: none;
        font-size: 1em;
    }
    #mobile-header nav #close-btn {
        font-size: 1.2em;
        display: block;
        width: 100%;
        text-transform: uppercase;
        letter-spacing: 2px;
    }

    .container#one {
        margin-top: 50px;
    }
    .container#one #content img#logo {
        width: 100%;
        max-width: 100%;
    }
    .container#one {
        height: auto;
        min-height: 100vh;
        padding-bottom: 35%;
        padding-top: 5%;
        box-sizing: border-box;
    }
    .container#one #content {
        padding-top: 0;
    }
    .container#one #content span#slogan {
        margin-top: 20px;
    }

    .container.type-two {
        height: auto;
    }
    .container.type-two .half {
        width: 100%;
        float: none;
    }
    .container.type-two .half #text {
        position: relative;
        left: auto;
        top: auto;
        transform: translate(0, 0);
        width: 95%;
        margin: auto;
        text-align: center;
        padding: 25px 0 25px 0;
    }
    .container.type-two .half #text table {
        margin: auto;
    }

    .container#four #contact-container a {
        width: 100%;
    }
    .container#four #contact-container a#social-media {
        text-align: center;
    }
    .container#four #contact-container a#social-media span {
        margin: auto;
        width: 100%;
        max-width: 100%;
    }

    footer nav,
    footer #ndvibes {
        position: relative;
        left: 15px;
        right: auto;
        bottom: auto;
    }
    footer #ndvibes { top: 15px; }
    footer { padding-bottom: 15px; }