.elem-text {
	position: absolute;
	bottom: -20px;
	left: 50%;
//			  	border: 2px dotted #f00;   /*  border   */ 
	width: 600px;
	height: auto;

	margin: 0 0 0 -300px;
	padding: 0;
}
.elem-text span {
	font-family: Graceful Mazurka;
	font-size: 80px;
	text-align: center;
	line-height: 70px;
	color: #ff0;
	text-shadow:3px 3px 7px red,-3px -3px 7px rgba(256,256,256,1);
}



.center-al {
	width: 600px;
	position: relative;
	margin: 0 auto;
	botom: 0px;
	display: flex;
//			border: 3px solid magenta;   /*  border   */ 
	flex-direction: column;
}


.box {
	margin: 0px auto;    /*  BOX - общий контейнер поворачивающихся дивов   */
	display: flex;
	align-items: center;
//			border: 2px lime solid;   /*  border   */      
}


.container {
	margin: 0 5px 0 0;
	position: relative;
	width: 200px;
	height: 250px;

	/* задаем глубину сцене */
	-webkit-perspective: 600px; /* webkit */
	-moz-perspective: 600px; /* mozilla */
	-ms-perspective: 600px; /* IE 10 */
	-o-perspective: 600px; /* opera когда-то тоже должна начать понимать */
	perspective: 600px;	/* св-во по стандатам */
}

#card { /* поворачивать будем общий контейнер */
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	position: absolute;

	-webkit-transition: -webkit-transform 0.5s;
	-moz-transition: -moz-transform 0.5s;
	-ms-transition: -moz-transform 0.5s;
	-o-transition: -o-transform 0.5s;
	transition: transform 0.6s;                     /* задаём время продолжительности трансформации */
	
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	-ms-transform-style: preserve-3d;
	-o-transform-style: preserve-3d;
	transform-style: preserve-3d;	/* указываем, что дочерние элементы находятся в 3D пространстве */
}
#card:hover {	/* #2!!!!!  -  HOVER поворачивает контейнер на 180 градусов !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/
	-webkit-transform: rotateY( 180deg );
	-moz-transform: rotateY( 180deg );
	-ms-transform: rotateY( 180deg );
	-o-transform: rotateY( 180deg );
	transform: rotateY( 180deg );
}


figure {
	margin: 0;
	padding: 0;
	
	width: 100%;
	height: 100%;
	position: absolute;
	display: block;
	
	border-radius: 50%;

	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	-ms-backface-visibility: hidden;
	-o-backface-visibility: hidden;
	backface-visibility: hidden;	/* если элемент отвернут лицом от пользователя, контент этого элемента не виден */
}
figure img {
	border-radius: 50%;
}

.back {
	background: #116fa6;
//	background-image: url();
//	background-position: center; /* Положение фона */
//   background-repeat: no-repeat;
}


.back h3 {
	text-align: center;
	color: #fff;
	position: absolute;
	width: 200px;
	left: 50%; 
	margin-left: -100px;
}
.back p {
	font-family: Chocogirl;
	font-size: 21px;
	line-height: 22px;
	text-align: center;
	color: #fff;
	position: absolute;
	left: 50%; 
 	margin-left: -30px;
	bottom: -20px;
}

.front {
	background: #14a4cc;

	
	-webkit-transform: rotateY( 180deg );
	-moz-transform: rotateY( 180deg );
	-ms-transform: rotateY(180deg);
	-o-transform: rotateY( 180deg );
	transform: rotateY( 180deg );	/* в начальном положении фэйс карты к нам развернут на 180 градусов */
}

.front h3, .front p {
	text-align: center;
	color: #ff0;
}

#figure {
	
	margin: 0;
	padding: 0;
	
	width: 100%;
	height: 100%;
	position: absolute;
	display: block;
	
		border-radius: 50%;
	
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	-ms-backface-visibility: hidden;
	-o-backface-visibility: hidden;
	backface-visibility: hidden;	/* если элемент отвернут лицом от пользователя, контент этого элемента не виден */
}

.buttn {
	width: 590px;
	height: 60px;
//			border: 1px red dotted;				/*  border   */
	margin: 10px auto 0;
	display: flex;
	justify-content: space-around;
	align-items: center;
}
.btn_left {
	height: 60px;
	width: 165px;
//			border: 1px red dotted;				/*  border   */
	height: 60px;
	background: url(img/btn_v-lev.png) no-repeat;
	transition: .5s;
	animation: arrow-left 4s infinite linear;
}
.btn_left:hover {
	background: url(img/btn_v-lev-2.png) no-repeat;
}

@keyframes arrow-left {
    0%, 100% {background-position: center 0;}
    20% {background-position: 5px center;}
    55% {background-position: -10px center;}
    67% {background-position: 5px center;}
}
.txt_left {
	font-family: Chocogirl;
	font-weight: bold;
	font-size: 35px;
	line-height: 22px;
	text-align: center;
	color: #1c48fd;
	display: flex;
}
.txt_left a {
	text-decoration: none;
	color: #1c48fd;
	display: flex;
	text-shadow: -2px -2px 5px #fff, 2px 2px 5px #fff;
}


.btn_right {
	height: 60px;
	width: 170px;
//			border: 1px red dotted;				/*  border   */
	background: url(img/btn_v-prv.png) no-repeat;
	transition: .5s;
	animation: arrow-right 3s infinite linear;
}
@keyframes arrow-right {
    0%, 100% {background-position: center 0;}
    15% {background-position: 15px center;}
    50% {background-position: 30px center;}
    65% {background-position: 15px center;}
}
.btn_right:hover {
	background: url(img/btn_v-prv-2.png) no-repeat;
}


.txt_right {
	font-family: Chocogirl;
	font-weight: bold;
	font-size: 35px;
	line-height: 22px;
	text-align: center;
	color: #f028f0;
	display: flex;
	text-shadow: -2px -2px 5px #fff, 2px 2px 5px #fff;
}
.txt_right a {
	text-decoration: none;
	color: #f028f0;
	display: flex;
	text-shadow: -2px -2px 5px #fff, 2px 2px 5px #fff;
}