/* CSS Document */
@font-face {
    font-family: 'direWebFont';
    src:url('https://www.yelugneta.com/Dire_Dawa.ttf');
}
@font-face {
    font-family: 'direWebFont2';
    src:url('https://yelugneta.com/Dire_Dawa.ttf');
}
*{
	box-sizing:border-box;
	padding:0;
	margin:0;
	font-family:'direWebFont', 'direWebFont2';
}
body{
	overflow-x:hidden;
	scrollbar-width: thin;
}
	
#html-spinner{
  /*Code from previous step*/
  position:fixed;
  display:block;
  left:50%;
  top:20%;
  width:100px;
  height:100px;
  border:4px solid #fcd779;
  border-top:4px solid white;
  border-radius:50%;
 
  /*Added Code from here down*/
  
  /*Animation code for older Chrome, Safari, Opera*/
  -webkit-transition-property: -webkit-transform;
  -webkit-transition-duration: 1.2s;
  -webkit-animation-name: rotate;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  
  /*Animation code for older Firefox*/
  -moz-transition-property: -moz-transform;
  -moz-animation-name: rotate; 
  -moz-animation-duration: 1.2s; 
  -moz-animation-iteration-count: infinite;
  -moz-animation-timing-function: linear;
  
  /*Default animation code*/
  transition-property: transform;
  animation-name: rotate; /*Call to @keyframe rule*/
  animation-duration: 1.2s; /*Change to speed up or slow down the animation*/
  animation-iteration-count: infinite; /*Make the animation go forever*/
  animation-timing-function: linear;
}
 
/*keyframes rule for older Chrome, Safari, Opera*/
@-webkit-keyframes rotate {
    from {-webkit-transform: rotate(0deg);}
    to {-webkit-transform: rotate(360deg);}
}
 
/*keyframes rule for older Firefox version*/
@-moz-keyframes rotate {
    from {-moz-transform: rotate(0deg);}
    to {-moz-transform: rotate(360deg);}
}
 
/*Default @keyframes rule*/
@keyframes rotate {
    from {transform: rotate(0deg);}
    to {transform: rotate(360deg);}
}


#coverArea{
	position:fixed;
	display:none;
	width:102.6%;
	height:50em;
	font-size:15px;
	text-align:center;
	top:0%;
	margin-left:-2%;
	z-index:10;
	background-color:rgba(0,0,0,0.2);
}

#chooseSignUpTypeBox{
	position:fixed;
	display:grid;
	visibility:hidden;
	grid-area:mainTitle;
	width:30%;
	height:15%;
	grid-column:1/2;
	grid-row:1/1;
	font-size:15px;
	text-align:center;
	top:25%;
	margin-left:30%;
	line-height:1;
	z-index:20;
	border:#969696 5px solid;
	border-radius:5px;
	background-color:#FF8040;
	box-shadow:#000 1px 0px 5px 0px;
	grid-row-gap:10px;
	color:#FFF;
	opacity:0;
	-webkit-transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
	-o-transition: opacity 1s ease-in-out;
    transition: opacity 1s ease-in-out;
}

#signUpBox{
	position:fixed;
	display:grid;
	visibility:hidden;
	grid-area:mainTitle;
	width:30%;
	height:40%;
	grid-column:1/2;
	grid-row:1/1;
	font-size:15px;
	text-align:center;
	top:18.3%;
	margin-left:30%;
	line-height:1;
	z-index:20;
	border:#969696 5px solid;
	border-radius:5px;
	background-color:#950811;
	box-shadow:#000 1px 0px 5px 0px;
	grid-row-gap:10px;
	color:#FFF;
	opacity:0;
	-webkit-transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
	-o-transition: opacity 1s ease-in-out;
    transition: opacity 1s ease-in-out;
}
#signUpBox span{
	position:relative;
	display:grid;
	grid-template-columns:40% 60%;
	grid-template-rows:auto;
	grid-column:auto;
	grid-row:auto/auto;
	text-align:left;
}
#signUpBox article{
	position:relative;
	display:grid;
	grid-column:1/1;
	grid-row:auto;
}
#signUpBox input[type="text"], #signUpBox input[type="password"]{
	position:relative;
	display:grid;
	grid-column:2/2;
	grid-row:auto;
	width:90%;
}
#signUpBox input[type="button"]{
	position:relative;
	display:grid;
	grid-column:1/span 2;
	grid-row:auto;
	width:100%;
}

#signInBox{
	position:fixed;
	display:grid;
	visibility:hidden;
	grid-area:mainTitle;
	width:30%;
	height:20%;
	font-size:15px;
	text-align:center;
	top:20%;
	margin-left:30%;
	line-height:1;
	z-index:20;
	border:#969696 5px solid;
	border-radius:5px;
	background-color:#950811;
	box-shadow:#000 1px 0px 5px 0px;
	grid-row-gap:10px;
	color:#FFF;
	opacity:0;
	-webkit-transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
	-o-transition: opacity 1s ease-in-out;
    transition: opacity 1s ease-in-out;
}
#signInBox span{
	position:relative;
	display:grid;
	grid-template-columns:40% 60%;
	grid-template-rows:auto;
	grid-column:auto;
	grid-row:auto/auto;
	text-align:left;
}
#signInBox article{
	position:relative;
	display:grid;
	grid-column:1/1;
	grid-row:auto;
}
#signInBox input[type="text"], #signInBox input[type="password"]{
	position:relative;
	display:grid;
	grid-column:2/2;
	grid-row:auto;
	width:90%;
}
#signInBox input[type="button"]{
	position:relative;
	display:grid;
	grid-column:1/span 2;
	grid-row:auto;
	width:100%;
}


#locationDetailBox{
	position:fixed;
	display:grid;
	visibility:hidden;
	grid-area:mainTitle;
	width:30%;
	height:70%;
	font-size:15px;
	text-align:center;
	top:20%;
	margin-left:30%;
	line-height:1;
	z-index:20;
	border:#969696 5px solid;
	border-radius:5px;
	background-color:#950811;
	box-shadow:#000 1px 0px 5px 0px;
	grid-row-gap:10px;
	color:#FFF;
	opacity:0;
	-webkit-transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
	-o-transition: opacity 1s ease-in-out;
    transition: opacity 1s ease-in-out;
	z-index:2000;
}
#locationDetailBox h4{
	margin-top:em;
	font-size:25px;
}
#locationDetailBox textarea{
	width:28vw;
	height:35vh;
	margin-left:0.3em;
}
#locationDetailBox span{
	position:relative;
	display:grid;
	grid-template-columns:40% 60%;
	grid-template-rows:auto;
	grid-column:auto;
	grid-row:auto/auto;
	text-align:left;
}
#locationDetailBox article{
	position:relative;
	display:grid;
	grid-column:1/1;
	grid-row:auto;
}
#locationDetailBox input[type="button"]{
	position:relative;
	display:grid;
	grid-column:1/span 2;
	grid-row:auto;
	width:100%;
	font-size:22px;
}

#allContain{
	display:grid;
	grid-template:auto/auto;
	width:100vw;
	row-gap:0vh;
}
	#topTitle{
		display:grid;
		grid-column:auto;
		grid-row:1;
		width:100vw;
		height:8vh;
		font-size:35px;
		margin-left:0px;
		grid-template:1fr/41% 35% 5% 10% 10%;
		background-color:#8CD0E3;
		color:#fff;
	}
		#topTitle h1{
			display:grid;
			grid-column:2;
			grid-row:1;
			font-size:30px;
			line-height:2;
		}
		#topTitle a{
			display:grid;
			grid-column:auto;
			grid-row:1;
			color:#fff;
			text-decoration:none;
			white-space:nowrap;
			font-size:20px;
		}
		#topTitle a>img{
				margin-top:1.2vh;
				margin-left:-0.5vw;
				width:2vw;
				height:3vh;
				z-index:2;
			}
		#topTitle a>i{
			position:absolute;
			font-size:1em;
			color:#F76725;
		}
	#topLinks{
		display:grid;
		grid-column:auto;
		grid-row:2;
		width:auto;
		height:10vh;
		grid-template:auto/150px 150px 150px;
		margin-left:0px;
		background-color:#8CD0E3;
		padding-left:35%;
	}
	 #topLinks a{
		 display:grid;
		 grid-column:auto;
		 grid-row:1;
		 font-size:22px;
		 font-weight:bold;
		 text-decoration:none;
		 color:#FFF;
		 line-height:4;
	 }
	 	#topLinks a:hover{
			color:#DDDC26;
		}
	#allMainArea{
		display:grid;
		grid-column:auto;
		grid-row:3;
		width:100vw;
		height:80vh;
		grid-template:auto/100vw;
	}
	 #allMainArea h2{
		  color:#000;
		  font-size:1.8em;
		}
		#leftWing{
			display:grid;
			grid-column:1;
			grid-row:2;
			width:100vw;
			height:auto;
			margin-left:1vw;
			grid-template:107vh 40vh/1fr 1fr 1fr 1fr 1fr;
			grid-row-gap:2vh;
			grid-column-gap:1vw;
		}
			#leftWing>div:nth-child(1), #leftWing>div:nth-child(2), #leftWing>div:nth-child(3), #leftWing>div:nth-child(4), #leftWing>div:nth-child(5){
				display:grid;
				grid-row:1;
				width:16vw;
				background-color:#FFF;	
				overflow:auto;
				text-align:center;
				grid-template:10vh 10vh 5vh 5vh 5vh 10vh 20vh 4vh/15vw;
				justify-content:center;
				align-content:flex-start;
			}
				#leftWing>div:nth-child(1)>img, #leftWing>div:nth-child(2)>img, #leftWing>div:nth-child(3)>img, #leftWing>div:nth-child(4)>img, #leftWing>div:nth-child(5)>img{
					display:grid;
					grid-column:1;
					grid-row:1/span 5;
					width:15vw;
					height:35vh;
				}
				#leftWing>div:nth-child(1)>h2, #leftWing>div:nth-child(2)>h2, #leftWing>div:nth-child(3)>h2, #leftWing>div:nth-child(4)>h2, #leftWing>div:nth-child(5)>h2{
					display:grid;
					grid-column:1;
					grid-row:6;
					font-size:18px;
					align-self:flex-start;
				}
				#leftWing>div:nth-child(1)>h3, #leftWing>div:nth-child(2)>h3, #leftWing>div:nth-child(3)>h3, #leftWing>div:nth-child(4)>h3, #leftWing>div:nth-child(5)>h3{
					display:grid;
					grid-column:1;
					grid-row:7;
					font-size:16px;					
				}
				#leftWing>div:nth-child(1)>center, #leftWing>div:nth-child(2)>center, #leftWing>div:nth-child(3)>center, #leftWing>div:nth-child(4)>center, #leftWing>div:nth-child(5)>center{
					display:grid;
					grid-column:1;
					grid-row:8;
					line-height:1;
					margin-left:1vw;
					font-size:14px;
				}
				#leftWing>div:nth-child(1)>center>a, #leftWing>div:nth-child(2)>center>a, #leftWing>div:nth-child(3)>center>a, #leftWing>div:nth-child(4)>center>a, #leftWing>div:nth-child(5)>center>a{					
					background-color:#e3f6fa;
					color:#000;
					text-align:center;
					text-decoration:none;
					font-size:1.5em;
				}
				
			#leftWing>div:nth-child(1){
				grid-column:1;
			}
			#leftWing>div:nth-child(2){
				grid-column:2;
			}
			#leftWing>div:nth-child(3){
				grid-column:3;
			}
			#leftWing>div:nth-child(4){
				grid-column:4;
			}
			#leftWing>div:nth-child(5){
				grid-column:5;
			}
			
			
		#righWing{
			display:grid;
			grid-column:1;
			grid-row:1;
			width:99vw;
			height:80vh;
			grid-template:1fr/99vw;
		}
			#firstCol, #secondCol, #thirdCol{
				display:grid;
				grid-row:1;
				height:470px;
				overflow:hidden;
			}
			#firstCol{
				grid-column:1;
				grid-template:100%/100% 100% 100%;
			}
				
				#rightTop, #rightMiddle, #rightBottom{
					display:grid;
					grid-template:100%/30vw 58vw;
					grid-auto-flow:column;
				}
				#rightTop{grid-column:1;}
				#rightMiddle, #rightBottom{grid-column:2;}
				#rightBottom{grid-column:2;}
				
				#rightTop{
					grid-row:1;
				}
					#rightTop img, #rightMiddle img, #rightBottom img, #middleTop img, #middleBottom img, #firstRow img, #secondRow img, #thirdRow img, #fourthRow img{
						grid-column:1;
						width:70%;
						height:60%;
						margin-left:14em;
						transition: all 1s ease-out;
						margin-top:6em;
						z-index:5;
					}
					#rightTop p, #rightMiddle p, #rightBottom p, #middleTop p, #middleBottom p, #firstRow p, #secondRow p, #thirdRow p, #fourthRow p{
						grid-column:2;
						width:115%;
						height:auto;
						font-size:1em;
						margin-left:0em;
						margin-top:2%;
						background-color:#e3f6fa;
						transition: all 1s ease-out;
						z-index:2;
						padding-left:20%;
						padding-top:10%;
					}
						#rightTop p>center, #rightMiddle p>center, #rightBottom p>center, #middleTop p>center, #middleBottom p>center, #firstRow p>center, #secondRow p>center, #thirdRow p>center, #fourthRow p>center{
							width:80%;
							text-align:justify;
							overflow:hidden;
						}
				#rightMiddle{
					grid-row:1;
				}
					
				#rightBottom{
					grid-row:1;
				}
			#secondCol{
				grid-column:1;
				grid-template:100%/100% 100% 100%;
			}
				#middleTop, #middleBottom{
					display:grid;
					grid-template:100%/30vw 58vw;
					grid-auto-flow:column;
				}
				#middleTop{
					grid-column:2;
					grid-row:1;
				}
				#middleBottom{
					grid-column:2;
					grid-row:1;
				}
									
			#thirdCol{
				grid-column:1;
				grid-template:100%/100% 100% 100%;
			}
				#firstRow, #secondRow, #thirdRow, #fourthRow{
					display:grid;
					grid-template:100%/30vw 58vw;
					grid-auto-flow:column;	
				}
				#firstRow{
					grid-column:2;
					grid-row:1;
					transition: all 1s ease-out;
				}
				#secondRow{
					grid-column:2;
					grid-row:1;
				}
				#thirdRow{
					grid-column:2;
					grid-row:1;
				}
				#fourthRow{
					grid-column:2;
					grid-row:1;
				}

			
	#footerArea{
		display:grid;
		grid-column:auto;
		grid-row:5;
		width:90vw;
		height:10vh;
		background-color:#321D1E;
		margin-left:5vw;
		margin-top:500px;
	}
	
	#anchorArea{
		position:fixed;
		display:block;
		top:20%;
		left:3%;
		width:90%;
		height:50%;
		z-index:-1;
		opacity:0;
	}
	
	#anchorAreaForList{
		position:fixed;
		display:block;
		top:40%;
		left:23%;
		width:70%;
		height:40%;
		z-index:-1;
		opacity:0;
	}
	
	#mainBooks{
		display:grid;
		grid-column:auto;
		grid-row:auto;
		width:85%;
		grid-template:auto/auto;
		margin-left:1.5vw;
		margin-top: 2vh;
		grid-row-gap:54vh;
		z-index:2;
	}
		#mainBooks h5{
			color:#16DC00;
			letter-spacing:2px;	
			font-size:1.2em;
			width:17.7vw;
			text-align:justify;
		}
		#mainBooks #loadingMessage{
			display: grid;
			grid-column:1;
			font-size: 2em;
			text-indent: 20vw;
			width: 2vw;
		}		
		  #mainBooks div{
			  display:grid;
			  grid-column:auto;
			  grid-row:auto;
			  grid-template:auto/1fr 1fr 1fr 1fr 1fr;
			  grid-row-gap:1vh;
			  width:auto;
			  height:80vh;
			  border-radius:10px;
		  }
		  #mainBooks div>div{
			  display:grid;
			  grid-column:auto;
			  grid-row:auto;
			  grid-template:auto/1fr 1fr 1fr 1fr 1fr;
			  width:auto;
			  grid-column-gap:10px;
			  height:auto;
		  }
		  	#mainBooks div>div>div{
			  display:grid;
			  grid-column:auto;
			  grid-row:auto;
			  grid-template:auto/1fr 1fr 1fr 1fr 1fr;
			  width:18.5vw;
			  height:auto;
			  border:#D8C3C3 thin solid;
			  border-radius:10px;
			  background:linear-gradient(to bottom, #FFEBEC 10%, #FFF);
		  }
				#mainBooks div>div>span{
					display:grid;
					grid-template:45vh 20vh/auto;
					width:17vw;
					background-image:url(images/books/bookshape.png);
					background-repeat:no-repeat;
					background-size:200px 290px;
					background-position:5px -1px;
					z-index:10;
				}
			#mainBooks div>div>span>img{
				display:grid;
				grid-row:1;
				grid-column:1/span 3;
				width:12vw;
				height:44vh;
				margin-left:0vw;
				margin-top:7px;
				z-index:5;
			}
			#mainBooks div>div>span>article{
				display:grid;
				grid-row:2;
				grid-column:1;
				margin-left:-0.7vw;
				width:18vw;
				height:auto;
				overflow:hidden;
				background-color:#F6EAEA;
				color:#000;
			}
			#mainBooks div>div>span>h5{
				display:grid;
				grid-row:1;
				grid-column:2;
				width:5.5vw;
				margin-left:-5.5vw;
				overflow:hidden;
				font-size:14px;
				color:#F76725;
				line-height:5;
				background-color:#F76725;
				color:#000;
				text-align:center;
				box-shadow:#CCC 0px 2px 5px 5px;
				padding-top:1vh;
				z-index:10;
				
			}
			#mainBooks div>div>span>h5>a{
				text-decoration:none;
				color:#FFF;
				text-align:center;
				line-height:1.5;
				padding-top:10vh;
				margin-left: 0.1vw;
				font-size: 0.7em;
				width: 3vw;
			}
			#mainBooks div>div>span>h5>a>center{
				font-size:3em;
				line-height:0.8;
				text-indent:0vw;
				width:3vw;
				margin-left: 1vw;
				white-space: nowrap !important;
			}
			#mainBooks div>div>span>h5>a:hover{
				color:#9FD2EB;
			}

	#thisBook{
		display:grid;
		grid-template:auto/1fr;
		height:auto;
	}
		#thisBook div{
			display:grid;
			grid-column:auto;
			grid-row:auto;
			grid-template:1/1fr 1fr 1fr;
			max-height:300px;
			width:70vw;
			grid-auto-flow:column;
			grid-column-gap:5px;
			margin-left:5vw;
			grid-auto-columns:250px;
		}
			#thisBook div>img{
				display:grid;
				grid-column:auto;
				grid-row:auto;
				width:200px;
				height:300px;
				margin-left:16vw;
			}
			#thisBook div>div{
				display:grid;
				grid-column:auto;
				grid-row:auto;
				width:250px;
				margin-left:2px;
				text-align:center;
				grid-template:auto/auto;
			}
			#thisBook div>div>h1{
				display:grid;
				grid-column:auto;
				grid-row:1;
				width:250px;
				margin-left:200px;
				text-align:center;
			}
			#thisBook div>div>h3{
				display:grid;
				grid-column:auto;
				grid-row:2;
				margin-left:15vw;
			}
			#thisBook div>article{
				display:grid;
				grid-column:1/span 3;
				grid-row:5;
				margin-left: 20vw;
			}
				#thisBook div>a{
					display:grid;
					grid-column:auto;
					grid-row:4;
					margin-left:20vw;
					width:40%;
					justify-self:center;
				}
					#thisBook div>a>img{
						width:50px;
						height:50px;
					}
				#thisBook #includeToCart{
				    display: grid;
					font-size:1.2em;
					text-decoration:none;
					color:#fff;
					background-color:#F76725;
					border-radius:90%;
					width:90px;
					height:70px;
					padding-top:13px;
					text-align:center;
					margin-left: 35vw;
				}
	
	#myListCreate{
		display:grid;
		grid-column:auto;
		grid-row:auto;
		grid-template:1fr/15% 80%;

	}
		#listsToShow{
			display:grid;
			grid-column:1;
			grid-row:auto;
			width:15vw;
			height:100vh;
			grid-template:5% 90%/1fr;
			overflow:auto;
		}
			#listsToShow h3{
				display:grid;
				grid-row:1;
			}
			#allListsFromuser{
				display:grid;
				grid-row:2;
				grid-template:auto/auto;
				grid-row-gap:1vh;
				grid-auto-flow:row;
				justify-content:start;
				align-content:flex-start;
			}
				#allListsFromuser a{
					display:grid;
					grid-column:auto;
					grid-row:auto;
				}
		#workOnListArea{
			display:grid;
			grid-column:2;
			grid-row:auto;
			width:80vw;
			height:auto;
			grid-template:20vh 100vh/auto;
		}
			#topListArea{
				display:grid;
				grid-column:auto;
				grid-row:1;
				width:35vw;
				grid-template:5vh 5vh/1fr 1fr 1fr;
				grid-row-gap:2vh;
			}
			#topListArea ul{
				display:grid;
				grid-column:1/span 2;
				list-style:none;
				height:40px;
				
			}
			#topListArea ul li{
				border:#CCCCCC thin solid;
				width:100%;
				white-space:nowrap;
				overflow:hidden;
				background-color:#FFB26E;
				color:#FFF;
			}
			#topListArea ul li img{
				width:20px;
				height:20px;
				margin-top:5px;
				margin-left:70%;
			}
			#topListArea ul li ul{
			   position: absolute;
			   display: block;
			   visibility: hidden;
			   opacity: 0;
			   transition: all 0.5s ease;
			   margin-top: -0.1rem;
			}
			#topListArea ul li:hover{
				cursor:pointer;
			}
			#topListArea ul li:hover> ul,
			#topListArea ul li:focus-within > ul, 
			#topListArea ul li ul:hover{
				visibility:visible;
				opacity:1;
			}
			#topListArea ul li ul li{
				transition:all 1s ease;
				text-decoration:none;
				border-bottom:transparent thin solid;
				border-left:none;
				border-right:none;
				border-top:none;
			}
			#topListArea ul li ul li:hover{
				border-bottom:#000000 thin solid;
			}
			#topListArea ul li ul li{
				clear:both;
				width:100%;
			}
		#topListArea input[type="text"]{
			display:grid;
			grid-column:1;
			width:15vw;
			height:5vh;
		}
		#topListArea input[type="date"]{
			display:grid;
			grid-column:2/span 3;
			width:15vw;
			height:5vh;
		}
		#topListArea input{
			display:grid;
			grid-column:auto;
			width:15vw;
			height:5vh;
		}
		
	   #booksShowingArea{
		display:grid;
		grid-column:auto;
		grid-row:2;
		width:80%;
		grid-template:auto/auto;
		margin-left:2vw;
		grid-row-gap:14vh;
		z-index:2;
		}
		  #booksShowingArea div{
			  display:grid;
			  grid-column:auto;
			  grid-row:auto;
			  grid-template:auto/1fr 1fr 1fr 1fr 1fr;
			  grid-row-gap:1vh;
			  width:80vw;
			  height:80vh;
			  border-radius:10px;
		  }
		  #booksShowingArea div>div{
			  display:grid;
			  grid-column:auto;
			  grid-row:auto;
			  height:auto;
		  }
		  	#booksShowingArea div>div>div{
			  display:grid;
			  grid-column:auto;
			  grid-row:auto;
			  grid-template:auto/1fr 1fr 1fr 1fr 1fr;
			  width:150px;
			  height:auto;
			  border:#D8C3C3 thin solid;
			  border-radius:10px;
			  background:linear-gradient(to bottom, #E3CD04 10%, #FFF);
		  }
			#booksShowingArea div>div>span>img{
				width:125px;
				height:155px;
				margin-left:0.5vw;
				margin-top:7px;
				z-index:5;
			}
				#booksShowingArea div>div>span{
					width:300px;
					background-image:url(images/books/bookshape.png);
					background-repeat:no-repeat;
					background-size:125px 155px;
					background-position:13px 4px;
					z-index:10;
				}
			#booksShowingArea div>div>span>article{
				width:50%;
				height:auto;
				overflow:hidden;
				background-color#F6EAEA;
				color:#000;
				font-size:0.7em;
			}

.clsRect {
    -webkit-animation-name: rotate;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-duration: 3s;

    animation-name: rotate;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-duration: 10s;

    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transform-style: preserve-3d;
}
  
    @-webkit-keyframes rotate {
	    0%{-webkit-transform: rotateY(0deg); opacity:0;}
		20%{-webkit-transform: rotateY(0deg); opacity:0;}
		50%{ -webkit-transform: rotateY(-90deg); opacity:1;}
		70%{ -webkit-transform: rotateY(-180deg); opacity:0;}
		95% {-webkit-transform: rotateY(-180deg); opacity:0 }
		100% {-webkit-transform: rotateY(0deg); opacity:0; }
  }

  /* all other browsers */
  @keyframes rotate {
    0%{transform: rotateY(0deg); opacity:0;}
	20%{transform: rotateY(0deg); opacity:0;}
	50%{ transform: rotateY(-90deg); opacity:1;}
	70%{ transform: rotateY(-180deg); opacity:0;}
    95% {transform: rotateY(-180deg); opacity:0 }
	100% {transform: rotateY(0deg); opacity:0; }
  }