/*
	based on a layout by Christian Vasile: http://christianvasile.com
*/

/* ===========================
   ======= Body style ======== 
   =========================== */
   
body {
	background-color: #fbfbf8;
	background-image: url('images/.png');
	background-attachment: fixed;
	color: #000305;
	font-size: 100%;
	font-family: georgia, serif;
	line-height: 1.429;
	margin: 0;
	padding: 0;
	text-align: left;
}
	
.body {
	clear: both; 
	margin: 0 auto; 
	width: 80%;
	max-width:1600px;
}


	
/* ===========================
   ========= Headings ======== 
   =========================== */
h1, h2 {font-size: 1.438em}	/* 23px */
h3 {font-size: 1.429em}	/* 20px */
h4 {font-size: 1.286em}	/* 18px */
h5 {font-size: 1.143em}	/* 16px */
h6 {font-size: 1em}		/* 14px */

h1, h2, h3, h4, h5, h6 {
	font-weight: 400;
	line-height: 1.1;
	font-family: 'Oswald', sans-serif;
}
	
	
/* ===========================
   ======= Anchor style ====== 
   =========================== */
a {
	outline: 0;
}

a img {
	border: 0px; 
	text-decoration: none;
}

a:link, a:visited {
	color: #db351f;
	padding: 0px;
	text-decoration: none;
}

a:hover, a:active {
	color: #000305;
	text-decoration: none;
}

.clear {
	clear: both;
}

.float {
	float: left;
}	

.bold {
	font-family: 'Oswald', sans-serif;
}

ul {
	padding-left: 10px;
}

table {
	max-width: 700px;
	border-collapse: collapse;
	border: none;
	width: auto;
	font-family: 'Oswald', sans-serif;
	font-size: 130%;
	margin-bottom: 30px;
	}
	
tr {
	width: auto;
	padding-bottom: 5px;
	}
	
td {
    height: 30px;
	vertical-align:text-top;
	width: auto;
} 

input {
	width: 98%;
	height: 90%;
	font-size: 80%;
	}
	
label {
	width: auto;
	margin-right: 10px;
	}
	

textarea {
	vertical-align:text-top;
}


/* ===========================
   ===== Main Navigation ===== 
   =========================== */
   
.mainHeader {
	text-align: center;
	color: #ffffff;
	-webkit-text-size-adjust: 100%;
}  
   
.mainTitle img {
	width: 100%;
	height: 100%;
	margin:  0;
	z-index: 0;
}
   
.mainTitle {
	background-position: center;
	margin-left: auto;
	margin-right: auto;
	width: 100%;
	height: 190px;
	box-sizing:border-box;
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
	overflow: hidden;
	border:5px #fbfbf8 solid;
}

.mainTitle2 {
	background-position: center;
	margin-left: auto;
	margin-right: auto;
	width: 100%;
	height: 150px;
	box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    overflow: hidden;
    border:5px #fbfbf8 solid;
}

.mainTitle3 {
	background-position: center;
	margin-left: auto;
	margin-right: auto;
	width: 100%;
	height: 130px;
	box-sizing:border-box;
  	-moz-box-sizing:border-box;
  	-webkit-box-sizing:border-box;
 	overflow: hidden;
 	border:5px #fbfbf8 solid;
}
 
.mainTitleImg {
	background-image: url('images/iblogo1.jpg');
	background-position: center;
	   margin-left: auto;
	   margin-right: auto;
	   width: 100%;
	   height: 190px;
}	

.mainTitle2 {
	display: none;
}

.mainTitle2Img {
	background-image: url('images/iblogo2.jpg');
	background-position: center;
	   margin-left: auto;
	   margin-right: auto;
	   width: 100%;
	   height: 150px;
}	

.mainTitle3 {
	display: none;
}

.mainTitle3Img {
	background-image: url('images/iblogo3.jpg');
	background-position: center;
	   margin-left: auto;
	   margin-right: auto;
	   width: 100%;
	   height: 130px;
}	

.mainTitleMImg {
	background-image: url('images/iblogoM1.jpg');
	background-position: center;
	   margin-left: auto;
	   margin-right: auto;
	   width: 100%;
	   height: 190px;
}	

.mainTitleM2Img {
	background-image: url('images/iblogoM2.jpg');
	background-position: center;
	   margin-left: auto;
	   margin-right: auto;
	   width: 100%;
	   height: 150px;
}	
	
.mainTitleM3Img {
	background-image: url('images/iblogoM3.jpg');
	background-position: center;
	   margin-left: auto;
	   margin-right: auto;
	   width: 100%;
	   height: 130px;
}

.mainTitleAImg {
	background-image: url('images/iblogoA1.jpg');
	background-position: center;
	   margin-left: auto;
	   margin-right: auto;
	   width: 100%;
	   height: 190px;
}	

.mainTitleA2Img {
	background-image: url('images/iblogoA2.jpg');
	background-position: center;
	   margin-left: auto;
	   margin-right: auto;
	   width: 100%;
	   height: 150px;
}	

.mainTitleA3Img {
	background-image: url('images/iblogoA3.jpg');
	background-position: center;
	   margin-left: auto;
	   margin-right: auto;
	   width: 100%;
	   height: 130px;
}

.mainTitleGImg {
	background-image: url('images/iblogoG1.jpg');
	background-position: center;
	   margin-left: auto;
	   margin-right: auto;
	   width: 100%;
	   height: 190px;
}	

.mainTitleG2Img {
	background-image: url('images/iblogoG2.jpg');
	background-position: center;
	   margin-left: auto;
	   margin-right: auto;
	   width: 100%;
	   height: 150px;
}	

.mainTitleG3Img {
	background-image: url('images/iblogoG3.jpg');
	background-position: center;
	   margin-left: auto;
	   margin-right: auto;
	   width: 100%;
	   height: 130px;
}
	   
nav {
	background-color: #fbfbf8;
	font-family: 'Oswald', sans-serif;
	}	   
	   
.mainHeader nav {
	font-size: 20px;
	height: 40px;
	line-height: 30px;
	margin: 0 auto -10px auto;
	text-align: center;
}

.mainHeader nav h1{
	font-size: 20px;
	line-height: 30px;
	margin: 0 auto -10px auto;
	text-align: center;
}
	
.mainHeader nav ul {
	list-style: none; 
	margin: 0 auto;
}

.mainHeader nav ul li {
	float: left; 
	display: inline; 
}
	
.mainHeader nav a:link, .mainHeader nav a:visited {
	display: inline-block;
	height: 30px;
	padding: 0px 23px;
	text-decoration: none;
	color: #a2a3a3;
}

.mainHeader nav a:hover, .mainHeader nav a:active,
.mainHeader nav .active a:link, .mainHeader nav .active a:visited {
	color: #000305;
	text-shadow: none !important;
}

#two {
	display:none;
}
	
#upper {
	margin: -165px 0 0 0;
	font-size: 15px;
	text-shadow: 1px 1px 1px #000;
}	

#lower {
	margin: 100px 0 20px 0;
	font-size: 15px;
	text-shadow: 1px 1px 1px #000;
}
	

/* ===========================
   ======= Content Area ====== 
   =========================== */

.mainContent {
	overflow: hidden;
	line-height: 25px;
	margin: 0;
}

.topcontent {
	margin-bottom: 3%;
}

.content {
	width: 63%;
	float: left;
}

.content2 {
	width: 32%;
	float: left;
	padding-left: 1%;
}

.content3 {
	width: 98%;
	float: left;
	padding-left: 1%;
	padding-right: 1%;
	margin-top: -10px;
	}

.post-info {
	font-style: italic;
	color: #999;
	font-size: 85%;
}

.article {
	margin: 40px 0 0 0;
	}
	
.article2 {
	margin: 50px 0 0 0;
	}	
	
#ianphoto {
	background-image: url("images/ianphoto.jpg");
	background-repeat: no-repeat;
    height: 388px;
    width: 300px;
	margin: 0 auto 0 auto;
	}	
	
	
#ianphoto2 {
	background-image: url("images/ianphoto2.jpg");
	background-repeat: no-repeat;
    height: 253px;
    width: 200px;
	margin: 0 auto 0 auto;
	}
	
#ianphoto2 {
	display: none;
	}	
	
	#ianphotox {
	background-image: url("images/ianphotox.jpg");
	background-repeat: no-repeat;
    height: 388px;
    width: 300px;
	margin: 0 auto 0 auto;
	}	
	
	
#ianphoto2x {
	background-image: url("images/ianphoto2x.jpg");
	background-repeat: no-repeat;
    height: 253px;
    width: 200px;
	margin: 0 auto 0 auto;
	}
	
#ianphoto2x {
	display: none;
	}	
	
		
	
	
/* ===========================
   ======== Sidebar ========== 
   =========================== */
.sidebar article {
	margin-bottom: 30px;
	}


.sidebar {
	width: 29%;
	float: left;
	margin: -10px 0 2% 2%;
	padding: 0% 3%;
}

.sidebar2 {
	width: 59%;
	float: left;
	margin: -10px 0 2% 2%;
	padding: 0% 3%;
}

.drop {
	margin: 50px 0 30px 0;
	}
	
.drop2 {
	margin: 50px 0 0px 0;
	}
	
.note {
	font-size: .75em;
	margin-top: -1em;
	}
	
.small {
		font-size: .75em;
		line-height: 1.1;
		color: #5b5a5a;
		}

/* ===========================
   ========= Footer ========== 
   =========================== */

.mainFooter {
	width: 98%;
	padding-left: 1%;
	padding-right: 1%;
	float: left;
	margin-bottom: 2%;
	color: #000305;
	font-size: 110%;
}

.mainFooter p {
	float: left;
	margin: 0px 40px 0px 5px;
}

.mainFooter p img {
	margin-bottom: -3px;
	}


.mainFooter p a:hover, .mainFooter p a:active,
.mainFooter p .active a:link, .mainFooter p .active a:visited {
	color: #000305;
	text-shadow: none !important;
}

.fbbox{
		margin-top: 50px;
		margin-bottom: 20px;
		}
		
.mediabox {
	float: left;
	margin-right: 20px;
	margin-bottom: 5px;
	}	
				

/* ===========================
   ====== Contact Form ======= 
   =========================== */


table {
	border-collapse: collapse;
	border: none;
	width: 100%;
	font-family: 'Oswald', sans-serif;
	font-size: 130%;
	margin-top: 40px;
	margin-bottom: 30px;
	float: left;
	}
	
tr {
	width: auto;
	padding-bottom: 5px;
	}
	
td {
    height: 30px;
	vertical-align:text-top;
	width: auto;
} 

input {
	width: 98%;
	height: 90%;
	font-size: 80%;
	}
	
label {
	width: auto;
	margin-right: 10px;
	}
	

textarea {
	vertical-align:text-top;
	width: 99%;
	height: 200px;
}

.spacer td{
	padding-bottom: 15px;
	}


/* ===========================
   ====== Media Queries ====== 
   =========================== */
   

   
@media only screen and (max-width : 1050px) and (min-width : 781px) {
.body {
	clear: both; 
	margin: 0 auto; 
	width: 90%;
	font-size: 100%;
}

#ianphoto2 {
	display: block;
	}
	
#ianphoto {
	display: none;
	}
	
	#ianphoto2x {
	display: block;
	}
	
#ianphotox {
	display: none;
	}

.mask {
	display: none;
	}

}
   
   
@media only screen and (max-width : 780px) and (min-width : 651px) {
.body {
	clear: both; 
	margin: 0 auto; 
	width: 90%;
	font-size: 100%;
} 

.content {
	width: 60%;
	float: left;
}

.sidebar {
	width: 32%;
	float: left;
	margin: -10px 0 2% 2%;
	padding: 0% 3%;
}

#ianphoto2 {
	display: block;
	}
	
#ianphoto {
	display: none;
	}

#ianphoto2x {
	display: block;
	}
	
#ianphotox {
	display: none;
	}

.mask {
	display: none;
	}

}
   
@media only screen and (max-width : 650px) and (min-width : 481px) {
.body {
	clear: both; 
	margin: 0 auto; 
	width: 90%;
	font-size: 100%;
}
	
.mainHeader p {
	font-size: 10em;
} 

.mainHeader nav {
	font-size: 1.143em;
	height: 40px;
	line-height: 30px;
	margin: 0 auto -10px auto;
	text-align: center;
}

.mainHeader nav h1{
	font-size: 1.143em;
	line-height: 30px;
	margin: 0 auto -10px auto;
	text-align: center;
}
	
.mainHeader nav ul {
	margin: 0 auto;
	padding-left:0;
}

.mainHeader nav ul li {
	float: left; 
	display: inline; 
	width: 25%;
	overflow: hidden;
}
	
.mainHeader nav a:link, .mainHeader nav a:visited {
	display: inline-block;
	height: 30px;
	padding: 2px 10px;
	text-decoration: none;
}

.mainHeader nav a:hover, .mainHeader nav a:active,
.mainHeader nav .active a:link, .mainHeader nav .active a:visited {
	color: #000305;
	text-shadow: none !important;
}
	
	   
.mainTitle2 {
	   display: block;
}	
	
.mainTitle {
	   display: none;
}


.mainContent {
		overflow: hidden;
		line-height: 25px;
		margin-bottom: 2%;
}
	
.topcontent {
		margin-bottom: 4%;
}
	
.content {
		width: 100%;
		float: left;
}

.content2 {
		width: 96%;
		float: left;
		padding: 0 2%;
}


.content3 {
		width: 96%;
		float: left;
		padding: 0 2%;
}

.post-info {
		display: none;
}
	
.sidebar {
		width: 94%;
		float: left;	
		margin: 4% 0 0 0;
		padding: 0 3%;
		margin-bottom: 0;
}

.sidebar2 {
		width: 94%;
		float: left;	
		margin: 4% 0 0 0;
		padding: 0 3%;
		margin-bottom: 0;
}
	
.sidebar p {
		width: 100%;
}

.article {
	margin: 30px 0 0 0;
	}


.mainFooter {
	width: 100%;
	float: left;
	margin-bottom: 2%;
	color: #000305;	
}

.mainFooter p {
	display: block;
	margin: 0px 30px 0px 5px;
}

.mainFooter p a:hover, .mainFooter p a:active,
.mainFooter p .active a:link, .mainFooter p .active a:visited {
	color: #000305;
	text-shadow: none !important;
}
	
#one {
		display:none;
}
		
#two {
		display:block;
}	

#upper {
	margin: -135px 0 0 0;
	font-size: 14px;
	text-shadow: 1px 1px 1px #000;
}	

#lower {
	margin: 75px 0 10px 0;
	font-size: 14px;
	text-shadow: 1px 1px 1px #000;
}

.mask {
	display: none;
	}

}



@media only screen and (max-width : 480px)
{
	
.body {
	clear: both; 
	margin: 0 auto; 
	width: 100%;
	font-size: 100%;
}

.mainHeader nav {
	font-size: 1em;
	height: 40px;
	line-height: 30px;
	margin: 0 auto -10px auto;
	text-align: center;
}

.mainHeader nav h1{
	font-size: 1em;
	height: 40px;
	line-height: 30px;
	margin: 0 auto -10px auto;
	text-align: center;
}

.mainHeader nav ul {
	margin: 0 auto 0 auto;
	padding-left:0;
}

.mainHeader nav ul li {
	float: left; 
	display: inline; 
	width: 25%;
	overflow: hidden;
}

.mainHeader nav a:link, .mainHeader nav a:visited {
	display: inline-block;
	height: 30px;
	padding: 2px 10px;
	text-decoration: none;
}

.mainHeader nav a:hover, .mainHeader nav a:active,
.mainHeader nav .active a:link, .mainHeader nav .active a:visited {
	color: #000305;
	text-shadow: none !important;
}
	
	   
.mainTitle3 {
	   display: block;
}	
	
.mainTitle {
	   display: none;
}
	   
.content {
		width: 100%;
		float: left;
}	

.content2 {
		width: 92%;
		float: left;
		padding: 0 3%;
}

.content3 {
		width: 92%;
		float: left;
		padding: 0 3%;
}
	
.post-info {
		display: none;
}
	
.sidebar {
		width: 94%;
		float: left;	
		margin: 4% 0 0 0;
		padding: 0 3%;
		margin-bottom: 0;
}

.sidebar2 {
		width: 94%;
		float: left;	
		margin: 4% 0 0 0;
		padding: 0 3%;
		margin-bottom: 0;
}
	
.sidebar p {
		width: 100%;
}
	
.article {
	margin: 30px 0 0 0;
	}
	
#switch1 {
	display: none;
	}

.mainFooter {
	width: 100%;
	float: left;
	margin-bottom: 2%;
	color: #000305;	
}

.mainFooter p {
	float: none;
	display: block;
	margin: 0 50px 0 10px;
}

.mainFooter p a:hover, .mainFooter p a:active,
.mainFooter p .active a:link, .mainFooter p .active a:visited {
	color: #000305;
	text-shadow: none !important;
}
	   
#upper {
	margin: -115px 0 0 0;
	font-size: 13px;
	text-shadow: 1px 1px 1px #000;
}	

#lower {
	margin: 60px 0 10px 0;
	font-size: 13px;
	text-shadow: 1px 1px 1px #000;
}	

.mask {
	display: none;
	}

}




/* ===========================
   ====== Image Gallery ====== 
   =========================== */

.wrap {
   overflow: hidden;
   margin: 2px;
}

.box {
   float: left;
   position: relative;
   width: 20%;
   padding-bottom: 20%;
}

.boxInner {
   position: absolute;
   left: 3px;
   right: 3px;
   top: 3px;
   bottom: 3px;
   overflow: hidden;
}

.boxInner img {
   width: 100%;
}


@media only screen and (max-width : 480px) {
.box {
      width: 33.3%;
      padding-bottom: 33.3%;
}
}

@media only screen and (max-width : 650px) and (min-width : 481px) {
.box {
      width: 25%;
      padding-bottom: 25%;
}
	}
	
@media only screen and (max-width : 780px) and (min-width : 651px) {
   /* Tablet view: 3 tiles */
.box {
      width: 33.3%;
      padding-bottom: 33.3%;
}
}

@media only screen and (max-width : 1050px) and (min-width : 781px) {
   /* Small desktop / ipad view: 4 tiles */
.box {
      width: 25%;
      padding-bottom: 25%;
}
}

@media only screen and (max-width : 1290px) and (min-width : 1051px) {
   /* Medium desktop: 5 tiles */
.box {
      width: 20%;
      padding-bottom: 20%;
}
}