/*Global Typography*/ 

body {  /*text */
	margin:0 auto;
  font-family: "Roboto", "Helvetica", "Arial", sans-serif;
  font-size: 100%;
  line-height: 1.4;
  font-weight: 400;
  color: #102a43;
	


}


/*H1 becomes a dark grey header with a green text and grey line below  */

h1 {
	color: #819637;
	background-color:#342B30;
	border:1.0px solid #BCB334;
	border-bottom:5.0px solid #9f969A;
	padding: 15 0 5 5;
	font-family: "Trebuchet MS", Helvetica, sans-serif;
}

h2,h3,h4{ /*headings */
	color:#819637;font-weight:600;
}

a:link, a:visited {/*hyperlinks */
	color: #001b40; font-weight: 500;
}

/*Capital letter automatically after article tab
 */

      article > p:first-child::first-letter{
      color:#819637;
        float:left;
          font-family:Georgia;
        font-size:75px;
        line-height:60px;
        padding-top:4px;
          padding-right:8px;
        padding-left:3px;
      }


/*Global Navigation*/   

.navigation {
	padding: .5rem 1rem;
	display: flex;
	justify-content: space-between;
	text-transform: uppercase;
	font-size: .9rem;
}

.navigation nav {
	display: inline; 
}

.navigation ul {
	display: inline-flex;
	flex-wrap: wrap;
	list-style: none;
	margin: 0;
	padding: 0; 
}

.navigation li {
	padding: 0 .5rem; 
}

.navigation a {
	text-decoration: none;
}
	
/*Breadcrumbs*/   

ul.breadcrumb {
	list-style: none;
	background: #819637;
	margin: 0 0 -30 0;
	padding: 0 0 6 10;  
	border-radius: 0.5rem 0.5rem 0 0;
}

ul.breadcrumb li {
	display: inline;
	font: 0.6rem/1.0 Roboto, verdana, Helvetica, sans-serif;
}

ul.breadcrumb li+li:before {
	padding: 0.5rem;
	color: #BCB33B;
	content: "/\00a0";
}

ul.breadcrumb li a {
	color: #f4f4f4;
	text-decoration: none;
}

ul.breadcrumb li a:hover {
	color: #0D6EBD;
	text-decoration: underline;
}

/* place the banner */

      
.banner-main img{
  height:150px; 
  width:100%; 
  object-fit: cover;
  object-position: 50% 50%;
  width: 100%;
  box-shadow: 1px 1px 5px rgba(0,0,0,0.6);

}

.banner-main {
  position: relative;
  text-align: center;
  color: white;
 
 max-width: 1200px;
  margin: 0 auto;
  box-sizing:border-box;
}
    
.centered {
  position: absolute;
  top: 50%;
  left: 32%;
  transform: translate(-50%, -50%);
      color: #ffffff; /* Changes text banner's font color */
 
  font-size: 2.5em; /* Changes the text banner's font size */

  font-weight: 900; /* Changes the text banner's font thickness */
  letter-spacing: 0.05em; /* Changes the space between each letter */
  margin: 0 auto 0em;
  text-shadow:0 0 10px #342B30; /* Changes the text banner's text shadow */
}
      

      .icon {
    padding: 50%;
    background-size: cover;
    background-position: center center;
}
    
.icon_circle {
  width: 150px;
  height: 150px;
  border-radius: 80px;
  border: 10px solid #342B30;
}



  .columns {
  display: grid;
  grid-gap: 20px;
grid-template-columns: 32% 65%;	
  width: 90%;
  max-width: 1200px;
  margin: 2px auto;
  background-color:#f4f4f4;

}
      
      
      
.left_column {
  margin-top:5px;
margin-left: 2%;
}
.right_column {
margin-right: 2%;

}

/* If the screen width is narrow, columns will be removed */


@media(max-width:600px){
      
      .columns {grid-template-columns: 100%;	

        
      }
    }

/* This will vary according to screen width */

.page { /*grey background corner curves */
	border-radius: 10px 10px 0 0;
	box-shadow: 0 2px 5px rgba(0,0,0,.9);
	background: #f4f4f4;
}
.wrapper {
	padding:2em 1em;
}
.article {

}


.article {
	transition:all .5s ease-in; 
}
		
/*.article:nth-child(3) {
	grid-column: span 2;
}
*/

/*remove the sidebar when the screen is very narrow*/
@media screen and (max-width: 499px) {

.page {background: #f4f4f4;}
.wrapper {padding: 0.2em;}	
.article {padding: 1.5rem; border-radius: 1rem;}
	
}

	
@media (min-width: 500px) {

/*Turn on the grid using wrapper */		
.wrapper {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	grid-gap: 1em;
	grid-auto-flow: dense;
	align-items:baseline;
	}
}



.image_article img {
/* Set rules to fill background */
	max-height: 853px;
	min-height: 100px;
	min-width: 100%;
			
/* Set up proportionate scaling */
	width: 100%;
	height: auto;
			
/* Set up positioning */
	position: relative;
	top: 0;
	left: 0;
}


/*Date and time infor for each post*/

.article .time {
  font-size: 12px;
  font-weight: bold;
  color: #999;
  text-transform: uppercase;
  letter-spacing: .05em;
  margin: 2em 0 0 0;
}



        
.footer{
  background-color: #819637;
  color: #fcf9f9;
  font-size: 90%;
  padding: 1rem 2rem;}