/*****************************/
/***     Animated Intro    ***/
/*****************************/

#intro {
    overflow: hidden;
    width: 100dvw;
    height: calc(100dvh - 60px);
    position: fixed;
    z-index: 6;
}
  
#intro-house {
    position: absolute;
    top: 0;
    height: 100dvh;
    width: 100dvw;
    z-index: 2;
    overflow: hidden;
}
  
#intro-title {
    position: absolute;
    font-size:4rem;
    color: white;
    line-height: 4rem;
    color: #ffffff;
    top: 14dvh;
    text-shadow: 0px 4px 6px rgba(0, 0, 0, 1);
    z-index: 3;
}
  
#intro-client {
    position: absolute;
    height: 28dvh;
    right: -13dvw;
    bottom: 0;
    z-index: 11;
}
  
#intro-logo {
    width: 50dvw;
    position: absolute;
    top: 68dvh;
    left: 26dvw;
    z-index: 1;
}
  
.intro-door {
  position: absolute;
  transition: all 5s ease;
  transform-style: preserve-3d;
}
  
#intro-left-door {
  width: 14.5dvw;
  top: 61.9dvh;
  z-index: 10;
  right: 49.5dvw;
  transform-origin: left center;
  animation: left-door-animation 1.5s 1 ease-in-out;
}
  
#intro-right-door {
  width: 14.5dvw;
  top: 61.9dvh;
  z-index: 10;
  left: 50dvw;
  transform-origin: right center;
  animation: right-door-animation 1.5s 1 ease-in-out;
}

#landing-logo {
    height: 30dvh;
}
  
@keyframes left-door-animation {
    0%{
        -webkit-transform: perspective(900) rotateY(0deg);
    }

    90%{
        opacity: 1;
    }

    100%{
        -webkit-transform: perspective(900) rotateY(90deg);
        opacity: 0;
    }
}

@keyframes right-door-animation {
    0%{
        -webkit-transform: perspective(900) rotateY(0deg);
    }
  
    90%{
      opacity: 1;
    }
  
    100%{
        -webkit-transform: perspective(900) rotateY(-90deg);
        opacity: 0;
    }
}

@media (max-width: 932px) and (orientation: landscape) {
    #city-bx {
        height: 200dvh;
        width: 100dvw;
    }

    #intro-infos-1 {
        top: 9dvh;
        left: 0;
    }

    #intro-infos-2 {
        bottom: 23dvh;
        left: 0;
        padding: 20px 0px;
    }

    #landing-logo {
        height: 60dvh;
    }

    #intro-house {
        position: absolute;
        height: 220dvh;
        width: 100dvw;
        z-index: 2;
        overflow: hidden;
        top: -100dvh;
    }

    #city-bx {
        width: 80dvw;
        height: 100dvh;
        object-position: 28dvw -57dvh;
    }

    #intro-right-door {
        width: 7.5dvw;
        top: 35.9dvh;
        z-index: 10;
        left: 50dvw;
        transform-origin: right center;
        animation: right-door-animation 1.5s 1 ease-in-out;
    }

    #intro-right-door {
        width: 9.5dvw;
        top: 35.9dvh;
        z-index: 10;
        left: 50dvw;
        transform-origin: right center;
        animation: right-door-animation 1.5s 1 ease-in-out;
    }

    #intro-left-door {
        width: 9.5dvw;
        top: 35.9dvh;
        z-index: 10;
        right: 49.5dvw;
        transform-origin: left center;
        animation: left-door-animation 1.5s 1 ease-in-out;
    }
}

/* 
  ##Device = Tablets, Ipads (portrait)
  ##Screen = B/w 768px to 1024px
*/

@media (min-width: 768px) and (max-width: 1024px) {
    /* CSS */
    
    #intro-client {
        right: 0dvw;
    }

    #intro-right-door {
        width: 7.5dvw;
    }

    #intro-left-door {
        width: 7.5dvw;
    }

    #city-bx {
        width: 80dvw;
        height: 100dvh;
        object-position: 28dvw 9dvh;
    }

    #intro-house {
        width: 100dvw;
    }
}
  
/* 
##Device = Tablets, Ipads (landscape)
##Screen = B/w 768px to 1024px
*/

@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
    /* CSS */

    #intro-client {
        right: 0dvw;
    }

    #intro-left-door {
        width: 14.5dvw;
    }

    #intro-right-door {
        width: 14.5dvw;
    }

    #city-bx {
        width: 80dvw;
        height: 100dvh;
        object-position: 28dvw 9dvh;
    }
}

@media (min-width: 768px) and (max-width: 1024px) and (max-height: 600px) and (orientation: landscape) {
    #intro-right-door {
        width: 7.5dvw;
    }

    #intro-left-door {
        width: 7.5dvw;
    }
}

@media (min-width: 1024px) {
    #intro-house {
        width: 1024px;
    }

    #intro-left-door {
        height: auto;
        width: 3.1dvw;
        right: 50dvw;
    }

    #intro-right-door {
        height: auto;
        width: 3.1dvw;
    }

    #city-bx {
        object-position: 10dvw 10dvw;
        position: absolute;
        width: 575px;
        left: 17dvw;
        left: 25%;
    }

    #intro-client { 
        right: 25dvw;
    }
}

@media (min-width: 1800px) {
    #city-bx {
        object-position: 10dvw 10dvw;
        position: absolute;
        width: 672px;
        left: 17dvw;
        left: 30%;
        height: 90dvh;
    }

    #intro-client {
        right: 38dvw;
    }
}

@media screen and (max-width: 335px) {
    #intro-left-door, #intro-right-door {
        width: 14.5dvw;
    }
}