/*@import url(https://fonts.googleapis.com/css?family=Open+Sans);
@import url(http://weloveiconfonts.com/api/?family=fontawesome|typicons);
*/
[class*="fontawesome-"]:before {
    font-family: 'FontAwesome', sans-serif;
  }
  
  * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
  }
  
  body {
      font-family: 'Open Sans', sans-serif;
      background: url("data:image/svg+xml;iso-8859-1,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300' x='0' y='0'><text x='150' y='150' style='font: bold 36px arial; dominant-baseline: middle; fill: red; text-anchor: middle; ' transform='rotate(-10,150,150)'></text></svg>");

  }
  
  header {
      width: 100%;
      height: 60px;
      background: #8A0829;
      color: #fff;
      
      position: fixed;
      top: 0;
      left: 0;
      z-index: 100;
  }
  
  .contenedor {
      width: 98%;
      margin: auto;
  }
  
  h1 {
      float: left;
  }
  
  header .contenedor {
      display: table;
  }
  
  section {
      width: 100%;
      margin-bottom: 25px;
  }
  
  #bienvenidos {
      text-align: center;
  }
  
  footer .contenedor {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      padding-bottom: 25px;
      
  }
  
  .copy {
      font-size: 20px;
  }
  
  .sociales {
      width: 100%;
      text-align: center;
      font-size: 28px;
  }
  
  .sociales a {
      color: #333;
      text-decoration: none;
  }
  
  @media (min-width:768px) { 
      .sociales {
          width: auto;
      }
      
      footer .contenedor {
          justify-content: space-between;
      }
  }
  
  
  @media (min-width:1024px) {
      .contenedor {
          width: 1000px;
      }
  }
  
  
  #blog h3, h4 {
      text-align: center;
     
      
  }
  
  #blog .contenedor{
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
  }
  
  #blog article {
      margin: 15px;
      
      width: 180px;
      height: 180px;
      border-radius: 3%;
      /*border: 5px solid rgb(75, 73, 73);*/
      font-size: 115px;
      padding-top: 25px;
      color: #585054;
      text-align: center;

      border: 5px solid #8A0829;

      border-bottom: .3em solid #8A0829;
 }

 #blog article h4 {
     color: #d4c1c6;

 }

  #blog a:hover{    
    text-decoration: none;
    background-color:#CCC;
	text-transform:lowercase;
    border-radius: 5%;
    transform: scale(1.05);
	/*border: 2px solid rgb(165, 4, 31);*/
 }

 

  
  #blog img {
      width: 100%;
      max-width: 280px;

  }





  #banner {
      margin-top: 50px;
      position: relative;
     
     
  }
  
  #banner img {
  /* width: 100%;
   height: 100%;*/
  /* padding-top: 45px;*/
        
  /*padding-top: 7%;;
        width: 50px;
        height: 50px;*/

        display: none;
 }
  
  
  #banner .contenedor {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translateX(-50%) translateY(-50%);
      color: rgb(114, 89, 89);
     
     
  }
  
  #banner h3 {
      /*font-size: 28px;
      color: #eee5e7;
      font-weight: bold;*/
      font-weight: bold; 
      font-size: 15px; 
      color:#B40431
  }
  
  #banner p {
    font-size: 12px;color:#6E6E6E
  }


  /*
  #banner a {
      display: block;
      width: 100px;
      color: #fff;
      text-decoration: none;
      padding: 7px;
      margin-top: 10px;
      border: 3px solid #fff;
      
  }
  
  #banner a:hover {
      background: rgba(51,51,51,0.5);
  }*/
  

/***********diseño de los checks**************** */
.etiqueta {
    height: 100%;
    display: block;
    background: rgb(233, 162, 162);
    border: 2px solid rgb(139, 4, 45);
    border-radius: 10px;
    padding: 1rem;
    margin-bottom: 1rem;

    text-align: center;
    box-shadow: 0px 3px 10px -2px hsla(150, 5%, 65%, 0.5);
    position: relative;
}	/*//margin: 1rem;*/

input[type="radio"] {
    display: none;
}

input[type="radio"]:checked+label {
    background: maroon;
    color: hsla(215, 0%, 100%, 1);
    box-shadow: 0px 0px 20px hsla(241, 22%, 38%, 0.75);
}

input[type="checkbox"]#hombre:checked+label {
    background: #610B21;
    border-color: #0B4C5F;
}

input[type="checkbox"]#mujer:checked+label {
    background: #610B21;
    border-color: #DF0174;
}

p {
    font-weight: 900;
}




.list-group-item label:hover {
    background-color: #F5BCA9;
    border-color: #DF0174;
    color: #8A0829;
    text-align: center;
    /* padding: 20px;*/
    /* border-radius: 5%;*/
    transform: scale(1.05);
}



@media only screen and (max-width: 700px) {
    section {
        flex-direction: column;
    }
}
/******fin checs************/
  
  
  

  
  @media (min-width:480px) {
      #banner h3 {
          /*font-size: 40px;*/
          font-size: 10px;
          color:#B40431;
          font-weight: bold;
      }
      
     /* #banner a {*/
         /* margin-top: 25px;*/
        
      /*}*/

      #banner img {
        padding-top: 1%;
        /*width: 120px;
        height: 100px;*/
       /* display: none;*/
     }

     #banner p {
        font-size: 5px;color:#6E6E6E
      }
  }

  
  
  @media (min-width:768px) { 
      #banner {
          height: 300px;
          overflow: hidden;
      }
      
      #banner img {
        display: block;
         /* height: auto;
          margin-top: -100px;*/
          padding-top: 0.1%;;
          width: 120px;
          height: 150px;
      }


      #banner h3 {
        /*font-size: 40px;*/
        font-size: 25px;
        color:#B40431;
        font-weight: bold;
    }

    #banner p {
        font-size: 15px;color:#6E6E6E
      }
  }
  
  @media (min-width:1024px) { 
      #banner img {
        display: block;
         /* margin-top: -200px;*/
         padding-top: 0.1%;
         width: 120px;
         height: 150px;
      }

      #banner h3 {
        /*font-size: 40px;*/
        font-size: 30px;
        color:#B40431;
        font-weight: bold;
    }

    #banner p {
        font-size: 18px;color:#6E6E6E
      }
  }
  
  #info {
    background-color:#610B21;
      color:#f7f2f4;
      text-align: center;
      padding: 20px;
  }
  
  #info a{
      text-decoration: none;
      color: darkgrey;

  }


  #info .contenedor {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
  }
  
  .info-pet {
      margin: 20px;
      
  }
  
  .info-pet img {
      width: 180px;
      height: 180px;
      border-radius: 50%;
      border: 7px solid #fff;
      
  }

  .info-pet .icon {
      width: 180px;
      height: 180px;
      border-radius: 50%;
      border: 7px solid #fff;
      font-size: 115px;
      padding-top: 25px;
      color: #c90a63;
     
    }

    .info-pet .icon:hover{
        background-color:#444243;
          color:#f7f2f4;
          text-align: center;
          padding: 20px;
         border-radius: 5%;
          transform: scale(1.05);
      }

 

  
  @media (min-width:480px) {
      .info-pet {
          width: 40%;
      }
  }
  
  @media (min-width:1024px) {
      .info-pet {
          width: auto;
      }
  }
  #menu-bar {
      display: none;
  }
  
  header label {
      float: right;
      font-size: 28px;
      margin: 6px 0;
      cursor: pointer;
  }
  
  .menu {
      position: absolute;
      top: 50px;
      left: 0;
      width: 100%;
      height: 100vh;
      background: rgba(51,51,51,0.9);
      transition: all 0.5s;
      transform: translateX(-100%);
  }
  
  .menu a {
      display: block;
      color: #fff;
      height: 60px;
      text-decoration: none;
      padding: 15px;
      border-bottom: 1px solid rgba(255,255,255,0.3);
  }
  
  .menu a:hover {
      background: rgba(255,255,255,0.3);
  }
  
  #menu-bar:checked ~ .menu {
      transform: translateX(0%);
  }
  
  @media (min-width:1024px) {
      .menu {
          position: static;
          width: auto;
          height: auto;
          transform: translateX(0%);
          float: right;
          display: flex;
      }
      
      .menu a {
          border: none;
      }
      
      header label { 
          display: none;
      }
  }
  
  
  /*******************************/