@font-face {
  font-family: 'Gill Sans';
  src: url('Gill Sans.otf') format('opentype');
}
 body {
  font-family: Gill Sans;
  font-size: 20px:
}
.header {
background-color: #fff;

margin-top:60px;
}
.content {

    margin:50px;
width:90%;
text-align:center;
}
#dave{
  position: absolute;
  top:30px;
left: 15%;
font-size:40px;
}
#menu{
  position: absolute;
  top:20px;
right:10%;
font-size:30px;
}
#headerpic{
  margin-left: 15%;
}
ul {
  list-style-type: none;

}
#menu li{
  float:left;
  color: #232323;
}
#menu li a {
  display: block;
  color: #232323;
  padding: 8px 16px;
  text-decoration: none;
}
p {
  font-size: 22px;
}
/* Change the link col4r on hover */

.footer {
    background-color: #232323;
}


/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {

  #dave{
    position: absolute;
  top:20px;
  font-size:24px;
  }
  .footer {
      height: 20px;
      text-align: center;
      color:#fff;
      width:100%;
  }
#menu{
visibility:hidden;
}
.hover {
  position:absolute;
  top:26px;
  right: 10%;
  font-size:18px;
  display: block;
  height:18px;
  overflow:hidden;
}
.hover:hover {
height:190px;
}
.hover ul {
  list-style-type: none;
  background-color: #fff;
  width: 100px;
  margin: 0;
  padding: 10;
}
.hover li a{
  float:left;
  color: #232323;
  background-color: #fff;
  text-decoration: none;
  text-align: center;
  width: 100px;
}

#album{
  width:100%;
  height:600px;
  float:left;
}
#flyer{
  width:100%;
  float:left;
}
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
  .header {
    min-height: 140px;

  }
#menu {
  visibility:hidden;
  }

  #dave{
      top:20px;
  font-size:28px;
  }

.footer {
  position: relative;
    height: 20px;
    text-align: center;
    color:#fff;
}
#album{
  width:100%;
  float:left;
    height:600px;
}
#flyer{
  width:100%;
  float:left;
}
.hover {
  position:absolute;
  top:32px;
  right: 12%;
  font-size:18px;
  display: block;
  height:18px;
  overflow:hidden;
}
.hover:hover {
height:190px;
}
.hover ul {
  list-style-type: none;
  background-color: #fff;
  width: 100px;
  margin: 0;
  padding: 10;
}
.hover li a{
  float:left;
  color: #232323;
  background-color: #fff;
  text-decoration: none;
  text-align: center;
  width: 100px;
}
}
@media only screen and (min-width: 790px) {

 .menux {
 display: none; /* Hidden by default */
}
#dave{
font-size:24px;
}
#menu{
visibility: visible;
  display:block;
  position: absolute;
  top:0px;
  right:14%;
  font-size:18px;
}
#menu li a {
  visibility: visible;
  display: block;
  color: #232323;
  padding: 5px 8px;
  text-decoration: none;
}
/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 940px) {
  H4{
font-size: 24px;
  }

  #dave{
  font-size:28px;
  }
  #menu{
  visibility: visible;
    display:block;
    position: absolute;
    top:0px;
    right:12%;
    font-size:20px;
  }
#menu li a {
    display: block;
    color: #232323;
    padding: 6px 7px;
    text-decoration: none;
  }
  .footer {
      height: 20px;
  }
  #album{
    width:50%;
    float:left;
    min-height:470px;
  }
  #flyer{
    width:50%;
    float:left;
    min-height:470px;
  }
}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 1280px) {
  H4{
font-size: 24px;
  }
  #dave{
  position: absolute;
  top:15px;
  font-size:32px;
  }
  #menu{
    position: absolute;
    top:-5px;
  font-size:24px;
  }
.footer {
    height: 20px;
}
li a {
  display: block;
  color: #232323;
  padding: 6px 10px;
  text-decoration: none;
}
#album{
  width:50%;
  float:left;
  height:600px;
}
#flyer{
  width:50%;
  float:left;
  min-height:600px;
}
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1400px) {
.footer {
    height: 20px;
}
#album{
  width:50%;
  float:left;
  min-height:700px;
}
#flyer{
  width:50%;
  float:left;
  min-height:700px;
}
}