@charset "UTF-8";
/* CSS Document */

body {
	overflow-y:scroll;
	background-color: #009FE3;
	}

body,td,th {
	font-family: proxima-nova, sans-serif;
	color: #F5FBFE;
}
a {
	text-decoration:none;
	color: #000000;	
	
}


h1, h2 {
	text-align: center;	
}

h1 {
	font-size: 6vw;
	}

h2 {
	font-size: 3vw;
	}


.header {
	background-color: rgba(0,159,227,.80);
	position:fixed;
	top:0;
	width:100%;
}

.navbar {
	width: 100%;
	display:flex;
	flex-direction: row;
	 flex-wrap: nowrap;
	justify-content: flex-start;
	
}

.navbar > div {
  	color: black;
  	text-align: left;
	padding: 12px;
	text-decoration: none;
  font-size: 18px; 
  line-height: 25px;
}


.navbar a img {
	width:40%;
}


.navbar a {
	float: left;
  	color: black;
  	text-align: left;
  	padding: 12px;
  	text-decoration: none;
  	font-size: 18px; 
  	line-height: 25px;
  	border-radius: 4px;
}

.navbar a:hover {
  	background-color: #ddd;
	float: left;
  	color: black;
  	text-align: left;
  	padding: 12px;
  	text-decoration: none;
  	font-size: 18px; 
  	line-height: 25px;
  	border-radius: 4px;
}

.navbar a.active {
  background-color: dodgerblue;
  color: white;
}



.products {
	display:flex;
	justify-content:space-between;
	align-content:center;
	align-items:baseline;
	margin-left: 5%;
	
}

.products > div {
	text-align:center;
	margin: 3%;
}

.products img {
	align-content: center;
}


.about {
	font-size: 2em;
	text-align: left;
}




.ghc_animation {
	margin-top:200px;
	background-color: #F5FBFE;
	width:100%;
	height:auto;
}


@media screen and (min-aspect-ratio: 16/20) {
.ghc_animation {
	background-color: #F5FBFE;
	margin-top:200px;
	margin-left:auto;
	margin-right:auto;
	margn_bottom:200px;
	width:40%;
	height:auto;
}

.header img {
	width:10%;	
}	

	
}

.cls-2 {
	animation:  10s ease-out 0s  running slideinbotleft;
}

.cls-3 {
	animation:  10s ease-out 0s  running slideintopright;
}
.cls-4 {
	animation:  10s ease-out 0s  running slideintopleft;
}
.cls-5 {
	animation:  10s ease-out 0s  running slideintopright;
}
.cls-6 {
	animation:  10s ease-out 0s  running slideintopleft;
}
.cls-7 {
	animation:  10s ease-out 0s  running slideintopleft;
}
.cls-8 {
	animation:  10s ease-out 0s  running slideintopright;
}
.cls-9 {
	animation:  10s ease-out 0s  running slideinbotleft;
}
.cls-10 {
	animation:  10s ease-out 0s  running slideinbotright;
}
.cls-11 {
	animation:  10s ease-out 0s  running slideintopright;
}
.cls-12 {
	animation:  10s ease-out 0s  running slideintopleft;
}
.cls-13 {
	animation:  10s ease-out 0s  running slideinbotright;
}
.cls-14 {
	animation:  10s ease-out 0s  running slideinbotleft;
}
.cls-15 {
	animation:  10s ease-out 0s  running slideintopleft;
}
.cls-16 {
	animation:  10s ease-out 0s  running slideinbotright;
}
.cls-17 {
	animation:  10s ease-out 0s  running slideinbotleft;
}
.cls-18 {
	animation:  10s ease-out 0s  running slideintopleft;
}
.cls-19 {
	animation:  10s ease-out 0s  running slideinbotright;
}
.cls-20 {
	animation:  10s ease-out 0s  running slideinbotleft;
}
.cls-21 {
	animation:  10s ease-out 0s  running slideintopright;
}
.cls-22 {
	animation:  10s ease-out 0s  running slideinbotright;
}
.cls-23 {
	animation:  10s ease-out 0s  running slideinbotleft;
}



@keyframes slideinbotleft {
 from {
    transform: translate(-100%, 100%);
  }

  to {
    transform: translate(0%,0%);
  }
}

@keyframes slideintopright {
 from {
    transform: translate(100%, -100%);
  }

  to {
    transform: translate(0%,0%);
  }
}

@keyframes slideintopleft {
 from {
    transform: translate(-100%, -100%);
  }

  to {
    transform: translate(0%,0%);
  }
}

@keyframes slideinbotright {
 from {
    transform: translate(100%, 100%);
  }

  to {
    transform: translate(0%,0%);
  }
}