/**
 * All of the CSS for your public-facing functionality should be
 * included in this file.
 */
.section-activity-container .order-first {
	-ms-flex-order: 1 !important;
	order: 1 !important;
}

.section-activity-container .section-activity-teaser .teaser{
	margin:0;
}

.order-last {
	-ms-flex-order: 2 !important;
	order: 2 !important;
}

@media (min-width: 768px) {

	.section-activity-container .order-1{
		-ms-flex-order: 1 !important;
		order: 1 !important;
	}

	.section-activity-container .order-2{
		-ms-flex-order: 2 !important;
		order: 2 !important;
	}

	.section-activity-container .order-3 {
		-ms-flex-order: 3;
		order: 3;
	}

	.section-activity-container .order-4 {
		-ms-flex-order: 4;
		order: 4;
	}

}

/*
* Arrows animations
 */
.activity_arrows{
	display:none;
}

@media (max-width: 992px) {
	.activity-col{
		padding:0 !important;
	}
}

@media (min-width: 992px) {
	.activity-col{height:300px;}
	.activity-col:first-child,
	.activity-col:nth-child(3){
		padding-right:1.5em;
	}
	.activity-col:last-child,
	.activity-col:nth-child(3){
		margin-top:2em;
	}
	.activity-col:last-child,
	.activity-col:nth-child(2){
		padding-left:1.7em;
	}
	.activity_arrows {
		display:block;
		position: absolute;
		width: 100%;
		height: 642px;
		z-index: 5;
		opacity:0;
		clip-path: polygon(1.3% 43%, 48% 43%, 48% 0%, 52% 0%, 52% 43%, 99% 43%, 99% 53%, 52% 53%, 52% 96%, 48% 96%, 48% 53%, 1.3% 53%);
	}

	.section-activity-content:hover .activity_arrows{
		opacity:1;
	}

	.activity_arrows .arrow-container{
		transition: all 0.5s ease-in-out;
		-webkit-transition: all 0.5s ease-in-out;
		-moz-transition: all 0.5s ease-in-out;
		-o-transition: all 0.5s ease-in-out;
		-ms-transition: all 0.5s ease-in-out;
	}

	.activity_arrows .arrow-title {
		font-family: Oswald-Regular, sans-serif;
		font-size: 18px;
	}

	.activity_arrows .arrow-container:first-child {
		position: absolute;
		left: 48.5%;
		width: 42px;
		height: 100px;
		padding-top: 50px;
		top:3em;
	}

	.section-activity-content:hover .arrow-container:first-child{
		transform: translateY(-3em);
		-webkit-transform: translateY(-3em);
		-moz-transform: translateY(-3em);
		-o-transform: translateY(-3em);
		-ms-transform: translateY(-3em);
	}

	.activity_arrows .arrow-container:first-child .arrow-title {
		padding-right: 40px;
		-webkit-transform: rotate(270deg);
		-moz-transform: rotate(270deg);
		-ms-transform: rotate(270deg);
		-o-transform: rotate(270deg);
		transform: rotate(270deg);
	}

	.activity_arrows .arrow-container:first-child .arrow{
		border-color: transparent transparent #e3e3e3 transparent;
		border-width: 0 20px 20px 20px;
	}

	.activity_arrows .arrow-container:nth-child(2) {
		position: absolute;
		top: 48%;
		height:42px;
		transform: translate(0, -50%);
		padding-right: 40px;
		right:3.5em;
	}

	.section-activity-content:hover .arrow-container:nth-child(2){
		transform: translate(2.5em,-1.3em);
		-webkit-transform: translate(2.5em,-1.3em);
		-moz-transform: translate(2.5em,-1.3em);
		-o-transform: translate(2.5em,-1.3em);
		-ms-transform: translate(2.5em,-1.3em);
	}

	.activity_arrows .arrow-container:nth-child(2) .arrow-title{
		padding-top:10px;
		width: 120px;
		text-align: right;
	}

	.activity_arrows .arrow-container:nth-child(2) .arrow{
		right:0;
		border-width: 20px 0 20px 20px;
		border-color: transparent transparent transparent #e3e3e3;
	}

	.activity_arrows .arrow-container:nth-child(3) {
		position: absolute;
		left: 48.5%;
		width: 42px;
		height: 20px;
		bottom:5em;
	}

	.section-activity-content:hover .arrow-container:nth-child(3){
		transform: translateY(3.2em);
		-webkit-transform: translateY(3.2em);
		-moz-transform: translateY(3.2em);
		-o-transform: translateY(3.2em);
		-ms-transform: translateY(3.2em);
	}

	.activity_arrows .arrow-container:nth-child(3) .arrow-title {
		-webkit-transform: rotate(270deg);
		-moz-transform: rotate(270deg);
		-ms-transform: rotate(270deg);
		-o-transform: rotate(270deg);
		transform: rotate(270deg);
		padding-left:50px;
		padding-bottom: 5px;
	}

	.activity_arrows .arrow-container:nth-child(3) .arrow {
		position:absolute;
		bottom:0;
		border-width: 20px 20px 0 20px;
		border-color: #e3e3e3 transparent transparent transparent;
	}

	.activity_arrows .arrow-container:nth-child(4) {
		position: absolute;
		top: 48%;
		height:42px;
		left:3.5em;
		transform: translate(0, -50%);
	}

	.section-activity-content:hover .arrow-container:nth-child(4){
		transform: translate(-2.5em,-1.2em);
		-webkit-transform: translate(-2.5em,-1.2em);
		-moz-transform: translate(-2.5em,-1.2em);
		-o-transform: translate(-2.5em,-1.2em);
		-ms-transform: translate(-2.5em,-1.2em);
	}

	.activity_arrows .arrow-container:nth-child(4) .arrow-title {
		padding-left:40px;
		padding-top:10px;
	}

	.activity_arrows .arrow-container:nth-child(4) .arrow{
		left:0;
		border-width: 20px 20px 20px 0px;
		border-color: transparent #e3e3e3 transparent transparent ;
	}

	.activity_arrows .arrow {
		position: absolute;
		top: 0;
		width: 0;
		height: 0;
		border-style: solid;
		border-width: 0 20px 20px 20px;
	}
}

/*
* Activity Layers
 */

@media (min-width: 992px) {
	.activity-layer{
		opacity:0;
		transition: all 0.5s ease;
		position:absolute;
		z-index:5;
		height:100%;
		width:100%;
	}
	.activity-layer:hover{
		opacity:1;
	}
}

@media (max-width: 992px) {
	.activity-link{
		display: block;
		position: absolute;
		height: 100%;
		width: 100%;
		z-index: 500;
	}

	.activity-picture {
		height: 300px;
	}
	
	
	.section-activity-container .order-md-1{
		-ms-flex-order: 1 !important;
		order: 1 !important;
	}

	.section-activity-container .order-md-2{
		-ms-flex-order: 2 !important;
		order: 2 !important;
	}

	.section-activity-container .order-md-3 {
		-ms-flex-order: 3;
		order: 3;
	}

	.section-activity-container .order-md-4 {
		-ms-flex-order: 4;
		order: 4;
	}
	
	
}

.activity-picture {
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}

.activity-layer-bg{
	opacity:0.2;
	width:100%;
	top:0;
	height:100%;
	position:absolute;
	z-index:-1;
}

.activity-layer-buttons{
	padding-top: 45%;
	text-align: center;
}

.activity-layer-buttons a{
	/*margin-bottom:0.5em;*/
	max-width: 200px;
	margin-left: auto;
	margin-right: auto;
	width: auto;
}