@import "elements/vars"
@import "../mixins/mixins"



.instagram-slider
	.slick-track
		padding: 50px 0

	.slick-center
		transform: scale(1.15)
		box-shadow: 0 5px 20px rgba(0, 0, 0, .15)
		z-index: 1111

		&:after
			background-color: rgba(0,0,0,0)
			z-index: 1

.instagram-slide
	position: relative
	width: 777px
	margin-top: 100px
	transition: transform .3s linear
	z-index: 1

	@include clearfix

	&:after
		content: ""
		display: block
		width: 100%
		height: 100%
		position: absolute
		left: 0
		top: 0
		background-color: rgba(0,0,0, .55)
		transition: background-color .3s linear
		z-index: 3


.instagram-slide__image
	float: left
	width: 40%

.instagram-slide__body
	float: left
	background-color: #fff
	width: 60%
	padding: 20px 30px

.instagram-slide__header
	@include clearfix
	padding-bottom: 19px
	border-bottom: 1px solid #efefef
	margin-bottom: 20px

.instagram-slide__content
	font-size: 12px
	height: 270px
	padding-right: 15px
	z-index: 2

	p
		line-height: 15px
		padding-right: 15px


.instagram-slide__avatar
	float: left
	width: 40px
	height: 40px
	border-radius: 50%
	display: inline-block

.instagram-slide__login
	float: left
	display: inline-block
	line-height: 40px
	margin-left: 20px


.scroll-element.scroll-y
	width: 5px !important



.slick-arrow
	position: absolute
	top: 50%
	width: 50px
	height: 50px
	border: 0
	padding: 0
	border-radius: 50%
	background-color: #ffcf4f
	box-shadow: 0 1px 20px rgba(255, 207, 79, 0.3), inset 0 2px 1px rgba(255, 255, 255, 0.35)
	background-repeat: no-repeat
	background-size: 25px 25px
	margin-top: 25px
	cursor: pointer
	z-index: 1

.slick-prev
	left: 120px
	background-image: url(../img/arrow-left.svg)
	background-position: 10px center

.slick-next
	right: 120px
	background-image: url(../img/arrow-right.svg)
	background-position: 14px center
	


.frinchise-slider
	height: 550px

	.frinchise-slider__slide
		text-align: center

		img
			display: inline
			max-height: 550px

	.slick-arrow
		margin-top: 0

	.slick-prev
		left: -75px

	.slick-next
		right: -75px