@charset "UTF-8";

html{
   scroll-behavior: smooth;
/*font-family: 'Yanone Kaffeesatz', sans-serif;*/
}

body{
  /*position: relative;*/
  z-index: 50;
  background-color: #61a656;
  /*background-color:rgba(224, 250, 95, 0.5);*/
}

header{
  width: 98%;
  display: flex;
  justify-content: space-between;
  position: fixed;
  z-index: 100;
  margin-top: 1%;
}


.logo img{
  width: 60%;
}



ul{
  display: flex;
  margin-right: 2%;
}

li{
list-style: none;
}

/*a{
  text-decoration: none;
  font-size: 3vw;
  color: #333;

}*/



.main-content{
  background-color: #fff;

}

.title {
  font-family: 'jost', sans-serif;
  font-size: 5vw;
  text-align: center;
  background-color: rgba(50, 168, 82, 1);
  background-color: #333;
}


.title h3{
  color: #fff;
  font-size: 4vw;
  margin-top: 10%;
  padding: 2% 0%;

}

h4{
  font-size:2.5vw;
  text-align: center;
}

.smalltitle{
  font-size: 3vw;
  color: #fff;
}



.infotop img{
  width: 100%;
  /*margin: 10% 10%;*/
}

.infotop h2{
  color: #333;
  font-size: 5vw;
  text-align: center;
  /*margin-top: -4%;*/
}

.infotop h3{
  width: 50%;
  color: #333;
  color: #fff;
  font-size: 3.5vw;
  text-align: center;
  background-color: #32a852;
  background-color: #333;
  border-radius: 50px;
  margin: 0 auto;
box-shadow: 10px 10px 10px 0px rgba(0, 0, 0, .5);
}


.infotop p{
  font-size: 1.5vw;
  text-align: center;
}


.infotop h4{

}

.infotop02{
  color: #111;
}

.infotop02 h3{
  font-size: 3vw;
  text-align: center;
}

.infotop02 p{
  font-size: 2vw;
}

.client{
  text-align: center;
}

.client p{
  width: 80%;
  font-size: 4vw;
  text-align: left;
  color: #333;
  margin: 10%;
  background-color: rgba(224, 237, 123, .8);
  box-shadow:0px 0px 50px 50px rgba(224, 237, 123, .8); inset;


  border-radius: 50%;

}

.client img{
   padding: 0%;
   width: 55%;
   border: solid 3px #333;
   border-radius: 10px;
   box-shadow: 10px 10px 10px 3px rgba(0, 0, 0, .5);
}


.image img{

}




.topbuttonwrapper{
  width: 100%;
}

.topbuttonwrapper a{
  position: fixed;
  bottom: 3%;
  right: 3%;


  text-decoration: none;
  background-color: rgba(0, 0, 0, 0.6);
  border: 1px solid #888;
  color: #fff;
  font-size: 5vw;
  padding: 10px 20px;
  border-radius: 20px;
  z-index: 100;
}


footer{
  margin-top: 5%;
  padding: 1px;
  background-color: #111;
  color: #fff;
  text-align:center;
}

.footer h1{
  font-size: 3vw;
}

.footer p{
  font-size: 1.5vw;
  text-align: center;
}

.footer a{
  font-size: 1.3vw;
  color: #fff;
}


.sitenav{
  margin-bottom: 5%;
  font-size: 2.8vw;
  margin: 0 0 10% 0;
  background-color: rgba(111, 191, 189, 1);
  text-align: center;
}

.sitenav a{
  text-decoration: none;
  background-color: #555;
  color: #fff;
  padding: 2% 4%;
  margin-left: 2%;
  border-radius: 10px;
  border: 1px solid #fff;
}



.calendar{
}


.infotop img{
  animation-name: fade;
  animation-duration: 4s;
  animation-iteration-count: 1;
}

@keyframes fade{
  0%{
    opacity: 0;
  }
  100%{
    opacity: 1;
  }
}








.next{
  margin:10px 0;
}

.next{
  animation: flash 1s linear infinite;
  margin:20px;
}

@keyframes flash {
  0% {
    opacity: 1;
  }

  50% {
    opacity: 0.3;
  }


  100% {
    opacity: 1;
  }
}



@media screen and (min-width: 1000px) {

  html{
     scroll-behavior: smooth;
     width: 70%;
     margin: 0 auto;
  /*font-family: 'Yanone Kaffeesatz', sans-serif;*/
  }

  body{
    /*position: relative;*/
    z-index: 50;
    background-color: #61a656;
    /*background-color:rgba(224, 250, 95, 0.5);*/
  }

  header{
    width: 98%;
    display: flex;
    justify-content: space-between;
    position: fixed;
    z-index: 100;
    margin-top: 1%;
  }


  .logo img{
    width: 50%;
    margin-left: -40%;
  }



  ul{
    display: flex;
    margin-right: 2%;
  }

  li{
  list-style: none;
  }

  /*a{
    text-decoration: none;
    font-size: 3vw;
    color: #333;

  }*/



  .main-content{
    background-color: #fff;

  }

  .title {
    font-family: 'jost', sans-serif;
    font-size: 5vw;
    text-align: center;
    background-color: rgba(50, 168, 82, 1);
    background-color: #333;
  }


  .title h3{
    color: #fff;
    font-size: 3vw;
    margin-top: 10%;
    padding: 2% 0%;

  }

  h4{
    font-size:1.5vw;
    text-align: center;
  }

  .smalltitle{
    font-size: 2vw;
    color: #fff;
  }



  .infotop img{
    width: 100%;
    /*margin: 10% 10%;*/
  }

  .infotop h2{
    color: #333;
    font-size: 4vw;
    text-align: center;
    /*margin-top: -4%;*/
  }

  .infotop h3{
    width: 50%;
    color: #333;
    color: #fff;
    font-size: 2vw;
    text-align: center;
    background-color: #32a852;
    background-color: #333;
    border-radius: 50px;
    margin: 0 auto;
  box-shadow: 10px 10px 10px 0px rgba(0, 0, 0, .5);
  }


  .infotop p{
    font-size: 1.5vw;
    text-align: center;
  }


  .infotop h4{

  }

  .infotop02{
    color: #111;
  }

  .infotop02 h3{
    font-size: 3vw;
    text-align: center;
  }

  .infotop02 p{
    font-size: 1.5vw;
  }

  .client{
    text-align: center;
  }

  .client p{
    width: 80%;
    font-size: 1.5vw;
    text-align: left;
    color: #333;
    margin: 10%;
    background-color: rgba(224, 237, 123, .8);
    box-shadow:0px 0px 50px 50px rgba(224, 237, 123, .8); inset;


    border-radius: 50%;

  }

  .client img{
    padding: 1%;
    width: 40%;
     border: solid 3px #333;
     border-radius: 10px;
     box-shadow: 10px 10px 10px 3px rgba(0, 0, 0, .5);
  }


  .image img{

  }




  .topbuttonwrapper{
    width: 100%;
  }

  .topbuttonwrapper a{
    position: fixed;
    bottom: 3%;
    right: 3%;


    text-decoration: none;
    background-color: rgba(0, 0, 0, 0.6);
    border: 1px solid #888;
    color: #fff;
    font-size: 5vw;
    padding: 10px 20px;
    border-radius: 20px;
    z-index: 100;
  }


  footer{
    margin-top: 5%;
    padding: 1px;
    background-color: #111;
    color: #fff;
    text-align:center;
  }

  .footer h1{
    font-size: 3vw;
  }

  .footer p{
    font-size: 1.5vw;
    text-align: center;
  }

  .footer a{
    font-size: 1.3vw;
    color: #fff;
  }


  .sitenav{
    margin-bottom: 5%;
    font-size: 2.8vw;
    margin: 0 0 10% 0;
    background-color: rgba(111, 191, 189, 1);
    text-align: center;
  }

  .sitenav a{
    text-decoration: none;
    background-color: #555;
    color: #fff;
    padding: 2% 4%;
    margin-left: 2%;
    border-radius: 10px;
    border: 1px solid #fff;
  }








  .infotop img{
    animation-name: fade;
    animation-duration: 4s;
    animation-iteration-count: 1;
  }

  @keyframes fade{
    0%{
      opacity: 0;
    }
    100%{
      opacity: 1;
    }
  }








  .next{
    margin:10px 0;
  }

  .next{
    animation: flash 1s linear infinite;
    margin:20px;
  }

  @keyframes flash {
    0% {
      opacity: 1;
    }

    50% {
      opacity: 0.3;
    }


    100% {
      opacity: 1;
    }
  }

}