@charset "UTF-8";

/**
 * 【1】Big Fancy 3D Rotating SVG Button
 */
.p-mainview__eventlink > a.c-anchorlink--effect03top {
	top: 0;
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
	-webkit-transform: rotateX( -90deg ) translateZ( 22px );
	transform: rotateX( -90deg ) translateZ( 22px );
	transition: transform .3s ease;
	transition: -webkit-transform .3s ease;
	background: #000;
	backface-visibility: hidden;
	border: 2px solid #000;
	color: #fff;
}

.p-mainview__eventlink > a.c-anchorlink--effect03front {
	position: absolute;
	display: block;
	padding: 10px 0 10px 25px;
	top: 0px;
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
	-webkit-transform: rotateX( 0deg ) translateZ( 22px );
	transform: rotateX( 0deg ) translateZ( 22px );
	transition: transform .3s ease;
	transition: -webkit-transform .3s ease;
	background: #fff;
	backface-visibility: hidden;
	border: 2px solid #000;
	color: #000;
}
.p-mainview__eventlink > a.c-anchorlink--effect03top {
	animation: effect-top .5s ease 1.7s 1 alternate;
    animation-fill-mode: forwards;
}
.p-mainview__eventlink > a.c-anchorlink--effect03front {
	animation: effect-front .5s ease 1.7s 1 alternate;
    animation-fill-mode: forwards;
}
@keyframes effect-top {
	0% {
	-webkit-transform: rotateX( -90deg ) translateZ( -3px );
	transform: rotateX( -90deg ) translateZ( -3px );
	top: 20px;
	}
	100% {
	-webkit-transform: rotateX( 0deg ) translateZ( 22px );
	transform: rotateX( 0deg ) translateZ( 22px );
	top:0px;
	}
}
@keyframes effect-front {
	0% {
	-webkit-transform: rotateX( 0deg ) translateZ( -3px );
	transform: rotateX( 0deg ) translateZ( -3px );
	}
	100% {
	-webkit-transform: rotateX( 90deg ) translateZ( 22px );
	transform: rotateX( 90deg ) translateZ( 22px );
	}
}

/**
 * 【2】Borders on Hover without SVG
 */
.p-mainview__eventlink--effect02 {
  background: #fff;
  border: none;
  color: #000;
  padding: 2px;
  cursor: pointer;
  display: block;
  overflow: hidden;
  transition: all .35s ease-in-out .35s;
  margin: 0 auto;
  text-align: center;
}
.p-mainview__eventlink--effect02 > a {
  background: #fff;
  color: #000;
  z-index: 100;
  position: relative;
  transition: all .35s ease-in-out .35s;
}
.p-mainview__eventlink--effect02:after {
  bottom: -100%;
  right: -100%;
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  background: #000;
  transition: all .35s ease-in-out .5s;
}
.p-mainview__eventlink--effect02:before {
  top: -100%;
  left: -100%;
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  background: #000;
  transition: all .35s ease-in-out .5s;
}


.p-mainview__eventlink--effect02 a {
	animation: bgcolor-effect 0.9s ease 2.7s 1 alternate;
    animation-fill-mode: forwards;
}
.p-mainview__eventlink--effect02:after {
	animation: border-leftin 1.0s ease 1.7s 1 alternate;
    animation-fill-mode: forwards;
}
.p-mainview__eventlink--effect02:before {
	animation: border-rightin 1.0s ease 1.7s 1 alternate;
    animation-fill-mode: forwards;
}
@keyframes bgcolor-effect {
	0% {
	  background: #fff;
      color: #000;
	}
	100% {
	  background: #000;
      color: #fff;
	}
}
@keyframes border-leftin {
	0% {
      bottom: -100%;
      right: -100%;
	}
	100% {
      bottom: 0;
	  right: 0;
	}
}
@keyframes border-rightin {
	0% {
      left: -100%;
      top: -100%;
	}
	100% {
      left: 0;
      top: 0;
	}
}


/**
 * 【3】CSS Buttons hover effects
 */
.p-mainview__eventlink > a.c-anchorlink--effect01 {
	border: 2px solid #000;
	color: #000;
	background: #fff;
	overflow: hidden;
    background-image: linear-gradient(to right, rgba(0,0,0,0) 50%, rgba( 0 , 0, 0,1) 50%);
    background-position: 0 0;
    background-size: 200% auto;
    transition: 0.5s;
}


.p-mainview__eventlink > a.c-anchorlink--effect01 {
	animation: bgcolor-leftin .5s ease 1.7s 1 alternate;
    animation-fill-mode: forwards;
}
@keyframes bgcolor-leftin {
	0% {
        background-position: 0 0;
		color: #000;
	}
	100% {
        background-position: -100% 0;
		color: #fff;
	}
}