/*******************
**	COMMON
*/

* {
	outline: none !important;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
}

/* ~ */
.display-none, .d-none {
	display: none !important;
}

.display-block, .d-block {
	display: block !important;
}

.display-inline-block, .d-iblock {
	display: inline-block !important;
}

body.phone .d-none-xs, body.tablet .d-none-sm, body.desktop .d-none-md, body.wide .d-none-lg {
	display: none !important;
}

body.phone .d-block-xs, body.tablet .d-block-sm, body.desktop .d-block-md, body.wide .d-block-lg {
	display: block !important;
}

body.phone .d-iblock-xs, body.tablet .d-iblock-sm, body.desktop .d-iblock-md, body.wide .d-iblock-lg {
	display: inline-block !important;
}

.relative {
	position: relative;
}

.pixelated {
    image-rendering: -moz-crisp-edges;
    image-rendering: -o-crisp-edges;
    image-rendering: -webkit-optimize-contrast;
    -ms-interpolation-mode: nearest-neighbor;
    image-rendering: pixelated;
}

.valign-middle > * {
	display: inline-block; vertical-align: middle;
}

.valign-top > * {
	display: inline-block; vertical-align: top;
}

.valign-bottom > * {
	display: inline-block; vertical-align: bottom;
}

.width-100, .w-100 { width: 100%; }
.width-90, .w-90 { width: 90%; }
.width-80, .w-80 { width: 80%; }
.width-75, .w-75 { width: 75%; }
.width-45, .w-45 { width: 45%; }
.width-50, .w-50 { width: 50%; }
.width-30, .w-30 { width: 30%; }
.width-25, .w-25 { width: 25%; }
.width-15, .w-15 { width: 15%; }
.width-10, .w-10 { width: 10%; }

.height-100, .h-100 { height: 100%; }
.height-90, .h-90 { height: 90%; }
.height-80, .h-80 { height: 80%; }
.height-75, .h-75 { height: 75%; }
.height-45, .h-45 { height: 45%; }
.height-50, .h-50 { height: 50%; }
.height-30, .h-30 { height: 30%; }
.height-25, .h-25 { height: 25%; }
.height-15, .h-15 { height: 15%; }
.height-10, .h-10 { height: 10%; }

/* --- */
.modal-layer {
    background: rgba(0,0,0,0.65); position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 9999;
}

/* --- */
.hide-tag-0 .tag-0 { display: none !important; }
.hide-tag-1 .tag-1 { display: none !important; }
.hide-tag-2 .tag-2 { display: none !important; }
.hide-tag-3 .tag-3 { display: none !important; }
.hide-tag-4 .tag-4 { display: none !important; }
.hide-tag-5 .tag-5 { display: none !important; }
.hide-tag-6 .tag-6 { display: none !important; }
.hide-tag-7 .tag-7 { display: none !important; }
.hide-tag-8 .tag-8 { display: none !important; }
.hide-tag-9 .tag-9 { display: none !important; }
.hide-tag-10 .tag-10 { display: none !important; }

/* --- */
.margin-bottom-8, .mb-8 { margin-bottom: 8px; }
.margin-top-8, .mt-8 { margin-top: 8px; }
.margin-left-8, .ml-8 { margin-left: 8px; }
.margin-right-8, .mr-8 { margin-right: 8px; }

.margin-bottom-4, .mb-4 { margin-bottom: 4px; }
.margin-top-4, .mt-4 { margin-top: 4px; }
.margin-left-4, .ml-4 { margin-left: 4px; }
.margin-right-4, .mr-4 { margin-right: 4px; }

.margin-bottom-2, .mb-2 { margin-bottom: 2px; }
.margin-top-2, .mt-2 { margin-top: 2px; }
.margin-left-2, .ml-2 { margin-left: 2px; }
.margin-right-2, .mr-2 { margin-right: 2px; }

.margin-0, .m-0 { margin: 0px !important; }

.margin-4, .m-4 { margin: 4px; }
.margin-8, .m-8 { margin: 8px; }

.margin-0-4, .m-0-4 { margin: 0 4px; }
.margin-0-8, .m-0-8 { margin: 0 8px; }

.margin-4-0, .m-4-0 { margin: 4px 0; }
.margin-8-0, .m-8-0 { margin: 8px 0; }

.margin-4-x, .m-4-x { margin-top: 4px; margin-bottom: 4px; }
.margin-8-x, .m-8-x { margin-top: 8px; margin-bottom: 8px; }

/* --- */
.padding-bottom-8, .pb-8 { padding-bottom: 8px; }
.padding-top-8, .pt-8 { padding-top: 8px; }
.padding-left-8, .pl-8 { padding-left: 8px; }
.padding-right-8, .pr-8 { padding-right: 8px; }

.padding-bottom-4, .pb-4 { padding-bottom: 4px; }
.padding-top-4, .pt-4 { padding-top: 4px; }
.padding-left-4, .pl-4 { padding-left: 4px; }
.padding-right-4, .pr-4 { padding-right: 4px; }

.padding-bottom-2, .pb-2 { padding-bottom: 2px; }
.padding-top-2, .pt-2 { padding-top: 2px; }
.padding-left-2, .pl-2 { padding-left: 2px; }
.padding-right-2, .pr-2 { padding-right: 2px; }

.padding-0, .p-0 { padding: 0px !important; }

.padding-4, .p-4 { padding: 4px; }
.padding-8, .p-8 { padding: 8px; }

.padding-0-4, .p-0-4 { padding: 0 4px; }
.padding-0-8, .p-0-8 { padding: 0 8px; }

.padding-4-0, .p-4-0 { padding: 4px 0; }
.padding-8-0, .p-8-0 { padding: 8px 0; }

.padding-4-x, .p-4-x { padding-top: 4px; padding-bottom: 4px; }
.padding-8-x, .p-8-x { padding-top: 8px; padding-bottom: 8px; }

/* ~ */
.float-left {
	float: left;
}

.float-right {
	float: right;
}

/* ~ */
.align-center {
	text-align: center;
}

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

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

/* ~ */
.hscroll {
    white-space: nowrap;
    overflow-x: auto;
}

.vscroll {
    overflow-y: auto;
}

/* ~ */
.align-start {
    -moz-align-items: flex-start; -webkit-align-items: flex-start; -o-align-items: flex-start; -ms-align-items: flex-start; align-items: flex-start;
}

.align-end {
    -moz-align-items: flex-end; -webkit-align-items: flex-end; -o-align-items: flex-end; -ms-align-items: flex-end; align-items: flex-end;
}

.align-middle {
    -moz-align-items: center; -webkit-align-items: center; -o-align-items: center; -ms-align-items: center; align-items: center;
}

.align-stretch {
	-moz-align-items: stretch; -webkit-align-items: stretch; -o-align-items: stretch; -ms-align-items: stretch; align-items: stretch;
}

/* ~ */
.flex-row {
	display: -moz-flex; display: -webkit-flex; display: -o-flex; display: -ms-flex; display: flex;
	-moz-flex-flow: row; -webkit-flex-flow: row; -o-flex-flow: row; -ms-flex-flow: row; flex-flow: row;
}

.flex-row.reverse {
	-moz-flex-flow: row-reverse; -webkit-flex-flow: row-reverse; -o-flex-flow: row-reverse; -ms-flex-flow: row-reverse; flex-flow: row-reverse;
}

.flex-col {
	display: -moz-flex; display: -webkit-flex; display: -o-flex; display: -ms-flex; display: flex;
	-moz-flex-flow: column; -webkit-flex-flow: column; -o-flex-flow: column; -ms-flex-flow: column; flex-flow: column;
}

.flex-col.reverse {
	display: -moz-flex; display: -webkit-flex; display: -o-flex; display: -ms-flex; display: flex;
	-moz-flex-flow: column-reverse; -webkit-flex-flow: column-reverse; -o-flex-flow: column-reverse; -ms-flex-flow: column-reverse; flex-flow: column-reverse;
}

/* ~ */
.fullscreen {
	position: fixed; left: 0; top: 0; width: 100%; height: 100%; margin: 0; padding: 0;
}

.fill-parent {
	position: absolute; left: 0; top: 0; width: 100%; height: 100%; margin: 0; padding: 0;
}

.overlay > * {
	position: absolute; left: 0; top: 0; width: 100%; height: 100%; margin: 0; padding: 0;
}

/* ~ */
.size-fill, .all-size-fill > * {
	-moz-flex: 1 1 auto; -webkit-flex: 1 1 auto; -o-flex: 1 1 auto; -ms-flex: 1 1 auto; flex: 1 1 auto;
}

.size-even, .all-size-even > * {
	-moz-flex: 1 1 0; -webkit-flex: 1 1 0; -o-flex: 1 1 0; -ms-flex: 1 1 0; flex: 1 1 0;
}

.size-static, .all-size-static > * {
	-moz-flex: 0 0 auto; -webkit-flex: 0 0 auto; -o-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto;
}

/* ~ */
.no-scroll {
	overflow: hidden !important;
}

.force-hidden {
	display: none !important;
}

/*******************
**	ROWS
*/

.row12,
.row8 {
    width: 100%;
	display: -moz-flex; display: -webkit-flex; display: -o-flex; display: -ms-flex; display: flex;
}

/*******************
**	COLUMNS FOR ROW12
*/

.row12 > .col1 { width: 8.33%; }
.row12 > .col2 { width: 16.66%; }
.row12 > .col3 { width: 25.00%; }
.row12 > .col4 { width: 33.33%; }
.row12 > .col5 { width: 41.66%; }
.row12 > .col6 { width: 50.00%; }
.row12 > .col7 { width: 58.33%; }
.row12 > .col8 { width: 66.66%; }
.row12 > .col9 { width: 75.00%; }
.row12 > .col10 { width: 83.33%; }
.row12 > .col11 { width: 91.66%; }
.row12 > .col12 { width: 100.00%; }

/*******************
**	COLUMNS FOR ROW8
*/

.row8 > .col1 { width: 12.50%; }
.row8 > .col2 { width: 25.00%; }
.row8 > .col3 { width: 37.50%; }
.row8 > .col4 { width: 50.00%; }
.row8 > .col5 { width: 62.50%; }
.row8 > .col6 { width: 75.00%; }
.row8 > .col7 { width: 87.50%; }
.row8 > .col8 { width: 100.00%; }

/************************************
**	DROP-DOWN LAYOUT
*/

.dd {
    position: relative; display: inline-block; font-size: 1em;
}

.dd > span {
    display: block; padding: 0.5em 0.8em; line-height: 1em;
}

.dd > div {
    display: none; width: 200px; position: absolute; right: 0; top: 2.1em; text-align: left;
    -moz-border-radius: 3px 0 0 0; -webkit-border-radius: 3px 0 0 0; -o-border-radius: 3px 0 0 0; -ms-border-radius: 3px 0 0 0; border-radius: 3px 0 0 0;
}

.dd > div > a {
    display: block; line-height: 1em; text-decoration: none; font-size: 0.9em; padding: 0.6em 0.8em;
}

.dd > div > a:hover {
}

.dd > div > a:hover:first-child {
    -moz-border-radius: 3px 0px 0 0; -webkit-border-radius: 3px 0px 0 0; -o-border-radius: 3px 0px 0 0; -ms-border-radius: 3px 0px 0 0; border-radius: 3px 0px 0 0;
}

.dd:hover > span {
    text-decoration: none; cursor: pointer;
    -moz-border-radius: 3px 3px 0 0; -webkit-border-radius: 3px 3px 0 0; -o-border-radius: 3px 3px 0 0; -ms-border-radius: 3px 3px 0 0; border-radius: 3px 3px 0 0;
}

.dd:hover > div {
    display: block;
}

/*******************
**	DROP-DOWN COLORS
*/

.dd > div {
	background: #444; border-bottom: 4px solid #666;
}

.dd > div > a {
	color: #eee;
}

.dd > div > a:hover {
	background: #777; color: #fff;
}

.dd:hover > span {
	background: #666; color: #fff;
}