/*
  January 12, 2018, create this file, CSS own website needs, define a separate file, easy to manage;
  person: Wrp

  TABLE OF CONTENTS

  CSS1  ---  导航使用特效样式 
	CSS2  ---  过光
  CSS3  ---  图片随鼠标切换
  CSS4  ---  图片Z轴360°旋转
    
 */

/*CSS1*/
.navlist ul {
	display: -webkit-box;
	display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  list-style-type: none;
  padding: 0;
}

.target {
	position: absolute;
  border-bottom: 3px solid transparent;
  z-index: 1;
  -webkit-transform: translateX(-60px);
  transform: translateX(-60px);
}

.navlist a,.target {
	-webkit-transition: all .35s ease-in-out;
  transition: all .35s ease-in-out;
}

/*CSS2*/
.light { display:block; position: relative; width:800px; height:450px; margin:0 auto;}
.light:before { 
	content: ""; 
	position: absolute; 
	width:200px; 
	height: 100%; 
	top: 0; 
	left: -150%; 
	overflow: hidden;
    background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,.2) 50%, rgba(255,255,255,0) 100%);
    background: -o-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,.2) 50%, rgba(255,255,255,0) 100%);
    background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.2) 50%, rgba(255,255,255,0) 100%);
	-webkit-transform: skewX(-25deg);
	-moz-transform: skewX(-25deg)
}
.light:hover:before { 
	left: 150%; 
	transition: left 1s ease 0s; 
}


/*CSS3*/
.codrops-top{
  line-height: 24px;
  font-size: 11px;
  background: #fff;
  background: rgba(255, 255, 255, 0.6);
  text-transform: uppercase;
  z-index: 9999;
  position: relative;
  font-family: Cambria, Georgia, serif;
  box-shadow: 1px 0px 2px rgba(0,0,0,0.2);
}
.codrops-top a{
  padding: 0px 10px;
  letter-spacing: 1px;
  color: #333;
  display: inline-block;
}
.codrops-top a:hover{
  background: rgba(255,255,255,0.9);
}
.codrops-top span.right{
  float: right;
}
.codrops-top span.right a{
  float: left;
  display: block;
}
.codrops-demos{
    text-align:center;
  display: block;
  line-height: 30px;
  padding: 5px 0px;
}
.codrops-demos a{
    display: inline-block;
  margin: 0px 4px;
  padding: 0px 6px;
  color: #aaa;
  line-height: 20px;  
  font-size: 13px;
  text-shadow: 1px 1px 1px #fff;
  border: 1px solid #ddd;
  background: #ffffff; 
  background: -moz-linear-gradient(top, #ffffff 0%, #f6f6f6 47%, #ededed 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(47%,#f6f6f6), color-stop(100%,#ededed)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* IE10+ */
  background: linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed',GradientType=0 ); /* IE6-9 */
  box-shadow: 0px 1px 1px rgba(255, 255, 255, 0.5);
}
.codrops-demos a:hover{
  color: #333;
  box-shadow: 0px 1px 1px rgba(255, 255, 255, 0.5);
}
.codrops-demos a:active{
  background: #fff;
}
.codrops-demos a.current-demo,
.codrops-demos a.current-demo:hover{
  background: #f6f6f6;
}

/*CSS4*/
.flip-container {
  perspective: 1000;
  background: #686868;
  transition-duration: 0.5s; 
}
.flip-container:hover{
    background: #db357d;
    transition-duration: 0.5s;  
}
.flip-container:hover .flipper, .flip-container.hover .flipper {
    transform: rotateY(180deg);
}
.flip-container{
  overflow: hidden;
}
.front, .back {
  width: 231px;
  height: 87px;
  text-align: center;
}

.flipper{
  transition: 0.6s;
  transform-style: preserve-3d;
  position: relative;
}

.front, .back {
  backface-visibility: hidden;
  position: absolute;
  top: 27px;
  left: 0;
}

.front {
  z-index: 2;
}

.back {
  transform: rotateY(180deg);
}
.flip-container .text{
  width: 231px;
  float: left;
  margin-top: 148px;
  text-align: center;
  line-height: 26px;
  font-size: 16px;
  padding-top: 28px;
  height: 94px;
  color: #333333;
  background: #f0f0f0;
}
.flip-container .text span{
  font-size: 16px;
  color: #333333;
}