.notification-bar-main {
    background-color: #EE2C74;
    color: #FFFFFF;
    height: 30px;
    position: fixed;
    left: 0;
    right: 0;
    /*font-family: Gotham-BookItalic;*/
    font-family: "Kotex-Light";
    font-style: italic;
    font-weight: 400;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
    z-index: 1031;
    padding-top: 5px;
}

    .notification-bar-main a {
        color: #FFFFFF;
        text-decoration: none;
    }

    .notification-bar-main > div:first-of-type {
        display: inline;
    }

.notification-bar-close {
    display: inline;
    float: right;
    margin-top: -5px;
}

.notification-bar-main button {
    height: 32px;
}

.notification-bar-main > div:last-of-type > span {
    cursor: pointer;
    z-index: 1032;
}

.notification-bar-main > div:first-of-type {
    z-index: 1032;
}

@media (max-width:599px) {
    .notification-bar-main {
        /*height: auto;*/
        padding-top: 2px;
        overflow-y: hidden;
    }

        .notification-bar-main a {
            font-size: 12px;
        }

    .notification-bar-close {
        position: absolute;
        right: 0;
        top: 50%;
        margin-top: -11px;
    }

    .notification-bar-main > div:last-of-type > span {
        font-size: 20px;
        width: 75px;
        padding-right: 5px;
        height: 25px;
        text-align: center;
    }

    .notification-bar-main div:first-of-type {
        float: left;
        text-align: initial;
        text-indent: 0px;
        line-height: 18px;
        width: 100%;
        padding-right: 76px;
        top: 50%;
        position: relative;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
        padding-left: 10px;
    }
}

@media (min-width:600px) and (max-width:1024px) {


    .notification-bar-main > div:last-of-type {
        position: absolute;
        padding-left: 0px;
    }

        .notification-bar-main > div:last-of-type > span {
            margin-top: 7px;
            font-size: 15px;
            width: 75px;
            height: 20px;
            text-align: center;
        }

    .notification-bar-main > div:first-of-type {
        width: 100%;
        position: absolute;
        text-align: center;
        padding-left: 69px;
        padding-right: 69px;
        font-size: 12px;
    }

    .notification-bar-main > div:last-of-type {
        padding-right: 0px;
        right: 0;
    }
}

@media (min-width:769px) and (max-width:1024px) {
}

@media (min-width:1025px) {

    .notification-bar-main {
        text-align: center;
    }

        .notification-bar-main > div:last-of-type {
            position: absolute;
        }

            .notification-bar-main > div:last-of-type > span {
                margin-top: 7px;
                font-size: 15px;
                width: 75px;
                height: 20px;
            }

        .notification-bar-main > div:first-of-type {
            width: 1024px;
            position: absolute;
            left: 50%;
            margin-left: -512px;
            text-align: center;
            padding-left: 76px;
            padding-right: 76px;
        }

        .notification-bar-main > div:last-of-type {
            right: 0;
            left: 0;
            padding-left: 948px;
        }
}

/*Notification banner for Dark Site*/

.notification-banner-text {
    padding: 13px;
    font-family: "Kotex-Light";
    font-style: italic;
    font-weight: 400;
    font-size: 20px;
    font-weight: bold;
}

.notification-banner-main {
    /*background: #fdff00;*/ /*fed800*/
    color: #fff;
    height: 60px;
    text-align: center;
    max-width:1280px;
    margin:0 auto;
}

.notification-banner-text a {
    color: #000;
    display: inline-block;
}

/*ReacallFAQ Bannner*/

a#left-area-button {
    font-size: 14px;
    border: 2px solid #000;
    border-radius: 10px;
    padding: 4px 10px;
    float: right;
    font-style: normal;
}

a#clickableArea {
    /* font-size: 24px; */
    padding: 0px 10px;
}

a#right-area-button {
    float: left;
    font-size: 14px;
    border: 2px solid #000;
    border-radius: 10px;
    padding: 4px 10px;
    /* float: left; */
    font-style: normal;
}

a#x_left-area-button {
    font-size: 14px;
    border: 2px solid #000;
    border-radius: 10px;
    padding: 4px 10px;
    float: right;
    font-style: normal;
}

a#x_clickableArea {
    /* font-size: 24px; */
    padding: 0px 10px;
}

a#x_right-area-button {
    float: left;
    font-size: 14px;
    border: 2px solid #000;
    border-radius: 10px;
    padding: 4px 10px;
    /* float: left; */
    font-style: normal;
}

a#right-area-button:hover, a#right-area-button:focus, a#right-area-button:active:hover, a#left-area-button:hover, a#left-area-button:focus, a#left-area-button:active:hover {
    background-color: #EE2C74;
    border: 2px solid #EE2C74;
    color: #FFFFFF;
    text-decoration: none;
}

a#x_right-area-button:hover, a#x_right-area-button:focus, a#x_right-area-button:active:hover, a#x_left-area-button:hover, a#x_left-area-button:focus, a#x_left-area-button:active:hover {
    background-color: #EE2C74;
    border: 2px solid #EE2C74;
    color: #FFFFFF;
    text-decoration: none;
}

a#clickableArea:hover {
    text-decoration: none;
}

a#x_clickableArea:hover {
    text-decoration: none;
}

html:lang(fr-ca) a#right-area-button {    
    font-size: 12px;   
}

html:lang(fr-ca) a#x_right-area-button {
    font-size: 12px; 
}

html:lang(fr-ca) a#left-area-button {
     font-size: 12px; 
}

html:lang(fr-ca) a#x_left-area-button {
     font-size: 12px; 
}

html:lang(fr-ca) a#clickableArea {
    font-size: 16px; 
}

html:lang(fr-ca) a#x_clickableArea {
    font-size: 14px; 
}

@media (max-width:768px){
                .notification-banner-main{
                                height:auto !important;
                                padding-top:15px;
                }
                a#x_left-area-button{
                                float:none !important;
                }
                a#x_right-area-button{
                                float:none !important;
                }
}
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape){
                a#x_right-area-button{
                                font-size:13px !important;
                }
                a#x_clickableArea{
                                font-size: 18px !important;
                }
                a#x_left-area-button{
                                font-size:13px !important;
                }

                html:lang(fr-ca) a#x_left-area-button{font-size:10px !important;padding:10px 10px !important;}

html:lang(fr-ca) a#x_right-area-button{font-size:10px !important;padding:10px 10px !important;}

html:lang(fr-ca) a#x_clickableArea{font-size:11px !important;}

}