/* Custom style that will override w3.css */
.w3-theme-l5 {color:#000 !important; background-color:#fffaf0 !important}
.w3-theme-l4 {color:#000 !important; background-color:#ffedcc !important}
.w3-theme-l3 {color:#000 !important; background-color:#ffdb99 !important}
.w3-theme-l2 {color:#000 !important; background-color:#ffc966 !important}
.w3-theme-l1 {color:#000 !important; background-color:#ffb833 !important}
.w3-theme-d1 {color:#fff !important; background-color:#e69500 !important}
.w3-theme-d2 {color:#fff !important; background-color:#cc8500 !important}
.w3-theme-d3 {color:#fff !important; background-color:#b37400 !important}
.w3-theme-d4 {color:#fff !important; background-color:#996300 !important}
.w3-theme-d5 {color:#fff !important; background-color:#805300 !important}
.w3-theme-light {color:#000 !important; background-color:#fffaf0 !important}
.w3-theme-dark {color:#fff !important; background-color:#805300 !important}
.w3-theme-action {color:#fff !important; background-color:#805300 !important}
.w3-theme {color:#000 !important; background-color:#ffa600 !important}
.w3-text-theme {color:#ffa600 !important}
.w3-border-theme {border-color:#ffa600 !important}
.w3-hover-theme:hover {color:#000 !important; background-color:#ffa600 !important}
.w3-hover-text-theme {color:#ffa600 !important}
.w3-hover-border-theme:hover {border-color:#ffa600 !important}
/* unvisited link */
a:link {
    color: black;
}
/* visited link */
a:visited {
    color: black;
}
/* mouse over link */
a:hover {
    color: #e69500;
}
/* selected link */
a:active {
    color: black;
}
h4{
    text-decoration: underline;
}
w3-border-black{
    border: 2px;
    border-color: black;
}
.button {
    background-color: #4CAF50;
    border: none;
    color: white;
    padding: 9px 9px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 5px;
    margin: 4px 2px;
    cursor: pointer;
}
.button-green {
    background-color: #4CAF50;
    border: none;
    color: white;
    padding: 9px 9px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 5px;
    margin: 4px 2px;
    cursor: pointer;
}
.button-blue {
    background-color: #4a2ee2;
    border: none;
    color: white;
    padding: 9px 9px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 5px;
    margin: 4px 2px;
    cursor: pointer;
}
.button-red {
    background-color: #e24a2e;
    border: none;
    color: white;
    padding: 9px 9px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 5px;
    margin: 4px 2px;
    cursor: pointer;
}
.button-yellow {
    background-color: #fcf364;
    border: none;
    color: white;
    padding: 9px 9px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 5px;
    margin: 4px 2px;
    cursor: pointer;
}
.button-black {
    background-color: #000;
    border: none;
    color: white;
    padding: 9px 9px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 5px;
    margin: 4px 2px;
    cursor: pointer;
}
.button-pink {
    background-color: #e905f2;
    border: none;
    color: white;
    padding: 9px 9px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 5px;
    margin: 4px 2px;
    cursor: pointer;
}
.button-orange {
    background-color: #f27c05;
    border: none;
    color: white;
    padding: 9px 9px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 5px;
    margin: 4px 2px;
    cursor: pointer;
}
.button-gray {
    background-color: #9f9f9f;
    border: none;
    color: white;
    padding: 9px 9px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 5px;
    margin: 4px 2px;
    cursor: pointer;
}
.button-order {
    background-color: white;
    border-radius: 10px
        color: white;
    padding: 5px 5px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 5px;
    margin: 4px 2px;
    cursor: pointer;
}
/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content/Box */
.modal-content {
    background-color: #fefefe;
    margin: 15% auto; /* 15% from the top and centered */
    padding: 20px;
    border: 1px solid #888;
    width: 80%; /* Could be more or less, depending on screen size */
}
/* The Close Button */
.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}
.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}
/* Set Flex Display and Flex Direction for container */
.container {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row wrap;
    flex-flow: row wrap;
}

.image-card{
    width: 100%;
    margin: 1%;
    
}

.content-card{
    padding: 3%;
    margin: 1%;
}
/* Set Default column values */
.c1, .c2, .c3, .c4, .c5, .c6, .c7, .c8 {
    width: 100%;
    border: none;
}

/* MEDIA QUERIES */

/* If the browser is 601px to 799px, then the following will happen */
@media (min-width: 750px) {
    .c1 {
        width: 45%; 
        -webkit-order: 1;
        order: 1;
    }

    .c2 {
        width: 45%; 
        -webkit-order: 2;
        order: 2;
    }

    
}

.image-card{
        width: auto;
        height:auto;
        margin-left: 75px;
        margin-top:50px
    }
    .img{
        width:100%;
        height:auto;
    }