/*========================
Call To Action
========================*/

#call-to-action { /*padding:2%; */background: #eeeeee; }
#call-to-action a img, .services-links a img { max-width: 189px; border-top-left-radius: 5px; border-bottom-left-radius: 5px;}
#call-to-action .span_1_of_3 a, #call-to-action .span_1_of_2 a { position: relative; display: block; width:100%; }
#call-to-action .span_1_of_3 img, #call-to-action .span_1_of_2 img { position: absolute; }

.arrow-image { top: 0; left: 0; }
.service-arrow { float: left; width: 100%; max-width: 255px !important; top: -1px !important; right: 0; }

/*.chevron {
	display: block;
	float: left;
	background: #3498db;
	text-align: center;
	position: relative;
	font-size: 20px;
	text-decoration: none;
	color: #fff;
	border-top-right-radius: 5px;
	border-bottom-right-radius: 5px;
}


.chevron:before {display: none;}


.chevron {    
	position: absolute;
    right: 40px;
    width: 42%;
    height: 128px; 
    padding: 0; 
    margin:0;
}


.chevron:after {content: "";
    border-top: 64px solid transparent;
    border-bottom: 64px solid transparent;
    border-left: 40px solid #3498db;
    position: absolute;
    right: -38px;
    top: 0;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}
*/
   

/*
    .text-content:before {
    content: '';
    width: 0;
    position: absolute;
    height: 0;
    border-top: 100px solid #3498db;
    top: 0;
    border-left: 100px solid transparent;
    left: 85px; 
}

 
.text-content:after {
    content: '';
    width: 0;
    position: absolute;
	width: 0;
	height: 0;
	border-bottom: 100px solid #3498db;
	border-left: 100px solid transparent;    
	left: 85px; 
	bottom:0;
}*/

 .text-content {position: relative;
    width: 200px;
    min-height: 128px;
    float: right;
    padding-left: 2%;
}

.text-content .find-out-more {font-weight: bold;}
/*#call-to-action { height: 500px; }*/

/*#call-to-action a img, .services-links a img {max-width: 189px;}*/

.text-content p { color: #d5dae0; /*padding-left: 156px;*/ position: relative; z-index: 10; padding-top: 0; font-size: 14px; }
.text-content p img { float: left; width: 10px; position: static !important; margin-right: 6px; border-radius: 0px; margin-top: -2px; }
.text-content .call-title { font-size: 32px; padding-bottom: 0; padding-top: 22px; color: #FFF; font-family: din_next; }




/* Service Links - Side Bar */
.service-buttons { float: left; width: 100%; }
.service-buttons a { position: relative; display: block; width:100%; margin-bottom: 10px; float: left; }
.service-buttons img {position: absolute; top:0; /*left:0;*/}

.service-buttons a .arrow-image { max-width: 164px; }
.service-buttons a .service-arrow { max-width: 222px !important; }
.service-buttons a .chevron { width:60%; }
/*.service-buttons a .text-content p { padding-left: 113px; }*/
.service-buttons a .text-content { width: 180px; }
.service-buttons a .text-content .call-title { font-size: 25px; }
.service-buttons a .text-content:before { left:20px; }
.service-buttons a .text-content:after { left:20px; }





/* Colour Background */

.call-pink .chevron { background:#f05871; }
.call-pink .chevron:after { border-left: 40px solid #f05871; }
.call-pink .text-content:before {border-top: 100px solid #f05871; }
.call-pink .text-content:after { border-bottom: 100px solid #f05871; }


.call-green .chevron { background:#62ba56; }
.call-green .chevron:after { border-left: 40px solid #62ba56; }
.call-green .text-content:before {border-top: 100px solid #62ba56; }
.call-green .text-content:after { border-bottom: 100px solid #62ba56; }

.call-turq .chevron { background:#00a5ab; }
.call-turq .chevron:after { border-left: 40px solid #00a5ab; }
.call-turq .text-content:before {border-top: 100px solid #00a5ab; }
.call-turq .text-content:after { border-bottom: 100px solid #00a5ab; }

.call-dark-blue .chevron { background:#016780; }
.call-dark-blue .chevron:after { border-left: 40px solid #016780; }
.call-dark-blue .text-content:before {border-top: 100px solid #016780; }
.call-dark-blue .text-content:after { border-bottom: 100px solid #016780; }

.call-orange .chevron { background:#f68a49; }
.call-orange .chevron:after { border-left: 40px solid #f68a49; }
.call-orange .text-content:before {border-top: 100px solid #f68a49; }
.call-orange .text-content:after { border-bottom: 100px solid #f68a49; }

.call-purple .chevron { background:#8c62a4; }
.call-purple .chevron:after { border-left: 40px solid #8c62a4; }
.call-purple .text-content:before {border-top: 100px solid #8c62a4; }
.call-purple .text-content:after { border-bottom: 100px solid #8c62a4; }



.chevron, .chevron:after, .chevron:before, #call-to-action .span_1_of_3 a img
{-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;}










/* =======================================
 @ 378
======================================= */
@media only screen and (min-width:378px) {

.text-content { width:59%; }


}






/* =======================================
 @ 400
======================================= */
@media only screen and (min-width:400px) {

.chevron { width: 46%; }
.service-buttons a .chevron { width:63%; }


}





/* =======================================
 @ 417
======================================= */
@media only screen and (min-width:417px) {

#call-to-action .text-content { width:55%; }


}





/* =======================================
 @ 440
======================================= */
@media only screen and (min-width:440px) {

#call-to-action a { max-width: 330px; margin:0 auto; }
.service-buttons a { max-width: 337px; margin:0 auto;  }

#call-to-action .text-content { width:61%; }

}






/* =======================================
 @ 470
======================================= */
@media only screen and (min-width:470px) {

.chevron { width: 55%; }

/*.service-buttons a .text-content p { padding-left: 151px; }*/
.service-buttons a .chevron { width:61%; }
.service-buttons a .text-content:before { left:60px; }
.service-buttons a .text-content:after { left:60px; }





}


/* =======================================
 @ 500
======================================= */
@media only screen and (min-width:500px) {

.chevron { width: 61%; }
.text-content p { /*padding-left: 181px;*/ /*font-size: 17px;*/ }
.text-content p img { margin-top: 0px; }


.service-buttons a .chevron { width:65%; }


}


/* =======================================
 @ 550
======================================= */
@media only screen and (min-width:550px) {


/*.service-buttons a .chevron { width:65%; }*/


}



/* =======================================
 @ 600
======================================= */
@media only screen and (min-width:600px) {

.chevron { width: 70%; }

.service-buttons a { width:50%; float: left; }
/*.service-buttons a .text-content p { padding-left: 90px;  }*/
.service-buttons a .text-content .find-out-more { padding-right: 10px; font-size: 13px; }
.service-buttons a .text-content p img { margin-top: -3px; }
.service-buttons a .text-content:before { left:0px; }
.service-buttons a .text-content:after { left:0px; }
.service-buttons a .chevron { width: 61%; }


}



/* =======================================
 @ 650
======================================= */
@media only screen and (min-width:600px) {

.chevron { width: 70%; }


}



/* =======================================
 @ 700
======================================= */
@media only screen and (min-width:700px) {

.service-buttons a .chevron { width: 67%; }


}



/* =======================================
 @ 771
======================================= */
@media only screen and (min-width:771px) {

.chevron { width: 52%; }
.text-content:before { left:15px; }
.text-content:after { left:15px; }
.text-content .call-title { font-size: 25px; }
.text-content { width: 78%; }
.text-content p { /*padding-left: 85px;*/ font-size: 14px; }
.text-content .find-out-more { padding-right: 30px; line-height: 1em; }


/*.service-buttons a .text-content p { padding-left: 110px;  }*/
.service-buttons a:nth-child(even) { float: right !important; }
.service-buttons a .text-content:before { left:20px; }
.service-buttons a .text-content:after { left:20px; }
.service-buttons a .chevron { width: 64%; }
.service-buttons a .text-content .call-title { font-size: 23px; }

#call-to-action a {  width: 100%; overflow: hidden; }
.service-buttons a .arrow-image { max-width: 164px !important; }


}



/* =======================================
 @ 773
======================================= */
@media only screen and (min-width:773px) {

#call-to-action a { max-width: none; float: left; width: 100%; overflow: hidden; }
#call-to-action a .arrow-image { max-width:178px !important; }
#call-to-action a .service-arrow { max-width: 240px !important; }
.arrow-image { max-width:170px !important; }
#call-to-action a .text-content { width: 78%; }

}








/* =======================================
 @ 800
======================================= */
@media only screen and (min-width:800px) {

.arrow-image { max-width:177px !important; }

}




/* =======================================
 @ 830
======================================= */
@media only screen and (min-width:830px) {

.arrow-image { max-width:177px !important; }
#call-to-action a .text-content { width: 71%; }

}






/* =======================================
 @ 866
======================================= */
@media only screen and (min-width:866px) {

.arrow-image { max-width:189px !important; }

}







/* =======================================
 @ 900
======================================= */
@media only screen and (min-width:900px) {

/*.service-buttons a .text-content p { padding-left: 130px;  }*/
.service-buttons a .text-content:before { left:50px; }
.service-buttons a .text-content:after { left:50px; }
.service-buttons a .chevron { width: 59%; }


#call-to-action a .text-content { width: 66%; }


}







/* =======================================
 @ 1000
======================================= */
@media only screen and (min-width:1000px) {

.text-content { width: 68%; }
.text-content p { /*padding-left: 115px; */font-size: 16px; }
.text-content p img { margin-top: -2px; }
.text-content:before { left:35px; }
.text-content:after { left:35px; }



.service-buttons a { width:100%; float: none; }
/*.service-buttons a .text-content p { padding-left: 100px;  }*/
.service-buttons a .text-content:before { left:20px; }
.service-buttons a .text-content:after { left:20px; }
.service-buttons a .chevron { width: 52%; }

#call-to-action a .text-content .find-out-more { padding-right: 0; }
#call-to-action a .text-content { width: 200px; }


}



/* =======================================
 @ 1150
======================================= */
@media only screen and (min-width:1150px) {

.chevron { width: 59%; }
.service-buttons a .chevron { width: 55%; }
.text-content { width: 55%; }
.service-buttons a .text-content { width: 61%; }


}


/* =======================================
 @ 1200
======================================= */
@media only screen and (min-width:1200px) {

.text-content .call-title { font-size: 30px; }
#call-to-action a img, .services-links a img {max-width: 189px;}
.service-buttons a .text-content { width: 56%; }
/*.service-buttons a .text-content .call-title { font-size: 24px !important; }*/


#call-to-action a .text-content { width: 214px; }
#call-to-action a .arrow-image { max-width:190px !important; }
#call-to-action a .service-arrow { max-width: 255px !important; }






}

/* =======================================
 @ 1300
======================================= */
@media only screen and (min-width:1150px) {

.chevron { width: 50%; }
.text-content p { /*padding-left: 170px;*/ font-size: 16px; }
.text-content:before { left:85px; }
.text-content:after { left:85px; }


}