/* CSS Document */

* {
  box-sizing: border-box;
}

.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-family: 'Playfair Display', serif;
     margin: 0px;
     font-size: 23px;
     background-color: lightpink;
     font-weight: 600;
}

.top-left {
     position: absolute;
     top: 25px;
     left: 50px;
     background-color: rgba(0,0,0,.8);
     border: solid white 2px;
     color: white;
     padding: 15px 50px;
}

.topnav {
     overflow: hidden;
     /*background-color: rgba(255, 182, 193, 1);*/
     background-color:lightskyblue;
     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;
}

.topnav a:hover {
  background-color: bisque;
  color: black;
  text-shadow: none;
}


.topnav .icon {
  display: none;
}

#myBtnTop {
  display: none; /* Hidden by default */
  position: fixed; /* Fixed/sticky position */
  bottom: 20px; /* Place the button at the bottom of the page */
  right: 30px; /* Place the button 30px from the right */
  z-index: 99; /* Make sure it does not overlap */
  border: none; /* Remove borders */
  outline: none; /* Remove outline */
  background-color: red; /* Set a background color */
  color: white; /* Text color */
  cursor: pointer; /* Add a mouse pointer on hover */
  padding: 10px; /* Some padding */
  border-radius: 10px; /* Rounded corners */
  font-size: 18px; /* Increase font size */
  width: 60px;
}

.container {
     position: relative;
     z-index: 0;
     /*text-align: center;*/
}

.compname {
     font-size: 60px;
     font-family: 'Playfair Display', serif;
}

.compaddr {
     font-size: 25px;
     font-family: 'Playfair Display', serif;
}


input[type=text], input[type=email], input[type=date], textarea, input[type=number], select, option, input[type=password] {
     width: 100%;
     font-size: 25px;
     font-family: 'Playfair Display', serif;  
     font-weight: 700;
}

input[type=submit]{
     border: solid black 1px;
     background-color: rosybrown;
     color: black;
     font-family: 'Playfair Display', serif;
     font-size: 25px;
     border-radius: 8px;
     font-weight: 700;
     padding: 10px;
}

input[type=submit]:hover, button:hover {
     background-color: bisque;
     cursor: pointer;
}

input[type=radio] {
     width: 20px;
     height: 20px;
}

.topimg {
     width:100%; margin: 0px 0px 30px 0px;
}

button {
     border: solid black 1px;
     background-color: rosybrown;
     color: black;
     font-family: 'Playfair Display', serif;
     font-size: 25px;
     border-radius: 8px;
     font-weight: 700;
     padding: 10px;
     margin-bottom: 15px;
     overflow: auto;
   max-width: 100%;
}

.flex-container {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 15px;
}

.flex-container > div {
    width: 30%;
    margin: 5px auto;
    text-align: left;
     padding: 0px 5px;
     background-color: bisque;
     border: solid white 3px;
     font-size: 18px;
}

.flex-container > div:hover {
     box-shadow: 0px 0px 26px black;
}

a {
     text-decoration: none;
}

/*-----------------------------------------------------------*/

@media screen and (max-width: 1000px) {
     
    [class*="col-"] {
        width: 100%;
    }
     
     .topnav {
          padding: 0px;
          font-size: 18px;
          margin-top: 10px;
     }
     
     .topnav a:not(:first-child) {
          display: none;
     }
     
     .topnav a.icon {
          float: right;
          display: block;
          font-size: 20px;
          line-height: 20px;
     }
     
     .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: 20px;
          line-height: 0px;
          text-shadow: none;
          color: black;
          margin: 0px;
     }

     input[type=password]{
          width: 50%;
          font-size: 25px;
          font-family: 'Playfair Display', serif;
     }

     .top-left {
          position: absolute;
          top: 0px;
          left: 0px;
          color: white;
          padding: 0px 10px;
          width: 100%;
          border: none;
          margin: 0px;
          background-color: rgba(0,0,0,.3);
     }
     
     .compname {
          font-size: 26px;
     }

     .compaddr {
          font-size: 18px;
          font-family: 'Playfair Display', serif;
     }
     
     .topimg {
          width: 100%; 
          margin: 0px 0px 0px 0px;
          height: 150px;
     }
     
     h1 {
          font-size: 30px;
     }
     
     p button {
          font-size: 20px;
     }
     
     .flex-container > div {
         width: 95%;
          font-size: 16px;
     }
     
     .mainarea {
          margin: 10px;
     }
}