/*
////// Looking at CSS eh?  ///////
////// Just curious?       ///////
////// Found a problem?    ///////
////// Got a suggestion?   ///////
////// robert@buglogic.com ///////

COLORS
----------------------------*/
:root {
--orange:#ed9208;
--accent:#9DBE30;
--gray:#7c7c7c;
--lt-gray:#ececec;
--brn:#8C793E;
--brn-drop:#60542d;
--ylw:#fce803;
--blu:#687DA6;
}
/*
BODY
----------------------------*/
html, body{height:100%;}
/* body {display:flex; flex-direction:column;font-family:'Raleway'; color:var(--gray); font-weight:600;} */
body {font-family:'Raleway'; color:var(--gray); font-weight:600;}
.content{flex: 1 0 auto}
.bug-container {height:100vh;}
/*
BRAND
----------------------------*/
.brand {font-family:Nunito;font-weight:400;font-size:200%;display:table;}
h1, h2 {font-family:'Raleway'; letter-spacing:3px;font-weight:900}
h3 {font-family:'Raleway';font-weight:700;}
.bug {color:var(--accent);}
.logic {color:var(--orange);}
.bug, .logic {text-shadow:1px 1px 1px #5a6d1d}
/*
COLOR THINGS
---------------------------*/
.grn-bkg {background-color:var(--accent);}
.blu-bkg {background-color:var(--blu); color:#ececec;}
.org-bkg {background-color:var(--orange);}
.lt-gray-bkg {background-color:var(--lt-gray);}
.ylw, a.ylw{color:var(--ylw);}
a.org {color:var(--orange);}
.wht, .copy {color:#FFF;}
.copy {font-size:1.2em}
.orange{color:var(--orange);}
/*
HEADER
----------------------------*/
.header {width:100%;background:#000;padding:5px;position:fixed;display:flex;align-items:center;z-index:20;}
.stick-header{background:#000;padding:5px;position:sticky;top:0;display:flex;align-items:center;z-index:20;}
.block-header {background:#000;padding:5px;display:flex;align-items:center;position:relative;}
nav {color:var(--orange);width:100%;text-align:right;padding-right:20px;}
nav a {color:#FFF;margin-left:10px; margin-right:10px;}
nav a:hover {color:var(--accent);text-decoration:none;}
/*
CONTENT
----------------------------*/
footer {display:block;padding:10px;background:var(--orange);color:#FFF;text-align:center;}
.menu a {font-weight:700; color:var(--ylw); font-size:150%; letter-spacing:3px;}
.menu a:hover {text-decoration:none}
.thumbs {display:flex; flex-wrap:wrap;}
a.bug-box-thumb {display:table;width:20%;padding-bottom:20%;background-size:cover;background-width:100%;}
.topics {background:#ececec; padding:20px; text-align:center; border-radius:5px;}
.container, .bug-page {height:100vh;}
.bug-content {display:flex;align-items:center;width:100%;height:100%;}
.bug-intro {background-color:var(--orange);background-image:url('/images/bug-home-motion-css.svg');}
.bug-welcome {display:table;width:50%;padding-left:50px;text-align:center}
.bug-landing {width:100%;padding-left:50px;text-align:center;}
.bug-welcome h1, .bug-business h1, #bug-business h1, .bug-arts h1, .bug-topics h1, .bug-tools h1, .bug-contact h1, .bug-about h1, .bug-graphics h1, .bug-landing h1, h1.drop {color:#FFF;text-shadow:1px 1px 1px #5a6d1d;font-size:250%;}
h1.out {color:var(--orange);-webkit-text-stroke:2px #FFF;}
h1.code {color:#FFF;-webkit-text-stroke:2px var(--gray);}
h2.drop {color:#FFF;text-shadow:1px 1px 1px #5a6d1d;}
a.bug-reload{position:absolute;top:10px;right:10px;display:table;z-index:20;width:30px;height:30px;border-radius:15px;background-image:url('/images/rotate.png');background-repeat:no-repeat;background-size:cover;transition:transform .8s ease-in-out;}
a.bug-reload:hover{transform:rotate(180deg);}
a.bug-link {display:table;margin-top:20px;margin-left:auto;margin-right:auto;color:#FFF;border-radius:10px;border:solid 3px #FFF;padding:10px;box-shadow:1px 1px 1px #5a6d1d;}
a.bug-link:hover {background:#000;color:var(--accent);text-decoration:none;}
a.green {background-color:var(--accent);}
a.orange {background-color:var(--orange);}
.bug-tell {display:flex; justify-content:center;align-items:space-between;}
.bug-more {display:table;font-weight:600;position:relative;margin-left:40px;background:rgba(236,236,236,.8);padding:40px;border-radius:10px;font-size:150%;width:50%;font-family:'Source Serif Pro';}
.bug-explain {display:table;position:relative;background:var(--lt-gray);font-weight:600;margin-left:40px;padding:40px;border-radius:10px;font-size:150%;font-family:'Source Serif Pro';}
.deck-spot {display:table; margin:auto;font-weight:600;font-size:200%;}
a.bug-close {display:table;position:absolute;color:#FFF; top:5px;left:5px;height:30px;width:30px;line-height:30px;text-align:center;border-radius:15px;background:var(--gray);}
a.bug-close:hover{background:#000;text-decoration:none;}
.spot-left {transform:rotate(80deg);}
.spot-right {transform:rotate(-80deg);}
.bug-standard {display:flex;justify-content:center;}
.bug-code-container {display:none;position:absolute;z-index:40;width:100%;height:100%;}
.bug-center{display:flex;justify-content:center;align-items:center;height:100%;}
.bug-code {display:table;margin:auto;padding:5px;border-top:solid 3px var(--gray);border-bottom:solid 3px var(--gray);}
.bug-circle {display:table; position:relative; width:25%; padding-bottom:25%; border-radius:50%;margin:auto;background:#FFF;box-shadow: 0 0 0 3px black;}
.buggy-circle {display:table;position:relative;width:50%;padding-bottom:50%;border-radius:50%;background:rgba(255,255,255,0.8);border:solid 3px #000;}
.bug-circle-copy {position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);margin:0;text-align:center}
.bug-business {background-color:var(--accent);background-image:url('/images/bug-biz.svg');}
.bug-arts, .bug-illoz {display:flex;align-items:center;height:100%;flex-direction:row;}
.bug-tools {background-color:var(--accent);background-image:url('/images/bug-tools.svg');}
.bug-contact {justify-content:space-around;padding-bottom:20px;background-color:var(--orange);background-image:url('/images/bug-contact.svg');background-position:left;background-repeat:no-repeat;background-size:auto 100%;}
.bug-roller, .art-sites {display:block; width:50%;}
.bug-commerce {background-color:var(--blu);display:flex;align-items:center;height:100%;}
.bug-about{background-color:var(--accent);background-image:url('/images/bug-about.svg');height:100vh;}
.bug-about-two {background-color:var(--accent);background-image:url('/images/bug-about2.svg');height:100vh;}
.bug-menu {display:table;padding-top:10px;width:20%;background:var(--lt-gray);border-top-right-radius:10px;border-bottom-right-radius:10px;font-size:115%;padding-top:10px;padding-bottom:10px;border-top:solid 3px #FFF;border-right:solid 3px #FFF;border-bottom:solid 3px #FFF;}
.bug-menu a, .mobile-menu a {display:block;padding-left:10px;padding-bottom:5px;color:var(--blu);background:transparent;}
.bug-menu a:hover{background:#000;color:var(--orange);text-decoration:none;}
.bug-menu-mobile {display:none;}
.bug-home{background-image:url('/images/business/bug-home.svg');}
.bug-invoicing{background-image:url('/images/business/bug-invoice.svg');}
.bug-ticketing{background-image:url('/images/business/bug-ticketing.svg');}
.bug-tech{background-image:url('/images/business/bug-tech.svg');}
.bug-cms{background-image:url('/images/business/bug-cms.svg');}
.bug-crm{background-image:url('/images/business/bug-crm.svg');}
.bug-rma {background-image:url('/images/business/bug-rma.svg');}
.bug-design{background-image:url('/images/business/bug-design.svg');}
.bug-cart{background-image:url('/images/business/bug-cart.svg');}
.bug-graphics{background-image:url('/images/bug-graphics.svg');}
.bug-pad{padding-left:40px;}
.bug-phone {background:var(--accent);display:table;padding:20px;border:solid 2px #FFF;border-radius:10px;}
.rt-bkg{background-repeat:no-repeat;background-position:right;background-size:auto 100%;}
a.art-site {display:table;width:33%;padding-bottom:33%;position:relative;background-color:transparent;background-size:cover;background-repeat:no-repeat;background-position:center;}
.art-name {display:none;color:#FFF;width:100%;height:100%;position:absolute;top:0;z-index:30;background-color:rgba(54,54,54,0.7);}
.site-name {display:flex;align-items:center;justify-content:center;text-align:center;width:100%;height:100%;position:relative;}
.bug-topics {width:50%;text-align:center;padding:40px;}
.mobile-menu {display:table;background:var(--lt-gray);padding:20px;text-align:center;margin:auto;border-radius:10px;border:solid 2px #FFF;font-size:150%;}
/*
CONTACT
---------------------------*/
#form {background:var(--blu);color:#ececec;border-radius:12px;padding:12px; margin-top:20px;margin-left:0;margin-right:0;}
#form input[type="text"],
#form	textarea { background:#ececec;color:#727272;border-radius:5px;border:none;padding:10px;margin-top:5px;min-width:300px;}
#form textarea {min-height:200px;display:block;}
#form input[type="text"]:focus,
#form textarea:focus {background:#FFF;}
.captcha, .captcha-word,#form input.captcha-word[type="text"] {background:#727272; color:#ececec;border:solid 2px #ececec; font-family:georgia; font-size:140%; padding:10px;text-align:center;}
/*
ILLOZ
---------------------------*/
.contributor {display:flex;align-items:center;justify-content:center;width:60%;margin-bottom:10px;margin-right:auto;margin-left:auto;}
.illoz-sample {width:40%;padding-bottom:40%;background-repeat:no-repeat;background-size:cover;background-position:center;}
.illoz-member {width:60%;padding-left:20px;padding-right:20px;}
.illoz-member a {color:var(--orange);}
.illoz-divide {border-top:dotted 3px var(--accent);}
.illoz-text {margin-left:auto; margin-right:auto; width:80%;}
.illoz-text h1 {display:table;margin-left:auto;margin-right:auto;padding-bottom:5px;padding-top:5px;border-bottom:solid 3px #FFF; border-top:solid 3px #FFF;}
a.illoz-latest {display:block;width:60%;padding-bottom:60%;margin-left:auto;margin-right:auto;background-repeat:no-repeat;background-size:cover;background-position:center;border:solid 2px transparent;}
a.illoz-latest:hover{border:solid 2px var(--orange);}
.illoz-recent {padding:20px;color:#727272;margin-top:20px;margin-bottom:20px;background:var(--lt-gray);border-radius:10px;border:solid 3px #FFF; box-shadow:3px 3px 10px #35631d;text-align:center;}
.geek-head {display:table;margin-left:auto;margin-right:auto; margin-top:20px; background:#FFF;padding:10px;border-top-right-radius:10px;border-top-left-radius:10px;}
.geek-head h2{color:var(--accent);}
.geek-body {width:80%;background:#FFF;padding:10px 20px;color:var(--accent);border-radius:10px;margin:auto;}
.geek-body a {color:var(--orange);}
.illoz-recent h2 {color:#000;}
.illoz-hood {background:#000;padding:20px;margin-left:auto;margin-right:auto;display:table;position:relative;width:80%;color:#FFF;}
.hood-dot{position:absolute;display:block;height:10px;width:10px;border-radius:5px;background:#CCC;}
.tp-lft{top:10px;left:10px;}
.tp-rt {top:10px;right:10px;}
.bt-lft {bottom:10px;left:10px;}
.bt-rt {bottom:10px;right:10px;}
.illoz-king {margin-top:20px;margin-bottom:20px;background:#FFF;padding-left:10px;padding-right:10px;padding-top:20px;padding-bottom:20px;margin-left:20px; margin-right:20px; border-radius:10px;color:#000;}
.illoz-king a {color:var(--orange);}
.king-list {display:flex; justify-content:center; align-items:center;flex-wrap:wrap;}
.king-mast {font-family:'Raleway';font-size:1.5em;text-align:center;padding-top:10px;padding-bottom:10px;border-top:solid 2px #dd4d21;border-bottom:solid 2px #dd4d21;margin-bottom:10px;}
.king-mast h1 {font-family:'Source Serif Pro';font-weight:600;color:#dd4d21;font-size:1.5em;}
a.king-winner {position:relative;margin:5px;background:#ececec;width:30%;display:block;color:#000;padding-bottom:10px;text-decoration:none;}
a.king-winner:hover .king-name{color:#dd4d21;text-decoration:none;}
.king-award {position:absolute;top:0;left:0;display:table;padding:5px;background:#dd4d21;font-family:'Source Serif Pro';color:#FFF;}
.king-pic {display:table;margin:auto;width:60%;padding-bottom:60%;background-repeat:no-repeat;background-position:center;background-size:cover;margin-top:10px;margin-bottom:10px;}
@media screen and (max-width: 699px) {
	.bug-topics, .bug-roller, .bug-welcome, .half {display:block;width:100%;height:auto;padding-left:10px;padding-right:10px;text-align:center}
	.art-sites{width:60%;display:table;margin:auto;}
	.rt-bkg{background-position:center;}
	.bug-pad{padding-left:10px;padding-right:10px;}
	.bug-phone, .bug-menu, .bug-circle, #intro-graphic,#biz-graphic,#graphics-graphic{display:none;}
	.bug-commerce, .bug-page{height:auto;}
	.bug-commerce {display:block; text-align:center; padding-left:10px;}
	.bug-menu-mobile{display:table;background:#FFF;padding:10px;border-radius:3px;margin-left:auto;margin-right:auto;}
	.bug-menu-mobile i {color:#000;font-size:200%;}
	#form, .bug-explain {margin-left:10px;margin-right:10px;font-size:100%;}
	.header {position:relative;}
	a.bug-link, #bug-box {margin-bottom:20px;}
	.bug-arts {flex-direction:column;padding-top:20px;}
	.bug-illoz {flex-direction:column-reverse;justify-content:center;}
	.bug-tell{align-items:center;}
	.bug-more{display:block;margin-left:10px;margin-right:10px;width:100%;font-size:120%;}
	.bug-landing{padding-left:0}
	.copy {color:black;font-weight:700;line-height:1.5em;font-size:1.2em;}
	a.ylw {color:#FFF;}
	#bug-intro{background-image:url('/images/bug-home.svg');}
	#bug-biz-page {background-image:url('/images/bug-biz.svg');}
	#bug-graphics-page {background-image:url('/images/bug-graphics.svg');}
	#bug-intro, #bug-biz-page, #bug-graphics-page {background-position:center;background-repeat:no-repeat;background-size:auto 100%;}
	a.king-winner {width:45%;}
	.king-mast h1 {margin-top:10px;margin-bottom:10px;line-height:1em;}
}