/* illustrative orange and white buttons layout */

button {
  position: relative;
  background-color: rgba(0,0,0,0);
  border: none;
}



.secondary {
  background: url(../images/buttons/medium-secondary.png) no-repeat;
  background-size: contain;
  width: 14rem;
  height: 3.6rem;
  font-size: 1.4rem;
  font-weight: 700;
  color: #434343;
  filter: drop-shadow(0px 2px 1px rgba(0,0,0,0.4))
          /* drop-shadow(0px 2px 4px rgba(245,166,35,0.37)) */
          drop-shadow(0px 2px 4px rgba(0,0,0,0.2))
  ;
}

.primary {
  background: url(../images/buttons/medium-primary.png) no-repeat;
  background-size: contain;
  width: 14rem;
  height: 3.6rem;
  font-size: 1.4rem;
  font-weight: 700;
  color: white;
  text-shadow: 0px 1px 6px black;
  filter: drop-shadow(0px 2px 1px rgba(0,0,0,0.4))
          /* drop-shadow(0px 2px 4px rgba(245,166,35,0.37)) */
          drop-shadow(0px 2px 4px rgba(0,0,0,0.2))
  ;
}

.large {
  width: 32rem;
  background: url(../images/buttons/large-primary.png) no-repeat;
  background-size: contain;

}

button:hover { /* brightness and shadow change on hover*/
  cursor: pointer;
  filter: brightness(105%);
  transform: translateY(-0.1rem);
}
.primary:hover,
.secondary:hover {
  filter: drop-shadow(0px 2px 1px rgba(0,0,0,0.4))
          /* drop-shadow(0px 2px 4px rgba(245,166,35,0.37)) */
          drop-shadow(0px 2px 4px rgba(0,0,0,0.2))
  ;
}

button:active { /* brightness change on active*/
  cursor: pointer;
	/* text-decoration: underline; */
	filter: brightness(90%);
  transform: scale(0.97, 0.97);
  transition: transform 0.3s ease;
}

button:focus {
  outline: none;
  filter: drop-shadow(0px 0px 0.4rem #5498fd);
}

.inactive {
  cursor: default;
}


/*  CIRCLULAR ICON BUTTONs */

button.circle {
  width: 3.6rem !important;
  height: 3.6rem !important;
  box-sizing: border-box;
  border-radius: 100px;
  background: url(../images/buttons/circle-secondary.png);
  background-size: contain;
  filter: drop-shadow(0px 2px 1px rgba(0,0,0,0.4))
          drop-shadow(0px 2px 4px rgba(245,166,35,0.37))
          drop-shadow(0px 2px 4px rgba(0,0,0,0.2))
}


button.circle.primary {
  background-image: url(../images/buttons/circle-primary.png);
  background-size: contain;
}
button.circle.primary i {
  color: white;
}
button.circle i {
  font-size: 2.4rem;
  color: #434343;
}


.circle.secondary {
  width: 3.6rem !important;
  height: 3.6rem !important;
  box-sizing: border-box;
  border-radius: 100px;
  background: url(../images/buttons/circle-secondary.png);
  background-size: contain;
  filter: drop-shadow(0px 2px 1px rgba(0,0,0,0.4))
          drop-shadow(0px 2px 4px rgba(245,166,35,0.37))
          drop-shadow(0px 2px 4px rgba(0,0,0,0.2))
}



.tertiary > p {
  margin-top: -1.8em;
}