/*! HTML5 Boilerplate v4.3.0 | MIT License | http://h5bp.com/ */
/*
* What follows is the result of much research on cross-browser styling.
* Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
* Kroc Camen, and the H5BP dev community and team.
*/
/* ==========================================================================
Base styles: opinionated defaults
========================================================================== */
html,
button,
input,
select,
textarea {
color: #222;
}
html {
font-size: 1em;
line-height: 1.4;
}
/*
* Remove text-shadow in selection highlight: h5bp.com/i
* These selection rule sets have to be separate.
* Customize the background color to match your design.
*/
::-moz-selection {
background: #b3d4fc;
text-shadow: none;
}
::selection {
background: #b3d4fc;
text-shadow: none;
}
/*
* A better looking default horizontal rule
*/
hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid #ccc;
margin: 1em 0;
padding: 0;
}
/*
* Remove the gap between images, videos, audio and canvas and the bottom of
* their containers: h5bp.com/i/440
*/
audio,
canvas,
img,
video {
vertical-align: middle;
}
/*
* Remove default fieldset styles.
*/
fieldset {
border: 0;
margin: 0;
padding: 0;
}
/*
* Allow only vertical resizing of textareas.
*/
textarea {
resize: vertical;
}
/* ==========================================================================
Browse Happy prompt
========================================================================== */
.browsehappy {
margin: 0.2em 0;
background: #ccc;
color: #000;
padding: 0.2em 0;
}
/* ==========================================================================
Author's custom styles
========================================================================== */
/* Eric Meyer CSS RESET Starts */
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/* Eric Meyer CSS RESET Ends */
/* Group Clear Fix Starts */
.group:before,
.group:after {
content: "";
display: table;
}
.group:after {
clear: both;
}
.group {
zoom: 1; /* For IE 6/7 (trigger hasLayout) */
}
/* Group Clear Fix Ends */
/* Custom Styles Start */
body {
background: #635649 !important;
margin: 0px;
}
.header-wrapper {
width: 100%;
min-width: 1200px;
height: 100px;
background: rgb(0, 0, 0);
background: rgba(0, 0, 0, 0.5);
z-index: 151;
position: absolute;
top: 0px;
}
.header-wrapper-home {
width: 100%;
min-width: 1200px;
height: 30px;
background: rgb(0, 0, 0);
background: rgba(0, 0, 0, 0.5);
z-index: 151;
position: absolute;
top: 0px;
}
.ncsu-brick {
width: 100%;
min-width: 1200px;
height: 30px;
background: #000;
overflow: hidden;
}
.ncstate-utility-bar .ncstate-utility-bar-search-field {
height: auto !important;
}
.ncstate-utility-bar .ncstate-utility-bar-tools {
min-width: 1200px;
}
.header {
width: 1200px;
height: 40px;
margin: 0px auto;
/* background: #9C3; */
}
.breadcrumb {
list-style: none;
overflow: hidden;
font-size: 17px ;
font-family: "UniversLTStd67BoldCondensed", sans-serif !important;
margin-top: 17px;
}
.breadcrumb li {
float: left;
}
.breadcrumb li a {
color: white;
text-decoration: none;
padding: 10px 20px 10px 70px;
position: relative;
display: inline-block;
float: left;
}
.breadcrumb li a:after {
content: " ";
display: block;
width: 0;
height: 0;
border-top: 50px solid transparent; /* Go big on the size, and let overflow hide */
border-bottom: 50px solid transparent;
border-left: 30px solid hsla(34,85%,35%,1);
position: absolute;
top: 50%;
margin-top: -50px;
left: 100%;
z-index: 2;
}
.breadcrumb li a:before {
content: " ";
display: block;
width: 0;
height: 0;
border-top: 50px solid transparent; /* Go big on the size, and let overflow hide */
border-bottom: 50px solid transparent;
border-left: 30px solid hsla(207, 15%, 45%, 1);
position: absolute;
top: 50%;
margin-top: -50px;
margin-left: 5px;
left: 100%;
z-index: 1;
}
.breadcrumb li:first-child a {
padding-left: 50px;
-webkit-border-top-left-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-bottomleft: 5px;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
background: hsla(216, 5%, 25%, 1);
}
.breadcrumb li:first-child a { background: hsla(216, 5%, 5%, 1); color: #fff; }
.breadcrumb li:first-child a:after { border-left-color: hsla(216, 5%, 5%, 1); }
.breadcrumb li:nth-child(2) a { background: hsla(216, 5%, 5%, 1); color: #fff; }
.breadcrumb li:nth-child(2) a:after { border-left-color: hsla(216, 5%, 5%, 1); }
.breadcrumb li:nth-child(3) a { background: hsla(216, 5%, 5%, 1); color: #fff; }
.breadcrumb li:nth-child(3) a:after { border-left-color: hsla(216, 5%, 5%, 1); }
.breadcrumb li:nth-child(4) a { background: hsla(216, 5%, 5%, 1); color: #fff; }
.breadcrumb li:nth-child(4) a:after { border-left-color: hsla(216, 5%, 5%, 1); }
.breadcrumb li:nth-child(5) a { background: hsla(216, 5%, 5%, 1); color: #fff; }
.breadcrumb li:nth-child(5) a:after { border-left-color: hsla(216, 5%, 5%, 1); }
.breadcrumb li:nth-child(6) a { background: hsla(216, 5%, 5%, 1); color: #fff; }
.breadcrumb li:nth-child(6) a:after { border-left-color: hsla(216, 5%, 5%, 1); }
.breadcrumb li:last-child a {
cursor: default;
padding-right: 50px;
-webkit-border-top-right-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
-moz-border-radius-topright: 5px;
-moz-border-radius-bottomright: 5px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
background: hsla(216, 5%, 5%, 1);
color: #fff;
}
.breadcrumb li:last-child a:after { display: none; }
.breadcrumb li:last-child a:before { display: none; }
.breadcrumb li a:hover { background: hsla(207, 5%, 95%, 1); color: #000; }
.breadcrumb li a:hover:after { border-left-color: hsla(207, 5%, 95%, 1) !important; }
.breadcrumb li a.active { background: hsla(0, 75%, 45%, 1); color: #fff; }
.breadcrumb li a.active:after { border-left-color: hsla(0, 75%, 45%, 1) !important; }
.breadcrumb li:first-child a:hover .icon-home {
background-image: url("../img/glyphicons-halflings.png") !important;
}
nav[role="navigation"] li {
float: left;
margin: 10px 4px 0 0;
font-size: 14px;
}
nav[role="navigation"] li a {
float: left;
padding: 8px 50px;
text-decoration: none;
color: #fff;
background: #bbb;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
nav[role="navigation"] li a:hover,
nav[role="navigation"] li a:focus {
background: #999;
}
nav[role="navigation"] li a:active {
background: #888;
}
nav[role="navigation"] li.active a {
color: #fff;
background: #666;
}
nav[role="navigation"] li.additional {
float: right;
margin: 17px 0 0 0;
}
nav[role="navigation"] li.additional a {
float: right;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
display: inline-block;
padding: 0px 0px;
text-decoration: none;
color: #fff;
background: #000;
font-size: 17px ;
font-family: "UniversLTStd67BoldCondensed", sans-serif !important;
padding: 9px 20px 9px 10px;
/*transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;*/
}
nav[role="navigation"] li.additional a i {
display: inline-block !important;
/*transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;*/
}
nav[role="navigation"] li.additional a span {
display: inline-block !important;
}
[class^="icon-"], [class*=" icon-"] {
display: inline-block;
width: 14px;
height: 14px;
margin-top: 2px;
margin-left: 9px;
line-height: 14px;
vertical-align: text-top;
background-image: url("../img/glyphicons-halflings-white.png");
background-repeat: no-repeat;
}
.icon-book {
background-position: -48px -48px;
}
.icon-home {
background-position: 0 -23px;
vertical-align:inherit !important;
margin-top: 0px !important;
margin-left: 0px !important;
}
.icon-signal {
background-position: -408px 0;
}
nav[role="navigation"] li.additional a:hover [class^="icon-"], nav[role="navigation"] li.additional a:hover .icon-book {
display: inline-block;
width: 14px;
height: 14px;
margin-top: 2px;
margin-left: 9px;
line-height: 14px;
vertical-align: text-top;
background-image: url("../img/glyphicons-halflings.png") !important;
background-repeat: no-repeat;
}
nav[role="navigation"] li.additional a:hover {
background: #FFF;
color: #000;
}
nav[role="navigation"] li.additional a:hover .icon-book {
background-position: -48px -48px;
}
.stage-wrapper {
width: 100%;
min-width: 1200px;
position: relative;
z-index: 0;
margin: 0px;
overflow: hidden;
background: #9ccae2; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIxJSIgc3RvcC1jb2xvcj0iIzljY2FlMiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNiY2Q1ZTIiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, #9ccae2 1%, #bcd5e2 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#9ccae2), color-stop(100%,#bcd5e2)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #9ccae2 1%,#bcd5e2 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #9ccae2 1%,#bcd5e2 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #9ccae2 1%,#bcd5e2 100%); /* IE10+ */
background: linear-gradient(to bottom, #9ccae2 1%,#bcd5e2 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9ccae2', endColorstr='#bcd5e2',GradientType=0 ); /* IE6-8 */
}
/*.site-wrapper {
width: 1200px;
height: 800px;
margin: 0px auto;
background: #A6CEE5;
position: relative;
}*/
/* STAGE BACKGROUND and STAGE BACKGROUND GRAPHICAL ELEMENTS Start [z-index 0-10] */
.stage-background {
/*background: #FF3;*/
width: 1200px;
height: 800px;
position:absolute;
left: 0;
right: 0;
margin: 0 auto;
z-index: 0;
}
/* HILL LARGE Background Graphic Starts */
.no-svg .hill-large {
display: block;
width: 1271px;
height: 442px;
position: absolute;
background: url(../img/hill-large.png);
background-size: contain;
background-repeat: no-repeat;
z-index: 0;
}
.hill-large {
display: block;
width: 1271px;
height: 442px;
position: absolute;
background: url(../img/hill-large.svg);
background-size: contain;
background-repeat: no-repeat;
z-index: 0;
}
.landing-page-background .hill-large {
left: 30%;
top: 45%;
}
.phase-one-background .hill-large {
left: -50%;
top: 35%;
}
.phase-two-background .hill-large {
left: 40%;
top: 36%;
}
.phase-three-background .hill-large {
left: -50%;
top: 35%;
}
.phase-four-background .hill-large {
left: 40%;
top: 36%;
}
.phase-five-background .hill-large {
left: -50%;
top: 35%;
}
.phase-six-background .hill-large {
left: 40%;
top: 36%;
}
/* HILL LARGE Background Graphic Ends */
/* HILL MEDIUM Background Graphic Starts */
.no-svg .hill-medium {
display: block;
width: 1207px;
height: 375px;
position: absolute;
background: url(../img/hill-medium.png);
background-size: contain;
background-repeat: no-repeat;
z-index: 0;
}
.hill-medium {
display: block;
width: 1207px;
height: 375px;
position: absolute;
background: url(../img/hill-medium.svg);
background-size: contain;
background-repeat: no-repeat;
z-index: 0;
}
.phase-one-background .hill-medium {
left: 40%;
top: 55%;
}
.phase-four-background .hill-medium {
left: 40%;
top: 55%;
}
/* HILL MEDIUM Background Graphic Ends */
/* HILL SMALL Background Graphic Starts */
.no-svg .hill-small {
display: block;
width: 1120px;
height: 304px;
position: absolute;
background: url(../img/hill-small.png);
background-size: contain;
background-repeat: no-repeat;
z-index: 0;
}
.hill-small {
display: block;
width: 1120px;
height: 304px;
position: absolute;
background: url(../img/hill-small.svg);
background-size: contain;
background-repeat: no-repeat;
z-index: 0;
}
.landing-page-background .hill-small {
left: -43%;
top: 60%;
}
.phase-one-background .hill-small {
left: 40%;
top: 55%;
}
.phase-two-background .hill-small {
left: -40%;
top: 55%;
}
.phase-three-background .hill-small {
left: 40%;
top: 55%;
}
.phase-four-background .hill-small {
left: -40%;
top: 55%;
}
.phase-five-background .hill-small {
left: 40%;
top: 55%;
}
.phase-six-background .hill-small {
left: -40%;
top: 55%;
}
/* HILL SMALL Background Graphic Ends */
/* FARM HILL Background Graphic Starts */
.no-svg .farm-hill {
display: block;
width: 609px;
height: 256px;
background: url(../img/farm-hill.png);
background-size: contain;
position: absolute;
top: 54%;
left: 13%;
z-index: 0;
}
.farm-hill {
display: block;
width: 609px;
height: 256px;
background: url(../img/farmhill.svg);
background-size: contain;
position: absolute;
z-index: 0;
}
.landing-page-background .farm-hill {
top: 55%;
left: 13%;
}
.phase-one-background .farm-hill {
top: 50%;
left: 25%;
}
.phase-two-background .farm-hill {
top: 54%;
left: 13%;
-ms-transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
}
.phase-three-background .farm-hill {
top: 50%;
left: 25%;
}
.phase-four-background .farm-hill {
top: 54%;
left: 13%;
-ms-transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
}
.phase-five-background .farm-hill {
top: 50%;
left: 25%;
}
.phase-six-background .farm-hill {
top: 54%;
left: 13%;
-ms-transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
}
/* FARM HILL Background Graphic Ends */
/* SKY WAVE Background Graphic Starts */
.sky-wave {
display: block;
background: url(../img/wind-lines.png);
background-size: contain;
position: absolute;
z-index: 0;
}
.landing-page-background .sky-wave {
width: 1300px;
height: 542px;
top: -50px;
left: 0%;
}
.phase-one-background .sky-wave {
width: 1300px;
height: 542px;
top: -50px;
left: 25%;
opacity: 0.5;
}
.phase-two-background .sky-wave {
width: 1400px;
height: 542px;
top: 10px;
left: -25%;
-ms-transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
-webkit-transform: rotate(10deg);
-moz-transform: rotate(10deg);
-o-transform: rotate(10deg);
transform: rotate(10deg);
opacity: 0.5;
}
.phase-three-background .sky-wave {
width: 1300px;
height: 542px;
top: -50px;
left: 25%;
opacity: 0.5;
}
.phase-four-background .sky-wave {
width: 1400px;
height: 542px;
top: 10px;
left: -25%;
-ms-transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
-webkit-transform: rotate(10deg);
-moz-transform: rotate(10deg);
-o-transform: rotate(10deg);
transform: rotate(10deg);
opacity: 0.5;
}
.phase-five-background .sky-wave {
width: 1300px;
height: 542px;
top: -50px;
left: 25%;
opacity: 0.5;
}
.phase-six-background .sky-wave {
width: 1400px;
height: 542px;
top: 10px;
left: -25%;
-ms-transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
-webkit-transform: rotate(10deg);
-moz-transform: rotate(10deg);
-o-transform: rotate(10deg);
transform: rotate(10deg);
opacity: 0.5;
}
/* SKY WAVE Background Graphic Ends */
/* STAGE BACKGROUND and STAGE BACKGROUND GRAPHICAL ELEMENTS End */
/* STAGE and STAGE GRAPHICAL ELEMENTS Start [z-index 11-20] */
.stage {
width: 1200px;
height: 800px;
margin: 0px auto;
position: relative;
/*background: #C00;*/
z-index: 11;
/*background: rgb(0, 0, 0);
background: rgba(0, 0, 0, 0.6);*/
}
.stage h1 {
font-family: "UniversLTStd73BlackExtended", sans-serif !important;
font-size: 21px;
line-height: 27px;
color: #000;
margin: 0px 0px 0px 0px;
position: absolute;
top: 100px;
left: 60px;
}
.stage h1 span:last-child {
display: block;
font-family: "UniversLTStd47LightCondensed", sans-serif !important;
font-size: 21px;
line-height: 27px;
}
.stage h1.stage-one:before {
content:"1";
display: block;
width: 30px;
height: 30px;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
background: hsla(0, 75%, 45%, 1);
color: #FFF;
font-family: "UniversLTStd75Black", sans-serif !important;
font-size: 28px;
line-height: 28px;
position: absolute;
top: 0px;
left: -60px;
text-align: center;
padding: 5%;
/*border: 5px solid #617484;*/
}
.stage h1.stage-two:before {
content:"2";
display: block;
width: 30px;
height: 30px;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
background: hsla(0, 75%, 45%, 1);
color: #FFF;
font-family: "UniversLTStd75Black", sans-serif !important;
font-size: 28px;
line-height: 28px;
position: absolute;
top: 0px;
left: -60px;
text-align: center;
padding: 5%;
/*border: 5px solid #617484;*/
}
.stage h1.stage-three:before {
content:"3";
display: block;
width: 30px;
height: 30px;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
background: hsla(0, 75%, 45%, 1);
color: #FFF;
font-family: "UniversLTStd75Black", sans-serif !important;
font-size: 28px;
line-height: 28px;
position: absolute;
top: 0px;
left: -60px;
text-align: center;
padding: 5%;
/*border: 5px solid #617484;*/
}
.stage h1.stage-four:before {
content:"4";
display: block;
width: 30px;
height: 30px;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
background: hsla(0, 75%, 45%, 1);
color: #FFF;
font-family: "UniversLTStd75Black", sans-serif !important;
font-size: 28px;
line-height: 28px;
position: absolute;
top: 0px;
left: -60px;
text-align: center;
padding: 5%;
/*border: 5px solid #617484;*/
}
.stage h1.stage-five:before {
content:"5";
display: block;
width: 30px;
height: 30px;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
background: hsla(0, 75%, 45%, 1);
color: #FFF;
font-family: "UniversLTStd75Black", sans-serif !important;
font-size: 28px;
line-height: 28px;
position: absolute;
top: 0px;
left: -60px;
text-align: center;
padding: 5%;
/*border: 5px solid #617484;*/
}
.stage h1.stage-six:before {
content:"6";
display: block;
width: 30px;
height: 30px;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
background: hsla(0, 75%, 45%, 1);
color: #FFF;
font-family: "UniversLTStd75Black", sans-serif !important;
font-size: 28px;
line-height: 28px;
position: absolute;
top: 0px;
left: -60px;
text-align: center;
padding: 5%;
/*border: 5px solid #617484;*/
}
.maincontent {
/*font-family: "UniversLTStd55Roman", sans-serif !important;*/
font-family: "gotham_htfbook", sans-serif;
font-size: 13px;
line-height: 19px;
color: #FFF;
position: absolute;
width: 330px;
}
.maincontent h2 {
font-family: "UniversLTStd73BlackExtended", sans-serif !important;
font-size: 15px;
line-height: 21px;
padding-bottom: 10px;
}
.maincontent a {
display: inline-block;
background: #CC0000;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
color: #FFF;
padding: 10px 20px 10px 20px;
text-decoration: none;
margin: 20px auto;
position: relative;
font-size: 17px;
font-family: "UniversLTStd67BoldCondensed", sans-serif !important;
transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-webkit-animation-name: redPulse;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
}
.maincontent a:hover {
background: #950513;
}
.phase-one-stage .maincontent {
left: 0px;
top: 320px;
}
.phase-two-stage .maincontent {
right: 60px;
top: 350px;
}
.phase-three-stage .maincontent {
left: 0px;
top: 320px;
}
.phase-four-stage .maincontent {
right: 60px;
top: 350px;
}
.phase-five-stage .maincontent {
left: 0px;
top: 320px;
}
.phase-six-stage .maincontent {
right: 60px;
top: 350px;
}
/* Home Page Graphical Elements Start */
.logo-wrapper {
width: 544px;
height: 501px;
position: absolute;
top: 50%;
left: 50%;
margin-left: -272px;
margin-top: -320px;
z-index: 12;
display: none;
}
.logo {
background: url(../img/logo2.png) top center no-repeat;
display: block;
width: 544px;
height: 441px;
text-decortation: none;
}
.start {
display: block;
text-align: center;
background: #CC0000;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
color: #FFF;
padding: 10px 20px;
text-decoration: none;
margin: 20px auto;
position: relative;
width: 200px;
font-size: 22px;
font-family: "UniversLTStd67BoldCondensed", sans-serif !important;
transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-webkit-animation-name: redPulse;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
}
.start:hover {
background: #950513;
}
/* @-webkit-keyframes redPulse {
from { background-color: #CC0000; }
50% { background-color: #bc0101; }
to { background-color: #CC0000; }
} */
/* Home Page Graphical Elements End */
/* CALF HUTCH Starts */
.no-svg .calf-hutch {
width: 204px;
height: 66px;
position: absolute;
bottom: 35%;
left: 72%;
z-index: 12;
background: url(../img/calf-hutch.png) no-repeat top center;
}
.calf-hutch {
width: 234px;
height: 66px;
position: absolute;
bottom: 35%;
left: 72%;
z-index: 12;
background: url(../img/calf-hutch.svg) no-repeat top center;
background-repeat: no-repeat;
}
/* calf hutch marker */
.hutch-text-marker {
width: 15px;
height: 15px;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
border: 5px solid #B5151D;
background: #FFF;
position: absolute;
bottom: 100px;
right: 0;
left: 0;
margin: 0px auto;
-webkit-transition:width 300ms ease-in-out, height 300ms ease-in-out;
-moz-transition:width 300ms ease-in-out, height 300ms ease-in-out;
-o-transition:width 300ms ease-in-out, height 300ms ease-in-out;
transition:width 300ms ease-in-out, height 300ms ease-in-out;
}
.hutch-text-marker p {
display: none;
-webkit-transition: all 0.3s ease-in, 0.1s ease-out ;
-moz-transition: all 0.3s ease-in, 0.1s ease-out ;
-o-transition: all 0.3s ease-in, 0.1s ease-out ;
transition: all 0.3s ease-in, 0.1s ease-out ;
font-family: "gotham_htfbook", sans-serif;
font-size: 12px;
line-height: 18px;
height: 100%;
overflow: hidden;
}
.hutch-text-marker p span {
font-style: italic;
}
.hutch-text-marker:hover p {
margin: 10px;
-webkit-animation-name: fadeInParagraph;
-webkit-animation-duration: 1.5s;
animation-name: fadeInParagraph;
animation-duration: 1.5s;
}
.calf-hutch:hover .hutch-text-marker p {
margin: 10px;
-webkit-animation-name: fadeInParagraph;
-webkit-animation-duration: 1.5s;
animation-name: fadeInParagraph;
animation-duration: 1.5s;
}
.hutch-text-marker p a {
color: #666;
}
.hutch-text-marker p a:hover {
color: #666;
}
.hutch-text-marker:after {
content: "";
width: 0;
height: 0;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-top: 8px solid #B5151D;
position: absolute;
bottom: -10px;
right: 0;
left: 0;
margin: 0px auto;
}
.hutch-enlarge {
width: 200px;
height: 100px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-webkit-transition:width 300ms ease-in-out, height 300ms ease-in-out;
-moz-transition:width 300ms ease-in-out, height 300ms ease-in-out;
-o-transition:width 300ms ease-in-out, height 300ms ease-in-out;
transition:width 300ms ease-in-out, height 300ms ease-in-out;
}
/*.hutch-text-marker.hutch-enlarge p {
display: block;
}*/
/* calf hutch marker */
/* CALF HUTCH Ends */
/* CALF HUTCH Starts */
.no-svg .calf-hutch-fence {
width: 341px;
height: 88px;
position: absolute;
bottom: 25%;
left: 55%;
z-index: 12;
background: url(../img/calf-hutch-fence.png) no-repeat top center;
}
.calf-hutch-fence {
width: 331px;
height: 78px;
position: absolute;
bottom: 25%;
left: 55%;
z-index: 12;
background: url(../img/calf-hutch-fence.svg) no-repeat top center;
background-repeat: no-repeat;
background-size: contain;
}
/* calf hutch fence marker */
.fence-text-marker {
width: 15px;
height: 15px;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
border: 5px solid #B5151D;
background: #FFF;
position: absolute;
bottom: 110px;
right: 0;
left: 0;
margin: 0px auto;
-webkit-transition:width 300ms ease-in-out, height 300ms ease-in-out;
-moz-transition:width 300ms ease-in-out, height 300ms ease-in-out;
-o-transition:width 300ms ease-in-out, height 300ms ease-in-out;
transition:width 300ms ease-in-out, height 300ms ease-in-out;
}
.fence-text-marker p {
display: none;
-webkit-transition: all 0.3s ease-in, 0.1s ease-out ;
-moz-transition: all 0.3s ease-in, 0.1s ease-out ;
-o-transition: all 0.3s ease-in, 0.1s ease-out ;
transition: all 0.3s ease-in, 0.1s ease-out ;
font-family: "gotham_htfbook", sans-serif;
font-size: 12px;
line-height: 18px;
}
.fence-text-marker p span {
font-style: italic;
}
.fence-text-marker:hover p {
margin: 10px;
-webkit-animation-name: fadeInParagraph;
-webkit-animation-duration: 1.5s;
animation-name: fadeInParagraph;
animation-duration: 1.5s;
}
.calf-hutch-fence:hover .fence-text-marker p {
margin: 10px;
-webkit-animation-name: fadeInParagraph;
-webkit-animation-duration: 1.5s;
animation-name: fadeInParagraph;
animation-duration: 1.5s;
}
.fence-text-marker p a {
color: #666;
}
.fence-text-marker p a:hover {
color: #666;
}
.fence-text-marker:after {
content: "";
width: 0;
height: 0;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-top: 8px solid #B5151D;
position: absolute;
bottom: -10px;
right: 0;
left: 0;
margin: 0px auto;
}
.fence-enlarge {
width: 200px;
height: 80px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-webkit-transition:width 300ms ease-in-out, height 300ms ease-in-out;
-moz-transition:width 300ms ease-in-out, height 300ms ease-in-out;
-o-transition:width 300ms ease-in-out, height 300ms ease-in-out;
transition:width 300ms ease-in-out, height 300ms ease-in-out;
}
.fence-text-marker.fence-enlarge p {
display: block;
}
/* calf hutch fence marker */
/* AG-BAG Starts */
.ag-bag {
width: 321px;
height: 51px;
position: absolute;
bottom: 34%;
left: -5%;
z-index: 12;
background: url(../img/ag-bag.png) no-repeat top center;
background-repeat: no-repeat;
}
/* AG-BAG marker */
.ag-bag-text-marker {
width: 15px;
height: 15px;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
border: 5px solid #B5151D;
background: #FFF;
position: absolute;
bottom: 75px;
right: 0;
left: 0;
margin: 0px auto;
-webkit-transition:width 300ms ease-in-out, height 300ms ease-in-out;
-moz-transition:width 300ms ease-in-out, height 300ms ease-in-out;
-o-transition:width 300ms ease-in-out, height 300ms ease-in-out;
transition:width 300ms ease-in-out, height 300ms ease-in-out;
}
.ag-bag-text-marker p {
display: none;
-webkit-transition: all 0.3s ease-in, 0.1s ease-out ;
-moz-transition: all 0.3s ease-in, 0.1s ease-out ;
-o-transition: all 0.3s ease-in, 0.1s ease-out ;
transition: all 0.3s ease-in, 0.1s ease-out ;
font-family: "gotham_htfbook", sans-serif;
font-size: 12px;
line-height: 18px;
}
.ag-bag-text-marker p span {
font-style: italic;
}
.ag-bag-text-marker:hover p {
margin: 10px;
-webkit-animation-name: fadeInParagraph;
-webkit-animation-duration: 1.5s;
animation-name: fadeInParagraph;
animation-duration: 1.5s;
}
.ag-bag:hover .ag-bag-text-marker p {
margin: 10px;
-webkit-animation-name: fadeInParagraph;
-webkit-animation-duration: 1.5s;
animation-name: fadeInParagraph;
animation-duration: 1.5s;
}
.ag-bag-text-marker p a {
color: #666;
}
.ag-bag-text-marker p a:hover {
color: #666;
}
.ag-bag-text-marker:after {
content: "";
width: 0;
height: 0;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-top: 8px solid #B5151D;
position: absolute;
bottom: -10px;
right: 0;
left: 0;
margin: 0px auto;
}
.ag-bag-enlarge {
width: 200px;
height: 75px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-webkit-transition:width 300ms ease-in-out, height 300ms ease-in-out;
-moz-transition:width 300ms ease-in-out, height 300ms ease-in-out;
-o-transition:width 300ms ease-in-out, height 300ms ease-in-out;
transition:width 300ms ease-in-out, height 300ms ease-in-out;
}
.ag-bag-text-marker.ag-bag-enlarge p {
display: block;
}
/* AG-BAG marker */
/* AG-BAG Ends */
/* CALF (Phase 3) Starts */
.no-svg .calf {
width: 233px;
height: 80px;
position: absolute;
bottom: 40px;
left: 60%;
z-index: 13;
background: url(../img/calf.png) no-repeat top center;
}
.calf {
width: 233px;
height: 80px;
position: absolute;
bottom: 45px;
left: 61%;
z-index: 13;
background: url(../img/calf.svg) no-repeat top center;
}
/* Calf marker */
.calf-text-marker {
width: 15px;
height: 15px;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
border: 5px solid #B5151D;
background: #FFF;
position: absolute;
bottom: 100px;
right: 0;
left: 0;
margin: 0px auto;
-webkit-transition:width 300ms ease-in-out, height 300ms ease-in-out;
-moz-transition:width 300ms ease-in-out, height 300ms ease-in-out;
-o-transition:width 300ms ease-in-out, height 300ms ease-in-out;
transition:width 300ms ease-in-out, height 300ms ease-in-out;
}
.calf-text-marker p {
display: none;
-webkit-transition: all 0.3s ease-in, 0.1s ease-out ;
-moz-transition: all 0.3s ease-in, 0.1s ease-out ;
-o-transition: all 0.3s ease-in, 0.1s ease-out ;
transition: all 0.3s ease-in, 0.1s ease-out ;
font-family: "gotham_htfbook", sans-serif;
font-size: 12px;
line-height: 18px;
}
.calf-text-marker p span {
font-style: italic;
}
.calf-text-marker:hover p {
margin: 10px;
-webkit-animation-name: fadeInParagraph;
-webkit-animation-duration: 1.5s;
animation-name: fadeInParagraph;
animation-duration: 1.5s;
}
.calf:hover .calf-text-marker p {
margin: 10px;
-webkit-animation-name: fadeInParagraph;
-webkit-animation-duration: 1.5s;
animation-name: fadeInParagraph;
animation-duration: 1.5s;
}
.calf-text-marker p a {
color: #666;
}
.calf-text-marker p a:hover {
color: #666;
}
.calf-text-marker:after {
content: "";
width: 0;
height: 0;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-top: 8px solid #B5151D;
position: absolute;
bottom: -10px;
right: 0;
left: 0;
margin: 0px auto;
}
.calf-enlarge {
width: 200px;
height: 100px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-webkit-transition:width 300ms ease-in-out, height 300ms ease-in-out;
-moz-transition:width 300ms ease-in-out, height 300ms ease-in-out;
-o-transition:width 300ms ease-in-out, height 300ms ease-in-out;
transition:width 300ms ease-in-out, height 300ms ease-in-out;
}
.calf-text-marker.calf-enlarge p {
display: block;
}
/* calf marker */
/* CALF (Phase 3) Ends */
/* CALF (Phase 4) Starts */
.phase-four-stage .calf {
width: 233px;
height: 80px;
position: absolute;
bottom: 40px;
left: 55%;
z-index: 12;
background: url(../img/calf.png) no-repeat top center;
}
/* Calf marker */
.phase-four-stage .calf-text-marker {
width: 15px;
height: 15px;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
border: 5px solid #B5151D;
background: #FFF;
position: absolute;
bottom: 100px;
right: 0;
left: 0;
margin: 0px auto;
-webkit-transition:width 300ms ease-in-out, height 300ms ease-in-out;
-moz-transition:width 300ms ease-in-out, height 300ms ease-in-out;
-o-transition:width 300ms ease-in-out, height 300ms ease-in-out;
transition:width 300ms ease-in-out, height 300ms ease-in-out;
}
.phase-four-stage .calf-text-marker p {
display: none;
-webkit-transition: all 0.3s ease-in, 0.1s ease-out ;
-moz-transition: all 0.3s ease-in, 0.1s ease-out ;
-o-transition: all 0.3s ease-in, 0.1s ease-out ;
transition: all 0.3s ease-in, 0.1s ease-out ;
font-family: "gotham_htfbook", sans-serif;
font-size: 13px;
line-height: 19px;
}
.phase-four-stage .calf-text-marker p span {
font-style: italic;
}
.phase-four-stage .calf-text-marker:hover p {
margin: 10px;
-webkit-animation-name: fadeInParagraph;
-webkit-animation-duration: 1.5s;
animation-name: fadeInParagraph;
animation-duration: 1.5s;
}
.phase-four-stage .calf:hover .calf-text-marker p {
margin: 10px;
-webkit-animation-name: fadeInParagraph;
-webkit-animation-duration: 1.5s;
animation-name: fadeInParagraph;
animation-duration: 1.5s;
}
.phase-four-stage .calf-text-marker p a {
color: #666;
}
.phase-four-stage .calf-text-marker p a:hover {
color: #666;
}
.phase-four-stage .calf-text-marker:after {
content: "";
width: 0;
height: 0;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-top: 8px solid #B5151D;
position: absolute;
bottom: -10px;
right: 0;
left: 0;
margin: 0px auto;
}
.phase-four-stage .calf-enlarge {
width: 200px;
height: 100px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-webkit-transition:width 300ms ease-in-out, height 300ms ease-in-out;
-moz-transition:width 300ms ease-in-out, height 300ms ease-in-out;
-o-transition:width 300ms ease-in-out, height 300ms ease-in-out;
transition:width 300ms ease-in-out, height 300ms ease-in-out;
}
.phase-four-stage .calf-text-marker.calf-enlarge p {
display: block;
}
/* calf marker */
/* CALF (Phase 4) Ends */
/* VITAMIN BUCKET (Phase 6) starts */
.vitamin-bucket {
width: 215px ;
height: 114px;
position: absolute;
bottom: 35px;
left: 66%;
z-index: 12;
background: url(../img/vitamin-bucket.svg) no-repeat top center;
}
/* vitamin marker */
.vitamin-text-marker {
width: 15px;
height: 15px;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
border: 5px solid #B5151D;
background: #FFF;
position: absolute;
bottom: 125px;
right: 0;
left: 0;
margin: 0px auto;
-webkit-transition:width 300ms ease-in-out, height 300ms ease-in-out;
-moz-transition:width 300ms ease-in-out, height 300ms ease-in-out;
-o-transition:width 300ms ease-in-out, height 300ms ease-in-out;
transition:width 300ms ease-in-out, height 300ms ease-in-out;
}
.vitamin-text-marker p {
display: none;
-webkit-transition: all 0.3s ease-in, 0.1s ease-out ;
-moz-transition: all 0.3s ease-in, 0.1s ease-out ;
-o-transition: all 0.3s ease-in, 0.1s ease-out ;
transition: all 0.3s ease-in, 0.1s ease-out ;
font-family: "gotham_htfbook", sans-serif;
font-size: 12px;
line-height: 18px;
}
.vitamin-text-marker p span {
font-style: italic;
}
.vitamin-text-marker:hover p {
margin: 10px;
-webkit-animation-name: fadeInParagraph;
-webkit-animation-duration: 1.5s;
animation-name: fadeInParagraph;
animation-duration: 1.5s;
}
.vitamin-bucket:hover .vitamin-text-marker p {
margin: 10px;
-webkit-animation-name: fadeInParagraph;
-webkit-animation-duration: 1.5s;
animation-name: fadeInParagraph;
animation-duration: 1.5s;
}
.vitamin-text-marker p a {
color: #666;
}
.vitamin-text-marker p a:hover {
color: #666;
}
.vitamin-text-marker:after {
content: "";
width: 0;
height: 0;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-top: 8px solid #B5151D;
position: absolute;
bottom: -10px;
right: 0;
left: 0;
margin: 0px auto;
}
.vitamin-enlarge {
width: 200px;
height: 100px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-webkit-transition:width 300ms ease-in-out, height 300ms ease-in-out;
-moz-transition:width 300ms ease-in-out, height 300ms ease-in-out;
-o-transition:width 300ms ease-in-out, height 300ms ease-in-out;
transition:width 300ms ease-in-out, height 300ms ease-in-out;
}
.vitamin-text-marker.vitamin-enlarge p {
display: block;
}
/* vitamin marker */
/* VITAMIN BUCKET (Phase 6) ends */
/* MORE INFO Starts */
.more-info {
width: 81px;
height: 129px;
background: url(../img/more-info.png) no-repeat top center;
position: absolute;
display: block;
z-index: 12px;
right: 5%;
top: 80%;
}
/* MORE INFO Ends */
/* BARN BACKGROUND Starts */
.barn-bg {
width: 152px; /* 222px */
height: 101px; /* 171px */
position: absolute;
right: 8%;
top: 35%;
z-index: 12;
background: url(../img/barn-small.svg) no-repeat top center;
background-size: contain;
}
/* BARN BACKGROUND Ends */
/* BARN Starts */
.barn {
width: 240px;
height: 161px;
position: absolute;
z-index: 12;
background: url(../img/barn.svg) no-repeat top center;
background-size: contain;
}
.barn.left {
-ms-transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
}
.phase-one-stage .barn {
right: 15%;
top: 40%;
}
.phase-two-stage .barn {
right: 80%;
top: 40%;
}
.phase-three-stage .barn {
right: 4%;
top: 40%;
}
.phase-four-stage .barn {
right: 15%;
top: 40%;
}
.phase-five-stage .barn {
right: 15%;
top: 40%;
}
.phase-six-stage .barn {
right: 70%;
top: 40%;
}
/* barn marker */
.barn-text-marker {
width: 15px;
height: 15px;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
border: 5px solid #B5151D;
background: #FFF;
position: absolute;
bottom: 165px;
right: 0;
left: 0;
margin: 0px auto;
-webkit-transition:width 300ms ease-in-out, height 300ms ease-in-out;
-moz-transition:width 300ms ease-in-out, height 300ms ease-in-out;
-o-transition:width 300ms ease-in-out, height 300ms ease-in-out;
transition:width 300ms ease-in-out, height 300ms ease-in-out;
}
.barn-text-marker p {
display: none;
-webkit-transition: all 0.3s ease-in, 0.1s ease-out ;
-moz-transition: all 0.3s ease-in, 0.1s ease-out ;
-o-transition: all 0.3s ease-in, 0.1s ease-out ;
transition: all 0.3s ease-in, 0.1s ease-out ;
font-family: "gotham_htfbook", sans-serif;
font-size: 12px;
line-height: 18px;
}
.barn.left .barn-text-marker p {
-ms-transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
}
.barn-text-marker p span {
font-style: italic;
}
.barn-text-marker:hover p {
margin: 10px;
-webkit-animation-name: fadeInParagraph;
-webkit-animation-duration: 1.5s;
animation-name: fadeInParagraph;
animation-duration: 1.5s;
}
.barn:hover .barn-text-marker p {
margin: 10px;
-webkit-animation-name: fadeInParagraph;
-webkit-animation-duration: 1.5s;
animation-name: fadeInParagraph;
animation-duration: 1.5s;
}
.barn-text-marker p a {
color: #666;
}
.barn-text-marker p a:hover {
color: #666;
}
.barn-text-marker:after {
content: "";
width: 0;
height: 0;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-top: 8px solid #B5151D;
position: absolute;
bottom: -10px;
right: 0;
left: 0;
margin: 0px auto;
}
.barn-enlarge {
width: 200px;
height: 60px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-webkit-transition:width 300ms ease-in-out, height 300ms ease-in-out;
-moz-transition:width 300ms ease-in-out, height 300ms ease-in-out;
-o-transition:width 300ms ease-in-out, height 300ms ease-in-out;
transition:width 300ms ease-in-out, height 300ms ease-in-out;
}
.barn-text-marker.barn-enlarge p {
display: block;
}
/* barn marker */
/* BARN Ends */
/* fadeInParagraph animation starts */
@-webkit-keyframes fadeInParagraph {
0% { opacity: 0; }
10% { opacity: 0; }
20% { opacity: 0; }
30% { opacity: 0; }
40% { opacity: 0; }
50% { opacity: 0; }
60% { opacity: 0.3; }
70% { opacity: 0.5; }
80% { opacity: 0.7; }
90% { opacity: 0.9; }
100% { opacity: 1; }
}
@keyframes fadeInParagraph {
0% { opacity: 0; }
10% { opacity: 0; }
20% { opacity: 0; }
30% { opacity: 0; }
40% { opacity: 0; }
50% { opacity: 0; }
60% { opacity: 0.3; }
70% { opacity: 0.5; }
80% { opacity: 0.7; }
90% { opacity: 0.9; }
100% { opacity: 1; }
}
/* fadeInParagraph animation ends */
/* cow graphics starts */
.no-svg .cow-fpo {
display: block;
width: 313px;
height: 189px;
background: url(../img/cow.png);
position: absolute;
z-index: 12;
}
.cow-fpo {
display: block;
width: 312px;
height: 187px;
background: url(../img/cow.svg);
background-size: contain;
background-repeat: no-repeat;
position: absolute;
z-index: 12;
}
.phase-one-stage .cow-fpo, .phase-one-stage .no-svg .cow-fpo {
bottom: 40px;
left: 25%;
}
.phase-two-stage .cow-fpo, .phase-two-stage .no-svg .cow-fpo {
bottom: 40px;
left: 15%;
}
.phase-three-stage .cow-fpo, .phase-three-stage .no-svg .cow-fpo {
bottom: 40px;
left: 25%;
}
.phase-four-stage .cow-fpo, .phase-four-stage .no-svg .cow-fpo {
bottom: 40px;
left: 15%;
}
.phase-five-stage .cow-fpo, .phase-five-stage .no-svg .cow-fpo {
bottom: 40px;
left: 25%;
}
.phase-six-stage .cow-fpo, .phase-six-stage .no-svg .cow-fpo {
bottom: 40px;
left: 15%;
}
/* cow text marker */
.text-marker-cow {
width: 15px;
height: 15px;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
border: 5px solid #B5151D;
background: #FFF;
position: absolute;
bottom: 200px;
right: 0;
left: 0;
margin: 0px auto;
-webkit-transition:width 300ms ease-in-out, height 300ms ease-in-out;
-moz-transition:width 300ms ease-in-out, height 300ms ease-in-out;
-o-transition:width 300ms ease-in-out, height 300ms ease-in-out;
transition:width 300ms ease-in-out, height 300ms ease-in-out;
}
.text-marker-cow p {
display: none;
-webkit-transition: all 0.5s ease-in, 0.1s ease-out ;
-moz-transition: all 0.5s ease-in, 0.1s ease-out ;
-o-transition: all 0.5s ease-in, 0.1s ease-out ;
transition: all 0.5s ease-in, 0.1s ease-out ;
font-family: "gotham_htfbook", sans-serif;
font-size: 12px;
line-height: 18px;
}
.text-marker-cow p {
display: none;
}
.text-marker-cow:hover p {
margin: 10px;
-webkit-animation-name: fadeInParagraph;
-webkit-animation-duration: 1.5s;
animation-name: fadeInParagraph;
animation-duration: 1.5s;
}
.cow-fpo:hover .text-marker-cow p {
margin: 10px;
-webkit-animation-name: fadeInParagraph;
-webkit-animation-duration: 1.5s;
animation-name: fadeInParagraph;
animation-duration: 1.5s;
}
.text-marker-cow:after {
content: "";
width: 0;
height: 0;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-top: 8px solid #B5151D;
position: absolute;
bottom: -10px;
right: 0;
left: 0;
margin: 0px auto;
}
.enlarge-cow {
width: 200px;
height: 100px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-webkit-transition:width 300ms ease-in-out, height 300ms ease-in-out;
-moz-transition:width 300ms ease-in-out, height 300ms ease-in-out;
-o-transition:width 300ms ease-in-out, height 300ms ease-in-out;
transition:width 300ms ease-in-out, height 300ms ease-in-out;
}
.text-marker-cow.enlarge-cow p {
display: block;
}
/* cow text marker */
/* cow graphics ends */
/* main cow graphics starts */
.no-svg .main-cow {
display: block;
width: 313px;
height: 189px;
background: url(../img/cow-black-body.png);
position: absolute;
z-index: 12;
}
.main-cow {
display: block;
width: 262px;
height: 187px;
background: url(../img/cow-black-body.svg);
background-size: contain;
background-repeat: no-repeat;
position: absolute;
z-index: 13;
}
.no-svg .main-cow-head {
display: block;
background: url(../img/cow-black-head.png);
background-size: contain;
background-repeat: no-repeat;
z-index: 13;
width: 163px;
height: 89px;
position: absolute;
top: 0px;
right: -50px;
}
.main-cow-head {
display: block;
background: url(../img/cow-black-head.svg);
background-size: contain;
background-repeat: no-repeat;
z-index: 12;
width: 163px;
height: 89px;
position: absolute;
top: 0px;
right: -50px;
}
.phase-one-stage .main-cow {
bottom: 40px;
left: 25%;
}
.phase-two-stage .main-cow {
bottom: 40px;
left: 15%;
}
.phase-three-stage .main-cow {
bottom: 40px;
left: 25%;
}
.phase-four-stage .main-cow {
bottom: 40px;
left: 10%;
}
.phase-five-stage .main-cow {
bottom: 40px;
left: 23%;
}
.phase-six-stage .main-cow {
bottom: 40px;
left: 10%;
}
/* cow text marker */
.text-marker-main-cow {
width: 15px;
height: 15px;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
border: 5px solid #B5151D;
background: #FFF;
position: absolute;
bottom: 200px;
right: 0;
left: 0;
margin: 0px auto;
-webkit-transition:width 300ms ease-in-out, height 300ms ease-in-out;
-moz-transition:width 300ms ease-in-out, height 300ms ease-in-out;
-o-transition:width 300ms ease-in-out, height 300ms ease-in-out;
transition:width 300ms ease-in-out, height 300ms ease-in-out;
}
.text-marker-main-cow p {
display: none;
-webkit-transition: all 0.5s ease-in, 0.1s ease-out ;
-moz-transition: all 0.5s ease-in, 0.1s ease-out ;
-o-transition: all 0.5s ease-in, 0.1s ease-out ;
transition: all 0.5s ease-in, 0.1s ease-out ;
font-family: "gotham_htfbook", sans-serif;
font-size: 12px;
line-height: 18px;
height: 100%;
overflow: hidden;
}
.text-marker-main-cow p {
/* display: none; */
}
.text-marker-main-cow:hover p {
margin: 10px;
-webkit-animation-name: fadeInParagraph;
-webkit-animation-duration: 1.5s;
animation-name: fadeInParagraph;
animation-duration: 1.5s;
}
.main-cow:hover .text-marker-main-cow p {
margin: 10px;
-webkit-animation-name: fadeInParagraph;
-webkit-animation-duration: 1.5s;
animation-name: fadeInParagraph;
animation-duration: 1.5s;
}
.text-marker-main-cow:after {
content: "";
width: 0;
height: 0;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-top: 8px solid #B5151D;
position: absolute;
bottom: -10px;
right: 0;
left: 0;
margin: 0px auto;
}
.enlarge-main-cow {
width: 200px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-webkit-transition:width 300ms ease-in-out, height 300ms ease-in-out;
-moz-transition:width 300ms ease-in-out, height 300ms ease-in-out;
-o-transition:width 300ms ease-in-out, height 300ms ease-in-out;
transition:width 300ms ease-in-out, height 300ms ease-in-out;
}
.phase-one-stage .enlarge-main-cow {
height: 90px;
}
.phase-two-stage .enlarge-main-cow {
height: 90px;
}
.phase-three-stage .enlarge-main-cow {
height: 90px;
}
.phase-four-stage .enlarge-main-cow {
height: 100px;
}
.phase-five-stage .enlarge-main-cow {
height: 80px;
}
.phase-six-stage .enlarge-main-cow {
height: 90px;
}
.text-marker-main-cow.enlarge-main-cow p {
display: block;
}
/* cow text marker */
/* main cow graphics ends */
/* cows grazing starts */
.cows-grazing {
position: absolute;
}
.landing-page-stage .cows-grazing {
top: 54%;
left: 8%;
width: 200px;
height: 200px;
}
.phase-one-stage .cows-grazing {
top: 54%;
left: 57%;
width: 230px;
height: 200px;
}
.cow-black {
display: block;
background: url(../img/cow-black-body.svg);
background-size: contain;
background-repeat: no-repeat;
z-index: 12;
width: 51px;
height: 36px;
position: absolute;
top: 35px;
left: 35px;
}
.cow-head-black {
display: block;
background: url(../img/cow-black-head.svg);
background-size: contain;
background-repeat: no-repeat;
z-index: 12;
width: 32px;
height: 18px;
position: absolute;
top: 0px;
right: -10px;
}
.cow-brown {
display: block;
background: url(../img/cow-brown-body.svg);
background-size: contain;
background-repeat: no-repeat;
z-index: 12;
width: 51px;
height: 36px;
position: absolute;
top: 85px;
left: 130px;
-ms-transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
}
.cow-head-brown {
display: block;
background: url(../img/cow-brown-head.svg);
background-size: contain;
background-repeat: no-repeat;
z-index: 12;
width: 32px;
height: 18px;
position: absolute;
top: 0px;
right: -10px;
}
.cow-black-two {
display: block;
background: url(../img/cow-black-body.svg);
background-size: contain;
background-repeat: no-repeat;
z-index: 12;
width: 51px;
height: 36px;
position: absolute;
top: 135px;
left: 35px;
}
.cow-head-black-two {
display: block;
background: url(../img/cow-black-head.svg);
background-size: contain;
background-repeat: no-repeat;
z-index: 12;
width: 32px;
height: 18px;
position: absolute;
top: 0px;
right: -10px;
}
/* cow grazing text marker */
.text-marker-grazing {
width: 15px;
height: 15px;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
border: 5px solid #B5151D;
background: #FFF;
position: absolute;
bottom: 200px;
right: 0;
left: 0;
margin: 0px auto;
-webkit-transition:width 300ms ease-in-out, height 300ms ease-in-out;
-moz-transition:width 300ms ease-in-out, height 300ms ease-in-out;
-o-transition:width 300ms ease-in-out, height 300ms ease-in-out;
transition:width 300ms ease-in-out, height 300ms ease-in-out;
}
.text-marker-grazing p {
display: none;
-webkit-transition: all 0.5s ease-in, 0.1s ease-out ;
-moz-transition: all 0.5s ease-in, 0.1s ease-out ;
-o-transition: all 0.5s ease-in, 0.1s ease-out ;
transition: all 0.5s ease-in, 0.1s ease-out ;
font-family: "gotham_htfbook", sans-serif;
font-size: 12px;
line-height: 18px;
}
.text-marker-grazing p {
display: none;
}
.text-marker-grazing:hover p {
margin: 10px;
-webkit-animation-name: fadeInParagraph;
-webkit-animation-duration: 1.5s;
animation-name: fadeInParagraph;
animation-duration: 1.5s;
}
.cows-grazing:hover .text-marker-grazing p {
margin: 10px;
-webkit-animation-name: fadeInParagraph;
-webkit-animation-duration: 1.5s;
animation-name: fadeInParagraph;
animation-duration: 1.5s;
}
.text-marker-grazing:after {
content: "";
width: 0;
height: 0;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-top: 8px solid #B5151D;
position: absolute;
bottom: -10px;
right: 0;
left: 0;
margin: 0px auto;
}
.enlarge-grazing {
width: 200px;
height: 75px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-webkit-transition:width 300ms ease-in-out, height 300ms ease-in-out;
-moz-transition:width 300ms ease-in-out, height 300ms ease-in-out;
-o-transition:width 300ms ease-in-out, height 300ms ease-in-out;
transition:width 300ms ease-in-out, height 300ms ease-in-out;
}
.text-marker-grazing.enlarge-grazing p {
display: block;
}
/* cow grazing text marker */
/* cows grazing ends */
.cow-small {
display: block;
background: url(../img/cow.svg);
background-size: contain;
background-repeat: no-repeat;
position: absolute;
z-index: 12;
}
.landing-page-stage .cow-small.top {
bottom: 38%;
left: 8%;
width: 60px; /* 312px */
height: 36px; /* 187px */
}
.phase-one-stage .cow-small.top {
bottom: 35%;
left: 58%;
width: 142px; /* 312px */
height: 27px; /* 187px */
}
.phase-three-stage .cow-small.top {
bottom: 35%;
left: 58%;
width: 142px; /* 312px */
height: 27px; /* 187px */
}
.landing-page-stage .cow-small.bottom {
bottom: 27%;
left: 3%;
width: 162px; /* 312px */
height: 37px; /* 187px */
}
.phase-one-stage .cow-small.bottom {
bottom: 30%;
left: 53%;
width: 147px; /* 312px */
height: 31px; /* 187px */
}
.phase-three-stage .cow-small.bottom {
bottom: 30%;
left: 53%;
width: 147px; /* 312px */
height: 31px; /* 187px */
}
.cow-brown-small {
display: block;
background: url(../img/cow-brown.svg);
background-size: contain;
background-repeat: no-repeat;
position: absolute;
bottom: 30%;
left: 9%;
z-index: 12;
-ms-transform: rotateY(180deg); /* IE 9 */
-webkit-transform: rotateY(180deg); /* Chrome, Safari, Opera */
transform: rotateY(180deg);
}
.landing-page-stage .cow-brown-small.middle {
bottom: 27%;
left: 3%;
width: 162px; /* 312px */
height: 37px; /* 187px */
}
.phase-one-stage .cow-brown-small.middle {
bottom: 25%;
left: 54%;
width: 147px; /* 312px */
height: 31px; /* 187px */
}
.phase-three-stage .cow-brown-small.middle {
bottom: 25%;
left: 54%;
width: 147px; /* 312px */
height: 31px; /* 187px */
}
/* cow graphics */
/*.cow-fpo:hover {
-webkit-transform: scale(1.0125);
-moz-transform: scale(1.0125);
-o-transform: scale(1.0125);
transform: scale(1.0125);
-webkit-transition: all 300ms ease-in-out;
-moz-transition: all 300ms ease-in-out;
-o-transition: all 300ms ease-in-out;
transition: all 300ms ease-in-out;
}*/
/* FEED LARGE Starts */
.feed-large {
display: block;
width: 212px;
height: 87px;
position: absolute;
background: url(../img/feed.png);
z-index: 13;
}
.phase-one-stage .feed-large {
left: 46%;
bottom: 6%;
}
.phase-two-stage .feed-large {
left: 36%;
bottom: 6%;
}
.phase-three-stage .feed-large {
left: 47%;
bottom: 6%;
}
.phase-four-stage .feed-large {
left: 31%;
bottom: 6%;
}
.phase-five-stage .feed-large {
left: 45%;
bottom: 6%;
}
.phase-six-stage .feed-large {
left: 32%;
bottom: 6%;
}
/* feed text marker */
.text-marker {
width: 15px;
height: 15px;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
border: 5px solid #B5151D;
background: #FFF;
position: absolute;
bottom: 100px;
right: 0;
left: 0;
margin: 0px auto;
-webkit-transition:width 300ms ease-in-out, height 300ms ease-in-out;
-moz-transition:width 300ms ease-in-out, height 300ms ease-in-out;
-o-transition:width 300ms ease-in-out, height 300ms ease-in-out;
transition:width 300ms ease-in-out, height 300ms ease-in-out;
}
.text-marker p {
display: none;
-webkit-transition: all 0.3s ease-in, 0.1s ease-out ;
-moz-transition: all 0.3s ease-in, 0.1s ease-out ;
-o-transition: all 0.3s ease-in, 0.1s ease-out ;
transition: all 0.3s ease-in, 0.1s ease-out ;
font-family: "gotham_htfbook", sans-serif;
font-size: 12px;
line-height: 18px;
}
.text-marker p span {
font-style: italic;
}
.text-marker:hover p {
margin: 10px;
-webkit-animation-name: fadeInParagraph;
-webkit-animation-duration: 1.5s;
animation-name: fadeInParagraph;
animation-duration: 1.5s;
}
.feed-large:hover .text-marker p {
margin: 10px;
-webkit-animation-name: fadeInParagraph;
-webkit-animation-duration: 1.5s;
animation-name: fadeInParagraph;
animation-duration: 1.5s;
}
.text-marker p a {
color: #666;
}
.text-marker p a:hover {
color: #666;
}
.text-marker:after {
content: "";
width: 0;
height: 0;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-top: 8px solid #B5151D;
position: absolute;
bottom: -10px;
right: 0;
left: 0;
margin: 0px auto;
}
.enlarge {
width: 200px;
height: 100px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-webkit-transition:width 300ms ease-in-out, height 300ms ease-in-out;
-moz-transition:width 300ms ease-in-out, height 300ms ease-in-out;
-o-transition:width 300ms ease-in-out, height 300ms ease-in-out;
transition:width 300ms ease-in-out, height 300ms ease-in-out;
}
.phase-one-stage .enlarge {
height: 100px;
}
.phase-two-stage .enlarge {
height: 90px;
}
.phase-three-stage .enlarge {
height: 60px;
}
.phase-four-stage .enlarge {
height: 90px;
}
.phase-five-stage .enlarge {
height: 90px;
}
.phase-six-stage .enlarge {
height: 60px;
}
.text-marker.enlarge p {
display: block;
}
/* feed text marker */
/*.feed-large:hover {
-webkit-transform: scale(1.0125);
-moz-transform: scale(1.0125);
-o-transform: scale(1.0125);
transform: scale(1.0125);
-webkit-transition: all 300ms ease-in-out;
-moz-transition: all 300ms ease-in-out;
-o-transition: all 300ms ease-in-out;
transition: all 300ms ease-in-out;
}*/
/* FEED LARGE Ends */
.feed-small {
display: block;
width: 212px;
height: 87px;
position: absolute;
left: 50%;
top: 10%;
background: url(../img/feed.png);
-webkit-transform: scale(.50);
-moz-transform: scale(.50);
-o-transform: scale(.50);
transform: scale(.50);
z-index: 12;
}
/* CLOUD LARGE graphics start */
.cloud-large {
display: block;
width: 250px;
height: 108px;
position: absolute;
z-index: 3;
background: url(../img/cloud.png);
background-size: contain;
background-repeat: no-repeat;
/*-webkit-animation: movecloudsLarge 120s linear infinite;
-moz-animation: moveclouds Large 120s linear infinite;
-o-animation: movecloudsLarge 120s linear infinite;*/
}
@-webkit-keyframes movecloudsLarge {
0% {margin-left: 800px;}
100% {margin-left: -800px;}
}
@-moz-keyframes movecloudsLarge {
0% {margin-left: 800px;}
100% {margin-left: -800px;}
}
@-o-keyframes movecloudsLarge {
0% {margin-left: 800px;}
100% {margin-left: -800px;}
}
.landing-page-stage .cloud-large {
right: 26%;
top: 20%;
}
.phase-one-stage .cloud-large {
right: 20%;
top: 20%;
}
.phase-two-stage .cloud-large {
right: 60%;
top: 20%;
}
.phase-three-stage .cloud-large {
right: 20%;
top: 20%;
}
.phase-four-stage .cloud-large {
right: 60%;
top: 20%;
}
.phase-five-stage .cloud-large {
right: 20%;
top: 20%;
}
.phase-six-stage .cloud-large {
right: 60%;
top: 20%;
}
/* CLOUD LARGE graphics end */
/* CLOUD SMALL graphics start */
.cloud-small {
display: block;
background: url(../img/cloud.png);
width: 250px;
height: 108px;
position: absolute;
right: 80%;
top: 20%;
-webkit-transform: scale(.50);
-moz-transform: scale(.50);
-o-transform: scale(.50);
transform: scale(.50);
z-index: 11;
}
.cloud-small-two {
display: block;
background: url(../img/cloud.png);
width: 250px;
height: 108px;
position: absolute;
-webkit-transform: scale(.50);
-moz-transform: scale(.50);
-o-transform: scale(.50);
transform: scale(.50);
z-index: 11;
top: 17%;
/*-webkit-animation: moveclouds 120s linear infinite;
-moz-animation: moveclouds 120s linear infinite;
-o-animation: moveclouds 120s linear infinite;*/
}
@-webkit-keyframes moveclouds {
0% {margin-left: 1600px;}
100% {margin-left: -1600px;}
}
@-moz-keyframes moveclouds {
0% {margin-left: 1600px;}
100% {margin-left: -1600px;}
}
@-o-keyframes moveclouds {
0% {margin-left: 1600px;}
100% {margin-left: -1600px;}
}
.landing-page-stage .cloud-small {
right: 56%;
top: 20%;
}
.phase-two-stage .cloud-small {
right: 12%;
top: 20%;
}
.phase-three-stage .cloud-small {
right: 80%;
top: 20%;
}
.phase-four-stage .cloud-small {
right: 12%;
top: 20%;
}
.phase-five-stage .cloud-small {
right: 80%;
top: 20%;
}
.phase-six-stage .cloud-small {
right: 12%;
top: 20%;
}
/* CLOUD SMALL graphics end */
/* COMMODITY SHED graphics start */
.commodity-shed {
display: block;
width: 297px;
height: 186px;
position: absolute;
background: url(../img/commodity-shed2.svg);
z-index: 11;
right: 10%;
top: 38%;
}
/* Commodity shed text marker */
.text-marker-commodity {
width: 15px;
height: 15px;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
border: 5px solid #B5151D;
background: #FFF;
position: absolute;
bottom: 200px;
right: 0;
left: 0;
margin: 0px auto;
-webkit-transition:width 300ms ease-in-out, height 300ms ease-in-out;
-moz-transition:width 300ms ease-in-out, height 300ms ease-in-out;
-o-transition:width 300ms ease-in-out, height 300ms ease-in-out;
transition:width 300ms ease-in-out, height 300ms ease-in-out;
}
.text-marker-commodity p {
display: none;
-webkit-transition: all 0.5s ease-in, 0.1s ease-out ;
-moz-transition: all 0.5s ease-in, 0.1s ease-out ;
-o-transition: all 0.5s ease-in, 0.1s ease-out ;
transition: all 0.5s ease-in, 0.1s ease-out ;
font-family: "gotham_htfbook", sans-serif;
font-size: 12px;
line-height: 18px;
}
.text-marker-commodity p {
display: none;
}
.text-marker-commodity:hover p {
margin: 10px;
-webkit-animation-name: fadeInParagraph;
-webkit-animation-duration: 1.5s;
animation-name: fadeInParagraph;
animation-duration: 1.5s;
}
.commodity-shed:hover .text-marker-commodity p {
margin: 10px;
-webkit-animation-name: fadeInParagraph;
-webkit-animation-duration: 1.5s;
animation-name: fadeInParagraph;
animation-duration: 1.5s;
}
.text-marker-commodity:after {
content: "";
width: 0;
height: 0;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-top: 8px solid #B5151D;
position: absolute;
bottom: -10px;
right: 0;
left: 0;
margin: 0px auto;
}
.enlarge-commodity {
width: 200px;
height: 100px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-webkit-transition:width 300ms ease-in-out, height 300ms ease-in-out;
-moz-transition:width 300ms ease-in-out, height 300ms ease-in-out;
-o-transition:width 300ms ease-in-out, height 300ms ease-in-out;
transition:width 300ms ease-in-out, height 300ms ease-in-out;
}
.text-marker-commodity.enlarge-commodity p {
display: block;
}
/* Commodity shed text marker */
/* COMMODITY SHED graphics end */
/* TRENCH SILO graphics start */
.trench-silo {
display: block;
width: 284px;
height: 105px;
position: absolute;
background: url(../img/trench-silo-final2.png) no-repeat;
z-index: 11;
right: 77%;
top: 54%;
-ms-transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
}
.text-marker-trench {
width: 15px;
height: 15px;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
border: 5px solid #B5151D;
background: #FFF;
position: absolute;
bottom: 150px;
right: 0;
left: 0;
margin: 0px auto;
-webkit-transition:width 300ms ease-in-out, height 300ms ease-in-out;
-moz-transition:width 300ms ease-in-out, height 300ms ease-in-out;
-o-transition:width 300ms ease-in-out, height 300ms ease-in-out;
transition:width 300ms ease-in-out, height 300ms ease-in-out;
}
.text-marker-trench p {
display: none;
-webkit-transition: all 0.5s ease-in, 0.1s ease-out ;
-moz-transition: all 0.5s ease-in, 0.1s ease-out ;
-o-transition: all 0.5s ease-in, 0.1s ease-out ;
transition: all 0.5s ease-in, 0.1s ease-out ;
font-family: "gotham_htfbook", sans-serif;
font-size: 12px;
line-height: 18px;
-ms-transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
}
.text-marker-trench p {
display: none;
}
.text-marker-trench:hover p {
margin: 10px;
-webkit-animation-name: fadeInParagraph;
-webkit-animation-duration: 1.5s;
animation-name: fadeInParagraph;
animation-duration: 1.5s;
}
.trench-silo:hover .text-marker-trench p {
margin: 10px;
-webkit-animation-name: fadeInParagraph;
-webkit-animation-duration: 1.5s;
animation-name: fadeInParagraph;
animation-duration: 1.5s;
}
.text-marker-trench:after {
content: "";
width: 0;
height: 0;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-top: 8px solid #B5151D;
position: absolute;
bottom: -10px;
right: 0;
left: 0;
margin: 0px auto;
}
.enlarge-trench {
width: 200px;
height: 80px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-webkit-transition:width 300ms ease-in-out, height 300ms ease-in-out;
-moz-transition:width 300ms ease-in-out, height 300ms ease-in-out;
-o-transition:width 300ms ease-in-out, height 300ms ease-in-out;
transition:width 300ms ease-in-out, height 300ms ease-in-out;
}
.text-marker-trench.enlarge-trench p {
display: block;
}
/* TRENCH SILO graphics end */
/* MILK CAN graphics start */
.milk-can-wrapper {
position: absolute;
display: block;
width: 230px;
height: 130px;
}
.phase-four-stage .milk-can-wrapper {
bottom: 40px;
left: 50%;
}
.phase-five-stage .milk-can-wrapper {
bottom: 40px;
left: 64%;
}
.phase-six-stage .milk-can-wrapper {
bottom: 40px;
left: 48%;
}
.milk-can {
display: block;
position: absolute;
background: url(../img/milk-can.svg);
z-index: 11;
background-repeat: no-repeat;
}
.milk-can.one {
bottom: 0px;
left: 80px;
width: 69px;
height: 130px;
background-repeat: no-repeat;
}
.milk-can.two {
bottom: 0px;
left: 45px;
width: 138px;
height: 130px;
background-repeat: repeat-x;
}
.milk-can.three {
bottom: 0px;
left: 15px;
width: 207px;
height: 130px;
background-repeat: repeat-x;
}
.text-marker-milk {
width: 15px;
height: 15px;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
border: 5px solid #B5151D;
background: #FFF;
position: absolute;
bottom: 160px;
right: 0;
left: 0;
margin: 0px auto;
-webkit-transition:width 300ms ease-in-out, height 300ms ease-in-out;
-moz-transition:width 300ms ease-in-out, height 300ms ease-in-out;
-o-transition:width 300ms ease-in-out, height 300ms ease-in-out;
transition:width 300ms ease-in-out, height 300ms ease-in-out;
z-index: 100;
}
.text-marker-milk p {
display: none;
-webkit-transition: all 0.5s ease-in, 0.1s ease-out ;
-moz-transition: all 0.5s ease-in, 0.1s ease-out ;
-o-transition: all 0.5s ease-in, 0.1s ease-out ;
transition: all 0.5s ease-in, 0.1s ease-out ;
font-family: "gotham_htfbook", sans-serif;
font-size: 12px;
line-height: 18px;
}
.text-marker-milk p {
display: none;
}
.text-marker-milk:hover p {
margin: 10px;
-webkit-animation-name: fadeInParagraph;
-webkit-animation-duration: 1.5s;
animation-name: fadeInParagraph;
animation-duration: 1.5s;
}
.milk-can-wrapper:hover .text-marker-milk p {
margin: 10px;
-webkit-animation-name: fadeInParagraph;
-webkit-animation-duration: 1.5s;
animation-name: fadeInParagraph;
animation-duration: 1.5s;
}
.text-marker-milk:after {
content: "";
width: 0;
height: 0;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-top: 8px solid #B5151D;
position: absolute;
bottom: -10px;
right: 0;
left: 0;
margin: 0px auto;
}
.enlarge-milk {
width: 200px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-webkit-transition:width 300ms ease-in-out, height 300ms ease-in-out;
-moz-transition:width 300ms ease-in-out, height 300ms ease-in-out;
-o-transition:width 300ms ease-in-out, height 300ms ease-in-out;
transition:width 300ms ease-in-out, height 300ms ease-in-out;
}
.phase-four-stage .enlarge-milk {
height: 75px;
}
.phase-five-stage .enlarge-milk {
height: 60px;
}
.phase-six-stage .enlarge-milk {
height: 50px;
}
.text-marker-milk.enlarge-milk p {
display: block;
}
/* MILK CAN graphics end */
.tree-small {
display: block;
width: 109px;
height: 158px;
position: absolute;
right: 20%;
top: 50%;
background: url(../img/tree.png);
-webkit-transform: scale(.50);
-moz-transform: scale(.50);
-o-transform: scale(.50);
transform: scale(.50);
}
.phase-one-stage .tree-small {
right: 15%;
top: 42%;
}
.phase-three-stage .tree-small {
right: 5%;
top: 42%;
}
.phase-four-stage .tree-small {
right: 81%;
top: 43%;
}
.phase-five-stage .tree-small {
right: 16%;
top: 40%;
}
.phase-six-stage .tree-small {
right: 20%;
top: 45%;
}
/* TREE LARGE graphics start */
.tree-large {
display: block;
width: 109px;
height: 158px;
position: absolute;
background: url(../img/tree.png);
z-index: 3;
}
.phase-one-stage .tree-large {
right: 10%;
top: 40%;
}
.phase-two-stage .tree-large {
right: 72%;
top: 39%;
}
.phase-three-stage .tree-large {
right: 22%;
top: 39%;
}
.phase-four-stage .tree-large {
right: 85%;
top: 40%;
}
.phase-five-stage .tree-large {
right: 11%;
top: 39%;
}
.phase-six-stage .tree-large {
right: 15%;
top: 40%;
}
/* TREE LARGE graphics end */
/* STAGE and STAGE GRAPHICAL ELEMENTS End [z-index 11-20] */
/* STAGE BACKGROUND and STAGE BACKGROUND GRAPHICAL ELEMENTS Cont. [z-index 0-10] */
.grass-footer-wrapper {
height: 150px;
width: 100%;
min-width: 1200px;
background: #759E4A;
position:absolute;
bottom: 0px;
left: 0px;
z-index: 2;
margin: 0;
}
.grass-footer-wrapper:before {
content:"";
display: block;
position: absolute;
top: 0px;
left: 0px;
width: 100%;
min-width: 1200px;
height: 100px;
margin: -50px auto 0px;
background: url(../img/grass.png) repeat-x top left;
z-index: 2;
}
.grass-footer-wrapper:after {
content:"";
display: block;
position: absolute;
bottom: 0px;
left: 0px;
width: 100%;
min-width: 1200px;
height: 31px;
margin: 0px 0px -3px 0px;
background: url(../img/grass-border.png) repeat-x top left;
z-index: 2;
}
.grass-footer-wrapper h1.introduction {
width: 550px;
margin: 20px auto;
font-family: "UniversLTStd47LightCondensed", sans-serif !important;
font-size: 30px;
line-height: 36px;
color: #FFF;
text-align: center;
}
/* STAGE BACKGROUND and STAGE BACKGROUND GRAPHICAL ELEMENTS Cont. End */
/*.tech-info {
width: 1160px;
height: 500px;
background: rgb(0, 0, 0);
background: rgba(0, 0, 0, 0.5);
position: absolute;
top: 100px;
z-index: 50;
left: 0;
right: 0;
margin: 0 auto;
display: none;
padding: 20px;
color: #FFFFFF;
-webkit-border-bottom-right-radius: 5px;
-moz-border-radius-bottomright: 5px;
border-bottom-right-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-moz-border-radius-bottomleft: 5px;
border-bottom-left-radius: 5px;
}
.tech-info .leftcol, .tech-info .centercol, .tech-info .rightcol {
width: 373px;
float: left;
background: #666;
}
.tech-info .leftcol, .tech-info .centercol {
margin-right: 20px;
}*/
table {
margin: 0;
padding: 0;
}
table th,
table td {
padding: 10px 20px;
text-align: left;
border-bottom: 1px solid #ccc;
}
table th {
border-width: 2px;
}
table td {
color: #666;
}
table tr:last-child th,
table tr:last-child td {
border-bottom: none;
}
table tr:nth-child(even) {
background: #eee;
}
.tree-small {
display: block;
width: 109px;
height: 158px;
position: absolute;
right: 20%;
top: 50%;
background: url(../img/tree.png);
-webkit-transform: scale(.50);
-moz-transform: scale(.50);
-o-transform: scale(.50);
transform: scale(.50);
}
/* FOOTER and TECHINFO start */
.footer-wrapper {
background: url(../img/footer.png) top repeat-x;
width: 100%;
min-width: 1200px;
height: 250px;
margin: 0px auto;
}
.footer {
width: 1200px;
min-width: 1200px;
margin: 0px auto;
/*background: #F63; */
}
.tech-info-wrapper {
width: 100%;
padding: 80px 0px 0px 0px;
}
.tech-nav-wrapper {
width: 100%;
background: rgba(70, 57, 53, 0.8);
padding: 0px 0px 0px 0px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
margin-bottom: 40px;
}
.tech-nav li {
float: left;
margin: 0 0 0 0;
font-size: 14px;
}
.tech-nav li a {
float: left;
padding: 10px 25px 10px 25px;
text-decoration: none;
color: #fff;
font-family: "UniversLTStd73BlackExtended", sans-serif !important;
font-size: 21px;
line-height: 27px;
/* background: #463935; */
border-top: none;
border-bottom: none;
border-left: 2px solid #635649;
border-right: 2px solid #635649;
transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
}
.tech-nav li:first-child a {
-webkit-border-top-left-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-bottomleft: 5px;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
border-left: none;
border-right: 3px solid #635649;
}
.tech-nav li:last-child a {
border-left: 3px solid #635649;
border-right: 5px solid #635649;
}
.tech-nav li a:hover,.tech-nav li a:focus {
background: #FFF;
color: #000;
}
.tech-nav li a:selected {
background: #888;
}
.tech-nav li.selected a {
background: hsla(0, 75%, 45%, 1); color: #fff;
}
.tech-nav li a span {
font-family: "UniversLTStd47LightCondensed", sans-serif !important;
font-size: 21px;
line-height: 27px;
}
.tech-info {
width: 1200px;
background: #F30;
font-family: "gotham_htfbook", sans-serif;
font-size: 13px;
line-height: 19px;
}
.tech-info .leftcol, .tech-info .middlecol, .tech-info .rightcol {
width: 386px;
float: left;
}
.tech-info .leftcol, .tech-info .middlecol, .tech-info .doublecol {
margin-right: 20px;
}
.tech-info .doublecol {
width: 792px;
float: left;
}
/* menu list */
ul.lst li a {
font-size: 11px;
line-height: 17px;
display: block;
padding: 5px;
overflow: hidden;
text-decoration: none;
color: #FFF;
}
ul.lst li.last a {
border: none;
}
ul.lst a:hover {
background: #bca58e;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
color: rgba(70, 57, 53, 1.0);
}
ul.lst li em {
float: right;
margin: 0 0 0 5px;
font-size: 1em;
font-style: normal;
font-weight: normal;
color: #fff;
}
ul.lst a:hover em {
color: rgba(70, 57, 53, 1.0);
}
ul.total li {
font-size: 11px;
line-height: 17px;
display: block;
padding: 5px;
overflow: hidden;
color: #FFF;
border-top: 1px solid #FFFFFF;
margin-top:5px;
font-weight: bold;
}
ul.total li em {
float: right;
margin: 0 0 0 5px;
font-size: 1em;
font-style: normal;
font-weight: normal;
color: #fff;
font-weight: bold;
}
/* menu list with bar graphs
ul.lst li {
margin: 0 0 2px 0;
position: relative;
}
ul.lst li a {
position: relative;
display: block;
padding: 7px;
z-index: 2;
}
ul.lst li em {
float: right;
margin: 0 0 0 5px;
font-style: normal;
font-weight: normal;
color: #9c836e;
}
ul.lst li span {
position: absolute;
top: 0;
left: 0;
display: block;
height: 100%;
line-height: 2.55em;
text-indent: -9999px;
background: #f3f2e8;
}
ul.lst li:hover span {
background: #ecebe1;
} */
.tech-info .rightcol {
margin-right: 0px;
}
.tech-info .rightcol p {
font-family: "UniversLTStd55Roman", sans-serif !important; */
font-family: "gotham_htfbook", sans-serif;
font-size: 13px;
line-height: 19px;
}
#chart-area {
width: 380px !important;
height: 380px !important;
}
.footer-info {
margin-top: 50px;
}
.footer p {
color: #FFFFFF;
}
.footer-info ul li a:hover {
opacity:0.8;filter:alpha(opacity=80);
}
.footer-info p {
margin: 20px 0px 20px 0px;
text-align: center;
font-family: "gotham_htfbook", sans-serif;
font-size: 13px;
line-height: 19px;
}
.footer-info p a {
height: 20px;
width: 150px;
margin: 0px auto 10px auto;
padding: 50px 0px 0px 0px;
display: block;
background: url(../img/delta-logo.png) 50% 10% no-repeat;
text-decoration: none;
color: #FFF;
font-weight: bold;
font-family: "gotham_htfbook", sans-serif;
font-size: 11px;
line-height: 17px;
}
.footer-info p a:hover {
opacity:0.8;filter:alpha(opacity=80);
}
.scrollup {
width: 50px;
height: 50px;
position: fixed;
z-index: 999;
bottom: 30px;
right: 30px;
display: none;
text-indent: -9999px;
background: url(../img/to-top.png) no-repeat;
}
.scrollup:hover {
opacity: 0.7;
}
/* FOOTER and TECHINFO end */
/* GLOSSARY starts */
h2.glossary-heading {
font-family: "UniversLTStd73BlackExtended", sans-serif !important;
font-size: 21px;
line-height: 27px;
margin-bottom: 30px;
}
p.glossary-term {
margin: 0 0 10px !important;
color: #747373;
padding: 0px 0px 10px 0px;
font-family: "gotham_htfbook", sans-serif;
font-size: 13px;
line-height: 19px;
}
p.glossary-term strong {
color: #000 !important;
}
.classification .btn-danger {
font-family: "UniversLTStd67BoldCondensed", sans-serif !important;
border: 3px solid #bd362f !important;
}
p.glossary-term strong {
display: block;
font-family: "UniversLTStd57Condensed", sans-serif;
font-size: 15px;
line-height: 21px;
color: #747373;
}
.glossary-term .custom-icon-roughages {
background-position: 4px -7px !important;
}
.glossary-term .custom-icon-pasture {
background-position: -46px -7px !important;
}
.glossary-term .custom-icon-silage {
background-position: -94px -7px !important;
}
.glossary-term .custom-icon-feeds {
background-position: -142px -7px !important;
}
.glossary-term .custom-icon-protein {
background-position: -188px -7px !important;
}
.glossary-term .custom-icon-mineral {
background-position: -240px -7px !important;
}
.glossary-term .custom-icon-vitamin {
background-position: -290px -5px !important;
}
.glossary-term .custom-icon-additives {
background-position: -333px -4px !important;;
}
/* GLOSSARY ends */
/* Custom Styles End */
/* ==========================================================================
Helper classes
========================================================================== */
/*
* Image replacement
*/
.ir {
background-color: transparent;
border: 0;
overflow: hidden;
/* IE 6/7 fallback */
*text-indent: -9999px;
}
.ir:before {
content: "";
display: block;
width: 0;
height: 150%;
}
/*
* Hide from both screenreaders and browsers: h5bp.com/u
*/
.hidden {
display: none !important;
visibility: hidden;
}
/*
* Hide only visually, but have it available for screenreaders: h5bp.com/v
*/
.visuallyhidden {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
/*
* Extends the .visuallyhidden class to allow the element to be focusable
* when navigated to via the keyboard: h5bp.com/p
*/
.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
clip: auto;
height: auto;
margin: 0;
overflow: visible;
position: static;
width: auto;
}
/*
* Hide visually and from screenreaders, but maintain layout
*/
.invisible {
visibility: hidden;
}
/*
* Clearfix: contain floats
*
* For modern browsers
* 1. The space content is one way to avoid an Opera bug when the
* `contenteditable` attribute is included anywhere else in the document.
* Otherwise it causes space to appear at the top and bottom of elements
* that receive the `clearfix` class.
* 2. The use of `table` rather than `block` is only necessary if using
* `:before` to contain the top-margins of child elements.
*/
.clearfix:before,
.clearfix:after {
content: " "; /* 1 */
display: table; /* 2 */
}
.clearfix:after {
clear: both;
}
/*
* For IE 6/7 only
* Include this rule to trigger hasLayout and contain floats.
*/
.clearfix {
*zoom: 1;
}
/* ==========================================================================
EXAMPLE Media Queries for Responsive Design.
These examples override the primary ('mobile first') styles.
Modify as content requires.
========================================================================== */
@media only screen and (min-width: 35em) {
/* Style adjustments for viewports that meet the condition */
}
@media print,
(-o-min-device-pixel-ratio: 5/4),
(-webkit-min-device-pixel-ratio: 1.25),
(min-resolution: 120dpi) {
/* Style adjustments for high resolution devices */
}
/* ==========================================================================
Print styles.
Inlined to avoid required HTTP connection: h5bp.com/r
========================================================================== */
@media print {
* {
background: transparent !important;
color: #000 !important; /* Black prints faster: h5bp.com/s */
box-shadow: none !important;
text-shadow: none !important;
}
a,
a:visited {
text-decoration: underline;
}
a[href]:after {
content: " (" attr(href) ")";
}
abbr[title]:after {
content: " (" attr(title) ")";
}
/*
* Don't show links for images, or javascript/internal links
*/
.ir a:after,
a[href^="javascript:"]:after,
a[href^="#"]:after {
content: "";
}
pre,
blockquote {
border: 1px solid #999;
page-break-inside: avoid;
}
thead {
display: table-header-group; /* h5bp.com/t */
}
tr,
img {
page-break-inside: avoid;
}
img {
max-width: 100% !important;
}
@page {
margin: 0.5cm;
}
p,
h2,
h3 {
orphans: 3;
widows: 3;
}
h2,
h3 {
page-break-after: avoid;
}
}