html {
  position: relative;
  min-height: 100%;
}
body {
  /*margin-top: 60px;*/
  /*padding-bottom: -60px;*/
 /* margin-bottom: 100px;*/
}
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 80px;
  background-color: rgba(252, 113, 117,0.8);
}

.footer > .container {
  padding-right: 15px;
  padding-left: 15px;
}

code {
  font-size: 80%;

}

/* °°°°°°°°°°°° Footer (320 max 479) °°°°°°°°°°° */
@media (min-width: 320px) and (max-width: 479px) {
  .footer{
    position: absolute;
    bottom: 0;
    width: 100%;
    font-size: 10px;
    height: 130px;
    
  }

  body {
    margin-bottom: 40px;
  }

  #footd{           /*Mensaje de footer*/
    width: 70%;
    border-right: 1px solid rgba(204, 204, 206,0.2); 
    padding-right: 10px;
    text-align: right;
  }

  #text{
    margin-top: 5px;
    color:#FFF;
    font-size: 11px;
  }

  #footd2{          /* Logos Twitter y Facebook*/ 
    width: 30%;
    text-align: left;
    padding-left: 10px;
    color: #FFF;
    margin: 0px;
    padding-top: 0px;
  }
  
}

/* °°°°°°°°°°°° Footer (480 max 768) °°°°°°°°°°° */
@media (min-width: 480px) and (max-width: 767px) {
  .footer{
    position: absolute;
    width: 100%;
    height: 180px;
  }

  #text{
    margin-top: 5px;
    color:#FFF;
    font-size: 14px;
  }
}

/* °°°°°°°°°°°° Footer (480 max 768) °°°°°°°°°°° */
@media (min-width: 768px) and (max-width: 993px) {
  .footer{
    position: absolute;
    width: 100%;
    height: 160px;
  }

  #text{
    margin-top: 10px;
    color:#FFF;
    font-size: 14px;
  }
}

@media (min-width: 994px) and (max-width: 1140px) {
  .footer{
    position: absolute;
    width: 100%;
    height: 150px;
   
  }

  #text{
    margin-top: 10px;
    color:#FFF;
    font-size: 14px;
  }
}

@media (min-width: 994px) and (max-width: 1140px) {
  .footer{
    position: absolute;
    width: 100%;
    height: 150px;
    
  }

  #text{
    margin-top: 10px;
    color:#FFF;
    font-size: 14px;
  }
}

@media (min-width: 1141px) and (max-width: 1200px) {
  .footer{
    position: absolute;
    width: 100%;
    height: 138px;
   
  }

  #text{
    margin-top: 10px;
    color:#FFF;
    font-size: 14px;
  }
}

@media (min-width: 1200px) and (max-width: 1250px) {
  .footer{
    position: absolute;
    width: 100%;
    height: 130px;
   
  }

  #text{
    margin-top: 10px;
    color:#FFF;
    font-size: 14px;
  }
}
@media (min-width: 1251px) and (max-width: 1300px) {
  .footer{
    position: absolute;
    width: 100%;
    height: 118px;
    
  }

  #text{
    margin-top: 10px;
    color:#FFF;
    font-size: 14px;
  }
}
@media (min-width: 1301px) and (max-width: 1350px) {
  .footer{
    position: absolute;
    width: 100%;
   /* height: 116px;*/
   height: 0;
   
  }

  #text{
    margin-top: 10px;
    color:#FFF;
    font-size: 14px;
  }
}
@media (min-width: 1350px)  {
  .footer{
    position: absolute;
    width: 100%;
    height: 100px;
   
  }

  #text{
    margin-top: 10px;
    color:#FFF;
    font-size: 14px;
  }
}


@media (min-width: 1350px)  {
  .footer{
    position: absolute;
    width: 100%;
    bottom: 0px;
    height: 130px;
    margin-top: 30px;
   
  }
  .spacer{
    height: 50px;
    margin: 0 0 -50px 0;
    /* margin: 20px 0 -50px 0; use this if you want #container to have a 'bottom padding', in this case of 20px */
    background: transparent; /* you'll need this if #container's parent element has a different background from #container itself */
}
    
  }

  #text{
    margin-top: 10px;
    color:#FFF;
    font-size: 2vmin;
  }
}