/*@fontface declarations are in media/fonts.css*/


body{
	font-family: YanoneKaffeesatz;
	font-weight: 300;
}

section{
	height: inherit;
	position: absolute!important;
	transform-origin: 0 0 0;
}

section img, section div{
	position: absolute;
}

#guidelines{
	display: none;
}


/* ------------------Remove Video CC options and Fullscreen ---------- */

/* removes video.js fullscreen button; do not add this, it breaks the course */
.vjs-fullscreen-control{
	display: none!important;
}

/* removes video.js cc settings button; cc settings have no styling so caveat emptor */
.vjs-texttrack-settings{
	display: none;
}


/*-----------------Chart-Element ------------------*/
#Screen_Chart{
	position: absolute;
	z-index: 10;
}

#Screen_Chart svg{
	height: 100%!important;
	overflow: visible;
	position: absolute;
	left: 43%;
	bottom: 15%;
}

#Screen_Chart svg path:first-child{
	stroke-width: 6;
}

#Screen_Chart svg path:nth-child(2){
	stroke-width: 12!important;
}

#Screen_Chart .progressbar-text{
	position: absolute;
  top: 0%;
  left: -5%;
  padding: 0px;
	margin: 2%;
}

.spanchart svg{
	height: 100%;
	width: 60%;
}

.spanchart{
	position: relative;
	float:right;
	width: 15%;
}

.spanchart svg path:first-child{
	stroke-width: 4;
}

.spanchart svg path:nth-child(2){
	stroke-width: 6;
}



/* ------------DnD basic styling; shrink is used in dnd2 in smartin ---------------*/
.draggable img{
	left: 0;
	top:0;
}

.draggable{
	cursor: pointer;
}

.shrink {
	transform: scale(0);
	-ms-transform: scale(0);
	transition: all .2s ease-in-out;
	/* if you need keyboard accessibility to work properly for dnd2 then add display:none to shrink class */
	/* display: none; */
}


/* ----- Miscellaneous-------- */

/* places invisible image in feedbacks div; in ie9 divs are not clickable unless they contain an element  */
.ie9hack{
	width:100%;
	height:100%;
	z-index: 999;
	top:0;
	left:0;
	position:absolute;
}

/* adds box shadow to reveal slides */
.shadow {
	-webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.5);
	-moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.5);
	box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.5);
}


/* feedback slide clearspace style, 
has clickhandler attached to 'FB_cur' class in smartin to close FB */
.feedbacks {
	z-index: 99 !important;
	width: 100%;
	height: 100%;
	top: 0%;
	left: 0%;
	position: absolute;
	display: none;
	cursor: pointer;
}











/* VIVOTIF */

section#vivotif div:first-child {
	width: 100%;
	height: 100%;
	top: 0%;
	left: 0%;
	position: absolute;
}

div.prescribe > img {
	width: 100%;
	height: 100%;
	top: 0%;
	left: 0%;
	position: absolute;
}
section#vivotif div:last-of-type {
	width: 97%;
    height: 26%;
    top: 74%;
    left: 2%;
    position: absolute;
    text-align: left;
}

section#vivotif div:last-of-type p:first-child {
	font-size: .75rem;
	font-weight: 400;
    top: 4%;
}

section#vivotif div:last-of-type p:nth-child(2) {
	font-size: .6rem;
    top: 19%;
}

section#vivotif div:last-of-type p:nth-child(3) {
	top: 86%;
    left: 93%;
    font-size: .7rem;
    font-weight: 400;
}

div.hideShow {
	cursor: pointer;
	position: absolute;
}


div.pills {
	height: 23%;
    width: 27%;
    top: 46%;
    left: 8%;
}

div.pills img {
	height: 54%;
    width: 48%;
    top: 51%;
    left: -12%;
}

div.ribbon {
	height: 22%;
    width: 23%;
    top: 46%;
    left: 42%;
}

div.ribbon img{
	height: 100%;
    width: 32%;
    top: 11%;
    left: -14%;
}

div.calendar {
	height: 22%;
    width: 25%;
    top: 46%;
    left: 69%;
}

div.calendar img{
	height: 89.4%;
    width: 48.8%;
    top: -1.6%;
    left: .9%;
}


 div.prescribe:hover, div.pres-buttons:hover, button.menu-link:hover {
	transform: scale(.95);
	transition-delay: .05s;
}

 div.prescribe:active, div.pres-buttons:active, button.menu-link:active {
	transform: scale(.90);
	transition-delay: .08s;
}

div.prescribe {
	position: absolute;
	top: 20%;
	left: 3%;
	width: 10%;
	height: 11%;
	cursor: pointer;
}


.gray-back {
	background-color: #a6a8ab;
}

.vivo-pres-btn {
	top: 19%;
}

.vivo-safety-btn {
	top: 34%;
}
/* 
div.prescribe_white {
	position: absolute;
    top: 7%;
    left: 6%;
    width: 88%;
    height: 86%;
	background-color: white;
	z-index: 10;
} */


div.pres-buttons {
	position: absolute;
    width: 5%;
    height: 11%;
	left: .5%;
	border: #f5004a .05rem solid;
	cursor: pointer;
}


div.pres-buttons p {
	position: absolute;;
	color: #f5004a;
	font-size: .6rem;
    text-align: center;
	font-weight: 400;
	top: 14%;
}


div.prescribe_text p, div.safety_text p {
	font-weight: 400;
	font-size: .8rem;
	text-align: left;
} 

div.safety_text p.safe-header, div#vivo_text p:first-of-type{
	font-weight: bold;
}

/* div.prescribe_text p:nth-of-type(2) {
	top: 15%;
}

div.prescribe_text p:nth-of-type(3) {
	top: 40%;
} */

button.info-closer {
	top: 2.5%;
    left: 95.5%;
    width: 3%;
    height: 5%;
    position: absolute;
}

button.info-closer img {
	pointer-events: all;
	cursor: pointer;
	display: inline-block;
	top: 20%;
	width: 100%;
	height: 100%;
}

/* 
div#vivo-safety p:nth-of-type(2) {
	top: 8%;
}

div#vivo-safety p:nth-of-type(3) {
	top: 37%;
}

div#vivo-safety p:nth-of-type(4) {
	top: 75%;
}
 */


div.safe_overlay_wrapper {
	position: absolute;
	top: 0%;
	left: 0%;
	width: 100%;
	height: 100%;
	z-index: 50;
}

div.safe_overlay {
	position: absolute;
    top: 8%;
    left: 7%;
    width: 86%;
    height: 84%;
    background-color: white;
    box-shadow: 0 0 20px lightgrey;
}

div.safety_text {
	position: absolute;
	width: 100%;
    height: 90%;
    top: 8%;
	overflow: auto;
	padding: 0 4%;
	box-sizing: border-box;
}

div.safety_text p {
	position: relative;
	font-weight: 400;
	font-size: 1.1rem;
	text-align: left;
	line-height: 1.1rem;
	margin-top: 1rem;
}













/* VAXCHORA MENU */

div.vax-menu-item  {
	position: absolute;
	cursor: pointer;
}
div.vax-pills {
	top: 30%;
    left: 13%;
    width: 20%;
    height: 34%;
}

div.packet {
	top: 37%;
    left: 45%;
    width: 12%;
    height: 23%;
}

div.cup {
	top: 34%;
    left: 75%;
    width: 10%;
    height: 28%;
}

div.prescribe {
	position: absolute;
	top: 20%;
	left: 3%;
	width: 10%;
	height: 11%;
	cursor: pointer;
}

section#vaxchora p, section#Vivo_Menu p  {
	position: absolute;
	left: 2%;
	text-align: left;
}

section#vaxchora p:first-of-type {
	top: 80%;
    font-size: 0.8rem;
    font-weight: bold;
    
}
section#vaxchora p:nth-of-type(2) {
	top: 84%;
    font-size: 0.7rem;
    font-weight: 500;
}
section#vaxchora p:nth-of-type(3) {
	top: 96%;
    font-size: 0.65rem;
    font-weight: 500;
    text-transform: uppercase;
    font-weight: bold;
}

section#vaxchora p:nth-of-type(4) {
	left: 93%;
    top: 96%;
    font-size: 0.7rem;
    font-weight: 500;
}


/* PRESCRIBING INFO */

.gray-back {
	background-color: #a6a8ab;

}

div.safe_overlay_wrapper {
	position: absolute;
	top: 0%;
	left: 0%;
	width: 100%;
	height: 100%;
	z-index: 50;
}

div.safe_overlay {
	position: absolute;
    top: 8%;
    left: 7%;
    width: 86%;
    height: 84%;
    background-color: white;
    box-shadow: 0 0 20px lightgrey;
}

div.safety_text {
	position: absolute;
	width: 100%;
    height: 90%;
    top: 8%;
	overflow: auto;
	padding: 0 4%;
	box-sizing: border-box;
}

div.safety_text p {
	position: relative;
	font-weight: 400;
	font-size: 1.1rem;
	text-align: left;
	line-height: 1.1rem;
	margin-top: 1rem;
}
div#vivo_text p:first-of-type, div.safety_text p.safe-header  {
	font-weight: bold;
}

/* div.prescribe_text p:nth-of-type(2), div.safety_text p:nth-of-type(2)  {
	top: 15%;
}

div.prescribe_text p:nth-of-type(3), div.safety_text p:nth-of-type(3)  {
	top: 40%;
}

div.prescribe_text p:nth-of-type(4) {
	top: 80%
} */
/* 
div.safety_text p:nth-of-type(4) {
	top: 55%;
}

div.safety_text p:nth-of-type(5) {
	top: 83%;
} */

div.pres-buttons {
	position: absolute;
    width: 5%;
    height: 11%;
	left: .5%;
	border: #f5004a .05rem solid;
	cursor: pointer;
}


div.pres-buttons p {
	position: absolute;;
	color: #f5004a;
	font-size: .6rem;
    text-align: center;
	font-weight: 400;
	top: 14%;
}

div#vivo_text p{
	font-weight: 400;
	font-size: .93rem;
}

div#vivo_text p:nth-of-type(2) {
	top: 8%;
}

div#vivo_text p:nth-of-type(3) {
	top: 45%;
}
/* 
div#vivo-safety p:nth-of-type(2) {
	top: 8%;
}

div#vivo-safety p:nth-of-type(3) {
	top: 37%;
}

div#vivo-safety p:nth-of-type(4) {
	top: 75%;
} */

.vax-color {
	border: #0091da .05rem solid !important;
	color: #0091da;
}

.vivo-color {
	border: #43b02a .05rem solid !important;
	color: #43b02a;
}


/* VIDEO BUTTONS */

.vax-pres-btn {
	top: 15%;
}

.vax-safety-btn {
	top: 30%;
}

.vivo-pres-btn {
	top: 15%;
}

.vivo-safety-btn {
	top: 30%;
}


/* CHOLERA */

div.cholera-menu-item  {
	position: absolute;
	cursor: pointer;
}

.cholera-menu-item > img, div.prescribe > img, div.arrow > img, div.vax-arrow > img {
	position: absolute;
	top: 0%;
	left: 0;
	width: 100%;
	height: 100%;
}

div.virus {
	top: 39%;
    left: 11.5%;
    width: 19%;
    height: 30%;
}

div.globe {
	top: 37%;
    left: 43%;
    width: 15%;
    height: 30%;
}

div.lady {
	top: 35%;
    left: 72.2%;
    width: 16%;
    height: 37%;
}

section#Vax_Menu p, section#Vivo_Menu p  {
	position: absolute;
	left: 2%;
	text-align: left;
}

section#cholera p:first-of-type {
	left: 3%;
    top: 94%;
    font-size: 0.8rem;
    font-weight: 500;
    
}
/* section#Vax_Menu p:nth-of-type(2) {
	top: 83%;
    font-size: 0.6rem;
    font-weight: 500;
}
section#Vax_Menu p:nth-of-type(3) {
	top: 95%;
    font-size: 0.6rem;
    font-weight: 500;
    text-transform: uppercase;
    font-weight: bold;
}

section#Vax_Menu p:nth-of-type(4) {
	left: 93%;
    top: 96%;
    font-size: 0.7rem;
    font-weight: 500;
} */















/* TYPHOID */


section#typhoid div:nth-child(2) {
	width: 29%;
    height: 47%;
    top: 39%;
    left: 6%;
    border-radius: 50%;
}
section#typhoid div:nth-child(2) img {
	width: 78%;
    height: 111%;
    top: -6%;
    left: -3%;
	position: absolute;
	pointer-events: none;
}

section#typhoid div:nth-child(3) {
	width: 30%;
    height: 42%;
    top: 40%;
    left: 37%;
    border-radius: 50%;
}
section#typhoid div:nth-child(3) img {
	width: 61%;
    height: 65%;
    top: -4%;
    left: 0%;
    position: absolute;
    pointer-events: none;
}

section#typhoid div:nth-child(4) {
	width: 28%;
    height: 47%;
    top: 26%;
    left: 67%;
    border-radius: 50%;
}

section#typhoid div:nth-child(4) img{
	width: 64%;
    height: 124%;
    top: -17%;
    left: -2%;
    position: absolute;
    pointer-events: none;
}

div.hideShow {
	position: absolute;
	cursor: pointer;
}

.gray-back {
	background-color: #a6a8ab;
}

section#typhoid p {
	top: 95%;
	left: 92%;
	font-size: 0.7rem;
    font-weight: 500;

}



/* ALL MENUS */

div.background, section#typhoid div:first-child > img, .vax-menu-item > img, div.prescribe > img, .menu-link img {
	position: absolute;
	top: 0%;
	left: 0;
	width: 100%;
	height: 100%;

}


.menu-link {
	position: absolute;
    width: 8%;
    height: 5%;
    top: 4%;
    left: 47%;
	z-index: 5;
	cursor: pointer;
}