/* =========================
	     Normalize CSS
   ========================= */

html, body, p, h1, h2, h3, h4, ul, li, a, header, nav, footer, div, label {
    margin: 0;
    padding: 0;
    border: 0;
    font-family: proxima-nova, sans-serif;
    font-weight: 300;
    font-style: normal;
    font-size: 25px;
    vertical-align: baseline;
    text-decoration: none;
    color: black;
    line-height: 1em;
}

header, nav, footer, div {
    display: block;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

ul {
    list-style: none;
}

h1, h2, h3, h4 {
    font-weight: 300;
}

h1 {
    font-size: 70px
}

h2 {
    font-size: 55px
}

h3 {
    font-size: 25px
}

h4 {
    font-size: 20px;
    font-weight: 400
}

textarea, select, input, button {
    outline: none;
}



/* =========================
	    Generic Classes
   ========================= */

.row {
    margin: auto;
    width: 100%;
}

.container {
    margin: auto;
    padding: 0 20px;
    max-width: 1400px;
    overflow: hidden;
}

.column {
    padding: 0 1%;
    float: left;
}

.center {
    text-align: center;
}

.one {
    width: 98%;
}

.one-half {
    width: 48%;
}

.mobile-only {
    display: none
}

.desktop-only {
    display: block
}

.vid-frame {
    position: relative;
    overflow: hidden;
    padding-top: 56.25%
}

.vid-frame iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* =========================
	    Intro
   ========================= */
#intro.row {
    background-image: url('../images/top-bg.png');
    background-position: right;
    background-repeat: no-repeat;
    background-color: #bfb09c;
    background-size: cover;
}

#intro .container {
    max-width: 1500px;
}

@media (max-width: 1921px) {
    #intro .container {
        max-width: 55%;
    }
}

@media (max-width: 768px) {
    #intro .container {
        max-width: 100%;
    }
}


#intro h1, #intro h2, #intro p {
    color: #75211c;
}

#intro-menu {
    width: 100%;
    overflow: auto;
    position:absolute;
    top: 0;
    right: 0;
}

#intro-menu ul {
    float: right;
    margin: 25px 45px 0 0;
}

#intro-menu ul li {
    float: left;
    padding: 10px;
}

#intro-menu ul li a {
    color: #f1f1f1;
}

#intro-menu ul li a:hover {
    color: #75211c;
}

/* =========================
	    Theodore
   ========================= */

#theodore.row {
    background-color: #0054a6;
}

#theodore .container {
    max-width: 1600px;
}

#theodore p {
    color: #8dddff;
    line-height: 1.3em;
}

#theodore h2 {
    color: #8dddff;
    font-size: 50px;
}

#theodore .container {
    padding-top: 5%;
    padding-bottom: 5%;
}

#theodore ul {
    padding-top: 40px;
    width: 608px;
    margin: 0 0 0 50px;
}

#tt-follow-me {
    line-height: 1.3em;
    padding-left: 7px;
    font-weight: 500;
}

@media (max-width: 1235px) {
    #theodore ul {
        width: 310px;
        margin: 0 auto;
    }

    #tt-follow-me {
        display: none;
    }
}

#theodore ul li {
    float: left;
    margin: 0 7px;
}

#theodore .one-half.first {
    width: 56%;
}

#theodore .one-half.second {
    width: 32%;
}

#theodore .column {
    padding: 0 3%;
}

#theodore img {
    margin-bottom: 20px;
}

/* =========================
	    Office
   ========================= */

#office.row {
    background-image: url('../images/office-bg.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

#office-overflow {
    background-color: rgb(155,173,198);
    background: linear-gradient(90deg, rgba(155,173,198,1) 0%, rgba(113,120,135,1) 72%, rgba(98,100,110,1) 100%);
}

#office .container {
    max-width: 1100px;
}

#office p {
    color: #e0dfdf;
}

#office .accent {
    color: #f8ad44;
}

#office-text {
    line-height: 1.4em;
    margin-bottom: 0;
    padding-bottom: 3%;
    overflow: auto;
}

/* =========================
	    Editorial
   ========================= */

#editorial .container {
    padding: 39px 0;
    max-width: 1400px;
}

@media (max-width: 1921px) {
    #editorial .container {
        max-width: 1300px;
    }
}

#editorial p {
    color: #929292;
}

.sub-text {
    font-size: 16.67px;
}

#editorial .accent {
    color: #1b97cb;
    font-size: 20.83px;
}

#editorial .column {
    padding: 0 3%;
}

#editorial .one {
    width: 94%;
    margin-bottom: 20px;
}

#editorial .one-half {
    width: 44%;
}

#editorial .vid-frame {
    margin-bottom: 15px;
}

#editorial .vid-card {
    padding: 10px 0;
    margin: 0 0 10px 0;
}

#editorial .vid-card p {
    padding: 0;
    margin: 4px;
    line-height: 1.2em;
}

/* =========================
	    About
   ========================= */

#about.row {
    background-color: #30a0cf;
}

#about .container {
    padding: 12% 0
}

#about .column {
    padding: 0 2.5%;
}

#about .one-half {
    width: 45%;
}

#about p, #about h2 {
    color: #ffffff;
    line-height: 1.35em;
    margin-bottom: 30px;
}

#about h2 {
    line-height: 0.9em;
}

/* =========================
	   Contact Page
   ========================= */

#contact.row {
    background-color: #020202;
}

#contact p, #contact h2, #contact label {
    color: #f1f1f1;
    line-height: 1.3em;
}

#contact label {
    font-size: 20px;
}

#contact h2 {
    margin-bottom: 60px;
}

#contact .container {
    max-width: 500px;
    margin: 0 auto;
    padding:  8% 20px;
}

#contact input, #contact textarea {
    padding: 10px;
    width: 100%;
    margin-bottom: 30px;
    margin-top: 10px;
    box-sizing: border-box;
}

#contact button, .submit-form {
    padding: 15px;
    font-size: 20px;
    color: white;
    background-color: #1b97cb;
    border: 0;
    line-height:1em;
}

#contact button:hover, .submit-form:hover {
    background-color: #8bcbe6;
}

#legal {
    font-size: 15px;
    width: 245px;
    margin: 0 auto;
    padding: 50px 0;
    bottom: 0;
}

/* =========================
	   Mobile Devices
   ========================= */
@media (max-width: 1200px) {
    #about .column {
        width: 100% !important;
        padding: 0 !important;
    }

    #about .mobile-only {
        display: block;
    }


    #about .desktop-only {
        display: none;
    }

    #about .container {
        padding: 30px;
    }

    #about img {
        margin-bottom: 15px;
    }
}

@media (max-width: 1400px) {
    #contact h2 {
        margin-bottom: 20px;
    }

    a, p, label {
        font-size: 20px;
    }

    h1 {
        font-size: 50px
    }

    h2 {
        font-size: 30px
    }

    #editorial .container {
        max-width: 1000px;
    }
}

@media (max-width: 768px) {
    /* Generic Classes */
    .column {
        width: 100% !important;
        padding: 0 !important;
    }


    .mobile-only {
        display: block;
    }

    .desktop-only {
        display: none;
    }

    body {
        line-height: 1.2em;
    }

    #intro-menu ul li a {
        font-size: 18px;
        text-align: center;
    }

    #intro-menu ul {
        width: 320px;
        margin: 0 auto;
        float:none;
    }

    #intro-menu ul li {
        text-align: center;
    }

    #editorial .vid-card {
        padding: 5px 5px 10px 5px;
        margin: 0;
    }

    #editorial .one {
        margin-bottom: 0;
    }

    #editorial .vid-frame {
        margin-bottom: 5px;
    }

    #editorial .container {
        padding: 20px 0;
    }

    #theodore .vid-card, #theodore p {
        margin-bottom: 20px;
    }

    #theodore ul li {
        margin: 4px;
    }

    #theodore ul {
        padding-top: 0;
        width: 290px;
    }

    #theodore img {
        margin-bottom: 0;
    }
}