html {height: 100%;}
body {
  font-family: Arial, Helvetica, sans-serif;
  line-height: 24px;
  margin: 0;
  padding: 0px;
  color: #353535;
  font-size: 20px;
  background-image: url(../images/main-bg.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    background-position: bottom center;
}

@font-face {
  font-family: 'open_sansregular';
  src: url(' ../fonts/opensans-regular-webfont.eot');
  src: url('../fonts/opensans-regular-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/opensans-regular-webfont.woff') format('woff'), url('../fonts/opensans-regular-webfont.ttf') format('truetype'), url('../fonts/opensans-regular-webfont.svg#open_sansregular') format('svg');
  font-weight: normal;
  font-style: normal
}

@font-face {
  font-family: 'open_sansbold';
  src: url('../fonts/opensans-bold-webfont.woff2') format('woff2'), url('../fonts/opensans-bold-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'open_sanslight';
  src: url('../fonts/opensans-light-webfont.woff2') format('woff2'), url('../fonts/opensans-light-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'open_sansextrabold';
  src: url('../fonts/opensans-extrabold-webfont.woff2') format('woff2'), url('../fonts/opensans-extrabold-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'open_sanssemibold';
  src: url('../fonts/opensans-semibold-webfont.woff2') format('woff2'), url('../fonts/opensans-semibold-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}
img {
  max-width: 100%;
  display: block
}
a {
  text-decoration: none
}
a:hover {
  text-decoration: none
}
ul {
  margin: 0;
  padding: 0;
  list-style: none
}
.fowl-main-bg {
    
    padding: 50px 0 0;
  height:100% !important;
}
.bird-sparrow { z-index:999; position:relative;}

/*.build-center {
    height: 100vh;
    display: table;
    width: 100%;
    vertical-align: middle;
}
.build-center-middle{
    display: table-cell;
    width: 100%;
    vertical-align: middle;
}*/
.fowl-play {
    background-position: center center;
    background-size: cover;
    background-image: url(../images/main-bg.jpg);
    background-size: cover;
}
.build-fowl-bg {
    background: #ffffff;
    padding: 20px 20px;
    text-align: center;
}
.build-fowl-bg h1 {
    font-family: 'open_sansextrabold';
    margin: 0;
    margin-bottom: 20px;
    font-size: 30px;
    text-transform: uppercase;
}
.build-fowl-bg p {
    font-size: 24px;
    line-height: 34px;
    font-family: Arial, Helvetica, sans-serif;
    margin-bottom: 20px;
}
.build-fowl-bg p span{
  color: #00e510;
  font-weight: bold;
}
.build-fowl-bg p strong{
  font-weight: bold;
}
.common-btn-site {
    background: #000;
    text-align: center;
    color: #fff;
    padding: 20px 30px;
    display: inline-block;
    margin-top: 20px;
    text-decoration: none;
    border-radius: 50px;
    font-family: 'open_sansextrabold';
    text-transform: uppercase;
    font-size: 26px;
}
.common-btn-site:hover, .common-btn-site:focus{
    background: #00e510;
    text-decoration: none;
    color: #fff;
}
.home-center-button {
    text-align: center;
    margin-top: 20px;
    z-index: 9999;
}
.home-center-button a {
    display: inline-block;
    margin: 0 10px;
    z-index: 99999;
    position: relative;
}
.home-center-button img {
    width: 80px;
    display: inline-block;
}
.home-center-button a:hover{
  opacity: 0.8;
}
/*.fowl-beak-center {
    height: 100vh;
    display: table;
    width: 100%;
    vertical-align: middle;
}
.fowl-beak-center-middle {
    display: table-cell;
    width: 100%;
    vertical-align: middle;
}*/
.steps-box {
    background: rgba(255,255,255,0.5);
    margin-bottom: 30px;
}
steps-box
.steps-box:last-child {
    margin-bottom: 0;
}
.steps-block h3 {
    font-size: 24px;
    color: #000;
    margin: 0;
    border-bottom: solid 4px #000;
    padding: 14px 0;
    margin-left: -14px;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
	padding-left:20px;
}
.steps-box .row {
    margin: 0;
}
body .steps-box .col-md-3, body .steps-box .col-md-9  {
    padding: 0;

}

.steps-animals {
    margin-top: 14px;
	    margin-bottom: 14px;
}
.steps-animals .white-square {
    background: #fff;
    border-radius: 20px;
   padding: 10px; 
    border: solid 4px #fff;
}
.steps-animals .white-square.active-panel{
  background: #00e510;
  border: solid 4px #000;
}
.steps-animals .white-square img {
    margin: 0 auto;
}
.steps-animals .col-md-3 {
    padding: 0 15px;
}



.right-images-thumbs .white-square.active-panel{
  background: #00e510;
  border: solid 4px #000;
}
.max-width-wrapper {
    max-width: 96%;
    width: 100%;
    margin: 0 auto;
}
body .steps-animals .col-md-3 {
    
    padding: 0 8px;
}
.transparent-white{
  background: rgba(255,255,255,0.5);
}
.transparent-white h3 {
    font-size: 24px;
    color: #000;
    margin: 0;
    border-bottom: solid 4px #000;
    padding: 14px 0;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
}
.transparent-white span {
    display: inline-block;
    padding: 0 15px;
}
.transparent-white .overall{
  padding: 10px;
}
.transparent-white .white-strip{
  background: #fff;
  padding: 10px;
  margin-bottom: 15px;
  text-align:center
}
.transparent-white .white-strip img{
  border-radius: 20px;
  display:inline-block;
   width:100%;
   height: 13vh;  /* added this to accomodate 4 habitats  */
   /*max-height:200px; -- old height value based on 3 habitats */
}
.transparent-white .white-strip:last-child {
    margin: 0;
}
.paragraph-height {
 /*   height: 446px;*/
    padding-top: 30px;
}
.bottom-section .col-md-9 {
    width: 900px;
}
.bottom-section .fowl-center-text img {
    margin: 0 auto;
    width: 450px;
    margin-top: 20px;
}
.description strong{
  font-weight: bold;
}
.description {
    padding: 10px;
}


.white-height{
  background: #fff;
  padding: 15px;
/*  height: 663px;*/
}
.bottom-space {
    margin-bottom: 40px;
}
.bottom-space:last-child {
    margin-bottom: 0;
}

/***************** old-css ******************/

.fowl-play{
  background-position: center center;
  background-size: cover; 
}
.fowl-max {
    border: solid 15px #000;
    border-radius: 130px;
    max-width: 900px;
    margin: 0 auto;
}
.fowl-border {
    border: solid 15px #00e510;
    border-radius: 110px;
    padding: 30px;
    background: #fff;
}
.fowl-play h1 {
    text-align: center;
    margin: 0;
    margin-bottom: 20px;
    font-size: 45px;
    font-family: 'open_sansextrabold';
}
.fowl-play h2 {
    font-family: 'open_sanssemibold';
    margin: 0;
    margin-bottom: 20px;
    font-size: 33px;
}
.fowl-play p{
  font-size: 16px;
}
.fowl-play p strong{
  font-family: 'open_sanssemibold';
}
.fowl-play p {
    font-size: 16px;
    margin-bottom: 20px;
}
.bird-center {
    margin-bottom: 25px;
}
.bird-center img {
    margin: 0 auto;
    width: 300px;
}
.game-button-center{
  text-align: center;
}
.game-button-center a{
  background: #000;
  text-align: center;
  color: #fff;
  padding: 20px 30px;
  display: inline-block;
  margin-top: 20px;
  text-decoration: none;
  border-radius: 50px;
  font-family: 'open_sansextrabold';
  text-transform: uppercase;
  font-size: 26px;
}
.game-button-center a.main-menu{
  padding-top: 26px;
  font-size: 22px;
}
.game-button-center a:hover{
  background: #00e510;
  text-decoration: none;
  color: #fff;
}
.fowl-row {
    display: table;
    height: 100vh;
    width: 100%;
}
.fowl-table-row {
    display: table-cell;
    vertical-align: middle;
    margin: 0;
}
.loading-max{
  border: solid 15px #000;
  border-radius: 130px;
  max-width: 900px;
  margin: 0 auto;
}
.loading-border{
  border: solid 15px #00e510;
  border-radius: 110px;
  padding: 30px;
  background: #fff;
}
.loading-panel h1 {
    margin: 0;
    text-align: center;
    color: #000;
    font-family: 'open_sansextrabold';
    font-size: 45px;
}
.fowl-left-panel{
  border: solid 15px #244576;
  border-radius: 130px;
}
.fowl-border-row {
    border: solid 15px #3c73c3;
    border-radius: 110px;
    padding: 30px;
    background: #fff;
}
.container {
    width: 100%;
    max-width: 1400px;
}
.fowl-sets{
 /* background-image: url(../images/grass.jpg);
  background-size: cover;*/
  padding: 50px 0;
}
.fowl-sets h1 {
    margin: 0;
    margin-bottom: 20px;
    font-size: 36px;
    font-family: 'open_sansextrabold';
    padding-top: 10px;
}
.fowl-sets .beak-bill {
    background: rgba(138,90,102,0.5);
    border: solid 15px #660000;
    border-radius: 40px;
    padding: 0 15px 15px;
    margin-bottom: 15px;
}
.fowl-sets .beak-blue-color {
    background: #3871d1;
    text-align: center;
    color: #fff;
    border-radius: 10px;
    padding: 15px 0;
}
.fowl-sets .beak-bill h3 {
    color: #fff;
    text-align: center;
    margin: 0;
    font-size: 16px;
    padding-top: 5px;
    padding-bottom: 5px;
}
.fowl-sets .beak-blue-color img {
    margin: 0 auto;
    width: 110px;
}
.fowl-sets .body-bill {
    background: rgba(70,153,99,0.5);
    border: solid 15px #006600;
    border-radius: 40px;
    padding: 0 15px 15px;
    margin-bottom: 15px;
}
.fowl-sets .body-bill h3 {
    color: #fff;
    text-align: center;
    margin: 0;
    font-size: 16px;
    padding-top: 5px;
    padding-bottom: 5px;
}
.fowl-sets .feet-bill {
    background: rgba(0,0,102,0.5);
    border: solid 15px #000066;
    border-radius: 40px;
    padding: 0 15px 15px;
    margin-bottom: 15px;
}
.fowl-sets .feet-bill h3 {
    color: #fff;
    text-align: center;
    margin: 0;
    font-size: 16px;
    padding-top: 5px;
    padding-bottom: 5px;
}
.fowl-sets .habitat-bill {
    background: rgba(122,137,41,0.5);
    border: solid 15px #666600;
    border-radius: 40px;
    padding: 0 15px 15px;
    margin-bottom: 15px;
}
.fowl-sets .habitat-bill h3 {
    color: #fff;
    text-align: center;
    margin: 0;
    font-size: 16px;
    padding-top: 5px;
    padding-bottom: 5px;
}
.fowl-sets .habitat-bill .beak-blue-color {
    padding: 15px;
}
.fowl-sets .habitat-bill .beak-blue-color img {
    width: auto;
}
.step-series .beak-bill {
    background: rgba(138,90,102,0.8);
    border: solid 8px #660000;
    border-radius: 40px;
    padding: 15px;
    margin-bottom: 15px;
    text-align: center;
    color: #ffffff;
}
.step-series .beak-bill h4{
  margin: 0;
  margin-bottom: 5px;
  font-family: 'open_sansbold';
}
.step-series .body {
    background: rgba(70,153,99,0.5);
    border: solid 8px #006600;
    border-radius: 40px;
    padding:  15px;
    margin-bottom: 15px;
    color: #fff;
    text-align: center;
}
.step-series .body h4{
  margin: 0;
  margin-bottom: 5px;
  font-family: 'open_sansbold';
}
.fowl-sets .feet {
    background: rgba(0,0,102,0.5);
    border: solid 8px #000066;
    border-radius: 40px;
    padding: 15px;
    margin-bottom: 15px;
    text-align: center;
    color: #fff;
}
.step-series .feet h4{
  margin: 0;
  margin-bottom: 5px;
  font-family: 'open_sansbold';
}
.step-series .habitat {
    background: rgba(122,137,41,0.5);
    border: solid 8px #666600;
    border-radius: 40px;
    padding: 15px;
    margin-bottom: 15px;
    text-align: center;
    color: #fff;
}
.step-series .habitat  h4{
  margin: 0;
  margin-bottom: 5px;
  font-family: 'open_sansbold';
}
.steps-images-birds {
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#620300+0,065f00+44,065f00+58,00065f+85,00065f+100 */
  background: #620300; /* Old browsers */
  background: -moz-linear-gradient(top, #620300 0%, #065f00 44%, #065f00 58%, #00065f 85%, #00065f 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(top, #620300 0%,#065f00 44%,#065f00 58%,#00065f 85%,#00065f 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, #620300 0%,#065f00 44%,#065f00 58%,#00065f 85%,#00065f 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#620300', endColorstr='#00065f',GradientType=0 ); /* IE6-9 */
  padding: 20px;
  border-radius: 30px;
  margin-bottom: 40px;
}
.steps-images-birds-bg{
  background: #000;
  padding: 20px;
  border-radius: 30px;
}
.steps-images-birds-bg img{
  margin: 0 auto;
}
.strong-green{
  background: #666600;
  padding: 20px;
  border-radius: 30px;
}
.strong-green img{
  border-radius: 30px;
}
.beak-blue-color.active-panel{
  border: solid 7px #00ff00;
  padding: 8px 0;
}
.beak-blue-color.active-background{
  background: #00ff00;
}
body .stop-red{
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#df4e4e+0,d69c9c+25,df4e4e+55,d83a3a+100 */
  background: #df4e4e; /* Old browsers */
  background: -moz-linear-gradient(left, #df4e4e 0%, #d69c9c 25%, #df4e4e 55%, #d83a3a 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(left, #df4e4e 0%,#d69c9c 25%,#df4e4e 55%,#d83a3a 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to right, #df4e4e 0%,#d69c9c 25%,#df4e4e 55%,#d83a3a 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#df4e4e', endColorstr='#d83a3a',GradientType=1 ); /* IE6-9 */
  box-shadow: 0 3px 0 #8e4343;
}
body .stop-red:hover{
 background: #8e4343; 
}
.step-building-series .beak-bill, .step-building-series .body, .step-building-series .feet, .step-building-series .habitat {
    height: 170px;
    overflow: hidden;
}
.step-building-series img {
    width: 50px;
    margin: 0 auto;
    padding-top: 10px;
}
.category-series .steps-images-birds-bg {
    height: 300px;
    padding-top: 40px;
}
#result_image button {
    padding: 0;
    border: 0;
	width:100%;
}
#result_image button img {width:100%;}
#result_place_image{
  border: solid 1px #000;
  position: relative;
}
#result_place_image img {
    width: 100%;
}
#result_place_image .caption_result_place {
    position: absolute;
    bottom: 0;
    text-align: center;
    left: 0;
    right: 0;
    width: 100%;
    background: rgba(255,255,255,0.5);
    padding: 14px 0;
    font-size: 20px;
    color: #000;
}
#result_place_image .caption_result_place span{
  font-weight: bold;
}
#result_image{
  position: relative;
}
.audio-caption {
    position: absolute;
    bottom: 30px;
    left: 0;
    right: 0;
    text-align: center;
    color: #ffffff;
	font-weight: bold;
    -webkit-text-stroke: 1px black;
	}
.audio-caption .audio-icon-right {
    width: 22px;
    height: 23px;
    background-image: url(../images/audio-icon.png);
    background-repeat: no-repeat;
    display: inline-block;
    vertical-align: middle;
    background-position: center center;
}
.fancybox-overlay.fancybox-overlay-fixed .fancybox-skin {
    background: #9b0000;
    color: #fff;
    text-align: center;
    border-radius: 30px;
}
.fancybox-custom .fancybox-skin{
  background: #000000 !important;
    border: 2px solid rgb(0, 229, 16) !important;
    border-radius: 33px;

} 
.fancybox-overlay.fancybox-overlay-fixed .fancybox-skin h3{
   margin: 0;
   margin-bottom: 15px;
   font-size: 30px;
}
.fancybox-lock .fancybox-overlay {
     overflow-y: hidden !important;
}
.fancybox-wrap {min-width:450px;}
.fancybox-inner  {min-width:400px;}
.mobile_scan_img .button_close a {
  background: #00e510;
text-decoration: none;
color: #fff;

}
.mobile_scan_img img {display: inline-block;}
.fancybox-custom{
/* border: 2px solid rgb(0, 229, 16) !important;
border-radius: 33px; */
} 
/***************** old-css ******************/

.fowl-center-text {text-align:center; position:fixed; margin:0 auto; text-align:center; left:0; right:0; margin-left:10%; bottom:10px;}
.fowl-center-text img {
    margin: 0 auto;
    margin-top: 20px;
	max-width:400px;
}
@media (min-width:1600px) { 
.build-fowl-bg {
    min-height: 725px;
}

}

@media (max-width:1600px) { 
.build-fowl-bg p {
    font-size: 20px;	
}



}
@media (max-width:1366px) {
.build-fowl-bg p {font-size: 16px; line-height: normal;}
.steps-box {
    margin-bottom: 30px;
}
.fowl-center-text img {    max-width: 280px;}
.steps-animals {
    margin-top: 7px;
	    margin-bottom: 7px;
}
.transparent-white .white-strip img {
    border-radius: 20px;
    max-height: 150px;
	width:100%;
}
}
@media (max-width:1199px) {

}

@media (max-width:1024px) and (min-width:768px) {
/*.fowl-main-bg .col-md-3 {
    width: 250px;
}
.fowl-main-bg .col-md-7 {
    width: 520px;
}
.fowl-main-bg .col-md-2 {
    width: 235px;
}
body .steps-box .col-md-3 {
    padding: 0;
    width: 130px;

}

.steps-block h3 {
    font-size: 16px;
    margin-left: 8px;
  }
  body .steps-animals .col-md-3 {
    width: 84px;
    padding: 0 8px;
}
.steps-animals {
    margin-top: 7px;
}
.build-fowl-bg p {
    font-size: 14px;
    line-height:normal; 
}
.paragraph-height {
    height: auto;
    padding-top: 0px;
    }
  .bottom-section .col-md-9 {
    width: 600px;
}
.bottom-section .fowl-center-text img {
    width: 315px;
}*/
.white-height {

     height:auto;
     padding: 10px;
}
#result_place_image .caption_result_place {
    font-size: 12px;
    line-height: normal;
}

.build-fowl-bg p {font-size: 14px; line-height: normal;}
.home-center-button img {
    width: 50px;
    display: inline-block; 
}
.paragraph-height {
    padding-top: 0px;
}
.audio-caption {
   font-size:12px;
   padding-left:10px;
      padding-right:10px;
	  bottom:10px;
}
.bottom-space {font-size:12px;}

}
@media (max-width:979px) and (min-width:768px) {

}

@media (max-width:767px) {
  
}

@media(min-width:320px) and (max-width:480px) {
  
}

.mainlogorow {
  display: flex;
  width: 100%;
  margin: auto auto;
}

.mainlogocolumn {
  flex: 50%;
  padding: 5px;
  margin: auto auto;
}

@media screen and (max-width: 500px) {
  .column {
    width: 100%;
  }
}

.mainlogos {
  color: black;
  font-weight: bold;
  text-shadow: 0 5px 0 black; 
  width: 75%;
  margin: auto auto;
  -webkit-text-fill-color: white; /* Will override color (regardless of order) */
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: black;
}
/******************************* Media ********************************/