/* Start hyalolite */
:root{
    --grid-color-background: #F8F8F8;
    --grid-color-darkk-blue: rgb(1, 37, 77);

}
@font-face {
    font-family: hamada-title;
    src: url(../../montserrat-font/MontserratMedium-nRxlJ.ttf);
    font-family: Hamada;
    src: url(../../montserrat-font/MontserratLight-6YemM.otf);
}
body {
    background-color: white;
    color: black;
    font-family: Hamada;
}

.navbar {
    /*background-color:aquamarine!important;*/
    opacity: 0.8;
    font-size:20px;
    border-bottom: #008ed6 solid 3px;
}

.background {
    
    background-image: url('../img/33.jpg');
    background-size: cover;
    background-attachment: fixed;
    min-height: 700px;
    
}

    .dark-overlay {
        background: rgba(0,0,0,0.6);
        
    }

    .product-container{
        padding: 50px;
        text-align: center;
        justify-content: center;
        display: flex;
        margin: 0 auto;
    }
    @media only screen and (max-width: 768px){
        .product-container{
            flex-direction: column;
        }
        
    }


    /*Start Filters*/
    .filters{
        width: 230px;
        padding-top: 10px;
        
    }
    @media only screen and (max-width: 768px){
        .filters{
            margin: 0 auto;
        }
        
    }
    .filter-row{
        display: flex;
        margin: 10px 0;
        cursor: pointer;
    }
    .filter-titel{
        text-align: left;
        color: black;
        font-size: 10px;
        font-weight: 700;
        letter-spacing: 4px;
        margin: 5px 10px;
        text-transform: uppercase;
    }
    .filter-icon{
        font-size: 10px;
        margin-left: auto;
        align-items: center;
        margin-top: auto;
        margin-bottom: auto;
    }
    
    .filter-icon :hover{
    top: -5%;
    animation: up-only 0.5s linear forwards;
    }

    .filter-content{
        margin-right: auto;
        font-weight: 500;
        color: var(--grid-color-darkk-blue);
        font-size: 14px;
    }

    /*End Filters*/


    /* Start content*/

    .product-content {
        padding: 0 50px;
        text-align: center;
        color: black;
    }

    .bar-row{
        margin: 20px 0;
        font-size: 13px;
        text-align: left;
    }

    .product-row{
        margin-bottom: 30px;
    }
    @media only screen and (max-width: 768px){
        .product-row{
            margin: 0;
        }
        
    }
    .product-box{
        width: 400px;
        height: 550px;
        text-align: center;
        background-color: var(--grid-color-background);
        font-size: 15px;
        padding: 30px;
        margin: 0 20px;
    }
    @media only screen and (max-width: 768px){
        .product-box{
            margin-top: 20px;
            align-items: center;
            text-align: center;
            justify-content: center;
        }
        
    }
    .product-img{
        width: 250px;
        height: 300px;
    }
    @media only screen and (max-width: 768px){
        .product-img{
            margin: 0 auto;
            width: 150px;
            height: 200px;
        }
        
    }
    .product-text{
        margin-top: 20px;
        text-align: left;
        
    }
    .layer1{
        font-size: 16px;
        font-weight: bold;
        text-transform: uppercase;
        margin: 0;
    }
    .layer2{
        font-size: 13px;
        font-weight: 500;
        margin: 5px 0;

    }
    .layer3{
        font-size: 11px;
        font-weight: 300;
        margin: 10px 0;
        color: grey;
    }

    .view-more-style{
        border: 1px solid black;
        background-color: var(--grid-color-background);
        font-size: 10px;
        font-weight: 300;
        color: black;
        padding: 12px;
        text-align: center;
        width: 200px;
        border-radius: 0;
        margin-top: 30px;
        letter-spacing: 2px;
        text-transform: uppercase;
    }

    @media only screen and (max-width: 768px){
        .view-more-style{
            width: 150px;
        }
    }

.hidden-object{
    opacity: 0;
}

    /* End content*/



/* End hyalolite */



/* start animation */

@keyframes up-only{

    0% {
        top: 0;
    }

    100% {
        top: -10px;
    }
}
@keyframes up-an-dowm {

    0%,
    100% {
        top: 0;
    }

    50% {
        top: -15px;
    }
}

@keyframes left-move {
    50% {
        left: 0px;
        width: 12px;
        height: 12px;
    }

    100% {
        left: 0px;
        border-radius: 0%;
        width: 100%;
        height: 100%;

    }

}

@keyframes right-move {
    50% {
        right: 0px;
        width: 12px;
        height: 12px;
    }

    100% {
        right: 0px;
        border-radius: 0%;
        width: 100%;
        height: 100%;
    }

}

/* end animation */