@charset "UTF-8";
/* CSS Document */

@font-face {
    font-family: 'GFS Didot';
    src: url('GFSDidot-Regular.woff2') format('woff2'),
        url('GFSDidot-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Univers';
    src: url('Univers-Bold.woff2') format('woff2'),
        url('Univers-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Univers Condensed';
    src: url('Univers-BoldCondensed.woff2') format('woff2'),
        url('Univers-BoldCondensed.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

/* Mobile First Small devices (phones, 414px and up) */


body {
    background: black;
    font-family: 'Univers Condensed';
    color: white;
}

.frame {
    background: url("page22.jpg");
    background-size: cover;  
    width: 414px;
    height: 276px;
    margin: 0px auto;
    position: relative;
}

h1 {
    color: white;
    text-align: center;  
    position: absolute;
    text-shadow: 3px 4px 4px rgba(0,0,0,0.7);    
    font-size: 14px; 
    top: 78px;
    left: 32px;
    line-height: 12px;
    letter-spacing: 3px;  	
}

h2 {
    position: absolute;
    text-align: center;
    font-size: 8px; 
    width: 140px;    
    top: 104px;
    left: 12px;      
}

h3 {
    position: absolute;
    text-align: center;
    writing-mode: vertical-rl;
    text-orientation: upright;  
    color: black;
    font-size: 26px; 
    top: 90px;
    left: 132px;  	
}

a { 
  color: white;
  -webkit-transition: .3s;
  transition: .3s;
}

a:hover {
transform: scale(.4);
z-index:2;    

}



.taxi {
  background: url("page22-taxi.png");
  text-indent: -9999px;  
  position: absolute;
  width: 683px;
  height: 380px;
  transform: scale(.28); 
  top: -134px;
  left: -50px;     
}

.holland {
  background: url("page22-holland.png");
  text-indent: -9999px;      
  position: absolute;
  width: 727px;
  height: 351px;
  transform: scale(.28);    
  top: 49px;
  left: -80px; 
}

.back {
    font-family: 'GFS Didot';
    position: absolute;
    font-size: 12px; 
    top: 200px;
    left: 50px;    
}

.back:hover {
transform: scale(1.5);
    
}

/* Media Query */
     
/* Small devices (phones, 480px and up) */
@media screen and (min-width: 480px){

.frame {
    width: 480px;
    height: 320px;
}    
        
h1 {    
    font-size: 20px; 
    top: 88px;
    left: 30px;
}
       
h2 {
    font-size: 10px; 
    width: 160px;    
    top: 118px;
    left: 14px;    
    } 

h3 {
    font-size: 40px; 
    letter-spacing: -8px;  
    top: 104px;
    left: 136px;    
    }      

a:hover {
transform: scale(.5);
z-index:2;    

}

.taxi {
  transform: scale(.32); 
  top: -124px;
  left: 0px;     
}

.holland {
  transform: scale(.32);    
  top: 84px;
  left: -32px; 
}
    
.back {
    font-size: 18px; 
    top: 260px;
    left: 60px;    
}  
  
}


/* Small devices (tablets, 660px and up) */
@media screen and (min-width: 660px){
             
.frame {
    width: 660px;
    height: 440px;
}     
   
h1 {
    letter-spacing: 5px;     
    font-size: 26px; 
    top: 126px;
    left: 40px;
}
       
h2 {
    font-size: 16px; 
    width: 230px;    
    top: 156px;
    left: 14px;    
    } 

h3 {
    font-size: 50px; 
    letter-spacing: -10px;  
    top: 150px;
    left: 196px;    
    }      

a:hover {
transform: scale(.7);
z-index:2;    

}

.taxi {
  transform: scale(.45); 
  top: -100px;
  left: 132px;     
}

.holland {
  transform: scale(.45);    
  top: 182px;
  left: 93px; 
}
    
.back {
    font-size: 22px; 
    top: 370px;
    left: 70px;    
}      
} 

/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) { 
   
.frame {
    width: 768px;
    height: 512px;
}  

h1 {
    font-size: 30px; 
    top: 150px;
    left: 50px;
}
       
h2 {
    font-size: 16px; 
    width: 260px;    
    top: 190px;
    left: 20px;    
    } 

h3 {
    font-size: 60px; 
    letter-spacing: -14px;  
    top: 176px;
    left: 224px;    
    }      

a:hover {
transform: scale(.9);
z-index:2;    

}

.taxi {
  transform: scale(.53); 
  top: -86px;
  left: 209px;     
}

.holland {
  transform: scale(.53);    
  top: 242px;
  left: 154px; 
}
    
.back {
    font-size: 22px; 
    top: 360px;
    left: 100px;    
}      
    
}

/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) { 
       
.frame {
    width: 992px;
    height: 661px;
}     

h1 {
    font-size: 38px; 
    top: 196px;
    left: 72px;
}
       
h2 {
    font-size: 20px; 
    width: 340px;    
    top: 245px;
    left: 24px;    
    } 

h3 {
    font-size: 70px; 
    letter-spacing: -14px;  
    top: 228px;
    left: 302px;    
    }      

a:hover {
transform: scale(.9);
z-index:2;    

}

.taxi {
  transform: scale(.7); 
  top: -52px;
  left: 356px;     
}

.holland {
  transform: scale(.7);    
  top: 362px;
  left: 322px; 
}
    
.back {
    font-size: 26px; 
    top: 480px;
    left: 120px;    
}     
     
}

/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
            
.frame {
    width: 1200px;
    height: 800px;
}      

h1 {
    font-size: 44px; 
    top: 234px;
    left: 92px;
}
       
h2 {
    font-size: 22px; 
    width: 400px;    
    top: 302px;
    left: 30px;    
    } 

h3 {
    font-size: 80px; 
    letter-spacing: -14px;  
    top: 280px;
    left: 372px;    
    }      

a:hover {
transform: scale(1);
z-index:2;    

}

.taxi {
  transform: scale(.8); 
  top: -26px;
  left: 512px;     
}

.holland {
  transform: scale(.8);    
  top: 474px;
  left: 454px; 
}
    
.back {
    font-size: 30px; 
    top: 580px;
    left: 150px;    
}  
    
}

/* Large devices (large desktops, 1500px and up) */
@media (min-width: 1500px) {
	
.frame {
    width: 1500px;
    height: 1000px;
}

h1 {
    font-size: 60px; 
    top: 290px;
    left: 102px;
}
       
h2 {
    font-size: 26px; 
    width: 400px;    
    top: 376px;
    left: 88px;    
    }
    
h3 {
    font-size: 100px;
    letter-spacing: -10px;
    top: 344px;
    left: 464px;    
    }    

a:hover {
transform: scale(1.4);
z-index:2;    

}

.taxi {
  transform: scale(1); 
  top: 19px;
  left: 726px;     
}

.holland {
  transform: scale(1);    
  top: 638px;
  left: 660px; 
}
    
.back {
    font-size: 36px; 
    top: 700px;
    left: 200px;    
}
	
        
}