/* Styles to be used with mobile devices */

/* Hide page elements that will not be displayed*/
* {
    box-sizing: border-box;
}
header img {
	display:none;
}

/* Header styles */
header {
	-o-background-size: contain;
	-moz-background-size:contain;
	-webkit-background-size:contain;
	background-size:contain;
	min-height: 50px;
	width: 100%;
}

h1,h2 {
font-size: 1.5em;
text-align: center;
vertical-align: middle;
}

footer {
min-width: 100%;
}

/* Mobile styles with Portrait Orientation*/
@media screen and (orientation: portrait) {


/* H1 heading styles */


/* article styles */
article {
	margin: 5%;
	width: 90%;
	font-size: .9em;
}
article p {
	width:100%;
	font-size: .8em;
text-align: left;
}
aside { 
margin: 5%;
width: 90%;
}
aside p { 
font-size: .7em;
text-align: left;
}
aside blockquote {
	width: 90%
}
     .column.side, .column.middle {
        width: 100%;
        min-height: 100px;
        text-align: center;
    }
}

/*add columns for catalog display */
/* Create two columns that floats next to each other */
.displaycolumn {
    float: left;
    padding: 13px;
    background-color:white;
    width:95%;
}

/* right column */
.displaycolumn.right {
    width: 50%;
    box-sizing: border-box;
}

/* Left column */
.displaycolumn.left {
    width: 50%;
    box-sizing: border-box;
    background-color:#aaa;
}

/* Clear floats after the columns */
.displaycolumn:after {
    content: "";
    display: table;
    clear: both;
}
.clearfix:after {
    content: "";
    display: table;
    clear: both;
}
div.gallery {
    border: 1px solid #ccc;
    font:small-caption
}

div.gallery:hover {
    border: 1px solid #777;
}

div.gallery img {
    width: 100%;
    height: auto;
}
div.minGallery {
    border: 1px solid #ccc;
}

div.minGallery:hover {
    border: 1px solid #777;
}

div.minGallery img {
    width: 100%;
    height: auto;
}

div.desc {
    padding: 15px;
    text-align: center;
    background-color:white;
    display:inline-block;
}

.responsive {
    padding: 0 6px;
    float: left;
    width: 24.99999%;
}


}


/* Mobile styles with Landscape Orientation*/
@media screen and (orientation: landscape) {
	/* Main selection navigation list styles */
	section#main nav {
	width: 100%;
}
/* article styles */
article {
	margin: 5px auto;
	width: 90%;
}
article p {
	width:100%;
}
aside { 
float: left;
margin: 2.5%;
width: 90%;
}
aside blockquote {
	width: 100%
}
.responsive {
        width: 22.99999%;
        margin: 0px 0;
    }

     .column.side, .column.middle {
        width: 100%;
        min-height: 100px;
    }
}

.clearfix:after {
    content: "";
    display: table;
    clear: both;
}

}