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

html {
  font-size: 62.5%;
  background-color: #ffffff;
}

a,
h1,
h2,
h3,
h4,
h5,
h6,
p,
small,
text {
  text-decoration: none;
  color: black;
  font-family: Verdana, sans-serif;
}
h4 {
  font-size: 1.6rem;
  margin: 0.5rem;
}
h3 {
  font-size: 2.4rem;
}
h2 {
  font-size: 3rem;
  margin: 1rem;
}
h1{
  font-size: 5rem;
  margin: 1rem;
}
p {
  font-size: 1.6rem;
}
.headtext{
  font-size: 4rem;

}

.text{
 font-size: 2rem ;
}


header {
  width: 100%;
  background-image: linear-gradient(#008080, #00bdbd);
  display: flex;
  flex-direction: row;
  align-items: center;
  height: 175px;
  min-height: 2cm;
  position: fixed;
  z-index: 4;
}

.logo-area {
 padding: 2.2rem;
 height: inherit;
}

.logo-area img{
max-height: 100%;
}

nav {
  width: 80%;
  align-items: center;
  display: flex;
  flex-direction: row;
}

nav ul {
  justify-content: space-around;
  display: flex;
  flex-direction: row;
  width: 100%;
  list-style: none;
}

.first{
  margin-top: 175px;
  z-index: 0;
  height: 55vw ;
}

.page-content {
  min-height: 92vh;
  overflow: hidden;
}

footer {
  height: 76px;
  background-color: #dfdfdf;
  
  align-items: center;
}

footer div {
 padding: 30px;
}

footer p{
  margin-left: 10px;
  margin-right: 10px;
}

.left{
 float: left;
}

.right{
  float: right;
 }
 

.anchor {
  display: block;
  position: relative;
  top: -15vh;
  visibility: hidden;
  align-self: top;
}

.center {
  width: 70%;
  display: flex;
  flex-direction: column;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  padding-top: 15vh;
  padding-bottom: 15vh;

}

.banner {
  background-image: linear-gradient(#008080, #00bdbd);
  margin-top: 0;
  min-height: 20vh;
  align-items: center;
  display: flex;
  flex-direction: column;
  padding: 0 5% 0 5%;
}

.text-field {
  width: 100%;
  margin: 10rem;
  text-align: center;
}

/*
.reverse {
  flex-direction: row-reverse;
}*/

.button {
  background-color: #dfdfdf;
  height: 4.5rem;
  min-width: 20rem;
  border-radius: 2.5rem;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  margin-right: auto;
}

/* flipcards */
/*
.gallery {
  width: 100vw;
  display: flex;
  flex-flow: row wrap;
}

.flipcard {
  height: 50vh;
  width: 46vw;
  background-color: transparent;
  perspective: 100vw;
  margin: 2vw;
}
.flipcard-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: 1.3s;
  transform-style: preserve-3d;
  box-shadow: 0rem 0.7rem 0.5rem 0.5rem grey;
}
.flipcard-front,
.flipcard-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  text-align: center;
}
.flipcard-front {
  background-color: teal;
}
.flipcard-back {
  background-color: tomato;
  transform: rotateY(180deg);
}

.flipcard:hover .flipcard-inner {
  transform: rotateY(180deg);
}

*/



#path_1{
  stroke-width: 6.5px;
  stroke-dasharray: 1180;
  stroke-dashoffset: 0;
  animation: dash 10s linear alternate infinite;
}

#path_2{
  stroke-width: 4px;
  stroke-dasharray: 750;
  stroke-dashoffset: 0;
  animation: dash_2 10s linear alternate infinite;
}

#path_3{
  stroke-width: 4px;
  stroke-dasharray: 680;
  stroke-dashoffset: 0;
  animation: dash_3 10s linear alternate infinite;
}

@keyframes dash {
  from {
    stroke-dashoffset: 1180 ;
  }
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes dash_2 {
  from {
    stroke-dashoffset: 750 ;
  }
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes dash_3 {
  from {
    stroke-dashoffset: 680 ;
  }
  to {
    stroke-dashoffset: 0;
  }
}


#background-video {
  width: 100vw;
  height: 55vw;
  object-fit: cover;

  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: -2;
}

.textovervideo{
  position: relative;
  top: calc(-35vw - 7.5rem);
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  z-index: 0;
  vertical-align: middle;
}
.textovervideo *{
  color:#993300;
}

.image_1{
  width: 100vw;
  height: 65vw;
  object-fit: contain;
  background-size: contain ;
  float: right;
 
}
.textoverimage{
  position: relative;
  top: calc(-32.5vw - 7.5rem);
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  z-index: 0;
  padding: 0 10%;
}
.textoverimage *{
  color: #ffffff;
}

.wrapper{
  justify-content: space-around;
  width: 100%;
  align-items: center;
  display: flex;
  flex-direction: row;
  margin: 5% 0 5% 0;
}



.container{
  background-color: #008080;
}


@media screen and (max-width: 1050px) {
  nav{
    display: none;
  }
  .logo-area{
    
    display: flex;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }
  header{
    position: static;
  }
  .first{
    margin-top: 0px;
  }
  .wrapper{
    flex-direction: column;
    justify-content: center;
  }
  .wrapper *{
    margin: 30px;
  }

  footer div *{

    flex-direction: column;
    
  }

  footer div{
    padding: 37px;
  }

  footer{
    
    height: 100px;
  }

}



@media screen and (max-width: 450px) {
  .textoverimage{
    top:0px;
  }
  .textoverimage *{
    color: black;
  }
  h1{
    font-size: 4rem;
  }
}


textarea{
  width: 100%;
  resize: vertical;
  background-color: #dfdfdf;
  margin: 10px;
  border-radius: 2.5rem;
  padding: 10px;
}

input{
  background-color: #dfdfdf;
  width: 300px;
  float: left;
  flex-direction: column;
  margin: 10px;
  height: 4.5rem;
  border-radius: 2.5rem;
  padding: 10px;
  margin-right: calc( 70vw - 300px );

}

form label{
 float: left;
}

form{
  margin-top: 30px;
}