/**
 * 2015-2020 Bonpresta
 *
 * Bonpresta Responsive banners
 *
 * NOTICE OF LICENSE
 *
 * This source file is subject to the General Public License (GPL 2.0)
 * that is bundled with this package in the file LICENSE.txt.
 * It is also available through the world-wide-web at this URL:
 * http://opensource.org/licenses/GPL-2.0
 *
 * DISCLAIMER
 *
 * Do not edit or add to this file if you wish to upgrade the module to newer
 * versions in the future.
 *
 *  @author    Bonpresta
 *  @copyright 2015-2020 Bonpresta
 *  @license   http://opensource.org/licenses/GPL-2.0 General Public License (GPL 2.0)
 */
#bonbanners {
    overflow: hidden;
}
#bonbanners .banner-inner {
    background: #5B5B5B;
}
#bonbanners .banner-inner_footer-soc a:hover svg path {
    fill: #3872C3;
}
#bonbanners svg path {
    transition: all .3s ease;
}
#bonbanners .bonbanners-item {
    position: relative;
    overflow: hidden;
}
#bonbanners .img-responsive {
    width: 101%;
    height: auto;
    transition: filter 0.3s ease, transform 2s ease;
    max-width: 101%;
}
#bonbanners video {
    width: auto;
    max-width: 100%;
    transition: all 0.3s ease;
    height: 101%;
    object-fit: cover;
}
#bonbanners .h1 {
    color: #fff;
    font-weight: 800;
    line-height: 130%;
    margin: 0;
    text-transform: uppercase;
}
#bonbanners p:not(.h1) {
    color: #fff;
    line-height: 150%;
    font-weight: 400;
}
#bonbanners .banner-inner_footer {
    display: flex;
    align-items: center;
}
#bonbanners .banner-image {
    max-width: 100%;
}
@media screen and (min-width: 1881px){
    #bonbanners .h1 {
        font-size: 70px;
        margin-bottom: 34px;
    }
    #bonbanners p:not(.h1) {
        font-size: 14px;
        margin-bottom: 25px;
    }
    #bonbanners .bonbanners-item {
        padding: 100px 80px;
    }
    #bonbanners .banner-inner {
        padding: 70px 80px;
        max-width: 568px;
    }
    #bonbanners .banner-inner_footer {
        margin-top: 53px;
    }
    #bonbanners .banner-inner_footer .banner-inner_footer-soc a {
        margin-left: 42px;
    }
    #bonbanners .bonbanners-list.container {
        padding: 0 30px;
    }
}

@media screen and (min-width: 577px) and (max-width: 1880px) {
    #bonbanners .h1 {
        font-size: calc(35px + (70 - 35) * ((100vw - 577px) / (1880 - 577)));
        margin-bottom: calc(20px + (34 - 20) * ((100vw - 577px) / (1880 - 577)));
    }
    #bonbanners p:not(.h1) {
        font-size: calc(12px + (14 - 12) * ((100vw - 577px) / (1880 - 577)));
        margin-bottom: calc(20px + (25 - 20) * ((100vw - 577px) / (1880 - 577)));
    }
    #bonbanners .bonbanners-item {
        padding: 100px calc(60px + (80 - 60) * ((100vw - 577px) / (1880 - 577)));
    }
    #bonbanners .banner-inner {
        padding: calc(25px + (70 - 25) * ((100vw - 577px) / (1880 - 577))) calc(25px + (80 - 25) * ((100vw - 577px) / (1880 - 577)));
        max-width: calc(450px + (568 - 450) * ((100vw - 577px) / (1880 - 577)));
    }
    #bonbanners .banner-inner_footer {
        margin-top: calc(25px + (53 - 25) * ((100vw - 577px) / (1880 - 577)));
    }
    #bonbanners .banner-inner_footer .banner-inner_footer-soc a {
        margin-left: calc(25px + (42 - 25) * ((100vw - 577px) / (1880 - 577)));
    }
    #bonbanners .bonbanners-list.container {
        padding: 0 calc(23px + (30 - 23) * ((100vw - 577px) / (1880 - 577)));
    }
}

@media screen and (min-width: 577px) {
    #bonbanners .banner-image {
        display: none
    }
    #bonbanners .bonbanners-item {
        display: flex;
        justify-content: end;
        background-repeat: no-repeat;
        background-size: cover;
        background-color: #3a3a3a;
    }
}
@media screen and (max-width: 576px) {
    #bonbanners .bonbanners-item {
        background-image: none !important;
        padding: 0 10px;
    }
    #bonbanners .h1 {
        font-size: calc(25px + (40 - 25) * ((100vw - 320px) / (576 - 320)));
        margin: calc(15px + (25 - 15) * ((100vw - 320px) / (576 - 320))) 0;
    }
    #bonbanners p:not(.h1) {
        font-size: calc(12px + (14 - 12) * ((100vw - 320px) / (576 - 320)));
        margin-bottom: calc(15px + (25 - 15) * ((100vw - 320px) / (576 - 320)));
    }
    #bonbanners .banner-inner_footer {
        margin-top: calc(20px + (53 - 20) * ((100vw - 320px) / (576 - 320)));
    }
    #bonbanners .banner-inner_footer .banner-inner_footer-soc a {
        margin-left: calc(20px + (42 - 20) * ((100vw - 320px) / (576 - 320)));
    }
}