/* latin-ext */
@font-face {
  font-family: 'Yanone Kaffeesatz';
  font-style: normal;
  font-weight: 400;
  src: local('Yanone Kaffeesatz Regular'), local('YanoneKaffeesatz-Regular'), url(http://fonts.gstatic.com/s/yanonekaffeesatz/v7/YDAoLskQQ5MOAgvHUQCcLV83L2yn_om9bG0a6EHWBso.woff2) format('woff2');
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Yanone Kaffeesatz';
  font-style: normal;
  font-weight: 400;
  src: local('Yanone Kaffeesatz Regular'), local('YanoneKaffeesatz-Regular'), url(http://fonts.gstatic.com/s/yanonekaffeesatz/v7/YDAoLskQQ5MOAgvHUQCcLfGwxTS8d1Q9KiDNCMKLFUM.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}

* {
	padding: 0;
	margin: 0;
}

/*HEADER STYLES*/

.header {
	width: 90%;
	margin: 30px auto;
	overflow: hidden;
}

.header h1 {
	font: 50px/1.0 'Yanone Kaffeesatz', sans-serif;
	font-weight: 400;
	text-transform: uppercase;
	margin: 0 0 15px 2%;
}

.header p {
	color: #797478;
	font: 20px/1.5 Verdana, Helvetica, sans-serif;
	margin: 0 0 0 2%;
}

/*CONTAINER STYLES*/

.container {
	/*
	display: block;
	position: fixed;
	left: 10%;
	*/
	width: 85%;
	height:90%;
	//margin: 10px auto;
	//overflow: hidden;
	margin: auto;
	overflow-y: auto; 
}

a{
	text-decoration: none
}

/*GALLERY STYLES*/
.galleryItem {
	color: #797478;
	font: 100%/1.5 Verdana, Helvetica, sans-serif;
	//width: 15.5%; padding:  2% 2% 20px 2%;
	width: 20%; padding: 1%;
	//padding: 2%;
	float: left;
	-webkit-transition: color 0.5s ease;
}

p.clear {
    clear: both;
} 
.galleryItem h3 {
	//text-transform: uppercase;
	line-height: 1.2em;
	margin-bottom: 10px;
}

.galleryItem:hover {
	color: white;
	//border: 1px solid red;
	background: #fe8637;
}

.galleryItem img {
	max-width: 100%;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}



/* MEDIA QUERIES*/

@media only screen and (max-width : 940px),
only screen and (max-device-width : 940px){
	.galleryItem {width: 21%;}
}

@media only screen and (max-width : 720px),
only screen and (max-device-width : 720px){
	.galleryItem {width: 29%;}
	.header h1 {font-size: 40px;}
}

@media only screen and (max-width : 530px),
only screen and (max-device-width : 530px){
	.galleryItem {width: 46%;}
	.header h1 {font-size: 28px;}
}

@media only screen and (max-width : 320px),
only screen and (max-device-width : 320px){
	.galleryItem {width: 96%;}
	.galleryItem img {width: 96%;}
	.galleryItem h3 {font-size: 16px;}
	.galleryItem p, .header p {font-size: 16px;}
	.header h1 {font-size: 28px;}
}