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

html {
	font-size: 16px;
    background-color: white;
    color:#666; ;

}
body {
	
}

  h1 {
	  font-size: 4.25rem;
	  color: purple;
	  margin-top:40px;
	  }
  h2 {
	  font-size: 3.25rem;
	  }
  h3 {
	  font-size: 2.25rem;
  }
  h4 {
	  font-size: 2rem;
	  }	  
	
   p {
	font-size: 1.25rem;
	 }
  

	  
/* On screens that are 992px wide or less, */
@media screen and (max-width: 992px) {


  h1 {
	  font-size: 4rem;
	  }
  h2 {
	  font-size: 3rem;
	  }
  h3 {
	  font-size: 2rem;
	  }
  h4 {
	  font-size: 1.7rem;
	  }	  	  
   p {
	font-size: 1.25rem;
	 }
}

/* On screens that are 600px wide or less,  */
@media screen and (max-width: 600px) {



  h1 {
	  font-size: 3rem;
	  }
  h2 {
	  font-size: 2rem;
	  }
  h3 {
	  font-size: 1.5rem;
	  }
  h4 {
	  font-size: 1.3rem;
	  }	  	  
 p {
	font-size: 1.25rem;

	 }

}

<!-- full screen image -->
.flexo {
  min-height: 655px;
  display: flex;
  background-image:url(image_dep/header_img.jpg);
}

<!-- onscreen appear event -->
.reveal{
  position: relative;
  transform: translateY(150px);
  opacity: 0;
  transition: 1s all ease;
}

.reveal.active{
  transform: translateY(0);
  opacity: 1;
}


.right { float:right; }

.flipfront { 
  position: absolute;
  top: 50%;
  width: 100%;
  text-align: center;
  
background-color: black;
opacity: 50%;
padding: 10px;
margin-top:200px;
color:#FFF;
  }

.minnow {
min-width:300px;
}

.content_container {
width:90%; 
min-width:380px; 
margin:auto;	
}

.weight {
font-weight:bold;	
}

<!--program resources -->

.pro_container{ 
padding:20px;
margin:40px;  
min-width:380px;
background-color:white;
}

.spaced {
margin-top:60px;	
	}

hr {
  width: 100%;
   border-top: 2px solid black; 	
	}