@font-face {
    font-family: 'roboto-thin';
    src: url('../../../static/fonts/roboto/v9/vziuho9z-oj4wgkppotg1_eszw2xoq-xsnqo47m55da.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'GoBold';
    src: url('../../../vbcommon/fonts/gobold.eot') format('embedded-opentype'), url('../../../vbcommon/fonts/gobold.woff') format('woff'), url('../../../vbcommon/fonts/gobold.ttf') format('truetype');
}

@font-face {
    font-family: 'GoBoldLight';
    src: url('../../../vbcommon/fonts/gobold_light.eot') format('embedded-opentype'), url('../../../vbcommon/fonts/gobold_light.woff') format('woff'), url('../../../vbcommon/fonts/gobold_light.ttf') format('truetype');
}

@font-face {
    font-family: 'GoBoldThin';
    src: url('../../../vbcommon/fonts/gobold-thin.eot') format('embedded-opentype'), url('../../../vbcommon/fonts/gobold-thin.woff') format('woff'), url('../../../vbcommon/fonts/gobold-thin.ttf') format('truetype');
}

@font-face {
    font-family: 'kefa';
    src: url('../../../vbcommon/fonts/kefaiipro-light.eot') format('embedded-opentype'), url('../../../vbcommon/fonts/kefaiipro-light.woff') format('woff'), url('../../../vbcommon/fonts/kefaiipro-light.ttf') format('truetype');
}

@font-face {
    font-family: 'KefaItalic';
    src: url('../../../vbcommon/fonts/kefaiipro-lightitalic.eot') format('embedded-opentype'), url('../../../vbcommon/fonts/kefaiipro-lightitalic.woff') format('woff'), url('../../../vbcommon/fonts/kefaiipro-lightitalic.ttf') format('truetype');
}

@font-face {
    font-family: 'Asap';
    font-style: normal;
    font-weight: 400;
    src: local('Asap'), local('Asap-Regular'), url(../../../s/asap/v3/oivlpajapl0eznw3e5z2dq.woff) format('woff2'), url(../../../s/asap/v3/sgbaq0dzhsgnmfqm2jx5ng.woff) format('woff');
}

@font-face {
    font-family: 'Asap';
    font-style: italic;
    font-weight: 400;
    src: local('Asap Italic'), local('Asap-Italic'), url(../../../s/asap/v3/fpskrkcsvvo2_anp2zt5yg.woff) format('woff2'), url(../../../s/asap/v3/mdjnj_rxy6gcpmasgzstfq.woff) format('woff');
}


#upgrade-overlay {
    position: fixed;
    display: block;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 999999;
    background-color: rgba(0, 0, 0, 0.5);
}

#upgrade-popup-new {
    position: fixed;
    display: none; 
    top: 0;
    left: 50%;
    width: 600px;
    margin-left: -168px;
    z-index: 1000000;
}
    
#upgrade-popup-new.open {
    animation-name: projector-down;      
    animation-duration: 1s;      
    animation-iteration-count: 1;      
    animation-timing-function: ease;
    animation-direction: normal;
    animation-fill-mode: forwards;
    animation-delay: 0;
    z-index: 10000000000;
    

    -moz-animation-name: projector-down;      
    -moz-animation-duration: 1s;      
    -moz-animation-iteration-count: 1;      
    -moz-animation-timing-function: ease;

    -webkit-animation-name: projector-down;      
    -webkit-animation-duration: 1s;      
    -webkit-animation-iteration-count: 1;      
    -webkit-animation-timing-function: ease;

    -o-animation-name: projector-down;      
    -o-animation-duration: 1s;      
    -o-animation-iteration-count: 1;      
    -o-animation-timing-function: ease;
}

    .roller-top,
    .roller-bottom,
    .projector {
        position: relative;
        display: block;
    }

    .roller-top,
    .roller-bottom {
        background-color: transparent;
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
    }

    .roller-top {
        background-image: url(../../../upgrade_popup/images/projector_top.png);
        height: 209px;
    }

    .roller-bottom {
        background-image: url(../../../upgrade_popup/images/projector_buttom_with_string.png);
        height: 115px;
    }

    .projector {
        background-color: white;
        margin: 0 15px;
        height: 0;
        overflow: hidden;
    }

    .projector.open {
        -webkit-animation-name: open-board;
        -webkit-animation-duration: 1.5s;
        -webkit-animation-iteration-count: 1;      
        -webkit-animation-timing-function: ease-out; 
        -webkit-animation-fill-mode:forwards;            
        -webkit-animation-delay: 0.9s;

        -moz-animation-name: open-board;
        -moz-animation-duration: 1.5s;
        -moz-animation-iteration-count: 1;      
        -moz-animation-timing-function: ease-out;      
        -moz-animation-fill-mode:forwards;          
        -moz-animation-delay: 0.9s;

        -o-animation-name: open-board;
        -o-animation-duration: 1.5s;
        -o-animation-iteration-count: 1;      
        -o-animation-timing-function: ease-out;      
        -o-animation-fill-mode:forwards;          
        -o-animation-delay: 0.9s;

        animation-name: open-board;
        animation-delay: 0.9s;
        animation-duration: 1.5s;      
        animation-iteration-count: 1; 
        animation-timing-function: ease-out;      
        animation-fill-mode:forwards; 
    }

    #upgrade-close {
        position: absolute;
        display: block;
        top: 5px;
        right: 5px;
        width: 20px;
        height: 20px;
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        background-image: url(../../../upgrade_popup/images/x.png);
        z-index: 5;
        cursor: pointer;
    }

    .message {
            background-color: transparent;
            position: relative;
            height: 100%;
            margin: 0px 15px;
        }

        #message-img {
            position: absolute;
            display: block;
            width: 40%;
            height: 100%;
            background-position: center;
            background-repeat: no-repeat;
            background-size: contain;
            left: 0;
            top: 0;
        }

        .message-block {
            position: absolute;
            display: block;
            height: 100%;
            width: 60%;
            top: 0;
            right: 0;
        }

        .message-title-box {
            position: relative;
            display: block;
            height: 49%;
            margin: 0 0 0 10px;
        }

        #message-title-text{
            position: absolute;
            font-family: gobold;
            font-size: 43px;
            text-transform: uppercase; 
            text-align: left;   
            bottom: 0;
            width: 100%;
            white-space: pre-line;
            color: #eb7e00;
        }

        #message-title-text.upgrade-private {
            font-size: 41px;
        }

        .message-text-box {
            position: relative;
            height: 14%;
            margin: 0 0 0 10px;
        }

        #message-text{
            font-size: 20px;
            font-family: asap;
            margin-top: 10px;
            white-space: pre-wrap;
        }

        .message-button {
            position: relative;
            height: 53px;
            background-color: #eb7e00;
            margin: 5px auto 0 10px;
            width: 200px;
            text-align: center;
            cursor: pointer;
        }

        #message-button-text{
            font-size: 29px;
            font-family: gobold;
            text-transform: uppercase;
            position: relative;
            display: block;
            top: 8px;
            border: none;
            color: white;
            -moz-transition: all 0.3s;
            -webkit-transition: all 0.3s;
            transition: all 0.3s;
        }

        .message-button:hover  > #message-button-text{
            -moz-transform: scale(1.1);
            -webkit-transform: scale(1.1);
            transform: scale(1.1);
        }

        .img-download {
            background-image: url(../../../upgrade_popup/images/download.gif);
        }

        .img-private {
            background-image: url(../../../upgrade_popup/images/private.gif);
        }

        .img-premium {
            background-image: url(../../../upgrade_popup/images/premium.gif);
        }

        .img-collaborate {
            background-image: url(../../../upgrade_popup/images/collaborate.gif);
        }

        .img-analytic {
            background-image: url(../../../upgrade_popup/images/popup-insight.gif);
            
        }

        .img-remote {
            background-image: url(../../../remote_view/images/remote_wait.gif);
        }

        .projector.close {
            -webkit-animation-name: close-board;
            -moz-animation-name: close-board;
            -o-animation-name: close-board;
            animation-name: close-board;
            
            -webkit-animation-delay: -0.1s;
            -moz-animation-delay: -0.1s;
            -o-animation-delay: -0.1s;
            animation-delay: -0.1s;

            -webkit-animation-duration: 1s;
            -moz-animation-duration: 1s;
            -o-animation-duration: 1s;
            animation-duration: 1s;

            -webkit-animation-timing-function: ease-in-out;
            -moz-animation-timing-function: ease-in-out;
            -o-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out;

            -webkit-animation-iteration-count: 1;  
            -moz-animation-iteration-count: 1;
            -o-animation-iteration-count: 1;
            animation-iteration-count: 1;
                
            -webkit-animation-fill-mode: forwards;
            -moz-animation-fill-mode: forwards; 
            -o-animation-fill-mode: forwards; 
            animation-fill-mode: forwards;          
        }
        
        #upgrade-popup-new.close {
            -webkit-animation-name: projector-up;
            -moz-animation-name: projector-up;
            -o-animation-name: projector-up;
            animation-name: projector-up;
            
            -webkit-animation-delay: 1s;
            -moz-animation-delay: 1s;
            -o-animation-delay: 1s;
            animation-delay: 1s;

            -webkit-animation-iteration-count: 1;
            -moz-animation-iteration-count: 1;
            -o-animation-iteration-count: 1;
            animation-iteration-count: 1;
             
            -webkit-animation-fill-mode:forwards; 
            -moz-animation-fill-mode:forwards;
            -o-animation-fill-mode:forwards;
            animation-fill-mode:forwards;

            -webkit-animation-duration: 1s; 
            -moz-animation-duration: 1s;
            -o-animation-duration: 1s;
            animation-duration: 1s; 
                 
            -webkit-animation-timing-function: ease;
            -moz-animation-timing-function: ease;
            -o-animation-timing-function: ease;
            animation-timing-function: ease;
        }

    /*For big desktop*/
    @media screen and (min-width: 1450px) {
        #upgrade-popup-new {
            width: 806px;
            top: -65px;
            margin-left: -403px;
        }

        .roller-top {
            height: 282px;
        }

        .roller-bottom {
            height: 155px;
        }

        #message-img {
            background-size: 294px;
            background-position: -5px 54px;
        }

        #message-img.img-private{
            background-size: 306px;
            background-position: -5px 66px;
        }

        #message-img.img-premium{
            background-size: 287px;
            background-position: 1px 71px;
        }

        #message-img.img-collaborate{
           
            background-position: -10px 69px;
        
            background-size: 306px;
}

        .message-title-box {
            height: 210.7px;
        }

        #message-title-text{
            font-size: 51px;
            line-height: 1.25;
        }

        #message-title-text.upgrade-private {
            font-size: 48px;
            letter-spacing: -0.5px;
        }

        .message-text-box {
        
height: 107.8px;
}

        #upgrade-popup-new.explorer .projector {
            height: 430px;
        }

        .projector.close {
            height: 430px;
        }

        @keyframes projector-down {
            0%   {top: -600px;}    
            100% {top: -65px;}
        }
        @-moz-keyframes projector-down {
            0%   {top: -600px;}    
            100% {top: -65px;}
        }
        @-webkit-keyframes projector-down {
            0%   {top: -600px;}    
            100% {top: -65px;}
        }
        @-o-keyframes projector-down {
            0%   {top: -600px;}    
            100% {top: -65px;}
        }

        @keyframes open-board {
            0%   {height: 0;}
            20%   {height: 530px;}
            40%   {height: 400px;}
            65%   {height: 460px;}    
            100% {height: 430px;}
        }
        @-moz-keyframes open-board {
            0%   {height: 0;}
            20%   {height: 530px;}
            40%   {height: 400px;}
            65%   {height: 460px;}    
            100% {height: 430px;}
        }
        @-webkit-keyframes open-board {
            0%   {height: 0;}
            20%   {height: 530px;}
            40%   {height: 400px;}
            65%   {height: 460px;}    
            100% {height: 430px;}
        }
        @-o-keyframes open-board {
            0%   {height: 0;}
            20%   {height: 530px;}
            40%   {height: 400px;}
            65%   {height: 460px;}    
            100% {height: 430px;}
        }

        @keyframes close-board {
            0%   {height: 430px;}
            25%   {height: 460px;}
            100% {height: 0;}
        }
        @-moz-keyframes close-board {
            0%   {height: 430px;}
            25%   {height: 460px;}
            100% {height: 0;}
        }
        @-webkit-keyframes close-board {
            0%   {height: 430px;}
            25%   {height: 460px;}
            100% {height: 0;}
        }
        @-o-keyframes close-board {
            0%   {height: 430px;}
            25%   {height: 460px;}
            100% {height: 0;}
        }

        @keyframes projector-up {
            0%   {top: -65px;}    
            100% {top: -600px;}
        }
        @-moz-keyframes projector-up {
            0%   {top: -65px;}    
            100% {top: -600px;}
        }
        @-webkit-keyframes projector-up {
            0%   {top: -65px;}    
            100% {top: -600px;}
        }
        @-o-keyframes projector-up {
            0%   {top: -65px;}    
            100% {top: -600px;}
        }
    }

    /*For desktop*/
    @media screen and (min-width: 1248px) and (max-width: 1450px) {
        #upgrade-popup-new {
            width: 700px;
            top: -115px;
            margin-left: -350px;
        }

        .roller-top {
            height: 245px;
        }

        .roller-bottom {
            height: 134px;
        }

        #message-img {
            background-size: 256px auto;
        
            background-position: -5px 46px;
}

        #message-img.img-private{
            background-size: 269px;
            background-position: -11px 50px;
        }
        #message-img.img-collaborate{
            background-size: 267px;
            background-position: -11px 53px;
        }

        #message-img.img-premium{
            background-size: 245px;  
            background-position: 1px 53px;
        }

        .message-title-box {
            height: 181.3px;
        }

        #message-title-text{
            font-size: 43px;
        }

        #message-title-text.upgrade-private {
            font-size: 41px;
            letter-spacing: -0.3px;
        }

        .message-text-box {
            height: 80.8px;
        }

        #message-text{
            font-size: 18px;
        }

        .message-button {
            width: 180px;
            height: 45px;
        }

        #message-button-text{
            font-size: 27px;
            top: 6px;
        }

        .message-button:hover  > #message-button-text{
            -moz-transform: scale(1.06);
            -webkit-transform: scale(1.06);
            transform: scale(1.06);
        }

        #upgrade-popup-new.explorer .projector {
            height: 370px;
        }

        .projector.close {
            height: 370px;
        }

        @keyframes projector-down {
            0%   {top: -400px;}    
            100% {top: -115px;}
        }
        @-moz-keyframes projector-down {
            0%   {top: -400px;}    
            100% {top: -115px;}
        }
        @-webkit-keyframes projector-down {
            0%   {top: -400px;}    
            100% {top: -115px;}
        }
        @-o-keyframes projector-down {
            0%   {top: -400px;}    
            100% {top: -115px;}
        }

        @keyframes open-board {
            0%   {height: 0;}
            20%   {height: 470px;}
            40%   {height: 300px;}
            65%   {height: 390px;}    
            100% {height: 370px;}
        }
        @-moz-keyframes open-board {
            0%   {height: 0;}
            20%   {height: 470px;}
            40%   {height: 300px;}
            65%   {height: 390px;}    
            100% {height: 370px;}
        }
        @-webkit-keyframes open-board {
            0%   {height: 0;}
            20%   {height: 470px;}
            40%   {height: 300px;}
            65%   {height: 390px;}    
            100% {height: 370px;}
        }
        @-o-keyframes open-board {
            0%   {height: 0;}
            20%   {height: 470px;}
            40%   {height: 300px;}
            65%   {height: 390px;}    
            100% {height: 370px;}
        }

        @keyframes close-board {
            0%   {height: 370px;}
            25%   {height: 400px;}
            100% {height: 0;}
        }
        @-moz-keyframes close-board {
            0%   {height: 370px;}
            25%   {height: 400px;}
            100% {height: 0;}
        }
        @-webkit-keyframes close-board {
            0%   {height: 370px;}
            25%   {height: 400px;}
            100% {height: 0;}
        }
        @-o-keyframes close-board {
            0%   {height: 370px;}
            25%   {height: 400px;}
            100% {height: 0;}
        }

        @keyframes projector-up {
            0%   {top: -115px;}    
            100% {top: -400px;}
        }
        @-moz-keyframes projector-up {
            0%   {top: -115px;}    
            100% {top: -400px;}
        }
        @-webkit-keyframes projector-up {
            0%   {top: -115px;}    
            100% {top: -400px;}
        }
        @-o-keyframes projector-up {
            0%   {top: -115px;}    
            100% {top: -400px;}
        }
    }

    /*For tablets*/
    @media screen and (min-width: 800px) and (max-width: 1248px) {
        #upgrade-popup-new {
            width: 700px;
            top: -40px;
            margin-left: -350px;
        }

        .roller-top {
            height: 245px;
        }

        .roller-bottom {
            height: 134px;
        }

        #message-img {
            background-size: 256px;
        }

        #message-img.img-download {
            background-size: 245px auto;
            background-position: 0 45px;
        }

        #message-img.img-premium {
            background-size: 245px auto;
            background-position: 3px 49px;
        }

        .message-title-box {
            line-height: 1.25;
        
            height: 181.3px;
}

        #message-title-text{
            font-size: 43px;
        }

        #message-title-text.upgrade-private {
            font-size: 41px;
        }

        .message-text-box {
            margin-top: -5px;
        
            height: 52px;
}

        #message-text{
            font-size: 18px;
        }

        .message-button {
            width: 180px;
            height: 45px;
        }

        #message-button-text{
            font-size: 27px;
            top: 5px;
        }

        #upgrade-popup-new.explorer .projector {
            height: 370px;
        }

        .projector.close {
            height: 370px;
        }

        @keyframes projector-down {
            0%   {top: -400px;}    
            100% {top: -40px;}
        }
        @-moz-keyframes projector-down {
            0%   {top: -400px;}    
            100% {top: -40px;}
        }
        @-webkit-keyframes projector-down {
            0%   {top: -400px;}    
            100% {top: -40px;}
        }
        @-o-keyframes projector-down {
            0%   {top: -400px;}    
            100% {top: -40px;}
        }

        @keyframes open-board {
            0%   {height: 0;}
            20%   {height: 470px;}
            40%   {height: 300px;}
            65%   {height: 390px;}    
            100% {height: 370px;}
        }
        @-moz-keyframes open-board {
            0%   {height: 0;}
            20%   {height: 470px;}
            40%   {height: 300px;}
            65%   {height: 390px;}    
            100% {height: 370px;}
        }
        @-webkit-keyframes open-board {
            0%   {height: 0;}
            20%   {height: 470px;}
            40%   {height: 300px;}
            65%   {height: 390px;}    
            100% {height: 370px;}
        }
        @-o-keyframes open-board {
            0%   {height: 0;}
            20%   {height: 470px;}
            40%   {height: 300px;}
            65%   {height: 390px;}    
            100% {height: 370px;}
        }

        @keyframes close-board {
            0%   {height: 370px;}
            25%   {height: 400px;}
            100% {height: 0;}
        }
        @-moz-keyframes close-board {
            0%   {height: 370px;}
            25%   {height: 400px;}
            100% {height: 0;}
        }
        @-webkit-keyframes close-board {
            0%   {height: 370px;}
            25%   {height: 400px;}
            100% {height: 0;}
        }
        @-o-keyframes close-board {
            0%   {height: 370px;}
            25%   {height: 400px;}
            100% {height: 0;}
        }

        @keyframes projector-up {
            0%   {top: -40px;}    
            100% {top: -400px;}
        }
        @-moz-keyframes projector-up {
            0%   {top: -40px;}    
            100% {top: -400px;}
        }
        @-webkit-keyframes projector-up {
            0%   {top: -40px;} 
            100% {top: -400px;}
        }
        @-o-keyframes projector-up {
            0%   {top: -40px;}    
            100% {top: -400px;}
        }
    }

    /*For mobile*/
    @media screen and (max-width: 800px) {
        #upgrade-popup-new {
            width: 300px;
            top: 0;
            margin-left: -150px;
        }

        .roller-top {
            height: 105px;
        }

        .roller-bottom {
            height: 58px;
        }

        #upgrade-close{
            width: 12px;
            height: 12px;
        }

        #message-img {
            left: 1%;
            width: 38%;
            background-size: 91px auto;
            background-position: center 39px;
        }
        
        .message-title-box {
            height: 78.4px;
        }

        #message-title-text{
            font-size: 15px;
        }

        #message-title-text.upgrade-private {
            font-size: 14px;
        }

        .message-text-box {           
            height: 22.4px;            
        }

        #message-text{
            font-size: 6.5px;
            margin-top: 3px;
        }

        .message-button {
            width: 90px;
            height: 25px;
        }

        #message-button-text{
            font-size: 12px;
            top: 5px;
        }

        #upgrade-popup-new.explorer .projector {
            height: 160px;
        }

        .projector.close {
            height: 160px;
        }
       
        @keyframes projector-down {
            0%   {top: -165px;}    
            100% {top: 0;}
        }
        @-moz-keyframes projector-down {
            0%   {top: -165px;}    
            100% {top: 0;}
        }
        @-webkit-keyframes projector-down {
            0%   {top: -165px;}    
            100% {top: 0;}
        }
        @-o-keyframes projector-down {
            0%   {top: -165px;}    
            100% {top: 0;}
        }

        @keyframes open-board {
            0%   {height: 0;}
            20%   {height: 260px;}
            40%   {height: 100px;}
            65%   {height: 200px;}    
            100% {height: 160px;}
        }
        @-moz-keyframes open-board {
            0%   {height: 0;}
            20%   {height: 260px;}
            40%   {height: 100px;}
            65%   {height: 200px;}    
            100% {height: 160px;}
        }
        @-webkit-keyframes open-board {
            0%   {height: 0;}
            20%   {height: 260px;}
            40%   {height: 100px;}
            65%   {height: 200px;}    
            100% {height: 160px;}
        }
        @-o-keyframes open-board {
            0%   {height: 0;}
            20%   {height: 260px;}
            40%   {height: 100px;}
            65%   {height: 200px;}    
            100% {height: 160px;}
        }

        @keyframes close-board {
            0%   {height: 160px;}
            25%   {height: 200px;}
            100% {height: 0;}
        }
        @-moz-keyframes close-board {
            0%   {height: 160px;}
            25%   {height: 200px;}
            100% {height: 0;}
        }
        @-webkit-keyframes close-board {
            0%   {height: 160px;}
            25%   {height: 200px;}
            100% {height: 0;}
        }
        @-o-keyframes close-board {
            0%   {height: 160px;}
            25%   {height: 200px;}
            100% {height: 0;}
        }

        @keyframes projector-up {
            0%   {top: 0;}    
            100% {top: -170px;}
        }
        @-moz-keyframes projector-up {
            0%   {top: 0;}    
            100% {top: -170px;}
        }
        @-webkit-keyframes projector-up {
            0%   {top: 0;}    
            100% {top: -170px;}
        }
        @-o-keyframes projector-up {
            0%   {top: 0;}    
            100% {top: -170px;}
        }
    }