/* Main stylesheet*/

body {
     background-color: #fcf6ef;
     margin: 0
}

h1 {
     font-family: Parkinsans;
     font-size: 5rem;
     text-align: center;
     margin-bottom: 0%;
}

h2 {
     font-family: Parkinsans;
     font-size: 1.8rem;
     color: #201a26;
     margin-bottom: 2%
}

h3 {
     font-family: Parkinsans;
     font-size: 1.2rem;
     color: #201a26;
     margin: 0 auto 2%;
     text-align: center
}

p {
     font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
     font-size: 1.3em;
     margin-top: 1%;
     text-align: center;
}

.white {
     color: #fcf6ef;
}

.container {
     width: 100%;
     display: flex;
     justify-content: center;
}

.container2 {
     width: max-content;
     display: flex;
     margin: 0 auto 0;
}

button {
     border-color: #b80946;
     color: #fcf6ef;
     width: auto;
     border-width: 0.4vw;
     border-radius: 10%;
     margin-top: 2%;
     font-size: 1.3em;
     text-align: center;
     background-color: rgb(22, 20, 28);
     font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}

ul {
     list-style-type: none;
     padding: 0;
     margin: 0;
     overflow: hidden;
}

.navbannercolor {
     background-color: #b80946
}

li {
     color: #fcf6ef;
     padding: 0.5%;
     font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
     font-size: 1.4rem
}

.navli {
     float: right;
     font-size: 1.4rem
}

.logonav {
     width: 130px;
     height: 40px;
     float: left;
}

li a {
     display: block;
     color: #fcf6ef;
     text-align: center;
     padding: 14px 16px;
     text-decoration: none;
}

.topbanner {
     padding: 5%;
     background-image: image-set("banner1.jpg");
     background-repeat: no-repeat;
     background-size: cover;
     background-position: center;
}

.wrapper {
     width: 50%;
     display: flex;
     flex-direction: row;
     margin: 1% auto auto;

     .col {
          text-align: left;
          padding-left: 2%;
          width: 400px;
          margin: 0 auto 0
     }

     img {
          width: 100%
     }
}


.pright {
     text-align: left;
     width: auto;
     font-size: 1.1em
}

.wrapper2 {
     display: block;
     justify-content: space-between;
     width: 100%;
     padding: 0.5% 0% 2%;
     background-color: #ece0d2;
     margin-top: 2%
}

.div1 {
     justify-content: center;
     width: auto;
}

.hours {
     text-align: center;
     width: 30%;
     font-size: 1.2vw;
     line-height: 150%;
     margin-left: auto;
     margin-right: auto;
     padding: 1%;
     background-color: #b80946;
}

/*contact information*/
.divcontact {
     display: flex;
     justify-content: center;
     text-align: right;
     padding: 0 2%;
     width: auto
}

th {
     padding: 0 2%;
     width: fit-content;
     color: #2b2b35
}

td {
     width: 100%;
     margin: auto;
     color: #fcf6ef;
}

th,
td {
     padding-bottom: 10%;
     font-size: 1.2rem;
     font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
     text-align: center
}

.wrapper3 {
     display: block;
     justify-content: center;
     width: 100%;
     padding: 0.5% 0 2%;
     background-image: linear-gradient(#45495c, #747983);
     margin-top: 2%;
     margin-left: auto
}

.h2BIG {
     font-size: 1.5vw;
     text-align: center;
     margin: 0.5% 0 1%
}

/* Media Queries */

@media screen and (max-width: 1375px) {
     h1 {
          font-size: 3.6em;
     }

     .pright {
          font-size: 0.9rem;
     }

     h2 {
          margin-top: 0;
          font-size: 1.9rem;

     }

     .wrapper {
          padding-bottom: 0;
          flex-direction: column;

          .col {
               flex-basis: 47%;
               text-align: center;
          }


          &img {
               padding-bottom: 5vw;
               flex-direction: column;
          }
     }

     div {
          flex-direction: row;
          flex-wrap: wrap;
     }

     img,
     p {
          flex: 0 0 50%;
     }

     .wrapper2 {
          li {
               font-size: 1.1rem
          }
     }

     .wrapper3 {
          .h2BIG {
               font-size: 1.3rem
          }

          h3 {
               font-size: 1rem
          }
     }

     th,
     td {
          font-size: 0.9rem
     }
}


@media screen and (max-width: 800px) {
     h1 {
          font-size: 3em
     }

     .wrapper {
          .col {
               width: auto;
          }

          h2 {
               font-size: 1.5rem
          }

          p {
               font-size: 0.7em
          }

          img {
               width: 50vw;
               flex-direction: column;
          }
     }

     .wrapper2 {
          .h2BIG {
               font-size: 1.2rem
          }

          li {
               font-size: 2.2vw;
               line-height: 130%;
          }
     }

     .wrapper3 {
          .h2BIG {
               font-size: 1.1rem
          }

          h3 {
               font-size: 0.8rem
          }
     }

     th,
     td {
          font-size: 0.8rem
     }
}