* { box-sizing: border-box }

@font-face {
   font-family: Merienda;
   src: url(merienda.ttf);
}

html, body { height: 100% }

body {
   margin: 0;
   background: black;
}

.wrapper {
   height: 100%;
   font-family: Arial, Helvetica, sans-serif;
   display: flex;
   flex-direction: column;
}

h1 {
   font-family: Merienda, cursive;
   font-size: 3em;
}
h2 { font-size: 2em }
h3 { font-size: 1.3em }
h4 { font-size: 1.15em }

p, h1, h2, h3, h4, ul, ol, label, input, textarea, .packages, .gallery, form {
   margin: 8px auto;
   padding: 0 8px;
   max-width: 800px;
}

h1, h3, h4 { margin: 16px auto }

.container {
   /*margin: 0 0 0 14em;*/
   flex: 1;
   display: flex;
   flex-direction: column;
}

.content {
   flex: 1;
   width: 100%;
   /*padding: 0.67em;*/
}

.container > .content {
   margin: auto;
   /*max-width: 800px;*/
}

.hero {
   flex: 1;
   display: flex;
   background: url(landing-bg.jpg);
   background-size: cover;
}

.hero .content {
   display: flex;
   flex-direction: column;
   justify-content: center;
   background: rgba(0, 0, 0, 0.5);
   color: white;
   text-align: center;
   overflow: hidden;
}

.heroheader {
   width: 100%;
   max-width: 100%;
   height: 75vh;
   line-height: 75vh;
   margin: 0;
   text-align: center;
   position: relative;
   padding-bottom: 150px;
   margin-bottom: -150px;
   color: white;
   font-size: 3.1415em;
}

.bg {
   position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   overflow: hidden;
   clip-path: rect(auto auto auto auto);
   z-index: -1;
}
.bg::before {
   content: '';
   position: fixed;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   background-size: cover;
   background-position: center;
}
#what .bg::before { filter: brightness(67%) }
.heroheader::after {
   content: '';
   position: absolute;
   top: 0;
   right: 0;
   bottom: 150px;
   left: 0;
   background-image: url(/wood.png);
   background-position: bottom;
}

.sec {
   position: relative;
   background-color: #EFD;
   color: #000;
   margin-top: 150px;
   padding: 0 8px 32px;
   z-index: 1;
   background-image: url(/wood.png);
}

.sec::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   transform: translateY(-100%);
   height: 150px;
   background-image: url(/wood.png), url(/crowd.png);
   background-size: auto 150px;
   background-position: center bottom;
}

.teal {
   background-color: #066;
   color: white;
}
.teal::before { background-image: url(/wood.png), url(/crowd-teal.png) }

.logo {
   max-width: 33%;
   max-height: 20vh;
   position: absolute;
   margin: 16px;
   top: 0;
   left: 0;
   z-index: 3;
   background: #066;
   border-radius: 8px;
   padding: 8px;
}

#what .bg::before { background-image: url(/gallery/img15.jpg) }
#who .bg::before { background-image: url(/gallery/img4-bg.jpg) }
#pricing .bg::before { background-image: url(/gallery/img21.jpg) }

.hero a { color: yellow }

.hero ul { padding: 0 }

.packages { padding: 0 }
.packages, .packages a { border: 1px solid gray }
.packages a {
   display: block;
   color: inherit;
   text-decoration: none !important;
   padding: 8px;
}
.packages a:hover { background: #CFC }
.packages a:active { background: palegreen }
.packages a::after {
   content: '';
   clear: both;
   display: block;
}

.packages img {
   height: 8em;
   float: left;
   margin-right: 8px;
}

.gallery {
   width: 100%;
   height: 67vh;
   background: black;
   padding: 0;
   position: relative;
}
#gscroll {
   height: 100%;
   display: flex;
   scroll-snap-type: x mandatory;
   overflow: auto;
}

.gallery button {
   margin: auto 8px;
   position: absolute;
   top: 0;
   bottom: 0;
   width: 32px;
   height: 32px;
   border-radius: 50%;
}
#galprev { left: 0 }
#galnext { right: 0 }

.gallery img, .gallery video {
   width: 100%;
   height: 100%;
   flex: none;
   object-fit: contain;
   scroll-snap-align: start;
}

footer {
   padding: 1em;
   background-color: #1b2f36;
   background-image: url(wood.png);
   color: cornsilk;
   fill: cornsilk;
   box-shadow: 0 0 1em black;
   text-align: center;
}

.icon {
   margin: auto;
   max-width: 100%;
}

footer svg {
   vertical-align: -30%;
   height: 1.67em;
}
.contacts {
   margin-bottom: 1em;
}
.contacts span {
   margin: 0 0.5em;
   white-space: nowrap;
}
footer a { color: cornsilk }

img { vertical-align: bottom }

a { text-decoration: none }
a:hover:not(:active) { text-decoration: underline }

ul, ol {
   padding-left: 40px;
   list-style: none;
}
li::before {
   position: absolute;
   transform: translateX(-100%);
   padding-right: 8px;
   font-weight: bold;
}
ul > li::before { content: '\2022' }
ol { counter-reset: ol 0 }
ol > li { counter-increment: ol }
ol > li::before { content: counter(ol) '.' }

p + ul, p + ol { margin-top: -8px }

hr {
   margin: 16px auto;
   border: 1px solid gray;
   max-width: 800px;
}

form::after {
   content: '';
   display: block;
   clear: both;
}

label, input:not([type="submit"]), textarea {
   display: block;
   width: calc(100% - 16px) !important;
}
.required::after { content: ' *' }

.reqindicator, .required::after {
   color: red;
   font-weight: bold;
}

.reqindicator {
   float: right;
   font-size: 0.8em;
}

.question {
   font-size: 1.2em;
   margin-bottom: 8px;
}

.success {
   font-weight: bold;
   background-color: green;
   color: white;
   padding: 8px;
   border-radius: 8px;
   margin: 8px;
}
.failure {
   font-weight: bold;
   background-color: red;
   color: white;
   padding: 8px;
   border-radius: 8px;
   margin: 8px;
}

input, textarea { padding: 8px }
input:not([type="submit"]), textarea { margin: -8px 8px 4px }
input[type="submit"] {
   float: left;
   display: block;
   border: 1px solid black;
   border-radius: 8px;
   background: gainsboro;
   color: black;
}

.cta {
   position: absolute;
   right: 8px;
   top: calc(75vh - 100px);
   z-index: 2;
   transform: translateY(-100%);
   width: 67%;
   max-width: 600px;
   font-size: 1rem;
   color: white;
   padding: 8px;
   border: medium solid gold;
   border-radius: 8px;
   background: #1b2f36;
   /*animation: cta 3.14159s;*/
   text-align: center;
}
.highlighted {
   display: inline-block;
   padding: 8px;
   border-radius: 16px;
   font-size: 3em;
   font-family: "Times New Roman", Times, serif;
   background: gold;
   color: black;
   font-weight: bold;
}
.cta a {
   text-decoration: none !important;
   color: black;
   display: inline-block;
   margin: 0 8px 8px;
   border: 1px solid black;
   padding: 8px;
   border-radius: 8px;
   background: gainsboro;
   float: left;
}
.cta a:hover, input[type="submit"]:hover { background: silver }
@keyframes cta {
   0%, 95% { opacity: 0; pointer-events: none }
   100% { opacity: 1; pointer-events: initial }
}