@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@300;400;700;900&display=swap');


:root {
  --mainFont: 'Lexend', sans-serif;
  --headlineFont: 'Lexend', sans-serif;

  --mainColor:;
  --secondColor:;
}

*{
  font-family:var(--mainFont);
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{
  font-size:16px;
  padding-left: clamp(1rem, 3vw, 3rem);

}

nav ul, nav ul li{
  list-style:none;
}

ul{
  margin-left:1.5rem;
}

ul li{
  margin-bottom:1rem;
}

img{width:100%;}

a{text-decoration:none;}

p{max-width:75ch;}

button, button:hover, button:active{border:0px; user-select: none;}

a:not(.btn):hover, a:not(.btn):active, a:not(.btn){color:#000;}

picture{display:block;}

/* Fonts */
.font-1{font-size:1rem; line-height:150%;}
.font-2{font-size:1.25rem; line-height:150%;}
.font-2-clamp{font-size:1.25rem; font-size: clamp(1rem, 3vw , 1.25rem); line-height:150%;}
.font-3{font-size:1.5rem; font-size: clamp(1.25rem, 3vw , 1.5rem);line-height:120%;}
.font-4{font-size:2rem; font-size: clamp(1.5rem, 3vw, 2rem); line-height:120%;}
.font-5{font-size:3rem; font-size: clamp(2rem, 3vw, 3rem);line-height:120%;}
.font-6{font-size:4.5rem; font-size: clamp(3rem, 4.5vw, 4.5rem);line-height:120%;}

.lh120{line-height:120% !important;}
.lh150{line-height:150% !important;}

.font-light{font-weight:200;}
.font-normal{font-weight:300;}
.font-bold{font-weight:700;}
.font-black{font-weight:900;}

.txt-black{color:#000;}
.txt-white{color:#fff;}

.textField{max-width:60ch;}
/* Main-Styles */

.heroSection, .purpleGradient{
  background-size: 2000px 100%;
  background-position: 0px 0px,0px 0px,0px 0px,0px 0px,0px 0px,0px 0px,0px 0px,0px 0px,0px 0px;
  background-image: linear-gradient(0deg, #FFFFFFFF 0%, #073AFF00 80%),radial-gradient(70% 53% at 36% 76%, #e8aeff 0%, #073AFF00 100%),radial-gradient(42% 53% at 34% 72%, #FFFFFFFF 7%, #073AFF00 100%),radial-gradient(18% 28% at 35% 87%, #FFFFFFFF 7%, #073AFF00 100%),radial-gradient(31% 43% at 7% 98%, #FFFFFFFF 24%, #073AFF00 100%),radial-gradient(21% 37% at 72% 23%, #FFF7D69C 24%, #073AFF00 100%),radial-gradient(35% 56% at 91% 74%, #FFC3CEF5 9%, #073AFF00 100%),radial-gradient(74% 86% at 67% 38%, #f3f6fd 24%, #073AFF00 100%),linear-gradient(125deg, #f9f3fd 0%, #FFCECEFF 100%);
}

.heroSectionHeader{
  background-color:#fff;
}

.outerContainer,.container{}

.leftRounded{
-webkit-border-top-left-radius: 2rem;
-webkit-border-bottom-left-radius: 2rem;
-moz-border-radius-topleft: 2rem;
-moz-border-radius-bottomleft: 2rem;
border-top-left-radius: 2rem;
border-bottom-left-radius: 2rem;
}

.rounded{
border-radius: 1rem;
overflow:hidden;
}

.rounded .rounded{
  border-radius: .8rem;
}

.noRoundedTop{
  border-top-left-radius: 0rem !important;
  border-top-right-radius: 0rem !important;
  overflow:visible!important;
}



.btn{
background: #000;
padding: 0.5rem 1.5rem;
display: inline-block;
border-radius: 1.5rem;
font-size: 1rem;
font-weight: bold;
text-align:center;
color:#fff;
}

.btnBig{
padding: 0.75rem 3rem;
border-radius: 3rem;
font-size: 1.25rem;
font-size:clamp( 1rem, 2vw, 1.25rem );
}

.btnLight{
color:#000;
background: #fff;
}

.btnBlack{
  color:#fff;
  background-color:#000;
  font-weight:normal;
}

.btn[target="_blank"]::after{
background-image: url("data:image/svg+xml,%3Csvg id='fi_4690853' enable-background='new 0 0 32 32' height='48' viewBox='0 0 32 32' width='48' xmlns='http://www.w3.org/2000/svg'%3E%3Cg%3E%3Cpath d='m29.125 1h-6.5625c-1.03546 0-1.875.83954-1.875 1.875s.83954 1.875 1.875 1.875h2.04376l-9.9281 9.9281c-.74066.73126-.74066 1.91254 0 2.64374.3656.36566.84369.55316 1.32184.55316s.9563-.1875 1.32184-.55316l9.92816-9.9281v2.04376c0 1.03546.83954 1.875 1.875 1.875s1.875-.83954 1.875-1.875v-6.5625c0-1.03546-.83954-1.875-1.875-1.875z' fill='%23fff'%3E%3C/path%3E%3Cpath fill='%23fff' d='m29.125 14.125c-1.03546 0-1.875.83954-1.875 1.875v11.25h-22.5v-22.5h11.25c1.03546 0 1.875-.83954 1.875-1.875s-.83954-1.875-1.875-1.875h-13.125c-1.03546 0-1.875.83954-1.875 1.875v26.25c0 1.03546.83954 1.875 1.875 1.875h26.25c1.03546 0 1.875-.83954 1.875-1.875v-13.125c0-1.03546-.83954-1.875-1.875-1.875z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
height:.9rem;
width:.9rem;
display:inline-block;
content: " ";
background-position:center;
background-size:cover;
margin-left:.5rem;
}

.btnBig[target="_blank"]::after{
  height:1.125rem;
  width:1.125rem;
  margin-left:.75rem;
}

.btnShadow{
position:relative;
margin-top:0px;
box-shadow: 0px 3px 5px rgba(0,0,0,0.15);
transition:all .25s ease;
}

.btnShadow:hover,
.cardDeckBtns:hover .btnShadow{
margin-top:-4px;
box-shadow: 0px 20px 15px rgba(0,0,0,0.1);
transition:all .25s ease;
}

/* Animated Icons */
@keyframes wavingHand {
  0% {transform: rotate(0deg);}
  20%{transform: rotate(13deg);}
  40%{transform: rotate(-13deg);}
  60%{transform: rotate(13deg);}
  80%{transform: rotate(-13deg);}
  90%{transform: rotate(0deg);}
}

.animatedWaveHand{
display: inline-block;
transform-origin: bottom right;
cursor:pointer
}

.animationTrigger:hover .animatedWaveHand{
animation-name: wavingHand;
animation-duration: 2s;
}

/* Mobile Header */
/* Animierter Toggle-Menu-Buton */

#header{
  z-index:10000;
  position:relative;
}

#header.open{

}

#toggleMenu{
  height: 3rem;
  width: 3rem;
  position: relative;
  background: #000;
  padding:1rem .75rem;
  border-radius: 50%;
  float:right;
}

#toggleNavOverlay{
z-index: 900;
position: fixed;
left:0px;
right:0px;
bottom:0px;
top:0px;
display:block;
opacity:1;
background-color:#fff;
transition: all .75s ease;
}

#toggleNavOverlay.closed{
  opacity:0;
  bottom:100vh;
  transition: all .75s ease;
}

#toggleMenu #showMenu{
position:absolute;
top:0px;
bottom:0px;
left:0px;
right:0px;
z-index:10;
opacity:0;
cursor:pointer;
}

#toggleMenu .theToggleMenu{
width: 100%;
height: 100%;
position: relative;
transform: rotate(0deg);
transition: .5s ease-in-out;
cursor: pointer;
}

#toggleMenu .theToggleMenu span{
display: block;
position: absolute;
height: 2px;
width: 100%;
background: #fff;
border-radius: 2px;
opacity: 1;
left: 0;
transform: rotate(0deg);
transition: .25s ease-in-out;
cursor:pointer;
}

#toggleMenu .theToggleMenu span:nth-child(1){top: 0px;}
#toggleMenu .theToggleMenu  span:nth-child(2),#mobileHeader #toggleMenu .theToggleMenu span:nth-child(3){top: calc(50% - 1px );}
#toggleMenu .theToggleMenu  span:nth-child(4){bottom:0px;}

.open #toggleMenu .theToggleMenu span:nth-child(1) {top: 8px; width: 0%; left: 50%;}

.open #toggleMenu .theToggleMenu span:nth-child(2) {
  transform: rotate(45deg);
}

.open #toggleMenu .theToggleMenu span:nth-child(3) {
  transform: rotate(-45deg);
  top: calc(50% - 1px );
}

.open #toggleMenu .theToggleMenu span:nth-child(4) {
  bottom: 0px;
  width: 0%;
  left: 50%;
}



/* Card-Design */
.cardSection{
  padding-top: 3rem;
  padding-top: clamp(0rem, 3vw, 3rem);
}

.cardInfo{
  padding-top: 3rem;
  padding-top: clamp(0rem, 3vw, 3rem);
  padding-bottom:4rem;
}

.cardDeck{
  height:710px;
  /*overflow: hidden;*/
}

.cardDeckBtns{
  position: absolute;
  top:0px;
  bottom:0px;
  width:6rem;
  left:0px;
  cursor:pointer;
  display: flex;
  justify-content: start;
  align-items: center;
  flex-wrap: wrap;
}

.roundBtn,
.roundBtnArrow{
width:4rem;
height:4rem;
border-radius:50%;
background-repeat: no-repeat;
background-position:center;
background-size: 30% auto;
display:inline-block;
position:relative;
z-index:50;
border:0px;
cursor:pointer;
}

@media(max-width:576px){
  .roundBtn,
  .roundBtnArrow{
    width:3rem;
    height:3rem;
  }
}

.roundBtnArrow,
.prevArrow:before,
.nextArrow:after{
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='34.304' viewBox='0 0 40 34.304'%3E%3Cg id='arrow' transform='translate(0 -31.842)'%3E%3Cg id='Gruppe_1' data-name='Gruppe 1' transform='translate(0 31.842)'%3E%3Cpath id='Pfad_1' data-name='Pfad 1' d='M37.6,46.186a2.859,2.859,0,0,0-.5-.037H8.881l.615-.286a5.724,5.724,0,0,0,1.617-1.145l7.913-7.913a2.962,2.962,0,0,0,.415-3.792,2.862,2.862,0,0,0-4.293-.372L.839,46.951A2.862,2.862,0,0,0,.837,51l0,0,14.31,14.31a2.862,2.862,0,0,0,4.293-.286,2.962,2.962,0,0,0-.415-3.792l-7.9-7.928A5.724,5.724,0,0,0,9.7,52.26l-.859-.386h28.1a2.962,2.962,0,0,0,3.019-2.4A2.862,2.862,0,0,0,37.6,46.186Z' transform='translate(0 -31.842)'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A");
}

.prevArrow:before,
.nextArrow:after{
  width:1rem;
  height:1rem;
  margin-right: .5rem;
  background-position: center;
  background-repeat: no-repeat;
  content:" ";
  display:inline-block;
  background-size:100% auto;
}

.btn.nextArrow{
  right:0px;
}

.nextArrow:after{
  margin-left:.5rem;
  margin-right: 0rem;
  transform: rotate(180deg);
}

.heroSectionScroller{
margin: 0 auto;
display: block;
margin-top: -2rem;
background-color:#000;
background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8' standalone='no'%3F%3E%3C!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3E%3Csvg width='100%25' height='100%25' viewBox='0 0 448 448' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve' xmlns:serif='http://www.serif.com/' style='fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;'%3E%3Cg transform='matrix(6.12323e-17,-1,1,6.12323e-17,-0.58237,355.12)'%3E%3Cg%3E%3Cpath d='M74.413,226.127C74.413,226.127 119.028,181.104 124.265,175.819L212.745,87.339C224.398,76.215 226.356,58.32 217.385,44.939C206.944,30.68 186.921,27.584 172.661,38.025C171.509,38.869 170.414,39.789 169.385,40.779L9.385,200.779C-3.119,213.269 -3.13,233.53 9.36,246.034L169.385,406.059C181.899,418.538 202.16,418.51 214.64,405.996C215.622,405.011 216.539,403.963 217.385,402.859C226.356,389.478 224.398,371.583 212.745,360.459L124.425,271.819C119.73,267.119 80.32,229.166 74.413,226.127Z' style='fill:white;fill-rule:nonzero;'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A");
}

.heroSectionScroller:hover{
  margin-top: calc( -2rem - 4px ) !important;
  margin-bottom:4px;
}

.nextCard,
.nextCardNoAnimation{
  transform:scaleX(-1);
  right:0px;
  left:auto;
  z-index:50;
}


.card{
width: 80%;
max-width:450px;
aspect-ratio: 64/89;
position:absolute;
overflow:hidden;
box-shadow:0px 6px 12px rgba(0,0,0,0.1);
transition: all .5s ease;
cursor:default;
transform-origin: center center;
user-select: none;
}

.cardHeader{
  background-color:#fff;
}

.cardImg{
  width:85%;
  height:auto;
  margin-left:15%;
  margin-top:-6rem;
  display:block;
}

.cardContent{
  bottom:0px;
  left:0px;
  right:0px;
  background-color:#fff;
  position:absolute;
  z-index:1;
  padding-bottom:2rem;
}

.totalPoint{
  width: 5rem;
  height: 5rem;
  border-radius: 50%;
  background: #000;
  border: 0.5rem solid #fff;
  line-height: 4rem;
  text-align: center;
  margin-top: -2.5rem;
  margin-left: 1rem;
}

.cardContentContainer .cardContent{
  margin-top:-2rem;
}

.cardContentContainer .totalPoint{
  margin-top: 0px;
  margin-left:2rem !important;
  position:relative;
  z-index:10;
}

.rangeBar{
  height: 10px;
  border-radius: 5px;
  background: #000;
  overflow: hidden;
}

@media(max-width:550px){
  .cardDeck{
    height:600px;
    /*overflow: hidden;*/
  }

  .card{width: 90%;}

  .totalPoint {
      width: 4rem;
      height: 4rem;
      line-height: 3rem;
      margin-top: -2rem;
  }
}

@media(max-width:340px){
  .cardDeck{
    height:400px;
    /*overflow: hidden;*/
  }
  .card{width: 100%;}
}

/* Card Animation*/
.cardPos1:hover{
  margin-top:-1rem;
  box-shadow:0px 22px 24px rgba(0,0,0,0.1);
  transition:all .25s ease;
}

.cardPos1 .blockLink,.mainBlockLink{
  position:absolute;
  top:0px;
  left:0px;
  right:0px;
  bottom:0px;
  z-index:50;
}

.cardPos1{
  z-index:40;
  transform:rotate(0deg) translateX(0%) translateY(0px);
}


@keyframes card2ComeIn {
  from{transform:rotate(0deg) translateX(0%) translateY(0px);}
  to{transform:rotate(8deg) translateX(5%) translateY(50px);}
}

.cardPos2{
  z-index:30;
  transform:rotate(8deg) translateX(5%) translateY(50px);
  animation: card2ComeIn ease;
  animation-timeline:view();
  animation-range-start:10vh;
  animation-range-end: 80vh;
}

@keyframes card3ComeIn {
  from{transform:rotate(0deg) translateX(0%) translateY(0px);}
  to{transform:rotate(-8deg) translateX(-5%) translateY(40px);}
}

.cardPos3{
  z-index:20;
  transform:rotate(-8deg) translateX(-5%) translateY(40px);
  animation: card3ComeIn ease;
  animation-timeline:view();
  animation-range-start:10vh;
  animation-range-end: 80vh;
}



.cardPos4{
  z-index:10;
  transform:rotate(0deg) translateX(0%) translateY(0px);
}

.cardPos5{
  z-index:0;
  transform:rotate(0deg) translateX(0%) translateY(0px);
}

@keyframes nextCard {
  0% {
    z-index:40;
    transform:rotate(0deg) translateX(0%) translateY(0px);
  }
  50%{
    z-index: 40;
    transform: rotate(-10deg) translateX(-120%) translateY(-120px);
  }
  100%{
    z-index:0;
    transform:rotate(0deg) translateX(0%) translateY(0px);
  }
}

.animateNextCard{
animation-name: nextCard;
animation-duration: 1s;
}

.animatePrevCard{
animation-name: nextCard;
animation-duration: 1s;
animation-direction: reverse;
}

/* Scrolling Animationen */
.fadeInSection{
  opacity:0;
  margin-top:3rem;
  animation: fadeSectionIn ease forwards;
  animation-timeline: view();
  animation-range-start:10vh;
  animation-range-end: 50vh;
}

@keyframes fadeSectionIn {
  to{opacity:1;margin-top:0rem;}
}




/* ------------- Galerie -------------------------*/

/*.gallery{width:100%;}*/
.gallery-responsive{position: relative;padding-bottom: 66%;padding-top: 30px;height: 0;overflow: hidden;}
.gallery-responsive .carousel-container{position: absolute;top: 0;left: 0;width: 100% !Important;height: 100% !Important;}

.carousel-container .sliderIMG{
width:100%;
-webkit-flex-wrap: nowrap;
flex-wrap: nowrap;
height: 100%;
min-height: 100%;
margin: 0px;
border: 0px;
text-align:center;
display: flex;
align-items: center;
justify-content: center;
}

.sliderIMG{user-select: none;}
.carousel-container .sliderIMG img{max-width: calc( 100% - 30px );max-height: calc( 100% - 30px );}
.sliderIMG picture img{ width: auto; height: auto;}
.coverGallery picture, .coverGallery video{ height:100% !important; width:100% !important;object-fit: cover;}
.carousel-slide{display:flex;width:100%;height:100%; transform: translateX(-1110px);}
.carousel-container .nextBtn, .carousel-container .prevBtn, .pagination .nextBtn, .pagination .prevBtn, .calendarFooter .nextBtn, .calendarFooter .prevBtn{
  font-size: 3rem;  font-weight: bold;  margin-top: -1.5rem;  color: #fff;  position:absolute;  top:50%;  left:0.75rem;  background:none;  border:0px;}
.carousel-container .nextBtn:active,.carousel-container .prevBtn:active,.carousel-container .nextBtn:focus,.carousel-container .prevBtn:focus,.carousel-container .nextBtn:hover,.carousel-container .prevBtn:hover{
  outline: none;
}

.carousel-container .nextBtn{left:auto;right:0.75rem;}

.carousel-container .sliderIMG{
width:100%;
height: 100%;
min-height: 100%;
min-width: 100%;
max-width: 1100px;
margin: 0px;
border: 0px;
}

.sliderIMG picture{  height:100%;  width:100%;}

.carousel-container .sliderIMG picture{
-webkit-flex-wrap: nowrap;
flex-wrap: nowrap;
text-align:center;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}

.carousel-container{  width:100%;}

.carousel-container .sliderIMG img{
width:auto;
height:auto;
max-width: calc( 100% - 30px );
max-height: calc( 100% - 30px );
margin-top:15px;
}

.coverGallery .carousel-container .sliderIMG img,
.slider .sliderIMG img,
.coverGallery .sliderIMG img  {
  object-fit: cover;
  width:100%;
  height:100%;
  max-width:100%;
  max-height:100%;
  margin-top:0px;
}

.slider{
position: relative;
padding-bottom: 66%;
padding-top: 30px;
height: 0;
overflow: hidden;
}

.slider .carousel-container{background-color: #fff;}
.sliderText{position: absolute;width:100%;height:100%;z-index: 10;padding:60px;}
.ms-slideImage{  position: absolute;  width: 100%;  height: 100%}


.gallery .galleryPrevBtn,
.gallery .galleryNextBtn{
  cursor:pointer;
  width: 33%;
  height: 100%;
  right: 0rem;
  top: 0px;
  bottom:0px;
  position:absolute;
  background: rgba(0,0,0,0);
  border:0px;
  text-align:left;
}

@media(max-width:576px){
  .gallery .roundBtnArrow{
    position: absolute;
    bottom:1rem;
  }
}

.gallery .galleryPrevBtn{
  left:0rem;
}

.gallery .galleryNextBtn{
transform:scaleX(-1);
}

.videoPlayBtn{background-image: url("data:image/svg+xml,%3Csvg fill='none' height='48' viewBox='0 0 24 24' width='48' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath clip-rule='evenodd' d='m19.656 10.7677c.3532.7837.3532 1.6812 0 2.4649-.2501.5551-.7079.9474-1.1882 1.2787-.4771.3291-1.1184.6898-1.8927 1.1254l-6.3581 3.5764c-.74769.4206-1.3688.77-1.88306 1.0002-.51989.2328-1.07813.4151-1.67057.3482-.84019-.095-1.60129-.5401-2.09598-1.2259-.34882-.4835-.46357-1.0594-.5156-1.6267-.05147-.5611-.05145-1.2737-.05143-2.1316v-7.15436c-.00002-.85787-.00004-1.5705.05143-2.13158.05203-.56724.16678-1.14319.5156-1.62671.49469-.68572 1.25579-1.13085 2.09598-1.22583.59244-.06697 1.15068.11538 1.67057.34813.51428.23023 1.13539.57962 1.88306 1.00022l6.3581 3.57644c.7744.43553 1.4156.79623 1.8927 1.12535.4803.33131.9381.72354 1.1882 1.27874zm-1.8234 1.6433c.1177-.2613.1177-.5605 0-.8217-.0199-.0441-.1025-.1795-.5005-.4541-.3923-.2706-.9523-.5868-1.7803-1.0525l-6.27287-3.52851c-.80097-.45055-1.34182-.75363-1.76219-.94182-.42443-.19-.57912-.19181-.62871-.18621-.28007.03166-.53376.18004-.69866.40861-.02921.04048-.10347.17619-.14594.63927-.04207.45864-.04307 1.07862-.04307 1.99761v7.05695c0 .919.001 1.539.04307 1.9976.04247.4631.11673.5988.14594.6393.1649.2286.41859.377.69866.4086.04959.0056.20428.0038.62871-.1862.42037-.1882.96122-.4913 1.76219-.9418l6.27287-3.5285c.828-.4657 1.388-.7819 1.7803-1.0526.398-.2745.4806-.4099.5005-.454z' fill='rgb(0,0,0)' fill-rule='evenodd'/%3E%3C/svg%3E");
background-size: 50% auto;
margin-left:-2rem;
top: calc( 50% - 2rem );
}

.fullScreenBtn{
background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' width='48' height='48'%3E%3Cg id='Layer_2' data-name='Layer 2'%3E%3Cpath d='M7,1.5H4.591A3.1,3.1,0,0,0,1.5,4.591V7a1.5,1.5,0,0,0,3,0V4.591A.091.091,0,0,1,4.591,4.5H7a1.5,1.5,0,0,0,0-3Z'/%3E%3Cpath d='M15.409,1.5H13a1.5,1.5,0,0,0,0,3h2.409a.091.091,0,0,1,.091.091V7a1.5,1.5,0,0,0,3,0V4.591A3.1,3.1,0,0,0,15.409,1.5Z'/%3E%3Cpath d='M17,11.5A1.5,1.5,0,0,0,15.5,13v2.409a.091.091,0,0,1-.091.091H13a1.5,1.5,0,0,0,0,3h2.409A3.1,3.1,0,0,0,18.5,15.409V13A1.5,1.5,0,0,0,17,11.5Z'/%3E%3Cpath d='M7,15.5H4.591a.091.091,0,0,1-.091-.091V13a1.5,1.5,0,0,0-3,0v2.409A3.1,3.1,0,0,0,4.591,18.5H7a1.5,1.5,0,0,0,0-3Z'/%3E%3C/g%3E%3C/svg%3E%0A");
bottom:1rem;
margin-left:-2rem;
}

.lightGreyBG{
  background:#fff;
}

/* Area-Icons */
.areaIcons{
  height:40px;
  border-radius:20px;
  margin-right:.5rem;
}

.areaIcons picture{
  width: 40px;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
  overflow:hidden;
  float: left;
  margin-top: -1rem;
}

.areaTitle{
float: left;
height: 100%;
width:0px;
transition: all .5s ease;
overflow: hidden;
}

.areaTitle span{
line-height: 40px;
}

.areaIcons:hover .areaTitle, .showAreaTitle{
width:110px;
transition: all .5s ease;
}