﻿.serviceProductsWrapper{
    width:100%;
}

    .serviceProductsWrapper div{
        width:648px;
        margin:0 auto;
        margin-top:75px;
        margin-bottom:40px;
    }

    .servicesProductInfo h3{
        margin-bottom:10px;
    }

.serviceProductsWrapper div .servicesProductInfo{
    width:200px;
    display:inline-block;
}

    .servicesProductInfo:nth-of-type(1), .servicesProductInfo:nth-of-type(2){
        margin-right:20px;
    }

    .servicesProductInfo p{
        line-height:25px;
    }

.servicesQuoteBanner{
    position:relative;
}

    .servicesQuoteBanner img{
        width:100%;
        min-height:150px;
    }

    .servicesQuoteBanner div{
        position:absolute;
        text-align:center;
        width:60%;
        top: 55%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .servicesQuoteBanner > div > h1{
        color:white;
        font-size:24px;
        margin-bottom:15px;
    }

    .servicesQuoteBanner > div > h2{
        color:white;
        font-size:20px;
    }

.keyServicesWrapper{
    margin:0 auto;
    width:80%;
    margin-top:60px;
}

    .keyServicesWrapper div{
        display:inline-block;
        margin-top:-6px;
    }

    .keyServicesWrapper > div > img{
        width:48%;
        float:left;
        display:block;
    }

    .keyServicesWrapper > div > div{
        width:48%;
        float:left;
        padding-left:50px;
        display:block;
        margin-top:6%;
    }

    .keyServicesWrapper > div > div h3 {
        font-size:24px;
        margin-bottom:15px;
        width:80%;
    }

    .keyServicesWrapper > div > div p{
        width:90%;
    }

.wireCategoriesWrapper{
    margin-top:-6px;
}

@media (max-width: 767px) {
    .homepageBody h1:first-of-type{
        font-size:20px;
        width:80%;
    }

    .productContent{
        font-size:12px;
    }

    .servicesWrapper .serviceProductsWrapper div{
        width:70%;
        margin:20px auto;
    }

        .servicesWrapper .serviceProductsWrapper div .servicesProductInfo{
            width:100%;
        }
 
    .servicesQuoteBanner > div > h1{
        font-size:20px;
        margin-bottom:15px;
    }

    .servicesQuoteBanner > div > h2{
        font-size:16px;
    }

    .keyServicesWrapper div{
        margin-bottom:20px;
    }

    .keyServicesWrapper div img{
        width:100%;
    }

    .keyServicesWrapper div div{
        width:100%;
    }
    
}

@media (min-width:1300px){
    .servicesProductInfo p{
        font-size:16px;
    }

    .servicesProductInfo h3{
        font-size:19px;
    }

    .serviceProductsWrapper div{
        width:920px;
    }

    .serviceProductsWrapper div .servicesProductInfo{
        width:270px;
    }

    .servicesProductInfo:nth-of-type(1), .servicesProductInfo:nth-of-type(2){
        margin-right:50px;
    }

    .servicesQuoteBanner div h1{
        font-size:28px;
    }

    .servicesQuoteBanner > div > h2{
        font-size:24px;
    }

    .keyServicesWrapper > div > div{
        margin-top:9%;
    }

    .keyServicesWrapper > div > div h3 {
        font-size:26px;
        width:80%;
    }

    .keyServicesWrapper > div > div p{
        font-size:16px;
    }
}

@media (min-width:1600px) {
    .keyServicesWrapper > div > div{
        margin-top:12%;
    }

    .serviceProductsWrapper div{
        width:1170px;
    }

    .serviceProductsWrapper div .servicesProductInfo{
        width:340px;
    }

    .servicesProductInfo:nth-of-type(1), .servicesProductInfo:nth-of-type(2){
        margin-right:70px;
    }

    .servicesQuoteBanner div h1{
        font-size:32px;
    }

    .servicesQuoteBanner > div > h2{
        font-size:28px;
    }

    .keyServicesWrapper > div > div h3 {
        font-size:30px;
    }
}