#menu-toggle {
  display: block;
  position: absolute;
  top: 11px;
  left: -43px;
  width: 32px;
  height: 32px;
  line-height: 32px;
  text-align: center;
  z-index: 2;
  background: rgba(148, 233, 255, 0.5);
}

#menu-wrap {
  position: fixed;
  top: 0;
  right: 0;
  width: 66vw;
  height: 100vh;
  transition: 0.3s transform, 0.3s -ms-transform, 0.3s -webkit-transform;
  -webkit-transform: translateX(66vw);
  -ms-transform: translateX(66vw);
  transform: translateX(66vw);
}

#menu-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.33);
  transition: 0.3s transform, 0.3s -ms-transform, 0.3s -webkit-transform;
  -webkit-transform: translateX(0);
  -ms-transform: translateX(0);
  transform: translateX(0);
  z-index: 1;
}

#site-header {
  height: 30vw;
  background: url(../media/menubgk.png) no-repeat;
  background-size: 100% auto;
}

#site-header, #site-content, #site-footer {
  transition: 0.3s transform, 0.3s -ms-transform, 0.3s -webkit-transform;
}

body.menu-opened #menu-wrap {
  -webkit-transform: translateX(0);
  -ms-transform: translateX(0);
  transform: translateX(0);
}

body.menu-opened #menu-wrap #menu-backdrop {
  -webkit-transform: translateX(-34vw);
  -ms-transform: translateX(-34vw);
  transform: translateX(-34vw);
}

#site-nav {
  display: flex;
  justify-content: center;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  flex-direction: column;
  background: white;
  font-size: 2rem;
  z-index: 3;
  align-items: center;
}

#site-nav a {
  margin: 5px;
  padding-left: 0;
  padding-right: 0;
  padding-bottom: 0.5rem;
  line-height: 32px;
  flex: none;
  color: #212121;
  width: min-content;
  white-space: nowrap;
}

#site-nav a:hover {
  background-image: url(../media/hover.png);
  background-repeat: repeat-x;
  background-position: 100% 100%;
  padding-bottom: 0.5rem;
  white-space: nowrap;
}

#site-nav .icon {
  padding-bottom: 0.5rem;
}

#site-nav .icon:hover {
  padding-bottom: 0rem;
}

#site-nav .logo {
  padding-bottom: 0.5rem;
}

#site-nav .logo:hover {
  padding-bottom: 0rem;
}

#site-nav .weather {
  padding-bottom: 0.5rem;
}

#site-nav .weather:hover {
  padding-bottom: 0rem;
}

#site-nav .social {
  margin: 11px;
}

#site-nav .icon {
  margin: 11px;
  padding: 0 0px;
  line-height: 32px;
  width: 3.5rem;
  flex: none;
  color: #212121;
}

#site-nav .logo {
  margin: 11px;
  padding: 0 0px;
  line-height: 32px;
  flex: none;
  color: #212121;
}

#site-nav .logo img{
  width: 15rem;
}

#site-nav .weather {
  margin: 11px;
  padding: 0 0px;
  line-height: 32px;
  flex: none;
  color: #13D2DF;
}

#site-nav .weather img{
  width: 3.5rem;
  padding-bottom: 0.6rem;
}

section.intro .slide .content {
  position: absolute;
  top: 18vw;
  width: 100%;
  color: #ffffff;
  text-align: right;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  z-index: 4;
}

section.intro .slide .content img {
  width: 30%;
  max-width: 640px;
  height: auto;
}

body {
  padding-top: 18vw; /*30kell*/
}

section.intro .slide .background {
  margin-top: -12vw;
  z-index: 2;
}

section.intro .intro-txt {
  position: relative;
  bottom: 57%;
  left: 7%;
  text-align: left;
  font-size: 2rem;
  color: #052755;
  font-weight: bold;
  z-index: 3;
}

.row {
  flex-direction: row;
  flex-wrap: wrap;
  margin-left: 0;
  margin-right: 0rem;
  padding-left: 10%;
  padding-right: 10%;
}

.col-md-2 {
  flex: 0 0 48%;
  background: url(../media/box.png) no-repeat;
  background-size: 100% 100%;
  margin-top: 2rem;
  margin-bottom: 2rem;
  margin-left: 1%;
  margin-right: 1%;
  padding-top: 2rem;
  padding-bottom: 2rem;
  padding-left: 2rem;
  padding-right: 2rem;
  width: 30%;
  max-width: 48%;
  font-size: 2rem;
  text-align: left;
}

.col-md-2 ul a{
  font-size: 2rem;
  color: #052755;
  text-decoration: none;
}

#site-content .pth{
  position: absolute;
  top: 23vw;
  left: 6vw;
}

#site-content .title{
  text-align: center;
  padding-top: 12vw;
}

section.intro2 .picbox{
  flex: none;
}

section.intro2  .picbox .pic {
  width: 100%;
  margin-bottom: 1rem;
}

section.intro2  .picbox .pic img{
  width: 100%;
  height: auto;
}

section.intro2  .picbox .pictext {
  width: 100%;

}

section.gallery .pics {
  padding-bottom: 10vw;
}

section.gallery .pics img{
  width: 100%;
}

section.gallery .pic-info .prev{
  left: 14.4vw;
}

section.gallery .pic-info .prev img{
  width: 1.5rem;
}

section.gallery .pic-info .next{
  left: 82.5vw;
}

section.gallery .pic-info .next img{
  width: 1.5rem;
}

section.gallery .pic-info .pic-txt{
  left: 18.7vw;
  width: 62.2vw;
}

section.gallery .pic-info .pic-txt-box{
  font-size: 1.5rem;
}

section.gallery .pic-info .pic-txt .pic-txt-box h3{
  font-size: 1.5rem;
}

section.gallery .pic-border {
  margin-top: -1rem;
}

section.boxes .box .box-content {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  padding-right: 0%;
  padding-left: 0%;
}

section.boxes .box .box-content .box-content-txt {
  width: 100%;
  color: #0480d5;
  text-align: justify;
  padding-left: 3rem;
  padding-right: 3rem;
  font-size: 1.5rem;
}

section.boxes .box .box-content .box-content-img {
  width: 85%;
  margin-left: 2.5%;
  margin-right: 2.5%;
}

section.boxes .box .box-content .box-content-img img{
  width: 100%;
}

section.boxes .box .box-content .box-content-arrow {
  width: 9.5%;
  height: 56.4vw;
}

section.boxes .box .box-content .box-content-arrow .arrow-next img{
  width: 100%;
  height: 27.2vw;
  margin-bottom: 1vw;
}

section.boxes .box .box-content .box-content-arrow .arrow-prev img{
  width: 100%;
  height: 27.2vw;
  margin-top: 1vw;
}

section.boxes .pic-border {
  width: 100%;
  margin-top: 0rem;
}

section.boxes .pic-border img{
  width: 100%;
}

section.boxes .slick-list{
  height: auto !important;
}

section.boxes2 .box .box-content {
  display: flex;
  flex-direction: column-reverse;
  flex-wrap: wrap;
  align-items: center;
  padding-right: 0%;
  padding-left: 0%;
}

section.boxes2 .box .box-content .box-content-txt {
  width: 100%;
  text-align: justify;
  padding-left: 3rem;
  padding-right: 3rem;
  font-size: 1.5rem;
}

section.boxes2 .box .box-content-txt-box .deco{
  text-align: center;
  margin-bottom: 3rem;
}

section.boxes2 .box .box-content .box-content-img {
  width: 95%;
  margin-left: 2.5%;
  margin-right: 2.5%;
  margin-bottom: 3rem;
}

section.boxes2 .box .box-content .box-content-img img{
  width: 100%;
}

section.miniboxes .box .box-content .box-content-img {
  width: 100%;
  margin-bottom: 3rem;
}

section.miniboxes .box .box-content .box-content-img img{
  width: 100%;
}

section.boxes2 .box .box-content .box-content-txt {
  font-size: 1.5rem;
}

section.boxes2 .box .box-content .box-content-txt h2{
  font-size: 3rem;
}

.pic-border2 {
  position: relative;
  width: 100%;
  margin-top: -13vw;
  z-index: 5;
}

section.boxes2 .pic-border img{
  width: 100%;
}

section.boxes2 .slick-list{
  height: auto !important;
}

section.boxes3 {
  padding-top: 12vw;
}

section.boxes3 .box {
  margin-left: 6vw;
  margin-right: 6vw;
  margin-bottom: 3rem;
}

section.boxes3 .box .box-content {
  display: flex;

  align-items: center;
  padding-right: 0%;
  padding-left: 0%;
}

section.boxes3 .box .box-content .box-content-txt {
  width: 60%;
  color: #052755;
  text-align: justify;
  padding-left: 3rem;
  padding-right: 3rem;
  font-size: 1.5rem;
}

section.boxes3 .box .box-content .box-content-img {
  width: 40%;
  margin-bottom: 3rem;
}

section.boxes3 .box .box-content .box-content-img img{
  width: 100%;
}

section.boxes3 .box .box-content .box-content-arrow {
  width: 9.5%;
  height: 56.4vw;
}

section.boxes3 .pic-border {
  width: 110%;
  margin-top: 0rem;
  margin-left: -5vw;
}

section.boxes3 .pic-border img{
  width: 100%;
}

section.boxes3 .slick-list{
  height: auto !important;
}

section.events .slide .background {
  margin-top: -10vw;
  margin-bottom: -10vw;
}

section.events .slide .content {
  position: absolute;
  top: 10vw;
  width: 100%;
  color: #ffffff;
  text-align: right;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  z-index: 4;
}

section.events .slide .content img {
  width: 30%;
  max-width: 640px;
  height: auto;
}

section.events .intro-txt {
  position: relative;
  bottom: 65%;
  left: 7%;
  text-align: left;
  font-size: 2rem;
  color: #052755;
  font-weight: bold;
  z-index: 3;
}

#site-footer a:hover {
  background-image: url(../media/hover.png);
  background-repeat: repeat-x;
  background-position: 100% 100%;
  padding-bottom: 1.2rem;
  white-space: nowrap;
}