*{
    margin: 0; padding: 0;
}
a{
	text-decoration:none;
}
body{
	font-family: 'Philosopher-Regular', sans-serif;
    background-image: url('../images/bg-anim.jpg');
}
@font-face {
  font-family: 'Philosopher-Regular';
  src: url('../font/Philosopher-Regular.eot');
  src: url('../font/Philosopher-Regular.eot?#iefix') format('embedded-opentype'),
       url('../font/Philosopher-Regular.svg#Philosopher-Regular') format('svg'),
       url('../font/Philosopher-Regular.ttf') format('truetype'),
       url('../font/Philosopher-Regular.woff') format('woff'),
       url('../font/Philosopher-Regular.woff2') format('woff2'); 	
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Philosopher-Bold';
  src: url('../font/Philosopher-Bold.eot');
  src: url('../font/Philosopher-Bold.eot?#iefix') format('embedded-opentype'),
       url('../font/Philosopher-Bold.svg#Philosopher-Bold') format('svg'),
       url('../font/Philosopher-Bold.ttf') format('truetype'),
       url('../font/Philosopher-Bold.woff') format('woff'),
       url('../font/Philosopher-Bold.woff2') format('woff2');	   
  font-weight: normal;
  font-style: normal;
}
#content-main{
	width:1300px; 
	margin:20px auto 0 auto;    
}
.back-but{
   display:inline-block; background:#8a493c; border-radius:10px;
   font-weight:700; color:#fff; font-size:20px;  text-transform:uppercase;
   padding:0 30px; height:50px; line-height:50px;
}
.back-but:hover{
	background-color:#2c439c;
}
.anim-main{
   overflow:hidden;
   margin-top:20px; padding:20px 20px; 
}
.anim-item{
   float:left; width:22%; height:410px;
   margin:0 0 20px 20px; display:none;
}
.anim-item h3{
   font-size:21px; color:#8a493c; font-weight:bold;
   margin-bottom:10px;   
}
.anim-item img{
   animation-name: anim-item; 
   animation-timing-function: linear; 
   animation-iteration-count: infinite; 
   animation-duration: 8s; 
   animation-name: anim-item;  /* указываем на ключевые кадры анимации с названием "spinner" */
   animation-timing-function: linear; /* функция синхронизации, с помощью которой будут происходить преобразования */
   animation-iteration-count: infinite; /* количество повторов анимации. "infinite" - значит бесконечно */
   animation-duration: 8s; /* длительность анимации */
   transform-style: preserve-3d; /* указываем что это 3D преобразование */    
}
@keyframes anim-item { 
    from { 
        -moz-transform: rotateY(0deg); 
        -ms-transform: rotateY(0deg); 
        transform: rotateY(0deg); 
    } 
    to { 
        -moz-transform: rotateY(-180deg); 
        -ms-transform: rotateY(-180deg); 
        transform: rotateY(-180deg);
    } 
}