:root {
	--black-color: #333;
	--body-color: #333;
	--orange-color: #fda573;
	--grey-color: #c6c6c6;

	--footer-back-color: #f7f7f7;
	
	--length-3x: 150px;
	--length-2x: 75px;
	--length-1x: 50px;
	
	--hippo-height: 6.2vw;

	--larger-font-size: 24px;
	--large-font-size: 34px;

	--upper-link-bottom-margin: 45px;

	--social-logo-height: 60px;

	--simple-padding: 15px;

	--nav-item-margin: 40px;

	--active-color: var(--orange-color);

	--body-font-size: 14px;

	--add-aside-width: 300px;
	--aside-width: 30vw;
	--aside-hippo-size: 2.2vw;

	--product-aside-link-size: calc(var(--larger-font-size) * .8);

	--scrollbar-width: 5px;
	--scrollbar-color: #ddd;

	--modal-window-back-color: #fff;
    --modal-cross-width: 25px;
    --modal-cross-margin: 15px;
    --modal-form-padding: var(--page-h-padding);
    --modal-container-margin: 60px;
}


*::-webkit-scrollbar {
  width: var(--scrollbar-width);
}

*::-webkit-scrollbar-thumb {
  background-color: var(--scrollbar-color);
  border-radius: 5px;
}

*::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}

*::-webkit-scrollbar:horizontal {
    height: var(--scrollbar-width);
}

body {
	font-family: Akrobat, Helvetica;
	font-size: var(--body-font-size);
	color: var(--body-color);
}

footer { background-color: var(--footer-back-color); }

h1, .header-font {
	font-family: Heathergreen;
}

a { color: inherit; }

a:hover { color: var(--active-color); }
a.white-only:hover { color: #fff; }

/*a.white:hover, a.white:visited { color: #fff; }*/

input:focus, textarea:focus { outline: none; }

input, textarea {
	border: 1px solid #333;
	font: inherit;
	line-height: .8em;
	padding: var(--simple-padding) calc(var(--simple-padding) * 2);
	background-color: transparent;
}

textarea { resize: none; }

.asBlock { display: block; }

.padding__all__3x { padding: var(--length-3x); }
.padding__all__2x { padding: var(--length-2x); }
.padding__all__1x { padding: var(--length-1x); }

.padding__left__3x { padding-left: var(--length-3x); }
.padding__right__3x { padding-right: var(--length-3x); }
.padding__top__3x { padding-top: var(--length-3x); }
.padding__bottom__3x { padding-bottom: var(--length-3x); }

.padding__left__2x { padding-left: var(--length-2x); }
.padding__right__2x { padding-right: var(--length-2x); }
.padding__top__2x { padding-top: var(--length-2x); }
.padding__bottom__2x { padding-bottom: var(--length-2x); }

.padding__left__1x { padding-left: var(--length-1x); }
.padding__right__1x { padding-right: var(--length-1x); }
.padding__top__1x { padding-top: var(--length-1x); }
.padding__bottom__1x { padding-bottom: var(--length-1x); }

.marginRight { margin-right: var(--simple-padding); }
.marginLeft { margin-left: var(--simple-padding); }
.marginBottom { margin-bottom: var(--simple-padding); }
.marginTop { margin-top: var(--simple-padding); }

.marginRight2x { margin-right: calc(var(--simple-padding) * 2); }
.marginLeft2x { margin-left: calc(var(--simple-padding) * 2); }
.marginBottom2x { margin-bottom: calc(var(--simple-padding) * 2); }
.marginTop2x { margin-top: calc(var(--simple-padding) * 2); }

.flex-wrap {
	flex-wrap: wrap;
}

.flex-self-bottom { align-self: flex-end; }
.flex-self-top { align-self: flex-start; }

.flex-row { flex-direction: row; }
.flex-column { flex-direction: column; }
.flex-between { justify-content: space-between; }

.flex-start { align-items: start; }
.flex-end { align-items: end; }
.flex-column .flex-end { justify-content: end; }

.flex-column.flex-left { align-items: start; }

.white-back { background-color: #fff; }
.black-back { color: #fff; background-color: var(--black-color); }
.orange-back { color: #fff; background-color: var(--orange-color); }

.grey { opacity: .7; }

.hippo-link {
    font-size: calc(1.29 * var(--hippo-height));
    height: var(--hippo-height);
    display: inline-block;
    line-height: calc(.8 * var(--hippo-height));
}

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

.upper-link { margin-bottom: var(--upper-link-bottom-margin); }

span.upper-link:hover { color: var(--active-color); }

.underline { text-decoration: underline; }

.social-logo__size { height: var(--social-logo-height); }

#footer__social_logo__unta { filter: brightness(0); }

.form__contact__container .phone-input {
    width: calc(4* var(--simple-padding) + 15ch);
    margin-left: calc(2 * var(--simple-padding));
}
.form__contact__container .name-input { width: calc(100% - 6* var(--simple-padding) - 15ch); }

.form__contact__container .block-height-1 { height: calc(4* var(--simple-padding) + 1.2 * var(--larger-font-size) + 2px); }

.form__contact__container .block-height-2 { height: calc(5* var(--simple-padding) + 1.2 * var(--larger-font-size) + 2px); }

.form__contact__container .block-height-3 { height: calc(2* var(--simple-padding) + 6 * var(--larger-font-size) + 2px); }

.form__contact__container .black-icon { padding: .5em; }

.btn {
    padding: calc(var(--simple-padding) / 2) calc(4* var(--simple-padding));
    background-color: var(--black-color);
    border-radius: 0;
    color: #fff;
    border: none;
}
.btn:hover { color: #fff; background-color: var(--active-color); }

a.black-icon:hover { color: #fff; background-color: var(--active-color); }

.xs-block-fill-link { width: calc(100% - 30px); top: 0; z-index: 500; }
.xs-block-fill-link.left { left: 0; }
.xs-block-fill-link.right { right: 0; }

#mobileMenu {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 30%;
    background-color: var(--black-color);
    color: #fff;
    z-index: 100;
    transform: translateX(-100%);
    transition: .5s ease-out;
}

#mobileMenu.shown { transform: translateX(0%); }

#mobileMenu .navItem + .navItem { margin-top: var(--nav-item-margin); }

#mobileMenu .navItem.active { color: var(--active-color); }

#mobileMenu .mobile-menu-hider {
	position: absolute;
	top: var(--length-2x);
	right: var(--length-2x);
	transform: translate(-50%, -50%);

}

#mobileMenu .lower-part { padding-bottom: 40px; }

header .mobile-menu-caller.burger {
	top: var(--length-2x);
	left: var(--length-3x);
	height: 24px;
	cursor: pointer;
	transform: translateY(-50%);
}

.mobile-menu-caller.burger {
	width: calc(var(--simple-padding) * 2);
}

.mobile-menu-caller.burger .bar {
	display: inline-block;
	width: 100%;
	height: 2px;
	background-color: #fff;
	transition: .3s ease-out;
}

.mobile-menu-caller.burger .top-bar { width: 60%; align-self: flex-end; }

.mobile-menu-caller.burger .bot-bar { align-self: flex-start;  width: 60%; }

.mobile-menu-caller.burger:hover .top-bar, .mobile-menu-caller.burger:hover .bot-bar {
	width: 100%;
}

.mobile-menu-caller.burger:hover .bot-bar {
	/*width: 60%;*/
}

#searchContainer {
	position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: 25.1%;
    background-color: #fff;
    color: #000;
    z-index: 100;
    transform: translateX(100%);
    transition: .5s ease-out;
}

#searchContainer.shown {
	transform: translateX(0%);
}

input.only-bottom-border {
	border-top: none;
	border-left: none;
	border-right: none;
	padding: 0;
	width: 100%;
}

#searchContainer .search__icon,
#searchContainer .search-hider {
	position: absolute;
	top: 50%;
	transform: translate(-2em, -50%);
}

#searchContainer .search-hider {
	transform: translate(1em, -50%);
}

header .search-caller {
	top: var(--length-2x);
	right: var(--length-3x);
	position: absolute;
	font-size: 24px;
    transform: translateY(-50%);
}

.bw_to_color { overflow: hidden; }
.bw_to_color .bgCover { filter: grayscale(1); transition: .5s ease-out; /*background-size: 100% auto;*/ }
.bw_to_color_outer:hover .bw_to_color .bgCover,
.bw_to_color:hover .bgCover { filter: grayscale(0); transform: scale(1.02); /*background-size: 102% auto;*/ }



/***************	INNER	***************/
.viewPort { height: 90vh; }
#left-aside { width: var(--aside-width); padding-right: 0; }

#left-aside .social-link {
	position: absolute;
	bottom: var(--length-3x);
    left: var(--length-3x);
}

#left-aside .hippo-link.filter__type { 
	font-size: calc(1.29* var(--aside-hippo-size));
    height: var(--aside-hippo-size);
    display: inline-block;
    line-height: calc(.8* var(--aside-hippo-size));
    display: block;

}

#left-aside .hippo-link.filter__type[data-type="all"] {
	margin-bottom: var(--nav-item-margin);
	margin-top: 0;
}

#left-aside .hippo-link.filter__type + .hippo-link.filter__type {
	margin-top: calc(var(--nav-item-margin) / 2);
}

.filter__type:hover, .filter__type.active, .filter__type[data-type="seasons"] { color: var(--active-color); }

#add-aside {
	background-color: var(--grey-color);
	width: var(--add-aside-width);
}

#left-aside, #add-aside { overflow: auto; }

.product-call-link {
	display: block;
	cursor: pointer;
	font-size: var(--product-aside-link-size);
	margin-bottom: 5px;
}

.product-call-link:hover { font-weight: 600; }

.parentLink { cursor: pointer; }

#mainFrame {
	width: calc(100% - var(--aside-width) - var(--add-aside-width));
    width: calc(100 * var(--vw) - var(--aside-width) - var(--add-aside-width) - var(--scrollbar-width));
	overflow: hidden;
}

#breadCrumbs {
    opacity: .7;
    position: absolute;
    top: var(--length-2x);
}
/******************************************/


/******************* MODAL ********************/
body.modal-shown {
    overflow: hidden;
    margin-right: var(--scrollbar-width);
}

body.modal-shown main, body.modal-shown footer { filter: blur(5px); }

.modal-window .swiper-container .absolute {
    pointer-events: initial;
}

#loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 501;
}

#loader svg {
    display: block;
    margin: auto;
    height: var(--loader-size);
}

.modal-window {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 500;
    padding: var(--length-2x) var(--length-3x);
}

.modal-window-inner {
    width: 100%;
    height: 100%;
}

.modal-window-inner .swiper-container {
	overflow: hidden;
	height: 100%;
}

.modal-window-inner .swiper-container .swiper-slide {
    justify-content: space-around;
    display: flex;
}

.modal-window-inner .swiper-container .swiper-slide:not(.swiper-slide-active) { opacity: 0 !important; }

.modal-window-inner .swiper-container .swiper-slide .inner {
	background-color: var(--modal-window-back-color);
	padding: 15px;
}

.modal-window-inner .swiper-pagination {
    position: absolute;
    top: 13px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 30px;
}

.modal-window .hide-modal.cross-image, .modal-form-container > .hide-modal-form {
    position: absolute;
    top: var(--length-2x);
    left: calc(var(--length-3x)/* - var(--modal-cross-margin) - var(--modal-cross-width)*/);
    z-index: 500;
    height: var(--modal-cross-width);
    transform: translateY(-50%);
}

.modal-window .hide-modal.cross-image svg,
.hide-modal-form svg { width: var(--modal-cross-width); height: var(--modal-cross-width); }

.flex.between { justify-content: space-between; }

.modal-window .nav-next {
	margin-right: 15px;
}

.slide-toolbar { height: 30px; }

/**************** MODAL FORMS *****************/

.modal-form-container {
    position: fixed;
    padding: var(--length-2x) var(--length-3x);
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 100;
    background-color: #fff;
}

.modal-form-container .shadow {
    background-color: var(--grey-social-color);
    opacity: .8;
}

.modal-form-container .wrapper {
    /*padding: var(--modal-form-padding);*/
}

.btInput:focus { outline: none; }

.btInput {
    height: 35px;
    line-height: 35px;
    padding: 0 10px;
    border:  1px solid var(--grey-light-color);
}

textarea.btInput {
    height: 105px;
    resize: vertical;
}

.btCheckbox + label {
    height: 35px;
    width: 35px;
    border: 1px solid var(--grey-light-color);
    margin: 0px 10px 0px 0px;
    position: relative;
}

.btCheckbox + label:before,
.btCheckbox + label:after {
    content: '';
    position: absolute;
    height: 1px;
    width: 30px;
    visibility: hidden;
    display: inline-block;
    background-color: var(--grey-social-color);
    top: 16px;
    left: 2px;
    z-index: 4;
    transform-origin: center;
}

.btCheckbox + label:before {
    transform: rotate(45deg);
}

.btCheckbox + label:after {
    transform: rotate(-45deg);
}

.btCheckbox:checked + label:before,
.btCheckbox:checked + label:after { visibility: visible; }

.contacts-input.error {
    border-color: var(--red-active-color);
}

.send-form-btn {
    height: 35px;
    line-height: 35px;
    background-color: var(--grey-vlight-color);    
    cursor: pointer;
    display: inline-block;
    padding: 0 45px;
}

/******************* /MODAL *******************/


@media (min-width: 1200px) {
	.col-lg-20 { width: 20%; }
	.col-lg-30 { width: 30%; }
	.col-lg-40 { width: 40%; }
	.col-lg-50 { width: 50%; }
	.col-lg-60 { width: 60%; }
	.col-lg-70 { width: 70%; }
	.col-lg-80 { width: 80%; }
}

@media (max-width: 1199px) and (min-width: 771px) {
	.col-md-20 { width: 20%; }
	.col-md-30 { width: 30%; }
	.col-md-40 { width: 40%; }
	.col-md-50 { width: 50%; }
	.col-md-60 { width: 60%; }
	.col-md-70 { width: 70%; }
	.col-md-80 { width: 80%; }
}

@media (max-width: 770px) and (min-width: 550px) {
	.col-sm-20 { width: 20%; }
	.col-sm-30 { width: 30%; }
	.col-sm-40 { width: 40%; }
	.col-sm-50 { width: 50%; }
	.col-sm-60 { width: 60%; }
	.col-sm-70 { width: 70%; }
	.col-sm-80 { width: 80%; }
}

@media screen and (orientation: landscape) and (max-width: 950px) and (min-width: 700px) {
    .col-md-20 { width: 20%; }
    .col-md-30 { width: 30%; }
    .col-md-40 { width: 40%; }
    .col-md-50 { width: 50%; }
    .col-md-60 { width: 60%; }
    .col-md-70 { width: 70%; }
    .col-md-80 { width: 80%; }
}

@media (min-width: 1500px)  and (max-width: 2000px) {
    :root {
        --aside-hippo-size: 3.2vh;
    }
}

@media (min-width: 1100px)  and (max-width: 1450px) {
	:root {
		--length-3x: 100px;
	    --length-2x: 65px;
	    --length-1x: 40px;

	    --hippo-height: 5vw;
	    --larger-font-size: 18px;
	    --large-font-size: 24px;
	    --upper-link-bottom-margin: 25px;
	    --social-logo-height: 50px;
	    --simple-padding: 10px;
	    --nav-item-margin: 30px;

	    --body-font-size: 13px;

        --add-aside-width: 220px;
        --aside-hippo-size: 3.5vh;
	}

	header .mobile-menu-caller.burger { height: 16px; }

	.disclaimer-text { font-size: .7em; }

	footer .black-icon {font-size: .9em;}
}

@media (min-width: 771px)  and (max-width: 1099px) {
	:root {
		--length-3x: 90px;
        --length-2x: 50px;
        --length-1x: 30px;

	    --hippo-height: 5vw;
	    --larger-font-size: 14px;
        --large-font-size: 20px;
        --upper-link-bottom-margin: 20px;
        --social-logo-height: 45px;
        --simple-padding: 10px;
        --nav-item-margin: 25px;
        --body-font-size: 11px;

        --add-aside-width: 220px;
        --aside-hippo-size: 3.5vh;
	}

	header .mobile-menu-caller.burger { height: 16px; }

	.disclaimer-text { font-size: .7em; }

	footer .black-icon {font-size: .9em;}
}

@media screen and (orientation: portrait) and (max-width: 1280px) and (min-width: 550px) {
    :root {
        /*
        --hippo-height: 4.5vw;
        --larger-font-size: 12px;
        --large-font-size: 18px;
        --body-font-size: 10px;
        */

        --body-font-size: 15px;
        --larger-font-size: 22px;
        --large-font-size: 24px;

        --length-3x: 55px;
        --length-2x: 40px;
        --length-1x: 20px;

        --upper-link-bottom-margin: 18px;
        --social-logo-height: 35px;
        --simple-padding: 8px;
        --nav-item-margin: 25px;

        --aside-width: 0px;
        --add-aside-width: 0px;

        --product-aside-link-size: 14px;

    }

    .hidesm {
        display: none;
    }

    header .mobile-menu-caller.burger { height: 14px; }

    .disclaimer-text { font-size: .6em; }

    footer .black-icon {font-size: .9em;}

    #searchContainer { width: 50%; }

    #searchContainer .search__icon, #searchContainer .search-hider { transform: translate(-1.4em, -50%); }

    #searchContainer .search-hider { transform: translate(.2em, -50%); }

    .viewPort { height: auto; }

    .sm-nopadding { padding: 0; }
}


@media (max-width: 770px)  and (min-width: 550px) {
	:root {
		--length-3x: 55px;
        --length-2x: 40px;
        --length-1x: 20px;
        --hippo-height: 4.5vw;
        --larger-font-size: 12px;
        --large-font-size: 18px;
        --upper-link-bottom-margin: 18px;
        --social-logo-height: 35px;
        --simple-padding: 8px;
        --nav-item-margin: 25px;
        --body-font-size: 10px;

        --aside-width: 0px;
        --add-aside-width: 0px;

        --product-aside-link-size: 14px;
	}

	header .mobile-menu-caller.burger { height: 14px; }

	.disclaimer-text { font-size: .6em; }

	footer .black-icon {font-size: .9em;}

	#searchContainer { width: 50%; }

	#searchContainer .search__icon, #searchContainer .search-hider { transform: translate(-1.4em, -50%); }

	#searchContainer .search-hider { transform: translate(.2em, -50%); }

	.viewPort { height: auto; }

	.sm-nopadding { padding: 0; }
}

@media (max-width: 549px) {
	:root {
		--length-3x: 40px;
        --length-2x: 40px;
        --length-1x: 20px;
        --hippo-height: 4vh;
        --larger-font-size: 16px;
        --large-font-size: 20px;
        --upper-link-bottom-margin: 18px;
        --social-logo-height: 45px;
        --simple-padding: 10px;
        --nav-item-margin: 25px;
        --body-font-size: 12px;

        --aside-width: 0px;
        --add-aside-width: 0px;
	}

	header .mobile-menu-caller.burger { height: 14px; }

	#mobileMenu { width: 100%; }
	#searchContainer { width: 70%;  }

	#searchContainer .padding__all__2x {
		padding: 80px;
	}

	.flex-xs-self-1 { order: 1; }
	.flex-xs-self-2 { order: 2; }
	.flex-xs-self-3 { order: 3; }
	.flex-xs-self-4 { order: 4; }
	.flex-xs-self-5 { order: 5; }
	.flex-xs-self-6 { order: 6; }

	.xs-screen-60 { height: 60vh; }
	.xs-screen-50 { height: 50vh; }
	.xs-screen-40 { height: 40vh; }
	.xs-screen-30 { height: 30vh; }

	.xs-nopadding { padding: 0; }

	footer .left-side .block-height-1, 
	footer .left-side .block-height-2,
	footer .left-side .block-height-3,
	footer .left-side .block-height-4 { 
		height: auto; 
		margin-bottom: 15px; 
	}

	footer .left-side .block-height-3 > div + div { margin-top: 15px; }

	footer .left-side .block-height-4.marginTop2x {
		margin: 0;
		position: absolute;
		top: 0;
		right: 0;
	}

	footer .black-icon {font-size: .9em;}

	.disclaimer-text {
	    width: calc(100% - 165px);
	    font-size: .75em;
	}

	.viewPort { height: auto; }
	
	.modal-window {
        padding: calc(var(--length-3x) * 2) 0;
    }
    
    body.modal-shown { margin-right: 0px; }
}

@media screen and (max-width: 950px) and (min-width: 600px) {
    .modal-window {
        padding: 0px var(--length-1x);
    }
}

@media screen and (orientation: landscape) and (max-width: 1100px) {
    :root {
        --length-3x: 55px;
        --length-2x: 40px;
        --length-1x: 20px;
        --hippo-height: 4.5vw;
        --larger-font-size: 12px;
        --large-font-size: 18px;
        --upper-link-bottom-margin: 18px;
        --social-logo-height: 35px;
        --simple-padding: 8px;
        --nav-item-margin: 25px;
        --body-font-size: 10px;

        --aside-width: 0px;
        --add-aside-width: 0px;

        --product-aside-link-size: 14px;
    }

    .hidexs { display: none; }

    #mobileMenu {  width: 100%;  }

    #mobileMenu > .flex {
        flex-direction: row;
        align-items: flex-start;
    }

    #mobileMenu .top-part, #mobileMenu .middle-part, #mobileMenu .lower-part { width: 25%; }

    #mobileMenu .middle-part { padding-top: var(--length-2x); }

    #mobileMenu .lower-part { align-self: flex-end; }

    #very_search { padding: 0px 0px 5px; font-size: 1.2em; }

    #searchContainer { width: 45%; }

    #searchContainer .search__icon { transform: translate(-1.3em, -55%); }

    #searchContainer .search-hider { transform: translate(.3em, -55%); }

    #left-aside { display: block !important; }
    #left-aside * { display: none; }

    header .mobile-menu-caller.burger { top: var(--length-3x); }
    header .search-caller {
        bottom: var(--length-3x);
        left: var(--length-3x);
        top: auto;
        right: auto;
    }

    header .mobile-menu-caller.burger, header .search-caller { transform: none; }

    #mainFrame {
        width: calc(100 * var(--vw) - var(--aside-width) - var(--add-aside-width));
    }
}