/* Basic sample */

body{
	overflow:hidden;
	background-color:#fcfcfc;
	margin:0;
	padding:0;
	font-family: 'Montserrat', sans-serif;
}

a:link, a:visited, a:hover, a:active{
		color: rgb(11,36,251);
}

.flipbook-viewport{
	overflow:hidden;
	width:100%;
	height:100%;
}

.flipbook-viewport .container{
	position:absolute;
	top:50%;
	left:50%;
	margin:auto;
}

.flipbook-viewport .flipbook{
	width:1200px;
	height:777px;
	left:-600px;
	top:-389px;
}

.flipbook-viewport .page{
	width:600px;
	height:777px;
	background-color:white;
	background-repeat:no-repeat;
	background-size:contain;
	position:relative;
}

.flipbook .page{
	-webkit-box-shadow:0 0 20px rgba(0,0,0,0.2);
	-moz-box-shadow:0 0 20px rgba(0,0,0,0.2);
	-ms-box-shadow:0 0 20px rgba(0,0,0,0.2);
	-o-box-shadow:0 0 20px rgba(0,0,0,0.2);
	box-shadow:0 0 20px rgba(0,0,0,0.2);
}


.flipbook-viewport .page img{
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	margin:0;
}

.flipbook-viewport .shadow{
	-webkit-transition: -webkit-box-shadow 0.5s;
	-moz-transition: -moz-box-shadow 0.5s;
	-o-transition: -webkit-box-shadow 0.5s;
	-ms-transition: -ms-box-shadow 0.5s;

	-webkit-box-shadow:0 0 20px #ccc;
	-moz-box-shadow:0 0 20px #ccc;
	-o-box-shadow:0 0 20px #ccc;
	-ms-box-shadow:0 0 20px #ccc;
	box-shadow:0 0 20px #ccc;
}

a.video{
	position: absolute;
	display: none;
	height: 18px;
	background: #009799 url(../img/btn-play.png) right 4px top 4px no-repeat;
	background-size: 11px;
	color: #fff;
	box-sizing: border-box;
	padding: 4px 19px 4px 6px;
	text-decoration: none;
	text-transform: uppercase;
	font-size: 9px;
	border-radius: 4px;
	box-shadow: 2px 2px 5px rgba(0,0,0,0.4);
}

a.video.light{
	background: #a8d5d7 url(../img/btn-play-green.png) right 4px top 4px no-repeat;
	background-size: 11px;
	color:#58595b;
}

a.video.light:hover{
	color:#fff;
}

a.application{
	position: absolute;
	display: none;
	width: 190px;
	height: 40px;
	background: #009799 url(../img/checkmark.png) 9px 8px no-repeat;
	background-size: 25px;
	color: #fff;
	box-sizing: border-box;
	padding: 7px 6px 0 42px;
	text-decoration: none;
	text-transform: uppercase;
	font-size: 10px;
	border-radius: 4px;
	box-shadow: 2px 2px 5px rgba(0,0,0,0.4);
}

a.textlink, a.learnmore, span.learnmore{
	display:none;
	color: rgb(11,36,251);
	background-color:#fff;
	padding-right:2px;
	position:absolute;
	font-size: .66em;
}

.small{
	font-size:.6em !important;
}

.green{
	background-color:#d0e8ea !important;
}


a.white{
	color:#fff;
	background-color:#009799;
	position: absolute;
}

a.video:hover, a.application:hover{
	background-color:#007173;
}

.page a.video, .page a.application, .page a.textlink, .page span.learnmore, .page a.learnmore{
	display:block;
}


#instructions{
	width: 600px;
	margin:0;
	padding:0;
	text-align: right;
	position: relative;
	top: -1225px;
	left: -300px;
	z-index:2000;
}

#instructions p{
	background:#fff url(../img/animated-arrow.gif) right 6px top 11px no-repeat;
	color:#009799;
	padding:12px 30px 12px 24px;
	margin:0;
	display:inline-block;
	border-radius:6px;
	box-shadow: 0 3px 8px rgba(0,0,0,0.15);
}

#browserwarning{
	display:none;
	position: relative;
	top: -1020px;
	left:-150px;
	width:300px;
	padding:20px 50px;
	box-sizing: border-box;
	background-color: #fff;
	background-color: rgba(255,255,255,0.9);
	border-radius:10px;
	box-shadow: 0 3px 8px rgba(0,0,0,0.4);
	z-index:1000;
}

.ie6 #browserwarning, .ie7 #browserwarning{
	display:block;
}

#browserwarning h2{
	color:#009799;
}

.button-wrap{
	text-align:center;
	margin:30px 0 10px;
}

a.button{
	display:inline-block;
	background-color:#009799;
	padding:10px 30px;
	border-radius:5px;
	box-shadow: 0 3px 8px rgba(0,0,0,0.4);
	color:#fff;
	cursor:pointer;
	text-decoration:none;
}


a.button:hover{
	background-color:#a8d5d7;
	color:#58595b;
	color:#009799;
}

@media screen and ( max-height: 900px ){
	#instructions{
		top: -1115px;
      left: -293px;
	}

	#instructions p{
		background-image: url(../img/animated-arrow-up.gif);
		background-color:rgba(255,255,255,0.8);
	}

}

@media screen and (max-device-width:766px){
	#browserwarning{
		display:block;
	}

}