:root {
	--item-descript-width: 60%;
	--aside-width: 26vw;
}

#production-list__container.viewPort {
	height: 54vw;
}

#mainFrame {
	background-color: #ebebeb;
}

#mainFrame.white-back { background-color: #fdfdfd; }

.product-item__container {
    width: 25%;
    margin-bottom: 50px;
    padding: 15px;
}

.product-item__shadow {
    height: 12px;
    background-color: rgba(0,0,0,.3);
    border-radius: 50%;
    width: 60%;
    margin: 20px auto 10px;
    filter: blur(6px);
}

.product-item__image {
    display: block;
    width: 60%;
    margin: auto;
    transition: .3s ease-out;
    pointer-events: none;
    aspect-ratio: 28 / 40;
}

.product-item__container .product-item__hover {
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 100%;
    height: 70%;
    background-color: #fff;
    z-index: 1;
    opacity: 0;
    transition: .3s ease-out;
}

.product-item__container:hover .product-item__hover { opacity: 1; }

.product-item__container:hover { cursor: pointer; }

.product-item__container:hover .product-item__image { transform: scale(1.15); }

.main-frame-inner { overflow: auto; }

/*
#catalog__list.nomargin {
    height: calc(100% - var(--length-3x) + var(--length-1x));
}
*/

#add-aside .product-call-link.active { font-weight: 600; }

/********************  ITEM  ************************/

#catalog__elements {
	background-color: #eaeaea;
}

#catalog__item { z-index: 5; }

#catalog__item .backstage {
    position: absolute;
    width: calc(100% + 2 * var(--length-1x));
    /*width: 90vh;*/
    width: 50vw;
    right: calc(-1 * var(--length-1x));
    z-index: -1;
    top: calc(-1 * var(--length-3x));
    min-width: calc(100vw - var(--aside-width) - var(--add-aside-width));
}

#catalog__item {
	overflow: visible;
	z-index: 5;
	padding-top: var(--length-1x);
}

#catalog__item .unta-link-wrapper {
    position: absolute;
    top: calc(-1 * var(--length-3x));
    left: var(--length-1x);
    z-index: 3;
    background-color: var(--active-color);
    height: calc(var(--length-3x));
    display: flex;
    align-items: end;
    padding: var(--simple-padding) var(--simple-padding) calc(2 * var(--simple-padding));
}

#catalog__item .unta-link-wrapper .social-logo__size { height: calc(var(--social-logo-height) * .6); }

#catalog__item .title {
	font-size: var(--hippo-height);
    line-height: var(--hippo-height);
    margin-bottom: var(--length-1x);
}

#catalog__item .vols .brick + .brick { margin-left: var(--length-1x); }

#catalog__item .catalog__nav__btn {
    position: absolute;
    bottom: 0px;
    font-size: 35px;
    cursor:  pointer;
}

#catalog__item .catalog__nav__btn.btn_prev { left: var(--length-1x); }

#catalog__item .catalog__nav__btn.btn_next { right: /*var(--length-2x);*/ calc(var(--length-2x) - 35px) }

#catalog__item .descript-part { width: var(--item-descript-width); }

#catalog__item .text { font-size: var(--product-aside-link-size); }

.catalog__back-btn {
    right: var(--length-2x);
    /*
    top: var(--length-1x);
    */
    top: calc(-1 * var(--length-2x));
    position: absolute;
    /*transform: translate(30%, -50%);*/
    transform: translate(30px, -50%);
    cursor: pointer;
}

@media (min-width: 1100px) {
	.catalog__back-btn { font-size: 30px; }
}

@media (min-width: 1100px)  and (max-width: 1400px) {
	.product-item__container { width: 33.3%; }

	#mainFrame {
        padding-bottom: var(--length-2x);
	}
}

@media (min-width: 771px)  and (max-width: 1099px) {
	.product-item__container { width: 50%; }
}

@media screen and (orientation: portrait) and (max-width: 1210px) and (min-width: 550px) {
	:root {
		--header-row-height: 80px;
	}

	.product-item__container { width: 33.3%; }

	#mainFrame {
		background-color: #fff;
		padding-top: 0;
        height: auto;
	}

	.product-item__image {
		height: calc((((100vw - 2* var(--length-1x)) / 3) - 40px)* .7);
	}

	#mainFrame h2 { font-size: 5vh; margin: 15px 0px 0px; }

	.main-frame-inner { padding: 0px var(--length-3x); }

	header {
	    background-color: var(--black-color);
	    height: var(--header-row-height);
	}

	.product-item__title, .product-item__summary {
	    /*font-size: 16px;*/
	}

	#catalog__item .backstage {
	    width: auto;
	    height: 65vh;
	}

	#catalog__item {
        height: calc(64vh + 2* var(--length-3x));
        padding-top: calc(var(--length-3x) + var(--length-2x) + var(--length-1x));
    }

	#catalog__item .summary { margin-bottom: calc(var(--length-3x)); }

	#catalog__item .title {
	    margin-bottom: .4em;
	    font-size: calc(2* var(--hippo-height));
	}

	#catalog__item .unta-link-wrapper {
	    top: 0px;
	    left: calc(var(--length-3x) + var(--length-2x));
	    height: calc(var(--length-3x) + var(--length-2x));
	}

	#catalog__item .unta-link-wrapper .social-logo__size { height: var(--social-logo-height); }

	.vols.upper-font { font-size: var(--large-font-size); }

	#catalog__item .catalog__nav__btn { bottom: 50%; }

	#catalog__item .descript-part {
	    padding-bottom: 0;
	}

	#production-list__container + br.clear { display: none; }

	.catalog__back-btn {
	    top: calc(1* var(--length-3x));
	    transform: translate(0%, -50%);
	}
}

@media (orientation: portrait) and (max-width: 770px)  and (min-width: 550px) {
	:root {
		--header-row-height: 80px;
	}
	.product-item__container { width: 33.3%; }

	#mainFrame {
		background-color: #fff;
		padding-top: 0;
        height: auto;
	}

	#mainFrame h2 { font-size: 5vh; margin: 15px 0px 0px; }

	.main-frame-inner { padding: 0px var(--length-3x); }

	header {
	    background-color: var(--black-color);
	    height: var(--header-row-height);
	}

	.product-item__title, .product-item__summary {
	    font-size: 16px;
	}

	#catalog__item .backstage {
	    width: auto;
	    height: 65vh;
	}

	#catalog__item {
        height: calc(64vh + 2* var(--length-3x));
        padding-top: calc(var(--length-3x) + var(--length-2x) + var(--length-1x));
    }

	#catalog__item .summary { margin-bottom: calc(var(--length-3x)); }

	#catalog__item .title {
	    margin-bottom: .4em;
	    font-size: calc(2* var(--hippo-height));
	}

	#catalog__item .unta-link-wrapper {
	    top: 0px;
	    left: calc(var(--length-3x) + var(--length-2x));
	    height: calc(var(--length-3x) + var(--length-2x));
	}

	#catalog__item .unta-link-wrapper .social-logo__size { height: var(--social-logo-height); }

	.vols.upper-font { font-size: var(--large-font-size); }

	#catalog__item .catalog__nav__btn { bottom: 50%; }

	#catalog__item .descript-part {
	    padding-bottom: 0;
	}

	#production-list__container + br.clear { display: none; }

	.catalog__back-btn {
	    top: calc(1* var(--length-3x));
	    transform: translate(0%, -50%);
	}
}

@media (max-width: 549px) {
	:root {
		--item-descript-width: auto;
		--add-aside-width: 0;
	}
	header {
	    background-color: var(--black-color);
	    height: 75px;
	    position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 95;
	}

    main { padding-top: 75px; }

	#mainFrame {
		background-color: #fff;
		padding-top: 0px;
        height: auto;
        overflow: hidden;
	}

	#mainFrame h2 { font-size: 5vh; margin: 15px 0px 0px; }

	.product-item__container { 
		width: 33.3%; 
    	margin-bottom: 30px;
    	padding: 10px;
	}

	.product-item__title, .product-item__summary {
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
		
		font-size: 11px;
        text-transform: uppercase;
	}
	
	.product-item__summary {
	    font-weight: 300;
	    font-size: 10px;
	}


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

	#catalog__item .backstage {
	    width: auto;
	    height: 65vh;
	    right: calc(-10vh - var(--length-1x));
	}

	#catalog__item {
        height: calc(65vh + 2* var(--length-3x) + var(--length-2x) + var(--length-1x));
        padding-top: calc(var(--length-3x) + var(--length-2x) + var(--length-1x));
    }

	#catalog__item .summary { margin-bottom: calc(var(--length-3x));  margin-top: calc(var(--length-1x)); }

	#catalog__item .title {
	    margin-bottom: .4em;
	    font-size: calc(2* var(--hippo-height));
	}

	#catalog__item .unta-link-wrapper {
	    top: 0px;
	    left: var(--length-1x);
	    height: calc(var(--length-3x) + var(--length-2x));
	}

	#catalog__item .unta-link-wrapper .social-logo__size { height: var(--social-logo-height); }

	.vols.upper-font { font-size: var(--large-font-size); }

	#catalog__item .catalog__nav__btn { bottom: 30%; top: 113vw; bottom: auto; }

	#catalog__item .descript-part {
	    padding: var(--length-1x);
	    height: auto;
        margin-top: 68vw;
    }

	#production-list__container + br.clear { display: none; }

	.catalog__back-btn {
	    top: var(--length-1x);
    	right: var(--length-1x);
        transform: translateX(7%);
        position: absolute;
        top: 27px;
        right: 15px;
        color: #fff;
	}

	#catalog__item .catalog__nav__btn.btn_next { right: var(--length-1x); /*color: #fff;*/ }
	#catalog__item .catalog__nav__btn.btn_prev { left: var(--length-1x); /*color: #fff; text-shadow: 0px 0px 2px #000;*/ }
	
	.product-item__image {
        height: calc((((100vw - 2* var(--length-1x)) / 3) - 40px)* 1.4);
        width: 85%;
    }

}


@media screen and (orientation: landscape) and (max-width: 1000px) {

	.product-item__container { width: 25%; }

	#mainFrame { padding-bottom: var(--length-1x); }

	.main-frame-inner h2 {
        font-size: 5em;
        margin-top: -.5em;
    }

    #production-list__container.viewPort { height: calc(100 * var(--vh)); }

    .catalog__back-btn { top: 0; transform: none; right: 0; }
}


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

@media (orientation: landscape) and ( min-width: 1270px ) {
	:root {
		--product-aside-link-size: 1vw;
		--item-descript-width: 44%;
		--length-3x: 7.8vw;
		--length-2x: 3.9vw;
		--length-1x: 2.6vw;
		--add-aside-width: 14vw;
		--aside-hippo-size: 2.3vw;
	}

	#catalog__item .title { font-size: 4.6vw; }

	#catalog__item .backstage { width: 63vw; }
}