/* CSS Document */
*{margin:0; padding:0;}
body{font-family:"Open Sans", "Gill Sans", Helvetica, Arial, sans-serif;}
#header{width:100%; height:auto; position:relative; top:0; left:0; padding: .5em 1%; background:rgba(255,255,255,.5); box-sizing:border-box; z-index:1001; vertical-align:middle;  }
#header img{width:25%; max-width:200px; height:auto; vertical-align:middle; }
.clear{display:block; font-size: 1px; height: 1px; margin: -1px 0 0 0; clear: both;}
a{ cursor:pointer;}

#menu{display:block; float:right; height: auto; box-sizing: border-box; width:70%; text-align: right; vertical-align:middle;}
#menu a{display: inline-block; height: auto; box-sizing: border-box; font-size:1em; padding:1em; color:rgb(25,25,25); font-weight:300; vertical-align:middle; cursor: pointer;}

#container{display: none; position:relative; z-index:1000; background:rgba(255,255,255,.7); margin:1em 0 0 2%; box-sizing:border-box; width:96%; height:auto; padding:.5em; }
#container sup{font-size:.5em; }
#container h1{font-weight:normal; font-size:2em; color:rgb(53,163,8);}
#container h2{font-weight:normal; font-size:1.5em; color:rgb(66,80,66);}
#container p{font-weight:normal;  margin:.5em 0;}
#container h3.cat-header{margin: .5em 0 0 0; font-size:1em; color:rgb(53,163,8); cursor:pointer;}
#container h3.cat-header img{width:1em; height:auto;}
#container p.cat-desc{margin:0; display:none;}
#container a{font-weight:normal;  color:rgb(107,165,67); text-decoration:underline;}
#container a.btn{display:inline-block; font-size:1.5em; color:rgb(255,255,255); background:rgb(53,163,8); padding:.2em .4em; margin: .5em 0; text-decoration:none; cursor:pointer;}
#container a.btn.grayed{background:rgb(133,142,144); cursor:default;}
#container p.stepheader{font-size:1.2em; color:rgb(66,80,66);}

#container input[type='text']{width:100%; height:auto; margin:.1em 0 0 0; font-size:1em; padding:.2em; box-sizing:border-box; color:rgb(56,70,74); background:rgba(255,255,255,.8); -webkit-appearance:none; border:1px solid rgb(94,107,111)}
#container input[type='text'].err{border:2px solid rgb(230, 0, 0);}
#container input[type='button']{display:inline-block; font-size:1.1em; color:rgb(255,255,255); background:rgb(53,163,8); padding:.2em .3em; margin: .5em 0; text-decoration:none; cursor:pointer; border:none; -webkit-appearance:none; outline: none;}

.half{display: block; float: left; box-sizing: border-box; width:50%; padding:.5em 2%;}

#About,#Gallery,#Prints{display: none;}

#Gallery a,#Prints a{display:block; box-sizing: border-box;float: left; height: 10em; width: auto; padding:.5em; outline: none; -webkit-appearance:none; }
#Prints a.txt-link{display: inline-block; height: auto; padding: 0; float: none;}

#Gallery a img,#Prints a img{height: 100%; width:auto;}


.backgrounds-con{display:block; position:fixed; top:0; left:0; width:100%; height:100%;}

#step1, #step2, #step3, #step4{display:none;}

#rules{position:absolute; top:4em; left:0; width:100%; height:auto; box-sizing:border-box; padding:.6em; z-index:1010; background:rgba(0,0,0,.8); color:rgb(255,255,255);display:none; font-size:.9em;}
#rules *{color:rgb(255,255,255);}
#rules p{margin:.5em 0 0 0;}
ul { list-style:disc; margin:0 0 0 .5em;}
ul li{ list-style:disc; margin:0 0 0 .5em; padding: 0 0 0 .5em;}

#footer{position:fixed; bottom:0; left:0; width:100%; height: auto; box-sizing: border-box; padding:.1em; font-size: .6em; text-align: center; color:rgb(53,72,21);background:rgba(255,255,255,.5); z-index:1001;}

@media screen and (max-width:600px){
	#Gallery a,#Prints a{max-width: 50%; overflow: hidden;}
	.half{ float: none; width:100%; }

}

@media screen and (max-width:499px){
	body, html{font-size:14px;}

}
@media screen and (min-width:500px) and (max-width:800px){
	body, html{font-size:15px;}
}
@media screen and (min-width:801px) and (max-width:900px){
	body, html{font-size:16px;}
}
@media screen and (min-width:901px) and (max-width:1000px){
	body, html{font-size:17px;}
}
@media screen and (min-width:1001px) and (max-width:1100px){
	body, html{font-size:18px;}
}
@media screen and (min-width:1101px) and (max-width:1200px){
	body, html{font-size:19px;}
}
@media screen and (min-width:1201px){
	body, html{font-size:20px;}
}
	
@media screen and (orientation: portrait) {
	
}