﻿

.productscontact {
    display: block;
    text-align: center;
    width: 100%;
}

    .productscontact .background {
        width: 100%;
        background-color: #ffffff;
        position: absolute;
        z-index: -1;
        height: 220px;
    }

    .productscontact .product_group {
        margin-top: 30px;
    }

    .productscontact .product {
        vertical-align: middle;
        display: inline-block;
        line-height: 24px;
        background-color: #ededed;
        margin: 10px;
        -webkit-transition: transform .3s, -webkit-box-shadow .3s, -moz-box-shadow .3s, box-shadow .3s; /* Safari */
        transition: transform .3s, -webkit-box-shadow .3s, -moz-box-shadow .3s, box-shadow .3s;
        -webkit-transition-timing-function: ease;
        cursor: pointer;
        position: relative;
    }

        .productscontact .product .logo {
            width: 100%;
            background-color: #fff;
            padding: 20px;
            border-bottom: 1px solid #e0e0e0;
        }

            .productscontact .product .logo img {
                display: block;
                margin: auto;
                width: 100%;
                height: auto;
            }

        .productscontact .product .producttitle {
            display: inline-block;
            color: #07143A;
            font-size: 16px;
            font-weight: 500;
            width: 100%;
            text-align: center;
            margin-bottom: 10px;
        }

        .productscontact .product .content {
            display: block;
            /*min-height: 180px !important;*/
            margin: auto !important;
            width: 100%;
            padding: 20px;
            text-align: left;
            font-weight: 500;
            color: #8E93A2;
        }

        .productscontact .product .circle {
            position: absolute;
            display: block;
            margin: auto;
            top: 104px;
            left: calc(50% - 35px);
            padding: 8px;
            padding-top: 18px;
            width: 70px;
            height: 70px;
            line-height: 16px;
            font-size: 14px;
            border-radius: 50%;
            text-align: center;
            font-weight: 500;
            color: #fff;
            background-color: #00796B;
            -webkit-box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.75);
            -moz-box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.75);
            box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.75);
        }

        .productscontact .product .detail {
            position: absolute;
            display: block;
            top: 0px;
            right: -6px;
            text-align: center;
            background-color: #00796B;
            padding: 0px 16px;
            -webkit-box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.5);
            -moz-box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.5);
            box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.5);
        }

            .productscontact .product .detail .triangle {
                position: absolute;
                right: 0px;
                width: 0;
                height: 0;
                border-top: 16px solid #00796B;
                border-right: 6px solid transparent;
            }

        .productscontact .product .content i {
            color: #328ADC;
            margin-left: 10px !important;
            margin-right: 10px !important;
        }


        .productscontact .product .button {
            background-color: #ffffff;
            display: block;
            width: 100%;
            border: none;
            border-top: 1px solid #e0e0e0;
            height: 40px;
            font-size: 16px;
            font-weight: 500;
        }



        .productscontact .product:hover {
            background-color: #efefef;
            -webkit-box-shadow: 0px 0px 15px -1px rgba(0,0,0,0.75);
            -moz-box-shadow: 0px 0px 15px -1px rgba(0,0,0,0.75);
            box-shadow: 0px 0px 15px -1px rgba(0,0,0,0.75);
            z-index: 500;
            backface-visibility: hidden;
            transform: perspective(1px) translateZ(0) scale(1.1) !important;
            -moz-transform: perspective(1px) scale(1.1) !important;
            -o-transform: perspective(1px) scale(1.1) !important;
            -ms-transform: perspective(1px) scale(1.1) !important;
            -webkit-transform: perspective(1px) scale(1.1) !important;
            -webkit-backface-visibility: hidden !important;
        }

            .productscontact .product:hover .button {
                color: #FFFFFF;
            }

            .productscontact .product:hover i {
                color: #FF4200;
            }

#products .owl-item {
    padding: 15px;
}

#products .owl-wrapper-outer {
    overflow: visible !important;
}

#products {
    padding: 15px !important;
    overflow: hidden !important;
}


.productscontact a {
    color: inherit;
    text-decoration: inherit;
}

    .productscontact a:hover {
        color: inherit;
        text-decoration: inherit;
    }




@media (max-width : 825px) {
    .productscontact .product {
        width: calc(100% - 40px);
    }
}


@media (min-width : 600px) {

    .productscontact .product {
        width: 40%;
    }
}

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    .producttable .producthover:hover > td {
        -ms-transform: perspective(1px) scale(1.08) !important;
    }
}

@media (min-width : 1023px) {

    #products {
        width: 100% !important;
        margin-left: 15% !important;
        margin-top: 50px !important;
    }

    .productscontact .product {
        width: 25%;
    }
}

/* Desktops and laptops ----------- */
@media (min-width : 1224px) {



    #products {
        width: 70% !important;
        margin-left: 15% !important;
        margin-top: 50px !important;
    }

    .productscontact .product {
        width: 20%;
    }
}

/* Large screens ----------- */
@media (min-width : 1824px) {
    #products {
        width: 50% !important;
        margin-left: 25% !important;
        margin-top: 50px !important;
    }

    .productscontact .product {
        width: 15%;
    }
}
