:root{
    --animationTime:        32s;

}
/*
body{
  max-height: 500px;
  width: var(--ContWidth);
  letter-spacing: 0.09em;
            background-color: yellow;
}
*/
.background {
  width: var(--ContWidth);
  height: var(--ContHeight);
  position: relative;
  z-index: 1;
  background-image: url("../content/background.png");
  background-size: contain;
  background-position: top center;
  background-repeat: no-repeat;
}
.overlay {
  width: var(--ContWidth);
  height: var(--ContHeight);
  position: absolute;
  background-image: url("../content/backgroundCut.png");
  background-position: top center;
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 3;
}
.slider {
  position: absolute;
  width: var(--ContWidth);
  height: var(--ContHeight);
  top: 0px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: top center;
  z-index: 2;
  overflow: hidden;
  animation-name: changeVisibilityImages;
  animation-duration: var(--animationTime);
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
.contBox1 {
  /* content Box */
  position: absolute;
  top: 40%;
  left: 25%;
  width: 50%;
  height: auto;
  z-index: 3;
  color: var(--color-white);
  text-overflow: clip;
}
.contBox1 .Box1_1{
  position: inherit;
  width: 100%;
  height: inherit;
  color: var(--color-white);
  animation-name: changeVisibilityContent1_1;
  animation-duration: var(--animationTime);
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
.contBox1 .Box1_2{
  position: inherit;
  width: 100%;
  height: inherit;
  color: var(--color-white);
  animation-name: changeVisibilityContent1_2;
  animation-duration: var(--animationTime);
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
.contBox1 .Box1_3{
  position: inherit;
  width: 100%;
  height: inherit;
  color: var(--color-white);
  animation-name: changeVisibilityContent1_3;
  animation-duration: var(--animationTime);
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
.preload1{
  background-image: url("../content/image1.png");
  width: 0%;
  height: 0%;
  border: 0px;
}
.preload2{
  background-image: url("../content/image2.png");
  width: 0%;
  height: 0%;
  border: 0px;
}
.preload3{
  background-image: url("../content/image3.png");
  width: 0%;
  height: 0%;
  border: 0px;
}

h1 {
  font-size: 3.8vw;
  text-align: center;
  font-weight: 700;
}

p{
  font-size: 1.2vw;
  text-align: center;
  letter-spacing: 0.04em;
  font-weight: 400;
  color: var(--color-white);
}
li{
  display: block;
  position: absolute;
  letter-spacing: 0;
  height: 0;
  width: 100%;
}
input{
  margin: 4% 0% 0% 35%;
  height: 2.8vw;
  width: 16vw;
  background: linear-gradient(to right, var(--color-brown), var(--color-brown));
  border: 0px ;
  border-radius: 5vw;
  text-align: center;
  font-size: 1.1vw;
  color: var(--color-white);
  font-weight: 500;

}

/* Mobile Devices*/
@media only screen and (min-device-width: 600px) and (max-device-width: 900px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape){
  .background {top: 8.5vw; height: calc(var(--ContHeight) - 8.5vw);}
  .contBox1 {top: 12vw; width: var(--ContWidth); left: 0; }
  h1{font-size: 6.5vw;}
  p{font-size: 2.0vw;}
  input{font-size: 2.0vw; height: 5.5vw; width: 29vw; margin-left: 35%;}
}
@media all and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) {
  /*Mobile Portait up to iPad Pro */
  .background {top: 15vw; height: calc(var(--ContHeight) - 15vw);}
  .contBox1 {top: 70vw; width: var(--ContWidth); left: 0; }
  h1{font-size: 7.8vw; }
  p{font-size: 3.3vw;font-weight: 400;}
  input{font-size: 4.5vw; height: 7.0vw; width: 60vw; margin: 18% 0 0 20%;}
}
@media all and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) {
  /*Mobile Landscape up to iPad */
  .background {top: 8.5vw; height: calc(var(--ContHeight) - 8.5vw);}
  .contBox1 {top: 12vw; width: var(--ContWidth); left: 0; }
  h1{font-size: 6.5vw; }
  p{font-size: 2.5vw;font-weight: 400;}
  input{font-size: 2.0vw; height: 5.5vw; width: 29vw; margin-left: 35%;}
}


/* Desktop Devices*/
@media only screen and (min-width: 600px) and (max-width: 900px) and (-webkit-max-device-pixel-ratio: 1){
  .background {top: 8.5vw; height: calc(var(--ContHeight) - 8.5vw);}
  .contBox1 {top: 12vw; width: var(--ContWidth); left: 0; }
  h1{font-size: 6.5vw; }
  p{font-size: 2.0vw;}
  input{font-size: 2.0vw; height: 5.5vw; width: 29vw; margin-left: 35%;}
}
@media only screen and (max-width: 599px) and (-webkit-max-device-pixel-ratio: 1) {
  .background {top: 15vw; height: calc(var(--ContHeight) - 15vw);}
  .contBox1 {top: 70vw; width: var(--ContWidth); left: 0; }
  h1{font-size: 7.8vw; }
  p{font-size: 3.3vw;font-weight: 400;}
  input{font-size: 4.5vw; height: 7.0vw; width: 60vw; margin-left: 20%; }
}






/*
@media only screen and (min-width: 600px) and (max-width: 1024px) and (max-device-width: 599px) and (orientation: landscape) {
  .background {top: 8.5vw; height: calc(var(--ContHeight) - 8.5vw);}
  .contBox1 {top: 12vw; width: var(--ContWidth); left: 0; }
  h1{font-size: 6.5vw; }
  p{font-size: 2.5vw;font-weight: 400;}
  input{font-size: 2.0vw; height: 5.5vw; width: 29vw; margin-left: 35%;}
}
@media all and (min-width: 600px) and (max-width: 1024px) and (max-device-width: 1024px) and (orientation: portrait) {
  .background {top: 15vw; height: calc(var(--ContHeight) - 15vw);}
  .contBox1 {top: 70vw; width: var(--ContWidth); left: 0; }
  h1{font-size: 7.8vw;}
  p{font-size: 3.3vw;font-weight: 400;}
  input{font-size: 4.5vw; height: 7.0vw; width: 60vw; margin: 18% 0 0 20%;}
}
*/
@keyframes changeVisibilityImages {
  0%    {opacity: 0.8; background-image: url("../content/image1.png"); }
  1%    {opacity: 1;}
  30%   {opacity: 1; background-image: url("../content/image1.png"); }
  33%   {opacity: 0.8; background-image: url("../content/image2.png"); }
  34%   {opacity: 1; }
  63%   {opacity: 1; background-image: url("../content/image2.png"); }
  66%   {opacity: 0.8; background-image: url("../content/image3.png"); }
  67%   {opacity: 1;}
  97%   {opacity: 1; background-image: url("../content/image3.png"); }
  100%  {opacity: 0.8; background-image: url("../content/image1.png"); }
}
@keyframes changeVisibilityContent1_1 {
  0%    {opacity: 1.0; visibility: visible;}
  30%   {opacity: 1; }
  33%   {opacity: 0.0; visibility: hidden;}
  97%   {opacity: 0.0; visibility: hidden; }
  100%  {opacity: 1.0; visibility: visible; }
}
@keyframes changeVisibilityContent1_2 {
  0%    {opacity: 0.0; visibility: hidden;;}
  30%   {opacity: 0.0; visibility: hidden;}
  33%   {opacity: 1.0; visibility: visible;}
  63%   {opacity: 1.0; visibility: visible;}
  66%   {opacity: 0.0; visibility: hidden;}
  100%  {opacity: 0.0; visibility: hidden; }
}
@keyframes changeVisibilityContent1_3 {
  0%    {opacity: 0.0; visibility: visible;}
  1%    {opacity: 0.0; visibility: hidden;}
  63%   {opacity: 0.0; visibility: hidden;}
  66%   {opacity: 1.0; visibility: visible;}
  97%   {opacity: 1.0; visibility: visible;}
  100%  {opacity: 0.0; visibility: visible;}
}