body {margin:0;padding:0;}

#asmak {
	position:relative;
}

 #asmak video {
	 height:100vh;
	 width:100%;
	 background-position:absolute;
	 z-index:10;
	 object-fit:cover;
 }
 
 #asmak .content {
	 background: rgba(0,0,0,0.5);
	 height:100%;
	 width:100%;
	 z-index:20;
	 position:absolute;
	 top:0;
	 left:0;
	 text-align:center;
	 display: flex;
	 align-items: center;
	 justify-content: center;
 }
 
 #asmak .content h1 {
	 font-size:50px;
	 color: #FFF;
	 font-family: Arial,sans-serif;
 }
 
 #asmak .content p {
	 font-size:18px;
	 color:#FFF;
	 font-family: Arial,sans-serif;
 }
 
 #asmak .flip-content, .front, .back {
	 background: rgba(0,0,0,0.5);
	 height:100%;
	 width:100%;
	 z-index:20;
	 position:absolute;
	 top:0;
	 left:0;
	 text-align:center;
	 
	 display: flex;
	 align-items: center;
	 justify-content: center;
}

 #asmak .flip-content {
    transition: 0.6s;
    transform-style: preserve-3d;
    position: relative
}

 #asmak .front, .back {
     position: absolute;
     top: 0;
     left: 0;
     backface-visibility: hidden;
     background-color: #eee
}

 #asmak .front {
     z-index: 1
}

 #asmak .back {
     transform: rotateY(180deg)
}

 #asmak .flipper:hover .flip-content {
     transform: rotateY(180deg)
}

 #asmak .flipper {
    perspective: 1000px
}