@media (min-width: 768px){

	#arrows{
		width:100%;
		position:fixed;
		z-index: 10;
	}

	#arrows .arrows_wrapper{
		display: flex;
		float: right;
		width: 40%;
		margin-right: 15%;
		flex-direction: row-reverse;
		justify-content: space-between;
	}

	#arrows .img_wrapper{
		position:relative;
		height:50vh;
	}

	#arrows .img_wrapper .inner{
		width:122%;
		transform: translateX(-50%);
		left: 50%;
		position: absolute;
		bottom:0;
	}

	#arrows .arrow img{
		width:100%;
		height:auto;
	}

	#arrows .arrow{
		margin: 0;
		width: 20%;
	}
	
	#arrows .label{
		display: none;
		position: absolute;
    writing-mode: vertical-lr;
    text-orientation: upright;
    white-space: nowrap;
    color: white;
    bottom: 10%;
    left: 50%;
    transform: translateX(-50%);
		}

	#arrows .inner{
		transition: all 1s ease;
		}
	
	#arrows #arrow4 .inner{
		bottom: 100%;
	}

	#arrows #arrow3 .inner{
		bottom: 100%;
	}

	#arrows #arrow2 .inner{
		bottom: 100%;
	}

	#arrows #arrow1 .inner{
		bottom: 100%;
	}
	
}


@media (max-width: 768px){
	#arrows{
		display: none;
	}
}