body {
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	background-color:#EFEEED;
}
*{
	/*box-sizing:border-box;*/
}
#main{
	width:975px;
	margin:0px auto 0px auto;
}

@media only screen and (max-width: 768px) {
    #main {
        width:auto;
        overflow:hidden;
    }
}


#header{
	z-index:4000;
	position:relative;
}
h1 span{
	display:none;
}
#header h1{
	margin:0px;
	display:block;
	/*background-image:url(http://mjarch.ca/images/header_01.png);*/
	background-image:url(../images/header_01_new.png);
	/*background-image:url(../images/header_01.png);*/
	background-repeat:no-repeat;
	width:485px;
	height:78px;
	z-index:100;
}

#hamburger{
	display:none;
	position:absolute;
	top:28px;
	right:26px;
	width:36px;
	z-index:110;
	box-sizing: border-box;
}

#hamburger div{
	width:100%;
	height:3px;
	background-color:black;
	margin-bottom:6px;
}

@media only screen and (max-width: 768px) {

	#header{
		background-color:white;
		padding-bottom:20px;
		height:60px;
	}

    #header h1{
    	width:100%;
    	background-size:auto 60px;
    	/*background-image:url(../images/header_01_transparent.png);*/
    }

     #hamburger{
    	display:block;
    }
}

#splashHeader h1{
	margin:0px;
	display:block;
	background-image:url(../images/splash_header_01.png);
	/*background-image:url(../images/header_01.png);*/
	background-repeat:no-repeat;
	width:485px;
	height:78px;
}

h2{
	margin:0px 0px 8px 20px;
	font-family: 'Metrophobic', sans-serif;
	font-size:16px;
	color:#C44E23;
	font-weight:normal;
}

@media only screen and (max-width: 768px) {
   h2{
        width:auto !important;
        font-size:24px;
    }
}




p{
	margin:0px 0px 15px 20px;
	font-family: 'Metrophobic', sans-serif;
	font-size:12px;
	letter-spacing:0px;
	/*text-align:justify;*/
	
}



p.bio{
	width:580px;
	line-height:22px;
}

p.project{
	width:775px;
	line-height:22px;
}

p.photoCredit{
	color:#666;
	font-size:10px;
	line-height:22px;
}

p.contact{
	
	line-height:18px;
}

p a{
	/*color:#069;*/
	color:#069;
	text-decoration:none;
}

p a:hover{
	
	color:#069;
	/*color:#C44E23;*/
	text-decoration:underline;
}

@media only screen and (max-width: 768px) {
   p, p.bio, p.project, p.photoCredit, p.contact{
        width:auto !important;
        font-size:16px;
        line-height:24px;
        margin:0px 20px 15px 20px;
    }
}





span.h2Sub{
	color:#999;
	font-size:10px;
}

#navContainer{
	float:left;
	width:178px;
}

#splashNav{
	background-image:url(../images/splash_header_02.gif);
	background-repeat:repeat-y;
}

	
#nav{
	width:154px;
	background-image:url(http://mjarch.ca/images/header_02.gif);
	padding:18px 0px 34px 24px;
	margin-bottom:16px;
	background-repeat:repeat-y;
}




#nav a{
	display:block;
	margin:0px;
	height:24px;
	font-family: 'Metrophobic', sans-serif;
	font-size:12px;
	color:#333333;
	text-decoration:none;
	letter-spacing:1px;
}

#nav a.link_blog{display:none;}

#nav a:hover, #nav a.active{
	color:#C44E23;
	text-decoration:none;
}



@media only screen and (max-width: 768px) {
    #navContainer {
        position:fixed;
        float:none;
        width:100vw;
        top:0;
        left:-100vw;
        z-index:3000;
    	height:100vh;
        overflow-y:scroll;
        /*box-sizing:border-box;*/
        transition:left .2s;
        background-color:white;
    }

    #nav{
    	min-height:calc(100vh - 99px);
    	margin-top:80px;
    	margin-bottom:20px;
    	box-sizing:border-box;
    	width:100%;
    }

    #splashNav #nav{
    	min-height:0;
    	margin-top:0;
    }

   
    #navContainer.in{
    	left:0;
    }

    #nav a{
    	font-size:18px;
    	margin-bottom:10px;
    }
}


#projectNav{
	width:154px;
	background-image:url(http://mjarch.ca/images/header_02.gif);
	padding:18px 0px 34px 24px;
	margin-bottom:0px;

	display:none;
}

#projectNav a{
	display:block;
	margin:0px;
	height:24px;
	font-family: 'Metrophobic', sans-serif;
	font-size:11px;
	color:#333333;
	text-decoration:none;
}



#projectNav a:hover, #projectNav a.active{
	color:#C44E23;
	text-decoration:none;
}


#profileSub, #projectsSub, #recognitionSub{
	display:none;
	margin-bottom:18px;
	padding-left:14px;
}

#projectsSub{
	display:none !important;
}

#profileSub a, #projectsSub a, #recognitionSub a{
	font-size:11px;
	height:21px;
}

@media only screen and (max-width: 768px) {
	#profileSub a, #projectsSub a, #recognitionSub a{
		font-size:14px;
		/*height:21px;*/
	}
}

#mainContent{
	padding:15px 0px 40px 0px;
	float:left;
	z-index:2000;
	position:relative;
}

@media only screen and (max-width: 768px) {
    #mainContent{
    	width:100%;
    }
}


#thumb_grid{
	width:775px;
	overflow:hidden;
	display:flex;
	flex-wrap:wrap;
}

#thumb_grid a{
	width:30%;
	margin:1.5%;
}

#thumb_grid a img{
	width:100%;
}

.leftImageNoZoom{
	float:left;
	margin:8px 20px 10px 20px;
}

.imageZoom{
	float:left;
	margin:2px 20px 100px 20px;
	cursor:pointer;
}

@media only screen and (max-width: 768px) {
	#thumb_grid{
		width:100%;
		flex-direction:column;
		padding:10px;
		box-sizing:border-box;
	}

	#thumb_grid a{
		width:100%;
		padding:10px;
		margin:0;
		box-sizing:border-box;
	}

    .imageZoom {
       float:none;
       margin:2px 0px 0 0px;
    }
}


.imageZoom a{
	text-decoration:none;
}

.imageZoom a:hover em{
	color:#C44E23;
	text-decoration:none;
	/*background-image:url(../images/zoom_icon_over.gif);*/
}

.imageZoom em{
	font-style:normal;
	display:block;
	width:30px;
	height:19px;
	background-color:white;
	padding:6px 0px 0px 25px;
	background-image:url(../images/zoom_icon.gif);
	background-repeat:no-repeat;
	background-position:3px 3px;
	position:relative;
	top:0px;
	left:-19px;
	height:20px;
	z-index:5;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	color:black;
	text-decoration:none;
}

.imageZoom em.greyBorder{
	border-right:1px solid #EFEEED;
	border-bottom:1px solid #EFEEED;
}

.imageZoom img{
	display:block;
	position:relative;
	top:-22px;
}

@media only screen and (max-width: 768px) {
	.imageZoom{
	  margin: 2px 20px 0 20px;
	}
    .imageZoom img{
		width:100%;
		box-sizing:border-box;
	}
}


.rec_block{
	padding:5px 0px 5px 5px;
	margin:3px 0px 15px 20px;
	width:580px;
	/*border-bottom:2px solid white;*/
}

.textOnly{
	padding:5px 0px 5px 5px;
	margin:-10px 0px 10px 20px;
	width:580px;
	/*border-bottom:2px solid white;*/
}

@media only screen and (max-width: 768px) {
	.rec_block{
		width:auto;
		margin: 3px 20px 15px 20px;
	 }
	 .textOnly{
	 	margin:-10px 20px 10px 20px;
	 }
}

.rec_block img{
	float:left;
	margin:0px 10px 0px 0px;
}
.rec_block a img, .rec_block a{
	border:0 none;
	text-decoration:none;
	color:black;
}

.rec_block a:hover{
	color:#C44E23;
	/*color:#069;*/
}

.rec_block p{
	margin:0px 0px 10px 3px;
}

.clearFix{
	clear:both;
}

h2.rec_pages{
	margin-bottom:12px;
}

#resources h2{
	margin-bottom:3px;
}
#resources a{
	line-height:18px;
	color:black;
	margin-left:20px;
}

#resources a:hover{
	color:#069;
}

#jquery-overlay{
	z-index:9000 !important;
}
#jquery-lightbox{
	z-index:10000 !important;
}
#lightbox-secNav-btnClose{
	width:auto !important;
}
#lightbox-nav{
	overflow:hidden;
}


@media only screen and (max-width: 768px) {
   #lightbox-container-image-box{
	width:auto !important;
	height:auto !important;
	   margin: 5px auto 0px auto;
	}

	#lightbox-image{
		width:100%;
	}

	#lightbox-container-image-data-box{
		width: 100% !important;
    	box-sizing: border-box !important;
	}


	#lightbox-image-details-currentNumber a, #lightbox-secNav-btnClose, #lightbox-image-details-currentNumber{
		font-size:18px !important;
		line-height:30px !important;
	}
}

.close_x{
	position:fixed;
	top:10px;
	right:-40px;
	width:30px;
	height:30px;
	opacity:0;
	z-index:5010;
	background-image:url('../images/close_x_white.svg');
	background-size:60% auto;
	background-position:center;
	background-repeat:no-repeat;
	border-radius:100px;
	background-color:rgba(0,0,0,.2);

	transition:right 0s, opacity .2s;
    transition-delay:.2s, 0s;
    cursor:pointer;
}

.close_x.active{
	opacity:1;
	right:10px;
	transition-delay:0s, 0s;
}

.swiper-container {
    width: 100%;
    height: 100%;
    opacity:0;
    position:fixed;
    left:-100%;
    top:0;
    z-index:5000;
    background-color:#EFEEED;

    transition:left 0s, opacity .2s;
    transition-delay:.2s, 0s;

}

.swiper-container.active{
	opacity:1;
	left:0;

	transition-delay:0s, 0s;

}

.swiper-slide{
	display:flex;
	justify-content:center;
	align-items:center;
}

.swiper-slide img{
	object-fit:contain;
	width:100%;
	height:100%;
}

.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet{
	    margin: 03px;
}




/* ---------------------------- BLOG ------------------------------------ */

#blogContent{
	margin-left: 20px;
	padding-top:15px;
	float:left;
	width:775px;
}

#blogContent a{
	font-weight:normal;
}

#blogContent p{
	line-height:22px;
}

#blogContent a:hover{
	text-decoration:underline;
}

cite a, .comment-meta a, .widget a, .left a, .right a{
	/*color:black;*/
	color:#069;
	text-decoration:none;
}

cite a:hover, .comment-meta a:hover, .widget a:hover, .left a:hover, .right a:hover{
	color:#069;
	text-decoration:underline;
}


a.comment-reply-link{
	/*color:#069;*/
	color:black;
	text-decoration:underline;
}


#blogContent h2,#blogContent h2 a,#blogContent h2 a:hover{
	margin:0px 0px 8px 0px;
	font-family: 'Metrophobic', sans-serif;
	font-size:18px;
	color:#C44E23;
	font-weight:bold;
	text-decoration:none;
}

#blogContent h3{
	margin:0px 0px 8px 0px;
	font-family: 'Metrophobic', sans-serif;
	font-size:16px;
	color:#333;
	font-weight:bold;
	text-decoration:none;
}

.widget h4, .widget label{
	margin:0px 0px 5px 0px;
	font-family: 'Metrophobic', sans-serif;
	font-size:13px;
	color:#333;
	/*color:#C44E23;*/
	font-weight:normal;
	text-decoration:none;
}

.widget a{
	font-family: 'Metrophobic', sans-serif;
	font-size:11px;
}

.widget li{
	list-style:disc;
	margin:0px 0px 5px 0px;
}

.widget ul{
	font-size:12px;
	margin:2px 0px 0px 25px;
}

.widget{
	margin:0px 0px 25px 0px;
}

.widgets{
	border-bottom:none;
}

#blogContent p{
	margin:0px 0px 15px 0px;
}

#blogLeft{
	width:530px;
	float:left;
	padding-right:15px;
}

#blogRight{
	width:205px;
	padding-left:15px;
	float:left;
	border-left:1px solid #ddd;
}