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

}
* {
	box-sizing: border-box;
}
p, div {
	line-height: 20px;
	font-size: 14px;
}


.home_bg1 {
	background-image: url(images/clouds.png);
	position:relative; z-index:1;
	 background-repeat:no-repeat; 
	animation-name: clouds;
    animation-duration: 120s;
	animation-iteration-count:infinite;
}
 
.inner_bg1 {
	background-image: url(images/clouds.png);
	position:relative; z-index:1;
	 background-repeat:no-repeat; 
	animation-name: clouds;
	 animation-duration: 120s;
  animation-iteration-count: infinite;
  background-size: 250%;
}


 

@keyframes clouds {
    0%   {background-position: 30% top;}
    50%  {background-position: 60% top;}
    100% {background-position: 30% top;}
}
@-webkit-keyframes clouds {
    0%   {background-position: 30% top;}
    50%  {background-position: 60% top;}
    100% {background-position: 30% top;}
}

.home_bg2 {
	background-image: url(images/home.png);
	position:relative; z-index:2; 
	background-position:center top; background-repeat:no-repeat; 

}

.inner_bg2 {
	background-image: url(images/inner.png);
	position:relative; z-index:2; 
	background-position:center top; background-repeat:no-repeat; 
}
body {
	margin:0px;
	background-image: url(images/homebg.jpg);
	background-position: center top;

	font-family: 'Open Sans', sans-serif;
}.wrapper .home_panel {
	border-top: 3px solid #c6b63d;
	border-bottom: 14px solid #c6b63d;
	text-align: center;
	background-color: rgba(213,198,81,0.92);
	border-radius: 4px;
	max-width: 800px;
	padding: 20px 20px;
	margin: 0px auto;
	margin-top: 350px;
}
@media screen and (min-width: 768px) and (max-height: 900px) {
	.wrapper .home_panel {
		margin-top: 250px;
	}
}
@media screen and (min-width: 768px) and (max-height: 700px) {
	.wrapper .home_panel {
		margin-top: 200px;
	}
}
.wrapper .home_panel h1 {
	font-family: 'dimbo';
	line-height: 50px;
	font-size: 40px;
	text-shadow: #8f8118 2px 2px 0px;
	color: #fff;
	text-transform: uppercase;
	font-weight: normal;
}
.big_btn {
	font-family: 'dimbo';
	color: #fff;
	padding: 43px 20px;
	border-top: 2px solid #e25a00;
	border-bottom: 6px solid #e25a00;
	font-size: 65px;
	text-align:center;
	
	text-decoration: none;
	border-radius: 4px;
	background-color: #eb7400;
	display: block;
	margin: 0px auto;
	text-shadow: #c8570b 2px 2px 0px;
	text-transform: uppercase;
	max-width: 450px;
	position: relative;
	z-index:9;

}
.play_games {
	max-width: 850px;
	background-color:#fff;
	width: 80%;
	display:none;

}

.play_games a {
    display: inline-block;
    font-family: 'dimbo';
    font-size:  32px;
    background-color: #d5c651;
    color: #fff;
    text-decoration: none;
    padding:  25px;
    text-align: center;
    text-shadow: #ae9e2b 1px 1px 0px;
    border-radius: 4px;
    margin: 6px;
}
.play_games a:hover {
	background-color:#c4ba23;	
}


.play_games {
    text-align: center;
    padding:  35px;
    border-radius: 10px
}
.play_games p {
    margin-top:  0px;
    font-size: 29px;
    color: #73472d;
    font-weight: bold;
    letter-spacing: -1px;
}
.small_btn {
	display: block;
	margin: 0px auto;
	font-family: 'dimbo';
	color: #fff;
	padding: 15px 20px;
	border-top: 2px solid #dc810b;
	border-bottom: 4px solid #dc810b;
	font-size: 24px;
	max-width: 250px;
	text-decoration: none;
	border-radius: 4px;
	background-color: #f29f34;
	text-transform: uppercase;
	text-align:center;
	text-shadow: 2px 2px 0px #dc810b;
}
.footer {
	background-color: #f3c856;
	border-top: 2px solid #f09e01;
	border-bottom: 2px solid #f09e01;
	min-height: 150px;
	margin-top: 40px;
}
.footer .footer_wrapper {
	max-width: 1000px;
	margin: 0px auto;
}
.footer .footer_wrapper .social {
	float: left;
}
.footer .footer_wrapper .copy {
	color: #8c4800;
	font-size: 14px;
	padding: 20px 0px;
	text-align: right;
	float: right;
}
.footer .footer_wrapper .copy a {
	color: #613200;
	text-decoration: none;
}

.barnyard_sounds {
  margin: 0px auto;
  max-width: 1000px;

}
#logohome {
  display: block;
  float: left;
  width: 250px;
  height: 100px;
  position: relative;
  top: -20px;
}
.title {
    max-width: 1000px;
    text-align: right;
    position: relative;
	margin: 0px auto;
    margin-top: 63px;
}

.title h1 {
    font-family: 'dimbo';
    font-weight: normal;
    font-size:  76px;
    color: #002;
    text-shadow: #fff 2px 2px 0px;
    margin:  0px;
    padding-bottom: 0px;
  line-height: 76px;
}

@media screen and (min-width: 768px) and (max-width: 1100px) {
	.footer .footer_wrapper {
		max-width: 800px;
	}
	.wrapper .home_panel {
		max-width: 700px;
	}
	
	#sounds {
		transform: scale(0.78);
		-webkit-transform: scale(0.78);
  		transform-origin: 0 0;
		-webkit-transform-origin: 0 0;
		 
  
	}
	.barnyard_sounds {
		max-width: 768px;
	}
}

@media screen and (max-width: 767px) {
	.home_bg2 {
		background-size: 197%;
	}
	.home_bg1 {
		background-size: 500%;
  		animation-duration: 25s;
	}
	.footer .footer_wrapper {
		max-width: 95%;
	}
	.wrapper .home_panel {
		max-width: 95%;
		margin-top: calc(50% - 50px);
	}
	.footer .footer_wrapper .social {
		text-align:center;
		float:none;
	}
	.footer .footer_wrapper .copy {
		float:none;
		text-align:center;
	}
	body {
		
	background-size: 233%;
	}
	.wrapper .home_panel h1 {
    font-size:  29px;
    margin-top:  0px;
    line-height: 29px;
}

.wrapper .home_panel p .big_btn {
    font-size:  38px;
    max-width: 90%;
    padding: 26px 5px;
    line-height: 35px;
}

.wrapper .home_panel p .small_btn {
    font-size:  20px;
    max-width:  199px;
    padding:  10px 20px;
}
}
















#sounds {
	position:relative;
	left:0px;
	top:0px;
	width:1000px;
	height:739px;
}

#sounds-01 {
	position:absolute;
	left:0px;
	top:0px;
	width:1000px;
	height:109px;
}

#sounds-02 {
	position:absolute;
	left:0px;
	top:109px;
	width:402px;
	height:47px;
}

#sounds-03 {
	position:absolute;
	left:402px;
	top:109px;
	width:65px;
	height:36px;
}

#sounds-04 {
	position:absolute;
	left:467px;
	top:109px;
	width:271px;
	height:36px;
}

#sounds-05 {
	position:absolute;
	left:738px;
	top:109px;
	width:61px;
	height:57px;
}

#sounds-06 {
	position:absolute;
	left:799px;
	top:109px;
	width:201px;
	height:80px;
}

#sounds-07 {
	position:absolute;
	left:402px;
	top:141px;
	width:65px;
	height:11px;
}

#sounds-08 {
	position:absolute;
	left:467px;
	top:145px;
	width:96px;
	height:107px;
}

#sounds-09 {
	position:absolute;
	left:563px;
	top:145px;
	width:175px;
	height:44px;
}

#sounds-10 {
	position:absolute;
	left:0px;
	top:156px;
	width:106px;
	height:246px;
}

#sounds-11 {
	position:absolute;
	left:106px;
	top:156px;
	width:324px;
	height:236px;
}

#sounds-12 {
	position:absolute;
	left:430px;
	top:156px;
	width:37px;
	height:343px;
}

#sounds-13 {
	position:absolute;
	left:738px;
	top:166px;
	width:61px;
	height:23px;
}

#sounds-14 {
	position:absolute;
	left:563px;
	top:189px;
	width:65px;
	height:191px;
}

#sounds-15 {
	position:absolute;
	left:628px;
	top:189px;
	width:299px;
	height:191px;
}

#sounds-16 {
	position:absolute;
	left:927px;
	top:189px;
	width:73px;
	height:550px;
}

#sounds-17 {
	position:absolute;
	left:467px;
	top:252px;
	width:96px;
	height:100px;
}

#sounds-18 {
	position:absolute;
	left:467px;
	top:352px;
	width:77px;
	height:107px;
}

#sounds-19 {
	position:absolute;
	left:544px;
	top:352px;
	width:19px;
	height:147px;
}

#sounds-20 {
	position:absolute;
	left:563px;
	top:380px;
	width:19px;
	height:119px;
}

#sounds-21 {
	position:absolute;
	left:582px;
	top:380px;
	width:165px;
	height:111px;
}

#sounds-22 {
	position:absolute;
	left:747px;
	top:380px;
	width:180px;
	height:22px;
}

#sounds-23 {
	position:absolute;
	left:106px;
	top:387px;
	width:324px;
	height:10px;
}

#sounds-24 {
	position:absolute;
	left:0px;
	top:402px;
	width:62px;
	height:337px;
}

#sounds-25 {
	position:absolute;
	left:62px;
	top:402px;
	width:196px;
	height:170px;
}

#sounds-26 {
	position:absolute;
	left:258px;
	top:402px;
	width:172px;
	height:31px;
}

#sounds-27 {
	position:absolute;
	left:747px;
	top:402px;
	width:22px;
	height:337px;
}

#sounds-28 {
	position:absolute;
	left:769px;
	top:402px;
	width:117px;
	height:142px;
}

#sounds-29 {
	position:absolute;
	left:886px;
	top:402px;
	width:41px;
	height:337px;
}

#sounds-30 {
	position:absolute;
	left:258px;
	top:433px;
	width:115px;
	height:306px;
}

#sounds-31 {
	position:absolute;
	left:373px;
	top:433px;
	width:57px;
	height:75px;
}

#sounds-32 {
	position:absolute;
	left:467px;
	top:459px;
	width:77px;
	height:40px;
}

#sounds-33 {
	position:absolute;
	left:582px;
	top:483px;
	width:165px;
	height:8px;
}

#sounds-34 {
	position:absolute;
	left:430px;
	top:499px;
	width:177px;
	height:106px;
}

#sounds-35 {
	position:absolute;
	left:607px;
	top:499px;
	width:140px;
	height:240px;
}

#sounds-36 {
	position:absolute;
	left:373px;
	top:508px;
	width:57px;
	height:231px;
}

#sounds-37 {
	position:absolute;
	left:769px;
	top:544px;
	width:117px;
	height:195px;
}

#sounds-38 {
	position:absolute;
	left:62px;
	top:572px;
	width:196px;
	height:167px;
}

#sounds-39 {
	position:absolute;
	left:430px;
	top:605px;
	width:177px;
	height:134px;
}
.find_the_object {
  width: 1000px;
  margin: 0px auto;
  position: relative;
}

div#object_thumbs {
  position: absolute;
  z-index: 9;
  left: 325px;
  top: -20px;
}


.object_thumb img {
  transform: rotateX(90deg) skew(-20deg,0deg);
  transform-origin: center top;
  transition: all 700ms;
  -webkit-transition:all 700ms;

-webkit-transition-timing-function: cubic-bezier(0.670, 1, 0.760, 1); /* older webkit */
-webkit-transition-timing-function: cubic-bezier(0.670, 1.635, 0.760, 1.600); 
   -moz-transition-timing-function: cubic-bezier(0.670, 1.635, 0.760, 1.600); 
     -o-transition-timing-function: cubic-bezier(0.670, 1.635, 0.760, 1.600); 
        transition-timing-function: cubic-bezier(0.670, 1.635, 0.760, 1.600); /* custom */
}
.object_thumb img.active {
  transform: rotateX(0deg) skew(0deg,0deg);
  perspective: 150px;
  perspective-origin: 0% 0%;
}


img#canyoufind {
    position: absolute;
	z-index:9;
    left: -88px;
    top: -37px;
	transform: scale(0);
	transition: all 0.5s;
	-webkit-transition:all 0.5s;
}

img#canyoufind.active {
	transform: scale(1);
}

.confirm.active, .deny.active, .finished.active {
	display: block;
	transform: scale(1);
	-webkit-transform: scale(1);
	
	
	-webkit-transition-timing-function: cubic-bezier(0.670, 1, 0.760, 1); /* older webkit */
-webkit-transition-timing-function: cubic-bezier(0.670, 1.635, 0.760, 1.600); 
   -moz-transition-timing-function: cubic-bezier(0.670, 1.635, 0.760, 1.600); 
     -o-transition-timing-function: cubic-bezier(0.670, 1.635, 0.760, 1.600); 
        transition-timing-function: cubic-bezier(0.670, 1.635, 0.760, 1.600); /* custom */
}
.confirm_deny div {
	  position: absolute;
  top: 200px;
  width: 450px;
  left: 50%;
  z-index:99;
  margin-left: -225px;

  transform: scale(0);
  transition: all 500ms;
  -webkit-transform: scale(0);
  -webkit-transition: all 500ms;
}
.confirm_deny .confirm {
	z-index:999;
}
.confirm_deny .finished {
	z-index:9999;
}
.confirm_deny .deny {
	z-index:998;
}
.confirm {
    font-family: 'dimbo';    color: #fff;    padding: 43px 20px;    
    border-top: 2px solid #abba2c;    
    border-bottom: 6px solid #abba2c;    
    font-size: 45px;    text-align: center;    text-decoration: none;    border-radius: 4px;    
    background-color: #c4d551;    display: block;    margin: 0px auto;    
    text-shadow: #748012 2px 2px 0px, #748012 0px 0px 50px;    text-transform: uppercase;    max-width: 450px;    position: relative;    z-index: 9;
}

.finished {
    font-family: 'dimbo';    color: #fff;    padding: 43px 20px;    
    border-top: 2px solid #abba2c;    
    border-bottom: 6px solid #abba2c;    
    font-size: 55px;    text-align: center;    text-decoration: none;    border-radius: 4px;    line-height: 100%;
    background-color: #c4d551;    display: block;    margin: 0px auto;    
    text-shadow: #748012 2px 2px 0px, #748012 0px 0px 50px;    text-transform: uppercase;    max-width: 450px;    position: relative;    z-index: 9;
}

.deny {
    font-family: 'dimbo';    color: #fff;    padding: 43px 20px;    
    border-top: 2px solid #ba2c2c;    
    border-bottom: 6px solid #ba2c2c;    font-size: 45px;    text-align: center;    text-decoration: none;    border-radius: 4px;    
    background-color: #d55151;    display: block;    margin: 0px auto;    
    text-shadow: #ba2c2c 2px 2px 0px, #ba2c2c 0px 0px 50px;    text-transform: uppercase;    max-width: 450px;    position: relative;    z-index: 9;
}


#find-object {
	position:relative;
	width:800px;
	height:740px;
	top: 40px;
	margin:0px auto;
}

#find-object-01 {
	position:absolute;
	left:0px;
	top:0px;
	width:120px;
	height:259px;
}

#find-object-02 {
	position:absolute;
	left:120px;
	top:0px;
	width:49px;
	height:77px;
}

#find-object-03 {
	position:absolute;
	left:169px;
	top:0px;
	width:631px;
	height:42px;
}

#find-object-04 {
	position:absolute;
	left:169px;
	top:42px;
	width:456px;
	height:35px;
}

#find-object-05 {
	position:absolute;
	left:625px;
	top:42px;
	width:135px;
	height:138px;
}

#find-object-06 {
	position:absolute;
	left:760px;
	top:42px;
	width:40px;
	height:698px;
}

#find-object-07 {
	position:absolute;
	left:120px;
	top:77px;
	width:32px;
	height:83px;
}

#find-object-08 {
	position:absolute;
	left:152px;
	top:77px;
	width:80px;
	height:103px;
}

#find-object-09 {
	position:absolute;
	left:232px;
	top:77px;
	width:393px;
	height:220px;
}

#find-object-10 {
	position:absolute;
	left:120px;
	top:160px;
	width:32px;
	height:99px;
}

#find-object-11 {
	position:absolute;
	left:152px;
	top:180px;
	width:80px;
	height:79px;
}

#find-object-12 {
	position:absolute;
	left:625px;
	top:180px;
	width:135px;
	height:560px;
}

#find-object-13 {
	position:absolute;
	left:0px;
	top:259px;
	width:56px;
	height:481px;
}

#find-object-14 {
	position:absolute;
	left:56px;
	top:259px;
	width:97px;
	height:66px;
}

#find-object-15 {
	position:absolute;
	left:153px;
	top:259px;
	width:79px;
	height:111px;
}

#find-object-16 {
	position:absolute;
	left:232px;
	top:297px;
	width:153px;
	height:91px;
}

#find-object-17 {
	position:absolute;
	left:385px;
	top:297px;
	width:67px;
	height:91px;
}

#find-object-18 {
	position:absolute;
	left:452px;
	top:297px;
	width:173px;
	height:151px;
}

#find-object-19 {
	position:absolute;
	left:56px;
	top:325px;
	width:97px;
	height:45px;
}

#find-object-20 {
	position:absolute;
	left:56px;
	top:370px;
	width:4px;
	height:370px;
}

#find-object-21 {
	position:absolute;
	left:60px;
	top:370px;
	width:172px;
	height:102px;
}

#find-object-22 {
	position:absolute;
	left:232px;
	top:388px;
	width:99px;
	height:352px;
}

#find-object-23 {
	position:absolute;
	left:331px;
	top:388px;
	width:55px;
	height:97px;
}

#find-object-24 {
	position:absolute;
	left:386px;
	top:388px;
	width:66px;
	height:20px;
}

#find-object-25 {
	position:absolute;
	left:386px;
	top:408px;
	width:35px;
	height:77px;
}

#find-object-26 {
	position:absolute;
	left:421px;
	top:408px;
	width:31px;
	height:1px;
}

#find-object-27 {
	position:absolute;
	left:421px;
	top:409px;
	width:31px;
	height:107px;
}

#find-object-28 {
	position:absolute;
	left:452px;
	top:448px;
	width:76px;
	height:61px;
}

#find-object-29 {
	position:absolute;
	left:528px;
	top:448px;
	width:43px;
	height:61px;
}

#find-object-30 {
	position:absolute;
	left:571px;
	top:448px;
	width:54px;
	height:292px;
}

#find-object-31 {
	position:absolute;
	left:60px;
	top:472px;
	width:172px;
	height:147px;
}

#find-object-32 {
	position:absolute;
	left:331px;
	top:485px;
	width:90px;
	height:31px;
}

#find-object-33 {
	position:absolute;
	left:452px;
	top:509px;
	width:8px;
	height:7px;
}

#find-object-34 {
	position:absolute;
	left:460px;
	top:509px;
	width:54px;
	height:68px;
}

#find-object-35 {
	position:absolute;
	left:514px;
	top:509px;
	width:15px;
	height:27px;
}

#find-object-36 {
	position:absolute;
	left:529px;
	top:509px;
	width:42px;
	height:29px;
}

#find-object-37 {
	position:absolute;
	left:331px;
	top:516px;
	width:75px;
	height:224px;
}

#find-object-38 {
	position:absolute;
	left:406px;
	top:516px;
	width:54px;
	height:52px;
}

#find-object-39 {
	position:absolute;
	left:514px;
	top:536px;
	width:14px;
	height:41px;
}

#find-object-40 {
	position:absolute;
	left:528px;
	top:536px;
	width:1px;
	height:2px;
}

#find-object-41 {
	position:absolute;
	left:528px;
	top:538px;
	width:1px;
	height:39px;
}

#find-object-42 {
	position:absolute;
	left:529px;
	top:538px;
	width:42px;
	height:202px;
}

#find-object-43 {
	position:absolute;
	left:406px;
	top:568px;
	width:54px;
	height:172px;
}

#find-object-44 {
	position:absolute;
	left:460px;
	top:577px;
	width:69px;
	height:163px;
}

#find-object-45 {
	position:absolute;
	left:60px;
	top:619px;
	width:8px;
	height:121px;
}

#find-object-46 {
	position:absolute;
	left:68px;
	top:619px;
	width:79px;
	height:74px;
}

#find-object-47 {
	position:absolute;
	left:147px;
	top:619px;
	width:85px;
	height:121px;
}

#find-object-48 {
	position:absolute;
	left:68px;
	top:693px;
	width:79px;
	height:47px;
}


/* Wobble Vertical */
@-webkit-keyframes hvr-wobble-vertical {
  16.65% {
    -webkit-transform: translateY(8px);
    transform: translateY(8px);
  }

  33.3% {
    -webkit-transform: translateY(-6px);
    transform: translateY(-6px);
  }

  49.95% {
    -webkit-transform: translateY(4px);
    transform: translateY(4px);
  }

  66.6% {
    -webkit-transform: translateY(-2px);
    transform: translateY(-2px);
  }

  83.25% {
    -webkit-transform: translateY(1px);
    transform: translateY(1px);
  }

  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes hvr-wobble-vertical {
  16.65% {
    -webkit-transform: translateY(8px);
    transform: translateY(8px);
  }

  33.3% {
    -webkit-transform: translateY(-6px);
    transform: translateY(-6px);
  }

  49.95% {
    -webkit-transform: translateY(4px);
    transform: translateY(4px);
	
  }

  66.6% {
    -webkit-transform: translateY(-2px);
    transform: translateY(-2px);
  }

  83.25% {
    -webkit-transform: translateY(1px);
    transform: translateY(1px);
  }

  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

.hvr-wobble-vertical {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
}
.hvr-wobble-vertical:hover, .hvr-wobble-vertical:focus, .hvr-wobble-vertical:active {
  -webkit-animation-name: hvr-wobble-vertical;
  animation-name: hvr-wobble-vertical;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
}




.home_welcome { transform: translate(-118px, 0px); opacity: 0; transition: all 0.5s; -webkit-transition: all 0.5s;}
.home_welcome.active { transform: translate(0px, 0px); opacity: 1 ;}

.home_panel { transform: perspective( 600px ) rotateX( -270deg ) scale(0.2); transition: all 1s;}
.home_panel.active { transform: perspective( 600px ) rotateX( 0deg ) scale(1); }

.big_btn, .small_btn { 
transition: all 0.5s;
-webkit-transition: all 0.5s;
-webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.645, 1); /* older webkit */
-webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.645, 1.650); 
   -moz-transition-timing-function: cubic-bezier(0.175, 0.885, 0.645, 1.650); 
     -o-transition-timing-function: cubic-bezier(0.175, 0.885, 0.645, 1.650); 
        transition-timing-function: cubic-bezier(0.175, 0.885, 0.645, 1.650); /* custom */
		
		
}

.barnyard .big_btn {
	margin-top: -113px;
}
.home .big_btn {
	transform: scale(0);
	-webkit-transform: scale(0);
}

.big_btn.active, .small_btn.active {
	transform: scale(1);
	-webkit-transform: scale(1);
}
.small_btn {-webkit-transition: all 1s; transition: all 1s; transform: scale(0) perspective( 600px ) rotateX( -270deg ) ; -webkit-transform: scale(0) perspective( 600px ) rotateX( -270deg ) ; }
.small_btn.active { transform: scale(1) perspective( 600px ) rotateX( 0deg ); -webkit-transform: scale(1) perspective( 600px ) rotateX( 0deg ); }

.big_btn:hover {
	background-color:#ff9936;
	transform: scale(1.1);
	transition: all 0.35s;
	-webkit-transform: scale(1.1);
	-webkit-transition: all 0.35s;
	border-color:#ff761b;
	text-shadow: 2px 2px 0px #ff761b;
-webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.645, 1); /* older webkit */
-webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.645, 1.650); 
   -moz-transition-timing-function: cubic-bezier(0.175, 0.885, 0.645, 1.650); 
     -o-transition-timing-function: cubic-bezier(0.175, 0.885, 0.645, 1.650); 
        transition-timing-function: cubic-bezier(0.175, 0.885, 0.645, 1.650); /* custom */
	
}
.small_btn:hover {
	background-color:#e38000;
	transform: scale(1.1);
	transition: all 0.2s;
	-webkittransform: scale(1.1);
	-webkittransition: all 0.2s;
	border-color:#b56600;
	text-shadow: 2px 2px 0px #b56600;
-webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.645, 1); /* older webkit */
-webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.645, 1.650); 
   -moz-transition-timing-function: cubic-bezier(0.175, 0.885, 0.645, 1.650); 
     -o-transition-timing-function: cubic-bezier(0.175, 0.885, 0.645, 1.650); 
        transition-timing-function: cubic-bezier(0.175, 0.885, 0.645, 1.650); /* custom */
	
}


@keyframes playgames {
    0%   {transform: perspective( 600px ) rotateX( -270deg ) scale(0.2);}
    100% {transform: perspective( 600px ) rotateX( 0deg ) scale(1);}
}
@-webkit-keyframes playgames {
    0%   {-webkit-transform: perspective( 600px ) rotateX( -270deg ) scale(0.2);}
    100% {-webkit-transform: perspective( 600px ) rotateX( 0deg ) scale(1);}
}
.play_games {
	animation-name: playgames;
    animation-duration: 1s;
	animation-iteration-count:1;	
	-webkit-animation-name: playgames;
    -webkit-animation-duration: 1s;
	-webkit-animation-iteration-count:1;	
}


div#match {
    margin: 0px auto;
  width: 930px;
  background-color: #fff;
  position: relative;
  left: 32px;
}

.thumbs {
float: left;
  width: 258px;
  position: relative;
  padding: 15px 0px;
}
.thumbs img {
	margin: 0px auto;
	display:block;
}

.main {
position: relative;
  width: 670px;
  float: left;
  padding: 15px 0px;
}

.main img {
}

.confirm_deny div.finished {
    width: 550px;
    max-width: 550px;
}

a.play_again {
    display: block;
    color: #fff;
    font-size: 26px;
    text-decoration: none;
    width: 151px;
    margin:  0px auto;
    background-color: #fff;
    border-radius: 9px;
    margin-top:  18px;
    color: #abba2c;
    text-shadow: none;
    padding:  2px 0px 0px;
    text-transform: none;
    transition: all 0.2s;
	-webkit-transition: all 0.2s;
    outline-color: rgba(255,255,255,1);
    outline-style: solid;
    outline-width: 0px;
}

a.play_again:hover {
    outline-width: 10px;
    outline-color: rgba(255,255,255,0);
}



@media screen and (min-width: 768px) and (max-width: 992px) {

	div#match {	
		transform: scale(0.75); 
		-webkit-transform: scale(0.75);  
	}
	
	.title {
		max-width: 667px;
		margin-right:  20px;
		margin-top:  18px;
	}
	div#match {
  margin: -77px 0px -51px -123px;
}
	a#logohome {
		position: absolute;
	}
	
	.inner_bg2 {
		background-size: 1300px;
	}
	
	.footer .footer_wrapper {
		max-width: 700px;
		margin:  0px auto;
	}
	
	.wrapper {
		width: 751px;
		overflow: hidden;
	}
	
	.find_the_object {
  transform: scale(0.8);
  -webkit-transform: scale(0.8);
  margin-left: -124px;
  margin-top: -56px;
	}
	

	
}


	
@media screen and (max-width: 767px) {
	

	.confirm_deny div.finished {
    font-size:  35px;
    width: 100%;
    left: 0;
    top: 83px;
    margin: 0px;
}

.play_games a {
    font-size:  23px;
    padding: 14px;
    margin:  5px 0px;
    width:  100%;
}

.play_games p {
    font-size:  18px;
}

	.inner_bg2 {
    background-size: 800px;
    background-position: left -173px top;
}

.title {
    margin-top:  0px;
    margin:  0px 20px;
}

.title h1 {
    font-size: 36px;
    line-height: 40px;
    margin-top: 12px;
}

a#logohome {
    position: absolute;
    top: 0;
}

.title p {
    margin-left:  30px;
    font-size:  12px;
    line-height: 16px;
    margin-top:  0px;
}

div#match {
    width:  100%;
    left:  0;
    overflow: hidden;
}

.thumbs {
    float: none;
    width:  100%;
}

.thumb img {
    width:  100%;
    height:  auto;
}

#match .thumb {
    width:  25%;
    float: none;
    display: inline-block;
    height: auto;
}

#match .main {
    width:  100%;
    float: none;
    overflow: hidden;
	margin-top: 10px;
}

#match .main img {
    width:  100%;
    height:  auto;
}

a.big_btn {
    font-size:  30px;
    width: 250px;
    padding: 20px 10px;
}

.barnyard_sounds {
    width: 100%;
	max-width: 100%;
  margin-top: -108px;
	transform: scale(0.4);
	-webkit-transform: scale(0.4);
}

div#sounds {
    
  left: 0px;
  margin-left: -315px;
  margin-bottom: -229px;
  margin-top: -162px;
}

div#find-object {
    transform: scale(0.48);
	-webkit-transform: scale(0.48); 
    margin-left: -238px;
    margin-top: -198px;
    margin-bottom:  -156px;
}

.find_the_object {
    width:  100%;
   overflow:hidden;
}


div#object_thumbs {
    left: -23px;
    transform: scale(0.45);
	-webkit-transform: scale(0.45);
    top: -56px;
}
}


.ua-mobile .hideOnMobile {
	display: none;
}
.ua-desktop .hideOnDesktop { 
display:none;
}


.ua-mobile .finished,
.ua-mobile .confirm,
.ua-mobile .deny {
	opacity: 0;
	-webkit-opacity: 0;
}
.ua-mobile .finished.active,
.ua-mobile .confirm.active,
.ua-mobile .deny.active {
	opacity: 1;
	-webkit-opacity: 1;
}