/*==================================
	#1 - highlightBox
==================================*/

.highlightbox {
    position: relative;
    z-index: 3;
}

	.highlightbox-image-container {
		height: 300px;
		background-size: cover!important;
		background-position: center center !important;
    position: relative;
	}

	.highlightbox-text-container {
	    display: block;
		padding: 15px 0;
		width: 100%;
    }


		.highlightbox-title {
			  display: inline-block;
        margin: 0;
        background: #94b531;
        font-size: 20px;
		}

    .highlightbox-link {
        color: #fff;
    }

    .highlightbox-link:hover {
        color: #fff;
    }

		.highlightbox-icon {
			float: right;
			font-size: 30px;
			margin-top: 2px;
			width: 15%;
			text-align: right;
		}

		.highlightbox-subtitle {

		}

		.highlightbox-link a {

          color: #111;

		}

    .highlightbox-link a:hover {
          color: #111;
      }

      .highlightbox-subtext p {
          color: #111;
      }



		.highlightbox-link:hover .highlightbox-title  {

		}


    .highlight-button-holder {
        margin-top: 15px;
    }


    .highlightbox-link-button {
        font-weight: 700;
        text-decoration: underline;
    }

    .highlight-title-holder {
      position: absolute;
      bottom: 0;
    }

    .highlightbox-subtext {
        padding: 5px 0 0 0;
    }








/*==== End of highlightBox ====*/

/*==================================
	#2 - Responsiivisuus
==================================*/

@media screen and (max-width:991px) {
	.fp-hl-responsive {
		width: 100%;
		margin-bottom: 10px;
		padding-top: 20px;
	}

  .highlight-boxes {
      margin-bottom: 75px;
  }

}

@media screen and (max-width:768px) {

	.highlightbox-image-container {
		height: 275px;
	}
}

@media screen and (max-width:425px) {

	.highlightbox-image-container {
		height: 250px;
	}

	.fp-hl-responsive {
		margin-bottom: 0;
	}

}

@media screen and (max-width:320px) {

	.highlightbox-image-container {
		height: 200px;
	}
}


/*==== End of responsiivisuus ====*/