/* fonts import*/
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;900&display=swap');

:root{
    --cassiopeia-color-primary: #5a9f3c;
    --cassiopeia-color-link: #787878;
    --cassiopeia-color-hover: #00afe2;
    --cassiopeia-color-hover-green: #5a9f3c;
    --menu-font-size: 1.2rem;
    --body-font-family: var("Source Sans Pro", sans-serif);
    --color-grey:#555555;
    --color-grass-green:#D8E096;
}



body, .h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6{
    font-family: var(--body-font-family);
}


.container-header .navbar-toggler{
    color:var(--cassiopeia-color-primary);
}

.container-header{
    background-image: none;
    background-color:#fff;
}

.header .mod-list li {
    align-self: center;
}

.header img{
    max-width: 152px;
}
.container-header .mod-menu{
    justify-content: center;
}


.container-header .mod-menu{
    color: var(--cassiopeia-color-link);
    font-size: var(--menu-font-size);

}

.container-header .mod-menu>li>a:hover, .container-header .mod-menu>li>span:hover, .current{
    color: var(--cassiopeia-color-hover-green);
}


.container-bottom-a .bottom-a{
    align-self: center;
}

.footer{
    background-image: none;
    clip-path: polygon(0 35%, 100% 0, 100% 100%, 0% 100%); 
}

.footer .grid-child{
    justify-content: center;
    padding: 2.5rem 0.5em 0rem;

}

/*
Produkty css
*/

.products h2{
    text-align: center;
}
.products h2 a{
    text-decoration: none;
}

.products .item-content{
    text-align: center;
}

.item-content p{
    text-transform: uppercase;
}
.item-content h2{
    text-transform: uppercase;

}

.product{
    display: grid;
    grid-gap: 0 1em;
    grid-template-columns:  1fr 3fr;
    grid-template-areas: "prod-left prod-full";
   
}

.product p strong{
    font-family: "Source Sans Pro";
    font-weight: 900;
    color: var(--color-grey);
}

.product section{
    background-color: var(--color-grass-green);
    padding:1em;
    margin-bottom: 2em;
}

@media (max-width: 700px) {
.product{
    grid-template-columns:  2fr 2fr;
    grid-template-areas:
    "prod-left prod-full";
    
}
}

@media (max-width: 400px) {
    .product{
        grid-template-columns:  1fr;
        grid-template-areas:
        " prod-full"
        "prod-left";
       ;
    }
    
    .product-full {
        grid-area: prod-full;
        order:1;
    }
}

/* .product>.full-width {
    grid-column: full-start/full-end;

} */

.product-left {
    grid-area: prod-left;
    order: 3;
    display: grid;
    justify-content: center;
    align-content: start;
    padding-top: 10px;
}

.product-full {
    grid-area: prod-full;
    order: 2;
}




.product_module_grid h2 span span{
    font-weight: 900;
}


.blackchalk, .siarkomag, .siarkogran, .suplagran, .suplacal, .suplamag{
    text-transform: uppercase;
}


.blackchalk{
    color:#6F6F6F;
}
.blackchalk span{
    color:#222222;
    font-weight: 900;
}
.siarkomag{
    color:#2C3D6B;
    font-weight: 900;
}
.siarkomag span{
    color:#C2111D;
    
}

.siarkogran{
    color: #C2111D;
    font-weight: 900;
}
.siarkogran span{
    color:#005F95;
}

.suplagran{
    color:#B8C638;
}
.suplagran span{
    color:#2A9549;
    font-weight: 900;
}
.suplacal{
    color:#CC526C;
    

}
.suplacal span{
   color:#C2111D;
   font-weight: 900;
}

.suplamag{
    color:#71BADA;
    
}

.suplamag span{
    color: #009DE0;
    font-weight: 900;
    
}





/* product module main page css*/
.product_module{
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
grid-gap: 0 1em;
max-width: 100%;
}

.product_module_grid h2{
  text-align:center;
  text-transform:uppercase;
  font-weight: 400;

}

.product_module_grid .introtext{
    text-align: center;
    text-transform:uppercase;
}

.product_module_grid h2 a{
text-decoration:none;
font-size: 25px;
}

.product_module_grid figure.center{
    text-align: center;
}

@media (max-width: 1500px) {
    .product_module{
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .product_module{
    grid-template-columns: repeat(2,1fr);
    }
}

@media (max-width: 400px) {
    .product_module{
    grid-template-columns: repeat(1,1fr);
    }
}



.item-page h1, .o_nas_glowna{
    font-weight: 300;
    color:#5E9668;
}

.logo_glowna img{
    max-width:200px;
    float: right;
    margin-right: 50px;
}








/* lightbox*/
.gallery div {
    flex: auto;
    width: 220px;
    margin-bottom:20px;
    
}

.gallery div img {
    width: 100%;
    height: auto;
    box-shadow: .3rem .4rem .4rem rgba(0,0,0,0.4);
    transition: transform 400ms ease-out
}

.gallery div img:hover {
    transform: scale(1.15)
}

.gallery .photo:hover {
    background: no-repeat center/20% url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path fill="darkmagenta" d="m28.34 24.12-6.5-6.85A10.49 10.49 0 1 0 12.5 23h.55a1 1 0 1 0-.1-2 8.5 8.5 0 1 1 5.4-2.32A8.72 8.72 0 0 1 16.53 20a1 1 0 0 0-.41 1.35.89.89 0 0 0 .36.36v.08l6.77 7.13A3.48 3.48 0 0 0 25.73 30h.09a3.43 3.43 0 0 0 2.39-1 3.47 3.47 0 0 0 .13-4.88zm-1.5 3.47a1.45 1.45 0 0 1-1.06.41 1.51 1.51 0 0 1-1-.46l-6.15-6.49a10.07 10.07 0 0 0 1.14-.93 10.54 10.54 0 0 0 1-1.12l6.16 6.5a1.47 1.47 0 0 1-.09 2.09z"/><path fill="darkmagenta" d="M8.55 8.16a1 1 0 0 0-1.39.29 7.19 7.19 0 0 0 1.17 9.29A1 1 0 0 0 9 18a1 1 0 0 0 .67-1.74A5.32 5.32 0 0 1 8 12.91a5.24 5.24 0 0 1 .84-3.36 1 1 0 0 0-.29-1.39z"/></svg>');
    opacity: 1
}

.gallery img:hover {
    opacity: .5
}

.carousel-item,.carousel-item .bg-dark {
    min-block-size: 300px
}

.carousel-control-next-icon,.carousel-control-prev-icon {
    background-color: var(--brand);
    border-radius: 0
}

.lightbox-caption {
    background-color: var(--brand)
}

.modal-backdrop.show {
    opacity: .8
}