/* * * * * * * * * * * * * * * * * * * * * * * * * * * *
*                                                      *
*   HEADER RULES                                       *
*                                                      *
* * * * * * * * * * * * * * * * * * * * * * * * * * * */
header{
    position: fixed;
    width: 100%;
    height: 91px;
    left: 0;
    top: 0;
    z-index: 130000;
    color: #000;
    box-shadow: 0 0 10px #131313;
    background: #fff;
}
@media only screen and (max-width: 1300px) {
    header .container{
        width: 100%;
        max-width: 1300px;
        margin: 0 auto;
    }
}
    header .icon_menu_hamburger{
        position: absolute;
        width: 65px;
        height: 91px;
        left: 0;
        top: 0;
        z-index: 130130;
        color: #000;
    }
    header .icon_menu_hamburger.open{
        color: #000;
    }
        header .icon_menu_hamburger i{
            float: left;
            width: 65px;
            height: 91px;
            line-height: 91px;
            text-align: center;
            cursor: pointer;
        }
    header .submenu_content{
        position: fixed;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        z-index: 130001;
        background: rgba(0,0,0,0.65);
        opacity: 0;
        visibility: hidden;
    }
    header .submenu_content.open{
        opacity: 1;
        visibility: visible;
    }
        header .submenu_content .submenu_list{
            position: fixed;
            width: 390px;
            height: 100%;
            left: 0;
            top: 0;
            z-index: 130002;
            background: #fff;
            box-shadow: 0 0 13px #000;
            margin-left: -390px;
        }
        header .submenu_content.open .submenu_list{
            margin-left: 0;
        }
            header .submenu_content .submenu_list .head{
                float: left;
                width: 390px;
                height: 90px;
                line-height: 91px;
                border-bottom: 1px solid #f1f1f1;
            }
            header .submenu_content .submenu_list .voices{
                float: left;
                width: 100%;
                color: #000;
                margin: 0;
                overflow: hidden;
                overflow-y: auto;
            }
                header .submenu_content .submenu_list .voices .item{
                    float: left;
                    width: -webkit-calc(100% - 52px);
                    width: -moz-calc(100% - 52px);
                    width: -ms-calc(100% - 52px);
                    width: -o-calc(100% - 52px);
                    width: calc(100% - 52px);
                    padding: 0 26px;
                    height: 39px;
                    line-height: 39px;
                    font-size: 13px;
                    white-space: nowrap; 
                    overflow: hidden;
                    text-overflow: ellipsis;
                }
                header .submenu_content .submenu_list .voices .item:hover{
                    background: #f1f1f1;
                }
                header .submenu_content .submenu_list .voices .item.main_menu{
                    display: none;
                }
                @media only screen and (max-width: 1130px) {
                    header .submenu_content .submenu_list .voices .item.main_menu{
                        display: block;
                    }
                }
    header .logo{
        float: left;
        height: 39px;
        margin: 26px 0;
        margin-left: 65px;
    }
        header .logo img{
            float: left;
            height: 39px;
        }
    header .menu_content{
        float: left;
        margin-left: 26px;
        height: 91px;
    }
    @media only screen and (max-width: 1130px) {
        header .menu_content{
            display: none;
        }
    }
        header .menu_content .voice{
            float: left;
            height: 91px;
            line-height: 91px;
            margin-right: 26px;
            font-size: 13px;
            text-transform: uppercase;
            font-family: 'LatoWebBlack';
        }
    header .icon_content{
        float: right;
        height: 91px;
        margin-right: 26px;
        font-size: 13px;
    }
        header .icon_content i{
            float: left;
            width: 39px;
            height: 65px;
            margin: 13px 0;
            line-height: 65px;
            text-align: center;
            border-radius: 39px;
            cursor: pointer;
        }
        header .icon_content i:hover{
            opacity: 0.5;
        }
            header .icon_content i .unread{
                position: relative;
                width: 20px;
                height: 20px;
                color: #fff;
                background: #cc3300;
                line-height: 20px;
                border-radius: 100%;
                margin-top: -19.5px;
                margin-left: 19.5px;
                left: 0;
                top: 0;
                font-family: 'LatoWeb';
                font-size: 9px;
            }
            header .icon_content i .unread.hide{
                visibility: hidden;
            }
        header .icon_content span{
            float: left;
            height: 91px;
            line-height: 91px;
            margin-left: 13px;
        }
    header #notification_container{
        position: fixed;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        z-index: 1300000;
        visibility: hidden;
    }
    header #notification_container.open{
        visibility: visible;
    }
        header #notification_container .bg{
            position: fixed;
            width: 100%;
            height: 100%;
            left: 0;
            top: 0;
            z-index: 1300001;
            background: #000;
            opacity: 0.13;
        }
        header #notification_container .main_content{
            position: fixed;
            width: 260px;
            z-index: 1300002;
            background: #fff;
            top: 65px;
            right: 0;
            margin-top: 3px;
            border-radius: 3px;
            color: #000;
            font-size: 13px;
        }
            header #notification_container .main_content .content_arrow{
                float: left;
                margin: 0 50%;
            }
                header #notification_container .main_content .content_arrow .arrow{
                    float: left;
                    width: 13px;
                    height: 13px;
                    background: #fff;
                    margin-left: -6.5px;
                    margin-top: -6.5px;
                    -webkit-transform: rotate(-45deg);
                    -moz-transform: rotate(-45deg);
                    -ms-transform: rotate(-45deg);
                    -o-transform: rotate(-45deg);
                    transform: rotate(-45deg);
                }
            header #notification_container .main_content .title{
                float: left;
                height: -webkit-calc( 100% - 26px );
                height: -moz-calc( 100% - 26px );
                height: -ms-calc( 100% - 26px );
                height: -o-calc( 100% - 26px );
                height: calc( 100% - 26px );
                height: 26px;
                padding: 0 13px;
                line-height: 26px;
                font-family: 'LatoWebBlack';
            }
            header #notification_container .main_content .list{
                float: left;
                width: 100%;
                margin: 0;
                padding: 0;
                list-style: none;
            }
                header #notification_container .main_content .list li{
                    float: left;
                    width: -webkit-calc( 100% - 26px );
                    width: -moz-calc( 100% - 26px );
                    width: -ms-calc( 100% - 26px );
                    width: -o-calc( 100% - 26px );
                    width: calc( 100% - 26px );
                    padding: 13px;
                    border-top: 1px solid #ccc;
                }
                header #notification_container .main_content .list li:hover{
                    cursor: pointer;
                    background: #f1f1f1;
                }
                    header #notification_container .main_content .list li .text{
                        float: left;
                        width: 100%;
                    }
                    header #notification_container .main_content .list li.with_avatar .text{
                        float: left;
                        width: -webkit-calc( 100% - 52px );
                        width: -moz-calc( 100% - 52px );
                        width: -ms-calc( 100% - 52px );
                        width: -o-calc( 100% - 52px );
                        width: calc( 100% - 52px );
                    }
                    header #notification_container .main_content .list li.with_avatar .avatar{
                        float: left;
                        width: 39px;
                        height: 39px;
                        margin-right: 13px;
                        border-radius: 100%;
                        background: #ccc center no-repeat;
                        background-size: cover;
                    }
            header #notification_container .main_content .bottom_link{
                float: left;
                width: 100%;
                height: 26px;
                line-height: 26px;
                text-align: center;
                border-top: 1px solid #ccc;
                background: #f1f1f1;
                border-bottom-left-radius: 3px;
                border-bottom-right-radius: 3px;
                cursor: pointer;
            }
            header #notification_container .main_content .bottom_link:hover{
                background: #fff;
            }
    header #cart_container{
        position: fixed;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        z-index: 1300000;
        visibility: hidden;
    }
    header #cart_container.open{
        visibility: visible;
    }
        header #cart_container .bg{
            position: fixed;
            width: 100%;
            height: 100%;
            left: 0;
            top: 0;
            z-index: 1300001;
            background: #000;
            opacity: 0.13;
        }
        header #cart_container .main_content{
            position: fixed;
            width: 260px;
            z-index: 1300002;
            background: #fff;
            top: 65px;
            right: 0;
            margin-top: 3px;
            border-radius: 3px;
            color: #000;
            font-size: 13px;
        }
            header #cart_container .main_content .content_arrow{
                float: left;
                margin: 0 50%;
            }
                header #cart_container .main_content .content_arrow .arrow{
                    float: left;
                    width: 13px;
                    height: 13px;
                    background: #fff;
                    margin-left: -6.5px;
                    margin-top: -6.5px;
                    -webkit-transform: rotate(-45deg);
                    -moz-transform: rotate(-45deg);
                    -ms-transform: rotate(-45deg);
                    -o-transform: rotate(-45deg);
                    transform: rotate(-45deg);
                }
            header #cart_container .main_content .title{
                float: left;
                height: -webkit-calc( 100% - 26px );
                height: -moz-calc( 100% - 26px );
                height: -ms-calc( 100% - 26px );
                height: -o-calc( 100% - 26px );
                height: calc( 100% - 26px );
                height: 26px;
                padding: 0 13px;
                line-height: 26px;
                font-family: 'LatoWebBlack';
            }
            header #cart_container .main_content .list{
                float: left;
                width: 100%;
                margin: 0;
                padding: 0;
                list-style: none;
            }
                header #cart_container .main_content .list li{
                    float: left;
                    width: -webkit-calc( 100% - 26px );
                    width: -moz-calc( 100% - 26px );
                    width: -ms-calc( 100% - 26px );
                    width: -o-calc( 100% - 26px );
                    width: calc( 100% - 26px );
                    padding: 13px;
                    border-top: 1px solid #ccc;
                }
                    header #cart_container .main_content .list li .text{
                        float: left;
                        width: 100%;
                    }
                    header #cart_container .main_content .list li.with_avatar .text{
                        float: left;
                        width: -webkit-calc( 100% - 52px - 65px );
                        width: -moz-calc( 100% - 52px - 65px );
                        width: -ms-calc( 100% - 52px - 65px );
                        width: -o-calc( 100% - 52px - 65px );
                        width: calc( 100% - 52px - 65px );
                    }
                    header #cart_container .main_content .list li.with_avatar .actions{
                        float: left;
                        width: 65px;
                        height: 26px;
                    }
                        header #cart_container .main_content .list li.with_avatar .actions i{
                            float: right;
                            width: 26px;
                            height: 26px;
                            line-height: 26px;
                            margin: 0;
                        }
                        header #cart_container .main_content .list li.with_avatar .actions i.delete{
                            color: #cc3300;
                        }
                    header #cart_container .main_content .list li.with_avatar .avatar{
                        float: left;
                        width: 39px;
                        height: 39px;
                        margin-right: 13px;
                        border-radius: 3px;
                        background: #ccc center no-repeat;
                        background-size: cover;
                    }
                    header #cart_container .main_content .list li .empty_cart{
                        float: left;
                        width: 100%;
                        text-align: center;
                    }
            header #cart_container .main_content .bottom_link{
                float: left;
                width: 100%;
                height: 26px;
                line-height: 26px;
                text-align: center;
                border-top: 1px solid #ccc;
                background: #f1f1f1;
                border-bottom-left-radius: 3px;
                border-bottom-right-radius: 3px;
                cursor: pointer;
            }
            header #cart_container .main_content .bottom_link:hover{
                background: #fff;
            }
#language_selector{
    position: fixed;
    width: 100%;
    height: 100%;
    background: #f1f1f1;
    visibility: hidden;
    left: 0%;
    top: 0;
    z-index: 130001;
}
#language_selector.open{
    visibility: visible;
}
    #language_selector .main_content{
        position: fixed;
        width: 650px;
        height: 390px;
        margin-left: -325px;
        margin-top: -190px;
        left: 50%;
        top: 50%;
        background: #fff;
        z-index: 130002;
        box-shadow: 0 0 10px #ccc;
        border-radius: 6px;
    }
    #language_selector .title{
        float: left;
        width: 100%;
        text-align: center;
        font-family: 'LatoWebBlack';
        height: 91px;
        line-height: 91px;
        font-size: 26px;
    }
    #language_selector .main_content .close{
        float: right;
        width: 91px;
        height: 91px;
        background: #fff;
        margin-top: -91px;
        margin-bottom: -91px;
    }
    #language_selector .main_content .close:hover{
        cursor: pointer;
        opacity: 0.5;
    }
        #language_selector .main_content .close i{
            float: left;
            width: 100%;
            height: 91px;
            line-height: 91px;
            text-align: center;
            font-size: 17px;
        }
    #language_selector ul{
        float: left;
        width: 100%;
        margin: 0;
        padding: 0;
        list-style: none;
        border-top: 1px solid #ccc;
    }
        #language_selector ul li{
            float: left;
            width: 90%;
            padding: 0 5%;
            margin: 0;
            height: 52px;
            line-height: 52px;
            border-bottom: 1px solid #ddd;
            font-size: 13px;
            cursor: pointer;
            background: #f9f9f9;
        }
            #language_selector ul li .switch{
                float: right;
                width: 52px;
                height: 26px;
                margin: 13px;
                border-radius: 13px;
                background: #272242;
                box-shadow: inset 1px 1px 3px #000;
            }
                #language_selector ul li .switch .obj{
                    float: left;
                    width: 18px;
                    height: 18px;
                    margin: 4px;
                    background: #0a0333;
                    border-radius: 100%;
                }
                #language_selector ul li.selected .switch .obj{
                    margin-left: 30px;
                    background: #fff;
                }
#currency_selector{
    position: fixed;
    width: 100%;
    height: 100%;
    background: #f1f1f1;
    visibility: hidden;
    left: 0%;
    top: 0;
    z-index: 130001;
}
#currency_selector.open{
    visibility: visible;
}
    #currency_selector .main_content{
        position: fixed;
        width: 650px;
        height: 390px;
        margin-left: -325px;
        margin-top: -190px;
        left: 50%;
        top: 50%;
        background: #fff;
        z-index: 130002;
        box-shadow: 0 0 10px #ccc;
        border-radius: 6px;
    }
    #currency_selector .title{
        float: left;
        width: 100%;
        text-align: center;
        font-family: 'LatoWebBlack';
        height: 91px;
        line-height: 91px;
        font-size: 26px;
    }
    #currency_selector .main_content .close{
        float: right;
        width: 91px;
        height: 91px;
        background: #fff;
        margin-top: -91px;
        margin-bottom: -91px;
    }
    #currency_selector .main_content .close:hover{
        cursor: pointer;
        opacity: 0.5;
    }
        #currency_selector .main_content .close i{
            float: left;
            width: 100%;
            height: 91px;
            line-height: 91px;
            text-align: center;
            font-size: 17px;
        }
    #currency_selector ul{
        float: left;
        width: 100%;
        margin: 0;
        padding: 0;
        list-style: none;
        border-top: 1px solid #ccc;
    }
        #currency_selector ul li{
            float: left;
            width: 90%;
            padding: 0 5%;
            margin: 0;
            height: 52px;
            line-height: 52px;
            border-bottom: 1px solid #ddd;
            font-size: 13px;
            cursor: pointer;
            background: #f9f9f9;
        }
            #currency_selector ul li .switch{
                float: right;
                width: 52px;
                height: 26px;
                margin: 13px;
                border-radius: 13px;
                background: #272242;
                box-shadow: inset 1px 1px 3px #000;
            }
                #currency_selector ul li .switch .obj{
                    float: left;
                    width: 18px;
                    height: 18px;
                    margin: 4px;
                    background: #0a0333;
                    border-radius: 100%;
                }
                #currency_selector ul li.selected .switch .obj{
                    margin-left: 30px;
                    background: #fff;
                }