* { box-sizing: border-box; margin: 0; padding: 0;}

body { font-family: EuclidSquare, sans-serif; background: white; color: black; line-height: 1.4; font-weight: 600;}

@font-face {font-family: EuclidSquare; src: url('fonts/EuclidSquare-Regular-WebS.woff2') format('woff2'), url('fonts/EuclidSquare-Regular-WebS.woff') format('woff');}
@font-face {font-family: EuclidSquare; src: url('fonts/EuclidSquare-Semibold-WebS.woff2') format('woff2'), url('fonts/EuclidSquare-Semibold-WebS.woff') format('woff'); font-weight: 700;}
@font-face {font-family: EuclidSquare; src: url('fonts/EuclidSquare-RegularItalic-WebS.woff2') format('woff2'), url('fonts/EuclidSquare-RegularItalic-WebS.woff') format('woff'); font-style: italic;}
@font-face {font-family: EuclidSquare; src: url('fonts/EuclidSquare-SemiboldItalic-WebS.woff2') format('woff2'), url('fonts/EuclidSquare-SemiboldItalic-WebS.woff') format('woff'); font-weight: 700; font-style: italic;}

#wrapper-slideshow{height: 100vh; width: 100vw; overflow: hidden; position: relative;}
#logo{position: absolute; top: 0; z-index: 1; width: 50%; background-color: none; padding: 1em 1.25em; color: white; line-height: 1.2;}
#claim{position: absolute; top: 0; left: 50%; z-index: 1; width: 50%; background-color: none; padding: 1em 0.5em; padding-right: 1.3em; color: white; line-height: 1.2;}
#contact1{position: static; float: left; width: 50%; padding: 1em 1.25em; z-index: 1; color: black; line-height: 1.2;}
#contact2{position: static; float: left; width: 50%;  padding: 1em 0.5em; padding-right: 1.3em; z-index: 1; color: black; line-height: 1.2;}

#wrapper-about {background-color:white; padding-top: 3em; padding-bottom: 9em;}
#about {max-width: 750px; position: center; margin-left: auto; margin-right: auto; padding-left:1.5em; padding-right:1.5em;}
img{width: 100%; height: auto;}

h1 {font-size: 25px; font-weight: bold;}
h2 {font-size: 25px; padding-top: 2em; padding-bottom: 0em; font-weight: 600; text-indent: 3em;}
h3 {font-size: 25px; padding-top: 1em; padding-bottom: 0em; font-weight: 600; padding-left: 2em;}

p{font-size: 25px; font-weight: 600;}
p+p{padding-top:0em; text-indent: 3em;}
ul{padding-left: 3em; font-size: 25px;}
ul+p{padding-top: 1em;}



.slider { position: relative; overflow: hidden; height: 100%; width: 100%;}
.slide { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 0.4s ease-in-out;}
.slide.current { opacity: 1;}
.slide .content { position: absolute; bottom: 0px; left: -600px; opacity: 0; width: auto; height: auto; background-color: none; color: white; padding: 1.25em; padding-bottom: 1em; font-size: 15px; letter-spacing: 0.5px;}

.slide .content { margin-bottom: 0;}
.slide.current .content { opacity: 1; transform: translateX(600px); transition: all 0.7s ease-in-out 0.3s;}
.buttons button#next { position: absolute; top: 50%; right: 1.25em;}
.buttons button#prev { position: absolute; top: 50%; left: 1.25em;}
.buttons button { border: 0px solid #fff; background-color: transparent; color: #fff; cursor: pointer; padding: 13px 15px; border-radius: 50%; outline: none;}
.buttons button:hover { background-color: #fff; color: #333;}

@media(max-width: 520px) {
  .slide .content {bottom: -300px; left: 0; width: 100%;} 
  .slide.current .content {transform: translateY(-300px);}
  .buttons button { padding: 10px 12px;}
  }

/* Background images */
.slide:first-child {background: url('./images/01.jpg') no-repeat center center/cover;}
.slide:nth-child(2) {background: url('./images/02.jpg') no-repeat center center/cover;}
.slide:nth-child(3) {background: url('./images/03.jpg') no-repeat center center/cover;}
.slide:nth-child(4) {background: url('./images/04.jpg') no-repeat center center/cover;}
.slide:nth-child(5) {background: url('./images/05.jpg') no-repeat center center/cover;}
.slide:nth-child(6) {background: url('./images/06.jpg') no-repeat center center/cover;}
.slide:nth-child(7) {background: url('./images/07.jpg') no-repeat center center/cover;}
.slide:nth-child(8) {background: url('./images/08.jpg') no-repeat center center/cover;}
.slide:nth-child(9) {background: url('./images/09.jpg') no-repeat center center/cover;}
.slide:nth-child(10) {background: url('./images/10.jpg') no-repeat center center/cover;}
.slide:nth-child(11) {background: url('./images/11.jpg') no-repeat center center/cover;}
.slide:nth-child(12) {background: url('./images/12.jpg') no-repeat center center/cover;}
.slide:nth-child(13) {background: url('./images/13.jpg') no-repeat center center/cover;}
.slide:nth-child(14) {background: url('./images/14.jpg') no-repeat center center/cover;}
.slide:nth-child(15) {background: url('./images/15.jpg') no-repeat center center/cover;}
.slide:nth-child(16) {background: url('./images/16.jpg') no-repeat center center/cover;}


a:link { text-decoration: none; color: blue;}
a:visited { text-decoration: none; color: blue;}
a:hover { text-decoration: none; color: black;}
a:active { text-decoration: none; color: black;}



@media (max-width: 770px)
{
h1{font-size: 20px;}
h2{font-size: 20px;}
h3{font-size: 20px;}
h4{font-size: 20px;}
p{font-size: 20px;}
ul{font-size: 20px;}
}

@media (max-width: 860px)
{
#contact1{width:100%;}
#contact2{width:100%;padding: 1.5em; padding-top: 0.2em; padding-left: 1.25em;}
#wrapper-slideshow{height: 100vh; width: 100vw; overflow: hidden; position: relative;}
.buttons button#next { position: absolute; top: 50%;}
.buttons button#prev { position: absolute; top: 50%;}
}

@media (max-width: 520px)
{
h1{font-size: 14px;}
h2{font-size: 14px;}
h3{font-size: 14px;}
h4{font-size: 11px;}
p{font-size: 14px;}
ul{font-size: 14px;}
#contact1{width:100%;}
#contact2{width:100%;padding: 1.5em; padding-top: 0.2em; padding-left: 1.25em;}
#wrapper-slideshow{height: 90vh; width: 100vw; overflow: hidden; position: relative;}
.buttons button#next { position: absolute; top: 45%;}
.buttons button#prev { position: absolute; top: 45%;}
.slide .content { padding-bottom: 1em; font-size: 11px; letter-spacing: 0.75px;}
#wrapper-about {background-color:white; padding-top: 3em; padding-bottom: 6em;}
}