/* CSS Document */
html, body {
  height: 100%;
	background-color: aliceblue;
}
/*
body {
  background-image: url("../img/tilesf2.jpg");
  background-repeat: repeat;
}
*/
.container {
  background-color: aliceblue;
/*  border-radius: 20px 20px 0 0;*/
}
#add-section {
  z-index: 1000;
}
#add-section, #add-section .btn {
  transition: 0.3s;
}
@media only screen and (min-width: 576px) {
  #add-section {
    position: fixed;
    top: 0px;
    width: 100px;
    height: 100px;
    margin-left: calc(100% - 100px);
  }
  #add-section .btn {
    width: 100%;
    height: 100%;
    border-radius: 0 0 0 50%;
    box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.75);
    -webkit-box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.75);
  }
  #add-section .btn:hover > span {
    box-shadow: 0px 0px 2px 2px rgba(0, 0, 0, 0.75);
    -webkit-box-shadow: 0px 0px 2px 2px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: 0px 0px 2px 2px rgba(0, 0, 0, 0.75);
  }
  #add-section .btn:hover span {
    transform: scale(1.1);
  }
  #add-section .btn i {
    transition: 0.1s;
  }
  #add-section .btn:hover i {
    transform: scale(1.2) rotateZ(-10deg);
  }
}
@media only screen and (max-width: 575px) {
  #add-section {
    position: -webkit-sticky;
    position: sticky;
    right: 0px;
    bottom: 0px;
    width: 100%;
    height: 80px;
  }
  #add-section .btn {
    width: 100%;
    height: 100%;
    border-radius: 50% 50% 0 0;
    box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.75);
    -webkit-box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.75);
  }
}