/* ==========================================================
   DEPRIOVATE
   Landing Page v2
========================================================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html,
body{

    width:100%;
    height:100%;

    overflow:hidden;

    background:#000000;

    font-family:Arial, Helvetica, sans-serif;

}

/* ==========================================================
   CONTAINER PRINCIPAL
========================================================== */

#container{

    position:relative;

    width:100vw;
    height:100vh;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    overflow:hidden;

}

/* ==========================================================
   LOGOMARCA
========================================================== */

#logo{

    width:60vw;

    max-width:1050px;

    min-width:340px;

    height:auto;

    display:block;

    z-index:100;

    user-select:none;

    pointer-events:none;

    opacity:0;

    transform:translateY(-10px);

    animation:logoFade 2.5s ease forwards;

    filter:

        drop-shadow(0 0 10px rgba(255,210,120,.20))
        drop-shadow(0 0 30px rgba(255,180,70,.08));

}

/* ==========================================================
   ÁREA DA ÁGUA
========================================================== */

#water{

    position:relative;

    width:60vw;

    max-width:1050px;

    min-width:340px;

    height:240px;

    margin-top:20px;

    overflow:hidden;

}

/* ==========================================================
   CANVAS
========================================================== */

#reflection,
#waves{

    position:absolute;

    left:0;
    top:0;

    width:100%;
    height:100%;

}

/* ==========================================================
   REFLEXO
========================================================== */

#reflection{

    z-index:10;

    opacity:.40;

}

/* ==========================================================
   ONDAS
========================================================== */

#waves{

    z-index:20;

}

/* ==========================================================
   ANIMAÇÃO DA LOGO
========================================================== */

@keyframes logoFade{

    from{

        opacity:0;

        transform:
        translateY(-10px);

    }

    to{

        opacity:1;

        transform:
        translateY(0);

    }

}

/* ==========================================================
   RESPONSIVO
========================================================== */

@media(max-width:1200px){

    #logo,
    #water{

        width:70vw;

    }

}

@media(max-width:900px){

    #logo,
    #water{

        width:82vw;

    }

    #water{

        height:190px;

    }

}

@media(max-width:600px){

    #logo,
    #water{

        width:92vw;

    }

    #water{

        height:150px;

    }

}

@media(max-height:650px){

    #water{

        height:150px;

    }

}