#info {
        position: absolute;

        left: 0px;
        top: 0px;  
        
        bottom: 0px;   
        right: 0px;
        
        padding: 16px;
        z-index: 325;
        
    
        font-family: OpenSans, Arial, Helvetica, sans-serif;   
        
        display: none;

        font-size: 60%;

        word-wrap: break-word;
        overflow-wrap: break-word;

        overflow-y: auto !important;


}


@media (min-width: 640px) and (min-height: 360px) { 
        #info {
        
                left: 50%;
                top: 50%;
        
                width: 424px;
                margin-left: -212px; 
                
                height: 360px;
                margin-top: -180px; 
        }
}

@media (min-width: 960px) and (min-height: 540px) { 
        #info {      
              
                width: 484px;
                height: 480px;

                margin-left: -242px; 
                margin-top: -240px;  
                
                font-size: 100%;   
        }
} 

@media (min-width: 1280px) and (min-height: 720px) { 
        #info { 
                width: 544px;
                height: 560px;
                margin-left: -272px;
                margin-top: -280px;   
        } 
}

#info.bottom-right {
    top: auto;
    bottom: 12px;
    right: 12px;
    left: auto;
    margin: 0px;
}

#info.center-right {
    top: auto;
    bottom: 12px;
    margin-top: 0px;      
}


#info #infoheader {
        width: 100%;
        cursor: move;
}

#info #infoheader a {
        float: right;
}

#info #infotitle {
        float: left;
        font-size: 14px;
        margin-top: 3px;
        margin-bottom: 16px;
        width:calc(100% - 40px);
        white-space: nowrap; 
        overflow: hidden;
        text-overflow: ellipsis;  
}


#info #infoheader a img {
        width: 32px;
        height: 32px;
}

@media (min-width: 640px) and (min-height: 360px) { 
        #info #infotitle {
            font-size: 17px;
        }
}

@media (min-width: 960px) and (min-height: 540px) { 
        #info #infotitle {
            font-size: 19px;
        }
}
} 

@media (min-width: 1280px) and (min-height: 720px) { 
        #info #infotitle {
            font-size: 21px;
        }
}
}

#info #infocontent {
        position: absolute;
        top: 80px;
        bottom: 16px;
        left: 16px;
        right: 16px;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        
}

#info #infocontent h1 {
        font-size: 21px;
        font-weight: normal; 
        margin-top: 36px;
        margin-bottom: 16px;  
}

#info #infocontent h1:first-child {
        margin-top: 0px;
}

#info #infocontent h2 {
        font-size: 18px;
        font-weight: normal;     
        margin-top: 24px;
        margin-bottom: 16px;
}

#info #infocontent h2:first-child {
        margin-top: 0px;
}

#info #infocontent h3 {
        font-size: 16px;
        font-weight: normal;     
        margin-top: 24px;
        margin-bottom: 16px;
}

#info #infocontent h3:first-child {
        margin-top: 0px;
}

#info #infocontent h4 {
        font-size: 16px;
        font-weight: normal;     
        margin-top: 24px;
        margin-bottom: 16px;
}

#info #infocontent h4:first-child {
        margin-top: 0px;
}

#info #infocontent p {
        font-family: OpenSans, Arial, Helvetica, sans-serif;  
        font-size: 14px;
        margin-bottom: 16px;   
}


#info #infocontent img {
    max-width: 80%;
}


@media (min-width: 640px) and (min-height: 360px) {
    #info #infocontent img {
        max-width: 340px;
    }
}

@media (min-width: 960px) and (min-height: 540px) {
    #info #infocontent img {
        max-width: 400px;
    }
}

@media (min-width: 1280px) and (min-height: 720px) {
    #info #infocontent img {
        max-width: 460px;
    }
}

#info #infocontent img {
        margin-bottom: 16px;        
}

#info #infocontent > * { 
        margin-right: 32px;
}

    #info #infocontent .label {
        margin-top: 6px;
        display: block;
        font-size: 12px;
        opacity: 0.85;
      /*  position: relative;
        float: left;
        max-width: 100px;
        white-space: nowrap; 
        overflow: hidden;
        text-overflow: ellipsis;  */
    }

    #info #infocontent .value {
      /*  position: absolute;
        left: 120px;*/
    }

    

    #info #infocontent .link {
        display: block;
        line-height: 24px;
        padding-left: 24px;
        vertical-align: middle;
        
        background-size: contain;
        background-position: left;
        background-repeat: no-repeat;
        white-space: nowrap; 
        overflow: hidden;
        text-overflow: ellipsis;  
    }

#info #infocontent p[data-type="caption"] {
    margin-top:-16px !important;
}

    .dark #info #infocontent .link {
        background-image: url('../ui/dark/icon_flight.png');
    }

    .bright #info #infocontent .link {
        background-image: url('../ui/bright/icon_flight.png');
    }

  
#infovideo {

    position: absolute;
    left: 50%;
    top: 50%;
    width: 680px;
    height: 520px;

    margin-left: -340px;
    margin-top: -260px;

    padding: 16px;
    z-index: 325;
    
    
    font-family: OpenSans, Arial, Helvetica, sans-serif;  
    

    display: none;  
  
}

#infovideo #infovideoheader {
        width: 100%;
        margin-bottom: 16px;
}

#infovideo #infovideoheader a {
        float: right;
}

#infovideo #infovideotitle {
        float: left;
        font-size: 21px;
}

#infovideo #infovideoheader a img {
    width: 32px;
    height: 32px;
}

#infogallery {

    position: absolute;

        left: 0px;
        top: 0px;  
        
        bottom: 0px;   
        right: 0px;
        
        padding: 16px;

    z-index: 325;
    
    
    font-family: OpenSans, Arial, Helvetica, sans-serif;  
    

    display: none;  
  
}

@media (min-width: 640px) and (min-height: 360px) { 
        #infogallery {
        
                left: 50%;
                top: 50%;
        
                width: 424px;
                margin-left: -212px; 
                
                height: 360px;
                margin-top: -180px; 
        }
}

@media (min-width: 960px) and (min-height: 540px) { 
        #infogallery {      
              
                width: 484px;
                height: 480px;

                margin-left: -242px; 
                margin-top: -240px;  
                
                font-size: 100%;   
        }
} 

@media (min-width: 1280px) and (min-height: 720px) { 
        #infogallery { 
                width: 544px;
                height: 560px;
                margin-left: -272px;
                margin-top: -280px;   
        } 
}

#infogallery #infogalleryheader {
        width: 100%;
        margin-bottom: 16px;
}

#infogallery #infogalleryheader a {
        float: right;
}

#infogallery #infogallerytitle {
        float: left;
        font-size: 21px;
}

#infogallery #infogalleryheader a img {
    width: 32px;
    height: 32px;
}


#info a:focus, #info a:hover, #info a:active  {
	color: #DDD9D0 !important;
}