@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

:root {

    --kr-primary-color: #dd3333;

    --kr-secondary-color: #006f6f;

    --kr-col-card: 6;

    --kr-col-padding: 10px;

}

body {

    font-family: "Roboto", sans-serif;

}

.kr-container * {

    margin: 0;

    padding: 0;    

}

.kr-container {

    max-width: 1200px;

    margin: 20px auto;

    position: relative;

}

.kr-container h1 {

    margin-bottom: 15px;

    font-size: 30px;

}

.kr-container p {

    line-height: 26px;

}

.kr-description,

.kr-details {

    margin-bottom: 20px;

    border: 1px solid #d8d8d8;

    padding: 20px; 

    border-radius: 7px;

}

.kr-form {

    margin: 0;

}

.kr-row {

    display: flex;

    flex-wrap: wrap;

    width: 100%;

}

.kr-col {

    padding: 7px;

    flex: 1 1 0;

    width: 0;

}



.btn-toggle-filter {

    display: none;

}

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

    .kr-col {

        flex: 1 1 100%;

    }

    .kr-form {

        display: none;

        border: 1px solid #9E9E9E;

        border-radius: 5px;

    }

    .btn-toggle-filter {

        margin-bottom: 7px;

        display: block;

        font-size: 1.2em;

        border: 1px solid #9E9E9E;

        padding: 5px 10px;

        color: #000 !important;

        border-radius: 5px;

        width: fit-content;

        text-decoration: none !important;

    }

    .kr-form .kr-form-control {

        font-size: 14px;

        padding: 5px 7px;

        margin-bottom: 0;

    }


}

@media only screen and (max-width: 550px) {
    .kr-btn {
        display: block;
        margin-bottom: 8px;        
        text-align: center;
    }
}

.kr-col-card {

    width: calc(100% / var(--kr-col-card));

    padding: var(--kr-col-padding);

}

.kr-card {

    text-align: center;

    border-radius: 10px;

    height: 100%;

}

.kr-card:hover {

    opacity: .5;

    box-shadow: 4px 4px 6px 0px #00000042;

}

.kr-card img {

    width: 100%;

    border-radius: 9px 9px 0 0;

    background: #9E9E9E;

}

.kr-card a {

    text-decoration: none !important;

    color: initial;

}

.kr-card p {

    line-height: 22px;

}



.kr-form-control {

    width: 100%;

    font-size: 16px;

    border: 1px solid #d8d8d8 !important;

    border-radius: 5px;

    padding: 10px 7px;

    margin-bottom: 10px;

}

.kr-info {

    padding: 0 10px 10px;

}

.kr-info strong {

    color: var(--kr-secondary-color);   

    margin-bottom: 5px; 

    display: inline-block;

}



.kr-tags {

    display: flex;

    margin-left: -5px;

    flex-wrap: wrap;

    margin-bottom: 10px;

}

.kr-tag {

    padding: 5px 15px;

    border: 1px solid #d8d8d8;

    border-radius: 30px;

    margin: 0 5px 10px;

    box-shadow: 4px 4px 4px 0 #00000012;

}    



.kr-search-name {

    display: flex;

    gap: 10px;	

    margin-bottom: 10px;

}

.kr-search-name input {

	margin: 0;

}

.kr-search-name .kr-btn {

    max-width: 120px;

    width: 100%;

}



/* Slider */

.kr-slider img, 

.kr-slider-for img {

    width: 100%;

    cursor: pointer;

}

.kr-slider .slick-slide img:hover {

    opacity: .5;

}

.kr-slider .slick-slide,

.kr-slider-for .slick-slide {

    height: auto;

}

.kr-slider-for {

    margin-bottom: 10px;

}

.slick-track {

    float: left;

}

.slick-arrow {

    margin: 0;

    position: absolute;

    top: calc(50% - 25px);

    transform: translate(-50%, -50%);   

    z-index: 1; 

    width: 30px;

    height: 30px;

    cursor: pointer;

}

.slick-next {

    left: 0;

}

.slick-prev {

    right: -30px;

}

.slick-dots {

    display: flex;

    list-style: none;

    justify-content: center;

}

ul.slick-dots li {

    padding: 3px;

}

ul.slick-dots li button {

    border: 1px solid #d8d8d8;

    height: 14px;

    width: 14px;

    border-radius: 100%;

    font-size: 0;

    cursor: pointer;

}

ul.slick-dots li.slick-active button {

    border-color: var(--kr-primary-color);

    background: var(--kr-primary-color);

    color: #fff;

}

.kr-btn {

    padding: 5px 15px;

    border: 2px solid var(--kr-primary-color);

    background-color: var(--kr-primary-color);

    color: #fff;

    border-radius: 5px;

    cursor: pointer;

    font-weight: 400;

    text-transform: uppercase;

    text-transform: uppercase;

    text-decoration: none !important;

}

.kr-brn-orange-outline {

    background-color: transparent;

    color: var(--kr-primary-color);

}

.kr-brn-orange-outline:hover {

    background-color: var(--kr-primary-color);

    color: #fff;

}

.kr-brn-orange {

    border: 2px solid var(--kr-primary-color);

    background-color: var(--kr-primary-color);

}

.kr-brn-orange:hover {

    background: #fff;

    color: var(--kr-primary-color);

}



.kr-message {

    text-align: center;

    font-size: 20px;

}



.kr-total-animals {

    font-size: 14px;

}

.kr-extra-info {

    font-size: 14px;

}



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

    .kr-container {

        padding: 0 20px;

    }

}



/* animated loader */

.kr-loader {

  width: 48px;

  height: 48px;

  border-radius: 50%;

  display: inline-block;

  position: relative;

  border: 3px solid;

  border-color: #FFF #FFF transparent;

  box-sizing: border-box;

  animation: rotation 1s linear infinite;

}

.kr-loader::after {

  content: '';  

  box-sizing: border-box;

  position: absolute;

  left: 0;

  right: 0;

  top: 0;

  bottom: 0;

  margin: auto;

  border: 3px solid;

  border-color: transparent #FF3D00 #FF3D00;

  width: 24px;

  height: 24px;

  border-radius: 50%;

  animation: rotationBack 0.5s linear infinite;

  transform-origin: center center;

}



@keyframes rotation {

  0% {

    transform: rotate(0deg);

  }

  100% {

    transform: rotate(360deg);

  }

} 

    

@keyframes rotationBack {

  0% {

    transform: rotate(0deg);

  }

  100% {

    transform: rotate(-360deg);

  }

}

      

.kr-loading {

    position: fixed;

    width: 100%;

    background: #00000094;

    top: 0;

    bottom: 0;

    left: 0;

    right: 0;    

    display: flex;

    justify-content: center;

    align-items: center;

    flex-direction: column;

    z-index: 1;

}



.kr-sort-action {

    align-items: center;    

}

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

    .kr-sort-by-action {

        text-align: right;

    }


}



.kr-sort-by-action a {

    margin-left: 10px;

}

.kr-sort-by-action a.actived {

    text-decoration: underline;

}