body{ font-family: "Varela Round", sans-serif;}
.btn{border-radius:150px}
.btn:focus{outline:none}
.header, .footer{background:#D20C01; color:#fff; position:relative;}


.tengo{font-size:20px;}

.header .header-inner{height:195px;}
 a.link-mascota{color:#fff; text-decoration:none;position:relative }
 a.link-mascota .circle{background:#F9A21F; width:72px; height:72px; display:flex; align-items:center;border-radius: 150px;justify-content: center;}
 /*a.link-mascota:hover .circle{background:#ffe578;}*/
 a.link-mascota.selected .circle{background:#ffe578;}
 
 .selected .circle:before {
    content: "✓";
    position: absolute;
    right: -10px;
    background: #ffe578;
    border-radius: 150px;
    top: 0;
    width: 30px;
    height: 30px;
    color: #000;    
	font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
}
 
.header .btn:focus *{outline:0!important}
.header .btn-link{color:#fff;text-decoration:none; display: flex; align-items:center;}
.header .btn-link:hover{color:#ffcd29;}
.header .navbar-toggler{padding:0.25rem}
.header .content-max{width:90%; border-top:5px solid #F9A21F;}
.content-max{width:100%;}

.navbar-dark .navbar-nav .nav-link{color:#fff;}

.header .navbar-dark .navbar-nav .nav-link.active, .header  .navbar-dark .navbar-nav .show>.nav-link {
    color: #ffe578;
}

.bg-centro{background: rgb(149,198,203);
background: linear-gradient(180deg, rgba(149,198,203,1) 0%, rgba(197,181,120,1) 55%, rgba(249,162,31,1) 100%);}
.image-hero-home{margin-top: 10px; position: relative;}
.footer{height:229px; text-align:center; height:225px;    justify-content: center;
    display: flex;
    align-items: center;
    flex-direction: column; }
.footer:after {
	content: "";
    position: relative;
    width: 90%;
    background: #F9A21F;
    height: 10px;
    z-index: 1;
    display: block;
    margin: 0 auto;
}

.btn-primary {
    color: #fff;
    background-color: #f9a21f;
    border-color: #f9a21f;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary.active, .btn-primary:active:focus {
    color: #fff;
    background-color: #ffcd29;
    border-color: #ffcd29;
	outline:none;
	box-shadow:none;
}
.btn-check:active+.btn-primary:focus, .btn-check:checked+.btn-primary:focus, .btn-primary.active:focus, .btn-primary:active:focus, .show>.btn-primary.dropdown-toggle:focus{box-shadow:none;}
.logo{position:relative;z-index:3}
.bg-1{background-color:#f9a21f }
.bg-2{
	background-color:#f9a21f;
background-image:  url(../images/bg-degrade-rojo.png);
 background-repeat: repeat-x;
 background-position: center center;
}

.bg-3{
	background-color:#f9a21f;
background-image:  url(../images/bg-degrade-verde.png);
 background-repeat: repeat-x;
 background-position: center center;
}

.bg-perro{
    background-image: url(../images/perro-silueta.png);
    background-repeat: no-repeat;
	width:407px;
	height:378px;
	position:absolute;
	left:-10%;
	z-index:0
}

.bg-gato{
    background-image: url(../images/gato-silueta.png);
    background-repeat: no-repeat;
    background-position: center center;
	width:455px;
	height:341px;
	position:absolute;
	right:-10%;
}
.bg-red{background-color:#D20C01 }
.text-green-dark{color:#0A555F;}

#hero .subtitle{line-height:22px;font-size:20px}

h1, h2, h3, .lilita{font-family: "Lilita One", sans-serif;}
.link-razas{color:#0A555F; text-decoration:none;}
.link-razas.active, .link-razas:hover{color:#fff;}

.owl-carousel .owl-nav button.owl-prev, .owl-carousel .owl-nav button.owl-prev, .owl-carousel button.owl-dot.owl-nav {
    position: absolute;
    left: 7%;
    top: 50%;
    display: block;
    padding: 0 .3em !important;
    margin: 0;
    cursor: pointer;
    color: #fff;
	background-color:#fff;
    transform: translate(-50%, -50%);
	background:url('../images/left.png')!important;
	width:35px;
	height:63px;
}
.owl-carousel .owl-nav button.owl-next, .owl-carousel .owl-nav button.owl-next, .owl-carousel button.owl-dot.owl-nav {
    position: absolute;
    right: -3%;
    top: 50%;
    display: block ;
    padding: 0 .3em !important;
    font-size: 3em ;
    margin: 0;
    cursor: pointer;
    color: #fff;
    transform: translate(-50%, -50%);
	background:url('../images/right.png')!important;
	width:35px;
	height:63px;
}

.owl-prev span, .owl-next span{color:transparent;}




.videos-carrusel .item img{
    margin: 0 auto;
    text-align: center;
	border-radius:20px;
}
.videos-carrusel .item-img{margin-bottom:12px}
.videos-carrusel .item a{	text-decoration:none; }
.videos-carrusel .item a .item-info{
    color:#fff;
	background:#333333;
	border-radius:20px;
	padding:14px;
	text-align:center;
	height: 76px;
}
.videos-carrusel .item a .item-info .item-name{
		    display: -webkit-box;
    max-width: 100%;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}



.owl-theme .owl-nav [class*=owl-]:hover{
    background-color: #fff;
}

.slider h2{font-size:28px; color:#fff; margin-bottom:0; z-index: 1;position: relative;}
.slider p{font-size:16px; color:#fff; line-height:18px; z-index: 1;position: relative;}
.slider{display: flex; align-items: center; padding:20px 0; }
.slider figure{margin-bottom:0}

.input-search{border-radius:150px; height:51px; text-indent:15px}
.btn-search{position:absolute; right:10px; top:7px;}
.btn-search:hover, .btn-search:focus{background:#ee4623; border-color:#ee4623}
ul#ui-id-1{
	margin:2px;
    list-style: none;
    padding: 0;
	border-radius: 10px;
	background:#fff;
	padding:15px;
}
ul#ui-id-1 li{border-bottom:1px solid #cdcdcd; cursor:pointer;}
ul#ui-id-1 li:last-child{border-bottom:none;}

.videos-carrusel.column{        
width: 261px;
margin: 0 auto;
padding: 20px;
border: 1px solid #ffff;
border-radius:10px;
}
.razas a{font-size:16px; padding:6px 12px; border-radius:5px;transition: 0.3s; color:#fff; text-decoration:none;   display: inline-flex; flex-wrap: wrap;}
.razas a:hover{background:#f9a21f;text-decoration:none;}
.box-white-trans {background:rgba(255,255,255,0.2); color:#fff; border-radius:8px;padding:15px; min-height:82px; display:flex; align-items:center; font-size:18px; line-height:26px}


#carousel .carousel-caption {background:rgba(0,0,0,0.3); left:0; right:0; min-height:22px; padding-bottom:60px;}
.carousel-indicators{margin-left:0;margin-right:0; bottom:10px}
.carousel-indicators [data-bs-target]{width:25px; height:25px; background:#B2D9DB; border-radius:150px; border:0; margin:5px;}
.play {
	width: 0px;
   height: 0px;
   border-style: solid;
   border-width: 0 5.5px 9.5px 5.5px;
   border-color: transparent transparent #FFFFFF transparent;
   transform: rotate(90deg);
    margin-left:5px;
	display:inline-flex;
}

.grid-videos .item-description{display:none;}
.grid-videos .item{position:relative;  max-width: 235px; opacity:0.70;transition: 0.3s;}
.grid-videos a.item:hover{opacity:1;position: relative;z-index: 2;}
.grid-videos a.item:hover img{position: absolute;top: 10px;}
.grid-videos a:hover .item-description{
	display: block;
        position: absolute;
        bottom: -67px;
        background: #095660;
        padding: 20px 10px;
        text-align: center;
        color: #fff;
        z-index: 2;
		padding-bottom:80px;
		line-height:1.2;
		height:100px;
		font-size:14px;
		width: 100%;
}


.item-description:after {
	content:""; width:30px; height:30px; position:absolute; background:url('../images/play.svg');
bottom: 10px;
        top: auto;
        margin: 0 auto;
        left: 0;
        right: 0;
		background-size:contain;
}
.line-clamp{
	    display: -webkit-box;
    max-width: 100%;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
#modal-choose-pet .modal-content{background:#D20C01; color:#fff;}
.card-result{ color: #0A555F; padding:20px; border-radius:12px}
.card-result a{color: #0A555F; }
.big-icon{width: 202px;}
.big-icon p {font-size:20px;color:#fff; margin:20px 0;text-align:center; text-transform:uppercase; text-align:start;}
#map {border-radius:27px;overflow:hidden}
.form-transparent label{font-family:"Lilita One", sans-serif; font-size:20px;color:#095660}
.form-transparent .form-control{height:60px; background:rgba(255,255,255,0.3);color:#095660; border:none;}

.border-top-2p-white{border-top:2px solid #fff;}
.agregar-mascota .link-mascota{position:relative;}
.agregar-mascota .link-mascota .circle{background:#ec4523}
.agregar-mascota .link-mascota:before{content:""; position:absolute; top:0; left:-5px; width:36px; height:36px; background:url('../images/plus.png')}
.icon-calendar{width: 34px;
    height: 24px;
    background: #e1e1e1 url('../images/icono-calendario-chico.svg') no-repeat center center;
    display: block;
   
    height: 100%;
    position: relative;
    box-sizing: content-box;
}
.card-mascota{text-transform:uppercase;}
.card-mascota, .card-mascota .rounded {border-radius:23px!important}
.card-mascota img {max-height:276px;object-fit: cover;}
.card-mascota .nombre{font-size:42px}
.card-mascota .sub + .small{font-size:.675em}
/*.card-mascota .sub{font-size:28px;}
.card-mascota .sub + span{font-size:18px;}*/
.white-hover{text-decoration:none; color:#fff;}
.white-hover:hover,.white-hover:focus{color: #fff; background-color: #ffcd29; border-color: #ffcd29;}
img.foto-mascota {width:138px; height:138px}
.not-yet{background:rgb(217 217 217 / 50%); text-transform:capitalize; padding:10px; border-radius:10px; margin:10px 0}
.next{background:rgb(217 217 217 / 50%); padding:10px; border-top-left-radius:10px;border-bottom-left-radius:10px; margin:10px 0}

.next-2{background:rgb(217 217 217 / 50%); padding:10px; border-top-right-radius:10px;border-bottom-right-radius:10px; margin:10px 0; border-left:4px solid #fff}

.row-dashed{border-bottom:2px dashed #B2D9DB}
#calendar .day {background: #0A555F; color:#fff; font-size:24px;  padding:5px; border-radius:10px; width:40px; height:40px; text-align:center;font-family: "Lilita One", sans-serif; display: flex;align-items: center;justify-content: center; }
.hour{line-height:initial;}

.zabuto-calendar .zabuto-calendar__day{	height:40px; width:40px;}
.zabuto-calendar .zabuto-calendar__day--today {
    background: #095660;
    font-weight: 600;
    border-radius: 10px;
    color: #fff;
    padding: 0px;

}
.bg-gray-card{background:#ececec; border-radius:13px;}
#calendar .zabuto-calendar__navigation__item--header__title{color:#D20C01; text-transform:capitalize; font-size:20px;}

.hours input, .hours{font-size:20px; color:#D20C01; border:0; outline:none; background:transparent; width:30px;}
.border-top-white{border-top:4px solid #fff}
.proximamente{background:#000; color:#fff; padding:10px; position:absolute; top: -2px;font-size: 10px;}
.input-radius{border-radius:150px}
.btn-login{height:48px}
.bg-login{
	background: #D20C01 url(../images/bg-perro-gato.png) center center no-repeat;background-size: contain;
}

p.text-truncate {
    font-size: 1.8rem;
}

.filter-btn {
    background: none;
    border: 0;
    box-sizing: border-box;
}

/*.filter-btn-active {
    border: 2px solid #D20C01;
    border-radius: 10px;
}*/

@media (max-width: 600px) {
	.owl-carousel .owl-nav button.owl-prev, .owl-carousel .owl-nav button.owl-prev, .owl-carousel button.owl-dot.owl-nav {
    left: -11%;
	}
	.owl-carousel .owl-nav button.owl-next, .owl-carousel .owl-nav button.owl-next, .owl-carousel button.owl-dot.owl-nav {
    right: -25%;}
	
	.videos-carrusel{width:75%; margin:0 auto;}
	.logo{max-width:180px}
	.card-mascota .not-yet{display:block!important;}
}


@media (max-width: 1024px) {
.header, .header .btn {font-size:0.9em;}
.p-mobile-0 {padding:0}
.header-big{padding-bottom:20px}	
.link-mascota img{width:50px; height:auto;}
.bg-perro, .bg-gato{width:100%; left: 0;  height: 100%;background-size: contain;}
.redes-mobile {width:50px; height:auto;}
.img-raza{max-width:100%; height:auto;}
.carousel-item {height:100%}
.carousel-inner{height:424px;}
#carousel .carousel-caption {
background: rgba(10, 85, 95, 1); padding-bottom:57px;position: relative;  }

.grid-videos{display: grid;
grid-template-columns: repeat(2, 1fr);gap: 10px;
}

.carousel-control-next, .carousel-control-prev{height:220px;}
.card-mascota .last-column{border-top:2px solid #B2D9DB;}



.td-height{height:90px;}
.td-height ~ .td-height{height:70px;}
}

.shorts iframe{
	height: 453px;
    width: 100%;
}

@media (min-width: 600px) {
	.videos-carrusel{width:500px; margin:0 auto;}
	.owl-carousel .owl-nav button.owl-prev, .owl-carousel .owl-nav button.owl-prev, .owl-carousel button.owl-dot.owl-nav{left:-7%}
.owl-carousel .owl-nav button.owl-next, .owl-carousel .owl-nav button.owl-prev, .owl-carousel button.owl-dot{right:-14%}
}

.raza-box{margin-top:40px}


@media (min-width: 1024px) {
#carousel .carousel-caption{padding: 20px 10px 60px 10px;}
.tengo{font-size:40px;}
.image-hero-home{margin-top:-26px; z-index:5;    margin-left: -128px; position:relative;}
.videos-carrusel{width:917px;margin: 0 auto;}

.slider{display: flex; align-items: center; height:430px}
.slider h2{font-size:42px; }
.slider p{font-size:18px; }

.owl-carousel .owl-nav button.owl-prev, .owl-carousel .owl-nav button.owl-prev, .owl-carousel button.owl-dot.owl-nav {
    left: -30px;
    
}
.owl-carousel .owl-nav button.owl-next, .owl-carousel .owl-nav button.owl-next, .owl-carousel button.owl-dot.owl-nav {

    right: -65px;
   
}

.header-big{height:210px}
.header .avatar{width:52px; height:52px}

/*.header-inside{height:160px}*/
#hero .subtitle{line-height:32px;font-size:30px}
#hero .hero-text{max-width:473px}
.header .content-max{width:1024px; border-top:15px solid #F9A21F;}
.content-max{width:1024px;}

.img-raza{position:relative; z-index:1; margin-top: -35px; margin-left: -40%;}

/*.raza-box{margin-top:-100px}*/

.grid-videos{display: grid;
grid-template-columns: repeat(4, 1fr);
grid-column-gap: 10px;
}
.footer:after {height:15px}

.grid-videos a:hover .item-description{
	display: block;
        position: absolute;
        bottom: -109px;
        background: #095660;
        padding: 20px 10px;
        text-align: center;
        color: #fff;
        z-index: 2;
		padding-bottom:80px;
		line-height:1.2;
		height:129px;
		font-size:18px;
		width: 100%;
}

.item-description:after {
	width:44px; height:44px; 
}
.razas {margin-left:-10px}
.razas a{font-size:18px; }

.big-icon p {font-size:30px;}
.card-mascota .last-column{border-left:2px solid #B2D9DB;}
.not-yet{font-size:20px;}

.table-agenda{font-size:20px}
.td-height{height:60px;}
}





@media (min-width: 1400px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
        max-width: 1114px;
    }
	.footer:after {
	content: "";
    position: relative;
    width: 1024px;
    background: #F9A21F;
    height: 15px;
    z-index: 1;
    display: block;
    margin: 0 auto;
}
#carousel {margin: 0 auto;}


}
@media (max-width: 992px) {
#avatar-desktop{display:none!important}
}