header, main, nav, footer, figure, figcaption { display: block; }
body { background-color: #FFFFFF;
      color: #4C4C4C;
	  font-family: Arial, Helvetica, sans-serif;
}
#wrapper { 
           margin-left: auto;
		   margin-right: auto;
		   min-width: 960px;
		   max-width: 2048px;
}

.nav-bar { width: 100%;
			height: 130px;
			background-color: #4C4C4C;
}

.logo {display: inline-block;
		vertical-align: top;
		height: 120px;
		padding-top: 5px;
		padding-left: 5px;
}

.nav-bar ul {list-style-type: none;
			float: right;}
.nav-bar li { display: inline; }

.nav-bar a { text-decoration: none;
        padding-left: 10px;
		padding-right: 10px;
}

.nav-bar a:link { color: #FF7F00; }
.nav-bar a:visited { color: #FF7F00; }
.nav-bar a:hover { color: #FFFFFF; }

header { background-color: #4C4C4C;
       color: #FF7F00;
	   text-align: right;
	   height: 130px;
}

h1 { margin-bottom: 0;
    margin-top: 0;
    font-family: Georgia, "Times New Roman", serif;
	letter-spacing: 5px;
	color: #FF7F00;
} 


main { padding: 1px 20px 20px 30px; 
      display: block;
	  background-color: #FFFFFF;
}
h2 { color: #FF7F00;
	font-family: Georgia, "Times New Roman", serif;
	text-shadow: 1px 1px 1px #ccc;
}



#gallery ul { width: 700px; 
             list-style-type: none;
             margin: auto; 
             padding-top: 25px;}
#gallery li { display: inline; 
			  padding: 10px; }
#gallery img { border-style: none; }

.center-image {display: block;
				margin: auto;}
				
h3 { color: #000033;
	font-family: Georgia, "Times New Roman", serif;
}


 
#contact { font-size: 90%; }

footer { font-size: 75%;
       font-style: italic;
	   font-family: Georgia, "Times New Roman", serif;
	   text-align: center;
	   background-color: #FFFFFF;
	   padding: 20px;
	   clear: both;
}


#mobile { display: none; }
#desktop { display: inline; }

/* Global Styles */

@import url("//fonts.googleapis.com/css?family=Open+Sans+Condensed:300");

/*html,body {
background:#222;
font-family:"Open Sans Condensed", sans-serif;
height:100%;
width:100%;
}*/


/* Template Styles */

#instafeed {
margin:.5rem;
}

#instafeed a {
box-shadow:0 1px 3px rgba(0,0,0,.7);
color:#444;
display:inline-block;
margin:.5rem;
overflow:hidden;
position:relative;
text-decoration:none;
width:calc(100% / 4 - 1rem);
}

#instafeed img {
display:block;
height:auto;
max-width:100%;
width:100%;
}

#instafeed .filter {
background-color:#f6f6f6;
box-shadow:0 0 5px 0 rgba(0,0,0,.2);
display:block;
font-size:1rem;
padding:10px;
position:absolute;
right:-30px;
text-align:center;
top:12px;
transform:rotate(45deg);
width:100px;
}

#instafeed .info {
background-color:#f6f6f6;
height:auto;
padding:.4rem .6rem .3rem;
}

#instafeed .info p {
font-size:1.1rem;
line-height:1.5rem;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}

#instafeed .likes {
position:absolute;
right:.6rem;
bottom:.3rem;
}

#instafeed .likes p {
font-size:.9rem;
position:absolute;
right:1.2rem;
bottom:.3rem;
}

#more,
#nomore {
background-color:#f6f6f6;
box-shadow:0 1px 3px rgba(0,0,0,.7);
cursor:pointer;
display:none;
margin:.5rem 1rem 0;
padding:.8rem .6rem .7rem;
}

#more p,
#nomore p {
color:#444;
display:inline;
font-size:1rem;
}

#more span,
#nomore span {
position:relative;
top:1px;
}

#nomore {
cursor:auto;
opacity:.4;
}


/* Icon Font Styles */

.oi::before {
font-size:.9rem;
margin-right:.5rem;
}

.oi[data-glyph="comment-square"]::before {
color:#a4d0e1;
}

.oi[data-glyph="compass"]::before {
color:#efc7e2;
}

.oi[data-glyph="clock"]::before {
color:#a7e9c0;
}

.oi[data-glyph="heart"]::before {
color:#f8c0d0;
margin-right:0;
position:relative;
top:-3px;
}

.oi[data-glyph="reload"]::before,
.oi[data-glyph="check"]::before {
color:#bbb;
}


/* Media Queries */

@media screen and (min-width:1400px) {
#instafeed a { width:calc(100% / 5 - 1rem); }
}

@media screen and (max-width:1200px) {
#instafeed a { width:calc(100% / 3 - 1rem); }
}

@media screen and (max-width:800px) {
#instafeed a { width:calc(100% / 2 - 1rem); }
}

@media screen and (max-width:480px) {
#instafeed a { width:calc(100% - 1rem); }
}









