:root{		
		--preto:#4C4240;
		--branco:#EDE7DC;
		--cinza:#988E7F;

		--default:#699691; 
        --brand:#699691; 
        --brand-dark:#416A66; 
		--primary:#699691; 
		--success:#38D775; 
		--warning:#DB9B28; 
		--danger:#CB6828; 
		--error:#CB6828; 
        
        /* Fonts */
        --font-sans:'Barlow Condensed', Impact, sans-serfi;
        --font-serif: 'Orelega One', Times, serif;
        --fs-1: 0.8rem;
        --fs-2: 1rem;
        --fs-3: 1.2rem;
        --fs-4: 1.5rem;
        --fs-5: 2rem;
        --fs-6: 2.5rem;
        --fs-7: 3rem;
        --fs-8: 3.2rem;

        /* Color */

        /* Structures */
        --b_radius: 24px;
        --b_radius_100: 999px;
		
	}

    /* Helpers */
    .overflow-hidden {overflow: hidden;}
    .debug {border:solid rgb(255, 0, 55) 1px;}

    /* General styles */
    .round-corners, .round-borders {border-radius: var(--b_radius);}
    .round-corners-top {border-top-left-radius: var(--b_radius); border-top-right-radius: var(--b_radius);}
    .round-corners-bottom {border-bottom-left-radius: var(--b_radius); border-bottom-right-radius: var(--b_radius);}

    .bgcolor-brand, .bgcolor-primary, .bgcolor-default {background-color:var(--brand);}
    .bgcolor-warning {background-color:var(--warning);}
    .bgcolor-danger, .bgcolor-error {background-color:var(--danger);}
    .bgcolor-success {background-color: var(--success);}

    .lead-text, .text-lead {font-size:1.5rem; line-height:1.95rem;}

    .text-color-warning {color:var(--warning);}
    .text-color-brand {color:var(--brand);}
    .text-color-brand_dark {color:var(--brand-dark);}
    .text-color-danger {color:var(--danger);}
    .text-color-preto {color:var(--preto);}
    .text-color-branco {color:var(--branco);}

    .fw-bold {font-weight: bold;}
    .fw-thin {font-weight: thin;}

    .font-serif {font-family: var(--font-serif);}
    .font-sans {font-family: var(--font-sans);}

    /* Criando as classes de utilidade */
    [class^="fs-"] {
        font-size: var(--fs-default, 1rem); /* Valor padrão caso a classe não bata */
    }

    .fs-1 { font-size: var(--fs-1); }
    .fs-2 { font-size: var(--fs-2); }
    .fs-3 { font-size: var(--fs-3); }
    .fs-4 { font-size: var(--fs-4); }
    .fs-5 { font-size: var(--fs-5); }
    .fs-6 { font-size: var(--fs-6); }
    .fs-7 { font-size: var(--fs-7); }
    .fs-8 { font-size: var(--fs-8); }

    /* Elements */
    body {
        background-color:var(--branco);
        font-family: var(--font-sans);
        color: var(--preto);
        font-size: 16px;
        font-weight: 400;
    }

    a {color:inherit};
    a:hover {color:var(--warning)}

    p a {color:var(--brand);}

    h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {color:inherit;}
    h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover {color:var(--warning);}
    
    section.container {
        margin-top:50px;
        margin-bottom:50px;
    }

    blockquote {
        border-radius: var(--b_radius);
        background-color: var(--warning);
        font-size: 2rem;
        color:var(--branco);
        font-family: var(--font-serif);
        padding: 20px;
        width:48%;
    }

    /* Custom and Overrides */

    /* Navegation */
    nav#my-navbar-container {
        margin:0 auto;
        padding:10px auto;
        margin-bottom:-20px; /* puxa para cima o jumbotron */
        background-color:var(--branco); 
        border-radius: var(--b_radius_100); 
        box-shadow: 0 2px 10px var(--preto); 
        width: 90%;
        max-height: 60px;
        margin-top: 20px;
        position: relative;
        z-index: 99;
    }

	div#my-navbar ul.navbar-nav li {font-size: 1.05rem; text-transform: uppercase; font-family:var(--font-sans);}
		div#my-navbar ul.navbar-nav li a {color:var(--preto); padding:.3rem .5rem .3rem .5rem; border-radius: var(--b_radius);}
			div#my-navbar ul.navbar-nav li a:hover {text-decoration:none; background-color:var(--danger); color:var(--branco);}
    
    .dropdown-menu {
        border-radius: 10px;
        border: solid var(--cinza) 1px;
        background-color:var(--branco);
    }

    /* Header */
    img.img-logo-topo {max-width:90px; margin:20px 0;}

    /* Breadcrumbs */
    	#page-heading {background-color: var(--cinza); border-radius: var(--b_radius); width:98%; color:var(--branco); padding: 25px 5%; margin-bottom:25px;}
		#page-heading h1.header-pagetitle {font-family: var(--font-sans); font-size:2rem; font-weight: bold; text-transform: uppercase; line-height:4rem; margin:0;}

            ol.breadcrumb {float:right; background: transparent; text-align: right; padding: 0; height: auto; margin: 20px 0; font-family: var(--font-sans); font-size:.9rem;}
            ol.breadcrumb li a, .breadcrumb>li+li:before {color: var(--branco);}
            ol.breadcrumb li.active {color:var(--branco);}

    /* Home */
    #homeCarousel .carousel-inner .carousel-item .carousel-caption {
        right:0;
        left:0;
        top:10px;
        width:100%;
        color:var(--branco);
        text-align:left;
        padding:25px;
    }
    
        #homeCarousel .carousel-inner .carousel-item#carousel-bemvindo .carousel-caption {
            width: 45%;
            padding-top: 50px;
            margin-left: 55px;
        }
    /* Home Carousel - Bem Vindo */
    #carousel-bemvindo .carousel-caption h3 {
        color: var(--branco);
        font-size: 2rem;
    }

    #carousel-bemvindo .carousel-caption h2 {
        color: var(--warning);
        font-size: 4rem;
        text-transform: uppercase;
        font-weight: 700;
        line-height: 4.25rem;
    }

    #carousel-bemvindo .carousel-caption p {
        font-size: 1.5rem;
        line-height: 1.5rem;
    }

    /* Filosofia */
    section.filosofia-criacao h2 {
        color:var(--brand);
        font-size: 4rem;
        text-transform: uppercase;
        font-weight: 800;
    }

    section.filosofia-criacao p {
        font-family: var(--font-serif);
        color: var(--cinza);
        font-size: 1.2rem;
    }

    /* Quem Somos */
    .quem-somos {
        padding:0;
        margin-top:100px;
    }

        .quem-somos img.quemsomos-isabella {
            position:relative;
            top: -100px;
            margin-bottom:-100px;
            border-radius: var(--b_radius);
        }

    /* Tabs */
    ul.tabs-headers li {padding: 8px;}

    ul.tabs-headers li:has(a.active), ul.tabs-headers li:hover {
        color:var(--branco);
        background-color: var(--brand);
        border-top-left-radius: var(--b_radius);
        border-bottom-left-radius: var(--b_radius);
    }
        ul.tabs-headers li a:hover{color:var(--branco);}

        .tab-content {
            border-radius: var(--b_radius);
            border-top-left-radius: 0;
            background-color:var(--brand);
            padding:20px;
        }
    /* Caes */
    .container-lista-caes img {
        border-radius: var(--b_radius);
    }

    .container-lista-caes h2 {
        color: var(--danger);
        font-size: 3rem;
        font-weight: bold;
    }
    .container-lista-caes h4 {
        color: var(--cinza);
        font-size: 1.5rem;
    }  
    /* O Golden */
    .container-ogolden {
        background-color:var(--brand);
        color:var(--branco);
        text-align: center;
        border-radius: var(--b_radius);
        padding-bottom: 20px;
    }
    /* Depoimentos / Porque Calli */
    .grid { margin: 0 auto;}
    
    .grid-item {
        width: 32%; /* Default para 3 colunas width: calc(33% - 8px); */
        margin-bottom: 16px;
        float: left; 
    }
    /* calc usando para um gutter de 16px! */
    .grid-item.cols-4 {width: calc(25% - 8px);}
    .grid-item.cols-3 {width: calc(33% - 8px);}
    .grid-item.cols-2 {width: calc(50% - 8px);}

    .stamp {position: absolute;}

        .stamp-title {
            right: 0;
            top: 0;
            width: 32%;
            height: auto;
        }

    .card-depoimentos {padding: 20px;}
        
        .card-depoimentos .container-texto-depoimento {
            max-height: 100px;
            overflow: hidden;
            transition: max-height 0.3s ease-in-out;
        }
        
        .container-texto-depoimento.expanded {
            max-height: none;
        }

        .btn-read-more {
            background: none;
            border: none;
            color: var(--branco);
            cursor: pointer;
            font-weight: bold;
        }
        .card-depoimentos p {
            color:var(--branco);
            font-family: var(--font-serif);
            font-size: 1.125rem;
        }
            .card-depoimentos p:last-child {font-size:1rem;}
    
    /* Blog */

    .blog-article h1 {font-size:2.5rem;}
    .blog-article-details h4 {font-size:1rem;}
    
    .blog-article-body p:first-of-type {font-size:1.5rem!important;}
    .blog-article-body img.img-upload-trumbowyg {border-radius: var(--b_radius); margin:10px 0;}

    ul.blog-list-tags {
        list-style: none;
        margin: 0;
    }
        ul.blog-list-tags li {display: inline;}
    
    .widget ul li {
        border-bottom: solid var(--cinza) 1px;
        padding:5px 0 5px 5px;
    }
        .widget ul li a:hover {color:var(--brand);}

    img.img-upload-trumbowyg {margin:0 auto; margin-top:10px; margin-bottom:10px;}

    /* Historia Raça : Timeline */
    .timeline-container {
        margin:25px 0 25px;
    }

    .timeline-item {
        position: relative;
        margin-bottom: 40px;
    }

    .timeline-item h3 {
        text-align: center;
        color:var(--warning);
        font-size: 4rem;
        font-weight: bold;
        margin: 0;
        padding: 0;
    }
    .timeline-item p {
        font-size: 1.45rem;
    }

    .line {
        position: absolute;
        left: 50%; /* Centraliza a linha no meio da coluna */
        width: 3px;
        height: 50%;
        background-color: var(--warning);
        z-index: -1; /* Fica atrás do ano */
    }

        /* Esconde a linha do último item se desejar */
        .timeline-item:last-child .line {display: none!important;}

    /* Cães */
    section.container-caes-detalhes h2 {
        font-size:4rem; 
        font-weight:bold;
    }

    section.container-caes-detalhes ul.lista-ficha-cao {
        list-style: none; 
        padding:0px;
    }
        section.container-caes-detalhes ul.lista-ficha-cao li {padding:2px 0;}

    /* PORQUE um CALLI */
    .item-pq-goldencalli {
        border-radius: var(--b_radius);
        padding:20px;
        color:var(--branco);
    }

    /* Contato */
    input.my-input-text, select.my-select, textarea.my-textarea {border-radius: var(--b_radius); border:solid var(--danger) 1px; background-color:transparent;}

    /* Pagination */
    ul.pagination li {text-align: center; margin: 0 2px;}
        
    ul.pagination li a {
        color:var(--branco);
        background-color: var(--danger);
        padding: 16px;
        border-radius: var(--b_radius);
        height: 42px;
        text-align: center;
    }
    ul.pagination li.active a {background-color:var(--branco);border:solid var(--danger) 2px;color:var(--danger);}
        ul.pagination li a:hover {
            background-color:var(--branco);
            border:solid var(--danger) 2px;
            color:var(--danger);
        }
    /* Footer */
    footer {
        padding-top: 25px;
        background-color: #766E61;
        color: var(--branco);
        border-top-left-radius: var(--b_radius);
        border-top-right-radius: var(--b_radius);
        font-size:14px;
    }

        footer h3 {font-size:1.1rem;}

		footer ul.lista-redesociais {font-size: 1.5rem;}
        footer ul.lista-redesociais li {display: inline; margin:0 0.25rem 0 0.25rem; font-size:2rem;}
        
        .back-to-top {cursor: pointer;position: fixed;bottom: 20px;left: 20px;display:none;}

    /* Bootstrap resets */
    .dropdown-toggle::after {
        border-top: .2em solid;
        border-right: .2em solid transparent;
        border-bottom: 0;
        border-left: .2em solid transparent;
    }
    /* Google Icons */
    .material-symbols-outlined {
        font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 24;
        vertical-align: middle; 
    }
    /* Buttons */
    .btn {border-radius:var(--b_radius); font-size: 14px; font-family: var(--font-sans);} 
        .btn.btn-wide {padding: .375rem 1.75rem;}
        .btn.btn-branco {background-color:transparent; color:var(--branco); border-color:var(--branco);}
		.btn.btn-default {background-color: var(--default); border-color:var(--default); color:var(--branco);}
		.btn.btn-primary, .btn.btn-brand {background-color: var(--primary); border-color:var(--brand); color:var(--branco);}
		.btn.btn-success {background-color: var(--success); border-color:var(--success);}
		.btn.btn-warning {background-color: var(--warning); border-color:var(--warning);}
		.btn.btn-danger,.btn.btn-error {background-color: var(--danger);border-color:var(--danger);}
	.btn.btn-default:hover, .btn.btn-primary:hover {background-color: var(--danger); color:var(--branco);}
    :is(.btn):hover {background-color:var(--danger);color:var(--branco);}
    .btn.transp {background-color:transparent; color:inherit; border-color:inherit;}

    .btn-circle {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0;
    }

    /* Responsive */
    @media (max-width: 767px) {
        nav#my-navbar-container {
            margin:-80px auto;
            padding:0px auto;
            margin-bottom:-10px; /* puxa para cima o jumbotron */
            background-color:transparent; 
            border-radius: 0; 
            box-shadow:none; 
            width: 100%;
            max-height: none;
            height:auto;
            position: relative;
            top:70px;
        }
        .navbar-toggler {
            background-color:var(--branco);
            border-radius: var(--b_radius_100);
            border:none;
            box-shadow: 0 2px 5px rgba(153, 143, 128,0.6); 
            width: 60px;
            height:60px;
            color:var(--danger)!important;
        }
        
        #my-navbar {position:relative; background-color:var(--branco);border-radius: var(--b_radius);padding:20px; box-shadow: 0 2px 5px rgba(153, 143, 128,0.6); }
        
        section.container-home-carousel {padding:0}

        #homeCarousel .carousel-inner {width:100%;}

            #homeCarousel .carousel-inner .carousel-item#carousel-bemvindo .carousel-caption {
                width: 60%;
                padding-top: 50px;
                margin-left: 0px;
            }

        /* Home Carousel - Bem Vindo */
        #carousel-bemvindo .carousel-caption h3 {
            color: var(--branco);
            font-size: 1.2rem;
        }

        #carousel-bemvindo .carousel-caption h2 {
            font-size: 1.3rem;
            line-height: 1.05rem;
        }

        #carousel-bemvindo .carousel-caption p {
            font-size: .8rem;
            line-height: 1rem;
        }

        .quem-somos img.quemsomos-isabella {
            top: 0;
            margin-bottom: 0;
        }

        footer {text-align: center;}

        img.img-logo-rodape {
            max-width: 180px;
            margin:0 auto;
        }

        /* Masonry */
        .grid-item { width: 100%;}
        
        .grid-item.cols-2,.grid-item.cols-3,.grid-item.cols-4{width:100%!important;}

        .stamp-title {
            right: 0;
            top: 0;
            width: 100%;
            height: auto;
        }

        blockquote {
            float: none !important;
            margin-left: 0 !important;
            text-align: left !important;
            width: 100% !important;
        }
    }

    @media (min-width: 768px) and (max-width: 1000px) {
       nav#my-navbar-container {
            margin:-80px auto;
            padding:0px auto;
            margin-bottom:-10px; /* puxa para cima o jumbotron */
            background-color:transparent; 
            border-radius: 0; 
            box-shadow:none; 
            width: 100%;
            max-height: none;
            height:auto;
            position: relative;
            top:70px;
        }
        .navbar-toggler {
            background-color:var(--branco);
            border-radius: var(--b_radius_100);
            border:none;
            box-shadow: 0 2px 5px rgba(153, 143, 128,0.6); 
            width: 60px;
            height:60px;
            color:var(--danger)!important;
        }
        
        #my-navbar {position:relative; background-color:var(--branco);border-radius: var(--b_radius);padding:20px; box-shadow: 0 2px 5px rgba(153, 143, 128,0.6); }
        
        section.container-home-carousel {padding:0}

        #homeCarousel .carousel-inner {width:100%;}
        nav#my-navbar-container {width: 100%;}

         /* Masonry */
        .grid-item { width: 100%;}

        .stamp-title {
            right: 0;
            top: 0;
            width: 100%;
            height: auto;
        }

        blockquote {
            float: none !important;
            margin-left: 0 !important;
            text-align: left !important;
            width: 100% !important;
        }
    }

    @media (min-width: 1001px ) and (max-width: 1200px){
        nav#my-navbar-container {
            margin:-80px auto;
            padding:0px auto;
            margin-bottom:-10px; /* puxa para cima o jumbotron */
            background-color:transparent; 
            border-radius: 0; 
            box-shadow:none; 
            width: 100%;
            max-height: none;
            height:auto;
            position: relative;
            top:70px;
        }
        .navbar-toggler {
            background-color:var(--branco);
            border-radius: var(--b_radius_100);
            border:none;
            box-shadow: 0 2px 5px rgba(153, 143, 128,0.6); 
            width: 60px;
            height:60px;
            color:var(--danger)!important;
        }
        
        #my-navbar {position:relative; background-color:var(--branco);border-radius: var(--b_radius);padding:20px; box-shadow: 0 2px 5px rgba(153, 143, 128,0.6); }
        
    }

    @media (min-width: 1201px) {}

/* Collapse menu from 992px and smaller */