.mc-top,.mc-bottom{

position:fixed;

padding: 4px;

width:100%;

background-color: white;

z-index:0;

    

}



.mc-top {



     border-bottom: 1px solid #FF0000;



}



.name {

    font-size:16px;

    color: #ff0000;

    line-height:1;

    padding:0px 0px;

    

}



.navbar {

    overflow: hidden;

    background-color: white;

    align: center;

    font-family: Arial, Helvetica, sans-serif;

    position: fixed;

    top: 0;

    width: 100%;

}



.navbar a {

    float: center;

    font-size: 18px;

    color: white;

    text-align: center;

    padding: 10px 10px;

    text-decoration: none;

}



.dropdown {

    float: center;

    display: inline-block;

    overflow: display;



}



.dropdown .dropbtn {

    font-size: 16px;    

    border: none;

    outline: none;

    color: #FF0000;

    padding: 4px 4px;

    background-color: white;

    display: block;

    font-family: Arial;

     margin: 0;



}



.dropdown-content a:hover {

    background-color: #ddd;

        float: center;

}



.dropdown:hover .dropdown-content {

    display: block;

    float: center;

}



.navbar a:hover, .dropdown:hover .dropbtn {

    background-color: #ff8080;

    align: center;

    

}



.dropdown-content {

    padding-left: 0px;

    font-family: Arial;

    font-size: 14px; 

    display: none;

    position: fixed;

    align: center;

    background-color: #f9f9f9;

    min-width: 140px;

    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.5);

    z-index: 1;

}



.dropdown-content a {

    font-family: Arial;

    font-size: 14px;

    line-height:75%;

    float: center;

    color: black;

    padding: 8px 8px;

    text-decoration: none;

    display: block;

    text-align: left;

}



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

.col3text, .dropdown .dropbtn {

    font-size: 3vw;

    margin-left: 2px;

    letter-spacing:0px;

    line-height: 1; 

    border: none;

    outline: none;

    font-family: Arial;

    Align: center;

    

}

}



@media screen and (min-width: 500px) {

.col3text, .dropdown .dropbtn {

    font-size: 2vw;

    margin-left: 2px;

    letter-spacing:0px;

    line-height:1; 

    border: none;

    outline: none;

    font-family: Arial;

    Align: center;

    

}

}





@media screen and (min-width: 500px) {

    .navbar-text {

    font-size: 2vw;

    letter-spacing:1px;

    line-height:1.5; 

    border: none;

    outline: none;

    color: #000000;

    font-family: Arial; 

    Align: left;

    vertical-align: text-top;



}

}



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

    .navbar-text {

    font-size: 4vw;

    letter-spacing:1px;

    line-height:1;

    border: none;

    outline: none;

    color: #000000;

    font-family: Arial;

    Align: left;

    vertical-align: text-top;

    

}

}



@media screen and (min-width: 500px) {

    .navbar-subtext {

    font-size: 2vw;

    letter-spacing:1px;

    line-height:1;

    border: none;

    outline: none;

    color: #000000;

    font-family: Arial;

    Align: left;

    vertical-align: text-top;

    

}

}



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

    .navbar-subtext {

    font-size: 4vw;

    letter-spacing:1px;

    line-height:1;

    border: none;

    outline: none;

    color: #000000;

    font-family: Arial;

    Align: left;

    vertical-align: text-top;





}

}

* {

    box-sizing: border-box;

}



/* Create three equal columns that floats next to each other */

.column3 {

    float: left;

    width: 33.33%;

    padding: 10px;

    height: auto; /* Should be removed. Only for demonstration */

}



/* Clear floats after the columns */

.row:after {

    content: "";

    display: table;

    clear: both;

}



/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */

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

    .column3 {

        width: 100%;

        font-size:5vw;

    }

}