/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.4.14,
* Autoprefixer: v10.4.7
* Browsers: last 4 version
*/

/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.3.6,
* Autoprefixer: v10.3.1
* Browsers: last 4 version
*/

.preventload{
display: block; /* allows for loading of this div after the fold has loaded */
}


.homeservices {
padding-top: 70px;
padding-bottom: 70px;
}

.servicescontainer {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
    flex-wrap: wrap;
-webkit-box-pack: center;
    -ms-flex-pack: center;
        justify-content: center;
}

.servicebox {
overflow: hidden;
border-radius: 10px;
-webkit-box-shadow: 0 0 20px rgba(0,0,0,.1);
        box-shadow: 0 0 20px rgba(0,0,0,.1);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
    -ms-flex-direction: column;
        flex-direction: column;
width: 300px;
margin: 20px;
}

.serviceboxcontent {
-webkit-box-flex: 1;
    -ms-flex: 1;
        flex: 1;
text-align: center;
padding: 30px;
}

.serviceboximage {
-webkit-box-flex: 0;
    -ms-flex: none;
        flex: none;
height: 150px;
background-size: cover;
background-position: center center;
position: relative;
overflow: hidden;
}

.serviceboxtitle {
font-size: 18px;
margin-bottom: 30px;
font-weight: 700;
}

a.servicebox:link, a.servicebox:visited, a.servicebox:active {
color: #444;
}

.serviceboxshade {	
height: 150px;
width: 100%;
background-color: rgba(0,0,0,0);
position: absolute;
top: 0;
left: 0;
opacity: 0;
-webkit-transition: all .3s ease;
-o-transition: all .3s ease;
transition: all .3s ease;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}

a.servicebox:hover .serviceboxshade {
background-color: rgba(0,0,0,.55);
opacity: 1;
}

.serviceboxshadecontent {
margin: auto;
text-align: center;
}

.servicearrow {
background-color: rgba(0,0,0,.55);
position: absolute;
top: -50px;
right: -50px;
height: 100px;
width: 100px;
-webkit-transition: all .3s ease;
-o-transition: all .3s ease;
transition: all .3s ease;
-webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
        transform: rotate(45deg);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
color: white;
-webkit-box-align: end;
    -ms-flex-align: end;
        align-items: flex-end;
-webkit-box-pack: center;
    -ms-flex-pack: center;
        justify-content: center;
opacity: 1;
}

.servicearrow i{
color: white;
font-size: 20px;
margin-bottom: 10px;
}

a.servicebox:hover .servicearrow{
opacity: 0;
}

.serviceboxshadecontent .serviceboxtitle {
color: white;
margin-bottom: 5px;
}

.serviceboxdot {
display: inline-block;
height: 8px;
width: 8px;
border-radius: 50%;
background-color: white;
margin: 0 5px;
}

.serviceboxbutton {
display: none;
margin-top: 30px;
color: white;
font-weight: 700;
padding: 10px 20px;
border-radius: 4px;
}

.serviceboxbutton.notopmargin {
margin-top: 0;
}

@media (max-width: 767px) {

	a.servicebox {
	pointer-events: none;
	}

	.serviceboxbutton {
	display: inline-block;
	pointer-events: auto;
	}

	a.servicebox:hover .serviceboxshade {
	background-color: rgba(0,0,0,0);
	opacity: 0;
	}

	.servicescontainer {
	display: block;	
	}

	.servicescontainer .servicebox {
	margin: 30px auto;
	width: 400px;
	}

	.servicescontainer .servicebox:last-child {
	margin-bottom: 20px;
	}

	.serviceboximage {
	height: 200px;
	}

	.servicearrow {
	display: none;
	}

}

@media (max-width: 480px) {

	.servicescontainer .servicebox {	
	width: 100%;
	}

	.serviceboximage {
	height: 150px;
	}

}


.seeallservices {
text-align: center;
}

.seeallservicesbutton {
margin-top: 30px;
cursor: pointer;
font-weight: 700;
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */ /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Opera and Firefox */
position: relative;
display: inline-block;
}


.allservices{
background-color: #4c4c4c;
background-image: url(../../../images/Templates/hexagon10.png);
height: 0;
-webkit-transition: all .3s ease;
-o-transition: all .3s ease;
transition: all .3s ease;
overflow: hidden;
position: relative;
width: 100%;
margin: 0 auto;
text-align: center;
top: 70px;
display: inline-block;
}

.allservices.nowopen {
margin-top: -20px;
}

.allservicescontainer {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
    flex-wrap: wrap;
-webkit-box-pack: start;
    -ms-flex-pack: start;
        justify-content: flex-start;
padding: 50px 0 50px 0;
max-width: 900px;
margin: 0 auto;
}

.allservices a.serviceheading, .allservices .serviceheading {
width: 250px;
margin: 0 25px;
color: white;
padding: 5px 0;
font-weight: 400;
font-size: 14px;
}

.glyphiconspacer {
width: 14px;
display: inline-block;
}

.allservices a.serviceheading:hover {
color: #c2c2c2;
}

.seeallservicesbutton .glyphicon {
font-size: 18px;
position: relative;
top: 4px;
}

.closeme, .openme {
display: inline-block;
display: none;
}

.closeme.nowopen {
display: inline-block;;
}

.openme.nowopen {
display: inline-block;;
}

@media (max-width: 992px) { 

	.allservicescontainer {
	max-width: 600px;
	}	

}

@media (max-width: 767px) { 

	.allservicescontainer {
	max-width: 300px;
	}	

}

@media (max-width: 480px) { 

	.allservicescontainer {
	width: 100%;
	}	

}