/*
	99Lime.com HTML KickStart by Joshua Gatcke
	style.css
	
*/

/*---------------------------------
	IMPORTS
-----------------------------------*/

/*---------------------------------
	OVERRIDES
-----------------------------------*/
#middle * { -webkit-animation: fadein 1s; -moz-animation: fadein 1s; -ms-animation: fadein 1s; -o-animation: fadein 1s; animation: fadein 1s; }
 @keyframes fadein { from {
opacity: .0;
}
to { opacity: 1; }
}
@-moz-keyframes fadein { from {
opacity: 0;
}
to { opacity: 1; }
}
@-webkit-keyframes fadein { from {
opacity: .0;
}
to { opacity: 1; }
}
@-ms-keyframes fadein { from {
opacity: 0;
}
to { opacity: 1; }
}
@-o-keyframes fadein { from {
opacity: 0;
}
to { opacity: 1; }
}
body { margin: 0; padding: 0 0 0 0; color: #000; background: #000; font: normal 16px/140% 'Open Sans',  arial, helvetica, sans-serif; text-shadow: 0px 0px 1px transparent; /* google font pixelation fix */ }

/*div {border: 1px solid #efefef; }* { box-size: border-box;}*/
/*---------------------------------
	HEADINGS
-----------------------------------*/
h1, h2, h3, h4, h5, h6 { font-family: "Oswald", arial, verdana, sans-serif; line-height: 140%; }
h1 { font-size: 3.0em; margin: 10px 0 10px 0; color: #C00; }
h2 { font-size: 2.25em; margin: 10px 0 10px 0; }
h3 { font-size: 2.0em; margin: 10px 0 10px 0; line-height: 130%; }
h4 { font-size: 1.5em; margin: 10px 0 10px 0; }
h5 { font-size: 1.25em; margin: 10px 0 10px 0; }
h6 { font-size: 1.1em; margin: 10px 0 5px 0; }
thead th, tbody th { font-family: "Open Sans", arial, verdana, sans-serif; }
button, a.btn, input[type="submit"], input[type="reset"], input[type="button"] { font-family: "Open Sans", arial, verdana, sans-serif; }
.menu { font-family: "Open Sans", arial, verdana, sans-serif; }
blockquote { font-family: "Open Sans", arial, verdana, sans-serif; }
/*---------------------------------
	LAYOUT
-----------------------------------*/
#specialAlert { padding: 1em 2em; text-align: center; width: 100%; left: 0; top 0; color: #fff; background:tomato; position: absolute; }
header { position: fixed; width: 100%; z-index: 9999; background: #333; padding: 0 .0 0 5px; top:0; }
.head_nav, #logo { display: inline-block; }
.head_nav { float: right; position: relative; right: 21px;  }
#logo { margin: 5px 18px; }
#cartTab { background: #333; color: #fff; vertical-align: top; height: 54px; padding: 12px; position: relative; display: inline-block; margin: 4px 14px; }
#cartTab a { color: inherit; text-decoration: none; }
#rightcolumn { padding-top:220px; }
#link-top { display: none; }
#middle { background: #fff; color: #222; float: left; width: 100%; padding: 55px 0 0px; }
footer { min-height: 100px; color: #fff; font-size: smaller; width: 100%; float: left; padding: 18px 0 }
footer h2 { color: #fff; margin: 0; line-height: 1em; }
/* NAV BAR*/
.navbar { position: fixed; top: 0; left: 0; width: 100%; background: #000; color: #fff; z-index: 1000; }
.navbar #logo { position: absolute; top: 0; right: 0; padding: 0.5em 1em; font-size: 1.7em; color: #efefef; text-decoration: none; }
.navbar span { color: #86dc00; }
.navbar ul { display: inline-block; margin: 0; padding: 0; }
.navbar li { margin: 0; padding: 0; list-style-type: 0; display: inline-block; }
.navbar li a { display: inline-block; color: #efefef; padding: 1em 1.3em; text-decoration: none; text-transform: uppercase; line-height: 100%; font-size: 1.2em; }
.menu li a.act { background: #EF4036!important; }
.callout { background: #4598ef;/*#86dc00;*/ padding: 1em 2em; color: #fff;   text-align: center;  display: block; }
.callout + div.grid { margin-top: 50px; }
a.callout { cursor: pointer; }
.callout i.icon-4x { font-size: 6em; }
.callout h4 { margin-bottom: 30px; }
.callout-top { margin: 50px 0 0 0; }
.callout p { margin-bottom: 0; }
.callout .button { margin-top: 10px; }
.callout.green { background: #19ad0b;/*#86dc00;*/ }
#mc_embed_signup { padding: 30px 0; }
#ui-preview { border: 5px solid #ddd; margin: 30px 0; display: block; }
.halo { box-shadow: 0 0 8px rgba(0,0,0,.9) }
.barBlack { padding: 6px 0; background: #333; color: #fff; }
.tooltip { color: #36C; cursor: pointer; font-size: 80%; }

.padH { padding-left: 5%; padding-right: 5%; box-sizing:content-box;}
.padH2 { padding-left: 3%; padding-right: 10%; box-sizing:content-box;}
.ml-60 {margin-left: 60px; }
.justify {text-align:justify;}
a.sendit { color:#fff; cursor: pointer; }
a.sendit:hover { color:#9bcdff;}

.redText, #cartTab a i { color: #EF4036!important; }
.greenText { color: green; }
.box { padding: 16px; border-radius: 12px; border: 4px solid #999; box-shadow: 0 0 8px #999; }
tbody th { background: #444!important; color: #fff; white-space: nowrap; }
.clickme { position: fixed; z-index: 20; bottom: 260px; right: 10px; display: none; opacity: .5; }
.clickme:hover { opacity: 1 }
#arrowup { width: 32px; }
#progress { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 99999; background: url('/assets/dim.png'); display: none; ; text-align: left; }
#pbar { position: fixed; width: 300px; z-index: 200; border: 5px solid #222; text-align: center; padding-bottom: 40px; padding-top: 40px; background: #FFF; transform: translate(-50%, -50%); /* Yep! */ top: 50%; left: 50%; margin-top: -0px; margin-top: -110px; display:;
box-shadow: 0 0 18px rgba(0,0,0,.8); border-radius: 12px; }
#pbar h2 { font-size: 1.4em; color: #333; text-align: center; }
#cropbox { display: block; max-height: 400px; margin: 0 auto; box-shadow: 0 0 18px #000 }
#uploadPreview { margin: 12px 0; }
#uploadPreview img { max-width: 200px; height: auto; border: 2px solid #000; box-shadow: 0 0 12px #000; vertical-align: top; float: left; margin: 0 12px; }
#upload { background-color: #888; background-image: -webkit-linear-gradient(top, #888, #313437); background-image: -moz-linear-gradient(top, #888, #313437); background-image: linear-gradient(top, #888, #313437); width: 60%; padding: 30px 30px 60px 30px; border-radius: 3px; margin: 20px auto 20px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); color: #fff; }
#upload input[type=file] { color: #333 }
#drop { background-color: #2E3134; padding: 40px 50px; margin-bottom: 30px; border: 20px solid rgba(0, 0, 0, 0); border-radius: 3px; text-align: center; text-transform: uppercase; font-size: 16px; font-weight: bold; color: #7f858a; }
/*#drop a { background-color: #007a96; padding: 12px 26px; color: #fff; font-size: 14px; border-radius: 2px; cursor: pointer; display: inline-block; margin-top: 12px; line-height: 1; }
#drop a:hover { background-color: #0986a3; }
#drop input { display: none; }*/

#upload h4 { font-size: 1.8em; margin: 10px 0 20px 0; text-shadow: 2px 2px 4px black; }
#upload ul { list-style: none; margin: 0 -30px; border-top: 1px solid #2b2e31; border-bottom: 1px solid #3d4043; }
#upload ul li { background-color: #333639; background-image: -webkit-linear-gradient(top, #333639, #303335); background-image: -moz-linear-gradient(top, #333639, #303335); background-image: linear-gradient(top, #333639, #303335); border-top: 1px solid #3d4043; border-bottom: 1px solid #2b2e31; padding: 15px; height: 52px; position: relative; }
/*#upload ul li input { display: none; }*/
#upload ul li p { width: 144px; overflow: hidden; white-space: nowrap; color: #EEE; font-size: 16px; font-weight: bold; position: absolute; top: 20px; left: 100px; }
#upload ul li i { font-weight: normal; font-style: normal; color: #7f7f7f; display: block; }
#upload ul li canvas { top: 15px; left: 32px; position: absolute; }
#upload ul li span { width: 15px; height: 12px; background: url('/assets/icons/icons.png') no-repeat; position: absolute; top: 34px; right: 33px; cursor: pointer; }
#upload ul li.working span { height: 16px; background-position: 0 -12px; }
#upload ul li.error p { color: red; }
.orderItemGroup { }

input[type="file"]::-webkit-file-upload-button { margin-right: 20px;}
input[type="file"] {text-indent: 0em;}

.orderItem { line-height: 60px; }
.orderItem.column { line-height:1.2em; }
#priceWrap { padding: 12px; border-radius: 12px; border: 4px solid #36F; }
#totalBlock { padding: 0 12px 0 0 }
.scrollTo, .clickme { transition: all 0.5s ease; }
/* HOME */
#intro { position: relative; background:  #000 url(/assets/images/home/JohnnyLang-FMonkey-10-2018.jpg) no-repeat center  15vh  fixed; /* background: url(/assets/images/home/photo-1438201743149-3cc16cd4cddd.jpg) no-repeat center center fixed;*/ -webkit-background-size: contain; -moz-background-size: contain; -o-background-size: ccontainover; background-size: contain; ; padding-top: 20vh; min-height: calc( 90vh - 70px);  }
#intro h1 { font-size: 2.6em; color: #fff; text-shadow: 3px 3px 3px #333; }
#intro .photoCredit { position: absolute; width: 100%; bottom: 0; padding: 8px; text-align: center; background: #000; color: #fff; font-size: smaller; }
#page2 { background: #fff url(/assets/images/bgs/vp-grungy-concrete-3.JPG) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; ; border-top: 48px solid #EF4036; }
#page2b { border-top: 48px solid #000; /*background: #fff url(/assets/lens.biggrey.png) no-repeat right bottom fixed;*/ }
#page3 { border-top: 48px solid #000; background: #333; padding: 0 0 48px 0; text-shadow: 3px 3px 3px #333; }
#page3 *, #page4 * { color: #fff; }
#page4 { background: #000 url(/assets/lens.biggrey.png) no-repeat right bottom fixed; }
#page4 .caption span, #page4 .caption span a { color: #333 }
.scrollTo { cursor: pointer; opacity: .5; }
.scrollTo:hover { opacity: 1; }
.larger { font-size: x-large; line-height: 140%; }
.bigText { font-size: 1.3em; line-height: 140%;}
ul.larger { margin-left: 15%; font-size: large; line-height: 140%; }
.whiteText { color: #fff; text-shadow: 0 0 12px rgba(0,0,0,1); }
#scNav { position: fixed; right: -12px; top: 40%; background: rgba(0,0,0,.4); border-radius: 12px; padding: 12px 32px 12px 12px; ; z-index: 9999; }
#scNav a { background: #EF4036; text-indent: -9999px; display: block; width: 14px; height: 14px; margin: 16px 5px; outline: 0; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; opacity: .5; }
#scNav a:hover { opacity: 1; }
.opacity5 { opacity: .5; }
#scNav a.opacity10 { opacity: 1; }
.cover { position: relative; width: 100%; left: 0; top: 2px; XXXmin-height: 800px; padding: 24px 0; font-size: larger; float: left; }
small{display:inline-block; line-height: 1.1em; }
.cover img { max-width: 100%; height: auto; }
.closeNotice {position:relative; top: 4em;padding: 1em 4em; background: #4267b2; color: #fff; font-size: 1.1em; font-weight: bold; width: 100%; z-index: 999;   }
.closeNotice.red { background: #900 }
.fullInputs input[type="text"], .fullInputs input[type="email"] { width: 90%; }
#twitterIcon { padding: 0 0.5em; vertical-align: middle; }
a i#twitterIcon { color: #777; }
a:hover i#twitterIcon { color: #4D99E0; }
#upl { width: 80%; }
.introText { padding: 1.5em 5% ; font-size: 1.3em; }
::-webkit-input-placeholder {
color:#aaa;
font-size: 14px;
font-style:italic;
}
:-moz-placeholder {
color:#ccc;
}
::-moz-placeholder {
color:#ccc;
}
:-ms-input-placeholder {
color:#ccc;
}
input::-moz-focus-inner {
border:0;
}
input::-moz-focus-inner {
border:0;
}
 @media all and (min-width: 1025px) and (max-width: 1280px) {
header { padding: 0 0%; }
.menu li a { padding: 28px 6px; }
}
 @media all and (min-width: 768px) and (max-width: 1024px) {
header { padding: 0 1%; }
.menu li a { padding: 28px 8px; }
#intro h1 { font-size: 2.0em; }
#intro .larger { font-size: 1.0em; }
}
 @media all and (min-width: 480px) and (max-width: 768px) {
}
 @media all and (max-width: 600px) {
#upload, #cartTab, #upload_submit { width: 100%!important }
.grid { padding: 0 .00025em!important }
#middle { margin-top: 0em; }
header { position: relative; }
.head_nav { float: none; }
h1, h2, h3, h4, h5, h6, .head_nav, .grid .menu li.menu-toggle, .head_nav .menu li.menu-toggle, .head_nav .menu li.menu-toggle a, .grid .menu.vertical li.menu-toggle, .grid .menu.vertical.right li.menu-toggle, #logo, .orderItemGroup, .barBlack, footer, #cartTab { text-align: center; }
.grid .menu li.menu-toggle, .head_nav .menu li.menu-toggle, .head_nav .menu li.menu-toggle a, .grid .menu.vertical li.menu-toggle, .grid .menu.vertical.right li.menu-toggle { height: auto; }
#upl { width: 100%; margin-bottom: 1em; }
.head_nav { position: relative;    left: 0; }
.orderItemGroup { text-align: center; }
.orderItem, .barBlack .col_2, .barBlack .col_1 { line-height: normal; display: inline!important; padding: 0 2px; }
.orderItem button { display: block!important; text-align: center; margin: 1em auto; }
.orderItem img { display: block!important; text-align: center; margin: 1em auto; }
#cartTab { height: auto; }
footer h2 { line-height: normal; }
.ml-60 {margin-left: 10px; }
form .right {text-align: left;}
ol, ul {
    padding: 0;
    margin: 0 10px 20px 30px;
}
#rightcolumn {
    padding-top: 0px
;
}
#content p, #content h2,#content h3,#content h4 {padding-left: .5em; padding-right: .5em;}
}
@media print {
.orderItemGroup {
    page-break-inside: avoid;
  }
}