:root {
    --c1:#ce2026;
}

a, .nav-link:hover, .highlighted {
    color:var(--c1);
}

.button-primary.animated {
    background-color:var(--c1);
}

.button-primary-text {
    transform:translate3d(0px, 0px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg);
    opacity:1;
    transition:all .2s ease;
}

a:hover .button-primary-text {
    transform:translate3d(0px, -20px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg);
    opacity:0;
}

.button-primary-text.for-hover {
    transform:translate3d(0px, 20px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg);
    display:unset;
    opacity:0;
}

a:hover .button-primary-text.for-hover {
    transform:translate3d(0px, 0px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg);
    opacity:1;
}

.logotype {
    text-transform:uppercase;
    letter-spacing: .3em;
}
.section.is-header > .container {
    justify-content: center;
}

.section.is-header .banner-container {
    max-width:1600px;
}

#product {
    height:500px;
}

#product .slider-row, #product .W-slider-mask, #product .slide-with-bg {
    height:100%;
}

.slide-with-bg.bg1 {
    background-image: url("../images/specialized.jpg");
}

.slide-with-bg.bg2 {
    background-image: url("../images/specialized-2.jpg");
}

.slide-with-bg.bg3 {
    background-image: url("../images/specialized-3.jpg");
}

.section.is-half-dark {
    background-color:#333;
    color:white;
}

.photo-grid {
    display:grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    grid-gap: 15px;
    grid-auto-flow: dense;
    padding: 10px;
    max-width: 1200px;
    margin:0 auto
}

a[data-fancybox] img {
    cursor: zoom-in;
}

.fancybox__caption {
    text-align: center;
}

.marques {
    display:flex;
    flex-flow:row wrap;
    justify-content: center;
}

.marques > * {
    object-fit: contain;
    margin: 2em 1.5em;
    opacity: .5;
    transition: all .3s ease;
    padding: 1em;
    width: 16%;
}

.marques > *:hover {
    opacity: 1;
}

@media (max-width:968px) {
    .photo-grid {
        display: flex;
        flex-flow: row wrap;
        justify-content: center;
    }

}

@media (max-width:768px) {
    .marques > * {
        width:35%;
    }
}