@charset "utf-8";

#contact {
	position:absolute;
	top:80px;
	background-color:rgba(0,0,0,.8);
	text-align:center;
}

body {
	background-image:url(../images/bg-contact.jpg) !important;
	background-attachment:fixed;
	background-repeat:no-repeat;
	background-position:center;
	background-size:cover;
}

#contact {
	background-color: rgba(0,0,0,.8);
	width:1000px;
	left:50%;
	margin-left:-500px;
}

#contact #left {
	width: 310px;
	float:left;
	margin: 20px;
	text-align: left;
}

#contact #right {
	width: 610px;
	float: left;
	margin: 67px 20px 20px 20px;
}

#contact #left #name {
	font-size: 24px;
	color: #FFF;
	display: block;
}

#contact #left #who {
	font-size: 18px;
	color: #FFF;
	display: block;
	margin-bottom: 20px;
}

#contact #left a, #contact #left a:active, #contact #left a:visited, #contact #left a:hover {
	color:#FFF;
	text-decoration: none;
	font-size: 18px;
	margin: 5px 0;
	display: block;
}

input[type=text], textarea {
	padding:10px 15px;
	border: 1px solid #FFF;
	width:calc(100% - 40px);
	background-color: transparent;
	margin: 20px 0;
	display: block;
	color: #FFF;
}

button {
	padding:10px 15px;
	border: 1px solid #FFF;
	background-color: transparent;
	float: right;
	color: #FFF;
	margin-right:8px;
}
button:hover {
	background-color:#000000;
}
button:active {
	background-color:#CCC;
}

@media (min-width: 1001px) {
	
}
@media (max-width: 1000px) {
	#contact {
		width:600px;
		left:50%;
		margin-left:-300px;
	}
}
@media (max-width:600px) {
	#contact {
		width:100%;
	}
}