﻿/************ RESPONSIVE ************/
@media(max-width: 1665px)
{
    html
    {
        font-size: 15px;
    }
}
@media(max-width: 1565px)
{
    html
    {
        font-size: 14px;
    }
}
@media(max-width: 1460px)
{
    html
    {
        font-size: 13px;
    }
}
@media(max-width: 1350px)
{
    html
    {
        font-size: 12px;
    }
}
@media(max-width: 1250px)
{
    html
    {
        font-size: 11px;
    }
}
@media(max-width: 1150px)
{
    html
    {
        font-size: .9vw;
    }
    .menuContainer a
    {
        font-size: 1.2rem;
    }
    .menuContainer
    {
        max-width: 75rem;
    }
    .menu
    {
        height: 4rem;
    }
    .experienceContainer .box p
    {
        display: none;
    }
    .experienceContainer .box
    {
        align-items: center;
    }
    .experienceContainer .box h2
    {
        font-size: 1.8rem;
    }
    .experienceContainer .box h2 span
    {
        font-size: 2.2rem;
    }
    .cardsContainer .card p
    {
        font-size: 1.8rem;
    }
    .footerBottom .tcCont h1
    {
        font-size: 1.5rem;
    }
    .footerBottom .contactInfo .logo img
    {
        height: 4rem;
    }
    .footerBottom .contactIcons img
    {
        height: 3rem;
        width: 3rem;
    }
    .footerBottom .socialIcons img
    {
        height: 3rem;
        width: 3rem;
    }
    .footerBottom p
    {
        font-size: 1.3rem;
    }
    .footerBottom .contactInfo
    {
        margin-top: 1.5rem;
        gap: 1.5rem;
    }
    .tpl-partners img
    {
        max-width: 580px;
        width: 100%;
    }
}
@media(max-width: 700px)
{
    html
    {
        font-size: 2.5vw;
    }
    .tpl-inner
    {
        display: flex;
        justify-content: flex-start;
    }
    .mobileMenuIcon
    {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: .5rem;
        position: absolute;
        top: 20px;
        right: 20px;
        z-index: 30;
    }
    .mobileMenuIcon div
    {
        width: 3.5rem;
        height: .3rem;
        background-color: #fff;
        transition: all .5s;
    }
    .mobileMenuIcon.show div:nth-child(1)
    {
        transform: rotate(45deg) translate(.6rem,.5rem);
    }
    .mobileMenuIcon.show div:nth-child(2)
    {
        opacity: 0;
    }
    .mobileMenuIcon.show div:nth-child(3)
    {
        transform: rotate(-45deg) translate(.5rem,-.6rem);
    }/* .tpl-header{
        display: flex;
    } */
    .logoBar
    {
        display: flex;
        justify-content: space-between;
        height: 8rem;
        padding: 4rem 2rem;
        padding-bottom: 1rem;
    }
    .menu
    {/* height: calc(100vh - 8rem); */
        height: 100%;
        align-items: flex-start;
        padding-top: 5rem;
        width: 50vw;
        position: fixed;
        right: -100%;
        top: 8rem;
        z-index: 100;
        transition: all .5s;
    }
    .menu.show
    {
        right: 0;
        top: revert-layer;
    }
    .menuContainer
    {
        max-width: 100%;
        flex-direction: column;
        gap: 4rem;
    }
    .slider-container
    {
        width: 100%;
    }
    .slide:nth-child(1)
    {
        background-image: url(../../bcgamebettingde/image/slider1-mobile.png);
    }
    .slide:nth-child(2)
    {
        background-image: url(../../bcgamebettingde/image/slider2-mobile.png);
    }
    .slide:nth-child(3)
    {
        background-image: url(../../bcgamebettingde/image/slider3-mobile.png);
    }
    .slide:nth-child(4)
    {
        background-image: url(../../bcgamebettingde/image/slider4-mobile.png);
    }
    .slide:nth-child(1) .textContainer
    {
        left: auto;
        bottom: 2.5rem;
    }
    .slide:nth-child(2) h3, .slide:nth-child(3) .stroke-text, .slide:nth-child(4) .stroke-text
    {
        display: none;
    }
    .slide:nth-child(2) .textContainer
    {
        right: auto;
        bottom: 2.5rem;
    }
    .slide:nth-child(3) .textContainer
    {
        left: auto;
        bottom: 2.5rem;
    }
    .slide:nth-child(1) h2, .slide:nth-child(3) h3, .slide:nth-child(3) h3 b, .slide:nth-child(4) h3
    {
        font-size: 1.8rem;
        margin-bottom: 0;
    }
    .slide:nth-child(2) h2
    {
        margin-bottom: 0;
    }
    .slide:nth-child(1) h2 span, .slide:nth-child(3) h3 span, .slide:nth-child(4) h3 span
    {
        font-size: 2.2rem;
    }
    .slide:nth-child(4) .textContainer
    {
        right: auto;
        bottom: 2.5rem;
    }
    .arrow
    {
        display: none;
    }
    .cardsSection
    {
        padding: 4rem 0;
    }
    .cardsContainer
    {
        flex-direction: column;
    }
    .experienceContainer
    {
        flex-direction: column;
    }
    .experienceSection h1
    {
        font-size: 2.5rem;
        line-height: 1;
        text-align: center;
    }
    .experienceSection h1 b
    {
        display: block;
    }
    .experienceSection
    {
        padding: 3rem 0;
    }
    .experienceContainer .box:not(:last-of-type)
    {
        border-right: none;
    }
    .experienceContainer .box
    {
        padding-right: 0;
    }
    .experienceContainer .box h2 span
    {
        font-size: 3rem;
    }
    .experienceContainer .box h2
    {
        font-size: 2rem;
    }
    footer .footerTop .team-logos
    {
        display: none;
    }
    footer .footerTop .team-logos-mobile
    {
        display: block;
        width: 75vw;
    }
    .footerBottom .tcCont h1
    {
        font-size: .8rem;
    }
    .footerBottom .contactInfo .logo img
    {
        height: 3rem;
    }
    .footerBottom .contactIcons img, .footerBottom .socialIcons img
    {
        height: 2.5rem;
        width: 2.5rem;
    }
    .footerBottom h2
    {
        font-size: 1.8rem;
    }
}
@media(max-width: 480px)
{
    img.tpl-desktop-sponsor
    {
        display: none;
    }
    img.tpl-mobile-sponsor
    {
        display: inline-block;
        max-width: 300px;
        width: 100%;
        margin-bottom: 20px;
    }
}