/*$brown: #41010a;
$magenta: #86015d;
$blue: #3b00fc;
$green: #2e7a3c;
$orange: #ef4722;
$yellow: #f79121;
    $gray:#454545;
    $light-gray:#86015d;
*/
* {
    box-sizing: border-box;
}

html, body {
    width: 100%;
    height: 100%;
    padding: 0px;
    margin: 0px;
    font-family: Calibri;
}

a {
    text-decoration: none;
}

.boldFont {
    font-weight: bold;
}

.header {
    height: 80px;
    background-color: white;
    position: fixed;
    font-size: 20px;
    width: 100%;
    margin: 0px;
    padding: 0px;
    border-bottom: 1px gainsboro solid;
    top: 0 !important;
    z-index: 5;
}

    .header .headerLogo {
        /*width: 25%;*/
        margin-left: 5%;
        margin-right: 5%;
        float: left;
    }

        .header .headerLogo .logo {
            width: 200px;
            height: 75px;
            padding: 0px;
        }

    .header .menu {
        /*width: 45%;*/
        float: left;
        line-height: 80px;
        overflow: hidden;
        display: inline-block;
    }

        .header .menu a {
            padding: 0px 15px;
            text-decoration: none;
            font-size: 20px;
            color: #454545;
            font-weight: bold;
            text-transform: uppercase;
            display: inline-block;
            font-family: Calibri;
        }

            .header .menu a:hover {
                border-bottom: 2px solid #86015d;
                color: #86015d;
            }

    .header .headerContact {
        float: right;
    }

        .header .headerContact span {
            line-height: 80px;
            font-size: 20px;
            display: inline-block;
            padding: 0px 15px;
            color: #86015d;
        }

.MobHeader {
    display: none;
}

.Footer {
    background-color: #86015d;
    display: inline-block;
    width: 100%;
    padding: 2% 5%;
    margin: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
}

.footerCol {
    width: 24%;
    display: inline-block;
    padding: 5px 10px;
    vertical-align: top;
}

    .footerCol h3, .footerCol a {
        color: white;
    }

    .footerCol a {
        text-decoration: none;
        font-size: 15px;
    }

        .footerCol a:hover span {
            text-decoration: underline;
        }

.profileLink {
    display: inline-block;
}

    .profileLink .fa {
        padding: 10px;
        font-size: 20px;
        color: white;
    }

        .profileLink .fa:hover {
            color: white;
            cursor: pointer;
        }

.fa-facebook:hover {
    background: #3B5998;
}

.fa-twitter:hover {
    background: #55ACEE;
}

.fa-linkedin:hover {
    background: #007bb5;
}

.fa-yahoo:hover {
    background: #430297;
}

.fa-instagram:hover {
    background: #125688;
}

.fa-youtube-play:hover {
    background: #bb0000;
}

.pageContentLayout {
    z-index: -1;
    margin: 20px 5% 0px 5%;
}

.titleImage {
    width: 100%;
    height: 500px;
    margin: 80px 0px 0px 0px;
    padding: 0px;
    background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('../Images/businessman-touching-tip-bar-chart.jpg') center center;
    background-size: 100% 100%;
    /* Here's the same styles we applied to our content-div earlier */
    /*background: url('../Images/businessman-touching-tip-bar-chart.jpg');    
    background-position: initial;
    background-repeat: no-repeat;
    background-size:cover;
    position: relative;*/
}

.titleText {
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
}

.titleImage span {
    font-size: 50px;
    color: white;
}

.titleText button {
    padding: 10px;
    border: none;
    outline: none;
    color: white;
    font-size: 20px;
    background-color: #5DADE2;
}

    .titleText button:hover {
        cursor: pointer;
        background-color: #3498DB;
        outline: none;
    }



.trialContent {
    width: 100%;
}

.trialImage {
    width: 50%;
    float: left;
}

.trialForm {
    width: 50%;
    float: left;
}

.trialFrmInputStyle {
    width: 80%;
    padding: 10px;
    /*box-shadow:2px 2px 2px 5px gainsboro inset;*/
    border-radius: 10px;
    display: block;
    margin: 5px auto;
    background-color: #F2F3F4;
    border: none;
    font-size: 15px;
    caret-color: #86015d;
}

    .trialFrmInputStyle:focus {
        outline: none;
        border: 1px solid #86015d;
        background-color: white;
    }

.trialFrmButtonStyle {
    font-size: 20px;
    border: none;
    width: 80%;
    color: white;
    padding: 10px;
    border-radius: 10px;
    display: block;
    margin-top: 5px;
    margin-bottom: 5px;
    margin-left: auto;
    margin-right: auto;
    background-color: #86015d;
    opacity: .9;
}

    .trialFrmButtonStyle:hover {
        opacity: 1;
        cursor: pointer;
        outline: none;
    }

.ContactSummary {
    width: 100%;
    height: auto;
    border-radius: 10px;
    background-color: #EBDEF0;
    overflow: hidden;
}

    .ContactSummary .ContactInfo {
        width: 50%;
        float: left;
        padding: 20px;
    }

.ContactInfo h1 {
    font-size: 40px;
    font-weight: bold;
}

.ContactInfo span {
    font-size: 20px;
}

.ContactSummary .ContactImage {
    width: 50%;
    float: left;
    display: inline-block;
}

.serviceSummary {
}

    .serviceSummary h1 {
        font-size: 50px;
        text-align: center;
        color: #454545;
        font-weight: normal;
    }

    .serviceSummary span {
        font-size: 30px;
        text-align: justify;
        color: #454545;
    }

    .serviceSummary button {
        background-image: linear-gradient(to right,#86015d,#ef4722,#f79121);
        border: 2px solid white;
        border-radius: 50px;
        font-size: 30px;
        color: white;
        padding: 10px 20px;
        display: block;
        margin: 0 auto;
        outline: none;
    }

        .serviceSummary button:hover {
            outline: none;
            font-weight: bold;
            cursor: pointer;
        }

.pageTitle {
    font-size: 40px;
    font-weight: bold;
    color: white;
    padding: 10px 5%;
    /*background-color: #BB4596;*/
    background-image: linear-gradient(to right,#86015d,#ef4722,#f79121,#3b00fc);
    width: 100%;
    z-index: -1;
    margin-top: 80px;
}

.pageContentLayout .ContentRow, .pageContentLayout .googleMap {
    width: 100%;
    font-family:Calibri;
}

    .pageContentLayout .ContentRow .ContentText, .pageContentLayout .ContentRow .ContentImage {
        width: 50%;
        float: left;
        padding: 10px;
        display: table-cell;
        vertical-align: top;
    }

.pageContentLayout .ServiceRow {
    width: 100%;
    display: table-row;
}

    .pageContentLayout .ServiceRow .ContentText, .pageContentLayout .ServiceRow .ContentImage {
        width: 50%;
        float: left;
        padding: 10px;
        display: table-cell;
        vertical-align: top;
    }
.whyToChooseDiv {
    border-radius: 5px 30px;
    background-color: #F2F4F4;
    display: inline-block;
}
.aboutImage {
    border-radius: 10px 30px;
    width: 50%;
    float:left;
}
.pageContentLayout .ContentText a, .pageContentLayout .ServiceRow a {
    font-weight: 700;
    font-size: 30px;
    text-decoration: none;
    text-align: center;
    vertical-align: top;
    background-image: linear-gradient(to left,#86015d,#ef4722,#f79121,#3b00fc);
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
}

.pageContentLayout .MobServiceRow {
    display: none;
}

.pageContentLayout .ContentText .ContentTextStyle, .pageContentLayout .ContentTextStyle {
    font-size: 20px;
    line-height: 1.6;
    text-align: justify;
    display: inline-block;
}

.pageContentLayout .ContentText a span, .pageContentLayout .ServiceRow a span {
    /*border-bottom: 2px dotted #DC78BD;*/
}

.pageContentLayout .ContentText .gradientIconStyle {
    background-image: linear-gradient(to left,#86015d,#ef4722,#f79121,#3b00fc);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 30px;
}

.ContentImageStyle {
    width: 90%;
    height: 300px;
    vertical-align: top;
}

.more {
    display: none;
}

.btnView {
    border: none;
    font-weight: bold;
    color: white;
    outline: none;
    font-size: 15px;
    padding: 10px;
    /*border-bottom: 2px solid #86015d;*/
    background-image: linear-gradient(to top right,#86015d,#ef4722,#f79121);
}

    .btnView:hover {
        outline: none;
        cursor: pointer;
    }

.ContentText .more, .ContentText.show .dots {
    display: none
}

.ContentText.show .more {
    display: inline
}

.fa-thumbs-up {
    background-image: linear-gradient(to left,#86015d,#ef4722,#f79121,#3b00fc);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.contactInfo {
    width: 60%;
    padding: 5px;
    z-index: -1;
    float: left;
}

.pageContactImage {
    float: right;
    width: 200px;
    height: 300px;
    display: inline-block;
    margin-right: 10%;
}

.contactInfo .contactTitle {
    font-size: 30px;
    display: inline-block;
    text-transform: uppercase;
    font-weight: bold;
    float: left;
    background-image: linear-gradient(to right,#86015d,#ef4722,#f79121,#3b00fc);
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    padding-bottom: 0;
}

.contactDetails {
    float: left;
    color: rgb(50,50,50);
    margin-left: 5%;
    font-weight: 500;
    font-size: 20px;
}

.iconCircle {
    padding: 5px;
    background: white;
    box-shadow: 2px 2px 2px darkgray;
    border-radius: 50%;
    width: 20px;
    align-content: center;
    text-align: center;
    display: flex;
}

.detailsRow {
    display: table-row;
    margin-top: 5px;
}

    .detailsRow #detailsCell {
        display: table-cell;
    }

.quoteForm {
    width: 40%;
    height: auto;
    background-color: white;
    text-align: center;
    float: left;
    -moz-box-shadow: 0 0 5px 5px #E5E8E8;
    -webkit-box-shadow: 0 0 5px 5px #E5E8E8;
    box-shadow: 0 0 5px 5px #E5E8E8;
    border-radius: 50px;
}

    .quoteForm .formTitle {
        color: #ef4722;
        font-weight: bold;
        font-size: 40px;
    }

        .quoteForm .formTitle .text-wrapper {
            display: inline-block;
            padding-top: 0.2em;
            padding-right: 0.05em;
            padding-bottom: 0.1em;
            overflow: hidden;
        }

        .quoteForm .formTitle .letter {
            display: inline-block;
            line-height: 1em;
            transform-origin: 0 0;
        }

    .quoteForm .input-group {
        width: 80%;
        margin: 0 auto;
        margin-bottom: 5px;
        font-size: 18px;
    }

        .quoteForm .input-group .input-group-addon {
            width: 100px;
            color: white;
            text-align: left;
            background-color: #ef4722;
        }

    .quoteForm .label {
        text-align: left;
        margin-left: 5%;
        margin-bottom: 5px;
        color: #323232;
        display: block;
        font-weight: normal;
        font-size: 20px;
    }

    .quoteForm .form-control {
        width: 100%;
        border-right: 1px solid #ef4722;
        border-top: 1px solid #ef4722;
        border-bottom: 1px solid #ef4722;
        caret-color: #ef4722;
    }

        .quoteForm .form-control:focus {
            background-color: white;
            -moz-box-shadow: 0 0 5px 3px #ef4722;
            -webkit-box-shadow: 0 0 2px 3px #ef4722;
            box-shadow: 0 0 2px 3px #ef4722;
            outline: none;
            border: none;
        }

    .quoteForm .buttonStyle {
        display: block;
        margin: 0 auto;
        padding: 10px;
        text-transform: uppercase;
        background-color: #ef4722;
        border: none;
        font-size: 20px;
        font-weight: bold;
        color: white;
        outline: none;
        width: 80%;
        opacity: .9;
    }

        .quoteForm .buttonStyle:hover {
            cursor: pointer;
            font-weight: 700;
            opacity: 1;
            outline: none;
        }

.productRow {
    width: 80%;
    margin: 0 auto;
    /*border: 1px solid #f79121;*/
    -moz-box-shadow: 0 0 5px 5px #E5E8E8;
    -webkit-box-shadow: 0 0 5px 5px #E5E8E8;
    box-shadow: 0 0 5px 5px #E5E8E8;
    overflow: hidden;
    padding:10px;
}

    .productRow .productContentCell {
        width: 70%;
        float: left;
    }

    .productRow .productImageCell {
        width: 30%;
        float: left;
    }

.productContentCell .productHeading {
    width: 90%;
    margin: 2% 2%;
    background-color: #f79121;
    color: white;
    font-size: 25px;
    font-weight: bold;
    padding: 5px 5%;
    text-align: left;
    border-radius: 10px;
}

.productContentCell .productContent {
    font-size: 18px;
    color: #454545;
    line-height: 1.6;
    margin: 2% 2%;
}

.productRow .productImageCell .productImageStyle {
    width: 90%;
    height: 200px;
    margin: 2% 2%;
    padding: 2%;
    border-radius: 10px 30px;
}

.featureContentCell {
    width: 28%;
    height: auto;
    float: left;
    margin: 10px 4.5% 20px 10px;
    padding:10px 5px;
    vertical-align: top;
    display: inline-block;
    /*border-top: 8px solid #86015d;*/
    overflow: hidden;
    text-align: center;
    -moz-box-shadow: 0 0 5px 5px #E5E8E8;
    -webkit-box-shadow: 0 0 5px 5px #E5E8E8;
    box-shadow: 0 0 5px 5px #E5E8E8;
    border-radius: 5%;
    /*background-image: linear-gradient(to bottom,#86015d,#ef4722,#f79121);
    border-radius:10px 30px;*/
}

    .featureContentCell .ImageDiv {
        background-image: linear-gradient(to bottom,#86015d,#ef4722,#f79121);
        border-radius: 30%;
        width: 110px;
        margin: 0 auto;
    }

    .featureContentCell .featureContentHeading {
        text-transform: uppercase;
        font-size: 20px;
        font-weight: bold;
        /*color:white;*/
        background-image: linear-gradient(to right,#86015d,#ef4722,#f79121,#3b00fc);
        color: transparent;
        -webkit-background-clip: text;
        background-clip: text;
    }

    .featureContentCell .featureContentStyle {
        font-size: 18px;
        /*word-break:break-all;*/
        line-height: 1.6;
        color: #454545;
    }

.featureContentStyle .more {
    display: none
}

.featureContentCell .featureContentStyle a {
    display: block;
    text-align: left;
    border-left: 5px solid #86015d;
    cursor: default;
    font-size: 18px;
    color: #454545;
    font-weight: bold;
}

.btnFeatureView {
    border: none;
    font-weight: normal;
    outline: none;
    font-size: 15px;
    padding: 5px;
    color: white;
    background-image: linear-gradient(to top right,#86015d,#ef4722,#f79121);
}

    .btnFeatureView:hover {
        outline: none;
        cursor: pointer;
    }

.quoteDiv {
    width: 100%;
    /*background-color: #86015d;*/
    background-image: linear-gradient(to right,#86015d,#ef4722,#f79121);
    overflow: hidden;
    height: auto;
}

    .quoteDiv .QuoteText, .quoteDiv .QuoteBtn {
        width: 50%;
        float: left;
    }

    .quoteDiv .QuoteText {
        padding: 10px 5%;
        color: white;
        font-size: 20px;
    }

    .quoteDiv .QuoteBtn button {
        border: 0px;
        float: right;
        margin: 20px 5% 20px 20px;
        padding: 10px 20px;
        text-decoration: none;
        color: black;
        background-color: white;
        font-size: 18px;
        font-weight: bold;
    }

        .quoteDiv .QuoteBtn button:hover {
            color: #86015d;
            cursor: pointer;
            outline: none;
        }