@charset "UTF-8";
/* CSS Document */

@charset "UTF-8";

* {
	box-sizing: border-box;
	margin: 0;
}

body, html {
	background: #cdbcdd;
	color: #434343;
	font-family: "Gill Sans", Helvetica, Arial, "sans-serif"
}

.backgroundBox {
	background-color: white;
	width: 80%;
	margin: 120px auto;
	box-shadow: 20px 20px 80px 10px rgba(0,0,0,.25); 
	padding: 75px 0px;
}

.header {
	text-align: center;
	padding-bottom: 75px;
	width: 80%;
	margin: auto;
}

.header h1 {
	font-family: linotype-didot-headline, serif;
	font-weight: 400;
	font-style: normal;
	font-size: 50px;
	margin-bottom: 10px;
}

.header h2 {
	font-size: 26px;
	font-weight: lighter;
	letter-spacing: 5px;
	margin-bottom: 30px
}

.header h3 {
	font-family: linotype-didot, serif;
	font-weight: 700;
	font-style: italic;
	font-size: 26px;
}

.main {
	margin: auto;
	width: 70%;
}

.main h3 {
	color: #cdbcdd;
	font-size: 20px;
	font-weight: 500;
	letter-spacing: 1px;
	margin-bottom: 20px;
}

.main h4 {
	font-weight: 100;
}

.description {
	font-size: 14px;
	line-height: 25px;
	width: 50%;
	padding: 0px 30px 50px 0px;;
	float: left;
}

.demo {
	float: right;
	width: 50%;
	padding: 0px 0px 50px 30px;
}

.demo h4 {
	line-height: 40px;
}

audio {
	width: 100%;
	margin-bottom: 5px;
}

.contact {
	clear: left;
	padding-bottom: 50px;
}

.contact a {
	text-decoration: none;
	color: #434343;
}

#phone {
	padding-bottom: 30px;
	width: 145px;
}

#phoneIcon {
	width: 30px;
	float: left;
	padding-left: 5px;
	margin-right: 21px;
}

#email {
	clear: left;
	width: 205px;
}

#emailIcon {
	width: 36px;
	float: left;
	margin-right: 20px;
}

#vcLogo {
	width: 50px;
	margin: auto;
}

@media only screen and (max-width:950px){
	.backgroundBox {
		margin: 75px auto;
	}
	.main {
		width: 80%;
		text-align: center;
	}
	.description {
		float: none;
		width: 100%;
		padding: 0px 0px 50px 0px;
	}
	.demo {
		float: none;
		width: 100%;
		padding: 0px 0px 50px 0px;
	}
	audio {
		margin-bottom: 20px;
	}
	.contact {
		padding: 0px 0px 75px 0px;
	}
	#phone, #email {
		margin: auto;
		width: inherit;
	}
	#phoneIcon, #emailIcon {
		float: none;
		margin: auto;
		padding-bottom: 20px;
	}
}

@media only screen and (max-width: 700px){
	.header h1 {
		font-size: 35px;
	}
	
	.header h2 {
		font-size: 20px;
	}
	
	.header h3 {
		font-size: 24px;
	}
}

@media only screen and (max-width: 500px) {
	
	.backgroundBox {
		padding: 50px 0px;
	}
	
	.header h1 {
		font-size: 28px;
	}
	
	.header h2 {
		font-size: 16px;
	}
	
	.header h3 {
		font-size: 20px;
	}
}