/*
    Kubik - developed by Sergei Russak
    sergeirussak@gmail.com
    - - - - - - - - - - - - - - - - 
    This code is copyrighted
    This code is the property of Sergei Russak


    Kubik v0.2.0

*/

:root{
	--right-side-fix-block-width: 300px;
	--left-side-fix-block-width: 300px;
	--modal-width: 600px;
	--modal-min-height: 150px;
}

*{
	margin: 0px;
	padding: 0px;
	outline: 0px;
	border: 0px;
	-webkit-font-smoothing: antialiased;
  	-moz-osx-font-smoothing: grayscale;
  	font-family: sans-serif;
}

body,
html{
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	background-color: #FFF;
	font-size: 10px;
	-ms-text-size-adjust: 100%; /* 2 */
  	-webkit-text-size-adjust: 100%; /* 2 */
  	font-family: 'Open Sans', sans-serif;
}

body:after,
html:after{
	display: table;
	clear: both;
	content: ''; 
}

div,
header,
main,
nav,
footer,
article,
section,
pre,
p,
h1,
h2,
h3,
h4,
h5,
h6,
dl,
blockquote,
form{
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	display: block;
}

/* Typography
–––––––––––––––––––––––––––––––––––––––––––––––––– */
h1,
h2,
h3,
h4,
h5,
h6{
	width: 100%;
}

h1{
	font-size: 4.1rem;
	line-height: 4.1rem;
	font-weight: 200;
	width: 100%;
}

h1.title{
	font-size: 6rem;
	line-height: 6rem;
	font-weight: 400;
}

span.h1_description{
	font-size: 1.5rem;
	line-height: 2.1rem;
}

h2{
	font-size: 3.6rem;
	line-height: 3.6rem;
	font-weight: 200;
}

h3{
	font-size: 2.4rem;
	line-height: 2.4rem;
	font-weight: 200;
}

h4{
	font-size: 2.1rem;
	line-height: 2.1rem;
	font-weight: 600;
}

h5{
	font-size: 1.8rem;
	line-height: 1.8rem;
	font-weight: 600;
}

h6{
	font-size: 1.6rem;
	line-height: 1.6rem;
	font-weight: 600;
}

html p{
	font-size: 1.4rem;
	line-height: 2rem;
	padding: 12px 0px;
	width: 100%;
}

p.small{
	font-size: 1.2rem;
	line-height: 2rem;
	padding: 12px 0px;
	width: 100%;
}

p.big{
	font-size: 1.6rem;
	line-height: 2.4rem;
	padding: 12px 0px;
	width: 100%;
}

p.large{
	font-size: 1.8rem;
	line-height: 2.6rem;
	padding: 12px 0px;
	width: 100%;
}

p.lead{
	font-size: 1.7rem;
}

p.author{
	font-size: 1.3rem;
	color: #989898;
}

ul,
ol{
	margin-left: 30px;
	font-size: 1.4rem;
}

li{
	list-style-position: outside;
	padding: 2px 0px;
}

ol{
	list-style: decimal-leading-zero;
}

ol ol{
	list-style: lower-alpha;
}

ol ol ol{
	list-style: lower-roman;
}

ul{
	list-style: disc;
}

ul ul{
	list-style: circle;
}

ul ul ul{
	list-style: square;
}

li ol,
li ul{
	margin-left: 30px;
}

ul.unstyled,
ol.unstyled{
	list-style: none;
}

ul.unstyled ul,
ol.unstyled ol{
	list-style: none;
}

ul.unstyled ul ul,
ol.unstyled ol ol{
	list-style: none;
}

dl{}

dl > dt{
	font-size: 1.6rem;
	font-weight: 600;
	line-height: 2.4rem;
}

dl > dd{
	font-size: 1.4rem;
	line-height: 2rem;
	padding-left: 15px;
	padding-bottom: 5px;
}


abbr, /* аббревиатура */
var, /* переменная */
kbd, /* сочетани клавишь */
i, /* italic */
strong, /* strong */
sup, /*под*/
sub, /*над*/
small, /* текст меньшего размера */
samp, /* пример */
mark, /* выделение */
em, /* выделенный */
b, /* жирный */
ins, /* вставленный */
code,
del{ /* удаленный/зачеркнутый */
	font-size: inherit;
}



abbr{ /* аббревиатура */
	cursor: help;
}
var{ /* переменная */
	color: #999999;
	font-weight: 600;
}
kbd{ /* сочетани клавишь */
	padding: 3px 5px;
	background-color: #ededed;
	border: 1px solid #d3d3d3;
}
code{
	padding: 3px 5px;
	color: #696969;
	background-color: #ededed;
	font-family: monospace;
}
i{ /* italic */
}
strong{ /* strong */
}
sup{ /*под*/
	font-size: x-small;
	font-weight: bold;
}
sub{ /*над*/
	font-size: x-small;
	font-weight: bold;
}
small{ /* текст меньшего размера */
	font-size: small;
}
small.smaller{
	font-size: x-small;
}
small.more-smaller{
	font-size: xx-small;
}
samp{ /* пример */
	background-color: rgb(28, 134, 242);
	padding: 3px 5px;
	color: #FFF;
	font-weight: bold;
	font-family: inherit;
	font-style: italic;
}
mark{ /* выделение */
	background-color: rgb(247, 186, 69);
	padding: 3px 5px;
}
em{ /* выделенный */
}
b{ /* жирный */
}
ins{ /* вставленный */
}
del{ /* удаленный/зачеркнутый */
}


pre > code{
	color: #0f0f0f;
	font-size: 1.4rem;
	line-height: 1.4;
	background-color: transparent;
	font-family: monospace !important;
}

/*disc
circle
square
decimal
decimal-leading-zero
lower-roman
upper-roman
lower-greek
lower-latin
upper-latin
armenian
georgian
lower-alpha
upper-alpha
none*/



/* Grid
–––––––––––––––––––––––––––––––––––––––––––––––––– */


.row,
.block,
.conteiner{
	width: 100%;
	height: auto;
	float: left;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}

.conteiner{
	float: none;
	max-width: 90%;
	width: 1100px;
	margin-left: auto;
	margin-right: auto;
}

.full-window-conteiner{
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}

.block:after,
.row:after,
.conteiner:after{
	display: table;
	clear: both;
	content: ''; 
}

pre,
pre > code{
	width: 100%;
	max-width: 100%;
	height: auto;
	float: left;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	white-space: pre-wrap;       /* css-3 */
	white-space: -moz-pre-wrap;  /* Mozilla, с 1999 */
	white-space: -pre-wrap;      /* Opera 4-6 */
	white-space: -o-pre-wrap;    /* Opera 7 */
	word-wrap: break-word;
}

pre,
pre > code:after{
	display: table;
	clear: both;
	content: ''; 
}


.col{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}

.col.col1,
.col.col2,
.col.col3,
.col.col4,
.col.col5,
.col.col6,
.col.col7,
.col.col8,
.col.col9,
.col.col10,
.col.col11,
.col.col12{
	width: 100%;
}

@media (min-width: 768px){

	.col.col1{
		width: 8.333333%;
	}
	.col.col2{
		width: 16.666666%;
	}
	.col.col3{
		width: 25%;
	}
	.col.col4{
		width: 33.333333%;
	}
	.col.col5{
		width: 41.666667%;
	}
	.col.col6{
		width: 50%;
	}
	.col.col7{
		width: 58.333333%;
	}
	.col.col8{
		width: 66.666667%;
	}
	.col.col9{
		width: 75%;
	}
	.col.col10{
		width: 83.333334%;
	}
	.col.col11{
		width: 91.666667%;
	}
	.col.col12{
		width: 100%; 
	}


}


@media (min-width: 960px){

	.col.col1{
		width: 8.333333%;
	}
	.col.col2{
		width: 16.666666%;
	}
	.col.col3{
		width: 25%;
	}
	.col.col4{
		width: 33.333333%;
	}
	.col.col5{
		width: 41.666667%;
	}
	.col.col6{
		width: 50%;
	}
	.col.col7{
		width: 58.333333%;
	}
	.col.col8{
		width: 66.666667%;
	}
	.col.col9{
		width: 75%;
	}
	.col.col10{
		width: 83.333334%;
	}
	.col.col11{
		width: 91.666667%;
	}
	.col.col12{
		width: 100%; 
	}


}

@media (min-width: 1128px){

	.col.col1{
		width: 8.333333%;
	}
	.col.col2{
		width: 16.666666%;
	}
	.col.col3{
		width: 25%;
	}
	.col.col4{
		width: 33.333333%;
	}
	.col.col5{
		width: 41.666667%;
	}
	.col.col6{
		width: 50%;
	}
	.col.col7{
		width: 58.333333%;
	}
	.col.col8{
		width: 66.666667%;
	}
	.col.col9{
		width: 75%;
	}
	.col.col10{
		width: 83.333334%;
	}
	.col.col11{
		width: 91.666667%;
	}
	.col.col12{
		width: 100%; 
	}


}



/*

	s - >768
	m - 768 > 960
	l - 960 > 1128
	xl - 1128 > 

 */

.col.col-s-1{
	width: 8.333333%;
}
.col.col-s-2{
	width: 16.666666%;
}
.col.col-s-3{
	width: 25%;
}
.col.col-s-4{
	width: 33.333333%;
}
.col.col-s-5{
	width: 41.666667%;
}
.col.col-s-6{
	width: 50%;
}
.col.col-s-7{
	width: 58.333333%;
}
.col.col-s-8{
	width: 66.666667%;
}
.col.col-s-9{
	width: 75%;
}
.col.col-s-10{
	width: 83.333334%;
}
.col.col-s-11{
	width: 91.666667%;
}
.col.col-s-12{
	width: 100%;
}


@media (min-width: 768px){

	.col.col-m-1{
		width: 8.333333%;
	}
	.col.col-m-2{
		width: 16.666666%;
	}
	.col.col-m-3{
		width: 25%;
	}
	.col.col-m-4{
		width: 33.333333%;
	}
	.col.col-m-5{
		width: 41.666667%;
	}
	.col.col-m-6{
		width: 50%;
	}
	.col.col-m-7{
		width: 58.333333%;
	}
	.col.col-m-8{
		width: 66.666667%;
	}
	.col.col-m-9{
		width: 75%;
	}
	.col.col-m-10{
		width: 83.333334%;
	}
	.col.col-m-11{
		width: 91.666667%;
	}
	.col.col-m-12{
		width: 100%;
	}

}

@media (min-width: 960px){

	.col.col-l-1{
		width: 8.333333%;
	}
	.col.col-l-2{
		width: 16.666666%;
	}
	.col.col-l-3{
		width: 25%;
	}
	.col.col-l-4{
		width: 33.333333%;
	}
	.col.col-l-5{
		width: 41.666667%;
	}
	.col.col-l-6{
		width: 50%;
	}
	.col.col-l-7{
		width: 58.333333%;
	}
	.col.col-l-8{
		width: 66.666667%;
	}
	.col.col-l-9{
		width: 75%;
	}
	.col.col-l-10{
		width: 83.333334%;
	}
	.col.col-l-11{
		width: 91.666667%;
	}
	.col.col-l-12{
		width: 100%;
	}
	
}


@media (min-width: 1128px){

	.col.col-xl-1{
		width: 8.333333%;
	}
	.col.col-xl-2{
		width: 16.666666%;
	}
	.col.col-xl-3{
		width: 25%;
	}
	.col.col-xl-4{
		width: 33.333333%;
	}
	.col.col-xl-5{
		width: 41.666667%;
	}
	.col.col-xl-6{
		width: 50%;
	}
	.col.col-xl-7{
		width: 58.333333%;
	}
	.col.col-xl-8{
		width: 66.666667%;
	}
	.col.col-xl-9{
		width: 75%;
	}
	.col.col-xl-10{
		width: 83.333334%;
	}
	.col.col-xl-11{
		width: 91.666667%;
	}
	.col.col-xl-12{
		width: 100%;
	}
	
}



.row.auto > .col{
	flex-grow: unset;
	width: 100%;
}
.row.gaps{
	width: 100%;
	margin-left: 0px;
}

.row.gaps > .col{
	margin-left: 0px;
}

.row.gaps > .col.col1,
.row.gaps > .col.col2,
.row.gaps > .col.col3,
.row.gaps > .col.col4,
.row.gaps > .col.col5,
.row.gaps > .col.col6,
.row.gaps > .col.col7,
.row.gaps > .col.col8,
.row.gaps > .col.col9,
.row.gaps > .col.col10,
.row.gaps > .col.col11,
.row.gaps > .col.col12{
	width: 100%;
}




.row > .col.offset1,
.row > .col.offset2,
.row > .col.offset3,
.row > .col.offset4,
.row > .col.offset5,
.row > .col.offset6,
.row > .col.offset7,
.row > .col.offset8,
.row > .col.offset9,
.row > .col.offset10,
.row > .col.offset11,
.row.gaps > .col.offset1,
.row.gaps > .col.offset2,
.row.gaps > .col.offset3,
.row.gaps > .col.offset4,
.row.gaps > .col.offset5,
.row.gaps > .col.offset6,
.row.gaps > .col.offset7,
.row.gaps > .col.offset8,
.row.gaps > .col.offset9,
.row.gaps > .col.offset10,
.row.gaps > .col.offset11{
	margin-left: 0px;
}


@media (min-width: 768px){

	.row.auto > .col{
		flex-grow: 1;
		width: auto;
	}

	.row.gaps{
		width: 102%;
		margin-left: -2%
	}

	.row.gaps > .col{
		margin-left: 2%;
	}

	.row.gaps > .col.col1{
		width: calc( 8.333333% - 2%);
	}
	.row.gaps > .col.col2{
		width: calc( 16.666666% - 2%);
	}
	.row.gaps > .col.col3{
		width: calc( 25% - 2%);
	}
	.row.gaps > .col.col4{
		width: calc( 33.333333% - 2%);
	}
	.row.gaps > .col.col5{
		width: calc( 41.666667% - 2%);
	}
	.row.gaps > .col.col6{
		width: calc( 50% - 2%);
	}
	.row.gaps > .col.col7{
		width: calc( 58.333333% - 2%);
	}
	.row.gaps > .col.col8{
		width: calc( 66.666667% - 2%);
	}
	.row.gaps > .col.col9{
		width: calc( 75% - 2%);
	}
	.row.gaps > .col.col10{
		width: calc( 83.333334% - 2%);
	}
	.row.gaps > .col.col11{
		width: calc( 91.666667% - 2%);
	}
	.row.gaps > .col.col12{
		width: calc( 100% - 2%);
	}




	.row > .col.offset1{
		margin-left: 8.333333%;
	}
	.row > .col.offset2{
		margin-left: 16.666666%;
	}
	.row > .col.offset3{
		margin-left: 25%;
	}
	.row > .col.offset4{
		margin-left: 33.333333%;
	}
	.row > .col.offset5{
		margin-left: 41.666667%;
	}
	.row > .col.offset6{
		margin-left: 50%;
	}
	.row > .col.offset7{
		margin-left: 58.333333%;
	}
	.row > .col.offset8{
		margin-left: 66.666667%;
	}
	.row > .col.offset9{
		margin-left: 75%;
	}
	.row > .col.offset10{
		margin-left: 83.333334%;
	}
	.row > .col.offset11{
		margin-left: 91.666667%;
	}


	.row.gaps > .col.offset1{
		margin-left: calc(8.333333% + 2%);
	}
	.row.gaps > .col.offset2{
		margin-left: calc(16.666666% + 2%);
	}
	.row.gaps > .col.offset3{
		margin-left: calc(25% + 2%);
	}
	.row.gaps > .col.offset4{
		margin-left: calc(33.333333% + 2%);
	}
	.row.gaps > .col.offset5{
		margin-left: calc(41.666667% + 2%);
	}
	.row.gaps > .col.offset6{
		margin-left: calc(50% + 2%);
	}
	.row.gaps > .col.offset7{
		margin-left: calc(58.333333% + 2%);
	}
	.row.gaps > .col.offset8{
		margin-left: calc(66.666667% + 2%);
	}
	.row.gaps > .col.offset9{
		margin-left: calc(75% + 2%);
	}
	.row.gaps > .col.offset10{
		margin-left: calc(83.333334% + 2%);
	}
	.row.gaps > .col.offset11{
		margin-left: calc(91.666667% + 2%);
	}

}

/*.row.gaps > .col:first-child{
	margin-left: 0%;
}*/




/* FORMS */

/*url('data:image/svg+xml;utf8,*/

/*

lupa
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path fill="rgba(0,0,0, 1)" fill-opacity="0.4" d="M14.891,14.39l-0.5.5a0.355,0.355,0,0,1-.5,0L9.526,10.529a5.3,5.3,0,1,1,2.106-4.212,5.268,5.268,0,0,1-1.1,3.21l4.362,4.362A0.354,0.354,0,0,1,14.891,14.39ZM6.316,2.418a3.9,3.9,0,1,0,3.9,3.9A3.9,3.9,0,0,0,6.316,2.418Z"/></svg>

strelki
<svg xmlns="http://www.w3.org/2000/svg" width="9" height="12" viewBox="0 0 9 12"><path fill="#5e6c75" d="M0.722,4.823L-0.01,4.1,4.134-.01,4.866,0.716Zm7.555,0L9.01,4.1,4.866-.01l-0.732.726ZM0.722,7.177L-0.01,7.9,4.134,12.01l0.732-.726Zm7.555,0L9.01,7.9,4.866,12.01l-0.732-.726Z"/></svg>

 */


form{
	width: 100%;
	height: auto;
	float: left;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	/*background-color: gray;*/
}

form:after{
	display: table;
	clear: both;
	content: ''; 
}

form > .fields-block{
	margin-top: 30px;
}

form > .fields-block > .row > .col,
form > .row > .col,
/*form > .row > .button,*/
form > .field-row {
	margin-top: 20px;
}

form > .row > .button{
	margin-left: 10px;
}

form > .row > .button:first-child{
	margin-left: 0px;
}

form > .filed-append > .button,
form > .filed-prepend > .button{
	margin: 0px;
}

form .fields-block > label{
	width: 100%;
	margin: 10px 0px 0px 0px !important;
}

input,
textarea,
select{
	font-size: 1.4rem;
}

input[type=text],
input[type=password],
input[type=email],
select,
textarea{
	padding: 10px 12px;
	background-color: #FFF;
	border: 1px solid rgba(0,0,0, 0.1);
	width: 100%;
	height: auto;
	float: left;
	display: block;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-webkit-appearance: none;
}

input[type=text]:focus,
input[type=password]:focus,
input[type=email]:focus,
select:focus,
textarea:focus{
	border: 1px solid rgba(0,0,0, 0.2);
}

input.search{
	border-radius: 0;
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path fill="rgba(0,0,0, 1)" fill-opacity="0.4" d="M14.891,14.39l-0.5.5a0.355,0.355,0,0,1-.5,0L9.526,10.529a5.3,5.3,0,1,1,2.106-4.212,5.268,5.268,0,0,1-1.1,3.21l4.362,4.362A0.354,0.354,0,0,1,14.891,14.39ZM6.316,2.418a3.9,3.9,0,1,0,3.9,3.9A3.9,3.9,0,0,0,6.316,2.418Z"/></svg>');
    background-repeat: no-repeat;
    background-position: left 1rem center;
    padding: 10px 12px 10px 35px;
}

input.login{
	border-radius: 0;
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16" viewBox="0 0 16 16"><path fill="rgba(0,0,0, 1)" fill-opacity="0.4" d="M4.1,7C3.9,7.1,3.6,7.2,3.3,7.4S2.8,7.7,2.5,8S2,8.6,1.8,9C1.6,9.5,1.5,10,1.3,10.6s-0.2,1.3-0.2,2.1 c0,0.9,0.3,1.7,0.9,2.4c0.6,0.7,1.3,1,2.1,1h7.6c0.8,0,1.5-0.3,2.1-1c0.6-0.7,0.9-1.4,0.9-2.4c0-0.8-0.1-1.5-0.2-2.1 c-0.1-0.6-0.3-1.1-0.5-1.5c-0.2-0.4-0.4-0.7-0.7-1c-0.3-0.3-0.5-0.5-0.8-0.6c-0.3-0.1-0.5-0.2-0.8-0.4c0.5-0.7,0.7-1.5,0.7-2.4 c0-0.6-0.1-1.2-0.4-1.8c-0.2-0.6-0.6-1.1-1-1.5c-0.4-0.4-0.9-0.7-1.5-1S8.6,0,8,0S6.8,0.1,6.2,0.4c-0.6,0.2-1,0.6-1.5,1 C4.3,1.8,4,2.3,3.8,2.8S3.4,4,3.4,4.6C3.4,5.5,3.7,6.3,4.1,7z M8,1.2c0.9,0,1.8,0.3,2.4,1s1,1.5,1,2.4s-0.3,1.8-1,2.4S8.9,8,8,8 C7,8,6.2,7.7,5.6,7s-1-1.5-1-2.4c0-0.9,0.3-1.7,1-2.4S7.1,1.1,8,1.2z M4.2,14.9c-0.5,0-1-0.2-1.3-0.6s-0.6-0.9-0.6-1.6 c0-1.4,0.2-2.6,0.7-3.4C3.5,8.5,4.1,8.1,5,8c0.9,0.7,1.9,1.1,3,1.1s2.1-0.4,3-1.1c0.9,0,1.5,0.5,2,1.3c0.5,0.8,0.7,1.9,0.7,3.4 c0,0.6-0.2,1.1-0.6,1.6s-0.8,0.6-1.3,0.6H4.2z"/></svg>');
    background-repeat: no-repeat;
    background-position: left 1rem center;
    padding: 10px 12px 10px 35px;
}

input.password{
	border-radius: 0;
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 16 16" width="16" height="16"><path fill="rgba(0,0,0, 1)" fill-opacity="0.4" d="M7.9,4.1c0-0.5-0.2-1-0.5-1.3C7,2.5,6.6,2.3,6,2.3s-1,0.2-1.3,0.5C4.4,3.1,4.2,3.6,4.2,4.1c0,0.2,0.1,0.5,0.2,0.8 C4.2,4.8,3.9,4.7,3.7,4.7c-0.5,0-1,0.2-1.3,0.5C2,5.5,1.8,6,1.8,6.5s0.2,1,0.5,1.3s0.8,0.5,1.3,0.5s1-0.2,1.3-0.5 C5.3,7.5,5.4,7,5.4,6.5c0-0.3-0.1-0.5-0.2-0.8C5.4,5.8,5.7,6,5.9,6c0.5,0,1-0.2,1.3-0.5S7.9,4.7,7.9,4.1z M16,10.8 c0,0.1-0.1,0.3-0.4,0.6c-0.3,0.3-0.5,0.4-0.6,0.4s-0.1,0-0.3-0.1c-0.1-0.1-0.2-0.2-0.3-0.3c-0.1-0.1-0.2-0.2-0.3-0.3 c-0.1-0.1-0.2-0.2-0.2-0.2l-0.9,0.9l2,2c0.2,0.2,0.2,0.4,0.2,0.6c0,0.2-0.1,0.5-0.3,0.8c-0.2,0.2-0.5,0.3-0.8,0.3 s-0.4-0.1-0.6-0.3L7,8.9C5.9,9.7,4.7,10,3.6,10c-1.1,0-1.8-0.3-2.5-1C0.3,8.5,0,7.7,0,6.7s0.3-1.9,0.9-2.9c0.6-1,1.4-1.7,2.4-2.4 s1.9-1,2.9-1c1.1,0,1.8,0.3,2.5,1c0.6,0.6,1.1,1.5,1.1,2.5c0,1.2-0.4,2.4-1.2,3.5l3.3,3.3l0.9-0.9c0,0-0.1-0.1-0.2-0.2 c-0.1-0.1-0.2-0.2-0.4-0.3c-0.1-0.1-0.2-0.2-0.3-0.4c-0.1-0.1-0.1-0.2-0.1-0.2c0-0.1,0.1-0.3,0.4-0.6c0.3-0.3,0.5-0.4,0.6-0.4 s0.1,0,0.2,0.1c0,0,0.2,0.2,0.4,0.4c0.2,0.2,0.5,0.5,0.8,0.8c0.2,0.2,0.5,0.5,0.9,0.9s0.5,0.5,0.6,0.8 C15.7,10.6,15.9,10.7,16,10.8z"/></svg>');
    background-repeat: no-repeat;
    background-position: left 1rem center;
    padding: 10px 12px 10px 35px;
}



/*

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24" version="1.1" width="16" height="16"><path style=" fill-rule:evenodd;" d="M 22.59375 3.5 L 8.0625 18.1875 L 1.40625 11.5625 L 0 13 L 8.0625 21 L 24 4.9375 Z "/></svg>

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24" version="1.1" width="18" height="18"><path style=" " d="M 5.625 4.21875 L 4.21875 5.625 L 10.59375 12 L 4.21875 18.375 L 5.625 19.78125 L 12 13.40625 L 18.375 19.78125 L 19.78125 18.375 L 13.40625 12 L 19.78125 5.625 L 18.375 4.21875 L 12 10.59375 Z "/></svg>
 */

/*form .success > */

input.success{
	border-color: #519960;
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24" version="1.1" width="16" height="16"><path fill="#519960" style=" fill-rule:evenodd;" d="M 22.59375 3.5 L 8.0625 18.1875 L 1.40625 11.5625 L 0 13 L 8.0625 21 L 24 4.9375 Z "/></svg>');
	background-repeat: no-repeat;
    background-position: right 1rem center;
    padding: 10px 35px 10px 12px;
}

input.error{
	border-color: #c85748;
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24" version="1.1" width="18" height="18"><path fill="#c85748" d="M 5.625 4.21875 L 4.21875 5.625 L 10.59375 12 L 4.21875 18.375 L 5.625 19.78125 L 12 13.40625 L 18.375 19.78125 L 19.78125 18.375 L 13.40625 12 L 19.78125 5.625 L 18.375 4.21875 L 12 10.59375 Z "/></svg>');
	background-repeat: no-repeat;
    background-position: right 1rem center;
    padding: 10px 35px 10px 12px;
}

select{
	border-radius: 0;
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="9" height="12" viewBox="0 0 9 12"><path fill="#5e6c75" d="M0.722,4.823L-0.01,4.1,4.134-.01,4.866,0.716Zm7.555,0L9.01,4.1,4.866-.01l-0.732.726ZM0.722,7.177L-0.01,7.9,4.134,12.01l0.732-.726Zm7.555,0L9.01,7.9,4.866,12.01l-0.732-.726Z"/></svg>');
    background-repeat: no-repeat;
    background-position: right 1rem center;
}

textarea{
	min-height: 100px;
	max-height: 300px;
	max-width: 100%;
}

label{
	font-size: 1.4rem;
	color: rgba(0,0,0, 0.9);
	display: block;
	margin-bottom: 5px;
	font-weight: 500;
	font-family: sans-serif;
	float: left;
	width: auto;
	margin-right: 15px;
}

label[important]:after{
	content: "*";
	color: #c85748;
	margin-left: 7px;
	font-size: 1.9rem;
}

label > span{
	font-size: 1.2rem;
	color: rgba(0,0,0, 0.5);
}

label > input[type=checkbox],
label > input[type=radio]{
	width: 14px;
	height: 14px;
	margin-right: 5px;
}


form .filed-description{
	width: 100%;
	height: auto;
	display: block;
	float: left;
	font-size: 1.2rem;
	color: rgba(0,0,0, 0.5);
	margin-top: 5px;
}

form .filed-prepend,
form .filed-append{
	display: flex;
	margin-top: 20px;
}

form .field-row > .filed-append,
form .field-row > .filed-prepend{
	margin-top: 0px;
}

form .filed-prepend span,
form .filed-append span{
	display: flex;
	flex-direction: column;
	justify-content: center;
	font-weight: normal;
	border: 1px solid #d4d4d4;
	background-color: #f8f8f8;
	color: rgba(0, 0, 0, 0.5);
	white-space: nowrap;
	font-size: 1.2rem;
	padding: 10px 12px;
	font-weight: 600;
}

form .filed-prepend select,
form .filed-append select{
	display: flex;
	width: auto;
	flex-direction: column;
	justify-content: center;
	border: 1px solid #d4d4d4;
	background-color: #f8f8f8;
	color: rgba(0, 0, 0, 0.5);
	white-space: nowrap;
	font-size: 1.4rem;
	padding: 10px 25px 10px 12px;
	font-weight: 500;
	border-radius: 0;
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="9" height="12" viewBox="0 0 9 12"><path fill="#5e6c75" d="M0.722,4.823L-0.01,4.1,4.134-.01,4.866,0.716Zm7.555,0L9.01,4.1,4.866-.01l-0.732.726ZM0.722,7.177L-0.01,7.9,4.134,12.01l0.732-.726Zm7.555,0L9.01,7.9,4.866,12.01l-0.732-.726Z"/></svg>');
    background-repeat: no-repeat;
    background-position: right 1rem center;
}

form .filed-prepend input,
form .filed-append input{
	flex: 1;
}





/* Utils
–––––––––––––––––––––––––––––––––––––––––––––––––– */

/*  ALIGN  */

.align-middle{
	margin-top: auto;
	margin-bottom: auto;
}

.align-right{
	justify-content: flex-end;
}

.align-left{
	justify-content: flex-start;
}


.align-center{
	justify-content: center;
}

/*  PUSH  */

.push-center{
	margin-left: auto !important;
	margin-right: auto !important;
	float: none !important;
}

.push-left{
	float: none !important;
	margin-right: auto !important;
}

.push-right{
	margin-left: auto !important;
	float: none !important;
}

.push-middle{
	margin-top: auto !important;
	margin-bottom: auto !important;
	float: none !important;
}

.push-bottom{
	margin-top: auto !important;
	float: none !important;
}

/*  TEXT  */

.text-center{
	text-align: center !important;
}

.text-left{
	text-align: left !important;
}

.text-right{
	text-align: right !important;
}



/*  MARGINS  */


.margin-top-0	{ margin-top: 0px !important; }
.margin-top-5	{ margin-top: 5px !important; }
.margin-top-10	{ margin-top: 10px !important; }
.margin-top-11	{ margin-top: 11px !important; }
.margin-top-12	{ margin-top: 12px !important; }
.margin-top-13	{ margin-top: 13px !important; }
.margin-top-14	{ margin-top: 14px !important; }
.margin-top-15	{ margin-top: 15px !important; }
.margin-top-16	{ margin-top: 16px !important; }
.margin-top-17	{ margin-top: 17px !important; }
.margin-top-18	{ margin-top: 18px !important; }
.margin-top-19	{ margin-top: 19px !important; }
.margin-top-20	{ margin-top: 20px !important; }
.margin-top-30	{ margin-top: 30px !important; }
.margin-top-40	{ margin-top: 40px !important; }
.margin-top-50	{ margin-top: 50px !important; }
.margin-top-60 { margin-top: 60px !important; }
.margin-top-70 { margin-top: 70px !important; }
.margin-top-80 { margin-top: 80px !important; }
.margin-top-90 { margin-top: 90px !important; }
.margin-top-100 { margin-top: 100px !important; }
.margin-top-120 { margin-top: 120px !important; }
.margin-top-140 { margin-top: 140px !important; }
.margin-top-160 { margin-top: 160px !important; }
.margin-top-180 { margin-top: 180px !important; }
.margin-top-200 { margin-top: 200px !important; }
.margin-top-220 { margin-top: 220px !important; }
.margin-top-240 { margin-top: 240px !important; }
.margin-top-260 { margin-top: 260px !important; }
.margin-top-280 { margin-top: 280px !important; }
.margin-top-300 { margin-top: 300px !important; }
.margin-top-320 { margin-top: 320px !important; }
.margin-top-340 { margin-top: 340px !important; }
.margin-top-360 { margin-top: 360px !important; }
.margin-top-380 { margin-top: 380px !important; }
.margin-top-400 { margin-top: 400px !important; }

.margin-bottom-0	{ margin-bottom: 0px !important; }
.margin-bottom-5	{ margin-bottom: 5px !important; }
.margin-bottom-10	{ margin-bottom: 10px !important; }
.margin-bottom-11	{ margin-bottom: 11px !important; }
.margin-bottom-12	{ margin-bottom: 12px !important; }
.margin-bottom-13	{ margin-bottom: 13px !important; }
.margin-bottom-14	{ margin-bottom: 14px !important; }
.margin-bottom-15	{ margin-bottom: 15px !important; }
.margin-bottom-16	{ margin-bottom: 16px !important; }
.margin-bottom-17	{ margin-bottom: 17px !important; }
.margin-bottom-18	{ margin-bottom: 18px !important; }
.margin-bottom-19	{ margin-bottom: 19px !important; }
.margin-bottom-20	{ margin-bottom: 20px !important; }
.margin-bottom-30	{ margin-bottom: 30px !important; }
.margin-bottom-40	{ margin-bottom: 40px !important; }
.margin-bottom-50	{ margin-bottom: 50px !important; }
.margin-bottom-60 	{ margin-bottom: 60px !important; }
.margin-bottom-70 	{ margin-bottom: 70px !important; }
.margin-bottom-80 	{ margin-bottom: 80px !important; }
.margin-bottom-90 	{ margin-bottom: 90px !important; }
.margin-bottom-100 { margin-bottom: 100px !important; }
.margin-bottom-120 { margin-bottom: 120px !important; }
.margin-bottom-140 { margin-bottom: 140px !important; }
.margin-bottom-160 { margin-bottom: 160px !important; }
.margin-bottom-180 { margin-bottom: 180px !important; }
.margin-bottom-200 { margin-bottom: 200px !important; }
.margin-bottom-220 { margin-bottom: 220px !important; }
.margin-bottom-240 { margin-bottom: 240px !important; }
.margin-bottom-260 { margin-bottom: 260px !important; }
.margin-bottom-280 { margin-bottom: 280px !important; }
.margin-bottom-300 { margin-bottom: 300px !important; }
.margin-bottom-320 { margin-bottom: 320px !important; }
.margin-bottom-340 { margin-bottom: 340px !important; }
.margin-bottom-360 { margin-bottom: 360px !important; }
.margin-bottom-380 { margin-bottom: 380px !important; }
.margin-bottom-400 { margin-bottom: 400px !important; }
.margin-bottom-500 { margin-bottom: 500px !important; }

.margin-right-0		{ margin-right: 0px !important; }
.margin-right-10	{ margin-right: 10px !important; }
.margin-right-20	{ margin-right: 20px !important; }
.margin-right-30	{ margin-right: 30px !important; }
.margin-right-40	{ margin-right: 40px !important; }
.margin-right-50	{ margin-right: 50px !important; }
.margin-right-60	{ margin-right: 60px !important; }
.margin-right-70	{ margin-right: 70px !important; }
.margin-right-80	{ margin-right: 80px !important; }
.margin-right-90	{ margin-right: 90px !important; }
.margin-right-100	{ margin-right: 100px !important; }

.margin-left-0		{ margin-left: 0px !important; }
.margin-left-10		{ margin-left: 10px !important; }
.margin-left-20		{ margin-left: 20px !important; }
.margin-left-30		{ margin-left: 30px !important; }
.margin-left-40		{ margin-left: 40px !important; }
.margin-left-50		{ margin-left: 50px !important; }
.margin-left-60		{ margin-left: 60px !important; }
.margin-left-70		{ margin-left: 70px !important; }
.margin-left-80		{ margin-left: 80px !important; }
.margin-left-90		{ margin-left: 90px !important; }
.margin-left-100	{ margin-left: 100px !important; }

.none-margin-top	{ margin-top: 0px !important; }
.none-margin-bottom	{ margin-bottom: 0px !important; }
.none-margin-left	{ margin-left: 0px !important; }
.none-margin-right	{ margin-right: 0px !important; }

.none-margin-all	{ margin: 0px !important; }



/*  PADDINGS  */

.padding-0	{ padding: 0px !important; }
.padding-5	{ padding: 5px !important; }
.padding-10	{ padding: 10px !important; }
.padding-11	{ padding: 11px !important; }
.padding-12	{ padding: 12px !important; }
.padding-13	{ padding: 13px !important; }
.padding-14	{ padding: 14px !important; }
.padding-15	{ padding: 15px !important; }
.padding-16	{ padding: 16px !important; }
.padding-17	{ padding: 17px !important; }
.padding-18	{ padding: 18px !important; }
.padding-19	{ padding: 19px !important; }
.padding-20	{ padding: 20px !important; }
.padding-30	{ padding: 30px !important; }
.padding-40	{ padding: 40px !important; }
.padding-50	{ padding: 50px !important; }
.padding-60 { padding: 60px !important; }
.padding-70 { padding: 70px !important; }
.padding-80 { padding: 80px !important; }
.padding-90 { padding: 90px !important; }
.padding-100 { padding: 100px !important; }
.padding-120 { padding: 120px !important; }
.padding-140 { padding: 140px !important; }
.padding-160 { padding: 160px !important; }
.padding-180 { padding: 180px !important; }
.padding-200 { padding: 200px !important; }
.padding-220 { padding: 220px !important; }
.padding-240 { padding: 240px !important; }
.padding-260 { padding: 260px !important; }
.padding-280 { padding: 280px !important; }
.padding-300 { padding: 300px !important; }
.padding-320 { padding: 320px !important; }
.padding-340 { padding: 340px !important; }
.padding-360 { padding: 360px !important; }
.padding-380 { padding: 380px !important; }
.padding-400 { padding: 400px !important; }

.padding-top-0	{ padding-top: 0px !important; }
.padding-top-5	{ padding-top: 5px !important; }
.padding-top-10	{ padding-top: 10px !important; }
.padding-top-11	{ padding-top: 11px !important; }
.padding-top-12	{ padding-top: 12px !important; }
.padding-top-13	{ padding-top: 13px !important; }
.padding-top-14	{ padding-top: 14px !important; }
.padding-top-15	{ padding-top: 15px !important; }
.padding-top-16	{ padding-top: 16px !important; }
.padding-top-17	{ padding-top: 17px !important; }
.padding-top-18	{ padding-top: 18px !important; }
.padding-top-19	{ padding-top: 19px !important; }
.padding-top-20	{ padding-top: 20px !important; }
.padding-top-30	{ padding-top: 30px !important; }
.padding-top-40	{ padding-top: 40px !important; }
.padding-top-50	{ padding-top: 50px !important; }
.padding-top-60 { padding-top: 60px !important; }
.padding-top-70 { padding-top: 70px !important; }
.padding-top-80 { padding-top: 80px !important; }
.padding-top-90 { padding-top: 90px !important; }
.padding-top-100 { padding-top: 100px !important; }
.padding-top-120 { padding-top: 120px !important; }
.padding-top-140 { padding-top: 140px !important; }
.padding-top-160 { padding-top: 160px !important; }
.padding-top-180 { padding-top: 180px !important; }
.padding-top-200 { padding-top: 200px !important; }
.padding-top-220 { padding-top: 220px !important; }
.padding-top-240 { padding-top: 240px !important; }
.padding-top-260 { padding-top: 260px !important; }
.padding-top-280 { padding-top: 280px !important; }
.padding-top-300 { padding-top: 300px !important; }
.padding-top-320 { padding-top: 320px !important; }
.padding-top-340 { padding-top: 340px !important; }
.padding-top-360 { padding-top: 360px !important; }
.padding-top-380 { padding-top: 380px !important; }
.padding-top-400 { padding-top: 400px !important; }

.padding-bottom-0	{ padding-bottom: 0px !important; }
.padding-bottom-5	{ padding-bottom: 5px !important; }
.padding-bottom-10	{ padding-bottom: 10px !important; }
.padding-bottom-11	{ padding-bottom: 11px !important; }
.padding-bottom-12	{ padding-bottom: 12px !important; }
.padding-bottom-13	{ padding-bottom: 13px !important; }
.padding-bottom-14	{ padding-bottom: 14px !important; }
.padding-bottom-15	{ padding-bottom: 15px !important; }
.padding-bottom-16	{ padding-bottom: 16px !important; }
.padding-bottom-17	{ padding-bottom: 17px !important; }
.padding-bottom-18	{ padding-bottom: 18px !important; }
.padding-bottom-19	{ padding-bottom: 19px !important; }
.padding-bottom-20	{ padding-bottom: 20px !important; }
.padding-bottom-30	{ padding-bottom: 30px !important; }
.padding-bottom-40	{ padding-bottom: 40px !important; }
.padding-bottom-50	{ padding-bottom: 50px !important; }
.padding-bottom-60 	{ padding-bottom: 60px !important; }
.padding-bottom-70 	{ padding-bottom: 70px !important; }
.padding-bottom-80 	{ padding-bottom: 80px !important; }
.padding-bottom-90 	{ padding-bottom: 90px !important; }
.padding-bottom-100 { padding-bottom: 100px !important; }
.padding-bottom-120 { padding-bottom: 120px !important; }
.padding-bottom-140 { padding-bottom: 140px !important; }
.padding-bottom-160 { padding-bottom: 160px !important; }
.padding-bottom-180 { padding-bottom: 180px !important; }
.padding-bottom-200 { padding-bottom: 200px !important; }
.padding-bottom-220 { padding-bottom: 220px !important; }
.padding-bottom-240 { padding-bottom: 240px !important; }
.padding-bottom-260 { padding-bottom: 260px !important; }
.padding-bottom-280 { padding-bottom: 280px !important; }
.padding-bottom-300 { padding-bottom: 300px !important; }
.padding-bottom-320 { padding-bottom: 320px !important; }
.padding-bottom-340 { padding-bottom: 340px !important; }
.padding-bottom-360 { padding-bottom: 360px !important; }
.padding-bottom-380 { padding-bottom: 380px !important; }
.padding-bottom-400 { padding-bottom: 400px !important; }

.padding-right-0	{ padding-right: 0px !important; }
.padding-right-10	{ padding-right: 10px !important; }
.padding-right-20	{ padding-right: 20px !important; }
.padding-right-30	{ padding-right: 30px !important; }
.padding-right-40	{ padding-right: 40px !important; }
.padding-right-50	{ padding-right: 50px !important; }
.padding-right-60	{ padding-right: 60px !important; }
.padding-right-70	{ padding-right: 70px !important; }
.padding-right-80	{ padding-right: 80px !important; }
.padding-right-90	{ padding-right: 90px !important; }
.padding-right-100	{ padding-right: 100px !important; }

.padding-left-0		{ padding-left: 0px !important; }
.padding-left-10	{ padding-left: 10px !important; }
.padding-left-20	{ padding-left: 20px !important; }
.padding-left-30	{ padding-left: 30px !important; }
.padding-left-40	{ padding-left: 40px !important; }
.padding-left-50	{ padding-left: 50px !important; }
.padding-left-60	{ padding-left: 60px !important; }
.padding-left-70	{ padding-left: 70px !important; }
.padding-left-80	{ padding-left: 80px !important; }
.padding-left-90	{ padding-left: 90px !important; }
.padding-left-100	{ padding-left: 100px !important; }

.none-padding-top	{ padding-top: 0px !important; }
.none-padding-bottom	{ padding-bottom: 0px !important; }
.none-padding-left	{ padding-left: 0px !important; }
.none-padding-right	{ padding-right: 0px !important; }

.none-padding-all	{ padding: 0px !important; }



/*  HEIGHT  */
.height-100P {height: 100% !important;}

.height-100 {height: 100px !important;}
.height-200 {height: 200px !important;}
.height-300 {height: 300px !important;}
.height-400 {height: 400px !important;}
.height-500 {height: 500px !important;}
.height-600 {height: 600px !important;}
.height-700 {height: 700px !important;}
.height-800 {height: 800px !important;}
.height-900 {height: 900px !important;}
.height-1000 {height: 1000px !important;}
.height-1100 {height: 1100px !important;}
.height-1200 {height: 1200px !important;}
.height-1300 {height: 1300px !important;}
.height-1400 {height: 1400px !important;}
.height-1500 {height: 1500px !important;}
.height-1600 {height: 1600px !important;}
.height-1700 {height: 1700px !important;}
.height-1800 {height: 1800px !important;}
.height-1900 {height: 1900px !important;}
.height-2000 {height: 2000px !important;}
.height-2100 {height: 2100px !important;}


.g_v{
	width: 100%;
	height: 0px;
	border-bottom: 1px solid #86fafb;
	position: fixed;
	display: none;
	z-index: 1000;
}

.g_h{
	width: 1px;
	height: 100%;
	border-right: 1px solid #86fafb;
	position: fixed;
	display: none;
	z-index: 1000;
}






.background-black{
	background-color: #000 !important;
}

.bg-color{}

.bg-color.light-gray{
	background: #f1f1f1;
}


.border-bottom{
	border-bottom: 1px solid #d3d3d3;
}

/* Buttons
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.button{
	width: auto;
	height: auto;
	display: flex;
	border: 0px;
	background-color: transparent;
	padding: 0px;
	margin: 0px;
	cursor: pointer;
	text-decoration: none;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}

/*.button.orange{
	background-color: #ff8700;
	color: #FFF;
}
.button.orange:hover{
	background-color: #ff6027;
}
*/
.button.blue{
	background-color: #4089b7;
	color: #FFF;
}
.button.blue:hover,
.button.blue:active,
.button.blue:focus{
	background-color: #3b719e;
}
.button.blue.outline{
	border: 2px solid #4089b7;
	background-color: transparent;
	color: #4089b7;
	font-weight: 600;
}
.button.blue.outline:hover,
.button.blue.outline:active,
.button.blue.outline:focus{
	border: 2px solid #3b719e;
	color: #3b719e;
}

.button.yellow{
	background-color: #f7ba45;
	color: #313439;
}
.button.yellow:hover,
.button.yellow:active,
.button.yellow:focus{
	background-color: #e69a0a;
}
.button.yellow.outline{
	border: 2px solid #f7ba45;
	background-color: transparent;
	color: #f7ba45;
	font-weight: 600;
}
.button.yellow.outline:hover,
.button.yellow.outline:active,
.button.yellow.outline:focus{
	border: 2px solid #e69a0a;
	color: #e69a0a;
}

.button.green{
	background-color: #519960;
	color: #FFF;
}
.button.green:hover,
.button.green:active,
.button.green:focus{
	background-color: #487653;
}
.button.green.outline{
	border: 2px solid #519960;
	background-color: transparent;
	color: #519960;
	font-weight: 600;
}
.button.green.outline:hover,
.button.green.outline:active,
.button.green.outline:focus{
	border: 2px solid #487653;
	color: #487653;
}

.button.red{
	background-color: #c85748;
	color: #FFF;
}
.button.red:hover,
.button.red:active,
.button.red:focus{
	background-color: #a1392b;
}
.button.red.outline{
	border: 2px solid #c85748;
	background-color: transparent;
	color: #c85748;
	font-weight: 600;
}
.button.red.outline:hover,
.button.red.outline:active,
.button.red.outline:focus{
	border: 2px solid #a1392b;
	color: #a1392b;
}

.button.gray{
	background-color: #e1e1e1;
	color: #313439;
}
.button.gray:hover,
.button.gray:active,
.button.gray:focus{
	background-color: #cecece;
}
.button.gray.outline{
	border: 2px solid #e1e1e1;
	background-color: transparent;
	color: #e1e1e1;
	font-weight: 600;
}
.button.gray.outline:hover,
.button.gray.outline:active,
.button.gray.outline:focus{
	border: 2px solid #cecece;
	color: #cecece;
}


.button.transparent{
	color: #313439;
}
.button.transparent:hover,
.button.transparent:active,
.button.transparent:focus{
	background-color: #e1e1e1;
}

.button:disabled,
.button[disabled]{
	opacity: 0.3;
	cursor: not-allowed;
}

.button.in-progress{
	animation: in-progress 2s linear infinite;
	opacity: 0.3;
}

@keyframes in-progress {
    0% 	{
    		opacity: 0.3;
    	}
    50% {
	    	opacity: 1;
	    }
	100%{
			opacity: 0.3;
		}
}


.button.size-s{
	padding: 7px 10px;
	font-size: 1.2rem;
}
.button.size-m{
	padding: 10px 13px;
	font-size: 1.3rem;
}
.button.size-l{
	padding: 12px;
	font-size: 1.5rem;
}
.button.size-xl{
	padding: 15px;
	font-size: 1.7rem;
}
.button.margin-right-5{
	margin-right: 5px;
}
.button.margin-right-10{
	margin-right: 10px;
}
.button.margin-right-15{
	margin-right: 15px;
}


/* Modals
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.right-side-fix-block,
.left-side-fix-block{
	width: var(--right-side-fix-block-width);
	height: 100%;
	position: fixed;
	z-index: 3;
	right: 0;
	display: none;
	background-color: #FFF;
	border-right: 1px solid #ababab;
	padding: 20px;
	-webkit-box-shadow: 0px 0px 36px 0px rgba(0,0,0,0.75);
	-moz-box-shadow: 0px 0px 36px 0px rgba(0,0,0,0.75);
	box-shadow: 0px 0px 36px 0px rgba(0,0,0,0.75);
}

.left-side-fix-block{
	width: var(--left-side-fix-block-width);
	left: 0;
}

.right-side-fix-block > .header,
.right-side-fix-block > .header{
	border-bottom: 1px solid #ababab;
	padding-bottom: 10px;
}

.right-side-fix-block > .header > .head{
	width: calc( var(--right-side-fix-block-width) - 83px );
	float: left;
}

.left-side-fix-block > .header > .head{
	width: calc( var(--left-side-fix-block-width) - 83px );
	float: left;
}

.right-side-fix-block > .header > .head > h1,
.left-side-fix-block > .header > .head > h1{
	font-size: 3.1rem;

}

.right-side-fix-block > .header > .button,
.left-side-fix-block > .header > .button{
	width: 30px;
	margin-left: 10px;
	float: left;
}

.right-side-fix-block > .header > .button > a,
.left-side-fix-block > .header > .button > a{
	line-height: 1;
	color: #000;
	font-size: 3.9rem;
	display: block;
	position: relative;
	float: right;
	text-decoration: none;
}
.right-side-fix-block > .header > .button > a:hover,
.left-side-fix-block > .header > .button > a:hover{
	color: #ababab;
}


.modal{
	width: 100%;
	height: 100%;
	float: left;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	z-index: 100;
	position: fixed;
	background: rgba(0,0,0, 0.1);
	/*display: none;*/
}

.modal.open{
	display: flex !important;
}

.modal.close{
	display: none !important;
}

.modal-conteiner{
	width: var(--modal-width);
	height: auto;
	min-height: var(--modal-min-height);
	max-height: calc(100% - 40px);
	margin: auto;
	padding: 20px;
	background-color: #FFF;
	border-radius: 10px;
	-webkit-box-shadow: 0px 0px 36px 0px rgba(0,0,0,0.3);
	-moz-box-shadow: 0px 0px 36px 0px rgba(0,0,0,0.3);
	box-shadow: 0px 0px 36px 0px rgba(0,0,0,0.3);
}

.modal-content{
	padding: 0px;
	/*height: 50px;*/
	height: auto;
	max-height: 600px;
	min-height: 50px;
	/*overflow-x: auto;*/
	overflow-y: auto;
}

.modal-conteiner > .header{
	border-bottom: 1px solid #f1f1f1;
	padding-bottom: 10px;
}
.modal-conteiner > .header > .head{
	width: calc( var(--modal-width) - 83px );
	float: left;
}

.modal-conteiner > .header > .button{
	width: 30px;
	margin-left: 10px;
	float: left;
}

.modal-conteiner > .header > .head > h1{
	font-size: 2.1rem;
	font-weight: 400;
}

.modal-conteiner > .header > .button > button{
	line-height: 1;
	color: #000;
	font-size: 3.5rem;
	display: block;
	position: relative;
	float: right;
	text-decoration: none;
	cursor: pointer;
}
.modal-conteiner > .header > .button > button:hover{
	color: #ababab;
}





/* Visibility styles
–––––––––––––––––––––––––––––––––––––––––––––––––– */

/*

	-b - block element
	-ib - inline-block elment
	-i - inline elment

 */

/*S*/
.hide-on-s-i,
.hide-on-s-ib,
.hide-on-s-b{
	display: none;
}
	
.hide-on-m-i,
.hide-on-l-i,
.hide-on-xl-i{
	display: inline;
}

.hide-on-m-ib,
.hide-on-l-ib,
.hide-on-xl-ib{
	display: inline-block;
}

.hide-on-m-b,
.hide-on-l-b,
.hide-on-xl-b{
	display: block;
}

#media-page-state{display: none;}
#media-page-state:after{
	content: "S";
	/*display: none;*/
}

/*M*/
@media (min-width: 768px){

	#media-page-state:after{
		content: "M";
	}

	.hide-on-s-i{
		display: inline;
	}
	.hide-on-s-ib{
		display: inline-block;
	}
	.hide-on-s-b{
		display: block;
	}

	.hide-on-m-i,
	.hide-on-m-ib,
	.hide-on-m-b{
		display: none;
	}

}

/*L*/
@media (min-width: 960px){

	#media-page-state:after{
		content: 'L';
	}

	.hide-on-m-i{
		display: inline;
	}
	.hide-on-m-ib{
		display: inline-block;
	}
	.hide-on-m-b{
		display: block;
	}

	.hide-on-l-i,
	.hide-on-l-ib,
	.hide-on-l-b{
		display: none;
	}
	
}

/*XL*/
@media (min-width: 1128px){

	#media-page-state:after{
		content: 'XL';
	}

	.hide-on-l-i{
		display: inline;
	}
	.hide-on-l-ib{
		display: inline-block;
	}
	.hide-on-l-b{
		display: block;
	}

	.hide-on-xl-i,
	.hide-on-xl-ib,
	.hide-on-xl-b{
		display: none;
	}
	
}













.here-tooltip{
	cursor: help;
	padding: 3px;
}
.tooltip{
	width: auto;
	height: auto;
	/*display: block;*/
	position: absolute;
	color: #FFF;
	background-color: rgba(0,0,0, 0.7);
	padding: 7px;
	font-size: 1.1rem;
	line-height: 1.5rem;
	font-weight: 600;
	display: none;
	max-width: 200px;
}
.tooltip.top{
	text-align: center;
}
.tooltip.top::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: rgba(0,0,0, 0.7) transparent transparent transparent;
}
.tooltip.bottom{
	text-align: center;
}
.tooltip.bottom::after {
    content: "";
    position: absolute;
    top: -10px;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent rgba(0,0,0, 0.7) transparent;
}
.tooltip.left{
	text-align: right;
}
.tooltip.left::after {
    content: "";
    position: absolute;
    top: calc( 50% - 5px );
    left: 100%;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent transparent rgba(0,0,0, 0.7);
}
.tooltip.right{
	text-align: left;
}
.tooltip.right::after {
    content: "";
    position: absolute;
    top: calc( 50% - 5px );
    left: -10px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent rgba(0,0,0, 0.7) transparent transparent;
}



@keyframes fade {
    0% 	{
    		opacity: 0;
    	}
    100% {
	    	opacity: 1;
	    }
}
.tooltip.fade{
	animation-name: fade;
	animation-duration: 0.5s;
	opacity: 1;
	display: block;
}

@keyframes fade-out {
    0% 	{
    		opacity: 1;
    	}
    100% {
	    	opacity: 0;
	    }
}
.tooltip.fade-out{
	animation-name: fade-out;
	animation-duration: 0.5s;
	opacity: 0;
	display: block;
}



.drop-down-conteiner{
	width: auto;
	height: auto;
	max-height: 170px;
	max-width: 150px;
	/*display: block !important;*/
	position: absolute;
	color: #FFF;
	background-color: #fff;
	font-size: 1.1rem;
	line-height: 1.5rem;
	font-weight: 600;
	font-size: inherit;
	display: none;
	overflow-y: auto;
	overflow-x: hidden;
	-webkit-box-shadow: 0px 0px 65px -15px rgba(0,0,0,0.75);
	-moz-box-shadow: 0px 0px 65px -15px rgba(0,0,0,0.75);
	box-shadow: 0px 0px 65px -15px rgba(0,0,0,0.75);
}

.drop-down-conteiner.size-s{
	max-width: 100px;
	max-height: 150px;
}
.drop-down-conteiner.size-m{
	max-width: 120px;
	max-height: 170px;
}
.drop-down-conteiner.size-l{
	max-width: 120px;
	max-height: 170px;
}
.drop-down-conteiner.size-xl{
	max-width: 150px;
	max-height: 190px;
}
.drop-down-conteiner.size-xl{
	max-width: 170px;
	max-height: 200px;
}

.drop-down-conteiner.open{
	animation-name: fade;
	animation-duration: 0.5s;
	opacity: 1;
	display: block;
}

.drop-down-conteiner.close{
	animation-name: fade-out;
	animation-duration: 0.5s;
	opacity: 0;
	display: none;
}

.drop-down-conteiner > a,
.drop-down-conteiner > button{
	width: 100%;
	display: block;
	height: auto;
	padding: 10px 15px;
	border: 0px;
	color: #313439;
	font-size: 1.2rem;
	text-decoration: none;
	cursor: pointer;
	background-color: transparent;
	font-weight: 500;
}

.drop-down-conteiner > a:hover,
.drop-down-conteiner > button:hover{
	background-color: #d6d6d6;
}