@font-face {
    font-family: 'Absara thin';
    src: url('fonts/absara-thin-webfont.eot');
    src: url('fonts/absara-thin-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/absara-thin-webfont.woff2') format('woff2'),
         url('fonts/absara-thin-webfont.woff') format('woff'),
         url('fonts/absara-thin-webfont.ttf') format('truetype'),
         url('fonts/absara-thin-webfont.svg#absara_thinregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'AbsaraSans medium';
    src: url('fonts/absarasans-medium-webfont.eot');
    src: url('fonts/absarasans-medium-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/absarasans-medium-webfont.woff2') format('woff2'),
         url('fonts/absarasans-medium-webfont.woff') format('woff'),
         url('fonts/absarasans-medium-webfont.ttf') format('truetype'),
         url('fonts/absarasans-medium-webfont.svg#absarasans-mediumregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}

html    {
            font-size: 125% ;
            }
        
        body    {
            font-size: 100% ;
            -webkit-font-smoothing: antialiased ;
            }
        #mainWrapper    {
            width: 957px ;
            height:  537px ;
            padding: 20px ;
            background-color: #5787A9 ;
            margin: 0 auto ;
            overflow: hidden ;
            position: relative ;
            }
        #map    {
            width: 957px ;
            height:  537px ;
            background-clip: content-box ;
            background-image: url(ui-img/mapa.svg) ;
            background-size: cover;
            font-family: Arial ;
            font-weight: normal ;
            }
        
        h1  {
            font-family: "Absara thin", sans-serif ;
            line-height: .85 ;
            margin-bottom: .7em ;
            letter-spacing: -.13em ;
            font-size: 1.2rem ;
            color: #fff ;
            width: 8.3em ;
            opacity: .55 ;
            height: 5.2em ;
            position: absolute ;
            bottom: 1.75em ;
            left: 1.7em ;
            text-align: left ;
            pointer-events: none ;
            }
        
        .l1 {
            font-size: 2em ;
            font-weight: bold ;
            letter-spacing: -.05em ;
            }
        .l2 {
            font-size: 1.6em ;
            font-weight: bold ;
            position: relative ;
            top: -.1em ;
            }

            .l2 span {
                margin-left: .1em ;
               font-size: 1.5em ;
                letter-spacing: -.075em ;
                font-family: Baskerville, sans-serif ;
                }

        .l3 {
            font-size: 1.25em ;
            letter-spacing: auto ;
            position: relative ;
            top: .2em ;
            }
        
        .pin    {
            width: 1em ;
            height: 1em ;
            position: absolute ;
            font-size: .5rem ;
            border-radius: 500em ;
            background-color: #FFB000 ;
            cursor: pointer ;
            animation: introPin 1.2s ease-out 1 ;
            transition: all .25s ;
            }
            .pin:hover    {
                z-index: 1
                }

@keyframes introPin {
    from{
        top: -20em ;
    }
}
        
       .pin::before {
            content: "" ;
            width: 100% ;
            height: 100% ;
            box-sizing: border-box ;
            position: absolute ;
            top: 0 ;
            left: 0 ;
            border: 1px solid #FFB000 ;
            border-radius: 500em ;
            animation: wavesPin 1.7s ease-in-out infinite ;
            pointer-events: none ;
            }
            .pin:hover::before {
                border-color: #d2f5ff ;
                }
        
        .pin::after {
            content: "" ;
            width: 100% ;
            height: 100% ;
            position: absolute ;
            top: 0 ;
            left: 0 ;
            transform: scale(.8) ;
            background-color: orange ;
            border-radius: 500em ;
            transition: all .25s ;
            }
            .pin:hover::after {
                width: 100% ;
                height: 100% ;
                transform: scale(1) ;
                background-color: #d2f5ff ;
                }
        
        
        .varios {
            width: 2em ;
            height: 2em ;
            transition: all .25s ;
            }
            .varios::before {
                animation: wavesPinVarios 1.7s ease-in-out infinite ;
                }
        
        .varios div    {
            width: 100% ;
            height:  100% ;
            position: absolute ;
            z-index: 1 ;
            line-height: 1.29em ;
            text-align: center ;
            font-family: 'AbsaraSans medium', sans-serif ;
            font-size: 1.4em ;
            border-radius: 500em ;
            color: #222D38 ;
            transition: all .25s ;
            }
        
    @keyframes wavesPin    {
        60%, 100%  {
            transform: scale(3) ;
            opacity: 0 ;
            border-radius: 100em ;
            }
    }
    @keyframes wavesPinVarios    {
        60%, 100%  {
            transform: scale(2.25) ;
            opacity: 0 ;
            border-radius: 100em ;
            }
    }
    
    .sudafrica {
        top: 79% ;
        left: 54% ;
        }
        
    .uk {
        top: 34.2% ;
        left: 46% ;
        }

    .ny {
        top: 40.6% ;
        left: 28% ;
        }

    .hongkong {
        top: 52.2% ;
        left: 79% ;
        }

    .canada {
        top: 32% ;
        left: 21% ;
        }
        
    .missouri {
        top: 43.85% ;
        left: 22.5% ;
        }
        
    .nigeria {
        top: 59.2% ;
        left: 50% ;
        }
            
    .baltimore {
        top: 43.3% ;
        left: 26.9% ;
        }
                
    .la {
        top: 44.9% ;
        left: 15.4% ;
        }
    
    .australia {
        top: 77.5% ;
        left: 82.4% ;
        }
    
    .india {
        top: 53.8% ;
        left: 69.5% ;
        }
        
    .gibraltar {
        top: 45.6% ;
        left: 45.9% ;
        }
        
    .madrid {
        top: 43.5% ;
        left: 46.45% ;
        }
    
    .detailMap {
        width: 100% ;
        height: 100% ;
        background-color: rgba(0,0,0,.5) ;
        position: absolute ;
        z-index: 10 ;
        top: 0 ;
        left: 0 ;
        
display: none ;
        }
        
    i   {
        display: block ;
        position:  absolute ;
        z-index: 999 ;
        top: .2em ;
        right: .2em ;
        width: 1.2em ;
        height: 1.2em ;
        cursor: pointer ;
        padding: .7em ;
        transition: all .15s ;
        }

        i svg  {
            width: 100% ;
            transition: all .25s ;
            fill: #1cceff ;
            }
        
        i:hover svg  {
            transform: scale(1.2) ;
            opacity: 1 ;
            fill: #d2f5ff ;
            }
        i:active svg  {
            fill: #000 ;
            }
        
    .detailMap > div { 
        background-color: #5787A9 ;
        position: absolute ;
        z-index: 10 ;
        top: 50% ;
        left: 50% ;
        transform: translate(-50%,-51%) ;
        box-shadow: 0 12px 35px 3px rgba(0,0,0,.7)
        }
        
    #detailUK > div  {
        padding: 1em ;
        width: 395px ;
        height: 462px ;
        }

    #detailNY > div  {
        width: 601px ;
        height: 471px ;
        }
        
    #ukMap  {
        width: 100% ;
        height: 100% ;
        background-image: url(ui-img/uk.svg) ;
        position: relative ;
        }
        
        .london {
            top: 82% ;
            left: 84% ;
            }
        
        .manchester {
            top: 61.5% ;
            left: 64% ;
            }
        
        .oxford {
            top: 80% ;
            left: 75% ;
            }
        
        .escocia {
            top: 27% ;
            left: 51% ;
            }

        .irlanda {
            top: 65% ;
            left: 21% ;
            }
        
    #nyMap  {
        width: 100% ;
        height: 100% ;
        background-image: url(ui-img/newyork.svg) ;
        position: relative ;
        }
        
        .littleItaly {
            top: 37.5% ;
            left: 45.3% ;
            }
        
        .brooklyn {
            top: 75% ;
            left: 53% ;
            }
        
        .leside {
            top: 39% ;
            left: 49% ;
            }

.audioplayer {
            width: 230px ;
            height: 104px ;
	        position: relative;
            left: -56px ;
            top: -120px ;
            z-index: 100 ;
    transform-origin: 61px 122px ;
            animation: introPlayer .25s ease-out 1 ;
            display: none ;
            }
   
@keyframes introPlayer {
    from{
        transform: scale(0.2) ;
        opacity: 0 ;
    }
}     
        .audioplayer::after {
	       content: "" ;
            width: 0 ;
            height:  0 ;
            border-top: 20px solid #deebf0 ;
            border-left: 10px solid transparent ;
            border-right: 10px solid transparent ;
            position: absolute ;
            z-index: 100000 ;
            bottom: -20px ;
            left: 51px ;
            }
        
        .frame  {
            width: 160px ;
            height:  100px ;
            position: absolute ;
            background-color: #000 ;
            top: 0 ;
            right: 0 ;
            border: 1px solid #deebf0 ;
            }
    
        .location {
	        position: absolute ;
            bottom: -5px ;
            left: 16px ;
            color: #d2f5ff ;
            font-size: 20px ;
            white-space: nowrap ;
            letter-spacing: -1px ;
            font-family: "AbsaraSans medium", serif ;
            z-index: 500 ;
            text-shadow: 0 1px 0px rgba(0,0,0,.5) ;
            display: none ;
            }
.film {
    font-size: .65rem ;
    position: absolute ;
    bottom: -3.8em ;
    left: 2px ;
    font-family: 'Absara thin';
    -webkit-font-smoothing: subpixel-antialiased ;
    text-shadow: 0 1px 0px rgba(0,0,0,.5) ;
    color: #fff ;
    font-style: italic ;
    width: 180px ;
    }