.introanimation {
  width: 100%;
  height: 100%;
  z-index: 9999;
  position:absolute;
  background-color: #4B5743;
display: -webkit-box;display: -webkit-flex;display: -ms-flexbox;display: flex;
-webkit-flex-wrap: wrap;-ms-flex-wrap: wrap;flex-wrap: wrap;flex-flow: row wrap;
  align-items: center;
  justify-content: center;
}

.introanimation .introLogo {
  width: 500px;
    top:40%;
  margin: 0 auto;
  position: absolute;
  z-index: 2;
  /* transform-origin: center; */
  -webkit-animation: logoset 1s cubic-bezier(0.7, 0, 0.3, 1) forwards;   /* Safari 4+ */
  -moz-animation: logoset 1s cubic-bezier(0.7, 0, 0.3, 1) forwards;   /* Fx 5+ */
  -o-animation: logoset 1s cubic-bezier(0.7, 0, 0.3, 1) forwards; /* Opera 12+ */
  animation: logoset 1s cubic-bezier(0.7, 0, 0.3, 1) forwards; /* IE 10+, Fx 29+ */
  animation-delay: 3.1s;
  transform: none;
}

@-webkit-keyframes logoset {
  0%{  top:40%;   width: 500px; }
100%{top: 24px; width: 180px; }
}

@keyframes logoset
{
  0%{  top:40%;   width: 500px; }
100%{top: 24px; width: 180px; }
}


.introanimation .introLogo img {
  width: 100%;
  height: auto;

}

.CircleMask {
  position: absolute;
  border-radius: 100%;
  left: 50%;
  top: 50%;
  overflow: hidden;
  z-index: 1;
  /* background: #000; */
  transform: translate(-50%, -50%);
  clip-path: circle(50%);
}

.bgleftstrip, .bgrightstrip {
  position: absolute;
  z-index: 0;
  top: 0px;
}

.maskleftstrip, .maskrightstrip {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 1;
  top: 0px;
}

.maskleftstrip {
  background-image: url('../images/left-strips.svg');
  background-repeat: no-repeat;
  background-size: cover;
}

.maskrightstrip {
  background-image: url('../images/right-strips.svg');
  background-repeat: no-repeat;
  background-size: cover;
}

.bgleftstrip {
    clip-path: inset(0% 0% 0% round 0% 50vw 50vw 0%);
  background-image: url('../images/left-strips.svg');
  background-repeat: no-repeat;
  background-size: cover;
  left: 0;
}

.bgrightstrip {
  clip-path: inset(0% 0% 0% round 50vw 0% 0% 50vw);
  right: 0;
  background-image: url('../images/right-strips.svg');
  background-repeat: no-repeat;
  background-size: cover;
}

@media (orientation: landscape) {
  .CircleMask {
    position: absolute;
    width: 100vh;
    height: 100vh;
    -webkit-animation: rotateview 3s cubic-bezier(0.7, 0, 0.3, 1) forwards;   /* Safari 4+ */
    -moz-animation: rotateview 3s cubic-bezier(0.7, 0, 0.3, 1) forwards;   /* Fx 5+ */
    -o-animation: rotateview 3s cubic-bezier(0.7, 0, 0.3, 1) forwards; /* Opera 12+ */
    animation: rotateview 3s cubic-bezier(0.7, 0, 0.3, 1) forwards; /* IE 10+, Fx 29+ */
      /* display: none; */
  }
.bgWrap
{
  position: absolute;
  width: 100vw;
height: 100vh;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
  -webkit-animation: rotateview 3s cubic-bezier(0.7, 0, 0.3, 1) forwards;   /* Safari 4+ */
  -moz-animation: rotateview 3s cubic-bezier(0.7, 0, 0.3, 1) forwards;   /* Fx 5+ */
  -o-animation: rotateview 3s cubic-bezier(0.7, 0, 0.3, 1) forwards; /* Opera 12+ */
  animation: rotateview 3s cubic-bezier(0.7, 0, 0.3, 1) forwards; /* IE 10+, Fx 29+ */
}
  @-webkit-keyframes rotateview {
    0%{transform: translate(-50%, -50%) rotate(0deg);}
    40%, 50%{transform: translate(-50%, -50%) rotate(0deg);}
      60%, 100%{transform: translate(-50%, -50%) rotate(90deg);}
  }

  @keyframes rotateview
  {
    0%{transform: translate(-50%, -50%) rotate(0deg);}
    40%, 50%{transform: translate(-50%, -50%) rotate(0deg);}
      60%, 100%{transform: translate(-50%, -50%) rotate(90deg);}
  }

  .bgleftstrip, .bgrightstrip {
    width: 74vw;
    height: 100vh;
    position: absolute;
    z-index: 0;
    top: 0px;
/* display: none */
  }

.maskleftstrip{
  left: -100vw;
  transform: rotate(0deg);
      clip-path: circle(50%);
  -webkit-animation: maskleftstrip 3s cubic-bezier(0.7, 0, 0.3, 1) forwards;   /* Safari 4+ */
  -moz-animation: maskleftstrip 3s cubic-bezier(0.7, 0, 0.3, 1) forwards;   /* Fx 5+ */
  -o-animation: maskleftstrip 3s cubic-bezier(0.7, 0, 0.3, 1) forwards; /* Opera 12+ */
  animation: maskleftstrip 3s cubic-bezier(0.7, 0, 0.3, 1) forwards; /* IE 10+, Fx 29+ */
/* animation-delay: 0.5s */
  }

  .maskrightstrip {
    right: -100vw;
    transform: rotate(0deg);
        clip-path: circle(50%);
    -webkit-animation: maskrightstrip 3s cubic-bezier(0.7, 0, 0.3, 1) forwards;   /* Safari 4+ */
    -moz-animation: maskrightstrip 3s cubic-bezier(0.7, 0, 0.3, 1) forwards;   /* Fx 5+ */
    -o-animation: maskrightstrip 3s cubic-bezier(0.7, 0, 0.3, 1) forwards; /* Opera 12+ */
    animation: maskrightstrip 3s cubic-bezier(0.7, 0, 0.3, 1) forwards; /* IE 10+, Fx 29+ */
/* animation-delay: 0.5s */
}

.bgleftstrip{
  /* clip-path: inset(0% 0% 0% round 0% 50vw 50vw 0%); */
  left: -100vw;
  -webkit-animation: bgleftstrip 3s cubic-bezier(0.7, 0, 0.3, 1) forwards;   /* Safari 4+ */
  -moz-animation: bgleftstrip 3s cubic-bezier(0.7, 0, 0.3, 1) forwards;   /* Fx 5+ */
  -o-animation: bgleftstrip 3s cubic-bezier(0.7, 0, 0.3, 1) forwards; /* Opera 12+ */
  animation: bgleftstrip 3s cubic-bezier(0.7, 0, 0.3, 1) forwards; /* IE 10+, Fx 29+ */

  }

  .bgrightstrip {
    /* clip-path: inset(0% 0% 0% round 50vw 0% 0% 50vw); */
    right: -100vw;
    -webkit-animation: bgrightstrip 3s cubic-bezier(0.7, 0, 0.3, 1) forwards;   /* Safari 4+ */
    -moz-animation: bgrightstrip 3s cubic-bezier(0.7, 0, 0.3, 1) forwards;   /* Fx 5+ */
    -o-animation: bgrightstrip 3s cubic-bezier(0.7, 0, 0.3, 1) forwards; /* Opera 12+ */
    animation: bgrightstrip 3s cubic-bezier(0.7, 0, 0.3, 1) forwards; /* IE 10+, Fx 29+ */
}




  @-webkit-keyframes maskleftstrip {
    0%{left: -100vw;top: 0px;}
    40%, 65%{left: 0%;top: 0px;}
    100%{left: 100vw;top: 0px;}
  }

  @keyframes maskleftstrip
  {
    0%{left: -100vw;top: 0px;}
    40%, 65%{left: 0%;top: 0px;}
    100%{left: 100vw;top: 0px;}
  }

/* maskleft strip end */
  @-webkit-keyframes maskrightstrip {
    0%{right: -100vw;top: 0px;}
          40%, 65%{right: 0%;top: 0px;}
        100%{right: -100vw;top: 0px;}
  }

  @keyframes maskrightstrip
  {
    0%{right: -100vw;top: 0px;}
    40%, 65%{right: 0%;top: 0px;}
    100%{right: -100vw;top: 0px;}
  }


  @-webkit-keyframes bgleftstrip {
    0%{left: -100vw;top: 0px;}
    40%, 65%{left: 0vw;top: 0px;}
      100%{left: -100vw;top: 0px;}
  }

  @keyframes bgleftstrip
  {
    0%{left: -100vw;top: 0px;}
    40%, 65%{left: 0vw;top: 0px;}
    100%{left: -100vw;top: 0px;}
  }

/* maskleft strip end */
  @-webkit-keyframes bgrightstrip {
    0%{right: -100vw;}
  40%, 65%{right: 0vw;top: 0px;}
    100%{right: -100vw;top: 0px;}
  }

  @keyframes bgrightstrip
  {
    0%{right: -100vw;}
  40%, 65%{right: 0vw;top: 0px;}
  100%{right: -100vw;top: 0px;}
  }


}



@media (orientation: portrait) {
  .CircleMask {
    width: 100vw;
    height: 100vw;
      transform: translate(-50%, -50%) rotate(90deg);
      -webkit-animation: rotateview 3s cubic-bezier(0.7, 0, 0.3, 1) forwards;   /* Safari 4+ */
      -moz-animation: rotateview 3s cubic-bezier(0.7, 0, 0.3, 1) forwards;   /* Fx 5+ */
      -o-animation: rotateview 3s cubic-bezier(0.7, 0, 0.3, 1) forwards; /* Opera 12+ */
      animation: rotateview 3s cubic-bezier(0.7, 0, 0.3, 1) forwards; /* IE 10+, Fx 29+ */
  }
  .bgWrap {
    position: absolute;
    width: 100vw;
    height: 100vh;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) rotate(90deg);
    -webkit-animation: rotateview 3s cubic-bezier(0.7, 0, 0.3, 1) forwards;   /* Safari 4+ */
    -moz-animation: rotateview 3s cubic-bezier(0.7, 0, 0.3, 1) forwards;   /* Fx 5+ */
    -o-animation: rotateview 3s cubic-bezier(0.7, 0, 0.3, 1) forwards; /* Opera 12+ */
    animation: rotateview 3s cubic-bezier(0.7, 0, 0.3, 1) forwards; /* IE 10+, Fx 29+ */
  }



  @-webkit-keyframes rotateview {
    0%{transform: translate(-50%, -50%) rotate(90deg);}
    40%, 50%{transform: translate(-50%, -50%) rotate(90deg);}
      60%, 100%{transform: translate(-50%, -50%) rotate(0deg);}
  }

  @keyframes rotateview
  {
    0%{transform: translate(-50%, -50%) rotate(90deg);}
    40%, 50%{transform: translate(-50%, -50%) rotate(90deg);}
      60%, 100%{transform: translate(-50%, -50%) rotate(0deg);}
  }



  .maskleftstrip{
  left: -45vh;
        clip-path: circle(50%);
    -webkit-animation: maskleftstrip 3s cubic-bezier(0.7, 0, 0.3, 1) forwards;   /* Safari 4+ */
    -moz-animation: maskleftstrip 3s cubic-bezier(0.7, 0, 0.3, 1) forwards;   /* Fx 5+ */
    -o-animation: maskleftstrip 3s cubic-bezier(0.7, 0, 0.3, 1) forwards; /* Opera 12+ */
    animation: maskleftstrip 3s cubic-bezier(0.7, 0, 0.3, 1) forwards; /* IE 10+, Fx 29+ */
  /* animation-delay: 0.5s */
    }

    .maskrightstrip {
  right: -45vh;
          clip-path: circle(50%);
      -webkit-animation: maskrightstrip 3s cubic-bezier(0.7, 0, 0.3, 1) forwards;   /* Safari 4+ */
      -moz-animation: maskrightstrip 3s cubic-bezier(0.7, 0, 0.3, 1) forwards;   /* Fx 5+ */
      -o-animation: maskrightstrip 3s cubic-bezier(0.7, 0, 0.3, 1) forwards; /* Opera 12+ */
      animation: maskrightstrip 3s cubic-bezier(0.7, 0, 0.3, 1) forwards; /* IE 10+, Fx 29+ */
  /* animation-delay: 0.5s */
  }


  .bgleftstrip, .bgrightstrip {
    height: 100vw;
    width: 83vh;
  }

  .bgleftstrip {
    top: 50%;
bottom: 0;
left: -45vh;
transform: translateY(-50%);
-webkit-animation: bgleftstrip 3s cubic-bezier(0.7, 0, 0.3, 1) forwards;   /* Safari 4+ */
-moz-animation: bgleftstrip 3s cubic-bezier(0.7, 0, 0.3, 1) forwards;   /* Fx 5+ */
-o-animation: bgleftstrip 3s cubic-bezier(0.7, 0, 0.3, 1) forwards; /* Opera 12+ */
animation: bgleftstrip 3s cubic-bezier(0.7, 0, 0.3, 1) forwards; /* IE 10+, Fx 29+ */
  }

  .bgrightstrip {
    bottom: 0vw;
  top: 50%;
  right: -45vh;
  transform: translateY(-50%);
  -webkit-animation: bgrightstrip 3s cubic-bezier(0.7, 0, 0.3, 1) forwards;   /* Safari 4+ */
  -moz-animation: bgrightstrip 3s cubic-bezier(0.7, 0, 0.3, 1) forwards;   /* Fx 5+ */
  -o-animation: bgrightstrip 3s cubic-bezier(0.7, 0, 0.3, 1) forwards; /* Opera 12+ */
  animation: bgrightstrip 3s cubic-bezier(0.7, 0, 0.3, 1) forwards; /* IE 10+, Fx 29+ */
  }

  .introanimation .introLogo {
      width: 250px;
      top:40%;

  }


  @-webkit-keyframes logoset {
    0%{ top:40%; width: 250px; }
  100%{top: 20px;width: 100px; }
  }

  @keyframes logoset
  {
    0%{ top:40%; width: 250px; }
  100%{top: 20px;width: 100px; }
  }


  @-webkit-keyframes maskleftstrip {
    0%{left: -100vh;}
    40%, 65%{left: 0vh;}
    100%{left: 100vh;}
  }

  @keyframes maskleftstrip
  {
    0%{left: -100vh;}
    40%, 65%{left: 0vh;}
    100%{left: -100vh;}
  }

  /* maskleft strip end */
  @-webkit-keyframes maskrightstrip {
    0%{right: -100vh;}
          40%, 65%{right: 0vh;}
        100%{right: -100vh;}
  }

  @keyframes maskrightstrip
  {
    0%{right: -100vh;}
          40%, 65%{right: 0vh;}
        100%{right: -100vh;}
  }


  @-webkit-keyframes bgleftstrip {
    0%{left: -100vh;}
    40%, 65%{left: -27vh;}
    100%{left: -100vh;}
  }

  @keyframes bgleftstrip
  {
    0%{left: -100vh;}
    40%, 65%{left: -27vh;}
    100%{left: -100vh;}
  }

  /* maskleft strip end */
  @-webkit-keyframes bgrightstrip {
    0%{right: -100vh;}
          40%, 65%{right: -27vh;}
        100%{right: -100vh;}
  }

  @keyframes bgrightstrip
  {
    0%{right: -100vh;}
          40%, 65%{right: -27vh;}
        100%{right: -100vh;}
  }


}
@media screen and (min-width: 0px) and (max-width: 1023px) {
@media all and (orientation: landscape) {
  .introanimation .introLogo {
  width: 260px;
  top:40%;
  }

  @-webkit-keyframes logoset {
    0%{ top:40%;  width: 260px; }
  100%{top: 20px;width: 150px; }
  }

  @keyframes logoset
  {
    0%{ top:40%;  width: 260px; }
  100%{top: 20px;width: 150px; }
  }

}
}

@media all and (device-width: 1366px) and (device-height: 1024px) and (orientation:landscape),
all and (device-width: 1024px) and (device-height: 768px) and (orientation:landscape),
all and (device-width: 1180px) and (device-height: 820px) and (orientation:landscape),
all and (device-width: 1194px) and (device-height: 834px) and (orientation:landscape),
all and (device-width: 1080px) and (device-height: 810px) and (orientation:landscape)
  {
    .bgleftstrip, .bgrightstrip {
      width: 87vw;
      height: 100vh;
  }
}



  @media all and (device-width: 1024px) and (device-height: 1366px) and (orientation:portrait),
  all and (device-width: 768px) and (device-height: 1024px) and (orientation:portrait),
  all and (device-width: 820px) and (device-height: 1180px) and (orientation:portrait),
  all and (device-width: 834px) and (device-height: 1194px) and (orientation:portrait),
  all and (device-width: 810px) and (device-height: 1080px) and (orientation:portrait)
  {
  .bgleftstrip, .bgrightstrip
  {
    width: 100vh;
  }

  .introanimation .introLogo {
  width: 400px;
top: 42%;
  }

  @-webkit-keyframes logoset {
    0%{ top: 42%; width: 400px; }
  100%{top: 24px; width: 180px; }
  }

  @keyframes logoset
  {
    0%{ top: 42%; width: 400px; }
  100%{top: 24px; width: 180px; }
  }
  }

  @media only screen
    and (device-width: 414px)
    and (device-height: 896px)
    and (-webkit-min-device-pixel-ratio: 2)
    and (orientation: portrait) {
      .bgleftstrip, .bgrightstrip {width: 73vh !important;}
      .introanimation .introLogo{top:44% !important;}
    }

    @media only screen
    and (min-device-width: 353px)
    and (max-device-width: 745px)
    and (-webkit-min-device-pixel-ratio: 2)
    and (orientation: portrait) {
      .bgleftstrip, .bgrightstrip {width: 75vh;}
      .introanimation .introLogo{top:42% !important;}
  }

  @media only screen
  and (min-device-width: 375px)
and (max-device-height: 740px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) {
    .bgleftstrip, .bgrightstrip {width: 83vh !important;}
    .introanimation .introLogo{top:42% !important;}
}

/* @media only screen
and (min-device-width: 390px)
and (max-device-width:844px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: portrait) {
  .bgleftstrip, .bgrightstrip {width: 73vh;}
  .introanimation .introLogo{top:43% !important;}
} */

@media only screen
and (min-device-width: 375px)
and (max-device-height:812px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: portrait) {
  .bgleftstrip, .bgrightstrip {width: 73vh;}
  .introanimation .introLogo{top:43% !important;}
}

@media only screen
and (min-device-width: 414px)
and (max-device-heigh:736px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: portrait) {
  .bgleftstrip, .bgrightstrip {width:83vh !important;}
  .introanimation .introLogo{top:43% !important;}
}
@media only screen
and (min-device-width: 412px)
and (max-device-heigh: 915px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: portrait) {
  .bgleftstrip, .bgrightstrip {width: 72vh !important;}
  .introanimation .introLogo{top:43% !important;}
}

.animationStart .introanimation{ opacity: 1}
.animationEnd .introanimation{animation: lift 0.8s ease-in-out;animation-delay: 1.6s; animation-fill-mode: forwards;}
.animationStart{overflow: hidden;}
@keyframes lift {
0% {
  transform: translate3d(0, 0, 0);
  opacity: 1;
  visibility: visible;
}
100% {
  transform: translate3d(0, -100%, 0);
  opacity: 1;
  visibility: hidden;
}
}
#cookie-law-info-bar{opacity: 0;-webkit-transition: all .5s ease-in-out;-moz-transition:all .5s ease-in-out;-o-transition:
all .5s ease-in-out;transition: all .5s ease-in-out;}

.fadeIn.animateMe {animation: fadein 2s; -moz-animation: fadein 2s; -webkit-animation: fadein 2s; -o-animation: fadein 2s;}

@keyframes fadein {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-moz-keyframes fadein {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-webkit-keyframes fadein { /* Safari and Chrome */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-o-keyframes fadein { /* Opera */
    from {
        opacity:0;
    }
    to {
        opacity: 1;
    }
}
.animationEnd{ overflow: auto;}
.animationEnd #cookie-law-info-bar{opacity: 1;}