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


body {
	font-family: "Raleway", sans-serif;
	color: #00345d;
	padding-left:20px;
	padding-right:20px;
	padding-top: 100px;
}

h1,h2,h3,h4,h5,h6 {
	font-family: "Raleway", sans-serif;
	background-color: #00345d;
	color: #f7941d;
	padding: 5px;
	border-radius: 3%;

}

a { 	
	color: #00345d;
}
body, html {
  line-height: 1.8;
}



.Navbar {
	display:flex;
	flex-direction: row;
	flex-wrap: nowrap;	
	justify-content: space-around;
	padding-right:10%;
}
.Navbar a {
	text-align: center;
}

.hero-image {
	position: relative;
	padding-top: 60%;
	left:7%;
	opacity:1;
}

.hero-image__viewport {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	height:90%;
	display: flex;
	overflow-y: hidden;
}
.hero-image img {
  	width: 90%;
	height:auto;
}

.hero-image-animation-1 {
	position: absolute;
	top:5%;
	width:90%;
	z-index: 1;
	animation: hero-image-cycle-1 25s linear infinite;
}
.hero-image-animation-2 {
	position: absolute;
	top:5%;
	width:90%;
	z-index: 1;
	animation: hero-image-cycle-2 25s linear infinite;	
}
.hero-image-animation-3 {
	position: absolute;
	top:5%;
	width:90%;
	z-index: 1;
	animation: hero-image-cycle-3 25s linear infinite;	
}



@keyframes hero-image-cycle-1 {
	0% 		{opacity: 1;}
	25%		{opacity: 1;}
	30% 	{opacity:0}
	60%		{opacity:0}
	65%		{opacity:0}
	95% 	{opacity:0}
	100% 	{opacity:1}
}

@keyframes hero-image-cycle-2 {
	0% 		{opacity: 0;}
	25%		{opacity: 0;}
	30% 	{opacity: 1;}
	60%		{opacity: 1;}
	65%		{opacity: 0;}
	95% 	{opacity: 0;}
	100%	{opacity: 0;}
}
@keyframes hero-image-cycle-3 {
	0% 		{opacity: 0;}
	25%		{opacity: 0;}
	30% 	{opacity: 0;}
	60%		{opacity: 0;}
	65%		{opacity: 1;}
	95% 	{opacity: 1;}
	100% 	{opacity: 0;}
}


.hero-text {
	position:absolute;
	font-size: 4vw; 
  	padding: 2%;
	text-align: left;
  	top: 10%;
  	left: 0%;
	width: 50%;
	color: white;
	background: rgba(0,51,93,.3);
	z-index: 10;
}

.hero-text a {
		background: rgba(255,255,255,.5);
		border-radius: 5%;
		padding: 5px;
	  	color: #00345d;

}



.features {
	display:grid;
	grid-template-columns: auto;
	grid-gap: 3%;
	text-align: center;
	padding: 20px;
}

@media (min-width: 900px) {
	.features {
	display:grid;
	grid-template-columns: auto auto auto;
	grid-gap: 3%;
	text-align: center;
	padding: 20px;
	}
}

#about {

}


.features i {
	font-size: 8vw;
}


@keyframes tonext {
  75% {left: 0;}
  95% {left: 100%;}
  98% {left: 100%;}
  99% {left: 0;}
}

@keyframes tostart {
  75% {left: 0;}
  95% {left: -1500%;}
  98% {left: -1500%;}
  99% {left: 0;}	
}

@keyframes snap {
  96% {scroll-snap-align: center;}
  97% {scroll-snap-align: none;}
  99% {scroll-snap-align: none;}
  100% {scroll-snap-align: center;}
}

#how-we-work {
	padding: 20px;
}

.carousel {
  background: #EEE;
}

.carousel-cell {
  	width: 100%;
  	height: auto;
	margin-right: 10px;
  	background: white;
  	border-radius: 5px;
  	counter-increment: gallery-cell;
}

/* cell number */
.carousel-cell:before {
  display: block;
  text-align: center;
  content: counter(gallery-cell);
  line-height: 0px;
  font-size: 80px;
  color: white;
}

.carousel-cell img {
	width:100%;
}	
	
.carousel-cell-text {
position: absolute; 
font-size:3vw;
padding-top:15%;

}
	
ol, li {
  list-style: none;
  margin: 0;
  padding: 0;
}

* { box-sizing: border-box; }


.menu {
	position:fixed;
	top:0;
	width:100%;
	z-index:20;
	background:rgba(255,255,255,.9);
}