header {
        
		display: flex;
		margin-bottom:5px;
	}

	img {
        
		width:100%;
	}

	.photo1 {
        /* could not get background image height to remain fixed during browser resizing--- I was able to have the width correctly adjust but the height is slightly off*/
		background-image: url(PintBeerHeader.jpg);
		background-position: 50% 50%;
    background-repeat: no-repeat;
		background-size: 100%;
		border:0px;
		width:100%;
	}

	nav , a {
	
		color: white;
		display: flex;
    font-family: quiche-sans, sans-serif;
    font-size: 12px;
    font-style: normal;
    font-weight: 100;
    justify-content:center;
    padding: 5px 20px;
    word-spacing: 5px;
             
	}

	h1 {
        color: #27A634;
        display: flex;
	      font-family: delaney, sans-serif;
        font-weight: 700;
        font-size: 30px;
        font-style: normal;
        padding: 10px;
        margin: 5%;
	}

 /* menu titles*/
	h2 {

    	
        background-image: linear-gradient(to bottom right,#B7AEAE, #D2D2D2, #DED8D8, #F2ECEC);
		    color: grey;
		    display: flex;
		    font-family: scarlet, sans-serif;
        font-weight: 300;
        font-style: normal;
		    justify-content: center;
        width: 100%;
	}

 /* HOOLIGAN*/
	h3 {
		display:flex;
		font-family: farnham-text, serif;
    font-weight: 200;
    font-size: 30px;
    font-style: normal;
		justify-content: center;
	}
  p {
    color: white;
    font-family: quiche-sans, sans-serif;
    font-size: 75%;
    font-style: normal;
    font-weight: 100;
  }
  .row2 {
    
    width:100%;
  }

  

	.definition {
		display:flex;
		font-family: farnham-text, serif;
    font-weight: 600;
    font-style: normal;
		justify-content:center;
	}

	#exception {
		
		font-size: 10px;
    margin-bottom: 0%;
	}

    #eats_pic {
    	display:flex;
    	height: auto;
    	justify-content: center;
    	margin: 10px;
    	width:100%;
  }

	.eats_menu {
		display: flex;
		justify-content:center;
	}

	.burgers {
		display:inline-flex;
		height:190px;
		width:75%;
	}

    .col-header {
    	display:flex;
    	justify-content:space-between;
  }

    .video {
    	display:flex;
    	justify-content:center;
  }
    
    .main_content {
    	background-image: url(hooligan.jpeg);
    	background-repeat: no-repeat;
		  background-size: 100%;
		  border: 0px;
		  color: white;
		  padding: 25% 0% 5% 0%;
		  width:100%;
  }

    footer {
      background-image: url(footer.jpg);
      background-repeat: no-repeat;
      background-size: 100% 100%;
      color: gold;
      
      text-align: center;
      margin-top: 5px;
      padding: 5% 0% 5% 0%;
      width:100%;
  }

    .homepage , .drinkspage, .eatspage, .historypage, .contactpage {
    	background-color: black;
    }

    .container {
      display: flex;
      padding-bottom: 5px;
    }
    h4 {
      align-items: center;
      display:flex;
      justify-content: center;

    }
    .footfinish {

      display:flex;
      flex-direction: row;
      font-size: 13px;
      justify-content: space-around;
      text-align: center;
      
    }
    .phone {
      font-size: 15px;
      font-weight: 400;
    }

    
    .video-container {

      width: 100%;
      height: 100%;
      
    }
    video {
      background-position: center;
      background-size: 100%;
      display: flex;
      height: 200px;
      width:100%;
      }

    .beer , .whiskey , .cocktails, .apps, .entres, .desserts {
      align-items: center;
      background-color: black;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: space-around;
      width:100%;
      text-align: center;

    }
    .col-4 , .col-6 {
      display: flex;
      flex-direction: row;
      justify-content: space-around;
      text-align: center;
    }
    .contact_menu  {
       background-image: url(cliffs.jpeg);
       background-repeat: no-repeat;
       background-size: 100%;
       padding: 2% 0% 2% 0%;
       height: 300px;
       width:100%;
      
    }

    .form {
       display: flex;
       justify-content: center;
    }
    
    .whiskey {
      display: flex;
      justify-content: center;
      margin: 0;
    }
   


    
    
    

    
   
    


















     

     /* For mobile phones: */
@media only screen and ( max-width: 570px ) {

[class*="col-"] {width: 100%;}

}








@media only screen and (min-width: 570px) {
  /* For desktop: */
  .col-1 {width: 8.33%;}
  .col-2 {width: 16.66%;}
  .col-3 {width: 25%;}
  .col-4 {width: 33.33%;}
  .col-5 {width: 41.66%;}
  .col-6 {width: 50%;}
  .col-7 {width: 58.33%;}
  .col-8 {width: 66.66%;}
  .col-9 {width: 75%;}
  .col-10 {width: 83.33%;}
  .col-11 {width: 91.66%;}
  .col-12 {width: 100%;}
}