body {
    line-height: 27px;
    font-family: 'Muli', sans-serif;
    font-size: 14px;
    color: #555;
    background: #555 url(../images/low_contrast_linen.png);
    margin:0;
}

a{
    color:#ffa120;
    text-decoration:none;
}

a:hover{
    color:#ffbc5e;
	transition: all 0.3s linear 0s;
	-webkit-transition: all 0.3s linear 0s;
	-moz-transition: all 0.3s linear 0s;
}

h1 {
	margin:0;
	color: white;
}

/* #header{
    margin:60px 10px 30px 10px;
} */

header {
	display: flex;
	margin: 60px auto 30px;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	max-width: 966px;
	gap: 20px;
}

#home header {
    max-width: 966px;
}

.container{
    max-width:986px;
	width: 90%;
    margin-left:auto;
    margin-right:auto;
}

#home .container{
    max-width:986px;
}

#logo{
	flex: 0;
    /* margin:0;
    width:225px;
    float:left; */
}

#logo img{
    border:none;
}

#title{
    font-size:24px;
    color:#ccc;
    padding:0;
}

.nav{
	margin: 0;
}

.nav a {
	color: orange;
	text-align: right;
}

.category {
	flex: 1;
	text-align: right;
}

#home #nav{
    display:none;
}

#nav ul{
    list-style:none;
    margin:0;
    padding:0;	
}

#nav ul li{
    margin:5px 0 0 20px;
    padding:0;
    border-left:#777 solid 1px;
}

#nav ul li a{
    padding:3px 25px 3px 25px;
    font-size:110%;
    /*text-transform:uppercase;
    letter-spacing:1px;*/
}



/* #filter-buttons ul{
    list-style:none;
    margin:0;
    padding:0;
}

#filter-buttons ul li{
    float:left;
    margin:0;
    padding:0;
    text-align:center;
	width:25%;
} */


#filter-buttons{
    /* margin:7px 0 0 0; */
    /* padding:0;
	width:500px; */
	display:flex;
}

#filter-buttons div {
    width: 112px;
	text-align: center;
}

#filter-buttons div,
.nav a{
	display:inline-block;
	font-weight:bold;
	margin:0;
	padding:10px 0;
	color:#555; 
	/* background:#8e8e8e url(../images/filter-button-bg.png) repeat-x; */
	background: #f2f2f2;
	background: linear-gradient(180deg, rgba(222, 222, 222, 1) 0%, rgba(190, 190, 190, 1) 100%);
	border-left:#777 solid 1px;
	border-top:#777 solid 1px;
	border-bottom:#777 solid 1px;
	cursor:pointer;
	transition: all 0.185s linear 0s;
	-webkit-transition: all 0.185s linear 0s;
	-moz-transition: all 0.185s linear 0s;
	box-shadow: 1px 1px 0 rgba(255, 255, 255, 0.5) inset, -1px -1px 0 rgba(180, 180, 180, 0.5) inset;
	text-shadow: 1px 1px 0 rgba(200, 200, 200, 0.67);
}

#filter-buttons div:hover{
	color:#000;
	/* background:#8e8e8e url(../images/filter-button-bg-hover.png) repeat-x; */
	background: #f2f2f2;
	background: linear-gradient(0deg, rgba(222, 222, 222, 1) 0%, rgba(190, 190, 190, 1) 100%);
	transition: all 0.3s linear 0s;
	-webkit-transition: all 0.3s linear 0s;
	-moz-transition: all 0.3s linear 0s;
}


#filter-buttons div:first-child{
	border-radius: 25px 0 0 25px;
	border-left:none;
}

#filter-buttons div:last-child{
	border-radius: 0 25px 25px 0;
}


#filter-buttons div.selected{
    background:#ffa120;
    color:#000;
}

.nav a {
	border-radius: 25px;
    background:#ffa120;
    color:#000;
	padding: 10px 22px;
	text-align: center;
}
.nav {
	flex: 0;
}

.info {
    margin-bottom: 30px;
}

.contact-info {
    color: white;
    text-align: center;
    padding: 5px;
    background: black;
}

#large-content{
    background: #ccc; /* Old browsers */
    position:relative;
    padding:40px 40px 70px 40px;
}

#large-content h2{
    margin:0 0 10px 0;
    padding-right:100px;
}

#large-content h4{
    font-weight:normal;
    font-size:13px;
    margin:0 0 10px 0;
}


#large-content p{
    margin:0;
    padding:0;
}

#large-content .img-container img{
    border:#fff solid 1px;
    margin-bottom:30px;
    max-width:100%;
}

#large-content ul{
    display:none;
    margin:0;
    padding:0;
}

#large-content ul li{
    padding:0;
    margin:0 0 0 40px;
}

.arrows{
    position:absolute;
    top:40px;
    right:40px;
}

.arrows img{
	border:none;
}

.left-arrow{
    float:left;
}

.img-container{
    text-align:center;
}

.entry {
    position: relative;
    margin: 0 10px 20px;
    background-color: #fff;
    float: left;
    border:#fff solid 2px;
    box-shadow: rgba(0, 0, 0, 0.3) 0 5px 7px;
	border-radius:8px;
	overflow: hidden;
	min-width: 222px;
}

.entry img{
    height:180px;
    width:222px;
    border:none;
    cursor:pointer;
}

#success{
	margin:100px 0 0 0;
	text-align:center;
	width:100%;
}

#success h1{
	color:#CCC;
}

#success a{
	padding:2px 15px;
	height:25px;
}


.clearfix:before, .clearfix:after{ 
    content:""; 
    display:table; 
} 

.clearfix:after{ 
    clear:both; 
} 

/* For IE 6/7 (trigger hasLayout) */ 
.clearfix{ 
    zoom:1; 
}

/*=================== sticky footer ===========================*/

#main {
	position:relative;
	min-height: 100%;
}

.container{
	/* overflow:auto;
	padding-bottom: 560px; */
}  /* must be same height as the footer */

#footer {
	position: relative;
	margin-top: -530px; /* negative value of footer height */
	height: 530px;
	clear:both;
    background: #111 url(../images/darth_stripe.png);
}

#footer-wrapper{
	max-width:986px;
    margin:0 auto;
}

#footer-content{
    padding:40px 0 30px 0;
    width:400px;
    margin:0 auto;
    text-align:center;
}

#footer-content h2{
	color:#CCC;
	margin-top:0;
}

body:before {/* thanks to Maleika (Kohoutec)*/
	content:"";
	height:100%;
	float:left;
	width:0;
	margin-top:-32767px;/* thank you Erik J - negate effect of float*/
}

#copyright{
	font-size:12px;
	margin-top:50px;
}

/*===================== form ===========================*/

*:focus {outline: none;}

#contactForm{
    width:100%;
    margin:0;
}

#contactForm .inactive{
	color:#666;
}	 

#contactForm .active{
	color:#ddd;
}
	 		
#contactForm .focused{
	color:#ddd;
	border:#F80 solid 1px;
}	 	

#contactForm p{
	margin:5px 0 0 0;
}

#contactForm textarea {
	resize: none;
	overflow:auto;
	height:80px;
}

#contactForm input, #contactForm textarea{
	font-family:Arial, Helvetica, sans-serif;
	font-size:16px;
	width:90%;
	background-color:#222;
	color:#ccc;
	margin:2px 0;
	padding:6px;
	border-radius:5px;
	/*border:none;*/
	border-bottom:#333 solid 1px;
	border-right:#222 solid 1px;
	border-top:#000 solid 1px;
	border-left:#111 solid 1px;
}

#contactForm a{
	/*color:#777;*/
	margin-top:20px;
	line-height:normal;
}

#contact-phone{
	font-weight:bold;
}


/*========================= Buttons ==================================*/

.button {
	-moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
	-webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
	box-shadow:inset 0px 1px 0px 0px #ffffff;
	background:#8e8e8e url(../images/filter-button-bg.png) repeat-x;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	border-radius:6px;
	border:1px solid #999;
	display:inline-block;
	color:#444;
	font-family:arial;
	font-size:15px;
	font-weight:bold;
	padding:6px 24px;
	text-decoration:none;
	text-shadow:1px 1px 0px #e0e0e0;
}.button:hover {
	background:#8e8e8e url(../images/filter-button-bg-hover.png) repeat-x;
}.button:active {
	position:relative;
	top:1px;
}



.entry figure{
	position:relative;
	margin:0;
}

.entry figure img {
    max-width: 100%;
    display: block;
    position: relative;
}

.entry figcaption {
	position: absolute;
	top: 0;
	left: 0;
	padding: 20px;
	background: #242424;
	color: #FF9E0D;
	width: 182px;
	line-height:125%;
	cursor:pointer;
}

.entry figcaption h3 {
    margin: 0;
    padding: 0;
    color: #fff;
}
 
figure {
    overflow: hidden;
}

figure img {
    transition: transform 0.4s;
}
 
figure:hover img,
figure.cs-hover img {
    transform: translateY(-50px);
}

.entry figcaption {
    height: 80px;
    top: auto;
    bottom: 0;
    opacity: 0;
    transform: translateY(100%);
    transition: transform 0.4s, opacity 0.1s 0.3s;
}

figure:hover figcaption,
figure.cs-hover figcaption {
    opacity: 1;
    transform: translateY(0px);
    transition: transform 0.4s, opacity 0.1s;
}

/*******************MEDIA QUERIES*******************/

@media all and (max-width: 1023px){
	
	.container{
		/* max-width:738px; */
		transition:all .5s
	}
	
	#home .container{
		max-width:738px;
	}
	
	#home header {
		max-width:718px;
	}
	
	/* #filter-buttons{
		width:400px;
		transition:all .5s
	} */
	
}

@media all and (max-width: 778px){
	
	.container{
		/* max-width:492px; */
		transition:all .5s
	}

	#home .container{
		max-width:492px;
	}

	#home header {
		max-width:472px;
		gap: 0;
	}
	
	#filter-buttons{
		width:100%;
		margin-top:30px;
		transition:all .5s
	}

	#filter-buttons div {
		width: 25%;
	}
	
	#logo{
		margin:0 auto;
		float:none;
		transition:all .5s
	}
	
	#nav, #nav ul{
	    width:100%;
	    text-align:center;
	}
	
	#nav ul li{
	    float:none;
	    border:none;
	    margin:20px 0 0;
	}
	
	#nav ul li a {
	    float: none;
	    margin: 20px auto;
	}
	
	#header{
	    margin-bottom:20px;
	}
	
	#title{
	}


}

@media all and (max-width: 550px){
	
	.container{
		/* max-width:246px; */
		transition:all .5s;
	}

	#home .container{
		max-width:246px;
	}

	header {
		flex-direction: column;
		max-width:246px;
	}

	#home header {
		flex-direction: column;
		max-width:226px;
	}
	
	#filter-buttons{
		width:100%;
		margin-top:30px;
		transition:all .5s;
		border-radius: 0;
    	flex-direction: column;
	}

	#filter-buttons div {
		width: 100%;
	}

	#filter-buttons div:first-child {
		border-radius: 15px 15px 0 0;
		border-left: 1px solid transparent;
	}

	#filter-buttons div:last-child {
		border-radius: 0 0 15px 15px;
		border-left: 1px solid transparent;
	}

	#logo{
		margin:0 auto;
		float:none;
		transition:all .5s;
	}
		
	#filter-buttons ul li{
		width:50%;
	}

	#filter-buttons ul li:first-child a, #filter-buttons ul li:last-child a {
		border-radius: 0;
	}
	
	#footer-content{
		padding:40px 0 30px 0;
		width:300px;
		margin:0 auto;
		text-align:center;
	}
	
	.arrows{
	    top:20px;
	    right:20px;
	}
	.arrows img{
	    height:30px;
	}
	
	#large-content{
	    padding:20px 20px 40px 20px;
	}
	
	#header{
	    text-align:center;
	}
	
	#title{
	    padding-top:20px;
	}

}