.header-referral{
    background: url('../images/menubar.png') no-repeat top right; background-size: cover; height:350px; background-color: #e0e3df;
}

.logo-image-referral{
    width:50%;
}

.image-referral{
    
    padding-left: 20%;
    width: 80%;
    padding-top: 5%;
    padding-bottom: 5%;
}


.title-referral {
    font-size: 40px;
    color: #725f0c;
    font-family: 'proxima_novabold';
}

/* .referral-bold-text{
    font-size: 18px;
    font-family: 'proxima_novaextrabold';
    font-weight: 400;
    line-height: 1.5em;
    color: #000;
} */

.referral-bold-text {
    font-size: 18px;
    font-family: 'proxima_novabold';
    /* font-weight: 400; */
    line-height: 1.5em;
    color: #000;
}
.referral-text{
    padding-right:20%;
    font-family: 'proxima_nova_rgregular';
    font-size: 18px;
    line-height: 1.5em;
    color: #000;
}

/* .button-refer{
    top: 75px;
    padding: 8px 30px 8px 30px;
    display: inline-block;
    background-color: #d9a300;
    font-family: 'proxima_novasemibold';
    color: #FFF;
    font-size: 13px;
    position: relative;
} */

.button-refer {
    top: 65px;
    padding: 8px 50px 8px 50px;
    display: inline-block;
    background-color: #d7a400;
    font-family: 'proxima_novasemibold';
    color: #FFF;
    font-size: 20px;
    position: relative;
}


.referral-how-it-works {
    margin-bottom: 10px;
    font-size: 25px;
    color: #725f0c;
    font-family: 'proxima_novabold';
}

.referral-short-desc{
    font-size: 18px;
    font-family: 'proxima_nova_rgregular'!important;
    line-height: 1.5em;
    color: #000;
}

#section-home-service-referral {background-color: #e0e3df;}
.service-item-referral {overflow:hidden; position: relative; width:33%; float:left!important; padding-top:5%;}
.service-item-inner-referral {margin-left: -15px; padding:5%;}
.service-item-image-referral {margin-bottom: 20px; overflow: hidden; position: relative; width: 100%; background-repeat: no-repeat; background-position: 50% 50%; background-size: cover; }
.service-item-image-referral:before {content: ""; display: block; padding-top: 70%;}
.service-item-image-inner-referral {position: absolute; top: 0; left: 0; right: 0; bottom: 0;}
.service-item-image-referral img {visibility: hidden; max-width: 100%; height: 100%;}

.service-item-name-referral {
    font-size: 20px;
    color: black;
    font-family: 'proxima_novabold';
    text-align: center;
}
.service-item-short-desc-referral {
    font-family: 'proxima_nova_rgregular';
    font-size: 15px;
    line-height: 1.5em;
    color: #000;
    text-align: center;
}


@media all and (max-width: 1000px) {
	.article-content-title {font-size: 24px;}
	.article-content-category {font-size: 14px;}
}

@media all and (max-width: 900px) {
	.article-item {width: 50%; }
	.article-content-title {font-size: 21px;}
	.article-content-category {font-size: 12px;}
}


@media all and (max-width: 800px) {

    .referral-text {
        padding-right: 10%;
        font-size: 16px;
    }

    .button-refer{
        top: 30px;
        
    }

    .service-item-name-referral {
        font-size: 20px;
    }

    .service-item-short-desc-referral {
        font-size: 13px;
    }

    .section{
        padding-left:5%;
        padding-right:5%;
    }
}

@media all and (max-width: 600px) {
    .article-item {width: 100%!important;}
    .header-referral-left{width: 100%!important;}
    .header-referral-right{width: 100%!important;}
    .test-referral{width: 100%!important;}
    .image-referral{    
        padding-left: 5%;
        padding-right: 5%;
        width:100%;
    }
    .header-referral{height:600px!important; }
	.article-content-title {font-size: 28px;}
    .article-content-category {font-size: 18px;}
    
    .service-item-referral{
        width:100%;  
    }	

    .title-referral{
        padding-left: 5%;
        padding-right: 5%;
        font-size: 26px;
    }

    .referral-bold-text{
        padding-left: 5%;
        padding-right: 5%;
    }

    .referral-text{
        padding-left: 5%;
        padding-right: 5%;
    }

    .button-refer{
        top: 30px;
        margin-left: 15px;
        padding: 8px 30px 8px 30px;
        display: inline-block;
        background-color: #d9a300;
        font-family: 'proxima_novasemibold';
        color: #FFF;
        font-size: 13px;
        position: relative;
    }

    .referral-how-it-works {
        font-size: 20px;
    }

    .referral-short-desc {
        font-size: 14px;
       
    }
    .section{
        padding-bottom: 5%;
    }
}