@import "css/variables.less";
@import "css/mixins.less";
@import "css/cols.less";
@import "css/stylesheet.less";


@import "css/common.less";

@import "css/bootstrap-x-large-cols.css";
@import "css/hovers.css";

@g_blocks-margin-bottom: 20px;


h1 {
    font-weight: 300;
    margin-bottom: 30px;
}
/* HEADER */
@import "css/blocks/header.less";


/* MAIN PAGE */
@import "css/blocks/main-big-image.less";
@import "css/blocks/cats-tile.less";
@import "css/blocks/main-page-news.less";
@import "css/blocks/actions.less";
@import "css/blocks/news.less";
@import "css/blocks/how-by.less";
@import "css/blocks/advantages.less";
@import "css/catalog.less";
@import "css/catalog_carousel.less";
@import "css/catalog_item.less";
@import "css/catalog_search_items.less";
#main-content.main-no-bg {
    background-color: transparent;
    margin-bottom: @g_blocks-margin-bottom;
    padding: 0;
}

.breadcrumbs {
	margin-bottom: @g_blocks-margin-bottom;
	ul {
		list-style: none;
		padding: 0;
		margin: 0;
		li {
			display: inline-block;
			margin-right: 15px;
			a {
				text-decoration: none;
				color: #989898;
			}
			&:last-child a {color: @color-dark;}
		}
	}
}

#main-content {
	background-color: #fff;
	margin-bottom: @g_blocks-margin-bottom;
	padding: 30px;
	.h1 {
		font-weight: bold;
	}
	@media (max-width: 767px) {
	    padding: 20px;
	}
	@media (max-width: 479px) {
	    /* padding: 10px; */
	    /* margin-left: -10px;
	    margin-right: -10px; */
	}
}

.main-text {
	p {
		margin-bottom: 15px;
	}
}


.pagination {
	margin: 0;
	.clearfix();
	@h: 60px;
	.b {
		display: block;
		float: left;
		height: @h;
		width: @h;
		line-height: @h;
		padding: 0;
		text-align: center;
		font-size: 26px;
		color: #b3b3b3;
		text-decoration: none;
		background-color: #fff;
		border-right: 1px solid @color-bg-gray;
		&:last-child {border-right: none;}
		&.arr {
			overflow: hidden;
			background-color: #bebebe;
			&:before {
				border-right: 2px solid #fff;
			    border-top: 2px solid #fff;
			    content: "";
			    display: inline-block;
			    height: 11px;
			    margin-right: 2px;
			    position: relative;
			    top: -2px;
			    transform: rotate(45deg);
			    width: 11px;
			}
			&.prev:before {
		    	transform: rotate(225deg);
			    margin-right: 0;
			    margin-left: 2px;
		    }
		}
		&.more {
			font-size: 36px;
			font-weight: bold;
			line-height: @h/1.3;
		}
		&:hover:not(.disabled) {
			color: #fff;
			background-color: @color-bg-red;
		}
		&.active {
			background-color: @color-dark-light;
		}
		&.disabled {
			opacity: 0.5;
		}
	}
	/* Extra small devices (phones, 768px and down) */
	@media (max-width: 767px) {
		& > li > a, & > li > span {
			padding: 5px 11px !important;
		}
	}
}

.bcontent-menu {
	list-style: none;
	padding: 0;
	margin-bottom: 30px;
	margin-top: 20px;
	li {
		a {
			display: block;
			float: left;
			padding: 15px 50px;
			line-height: 1;
			text-transform: uppercase;
			background-color: #fff;
			text-decoration: none;
			margin-right: 1px;
			margin-bottom: 1px;
		}
		&.active {
			a {
				background-color: @color-dark-light;
				color: #fff;
			}
		}
	}
}

.pager_count {
	.clearfix();
		@h: 60px;
		.pc_label {
			display: block;
			float: left;
			height: @h;
			padding: 0 20px;
			line-height: @h;
			text-align: center;
			font-size: 14px;
			color: #bebebe;
			text-decoration: none;
			background-color: #161616;
			text-transform: uppercase;
		}
		.pc_count {
			display: block;
			float: left;
			height: @h;
			padding: 0 15px;
			line-height: @h;
			text-align: center;
			font-size: 22px;
			font-weight: bold;
			color: #fff;
			text-decoration: none;
			background-color: #343434;
			&:after {
				border-right: 2px solid #9a9a9a;
			    border-top: 2px solid #9a9a9a;
			    content: "";
			    display: inline-block;
			    height: 11px;
			    margin-left: 10px;
			    position: relative;
			    top: -4px;
			    transform: rotate(135deg);
			    width: 11px;
			}
		}
}

.select2-dropdown {
	border-color: #000;
	border-radius: 0;
	top: -1px;
	z-index: 1151;
}
.select2-container {
	font-weight: bold;
}

.select2-container--default .select2-results__option {
	//color: #b3b3b3;
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
	background-color: #fff;
	color: #808080;
}
.select2-container--default .select2-results__option[aria-selected="true"] {
	background-color: #efefef;
}
.select2-container--default .select2-results__option:hover {
	background-color: #d7d4d4;
	color: #fff;
}
.select2-container--default .select2-selection--single {
	border-radius: 0;
}
.select2-container .select2-selection--single {
	height: auto;
}
.select2-container--open .select2-selection.select2-selection--single {
	border-color: #000;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
	line-height: 38px;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
	height: 38px;
	width: 38px;
	line-height: 38px;
	text-align: center;
}
.select2-container .select2-selection--single .select2-selection__clear {
	font-size: 20px;
}
.select2-container .select2-selection--single .select2-selection__rendered {
	padding-right: 38px;
}
.select2-container--default .select2-selection--single .select2-selection__arrow:before {
	border-right: 2px solid @color-dark;
    border-top: 2px solid @color-dark;
    content: "";
    display: inline-block;
    height: 11px;
    position: relative;
    top: 0;
    width: 11px;
    transform: rotate(135deg);
}

.select2-container--open .select2-selection__arrow:before {
	top: 5px !important;
    transform: rotate(-45deg) !important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow b {
	display: none;
}
.select2-dropdown {
	.select2-color-option {
		.clearfix();
		line-height: 25px;
	}
	.select2-img {
		margin-right: 10px;
		float: left;
	    height: 25px;
	    width: 25px;
	    display: inline-block;
	}
}

.bx-auth-form-x {
	max-width: 900px;
	width: auto !important;
	.row {
		margin-bottom: 20px;
	}
	.form-control {
		margin-bottom: 20px;
	}
	label {
		.clearfix();
		line-height: 1.2;
		font-size: 13px;
		.chkbx-s {
			margin-right: 10px;
			float: left;
		}
	}
	a {
		color: #a9a9a9;
	}
	.space {
		display: inline-block;
		height: 1px;
		width: 40px;
	}
	.space-mini {
		display: inline-block;
		height: 1px;
		width: 30px;
	}
	.socserv {
		* {color: #fff !important;}
	}
}



/* BOOTSTRAP MODALS */
.modal {
    @padding: 30px;
    color: #747474;
    z-index: 900;
    .modal-content {
        border-radius: 0;
        border: none;
        background-color: #252229;
        padding: 0;
        & > .row {
        	margin: 0;
			& > [class*="col-"] {
				position: static;
				padding: 0;
			}
		}
    }
    .modal-header {
        border: none;
        padding: @padding @padding @padding/2 !important;
    }
    .close {
        position: absolute;
        left: 100%;
        top: 0;
        height: 55px;
        width: 55px;
        line-height: 55px;
        text-align: center;
        background-color: #010101;
        color: #fff;
        opacity: 1;
        font-weight: normal;
        font-size: 20px;
        margin-top: 0;
        &:hover {
            font-size: 30px;
        }
        @media (max-width: 767px) {
			right: 0;
			left: auto;
        }
    }
    .modal-title {
        font-size: 26px;
        text-transform: uppercase;
        font-weight: bold;
    }
    .modal-body {
        padding: @padding/2 @padding;
        & > h3 {color: #fff;}
        & > p {margin-bottom: 10px;}
        & > ul {
        	list-style: none;
    		padding:0;
        	color: #fff;
        	li {
        		padding-left: 5px;
    			&:before {
				    content: "•";
				    font-size: 20px;
				    left: -5px;
				    line-height: 1;
				    position: relative;
				    top: 2px;
    				color: @color-bg-red;
    			}
        	}
        }
    }
    .modal-footer {
        border: none;
        padding: @padding/2 @padding @padding;
    }

	.modal-dark-bg {
		background-color: #1a1a1c;
	}
	@media (min-width: 768px) {
    	/* vertical middle */
	    text-align: center;
	  	padding: 0!important;
		&:before {
		  content: '';
		  display: inline-block;
		  height: 100%;
		  vertical-align: middle;
		  margin-right: -4px;
		}
		.modal-dialog {
		  display: inline-block;
		  text-align: left;
		  vertical-align: middle;
		}
	}
}
.modal-backdrop {
	z-index: 850;
    background-color: #fff;
    &.in {
        opacity: 0.9;
    }
}


/* BITRIX popup */
.popup-window {
    background-color: #252229;
    border: none;
    box-shadow: none;
    border-radius: 0;
	.popup-window-content {
		table {
			width: 100%;
			select {
				width: 100%;
			}
			td {
				padding-top: 10px;
			}
			td:first-child {
				width: 30%;
			}
		}
	}
	.popup-window-top-row {
		.popup-window-left-column,
		.popup-window-right-column,
		.popup-window-center-column {
			background: transparent;
			border: none;
			box-shadow: none;
			h4{
				font-size: 26px;
				font-weight: bold;
			}
		}
		.popup-window-center-column {
			padding-top: 10px;
		}
	}
	.popup-window-bottom-row {
		.popup-window-center-column {
			padding-bottom: 10px;
		}
	}
	.popup-window-center-column {
		background-color: transparent;
	}
	.popup-window-hr {
		height: 0;
		margin: 10px 0;
	}
	.popup-window-buttons {
		margin: 0 0 10px;
		text-align: right;
	}
	.popup-window-left-column,
	.popup-window-right-column {
		width: 20px;
	}
}
.popup-window-close-icon {
	background-image: none !important;
	position: absolute;
    left: 100%;
    top: 0 !important;
    height: 55px;
    width: 55px;
    line-height: 55px;
    text-align: center;
    background-color: #010101;
    color: #fff;
    opacity: 1;
    font-weight: normal;
    font-size: 20px;
    margin-top: 0;
    &:after {
    	position: absolute;
    	content: '✖';
    	left: 0;
    	top: 0;
    	width: 100%;
    	height: 100%;
    	line-height: 55px;
    	text-align: center;
    }
    &:hover {
    	color: #fff;
        font-size: 30px;
    	background-color: #010101;
    }
}

.modal-dialog.modal-auto-width {
	width: auto;
}

#by_on_credit_form {
	margin-left: 10px;
}

.popover {
	border-radius: 0 !important;
}
.dropdown-menu {
	border-radius: 0 !important;
	left: 50%;
	right: auto;
	padding-top: 0;
	transform: translate(-50%, 0);
	.dropdown-header {
		padding: 6px 20px;
		background-color: @color-bg-gray;
		color: @color-text-red;
		line-height: 1;
		.h3 {
			line-height: 1;
			margin-bottom: 0;
			&:not(:empty) {
				margin-bottom: 5px;
			}
		}
	}
	&:before {
		content: '';
		width: 0;
		height: 0;
		border-left: 5px solid transparent;
		border-right: 5px solid transparent;
		border-bottom: 5px solid @color-bg-gray;
		position: absolute;
		left: 50%;
		bottom: 100%;
		margin-left: -2.5px;
	}
}

/* modalMobileMenu */
#modalMobileMenu {
	color: #fff;
	a:not(.btn) {
		color: #fff;
	}
	.modal-header {
		padding: 5px 65px 0 10px !important;
		a {
			display: inline-block;
			margin-right: 20px;
			margin-bottom: 10px;
		}
	}
	.modal-body {
		padding-left: 0;
		padding-right: 0;
		.p {
			padding-left: 10px;
			padding-right: 10px;
		}
		ul {
			.clearfix();
			list-style: none;
			margin: 0;
			padding: 0;
			margin: 0 -10px;
			border-bottom: 20px solid rgba(255,255,255,0.1);
			&:last-child {
				border-bottom: none;
				margin-bottom:  -15px;
			}
			li {
				display: block;
				padding: 0 !important;
				a {
					display: block;
					padding: 10px;
					border-bottom: 1px solid rgba(255,255,255,0.1);
					text-decoration: none;
					&:hover {
						color: @color-text-base;
					}
				}
				&:last-child {
					a {
						border-bottom: none;
					}
				}
				&.active a {
					color: @color-text-red;
				}
			}
		}
	}
	.search-block {
		margin-right: 0;
		input[type="text"] {
			height: 58px;
			padding-left: 10px;
			padding-right: 60px;
			&:focus {
				border-width: 4px;
				padding-left: 6px;
				padding-right: 56px;
				background-color: #fff;
			}
		}
		button[type="submit"] {
			top: 8.5px;
			right: 10px;
		}
	}
}

.bx-auth-serv-icons {
	a {
		display: inline-block;
		margin: 0 5px 0 0 !important;
		&:hover {
			border: none !important;
		}
	}
}
.bx-auth-services {
	a {
		i {
			margin-right: 5px !important;
		}
	}
}
.bx-ss-icon, .bx-auth-services a {
	&.odnoklassniki, &.facebook, &.vkontakte {
		margin: 0;
		background-image: url(images/socials-auth.png);
		height: 29px;
    	width: 29px;
    	display: inline-block;
	}

	&.odnoklassniki {
		background-position: -60px -1px;
	}
	&.vkontakte {
		background-position: 0 -1px;
		&:hover {
			background-position: 0 -30px;
		}
	}
	&.facebook {
		background-position: -30px -1px;
		&:hover {
			background-position: -30px -30px;
		}
	}
	&:hover {
		.odnoklassniki {
			background-position: -60px -30px;
		}
		.vkontakte {
			background-position: 0 -30px;
		}
		.facebook {
			background-position: -30px -30px;
		}
	}
}

/* FOOTER */
@import "css/blocks/footer.less";

@media screen {
    @import "css/mediaqueries.less";
}