@charset "UTF-8";
header{
    height:100vh;
    min-height:600px;
    position:relative;
    overflow:hidden;

    & .solar{
        height:inherit;
        min-height:inherit;

        & h1{
            margin-bottom:2rem;
            font-size:calc(2rem + 6vw);
            text-transform:capitalize;
            color:#fff;
            line-height:calc(2.5rem + 4vw);
            animation-delay:calc(2s + 4s * 0.2);
            position:relative;
            z-index:1;
        }

        & h6{
            font-size:calc(1rem + 1vw);
            font-weight:400;
            color:#fff;
            animation-delay:calc(2s + 4s * 0.5);
        }
    }

    & figure{
        position:absolute;
        top:-1rem;
        left:calc(50% - 115px);

        & img{
            height:60vh;
        }
    }

    & a{
        display:block;
        position:absolute;
        bottom:1.5rem;
        left:50%;
        transform:translateX(-50%);
        z-index:3;
        font-size:2.5rem;
        color:#fff;
        text-decoration:none;
        transition:all 0.3s ease-in-out;
    }
}

#videoBackground{
    width:100vw;
    height:100vh;
    position:fixed;
    top:0;
    left:0;
    z-index:-2;
    overflow:hidden;

    & video,
    & figure{
        position:absolute;
        top:50%;
        right:50%;
        transform:translate(50%, -50%);
        pointer-events:none;
    }

    & video{
        z-index:1;
    }

    & figure{
        z-index:0;
    }
}

#homeSinopsis{
    background-image:url(../img/background-blood-02.png);
    background-size:400px;
    background-repeat:no-repeat;
    background-position-y:-50px;
    background-position-x:calc(100% + 50px);

    & .background{
        margin-top:3rem;
        height:500px;

        & .button-circle{
            position:absolute;
            top:calc(50% - 50px);
            left:calc(50% - 50px);
            z-index:2;
        }
    }
}

#homeHistory{
    background-image:url(../img/background-blood-01.png);
    background-size:500px;
    background-repeat:no-repeat;
    background-position-y:140%;
    background-position-x:-10%;

    & .background{
        height:100%;
        max-height:800px;
    }
}

#homeStats{
    min-height:600px;
    display:flex;
    align-items:center;

    & .box{
        width:100%;
        max-width:100%;
        height:200px;
        position:relative;

        & figure,
        & .content{
            width:inherit;
            height:inherit;
            position:absolute;
            top:0;
            left:0;
        }

        & figure{
            z-index:0;
            display:flex;
            align-items:center;
            justify-content:center;

            & img{
                width:220px;
                height:auto;
                object-fit:contain;
                object-position:center;
                filter:invert();
                opacity:.08;
            }
        }

        & .content{
            display:flex;
            flex-flow:column nowrap;
            align-items:center;
            justify-content:center;
            text-align:center;
            z-index:1;

            & h3{
                margin-bottom:0;
                font-size:calc(2.5rem + 1.5vw);
                color:#fff;

                & span:not(.counter){
                    color:var(--secondary-color);
                }
            }

            & h6{
                margin-bottom:0;
                font-family:var(--zeta-title-font);
                font-weight:550;
                font-size:1.75rem;
                color:#fff;
                text-transform:capitalize;
            }
        }
    }
}

#homeAbout{
    background-image:url(../img/background-blood-03.png);
    background-size:400px;
    background-repeat:no-repeat;
    background-position-y:-50px;
    background-position-x:calc(100% + 50px);
    position:relative;

    & figure{
        transition:0.5s ease;
    }

    & .row{
        & .col:first-child{
            & .row{
                & .col{
                    &:first-child{
                        & figure{
                            height:calc(600px + 6vw);
                        }
                    }

                    &:last-child{
                        & figure{
                            margin-top:5rem;
                            height:calc(600px + 6vw);
                        }
                    }
                }
            }
        }
    }
}

#homeChars{
    background-image:url(../img/background-blood-04.png);
    background-size:400px;
    background-repeat:no-repeat;
    background-position-y:105%;
    background-position-x:-5%;

    & .background{
        min-height:380px;

        & .solar{
            padding:35px;
            position:absolute;
            top:0;
            left:0;
            z-index:1;

            & h3{
                margin-bottom:0;
                font-size:calc(2rem + .5vw);
            }

            & h6{
                font-size:calc(1rem + .5vw);
                font-weight:500;
                color:var(--secondary-color);
            }
        }
    }
}

#homeAlpha{
    min-height:600px;

    & h3{
        animation-delay:calc(2s + 4s * 0.2);
    }
}

#homeGallery{
    background-image:url(../img/background-blood-02.png);
    background-size:400px;
    background-repeat:no-repeat;
    background-position-y:-50px;
    background-position-x:calc(100% + 50px);
}

#homeBeta{
    min-height:600px;
    display:flex;
    align-items:center;

    & h2{
        margin-bottom:0;
        font-size:calc(2rem + 6vw);
        text-transform:capitalize;
        color:#fff;
        line-height:calc(2.5rem + 4vw);
        animation-delay:calc(2s + 4s * 0.2);
    }
}

@media(max-width:1199px){
    #homeAbout{
        & .row{
            & .col:first-child{
                & .row{
                    & .col{
                        &:first-child{
                            & figure{
                                height:400px;
                            }
                        }

                        &:last-child{
                            & figure{
                                margin-top:0;
                                height:400px;
                            }
                        }
                    }
                }
            }
        }
    }
}

@media(max-width:767px){
    #homeAbout{
        & p:last-child{
            margin-bottom:2rem;
        }

        & .row{
            & .col:first-child{
                & .row{
                    & .col{
                        &:first-child{
                            & figure{
                                height:600px;
                            }
                        }

                        &:last-child{
                            & figure{
                                margin-top:5rem;
                                height:600px;
                            }
                        }
                    }
                }
            }
        }
    }
}

@media(max-width:575px){
    header{
        text-align:center;
        
        & .text-align{
            &.right{
                text-align:center;
            }
        }
    }

    #homeAbout{
        & .row{
            & .col:first-child{
                & .row{
                    & .col{
                        &:first-child{
                            & figure{
                                height:300px;
                            }
                        }

                        &:last-child{
                            & figure{
                                margin-top:0;
                                height:300px;
                            }
                        }
                    }
                }
            }
        }
    }

    #homeAlpha{
        & .text-align{
            &.right{
                text-align:center;
            }
        }
    }

    #homeBeta{
        text-align:center;
        
        & .text-align{
            &.right{
                text-align:center;
            }
        }
    }
}