/* Color Palette for Reference */

.orange {color:#EE944C;}
.beige {color:#F5F5DC;}
.gray {color:#191919;}

@media (min-width:768px){
	.threequarterCol {width:74%; float:left; margin-right:20px; margin-bottom:20px;}
	.singleCol {width:100%; padding-top:0;}
	article {width:100%; margin: auto; margin-top:30px;}
	aside {width:24%; position:relative; top:0;}
	header {height: auto;}
	#transcript {display: none !important;}
}

@media (max-width: 768px) {
	#logoArea {margin-top:0!important; margin-left:8px!important; }
	.logo {height: 50px !important;}
	#contactArea, #myBtn {display:none;}
	header {height: 20%;}
	header p {padding-top: 5px !important;}
	nav {position:relative; top: -50px;}
	.topNav {padding-left: 10px !important;}
	.topNav >li {padding-right:15px !important;}
	article{margin-top: 15px; border-radius: 0 !important;}
	.centeredContent {width: 100% !important;}
	.centeredContent h1 {font-size:18px;}
	.centeredContent p {padding:10px;}
	iframe {position:relative; left:0 !important; width:90% !important; height:auto;}
	.formContents {width:100% !important; margin-left:-10px !important; box-shadow: none !important; border:none !important; padding-left:0 !important; background-color:transparent !important;}
	textarea {width: 100% !important; margin:auto !important;}
	input[type="submit"] {width: 50% !important;}
	#transcript {display: none !important;}
}


/* Page Layout */
html, body {
	height: 100%;
	overflow-x: hidden;
}

body {
	margin:0; 
	display:block;
	background-color: #666666; 
	color:#191919;
	font-family: 'Roboto', Arial, sans-serif;
	line-height: 1.6;
}

header {
	width:100%;
	background-color: #F5F5DC;
	padding:10px;
	box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12);
}

/* Header/Logo Area */

header p{
	padding-top: 15px;
	font-style: italic;
}

#logoArea {
	margin-left: 70px;
}

.logo {
	display: block;
	float: left;
	margin-right: 20px;
}

#contactArea {
	float:right;
	margin-right:70px;
	margin-top: -140px;
}
#contactArea ul {
	list-style-type: none;
	font-size:12px;
}


#contactArea .fa {
	color:#191919;
	font-size:18px;
	padding-left: 0;
	padding-right: 20px;
}

#contactArea .fa:hover {
	color: #EE944C;
}

#contactArea li:last-child {
	text-align:center;
}

nav { 
	width:100%;	
	font-size: 16px;
	padding-top: 10px;

	margin-bottom: 5px;
}

/* Nav elements */
.topNav  {
	list-style-type: none;
	padding-top:25px;
	padding-left: 75px;
}

.topNav  > li {
	display:inline;
	padding-right:25px;
}


.topLink {
	color: #191919 !important;
	text-decoration: none !important;
}

.topLink:hover {
	color: #EE944C !important;
	text-decoration: underline !important;
}

.activePage {
	border-bottom: 2px solid #191919;
}

.activePage:hover {
	text-decoration: none !important;
	color: #191919 !important;
	cursor:default;
}

main {
	max-width:1200px;
	margin:auto;
}

article {
	min-height: 100%;
	padding: 1px 30px;
	margin-bottom:50px;
	display:block;

}

article, section, aside {
	background-color: #F5F5DC;
	box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12);
	overflow:hidden;
	border-radius:8px;
}

section, aside {
	border: 1px solid #DCDCC6;
}

aside {
	margin-bottom: 20px;
}

.pageContents {
	padding-left: 15px;
	padding-bottom: 20px;
}

footer { 
	position:relative;
	bottom:0;
	padding: 16px 0;  
	width:100%; 
	background-color:#F5F5DC;
	box-shadow:0px -1px 0px rgba(0,0,0,0.16);
	font-size: 18px; 
	display: block; 
	clear:both; 
	text-align: center; 
	margin:0; 
	line-height: 0;
}

footer>a {
	color: #191919;
	font-size: 24px;
}

footer>p {
	padding-bottom:10px;
}

.fa {
	color:#191919;
	vertical-align: top; 
	padding:10px;
}

.fa:hover {
	color:#EE944C;
}

/* Fonts */
h1 {
	font-size:1.75em;
	padding-top: 0;
}

h2 {
	margin-top: 10px;
	margin-bottom: -10px;
}

a:link, a:visited,
span.gc-cs-link {
	color: #EE944C;
	text-decoration: none;
}

a:hover, a:active,
span.gc-cs-link:hover {
	color: #666666;
	text-decoration: underline;
}

aside ul {
	list-style-type: none;
	padding-left: 0;
	margin-bottom:0;
}

iframe {
	padding: 20px;
	position:relative;
	left:11%;
	border:none;
}

.centeredContent {
	width: 75%;
	margin: auto;
	text-align: center;
}

#myBtn {
	position: fixed;
	right: 20px;
	z-index: 99;
	border: none;
	outline: none;
	background-color: transparent;
	color:#F5F5DC;
	cursor: pointer;
	padding: 15px;
	border-radius: 10px;
	font-size: 36px;
}

#myBtn:hover {
	background-color: transparent;
	color: #F5F5DC;
}

#myBtn .fa {
	padding: 2px 5px 3px 5px;
	box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12);
	border: 1px solid #F5F5DC;
	border-radius: 18px;
	margin-bottom: 30px;
	font-size: 48px;
	color: #F5F5DC;
}

#myBtn title {
	background-color: transparent;
}

/* Navbar */
.navbar {
    overflow: hidden;
    background-color: transparent;
}

.navbar a {
    float: left;
    font-size: 16px;
    color: #191919;
    text-align: center;
    padding: 14px 16px;
    padding-right:30px;
    text-decoration: none;
}

.navbar a:hover {
	color: #EE944C;
	text-decoration: underline;
}

#learnMore {
	position:relative;
	width:100%;
	margin-bottom:30px;
	padding-top: 30px;
	text-align: center;
}

.linkButton {
	border: 2px solid #EE944C;
	background-color: #F5F5DC;
	color: #191919 !important;
	font-size:16px;
	text-decoration: none !important;
	padding:10px;
	border-radius: 30px;
}

.linkButton:hover {
	border: 2px solid #F5F5DC;
	background-color: #EE944C;
	color: #FFFFFF !important;
}

#teamMember, #nd4Clients {
	width:100%;
	float:left;
}

#nd4Clients img {
	height: 100px;
    margin: 10px;
}
.ourTeam, .ourClients  {
	list-style-type: none;
	position: relative;
    float:left;
    margin-right:20px;
}

.ourTeam > li {
	text-align:center;
}

.ourClients > li {
	display: inline;
}
.name {
	font-size:18px;
	font-weight:bold;
}

.role {
	font-style: italic;
}

#teamMember .fa {
	color: #EE944C;
}

.ourTeam img {
	height: 150px;
	width: 150px;
	border-radius: 80px;
	border: 1px solid #EE944C;
	box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12);
}

form {
	width: 100%;
	margin:auto;
	text-align: center;
	margin-bottom: 20px;
}

.formContents {
	width: 80%;
	padding: 40px 0;
	border: 1px solid #DCDCC6;
	box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12);
	margin:auto;
}

textarea {
	font-family: 'Roboto', Arial, sans-serif;
	font-size: 16px;
	padding: 10px;
}

textarea:focus {
	outline: none !important;
    border:2px solid #EE944C;
}

input[type="submit"] {
	font-size: 16px;
	width:20%;
	margin-top: 20px;
	padding: 10px 20px;
	border-radius: 25px;
	background-color: transparent;
	border: 2px solid #EE944C;
}

input[type="submit"]:hover {
	background-color: #EE944C;
	color: #FFFFFF;
	cursor: pointer;
}