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


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


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

/*******************SPECIFIC WORKS******************/
.work_descriptionII{
	margin-left: 5%;
	width: 90%;
	margin-top: 20px;
}



/*****************CAPTION TEXT**************/

.caption{
	margin-top:8px;
}



/*****************IMAGE SIZING BY CLASS FOR WORKS**************/

.all_image_boxII{
	width: 90%;
	margin-left: 5%;
}

.full_image_case{
	width: 90%;
	margin-left: 5%;
	margin-right: 5%;
	margin-bottom: 30px;  /*picture spacer is now void, spacing done below image*/
}



.picture_spacer{
	display:block;
	float:left;
	width:100%;
	height: 20px;		/*picture spacer is now void*/
}

.wrapper:hover > img {
opacity: .7	
}
	
.wrapper:hover > img:hover {
opacity: 1	
}

	
} /*end of */





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

#top_wrapper{
	width: 100%;
	/*padding-top: 12px;*/
	position: fixed;
	z-index: 9999;
}

#logo_box{
	width:50px;
	height:25px;
	background-image:url(Pictures/Logo/MD_II%20animation-01.png);
	margin-left: auto;
	margin-right: auto;
	overflow: hidden;
	padding-bottom: 5px;
	
}

.logo1, .logo2, .logo3, .logo4, .logo5{
	width: 50px;
	display: block;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
}

.logo2, .logo3, .logo4, .logo5{
position:absolute;
	display: none;
}

#nav_and_name{
	background-color:#F6F7F7;
	height:35px;
	width: 100%;
	padding-top:12px;
	
	/*margin:0 auto;
	 display: -webkit-box;      		/* OLD - iOS 6-, Safari 3.1-6 */
 	 /*display: -moz-box;         		/* OLD - Firefox 19- (buggy but mostly works) */
 	 /*display: -ms-flexbox;      		/* TWEENER - IE 10 */
 	 /*display: -webkit-flex;    		/* NEW - Chrome */
 	 /*display: flex;             		/* NEW, Spec - Opera 12.1, Firefox 20+ */
	/*display: flex;					/*new directions to center navigation (margin: 0 auto was not working)*/
    /*flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center; */
}

#navigation, #name {
	height: 35px;
	overflow: visable;
}

#navigation{
	background-color: none;
	width:220px;
	margin-left:5%;
	
	/*margin-left: auto;
	margin-right: auto;*/
	
	overflow:visible;
}

#name{
	width:0%;
	background-color: none;
	display: none;
}

#matt_duncan{
	font-family: 'Roboto Slab', serif;
	font-size: 1.1em;
	font-weight: 300;
	margin-top: 5px;
	float:right;
}

.nav_item{
	display: inline;
	font-family: 'Roboto Slab', serif;
	font-size: 1.25em;
	font-weight: 400;
	margin-top: 7px;
	float:left;
	margin-left:0;
	margin-right:0;
}

#name_logo{
	margin-right:5%;
}
	
	
.nav_on{
	color: magenta;
}


/*************GALLERY PAGE***********************/

#gallery_case{
	width: 90%;
	height: 500px;
	margin-left: auto;
	margin-right: auto;
	background-color: none;
	padding-top: 96px;
	z-index: 0;
}

.work_title_gallery{
	display: inline;
	font-family: 'Roboto Slab', serif;
	font-size: .9em;
	margin-top: 5px;
	float:left;
	margin-top: 11px;
}

#work_title_one, #work_title_two, #work_title_three, #work_title_four,
#work_title_five, #work_title_six, #work_title_seven, #work_title_eight,
#work_title_nine, #work_title_ten, #work_title_eleven, #work_title_twelve{
	display:none;
}

.display_title{
	display:block;
}

.work_box{
	opacity:1;
	width: 44%;
	height:auto;
	float: left;
	background-color: none;
	/*transition: all .1s ease-in-out;
	-webkit-transition: all .1s ease-in-out;
	-moz-transition: all .1s ease-in-out;
	-o-transition: all .1s ease-in-out;*/
}

.work_box:hover{
	opacity:.65;
}

#work_one, #work_two, #work_three, 
#work_five, #work_six, #work_seven,
#work_ten, #work_twelve{
	margin-right:0px;
}

#work_one, #work_two, #work_three, 
#work_four{
	margin-bottom: 0px;
}

#work_one, #work_three, #work_five, #work_seven,
#work_nine, #work_eleven{
	margin-right:12%;
}

#work_one, #work_two, #work_three, #work_four, 
#work_five, #work_six, #work_seven, #work_eight,
#work_nine, #work_ten{ 
	margin-bottom: 50px;
}

#work_nine{
	margin-left:0%;
}

/*************SPECIFIC WORKS***********************/



.work_title_box{
	height:35px;
	width: 100%;
	background-color: none;
	margin:0 auto;
}

.work_title{
	display: inline;
	font-family: 'Roboto Slab', serif;
	font-size: .9em;
	float:left;
	margin-top: 10px;
	margin-left:5%;
}

.m{
	color: magenta;
}
.c{
	color: #00C2C0;
}
	
.work_descriptionII{
	margin-top:25px;
}

.work_descriptionIII{
	margin-left: 5%;
	width: 90%;
	margin-top:100px;
}

.toast{
	width:90%;
}

/*****************IMAGE SIZING BY CLASS FOR WORKS**************/

.all_image_boxII{
	margin-top:100px;
}

.three_fourth_image_center{
	width:90%;
	margin-left:5%;
	margin-right:5%;
}
	
.half_image_center{
	width:90%;
	margin-left:5%;
	margin-right:5%;
}

.half_image_left{
	width:90%;
	margin-left:5%;
	margin-right:5%;
	margin-bottom:20px;
}

.half_image_right{
	width:90%;
	margin-left:5%;
	margin-right:5%;
}

.third_image_left{
	width:90%;
	margin-left:5%;
	margin-right:5%;
	margin-bottom:20px;
}

.third_image_center{
	width:90%;
	margin-left:5%;
	margin-right:5%;;
	margin-bottom:20px;
}

.third_image_right{
	width:90%;
	margin-left:5%;
	margin-right:5%;
}



/*********************NEGATIVE SPACING FIXES**********/

.mobile-negative-space{
	margin-bottom: -32px;
}
	
	
	
}