/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}

body{
	font-family: 'trade';
}
@font-face {
	font-family: 'trade';
	src: url('font/TradeGothic.ttf') format('truetype'), url('font/TradeGothic.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
  }

  @font-face {
	font-family: 'trade-bold';
	src: url('font/Trade_Gothic_LT_Bold.ttf') format('truetype'), url('font/Trade_Gothic_LT_Bold.ttf') format('truetype');
	font-weight: bold;
	font-style: normal;
  }

  @font-face {
	font-family: 'trade-normal';
	src: url('font/Trade_Gothic_LT_Light.ttf') format('truetype'), url('font/Trade_Gothic_LT_Light.ttf') format('truetype');
	font-weight: normal;
	font-style: 'roman';
  }

  @font-face {
	font-family: 'tradeNr';
	src: url('font/TradeGothicLight.ttf') format('truetype'), url('font/TradeGothicLight.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
  }


#wrapper{
	width: 800px;
	height: 600px;
	background-image: url('../media/img/BG/bg2.png');
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	-o-user-select: none;
	user-select: none;
}

/*------------ Header section ----------*/
.top-header{
	position: absolute;
	height: 71px;
	width: 790px;
	top: 5px;
    left: 9px;
	background-image: url('../media/img/BG/bar.png');
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;

}
.top-header h1{
	margin: 0;
	text-transform: uppercase;
	cursor: default;
}
.top-header h1>span{
	border-bottom: 2px solid #fff;
}

.right-section{
	position: absolute;
	display: block;
	right: 0;
	top: 45px;
}

.right-section .content{
	position: relative;
    top: -46px;
    right: 33px;
	display: inline-block;
	color: #002B5B;
	font-family: 'trade-bold';
	font-size: 13px;
	font-weight: 600;
}

.right-section .cont{
	position: relative;
    top: -46px;
    right: 33px;
	display: inline-block;
	
}
.right-section .box1{
	background-image: url('../media/img/BG/top_btns/top_btn_1.png');
	background-repeat: no-repeat;
	background-size: cover;
	position: relative;
	right: 20px;
    top: -41px;
	display: inline-block;
    width: 19px;
	height: 19px;
	cursor: pointer;
    outline: none;
    border: none;
}

.right-section .box1:hover{
	background-position: right;
}

.right-section .box2{
	background-image: url('../media/img/BG/top_btns_2/top_btn_2.png');
	background-repeat: no-repeat;
	background-size: cover;
	position: relative;
	right: 20px;
    top: -38px;
	display: inline-block;
    width: 26px;
	height: 26px;
	cursor: pointer;
}

.right-section .box2:hover{
	background-position: right;
}
.right-section .box3:hover{
	background-position: right;
}
.right-section .box4:hover{
	background-position: right;
}

.right-section .box5:hover{
	background-position: right;
}

.right-section .box3{
	background-image: url('../media/img/BG/top_btns_2/top_btn_2.png');
	background-repeat: no-repeat;
	background-size: cover;
	position: relative;
	right: 20px;
    top: -38px;
	display: inline-block;
    width: 26px;
	height: 26px;
	cursor: pointer;
}

.right-section .box4{
	background-image: url('../media/img/BG/top_btns_2/top_btn_2.png');
	background-repeat: no-repeat;
	background-size: cover;
	position: relative;
	right: 20px;
    top: -38px;
	display: inline-block;
	width: 26px;
	height: 26px;
	cursor: pointer;
}

.right-section .box5{
	background-image: url('../media/img/BG/top_btns_2/top_btn_2.png');
	background-repeat: no-repeat;
	background-size: cover;
	position: relative;
	right: 20px;
    top: -38px;
	display: inline-block;
    width: 26px;
	height: 26px;
	cursor: pointer;
}

/*------------ end header section ----------*/
.intro-img{
	width: 180px;
    height: 260px;
    position: absolute;
    left: 495px;
    top: 25px;
}

.intro-img img{
	border-style: none;
	width: 180px;
    height: 260px
}

figcaption {
	font-size: 11px;
}

.img-credit-toggle{
	position: absolute;
	display: inline-block;
    top: 80%;
    left: 10%;
    cursor: pointer;
	border: none;
	z-index: 9999;
	font-size: 13px;
	padding: 0px;
	font-family: 'trade';
	color: #414141;
}

.img-credit-toggle:hover{
	border-bottom: 1px solid #000;
}

input[type="button"]:focus{
	background-color: transparent;
	outline: none;
}

input[type="button"]:hover{
	border-bottom: 1px solid #000;
}

.img-credit-toggle:focus{
	border: none;
}

.close-cr-sec{
	display: block;
	width: 700px;
    font-size: 16px;
    padding: 0px 0px 0px 0px;
    line-height: 1.3;
    position: absolute;
    top: 90px;
    left: 40px;

}

.inside-content{
	display: block;
	padding: 40px 0px 0px 40px;
	font-family: 'trade';
}

.inside-content p{
	margin: 0;
	font-size: 13px;
}

.inside-content h1{
	margin: 0;
	font-size: 16px;
	margin-bottom: 20px;
}

.intro-sec{
	display: block;
    width: 715px;
	height: 418px;
	background-image: url('../media/img/BG/Bg1.png');
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	margin: auto 0;
    position: absolute;
    top: 90px;
    left: 40px
}

.intro-para{
	position: absolute;
    width: 61%;
    font-size: 18px;
	padding: 0px 0px 0px 40px;
	line-height: 1.6;
	font-family: 'trade';
	color: #414141;
}

.author-name{
	margin: 0;
    position: absolute;
    top: 350px;
	font-style: italic;
	color: #414141;
}

figure{
    margin: 0;
}

.figcaption{
	font-size: 11px;
	color: #414141;
}
#start{
	background-image: url('../media/img/Button/start_btn.png');
	background-repeat: no-repeat;
	/* background-size: cover; */
	width: 88px;
    height: 38px;
    position: absolute;
    top: 354px;
	left: 610px;
	padding-left: 18px;
	line-height: 38px;
	box-sizing: border-box;
    color: #999;
}
#start:hover{
	background-position: 0px -38px;
	cursor: pointer;
}

#quiz{
	width: 740px;
    height: 558px;
    position: absolute;
    top: 43px;
    margin: auto 0;
    left: 35px;
}
#pop-up-sec{
	width: 740px;
    height: 558px;
    position: absolute;
    top: 43px;
    margin: auto 0;
    left: 35px;
}

#qImg > img{
    position: absolute;
	width: 369px;
    height: 422px;
}

#qImgPop > img{
	position: absolute;
    width: 369px;
    height: 422px;
    top: 45px;
}

#A{
	position: absolute;
    left: 390px;
    width: 160px;
}

#B{
	position: absolute;
	left: 570px;
	width: 160px;
}

#C{
	position: absolute;
    left: 390px;
    width: 160px;
	top: 264px;
}

#D{
	position: absolute;
	left: 570px;
	top: 264px;
	width: 160px;
}
#question{
	left: 260px;
	position: relative;
	display: inline-block;
	color: #fff;
	top: 7px;
}

.embryo-ques{
	position: relative;
	display: inline-block;
	color: #fff;
	top: 7px;
}

.next{
	background-image: url('../media/img/BG/next.png');
	background-repeat: no-repeat;
	background-size: cover;
	position: absolute;
	position: absolute;
    bottom: 145px;
	left: 492px;
	width: 119px;
	height: 38px;
	outline: none;
	border: none;
	cursor: pointer;
	cursor: pointer;
	color: #042B5E;
	background-color: transparent;
}

.next:hover{
	background-position: right;
}

.sliderWatch{
	background-image: url('../media/img/BG/b10001.png');
	background-repeat: no-repeat;
	background-size: cover;
	position: absolute;
    bottom: 223px;
	left: 460px;
    width: 186px;
    height: 38px;
    outline: none;
	border: none;
	cursor: pointer;
	color: #042B5E;
	font-size: 15px;
	font-family: 'trade';
}

.sliderWatch:hover{
	background-position: right;
}

.or{
	position: absolute;
	position: absolute;
    bottom: 197px;
    left: 539px;
    color: #EAEAEA;
}

.start-over{
	background-image: url('../media/img/BG/b20001.png');
	background-repeat: no-repeat;
	background-size: cover;
	position: absolute;
	position: absolute;
    bottom: 145px;
	left: 500px;
	width: 117px;
	height: 38px;
	outline: none;
	border: none;
	cursor: pointer;
	color:#002B5B;
	background-color: transparent;
}

.start-over:hover{
	background-position: right;
}

#correctText{
	display: inline-block;
    width: 168px;
    position: absolute;
    left: 393px;
	top: 0px;
    color: #EAEAEA;
    line-height: 1.5;
}

#correctImg{
	position: absolute;
    left: 578px;
    top: 45px;
    width: 160px;
    margin: 0;
}

#correctImg> img{
	width: 160px;
}


.mySlides {display: none}
.mySlides > img {
	display: block;
    margin-left: auto;
    margin-right: auto;
	width: 400px;
	height: 400px;
	margin: auto;
}

.mySlides{
	display: block;
    position: absolute;
	top: 43px;
	left: 150px;
}

/* Slideshow container */
.slideshow-contain {
	width: 740px;
    height: 558px;
    position: absolute;
    top: 43px;
    margin: auto 0;
    left: 35px;
  }

.side-Front-View {
	width: 740px;
    height: 558px;
    position: absolute;
    top: 43px;
    margin: auto 0;
    left: 35px;
}

.slideshow-container {
	width: 740px;
    height: 558px;
    position: absolute;
    top: 43px;
    margin: auto 0;
    left: 35px;
}

/* Next & previous buttons */
.prev{
	background-image: url('../media/img/BG/prev_btn.png');
	background-repeat: no-repeat;
	background-size: cover;
	position: absolute;
	cursor: pointer;
	position: absolute;
	top: 517px;
    user-select: none;
    right: 435px;
    width: 44px;
    height: 38px;
}

.prev:hover {
	background-position: right;
}

.numbertext{
	display: flex;
	position: absolute;
    top: 279px;
	left: 600px;
	color: #F1F1F1;
	font-size: 13px;
}
.counter{
    display: flex;
    top: 255px;
    left: 600px;
	position: absolute;
	color: #F1F1F1;
	font-size: 13px;
}
.text{
	display: flex;
    top: 139px;
    left: 415px;
    position: absolute;
    color:#F1F1F1;
    font-size: 17px;
    width: 170px;
}
.nextS {
	background-image: url('../media/img/BG/next_btn.png');
	background-repeat: no-repeat;
	background-size: cover;
	position: absolute;
	cursor: pointer;
	position: absolute;
	top: 517px;
    user-select: none;
    right: 358px;
    width: 44px;
	height: 38px;	
	font-size: 15px;
    font-family: 'trade';
  }
  .nextS:hover{
	background-position: right;
  }

/* On hover, add a black background color with a little bit see-through */

.prev.my-class{
	background-image: url('../media/img/BG/10003.png');
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	position: absolute;
	cursor: pointer;
	position: absolute;
	top: 517px;
    user-select: none;
    right: 435px;
    width: 44px;
    height: 38px;
    pointer-events: none;
}

.nextS.my-class{
	background-image: url('../media/img/BG/right button0003.png');
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	position: absolute;
	cursor: pointer;
	position: absolute;
	top: 517px;
    user-select: none;
    right: 358px;
    width: 44px;
    height: 38px;
	pointer-events: none;
}

.cross{
	position: absolute;
	background-image: url('../media/img/BG/cross_btn.png');
	background-repeat: no-repeat;
	background-size: cover;
	width: 31px;
	height: 34px;
	top: 65px;
    left: 745px;
	cursor: pointer;
	z-index: 9999;
}

.cross:hover{
	background-position: right;
}

.active{
	background-image: url('../media/img/BG/top_btns_2/active_top_btn_2.png') !important;
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    right: 0px;
	top: 0px;
    display: inline-block;
    width: 32px;
    height: 26px;
	cursor: default !important;
}

.choice{
	position: relative;
}

.hover_image:before{
	content: '';
	background-image: url('../media/img/BG/hover_img.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
	position: absolute;
	width: 163px;
	height: 205px;

}

.wrong:before{
	content: '';
	background-image: url('../media/img/BG/wrong.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
	position: absolute;
	width: 159px;
	height: 202px;

}

.correct:before{
	content: '';
	background-image: url('../media/img/BG/green_cor.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
	position: absolute;
	width: 159px;
	height: 202px;

}

.border-bottm{
	border-bottom: 2px solid #666;
}

#front-side-btn{
	background-image: url('../media/img/BG/b10001.png');
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    top: 50%;
	left: 1%;
    width: 173px;
    height: 38px;
    outline: none;
	border: none;
	z-index: 9999;
	cursor: pointer;
	color:#042B5E;
	font-size: 15px;
    font-family: 'trade';
}

#front-side-btn:hover{
	background-position: right;
}

.logo{
	display: block;
	width: 800px;
}

.logo .logo_1{
	background-image: url('../media/img/Nova/nova_logo.png');
	background-repeat: no-repeat;
	background-size: 100% auto;
	background-position: center;
	position: absolute;
	cursor: pointer;
	width: 157px;
    height: 29px;
    top: 563px;
    left: 14px;
}

/* .logo .logo_1:hover{
	background-position: right;
} */

.logo .logo_2{
	background-image: url('../media/img/Nova/nova_logo_2.png');
	background-repeat: no-repeat;
	background-size: cover;
	position: absolute;
	cursor: pointer;
	position: absolute;
	width: 23px;
	height: 23px;
	top: 568px;
	left: 94px;
}
.logo .logo_2:hover{
	background-position: right;
}