@media screen and (orientation: portrait) {

body { 
background-color:black;
}

  
.wrapper {
height:100%;
width:100%;
background-color:black;
display:flex;
position:absolute;
flex-direction:column;
order:0;
}

.header {
height:10%;
width:100%;
background-color:none;
order:1;
}

#head1 {
font-size:36px;
}
  
#head2 {
font-size:30px;
}
  
#head3 {
font-size:30px;
}
  
.headanchors {
height:100%;
width:100%;
color:yellow;
background-color:none;
text-decoration:none;
display:flex;
justify-content:space-around;
z-index:0;
}

.headanchors:hover {
color:red;
text-decoration:underline;
}

.content {
height:100%;
width:100%;
background-color:none;
display:flex;
flex-direction:row;
order:2;
}


.middle {
height:100%;
width:100%;
background-color:none;
display:flex;
flex-direction:row;
order:3;
flex-wrap:wrap;
}

.m1, .m2, .m3, .m4, .m5, .m6, .m7, .m8, .m9, .m10 {
height:150%;
width:100%;
z-index:0;
color:blue;
}

.m1 {
order:20;
background-color:none;
color:red;
}

.m2 {
order:24;
background-color:none;
}

.m3 {
order:25;
background-color:none;
}

.m4 {
order:27;
background-color:none;
}

.m5 {
order:22;
background-color:none;
}

.m6 {
order:26;
background-color:none;
}

.m7 {
order:23;
background-color:none;
}

.m8 {
order:28;
background-color:none;
}

.m9 {
order:21;
background-color:none;
}

.m10 {
order:29;
background-color:none;
}

.m11 {
order:30;
background-color:none;
}
  
.m12 {
order:31;
background-color:none;
}
  
.m13 {
order:32;
background-color:none;
}
  
.m14 {
order:33;
background-color:none;
}
  
.m15 {
order:34;
background-color:none;
}

.m16 {
order:35;
background-color:none;
}
  
.m17 {
order:36;
background-color:none;
}
  
.m18 {
order:37;
background-color:none;
}
  
.m19 {
order:38;
background-color:none;
}

.m20 {
order:39;
background-color:none;
}
  
.m21 {
order:40;
background-color:none;
}


.anchors {
height:80%;
width:100%;
color:red;
background-color:none;
text-decoration:none;
}
  
#anc1 {
color:red;
font-size:24px;
}  
  
#anc2 {
color:red;
font-size:24px;
}

#anc3 {
color:red;
font-size:24px;
}

#anc4 {
color:red;
font-size:24px;
}

#anc5 {
color:red;
font-size:24px;
}
  
#anc6 {
color:red;
font-size:24px;
}

#anc6 {
color:red;
font-size:24px;
}
 

#anc7 {
color:red;
font-size:24px;
}
  
#anc8 {
color:red;
font-size:24px;
}
  
#anc9 {
color:red;
font-size:24px;
}
  
#anc10 {
color:red;
font-size:24px;
}

a:visited {
color:red;
}

.mainimgs {
height:100%;
width:100%;
color:blue;
border:none;
border-width:none;
border-color:none;
border-radius:40px;
}
  
#img1 {
width:100%;
height:100%;
}

#img2 {
width:100%;
height:100%;
}

#img3 {
width:100%;
height:100%;
}

#img4 {
width:100%;
height:100%;
}

#img5 {
width:100%;
height:100%;
}

#img6 {
width:100%;
height:100%;
}

#img7 {
width:100%;
height:100%;
}

#img8 {
width:100%;
height:100%;
}

#img9 {
width:100%;
height:100%;
}

#img10 {
width:100%;
height:100%;
}
  
#img11 {
width:100%;
height:100%;
}

#img12 {
width:100%;
height:100%;
}

#img13 {
width:100%;
height:100%;
}

#img14 {
width:100%;
height:100%;
}

#img15 {
width:100%;
height:100%;
}

#img16 {
width:100%;
height:100%;
}

#img17 {
width:100%;
height:100%;
}
  
#hotspot1 {
order:0;  
  }
#hotspot2 {
order:1;  
  }
#hotspot3 {
order:2;  
  }
#hotspot4 {
order:3;  
  }
#hotspot5 {
order:4;  
  }
  
#Song1 {
order:17;
}
  
#Song2 {
order:16;
}
 
#Song3 {
order:7;
}
  
#Song4 {
order:5;
}
  
#Song5 {
order:8;
}

#Song6 {
order:9;
}
  
#Song7 {
order:10;
}  
  
#Song8 {
order:11;
}
  
#Song9 {
order:12;
}

#Song10 {
order:15;
}
  
#Song11 {
order:6;
}
 
#Song12 {
order:13;
}
  
#Song13 {
order:14;
}
  
#Song14 {
order:3;
}

#Song15 {
order:2;
}
  
#Song16 {
order:1;
}  
  
#Song17 {
order:4;
}
  
#Song18 {
order:18;
}
  
#Song19 {
order:19;
}
  
#Song20 {
order:20;
}
  
#Song21 {
order:21;
}
  
#Song22 {
order:22;
}
  
#Song23 {
order:23;
}
  
#Song24 {
order:24;
}
  
#Song25 {
order:25;
}
  
#Song26 {
order:26;
}
  
#Song27 {
order:27;
}
  
#Song28 {
order:28;
} 

#CompactSportCar1 {
order:101;
}

#CompactSportCar2 {
order:103;  
}
  
#CompactSportCar3 {
order:105;    
}

#CompactSportCar4 {
order:109;    
}

#CompactSportCar5 {
order:102;    
}

#CompactSportCar6 {
order:106;    
}
  
#CompactSportCar7 {
order:107;    
}

#CompactSportCar8 {
order:104;    
}
  
#CompactSportCar9 {
order:108;    
}
  

}

@media screen and (orientation: landscape) {
  
body { 
background-color:black;
}
  

.wrapper {
height:100%;
width:100%;
background-color:none;
display:flex;
position:absolute;
flex-direction:column;
order:0;
}

.header {
height:10%;
width:100%;
background-color:none;
flex-direction:column;
order:1;
}

#head1 {
font-size:36px;
}
  
#head2 {
font-size:30px;
}
  
#head3 {
font-size:30px;
}
  
.headanchors {
height:100%;
width:100%;
color:yellow;
background-color:black;
text-decoration:none;
display:flex;
justify-content:space-around;
z-index:0;
}

.headanchors:hover {
color:red;
text-decoration:underline;
}

.content {
height:100%;
width:100%;
background-color:black;
display:flex;
flex-direction:row;
order:2;
}


.middle {
height:100%;
width:100%;
background-color:black;
display:flex;
flex-direction:column;
order:3;
flex-wrap:wrap;
}

.m1, .m2, .m3, .m4, .m5, .m6, .m7, .m8, .m9, .m10 {
height:100%;
width:100%;
z-index:0;
color:blue;
}

.m1 {
order:20;
background-color:none;
color:red;
}

.m2 {
order:21;
background-color:none;
}

.m3 {
order:23;
background-color:none;
}

.m4 {
order:27;
background-color:none;
}

.m5 {
order:24;
background-color:none;
}

.m6 {
order:25;
background-color:none;
}

.m7 {
order:26;
background-color:none;
}

.m8 {
order:28;
background-color:none;
}

.m9 {
order:22;
background-color:none;
}

.m10 {
order:29;
background-color:none;
}

.m11 {
order:30;
background-color:none;
}
  
.m12 {
order:31;
background-color:none;
}
  
.m13 {
order:32;
background-color:none;
}
  
.m14 {
order:33;
background-color:none;
}
  
.m15 {
order:34;
background-color:none;
}

.m16 {
order:35;
background-color:none;
}
  
.m17 {
order:36;
background-color:none;
}
  
.m18 {
order:37;
background-color:none;
}
  
.m19 {
order:38;
background-color:none;
}

.m20 {
order:39;
background-color:none;
}
  
.m21 {
order:40;
background-color:none;
}


.anchors {
height:80%;
width:100%;
color:red;
background-color:none;
text-decoration:none;
}
  
#anc1 {
color:red;
font-size:24px;
}  
  
#anc2 {
color:red;
font-size:24px;
}

#anc3 {
color:red;
font-size:24px;
}

#anc4 {
color:red;
font-size:24px;
}

#anc5 {
color:red;
font-size:24px;
}
  
#anc6 {
color:red;
font-size:24px;
}

#anc6 {
color:red;
font-size:24px;
}
 

#anc7 {
color:red;
font-size:24px;
}
  
#anc8 {
color:red;
font-size:24px;
}
  
#anc9 {
color:red;
font-size:24px;
}
  
#anc10 {
color:red;
font-size:24px;
}

a:visited {
color:red;
}

.mainimgs {
height:100%;
width:100%;
color:blue;
border:none;
border-width:none;
border-color:none;
border-radius:40px;
}
  
#img1 {
width:100%;
height:100%;
}

#img2 {
width:100%;
height:100%;
}

#img3 {
width:100%;
height:100%;
}

#img4 {
width:100%;
height:100%;
}

#img5 {
width:100%;
height:100%;
}

#img6 {
width:100%;
height:100%;
}

#img7 {
width:100%;
height:100%;
}

#img8 {
width:100%;
height:100%;
}

#img9 {
width:100%;
height:100%;
}

#img10 {
width:100%;
height:100%;
}
  

#hotspot1 {
order:0;  
  }
#hotspot2 {
order:1;  
  }
#hotspot3 {
order:2;  
  }
#hotspot4 {
order:3;  
  }
#hotspot5 {
order:4;  
  }
  
  
#Song1 {
order:17;
}
  
#Song2 {
order:16;
}
 
#Song3 {
order:7;
}
  
#Song4 {
order:5;
}
  
#Song5 {
order:8;
}

#Song6 {
order:9;
}
  
#Song7 {
order:10;
}  
  
#Song8 {
order:11;
}
  
#Song9 {
order:12;
}

#Song10 {
order:15;
}
  
#Song11 {
order:6;
}
 
#Song12 {
order:13;
}
  
#Song13 {
order:14;
}
  
#Song14 {
order:3;
}

#Song15 {
order:2;
}
  
#Song16 {
order:1;
}  
  
#Song17 {
order:4;
}
  
#Song18 {
order:18;
}
  
#Song19 {
order:19;
}
  
#Song20 {
order:20;
}
  
#Song21 {
order:21;
}
  
#Song22 {
order:22;
}
  
#Song23 {
order:23;
}
  
#Song24 {
order:24;
}
  
#Song25 {
order:25;
}
  
#Song26 {
order:26;
}
  
#Song27 {
order:27;
}
  
#Song28 {
order:28;
} 
  
#CompactSportCar1 {
order:101;
}

#CompactSportCar2 {
order:103;  
}
  
#CompactSportCar3 {
order:105;    
}

#CompactSportCar4 {
order:109;    
}

#CompactSportCar5 {
order:102;    
}

#CompactSportCar6 {
order:106;    
}
  
#CompactSportCar7 {
order:107;    
}

#CompactSportCar8 {
order:104;    
}
  
#CompactSportCar9 {
order:108;    
}
  

}


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

body { 
background-color:none;
}


.wrapper {
height:100%;
width:100%;
background-color:none;
display:flex;
position:absolute;
flex-direction:column;
order:-1;
}

.header {
height:20%;
width:100%;
background-color:none;
display:flex;
order:0;
}

.callme {
font-size:18px;
}

.content {
height:90%;
width:100%;
background-color:none;
display:flex;
order:1;
}


.middle {
height:100%;
width:100%;
background-color:none;
display:flex;
flex-direction:row;
flex-wrap:wrap;
}               

.m1, .m2, .m3, .m4, .m5, .m6, .m7, .m8, .m9, .m10  {
width:50%;
height:50%;
background-color:none;
display:flex;
align-items:center;
}
  
a:hover {
color:red;
}

a:visited {
color:blue;
}


.txt {
font-size:28px;
margin-top:100px;
display:flex;
}
  
#Song1 {
order:17;
}
  
#Song2 {
order:16;
}
 
#Song3 {
order:7;
}
  
#Song4 {
order:5;
}
  
#Song5 {
order:8;
}

#Song6 {
order:9;
}
  
#Song7 {
order:10;
}  
  
#Song8 {
order:11;
}
  
#Song9 {
order:12;
}

#Song10 {
order:15;
}
  
#Song11 {
order:6;
}
 
#Song12 {
order:13;
}
  
#Song13 {
order:14;
}
  
#Song14 {
order:3;
}

#Song15 {
order:2;
}
  
#Song16 {
order:1;
}  
  
#Song17 {
order:4;
}
  
#Song18 {
order:18;
}
  
#Song19 {
order:19;
}
  
#Song20 {
order:20;
}
  
#Song21 {
order:21;
}
  
#Song22 {
order:22;
}
  
#Song23 {
order:23;
}
  
#Song24 {
order:24;
}
  
#Song25 {
order:25;
}
  
#Song26 {
order:26;
}
  
#Song27 {
order:27;
}
  
#Song28 {
order:28;
} 
  
#CompactSportCar1 {
order:101;
}

#CompactSportCar2 {
order:103;  
}
  
#CompactSportCar3 {
order:105;    
}

#CompactSportCar4 {
order:109;    
}

#CompactSportCar5 {
order:102;    
}

#CompactSportCar6 {
order:106;    
}
  
#CompactSportCar7 {
order:107;    
}

#CompactSportCar8 {
order:104;    
}
  
#CompactSportCar9 {
order:108;    
}

}

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

body { 
background-color:black;
}
  

.wrapper {
height:100%;
width:100%;
background-color:none;
display:flex;
position:absolute;
flex-direction:column;
order:0;
}

.header {
height:10%;
width:100%;
background-color:none;
flex-direction:column;
order:1;
}

#head1 {
font-size:36px;
}
  
#head2 {
font-size:30px;
}
  
#head3 {
font-size:30px;
}
  
.headanchors {
height:100%;
width:100%;
color:yellow;
background-color:black;
text-decoration:none;
display:flex;
justify-content:space-around;
z-index:0;
}

.headanchors:hover {
color:red;
text-decoration:underline;
}

.content {
height:100%;
width:100%;
background-color:black;
display:flex;
flex-direction:row;
order:2;
}


.middle {
height:100%;
width:100%;
background-color:black;
display:flex;
flex-direction:row;
order:3;
flex-wrap:wrap;
}

.m1, .m2, .m3, .m4, .m5, .m6, .m7, .m8, .m9, .m10 {
height:25%;
width:25%;
z-index:0;
color:blue;
}

.m1 {
order:21;
background-color:none;
color:red;
}

.m2 {
order:27;
background-color:none;
}

.m3 {
order:23;
background-color:none;
}

.m4 {
order:28;
background-color:none;
}

.m5 {
order:20;
background-color:none;
}

.m6 {
order:25;
background-color:none;
}

.m7 {
order:26;
background-color:none;
}

.m8 {
order:24;
background-color:none;
}

.m9 {
order:22;
background-color:none;
}

.m10 {
order:29;
background-color:none;
}

.m11 {
order:30;
background-color:none;
}
  
.m12 {
order:31;
background-color:none;
}
  
.m13 {
order:32;
background-color:none;
}
  
.m14 {
order:33;
background-color:none;
}
  
.m15 {
order:34;
background-color:none;
}

.m16 {
order:35;
background-color:none;
}
  
.m17 {
order:36;
background-color:none;
}
  
.m18 {
order:37;
background-color:none;
}
  
.m19 {
order:38;
background-color:none;
}

.m20 {
order:39;
background-color:none;
}
  
.m21 {
order:40;
background-color:none;
}


.anchors {
height:80%;
width:100%;
color:red;
background-color:none;
text-decoration:none;
}
  
#anc1 {
color:red;
font-size:24px;
}  
  
#anc2 {
color:red;
font-size:24px;
}

#anc3 {
color:red;
font-size:24px;
}

#anc4 {
color:red;
font-size:24px;
}

#anc5 {
color:red;
font-size:24px;
}
  
#anc6 {
color:red;
font-size:24px;
}

#anc6 {
color:red;
font-size:24px;
}
 

#anc7 {
color:red;
font-size:24px;
}
  
#anc8 {
color:red;
font-size:24px;
}
  
#anc9 {
color:red;
font-size:24px;
}
  
#anc10 {
color:red;
font-size:24px;
}

a:visited {
color:red;
}

.mainimgs {
height:100%;
width:100%;
color:blue;
border:none;
border-width:none;
border-color:none;
border-radius:40px;
}
  
#img1 {
width:100%;
height:100%;
}

#img2 {
width:100%;
height:100%;
}

#img3 {
width:100%;
height:100%;
}

#img4 {
width:100%;
height:100%;
}

#img5 {
width:100%;
height:100%;
}

#img6 {
width:100%;
height:100%;
}

#img7 {
width:100%;
height:100%;
}

#img8 {
width:100%;
height:100%;
}

#img9 {
width:100%;
height:100%;
}

#img10 {
width:100%;
height:100%;
}
  

#hotspot1 {
order:0;  
  }
#hotspot2 {
order:1;  
  }
#hotspot3 {
order:2;  
  }
#hotspot4 {
order:3;  
  }
#hotspot5 {
order:4;  
  }
  
  
#Song1 {
order:17;
}
  
#Song2 {
order:16;
}
 
#Song3 {
order:7;
}
  
#Song4 {
order:5;
}
  
#Song5 {
order:8;
}

#Song6 {
order:9;
}
  
#Song7 {
order:10;
}  
  
#Song8 {
order:11;
}
  
#Song9 {
order:12;
}

#Song10 {
order:15;
}
  
#Song11 {
order:6;
}
 
#Song12 {
order:13;
}
  
#Song13 {
order:14;
}
  
#Song14 {
order:3;
}

#Song15 {
order:2;
}
  
#Song16 {
order:1;
}  
  
#Song17 {
order:4;
}
  
#Song18 {
order:18;
}
  
#Song19 {
order:19;
}
  
#Song20 {
order:20;
}
  
#Song21 {
order:21;
}
  
#Song22 {
order:22;
}
  
#Song23 {
order:23;
}
  
#Song24 {
order:24;
}
  
#Song25 {
order:25;
}
  
#Song26 {
order:26;
}
  
#Song27 {
order:27;
}
  
#Song28 {
order:28;
} 
  
#CompactSportCar1 {
order:101;
}

#CompactSportCar2 {
order:103;  
}
  
#CompactSportCar3 {
order:105;    
}

#CompactSportCar4 {
order:109;    
}

#CompactSportCar5 {
order:102;    
}

#CompactSportCar6 {
order:106;    
}
  
#CompactSportCar7 {
order:107;    
}

#CompactSportCar8 {
order:104;    
}
  
#CompactSportCar9 {
order:108;    
}
  

}