body {margin:0; padding:0; font:13px/19px Arial,Helvetica,'Liberation Sans',FreeSans,sans-serif;}
body {background:url(images/interview.png) #CCC left top; background-size:cover; background-attachment:fixed; 
background-position: center; background-repeat: no-repeat;  }

#logo {float:left; width:100%; margin:0%; height:70px; top:0; left:0; padding:0; background-color:white; position:fixed; z-index:999999999;}
#logo .logo {width:60%; float:left;}
#logo .logo h1 { margin:0 0 0 7%; padding:20px 0; font-family:impact; text-shadow:.2px .2px .2px black; font-weight:700; font-size: 300%; }
#logo .logo a {color:black; text-decoration:none;}
#logo .number {float:right; width:40%;}
#logo .number h2 {font-size:250%; padding-top:-4px; float:right; margin-right:10%;}


#topnav {float:left; position:relative; margin:0%; height:45px; top:70px; width:100%; background-color:#03265e; position:fixed; z-index:999999999; border-bottom:3px white solid; }
#topnav ul {width:100%; float:left;}
#topnav ul li {list-style:none; display:inline; margin-right:20px; height:45px;}
#topnav ul li a {color:white; text-decoration:none; font-size:140%; }
#topnav ul li a:hover {text-decoration:underline;}


.slider {
	width: 100%;
	margin: 0em auto;
	float:left;
	margin:115px 0% 0 0;
	
}

.slider-wrapper {
	width: 100%;
	height:650px;
	position: relative;
	margin-top:0px;
}

.slide {
	float: left;
	position: absolute;
	width: 100%;
	height: 100%;
	opacity: 0;
	transition: opacity 2s linear;

}

.slider-wrapper > .slide:first-child {
	opacity: 1;
}

#content {float:left; position:relative; width:100%; background-color:white; height:auto; border-top:1px black solid;}
#content h2 {text-align:center; width:60%; margin:25px 20% 10px 20%; font-size:190%; line-height:28px;}
#content p {text-align:center; width:60%; margin:20px 20%; font-size:110%;}
#content h3 {margin-left:15%; margin-top:30px; font-size:130%;}
#content ul {width:70%; margin:0 15% 70px 15%;}
#content ul li {font-size:120%; margin-bottom:10px;}
#content h4 {text-align:center; background-color:black; color:white; height:35px; padding-top:12px; width:12%; font-size:105%; margin:20px 44%; border-radius:10px;}
#content a {text-decoration:none;}

#content1 {float:left; position:relative; width:100%; margin-top:115px; background-color:white; height:auto; border-top:1px black solid;}
#content1 h2 {text-align:center; width:60%; margin:25px 20% 10px 20%; font-size:190%; line-height:28px;}
#content1 p {text-align:center; width:60%; margin:20px 20%; font-size:110%;}
#content1 h4 {text-align:center; background-color:black; color:white; height:35px; padding-top:12px; width:12%; font-size:105%; margin:20px 44%; border-radius:10px;}
#content1 a {text-decoration:none;}

#contact {width:100%; float:left; margin:100px 0 0 0; padding-bottom:50px; background-color:white;}
#contact h3 {margin-top:40px; color:blue; font-size:170%; text-align:center; font-family:tahoma;}

.container {
    border-radius: 6px;
    background-color:none;
    padding: 20px;
	box-shadow:0 0 15px;
float:right; width:41%;
 margin:70px 4% 20px 0%; z-index:9999;
}
.container h1 {text-align:center; font-size:250%; margin-bottom:-30px;}

/* Style inputs with type="text", select elements and textareas */
input[type=text], select, textarea {
    width: 100%; /* Full width */
    padding: 12px; /* Some padding */  
    border: 1px solid #ccc; /* Gray border */
    border-radius: 4px; /* Rounded borders */
    box-sizing: border-box; /* Make sure that padding and width stays in place */
    margin-top: 6px; /* Add a top margin */
    margin-bottom: 16px; /* Bottom margin */
    resize: vertical /* Allow the user to vertically resize the textarea (not horizontally) */
}

/* Style the submit button with a specific background color etc */
input[type=submit] {
    background-color: #03265e;
    color: white;
    padding: 12px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

/* When moving the mouse over the submit button, add a darker green color */
input[type=submit]:hover {
    background-color: #B32B33;
opacity:.8;
}

/* Add a background color and some padding around the form */
#form {
    border-radius: 6px;
    background-color:none;
    padding: 20px;
	box-shadow:0 0 15px;
float:left; width:55%;
 margin:0px 0 70px 2%; z-index:9999;
}
#form h1 {text-align:center; margin-left:10px;}
#form h2 {color:black; text-align:center;}
#form p {color:green;}
#form h6 {color:red;}


.maps {float:left; margin-top:70px; width:46%; }
.maps iframe {width:93%; height:350px; margin-left:3%; box-shadow:0 0 5px black;}
.maps h1 {width:77%; margin:20px 0 0 10%; line-height:26px; text-align:center; padding:15px 0;  background-color:#03265e; box-shadow:0 0 5px black; color:white; font-size:120%; font-family:tahoma; border-radius: 10px;}
.maps h1 a {color:white; padding-bottom:10px;}


#footer {float:left; position:relative; margin:0; width:100%; background-color:#03265e; height:100px;}
#footer .social {float:left; width:50%;}
#footer .social ul {width:80%; margin:30px 10%;}
#footer .social ul li {display:inline; margin-right:25px; }
#footer .social ul li a {color:white; font-size:300%;}
#footer .address {float:right; width:50%;}
#footer .address p {text-align:right; color:white; margin-right:15%; font-size:110%;}
.bold {font-weight:700;}

@media screen and (max-width:1000px) {
.slider-wrapper {height:550px;}
#content1 h4 {width:16%; margin:20px 42%;}
}	
@media screen and (max-width:850px) {
	#logo {height:120px;}
#logo .logo {width:100%; margin:0; text-align:center;}
#logo .logo h1 {margin:0;}
#logo .number {width:100%; float:left; margin:0; text-align:center; }
#logo .number h2 {width:100%; margin:20px 0px 0 0; text-align:center;}
#topnav {top:120px;}
#content1 {margin-top:160px;}
#contact {margin-top:150px;}
.maps {width:76%; margin:50px 12% 0 12%; }
#topnav ul {margin-left:-3.5%;}
.container {width:81%; margin:40px 7% 0 12%;}
.slider-wrapper {height:470px;}
.slider {margin-top:160px;}
#content1 h4 {width:24%; margin:20px 38%;}
#content h4 {width:24%; margin:20px 38%;}
}
@media screen and (max-width:700px) {
.slider-wrapper {height:400px;}
#footer .social {width:100%;}
#footer .social ul {text-align:center; margin-left:5%;}
#footer .address {width:100%;}
#footer .address p {text-align:center; margin:0;}
#footer {height:170px;}
#content p {text-align:center; width:80%; margin:20px 10%;}
#content1 p {text-align:center; width:80%; margin:20px 10%;}
}
@media screen and (max-width:550px) {
#topnav ul {margin-left:-5.5%;}
.slider-wrapper {height:300px;}
#content1 h4 {width:36%; margin:20px 32%;}
#content h4 {width:36%; margin:20px 32%;}
#content ul {width:85%; margin:0px 5% 70px 5%;}
}	
@media screen and (max-width:500px) {
.maps {width:92%; margin:40px 4% 0 4%; }
.container {width:85%; margin:40px 3% 0 7%;}
}
@media screen and (max-width:450px) {
#logo .logo h1 {font-size:250%;}
#logo .number h2 {font-size:200%; margin-top:10px;}
#logo {height:110px;}
#topnav {top:110px;}
#content1 {margin-top:150px;}
.slider-wrapper {height:250px;}
.slider {margin-top:150px;}
#content p {text-align:center; width:90%; margin:20px 5%;}
#content1 p {text-align:center; width:90%; margin:20px 5%;}
.maps {width:99%; margin:20px .5% 0 .5%; }
#content ul {width:85%; margin:0px 5% 70px 2%;}
}
@media screen and (max-width:400px) {
#content ul {width:85%; margin:0px 5% 70px -1%;}
#content h3 {margin-left:6%;}	
}
@media screen and (max-width:370px) {
#logo .logo h1 {font-size:220%;}
#logo .number h2 {font-size:180%; margin-top:5px;}
#logo {height:105px;}
#topnav {top:105px;}
#content1 {margin-top:145px;}
.slider {margin-top:145px;}
.slider-wrapper {height:200px;}
#content1 h4 {width:44%; margin:20px 28%;}
#content h4 {width:44%; margin:20px 28%;}
}