@charset "utf-8";

@font-face {
	font-family: 'Futura PT Book';
    src: url("/assets/fonts/futura-pt-book.ttf") format('truetype');
	}
@font-face {
	font-family: 'Futura PT Book Cond';
    src: url("/assets/fonts/futura-pt-book-cond.ttf") format('truetype');
	}





* {
	margin: 0px;
	padding: 0px;
	border: 0px solid #FFF;
	}
html {
    display: block;
    position: relative;
    width: 100%;
    height: 100vh;
  	overflow-x: hidden;
  	overflow-y: scroll;
  
  	/* scroll-behavior: smooth; */
    }
html > body {
    display: block;
    position: relative;
    width: 100%;
    line-height: 160%;
    font-weight: 400;
    overflow: hidden;
    box-sizing: border-box;
  	font-family: 'Futura PT Book';
  	background: #fff;
  	color: #000;
    }





/*

@media (prefers-color-scheme: dark) {
	html > body {
        background: #222;
        color: #fff;
        }
	}

*/






    

    
.vertical-scrolable { overflow-y: auto; }
.vertical-scrolable::-webkit-scrollbar { width: 13px; height: 7px; background: #eee; color: #F00; border-radius: 0px; }
.vertical-scrolable::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.1); border-radius: 0px; }
.vertical-scrolable::-webkit-scrollbar-thumb { background: #9e1b32;; border-radius: 0px; }


@media screen and (min-aspect-ratio: 1/99999) and (max-aspect-ratio: 10/9) {
    /* портретная */
  	
	}
@media screen and (max-aspect-ratio: 10/9) and (max-width: 5in) {
    /* мобильная версия */
    
    }
@media screen and (max-aspect-ratio: 10/9) and (min-width: 5in) {
    /* планшетная */
    
    }


@media screen and (min-aspect-ratio: 10/9) {
  	/* альбомная версия */
  	
	}
@media screen and (min-aspect-ratio: 10/9) and (max-aspect-ratio: 15/9) {
    /* 3x4 */
  	
    }
@media screen and (min-aspect-ratio: 15/9) {
    /* 16x9 */
  	
	}









@media screen and (max-aspect-ratio: 10/9) and (max-width: 5in) {
    /* мобильная версия */
    html,body {
      	font-size: calc(100vw/25);
  		line-height: 150%;
  		}
    }

@media screen and (max-aspect-ratio: 10/9) and (min-width: 5in) {
    /* портретная */
    html,body {
      	font-size: calc(100vw/40);
  		line-height: 150%;
  		}
    }

@media screen and (min-aspect-ratio: 10/9) and (max-aspect-ratio: 15/9) {
    /* 3x4 */
  	html,body { font-size: calc(100vw/60); }
    }

@media screen and (min-aspect-ratio: 15/9) {
    /* 16x9 */
  	html,body { font-size: calc(80vw/65); }
	}


/* ========================================================================================================== */
/* ================= РАЗМЕТКА =============================================================================== */
/* ========================================================================================================== */

div {
    display: block;
    position: relative;
    }





/* ========================================================================================================== */
/* ==================== СТИЛИ =============================================================================== */
/* ========================================================================================================== */

a { color: #000; }
a:hover { color: #1a4ea2; }

h1,h2,h3 {
  	font-size: 1em;
  	line-height: 160%;
	}

.block.white-background {
  	background: #fff;
  	color: #000;
	}
.block.white-background a { color: #000; }
.block.white-background a:hover { color: #884; }

.block.imaged, .block.imaged a, .block.imaged a:hover {
  	color: #fff;
	}


.button {
  	display: inline-block;
  	position: relative;
  	border: 0px;
  	border-radius: 0px;
  	text-align: center;
  	background: #ccc;
  	cursor: pointer;
  	padding: 0px 1em;
  	box-sizing: border-box;
  	font-size: 100%;
  	line-height: 240%;
  	outline: none;
	}

.button.red { background: #9e1b32; color: #fff!important; }
.button.hover-red:hover { background: #9e1b32; color: #fff!important; }

.button.white { background: #fff; color: #000!important; }
.button.white:hover:before {
	content: " ";
  	display: block;
  	position: absolute;
  	left: -4px;
  	top: -4px;
  	width: calc(100% + 8px);
  	height: calc(100% + 8px);
  	box-sizing: border-box;
  	border: 2px solid #fff;
	}


.button.green { background: #3e7648; color: #fff; }
.button.black { background: #333; color: #fff; }


.button.yellow { background: #fdb613; color: #fff; }
.button.hover-yellow:hover { background: #fdb613; color: #fff; }

.button.blue { background: #1a4ea2; color: #fff; }
.button.hover-blue:hover { background: #1a4ea2; color: #fff; }


.button svg.icon {
  	display: inline-block;
  	position: relative;
  	vertical-align: middle;
  	height: 1.4em;
	}



.intext-button {
  	display: inline-block;
  	position: relative;
  	vertical-align: middle;
  	cursor: pointer;
  	border-radius: 0.2vw;
  	background: #ccc;
  	line-height: 120%;
  	text-align: center;
  	color: #444;
  	padding: 0px 0.5em 0.05em;
	}
.intext-button.green { background: #1b9e32; color: #fff; }
.intext-button.hover-red:hover { background: #bb0000; color: #fff; }
.intext-button.hover-green:hover { background: #1b9e32; color: #fff; }



a.button {
  	text-decoration: none;
	}







.hover-underlined { text-decoration: none; }
.hover-underlined:hover { text-decoration: underline; }


form {
  	display: block;
  	position: relative;
  	font-size: 100%;
	}
input[type="text"] {
    display: inline-block;
    position: relative;
    vertical-align: top;
    box-sizing: border-box;
    border: 2px solid #ccc;
    font-size: 100%;
    line-height: 2.2em;
    padding-left: 1vw;
    outline: 0;
    width: 100%;
    font-style: normal;
  	font-weight: 300;
  	font-family: "Lato","Arial";
    }
input[type="text"]:focus {
    border: 2px solid #444;
    }

.imaged input[type="text"] {
  	border: 2px solid #fff;
  	background: rgba(0,0,0,0.0);
  	color: #ff0;
	}
.imaged input[type="text"]::placeholder {
  	color: #ddd;
  	font-weight: 300;
  	font-style: italic;
  	filter: none;
	}




@media screen and (max-aspect-ratio: 10/9) and (max-width: 5in) {
    /* мобильная версия */
    input[type="text"] {
    	border: 0.5vw solid #ccc;
      	padding-left: 2.5vw;
      	line-height: 2.5em;
  		}
  	input[type="text"]:focus {
        border: 2px solid #000000;
        }
    }
@media screen and (max-aspect-ratio: 10/9) and (min-width: 5in) {
    /* планшетная */
    input[type="text"] {
    	border: 0.5vw solid #ccc;
      	padding-left: 2.5vw;
      	line-height: 3.5em;
  		}
  	input[type="text"]:focus {
        border: 2px solid #000000;
        }
    }


textarea {
    display: block;
    position: relative;
    width: 100%;
    padding: 0.3vw 1vw;
    box-sizing: border-box;
    color: #000;
    width: 100%;
    max-width: 100%;
    min-width: 100%;
    background: #fff;
    border: 2px solid #ccc;
    font-size: 100%;
    line-height: 1.5em;
    font-style: normal;
  	font-weight: 300;
    outline: 0;
  	font-family: "Lato","Arial";
    }    
textarea:focus {
    border: 2px solid #000000;
    }
@media screen and (min-aspect-ratio: 1/99999) and (max-aspect-ratio: 10/9) {
    /* мобильная версия */
  	textarea {
    	border: 2px solid #ccc;
      	padding: 2vw 0vw 2vw 2.5vw;
  		}
  	textarea:focus {
        border: 2px solid #444;
        }
    }

.imaged textarea {
  	border: 2px solid #fff;
  	background: rgba(0,0,0,0.0);
  	color: #ff0;
	}
.imaged textarea::placeholder {
  	color: #ddd;
  	font-weight: 300;
  	font-style: italic;
  	filter: none;
	}





select {
  	font-size: 100%;
    width: 100%;
    border: 0.17vw solid #ccc;
    outline: 0;
    border-radius: 1px;
    height: 2.4em;
    padding-left: 0.3vw;
    cursor: pointer;
  	font-weight: 300;
  	font-family: "Lato","Arial";
	}
select:focus {
    border: 0.17vw solid #000000;
    }

@media screen and (min-aspect-ratio: 1/99999) and (max-aspect-ratio: 10/9) {
    /* мобильная версия */
  	select {
        height: 9vw;
      	border: 0.5vw solid #eee;
        }
    }























.title {
  	font-family: 'Futura PT Book';
  	text-transform: uppercase;
	}











.underlogo-separator {
    display: inline-block;
    position: relative;
    height: 0.4vw;
    width: 8vw;
    background: #fff;
  	
	}


@media screen and (min-aspect-ratio: 1/99999) and (max-aspect-ratio: 10/9) {
    /* мобильная версия */
    .underlogo-separator {
        display: inline-block;
        position: relative;
        height: 1.5vw;
        width: 40vw;
        }
    }
@media screen and (min-aspect-ratio: 10/9) {
  	/* альбомная версия */
    .underlogo-separator {
        display: inline-block;
        position: relative;
        height: 0.4vw;
        width: 8vw;
        }
    }




@media screen and (min-aspect-ratio: 1/99999) and (max-aspect-ratio: 10/9) {
    /* мобильная версия */
    .m-text-center { text-align: center; }
  	.m-text-right { text-align: right; }
    }


@media screen and (min-aspect-ratio: 10/9) {
    .l-text-center { text-align: center; }
  	.l-text-right { text-align: right; }
    }












table {
    width: 100%;
    border: 0px;
    line-height: 200%;
  	border: 1px solid #bbb;
    }    
table td {
    padding: 0px 0.3vw;
    }
@media screen and (min-aspect-ratio: 1/99999) and (max-aspect-ratio: 10/9) {
    /* мобильная версия */
  	table td {
        padding: 0px 1vw;
        }
    }
table tr:nth-child(2n-1) td {
    background: #eee;
    }
table tr:nth-child(2n) td {
    background: #FEFEFE;
    }
table th {
  	font-weight: normal;
    background: #bbb;
    }
table[data-marker-row="2"] tr:nth-child(2) td { background: #FFFF99; }
table[data-marker-row="3"] tr:nth-child(3) td { background: #FFFF99; }
table[data-marker-row="4"] tr:nth-child(4) td { background: #FFFF99; }
table[data-marker-row="5"] tr:nth-child(5) td { background: #FFFF99; }
table[data-marker-row="6"] tr:nth-child(6) td { background: #FFFF99; }
table[data-marker-row="7"] tr:nth-child(7) td { background: #FFFF99; }


/* ========================================================================================================== */
/* ================= ЭЛЕМЕНТЫ =============================================================================== */
/* ========================================================================================================== */



.products-filters-wrap {
  
  
	}


.filter-checkbox {
  	display: inline-block;
    position: relative;
    vertical-align: top;
    min-width: 50%;
    cursor: pointer;
    color: #666;
    box-sizing: border-box;
    padding-right: 0.5vw;
    padding-left: 3.4vmin;
    font-size: 90%;
    line-height: 120%;
    padding-top: 0.3vw;
    padding-bottom: 0.3vw;
	}
@media screen and (min-aspect-ratio: 1/99999) and (max-aspect-ratio: 10/9) {
    /* мобильная версия */
  	.filter-checkbox {
      	padding-left: 6.4vmin;
        font-size: 110%;
        }
    }



.filter-checkbox[data-checked="true"] {
	
	}
.filter-checkbox:hover {
  	text-decoration: underline;
	}
.filter-checkbox:before {
    content: " ";
  	display: block;
  	position: absolute;
  	left: 0px;
  	top: 50%;
  	width: 2.5vmin;
    height: 2.5vmin;
  	background: #f7f7f7;
  	border: 1px solid #ccc;
  	transform: translateX(0%) translateY( -50%);
  
  
  	-ms-transform: translate(0%,-50%);
    -o-transform: translate(0%,-50%);
    -webkit-transform: translate(0%,-50%);
    -moz-transform: translate(0%,-50%);
    transform: translateX(0%) translateY(-50%);
    }
@media screen and (min-aspect-ratio: 1/99999) and (max-aspect-ratio: 10/9) {
    /* мобильная версия */
  	.filter-checkbox:before {
        content: " ";
        width: 4.5vmin;
        height: 4.5vmin;
        }
    }



.filter-checkbox[data-checked="true"]:after {
    content: " ";
    display: block;
    position: absolute;
    left: 0.2vw;
    top: 54%;
    width: 3vmin;
    height: 3vmin;
    background-image: url(/assets/img/style/icons/checkbox/checked.png);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    transform: translateX(0%) translateY( -50%);
    filter: drop-shadow( 1px 1px 1px rgba(0,0,0,0.3) );
    }

.filter-checkbox[data-checked="true"] span {
	color: #000;
	}
.filter-checkbox[data-checked="true"]:after {
    content: " ";
    display: block;
    position: absolute;
    left: 0px;
    top: 54%;
    width: 3vmin;
    height: 3vmin;
    background-image: url(/assets/img/style/icons/checkbox/checked.png);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    
  	-ms-transform: translate(0%,-50%);
    -o-transform: translate(0%,-50%);
    -webkit-transform: translate(0%,-50%);
    -moz-transform: translate(0%,-50%);
    transform: translateX(0%) translateY(-50%);
    filter: drop-shadow( 1px 1px 1px rgba(0,0,0,0.3) );
	}
@media screen and (min-aspect-ratio: 1/99999) and (max-aspect-ratio: 10/9) {
    /* мобильная версия */
  	.filter-checkbox[data-checked="true"]:after {
        width: 5.5vmin;
        height: 5.5vmin;
        }
    }


.filters-group {
  	user-select: none;
  	border-top: 1px dashed #bbb;
	}

.filters-group.show-hide[data-state="closed"] .filters-list .filter-checkbox {
  	display: none;
	}
.filters-group.show-hide[data-state="closed"] .filters-list .filter-checkbox[data-checked="true"] {
  	display: inline-block;
	}
.filters-group.show-hide[data-state="closed"][data-checked-count="0"] .filters-list {
  	display: none;
	}
.filters-group.show-hide[data-state="opened"] .filters-list {
  	display: block;
	}
.show-hide-corner-button {
  	display: block;
    position: absolute;
    right: 1.5vmin;
    top: 50%;
    height: 3vmin;
    width: 3vmin;
    cursor: pointer;
    text-align: center;
    background: #444;
    color: #FFF;
    text-decoration: none;
    box-shadow:  inset 0px 0px 2px rgba(0,0,0,0.3), inset 0 1px rgba(255,255,255,0.3), inset 0 4px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -2px 6px rgba(0,0,0,0.07);
  	-ms-transform: translate(0%, -50%);
    -o-transform: translate(0%, -50%);
    -webkit-transform: translate(0%, -50%);
    -moz-transform: translate(0%, -50%);
    transform: translateX(0%) translateY(-50%);
	}
.show-hide-corner-button:hover {
  	background: #83b284;
    color: #FFF;
	}
.filters-group[data-state="closed"] .show-hide-corner-button:before {
  	content: "+";
	display: block;
  	position: absolute;
  	left: 50%;
  	top: 48%;
  	font-size: 100%;
  
  	-ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    transform: translateX(-50%) translateY(-50%);
  	filter: drop-shadow( 0px 0px 1px rgba(0,0,0,0.4) );
	}
.filters-group[data-state="opened"] .show-hide-corner-button:before {
  	content: "-";
	display: block;
  	position: absolute;
  	left: 50%;
  	top: 45%;
  	font-size: 100%;
  
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    transform: translateX(-50%) translateY(-50%);
  	filter: drop-shadow( 1px 1px 1px rgba(0,0,0,0.2) );
	}


@media screen and (min-aspect-ratio: 1/99999) and (max-aspect-ratio: 10/9) {
    /* мобильная версия */
  	.show-hide-corner-button {
        right: 0vw;
        top: 50%;
        height: 7vw;
        width: 7vw;
        }
    }





#go-filter-button-wrap {
  	display: block;
  	position: fixed;
  	left: 0px;
  	top: 100%;
 	width: 100%;
  	background: #fff;
  	opacity: 0;
	}
#go-filter-button-wrap[data-state="in"] {
  	opacity: 1;
  	z-index: 1;
  	border-bottom: 1px solid #ccc;
    box-shadow: 0px 0px 1vmin rgb(0,0,0,0.3);
  	
  	-ms-transform: translate(0%, -100%);
    -o-transform: translate(0%, -100%);
    -webkit-transform: translate(0%, -100%);
    -moz-transform: translate(0%, -100%);
    transform: translateX(0%) translateY(-100%);
	}


/* =================================================================================================================================== */


.tabs-control {
  	display: block;
  	position: relative;
	}
.tabs-control .tabs-row {
  	display: block;
  	position: relative;
  	overflow-x: auto;
  	white-space: nowrap;
  	padding: 0.2vw 2vw 0px 2vw;
  	text-align: center;
  
  	/* border-bottom: 2px solid #1a4ea2; */
  	box-shadow: inset 0px -2px 0px #444;
	}
@media screen and (min-aspect-ratio: 1/99999) and (max-aspect-ratio: 10/9) {
    /* портретная */
  	.tabs-control .tabs-row {
        padding: 1vw 2vw 0px 2vw;
        }
  	.tabs-control .tabs-row::-webkit-scrollbar {display:none;}
	}

  
.tabs-control .tabs-row .tab-padder {
  	display: inline-block;
  	position: relative;
  	cursor: pointer;
  	padding: 0.2vw 0.1vw 0px 0.1vw;
  	}
@media screen and (min-aspect-ratio: 1/99999) and (max-aspect-ratio: 10/9) {
    /* портретная */
  	.tabs-control .tabs-row .tab-padder {
        padding: 1vw 1vw 0px 1vw;
        }
	}

.tabs-control .tabs-row .tab-padder .tab {
  	display: block;
  	position: relative;
  	cursor: pointer;
  	padding: 0.5vw 1vw 1vw 1vw;
  	}
  
.tabs-control .tabs-row .tab-padder .tab[data-selected="true"] {
  	box-shadow: -2px -2px 0px #444, 2px -2px 0px #444;
  	border-bottom: 2px solid #fff;
  	}
  
.tabs-control .tabs-row .tab-padder .tab[data-selected="false"] {
  	box-shadow: -2px -2px 0px #ddd, 2px -2px 0px #ddd;
  	border-bottom: 2px solid #444;
  	}
  
.tabs-control .tabs-row .tab-padder .tab:hover {
  	color: #fff;
  	background: #1a4ea2;
  	border-bottom: 2px solid #1a4ea2;
  	}
  
.tabs-control .tabs-contents {
  	display: block;
  	position: relative;
	}
.tabs-control .tabs-contents .tab-content {
  	display: none;
  	position: relative;
	}

/* =================================================================================================================================== */

.color-selector-wrap {
  	display: block;
  	position: relative;
	}



.color-selector-wrap .color-selector {
  	display: block;
  	position: relative;
  	background: #fff;
  	white-space: nowrap;
     overflow-x: scroll;
	}
.color-selector-wrap .color-selector::-webkit-scrollbar {display:none;}


.color-selector-wrap .color-selector .color-wrap {
    display: inline-block;
    vertical-align: top;
  	cursor: pointer;
    }
@media screen and (min-aspect-ratio: 1/99999) and (max-aspect-ratio: 10/9) {
    /* портретная */
  	.color-selector-wrap .color-selector .color-wrap {
        width: 17vw;
        }
	}
@media screen and (min-aspect-ratio: 10/9) {
  	/* альбомная версия */
  	.color-selector-wrap .color-selector .color-wrap {
        width: 6vw;
        }
	}


.color-selector-wrap .color-selector .color-wrap .circle {
  	display: block;
  	position: relative;
  	padding-bottom: 100%;
  	border-radius: 100vmax;
	}
.color-selector-wrap .color-selector .color-wrap .circle .color-circle {
  	display: block;
  	position: absolute;
  	left: 0px;
  	top: 0px;
  	width: 100%;
  	height: 100%;
  	border-radius: 100vmax;
  	border: 2px solid #ddd;
  	box-sizing: border-box;
	}
.color-selector-wrap .color-selector .color-wrap[data-selected="true"] .circle .color-circle {
  	border: 2px solid #fdb613;
	}

.color-selector-wrap .color-selector .color-wrap .circle .color-circle .color-sample {
  	display: block;
  	position: absolute;
  	left: 0px;
  	top: 0px;
  	width: 100%;
  	height: 100%;
  	border-radius: 100vmax;
  	border: 2px solid #fff;
  	box-sizing: border-box;
	}

.color-selector-wrap .color-selector .color-wrap .color-caption {
    text-align: center; 
  	white-space: normal;
  	word-break: break-word;
  	}

@media screen and (min-aspect-ratio: 1/99999) and (max-aspect-ratio: 10/9) {
    /* портретная */
  	.color-selector-wrap .color-selector .color-wrap {
        
        }
  	.color-selector-wrap .color-selector .color-wrap .color-caption {
      	display: none;
  		}
	}
@media screen and (min-aspect-ratio: 10/9) {
  	/* альбомная версия */
  	
  	
  	.color-selector-wrap .color-selector .color-wrap .color-caption {
      	font-size: 80%;
      	line-height: 100%;
  		}
	}




.color-selector-wrap .scroll-button-wrap {
  	display: block;
  	position: absolute;
  	cursor: pointer;
	}
@media screen and (min-aspect-ratio: 1/99999) and (max-aspect-ratio: 10/9) {
    /* портретная */
  	.color-selector-wrap .scroll-button-wrap {
        display: none;
        }
	}
.color-selector-wrap .scroll-button-wrap .scroll-button {
  	display: block;
  	position: absolute;
  	left: 50%;
  	top: 50%;
  	width: 2vw;
  	height: 2vw;
  	background: #1a4ea2;
  	border-radius: 99vw;
  	-ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    transform: translateX(-50%) translateY(-50%);
	}
.color-selector-wrap .scroll-button-wrap .scroll-button:after {
  	display: block;
  	position: absolute;
  	left: 50%;
  	top: 40%;
  	color: #fff;
  	line-height: 100%;
  	-ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    transform: translateX(-50%) translateY(-50%);
	}
.color-selector-wrap .scroll-button-wrap.left .scroll-button:after {
    content: "«";
	}
.color-selector-wrap .scroll-button-wrap.right .scroll-button:after {
    content: "»";
	}
@media screen and (min-aspect-ratio: 1/99999) and (max-aspect-ratio: 10/9) {
    /* портретная */
  	
	}
@media screen and (min-aspect-ratio: 10/9) {
  	/* альбомная версия */
  	.color-selector-wrap .scroll-button-wrap.left {
        left: -3vw;
      	top: 0px;
      	height: 100%;
      	width: 4vw;
      	/* background: rgba(0,0,0,0.2); */
        }
  	.color-selector-wrap .scroll-button-wrap.right {
        right: -3vw;
      	top: 0px;
      	height: 100%;
      	width: 4vw;
      	/* background: rgba(0,0,0,0.2); */
        }
  	
  
  	
	}



/* =================================================================================================================================== */

footer {
  	text-shadow: 1px 1px 1px #000;
	}

footer svg.icon {
  	/* filter: drop-shadow(1px 1px 1px #000); */
  	stroke-width: 40;
  	fill: none;
    stroke: rgba(255,255,255,0.3);
	}


/* =================================================================================================================================== */

.loading-animation {
  	display: inline-block;
  	position: relative;
  	width: 80px;
  	height: 80px;
	}
.loading-animation div {
  	animation: lds-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  	transform-origin: 40px 40px;
	}
.loading-animation div:after {
    content: " ";
    display: block;
    position: absolute;
  	width: 7px;
  	height: 7px;
  	border-radius: 50%;
  	background: #fff;
  	margin: -4px 0 0 -4px;
	}

.loading-animation.black div:after { background: #000; }
.loading-animation.white div:after { background: #fff; }

.loading-animation div:nth-child(1) { animation-delay: -0.036s; }
.loading-animation div:nth-child(1):after { top: 63px; left: 63px;}

.loading-animation div:nth-child(2) { animation-delay: -0.072s; }
.loading-animation div:nth-child(2):after { top: 68px; left: 56px; }

.loading-animation div:nth-child(3) { animation-delay: -0.108s; }
.loading-animation div:nth-child(3):after { top: 71px; left: 48px; }

.loading-animation div:nth-child(4) { animation-delay: -0.144s; }
.loading-animation div:nth-child(4):after { top: 72px; left: 40px; }

.loading-animation div:nth-child(5) { animation-delay: -0.18s; }
.loading-animation div:nth-child(5):after { top: 71px; left: 32px; }

.loading-animation div:nth-child(6) { animation-delay: -0.216s; }
.loading-animation div:nth-child(6):after { top: 68px; left: 24px; }

.loading-animation div:nth-child(7) { animation-delay: -0.252s; }
.loading-animation div:nth-child(7):after { top: 63px; left: 17px; }

.loading-animation div:nth-child(8) { animation-delay: -0.288s; }
.loading-animation div:nth-child(8):after { top: 56px; left: 12px; }

@keyframes lds-roller {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
	}




/* =================================================================================================================================== */

.roll-in-popup {
  	display: block;
  	position: fixed;
  	background: #fff;
  	z-index: 10;
  	width: 100vw;
  
  	-o-transition-property: top;
    -webkit-transition-property: top;
    -moz-transition-property: top;
    transition-property: top;

    -o-transition-duration: 0.2s;
    -webkit-transition-duration: 0.2s;
    -moz-transition-duration: 0.2s;
    transition-duration: 0.2s;
	}

.roll-in-popup .content {
  	display: block;
  	position: relative;
  	width: 100%;
  	height: 100%;
  	overflow-x: hidden;
  	overflow-y: auto;
	}

.roll-in-popup .close {
  	display: block;
    position: absolute;
  	cursor: pointer;
  	z-index: 100;
  	background: #Fff;
	}
.roll-in-popup .close svg.icon {
  	display: block;
  	position: absolute;
  	left: 0px;
  	top: 0px;
  	width: 100%;
  	height: 100%;
	}
.roll-in-popup .close svg.icon g {
    fill: none;
    stroke: #222;
    stroke-width: 40;
	}
.roll-in-popup .close:hover svg.icon g { stroke-width: 80; }



@media screen and (max-aspect-ratio: 10/9) and (max-width: 5in) {
    /* мобильная версия */
    .roll-in-popup {
      	top: 20vw;
      	height: calc(100% - 20vw);
  		}
  	.roll-in-popup[data-state="hidden"] { top: 100vh; }
  	.roll-in-popup[data-state="visible"] { top: 20vw; opacity: 1; }
  	.roll-in-popup .close {
        right: 5vw;
        top: 6vw;
        width: 10vw;
        height: 10vw;
    	}
    }
@media screen and (max-aspect-ratio: 10/9) and (min-width: 5in) {
    /* портретная */
    .roll-in-popup {
      	top: 13vw;
      	height: calc(100% - 13vw);
  		}
  	.roll-in-popup[data-state="hidden"] { top: 100vh; }
  	.roll-in-popup[data-state="visible"] { top: 13vw; opacity: 1; }
  	.roll-in-popup .close {
        right: 4vw;
        top: 6vw;
        width: 6vw;
    	height: 6vw;
    	}
    }

@media screen and (min-aspect-ratio: 10/9) and (max-aspect-ratio: 15/9) {
    /* 3x4 */
    
  	.roll-in-popup {
      	top: 5vw;
      	height: calc(100% - 5vw);
  		}
  	.roll-in-popup[data-state="hidden"] { top: 100vh; }
  	.roll-in-popup[data-state="visible"] { top: 5vw; opacity: 1; }
  	
  	.roll-in-popup .close {
      	right: 2vw;
      	top: 1vw;
      	width: calc(100vw/25);
      	height: calc(100vw/25);
  		}
  	
    }
@media screen and (min-aspect-ratio: 15/9) {
    /* 16x9 */
  	.roll-in-popup {
      	top: 4vw;
      	height: calc(100% - 4vw);
      	width: 100vw;
  		}
  	.roll-in-popup[data-state="hidden"] { top: 100vh; }
  	.roll-in-popup[data-state="visible"] { top: 4vw; opacity: 1; }
  	
  	.roll-in-popup .close {
      	right: 2vw;
      	top: 1vw;
      	width: calc(80vw/25);
      	height: calc(80vw/25);
  		}
  	
  
    }