/*
Theme Name: Liriche 2023
Description: Child theme for Brooklyn WordPress theme
Author: Squidart
Author URI: http://squidart.co.za
Template: brooklyn
Version: 0.0.1

License URI: http://opensource.org/licenses/mit-license.php
*/

/********** IMPORT RESPONSIVE BEHAVIOURS **********/
@import "assets/theme-spacing.css?v=1.4.0";

/* Disable No Scroll */
/* .body-no-scroll {
    overflow: hidden;
} */


body.home .ut-custom-hero .grid-container {
    max-width: 100%;
}

body.home .ut-custom-hero .vc_section.vc_section-has-fill {
    padding-top: 35px;
    background-color: #060f27;
    background-image: url(images/hero-homer-bg.webp?v=1);
    background-size: cover;
    background-position: left center;
    padding-left: 0px !important;
    padding-right: 0px !important;
}
body.home .ut-custom-hero .vc_section.vc_section-has-fill::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url(images/hero-homer-graphic.svg?v=2);
    background-size: cover;
    background-position: left center;
    background-repeat: no-repeat;
}



body.home .ut-custom-hero .hero-top-row {
    max-width: 43%;
    width: 43% !important;
    left: 35vw !important;
    margin-top: 32.5vh;
}
    body.home .ut-custom-hero .hero-top-row h2 {
        font-size: 50px;
        line-height: 1em;
    }

body.home .ut-custom-hero .hero-bottom-row {
    max-width: calc( 50% - 20px );
    width: calc( 50% - 40px ) !important;
    left: calc( 40vw + 20px ) !important;
    margin-top: 40vh;
    margin-bottom: 20vh;
}

@media (min-width: 1921px){
    body.home .ut-custom-hero .vc_section.vc_section-has-fill::before {
        background-image: url(images/hero-homer-graphic-huge.svg?v=2);
    }
}

@media (max-width: 1920px){
    
    body.home .ut-custom-hero .hero-top-row {
        margin-top: 30vh;
        left: 40vw !important;
    }
    
    body.home .ut-custom-hero .hero-bottom-row {
        margin-top: 45vh;
        margin-bottom: 30vh;
        left: calc( 50vw + 20px ) !important;
    }
    
}

@media (max-width: 1681px){

    body.home .ut-custom-hero .hero-top-row {
        margin-top: 25vh;
    }
    
    body.home .ut-custom-hero .hero-bottom-row {
        margin-top: 35vh;
        margin-bottom: 15vh;
    }
}

@media (max-width: 1440px){
    
    body.home .ut-custom-hero .hero-top-row {
        margin-top: 32vh;
        left: 35vw !important;
        max-width: 52%;
        width: 52% !important;
    }
    
    body.home .ut-custom-hero .hero-bottom-row {
        margin-top: 27vh;
        margin-bottom: 10vh;
        left: calc( 45vw + 20px ) !important;
        max-width: calc( 55% - 20px );
        width: calc( 55% - 40px ) !important;
    }
    
}

@media (max-width: 1200px){
    
    body.home .ut-custom-hero .hero-top-row {
        margin-top: 24vh;
        max-width: 57%;
        width: 57% !important;
    }
    
}

@media (min-width: 768px) and (max-width: 1161px){

    body.home .ut-custom-hero .vc_section, 
    body.home .ut-custom-hero .vc_section.vc_section-has-fill {
        padding-top: 80px;
        padding-bottom: 0px;
    }

    body.home .ut-custom-hero .vc_section.vc_section-has-fill::before {
        background-size: contain;
    }

}

@media (max-width: 1024px){

    .hero-top-row {
        margin-top: 15vh;
    }
    .hero-bottom-row {
        margin-top: 36vh !important;
    }

}

@media (max-width: 768px){

    body.home .ut-custom-hero .vc_section.vc_section-has-fill {
        padding-top: 102.8215vw;
        background-image: url(images/hero-homer-bg-mobile.webp?v=2);
        background-position: top center;
    }

    body.home .ut-custom-hero .vc_section.vc_section-has-fill::before {
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: url(images/hero-homer-graphic-mobile.svg?v=4);
        background-size: contain;
        background-position: top left;
    }

    body.home .ut-custom-hero .hero-top-row {
        max-width: calc( 100% - 20px );
        width: calc( 100% - 20px ) !important;
        left: 0vw !important;
        margin-top: 60px;
    }
    
    body.home .ut-custom-hero .hero-bottom-row {
        /* max-width: calc( 100% - 20px ); */
        max-width: 100%;
        /* width: calc( 100% - 20px ) !important; */
        width: 100% !important;
        left: 0 !important;
        margin-top: -10px !important;
        margin-bottom: 40px;
    }

    body.home .ut-custom-hero .hero-bottom-row::before {
        content: "";
        display: block;
        /* position: absolute;
        top: 0;
        left: 0; */
        width: calc( 100% - 20px );
        height: 0;
        margin-left: 20px;
        margin-bottom: 40px;
        padding-bottom: 91%;
        background-image:url(images/hero-homer-graphic-connect-mobile.svg?v=4);
        background-size: contain;
        background-position: top left;
        background-repeat: no-repeat;
    }
    
}