* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
html {
    overflow-y: hidden;
}
body {
    height: 100vh;
    overflow-x: scroll;
    overflow-y: hidden;
    scroll-behavior: smooth;
}
/* html:focus-within {
    scroll-behavior: smooth;
} */
.main {
    width: 600vw;
    height: 100vh;
    /* scroll-behavior: smooth; */
}
.sections {
    width: 100vw;
    height: 100vh;
    display: block;
    float: left;
    position: relative;
}
#section0 {
    background-color: white;
}
#section1 {
    background-color: #BBBDBF;
}
#section2 {
    background-color: #cfc3ad;
}
#section3 {
    background-color: #b6b6b6;
}
#section4 {
    background-color: #cfc3ad;
}
#section5 {
    background-color: #b6b6b6;
}
#anim00, #anim01, #anim02, #anim03, #anim04, #anim05 {
    width: 100%;
    height: 700px;
    align-items: center;
    text-align: center;
    margin: 0;
    position: absolute;
    display: block;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
} 
#anim01 {
    height: 800px;
}
#anim00v, #anim01v, #anim02v, #anim03v, #anim04v, #anim05v {
    width: 100%;
    height: 650px;
    align-items: center;
    text-align: center;
    margin: 0;
    position: absolute;
    display: none;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
} 

/* #anim02 {
    width: 100%;
    height: 1200px;
    align-items: center;
    text-align: center;
    margin: 0;
    position: absolute;
    display: block;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}  */
.titles {
    /* align-items: flex-end; */
    float: right;
    text-align: right;
}
h1 {
    color: #ffffff;
    text-decoration: none;
    font-family: 'Open Sans', sans-serif;
    font-size: 43px;
    font-weight: 300;
    text-align: right;
    position: relative;
    margin-right: 60px;
    margin-top: 40px;
    /* margin-top: 30px; */
    padding-bottom: 30px;
    z-index: 1;
}
h2 {
    color: #ffffff;
    text-decoration: none;
    font-family: 'Open Sans', sans-serif;
    font-size: 18px;
    font-weight: 400;
    text-align: right;
    position: relative;
    margin-right: 60px;
    z-index: 1;
}
nav {
    position: fixed;
    z-index: 2;
    padding: 1rem;
    top: 50%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}
nav a {
    list-style: none;
    text-decoration: none;
    color: rgb(150, 150, 150);
    font-size: large;
}
nav a:hover {
    color: rgb(82, 82, 82);
}
.navarrow0, .navarrow1, .navarrow2, .navarrow3, .navarrow4, .navarrow5, .navarrow6 {
    position: absolute;
    background-image: url(images/arrd-R-off.svg);
    background-repeat: no-repeat;
    background-size: 40%;
    z-index: 1;
    padding: 1.5rem;
    top: 50%;
    right: 0;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}
.navarrow0:hover, .navarrow1:hover, .navarrow2:hover, .navarrow3:hover, .navarrow4:hover, .navarrow5:hover, .navarrow6:hover {
    background-image: url(images/arrd-R-on.svg);
}
.scrbox .caption, .scrbox1 .caption1, .scrbox2 .caption2, .scrbox3 .caption3,
.scrbox4 .caption4, .scrbox5 .caption5, .scrbox6 .caption6 {
  visibility: hidden;
  position: absolute;
  z-index: 1;
}
.scrbox:hover .caption, .scrbox1:hover .caption1, .scrbox2:hover .caption2, .scrbox3:hover .caption3,
.scrbox4:hover .caption4, .scrbox5:hover .caption5, .scrbox6:hover .caption6 {
  visibility: visible;
  display: inline-block;
  /* stop breaking lines */
  white-space: nowrap; 
  /* that's it stop looking */
  font-family: 'Open Sans', sans-serif;
  font-size: 17px;
  font-weight: 400;
  color: rgb(109, 109, 109);
  text-decoration: none;
  margin-left: 10px;
}
.scrbox, .scrbox1, .scrbox2, .scrbox3, .scrbox4, .scrbox5 {
    font-family: 'Open Sans', sans-serif;
    font-size: 17px;
    font-weight: 800;
    padding: 0.5rem;
}
/* cheeseburger... :) - START */
.mobilescreen {
    background-color: transparent;
}
#menuToggle {
    display: block;
    position: relative;
    margin-top: 15px;
    margin-bottom: 20px;
    z-index: 2;
    -webkit-user-select: none;
    user-select: none;
}
#menuToggle input {
    display: block;
    width: 40px;
    height: 32px;
    position: absolute;
    top: -7px;
    cursor: pointer;
    opacity: 0;
    padding: 2;
    z-index: 2;
    -webkit-touch-callout: none;
}
#menuToggle span {
    display: block;
    width: 26px;
    height: 2px;
    margin-left: 8px;
    margin-bottom: 5px;
    position: relative;
    background: rgb(109, 109, 109);
    border-radius: 3px;
    z-index: 1;
    transform-origin: 3px 0px;
    transition: transform 0.2s cubic-bezier(0.77,0.2,0.05,1.0),
        background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
        opacity 0.55s ease;
}
#menuToggle span:first-child {
    transform-origin: 0% 0%;
}
#menuToggle span:nth-last-child(2) {
    transform-origin: 0% 100%;
}
#menuToggle input:checked ~ span {
    opacity: 1;
    transform: rotate(45deg) translate(-2px, -1px);
    background: #ffffff;
}

#menuToggle input:checked ~ span:nth-last-child(3) {
    opacity: 0;
    transform: rotate(0deg) scale(0.2, 0.2);
}
#menuToggle input:checked ~ span:nth-last-child(2) {
    opacity: 1;
    transform: rotate(-45deg) translate(0, -1px);
}
/*This is the Menu part, which gets triggered by toggle*/
#menu {
    position: absolute;
    width: 100vw;
    height: 320vh;
    margin: -850px 0 0 -16px;
    padding: 50px;
    padding-top: 480px;
    background: #F7941D;
    background-image: url(images/toggle-background.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: 100% 10%;
    list-style-type: none;
    transform-origin: 0 0;
    transform: translate(-100%, 0);
    transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
    text-align: center;
}
#menu li {
    padding: 4px 0;
    color: #000000;
    list-style-type: none;
    font-size: 1.5em;
    font-weight: 300;
}
#menu li a {
    color: #ffffff;
    text-decoration: none;
    font-family: 'Spartan', sans-serif;
    font-size: 22px;
    font-weight: 400;
    letter-spacing: -1px;
}
#menu li a:hover {
    color: #4d4d4d;
    text-decoration: none;
}
#menuToggle input:checked ~ ul {
    transform: scale(1.0, 1.0);
    opacity: 1;
}
.mt {
    color: #313131;
    text-decoration: none;
    font-family: 'Spartan', sans-serif;
    font-size: 23px;
    font-weight: 300;
    padding-top: 25px;
}
.menu .mta {
    color: #ffffff;
    text-decoration: none;
    font-family: 'Spartan', sans-serif;
    font-size: 22px;
    font-weight: 400;
    display: inline-block;
    letter-spacing: -1px;
}
#jslash {
    font-family: 'Open Sans', sans-serif;
    font-size: 22px;
    font-weight: 500;
    color: #313131;
}
li {
    list-style-type: none;
    list-style: none;
}
#menu .mta:hover {
    color: #4d4d4d;
    text-decoration: none;
}
/* cheeseburger... :) - END */
@media only screen and (max-width: 1750px) {
    h1 {
        font-size: 40px;
        margin-right: 60px;
        margin-top: 40px;
        padding-bottom: 20px;
    }
    h2 {
        font-size: 17px;
        margin-right: 60px;
    }
}
@media only screen and (max-width: 1550px) {
    #anim00, #anim01, #anim02, #anim03, #anim04, #anim05 {
        width: 100%;
        height: 600px;
    }
    #anim01 {
        height: 750px;
    }
    h1 {
        font-size: 38px;
    }
    #menu {
        margin: -790px 0 0 -16px;
        background-position: 100% 20%;
    }
    #menu li a, #jslash {
        font-size: 20px;
        line-height: 20px;
        padding-bottom: -5px;
    }
    .mt {
        font-size: 21px;
        padding-top: 10px;
    }
}
@media only screen and (max-width: 1350px) {
    #anim00, #anim02, #anim03, #anim04, #anim05 {
        width: 100%;
        height: 550px;
    }
    h1 {
        font-size: 36px;
    }
    #menu li a, #jslash {
        font-size: 18px;
    }
    .mt {
        font-size: 19px;
    }
}
@media only screen and (max-width: 1200px) {
    #anim00, #anim02, #anim03, #anim04, #anim05 {
        width: 100%;
        height: 500px;
        margin-top: 10px;
    }
    h1 {
        font-size: 34px;
        margin-right: 50px;
        margin-top: 35px;
        padding-bottom: 15px;
    }
    h2 {
        font-size: 16px;
        margin-right: 50px;
    }
    #menu {
        margin: -730px 0 0 -16px;
    }
    #menu li a, #jslash {
        font-size: 16px;
        line-height: 10px;
        padding-top: -40px;
    }
    .mt {
        font-size: 17px;
        padding-top: 5px;
        padding-bottom: -30px;
    }
    #menu .mt {
        margin-bottom: -9px;
    }
}
@media only screen and (max-width: 1000px) {
    #anim00, #anim02, #anim03, #anim04, #anim05 {
        width: 100%;
        height: 400px;
        margin-top: 20px;
    }
    h1 {
        font-size: 31px;
        margin-right: 40px;
        margin-top: 30px;
        padding-bottom: 15px;
    }
    h2 {
        font-size: 15px;
        margin-right: 40px;
    }
    .scrbox:hover .caption, .scrbox1:hover .caption1, .scrbox2:hover .caption2, .scrbox3:hover .caption3,
    .scrbox4:hover .caption4, .scrbox5:hover .caption5, .scrbox6:hover .caption6 {
    font-size: 15px;
    }
}
@media only screen and (max-width: 800px) {
    #anim00, #anim02, #anim03, #anim04, #anim05 {
        width: 100%;
        height: 330px;
        margin-top: 30px;
    }
    h1 {
        font-size: 28px;
    }
}
@media only screen and (max-width: 700px) {
    #anim00, #anim02, #anim03, #anim04, #anim05 {
        width: 100%;
        height: 300px;
        margin-top: 35px;
    }
    #anim01 {
        width: 120%;
        height: 650px;
    }
    #anim00, #anim01, #anim02, #anim03, #anim04, #anim05 {
        display: none;
    }
    #anim00v, #anim01v, #anim02v, #anim03v, #anim04v, #anim05v {
        display: block;
    }
    #anim00v {
        width: 70%;
    }
    #anim04v {
        max-width: 90%;
        margin-top: 40px;
        margin-left: 15px;
    }
    #anim05v {
        height: 650px;
    }
    #anim03v {
        margin-top: 35px;
        width: 85%;
    }
    #anim02v {
        height: 680px;
        margin-top: 35px;
    }
    #menu {
        margin: -720px 0 0 -16px;
    }
    h1 {
        margin-right: 30px;
        margin-top: 20px;
    }
    h2 {
        margin-right: 30px;
    }
}
@media only screen and (max-width: 600px) {
    #anim00, #anim02, #anim03, #anim04, #anim05 {
        width: 100%;
        height: 250px;
        margin-top: 35px;
    }
    #anim02v {
        height: 620px;
    }
    #anim04v {
        height: 550px;
    }
    #anim03v {
        height: 650px;
    }
    #anim05v {
        height: 600px;
    }
    #menu {
        margin: -700px 0 0 -16px;
    }
}
@media only screen and (max-width: 550px) {
    #anim00, #anim02, #anim03, #anim04, #anim05 {
        width: 90%;
        height: 250px;
        margin-top: 5px;
    }
    #anim02v {
        height: 540px;
    }
    #anim04v {
        height: 470px;
    }
    #anim05v {
        height: 550px;
        margin-left: 20px;
    }
}