@media only screen and (min-width: 768px){
    .cards-container{
        position: relative;
    }
    
    .cards-container .card{
        cursor: pointer;
    }
    
    .cards-container .card.active{
        background: #6bc4e8;
        color: #fff;
    }

    .cards-container .card.active .card-title,
    .cards-container .card.active .card-title .icofont,
    .cards-container .card.active a{
        color: #fff!important;
    }
 
    
    .icofont {
	    vertical-align: middle;
    }
    

    .cards-container .card.active a{
        border-bottom: 1px solid;
    }
    
    .cards-container .card.active a:hover{
        text-decoration: none;
    }

    .cards-container .product-figure{
        display: none;
    }
    
    .cards-nav-dots{
        position: absolute;
        z-index: 1;
    }
    
    .cards-nav-dots span{
        display: block;
        background: #E5e5e5;
        border-radius: 50%;
        margin-top: 12px;
        cursor: pointer;
    }

    .cards-nav-dots span:first-child{
        margin-top: 0;
    }
    
    .cards-nav-dots span.active{
        background: #6bc4e8;
    }
}

@media screen and (max-width: 1024px) {
    .cards-container .card-title .icofont {
    display: none;
	}
}

@media only screen and (min-width: 1200px){
    .cards-nav-dots span{
        width: 12px;
        height: 12px;
    }

    .cards-nav-dots.right{
        right: 0;
    }
    
    .cards-nav-dots.left{
        left: 0;
    }
}

@media only screen and (max-width: 1024px){
    .cards-nav-dots{
        display: none;
    }
}

@media only screen and (max-width: 1199px){
    .cards-nav-dots span{
        width: 8px;
        height: 8px;
    }

    .cards-nav-dots.right{
        right: -15px;
    }
    
    .cards-nav-dots.left{
        left: -15px;
    }
}