@charset "utf-8";



body{
	
	margin: 0;
	font-family: "Poppins", sans-serif;
	background-color: #f9f9f9;
	


	


	
}


body.no-scroll {
  position: fixed;
  width: 100%;
}

html {
  overflow-y: scroll; /* always reserve scrollbar space */
}

.navigation{
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 75px;
	position: fixed; 
  	top: 0;
  	left: 0;
  	width: 100%;
  	z-index: 10;
	
	
	


}

.logo img {
	height: 50px;
	margin: 20px 0 0 0;
	flex: 0 0 auto;
	
}



.icons {
	flex: 0 0 auto; 
    display: flex;
    justify-content: center;
    position: absolute; 
    left: 50%;
	padding-top: 20px;
    transform: translateX(-50%);
	

}


.navigation a{	
	text-decoration: none;
	color: white;
    font-size: 24px; /* icon size */
    display: inline-block;   /* makes the anchor behave like a box */
  	padding: 9px 15px 9px 15px;           /* adds space around the icon */
  	border-radius: 5px; 
	height: 25px;
	margin: 0 5px 0 5px;
	
}




.icons a{
	position: relative;
		transition-duration: 0.2s;
}


.icons a .label {
	display: none; 
  	position: absolute;
  	top: 50px; 
  	left: 50%;
  	transform: translateX(-50%);
 	font-size: 14px;
  	color: white;
  	white-space: nowrap;
	font-family: 'Bebas Neue', sans-serif;
	letter-spacing: 0.1em;
	
}


.icons a:hover .label {
  	display: block; 
}




.icons a.active {
  	color: gray;
	background-color: white;
	opacity: 0.8;

}


.icons a:hover {
  	color: gray;
	background-color: white;
	opacity: 1;

	
}


.hamburger {
  display: none;

}


.text{
	text-align-last: right;
	position: absolute;
    top: 70%;
	right: 30px;
    transform: translateY(-50%);
	/*background-color: #a1d9d3;*/
	padding: 30px;
	color: white;
	letter-spacing: 0.2em;
}



.title {
	font-size: 40px;
	font-family: 'Bebas Neue', sans-serif;
	letter-spacing: 0.15em;
	text-align: right;
	display: flex;
}


.intro{
	
	padding-top: 10px;
	font-family: 'Lato', sans-serif;
	letter-spacing: 0.1em;
	font-size: 18px;
}


.bg{

	background-attachment: fixed;
	position: relative;   /* take it out of normal flow */
  	top: 0;
  	left: 0;
	z-index: -1; 
	width: 100%;
  	height: 100vh;
	background-size: cover;
	background-image: url('Compooter.jpg');
	background-position: top center;
	
	
	

	
}

.paragraph{
	text-align: center;
	padding: 50px 5px 50px 5px;
	font-size: 25px;
	font-family: 'Bebas Neue', sans-serif;
	letter-spacing: 0.15em;
	color: gray;
	
	
}

.content{

	
  	

}


.services{
	display: flex;
  	justify-content: space-evenly;        
  	width: 100%;      
	flex-wrap: wrap;
	flex-direction: row;
 
	
	
}



	
	

.info-heading{
	font-family: 'Bebas Neue', sans-serif;
	letter-spacing: 0.10em;

}

.info-heading p{
	font-size: 50px;
	
}




.service-item {
  	display: flex;
  	flex-direction: column; 
  	align-items: left;   
  	font-size: 2rem;    
	background-color: white;
	width: 180px;
	color: grey;
	padding: 10px;
	margin-bottom: 20px;
	border-radius: 6px;
	height: 320px;
	text-align: left;
	font-family: 'Lato', sans-serif;
	letter-spacing: 0.05em;
	
	
	opacity: 0;                /* hidden initially */
  	transform: translateY(50px); /* start slightly below */
  	transition: all 0.4s ease-out;
	
	
	
}


.services_page{
	width: 45%;
}



.service-item p {  
  	font-size: 0.9rem;      
}

.services_page p{
	font-size: 1rem;
}

.services_page .info-heading p{
	font-size: 1.6rem;
	margin-bottom: 5px;
}


.service-item.visible {
  	opacity: 1;
  	transform: translateY(0);  /* slide into place */
}

.service-item:nth-child(1) { transition-delay: 0s; }
.service-item:nth-child(2) { transition-delay: 0.1s; }
.service-item:nth-child(3) { transition-delay: 0.2s; }







.button {
  	background-color: white;
  	transition-duration: 0.4s;
  	cursor: pointer;
	border-radius: 6px;
	text-align: center;
	width: 200px;
	align-self: center;
	margin: 20px auto
	
	
	  
}


.button a{
	color: gray;
  	padding: 16px 32px;
  	text-align: center;
  	text-decoration: none;
  	display: inline-block;
  	font-size: 14px;
  	margin: 4px 2px;
	
}



.button {border: 2px solid gray;}



.button:hover {
  	background-color: #65c6bd;
	opacity: 0.8;
	border: 2px solid #f9f9f9;

	
}


.button:hover a {
	transition-duration: 0.4s;
  	color: white; 
}

.about_button{
	width: 140px;
	
}

.footer{
	display: flex;
	text-align: left;
	margin-top: 100px;
	padding: 20px 0 0 50px;
	height: 400px;
  	background-color: white;
}

.footer_col1 {
  	width: 33%;
	

}

.footer_title{
	font-family: 'Bebas Neue', sans-serif;
	letter-spacing: 0.10em;
	color: gray;
	margin: 0 auto;      /* centers the block itself */
  	text-align: left; 
	width: auto;
	font-size: 30px; 
}


.social-item {
  	display: flex;       
  	margin: 10px 0;
	font-size: 25px; 
	align-items: center;  
}

.social-item i {
  margin-right: 13px;
	color: gray;
	
}


.social-item .label{
	font-family: 'Lato', sans-serif;
	letter-spacing: 0.05em;
	color: gray; 
	font-size: 15px; 
	
}

/*div.email_address > span:nth-child(2) {
	font-size: -1px;
	
}*/


span.email_address::after {
	content: attr(data-user) '@' attr(data-domain);
}


.footer_col2 {

	width: 33%;
	

}



.footer_col3 {

	width: 33%;


}



.navigation_background{
	background-color: #bee4e1;
	opacity: 0.9;
	width: 100%;
	height: 95px;
}


.page_heading{


	padding-top: 75px;
	font-size: 40px;
	text-align: center;
	font-family: 'Bebas Neue', sans-serif;
	letter-spacing: 0.15em;

}


.padding{
	padding:50px;
}





.heading_image{
	background-attachment: fixed;
	position: relative;
  	top: 0;
  	left: 0;
	z-index: -1; 
	width: 100%;
  	height: 30vh;
	background-size: cover;
	background-position: top center;
}


.contact_image {
  background-image: url("contact.jpg");
}

.about_image {
  background-image: url("about.jpg");
}


.services_image {
  background-image: url("services.jpg");
}


.contact_box{
	width: 50%;
	margin: auto;

}

input[type=text], input[type=email] {
  width: 100%;
  padding: 12px;
  border: 1px solid gray;
  border-radius: 6px;
  box-sizing: border-box;
  margin-top: 6px;
  margin-bottom: 16px;
  resize: vertical;
}
textarea[name=message]{
	width: 100%;
	padding: 12px;
  border: 1px solid gray;
  border-radius: 6px;
  box-sizing: border-box;
  margin-top: 6px;
  margin-bottom: 16px;
  resize: vertical;
	
}
.g-recaptcha {
  background-color: white;
  color: gray;
  padding: 12px 20px;
  border: 2px solid gray;;
  border-radius: 4px;
  cursor: pointer;
	transition-duration: 0.4s;
}

.g-recaptcha:hover {
  background-color: #a1d9d3;
	color: white;
	border: 2px solid #f9f9f9;
}


.contact_box label{
	font-family: 'Lato', sans-serif;
	letter-spacing: 0.05em;
	color: gray; 
	font-size: 15px; 
	display: block;
	text-align: left;

}

#contact_box{
	text-align: left;
	font-size: 60px; 
}


.email_message{
	font-family: 'Lato', sans-serif;
	letter-spacing: 0.05em;
	font-size: 20px; 
	display: block;
	text-align: center;
	padding-top: 20px;

}




.email_success{
	color: gray; 
}

.email_bad{
	color: red; 
}



.container {
  border-radius: 5px;
  background-color: #f2f2f2;
  padding: 20px;

}


.hornsea{
	width: 200px;
	height: 200px;
	border-radius: 10px;
	display: block;
  margin-left: auto;
  margin-right: auto;
	margin-top: 25px;
	
	opacity: 0;                /* hidden initially */
  	transform: translateY(50px); /* start slightly below */
  	transition: all 0.4s ease-out;
}

.hornsea.visible {
  	opacity: 1;
  	transform: translateY(0);
	
}


.caption{
	font-family: 'Lato', sans-serif;
	color: gray;
	text-align: center;
	margin-bottom: 40px;
}



@media (max-width: 1100px) {
  .services{
    flex-direction: column;
	  
  }
	
	.service-item{
margin-left: auto;
		margin-right: auto;
		width: 90vw;
	}
	
	





	
}


@media (max-width: 600px) {
.footer{
		flex-direction: column;
		height: auto;
		padding-bottom: 30px;
		
	}
	
	

}




.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
  z-index: 15;
  display: none; 
}



.overlay.active {
  display: block;
}




.side-menu {
  position: fixed;
  top: 0;
  right: -250px; 
  width: 200px;
  height: 100%;
  background-color: grey;
  padding-top: 60px;
  transition: right 0.3s ease;
  z-index: 20;
}


.side-menu a {
  display: block;
  padding: 15px 25px;
  text-decoration: none;
  font-size: 14px;
  	color: white;
	font-family: 'Bebas Neue', sans-serif;
	letter-spacing: 0.1em;
	text-align: center;
}


.side-menu a:hover {
  background-color: #575757;
}



.side-menu.active {
  right: 0;

}



@media (max-width: 700px) {
	  .icons {
    display: none; /* hide top icons */
  }
	

  .hamburger {
    display: block;
    font-size: 30px;
    cursor: pointer;
    margin-right: 20px;
    color: white;
  }
}

	
	






#bee4e1
#a1d9d3
#65c6bd
#0c7851