@charset "utf-8";
/* CSS Document */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 16px;
    margin: 0;
    padding: 0;
}
/**************header**********************/
header {
	background-image: url(../images/jacky_portada.jpg);
	background-size: cover;
	background-position: top center;
	background-repeat: no-repeat;
	background-clip: border-box;
    height: 80vh;
    margin-top: -3%;
    margin-bottom: 22%;
    width: 100%;
}
.header{
    position: relative;
    top: 19rem;
    text-align: center;
    z-index: 1;
}
h1 {
    color: rgba(255, 255, 255, 1);
    font-family: 'Aladin', cursive;
    text-shadow: 0px 0px 4px rgb(95, 2, 49); 
}
h2 {
    font-family: 'Dancing Script', cursive;
    color: rgb(99, 4, 59);
    text-shadow: 0px 0px 4px rgb(211, 147, 184);
}
/*******************nav***********************/
nav {
    background-color: rgba(46, 79, 128, 1);
    font-size: 1.1rem;
    width: 100%;
}
nav a:hover {
    background-color: rgba(39, 67, 109, 1);
}
@media only screen and (max-width: 991px) {
    .grides {
        padding-top: 0.3rem;
        padding-bottom: 0.3rem;
    }
}
@media only screen and (min-width: 992px) {
    .grides {
        border-right: 1px solid rgba(90, 109, 136, 1);
        padding-right: 0.2rem;
    }
}
.cl-border {
    border-bottom: 1px dashed rgba(46, 79, 128, 0.4);
    font-size: 1.1rem;
}
.cl-border:hover {
    background-color: rgb(110, 151, 211);
}
.n-center {
    text-align: center;
}
.n-centrar {
    text-align: right;
}
/******************general*********************/
.titles {
    text-align: center;
    width: 100%;
}
.imagens {
    box-shadow: 0px 0px 6px rgba(255, 255, 255, 1);
    height: auto;
    width: 100%;
}
/**********************main*************************/
main {
    background-color: rgba(255, 243, 219, 1); 
    box-shadow: 0px 0px 8px rgba(44, 41, 39, 1);
}
/*****************presentacion****************/
.h-presentacion {
    font-family: 'Galada', cursive;
    color: rgba(43, 23, 4, 1);
    text-shadow: 0px 0px 4px rgba(238, 223, 209, 1);
}
/********************presentacion_quality*************/
.space {
    height: 5vh;
}
.quality {
    border: 1px solid rgba(66, 2, 63, 1);
    border-radius: 1rem;
    box-sizing: border-box;
    margin-bottom: 1%;
}
.h-calidad {
    font-family: 'Courgette', cursive;
    color: rgb(255, 255, 255);
    text-shadow: 0px 0px 4px rgb(43, 4, 35);
}
.h3-calidad {
    font-family: 'Dancing Script', cursive;
    color: rgb(9, 105, 143);
    font-weight: bold;
    text-align: center;
}
.skew-quality {
    background-color: rgba(251, 205, 107, 1);
    transform: skew(180deg, -176deg);
}
.skew-quality-0 {
    background-color: rgba(251, 205, 107, 1);
    transform: skew(180deg, 170deg);
    margin-top: 2%;
    padding: 4% 0%;
}
.skew-0 {
    transform: skew(180deg, -174deg);
}
.borders {
    border-radius: 5%;
}
/************************camadas***********************/
.h-litter {
    color: rgb(141, 25, 85);
    font-family: 'Great Vibes', cursive;
    font-weight: bolder;
    text-shadow: 1px 1px 2px rgba(255, 255, 255, 1);
}
.port {
    border-radius: 2%;
    background-color: rgba(66, 183, 199, 1);
    box-shadow: 2px 2px 4px rgb(35, 142, 156);
    width: 99%;
}
.boton-litter {
    background-color: rgba(125, 33, 129, 1);
    color: rgba(255, 255, 255, 1);
    font-size: 1.1rem;
    font-weight: 500;
}
.boton-litter:hover {
    background-color: rgba(204, 0, 102, 0.8);
    color: rgba(255, 255, 255, 1);
}
/********************ejemplares*******************/
.h-exemplar {
    color: rgba(44, 28, 7, 1);
    font-family: 'Aladin', cursive;
    font-weight: bolder;
    text-shadow: 1px 1px 2px rgba(228, 214, 188, 1);
}
.separet {
    border-top: 1px solid rgba(209, 199, 186, 1);
    box-shadow: 0px 0px 6px rgba(44, 41, 39, 1);
}
.porta {
    border-radius: 2%;
    background-color: rgba(212, 173, 91, 1);
    box-shadow: 2px 2px 4px rgb(158, 129, 67);
    width: 99%;
}
.boton-ex {
    background-color: rgb(59, 163, 177);
    color: rgba(255, 255, 255, 1);
    font-size: 1.1rem;
    font-weight: 500;
}
.boton-ex:hover {
    background-color: rgb(41, 117, 128);
}
/******************noticias********************/
.h-news {
    color: rgba(49, 8, 8, 1);
    font-family: 'Argo', cursive;
    font-weight: bolder;
    text-shadow: 1px 1px 2px rgb(236, 218, 218);
}
.news {
    background-color: rgba(196, 186, 166, 1); /*207, 225, 133*/
    border-radius: 2%; 
    box-shadow: 0px 0px 6px rgba(44, 41, 39, 1);    
}
.back {
    background-color: rgba(196, 186, 166, 1);
    border: 2px solid rgba(196, 186, 166, 1);
}
.img-news {
    border-radius: 30%;
}
.img-news:hover {
    border-radius: 0%;
}
/*******************galeria******************/
.h-gallery {
    color: rgba(49, 8, 8, 1);
    font-family: 'Argo', cursive;
    font-weight: bolder;
    text-shadow: 1px 1px 2px rgb(236, 218, 218);
}
.galeria {
    background-color: rgba(255, 243, 219, 1);
}
.background {
    background-color: rgba(255, 243, 219, 1);
    border: 2px solid rgba(255, 243, 219, 1);
}
.img-gallery {
    border-radius: 50%;
}
.img-gallery:hover {
    border-radius: 0%;
}
/*******************footer***********************/
footer {
    background-color: rgba(44, 41, 39, 1); 
    color: rgba(255, 255, 255, 1);
}
.borders {
    border: 1px solid rgba(255, 243, 219, 0.2); 
    border-radius: 2%;
}
.f-uno {
    background-color: rgba(255, 243, 219, 0.1);
}
.f-dos {
    background-color: rgba(255, 243, 219, 0.2);
    border-top: 2px solid rgba(255, 243, 219, 0.2);
}
.f-tres {
    background-color: rgba(255, 243, 219, 0.3);
}
.f-cuatro {
    background-color: rgba(158, 147, 127, 0.4);
}
.f-cinco {
    background-color: rgba(255, 243, 219, 0.1);
}
.boton-footer {
    background-color: rgba(255, 243, 219, 1); 
    box-shadow: 0px 0px 8px rgba(44, 41, 39, 1);
    border: 2px solid rgba(180, 138, 0, 1);
    border-radius: 0.5rem;
    color: rgba(0, 0, 0, 1);
    margin: 4% 5%;
    padding: 0.4rem;
    text-align: center;
    width: 90%;
}
.boton-footer:hover {
    background-color: rgba(44, 41, 39, 1);
    border: 2px solid rgba(196, 186, 166, 1);
    color: rgb(255, 255, 255);
}
h5.contacto {
    background-color: rgba(180, 138, 0, 1); 
    border-radius: 0.5rem;
    color: rgb(31, 30, 28);
    margin-bottom: 2%;
    padding: 2% 0%;
    text-decoration: underline;
}
h5.contacto:hover {
    background-color: rgba(44, 41, 39, 1);
    border: 2px solid rgba(180, 138, 0, 1); 
    color: rgba(255, 255, 255, 1);
}
.h5-aush {
    font-family: 'Aladin', cursive;
}
.o-sep {
    padding: 2%;
}
.imagens-footer {
    border-radius: 0.5rem;
    height: auto;
    width: 100%;
    max-width: 150px;
}
.other {
    color: rgba(255, 255, 255, 1);
}
.other:hover {
    background-color: rgba(209, 199, 186, 1);
    color: rgba(0, 0, 0, 1);
    text-decoration: underline;
}
#copyright {
    background-color: rgba(255, 243, 219, 0);/*
    border: 1px solid rgba(255, 243, 219, 0.3);*/
    border-radius: 0.5rem;
    margin: 1rem 0.1rem;
    margin-bottom: 2rem;
    padding: 1%;
    text-align: center;
}
#copyright a {
    color: rgba(255, 255, 255, 1);
}
#copyright a:hover {
    color: rgb(223, 161, 217);
}