@font-face {
    font-family: Open Sans;  /* Имя шрифта  */
    src: url(../fonts/OpenSans-Regular.ttf); /* Путь к файлу со шрифтом  */
   }
   
 @font-face {
    font-family: 'open_sansregular';
    src: url('../fonts/OpenSans-Regular-webfont.eot');
    src: url('../fonts/OpenSans-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/OpenSans-Regular-webfont.woff') format('woff'),
         url('../fonts/OpenSans-Regular-webfont.ttf') format('truetype'),
         url('../fonts/OpenSans-Regular-webfont.svg#open_sansregular') format('svg');
    font-weight: normal;
    font-style: normal;
} 

@font-face {
    font-family: 'OpenSans-Italic'; /*  Имя шрифта  */
    src: url(../fonts/OpenSans-Italic.ttf);  /* Путь к файлу со шрифтом  */
   }
   

 @font-face {
    font-family: 'OpenSans-Bold'; /* Имя шрифта */ 
    src: url(../fonts/OpenSans-Bold.ttf); /* Путь к файлу со шрифтом  */
   }   

@font-face {
    font-family: 'MathJax_Math'; /* Имя шрифта */
src: url(../fonts/LatinModernMathJax_Main-Regular.otf); /* Путь к файлу со шрифтом */
   }    
 @font-face {
    font-family: 'MathJax_Math-italic'; /* Имя шрифта */
src: url(../fonts/MathJax_Main-Italic.woff); /* Путь к файлу со шрифтом */
 }

.container_flip {
display: flex;
display: box; 
/*display: flexbox;
display: -moz-box;*/
display: -ms-flexbox;
display: -webkit-box;
display: -webkit-flex;
flex-flow: row wrap;
 justify-content: space-between;
	width: 90%; 
	position: relative; 
	margin: 1em auto;
}

.front:hover, .back:hover {
border-radius: 10px;
-webkit-box-shadow: 7px 7px 5px 0px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 7px 7px 5px 0px rgba(0, 0, 0, 0.3);
box-shadow: 7px 7px 5px 0px rgba(0, 0, 0, 0.3);
/*-webkit-transition: -webkit-box-shadow 0.1s linear;
-moz-transition: -moz-box-shadow 0.1s linear;
-o-transition: box-shadow 0.1s linear;
transition: box-shadow 0.1s linear;*/
}

.flipcard {
  position: relative;
  width: 15em;
  height: 14em;
  perspective: 800px;
  margin: 1em auto;

}
.flipcard.flip .front{
transform: rotatex(-180deg);
-webkit-transform: rotatex(-180deg);
-moz-transform: rotatex(-180deg);
}
.flipcard.flip .back{
transform: rotatex(0deg);
-webkit-transform: rotatex(0deg);
-moz-transform: rotatex(0deg);
}
.flipcard .back{
  transform: rotatex(180deg);
  -webkit-transform: rotatex(180deg);
-moz-transform: rotatex(180deg);
}

.flipcard .front, .flipcard .back
{
  position:absolute;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  transition: 0.7s;
  -moz-transition: 0.7s;
  -webkit-transition: 0.7s;
  
-moz-transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;

  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.front {
    font-family: Open Sans, sans-serif;
    text-align: center;
	 position: absolute;
  z-index: 1;
background: #80c468;
border-radius:10px;
    color: white;
    cursor: pointer;
	
	display: flex;
flex-flow: row wrap;
justify-content: space-around;
align-items: center;
  padding: 10px;

}
.front p{
font-size: 2em !important; 
line-height:1.2em;
font-family:Open Sans, sans-serif}

.back {
	display: flex;
flex-flow: row wrap;
justify-content: space-around;
align-items: center;
    background: #fff;
	border-radius:10px;
    color: #3b9d32;
    cursor: pointer;
	border: 2px solid #3b9d32;
    cursor: pointer;
    font-family: Open Sans, sans-serif
    font-size: 1.2em;
    text-align: center;
	 position: absolute;
	   padding: 10px;

}


.front figure{
display:table;
width:90%;
height:auto;
margin:0 auto;
}

.front figure figcaption{
font-size: 0.9em;
display:table;
margin:0 auto;
text-align:center;
}

.front figure>img {
width: 50%;
}