/* Extra small devices (phones, 600px and down)*/
@media only screen and (max-width: 600px) {
    #primary { width:100%; }
    #secondary { width:100%; margin:0; border:none; }
}

/* Small devices (portrait tablets and large phones, 600px and up)*/
@media only screen and (min-width: 600px) {
    width: 95%;
    #primary { width:95%; }
    #secondary { width:30%; margin:0; border:none; }
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
    width: 80%;
    #primary { width:80%; }
    #secondary { width:30%; margin:0; border:none; }
}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
    width: 75%;
    #primary { width:75%; }
    #secondary { width:30%; margin:0; border:none; }
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
    width: 70%;
    #primary { width:70%; }
    #secondary { width:50%; margin:0; border:none; }
}
/* Tablet Landscape */
@media screen and (max-width: 1060px) {
    #primary { width:67%; }
    #secondary { width:50%; margin-left:3%;}  
}
/* Tabled Portrait */
@media screen and (max-width: 768px) {
    #primary { width:100%; }
    #secondary { width:100%; margin:0; border:none; }
}
/* Style the header with a grey background and some padding */
.header {
    overflow: hidden;
    background-color: #f1f1f1;
    padding: 20px 10px;
    font-family: "Times New Roman", Times, serif;
}

/* Style the header links */
.header a {
    float: left;
    color: black;
    text-align: center;
    padding: 12px;
    text-decoration: none;
    font-size: 18px;
    line-height: 25px;
    border-radius: 4px;
}

 /* Style the logo link (notice that we set the same value of line-height and font-size to prevent the header to increase when the font gets bigger */
.header a.logo {
            font-size: 25px;
            font-weight: bold;
    height: 92px;
    width: 123px;
}

/* Change the background color on mouse-over */
.header a:hover {
    background-color: #ddd;
    color: black;
}

/* Style the active/current link*/
.header a.active {
    background-color: dodgerblue;
    color: white;
}

/* Float the link section to the right */
.header-right {
    float: right;
}

/* Add media queries for responsiveness - when the screen is 600px wide or less, stack the links on top of each other */
@media screen and (max-width: 600px) {
    .header a {
        float: none;
        display: block;
        text-align: left;
    }

    .header-right {
        float: none;
    }
}

body {
    text-align: center;
    background-color: gray;
    font-family: "Times New Roman", Times, serif;
}

.footer {
    position: fixed;
    left: -2px;
    bottom: 2px;
    width: 100%;
    background-color: red;
    color: white;
    text-align: center;
    font-family: "Times New Roman", Times, serif;
}

.img-container {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    width: 65%;
    height: 50%;
    font-size: 32px;
    font-family: "Comic Sans MS", cursive, sans-serif;
    color: white;
}
.partner-container {
    text-align: center;
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 50%;
    height: auto;
    color: white;
}

.center {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 25%;
    height: 79px;
    font-family: "Times New Roman", Times, serif;
}
.contact-container {
    color: white;
    font-family: "Times New Roman", Times, serif;
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 70%;
    height: auto;
    text-align: left;
}