/*----------------------------
	=MEDIA QUERIES
----------------------------*/
@media print {
  * {
    background: none !important;
    color: black !important;
    box-shadow: none !important;
    text-shadow: none !important;
    /* Images, vectors and such */
  
    filter: Gray();
    /* IE4-8: depreciated */
  
    filter: url('desaturate.svg#grayscale');
    /* SVG version for IE10, Firefox, Safari 5 and Opera */
  
    -webkit-filter: grayscale(100%);
    /* Chrome + Safari 6 */
  
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    /* Future proof */
  
    filter: grayscale(100%);
    /* Future proof or polyfilled */
  
  }
  a {
    text-decoration: underline;
  }
  a[href]:after {
    content: " (" attr(href) ")";
  }
  a[href="#"],
  a[href="javascript:"] {
    content: "";
  }
}


/* 480px */
@media only screen and (min-width: 480px) {
  	.single-post img.alignleft,
	.single-post img.alignright {
		max-width: 50%;
	}
	
	/* FLICKR */

	.flickr_badge_image {
	margin: 0 1% 1% 0;
	width: 32%;
	float: left;
	}


	#flickr_badge_image10{
	display: none;
	}
}

/* 600px */
@media only screen and (min-width: 600px) {
  	.single-post img.alignleft,
	.single-post img.alignright {
		max-width: 70%;
	}
}

/* 768px */
@media only screen and (min-width: 768px) {
	
#navigation ul li#menu-item-118,
#navigation ul li#menu-item-37 {
		display: block;
	}
	

	#wrapper {
		position: relative; 
		background: #000;
		 border-left: 6px solid #000;
		border-right: 6px solid #000;
	}
	
	#feature {
		height: 322px;
		background: url(../images/feature-900.jpg) 50% 50% no-repeat;
	}
	
	#box {
		
		width: 14%;
		padding: 1em 2% 1.75em 2%;
		position: absolute;
		top: 6em;
		left: 4%;	
		white-space: nowrap;
	}
	
	
	.home #box {
		background: rgba(255,255,255,1);
		width: 14%;
		padding: 1em 2% 1.75em 2%;
		position: absolute;
		top: 6em;
		left: 4%;
		
	  -webkit-border-radius: 18px; 

	  /* Firefox 1-3.6 */
	  -moz-border-radius: 18px; 

	  /* Opera 10.5, IE 9, Safari 5, Chrome, Firefox 4, iOS 4, Android 2.1+ */
	  border-radius: 18px;		
	}
	
#baloon {
	display: none;
}
	
	
  a.logo {
	margin: 0;
	padding: 0;
	display: block;
	width 100%;
	position: static;
	text-align: right;
  }

  .logo h1,
  .logo h2 {
	font-size: 2.3em;
	line-height: 1.2em;
	height: 1em;
	margin: 0;
	padding: 0;
	white-space: nowrap;
	display: none;
  }

  #footer {
    overflow: hidden;
    margin: 0 auto;
  }

  /*== NAVIGATION ==*/
  #navigation {
float: left;
    margin: 0;
    padding-right: 0;
    font-weight: bold;
    text-transform: uppercase;
width: 100%;

  }


	  #navigation ul {
		float: left;
	    list-style-type: none;
	    width: 100%;
	    margin: 0;
	    padding: 0;
	  }
	
	#navigation ul li {
		    border-right: none;
	}

	#navigation ul li a {
		padding: 0;
		margin: 0;
		font-family: "proxima-nova-extra-condensed",sans-serif;
		font-style: normal;
		font-weight: 700;
		text-align: right;
		font-size: 1.4em;
	}




  /*----------------------------
  		 =3 LINE NAV TOGGLE
  	----------------------------*/
  .js {
    display: block;
  }
  .toggle {
    display: none;
  }	




#primary-content {
	width: 70%;
	margin: 0 10% 0 0;
	float:right;
	clear: none;
}

#complimentary-content {
	width: 70%;
	margin: 0 10% 0 0;
	float: right;
	clear: none;
}

.single-post img.alignleft,
.single-post img.alignright {
	max-width: 60%;
}

	
}

/* 992px */
@media only screen and (min-width: 992px) {
	
	#banner {
		background-image: none;
	}
	
	#feature {
		height: 415px;
		background: url(../images/feature-1200.jpg) 50% 50% no-repeat;
	}

}



/* 1200px */
@media only screen and (min-width: 1200px) {

  body {
    font-size: 16px;
    line-height: 28px;
background: #222;
  }

	.flickr_badge_image {
	margin: 0 1% 1% 0;
	width: 19%;
	float: left;
	}


	#flickr_badge_image10 {
	display: block;
	}

#wrapper, #footer {
	max-width: 1600px;
}

#feature {
	height: 520px;
	background: url(../images/feature-1600.jpg) 50% 100% no-repeat;
}

#box {

}

.home #baloon {
	display: block;
	position: absolute;
	top: 220px;
	left: 5%;
	height: 2em;
	width: 19%;
	background: url(../images/baloon.gif) 100% 100% no-repeat;	
}


/*
.single-post img.alignleft,
.single-post img.alignright {
	max-width: 60%;
}

*/
}

/* 1500px */
@media only screen and (min-width: 1500px) {
	body{
    font-size: 18px;
    line-height: 30px;	
}
}

/* RETINA DISPLAYS*/
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
  /* Your retina specific stuff here */
}