/* Jimp Studio, LLC - Aaron Klabunde - 2014.09.22
     Project: Jimp Studio Redesign
     Description: Primary Styles
*/

/*@font-face {
 font-family: freestyle;
 src: url("../fonts/FreestyleScript.eot") /* EOT file for IE *
}
@font-face {
 font-family: freestyle;
 src: url("../fonts/FreestyleScript.ttf") /* TTF file for CSS3 browsers *
}*/

@import url('https://fonts.googleapis.com/css?family=Muli');

body {
     /*background-color: #385d7a;
     background: 
          linear-gradient( rgba(192,192,192,0) 40px, #385d7a 220px ),
          repeating-linear-gradient(
            to right,
            #385d7a,
            #385d7a 40px,
            #385d8a 40px,
            #385d8a 80px ); */
     background-color: #bbb;
     /*background: 
          linear-gradient( rgba(192,192,192,0) 40px, #aaa 220px ), 
          repeating-linear-gradient( to right, #aaa, #aaa 40px, #a2a2a2 40px, #a2a2a2 80px );
     /*padding: 2% 3%;*/
     text-align: center;
     font-size: 18px;
     color: #606060;
     /*font-family: 'Times New Roman', serif;
     font-family: Arial, Helvetica, Verdana, sans-serif;*/
     font-family: 'Muli', sans-serif;
     line-height: 145%;
}
.view-margin {
     /*background-color: #bbb;*/
     position: relative;
     z-index: 999;
     padding: 0 2%;
}

a {
  cursor: pointer;
  text-decoration: underline;
  color: #338;
}
a:hover {
  text-decoration: underline;
  color: #222;
}

header {
     position: relative;
     z-index: 10;
     text-align: center;
     padding: 1em;
}
header h1, 
header h1 a,
header h1 a:link,
header h1 a:active,
header h1 a:visited { 
     color: #fff;
     font-weight: bold;
}
span.autogen-logo {
     margin: 1em 2px 0.6em 2px;
     display: inline-block;
     border: 0.18em solid #fff;
     border-top: 0;
     line-height: 50%;
}
span.autogen-logo b {
     font-weight: normal;
     display: inline-block;
     color: #fff;
     font-size: 2.2em;
     height: 1em;
     letter-spacing: -0.28em;
     padding: 0.1em 0.3em 0.2em 0.02em;
}
/*header img {
     width: 100%;
}
header a.logo-link {
     position: absolute;
     left: 80px;
     top: 54px;
     width: 360px;
     height: 100px;
     text-decoration: none;
}
header ul {
     display: inline-block;
     vertical-align: middle;
     line-height: 2.5em;
     text-align: center;
     font-size: 1em;
}
ul.menu {
     display: block;
     margin: 0 0 4px 0 ;
     text-align: center;
     line-height: .8em;
     font-size: 1em;
}
header ul li,
ul.menu li {
     display: inline-block;
     text-align: center;
}
header ul li a, header ul li a:link, header ul li a:visited {
	margin: 8px 4px;
	padding: 5px 12px;
	background-color: #fff;
	border: 1px solid #c0c0c0;
	border-bottom: 0;
	border-left: 0;
	border-radius: 0 0.4em 0 0;
	text-decoration: none;
	transition: background-color 1s, border 1s, color 0.5s;
}
header ul li a:hover, header ul li.active a {
	border: 1px solid #822222;
	border-bottom: 0;
	border-left: 0;
	/*background-color: #f7f7f7; /*
	text-decoration: none;
}*/
div.top-menu {
     padding: 1em 0;
     text-align: center;
     line-height: 240%;
}
div.top-menu li {
     display: inline-block;
     list-style-type: none;
}
div.top-menu a {
     font-size: 1.2em;
     margin: 1.4em 2px;
     padding: 0.3em 0.5em;
     font-weight: 700;
     display: inline;
     list-style-type: none;
     border: 1px solid #fff;
     color: #fff;
     /*box-shadow: 0 0 15px #227;
     text-shadow: 0 0 6px #227;*/
     text-decoration: none;
     font-weight: normal;
}
div.top-menu a:hover {
     background-color: rgba(255, 255, 255, 0.5);
}
.static-menu a {
     padding: 0.5em;
     border-left: 1px solid #385d7a;
}
.static-menu a:first-of-type {
     border-left: 0 ;
}
/*div.top-menu a:first-of-type {
     border-left: 0;
} */
div.banner {
     position: fixed;
     top: 0;
     z-index: 4;
     width: 100%;
     margin: 0;
     padding: 0;
     text-align: center;
}
header h1 {
     font-size: 2.4em;
     line-height: 110%;
     padding: 0.2em 0.4em;
}
/*div.banner img {
     min-width: 1920px;
     height: 520px;
}*/

/*
ul.menu li {
     margin: 0 16px;
}
ul.menu  li a, ul.menu li a:link, ul.menu li a:visited {
	/*margin: 8px 4px;
	padding: 5px 20px; /
	border: 0;
	text-decoration: none;
	color: #000;
	opacity: 0.25;
	transition: opacity .5s, color 0.5s;
}
ul.menu li a:hover {
	border: 0;
	text-decoration: none;
	opacity: 0.5;
} */
nav {
     display: block;
     position: relative;
     top: -140px;
     right: 4%;
     text-align: right;
}
#container {
     position: relative;
     z-index: 9;
     display: inline-block;
     vertical-align: top;
     text-align: left;
     width: 68%;
     min-width: 360px;
     margin-bottom: 2em;
}
.content {
	margin-bottom: 4%;
     background-color: #fff;
     margin-top: 0;
     padding: 3% 4% 2% 4%;
}
.content aside img {
     max-width: 50%;
}
.content aside img[style="float: left;"] {
     margin: 0.5em 2em 2em 0;
}
.content aside img[style="float: right;"] {
     margin: 0.5em 0 2em 2em;
}
#sl-one, #sl-two, #sl-three {
     opacity: 1.0;
     transition: 2s;
}
#sl-one:target, #sl-two:target, #sl-three:target {
     opacity: 1.0;
}
p {
	margin-bottom: 1em;
}
blockquote {
     font-size: 0.9em;
     line-height: 1.15em;
     color: #822222;
     text-align: center;
     font-style: italic;
}
small {
     font-size: .7em;
}
.tech-icons img {
     margin: 0 14px;
	height: 60px;
	/*transition: height 0.6s, margin 0.6s;*/
}
/*.tech-icons img:hover, .tech-icons img:active {
     margin: -10px 4px;
     margin: 0 14px;
	height: 70px;
} */
img.left {
	margin: 10px 10px 10px 0px;
	border: 3px solid #c0c0c0;
	float: left;
}
.left { text-align: left; }
.right { text-align: right; }
.float-left { float: left; }
.float-right { float: right; }
.clear { clear: both; }
.center { text-align: center; }
.right { text-align: right; }
.left { text-align: left; }
.small, small { font-size: 0.8em; }
.top, .va-top { vertical-align: top; }
.inline-block { display: inline-block; }
.pad-right { padding-right: 2em; }
.green { color: #090; }
.red { color: #812222; }
.gray { color: #909090; }
.w80 { width: 80px; }
b, .bold { font-weight: bold; }
.unbold { font-weight: normal; }
.w50 { width: 50%; }
.w50per { width: 50%; min-width: 300px; }

/* Footer, Link, and List styles */
footer, #footer {
     position: relative;
     z-index: 4;
     margin: 40px;
     color: #fff;
     font-size: .8em;
     text-align: center;
     clear: both;
}
footer a {
     color: #fff;
     font-weight: bold;
}
button.close {
     border: 0;
     background: transparent none;
     font-family: 'freestyle', cursive;
     font-size: 1.5em;
     text-decoration: none;
     cursor: pointer;
     color: #812222;
}
button.close:hover {
  text-decoration: none;
  color: #222;
}
ul {
     list-style-type: square;
     margin: 1em 1.5em;
     line-height: 1.25em;
}
ul.disc { list-style-type: disc; }
ul.circle { list-style-type: circle; }
ul.square { list-style-type: square; }
ul.none { list-style-type: none; }
strong, b { font-weight: bold; }
em { font-style: italic; }

ul li {
     margin-left: 2em;
}

#container-boxes {
     margin-left: 3%;
	position: relative;
	top: 0;
    /* z-index: 9;*/
	display: inline-block;
	text-align: center;
	vertical-align: top;
	width: 28%;
	min-width: 300px;
}
.column {
     margin: 2% 0 2% 1%;
	position: relative;
	top: 0;
	display: inline-block;
	text-align: left;
	vertical-align: top;
	width: 23.6%;
	min-width: 80px;
	background-color: #fff;
	font-size: 0.9em;
}
.column:first-of-type {
     margin-left: 0;
}
.column p, .column blockquote, .column ul {
     padding: 3%;
}
.column img.colorize {
     width: 92%;
     margin: 34px  4%;
     opacity: 1.0;
     transition: opacity 0.75s;
}
.column:hover img.colorize {
     opacity: 0.0;
}
.box {
	margin-bottom: 4%;
	font-size: 0.9em; 
	position: relative;
	top: 0px;
	vertical-align: top;
}
.white {
     padding: 1em 0;
	background-color: #fff;
	text-align: left;
}
.buvital-content {
     display: inline-block;
     margin: 4% 10%;
     padding: 2%;
     text-align: left;
}
.bg-gray {
     background-color: #c0c0c0;
     min-height: 2em;
}
.padsides {
	padding: 0px 1em .25em 1em;
}
.date {
	background-color: #c0c0c0;
	font-size: 1.1em;
	font-weight: bold;
	color: #fff;
	padding: 10px 0px 20px 10px;
	text-align: center;
}
.day {
	font-size: 2.4em;
	margin-right: -12px;
	position: relative;
	top: 10px;
	left: 0px;
}
.year {
     display: inline-block;
	font-size: .9em;
             filter:  progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083);  /* IE6,IE7 */
         -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083)"; /* IE8 */
     -moz-transform: rotate(-90.0deg);  /* FF3.5+ */
      -ms-transform: rotate(-90.0deg);  /* IE9+ */
       -o-transform: rotate(-90.0deg);  /* Opera 10.5 */
  -webkit-transform: rotate(-90.0deg);  /* Safari 3.1+, Chrome */
          transform: rotate(-90.0deg);  /* Standard */
}
.strikeout {
     text-decoration: line-through;
}
h1 {
  font-size: 2.4em;
  font-family: 'Muli';
}
h1, h1 a, h1 a:link, h1 a:active, h1 a:visited {
  margin: 0px;
  padding: 2px 0px 6px 0px;
  text-align: center;
  font-weight: normal;
  color: #888;
  line-height: 120%;
  text-decoration: none;
}
h1 a:hover {
	color: #444;
	text-decoration: none;
}
h2 {
	padding: 4px 0px;
     font-size: 1.5em;
}
h2, h2 a, h2 a:link, h2 a:active, h2 a:visited {
  margin: 1em 0;
  padding: 0px 0px;
  text-align: center;
  font-weight: bold;
  color: #444;
  line-height: 120%;
  text-decoration: none;
}
h2 a:hover {
	color: #444;
	text-decoration: none;
}

.next {
     font-family: 'Muli';
     font-size: 2em;
     color: #822222;
}
h2.quote {
     font-family: 'Muli';
     font-size: 3em;
     color: #444;
     line-height: 1em;
     font-weight: normal;
     margin-bottom: 60px;
}
h3, h3 a, h3 a:link, h3 a:active, h3 a:visited {
	font-weight: bold;
 	text-align: left;
	color: #444;
	padding: 0px;
     text-decoration: none;
	transition: text-decoration 0.5s, color 0.5s;
}
h3 {
	font-size: 1.3em;
	margin: 1em 0;
}
h3 a:hover {
	color: #999;
	text-decoration: underline;
}
.box h3 /*, .box h3 a, .box h3 a:link, .box h3 a:active, .box h3 a:visited */ {
 	text-align: center;
	color: #c0c0c0;
	padding: 0px;
}
/*.box h3 a:hover {
	color: #444;
	text-decoration: underline;
}*/
h4 {
     padding: 1em 0 1em 0;
     font-size: 1.1em;
     color: #606060;
     font-weight: bold;
}
h5 {
     padding: 1em 0 1em 0;
     font-size: 0.9em;
     color: #909090;
     font-weight: bold;
}
p.define {
     font-size: .8em;
}
.script {
     font-family: 'Muli';
     color: #822222;
}
.buvital {
     display: none;
     background-color: rgba(0,0,0,0.0);
     transition: background-color 1s;
}
.buvital:target {
     display: block;
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-color: rgba(0,0,0,0.3);
     transition: background-color 1s;
}

label { 
     display: inline-block;
     padding: 1em 0.2em 0.5em 0.2em;
     cursor: pointer;
}
input, textarea, button, .button, select, .StripeElement {
     margin: 0;
     padding: 0.3em 0.8em;
     width: 280px;
     border: 1px solid #ddd;
     border-radius: 2px;
     background-color: #f7f7f7;
     font-size: 1em;
     font-family: 'Muli';
} 
input[type='text'], select {
     display: block;
}
input[type='checkbox'], 
input[type='radio'] {
     width: 28px;
     padding: 1em 0.2em 0.5em 0.2em;
}
.StripeElement {
	height: 20px;
	width: 300px;
	padding: 0.6em 0.2em 0.2em 0.2em;
}
#payment-element.StripeElement {
     width: auto;
     padding: 1em;
     height: auto;
     margin: 1em 0; 
}
input:focus, textarea:focus, input[type='submit']:hover, button:hover, .button:hover {
     border: 1px solid #338;
     background-color: #f7f7f7;
}
textarea {
     width: 360px;
     max-width: 94%;
     min-height: 120px;
}
input[type='submit'], button, .button {
     font-weight: bold;
     font-family: 'Muli';
	color: #338;
}
.button, a.button {
     text-align: center;
     text-decoration: none;
	color: #606060;
}
.button:hover, a.button:hover {
     text-decoration: none;
}
.hide {
     overflow: hidden;
     max-height: 0;
     transition: max-height 0.6s;
}
input[type='radio']:checked + div.hide {
     max-height: 800px;
     transition: max-height 0.6s;
}

/* Payment Method Toggle */
#toggle-stripe, #toggle-check {
     overflow: hidden;
     max-height: 0;
     transition: max-height 0.6s;
}
input#pay-stripe:checked ~ #toggle-stripe,
input#pay-check:checked ~ #toggle-check {
     max-height: 800px;
     transition: max-height 0.6s;
}

.w200px {
     width: 200px;
}
.w30per {
     width: 30%;
}
.w40per {
     width: 40%;
}
.w100per {
     width: 100%;
}
.w-min50px {
     min-height: 50px;
}

.w48px {
     width: 48px;
}
.w62px {
     width: 62px;
}
input.w48px, input.w62px {
     padding: 0.3em 0.3em;
     text-align: center;
}

/* ------------------------------------- news post ------------------------------------- */

.news {
  padding: 0;
  margin: 2.4em 0;
}
.box .news {
  margin: 2.4em 0;
  clear: both;
}
.news h3, .news h4 {
  margin: 1em 0 0 0;
  padding: 0.2em 0;
  text-align: left;
}
/*.box .news h3 a, .box .news h3 a:link, .box .news h3 a:active, .box .news h3 a:visited*/ {
  margin: 0;
  font-size: .9em;
  text-align: left;
  color: #822222;
}
/*.box .news h3 a {
  text-decoration: underline;
}
.box .news h3 a:hover {
  text-decoration: underline;
  color: #444;
}*/

.news p {
  margin: 0.5em 0 0.5em 0;
}
.box .news p {
  margin: 0.5em 0 0.5em 0;
}

p img {
     margin: 0.5em;
}

.news img {
  max-width: 100%;
  margin: 0 1em 1em 0;
}
.box .news img {
  max-width: 100%;
  margin: 0 0.5em 0.5em 0;
}

.news_title a {
  text-decoration: none;
}

.news_date {
  color: #444;
  font-size: .8em;
  font-weight: normal;
	margin: 0;
	padding: 0.2em 0;
}
.paper .news_date {
	margin: -4px 0 -3px 14px;
	padding: 0;
}
.news_content {
  margin-bottom: 4px;
}
.news_content p {
	clear: both;
}
.left-content .news_content {
  margin-bottom: 0;
}
.news_tags {
  margin-bottom: 6px;
  padding: 2px 5px;
  border: 1px solid #ccc;
  background-color: #f9f9f9;
  font-size: .7em;
  clear: both;
}
.box .news_tags {
	display: none;
}
.news_back {
  margin-top: 20px;
  font-size: 11px;
}

.news_back a {
  text-decoration: none;
}

.news_back a:hover {
  text-decoration: underline;
}

.news_nav .left {
  float:left;
  text-align:left;
}

.news_nav .right {
  float:right;
  text-align:right;
}



.section a, .section a {
  text-decoration: none;
}

.section a:hover, .section a:hover {
  text-decoration: underline;
}

.section a.large {
  font-size: 22px;
}
.alert {
     color: #900;
}
div.alert-form {
     border: 1px solid #900; 
     border-radius: 2px; 
     padding: 2px 8px 8px; 
     margin: 4px -8px;
}
div.alert-form b.alert-b {
     color: #900;
}
div.alert-pop {
     position: fixed;
     top: 0;
     left: 0;
     width: 84%;
     color: #900;
     font-size: 1.1em;
     padding: 1em 8%;
     background-color: #eee;
     box-shadow: 0 0 200px #444;
     z-index: 9999;
     cursor: pointer;
}

div.alert-hide {
     display: none;
}

/* -------------------------------- small screen overrides ----------------------------- */

img {
     max-width: 100%;
}

@media screen and (max-width: 1840px) {
     nav {
          top: -60px;
     }
}
@media screen and (max-width: 1420px) {
     h2.quote {
          font-size: 2.4em;
     }
}
@media screen and (max-width: 1320px) {
     nav {
          top: 0;
          left: 0;
          text-align: center;
     }
}
@media screen and (max-width: 1200px) {
     #container {
     	width: 94%;
     }
     #container-boxes {
          margin-left: 0;
     	width: 94%;
	     min-width: 560px;
     }
}
@media screen and (max-width: 980px) {
     #container {
     	width: 94%;
     }
     h2.quote {
          font-size: 1.8em;
     }
}    
@media screen and (max-width: 860px) {
     .column {
          margin: 0;
     	display: block;
     	width: 100%;
     	min-width: 300px;
     	font-size: 1.1em;
     	border-top: 30px solid #c0c0c0;
     }
     .bg-genfeeds, .bg-precedent, .bg-habitat, .bg-upscale {
          background-size: 42%;
          background-position: center 12px;
          background-repeat: no-repeat;
          
     }
     .column img.colorize {
          width: 42%;
          margin: 12px 29% 4% 29%;
     }
     #container-boxes {
	     min-width: 340px;
     }
}   
@media screen and (max-width: 600px) { 
     label {
          /*display: block;*/
          text-align: left;
          padding: 0.5em 0.2em 0.1em 0.2em;
     }
     input, textarea {
          width: 94%;
          padding: 0.3em 3%;
     }
     input[type='submit'] {
          width: 100%;
     }
     .w50 { width: 100%; }
}