/*

	BACKGROUND HOVER ZOOM
	---
	Description:
	Makes BACKGROUND images zoom in a little when you mouse
	over them.

*/
.fx-hover-zoom-bg
{
	overflow:hidden;
  position: relative;
}

.fx-hover-zoom-bg:hover .img-top,
.fx-hover-zoom-bg:hover .gallery-item
{
	-webkit-transform: scale(1.2);
  -moz-animation: scale(1.2);
	transform: scale(1.2);
}

.fx-hover-zoom-bg .img-top,
.fx-hover-zoom-bg .gallery-item
{
	-webkit-transition: 0.6s ease;
  -moz-animation: 0.6s ease;
	transition: 0.6s ease;
}

/*

	SLICK DOTS
	---
	Description:
	changes the dots of slick sliders

*/

.fx-slick-dots-orange .slick-dots li{
	margin: 0 1px;
}

.fx-slick-dots-orange .slick-dots li button:before{
  color: transparent;
  opacity: 1;
  background-color: rgba(212, 117, 0, 0.4);
  border-radius: 50%;
	top: 6px;
	width: 10px;
	height: 10px;
}

.fx-slick-dots-orange .slick-dots li.slick-active button:before{
  background-color: #D47500;
}

/*

	SLICK ARROWS
	---
	Description:
	changes the dots of slick arrows

*/
.fx-slick-arrows-orange .slick-arrow{
  display: block;
  height: 40px;
  width: 23px;
}
.fx-slick-arrows-orange .slick-next::before,
.fx-slick-arrows-orange .slick-prev::before{
  content: '';
}
.fx-slick-arrows-orange .slick-next{
  background: url('../img/orange-chevron-right.svg') no-repeat;
}
.fx-slick-arrows-orange .slick-prev{
  background: url('../img/orange-chevron-left.svg') no-repeat;
}
/*

	BOUNCE
	---
	Description:
	Slightly moves element up and down to draw attention.

*/

.fx-bounce{

	-moz-animation-name: bounce;
	-moz-animation-duration: 3s;
	-moz-animation-iteration-count: infinite;
	-moz-animation-timing-function: linear;
	-moz-animation-fill-mode: forwards;
  
	-webkit-animation-name: bounce;
	-webkit-animation-duration: 3s;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-timing-function: linear;
	-webkit-animation-fill-mode: forwards;
  
  
	animation-name: bounce;
	animation-duration: 3s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	animation-fill-mode: forwards;
  }
  
  @keyframes bounce{
	0%,20%,50%,80%,100%{transform:translateY(0)}
	40%{transform:translateY(-10px)}
	60%{transform:translateY(-5px)}
  }