/*
Name: pgy-clientweb-template: custom.css
Client: Pinogy Retail Services, LLC.
Design/Code: Nicholas Cook, Andres Plashal
Developemnt: Dmitriy	Kirichenko, Manoj	Agarwal
Company: Pinogy Corporation
Version: 0.1.3

	COLORS
    - primary:    #fa0000;
    - secondary:  #2589EB;
    - tertiary:   #57A264;
    - quaternary: #757575;
    - dark:       #212529;

	FONTS
  	- default body text: "Open Sans", Arial, sans-serif;
			• Open Sans: 300,400,700

	CSS DIRECTORY
  	1. =GLOBAL
  	2. =PRIMARY
  	3. =SECONDARY
  	4. =FOOTER
    5 Default theme - Owl Carousel CSS File
*/
/* GLOBAL: global settings (resets, body, primary divs etc.)
======================================================================*/
body {
    color: #000000;
    font-size: 15px;
    line-height: 26px;
    min-width: 375px;
}

/* PRIMARY: primary layout structures (header, footer, sidebar)
======================================================================*/
/* SECONDARY: secondary layout structures (page regions, floats)
======================================================================*/
.header-nav-top .nav > li > a,
.header-nav-top .nav > li > span {
    color: #000;
    font-size: 1em;
    padding: 6px 10px;
    display: inline-block;
}

.progress {
    background: #eeeeee;
}

html .bg-color-light-scale-1 {
    background-color: #eeeeee !important;
}

.thumb-info .thumb-info-title {
    font-size: 1em;
}

html body p {
    color: #000;
}

#quote-carousel {
    padding: 0 10px 30px 10px;
    margin-top: 60px;
}
#quote-carousel .carousel-control {
    background: none;
    color: #CACACA;
    font-size: 2.3em;
    text-shadow: none;
    margin-top: 30px;
}
#quote-carousel .carousel-indicators {
    position: relative;
    right: 50%;
    top: auto;
    bottom: 0px;
    margin-top: 20px;
    margin-right: -19px;
}
#quote-carousel .carousel-indicators li {
    width: 50px;
    height: 50px;
    cursor: pointer;
    border: 1px solid #ccc;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
    border-radius: 50%;
    opacity: 0.4;
    overflow: hidden;
    transition: all .4s ease-in;
    vertical-align: middle;
}
#quote-carousel .carousel-indicators .active {
    width: 128px;
    height: 128px;
    opacity: 1;
    transition: all .2s;
}
.item blockquote {
    border-left: none;
    margin: 0;
}
.item blockquote p:before {
    content: "\f10d";
    font-family: 'Fontawesome';
    float: left;
    margin-right: 10px;
}


/* FOOTER: footer layout structures
======================================================================*/
#footer .footer-copyright {
    background: #000000;
}
html footer p {
    color: #777;
}

/**
 * Owl Carousel v2.3.4
/* Copyright 2013-2018 David Deutsch
* Licensed under: SEE LICENSE IN https://github.com/OwlCarousel2/OwlCarousel2/blob/master/LICENSE
*/
/*
* 	Default theme - Owl Carousel CSS File
*/
.owl-theme .owl-nav {
    margin-top: 10px;
    text-align: center;
    -webkit-tap-highlight-color: transparent;
}

.owl-theme .owl-nav [class*='owl-'] {
    color: #FFF;
    font-size: 14px;
    margin: 5px;
    padding: 4px 7px;
    background: #D6D6D6;
    display: inline-block;
    cursor: pointer;
    border-radius: 3px;
}

.owl-theme .owl-nav [class*='owl-']:hover {
    background: #869791;
    color: #FFF;
    text-decoration: none;
}

.owl-theme .owl-nav button {
    transition: opacity 200ms ease;
}

.owl-theme .owl-nav .disabled {
    opacity: 0.5;
    cursor: default;
}

.owl-theme .owl-nav.disabled + .owl-dots {
    margin-top: 10px;
}

.owl-theme .owl-dots {
    text-align: center;
    -webkit-tap-highlight-color: transparent;
}

.owl-theme .owl-dots .owl-dot {
    display: inline-block;
    zoom: 1;
    display: inline;
}

.owl-theme .owl-dots .owl-dot span {
    width: 10px;
    height: 10px;
    margin: 5px 7px;
    background: #D6D6D6;
    display: block;
    -webkit-backface-visibility: visible;
    transition: opacity 200ms ease;
    border-radius: 30px;
}

.owl-theme .owl-dots .owl-dot.active span,
.owl-theme .owl-dots .owl-dot:hover span {
    background: #869791;
}

/* MISCELLANEOUS:
======================================================================*/
/* SIMILAR PETS */
.thumb-info .thumb-info-title {
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    background: rgba(33, 37, 41, 0.8);
    color: #FFF;
    font-weight: 600;
    left: 0;
    letter-spacing: -.05em;
    position: absolute;
    z-index: 2;
    max-width: 90%;
    font-size: 1.2em;
    padding: 10px 30px 5px;
    bottom: 13%;
}

    /* TAB CONTENT: puppyKnowledge
======================================================================*/
    @media all and (max-width:724px) {
        .nav-tabs > li > a > span {
            display: none;
        }

        .nav-tabs > li > a {
            padding: 5px;
            color: #fa0000;
        }
    }

    .nav-tabs {
        padding: 1em;
    }

    .nav-tabs > li.active > a,
    .nav-tabs > li.active > a:focus,
    .nav-tabs > li.active > a:hover {
        color: #fa0000;
        background-color: transparent;
        border-color: transparent;
        border-bottom: 1px solid #000 !important;
        font-weight: 700;
    }

    .nav-tabs > li {
        text-align: center;
        width: 20%;
    }

    .nav-tabs > li > a {
        color: #000;
        font-weight: 700;
    }

    .card-body {
        background-color: #f7f7f7;
    }

    /* TAB CONTENT: slider boxes
======================================================================*/
    .tab-pane {
        padding: 0.2em;
    }

    .tab-content {
        padding: 1em;
    }

    .card {
        margin: 5px;
    }


.thumb-info .thumb-info-type {
    /*
background-color: #CCC
*/
    border-radius: 2px;
    display: inline-block;
    float: left;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0;
    margin: 8px -2px -15px 0px;
    padding: 2px 12px;
    text-transform: uppercase;
    z-index: 2;
    line-height: 2.3;
}

#footer {
    padding: 0 15px;
}

.footer-copyright {
    background-color: #000000;
}

.owl-item img{
    object-fit: cover;
    object-position: top;
}

.owl-carousel .breed-images.owl-item img {
    display: inline;
    max-height: 500px;
    width: auto;
}

.owl-carousel .breed-images.owl-item  .img-thumbnail {
    text-align: center;
}

.available-pets.owl-item img::before {
    padding-top: 100%;
}

.similar-pets img {
    object-fit: cover;
    max-height: 256px;
}

.dropdown-toggle::after {
    border-top: none;
}

#header .header-nav-main nav > ul > li > a.dropdown-toggle .fa-chevron-down {
    display: none;
}

.breed-list-nav {
    margin: 1em 0;
}

.breed-list-nav .nav-pills > li {
    margin: .5em;
}

.breed-list-nav .nav-pills > li > a,
.breed-list-nav .nav-pills .nav-link {
    padding: .5em;
}

.breed-list-nav .nav-pills > li.active > a,
.breed-list-nav .nav-pills .nav-link.active {
    color: #fff;
}

.breed-list-nav .nav-pills > li.active > a:hover,
.breed-list-nav .nav-pills .nav-link.active:hover,
.breed-list-nav .nav-pills > li.active > a:focus,
.breed-list-nav .nav-pills .nav-link.active:focus {
    background-color: #CD0009;
    color: #fff;
    text-decoration: underline;
}


.owl-carousel-slider .owl-stage {
    display: flex;
    align-items: center;
}

.owl-carousel.owl-carousel-slider .owl-stage:after {
    display: none;
}

.owl-carousel-slider__item {
    display: flex;
    align-items: center;
    max-height: 600px;
    position: relative;
    justify-content: center;
}

.owl-carousel-slider__item-caption,
.owl-carousel-slider__nested {
    margin: auto;
    position: absolute;
    bottom: 20px;
    max-width: 60%;
    left: 0;
    right: 0;
    text-align: center;
}

.owl-carousel-slider__item-caption-text,
.owl-carousel-slider__nested-item {
    padding: 1em;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 4px;
}

.owl-carousel-slider__nested {
    top: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.owl-carousel-slider__nested-item {
    margin-top: 1em;
}

.owl-carousel-slider__nested-item:first-child {
    margin-top: 0;
}

/* hero background */
body.body-base_with-hero {
    background-color: transparent !important;
}

.header-hero {
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: cover;
}

.header-hero #header .header-top {
    border-bottom-color: transparent;
    transition: box-shadow 0.2s ease-in-out
}

body.body-base_with-hero:not(.body-base_scrolled) .header-hero #header .header-top {
    border-bottom-color: transparent;
}

.header-hero #header .header-body {
    /* transition: box-shadow 0.2s ease-in-out, background-color 0.2s ease-in-out;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.15); */
}

body.body-base_with-hero:not(.body-base_scrolled) .header-hero #header .header-body {
    background-color: transparent;
    box-shadow: none;
}

body.body-base_with-hero:not(.body-base_scrolled) .header-hero #header .header-nav-top .nav > li > span > a,
body.body-base_with-hero:not(.body-base_scrolled) .header-hero #header .header-nav-top .nav > li > a,
body.body-base_with-hero:not(.body-base_scrolled) .header-hero #header .header-nav-top .nav > li > span {
    color: white !important;
    text-shadow: 2px 2px 3px #000;
}

body.body-base_with-hero:not(.body-base_scrolled) .header-hero #header .social-icons li a {
    color: white !important;
    text-shadow: 2px 2px 3px #000;
}

body.body-base_with-hero:not(.body-base_scrolled) .header-hero #header .header-btn-collapse-nav.collapsed {
    background: white;
    color: black;
}

html body.body-base_with-hero .bg-color-light-scale-1 {
    background-color: transparent !important;
}

html body.body-base_with-hero .breadcrumb > li,
html body.body-base_with-hero .breadcrumb > li a,
body.body-base_with-hero .page-header-title .text-dark {
    color: white !important;
    text-shadow: 2px 2px 3px #000;
}


/* grid images */
.grid-images__container {
    display: flex;
    justify-content: space-between;
    justify-content: space-evenly;
    align-items: stretch;
}

@media (max-width: 769px) {
    .grid-images__container {
        flex-wrap: wrap;
    }
}

.grid-images__item {
    margin: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 300px;
}

.grid-images__item-image {
    padding: 0 0 100% 0;
    margin: 0 0 1em 0;
    width: 100%;
    display: block;
    position: relative;
    box-sizing: content-box;
    border-radius: 50%;
    background-position: 50% 50%;
    background-size: cover;
    border: 8px solid white;
}

.grid-images__item-image_with-border::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    margin-top: 5px;
    margin-left: -15px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 15px 15px 0 15px;
    border-top-color: inherit;
    border-right-color: transparent;
    border-bottom-color: transparent;
    border-left-color: transparent;
}

.grid-images__item-image-text {
    font-size: 18px;
}

.grid-images__item-title {
    text-align: center;
    font-weight: bold;
}

@supports (-ms-ime-align:auto) {
	.grid-images__item {margin: 20px auto;}
}