/* DESKTOP/TABLET SIZE */
@media (min-width: 850px) {
    html, body {
        margin: 0;
        padding: 0;
        background: linear-gradient(to bottom, #304462 12%, #8F4948 100%);
        font-family: 'Archivo Narrow', sans-serif;
        color: white;
    }

    #main-nav {
        background-color: #304462;
        height: 10%;
    }

    #header-img-container {
        width: 100%;
        height: 700px;
        overflow: hidden;
        background-image: url(https://www.ralspace.stfc.ac.uk/Gallery/12mantenna_at_dusk.jpg);
        background-position: 50% 50%;
        background-size: cover;
        background-repeat: no-repeat;
    }

    #hard-title {
        z-index: 1200;
        width: 30%;
        margin: 0;
        color: white;
        font-size: 4rem;
        font-weight: 600;
        letter-spacing: .3rem;
        padding: 5% 0px 0px 65%;
        text-indent: 0px;
    }

    #sub-nav{
        text-align: center;
        width: 100%;
        height: 90px;
        margin: 0px;
    }

    #sub-nav .col {
        float: left;
        width: 50%;
        border-bottom: white solid 1px;
        margin: 0px;
        padding: 2% 0px;
        font-size: 1.8rem;
        display: inline;
    }

    #sub-nav .col p {
        display: inline;
        text-indent: 0px;
    }

    #hard-sub-1 {
        background-color: rgba(48, 68, 98, 1);
    }

    #hard-sub-1 p {
        margin: 0px;
    }

    #hard-sub-2 {
        background-color: rgba(48, 68, 98, 0);
    }


    /* antenna content */

    #antenna-content {
        font-size: 1.2rem;
        line-height: 1.8rem;
        letter-spacing: .2rem;
        text-align: justify;
        align-items: center;
        width: 80%;
        margin: 4% 10% 0px 10%;
        display: block;
    }

    #antenna-content p {
        margin-bottom: 4%;
    }

    #antenna-content h1 {
        margin: 7% 0px 4% 0px;
        text-indent: 0px;
    }

    #first-p {
        width: 100%;
    }

    #p-img-1 {
        float: right;
        width: 65%;
        height: 350px;
        object-fit: cover;
        margin: 0px 0px 1% 2%;
    }

    #diagram-container {
        height: 300px;
        align-items: center;
    }

    #gain-img-container {
        float: left;
        background-color: rgb(222, 205, 212);
        width: 49%;
        height: 100%;
        margin: 0px 3% 2% 0px;    
    }

    #gain-img {
        width: 100%;
        /* height: 100%; */
    }

    #gain-img-text-container {
        width: 100%;
        margin: 0px;

    } 

    #post-image-p {
        clear: both;
        margin-top: 4%;
    }


    /* amplifier content */

    #amplifier-content {
        font-size: 1.2rem;
        line-height: 1.8rem;
        letter-spacing: .2rem;
        text-align: justify;
        align-items: center;
        width: 80%;
        margin: 4% 10% 0px 10%;
        display: none;
    }

    #antenna-content p {
        margin-bottom: 4%;
    }

    #antenna-content h1 {
        margin: 7% 0px 4% 0px;
        text-indent: 0px;
    }

    #amp-img {
        text-align: center;

    }

    /* footer */

    #footer {
        height: 5rem;
        border-top: white 2px solid;
    }

    #footer p {
        text-align: right;
        margin: 0px;
        color: white;
        padding: 2% 5% 0px 0px;
    }
}



/* ---------------------------------------------------------------------------------------------- */


/* IPHONE SIZE */
@media (max-width: 850px) {
    html, body {
        margin: 0;
        padding: 0;
        background: linear-gradient(to bottom, #304462 12%, #8F4948 100%);
        font-family: 'Archivo Narrow', sans-serif;
        color: white;
    }

    #main-nav {
        background-color: #304462;
        height: 10%;
    }

    #header-img-container {
        width: 100%;
        height: 700px;
        overflow: hidden;
        background-image: url(https://www.ralspace.stfc.ac.uk/Gallery/12mantenna_at_dusk.jpg);
        background-position: 50% 50%;
        background-size: cover;
        background-repeat: no-repeat;
    }

    #hard-title {
        z-index: 1200;
        width: 40%;
        margin: 0;
        color: white;
        font-size: 3rem;
        font-weight: 600;
        letter-spacing: .3rem;
        padding: 5% 30% 0px 30%;
        text-align: center;
        text-indent: 0px;
    }

    #sub-nav{
        text-align: center;
        width: 100%;
        height: 90px;
        margin: 0px;
    }

    #sub-nav .col {
        float: left;
        width: 50%;
        border-bottom: white solid 1px;
        margin: 0px;
        padding: 2% 0px;
        font-size: 1.4rem;
        display: inline;
    }

    #sub-nav .col p {
        display: inline;
        text-indent: 0px;
    }

    #hard-sub-1 {
        background-color: rgba(48, 68, 98, 1);
    }

    #hard-sub-1 p {
        margin: 0px;
    }

    #hard-sub-2 {
        background-color: rgba(48, 68, 98, 0);
    }


    /* antenna content */

    #antenna-content {
        font-size: 1.2rem;
        line-height: 1.8rem;
        letter-spacing: .2rem;
        text-align: justify;
        align-items: center;
        width: 80%;
        margin: 4% 10% 0px 10%;
        display: block;
    }

    #antenna-content p {
        margin-bottom: 4%;
        font-size: 1rem;
    }

    #antenna-content h1 {
        margin: 7% 0px 4% 0px;
        text-indent: 0px;
        font-size: 1.3rem;
    }

    #first-p {
        width: 100%;
    }

    #p-img-1 {
        width: 100%;
        height: 350px;
        object-fit: cover;
    }

    #p2 {
        clear: both;
    }

    #diagram-container {
        height: 300px;
        align-items: center;
    }

    #gain-img-container {
        float: left;
        background-color: rgb(222, 205, 212);
        width: 50%;
        height: 100%;
        margin: 0px 25% 2% 25%;    
    }

    #gain-img {
        width: 100%;
        /* height: 100%; */
    }

    #gain-img-text-container {
        width: 100%;
        margin: 0px;
        clear: both;
    } 

    #post-image-p {
        clear: both;
        margin-top: 4%;
    }


    /* amplifier content */

    #amplifier-content {
        font-size: 1.2rem;
        line-height: 1.8rem;
        letter-spacing: .2rem;
        text-align: justify;
        align-items: center;
        width: 80%;
        margin: 4% 10% 0px 10%;
        display: none;
    }

    #amplifier-content p {
        margin-bottom: 4%;
        font-size: 1rem;
    }

    #amplifier-content h1 {
        margin: 7% 0px 4% 0px;
        text-indent: 0px;
        font-size: 1.3rem;
    }

    #amp-img {
        text-align: center;

    }

    /* footer */

    #footer {
        height: 5rem;
        border-top: white 2px solid;
    }

    #footer p {
        text-align: right;
        margin: 0px;
        color: white;
        padding: 2% 5% 0px 0px;
    } 
}