* {box-sizing: border-box}
html {scroll-behavior: smooth}
:root {--maincolor: #DA532C}

body {font-family: "Poppins", sans-serif; font-size: 1em; margin: auto; background-color: #F9FAFA}
a {text-decoration: none; color: #000; transition-duration: 0.25s}
a:hover {color: var(--maincolor)}

nav {position: fixed; width: 100%; background-color: #F9FAFA; padding: 12px; z-index: 1; border-bottom: 2px solid var(--maincolor)}
nav a {padding: 12px 16px}
nav .right {display: none}

h1 {padding: 0; margin: 0}
h2 {color: var(--maincolor)}
span {color: var(--maincolor)}

ul {list-style: none}

ul li::before {
  content: "\2022";
  color: var(--maincolor);
  font-weight: bold;
  display: inline-block;
  width: 1em;
  margin-left: -1em;
}

main {width: 100%}
hr {border: 1px solid var(--maincolor); text-align: right}
.righthr {border-right: 2px solid var(--maincolor); text-align: right}

.container {max-width: 1600px; width: 100%; margin: auto; display: table; padding: 12px}
.half, .third {float: left; width: 100%; padding: 12px}
.quarter {float: left; width: 49.99999%; padding: 12px}

.left {float: left}
.right {float: right}

.siteimg1, .siteimg2 {background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover}

.siteimg1 {background-image: url('../img/AS-1.jpg'); min-height: 300px}
.maintext {padding: 96px}
.maintext h1 {text-transform: uppercase; font-size: 3em; font-weight: 900; color: #F9FAFA}
.maintext h1 div {color: var(--maincolor); display: inline}
.maintext span {background-color: var(--maincolor); color: #F9FAFA}

.siteimg2 {background-image: url('../img/AS-2.jpg'); min-height: 200px}

.contact img {width: 12px; margin-left: 6px}

.gallery img {width: 100%; height: auto; opacity: 0.8}
.gallery img:hover {opacity: 1; transition-duration: 0.25s}
.gallery p {text-align: center; height: 18px}

.modal {display: none; padding-top: 20px; position: fixed; z-index: 2; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: black}
.modal img {width: 100%}
.modalcontent {position: relative; margin: auto; padding: 0; width: 90%; max-width: 1200px}
.slides {display: none}

.close, .prev, .next {position: absolute; padding: 16px; color: white; font-weight: bold; font-size: 35px; z-index: 3}
.close {top: 20px; right: 20px}
.prev, .next {top: 50%; width: auto; margin-top: -50px}
.next {right: 0}

.close:hover, .prev:hover, .next:hover {background-color: rgba(0, 0, 0, 0.8); cursor: pointer; color: var(--maincolor); transition-duration: 0.25s}

.caption {text-align: center; color: white}

#reference p {text-align: justify}

@media (min-width: 900px) {.half {width: 49.99999%} .third {width: 33.33333%} .quarter {width:24.99999%} nav .right {display: block}}
@media (max-width: 900px) {.maintext h1 {font-size: 1.4em} .maintext {padding: 64px; padding-top: 96px} .contact .righthr {border: none} .contact img {display: none}}
@media only screen and (max-device-width: 1600px) {.siteimg1, .siteimg2 {background-attachment: scroll; min-height: 400px}}

input {width: 100%; padding: 8px 16px; box-sizing: border-box; border: 2px solid #CCC; border-radius: 4px; font-family: "Poppins", sans-serif}
input[type=submit] {border: none; color: white; background-color: var(--maincolor); -webkit-appearance: none}

textarea {width: 100%; height: 100px; padding: 8px 16px; box-sizing: border-box; border: 2px solid #CCC; border-radius: 4px; resize: none; font-family: "Poppins", sans-serif}

footer p {float: right}