<header class="header">
    <!-- Header left box -->
    <div class="hl-box clearfix">
        <div class="hl-logo">
            <a href="#">
                <img src="#" alt="Город на Сысоле">
            </a>
        </div>
        <div class="hl-title">
            <h1>магазин<br>оригинальной<br>одежды и сувениров</h1>
        </div>
        <div class="hl-desc">
            <p>Товары с эксклюзивными принтами,<br>
                пропитанные духом природы<br>
                и жизнью Республики Коми</p>
        </div>
        <div class="hl-numb">
            <a href="#">+7 (904) 2222 458</a>
            <span>Поможем оформить заказ</span>
        </div>
    </div>
    <!-- Header right box -->
    <div class="hr-box">
        <div class="h-slider">
            <div class="sl-slide"
                 style="background-image: url('https://pp.userapi.com/c621717/v621717134/3848d/Q04v7QrUSz4.jpg');">
                <div class="sl-text">
                    <h1 class="sl-title">norhwest <span>komi republic</span></h1>
                    <p class="sl-desc">Для тех, кто гордиться нашей <br>родной республикой. Для тех кто <br>скучает по
                        родным местам</p>
                    <a href="" class="sl-btn">Все товары принтом</a>
                </div>
            </div>
            <div class="sl-slide"
                 style="background-image: url('https://pp.userapi.com/c639625/v639625134/20aa3/-VV3EH6cf_g.jpg');">
                <div class="sl-text">
                    <h1 class="sl-title">norhwest <span>komi republic</span></h1>
                    <p class="sl-desc">Для тех, кто гордиться нашей <br>родной республикой. Для тех кто <br>скучает по
                        родным местам</p>
                    <a href="" class="sl-btn">Все товары принтом</a>
                </div>
            </div>
            <div class="sl-slide"
                 style="background-image: url('https://pp.userapi.com/c639625/v639625134/20ad5/y0GND80QVLE.jpg');">
                <div class="sl-text">
                    <h1 class="sl-title">norhwest <span>komi republic</span></h1>
                    <p class="sl-desc">Для тех, кто гордиться нашей <br>родной республикой. Для тех кто <br>скучает по
                        родным местам</p>
                    <a href="" class="sl-btn">Все товары принтом</a>
                </div>
            </div>
            <div class="sl-slide"
                 style="background-image: url('https://pp.userapi.com/c639625/v639625134/20ae9/ectQjCgSGOM.jpg');">
                <div class="sl-text">
                    <h1 class="sl-title">norhwest <span>komi republic</span></h1>
                    <p class="sl-desc">Для тех, кто гордиться нашей <br>родной республикой. Для тех кто <br>скучает по
                        родным местам</p>
                    <a href="" class="sl-btn">Все товары принтом</a>
                </div>
            </div>
        </div>
        <div class="header-thumbs" dir="rtl">
            <div class="h-slider-thumbs">
                <div class="sl-slide"
                     style="background-image: url('https://pp.userapi.com/c621717/v621717134/3848d/Q04v7QrUSz4.jpg');"></div>
                <div class="sl-slide"
                     style="background-image: url('https://pp.userapi.com/c639625/v639625134/20aa3/-VV3EH6cf_g.jpg');"></div>
                <div class="sl-slide"
                     style="background-image: url('https://pp.userapi.com/c639625/v639625134/20ad5/y0GND80QVLE.jpg');"></div>
                <div class="sl-slide"
                     style="background-image: url('https://pp.userapi.com/c639625/v639625134/20ae9/ectQjCgSGOM.jpg');"></div>
            </div>
        </div>
    </div>

</header>


$(document).ready(function () {


    var $h_slider = $('.h-slider').slick({
            slidesToShow: 1,
            slidesToScroll: 1,
            arrows: true,
            appendArrows: $('header'),
            fade: true,
            nextArrow: '<div class="h-arrow-btn left"><i class="fa fa-angle-left"></i></div>',
            prevArrow: '<div class="h-arrow-btn right"><i class="fa fa-angle-right"></i></div>',
            asNavFor: '.h-slider-thumbs'
        }),

        $h_slider_thumbs = $('.h-slider-thumbs').slick({
            slidesToShow: 3,
            slidesToScroll: 1,
            asNavFor: '.h-slider',
            dots: false,
            arrows: false,
            rtl: true,
            focusOnSelect: true
        }),

        $ac_slider = $('.ac-slider').slick({
            autoplay: true,
            arrows: false,
            dots: true,
            fade: true
        });

    $('.h-arrow-btn.left').click(function(){
        $h_slider.slick('slickPrev');
    });

    $('.h-arrow-btn.right').click(function(){
        $h_slider.slick('slickNext');
    });
});



.header{
	width: 100%;
	min-height: 874px;
	.h-arrow-btn {
		width: 46px;
		height: 110px;
		background-image: linear-gradient(157deg, #029ed7, #0bcbc8);
		position: absolute;
		z-index: 999;

		&.left {
			top: 553px;
			left: 0;
		}

		&.right {
			top: 553px;
			right: 0;
		}

		i {
			display:inline-block;
			line-height: 110px;
			width: 100%;
			color: white;
			font-size: 56px;
			text-align: center;
			vertical-align: middle;
		}
	}
	//Header left box
	.hl-box{
		width: 435px;
		min-height: 874px;
		float: left;
		padding:{
			top: 120px;
		}
		.hl-logo{
			width: 120px;
			height: 54px;
			margin:{
				right: auto;
				left: auto;
				bottom: 90px;
			}
		}
		.hl-title{
			text-align: center;
			position: relative;
			&:after{
				content: "";
				position: absolute;
				top: 115px;
				left: 45%;
				display: block;
				margin: 0 auto;
				width: 35px;
				height: 4px;
				background: linear-gradient($gradient);
			}
			h1{
				font-size: 21px;
				text-transform: uppercase;
				margin:{
					top: 0px;
					bottom: 64px;;
				}
			}
		}
		.hl-desc{
			text-align: center;
			margin:{
				bottom: 293px;
			}
			p{
				color: #222;
				font-weight: 300;
				font-size: 17px;
			}
		}
		.hl-numb{
			display: block;
			margin: 0 auto;
			width: 275px;
			a,
			span{
				display: block;
			}
			a{
				font-size: 24px;
				font-weight: 700;
				color: #2f2f2f;
			}
			span{
				font-size: 15px;
				font-weight: 300;
				color: #222;
			}
		}
	}
	// Header right box
	.hr-box{
		margin-left: 435px;
		min-height: 874px;
		background: #3e3e3e;
		position: relative;
		//Slider custom
		.h-slider{
			width: 100%;
			height: 874px;
			z-index: 0;
			.sl-slide{
				width: 100%;
				height: 874px;
				position: relative;
				background-size: cover;
				background-position: center;
				img{
					width: 100%;
				}
			}
			.sl-text{
				position: absolute;
				bottom: 0;
				padding:{
					left: 133px;
					bottom: 58px;
				}
				.sl-title{
					color: #fff;
					text-transform: uppercase;
					font-size: 30px;
					line-height: 25px;
					width: 208px;
					span{
						font-size: 19px;
					}
				}
				.sl-desc{
					width: 370px;
					font-size: 18px;
					font-weight: 300;
					color: #fff;
				}
				.sl-btn{
					display: block;
					width: 234px;
					height: 54px;
					background: linear-gradient($gradient);
					text-align: center;
					line-height: 54px;
					font-size: 18px;
					color: #fff;
					border-radius: 100px;
				}
			}
		}
		.header-thumbs {
			position: absolute;
			bottom: 210px;
			left: -370px;
			width: 465px;
			z-index: 999;
			.h-slider-thumbs {
				.sl-slide {
					background-size: cover;
					background-position: center;
					width: 145px;
					height: 110px;
					margin-left: 10px;
				}
			}
		}

	}
}