<!DOCTYPE html>
<html lang="en">
<head>
<title>Match the following</title>
 <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

<meta name="author" content="Ashok Shah" />
<meta name="description" content="HTML5 Match the following Interactivity" />
<meta name="keywords" content="html5, elearning, match the following" />
<meta name="website" content="https://www.shahnashok.com" />
<meta name="robots" content="index,follow" />
<meta name="viewport" content="width=device-width, initial-scale=1">
 
 <link href="https://fonts.googleapis.com/css?family=Salsa" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Hammersmith+One" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/reset.css" />
<link rel="stylesheet" type="text/css" href="css/animate.css" />
<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css" />
<link rel="stylesheet" type="text/css" href="css/main.css" />
<link rel="stylesheet" type="text/css" href="css/mtf.css" />
<link rel="stylesheet"href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
<link rel="stylesheet"href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css"/>
<script src="js/jquery-3.2.1.min.js" type="text/javascript"></script>
<script src="lib/js/jquery-3.2.1.min.js" type="text/javascript"></script>
<script src="lib/js/vue.min.js" type="text/javascript"></script>
<script  type="text/javascript"></script>
<style>
@font-face{font-family:"Sehaj";src:url("All Fonts/Sehaj-ENG-Bold.otf");}.question-section{background:aliceblue;}.question-section{background:url("../img/imgbg.png");}img{border-radius:.75pt;}.question-section{border-left-width:0pt;}.question-section{border-bottom-width:0pt;}[class~=opened] #door-left{transform:translateX(-100%);}.question-section{border-right-width:0pt;}.question-section{border-top-width:0pt;}.question-section{border-left-style:solid;}.question-section{border-bottom-style:solid;}.question-section{border-right-style:solid;}#door-left{left:0;}.question-section{border-top-style:solid;}.question-section{border-left-color:#1e9306;}.question-section{border-bottom-color:#1e9306;}.question-section{border-right-color:#1e9306;}.question-section{border-top-color:#1e9306;}.question-section{border-image:none;}.question-section{padding-left:24pt;}#door-left,#door-right{transform:translateX(0);}.question-section{padding-bottom:24pt;}.question-section{padding-right:24pt;}.question-section{padding-top:24pt;}.question-section{width:41%;}[class~=opened] #door-left{background:url("../img/background.png");}.question-section{border-radius:.270833333in 1.5625pc 0px 0px;}.question-section,[class~=opened] #door-left{background-size:100% 100%;}.question-section{box-shadow:#000 0in 0px .0625in 1px;}.question-section{margin-left:auto;}.question-section{margin-bottom:auto;}.question-section{margin-right:auto;}.bg-overlay,#door-right{right:0;}.question-section{margin-top:auto;}[class~=question-n]{margin-bottom:60px;}[class~=title-h4]{font-family:auto;}[class~=title-h4]{color:#fff !important;}[class~=title-h4]{text-align:center;}[class~=title-h4]{font-size:46px;}[class~=title-h4]{text-shadow:1.5pt 1px 3px #000;}[class~=speaker]{width:41px;}[class~=speaker]{cursor:pointer;}[class~=speaker]{position:absolute;}[class~=speaker]{left:90%;}[class~=speaker]{top:.1875pc;}[class~=btn]{}.bg-overlay,.door,[class~=fullscreen-video]{position:fixed;}.door{width:50%;}img{max-width:50%;}.door{height:100vh;}.door{top:0;}.door{z-index:1000;}.door{background-color:black;}.door{transition:transform 1s ease-in-out;}[class~=hidden]{display:none;}[class~=opened] #door-right{transform:translateX(100%);}[class~=img2]{width:84%;}[class~=img2]{display:inline-flex;}[class~=fullscreen-video]{overflow:hidden;}[class~=fullscreen-video]{top:50%;}[class~=fullscreen-video]{left:50%;}[class~=fullscreen-video]{min-width:100%;}[class~=fullscreen-video]{min-height:100%;}[class~=fullscreen-video]{width:auto;}[class~=fullscreen-video]{height:auto;}[class~=fullscreen-video]{transform:translateX(-50%) translateY(-50%);}[class~=fullscreen-video]{z-index:-10;}.bg-overlay{top:0;}.bg-overlay{left:0;}.bg-overlay{bottom:0;}.bg-overlay{background-color:#000;}.bg-overlay{opacity:.6;}.bg-overlay{z-index:-9;}[class~=animate__heartBeat]{-webkit-animation-name:heartBeat;}[class~=animate__heartBeat]{animation-name:heartBeat;}[class~=animate__heartBeat]{-webkit-animation-duration:2.9s;}[class~=animate__heartBeat]{animation-duration:2.9s;}[class~=opened] #door-right{background:url("../img/background2.png");}[class~=animate__heartBeat]{-webkit-animation-timing-function:cubic-bezier(.4,0,1,1);}[class~=animate__heartBeat]{animation-timing-function:ease-in-out;}[class~=opened] #door-right{background-size:100% 100%;}

</style>


</head>
<script src="js/app.mtf.js" type="text/javascript"></script>
<script src="js/mtf.js" type="text/javascript"></script>
<body>
<div class="door" id="door-left"></div>
<div class="door" id="door-right"></div>
<div class="wrapper">
	<div class="wrapper" id="devilzApp">
	<video class="fullscreen-video" id="myVideo" autoplay="autoplay" muted loop>
        <source src="../img/bg1.mp4">
        Your browser does not support the video tag.
    </video>
	<div class="container">
		<section class="content">
			<div class="sub-header">