/* ------- INCLUDES -------- */


/*@include 'footer-style.css'*/


/* ------- GENERAL STYLING -------- */

* {
    box-sizing: border-box;
    font-family: Arial, "Lato", sans-serif, Helvetica;
    margin: 0;
    padding: 0;
}

table {
    padding-top: 50px;
    width: 70%;
}

tr:nth-child(even) {
    background-color: #f2f2f2;
}

td,
th {
    border: 1px solid #ddd;
    padding: 8px;
}

ul,
ol {
    list-style: square;
    padding-left: 2em;
    padding-top: 20px;
    padding-bottom: 20px;
}


/* Style the body */

body {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
}

h1 {
    padding-top: 80px;
    padding-bottom: 20px;
}

h2 {
    padding-top: 70px;
    padding-bottom: 5px;
}

h3 {
    padding-top: 70px;
    padding-bottom: 5px;
}

blockquote {
    padding: 8px;
    background-color: #bbb;
    color: #444;
    border-radius: 5pt;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: small;
}

.container {
    flex: 1;
    /* same as flex-grow: 1; */
}

.sticky {
    position: -webkit-sticky;
    /* Safari */
    position: sticky;
    z-index: 100;
    /*the higher the number, the more dominant will the CSS object become compared to its other elements. This ensures, that the topbar is always on the front.*/
    top: 0;
    transition: 0.3s ease-in-out;
}

.ico {
    width: 100px;
    display: block;
    height: 56px;
    background: none;
    color: white;
    text-decoration: none;
    padding-left: 20px;
}

.ico:before {
    content: '';
    background: url('favicon-32x32.png');
    background-size: cover;
    position: absolute;
    width: 32px;
    height: 32px;
}


/* Add a black background color to the top navigation */

.topnav {
    padding-left: 100px;
    background-color: #e6e6e6;
    overflow: hidden;
    padding: 12px;
    position: -webkit-sticky;
    /* Safari */
    position: sticky;
    z-index: 100;
    /*the higher the number, the more dominant will the CSS object become compared to its other elements. This ensures, that the topbar is always on the front.*/
    top: 0;
    transition: 0.3s ease-in-out;
}

.navbar-fixed-top.scrolled {
    background-color: #fff !important;
    transition: background-color 200ms linear;
}


/* Style the links inside the navigation bar */

.topnav a {
    float: left;
    display: block;
    color: #333333;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
}


/* Change the color of links on hover */

.topnav a:hover {
    color: #4d4d4d;
}


/* Add an active class to highlight the current page */

.topnav a.active {
    background-color: white;
    color: #595959;
}


/* Hide the link that should open and close the topnav on small screens */

.topnav .icon {
    display: none;
}


/* -------- BANNER --------- */

.banner {
    height: 25rem;
    background: url(./banner_new.jpg) 0 0;
    background-size: cover;
    background-position: center;
}

.bannerlogo {
    padding-top: 4rem;
    height: 28rem;
    text-align: left;
    background: url(./mstile-150x150.png) 0 0;
    background-repeat: no-repeat;
    background-size: auto;
    background-position: left;
    color: white;
    text-decoration: none;
    text-indent: 100px;
}

#pagetitle {
    padding-left: 9rem;
}

#pt {
    padding-left: 9rem;
    padding-bottom: 0;
    font-size: 3em;
    margin: 0%;
}


/* Column container */

.row {
    display: -ms-flexbox;
    /* IE10 */
    display: flex;
    -ms-flex-wrap: wrap;
    /* IE10 */
    flex-wrap: wrap;
    padding: 1.25rem;
}

.mainrow {
    display: -ms-flexbox;
    /* IE10 */
    display: flex;
    -ms-flex-wrap: wrap;
    /* IE10 */
    flex-wrap: wrap;
    background-color: #f1f1f1;
}

#main {
    padding-left: 30rem;
    padding-right: 30%;
}

#boxindex {
    padding: 3%;
}

.box {
    display: flex;
    -ms-flex: 30%;
    /* IE10 */
    flex: 30%;
    font-family: Arial;
}


/*-------------- CONTACT FORM -----------------*/


/* Style inputs with type="text", select elements and textareas */

input[type=text],
select,
textarea {
    width: 100%;
    /* Full width */
    padding: 12px;
    /* Some padding */
    border: 1px solid #ccc;
    /* Gray border */
    box-sizing: border-box;
    /* Make sure that padding and width stays in place */
    margin-top: 6px;
    /* Add a top margin */
    margin-bottom: 16px;
    /* Bottom margin */
    resize: vertical
        /* Allow the user to vertically resize the textarea (not horizontally) */
}


/* Style the submit button with a specific background color etc */

input[type=submit] {
    background-color: #04AA6D;
    color: white;
    padding: 12px 20px;
    border: none;
    cursor: pointer;
}


/* When moving the mouse over the submit button, add a darker green color */

input[type=submit]:hover {
    background-color: #45a049;
}


/* Add a card effect for articles */

.card {
    display: flex;
    flex-flow: column wrap;
    justify-content: center;
    background-color: #f1f1f1;
    margin-top: 5px;
    padding: 25px;
}

.card-content {
    padding: 20px;
    text-align: center;
    margin-bottom: auto;
}

.buttonlnk {
    border: 0px;
    padding: 20px 20px;
    text-align: center;
    background-color: #404040;
    color: #fff;
    text-decoration: none;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 3px 10px 0 rgba(0, 0, 0, 0.19);
    margin-top: auto;
}

.centerbtn {
    display: flex;
    justify-content: center;
    align-items: center;
    align-self: center;
    flex-flow: row wrap;
    margin: 30px 30px;
    width: 13%;
}

.buttonlnk:hover {
    color: #fff;
    text-decoration: none;
    background-color: #595959;
}

.diashow {
    display: block;
    width: 50vw;
    max-width: 100%;
    padding-top: 30px;
}

.affiliates {
    display: block;
    width: 20vw;
    max-width: 100%;
    padding-top: 30px;
    margin-left: auto;
    margin-right: auto;
    background-position: center;
}


/* -------- FOOTER --------- */

footer {
    background-color: #444;
    color: #bbb;
    line-height: 1.5;
}

footer a {
    text-decoration: none;
    color: #eee;
}

a:hover {
    text-decoration: none;
    color: #d9d9d9;
}

.ft-title {
    color: #cccccc;
    font-family: Arial, serif;
    font-size: 1.25rem;
    padding-bottom: 0.625rem;
    padding-top: 2.5rem;
}


/* Sticks footer to bottom */

body {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
}


/* Footer main */

.ft-main {
    padding: 1.25rem 1.875rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.ft-main-item {
    padding: 1.25rem;
    min-width: 12.5rem;
    list-style: none;
}


/* Footer social */

.ft-social {
    padding: 0 1.875rem 1.25rem;
}

.ft-social-list {
    display: flex;
    justify-content: center;
    border-top: 1px #777 solid;
    padding-top: 1.25rem;
    list-style: none;
    padding-left: 0%;
}

.ft-social-list li {
    margin: 0.5rem;
    font-size: 1.25rem;
}

.footerlogo {
    margin: 0;
    padding: 50px;
    text-align: left;
    background: url(./MinervaLogoText.png) 0 0;
    background-repeat: no-repeat;
    background-size: 128px;
    background-position: left;
    color: white;
    text-decoration: none;
    text-indent: 100px;
}


/* --------- COMMISSION STYLES --------- */


/* Websites */

.comm1 {
    margin: 10;
    padding: 100px;
    background: url(./images/website_banner.png) 0 0;
    background-size: cover;
    background-position: center;
    color: white;
}


/* Maps */

.comm2 {
    margin: 10;
    padding: 100px;
    background: url(./images/maps_previews/intermediate_map_example2.png) 0 0;
    background-size: cover;
    background-position: center;
    color: white;
}


/* Launchers */

.comm3 {
    margin: 10;
    padding: 100px;
    background: url(./images/ET-Launcher.png) 0 0;
    background-size: cover;
    background-position: center;
    color: white;
}

@media only screen and (min-width: 1000px) {
    .diashow {
        width: 50rem;
    }
}

@media screen and (max-width: 1000px) {
    .topnav a:not(:first-child) {
        display: none;
    }

    .topnav a.icon {
        float: right;
        display: block;
    }

    .topnav.responsive {
        position: relative;
    }

    .topnav.responsive a.icon {
        position: absolute;
        right: 0;
        top: 0;
    }

    .topnav.responsive a {
        float: none;
        display: block;
        text-align: left;
    }

    #pagetitle,
    #pt {
        display: none;
    }

    .diashow {
        width: 100vw;
    }
}


/* When the screen is less than 700 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */

@media only screen and (max-width:1500px) {
    .mainrow #main {
        padding: 0;
        width: 100%;
    }
}

@media screen and (max-width: 800px) {

    #pagetitle,
    #pt {
        display: none;
    }

    .diashow {
        width: 100vw;
    }
}


/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */


/* Use percentage as a unit of measurement while making your website responsive. Pixels does not work if you want it to be responsive. 
If you use percentage, the measurement is taken with respect to the size of the screen. But if you use pixels, the padding remains the same for all sizes. */

@media only screen and (max-width: 700px) {
    .topnav a:not(:first-child) {
        display: none;
    }

    .topnav a.icon {
        float: right;
        display: block;
    }

    .topnav.responsive {
        position: relative;
    }

    .topnav.responsive a.icon {
        position: absolute;
        right: 0;
        top: 0;
    }

    .topnav.responsive a {
        float: none;
        display: block;
        text-align: left;
    }

    .mainrow #main {
        padding: 0;
        width: 100%;
    }

    .card,
    .box,
    .row {
        padding: 0;
        width: 100%;
        flex-direction: column;
    }

    .bannerlogo {
        background-position-x: center;
        margin-left: auto;
        margin-right: auto;
    }

    h1 {
        font-size: 7vw;
        padding-left: 3%;
    }

    h2 {
        font-size: 6vw;
        font-weight: bold;
        padding-left: 3%;
    }

    h3 {
        font-size: 6vw;
        padding-left: 3%;
    }

    h4 {
        font-size: 5vw;
        font-weight: bold;
        padding-left: 3%;
    }

    p {
        font-size: 4vw;
        padding-left: 3%;
    }

    ul,
    ol {
        font-size: 4vw;
        padding-left: 3%;
    }

    table {
        width: 95%;
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
    }

    td,
    th {
        font-size: 4vw;
        padding-left: 3%;
    }

    #pagetitle {
        display: none;
    }

    .diashow {
        display: block;
        width: 100%;
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
    }

    .affialiates {
        display: block;
        width: 85%;
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
    }
}


/* FOOTER */


/* Responsive layout - when the screen is less than 400px wide, make the navigation links stack on top of each other instead of next to each other */

@media only screen and (min-width: 29.8125rem
    /* 477px */

) {
    .ft-main {
        justify-content: space-evenly;
    }
}

@media only screen and (min-width: 77.5rem
    /* 1240px */

) {
    .ft-main {
        justify-content: space-evenly;
    }
}