/*******************************************/
/*******************************************/
/********ONLY FOR DESIGN PAGE***************/
/*******************************************/
/*******************************************/

/*-------------------*
.serviceBox{
    text-align: center;
    margin-top: 20px;
    padding: 0 15px;
}
.serviceBox .service-icon{
    width: 80px;
    height: 80px;
    line-height: 80px;
    display: inline-block;
    font-size: 35px;
    color: #c3ee0d;
    border: 1px solid #e1e1e1;
    margin-bottom: 35px;
    position: relative;
    transform: rotate(-45deg);
    transition: all 0.3s ease 0s;
}
.serviceBox:hover .service-icon{
    background: #c3ee0d;
    color: #717477;
    border-color: #c3ee0d;
}
.serviceBox .service-icon:after{
    content: "";
    width: 100%;
    height: 100%;
    box-shadow: 0 0 0 3px #e1e1e1;
    position: absolute;
    top: -5px;
    left: -5px;
    opacity: 0;
    padding: 5px;
    transform: scale(1.2);
    box-sizing: content-box;
    transition: all 0.2s ease 0s;
}
.serviceBox:hover .service-icon:after{
    transform: scale(1);
    opacity: 1;
}
.serviceBox .service-icon i{
    transform: rotate(45deg);
}
.serviceBox .title{
    font-size: 22px;
    color: #000;
    margin: 0 0 15px;
}
.serviceBox .description{
    font-size: 15px;
    color: #343434;
    line-height: 23px;
}
@media only screen and (max-width: 990px){
    .serviceBox{ margin-bottom: 20px; }
}
*/

.serviceBox{
    text-align:center;
}
.serviceBox .service-icon::before{
    right: 79px;
    top: 33px;
}
.serviceBox .service-icon::after {
    left:79px;
    top:33px;
}
/*.serviceBox .service-icon::before, .serviceBox .service-icon::after {
    background: hsl(0, 0%, 100%) none repeat scroll 0 0;
    border-bottom: 1px solid hsl(212, 16%, 61%);
    border-top: 1px solid hsl(212, 16%, 61%);
    content: " ";
    height: 14px;
    position: absolute;
    transition: all 0.4s ease 0s;
    width: 45px;
}*/
.serviceBox .service-icon::before, .serviceBox .service-icon::after {
    background: hsl(0, 0%, 100%) none repeat scroll 0 0;
    border-bottom: 1px solid #ab7dfd ;
    border-top: 1px solid #ab7dfd ;
    content: " ";
    height: 14px;
    position: absolute;
    transition: all 0.4s ease 0s;
    width: 45px;
	box-shadow:0 .5rem 1rem rgba(0,0,0,.15);
	-moz-box-shadow:0 .5rem 1rem rgba(0,0,0,.15);
	-o-box-shadow:0 .5rem 1rem rgba(0,0,0,.15);
}
.serviceBox .service-icon {
    background: hsl(0, 0%, 100%) none repeat scroll 0 0;
    border: 1px solid #ab7dfd;
    border-radius: 82px;
    display: inline-block;
    height: 82px;
    line-height: 90px;
    margin-bottom: 20px;
    position: relative;
    transition: all 0.4s ease 0s;
    width: 82px;
    text-align: center;
}
.serviceBox .service-icon i{
    color:#ab7dfd;
    font-size:30px;
    transition: all 0.4s ease 0s;
}
.serviceBox .service-content h3 {
    color:#000d4ae6;
    font-size: 21px;
    line-height: 1.2;
    margin-bottom: 20px;
    margin-top: 0;
}
.serviceBox .service-content p {
    color: hsl(212, 16%, 61%);
    font-size: 12.5px;
    line-height: 25px;
    margin: 0;
    padding: 0 15px;
}
.serviceBox:hover .service-icon::before, .serviceBox:hover .service-icon::after, .serviceBox:hover .service-icon{
    border-color:#9708CCD1;
}
.serviceBox:hover .service-icon i{
    color: #9708CCD1;
    transition: all 0.4s ease 0s;
	transform:rotateY(-360deg);
	
}
.thumbnail > img{
	height:100px;
	width:150px;
	object-fit:contain;
	
}

/*========================MEDIA SLIDER==============*/

/*.carousel {
    margin-bottom: 0;
    padding: 0 40px 30px 40px;
}*/
.carousel {
    margin-bottom: 0;
   
}
/* The controlsy */
.carousel-control {
	left: -12px;
    height: 40px;
	width: 40px;
    background: none repeat scroll 0 0 #222222;
    border: 4px solid #FFFFFF;
    border-radius: 23px 23px 23px 23px;
    margin-top: 60px;
}
.carousel-control.right {
	right: -12px;
}
/* The indicators */
.carousel-indicators {
	right: 50%;
	top: auto;
	bottom: 20px;
	margin-right: -19px;
}
/* The colour of the indicators */
.carousel-indicators li {
	background: #cecece;
}
.carousel-indicators .active {
background: #428bca;
}
/*==============MEDIA SLIDER END==================*/

@media only screen and (max-width: 900px){
    .serviceBox{
        margin-bottom: 20px;
    }
.thumbnail > img{
	height:75px;
	width:110px;
	object-fit:contain;
}
}