/* FOOTER -------------------------------------------------------------------------------------------------- */

footer#puppyFooter { 
	background:black; 
	color: #beb8a9;
	position:relative; 
	padding:0; 
	font-size:1em; 
	line-height:1em;
	display:flex; 
	justify-content:flex-start; 
	align-items:center; 
	flex-flow:row wrap;
}

footer#puppyFooter:before { content:"";display:block;width:100%;height:3px;position:absolute;top:0;z-index:500;background:linear-gradient( 90deg, hsla(43,11%,60%,0.2) 0%, hsla(43,11%,40%,0.15) 50%, hsla(43,11%,60%,0.2) 100%) }

footer#puppyFooter #footerContent {
	margin: 2em auto; flex:1 1 auto; display:flex; justify-content:flex-start; align-items:flex-start; flex-flow:row wrap;
}

footer#puppyFooter #footerPuppy { flex:0 0 auto; margin:-2.5vw auto 0; width:12em; width:calc( 6em + 6vw ); height:auto;z-index:1000}

footer#puppyFooter section { flex:0 1 auto; min-width:22em; padding:0 2.0vw; margin:0; border-left:3px solid #1c1a17;font-size:0.825em;opacity:0.4;
	transition:opacity 0.25s ease-out; }
footer#puppyFooter section:first-of-type{border:none}
footer#puppyFooter:hover section {opacity:1}

footer#puppyFooter h2 { font-size:1.5em; margin-bottom:0.25em; padding:0; text-shadow:none} /* text-shadow:0 0 0.5em #6600ff } */
footer#puppyFooter p { margin:0.25em 0}

footer#puppyFooter form {position:relative;margin:1.625em 0 1.5em;float:right;}
footer#puppyFooter form input, footer form input[type="submit"]{max-width:10em;float:left;position:relative;bottom:auto;right:auto;margin:0 1em 0 0}
footer#puppyFooter form input[type="submit"] {margin:0;clear:none}
footer#puppyFooter form label {margin:0 1em 0 0}

footer#puppyFooter section #links {
	margin: 0.75em 0 0 0;
	font-size: 1.375em;
}

footer#puppyFooter section #links a { width:auto; text-decoration:none; padding:0.5em 0; padding-left:1.375em!important; opacity:0.5; transition:opacity 0.25s ease-out; }
footer#puppyFooter section #links a:last-of-type { padding-left:0.3em!important; }

footer#puppyFooter section #links a:hover { opacity:1 }
footer#puppyFooter section #links a img { left:-0.25em; width:2.0em; height:auto; margin:auto; top:0;bottom:0 }

footer#puppyFooter section #links a.patreon {padding-top:0.75em; padding-left:8em!important;}
footer#puppyFooter section #links a.patreon img {left:0;top:0.25em;width:7.0em;}

footer#puppyFooter a.iconOnly { height:100%; padding: 1.25em !important; }

/* hack for resetting font-size when using news */

@media screen and (max-width:75em) { 
	footer#puppyFooter.news {
		font-size:0.75em;
	}
}

@media (max-width: 60em) {
	footer#puppyFooter.news form input#email {
	  padding: 0;
	}
}

/* smaller screen */

@media all and (max-width:72em) {
	footer#puppyFooter, footer#puppyFooter #footerContent {justify-content:center;}
}

/* tablet or phone probably */ 
	
@media all and (max-width:60em) {
	footer#puppyFooter {padding:0.5em 0 1em;text-align:center;}
	
	footer#puppyFooter #footerContent {margin:0 auto 2em}
	
	footer#puppyFooter section {opacity:1; flex: 1 1; padding:1.5em 0 0; margin: 0 1.5em; max-width:24em; border:none!important}
	footer#puppyFooter section:first-of-type {min-width:100%;padding:1.5em 0;border-bottom:3px solid #1c1a17!important;}
	
	footer#puppyFooter form {float:none;display:table;clear:both;margin:1.25em auto 0;width:100%}
	footer#puppyFooter form input, footer form label, footer form input[type="submit"]  {float:none;display:table-cell;width:auto;margin:0.5em}
	footer#puppyFooter form label {display:none}
	footer#puppyFooter form input#email {width:auto;max-width:none;min-width:10em;padding:0.5em}

	footer#puppyFooter section#follow, footer section#supportUs {border:2px solid hsla(43,10%,10%,1);border-width:0.2em 0 0}
}