@charset "utf-8";
/* CSS Document */

article, aside, figure, footer, header, hgroup,
menu, nav, section { display: block; }


body{background-image: url("../images/flowers-163717_960_720.jpg");
background-size:cover;
background-position:center center;
background-attachment:fixed;}

.wrapper1{width: 960px;
margin: 0 auto;
background-image: url("../images/BLUE-SKY.jpg");
background-size:cover;
background-position:center center;
!background-color: white;
border: 9px solid purple;
border-bottom-left-radius: 20px;
	border-bottom-right-radius: 20px;
	border-top-left-radius:20px;
	border-top-right-radius: 20px;
}

#container{
	width: 950;
	margin-left:auto;
	margin-right:auto;
	border-radius:10px;
}
header{
	width: 960px;
	font-size:20px;
	text-align:center;
	background-color:#21C6F8;
	border-top-left-radius:10px;
	border-top-right-radius: 10px;
}
footer{
	width: 960px;
	text-align:center;
	font-size:20px;
	background-color: #21C6F8;
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
	clear:both;
	border-top: 3px solid purple;
}
#content{
	width: 950px;
	margin-left:auto;
	margin-right:auto;
	}
#content ul{
	list-style-type:none;
	}
	
#content li{
	float: right;
	width:180px;
	display:block;
	margin-right:11%;
	margin-bottom: 10px;
	
}
#content img{
	transition: all 1s ease; 
	border: 3px solid purple; 
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
	border-top-left-radius:10px;
	border-top-right-radius: 10px;
}
#content img:hover{
	
	transition: all .1s ease;
	transform: translateX(-3px) translateY(-3px) scale(1.02) rotate(0deg);
	border: 3px solid purple;
	box-shadow: 10px 10px 10px rgba(0,0,0,.7);
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
	border-top-left-radius:10px;
	border-top-right-radius: 10px;
	
}
	
	
	#carti{position:relative;
	top: -50px;
	left:3%;
	}
	
		
	.flip3D{ width:100px; height:200px; margin:auto; float:left; padding:80px; 
	}
	
.flip3D > .front{
	position:absolute;
	transform: perspective( 600px ) rotateY( 0deg );

	backface-visibility: hidden;
	transition: transform .5s linear 0s;
}
.flip3D > .back{
	position:absolute;
	transform: perspective( 600px ) rotateY( 180deg );
	
	backface-visibility: hidden;
	transition: transform .5s linear 0s;
}
.flip3D:hover > .front{
	transform: perspective( 600px ) rotateY( -180deg );
}
.flip3D:hover > .back{
	transform: perspective( 600px ) rotateY( 0deg );
}



.slider{
  overflow: hidden;
  height:200px;
  border-bottom: 3px solid purple;
  border-top: 3px solid purple;
  margin-bottom: 50px;
  }
  
  .slider figure div{
  width:20%;
  float:left;
  }
  
  .slider figure img{
  width:100%;
  float:left;
  }
  
  .slider figure{
  position:relative;
  width:500%;
  margin:0;
  left:0;
  animation: 20s slidy infinite;
  }
  
  @keyframes slidy{
  0%{
  Left:0%;}
  10%{
  left:0%;}
  12%{
  left:-100%;}
  22%{
  left:-100%;}
  24%{
  left:-200%;}
  34%{
  left:-200%;}
  36%{
  left:-300%;}
  46%{
  left:-300%;}
  48%{
  left:-400%;}
  58%{
  left:-400%;}
  60%{
  left:-300%;}
  70%{
  left:-300%;}
  72%{
  left:-200%;}
  82%{
  left:-200%;}
  84%{
  left:-100%;}
  94%{
  left:-100%;}
  96%{
  left:0%;}
  }