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

* {
   box-sizing: border-box;
}

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

[class*="col-"] {
   float: left;
   padding: 0px 0px;
   border: solid 1px rgba(0,0,0,0);
   margin-top: 0px;
}

.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%;}

body {
   background-color: #351D17;
}

h1 {
   font-family: "Solway", serif;
   font-size: 64px; 
   color: white;
   text-shadow: 2px 2px 5px black;
}

h2 {
   font-family: "Solway", serif;
   font-size: 54px;   
   color: white;
   text-shadow: 2px 2px 5px black;
}

h3 {
   font-family: "Solway", serif;
   font-size: 44px;   
   color: white;
   text-shadow: 2px 2px 5px black;
}

h4 {
   font-family: "Solway", serif;
   font-size: 34px;   
   color: white;
   text-shadow: 2px 2px 5px black;
}

h5 {
   font-family: "Solway", serif;
   font-size: 29px;   
   color: white;
   text-shadow: 2px 2px 5px black;
}

h6 {
   font-family: "Solway", serif;
   font-size: 24px;   
   color: white;
   text-shadow: 2px 2px 5px black;
}

p, li, table, figcaption, input, select ,textarea {
   font-family: "Solway", serif;
   font-size: 22px;
   color: white;
   text-shadow: 2px 2px 5px black;
}

a {
   text-decoration: none; 
   color: yellow;
}
.topbtn {
   background-image: url("images/topbtn-bg.jpg");
   width: 225px;
   height: 60px;
   border: solid #873e23 3px;  
   font-size: 20px;
   color: white;
   text-shadow: 3px 3px 5px black;
   cursor: pointer;
   border-radius: 10px;
   margin: 0px 3px 10px;
   font-family: "Solway", serif;
   box-shadow: 4px 4px 6px black;
}

.topbtn:hover {
   border: solid gold 3px;
   font-size: 20px;
}

#topbtns {
   display: inline;
   margin: 20px 0px 20px 0px;
}

.side-pics {
   border: solid white 4px;
   border-radius: 3px;
   width: 210px;
   max-width: 100%;
   max-height: 145px;
   display: inline;
}

input {
   width: 100%;
   color: black;
   text-shadow: none;
}

select {
   width: 100%;
   color: black;
   text-shadow: none;
}

textarea {
   width: 100%;
   color: black;
   text-shadow: none;
}

.bn {
   display: none;
}

@media only screen and (max-width: 1024px) {
   /* For mobile phones: */
   [class*="col-"] {
      width: 100%;
      margin-bottom: 5px;
      padding: 0px 20px;
   }
   
   #topbtns, .side-pics {
      display: none;
   }
   
   h1 {
      font-size: 45px;
   }
   
   h2 {
      font-size: 40px;
   }
   
   h3 {
      font-size: 35px;
   }
   
   h4 {
      font-size: 30px;
   }
   
   h5 {
      font-size: 25px;
   }
   
   p, li {
      font-size: 20px;
   }
   
   .bn {
      display: inline-block;
   }
}