:root {
    --global-palette1: #d434d4;
    --global-palette2: #1cf3d6;
    --global-palette3: #fffffe;
    --global-palette4: #444444;
    --global-palette5: #bab6b6;
    --global-palette6: #ffffff;
    --global-palette7: #fff;

}

@import url('https://fonts.googleapis.com/css2? family= Anton & family= Cherry+Bomb+One & family= Dela+Gothic+One & family= Libre+Baskerville:wght@700 & family= Londrina+Solid:wght@100;900 & family= Red+Hat+Mono:wght@400;500 & display=swap');


/* nav */
@media screen and (min-width:481px) and (max-width:1135px) {
    header {
        width: 100%;
        height: 80px;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding: 0px;
        background: #0a192f;


    }

    .redes-sociales {
        display: none;
    }

    .header-logo {
        width: 100%;
        justify-content: left;
        margin-left: 3%;

    }

    .header-logo img {
        width: 180px;

    }

    .logo-maps {
        display: none;
    }

    .toggle {
        display: block;
        width: 100%;
        align-items: center;
        justify-content: right;
        margin-right: 3%;
    }


    .navbar-list {
        position: absolute;
        margin-top: 21px;
        left: 0;
        flex-direction: column;
        width: 100%;
        justify-content: center;
        align-items: center;
        z-index: 2;
        background: var(--global-palette3);
        height: calc(300vh -80px);
        top: 80px;
        left: 0;
        display: none;


    }

    .navbar-list li a {
        text-transform: capitalize;
        font-family: 'cursive';
        color: var(--global-palette7);
        text-decoration: none;
        display: block;
        text-align: center;
        position: relative;
        top: 0px;
        left: 0px;
        font-size: 12px;
        font-weight: 500;
        height: auto;

    }


    .toggle~.navbar-list {
        width: 100%;


    }

    .toggle~.navbar-list li {
        border: 1px solid var(--global-palette1);
        border-top: none;
        padding: 0.5em;
        transition: height 700ms cubic-bezier(0.23, 1, 0.32, 1);
        -webkit-transition: height 700ms cubic-bezier(0.23, 1, 0.32, 1);
        -moz-transition: height 700ms cubic-bezier(0.23, 1, 0.32, 1);
        -ms-transition: height 700ms cubic-bezier(0.23, 1, 0.32, 1);
        -o-transition: height 700ms cubic-bezier(0.23, 1, 0.32, 1);
    }

    .toggle~.navbar-list li ul {
        display: none;
        width: 100%;
        background-color: var(--global-palette1);


    }

    .toggle~.navbar-list li:hover>ul {
        display: block;
        position: relative;
        height: 150px;


    }


    .toggle~.navbar-list li ul li a {
        text-transform: none;
        height: auto;

    }



    .navbar-list>li {
        display: flex;
        flex-direction: column;
        justify-content: center;
        margin: 0;
        padding: 0.5em 0;
        width: 100%;
        color: var(--global-palette3);
        background-color: var(--global-palette1);

    }

    .navbar-list>li:not(:last-child) {
        border-bottom: 1px solid var(--global-palette3);
    }

    .mobile {
        display: block;
    }

    .toggle~.overlay {
        display: block;
    }

    .slider {
        display: none;
    }

    .container__principal {
        width: 100%;
        display: flex;
        justify-content: center;
        flex-direction: column;
        gap: 10px;
        align-items: center;
        text-align: center;
        margin-top: 5%;
    }

    .container__principal .text {
        gap: 20px;
        width: 100%;
        text-align: center;

    }

    .container__principal .imagen {
        display: flex;
        justify-content: center;
        flex-direction: row;
        align-items: center;
        width: 100%;
        gap: 22px;

    }

    .container__principal .imagen img {
        width: 220px;
        height: 350px;

    }


    .footer-contacto .inf {
        display: none;
    }

    .footer-contacto .map {
        display: none;
    }

    .footer-contacto .form {
        width: 80%;
    }

    h4 {
        width: 80%;
    }

    .bloque-refugio {
        width: 100%;
        padding: 7rem 1rem;
    }

    .title h1 {
        font-size: 35px;
        font-weight: 700;
        text-align: center;
    }

    .container-refugio .card {
        width: 100%;
        display: flex;
        flex-direction: column;

    }

    .container-refugio .inf {
        width: 100%;
        padding: 20px;
    }

    .container-refugio .imagen {
        width: 100%;

    }

    .container-refugio img {
        width: 60%;
    }

    .container-refugio .inf h2 {
        font-size: 30px;
        text-align: left;
        font-weight: 700;

    }

    .bloque-ubicacion {
        width: 100%;
        padding: 7rem 1rem;

    }


    .main-ubicacion {
        width: 100%;
        gap: 50px;
    }

    .container-ubicacion {
        width: 100%;
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: 20px;
    }

    .container-ubicacion h2 {

        font-size: 35px;
        font-weight: 700;

    }

    .bloque-rescates {
        width: 100%;
        padding: 7rem 1rem;

    }


    .item-txt p {
        width: 100%;
        font-size: 14px;
        line-height: 35px;

    }

    .bloque-ayuda {
        width: 100%;
        padding: 7rem 1rem;
    }

    .container-ayuda h2 {
        font-size: 35px;
        text-align: center;

    }

    .caja-inf {

        width: 50%;

    }

    .item-ayuda p {
        width: 100%;
    }

    .item-ayuda .inf {
        width: 100%;
    }

    .inf .caja-inf {
        flex-wrap: wrap;

    }

    .item-ayuda h3 {

        font-size: 25px;

    }

    .item-ayuda img {
        width: 10%;

    }

    .item-ayuda .image {
        display: flex;
        flex-direction: column;
    }

    .item-ayuda .image img {
        width: 60%;

    }

    .bloque-requisitos {
        padding: 7rem 1rem;
    }

    .container-requisitos h2 {
        width: 100%;
        font-size: 30px;
        text-align: center;
    }

    .container-requisitos {
        padding: 25px;
    }

    .container-requisitos h3 {
        width: 100%;
        font-size: 20px;
        text-align: left;

    }

    .container-requisitos .inf {
        width: 100%;
        text-align: justify;

    }

    .bloque-contacto {

        padding: 7rem 1rem;

    }

    .contacto-vet {
        display: flex;
        width: 100%;
        flex-direction: column;
        justify-content: center;
        flex-wrap: wrap;
        align-items: center;
        gap: 25px;
    }

    .a-box {
        width: 70%;
        gap: 30px;
    }


    .imagen-container {
        height: 240px;
        width: 40%;
        overflow: none;
        
    }

    .inner-skew {
        overflow: none;
        width: 70%;

    }

 

    .text-container h3 {
        
        font-size: 16px;
    }


    .contacto-vet h2 {
        width: 50%;
        font-size: 30px;
        text-align: center;
    }



    .contacto .txt {
        width: 80%;
    }

    .contacto-icon {
        width: 100%;
    }

    .bloque-contacto-vet {
        width: 100%;
        padding: 7rem 1rem;

    }

   

    .bloque-castraciones {
        width: 100%;
        padding: 7rem 1rem;

    }

    .container-castraciones {
        width: 100%;
        padding: 25px;

    }

    .container-castraciones h2 {

        font-size: 30px;
    }

    .container-castraciones h4 {
        width: 100%;
    }

    .container-castraciones .inf {
        width: 100%;

    }

    .container-castraciones .list {
        display: flex;
        flex-direction: column;
        text-align: left;
        width: 80%;
        height: auto;

    }

    .container-castraciones img {
        width: 70%;
        border-radius: 5px;

    }

    #racetimes {
        display: flex;
        flex-wrap: wrap;
        width: 100%;


    }

    #racetimes th,
    td {
        padding: 1.2rem;
        font-size: 1rem;
        width: 100%;
    }
    .bloque-adopcion {
       
        padding: 7rem 1rem;
      
    }
    
    .bloque-adopcion .title {
        margin-left: 0;
    }
    
    .bloque-adopcion .title h1 {
        font-size: 40px;
        margin-left: 0;
    }
   
    .section-adopcion  {
        width: 100%;
        

    
    }
   
    
    .section-adopcion p {
        width: 70%;
        
    }
    
    .container-adopcion {
    width: 100%;
    }
    
    .container-adopcion .bloque {
        width: 70%;
        display: flex;
        flex-direction: column;
        gap: 50px;
    
    }
    .container-adopcion .texto{
        width: 100%;

    }
    .container-adopcion .bloque h3 {
        width: 100%;
    
    }
    
    .container-adopcion .bloque p {
        width:100%;
        
    
    }
    
    .container-adopcion .bloque .imagen {
        width: 70%;
    
    }
    
    .container-adopcion .bloque img {
        width: 100%;
        
    }
    
    
    
    .card h2 {
        width: 100%; 
        font-size: 40px;
        
    }
    
    .card h4 {
        
        width: 100%;
       
    }
    
    .card-ficha {
        width: 50%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 0px;
      
    
    
    }
    
    .card-ficha img {
        width: 100%;
        border-radius: 20px;
        padding: 10px;
    
    }
    
    .card-txt {
        width: 100%;
        padding: 0px 25px 0px 25px;
    
    }
    
    .card-txt h3 {
        font-size: 18px;
        width: 100%;
        text-align: center;
        
    }
    
    .card-txt p {
        width: 100%;
        font-size: 14px;
        text-align: justify;
    
    }
    .card-inf {
        width: 80%;
    }
    .card-inf ul {
        width: 100%;
        display: flex;
        flex-direction: row;
        align-items: center;
        padding: 2%;
        font-size: 14px;
      
    
    
    }
    .card-inf ul li{
        width: 100%;
        
        
    }
    
    .card-inf img {
        width:50%;
    }
    
    .button-adopta {
        width: 100%;
    }
    
    .button {
        width: 50%;
        padding: 10px;
        margin-bottom: 5%;
    }
    .card-inf {
        display: none;
    }
    .open-sub-menu {
        display: block;
        width: 20%;
        background: var(--global-palette2);
        border-radius: 5px;
        color: var(--global-palette7);
        padding: 5px;
        margin-bottom: 2%;
    }
    
    
    .container-contacto {
        width:100%;
      
    
    
    }
    
    .container-contacto .contacto {
        width: 100%;
        
    
    }
    
    .container-contacto h2 {
        width: 100%;
        text-align: center;
    }
    
   
    .contacto .txt {
        width: 80%;
       
    }
    
    
    
    .contacto-icon {
        width: 100%;
        
    }
    
    .contacto-icon img {
        width: 7%;
    
    }
    
    
}

@media screen and (min-width:100px) and (max-width:480px) {
    header {
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: space-evenly;
        gap: 20px;
        padding: 0px;
        background: #0a192f;
        height: 15vh;
    }

    .redes-sociales {
        display: none;
    }

    .header-logo {
        width: 100%;

    }

    .header-logo img {
        width: 155px;
    }

    .logo-maps {
        display: none;
    }



    .toggle {
        display: block;
        width: 100%;
        align-items: center;
        justify-content: right;
        margin-right: 3%;
    }


    .navbar-list {
        position: absolute;
        margin-top: 20px;
        left: 0;
        flex-direction: column;
        width: 100%;
        justify-content: center;
        align-items: center;
        z-index: 2;
        background: var(--global-palette3);
        height: calc(300vh -80px);
        top: 100px;
        left: 0;
        display: none;




    }

    .navbar-list li a {
        text-transform: capitalize;
        font-family: 'cursive';
        color: var(--global-palette7);
        text-decoration: none;
        display: block;
        text-align: center;
        position: relative;
        top: 0px;
        left: 0px;
        font-size: 12px;
        font-weight: 500;
        height: 50px;

    }


    .toggle~.navbar-list {
        width: 100%;

    }

    .toggle~.navbar-list li {
        border: 1px solid var(--global-palette1);
        border-top: none;
        padding: 0.5em;
        transition: height 700ms cubic-bezier(0.23, 1, 0.32, 1);
        -webkit-transition: height 700ms cubic-bezier(0.23, 1, 0.32, 1);
        -moz-transition: height 700ms cubic-bezier(0.23, 1, 0.32, 1);
        -ms-transition: height 700ms cubic-bezier(0.23, 1, 0.32, 1);
        -o-transition: height 700ms cubic-bezier(0.23, 1, 0.32, 1);
    }

    .toggle~.navbar-list li ul {
        display: none;
        width: 100%;
        background-color: var(--global-palette1);


    }

    .toggle~.navbar-list li:hover>ul {
        display: block;
        position: relative;
        height: 150px;


    }


    .toggle~.navbar-list li ul li a {
        text-transform: none;
        height: auto;

    }

    .navbar-list>li {
        display: flex;
        flex-direction: column;
        justify-content: center;
        margin: 0;
        padding: 0.5em 0;
        width: 100%;
        color: var(--global-palette3);
        background-color: var(--global-palette1);

    }

    .navbar-list>li:not(:last-child) {
        border-bottom: 1px solid var(--global-palette3);
    }

    .toggle~.overlay {
        display: block;
        top: 140px;

    }

    .mobile {
        display: block;
    }

    .slider {
        display: none;
    }



    .container__principal .text {
        gap: 20px;
        width: 100%;
        text-align: center;

    }

    .container__principal .text p {
        width: 90%;
        line-height: 30px;

    }

    .container__principal .text h2 {
        width: 90%;
        font-size: 12px;


    }

    .container__principal .text h1 {
        width: 90%;
        font-size: 35x;
        font-weight: 700;


    }

    .container__principal .imagen {
        display: flex;
        justify-content: center;
        flex-direction: row;
        align-items: center;
        width: 100%;
        flex-wrap: wrap;
        gap: 22px;

    }

    .container__principal .imagen img {
        width: 220px;
        height: 350px;

    }


    .footer-contacto {
        width: 100%;
    }

    .footer-contacto .inf {
        display: none;
    }

    .footer-contacto .map {
        display: none;
    }

    .footer-contacto .form {
        width: 100%;
        gap: 30px;
        margin: 0px;
        padding: 20px;


    }

    .contacto-input {
        height: auto;
        width: 70%;
    }

    .contacto-mensaje {
        width: 70%;
        height: auto;
    }

    .footer-contacto h4 {
        width: 80%;
    }

    .footer-final p {
        font-size: 10px;
    }

    .bloque-refugio {
        width: 100%;
        padding: 5rem 1rem;

    }



    .title h1 {
        font-size: 20px;
        font-weight: 700;
        text-align: center;


    }

    .container-refugio .card {
        width: 100%;
        display: flex;
        flex-direction: column;

    }

    .container-refugio .inf {
        width: 100%;
        padding: 20px;
    }

    .container-refugio .imagen {
        width: 100%;

    }

    .container-refugio img {
        width: 60%;
    }

    .container-refugio .inf h2 {
        font-size: 30px;
        text-align: left;
        font-weight: 700;

    }

    .bloque-ubicacion {
        width: 100%;
        padding: 5rem 1rem;

    }


    .main-ubicacion {
        width: 100%;
        gap: 50px;
    }

    .container-ubicacion {
        width: 100%;
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: 20px;
    }

    .container-ubicacion h2 {

        font-size: 25px;
        font-weight: 700;

    }

    .bloque-rescates {
        width: 100%;
        padding: 5rem 1rem;

    }

    .item-txt p {
        width: 100%;
        font-size: 14px;
        line-height: 35px;

    }

    .card-article h1 {
        font-size: 20px;
        font-weight: 700;

    }

    .bloque-ayuda {
        width: 100%;
        padding: 7rem 1rem;
    }

    .container-ayuda h2 {
        font-size: 35px;
        text-align: center;

    }

    .caja-inf {

        width: 100%;

    }

    .caja-inf h4 {

        font-size: 25px;


    }

    .item-ayuda p {
        width: 100%;
    }

    .item-ayuda .inf {
        width: 100%;
    }

    .inf .caja-inf {
        flex-wrap: wrap;

    }

    .item-ayuda h3 {

        font-size: 20px;

    }

    .item-ayuda img {
        width: 20%;

    }

    .item-ayuda .image {
        display: flex;
        flex-direction: column;
    }

    .item-ayuda .image img {
        width: 100%;

    }

    .bloque-requisitos {
        padding: 5rem 1rem;
    }

    .container-requisitos h2 {
        width: 100%;
        font-size: 30px;
        text-align: center;
    }

    .container-requisitos {
        padding: 25px;
    }

    .container-requisitos h3 {
        width: 100%;
        font-size: 20px;
        text-align: left;

    }

    .container-requisitos .inf {
        width: 100%;
        text-align: justify;

    }

    .container-requisitos .list {
        background: none;
        width: 100%;


    }
    .bloque-contacto-vet {
        width: 100%;
        padding: 5rem 1rem;

    }

    .contacto-vet{
        width: 100%;
       display: flex;
       gap: 50px;
       
    }
    .a-box {
        width: 80%;
        
    }


    .imagen-container {
       display: none;
        
    }
    .text-container{
        margin: 0;
        padding: 15px;
    }

    .text-container h3 {
        
        font-size: 16px;
    }


    .contacto-vet h2 {
        width: 100%;
        font-size: 30px;
        text-align: center;
        padding: 25px;
    }



    .contacto .txt {
        width: 80%;
    }

    .contacto-icon {
        width: 100%;
    }

   
  

    .bloque-castraciones {
        width: 100%;
        padding: 7rem 1rem;

    }

    .container-castraciones {
        width: 100%;
        padding: 25px;

    }

    .container-castraciones h2 {

        font-size: 30px;
    }

    .container-castraciones h4 {
        width: 100%;
    }

    .container-castraciones .inf {
        width: 100%;

    }

    #lista {

        width: 80%;
    }

    .container-castraciones img {
        width: 70%;
        border-radius: 5px;

    }

    #racetimes {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        width: 100%;
        overflow: scroll;

    }

    #racetimes th,
    td {
        padding: 1rem;
        font-size: 0.8rem;
        width: 60%;
    }
    .bloque-adopcion {
       
        padding: 5rem 1rem;
      
    }
    
    .bloque-adopcion .title {
        margin-left: 0;
    }
    
    .bloque-adopcion .title h1 {
        font-size: 40px;
        margin-left: 0;
    }
   
   
    .section-adopcion  {
        width: 100%;

    }
    
    .section-adopcion 
     p {
        width:70%;
        
    }
    
    .container-adopcion {
    width: 100%;
    }
    
    .container-adopcion .bloque {
        width: 90%;
        display: flex;
        flex-direction: column;
        gap: 50px;
    
    }
    .container-adopcion .texto{
        width: 100%;

    }
    .container-adopcion .bloque h3 {
        width: 100%;
        font-size: 30px;
    
    }
    
    .container-adopcion .bloque p {
        width:100%;
        
    
    }
    
    .container-adopcion .bloque .imagen {
        width: 100%;
    
    }
    
    .container-adopcion .bloque img {
        width: 100%;
        
    }
    .card h2{
        font-size: 30px;
    }
    .card h4{
        font-size: 14px;
    }
    .card-ficha {
        width: 80%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 0px;
      
    
    
    }
    
    .card-ficha img {
        width: 100%;
        border-radius: 20px;
        padding: 10px;
    
    }
    
    .card-txt {
        width: 100%;
        padding: 0px 25px 0px 25px;
    
    }
    
    .card-txt h3 {
        font-size: 14px;
        width: 100%;
        text-align: center;
        
    }
    
    .card-txt p {
        width: 100%;
        font-size: 12px;
        text-align: justify;
        
    
    }
    .card-inf {
        width: 80%;
    }
    .card-inf ul {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 2%;
        color: var(--global-palette4);
        font-size: 12px;
        line-height: 30px;
        font-family: 'cursive';
    
    
    }
    .card-inf ul li{
        width:100%;
           
    }
    
    .card-inf ul li img {
        width:30%;
    }
    
    .button-adopta {
        width: 100%;
        font-size: 12px;
    }
    
    .button {
        width: 100%;
        padding: 10px;
        margin-bottom: 5%;
    }
    .card-inf {
        display: none;
    }
    .open-sub-menu {
        display: block;
        width: 50%;
        background: var(--global-palette2);
        border-radius: 5px;
        color: var(--global-palette7);
        padding: 5px;
        margin-bottom: 2%;
        font-size: 12px;
    }
    .main-contacto{
        width: 100%;

    }
    .container-contacto {
        width:100%;
      
    
    
    }
    
    .container-contacto .contacto {
        width: 100%;
        
    
    }
    
    .container-contacto h2 {
        width: 100%;
        text-align: center;
    }
    
   
    .contacto .txt {
        width: 80%;
       
    }
    
    
    
    .contacto-icon {
        width: 100%;
        
    }
    
    .contacto-icon img {
        width: 7%;
    
    }
}


@media screen and (min-width:700px) and (max-width:871px){
    .card-ficha {
        width: 60%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 0px;
      
    
    
    }
    
    .card-ficha img {
        width: 100%;
        border-radius: 20px;
        padding: 10px;
    
    }
    
    .card-txt {
        width: 100%;
        padding: 0px 25px 0px 25px;
    
    }
    
    .card-txt h3 {
        font-size: 18px;
        width: 100%;
        text-align: center;
        
    }
    
    .card-txt p {
        width: 100%;
        font-size: 14px;
        text-align: justify;
    
    }
    .card-inf {
        width: 80%;
    }
    .card-inf ul {
        width: 100%;
        display: flex;
        flex-direction: row;
        align-items: center;
        padding: 2%;
        color: var(--global-palette4);
        font-size: 14px;
        line-height: 30px;
        font-family: 'cursive';
    
    
    }
    .card-inf ul li{
        width:100%;
           
    }
    
    .card-inf ul li img {
        width:70%;
    }
    
    .button {
        width: 60%;
        padding: 10px;
        margin-bottom: 5%;
    }
    .button-adopta {
        width: 100%;
    }
    
    .card-inf {
        display: none;
    }
    .open-sub-menu {
        display: block;
        width: 20%;
        background: var(--global-palette2);
        border-radius: 5px;
        color: var(--global-palette7);
        padding: 5px;
        margin-bottom: 2%;
    }
    .main-contacto{
        width: 100%;

    }
    .container-contacto {
        width:100%;
      
    
    
    }
    
    .container-contacto .contacto {
        width: 100%;
        
    
    }
    
    .container-contacto h2 {
        width: 100%;
        text-align: center;
    }
    
   
    .contacto .txt {
        width: 80%;
       
    }
    
    
    
    .contacto-icon {
        width: 100%;
        
    }
    
    .contacto-icon img {
        width: 7%;
    
    }
}
@media screen and (min-width:480px) and (max-width:700px){
    .card-ficha {
        width: 80%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 0px;
      
    
    
    }
    
    .card-ficha img {
        width: 100%;
        border-radius: 20px;
        padding: 10px;
    
    }
    
    .card-txt {
        width: 100%;
        padding: 0px 25px 0px 25px;
    
    }
    
    .card-txt h3 {
        font-size: 18px;
        width: 100%;
        text-align: center;
        
    }
    
    .card-txt p {
        width: 100%;
        font-size: 14px;
        text-align: justify;
    
    }
    .card-inf {
        width: 80%;
    }
    .card-inf ul {
        width: 100%;
        display: flex;
        flex-direction: row;
        align-items: center;
        padding: 2%;
        color: var(--global-palette4);
        font-size: 14px;
        line-height: 30px;
        font-family: 'cursive';
    
    
    }
    .card-inf ul li{
        width:100%;
           
    }
    
    .card-inf ul li img {
        width:70%;
    }
    
   
   
    .button {
        width: 100%;
        padding: 10px;
        margin-bottom: 5%;
    }
    .button-adopta {
        width: 100%;
    }
    
    .button {
        width: 50%;
        padding: 10px;
        margin-bottom: 5%;
    }
    .card-inf {
        display: none;
    }
    .open-sub-menu {
        display: block;
        width: 20%;
        background: var(--global-palette2);
        border-radius: 5px;
        color: var(--global-palette7);
        padding: 5px;
        margin-bottom: 2%;
    }
    .main-contacto{
        width: 100%;

    }
    .container-contacto {
        width:100%;
      
    
    
    }
    
    .container-contacto .contacto {
        width: 100%;
        
    
    }
    
    .container-contacto h2 {
        width: 100%;
        text-align: center;
    }
    
   
    .contacto .txt {
        width: 80%;
       
    }
    
    
    
    .contacto-icon {
        width: 100%;
        
    }
    
    .contacto-icon img {
        width: 7%;
    
    }
}




@media screen and (min-width:250px) and (max-width:480px) {
    .band {
        grid-template-columns: repeat(1, 1fr);
    }

    .item:nth-child(even),
    .item:nth-child(odd) {
        grid-column: auto;
        grid-row: auto;
    }
}

@media screen and (min-width:481px) and (max-width:1024px) {

    .band {
        grid-template-columns: repeat(2, 1fr);
    }

    .item:nth-child(even),
    .item:nth-child(odd) {
        grid-column: auto;
        grid-row: auto;
    }


}