@charset "UTF-8";

/* 
  html5doctor.com Reset Stylesheet
  v1.6.1
  Last Updated: 2010-09-17
  Author: Richard Clark - http://richclarkdesign.com 
  Twitter: @rich_clark
*/

html, body, div, span, object, iframe,  h1, h2, h3, h4, h5, h6, p, blockquote, pre,  abbr, address, cite, code,  del, dfn, em, img, ins, kbd, q, samp,  small, strong, sub, sup, var,  b, i,  dl, dt, dd, ol, ul, li,  fieldset, form, label, legend,  table, caption, tbody, tfoot, thead, tr, th, td,  article, aside, canvas, details, figcaption, figure,  footer, header, hgroup, menu, nav, section, summary,  time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}

body {
	line-height: 1.2;
}

article, aside, details, figcaption, figure,  footer, header, hgroup, menu, nav, section {
	display: block;
}

nav ul {
	list-style: none;
}

blockquote, q {
	quotes: none;
}

blockquote:before, blockquote:after,  q:before, q:after {
	content: '';
	content: none;
}

a {
	margin: 0;
	padding: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}

/* change colours to suit your needs */
ins {
	background-color: #ff9;
	color: #000;
	text-decoration: none;
}

/* change colours to suit your needs */
mark {
	background-color: #ff9;
	color: #000;
	font-style: italic;
	font-weight: bold;
}

del {
	text-decoration: line-through;
}

abbr[title], dfn[title] {
	border-bottom: 1px dotted;
	cursor: help;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* change border colour to suit your needs */
hr {
	display: block;
	height: 1px;
	border: 0;
	border-top: 1px solid #cccccc;
	margin: 1em 0;
	padding: 0;
}

input, select {
	vertical-align: middle;
}

/*============================================================
ERIC MEYER RESET
============================================================*/
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
	display: block;
}

body {
	line-height: 1;
}

ol, ul {
	list-style: none;
}

blockquote, q {
	quotes: none;
}

blockquote:before, blockquote:after, q:before, q:after {
	content: '';
	content: none;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}






/*============================================================
GENERAL STYLES
  font-family: 'Oxygen', sans-serif;

    font-family: 'Open Sans', sans-serif;
============================================================*/

#animation_container {

}



body {
	font-family: 'Open Sans', sans-serif;
	line-height: 1.2;
	font-size: 16px;
	font-weight: 400;
}

p {
	font-family: 'Open Sans', sans-serif;
	font-size: 16px;
	font-weight: 400;
	text-align: center;
	margin-bottom: 30px;
}

h1 {
	font-family: 'Oxygen', sans-serif;
	color: #296bc9;
	font-size: 34px;
	font-weight: 700;
	text-align: center;
	margin: 30px 0 20px 0;
}

h2 {
	font-family: 'Oxygen', sans-serif;
	color: #296bc9;
	font-size: 34px;
	font-weight: 400;
	text-align: center;
	margin: 30px 0 20px 0;
}
  
.mynav {
	max-width: 1024px;
	margin: 0 auto;
}

.mycon-lg {
	max-width: 1024px;
	margin: 0 auto;
}

.cta-btn {
	border: thin solid #FFFFFF;
	max-width: 230px;
	margin: 20px auto;
	text-align: center;
	padding: 10px 0;
}

.cta-btn a{
	color: #ffffff;
	text-align: center;
}

.cta-btn2 {
	border: thin solid #69498f;
	max-width: 230px;
	margin: 20px auto;
	text-align: center;
	padding: 10px 0;
}

.cta-btn2 a{
	color: #69498f;
	text-align: center;
}

.cta-btn-wht {
	border: thin solid #ffffff;
	max-width: 230px;
	margin: 20px auto;
	text-align: center;
	padding: 10px 0;
}

.cta-btn-wht a{
	color: #ffffff;
	text-align: center;
}


.underline {
	border-bottom: thin dashed #000000;
	margin: 30px 0 0 0;
}

.btn {
	background-color: #2E76CF;
	color: #ffffff;
}

.btn:hover{
	background-color: #2E76CF;
	color:#000000;
}

/*================================================nav bar*/

@media (max-width:768px){
	
	h1 {
		font-size: 22px;
	}
	
	.mycon-lg {
		max-width: 360px;
		text-align: center;
	}
	


	.mynav {
		display: none;
	}
	
	.logo-m {
		float: left;
	}
	
	.menu-mob {
		float: right;
		margin-top: 80px;
        margin-right: 10px;
	}
	
	.bro-copy {
		margin-bottom: 15px;
		font-size: 12px;
		min-width: 350px;
	}
	
    .box2 {
        height: 700px;
    }
	
	.country-wrapper .country-vid-lhs {
		display: none;
	}
	
	.social {
		display: none;
	}
	
	.social-left {
		display: none;
	}
	
	.social-right {
		display: none;
	}
	
	.ani-info {
		width: 350px;
	}
	
	.dedi{
		display: none;
	}
	
	.footer-ithuba {
		margin: 10px 0;
	}
	
	#first {
		display: none;
	}
	
	#second {
		display: none;
	}
	
	.who-pur {
		display: none;
	}
	#hide {
		display: none;
	}
	
	
	.who-lhs{
		display: none;
	}

	
	.who-rhs {
		display: none;
	}
	
	.who-pur-m {

	background-color: #B085CA;
	margin: 0 auto;
	padding: 30px 0;
	color: #ffffff;
	}
	
	.who-pur-m img{
	text-align: center;
	display: block;
	margin: 0 auto;
	}
	
	.who-blocks {
		display: none;
	}
	
	
	#who-desk {
		display: none;
	}
	
	.who-ch1-m {
		background-color: #74539A;
		padding: 10px;
		color: #ffffff;
	}
	
	.who-ch1-m p{
		margin: 0;
	}
	
	
	ol, ul {
		margin: 0 auto;
		margin-bottom: 10px;
}
	

	
	.header-img-m {
		margin-bottom: -4px;
	}
	
	.box3-m p {
		max-width: 350px;
	}
	
	.share p {
		max-width: 340px;
		margin: 0 auto 15px auto;
	}
	
	.back-purple h1, p{
		max-width: 350px;
		margin: 0 auto 15px auto;
	}
	
	.footer-ithuba {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
	}
	
	.ithuba-copy1, .ithuba-copy2 {
		min-width: 350px;
		margin-bottom: 10px;
	}
	
		.ithuba-copy1, .ithuba-copy2 {
		min-width: 350px;
		margin-bottom: 10px;
	}
	
	
	
}
/*================================================/////mobile nav*/
@media (min-width:768px){
.wdud-box-m {
    display: none;
}

	.mynav-mob {
		display: none;
	}
	
	.wdud-m {
		display: none;
	}
	
	.country-wrapper-m {
		display: none;
	}
	

	
	.social-m {
		display: none;
	}
	
	.dedi-m {
		display: none;
	}
	
	#first-m {
		display: none;
	}

	#second-m, #second-mm, #third-mm {
		display: none;
	}
	
	.who-pur-m {
		display: none;
	}
	
	.who-blocks-m, .header-img-m {
		display: none;
	}


}
/*================================================/////desktop nav*/
.logo {
	float: left;
}

.menu {
	float: right;
	margin-top: 0px;
}

.menu ul{
	display: flex;
	justify-content: flex-end;
	align-items: center;
}
.menu img{
	margin-bottom: 10px;
}

.menu li{

	text-align: center;
	align-self: flex-end;
	padding: 30px 40px 50px 40px;
	border-right: thin dashed #000000;
}

.menu li:last-child{

	text-align: center;
	align-self: flex-end;
	padding: 30px 40px 50px 40px;
	border-right: none;
}

.menu a{
	color: black;
}

.menu a:hover{
	color:#296bc9;
	text-decoration: none;
}

.active {
	background-color: #69498f;
}
.active a {
		color: white;
}

/*================================================//nav bar*/

/*================================================Header*/
.bac-pur {
	background-color: #69498f;
	text-align: center;
	padding: 12px 0;
	margin: 0;
}

.header-img {
	margin: 0;
	padding: 0;
	margin-bottom: -4px;

}

.brou-grp {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	
}

.bro-copy {
	color: #ffffff;
	margin-top: 7px;
	font-family:'Open Sans', 'sans-serif';
	font-weight: 300;
}
/*================================================DEDICATE YOUR FLOWER*/
.dedi {
	background-color: #DFDDD7;
	min-height: 350px;
}
/*================================================WDUD*/

.wdud-box {
	display: flex;
    flex-wrap: wrap;

}

.wdud-box p{
	color: white;
	text-align: center;

}

.box1 {
	background-image: url(images/banner1.png);
	background-position: 50% 50%;
	background-size: cover;
	background-repeat: no-repeat;
	min-width: 334px;
	padding: 471px 10px 0 10px;
	width: 33.3%;
}

.box2 {
		background-image: url(images/banner3.png);
	background-position: 50% 50%;
	background-size: cover;
	background-repeat: no-repeat;
	min-width: 334px;
	padding: 71px 10px 0 10px;
	width: 33.3%;
}
.box2 p {
    color: #b185ca;
}
.box2 .cta-btn {
    border: #b185ca 1px solid;
    color: red;
}
.box2 .cta-btn a {
    color: #b185ca;
    text-align: center;
}
.box3 {
		background-image: url(images/banner2.png);
	background-position: 50% 50%;
	background-size: cover;
	background-repeat: no-repeat;
	min-width: 334px;
	padding: 471px 10px 0 10px;
	width: 33.3%;
}

.box21 {
	display: flex;
	justify-content: center;
	background-image: url(images/images/home/wdud-1.png);
	background-position: 50% 50%;
	background-size: cover;
	background-repeat: no-repeat;
	min-width: 700px;
}





.box212{
	width: 83%;
	min-height: 254px;	
}

.box221 {
	width: 73%;
	min-height: 300px;	
}

.box222 p{
	padding: 100px 30px 0 30px;	
}

.box222 {

}

.box211 {
	padding: 80px 60px 0 10px;
}

.share-icn-btn {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;	
}

.share-icn-tw {
	margin: 0px 30px 0 30px;
}
/*================================================SHARE THE LOVE*/
.share {
	background-image: url(images/home/flower-back.png);
	background-position: 0px 0px;
	background-size: cover;
	background-repeat: no-repeat;
	margin-top: 0px;
	background-color: #F0EFEC;
	padding-bottom: 30px;
}

.share-wrapper {
	display: flex;
	flex-wrap: wrap;
	padding-top: 70px;
	padding-bottom: 0px;

}

.share-lhs li {
	display: inline-block;	
}

.share-lhs {
	width: 60%;	
	min-width: 350px;
}

.share-rhs {
	width: 40%;	
	min-width: 350px;
	margin: 10px auto;
}

.share-rhs img{
	margin: 10px auto;	
	display: block;
}
/*================================================WHAT OUR COUNTRY HAS TO SAY*/

.back-purple {
	background-color: #69498f;
	padding: 30px 0;
	color:  #ffffff;
}

.back-purple h1{
	color:  #ffffff;
}

.country-wrapper {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}

.country-vid-lhs {
	max-width: 500px;
}
/*================================================HELP*/

.boxx1 {
	background-image: url(images/help-1.jpg);
	background-position: 50% 50%;
	background-size: cover;
	background-repeat: no-repeat;
	width: 38%;

}

.boxxx1 {
	display: block;
	position: relative;
	top: 364px;
}

.boxx2 {
	width: 60%;
}

.boxx21 {
	display: flex;
	justify-content: center;
	background-image: url(images/help-2.jpg);
	background-position: 0% 50%;
	background-size: cover;
	background-repeat: no-repeat;
}

.boxx22 {
	display: flex;
	justify-content: center;
	background-image: url(images/help-3.jpg);
	background-position: 00% 50%;
	background-size: cover;
	background-repeat: no-repeat;
}

.boxx222, .boxx211 {
	padding: 60px 0;
}
.boxxx211 {
	position: relative;
	left: -70%;
}
.boxxx222 {
	position: relative;
	right: -82%;
}

/*================================================SOCIAL*/

.back-grey {
	background-color: #dbd8d1;
	padding: 30px 0;
}



.icn-conv {
	text-align: center;
	margin: 0px 0 30px 0;;
}

/*================================================SOCIAL*/
.back-purplee {
	background-color: #69498f;
	color:  #ffffff;
	padding: 10px 0 10px 0;
}

.back-purplee li {
	display: inline;
	float: left;
	font-weight: 300;
	margin-right: 10px;
	font-family: 'Oxygen', sans-serif;
}

.footer-ithuba {
	display: flex;
	
	font-family: 'Oxygen', sans-serif;
	font-size: 13px;
}

.footer-ithuba img{
	margin: 0 15px;
}

.back-purplee li a{
	color: #ffffff;
	font-size: 13px;
}

.footer-wrapper {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	
}
/*================================================
						HELP PAGE
================================================*/

.help-titles {
	font-family: Oxygen, "sans-serif";
	font-size: 34px;
	text-align: center;
	color: #ffffff;
	background-color: #69498f;
	width: 100%
}

.help-wrapper {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;	
	margin: 20px 0;
}

.help-block1, .help-block2, .help-block3 {
	width: 310px;
	padding: 15px;
	margin: 0 auto 0 auto;
}

.help-block2  {
	color: #ffffff;
}

.help-block2 h2{
	color: #ffffff;
}

/*================================================
						HELP PAGE
================================================*/
.gallery-ch {
	width: 310px;
	margin: 15px auto 30px auto;
	
}


.gallery-wrapper {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	
}

.gallery-ch-heading {
	font-family: Oxygen, "sans-serif";
	font-weight: 700;
	font-size: 16px;
	margin: 10px 0;
}

/*================================================
						HELP PAGE
================================================*/


.who-pur {
	display: flex;
	flex-wrap: wrap;
	background-color: #B085CA;
	max-width: 1024px;
	margin: 0 auto;
	padding: 30px 0;
	color: #ffffff;
}

.who-lhs {
	flex-basis: 70%;
	margin-top: 5px;
}

.who-rhs {
	text-align: center;
}

.who-rhs img{
	display: inline-block;
	margin: 0 0	0 70px;
}

.who-blocks {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	
}

.who-comm {
	max-width: 33.3333333%;
	padding: 10px;
}

.who-ch1 {
	background-color: #69498f;
	color: #ffffff;
}

.who-title {
	color: #296bc9;
	text-align: center;
	margin-top: 15%;
}

.who-ch2 {
	background-image: url(images/who/flower.png);
	background-position: 50% 50%;
	background-size: cover;
	min-width: 341px;
	min-height: 248px;
}

.who-ch1 p{
	margin-top: 15%;
}

.share-icn-wa {
	width: 73px;
	height: 28px;
}


@media (min-width:768px){
	.share-icn-wa {
		display: none;
	}
}
/*================================================
						FOOTER
================================================*/
#nomargin {
		margin-bottom: 20px;
	}

.footer-social {
	display: flex;
	justify-content: center;
	margin-top: 15px;
}

.footer-fb {
		margin-right: 20px;
}

.footer-tw {
	margin-right: 20px;
}

.gallery-ch-share {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
}

.gallery-ch-fb {
	margin-right: 15px;
}

.social {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	
}

.myani {
	max-width: 500px;
	float: right;
}

.ani-info {
	width: 500px;
	float: left;
	margin-top: 40px;
}

.counter {
	font-family: Oxygen, sans-serif;
	font-weight: 700;
	font-size: 60px;
	text-align: center;
	background-color: #b185ca;
	line-height: 1;
	padding-bottom: 11px;
	color: #ffffff;
	max-width: 250px;
	margin: 0 auto 10px auto;
}

.wrapper2 {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	
	
}

.box21-m {
	background-color: #745699;
}

.box1-m {
	background-color: #745699;
	padding-bottom: 10px;
	color: #ffffff;
}

.box2-m {
	background-color: #BA90D0;
	
padding-bottom: 10px;
	color: #ffffff;
}

	.box3-m {
	background-color: #745699;
	padding-bottom: 10px;
	color: #ffffff;
}

.boxxx1-m, .boxxx3-m {
	background-color: #B892CF;
	padding: 0px 0 10px 0;
	color: #ffffff;
}

	.boxxx2-m {
	background-color:#745699;
	padding: 0px 0 10px 0;
	color: #ffffff;
	
}

@media (max-width:768px){ 

	.who-title {
		margin: 0px;
	}

	
	#nomargin {
		margin-bottom: 0px;
	}

}
/*===========================VIDEO */
@media screen and (min-width:1336px){
    .header-vid iframe {
    width: 100%;
    height: 769px;
    margin-bottom: -4px;
}

}
@media screen and (min-width:1024px) and (max-width:1280px){
     .header-vid iframe {
    width: 100%;
    height: 720px;
    margin-bottom: -5px;
}
 
}
@media screen and (min-width:601px) and (max-width:1023px){
     .header-vid iframe {
    width: 100%;
    height: 434px;
}

}
@media screen and (max-width:600px){
      .header-vid iframe {
    width: 100%;
    height: 202px;
    margin-bottom: -4px;
}
 
}

.box11 {
	background-image: url(images/help1.jpg);
	background-position: 50% 50%;
	background-size: cover;
	background-repeat: no-repeat;
	min-width: 334px;
	padding: 471px 10px 0 10px;
	width: 33.3%;
}

.box22 {
		background-image: url(images/help2.jpg);
	background-position: 50% 50%;
	background-size: cover;
	background-repeat: no-repeat;
	min-width: 334px;
	padding: 18px 10px 0 10px;
	width: 33.3%;
}
.box22 p {
    color: #b185ca;
}
.box22 .cta-btn {
    border: #b185ca 1px solid;

}
.box22 .cta-btn a {
    color: #b185ca;
    text-align: center;
}
.box33 {
		background-image: url(images/help3.jpg);
	background-position: 50% 50%;
	background-size: cover;
	background-repeat: no-repeat;
	min-width: 334px;
	padding: 471px 10px 0 10px;
	width: 33.3%;
}
@media (max-width: 768px){
.box22 {
    height: 700px;
}
 .wdud-box {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}   
    
}