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

/* ==========================================================================
   Reset
   ========================================================================== */
html { -webkit-text-size-adjust: none; /* Prevent font scaling in landscape */}
body { margin: 0px; padding: 0px; color: #666; }
		
h1,h2,h3,h4,h5,h6,
ul,ol,li,
form,input,textarea,select { margin: 0; padding: 0; }
header, nav, article, footer, address, section { display: block; }
p {	margin: 10px 0; }
img { border: 0; }
a { text-decoration: none; outline: none; color: #09f; }
a:link, a:hover { text-decoration: underline; color: #09f; }

/**:focus { outline: none; }
*::-moz-focus-inner { border: 0; }*/


/* ==========================================================================
   General
   ========================================================================== */

.left {	text-align: left !important; }
.right { text-align: right !important; }
.center { text-align: center !important; }
.justify { text-align: justify !important; }

.nofloat { float: none !important; }
.float-left { float: left !important; }
.float-right { float: right !important; }
.clear { clear: both; }

.block { display: block !important; }
.inline-block { display: inline-block !important; }
.inline { display: inline !important; }

.absolute { position: absolute !important; }
.relative { position: relative !important; }
.fixed { position: fixed !important; }

.mt10 { margin-top: 10px; }
.mb10 { margin-bottom: 10px; }



/* ==========================================================================
   Layout
   ========================================================================== */
   
.loginbox { background-color: #f5f5f5; padding: 10px; border: 1px solid #ddd; margin: 15px auto; width: 90%; max-width: 400px; }
.loginbox input { margin-top: 7px; margin-bottom: 7px; border-radius: 4px; border: 1px solid #ddd; padding: 6px 12px; }
.loginbox input[type=submit] { background-color: #666; color: #fff; padding: 6px 15px; border-radius: 4px; border: none; }
footer { text-align: center; }

#wrapper { width: 100%; background: #f0f0f0; }
.innerwrap { width: 980px; margin: 0 auto; }

.filterbar { background-color: #3da436; padding: 0 7px 7px; margin-bottom: 15px; }
.filterbar button { background-color: rgba(255,255,255,0.9); border: none; padding: 4px 8px; transition: background-color 0.3s ease; margin-top: 7px; }
.filterbar button.active, .filterbar button:hover { background-color: rgba(255,255,255,1); }
.filter-button-group { text-align: center; }

.grid { margin-left: -6px; margin-right: -6px; }
.grid-item { width: 100%; padding: 6px; }
.grid-item > a { padding: 7px; display: inline-block; background-color: #fff; }
.grid-item:hover > a { box-shadow: 0 0 3px 2px rgba(0,0,0,0.15); }
/*.grid-item img { border: 2px solid #3da436; }*/
.grid-item:hover .grid-hover { opacity: 1; }
.grid-hover { background-color: rgba(0,0,0,0.5); position: absolute; left: 13px; right: 13px; top: 13px; bottom: 13px; text-align: center; opacity: 0; transition: opacity 0.3s ease; -webkit-transition: opacity 0.3s ease; }
.grid-links { position: absolute; top: 50%; margin-top: -25px; width: 100%; }
.grid-links a { border: 2px solid #fff; width: 50px; height: 50px; padding: 12px 5px 5px; border-radius: 50%; font-size: 16px; display: inline-block; text-align: center; color: #fff; }
.grid-links a span { }


/* ==========================================================================
   Loader
   ========================================================================== */

.preloader {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	width: 100%;
	height: 100%;
	bottom: 0;
	background-color: #3da436;
	z-index: 999999;
	opacity: 1;
	transition: opacity 1s ease;
}
.preloader.loaded {
	opacity: 0;
}
.sk-spinner-wave.sk-spinner {
	margin: -15px 0 0 -25px;
	position: absolute;
	left: 50%;
	top: 50%;
	width: 190px;
	height: 30px;
	font-size: 10px;
	text-align: center;
	
}
.sk-spinner-wave.sk-spinner p {
	font-size: 16px;
	color: #fff;
}
.loaded .sk-spinner-wave.sk-spinner {
	display: none;
}

.sk-spinner-wave div {
	background-color: #fff;
	height: 100%;
	width: 6px;
	display: inline-block;
	-webkit-animation: sk-waveStretchDelay 1.2s infinite ease-in-out;
	animation: sk-waveStretchDelay 1.2s infinite ease-in-out;
}

.sk-spinner-wave .sk-rect2 {
	-webkit-animation-delay: -1.1s;
	animation-delay: -1.1s
}

.sk-spinner-wave .sk-rect3 {
	-webkit-animation-delay: -1s;
	animation-delay: -1s
}

.sk-spinner-wave .sk-rect4 {
	-webkit-animation-delay: -.9s;
	animation-delay: -.9s
}

.sk-spinner-wave .sk-rect5 {
	-webkit-animation-delay: -.8s;
	animation-delay: -.8s
}

@-webkit-keyframes sk-waveStretchDelay {
	0%,
	100%,
	40% {
		-webkit-transform: scaleY(.4);
		transform: scaleY(.4)
	}
	20% {
		-webkit-transform: scaleY(1);
		transform: scaleY(1)
	}
}

@keyframes sk-waveStretchDelay {
	0%,
	100%,
	40% {
		-webkit-transform: scaleY(.4);
		transform: scaleY(.4)
	}
	20% {
		-webkit-transform: scaleY(1);
		transform: scaleY(1)
	}
}


/* Small devices (640px and up) */
@media (min-width: 640px) {

.grid-item { width: 50%; }
	
}


/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) {

.grid-item { width: 33.33%; }
	
}


/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) { 

.grid-item { width: 25%; }

}

/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1400px) { 

.container { width: 95%; }
.grid-item { width: 20%; }	
	
}

/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1920px) { 

.grid-item { width: 16.667%; }
	
}