/* --- Reset --- */
* {
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
   padding: 0px;
   margin: 0px;
}

html,
body {
   height: 100%;
   width: 100%;
}

body {
   font-family: "Inter", sans-serif;
   font-weight: 300;
   background-color: #ebebee;
   color: black;
   padding-top: 80px;
}

::-webkit-input-placeholder,
:-moz-placeholder,
::-moz-placeholder,
:-ms-input-placeholder {
   color: #999;
   font-family: "Inter", sans-serif;
   font-weight: 300;
}

p {
   font-size: 18px;
}

a:hover,
input,
textarea,
select,
button {
   -webkit-transition: 0.5s;
   transition: 0.5s;
   -webkit-appearance: none;
   appearance: none;
   border-radius: 0px;
   font-family: "Inter", sans-serif;
}

/* --- Variables --- */
:root {
   --main-bg-color: #13213E;
   --main-bg-color-hov: #070c16;
   --main-bg-text-color: #fff;
   --main-bg-text-color-hov: #fff;
}


.navy {
   color: #13213E;
}

.green {
   color: #5CDAB2;
}

.green-adapted {
   color: #1D8163;
}

/* --- Main styles --- */
.inner {
   max-width: 1400px;
   width: 100%;
   display: block;
   margin: 0 auto;
}

header {
   width: 100%;
   background-color: #13213E;
   position: fixed;
   left: 0;
   top: 0;
   box-shadow: 0 2px 4px 0 rgb(0 0 0 / 8%);
   z-index: 300;
}

header .inner {
   display: flex;
   justify-content: space-between;
}

header .logo {
   display: flex;
   align-items: center;
}

header .logo img {
   max-width: 300px;
   max-height: 80px;
   display: inline-block;
   padding: 15px;
}

header .links {
   padding: 10px;
   display: flex;
   justify-content: center;
   align-items: center;
}

header .links p {
   font-size: 18px;
   font-weight: bold;
   color: white;
}

footer {
   background-color: #13213E;
   color: white;
   padding: 30px 0;
}

footer .inner .copy {
   font-size: 18px;
}

footer .inner .address {
   font-size: 15px;
   margin-top: 10px;
}

.main {
   padding: 100px 0;
}

.main h1 {
   font-size: 50px;
   font-weight: bold;
}

.btn {
   margin-top: 30px;
   padding: 20px;
   font-size: 20px;
   background-color: var(--main-bg-color);
   color: var(--main-bg-text-color);
   border: none;
   outline: none;
   border-radius: 3px;
   cursor: pointer;
   display: inline-block;
   text-decoration: none;
}

.btn:hover {
   background-color: var(--main-bg-color-hov);
   color: var(--main-bg-text-color-hov);
}

#map {
   height: 700px;
   margin-top: 50px;
}

.contact {
   padding: 150px 0;
}

.contactForm {
   max-width: 600px;
   width: 100%;
   margin-top: 30px;
}

.contactForm input[type="text"],
.contactForm input[type="email"],
textarea {
   width: 100%;
   padding: 20px;
   font-size: 20px;
   border: solid 1px #ccc;
   border-radius: 3px;
   outline: none;
   resize: none;
}

.contactForm input[type="text"]:focus,
.contactForm input[type="email"]:focus,
textarea:focus {
   border: solid 1px #0099cc;
}

.contactForm input[type="submit"] {
   background-color: var(--main-bg-color);
   color: var(--main-bg-text-color);
   padding: 20px;
   min-width: 280px;
   border-radius: 10px;
   font-size: 20px;
   border: none;
   outline: none;
   font-weight: bold;
   cursor: pointer;
}

.contactForm input[type="submit"]:hover {
   background-color: var(--main-bg-color-hov);
   color: var(--main-bg-text-color-hov);
}

.contactForm textarea {
   height: 200px;
}

.contactForm label {
   display: block;
   margin-top: 10px;
   margin-bottom: 3px;
}

.contactForm .turnstile {
   height: 72px;
   margin-top: 10px;
   margin-bottom: 10px;
}

/* --- Privacy policy --- */
.privacy h1 {
   font-size: 60px;
   margin-bottom: 10px;
}

.privacy h2 {
   font-size: 35px;
   margin-top: 30px;
   margin-bottom: 5px;
}

.privacy p {
   font-size: 20px;
}

.privacy p+p {
   margin-top: 20px;
}

.privacy li {
   font-size: 20px;
   margin-top: 10px;
   margin-bottom: 10px;
}

.privacy ul {
   margin-left: 50px;
}

.light {
   background-color: white !important;
   color: black !important;
}

.dark {
   background-color: #ebebee !important;
   color: black !important;
}

section {
   padding: 150px 0;
}

.hero {
   background-color: black;
   color: white;
   background-image: url('assets/people.jpg');
   background-size: cover;
   background-position: center;
   text-align: center;
   min-height: 400px;
   height: 60vh;
   padding: 0 !important;
}

.hero .cover {
   padding: 150px 0;
   display: flex;
   justify-content: center;
   align-items: center;
   height: 100%;
   width: 100%;
   background-color: rgba(0, 0, 0, 0.4);
   backdrop-filter: blur(5px);
   -webkit-backdrop-filter: blur(5px);
}

.hero h1 {
   font-size: 60px;
}

.hero p {
   max-width: 800px;
   width: 100%;
   display: block;
   margin: 10px auto;
}

.together .inner {
   display: flex;
   gap: 50px;
   flex-direction: row;
   align-items: center;
}

.together .inner .image img {
   width: 100%;
}

.together .inner .image {
   flex: 1;
}

.together .inner .text {
   flex: 1.5;
}

.touchBottom {
   padding-bottom: 0 !important;
}

.touchBottom .inner .text {
   padding-bottom: 150px !important;
}

input[type="text"],
input[type="tel"],
input[type="email"],
input[type="password"],
input[type="number"] {
   border: solid 1px #ccc;
   padding: 20px;
   font-size: 20px;
   width: 100%;
   border-radius: 3px;
}

label {
   display: block;
   margin-top: 20px;
   margin-bottom: 3px;
}

button,
input[type="submit"] {
   padding: 20px;
   background-color: var(--main-bg-color);
   color: var(--main-bg-text-color);
   cursor: pointer;
   border-radius: 3px;
   font-weight: bold;
   border: none;
   min-width: 180px;
   padding: 20px;
   font-size: 20px;
}

button:hover,
input[type="submit"]:hover {
   background-color: var(--main-bg-color-hov);
   color: var(--main-bg-text-color-hov);
}

.description {
   background-color: white;
}

.description p {
   color: #555555;
}

h2 {
   font-size: 32px;
   font-weight: bold;
   margin-bottom: 20px;
   color: #1D8163;
}

p {
   font-size: 20px;
}

p+p {
   margin-top: 30px;
}

.logosShown {
   display: flex;
   gap: 30px;
   align-items: center;
   justify-content: center;
   margin-top: 20px;
}

.logosShown img {
   max-width: 180px;
   height: auto;
}

.form {
   text-align: center;
}

ul {
   margin-top: 40px;
   margin-bottom: 40px;
   margin-left: 40px;
   font-size: 20px;
}

ul li {
   font-size: 20px;
}

.contact {
   padding: 50px 0 !important;
}


form {
   max-width: 600px;
   width: 100%;
   display: block;
   margin: 0 auto;
   text-align: center;
}

form label {
   text-align: left;
   display: inline-block;
   width: 100%;
   margin-bottom: 5px;
}

form .legal {
   font-size: 14px;
   margin: 30px 0;
}

.turnstile {
   height: 72px;
   margin-top: 20px;
}


.events {
   background-color: white;
}

.eventHolder {
   display: flex;
   margin-top: 50px;
   gap: 50px;
}

.event {
   background-color: white;
   box-shadow: 0 2px 4px 0 rgb(0 0 0 / 8%);
   border: solid 1px #ccc;
   border-radius: 10px;
   overflow: hidden;
   width: 100%;
}

.event img {
   max-width: 100%;
   width: auto;
   max-height: 400px;
}

.event .title {
   font-size: 24px;
   font-weight: bold;
}

.event .location {
   padding: 15px 0;
}

.event .summary {
   font-size: 18px;
}

.event button,
.event .btn {
   padding: 15px 30px;
   background-color: #13213E;
   border: none;
   font-size: 18px;
   border-radius: 10px;
   margin-top: 30px;
   width: 100%;
   font-weight: bold;
   cursor: pointer;
   color: white;
   display: inline-block;
   text-decoration: none;
   text-align: center;
}

.event ul {
   margin-top: 10px;
   margin-bottom: 10px;
}

.event ul li {
   font-size: 16px;
}

.event ul li + li {
   margin-top: 10px;
}

.event p {
   font-size: 16px;
}

.event button[disabled],
.event .btn[disabled] {
   background-color: grey !important;
   cursor: not-allowed;
}

.event .content {
   padding: 30px;
}

.event span+i {
   margin-left: 10px;
}












/* --- Animation --- */
.animate-in {
   opacity: 0;
   transform: translateY(150px);
   transition: opacity 1s ease, transform 1s ease;
}

.animate {
   opacity: 1;
   transform: none;
}


/* Small desktop sizing issues --- */
@media only screen and (max-width: 1410px) {
   .inner {
      width: 100%;
      padding: 0 20px;
   }

   header .inner {
      padding: 0;
   }

}

/* --- Mobile styles --- */
@media only screen and (max-width: 800px) {
   header {
      position: relative !important;
      left: auto;
      top: auto;
      width: 100%;
      display: inline-block;
   }

   body {
      padding-top: 0;
   }

   section {
      padding: 50px 0;
   }

   .together .inner, .eventHolder, footer .columns, .logosShown {
      flex-direction: column;
   }

   header .links {
      display: none;
   }

   footer .bottom .legal {
      float: none;
      margin-top: 10px;
   }

   .hero {
      height: auto !important;
      min-height: calc(100vh - 80px);
      margin-top: -3px;
   }

}