button {
  color: #fff;
  background-color: #a2a2a2;
}

/* Disabled */

button.magicBtn.disabled {
  cursor: not-allowed;
  opacity: 0.8;
}

button.magicBtn:not(:disabled):not(.disabled) {
  cursor: pointer;
}

/**
 * Impostare il Padding in EM per po
 */

.magicBtn {
  position: relative;
  display: inline-block;
  padding: 18px 30px;
  margin: 5px 1px;
  font-size: 14px;
  font-weight: 300;
  line-height: 1.4px;
  text-decoration: none;
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;
  letter-spacing: 0;
  border: 0;
  border-radius: 5px;
  outline: 0;
  vertical-align: middle;
  user-select: none;
  overflow: hidden;
}

/**
* Buttons Type
*/

/* Ripple */

button.magicBtn.material span.ripple {
  position: absolute;
  background: rgba(0, 0, 0, .25);
  border-radius: 100%;
  transform: scale(0.2);
  opacity: 0;
  pointer-events: none;
  -webkit-animation: ripple .75s ease-out;
  -moz-animation: ripple .75s ease-out;
  animation: ripple .75s ease-out;
}

@-webkit-keyframes ripple {
  from {
    opacity: 1;
  }
  to {
    transform: scale(2);
    opacity: 0;
  }
}

@-moz-keyframes ripple {
  from {
    opacity: 1;
  }
  to {
    transform: scale(2);
    opacity: 0;
  }
}

@keyframes ripple {
  from {
    opacity: 1;
  }
  to {
    transform: scale(2);
    opacity: 0;
  }
}

.material {
  position: relative;
  display: inline-block;
  padding: 18px 30px;
  margin: 5px 1px;
  font-size: 14px;
  font-weight: 300;
  line-height: 1.4px;
  text-decoration: none;
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;
  letter-spacing: 0;
  border: 0;
  border-radius: 2px;
  outline: 0;
  vertical-align: middle;
  user-select: none;
  overflow: hidden;
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  -ms-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
  will-change: box-shadow, transform;
  /* For browser optization, inform browser wich transform must be render*/
}

/* Material Buttons */

.material.main {
  background-color: #9c27b0;
  border-color: #9c27b0;
  color: #fff;
  -webkit-box-shadow: 0 2px 2px 0 rgba(156, 39, 176, 0.14), 0 3px 1px -2px rgba(156, 39, 176, 0.2), 0 1px 5px 0 rgba(156, 39, 176, 0.12);
  box-shadow: 0 2px 2px 0 rgba(156, 39, 176, 0.14), 0 3px 1px -2px rgba(156, 39, 176, 0.2), 0 1px 5px 0 rgba(156, 39, 176, 0.12);
}

.material.main:hover, .material.main:focus, .material.main:active {
  background-color: #9c27b0;
  border-color: #9c27b0;
  color: #fff;
  -webkit-box-shadow: 0 14px 26px -12px rgba(156, 39, 176, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(156, 39, 176, 0.2);
  box-shadow: 0 14px 26px -12px rgba(156, 39, 176, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(156, 39, 176, 0.2);
}

/* Success Button */

.material.success {
  color: #fff;
  background-color: #4caf50;
  border-color: #4caf50;
  -webkit-box-shadow: 0 2px 2px 0 rgba(76, 175, 80, 0.14), 0 3px 1px -2px rgba(76, 175, 80, 0.2), 0 1px 5px 0 rgba(76, 175, 80, 0.12);
  box-shadow: 0 2px 2px 0 rgba(76, 175, 80, 0.14), 0 3px 1px -2px rgba(76, 175, 80, 0.2), 0 1px 5px 0 rgba(76, 175, 80, 0.12);
}

.material.success:hover, .material.success:focus, .material.success:active {
  color: #fff;
  background-color: #4caf50;
  border-color: #4caf50;
  -webkit-box-shadow: 0 14px 26px -12px rgba(76, 175, 80, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(76, 175, 80, 0.2);
  box-shadow: 0 14px 26px -12px rgba(76, 175, 80, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(76, 175, 80, 0.2);
}

/* Warning button */

.material.warning {
  color: #fff;
  background-color: #ff9800;
  border-color: #ff9800;
  -webkit-box-shadow: 0 2px 2px 0 rgba(255, 152, 0, 0.14), 0 3px 1px -2px rgba(255, 152, 0, 0.2), 0 1px 5px 0 rgba(255, 152, 0, 0.12);
  box-shadow: 0 2px 2px 0 rgba(255, 152, 0, 0.14), 0 3px 1px -2px rgba(255, 152, 0, 0.2), 0 1px 5px 0 rgba(255, 152, 0, 0.12);
}

.material.warning:hover, .material.warning:focus, .material.warning:active {
  color: #fff;
  background-color: #ff9800;
  border-color: #ff9800;
  -webkit-box-shadow: 0 14px 26px -12px rgba(255, 152, 0, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(255, 152, 0, 0.2);
  box-shadow: 0 14px 26px -12px rgba(255, 152, 0, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(255, 152, 0, 0.2);
}

/* Danger button */

.material.danger {
  color: #fff;
  background-color: #f44336;
  border-color: #f44336;
  -webkit-box-shadow: 0 2px 2px 0 rgba(244, 67, 54, 0.14), 0 3px 1px -2px rgba(244, 67, 54, 0.2), 0 1px 5px 0 rgba(244, 67, 54, 0.12);
  box-shadow: 0 2px 2px 0 rgba(244, 67, 54, 0.14), 0 3px 1px -2px rgba(244, 67, 54, 0.2), 0 1px 5px 0 rgba(244, 67, 54, 0.12);
}

.material.danger:hover, .material.danger:focus, .material.danger:active {
  color: #fff;
  background-color: #f44336;
  border-color: #f44336;
  -webkit-box-shadow: 0 14px 26px -12px rgba(244, 67, 54, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(244, 67, 54, 0.2);
  box-shadow: 0 14px 26px -12px rgba(244, 67, 54, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(244, 67, 54, 0.2);
}

/* @TODO create completee styles for icons*/

.magicBtn i {
  color: #fff;
  font-size: 14px;
  margin: 0 0 0 10px;
  line-height: 1px;
  /* Prevent button resize on icon append*/
}

/**
 * Setting dev enviroment
 */

*:focus {
  outline: none !important;
}

.magnific-btn-function .button-container {
  /* Button position */
  display: block;
  text-align: center;
  margin: 40px 0;
}

.magnific-btn-function .button-container.border-right {
  border-right: 0px solid #2a2a2a;
}

@-webkit-keyframes ripple {
  from {
    opacity: 1;
  }
  to {
    transform: scale(2);
    opacity: 0;
  }
}

@-moz-keyframes ripple {
  from {
    opacity: 1;
  }
  to {
    transform: scale(2);
    opacity: 0;
  }
}

@keyframes ripple {
  from {
    opacity: 1;
  }
  to {
    transform: scale(2);
    opacity: 0;
  }
}

@-webkit-keyframes criss-cross-left {
  0% {
    left: -20px;
  }
  50% {
    left: 50%;
    width: 20px;
    height: 20px;
  }
  100% {
    left: 50%;
    width: 375px;
    height: 375px;
  }
}

@keyframes criss-cross-left {
  0% {
    left: -20px;
  }
  50% {
    left: 50%;
    width: 20px;
    height: 20px;
  }
  100% {
    left: 50%;
    width: 375px;
    height: 375px;
  }
}

@-webkit-keyframes criss-cross-right {
  0% {
    right: -20px;
  }
  50% {
    right: 50%;
    width: 20px;
    height: 20px;
  }
  100% {
    right: 50%;
    width: 375px;
    height: 375px;
  }
}

@keyframes criss-cross-right {
  0% {
    right: -20px;
  }
  50% {
    right: 50%;
    width: 20px;
    height: 20px;
  }
  100% {
    right: 50%;
    width: 375px;
    height: 375px;
  }
}

@-webkit-keyframes rotation {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@-moz-keyframes rotation {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes rotation {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

[type=reset], [type=submit], button, html [type=button] {
  -webkit-appearance: button;
  -moz-appearance: button;
  apparence: button;
}

button.magicBtn {
  position: relative;
  display: block;
  margin: 5px 0px;
  padding: .375rem .75rem;
  font-size: 0.8rem;
  line-height: 1.5;
  font-weight: 300;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  text-decoration: none;
  border: 1 px solid #666;
  border-radius: 0px;
  white-space: nowrap;
  vertical-align: middle;
  overflow: hidden;
  outline: 0;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

button.magicBtn.material {
  border-radius: 2px;
  background-color: #2196F3;
  border-color: #2196F3;
  color: #fff;
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  -ms-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
  -webkit-box-shadow: 0 2px 2px 0 rgba(156, 39, 176, 0.14), 0 3px 1px -2px rgba(156, 39, 176, 0.2), 0 1px 5px 0 rgba(156, 39, 176, 0.12);
  -moz-box-shadow: 0 2px 2px 0 rgba(156, 39, 176, 0.14), 0 3px 1px -2px rgba(156, 39, 176, 0.2), 0 1px 5px 0 rgba(156, 39, 176, 0.12);
  box-shadow: 0 2px 2px 0 rgba(156, 39, 176, 0.14), 0 3px 1px -2px rgba(156, 39, 176, 0.2), 0 1px 5px 0 rgba(156, 39, 176, 0.12);
  /**
     * Ripple
     * @use keyframes 'ripple'
     */
}

button.magicBtn.material:hover, button.magicBtn.material:focus, button.magicBtn.material:active {
  background-color: #2196F3;
  border-color: #2196F3;
  color: #fff;
  -webkit-box-shadow: 0 14px 26px -12px rgba(33, 150, 243, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(33, 150, 243, 0.2);
  -moz-box-shadow: 0 14px 26px -12px rgba(33, 150, 243, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(33, 150, 243, 0.2);
  box-shadow: 0 14px 26px -12px rgba(33, 150, 243, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(33, 150, 243, 0.2);
}

button.magicBtn.material i {
  color: #fff;
}

button.magicBtn.material.success {
  color: #fff;
  background-color: #4caf50;
  border-color: #4caf50;
  -webkit-box-shadow: 0 2px 2px 0 rgba(76, 175, 80, 0.14), 0 3px 1px -2px rgba(76, 175, 80, 0.2), 0 1px 5px 0 rgba(76, 175, 80, 0.12);
  -moz-box-shadow: 0 2px 2px 0 rgba(76, 175, 80, 0.14), 0 3px 1px -2px rgba(76, 175, 80, 0.2), 0 1px 5px 0 rgba(76, 175, 80, 0.12);
  box-shadow: 0 2px 2px 0 rgba(76, 175, 80, 0.14), 0 3px 1px -2px rgba(76, 175, 80, 0.2), 0 1px 5px 0 rgba(76, 175, 80, 0.12);
}

button.magicBtn.material.success:hover, button.magicBtn.material.success:focus, button.magicBtn.material.success:active {
  color: #fff;
  background-color: #4caf50;
  border-color: #4caf50;
  -webkit-box-shadow: 0 14px 26px -12px rgba(76, 175, 80, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(76, 175, 80, 0.2);
  -moz-box-shadow: 0 14px 26px -12px rgba(76, 175, 80, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(76, 175, 80, 0.2);
  box-shadow: 0 14px 26px -12px rgba(76, 175, 80, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(76, 175, 80, 0.2);
}

button.magicBtn.material.warning {
  color: #fff;
  background-color: #ff9800;
  border-color: #ff9800;
  -webkit-box-shadow: 0 2px 2px 0 rgba(255, 152, 0, 0.14), 0 3px 1px -2px rgba(255, 152, 0, 0.2), 0 1px 5px 0 rgba(255, 152, 0, 0.12);
  -moz-box-shadow: 0 2px 2px 0 rgba(255, 152, 0, 0.14), 0 3px 1px -2px rgba(255, 152, 0, 0.2), 0 1px 5px 0 rgba(255, 152, 0, 0.12);
  box-shadow: 0 2px 2px 0 rgba(255, 152, 0, 0.14), 0 3px 1px -2px rgba(255, 152, 0, 0.2), 0 1px 5px 0 rgba(255, 152, 0, 0.12);
}

button.magicBtn.material.warning:hover, button.magicBtn.material.warning:focus, button.magicBtn.material.warning:active {
  color: #fff;
  background-color: #ff9800;
  border-color: #ff9800;
  -webkit-box-shadow: 0 14px 26px -12px rgba(255, 152, 0, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(255, 152, 0, 0.2);
  -moz-box-shadow: 0 14px 26px -12px rgba(255, 152, 0, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(255, 152, 0, 0.2);
  box-shadow: 0 14px 26px -12px rgba(255, 152, 0, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(255, 152, 0, 0.2);
}

button.magicBtn.material.error {
  color: #fff;
  background-color: #f44336;
  border-color: #f44336;
  -webkit-box-shadow: 0 2px 2px 0 rgba(244, 67, 54, 0.14), 0 3px 1px -2px rgba(244, 67, 54, 0.2), 0 1px 5px 0 rgba(244, 67, 54, 0.12);
  -moz-box-shadow: 0 2px 2px 0 rgba(244, 67, 54, 0.14), 0 3px 1px -2px rgba(244, 67, 54, 0.2), 0 1px 5px 0 rgba(244, 67, 54, 0.12);
  box-shadow: 0 2px 2px 0 rgba(244, 67, 54, 0.14), 0 3px 1px -2px rgba(244, 67, 54, 0.2), 0 1px 5px 0 rgba(244, 67, 54, 0.12);
}

button.magicBtn.material.error:hover, button.magicBtn.material.error:focus, button.magicBtn.material.error:active {
  color: #fff;
  background-color: #f44336;
  border-color: #f44336;
  -webkit-box-shadow: 0 14px 26px -12px rgba(244, 67, 54, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(244, 67, 54, 0.2);
  -moz-box-shadow: 0 14px 26px -12px rgba(244, 67, 54, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(244, 67, 54, 0.2);
  box-shadow: 0 14px 26px -12px rgba(244, 67, 54, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(244, 67, 54, 0.2);
}

button.magicBtn.material span.ripple {
  position: absolute;
  background: rgba(0, 0, 0, 0.25);
  border-radius: 100%;
  transform: scale(0.2);
  opacity: 0;
  pointer-events: none;
  -webkit-animation: ripple .75s ease-out;
  -moz-animation: ripple .75s ease-out;
  animation: ripple .75s ease-out;
}

button.magicBtn.outline {
  background-color: transparent;
  color: #2a2a2a;
  position: relative;
  border: 2px solid #2196F3;
  border-radius: 3px;
  /**
     * Fill
     * @use keyframes 'criss-cross'
     */
}

button.magicBtn.outline.fill:after, button.magicBtn.outline.fill:before {
  box-sizing: border-box;
  transition: 0.5s ease-in-out;
  z-index: -1;
  position: absolute;
  top: 50%;
  content: '';
  width: 20px;
  height: 20px;
  background-color: #2196F3;
  border-radius: 50%;
}

button.magicBtn.outline.fill:before {
  left: -20px;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

button.magicBtn.outline.fill:after {
  right: -20px;
  -webkit-transform: translate(50%, -50%);
  transform: translate(50%, -50%);
}

button.magicBtn.outline.fill:hover {
  color: #fff;
}

button.magicBtn.outline.fill:hover i {
  color: #fff;
}

button.magicBtn.outline.fill:hover:before {
  -webkit-animation: criss-cross-left 0.8s both;
  animation: criss-cross-left 0.8s both;
  -webkit-animation-direction: alternate;
  animation-direction: alternate;
}

button.magicBtn.outline.fill:hover:after {
  -webkit-animation: criss-cross-right 0.8s both;
  animation: criss-cross-right 0.8s both;
  -webkit-animation-direction: alternate;
  animation-direction: alternate;
}

button.magicBtn.outline i {
  color: #2a2a2a;
}

button.magicBtn.outline.success {
  border-color: #4caf50;
}

button.magicBtn.outline.success:after, button.magicBtn.outline.success:before {
  background-color: #4caf50;
}

button.magicBtn.outline.warning {
  border-color: #ff9800;
}

button.magicBtn.outline.warning:after, button.magicBtn.outline.warning:before {
  background-color: #ff9800;
}

button.magicBtn.outline.error {
  border-color: #f44336;
}

button.magicBtn.outline.error:after, button.magicBtn.outline.error:before {
  background-color: #f44336;
}

button.magicBtn.more {
  transition: all 0.2s linear 0s;
  min-width: 144px;
}

button.magicBtn.more:before {
  content: "\f061";
  font-family: "Font Awesome 5 Free";
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 100%;
  left: 0px;
  width: 100%;
  font-weight: 900;
  height: 100%;
  text-align: center;
  font-size: 30px;
  transition: all 0.2s linear 0s;
  z-index: 1;
}

button.magicBtn.more:hover {
  text-indent: -9999px;
}

button.magicBtn.more:hover:before {
  top: 0;
  text-indent: 0;
}

button.magicBtn.small {
  padding: .25rem .5rem;
  font-size: .875rem;
  line-height: 1.5;
}

button.magicBtn.large {
  padding: .5rem 1rem;
  font-size: 1.25rem;
  line-height: 1.5;
}

button.magicBtn i {
  font-size: 14px;
  margin: 0 0 0 10px;
  line-height: 1px;
  /* Prevent button resize on icon append*/
}

button.magicBtn i.rotating {
  -webkit-animation: rotation 2s linear infinite;
  -moz-animation: rotation 2s linear infinite;
  -ms-animation: rotation 2s linear infinite;
  -o-animation: rotation 2s linear infinite;
  animation: rotation 2s linear infinite;
}

button.magicBtn.disabled {
  cursor: not-allowed;
  opacity: 0.7;
}

button.magicBtn:not(:disabled):not(.disalbed) {
  cursor: pointer;
}

button.magicBtn.round {
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius: 20px;
}

button.magicBtn.block {
  width: 100%;
  display: block;
}

@media (max-width: 767px) {
  button.magicBtn {
    padding: .25rem .5rem;
  }
}

.rotating {
  -webkit-animation: rotation 2s linear infinite;
  -moz-animation: rotation 2s linear infinite;
  -ms-animation: rotation 2s linear infinite;
  -o-animation: rotation 2s linear infinite;
  animation: rotation 2s linear infinite;
}

/*# sourceMappingURL=main.css.map */