@charset "UTF-8";

#about {
  width: 100%;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

#about p {
  width:50%;
  font-size: 21px;
  color:#111;
  margin: 40px 0;
}

@media screen and (max-width:1000px) {
  #about p { width:70%;}
}

@media screen and (max-width:600px) {
  #about p { width:80%;}
}

#about p a {
  font-size:inherit;
  color:#b3bc6d;
  cursor: pointer;
  transition: all 200ms;
  text-decoration: none;
}

#about p a:hover {
  color:#888;
}

#about p.full-txt {
  font-size: 21px;
  color:#000;
  margin-bottom:20px;

  display: none;
}

#sport {
  width:100%;

  display: flex;
  flex-direction: column;
  align-items: center;
}

#sport h2 {
  margin-bottom:60px;
}

#sport .boxes {
  width:100%;

  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
}

#sport .boxes .box {
  width:25%;
  padding-top:25%;
  position: relative;

  overflow: hidden;
  vertical-align: middle;
}

@media screen and (max-width:1250px) {
  #sport .boxes .box {width:calc(100% / 3);padding-top:calc(100% / 3);}
}

@media screen and (max-width:690px) {
  #sport .boxes .box {width:calc(50%);padding-top:50%;}
}

@media screen and (max-width:500px) {
  #sport .boxes .box {width:calc(100%);padding-top:100%;}
}

#sport .boxes .box img {
  width:120%;
  position: absolute;
  top:0;left:0;

  cursor: pointer;

  filter: brightness(.8);
  transform:scale(1.2);

  transition: all 700ms cubic-bezier(0.51, 0.04, 0.12, 0.99);
}

#sport .boxes .box h2 {
  color:#fff;
  cursor: pointer;
  text-align: center;

  width:70%;
  text-transform: uppercase;

  position: absolute;
  top: 50%;left:50%;
  transform:translate(-50%, -50%);

  transition: all 700ms cubic-bezier(0.51, 0.04, 0.12, 0.99);
}

#sport .boxes .box a:hover > img {
  transform:scale(1);
  filter: brightness(1);
}

#sport .boxes .box a:hover > h2 {
  opacity: 0;
}

#wellness {
  display: flex;
  flex-direction: column;
  align-items: center;

  padding:60px 0;
  width:80%;
  margin: 0 auto;
}

#wellness h2 {
  padding-bottom: 60px;
}

#wellness .grid {
  width:100%;
  height:initial;

  display:flex;
  flex-flow:row wrap;
}

#wellness .grid .half {
  min-height:100%;
  width:50%;

  background-color: #fff;
}

#wellness .grid .text {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

#wellness .grid .text h2,#wellness .grid .text p {
  text-align: left;
  width:70%;
}

#wellness .grid .text h2 {
  padding-bottom: 20px;
  font-size: 30px;
}

#wellness .grid .text p { font-size: 19px;}

#wellness .grid .half.pic {
  height: 500px;
  background-image: url(../img/wellness.jpg);
  background-position: center;
  background-size: cover;
}

@media screen and (max-width:1050px) {
  #wellness { width:100%;}
  #wellness h2.subtitle { padding-bottom:30px;}

  #wellness .grid { justify-content: center;}
  #wellness .grid .half {width:100%;}
  #wellness .grid .half.pic { width:80%;}

  #wellness .grid .half.text { width:80%;padding: 20px 0;padding-top:0;}
  #wellness .grid .half.text h2 { display: none;}
  #wellness .grid .half.text p { font-size: 19px;}
}

#zimmer {
  display: flex;
  flex-direction: column;
  align-items: center;

  padding:60px 0;
  width:80%;
  margin: 0 auto;
}

#zimmer h2 {
  padding-bottom: 60px;
}

#zimmer .grid {
  width:100%;
  height:initial;

  display:flex;
  flex-flow:row wrap;
}

#zimmer .grid .half {
  min-height:100%;
  width:50%;

  background-color: #fff;
}

#zimmer .grid .text {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

#zimmer .grid .text h2,#zimmer .grid .text p {
  text-align: left;
  width:70%;
}

#zimmer .grid .text h2 {
  padding-bottom: 20px;
  font-size: 30px;
}

#zimmer .grid .text p { font-size: 19px;}

#zimmer .grid .text p a { transition: all 200ms linear;color:#555;}
#zimmer .grid .text p a:hover { color:#888;}

#zimmer .grid .half.pic {
  height: 500px;
  background-image: url(../img/zimmer.jpg);
  background-position: center;
  background-size: cover;
}

@media screen and (max-width:1050px) {
  #zimmer { width: 100%;}
  #zimmer h2.subtitle { padding-bottom:30px;}

  #zimmer .grid { justify-content: center;}
  #zimmer .grid .half {width:100%;}
  #zimmer .grid .half.pic { width:80%;}

  #zimmer .grid .half.text { width:80%;padding: 20px 0;padding-bottom:0;}
  #zimmer .grid .half.text h2 { display: none;}
  #zimmer .grid .half.text p { font-size: 19px;}
}