/* ------------------------------------------
 * IT书包
 * 网址：www.itshubao.com
 * 整理：yinq<3331653644@qq.com> 
 -------------------------------------------- */

body{
	background:#1f545a; 	
	text-align:center;
  font-family: "Open Sans", sans-serif; 
}
#view-code{
  color:#5bafb0; 
  font-size:14px;
  text-transform:uppercase;
  font-weight:700;
  text-decoration:none;
  position:absolute;top:900px; left:50%;margin-left:-35px;
}
#view-code:hover{color:#fff;}
#window{
	margin:80px auto 0;
	border-radius:6px;
	background:#f4d151;
	width:1009px;
	height:780px;	
	overflow:hidden;
  background:#1f545a;
}
#header{
	background:#2d3e50;
	height:33px;
	padding-left:18px;
}
#header .circle{
	background:#44596f;
	border-radius:50%;
	float:left;
	width:12px;
	height:12px;
	margin-right:6px;
	margin-top:11px;
	
}
#sidebar{
	width:30%;
	float:left;
	height:800px;	
  background:#69d0d1 url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/245657/sidebar.png") 24px 50px no-repeat;
}
#content{
	width:70%;
	float:left;	
	position:relative;
  background:#d4d9e2;
}
.tile, .tile-clone{
	float:left; 
	width:49.8%;
	height:248px;
	background:#fff;
	margin: 0 1px 1px 0 ;
	position:relative;
}
.title{
	position:absolute; 
	top:152px;
	left:0;
	width:100%;
	height:60px;
	overflow:hidden;
  cursor:pointer
	-webkit-transition: all 400ms cubic-bezier(0,.93,.33,.99) 120ms;
	   -moz-transition: all 400ms cubic-bezier(0,.93,.33,.99) 120ms;
	    -ms-transition: all 400ms cubic-bezier(0,.93,.33,.99) 120ms;
	     -o-transition: all 400ms cubic-bezier(0,.93,.33,.99) 120ms;
		    transition: all 400ms cubic-bezier(0,.93,.33,.99) 120ms;
}
.tile:hover {cursor:pointer;}
.tile:hover .title{
	top:18px;	
	-webkit-transition: all 400ms cubic-bezier(0,.93,.33,.99);
	   -moz-transition: all 400ms cubic-bezier(0,.93,.33,.99);
	    -ms-transition: all 400ms cubic-bezier(0,.93,.33,.99);
	     -o-transition: all 400ms cubic-bezier(0,.93,.33,.99);
		    transition: all 400ms cubic-bezier(0,.93,.33,.99);
}
.tile:hover .shortline{
	top:85px;
	-webkit-transition: all 400ms cubic-bezier(0,.93,.33,.99) 120ms;
	   -moz-transition: all 400ms cubic-bezier(0,.93,.33,.99) 120ms;
	    -ms-transition: all 400ms cubic-bezier(0,.93,.33,.99) 120ms;
	     -o-transition: all 400ms cubic-bezier(0,.93,.33,.99) 120ms;
		    transition: all 400ms cubic-bezier(0,.93,.33,.99) 120ms;
}
.tile-clone .title{
	top:18px;	
}
#content-overay{
	background:#000; 
	opacity:0; 
	position:absolute; 	
	top:0; 
	left:0; 
	height:100%;
	z-index:1;	
	width:100%;	
	display:none;
}
.tile-clone .shortline{
	top:100px;
}
.tile-clone{
	z-index:2;
	margin-top:0;
	margin-left:0;
	position:absolute;
	width:49.7%;
	height:249px;
	-webkit-transition: all 400ms cubic-bezier(0,.93,.33,.99);
	   -moz-transition: all 400ms cubic-bezier(0,.93,.33,.99);
	    -ms-transition: all 800ms cubic-bezier(0,.93,.33,.99);
	     -o-transition: all 400ms cubic-bezier(0,.93,.33,.99);
		    transition: all 400ms cubic-bezier(0,.93,.33,.99);
}

.tile-clone.animate{
	width:100%;
	height:746px;
	margin-top:-1px;
	margin-left:-1px;
	-webkit-transition: all 400ms cubic-bezier(0,.93,.33,.99);
	   -moz-transition: all 400ms cubic-bezier(0,.93,.33,.99);
	    -ms-transition: all 400ms cubic-bezier(0,.93,.33,.99);
	     -o-transition: all 400ms cubic-bezier(0,.93,.33,.99);
		    transition: all 400ms cubic-bezier(0,.93,.33,.99);
}
.tile-clone.animate .shortline{
	opacity:0;	
	-webkit-transition: all 200ms ease-out;
	   -moz-transition: all 200ms ease-out;
	    -ms-transition: all 200ms ease-out;
	     -o-transition: all 200ms ease-out;
		    transition: all 200ms ease-out;
}
.tile-clone.animate .title{
	opacity:0;
	-webkit-transition: all 200ms ease-out;
	   -moz-transition: all 200ms ease-out;
	    -ms-transition: all 200ms ease-out;
	     -o-transition: all 200ms ease-out;
		    transition: all 200ms ease-out;
}
.tile-clone.clearHover .shortline{
	display:none;
}
.tile-clone.clearHover .title{
	display:none;
}
.bar{
	background:#fec2bf;
	height:15px;
	margin:15px 34px;
	border-radius:13px;
}
.bar.small, .shortline span.small{margin-right:180px;}
.shortline{
	position:absolute; 
	top:240px;
	left:0;
	width:100%;
	height:200px;
	-webkit-transition: all 400ms cubic-bezier(0,.93,.33,.99) 120ms;
	   -moz-transition: all 400ms cubic-bezier(0,.93,.33,.99) 120ms;
	    -ms-transition: all 400ms cubic-bezier(0,.93,.33,.99) 120ms;
	     -o-transition: all 400ms cubic-bezier(0,.93,.33,.99) 120ms;
		    transition: all 400ms cubic-bezier(0,.93,.33,.99) 120ms;
}
.shortline span{
	background:#fec2bf;
	display:block;
	height:9px;
	margin:12px 34px;
	border-radius:12px;
}
#close{
	position:absolute;
	display:none;
	top: 20px;
 	right: 20px;
	width:30px;
	height:30px;
	cursor:pointer;
}
.cx, .cy{
	background:#fec2bf;
	position:absolute;
	width:0px;
	top:15px;
	right:15px;
	height:3px;
	-webkit-transition: all 250ms ease-in-out;
	   -moz-transition: all 250ms ease-in-out;
		-ms-transition: all 250ms ease-in-out;
		 -o-transition: all 250ms ease-in-out;
			transition: all 250ms ease-in-out;
}
.cx.s1, .cy.s1{	
	right:0;	
	width:35px;	
	-webkit-transition: all 100ms ease-out;
	   -moz-transition: all 100ms ease-out;
		-ms-transition: all 100ms ease-out;
		 -o-transition: all 100ms ease-out;
			transition: all 100ms ease-out;
}
.cy.s2{	
	-ms-transform: rotate(50deg); 
	-webkit-transform: rotate(50deg); 
	transform: rotate(50deg);		 
	-webkit-transition: all 100ms ease-out;
	   -moz-transition: all 100ms ease-out;
		-ms-transition: all 100ms ease-out;
		 -o-transition: all 100ms ease-out;
			transition: all 100ms ease-out;
}
.cy.s3{	
	-ms-transform: rotate(45deg); 
	-webkit-transform: rotate(45deg); 
	transform: rotate(45deg);		 
	-webkit-transition: all 100ms ease-out;
	   -moz-transition: all 100ms ease-out;
		-ms-transition: all 100ms ease-out;
		 -o-transition: all 100ms ease-out;
			transition: all 100ms ease-out;
}
.cx.s1{	
	right:0;	
	width:35px;	
	-webkit-transition: all 100ms ease-out;
	   -moz-transition: all 100ms ease-out;
		-ms-transition: all 100ms ease-out;
		 -o-transition: all 100ms ease-out;
			transition: all 100ms ease-out;
}
.cx.s2{	
	-ms-transform: rotate(140deg); 
	-webkit-transform: rotate(140deg); 
	transform: rotate(140deg);		 
	-webkit-transition: all 100ms ease-out;
	   -moz-transition: all 100ms ease-out;
		-ms-transition: all 100ease-out;
		 -o-transition: all 100ms ease-out;
			transition: all 100ms ease-out;
}
.cx.s3{	
	-ms-transform: rotate(135deg); 
	-webkit-transform: rotate(135deg); 
	transform: rotate(135deg);		 
	-webkit-transition: all 100ease-out;
	   -moz-transition: all 100ms ease-out;
		-ms-transition: all 100ms ease-out;
		 -o-transition: all 100ms ease-out;
			transition: all 100ms ease-out;
}
#clone-content{
	margin:80px;
	padding-top:50px;
	display:none;
}
#clone-content .headline,
#clone-content .text p{
	background:#fec2bf;
	height:30px;
	border-radius:13px;		
}
#clone-content .text{
	top:0;
	opacity:0;
	position:relative;
	-webkit-transition: all 300ms cubic-bezier(0,.93,.33,.99);
	   -moz-transition: all 300ms cubic-bezier(0,.93,.33,.99);
		-ms-transition: all 300ms cubic-bezier(0,.93,.33,.99);
		 -o-transition: all 300ms cubic-bezier(0,.93,.33,.99);
			transition: all 300ms cubic-bezier(0,.93,.33,.99);
}
#clone-content .headline{
	margin-bottom: 50px;
    width: 468px;
	position:relative;
	top:0;
	opacity:0;
	-webkit-transition: all 400ms cubic-bezier(0,.93,.33,.99);
	   -moz-transition: all 400ms cubic-bezier(0,.93,.33,.99);
		-ms-transition: all 400ms cubic-bezier(0,.93,.33,.99);
		 -o-transition: all 400ms cubic-bezier(0,.93,.33,.99);
			transition: all 400ms cubic-bezier(0,.93,.33,.99);
}
#clone-content .text p{
	height: 16px;
	margin: 15px 0;
}
#clone-content .text p.small{
	width:330px;
}
#clone-content .headline.animate,
#clone-content .text.animate{
	top:-50px;
	opacity:1;
	-webkit-transition: all 700ms cubic-bezier(0,.93,.33,.99);
	   -moz-transition: all 700ms cubic-bezier(0,.93,.33,.99);
		-ms-transition: all 700ms cubic-bezier(0,.93,.33,.99);
		 -o-transition: all 700ms cubic-bezier(0,.93,.33,.99);
			transition: all 700ms cubic-bezier(0,.93,.33,.99);
}