/*
CSS Document
complied by Guy Hoogewerf - www.ncompass.co.uk - ©2011
*/

@font-face {
  font-family: 'GillSansMT';
  src: url('../fonts/GillSansMT.woff') format('woff'),
       url('../fonts/GillSansMT.ttf') format('truetype'),
       url('../fonts/GillSansMT.ttf') format('truetype'),
       url('../fonts/GillSansMT.svg#GillSansMT') format('svg');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'gillsansmt';
  src: url('../fonts/gillsansmt.eot');
  src: url('../fonts/gillsansmt.eot?#iefix') format('embedded-opentype'),
       url('../fonts/gillsansmt.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'ColonnaMT';
  src: url('../fonts/ColonnaMT.woff') format('woff'),
       url('../fonts/ColonnaMT.ttf') format('truetype'),
       url('../fonts/ColonnaMT.svg#ColonnaMT') format('svg');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'colonna-mt';
  src: url('../fonts/colonna-mt.eot');
  src: url('../fonts/colonna-mt.eot?#iefix') format('embedded-opentype'),
       url('../fonts/colonna-mt.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}





/* use this class to attach this font to any element i.e. <p class="fontsforweb_fontid_1416">Text with this font applied</p> */
.font {
  font: 10pt "GillSansMT";
}


* { margin:0; padding:0; }

/* mac hide \*/
html, body { height:100%; width:100%; }
/* end hide */
html {
}
body {
	color: #003366;
	font: 11pt "GillSansMT";
    text-align:left;
	overflow:auto;
	background-color:#fcf8ee;
}
body .scroll{
	overflow:auto;
}
article, aside, figure, footer, header, hgroup, menu, nav, section {
	display:block;
}
.clear {
	clear:both;
}
.loading {
	background:url(../images/ajax-loader.gif) no-repeat 1px;
	height:16px;
	width:16px;
	display:none; 
	margin: 0 auto;
	padding-top: 20px;
}
.done {
	min-height:200px;
	padding-left:20px;
	width:90%;
	margin:20px auto;
	display:none;
}  
fieldset .hightlight {
	font-style:italic;
	border:2px solid #9F1319;
	background:url(../images/iconCaution.gif) no-repeat right;
}
a:link, a:visited {
	color:#ffffff;
	text-decoration:none;
}
a:hover, a:active {
	color:#ffffff;
	text-decoration:underline;
}
a, a:link, a:active, a:visited {
  transition: all 0.3s ease-in-out 0s;
}
/* Background */
#bg {
    position:relative;
    z-index:1;
    right:0;
    top:5px;
    left:380px;
    bottom:0;
    width: 100%!important;
}
#bg img {
    height:40%;
    position:absolute;
    width:40%;
}


section.michael-container {
	max-width: 340px;
	width: 100%;
}
section.slide-container {
	width: auto; 
	padding-right: 20px;
}
#content-container {
	display: flex; 
	justify-content: space-between;
}



#gallery-container {
	display: flex;
	justify-content: space-evenly;
	flex-wrap: wrap;
	align-items: center;
	width: 100%;
	padding-right: 30px;
	margin-top: 0px;
}

#gallery-container a {
	display: flex;
	align-items: center;
	justify-content: space-around;
	padding: 20px;
}

#gallery-container img {
	max-width: 300px; min-width: auto;
	max-height: 300px; min-height: auto;
	padding: 0px;
}


/*.hide {
	min-width: 325px;
}*/


/* Header */
header {
	display: inline-block;
	background-color:#fcf8ee;
	position:relative;
	text-align: center;	
	width: 100%;
    z-index:40;
}
header .logo {
	display:block;
	margin: 20px auto;
	/*text-indent:-999em;
	background:url(../images/michael-dillon.png) no-repeat top right;*/
}
header h1{
	margin:5px 0px;
}
header a.logo h1{
	font-size:3rem;
}
header a.logo h2{
	padding-top: 1rem;
	font-size:2rem;

}
header a.logo {
	color:#003366;
  	line-height: 1em;
	font: 22px 'ColonnaMT';
	text-transform:uppercase;
	text-decoration: none;
	font-weight:lighter;
	display: inline-block;
	width: auto;
}
html[data-useragent*='MSIE 10.0'] header a.logo {
	font: 22px 'colonna-mt';
}
html[data-useragent*='Trident/7.0'] header a.logo {
	font: 22px 'colonna-mt';
}
html[data-useragent*='.NET4.0C'] header a.logo {
	font: 22px 'colonna-mt';
}
html[data-useragent*='.NET4.0E'] header a.logo {
	font: 22px 'colonna-mt';
}
html[data-useragent*='rv:11.0'] header a.logo {
	font: 22px 'colonna-mt';
}
header #contact-dets {
	display: inline-block;
	top: 0;
	right:0;
	right: 2rem;
	margin-top: 1.5rem;
	position: absolute;	
}
header #contact-dets a{
	color: #003366;
	font-size: 1rem;
	margin-bottom: 5px;
}
header #contact-dets a.button{
	padding: 6px; 
	border-radius: 4px;
}
header #logo{
	display: inline-block;
}

/* Nav */
nav {	
	background-color:#fcf8ee;
	display: inline-block;
	position:relative;
	text-align:center;
	width:100%;
    z-index:30;
    height: 100px;
}
nav #nav {
	font-size: 120%;
    line-height: 1.8em;
	padding:5px 0px;
}

nav #subnav {
	font-size: 100%;
    line-height: 1.8em;
	padding:5px 0px;
	border-top: 1px solid #378a69;
}
nav #nav ul li {
	display:inline;
	font-weight:bold;
    padding:0px;
}
nav #nav ul li a{
  color: #003366;
  letter-spacing: 0.8px;
  line-height: 26pt;
  margin: 0 8px;
  padding: 7px 7px;
  text-transform: uppercase;
}
nav #nav ul li a:hover {
  background: #003366 none repeat scroll 0 0;
  color: #ffffff;
  text-decoration: none;
}
nav #nav ul li a.active {
  background: #31647e none repeat scroll 0 0!important;
  color: #ffffff;
}
nav #subnav a {
	display:inline;
    padding:0px 16px;
}
hr {
	width: 96%;
	margin:0 auto;
}
/* Section */
section {
	background-color:#fcf8ee;
	display: inline-block;
	/*height: 100%;*/
	float: left;
	margin-top: 26px;
	position:relative;
	text-align:left;	
	overflow-x: hidden;
    overflow: auto;
    width:340px;
    z-index:10;	
}
section.contact {
	margin-top: 0;
	padding-top: 26px;
	height: 690px;
}
section p, .description p {
	line-height:1.8em;
	margin:0px 20px 10px 20px;
}
section p a:link, section p a:visited, .description p a:link, .description p a:visited {
	color:#003366;
}
section p a:hover, section p a:active, .description p a:hover, .description p a:active {
	color:#003366;
}
section img {
	padding-left: 10px;
	padding-bottom: 10px;
	/*width: 100%;
	max-width:319px;*/
}
section h3 {
	padding: 5px 0 10px 0;
	text-indent: 20px;
}
div#main {
	display: inline-block;
	margin: 1rem ;
	text-align: justify;
	float: left;
	margin: 1rem;
	width: 63%;	
	position: relative;
}
.form {
}
img.micheal {
	float:right;
	margin: 10px 1rem 1rem;
	width: 95%;
}
fieldset {
	border:0 none;
}
fieldset label {
	clear: left;
    display: block;
    margin: 5px 20px;
}
fieldset .text {
	width: auto;
	min-width: 230px;
	margin: 0px 20px;
	padding: 2px;
	border: 1px solid #003366;
}
fieldset .textarea {
	width: auto;
	min-width: 230px;
	font-size: 90%;
	font-family: Helvetica,"Helvetica",Arial,sans-serif;
	margin: 0px 20px;
	padding: 2px;
	border: 1px solid #003366;
}
.url {
	display: none;
}
.submit {
	margin:20px 0px;
	padding:0px 10px;
}

/* Footer */
footer {
	background-color: #ffffff;
    bottom: 0;
    color: #FFFFFF;
    height: 36px;
	overflow: hidden;
    position: fixed;
    width: 100%;
	text-align:center;
    z-index: 20;
}
#social {
  float: left;
  margin: 10px 0 0 5px;
  position: absolute;
  top: 0;
  left: 0;
}

#social a {
	margin: 0px 3px;
}
#social img {
	border:0 none;
}
@media (max-width: 1420px) {
	img.micheal {  float: none;}
}
@media (max-width: 1100px) {
	html, body { font-size:85%; }
	header #contact-dets {float: none; position:relative; width: 100%; top:unset; right:unset; margin:0;}

}	
@media (max-width: 1000px) {
	section.hide{ display: none;}
	div#main {width: auto;}
}

/*@media (max-width: 950px) {
	section { margin: 0 auto; width: 340px; height: auto; display: inherit; float: none;}
	section.contact { height: 100%; float: left;}
}*/

@media (max-width: 900px) {
	#content-container  { flex-wrap: wrap; justify-content: space-around; }
}


@media (max-width: 817px) {
	hr {display: none;}
	header #contact-dets { display: inline-block; margin: .5rem auto; text-align: center; float: right;}
}
@media (max-height: 767px) and (min-width:1100px) {
	section{ padding-top: 0;}
}
@media  (max-width:745px) {
	
}
@media (max-width: 640px) {
	header #contact-dets { background-color: #fcf8ee; display: inline-block; margin: .5rem auto;  text-align: center; position:relative; }
	section.contact { float: none; height: auto; width: 100%; }
	header #contact-dets { display: inline-block; margin: .5rem auto; text-align: center; float: none;}
}








@media (max-width: 600px) {
	div#main {margin: 4rem 1rem;}
}
@media (max-width: 500px) {
	header a.logo {
	  margin-top:32px;
	}
}
@media (max-width: 340px) {
	header h1 {line-height: 22pt;}
	#content-container { flex-wrap: wrap; }
	section {  height: 400px!important; overflow: hidden!important; width: 290px!important;}
	section.contact { height: auto!important;}
}
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
}


@media print {
	/*Reset Style */
	body { margin: 0; padding: 0; }
	nav, .backstretch, .slideshow { display: none; }
	header h1, header p { float: none; margin:0; text-align: left; }
	article { margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; }
	footer { width: 100%; }
}

/*SLICK NAV */
.slicknav_menu {
	display: none;

}

@media screen and (max-width: 1000px) {
	nav { height: 20px; }
	.js #menu {
		display:none;

	}
	
	.js .slicknav_menu {
		display:block;
		margin: 0 auto;
		width: 100%;
	}
}



/* End - copyright Michael Dillon Murals @2015 */