*,*:before,*:after{box-sizing:border-box;}
html{font-size:20px;}
body{
margin:0;
padding:0;
font-family:"century gothic",Geneva, Arial, sans-serif;
font-size:1rem;
line-height: 1.5rem;
background: #fff url('/img/grit.png')no-repeat;
color: #000;
}
p{font-size:1rem;}
#logo{
font-family:Verdana,Arial, sans-serif;
font-size: 1.50rem;
line-height: 1.75rem;
letter-spacing:0.025rem;
text-align:left;
text-transform:uppercase;
color: #1cb0f6;
font-weight:bold;
margin-top:20px;
margin-bottom:6px;
padding-top:6px;
}
#photo-effect-tool2{display:none;}
h1,h2,h3,h4,h5{
font-family:Verdana, Arial, sans-serif;
font-size: 1.50rem;
line-height: 1.75rem;
color: #000;
font-weight:normal;
margin-bottom:6px;
padding-top:6px;
}
a:link{color: #1cb0f6;text-decoration: underline;}
a:visited{color: #1cb0f6;text-decoration: underline;}
a:active{color: #1cb0f6;text-decoration: underline;}
a:hover{color: #000;text-decoration: underline;}
a.f:link{color: #000;text-decoration: none;}
a.f:visited{color: #000;text-decoration: none;}
a.f:active{color: #000;text-decoration: none;}
a.f:hover{color: #1cb0f6;text-decoration: none;}
#content{width:800px;margin:0 auto;}
#nav{text-align:center;margin:10px 0;}
.leftText{text-align:left;}
#social{text-align:center;padding:60px 5px 4px 5px;}
#ftr{text-align:center;padding:5px 5px 50px 5px;font-size:0.75rem;}
#imgRow{text-align:center;}
#dldBar, #dldBar2{text-align:center;margin:10px 0;display: none;}
#imgDownload2{display: none;}
#contrastControls{text-align:center;margin:10px 0;display: none;}
input[type="file"]{
display: none;
}
input[type="radio"]{
display: none;
}
.uploadLabel{
background:#1cb0f6;
border: 1px solid #1d79a3;
border-radius:12px;
display: inline-block;
margin:0 0 10px 0;
padding: 15px 25px;
cursor: pointer;
text-transform:uppercase;
color:#fff;
font-size:1.5rem;
font-weight:bold;
text-shadow: 1px 1px 3px #000;
border-bottom:5px solid #000;
}
.uploadLabel:hover{
background:#54c3f8;
background:#099ce2;
padding: 19px 25px 13px 25px;
border: 1px solid #000;
border-bottom:3px solid #000;
}
.contrastLabel{
background:#000;
border: 1px solid #000;
color:#fff;
border-radius:12px;
display: inline-block;
margin:10px;
padding: 20px 30px;
cursor: pointer;
text-transform:uppercase;
font-weight:bold;
}
.contrastLabel:hover{
color:#000;
background:#fff;	
}
.contrastLabel2{
color:#000;
background:#fff;
border: 1px solid #000;
border-radius:12px;
display: inline-block;
margin:10px;
padding: 20px 30px;
text-transform:uppercase;
font-weight:bold;	
}
#filteredImage{filter: drop-shadow(2px 5px 6px #000);margin:10px 0;}
#imageToFilter{position: absolute;left:-99999rem;display:none;}
a.dld:link, a.dld:visited{
text-decoration:none;
background:#1cb0f6;
border-radius:12px;
display: inline-block;
margin:10px 0;
padding: 15px 25px;
cursor: pointer;
text-transform:uppercase;
color:#fff;
font-size:1.0rem;
font-weight:bold;
text-shadow: 1px 1px 3px #000;
border: 1px solid #000;
border-bottom:5px solid #000;
}
a.dld:hover{
text-decoration:none;
background:#099ce2;
margin:10px 0;
padding: 19px 25px 13px 25px;
border: 1px solid #000;
border-bottom:3px solid #000;
}
#share{position: relative; float:right; display:inline-block;margin-top:5px;padding:10px 0 10px 20px;}
#share:hover .dropdown{
display: block;
}
.dropdown{
display: none;
position: absolute;
right:0;
background-color: #fff;
min-width: 240px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
margin-top:0px;
padding: 0;
z-index: 1;
}
.dropdown a{display:block;font-size:1rem;padding:10px 20px;}
.dropdown a:hover{background:#000;color:#fff;padding:10px 20px;}
#copied{display:none;font-size:1rem;padding:10px 20px;background:#1cb0f6;color:#fff;font-weight:bold;}
#patience{text-align:center;color:#1cb0f6;font-size:0.75rem;text-transform:uppercase;font-weight:bold;display:none;}
.processing{width: fit-content;font-size:1rem;color: #000;display: inline-block;border: 1px solid #000;border-radius:12px;
margin:10px;padding: 20px 30px;text-transform:uppercase;font-weight:bold;
background: linear-gradient(currentColor 0 0) 0 100%/0% 3px no-repeat;
animation: l2 2s linear infinite;
}
.processing:before{content:"Processing...";}
@keyframes l2{to{background-size: 100% 3px}}
@media screen and (max-width: 820px){
	body{margin:0 10px;}
	#content{width:100%;}
	#logo{width:100%;margin-top:10px;font-size: 2rem;line-height: 2rem; letter-spacing:0.025rem;}
	#photo-effect-tool{width:100%;height:auto;}
	#patience{display:block;}	
}
@media screen and (max-width: 600px){
	#photo-effect-tool{display:none;}
	#photo-effect-tool2{display:block;width:100%;height:auto;}
}
@media only screen and (-webkit-device-pixel-ratio: 3){
	#patience{display:none;}
}