@charset "UTF-8";
/* CSS Document */

.img-avescdmx-lg{
	display: none;
	height:0;
	padding:0;
	margin:0;
}

.img-avescdmx-sm{
	display: block;
	height:200px;
	background-image: url('../images/especies/aves_cdmx/img_avescolor.jpg');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	padding:0;
}

.aves-card {
	padding:10px 20px 10px 20px;
	margin-bottom: 20px;
	background-color: #fff;
	-webkit-box-shadow: 2px 2px 8px 1px rgba(0,0,0,0.2);
	-moz-box-shadow: 2px 2px 8px 1px rgba(0,0,0,0.2);
	box-shadow: 2px 2px 8px 1px rgba(0,0,0,0.2);
}

.aves-card h3{
	text-align: left;
	padding-top:15px;
}

.aves-card h4 {
	text-align: left;
	line-height:1;
	font-weight: 300;
	color:#666;
}

.ave-imagen {
	padding:10px 0 10px 0;
	max-width:100px;
}

.play-btn {
	padding:28px 10px 0 0;
	text-align: right;
}

button.play-xs {
	border:0;
	color:#766e4e;
	background-color: #fff;
	padding:0;
	margin:0;
}

button.play-xs :hover {
	color:#544a22;
}

.enlace-ev{
		text-align: right;
	}

@media (min-width: 451px) {
	.img-avescdmx-sm {
		height:260px;
	}
	
}
@media (max-width: 639px) {
	
	.aves-card h3{
		padding-top:10px;
		padding-left:10px;
	}
	
	.aves-card h4{
		padding-left:10px;
	}
	
	.ave-imagen {
		max-width:80px;
	}
	
	.play-btn {
		padding:25px 10px 0 0;
	}
}

@media (min-width:640px) {
	.img-avescdmx-sm {
		height:380px;
	}
}
@media (min-width:640px) and (max-width:767px) {
	.ave-imagen {
		max-width:100px;
	}
}

@media (max-width:767px) {
	
	.play-xs {
		visibility:visible;
		margin-bottom:-20px;
		padding-bottom:0;
	}
	
	.play-sm {
		visibility:hidden;
	}
	
}

@media (min-width: 768px) {
	
	.img-avescdmx-lg {
		display:block;
		height:480px;
	}
	
	.img-ave {
		cursor:pointer;
		transition: .5s ease;
		-moz-transition: .5s ease; 
		-webkit-transition: .5s ease;
		-o-transition: .5s ease;
		-ms-transition: .5s ease; 
    	filter: grayscale(85%);
		-webkit-filter: grayscale(85%); 
	}
	
	.no-filter{
		filter: none !important;
		-webkit-filter: none !important; 
	}
	
	.big-bird {
		filter: none !important;
		-webkit-filter: none !important; 
		transform: scale(2);
		-moz-transform: scale(2); 
		-webkit-transform: scale(2); 
		-o-transform: scale(2);
		-ms-transform: scale(2);
	}
	
	#mirlop {
		width:60px !important;
		position:relative;
		top:-450px;
		left:5.6%;
		z-index: 2;
		transition: .5s ease;
		-moz-transition: .5s ease; 
		-webkit-transition: .5s ease;
		-o-transition: .5s ease;
		-ms-transition: .5s ease; 
    	filter: grayscale(85%);
		-webkit-filter: grayscale(85%); 
	}
	
	
	
	#jilguerodom {
		width:60px !important; 
		position:relative;
		top:-455px !important;
		left:16.3%;
		z-index: 2;
		
	}
	
	#cuitlacoche {
		width:70px !important; 
		position:relative;
		top:-480px !important;
		left:5.5%;
		z-index: 2;
	}
	
	#pinzonmex {
		width:60px !important; 
		position:relative;
		top:-527px !important;
		left:13.2%;
		z-index: 2;
	}
	
	#carpinteromex {
		width:70px !important; 
		position:relative;
		top:-493px !important;
		left:.01%;
		z-index: 2;
	}
	
	#colibrib {
		width:52px !important; 
		position:relative;
		top:-578px !important;
		left:7.8%;
		z-index: 2;
	}
	
	#colibripa {
		width:55px !important; 
		position:relative;
		top:-630px !important;
		left:18%;
		z-index: 2;
	}
	
	#chipec {
		width:60px !important; 
		position:relative;
		top:-693px !important;
		left:27%;
		z-index: 2;
	}
	
	#zanate {
		width:75px !important; 
		position:relative;
		top:-655px !important;
		left:34%;
		z-index: 2;
	}
	
	#mirlodr {
		width:72px !important; 
		position:relative;
		top:-683px !important;
		left:43%;
		z-index: 2;
	}
	
	#gcantor {
		width:52px !important; 
		position:relative;
		top:-850px !important;
		left:54.2%;
		z-index: 2;
	}
	
	#ptigrillo {
		width:52px !important; 
		position:relative;
		top:-885px !important;
		left:58.5%;
		z-index: 2;
	}
	
	#tortola {
		width:55px !important; 
		position:relative;
		top:-914px !important;
		left:64%;
		z-index: 2;
	}
	
	#toquip {
		width:65px !important; 
		position:relative;
		top:-879px !important;
		left:65.8%;
		z-index: 2;
	}
	
	#gcasero {
		width:55px !important; 
		position:relative;
		top:-1080px !important;
		left:68.8%;
		z-index: 2;
	}
	
	#pitit {
		width:78px !important; 
		position:relative;
		top:-1286px !important;
		left:68.8%;
		z-index: 2;
	}
	
	#sastrecillo {
		width:70px !important; 
		position:relative;
		top:-1350px !important;
		left:80.2%;
		z-index: 2;
	}
	
	#tordoor {
		width:66px !important; 
		position:relative;
		top:-1361px !important;
		left:82.5%;
		z-index: 2;
	}
	
	#chivirinco {
		width:57px !important; 
		position:relative;
		top:-1306px !important;
		left:86%;
		z-index: 2;
	}
	
	#mosqueroc {
		width:60px !important; 
		position:relative;
		top:-1642px !important;
		left:92%;
		z-index: 2;
	}

	.img-avescdmx-sm {
		display: none;
		height:0;
	}
	.aves-card {
		padding:10px 10px;
	}
	.ave-imagen {
		padding:0;
		max-width:120px;
		margin: 10px auto 0 auto;
	}
	
	.aves-card h3{
		font-size:1.8em;
		text-align: center;
		padding-top:12px;
	}

	.aves-card h4 {
		text-align: center;
		font-size:1.5em;
	}
	.play-btn {
		padding:10px 0 0 0;
	}
	.play-xs {
		visibility:hidden;
	}
	.play-sm {
		visibility:visible;
		margin-top:-35px;
		margin-bottom:15px;
	}

}

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

@media (min-width: 992px) {
	
	.img-avescdmx-lg {
		display:block;
		height:620px;
	}
	
	#mirlop {
		width:75px !important; 
		position:relative;
		top:-580px !important;
		left:6.2%;
		z-index: 2;
	}
	
	#jilguerodom {
		width:75px !important; 
		position:relative;
		top:-580px !important;
		left:16.1%;
		z-index: 2;
	}
	
	#cuitlacoche {
		width:85px !important; 
		position:relative;
		top:-610px !important;
		left:5.5%;
		z-index: 2;
	}
	
	#pinzonmex {
		width:75px !important; 
		position:relative;
		top:-668px !important;
		left:13.2%;
		z-index: 2;
	}
	
	#carpinteromex {
		width:85px !important; 
		position:relative;
		top:-625px !important;
		left:.01%;
		z-index: 2;
	}
	
	#colibrib {
		width:65px !important; 
		position:relative;
		top:-725px !important;
		left:7.8%;
		z-index: 2;
	}
	
	#colibripa {
		width:65px !important; 
		position:relative;
		top:-795px !important;
		left:18%;
		z-index: 2;
	}
	
	#chipec {
		width:65px !important; 
		position:relative;
		top:-860px !important;
		left:28%;
		z-index: 2;
	}
	
	#zanate {
		width:85px !important; 
		position:relative;
		top:-798px !important;
		left:34%;
		z-index: 2;
	}
	
	#mirlodr {
		width:82px !important; 
		position:relative;
		top:-825px !important;
		left:43%;
		z-index: 2;
	}
	
	#gcantor {
		width:58px !important; 
		position:relative;
		top:-1031px !important;
		left:54.9%;
		z-index: 2;
	}
	
	#ptigrillo {
		width:60px !important; 
		position:relative;
		top:-1067px !important;
		left:58.7%;
		z-index: 2;
	}
	
	#tortola {
		width:60px !important; 
		position:relative;
		top:-1097px !important;
		left:65%;
		z-index: 2;
	}
	
	#toquip {
		width:75px !important; 
		position:relative;
		top:-1039px !important;
		left:66%;
		z-index: 2;
	}
	
	#gcasero {
		width:67px !important; 
		position:relative;
		top:-1292px !important;
		left:68.8%;
		z-index: 2;
	}
	
	#sastrecillo {
		width:78px !important; 
		position:relative;
		top:-1626px !important;
		left:80%;
		z-index: 2;
	}
	
	#pitit {
		width:90px !important; 
		position:relative;
		top:-1563px !important;
		left:68.8%;
		z-index: 2;
	}
	
	#tordoor {
		width:80px !important; 
		position:relative;
		top:-1631px !important;
		left:82.5%;
		z-index: 2;
	}
	
	#chivirinco {
		width:65px !important; 
		position:relative;
		top:-1550px !important;
		left:87%;
		z-index: 2;
	}
	
	#mosqueroc {
		width:70px !important; 
		position:relative;
		top:-1980px !important;
		left:92.3%;
		z-index: 2;
	}
}

@media (min-width: 1200px) {
	
}

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

}

@media (min-width: 1681px) {
		
	
}

@media (min-width: 1681px) and (max-width: 1920px) {

}

@media (min-width: 1921px) and (max-width: 2560px) {

}