/*
Looking at CSS eh?
For a problem? Got a suggestion? Just want to say hello?
robert@buglogic.com is the way
*/
/*
COLORS
----------------------------*/
:root {
--accent:#ec008c;
--ylw:#fff4de;
--blu:#2a4f9f;
--lt-blu:#cadff4;
--blk:#212121;
--lt-gray:#ececec;
--grn:#3b772d;
--font:'Poppins';
}
html, body{height:100%;}
body {font-family:var(--font); font-size:1.2rem; font-weight:300; color:var(--blk);margin:0;padding:0;display:flex;flex-direction:column;border:solid 8px #FFF;}
footer {display:block;padding:20px;font-weight:200;font-size:80%;color:#FFF;text-align:center;background:var(--blu);}
a.tw {background:#4db0f0;}
a.in {background:#4f7ea6;}
a.social i {color:#FFF;}
a.social { display:inline-block;width:22px;height:22px;border-radius:11px;vertical-align:middle;text-align:center;color:#fff;margin-left:5px;margin-right:5px;}
a.social:hover {background:var(--lt-blu);text-decoration:none;}
a.social:hover i {color:var(--blk);}
.content{flex: 1 1 auto;position:relative;border:solid 6px var(--blk);}
h1, h2, h3 {line-height:100%;font-weight:800;color:var(--blu);}
.page-content {display:flex;flex-direction:column;align-items:flex-end;justify-content:center;height:100%;}
.item {background:#FFF;}
.item-pad {padding:40px;}
.shadow-it {box-shadow: 0 0 30px rgb(0 0 0 / 10%);}
/*
HOME
-----------------------*/
a.home h2{display:table;color:red;padding:10px;}
a.home:hover h2 {color:var(--blu);}
a.home:hover {text-decoration:none;}
.blue {color:var(--blu);font-size:250%;}
a.vote {display:table;width:25%;margin-left:auto;margin-right:auto;background:var(--blu);color:#FFF;font-weight:200;line-height:170%;padding:10px;}
a.vote:hover {text-decoration:none;background:red;}
.sign-up {display:flex;justify-content:flex-end;background:var(--blu);color:var(--lt-blu);padding:10px;}
.sign-up input[type='text'] {background:var(--lt-blu);display:inline-block;padding:5px;margin-right:10px;border:none;outline:none;}
.sign-up input[type='text']:focus {background:#FFF;}
a.red-btn {background:red;color:#FFF;}
a.top-btn {display:inline-block;padding-left:5px;padding-right:5px;}
a.top-btn:hover {background:var(--blu);text-decoration:none;}
a.small-btn {padding:5px;}
a.small-btn:hover {background:var(--blk);text-decoration:none;}
.top {display:flex;align-items:center;justify-content:flex-end;padding:10px;background:#FFF;font-size:120%;font-weight:600;}
.top a, .inner-top a {margin-left:30px;text-align:right;padding-right:10px;}
a.nav {display:inline-block; color:var(--blk);}
a.nav:hover {color:red;text-decoration:none;}
.semi-bold {font-weight:600;}
img.invite-me {position:absolute;top:20px; right:20px;width:15%;}
img.honor-tag {max-width:30%;margin-bottom:30px;}
h1.head {font-size:300%;margin-bottom:30px;}
.embed {display:table;margin-left:auto;margin-right:auto;margin-bottom:10px;}

/*
ABOUT
-----------------------*/
.about {display:flex;}
a.join-button {background:var(--grn);color:var(--ylw);padding:10px;}
a.join-button:hover {background:var(--blu);text-decoration:none;}
a.join-button h1 {color:var(--ylw);font-size:300%;}
/*
CONTACT + INVITE
-----------------------*/
#contact input[type='text'], #contact textarea {width:100%;padding:10px;font-family:var(--font);font-size:1.1em;background-color:var(--lt-gray);border:solid 1px transparent;margin-top:5px; margin-bottom:10px;display:block;}
#contact input[type='text']:focus, #contact textarea:focus {background-color:#ffffff;border:solid 1px var(--blu);}
#contact textarea {height:200px;}
#contact input.captcha-word[type="text"] {display:table;width:100%;text-align:center;background:#727272; color:#ececec; font-family:georgia; font-size:140%; padding:10px;}
#contact input.captcha-word[type="text"]:focus {border:solid 1px transparent;}
#contact select {background:var(--lt-blu);font-family:var(--font);font-size:1.1em;margin-bottom:10px;margin-top:5px;margin-left:auto;margin-right:auto;text-align:center;border:none;outline:none;}
.site-button {cursor:pointer;display:table;font-size:120%;padding:10px;background:var(--blu);color:#FFF;font-weight:600;margin-top:10px;}
.site-button:hover {background:red;}
.help-option {background:var(--lt-blu);padding:10px;margin-bottom:5px;}
.help-plain {border:solid 1px transparent;}
.help-selected {border:solid 1px var(--blu);}
/*
INVITE
----------------------*/
.invite-details {padding:20px;background:var(--lt-blu);}
#contact .invite-details input[type='text'], #contact .invite-details textarea {background-color:var(--blu);color:#FFF;}
#contact .invite-details input[type='text']:focus, #contact .invite-details textarea:focus {background-color:#FFF;color:#000;}
/*
DONATE
----------------------*/
.support {font-weight:800;font-size:130%;color:red;text-align:center;margin-bottom:20px;}
.contribute {display:flex;align-items:center;justify-content:center;flex-wrap:wrap;}
.donate {cursor:pointer;display:table;padding-left:5px;padding-right:5px;margin-bottom:10px;background:red;font-size:150%;font-weight:600;color:#FFF;margin-right:10px;}
.donate:hover {background:var(--blu);}
input[type='text'].donate-other {padding:10px; font-size:130%;border:none;outline:none;background:var(--lt-blu);display:block;margin-bottom:10px;}
.form-box {border:solid 4px var(--blu);padding:20px;}
.top-margin {margin-top:30px;}
.donate-cell {display:table-cell;vertical-align:middle;}
/*
GREETER
---------------------*/
.item-box {background:var(--lt-gray);padding:10px;margin-left:5px;margin-right:5px;}
@media screen and (max-width: 699px) {
	.half, .third, .two-third {width:90%;}
	img.invite-me {position:relative;margin-bottom:20px;margin-top:10px;margin-left:auto;margin-right:auto;width:50%;top:0;right:0;}
	.blue {font-size:150%;}
	.item-pad,.form-box{padding:10px;}
	.padded {padding:0;}
	.about {flex-direction:column-reverse;}
	.top, .sign-up {justify-content:center;font-size:100%;}
	.sign-up input[type='text'] {display:table;margin-left:auto;margin-right:auto;margin-bottom:5px;}
	a.small-btn {display:table;margin:auto;}
	img.honor-tag {max-width:50%;margin-bottom:10px;}
	.top-title, .inner-top, a.join-button {text-align:center;}
	.inner-top, .site-button, .third {padding-right:0;margin-bottom:10px;}
	.campaign-promises {width:75%;}
	a.vote {width:75%;margin-top:10px;margin-bottom:10px;}
	.top a, .inner-top a {margin-left:0px;}
	#contact select {font-size:100%;}
	.embed {display:block;position: relative;padding-bottom: 56.25%;padding-top: 25px;height: 0;}
	.embed iframe {position: absolute;top: 0;left: 0;width: 100%;height: 100%;}
}