/*
 * Footer Styles
 */

 .site-footer{
 	background-color: $secondary-color;
 	padding: 50px 0;
 	text-align: center;
 }

 .subscribe-form{
 	margin-bottom: 30px;
 	background-color: #0c0c0d;
 	padding: 30px;
 	text-align: left;

 	form{
		display: table;
		width: 100%;
	 	label,.control{
	 		display: table-cell;
	 		vertical-align: middle;
	 		@media screen and (max-width:640px){
				display: block;
				width: 100%;
			}
	 	}
	 	label{
	 		text-align: left;
	 		width: 350px;
	 		line-height: 1.2;
	 		@media screen and (max-width:640px){
				margin-bottom: 30px;
				width: 100%;
			}

	 		span{
	 			display: block;
	 			@include em(20);
	 			font-weight: 600;
	 			text-transform: uppercase;
	 			&:last-child{color: $accent-color}
	 		}

	 	}
 		input,button{ 
 			vertical-align: middle;
 			outline: none;
 			margin-bottom: 0;
 			transition:.3s ease;
 		}
 		.control{position: relative}
 		input{
 			border: 4px solid #28292c;
 			border-right: none;
 			background-color: transparent;
 			padding: 10px 100px 10px 20px;
 			width: 100%;
 			height: 70px;
 			color: $body-color;
 			&:hover,&:hover+button,
 			&:focus,&:focus+button{
 				border-color: $accent-color;
 			}
 		}
 		button{
 			height: 70px;
 			padding: 15px 20px 10px;
 			background-color: transparent;
 			border: 4px solid #28292c;
 			margin-left: -10px;
 			position: absolute;
 			right:0;
 			top:0;

 			&:focus{
 				border-color: $accent-color;
 			}
 		}
 	}
 }

 .social-links{
 	margin: 50px 0;
 	a{
 		color: $accent-color;
 		@include em(20);
 		display: inline-block;
 		padding: 10px;
 		transition: .3s ease;

 		&:hover,&:focus{
 			color: lighten($accent-color,15%);
 		}
 	}
 }

 .copy{
 	@include em(14);
 	color: #494949;
 }