Team:ZJU-China/css/home/ZJU-slide.css

• , *:before, *:after {

 margin:0;
 padding:0;
 -webkit-box-sizing:border-box;
 -moz-box-sizing:border-box;
 box-sizing:border-box;

}

1. gal {

 position:relative;
 width:100%;
 height:760px;
 margin:0 auto;
 background:white;

 -webkit-transform:translate3d(0, 0, 0);
 -moz-transform:   translate3d(0, 0, 0);
 -ms-transform:    translate3d(0, 0, 0);
 -o-transform:     translate3d(0, 0, 0);
 transform:        translate3d(0, 0, 0);

}

1. gal:after {

 content:;
 position:absolute;
 right:0;
 left:0;
 width:100%;
 height:0px;
 background:rgba(255,255,255,0.35);
 z-index:3;

}

1. gal ul {list-style-type:none;height:0}

input[type="radio"], input[type="radio"] + label {

 position:absolute;
 bottom:7%;
 display:block;
 width:20px;
 height:0px;
 -webkit-border-radius:50%;
 -moz-border-radius:50%;
 border-radius:50%;
 cursor:pointer;

} input[type="radio"] {

 opacity:0;
 z-index:9;

} input[value="one"], input[value="one"] + label {left:23%} input[value="two"], input[value="two"] + label {left:33%} input[value="three"], input[value="three"] + label {left:43%} input[value="four"], input[value="four"] + label {left:53%} input[value="five"], input[value="five"] + label {left:63%} input[value="six"], input[value="six"] + label {left:73%} input[type="radio"] + label {

 background:rgba(255,255,255,0.35);
 z-index:7;
 -webkit-box-shadow:0px 0px 0px 0px rgba(255,255,255,0.15);
 -moz-box-shadow:0px 0px 0px 0px rgba(255,255,255,0.15);
 box-shadow:0px 0px 0px 0px rgba(255,255,255,0.15);
 -webkit-transition:all .1s;
 -moz-transition:all .1s;
 -o-transition:all .1s;
 transition:all .1s;

} [class*="entypo-"]:before {

 position:absolute;
 font-family: 'entypo', sans-serif;

} figure[class*="entypo-"]:before {

 left:10px;
 top:5px;
 color:rgba(255,255,255,0);
 z-index:1;
 -webkit-transition:color .1s;
 -moz-transition:color .1s;
 -o-transition:color .1s;
 transition:color .1s;

} a[class*="entypo-"]:before {

 top:8px;
 left:9px;

 color:white;

} a:hover[class*="entypo-"]:before {

 color:white;

} figure, figure img, figcaption {

 position:absolute;
 top:0;
 right:0;

} figure {

 bottom:0;
 left:0;
 width:100%;
 height:100%;
 display:block;
 overflow:hidden;

} figure img {

 bottom:0;
 left:0;
 display:block;
 width:100%;
 height:100%;
 z-index:1;
 -webkit-transform:translateX(600px);
 -moz-transform:translateX(600px);
 -ms-transform:translateX(600px);
 -o-transform:translateX(600px);
 transform:translateX(600px);
 -webkit-transition:all .15s .15s, z-index 0s;
 -moz-transition:all .15s .15s, z-index 0s;
 -o-transition:all .15s .15s, z-index 0s;
 transition:all .15s .15s, z-index 0s;

} figcaption {

 display:block;
 width:30%;
 height:60%;
 top:20%;
 padding-top:30px;
 right:35%;
 
 background-image:radial-gradient(rgba( 255,255,255,0.3), transparent);
 background-size:600px 600px;
 background-repeat:no-repeat;
 background-position:-500px -150px;
 
 text-align:center;
 z-index:3;
 -webkit-box-shadow:-5px 0px 20px rgba(0,0,0,0.1);
 -moz-box-shadow:-5px 0px 20px rgba(0,0,0,0.1);
 box-shadow:-5px 0px 20px rgba(0,0,0,0.1);
 -webkit-transform:translateX(500%);
 -moz-transform:translateX(500%);
 -ms-transform:translateX(500%);
 -o-transform:translateX(500%);
 transform:translateX(500%);
 -webkit-transition:all .35s;
 -moz-transition:all .35s;
 -o-transition:all .35s;
 transition:all .35s;

}

figcaption nav ul {display:block;padding-top:10px;} figcaption nav ul li {display:inline-block;margin-left:5px;} figcaption nav ul li a {

 position:relative;
 display:block;
 width:40px;
 height:0px;
 background:rgba(255,255,255,0.2);
 text-decoration:none;
 color:white;
 -webkit-border-radius:50%;
 -moz-border-radius:50%;
 border-radius:50%;
 -webkit-box-shadow:inset 0px 0px 0px 0px rgba(255,255,255,0);
 -moz-box-shadow:inset 0px 0px 0px 0px rgba(255,255,255,0);
 box-shadow:inset 0px 0px 0px 0px rgba(255,255,255,0);
 -webkit-transition:all .15s;
 -moz-transition:all .15s;
 -o-transition:all .15s;
 transition:all .15s;

} figcaption nav ul li a:hover {

 background:rgba(255,255,255,0);
 -webkit-box-shadow:inset 0px 0px 0px 2px rgba(255,255,255,1);
 -moz-box-shadow:inset 0px 0px 0px 2px rgba(255,255,255,1);
 box-shadow:inset 0px 0px 0px 2px rgba(255,255,255,1);

} figcaption p {

 padding:50px 15px;
 font-family:'Titillium Web', sans-serif;
 font-weight:300;
 color:#333;
 background-image:-webkit-gradient(linear, 0 0, 0 100%, from(rgba(255,255,255,0.35)), color-stop(0.3, rgba(255,255,255,0.35)), color-stop(0.3, transparent), color-stop(0.7, transparent), color-stop(0.7, rgba(255,255,255,0.35)), to(rgba(255,255,255,0.35)));
 background-image:-webkit-linear-gradient(rgba(255,255,255,0.35) 0%, rgba(255,255,255,0.35) 30%, transparent 30%, transparent 70%, rgba(255,255,255,0.35) 70%, rgba(255,255,255,0.35) 100%);
 background-image:-moz-linear-gradient(rgba(255,255,255,0.35) 0%, rgba(255,255,255,0.35) 30%, transparent 30%, transparent 70%, rgba(255,255,255,0.35) 70%, rgba(255,255,255,0.35) 100%);
 background-image:-o-linear-gradient(rgba(255,255,255,0.35) 0%, rgba(255,255,255,0.35) 30%, transparent 30%, transparent 70%, rgba(255,255,255,0.35) 70%, rgba(255,255,255,0.35) 100%);
 background-image:linear-gradient(rgba(255,255,255,0.35) 0%, rgba(255,255,255,0.35) 30%, transparent 30%, transparent 70%, rgba(255,255,255,0.35) 70%, rgba(255,255,255,0.35) 100%);
 background-size:1px 100%;
 background-repeat:no-repeat;
 background-position:50% 0%;

}

input[type="radio"]:hover + label {

 background:rgba(255,255,255,0.6);

} input[type="radio"]:checked + label {

 background:rgba(255,255,255,1);
 -webkit-box-shadow:0px 0px 0px 5px rgba(255,255,255,0.3);
 -moz-box-shadow:0px 0px 0px 5px rgba(255,255,255,0.3);
 box-shadow:0px 0px 0px 5px rgba(255,255,255,0.3);

} input[type="radio"]:checked + label:before {} input[type="radio"]:checked ~ figure img {

 z-index:2;
 -webkit-transform:translatex(0px);
 -moz-transform:translatex(0px);
 -ms-transform:translatex(0px);
 -o-transform:translatex(0px);
 transform:translatex(0px);
 -webkit-transition:all .15s, z-index 0s;
 -moz-transition:all .15s, z-index 0s;
 -o-transition:all .15s, z-index 0s;
 transition:all .15s, z-index 0s;

} input[type="radio"]:checked ~ figure[class*="entypo-"]:before {

 z-index:3;
 color:rgba(255,255,255,0.5);
 -webkit-transition:color .5s;
 -moz-transition:color .5s;
 -o-transition:color .5s;
 transition:color .5s;

} input[type="radio"]:checked ~ figure figcaption {

 z-index:8;
 -webkit-transform:translateX(0px);
 -moz-transform:translateX(0px);
 -ms-transform:translateX(0px);
 -o-transform:translateX(0px);
 transform:translateX(0px);
 -webkit-transition:all .35s, .7s;
 -moz-transition:all .35s, .7s;
 -o-transition:all .35s, .7s;
 transition:all .35s, .7s;

}