:root{
    --h1-font-size : 2rem;
    --img-width : 7rem;

    --clr1: #ddd;
    --clr2: #efefef;
    --clr3: #333;
    --clr4: tomato;
    --border-radius: 0px;
    --text-radius: 0em;

}

body ,html{
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background: url(../plomo.jpg) no-repeat center center fixed;
    background-size: 100% 100%;
    
}

body{
    
    font-family: sans-serif;
    letter-spacing: 0.03em;
    line-height: 1.6;
    background-image: no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;

}
.doc{
    padding: 1rem;
    text-decoration: none;
    text-align: center;
 
}
.doc p a{
    color: #333;
    font-family: sans-serif;
    font-weight: 300;
}

h1{
    text-align: center;
    font-size: var(--h1-font-size);
    color: #6a6a6a;
    font-weight: 300;
}
.guinda_r-text {
    color: #ab1a1d !important;
}

.naranja_r-text {
    color: tomato !important;
}

.container{
    width: 100%;
    max-width: 1200px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: auto;

}
.container .card{
    width: 330px;
    height: 430px;
    border-radius: 8px ;
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
    overflow: hidden;
    margin: 20px;
    text-align: center;
    transition: all 0.25s;
    }

    .container .card:hover{
        transform: translateY(-15px);
        box-shadow: 0 12px 16px rgba(0, 0, 0, 0.2);

    }
    .container .card img{
        width: 330px;
        height: 220px;
       

    }
    .container .card img:hover{
        width: 330px;
        height: 220px;
        opacity: 0.7;
       

    }

    .container .card h4{
        font-size: 1rem;
        font-weight: 600;
    }
    .container .car h4:hover{
        font-size: 1.2rem;
        font-weight: 900;
    }
    .container .card p {
        padding: 0 1rem;
        font-size: 1rem;
        font-weight: 300;
    }
    .container .card a {
        font-size: 1.1rem;
        font-weight: 700;
        text-decoration: none;
        color: #3498db;
    }
    .container .card a:hover {
        font-size: 1.1rem;
        font-weight: 700;
        text-decoration: none;
        color: #fff;
        padding: 0.5rem;
        border-radius: 0.2rem;
        background: #3498db;

    }

    .cabecera {
        background-color: #b9282c;
        background: #ab1a1d;
        background: -moz-linear-gradient(top, #ab1a1d 0%, #bc6263 100%);
        background: -webkit-linear-gradient(top, #ab1a1d 0%, #bc6263 100%);
        background: linear-gradient(to bottom, #ab1a1d 0%, #bc6263 100%);
        position: fixed; 
        top: 0; 
        left: 0; 
        width: 100%; 
        padding:5px;
        height: 2rem;
        
    }

    .cabecera p {
        position: relative;
        margin-top: 0;
        margin-bottom: 0;
        padding: 5px;
        color: #fff;
        font-size: var(--h1-font-size);
        text-align: center;
        font-family: sans-serif;
        font-weight: 600;

    }
    .logo{
        position: absolute;
        width: 100%;
        top:10%;
        z-index:-1 ;
       
       
    }
    .logo .logo1  {
      
        z-index:-1 ;
        
        width: var(--img-width);             
        margin-left: auto;
        margin-right: auto;
        display: block;

        
    }
    .logo hr{
        height: 0.2px;
        background: #2E7D32;
    }

    @media screen and (max-width: 1108px) {
        .logo .logo1{
            width: 12rem;
	   margin-top: 50rem;
                     
         }
         h1{
             margin-top: 12rem;
         }
        
    }
    @media screen and (max-width :1366px) and (max-height: 768px) {
        .logo .logo1{
            width: 10rem;
	   margin-top: 5rem;
                     
         }
         h1{
             margin-top: 12rem;
         }
        
    }

    @media screen and (max-width :1920px) {
        .logo .logo1{
            width: 15rem;
	   margin-top: -1rem;
                     
         }
         h1{
             margin-top: 12rem;
         }
        
    }
    @media screen and (max-width :1024px) {
        .logo .logo1{
            width: 7rem;
            margin-top: -3.5rem;            
         }
         h1{
             margin-top: 13rem;
         }
        
    }
    @media screen and (max-width :780px) {
        .logo .logo1{
            width: 7rem;
            margin-top: 0em;            
         }
         h1{
             margin-top: 7rem;
         }
        
    }
    @media screen and (max-width :768px) {
        .logo .logo1{
            width: 4rem;
            margin-top: -1.5rem;
        }
        h1{
            margin-top: 9.5rem;
        }
        
    }
    @media screen and (max-width :600px) {
        .logo .logo1{
            width: 4rem;
        }
        
    }
    @media screen and (max-width :540px) {
        .logo .logo1{
            width: 5rem;
            margin-top: 0.5em;            
         }
         h1{
             margin-top: 11rem;
         }
        
    }

    
    @media screen and (max-width :500px) {
        .logo .logo1{
            width: 4rem;
            margin-top: 4rem;
        }
        
    }
    @media screen and (max-width :411px) {
        .logo .logo1{
            width: 4rem;
            margin-top: 2.5rem;
        }
        h1{
            margin-top: 12rem;
        }
        
    }
    @media screen and (max-width :414px) {
        .logo .logo1{
            width: 4rem;
            margin-top: 3.5rem;
        }
        h1{
            margin-top: 13rem;
        }
        
    }
    @media screen and (max-width :375px) {
        .logo .logo1{
            width: 4rem;
            margin-top: 2.8rem;
        }
        h1{
            margin-top: 12rem;
        }
        
    }
    @media screen and (max-width :360px) {
        .logo .logo1{
            width: 7rem;
            margin-top: 0rem;
        }
        h1{
            margin-top: 12rem;
        }
       
    }
    @media screen and (max-width :280px) {
        .logo .logo1{
            width: 5rem;
            margin-top: 4rem;            
         }
         h1{
          font-size:20px;
          font-weight: 600;
             margin-top: 14rem;
         }
        
    }



 li { list-style-type: none; } 
 a { text-decoration: none; }
 body { font-family:  sans-serif; }  
 .footer { color: #fff; background: #3B0708; padding: 4em 0; }
.footer { display: grid; grid-template-columns: 7vw 1fr 7vw; grid-template-rows: auto auto; }
.footer-container { grid-column: 2 / 3; }
.footer-container { grid-column: 2 / 3; display: grid;
     /* ACTING AS A GRID CONTAINER */ 
     grid-template-columns: 2fr 2fr 2fr 3fr; grid-template-rows: auto auto;
      grid-template-areas: "logo navigation secondary social" "contact contact . newsletter"; }
.footer-logo { grid-area: logo; } 
.footer-nav { grid-area: navigation; justify-self: center; } 
.footer-secondary-nav { grid-area: secondary; justify-self: center; } 
.social-networks { grid-area: social; } 
.contact-block { grid-area: contact; } 
.newsletter { grid-area: newsletter; }
.social-networks { grid-area: social; display: grid; 
    /* ACTING AS A GRID CONTAINER */ grid-template-columns: repeat(3, 1fr); grid-template-rows: auto auto; 
    justify-items: center; } 
    .social-networks h3 { grid-column: 1 / -1; } 
    .facebook { justify-self: right; } 
    .instagram { justify-self: left; }
.contact-block, .newsletter { align-self: end; }
.bottom-line { display: grid; grid-template-columns: 7vw 8fr 4fr 7vw; }
.bottom-line p { grid-column: 2; }
.legal { display: grid; grid-template-columns: repeat(3, 1fr); justify-items: end; }
.newsletter-text, .text-input { text-align: center; } 
.text-input input { border-radius: 0; } 
.text-input input:first-child { height: 2rem; } 
.text-input input:last-child { height: 2.25rem; color: #fff; border: none; background-color: #f99639; width: 5rem; font-weight: bold; } 
.fas, .fab { font-size: 1.5rem; } 
.newsletter-text icon, .newsletter-text p { margin: 0 0 1.1rem; } .newsletter-text p { line-height: 2rem; }
.footer a { color: #fff; } 
.contact-block a { display: block; border: 2px solid #fff; padding: 0.5rem; margin: 10px 0 0; text-align: center; width: 70%; } 
.contact-block a:hover { border: 2px solid #f99639; color: #f99639; } .social-networks { border-bottom: 2px solid #f99639; }
.bottom-line { background-color: #444554; } .bottom-line, .bottom-line a { color: #fff; }

/* MEDIA QUERIES */ @media screen and (min-width: 960px) { .footer { height: 45vh; } }
@media screen and (max-width: 960px) { 
    .footer-nav, .footer-secondary-nav { display: none; } 
    .footer-container { grid-template-columns: 1fr 1fr; grid-template-rows: 20vh 25vh; grid-template-areas: "logo social" "contact newsletter"; } 
    .bottom-line { display: grid; grid-template-columns: 7vw 1fr 7vw; } .bottom-line p { justify-self: center; } .legal { grid-column: 2 / -2; justify-items: center; } }
@media screen and (max-width: 768px) {
     .footer-container { grid-template-columns: 1fr; grid-template-areas: "logo" "social" "newsletter" "contact"; } 
     .footer-logo, .contact-block { justify-self: center; align-self: center; } 
     .social-networks, .newsletter { padding: 3rem 0; } 
     .contact-block a, .contact-block p { margin: 0 auto; }
     .contact-block h3, .social-networks h3 { line-height: 3rem; } }