@charset "utf-8";
/** Layout Page Styles **/
.container {
	width: 100%;
}
.sec-inner {
  width: 100%;
  max-width: 1480px;
  height: auto;
  margin: 0px auto 0px auto;
}
.txt-center {
  text-align: center;
}
.sec-flex {
  display: flex;
  flex-wrap: wrap;
}
.visuallyhidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

/** Header Styles **/
.main-header {
  width: 100%;
  height: 109px;
  overflow: hidden;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  border-top: 2px solid #2dd5a0;
  background: #393687;
  box-shadow: 0 4px 6px rgba(0,0,0,0.2);
  box-sizing: border-box;
  transition: all 0.3s;
}
.main-header.tiny {
  height: 68px;
  top: 0;
  border-bottom: 2px solid #347090;
}
.header-inner {
  display: flex;
  width: 100%;
  max-width: 1480px;
  height: auto;
  margin: 0 auto 0 auto;
  padding: 10px 0 14px 0;
  box-sizing: border-box;
}
.main-header.tiny .header-inner {
  padding: 7px 0 10px 0;
}
.menu01 {
  display: flex;
  order: 1;
  flex-basis: 33%;
}
.menu02 {
  display: flex;
  justify-content: flex-end;
  order: 3;
  flex-basis: 35%;
}
.menu-item a {
  display: block;
  margin: 8px auto 0 auto;
	padding: 20px 35px;
  box-sizing: border-box;
	text-decoration: none;
	text-transform: uppercase;
  font-family: 'Oswald', sans-serif;
  font-weight: normal;
  font-size: 1.1em;
  color:#ffffff;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.4);
	transition: color 0.3s linear, background 0.3s linear;	
}
.main-header.tiny .menu-item a {
  margin: 5px auto 0 auto;
  padding: 5px 35px;
}
.menu-item a:hover,
.menu-item a:focus {
	background: #295E70;
  font-weight: 500;
	color: #fff;
}
.logo {
  order: 2;
  flex-basis: 32%;
  box-sizing: border-box;
  text-transform: uppercase;
  font-family: 'Oswald', sans-serif;
  font-weight: 600;
	font-size: 1.25em;
  line-height: 1.35em;
  text-align: center;
  transition: all 0.3s;
}
.main-header.tiny .logo {
  font-size: 1.25em;
}
.main-header .logo img {
  width: 400px;
  height: 88px;
  transition: all 0.3s;
}
.main-header.tiny .logo img {
  width: 232px;
  height: 51px;
}
.header-spacer {
  height: 109px;
}
@media screen and (max-width: 1200px) {
  .logo {
    flex-basis: 22%
  }
  .menu01 { 
    flex-basis: 38%;
  }
  .menu02 {
    flex-basis: 40%;
  }
  .main-header .logo img {
    width: 341px;
    height: 75px;
  }
}
@media screen and (max-width: 1024px) {
  .main-header.tiny .header-inner {
    padding: 10px 0 15px 0;
  }
  .menu-item a {
    margin: 5px auto 0 auto;
    padding: 20px 15px;
    font-size: 1.0em;
  }
  .logo {
    flex-basis: 30%
  }
  .menu01 { 
    flex-basis: 35%;
  }
  .menu02 {
    flex-basis: 35%;
  }
}
@media screen and (max-width: 768px) {
  .main-header {
    width: 100%;
    height: auto;
    overflow: inherit;
    position: relative;
    z-index: 3;
  }
  .header-spacer {
    display: none;
  }
  .main-header.tiny {
    height: auto;
    top: 0;
    background: rgba(255,255,255,0);
    border-bottom: 0;
  }
  .header-inner {
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
  }
  .main-header.tiny .header-inner {
    padding: 0;
  }
  .menu01 {
    order: 2;
    justify-content: center;
    flex-basis: 50%;
  }
  .menu02 {
    order: 3;
    justify-content: center;
    flex-basis: 50%;
  }
  .menu-item a {
    margin: 0;
    font-size: 1.0em;
  }
  .main-header.tiny .menu-item a {
    margin: 0;
  }
  .logo {
    flex-basis: 100%;
    order: 1;
    position: relative;
    z-index: 3;
    padding: 10px 0 0 0;
  }
  .main-header.tiny .logo img {
    width: 200px;
    height: 130px;
  }
}
@media screen and (max-width: 640px) {
  .header-inner {
    display: block;
    margin: 10px 0 0 0;
  }
  .logo img {
    max-width: 75%;
    height: auto;
  }
  .menu01,
  .menu02 {
    display: block;
    text-align: center;
  }
  .menu-item {
    border: 1px solid #cccccc;
    margin-bottom: 2px;
  }
}

/** Slideshow Styles **/
.slideshow {
  width: 100%;
  position: relative;
  background-color: #000000;
  box-sizing: border-box;
  z-index: 1;
}
@media screen and (max-width: 768px) {
  .slideshow {
    margin-top: 0;
  }  
}

/** Subtitle Styles **/
.sub-title {
  font-family: 'Noto Sans', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #404040;
}
.sub-title::before,
.sub-title::after {
  content: "";
  margin: 0 12px 0 12px;
  border-top: 2px solid #404040;
  width: 60px;
  padding-bottom: 4px;
  display: inline-block;
}
.sub-title-lght {
  font-family: 'Noto Sans', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #efefef;
}
.sub-title-lght::before,
.sub-title-lght::after {
  content: "";
  margin: 0 12px 0 12px;
  border-top: 2px solid #efefef;
  width: 60px;
  padding-bottom: 4px;
  display: inline-block;
}

/** Section 1 Styles **/
#who-we-are {
  width: 100%;
  padding: 115px 25px 95px 25px;
  box-sizing: border-box;
  background: #049f98; /* Old browsers */
  background: linear-gradient(to bottom,  #049f98 0%,#393687 100%);
  border-top: 2px solid #ffffff;
  text-align: center;
  color: #efefef;
}
.sec01-inner {
  width: 100%;
  max-width: 1200px;
  height: auto;
  margin: 0px auto 0px auto;
}
.vmv-box {
  margin: 0 0 45px 0;
  padding: 0 0 45px 0;
  box-sizing: border-box;
  border-bottom: 1px solid rgba(255,255,255,0.45);
}
.vmv-box:last-of-type {
  border-bottom: 0;
}
.vmv-box ul {
  display: flex;
  padding: 0;
  list-style-type: none;
  font-weight: bold;
}
.vmv-box ul li {
  display: flex;
  flex: 1;
  justify-content: center;
  align-items: center;
  min-height: 64px;
  padding: 0 25px 0 25px;
  box-sizing: border-box;
  border-right: 1px solid rgba(255,255,255,0.3);
  text-align: center;
}
.vmv-box ul li:last-child {
  border-right: 0;
}
#who-we-are h2 {
  text-transform: capitalize;
  font-size: 1.8em;
  color: #ffffff;
}
#who-we-are img {
  margin: 20px 0 0 0;
}
#who-we-are a {
  color: #000000;
  text-decoration: underline;
}
#who-we-are a:hover,
#who-we-are a:focus {
  color: #393487;
}
@media screen and (max-width: 768px) {
  #who-we-are {
    padding: 115px 45px 75px 45px;
  }
  .vmv-box ul {
    display: flex;
    flex-wrap: wrap;
  }
  .vmv-box ul li {
    flex-basis: 33.3333%;
    border-right: 0;
  }
}
@media screen and (max-width: 640px) {
  .vmv-box ul li {
    flex-basis: 50%;
  }
}

/** Section 2 Styles **/
#what-we-do {
  width: 100%;
  padding: 115px 25px 115px 25px;
  box-sizing: border-box;
  background: #10123b; /* Old browsers */
  background: radial-gradient(ellipse at center,  #384189 0%,#10123b 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  background-attachment: fixed;
  background-size: cover;
  border-top: 2px solid #347090;
  text-align: center;
  color: #efefef;
}
#what-we-do h2 {
  color: #ffffff;
}
#what-we-do hr {
  border: 0;
  height: 1px;
  max-width: 768px;
  margin: 25px auto 25px auto;
  background-image: linear-gradient(to right, rgba(255,255,255, 0), rgba(255,255,255, 0.75), rgba(255,255,255, 0));
}
.feature-area {
  display: flex;
  margin: 0 0 45px 0;
}
.feature {
  flex: 1;
  padding: 0 45px 0 45px;
  text-align: center;
  box-sizing: border-box;
}
.feature ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
.housing-box {
  display: flex;
  flex-wrap: wrap;
  max-width: 1300px;
  margin: 65px auto 0 auto;
}
.hbox01 {
  flex: 1;
  padding: 0 25px 0 0;
  box-sizing: border-box;
}
.hbox02 {
  flex: 1;
  padding: 0 0 0 25px;
  box-sizing: border-box;
}
.hbox03 {
  flex-basis: 100%;
  padding: 15px 0 45px 0;
}
.hbo03 iframe {
  border: 0;
}
.hbox04 {
  flex-basis: 100%;
  margin: 25px 0 0 0;
  padding: 25px 0 0 0;
  border-top: 1px solid rgba(255,255,255,0.5);
}
.hbox05 {
  flex-basis: 100%;
  margin: 25px 0 0 0;
  padding: 25px 0 0 0;
  border-top: 1px solid rgba(255,255,255,0.5);
}
.hbox-rules li {
  margin: 25px 0 25px;
}
.hbox-rules a {
  color: #ffe749;
}
.hbox-rules a:hover,
.hbox-rules a:focus {
  color: #fff6b7;
}
.tg-flex {
  displaY: flex;
}
.tg-item {
  flex: 1;
}
@media screen and (max-width: 1024px) {
  .feature-area {
    flex-wrap: wrap;
  }
  .feature {
    flex-basis: 50%;
  }
  .housing-box {
    display: block;
    text-align: center;
    margin: 65px auto 0 auto;
  }
  .hbox01 {
    padding: 0;
  }
  .hbox02 {
    padding: 0;
  }
}
@media screen and (max-width: 768px) {
  #what-we-do {
    padding: 45px 45px 25px 45px;
  }
  .feature-area {
    display: block;
  }
}

/** Section 3 Styles **/
#donate {
  width: 100%;
  padding: 145px 25px 145px 25px;
  box-sizing: border-box;
  background: #000000 url("img/backdrop02.jpg") no-repeat top center;
  background-attachment: fixed;
  background-size: cover;
  border-top: 1px solid #319996;
  text-align: center;
}
.donate-inner {
  width: 100%;
  max-width: 1200px;
  height: auto;
  margin: 0px auto 0px auto;
  padding: 25px;
  box-sizing: border-box;
  background: rgba(24,86,76,0.85);
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  border-radius: 3px;
  color: #f2f2f2;
}
.donate-inner hr {
  border: 0;
  height: 1px;
  margin: 10px 0px 10px 0px;
  background: #57a596;
}
.btn-area {
  margin: 25px 0 0 0;
}
.donate-btn {
	box-shadow: 0px 1px 0px 0px #f0f7fa;
	background:linear-gradient(to bottom, #384189 5%, #10123b 100%);
	background-color:#10123b;
	border-radius:6px;
	border:1px solid #30af9a;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
  font-family: 'Roboto Condensed', sans-serif;
  font-weight: 700;
	padding:6px 24px;
	text-decoration:none;
	text-shadow:0px -1px 0px #5b6178;
}
.donate-btn:hover,
.donate-btn:focus {
	background:linear-gradient(to bottom, #019ad2 5%, #33bdef 100%);
	background-color:#000000;
  color: #ffffff;
}
.donate-btn:active {
	position:relative;
	top:1px;
}
@media screen and (max-width: 768px) {
  #donate {
    padding: 45px 45px 25px 45px;
  }  
}

/** Section 4 (Our Team) Styles **/
#our-team {
  width: 100%;
  padding: 115px 65px 115px 65px;
  background: radial-gradient(ellipse at center,  #328f95 0%,#10123b 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  border-top: 2px solid #606060;
  text-align: center;
  box-sizing: border-box;
  color: #ffffff;
}
.st-light {
  color: #efefef;
}
#our-team h2 {
  color: #ffffff;
}
.staff-inner {
  width: 100%;
  max-width: 1480px;
  height: auto;
  margin: 0px auto 0px auto;
}
.staff-area {
  display: flex;
  flex-wrap: wrap;
}
.staff {
  flex: 1;
  flex-basis: 33.3333%;
  padding: 25px 65px 55px 65px;
  box-sizing: border-box;
  text-align: center;
}
.staff h3 {
  margin: 15px 0 5px 0;
  font-size: 1.9em;
  color: #ffffff;
}
.staff .title {
  min-height: 64px;
  margin: 0 0 20px 0;
  font-style: italic;
  font-size: 1.2em;
}
.img-circle {
  width: 225px;
  height: 225px;
  border: 3px solid #d4cfca;
  border-radius: 50%;
}
#staff1 {
  z-index: 999;
}
.staff-btn {
  display: inline-block;
  padding: 6px 24px !important;
	box-shadow: 0px 1px 0px 0px #f0f7fa !important;
	background: linear-gradient(to bottom, #384189 5%, #10123b 100%) !important;
	background-color: #10123b !important;
	border-radius: 6px;
	border: 1px solid #30af9a !important;
	cursor: pointer;
	color: #ffffff;
  font-family: 'Roboto Condensed', sans-serif;
  font-weight: 700;
	text-decoration:none;
	text-shadow:0px -1px 0px #5b6178;
  font-size: 1.1em !important;
}
.staff-btn:hover,
.staff-btn:focus {
	background:linear-gradient(to bottom, #019ad2 5%, #33bdef 100%);
	background-color:#000000;
  color: #ffffff;
}
.staff-btn:active {
	position:relative;
	top:1px;
}
.staff-box {
  display: flex;
}
.staff01 {
  flex-basis: 25%;
  text-align: center;
}
.staff02 {
  flex-basis: 75%;
  padding: 25px 65px 25px 0;
  text-align: left;
}
.staff02 span {text-transform: uppercase}
@media screen and (max-width: 1024px) {
  .staff-area {
    flex-wrap: wrap;
  }
  .staff {
    flex-basis: 50%;
  }
}
@media screen and (max-width: 768px) {
  #our-team {
    padding: 45px 45px 25px 45px;
  }
  .staff {
    flex-basis: 100%;
  }
}
@media screen and (max-width: 460px) {
  .staff-area {
    display: block;
  }
}

/** Contact Us Page Styles **/
.contact-thankyou {
  width: 100%;
  padding: 115px 25px 95px 25px;
  box-sizing: border-box;
  background: #049f98; /* Old browsers */
  background: linear-gradient(to bottom,  #049f98 0%,#393687 100%);
  border-top: 2px solid #ffffff;
  text-align: center;
  color: #efefef;
}
.contact-thankyou a {
  color: #ffffff;
  text-decoration: underline;
}
.contact-thankyou a:hover,
.contact-thankyou a:focus {
  color: #bfbbff;
}

/** Lebanon Section Styles **/
.lebanon02 {
	margin: 25px auto;
}
.leb-row01,
.leb-row02 {
	display: flex;
	flex-wrap: wrap;
}
.leb-col {
	flex: 1;
	margin: 0 1%;
}
.leb-col100 {
	max-width: 626px;
	margin: 0 auto 10px auto;
}
.leb-col img,
.leb-col100 img {
	border: 1px solid rgba(255,255,255,0.5);
}
.leb-row02 .leb-col img {
	max-height: 600px;
	margin: 0 auto;
}


/** Footer/Contact Us Section Styles **/
#contact {
  width: 100%;
  background: #000000;
  padding: 115px 25px 115px 25px;
  text-align: center;
  box-sizing: border-box;
  color: #d4cfca;
  font-size: 0.85em;
}
#contact h2 {
  color: #ffffff;
}
.contact-area {
  display: flex;
}
.contact {
  flex: 1;
  padding: 0 45px 0 45px;
  box-sizing: border-box;
  line-height: 1.5em;
}
.contact h3 {
  color: #ffffff;
}
.contact a {
  color: #d4cfca;
}
.contact a:hover {
  color: #ffffff;
}
.social-media a span {
  display: inline-block;
  margin-right: 7px;
  font-size: 2.1em;
}
.social-media .tw a span {
  color: #03a9f4;
}
.social-media .ig a span {
  color: #4d6ace;
}
.social-media .fb a span {
  color: #1877f2;
}
.social-media .li a span {
  color: #007ab9;
}
@media screen and (max-width: 768px) {
  #contact {
    padding: 45px 45px 25px 45px;
  }
  .contact-area {
    display: block;
  }
  .contact {
    padding: 0 25px 45px 25px;
  }
}

/** Modal Popup Styles **/
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 8888; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
.modal-content {
  background-color: #0c0b26;
  margin: 10vh auto; /* 15% from the top and centered */
  padding: 20px;
  border: 1px solid #888;
  border-radius: 3px;
  width: 90%; /* Could be more or less, depending on screen size */
  text-align: left;
  color: #efefef;
}
.modal-content h2 {
  color: #ffffff !important;
}
.modal-content a {
  color: #ffffff;
  text-decoration: underline;
}
.modal-content a:hover,
.modal-content a:focus {
  color: #bfbbff;
}
.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}
.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}
button.button {
 	background:none;
  border-top:none;
  border-right:none;
  border-left:none;
  border-bottom:#02274a 1px solid;
  padding:0 0 3px 0;
  font-size:16px;
  color: #ffffff;
  cursor: pointer;
}
button.button:hover {
  border-bottom:#a99567 1px solid;
  color:#83ffd7;
}

img.Lebanon  {
  height: 636px,;
  width: 848px;
}