/* Globals */

html,
    body {
        margin: 0;
        padding: 0;
        border: 0;
        font-size: 100%;
        font: inherit;
        vertical-align: baseline;
        height: 100%;
        font-family: 'Roboto', sans-serif;

    }

    .clearfix::before,
    .clearfix::after {
        content: ' ';
        display: table;
    }

    .clearfix::after {
        clear: both
    }

    #page-wrapper {
        background-image: url('/assets/images/bg-home.png');
        background-position: center center;
        background-size: cover;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        height: 100%;
    }

    .content {
        position: relative;
        margin-bottom: 2rem;
        padding-left: 30px;
        padding-right: 30px;
    }

    .scene {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-direction: column;
        min-height: calc(200px + (350 - 200) * ((100vw - 320px) / (2600 - 320)));
        position: relative;
    }

    h1 {
        color: #414660;
        font-weight: 400;
        animation: show 2s;
        opacity: 1;
        margin: 0;
        font-size: calc(17px + (32 - 17) * ((100vw - 320px) / (2600 - 320)));
        text-align: center;
    }

    h1 span {
        font-weight: 500;
        font-style: italic;
        text-transform: up
    }


    .company-logo {
        background-image: url('../images/requestia-logo.png');
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        display: table;
        max-width: 100%;
        width: 100%;
        width: calc(230px + (530 - 230) * ((100vw - 320px) / (2600 - 320)));
        height: 15vh;
        margin: auto;
        animation: show 3s;
      
    }

    h1.text-2 {
        animation: show 1s ease-in-out 1 forwards;
        animation-delay: 4s;
        opacity: 0;
    }

    .button {
        animation: show 1s ease-in-out 1 forwards;
        animation-delay: 5s;
        opacity: 0;
        visibility: hidden;
        border: none;
        font-size: calc(15px + 7*(100vw - 768px)/1232);
        line-height: 18px;
        color: #fff;
        background-color: #ef8354;
        border-radius: 50px;
        outline: none;
        padding: calc(8px + 16*(100vw - 320px)/1680);
        display: inline-block;
        -webkit-transition: all .4s ease;
        -moz-transition: all .4s ease;
        -o-transition: all .4s ease;
        -ms-transition: all .4s ease;
        transition: all .4s ease;
        text-decoration: none;
    }

    .button:hover {
        background-color: #000b5a;
    }

    .area-loading {
        margin-top: 3rem;
        animation: show 1s ease-in-out 1 forwards;
        animation-delay: 6s;
        opacity: 0;
        text-align: center;
    }

    .area-loading h3 {
        color: #414660;
        font-size: calc(17px + (18.72 - 17) * ((100vw - 320px) / (2600 - 320)));
    }

/* Keyframes */

    @keyframes teste {
        0% {
            opacity: 0;
        }

        100% {
            opacity: 1;
        }
    }

    @keyframes show {
        0% {
            opacity: 0;
            transform: translateY(30px);

        }

        100% {
            transform: translateY(0);
            opacity: 1;
            visibility: visible;

        }
    }

    @keyframes fadeOut {
        0% {
            transform: rotate3d(0, 5, 0, 0deg);
        }

        100% {
            transform: rotate3d(0, 5, 0, 720deg);
            opacity: 0;
        }
    }

    @keyframes fadeIn {
        0% {
            transform: rotate3d0(0, 5, 0, 0deg);
            opacity: 0;
        }

        100% {
            transform: rotate3d(0, 5, 0, 720deg);
        }
    }

    @media (max-width: 768px) {
        #page-wrapper {
            background-repeat: no-repeat;
            background-size: contain;
            background-position: 0 60%
        }
    }