body {
margin: 0 auto;					
text-align: center;				
width:100%;
}

#door div.door {
width: 600px;					
height: 350px;					
position: absolute;				
float: left;					
left: 35%;						
max-width:600px;
min-width:300px;
}

#door div#viewport {
left:35%;
position:absolute;
}

#door div#box1{
background: #66A666 url('../images/blue.png'); 
}
#door div#box2{
background: #E37373 url('../images/green.png'); 
}
#door div#box3{
background: #B2B2B2 url('../images/orange.png');
}
#door div#box4{
background: #A51515 url('../images/red.png');
}

@media (min-width: 1200px) and (max-width: 1440px) {
#door div.door {
width: 600px;					
height: 350px;					
position: absolute;				
float: left;					
left: 28%;						
max-width:600px;
min-width:300px;
}
 
#door div#viewport {
left:28%;
position:absolute;
}
}

@media (min-width: 980px) and (max-width: 1199px) {
#door div.door {
width: 600px;				
height: 350px;					
position: absolute;				
float: left;					
left: 22%;						
max-width:600px;
min-width:300px;
}
 
#door div#viewport {
left:22%;
position:absolute;
}
}

@media (min-width: 768px) and (max-width: 979px) {
#door div.door {
width: 600px;					
height: 350px;					
position: absolute;				
float: left;					
left: 11%;						
max-width:600px;
min-width:300px;
 }
 
#door div#viewport {
left:11%;
position:absolute;
}
}

/* Portrait tablet to landscape and desktop */
@media (max-width: 979px) {	
#door div.door {
width: 600px;					
height: 350px;					
position: absolute;				
float: left;					
left: 15%;						
max-width:600px;
min-width:300px;
}
 
#door div#viewport {
left:15%;
position:absolute;
}
}

@media (min-width: 481px) and (max-width: 767px) {
#door div.door {
width: 600px;					
height: 350px;					
position: absolute;				
float: left;					
left: 10%;						
max-width:600px;
min-width:300px;
}
 
#door div#viewport {
left:10%;
position:absolute;
}
}

@media (max-width: 667px) {
#door div.door {
width: 570px;					
height: 350px;				
position: absolute;				
float: left;					
left: 7%;						
max-width:600px;
min-width:300px;
}
 
#door div#viewport {
left:7%;
position:absolute;
}
}

/* Landscape phones and down */
@media (max-width: 480px) {
#door div.door
{
width: 380px;					
height: 350px;					
position: absolute;				
float: left;					
left: 4%;						
}
 
#door div#viewport {
left:4%;
position:absolute;
}
}