:root {
	--grey:  #8c8279;
	--grey2: #b6ada5;
	--yellow: #ffb549;
	--blue: #00c1d5;
	--red: #ff585d;
	--purple: #9f5cc0;
}

body{
  display: block;
	max-width:100%;
	height: 100%;
	font-family:'COMFORTAA', NEUCHA;
	display: contents;
	overflow-x: hidden;
  background-color: transparent;
}
h5{
	line-height: 3;
	font-size: 1.1rem;
}
h2{
	line-height: 3;
}
h3{
	text-align: center;
}

h6{
	font-size:.6rem;
}
.usa{
	padding: 16px;
}
.ContainerHeader {
	background-size: cover;
    background-image:url(image/cabecera.jpg);
    width: 100%;
    display: flex;
    height: 100px;
    padding-bottom:none;
    padding-top:none;
}
.ContainerHeader1 {
    background-color: var(--blue);
    width: 100%;
    display: flex;
    height: 100px;
    padding-bottom:none;
    padding-top: none;
}
.Containerfondo{
    background:url:image/cabecera.jpg;
    width: 100%;
    display: flex;
    height: 100px;
		position: absolute;
		top: 100px;

}
.Containerinicio {
    background-color: var(--grey);
    width: 100%;
    height: 800px;
    padding-bottom:none;
    padding-top: none;
}
.iconousa{
	width: 50px;
	margin-left:5%;
	margin-top:0%;

}
.Container{
  background-color: var(--grey2);
  width: 32%;
  height: 60px;
  text-align: center;
  border-radius: 10px;
  position: absolute;
  top:40px;
  right: 15px;
}
/*---MENU HAMBURGUESA--*/
.MenuSpan{
	display: none;
}
.sidenav1 {
	height: 70%;
	width: 0;
	position: fixed;
	z-index: 3;
	top: 0;
	right:0;
	background-color: var(--grey2);
	overflow-y: hidden;
	transition: 0.5s;
	padding-top: 20%;
	text-align: center;
}

.sidenav1 a {
		padding: 0px 0px 10% 0px;
		text-decoration: none;
		font-size: 1em;
		color: black;
		display: block;
		transition: 0.3s;
}

.sidenav1 a:hover {
		color: var(--blue);
}
.sidenav1 .closebtn {
		position: absolute;
		top: 0;
		right: 20px;
		font-size: 5em;
		margin-left: 50px;
}
#main1 {
		transition: margin-left .5s;
}
.Contfooter{
	color: white;
  text-align: left;
	font-family: 'COMFORTAA';
  position: relative;
	top: 40px;
	padding: 10px;
}
.Contfooter1{
	color: white;
  text-align: right;
	font-family: 'COMFORTAA';
  position: relative;
	top: 0px;
	right: 20px;
}
.imgredes{
	width: 30px;
	height: 30px;
	border-radius: 7px;
	padding: 2px;
}
.paw{
  height: 90%;
  position: absolute;
  top: 9px;
  right: 5px
}
.containerNav {
  width: 100%;
  background-color: var(--grey);
}

.contmenu{
  width: 150px;
  height: 620px;
}
.logo{
  height: 350px;
  width: 400px;
  position: relative;
  top: 20px;
  right: 15px;
}

.contboton{
	width: 150px;
	height: 80px;
	position: relative;
	top: 100%;
	left: 42%;
}
.contboton img{
	position: absolute;
}
.contboton img.top:hover {
	opacity: 0;

}
ul.circulos {
width: 70%;
float: right;
margin: 20px auto;
text-align: center;
list-style-type: none;
font: bold 14px;
text-transform: uppercase;
padding: 15px;
}
ul.circulos1 {
width: 50%;
float: left;
list-style-type: none;
}
ul.circulos li {
display: inline;
margin: 0;
padding: 0;
list-style-type: none;
}
ul.circulos1 li a {
display: inline-block;
text-decoration: none;
background: White;
padding: 5px;
width:380px;
height:380px;
border-radius: 225px;
position: absolute;
top: 80px;
left: 80px;
}
ul.circulos2  a {
display: inline-block;
text-decoration: none;
background: var(--grey2);
padding: 5px;
width:480px;
height:480px;
border-radius: 275px;
position: absolute;
top: 35px;
left: 30px;
}
ul.circulosng  a {
display: inline-block;
text-decoration: none;
background: var(--grey2);
padding: 5px;
width:160px;
height:160px;
border-radius: 225px;
position: absolute;
top:130px;
right: 510px;
}
ul.circulosnc li a {
display: inline-block;
text-decoration: none;
color: black;
background: var(--grey);
padding: 5px;
width:130px;
height:130px;
border-radius: 200px;
position: absolute;
top: 144px;
right: 525px;
}
ul.circulosag  a {
display: inline-block;
text-decoration: none;
background: var(--grey2);
padding: 5px;
width:160px;
height:160px;
border-radius: 225px;
position: absolute;
top:130px;
right: 350px;
}
ul.circulosac li a {
display: inline-block;
text-decoration: none;
color: black;
background: var(--grey);
padding: 5px;
width:130px;
height:130px;
border-radius: 200px;
position: absolute;
top: 144px;
right: 365px;
}
ul.circulosig  a {
display: inline-block;
text-decoration: none;
background: var(--grey2);
padding: 5px;
width:160px;
height:160px;
border-radius: 225px;
position: absolute;
top:130px;
right: 190px;
}
ul.circulosic li a{
display: inline-block;
text-decoration: none;
color: black;
background: var(--grey);
padding: 5px;
width:130px;
height:130px;
border-radius: 200px;
position: absolute;
top: 144px;
right: 205px;
}
ul.circuloscg  a {
display: inline-block;
text-decoration: none;
background: var(--grey2);
padding: 5px;
width:160px;
height:160px;
border-radius: 225px;
position: absolute;
top:130px;
right: 30px;
}
ul.circuloscc li a {
display: inline-block;
text-decoration: none;
color: black;
background: var(--grey);
padding: 5px;
width:130px;
height:130px;
border-radius: 200px;
position: absolute;
top: 144px;
right: 45px;
}
ul.circulosnc a span {
position: relative;
top:60%;
padding:8%;
text-align: center;
}
ul.circulosng a:hover {
background: var(--blue);
}
ul.circulosac a span {
position: relative;
top:60%;
padding: 20%;
text-align: center;
}
ul.circulosag a:hover {
background: var(--yellow);
}
ul.circulosic a span {
position: relative;
top:60%;
padding: 3%;
text-align: center;
font-size: 83%;
}
ul.circulosig a:hover  {
background: var(--red);
}
ul.circuloscc a span {
position: relative;
top:60%;
padding: 10%;
text-align: center;
}
ul.circuloscg a:hover {
background: var(--purple);
}

/*SLIDER INICIO*/

.sliderInicio{
	width: 100%;
  height: 800px;
}
.animacion{
animation: changeBackground 10s infinite linear;
transition: all 0.8s linear;

}
@keyframes changeBackground {
	0% {
		width: 100%;
		height: 800px;
		background-color: transparent;
		background:url("../image/slider/01.png") center no-repeat;
		background-size:cover;
		background-repeat: no-repeat;
		background-position: center;
		transition: all 0.8s linear;
	}

	50% {
		width: 100%;
		height: 800px;
		background-color: transparent;
		background:url("../image/slider/02.png") center no-repeat;
		background-size:cover;
		background-repeat: no-repeat;
		background-position: center;
		transition: all 0.8s linear;
	}

	100% {
		width: 100%;
		height: 800px;
		background-color: transparent;
		background:url("../image/slider/03.png") center no-repeat;
		background-size:cover;
		background-repeat: no-repeat;
		background-position: center;
		transition: all 0.8s linear;
	}
}

@keyframes  {
    0% {
        margin-left: 0;
    }

    30% {
        margin-left: 0;
    }

    35% {
        margin-left: -100%;
    }

    65% {
        margin-left: -100%;
    }

    70% {
        margin-left: -200%;
    }

    95% {
        margin-left: -200%;
    }

    100% {
        margin-left: 0;
    }
}




.Continicio{
  width: 100%;
  height: 800px;
  background-color: transparent;
  background:url("../image/casa.png") center no-repeat;
  background-size:cover;
	background-repeat: no-repeat;
	background-position: center;
}
.Contnosotros{
  width: 100%;
	position:relative;
  background-color: var(--dark);
  background-size:cover;
	background-repeat: no-repeat;
	background-position: center;
  display:flex;
}
.Contadopta{
  width: 100%;
  height: auto;
	position: relative;
  background-color: transparent;
  background-size:cover;
	background-repeat: no-repeat;
	background-position: center;
  display:flex;
}

.Continstala{
  width: 100%;
  height:auto;
	position: relative;
  background-color: transparent;
  background-size:cover;
	background-repeat: no-repeat;
	background-position: center;
  display:flex;
}
.Contreal{
  width: 100%;
  height: auto;
	position: relative;
  background-color: transparent;
  background-size:cover;
	background-repeat: no-repeat;
	background-position: center;
  display:flex;
}
.Contapoyo{
  width: 100%;
  height: auto;
	position:relative;
  background-color: transparent;
  background-size:cover;
	background-repeat: no-repeat;
	background-position: center;
  display:block;
}
.Contagrade{
  width: 100%;
  height: auto;
  background-color: transparent;
  background-size:cover;
	background-repeat: no-repeat;
	background-position: center;
  display:flex;
}
.Contcontacto{
  width: 100%;
  height: auto;
  background-color: transparent;
  background-size:cover;
	background-repeat: no-repeat;
	background-position: center;
  display:flex;
}
.imagensomos{
	width: 600px;
	height: 600px;
	border-radius: 50%;
	margin-top: 18%;
	margin-bottom: 5%;
	margin-left: 2%;
	margin-right: 2%;
}
.somos{
	background-color: var(--blue);
	width: 50%;
	height: 120%;
	margin-right: 2%;
	margin-left: 2%;
}
.somos1{
	background-color: var(--white);
	margin: 30px;
	width: 90%;
	height:94%;
	position: relative;
	top:-1%;
	right: auto;
	left: auto;
	padding: 10%;
	text-align: justify;
}
.texsomos{
	font-size: medium;
	text-align: justify;

}
.adop{
	background-color: var(--yellow);
	width: 450px;
	height: 115px;
	position: absolute;
	margin-left: 33%;
	margin-top: 5%;
	color: white;
	font-family: "COMFORTAA";
	text-align: center;
}
.adop1{
	background-color: var(--gray-dark);
	width: 450px;
	height: 100px;
	position: relative;
}
.iconoa{
	width: 35%;
	position: relative;
	top:-125px;
	left: 233px;
}
.fondoadop{
	width: 38%;
	margin-left: 62%;
	margin-top: 18%;
	position: relative;
}
.imagenadop{
	width: 690px;
	height: 690px;
	border-radius: 50%;
}
.comoadop{
	width: 580px;
	height:580px;
	border-radius:50%;
	background-color: grey;
	position: absolute;
	z-index: 2;
	right:2%;
	margin-top: 40%;

}
.texto{
	width: 80%;
	height: 40%;
	text-align: center;
	color: var(--white);
	font-family: "COMFORTAA";
	padding: 5%;
	position: relative;
	top: 8%;
	left: 10%;
	font-size: large;
}
.contvol{
	width: 100%;
	height: auto;
}
.voluntario{
	width: 80%;
	height: 100%;
	position: relative;
	left: 10%;
}
.vol{
	display: none;
}
.voluntario1{
	display: none;
}
.voluntam{
	height: 850px;
}
.textvol{
	width: 80%;
	height: 40%;
	text-align: justify;
	position: relative;
	margin-top: -33%;
	left: 10%;
	padding:5%;
	background: #f3f3f3;
	font-family: "COMFORTAA";
	font-size: 1rem;
}
.boton{
	background: var(--grey2);
	width: 20%;
	margin-top: 3%;
}

.botonM{
	background: var(--grey2);
	width: 50%;
	margin-top: 3%;
}

.boton1{
	background: var(--grey2);
	width: 250px;
	position: relative;
	left: 35%;
}
.fondoinstal{
	width: 100%;
	position: relative;
}
.insta{
	background-color: var(--red);
	width: 450px;
	position: absolute;
	height: 115px;
	margin-left: 33%;
	margin-top: 5%;
	color: white;
	font-family: "COMFORTAA";
	text-align: center;
}
.insta1{
	background-color: var(--gray-dark);
	width: 450px;
	height: 100px;
	position: relative;
}
.imageninsta{
	width: 450px;
	height: 450px;
	border-radius: 300px;
	position: absolute;
	left: 5%;
	margin-top: 35%;
}
.imageninsta1{
	width: 450px;
	height: 450px;
	border-radius: 300px;
	position: absolute;
	right:5%;
	margin-top: 15%;
}
.alimento{
	width:160px;
	height:160px;
	border-radius: 200px;
	background-color: var(--red);
	position:absolute;
	right:70%;
	margin-top:20%;
}
.refugio{
	width: 190px;
	height: 190px;
	border-radius: 200px;
	background-color: var(--red);
	position: absolute;
	right: 51%;
	margin-top: 25%;
}
.adopcion{
	width: 160px;
	height: 160px;
	border-radius: 200px;
	background-color: var(--red);
	position: absolute;
	left: 45%;
	margin-top:43%;
}
.antirrab{
	width: 190px;
	height: 190px;
	border-radius: 200px;
	background-color: var(--red);
	position: absolute;
	left: 60%;
	margin-top:50%;
}
.veterinario{
	width: 160px;
	height: 160px;
	border-radius: 200px;
	background-color: var(--red);
	position: absolute;
	left: 80%;
	margin-top: 48%;
}
.alimento span {
position: relative;
top:33%;
left: 26%;
text-align: center;
}
.refugio span {
position: relative;
top:44%;
left: 20%;
text-align: center;
}
.adopcion span {
position: relative;
top:33%;
left: 26%;
text-align: center;
}
.antirrab span {
position: relative;
top:37%;
left: 22%;
text-align: center;
}
.veterinario span {
position: relative;
top:40%;
left: 15%;
text-align: center;
}
.descripinsta{
	width: 70%;
	height: 100px;
	background-color: #8C827991;
	position: relative;
	top: -560px;
	left: 35%;
	text-align: justify;
	padding: 10px;
}
.casoreal{
	background-color: var(--purple);
	width: 450px;
	height: 115px;
	position: absolute;
	margin-left: 33%;
	margin-top: 5%;
	color: white;
	font-family: "COMFORTAA";
	text-align: center;
}
.casoreal1{
	background-color: var(--gray-dark);
	width: 450px;
	height: 100px;
	position: relative;
}
.figuracaso{
	width: 250px;
	height: 250px;
	border-radius: 200px;
	background-color: var(--purple);
	position: absolute;
	right: 57%;
	top:-114px;
	z-index: 1;
}
.figuracaso span {
position: relative;
top:41%;
left: 33%;
text-align: center;
}
.figuracaso1{
	width: 250px;
	height: 250px;
	border-radius: 200px;
	background-color: var(--purple);
	position: absolute;
	right: 40%;
	top: -135px;
	z-index: 1;
}
.figuracaso1 span {
position: relative;
top:41%;
left: 33%;
text-align: center;
}
.figuracaso2{
	width: 250px;
	height: 250px;
	border-radius: 200px;
	background-color: var(--purple);
	position: absolute;
	right: 24%;
	top:-119px;
	z-index: 1;
}
.figuracaso2 span {
position: relative;
top:41%;
left: 33%;
text-align: center;
}
.figuracaso3{
	width: 250px;
	height: 250px;
	border-radius: 200px;
	background-color: var(--purple);
	position: absolute;
	right: 190px;
	top: 290px;
}
.imagencaso{
	width: 200px;
	height: 200px;
	border-radius: 200px;
	position: relative;
	right:23%;
	top:-31%;
}

.fondocaso{
	width: 100%;
	height: 650px;
	position:relative;
	right:450px;
	top: 450px;
}
.colort{
	width: 100%;
	height: 650px;
	background-color: #a778c687;
	position: absolute;
	top: 450px;
}
.casotxt{
	background-color: #a58cbd80;
	margin: 58px;
	margin-top: 43px;
	width: 90%;
	height: 87%;
	position: relative;
	padding: 100px;
	text-align: center;
}
.apoyo{
	background-color: var(--blue);
	width: 450px;
	height: 115px;
	position: absolute;
	top: 15%;
	margin-left: 33%;
	color: white;
	font-family: "COMFORTAA";
	text-align: center;
}
.apoyo1{
	background-color: var(--gray-dark);
	width: 450px;
	height: 100px;
	position: relative;
}
.fondoapoyo{
	width: 100%;
	position:relative;
	margin-left: -45%;
	margin-top: 5%;
}
.huella{
	width: 45%;
	height: 30%;
	background-color: #8c827952;
	color: var(--white);
	font-family: "COMFORTAA";
	font-size: 1.3rem;
	text-align: center;
	position: absolute;
	top: 30%;
	right: 51%;
}
.huella1{
	width: 100%;
	height: 94%;
	background-color: var(--grey2);
	color: var(--white);
	font-family: "COMFORTAA";
	text-align: justify;
	position: relative;
	top: -4%;
	right: 3%;
	padding: 8%;
}
.padrino{
	width: 45%;
	height: 30%;
	background-color: #8c827952;
	color: var(--white);
	font-family: "COMFORTAA";
	text-align: center;
	font-size: 1.3rem;
	position: absolute;
	top: 30%;
	left: 53%;
}
.padrino1{
	width: 100%;
	height: 94%;
	background-color: var(--blue);
	color: var(--white);
	font-family: "COMFORTAA";
	text-align: justify;
	position: relative;
	top: -4%;
	left: -3%;
	padding: 8%;
}
.ayuda{
	width: 100%;
	position:relative;
	margin-top: 10%;
}
.palboton{
	width: 60%;
	height: auto;
	position: relative;
	top: -60px;
}
.fondoagrade{
	width: 28%;
	margin-left: 72%;
	position:relative;
}
.agrade{
	background-color: var(--yellow);
	width: 450px;
	height: 115px;
	position: absolute;
	margin-left: 33%;
	margin-top: 5%;
	color: white;
	font-family: "COMFORTAA";
	text-align: center;
}
.agrade1{
	background-color: var(--gray-dark);
	width: 450px;
	height: 100px;
	position: relative;
}
.logoagrade{
	width: 100%;
	height: auto;
	position: absolute;
	margin-top: 20%;
}
.imagagra{
	width: 280px;
	margin-left: 8%;
	margin-top: 10%;
}
.imagagra1{
	width: 250px;
	margin-left: 11%;
	margin-top: 5%;
}
.imagagra2{
	width: 250px;
	margin-left:11%;
	margin-top:7%;
}
.imagagra3{
	width: 300px;
	margin-left: 8%;
	margin-top: 10%;
}
.imagagra4{
	width: 250px;
	margin-left: 11%;
	margin-top: 5%;
}
.imagagra5{
	width: 320px;
	margin-left: 9%;
	margin-top: 10%;
}
.contacto{
	background-color: var(--red);
	width: 450px;
	height: 115px;
	position: absolute;
	margin-left: 33%;
	margin-top: 5%;
	color: white;
	font-family: "COMFORTAA";
	text-align: center;
}

.contactoMasco{
	background-color: var(--blue);
	width: 450px;
	height: 115px;
	position: absolute;
	margin-left: 33%;
	margin-top: 5%;
	color: white;
	font-family: "COMFORTAA";
	text-align: center;
}

.contactoR{
	background-color: var(--purple);
	width: 450px;
	height: 115px;
	position: absolute;
	margin-left: 33%;
	margin-top: 5%;
	color: white;
	font-family: "COMFORTAA";
	text-align: center;
}

.contactoG{
	background-color: var(--yellow);
	width: 450px;
	height: 115px;
	position: absolute;
	margin-left: 33%;
	margin-top: 5%;
	color: white;
	font-family: "COMFORTAA";
	text-align: center;
}

.contactoD{
	background-color: var(--blue);
	width: 450px;
	height: 115px;
	position: absolute;
	margin-left: 33%;
	margin-top: 5%;
	color: white;
	font-family: "COMFORTAA";
	text-align: center;
}

.contacto1{
	background-color: var(--gray-dark);
	width: 450px;
	height: 100px;
	position: relative;
}
.contaform{
	width: 85%;
	height:69%;
	background-color: var(--red);
	position: absolute;
	top:19%;
	padding: 10%;
}
.animalsfin{
	width: 10%;
	height: 100px;
	position: relative;
	top: 67px;
}
.tamaño{
	width: 40%;
	height: 30%;
	position: relative;
	top: 5%;
	left: 10%;
}
.tamaño1{
	width: 100%;
	height: 90%;
	position: relative;
	top: -85%;
	left: 90%;
}
.tamañop{
	width: 100%;
	height: 90%;
	position: relative;
	top: -175%;
	left: 795%;
}
.tamaño2{
	width: 65%;
	height: 55%;
	position: relative;
	top: -230%;
	left: 920%;
}
.swiper-container {
		width: 700px;
		height: 700px;
		border-radius:0%;

}
.swiper-slide {
		text-align: center;
		font-size: 18px;
		background: transparent;

		/* Center slide text vertically */
		display: -webkit-box;
		display: -ms-flexbox;
		display: -webkit-flex;
		display: flex;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		-webkit-justify-content: center;
		justify-content: center;
		-webkit-box-align: center;
		-ms-flex-align: center;
		-webkit-align-items: center;
		align-items: center;
}

.wrap{
	width: 95%;
	margin: 20px auto;
	position:relative;
	margin-top: 30%;
}
ul.tabs{
	width: 100%;
	background-color: var(--purple);
	list-style: none;
	display: flex;
}
ul.tabs li{
	width: 18%;
}
.active{
	background-color: var(--purple);
}

li.tabs li a{
	color: #fff;
	text-align: center;
	display: block;
	padding: 20px 0px;
	text-decoration: none;
}
.historia{
	width: 100%;
	position: relative;
	right:1%;
	left: 0%;
}
.historia article{
	padding: 90px;
	text-align: justify;
}

.historia p{
	margin-left:20%;
	margin-right:20%;
}
.historia1{
	display:none;
}
.historia1 article{
	display:none;
	text-align: justify;
}

.histo01{
	display:block;
	max-width:65%;
	margin:auto;
}
#marley{
	background: url("../image/prueba.png")center no-repeat;
	width: 98%;
	position: relative;
	left: 1%
}
#emma{
	background: url("../image/prueba2.png")center no-repeat;
	width: 98%;
	position: relative;
	left: 1%
}
#fletcher{
	background: url("../image/prueba3.png")center no-repeat;
	width: 98%;
	position: relative;
	left: 1%
}
.wrap1 {
  width: 90%;
	position: absolute;
	margin-top: 15%;
	left: 0%;
}
ul.tabs1 {
	width: 900px;
	height: 100px;
  position:relative;
  left: 0%;
	margin: 0 auto;
	list-style: none;
	overflow: hidden;
  padding: 0;
}
ul.tabs1 li {
	float: left;
	width: 300px;
}
ul.tabs1 li a {
	position: relative;
	display: block;
	height: 100px;
	margin-top: 40px;
	padding: 10px 0 0 0;
	font-family: 'COMFORTAA', NEUCHA;
	font-size: 18px;
	text-align: center;
	text-decoration: none;
	color: #ffffff;
	background: #343a40;
	-webkit-box-shadow: 8px 12px 25px 2px rgba(0,0,0,0.4);
	   -moz-box-shadow: 8px 12px 25px 2px rgba(0,0,0,0.4);
	        box-shadow: 8px 12px 25px 2px rgba(0,0,0,0.4);
	        	border: 0px solid #000000;
	-webkit-transition: padding 0.2s ease, margin 0.2s ease;
       -moz-transition: padding 0.2s ease, margin 0.2s ease;
         -o-transition: padding 0.2s ease, margin 0.2s ease;
        -ms-transition: padding 0.2s ease, margin 0.2s ease;
            transition: padding 0.2s ease, margin 0.2s ease;
}
.tabs1 li:first-child a {
	z-index: 3;
  -webkit-border-top-left-radius: 8px;
-moz-border-radius-topleft: 8px;
border-top-left-radius: 8px;
}
.tabs1 li:nth-child(2) a {
	z-index: 2;
}
.tabs1 li:last-child a {
	z-index: 1;
  -webkit-box-shadow: 2px 8px 25px -2px rgba(0,0,0,0.3);
	   -moz-box-shadow: 2px 8px 25px -2px rgba(0,0,0,0.3);
	        box-shadow: 2px 8px 25px -2px rgba(0,0,0,0.3);
  -webkit-border-top-right-radius: 8px;
-moz-border-radius-topright: 8px;
border-top-right-radius: 8px;
}
ul.tabs1 li a:hover {
	margin: 35px 0 0 0;
	padding: 10px 0 5px 0;
}
ul.tabs1 li a.activo {
	margin: 30px 0 0 0;
	padding: 10px 0 10px 0;
	background: #ff585d;
	color: #000000;
	z-index: 2;
	outline: none;
}
.group:before,
.group:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}
.group:after {
    clear: both;
}
form{
  display: block;
}
#content1 {
  width: 900px;
  height: 700px;
  position: relative;
  padding:20%;
  top: 0%;
  left: 0%;
  margin: 0 auto;
  background: #ff585d;
-webkit-box-shadow: 2px 8px 25px -2px rgba(0,0,0,0.3);
   	   -moz-box-shadow: 2px 8px 25px -2px rgba(0,0,0,0.3);
   	        box-shadow: 2px 8px 25px -2px rgba(0,0,0,0.3);
  -webkit-border-bottom-right-radius: 8px;
-webkit-border-bottom-left-radius: 8px;
-moz-border-radius-bottomright: 8px;
-moz-border-radius-bottomleft: 8px;
border-bottom-right-radius: 8px;
border-bottom-left-radius: 8px;
}
#radioB{
	margin-left:5%;
}
#textRB{
	padding-left:3%;
}
.form-control{
	width: 340px;
}
#one{
position: absolute;
top: 10%;
left: 10%;
}
#two{
position: absolute;
top: 10%;
left: 10%;
}
#three{
position: absolute;
top: 10%;
left: 10%;
}

.imgperrof{
	position:relative;
	width:500px;
	height:650px;
	margin-top: 25%;
	left:50%
}
.footer{
background-color:var(--grey);
width: 100%;
height: 150px;
position: relative;

}
.footer1{
background-color:var(--grey2);
width: 100%;
height: 120px;
line-height: 8;
}
p .Contfooter1 a, a:link{
	text-decoration:none;
	color:yellow;
}
.redes{
	display: flex;
	justify-content: center;
	position: relative;
	top: 20%;
}
.footer2{
background-color:var(--gray-dark);
width: 100%;
height: 50px;
position: relative;
}

/*  BOTON IR ARRIBA*/
.boton-subir{
  display: none;
  background: var(--blue);
  border: thin solid #fff;
  border-radius: 40px;
  position: fixed;
  right: 15px;
  bottom:2px;
  z-index: 999999999;
}
/*evento hover*/
.boton-subir:hover{
  box-shadow:   0px 2px 10px 0px rgba(255, 255, 255, 0.75);
}
/*estilos para el tag i*/
.boton-subir i{
  color: #fff;
  font-size: 3em;
  padding: 10px 10px 10px 7px;
  -ms-transform: rotate(-45deg); /* IE 9 */
  -webkit-transform: rotate(-45deg); /* Chrome, Safari, Opera */
  transform: rotate(-45deg);
}

/*RESPONSIVE*/
@media (min-width: 320px)and (max-width :767px ){
	.ContainerHeader {
	  background-color: var(--grey);
	  width: 100%;
	  display: flex;
	}
	.ContainerHeader1{
	  background-color: var(--blue);
	  width: 100%;
	  display: flex;
	  height: 50px;
	}
	.Containerfondo {
	  background-color: var(--blue);
	  width: 100%;
	  display: flex;
	  height: 50px;
	  position: absolute;
	  top: 100px;
	}
	.MenuSpan {
	  display: grid;
	    font-size: 2em;
	    cursor: pointer;
	    display: flex;
	  	position: absolute;
	    left: 90%;
	    color: var(--grey);
	    z-index: 2;
	}
	.Container{
	  width: 40%;
	  height: 35px;
	  top: 5px;
	  right: 2px;
	}
	.iconousa{
	  width: 30px;
	  margin-left: 15%;
	  margin-top: -3%;
	}
	h5{
	  font-size: .5rem;
	  line-height:4;
	}
	.paw{
	  display: none;
	}
	ul.circulos2 a{
	  background: var(--grey2);
	  padding: 5px;
	  width: 230px;
	  height: 230px;
	  border-radius: 275px;
	  position: absolute;
	  top: 35px;
	  left: 10px;
	}
	.circulos1{
	  position: absolute;
	  top: 0%;
	 left: -18px;
	}
	ul.circulos1 li {
	  display: inline-block;
	  text-decoration: none;
	  background: White;
	  padding: 5px;
	  width: 180px;
	  height: 180px;
	  border-radius: 225px;
	  position: absolute;
	  top: 60px;
	  left: 55px;
	}
	ul.circulos1 li a {
	  display: inline-block;
	  text-decoration: none;
	  background: White;
	  padding: 5px;
	  width: 180px;
	  height: 180px;
	  border-radius: 225px;
	  position: absolute;
	  top: 2px;
	  left: -2px;
	}
	.logo{
	  height: 200px;
	  width: 200px;
	  position: relative;
	  top: -5px;
	  right: 15px;
	}
	.logo1{
	  height: 200px;
	  width: 200px;
	}
	.contboton{
	  display: none;
	}
	.Continicio{
	  width: 100%;
	  height: 300px;
	}
	.Contnosotros{
	  height: auto;
		display: inline-block;
	}
	.somos{
	  width: 100%;
	  height: 70%;
	  position: relative;
	  margin-left: 0%;
	}
	.somos1{
	  position:relative;
	  margin: 25px;
	  width: 90%;
	  height: 90%;
	  font-size: .8rem;
	  padding: 7%;
		margin-left: 5%;
	}
	h1{
	  font-size: 1.5rem;
	}
	.imagensomos{
	  width: 290px;
	  height: 290px;
	  position: relative;
}
	.Contadopta{
		display: inline-block;
	}
	.fondoadop{
	width: 150px;
	height: 460px;
	margin-left: 53%;
	margin-top: 80%;
	visibility: hidden;
	}
	.adop{
	  width: 225px;
	  height: 55px;
		top: 10%;
		right: 39%;
	  margin-left: 0%;
	  margin-top: 0%;
	}
	.adop1 {
	  width: 225px;
	  height: 50px;
	}
	.adop1 h2{
	  font-size: 1.5rem;
	  line-height: 2;
	}
	.iconoa{
	  top: -70px;
	  left: 130px;
	}
	.swiper-container{
	  width: 300px;
	  height:300px;
		top:25%;
	  margin-top:0%;
	  right: 5%;
	}
	.imagenadop{
	width: 300px;
	height:300px;
	}
	.comoadop{
	  width: 310px;
	  height: 310px;
		position: relative;
	  right: 1%;
		left: 3%;
		top: 48%;
	  margin-top:-90%;
	}
	.texto{
	  font-size:.7rem;
	  top: 5%;
	  left: 10%;
	}
	.texto h3{
	  font-size: .8rem;
		top:20%;
	}

	.texto p{
		padding-top:5%;
	}
	.Contapoyo{
		display: inline-block;
	}
	.apoyo{
	  width: 225px;
	  height: 55px;
	  margin-left: 0%;
	  top: 5%;
		right: 39%;
	}
	.apoyo1 {
	  width: 225px;
	  height: 50px;
	}
	.apoyo1 h2{
	  font-size: 1.5rem;
	  line-height: 2;
	}
	.fondoapoyo{
	  margin-left:-45%;
		margin-top: 10%;
	}
	.huella{
	  width: 100%;
	  height: auto;
		position: relative;
		margin-top: -20%;
	  top:0%;
	  right: 0%;
	}
	.palboton{
	  top:-25px;
	}
	.ayuda{
		top:45%;
		position: absolute;
		margin-top: 0%;
		z-index: -1;
	}
	.padrino{
	  width: 100%;
	  height: auto;
	  position: relative;
	  left: 0%;
		margin-top:25%;
		top: 0%;
	}
	.Continstala{
	width: 100%;
	height:1000px;
	position:relative;
	background-color: transparent;
	background-size:cover;
	background-repeat: no-repeat;
	background-position: center;
	display:flex;
}
.fondoinstal{
	width: 50%;
	height:150px;
	position: relative;
	top:80%;
}
	.insta{
		width: 225px;
	  height: 55px;
	  margin-left: 0%;
	  right: 36%;
		margin-top: 15%;
}
.insta1{
	width: 225px;
	height: 50px;
}
.insta1 h2{
	font-size: 1.3rem;
	line-height: 2.5;
}
.imageninsta{
width: 250px;
height: 250px;
border-radius: 300px;
position: absolute;
left: 5%;
margin-top: 120%;
}
.imageninsta1{
width: 250px;
height: 250px;
border-radius: 300px;
position: absolute;
right:5%;
margin-top: 40%;
}
.alimento{
	width: 100px;
	height: 100px;
	right: 70%;
	margin-top: 90%;
}
.alimento span {
position: relative;
top:25%;
left: 20%;
text-align: center;
font-size: 0.8rem;
}
.refugio{
	width: 120px;
	height: 120px;
	right: 5%;
	margin-top: 175%;
}
.refugio span {
position: relative;
top:40%;
left: 10%;
text-align: center;
font-size: 0.8rem;
}
.adopcion{
	width: 100px;
	height: 100px;
	left: 70%;
	margin-top: 110%;
}
.adopcion span {
position: relative;
top:26%;
left: 20%;
text-align: center;
font-size: 0.8rem;
}
.antirrab{
	width: 120px;
	height: 120px;
	left: 5%;
	margin-top: 190%;
}
.antirrab span {
position: relative;
top:30%;
left: 13%;
text-align: center;
font-size: 0.8rem;
}
.veterinario{
	width: 100px;
	height: 100px;
	left:45%;
	margin-top: 210%;
}
.veterinario span {
position: relative;
top:26%;
left: 22%;
text-align: center;
font-size: 0.8rem;
}
	.casoreal{
	  width: 225px;
	  height: 55px;
	  margin-left: 0%;
	  right: 36%;
		margin-top: 15%;
	}
	.casoreal1 {
	  width: 225px;
	  height: 50px;
	}
	.casoreal1 h2{
	  font-size: 1.3rem;
	  line-height: 2.5;
	}
	.wrap{
		display: none;
	}
	.historia{
		display: none;
	}
	.historia article{
		display: none;
	}
	.historia1{
		display:block;
	}
	.historia1{
	  display: block;
	  width: 100%;
	  position:relative;
	  margin-top: 48%;
	}
	.historia1 article{
	  display: block;
	  width: 98%;
	  top:-215px;
	}
	.imagencaso{
		right: 0%;
		top:0%;
	}
	.caso1{
	  width: 100%;
		padding: 10%;
		margin-top: 0%;
		text-align: justify;
	  background: var(--purple);
	}
	.caso2{
	  width: 100%;
		padding: 10%;
		margin-top: 15%;
		text-align: justify;
	  background: var(--purple);
	}
	.caso3{
	  width: 100%;
		padding: 10%;
		margin-top: 15%;
		text-align: justify;
	  background: var(--purple);
	}
	.casoreal1{
  width: 225px;
  height: 50px;
}
.historia1 article{
  display: block;
  width: 98%;
  top:-215px;
}
#show,#hide {
  display:none;
}

article#emma1 {
  display:none;
  cursor:pointer;
}

input#show:checked ~ article#emma1 {
  display:block;
}

input#hide:checked ~ article#emma1 {
  display:none;
}
#show1,#hide1 {
  display:none;
}
article#fletcher1 {
  display:none;
  cursor:pointer;
}

input#show1:checked ~ article#fletcher1 {
  display:block;
}
input#hide1:checked ~ article#fletcher1 {
  display:none;
}
#show2,#hide2 {
  display:none;
}
article#marley1 {
  display:none;
  cursor:pointer;
}

input#show2:checked ~ article#marley1 {
  display:block;
}

input#hide2:checked ~ article#marley1 {
  display:none;
}
	.contvol{
		position:relative;
		display: inline-block;
	}
	.voluntario{
		display: none;
	}
	.vol{
		width: 100%;
		display: block;
		position: relative;
		margin-top: 10%;
	}
	.textvol{
		width: 100%;
		height: auto;
		left: 0%;
		padding: 8%;
		background: #f3f3f3;
		margin-top: -66%;
		font-size: .8rem;
	}
	.textvol h2{
		line-height: 2;
		font-size: 1rem;
	}
	.boton{
		width: 50%;
	}

.botonM{
			width: 50%;
			font-size:.8em;
		}
	.agrade{
		width: 225px;
		height: 55px;
		margin-left: 0%;
		margin-top: 15%;
		right: 38%;
	}
	.agrade1 {
		width: 225px;
		height: 50px;
	}
	.agrade1 h2{
		font-size: 1rem;
		line-height:3;
	}
	.fondoagrade{
		width: 150px;
		height: 350px;
		margin-left: 53%;
		margin-top: 200%;
		position: relative;
		z-index: 1;
		visibility: hidden;
	}
	.logoagrade{
		width: 100%;
		height: auto;
		position: absolute;
		margin-top:40%;
	}
	.imagagra{
		width:40%;
		margin-left:30%;
		margin-top:5%;
	}
	.imagagra1{
		width:40%;
		margin-left:30%;
		margin-top:10%;
	}
	.imagagra2{
		width:40%;
		margin-left:30%;
		margin-top:7%;
	}
	.imagagra3{
		width:40%;
		margin-left:30%;
		margin-top:10%;
	}
	.imagagra4{
		width:40%;
		margin-left:30%;
		margin-top:5%;
	}
	.imagagra5{
		width:40%;
		margin-left:30%;
		margin-top:11%;
	}
	.contacto{
		width: 225px;
		height: 55px;
		margin-left: 0%;
		margin-top: 0%;
		right: 38%;
	}

	.contactoMasco{
		width: 225px;
		height: 55px;
		margin-left: 0%;
		margin-top: 0%;
		right: 38%;
	}


	.contacto1{
		width: 225px;
		height: 50px;
	}
	.contacto1 h2{
		font-size: 1.5rem;
		line-height: 2;
	}
	.wrap1{
		width: 99%;
		position: relative;
		margin-top: 20%;
		left: 0%;
	}
	ul.tabs1{
		width: 90%;
		left: 0%;
		position: relative;
	}
	ul.tabs1 li{
		width: 30%;
	}
	ul.tabs1 li a{
		font-size: xx-small;
	}
	#content1{
		width: 90%;
		left: 0%;
		height:950px;
	}
	#one{
		top: 10%;
		left: 5%;
	}
	#two{
		top: 10%;
		left: 5%;
	}
	#three{
		top: 10%;
		left: 5%;
	}
	#radioB{
		margin-left:5%;
	}
	#textRB{
		padding-left:3%;
	}
	.imgperrof{
		display: none;
	}
	.boton1{
		width: 40%;
		left: 30%;
		position:relative;
	}
	.tamaño{
		width: 80%;
		height:27%;
		top:7%;
		left: 13%;
		}
		.tamaño1{
		width: 200%;
		height: 90%;
		top: -77%;
		left: 135%;
		}
		.tamañop{
		width: 200%;
		height: 90%;
		top:-171%;
		left: 656%;
		}
		.tamaño2{
		width: 65%;
		height:35%;
		top: -209%;
		left: 873%;
		}
	.form-control{
		width: 240px;
	}
	.Contfooter{
		text-align: center;
	}
	.Contfooter1{
		text-align: center;
		top: 35px;
		right: 0%;
	}
	p .Contfooter1 a, a:link{
		text-decoration:none;
		color:inherit;
	}
	.imgredes{
		left: 30%;
		padding: 4px;
	}
	.footer1{
	font-size:.7rem;
	line-height: 8;
	}
	.redes{
		display: flex;
		justify-content: center;
		position: relative;
		top: 20%;
	}
}
@media (min-width: 768px) and (max-width: 1024px){
	.ContainerHeader {
	  background-color: var(--grey);
	  width: 100%;
	  display: flex;
	  height: 100px;
	}
	.ContainerHeader1{
	  background-color: var(--blue);
	  width: 100%;
	  display: flex;
	  height: 50px;
	}
	.Containerfondo {
	  background-color: var(--blue);
	  width: 100%;
	  display: flex;
	  height: 50px;
	  position: absolute;
	  top: 100px;
	}
	.Container{
	  width: 28%;
	  height: 35px;
	  top: 25px;
	  right: 2px;
	}
	h5{
	  font-size: .6rem;
	  line-height: 4;
	}
	.paw{
	  height:70%;
	  top:5px;
	}
	.iconousa{
		width: 40px;
	}
	ul.circulos2 a{
	  background: var(--grey2);
	  padding: 5px;
	  width: 230px;
	  height: 230px;
	  border-radius: 275px;
	  position: absolute;
	  top: 35px;
	  left: 30px;
	}
	ul.circulos1 li {
	  display: inline-block;
	  text-decoration: none;
	  background: White;
	  padding: 5px;
	  width: 180px;
	  height: 180px;
	  border-radius: 225px;
	  position: absolute;
	  top: 60px;
	  left: 55px;
	}
	ul.circulos1 li a {
	  display: inline-block;
	  text-decoration: none;
	  background: White;
	  padding: 5px;
	  width: 180px;
	  height: 180px;
	  border-radius: 225px;
	  position: absolute;
	  top: 2px;
	  left: -2px;
	}
	.logo{
	  height: 200px;
	  width: 200px;
	  position: relative;
	  top: -5px;
	  right: 15px;
	}
	.contboton{
	  width: 155px;
	  top:100%;
	  left: 32%;
	}
	.contboton img{
	  width: 135px;
	}
	.Continicio{
	  width: 100%;
	  height: 500px;
	}
	.Contnosotros{
	  width: 100%;
	  display:inline-block;
	}
	.somos{
	  width: 55%;
	  height: 100%;
		position: absolute;
	  margin-top: -74%;
		margin-left:45%;
	}
	.somos1{
	  margin: 25px;
	  width: 90%;
	  height: 90%;
	  font-size: smaller;
	  top: 0%;
	  padding: 6%;
	}
	h1{
	  font-size: 1.5rem;
	}
	.imagensomos{
	  width: 340px;
	  height: 340px;
	  margin-left: -53%;
		margin-top: 15%;
		margin-bottom: 15%;
	}
	.fondoadop{
		width: 50%;
		margin-left: 50%;
		margin-top: 35%;
	}
	.adop{
		margin-left: 20%;
		margin-top: 10%
	}
	.swiper-container {
    width: 500px;
    height: 500px;
    border-radius: 0%;
		margin-top: 35%;
		right: 34%;
	}
	.imagenadop{
		width: 490px;
		height: 490px;
	}
	.comoadop{
		width: 480px;
		height: 480px;
		right:10%;
		margin-top:73%;
	}
	.fondoapoyo{
		margin-top:10%;
	}
	.apoyo{
		margin-left:20%;
	}
	.ayuda{
		margin-top: 45%;
	}
	.huella{
		height: 50%;
		display: inline-table;
	}
	.padrino{
		height: 50%;
		display: inline-table;
	}
	.padrino1{
		padding: 10.67%;
	}
	.insta{
		margin-left: 20%;
	}
	.imageninsta{
		width: 320px;
		height: 320px;
		left: 5%;
		margin-top: 47%;
	}
	.imageninsta1{
		width: 320px;
		height: 320px;
		right: 5%;
		margin-top: 24%;
	}
	.alimento{
		width: 130px;
		height: 130px;
		right: 75%;
		margin-top: 29%;
	}
	.refugio{
		width: 160px;
		height: 160px;
		right: 51%;
		margin-top: 28%;
	}
	.adopcion{
		width: 130px;
		height: 130px;
		left:42%;
		margin-top: 48%;
	}
	.antirrab{
		width: 160px;
		height: 160px;
		left: 52%;
		margin-top: 65%;
	}
	.veterinario{
		width: 130px;
		height: 130px;
		left: 76%;
		margin-top: 66%;
	}
	.casoreal{
		margin-left: 20%;
		margin-top: 10%;
	}
	.figuracaso{
		right: 59%;
		top: 30px;
	}
	.figuracaso1{
		right: 34%;
		top: 25px;
	}
	.figuracaso2{
		right: 9%;
		top: 30px;
	}
	.historia{
		margin-top: 20%;
	}
	.historia article{
		padding: 50px;
	}
	.voluntario{
		margin-top: 10%;
	}
	.textvol{
		width: 80%;
		background: #f3f3f3;
		left: 10%;
		margin-top: -34%;
		padding: 8%;
	}
	.agrade{
		margin-left: 20%;
		margin-top: 10%;
	}
	.fondoagrade{
		width: 35%;
		margin-left: 65%;
		height: auto;
		margin-top: 20%;
		z-index:1;
	}
	.logoagrade{
		margin-top: 25%;
		right: 0;
		left: 0;
	}
	.imagagra{
		width: 200px;
		margin-left: 15%;
		margin-top: 15%;
	}
	.imagagra1{
		width: 200px;
		margin-left: 20%;
		margin-top: 10%;
	}
	.imagagra2{
		width: 200px;
		margin-left: 15%;
		margin-top: 10%;
	}
	.imagagra3{
		width: 250px;
		margin-left: 20%;
		margin-top: 15%;
	}
	.imagagra4{
		width: 200px;
		margin-left: 15%;
		margin-top: 10%;
	}
	.imagagra5{
		width: 250px;
		margin-left: 20%;
		margin-top: 20%;
	}
	.contacto{
		margin-left: 20%;
	}
	.wrap1{
		margin-top: 20%;
	}
	ul.tabs1{
		width: 700px;
		left: 5%;
	}
	ul.tabs1 li{
		width: 200px;
	}
	#content1{
		width: 700px;
		left: 5%;
	}
	#one{
		left: 3%;
	}
	#two{
		left: 3%;
	}
	#three{
		left: 3%;
	}
	.imgperrof{
		width: 346px;
		height: 500px;
		margin-top: 50%;
		left: 55%;
	}
}