/* THIS FILE DEALS WITH THE CLASSES IN THE UPGRADE BAR AND ALL THE ELEMENTS WITHIN IT xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */

.upgrade_bar{
        width   : 100%;
        height  : 60px;
        color   : #ffffff;
        background-color    : #F05A22;
}

.upgrade_bar .expire,
.upgrade_bar .upgrade_option,
.upgrade_bar img.icon_alert,
.upgrade_bar img.right_arrow_orange{
       float   : left;
}

.upgrade_bar img.close_icon{
       float   : right;
}

.upgrade_bar img.icon_alert{
       padding : 10px 0px 0px 30px;
}

.upgrade_bar .expire{
       font-family         : 'Jost', sans-serif;
       font-size           : 28px;
       font-weight         : 600;        
       padding             : 10px 0px 0px 20px;
}

.upgrade_bar .upgrade_option{
       font-family          : 'Jost', sans-serif;
       font-size            : 22px;
       font-weight          : 400;                
       text-decoration      : underline;
       padding              : 15px 0px 0px 20px;
       cursor               : pointer;
}

.upgrade_bar img.right_arrow_orange{
       padding : 20px 0px 0px 10px;
}

.upgrade_bar img.close_icon{
       padding : 8px 20px 0px 0px;
}

.upgrade_bar_mobile{
        display     : none;
}

@media (max-width: 1650px){

        .upgrade_bar img.icon_alert{
                padding             : 16px 0px 0px 30px;
                width               : 25px;
        }    

        .upgrade_bar .expire{
                font-family         : 'Jost', sans-serif;
                font-size           : 22px;
                font-weight         : 600;        
                padding             : 13px 0px 0px 15px;
        }

        .upgrade_bar .upgrade_option{
                font-family         : 'Jost', sans-serif;
                font-size           : 18px;
                font-weight         : 500;                
                text-decoration     : underline;
                padding             : 18px 0px 0px 20px;
        }   

        .upgrade_bar img.right_arrow_orange{
                padding             : 22px 0px 0px 10px;
                width               : 20px;
        }

        .upgrade_bar img.close_icon{
                padding             : 12px 20px 0px 0px;
                width               : 36px;
        }        
}

@media (max-width: 1350px){

        .upgrade_bar{
                height              : 50px;
        }    

        .upgrade_bar img.icon_alert{
                padding             : 14px 0px 0px 30px;
                width               : 20px;
        }    

        .upgrade_bar .expire{
                font-family         : 'Jost', sans-serif;
                font-size           : 18px;
                font-weight         : 600;        
                padding             : 13px 0px 0px 10px;
        }

        .upgrade_bar .upgrade_option{
                font-family         : 'Jost', sans-serif;
                font-size           : 16px;
                font-weight         : 500;                
                text-decoration     : underline;
                padding             : 15px 0px 0px 15px;
        }   

        .upgrade_bar img.right_arrow_orange{
                padding             : 18px 0px 0px 10px;
                width               : 18px;
        }

        .upgrade_bar img.close_icon{
                padding             : 12px 20px 0px 0px;
                width               : 28px;
        }        
}

@media (max-width: 1150px){

        .upgrade_bar{
                display     : none;
        }  
        
        .upgrade_bar_mobile{
                display     : block;
                position    : fixed;
                min-width   : 385px;
                width       : 90%;
                max-width   : 100%;
                height      : 67px;
                bottom      : 0px;
                left        : 50%;
                transform   : translateX(-50%);
                z-index     : 100000;
                
                margin      : 0px 0px 20px 0px;
                padding     : 0px 25px;
                
                background-color    : #F05A22;
                
                font-family         : 'Jost', sans-serif;
                font-size           : 16px;
                font-weight         : 600;                        
                color               : #ffffff;
                
                border-radius       : 8px;  
                border              : none;                
                
                -moz-box-shadow: 0 5px 15px #787676;
                -webkit-box-shadow: 0 5px 15px #787676;
                -o-box-shadow: 0 5px 15px #787676;
                -ms-box-shadow: 0 5px 15px #787676;
                box-shadow: 0 5px 15px #787676;                                  
        }
        
        .upgrade_bar_mobile .expire_mobile{
                float               : left;
                margin-top          : 20px;
        }
        
        .upgrade_bar_mobile input[type=button].upgrade_mobile{
                float               : right;
                height              : 30px;
                width               : 90px;
                border-radius       : 15px;  
                border              : none;
                background-color    : #ffffff;
                color               : #FC9E5B;
                font-family         : 'Jost', sans-serif;
                font-weight         : 600;
                font-size           : 16px;
                text-align          : center;
                margin-top          : 18px;
                
                -moz-box-shadow: 0 3px 5px #c16d30;
                -webkit-box-shadow: 0 3px 5px #c16d30;
                -o-box-shadow: 0 3px 5px #c16d30;
                -ms-box-shadow: 0 3px 5px #c16d30;
                box-shadow: 0 3px 25px #c16d30;                  
        }          
}

@media (max-width: 500px){
 
        .upgrade_bar_mobile{
                font-size           : 14px;
                margin              : 0px;
                width               : 100%;
                border-radius       : 0px;  
                box-shadow          : none;  
        }    
        
        .upgrade_bar_mobile .expire_mobile{
                margin-top          : 24px;
        }        
        
        .upgrade_bar_mobile input[type=button].upgrade_mobile{
                font-size           : 14px;
                margin-top          : 20px;
                height              : 28px;
                width               : 80px;
                border-radius       : 14px;                  
        }                  
}