img{max-width:100%;}
body        
{    
	background-image: url("longerbackground2.png");
		width:100%;
	height:100%;
font-family: 'Caveat', cursive;
/* because this image is not sized it makes it extremely zoomed which i have decided to keep because it looks good*/
}
#navigation{
height:190px;
width:900px;
margin-left:20%;
margin-top:6%;
float:left;
padding:1px;
font-family: 'Caveat', cursive;}

.div{
height: 10%;
width: 85%;
position: absolute;
font-family: 'Homemade Apple', cursive;
margin-top:14%;
margin-left:20%;
font-size:2.1em;
}
.about{
height: 15px;
width: 30px;
float:center;
position: absolute;
font-family: 'Homemade Apple', cursive;
margin-top:86%;
margin-left:40%;
font-size:33px;
}
.Cataloguetext{
height: 15px;
width: 30px;
position: absolute;
font-family: 'Caveat', cursive;
margin-top:174%;
margin-left:37%;
font-size:35px;
}

#left {height:480px;
width:900px;
margin:1%;
float:left;
font-family: 'Caveat', cursive;
font-weight: bold;
padding:40px;
font-size:27px;
margin-top:1%;
margin-left:19%;
}


#header{height:572px;
width:1008px;
margin:1%;
float:left;
margin-top:3%;
margin-left:17%;
background-image:url("header.JPG");
border: 2px solid #4B6156;
}
#form{height:800px;
width:800px;
margin:1%;
float:left;
margin-top:10%;
margin-left:20%;
background-image:url("header.JPG");
border: 2px solid #4B6156;
}


	#right{
	width:173px;  
	height:690px;
	padding:28px;
	float:left;
	background-position: center;
    background-repeat: no-repeat;  
    background-size: cover;
	}

@-webkit-keyframes example {
    0%   {background-image:url("textbox.jpg"); left:0px; top:0px;}
    25%  {background-image:url("textbox2.jpg");  left:200px; top:0px;}
    50%  {background-image:url("textbox3.jpg");  left:200px; top:200px;} /*each turn the box changes image to a verison that is slightly 
	darker and contrasted than the previous one*/
    75%  {background-image:url("textbox4.jpg"); left:0px; top:200px;}
    100% {background-image:url("textbox.jpg");  left:0px; top:0px;}
}

#wrapper{height:710px;
width:1550px;
margin:1%;
float:left;
margin-top:4%;
}
#Catalogue{height:410px;
width:800px;
margin:1%;
float:left;
margin-top:115%;
margin-left:21%;
background-image:url("header.JPG");
border: 2px solid #4B6156;}
@media screen and (max-width: 960px) { .div h1 {font-size:2.1em;}
@media screen and (max-width: 900px) { .div h1 {font-size:2.1em;color:black;margin-left:10%;}
@media screen and (max-width: 768px) { .div h1 {font-size:1.5em;color:black;margin-top:30%;margin-left:10%;}
@media screen and (max-width: 550px) {.div h1 {font-size:0.9em;color:black;margin-top:30%;}
@media screen and (max-width: 320px) { .div h1 {font-size:0.5em;color:black;margin-top:16%;}
/*IPAD*/ @media only screen and (min-device-width: 768px;) and (max-device-width: 1024px;) {.div {width:100%;}