/* 10-500px only media and screen  -->> chartruece green */
/* 501-1024px only media and screen  -->> lilac */
/* 1025-1600px only media and screen  -->> gray */
/* 1601-2700px only media and screen  -->> chartruece green */


/* chartruice */
@media only screen and (min-width: 10px) and (max-width: 500px) {
    body {
        background-color: rgb(0, 13, 26, .95);
        /* background-image: url('/assets/img/bg_words.jpg'); */
        background-attachment: fixed;
        background-repeat: no-repeat;
        background-size: cover;
        padding: 0px;
        margin: 0px;
    }

    .modalogo {
        display: block;
        height: 220px;
        width: 265px;
        margin-right: auto;
        margin-left: auto;
        background-image: url("/assets/img/Untitled.svg");
        background-repeat: no-repeat;

    }

    .col1 {
        background-color: rgba(0, 37, 79, 0);
        display: block;
        height: 100%;
        min-height: 500px;
        width: 100%;
        min-width: 100px;
        position: relative;
        text-align: justify;
        margin-right: auto;
        margin-left: auto;
        border-right: 0px solid #ccc;
        border-left: 0px solid #ccc;
        box-sizing: Border-box;
        padding: 20px;
    }


    .full {
        display: Block;
        width: 100%;
        min-height: 190px;
        line-height: .2em;
        border-bottom: 0px solid #fff;
        border-top: 0px solid #fff;
        padding: 20px;
        box-sizing: border-box;
        text-align: center;
    }

    .full h1 {
        margin-top: 0px;
        font-family: "Avenir Heavy", serif;
        font-size: 1.5em;
        line-height: 1.9em;
        text-shadow: 4px 4px 0px rgb(1, 29, 58);
        text-shadow: 4px 4px 1px rgb(1, 29, 58);
        color: #fff;
    }

    .full h2 {
        margin-top: 0px;
        font-family: "DM Serif Display", serif;
        font-style: italic;
        font-size: 1.2em;
        letter-spacing: 1px;
        line-height: 1.4em;
        text-shadow: 4px 4px 0px rgb(1, 29, 58);
        text-shadow: 4px 4px 1px rgb(1, 29, 58);
        color: #fff;
    }

    .full h1 a {
        text-decoration: none;
        color: #fff;
        ;
    }

    .card {
        display: block;
        position: relative;
        min-height: 100px;
        width: 100%;
        background-color: rgba(255, 255, 255, 0);
        border-bottom: 2px solid rgba(180, 209, 240, 0.9);
        box-sizing: border-box;
        padding: 20px;
        margin-top: 0px;
    }

    .card h3 {
        font-family: "Wotfard", sans-serif;
        font-size: 2.1em;
        text-transform: uppercase;
        color: rgba(255, 255, 255, 0);
        text-align: center;
        margin: 0px;
        padding: 0px;
    }

    .card p {
        font-family: "Bellefair", serif;
        font-size: 1.7em;
        line-height: 1.6em;
        color: #fff;
    }







}

/*lilac light purple bg*/
@media only screen and (min-width: 501px) and (max-width: 1024px) {
    body {
        background-color: rgb(0, 13, 26, .95);
        /* background-image: url('/assets/img/bg_words.jpg'); */
        background-attachment: fixed;
        background-repeat: no-repeat;
        background-size: cover;
        padding: 0px;
        margin: 0px;
    }

    .modalogo {
        display: block;
        height: 250px;
        width: 265px;
        margin-right: auto;
        margin-left: auto;
        background-image: url("/assets/img/Untitled.svg");
        background-repeat: no-repeat;
    }

    .col1 {
        background-color: rgba(0, 37, 79, 0);
        display: block;
        height: 100%;
        min-height: 500px;
        width: 90%;
        min-width: 100px;
        position: relative;
        margin-right: auto;
        margin-left: auto;
        border-right: 0px solid #ccc;
        border-left: 0px solid #ccc;
        box-sizing: Border-box;
        padding: 40px;
    }


    .full {
        display: Block;
        width: 100%;
        min-height: 190px;
        line-height: .2em;
        border-bottom: 0px solid #fff;
        border-top: 0px solid #fff;
        padding: 20px;
        box-sizing: border-box;
        text-align: center;
    }

    .full h1 {
        margin-top: 0px;
        font-family: "Avenir Heavy", serif;
        font-size: 2em;
        line-height: 1.3em;
        text-shadow: 4px 4px 0px rgb(1, 29, 58);
        text-shadow: 4px 4px 1px rgb(1, 29, 58);
        color: #fff;
    }

    .full h2 {
        margin-top: 0px;
        font-family: "DM Serif Display", serif;
        font-style: italic;
        font-size: 2em;
        letter-spacing: 5px;
        line-height: 1.4em;
        text-shadow: 4px 4px 0px rgb(1, 29, 58);
        text-shadow: 4px 4px 1px rgb(1, 29, 58);
        color: #fff;
    }

    .full h1 a {
        text-decoration: none;
        color: #fff;
        ;
    }

    .card {
        display: block;
        position: relative;
        min-height: 100px;
        width: 100%;
        background-color: rgba(255, 255, 255, 0);
        border-bottom: 2px solid rgba(180, 209, 240, 0.9);
        box-sizing: border-box;
        padding: 20px;
        margin-top: 2px;
    }

    .card h3 {
        font-family: "Wotfard", sans-serif;
        font-size: 2.1em;
        text-transform: uppercase;
        color: rgba(255, 255, 255, 1);
        text-align: center;
    }

    .card p {
        font-family: "Bellefair", serif;
        font-size: 1.7em;
        line-height: 1.6em;
        color: #fff;
    }
}

/* gray background */
@media only screen and (min-width: 1025px) and (max-width: 1600px) {
    body {
        background-color: rgb(199, 199, 192, .3);
        background-image: url('/assets/img/bg_words.jpg');
        background-attachment: fixed;
        background-repeat: no-repeat;
        background-size: cover;
        padding: 0px;
        margin: 0px;
    }

    .modalogo {
        display: block;
        height: 250px;
        width: 265px;
        margin-right: auto;
        margin-left: auto;
        background-image: url("/assets/img/Untitled.svg");
        background-repeat: no-repeat;
    }

    .col1 {
        background-color: rgba(0, 37, 79, 0.73);
        display: block;
        height: 100%;
        min-height: 500px;
        width: 80%;
        min-width: 100px;
        position: relative;
        margin-right: auto;
        margin-left: auto;
        border-right: 0px solid #ccc;
        border-left: px solid #ccc;
        box-sizing: Border-box;
        padding: 40px;
    }


    .full {
        display: Block;
        width: 100%;
        min-height: 190px;
        line-height: .2em;
        border-bottom: 1px solid #fff;
        border-top: 1px solid #fff;
        padding: 20px;
        box-sizing: border-box;
        text-align: center;
    }

    .full h1 {
        margin-top: 0px;
        font-family: "Avenir Heavy", serif;
        font-size: 3em;
        line-height: 1.2em;
        text-shadow: 4px 4px 0px rgb(1, 29, 58);
        text-shadow: 4px 4px 1px rgb(1, 29, 58);
        color: #fff;
    }

    .full h2 {
        margin-top: 0px;
        font-family: "DM Serif Display", serif;
        font-style: italic;
        font-size: 2em;
        letter-spacing: 5px;
        line-height: 1.4em;
        text-shadow: 4px 4px 0px rgb(1, 29, 58);
        text-shadow: 4px 4px 1px rgb(1, 29, 58);
        color: #fff;
    }

    .full h1 a {
        text-decoration: none;
        color: #fff;
        ;
    }

    .card {
        display: block;
        position: relative;
        min-height: 100px;
        width: 100%;
        background-color: rgba(255, 255, 255, 0);
        border-bottom: 10px solid rgba(111, 127, 146, 0.9);
        box-sizing: border-box;
        padding: 20px;
        margin-top: 30px;
    }

    .card h3 {
        font-family: "Wotfard", sans-serif;
        font-size: 2.1em;
        text-transform: uppercase;
        color: rgba(255, 255, 255, 1);
        text-align: center;
    }

    .card p {
        font-family: "Bellefair", serif;
        font-size: 1.7em;
        line-height: 1.6em;
        color: #fff;
    }

    .card:last-child {
        border-bottom: 0px;
    }
}

/* pee yellow background */
@media only screen and (min-width: 1601px) and (max-width: 2700px) {

    body {
        background-color: rgb(199, 199, 192, .9);
        background-image: url('/assets/img/bg_words.jpg');
        background-attachment: fixed;
        background-repeat: no-repeat;
        background-size: cover;
        padding: 0px;
        margin: 0px;
    }

    .overlay {
        display: block;
        position: absolute;
        height: 100%vh;
        width: 100%vw;
        background-color: rgba(0, 37, 79, .3);
        z-index: 10;
    }

    .modalogo {
        display: block;
        height: 250px;
        width: 265px;
        margin-right: auto;
        margin-left: auto;
        background-image: url("/assets/img/Untitled.svg");
        background-repeat: no-repeat;
    }

    .col1 {
        background-color: rgba(0, 37, 79, 0.73);
        display: block;
        height: 100%;
        min-height: 500px;
        width: 50%;
        min-width: 100px;
        position: relative;
        margin-right: auto;
        margin-left: auto;
        border-right: 0px solid #ccc;
        border-left: 0px solid #ccc;
        box-sizing: Border-box;
        padding: 40px;
    }


    .full {
        display: Block;
        width: 100%;
        min-height: 220px;
        line-height: .4em;
        border-bottom: 1px solid #fff;
        border-top: 1px solid #fff;
        padding: 30px;
        box-sizing: border-box;
        text-align: center;
    }

    .full h1 {
        margin-top: 0px;
        font-family: "Avenir Heavy", serif;
        font-size: 4.8em;
        line-height: 1.4em;
        text-shadow: 4px 4px 0px rgb(1, 29, 58);
        text-shadow: 4px 4px 1px rgb(1, 29, 58);
        color: #fff;
    }

    .full h2 {
        margin-top: 0px;
        font-family: "DM Serif Display", serif;
        font-style: italic;
        font-size: 3.8em;
        letter-spacing: 5px;
        line-height: 1.4em;
        text-shadow: 4px 4px 0px rgb(1, 29, 58);
        text-shadow: 4px 4px 1px rgb(1, 29, 58);
        color: #fff;
    }

    .full h1 a {
        text-decoration: none;
        color: #fff;
        ;
    }

    .full span {
        color: rgb(1, 29, 58);
        -webkit-text-stroke-color: #fff;
        -webkit-text-stroke-width: 1px;
    }

    .card {
        display: block;
        position: relative;
        min-height: 100px;
        width: 100%;
        background-color: rgba(255, 255, 255, 0);
        border-bottom: 10px solid rgba(111, 127, 146, 0.9);
        box-sizing: border-box;
        padding: 20px;
        margin-top: 30px;
    }

    .card h3 {
        font-family: "Wotfard", sans-serif;
        font-size: 2.1em;
        text-transform: uppercase;
        color: rgba(255, 255, 255, 1);
    }

    .card p {
        font-family: "Bellefair", serif;
        font-size: 1.7em;
        line-height: 1.6em;
        color: #fff;

    }


    .card:last-child {
        border-bottom: 0px;
    }
}