/* Custom Overrides */
.blog {
    background-image: url('../resources/CustaQuanto/gradient.png');
    background-size: cover;
    background-position-x: center;
    background-position-y: top;
    background-size: contain;
    background-repeat-y: no-repeat;
}

main {
    background-color: white;
}

.blog_body_image {
    padding-top: unset;
}

.header {
    font-family: 'Pompiere';
    color: white;
    position: absolute;
    top: 400px;
    height: unset;
    max-width: 1230px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.header_title {
    font-size: calc(20px + 0.5vw);
    text-align: justify;
}

.header_title_note {
    font-size: calc(18px + 0.5vw);
    color: #ffffff80;
}

/* Animation Grid */
.animationGrid {
    width: 100%;
    max-width: 1230px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.animationGrid .cell {
    width: 69%;
    height: 400px;
    min-height: 20em;
    line-height: 1.2;
    display: inline-block;
    overflow: hidden;
    position: relative;
}

.animationGrid .cell:before {
    /* content: ''; */
    display: block;
    width: 100%;
    height: 100%;
    z-index: 0;
    position: absolute;
}

.animationGrid .center_animation {
    width: 100%;
    margin-left: 50%;
    transform: translate(-50%);
}

.animationGrid .side_animation {
    width: 49%;
}

.webm {
    height: 100%;
} 

.gif {
    height: 100%;
}

/* Breakpoint for the body max width */
@media (max-width: 1230px) {

    .header {
        --ratio: 3.09;
        top:calc(var(--windowWidth) / var(--ratio));
        width: 80%;
        transform: translate(-50%);
        margin-left: 50%;
    }

    .animationGrid .center_animation {
        height: 0px;
    }

    .animationGrid .side_animation {
        width: 100%;
        height: 0px;
        margin-left: 50%;
        transform: translate(-50%);
    }

    .gif {
        width: 100%;
        height: unset;
    }

    .webm {
        width: 80%;
    } 
}

/* LG */
@media (max-width: 1170px) {}

/* MD */
@media (max-width: 992px) {}

/* SM */
@media (max-width: 768px) {}

/* XS */
@media (max-width: 544px) {}

/* iPhone Plus */
@media (max-width: 414px) {}

/* iPhone X */
@media (max-width: 375px) {}

/* iPhone SE */
@media (max-width: 320px) {}