_main-screen.styl

.main-screen
	min-height 819px
	background url('../img/layer-1.png') 0 0 no-repeat
	background-size cover
	@media (max-width 1024px)
		background-position bottom
	&__content
		min-height calc(819px - 62px)
		display flex
		flex-direction column
		justify-content center
		@media (max-width 767px)
			min-height 100%
			padding 70px 0
	&__title
		color #fff
		font-size 24px
		font-weight 500
		margin-bottom 20px
	&__subtitle
		max-width 600px
		font-size 36px
		color green
		line-height 1.2
		font-weight 700
		margin-bottom 20px
		@media (max-width 767px)
			font-size 28px
	&__description
		max-width 711px
		color #424242
		font-size 18px
		font-weight 300
		line-height 24px
		margin-bottom 35px
	&__btn
		display inline-block
		width 390px
		max-width 100%
		height 48px
		text-align center
		line-height 48px
		border 2px solid violet
		color violet
		background transparent
		font-size 16px
		font-weight 700
		&:hover
			color #fff
			background violet
	
.header
	display flex
	justify-content space-between
	align-items center
	padding-top 45px
	@media (max-width 820px)
		flex-direction column
		padding-top 20px
	&__logo
		img
			max-width 100%
			height auto
			display block
		@media (max-width 820px)
			margin-bottom 15px
	&__content
		display flex
		align-items center
		@media (max-width 820px)
			flex-direction column
	&__nav
		margin-right 60px
		@media (max-width 820px)
			margin-bottom 15px
			margin-right 0
		
		
.nav
	&__list
		@media (max-width 500px)
			display flex
			flex-direction column
			align-items center
	&__item
		margin-right 25px
		font-size 11px
		color #fff
		font-weight: 700
		@media (max-width 500px)
			margin-right 0
			margin-bottom 15px
			&:last-of-type
				margin-bottom 0
		&:hover
			color violet
		&:last-of-type
			margin-right 0
		&--active
			position relative
			&:after
				content ''
				position absolute
				width 100%
				height 2px
				background violet
				left 0
				bottom -10px
				@media (max-width 500px)
					bottom -5px
		
.social
	&__list
		display flex
		align-items center
		&--footer
			justify-content center
			.social__item:hover
				a
					color #fff
	&__item
		margin-right 10px
		&:last-of-type
			margin-right 0
		&:hover
			a
				color violet
		a
			color green
			font-size 24px