/*===================*/
/*1) Utilities*/
/*2) Buttons*/
/*3) Hero*/
/*4) Modal*/
/*5) Subscrube Form*/
/*6) More*/
/*7) Overlay*/
/*8) Countdown
/*===================*/

/*Utilities*/
html,
body
	padding: 0
	margin: 0
body
	min-height: 100vh
	width: 100vw
	overflow-x: hidden
.clearfix
	clear: both

/*Buttons*/
.button
	display: inline-block
	text-decoration: none
	text-transform: uppercase
	font-family: $openSans
	font-size: 10px
	letter-spacing: .2em
	padding: 15px 30px
	margin: 0 15px
	min-width: 80px
	color: $white
	@media (max-width: $breakpoint-desktop)
		padding: 10px 20px
		font-size: 8px
.subscribe-form .btn-solid,
.btn-solid
	border: 2px solid $main
	background: $main
	color: $white
	transition: color .2s, background .2s, border .2s
	&:hover
		color: $white
		background: darken($main, 15%)
		border: 2px solid darken($main, 15%)
.subscribe-form .btn-ghost,
.btn-ghost
	border: 2px solid $main
	color: $white
	transition: color .2s, background .2s
	&:hover
		color: $white
		background: $main
.btn-round
	border-radius: 100px

/*Hero*/
.hero
	background: $dark
	background: url(../img/background.jpg)
	background-size: cover
	min-height: 100vh
	position: relative
	display: flex
	justify-content: center
	align-items: center
	padding: 100px 0
	box-sizing: border-box
	.particles-js-canvas-el
		position: fixed
		display: none
	&:after
		content: ''
		position: absolute
		top: 0
		left: 0
		right: 0
		bottom: 0
		background: rgba($shade-color, .8)
	&.active
		.particles-js-canvas-el
			display: block

.centered
	z-index: 1
.logo
	margin: auto
	display: block
	width: 100px
	@media (max-width: $breakpoint-desktop)
		width: 70px
.title
	font-family: $montserrat
	color: $white
	font-weight: 100
	letter-spacing: .5em
	padding: 0 0 0 .5em
	text-align: center
	text-transform: uppercase
	font-size: 16px
	margin-top: 20px
	@media (max-width: $breakpoint-desktop)
		font-size: 12px
		margin-top: 15px
.heading
	margin-top: 80px
	color: $white
	font-family: $montserrat
	font-size: 48px
	text-align: center
	text-transform: uppercase
	letter-spacing: .3em
	padding: 0 0 0 .3em
	font-weight: 100
	@media (max-width: $breakpoint-desktop)
		font-size: 32px
		margin-top: 40px
	@media (max-width: $breakpoint-mobile)
		font-size: 24px
.description
	font-family: $raleway
	color: $white
	text-align: center
	line-height: 2.5em
	letter-spacing: .15em
	max-width: 600px
	@media (max-width: $breakpoint-desktop)
		font-size: 13px
		max-width: 500px
	@media (max-width: $breakpoint-mobile)
		font-size: 11px
		width: 300px
.buttons
	margin: 80px 0 0
	text-align: center
	@media (max-width: $breakpoint-desktop)
		margin: 40px 0 0
		.button
			margin-top: 10px
.social-text
	position: absolute
	bottom: 30px
	left: 50%
	transform: translateX(-50%)
	z-index: 1
	width: 100vw
	text-align: center
	a
		color: darken($light, 10%)
		text-decoration: none
		text-transform: uppercase
		font-family: $montserrat
		font-size: 9px
		letter-spacing: .2em
		padding: 0 0 0 .2em
		@media (max-width: $breakpoint-desktop)
			font-size: 8px
		margin: 0 10px
		transition: color .4s
		&:hover
			color: $white

/*Modal*/
.modal
	position: relative
	border-radius: 7px
	padding: 70px 0
	position: absolute
	top: -100vh
	left: 50%
	transform: translate(-50%, -50%)
	z-index: 2
	background: $white
	font-family: $raleway
	max-width: 450px
	text-align: center
	transition: top .5s
	@media (max-width: $breakpoint-desktop)
		padding: 50px 30px 30px
		max-width: 300px
	@media (max-width: $breakpoint-tablet)
		width: 80vw
	&:after
		content: ''
		position: absolute
		top: 0
		left: 0
		right: 0
		bottom: 0
		background: rgba($dark, .8)
		z-index: 1
		border-radius: 5px
	.content
		z-index: 2
		position: relative
	p
		padding: 0 50px
		font-size: 14px
		line-height: 2em
		letter-spacing: .05em
		color: darken($light, 10%)
		@media (max-width: $breakpoint-desktop)
			font-size: 12px
			padding: 0
	h2
		color: $white
		font-size: 26px
		text-align: center
		@media (max-width: $breakpoint-desktop)
			font-size: 18px
	.exit
		position: absolute
		top: 0
		right: 0
		padding: 10px
		color: $white
		font-family: $openSans
		transform: rotate(45deg)
		font-size: 38px
		width: 1em
		height: 1em
		text-align: center
		line-height: 1em
		cursor: pointer
		z-index: 2
		font-weight: 100
		transition: color .2s
		&:hover
			color: $main

/*Subscrube Form*/
.subscribe-form
	display: block
	padding-top: 40px
	display: inline-block
	margin: auto
	input
		font-size: 14px
		font-family: $openSans
		border: none
		height: 55px
		display: block
		width: 300px
		margin: 0
		box-sizing: border-box
		padding: 0 20px
		border-radius: 3px
		@media (max-width: $breakpoint-desktop)
			height: 50px
			padding: 0 10px
			width: 200px
		&:focus
			outline: none
		&[type="email"]
			letter-spacing: .05em
			color: darken($light, 30%)
			text-align: center
			margin-bottom: 30px
		&[type="submit"]
			font-size: 10px
			text-transform: uppercase
			letter-spacing: .1em
			cursor: pointer
			margin-bottom: 30px
	.response
		display: block
		color: rgba($white, 0)
		font-size: 12px
		letter-spacing: .1em
		transition: color .2s
		max-width: 300px
		margin: auto
		line-height: 2em
		a
			color: darken($light, 30%)
		&.active
			color: $white
.modal-subscirbe
	background: url(../img/subscribe-background.jpg) center
	background-size: cover
	&.open
		top: 50%

/*More*/
.more
	width: 50vw
	height: 100vh
	position: fixed
	top: 0
	right: -50vw
	z-index: 2
	background: $more-background
	box-sizing: border-box
	color: $more-color
	overflow-y: scroll
	transition: right .5s, background .2s
	@media (max-width: $breakpoint-tablet)
		width: 100vw
		right: -100vw
	@media (max-width: $breakpoint-mobile)
		padding: 50px 0
	&.open
		right: 0
	.exit
		position: absolute
		top: 0
		right: 0
		padding: 10px
		color: $more-color
		font-family: $openSans
		transform: rotate(45deg)
		font-size: 38px
		width: 1em
		height: 1em
		text-align: center
		line-height: 1em
		cursor: pointer
		font-weight: 100
		transition: color .2s
		&:hover
			color: $main
	&-heading
		margin: 0
		text-align: center
		font-family: $righteous
		font-size: 	38px
		font-weight: 300
		text-transform: uppercase
		letter-spacing: .5em
		margin-top: 100px		
		&:first-letter
			color: $main
		@media (max-width: $breakpoint-mobile)
			font-size: 24px
	&-sub-heading
		margin: 0
		margin-top: 50px
		text-align: center
		font-family: $righteous
		font-size: 	26px
		font-weight: 300
		text-transform: uppercase
		letter-spacing: .3em
		@media (max-width: $breakpoint-mobile)
			font-size: 18px
	&-description
		margin: 0 auto
		margin-top: 40px
		width: 70%
		font-family: $openSans
		line-height: 2em
		letter-spacing: .07em
		text-align: center
		font-size: 14px
		@media (max-width: $breakpoint-mobile)
			font-size: 12px
	.portfolio
		height: 50vw
		margin-top: 50px
		color: $white
		@media (max-width: $breakpoint-tablet)
			height: 100vw
		@media (max-width: $breakpoint-mobile)
			height: 400vw
		.work
			overflow: hidden
			width: 50%
			height: 25vw
			background: url(../img/work1.jpg) center / cover no-repeat
			float: left
			position: relative
			@media (max-width: $breakpoint-tablet)
				height: 50vw
			@media (max-width: $breakpoint-mobile)
				width: 100vw
				height: 100vw
			&:nth-child(2)
				background: url(../img/work2.jpg) center / cover no-repeat
			&:nth-child(3)
				background: url(../img/work3.jpg) center / cover no-repeat
			&:nth-child(4)
				background: url(../img/work4.jpg) center / cover no-repeat
			&:hover
				.work-card
					bottom: 0
					&:after
						width: 20vw
						height: 20vw
			&-card
				background: rgba($main, 0.7)
				width: 100%
				height: 100%
				position: absolute
				bottom: -25vw
				left: 0
				margin: 0
				text-transform: uppercase
				font-family: $montserrat
				font-size: 22px
				letter-spacing: .2em
				transition: bottom .4s
				position: relative
				@media (max-width: $breakpoint-tablet)
					bottom: -50vw
				@media (max-width: $breakpoint-mobile)
					bottom: -100vw
					font-size: 18px
				&:before
					content: ''
					position: absolute
					display: block
					width: 80%
					height: 80%
					border: 1px solid $white
					top: 10%
					left: 10%
				.content
					position: absolute
					top: 50%
					left: 50%
					transform: translate(-50%, -50%)
					text-align: center
					a
						padding: 3px
						font-size: 14px
						color: $white
						transition: color .2s
						&:hover
							color: lighten($light, 10%)
	.contact-form
		width: 70%
		margin: 50px auto 0
		label
			font-family: $openSans
			font-size: 12px
			letter-spacing: .15em
			display: block
			font-weight: 600
			&:first-letter
				color: $main
		input,
		textarea
			margin-top: 10px
			width: 100%
			display: block
			background: $field-background
			border: none
			min-height: 40px
			box-sizing: border-box
			padding: 10px
			color: $more-color
			letter-spacing: .1em
			font-family: $openSans
			font-size: 12px
			&:focus
				outline: none
		.name,
		.email
			float: left
			width: 45%
			@media (max-width: $breakpoint-mobile)
				width: 100%
				margin-bottom: 20px
		.message
			width: 100%
			margin-top: 10px
		.name
			margin-right: 10%
		.submit
			margin-top: 30px
			input
				background: $main
				text-transform: uppercase
				font-family: $montserrat
				letter-spacing: .2em
				transition: background .2s
				cursor: pointer
				color: $white
				&:hover
					background: darken($main, 15%)
		.contact-result
			font-family: $openSans
			font-size: 13px
			letter-spacing: .1em
			text-align: center
			transition: color .2s
			color: rgba($white, 0)
			&.submited
				color: $main
	.info
		margin-top: 50px
		list-style-type: none
		text-align: center
		padding: 0
		margin-bottom: 50px
		&-block
			display: inline-block
			padding: 0 20px
			font-family: $openSans
			font-size: 14px
			letter-spacing: 0.05em
			line-height: 1em
			@media (max-width: $breakpoint-mobile)
				display: block
				margin-bottom: 50px
				font-size: 12px
			i
				font-size: 28px
				margin-bottom: 20px
				color: $main
				@media (max-width: $breakpoint-mobile)
					font-size: 20px

/*Overlay*/
.overlay
	position: fixed
	top: 0
	left: 0
	right: 0
	bottom: 0
	background: rgba($black, 0)
	z-index: 0
	transition: background .5s, z-index 0s .5s
	&.on
		z-index: 1
		background: rgba($black, .6)
		transition: background .5s, z-index 0s

/*Countdown*/
.countdown
	display: none
	text-align: center
	&.active
		display: block
	.count-box
		display: inline-block
		text-align: center
		color: $white
		margin: 10px 30px
		&:first-child
			margin: 10px 30px 10px 0
		&:last-child
			margin: 10px 0 10px 30px
		@media (max-width: $breakpoint-mobile)
			width: 50%
			margin: 20px 0 !important
		.countdown-num
			font-size: 42px
			font-family: $montserrat
			margin: 0
		.countdown-word
			font-family: $montserrat
			font-size: 10px
			text-transform: uppercase
			letter-spacing: .15em
			&:first-letter
				color: $main