/**
	Feeding Interactive v 1.0
**/

/*
  **Color Palette**
    black: #312D2E;
    gray: #CFD0CE;

    green: #1FB486;
    teal: #2496B1;
    blue: #2858DC;
    purple: #714CE4;
    violet: #C13ECB;

    green-dark: ##277C5E;
    teal-dark: #2E787C;
    blue-dark: #30578D;
    purple-dark: #4B4988;
    violet-dark: #803D88;

  **Typoography**
    amatic SC: title and major headings
    Open Sans: body text
    Londrina: atoms and diagrams

  **Atom color code**
     Carbon: purple
     Hydrogen: blue
     Oxygen: teal
     Nitrogen: violet

*/

/*
 * Base structure
 */
 body {
   color: #312D2E;
   font-family: 'Open Sans', sans-serif;
   margin:0;

 }

 a {
   color: #004b9f;
 }

 h1.display-1 {
   font-family: "amatic SC";
   font-weight:bold;
 }

footer {
  width:1028px;
    margin:0 auto;
      padding:10px;
font-size:.8rem;
  }


  footer .logo {
    padding: 10px 20px;
}

footer .logo img {
    height: auto;
    width: 100%;
    max-width: 320px;
}
.btn-default {
    color: #004b9f;
}
.btn-default:hover {
  color:#803D88;
}
.btn-default svg {
  fill:#004b9f;
}
.btn-default:hover svg {
  fill:#803D88;
}
.btn-primary {
  background:#2E787C;
  border:#2E787C;
  transition:background .3s ease-out;
}

.btn-primary svg {
  fill:#fff;
}

.btn-lg svg{
  width:14px;
  height:auto;
}

.gui .gui-main .btn-default {
  cursor:pointer;
  background:transparent;
  border: 2px solid #803D88;
  color: #803D88;
}

a.masthead-brand {
    margin: 10px;
    font-size: 1em;
    font-weight: bold;
    text-transform: uppercase;
    color: #312D2E;
    display:block;
}
p a:hover {
    text-decoration: underline;
    font-weight: bold;
}


.btn-primary:hover {
  background:#277C5E;
}

.btn-primary:active {
  background:#10A070;
}
#questionnaire {
  background: #CFD0CE;
  width:1028px;
  border: 2px solid #312D2E;
  border-radius: .3rem;
  margin:0 auto;
}
#interactive {
  margin:0 auto;
  width:1028px;
  height:100vh;
  overflow-y: hidden;
  min-height:720px;
  max-height:772px;
  position:relative;
  border: 2px solid #312D2E;
  border-radius: .3rem;
  background: #CFD0CE;
 }


#interactive canvas {
  height:768px;
  width:1024px;
}

#trough-button {
  display:none;
  position:absolute;
  top:540px;
  left:350px;
  width:270px;
  height:130px;
  background:transparent;
  border:0;
}

#interactive-footer {
  position:absolute;
  width:1024px;
  padding:4px 12px;
  bottom:0px;
  }

#interactive-footer p.small {
  margin-bottom:.5rem;
}
#interactive-footer #credits-button {
  text-transform: uppercase;
}
#interactive-footer .btn-more-info {
  position:relative;
  top:-10px;
}
  ul.credits-list {
      padding: 0;
      list-style: none;
  }

  ul.credits-list li {
    margin: 10px 0;
}

ul.credits-list li span.title-credit {
    font-weight: bold;
    text-transform: uppercase;
    font-size: 90%;
}
#interactive .home-container {
background-image: url('../images/background-0001.png');
  background-position:0 220px;
  background-repeat:no-repeat;
      padding:4rem 2rem;
}


#main-title {
  font-family: "amatic SC";
  font-weight:bold;
  font-size:7.2rem;
  color:white;
  margin-bottom:50px;
  text-shadow:
  -1px -1px 0 #312D2E,
   1px -1px 0 #312D2E,
   -1px 1px 0 #312D2E,
    1px 1px 0 #312D2E,
2px 2px 0 #312D2E,
-2px -2px 0 #312D2E,
-2px 2px 0 #312D2E,
2px -2px 0 #312D2E,
3px 3px 0 #312D2E,
4px 4px 0 #312D2E,
5px 5px 0 #312D2E,
6px 6px 0 #312D2E;
}
.home-container .cards {margin-top:40px;}
.home-container .card {
  background: transparent;
  border:0;
}

.home-container .card h2.card-title {
  /*font-family: 'Open Sans' sans-serif;*/
  font-size:1.2rem;
  text-transform:uppercase;
}
.home-container .card {
  display:block;
}
.home-container .card img {
  height:300px;


  width:auto;
}
/*
 * Nav
 */

header {
 display:block;
 position:absolute;
 top:0;
left:0;
z-index:1;
width: 100%;
}

nav {
  display:block;
  width:1024px;
  margin:0 auto;
}
nav .main-link {
  padding:5px;
  margin:0;
}
nav .nav{
  float:right;
  padding:5px;
  margin:0;
}

nav .nav li {
  list-style:none;
  float:left;
}

nav .nav li .btn {
  color: #312D2E;
  background:transparent;
  text-transform: uppercase;
  font-size:.8rem;
  text-decoration:none;
  cursor:pointer;
  transition: color .3s ease-out;
}


nav .nav li svg {
  fill: #312D2E;
  width:24px;
  height:24px;
  margin:0 auto;
  display:block;
  transition: fill .3s ease-out;
}

nav .nav li:hover .btn  {
  color:#803D88;
}
nav .nav li:active .btn  {
  color:#30578D;
}
nav .nav li:hover svg {
  fill:#803D88;
}
nav .nav li:active svg  {
  fill:#30578D;
}

 /*
  * GUI
  */

.gui {
    position:absolute;
    width:350px;
    min-height:200px;
    top:50px;
    left:50px;
      margin:1%;
    background:#312D2E;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}

.fertilizing-interactive .gui {
  width: 380px;
  min-height:100px;
}

.fertilizing-interactive .btn-default.btn-large {
display:block;
padding:.6rem 1.5rem;
margin:10px auto;
font-weight:bold;
font-size:1.2rem;
}

.fertilizing-interactive .btn-default.btn-large:hover {
  color:#601D68;
}

.gui>div,
.gui>div>div {
  -webkit-border-radius: 1px;
  -moz-border-radius: 1px;
  border-radius: 1px;
}

.gui .gui-header {
  background:#277C5E;
  text-align:center;
  margin:.8%;
}

.gui .gui-header h1,
.gui .gui-header h2 {
  font-family: "amatic SC";
  padding:0 0 2px 0;;
  margin: 0;
  letter-spacing: .05em;
  color:#fff;
}

.gui .gui-sub-header .stage-titles{
  float:left;
  text-align:center;
  width:33%;
  position:relative;
    font-family:'Oswald-Medium', 'Oswald';
    text-transform:uppercase;

}
.gui .gui-sub-header .stage-titles:first-child:before {
  display:none;
}

.gui .gui-sub-header .stage-titles:before {
  content:'';
  display:block;
  position:absolute;
  width:12.5px;
  height:39px;
  top:-8px;
  left:-4px;
  background: url('../images/chevron.png') 0 0 no-repeat;
}

.gui .gui-sub-header .gui-content:after {
  content:'';
  display:block;
  clear:both;
}
.gui-content {
    text-align: center;
}

.gui-content .btn-more-info{
  text-align: center;
  margin:0 auto;
}
.gui-main,
.gui-sub-header,
.gui-footer {
  padding:0;
  margin:.8%;
  background:#fff;
}

.gui .gui-footer {
  margin-top:2px;
}
.gui .gui-main{
  margin-bottom:1px;
}

.gui-main .gui-content,
.gui-sub-header .gui-content,
.gui-footer .gui-content {
  padding:2%;
}

.gui-content p {
text-align:center;
}
.gui .gui-main .formula {
 font-size:1.1rem;
 font-weight:bold;
}

.gui .gui-main .formula .larger {
 font-size:1.4rem;
}

.gui .gui-main table.gui-table {
  background:#fff;
  width:100%;
     font-family:'Oswald-Medium', 'Oswald';
}
.gui .gui-main table.gui-table  th{
  font-size:.9rem;
  text-transform:uppercase;
  color:#514D4E;
}

.gui .gui-main table.gui-table th,
.gui .gui-main table.gui-table td  {
 text-align:center;
 border-bottom:#CFD0CE 1px solid;
 padding:5px 2px;
border-left:#312D2E 2px solid;
width:48%;
}


.gui .gui-main table#table-fertilizer th,
.gui .gui-main table#table-fertilizer td  {
width:33%;
  border:0;
  padding:0;
}
.gui .gui-main table.gui-table td.clickable,
.fertilizer-item.clickable {
cursor:pointer;
  }



.gui .gui-main table.gui-table td.clickable:hover {
  /*background: #DFE0DE;*/
}

.gui .gui-main table.gui-table th:first-child,
.gui .gui-main table.gui-table td:first-child  {
border-left:0;
}

.fertilizer-item {
  position:relative;
  padding:0 0 20px 0;
  width:100px;
  height:140px;
  background: transparent no-repeat;
  vertical-align:middle;
  transition:opacity ease-in-out .5s;
}
.amounts {
font-size:1.2rem;
position:absolute;
bottom:0px;
text-align:center;
display:block;
width:100%;
}
#fertilizer-small-1 {
  background-image:url('../images/sacksSmall-0001.png');
}
#fertilizer-medium-1 {
  background-image:url('../images/sacksMedium-0001.png');
}
#fertilizer-large-1 {
  background-image:url('../images/sacksLarge-0001.png');
}

#fertilizer-small-1.multiple-sacks {
  background-image:url('../images/sacksSmall-0002.png');
}
#fertilizer-medium-1.multiple-sacks  {
  background-image:url('../images/sacksMedium-0002.png');
}
#fertilizer-large-1.multiple-sacks  {
  background-image:url('../images/sacksLarge-0002.png');
}


.gui .gui-main .food-item img.food-img {
  opacity:.5;
  width:110px;
  transition: all .3s ease-out;
}
.gui .gui-main .food-item img.food-img.draggable {
  opacity:1;
  width:128px;
  cursor:pointer;
}


 .gui .gui-footer h2 {
       font-family:'Oswald-Medium', 'Oswald';
     font-weight:normal;
     font-size:1rem;
     text-transform:uppercase;
 }

 .gui .gui-footer p {
   font-size:.9em;
 }


.fade-in {
  animation fade-in .2s;
}

.modal-title {
  font-family: 'amatic SC';
  font-size:2rem;
  font-weight:bold;
  letter-spacing: .02em;
}

h6.modal-subtitle {
  font-weight:bold;
}

.modal-body p {
  overflow-wrap:normal;
  -webkit-hyphens: none;
-moz-hyphens: none;
hyphens: none;
}
/*
 * GUI label boxes
 */
 /* The animation code */
 @keyframes bottom-up {
   0%   {margin-top:20px;}
   85%   {margin-top:2px;}
   95%   {margin-top:-1px;}
   100% {margin-top:0px;}
 }

 @keyframes bubble-animation {
   0%   {margin-bottom:-80px;opacity:.1;}
   85%   {margin-bottom:20px;opacity:.9;}
   100% {margin-bottom:0px;opacity:1;}
 }
 @keyframes fade-in {
   0% {opacity:.1;}
   80% {opacity:.9;}
   100% {opacity:1;}
 }
 @keyframes slider {
   0%   {margin-top:20px;}
   85%   {margin-top:2px;}
   95%   {margin-top:-1px;}
   100% {margin-top:0px;}
 }

.gui-label {
  position:absolute;
    font-family:'Oswald-Medium', 'Oswald';
  background:#fff;
  padding:5px ;
  text-align:center;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
  border: #312D2E solid 3px;
  animation-name:bottom-up;
  animation-duration:.5s;
  }

  .gui-label:after {
  content: '';
  position: absolute;
  border-style: solid;
  display: block;
  width: 0;
  z-index: 1;
  border-color: transparent #FFFFFF;
  }
  .gui-label:before
  {
  content: '';
  position: absolute;
  border-style: solid;
  border-color: transparent #312D2E;
  display: block;
  width: 0;
  z-index: 0;
  }


  .gui-label.left-arrow:after {
  border-width: 15px 20px 0px 0;
  margin-top: -15px;
  left: -14px;
  top: 100%;
  }

  .gui-label.left-arrow:before {
  border-width: 17px 22px 0px 0;
  margin-top: -15px;
  left: -22px;
  top: 101%;
  }

  .gui-label.bottom-arrow:after {
  border-width: 0px 20px 20px 0;
  margin-left: 0px;
  left: 75%;
  bottom: -16px;
  }

  .gui-label.bottom-arrow:before {
  border-width:0px 22px 22px 0;
  margin-left:0;
  left: 76%;
  bottom: -23px;
  }


  .gui-label.top-arrow:after {
  border-width: 20px 0px 0px  20px;
  margin-left: 0px;
  left: 0;
  top: -16px;
  }

  .gui-label.top-arrow:before {
  border-width:22px 0px  0  22px;
  margin-left:0;
  left: -1.5%;
  top: -23px;
  }

  .gui-label.bubble  {
  max-width: 270px;
  min-height:90px;
  padding: 24px;
  background: #FFFFFF;
  -webkit-border-radius: 80px;
  -moz-border-radius: 80px;
  border-radius: 80px;
  border: ##312D2E solid 4px;
  animation-name: bubble-animation;
  transition: all .5s ease-in-out;

  }

  .gui-label.bubble .bubble-content {
      font-family: 'amatic SC' ;
      font-size:2.1rem;
      letter-spacing: .03em;
      font-weight:700;
      line-height:1;
  }
  .gui-label.bubble:after   {
  content: '';
  position: absolute;
  border-style: solid;
  border-width: 28px 16px 0;
  border-color: #FFFFFF transparent;
  display: block;
  width: 0;
  z-index: 1;
  bottom: -27px;
  left: 72px;
  }

    .gui-label.bubble:before
  {
  content: '';
  position: absolute;
  border-style: solid;
  border-width: 31px 19px 0;
  border-color: #312D2E transparent;
  display: block;
  width: 0;
  z-index: 0;
  bottom: -32px;
  left: 69px;
  }
.label-title {
  font-size:.9rem;
  font-weight:bold;
  text-transform:uppercase;
  text-align:left;
}
.gui-label .label-data{
  color: #4B4988;
  font-size:2rem;
  font-weight:bolder;
  padding:0 15px;
}

.gui-label .label-eq{
  font-size:1rem;
}

.btn-more-info {
  background-color:transparent;
  padding:.3rem .5rem;
  cursor:pointer;
  fill:#888;

}
.gui-label .btn-more-info {
  font-size:.8rem;
}
.btn-more-info:hover {
  color:#30578D ;
  fill:#30578D ;
}
.gui-label {
display:none;
}

#speech-bubble.gui-label {
  /*calf speech bubble*/
  bottom:51.5%;
  left:500px;
}

#speech-bubble-2.gui-label {
  /*plant speech bubble*/
  bottom:31%;
  left:550px;
  /*background-color: rgba(255,255,255,.9)*/
}

#calf-label.gui-label {
  top:325px;
  left:850px;
}
#yield-label.gui-label {
  top:400px;
  left:800px;
  display:none;
}

#soil-label.gui-label {
  top:550px;
  right:100px;
  display:none;
}

#feed-label.gui-label {
  top:400px;
  left:350px;
}

#river-label.gui-label {
  top:460px;
  left:90px;
}
#river-label.gui-label .label-data {
  color: #803D88;
}



#bubble-restart.btn-default {
  display:inline-block;
  background:transparent;
  margin:5px 0 0 0 ;
  padding:.4rem;
  cursor:pointer;
  color: #803D88;
  display:none;
}
#bubble-restart.btn-default svg {
  fill: #803D88;
  width:18px;
  height:18px;
}
#bubble-restart.btn-default:hover {
  color: #612E5B;
}
#bubble-restart.btn-default:hover svg {
  fill: #612E5B;
}
#bubble-restart.btn-default:active {
 color: #C13ECB;
}
#bubble-restart.btn-default:active svg {
 fill: #C13ECB;
}


.icon {
  width:14px;
  height:14px;
}

.slider-wrapper {

}

.slider-wrapper label {
  display:block;
}

.slider-wrapper .slider{
  width:90%;
  margin-left:3%;
}

#questionnaire h1 {
  margin:5px 0 30px 0;
  font-size:4rem;
}
form legend {
  text-transform: uppercase;
  text-align:center;
  font-size:1.5rem;
}
input[type=text] {
  padding:6px 4px;
  border:1px #888 solid;
  border-radius:6px;
  width:70%;
}

input[type=submit] {
  display:block;
  width:80%;
  padding:12px;
  margin:4px 10%;
  font-size:1.1rem;
  cursor:pointer;
}

form ol li {
  margin:15px 0;
}
label.radio-label {
  font-size:1.1rem;
  padding:6px 10px 6px 0px;
}
.question {
  font-weight:bold;
  display:block;
}

.questionnaire-name {
  margin:20px;
}

.questionnaire-name label {
  font-size:1.2rem;
  font-weight:bold;
}

.questionnaire-name input[type=text] {
  border-color:#2E787C;
  border-width:3px;
  padding:10px;
  font-size:1.1rem;
}

.gui-meter {
  position:absolute;
  left:50px;
  bottom:50px;
  width:390px;
  min-height:50px;
  background:#312D2E;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
}
.gui-meter svg {
width: 368px;
}
.meter-title {
   margin-bottom:8px;
   font-family:Oswald;
   font-size:1.1rem;
 }
.gui-meter svg mask path {

}
.gui-meter svg #meter-marker {

}

.gui-meter>div,
.gui-meter>div>div {
  -webkit-border-radius: 1px;
  -moz-border-radius: 1px;
  border-radius: 1px;
}

g.meter-markers {
  font-family:'Oswald-Medium', 'Oswald';
  font-size:14px;
  fill: #4f4f4f;
}
.cls-1{fill:none;}
.cls-2{clip-path:url(#clip-path);}
.cls-3{fill:#c1c1c1;}
.cls-4{fill:#9577FE;}

.meter-container {
  background:#fff;
}

#restart-button-container {
  display:none;
  position: absolute;
  width:100%;
  padding-top:10px;
  padding-bottom:50px;
  animation: fade-in 1s;
  transition: all .5s ease-in-out;
}

.gui div,.gui p, .gui table {
  transition:height ease-in-out .5s;
}
.fertilizer-item.disappear {
  opacity:0;
}

.fertilizing-interactive .gui .gui-main {
  height:auto;
  min-height:80px;
transition:all ease-out 1s;
-webkit-transition:all ease-out 1s;
}