@font-face {
	font-family: 'Didact Gothic';
	font-style: normal;
	font-weight: 400;
	src: local('Didact Gothic'), local('DidactGothic'), url(/farminc/css/DidactGothic.woff) format('woff');
}
.hide { display:none; }
strong { color:#cd5b1f; }
a { text-decoration: none; color:#cd5b1f; }
a:hover { text-decoration:none; }
/*a.unit:hover { text-decoration:none; }*/

table, th, td { border: 2px solid #763f26; padding: 10px; }

h2 { font-size: 1.4em; color: #763F26; font-weight: bold; margin-top:0; margin-bottom: 20px; }
h3 { font-size: 1.1em; color: #763F26; margin-bottom: 10px; }

.image-caption{	font-style: italic; color: #494949; margin: 5px 0; }

#modheader { font-family:'Didact Gothic'; }
#modnav { cursor: default; font-size:14px; text-align:center;}
#modnav .unit { margin-left:15px;  white-space:nowrap; color:#978E89;}
#modnav a { color:#4D403A; }
#modnav a.unit { color:#4D403A; text-decoration:none;}
#modnav span.unit { color:#CD5B1F; }

#modwrapper { color: #000; font-family: 'Didact Gothic'; }
#modcontent { margin:0px auto;position:relative;height:100%;padding:20px 0 20px 0;}
#modfooter { margin-top:30px;text-align:center;background: #FFF;z-index: 5000;padding-top: 20px;}


.nav-tabs-wrapper { font-size:14px;margin:0px 0 0; }
.nav-tabs-wrapper .nav-tabs li a { color: #978E89 }
.nav-tabs-wrapper .nav-tabs li.active a { color:#CD5B1F; background-color:#FFF8F0 }
.tab-content-wrapper { width:100%; overflow:hidden; border: 1px solid #DDD; padding:20px; background-color:#FFF8F0; border-radius: 3px; box-shadow: -1px 1px 5px #DDD;}

.side { background:#E0AE20;padding:15px;color:#FFF;font-weight:bold;text-align:center; }
.side div { margin-bottom:30px; }

.prevnext { width: 100%; margin: auto; border-top: 1px solid #000; padding-top: 5px; overflow: hidden; margin-top: 20px; }

ul.checkmark li:before {
  content:"\2713\0020";
}

.nav-pills > li { width:100%; margin-left: 0 !important }
/*.nav-pills-horizontal > li { width: 20% }*/
.nav-justified > li { width: 1% !important }


.nav-pills > li > a {
  color: #978e89;
  border: 1px solid #fff;
  margin: 0 10px 10px 0;
}

.nav-pills > li.active > a,
.nav-pills > li.active > a:hover,
.nav-pills > li.active > a:focus {
  border: 1px solid #DDD;
  background-color: #FFF8F0;
  color: #cd5b1f;
  box-shadow: none;
}

.nav-pills > li > a {
  box-shadow: -1px 1px 5px #DDD;
  color: #C2C2C2;
}

.nav-justified > li > a {
  background-color: #e3dfd7;
  color: #763f26;
}

.nav-pills > li > a:hover,
.nav-pills > li > a:focus {
	border: 1px solid #DDD;
	background-color: #FFF8F0;
	color: #763f26;
}

.nested-ul {
    list-style: none;
    margin-bottom: 10px;
    margin-top: -5px;
}

.nested-ul > li > a {
  color: #c2c2c2;
}

.nested-ul > li > a:hover, .nested-ul > li > a:focus {
  color: #763f26;
}

.nested-ul > li > a:active {
  color: #cd5b1f;
}

.video {
	position: relative;
}

.video:hover, .readmore-link:hover {
	cursor: pointer;
}

.play-btn {
	border-radius: 10px;
  font-size: 20px;
  left: 40%;
  padding: 15px 20px;
  position: absolute;
  top: 40%;
  z-index: 1;
  color: #fff;
}

.readmore-link {
  font-weight: bold;
}

.expandable-hidden, .expandable {
  display: none;
}

.expand {
  cursor: pointer;
  padding-left: 15px;
}

@media (min-width: 992px)  {
  #geographic {
    cursor: pointer;
    height: 197px;
    left: 46px;
    position: absolute;
    top: 262px;
    width: 144px;
  }
  #demographic {
    cursor: pointer;
    height: 198px;
    left: 203px;
    position: absolute;
    top: 262px;
    width: 146px;
  }
  #behaviour {
    cursor: pointer;
    height: 198px;
    left: 360px;
    position: absolute;
    top: 262px;
    width: 146px;
  }
  #psychographic {
    cursor: pointer;
    height: 198px;
    left: 361px;
    position: absolute;
    top: 262px;
    width: 146px;
  }

  #brown {
    cursor: pointer;
    height: 182px;
    left: 97px;
    position: absolute;
    top: 190px;
    width: 97px;
  }

  #yellow {
    cursor: pointer;
    height: 33px;
    left: 199px;
    position: absolute;
    top: 344px;
    width: 179px;
  }

  #orange {
    cursor: pointer;
    height: 35px;
    left: 385px;
    position: absolute;
    top: 345px;
    width: 176px;
  }

  #green {
    cursor: pointer;
    height: 79px;
    left: 523px;
    position: absolute;
    top: 254px;
    width: 84px;
  }

  #pink {
    cursor: pointer;
    height: 34px;
    left: 402px;
    position: absolute;
    top: 208px;
    width: 173px;
  }

  #blue {
    cursor: pointer;
    height: 35px;
    left: 210px;
    position: absolute;
    top: 207px;
    width: 173px;
  }
}
@media (min-width: 1200px) {
  #geographic {
    position: absolute;
    top: 310px;
    left: 50px;
    width: 178px;
    height: 240px;
    cursor: pointer;
  }
  #demographic {
    position: absolute;
    top: 310px;
    left: 245px;
    width: 178px;
    height: 240px;
    cursor: pointer;
  }
  #behaviour {
    cursor: pointer;
    height: 240px;
    left: 437px;
    position: absolute;
    top: 310px;
    width: 178px;
  }
  #psychographic {
    cursor: pointer;
    height: 240px;
    left: 632px;
    position: absolute;
    top: 310px;
    width: 178px;
  }

  #brown {
    cursor: pointer;
    height: 221px;
    left: 117px;
    position: absolute;
    top: 186px;
    width: 115px;
  }

  #yellow {
    cursor: pointer;
    height: 43px;
    left: 238px;
    position: absolute;
    top: 365px;
    width: 222px;
  }

  #orange {
    cursor: pointer;
    height: 43px;
    left: 469px;
    position: absolute;
    top: 365px;
    width: 214px;
  }

  #green {
    cursor: pointer;
    height: 97px;
    left: 636px;
    position: absolute;
    top: 260px;
    width: 103px;
  }

  #pink {
    cursor: pointer;
    height: 43px;
    left: 487px;
    position: absolute;
    top: 199px;
    width: 214px;
  }

  #blue {
    cursor: pointer;
    height: 43px;
    left: 251px;
    position: absolute;
    top: 199px;
    width: 214px;
  }
}