/* Jimp Studio, LLC - Aaron Klabunde - 2022.12.16
     Project: Holstein Aviation 2023 Redesign
     Description: Primary Styles
*/

/* @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800;900&display=swap'); */

/*@font-face {
     font-family: Montserrat;
     src: url("../fonts/Montserrat-VariableFont_wght.ttf");
}*/
/* Variable fonts are far too thick in Chrome, so using static. Bummer */
@font-face {
     font-family: Montserrat;
     src: url("../fonts/Montserrat-Thin.ttf");
     font-weight: 100;
}
@font-face {
     font-family: Montserrat;
     src: url("../fonts/Montserrat-ExtraLight.ttf");
     font-weight: 200;
}
@font-face {
     font-family: Montserrat;
     src: url("../fonts/Montserrat-Light.ttf");
     font-weight: 300;
}
@font-face {
     font-family: Montserrat;
     src: url("../fonts/Montserrat-Regular.ttf");
     font-weight: 400;
}
@font-face {
     font-family: Montserrat;
     src: url("../fonts/Montserrat-Medium.ttf");
     font-weight: 500;
}
@font-face {
     font-family: Montserrat;
     src: url("../fonts/Montserrat-Bold.ttf");
     font-weight: 600;
}
@font-face {
     font-family: Montserrat;
     src: url("../fonts/Montserrat-LightItalic.ttf");
     font-style: italic;
}
@font-face {
     font-family: BaskervilleItalic;
     src: url("../fonts/Baskervville-Italic-VariableFont_wght.ttf");
     font-weight: 500;
     font-style: italic;
}

body {
     background-color: #ddd;
     font-size: 15px;
     text-align: center;
     color: #333;
     /*font-family: 'Times New Roman', serif;
     font-family: Arial, Helvetica, Verdana, sans-serif;*/
     font-family: 'Montserrat', sans-serif;
     font-weight: 200;
     line-height: 145%;
}
.view-margin {
     position: relative;
     z-index: 677;
     padding: 0 2% 10vw 2%;
     background: #eee;
     background: linear-gradient(#eee 0, #fff calc(100% - 120px));
}

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

header {
     position: relative;
     text-align: center;
     background: #eee;
     background: radial-gradient( #ffffffee 8%, #ffffff00 60%), linear-gradient(#ffffff00 80%, #ffffff00 90%, #eee);
  	padding: 4em 1em 20vw 1em;
}

header h1 {
     font-size: 2.8em;
     line-height: 110%;
     padding: 0.3em;
     margin-top: calc(2% + 10px);
     margin-bottom: 0;
     border-bottom: 1px solid #ccc;
}
header h1 a,
header h1 a:link,
header h1 a:active,
header h1 a:visited { 
     padding: 0.8em 0;
     color: #444;
     font-family: 'Montserrat';
     font-weight: 100;
     font-weight: 100;
     text-transform: uppercase;
     letter-spacing: -0.02em;
     text-shadow: 0 0 4px #fff;
}
header h2 {
     margin: 1.3em;
     padding: 0;
     text-transform: uppercase;
     font-weight: 200;
     font-size: 1.1em;
     text-shadow: 0 0 4px #fff;
}
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;
}
div.top-menu {
     padding: 0;
     text-align: center;
     line-height: 240%;
     background-color: #fff;
     /*background-image: linear-gradient(#fff 50%, #eee); */
     box-shadow: 0 0 20px #8877;
     width: calc(100% + 2em);
     margin-left: -1em;
     position: fixed;
     top: 0;
     z-index: 99999;
}
div.top-menu ul {
     list-style-type: none;
     margin: 0.6em 0;
     line-height: 2em;
}
div.top-menu li {
     display: inline-block;
     list-style-type: none;
     margin-left: 0;
}
div.top-menu a {
     text-transform: uppercase;
     font-size: 0.9em;
     margin: 1.6em 1em;
     padding: 0.8em 0.5em;
     display: inline;
     list-style-type: none;
     border: 1px solid rgba(0,0,0,0);
     color: #003;
     text-decoration: none;
     text-shadow: 0 0 2px #fff;
     transition: border 0.5s;
}
div.top-menu a:hover {
     color: #000;
     border: 1px solid #ccc;
     transition: border 0.5s;
}
.static-menu a {
     padding: 0.5em;
     border-left: 1px solid #385d7a;
}
.static-menu a:first-of-type {
     border-left: 0 ;
}

div.banner {
     position: fixed;
     top: 0;
     overflow: hidden;
     width: 100%;
     margin: 0;
     padding: 0;
     text-align: center;
}
div.banner img {
     position: relative;
     width: 100%;
}

/*
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: 92%;
     min-width: 356px;
     max-width: 1720px;
     margin-bottom: 2em;
     margin-top: -10vw;
}
.content {
	margin-bottom: 4%;
     background-color: #fff;
     margin-top: 0;
     padding: 3% 4% 2% 4%;
     box-shadow: 0 20px 20px #2201;
     font-weight: 400;
}
.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;*/
}

div.cols-three {
     display: inline-block;
     vertical-align: top;
     width: calc(33.3% - 8%);
     background-color: #fff;
     padding: 2em 2% 0 2%;
     margin: 2%;
     line-height: 200%;
}
div.cols-three p:first-of-type {
     text-align: center;
}
div.cols-three h3 {
     text-align: center;
}
div.cols-three ul {
     line-height: 200%;
     margin: 0;
}
div.cols-three ul li {
     margin: 0 0 1em 1em;
}
div.cols-four {
     display: inline-block;
     vertical-align: top;
     width: calc(25% - 8%);
     background-color: #fff;
     padding: 2em 2% 0 2%;
     margin: 2%;
     line-height: 200%;
     box-shadow: 0 20px 20px #2201;
}
div.cols-four p:first-of-type {
     text-align: center;
}
div.cols-four h3 {
     text-align: center;
     font-weight: 500;
     text-transform: uppercase;
     color: #999;
}
div.cols-four ul {
     line-height: 200%;
     margin: 0;
     display: inline-block;
     text-align: left;
}
footer div.cols-four:nth-of-type(3) ul {
     text-align: right;
}
div.cols-four ul li {
     margin: 0 0 1em 1em;
}

footer div.cols-four {
     display: inline-block;
     vertical-align: top;
     width: calc(25% - 4%);
     background-color: transparent;
     padding: 2em 0 0 0;
     margin: 1%;
     line-height: 200%;
     box-shadow: 0 0 0 transparent;
}
footer div.cols-four ul {
     list-style-type: none;
}
footer div.cols-four ul li {
     margin: 0;
     margin-left: 0;
}
footer div.cols-four:first-of-type,
footer div.cols-four:nth-of-type(3),
footer div.cols-four p:first-of-type,
footer div.cols-four h3 {
     text-align: left;
}
footer div.cols-four:last-of-type p,
footer div.cols-four:nth-of-type(2),
footer div.cols-four:nth-of-type(2n + 2) h3 {
     text-align: right;
}
footer div.cols-four h3 {
     color: #fff;
     font-size: 1.6em;
     font-weight: 300;
}
footer div.cols-four img {
     filter: invert(1);
     width: 30px;
     margin: 0.5em 0.5em -0.5em 0;
}
footer div.cols-four a:hover img {
     filter: invert(0.2);
}
footer div.cols-four:last-of-type img {
     margin: 0.5em 0 -0.5em 0.5em;
}

footer div.cols-four ~ p img {
     filter: grayscale(100%);
     height: 36px;
}

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; line-height: 1; }
.top, .va-top { vertical-align: top; }
.middle, .va-middle { vertical-align: middle; }
.inline-block { display: inline-block; }
.pad-right { padding-right: 2em; }
.green { color: #090; }
.softgreen { color: #67aa05; /*#3eaa02*/ }
.yellow { color: #c90; }
.orange { color: #f48900; }
.red { color: #812222; }
.gray { color: #909090; }
b, .bold { font-weight: bold; }
.unbold { font-weight: normal; }
sup, .sup { font-size: 0.8em; margin-top: -0.2em; display:inline-block; vertical-align: top; }

form#portal-login input[type="submit"] {
     width: auto;
}

/* Footer, Link, and List styles */
footer, #footer {
     position: relative;
     z-index: 777;
     margin: 0;
     padding: 40px 1em;
     text-align: center;
     clear: both;
     background-color: #d9d9d6;
     color: #fff;
     font-weight: 400; 
     background-image: linear-gradient(#d9d9d6 70px, #afaca7 220px);
}
footer p#footer-top-image {
     margin-top: max(-140px, -20vw);
     position: relative;
     z-index: 788;
}
footer p#footer-top-image img {
     border: 4px solid #d9d9d6;
     width: 880px;
     max-width: calc(98% - 8px);
}
footer a {
     text-decoration: none;
     color: #fff;
}
footer h4 {
     font-weight: 300;
     text-transform: uppercase;
     font-size: 1.2em;
}
footer div.cols-four + h4 + p {
     color: #333;
     margin-top: 2em;
}
div.extend-footer {
     height: 60px;
     height: 300px;
     background-color: #afaca7;
}
form#accept-cookies {
     position: fixed;
     bottom: 0;
     z-index: 9999;
     background-color: #b75;
     color: #fff;
     padding: 6em 2%;
     width: 96%;
     font-weight: 400;
     box-shadow: 0 -20px 40px #aaa;
}
form#accept-cookies a {
     color: #fff;
     font-weight: 600;
}
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: none;
     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: 500; }
em { font-style: italic; }

div#container div.cols-four ul li::before {
  content: "\2022";
  color: #999;
  font-weight: bold;
  display: inline-block; 
  width: 1em;
  margin-left: -1em;
}

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: 'Montserrat', sans-serif;
}
h1, h1 a, h1 a:link, h1 a:active, h1 a:visited {
  margin: 0px;
  padding: 2px 0px 6px 0px;
  text-align: center;
  font-weight: 200;
  color: #888;
  line-height: 120%;
  text-decoration: none;
  text-transform: uppercase;
}
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: 400;
  color: #444;
  line-height: 120%;
  text-decoration: none;
}
h2 a:hover {
	color: #444;
	text-decoration: none;
}

.next {
     font-family: 'Montserrat', sans-serif;
     font-size: 2em;
     color: #822222;
}
h2.quote {
     font-family: 'Montserrat', sans-serif;
     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.2em;
	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: 'Montserrat', sans-serif;
     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;
}

/* Fix safari form buttons */
/*input, textarea {
  -webkit-appearance: none; /* breaks checkboxes and radios *
}*/
input[type=submit] {
    -webkit-border-radius:0px;
}
label { 
     display: inline-block;
     vertical-align: middle;
     padding: 1em;
     margin: 0;
     cursor: pointer;
     text-align: right;
     width: 280px;
}
input[type='checkbox'] + label, 
input[type='radio'] + label {
     text-align: left;
}
input, textarea, button, .button, select, .StripeElement {
     display: inline-block;
     vertical-align: middle;
     margin: 0;
     padding: 0.3em 0.8em;
     width: 280px;
     max-width: 84%;
     border: 1px solid #ddd;
     border-radius: 2px;
     background-color: #f7f7f7;
     font-size: 1em;
     font-family: 'Montserrat', sans-serif;
} 
input[type='text'], select {
     display: inline-block;
}
input[type='checkbox'], 
input[type='radio'] {
     width: 28px;
     padding: 1em 0.2em 0.5em 0.2em;
     margin-left: 264px;
}
.StripeElement {
	height: 20px;
	width: 300px;
	padding: 0.6em 0.2em 0.2em 0.2em;
}
input:focus, textarea:focus, input[type='submit']:hover, button:hover, .button:hover {
     border: 1px solid #338;
     background-color: #f7f7f7;
}
form#browse {
     padding-top: 70px;
}
form div.flex-text {
     display: inline-block;
     padding: 0.8em 0;
}
form#client-portal label {
    padding: 0;
    width: auto;

}
textarea {
     width: 520px;
     min-height: 120px;
}
input[type='submit'], button, .button {
     font-weight: bold;
     font-family: 'Montserrat', sans-serif;
	color: #338;
     text-transform: uppercase;
     font-weight: 400;
}
.button, a.button {
     text-align: center;
     text-decoration: none;
     color: #338;
     text-transform: uppercase;
     font-weight: 400;
}
.button:hover, a.button:hover {
     text-decoration: none;
}
.hidden {
     display: 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;
}
form h2 {
     padding: 1em 0 0.2em 0;
     text-align: left;
     border-top: 2px solid #975;
}
form h3 {
     font-size: 1em;
}

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

.sticky {
     position: -webkit-sticky;
     position: sticky;
     top: 0;
}

.pseudo-table {
     display: block;
     /*overflow: scroll;*/
     margin: 1em 0;
}
.pseudo-tr {
     display: block;
     background-color: #f9f8f7;
     margin: 0;
     border-top: 1px solid #eee;
}
.bg-child-white ~ .pseudo-tr {
     background-color: #fff;
}
.pseudo-th {
     background-color: #fff;
     border: 2px solid #eee;
     box-shadow: 0 12px 12px #fff;
}
.pseudo-td {
     display: inline-block;
     vertical-align: top;
     margin: 0.5em 2.5%;
}
.show-list .expand-list {
     height: 0;
     overflow: hidden;
}
.show-list .expand-list .pseudo-tr {
     height: 0;
     overflow: hidden;
}
.show-list + .expand-list {
     max-height: 0;
     overflow: hidden;
     transition: max-height 0.5s;
}
.show-list + .expand-list .pseudo-tr {
     max-height: 0;
     overflow: hidden;
     transition: max-height 0.5s;
}
.show-list:checked + .expand-list {
     overflow-y: scroll;
     max-height: 600px;
     transition: max-height 0.5s;
}
.show-list:checked + .expand-list .pseudo-tr {
     max-height: 300px;
     transition: max-height 0.5s;
}

.w8per { width: 8%; }
.w9per { width: 9%; }
.w10per { width: 10%; }
.w15per { width: 15%; }
.w20per { width: 20%; }
.w25per { width: 25%; }
.w30per { width: 30%; }
.w40per { width: 40%; }
.w50per { width: 50%; min-width: 300px; }
.w54per { width: 54%; }
.w55per { width: 55%; }
.w58per { width: 58%; }
.w60per { width: 60%; }
.w80per { width: 80%; }
.w90per { width: 90%; }
.w100per { width: 100%; }

.w-min50px { min-height: 50px; }
.w48px { width: 48px; }
.w50 { width: 50%; }
.w80 { width: 80px; }
.w62px { width: 62px; }
.w200px { width: 200px; }

.margin { margin: 2%; }

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

img {
     max-width: 100%;
}

/* -------------------------------- Holstein Client Portal ----------------------------- */
#container:has(#market-container) {
     width: 100%; 
}
#market-container {
     position: relative;
     display: block;
     margin: 3em 0;
     padding: 1vw;
     background-color: #f4f2f1;
     border: 4px solid #777;
}
.select-make {
     display: inline-block;
     position: relative;
     z-index: 9999;
     vertical-align: top;
     margin: 0 4px;
     padding: 0;
     font-size: 16px;
     height: 44px;
     min-width: 180px;
     overflow-y: scroll;
     transition: height 3s, margin 3s;
     line-height: 160%;
     text-align: center;
     border: 1px solid #626256;
     border-radius: 3px;
     color: #626256;
     background-color: #62625636;
     /*font-size: 1.62em;*/
}
.select-make:hover {
     height: 280px;
     transition: height 0.5s, margin 0.5s;
     margin-bottom: -280px;
}
.select-model {
     display: block;
     margin: 0;
     padding: 0;
}
.select-make label, .select-model a.label {
     display: block;
     width: auto;
     margin: 0;
     padding: 0 1em;
     background-color: #f6f6f6;
     color: #626256;
     transition: background-color 0.3s, color 0.2s;
}
.select-make label,
.select-make label {
    text-align: left;
}
.select-make label:first-of-type {
     padding: 0.8em 1em 1.4em 1em;
     color: #626256;
}
.select-model a.label {
     padding-left: 2em;
}
.select-make label:hover, .select-model a.label:hover {
     background-color: #949488;
     color: #fff;
     transition: background-color 0.3s, color 0.2s;
}
label.play-button {
     vertical-align: top;
     padding: 0;
     width: auto;
}
div.craft-img {
     width: 40%;
height: 300px;
text-align: center;
     position: relative;
     top: 0;
     z-index: 545;
     overflow: hidden;
}
div.craft-img img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     position: relative;
     top: 0;
     display: block;
     margin: auto;
     object-position: center center;
}
div.craft-img div {
     width: 100%;
     height: 300px;
     margin-top: -300px;
     display: block;
     position: relative;
     top: 0;
     z-index: 676;
     overflow: hidden;
     font-weight: 200;
     border: 1px solid #000;
     background-color: rgba(0,0,0,0);
     opacity: 0;
     transition: opacity 0.7s;
}
/*div.craft-img:hover div, */
div.craft-img.hover div {
     background-color: rgba(0,0,0,0.7);
     opacity: 1;
     transition: opacity 0.7s;
}
div.craft-img div h4 {
     font-family: "BaskervilleItalic";
     font-size: 2em;
     font-weight: 500;
     line-height: 180%;
     color: #fff;
     padding: 1em 1.5em;
}
div.craft-img div p {
     font-family: "BaskervilleItalic";
     font-size: 1.6em;
     font-weight: 500;
     line-height: 180%;
     color: #fff;
     padding: 0 1.5em 1.5em 1.5em;
}

.market-data {
     width: 25%;
     padding: 1.5%;
     margin: 0 0 0 1.2%;
     /*background-color: #eee;*/
     print-color-adjust: exact;
}
.market-data div.metric {
     padding: 0 1em;
     border: 1px solid #fff0;
     transform: scale(1);
     width: 100%;
     margin: 0;
     transition: transform 0.6s, width 0.6s, margin 0.6s;
}
.market-data div.metric:hover,
.market-data div.metric.hover
 {
     padding: 0 1em;
     transform: scale(1.25);
     /*width: 150%;*/
     box-shadow: 0 0 2em #000;
     background-color: #fff;
     /*margin: -.75em 0 -.75em -50%;*/
     transition: transform 0.6s, width 0.6s, margin 0.6s;
     position: relative;
     z-index: 9999;
     border: 1px solid #000;
}
.market-data div.metric:first-of-type:hover h4,
.market-data div.metric.hover:first-of-type h4 {
     margin-top: 1em;
}
.market-data div h4 {
     padding: 0.3em 0;
     text-align: left;
     font-weight: 400;
     border-bottom: 1px solid #ccc;
     margin-top: 1em;
     text-transform: uppercase;
     letter-spacing: 0.2em;
}
.market-data div:first-of-type h4 {
     /* margin-top: 0; */
}
.market-data div.trends {
     display: block;
     margin: 0.5em 0 1em 1em;
     color: #000;
     font-size: 1.2em;
     text-align: left;
     font-weight: 400;
}
.market-data div.trends span {
     /*display: inline-block;
     width: 130px;
     text-align: left;*/
     padding: 0 0 0 0.5em;
}
.market-data div.trends span small {
     line-height: 100%;
}
.market-snap h3, 
.absorb-rate h3 {
     padding: 1em;
     text-transform: uppercase;
     font-weight: 800;
     background-color: #626256;
     color: #fff;
     text-shadow: 0 0 4px #000;
     letter-spacing: 0.3em;
}
div#market-container div#contact-banner {
     position: absolute;
     top: 0;
     z-index: 9999;
     /*transform: scale(0.1);*/
     width: 0;
     height: 0;
     padding: 0;
     margin-left: -1vw;
     overflow: hidden;
     background-color: #fff;
     color: #62625656;
     text-align: center;
     opacity: 0;
     transition: transform 0.6s, width 0.6s, padding 0.6s, opacity 1s;
}
div#market-container div#contact-banner.hover {
     transform: scale(1);
     width: calc(100% - 4em);
     height: calc(100% - 12em);
     padding: 6em 2em;
     opacity: 1;
     transition: transform 0.6s, width 0.6s, padding 0.6s, opacity 1s;
}
div#contact-banner img.icon {
     width: 24px;
     opacity: 0.7;
     margin: 0 1em -0.4em 0;
}
div#contact-banner h2 {
     margin-bottom: 3em;
}
div#contact-banner div.contact-box {
     display: inline-block;
     text-align: left;
     border: 1px solid #626256;
     padding: 2em;
}

div#market-container > h3 {
     text-transform: uppercase;
     font-weight: 800;
     font-size: 1.6em;
     background-color: #626256;
     color: #fff;
     text-shadow: 0 0 4px #000;
     letter-spacing: 0.3em;
     margin: 0;
     padding: 1.4em;
     transition: letter-spacing 1s;
}
div#market-container > h3#make-and-model:hover, 
div#market-container > h3#make-and-model.hover {
     letter-spacing: 0.1em;
     transition: letter-spacing 1s;
}
div#market-container > h3 img {
     height: 3em;
     float: right;
     margin-top: -1em;
     filter: drop-shadow(0 0 4px #000);
}
div#market-container label {
     display: block;
     padding: 0;
     margin: 0;
     text-align: center;
     width: auto;
}
label input#playButton ~ b:last-of-type {
     display: none;
}
label input#playButton ~ b:first-of-type,
label input#playButton:checked ~ b:last-of-type {
     display: inline-block;
     padding: 0.8em 1em 0.4em 1em;
     text-align: center;
     border: 1px solid #626256;
     border-radius: 3px;
     color: #626256;
     background-color: #62625636;
     font-size: 1.2em;
}
label input#playButton ~ b:first-of-type:hover,
label input#playButton:checked ~ b:last-of-type:hover {
     background-color: #949488;
     color: #fff;
     transition: background-color 0.3s, color 0.2s;
}
label input#playButton:checked ~ b:first-of-type {
     display: none;
}

label input#playButton ~ b em {
     display: inline-block;
     margin: -24px 2px 0 0;
     height: 3px;
     width: 2px;
     background: #626256;
     transition: background-color 0.3s;
}
label:hover input#playButton ~ b em {
     background: #fff;
     transition: background-color 0.3s;
}
label input#playButton:checked ~ b:last-of-type em {
     animation: sound 0ms -800ms linear infinite alternate;
}

@keyframes sound {
  0% {
     opacity: .35;
     height: 3px;
  }
  100% {
     opacity: 1;
     height: 28px;
  }
}
label input#playButton ~ b:first-of-type em:first-of-type { height: 11px; opacity: .50; }
label input#playButton ~ b:first-of-type em:nth-of-type(2) { height: 6px; opacity: .40; }
label input#playButton ~ b:first-of-type em:nth-of-type(3)  { height: 13px; opacity: .60; }
label input#playButton ~ b:first-of-type em:nth-of-type(4)  { height: 21px; opacity: .75; }
label input#playButton ~ b:first-of-type em:nth-of-type(5)  { height: 28px; opacity: 1; }
label input#playButton ~ b:first-of-type em:nth-of-type(6)  { height: 23px; opacity: .82; }

label input#playButton:checked ~ b:last-of-type em:first-of-type { animation-duration: 474ms; }
label input#playButton:checked ~ b:last-of-type em:nth-of-type(2) { animation-duration: 433ms; }
label input#playButton:checked ~ b:last-of-type em:nth-of-type(3)  { animation-duration: 407ms; }
label input#playButton:checked ~ b:last-of-type em:nth-of-type(4)  { animation-duration: 458ms; }
label input#playButton:checked ~ b:last-of-type em:nth-of-type(5)  { animation-duration: 400ms; }
label input#playButton:checked ~ b:last-of-type em:nth-of-type(6)  { animation-duration: 427ms; }

div.nav-arrows {
     position: relative;
     z-index: 9997;
}
div.nav-arrows a {
     display: inline-block;
     color: #626256;
     border: 1px solid #eee;
     background-color: #f6f6f6;
     border-radius: 3px;
     font-size: 22px;
     line-height: 50%;
     text-decoration: none;
     margin: 0 4px;
     padding: 0.3em;
     text-align: center;
     border: 1px solid #626256;
     color: #626256;
     background-color: #62625636;
     font-size: 1.62em;
}
div.nav-arrows a:hover {
     background-color: #949488;
     color: #fff;
     transition: background-color 0.3s, color 0.2s;
}
div.nav-arrows a small {
     font-size: 11px;
}


div.bar-graph { margin-right: 1.2%; }
ul.graph-tall { display:inline; margin:0; padding:0; position:relative; top: 0; right:0; white-space: nowrap; overflow:visible; }
ul.graph-tall li { display:inline-block; position:relative; top:0; margin:0; padding:0; vertical-align:bottom; width:8.3%; cursor:pointer; z-index:77; white-space:nowrap; }

.graph-col-key { display:inline-block; margin-top: 2px; width: 8.3%; line-height: 100%; text-align: center; font-size: 0.7em; }
ul.graph-tall#graph-est-top { display: block; margin:-280px 0 -26px 0; z-index: 9998; } 

ul.graph-tall#graph-est li { margin-right: 2%; width: 6.3% }
ul.graph-tall li:hover,
ul.graph-tall li.hover { z-index:999; }
ul.graph-tall li span {
     display: inline-block;
     max-width: 0;
     max-height: 0;
     line-height: 10%;
     font-size: 0.1em;
     overflow: hidden;
     transition: max-width 0.5s, max-height 0.5s;
}
ul.graph-tall li:hover span,
ul.graph-tall li.hover span {
     position: relative;
     top: 0;
     width: auto;
     max-width: 440px;
     max-height: 260px;
     z-index: 9988;
     box-shadow: 0 0 2em #000;
     background-color: #fff;
     border: 1px solid #000;
     padding: 0.6em;
     margin-bottom: 50px;
     line-height: 140%;
     line-height: 180%;
     font-size: 1.5em;
     overflow: visible;
     transition: line-height 0.6s, font-size 0.6s, max-width 0.2s, max-height 0.2s;
}
ul.graph-tall li span em { font-style: normal; font-weight: 600; padding: 0 0.5em; }
ul.graph-tall li span em:first-of-type { display: block; text-align: center; } 
ul.graph-tall li:hover span.moveleft,
ul.graph-tall li.hover span.moveleft { margin-left: -280px; }
ul.graph-tall li b { display:block; position: absolute; bottom: 0; margin:0; padding:0; vertical-align:bottom; width:70%; margin-left: 15%; background-color:#bf8080; }
ul.graph-tall li.today { display:block; position: absolute; bottom: 0; margin:0; padding:0; vertical-align:bottom; }
ul.graph-tall#graph-est li, div.graph-est em:nth-of-type(2) { background-color: #d4e2f0;
-webkit-print-color-adjust: exact;
color-adjust: exact; }
ul.graph-tall#graph-est li b, div.graph-est em:first-of-type { background-color: #4480ac; width:80%; margin-left: 30%; 
-webkit-print-color-adjust: exact;
color-adjust: exact; }
/*ul.graph-tall#graph-est li b.price { width:128%; margin-left:-14%; background-color:rgba(0,0,0,0); border-top:7px dotted #057; font-size:0.7em; font-size:0.7em; text-align:center; color:#444; }*/
ul.graph-tall#graph-est li b.price { background-color:rgba(0,0,0,0); font-size: 10px; width: 100%; text-align:center; color:#444; margin: 0 0 0 0; font-weight: 500; }
ul.graph-tall#graph-est li b.price sup { color: #777; }
ul.graph-tall#graph-est-top li { background-color:rgba(0,0,0,0); text-align: right; }
ul.graph-tall#graph-est-top li span em { border-right: 1em solid #094; }
ul.graph-tall#graph-est-top li span em:first-of-type { border-right: 0; }
ul.graph-tall#graph-est-top li span em:nth-of-type(3) { border-right: 1em solid #d4e2f0; }
ul.graph-tall#graph-est-top li span em:nth-of-type(4) { border-right: 1em solid #4480ac; }

ul.graph-tall#graph-exp li, div.graph-exp em:nth-of-type(2) { print-color-adjust: exact; }
ul.graph-tall#graph-exp li b, div.graph-exp em:first-of-type { background-color: #f5dea7; print-color-adjust: exact; }
ul.graph-tall#graph-exp li b.this-model { background-color: #d2f5a7; }

div.table-keys { font-size: 0.8em; margin: 0 0 1.2em 0; }
div.table-keys span { display:inline-block; padding: 0 1em 0 0.4em; line-height: 100%; }
span.key-one { border-left: 1em solid #094; }
span.key-two { border-left: 1em solid #d4e2f0; }
span.key-three { border-left: 1em solid #4480ac; }
span.key-four { border-left: 1em solid #ede8c4; }
span.key-five { border-left: 1em solid #d2f5a7; }

div.graph-est em, div.graph-exp em { display:inline-block; width:12px; height:12px; margin: 3px 3px 0 0; }

div.market-snap {
     width: 40%;
}
div.absorb-rate {
     width: 58.5%;
     margin-right: -10px;
}
.rotate {
     -webkit-transform: rotate(-90deg);
     -moz-transform: rotate(-90deg);
     -ms-transform: rotate(-90deg);
     -o-transform: rotate(-90deg);
     filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
     -ms-transform-origin: 20% 40%; /* IE 9 */
     transform: rotate(-90deg);
     transform-origin: 0% 0%;
     display: block;
     z-index: 1999;
     position: relative;
     top: 230px;
     left: 50%;
     margin: 0;
     padding: 0;
     font-size: 12px;
     color: #006;
     /*text-shadow: 0 0 8px #4a3d30;*/
     line-height: 0;
     text-align: right;
     text-decoration: none;
}
#line-graph-overlay {
     display: inline-block;
     position: relative;
     margin-top: -180px;
     left: 0;
     z-index: 999;
     width: 100%;
     height: 240px;
}
div.side-keys:hover + div #line-graph-overlay #price-line,
div.side-keys.hover + div #line-graph-overlay #price-line {
     stroke: #555;
     stroke-width: 8;
     transition: stroke 0.5s, stroke-width 0.5s;
}
div.side-keys {
     font-size: 11px;
     line-height: 30px;
     height: 240px;
     line-height: 12px;
     border-left: 2px solid #4480ac;
     color: #1d6295;
     text-align: center;
}
div.market-outlook h3 {
     font-weight: 300;
     text-transform: uppercase;
     border-top: 1px solid #ccc;
     font-size: 1.6em;
     color: #aaa;
     margin: 0;
     padding: 0.5em 0 0.5em 0;
}
div.market-outlook p {
     margin: 2em 0;
     clear: both;
}
div.market-outlook p img[style='float: left;'] {
     margin: 0 2em 2em 0;
     max-width: 50%;
}
div.market-outlook ul {
	list-style-type: none;
	margin: 0 0 6em 0;
}
div.market-outlook ul li img {
	max-width: 100%;
	background-color: #fffcee;
	border-radius: 3px;
	margin: 1em 0.5em -0.9em 0.5em;
	padding: 10px 4px;
	border: 3px solid #bdbdbd;
}
div.market-outlook ul li:nth-of-type(2) img {
	background-color: #e3f3ff;
}
div.market-outlook ul li:nth-of-type(3) img {
	background-color: #efe;
}

/* Loading circle */
div.report-audio-load:has(a) div.loading {
     position: fixed;
     top: 0;
     left: 0;
     width: 0;
     height: 0;
     overflow: hidden;
     background-color: #fff9;
}
div.report-audio-load:has(a:active) div.loading {
     width: 100%;
     height: 100%;
}
div.report-audio-load:has(a:active) div.loading b {
     position: absolute;
     display: block;
     border: 16px solid #bbb;
     border-radius: 50%;
     border-top: 16px solid #be0;
     width: 120px;
     height: 120px;
     -webkit-animation: spin 2s linear infinite;
     animation: spin 2s linear infinite;
     margin: calc(50vh - 76px) calc(50vw - 76px);
     z-index: 99999;
}
/* Safari */
@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* -------------------------------- small screen overrides ----------------------------- */
@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;
     }
     .pseudo-td.w20per {
          display: block;
          width: 95%;
          text-align: center;
     }
     .pseudo-td {
          display: inline-block;
     }
     div.cols-four {
          width: calc(50% - 8%);
     }
}
@media screen and (max-width: 1050px) {
     textarea {
          width: 320px;
          min-height: 160px;
     }
}
@media screen and (max-width: 980px) {
     body { font-size: 16px; }
     #container {
     	width: 94%;
     }
     h2.quote {
          font-size: 1.8em;
     }
     .pseudo-td {
          display: block;
     }
     .pseudo-td.w30per {
          display: inline-block;
          width: 90%;
     }
     footer div.cols-four h3 {
          font-size: 1.2em;
     }
}
@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;
     }
     div.market-outlook p img[style='float: left;'] {
          max-width: 100%;
     }
     div.market-outlook h3 {
          clear: both;
     }
     footer div.cols-four {
          width: 92%;
     }
     footer div.cols-four:nth-last-of-type(2),
     footer div.cols-four:nth-last-of-type(3) {
          width: 46%;
     }
}
@media screen and (max-width: 796px) {
     textarea {
          width: 280px;
          min-height: 200px;
     }
}
@media screen and (max-width: 752px) { 
     label {
          /*display: block;*/
          text-align: left;
          padding: 0.5em 0.2em 0.1em 0.2em;
     }
     input, textarea {
          width: 94%;
          max-width: 94%;
          padding: 0.3em 3%;
     }
     form div.flex-text {
          width: 100%;
     }
     input[type='submit'] {
          width: 100%;
     }
     input[type='checkbox'], 
     input[type='radio'] {
          width: 28px;
          padding: 1em 0.2em 0.5em 0;
          margin-left: 5em;
     }
     .w50 { width: 100%; }
}
@media screen and (max-width: 512px) { 
     div.cols-four {
          width: calc(100% - 8%);
     }
     div.market-outlook ul li { 
          margin-left: 0;
     }
     input[type='checkbox'], 
     input[type='radio'] {
          width: 28px;
          padding: 1em 0.2em 0.5em 0;
          margin-left: 0;
     }
}
/* ---------------------------- Holstein Client Portal Mobile -------------------------- */
@media screen and (max-width: 1420px) {
     div.market-snap,
     div.absorb-rate { width: 100%; }
     ul.graph-tall#graph-est li b.price { font-size: 12px; }
     .graph-col-key { font-size: 0.8em; }
}
@media screen and (max-width: 900px) {
     ul.graph-tall#graph-est li b.price { font-size: 11px; }
     div.craft-img { width: 99%; }
     .market-data { width: 46%; margin: 0; }
}
@media screen and (max-width: 820px) { 
     div.banner img { position: relative; width: auto; min-width: 600px; }
     header { text-align: left; margin-top: -8vw; }
     div.top-menu { margin-left: -1em; display: inline-block; width: 46px;  min-height: 46px; 
          max-width: 46px; 
          font-size: 0; 
          transition: max-width 1s, font-size 1s;
          transition-delay: 0.4s;
          background-image: linear-gradient(#777 0, #777 6px, #fff 6px, #fff 20px, #777 20px, #777 26px, #fff 26px, #fff 40px, #777 40px, #777 46px, #fff 46px);
          border: 8px solid #fff;
          box-shadow: 0 4px 8px #0003;
     }
     div.top-menu li { display: none; }
     
     div.top-menu:hover { min-width: 46px; width: auto; 
          max-width: 320px; 
          font-size: 15px;
          transition: max-width 1s, font-size 1s;
          transition-delay: 0.4s;
          background-image: none;
     }
     div.top-menu:hover li { display: block; line-height: 220%; text-align: left; margin-left: 0;}
}
@media screen and (max-width: 660px) {
     ul.graph-tall#graph-est li b.price { font-size: 9px; }
     ul.graph-tall#graph-est li b.price small { display: none; }
     .graph-col-key { font-size: 0.7em; }
}
@media screen and (max-width: 560px) {
     .market-data { width: 96%; margin: 0; }
     div.market-snap div.w90per { width: 100%; }
     div.side-keys { display: none; }
     ul.graph-tall#graph-est li b.price { font-size: 8px; }
}
@media screen and (max-width: 408px) { 
    header h1 span.logo { font-size:30px; border:4px solid #722; } 
}
@media print {
     div.banner { display: none; }
     header { padding-bottom: 0;}
     div.view-margin { padding: 0; }
     div#container { margin-top: 0; margin-bottom: 0; }
     div#container div.content  { margin-bottom: 0; padding: 0 1em; box-shadow: 0 0 0 #fff;}
     div#container div.content p { display: none; }
     div#container div.content p:last-of-type { display: block; padding-bottom: 0; }
     div.top-menu { display: none; }
     form#browse { display: none; }
     button#print-button { display: none; }
     footer { padding: 0 2em; background-color: #fff; }
     footer p#footer-top-image { display: none; }
     footer h2, footer p { display: none; }
     footer h2:first-of-type, footer p:first-of-type { display: block; }
}