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


.home-screen
	background: url(../img/bg-main-screen.jpg) center center no-repeat
	background-size: cover
	width: 100%
	height: 100%

// .verctical-center-content
// 	position: absolute
// 	top: 55%
// 	left: 0
// 	right: 0
// 	padding: 0 15px
// 	z-index: 10
// 	transform: translate(0%, -50%)

.home-screen__content-wrapper
	// display: flex
	// align-items: center
	padding: 150px 0

@media only screen and (max-width : 1366px)

	.home-screen__content-wrapper
		padding-top: 30px
		padding-bottom: 100px


.home-screen__content
	// position: relative
	// top: 50%
	// left: 0
	// height: 100%
	// width: 100%
	// transform: translate(0%, -50%)
	text-align: center
	color: #fff

.home-screen__headline
	margin-bottom: 50px
	color: #fff
	text-shadow: 0 4px 10px rgba(0,0,0,.2)

.home-screen__lead
	font-size: 24px
	margin-bottom: 50px
	text-shadow: 0 4px 15px rgba(0,0,0,.2)

.hr-line
	font-size: 0
	margin-bottom: 50px

	span
		display: inline-block
		height: 4px
		background-color: #fff
		border-radius: 50px

		&:nth-child(3)
			width: 180px
			margin: 0 4px

		&:nth-child(2), &:nth-child(4)
			width: 25px
			margin: 0 4px
		
		&:nth-child(1), &:nth-child(5)
			width: 5px
			margin: 0 4px


.number-item
	position: relative
	counter-increment: counter
	padding-left: 115px
	min-height: 50px

	&:before
		content: counter(counter, decimal-leading-zero)
		display: block
		position: absolute
		left: 0
		top: 0
		width: 50px
		height: 50px
		border-radius: 50%
		font-weight: 900
		color: #fff
		background-color: $accent-color
		border-radius: 50px
		text-align: center
		line-height: 50px
		text-shadow: 0 2px 8px rgba(0,0,0,.1)
		box-shadow: 0 1px 20px rgba(255, 207, 79, .3) ,inset 0 2px 1px rgba(255,255,255,.35)
		margin-left: 25px

.number-item__headline
	margin-bottom: 20px

.number-item-horiz
	text-align: center
	margin-bottom: 50px


.number-item__number
	width: 70px
	height: 70px
	border-radius: 50%
	font-size: 25px
	font-weight: 900
	color: #fff
	background-color: $accent-color
	border-radius: 50px
	text-align: center
	line-height: 70px
	text-shadow: 0 2px 8px rgba(0,0,0,.1)
	box-shadow: 0 1px 20px rgba(255, 207, 79, .3) ,inset 0 2px 1px rgba(255,255,255,.35)
	margin:
		top: 0
		bottom: 30px
		left: auto
		right: auto
	user-select: none

.number-item__text
	font-size: 17px
	line-height: 20px


.item-image-wrapper
	text-align: center
	margin-top: 30px



.section-callback
	padding-top: 218px
	padding-bottom: 100px
	text-align: center

	.section__header
		margin-bottom: 45px









.program-product-headline
	margin: 83.5px 0

.program-item
	width: 778px
	box-shadow: 0 5px 15px rgba(0, 0, 0, .1)
	margin: 0 auto
	margin-bottom: 30px

	&:last-child
		margin-bottom: 0

.product-item
	box-shadow: 0 5px 15px rgba(0, 0, 0, .1)

.program-item__image
	float: left
	width: 53%

	img
		width: 100%
		height: 220px
		object-fit: cover

.product-item__image

	img
		width: 100%

.program-item__content
	float: left
	width: 47%
	padding: 45px 35px
	background-color: #fff

.product-item__content
	padding: 35px
	background-color: #fff

.program-item__headline,
	font-size: 20px
	margin-bottom: 20px

.product-item__headline
	font-size: 18px
	margin-bottom: 20px

.program-item__text,
.product-item__text
	font-size: 16px
	margin-bottom: 20px

.program-item__btn-grup,
.product-item__btn-grup,

	a:first-child
		margin-right: 30px



.program-2
	width: 816px

	.program-item__image
		float: right



.blog-item
	box-shadow: 0 5px 15px rgba(0, 0, 0, .1)
	margin-bottom: 30px

	&:last-child
		margin-bottom: 0

.blog-item__image

.blog-item__content
	padding: 35px
	background-color: #fff

.blog-item__headline
	font-size: 20px
	margin-bottom: 20px

.blog-item__info
	font-size: 14px
	color: #777
	margin-bottom: 20px

.blog-item_info__date
	display: inline-block
	margin-right: 30px

.blog-item_info__tags
	display: inline-block

	li
		display: inline-block

.blog-item__text
	font-size: 16px
	line-height: 18px
	color: #777
	margin-bottom: 25px


.blog-item--small

	.blog-item__image
		float: left
		width: 170px
		height: 190px

	.blog-item__content
		float: left
		width: 400px
		padding: 30px 30px

	.blog-item__headline
		font-size: 16px
		margin-bottom: 10px

	.blog-item__info
		margin-bottom: 10px

	.blog-item__text
		margin-bottom: 9px


.slider
	div
		background-color: #ccc


.section-franchise
	position: relative
	background: url(../img/img-bg-section-franchise.jpg) no-repeat center center
	background-size: cover

	&:before
		content: ''
		display: block
		width: 100%
		height: 100%
		position: absolute
		top: 0
		left: 0
		background-color: rgba(255,255,255, .5)








.section-slider
	position: relative

.bg-section-image-1
	position: absolute
	top: -105px
	right: 0
	width: 162px
	height: 271px
	background-image: url(../img/bg-section-item-1.png)
	background-repeat: no-repeat
	background-position: top right






.section-2-mainpage
	border-bottom: 1px solid #ededed

	.item-image-wrapper img
		border: 1px solid #ededed


.section-franchise
	.item-franchise
		position: relative

		h3
			font-size: 26px
			font-weight: 900
			line-height: 70px
			padding-left: 110px

		&:before
			content: ""
			display: block
			position: absolute
			left: 0
			top: 0
			width: 70px
			height: 70px
			border-radius: 50%
			color: #fff
			text-align: center
			line-height: 70px
			text-shadow: 0 2px 8px rgba(0, 0, 0, 0.1)
			box-shadow: 0 1px 20px rgba(255, 207, 79, 0.3), inset 0 2px 1px rgba(255, 255, 255, 0.35)
			background: #ffcf4f url(../img/map-marker.svg) no-repeat center center
			background-size: 32px

	
	.section__lead
		margin-bottom: 80px