/*! HTML5 Boilerplate v5.0 | MIT License | http://h5bp.com/ */

html {
	color: #222;
	font-size: 1em;
	line-height: 1.4;
}

::-moz-selection {
	background: #b3d4fc;
	text-shadow: none;
}
::selection {
	background: #b3d4fc;
	text-shadow: none;
}
hr {
	display: block;
	height: 1px;
	border: 0;
	border-top: 1px solid #ccc;
	margin: 1em 0;
	padding: 0;
}
audio, canvas, iframe, img, svg, video {
	vertical-align: middle;
}
fieldset {
	border: 0;
	margin: 0;
	padding: 0;
}
textarea {
	resize: vertical;
}
.browserupgrade {
	margin: 0.2em 0;
	background: #ccc;
	color: #000;
	padding: 0.2em 0;
}
/*==========================================================================
   Author's custom styles
   ========================================================================== */
  #wrapper {
   	margin: 0;
   	padding: 0;
   	width: 298px;
   	height: 598px;
   	background-image: url('../img/bkgd.png');
   	background-repeat:no-repeat;
   	background-size: cover;
   	z-index: 900;
   	position: relative;
   	overflow: hidden;
   	cursor: pointer;
   	border: 1px solid #818181;
   }

  #exit_btn{
   	position:absolute;
   	top:0px;
   	left:0px;
   	width:100%;
   	height:100%;
	cursor:pointer;
	z-index:305;
}

#watch_btn{
	position:absolute;
    top: 505px;
    left: 42px;
	width:211px;
	height:43px;
	background-image: url('../img/watch.gif');
	cursor:pointer;
	z-index:300;
	border: none;
}

#watch_over{
	opacity: 0;
	background-image: url('../img/watch_over.gif');
}

#wrapper:hover #watch_btn {
	background-image: url('../img/watch_over.gif');
}

#video{
	position: absolute;
	top: 67px;
	left: 0px;
	width: 300px;
	height: 168px;
	z-index: 308;
}

button:focus { outline:0;}

.mute-video {
	background:url('../img/ic_volume_off_black_24px.svg') no-repeat center;
	/*background:url(http://cdn.flaticon.com/png/64/60750.png) no-repeat center;*/
	background-size: 25px;
	border:0;
	width: 32px;
	height: 32px;
	text-indent: -999px;
	position: absolute;
	top: 8px;
	left: 260px;

}
.unmute-video {
	background:url('../img/ic_volume_up_black_24px.svg') no-repeat center;
	/*    background:url(http://cdn.flaticon.com/png/64/498.png) no-repeat center;*/
	background-size: 25px;
	background-color: transparent;
	border: 0px solid;
}

.restart-video {
	background:url('../img/ic_restore_black_24px.svg') no-repeat center;
	/*background:url(http://cdn.flaticon.com/png/64/60750.png) no-repeat center;*/
	background-size:25px;
	border:0;
	width:32px;
	height:32px;
	text-indent:-999px;
	position: absolute;
	top: 130px;
	left: 260px;
	cursor: pointer;
}

/* ==========================================================================
   Media Queries
   ========================================================================== */


/* ==========================================================================
   Helper classes
   ========================================================================== */

   .hidden {
   	display: none !important;
   	visibility: hidden;
   }
   .visuallyhidden {
   	border: 0;
   	clip: rect(0 0 0 0);
   	height: 1px;
   	margin: -1px;
   	overflow: hidden;
   	padding: 0;
   	position: absolute;
   	width: 1px;
   }
   .visuallyhidden.focusable:active, .visuallyhidden.focusable:focus {
   	clip: auto;
   	height: auto;
   	margin: 0;
   	overflow: visible;
   	position: static;
   	width: auto;
   }
   .invisible {
   	visibility: hidden;
   }
   .clearfix:before, .clearfix:after {
   	content: " ";
   	display: table;
   }
   .clearfix:after {
   	clear: both;
   }
   .clearfix {
   	*zoom: 1;
   }