body{
margin: 0;
padding: 0;
width: 100%;
 background-color: #421C52;
 scroll-behavior: smooth;
}
h1 {
font-family:"Arvo";
font-weight:normal;
font-size: 55px;
text-align: center;
color: #fff;
margin: 0;
padding: 0;
}
h2 {
font-family:"Arvo";
font-weight: normal;
font-size: 40px;
text-align: center;
color: #fff;
margin: 0;
padding: 0;
}
h3 {
font-family: Oswald;
font-weight: normal;
font-size: 16px;
text-align: center;
margin: 5px 0;
padding: 0;
z-index: 1;
position: relative;
}
.center { margin: 0 auto; }
.content{ margin: 0 auto; width: 100%S; }
.clear { clear: both; }
#header {
width: 100%;
background: url('../img/header-bg.png');
height: 80px;
position: fixed;
margin-top: 30px;
}
#nav {float: right; margin-top: 20px; margin-right: 20px;}
#logo a { color: #fff; text-decoration: none; float: left; font-size: 30px; margin-top: 20px; font-family:"Arvo"; margin-left: 20px;}
#nav ul{
list-style: none;
display: block;
margin: 0 auto;
list-style: none;
}
#nav li{
margin-top: 9px;
float: right;
padding-left: 21px;
}
#nav li a { color: #fff; opacity:0.6; font-size: 14px; text-decoration: none; font-family: 'Arvo'; }
#nav li a.active { color: #fff; opacity:1; border-bottom: 2px solid #fff; }
#nav li a:hover { color: #fff; opacity:1; }
.quotes {
font-family: 'Goudy Bookletter 1911', serif;
font-weight: normal;
font-size: 30px;
text-align: left;
margin: 50px auto;
color: white;
}

 .word { font-family:"Arvo"; margin: 70px 0 0 75px; color: #fff; font-size: 7em; } 
 .quotes_container { width: 90%; margin: 0 auto;}
#ribbon { background: url('../img/ribbon.png')no-repeat; width: 251px; height: 48px; margin: 0 auto; display: block; position: relative; top: -38px; }
#slide1, #slide2{ width: 100%; }
#slide1{
background: url(../img/keyboard.jpg) 50% 0 no-repeat fixed;
color: #fff;
height: 600px;
margin: 0;
padding: 200px 0 260px 0;
background-size: cover;
}
#slide2{
background: linear-gradient(
      rgba(0, 0, 0, 0.5),
      rgba(0, 0, 0, 0.5)
    ),  url(../img/worktable.jpg) 50% 0 no-repeat;
color: #000;
height: 300px;
margin: 0 auto;
overflow: hidden;
padding: 200px 0;
}
#slide3{
background: linear-gradient(
      rgba(0, 0, 0, 0.5),
      rgba(0, 0, 0, 0.5)
    ),  url(../img/work.jpg) 50% 0 no-repeat fixed;
color: #000;
height: 600px;
padding: 170px 0 0 0;
background-size: cover;
}
#slide4{
background: linear-gradient(
      rgba(0, 0, 0, 0.5),
      rgba(0, 0, 0, 0.5)
    ), url(../img/collab.jpg) 50% 0 no-repeat;
color: #FFF;
height: 300px;
padding: 200px 0;
}
#slide5{
background: url(../img/glasses.jpg) 50% 0 no-repeat fixed;
height: 200px;
margin: 0 auto;
padding: 250px 0;
color: #fff;
background-size: cover;
}
#copyright { color: #000; font-family:"Arvo"; font-size: 14px; margin-top: 20px; text-align: center;}
#copyright a { text-decoration: none; color: #FFF; }

.contact-form {
		font-family: 'Arvo';
		width: 500px;
		padding: 30px;
		background: #FFFFFF;
		margin: 50px auto;
		box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.22);
		-moz-box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.22);
		-webkit-box-shadow:  0px 0px 15px rgba(0, 0, 0, 0.22);
}

.form-title{
	background: #421C52;
	text-transform: uppercase;
	font-family: 'Arvo', sans-serif;
	color: #FFF;
	font-size: 18px;
	font-weight: 100;
	padding: 20px;
	margin: -30px -30px 30px -30px;
}
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea,
.contact-form select 
{
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	outline: none;
	display: block;
	width: 100%;
	padding: 7px;
	border: none;
	border-bottom: 1px solid #ddd;
	background: transparent;
	margin-bottom: 10px;
	font: 16px Arial, Helvetica, sans-serif;
	height: 45px;
}
.contact-form textarea{
	resize:none;
	overflow: hidden;
}
.contact-form input[type="button"], 
.contact-form input[type="submit"]{
	-moz-box-shadow: inset 0px 1px 0px 0px #493451;
	-webkit-box-shadow: inset 0px 1px 0px 0px #493451;
	box-shadow: inset 0px 1px 0px 0px #493451;
	background-color: #421C52;
	border: 1px solid #1f022b;
	display: inline-block;
	cursor: pointer;
	color: #FFFFFF;
	font-family: 'Arvo', sans-serif;
	font-size: 14px;
	padding: 8px 18px;
	text-decoration: none;
}
.contact-form input[type="button"]:hover, 
.contact-form input[type="submit"]:hover {
	background:linear-gradient(to bottom, #1f022b 5%, #421C52 100%);
	background-color:#1f022b;
}
