$base-font-size:            .9rem;
$base-font-family:          "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
$base-font-weight:          300;
$base-font-color:           #242422;

$site-max-width:            97rem;
$step-size-heading:         0.25;
$side:                      1px;

$logo-max-width:            342px;

$page-header-height:        90px;
$head-image-height:         120px;

$loading-field:             rgba(255,255,255,.7);

$main-design-color:         #e11d3c;
$main-design-text-color:    #fff;
$main-design-sec-color :    #3d3733;
$main-design-border-weight: 1px;
$main-design-radius:        0;
$main-design-small-radius:  3px;


$base-text-color:           #000;
$base-active-color:         #e11d3c;

$top-bar-bg-color:          #f1f1f1;
$top-bar-text-color:        #222222;

$red:                       #e11d3c;
$error-color:               #f14125;
$error-text-color:          #fff;

$header-bg-color:           #fff;
$header-text-color:         #fff;

$nav-bg-color:              #fff;
$nav-text-color:            #3d3732;
$nav-active-color:          #e11d3c;
$nav-active-bg-color:       #fff;


$price-color:               #4a4a4a;
$old-price-color:           #7b7b7b;
$promo-price-color:         #e11d3c;

$news-page-bg:              #f1f1f1;
$gallery-bg:                #373538;

$footer-bg-color:           #efefef;
$footer-text-color:         #4e4e4e;

$sfooter-bg-color:          #e8e8e8;
$sfooter-text-color:        #949494;

$light-gray:                #efefef;
$dark-gray:                 #2d2d2d;

$owl-controls-color:        #595959;
$gallery-bg-color:          #efefeff0;

.gallery-head-image{        background: url( ../img/gallery_header.jpg ) center center;  }
.contacts-head-image{       background: url( ../img/hama/head_parts_d.jpg ) center center; }
.news-head-image{           background: url( ../img/news_header.jpg ) center center;     }
.pages-head-image{          background: url( ../img/hama/main-bg.png ) center center;    }
.basket-head-image{         background: url( ../img/hama/head_parts_c.jpg ) top center;   }
.account-head-image{        background: url( ../img/hama/head_parts_d.jpg ) center center;  }
.categories-head-image{     background: url( ../img/categories_header.jpg ) center center;  }
.not-found-page{            background: url( ../img/hama/head_parts_404.jpg ) center center;      }
.slider-container{          background:#d9f4f8; background-position: center center; background-repeat:no-repeat; background-size: 100% auto; border-bottom: 1px solid #019ee3 !important;}


body {
    .breadcrumbs-container {
		background: #f1f1f1;
	}
	.loading-fld{
		span{
			width: 70px;
			height: 70px;
			background: url( ../img/hama/loading.gif ) center center no-repeat;
			background-size: cover;
		}
	}
	.header {
		.cookies_message{
			background: #e11d3c;
			color: #fff;
				> div.cnt div.b_cnt {
					background: #aa1c34;
				}
		}
        .head{
            border-bottom: 3px solid #f1f1f1;
        }
		.search button {
			@include radius(50%);
		}
		.search input {
			@include radius(25px);
			padding: 0.5rem 1rem;
		}
        .cart-wrap .cart .badge {
            border: 2px solid #fff;
            background: #595959;
        }
		.mobile-search-button, .user-wrap, ._message-wrap, .cart-wrap {
			border-left: none;
		}
		.user-wrap .my-account a {
			border-radius: 22px;
			&.registration {
				display: table;
				margin: 10px auto;
				background: #5c5c5c;
				color: #fff;
				padding: 4px 8px;
				font-size: .9em;
			}
		}

        div.head > div > div > div.message-wrap > p:nth-child(1){
            margin-bottom: 5px;
            font-size: 22px;
            font-weight: 600;
            text-align: center;
        }
        .logo {
            margin-bottom: initial !important;
        }
		#menumain > div > div > ul > li > ul > li:hover a {
		  color: $main-design-color !important;
		}
		.header #menumain ul li.main-list:first-of-type a {
		  color: $main-design-color !important;
		}

        #menumain > div > div > ul > li > ul > li > a::before {
            font: normal normal normal 14px/1 FontAwesome;
            width:40px;
            text-align: center;
            margin:0 auto;
            display: inline-block;
        }
        #menumain > div > div > ul > li > ul > li:nth-child(1) > a::before {
            content: "\f1e3";
        }
        #menumain > div > div > ul > li > ul > li:nth-child(2) > a::before {
            content: "\f109";
        }
        #menumain > div > div > ul > li > ul > li:nth-child(3) > a::before {
            content: "\f10a";
        }
        #menumain > div > div > ul > li > ul > li:nth-child(4) > a::before {
            content: "\f008";
        }
        #menumain > div > div > ul > li > ul > li:nth-child(5) > a::before {
            content: "\f277";
        }
        #menumain > div > div > ul > li > ul > li:nth-child(6) > a::before {
            content: "\f0eb";
        }
        #menumain > div > div > ul > li > ul > li:nth-child(7) > a::before {
            content: "\f126";
        }
        #menumain > div > div > ul > li > ul > li:nth-child(8) > a::before {
            content: "\f025";
        }
        #menumain > div > div > ul > li > ul > li:nth-child(9) > a::before {
            content: "\f096";
        }
        #menumain > div > div > ul > li > ul > li:nth-child(10) > a::before {
            content: "\f085";
        }
        #menumain > div > div > ul > li > ul > li:nth-child(11) > a::before {
            content: "\f0a0";
        }

        #menumain{
        	background: #fff;
			ul {
                margin-left:0;
            }
        }
        #slider {
            .textBox {
              padding: 2rem;
				            strong {
				            color:#fff;
					          font-size: 2em;
				              }

			       }
			.owl-buttons {
                .owl-prev, .owl-next{
                    @include radius(50%);
                    background: #bfc3c4;
                }
            }
			.owl-pagination {
				margin-top: 15px;
				.owl-page {
					span {
						opacity: 1;
             @include radius(50%);
					}
				}
				@media only screen and (max-width: 64em) {
					display: none;
				}
			}
            .item .textBox {
                background: transparent !important;
				@media only screen and (max-width: 1440px) {
					background: rgba(71,72,72,0.42) !important;
					@include radius( 20px );
				}
                h2 {
                    color:#ee1b25;
                }
                @media only screen and (max-width: 1440px) {
					p {
						font-weight: normal;
						color: #e6e6e6;
						font-size: 1.1rem;
					}
				}
				.button {
					@include radius(20px);
					@media only screen and (max-width: 50em) {
						display: none;
					}
				}
				@media only screen and (max-width: 64em) {
					display: block;
					@include radius( 5px );
				}
				strong {
					@media only screen and (max-width: 64em) {
						font-size: 1.4em;
					}
				}
            }
        }
        #slider .item {
			/*min-height: 232px;*/
			img {
				margin:0;
			}
        }
        .slider-container {
            background: #d72c4b url(../img/hama/main-bg.png) center center no-repeat;
            background-size: cover auto;
            border-bottom: 1px solid #c7c7c7 !important;
        }
        .shrink .logo-wrap img.logo {
            height: initial;
            margin-bottom: 0px;
        }
    }
	.input-group-label {
		border: none;
		background: transparent;
		color: #000;
	}
  section .panel-default .panel-header {
      h3{
          font-size: 1.1rem;
          font-weight: 400;
          line-height: initial;
      }
  }
	.delivery-method {
		padding: 15px 5px 15px 20px;
		span {
			font-weight: 700;
		}
	}
	.product-list-container, .related-products {
		.product-item {
			.product-wrapper {
				a {
					img {
						padding-top :0;
					}
				}
				&:hover {
					div.product-hover-wrapper p.button.add-to-cart {
						@include radius(22px);
					}
				}
			}
		}
	}
    section {
		&.categories {
			@media print, screen and (min-width: 64em) {
				.large-4 {
					width: 25%;
				}
			}
		}
        &.map {
			display: none;
		}
		&.home-page-text {
            background: whitesmoke url( ../img/hama/head_parts.jpg) no-repeat center center/100% 130% !important;
        }
        &.special-offers {
            padding: 0;
        }
        &.news.latest_news_bg{
            background: #f5f5f5;
            .news_info{
                background: #f5f5f5;
            }
        }
        .left .search-box #slider-range .ui-widget-header {
            background: #595959;
        }
		.left .search-box #slider-range .ui-slider-handle {
			@include radius( 50% );		
		}
		
        &.news .newsThumb .imgNews a {
            background-size: auto 150%;
        }
        .panel-default:hover {
            border: 3px solid #e11d3c;
        }
		&.basket {
		.personal-data-processed {
			background: #ffe6ea;
			@include radius(17px);
			}
		}
		.payment-container {
			@include radius(17px);
		}
		#mainDeliveryForm > hr:nth-child(2),
		#mainDeliveryForm > hr:nth-child(5),
		#mainDeliveryForm > hr:nth-child(11),
		#mainDeliveryForm > hr:nth-child(7) { opacity: 0; }
		article {
			.pictograms {
				right: initial;
				left: 10px;
				.price-label {
					background: url(../img/hama/icon_new.png) no-repeat;
					-webkit-background-size: cover;
					-moz-background-size: cover;
					-o-background-size: cover;
					background-size: cover;
					width: 55px;
					height: 55px;
					color: #fff;
					font-size: 10px;
					font-weight: bold;
					margin-bottom: 0;
					span {
						font-size: 13px;
						text-shadow: none;
						height: inherit;
						width: inherit;
						border: 0;
						display: initial;
						line-height: 53px;
					}
					&.promo {
						background: url(../img/hama/icon_promo.png) no-repeat;
						-webkit-background-size: cover;
						-moz-background-size: cover;
						-o-background-size: cover;
						background-size: cover;
						width: 55px;
						height: 55px;
						color: #fff;
						font-size: 10px;
						font-weight: bold;
						margin-bottom: 0;
					}
				}
			}
		}
		&.product-info {
			.price-wrap {
				span {
					--display: none;
				}
				.price nobr b {
					font-size: 1.8rem;
					font-weight: 500 !important;
					vertical-align: baseline;
				}
			}
			.share-in-socials>a {
				@include radius( 50% );
			}
			.button {
				border-radius: 32px;
			}
		}
    }
    .top-banners a{
        background-color: initial !important;
        height: 130px;
        background-size: 100% !important;
    }
    .accents {
        .single_accent {
            width: 14%;
        }
        p{
            font-weight: 300;
        }
    }
    .feature-text-data  {
		h2 { 
			font-size: 3em !important; 
		}
		h3 {
			font-size: 2.5em; 
			margin-top: 1em;
			color: $red;
			@media only screen and (max-width: 64em) {
				margin-top: 0em;
				font-size: 1.5em; 
			}
		}
	}
    .feature-text-data .imgThumb img {
        height: auto;
        margin: 0 auto 30px auto;
        display: block;
    }
	.title-fix {
		margin: -1px 0 0 34px;
	}
	.not-found-page, .products-head-image, .basket-head-image, .pages-head-image, .news-head-image, .account-head-image, .gallery-head-image, .contacts-head-image {
		height: 100px;
	}
	.ordermadeimg {
		background: url(../img/hama/ordermade.png) center center no-repeat;
		margin: 30px 0;
		background-size: contain;
	}
    footer {
        .f-footer {
            background: #e8e8e8;
            h5 {
				border: none;
				span.line{
					background: rgb(236, 27, 35);
				}
				i {
					color: #1f1f1f;
				}
            }
			ul li a {
				color: #5a5853;
				font-size: .9em;
				line-height: 1.6;
			}
			p {
				color: #5a5853;
			}
			.footer_colons p {
				font-size: 0.9em;
			}
			.button {
				background: #fff;
				color: #aa1c34;
				@include radius(22px);
			}
        }
        .h-footer {
            background: url(../img/hama/main-bg.png) bottom right;
			h5, i {
				color:#fff;
			}
			ul.menu li a:hover i {
				color: #6f1020;
			}
        }
        .s-footer {

        }

    }
	#mainDeliveryForm > div.declaration-personal-fld > div.checkbox.pull-left > label > a:nth-child(2) {
		background: #fff0c5;
		padding: 0 10px;
		@include radius(12px);
	}
	#mainDeliveryForm > div.declaration-personal-fld > div.checkbox.pull-left > label > a:nth-child(4) {
		margin-left: .2rem;
		background: #d8f3f9;
		padding: 0 10px;
		@include radius(12px);
	}
	.cart_info .cart_quantity .cart_quantity_input,
	.cart_info .cart_quantity .cart_quantity_button a {
		@include radius($main-design-radius);
	}
	.cart_quantity .cart_quantity_button a.cart_quantity_up,
	.cart_quantity .cart_quantity_button a.cart_quantity_down {
		@include radius(50%);
	}
	
	.styledBtn.lg-button,
	.button.secondary,
	.error-404 .button,
	.button.large {
    	@include radius(25px);
	}
	
	.shopping-cart.empty-basket {
		background: #aa1c34;
		@include radius(12px);
		.empty-cart {
			color:#fff;
		}
	}
	
}

.empty-cart {
	a.button {
		@include radius(22px);
	}
}

#filtersForm > section > div > div.large-3.medium-3.small-12.columns.left.mobChange > div > div.search-box.category > h2 > span{
    font-weight: 300;
    font-size: 2rem;
}



@media only screen and (min-width: 1441px) {
	.row {
		max-width: $site-max-width;
	}
	.sider-outer {
		width: 100%;
		float: none;
	}
	.top-fld-xl-resolution {
		display: none;
		width: calc(25% - 30px);
		float: right;
		background: #efefef;
		margin-top: 30px;
		margin-bottom: 30px;
		height: 300px;
		@include radius($main-design-radius);
	}
	article.promotion  {
		padding: 2rem 0;
	}
	article.promotion .large-3 {
		width: 20%;
	}
	#article-container .large-4 {
		width: 25%;
	}
	.search-wrap {
		width: calc( 60% - 390px );
	}
	.categories-list {
		h2 {
			min-height: 4rem;
			font-size: 1.1rem;
		}
		.large-4 {
			width: 20%;
		}
	}

	section {
		h2 {
			font-size: 3rem;
		}
	}
}

	@media screen and (min-width: 1370px) {
		.search input {
			width: 27rem !important;
		}
		.delivery-method {
			width: 33.33%;
		}
	}

	@media only screen and (max-width: 1440px) {
		body {
			.header {
				#menumain ul li.main-list > a {
					font-size: .75rem;
					padding: 1rem .6rem;
					text-transform: uppercase;
					font-weight: 600;
					font-size: .8em;
				}
				.slider-container div.row {
					max-width: 100%;
				}
				.message-wrap {

				}
				#slider .item {
					.textBox {
						padding: 1.3rem;
						strong {
							font-size: 1.5em;
						}
					}
				}
			}
			.top-banners a {
				height: 180px;
			}
		}
	}

	@media only screen and (min-width: 46em) {
		#categories-menu {
			display: block !important;
		}
	}

	@media only screen and (max-width: 50em) {
		body {
			.top-message-wrap {
				background: #545665;
				.top-message-content p {
					font-size: 1em;
					margin-bottom: 5px;
				}
			}
			.header {
				.slider-container div.row {
					max-width: 100%;
				}
				#slider .item img {
					width: 100%;
					margin: 0 !important;
				}
				#menumain ul li.main-list > a {
					font-size: 1.3em;
				}
				#slider .item {
					img {
						width: 100%;
						margin: 0 !important;
					}
					.textBox {
						padding: 1.7rem;
					}
				}
				.top-message-content {
					padding: 4px;
					font-size: 16px;
					p {
						@include flex();
						justify-content: center;
						align-self: center;
						margin-bottom: 0;
						font-weight: bold;
						padding: 0 5px;
						color: #e11d3c !important;
						i {
							padding: 0 5px;
							&::before {
								vertical-align: inherit;
							}
						}
						a {
							padding: 0 5px;
						}
					}
				}
			}
			section h1 span.line::after, section h2 span.line::after {
				width: 140px;
				margin-left: -70px;
			}
			section h1 span.line, section h2 span.line {
				padding: 1rem 0 1rem 0;
			}
			section .left .search-box h2 .fa {
				top: 0;
			}
			footer .social-icons ul.menu {
				margin: 0 auto 0 auto;
			}
			.title-bar.mobile-menu {
				background: transparent;
				color: #fff;
			}
			.breadcrumbs-container {
				padding-top: 0;
			}
			section .panel-default span.count {
				top: calc( 26% - 20px);
			}
		}
	}



	@media (max-width: 40.2em) and (min-width: 30em) {
		.search.is-open {
			margin-top: 53px;
		}
		.header .search input {
			border-top-left-radius: 0;
			border-bottom-left-radius: 0;
		}
		section.home-page-text {
			background-size: cover;
		}
		section article .price-label span {
			line-height: 52px;
		}
		section.categories {
			padding-bottom: 2rem;
		}
		section.categories {
			padding-top: 2rem;
			padding-bottom: 2rem;
		}
	}

	@media only screen and (max-width: 90em) and (min-width: 64.063em) {
		.header .search input {
			width: 25rem !important;
		}
		#page-index > section.special-offers.clearfix > div > article > div > div:nth-child(10), #page-index > section.special-offers.clearfix > div > article > div > div:nth-child(9) { display: none; }
	}

	@media only screen and (max-width: 64em) and (min-width: 40.063em) {
		.header .search input {
			width: 17rem !important;
			font-size: .7rem;
		}
		body .header #menumain ul li.main-list a {
			font-size: 0.67rem;
		}
	}

	@media only screen and (max-width: 40em) and (min-width: 20.063em) {
		.header .search {
			border: none;
			input {
				width: 12rem !important;
				font-size: .7rem;
			}
		}
	}