.thumb-wrapper {
    width: 16.3%;
    float: right;
    padding-left: 3px;
    padding-right: 4px;
}

    .thumb-wrapper a {
        display: block;
        float: none;
        padding: 0;
        margin-bottom: 7px;
    }

.product-main {
    width: 81.1%;
    float: right;
    padding-left: 3px;
    padding-right: 4px;
}

    .product-main img {
        width: 100%;
    }



@media only screen and (min-width : 742px) {
    .thumb-wrapper {
        width: 111px;
        float: left;
        padding-left: 3px;
        padding-right: 4px;
    }

        .thumb-wrapper a {
            display: block;
            float: none;
            padding: 0;
            margin-bottom: 7px;
        }

    .product-main {
        width: 553px;
        height: 553px;
        float: left;
        padding-left: 3px;
        padding-right: 4px;
    }

        .product-main img {
            width: 100%;
        }
}

@media only screen and (min-width : 992px) {
    .thumb-wrapper {
        width: 74px;
        float: left;
        padding: 4px;
        /*background-color:yellow;*/
    }

        .thumb-wrapper a {
            display: block;
            float: none;
            padding: 0;
            margin-bottom: 8px;
        }

    .product-main {
        width: 368px;
        height: 368px;
        float: left;
        padding: 4px;
        /*background-color:red;*/
    }
    /*img.product-thumb {
        width:65px;
        height:65px;
      
    }
    img.product-main {
        width:360px;
        height:360px;      
       
    }
}*/
}

.opaq {
    opacity: .3;
    -webkit-transition: all 100ms ease-out;
    -moz-transition: all 100ms ease-out;
    -ms-transition: all 100ms ease-out;
    -o-transition: all 100ms ease-out;
    transition: all 100ms ease-out;
}

.non-opaq {
    opacity: 1;
    -moz-transition-property: opacity;
    -o-transition-property: opacity;
    -webkit-transition-property: opacity;
    transition-property: opacity;
    -moz-transition-duration: 1s;
    -o-transition-duration: 1s;
    -webkit-transition-duration: 1s;
    transition-duration: 1s;
    -moz-transition-timing-function: ease-in;
    -o-transition-timing-function: ease-in;
    -webkit-transition-timing-function: ease-in;
    transition-timing-function: ease-in;
    -moz-transition-delay: 100ms;
    -o-transition-delay: 100ms;
    -webkit-transition-delay: 100ms;
    transition-delay: 100ms;
}

.fadeIn {
    animation: fadein 2s;
    -moz-animation: fadein 2s; /* Firefox */
    -webkit-animation: fadein 2s; /* Safari and Chrome */
    -o-animation: fadein 2s; /* Opera */
    background-color: palegreen;
}

@keyframes fadein {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@-moz-keyframes fadein { /* Firefox */
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@-webkit-keyframes fadein { /* Safari and Chrome */
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@-o-keyframes fadein { /* Opera */
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}


.col-clg-1, .col-clg-2, .col-clg-3, .col-clg-4, .col-clg-5 {
    position: relative;
    min-height: 1px;
    padding-left: 5px;
    padding-right: 5px;
    float: left;
}
@media (min-width: 992px) {
  

    .col-clg-1 {
        width: 22%;
    }

    .col-clg-2 {
        width: 39%;
    }

    .col-clg-3 {
        width: 60%;
    }

    .col-clg-4 {
        width: 80%;
    }

    .col-clg-5 {
        width:100%;
    }
}