/* Font Faces */
@font-face {
    font-family: 'Strawford';
    src: url('/fonts/strawford-bold-webfont.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;

}

@font-face {
    font-family: 'Strawford';
    src: url('/fonts/strawford-light-webfont.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;

}

@font-face {
    font-family: 'Strawford';
    src: url('/fonts/strawford-medium-webfont.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;

}

@font-face {
    font-family: 'Strawford';
    src: url('/fonts/strawford-regular-webfont.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;

}



body {
    font-family: 'Strawford';
    font-weight: 300;
    font-size: 16px;
    line-height: 1.3;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 600;
    line-height: 1.1;
}

.content {
    display: flex;
    flex-flow: row wrap;
    align-items: stretch;
    justify-content: center;
    text-align: center;
    width: 90%;
    height: 100vh;
    margin: 0 auto;
}

.content.privacy {
    height: auto;
}

.main {
    display: flex;
    flex-flow: row wrap;
    align-content: center;
    justify-content: center;
    height: 90%;
    width: 100%;
}

.logo {
    width: 100%;
}

.logo img {
    max-width: 400px;
    width: 90%;
}

.cta {
    display: flex;
    flex-flow: row wrap;
    width: 90%;
}

.left {
    width: 100%;
    border: 1px solid black;
    transition: background-color 0.4s ease-in-out;
}

.right {
    width: 100%;
    background-color: black;
    color: white;
    border: 1px solid black;
    transition: background-color 0.4s ease-in-out;
}

.socket {
    height: 10%;
    width: 90%;
}

.socket a {
    color: #000;
    text-decoration: none;
}

.socket a:hover {
    color: #3effb0;
}

.info, .legal-left, .legal-right {
    margin-bottom: 32px;
    font-style: italic;
    font-size: 14px;
    width: 100%;
}


@media (min-width: 768px) {
    body {
        font-size: 18px;
    }

    .cta {
        width: 75%;
        flex-flow: row nowrap;
    }

    .left,
    .right {
        width: 50%;
    }

    .legal-left, 
    .legal-right {
        width: 50%;
    }

    .content.privacy {
        width: 75%;
    }
}

@media (min-width: 1024px) {
    body {
        font-size: 20px;
    }

    .cta {
        width: 50%;
    }

    .content.privacy {
        width: 50%;
    }
}