+font('bebas_neue_regularregular',bebasneue_regular-webfont)

=font
	font-family: bebas_neue_regularregular, sans-serif
img
	width: 100%

body
	color: #414141
	font-size: 12px
	font-weight: 400
	font-family: Helvetica,arial,sans-serif
	line-height: 18px

.maske
	position: fixed
	z-index: 2000
	// overflow: hidden
	width: 100%
	height: 100%
	background: #000
	mix-blend-mode: darken
	// animation-name: slide
	// animation-duration: 3s
	// animation-fill-mode: forwards
	// @keyframes slide
	// 	99%
	// 		height: 100vh
	// 	100%
	// 		height: 0vh
	&__inner
		position: absolute
		top: 50%
		left: 50%
		width: 150vw
		height: 150vh
		transform: translate(-50%, -50%) scale(0.01)
		border-radius: 50%
		background: #fff 
		border-radius: 50% 
		// animation-name: slidein
		// animation-duration: 3s
		// animation-fill-mode: forwards
		// @keyframes slidein
		// 	0%
		// 		transform: translate(-50%, -50%) scale(0.01)
		// 	100%
		// 		transform: translate(-50%, -50%) scale(1)

.wrapper
	max-width: 1400px
	overflow: hidden
	margin: 0 auto 
	position: relative
	padding-bottom: 41px 
	background: url('../img/bg.jpg') repeat

.container
	max-width: 940px
	margin: 0 auto
	// overflow: hidden
	+clr
	+r(960)
		margin: 0 30px

.header
	position: fixed
	left: 0
	right: 0
	top: 0
	z-index: 100
	.header__left
		float: left
		+r(485)
			float: none
			text-align: center
	.header__right
		float: right
		+r(485)
			float: none

.logo
	+font
	// font-family: 'bebas_neue_regularregular'
	font-size: 36px
	color: #e8603c
	display: block
	text-transform: uppercase
	text-decoration: none
	padding: 15px 0px
	&__color
		color: #f3af9d

.nav
	list-style: none
	text-align: right
	position: relative
	+r(420)
		text-align: center
	&__item
		display: inline-block
		+r(420)
			text-align: center
	&__link
		+font
		text-decoration: none
		display: block
		color: #b9b9b9
		font-size: 16px
		font-weight: 400
		padding: 25px 0 27px 28px
		+r(420)
			padding: 0 10px 
	.is-active
		color: #e8603c

.blog
	background-color: rgba(232, 96, 60, 0.5)
	height: 61px
	margin: 70px 0 24px
	+r(490)
		margin: 120px 0 24px

.blog-content
	background-color: #e8603c
	box-shadow: 0 0 0 10px #fff
	height: 61px

.h1
	+font
	color: white
	font-size: 24px
	font-weight: 400
	padding: 17px 0 18px 17px

.post
	margin-bottom: 57px

.section
	&__left
		float: left
		max-width: 670px
		position: relative
		+r(965)
			float: none
			margin: 0 auto 
	&__right
		float: right
		+r(965)
			float: none
			text-align: center
			margin-top: 40px
	&__photo
		margin-bottom: 23px

.icons
	position: absolute
	left: -85px
	top: 0
	text-align: center
	// padding: 16px 0
	width: 75px
	height: 75px
	background-color: #e8603c
	background-repeat: no-repeat
	background-position: center
	transition: 2s
	&:hover
		border-radius: 50%
		transform: rotate(360deg)
	+r(1130)
		position: static
		margin-bottom: 20px
	+r(650)
		width: 53px
		height: 53px
		// padding: 5px 0   
	&_post-copy
		background-image: url('../img/icon-first.png')
	&_post-doc
		background-image: url('../img/icon2.png')
	&_quotes-white
		background-image: url('../img/quotes-white.png')

.icon-link
	width: 36px
	height: 43px
	position: relative
	top: 50%
	transform: translateY(-50%)

.content
	overflow: hidden
	padding-right: 10px
	// padding-bottom: 48px
	position: relative
	&:after
		content: ""
		display: block
		background: url('../img/bgdarken.png')
		height: 13px
		width: calc(100% - 9px)
		// width: 100%
		position: absolute
		bottom: 0
		/* flex-grow: 1; */
	&_post-padd
		padding-bottom: 65px 
	&_feedback-padd
		padding-bottom: 54px
	&_freebies-padd
		padding-bottom: 62px
	&__left
		float: left
		position: relative
		+r(705)
			float: left
	&__right
		float: left
		max-width: 500px
		margin-left: 51px
		
.info
	margin-bottom: 16px
	font-size: 12px
	font-weight: 400
	+r(705)
		display: inline-block
		text-align: center
		margin: 0 20px 20px 0
	&__description
		+font
		color: #bababa
		display: block
		padding-top: 10px
		text-decoration: none

.h3
	+font
	font-size: 12px
	font-weight: 400
	color: #e8603c
	&_size
		font-size: 14px 
		
.article
	font-weight: 400
	&__title
		margin-bottom: 23px

.h2
	+font
	font-size: 18px
	color: #e8603c

p
	margin-bottom: 25px
	&:last-child 
		margin-bottom: 0

strong
	color: #8caf2f
	font-weight: 500

.features
	max-width: 218px
	margin-bottom: 37px
	+r(956)
		display: inline-block
		vertical-align: top
		margin: 10px 

.list
	background: url('../img/bgdarken.jpg') repeat
	overflow: hidden
	margin-bottom: 21px
	&__title
		padding-right: 20px
		float: left
		background: url('../img/bg.jpg') repeat

.link
	&__item
		color: #464646
		display: block
		text-decoration: none
		font-weight: 400
	&__item_strong
		font-weight: 500 	 

.gallery
	font-size: 0
	margin: 19px -3px 0
	&__block
		display: inline-block
		width: 50px
		height: 50px
		border: 1px solid #e8603c
		background-color: #f3af9d
		margin: 0 3px 5px 

.feedback
	margin-top: 47px
	&__text
		background-color: whitesmoke
		padding: 25px 30px 19px 76px
		position: relative
		box-sizing: border-box

em
	color: #474747
	font-size: 13px
	font-style: italic


.icon-quotes 
	position: absolute
	left: 34px
	top: 20px
	z-index: 10 

.freebies
	margin-top: 47px 
	&__link
		// font-family: Helvetica,arial,sans-serif
		display: block
		text-decoration: none
		color: #a0a0a0
		margin: 10px 0 25px
		font-size: 12px
		font-weight: 400  
		
.page-number
	+r(965)
		text-align: center
	&__item
		+font
		display: inline-block
		width: 26px
		height: 26px
		text-align: center
		line-height: 26px 
		text-decoration: none
		color: white
		text-align: center
		font-size: 14px
		font-weight: 400  
		background-color: #f3b29d
	.is-active
		background-color: #e8663c

.slider
	max-width: 670px

.slider .slick-prev
	background: url('../img/previous.png') no-repeat
	background-size: cover
	z-index: 100
	width: 35px
	height: 52px
	left: 18px
	+r(550)
		width: 15px
		height: 24px
		background-size: cover

.slider .slick-prev:before,
.slider .slick-next:before
	content: ''

.slider:before
	content: ''

.slider .slick-next
	right: 18px
	background: url('../img/next.png') no-repeat
	background-size: cover
	z-index: 100
	width: 35px
	height: 52px
	+r(550)
		width: 15px
		height: 24px
		background-size: cover

.slider .slick-next:focus, .slider .slick-next:hover
	background: url('../img/next.png')
	background-size: cover
	+r(550)
		width: 15px
		height: 24px
		background-size: cover

.slider .slick-prev:focus, .slider .slick-prev:hover
	background: url('../img/previous.png')
	+r(550)
		width: 15px
		height: 24px
		background-size: cover