:root {
    --sections-margin-lg: 25px;
    --section-margin-bottom-lg: 110px;
    --image-aspect-ratio: .75;
    --crumbs-height-lg: 60px;

    --pdf-aspect-ratio: .65;

    --catalog-view-aside-width-lg: 300px;
    --catalog-view-aside-margin-lg: 90px;
    --catalog-view-padding-lg: 150px;
    --catalog-view-bottom-lg: 90px;

    --layout-back-color: #eee;
}

#breadCrumbs {
    height: var(--crumbs-height-lg);
}

.row.lot-margin {
    margin-left: calc(-1 * var(--sections-margin-lg));
    margin-right: calc(-1 * var(--sections-margin-lg));
}

.row.lot-margin .catalog-item-container {
    padding-left: var(--sections-margin-lg);
    padding-right: var(--sections-margin-lg);
    margin-bottom: var(--section-margin-bottom-lg);
}

.catalog-view-line.row {
    margin-top: 15px;
    border-bottom: 1px solid;
    margin-left: 0;
    margin-right: 0;
    display: block;
}

.catalog-view-line.top-line {
    margin-top: 25px;
}

.catalog-view-line .pushLeft { 
    padding-left: 0; 
    padding-right: 0;
}

.catalog-view-line .svgIcon {
    height: 20px;
}

.catalog-item-container .catalog-preview-image {
    height: calc((100vw - 2 * var(--page-h-padding-lg) + 2 * var(--sections-margin-lg)) / (3 * var(--image-aspect-ratio)) );
}


@media (min-width: 1450px){
    .catalog-item-container.col-lg-4 {
        width: 25%;
    }
    
    .catalog-item-container .catalog-preview-image {
        height: calc((100vw - 2 * var(--page-h-padding-lg) + 2 * var(--sections-margin-lg)) / (4 * var(--image-aspect-ratio)) );
    }
}


/**************************** VIEW ********************************/

.catalog-view-container.row {
    margin-left: 0;
    margin-right: 0;
    margin-bottom: var(--catalog-view-bottom-lg);
}

.catalog-view-wrapper, .catalog-view-aside {
    height: calc((100vw - 2 * var(--page-h-padding-lg) - var(--catalog-view-aside-margin-lg) - var(--catalog-view-aside-width-lg) - var(--catalog-view-padding-lg)) * var(--pdf-aspect-ratio));
} 

.catalog-view-wrapper {
    margin-left: var(--catalog-view-padding-lg);
    margin-right: var(--catalog-view-aside-margin-lg);
    width: calc(100vw - 2 * var(--page-h-padding-lg) - var(--catalog-view-aside-margin-lg) - var(--catalog-view-aside-width-lg) - var(--catalog-view-padding-lg));
    box-shadow: 5px 5px 0px 0px rgba(190,190,190,.8);
    border-bottom: 2px solid #eee;
    border-top: 2px solid #eee;
    border-right: 2px solid #eee;
    box-sizing: content-box;
}

.catalog-view-wrapper .layout {
    opacity: 0;
    transition: .3s ease-out;
    z-index: 5;
    background-color: var(--layout-back-color);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 50%;
    background-blend-mode: soft-light
}

.catalog-view-wrapper .layout.active {
    opacity: 1;
}

.catalog-view-wrapper .nav-button {
    cursor: pointer;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.catalog-view-wrapper .nav-button.nav-button-prev {
    left: calc(-1 * var(--catalog-view-padding-lg));
}

.catalog-view-wrapper .nav-button.nav-button-next {
    right: calc(-1 * var(--catalog-view-aside-margin-lg));
    transform: translateX(100%);
}

.catalog-view-aside {
    width: calc(var(--catalog-view-aside-width-lg) - 8px);
    flex-direction: column;
    align-items: flex-start !important;
    justify-content: space-between;
}

.control-button .svgIcon {
    height: 20px;
    width: 18px;
}

.goBackLink .svgIcon { width: 50px; height: 12px; }

.control-button span + span { margin-left: 30px;  }


/*****************************************************/

@media (max-width: 1150px) and (min-width: 840px) {
    :root {
        --sections-margin-lg: 10px;
        --section-margin-bottom-lg: 60px;
        --catalog-view-aside-width-lg: 200px;
        --catalog-view-bottom-lg: 60px;
        --catalog-view-aside-margin-lg: 50px;
        --catalog-view-padding-lg: 100px;
    }

    .control-button span + span { margin-left: 15px; }
    .catalog-item-container .catalog-preview-image {
        height: calc((100vw - 2 * var(--page-h-padding-lg) + 2 * var(--sections-margin-lg)) / (4 * var(--image-aspect-ratio)) );
    }
}

@media (max-width: 839px) and (min-width: 701px) {
    :root {
        --sections-margin-lg: 10px;
        --section-margin-bottom-lg: 80px;
        --catalog-view-aside-margin-lg: 50px;
        --catalog-view-padding-lg: 110px;
        --catalog-view-bottom-lg: 20px;
    }

    .catalog-item-container .catalog-preview-image { height: calc((100vw - 2 * var(--page-h-padding-lg) + 2 * var(--sections-margin-lg)) / (2 * var(--image-aspect-ratio)) ); }
    .goBackLink .svgIcon { width: 30px; height: 5px; }
    .catalog-view-aside { width: 100%; padding-top: 30px; flex-direction: initial; }
    .catalog-view-wrapper { width: calc(100vw - 2 * var(--page-h-padding-lg) - var(--catalog-view-aside-margin-lg) - var(--catalog-view-padding-lg)); }

    .catalog-view-pagination-sm {
        padding-top: 5px;
        padding-bottom: 10px;
        margin-bottom: 5px;
    }

}

@media (max-width: 700px) {

    :root {
        
    }

    .catalog-item-container .catalog-preview-image { height: calc((100vw - 2 * var(--page-h-padding-lg) + 2 * var(--sections-margin-lg)) / (1 * var(--image-aspect-ratio)) ); }
}

@media only screen and (min-width : 300px) and (max-width: 800px) and (orientation : landscape) {
    .col-xs-12.catalog-item-container { width: 33.33%; }
}