* {
	box-sizing: border-box;
	}

body {
	  font-family: Gill Sans,Gill Sans MT,Calibri,sans-serif; 
	  padding: 0px;
	  margin: 0px;
	  font-size: 14px;
	  background: #13676c;
	  background-color:  #13676c; /* For browsers that do not support gradients */
	  background-image: linear-gradient(45deg,  #13676c, white);
	}

/* SECTIONS */

.topnav {
	  font-size: 1.2em;
	  overflow: hidden;
	  text-transform: uppercase;
	  background-color: #13676c;
	  position: fixed;
	  top: 0;
	  width: 100%;
	  margin: 0px;
	  z-index: 2;
	}

.topnav a {
	  float: left;
	  display: block;
	  color: #f2f2f2;
	  text-align: center;
	  padding: 14px 16px;
	  text-decoration: none;
	}

.topnav a:hover {
	  background-color: #6bacb0;
	  color: #ffffff;
	  margin: 0px;
	  padding: 14px 16px;
	}

.envelope {
		width: 75%;
		max-width: 1000px;
		min-width: 500px;
		border-radius: 15px;
		margin: 60px auto 0px auto;
		padding: 0px;
		background: white;
	}
	
.envelope2 {
		width: 70%;
		height: 80vh;
		max-width: 700px;
		min-width: 500px;
		margin: 60px auto 20px auto;
		padding: 0px;
		}
	 
	.viewport {
		width: 100%;
		height: 75vh;
		}
	 
	.viewport2 {
		width: 100%;
		height: 80vh;
		margin: 0px auto;
		padding: 0px;
		}
	 
		
.header {
	  float: center;
	  width: 100%;
	  max-width: 1000px;
	  min-width: 500px;
	  padding: 0px 40px;
	  text-align: center;
	  background: white;
	  border-radius: 15px;
	  margin: 0px auto;
	}

.card {
	  width: 100%;
	  max-width: 1000px;
	  min-width: 400px;
	  padding: 20px;
	  text-align: left;
	  background: white;
	  border-radius: 15px;
	  margin: 0px auto 10px auto;
	  }
 
.cardmd {
	  position: relative;
	  width: 75%;
	  max-width: 1000px;
	  min-width: 500px;
	  padding: 10px 0px;
	  text-align: left;
	  background: white;
	  border-radius: 15px;
	  border: 4px solid #13676c;
	  margin: 0px auto ;
	}
	 
.cardmd2 {
	  position: relative;
	  width: 75%;
	  max-width: 1000px;
	  min-width: 500px;
	  padding: 10px 0px;
	 text-align: center;
	  background: white;
	  border-radius: 15px;
	  border: 4px solid #13676c;
	  margin: 0px auto ;
	}
 
.cardsm {
	  width: 70%;
	  max-width: 600px;
	  min-width: 400px;
	  padding: 20px 40px;
	  text-align: center;
	  background: #d1e0e0;  /*#b3cccc; #e7f0f0;*/
	  border: 4px double #5a9598;
	  margin: 20px auto;
	  float: center;
	  color: #2a136c;
	}
 
.cardsm2 {
	  width: 75%;
	  max-width: 1000px;
	  min-width: 500px;
	  padding: 20px ;
	  background: #c2d6d6; 
	  border: 4px double #5a9598;
	  margin: 20px auto;
	  text-align: center;
	 }

.footer {
	  padding: 10px;
	  margin: 10px;
	  text-align: center;
	  font-size: 1.6em;
	  font-style: italic;
	  font-weight: normal;
	  color: #ffffff;
	}
	
.footer2 {
	  padding: 0px;
	  margin: 0px auto 5px auto;
	  text-align: center;
	  font-size: 1.4em;
	  font-style: italic;
	  color: #ffffff;
	}
	
	
/* TEXT CLASSES*/

	h1 {
		font-size: 2.6em;
		color: #13676c;
		padding: 0px;
		margin: 5px 5px 0px 5px;
	
	 }

	h2 {
		font-size: 2.4em;
		color: #13676c;
		font-weight: normal;
		padding: 5px 10px 5px 10px;
		margin: 5px;
		/* border-bottom: 1px solid #6bacb0;
		*/
		}

	h3 {
		font-size: 1.8em;
		color: #13676c;
		margin: 0px auto;
		border-bottom: 1px solid #6bacb0;
		width: 80%;
		}

	h4 {
		font-size: 1.4em;
		color: #13676c;
		margin: 0px auto;
		text-transform: uppercase;
		border-bottom: 1px solid #6bacb0;
		}

	h5 {
		font-size: 1.6em;
		color: #13676c;
		margin: 5px auto;
		font-weight: normal;
		}
		
	h6 {
		font-size: 1.3em;
		color: #13676c;
		margin: 5px auto;
		font-weight: normal;
	
		}

	p {
		font-size: 1.2em;
		margin: 0px auto;
		padding: 10px 0px;
		text-align: justify;
	  }

	.spaced {
		 width: 80%;
	  }
  
	.ctr {
		 width: 80%;
		 text-align: center;
	  }
	  
	.about {
		 text-align: justify;
		 width: 80%;
		 font-size: 1.5em;
	  }
  
	.about2 {
		 text-align: justify;
		 width: 80%;
		 font-size: 1.4em;
	  }
	  
	.about3 {
		 text-align: justify;
		 width: 80%;
		color: #13676c;
		font-size: 1.4em;
		font-style: italic;
	  }
	  
	.aboutc {
		 width: 80%;
		 text-align: center;
		  font-size: 1.5em;
		
	  }
	
	.small {
		  text-align: center;
		  font-size: 1.1em;
		  color: white;
	  }
	  
	.small2 {
		  text-align: center;
		  font-size: .9em;
		font-style: italic;
	  }
	  
	.small3 {
		  text-align: center;
		  font-size: 1.1em;
		  color: white;
			padding: 0px 0px 10px 0px;
			margin: 5px auto;
	  }

	.smallcr {
		  text-align: center;
		  font-size: 1.1em;
		  color: white;
		  padding: 0px 0px 20px 0px;
	  }
	  
	.ralign {
		text-align: right;
	  }


/* LISTS */

	ul {
		list-style-type: disc;
		list-style-position: outside;
		width: 80%;
		margin: 0 auto;
	  }

	li {
		font-size: 1.4em;
		padding: 5px 0px;
	  }

	
/* LINKS */

	a {	
		text-decoration: none;
		color: #13676c;
		}

	a:hover {	
		color: #71a4a7;
		}
	
	.white {	
		color: #ffffff;
		}
	
	.white:hover {	
		color:  #c2d6d6;
		}


/* LINES */

	hr {
		border-top: 1px solid #6bacb0;
		}
	

/* IMAGES */

	.imgtop {
		padding: 20px 0px 10px 0px;
		max-width: 800px;
		width: 100%;
		margin: 0px auto;
		}

	.logo {
		max-height: 80px;
		margin: 10px auto;
		float: center;
		padding: 0px 100px; 
		}
		
	.logo2 {
		max-height: 80px;
		margin: 10px 0px 0px 0px;
		float: center;
		padding: 0px; 
		}

	.imgl {
		padding: 0px 10px 2px 2px;
		float: left;
		width: 40%;
		}
	
	.imgl2 {
		 display: block;
		 padding: 0px 10px 2px 2px;
		float: left;
		width: 100%;
		max-width: 500px;
		margin: 0px 0px 10px 0px;
		}

	.imgr {
		padding: 5px 0px 5px 10px;
		float: right;
		max-width: 250px; 
		}

	.imgc {
		 display: block;
		 padding: 2px ;
		 margin: auto;
		 width: 33%;
		 float: left;
		}
		
	.imgc2 {
		 display: block;
		 padding: 2px ;
		 margin: auto;
		 width: 50%;
		 float: left;
		}
	 
	.imglg {
		 display: block;
		 padding: 2px ;
		 margin: auto;
		 width: 100%;
		 float: left;
		}
	 
	.clearfix  {
		 margin: auto;
		 width: 80%;
		 float: center;
		 padding: 0px;
		}
	 
	.clearfix::after {
		  content: "";
		  clear: both;
		  display: table;
		}

	/* Clear floats after the columns */
	.row::after {
		  content: "";
		  display: table;
		  clear: both;
		}


/* TIMELINE - p at end means past event */
	
	/*the vertical ruler) */
	.timeline {
		  position: relative;
		  max-width: 1000px;
		  margin: 0px auto;
		  padding: 10px 0px;
		}

	.timeline::after {
		  content: '';
		  position: absolute;
		  width: 4px;
		  background-color: #13676c;
		  top: 0;
		  bottom: 0;
		  left: 50%;
		  margin-left: -4px;
		}

	/* Containers around content */
	.container {
		  padding: 10px 40px 20px 40px;
		  position: relative;
		  background-color: inherit;
		  width: 50%;
		}

	.containerp {
		  padding: 10px 40px 20px 40px;
		  position: relative;
		  background-color: inherit;
		  width: 50%;
		}

	/* The circles on the timeline */
	.container::after {
		  content: '';
		  position: absolute;
		  width: 20px;
		  height: 20px;
		  right: -12px;
		  background-color: white;
		  border: 4px solid #13676c;
		  top: 22px;
		  border-radius: 50%;
		  z-index: 1;
		}

	.containerp::after {
		  content: '';
		  position: absolute;
		  width: 20px;
		  height: 20px;
		  right: -12px;
		  background-color: #13676c;
		  border: 4px solid #13676c;
		  top: 22px;
		  border-radius: 50%;
		  z-index: 1;
		}

	/* Place containers to the left */
	.left {
		left: 0;
		}

	.leftp {
		left: 0;
		}

	/* Place containers to the right */
	.right {
		left: 50%;
		}

	.rightp {
		left: 50%;
		}

	/* Add arrows to the left container (pointing right) */
	.left::before {
		  content: " ";
		  height: 0;
		  position: absolute;
		  top: 25px;
		  width: 0;
		  z-index: 1;
		  right: 30px;
		  border: medium solid white;
		  border-width: 10px 0 10px 10px;
		  border-color: transparent transparent transparent white;
		}

	.leftp::before {
		  content: " ";
		  height: 0;
		  position: absolute;
		  top: 25px;
		  width: 0;
		  z-index: 1;
		  right: 30px;
		  border: medium solid white;
		  border-width: 10px 0 10px 10px;
		  border-color: transparent transparent transparent #d1e0e0;
		}

	/* Add arrows to the right container (pointing left) */
	.right::before {
		  content: " ";
		  height: 0;
		  position: absolute;
		  top: 25px;
		  width: 0;
		  z-index: 1;
		  left: 30px;
		  border: medium solid white;
		  border-width: 10px 10px 10px 0;
		  border-color: transparent white transparent transparent;
		}

	.rightp::before {
		  content: " ";
		  height: 0;
		  position: absolute;
		  top: 25px;
		  width: 0;
		  z-index: 1;
		  left: 30px;
		  border: medium solid white;
		  border-width: 10px 10px 10px 0;
		  border-color: transparent #d1e0e0 transparent transparent;
		}

	/* Fix the circle for containers on the right side */
	.right::after {
		left: -16px;
		}

	.rightp::after {
		left: -16px;
		}
		
	/* Actual content in bubbles */
	.content {
			padding: 20px 40px;
			background-color: white;
			position: relative;
			border-radius: 15px;
		}

	.contentp {
			padding: 20px 40px;
			background-color: #d1e0e0; /*#b3cccc */
			position: relative;
			border-radius: 15px;

		}


/* RESPONSIVE for screens less than 700px wide */

@media screen and (max-width: 700px) {
  /* Place the timelime to the left */
	.timeline::after {
			left: 39px;
		}
	  
  /* Full-width containers */
	.container {
			width: 100%;
			padding-left: 70px;
			padding-right: 25px;
		}

	.containerp {
			width: 100%;
			padding-left: 70px;
			padding-right: 25px;
		}
  
  /* Make sure that all arrows are pointing leftwards */
	.container::before {
		  left: 60px;
		  border: medium solid white;
		  border-width: 10px 10px 10px 0;
		  border-color: transparent white transparent transparent;
		}

	.containerp::before {
		  left: 60px;
		  border: medium solid white;
		  border-width: 10px 10px 10px 0;
		  border-color: transparent #d1e0e0 transparent transparent;
		}
	  
  /* Make sure all circles are at the same spot */
	.left::after, .right::after {
			left: 22px;
		}

	.leftp::after, .rightp::after {
			left: 22px;
		}
  
  /* Make all right containers behave like the left ones */
    .right {
		left: 0%;
		}

  /* Make all right containers behave like the left ones */
    .rightp {
		left: 0%;
		}
  
  /* shrink the top nav */  
	.topnav {
		font-size: 1.1em;
		}
	 
	.topnav a {
		padding: 10px 5px;
		}
	
	.topnav a:hover {
		padding: 10px 5px;
		}
	   
	.about {	
		text-align: left;
		}
	
	.ralign {
		text-align: left;
		}

	p {
		font-size: 1.2em;
		text-align: left;
		}

	.cardmd {
		width: 95%;
		}

	.cardsm2 {
		width: 70%;
		max-width: 1000px;
		min-width: 500px;
		padding: 10px ;
		background: #e7f0f0;
		border: 4px double #5a9598;
		margin: 20px auto;
		text-align: center;
		}
			
    .envelope2 {
		width: 85%;
		height: 350px;
		max-width: 500px;
		min-width: 300px;
		margin: 20px auto 5px auto;
		padding: 25px 0px 0px 0px;
		}
		
	.viewport2 {
		width: 100%;
		height: 305px;
		}
		
    .footer2 {
	  padding: 0px;
	  margin: 5px auto 5px auto;
	  text-align: center;
	  font-size: 1.1em;
	  font-style: italic;
	  color: #ffffff;
	}
	
	.logo2 {
		max-height: 50px;
		margin: 10px 0px 0px 0px;
		float: center;
		padding: 0px; 
		}
	
	.small3 {
		  text-align: center;
		  font-size: .9em;
		  color: white;
			padding: 0px 0px 10px 0px;
			margin: 5px auto 50px auto;
	  }
	  
}