/********** Template CSS **********/
:root {
    --primary: #005700;
    --secondary: #FFD33C;
    --light: #F3F3F3;
    --dark: #212121;
}

[class^=flaticon-]:before,
[class*=" flaticon-"]:before,
[class^=flaticon-]:after,
[class*=" flaticon-"]:after {
    font-size: inherit;
    margin-left: 0;
}

body {
    max-width: 1280px;
    margin: 0 auto;
}

.btn {
    font-family: 'Roboto', sans-serif;
    text-transform: uppercase;
    font-weight: 400;
    transition: .5s;
}

.btn-primary {
    color: #FFFFFF;
    background-color: var(--primary);
    border-color: var(--primary);
}
.btn-primary:hover {
    border-color: var(--primary);
    background-color: var(--light);
    color: var(--primary);
}

.btn-square {
    width: 36px;
    height: 36px;
}

.btn-sm-square {
    width: 28px;
    height: 28px;
}

.btn-lg-square {
    width: 46px;
    height: 46px;
}

.btn-square,
.btn-sm-square,
.btn-lg-square {
    padding-left: 0;
    padding-right: 0;
    text-align: center;
}

.back-to-top {
    position: fixed;
    display: none;
    right: 30px;
    bottom: 10px;
    border-radius: 10px;
    /* z-index: 1020; */
}

.navbar-toggler {
    width:100%;
}

.navbar-toggler:focus {
    box-shadow: none !important;
}

.navbar-light .navbar-nav .nav-link {
    font-family: 'Roboto', sans-serif;
    position: relative;
    margin-left: 30px;
    padding: 0;
    font-size: 18px;
    font-weight: 400;
    color: var(--dark);
    outline: none;
    transition: .5s;
    text-align: right;
    line-height: 1.2;
}

.sticky-top.navbar-light .navbar-nav .nav-link {
    padding: 0;
}

.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link.active {
    color: var(--primary);
}

.tbl-tel-sm {
    padding: 1.5rem 1rem 1.5rem 6rem !important;
    line-height: 1.5rem;
    background-position: 5% center;
    display: none;
}
.mira-header {
  background: url(../img/upaw/mira.webp) center right no-repeat;
  background-size: contain;
}


@media (min-width: 1200px) {
    .container, .container-sm, .container-md, .container-lg, .container-xl {
        max-width:1190px;
        top: 11em !important;
    }
}

@media (min-width: 992px) {
    .navbar-light .navbar-nav .nav-link::before {
        position: absolute;
        content: "";
        width: 0;
        height: 8px;
        bottom: -14px;
        left: 50%;
        background: var(--primary);
        transition: .5s;
    }

    .container {
        max-width: 100%;
    }

    .navbar-light .navbar-nav .nav-link:hover::before,
    .navbar-light .navbar-nav .nav-link.active::before {
        width: 100%;
        left: 0;
    }

    .navbar-light .navbar-nav .nav-link.nav-contact::before {
        width: 100%;
        height: 1px;
        top: -1px;
        left: 0;
    }

    .btn-play-link {
        top:1em !important;
    }
}

@media (max-width: 768px) {
    .tbl-tel {
        display: none;
    }
    .tbl-tel-sm {
        display: block;
    }
    .tbl-contact td {
        min-width: min-content;
    }
    .navbar-brand {
      margin: auto;
    }

}

@media (min-width: 567px) {
    .container {
        max-width:100%;
    }
    .btn-play-link {
        top:15em !important;
    }
}

@media (min-width: 768px) {
    .container {
        max-width:100%;
    }
    .btn-play-link {
        top:13em !important;
    }
    .btn-play-link span {
       display:inline-block !important;
    }

}

@media (min-width: 968px) {
    .container {
        max-width:100%;
    }
    .btn-play-link {
        top:11em !important;
    }
}

@media (max-width: 991.98px) {
    .navbar-light .navbar-nav .nav-link  {
        margin-left: 0;
        padding: 10px 0;
        text-align: center;
    }
    .nav-link {
        border: 2px solid var(--light);
        border-top: 2px solid white;
        padding: 10px !important;
        border-collapse: collapse;
    }
    .nav-link:hover  {
        border: 2px solid var(--primary);
        background-color: var(--primary);
        color: var(--light) !important;
    }
    .bg-gallery {
        padding: 0 14%;
    }
    .bg-ukraine-bdg {
      background-size: 175px !important;
    }
    .hero-bg-sm {
        background: rgba(255,255,255,.5) !important;
    }
}

@media (max-width: 567px) {
    .bg-gallery {
        padding: 0 10%;
    }
}

.fancybox-title {
    margin-top: 2px !important;
    top: 7px !important;
    text-align: center;
}

.ukraine-donate:hover {
    cursor: pointer;
}

.loading-paypal {
    position: absolute;
    left: 25%;
    top: 37%;
    width: 40px !important;
}

.hero-header {
    background: url(../img/cat-sleeping.webp) center right no-repeat;
    background-size: contain;
}

.btn-play {
    position: relative;
    display: block;
    box-sizing: content-box;
    width: 0px;
    height: 16px;
    border-radius: 100%;
    border: none;
    outline: none !important;
    padding: 14px 20px 16px 28px;
    background: #FFFFFF;
}

.btn-play:before {
    content: "";
    position: absolute;
    /* z-index: 0; */
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    display: block;
    width: 40px;
    height: 40px;
    background: var(--primary);
    border-radius: 100%;
    animation: pulse-border 1500ms ease-out infinite;
}

.btn-play:after {
    content: "";
    position: absolute;
    /* z-index: 1; */
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    display: block;
    width: 40px;
    height: 40px;
    background: #FFFFFF;
    border-radius: 100%;
    transition: all 200ms;
}

.btn-play span {
    display: block;
    position: relative;
    /* z-index: 3; */
    width: 0;
    height: 0;
    left: -10px;
    border-left: 16px solid var(--primary);
    border-top: 11px solid transparent;
    border-bottom: 11px solid transparent;
}

#videoModal .modal-dialog {
    position: relative;
    max-width: 800px;
    margin: 60px auto 0 auto;
}
.modal-header {
  padding: 0.5rem 1rem;
}}
.modal-backdrop {
  background: #000;
  opacity: 0.7;
  /* z-index: 1000; */
}
#videoModal .modal-body {
    position: relative;
    padding: 0px;
}



#videoModal .close {
    position: absolute;
    width: 30px;
    height: 30px;
    right: 0px;
    top: -30px;
    /* z-index: 1001; */
    font-size: 30px;
    font-weight: normal;
    color: #FFFFFF;
    background: #000000;
    opacity: 1;
}

.bg-primary {
    background: var(--primary) !important;
}

.text-primary {
    color: var(--primary) !important;
}

.bi-batch-check::before {
    content: "\F4B6";
}

.rounded {
    border-radius: 10px;
}

.shadow-sm {
    box-shadow: 0 0.125rem 0.25rem rgba(0,0,0,0.4) !important
}

.shadow-sm-bottom {
    box-shadow: 0 0.5rem 0.5rem -0.5rem rgba(0,0,0,0.4) !important
}

.shadow-sm-top{
    box-shadow: 0 -0.5rem 0.5rem -0.5rem rgba(0,0,0,0.4) !important;
    /* z-index: 1015; */
    position: relative;
}

.shadow-img {
    box-shadow: 0.25rem 0.25rem 0.25rem rgba(0,0,0,0.4) !important
}

.text-shadow-dark {
    text-shadow: 1px 1px var(--dark);
}

.display-6 {
    font-weight: 400;
    font-size: 2rem;
}

.btn-outline-primary {
    color: var(--primary);
    border-color: var(--primary);
}

.btn-outline-primary-reversed {
    color: var(--light);
    border-color: var(--primary);
    background-color: var(--primary)
}

.btn-outline-primary:hover {
    color: #fff;
    background-color: var(--primary);
    border-color: var(--primary);
}

.btn-outline-primary-reversed:hover {
    color: var(--primary);
    background-color: var(--light);
    border-color: var(--light);
}

.bg-farm-cats {
    background-image: url(../img/farm-cat.jpeg);
    background-size: cover;
}
.bg-ukraine {
    background-image: url(../img/upaw/ukraine-appeal.webp);
    background-repeat: no-repeat;
    background-position:  calc(100% - 4%) calc(100% - 10px);
}
.bg-postcode-lottery {
  background-image: url(../img/trixie-bg.webp);
  background-repeat: no-repeat;
  background-position: center right;
  background-color: var(--light);
  background-size: contain;
}

.bg-ukraine-bdg {
    background-color: var(--secondary);
    background-image: url(../img/upaw/button-upaw.webp);
    background-position: right center;
    background-repeat: no-repeat;
    overflow: hidden;
}


.bg-gallery {
  background-image: url(../img/wood-repeat.jpg);
  background-repeat: repeat;
  /* z-index: 8; */
}

.border-primary {
    border-color: var(--primary) !important;
}

.xx-small {
    display: block;
    font-size: 11px;
}

.w-10 { width: 10% !important;}
.w-15 { width: 18% !important;}
.w-20 { width: 20% !important;}
.w-25 { width: 25% !important;}
.w-30 { width: 30% !important;}
.w-40 { width: 40% !important;}
.w-50 { width: 50% !important;}
.w-60 { width: 60% !important;}
.w-65 { width: 65% !important;}
.w-70 { width: 70% !important;}

.fw-light { font-weight: 100 !important;}
.fw-100 { font-weight: 100 !important;}
.fw-300 { font-weight: 300 !important;}
.fw-600 { font-weight: 600 !important;}

.border-gallery {
    border-color: white !important;
    border-width: .7em !important;
    border-radius: 5px;
    border-bottom-width: 2em !important;
    box-shadow: 0.25rem 0.25rem 0.25rem rgba(0,0,0,0.4), -1px 1px 5px black !important
}

.border-video {
    border-color: #B00000 !important;
}

.border-gallery:hover {
    rotate: 0deg;
    scale: 1.1;
    z-index: 10;
    cursor: zoom-in !important;
    transition: all 0.3s ease-in-out;
}

.border-gallery a {
    cursor: zoom-in !important;
}

.upaw-01{ margin: 0 auto !important; width: 70%; rotate: 1deg; }
.upaw-02{ margin: 1.7em 0 0 0em !important; rotate: 2deg; width: 110%;}
.upaw-03{ margin: 1.9em 0em 0em 1em !important; rotate: -3deg; width: 90%; }
.upaw-04{ margin: -1em 0 0 0em !important; rotate: 4deg; }
.upaw-05{ margin: -6em 0 0 0em !important; rotate: -1deg; left: 2em; width:96%; }
.upaw-06{ margin: -2em 0 0 0em !important; rotate: -2deg; left: 0.9em; }
.upaw-07{ margin: -0.5em 0 0 -1em !important; rotate: 3deg; left: 1em; width:90%}
.upaw-08{ margin: -5.5em 0 0 -1em !important; rotate: 3deg; left: 2.5em; width:80%;}
.upaw-09{ margin: -0.5em 0 0 -1em !important; rotate: -1deg; left: -0.5em;}
.border-dark-r {
    border-right: 1px solid black;
}

.tbl-tel, .tbl-tel-sm {
    background-image: url(../img/small-phone.png);
    background-repeat: no-repeat;
    padding-left: 4rem;
    background-position: 3% center;
}

.ret-01{ margin: 0 0 0 0; scale: 1 !important; }
.ret-02{ margin: 1.5em 1em 0 1em !important; rotate: 2deg; /* z-index: 10;*/}
.ret-03{ margin: 1em 0 0 1em !important; rotate: -1deg; }
.ret-04{ margin: 1em 2em 0 -1em !important; rotate: 3deg; /*z-index: 11;*/ left: -1em;}
.ret-05{ margin: 1em 0.5em 0 0.5em !important; rotate: 1deg; }
.ret-06{ margin: 1em 0 0 0 !important; rotate: -3deg; left: 1em;}
.ret-07{ margin: 1em 0 0 0 !important; rotate: 3deg; left: -0.5em;}
.ret-08{ margin: 1.5em 0 0 -1em !important; rotate: -4deg; right: 1em; /*z-index: 12;*/}
.ret-09{ margin: 1em 2em 0 2em !important; rotate: 1deg;}

@media (max-width: 992px) {
    .ret-01, .ret-02, .ret-03, .ret-04, .ret-05, .ret-06, .ret-07, .ret-08, .ret-09,
    .upaw-01, .upaw-02, .upaw-03, .upaw-04, .upaw-05, .upaw-06, .upaw-07 {
        max-width: 50vw !important;
        left: 0 !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

@media (max-width: 567px) {
    .ret-01, .ret-02, .ret-03, .ret-04, .ret-05, .ret-06, .ret-07, .ret-08, .ret-09,
    .upaw-01, .upaw-02, .upaw-03, .upaw-04, .upaw-05, .upaw-06, .upaw-07 {
        max-width: 65vw !important;
        left: 0 !important;
        margin: 0 auto !important;
    }
    .upaw-01 {
      margin-bottom:1em !important;
    }
    .bg-ukraine-bdg {
        background-image: none;
        overflow: hidden;
      }
      .w-60{
        width: 100% !important;
    }
    .loading-paypal {
        left: 25%;
        top: 43%;
        width: 24px!important;
    }

}

.about-01 {margin: 0 auto !important; rotate: 1deg; width: 78%;}
.about-02 {margin: 0 auto !important; rotate: -3deg; width: 75%;}
.about-03 {margin: 0 auto !important; rotate: 2deg; width: 80%;}
.about-opening {rotate: -1deg;}
.about-04 {margin: 1em 0 0 0 !important; rotate: 1deg;}

.rehome-01 {margin: 0 4em 0 4em !important; rotate: 1deg; width: 65%}
.rehome-02 {margin: 0 4em 0 4em !important; rotate: -1deg; width: 70%;}

@media (max-width: 768px) {
  .about-01 {margin: 0 auto 0 auto !important; rotate: 1deg; max-width:75%;}
  .about-02 {margin: -2em auto 0 auto !important; rotate: -5deg; max-width:75%;}
  .about-03 {margin: -2em auto 0 auto !important; rotate: 2deg; max-width:75%;}
  .about-04 {margin: 1em auto 0 auto !important; rotate: 1deg; max-width:75%;}

  .rehome-01 {margin: 0 auto 0 auto !important; rotate: 1deg; max-width: 65%}
  .rehome-02 {margin: 0 auto 0 auto !important; rotate: -1deg; max-width: 70%;}

}


.opacity-5 {
    opacity: .5;
}

@keyframes wiggle {
    0% { transform: rotate(0deg); }
    80% { transform: rotate(0deg); }
    85% { transform: rotate(5deg); }
    95% { transform: rotate(-5deg); }
    100% { transform: rotate(0deg); }
}

.play-icon {
    width:1em;
}

.btn-play-link {
    top: 16em;
   /* z-index: 1011;*/
}
.btn-play-link span {
  display: none;
}

img.wiggle {
    display: inline-block;
    width: 50px;
    animation: wiggle 2.5s infinite;
}

.accordion-button {
    border: 1px solid rgba(0,0,0,0.125) !important;
    padding: .6em 1rem 0.6rem 0.5rem !important;
}

.accordion-button span {
    font-size: 0.8rem !important;
}

.accordion-button:hover {
    background-color: #ccc !important;
}

.accordion-button:not(.collapsed){
    border-top: 1px solid var(--primary) !important;
    border-right: 1px solid var(--primary) !important;
    border-bottom: 1px solid rgba(0,0,0,0.125) !important;
    border-left: 1px solid var(--primary) !important;
    background-color: var(--primary) !important;
    color: var(--light) !important;
}

.accordion-body {
    border-top: 1px solid transparent !important;
    border-right : 1px solid var(--primary) !important;
    border-bottom : 1px solid var(--primary) !important;
    border-left : 1px solid var(--primary) !important;
    margin-bottom: 1rem;
    border-radius: 0 0 1rem 1rem;
}

.accordion-item {
    border: none !important;
}

.px-lg-7 {
    padding-left: 7rem !important;
    padding-right: 7rem !important;
}

.error-404 {
    font-size:10rem;
    font-weight: bold;
    text-align: center;
    color:#aaa;
    border:1px solid #aaa;
    border-radius: 10px;
    background:#eee;
    padding-top:2rem;
}

.error-404-img,
.donation-cancel-img {
    position: absolute;
    width:50%;
    margin-top:-58px;
    right:25%;
}