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

@font-face {
 font-family: twcen;
 src: url("../fonts/TwCenMT.ttf") /* TTF file for CSS3 browsers */
}
@font-face {
 font-family: twcen;
 font-weight: bold;
 src: url("../fonts/TwCenMTBold.ttf") /* TTF file for CSS3 browsers */
}
@font-face {
 font-family: twcen;
 font-style: italic;
 src: url("../fonts/TwCenMTItalic.ttf") /* TTF file for CSS3 browsers */
}
@font-face {
 font-family: twcen;
 font-weight: bold;
 font-style: italic;
 src: url("../fonts/TwCenMTBoldItalic.ttf") /* TTF file for CSS3 browsers */
}
@font-face {
 font-family: freestyle;
 src: url("../fonts/FreestyleScript.ttf") /* TTF file for CSS3 browsers */
}

body {
     background-color: #c0c0c0;
     background-image: linear-gradient(170deg, #c0c0c0 0 200px, #fbf9ee, #eee 700px);
     background-attachment: fixed;
     padding: 4vw 4vw 0 4vw;
     text-align: center;
     font-size: 20px;
     color: #828282;
     font-family: twcen, Arial, Helvetica, Verdana, sans-serif;
     line-height: 145%;
}
header {
     text-align: left;
}
header img {
     max-width: 50%;
     vertical-align: middle;
}
/*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;
}
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 {
     background-color: #fff;
     display: inline-block;
     vertical-align: top;
     text-align: left;
     width: 58%;
     min-width: 360px;
     margin-bottom: 2em;
     box-shadow: 20px 20px 20px rgba(0,0,0, 0.2);
     border-radius: 2px;
}
.invoice-viewer .container {
     display: block;
     width: 96%;
     max-width: 1200px;
     min-width: 350px;
     margin-bottom: 2em;
}
.content {
     margin-top: -44px;
     padding: 0 3vw 2% 3vw;
}

img {
     max-width: 100%;
}
.news-img-auto img,
.news-img-sm img {
     max-width: 50%;
}
.news-img-auto img[style="float: left;"],
.news-img-sm img[style="float: left;"] {
     padding: 4px 1em 1em 0;
}
.news-img-auto img[style="float: right;"],
.news-img-sm img[style="float: right;"] {
     padding: 4px 0 1em 1em;
}

#sl-one, #sl-two, #sl-three {
     opacity: 1.0;
     transition: 2s;
}
#sl-one h2, #sl-two h2, #sl-three h2 {
     clear: none;
}
#sl-one:target, #sl-two:target, #sl-three:target {
     opacity: 1.0;
}
p {
	padding-bottom: 1em;
}
blockquote {
     font-size: 0.9em;
     line-height: 1.15em;
     color: #822222;
     text-align: center;
     font-style: italic;
}
small {
     font-size: .7em;
}
.red {
     color: #812222;
}
.green {
     color: #228122;
}
.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;
}
.float-left {
     float: left;
}
.float-right {
     float: right;
}
.center {
     text-align: center;
}
.top {
     vertical-align: top;
}
.right, .right-align {
     text-align: right;
}
.left, .left-align {
     text-align: left;
}
.small, small {
     font-size: 0.8em;
}
/* Footer, Link, and List styles */
footer, #footer {
     width: calc(100vw);
  margin: 0 -4vw 0 -4vw; /* full screen width */
  padding: 0 0 2em 0;
  color: #fff;
  text-align: center;
  clear: both;
  background-image: linear-gradient(rgba(255,0,0,0) 11.6vh, #700 11.6vh, #f77);
}
footer h4 {
     margin: 3em 2em;
}
footer h4, 
footer a, 
footer a:active,
footer a:visited {
     color: #fff;
}
footer a:hover {
     color: #ddd;
}
footer p {
     margin: 2em;
}
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;
}
a:link {
  cursor: pointer;
  text-decoration: none;
  color: #812222;
}
a:visited {
  text-decoration: none;
  color: #812222;
}
a:hover, button:hover, input[type='submit']:hover {
  cursor: pointer;
  text-decoration: none;
  color: #222;
}
a:active {
  text-decoration: none;
  color: #812222;
}
ul, 
ol {
     list-style-type: square;
     margin: 1em 0 1.5em 1.5em;
     line-height: 1.35em;
}
ol { list-style-type: decimal; }
ul.disc {list-style-type: disc}
ul.circle {list-style-type: circle}
ul.square {list-style-type: square}
ul.none {list-style-type: none}

ul li, 
ol li {
     margin: 0.2em 0 0.8em 2em;
}

strong, b {
     color: #111;
}
em {
     font-style: italic;
}

.container-boxes {
     margin-left: 4vw;
	position: relative;
	top: 0px;
	display: inline-block;
	text-align: center;
	vertical-align: top;
	width: 37%;
	min-width: 300px;
}
.column {
     margin: 2% 0 2% 1%;
	position: relative;
	top: 0px;
	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: 4vw;
     font-size: .9em; 
     line-height: 135%;
     position: relative;
     top: 0px;
     vertical-align: top;
     box-shadow: 20px 20px 20px rgba(0,0,0, 0.2);
     border-radius: 2px;
}
.white {
     padding: 1em 0;
	background-color: #fff;
	color: #828282;
	text-align: left;
}
.buvital-content {
     display: inline-block;
     margin: 4% 10%;
     padding: 2%;
     text-align: left;
}
.gray {
     color: #aaa;
}
.bg-gray {
     background-color: #c0c0c0;
     min-height: 2em;
}
.padsides {
     padding: 0.5em 3vw 0.5em 3vw;
}
.pad-right {
    padding-right: 2em;
}
.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: 2em;
	clear: both;
}
h1, h1 a, h1 a:link, h1 a:active, h1 a:visited {
  margin: 0px;
  padding: 2px 0px 6px 0px;
  text-align: center;
  font-weight: bold;
  color: #c0c0c0;
  line-height: 120%;
  text-decoration: none;
}
h1 a:hover {
	color: #444444;
	text-decoration: none;
}
h2 {
	padding: 4px 0px;
	clear: both;
}
h2, h2 a, h2 a:link, h2 a:active, h2 a:visited {
  margin: 0px;
  padding: 0px 0px;
  text-align: center;
  font-size: 1.5em;
  font-weight: bold;
  color: #822222;
  line-height: 120%;
  text-decoration: none;
}
h2 a:hover {
	color: #444444;
	text-decoration: none;
}
.next {
     font-family: 'freestyle', cursive;
     font-size: 2em;
     color: #822222;
}
h2.quote {
     font-family: 'freestyle', cursive;
     font-size: 3em;
     color: #822222;
     line-height: 1em;
     font-weight: normal;
     margin-bottom: 60px;
}
h3, h3 a, h3 a:link, h3 a:active, h3 a:visited {
	clear: both;
	font-size: 1.3em;
	/*font-weight: bold;*/
 	text-align: left;
	color: #822222;
	padding: 0.6em 0 0.2em 0;
     text-decoration: none;
	transition: text-decoration 0.5s, color 0.5s;
}
h3 a:hover {
	color: #444444;
	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;
}
.box h3 a:hover {
	color: #444444;
	text-decoration: underline;
}
h4, h5 {
	clear: both;
     padding: 1em 0 1em 0;
     font-size: 1em;
     color: #909090;
     font-weight: bold;
}
p.define {
     font-size: .8em;
}
.script {
     font-family: 'freestyle', cursive;
     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;
     width: 140px;
     text-align: right;
     padding: 0.5em 0.2em;
}
div#i_978 label, div#i_979 label {
     width: 280px;
}
div.security-check label {
     width: 380px;
     max-width: 80vw;
     text-align: left;
}
div.security-check + p input[type="submit"] {
     margin-left: 0;
}
#make-payment label {
     display: inline-block;
     width: auto;
     text-align: left;
     padding: 0.5em 0.2em;
}
input, textarea, button, .button, select, .StripeElement {
     margin: 0;
     padding: 0.3em 0.8em;
     width: 200px;
     border: 1px solid #ddd;
     border-radius: 2px;
     background-color: #f7f7f7;
     font-size: 1em;
     font-family: 'Times New Roman', serif;
}
div#i_978 input, div#i_979 input {
     width: 290px;
     font-size: 0.9em;
}
input:focus, textarea:focus {
     border: 1px solid #822222;
     background-color: #f7f7f7;
}
textarea {
     width: 340px;
     min-height: 120px;
}
input[type='submit'], button, .button, select, .StripeElement {
     font-weight: bold;
     font-family: twcen, Arial, Helvetica, Verdana, sans-serif;
	color: #822222;
	text-decoration: none;
}
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;
}
.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%;
}
.w50per {
     width: 50%;
     min-width: 300px;
}
.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;
}

.inline-block {
     display: inline-block;
}
.va-top {
     vertical-align: top;
}
/* ------------------------------------- news post ------------------------------------- */

.news {
  padding: 0;
  margin-bottom: 3em;
}
.box .news {
  margin-bottom: 12px;
}
.news h3, .news h4 {
  margin: 1em 0 0 0;
  padding: 0px;
  text-align: left;
}
.box .news h3 a, .box .news h3 a:link, .box .news h3 a:active, .box .news h3 a:visited {
  margin: 0px;
  font-size: .9em;
  text-align: left;
  color: #822222;
}
.box .news h3 a:hover {
  text-decoration: underline;
  color: #444;
}

.news p {
  margin: 0px 0px 1em 0px;
}
.box .news p {
  margin: 0px;
}

.news_title a {
  text-decoration: none;
}

.news_date {
  color: #999;
  font-size: .7em;
	margin: 0px;
	padding: 3px 0 0.5em 0;
}
.paper .news_date {
	margin: -4px 0px -3px 14px;
	padding: 0px;
}
.news_content {
  margin-bottom: 4px;
}
.news_content p {
	clear: both;
}
.left-content .news_content {
  margin-bottom: 0px;
}
.news_tags {
  clear: both;
  margin-bottom: 6px;
  padding: 2px 5px;
  border: 1px solid #ccc;
  background-color: #f9f9f9;
  font-size: .7em;
}
.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: none;
}

.section a.large {
  font-size: 22px;
}

div.flex-text {
     display: inline-block;
     vertical-align: top;
}

input[type="submit"] {
     margin-left: calc(140px + 0.7em);
}

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;
}

/* footer waves */
.waves {
  position: relative;
  width: 100%;
  height: 12vh;
  margin-bottom: -7px; /*Fix for safari gap*/
  min-height: 100px;
}
/* Animation */
.parallax > use {
  animation: move-forever 25s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite;
  animation-fill-mode: forwards;
}
.parallax > use:nth-child(1) {
  animation-delay: -2s;
  animation-duration: 21s;
}
.parallax > use:nth-child(2) {
  animation-delay: -3s;
  animation-duration: 30s;
}
.parallax > use:nth-child(3) {
  animation-delay: -4s;
  animation-duration: 39s;
}
.parallax > use:nth-child(4) {
  animation-delay: -5s;
  animation-duration: 60s;
}
@keyframes move-forever {
  0% {
     transform: translate3d(-90px, 0, 0);
  }
  100% {
     transform: translate3d(85px, 0, 0);
  }
} 
/*Shrinking for mobile*/
@media (max-width: 768px) {
  .waves {
     height: 40px;
     min-height: 40px;
  }
  footer, #footer {
     background-image: linear-gradient(rgba(255,0,0,0) 40px, #700 40px, #f77)
  }
}

/* -------------------------------- small screen overrides ----------------------------- */
@media screen and (max-width: 1840px) {
     nav {
          top: -60px;
     }
     .content {
          margin-top: -30px;
     }
}
@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;
     }
     .content {
          margin-top: 40px;
     }
}
@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: 660px) {
     input[type="submit"] {
          margin-left: 0;
     }
} 
@media screen and (max-width: 600px) { 
     label {
          display: block;
          text-align: left;
          padding: 0.5em 0.2em 0.1em 0.2em;
     }
     textarea {
          display: block;
     }
     input, textarea {
          width: 94%;
          padding: 0.3em 3%;
     }
     input[type='submit'] {
          width: 100%;
     }
     div.flex-text {
          display: block;
     }
}