@media only screen and (min-width: 481px)
{



img
{
      width: 100%;
}

img.gallery
{
	width: 33%;
}

div.header
{
width: 100%;
height: 100%;
background-image:url("images/header.png");
background-size: cover;
display: flex;
background-repeat: no-repeat; 
padding-top: 6.25%;
/*what percentage of the width is the height?*/
}

div.banner
{
height: 100%;
width: 100%;
background-image: url("images/banner.png");
background-position: center;
background-size: cover;
padding-top: 25%;
display: flex;
color: #ffffff;
justify-content: right;
align-items: right;
tetx-align: center;
max-height: 400px;

/*what percentage of the width is the height?*/
}

p
{
position: absolute;
top:15%;
margin-left:30%;
margin-right:30%;
font-size: 1.5vw;
text-align: jusitfy;
font-family: Verdana, Ariel, San-Serif;

}


ul
{
display: flex;
flex-direction: row;
list-style-type: none;
Padding:0;
margin:0;
}


li
{
background: #d0834b;
 width:20%;
 margin: 0 15px 15px 0;
padding:5px;
text-align:center;
}

a:link
{
 font-size: 2vw;
color: #54827c;
font-family: Verdana, Ariel, San-serif;
text-decoration: none;

}

a:visited
{
 font-size: 2vw;
color: #d7b52f;
font-family: Verdana, Ariel, San-serif;
text-decoration: none; 

}


a:hover
{
 font-size:2vw; 
color: #083839;
font-family: Verdana, Ariel, San-serif;
text-decoration: none;
}

div.pic
{
width: 100%;
height: 100%;
float: left;
}

div.text
{
width: 100%;
height: 100%;
float: right;
text-align: center;
font-family: Verdana, Ariel, San-serif;
}


div.gallery
{
width: 100%;
height: 100%;
float: left;
}

main
{
width:100%;
height: 100%;
}

p.main
{
position: relative;
top: 15%;
margin-left: 0%;
margin-right: 5%;
text-align: justify;
font-size: 1.5vw;
font-family: Verdana, Ariel, San-serif;
}

h1
{
font-size: 3vw;
}

footer
{
width: 100%;
height: 100%;
float: left;
background-color: #54827c;
}

address
{
font-size: 1.5vw;
font-family: Verdana, Ariel, San-serif;
}

}

@media only screen and (max-width: 1280px)

{
ul
{
display: flex;
flex-direction: column;
list-style-type: none;
Padding:0;
margin:0;
}


li
{
background: #d0834b;
width:100%;
padding:0px;
margin: 0 15px 15px 0;
text-align:center;
}



p
{
position: absolute;
top:3% ;
margin-left:26%;
margin-right:25%;
font-size: 2.5vw;
text-align: center;
font-family: Verdana, Ariel, San-Serif;

}

div.pic
{
width: 100%;
height: 100%;
float: left;
}

div.text
{
width: 100%;
height: 100%;
float: right;
text-align: center;
font-family: Verdana, Ariel, San-serif;
}

p.main
{
position: relative;
top: 15%;
margin-left: 5%;
margin-right: 5%;
text-align: justify;
font-size: 3.5vw;
font-family: Verdana, Ariel, San-serif;
}

h1
{
font-size: 4.5vw;
}


address
{
font-size: 4vw;
font-family: Verdana, Ariel, San-serif;
}

a:link
{
 font-size: 6vw;
color: #54827c;
font-family: Verdana, Ariel, San-serif;
text-decoration: none;

}

a:visited
{
 font-size: 6vw;
color: #d7b52f;
font-family: Verdana, Ariel, San-serif;
text-decoration: none; 

}


a:hover
{
 font-size:6vw; 
color: #083839;
font-family: Verdana, Ariel, San-serif;
text-decoration: none;
}

img.gallery
{
	width: 100%;
}




}