:root {
  --gold: #c58233;
  --dark-blue: #001841;
  --blue: #00296f;
  --light-blue: #98afda;
  --dark-brown: #391f0c;
  --light: #e5c6a3;
  --sand: #F5F1DC;
 }

.banner-vonkajsie {
    background-color: var(--dark-brown);
    background-image: url('/images/bg-vonkajsie-header.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: right;
    color: var(--light);
}
.banner-vonkajsie h2{
    text-align: left;
    padding: 60px calc(20% + 20px) 20px 20px;
    position: relative;
    z-index: 1000;
    color: var(--light);
}
.banner-vonkajsie p{
    padding: 20px calc(20% + 20px) 60px 20px;
    font-size: 1.1em;
    margin: 0;
    position: relative;
    z-index: 100;
}
.banner-vonkajsie p::before{
    content: '';
    position: absolute;
    background-color: #421E04;
    width: 60%;
    height: 190px;
    top: calc(20% - 50px);
    left: 16%;
    display: block;
    z-index: -1;
    filter: blur(38px);
    opacity: .7;
}
@media (max-width: 990px) {
    .banner-vonkajsie p::before{
        width: 60%;
        height: 460px;
        top: -100px;
        left: 7%;
    }
}
@media (max-width: 767px) {
    .banner-vonkajsie p::before{
        width: 90%;
        height: 130%;
        top: -40%;
        left: 0%;
    }
}
@media (max-width: 767px) {
    .banner-vonkajsie h2 {
        padding: 60px 20px 20px 20px;
    }
    .banner-vonkajsie p {
        padding: 20px 20px 60px 20px;
    }
}

/* argument */
.arguent-vonkajsie {
    background-color: #d0dff7;
}
.arguent-vonkajsie ul {
    padding-left: 50px;
}
.arguent-vonkajsie ul li {
    list-style: none;
    position: relative;
    padding-bottom: 20px;
}
.arguent-vonkajsie ul li::before {
    content: '';
    display: block;
    position: absolute;
    height: 40px;
    width: 40px;
    background-image: url('/images/ico-check-blue.svg');
    left: -40px;
    top: -7px;
}
.bg-argument-bear {
    background-image: url('/images/bg-argument-bear.jpg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: right bottom;
}

/* varianty */

.vonkajsie-varianty {
    background-color: var(--sand);
    background-image: url('/images/vonkajsie-vzorkovnik.jpg');
    background-repeat: no-repeat;
    background-position: right;
    background-size: contain;
}
.bg-varianty {
    background-color: #F4EFD8E3;
    box-shadow: 0 0 29px 17px #F4EFD8;
}
.vonkajsie-varianty h2{
    background-color: var(--sand);
}
.bg-varianty h3{
    position: relative;
}
.varianty ul {
    padding-left: 40px;
}
span.ico-variant{
    display: inline-block;
    background-repeat: no-repeat;
    height: 30px;
    width: 30px;
    margin-right: 10px;
}
span.ico-variant.variant-dia {
    background-image: url('/images/ico-dia.svg');
}
span.ico-variant.variant-size {
    background-image: url('/images/ico-size.svg');
}
span.ico-variant.variant-use {
    background-image: url('/images/ico-use.svg');
}
span.ico-variant.variant-color {
    background-image: url('/images/ico-color.svg');
}
.vonkajsie-varianty .tip {
    border: 1px solid #d3c3b6;
    border: 1px solid #d3c3b6;
    padding: 20px 20px 20px 50px;
    background-image: url('/images/ico-hand.svg');
    background-repeat: no-repeat;
    background-size: 20px;
    background-position: 10px 20px;
    background-color: #e5d3b4;
    margin-top: 50px;
}


/* */
.faq {
    background-color: #d0dff7;
    transition: all 1s ease;
}
.bg-faq {
    background-image: url('/images/bg-faq-off.jpg');
     background-size: contain;
    background-repeat: no-repeat;
    background-position: right top;
    transition: all 1s ease;
    position: relative;
}
.bg-faq::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('/images/bg-faq.jpg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: right top;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
    z-index: 1;
}

@keyframes myAnimation {
  0%   {opacity: 0;}
  15%  {opacity: 1;}
  30% {opacity: 0;}
  45%  {opacity: 1;}
  60% {opacity: 0;}
}


.faq:hover .bg-faq::before{
    animation-name: myAnimation;
    animation-iteration-count: infinite;
    animation-duration: 3s;
}

.accordion-item {
    background-color: transparent;
    border: 1px solid var(--light-blue);
}
.accordion-button {
    background-color: transparent;
}
h2.accordion-header {
    padding: 15px 0;
}
.accordion-button:focus{
    box-shadow: none;
}
.accordion-button:not(.collapsed) {
    background-color: transparent;
}

.faq .tip {
    border: 1px solid #0a32723b;
    padding: 20px 20px 20px 50px;
    background-image: url('/images/ico-message.svg');
    background-repeat: no-repeat;
    background-size: 20px;
    background-position: 10px 20px;
    background-color: #b7cff6;
    margin-top: 50px;
    color: var(--dark-blue);
}