charset "UTF-8";
/* CSS Document */

html {
}

/*Global*/	

body {
	font-family:"Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
	font-weight:lighter;
	margin: -4px 0px -4px 0px;
	background-color: #eeebe7;
	overflow-x: hidden;
	}
/*text styles*/

	
h1 {
	font-family:"Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
	font-weight:lighter;
	font-size: 300%;
	color: #fff;
	text-align:center; 
	margin: 0;
	
	}	
	
h2 {
	font-family:"Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
	font-size: 45px;
	color: #993399;
	text-align:center; 
	margin-top: 0;
	margin-bottom: 30px;
	}	
	
h3 {
	color:#ffffff;  
	font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
    font-size: 25px;
    text-align: left;
	}
	
h4 {
	color:#ffffff;  
	font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
    font-size: 22px;
    text-align: left;
	font-weight:lighter;
	margin-left:20px;
	}
	
h5 {
	color:#ffffff;  
	font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
    font-size: 22px;
    text-align: left;
	font-weight:lighter;
	margin-left:20px;
	}

		
p {
	font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
    font-size: 18px;
    text-align: left;
}

	ul {
	font-family:"Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;  
	font-weight: lighter;
	font-size:18px;
}


}

ol.list2col {
	float: left; 
	width: 100%; 
	margin: 0 0 1em 0;
	font-family:"Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;  
	font-weight: lighter;
	list-style-type: lower-alpha;
}

ol.list2col li {
	float: left; 
	width: 47%;
	margin:1%;
	padding:1%;
	font-family:"Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
	font-size:18px;		
	color: black;
	font-family:"Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;  
	font-weight: lighter;
	list-style-type: lower-alpha;

}
	
	/*sections*/
	
	/*Index*/

.container_logo {
	margin-top: 0px;
	top: 0px;
	position: fixed;
	left: 43%;
	z-index: 9999;
	padding-bottom:20px;
	}


#index_1 {
	width:100%;
	padding-top:1%;
	height:99vh; 
	clear:both;
		
}

#index_poverty {
	background:url(img/poverty.png);
	background-size:cover;
	background-repeat:no-repeat;
	background-position:top;
	width:100%;
	height:98vh; 
	padding-top:1%;
	clear:both;
	
}

#index_poverty2 {
	background:#FFE1E1;
	background-repeat:no-repeat;
	background-position:center;
	width:100%;
	height:98vh; 
	padding-top:1%;
	clear:both;
	
}


video#genderchange {
width: 95%;
min-width: 400px;
padding-top:10%;
padding-left: 10px;
}

#iframe_mobile {
	display: none;
}


#index_equal {
	background:url(img/equal1.png) 100%;
	background-size:cover;
	background-repeat:no-repeat;
	background-position:center;
	width:100%;
	height:98vh; 
	padding-top:1%;
	clear:both;
}

#index_equal2 {
	background:url(img/equal2.png) 100%;
	background-repeat:no-repeat;
	background-position:top;
	background-size:cover;
	width:100%;
	height:98vh; 
	padding-top:1%;
	clear:both;
}

#index_inequality {
	background:url(img/inequality.png);
	background-size:cover;
	background-repeat:no-repeat;
	background-position:center;
	width:100%;
	height:98vh; 
	padding-top:1%;
	clear:both;
}
	
	/*end of Index*/
	
	
	/*Social*/

#social_HIV 	{
	background:url(img/HIV.JPG);
	background-size:cover;
	background-repeat:no-repeat;
	background-position:top;
	width:100%;
	height:98vh; 
	padding-top:1%;
	clear:both;
	
}

#maternal {
	background:url(img/maternal.png);
	background-size:cover;
	background-repeat:no-repeat;
	background-position:bottom;
	width:100%;
	height:98vh; 
	padding-top:1%;
	clear:both;
	
}

#education {
	background:url(img/education2.JPG);
	background-size:cover;
	background-repeat:no-repeat;
	background-position:bottom;
	width:100%;
	height:98vh; 
	padding-top:1%;
	clear:both;
}



#iframe_video {
    left: 0;
    width: 100%;
    height: 380px;
    margin-left:1%;
	margin-right:1%;
	margin-bottom:1%;
	padding:1%;
	margin-top:15%;
}

#education2 {
	background:#FCDEDE;
	background-repeat:no-repeat;
	background-position:center;
	width:100%;
	height:98vh; 
	padding-top:1%;
	clear:both;
	
}

#education3 {
	background:#FCDEDE;
	background-repeat:no-repeat;
	background-position:center;
	width:100%;
	height:98vh; 
	padding-top:1%;
	clear:both;
	
}


#discrimination {
	background:url(img/discrimination.png);
	background-size:cover;
	background-repeat:no-repeat;
	background-position:top;
	width:100%;
	height:98vh; 
	padding-top:1%;
	clear:both;
}

#discrimination2 {
	background:url(img/discrimination2.png);
	background-size:cover;
	background-repeat:no-repeat;
	background-position:bottom;
	width:100%;
	height:98vh; 
	padding-top:1%;
	clear:both;
}

#discrimination3 {
	background:url(img/discrimination3.png);
	background-size:cover;
	background-repeat:no-repeat;
	background-position:top;
	width:100%;
	height:98vh; 
	padding-top:1%;
	clear:both;
}

#CSE {
	background:url(img/CSE.png);
	background-size:cover;
	background-repeat:no-repeat;
	background-position:top;
	width:100%;
	height:98vh; 
	padding-top:1%;
	clear:both;
}


#GBV {
	background:url(img/GBV.jpg);
	background-size:cover;
	background-repeat:no-repeat;
	background-position:center;
	width:100%;
	height:98vh; 
	padding-top:1%;
	clear:both;
}
			
			
	/*end of social*/
	
	/*economical*/
	

#economic1 {
	background:url(img/economic1.png);
	background-size:100%;
	background-repeat:no-repeat;
	background-position:center;
	width:100%;
	height:100vh; 
	padding-top:1%;
	clear:both;
}


#economic2 {
	background:url(img/economic2.png);
	background-size:100%;
	background-repeat:no-repeat;
	background-position:center;
	width:100%;
	height:99vh; 
	padding-top:1%;
	clear:both;
}

#eco_empowerment {
	background:url(img/eco_empowerment.png);
	background-size:cover;
	background-repeat:no-repeat;
	background-position:center;
	width:100%;
	height:98vh; 
	padding-top:1%;
	clear:both;
}

#education2 {
	background:#FCDEDE;
	background-repeat:no-repeat;
	background-position:center;
	width:100%;
	height:98vh; 
	padding-top:1%;
	clear:both;
	
}

#HIV_case {
	background:#FCDEDE;
	background-repeat:no-repeat;
	background-position:center;
	width:100%;
	height:100vh; 
	padding-top:1%;
	clear:both;
	
}
		/*end of economic section*/
		
		/*political*/

#political1 {
	background:url(img/political1.png);
	background-size:cover;
	background-repeat:no-repeat;
	background-position:center;
	width:100%;
	height:98vh; 
	padding-top:1%;
	clear:both;
}

#political2 {
	background:url(img/Political2.png);
	background-size:cover;
	background-repeat:no-repeat;
	background-position:center;
	width:100%;
	height:98vh; 
	padding-top:1%;
	clear:both;
}


#peace {
	background:url(img/Peace.png);
	background-size:cover;
	background-repeat:no-repeat;
	background-position:center;
	width:100%;
	height:98vh; 
	padding-top:1%;
	clear:both;
}


/*recommendations*/

.reco {
	width:100%;
	height:auto;
	padding-top:1%;
	clear:both;
		
}

.reco p {
	font-size:17px;
}

#column1 {
	width:45%
	height:auto;
	float:left;
	padding:2%;
	display:inline;
}

#column2 {
	width:45%
	height:auto;
	float:right;
	padding:2%;
	display:inline;	
}

.container_RE {
	width:80%;
	height:auto;
	clear:both;
	left:10%;
}

/*components*/

.wrapper {
	width:100%;
	align-self:center;
	margin-left:2%;
}

.wrapper2 {
	width:88%;
	align-self:center;
	margin-left:10%;
}
.right {
	float:right;
	width:50%;
	
	}
	 
.right40 {
	float:right;
	width:40%;

	
	} 

.right60 {
	float:right;
	width:60%;
	
	} 

/*Sharing/Social Media slide*/	

.footer{
	height: 250px;
	margin: 20px;
	margin-top: 1%;
	overflow: hidden;
	clear:both;
}
	
	.sm_wrapper {
	margin-top:2%;
	margin-left:70%;
	width: 500px;
	align-self:center;
	align-content:center;
	
}

/*end of the sharing footer*/


.left {
	float:left;
	width:50%;
     }
	 
	 
.left40 {
	float:left;
	width:40%;
     }
	 
.left60 {
	float:left;
	width:60%;
     }

.top_header {
	margin-top:0px;
	position:fixed;
	z-index: 3;
	width:100%;
	background-color:#959595;
	overflow:hidden;
	align-self:left;
	display: inline-block;
	clear:both;
}

.sm-menu {
    float:right;
    top:1px;
    position: relative;
	right:6%;
}

.carousel{
    overflow:hidden;
    width:80%;
	height: 60vh;
	margin-left:5%;
}
.panes{
    list-style:none;
    margin:0;
    padding:0;
    position:relative;
    width:300%; /* Number of panes * 100% */
    overflow:hidden; /* This is used solely to clear floats, it does not add functionality. */
     
    -moz-animation:carousel 50s linear infinite;
    -webkit-animation:carousel 50s linear infinite;
	animation:carousel 50s linear infinite;
}
	.panes:hover{
		-moz-animation-play-state:paused;
		-webkit-animation-play-state:paused;
		animation-play-state:paused;
	}
.panes > li{
    position:relative;
    float:left;
    width:33%; /* 100 / number of panes */
}
.carousel img{
    display:block;
    width:100%;
    max-width:100%;
	
}


@-moz-keyframes carousel{
    0%    { left:0; }
    11%   { left:0; }
    12.5% { left:-100%; }
    23.5% { left:-100%; }
    25%   { left:-200%; }
    36%   { left:-200%; }
    37.5% { left:-300%; }
    48.5% { left:-300%; }
    50%   { left:-400%; }
    61%   { left:-400%; }
    62.5% { left:-300%; }
    73.5% { left:-300%; }
    75%   { left:-200%; }
    86%   { left:-200%; }
    87.5% { left:-100%; }
    98.5% { left:-100%; }
    100%  { left:0; }
}

@-webkit-keyframes carousel{
    0%    { left:0; }
    11%   { left:0; }
    12.5% { left:-100%; }
    23.5% { left:-100%; }
    25%   { left:-200%; }
    36%   { left:-200%; }
    37.5% { left:-300%; }
    48.5% { left:-300%; }
    50%   { left:-400%; }
    61%   { left:-400%; }
    62.5% { left:-300%; }
    73.5% { left:-300%; }
    75%   { left:-200%; }
    86%   { left:-200%; }
    87.5% { left:-100%; }
    98.5% { left:-100%; }
    100%  { left:0; }
}

@keyframes carousel{
    0%    { left:0; }
    11%   { left:0; }
    12.5% { left:-100%; }
    23.5% { left:-100%; }
    25%   { left:-200%; }
    36%   { left:-200%; }
    37.5% { left:-300%; }
    48.5% { left:-300%; }
    50%   { left:-400%; }
    61%   { left:-400%; }
    62.5% { left:-300%; }
    73.5% { left:-300%; }
    75%   { left:-200%; }
    86%   { left:-200%; }
    87.5% { left:-100%; }
    98.5% { left:-100%; }
    100%  { left:0; }
}

.container_h1 {
    margin: 0 auto;
	margin-top: 3%;
	opacity: 0.8;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=80);
	background-color: #80379B;
	width: 100%;
	clear:both;
	left:1%;
	padding:1em;
	
	}
	

.container_h2 {
    margin: 0 auto;
	margin-top: 3%;
	opacity: 0.7;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
	background-color: #ffffff;
	width: 100%;
	clear:both;
	}




.button_down {
   position:fixed;
	left:85%;
	top:79%;
	width:70px;
	height:70px;
	background:url(img/arrow_down.png);
	background-size:100%;
	background-repeat:no-repeat;
	background-position:top center;
	font-size:1px;	
	color:transparent !important;
	text-shadow:none !important;
	border:none !important;
	box-shadow:none !important;
	padding:20px;
	
	
	}
	

.text-box {
	background-color:#ffffff;
	opacity: 0.7;
	width: 80%;
	height:auto;
	margin-left:1%;
	margin-right:1%;
	margin-bottom:1%;
	padding:1%;
	margin-top:15%;
}

.text-box2 {
	background-color:#ffffff;
	opacity: 0.7;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
	width: 47%;
	height:auto;
	margin:1%;
	padding-left:1%;
	float: left;
	margin-top:15%;
}

.text-box_gbv {
	background-color:#ffffff;
	opacity: 0.7;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
	width: 47%;
	height:auto;
	margin:1%;
	padding-left:1%;
	float: left;
	margin-top:32%;
}

.text-box3 {
	background-color:#ffffff;
	opacity: 0.7;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
	width: 30%;
	height:auto;
	margin:1%;
	padding-left:1%;
	float: left;
	margin-top:2%;
	padding-top:2%;
}
.text-box3_i {
	background-color:#ffffff;
	opacity: 0.7;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
	width: 75%;
	height:auto;
	margin:1%;
	padding-left:1%;
	float: right;
	margin-top:2%;
}

.text-box3_i {
	width: 30%;
	height:auto;
	margin:1%;
	padding-left:1%;
	float: left;
	margin-top:2%;
	background:none;
}
.text-box_equal {
	background-color:#ffffff;
	opacity: 0.7;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
	width: 55%;
	height:auto;
	margin:1%;
	padding-left:1%;
	float: right;
	margin-top:15%;
	margin-left:30%;
}

.text-box_peace {
	background-color:#ffffff;
	opacity: 0.7;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
	width: 55%;
	height:auto;
	margin:1%;
	padding-left:1%;
	float: right;
	margin-top:25%;
	margin-right:20%;
}

.text-box_girls {
	background-color:#ffffff;
	opacity: 0.7;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
	width: 55%;
	height:auto;
	margin:1%;
	padding-left:1%;
	float: right;
	margin-top:45%;
	margin-right:20%;
}

.text-box_reco {
	width: 90%;
	height:auto;
	margin-left:1%;
	margin-right:1%;
	margin-bottom:1%;
	padding:1%;
	margin-top:5%;
	font-size:18px;
}

.image_mobile {
	display: none;
}



/* Navigation Menu - Background */
.navigation {
  /* critical sizing and position styles */
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
  
  /* non-critical appearance styles */
  list-style: none;
  background: #993399;
  opacity:0.7;
}

/* Navigation Menu - List items */
.nav-item {
  /* non-critical appearance styles */
  width: 200px;
  border-top: 1px solid #111;
  border-bottom: 1px solid #993399;
}

.nav-item a {
  /* non-critical appearance styles */
  display: block;
  padding: 1em;
  background: #993399;
  color: #fff;
  font-size: 1.2em;
  text-decoration: none;
  transition: color 0.2s, background 0.5s;
}

.nav-item a:hover {
  color: #fff;
  background: linear-gradient(135deg, rgba(0,0,0,0) 0%,rgba(222, 20, 67, 1) 100%);
}

/* Site Wrapper */
.site-wrap {
  /* Critical position and size styles */
  min-height: 100%;
  min-width: 100%;
  background-color: white; /* Needs a background or else the nav will show through */
  position: relative;
  top: 0;
  bottom: 100%;
  left: 0;
  z-index: 1;
  
  /* non-critical apperance styles */
  
  background-image: linear-gradient(135deg, rgb(254,255,255) 0%,rgb(221,241,249) 35%,rgb(160,216,239) 100%);
  background-size: 300%;
}

/* Nav Trigger */
.nav-trigger {
  /* critical styles - hide the checkbox input */
  position: absolute;
  clip: rect(0, 0, 0, 0);

}

label[for="nav-trigger"] {
  /* critical positioning styles */
  position: fixed;
  left: 15px; top: 15px;
  z-index: 2;
  
  /* non-critical apperance styles */
  height: 30px;
  width: 30px;
  cursor: pointer;
 
}


/* Make the Magic Happen */
.nav-trigger + label, .site-wrap {
  transition: left 0.2s;
}

.nav-trigger:checked + label {
  left: 215px;
}

.nav-trigger:checked ~ .site-wrap {
  left: 200px;
  box-shadow: 0 0 5px 5px rgba(0,0,0,0.5);
}

/* Make the Magic Happen */
.nav-trigger + label, .site-wrap {
  transition: left 0.2s;
}

.nav-trigger:checked + label {
  left: 215px;
}

.nav-trigger:checked ~ .site-wrap {
  left: 200px;
  box-shadow: 0 0 5px 5px rgba(0,0,0,0.5);
}

body {
    /* Without this, the body has excess horizontal scroll when the menu is open */
  overflow-x: hidden;
}

/* Additional non-critical styles */

h1, h3, p {
  max-width: 1200px;
  margin: 0 auto 1em;
}

code {
    padding: 2px;
    background: #ddd;
}

/* Micro reset */
*,*:before,*:after{
	-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;margin:0;padding:0;
}

html, body { 
	height: 100%; 
	width: 100%; 
}