/* ***************************************************** */
/* ********************** GLOBAL *********************** */
/* ***************************************************** */
html {
    text-decoration: none;
    font-family: serif;
}

.nav-txt {
    font-size: 1.5rem;
    font-family: "Sigmar One", serif;
    text-shadow: 1px 1.5px 1px #000000;
}

.nav-txt  a:hover {
    text-shadow: 1px 1.5px 3px #000000;
}

.sigmar-one-regular {
    font-family: "Sigmar One", serif;
    font-weight: 400;
    font-style: normal;
}

.hero-text {
    font-size: 40px;
    text-shadow: 1px 1.5px 16px #034ac0;
}

.hero-btn-text {
    font-size: 18px;
    text-shadow: 1px 1.5px 3px #034ac0;
}

.row {
    display: flex;
    flex-wrap: wrap;
    padding: 0 4px;
}

/* Create two equal columns that sits next to each other */
.column {
    flex: 50%;
    padding: 0 4px;
}

.column img {
    margin-top: 8px;
    vertical-align: middle;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
}

.header {
    text-align: center;
    padding: 32px;
}

.row {
    display: -ms-flexbox;

    /* IE 10 */
    display: flex;
    -ms-flex-wrap: wrap;

    /* IE 10 */
    flex-wrap: wrap;
    padding: 0 4px;
}

/* Create two equal columns that sits next to each other */
.column {
    -ms-flex: 50%;

    /* IE 10 */
    flex: 50%;
    padding: 0 4px;
}

.column img {
    margin-top: 8px;
    vertical-align: middle;
}

/* Style the buttons */
.btn {
    border: none;
    outline: none;
    padding: 10px 16px;
    background-color: #f1f1f1;
    cursor: pointer;
    font-size: 18px;
}

.btn:hover {
    background-color: #ddd;
}

.btn.active {
    background-color: #666;
    color: white;
}

/* ***************************************************** */
/* ******************** X-Small <600 ******************* */
/* ***************************************************** */
@media only screen and (max-width: 600px) {
    .title-text {
        width: 75%;
    }

    .logo-img {
        width: 55%;
    }

    .hero-bottom-text {
        visibility: visible;
    }

    .hero-top-text {
        visibility: hidden;
    }
}

/* ***************************************************** */
/* ******************** Small 600 - 768 **************** */
/* ***************************************************** */
@media only screen and (min-width: 600px) {
    .title-text {
        width: 70%;
    }

    .logo-img {
        width: 55%;
    }

    .hero-bottom-text {
        visibility: visible;
    }

    .hero-top-text {
        visibility: hidden;
    }
}

/* ***************************************************** */
/* ******************** Med 768 - 992 ****************** */
/* ***************************************************** */
@media only screen and (min-width: 768px) {
    .title-text {
        width: 60%;
    }

    .logo-img {
        width: 35%;
    }
}

/* ***************************************************** */
/* ********************* Lg 992 - 1200 ***************** */
/* ***************************************************** */
@media only screen and (min-width: 992px) {
    .title-text {
        width: 60%;
    }

    .logo-img {
        width: 75%;
    }
}

/* ***************************************************** */
/* ****************** XL 1200 - 1400 ******************* */
/* ***************************************************** */
@media only screen and (min-width: 1200px) {
    .title-text {
        width: 60%;
    }

    .logo-img {
        width: 45%;
    }

    .hero-bottom-text {
        visibility: hidden;
    }

    .hero-top-text {
        visibility: visible;
    }

    /* ***************************************************** */
    /* ********************* XL >1400 ********************** */
    /* ***************************************************** */
    @media only screen and (min-width: 1400px) {
        .title-text {
            width: 50%;
        }

        .logo-img {
            width: 45%;
        }
    }
}