.container, .container-fluid {
    overflow : hidden;
}

.page.odd,
.page.even {
    overflow : hidden;
}

#header {
    z-index : 1000;
}

.row > .col-xs-12 {
    padding : 0 15px;
}

.t2-catalog-container {
    background-color : #f5f5f5;
}

.t2-catalog-canvas,
.t2-catalog-preview {
    margin    : 10px auto 110px auto;
    max-width : 100%;
}

.t2-catalog-preview {
    margin-bottom : 10px;
}

.js .t2-catalog-preview,
.no-js .t2-catalog-canvas {
    display : none;
}

.t2-catalog-viewport {
    position           : relative;
    -webkit-transition : -webkit-transform 1s;
    transition         : transform 1s;
}

.animated {
    -webkit-transition : margin-left 0.2s ease-in-out;
    transition         : margin-left 0.2s ease-in-out;
}

.t2-catalog {
    width     : 100%;
    max-width : 100%;
    height    : auto;
}

.t2-catalog .page {
    background         : white;
    -webkit-box-shadow : 0 0 20px rgba(0, 0, 0, 0.2);
    box-shadow         : 0 0 20px rgba(0, 0, 0, 0.2);
}

.t2-catalog .even .gradient {
    position            : absolute;
    top                 : 0;
    left                : 0;
    width               : 100%;
    height              : 100%;
    background-position : right top;
    background          : -moz-linear-gradient(270deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0) 3%);
    background          : -webkit-linear-gradient(270deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0) 3%);
    background          : linear-gradient(270deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0) 3%);
    filter              : progid:DXImageTransform.Microsoft.gradient(startColorstr="#000000", endColorstr="#000000", GradientType=1);
}

.t2-catalog .odd .gradient {
    position            : absolute;
    top                 : 0;
    left                : 0;
    width               : 100%;
    height              : 100%;
    background-position : left top;
    background          : -moz-linear-gradient(90deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0) 3%);
    background          : -webkit-linear-gradient(90deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0) 3%);
    background          : linear-gradient(90deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0) 3%);
    background-repeat   : repeat-y;
}

.t2-catalog .page-wrapper:first-child .gradient,
.t2-catalog .page-wrapper:last-child .gradient {
    display : none;
}

.t2-catalog .page-wrapper {
    -webkit-perspective : 2000px;
    perspective         : 2000px;
}

/* Hide bugguy page shadow */
.t2-catalog .page-wrapper > div:nth-child(3) {
    display : none;
}

.t2-catalog .page-wrapper img {
    top : 0 !important;
}

.t2-catalog .loader {
    position        : absolute;
    top             : 0;
    left            : 0;
    width           : 100%;
    height          : 100%;
    background      : #000 url('/modules/contrib/tamtam_standard_ui_bridge/img/global-asset/standard-ui/loader.gif') no-repeat center center;
    background-size : 50px;
}

.t2-catalog .shadow {
    -webkit-transition : -webkit-box-shadow 0.5s;
    transition         : box-shadow 0.5s;
    -webkit-box-shadow : 0 0 20px #ccc;
    box-shadow         : 0 0 20px #ccc;
}

/* UI Buttons */
.t2-catalog-canvas .fa-chevron-left,
.t2-catalog-canvas .fa-chevron-right {
    position    : absolute;
    left        : 0;
    top         : 50%;
    padding     : 5px 5px 2px 2px;
    transform   : translate(10%, -50%);
    font-size   : 40px;
    color       : #fff;
    z-index     : 400;
    cursor      : pointer;
    transition  : color linear .2s, text-shadow linear .2s;
    text-shadow : 0 0 2px #000;
}

.t2-catalog-canvas .fa-chevron-right {
    left      : auto;
    right     : 0;
    transform : translate(-10%, -50%);
    padding   : 5px 2px 2px 5px;
}

/* Fix for page turn in single page mode */
.t2-catalog.animated.single > div:not(.page-wrapper) > div > div > div {
    bottom     : 0 !important;
    top        : auto !important;
    background : #fff !important;
}

/* Fix for page turn in double page mode */
/*.t2-catalog.animated.double > div:not(.page-wrapper) > div .page {*/
/*    bottom : 0 !important;*/
/*    top    : auto !important;*/
/*}*/

html:not(.touch-device) .t2-catalog-canvas .fa-chevron-left:active,
html:not(.touch-device) .t2-catalog-canvas .fa-chevron-left:hover,
html:not(.touch-device) .t2-catalog-canvas .fa-chevron-right:active,
html:not(.touch-device) .t2-catalog-canvas .fa-chevron-right:hover {
    color       : #a4a8af;
    text-shadow : 0 0 1px #fff;
}

.t2-catalog-canvas .fa-chevron-left.outside {
    transform : translate(-110%, -50%);
}

.t2-catalog-canvas .fa-chevron-right.outside {
    transform : translate(110%, -50%);
}

.t2-catalog-navbar {
    padding : 10px 0;
}

.t2-catalog-navbar a {
    outline : 0;
}

.t2-catalog-navbar i,
.t2-catalog-navbar span,
.t2-catalog-navbar input {
    display : inline-block;
}

.t2-catalog-navbar .fa {
    width          : 45px;
    margin         : 5px;
    padding-bottom : 2px;
    border         : 1px solid #000;
    border-radius  : 30px;
    color          : #000;
    text-align     : center;
    font-size      : 30px;
    line-height    : 30px;
    vertical-align : middle;
    transition     : color linear .2s, background-color linear .2s, border linear .2s;
}

.t2-catalog-navbar .fa.fa-download {
    width       : 100px;
    padding     : 5px 0 0 0;
    font-size   : 25px;
    line-height : 27px;
}

.t2-catalog-navbar .fa:hover {
    background-color : #000;
    border           : 1px solid #fff;
    color            : #fff;
}

.t2-catalog-navbar .fa.fa-angle-double-left,
.t2-catalog-navbar .fa.fa-angle-left {
    padding-right : 2px;
}

.t2-catalog-navbar .fa.fa-angle-double-right,
.t2-catalog-navbar .fa.fa-angle-right {
    padding-left : 2px;
}

.t2-catalog-navbar .disable .fa,
.t2-catalog-navbar .disable .fa:hover {
    background-color : #e2e2e2;
    color            : #b7b7b7;
    border           : 1px solid #b7b7b7;
    cursor           : initial;
}

.t2-catalog-navbar input {
    width      : 40px !important;
    margin     : 5px !important;
    font-size  : 20px !important;
    text-align : center;
    color      : #000 !important;
}

.t2-catalog-navbar input:focus:not([readonly]) {
    box-shadow : 0 1px 0 0 #000;
}

/* Chrome, Safari, Edge, Opera */
.t2-catalog-navbar input::-webkit-outer-spin-button,
.t2-catalog-navbar input::-webkit-inner-spin-button {
    -webkit-appearance : none;
    margin             : 0;
}

/* Firefox */
.t2-catalog-navbar input[type=number] {
    -moz-appearance : textfield;
}

.t2-catalog-navbar .t2-catalog-nav-input-container span {
    font-size   : 20px;
    font-weight : bold;
    margin      : 5px;
}

/* Zoomable pages */
body.t2-catalog-zoom-overlay-opened {
    overflow : hidden;
}

.t2-catalog-zoomable-page {
    cursor : zoom-in;
}

.t2-catalog-zoom-overlay {
    position         : fixed;
    top              : 0;
    left             : 0;
    right            : 0;
    bottom           : 0;
    display          : flex;
    align-items      : center;
    justify-content  : center;
    overflow-x       : hidden;
    overflow-y       : scroll;
    background-color : #fff;
    cursor           : zoom-out;
    z-index          : 1000;
}

.t2-catalog-zoom-overlay .image-container {
    position        : absolute;
    display         : flex;
    align-items     : center;
    justify-content : center;
}

.t2-catalog-zoom-overlay .quit-infos {
    position         : absolute;
    top              : 0;
    padding          : 3px 10px;
    border-radius    : 0 0 7px 7px;
    background-color : rgba(0, 0, 0, 0.3);
    color            : #dadada;
}

.t2-catalog-zoom-overlay img {
    display : block;
}

.t2-catalog-zoom-overlay.t2-catalog-zoom-adapted-to-screen img {
    max-width  : 100%;
    max-height : 100%;
}

@media (min-width : 350px) {
    /* UI Buttons */
    .t2-catalog-canvas .t2-catalog-nav-prev-btn-container,
    .t2-catalog-canvas .t2-catalog-nav-input-container,
    .t2-catalog-canvas .t2-catalog-nav-next-btn-container {
        display : inline-block;
    }
}

@media (min-width : 450px) {
    /* UI Buttons */
    .t2-catalog-navbar .fa {
        width : 60px;
    }
}

@media (min-width : 768px) {
    main {
        padding-bottom : 80px;
    }

    h2 {
        font-size : 30px;
        margin    : 50px auto 20px auto;
    }

    /* UI Buttons */
    .t2-catalog-canvas .fa-chevron-left,
    .t2-catalog-canvas .fa-chevron-right {
        font-size : 50px;
    }
}