/* DOTS css - author: Jonathan Prugh */

/* general styles */

body {
	margin:0;
	padding:0;
	font-family: 'Roboto', 'Arial', sans-serif;
	font-size:100%;
	line-height:1.4;
	letter-spacing: 1px;
	font-weight:bold;
}


.wrapper {
	width:100%;
}

a {
	color:#000;
}

h1 {
	text-align: center;
	font-size:2.4em;
	margin:0;
	padding-top:10px;
}

h2 {
	font-size:2.2em;
	margin-bottom:20px;
}

p {
	margin-bottom:30px;
	font-size:1.8em;
}

 li {
	margin-bottom:15px;
	font-size:1.8em;
}

li {
	color:#db5264;
}

li span {
	color:#000;
}

/* clearfix */
.cf:before, .cf:after {
	content: "";
	display: table; 
}

.cf:after {
	clear: both; 
}

.cf {
	zoom: 1;
}

/* audio player */

.audio {
	text-align:center; 
	padding-top:10px; 
	background:#db5264; 
	margin-bottom:-15px;
}

.homepage .audio {
	margin-bottom:0;
	background:none;
}

/* navigation */

.nav {
	background:#db5264;
	padding:20px 0;
}

.nav .right-arrow {
	float:right;
	margin:0 20px;
}

.nav .left-arrow {
	float:left;
	margin:0 20px;
}

.sub-nav, .sub-nav-doc {
	width:30%;
	height:800px;
	float:right;
	background: #eee;
	padding-top:30px;
}

.sub-nav ul, .sub-nav-doc ul {
	padding:0;
}

/*
.sub-nav .audio {
	width:30px; 
	height:30px; 
	margin:10px 60px 30px 0; 
	float:right;
}
*/

.sub-nav ul li {
	list-style: none;
	padding:10px 20px;
	background: #1985b6;
	margin:0 20px 20px 20px;
	cursor: pointer;
	color:#b73233;
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px;
	-webkit-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
	-moz-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
	box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
}

.sub-nav-doc ul li {
	list-style: none;
	padding:10px 20px;
	background: #1985b6;
	color:#b73233;
}

.sub-nav ul li.active, .sub-nav-doc ul li.active {
	background: #ccc;
	border-bottom:none;
	font-size: 1.8em;
}

.sub-nav ul li a {
	text-decoration: none;
	color:#fff;
	
}

.sub-nav ul li.active a {
	color:#333;
}

h2.select {
	color:#b73233;
	padding:0 0 0 20px;
	line-height: .8;
	font-size:2em;
}

/* content  */

.content {
	margin:0 auto;
	width:80%;
}

.finish .content {
	text-align: center;
}

.finish .content img {
	width:auto;
}


.content .vid, .protect-myself .content {
	margin:auto;
	width:auto;
	margin-top:30px;
}

/*
.content .audio {
	width:30px; 
	height:30px; 
	float:right; 
	margin:10px 10px 0 0;
}
*/

.has-sub-nav .content {
	width:65%;
	float:right;
}

.has-sub-nav .content p {
	margin-right:5%;
}

.homepage {
	background: url(../images/cover_photo.jpg) top center no-repeat;
	min-height:726px;
}

.homepagedari {
	background: url(../images/teal_bg_adp.png) top center no-repeat;
	min-height:726px;
}

.doctor {
	background: url("../images/doctor.jpg") top right no-repeat;
	min-height:607px;
}

.doctordari {
	background: url(../images/doctor-dari.jpg) top right no-repeat;
	min-height:607px;
}

.information, .before21, .guidelines {
	background: url(../images/doctor_patient.jpg) top center no-repeat;
	min-height:616px;
}

.informationdari, .before21dari, .guidelinesdari {
	background: url(../images/doctor-patient-dari.jpg) bottom center no-repeat;
	min-height:700px;
}

.informationarabic, .before21arabic, .guidelinesarabic {
	background: url(../images/doctor-patient-dari.jpg) bottom center no-repeat;
	min-height:700px;
}

.what-is {
	background: url(../images/what_is_a_cervix.jpg) top right no-repeat;
	min-width:917px;
	min-height:616px;
}

.what-is-es {
	background: url(../images/sp_what_is_a_cervix.jpg) top right no-repeat;
	min-width:917px;
	min-height:616px;
}


.babies, .connects, .find, .find-es, .find-dari, .find-arabic, .find-pashto {
	max-width:659px;
	margin-top:30px;
}

.find, .find-es, .find-dari, .find-arabic, .find-pashto {
	padding-right:3%;
}

.content img {
	width:100%;
}

.biopsy .content img {
	width:329px;
	height:429px;
	float:left;
	margin-right:20px;
}

.colposcopy .content img {
	width:381px;
	height:571px;
	float:left;
	margin-right:20px;
}

.highlight {
	color:#1985b6;
	font-size:1.4em;
}

.side-effects, .protect-yourself, .what-means {
	margin-top:30px;
	  display: -webkit-box;
	  display: -moz-box;
	  display: -ms-flexbox;
	  display: -webkit-flex;
	  display: flex;
	  -webkit-flex-flow: row wrap;
	  justify-content: space-around;
}

.bleeding, .early, .infection, .vaccinated, .protect, .smoking, .family, .safe, .test, .followup, .followup-dari, .followup-arabic, .followup-pashto, .mild, .mild-es, .mild-arabic, .mild-arabic-norm, .mild-pashto, .mild-pashto-norm, .mild-dari, .mild-dari-norm,.abnormal-es, .abnormal, .abnormal-pashto, .abnormal-pashto-norm, .abnormal-arabic, .abnormal-arabic-norm, .abnormal-dari, .abnormal-dari-norm, .problems, .bleedingdari, .bleedingarabic, .bleedingpashto, .bleeding-es, .earlydari, .earlyarabic, .earlypashto, .infectiondari, .infectionarabic, .infectionpashto, .vaccinated-dari, .vaccinated-arabic, .vaccinated-pashto, .protect-dari, .protect-arabic, .protect-pashto, .smoking-dari, .smoking-arabic, .smoking-pashto, .family-dari, .family-arabic, .family-pashto, .safe-dari, .safe-arabic, .safe-pashto, .test-dari, .test-arabic, .test-pashto {
	max-width:360px;
	height:216px;
	position:relative;
	text-align:center;
	padding:20px; 
}

.bleeding:hover, 
.bleeding-es:hover,
.bleedingdari:hover,
.bleedingarabic:hover,
.bleedingpashto:hover,
.early:hover, 
.earlydari:hover,
.earlyarabic:hover,
.earlypashto:hover,
.infection:hover, 
.infectiondari:hover,
.infectionarabic:hover,
.infectionpashto:hover,
.vaccinated:hover, 
.vaccinated-dari:hover,
.vaccinated-arabic:hover,
.vaccinated-pashto:hover,
.protect:hover, 
.protect-dari:hover,
.protect-arabic:hover,
.protect-pashto:hover,
.smoking:hover, 
.smoking-dari:hover,
.smoking-arabic:hover,
.smoking-pashto:hover,
.family:hover,
.family-dari:hover,
.family-arabic:hover,
.family-pashto:hover,
.safe:hover,
.safe-dari:hover,
.safe-arabic:hover,
.safe-pashto:hover,
.test:hover, 
.test-dari:hover,
.test-arabic:hover,
.test-pashto:hover,
.followup:hover, 
.followup-dari:hover,
.followup-arabic:hover,
.followup-pashto:hover,
.mild:hover,
.abnormal:hover,
.mild-es:hover, 
.mild-arabic:hover,
.mild-arabic-norm: hover,
.mild-pashto:hover,
.mild-pashto-norm: hover;
.mild-dari:hover,
.mild-dari-norm: hover,
.abnormal-es:hover,
.abnormal-arabic:hover,
.abnormal-arabic-norm:hover,
.abnormal-pashto:hover,
.abnormal-pashto-norm:hover,
.abnormal-dari:hover,
.abnormal-dari-norm:hover,
.problems:hover {
	cursor:pointer;
}


.bleeding img, 
.bleeding-es img,
.bleedingdari img,
.early img, 
.earlydari img,
.infection img, 
.infectiondari img,
.vaccinated img, 
.vaccinated-dari img,
.vaccinated-pashto img,
.protect img, 
.protect-dari img,
.smoking img, 
.smoking-dari img,
.smoking-pashto img,
.family img,
.family-dari img,
.family-pashto img, 
.safe img,
.safe-dari img,
.safe-pashto img,
.test img, 
.test-dari img,
.test-pashto img,
.followup img,
.followup-dari img,
.followup-pashto img,
.bleedingarabic img,
.earlyarabic img,
.infectionarabic img,
.bleedingpashto img,
.earlypashto img,
.infectionpashto img,
.vaccinated-arabic img,
.protect-arabic img,
.protect-pashto img,
.smoking-arabic img,
.family-arabic img,
.safe-arabic img,
.test-arabic img,
.followup-arabic img,
.followup-pashto img,
.mild img,
.abnormal img,
.mild-es img, 
.mild-arabic img,
.mild-arabic-norm img,
.mild-pashto img,
.mild-pashto-norm img,
.mild-dari img,
.mild-dari-norm img,
.abnormal-es img,
.abnormal-arabic img,
.abnormal-arabic-norm img,
.abnormal-pashto img,
.abnormal-pashto-norm img,
.abnormal-dari img,
.abnormal-dari-norm img,
.problems img {
	width:100%;
}

.bleeding p, 
.bleeding-es p,
.bleedingdari p,
.bleedingarabic p,
.bleedingpashto p,
.early p,
.earlydari p,
.earlypashto p,
.infectiondari p,
.vaccinated-dari p,
.earlyarabic p,
.infectionarabic p,
.infectionpashto p,
.vaccinated-arabic p,
.vaccinated-pashto p,
.mild p,
.abnormal p, 
.mild p, 
.abnormal p,
.mild-es p, 
.mild-arabic p,
.mild-arabic-norm p,
.mild-pashto p,
.mild-pashto-norm p,
.mild-dari p,
.mild-dari-norm p,
.abnormal-es p,
.abnormal-arabic p,
.abnormal-arabic-norm p,
.abnormal-pashto p,
.abnormal-pashto-norm p,
.abnormal-dari p,
.abnormal-dari-norm p,
.problems  p {
	margin-top:-190px;
	-moz-opacity: 0;
	-khtml-opacity: 0;
	opacity: 0;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha"(Opacity=0);
	filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);
	filter:alpha(opacity=0);
	padding:0 20px;
	font-size:1.4em;
}

.mild p, .abnormal p,  .mild-es p, .abnormal-es p, .mild-arabic p, .mild-pashto p, .mild-dari p, .abnormal-arabic p, .mild-arabic-norm p, .mild-pashto-norm p, .mild-dari-norm p, .abnormal-arabic-norm p, .abnormal-pashto p, .abnormal-pashto-norm p, .abnormal-dari p, .abnormal-dari-norm p {
	font-size:1.3em;
}

.infection p, 
.vaccinated p, 
.vaccinated-dari p,
.protect p, 
.protect-dari p,	
.smoking p, 
.smoking-dari p,
.family p,
.family-dari p,
.safe p,
.safe-dari p,
.test p, 
.test-dari p,
.followup p, 
.followup-dari p,
.vaccinated-arabic p,
.protect-arabic p,    
.smoking-arabic p,
.family-arabic p,
.safe-arabic p,
.test-arabic p,
.followup-arabic p,
.vaccinated-pashto p,
.protect-pashto p,    
.smoking-pashto p,
.family-pashto p,
.safe-pashto p,
.test-pashto p,
.followup-pashto p,
.problems-short  p {
	margin-top:-140px;
	-moz-opacity: 0;
	-khtml-opacity: 0;
	opacity: 0;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha"(Opacity=0);
	filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);
	filter:alpha(opacity=0);
	padding: 0 20px;
	font-size:1.4em;
}

.conf {
	text-align:center;
	margin-left:150px;
	margin-right:150px;
	font-style:italic;
	color:#666;
	font-size:1em;
}

/* video */

.vid {
	margin-top:30px; 
	text-align:center;
}


/*

.vid video {
	width:480px;
	height:262px;
}


#video-controls {
    background: #2a2a2a;
    height: 50px;
    width:480px;
    -moz-user-select: none;
    -webkit-user-select: none;
    user-select: none;
    margin:0 auto;
    margin-top:-6px;
}

#play-pause {
	float:left;
	margin:12px 20px 0 20px;
}

#play-pause2 {
	float:left;
	margin:12px 20px 0 20px;
}

#seek-bar, #seek-bar2 {
	float:left;
	margin-top:16px;
	width:700px;
}

.has-sub-nav #seek-bar {
	width:480px;
}

.has-sub-nav #seek-bar2 {
	width:480px;
}

*/

/*
 .vid {
 	margin-top:30px;
	position: relative; 
	padding-bottom: 56.25%; 
	height: 0; 
	overflow: hidden; 
	max-width: 100%;
}

iframe {
	position: absolute; 
	width: 100%; 
	height: 100%;
	max-width:872px;
	max-height:480px;

}
*/

.choices {
	display:none;
}

/*
.choice1 {
	display:block;
}
*/

.info-links {
	text-align: center;
}

.info-links a {
	text-decoration: none;
}

.info-links a:hover {
	text-decoration: underline;
}

/* choose a language */


h1.choose {
	text-align:center;
	font-size:2.6em;
}


h2.choose {
	text-align:center;
	font-size:1.6em;
	margin:15px 0 15px 0;
}

.buttons {
	text-align:center;
	margin-top: 70px;
}

.buttons a {
	color:#000;
	text-decoration:none;   
	font-size:2.4em;
	background:#fff;
	padding:10px 20px;
	-webkit-border-radius: 50px;
	-moz-border-radius: 50px;
	border-radius: 50px;
	-moz-opacity: .7;
	-khtml-opacity: .7;
	opacity: .7;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha"(Opacity=.7);
	filter: progid:DXImageTransform.Microsoft.Alpha(opacity=.7);
	filter:alpha(opacity=.7);
	border:3px solid #db5264;
	background: #f2f2f2;
}

.buttons p {
	font-size:1em;
	padding-bottom:30px;
}

/*
.buttons a.first {
	margin-right:30px;
}

.buttons a.second {
	margin-left:30px;
}
*/

.vert {
	margin-top:0;
	width:80%;
	margin:0 auto;
}

.vert a {
	display:block;
	margin-top:50px;
}

.buttons a:hover{
	-moz-opacity: 1;
	-khtml-opacity: 1;
	opacity: 1;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha"(Opacity=1);
	filter: progid:DXImageTransform.Microsoft.Alpha(opacity=1);
	filter:alpha(opacity=1);
	color:#336699;
}


@media all and (min-width: 950px) {

	.vid iframe {
		width:600px;
		height:330px;
	}
}

@media all and (min-width: 1024px) {

	.vid iframe {
		width:872px;
		height:480px;	
	}

	.has-sub-nav .vid iframe {
		width:596px;
		height:330px;
	}

}


/* end choose a language */