/* --- HERO IMAGE --- */
#hero-img {
    position: relative;
    width: 100%;
    height: calc(100vh - 3.5rem);
    background-image: url(../assets/hero_images/pasieka/pasieka_hero_img_xs.jpg);
    -webkit-background-size: cover;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: left bottom;
}
@media screen and (min-width: 576px) {
    #hero-img {
        background-image: url(../assets/hero_images/pasieka/pasieka_hero_img_sm.jpg);
    }
}

@media screen and (min-width: 768px) {
    #hero-img {
        background-image: url(../assets/hero_images/pasieka/pasieka_hero_img_md.jpg);
    }
}

@media screen and (min-width: 992px) {
    #hero-img {
        background-image: url(../assets/hero_images/pasieka/pasieka_hero_img_lg.jpg);
    }
}

@media screen and (min-width: 1200px) {
    #hero-img {
        background-image: url(../assets/hero_images/pasieka/pasieka_hero_img_xl.jpg);
    }
}

/* --- LOGOTYPES LINK TILES */

.st0{fill:#232357;}
.st1{fill:none;stroke:#FFFFFF;stroke-width:4.71;stroke-miterlimit:10;}
.st2{fill:#FFFFFF;}
.st3{fill:none;stroke:#FFFFFF;stroke-width:3.14;stroke-miterlimit:10;}
.st4{opacity:0.5;fill:#FFFFFF;}
.st5{fill:#FFFFFF;stroke:#000000;stroke-width:0.392;stroke-miterlimit:10;}
.st6{opacity:0;clip-path:url(#SVGID_2_);}
.st7{fill:none;stroke:#F9C94C;stroke-width:3.8176;stroke-miterlimit:10;}
.st8{fill:#FFFFFF;stroke:#FFFFFF;stroke-width:3.8176;stroke-miterlimit:10;}
.st9{fill:none;stroke:#FFFFFF;stroke-width:3.8176;stroke-miterlimit:10;}
.st10{opacity:0;}
.st11{fill:#EEA31F;}
.st12{fill:none;stroke:#FFFFFF;stroke-miterlimit:10;}

.logo-tiles-link-container {
    z-index: 100;
}

.logo-tiles-link-container svg {
    height: 300px;
    width: auto;
}

.logo-tiles-link-container > svg  a > .hexagon {
    transition: all 0.2s ease-in;
}

.logo-tiles-link-container > svg  a #hexagons {
    transition: all 0.2s ease-in;
}

.logo-tiles-link-container > svg  a:hover > .hexagon {
    opacity: 1;
}

#tile-link-2ldh:hover > .hexagon {
    fill: #222;
}

#tile-link-22ldh:hover > .hexagon {
    fill: #084ca1;
}

#tile-link-lgzpp:hover > .hexagon {
    fill: #f5bf26;
}

#tile-link-lgzpp:hover #hexagons {
    opacity: 1;
}

#tile-link-lgzpp:hover > #lgzpp_logo > #head {
    stroke: #222;
    fill: #222;
}

#tile-link-lgzpp:hover > #lgzpp_logo > .head {
    fill: #222;
}

#tile-link-lgzpp:hover > #lgzpp_logo > .wing {
    fill: #fff;
    stroke: #e4e4ea;
}

#tile-link-lgzpp:hover > #lgzpp_logo > #abdomen .stripe-odd {
    fill: #222;
}

#tile-link-lgzpp:hover > #lgzpp_logo > #abdomen > .st10 {
    opacity: 1;
}

.logotypes-text-container > span {
    display: block;
}

.logotypes-text-container .scout-group-name {
    font-family: 'museo500';
    font-size: 2rem;
    color: #fff;
    line-height: 2.25rem;
    text-align: center;
}

.logotypes-text-container .team-name {
    font-family: 'museo300';
    font-size: 1.5rem;
    color: #fff;
    opacity: 0.8;
    height: 2.125rem;
    line-height: 1.75rem;
    text-align: center;
}

@media screen and (min-width: 450px) {
    .logo-tiles-link-container svg {
        height: 350px;
    }
}

@media screen and (min-width: 600px) {
    .logo-tiles-link-container svg {
        height: 400px;
    }

    .logotypes-text-container .scout-group-name {
        font-size: 2.5rem;
        line-height: 3rem;
    }

    .logotypes-text-container .team-name {
        font-size: 2rem;
        line-height: 3rem;
        height: 2.8125rem;
    }
}

@media screen and (min-width: 770px) {
    .logotypes-text-container .scout-group-name {
        text-align: left;
        padding-bottom: 0.5rem;
    }

    .logotypes-text-container .team-name {
        text-align: left;
        width: 450px;
        font-size: 2rem;
        line-height: 2rem;
    }
}

@media screen and (min-width: 960px) {
    .logo-tiles-link-container svg {
        height: 450px;
    }

    .logotypes-text-container .scout-group-name {
        font-size: 3rem;
        line-height: 3.5rem;
    }

    .logotypes-text-container .team-name {
        font-size: 2.25rem;
        line-height: 2.25rem;
        height: 3.5625rem;
        width: 550px;
    }
}

@media screen and (min-width: 1200px) {
    .logo-tiles-link-container svg {
        height: 500px;
    }

    .logotypes-text-container .scout-group-name {
        font-size: 3.5rem;
        line-height: 4rem;
    }

    .logotypes-text-container .team-name {
        font-size: 2.5rem;
        line-height: 2.5rem;
        height: 4.25rem;
        width: 640px;
    }
}