/* ===============

    GLOBAL STYLE

===============*/

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

body {
    font-family: 'Barlow', sans-serif;
}

h1,
h2,
h3,
h4 {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 500;
}

.wrapper {
    max-width: 960px;
    margin: 0 auto;
    padding: 10px 2%;
}

#content-outer {
    border-top: solid 3px black;
    border-bottom: solid 3px black;
}

#company-logo {
    position: absolute;
    z-index: 1001;
    margin-top: 12px;
}

#social-icons {
    display: grid;
}

#social-icons ul {
    justify-self: center;
}

#social-icons li {
    list-style-type: none;
    display: inline;
    margin-right: 10px;
}


.navbar-default {
    background-color: transparent;
    border-color: transparent;
}

.navbar-default .navbar-toggle {
    background-color: #ddd;
}

#social-icons .svg-inline--fa {
    font-size: 2em;
    margin-right: 10px;
}

#social-icons a .svg-inline--fa {
    color: #000;
}

#social-icons a:hover .svg-inline--fa {
    color: #777;
}

.fa-search {
    font-size: 1.35em;
    margin-top: -.5px;
}


aside {
    margin: 20px 0;
}

foooter p {
    text-align: center;
}

.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 35px;
    height: 0;
    overflow: hidden;
}

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


/* ============

MEDIA QUERIES

============ */

/* Desktop */

@media (min-width: 650px) {

    header {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-areas: 
            "logo icons"
            "nav nav";
    }
    
    #company-logo {
        grid-area: logo;
    }
    
    nav {
        grid-area: nav;
    }
    
    #social-icons {
        grid-area: icons;
    }

    main {
        display: grid;
        grid-template-columns: 65% 35%;
    }
    aside {
        padding-right: 5%;
        padding-left: 5%;
    }

}