:root {
    /* ORGANIZE */
    --mainbg: #e5e5e6;
    --bodybg: grey;
    --navbg: aqua; /* TEMP - FOR TESTING PURPOSES ONLY. WHEN DONE, COMMENT OUT FOR FUTURE USE */
    --navbgactive: purple; /* TEMP - FOR TESTING PURPOSES ONLY. WHEN DONE, COMMENT OUT FOR FUTURE USE */
    --navcolbg: red; /* TEMP - FOR TESTING PURPOSES ONLY. WHEN DONE, COMMENT OUT FOR FUTURE USE */

    font-family:sans-serif;
}

/* GENERAL---------------------------------------------------------------------------------- */

body {
    max-width:100%;
    overflow-x:hidden;
}

h1 {
    font-size: 3em;
}

h3 {
    font-size:2em;
}

.uc {
    text-align:center;
    padding:20em;
}

/* NAVBAR STYLING--------------------------------------------------------------------------- */

.navbar-ls {
    color:black;
    /*background-color: var(--navbg); /* FOR TESTING PURPOSES ONLY. WHEN DONE, COMMENT OUT FOR FUTURE USE */
    width:100%;
    position:absolute;
    display:flex;
    flex-direction:row;
    flex-wrap:nowrap;
    justify-content:space-around;
    bottom:0;
}

.navbar-ls a {
    display:inline;
    color:black;
    text-decoration:none;
    font-weight:bold;
    font-family: sans-serif;
    width:100%;
    text-align:center;
    float:left;
    padding: 0 0 1em 0;
    /* background-color: var(--navcolbg);  FOR TESTING PURPOSES ONLY. WHEN DONE, COMMENT OUT FOR FUTURE USE */
}

.active {
    /* background-color:var(--navbgactive); FOR TESTING PURPOSES ONLY. WHEN DONE, COMMENT OUT FOR FUTURE USE */
    border-bottom:5px solid black;
    color:white;
}

/* END NAVBAR--------------------------------------------------------------------------- */

/* IMAGE CAROUSEL----------------------------------------------------------------------- */
.image-carousel {
    height:67vh;
    padding:0;
    margin:0;
    text-align:center;
    overflow:hidden;
}

.n1 {
    background-image: url("https://images.unsplash.com/photo-1491438590914-bc09fcaaf77a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80");
}

.n2 {
    background-image: url("https://images.unsplash.com/photo-1556159992-e189f8e50104?ixlib=rb-1.2.1&auto=format&fit=crop&w=750&q=80");
}

.n3 {
    background-image: url("https://images.unsplash.com/photo-1511988617509-a57c8a288659?ixlib=rb-1.2.1&auto=format&fit=crop&w=751&q=80");
}
  
.n4 {
    background-image: url("https://images.unsplash.com/photo-1522202176988-66273c2fd55f?ixlib=rb-1.2.1&auto=format&fit=crop&w=751&q=80");
}
  
.n5 {
    background-image: url("https://images.unsplash.com/photo-1523240795612-9a054b0db644?ixlib=rb-1.2.1&auto=format&fit=crop&w=750&q=80");
}

input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

label {
    display: inline-block;
    width: 12px;
    height: 12px;
    border: solid 2px white;
    border-radius: 999px;
    background-color: transparent;
    margin: 63vh 6px 0 6px;
    z-index: 2;
    cursor: pointer;
    transition-duration: .4s;
}

.slide {
    position: absolute;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: -1;
    transform: translateX(-100%);
    transition-duration: .4s;
    opacity: 1;
}

input:checked+label {
    background-color: #ffffff;
}

input:focus+label {
    box-shadow: 0 0 0 2px #cccccc, 0 0 18px #ffffff;
}

input:checked~.slide {
    transform: translateX(100%);
}

input:checked+label+.slide {
    transform: translateX(0);
    opacity: 1;
}

/* END IMAGE CAROUSEL------------------------------------------------------------------- */

/* BODY--------------------------------------------------------------------------------- */

.main-cont {
    background-color:var(--mainbg);
    width:100%;
    height:58.5em;
}

.main-text {
    width:60%;
    color:black;
    float:left;
    margin:4em;
}

.main-text h3 {
    margin:1em 0 1em 0;
}

.main-text p {
    font-size:1.2em;
}

.diag-deco {
    position:absolute;
    right:0;
    top:0;
    width:75%;
    max-height:130px;
}

.toppy {
    height:200px;
    color:black;
    background-color: var(--mainbg);
    position:relative;
}

.logo {
    max-height:50%;
    min-width:15%;
    max-width:35%;
    width:2em;
    padding:0;
    position:absolute;
    top:0;
}

.ins-img {
    position:absolute;
    width:25%;
    margin: 4em 4em 4em 0;
    float:right;
    mask-image: linear-gradient(to bottom, rgb(0, 0, 1), rgba(0,0,0,.975), rgba(0,0,0,0));
    z-index:3;
    right:0;
}

.blk-bar {
    position:absolute;
    background-color: black;
    height:110%;
    width:25%;
    margin: 0 4em 0 0;
    z-index:1;
    right:0;
}

/* END BODY----------------------------------------------------------------------------- */

/* FOOTER------------------------------------------------------------------------------- */

.footer {
    position:absolute;
    z-index:1000;
    background-color:#2e1b32;
    width:100%;
    height:18em;
    color:#e5e5e6;
    font-family:sans-serif;
    overflow:hidden;
}

.footer h3 {
    font-size:1.5em;
    padding: 0 0 1em 0;
}

.foot-text {
    width:100em;
}

.foot-column {
    width:17em;
    padding:2em 0 0 2em;
    float:left;
}

.ql {
    width:10em;
}

.quick-links a {
    text-decoration:none;
    color:#e5e5e6
}

.ql-active {
    border-bottom:3px solid #e5e5e6;
    padding-bottom:5px;
}

.foot-column li {
    padding-left:1em;
}

.contact {
    padding-bottom:1em;
}

.quick-links li {
    padding-bottom:2em;
}

.contact li {
    padding-bottom:.62em;
}

.loc li {
    padding-bottom:.62em;
}

.hours {
    padding: 0 2em 2em 0;
}

.hours li {
    padding-top:0;
    padding-bottom:.5em;
}

.hrs-title-2 {
    padding-top:1.5em;
}

.hrs-time {
    padding-left:1em;
}

.img-side {
    float:right;
    width:500px;
    padding:1em 5em 1em 1em;
    filter:invert(1);
    opacity:25%;
}

/* END FOOTER--------------------------------------------------------------------------- */
/* END GENERAL-------------------------------------------------------------------------- */

@media (orientation:landscape) {
    .logo {
        min-height:7em;
        min-width:18em;
    }
}

@media (orientation:portrait) {
    .logo {
        width:100%;
    }
}