/*----- preload images -----*/
#preload {display:none;}



/*----- custom color -----*/
:root {
	--merlot:#900030;
}
h1.colorexample1 {
    color: var(--merlot);
}



/*----- call fonts -----*/
@import url('https://fonts.googleapis.com/css?family=Lato:300|Alice|Oswald:300&display=swap&subset=latin-ext');



/*----- Test Responsive -----*/
.smaller {color:green;}
@media screen and (max-width: 600px) { .smaller {color:red;} } 


    

body {width:100%; height:100%; padding:20px; background-color:white; overflow-y:scroll; overflow-x:hidden; perspective:1px;}
* {margin:0; padding:0; border:none; box-sizing:border-box;}
img {margin:0; padding:0;}
a {text-decoration:none;}
h1 {font-size:3.5em;}
h2 {margin-bottom:20px; display:block; border-bottom:solid 3px var(--merlot); font-size:2.25em; font-family:'Alice', serif;}
h3 {margin-bottom:20px; font-size:1.5em; font-family:'Oswald', sans-serif;}
.red {color:var(--merlot);}
.alice {font-family:'Alice',serif;}
.lato {font-family:'Lato',sans-serif;}
.oswald {font-family:'Oswald',sans-serif;}


/* buttons */
.button1 {padding:10px 20px; text-align:center; display:inline-block; font-size:16px; margin:4px; -webkit-transition-duration:0.2s; /* Safari */ transition-duration:0.2s; cursor:pointer; background-color:var(--merlot); background-image: linear-gradient(140deg, #C90040 0%, #7D0028 50%, #C90040 100%); color:white; text-transform:; font-family:'Lato',sans-serif; font-size:1.25em;}
.button1:hover {background-color:var(--merlot); background-image:none; color:white;}
.button1 a {color:inherit;}
.button1 a:hover {color:inherit;}





.left {float:left;}
.right {float:right;}

.justifytext {text-align:justify;}
.centertext {text-align:center;}
.righttext {text-align:right;}
.lefttext {text-align:left;}
.copy {}
.lpic {padding-right:30px;}
.rpic {padding-left:30px;}
.shadow {box-shadow: 0 4px 8px 0 rgba(0,0,0,0.4), 0 6px 20px 0 rgba(0,0,0,0.39);}
@media screen and (max-width: 800px) { 
	.lcopy, .rcopy, .copy {padding:10px; float:none;}
	.lpic, .rpic {width:100%; display:block; margin:0 auto; padding:5px; text-align:center;}
	.lefttext, .righttext {text-align:center;}
}
.blogblurb {whitespace:nowrap; overflow:hidden; text-overflow:ellipsis;}

.centerdiv {margin:0 auto;}

.m0-15 {margin:0 15px;}
.m0-30 {margin:0 30px;}
.m0-60 {margin:0 60px;}
.m15-0 {margin:15px 0;}
.m30-0 {margin:30px 0;}
.m60-0 {margin:60px 0;}
.p0-15 {padding:0 15px;}
.p0-30 {padding:0 30px;}
.p0-60 {padding:0 60px;}
.p15-0 {padding:15px 0;}
.p30-0 {padding:30px 0;}
.p60-0 {padding:60px 0;}
.m15 {margin:15px;}
.m30 {margin:30px;}
.m60 {margin:60px;}
.p15 {padding:15px;}
.p30 {padding:30px;}
.p60 {padding:60px;}

.spacetop-s {margin-top:20px;}
.spacetop-m {margin-top:50px;}
.spacetop-l {margin-top:100px;}
.spacebot-s {margin-bottom:20px;}
.spacebot-m {margin-bottom:50px;}
.spacebot-l {margin-bottom:100px;}


.ten {width:10%;}
.twenty {width:20%;}
.thirty {width:30%;}
.forty {width:40%;}
.fifty {width:50%;}
.sixty {width:60%;}
.seventy {width:70%;}
.eighty {width:80%;}
.ninety {width:90%;}
.full {width:100%;}
.onethird {width:33%;}
.twothirds {width:66%;}
.quarter {width:25%;}
.threequarter {width:75%;}
.fiftya {width:50%; min-width:201px;}
.copyright {width:55%;}
.legalinks {width:45%;}
@-ms-viewport {width: device-width;}
.row {width:100%;}
.clearfix, .clearfix:before, .clearfix:after, .row:before, .row:after {content:" "; display:table;}
.clearfix:after, .container:after, .row:after {clear:both;}
.center-block {display:block; margin-left:auto; margin-right:auto;}
.col {position:relative; min-height:1px; float:left; display:inline-block;}
@media screen and (max-width: 800px) { .col {width:100%;} } 



/*----- Logo -----*/
.logo {height:80px; position:absolute; top:0; left:0;}
.logo * {float:left;}
.logo_ico {display:none; overflow:hidden;}
.logo_exp {display:inline-block;}
/*----- Logo Responsive -----*/
@media screen and (max-width: 400px) {
	.logo_ico {display:inline-block;}
	.logo_exp {display:none; overflow:hidden;}
}



/* navbar */
nav {position:absolute; right:0; top:0;}
/*----- Menu Outline -----*/
.menu {margin:0 16px;}
.menu li {margin-top:19px; list-style:none; font-family:'Oswald',sans-serif; /*white-space:nowrap;*/}
.menu a {transition:all linear 0.15s; text-decoration:none; text-transform:uppercase; color:black; border: solid 1px white;}
.menu li:hover > a {color:black; border: solid 1px black;}
.menu .current-item > a {text-decoration: overline;}
/*----- Top Level -----*/
.menu > ul > li {float:left; display:inline-block; position:relative; font-size:18px;}
.menu > ul > li > a {padding:10px 20px; display:inline-block;}
/*----- Responsive -----*/
.menu .icon {display:none; font-size:21px; line-height:1.1em;}
@media screen and (max-width: 680px) {
	.menu ul {width:100%; z-index:-1;}
	.menu li:not(:first-child) {display:none; overflow:hidden;}
	.menu a.icon {float:right; display:block;}
	/* js, once icon clicked, toolbar appears */
	nav {padding-bottom:20px;}
	.menu a:not(.icon) {width:100%;}
	.menu.responsive {position:relative; display:block;}
	.menu.responsive li {float:right; display:block; text-align:center;}
	.menu.responsive li:not(:first-child) {width:100%;}
}




/*----- Containers -----*/
.container {margin:0 auto 100px; display:block; max-width:1000px;}
.header {margin:0 auto; padding:0px; position:relative; display:block; max-width:1000px; min-height:90px; border: solid 3px black;}
.header:after {display:block; clear:both;}
.homecopy {margin:0 auto; padding: 30px 60px; display:block; overflow:auto; border-top:solid 0px black; border-right:solid 3px black; border-left:solid 3px black; border-bottom:solid 3px black; width:calc(100% - 80px);}
.main {margin:20px auto 100px; position:relative; max-width:1000px;}
.legal {font-family:'Lato',sans-serif; font-size:.8em; text-align:justify;}
.plainbox {margin:30px auto 0; padding:40px; display:block; border: solid 3px black; width:calc(100% - 80px);}
.successbox, .alertbox {margin:30px auto; padding:40px; text-align:center; display:block; width:100%;}
#successbox {margin-bottom:20px; border: solid 3px green; background:honeydew; color:green;}
#successbox h2 {border-color:green;}
#alertbox {margin-bottom:20px; border: solid 3px darkred; background:mistyrose; color:darkred;}
#alertbox h2 {border-color:darkred;}
.blurb p, .blurb a {font-family:'Lato',sans-serif;}
.blurb h2,h3,h4 {font-family:'Oswald',sans-serif;}



/*----- Home -----*/
.headerhome {position:relative; display:block; max-width:1000px; min-height:89px; border-top: solid 3px black; border-right: solid 3px black; border-bottom: solid 0px black; border-left: solid 3px black;}
.topleft {display:inline-block; float:left; height:41px; width:20px; border-top: solid 0px black; border-right: solid 0px black; border-bottom: solid 3px black; border-left: solid 3px black;}
.topcenter {display:inline-block; float:left; width:calc(100% - 40px); height:41px; border-bottom: solid 3px white;}
.topright {display:inline-block; float:left; height:41px; width:20px; border-top: solid 0px black; border-right: solid 3px black; border-bottom: solid 3px black; border-left: solid 0px black;}
.topbg {margin:0 auto; width:calc(100% - 40px); height:666px; background: url('https://pennyfarthing.pub/_media/PF_Icon.png') no-repeat 50% 80%, url('https://pennyfarthing.pub/_media/1.jpg') no-repeat 88% top; background-size:cover; display:block; border:none; position:relative; z-index:-1;}
.big {font-family:'Alice',serif; color:white; position:absolute; bottom:50px; left:3%; font-size:calc(2rem + 28 * (100vw - 375px)/ 800);}
@media screen and (max-width: 600px) { .big {font-size:48px;} }




/*----- About -----*/
.about {margin:20px auto 0; padding:30px 30px 0; max-width:1000px; background: url('https://pennyfarthing.pub/_media/3.jpg') no-repeat 50% 50%; background-size:cover;}
.abouttop {padding:30px; border-top:solid 3px white; border-right:solid 3px white; border-bottom:solid 0px white; border-left:solid 3px white; color:white;}
.abouttop li {margin-left:50px; font-size:1.5em;}
.abouttop .quoteblock {margin:0 auto; padding:0 4em; font-size:1.3em; text-align:center;}
.abouttop .quote {font-size:1.5em;}
.abouttop .quotesource {font-size:1.25em; text-align:right;}
.abouttop p {font-size:1.35em;}
.aboutbottom {margin:0 auto; width:calc(100% - 60px); border-top:solid 0px black; border-right:solid 3px black; border-bottom:solid 3px black; border-left:solid 3px black;}



/*----- Contact -----*/
.contactouter .sfooter {display:none;}
.contactleft {left:0; width:65%}
.contactright {right:0; width:35%; background: url('https://pennyfarthing.pub/_media/2.jpg') no-repeat 50% 50%; background-size:cover;}
.contactleft, .contactright {position:absolute; height:750px;}

.contact {margin-top:20px; padding:40px; border-top:solid 3px black; border-right:solid 0px black; border-bottom:solid 3px black; border-left:solid 3px black;}
.crinner {margin:20px 20px 20px 0; padding:40px; border-top:solid 3px white; border-right:solid 3px white; border-bottom:solid 3px white; border-left:solid 0px white;}
.contact, .crinner {height:650px;}
.contact p {font-family:'Lato',sans-serif; color:black;}
.contact a {font-family:'Lato',sans-serif; color:black;}

.footerl {margin-bottom:150px; width:100%; border-bottom:solid 3px black;}
.footerl * {color:black;}
.footerr {margin-bottom:20px; position:absolute; bottom:0; right:0; margin-right:20px; width:calc(100% - 20px); border-bottom:solid 3px white;}
.footerl p, .footerr p {float:left center; font-size:.85em;}
.footerl a, .footerr a {float:right center;}
.footerl a:hover, .footerr a:hover {color:var(--merlot);}
.footerl, .footerr {padding:20px 40px; height:60px;}
.footerl *, .footerr * {display:inline-block; font-family:'Oswald',sans-serif;}

@media screen and (max-width: 800px) {
	.contactright, .crinner, .footerr, .footerl {display:none;}
	.contactleft, .contact, .footerl {width:100%;}	
	.contactouter .sfooter {display:block;}	
	.contactleft {margin:30px auto 0; padding:10px; display:block; position:static; left:auto; border: solid 3px black; width:calc(100% - 40px);}
	.contact {padding:0; border:none;}	
}

input {border: solid 1px black;}
textarea {border: solid 1px black;}
input[type=text] {width:100%; padding:10px; font-family:'Oswald',sans-serif;}
input[type=email] {width:100%; padding:10px; font-family:'Oswald',sans-serif;}
input[type=submit] {margin:20px 0 30px; padding:10px 20px; background-color:var(--merlot); background-image: linear-gradient(140deg, #C90040 0%, #7D0028 50%, #C90040 100%); color:white; float:right; border:0 none; cursor:pointer; font-family:'Oswald',sans-serif; font-size:1.25em;}
textarea {padding:10px; width:100%; height:150px; padding:10px; font-family:'Oswald',sans-serif; font-size:.86em;}




/*----- sparse Footer -----*/
.sfooter {margin:0 auto;}
.sfooter * {display:inline-block; color:black; font-family:'Oswald',sans-serif; text-align:center;}
.sfooter p {padding:20px;}
.sfooter a:hover {color:var(--merlot);}



.socialc {margin:0 auto; min-width:72px; display:inline-block; text-align:center;}




@media screen and (max-width: 800px) { .homecopy, .plainbox, #successbox, #alertbox, .abouttop, .abouttop .quoteblock {padding:10px;} } 




