.cd-container{
  width:90%;
  max-width:768px;
  margin:2em auto;
}
.cd-container::after{
  /* clearfix */
  content: '';
  display: table;
  clear: both;
}
.cd-top{
  display: inline-block;
  height: 40px;
  width: 40px;
  position: fixed;
  bottom: 40px;
  right: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
  /* image replacement properties */
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  background: rgba(223, 0, 103, 0.8) url(cd-top-arrow.svg) no-repeat center 50%;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: opacity .3s 0s, visibility 0s .3s;
  -moz-transition: opacity .3s 0s, visibility 0s .3s;
  transition: opacity .3s 0s, visibility 0s .3s;
}
.cd-top.cd-is-visible, .cd-top.cd-fade-out, .no-touch .cd-top:hover{
  -webkit-transition: opacity .3s 0s, visibility 0s 0s;
  -moz-transition: opacity .3s 0s, visibility 0s 0s;
  transition: opacity .3s 0s, visibility 0s 0s;
}
.cd-top.cd-is-visible{
  /* the button becomes visible */
  visibility: visible;
  opacity: 1;
}
.cd-top.cd-fade-out{
  opacity: .5;
}
.no-touch .cd-top:hover{
  background-color:#df0067;
  opacity: 1;
}

/*@media only screen and (min-width: 768px) {
  .cd-top{
    right: 20px;
    bottom: 20px;
  }
}*/
/*@media only screen and (min-width: 1024px) {
  .cd-top{
    height: 60px;
    width: 60px;
    right: 30px;
    bottom: 30px;
  }
}*/

/* Large Devices, Wide Screens  */
@media (min-width:1201px){
/* blu */
.cd-top{height:60px;width:60px;right:30px;bottom:30px;}
}
/* Desktop ipad and small layout */
@media (min-width:992px) and (max-width:1200px){
/* rosa */
.cd-top{height:40px;width:40px;right:30px;bottom:30px;}
}
/* Vertical Tablet layout */
@media (min-width:768px) and (max-width:991px){
/* verde */
.cd-top{right:20px;bottom:20px;60px;width:60px;}
}
/* ONLY SMARTPHONE */
@media (min-width:1px) and (max-width:767px){
/* rosso o arancione */
.cd-top{bottom:5px;height:60px;width:60px;}
}
/* Mobile landscape layout */
@media (min-width:481px) and (max-width:767px){
/* rosso */
}

/* Mobile portrait layout */
@media (min-width :1px) and (max-width:480px){
/* arancione */
}