﻿.paragraph {
    margin-bottom: 0px;
}
.paragraph.trapezoid {
    margin-bottom: 40px;
}

#page-side #icon {
	position:relative;
	width:100%;
	padding-top:80%;
	overflow:hidden;
}
#page-side #icon img {
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%, -50%);
}

#icons-title {
	text-transform:uppercase;
	font-size:20px;
	font-weight:200;
	padding-bottom:10px;
	margin-top:80px;
	margin-bottom: 10px;
	border-bottom:solid 1px #e8e8e8;
}
#icons .service-item a {
	font-size:11px;
}

.service-timeline{
	border-top:solid 20px #043f75;
	margin-bottom: 80px;
}
.service-timeline a{
	color:#adcad6;
}
.service-timeline a:hover{
	color:#fff;
	text-decoration:underline;
}

.service-timeline .thumb img {
	max-width:80%;
	height:auto;
}

.service-timeline .viewport .viewport-item {
	display:inline-block;
	width:500px;
	height:265px;
	background-color:aqua;
	opacity:0.5;
}

.service-timeline .viewport a {
	position:relative;
	display:inline-block;
	-webkit-transition: all 300ms ease;
	-moz-transition: all 300ms ease;
	-ms-transition: all 300ms ease;
	-o-transition: all 300ms ease;
	transition: all 500ms ease;
	opacity:0.6;
}
.service-timeline .viewport a:hover {
	opacity:1;
	background-color:rgba(255, 255, 255, 0.4);
}
.service-timeline .viewport a .label {
	z-index:10;
	position:absolute;
	bottom:-10%;
	left:50%;
	transform:translateX(-50%);
	background-color:#043f75;
	color:#fff;
	padding:6px;
	font-size:14px;
	font-weight:200;
	-webkit-transition: all 300ms ease;
	-moz-transition: all 300ms ease;
	-ms-transition: all 300ms ease;
	-o-transition: all 300ms ease;
	transition: all 500ms ease;
	opacity:0;
}
.service-timeline .viewport a:hover .label {
	bottom:10%;
	opacity:1;
}
