@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@900&display=swap');

body {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
    font-family: 'Montserrat', sans-serif;
}

main {
    flex: 1 0 auto;
}

.background {
    filter: blur(0.1rem);
}

.parallax-container {
    height: 84vh;
    
}

.box {
    margin-left: 20vh;
    width: 450px;
    height: 350px;
    position: relative;
    display: flex;
    justify-content: center;
    flex-direction: column;
}

.box .title {
    width: 100%;
    position: relative;
    display: flex;
    align-items: center;
    height: 80px;
}

.box .title .block {
    width: 0%;
    height: inherit;
    background: #099544;
    position: absolute;
    animation: mainBlock 2s cubic-bezier(0.74, 0.06, 0.4, 0.92) forwards;
    display: flex;
}

.box .title h1 {
    font-family: 'Montserrat';
    color: #1f5706;
    font-size: 32px;
    -webkit-animation: mainFadeIn 2s forwards;
    -o-animation: mainFadeIn 2s forwards;
    animation: mainFadeIn 2s forwards;
    animation-delay: 1.6s;
    opacity: 0;
    display: flex;
    align-items: baseline;
    position: relative;
}

.box .title h1 span {
    width: 0px;
    height: 0px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    background: #099544;
    -webkit-animation: load 0.6s cubic-bezier(0.74, 0.06, 0.4, 0.92) forwards;
    animation: popIn 0.8s cubic-bezier(0.74, 0.06, 0.4, 0.92) forwards;
    animation-delay: 2s;
    margin-left: 5px;
    margin-top: -10px;
    position: absolute;
    bottom: 13px;
    right: -8px;
}

.box .role {
    width: 100%;
    position: relative;
    display: flex;
    align-items: center;
    height: 30px;
    margin-top: -10px;
}

.box .role .block {
    width: 0%;
    height: inherit;
    background: #93c47d;
    position: absolute;
    animation: secBlock 2s cubic-bezier(0.74, 0.06, 0.4, 0.92) forwards;
    animation-delay: 2s;
    display: flex;
}

.box .role p {
    animation: secFadeIn 2s forwards;
    animation-delay: 3.2s;
    opacity: 0;
    font-weight: 400;
    font-family: 'Montserrat';
    color: #1f5706;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 5px;
}

.box .role strong {
    animation: secFadeIn 2s forwards;
    animation-delay: 3.2s;
    opacity: 0;
    font-weight: 900;
    font-family: 'Montserrat';
    color: #045185;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 5px;
}

.fixed-action-btn {
    position: fixed;
    right: 180vh;
    bottom: 65vh;
    /* padding-top: 15px; */
    margin-bottom: 0;
    z-index: 997;
}

@keyframes mainBlock {
    0% {
        width: 0%;
        left: 0;
    }

    50% {
        width: 100%;
        left: 0;
    }

    100% {
        width: 0;
        left: 100%;
    }
}

@keyframes secBlock {
    0% {
        width: 0%;
        left: 0;
    }

    50% {
        width: 100%;
        left: 0;
    }

    100% {
        width: 0;
        left: 100%;
    }
}

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

    100% {
        opacity: 1;
    }
}

@keyframes popIn {
    0% {
        width: 0px;
        height: 0px;
        background: #099544;
        border: 0px solid #ddd;
        opacity: 0;
    }

    50% {
        width: 10px;
        height: 10px;
        background: #099544;
        opacity: 1;
        bottom: 45px;
    }

    65% {
        width: 7px;
        height: 7px;
        bottom: 0px;
        width: 15px;
    }

    80% {
        width: 10px;
        height: 10px;
        bottom: 20px;
    }

    100% {
        width: 7px;
        height: 7px;
        background: #099544;
        border: 0px solid #222;
        bottom: 6px;
    }
}

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

    100% {
        opacity: 0.5;
    }
}

@media screen and (max-width: 767px){
    .background {
        filter: blur(0.5rem) opacity(60%);
    }

    .fixed-action-btn {
        position: absolute !important;
        right: 5vh;
        bottom: 58vh;
        margin-bottom: 0;
        z-index: 997;
    }

    .box {
        margin-left: 0vh;
        width: 340px;
        height: 350px;
        position: relative;
        display: flex;
        justify-content: center;
        flex-direction: column;
    }
    
    .box .title {
        width: 100%;
        position: relative;
        display: flex;
        align-items: center;
        height: 80px;
    }
    
    .box .title .block {
        width: 0%;
        height: inherit;
        background: #099544;
        position: absolute;
        animation: mainBlock 2s cubic-bezier(0.74, 0.06, 0.4, 0.92) forwards;
        display: flex;
    }
    
    .box .title h1 {
        font-family: 'Montserrat';
        color: #1f5706;
        font-size: 25px;
        -webkit-animation: mainFadeIn 2s forwards;
        -o-animation: mainFadeIn 2s forwards;
        animation: mainFadeIn 2s forwards;
        animation-delay: 1.6s;
        opacity: 0;
        display: flex;
        align-items: baseline;
        position: relative;
    }
    
    .box .title h1 span {
        width: 0px;
        height: 0px;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        border-radius: 50%;
        background: #099544;
        -webkit-animation: load 0.6s cubic-bezier(0.74, 0.06, 0.4, 0.92) forwards;
        animation: popIn 0.8s cubic-bezier(0.74, 0.06, 0.4, 0.92) forwards;
        animation-delay: 2s;
        margin-left: 5px;
        margin-top: -10px;
        position: absolute;
        bottom: 13px;
        right: -8px;
    }
    
    .box .role {
        width: 100%;
        position: relative;
        display: flex;
        align-items: center;
        height: 30px;
        margin-top: -10px;
    }
    
    .box .role .block {
        width: 0%;
        height: inherit;
        background: #93c47d;
        position: absolute;
        animation: secBlock 2s cubic-bezier(0.74, 0.06, 0.4, 0.92) forwards;
        animation-delay: 2s;
        display: flex;
    }
    
    .box .role p {
        animation: secFadeIn 2s forwards;
        animation-delay: 3.2s;
        opacity: 0;
        font-weight: 400;
        font-family: 'Montserrat';
        color: #1f5706;
        font-size: 12px;
        text-transform: uppercase;
        letter-spacing: 5px;
    }
    
    @keyframes mainBlock {
        0% {
            width: 0%;
            left: 0;
        }
    
        50% {
            width: 100%;
            left: 0;
        }
    
        100% {
            width: 0;
            left: 100%;
        }
    }
    
    @keyframes secBlock {
        0% {
            width: 0%;
            left: 0;
        }
    
        50% {
            width: 100%;
            left: 0;
        }
    
        100% {
            width: 0;
            left: 100%;
        }
    }
    
    @keyframes mainFadeIn {
        0% {
            opacity: 0;
        }
    
        100% {
            opacity: 1;
        }
    }
    
    @keyframes popIn {
        0% {
            width: 0px;
            height: 0px;
            background: #099544;
            border: 0px solid #ddd;
            opacity: 0;
        }
    
        50% {
            width: 10px;
            height: 10px;
            background: #099544;
            opacity: 1;
            bottom: 45px;
        }
    
        65% {
            width: 7px;
            height: 7px;
            bottom: 0px;
            width: 15px;
        }
    
        80% {
            width: 10px;
            height: 10px;
            bottom: 20px;
        }
    
        100% {
            width: 7px;
            height: 7px;
            background: #099544;
            border: 0px solid #222;
            bottom: 6px;
        }
    }
    
    @keyframes secFadeIn {
        0% {
            opacity: 0;
        }
    
        100% {
            opacity: 0.5;
        }
    }
    
}