html {
    scroll-behavior: smooth;
    scroll-snap-type: y mandatory;
}
html::-webkit-scrollbar {
  display: none;
}
#html{
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

html, body {margin : 0px; padding: 0px; height: 100%; width: 100%; text-align: center;background-color: #000000;
            /*overflow-y: hidden; scroll-snap-type: y mandatory; scroll-behavior: smooth;*/}
section {min-height : 100%; width : 100%; scroll-snap-align: start;}
a{text-decoration: none;}
li{list-style-type: none;}
@font-face{
    font-family: GeosansLight;
    src: url('../fonts/GeosansLight.ttf');
}
h1, h2, a {font-family: GeosansLight; color: #858585; font-weight: 500;}
h1 {font-size: 52pt;}
h3 {font-size: 76.611pt; transition: .3s;}
h4 {font-size: 42.574pt; transition: .3s;}
p {font-size: 35pt;}
h4, p {font-family: 'myriad-pro';}
hr {height: 2px;border: 0px; margin: -15px 0px 0px 0px;}
#logo, header nav ul li a {transition: all 300ms; -webkit-transition: all 300ms;-moz-transition: all 300ms;-o-transition: all 300ms;}

/*_____________________________________________GENERAL:_RESPONSIVE_BREAKPOINTS___*/

/*_____________600px, 601px, 768px, 992px; 1200px;_____________*/

@media (max-width: 600px){
   section {min-height : 100lvh; width : 100vw; left: 0;}
    .startLine {margin: 0;}
}

@media (min-width: 601px){
    section {min-height : 100%; width : 100%; left: 0;}
}

@media (min-width: 768px){
    section {min-height : 100%; width : 100%; left: 0;}
}

@media (min-width: 992px){
    section {min-height : 100%; width : 100%; left: 0;}
}

/*____________________________________________________HEADER___*/

header{
    width: 100%;
    height: 130px;
    background-color: #1e1e1e;
    opacity: .93;
    position: fixed;
    top: 0px;
    left: 0px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
    z-index: 100;
}

#logoAndNames{
    width: 550px;
    height: 100%;
    float: left;
}
#logoAndNames div{
    float: left;
}
header logoAndNames{
    height: 100%;
}
#logo{
    width: 23%;
    height: 100%;
    margin: 0px;
    float:left;
    opacity: .4;
}
#logo img{
    width:100%;
}
#logo:hover{
    opacity: 1;
}
#logoAndNames names{
    height: 100%;
}
#skills{
    font-size: 29pt;
}
#logoAndNames #names h1{
    margin:0px;
}
header #mainNav{
    float: right;
    margin: 20px 3% 0px 0px;
}
header #mainNav ul li{
    float: left;
    margin-right: 40px;
}

header #mainNav ul li a{
    font-size: 37pt;
}
#navMenuButton{
    transition: 1s;
    float: right;
    width: 100px;
    height: 100px;
    margin: 15px -500px 0px 0px;
}
header #navMenu{
    position: absolute;
    background-color: #1e1e1e;
    width: 100%;
    z-index: 99;
}
header #navMenu ul li{
    text-align: right;
    float: left;
    margin: 0px 1em 20px 0px;
}
header #navMenu nav ul li a{
    font-size: 17pt;
}
#navMenuList{
    background-color: #1e1e1e;
    display: flex;
    flex-flow: column;
    margin: 0px 0px 0px 0px;
}
header .headerLines{
    width: 100%;
    height:1px;
    background: #ffffff;
    margin-top: -10px;
}
.position{
    transition: .5s;
    width: 0%;
    height: 0px;
    background: #000000;
    margin-top: 2px;
    opacity: 0;
}
.active{
    transition: .5s;
    width: 100%;
    height: 1px;
    background: #ffffff;
    margin-top: 2px;
    opacity: 1.0;
}
.menuOff{
    transition: .5s;
    opacity: 0;
    top: -100vh;
}
.menuOn{
    transition: .5s;
    opacity: 1;
    top: 130px;
}

/*_____________________________________________HEADER:_RESPONSIVE_BREAKPOINTS___*/

/*_____________600px, 601px, 768px, 992px; 1200px;_____________*/

@media (max-width: 600px) and (orientation: portrait){
    header{
        width: 100%;
        height: 12vh;
    }
    #logoAndNames{
        width: 75%;
    }
    #logoAndNames #logo{
        width: 24%;
        height: 100%;
        margin: 2% 0px 0px 0px;
        float:left;
    }
    #logoAndNames #names{
        width: 76%;
        margin-top: 1.5%;
    }
    #myName{
        font-size: 8.4vw;
        font-weight: 500;
    }
    #myName:hover{
        color: #ffffff;
        font-size: 8.4vw;
        font-weight: 500;
    }
    #skills{
        font-size: 4.8vw;
        font-weight: 500;
    }
    #skills:hover{
        color: #ffffff;
        font-size: 4.8vw;
        font-weight: 500;
    }
    header #mainNav{
        position: absolute;
        float:left;
        margin-left: 100%;
    }
    #navMenuButton{
        transition: 1s;
        float: right;
        width: 18%;
        height: 18vw;
        margin: 1.5% 2% 0px 0px;
    }
    #names .headerLines{
        margin-top: -2%;
    }
    .menuOn{
        transition: .5s;
        opacity: 1;
        top: 12vh;
    }
}

@media (max-height: 600px) and (orientation: landscape){
    header{
        width: 100%;
        height: 12vh;
    }
    #logoAndNames{
        width: 74%;
    }
    #logoAndNames #logo{
        width: 8%;
        height: 100%;
        margin: -.5% 0px 0px 0px;
        float:left;
    }
    #logoAndNames #names{
        width: 30%;
        margin-top: -1%;
    }
    #myName{
        font-size: 3.6vw;
        font-weight: 500;
    }
    #myName:hover{
        color: #ffffff;
        font-size: 3.6vw;
        font-weight: 500;
    }
    #skills{
        font-size: 1.8vw;
        font-weight: 500;
    }
    #skills:hover{
        color: #ffffff;
        font-size: 1.8vw;
        font-weight: 500;
    }
    header #mainNav{
        position: absolute;
        float:left;
        margin-left: 100%;
    }
    #navMenuButton{
        transition: 1s;
        float: right;
        width: 5%;
        height: 5vw;
        margin: .25% 1% 0px 0px;
    }
    #names .headerLines{
        margin-top: -2%;
    }
    .menuOn{
        transition: .5s;
        opacity: 1;
        top: 12vh;
    }
}

@media (min-width: 601px) and (orientation: portrait){
    header{
        width: 100vw;
        height: 12vh;
    }
    #logoAndNames{
        width: 75%;
    }
    #logoAndNames #logo{
        width: 24%;
        height: 100%;
        margin: -1% 0px 0px 0px;
        float:left;
    }
    #logoAndNames #names{
        width: 70%;
        margin-top: 1.5%;
    }
    #myName{
        font-size: 8.4vw;
        font-weight: 500;
    }
    #myName:hover{
        color: #ffffff;
        font-size: 8.4vw;
        font-weight: 500;
    }
    #skills{
        font-size: 4.8vw;
        font-weight: 500;
    }
    #skills:hover{
        color: #ffffff;
        font-size: 4.8vw;
        font-weight: 500;
    }
    header #mainNav{
        position: absolute;
        float:left;
        margin-left: 100%;
    }
    #navMenuButton{
        transition: 1s;
        float: right;
        width: 100px;
        height: 100px;
        margin: .5% 2% 0 0;
    }
    .menuOn{
        transition: .5s;
        opacity: 1;
        top: 12vh;
    }
    
}

@media (min-height: 601px) and (orientation: landscape){
    header{
        width: 100vw;
        height: 12vh;
    }
    #logoAndNames{
        width: 75%;
    }
    #logoAndNames #logo{
        width: 12%;
        height: 100%;
        margin: -.5% 0px 0px 0px;
        float:left;
    }
    #logoAndNames #names{
        width: 37%;
        margin-top: 0%;
    }
    #myName{
        font-size: 4.6vw;
        font-weight: 500;
    }
    #myName:hover{
        color: #ffffff;
        font-size: 4.6vw;
        font-weight: 500;
    }
    #skills{
        font-size: 2.6vw;
        font-weight: 500;
    }
    #skills:hover{
        color: #ffffff;
        font-size: 2.6vw;
        font-weight: 500;
    }
    #names .headerLines{
        margin-top: -2.5%;
    }
    header #mainNav{
        position: absolute;
        float:left;
        margin-left: 100%;
    }
    #navMenuButton{
        transition: 1s;
        float: right;
        width: 8.5vw;
        height: 8.5vw;
        margin: 0 1% 0 0;
    }
    .menuOn{
        transition: .5s;
        opacity: 1;
        top: 12vh;
    }
    
}

@media (min-width: 768px) and (orientation: portrait){
    header{
        width: 100vw;
        height: 10vh;
    }
    #logoAndNames{
        width: 75%;
    }
    #logoAndNames #logo{
        width: 11vh;
        height: 100%;
        margin: -1% 0px 0px 0px;
        float:left;
    }
    #logoAndNames #names{
        width: 56%;
        margin-top: 0.5%;
    }
    #myName{
        font-size: 7vw;
        font-weight: 500;
    }
    #myName:hover{
        color: #ffffff;
        font-size: 7vw;
        font-weight: 500;
    }
    #skills{
        font-size: 3.9vw;
        font-weight: 500;
    }
    #skills:hover{
        color: #ffffff;
        font-size: 3.9vw;
        font-weight: 500;
    }
    header #mainNav{
        position: absolute;
        float:left;
        margin-left: 100%;
    }
    #navMenuButton{
        transition: 1s;
        float: right;
        width: 8vh;
        height: 8vh;
        margin: 1vh 1.5vh 0 0;
    }
    .menuOn{
        transition: .5s;
        opacity: 1;
        top: 10vh;
    }
}

@media (min-height: 768px) and (orientation: landscape){
    header{
        width: 100vw;
        height: 10vh;
    }
    #logoAndNames{
        width: 75%;
    }
    #logoAndNames #logo{
        width: 11vh;
        height: 100%;
        margin: -.75% 0px 0px 0px;
        float:left;
    }
    #logoAndNames #names{
        width: 32%;
        margin-top: 0%;
    }
    #myName{
        font-size: 3.9vw;
        font-weight: 500;
    }
    #myName:hover{
        color: #ffffff;
        font-size: 3.9vw;
        font-weight: 500;
    }
    #skills{
        font-size: 2.2vw;
        font-weight: 500;
    }
    #skills:hover{
        color: #ffffff;
        font-size: 2.2vw;
        font-weight: 500;
    }
    #names .headerLines{
        margin-top: -2.5%;
    }
    header #mainNav{
        position: absolute;
        float:left;
        margin-left: 100%;
    }
    #navMenuButton{
        transition: 1s;
        float: right;
        width: 7vw;
        height: 7vw;
        margin: .25vh 1vh 0 0;
    }
    .menuOn{
        transition: .5s;
        opacity: 1;
        top: 10vh;
    }
    
}

@media (min-width: 992px) and (orientation: portrait){
    header{
        width: 100vw;
        height: 8vh;
    }
    #logoAndNames{
        width: 75%;
    }
    #logoAndNames #logo{
        width: 9vh;
        height: 100%;
        margin: -1% 0px 0px 0px;
        float:left;
    }
    #logoAndNames #names{
        width: 44%;
        margin-top: 0.5%;
    }
    #myName{
        font-size: 5.4vw;
        font-weight: 500;
    }
    #myName:hover{
        color: #ffffff;
        font-size: 5.4vw;
        font-weight: 500;
    }
    #skills{
        font-size: 3vw;
        font-weight: 500;
    }
    #skills:hover{
        color: #ffffff;
        font-size: 3vw;
        font-weight: 500;
    }
    header #mainNav{
        position: absolute;
        float:left;
        margin-left: 100%;
    }
    #navMenuButton{
        transition: 1s;
        float: right;
        width: 7vh;
        height: 7vh;
        margin: .5vh .5vh 0 0;
    }
    .menuOn{
        transition: .5s;
        opacity: 1;
        top: 8vh;
    }
}

@media (min-height: 992px) and (orientation: landscape){
    header{
        width: 100vw;
        height: 10vh;
    }
    #logoAndNames{
        width: 75%;
    }
    #logoAndNames #logo{
        width: 11vh;
        height: 100%;
        margin: -.75% 0px 0px 0px;
        float:left;
    }
    #logoAndNames #names{
        width: 32%;
        margin-top: 0%;
    }
    #myName{
        font-size: 3.9vw;
        font-weight: 500;
    }
    #myName:hover{
        color: #ffffff;
        font-size: 3.9vw;
        font-weight: 500;
    }
    #skills{
        font-size: 2.2vw;
        font-weight: 500;
    }
    #skills:hover{
        color: #ffffff;
        font-size: 2.2vw;
        font-weight: 500;
    }
    #names .headerLines{
        margin-top: -2.5%;
    }
    header #mainNav{
        position: absolute;
        float:left;
        margin-left: 100%;
    }
    #navMenuButton{
        transition: 1s;
        float: right;
        width: 7vw;
        height: 7vw;
        margin: .25vh 1vh 0 0;
    }
    .menuOn{
        transition: .5s;
        opacity: 1;
        top: 10vh;
    }
    
}

@media (min-height: 1300px) and (orientation: portrait){
    header{
        width: 100vw;
        height: 8vh;
    }
    header #logoAndNames{
        width: 75%;
        height: 100%;
    }
    #logoAndNames #logo{
        width: 9vh;
        height: 100%;
        margin: -1% 0px 0px 0px;
        float:left;
    }
    #logoAndNames #names{
        width: 37%;
        margin-top: 0%;
    }
    #myName{
        font-size: 4.4vw;
        font-weight: 500;
    }
    #myName:hover{
        color: #ffffff;
        font-size: 4.4vw;
        font-weight: bold;
    }
    #skills{
        font-size: 2.5vw;
        font-weight: 500;
    }
    #skills:hover{
        color: #ffffff;
        font-size: 2.5vw;
        font-weight: bold;
    }
    header #mainNav{
        position: absolute;
        float:left;
        margin-left: 100%;
    }
    #navMenuButton{
        transition: 1s;
        float: right;
        width: 7vh;
        height: 7vh;
        margin: .5vh 2vh 0 0;
    }
    .menuOn{
        transition: .5s;
        opacity: 1;
        top: 8vh;
    }
}

@media (min-width: 1300px) and (orientation: landscape){
    header{
        width: 100vw;
        height: 80px;
    }
    #logoAndNames{
        width: 350px;
        height: 100%;
        float: left;
    }
     #logoAndNames #logo{
        width: 23%;
        height: 100%;
        margin: 0px;
        float:left;
    }
    #logo img{
        width:100%;
    }
    #logo:hover{
        opacity: 1;
    }
    #logoAndNames #names{
        width: 77%;
        height: 100%;
    }
    #myName{
        font-size: 33pt;
        font-weight: 500;
    }
    #myName:hover{
        font-size: 33pt;
        font-weight: 500;
        color: #ffffff;
    }
    #skills{
        font-size: 19pt;
        font-weight: 500;
    }
    #skills:hover{
        font-size: 19pt;
        font-weight: 500;
        color: #ffffff;
    }
    header #mainNav{
        position: relative;
        float: right;
        height: 100%;
        margin: auto 3% auto 0px;
    }
    header #mainNav ul{
        position: relative;
        height: 80%;
        margin: 2.5% 0 2.5% 0;
    }
    #navMenuButton{
        transition: 1s;
        float: right;
        width: 100px;
        height: 100px;
        margin: 15px -500px 0px 0px;
    }
    header #mainNav ul li a{
        font-size: 25pt;
    }
    header #mainNav ul li a:hover, #myName:hover, #skills:hover{
        font-weight: 500;
        color: #ffffff;
    }
}

@media (min-height: 1650px) and (orientation: portrait){
    header{
        width: 100vw;
        height: 8vh;
    }
    #logoAndNames{
        width: 75%;
    }
    #logoAndNames #logo{
        width: 9vh;
        height: 100%;
        margin: -1% 0px 0px 0px;
        float:left;
    }
    #logoAndNames #names{
        width: 44%;
        margin-top: 0.5%;
    }
    #myName{
        font-size: 4.4vw;
        font-weight: 500;
    }
    #myName:hover{
        color: #ffffff;
        font-size: 5.4vw;
        font-weight: 500;
    }
    #skills{
        font-size: 3vw;
        font-weight: 500;
    }
    #skills:hover{
        color: #ffffff;
        font-size: 3vw;
        font-weight: 500;
    }
    header #mainNav{
        position: absolute;
        float:left;
        margin-left: 100%;
    }
    #navMenuButton{
        transition: 1s;
        float: right;
        width: 7vh;
        height: 7vh;
        margin: .5vh .5vh 0 0;
    }
    .menuOn{
        transition: .5s;
        opacity: 1;
        top: 8vh;
    }
}

@media (min-width: 1650px) and (orientation: landscape){
     header{
        width: 100%;
        height: 130px;
        background-color: #1e1e1e;
        opacity: .93;
        position: fixed;
        top: 0px;
        left: 0px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
        z-index: 100;
    }

    #logoAndNames{
        width: 550px;
        height: 100%;
        float: left;
    }
    #logoAndNames div{
        float: left;
    }
    header logoAndNames{
        height: 100%;
    }
    #logoAndNames #logo{
        width: 23%;
        height: 100%;
        margin: 0px;
        float:left;
    }
    #logo img{
        width:100%;
    }
    #logo:hover{
        opacity: 1;
    }
    #logoAndNames #names{
        width: 77%;
        height: 100%;
    }
    #myName{
        font-size: 52pt;
        font-weight: 500;
    }
    #myName:hover{
        font-size: 52pt;
        font-weight: bold;
    }
    #skills{
        font-size: 29pt;
        font-weight: 500;
    }
    #skills:hover{
        font-size: 29pt;
        font-weight: bold;
    }
    #logoAndNames #names h1{
        margin:0px;
    }
    header #mainNav ul li{
        float: left;
        margin-right: 40px;
    }

    header #mainNav ul li a{
        font-size: 37pt;
    }
    #navMenuButton{
        transition: 1s;
        float: right;
        width: 100px;
        height: 100px;
        margin: 15px -500px 0px 0px;
    }
    header #navMenu{
        position: absolute;
        width: 100%;
        z-index: 99;
    }
    header #navMenu ul li{
        text-align: right;
        float: left;
        margin: 0px 1em 20px 0px;
    }
    header #navMenu nav ul li a{
        font-size: 17pt;
    }
    #navMenuList{
        background-color: #fff;
        display: flex;
        flex-flow: column;
        margin: 0px 0px 0px 0px;
    }
    header .headerLines{
        width: 100%;
        background: #ffffff;
        margin-top: -10px;
    }
    .position{
        transition: .5s;
        width: 0%;
        height: 0px;
        background: #000000;
        margin-top: 2px;
        opacity: 0;
    }
    .active{
        transition: .5s;
        width: 100%;
        height: 1px;
        background: #ffffff;
        margin-top: 2px;
        opacity: 1.0;
    }
    .menuOff{
        transition: .5s;
        opacity: 0;
        top: -100vh;
    }
    .menuOn{
        transition: .5s;
        opacity: 1;
        top: 130px;
    }
    header #mainNav{
        position: relative;
        float: right;
        margin: 10px 3% 0px 0px;
    }
    #navMenuButton{
        transition: 1s;
        float: right;
        width: 100px;
        height: 100px;
        margin: 15px -500px 0px 0px;
    }
    header #mainNav ul li a:hover, #myName:hover, #skills:hover{
        font-weight: bold;
        color: #ffffff;
    }
}


/*____________________________________________________ANIMATIONS___*/

@keyframes blackBlendUp {
  0% {
    top: 0lvh;
  }
  100% {
    top:-100lvh;
  }
}
@keyframes slideInFromLeft {
  0% {
    left: -100%;
    opacity: 0.0;
  }
  75% {
    opacity: 0.0;    
    }
  100% {
    left: 1.5vw;
    opacity: 1.0;
  }
}
@keyframes slideInFromRight {
  0% {
    right: -100%;
    opacity: 0.0;
  }
  75% {
    opacity: 0.0;    
  }
  100% {
    right: 1.5vw;
    opacity: 1.0;
  }
}
@keyframes guideLineAppears {
  0% {
    width: 4px;
    height: 4px;
    margin: 52lvh 55% 0 45%;
    opacity: 0.0;
  }
  60% {
    width: 4px;
    height: 4px;
    margin: 52lvh 55% 0 45%;
    opacity: 0.0;
  }
  75% {
    width: 4px;
    height: 4px;
    margin: 52lvh 55% 0 45%;
    opacity: 1.0;    
    }
  100% {
    width: 1px;
    height: 14lvh;
    margin: 45lvh 55% 0 45%;
    opacity: 1.0;
  }
}
@keyframes guideLineAppearsPhoneLandscape {
  0% {
    width: 4px;
    height: 4px;
    margin: 52lvh 55% 0 45%;
    opacity: 0.0;
  }
  60% {
    width: 4px;
    height: 4px;
    margin: 52lvh 55% 0 45%;
    opacity: 0.0;
  }
  75% {
    width: 4px;
    height: 4px;
    margin: 52lvh 55% 0 45%;
    opacity: 1.0;    
    }
  100% {
    width: 1px;
    height: 20lvh;
    margin: 42lvh 55% 0 45%;
    opacity: 1.0;
  }
}
@keyframes zoom01 {
   0% {
    width: 600%;
    height: auto;
    left: -275vw;
  }
  100% {
    width: 400%;
    height: auto;
    left: -165vw;
  }
}
@keyframes zoom02 {
   0% {
    width: 550%;
    height: auto;
    top:-100lvh;
    left: -200vw;
  }
  100% {
    width: 480%;
    height: auto;
    top:-105lvh;
    left: -205vw;
  }
}
@keyframes zoom03 {
   0% {
    width: 350%;
    height: auto;
    top: -120lvh;
    left: -140vw;
  }
  100% {
    width: 450%;
    height: auto;
    top: -120lvh;
    left: -130vw;
  }
}


/*____________________________________________________GUIDE-CONTAINER___*/


#guideContainer{
    position: fixed;
    z-index: 80;
    width: 2px;
    height: 102lvh;
    margin: 0 55% auto 45%;
}
#guideContainer #guideLine{
    margin: 52lvh 0 0 0;
    width: 4px;
    height: 4px;
    opacity: 0;
    transition: all 600ms ease-in-out;
}
#guideContainer #guideLine.openerLine{
    animation-name: guideLineAppears;
    animation-duration: 2s;
    animation-timing-function: ease-out;
    animation-delay: 0s;
    animation-iteration-count: 1;
    animation-fill-mode: both;
    transition: all 600ms ease-in-out;
}
#guideContainer #guideLine.openerLineStop{
    width: 1px;
    height: 14lvh;
    margin: 45lvh 55% 0 45%;
    opacity: 1;
    transition: all 600ms ease-in-out;
}
#guideContainer #guideLine.descriptionLine{
    width: 1px;
    height: 85lvh;
    margin: 29.15lvh 0 0 0;
    opacity: 1.0;
    transition: all 600ms ease-in-out;
}
#guideContainer #guideLine.paragraph_01Line{
    width: 1px;
    height: 104lvh;
    margin: 0 0 0 0;
    opacity: 1.0;
    transition: all 600ms ease-in-out;
}
#guideContainer #guideLine.paragraph_02Line, #guideContainer #guideLine.paragraph_03Line, #guideContainer #guideLine.paragraph_04Line, #guideContainer #guideLine.paragraph_05Line, #guideContainer #guideLine.paragraph_06Line, #guideContainer #guideLine.paragraph_07Line{
    width: 1px;
    height: 104lvh;
    margin: 0 0 0 0;
    opacity: 1.0;
    transition: all 600ms ease-in-out;
}

/*_____________________________________________GUIDE-CONTAINER:_RESPONSIVE_BREAKPOINTS___*/

/*_____________600px, 601px, 768px, 992px; 1200px;_____________*/

@media (max-width: 600px) and (orientation: portrait){
    
    #guideContainer{
        position: fixed;
        z-index: 80;
        width: 2px;
        height: 102lvh;
        margin: 0 5% auto 95%;
    }
}

@media (max-height: 600px) and (orientation: landscape){

    #guideContainer{
        position: fixed;
        z-index: 80;
        width: 2px;
        height: 102lvh;
        margin: 0 55% auto 45%;
    }
}

@media (min-width: 601px) and (orientation: portrait){
    
    #guideContainer{
        position: fixed;
        z-index: 80;
        width: 2px;
        height: 102lvh;
        margin: 0 5% auto 95%;
    }
}

@media (min-height: 601px) and (orientation: landscape){
    
    #guideContainer{
        position: fixed;
        z-index: 80;
        width: 2px;
        height: 102lvh;
        margin: 0 55% auto 45%;
    }
}

@media (min-width: 768px) and (orientation: portrait){
    
    #guideContainer{
        position: fixed;
        z-index: 80;
        width: 2px;
        height: 102lvh;
        margin: 0 5% auto 95%;
    }
}

@media (min-height: 768px) and (orientation: landscape){

    #guideContainer{
        position: fixed;
        z-index: 80;
        width: 2px;
        height: 102lvh;
        margin: 0 55% auto 45%;
    }
}

@media (min-width: 992px) and (orientation: portrait){

    #guideContainer{
        position: fixed;
        z-index: 80;
        width: 2px;
        height: 102lvh;
        margin: 0 5% auto 95%;
    }
}

@media (min-height: 992px) and (orientation: landscape){

    #guideContainer{
        position: fixed;
        z-index: 80;
        width: 2px;
        height: 102lvh;
        margin: 0 55% auto 45%;
    }    
}

@media (min-height: 1300px) and (orientation: portrait){

    #guideContainer{
        position: fixed;
        z-index: 80;
        width: 2px;
        height: 102lvh;
        margin: 0 5% auto 95%;
    }
}

@media (min-width: 1300px) and (orientation: landscape){

    #guideContainer{
        position: fixed;
        z-index: 80;
        width: 2px;
        height: 102lvh;
        margin: 0 55% auto 45%;
    }
}

@media (min-height: 1650px) and (orientation: portrait){

    #guideContainer{
        position: fixed;
        z-index: 80;
        width: 2px;
        height: 102lvh;
        margin: 0 5% auto 95%;
    }
}

@media (min-width: 1650px) and (orientation: landscape){

    #guideContainer{
        position: fixed;
        z-index: 80;
        width: 2px;
        height: 102lvh;
        margin: 0 55% auto 45%;
    }
}

/*____________________________________________________OPENER___*/

#opener{
    position: relative;
    z-index: 75;
    width: 100lvw;
    height: 100lvh;
}
#opener #openerContent{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 80%;
    margin: 24% auto 0 auto;
}
#openerContent #projectTitle{
    width: 43.8%;
    height: 100%;
    background: #000000;
    text-align: right;
    overflow: hidden;
}
#openerContent #projectSpecs{
    width: 56.2%;
    height: 100%;
    background: #000000;
    text-align: left;
    overflow: hidden;
}
#projectTitle #titleDiv, #projectSpecs #specsDiv{
    position: relative;
    z-index: 81;
}
#projectTitle #titleDiv{
    right: -100%;
    animation-name: slideInFromRight;
    animation-play-state: paused;
    animation-duration: 2s;
    animation-timing-function: ease-out;
    animation-delay: 1s;
    animation-iteration-count: 1;
    animation-fill-mode: both;
    
}

#projectSpecs #specsDiv{
    right: 0%;
    left: -100%;
    animation-name: slideInFromLeft;
    animation-play-state: paused;
    animation-duration: 2s;
    animation-timing-function: ease-out;
    animation-delay: 1s;
    animation-iteration-count: 1;
    animation-fill-mode: both;
}
#specsFlex{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    row-gap: 0vw;
    column-gap: 0vw;
}

#openerContent h3, #openerContent h4{
    font-weight: 500;
    margin: 0;
    padding: 0;
    font-family: GeosansLight;
}
#openerContent h3{
    font-size: 90pt;
}
#openerContent h4{
    font-size: 31pt;
}
#openerContent #titleProj7{
    font-size: 86pt;
}

#openerVideo{
    position: fixed;
    float: left;
    top: 50lvh;
    left: 50vw;
    transform: translateY(-50%) translateX(-50%);
    min-width: 100vw;
    min-height: 100lvh;
    width: auto;
    height: auto;
    overflow: hidden;
    z-index: 1;
}
.backgroundCarousel{
    position: fixed;
    float: left;
    top: 50lvh;
    left: 50vw;
    transform: translateY(-50%) translateX(-50%);
    min-width: 100vw;
    min-height: 100lvh;
    width: auto;
    height: auto;
    overflow: hidden;
    z-index: 1;
}
.backgroundCarousel > ul{
    margin: 0;
    padding: 0;
    list-style: none;
}
.backgroundCarousel .backgroundSlide{
    position: absolute;
    inset: 0;
    transition: 300ms opacity ease-in-out;
    transition-delay: 0ms;
    z-index: 2;
    opacity: 0;
    width: 100%;
    height: auto;
    overflow: hidden;
    animation-name: none;
    animation-duration: 15s;
    animation-timing-function: linear;
    animation-delay: 0s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}
.backgroundSlide[data-active]{
    opacity: 1;
    transition-delay: 300ms;
    z-index: 1;
    animation-name: none;
    animation-duration: 15s;
    animation-timing-function: linear;
    animation-delay: 0s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}
.backgroundSlide img{
    display: block;
    width:100%;
    height:100%;
    object-fit: cover;
    filter: brightness(50%);
}

/*_____________________________________________OPENER:_RESPONSIVE_BREAKPOINTS___*/

/*_____________600px, 601px, 768px, 992px; 1200px;_____________*/

@media (max-width: 600px) and (orientation: portrait){
    
    #opener #openerContent{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 80%;
        margin: 47lvh auto 0 auto;
    }
    
    #openerContent #projectTitle{
        width: 100%;
        height: 50%;
        background: #000000;
        text-align: right;
        overflow: hidden;
    }
    #openerContent #projectSpecs{
        width: 100%;
        height: 50%;
        background: #000000;
        text-align: right;
        overflow: hidden;
    }
    
    #projectTitle #titleDiv{
        right: -100%;
        animation-name: slideInFromRight;
        animation-play-state: paused;
        animation-duration: 2s;
        animation-timing-function: ease-out;
        animation-delay: 1s;
        animation-iteration-count: 1;
        animation-fill-mode: both;

    }

    #projectSpecs #specsDiv{
        right: -100%;
        left: inherit;
        animation-name: slideInFromRight;
        animation-play-state: paused;
        animation-duration: 2s;
        animation-timing-function: ease-out;
        animation-delay: 1s;
        animation-iteration-count: 1;
        animation-fill-mode: both;
    }
    
    #specsFlex{
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
        row-gap: 0vw;
        column-gap: 3vw;
    }
    
    #openerContent h3{
        font-size: 8vw;
    }
    #openerContent h4{
        font-size: 5vw;
    }
    #openerContent #titleProj7{
        font-size: 8vw;
    }
    
    .backgroundSlide img{
        display: block;
        width:150%;
        height:150%;
        top: -100lvh;
        left: -100vw;
        object-fit: cover;
        filter: brightness(50%);
    }
    
}

@media (max-height: 600px) and (orientation: landscape){
    
    #opener #openerContent{
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        margin: 45lvh auto 0 auto;
    }
    
    #specsFlex{
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        row-gap: 0vw;
        column-gap: 0vw;
    }

    #openerContent h3{
        font-size: 5vw;
    }
    #openerContent h4{
        font-size: 3vw;
    }
    #openerContent #titleProj7{
        font-size: 4vw;
    }
    
}

@media (min-width: 601px) and (orientation: portrait){
    
    #opener #openerContent{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 80%;
        margin: 45.5lvh auto 0 auto;
    }
    
    #openerContent #projectTitle{
        width: 100%;
        height: 50%;
        background: #000000;
        text-align: right;
        overflow: hidden;
    }
    #openerContent #projectSpecs{
        width: 100%;
        height: 50%;
        background: #000000;
        text-align: right;
        overflow: hidden;
    }
    
    #projectTitle #titleDiv{
        right: -100%;
        animation-name: slideInFromRight;
        animation-play-state: paused;
        animation-duration: 2s;
        animation-timing-function: ease-out;
        animation-delay: 1s;
        animation-iteration-count: 1;
        animation-fill-mode: both;

    }

    #projectSpecs #specsDiv{
        right: -100%;
        left: inherit;
        animation-name: slideInFromRight;
        animation-play-state: paused;
        animation-duration: 2s;
        animation-timing-function: ease-out;
        animation-delay: 1s;
        animation-iteration-count: 1;
        animation-fill-mode: both;
    }
    
    #specsFlex{
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
        row-gap: 0vw;
        column-gap: 3vw;
    }
    
    #openerContent h3{
        font-size: 8vw;
    }
    #openerContent h4{
        font-size: 5vw;
    }
    #openerContent #titleProj7{
        font-size: 8vw;
    }
    
}

@media (min-height: 601px) and (orientation: landscape){

    #opener #openerContent{
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        margin: 47lvh auto 0 auto;
    }
    
    #specsFlex{
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        row-gap: 0vw;
        column-gap: 0vw;
    }

    #openerContent h3{
        font-size: 5vw;
    }
    #openerContent h4{
        font-size: 3vw;
    }
    #openerContent #titleProj7{
        font-size: 4vw;
    }
    
}

@media (min-width: 768px) and (orientation: portrait){

    #opener #openerContent{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 80%;
        margin: 47.5lvh auto 0 14%;
    }
    
    #openerContent #projectTitle{
        width: 100%;
        height: 50%;
        background: #000000;
        text-align: right;
        overflow: hidden;
    }
    #openerContent #projectSpecs{
        width: 100%;
        height: 50%;
        background: #000000;
        text-align: right;
        overflow: hidden;
    }
    
    #projectTitle #titleDiv{
        right: -100%;
        animation-name: slideInFromRight;
        animation-play-state: paused;
        animation-duration: 2s;
        animation-timing-function: ease-out;
        animation-delay: 1s;
        animation-iteration-count: 1;
        animation-fill-mode: both;

    }

    #projectSpecs #specsDiv{
        right: -100%;
        left: inherit;
        animation-name: slideInFromRight;
        animation-play-state: paused;
        animation-duration: 2s;
        animation-timing-function: ease-out;
        animation-delay: 1s;
        animation-iteration-count: 1;
        animation-fill-mode: both;
    }
    
    #specsFlex{
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
        row-gap: 0vw;
        column-gap: 3vw;
    }
    
    #openerContent h3{
        font-size: 5vw;
    }
    #openerContent h4{
        font-size: 3vw;
    }
    #openerContent #titleProj7{
        font-size: 5vw;
    }
    
}

@media (min-height: 768px) and (orientation: landscape){

    #opener #openerContent{
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        margin: 47lvh auto 0 auto;
    }
    
    #specsFlex{
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        row-gap: 0vw;
        column-gap: 0vw;
    }

    #openerContent h3{
        font-size: 5vw;
    }
    #openerContent h4{
        font-size: 3vw;
    }
    #openerContent #titleProj7{
        font-size: 4vw;
    }
    
}

@media (min-width: 992px) and (orientation: portrait){

    #opener #openerContent{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 80%;
        margin: 47.5lvh auto 0 14%;
    }
    
    #openerContent #projectTitle{
        width: 100%;
        height: 50%;
        background: #000000;
        text-align: right;
        overflow: hidden;
    }
    #openerContent #projectSpecs{
        width: 100%;
        height: 50%;
        background: #000000;
        text-align: right;
        overflow: hidden;
    }
    
    #projectTitle #titleDiv{
        right: -100%;
        animation-name: slideInFromRight;
        animation-play-state: paused;
        animation-duration: 2s;
        animation-timing-function: ease-out;
        animation-delay: 1s;
        animation-iteration-count: 1;
        animation-fill-mode: both;

    }

    #projectSpecs #specsDiv{
        right: -100%;
        left: inherit;
        animation-name: slideInFromRight;
        animation-play-state: paused;
        animation-duration: 2s;
        animation-timing-function: ease-out;
        animation-delay: 1s;
        animation-iteration-count: 1;
        animation-fill-mode: both;
    }
    
    #specsFlex{
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
        row-gap: 0vw;
        column-gap: 3vw;
    }
    
    #openerContent h3{
        font-size: 5vw;
    }
    #openerContent h4{
        font-size: 3vw;
    }
    #openerContent #titleProj7{
        font-size: 5vw;
    }
    
}

@media (min-height: 992px) and (orientation: landscape){

    #opener #openerContent{
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        margin: 47lvh auto 0 auto;
    }
    
    #specsFlex{
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        row-gap: 0vw;
        column-gap: 0vw;
    }

    #openerContent h3{
        font-size: 5vw;
    }
    #openerContent h4{
        font-size: 3vw;
    }
    #openerContent #titleProj7{
        font-size: 4vw;
    }
    
}

@media (min-height: 1300px) and (orientation: portrait){

    #opener #openerContent{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 80%;
        margin: 47.5lvh auto 0 14%;
    }
    
    #openerContent #projectTitle{
        width: 100%;
        height: 50%;
        background: #000000;
        text-align: right;
        overflow: hidden;
    }
    #openerContent #projectSpecs{
        width: 100%;
        height: 50%;
        background: #000000;
        text-align: right;
        overflow: hidden;
    }
    
    #projectTitle #titleDiv{
        right: -100%;
        animation-name: slideInFromRight;
        animation-play-state: paused;
        animation-duration: 2s;
        animation-timing-function: ease-out;
        animation-delay: 1s;
        animation-iteration-count: 1;
        animation-fill-mode: both;

    }

    #projectSpecs #specsDiv{
        right: -100%;
        left: inherit;
        animation-name: slideInFromRight;
        animation-play-state: paused;
        animation-duration: 2s;
        animation-timing-function: ease-out;
        animation-delay: 1s;
        animation-iteration-count: 1;
        animation-fill-mode: both;
    }
    
    #specsFlex{
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
        row-gap: 0vw;
        column-gap: 3vw;
    }
    
    #openerContent h3{
        font-size: 5vw;
    }
    #openerContent h4{
        font-size: 3vw;
    }
    #openerContent #titleProj7{
        font-size: 5vw;
    }
    
}

@media (min-width: 1300px) and (orientation: landscape){

    #opener #openerContent{
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        margin: 47lvh auto 0 auto;
    }
    
    #specsFlex{
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        row-gap: 0vw;
        column-gap: 0vw;
    }

    #openerContent h3{
        font-size: 5vw;
    }
    #openerContent h4{
        font-size: 3vw;
    }
    #openerContent #titleProj7{
        font-size: 4vw;
    }
    
}

@media (min-height: 1650px) and (orientation: portrait){

    #opener #openerContent{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 80%;
        margin: 47.5lvh auto 0 14%;
    }
    
    #openerContent #projectTitle{
        width: 100%;
        height: 50%;
        background: #000000;
        text-align: right;
        overflow: hidden;
    }
    #openerContent #projectSpecs{
        width: 100%;
        height: 50%;
        background: #000000;
        text-align: right;
        overflow: hidden;
    }
    
    #projectTitle #titleDiv{
        right: -100%;
        animation-name: slideInFromRight;
        animation-play-state: paused;
        animation-duration: 2s;
        animation-timing-function: ease-out;
        animation-delay: 1s;
        animation-iteration-count: 1;
        animation-fill-mode: both;

    }

    #projectSpecs #specsDiv{
        right: -100%;
        left: inherit;
        animation-name: slideInFromRight;
        animation-play-state: paused;
        animation-duration: 2s;
        animation-timing-function: ease-out;
        animation-delay: 1s;
        animation-iteration-count: 1;
        animation-fill-mode: both;
    }
    
    #specsFlex{
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
        row-gap: 0vw;
        column-gap: 3vw;
    }
    
    #openerContent h3{
        font-size: 5vw;
    }
    #openerContent h4{
        font-size: 3vw;
    }
    #openerContent #titleProj7{
        font-size: 5vw;
    }
    
}

@media (min-width: 1650px) and (orientation: landscape){
    #opener #openerContent{
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        width: 80%;
        margin: 23% auto 0 auto;
    }
    #openerContent #projectTitle{
        width: 43.8%;
        height: 100%;
        background: #000000;
        text-align: right;
        overflow: hidden;
    }
    #openerContent #projectSpecs{
        width: 56.2%;
        height: 100%;
        background: #000000;
        text-align: left;
        overflow: hidden;
    }
    #projectTitle #titleDiv{
        right: -100%;
        animation-name: slideInFromRight;
        animation-play-state: paused;
        animation-duration: 2s;
        animation-timing-function: ease-out;
        animation-delay: 1s;
        animation-iteration-count: 1;
        animation-fill-mode: both;

    }

    #projectSpecs #specsDiv{
        right: 0%;
        left: -100%;
        animation-name: slideInFromLeft;
        animation-play-state: paused;
        animation-duration: 2s;
        animation-timing-function: ease-out;
        animation-delay: 1s;
        animation-iteration-count: 1;
        animation-fill-mode: both;
    }
    #specsFlex{
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        row-gap: 0vw;
        column-gap: 0vw;
    }
    #openerContent h3, #openerContent h4{
        font-weight: 500;
        margin: 0;
        padding: 0;
        font-family: GeosansLight;
    }
    #openerContent h3{
        font-size: 90pt;
    }
    #openerContent h4{
        font-size: 31pt;
    }
    #openerContent #titleProj7{
        font-size: 86pt;
    }
    .backgroundSlide img{
        display: block;
        width:100%;
        height:100%;
        object-fit: cover;
        filter: brightness(50%);
    }
}
/*____________________________________________________BLACK-BLEND___*/

.blackBlend{
    position: relative;
    float: left;
    width: 100lvw;
    height: 102lvh;
    margin: 0 0 0 0;
    padding: 0;
    z-index: 75;
    background-image: linear-gradient(0deg, #000000, transparent);
}
.blackLayer{
    position: absolute;
    float: left;
    width: 100lvw;
    height: 100lvh;
    margin: 100lvh 0 0 0;
    padding: 0;
    z-index: 75;
    background-color: #000000;
}
#blendContainer{
    position: absolute;
    float: left;
    width: 100lvw;
    height: 204lvh;
    margin: 0;
    padding: 0;
    background-color: transparent;
    /*
    animation-name: blackBlendUp;
    animation-play-state: paused;
    animation-duration: 1s;
    animation-timing-function: ease-out;
    animation-delay: 0s;
    animation-iteration-count: 1;
    animation-fill-mode: both;*/
}
.blackBlendDown{
    top: 0lvh;
    transition: all 200ms ease-in-out;
}
.blackBlendUp{
    top:-100lvh;
    transition: all 1000ms ease-in-out;
}

/*____________________________________________________DESCRIPTION___*/

#description{
    position: relative;
    float: left;
    width: 100lvw;
    height: 100lvh;
    z-index: 75;
}
#description #descriptionContent{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 80%;
    height: 102%;
    margin: 0 auto 0 auto;
    
}
.leftContent, .rightContent{
    position: relative;
    height: 100lvh;
}
#description #descriptionContent .leftContent{
    width: 43.8%;
    text-align: right;
    overflow: hidden;
}
#description #descriptionContent .rightContent{
    width: 56.2%;
    text-align: left;
    overflow: hidden;
}
.rightContent #textContainer{
    position: relative;
    margin-top: 30lvh;
    left: -100%;
    animation-name: slideInFromLeft;
    animation-play-state: paused;
    animation-duration: 2s;
    animation-timing-function: ease-out;
    animation-delay: 1s;
    animation-iteration-count: 1;
    animation-fill-mode: both;
    z-index: 75;
}
.rightContent #textContainer h4{
    font-family: GeosansLight;
    font-weight: 500;
    font-size: 39pt;
    color: #858585;
    margin: 0px;
}
#textContainer hr{
    background-image: linear-gradient(90deg, #fff, transparent);
    margin: 1vh 0 2vh 0;
}
.rightContent #textContainer p{
    font-size: 30pt;
    color: #858585;
    margin: 0px;
    width: 95%;
}
.rightContent #textContainer #softRefs{
    margin-top: 3vw;
    padding-right: 1.5vw;
    text-align: right;
    font-family: GeosansLight;
    font-weight: 500;
    font-size: 1vw;
    opacity: .5;
}
#softRefs::before{
    content: "Software: ";
    color: #fff;
    font-size: 1.25vw;
    opacity: .7;
}
.leftContent #imageContainer{
    position: relative;
    text-align: left;
    width: 30vw;
    height: 30vw;
    margin-top: 22lvh;
    right: -100%;
    animation-name: slideInFromRight;
    animation-play-state: paused;
    animation-duration: 2s;
    animation-timing-function: ease-out;
    animation-delay: 1s;
    animation-iteration-count: 1;
    animation-fill-mode: both;
    z-index: 75;
}
#imageContainer .slides{
    position: absolute;
    width: 100%;
    height: 100%;
    margin: 0%;
    opacity: 0;
    z-index: 50;
    transition: 200ms opacity ease-in-out;
    transition-delay: 200ms;
}
#imageContainer .activeImg{
    opacity: 1;
    z-index: 75;
    transition-delay: 0ms;
}
#imageContainer a img{
    display: block;
    width:100%;
    height:100%;
    object-fit: cover;
    object-position: center;
}
#imageContainer video{
    display: block;
    width:100%;
    height:100%;
    object-fit: contain;
    object-position: center;
}
.leftContent .slider-nav{
    display: flex;
    justify-content: center;
    position: absolute;
    column-gap: 1rem;
    left: 47.5%;
    bottom: 22%;
    transform: translateX(-47.5%);
    width: 80%;
    height: 5%;
    padding-right: 6.5vw;
    opacity: 0;
    z-index: 76;
    animation-name: slideInFromRight;
    animation-play-state: running;
    animation-duration: 2s;
    animation-timing-function: ease-out;
    animation-delay: 1s;
    animation-iteration-count: 1;
    animation-fill-mode: both;
}
.imgSelection{
    width: 1.5vw;
    height: 1.5vw;
    opacity: .6;
    filter: brightness(100%);
    transition:250ms;
}
.imgSelection:hover{
    opacity: 1;
    filter: brightness(120%);
}
.activeSlide{
    opacity: 1;
    filter: brightness(200%);
}
.imgSelection img{
    width: 100%;
    height: 100%;
}

/*_____________________________________________DESCRIPTION:_RESPONSIVE_BREAKPOINTS___*/

/*_____________600px, 601px, 768px, 992px; 1200px;_____________*/

@media (max-width: 600px) and (orientation: portrait){
    #description #descriptionContent{
        display: flex;
        flex-direction: column;
        align-items:flex-start;
        justify-content: center;
        width: 80%;
        height: 102%;
        margin: 0 auto 0 auto;
    }
    #description #descriptionContent .leftContent{
        width: 100%;
        height: 135lvh;
        margin-top: 5lvh;
        text-align: right;
        overflow: hidden;
    }
    #description #descriptionContent .rightContent{
        width: 100%;
        text-align: left;
        overflow: hidden;
    }
    .rightContent #textContainer{
        position: relative;
        margin-top: 0lvh;
        margin-left: 2vw;
        right: -100%;
        left: inherit;
        animation-name: slideInFromRight;
        animation-play-state: paused;
        animation-duration: 2s;
        animation-timing-function: ease-out;
        animation-delay: 1s;
        animation-iteration-count: 1;
        animation-fill-mode: both;
        z-index: 76;
    }
    .leftContent #imageContainer{
        position: relative;
        width: 100%;
        height: 70%;
        margin-top: 10lvh;
        right: -100%;
        animation-name: slideInFromRight;
        animation-play-state: paused;
        animation-duration: 2s;
        animation-timing-function: ease-out;
        animation-delay: 1s;
        animation-iteration-count: 1;
        animation-fill-mode: both;
        z-index: 75;
    }
    #imageContainer a img{
        display: block;
        width:100%;
        height:100%;
        object-fit: cover;
        object-position: center;
    }
    #imageContainer video{
        display: block;
        width:100%;
        height:100%;
        object-fit: contain;
        object-position: center;
        margin-left: 1.5vw;
    }
    .rightContent #textContainer h4{
        font-size: 6vw;
        margin: 0px;
    }
    .rightContent #textContainer p{
        width: 100%;
        font-size: 4vw;
        margin: 0px;
    }
    .rightContent #textContainer #softRefs{
        width: 100%;
        margin-top: 1lvh;
        padding-right: 1.5vw;
        text-align: right;
        font-family: GeosansLight;
        font-weight: 500;
        font-size: 2.25vw;
        color: #e9e9e9;
        opacity: .8;
    }
    #softRefs::before{
        content: "Software: ";
        color: #fff;
        font-size: 2.75vw;
        opacity: .8;
    }
    .leftContent .slider-nav{
        display: flex;
        justify-content: center;
        position: absolute;
        column-gap: 1rem;
        left: 50%;
        bottom: 1%;
        transform: translateX(-50%);
        width: 80%;
        padding-right: 1vw;
        opacity: 0;
        z-index: 76;
    }
    .imgSelection{
        width: 5vw;
        height: 5vw;
        opacity: .6;
        filter: brightness(100%);
        transition:250ms;
    }
    .imgSelection:hover{
        opacity: 1;
        filter: brightness(200%);
    }
    .activeSlide{
        opacity: 1;
        filter: brightness(200%);
    }
    .imgSelection img{
        width: 100%;
        height: 100%;
    }
}

@media (max-height: 600px) and (orientation: landscape){
    
    .rightContent #textContainer{
        margin-left: 1.5vw;
    }
    .rightContent #textContainer h4{
        font-size: 4vw;
    }
    .rightContent #textContainer p{
        width: 95%;
        font-size: 2vw;
    }
    .rightContent #textContainer #softRefs{
        float: right;
        width: 70%;
        margin-top: 2lvh;
        font-size: 1.6vw;
        opacity: .8;
    }
    #softRefs::before{
        content: "Software: ";
        color: #fff;
        font-size: 2vw;
        opacity: .8;
    }
    #description #descriptionContent .leftContent{
        height: 110lvh;
        text-align: right;
        overflow: hidden;
    }
    .leftContent #imageContainer{
        flex-flow: row;
        height: 55lvh;
        column-gap: 25vw;
        margin-top: 32.5lvh;
    }
    #imageContainer img{
        display: block;
        width:100%;
        height:100%;
        object-fit: contain;
        object-position: center;
    }
    .leftContent .slider-nav{
        display: flex;
        justify-content: center;
        position: absolute;
        column-gap: 1rem;
        padding-right: 6.5vw;
        left: 47.5%;
        bottom: 15%;
        transform: translateX(-47.5%);
        width: 80%;
        opacity: 0;
        z-index: 76;
        animation-name: slideInFromRight;
        animation-play-state: running;
        animation-duration: 2s;
        animation-timing-function: ease-out;
        animation-delay: 1s;
        animation-iteration-count: 1;
        animation-fill-mode: both;
    }
    .imgSelection{
        width: 5lvh;
        height: 5lvh;
        opacity: .6;
        filter: brightness(100%);
        transition:250ms;
    }
    .imgSelection:hover{
        opacity: 1;
        filter: brightness(200%);
    }
    .activeSlide{
        opacity: 1;
        filter: brightness(200%);
    }
    .imgSelection img{
        width: 100%;
        height: 100%;
    }
    
}

@media (min-width: 601px) and (orientation: portrait){

    #description #descriptionContent{
        display: flex;
        flex-direction: column;
        align-items:flex-start;
        justify-content: center;
        width: 80%;
        height: 102%;
        margin: 15lvh auto 0 auto;
    }
    #description #descriptionContent .leftContent{
        width: 100%;
        height: 110lvh;
        text-align: right;
        overflow: hidden;
    }
    #description #descriptionContent .rightContent{
        width: 100%;
        text-align: left;
        overflow: hidden;
    }
    .rightContent #textContainer{
        position: relative;
        margin-top: 0lvh;
        margin-left: 2vw;
        right: -100%;
        left: inherit;
        animation-name: slideInFromRight;
        animation-play-state: paused;
        animation-duration: 2s;
        animation-timing-function: ease-out;
        animation-delay: 1s;
        animation-iteration-count: 1;
        animation-fill-mode: both;
        z-index: 76;
    }
    .leftContent #imageContainer{
        position: relative;
        column-gap: 25vw;
        width: 100%;
        height: 70%;
        margin-top: 0lvh;
        right: -100%;
        animation-name: slideInFromRight;
        animation-play-state: paused;
        animation-duration: 2s;
        animation-timing-function: ease-out;
        animation-delay: 1s;
        animation-iteration-count: 1;
        animation-fill-mode: both;
        z-index: 75;
    }
    #imageContainer img{
        display: block;
        width:100%;
        height:100%;
        object-fit: contain;
        object-position: center;
    }
    .rightContent #textContainer h4{
        font-size: 6vw;
        margin: 0px;
    }
    .rightContent #textContainer p{
        width: 100%;
        font-size: 4vw;
        margin: 0px;
    }
    .rightContent #textContainer #softRefs{
        width: 100%;
        margin-top: 1lvh;
        padding-right: 1.5vw;
        text-align: right;
        font-family: GeosansLight;
        font-weight: 500;
        font-size: 2.25vw;
        opacity: .8;
    }
    #softRefs::before{
        content: "Software: ";
        color: #fff;
        font-size: 2.75vw;
        opacity: .8;
    }
    .leftContent .slider-nav{
        display: flex;
        justify-content: center;
        position: absolute;
        column-gap: 1rem;
        left: 50%;
        bottom: 15%;
        transform: translateX(-50%);
        width: 80%;
        padding-right: 1vw;
        opacity: 0;
        z-index: 76;
    }
    .imgSelection{
        width: 5vw;
        height: 5vw;
        opacity: .6;
        filter: brightness(100%);
        transition:250ms;
    }
    .imgSelection:hover{
        opacity: 1;
        filter: brightness(120%);
    }
    .activeSlide{
        opacity: 1;
        filter: brightness(200%);
    }
    .imgSelection img{
        width: 100%;
        height: 100%;
    }
    
}

@media (min-height: 601px) and (orientation: landscape){
    
    .rightContent #textContainer{
        margin-left: 1.5vw;
    }
    .rightContent #textContainer h4{
        font-size: 4vw;
    }
    .rightContent #textContainer p{
        width: 95%;
        font-size: 2vw;
    }
    .rightContent #textContainer #softRefs{
        float: right;
        width: 70%;
        margin-top: 2lvh;
        font-size: 1.6vw;
        opacity: .8;
    }
    #softRefs::before{
        content: "Software: ";
        color: #fff;
        font-size: 2vw;
        opacity: .8;
    }
    .leftContent .slider-nav{
        display: flex;
        justify-content: center;
        position: absolute;
        column-gap: 1rem;
        padding-right: 6.5vw;
        left: 47.5%;
        bottom: 22%;
        transform: translateX(-47.5%);
        width: 80%;
        opacity: 0;
        z-index: 76;
        animation-name: slideInFromRight;
        animation-play-state: running;
        animation-duration: 2s;
        animation-timing-function: ease-out;
        animation-delay: 1s;
        animation-iteration-count: 1;
        animation-fill-mode: both;
    }
    #description #descriptionContent .leftContent{
        height: 110lvh;
        text-align: right;
        overflow: hidden;
    }
    .leftContent #imageContainer{
        flex-flow: row;
        column-gap: 25vw;
        margin-top: 32.5lvh;
    }
    #imageContainer img{
        display: block;
        width:100%;
        height:100%;
        object-fit: contain;
        object-position: center;
    }
    
}

@media (min-width: 768px) and (orientation: portrait){

    #description #descriptionContent{
        display: flex;
        flex-direction: column;
        align-items:flex-start;
        justify-content: center;
        width: 80%;
        height: 102%;
        margin: 15lvh auto 0 12%;
    }
    #description #descriptionContent .leftContent{
        width: 100%;
        height: 110lvh;
        text-align: right;
        overflow: hidden;
    }
    #description #descriptionContent .rightContent{
        width: 100%;
        text-align: left;
        overflow: hidden;
    }
    .rightContent #textContainer{
        position: relative;
        margin-top: 0lvh;
        margin-left: 2vw;
        right: -100%;
        left: inherit;
        animation-name: slideInFromRight;
        animation-play-state: paused;
        animation-duration: 2s;
        animation-timing-function: ease-out;
        animation-delay: 1s;
        animation-iteration-count: 1;
        animation-fill-mode: both;
        z-index: 76;
    }
    .leftContent #imageContainer{
        position: relative;
        width: 100%;
        height: 90%;
        margin-top: 0lvh;
        right: -100%;
        animation-name: slideInFromRight;
        animation-play-state: paused;
        animation-duration: 2s;
        animation-timing-function: ease-out;
        animation-delay: 1s;
        animation-iteration-count: 1;
        animation-fill-mode: both;
        z-index: 75;
    }
    #imageContainer img{
        display: block;
        width:100%;
        height:100%;
        object-fit: contain;
        object-position: center;
    }
    .rightContent #textContainer h4{
        font-size: 5vw;
        margin: 0px;
    }
    .rightContent #textContainer p{
        width: 100%;
        font-size: 3vw;
        margin: 0px;
    }
    .rightContent #textContainer #softRefs{
        width: 100%;
        margin-top: 1lvh;
        padding-right: 1.5vw;
        text-align: right;
        font-family: GeosansLight;
        font-weight: 500;
        font-size: 2.25vw;
        opacity: .8;
    }
    #softRefs::before{
        content: "Software: ";
        color: #fff;
        font-size: 2.75vw;
        opacity: .8;
    }
    .leftContent .slider-nav{
        display: flex;
        justify-content: center;
        position: absolute;
        column-gap: 1rem;
        left: 48%;
        bottom: 3%;
        transform: translateX(-50%);
        opacity: 0;
        z-index: 76;
    }
    
}

@media (min-height: 768px) and (orientation: landscape){

    .rightContent #textContainer{
        margin-left: 1.5vw;
    }
    .rightContent #textContainer h4{
        font-size: 4vw;
    }
    .rightContent #textContainer p{
        width: 95%;
        font-size: 2vw;
    }
    .rightContent #textContainer #softRefs{
        float: right;
        width: 70%;
        margin-top: 2lvh;
        font-size: 1.4vw;
        opacity: .8;
    }
    #softRefs::before{
        content: "Software: ";
        color: #fff;
        font-size: 1.6vw;
        opacity: .8;
    }
    .leftContent #imageContainer{
        flex-flow: row;
        column-gap: 25vw;
        margin-top: 32.5lvh;
        margin-left: 3.5vw;
    }
    #imageContainer img{
        display: block;
        width:100%;
        height:100%;
        object-fit: contain;
        object-position: center;
    }
    .leftContent .slider-nav{
        display: flex;
        justify-content: center;
        position: absolute;
        column-gap: 1rem;
        left: 47.5%;
        bottom: 21%;
        padding-right: .5vw;
        opacity: 0;
        transform: translateX(-47.5%);
        width: 80%;
    }
    .imgSelection{
        width: 3vw;
        height: 3vw;
        opacity: .6;
        filter: brightness(100%);
        transition:250ms;
    }
    
}

@media (min-width: 992px) and (orientation: portrait){

    #description #descriptionContent{
        display: flex;
        flex-direction: column;
        align-items:flex-start;
        justify-content: center;
        width: 80%;
        height: 102%;
        margin: 15lvh auto 0 12%;
    }
    #description #descriptionContent .leftContent{
        width: 100%;
        height: 150lvh;
        text-align: right;
        overflow: hidden;
    }
    #description #descriptionContent .rightContent{
        width: 100%;
        text-align: left;
        overflow: hidden;
    }
    .rightContent #textContainer{
        position: relative;
        margin-top: 0lvh;
        margin-left: 2vw;
        right: -100%;
        left: inherit;
        animation-name: slideInFromRight;
        animation-play-state: paused;
        animation-duration: 2s;
        animation-timing-function: ease-out;
        animation-delay: 1s;
        animation-iteration-count: 1;
        animation-fill-mode: both;
        z-index: 76;
    }
    .leftContent #imageContainer{
        position: relative;
        width: 100%;
        height: 93%;
        margin-top: 0lvh;
        right: -100%;
        animation-name: slideInFromRight;
        animation-play-state: paused;
        animation-duration: 2s;
        animation-timing-function: ease-out;
        animation-delay: 1s;
        animation-iteration-count: 1;
        animation-fill-mode: both;
        z-index: 75;
    }
    #imageContainer img{
        display: block;
        width:100%;
        height:100%;
        object-fit: contain;
        object-position: center;
    }
    .rightContent #textContainer h4{
        font-size: 4vw;
        margin: 0px;
    }
    .rightContent #textContainer p{
        width: 100%;
        font-size: 2vw;
        margin: 0px;
    }
    .rightContent #textContainer #softRefs{
        width: 100%;
        margin-top: 1lvh;
        padding-right: 1.5vw;
        text-align: right;
        font-family: GeosansLight;
        font-weight: 500;
        font-size: 2.25vw;
        opacity: .8;
    }
    #softRefs::before{
        content: "Software: ";
        color: #fff;
        font-size: 2.75vw;
        opacity: .8;
    }
    .leftContent .slider-nav{
        display: flex;
        justify-content: center;
        position: absolute;
        column-gap: 1rem;
        left: 50%;
        bottom: 1vw;
        transform: translateX(-50%);
        opacity: 0;
        z-index: 76;
    }
    
}

@media (min-height: 992px) and (orientation: landscape){

    .rightContent #textContainer{
        margin-left: 1.5vw;
    }
    .rightContent #textContainer h4{
        font-size: 4vw;
    }
    .rightContent #textContainer p{
        width: 95%;
        font-size: 2vw;
    }
    .rightContent #textContainer #softRefs{
        float: right;
        width: 70%;
        margin-top: 2lvh;
        font-size: 1.4vw;
        opacity: .8;
    }
    #softRefs::before{
        content: "Software: ";
        color: #fff;
        font-size: 1.6vw;
        opacity: .8;
    }
    .leftContent #imageContainer{
        flex-flow: row;
        column-gap: 25vw;
        margin-top: 32.5lvh;
        margin-left: 3.5vw;
    }
    #imageContainer img{
        display: block;
        width:100%;
        height:100%;
        object-fit: contain;
        object-position: center;
    }
    .leftContent .slider-nav{
        display: flex;
        justify-content: center;
        position: absolute;
        column-gap: 1rem;
        left: 47.5%;
        bottom: 28%;
        padding-right: .5vw;
        opacity: 0;
        transform: translateX(-47.5%);
        width: 80%;
    }
    
}

@media (min-height: 1300px) and (orientation: portrait){

    #description #descriptionContent{
        display: flex;
        flex-direction: column;
        align-items:flex-start;
        justify-content: center;
        width: 80%;
        height: 102%;
        margin: 15lvh auto 0 12%;
    }
    #description #descriptionContent .leftContent{
        width: 100%;
        height: 150lvh;
        text-align: right;
        overflow: hidden;
    }
    #description #descriptionContent .rightContent{
        width: 100%;
        text-align: left;
        overflow: hidden;
    }
    .rightContent #textContainer{
        position: relative;
        margin-top: 0lvh;
        margin-left: 2vw;
        right: -100%;
        left: inherit;
        animation-name: slideInFromRight;
        animation-play-state: paused;
        animation-duration: 2s;
        animation-timing-function: ease-out;
        animation-delay: 1s;
        animation-iteration-count: 1;
        animation-fill-mode: both;
        z-index: 76;
    }
    .leftContent #imageContainer{
        position: relative;
        width: 100%;
        height: 88%;
        margin-top: 0lvh;
        right: -100%;
        animation-name: slideInFromRight;
        animation-play-state: paused;
        animation-duration: 2s;
        animation-timing-function: ease-out;
        animation-delay: 1s;
        animation-iteration-count: 1;
        animation-fill-mode: both;
        z-index: 75;
    }
    #imageContainer img{
        display: block;
        width:100%;
        height:100%;
        object-fit: contain;
        object-position: center;
    }
    .rightContent #textContainer h4{
        font-size: 3vw;
        margin: 0px;
    }
    .rightContent #textContainer p{
        width: 100%;
        font-size: 2vw;
        margin: 0px;
    }
    .rightContent #textContainer #softRefs{
        width: 100%;
        margin-top: 1lvh;
        padding-right: 1.5vw;
        text-align: right;
        font-family: GeosansLight;
        font-weight: 500;
        font-size: 1.6vw;
        opacity: .5;
    }
    #softRefs::before{
        content: "Software: ";
        color: #fff;
        font-size: 1.8vw;
        opacity: .7;
    }
    .leftContent .slider-nav{
        display: flex;
        justify-content: center;
        position: absolute;
        column-gap: 1rem;
        left: 50%;
        bottom: 6%;
        transform: translateX(-50%);
        opacity: 0;
        z-index: 76;
    }
    
}

@media (min-width: 1300px) and (orientation: landscape){

    .rightContent #textContainer{
        margin-left: 1.5vw;
    }
    .rightContent #textContainer h4{
        font-size: 4vw;
    }
    .rightContent #textContainer p{
        width: 95%;
        font-size: 2vw;
    }
    .rightContent #textContainer #softRefs{
        margin-top: 3vw;
        padding-right: 1.5vw;
        text-align: right;
        width: 80%;
        font-family: GeosansLight;
        font-weight: 500;
        font-size: 1vw;
        opacity: .8;
    }
    #softRefs::before{
        content: "Software: ";
        color: #fff;
        font-size: 1.2vw;
        opacity: .8;
    }
    .leftContent #imageContainer{
        flex-flow: row;
        column-gap: 25vw;
        margin-top: 32.5lvh;
        margin-left: 3.5vw;
    }
    #imageContainer img{
        display: block;
        width:100%;
        height:100%;
        object-fit: contain;
        object-position: center;
    }
    .leftContent .slider-nav{
        display: flex;
        justify-content: center;
        position: absolute;
        column-gap: 1rem;
        left: 47.5%;
        bottom: 17vw;
        padding-right: .5vw;
        transform: translateX(-47.5%);
        opacity: 0;
        width: 80%;
    }
    
}

@media (min-height: 1650px) and (orientation: portrait){

    #description #descriptionContent{
        display: flex;
        flex-direction: column;
        align-items:flex-start;
        justify-content: center;
        width: 80%;
        height: 102%;
        margin: 15lvh auto 0 12%;
    }
    #description #descriptionContent .leftContent{
        width: 100%;
        height: 150lvh;
        text-align: right;
        overflow: hidden;
    }
    #description #descriptionContent .rightContent{
        width: 100%;
        text-align: left;
        overflow: hidden;
    }
    .rightContent #textContainer{
        position: relative;
        margin-top: 0lvh;
        margin-left: 2vw;
        right: -100%;
        left: inherit;
        animation-name: slideInFromRight;
        animation-play-state: paused;
        animation-duration: 2s;
        animation-timing-function: ease-out;
        animation-delay: 1s;
        animation-iteration-count: 1;
        animation-fill-mode: both;
        z-index: 76;
    }
    .leftContent #imageContainer{
        position: relative;
        width: 100%;
        height: 88%;
        margin-top: 0lvh;
        right: -100%;
        animation-name: slideInFromRight;
        animation-play-state: paused;
        animation-duration: 2s;
        animation-timing-function: ease-out;
        animation-delay: 1s;
        animation-iteration-count: 1;
        animation-fill-mode: both;
        z-index: 75;
    }
    #imageContainer img{
        display: block;
        width:100%;
        height:100%;
        object-fit: contain;
        object-position: center;
    }
    .rightContent #textContainer h4{
        font-size: 3vw;
        margin: 0px;
    }
    .rightContent #textContainer p{
        width: 100%;
        font-size: 2vw;
        margin: 0px;
    }
    .leftContent .slider-nav{
        display: flex;
        justify-content: center;
        position: absolute;
        column-gap: 1rem;
        left: 50%;
        bottom: 6%;
        transform: translateX(-50%);
        opacity: 0;
        z-index: 76;
    }
    
}

@media (min-width: 1650px) and (orientation: landscape){

    #description #descriptionContent{
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        width: 80%;
        height: 102%;
        margin: 0 auto 0 auto;

    }
    #description #descriptionContent .leftContent{
        width: 43.8%;
        text-align: right;
        overflow: hidden;
    }
    #description #descriptionContent .rightContent{
        width: 56.2%;
        text-align: left;
        overflow: hidden;
    }
    .rightContent #textContainer{
        position: relative;
        margin-top: 30lvh;
        left: -100%;
        animation-name: slideInFromLeft;
        animation-play-state: paused;
        animation-duration: 2s;
        animation-timing-function: ease-out;
        animation-delay: 1s;
        animation-iteration-count: 1;
        animation-fill-mode: both;
        z-index: 75;
    }
    #descriptionContent .leftContent #imageContainer{
        position: relative;
        height: 30vw;
        margin-top: 32.75lvh;
        right: -100%;
        animation-name: slideInFromRight;
        animation-play-state: paused;
        animation-duration: 2s;
        animation-timing-function: ease-out;
        animation-delay: 1s;
        animation-iteration-count: 1;
        animation-fill-mode: both;
        z-index: 75;
    }
    #imageContainer img{
        display: block;
        width:100%;
        height:100%;
        object-fit: cover;
        object-position: center;
    }
    .rightContent #textContainer h4{
        font-size: 39pt;
        margin: 0px;
    }
    .rightContent #textContainer p{
        width: 95%;
        font-size: 30pt;
        margin: 0px;
    }
    .rightContent #textContainer #softRefs{
        width: 90%;
        margin-top: 3vw;
        padding-right: 1.5vw;
        text-align: right;
        font-family: GeosansLight;
        font-weight: 500;
        font-size: 1vw;
    }
    #softRefs::before{
        content: "Software: ";
        color: #fff;
        font-size: 1.2vw;
        opacity: .8;
    }
    .leftContent .slider-nav{
        display: flex;
        justify-content: center;
        position: absolute;
        column-gap: 1rem;
        left: 47.5%;
        bottom: 12lvh;
        padding-right: .5vw;
        transform: translateX(-47.5%);
        opacity: 0;
        width: 80%;
    }
    .imgSelection:hover{
        opacity: 1;
        filter: brightness(120%);
    }
    .activeSlide{
        opacity: 1;
        filter: brightness(200%);
    }   
}

/*____________________________________________________PARAGRAPHS___*/

.paragraph{
    position: relative;
    float: left;
    width: 100lvw;
    height: 100lvh;
    z-index: 75;
    background-color: #000000;
    
}
.paragraph #paragraphContent{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 80%;
    height: 102%;
    margin: 0 auto 0 auto;
    background-color: #000000;
    
}
.paragraph #paragraphContent .leftContent{
    width: 43.8%;
    background: #000000;
    text-align: right;
    overflow: hidden;
}
.paragraph #paragraphContent .rightContent{
    width: 56.2%;
    background: #000000;
    text-align: left;
    overflow: hidden;
}

/*_____________________________________________PARAGRAPHS:_RESPONSIVE_BREAKPOINTS___*/

/*_____________600px, 601px, 768px, 992px; 1200px;_____________*/

@media (max-width: 600px) and (orientation: portrait){
    
    .paragraph #paragraphContent{
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        width: 80%;
        height: 102%;
        margin: 0 auto 0 auto;
    }
    .paragraph #paragraphContent .leftContent{
        width: 100%;
        height: 140lvh;
        margin-top: 5lvh;
        text-align: right;
        overflow: hidden;
    }
    .paragraph #paragraphContent .rightContent{
        width: 100%;
        text-align: left;
        overflow: hidden;
    }
    
}

@media (max-height: 600px) and (orientation: landscape){

    .paragraph #paragraphContent{
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        width: 80%;
        height: 102%;
        margin: 0 auto 0 auto;
        background-color: #000000;

    }
    .leftContent, .rightContent{
        height: 100lvh;
    }
    .paragraph #paragraphContent .leftContent{
        width: 43.8%;
    }
    .paragraph #paragraphContent .rightContent{
        width: 56.2%;
    }
    
}

@media (min-width: 601px) and (orientation: portrait){
    
    .paragraph #paragraphContent{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 80%;
        height: 102%;
        margin: 15lvh auto 0 12%;
        background-color: #000000;

    }
    .leftContent, .rightContent{
        height: 100lvh;
    }
    .paragraph #paragraphContent .leftContent{
        width: 100%;
        background: #000000;
        text-align: right;
        overflow: hidden;
    }
    .paragraph #paragraphContent .rightContent{
        width: 100%;
        background: #000000;
        text-align: left;
        overflow: hidden;
    }
    
}

@media (min-height: 601px) and (orientation: landscape){
    
    .paragraph #paragraphContent{
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        width: 80%;
        height: 102%;
        margin: 0 auto 0 auto;
        background-color: #000000;

    }
    .leftContent, .rightContent{
        height: 100lvh;
    }
    .paragraph #paragraphContent .leftContent{
        width: 43.8%;
    }
    .paragraph #paragraphContent .rightContent{
        width: 56.2%;
    }
    
}

@media (min-width: 768px) and (orientation: portrait){
    
    .paragraph #paragraphContent{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 80%;
        height: 102%;
        margin: 15lvh auto 0 12%;
        background-color: #000000;

    }
    .leftContent, .rightContent{
        height: 100lvh;
    }
    .paragraph #paragraphContent .leftContent{
        width: 100%;
        background: #000000;
        text-align: right;
        overflow: hidden;
    }
    .paragraph #paragraphContent .rightContent{
        width: 100%;
        background: #000000;
        text-align: left;
        overflow: hidden;
    }
    
}

@media (min-height: 768px) and (orientation: landscape){
    
    .paragraph #paragraphContent{
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        width: 80%;
        height: 102%;
        margin: 0 auto 0 auto;
        background-color: #000000;

    }
    .leftContent, .rightContent{
        height: 100lvh;
    }
    .paragraph #paragraphContent .leftContent{
        width: 43.8%;
    }
    .paragraph #paragraphContent .rightContent{
        width: 56.2%;
    }
    #paragraphContent .leftContent #imageContainer{
        margin-top: 26lvh;
    }
    
}

@media (min-width: 992px) and (orientation: portrait){

    .paragraph #paragraphContent{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 80%;
        height: 102%;
        margin: 15lvh auto 0 12%;
        background-color: #000000;

    }
    .leftContent, .rightContent{
        height: 100lvh;
    }
    .paragraph #paragraphContent .leftContent{
        width: 100%;
        height: 150lvh;
        text-align: right;
        overflow: hidden;
    }
    .paragraph #paragraphContent .rightContent{
        width: 100%;
        background: #000000;
        text-align: left;
        overflow: hidden;
    }
    
}

@media (min-height: 992px) and (orientation: landscape){

    .paragraph #paragraphContent{
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        width: 80%;
        height: 102%;
        margin: 0 auto 0 auto;
        background-color: #000000;

    }
    .leftContent, .rightContent{
        height: 100lvh;
    }
    .paragraph #paragraphContent .leftContent{
        width: 43.8%;
    }
    .paragraph #paragraphContent .rightContent{
        width: 56.2%;
    }
    
}

@media (min-height: 1300px) and (orientation: portrait){

    .paragraph #paragraphContent{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 80%;
        height: 102%;
        margin: 15lvh auto 0 12%;
        background-color: #000000;

    }
    .leftContent, .rightContent{
        height: 100lvh;
    }
    .paragraph #paragraphContent .leftContent{
        width: 100%;
        height: 150lvh;
        background: #000000;
        text-align: right;
        overflow: hidden;
    }
    .paragraph #paragraphContent .rightContent{
        width: 100%;
        background: #000000;
        text-align: left;
        overflow: hidden;
    }
    
}

@media (min-width: 1300px) and (orientation: landscape){

    .paragraph #paragraphContent{
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        width: 80%;
        height: 102%;
        margin: 0 auto 0 auto;
        background-color: #000000;

    }
    .leftContent, .rightContent{
        height: 100lvh;
    }
    .paragraph #paragraphContent .leftContent{
        width: 43.8%;
    }
    .paragraph #paragraphContent .rightContent{
        width: 56.2%;
    }
    
}

@media (min-height: 1650px) and (orientation: portrait){

    .paragraph #paragraphContent{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 80%;
        height: 102%;
        margin: 15lvh auto 0 12%;
        background-color: #000000;

    }
    .leftContent, .rightContent{
        height: 100lvh;
    }
    .paragraph #paragraphContent .leftContent{
        width: 100%;
        background: #000000;
        text-align: right;
        overflow: hidden;
    }
    .paragraph #paragraphContent .rightContent{
        width: 100%;
        background: #000000;
        text-align: left;
        overflow: hidden;
    }
    
}

@media (min-width: 1650px) and (orientation: landscape){

    .paragraph #paragraphContent{
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        width: 80%;
        height: 102%;
        margin: 0 auto 0 auto;
        background-color: #000000;

    }
    .leftContent, .rightContent{
        height: 100lvh;
    }
    .paragraph #paragraphContent .leftContent{
        width: 43.8%;
        background: #000000;
        text-align: right;
        overflow: hidden;
    }
    .paragraph #paragraphContent .leftContent .slider-nav{
        bottom: 18lvh;
    }
    .paragraph #paragraphContent .rightContent{
        width: 56.2%;
        background: #000000;
        text-align: left;
        overflow: hidden;
    }
    
}

/*____________________________________________________IMPRESSUM___*/

#impressum{
    z-index: 85;
    width: 100vw;
    height: 100vh;
    position: fixed;
    scroll-snap-type: none;
}
#impressumPage input{
    float: right;
    width: 1.5vw;
    height: 1.5vw;
    margin: 1vw 1vw 0 0;
}
#impressum #impressumPage{
    text-align: left;
    width: 70%;
    height: 80%;
    background-color: #e1e1e1;
    margin: 6.5% auto 0px auto;
    overflow: scroll;
    overflow-x: hidden;
}
#impressumPage::-webkit-scrollbar {
  display: none;
}
#impressumPage{
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}
#impressum h3{
    font-family: GeosansLight;
    color: #000;
    font-weight: 500;
    margin: 0px;
}
#impressum #lawReference{
    font-size: 20pt;
}
#impressum hr{
    background: #858585;
}
.impressumContent{
    display: flex;
    flex-wrap: wrap;
    align-content: space-between;
    justify-content: space-between;
}
.titles{
    text-align: left;
    font-family: GeosansLight;
    font-weight: 500;
    margin-left: 5%;
}
.texts {
    text-align: left;
    font-family: 'myriad-pro';
    font-weight: 500;
    margin:10px 0px 40px 5%;
    font-size: 20pt;
}
.answers{
    text-align: right;
    font-family: 'myriad-pro'; 
    font-weight: 500;
    margin-right: 5%;
}
.off{
    transition: 1s;
    bottom: 150lvh;
    opacity: 0;
}
.on{
    transition: 1s;
    bottom: 0lvh;
    opacity: 1;
}

/*_____________________________________________IMPRESSUM:_RESPONSIVE_BREAKPOINTS___*/

/*_____________600px, 601px, 768px, 992px; 1200px;_____________*/

@media (max-width: 600px) and (orientation: portrait){
    #impressum #impressumPage{
        margin: 25lvh auto 0px auto;
    }
    #impressum h3{
        font-size: 5vh;
    }
    #impressum #lawReference{
        font-size: 2vh;
    }
    #impressum hr{
        margin: 5px 0 0 0;
    }
    #impressumPage h4{
        font-size: 4vh;
    }
    .titles{
        font-size: 2vh;
    }
    .answers{
        font-size: 2vh;
    }
    .texts{
        font-size: 2vh;
        margin:10px 5px 40px 15%;
    }
    #impressumPage input{
        width: 3vh;
        height: 3vh;
        margin: 1vw 1vw 0 0;
    }
}

@media (max-height: 600px) and (orientation: landscape){
    #impressum #impressumPage{
        margin: 25lvh auto 0px auto;
    }
    #impressum h3{
        font-size: 5vw;
    }
    #impressum #lawReference{
        font-size: 2vw;
    }
    #impressum hr{
        margin: 5px 0 0 0;
    }
    #impressumPage h4{
        font-size: 4vw;
    }
    .titles{
        font-size: 2vw;
    }
    .answers{
        font-size: 2vw;
    }
    .texts{
        font-size: 2vw;
    }
    #impressumPage input{
        width: 3vw;
        height: 3vw;
        margin: 1vw 1vw 0 0;
    }
}

@media (min-width: 601px) and (orientation: portrait){
    #impressum #impressumPage{
        margin: 20lvh auto 0px auto;
    }
    #impressum h3{
        font-size: 5vh;
    }
    #impressum #lawReference{
        font-size: 2vh;
    }
    #impressum hr{
        margin: 5px 0 0 0;
    }
    #impressumPage h4{
        font-size: 4vh;
    }
    .titles{
        font-size: 2vh;
    }
    .answers{
        font-size: 2vh;
    }
    .texts{
        font-size: 2vh;
        margin:10px 5px 40px 15%;
    }
    #impressumPage input{
        width: 3vh;
        height: 3vh;
        margin: 1vw 1vw 0 0;
    }
}

@media (min-height: 601px) and (orientation: landscape){
    #impressum #impressumPage{
        margin: 20lvh auto 0px auto;
    }
    #impressum h3{
        font-size: 5vw;
    }
    #impressum #lawReference{
        font-size: 2vw;
    }
    #impressum hr{
        margin: 5px 0 0 0;
    }
    #impressumPage h4{
        font-size: 4vw;
    }
    .titles{
        font-size: 2vw;
    }
    .answers{
        font-size: 2vw;
    }
    .texts{
        font-size: 2vw;
    }
    #impressumPage input{
        width: 3vw;
        height: 3vw;
        margin: 1vw 1vw 0 0;
    }
}

@media (min-width: 768px) and (orientation: portrait){
    #impressum #impressumPage{
        width: 79%;
        margin: 17lvh auto 0px auto;
    }
    #impressum h3{
        font-size: 5vh;
    }
    #impressum #lawReference{
        font-size: 2vh;
    }
    #impressum hr{
        margin: 5px 0 0 0;
    }
    #impressumPage h4{
        font-size: 4vh;
    }
    .titles{
        font-size: 2vh;
    }
    .answers{
        font-size: 2vh;
    }
    .texts{
        font-size: 2vh;
        margin:10px 5px 40px 15%;
    }
    #impressumPage input{
        width: 3vh;
        height: 3vh;
        margin: 1vw 1vw 0 0;
    }
}

@media (min-height: 768px) and (orientation: landscape){
    #impressum #impressumPage{
        width: 79%;
        margin: 17lvh auto 0px auto;
    }
    #impressum h3{
        font-size: 5vw;
    }
    #impressum #lawReference{
        font-size: 2vw;
    }
    #impressum hr{
        margin: 5px 0 0 0;
    }
    #impressumPage h4{
        font-size: 4vw;
    }
    .titles{
        font-size: 2vw;
    }
    .answers{
        font-size: 2vw;
    }
    .texts{
        font-size: 2vw;
        margin:10px 5px 40px 15%;
    }
    #impressumPage input{
        width: 3vw;
        height: 3vw;
        margin: 1vw 1vw 0 0;
    }
}

@media (min-width: 992px) and (orientation: portrait){
    #impressum #impressumPage{
        width: 79%;
        margin: 17lvh auto 0px auto;
    }
    #impressum h3{
        font-size: 5vh;
    }
    #impressum #lawReference{
        font-size: 2vh;
    }
    #impressum hr{
        margin: 5px 0 0 0;
    }
    #impressumPage h4{
        font-size: 4vh;
    }
    .titles{
        font-size: 2vh;
    }
    .answers{
        font-size: 2vh;
    }
    .texts{
        font-size: 2vh;
        margin:10px 5px 40px 15%;
    }
    #impressumPage input{
        width: 3vh;
        height: 3vh;
        margin: 1vw 1vw 0 0;
    }
}

@media (min-height: 992px) and (orientation: landscape){
    #impressum #impressumPage{
        width: 79%;
        margin: 17lvh auto 0px auto;
    }
    #impressum h3{
        font-size: 5vw;
    }
    #impressum #lawReference{
        font-size: 2vw;
    }
    #impressum hr{
        margin: 5px 0 0 0;
    }
    #impressumPage h4{
        font-size: 4vw;
    }
    .titles{
        font-size: 2vw;
    }
    .answers{
        font-size: 2vw;
    }
    .texts{
        font-size: 2vw;
        margin:10px 5px 40px 15%;
    }
    #impressumPage input{
        width: 3vw;
        height: 3vw;
        margin: 1vw 1vw 0 0;
    }
}

@media (min-height: 1300px) and (orientation: portrait){
    #impressum #impressumPage{
        width: 79%;
        margin: 17lvh auto 0px auto;
    }
    #impressum h3{
        font-size: 5vh;
    }
    #impressum #lawReference{
        font-size: 2vh;
    }
    #impressum hr{
        margin: 5px 0 0 0;
    }
    #impressumPage h4{
        font-size: 4vh;
    }
    .titles{
        font-size: 2vh;
    }
    .answers{
        font-size: 2vh;
    }
    .texts{
        font-size: 2vh;
        margin:10px 5px 40px 15%;
    }
    #impressumPage input{
        width: 3vh;
        height: 3vh;
        margin: 1vw 1vw 0 0;
    }
}

@media (min-width: 1300px) and (orientation: landscape){
    #impressum #impressumPage{
        width: 79%;
        margin: 15lvh auto 0px auto;
    }
    #impressum h3{
        font-size: 5vh;
    }
    #impressum #lawReference{
        font-size: 2vh;
    }
    #impressum hr{
        margin: 5px 0 0 0;
    }
    #impressumPage h4{
        font-size: 4vh;
    }
    .titles{
        font-size: 2vh;
    }
    .answers{
        font-size: 2vh;
    }
    .texts{
        font-size: 2vh;
        margin:10px 5px 40px 15%;
    }
    #impressumPage input{
        width: 3vh;
        height: 3vh;
        margin: 1vh 1vh 0 0;
    }
}

@media (min-height: 1650px) and (orientation: portrait){
    #impressum #impressumPage{
        width: 79%;
        margin: 17lvh auto 0px auto;
    }
    #impressum h3{
        font-size: 5vh;
    }
    #impressum #lawReference{
        font-size: 2vh;
    }
    #impressum hr{
        margin: 5px 0 0 0;
    }
    #impressumPage h4{
        font-size: 4vh;
    }
    .titles{
        font-size: 2vh;
    }
    .answers{
        font-size: 2vh;
    }
    .texts{
        font-size: 2vh;
        margin:10px 5px 40px 15%;
    }
    #impressumPage input{
        width: 3vh;
        height: 3vh;
        margin: 1vw 1vw 0 0;
    }
}

@media (min-width: 1650px) and (orientation: landscape){
    #impressum #impressumPage{
        width: 55%;
        margin: 15lvh auto 0px auto;
    }
    #impressum h3{
        font-size: 5vh;
    }
    #impressum #lawReference{
        font-size: 2vh;
    }
    #impressum hr{
        margin: 5px 0 0 0;
    }
    #impressumPage h4{
        font-size: 4vh;
    }
    .titles{
        font-size: 2vh;
    }
    .answers{
        font-size: 2vh;
    }
    .texts{
        font-size: 2vh;
        margin:10px 5px 40px 15%;
    }
    #impressumPage input{
        width: 2vh;
        height: 2vh;
        margin: 1vh 1vh 0 0;
    }
}

/*____________________________________________________LIGHTBOX___*/

#lightboxContainer{
    display: block;
    position: fixed;
    float: left;
    min-width: 95vw;
    height: 80lvh;
    margin: 13lvh 2.5vw auto 2.5vw;
}
.lightboxActive{
    z-index: 105;
    opacity: 1;
    transition: 200ms opacity ease-in-out;
}
.lightboxInactive{
    z-index: 50;
    opacity: 0;
    transition: 200ms opacity ease-in-out;
}
#lightboxContainer .carousel_active{
    position: absolute;
    width: 95%;
    height: 80%;
    margin: 4.35% auto 4.35% auto;
    z-index: 105;
    opacity: 1;
}
#lightboxContainer .carousel_inactive{
    position: absolute;
    width: 95%;
    height: 80%;
    margin: 4.35% auto 4.35% auto;
    z-index: 50;
    opacity: 0;
}
.carousel_active > ul, .carousel-inactive > ul{
    margin: 0;
    padding: 0;
    list-style: none;
}
.slide{
    position: absolute;
    inset: 0;
    opacity: 0;
    z-index: 106;
    transition: 200ms opacity ease-in-out;
    transition-delay: 200ms;
}
.slide img{
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}
.slide video{
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}
.slide[data-active] {
    opacity: 1;
    z-index: 107;
    transition-delay: 0ms;
}
.carouselButton{
    position: absolute;
    background: none;
    border: none;
    font-family: GeosansLight;
    font-weight: 500;
    font-size: 10lvh;
    top: 95%;
    transform: translatY(-5%);
    color: rgba(255, 255, 255, .6);
    cursor: pointer;
    z-index: 110;
}
.carouselButton:hover,.carouselButton:focus {
    color: #ffffff;
}
.carouselButton.prev{
    left: 25vw;
}
.carouselButton.next{
    right: 25vw;
}
#lightboxExit{
    position: relative;
    float: right;
    margin: 1vw 1vw 0 0;
    width: 2vw;
    height: 2vw;
}
.carousel_active #lightboxNav, .carousel_inactive #lightboxNav{
    position: absolute;
    z-index: 110;
    width: 30vw;
    height: 3vw;
    margin: 65lvh 30vw auto 30vw;
}
#lightboxNav ul{
    height: 100%;
    margin: 0;
    padding: 0px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}
#lightboxNav ul li img{
    width: 100%;
    height: 100%;
}
.lbNavSliderSmall{
    width: 1.5vw;
    height: 1.5vw;
    transition: .5s;
    margin-left: 0%;
    margin-right: 0%;
    filter: brightness(100%);
}
.lbNavSliderBig{
    width: 3vw;
    height: 3vw;
    transition: .5s;
    margin-left: 5%;
    margin-right: 5%;
    filter: brightness(200%);
}
#lbNavFirstSliderPoint{
    margin-left: 0px;
}
#lbNavLastSliderPoint{
    margin-right: 0px;
}

/*_____________________________________________LIGHTBOX:_RESPONSIVE_BREAKPOINTS___*/

/*_____________600px, 601px, 768px, 992px; 1200px;_____________*/

@media (max-width: 600px) and (orientation: portrait){
    #lightboxContainer .carousel_active{
        position: absolute;
        width: 95%;
        height: 70%;
        margin: 4.35% 2.5% 4.35% 2.5%;
        z-index: 105;
        opacity: 1;
    }
    #lightboxContainer .carousel_inactive{
        position: absolute;
        width: 95%;
        height: 70%;
        margin: 4.35% 2.5% 4.35% 2.5%;
        z-index: 50;
        opacity: 0;
    }
    .carouselButton{
        font-size: 7lvh;
        top: 55lvh;
        z-index: 110;
    }
    
    .carouselButton.prev{
        left: .05vw;
    }
    .carouselButton.next{
        right: .05vw;
    }
    #lightboxExit{
        position: relative;
        float: right;
        margin: 1vw 1vw 0 0;
        width: 5vw;
        height: 5vw;
    }
    .carousel_active #lightboxNav, .carousel_inactive #lightboxNav{
        position: absolute;
        z-index: 110;
        width: 60vw;
        height: 6vw;
        margin: 58lvh 14.5vw auto 14.5vw;
    }
    .lbNavSliderSmall{
        width: 5vw;
        height: 5vw;
        transition: .5s;
        margin-left: 0%;
        margin-right: 0%;
        filter: brightness(100%);
    }
    .lbNavSliderBig{
        width: 7vw;
        height: 7vw;
        transition: .5s;
        margin-left: 5%;
        margin-right: 5%;
        filter: brightness(200%);
    }
}

@media (max-height: 600px) and (orientation: landscape){
    #lightboxContainer{
        min-width: 75vw;
        height: 70lvh;
        margin: 18lvh 12.5vw auto 12.5vw;
    }
    #lightboxContainer .carousel_active{
        position: absolute;
        width: 95%;
        margin: 1.35% 2.5% 4.35% 2.5%;
        z-index: 105;
        opacity: 1;
    }
    #lightboxContainer .carousel_inactive{
        position: absolute;
        width: 95%;
        margin: 1.35% 2.5% 4.35% 2.5%;
        z-index: 50;
        opacity: 0;
    }
    .carouselButton{
        top: 54.5lvh;
        z-index: 110;
    }
    .carouselButton.prev{
        left: 11vw;
    }
    .carouselButton.next{
        right: 11vw;
    }
    .carousel_active #lightboxNav, .carousel_inactive #lightboxNav{
        position: absolute;
        right: 0vw;
        left: -2vw;
        z-index: 110;
        width: 30vw;
        height: 6vw;
        margin: 54.5lvh 22.5vw auto 22.5vw;
    }
    .lbNavSliderSmall{
        width: 2vw;
        height: 2vw;
        transition: .5s;
        margin-left: 0%;
        margin-right: 0%;
        filter: brightness(100%);
    }
    .lbNavSliderBig{
        width: 3.5vw;
        height: 3.5vw;
        transition: .5s;
        margin-left: 5%;
        margin-right: 5%;
        filter: brightness(200%);
    }
}

@media (min-width: 601px) and (orientation: portrait){
    #lightboxContainer .carousel_active{
        position: absolute;
        width: 95%;
        height: 70%;
        margin: 7.35% 2.5% 0% 2.5%;
        z-index: 105;
        opacity: 1;
    }
    #lightboxContainer .carousel_inactive{
        position: absolute;
        width: 95%;
        height: 70%;
        margin: 7.35% 2.5% 0% 2.5%;
        z-index: 50;
        opacity: 0;
    }
    .carouselButton{
        font-size: 7lvh;
        top: 55lvh;
        z-index: 110;
    }
    
    .carouselButton.prev{
        left: 1vw;
    }
    .carouselButton.next{
        right: 1vw;
    }
    #lightboxExit{
        position: relative;
        float: right;
        margin: 1vw 1vw 0 0;
        width: 5vw;
        height: 5vw;
    }
    .carousel_active #lightboxNav, .carousel_inactive #lightboxNav{
        position: absolute;
        z-index: 110;
        width: 60vw;
        height: 6vw;
        margin: 58lvh 14.5vw auto 14.5vw;
    }
    .lbNavSliderSmall{
        width: 5vw;
        height: 5vw;
        transition: .5s;
        margin-left: 0%;
        margin-right: 0%;
        filter: brightness(100%);
    }
    .lbNavSliderBig{
        width: 7vw;
        height: 7vw;
        transition: .5s;
        margin-left: 5%;
        margin-right: 5%;
        filter: brightness(200%);
    }
}

@media (min-height: 601px) and (orientation: landscape){
    #lightboxContainer{
        min-width: 85vw;
        height: 75lvh;
        margin: 16lvh 7.5vw auto 7.5vw;
    }
    #lightboxContainer .carousel_active{
        position: absolute;
        width: 95%;
        height: 85%;
        margin: 1.35% 2.5% 0% 2.5%;
        z-index: 105;
        opacity: 1;
    }
    #lightboxContainer .carousel_inactive{
        position: absolute;
        width: 95%;
        height: 85%;
        margin: 1.35% 2.5% 0% 2.5%;
        z-index: 50;
        opacity: 0;
    }
    .carouselButton{
        top: 61.25lvh;
        z-index: 110;
    }
    .carouselButton.prev{
        left: 18vw;
    }
    .carouselButton.next{
        right: 18vw;
    }
    .carousel_active #lightboxNav, .carousel_inactive #lightboxNav{
        position: absolute;
        right: 0vw;
        left: -2vw;
        z-index: 110;
        width: 35vw;
        height: 6vw;
        margin: 63.5lvh 25vw auto 25vw;
    }
    .lbNavSliderSmall{
        width: 2vw;
        height: 2vw;
        transition: .5s;
        margin-left: 0%;
        margin-right: 0%;
        filter: brightness(100%);
    }
    .lbNavSliderBig{
        width: 3.5vw;
        height: 3.5vw;
        transition: .5s;
        margin-left: 5%;
        margin-right: 5%;
        filter: brightness(200%);
    }
}

@media (min-width: 768px) and (orientation: portrait){
    #lightboxContainer .carousel_active{
        position: absolute;
        width: 95%;
        height: 82%;
        margin: 7.35% 2.5% 0% 2.5%;
        z-index: 105;
        opacity: 1;
    }
    #lightboxContainer .carousel_inactive{
        position: absolute;
        width: 95%;
        height: 82%;
        margin: 7.35% 2.5% 0% 2.5%;
        z-index: 50;
        opacity: 0;
    }
    .carouselButton{
        font-size: 7lvh;
        top: 65.5lvh;
        z-index: 110;
    }
    
    .carouselButton.prev{
        left: 1vw;
    }
    .carouselButton.next{
        right: 1vw;
    }
    #lightboxExit{
        position: relative;
        float: right;
        margin: 1vw 1vw 0 0;
        width: 4.5vw;
        height: 4.5vw;
    }
    .carousel_active #lightboxNav, .carousel_inactive #lightboxNav{
        position: absolute;
        z-index: 110;
        width: 60vw;
        height: 6vw;
        margin: 68lvh 14.5vw auto 14.5vw;
    }
    .lbNavSliderSmall{
        width: 5vw;
        height: 5vw;
        transition: .5s;
        margin-left: 0%;
        margin-right: 0%;
        filter: brightness(100%);
    }
    .lbNavSliderBig{
        width: 7vw;
        height: 7vw;
        transition: .5s;
        margin-left: 5%;
        margin-right: 5%;
        filter: brightness(200%);
    }
}

@media (min-height: 768px) and (orientation: landscape){
    #lightboxContainer{
        min-width: 85vw;
        height: 80lvh;
        margin: 14lvh 7.5vw auto 7.5vw;
    }
    #lightboxContainer .carousel_active{
        position: absolute;
        width: 95%;
        height: 88%;
        margin: 1.35% 2.5% 4.35% 2.5%;
        z-index: 105;
        opacity: 1;
    }
    #lightboxContainer .carousel_inactive{
        position: absolute;
        width: 95%;
        height: 88%;
        margin: 1.35% 2.5% 4.35% 2.5%;
        z-index: 50;
        opacity: 0;
    }
    .carouselButton{
        top: 67.5lvh;
        z-index: 110;
    }
    .carouselButton.prev{
        left: 13vw;
    }
    .carouselButton.next{
        right: 13vw;
    }
    .carousel_active #lightboxNav, .carousel_inactive #lightboxNav{
        position: absolute;
        right: 0vw;
        left: -2vw;
        z-index: 110;
        width: 40vw;
        height: 6vw;
        margin: 70.5lvh 22.5vw auto 22.5vw;
    }
    .lbNavSliderSmall{
        width: 2vw;
        height: 2vw;
        transition: .5s;
        margin-left: 0%;
        margin-right: 0%;
        filter: brightness(100%);
    }
    .lbNavSliderBig{
        width: 3.5vw;
        height: 3.5vw;
        transition: .5s;
        margin-left: 5%;
        margin-right: 5%;
        filter: brightness(200%);
    }
}

@media (min-width: 992px) and (orientation: portrait){
    #lightboxContainer .carousel_active{
        position: absolute;
        width: 95%;
        height: 82%;
        margin: 7.35% 2.5% 0% 2.5%;
        z-index: 105;
        opacity: 1;
    }
    #lightboxContainer .carousel_inactive{
        position: absolute;
        width: 95%;
        height: 82%;
        margin: 7.35% 2.5% 0% 2.5%;
        z-index: 50;
        opacity: 0;
    }
    .carouselButton{
        font-size: 7lvh;
        top: 65.5lvh;
        z-index: 110;
    }
    
    .carouselButton.prev{
        left: 1vw;
    }
    .carouselButton.next{
        right: 1vw;
    }
    #lightboxExit{
        position: relative;
        float: right;
        margin: 1vw 1vw 0 0;
        width: 4.5vw;
        height: 4.5vw;
    }
    .carousel_active #lightboxNav, .carousel_inactive #lightboxNav{
        position: absolute;
        z-index: 110;
        width: 60vw;
        height: 6vw;
        margin: 68lvh 14.5vw auto 14.5vw;
    }
    .lbNavSliderSmall{
        width: 5vw;
        height: 5vw;
        transition: .5s;
        margin-left: 0%;
        margin-right: 0%;
        filter: brightness(100%);
    }
    .lbNavSliderBig{
        width: 7vw;
        height: 7vw;
        transition: .5s;
        margin-left: 5%;
        margin-right: 5%;
        filter: brightness(200%);
    }
}

@media (min-height: 992px) and (orientation: landscape){
    #lightboxContainer{
        min-width: 85vw;
        height: 80lvh;
        margin: 14lvh 7.5vw auto 7.5vw;
    }
    #lightboxContainer .carousel_active{
        position: absolute;
        width: 95%;
        height: 88%;
        margin: 1.35% 2.5% 4.35% 2.5%;
        z-index: 105;
        opacity: 1;
    }
    #lightboxContainer .carousel_inactive{
        position: absolute;
        width: 95%;
        height: 88%;
        margin: 1.35% 2.5% 4.35% 2.5%;
        z-index: 50;
        opacity: 0;
    }
    .carouselButton{
        top: 67.5lvh;
        z-index: 110;
    }
    .carouselButton.prev{
        left: 13vw;
    }
    .carouselButton.next{
        right: 13vw;
    }
    .carousel_active #lightboxNav, .carousel_inactive #lightboxNav{
        position: absolute;
        right: 0vw;
        left: -2vw;
        z-index: 110;
        width: 40vw;
        height: 6vw;
        margin: 70.5lvh 22.5vw auto 22.5vw;
    }
    .lbNavSliderSmall{
        width: 2vw;
        height: 2vw;
        transition: .5s;
        margin-left: 0%;
        margin-right: 0%;
        filter: brightness(100%);
    }
    .lbNavSliderBig{
        width: 3.5vw;
        height: 3.5vw;
        transition: .5s;
        margin-left: 5%;
        margin-right: 5%;
        filter: brightness(200%);
    }
}

@media (min-height: 1300px) and (orientation: portrait){
    #lightboxContainer .carousel_active{
        position: absolute;
        width: 95%;
        height: 82%;
        margin: 7.35% 2.5% 0% 2.5%;
        z-index: 105;
        opacity: 1;
    }
    #lightboxContainer .carousel_inactive{
        position: absolute;
        width: 95%;
        height: 82%;
        margin: 7.35% 2.5% 0% 2.5%;
        z-index: 50;
        opacity: 0;
    }
    .carouselButton{
        font-size: 7lvh;
        top: 64.75lvh;
        z-index: 110;
    }
    
    .carouselButton.prev{
        left: 9.5vw;
    }
    .carouselButton.next{
        right: 9.5vw;
    }
    #lightboxExit{
        position: relative;
        float: right;
        margin: 1vw 1vw 0 0;
        width: 2.5vw;
        height: 2.5vw;
    }
    .carousel_active #lightboxNav, .carousel_inactive #lightboxNav{
        position: absolute;
        z-index: 110;
        width: 48vw;
        height: 6vw;
        margin: 66.75lvh 21.15vw auto 21.15vw;
    }
    .lbNavSliderSmall{
        width: 3vw;
        height: 3vw;
        transition: .5s;
        margin-left: 0%;
        margin-right: 0%;
        filter: brightness(100%);
    }
    .lbNavSliderBig{
        width: 5vw;
        height: 5vw;
        transition: .5s;
        margin-left: 5%;
        margin-right: 5%;
        filter: brightness(200%);
    }
}

@media (min-width: 1300px) and (orientation: landscape){
    #lightboxContainer{
        min-width: 85vw;
        height: 80lvh;
        margin: 14lvh 7.5vw auto 7.5vw;
    }
    #lightboxContainer .carousel_active{
        position: absolute;
        width: 95%;
        height: 88%;
        margin: 1.35% 2.5% 4.35% 2.5%;
        z-index: 105;
        opacity: 1;
    }
    #lightboxContainer .carousel_inactive{
        position: absolute;
        width: 95%;
        height: 88%;
        margin: 1.35% 2.5% 4.35% 2.5%;
        z-index: 50;
        opacity: 0;
    }
    .carouselButton{
        top: 67.5lvh;
        z-index: 110;
    }
    .carouselButton.prev{
        left: 7vw;
    }
    .carouselButton.next{
        right: 7vw;
    }
    .carousel_active #lightboxNav, .carousel_inactive #lightboxNav{
        position: absolute;
        right: 0vw;
        left: -2vw;
        z-index: 110;
        width: 40vw;
        height: 6vw;
        margin: 70.5lvh 22.5vw auto 22.5vw;
    }
    .lbNavSliderSmall{
        width: 2vw;
        height: 2vw;
        transition: .5s;
        margin-left: 0%;
        margin-right: 0%;
        filter: brightness(100%);
    }
    .lbNavSliderBig{
        width: 3.5vw;
        height: 3.5vw;
        transition: .5s;
        margin-left: 5%;
        margin-right: 5%;
        filter: brightness(200%);
    }
}

@media (min-height: 1650px) and (orientation: portrait){
    #lightboxContainer .carousel_active{
        position: absolute;
        width: 95%;
        height: 82%;
        margin: 7.35% 2.5% 0% 2.5%;
        z-index: 105;
        opacity: 1;
    }
    #lightboxContainer .carousel_inactive{
        position: absolute;
        width: 95%;
        height: 82%;
        margin: 7.35% 2.5% 0% 2.5%;
        z-index: 50;
        opacity: 0;
    }
    .carouselButton{
        font-size: 7lvh;
        top: 65.5lvh;
        z-index: 110;
    }
    
    .carouselButton.prev{
        left: 1vw;
    }
    .carouselButton.next{
        right: 1vw;
    }
    #lightboxExit{
        position: relative;
        float: right;
        margin: 1vw 1vw 0 0;
        width: 4.5vw;
        height: 4.5vw;
    }
    .carousel_active #lightboxNav, .carousel_inactive #lightboxNav{
        position: absolute;
        z-index: 110;
        width: 60vw;
        height: 6vw;
        margin: 68lvh 14.5vw auto 14.5vw;
    }
    .lbNavSliderSmall{
        width: 5vw;
        height: 5vw;
        transition: .5s;
        margin-left: 0%;
        margin-right: 0%;
        filter: brightness(100%);
    }
    .lbNavSliderBig{
        width: 7vw;
        height: 7vw;
        transition: .5s;
        margin-left: 5%;
        margin-right: 5%;
        filter: brightness(200%);
    }
}

@media (min-width: 1650px) and (orientation: landscape){
    #lightboxContainer{
        min-width: 85vw;
        height: 80lvh;
        margin: 14lvh 7.5vw auto 7.5vw;
    }
    #lightboxContainer .carousel_active{
        position: absolute;
        width: 95%;
        height: 88%;
        margin: 1.35% 2.5% 4.35% 2.5%;
        z-index: 105;
        opacity: 1;
    }
    #lightboxContainer .carousel_inactive{
        position: absolute;
        width: 95%;
        height: 88%;
        margin: 1.35% 2.5% 4.35% 2.5%;
        z-index: 50;
        opacity: 0;
    }
    .carouselButton{
        top: 67.5lvh;
        z-index: 110;
    }
    .carouselButton.prev{
        left: 21.25vw;
    }
    .carouselButton.next{
        right: 21.25vw;
    }
    #lightboxExit{
        position: relative;
        float: right;
        margin: .5vw .5vw 0 0;
        width: 1.5vw;
        height: 1.5vw;
    }
    .carousel_active #lightboxNav, .carousel_inactive #lightboxNav{
        position: absolute;
        right: 0vw;
        left: -2vw;
        z-index: 110;
        width: 28vw;
        height: 4vw;
        margin: 70.5lvh 28.44vw auto 28.44vw;
    }
    .lbNavSliderSmall{
        width: 1.5vw;
        height: 1.5vw;
        transition: .5s;
        margin-left: 0%;
        margin-right: 0%;
        filter: brightness(100%);
    }
    .lbNavSliderBig{
        width: 3vw;
        height: 3vw;
        transition: .5s;
        margin-left: 5%;
        margin-right: 5%;
        filter: brightness(200%);
    }
}


/*____________________________________________________FOOTER___*/

footer{
    width: 5vw;
    height: 76lvh;
    position: fixed;
    float: left;
    top: 12lvh;
    left: 2vw;
    z-index: 100;
}
footer nav{
    position: relative;
    height: 50lvh;
    top: 13lvh;
}
footer nav ul{
    height: 100%;
    margin: 0;
    padding: 0px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}
footer nav ul li{
    text-align: center;
    position: relative;
    z-index: 85;
}
footer nav li img{
    width: 100%;
    height: 100%;
}
#slider #sliderLine{
    position: absolute;
    margin: auto 50% auto 50%;
    width: 2px;
    height: 95%;
    top: 2.5%;
    background: #ffffff;
    opacity: .8;
    z-index: 80;
}
.sliderSmall{
    width: 2.5vw;
    height: 2.5vw;
    transition: .5s;
    margin-top: 0%;
    margin-bottom: 0%;
    filter: brightness(100%);
}
.sliderBig{
    width: 4vw;
    height: 4vw;
    transition: .5s;
    margin-top: 250%;
    margin-bottom: 250%;
    filter: brightness(200%);
}
#firstSliderPoint{
    margin-top: 0px;
}
#lastSliderPoint{
    margin-bottom: 0px;
}

/*_____________________________________________FOOTER:_RESPONSIVE_BREAKPOINTS___*/

/*_____________600px, 601px, 768px, 992px; 1200px;_____________*/

@media (max-width: 600px) and (orientation: portrait){
    footer{
        width: 7vw;
        height: 76lvh;
        position: fixed;
        float: left;
        top: 12lvh;
        left: 1.5vw;
        z-index: 100;
    }
    footer nav{
        position: relative;
        height: 50lvh;
        top: 13lvh;
    }
    footer nav ul{
        height: 100%;
        margin: 0;
        padding: 0px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
    }
    footer nav ul li{
        text-align: center;
        z-index: 85;
    }
    #slider #sliderLine{
        position: absolute;
        margin: auto 50% auto 50%;
        width: 1px;
        height: 95%;
        top: 2.5%;
        opacity: .8;
        z-index: 80;
    }
    .sliderSmall{
        width: 7vw;
        height: 7vw;
        transition: .5s;
        margin-top: 0%;
        margin-bottom: 0%;
    }
    .sliderBig{
        width: 10vw;
        height: 10vw;
        transition: .5s;
        margin-top: 200%;
        margin-bottom: 200%;
    }
    #firstSliderPoint{
        margin-top: 0px;
    }
    #lastSliderPoint{
        margin-bottom: 0px;
    }
    .length07{
        height: 55lvh;
    }
    .length06{
        height: 62lvh;
    }
}

@media (max-height: 600px) and (orientation: landscape){
    footer{
        width: 7vw;
        height: 76lvh;
        position: fixed;
        float: left;
        top: 12lvh;
        left: 1.5vw;
        z-index: 100;
    }
    footer nav{
        position: relative;
        height: 50lvh;
        top: 13lvh;
    }
    footer nav ul{
        height: 100%;
        margin: 0;
        padding: 0px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
    }
    footer nav ul li{
        text-align: center;
        z-index: 85;
    }
    #slider #sliderLine{
        position: absolute;
        margin: auto 50% auto 50%;
        width: 1px;
        height: 95%;
        top: 2.5%;
        opacity: .8;
        z-index: 80;
    }
    .sliderSmall{
        width: 2.5vw;
        height: 2.5vw;
        transition: .5s;
        margin-top: 0%;
        margin-bottom: 0%;
    }
    .sliderBig{
        width: 3.5vw;
        height: 3.5vw;
        transition: .5s;
        margin-top: 50%;
        margin-bottom: 50%;
    }
    #firstSliderPoint{
        margin-top: 0px;
    }
    #lastSliderPoint{
        margin-bottom: 0px;
    }
}

@media (min-width: 601px) and (orientation: portrait){
    footer{
        width: 7vw;
        height: 76lvh;
        position: fixed;
        float: left;
        top: 12lvh;
        left: 1.5vw;
        z-index: 100;
    }
    footer nav{
        position: relative;
        height: 50lvh;
        top: 13lvh;
    }
    footer nav ul{
        height: 100%;
        margin: 0;
        padding: 0px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
    }
    footer nav ul li{
        text-align: center;
        z-index: 85;
    }
    #slider #sliderLine{
        position: absolute;
        margin: auto 50% auto 50%;
        width: 1px;
        height: 95%;
        top: 2.5%;
        opacity: .8;
        z-index: 80;
    }
    .sliderSmall{
        width: 6vw;
        height: 6vw;
        transition: .5s;
        margin-top: 0%;
        margin-bottom: 0%;
    }
    .sliderBig{
        width: 9vw;
        height: 9vw;
        transition: .5s;
        margin-top: 250%;
        margin-bottom: 250%;
    }
    #firstSliderPoint{
        margin-top: 0px;
    }
    #lastSliderPoint{
        margin-bottom: 0px;
    }
}

@media (min-height: 601px) and (orientation: landscape){
    footer{
        width: 7vw;
        height: 76lvh;
        position: fixed;
        float: left;
        top: 12lvh;
        left: 1.5vw;
        z-index: 100;
    }
    footer nav{
        position: relative;
        height: 50lvh;
        top: 13lvh;
    }
    footer nav ul{
        height: 100%;
        margin: 0;
        padding: 0px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
    }
    footer nav ul li{
        text-align: center;
        z-index: 85;
    }
    #slider #sliderLine{
        position: absolute;
        margin: auto 50% auto 50%;
        width: 1px;
        height: 95%;
        top: 2.5%;
        opacity: .8;
        z-index: 80;
    }
    .sliderSmall{
        width: 4vw;
        height: 4vw;
        transition: .5s;
        margin-top: 0%;
        margin-bottom: 0%;
    }
    .sliderBig{
        width: 7vw;
        height: 7vw;
        transition: .5s;
        margin-top: 50%;
        margin-bottom: 50%;
    }
    #firstSliderPoint{
        margin-top: 0px;
    }
    #lastSliderPoint{
        margin-bottom: 0px;
    }
}

@media (min-width: 768px) and (orientation: portrait){
    footer{
        width: 7vw;
        height: 76lvh;
        position: fixed;
        float: left;
        top: 12lvh;
        left: 1.5vw;
        z-index: 100;
    }
    footer nav{
        position: relative;
        height: 50lvh;
        top: 13lvh;
    }
    footer nav ul{
        height: 100%;
        margin: 0;
        padding: 0px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
    }
    footer nav ul li{
        text-align: center;
        z-index: 85;
    }
    #slider #sliderLine{
        position: absolute;
        margin: auto 50% auto 50%;
        width: 1px;
        height: 95%;
        top: 2.5%;
        opacity: .8;
        z-index: 80;
    }
    .sliderSmall{
        width: 6vw;
        height: 6vw;
        transition: .5s;
        margin-top: 0%;
        margin-bottom: 0%;
    }
    .sliderBig{
        width: 9vw;
        height: 9vw;
        transition: .5s;
        margin-top: 150%;
        margin-bottom: 150%;
    }
    #firstSliderPoint{
        margin-top: 0px;
    }
    #lastSliderPoint{
        margin-bottom: 0px;
    }
}

@media (min-height: 768px) and (orientation: landscape){
    footer{
        width: 7vw;
        height: 76lvh;
        position: fixed;
        float: left;
        top: 12lvh;
        left: 1.5vw;
        z-index: 100;
    }
    footer nav{
        position: relative;
        height: 50lvh;
        top: 13lvh;
    }
    footer nav ul{
        height: 100%;
        margin: 0;
        padding: 0px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
    }
    footer nav ul li{
        text-align: center;
        z-index: 85;
    }
    #slider #sliderLine{
        position: absolute;
        margin: auto 50% auto 50%;
        width: 1px;
        height: 95%;
        top: 2.5%;
        opacity: .8;
        z-index: 80;
    }
    .sliderSmall{
        width: 4vw;
        height: 4vw;
        transition: .5s;
        margin-top: 0%;
        margin-bottom: 0%;
    }
    .sliderBig{
        width: 7vw;
        height: 7vw;
        transition: .5s;
        margin-top: 50%;
        margin-bottom: 50%;
    }
    #firstSliderPoint{
        margin-top: 0px;
    }
    #lastSliderPoint{
        margin-bottom: 0px;
    }
}

@media (min-width: 992px) and (orientation: portrait){
    footer{
        width: 7vw;
        height: 76lvh;
        position: fixed;
        float: left;
        top: 12lvh;
        left: 1.5vw;
        z-index: 100;
    }
    footer nav{
        position: relative;
        height: 50lvh;
        top: 13lvh;
    }
    footer nav ul{
        height: 100%;
        margin: 0;
        padding: 0px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
    }
    footer nav ul li{
        text-align: center;
        z-index: 85;
    }
    #slider #sliderLine{
        position: absolute;
        margin: auto 50% auto 50%;
        width: 1px;
        height: 95%;
        top: 2.5%;
        opacity: .8;
        z-index: 80;
    }
    .sliderSmall{
        width: 6vw;
        height: 6vw;
        transition: .5s;
        margin-top: 0%;
        margin-bottom: 0%;
    }
    .sliderBig{
        width: 9vw;
        height: 9vw;
        transition: .5s;
        margin-top: 150%;
        margin-bottom: 150%;
    }
    #firstSliderPoint{
        margin-top: 0px;
    }
    #lastSliderPoint{
        margin-bottom: 0px;
    }
}

@media (min-height: 992px) and (orientation: landscape){
    footer{
        width: 7vw;
        height: 76lvh;
        position: fixed;
        float: left;
        top: 12lvh;
        left: 1.5vw;
        z-index: 100;
    }
    footer nav{
        position: relative;
        height: 50lvh;
        top: 13lvh;
    }
    footer nav ul{
        height: 100%;
        margin: 0;
        padding: 0px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
    }
    footer nav ul li{
        text-align: center;
        z-index: 85;
    }
    #slider #sliderLine{
        position: absolute;
        margin: auto 50% auto 50%;
        width: 1px;
        height: 95%;
        top: 2.5%;
        opacity: .8;
        z-index: 80;
    }
    .sliderSmall{
        width: 4vw;
        height: 4vw;
        transition: .5s;
        margin-top: 0%;
        margin-bottom: 0%;
    }
    .sliderBig{
        width: 7vw;
        height: 7vw;
        transition: .5s;
        margin-top: 50%;
        margin-bottom: 50%;
    }
    #firstSliderPoint{
        margin-top: 0px;
    }
    #lastSliderPoint{
        margin-bottom: 0px;
    }
}

@media (min-height: 1300px) and (orientation: portrait){
    footer{
        width: 7vw;
        height: 76lvh;
        position: fixed;
        float: left;
        top: 12lvh;
        left: 1.5vw;
        z-index: 100;
    }
    footer nav{
        position: relative;
        height: 50lvh;
        top: 13lvh;
    }
    footer nav ul{
        height: 100%;
        margin: 0;
        padding: 0px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
    }
    footer nav ul li{
        text-align: center;
        z-index: 85;
    }
    #slider #sliderLine{
        position: absolute;
        margin: auto 50% auto 50%;
        width: 1px;
        height: 95%;
        top: 2.5%;
        opacity: .8;
        z-index: 80;
    }
    .sliderSmall{
        width: 4vw;
        height: 4vw;
        transition: .5s;
        margin-top: 0%;
        margin-bottom: 0%;
    }
    .sliderBig{
        width: 6vw;
        height: 6vw;
        transition: .5s;
        margin-top: 110%;
        margin-bottom: 110%;
    }
    #firstSliderPoint{
        margin-top: 0px;
    }
    #lastSliderPoint{
        margin-bottom: 0px;
    }
}

@media (min-width: 1300px) and (orientation: landscape){
    footer{
        width: 7vw;
        height: 76lvh;
        position: fixed;
        float: left;
        top: 12lvh;
        left: 1.5vw;
        z-index: 100;
    }
    footer nav{
        position: relative;
        height: 50lvh;
        top: 13lvh;
    }
    footer nav ul{
        height: 100%;
        margin: 0;
        padding: 0px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
    }
    footer nav ul li{
        text-align: center;
        z-index: 85;
    }
    #slider #sliderLine{
        position: absolute;
        margin: auto 50% auto 50%;
        width: 1px;
        height: 95%;
        top: 2.5%;
        opacity: .8;
        z-index: 80;
    }
    .sliderSmall{
        width: 3vw;
        height: 3vw;
        transition: .5s;
        margin-top: 0%;
        margin-bottom: 0%;
    }
    .sliderBig{
        width: 5vw;
        height: 5vw;
        transition: .5s;
        margin-top: 50%;
        margin-bottom: 50%;
    }
    #firstSliderPoint{
        margin-top: 0px;
    }
    #lastSliderPoint{
        margin-bottom: 0px;
    }
}

@media (min-height: 1650px) and (orientation: portrait){
    footer{
        width: 7vw;
        height: 76lvh;
        position: fixed;
        float: left;
        top: 12lvh;
        left: 1.5vw;
        z-index: 100;
    }
    footer nav{
        position: relative;
        height: 50lvh;
        top: 13lvh;
    }
    footer nav ul{
        height: 100%;
        margin: 0;
        padding: 0px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
    }
    footer nav ul li{
        text-align: center;
        z-index: 85;
    }
    #slider #sliderLine{
        position: absolute;
        margin: auto 50% auto 50%;
        width: 1px;
        height: 95%;
        top: 2.5%;
        opacity: .8;
        z-index: 80;
    }
    .sliderSmall{
        width: 4vw;
        height: 4vw;
        transition: .5s;
        margin-top: 0%;
        margin-bottom: 0%;
    }
    .sliderBig{
        width: 6vw;
        height: 6vw;
        transition: .5s;
        margin-top: 60%;
        margin-bottom: 60%;
    }
    #firstSliderPoint{
        margin-top: 0px;
    }
    #lastSliderPoint{
        margin-bottom: 0px;
    }
}

@media (min-width: 1650px) and (orientation: landscape){
    footer{
        width: 7vw;
        height: 76lvh;
        position: fixed;
        float: left;
        top: 12lvh;
        left: -2vh;
        z-index: 100;
    }
    footer nav{
        position: relative;
        height: 50lvh;
        top: 13lvh;
    }
    footer nav ul{
        height: 100%;
        margin: 0;
        padding: 0px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
    }
    footer nav ul li{
        text-align: center;
        z-index: 85;
    }
    #slider #sliderLine{
        position: absolute;
        margin: auto 50% auto 50%;
        width: 1px;
        height: 95%;
        top: 2.5%;
        opacity: .8;
        z-index: 80;
    }
    .sliderSmall{
        width: 3vh;
        height: 3vh;
        transition: .5s;
        margin-top: 0%;
        margin-bottom: 0%;
    }
    .sliderBig{
        width: 5vh;
        height: 5vh;
        transition: .5s;
        margin-top: 70%;
        margin-bottom: 70%;
    }
    #firstSliderPoint{
        margin-top: 0px;
    }
    #lastSliderPoint{
        margin-bottom: 0px;
    }
}