* { margin: 0; padding: 0; border: 0;}



body {
	background-color: white;
    max-width: 1000px;
    margin: auto;
  
}

.wrapper {
    width: 100%;
    background-color: whitesmoke;
    margin-top: 15px;
}

.background {   /*this covers the whole page */

        ;
}

#header {
    width: 100%;
    background-color: aliceblue;
     
}

header img {     /*logo */
    width: 38%;
    float: left;
    margin-left: 31%;
    opacity: .98;
    
  }

#header2 {       /* address and phone */
    font-size:140%;
    padding-bottom:3px;
    width:100%;
    text-align: center;
    opacity: .95;
}

#header2 ul {
    text-align:center;
    width:90%;
    margin: 0 auto;
    list-style-type:none;
    text-decoration:none;
    }

#header2 li a {
  font-family: 'source_sans_prosemibold';
    float: left;
    color:#303030;
    display:block;
    padding: 1px 0 0 0;
}

#header2 li a:hover {
    text-decoration:none;
    color:green;
}

.right {      /* phone number on header2 and footer */
float: right;
}

#frontpage {      /* this is the background image of the front page*/
  background-image: url("../images/lotties.jpg");
  background-color: #cccccc;
  
  background-repeat: no-repeat;
  background-size: cover;
  opacity: 0.90;
    float: none;
     height: 600px;
}

* {
  box-sizing: border-box;
}

.row {
  display: flex;
}

/* Create three equal columns that sits next to each other */
.column {
  flex: 20%;
  padding: 5px;
}

#tablewithhours {
    margin-top: 10px;
    margin-bottom: 20px;
    width: 50%;
    margin-left: 25%;
    opacity: .95;
    display: block;
}

#dogdays{
  
    background-color: white;
    margin-top: 10px;
    margin-bottom: 20px;
    width: 80%;
    margin-left: 10%;
    opacity: .85;
    display: block;
	height: auto;
}
#dogdays h1 {
	text-transform: uppercase;
}

#tacos {
	width: 80%;
	margin-left: 10%;
	float: left;
	
}

#social {
	width: 80%;
	margin-left: 10%;
	padding-top:  0px;
	padding-bottom: 0px;
	float: left;
	background-color: #ffff9a;
	
	
}

#social img {
float:left;
width: 15.33%;
float: right;
margin-right: 23%;
	margin-bottom: 10PX;
	
 
	

	
	
	
	
}
#dogdays img {
	width: 25%;
	padding-bottom: 10px;
	padding-left: 10%;
	
}


#covid img {
    width: 94%;
    float: left;
    margin-left: 3%;
}


    .fish
    { width: 20px;
      position: absolute;
      top: 60px;
      left: 80px;
    }



#offer {
   width: 80%;
    margin-left: 10%;
    opacity: .95;
    display: block;
    background-color: azure;
    font-family: 'source_sans_prosemibold';
    padding: 10px 10px 40px 10px;
         overflow: auto;
    margin-bottom: 20px;
 
}



#offer h2{
    font-size: 180%;
    text-align: center;
    text-transform: uppercase;
    padding-bottom: 0px;
    margin-top: 0px;
}


#offer h3 {
    margin-top: 0px;
    padding-top: 0px;
    text-align: center;
    text-transform: uppercase;
    
}

#mimosa {
     padding: 8px 6px;
     background-color: beige;
 
    opacity: .95;
    width: 40%;
    float: left;
    margin-left: 5%;
     overflow: auto;
    text-align: center;
}

#mimosa a {
    
    color: #B7433D;
    display: block;
   
    
}

#mimosa a:hover {
    color: lightpink;
    text-decoration: none;
}

#french {
    padding: 8px 6px;
     background-color: beige;
    opacity: .95;
    width: 40%;
    float: right;
    margin-right: 5%;
     text-align: center;
    
}

#french a {
    
    color: #B7433D;
    display: block;
   
    
}

#french a:hover {
    color: lightpink;
    text-decoration: none;
}
#offer img {
    width: 30%;
    margin-left: 35%;
}

#offer p {
    text-align: center;
    font-size: 12-
}
#tablewithhours img {
    width: 60%;
    margin-left: 20%;
    float: left;
    display:block;
  
   
}




tr, td, th {
     padding: 2px;
     text-align: center;
    width: 25%;
    
    
    
}







#contactpage {   /* this is the background image of the contact page*/
background-image: url("../images/inside.jpg");
  background-color: #cccccc;
  height: 600px;
  background-repeat: no-repeat;
  background-size: cover;
  opacity: 0.71;
}

#contactinfo   {    /* this is the contact page info*/
    background-color: azure;
    opacity: .85;
    text-align: center;
    width: 80%;
    float:right;
    margin-right: 10%;
    margin-top: 45px;
    font-size: 150%;
    margin-bottom: 30px;
    padding-top: 40;
    color: white;
    font-family: 'bebasregular';
}

#contactinfo a {
    
    color: #B7433D;
    display: block;
    margin-top: 20px;
    
}

#contactinfo a:hover {
    color: lightpink;
    text-decoration: none;
}




 /* new nev */
.topnav {
    overflow: hidden;
    background-color: #333;
    text-transform: uppercase;
 font-family: 'source_sans_prosemibold';
    width: 100%;
    opacity: .95;
      position: -webkit-sticky;
  position: sticky;
  top: 0;

    
}

.topnav a {
  float: left;
  display: block;
  color: #F5F8ED;
  text-align: center;
  padding: 10px 16px;
  text-decoration: none;
  font-size: 17px;
}

.topnav a:hover {
  background-color: whitesmoke;
  color: black;
}

.topnav a.active {
  background-color: indianred;
  color: white;
}

.topnav .icon {
  display: none;
}

h1 {
    text-transform: uppercase;
    text-align: center; 
    font-family: 'source_sans_prosemibold';
    color: #B7433D;
    margin-bottom: 4px;
}

#dinnermobile {  /* this is the food menu for mobile */
    display: none;
}

footer {
    padding-top: 5px;
    font-size:110%;
    overflow:hidden;
    padding-bottom:3px;
    font-family: 'bebasregular';
    width:100%;
    text-align: center;
    margin-bottom: 20px;
}

footer ul {
    text-align:center;
    width:90%;
    margin: 0 auto;
}

footer li {
    float:left;
    list-style-type:none;
}

footer li a {
    float: left;
    text-decoration:none;
    color:#303030;
    display:block;
    padding: 1px 0 0 0;
}

footer li a:hover {
    text-decoration:none;
    color:#202020;
}



.expand {
	display: block !important; 
}


.menu-btn span {
	display: block;
	width: 30px;
	height: 5px;
	margin: 2px 0;
	background: #303030;
	z-index: 99;
}

@font-face {
    font-family: 'source_sans_prosemibold';
    src: url('../fonts/sourcesanspro-semibold-webfont.woff2') format('woff2'),
         url('../fonts/sourcesanspro-semibold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}
 
@font-face {
font-family: 'bebasregular';
    src: url('../fonts/bebas___-webfont.eot');
    src: url('../fonts/bebas___-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/bebas___-webfont.woff2') format('woff2'),
         url('../fonts/bebas___-webfont.woff') format('woff'),
         url('../fonts/bebas___-webfont.ttf') format('truetype'),
         url('../fonts/bebas___-webfont.svg#bebasregular') format('svg');
    font-weight: normal;
    font-style: normal;
}





@media screen and (max-width: 750px) {

    
    table {
    width: 100%;
    font-size: 115%;
    width: 100%;
       
}
}

@media screen and (max-width: 600px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
    
        #tablewithhours {
       margin-left: 5%;
        width: 90%;
    }
    
    #tablewithhours img {
    width: 100%;
    margin-left: 0%;
    float: left;
    display:block;
  
   
}
    
    #covid img {
    width: 100%;
        float: left;
    margin-left: 0%;
 
 
}


    
     #dogdays img {
        margin-left: 2%;
		 width: 25%;
      
        float: left;
}
    


    
    header2 {
        font-size: 90%;
    }

  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
    
    header img {     /*logo */
    width: 78%;
    float: left;
    margin-left: 11%;
  }
    
#dinnermobile {   /* the menu img for mobile*/
    display: block;  
}

#dinner {display: none;}    /* image for desktop*/
    
body {
	background-color: white;
    max-width: 1000px;
    margin: auto;
    padding: 0 0px;
	}
    
.topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}

@media screen and (max-width: 580px) {



  #header2 {
        font-size: 100%;
    }
}