@charset 'UTF-8';

html,
html * {
  box-sizing: content-box;
  margin: 0;
  padding: 0;
  font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
  font-family: 'Teko', Helvetica, Arial, Lucida, sans-serif;
  font-size: 18px;
  word-spacing: normal;
  
 
}

.header {
	z-index: 10;
	background-color:rgba(255,255,255,1);
	background-color: white;
    /*margin-top:0.2em;*/	
	
    
}

.logobanner {
	position: relative;
	width:100vw;
	height: fit-content;
}

/*.icon-bar {
	position: fixed;
	z-index: 10000;
	top: 60px;
	right: 60px;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
	width: 200px;
	height: fit-content;
  }

  .phone {
	width: 40px;
  }

  .mail {
	width: 60px;
  }

  .icon-bar a {
	width: 40px;
	height: 40px;
  }

  .icon-bar a img {
	width:inherit;
  }

  .icon-bar a:hover img {
	background-color: rgba(255,255,255,0);
	filter:brightness(0.9);
	width:100%;
	
  }
  
  .icon-bar a {
	display: block;
	text-align: center;
	padding: 16px;
	transition: all 1s ease;
	color: white;
	font-size: 20px;
  }*/

/*body*/
@import "compass/css3";

 * {box-sizing: border-box;}
 
 body:before {
	z-index:0;
	content: "";
	
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height:100vh;
	overflow-y:hidden;
	}

	body {
		background-color: white;
		
		width: 100vw;
		height:100vh;
		margin: 0;
		padding: 0;
		overflow-y:visible;
	}


	body:before {
		z-index:0;
		content: "";
		
		position: relative;
		position: fixed;
		width: 100vw;
		height: 100vh;
		background-size: cover;
		-webkit-background-size: cover;
  		-moz-background-size: cover;
  		-o-background-size: cover;
		
		}

		.crossfade > figure {
			z-index: 1;
			background-color: #000000;
			
			animation: imageAnimation 24s linear infinite 0s;
			-webkit-animation: imageAnimation 24s linear infinite 0s;
			backface-visibility: hidden;
			background-size: cover;
			-webkit-background-size: cover;
			  -moz-background-size: cover;
			  -o-background-size: cover;
			background-position: center center;
			background-attachment: fixed;
			height:240vh;
			
			
			left: 0px;
			opacity: 0;
			position: absolute;
			top: 0px;
			width: 100%;
			z-index: -1;
			position: fixed;
			
		  }
		
		  .crossfade > figure {
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100vh;
			z-index: -1;
			transform: scale(1.0); 
			&:after {
				content: "";
				display: block;
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				opacity: 0.5;
				background-position: center;
				background-size: cover;
				background-repeat: no-repeat;
		  			}
		  }
		
		  
		
		.crossfade > figure:nth-child(1) { 
			background-color: #f3efef;
			filter:brightness(0.9);
			/*background-image: url("../images/Home/bluebells_50per.jpg");*/
			background-image: url("../images/Home/sunderland.jpeg"); 
			
			
		}
		
		.crossfade > figure:nth-child(2) {
			  animation-delay: 8s;
			  filter:brightness(0.6);
			  
			  background-image: url("../images/Home/FEA_model.png");
		}
		
		.crossfade > figure:nth-child(3) {
			  animation-delay: 16s;
			  filter:brightness(0.7);
			  background-image: url("../images/Noisemodelling/Morris_Metal.jpg");
			
		}

	
		
		
		
		@keyframes 
		imageAnimation {  0% {
		 animation-timing-function: ease-in;
		 opacity: 0;
		}
		 8% {
		 animation-timing-function: ease-out;
		 opacity: 1;
		}
		 17% {
		 opacity: 1
		}
		 /*25% {
		 opacity: 0
		}*/
		
		45% {
		opacity: 0
		}
		
		 100% {
		 opacity: 0
		}
		}
	

.site-logo img {
  position: relative;
  width: 30vw;
  height: auto;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 0px;
  align-content: center;
  /*filter: drop-shadow(-6px 8px 4px rgba(255, 255, 255, 0.9));*/
  
  }

	
.logo {
  display: block;
}

/* beginning - navigation bar * beginning - navigation bar * beginning - navigation bar */

/*-----Start-------------------navigation bar style code------------Start-----------*/
.sitenavbanner {
	position:relative;
	width: 100vw;
	height: fit-content;
	
	background-color: rgba(255, 255, 255, 0);
	/*-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);*/
}

/*.sitenavbanner .site-logo {
	float: left;
}*/

.site-nav ul li a {
	color:rgb(61, 61, 206);
	color:white;
}

.contact {
float: right;
top: 30px;
z-index:10;
}

.contact p {
	color: white;
	/*color:rgb(61, 61, 206);*/
}

.contact ul li a {
	z-index: 10;
	color: white;
	font-size:  24px;
	cursor: pointer;
}

.contact a:hover {
	color:orange;
	cursor: pointer;
	
}






.contact {
	display: none;
}


h1 {
	font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
	text-align: center;
	font-size: 20px;
	font-weight: 400;
	font-style: bold;
	width: inherit;
	margin-left: auto;
	margin-right:auto;
	margin-bottom: 20px;
	line-height: 1.25;
	

	
	
	
}

h2 {
	width:90%;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
	font-weight: 300;
	font-size: 30px;
	line-height: normal;
	
	/*text-shadow: 4px 4px 8px rgba(0, 0, 0,.5);*/
	letter-spacing: 0px;
	padding-top: 0px;
	padding-bottom: 5px;
	font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	color: white;
	
}




h3 {
	width: 60%;
	margin-left: auto;
	margin-right: auto;
	font-size: 26px;
	
	text-align: justify; 
	font-weight: 400;
	color:black;
	
}



h4 {
	color: white;
	font-family: "Open-Sans", Sans-serif;
	text-align: center;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	font-size: 24px;
	font-weight: 350;
	line-height: normal;
	text-transform: none;
	padding-bottom: 2vh;
	padding-top: 20px;
	color: rgb(0, 0, 79);
}

h5 {
	text-align: center;
	padding: 15px;
}

p {
	
	font-size: 18px;
	font-weight: 400;
	text-transform: none;
	margin: 0px 0px 0px 0px;
	line-height: 1.25;
	padding-top:0px;
	color: rgba(250, 250, 250, 1);
	color: black;
	
}

p + p {
	margin-top: 10px;
}



a {
	text-align:center;
	font-size: inherit;
	font-weight: 500;
	/*text-transform: none;*/
	line-height: normal;
	padding-top:0px;
	
	cursor:pointer;
}

strong {
	font-size: inherit;
}

/*-- article---- article---- article---- article---- article---- article---- article---- article---- article---- article--*/

@keyframes slide {
	from {
	transform: translateX(0);
	}
	to {transform: translateX(-100%);
	}
}




  

  .container {
	z-index: 0;
	position: relative;
	width: 100vw;
	/**height: fit-content;**/
	/*background-color: white;*/
	/*background-color:rgb(48, 48, 170);**/
	margin-top: 150px;
	margin-bottom:0px;
	
	}

	.container .window {
		position: relative;
		display:block;
		
		width: 100vw;
		height:fit-content;
		color:rgba(255, 255, 255,0);
		
		
	}

	

	.container .window h1 {
		position:relative;
		font-size: 30px;
		top:-100px;
		
		color: white;
		text-align: center;
		font-weight: 800;
	}

	.container .window h2 {
		position: absolute;
		font-size: 30px;
		top:-40px;
		color: white;
		text-align: center;
		font-weight: 400;
		
	}

	.container .window p {
		width: 90%;
		margin-left: auto;
		margin-right: auto;
		
		color: white;
		
		margin-bottom: 0px;
	}

	.container .two-sectors {
		background-color:rgb(48, 48, 170);
		padding-bottom:15px;
	}

	.container .two-columns {
		padding-top:5px;
	}

	.container .two-columns .caption-box1 h2 {
		font-size: 26px;
		padding:15px;
		color:white;
		color:black;
		text-transform: uppercase;
		text-align: center;
		line-height: 1.25;
		padding-top: 50px;
		padding-bottom: 25px;
	}



.container .two-columns .caption-box1 p {
	font-size: 20px;
	font-weight: 300;
	width: 95vw;

	text-align: center;
	margin-left: auto;
	margin-right: auto;
}


	

.container .two-columns .caption-box1 h3 {
	font-size: 18px;
	text-align: center;
	width: 95%;
	margin-left: auto;
	margin-right: auto;
	margin-top: 20px;
	margin-bottom:20px;
	font-weight: 350;
	line-height: 1.5;
	
	}

	

	

	.container .wrapper {
		position: relative;
		width:90%;
		margin-left: auto;
		margin-right: auto;
		height: 25vh;
		
	}

.cap_intro {
	background-color:rgba(250, 250, 250, 0);
}



  .alternate-text {
	position: absolute;
	z-index: -1;
  }
  
  .alternate-text:nth-of-type(1){
	animation-name: fade;
	animation-fill-mode: both;
	animation-iteration-count: 1;
	
	animation-duration: 8s;
	animation-direction: normal;
  }
  
  .alternate-text:nth-of-type(2){
	animation-name: fade;
	animation-fill-mode: both;
	animation-iteration-count: 1;
	animation-delay: 8s;
	animation-duration: 8s;
	animation-direction: normal;
  }
  
  .alternate-text:nth-of-type(3){
	animation-name: fadelast;
	animation-fill-mode: both;
	animation-iteration-count: 1;
	animation-delay: 16s;
	animation-duration: 8s;
	animation-direction: normal;
  }
  
  @keyframes fade{
	  0% {
		opacity: 0;
	  }
	  15% {
		opacity: 1;
	  }
	  85% {
		opacity: 1;
	  }
	  100% {
		opacity: 0;
	  }
	}
	
	@keyframes fadelast{
		0% {
		  opacity: 0;
		}
		15% {
		  opacity: 1;
		}
		100% {
			opacity: 1;
		  }
	  }

.gmap {
	z-index:-1;
	position: relative;
	text-align: right;
	height: 50vh;
	width: 100%;
	
}

.gmap_canvas {
	overflow: hidden;
                background: none !important;
                height: 100%;
                width: 100%;
				
				
}

#services {
	width:  75%;
	margin-left:auto;
	margin-right: auto;
}

#services p {
color:white;
font-size: 30px;
padding-top: 25px;
padding-bottom:25px;
text-align: center;
font-weight: 300;
}

#services ul li p {
	font-size: 26px;
	text-align: left;
	line-height: 1.5;
	font-weight: 200;
	padding-top: 10px;
	padding-bottom:10px;
	/**padding-left: 10em;
	text-indent: -10em;*/
}

#services a {
	color:white;
}
	

/*@keyframes 
imageAnimation {  0% {
 animation-timing-function: ease-in;
 opacity: 0;
}
 8% {
 animation-timing-function: ease-out;
 opacity: 1;
}
 17% {
 opacity: 1
}


45% {
opacity: 0
}

 100% {
 opacity: 0
}
}*/

.container .two-columns .caption-box1 .three-columns {
	margin-left: auto;
	margin-right: auto;
	height: fit-content;
	width: 100%;
	margin-bottom:30px;
	background-color: rgba(255, 255, 255, 0);
}

.container .two-columns .caption-box1 .three-columns .inner a {
	text-decoration: none;
	color: black;
	font-size: inherit;
}

.container .two-columns .caption-box1 .three-columns .inner {
	position: relative;
	width: 95%;
	margin-left:auto;
	margin-right:auto;
	height: fit-content;
	background-color: rgb(222, 233, 237);
	border-radius: 15px;
	box-shadow: -4px 4px 8px 4px rgba(0, 0, 0, 0.2), -4px 6px 10px 6px rgba(0, 0, 0, 0.19);
	
}

.container .two-columns .caption-box1 .three-columns .inner ul {
	width: 100%;
}

.container .two-columns .caption-box1 .three-columns .inner ul li {
	list-style-type: none;
	border: none;
}

.container .two-columns .caption-box1 .three-columns .inner ul li h2 {
	font-size: 18px;
	padding: 0px 0px 0px 0px;
}

.container .two-columns .caption-box1 .three-columns .inner ul li p {
	
	padding: 0px 0px 0px 0px;
}

.container .two-columns .caption-box1 .three-columns  img {
	width: 100%;
	margin-top: 0;
	border-radius: 0px;
}

.container .two-columns .caption-box1 .three-columns  a {
	padding: 0;
	height: 0;
}

.container .two-columns .caption-box1 .three-columns  a h3 {
	position: absolute;
	text-align:center;
	top:50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: fit-content;
	margin: 0 0;
	font-size: 30px;
	font-weight: 355;
	padding: 0;

	
	
}

.container .two-columns .caption-box1 h3 {
	font-size: 26px;
}

.container .two-columns .caption-box1 p {
	width: 90%;
}

.container .two-sectors .caption-box-offset {
	position:relative;
	margin-top: 0px;
	width: fit-content;
	height: fit-content;
	margin-left: auto;
	margin-right: auto;
	background-color: rgb(222, 233, 237);
	border-radius: 15px;
	
	/*border-style: solid;
	border-color: rgb(61, 61, 206);
	/*border-width: 2.5px;*/
	box-shadow: -4px 4px 8px 4px rgba(0, 0, 0, 0.2), -4px 6px 10px 6px rgba(0, 0, 0, 0.19);
	
}

.container  .two-sectors .caption-box-offset h2 {
		padding: 20px 0px 20px 0px;
		color:black;
		font-size: 20px;
		font-weight: 330;
		text-transform: uppercase;
}


.container .two-sectors .caption-box-offset ul {
	padding-bottom: 20px;
}
.container  .two-sectors .caption-box-offset ul li {
	list-style-type: none;
	padding: 10px;
	text-align: left;
	margin-left: 20px;
}

.container .two-sectors .caption-box-offset ul li a {
	font-size: 16px;
	font-weight: 330;
	text-decoration: none;
	color: rgb(0, 0, 74);

}



.container .two-columns .caption-box1  .three-columns {
		
	margin-left: auto;
	margin-right: auto;
	height: fit-content;
	margin-bottom:30px;
	
	
/*margin-left: auto;
margin-right:auto;
height:fit-content;	
display: grid;
grid-template-columns: 33% 34% 33%;*/
}

.container .two-columns {
	width: 100vw;
	margin-top: 50px;
	margin-left: auto;
	margin-right: auto;
	height: fit-content;
	margin-bottom:30px;
	margin-top: 0px;
	/*border: 1px solid #8d8a8a;*/
	
	
}


.container .two-columns .caption-box1 {
	position: relative;
	width: 95%;
	margin-left:auto;
	margin-right:auto;

	background-color: rgba(255,255,255,0);
	

	height: fit-content;
	

	/*border-color: black;
	box-shadow: -2px 2px 4px 2px rgba(0, 0, 0, 0.2), -2px 3px 5px 3px rgba(0, 0, 0, 0.19);*/
	

}
	.caption-box1 img {
		width: 100%;
		margin-bottom: 0px;
		margin-left: auto;
		margin-right:auto;
		
		
	}
	

	
	.container .two-columns .caption-box1 h2 {
		color:white;
		color: black;
		
		/*color: darkslategrey;*/
		font-size: 20px;
		margin-top: 20px;
		padding: 10px;
		font-weight: 330;

	}

	.caption-box1 h3 {
		
		font-size: 17px;
		width: 95%;
		font-weight: 400;
		padding: 0px 0px;
		margin: 0px 10px 0px 10px;
		
	}

	.caption-box1 p {
	font-size: 18px;
	font-weight: 300;
	line-height: 1.5;
	width: 75%;
	margin-left: auto;
	margin-right: auto;
	text-align: justify;
	padding:10px;
	color:white;
	color: black;
	}
	
	.caption-box1 a {
		font-size: 22px;
		line-height: 2vw;
		padding: 0.25em;
		font-weight: 100;
		margin-left: auto;
		margin-right:auto;
		color:rgb(155, 85, 61);
		color:white;
		/*text-decoration: none;*/
		letter-spacing: normal;
	}

	.caption-box1 a:hover {
			color: rgba(245, 245, 245, 0.817);
	}

	.caption-box1 a:focus {
		color: rgba(245, 245, 245, 0.41);
}

	
	.container .two-columns .caption-box1 .three-columns div p {
		text-align: justify;
		color: black;
		
		font-size: 16px;
		width: 90%;
		padding: 10px;
		margin-left: auto;
		margin-right: auto;
	}

		
	.caption-box1 ul {
	
		margin-left: 30px;
		
	}

	.caption-box1 ul li {
		padding:5px;
		margin-left: 30px;
		width: calc(95% - 30px);
		line-height: 1.5;
		margin: 5px;
		border: #8d8a8a;
		border: 1px solid black;
		border-radius: 7.5px;;
	}

	.caption-box1 ul li p {
		padding:0px;
		margin-left: 30px;
		width: calc(95% - 30px);
	}




	.container .banner {
		margin-top:40px;
		width: 90%;
		margin-left: auto;
		margin-right: auto;
				
	}

	.container .banner h3 {
		text-align: center;
		margin-left: auto;
		margin-right: auto;
		width:100%;
		color: white;
	}

	.container .banner p {
		text-align: center;
		color: white;
	}

	.container .banner a {
		color: white;
	}


	.blocks {
		width: 80vw;
		margin-left: auto;
		margin-right: auto;

	}
	
		.blocks ul {
			margin-left: 50px;
			width: fit-content;
			margin-left: auto;
			margin-right: auto;
			

		}

	 ul li p {
			font-size: 18px;
			padding:  0px 0px 0px 0px;
		}
	
	.container .two-columns ul {
		text-align: center;
		color: white;
		font-size: 22px;
		list-style-type: none;
		
		
	}

	.container .two-columns ul li {
		padding:10px;
	}
	

	.container .two-columns ul li p {
		color: white;
		font-size: 22px;
	}

	.container .two-columns .caption-box1 .three-columns ul li {
		text-align: left;
		color: white;
		font-size: 22px;
		list-style-type: symbols(-);
		padding:0px;
	}

	.container1 {
		z-index:5;
		position: relative;
		margin-top: 8vh;
		width:100vw;
		height: 100vh;
		background-color: white;
	}

	.caption-box1 {
		height: fit-content;
	}

	/*.caption-box {
		position: relative;
		padding: none;
		width:90vw;
		margin-left: auto;
		margin-right: auto;
		height: fit-content;
		background-color: white;
		margin-top: 20px;
		margin-bottom: 20px;
		border-radius: 10px;
		
		
		}*/
	
	.caption-box  h2 {
		color: black;

	}

	.caption-box  p {
		color: black;
		padding:10px;
		text-align: left;

	}
  
	.caption-box .row1 {
	  width: 100%;
	  height: fit-content;
	  margin-left: auto;
	  margin-right: auto;
	 
	  display: grid;
	  grid-template-columns: 50% 50%;
	  

	  border: none;
	  margin: 0px 0px 0px 0px;
	  padding: 0px 0px 0px 0px;
	

	  background-color: transparent;
  }

  

  .caption-box .row1 .box {
	  display: block;
	  width:40vw;
	  margin-left: 0px;
	  padding-left: 0px;
	  margin: 0px 0px 0px 0px;
	  padding: 0px 0px 0px 0px;
	  Margin-left: auto;
	  margin-right: auto;
	  
	 
	  height: fit-content;
	  border-radius: 10px;
		margin-bottom: 5vw;
	  background-color: transparent;
	
  }

  .caption-box .row1 .box a {
	  width: inherit;
	  padding: 0px;
	

  }


  .caption-box .row1 .box h2 {
	  width:inherit;
	  text-align:left;
	  word-wrap:inherit;
	  text-align: center;
  }

  .consultancy {
	position: relative;
	width: 100%;
	
	margin-left: auto;
	margin-right: auto;
	background-color: white;

  }

  .consultancy .services {
	width: 90%;
	padding-top: 10px;
	padding-bottom:20px;
	margin-left: auto;
	margin-right:auto;
  }

  .consultancy .services h2 {
	font-weight: 400;
	width:90%;
	margin-left: auto;
	margin-right:auto;
	margin-top:60px;
	text-align: left;
	margin-left: 0px;
	color: black;
  }

  .consultancy .services h3 {
	width: 100%;
	font-size: 24px;
	line-height: 32px;
	color: white;
	color: black;
	font-weight:400;
	margin-top: 20px;
  }

  .consultancy .services p {
font-size: 22px;
color: white;
color: black;
font-weight: 300;

  }

  .consultancy > ul {
	margin-top:10px;
	margin-left: 50px;
	margin-bottom: 20px;
}

.consultancy ul li {
	margin-left: 10px;
}

.consultancy ul li::marker {
	color: white;
}

  #inverse_container {
	background-color: rgb(222, 233, 237);
	margin-top: -20px;
}

#inverse {
	border:rgb(61, 61, 206);
}




  .button_contact {
	
	display: inline-block;
	color: black;
	font-size: 22px;
	margin-left: auto;
	margin-right: auto;
	height: fit-content;
	width: max-content;
	padding: 10px;
	
	text-align: center;
	text-decoration: none;
	
	cursor: pointer;
	border-radius: 15px;
   
   
	box-shadow: -2px 2px 4px 2px rgba(0, 0, 0, 0.2), -2px 3px 5px 3px rgba(0, 0, 0, 0.19);
  
  background-image: linear-gradient(rgba(255,255,255,.1), rgba(255,255,255,.05) 49%, rgba(0,0,0,.05) 51%, rgba(0,0,0,.1));
  border: 3px groove rgba(78, 78, 78, 0.333);

  }

  .click2page {
	
	display: inline-block;
	color: black;
	font-size: 22px;
	padding: 10px;
	margin-left: auto;
	margin-right: auto;
	bottom: 20px;
	
	width:max-content;
	
	
	text-align: center;
	text-decoration: none;
	
	cursor: pointer;
	border-radius: 15px;
   
   
	box-shadow: -2px 2px 4px 2px rgba(0, 0, 0, 0.2), -2px 3px 5px 3px rgba(0, 0, 0, 0.19);
  
  background-image: linear-gradient(rgba(30, 55, 147, 0.1), rgba(20, 41, 135, 0.05) 49%, rgba(57, 9, 214, 0.05) 51%, rgba(74, 27, 182, 0.1));
  border: 3px groove rgba(78, 78, 78, 0.333);   
  }

.three-columns {
	position: relative;
	height: fit-content;
	
	text-align: center;
	margin-left: 0px;
	margin-left: auto;
	margin-right: auto;
}

/*.two-columns div {
	position: relative;
	height: fit-content;
	width: 98%;
	text-align: center;
	margin-left: 0px;
	margin-left: auto;
	margin-right: auto;
}*/

.two-columns .caption-box1 h2 {
	color: white;
	color: black;
}

.two-columns .caption-box1 p {
	color: white;
	color:black;
	
}

.two-columns .caption-box1 a {
	color: white;
	color:black;
	font-weight: 330;
	text-align: center;
	padding:0px;
	
}



.button_contact {
	
	display: inline-block;
	color: black;
	font-size: 22px;
	margin-top: 15px;
	margin-left: auto;
	margin-right: auto;
	height: fit-content;
	width: 90%;
	padding: 10px;
	margin-bottom: 30px;
	text-align: center;
	text-decoration: none;
	
	cursor: pointer;
	border-radius: 15px;
   
   
	box-shadow: -2px 2px 4px 2px rgba(0, 0, 0, 0.2), -2px 3px 5px 3px rgba(0, 0, 0, 0.19);
  
  background-image: linear-gradient(rgba(255,255,255,.1), rgba(255,255,255,.05) 49%, rgba(0,0,0,.05) 51%, rgba(0,0,0,.1));
  border: 3px groove rgba(78, 78, 78, 0.333);

  }




.caption-box p {

	padding-top: 10px;
	font-weight: 330;
}



#call_pro {
	   
	margin-left: auto;
	margin-right: auto;
	padding-bottom: 20px;
	padding-top: 0px;

  
 	text-align: center;

   
   height: fit-content;
   
}
.container1 {
	height: fit-content;
}
.caption-box2 {
	height: fit-content;
}
.container1 .caption-box2 h2{
	padding:20px;
}

.container1 .caption-box2 p {
	text-align: left;
	padding:15px;
} 

.author-bio__media img {
	position: relative;
	height: 200px;

	
}



	 

  

	

	  
 




  

  
  


	
	
	
	

/*-- COntainer descriptions---- Field descriptions---- Field descriptions---- Field descriptions---- Field descriptions--*/





/*--beginning of the footer----beginning of the footer----beginning of the footer----beginning of the footer----beginning of the footer----beginning of the footer----beginning of the footer----beginning of the footer--*/
footer {
	/*margin-top:20em;*/
	height: fit-content;
	z-index:100;
	padding-top: 2em;
	margin-top:-2em;
	background-color: rgb(56, 58, 60, 1);
}
.footer-content {
	position:relative;
	bottom: 0px;
    width: 100vw;
	margin-left: auto;
	margin-right:auto;
	padding-bottom: 1.7em;
}
.footer-social {
	display: inline-block;
	width: 100%;
	list-style-type: none;
	text-align: center;
}
.footer-social li {
	display: inline-block;
	padding: 5px;
	
}
.footer-social li a {
	text-align: center;
	font-size: 16px;
	line-height: 3.5em;
	display: inline-block;
	width: 58px;
	height: 58px;
	text-align: center;
	/*padding: 0px 25px 0px 25px;*/
	/*--border: 2px solid rgba(255,255,255,.3);--*/
	
}

.footer-social li p {
	text-align: center;
	font-size: 16px;
	line-height: 3.5em;
	display: inline-block;
	width: 58px;
	height: 58px;
	text-align: center;
	/*--border: 2px solid rgba(255,255,255,.3);--*/
	
}


.footer-social li a img {
	width: auto;
	height: 58px;
	
}
.footer-social li a .social-hover {
	display: none;
}
.footer-social li a:hover .social-default {
	display: none;
}
.footer-social li a:hover .social-hover {
	display: inline;
}

.footer-row_4 {

		display: block;
		width: 100vw;
		margin-left: auto; 
		margin-right: auto;
	}

.footer-column {
	padding: 20px 20px 20px 20px;
}

.footer-column h3 {
font-size: 18px;

font-weight: 330;
}

.footer-column p {
	font-size: 16px;
	color: white;
	font-weight: 300;
	text-align: justify;
	padding: 10px 15px 10px 15px;
	line-height: 20px;
	}

	

	.footer-column ul li {
		color: white;
		font-size: 16px;
		font-weight: 300;
		list-style: none;
		line-height: 22px;
		margin-left: 50px;
	}

	.footer-column ul li a {
	color: white;
	font-size: 16px;
	}



.footer-info {
	width: 100vw;
	
}

.footer-info-box {
	width:80%;
	margin-top: 30px;
	margin-left:  auto;
	margin-right: auto;
	padding-bottom: 1.5em;
}



.footer-info-box a {
	font-size: 1em;
	color:white;
	font-weight: 300;
	line-height: 1.55em;
	/*max-width: 40em;*/
	text-align: center;
}

.footer-info-box p {
	font-size: 18px;
	color:white;
	font-weight: 300;
	line-height: 1.55em;
	/*max-width: 40em;*/
	text-align: center;
}

.footer-disclaimer {
	font-weight: 300;
	color:white;
}

.reg-address {
	padding-bottom: .2em;
	font-weight: 450;
	letter-spacing: 0.4px
}
.footer-legal {
	opacity: .8;
}
.footer-credit a {
	text-decoration:none;
}

.footer-credit a:hover {
	text-decoration: none;
}






@media only screen and (min-width: 488px) {


	.crossfade > figure {
		height:100vh;
	}

	.site-logo img {
		
		width: auto;
		height: 20vh;
		height: 200px;
	
		}












/* iPad and tablets */

@media only screen and (min-width: 768px) {

	body:before {
		z-index:0;
		content: "";
		background-color: transparent;
		position: relative;
		position: fixed;
		width: 100vw;
		height: 100vh;
		background-size: cover;
		-webkit-background-size: cover;
  		-moz-background-size: cover;
  		-o-background-size: cover;
		
		}
	
	
	.crossfade > figure {
		/*z-index: -1;*/
		background-color: #000000;
		
		animation: imageAnimation 24s linear infinite 0s;
		-webkit-animation: imageAnimation 24s linear infinite 0s;
		backface-visibility: hidden;
		background-size: cover;
		-webkit-background-size: cover;
		  -moz-background-size: cover;
		  -o-background-size: cover;
		background-position: center center;
		background-attachment: fixed;
		height:480vh;
		
		
		left: 0px;
		opacity: 0;
		position: absolute;
		top: 0px;
		width: 100%;
		z-index: -1;
		position: fixed;
		
	  }

	

	.logobanner {
		position: relative;
		width:100vw;
		height: fit-content;
	}

	
	
	.sitenavbanner {
		position: relative;
		width: 100vw;
		height: fit-content;
	}

	
	
	
	h2 {
		font-size: 30px;
	
		
	}

	h3 {
		font-size: 20px;
		margin: 0px 0px 0px 0px;
	}



	p {
		font-size: 22px;
	}

	.caption-box1 a {
		font-size: 22px;
	}


	.container {
		width:100vw;
		
	}

	.container .ehm {
		display:block;
		
		width:40%;
		margin-left: auto;
		margin-right: auto;
	}

	

	.container .two-columns .caption-box1 .three-columns {
		width: 100%;
		margin-left: auto;
		margin-right:auto;
		height:fit-content;	
		display: grid;
		grid-template-columns: 33% 33% 33%;
		/*grid-template-columns: 50% 50%;*/
	}

	.container .three-columns .caption-box {
		width: 90%;
		margin-left: auto;
		margin-right: auto;
		height: max-content;
	}

	.container .three-columns .caption-box p {
		font-size: 22px;
	}


	.container .two-columns {
		width: 100%;
		margin-left: auto;
		margin-right: auto;
	}

	.container .two-columns .caption-box1 {
		width: 100%;
		margin-left: auto;
		margin-right: auto;
		height: fit-content;
		
	}

	.container .two-columns .caption-box1 p a {
	color:white;
	font-size: 22px;
}

.container .two-columns .caption-box1 p a:hover {
	color:darkgrey;
}

	
	
	.crossfade > figure {
		height:100vh;
	}
	

	.container .two-columns .caption-box1 .three-columns {
	width: 95%;
	Margin-left: auto;
	margin-right:auto;
	height: fit-content;

}
.container .two-columns .caption-box1 .three-columns .inner {
	height: 100%;
}

.container .two-sectors .caption-box1 .three-columns .inner h2 {
	font-size: 20px;
	
}

.container .two-columns .caption-box1 .three-columns .inner p {
	text-align: left;
}

.container .two-sectors .caption-box-offset {
	width: fit-content;
	margin-bottom: 20px;
}

.offset {
	width: fit-content;
}

.two-columns {
	width: 90%;
	Margin-left: auto;
	margin-right:auto;
	/*display: grid;
	grid-template-columns: 50% 50%;*/
}

.container .three-columns .caption-box1 {
	height:fit-content;
	height:100%;
}

.container .three-columns .caption-box {
	height:fit-content;
	

	
}
.caption-box1 h3 {
	font-size: 21px;
	font-weight: 400;
	padding: 10px 0px 10px 0px;
	width: 90%;
	margin-left: auto;
	margin-right: auto;
}


.button_contact {
	font-size: 24px;
	height: fit-content;
	width: 75%;		
}	  
	 	
	

	.click2page {
		font-size: 20px;
		
		padding: 5px;
		
		
	  
	  }
	
	#call_pro a .click2page {
		padding: 5px 10px 5px 10px;
		width:max-content;
		margin-bottom: 0px;
		
	}

	 
	
	
























/*iPad and Laptop View*/  

@media  (min-width: 1024px) { 
  
	header {	
	display:grid;
	grid-template-columns: repeat(12, 1fr);
	grid-auto-rows:min-content;
	grid-gap: 10px;	
	}	
	
	header .sitenavbanner {
		grid-column: 1/4;
		grid-row: 1/1;
		height: min-content;
	}

	header .contact {
		display:grid;
		grid-column: 8/12;
		grid-row: 1/1;
		height: fit-content;
		margin-bottom: 0px;
		top: 20px;
	}

	header .contact ul {
		margin-left: 0px;
		margin-right: 40px;
	}

	header .contact ul li {
		list-style-type: none;
		margin-top:-50px;
	}

	header .contact ul li p {
		font-size: 20px;
		color: white;
		/*color:rgb(61, 61, 206);*/
		
		text-align: left;
		line-height: 1.3;
		padding: 0px;
	}

	header .contact ul li p a {
		font-size: 20px;
		text-decoration: none;
		color: white;
		/*color:rgb(61, 61, 206);*/
		
		text-align: left;
	}

	header .contact ul li p a:hover {
		font-weight: bold;
		color: inherit;
		
	}

	header .site-nav {
		grid-column: 1/12;
		grid-row: 2/2;
		margin-bottom: 10px;
	}
		
	.sitenavbanner {
		position: relative;
		width: 100vw;
		height: fit-content;
	} 
	
	.logobanner .site-logo {
		display: block;
	}
	
	.logobanner .site-logo img {
		filter: drop-shadow(-6px 8px 4px rgba(25, 25, 25, 0.6));
	}

	.sitenavbanner 	.site-logo img {
			
			position:relative;
			width: 250px;
			height:auto;
			margin-top: 15px;
			margin-left: 20px;

		
	}
		
	.logo {
		display: block;
	}


	.container .window {
		
		width: 100vw;
		
	}

	.container .window h1 {
		position:relative;
		font-size: 42px;
		/*top: -200px;*/
		
		text-align: center;
	}

	.two-sectors {
		display: grid;
		grid-template-columns: 70% 30%;
	}

	/*.caption-box1 + .caption-box1 {
		margin-top:120px;
	}*/

	.container .two-sectors .two-columns .caption-box1 {
		position: relative;
		height: fit-content;
		background-color: rgba(255, 255, 255, 0);
		margin-bottom: 120px;
	}

	.container .two-columns .caption-box1  h2 {
		padding: 0px;
		margin: 0px;
		padding-top: 20px;
		padding-bottom: 20px;
		font-size: 42px;
		color: white;
		padding-left:none;
		padding-right: none;
		text-align: center;
	}

	.container .two-columns .caption-box1 h3 {
		padding-top: 10px;
		padding-bottom: 10px;
		font-size: 26px;
	}

	.container .two-columns  h4 {
		position: relative;
		height: fit-content;
		padding-top: 10px;
		padding-bottom: 10px;
		font-size: 26px;
	}

	.container .two-columns .caption-box1 p {
		font-size: 26px;
		font-weight: 300;
		width: 100%;
		text-align: center;
		margin-left: auto;
		margin-right: auto;
	}

	.container .two-columns .caption-box1 a {
		font-size: 26px;
		font-weight: 300;
		width: 100%;
		text-align: center;
		margin-left: auto;
		margin-right: auto;
		cursor:pointer;
	}
	
	.consultancy {
		width: 100%;
	}

	.consultancy .services {
		width: 75%;
		max-width: 1024px;
	}

	.consultancy h2 {
		margin-top: 50px;
	}

	.consultancy h3 {
		margin-top: 30px;
		margin-bottom: 10px;
	}
		


	h2 {
		/*width: 100%;*/
		font-size: 46px;
		text-transform: capitalize;
		
		margin-bottom: 0px;
		
		
	}
	
	.crossfade > figure {
		height: 100vh;
		
		
	  }
	
	 .container {
		width: 100vw;
		height:fit-content;
		margin-left: 0px;
		position: relative;
		padding:0px;
		/*margin-top: 300px;*/
		}

		
	
		.container .ehm {
			display:block;
			height: 30vh;
			width: auto;
			margin-left: auto;
			margin-right: auto;
			margin-bottom: 0;
		}

		.container .window {
			margin-bottom: 110px;
		}

		.container .window p {
			font-size: 20px;
		}

		

		.container .two-columns {
			height: max-content;
			margin-bottom:0px;
			margin-top:0px;
		}
		
		.container .two-columns .caption-box1 {
			height: 100%;
			background-color: rgba(255, 255, 255, 0);
		
			
		}

		.container .two-columns .caption-box1 h2 {
			color:black;
		}
		
		.container .two-columns {
			width: 90%;
			margin-left: auto;
			margin-right:auto;
			height:fit-content;	
			/*display: grid;
			grid-template-columns: 50% 50%;*/
			/*grid-template-columns: 50% 50%;*/
		}

		
		.container .two-columns .caption-box1 .three-columns {
			width: 100%;
			height:fit-content;
			margin-top: -100px;
			margin-left: auto;
			margin-right:auto;
			display: grid;
			grid-template-columns: 33% 33% 33%;
			background-color: rgba(255,255,255,0);
			
			
		}

		

		.container .two-columns .caption-box1 .three-columns .inner {
			width: 90%;
			margin-left: auto;
			margin-right: auto;
			height: fit-content;
			background-color: rgb(222, 233, 237);
			border-radius: 10px;
			height: 100%;
		}

		.container .two-sectors .caption-box1 .three-columns .inner h2 {
			/*width: inherit;*/
			margin: 0px 0px;
			/*padding: 10px;*/
			/*font-size: 26px;*/
			color: black;
			width:100%;
			text-wrap: wrap;
			margin:0;
			

		}

		.container .two-columns .caption-box1 .three-columns .inner p {
			width: 90%;
			color: black;
			text-align: left;
			color: black;
			text-wrap: wrap;
			

		}
	  
		

	  .container .two-columns {
		grid-template-columns: 75% 25%;
	  }

	  .container .window .two-columns .caption-box1 {
		width: 100%;
		height: 100%;
		margin-left: auto;
		margin-right:auto;
	 
	}

	


	.container  .two-sectors .caption-box-offset {
		position:relative;
		margin-top: -150px;
		width: 95%;
		height: fit-content;
		margin-left: auto;
		margin-right: auto;
		background-color: rgb(222, 233, 237);
		border-radius: 15px;
		/*border-style: solid;
		border-color: rgb(61, 61, 206);
		/*border-width: 2.5px;*/
		box-shadow: -4px 4px 8px 4px rgba(0, 0, 0, 0.2), -4px 6px 10px 6px rgba(0, 0, 0, 0.19);
		
	}

	.container  .two-sectors .caption-box-offset h2 {
			padding: 20px 0px 20px 0px;
			color:black;
	}
	}

	.container .two-sectors .caption-box-offset ul {
		padding-bottom: 20px;
	}
	.container  .two-sectors .caption-box-offset ul li {
		list-style-type: none;
		padding: 10px;
		text-align: left;
		margin-left: 20px;
	}

	.container  .two-sectors .caption-box-offset ul li a {
		font-size: 28px;
		font-weight: 300;
		/*text-decoration: none;*/

	}

	hr {
		display: none;
	}
	

	

		.caption-box1 {
			height: fit-content;
			
		}

		.caption-box1 a {
		
			width:60vw;
			margin-left: auto;
			margin-right:auto;
			font-size: 26px;
			font-weight: 350;
			line-height: normal;
			text-align: justify;
		}


		.two-columns .caption-box1 ul {
	
			margin-left: 80px;
			
		}

		.four-columns {
			
			position: relative;
			width: 100%;
			height: fit-content;
			margin-top: 0px;
			margin-left: auto;
			margin-right:auto;
			display: grid;
			grid-template-columns: 25% 25% 25% 25%;

		}

		.four-columns .caption-box1 {
			width:100%;
			height: fit-content;
		
		}
		
		

		.four-columns .caption-box1 a img {
			display:block;
			width: 90%;
			margin-bottom: 10px;
			margin-left: auto;
			margin-right: auto;
		
		}

	   
   .button {
		
	   height: fit-content;
	   width: fit-content;
	   font-size: 34px;
	   
	   margin-left: none;
	   text-align: center;
	  
   
	 }

	 #call_pro {
		
		height: fit-content;
		
		margin-left: auto;
		margin-right: auto;
		
	 }

	 .click2page {
		font-size: 24px;
		width:max-content;
		padding: 5px;
		}



	
	}													



	 /*--footer----footer----footer----footer----footer----footer----footer----footer----footer----footer----footer----footer--*/	
footer {
	/*clear: both;*/
	/*margin-top: 0px;*/	
	position: relative;
	
	width: 100%;
	height: fit-content;
	}
   
   .footer-content {
	   width: 100vw;
	   margin-left: auto;
	   margin-right:auto;
	   margin-top: 0px;
	   
   }

   /* ------------------- social platforms and media icons --------------------------*/
   .footer-social {
	   display: inline-block;
	   list-style-type: none;
	   text-align: center;
	   height: fit-content;
   }
   .footer-social li {
	   display: inline-block;
	  
   }
   .footer-social li a {
	   line-height: 3.5em;
	   display: inline-block;
	   width: 4vh;
	   height: fit-content;;
	   text-align: center;
	   margin: 0px 25px 0px 25px;
	   /*--border: 2px solid rgba(255,255,255,.3);--*/
	   
   }
  
   .footer-social li a img {
	   width: auto;
	   height: 48px;
   }
   .footer-social li a .social-hover {
	   display: none;
   }
   .footer-social li a:hover .social-default {
	   display: none;
   }
   .footer-social li a:hover .social-hover {
	   display: inline;
   }

   /*----------------------------------- ESL about, contact details, website links, subcsribe ------------------*/
   .footer-details {
	
	margin-left: none;
	padding-left: none;
 

}
.footer-column {
	padding: 20px;
	display: flex;
	flex-wrap: wrap;
}


.footer-column h3 {
	 font-size: 20px;
	 margin: 0px 0px 0px 0px;
	 padding: 5px 0px 15px 0px;
	 width: 90%;
}

.footer-column p {
 font-size: 14px;
 text-align: justify;
}

.footer-column ul li {
	padding: 3px;
	margin-left: 0px;
}

.footer-column ul li a {
	font-size: 16px;
}



.footer-row_4 {
 width:100vw;
		 display: grid;
		 grid-template-columns: 25% 25% 25% 25%;
		 height: fit-content;
		 margin-left: none;
		 
		 
			 }

/*-------------------------------------- terms, copyright, trademark, privacy policy ----------------------*/

   .footer-info {
	font-size: 1em;
	width: 100vw;
	   margin-left:auto;
	   margin-right:auto;
   }
   
   .footer-info-box {
	   width:100%;
	   margin-top: 0px;
	   padding-bottom: 10px
	
   }
      
   .footer-info-box p {
	   font-size: 14px;
	   /*color: rgb(123, 123,123);*/
	   
		
	   line-height: 16px;
	   /*max-width: 40em;*/
	   text-align: center;
   }

   .footer-info-box a {
	font-size: 14px;
	
	line-height: 1.55em;
	/*max-width: 40em;*/
	text-align: center;
}
   
   .reg-address {
	   
	   font-weight: 300;
	   letter-spacing: 0.4px
   }
   .footer-legal {
	   opacity: .8;
   }
   .footer-credit a {
	   text-decoration:none;
   }
   
   .footer-credit a:hover {
	   text-decoration: none;
   }
		
	
		
		

		






		
/*Desktop View*/  

	@media screen and (min-width: 1600px) { 


		.container .two-columns .caption-box1 h4 {
		position:relative;
			font-size: 36px;
			text-transform:uppercase;

			
	}


	.offset {
		width: fit-content;
	}


	.consultancy .services {
		width:60%;
	}

	.container .window p {
		width:60%;
		margin-left:100px;
	}
/**
h2 {
	color:white;
	text-shadow: none;
}
p {
		font-size: 26px;
		text-align: left;
	}

	header .contact {
		display:grid;
		grid-column: 9/12;
		grid-row: 1/1;
		height: fit-content;
		margin-bottom: 0px;
		margin-top: auto;
	}



.button_contact {
	
	padding:10px;
	font-size: 32px;
}

.container {
	position: relative;
	height: fit-content;
	margin-bottom: 100px;
	width: 100vw;
	margin-left: auto;
	margin-right: auto;
	margin-top: 320px;
}





.window {
	height: fit-content;
}



.container .window h1 {
	font-size: 56px;
	font-weight: 500;
	text-transform: uppercase;


}


.container .caption-box1 {
	height: fit-content;
	width: 34%;
	margin-top:0vh;
	margin-right: 5vw;
}

.caption-box1 {
	width: 100%;
}

.cap_intro {
	background-color:rgba(250, 250, 250, 0);
}



.caption-box1 h2 {
	font-size: 40px;
	text-align: center;
	margin: 10px auto 0px auto;
	padding: 0px;
	color:black;
	
	
}

.caption-box1 h3 {
	width: inherit;
	margin-left:auto;
	margin-right: auto;
}

.caption-box1 p {
	color: white;
	width: inherit;
	margin-bottom:10px;
	width: 95%;
}



.container .two-columns {
	width: 90%;
	height: max-content;
	margin-bottom:0px;
}

.container .three-columns .caption-box1 {
	height: 100%;
}

.container .three-columns {
	width: 90%;
	margin-left: auto;
	margin-right:auto;
	height:fit-content;	
	display: grid;
	grid-template-columns: 33% 34% 33%;
	
}

.button_contact {
	width: fit-content;;
	height: fit-content;
}

.container1 {
	
	position: relative;
	margin-top: -3vh;
	width:100vw;
	height: fit-content;
	background-color: white;
	padding: 50px 0 50px 0;

	
	
}

.container1 .caption-box2 {
	width:50vw;	
	height: fit-content;
	margin-left:auto;
	margin-right:auto;
	background-color: white;
	padding: 50px;	
	
	border-color: lightgrey;
	
	border-radius: 50px;
	box-shadow: -4px 4px 8px 4px rgba(0, 0, 0, 0.2), -4px 6px 10px 6px rgba(0, 0, 0, 0.19);
	
}

.container1 .caption-box2 h2 {
	color: black;
	font-size: 46px;
	margin-bottom:10px;
}

.container1 .caption-box2 p {
	color: black;
	font-size: 24px;
	font-weight: 350;
}








  
/*--footer----footer----footer----footer----footer----footer----footer----footer----footer----footer----footer----footer--*/	
/*footer {
	
	
	position: relative;
	width: 100vw;
	height: fit-content;
	}
   
   .footer-content {
	   width: 90vw;
	   margin-left: auto;
	   margin-right:auto;
	   margin-top: 0px;
	   
   }*/

   /* ------------------- social platforms and media icons --------------------------*/
   /*.footer-social {
	   display: inline-block;
	   list-style-type: none;
	   text-align: center;
	   height: fit-content;
   }
   .footer-social li {
	   display: inline-block;
	  
   }
   .footer-social li a {
	   line-height: 3.5em;
	   display: inline-block;
	   width: 4vh;
	   height: fit-content;;
	   text-align: center;
	   margin: 0px 25px 0px 25px;
	   
	   
   }
  
   .footer-social li a img {
	   width: auto;
	   height: 48px;
   }
   .footer-social li a .social-hover {
	   display: none;
   }
   .footer-social li a:hover .social-default {
	   display: none;
   }
   .footer-social li a:hover .social-hover {
	   display: inline;
   }

   .footer-details {
	width: inherit;
	margin-left: none;
	padding-left: none;
 

}


.footer-column h3 {
	 font-size: 20px;
	 margin: 0px 0px 0px 0px;
	 padding: 5px 0px 15px 0px;
}

.footer-column p {
 font-size: 14px;
 text-align: justify;
}

.footer-column ul li a {
	font-size: 16px;
}

.footer-column hr {
 display: none;
}

.footer-row_4 {
 width:80vw;
		 display: grid;
		 grid-template-columns: 20% 20% 20% 20%;
		 height: fit-content;
		 margin-left: none;
		 
		 
		}


   .footer-info {
	font-size: 1em;
	width: 70vw;
	   margin-left:auto;
	   margin-right:auto;
   }
   
   .footer-info-box {
	   width:100%;
	   margin-top: 0px;
	   padding-bottom: 10px
	
   }
      
   .footer-info-box p {
	   font-size: 14px;
	  
	   
		
	   line-height: 16px;
	   
	   text-align: center;
   }

   .footer-info-box a {
	font-size: 14px;
	
	line-height: 1.55em;
	
	text-align: center;
}
   
   .reg-address {
	   
	   font-weight: 300;
	   letter-spacing: 0.4px
   }
   .footer-legal {
	   opacity: .8;
   }
   .footer-credit a {
	   text-decoration:none;
   }
   
   .footer-credit a:hover {
	   text-decoration: none;
   }*/

   
	

	}


}