body {
    background-color: rgb(255, 143, 94); 
}

.textos { 
    font-size: 19px;
}

.titulol { 
    font-size: 35px;
}
#cabecera {
    width: 100%;
    height: 250px;
    background-color: rgb(231, 73, 107);
}

#cuerpo {
    width: 850px;
    height: 870px;
    background-color: rgb(255, 143, 94);
    margin-left: auto;
    margin-right: auto;
}

#pies {
    width: 100%;
    height: 200px;
    background-color: rgb(255, 239, 147);
}

#cabcaja {
    width: 850px;
    height: 210px;
    background-color: rgb(231, 73, 107);
    margin: auto;
}

#cajpie {
    width: 850px;
    height: 200px;
    background-color: rgb(255, 239, 147);
    margin-left: auto;
    margin-right: auto;
}

#logo {
    float: left;
    border-radius: 100px;
    height: 120px;
    width: 120px;
    background-color: rgb(245, 133, 157);
    margin: 15px; 
    background-image: url("logoo.jpg");
    background-size: cover;
 
}

#titulo {
    float: right;
    border-radius: 15px;
    width: 670px ;
    height: 80px;
    margin-top: 15px;
    margin-right: 15px;
    background-color: rgb(245, 133, 157);

}

#subtitulo {
    float: left;
    border-radius: 15px;
    width: 670px ;
    height: 60px;
    margin-top: 15px;
    margin-left: 15px;
    background-color: rgb(245, 133, 157);
}

#bloque1 { 
    margin:  10px;
    border-radius: 15px;
    float: left;
    width: 390px;
    height: 200px;
    background-color: rgb(243, 183, 158);

}

#bloque2 {
    margin-top: 10px;
    margin-right: 10px ;
    border-radius: 15px;
    float: right;
    width: 390px;
    height: 200px;
    background-color: rgb(243, 183, 158);
    background-image: url("gatoegipcio.jpg");
    background-size: cover;
}

#bloque3 {
    float:left;
    border-radius: 15px;
    margin: 10px;
    height: 180px;
    width: 830px;
    background-color: rgb(243, 183, 158);
}

#bloque4 { 
    margin:  10px;
    border-radius: 15px;
    float: left;
    width: 249px;
    height: 200px;
    background-color: rgb(243, 183, 158);
    background-image: url("aguila.jpg");
    background-size: cover;
}

#bloque5 { 
    margin:  10px;
    border-radius: 15px;
    float: left;
    width: 262px;
    height: 200px;
    background-color: rgb(243, 183, 158);
    background-image: url("hipopotamo.jpg");
    background-size: cover;
}
    
#bloque6 { 
    margin:  10px;
    border-radius: 15px;
    float: right;
    width: 249px;
    height: 200px;
    background-color: rgb(243, 183, 158);
    background-image: url("leon.jpg");
    background-size: cover;
}

#bloque7 {
    float:left;
    border-radius: 15px;
    margin: 10px;
    height: 180px;
    width: 830px;
    background-color: rgb(243, 183, 158);
}

#bloqueboton {
    float: right;
    border-radius: 15px;
    margin-right: 15px;
    margin-top: 10px;
    height: 60px;
    width: 160px;
    background-color: rgb(243, 183, 158);
}


#primerpie{ 
    margin: 20px;
    border-radius: 15px;
    float: left;
    width: 320px;
    height: 100px;
    background-color: rgb(255, 239, 147);
}

#instagram { 
    text-align: center;
    font-family: "Candara";
    font-size: 20px;
    margin-top: 5px;
    margin-left: 10px;
}

#segundopie  {
    margin: 20px;
    border-radius: 15px;
    float: right;
    width: 320px;
    height: 100px;
    background-color: rgb(255, 239, 147);
}

#bloque8 {
    float: left; 
    margin-left:  15px;
    margin-right: 15px;
    margin-top: 15px;
    border-radius: 15px;
    height: 70px;
    width: 815px;
    background-color: rgb(243, 183, 158);
}
h1 {
    text-align: center;
    font-family: "Candara";
    font-size: 30px;
    margin-top: 10px;
}

h2 {
    margin-top: 5px;
    font-size: 20px ;
    text-align: center;
    font-family: "Candara";
}

#a {
    display: block;
    float:left;
    border-radius: 15px;
    height: 50px;
    width: 160px;
    background-color: rgb(243, 183, 158); 
    text-decoration: none;
}

#a:hover {
    background-color:rgb(231, 114, 64) ;
    border: 1px solid rgb(19, 14, 14) ;
}
p {
    margin: 13px;
    font-size: 19px;
    font-family: "Candara";
}

#bloque9 {
    float: left ;
    margin: 15px;
    border-radius: 15px;
    height: 200px;
    width: 245px;
    background-color: rgb(243, 183, 158);
    background-image: url("goats-milk.jpg");
    background-size: cover;
}

#bloque10 {
    float: right;       
    margin: 15px;
    border-radius: 15px;
    height: 730px;
    width: 300px;
    background-color: rgb(243, 183, 158);
}

#bloque11 {
    float: right;
    margin-top: 15px;
    border-radius: 15px;
    height: 200px;
    width: 245px;
    background-color: rgb(243, 183, 158);
    background-image: url("sapo.jpg");
    background-size: cover;
}

#bloque12 {
    float: left; 
    margin-left: 15px;
    border-radius: 15px;
    height: 150px;
    width: 505px;
    background-color: rgb(243, 183, 158);
}

#bloque13 { 
    float: left; 
    margin-top: 15px;
    margin-left: 15px;
    border-radius: 15px;
    height: 115px;
    width: 350px;
    background-color: rgb(243, 183, 158);
}

#bloque14 {
    float: left; 
    margin-top: 15px;
    margin-left: 15px;
    border-radius: 15px;
    height: 220px;
    width: 505px;
    background-color: rgb(243, 183, 158);
}

#bloque15 {
    float: left;
    margin-top: 15px;
    margin-left: 15px;
    border-radius: 15px;
    height: 60px;
    width: 60px;
    background-color: rgb(243, 183, 158);
    background-size: cover;
} 

#primerpag {
    display: block;
    float: left;
    border-radius: 15px;
    height: 60px;
    width: 160px;
    background-color: rgb(243, 183, 158);
    background-size: cover;
    text-decoration: none;
}

#primerpag:hover {
    background-color:rgb(231, 114, 64) ;
    border: 1px solid rgb(19, 14, 14) ;

}

label {
    font-size: 20px;
    margin:  20px;
}
 
input {
    margin-top: 5px;
}

#bloqueperrito {
    float: right ;
    margin-top: 15px;
    border-radius: 15px;
    height: 115px;
    width: 130px;
    background-color: rgb(243, 183, 158);
    background-image: url("perritotiernio.jpg");
    background-size: cover;
}

@media screen and (min-width: 768px) and (max-width: 1023px)  {
#cabecera {
    height: calc(0.75*250px);
}
.textos { 
    font-size: calc(0.75*19px);
}

.titulol { 
    font-size: calc(0.75*35px);
}
#cuerpo {
    width: calc(0.75*850px);
    height: calc(0.75*870px);
}

#pies {
    height: calc(0.75*200px);
}

#cabcaja {
    width: calc(0.75*850px);
    height: calc(0.75*210px);
}

#cajpie {
    width: calc(0.75*850px);
    height: calc(0.75*200px);
}

#logo {
    border-radius: calc(0.75*100px);
    height: calc(0.75*120px);
    width: calc(0.75*120px);
    margin: calc(0.75*15px); 
 
}

#titulo {
    border-radius: calc(0.75*15px);
    width: calc(0.75*670px) ;
    height: calc(0.75*80px);
    margin-top: calc(0.75*15px);
    margin-right: calc(0.75*15px);

}

#subtitulo {
    border-radius: calc(0.75*15px);
    width: calc(0.75*670px) ;
    height: calc(0.75*60px);
    margin-top: calc(0.75*15px);
    margin-left: calc(0.75*15px);
}

#bloque1 { 
    margin:  calc(0.75*10px);
    border-radius: calc(0.75*15px);
    width: calc(0.75*390px);
    height: calc(0.75*200px);
}

#bloque2 {
    width: calc(0.75*390px);
    height: calc(0.75*200px);
    margin-top: 10pcalc(0.75*10px)x;
    margin-right: calc(0.75*10px) ;
    border-radius: calc(0.75*15px);
}

#bloque3 {
    height: calc(0.75*180px);
    width: calc(0.75*830px);
    border-radius: calc(0.75*15px);
    margin: calc(0.75*10px);
}

#bloque4 { 
    width: calc(0.75*249px);
    height: calc(0.75*200px);
    margin:  calc(0.75*10px);
}

#bloque5 { 
    width: calc(0.75*262px);
    height: calc(0.75*200px);
    margin:  calc(0.75*10px);
    border-radius: calc(0.75*15px);
}
    
#bloque6 { 
    width: calc(0.75*249px);
    height: calc(0.75*200px);
    margin:  calc(0.75*10px);
    border-radius: calc(0.75*15px);
}

#bloque7 {
    height: calc(0.75*180px);
    width: calc(0.75*820px);
    border-radius: calc(0.75*15px);
    margin: calc(0.75*10px);
}

#bloqueboton {
    height: calc(0.75*50px);
    width: calc(0.75*160px);
    border-radius: calc(0.75*15px);
    margin: 5px;
}


#primerpie{ 
    width: calc(0.75*320px);
    height: calc(0.75*100px);
    margin: calc(0.75*20px);
    border-radius: calc(0.75*15px);
}

#instagram {
    font-size: calc(0.75*20px);
    margin-top: calc(0.75*5px);
    margin-left: calc(0.75*10px);
}

#segundopie  {
    width: 320px;
    margin: calc(0.75*20px);
    border-radius:calc(0.75*15px);
}

#bloque8 {
    height: calc(0.75*70px);
    width: calc(0.75*815px);
    margin-left: calc(0.75*15px);
    margin-right: calc(0.75*15px);
    margin-top: calc(0.75*15px);
    border-radius: calc(0.75*15px);
}

#a {
    width: calc(0.75*160px);
    border-radius: calc(0.75*15px);
}

#bloque9 {
    height: calc(0.75*200px);
    width: calc(0.75*245px);
    margin: calc(0.75*15px);
    border-radius: calc(0.75*15px);
}

#bloque10 {       
    height: calc(0.75*730px);
    width: calc(0.75*300px);
    margin: calc(0.75*15px);
    border-radius: calc(0.75*15px);
}

#bloque11 {
    height: calc(0.75*200px);
    width: calc(0.75*245px);
    margin-top: calc(0.75*15px);
    border-radius: calc(0.75*15px);
}

#bloque12 {
    height: calc(0.75*150px);
    width:calc(0.75*505px);
    margin-left: calc(0.75*15px);
    border-radius: calc(0.75*15px);
}

#bloque13 { 
    height:calc(0.75*115px);
    width: calc(0.75*350px);
    margin-top: calc(0.75*15px);
    margin-left: calc(0.75*15px);
    border-radius: calc(0.75*15px);
}

#bloque14 {
    height: calc(0.75*220px);
    width: calc(0.75*505px);
    margin-top: calc(0.75*15px);
    margin-left: calc(0.75*15px);
    border-radius: calc(0.75*15px);
}

#bloque15 {
    height: calc(0.75*65px);
    width: calc(0.75*160px);
    border-radius: calc(0.75*15px);
    margin: 5px;    
} 

#primerpag {
    height: calc(0.75*50px);
    width: calc(0.75*160px);
    border-radius: calc(0.75*15px);
}

label {
    font-size: calc(0.75*20px);
    margin:  calc(0.75*20px);
}


#bloqueperrito {
    height: calc(0.75*115px);
    width: calc(0.75*130px);
    margin-top: calc(0.75*15px);
    border-radius: calc(0.75*15px);
}
}

@media screen and (min-width: 320px) and (max-width:767px) {

    .textos { 
        font-size: 90%;
    }
    
    .titulol { 
        font-size: 90%;
    }
    #cabecera {
        height: 310px  
     }
    
    #cuerpo {
        width: 90%;
        height: auto;

    }
    
    #pies {
        width: 90%;
        height: auto;
    }
    
    #cabcaja {
        width: 90%;
        height: auto;
    }
    
    #cajpie {
        width: 90%;
        height: auto;

    }
    
    #logo {
        border-radius: 100px;
        height: 100px;
        width: 100px;
        margin: calc(15px*0.33); 
     
    }
    
    #titulo {
        border-radius: calc(15px*0.33);
        width: 100%;
        height: auto;
        margin-left: auto;
        margin-right: auto; 
        margin-top: 5px;
    }
    
    #subtitulo {
        border-radius:  calc(15px*0.33);
        width: 100%;
        height: auto;
        margin-top: 10px;
        margin-left: auto; 
        margin-right: auto;
    }
    
    #bloque1 { 
        border-radius:  calc(15px*0.33);
        width: 100%;
        margin-left: auto;
        margin-right: auto;
        height: auto;
    
    }
    
    #bloque2 {
        margin-top: calc(10px*0.33);
        margin-right: auto;
        margin-left: auto;
        border-radius:  calc(15px*0.33);
        width: 150px;
        height: 150px;
    
    }
    
    #bloque3 {
        border-radius:  calc(15px*0.33);
        margin-top: 10px;
        height: auto;
        margin-left: auto;
        margin-right: auto;
        width: 100%;
    }
    
    #bloque4 { 
        margin-top:  calc(10px*0.33);
        margin-left: auto;
        margin-right: auto;
        border-radius:  calc(15px*0.33);
        width: 177px;
        height: 150px;
    }
    
    #bloque5 { 
        margin-top: calc(10px*0.33);
        margin-left: auto;
        margin-right: auto;
        border-radius:  calc(15px*0.33);
        width: 177px;
        height: 150px;
    }
        
    #bloque6 { 
        margin-top: 10px;
        margin-left: auto;
        margin-right: auto;
        border-radius:  calc(15px*0.33);
        width: 177px;
        height: 150px;
    }
    
    #bloque7 {
        border-radius:  calc(15px*0.33);
        margin-right: auto;
        margin-left: auto;
        height: auto;
        width: 100%;
    }
    
    #bloqueboton {
        margin-right: auto;
        margin-left: auto;
        margin-top: 5px;
        border-radius:  calc(15px*0.33);
        height: auto;
        width: 100%;
    }
    
    
    #primerpie{ 
        width: 100%;
        margin-left: auto;
        margin-right: auto;
        border-radius: calc(15px*0.33);
        height: auto;

    }
    
    #instagram { 
        font-size: 15px;
        margin-top: calc(5px*0.33);
        margin-left: calc(10px*0.33);
    }
    
    #segundopie  {
        margin-left: auto;
        margin-right: auto;
        border-radius: calc(15px*0.33);
        width: 100%;
        height: auto;
    }
    
    #bloque8 {
        margin-left: auto;
        margin-right:  auto;
        margin-top: 5px;
        border-radius:  calc(15px*0.33);
        height: auto;
        width: 100%;
    }
    h1 {
        font-size:  calc(30px*0.33);
        margin-top:  calc(10px*0.33);
    }
    
    h2 {
        margin-top:  calc(px*0.33);
        font-size:  calc(20px*0.33) ;
    }
    
    #a {
        border-radius:  calc(15px*0.33);
       /* margin-left: auto;*/
        /*margin-right: auto;*/
        height: auto;
        width: 100%;
    }
    
    p {
        margin:  calc(13px*0.33);
        font-size:  90%;
    }
    
    #bloque9 {
        margin-top: 5px;
        margin-left: auto;
        margin-right: auto;
        border-radius: calc(15px*0.33);
        height: 150px;
        width: 70%;
    }
    
    #bloque10 {      
        margin-left: auto;
        margin-right: auto;
        margin-top: 5px;
        border-radius:  calc(15px*0.33);
        height: auto;
        width: 100%;
    }
    
    #bloque11 {
        margin-top: 5px;
        margin-left: auto;
        margin-right: auto;
        border-radius:  calc(15px*0.33);
        height: 150px;
        width: 150px;
    }
    
    #bloque12 {
        margin-left: auto;
        margin-right: auto;
        margin-top: 5px;
        border-radius:  calc(15px*0.33);
        height: auto;
        width: 100%;
    }
    
    #bloque13 { 
        margin-top:  10px;
        margin-left:  auto;
        margin-right: auto;
        border-radius:  calc(15px*0.33);
        height: auto;
        width: 100%;
    }
    
    #bloque14 {
        margin-top:  calc(15px*0.33);
        margin-left:  auto;
        margin-right: auto;
        border-radius:  calc(15px*0.33);
        height: auto;
        width: 100%;
    }
    
    #bloque15 {
        margin-top:  calc(15px*0.33);
        margin-left: auto;
        margin-right: auto;
        border-radius:  calc(15px*0.33);
        height: auto;
        width: 100%;
    } 
    
    #primerpag {
        border-radius:  calc(15px*0.33);
        height: auto;
        width: 100%;
    }
    
    
    label {
        font-size: 15px;
        margin:   calc(20px*0.33);
    }
     
    input {
        margin-top: calc(5px*0.33);
    }
    
    #bloqueperrito {
        margin-top:  calc(15px*0.33);
        border-radius:  calc(15px*0.33);
        height: 150px;
        width: 150px;
        float: left;
        margin-left:auto;
        margin-right: auto;
    }
}