/* Phones portrait */
.screen{
    width: 100vw;
    height: 100vh;
}
.box-split{
    position: absolute;
    transition: all 0.7s ease-in-out;
    overflow: hidden;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    z-index: 1;

    width: 7rem;
    height: 6.8rem;
    bottom: 2.7rem;
    right: 2.5rem;

    border-width: 0.7rem;
    border-style: solid;
    border-image: -webkit-linear-gradient(0deg, #00E1C2 0%, #00DCC6 25%, #00CFD3 55%, #00B8E7 85%, #00ACF2 100%) 1;
    background-color: white;
}
.box-plant{
    position: absolute;
    z-index: 3;
    transition: all 0.7s ease-in-out;
    overflow: hidden;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;

    width: 7.6rem;
    height: 7.2rem;
    top: 2.2rem;
    left: 1.9rem;

    border-width: 0.7rem;
    border-style: solid;
    border-image: -webkit-linear-gradient(0deg, #00E1C2 0%, #00DCC6 25%, #00CFD3 55%, #00B8E7 85%, #00ACF2 100%) 1;
    background-color: white;
}
.wboxcorner{
    position: absolute;
    z-index: 2;

    width: 8rem;
    height: 8rem;
    top: 1.8rem;
    left: 1.5rem;

    background-color: white;
}
.wrapper{
    position: absolute;
    display: inline-block;
    perspective: 1px;
    z-index: 0;

    width: 9.5rem;
    height: 9.5rem;
    top: 50%;
    left: 50%;

    transform: translateZ(0) translate(-50%, -70%);
}
.hoverbox-split{
    position: absolute;
    display: inline-block;
    z-index: 4;

    bottom: 2.7rem;
    right: 2.5rem;

    transform: translate(0%, 0%);
}
.hoverbox-plant{
    position: absolute;
    display: inline-block;
    z-index: 5;

    top: 2.2rem;
    left: 1.9rem;
    
    transform: translate(0%, 0%);
}
.img-split{
    position: absolute;
    pointer-events: none;
    transition: all 0.3s ease-in;
    transition-delay: 0.5s;
    object-fit: cover;

    opacity: 0;
    z-index: 0;

    height: 115%;
    left: 0%;
    bottom: 0%;

    transform: translate(-55%, 0%);
}
.img-plant{
    position: absolute;
    pointer-events: none;
    transition: all 0.3s ease-in-out;
    transition-delay: 0.3s;
    object-fit: cover;

    opacity: 0;
    z-index: -2;

    height: 60%;
    left: 50%;
    bottom: 0%;

    transform: translate(-50%, 3%);
    filter: drop-shadow(16px 2px 1px #d6d6d6);
}
.soon{
    position: absolute;
    transition: all 0.7s ease-in-out;
    z-index: -1;

    text-align: center;
    font-weight: bolder;
    font-size: 3.5rem;
    color: #6B8096;

    left: 50%;
    top: 50%;

    transform: translate(-75%, -310%);
}
.colortext{
    position: absolute;
    display: inline-block;
    transition: all 0.7s ease-in-out;
    z-index: -2;

    background: -webkit-linear-gradient(0deg, #00DEC4 0%, #00B0EE 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    text-align: left;
    font-size: 2.3rem;
    font-weight: bold;
    line-height: 2.5rem;

    width: 10rem;
    top: 50%;
    left: 50%;

    transform: translate(-25%, 100%);
}
.colortext-line{
    position: absolute;
    visibility: hidden;
    transition: all 0.7s ease-in-out;
    z-index: -2;

    background: -webkit-linear-gradient(0deg, #00B0EE 0%, #00B0EE 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    font-weight: bold;
    text-align: center;
    font-size: 2.3rem;

    top: 50%;
    left: 50%;
    width: fit-content;
}
.colortext::first-line{
    font-size: 3.5rem;
}
.link{
    position: absolute;
    transition: all 0.5s ease-in-out;
    z-index: 5;

    text-align: left;
    white-space: normal;

    font-family: 'Kanit';
    font-size: 1rem;
    color: #6B8096;

    width: 7.2rem;
    height: 6rem;
    left: 2%;
    top: 50%;

    transform: translate(0%, 220%);
}
.link:hover{
    color: #6B8096;
}
.ourcity{
    position: absolute;
    pointer-events: none;
    overflow: hidden;
    transition: all 0.3s ease-in-out;
    transition-delay: 0.5s;
    z-index: 1;
    opacity: 0;

    font-size: 2.3rem;
    font-family: 'KanitSemiBold';
    text-align: left;
    letter-spacing: 0.1rem;
    line-height: 3rem;
    color: #6B8096;

    top: 38%;
    left: 52%;

    transform: translate(0%, -90%);
}
.split{    
    position: absolute;
    pointer-events: none;
    transition: all 0.3s ease-in;
    transition-delay: 0.5s;
    z-index: 1;
    opacity: 0;

    text-align: left;
    font-size: 2.5rem;
    font-family: 'KanitSemiBold';
    letter-spacing: 0.1rem;
    color: #6B8096;

    top: 42%;
    left: 52%;

    transform: translate(0%, 0%);
}
.address{
    position: absolute;
    pointer-events: none;
    transition: all 0.5s ease-in-out;
    transition-delay: 0.2s;
    opacity: 0;
    word-wrap: break-word;

    text-align: left;
    line-height: 1.4rem;
    letter-spacing: 0.1rem;
    font-size: 0.9rem;
    font-family: 'Kanit';
    color: #6B8096;

    top: 30%;
    left: 50%;

    transform: translate(-50%, -40%);
}
.ouroffice{
    position: absolute;
    pointer-events: none;
    word-wrap: break-word;
    transition: all 0.5s ease-in-out;
    transition-delay: 0.2s;
    opacity: 0;

    text-align: left;
    line-height: 2.2rem;
    font-size: 2.3rem;
    font-family: 'KanitSemiBold';
    letter-spacing: 1px;
    color: #6B8096;

    width: 11.2rem;
    top: 13%;
    left: 50%;
    
    transform: translate(-50%, -50%);
}

/* Small devices (landscape phones, 576px and up) */
@media only screen and (orientation: landscape){
    .wrapper{
        transform: translate(-50%, -50%);
    }
    .soon{
        transform: translate(-180%, -130%);
    }
    .colortext-line{
        visibility: visible;

        font-size: 2.3rem;

        transform: translate(60%, -40%);
    }
    .colortext{
        display: none;
    }
    .link{
        font-size: 1.3rem;

        left: 50%;
        top: 50%;
        width: fit-content;

        transform: translate(-50%, 110%);
    }
    .ourcity{
        font-size: 2.5rem;

        width: 11rem;
        left: 50%;
        
        transform: translate(0%, -80%);
    }
    .split{
        font-size: 2.5rem;

        left: 50%;

        transform: translate(2%, 0%);
    }
    .ouroffice{
        font-size: 2.5rem;

        width: 7rem;

        transform: translate(-20%, 0%);
    }
    .address{
        transform: translate(-10%,80%);
    }
    .img-split{
        height: 150%;

        transform: translate(-20%, 10%);
    }
    .img-plant{
        height: 100%;

        left: 0%;

        transform: translate(0%, 3%);
    }
  }

/* Medium devices (tablets, 768px and up) */
@media only screen and (min-width: 768px) and (orientation: portrait){ 
    .box-split{    
        width: 12.6rem;
        height: 12.2rem;
        bottom: 4.3rem;
        right: 4.3rem;
    
        border-width: 1.3rem;
    }
    .box-plant{   
        width: 13rem;
        height: 13rem;
        top: 3.4rem;
        left: 3.9rem;
    
        border-width: 1.3rem;
    }
    .hoverbox-split{
        bottom: 4.3rem;
        right: 4.3rem;
    }
    .hoverbox-plant{
        top: 3.4rem;
        left: 3.9rem;
    }
    .wboxcorner{
        width: 13rem;
        height: 13rem;
        top: 2.7rem;
        left: 3.2rem;
    }
    .wrapper{   
        width: 16.9rem;
        height: 16.5rem;
        top: 50%;
        left: 50%;
    
        transform: translate(-53%, -97%);
    }
    .colortext{
        display: none;
    }
    .colortext-line{
        visibility: visible;

        text-align: left;
        line-height: 2.8rem;
        font-size: 2.5rem;

        background: -webkit-linear-gradient(0deg, #00DEC4 0%, #00B0EE 100%);
        -webkit-background-clip: text;

        width: 13rem;

        transform: translate(-30%, 350%);
    }
    .link{
        font-size: 1.7rem;
        text-align: center;
        text-decoration: underline;
        line-height: 3rem;

        left: 50%;
        top: 50%;
        width: 30rem;

        transform: translate(-50%, 270%);
    }
    .soon{
        visibility: hidden;

        text-align: center;
        font-size: 5.5rem;

        left: 50%;
        top: 50%;

        transform: translate(-73%, 15%);
    }
    .soon::after{
        visibility: visible;

        content: "SO.ON";
    }
    .ourcity{
        font-size: 4.2rem;
        line-height: 4.7rem;

        transform: translate(0%, -80%);
    }
    .split{
        font-size: 4.2rem;

        transform: translate(0%, 0%);
    }
    .ouroffice{
        font-size: 4.2rem;
        white-space: nowrap;
        letter-spacing: 0.2rem;
        line-height: 4.6rem;

        width: 19rem;
        top: 8%;
        left: 44%;
        transform: translate(-50%, 0%);
    }
    .address{
        font-size: 1.4rem;
        letter-spacing: 0.1rem;
        line-height: 2rem;

        top: 55%;
        left: 50%;

        transform: translate(-20%, 20%);
    }
    .img-plant{
        height: 80%;
        transform: translate(-70%, 3%);
    }
    .img-split{  
        height: 120%;

        transform: translate(-50%, 0%);
    }
 }

/* Large devices (desktops, 992px and up) */
@media only screen and (min-width: 992px) { 
    .box-split{    
        width: 10.4rem;
        height: 10rem;
        bottom: 3.5rem;
        right: 3.5rem;
    
        border-width: 1rem;
    }
    .box-plant{   
        width: 11rem;
        height: 11rem;
        top: 2.4rem;
        left: 2.9rem;
    
        border-width: 1rem;
    }
    .wboxcorner{
        width: 11rem;
        height: 11rem;
        top: 1.7rem;
        left: 2.2rem;
    }
    .wrapper{   
        width: 13.9rem;
        height: 13.5rem;
        top: 50%;
        left: 50%;

        transform: translate(-50%, -107%);
    }
    .hoverbox-split{
        bottom: 3.5rem;
        right: 3.5rem;
    }
    .hoverbox-plant{
        top: 2.4rem;
        left: 2.9rem;
    }
    .colortext{
        display: none;

        text-align: right;

        top: 37rem;
        left: 40%;
        width: 13rem;
    }
    .colortext-line{
        visibility: visible;
        background: -webkit-linear-gradient(0deg, #00DEC4 0%, #00B0EE 100%);
        -webkit-background-clip: text;

        line-height: 2.8rem;
        text-align: right;
        font-size: 2.5rem;

        width: 13rem;

        transform: translate(-48%, 250%);
    }
    .link{
        font-size: 1.7rem;
        text-align: center;
        text-decoration: underline;

        left: 50%;
        top: 50%;
        width: 30rem;

        transform: translate(-50%, 200%);
    }
    .soon{
        visibility: hidden;
        
        text-align: center;
        font-size: 4.8rem;

        left: 50%;
        top: 50%;

        transform: translate(-75%, -10%);
    }
    .soon::after{
        visibility: visible;

        content: "SO.ON";
    }
    .ourcity{
        font-size: 3.7rem;
        line-height: 4.8rem;

        width: 20rem;

        transform: translate(0%, -110%);
    }
    .split{
        font-size: 4rem;

        transform: translate(2%, -10%);
    }
    .ouroffice{
        font-size: 3.7rem;
        letter-spacing: 0.2rem;
        line-height: 4.6rem;

        width: 20rem;

        transform: translate(-18%, 250%);
    }
    .address{
        font-size: 1.4rem;
        letter-spacing: 0.1rem;
        line-height: 2rem;

        transform: translate(-20%, 170%);
    }
    .img-plant{
        height: 100%;
        transform: translate(-25%, 3%);
    }
    .img-split{  
        height: 130%;

        transform: translate(-30%, 0%);
    }
 }

/* X-Large devices (large desktops, 1200px and up) */
@media only screen and (min-width: 1200px) { 
    .box-split{    
        width: 10.4rem;
        height: 10rem;
        bottom: 3.5rem;
        right: 3.5rem;
    
        border-width: 1rem;
    }
    .box-plant{   
        width: 11rem;
        height: 11rem;
        top: 2.4rem;
        left: 2.9rem;
    
        border-width: 1rem;
    }
    .wboxcorner{
        width: 11rem;
        height: 11rem;
        top: 1.7rem;
        left: 2.2rem;
    }
    .wrapper{   
        width: 13.9rem;
        height: 13.5rem;
        top: 50%;
        left: 50%;

        transform: translate(-50%, -107%);
    }
    .hoverbox-split{
        bottom: 3.5rem;
        right: 3.5rem;
    }
    .hoverbox-plant{
        top: 2.4rem;
        left: 2.9rem;
    }
    .colortext{
        display: none;

        text-align: right;

        top: 37rem;
        left: 40%;
        width: 13rem;
    }
    .colortext-line{
        visibility: visible;
        background: -webkit-linear-gradient(0deg, #00DEC4 0%, #00B0EE 100%);
        -webkit-background-clip: text;

        line-height: 2.8rem;
        text-align: right;
        font-size: 2.5rem;

        width: 13rem;

        transform: translate(-48%, 250%);
    }
    .link{
        font-size: 1.7rem;
        text-align: center;
        text-decoration: underline;

        left: 50%;
        top: 50%;
        width: 30rem;

        transform: translate(-50%, 200%);
    }
    .soon{
        visibility: hidden;
        
        text-align: center;
        font-size: 4.8rem;

        left: 50%;
        top: 50%;

        transform: translate(-75%, -10%);
    }
    .soon::after{
        visibility: visible;

        content: "SO.ON";
    }
    .ourcity{
        font-size: 3.7rem;
        line-height: 4.8rem;

        transform: translate(17%, -110%);
    }
    .split{
        font-size: 3.7rem;

        transform: translate(45%, -10%);
    }
    .ouroffice{
        font-size: 4rem;
        letter-spacing: 0.2rem;
        line-height: 4.6rem;

        width: 21rem;

        transform: translate(-18%, 230%);
    }
    .address{
        font-size: 1.5rem;
        letter-spacing: 0.1rem;
        line-height: 2rem;

        transform: translate(-20%, 170%);
    }
    .img-plant{
        height: 100%;

        transform: translate(-25%, 3%);
    }
    .img-split{  
        height: 130%;

        transform: translate(0%, 0%);
    }
 }

/* XX-Large devices (larger desktops, 1400px and up) */
@media only screen and (min-width: 1400px) { 
    .box-split{    
        width: 10.4rem;
        height: 10rem;
        bottom: 3.5rem;
        right: 3.5rem;
    
        border-width: 1rem;
    }
    .box-plant{   
        width: 11rem;
        height: 11rem;
        top: 2.4rem;
        left: 2.9rem;
    
        border-width: 1rem;
    }
    .wboxcorner{
        width: 11rem;
        height: 11rem;
        top: 1.7rem;
        left: 2.2rem;
    }
    .wrapper{   
        width: 13.9rem;
        height: 13.5rem;
        top: 50%;
        left: 50%;

        transform: translate(-50%, -107%);
    }
    .hoverbox-split{
        bottom: 3.5rem;
        right: 3.5rem;
    }
    .hoverbox-plant{
        top: 2.4rem;
        left: 2.9rem;
    }
    .colortext{
        display: none;

        text-align: right;

        top: 37rem;
        left: 40%;
        width: 13rem;
    }
    .colortext-line{
        visibility: visible;
        background: -webkit-linear-gradient(0deg, #00DEC4 0%, #00B0EE 100%);
        -webkit-background-clip: text;

        line-height: 2.8rem;
        text-align: right;
        font-size: 2.5rem;

        width: 13rem;

        transform: translate(-48%, 250%);
    }
    .link{
        font-size: 1.7rem;
        text-align: center;
        text-decoration: underline;

        left: 50%;
        top: 50%;
        width: fit-content;

        transform: translate(-50%, 200%);
    }
    .soon{
        visibility: hidden;
        
        text-align: center;
        font-size: 4.8rem;

        left: 50%;
        top: 50%;

        transform: translate(-75%, -10%);
    }
    .soon::after{
        visibility: visible;

        content: "SO.ON";
    }
    .ourcity{
        font-size: 4.5rem;
        line-height: 4.8rem;

        transform: translate(15%, -110%);
    }
    .split{
        font-size: 4.8rem;

        transform: translate(30%, -10%);
    }
    .ouroffice{
        font-size: 4.8rem;
        white-space: nowrap;
        letter-spacing: 0.2rem;
        line-height: 4.6rem;

        width: 21rem;

        transform: translate(-22%, 240%);
    }
    .address{
        font-size: 1.7rem;
        letter-spacing: 0.1rem;
        line-height: 2rem;

        transform: translate(-22%, 180%);
    }
    .img-plant{
        height: 100%;
        transform: translate(-20%, 3%);
    }
    .img-split{  
        height: 130%;

        transform: translate(-10%, 3%);
    }
 }

/* Fonts */
@font-face {
    font-family: 'NSBP';
    src: url('./../fonts/Nimbus\ Sans\ Becker\ PBla\ Regular.ttf');
}
@font-face {
    font-family: 'Kanit';
    src: url('./../fonts/Kanit-Regular.ttf');
}
@font-face {
    font-family: 'KanitBold';
    src: url('./../fonts/Kanit-Bold.ttf');
}
@font-face {
    font-family: 'KanitSemiBold';
    src: url('./../fonts/Kanit-SemiBold.ttf');
}