/*******************************************************************************************************************
*  Author: Jeff Wilber                                                                      
*  Date: 6.12.2019                                                                                                
*******************************************************************************************************************/

/*******************************************************************************************************************
*  IMPORT OTHER STYLES                                                                                             
*******************************************************************************************************************/



	

/*******************************************************************************************************************
*  LINKS                                                                                                           
*******************************************************************************************************************/
	a:link {color: antiquewhite;text-decoration: none;}

	a:visited {color: antiquewhite;}

	a:hover {color: white;}

	a:active {color: blue;}


/*******************************************************************************************************************
*  H1 - H4                                                                                                         
*******************************************************************************************************************/
	h1   {color: yellow;font-family: "Arial", "Helvetica", "Gill Sans", "sans-serif"; font-size: 24px;font-weight: bold;margin-top: 15px;}
	h2   {color: white;font-family: "Arial", "Helvetica", "Gill Sans", "sans-serif"; font-size: 20px;}
	h3   {color: yellow;font-family: "Arial", "Helvetica", "Gill Sans", "sans-serif"; font-size: 16px;}
	h4   {color: black;font-family: "Arial", "Helvetica", "Gill Sans", "sans-serif"; font-size: 20px;font-weight: bold;margin-top: 5px;margin-bottom: 5px;}

/*******************************************************************************************************************
*  HEADER                                                                                                          
*******************************************************************************************************************/
       
	



/*******************************************************************************************************************
*  CONTENT                                                                                                         
*******************************************************************************************************************/
    body {background-color: black;text-align: center; padding-top: 5%;padding-left: 10%;padding-bottom: 15%}
	
	p {color: white;font-family: "Arial", "Helvetica", "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", "sans-serif";}




/*******************************************************************************************************************
*  FOOTER                                                                                                          
*******************************************************************************************************************/



/*******************************************************************************************************************
*  OTHER STYLES                                                                                                    
*******************************************************************************************************************/
/* First make sure the video thumbnail images are responsive. */

  img {
	max-width: 100%;
    height: auto;
  }
  
  /* 
  This is the starting grid for each video with thumbnails 1 across for the smallest screen size.
  It's important to use percentages or there may be gaps on the right side of the page. 
  */

	.video {
		background: #fff;
		width: 100%; /* Single column view. */
		padding-bottom: 0px;
		box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.10);
		margin: 2%;
		float:left;
		}

 	
   /* 
   These keep the height of each video thumbnail consistent between YouTube and Vimeo.
   Each can have thumbnail sizes that vary by 1px and are likely break your layout. 
   */

  .video figure {
    height: 0;
    padding-bottom: 56.25%;
	  overflow: hidden;}

	.video figure a {
   
	display: block;
      margin: 0;
      padding: 0;
      border: none;
      line-height: 0;
    }
  


 
  /* These are my preferred rollover styles. */

  .video img {
    width: 100%;
    opacity: 1;
  }

  .video img:hover, .video img:active, .video img:focus {
    opacity: 0.75;
  }


 

/*******************************************************************************************************************
*  Responsive design                                                                                                    
*******************************************************************************************************************/


@media (min-width: 400px) { 
.video {
	width: 46%;} /* Thumbnails 2 across */
} 

@media screen and (min-width: 600px) { 
	
 body {background-color: black;text-align: center; align-self: center; padding-top: 2%;max-width: 1000px;margin:auto;}			
	
.video {    
    
    width: 31.333%; /* Thumbnails 3 across */
		box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.10);
		margin: 1%;
  }

    
	
	

    
	
	/*google maps*/
	

}

/* iPhone4 */
@media only screen and (-webkit-min-device-pixel-ratio: 2) { 
    html {width: 80%}
}