/*////////////////////////////////////////////
//// BEGIN: Services Page
////////////////////////////////////////////*/

/* BEGIN: Services Grid
----------------------------------- */
.page-services {
	overflow: hidden;
}

.service-grid  {
	position: relative;
	z-index: 1;
}

.service-grid .animation-box {
	display: none;
	position: absolute;
	width: 33.33%;
    height: 50vh;
    background: url('../images/services/services_tile-background.avif') repeat center / 53px #292929;
}

.service-grid .animation-box.active {
	display: block;
    top: 0;
    left: 0;
}

.service-grid .counter li.tile:before {
	top: 5%;
    left: 5%;
}

.service-grid li.tile .work-title {
	margin-top: 1.3%;

}

.service-grid .carousel-container .arrow {
	visibility: hidden;
}

.service-grid li.tile {
	display: block;
	position: absolute;
	top: 0; 
	left: 0;
	width: 33.33%;
	height: 50%;
	overflow: auto;
	visibility: hidden;
	overflow: hidden;
}

.service-grid li.tile.ready {
	visibility: visible;
}

.service-grid li.tile.active {
	border: 0 none transparent;
	z-index: 99;
	overflow: auto;
}

.service-grid li.tile.active .tile-images {
	display: none;
}

.service-grid .counter {
	overflow: hidden;
}

.service-grid .counter:after {
	content: " ";
	display: block;
	width: 100%;
	clear: both;
}

.service-grid li.tile .work-title a {
	display: inline;
	padding-bottom: 5px;
	border-bottom: 2px solid #FF5E5E;
	color: #FF5E5E;
}

.service-grid li.tile:hover * {
	color: #333;
}

.service-grid li.tile.active {
	background: url('../images/services/services_tile-background.avif') repeat center / 53px #292929;
}

.service-grid li.tile.active *,
.service-grid.tiles li.tile.active:before {
	color: #fff;
}

.service-grid li.tile .service-content {
/*	padding-top: 12.5%; */
	padding-left: 5%;
}

.service-grid li.tile.active .learn-more {
	display: none;
}

.service-grid li.tile.active .work-information {
	display: block;
	margin-top: 6.5%;
}

.service-grid li.tile .close-button {
	display: none;
	position: absolute;
	top: 5%;
	right: 5%;
	width: auto;
	height: auto;
	color: #FF5E5E;
}

.desktop .service-grid li.tile.active .close-button {
	display: block;
}

.service-grid li.tile.active .close-button span {
	float: left;
}

.service-grid li.tile.active .close-button img {
    display: inline-block;
    vertical-align: top;
    margin-left: 10px;
    float: right;
}

/*////////////////////////////////////////////
//// BEGIN: Media Queries
////////////////////////////////////////////*/

/* BEGIN: Mobile + iPad: Portrait */
@media only screen and (max-width: 767px),
(min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
	
	/* BEGIN: Services */
	.page-services .site-wrapper {
		height: 100%;
	}
	
	.page-services .site-wrapper .service-grid {
		height: 100%;
	}
	
	.page-services .site-wrapper .service-grid .counter {
		height: 100%;
	}
	
	.service-grid li.tile {
		position: absolute;
		width: 100%;
		height: 100%;
		background: none;
		border: none;
		z-index: 1;
	}
	
	.service-grid li.tile.first {
		position: relative;
	}

	.service-grid li.tile .service-content .work-short-description {
		opacity: 0;
		display: none;
	}
	
	.service-grid li.tile.active .service-content .close-button {
		display: block;
	}
	
	.service-grid .carousel-container {
		position: relative;
		width: 100%;
		height: 90%;
	}
	
	.service-grid .carousel-container .arrow {
		display: table;
		position: absolute;
		top: 0;
		width: 9%;
		height: 100%;
		z-index: 5;
	}
	
	.mobile .service-grid .carousel-container .arrow {
		visibility: visible;
	}
	
	.service-grid .carousel-container .arrow a {
		display: table-cell;
		padding: 0 5px;
		vertical-align: middle;
	}
	
	.service-grid .carousel-container .arrow a svg {
		width: 100%;
		height: auto;
	}
	
	.service-grid .carousel-container .arrow.next {
		left: 0;
		right: auto;
	}
	
	.service-grid .carousel-container .arrow.prev {
		left: auto;
		right: 0;
	}
	
	.page-services .service-grid .carousel-dot-nav {
		display: table;
		height: 10%;
		width: 100%;
	}
	
	.service-grid .carousel-dot-nav li {
		display: table-cell;
		list-style: none;
		width: 16.66%;
		height: 100%;
		text-align: center;
		vertical-align: middle;
	}
	.service-grid .carousel-dot-nav li a {
		color: #333;
		padding-bottom: 5px;
		border-bottom: 2px solid transparent;
	}
	
	.service-grid .carousel-dot-nav li.active a {
		color: #FF5E5E;
    	border-bottom: 2px solid #FF5E5E;
	}
}

/* BEGIN: Mobile Landscape */
@media only screen and (max-device-width: 767px) and (orientation: landscape),
(max-width: 767px) and (orientation: landscape) {
	
	.service-grid .counter li.tile:before {
		margin: 4% 5% 4% 10%;
	}
	
	.service-grid li.tile .service-content {
		padding-left: 10%;
	}
	
	.service-grid li.tile.active .service-content * {
		color: #fff;
	}
	
	.service-grid li.tile .service-content * {
	
	}
	
	.service-grid .carousel-container .arrow {
		height: auto;
		min-height: 100vh;
	}

}
/* FIN */