/*CSS for Capstone Project Template*/

 body 
  {
  	margin: 0;
    padding: 0px;
    font-size: .9em;
  	background-color: #053010;
  }

  h1
  {
    font-family: 'Trebuchet MS';
    font-size: 1.5em;
    letter-spacing: .02em;
    text-align: center;
  }

/*GLOBAL CLASSES*/
  hr
    {
      margin: 0;
    }

/*FORMATTING FOR THE MAIN CONTAINER*/
 main
  {
    padding: 20px;
    margin: 0 0 16px 0;
    font-family: verdana;
	  font-size: 1.25rem;
  } 

/*CLASS THAT WILL WORK ONLY WITH <img>*/
  img.center
    {
      display: block;
      margin-left: auto;
      margin-right: auto;
      width: 80%; 
    }

/*FORMATTING FOR <a>*/
  a 
  {
    text-decoration: none;
  } 

  a:hover {color: #ffffff;} /*affects all <a> that are children of the <footer>*/
  a:visited {color: #ffffff;} /*affects all <a> that are children of the <footer>*/
  a:active {color: #ffffff;}/*affects all <a> that are children of the <footer>*/
  a:link {color: #ffffff;}

/*FORMATTING FOR HEADER*/

header 
  {
    font-family: 'Trebuchet MS';
    font-size: 3.5rem;
    color: #ffffff;
    padding-left: 12px;
    border: 1px solid #000000;
    background-color: #823412;/*image: url("../images/placeholder_image.jpg");*/ 
    /* background-color: black; */
    z-index: 2;
  }

/*FORMATTING FOR Vikings! IN HEADER*/
#brand
{
  padding-left: .889em;
  text-align: center;
}

/*FORMATTING TO MAKE HEADER STICK. USED WITH JAVASCRIPT*/
.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}

.sticky + .content 
{
  padding-top: 102px;
}

/*FORMATTING FOR CENTERING VIDEO*/
audio
{
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 70%; 
}

video 
	{
		display: block;
		margin-left: auto;
		margin-right: auto;
    margin-top:2%;
    margin-bottom:2%;
		width:95%;
		border: 4px solid #823412;
    border-radius: 75px;
	}

  img{
    margin-bottom:2%;
    border-radius:25px;
  }

/*FORMATTING FOR IFRAME*/
.container
{
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-top: 56.25%;
}

.r-iframe
{
  margin: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/*FORMATTING FOR <footer>*/
footer 
	{
		font-family: 'Trebuchet MS';
		font-size: .65rem;
		min-height: 3rem; /*this is new for 2017/18; students need to change*/
		border: 1px solid #000000;  
		background-color: #2a1005;
		padding: 12px;
		text-align: left;
		color: white;
	}
	
.left
{
	float: left;
	padding: 0 6px 0 0;
	
}

/*FORMATTING FOR ALL <a> BEHAVIOR NESTED INSIDE <footer>*/
	footer a:hover {color: #ffffff;} /*affects all <a> that are children of the <footer>*/
	footer a:visited {color: #ffffff;} /*affects all <a> that are children of the <footer>*/
	footer a:active {color: #ffffff;}/*affects all <a> that are children of the <footer>*/
	footer a:link {color: #ffffff;} /*affects all <a> that are children of the <footer>*/
 

/*FLEX SECTION*/

/*flex container*/
.flex_parent_container 
  {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around; 	
	/* align-items: flex-start; */ /*prevents flex children from being same height; the default value is stretch*/
  }
			
/*flex info for all child flex containers*/		
.box 
  {
    padding: 10px;
    margin: 10px;		
    flex-basis: 3in; /*inches vs pixels supports flex on smaller viewports.*/
    /* flex: 1 2 3in; */ /* shorthand* for flex-grow, flex-shrink, flex-basis */
    min-width: 1px;
    background-color: #c6dc93;
    border-radius:75px;
  }
			
/*flex info for all child flex containers in the <footer>*/	
.fbox 
  {
    padding: 10px;
    margin: 10px;
    flex-basis: 3in; /*inches vs pixels supports flex on smaller viewports.*/
    /*flex: 1 2 3in;  /* shorthand* for flex-grow, flex-shrink, flex-basis */
    min-width: 1px;
  } 


	/*Flex information specific to a child flex container*/
.box1 
  {
    order: 1;
    border: 5px solid #7be082;
    background-color: #2a1005;
    flex-grow: 1;
	  color: #ffffff;
  }

  .box1b
  {
    order: 1;
    border: 5px solid #7be082;
    background-color: #2a1005;
    flex-grow: 1;
	  color: #ffffff;
    text-align: center;
  }

  .box1a 
  {
    order: 1;
    border: 5px solid #7be082;
    background-color: #2a1005;
    flex-grow: 5;
	  color: #ffffff;
	
  }

.box2 
  {
    flex-grow: 5;
    order: 2;
    border: 5px solid #7be082;
    background-color: #2a1005;
    color: #ffffff;
  }

.box2a
  {
    flex-grow: 1;
    order: 2;
    border: 5px solid #7be082;
    background-color: #2a1005;
	  color: #ffffff;
  }

.box3 
  {
    order: 3;
    border: 5px solid #7be082;
    background-color: #2a1005;
    color: #ffffff;
    flex-grow: 1;
	
  }

.box3a 
  {
    order: 3;
    border: 5px solid #7be082;
    background-color: #2a1005;
    color: #ffffff;
    flex-grow: 4;
	
  }

.fbox1 
  {
    order: 1;
    flex-grow: 1;
  }

.fbox2 
  {
    order: 2;
    flex-grow: 2;
  }

.fbox3 
  {
    order: 3;
    flex-grow: 1;
  }
  
  .box1b
  {
    order: 1;
    border: 5px solid #7be082;
    background-color: #2a1005;
    flex-grow: 1;
	  color: #ffffff;
    z-index: -1;
    text-align: center;
  }

  ul{
    font-family: 'Trebuchet MS';
     font-size: 1.5em;
    letter-spacing: .02em;
    text-align: left;
  }

/*END FLEX SECTION*/