.white-header {filter: none; background-color: #f3f3f3;}

@media screen and (min-width: 1038px) {
    #sideNavigation {
        display: none !important;
    }
    #container {
        left: 0 !important;
    }

    .header, .topFullHolder {
        left: 0 !important;
    }
    #primaryNavigationShort, #navigationShort {
        display: none !important;
    }
}
@media screen and (max-width: 1037px) {
    #content {
        padding-right: 0;
        width: 448px;
    }
    form.searchForm, #secondaryNavigation, #primaryNavigation, .white-header, .languageHolder, .sideBar {
        display: none;
    }
    .header, #container, .footerCopy .footer-holder, .footer-holder {
        width: 768px;
        padding-right: 0;
    }
    .black-header {
        height: 140px;
    }
    a.short-menu {
        width: 30px;
        height: 23px;
        cursor: pointer;
        display: block;
        position: absolute;
        top:60px;
        right: 30px;
        background: url("/img/short-menu.png") left top no-repeat;
    }
    a.short-menu:hover {opacity: 0.8; transition: all 0.2s ease-in-out 0s;}
    h1.logo-ci a, div.logo-ci a, h1.logo-sr a, div.logo-sr a, h1.logo-en a, div.logo-en a {
        width: 375px;
        height: 99px;
    }
    h1.logo-ci a, div.logo-ci a {
        background:transparent url('/img/logoTablet-ci.png') no-repeat top left;
    }
    h1.logo-sr a, div.logo-sr a {
        background:transparent url('/img/logoTablet-sr.png') no-repeat top left;
    }
    h1.logo-en a, div.logo-en a {
        background:transparent url('/img/logoTablet-en.png') no-repeat top left;
    }
    .searchRegisterHolder {
        display: table-cell;
        width: 176px;
        height: 140px;
        text-align: center;
        vertical-align: middle;
    }
    a.search_register {
        width: 176px;
        /*        position: absolute;
                right: 110px;
                margin: 35px 0 0 0;*/
        vertical-align: middle;
        text-align: left;
        margin: 0;
    }
    #navigationShort {
        position: fixed;
        right: -220px;
        width: 220px;
        background-color: #234A71;
        height: 100%;
        z-index: 9999;
    }
    #navigationShort .menu {
        padding: 0;
    }
    #navigationShort .menu ul {
        margin: 0;
    }
    #navigationShort .menu ul li {
        float: none;
        margin: 0;
    }
    #navigationShort .menu ul li a {
        color: #fff;
        font-size: 16px;
        display: block;
        line-height: 100%;
        text-transform: uppercase;
        padding: 28px 15px;
        border-left: 3px solid #234A71;
        border-bottom: 1px solid #1D3D5C;
    }
    #navigationShort .menu ul li a.onPath, #navigationShort .menu ul li a:hover {
        background-color: #1D3D5C;
        transition: all 0.2s ease-in-out 0s;
        text-decoration: none;
        border-left: 3px solid #B71116;
    }
    #navigationShort {
        top: 0;
    }
    #navigationShort .menu li > ul {
        display: none;
    }
    #navigationShort .menu li.onPath > ul {
        display: block;
    }
    #navigationShort .menu ul li.depth2.last {
        border-bottom: none;
    }
    #navigationShort .menu ul li ul li a {
        font-size: 13px;
        padding: 20px 15px 20px 25px;
    }
    #navigationShort form.searchForm {
        width: 220px;
        display: block;
    }
    #navigationShort form.searchForm, fieldset.searchFieldset {
        width: 220px;
    }
    table {
        overflow-x: scroll;
        display: block;
    }

    fieldset.searchFieldset input.searchInput {
        width: 180px;
    }
    #sideNavigation {
        display: none !important;
    }
    #navigationShort .langHolder {
        margin-top: 30px;
        margin-left: 20px;
    }
    #navigationShort .langHolder ul  { margin: 0;}
    #navigationShort .langHolder ul li {
        list-style-type: none;
        float: left;
        margin: 0 10px 0 0;
        padding: 0 10px 0 0;
        border-right: 1px solid #fff;
    }
    #navigationShort .langHolder ul li.last {
        margin-right: 0;
        padding-right: 0;
        border-right: none;
    }
    #navigationShort .langHolder ul li a {
        color: #fff;
    }
    #navigationShort .menu.secmenu {
        margin-top: 15px;
    }
    #navigationShort .menu.secmenu ul li a {
        border: none;
        font-size: 14px;
        padding: 0px 20px 20px 20px;
        text-transform: none;;
    }
    #navigationShort .menu.secmenu ul li a:hover {
        background-color: transparent;
        opacity: 0.8;
        transition: all 0.2s ease-in-out 0s;
    }

    #navigationShort .signInFormHolder {
        display: block;
        margin-top: 48px;
    }
    #navigationShort .userMenu {
        background: #000;
    }
    #navigationShort .signInFormHolder .userMenu h2 {
        background: transparent url('/img/login.jpg') no-repeat right center;
        line-height: 50px;
        margin: 0;
        padding: 0 30px 0 20px;
        font-family: Arial;
        font-size: 10px;
        text-transform: uppercase;
        color: #e4e4e4;
        font-weight: normal;
        margin-right: 10px;
    }
    #navigationShort .signInFormHolder form.signIn {
        background: #414141;
        padding: 10px;
        width: 180px;
        margin: 0;
    }
    #navigationShort .signInFormHolder form.signIn label {
        font-family: Arial;
        font-size: 10px;
        text-transform: uppercase;
        color: #e4e4e4;
        margin: 0;
    }
    #navigationShort .signInFormHolder form.signIn input {
        background: #2E2E2E;
        border-radius: 15px;
        height: 30px;
        line-height: 30px;
        padding: 0 10px;
        width: 160px;
        font-family: Arial;
        font-size: 10px;
        text-transform: uppercase;
        color: #bbb;
        margin-bottom: 10px;
    }
    #navigationShort .signInFormHolder form.signIn a {
        color: #e4e4e4;
        text-transform: uppercase;
        font-size: 10px;
        margin-bottom: 5px;
        display: block;
        line-height: 100%;
    }

    #navigationShort .signInFormHolder form.signIn button{   background: url("/img/buttons/buttonMore.png") repeat-x left bottom;
                                                             border: 1px solid #0F989B ;
                                                             border-radius: 2px;
                                                             color: #FFFFFF;
                                                             display: block;
                                                             float: none; cursor: pointer;
                                                             font-size: 12px;
                                                             line-height: 100%;
                                                             margin: 15px auto 10px;
                                                             padding: 12px 14px;
                                                             text-align: center;
                                                             text-transform: uppercase;
                                                             width: 130px;}
    #navigationShort .signInFormHolder form.signIn button:hover {
        background-position: left top;
        border: 1px solid #154099;
        text-decoration: none;
    }
    #navigationShort .signInFormHolder .avatarHolder {
        width: 150px;
        display: block;
        margin: 10px auto 0;
    }
    #navigationShort .signInFormHolder .avatarHolder .centerAV {
        float: left;
        margin: 0 20px 0 0;
    }
    #navigationShort .signInFormHolder .avatarHolder .centerAV a img {
        border-radius: 40px;
        max-width: 40px;
        max-height: 40px;
    }
    #navigationShort .signInFormHolder .avatarHolder h4.userName {
        font-size: 10px;
        text-transform: uppercase;
        color: #FF9900;
        font-family: Arial;
        line-height: 140%;
        margin: 0;
        display: table-cell;
        vertical-align: middle;
        height: 40px;
    }
    #navigationShort .signInFormHolder a.button {
        clear: both;
        background: url("/img/buttons/buttonMore.png") repeat-x left bottom;
        border: 1px solid #0F989B ;
        border-radius: 2px;
        color: #FFFFFF;
        display: block;
        float: none; cursor: pointer;
        font-size: 12px;
        line-height: 100%;
        margin: 15px auto 10px;
        padding: 13px 14px;
        text-align: center;
        text-transform: uppercase;
        width: 130px;
    }
    #navigationShort .signInFormHolder a.button:hover {
        cursor: pointer;
        background-position: left top;
        border: 1px solid #154099;
        text-decoration: none;
    }

}

@media screen and (max-width: 805px) {
    .header, .footerCopy .footer-holder, .footer-holder {
        width: 300px;
        padding: 0 10px;
    }
    #container{
        width: 320px;
        padding: 0;
    }
    #content {
        padding-bottom: 20px;
        width: 320px;
    }
    #stripe2 {
        width: 300px;
        padding: 40px 10px 20px;
        background-color: #F8F8F8;
        margin-top: 0;
    }
    .copyDiv {
        display: none;
    }
    #footer {
        padding-bottom: 0;
    }
    #footer .copyDiv {
        display: block;
        color: #fff;
        font-size: 12px;
        text-align: center;
        padding: 30px 0;
    }
    #footer .copyDiv p {
        padding-bottom: 0;
    }
    .headerholder, .black-header {
        height: 110px;
    }
    h1.logo-ci, div.logo-ci, h1.logo-sr, div.logo-sr, h1.logo-en, div.logo-en {
        width: 247px;
        height: 100px;
        padding-top: 5px;
    }
    h1.logo-ci a, div.logo-ci a, h1.logo-sr a, div.logo-sr a, h1.logo-en a, div.logo-en a {
        width: 247px;
        height: 100px;
    }
    h1.logo-ci a, div.logo-ci a {
        background:transparent url('/img/logoMobile-ci.png') no-repeat top left;
    }
    h1.logo-sr a, div.logo-sr a {
        background:transparent url('/img/logoMobile-sr.png') no-repeat top left;
    }
    h1.logo-en a, div.logo-en a {
        background:transparent url('/img/logoMobile-en.png') no-repeat top left;
    }
    a.short-menu {
        right: 10px;
        top: 40px;
    }

    .searchRegisterHolder {
        display: block;
        height: auto;
        width: 100%;
    }
    a.search_register {
        bottom: -45px;
        box-sizing: border-box;
        display: block;
        left: 0;
        margin: 0 auto;
        position: absolute;
        right: 110px;
        width: 100%;
        z-index: 999;
    }
    #main {
        margin-top: 40px;
        background: transparent;
    }
    .footerNav {
        display: none;
    }
    .footerLogo {
        width: 247px;
        height: 100px;
        float: none;
        margin: 0 auto;
    }
    .footerLogo a {
        width: 247px;
        height: 100px;
    }
    .footerLogo a.logo-ci {
        background: url("/img/logoMobile-ci.png") left top no-repeat;
    }
    .footerLogo a.logo-sr {
        background: url("/img/logoMobile-sr.png") left top no-repeat;
    }
    .footerLogo a.logo-en {
        background: url("/img/logoMobile-en.png") left top no-repeat;
    }
    table thead tr td, table thead tr td th, table tbody tr th {
        font-size: 12px;
    }
    table tbody tr td{
        font-size: 13px;
        line-height: 120%;
    }
}

@media screen and (max-width: 357px) {
    .header, .footer-holder, .horizontalSubNavigation,.footerCopy .footer-holder{max-width: 300px; width: 100%; padding: 0;}
    #content {max-width: 300px; width: 100%; margin-left: 0;}
    #container {
        width: 94%;
        max-width: 280px;
        padding: 0 3%;
    }
    #stripe2 {
        width: 94%;
        max-width: 280px;
        padding-left: 3%;
        padding-right: 3%;
    }
    .bannerDiv { padding: 0 0 30px;}


    .filterHolder .firstColumn{max-width: 300px; width: 100%; margin-left: 0}
    .filterHolder .firstColumn .wordInput{max-width: 300px; width: 100%; float: none; margin-right: 0; margin-bottom: 20px;}
    .filterHolder .firstColumn .byPrice{max-width: 300px; width: 100%;float: none; margin-bottom: 20px;}
    .filterHolder #heroFilter{max-width: 300px; width: 100%; float: left;}
    .filterHolder #heroFilter .primary-content{ display: block;margin: 0 auto;padding: 0;position: relative;max-width: 300px; width: 100%;}
    .filterHolder .header{padding: 0; max-width: 300px; width: 100%;}

}