@charset "utf-8";
/* CSS Document */

* {
  box-sizing: border-box;
}

.row::after {
  content: "";
  clear: both;
  display: table;
}

.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}

[class*="col-"] {
     float: left;
     padding: 3px;
     border: 0px solid red;
}

body {
  font-size: 20px;
  font-family: 'Noto Sans', sans-serif;
}

#headerimg {
   width: 200px; 
   float: left; 
   margin: 0px 10px 0px 10px;
}

.topnav {
     overflow: hidden;
     background-color: antiquewhite;
     padding: 10px 0px;
     margin-top: 10px;
}

.topnav a {
  float: none;
  display: inline;
  color: black;
  text-align: center;
  padding: 24px 10px;
  text-decoration: none;
  font-size: 20px;
  font-family: 'Noto Sans', sans-serif;
}

.topnav a:hover {
  background-color: #FF2E31;
  color: white;
  text-shadow: none;
}


.topnav .icon {
  display: none;
}
/*=================================================================*/

@media screen and (max-width: 1024px) {
     
    [class*="col-"] {
        width: 100%;
    }
   
    .topnav {
          padding: 0px;
          font-size: 26px;
     }
     
     .topnav a:not(:first-child) {
          display: none;
     }
     
     .topnav a.icon {
          float: right;
          display: block;
     }
     
     .topnav.responsive {
          position: relative;
     }
     
     .topnav.responsive .icon {
          position: absolute;
          right: 0;
          top: 0;
     }
     
     .topnav.responsive a {
          float: none;
          display: block;
          text-align: left;
     }
     
     .topnav a {
          float: left;
          font-size: 18px;
          line-height: 0px;
     }
   
   #headerimg{
      width: 75px; 
      float: left; 
      margin: 0px 10px 0px 10px;
   }
}