@charset "UTF-8";

.arrowleft, .arrowright, .arrowup, .arrowdown{
	color: transparent;
    font: 0/0 a;
    transition: background .22s;
    background: rgba(0,0,0,.3);
    display: inline-block;
    outline: 0;
    position: absolute;
    border-radius: 2px;
    z-index: 2;
}
.arrowleft, .arrowright{
    width: 3.6rem;
    height: 5.6rem;
}

.arrowup, .arrowdown{
	height: 3.6rem;
	width: 5.6rem;
}
.arrowleft:after, .arrowright:after, .arrowup:after, .arrowdown:after{
	border: solid .3rem;
    border-color: #fff #fff transparent transparent;
    border-radius: 4px;
    content: '';
    position: absolute;
    width: 1.5rem;
    height: 1.5rem;
}
.arrowleft:after, .arrowright:after{
    top: 2.05rem;
}
.arrowup:after, .arrowdown:after{
    left: 2.05rem;
}
.arrowleft{
	left:0px;
}
.arrowleft:after{
	transform: rotate(-135deg);
    left: 1.4rem;
}
.arrowright{
	right:0px;
}
.arrowright:after{
	transform: rotate(45deg);
    right: 1.4rem;
}
.arrowup{
	top:0px;
}
.arrowup:after{
	transform: rotate(-45deg);
    top: 1.4rem;
}
.arrowdown{
	bottom:0px;
}
.arrowdown:after{
	transform: rotate(135deg);
    bottom: 1.4rem;
}
.arrowleft.fade, .arrowright.fade, .arrowup.fade, .arrowdown.fade{
	opacity: 0;
    transition: all .22s;
    visibility: hidden;
    width: 0;
}