/*FOR VISUALIZATION OF DIVS*//*
div {
border-style: solid;
border-width: 1px;
border-color: black;
}*/

body {
background-color: white;
font-family: sans-serif;
margin: 0;
padding: 0;
width: 100%;
}


.banner {
top: 0;
left: 0;
margin: 0;
padding: 0;
position: static;
display: block;
height: auto;
text-align: center;
z-index: 1;
overflow: visible;
}

.contact {
position: static;
top: 0;
margin: 0;
width: 100%;
background-color: steelblue;
color: white;
z-index: 1;
}

.contact a {
color: white;
text-decoration: none;
}

.contact a:visited {
color: white;
text-decoration: none;
}

.tagline{
color: steelblue;
margin: 0;
padding: 0;
position: static;
text-align: center;
z-index: 1;
}


.accent{
position: relative;
top: 15px;
left: 10%;
height: 30px;
width: 80%;
background-color: steelblue;
border-style: hidden;
border-color: steelblue;
border-radius: 15px;
border-width: 1px;
box-shadow: 0px 4px white;
z-index: 2;
margin: 0;
padding: 0;
}

.corpus{
position: static;
margin: 0;
padding: 0;
width: 100%;
}

.graphic {
position: relative;
display: inline-block;
margin: 0;
padding: 0;
background-color: steelblue;
}

.graphic img{
display: block;
z-index: 0;
}

.overlay{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(70,130,180,0.4);
z-index: 1;
margin: 0;
padding: 0;
}








/*SHIT SHOW BEGINS*/








.reviews {
position: relative;
top: 10px;
width: 100%;
min-height: auto;
overflow: hidden;
margin: 0px 0px 30px;
padding: 5px;
background-color: rgba(0,0,0,0);
color: steelblue;
align-items: center;
z-index: 3;
}

.carousel {
display: flex;
width: 600%;
transition: transform 0.3s ease-in-out;
transform: translateX(0%);
}

.carousel img {
width: 16.67%;
height: auto;
object-fit: contain;
flex: 0 0 16.67%;
}

.carousel a {
width: 16.67%;
flex: 0 0 16.67%;
margin: 0;
}

.carousel a img {
width: 100%;
height: auto;
object-fit: contain;
cursor: pointer;
}

input {
display: none;
}

@keyframes slideAnimation {
    /* 0.3s TRANSITION, 7s PAUSE, TOTAL 43.8s */
    0% { transform: translateX(0%); }
    0.68% { transform: translateX(0%); }      /* SLIDE 1 HOLD */
    16.67% { transform: translateX(-16.67%); } /* SLIDE TO 2 */
    17.35% { transform: translateX(-16.67%); } /* SLIDE 2 HOLD */
    33.34% { transform: translateX(-33.34%); } /* SLIDE TO 3 */
    34.02% { transform: translateX(-33.34%); } /* SLIDE 3 HOLD */
    50.01% { transform: translateX(-50.01%); } /* SLIDE TO 4 */
    50.69% { transform: translateX(-50.01%); } /* SLIDE 4 HOLD */
    66.68% { transform: translateX(-66.68%); } /* SLIDE TO 5 */
    67.36% { transform: translateX(-66.68%); } /* SLIDE 5 HOLD */
    83.35% { transform: translateX(-83.35%); } /* SLIDE TO 6 */
    84.03% { transform: translateX(-83.35%); } /* SLIDE 6 HOLD */
    100% { transform: translateX(0%); }       /* LOOP BACK */
}












.nav-dots {
position: absolute;
bottom: 10px;
left: 50%;
display: flex;
gap: 10px;
transform: translateX(-50%);
}

.nav-dots label {
width: 10px;
height: 10px;
background-color: rgba(70,130,180,0.5);
border-radius: 50%;
cursor: pointer;
transition: background-color 0.3s;
}


    


#slide1:checked ~ .nav-dots label[for="slide1"],
        #slide2:checked ~ .nav-dots label[for="slide2"],
        #slide3:checked ~ .nav-dots label[for="slide3"],
        #slide4:checked ~ .nav-dots label[for="slide4"],
        #slide5:checked ~ .nav-dots label[for="slide5"],
        #slide6:checked ~ .nav-dots label[for="slide6"] {
            background-color: rgba(70,130,180,1.0);
			}


/*focus layer*/

.focus-layer {
    display: flex; /* HIDDEN BY DEFAULT */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(70,130,180,0.5);
    justify-content: center;
    align-items: center;
    z-index: 10;
}

.focus-image {
    display: none; /* ALL IMAGES HIDDEN */
    max-width: 80%;
    max-height: 80%;
    object-fit: contain;
    border: 2px solid steelblue;
}

.focus-6 {
    display: block; /* SHOW ONLY THIS IMAGE */
}

.focus-close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 30px;
    height: 30px;
    background: rgba(70,130,180,0.8);
    border-radius: 50%;
    cursor: pointer;
}

.focus-close::before,
.focus-close::after {
    content: '';
    position: absolute;
    width: 20px;
    height: 2px;
    background: white;
    left: 5px;
    top: 14px;
}

.focus-close::before {
    transform: rotate(45deg);
}

.focus-close::after {
    transform: rotate(-45deg);
}






/*SHIT SHOW ENDS*/




.page {
position: relative;
top: -7px;
margin: 0px;
padding: 5px;
background-color: rgba(0,0,0,0);
color: steelblue;
z-index: 3;
}

.page p, h2 {
position: relative;
top: -35px;
display: block;
}

.pagealt {
position: relative;
top: 0px;
margin: 0px;
padding: 5px;
background-color: steelblue;
color: white;
}

.pagealt h2, h3 {
position: relative;
top: -40px;
color: white;
background-color: steelblue;
box-shadow: 0px 4px white;
}

.pagealt p, h4 {
position: relative;
top: -40px;
}

h1 {
color: steelblue;
text-align: center;
}

h2, h3 {
color: steelblue;
text-align: center;
padding: 5;
border-style: hidden;
border-radius: 15px;
background-color: white;
box-shadow: 0px 4px steelblue;
position: relative;
left: 10%;
width: 80%;
}

h4 {
text-align: center;
}

h5 {
color: white;
}

h6 {
color: steelblue;
text-align: center;
}
















.hname{
position: absolute;
top: 25px;
text-shadow: 2px 2px 5px darkslategrey;
}


.hamburger{
padding: 10px 14px 0px 0px;
position: relative;
float: right;
overflow: visible;
height: 55px;
}


.dropbtn {
position: relative;
height: 55px;
width: 55px;
  background-color: rgba(70,130,180,0);
  background-image: linear-gradient(rgba(70,130,180,1) 2%, rgba(253,245,230,1) 10%, rgba(70,130,180,1) 20%, rgba(70,130,180,1) 80%, rgba(47,79,79,0) 100%);
  color: oldlace;
  /*padding: 16px;*/
  font-size: 32px;
  border: solid;
  border-color: oldlace;
  border-width: 2px 1px 2px 1px;
  border-radius: 7px;
  border-style: ridge;
  cursor: pointer;
float: right;
}

.dropdown-content {
  display: none;
  position: relative;
  right: 0;
  background-color: #f9f9f9;
  min-width: auto;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
  overflow: visible;
}

.hamburger:hover .dropbtn {
background-color: rgba(70,130,180,0);
background-image: linear-gradient(rgba(64,108,108,1) 2%,
 rgba(253,245,230,1) 10%, rgba(64,108,108,1) 20%,
 rgba(64,108,108,1) 80%, rgba(64,108,108,0) 100%);
}

.hamburger:hover .dropdown-content{
clear: right;
display: block;
overflow: visible;
z-index: 2;
}



.videopage {
margin: 0px;
padding: 5px;
}

.lastpage {
margin: 0px;
padding: 5px;
}

.foot{
bottom: 0;
left: -15px;
margin: 350px 0px 0px 0px;
padding: 10px;
background-color: rgba(47,79,79,0);
background-image: linear-gradient(rgba(253,245,230,0) 5%, rgba(47,79,79,1) 15%, rgba(47,79,79,1) 90%, rgba(253,245,230,1) 100%);
position: absolute;
clear: both;
display: block;
height: 100px;
width: 102%;
overflow: visible;
text-align: center;
z-index: 0;
}

ul {
display: block;
margin: 0;
padding: 0;
list-style-type: none;
text-align: left;
}

li a{
display: block;
padding: 10px;
background-color: darkslategrey;
color: oldlace;
clear: right;
overflow: auto;
text-align: center;
border-style: ridge;
border-color: rgb(64,108,108);
border-width: 0px 3px 3px 3px;
border-radius: 3px;
text-decoration: none;
}

li a:hover{
background-color: rgb(64,108,108);
border-color: darkslategrey;
}



h3 a {
text-align: center;
text-decoration: none;
color: oldlace;
background-color: darkslategrey;
border-style: hidden;
border-radius: 8px;
/*width: 100%;*/
display: block;
padding: 8px;
padding-left: auto;
padding-right: auto;
margin-left: auto;
margin-right: auto;
}

h3 a:hover{
color: black;
background-color: cadetblue;
}



p {
text-align: center;
font-family: arial;
font-size: 20px;
margin: 0px 0px 40px 0px;
}

video {
display: block;
margin-top: 15px;
margin-left: auto;
margin-right: auto;
}