/*   ********************************* HORIZONTAL WEBSITES   ************************** */
/*  Each part of the horizontally scrolling Website is a Contao article. Within the article, any content-element can be placed. */
/*  The inner wrapper is .inside of main, the outer wrapper is main. Possibly main has to be additionally specified in order to apply on the horizontal parts of the website only  */
/*  See tutorial: https://youtu.be/OeaHnxahf40?si=hg26Ao9nd0wQnnvq  */

body {
	margin:0;
	padding:0;
}
wrapper {
    height:100vh;
    width:400vw;
    overflow:hidden;
}

main:not(textarea) {
    width:100vh;
    height:100vw;
    overflow-y:scroll;
    overflow-x:hidden;
    transform: rotate(-90deg) translateX(-100vh);
    transform-origin: top left;
    position:absolute;
    scrollbar-width: none;
    margin-top:0.5rem;
}
::-webkit-scrollbar:not(textarea) {
	display:none;
}


/* in main .inside the width declaration depends on the number of pages: 400vw is for 4 pages  */
main .inside {
	width:400vw;
    height:100vh;
    display:flex;
    flex-flow:row nowrap;	
    transform: rotate(90deg) translateY(-100vh);
    transform-origin: top left;
   background-color:#FCD9CA; 
    position: relative;
    right: -50px
}

/* class has to be put on all articles forming the horizontal webpage */
.horizontal-scroll-wrapper-item {
  width: 100vh;
/*  height: 100vw;  */
}
@media screen and (max-height:460px) {
  .horizontal-scroll-wrapper-item {
      margin-top: 0;
}
  header {
    background:transparent;
  }
}

@media screen and (max-width:1080px) {
#article-1::after {
  content: "";
  /*
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACMAAAAjCAYAAAAe2bNZAAAACXBIWXMAAAsTAAALEwEAmpwYAAABNUlEQVR4nO3Xz0rDQBAG8A89VAQRwT8XQaS9iArKZmabErM7sZWgHgQpCIL2KupdEOxzCAXfQvBRfAmfQbJgseBRsnPIB3vIXubHZNhkgSZN/jveXkLo9c/l6RljzKG2lJ0WPL/D0wdc0p9Zwm8QmkQC8ct0z9EILtkLGBWgwm5A7KkOkHMLENPGEW/rAFXxfB8QakAFP+jqkJg2PJ/pmaFBuo68u68DVMXTra4ZEnpCdrCmB5Qnh3BU6gCVnRZ6vSUcUxoH1DfLEPqCUB6eq+KOLzAczsPzJ4Rv6u+MM6vT/dqHufwFOTeLEHqMDxE+QWEH8SHOXoWDLzpE0i3kdicUjgoZh+J3Cl4Nd8N/cnSIp2tk2Up8iNAuHG+Gwywq5OfLrKMjNIoMIQX3Jq/pRtmkCWbyDYJ9v93K/YKSAAAAAElFTkSuQmCC);
  */
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAACXBIWXMAAAsTAAALEwEAmpwYAAABx0lEQVR4nO3dv0pCcRyG8bNYV5Dk7TTYGlljWleTY95GDTa0FgVKiU02FASR0H08kVRTWNSxXvP5gPs5Puj54/fnKQpJkiRJkiRJSgOc8XNDoPrX+/IvAAPKcWOUcoKsAKOXd/T2aUxtb5tiY+3Lr5XmJqPHh7cot0CtjO1aaEYJZJRARglklH8QpdVpc9g/p9Koe6BPiFJp1Ole9Ti5vmR5e90oRlkgflICGSWQUQIZJRCefeXBKHkwSh6Mkgej5MEoeTBKHoySB6PMd5SlrTrHg97k9xQHJ4KiNDttp1lmDUeM8mCUPBglD0bJg9MsefA6JQ9GyYMXj3nw4jEPnn3lwbOvPED1dVkcw/u7qcPdH92QrLY2uRm/r+Qa/vX+LFSQ4oMbkgaZ4VfW6u7WT9c5rpa5fQsFY+TAGDkwxnzGqDTqHPUv2DnY95iREKP7+VI5D+DfZYwg+MnIgTFyYIwcGCMHxsiBMXJgjBwYIwfGyIExcmCMHBgjB8bIgTFyYIwcxghijCDGCGKMIMYIYow5HmJrddqT2akpfzXuqM5vxSgcfJ4dYwQxRhBjBDFGGB+bFwY4LeEZhkOfYShJkiRJkiRJxXTP1CBom5ccXwcAAAAASUVORK5CYII=);
background-size: cover;
  width: 60px;
  height: 60px;
  position: fixed;
  bottom: calc(18vh + 12px);
  left: calc(95vw - 30px);
}
}

/*
@media screen and (min-width:1001px) {
header::after {
  content:"";
  background: url(data:image/png;base64,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);
  width:64px;
  height:64px;
  background-size:cover;
  position: fixed;
  z-index:100;
  top: 30vh;
  left: 47vw;

  animation: 
    mouseLeftRight 3s ease-in-out forwards,
    fadeOut 3.5s forwards;
}}
@keyframes mouseLeftRight {
  0% {
/*    transform: translate(-50%, -50%); */
/*
   top:30vh;
  }
  20% {
   top:28vh;
  }
  40% {
    top:32vh;
  }
    60% {
    top:28vh;
  }
    80% {
    top:32vh;
  }
  100% {
    top:28vh;
  }
}
/*Swipe-Icon 
@media screen and (max-width:1000px) {
header::after {
  content:"";
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAACXBIWXMAAAsTAAALEwEAmpwYAAAFEklEQVR4nO2bX0wcRRjAxwfjv8R3o0mjRh+qfTHGqE/1xfRF08RUTUpvhgtiSqmgaf2TqidwN3PQHvZiezNL4aBQS5uSkmJFgxVsWpGmsRcpjQYsFtsjtNfWAhqhho75lttluSscHHe722O/5Mtu9mNu5vvtN9/8WxByxBHTpFBR7saClmJOe7GgE5jTGObsgDvkexrluuB6z71Y0O+JYDJJOfuXCPYKymXBnAU0h7c275YNP7bJYMcB6Vb86jPM6dh6xfsQykUpVDz3Y87+AUc9h+vktf9G5LiMqXri/Gk9EjBnn6JcFLeofFZz8oeBU7rzmr7fHNKioA3lomDOVmsAzkR7kwD42hriUUC7kB0lr6biUSJoS77i32hHAC7ufRjaRzgrQZmW/BB7jHA6FHdg1I4ACKdbZvIIrUBZcl5ihX5iRwAFNf5HZrUzExDcuypWEM4GZ8ZqWmXnHJDJ9iJ37bYVRKE3bztpSaWc3sKC7c8EABzyP485vZZWO6Z/71B6ABTf2vQrVcfzK5kAQDgtXlo76MW0AIAQ7msx/NgoDlGBOfOnUiKY18X9z6FMRABMnxX6zkLqjWu3IRJvbBBlL6ClCBG0TKcp2J8upepxu+YAwll5JtqaJJBRDVT7kC3nAf7XDW0cgtELZVJInC4sY205D1DYuvibv5Bx5zXJ576V64OeB5FNu8BS2pd1uePXAksVBwB3ImC10wWEkwPkQpKgq8b/FFFYASxxsaBrYCdZyyXrAoH7sOJbiwXbSkLMTXjlEyiXcgAWdAIWU7MXV2wYQKjKaXTWXF+wKcxZeHMweA/KjSTI5lrU3ASdewXKWlGuAKBte+XA9X4Zm4zKjl9PyoI9lbrtrT1V6jOw9V/vV//WMAUuxpw2wTogfugChy+lxi5kWwAfH6pRbYW1VfLK5KVZtv2n2nUn4d5ouzxxSb5dtyPF/gQ7BqtKUx3O576VWLBNRLAPVOVMmQ9Acf3nqm1TfXWS7eu+47oz7eeOJ9nLWsO6HQ5Z4LAFDl22NO825ortpjie17j9ASLYvqREZtDvfutOjoCW6QiAa6Lt54u/6GXhPqn7HKnX7ScHT+vP4fDFc7hW6x5/wwiSXe+lvItw2p5ql6Zn6MycOQCuiTaImPmip6QxqNqKwoEkW9dAz0zdiveZrPrvCtFXExPZ2AKdWBKApmkApU3BectCHsoqAMxZA1QESSkxkWUTgDfeBeBqKQDC2TGoqKy1btFOVB5tUm1wTbT1jpzTy/aO9C2qrLkABO1K9y1Ghnvljm++lJHhs0m20anLMnziiKpwv5iydwyA8SypAyDqRIB0uoCwQQ6IDJ/V38TtklXO54DYZFR+eFDIjw4K9X7ZARi3SB0A0WUeAZ39PxkWQ/4XswuAs06oaPPenfLC6KDlzoNqO0bwvULW9w2xoKUa7Xf3fWE5hPM3fpf5Zm+IEMP3BADhDwshNHUf1TZDbm2ooU+aAiDxQwWrIPw1NSKLG6a32aBrIrOFCObVILwH3WHMXAjwOa6e/UP+N00HkAhhZ0ezqQCqv23WzhNilh6aYM56rBgabfO9AbFobmAfAJxFoCEbw9WSfdVomkJ9cQARqwFcTbVNnlXl7Kq1AARVIyBvV7l8+bMS0xTqi88BIrbIAWvKSyV6aZVpCvXZIwcIB0CXEwGCydcC2+SqojdMU6jPHl2ATy+RLRwFOi0GQIsIZ5MWOT+Z7j95OYKWkfwPEhDiL9KotmkAAAAASUVORK5CYII=);
  width:64px;
  height:64px;
  background-size:cover;
  position: fixed;
  z-index:100;
  top: 30vh;
  left: 48vw;

  animation: 
    swipeLeftRight 3s ease-in-out forwards,
    fadeOut 3.5s forwards;
}}

@keyframes swipeLeftRight {
  0% {
   left:48vw;
  }
  20% {
   left:52vw;
  }
  40% {
    left:48vw;
  }
    60% {
    left:52vw;
  }
    80% {
    left:48vw;
  }
  100% {
    left:52vw;
  }
}

@keyframes fadeOut {
  0% {
    opacity: 1;
    visibility: visible;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    visibility: hidden;
  }
}  */