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

/* ============= WHOLE SITE ============ */
body {
	margin: 0;
	color: #333;
	font-family: Verdana, Helvetica, Arial, Sans-Serif;
	font-size: 14px;
	font-weight: 400;
	background-color: #000;
}
#pageWrapper {
	background-color: #fff;
}
a, a:link, a:visited, a:active {
	color: #004477;
	text-decoration: none;
}
a:hover {
	color: #22aa22;
	text-decoration: underline;
}
.noLine:hover {
	text-decoration: none;
}
h1 {
	margin: 0;
	padding: 0;
	color: #004477;
	font-size: 36px;
	font-weight: 100;
	clear: both;	
}
h2 {
	color: #004477;
	font-size: 20px;
	font-weight: 400;
	clear: both;
}
h3 {
	color: #004477;
	font-size: 16px;
	font-weight: 600;
	clear: both;
}
img {
	border: 0;
	height: auto;
	max-width: 100%;
}
p {
	margin: 0 0 20px 0;
	padding: 0;
	line-height: 160%;
}
p.error-msg {
	background-color: #FF9494;
	color: #f00;
	padding: 7px;
}

.pageText ul li {
	padding-bottom: 0.8em;
}

/* ============= TOP ROW ============ */
#topLogoRow {
	margin: 0;
	padding: 1.35em 0 1em 0;
	text-align: center;
	width: 100%;
}
#topLogoRow img {
	max-width: 635px;
}
@media screen and (max-width: 706px) {
	#topLogoRow img { max-width: 90%; }
}

/* ============= MENU ROW ============ */
#menuRow {
	background-color: #004477;
}
#menuRowCntr {
	max-width: 800px;
	margin: 0 auto 0 auto;
	padding: 0;
	text-align: center;
	font-size: 0;
	}
#menuRowCntr ul {
	display: inline-block;
	position: relative;
	margin: 0;
	padding: 0;
	color: #fff;
	font-size: 0;
}
@media screen and (max-width: 800px) {
	#menuRowCntr ul { display: none; }
}
#menuRowCntr ul li {
	float: left;
	font-size: 14px;
	font-weight: 600;
	line-height: 100%;
	list-style-type: none;
	text-transform: uppercase;
}
#menuRowCntr ul li a {
	display: block;
	padding: 23px 40px 23px 40px;
	color: #fff;
}
#menuRowCntr ul li div.popMenu {
	display: none;
}
#menuRowCntr ul li:hover div.popMenu {
	display: block;
	position: absolute;
	padding: 10px 0 20px 0;
	text-align: left;
	background-color: #004477;
}
#MenuRowCntr ul li div {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s, opacity 0.5s linear;
}
#menuRowCntr ul li:hover div {
  visibility: visible;
  opacity: 1;
}
#menuRowCntr ul li:hover div a {
	display: block;
	width: 140px;
	padding: 10px 40px 10px 40px;
}

/* ============= DROP DOWN MENU (for small screens) ============ */
/* dropDown Button */
.dropBtn { display: none; }
 @media screen and (max-width: 800px) {
	.dropBtn {
		background-color: #004477;
		border: none;
		color: white;
		cursor: pointer;
		display: block;
		font-size: 14px;
		font-weight: 600;
		line-height: 100%;
		padding: 23px;
		text-align: center;
		text-transform: uppercase;
	}
}
/* dropDown button on hover & focus */
.dropBtn:hover, .dropBtn:focus { background-color: #004477; }

/* The container <div> - needed to position the dropDown content */
.dropDown {
    position: relative;
    display: inline-block;
	width: 100%;
}
/* dropDown content (Hidden by Default) */
.dropDown-content {
    display: none;
    position: absolute;
    background-color: #004477;
    min-width: 160px;
	text-align: center;
	text-transform: uppercase;
	width: 100%;
}
/* Links inside the dropDown */
.dropDown-content a {
    color: #fff;
    padding: 0 0 12px 0;
	font-size: 12px;
    text-decoration: none;
    display: block;
}
/* Change color of dropDown links on hover */
.dropDown-content a:hover {
	background-color: #004477;
	text-decoration: underline;
}
/* Show the dropDown menu (use JS to add
this class to the .dropDown-content container
when the user clicks on the dropDown button) */
.show {	display: block; }


/* ============= HOME PAGE BANNER ============ */
#bannerRow {
	overflow: hidden;
}
/* Common Screen widths: 360, 480, 640, 800, 1024, 1280, 1920 */

/* ============= PAGE TITLE ============ */
#pageTitleRow {
	background-color: #eee;
	padding: 35px 0 35px 0;
}
#pageTitleRowCntr {
	max-width: 800px;
	margin: 0 auto 0 auto;
}
@media screen and (max-width: 1024px) {
	#pageTitleRowCntr {
	padding: 0 3% 0 3%;
	width: 94%;
	}
}

/* ============= PAGE CONTENT ============ */
#pageContentRow {
	min-height: 100%;
	padding: 35px 0 35px 0;
	width: 100%;
}
#pageContentCntr {
	max-width: 800px;
	margin: 0 auto 0 auto;
}
@media screen and (max-width: 1024px) {
	#pageContentCntr {
	padding: 0 3% 0 3%;
	width: 94%;
	}
}
#pageContentCntr ul {
	margin: 0 0 20px 0;
}
.photoMalcolm {
	float: left;
	margin: 0 10px 0 0;
}
.photoMalcolm img {
	width: auto;
	height: 350px;
}
@media screen and (max-width: 480px) {
	.photoMalcolm {
		float: none;
		text-align: center;
		margin: 0 0 10px 0;
		overflow: hidden;
	}
	.photoMalcolm img {
		max-width: 100vw;
		height: auto;
		max-height: 440px;
		margin: -10px 0 -110px 0;
	}
}
#portraitLuca {
	float: right;
	margin: 0 0 10px 10px;
	font-size: 0.8em;
	line-height: 1.2em;
	text-align: center;
}
#portraitLuca img {
	margin-bottom: 10px;
	width: 350px;
}
@media screen and (max-width: 640px) {
	#portraitLuca {
		float: none;
		text-align: center;
		margin: 0 auto 10px auto;
	}
	#portraitLuca img {
		width: auto;
		max-width: 94vw;
		height: auto;
		max-height: 300px;
	}
}

/* ============= CONTACT FORM ============ */
.leftCol {
	display: inline-block;
	width: 60%;
}
.rightCol {
	diplay: block;
	float: right;
	width: 40%;
}
@media screen and (max-width: 640px) {
	.leftCol {
		display: block;
		width: auto;
	}
	.rightCol {
		diplay: block;
		width: auto;
		margin: 30px 0 0 0;
		float: none;
	}
}
.formSpacer {
	width: 1px;
	height: 10px;
	border: none;
}
form {
	clear: both;
	display: block;
	margin: 0 0 20px 0;
}
#contactForm label {
	display: block;
	font-size: 14px;
	margin: 0;
}
#contactForm input[type="text"], #contactForm textarea {
	width: 65%;
	border: 1px solid #9a9a9a;
	color: #333;
	display: block;
	font-family: 'Open Sans', Arial, Helvetica, sans-serif;
	font-size: 15px;
	font-weight: 300;
	padding: 5px 1% 5px 1%;
	-webkit-transition: border 0.5s linear;
	-moz-transition: border 0.5s linear;
	-ms-transition: border 0.5s linear;
	-o-transition: border 0.5s linear;
	transition: border 0.5s linear;
}
#contactForm input[type="text"]:hover,
#contactForm input[type="text"]:focus,
#contactForm textarea:hover,
#contactForm textarea:focus {
	border: 1px solid #222;
}
#contactForm input[type="submit"] {
	padding: 3px 15px;
	margin: 0;
	background-color: #004477;
	border: 1px solid #004477;
	color: #fff;
	font-family: 'Open Sans', Arial, Helvetica, sans-serif;
	font-size: 15px;
	font-weight: 400;
	min-height: 15px;
	-webkit-transition: background 0.5s linear;
	-moz-transition: background 0.5s linear;
	-ms-transition: background 0.5s linear;
	-o-transition: background 0.5s linear;
	transition: background 0.5s linear;
}
#contactForm input[type="submit"]:hover {
	background-color: #222;
	border: 1px solid #222;
}

/* ============= FOOTER ROW ============ */
#footerRow {
	margin: 0;
	padding: 30px 0 30px 0;
	background-color: #333;
}
#footerCntr {
	max-width: 600px;
	margin: 0 auto;
	text-align: center;
	color: #fff;
	font-size: 0.85em;
}
@media screen and (max-width: 1024px) {
	#footerCntr {
	padding: 0 3% 0 3%;
	width: 94%;
}
.footerContent h2 {
	color: #999;
	font-size: 18px;
	font-weight: 400;
	margin: 15px 0;
}
.footerContent {
	line-height: 2;
}
.footerContent a {
	color: #fff;
}