/*

Colour Schemes: 
NavBar: #22252b;
Dark: #31363f;

Darkturquoise: #00ced1;



*/

@font-face {
	font-family: 'icomoon';
	src: url('fonts/icomoon.eot?24iwah');
	src: url('fonts/icomoon.eot?24iwah#iefix') format('embedded-opentype'),
		url('fonts/icomoon.ttf?24iwah') format('truetype'),
		url('fonts/icomoon.woff?24iwah') format('woff'),
		url('fonts/icomoon.svg?24iwah#icomoon') format('svg');
	font-weight: normal;
	font-style: normal;
}
#keyboard-shortcut {
	background: #f6fafd;
    display: block;
    height: 48px;
    padding: 8px;
    width: 80%;
    margin: auto;
}
#keyboard-shortcut:after{
	clear: both;
} 
#key-column {
	float: left;
}
#text-column {
	float: left;
}


#keyboard-shortcut ul {-moz-column-count: 4;
    -moz-column-gap: 20px;
    -webkit-column-count: 4;
    -webkit-column-gap: 20px;
    column-count: 4;
    column-gap: 20px;}



.wkey {
	display: block;
	height: 33px;
	width: 33px;
	background: url(../images/wkey3.svg) no-repeat center;
}

#page-loader {


	position: fixed;
	z-index: 8;
	opacity: 1;
	width: 100%;
	height: 100%;
	background: white;
	top: 0;
	left: 0;
	animation: loader-background 2s forwards;
	



}

@keyframes loader-background {
	
	
	0% {
		
		opacity: 1;
		z-index: 8;
	}
	
	50% {
		
		opacity: 1;
		
	}
	
	100% {
		
		
		opacity: 0;
		z-index: -1;
	}
}

#page-loader:after {

	position: absolute;
	height: 200px;
	width: 200px;
	z-index: 8;
	opacity: 1;
	background: url(../images/svg/logo-loader.svg) center no-repeat;
	content: '';
	top: 50%;
	left: 50%;
	margin-top: -100px;
	margin-left: -100px;
	animation: loader-background 1s forwards;

}

#page-loader.fadeout {

	animation: fadein 0.3s forwards;

}

#page-loader.fadeout:after {

	animation: fadein 0.3s forwards;
	animation-delay: 0.3s;
}

#page-body {

	opacity: 1;

}

#page-body.fadeout {

	animation: fadeout 0.3s forwards;

}



@keyframes fadein {

	0% {

		opacity: 0;
		z-index: 8;
	}

	100% {

		opacity: 1;
		z-index: 8
	}

}



.dot {

	fill: #00ced1;

}

.cell:nth-child(1) {

	animation: fadeinrow 1s forwards;

}

.cell:nth-child(2) {

	animation: fadeinrow 1.3s forwards;

}

.cell:nth-child(3) {

	animation: fadeinrow 1.6s forwards;

}

.cell:nth-child(4) {

	animation: fadeinrow 1.9s forwards;

}




#hero-lines #cline {

	animation: hero-dots-anim 10s forwards;


}















#header-logo #dt1 {

	animation: pulsejam2 3s infinite;
	animation-delay: 2s;
}

#header-logo #dt2 {

	animation: pulsejam2 3s infinite;
	animation-delay: 2.1s;
}

#header-logo #dt3 {

	animation: pulsejam2 3s infinite;
	animation-delay: 2.2s;
}

#header-logo #dt4 {

	animation: pulsejam2 3s infinite;
	animation-delay: 2.3s;
}

#header-logo #dt5 {

	animation: pulsejam2 3s infinite;
	animation-delay: 2.4s;
}

#header-logo #dt6 {

	animation: pulsejam2 3s infinite;
	animation-delay: 2.5s;
}

#header-logo #dt7 {

	animation: pulsejam2 3s infinite;
	animation-delay: 2.6s;
}

#header-logo #dt8 {

	animation: pulsejam2 3s infinite;
	animation-delay: 2.7s;
}

#header-logo #dt9 {

	animation: pulsejam2 3s infinite;
	animation-delay: 2.8s;
}

#header-logo #dt10 {

	animation: pulsejam2 3s infinite;
	animation-delay: 2.9s;
}

#header-logo #dt11 {

	animation: pulsejam2 3s infinite;
	animation-delay: 3.0s;
}

#header-logo #dt12 {

	animation: pulsejam2 3s infinite;
	animation-delay: 3.1s;
}

#header-logo #dt13 {

	animation: pulsejam2 3s infinite;
	animation-delay: 3.2s;
}

#header-logo #dt14 {

	animation: pulsejam2 3s infinite;
	animation-delay: 3.3s;
}

#header-logo #dt15 {

	animation: pulsejam2 3s infinite;
	animation-delay: 3.4s;
}

#header-logo #dt16 {

	animation: pulsejam2 3s infinite;
	animation-delay: 3.5s;
}

#header-logo #dt17 {

	animation: pulsejam2 3s infinite;
	animation-delay: 3.6s;
}

#header-logo #dt18 {

	animation: pulsejam2 3s infinite;
	animation-delay: 3.7s;
}

#header-logo #lines {

	animation: pulsejam2 3s infinite;
	animation-delay: 3.7s;
}



@keyframes pulsejam2 {
	0% {
		opacity: 1;
	}

	50% {

		opacity: 0.2;
	}

	100% {
		opacity: 1;
	}
}




.wordr:nth-child(1) {


	animation: monkey 5s forwards, shine 15s infinite;
	animation-delay: 0s, 5s;


}


@keyframes shine {
	0% {

		opacity: 1;

	}

	48% {

		opacity: 1;
		fill: white;
	}

	50% {
		opacity: 0.5;

	}

	52% {

		opacity: 1;
		fill: white;
	}

	100% {
		opacity: 1;
	}
}


.wordr:nth-child(2) {


	animation: monkey 5.1s forwards, shine 15s infinite;
	animation-delay: 0s, 5.1s;
}

.wordr:nth-child(3) {


	animation: monkey 5.2s forwards, shine 15s infinite;
	animation-delay: 0s, 5.2s;
}

.wordr:nth-child(4) {


	animation: monkey 5.3s forwards, shine 15s infinite;
	animation-delay: 0s, 5.3s;
}

.wordr:nth-child(5) {


	animation: monkey 5.4s forwards, shine 15s infinite;
	animation-delay: 0s, 5.4s;

}

.wordr:nth-child(6) {


	animation: monkey 5.5s forwards, shine 15s infinite;
	animation-delay: 0s, 5.5s;

}

.wordr:nth-child(7) {


	animation: monkey 5.6s forwards, shine 15s infinite;
	animation-delay: 0s, 5.6s;

}

.wordr:nth-child(8) {


	animation: monkey 5.7s forwards, shine 15s infinite;
	animation-delay: 0s, 5.7s;

}

.wordr:nth-child(9) {


	animation: monkey 5.8s forwards, shine 15s infinite;
	animation-delay: 0s, 5.8s;

}

.wordr:nth-child(10) {


	animation: monkey 5.9s forwards, shine 15s infinite;
	animation-delay: 0s, 5.9s;

}

.wordr:nth-child(11) {


	animation: monkey 6s forwards, shine 15s infinite;
	animation-delay: 0s, 6s;

}

.wordr:nth-child(12) {


	animation: monkey 6.1s forwards, shine 15s infinite;
	animation-delay: 0s, 6.1s;

}

.wordr:nth-child(13) {


	animation: monkey 6.2s forwards, shine 15s infinite;
	animation-delay: 0s, 6.2s;

}

.wordr:nth-child(14) {


	animation: monkey 6.3s forwards, shine 15s infinite;
	animation-delay: 0s, 6.3s;

}

.wordr:nth-child(15) {


	animation: monkey 6.4s forwards, shine 15s infinite;
	animation-delay: 0s, 6.4s;

}

.wordr:nth-child(16) {


	animation: monkey 6.5s forwards, shine 15s infinite;
	animation-delay: 0s, 6.5s;

}

.wordr:nth-child(17) {


	animation: monkey 6.6s forwards, shine 15s infinite;
	animation-delay: 0s, 6.6s;
}

.wordr:nth-child(18) {


	animation: monkey 6.7s forwards, shine 15s infinite;
	animation-delay: 0s, 6.6s;

}

.wordr:nth-child(19) {


	animation: monkey 6.8s forwards, shine 15s infinite;
	animation-delay: 0s, 6.8s;

}

.wordr:nth-child(20) {


	animation: monkey 6.9s forwards, shine 15s infinite;
	animation-delay: 0s, 6.9s;

}

.wordr:nth-child(21) {


	animation: monkey 7.0s forwards, shine 15s infinite;
	animation-delay: 0s, 7s;

}

.wordr:nth-child(22) {


	animation: monkey 7.1s forwards, shine 15s infinite;
	animation-delay: 0s, 7.1s;

}

.wordr:nth-child(23) {


	animation: monkey 7.2s forwards, shine 15s infinite;
	animation-delay: 0s, 7.2s;

}

.wordr:nth-child(24) {


	animation: monkey 7.3s forwards, shine 15s infinite;
	animation-delay: 0s, 7.3s;

}

.wordr:nth-child(25) {


	animation: monkey 7.4s forwards, shine 15s infinite;
	animation-delay: 0s, 7.4s;

}

.wordr:nth-child(26) {


	animation: monkey 7.5s forwards, shine 15s infinite;
	animation-delay: 0s, 7.5s;

}

.wordr:nth-child(27) {


	animation: monkey 7.6s forwards, shine 15s infinite;
	animation-delay: 0s, 7.6s;

}

.wordr:nth-child(28) {


	animation: monkey 7.7s forwards, shine 15s infinite;
	animation-delay: 0s, 7.7s;

}

@keyframes monkey {


	0% {

		opacity: 0;
	}

	50% {

		opacity: 0;
	}

	75% {

		opacity: 1;

	}

}

@keyframes monkey2 {

	0% {

		opacity: 0;
	}

	100% {

		opacity: 0;
	}

}

@keyframes pulsejam {
	0% {
		opacity: 0;
	}


	100% {
		opacity: 1;
	}
}



#header-digital,
#header-solutions {

	fill: #c0c0c0;

}

#hero-digital,
#hero-solutions {

	fill: white;

}

.colour-turquoise {

	color: darkturquoise;
	font-size: 1.5rem;
	font-weight: 700;
	padding-right: 10px;
}


.colour-grey {

	color: slategray;
	font-size: 1.5rem;
}

* {
	padding: 0;
	margin: 0;
}

html,
body {
	min-height: 100% !important;
	height: 100%;
	background: #fff;
	font-family: 'Quicksand', sans-serif;

}


p {
	padding-left: 10px;
	padding-right: 10px;
	font-family: 'Quicksand', sans-serif;
	font-size: 1.2em;
	color: #31363f;
	text-align: justify;
	letter-spacing: 1px;
	line-height: 1.8em;

}

h1,
h2,
h3,
h4 {

	font-family: 'Alegreya Sans SC', sans-serif;
	font-family: 'Quicksand', sans-serif;

	color: #31363f;


}





/*###########################
##
##  page-banner
##
###########################*/


#page-banner {

	width: 100%;
	height: 350px;
	background: #fff;
	border-left: 15px solid white;
	border-right: 15px solid white;
	position: relative;
	overflow: hidden;
}



#page-banner-image {

	position: absolute;
	top: -280px;
	height: 100%;
	width: 100%;
	background: url(../images/laptop-header.jpeg) no-repeat center;
	;
	opacity: 1;
	animation: slide-wave 0.5s forwards;

}

@keyframes slide-wave {


	0% {
		top: -100%
	}

	100% {
		top: 0%
	}
}

#page-banner-image:after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;

	height: 100%;
	width: 100%;
	background: #10151f;
	opacity: 0.8;


}


#page-banner-wave:before {

	content: '';
	position: absolute;
	width: 100%;
	height: 600px;
	background: url(../images/wave-turq.svg) no-repeat bottom center;
	background-size: cover;
	transform: translate(0px, 200px);

	opacity: 0.75;
	animation: wave-flow-up 2.25s forwards;
}

#page-banner-wave:after {

	content: '';
	position: absolute;
	width: 100%;
	height: 600px;
	background: url(../images/wave-white.svg) no-repeat bottom center;
	background-size: cover;
	transform: translate(0px, -200px);
	animation: wave-flow 2s forwards;

}

#page-banner.contact #page-banner-wave:before {

	animation: wave-flow-up-bigger 2s forwards;

}


#page-banner.contact #page-banner-wave:after {

	animation: wave-flow-bigger 1s forwards;

}








#page-banner.contact {

	height: 500px;
	margin-bottom: 100px;

}



@keyframes wave-flow {

	0% {

		transform: translate(0px, -200px);

	}
	
	50% {
		
		transform: translate(0px, -200px);
		
	}

	100% {


		transform: translate(0px, 200px);

	}

}

@keyframes wave-flow-bigger {

	0% {

		transform: translate(0px, -200px);

	}

	100% {


		transform: translate(0px, 350px);

	}

}

@keyframes wave-flow-up {

	0% {

		transform: translate(0px, 400px);

	}

	100% {


		transform: translate(0px, 200px);

	}

}

@keyframes wave-flow-up-bigger {

	0% {
		opacity: 0;
		transform: translate(0px, 400px);

	}

	100% {

		opacity: 1;
		transform: translate(0px, 350px);

	}

}



#page-banner-title {

	max-width: 72.5rem;
	margin: 145px auto;
	animation: title 2s forwards;
	padding-left: 20px;


}

#page-banner-title h1 {

	position: relative;

	font-weight: 300;
	color: #fff;
	display: inline-block;
	text-shadow: 2px 2px 2px #000;


}

#page-banner-title h1:after {

	content: '';
	position: absolute;
	bottom: 0px;
	left: 0px;
	height: 3px;
	width: 50px;
	background: crimson;
	animation: subtitle-underline 2.3s forwards;

}

@keyframes title {

	0% {

		opacity: 0;

	}

	50% {

		opacity: 0;
	}

	100% {

		opacity: 1;

	}

}




@media screen and (max-width: 640px) {


	#page-banner-title h1:after {

		content: '';
		position: absolute;
		bottom: -10px;
		left: 0px;
		height: 2px;
		width: 35px;
		background: #48d1cc;

	}



}




#page-banner-test {


	width: 100%;
	height: 350px;
	background: white;
	position: relative;
	overflow: hidden;


}





@keyframes wave-flow-600 {

	0% {

		transform: translate(0px, -400px);

	}

	100% {


		transform: translate(0px, 600px);

	}

}


.subject-title {
	font-family: 'Alegreya Sans SC', sans-serif;
	position: relative;
	margin-bottom: 50px;
	color: #31363f;
}

.subject-title:after {
	position: absolute;
	content: '';
	height: 2px;
	width: 40px;
	background: #48d1cc;
	bottom: -15px;
	left: 0px;


}

.svg-img-right {

	height: 100%;
	width: 100%;
	position: relative;
	min-height: 350px;


}

.svg-img-right img {
	position: absolute;
	width: 150%;
	max-width: 150%;
	height: 300px;
	right: 0px;
}


.svg-img-left {

	height: 100%;
	width: 100%;
	position: relative;
	min-height: 350px;


}

.svg-img-left img {
	position: absolute;
	width: 100%;
	height: 300px;
	left: 0px;
}

.section-title h2 {
	font-family: 'Alegreya Sans SC', sans-serif;
	font-weight: 300;
	text-shadow: 1px 1px 1px #fff, 2px 2px 1px #c3c3c3;
	margin-bottom: 50px;
	display: inline-block;
	padding-right: 10%;
}

h2.subtitle {
	font-family: 'Alegreya Sans SC', sans-serif;
	font-weight: 300;
	text-shadow: 1px 1px 1px #fff, 2px 2px 1px #c3c3c3;
	margin-bottom: 50px;
	display: inline-block;
	padding-right: 10%;
}

#user-form {

	margin: 50px 0px;

}

#user-form h1 {

	font-family: 'Alegreya Sans SC', sans-serif;
	font-weight: 300;
	text-shadow: 1px 1px 1px #fff, 2px 2px 1px #c3c3c3;
	margin-bottom: 25px;
	text-align: center;
}


.navbar-spacer {

	height: 70px;

}



h5 {

	padding-left: 10px;
	padding-right: 10px;
	font-family: 'Alegreya Sans', sans-serif;
	font-size: 20px;
	color: #697792;
	text-align: justify;

}

.logo-m {

	font-size: 50px;

}


#section-divider {

	height: 1px;
	width: 100px;
	background: #e6e6e6;
	margin: 150px auto;
	position: relative;
}

#section-divider:before {

	position: absolute;
	content: '';
	height: 10px;
	width: 50px;
	background: #fff;
	top: 0px;
	left: 50%;
	margin-left: -25px;

}

#section-divider:after {

	position: absolute;
	content: '';
	height: 10px;
	width: 10px;
	background: #fff;
	border: 1px solid #48d1cc;
	top: -5px;
	left: 50%;
	margin-left: -5px;
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);

}

}

.grid-block {
	box-shadow: 10px white;
	position: relative;
}


.grid-block:before {
	content: "";
	width: 100%;
	height: 100%;
	position: absolute;
	bottom: 0;
	background: inherit;
	z-index: -1;
	-webkit-transform-origin: top right;
	transform-origin: top right;
	-webkit-transform: skewY(2deg);
	transform: skewY(2deg);
}



blockquote {
	margin: 0 0 1rem;
	padding: 50px 25px;
	border-left: 5px solid #48d1cc;
	/* border-radius: 10px; */
	background: #31363f;
}

blockquote.warning {

	background: #fff;
	max-width: 75%;
	margin: auto;
	border: none;
	position: relative;


}

blockquote.warning:before {
	content: '';
	position: absolute;
	left: -40px;


	background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" data-name="Livello 1" id="Livello_1" viewBox="0 0 151.57 151.57"><line style="fill:none;stroke: crimson;stroke-linecap:round;stroke-linejoin:round;stroke-width:5px;" x1="35.2" x2="116.37" y1="104.37" y2="104.37"/><line style="fill:none;stroke: crimson;stroke-linecap:round;stroke-linejoin:round;stroke-width:5px;" x1="116.37" x2="75.78" y1="104.37" y2="35.2"/><line style="fill:none;stroke: crimson;stroke-linecap:round;stroke-linejoin:round;stroke-width:5px;" x1="35.2" x2="75.78" y1="104.37" y2="35.2"/><line style="fill:none;stroke: crimson;stroke-linecap:round;stroke-linejoin:round;stroke-width:4px;" x1="75.78" x2="75.78" y1="57.32" y2="83.18"/><circle cx="75.78" cy="91.63" r="2.62" style="fill: #e84242;"/></svg>');
	width: 75px;
	height: 75px;


}

ul.illegal {}

ul.illegal li {

	list-style: none;
	position: relative;
	font-family: 'Open Sans', sans-serif;
	font-size: 1.2em;
	color: #636e84;
	text-align: justify;
	letter-spacing: 1px;
	font-style: italic;
	margin-left: 25px;

}



ul.illegal li:before {

	position: absolute;
	height: 10px;
	width: 10px;
	content: '';
	background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="isolation:isolate" viewBox="0 0 10 10" width="10" height="10"><defs><clipPath id="_clipPath_hAI6bMq4tljFhZQkQtuhQWx5OJZMzvTy"><rect width="10" height="10"/></clipPath></defs><g clip-path="url(#_clipPath_hAI6bMq4tljFhZQkQtuhQWx5OJZMzvTy)"><line x1="1.438" y1="8.714" x2="8.815" y2="1.338" vector-effect="non-scaling-stroke" stroke-width="2" stroke="rgb(237,20,61)" stroke-linejoin="miter" stroke-linecap="round" stroke-miterlimit="3"/><line x1="8.794" y1="8.718" x2="1.391" y2="1.315" vector-effect="non-scaling-stroke" stroke-width="2" stroke="rgb(237,20,61)" stroke-linejoin="miter" stroke-linecap="round" stroke-miterlimit="3"/></g></svg>');
	left: -20px;
	top: 9px;


}

.quoted {

	position: relative;
}

.quoted:before {
	content: '';
	position: absolute;
	height: 10px;
	width: 10px;
	background: red;
	top: 0px;
	left: 0px;

}

.quoted:after {
	content: '';
	position: absolute;
	height: 10px;
	width: 10px;
	background: red;
	bottom: 0px;
	right: 0px;

}

.page-title-center {


	text-align: center;

	color: white;
	animation: reveal-delay 2s;

}


.page-title-center h2 {

	display: inline-block;
	font-family: 'Alegreya Sans SC', sans-serif;
	padding: 0px 25px;
	margin-top: 125px;
	font-weight: 300;
	position: relative;
	text-shadow: 2px 2px 2px #241358;
	color: white;

}



.techsup {

	line-height: 270px;

}













#block-projectm-content {

	animation: reveal-delay 3s;

}

@keyframes reveal {

	0% {

		opacity: 0;
	}

	100% {

		opacity: 1;
	}
}

@keyframes reveal-delay {

	0% {

		opacity: 0;
	}

	50% {

		opacity: 0;
	}

	100% {

		opacity: 1;
	}
}

.banner-question {
	text-shadow: 2px 2px 3px #21252b;
	position: relative;
	color: white;
	font-weight: 300;
	margin-top: 125px;
	padding: 50px;
	max-width: 700px;
	text-align: justify;


	background-size: cover;
}

.banner-question span {

	margin: 0;
	padding: 0;

}

.title-underline,
.tunder {

	position: relative;


}

.question-underline {
	position: relative;
	margin-bottom: 50px;

}

.svg-banner {

	width: 100%;
	height: 300px;
	background: red;
	background: url(../images/tckban300.svg) center no-repeat;

}

.banner-question:before {

	position: absolute;
	left: 20px;
	top: 50px;
	height: 50%;
	width: 2px;
	content: '';
	background: #48d1cc;
}


}

.question-underline:after {

	position: absolute;
	content: '';
	height: 5px;
	width: 5px;
	background: #48d1cc;
	bottom: 0px;
	left: 0px;

}

.banner-question2:after {

	position: absolute;
	content: '';
	height: 2px;
	width: 40px;
	background: #48d1cc;
	bottom: 25px;
	left: 50px;
	animation: line-reveal 4s forwards;

}

@keyframes line-reveal {


	0% {


		opacity: 0;
		left: -100px;

	}

	25% {

		opacity: 0;
	}

	100% {

		opacity: 1;
		left: 50px;
	}

}

.title-underline:after {

	position: absolute;
	content: '';
	height: 2px;
	width: 40px;
	background: #48d1cc;
	bottom: -15px;
	left: 0px;

}

.tunder {
	position: relative;
	margin-bottom: 50px;

}

.tunder:after {

	position: absolute;
	content: '';
	height: 2px;
	width: 40px;
	background: #48d1cc;
	bottom: -15px;
	left: 15px;

}

.js.title-underline:after {


	opacity: 0;
	left: -100%;
	transition: all 2s ease;

}


.in-view.title-underline:after {
	opacity: 1;
	left: 0%;

}

.in-view .section-image {


	animation: image-reveal 5s forwards;
}


@keyframes image-reveal {

	0% {

		opacity: 0;

	}

	20% {

		opacity: 0;
	}

	100% {

		opacity: 1;
	}

}

.underline {

	position: relative;


}

.underline:before {

	position: absolute;
	content: '';
	width: 100%;
	height: 5px;
	background: rgba(71, 209, 204, 0.5);
	bottom: 0px;
	left: 0px;


}

.nth-color {

	position: relative;

}

.nth-color span:first-child {
	font-size: 2.5rem;
	color: darkturquoise;
	position: absolute;

}

.nth-color span:nth-child(2) {
	margin-left: 50px;
	font-size: 1.5rem;
	font-weight: 300;
	color: #848484;

}

.nth-color span:nth-child(3) {
	font-size: 1.5rem;
	color: #848484;
	font-weight: 300;
}

.nth-color span:nth-child(4) {
	font-size: 1.5rem;
	color: #848484;
	font-weight: 300;
}

#content-left-border {


	padding: 5px 50px;
	position: relative;

}

.paragraph-border {
	position: relative;
	transition: all 0.5s ease-in;


}

.paragraph-border:before {

	content: '';
	position: absolute;
	height: 30%;
	top: -50%;
	left: -15px;
	/* margin-top: -16%; */
	width: 2px;
	background: #00ced1;
	opacity: 0;
	transition: all 2s ease-in-out;


}

.paragraph-border:after {

	content: '';
	position: absolute;
	height: 30%;
	bottom: -50%;
	right: -15px;
	opacity: 0;
	width: 2px;
	background: #00ced1;
	transition: all 2s ease-in-out;

}


.in-view .paragraph-border:after {

	opacity: 1;
	bottom: -20%;


}

.in-view .paragraph-border:before {
	top: -20%;
	opacity: 1;

}

#content-background-dark {

	background: rgba(29, 34, 39, 0.85);
	box-shadow: 0 0 0 10px rgba(38, 40, 42, 0.3);
	padding: 20px;

}

#block-projectm-page-title span {

	color: #c0d1ce;

}

.animated-breadcrumb {

	opacity: 0;

}

.animation {

	opacity: 1;
}




#block-projectm-breadcrumbs {

	margin-top: 20px;
	background: #fff;

}

#block-projectm-breadcrumbs ol li {

	list-style: none;
	display: inline;

}

#block-projectm-breadcrumbs ol li:first-child {


	display: none;

}

#block-projectm-breadcrumbs ol li a {
	font-family: 'Alegreya Sans SC', sans-serif;
	color: #6e94a9;
	text-transform: capitalize;
}

#block-projectm-breadcrumbs ol li a:after {
	padding: 0px 10px;
	color: #f1f1f1;
	content: '/';
}

.current-breadcrumb {

	font-family: 'Alegreya Sans SC', sans-serif;
	color: #00ced1;
	text-transform: capitalize;

}


.subject-wrapper {

	background: #fefefe;
	padding: 10px;
	margin: 20px;
	position: relative;
	/*border: 1px solid #f1f1f1;*/
}

.subject-wrapper:hover {

	background: #fcfcfc;
	transition: all 0.2s;
}

.subject-wrapper .subject-title {

	color: #636e84;
	margin-bottom: 20px;
	position: relative;
}

.subject-wrapper .subject-title:after {

	position: absolute;
	content: '';
	height: 2px;
	width: 75px;
	background: #00ced1;
}

.subject-wrapper img {
	position: absolute;
	top: 15px;
	right: 15px;
	width: 50px;

}

.subject-summary p {
	font-size: 1.1rem;
	color: #636e84;

}

.info-rd-mr {
	font-family: 'Alegreya Sans SC', sans-serif;
	color: #00ced1;
	text-transform: capitalize;
	position: relative;
	font-size: 1.2rem;

	text-align: right;
	margin-right: 30px;

}

.info-rd-mr:after {


	font-family: 'icomoon' !important;
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	position: absolute;
	content: "\e900";
	right: -25px;
	top: 1px;

}

.subject-wrapper:hover .info-rd-mr {
	transition: all 0.2s;
	color: red;
}

#section {

	margin: 20px;

}

.bg-device {
	padding: 150px 20px;
	background: url(../images/dark-bg.jpg) no-repeat center;


}

.bg-device .row {

	background: rgba(33, 38, 43, 0.95);
	box-shadow: 0 0 0 10px rgba(38, 40, 42, 0.3);
	padding: 20px;

}

.bg-device .subtitle {
	position: relative;
	text-align: center;
	color: white;
	text-shadow: 1px 1px 1px #000;
}

.bg-device h1 {
	color: white;
	text-align: center;

}

.bg-device h4 {
	color: white;
	text-align: center;

}







#nofix {
	border: 20px solid white;
	overflow: hidden;
	padding: 150px 20px;
	background: url(../images/dark-bg.jpg) no-repeat center;


}

#nofix .grid-container {

	background: rgba(33, 38, 43, 0.95);
	box-shadow: 0 0 0 10px rgba(38, 40, 42, 0.3);
	padding: 50px;

}

#nofix h2 {}

#nofix .in-view .subtitle-exploded {

	text-shadow: none;
	color: white;

}

#nofix p {

	color: white;

}

.warpped {

	position: relative;


}

.warpped:before {
	content: '';
	height: 300px;
	position: absolute;
	width: 100%;
	left: 0;
	top: 0;
	z-index: 1;
	background: url(../images/warp-top-1.png) center no-repeat;
	background-size: cover;

}


.warpped:after {
	content: '';
	height: 300px;
	position: absolute;
	width: 100%;
	left: 0;
	bottom: 0;
	background: url(../images/warp-bottom.svg) center no-repeat;
	background-size: cover;

}




.warp-top {
	height: 300px;
	position: absolute;
	width: 100%;
	left: 0;
	bottom: 0;
	background: url(../images/warp-bottom.png) center no-repeat;
	background-size: cover;

}

.warp-bottom {
	height: 300px;
	position: absolute;
	width: 100%;
	left: 0;
	bottom: 0;
	background: url(../images/warp-bottom.png) center no-repeat;
	background-size: cover;

}

.js.inview.warpped:after {

	bottom: 20px;

}

.small-line {

	width: 50px;
	height: 2px;
	background: darkturquoise;

}

.full-line {

	width: 100%;
	height: 1px;
	background: rgba(255, 255, 255, 0.3);

}

#testimonial {

	margin: 20px;

}

#section-testimonial p {

	color: white;
	font-weight: 300;

}

.testimonial {
	position: relative;
	padding: 150px 20px;
	background: url(../images/testimonial-bg-1.jpg) no-repeat center;
	background-size: cover;



}


.testimonial-name {

	color: darkturquoise;
	font-style: italic;
	text-align: right;

}

.subtitle-centred {
	text-align: center;
	position: relative;
	color: #eee;
	text-transform: uppercase;
	letter-spacing: 3px;
	padding: 20px;
	font-family: 'Alegreya Sans SC', sans-serif;
	font-size: 25px;
	font-weight: 300;
}

.subtitle-centred:after {
	position: absolute;
	content: '';
	height: 2px;
	width: 40px;
	margin-left: -20px;
	background: darkturquoise;
	bottom: 0px;
	left: 50%;
}

.testimonial-content {

	background: rgba(0, 0, 0, 0.3);
	padding: 10px;
	margin: 25px 0px;

}

.testimonial-content p {}

/*###########################
##
##  Section Booking STYLES
##
###########################*/


#section-booking {

	background: #58bd91;
	background: -moz-linear-gradient(45deg, #9158bd 0%, #0A8898 100%);
	background: -webkit-linear-gradient(45deg, #9158bd 0%, #0A8898 100%);
	background: linear-gradient(45deg, #9158bd 0%, #0A8898 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#9158bd', endColorstr='#77cad5', GradientType=1);
	color: white;
	padding: 50px 0px;
	margin: 20px;

}

#section-booking h3 {

	text-shadow: 2px 2px 2px #000;

}


#section-booking .calendarbox {
	position: relative;
	height: 500px;
	background: url(../images/calendar-shadow.png) no-repeat center;
	background-size: contain;
	margin: -100px 0px;


}

#referral .grid-x {

	background: #fafafa;
	padding: 20px;

}

#referral p {

	font-size: 1.2rem;
	line-height: 1.4;
	padding: 25px;

}

#referral #rfl-btn {
	font-family: 'Alegreya Sans SC', sans-serif;
	padding: 20px;
	max-width: 200px;
	margin: auto;
	text-align: center;

}

#loader-screen-overlay {

	position: fixed;
	width: 100%;
	height: 100%;
	background: #31363f;
	z-index: 1000;

	opacity: 0;
	display: none;
	transition: all 0.3s ease-in;
}

#loader-screen-overlay.active {
	display: block;
	opacity: 1;
}

#loader-screen-overlay.active-remove {

	opacity: 0;
}

#loader-screen-overlay #logo {
	position: absolute;
	background: #31363f;
	width: 200px;
	height: 200px;
	top: 50%;
	left: 50%;
	margin-left: -100px;
	margin-top: -100px;
	transform: rotate(45deg);
	box-shadow: 0px 0px 0px 5px #48d1cc;
}

#loader-screen-overlay #logo:before {
	position: absolute;
	content: '';
	background: url(../images/mlogo.svg) center no-repeat;
	width: 124px;
	height: 124px;
	top: 50%;
	left: 50%;
	margin-top: -62px;
	margin-left: -62px;
	transform: rotate(-45deg);
}

}

.subtitle {

	padding-left: 10px;

}




.form-actions {


	text-align: center;

}

.form-actions .button {

	max-width: 320px;

}

#booking-login {}

#booking-login input {

	padding: 10px;
	border: 1px solid #f1f1f1;
	box-shadow: none;
	margin-bottom: 25px;
}

#booking-login .description {
	display: none;

}

#booking-login .button {

	max-width: 250px;
}

/*###########################
##
##  BUTTON STYLES
##
###########################*/
.centre-container {

	text-align: center;

}

.button {
	margin-top: 50px;
	background: #FFF;
	padding: 15px 20px;
	border: 2px solid #21252b;
	color: #000;
	outline: none;
	font-family: 'Alegreya Sans SC', sans-serif;
	transition: all 0.1s ease;

}

.button:hover,
.button:focus {
	cursor: pointer;
	background-color: #21252b;
	color: #fefefe;
}


.rd-mr {


	display: inline-block;

	margin-bottom: 50px;

}

.rd-mr a {
	position: relative;
	font-family: 'Alegreya Sans SC', sans-serif;
	text-transform: capitalize;
	background: #3ebbb7;
	color: white;
	padding: 5px 30px 5px 10px;
}

.rd-mr a:after {
	font-family: 'icomoon' !important;
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	position: absolute;
	content: "\e001";
	right: 0px;
	font-size: 1.0rem;
}

.rd-mr a:hover {

	color: white;
	background: #3bafab;
}


.fr-rd-mr {


	display: inline-block;

	margin-top: 50px;

}

.fr-rd-mr a {
	transition: all 0.5s ease;
	font-size: 1.3rem;
	position: relative;
	font-family: 'Alegreya Sans SC', sans-serif;
	text-transform: capitalize;
	color: crimson;
	/*border: 2px solid darkturquoise;*/
	padding: 10px 35px 10px 15px;
}

.fr-rd-mr a:after {
	font-family: 'icomoon' !important;
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	position: absolute;
	content: "\e900";
	right: 10px;
}

.fr-rd-mr a:hover {

	color: white;
	background: #20b2aa;
}


.fr-mr-tl {

	width: 100%;
	text-align: center;

}


.fr-mr-tl a {
	font-size: 1.3rem;
	transition: all 0.5s ease;
	position: relative;
	font-family: 'Alegreya Sans SC', sans-serif;
	text-transform: capitalize;
	color: white;
	padding: 15px 15px 15px 15px;

}

.fr-mr-tl a:hover {
	color: darkturquoise;


}



.fr-mr-bk {

	text-align: center
}


.fr-mr-bk a {
	font-size: 1.3rem;
	transition: all 0.2s ease-in;
	position: relative;
	font-family: 'Alegreya Sans SC', sans-serif;
	text-transform: capitalize;
	color: #31363f;

	padding: 15px 20px 15px 20px;

}

.fr-mr-bk a:hover {

	border-radius: 25%;

}

.hd {

	overflow: hidden;

}

.button-container {


	display: inline-block;
	padding: 25px 50px;
	margin: 20px 20px;
	position: relative;

}

.fr-mr-bk a:nth-last-child(2) {
	color: #06C !important;
}


.button-container-1 {
	position: absolute;
	top: 1px;
	right: -10%;
	height: 1px;
	width: 0%;
	background: #e9f6f7;

	transition: all 0.2s ease-in-out;

}




.button-container-2 {
	position: absolute;
	top: -15%;
	right: 1px;
	height: 0%;
	width: 1px;
	background: #e9f6f7;



}

.button-container-3 {
	position: absolute;
	bottom: 1px;
	left: -10%;
	height: 1px;
	width: 0%;
	background: #e9f6f7;



}

.button-container-4 {
	position: absolute;
	bottom: -15%;
	left: 1px;
	height: 0%;
	width: 1px;
	background: #e9f6f7;




}

.button-container-5 {
	position: absolute;
	top: 0px;
	right: 0px;
	height: 3px;
	width: 10px;
	background: #c4d5d6;
	transition: all 0.2s ease-in-out;


}


.button-container-6 {
	position: absolute;
	top: 0px;
	right: 0px;
	height: 10px;
	width: 3px;
	background: #c4d5d6;
	transition: all 0.2s ease-in-out;


}

.button-container-7 {
	position: absolute;
	bottom: 0px;
	left: 0px;
	height: 3px;
	width: 10px;
	background: #c4d5d6;
	transition: all 0.2s ease-in-out;


}

.button-container-8 {
	position: absolute;
	bottom: 0px;
	left: 0px;
	height: 10px;
	width: 3px;
	background: #c4d5d6;
	transition: all 0.2s ease-in-out;



}

.tech-clr {

	background: #f1f1f1;


}

.btn-clr {

	background: #21252b;

}

.button-container:hover {}

.button-container:hover .button-container-5 {


	width: 100%;


}

.button-container:hover .button-container-6 {


	height: 100%;


}

.button-container:hover .button-container-7 {


	width: 100%;

}

.button-container:hover .button-container-8 {


	height: 100%;


}

#js-btn {

	border: 2px solid #21252b;
	padding: 10px;
	max-width: 200px;
	margin: auto;
	text-align: center;
	transition: all 0.2s ease-in;
}

#js-btn:hover {

	cursor: pointer;
	background: #21252b;
	color: #fff;

}

.in-view p {

	opacity: 1;

}

.in-view .button-container-1 {

	width: 120%;
	transition: all 2s ease-in-out;

}

.in-view .button-container-2 {

	height: 130%;
	transition: all 2s ease-in-out;

}

.in-view .button-container-3 {

	width: 120%;

	transition: all 2s ease-in-out;

}

.in-view .button-container-4 {

	height: 130%;

	transition: all 2s ease-in-out;

}

a.button-container {
	text-decoration: none;
	font-size: 20px;
}

.fr-mr-bk a span:nth-child(3) {

	color: red;
}

.margin-bottom--20 {

	margin-bottom: -20px;

}

.color-tur {

	color: darkturquoise;

}


.logo-block {

	position: relative;
	color: darkturquoise;
	display: inline-block;
	width: 300px;

	height: 70px;
	background: url(../logo-light.png) no-repeat center;



}

.logo-block-m {


	position: absolute;
	top: 0px;
	left: 0px;
	font-size: 4.0rem;

}

.logo-block-top {
	color: #bbb;
	position: absolute;
	top: -13px;
	left: 60px;
	/* width: 350px; */
	font-size: 1.5rem;
}


.logo-h-line {

	position: absolute;
	top: 18px;
	left: 62px;
	width: 273px;
	height: 2px;
	background: darkturquoise;

}

.logo-block-bottom {

	color: #bbb;
	position: absolute;
	top: 15px;
	left: 62px;
	/* width: 350px; */
	font-size: 1.5rem;



}



/*###########################
##
##  LATEST STYLES
##
###########################*/


#latest-news .latest-news-container {

	position: relative;
	margin-bottom: 100px;

}

.latest-news-image {

	max-width: 450px;

	height: 230px;
	margin-left: auto;
	margin-right: auto;

}

#latest-news .latest-news-title {

	position: absolute;



}

.latest-news-image {



	margin-left: auto;
	margin-right: auto;


}

.latest-news-container img {

	position: relative;


}

.latest-news-container img:after {
	content: '';
	position: absolute;
	height: 10px;
	width: 10px;
	background: red;


}

.latest-news-container a:hover img {
	transition: all 0.3s ease;
	opacity: 0.9;

}

.latest-news-content {

	transition: all 0.3s ease;
	background: white;
	margin: 0px 20px;
	-ms-transform: translate(0px, -50px);
	-webkit-transform: translate(0px, -50px);
	transform: translate(0px, -50px);
	padding: 20px;

}

.latest-news-container a:hover .latest-news-content {
	box-shadow: 0px 5px 10px #ccc;
	-ms-transform: translate(0px, -55px);
	-webkit-transform: translate(0px, -55px);
	transform: translate(0px, -55px);


}

.latest-news-content-date {

	color: darkturquoise;
	font-size: 0.8rem;
	font-weight: 500;


}


.latest-news-content-title {

	color: #636e84;
	font-size: 1.0rem;
	font-weight: 400;


}

.latest-news-1b {
	position: relative;

	background: green;
	padding: 20px;
	margin: 20px 0px;



}

.latest-news-1c {
	position: relative;

	background: yellow;
	padding: 20px;
	margin: 20px 0px;



}



/*###########################
##
##  FOOTER STYLES
##
###########################*/
footer {

	margin-top: 50px;

}

#footer ul {

	list-style: none;
}

#footer p {

	font-size: 1.0rem;
	padding: 0;

}

#footer .fnt-clr {

	color: #767f8c;
	line-height: 2.3;

}

#footer a {

	color: #767f8c;
	letter-spacing: 0.5px;
	line-height: 2.3;

}

#footer a:hover {

	color: #3b3f46;

}

.footer-content {

	margin-bottom: 50px;

}


.footer-logo-block {

	position: relative;
	color: darkturquoise;
	display: inline-block;
	width: 100%;
	height: 70px;
	/*background: url(../logo-light.png) no-repeat center;*/
	background-size: contain;

}

#footer-logo #cline {

	stroke: #dcdcdc;
}


.footer-content p {

	font-size: 1.0rem;
	line-height: 1.0;


}

.bld {

	font-weight: 700;


}

.footer-divider {

	margin: 0px 10%;
	height: 1px;
	background: #ddd;

}



#left-side-menu {

	min-width: 250px;
	padding: 15px;


}

#left-side-menu,
.animate {}


#left-side-menu ul {

	list-style: none;
	margin: 0px;
}


#left-side-menu h2 {
	display: none;


}




#left-side-menu ul {}

#left-side-menu ul li {
	font-family: 'Alegreya Sans SC', sans-serif;
	text-transform: capitalize;
	list-style: none;
	font-weight: 300;
	font-size: 17px;
}

#left-side-menu ul li a {
	display: block;
	position: relative;
	/* background: #fefefe; */
	border-bottom: 1px solid #fdfdfd;
	color: #636e84;
	font-weight: 400;
	/* padding-left: 10px; */
	padding: 10px;
	transition: .1s linear;
	-moz-transition: .1s linear;
	-webkit-transition: .1s linear;
	-webkit-transition: .1s linear;


}


#left-side-menu ul li:first-child a {
	margin: 0px;
	padding: 10px 40px 10px 10px;
	background: #fdfdfd;
	font-size: 1.3rem;
	color: #636e84;
	border-bottom: 2px solid #eee;
}



#left-side-menu ul li a:after {
	font-family: 'icomoon' !important;
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	position: absolute;
	content: "\e900";
	color: #00ced1;
	left: -50px;
	transition: .3s linear;
	-moz-transition: .3s linear;
	-webkit-transition: .3s linear;
	-webkit-transition: .3s linear;
	opacity: 0;

}

#left-side-menu ul li a:hover:after {
	opacity: 1;
	left: -10px;

}

#left-side-menu li a:hover {

	background: #fefefe;
	padding-left: 20px;
	color: #69a4aa;

}


#block-projectm-page-title {

	display: none;

}

#padder,
.padder {
	height: 100px;
}


.custom-view-link {

	position: relative;

}

.custom-view-link:after {
	content: '';
	position: absolute;
	bottom: 0px;
	width: 100%;
	height: 1px;
	left: 0;
	background: #f1f1f1;

}

.custom-view-link a {
	color: #8f99af;
	/* text-shadow: 2px 2px #f1f1f1; */
	padding: 10px 10px 10px 10px;
	border-bottom: 1px solid #d1d1d1;
	/* width: 100%; */
	display: block;
	transition: all 0.5s;
	border-left: 2px solid white;
}

.custom-view-link a:hover {

	color: #36d8db;
	border-left: 2px solid #00ced1;

}

#price {

	font-family: 'Alegreya Sans SC', sans-serif;
	border: 1px solid #f1f1f1;
	font-size: 1.2rem;
	padding: 10px;
	color: #636e84;

}


.price-container {
	width: 100%;
	display: inline-flex;

}

.price-container:nth-child(even) {
	background: #fbfbfb;
	border-bottom: 1px solid #efefef;
}

.price-container:nth-child(odd) {
	background: #fcfcfc;
	border-bottom: 1px solid #efefef;
}

.price-name {
	padding: 10px;
	width: 80%;
}

.price-number {
	padding: 10px;
	width: 20%;
	text-align: center;
	font-weight: 600;
	font-size: 1.5rem;
	text-shadow: 1px 1px 1px #beebee;

}

#classss {

	stroke: red;

}

@keyframes rotate {
	from {
		transform: rotate(0deg) translate(-9px) rotate(0deg);
	}

	to {
		transform: rotate(360deg) translate(-9px) rotate(-360deg);
	}
}

.spinner {
	content: "<div class="spinner"></div>";
}

.svg-text-fill {

	fill: #7fe6e8;
}

.ShapeOutline {
	stroke: #c0d1d1;
}

.OuterScreen {
	stroke: #f00;
}

.BottomBase {
	stroke: #f00;
}

.InnerScreen {
	stroke: #f00;
}

.BaseShadow4 {
	stroke: #f00;
}

.ShapeFill {
	fill: #bff3f3;
}

.contact-form-instructions {
	font-size: 0.8rem;
	margin: 50px 0px;

}

.small-print {

	font-size: 0.8rem;
	margin: 25px 0px;

}

#max-width {

	max-width: 500px;
}

/*###########################
##
##  Contact STYLES
##
###########################*/

.not-validated {

	opacity: 0.2;
	position: relative;
	border: 1px solid #d0d0d0;
}

.usable {

	opacity: 1;

}

.not-validated:after {
	position: absolute;
	top: 0;
	left: 0;
	content: '';
	height: 100%;
	width: 100%;
	background: #ffffff;
	opacity: 0.75;

}

.not-validated:after {}


#mdtsol_form {

	padding: 10px 50px;
	position: relative;
	background: white;
	border: 1px solid #f1f1f1;
	box-shadow: 0px 0px 2px #d9f8ff;
	margin-bottom: 50px;
}


#mdtsol_form .subject-title {
	text-align: center;
	margin: -30px 0px 75px 0px;
	background: white;
}

#mdtsol_form .subject-title:after {
	left: 50%;
	margin-left: -20px;


}

#mdtsol_form .contact-form {

	padding: 20px 0px;


}

























#input-wrapper {
	position: relative;
	max-width: 425px;
	margin: 0px auto 50px auto;


}

#input-wrapper input,
#input-wrapper textarea {
	    width: 100%;
    padding: 15px;
    border: none;
    background: #fdfdfd;
    border: 1px solid #f1f1f1;
    border-bottom: 2px solid #788898; 
    box-shadow: 0px 0px 1px #f7f7f7;
    outline: none;
    resize: none;
	display: block;
}

#input-wrapper:before {

	position: absolute;
	height: 2px;
	width: 0%;
	background: #40e0d0;
	content: '';
	bottom: 0px;
	left: 0px;
	transition: all 0.2s ease-in;

}




#input-wrapper input:focus,
#input-wrapper textarea:focus {

	border: 2px solid #fefefe;
	background: #fefefe;

}


#input-wrapper input::-webkit-input-placeholder,
#input-wrapper textarea::-webkit-input-placeholder 
{

	color: #c0c0c0;

}


#input-wrapper input:focus::-webkit-input-placeholder,
#input-wrapper textarea:focus::-webkit-input-placeholder 
{

	color: #fafafa;

}

#input-wrapper.is-focus:before {

	width: 100%;

}

#input-wrapper label {
	font-size: 1.2rem;
	position: absolute;
	top: -30px;
	left: 0px;
	transition: all 0.25s ease;
	color: #566878;

}

#input-wrapper.is-focus label,
#input-wrapper.has-value label {


	left: -10px;
	color: #8898A8;


}





#postcode-check {

	width: 100%;
	position: relative;
	overflow: hidden;
	padding: 20px;
}




#postcode-input-container {

	position: absolute;

	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;



}




#success {
	font-family: 'Alegreya Sans SC', sans-serif;
	font-size: 2.0rem;
	color: #17756a;
	width: 100%;
	height: 100%;
	line-height: 3.1;
	position: absolute;
	top: 0px;
	left: 100%;
	background: #fff;

	text-align: center;
	transition: all 0.2s ease-in;

	opacity: 0;

}

#success.success {

	position: absolute;
	top: 0px;
	left: 0%;
	opacity: 1;



}

#success.success:before {

	content: '';
	position: absolute;
	height: 1px;
	width: 100%;
	top: 0;
	left: 0;
	background: #f1f1f1;

}

#success.success:after {

	content: '';
	position: absolute;
	height: 1px;
	width: 100%;
	bottom: 0;
	left: 0;
	background: #f1f1f1;

}

#contact-form {

	margin-top: 50px;

}


.custom-input:before {

	position: absolute;
	content: '';
	top: 0px;
	left: 0px;
	height: 0%;
	width: 2px;
	background: #00d17c;
	transition: all 0.2s ease-in;

}



.is-focus:before,
.has-value:before {

	height: 100%;


}

.green-validation:before {

	transition-delay: 0.5s;
	width: 100%;
	opacity: 0.5;

}


.custom-input .mdt-input {
	width: 100%;
	outline: none;
	border: none;
	box-shadow: none;
	padding: 10px;
	font-size: 1.0rem;
	border: 2px solid #dfdfdf;
	border-left: 2px solid #95ceff;
	transition: all 0.2s ease-in;
}

.custom-input .mdt-input:focus {

	outline: none;
	border: 2px solid #f3f3f3;
	box-shadow: none;


}


.custom-input .mdt-input:hover {

	background: #ffffff;
	box-shadow: 0px 2px 5px #fdfdfd;

}




.custom-input .mdt-label {

	position: absolute;
	top: 7px;
	left: 10px;
	font-size: 1.0rem;

}

.is-focus .mdt-label,
.has-value .mdt-label {


	top: -30px;
	left: 5px;
	animation: try 0.1s forwards;
	color: #aaa;
}



.radio-wrapper label {

	max-width: 331px;
	display: block;

}





#edit-actions {
	text-align: center;


}

.js-form-item-postcode {

	display: none;

}

@keyframes try {

	0% {

		opacity: 0;
	}

	50% {

		opacity: 1;
	}

	100% {

		opacity: 1;
	}

}

.is-validated {

	position: absolute;
	opacity: 1;
	width: 54px;
	right: -20px;
	top: -5px;

}

.green-validation {

	background: #00ced1;

}

.red-validation {

	background: #f87e7e;
}

.circ {
	opacity: 0;
	stroke-dasharray: 130;
	stroke-dashoffset: 130;
	-webkit-transition: all 1s;
	-moz-transition: all 1s;
	-ms-transition: all 1s;
	-o-transition: all 1s;
	transition: all 1s;
}

.tick {
	stroke-dasharray: 50;
	stroke-dashoffset: 50;
	-webkit-transition: stroke-dashoffset 1s 0.5s ease-out;
	-moz-transition: stroke-dashoffset 1s 0.5s ease-out;
	-ms-transition: stroke-dashoffset 1s 0.5s ease-out;
	-o-transition: stroke-dashoffset 1s 0.5s ease-out;
	transition: stroke-dashoffset 1s 0.5s ease-out;
}

.drawn svg .path {
	opacity: 1;
	stroke-dashoffset: 0;
}

.main-menu-link li:nth-child(1) {

	animation: fadeinrow 1.0s forwards;


}

.main-menu-link li:nth-child(2) {

	animation: fadeinrow 1.2s forwards;


}

.main-menu-link li:nth-child(3) {

	animation: fadeinrow 1.4s forwards;


}

.main-menu-link li:nth-child(4) {

	animation: fadeinrow 1.6s forwards;


}

.main-menu-link li:nth-child(5) {

	animation: fadeinrow 1.8s forwards;


}

.main-menu-link li:nth-child(6) {

	animation: fadeinrow 2.0s forwards;


}

.main-menu-link li:nth-child(7) {

	animation: fadeinrow 2.2s forwards;


}

.main-menu-link li:nth-child(8) {

	animation: fadeinrow 2.4s forwards;


}

@keyframes fadeinrow {

	0% {

		opacity: 0;
		    transform: translateY(-20px);
	}


	25% {

		opacity: 0;

	}

	100% {

		opacity: 1;
		transform: translateY(0px);
	}

}


#edit-technical-type {

	padding-top: 40px;

}

#edit-technical-type--wrapper .fieldset-legend {

	font-size: 1.5rem;

}

#edit-technical-type label {

	display: block;
	padding-left: 50px;

}


#edit-technical-type input {

	display: none;
}


#edit-technical-type .js-form-type-radio {

	height: 1px;
}


#edit-technical-type input[type="radio"]:checked + label {
	color: #48d1cc;
}

#edit-technical-type input[type="radio"] + label:hover {

	cursor: pointer;
	color: #84f4ef;

}



#edit-technical-type input[type="radio"] + label:before {

	content: ' ';
	position: absolute;
	top: 7px;
	left: 20px;
	width: 11px;
	height: 11px;
	box-shadow: 0px 0px 0px 4px #fff, 0px 0px 0px 6px #d1d1d1;
	border-radius: 100%;



}

#edit-technical-type input[type="radio"] + label:hover::before {

	content: ' ';
	position: absolute;
	top: 7px;
	left: 20px;
	width: 11px;
	height: 11px;
	background: #bcf2f0;
	border-radius: 100%;
	transition: all 0.1s ease-in;



}

#edit-technical-type input[type="radio"]:checked + label:after {

	content: ' ';
	position: absolute;
	top: 7px;
	left: 20px;
	width: 11px;
	height: 11px;
	background: #48d1cc;
	border-radius: 100%;
	transition: all 0.1s ease-in;


}



.drupal-page-title #drpa {

	opacity: 1 !important;

}

#status-message {
	margin: 25px auto;
	position: relative;
	padding: 20px;
	box-shadow: 0px 0px 0px 4px white, 0px 0px 0px 6px #e1e1e1;
}

#status-message {
	margin: 25px auto;
	position: relative;
	padding: 20px;
	box-shadow: 0px 0px 0px 4px white, 0px 0px 0px 6px #e1e1e1;
}

#status-message.Error {}

#status-message.Error:before {
	position: absolute;
	top: 0;
	left: 0;
	content: '';
	width: 100%;
	height: 100%;
	background: #f1f1f1;
}




.in-view .rvlr {

	opacity: 1;

}

.description {

	display: none;
}


#referral-form {

	height: 100%;
	width: 100%;
	position: fixed;
	z-index: 2;
	background: white;
	top: 0;
	left: 100%;
	overflow-y: scroll;
	opacity: 0;
	transition: all 0.3s ease-in;

}

.hide-overflow {

	overflow: hidden;
}

#referral-form.active {
	left: 0%;
	opacity: 1;

}

#referral-form.active #title {

	color: mediumturquoise;
	text-align: center;

}

#rfl-form {
	max-width: 500px;
	margin: 50px auto;
	padding: 30px 20px;
	border: 1px solid #f1f1f1;
	position: relative;
}

#form-info {
	background: white;
	display: inline-block;
	padding: 0px 20px;
	/* margin-top: -72px; */
	position: absolute;
	top: -20px;
	left: 9px;
	font-size: 1.4rem;
}

.js-active {

	opacity: 0;

}

.subtitle {
	position: relative;

}

h2.subtitle:before {

	position: absolute;
	bottom: 0;
	left: 0;
	content: '';
	background: #48d1cc;
	height: 2px;
	width: 50px;
	opacity: 1;
}

.js-active h2.subtitle:before {

	left: -1000px;
}

.in-view h2.subtitle:before {
	animation: subtitle-underline 1.3s forwards;
}

.subtitle-exploded {

	opacity: 0;
}

.in-view .subtitle-exploded:nth-child(1) {

	animation: fadeinrow 1s forwards;
}

.in-view .subtitle-exploded:nth-child(2) {

	animation: fadeinrow 1.1s forwards;
}

.in-view .subtitle-exploded:nth-child(3) {

	animation: fadeinrow 1.2s forwards;
}

.in-view .subtitle-exploded:nth-child(4) {

	animation: fadeinrow 1.3s forwards;
}

.in-view .subtitle-exploded:nth-child(5) {

	animation: fadeinrow 1.4s forwards;
}

.in-view .subtitle-exploded:nth-child(6) {

	animation: fadeinrow 1.5s forwards;
}

.in-view .subtitle-exploded:nth-child(7) {

	animation: fadeinrow 1.6s forwards;
}

.in-view .subtitle-exploded:nth-child(8) {

	animation: fadeinrow 1.7s forwards;
}

.in-view .subtitle-exploded:nth-child(9) {

	animation: fadeinrow 1.8s forwards;
}

.in-view .subtitle-exploded:nth-child(10) {

	animation: fadeinrow 1.9s forwards;
}

.in-view .subtitle-exploded:nth-child(11) {

	animation: fadeinrow 2s forwards;
}

.in-view .subtitle-exploded:nth-child(12) {

	animation: fadeinrow 2.1s forwards;
}

.in-view .subtitle-exploded:nth-child(13) {

	animation: fadeinrow 2.2s forwards;
}

.in-view .subtitle-exploded:nth-child(14) {

	animation: fadeinrow 2.3s forwards;
}

.in-view .subtitle-exploded:nth-child(15) {

	animation: fadeinrow 2.4s forwards;
}

.in-view .subtitle-exploded:nth-child(16) {

	animation: fadeinrow 2.5s forwards;
}

.in-view .subtitle-exploded:nth-child(17) {

	animation: fadeinrow 2.6s forwards;
}

.in-view .subtitle-exploded:nth-child(18) {

	animation: fadeinrow 2.7s forwards;
}

.in-view .subtitle-exploded:nth-child(19) {

	animation: fadeinrow 2.8s forwards;
}

.in-view .subtitle-exploded:nth-child(20) {

	animation: fadeinrow 2.9s forwards;
}

.in-view .subtitle-exploded:nth-child(21) {

	animation: fadeinrow 3s forwards;
}

.in-view .subtitle-exploded:nth-child(22) {

	animation: fadeinrow 3.1s forwards;
}

.in-view .subtitle-exploded:nth-child(23) {

	animation: fadeinrow 3.2s forwards;
}

.in-view .subtitle-exploded:nth-child(24) {

	animation: fadeinrow 3.3s forwards;
}

.in-view .subtitle-exploded:nth-child(25) {

	animation: fadeinrow 3.4s forwards;
}

.in-view .subtitle-exploded:nth-child(26) {

	animation: fadeinrow 3.5s forwards;
}

.in-view .subtitle-exploded:nth-child(27) {

	animation: fadeinrow 3.6s forwards;
}

.in-view .subtitle-exploded:nth-child(29) {

	animation: fadeinrow 3.7s forwards;
}

.in-view .subtitle-exploded:nth-child(30) {

	animation: fadeinrow 3.8s forwards;
}

.in-view .subtitle-exploded:nth-child(31) {

	animation: fadeinrow 3.9s forwards;
}

.js-active img {

	opacity: 0;

}

.js-active.in-view img {

	animation: fadeinrow 0.5s forwards;
	animation-delay: 0.5s;
}

.js-active p {

	opacity: 0;

}

.js-active.in-view p {

	animation: fadeinrow 0.5s forwards;

}

.js-active .section-button {

	opacity: 0;

}

.js-active.in-view .section-button {

	animation: fadeinrow 1s forwards;
	animation-delay: 1s;

}

.contact-map {

	background: url('../images/map.jpg') no-repeat left;

}

@keyframes subtitle-underline {

	0% {

		opacity: 0;
		left: -1000px;

	}



	100% {

		opacity: 1;
		left: 0px;
	}

}


#account-title {


	background: #f1f1f1;
}

#account-subtitle {

	border-bottom: 1px solid #d1d1d1;
	margin: 20px;
	text-align: center;

}

#account-status-value {

	text-align: center;

}

@media screen and (max-width: 1000px) {
	blockquote.warning {
		margin: 0;
		max-width: 95%;
		margin-left: auto;
	}

























	#page-title-banner-wrapper-technical-support {
		overflow: hidden;
		position: relative;
		box-sizing: border-box;
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
		padding: 15px;
		width: 100%;
		height: 200px;
		background: #58bd91;
		background: -moz-linear-gradient(45deg, #9158bd 0%, #0A8898 100%);
		background: -webkit-linear-gradient(45deg, #9158bd 0%, #0A8898 100%);
		background: linear-gradient(45deg, #9158bd 0%, #0A8898 100%);
		background: url(../images/csa.png) no-repeat center;
		;

	}




	#page-title-banner-wrapper-technical-support:after {


		content: '';
		position: absolute;
		width: 100%;
		height: 300px;
		background: url(../images/warp-bottom-3.png) no-repeat bottom center;
		background-size: cover;
		top: -250px;
		left: 0px;
		animation: flow 1s forwards;

	}


	#page-title-banner-wrapper-contact {

		height: 480px;

	}



}





#hero-lines #cline {

	stroke: #31363f;
}

#hero-dots #dt1 {

	animation: hero-dots-anim 2s forwards, hero-dots-infin-anim 5s infinite;
	animation-delay: 0s, 4s;


}


#hero-dots #dt2 {

	animation: hero-dots-anim 2.1s forwards, hero-dots-infin-anim 5s infinite;
	animation-delay: 0s, 4.1s;

}

#hero-dots #dt3 {

	animation: hero-dots-anim 2.2s forwards, hero-dots-infin-anim 5s infinite;
	animation-delay: 0s, 4.2s;

}

#hero-dots #dt4 {

	animation: hero-dots-anim 2.3s forwards, hero-dots-infin-anim 5s infinite;
	animation-delay: 0s, 4.3s;

}

#hero-dots #dt5 {

	animation: hero-dots-anim 2.4s forwards, hero-dots-infin-anim 5s infinite;
	animation-delay: 0s, 4.4s;

}

#hero-dots #dt6 {

	animation: hero-dots-anim 2.5s forwards, hero-dots-infin-anim 5s infinite;
	animation-delay: 0s, 4.5s;

}

#hero-dots #dt7 {

	animation: hero-dots-anim 2.6s forwards, hero-dots-infin-anim 5s infinite;
	animation-delay: 0s, 4.6s;

}

#hero-dots #dt8 {

	animation: hero-dots-anim 2.7s forwards, hero-dots-infin-anim 5s infinite;
	animation-delay: 0s, 4.7s;

}

#hero-dots #dt9 {

	animation: hero-dots-anim 2.8s forwards, hero-dots-infin-anim 5s infinite;
	animation-delay: 0s, 4.8s;

}

#hero-dots #dt10 {

	animation: hero-dots-anim 2.9s forwards, hero-dots-infin-anim 5s infinite;
	animation-delay: 0s, 4.9s;

}

#hero-dots #dt11 {

	animation: hero-dots-anim 3s forwards, hero-dots-infin-anim 5s infinite;
	animation-delay: 0s, 5s;

}

#hero-dots #dt12 {

	animation: hero-dots-anim 3.1s forwards, hero-dots-infin-anim 5s infinite;
	animation-delay: 0s, 5.1s;

}

#hero-dots #dt13 {

	animation: hero-dots-anim 3.2s forwards, hero-dots-infin-anim 5s infinite;
	animation-delay: 0s, 5.2s;

}

#hero-dots #dt14 {

	animation: hero-dots-anim 3.3s forwards, hero-dots-infin-anim 5s infinite;
	animation-delay: 0s, 5.3s;

}

#hero-dots #dt15 {

	animation: hero-dots-anim 3.4s forwards, hero-dots-infin-anim 5s infinite;
	animation-delay: 0s, 5.4s;

}

#hero-dots #dt16 {

	animation: hero-dots-anim 3.5s forwards, hero-dots-infin-anim 5s infinite;
	animation-delay: 0s, 5.5s;

}

#hero-dots #dt17 {

	animation: hero-dots-anim 3.6s forwards, hero-dots-infin-anim 5s infinite;
	animation-delay: 0s, 5.6s;

}

#hero-dots #dt18 {

	animation: hero-dots-anim 3.7s forwards, hero-dots-infin-anim 5s infinite;
	animation-delay: 0s, 5.7s;

}

#hero-dots #dt19 {

	animation: hero-dots-anim 3.8s forwards, hero-dots-infin-anim 5s infinite;
	animation-delay: 0s, 5.8s;

}

#hero-dots #dt20 {

	animation: hero-dots-anim 3.9s forwards, hero-dots-infin-anim 5s infinite;
	animation-delay: 0s, 5.9s;

}

#hero-dots #dt21 {

	animation: hero-dots-anim 4s forwards, hero-dots-infin-anim 5s infinite;
	animation-delay: 0s, 6s;

}

#hero-dots #dt22 {

	animation: hero-dots-anim 4.1s forwards, hero-dots-infin-anim 5s infinite;
	animation-delay: 0s, 6.1s;

}

#hero-dots #dt23 {

	animation: hero-dots-anim 4.2s forwards, hero-dots-infin-anim 5s infinite;
	animation-delay: 0s, 6.2s;

}

#hero-dots #dt24 {

	animation: hero-dots-anim 4.3s forwards, hero-dots-infin-anim 5s infinite;
	animation-delay: 0s, 6.3s;

}

#hero-dots #dt25 {

	animation: hero-dots-anim 4.4s forwards, hero-dots-infin-anim 5s infinite;
	animation-delay: 0s, 6.4s;

}

#hero-dots #dt26 {

	animation: hero-dots-anim 4.5s forwards, hero-dots-infin-anim 5s infinite;
	animation-delay: 0s, 6.5s;

}


@keyframes hero-dots-anim {
	0% {
		opacity: 0;

	}

	25% {

		opacity: 0;
		fill: #22252b;
	}

	75% {

		opacity: 1;
		fill: #184953;
	}


	100% {
		opacity: 1;
		fill: #00ced1;
	}
}

@keyframes hero-dots-infin-anim {
	0% {
		opacity: 1;
	}

	50% {

		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

#divider {
	stroke-dasharray: 44 46;
	stroke-dashoffset: 45;
	animation: divider_line 4s linear 0ms forwards;
}

@keyframes divider_line {
	75% {

		stroke-dashoffset: 45;

	}

	100% {
		stroke-dashoffset: 0;
	}
}