/*
Theme Name: Family Life 2015
Theme URI: 
Author: Jeff Passetti
Author URI: 
Description: 
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: 
Text Domain: FamilyLife2015
*/
html {
    height: 100%;
  font-size: 16px;
  font-family: "franklin-gothic-urw-cond", Arial, sans-serif;
  line-height: 1.6;
  color: #222222;
  text-rendering: optimizeLegibility;
  -webkit-font-feature-settings: "kern", "liga";
  -moz-font-feature-settings: "kern", "liga";
  font-feature-settings: "kern", "liga";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  hyphens: auto; }

body {
 background-color: black;  
 height: 100%;
}

h1, h2, h3, h4, h5, h6, p {
    font-weight: 400;
    padding: 0px;
    margin: 0px;
}

.clearfix {
    clear: both;
}

.pop-container {
    width: 100%;
    background-color: rgba(0,0,0,.8);
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 9999;
    opacity: 0;
    display: none;
    overflow-y: scroll;
    /*overflow-x: hidden;*/
}

.pop-center {
    text-align: center;
}

.pop-right {
    color: white;
    text-align: right;
}

.pop-bar {
    width: 50%;
    height: 2px;
    background-color: white;
    float: right;
    margin-bottom: 10px;
}

ul.pop-primary, ul.pop-secondary {
    list-style: none;
}

ul.pop-primary li {
    line-height: 24px;
    margin-bottom: 10px;
}

ul.pop-primary li a {
     font-family: "franklin-gothic-urw-cond", Arial, sans-serif;
     font-size: 24px;
     color: white;
     text-transform: uppercase;
     font-weight: bold;
}

ul.pop-secondary li {
    margin-bottom: 8px;
}

ul.pop-secondary li a {
    font-family: Georgia;
    font-size: 20px;
    font-style: italic;
    color: white;
}

#closePopBtn {
    font-size: 24px;
    font-weight: bold;
    color: white;
}

.closePopParagraph {
    margin-bottom: 20px;
}

.header-container {
    width: 100%;
    height: 60px;
    line-height: 60px;
    /*background-color: rgba(0,0,0,.4);*/
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 500;
    
}
.error404 .header-container {
 position: relative;   
}



.wordmark > h1 {
    font-family: "franklin-gothic-urw-cond", Arial, sans-serif;
    font-size: 20px;
    color: white;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 4px;
    padding: 0px;
    margin: 0px;
    line-height: 60px;
    text-align: left;
}

.wordmark h1 span {
    font-weight: 700;
}

.wordmark a {
    color: white;
}

.single-project-title h2 {
font-family: Georgia;
font-size: 36px;
font-weight: 300;
font-style: italic;
color: white;
}

ul.utility-nav {
    text-align: right;
}

ul.utility-nav li {
 list-style: none;
 display: inline-block;
 margin-left: 20px;
}

ul.utility-nav li a {
    font-size: 20px;
    color: white;
}

.section-padding {
    padding-top: 80px;
    padding-bottom: 80px;

}

/*--------- showcase ------*/

#homeShowcase {
 position: relative;   
 color: white;

}

.homeShowcaseTint {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 500px;
    background-color: teal;
    opacity: 0.5;
    z-index:0;
}

.showcase-left {
    text-align: right;
    position: relative;
}

.showcase-left h2 {
    font-family: "franklin-gothic-urw-cond", Arial, sans-serif;
  font-size: 72px;
  line-height: 72px;
  
  padding: 0px;
  margin: 0px;
  margin-top: -36px;
  font-weight: 700;
  position: absolute;
  top: 50%;
  left: -5px;
  display: block;
  width: 100%;
}

ul.showcase-right-list, ul.showcase-right-list li {
padding: 0px;
margin: 0px;
list-style: none;
}

ul.showcase-right-list {
    position: relative;
}

ul.showcase-right-list li {
   width: 100%;
height: 72px;
position: absolute;
top: 0px;
left: 0px;
display:none;
opacity: 0;
 padding: 0px;
  margin: 0px;
}

ul.showcase-right-list li a {
  font-family: "franklin-gothic-urw-cond", Arial, sans-serif;
  padding: 0px;
  margin: 0px;
  color: white;
  display: block;
  line-height: 72px;
  text-transform: lowercase;
}

ul.showcase-background-slides {
    width: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 0;
    list-style: none;
}

ul.showcase-background-slides li {
     background-repeat: no-repeat;
 background-size: cover;
 background-position: center center;
 width: 100%;
 position: absolute;
 top: 0px;
 left: 0px;
 /*display: none;*/
}

.showcase-credit {
    position: absolute;
    bottom: 30px;
    right: 30px;
    z-index: 9999;
    background-color: rgba(0,0,0,.6);
    padding: 8px;
    color: white;
    font-family: "franklin-gothic-urw-cond", Arial, sans-serif;
    text-transform: uppercase;
    letter-spacing: 1.5px;
}


/* ---- welcome ----- */



#homeWelcome {
    background-color: white;
    text-align: center;
}

.welcome-padding {
    padding-top: 160px;
    padding-bottom: 160px;
}

.welcome-black-line {
    width: 20%;
    margin: 30px auto;
    height: 2px;
    background-color: black;
}

section#homeWelcome h2 {
    font-family: "franklin-gothic-urw-cond", Arial, sans-serif;
    font-size: 60px;
    text-transform: uppercase;
    font-weight: bold;
}

section#homeWelcome p {
    font-family: "franklin-gothic-urw-cond", Arial, sans-serif;
    font-size: 28px;
    font-weight: 400;
}




p.welcome-cta {
    margin-top: 30px;
}

p.welcome-cta a {
font-family: "franklin-gothic-urw-cond", Arial, sans-serif;
text-transform: uppercase;
font-size: 24px;
color: white;
background-color: black;
padding: 10px 20px;
font-weight: 700;
}

/* ---- home: story blocks ----- */
section#stories {
/*background-color: orange;*/
/*padding-top: 60px;
padding-bottom: 60px;*/
}

ul#storyblocks {
padding: 0px;
margin: 0px;
width: 100%;
height: auto;
background-color: black;
color: white;
}

ul#storyblocks li {
    float: left;
    cursor: pointer;
}

ul#storyblocks:after {
    content: '';
  display: block;
  clear: both;
}



.grid-sizer {
    width: 33.333%;
}



ul#storyblocks li.block {
padding: 0px;
margin: 0px;
display: block;
list-style: none;
/*background-color: rgba(255,255,255,.5);*/
font-family: "franklin-gothic-urw-cond", Arial, sans-serif;
position: relative;
text-align: center;
}

ul#storyblocks li.is-loading {
  background-color: black;
  background-image: url('http://familylifeproject.syr.edu/wp-content/uploads/2015/06/loading.gif');
  background-position: center center;
  background-repeat: no-repeat;
}

ul#storyblocks li.is-broken {
  background-image: url('http://desandro.github.io/imagesloaded/assets/broken.png');
  background-color: #be3730;
  width: 120px;
  background-position: center center;
  background-repeat: no-repeat;
}

ul#storyblocks li.block article {
/*background-color: red;*/
position: relative;
top: 0px;
left: 0px;
z-index: 5;
opacity: 0;
}

ul#storyblocks li.block-countries article, ul#storyblocks li.block-schools article {
opacity: 1;
}

ul#storyblocks li.block h3 a {
font-family: "franklin-gothic-urw-cond", Arial, sans-serif;
font-size: 28px;
text-transform: uppercase;
font-weight: 700;
color: white;
padding-left: 10px;
padding-right: 10px;
}

ul#storyblocks li.block h4 {
font-family: "franklin-gothic-urw-cond", Arial, sans-serif;
font-size: 18px;
color: white;
padding-top: 10px;
}

ul#storyblocks li.block h5 {
font-family: "franklin-gothic-urw-cond", Arial, sans-serif;
font-size: 18px;
color: white;
font-style: italic;
padding-bottom: 10px;
}

.block-bg {
background-color: rgba(0,128,128,.6);
width: 100%;
position: absolute;
top: 0px;
left: 0px;
z-index: 2;
opacity: 0;
}

.block-dark-bg {
  background-color: rgba(0,0,0,.6);
width: 100%;
position: absolute;
top: 0px;
left: 0px;
z-index: 2;
opacity: 0; 
display: none;
}

.block-image {
    width: 100%;
    background-repeat: no-repeat;
background-size: cover;
background-position: center center;
position: absolute;
top: 0px;
left: 0px;
z-index: 1;
display: none;
}

ul#storyblocks li.block-countries, ul#storyblocks li.block-schools {
/*background-color: teal;*/
text-transform: uppercase;
}

ul#storyblocks li.block-countries h3, ul#storyblocks li.block-schools h3  {
font-size: 150px;
line-height: 150px;
font-weight: bold;
padding: 0px;
margin: 0px;
}

ul#storyblocks li.block-countries h4, ul#storyblocks li.block-schools h4 {
font-size: 36px;
line-height: 36px;
padding: 0px;
margin: 0px;
}

ul#storyblocks li article {
width: 100%;
position: absolute;
top: 0px;
left: 0px;
z-index: 5;
display: none;
opacity: 0;
}

/* ----- single project------ */

.single-project-container {
    position: relative;
}

.single-project-bg {
width: 100%;
position: absolute;
top: 0px;
left: 0px;
z-index: -1;
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
opacity: 0.6;
}

.single-project-title {
width: 100%;
/*background-color: red;*/
position: absolute;
top: 0px;
left: 0px;
z-index: 10;
text-align: center;
}

.single-project-title h1 {
font-family: "franklin-gothic-urw-cond", Arial, sans-serif;
font-size: 72px;
line-height: 72px;
text-transform: uppercase;
color: white;
margin-bottom: 20px;
font-weight: 700;
text-shadow: 1px 1px rgba(0,0,0,.6);
letter-spacing: 1.5px;
}

.single-project-title h2 {
font-family: Georgia;
font-size: 36px;
font-weight: 300;
font-style: italic;
color: white;
margin-bottom: 15px;
}

.single-project-title h3, .single-project-title h3 a {
font-family: Georgia;
font-size: 20px;
font-weight: 300;
color: white;
}

#singleSlideDown {
      width: 50px;
    height: 50px;
    display: block;
    cursor: pointer;
    /*background-color: red;*/
     line-height: 50px;
    /* margin: 0px auto;*/
     text-align: center;
      font-size: 28px;
    border: 2px solid white;
    color: white;
    -webkit-border-radius: 25px;
-moz-border-radius: 25px;
border-radius: 25px;
margin: 60px auto;
}

.single-caption-container {
    background-color: white;
    padding-top: 60px;
    padding-bottom: 60px;
    font-family: Georgia;
    font-size: 24px;
    line-height: 42px;
    font-style: italic;
}

/* ---- about ----- */
.page-container {
    background-color: white;
    padding-top: 80px;
    padding-bottom: 80px;
}

.page-showcase {
    width: 100%;
}

.page-showcase img {
    width: 100%;
    height: auto;
}

.page-container h2 {
    font-family: "franklin-gothic-urw-cond", Arial, sans-serif;
text-transform: uppercase;
font-size: 36px;
font-weight: 700;
text-align: center;
margin-bottom: 20px;
}

.page-container p {
    font-family: Georgia;
font-size: 20px;
line-height: 30px;
margin-bottom: 20px;
font-weight: 300;
}

/* ----- map section ------ */

.map-container {
    background-color: white;
    padding-top: 80px;
    padding-bottom: 80px;
    position: relative;
}

#map-canvas{
    width: 100%;
    height: 400px;
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 0;
}

ul.map-country-list, ul.map-country-list > li, ul.map-country-list ul, ul.map-country-list-schools > li {
    padding: 0px;
    margin: 0px;
    list-style: none;
}

ul.map-country-list li {
font-family: "franklin-gothic-urw-cond", Arial, sans-serif;
font-size: 18px;
}

ul.map-country-list li a {
    color: black;
}

ul.map-country-list > li > span {
    font-weight: 700;
    text-transform: uppercase;
}

ul.map-country-list ul {
    margin-bottom: 20px;
}

ul.map-country-list-schools li:hover {
    cursor: pointer;
}

ul.map-country-list-schools li span {
    display: none;
}



/* ----- footer ----- */



.footer-container {
    padding-top: 80px;
    padding-bottom: 40px;
    color: white;
    font-family: "franklin-gothic-urw-cond", Arial, sans-serif;
}

.footer-line {
    border-top: 1px solid white;
    padding-bottom: 40px;
}

footer h2 {
font-family: "franklin-gothic-urw-cond", Arial, sans-serif;
font-size: 28px;
text-transform: uppercase;
font-weight: 700;
margin-bottom: 20px;
letter-spacing: 1.25px;
}

ul.footer-contact, ul.footer-contact li {
    padding: 0px;
    margin: 0px;
    list-style: none;
}

ul.footer-contact li {
    font-family: "franklin-gothic-urw-cond", Arial, sans-serif;
    font-size: 18px;
    line-height: 20px;
    color: white;
    margin-bottom: 20px;
}

ul.footer-contact li span {
    text-transform: uppercase;
    font-weight: 700;
}

ul.footer-contact li a {
    font-style: italic;
    color: white;
}

.footer-updates input.searchBox {
    width: 100%;
    border: 0px;
    padding: 10px 15px;
    margin: 0px;
    background-color: black;
    border: 2px solid white;
    font-family: Georgia;
    font-style: italic;
    font-size: 20px;
}

.footer-updates input.searchSubmitBtn {
    border: 0px;
    padding: 0px;
    margin: 0px;
    padding: 10px 15px;
    margin-top: 20px;
    color: black;
    background-color: white;
    text-transform: uppercase;
    font-family: "franklin-gothic-urw-cond", Arial, sans-serif;
    font-size: 20px;
    font-weight: bold;
}

ul.footer-social-icons, ul.footer-social-icons li {
    padding: 0px;
    margin: 0px;
    list-style: none;
}

ul.footer-social-icons li {
    float: left;
    margin-right: 10px;
}

ul.footer-social-icons li a {
    display: block;
    margin: 0px;
    background-color: white;
    color: black;
    text-align: center;
    font-size: 24px;
    line-height: 50px;
    width: 50px;
    height: 50px;
    -moz-border-radius: 25px;
    border-radius: 25px;
}

.flex-video {
  position: relative;
  padding-top: 1.5625rem;
  padding-bottom: 67.5%;
  height: 0;
  margin-bottom: 1rem;
  overflow: hidden; }
  .flex-video.widescreen {
    padding-bottom: 56.34%; }
  .flex-video.vimeo {
    padding-top: 0; }
  .flex-video iframe,
  .flex-video object,
  .flex-video embed,
  .flex-video video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; }




/* -------- SINGLE PHOTO GALLERY -------- */
.photo-gallery-outer-container {
    padding-top: 60px;
    padding-bottom: 60px;
}

ul.photo-gallery-slides, ul.photo-gallery-captions, ul.photo-gallery-slides li, ul.photo-gallery-captions li {
    list-style:none;
    padding: 0px;
    margin: 0px;
}

ul.photo-gallery-slides li {
    opacity: 0;
    list-style:none;
    display: none;
}

ul.photo-gallery-slides li img {
    width: 100%;
    height: auto;
}

ul.photo-gallery-captions li {
    display: none;
}

ul.photo-gallery-captions li p {
    color: white;
     font-family: "franklin-gothic-urw-cond", Arial, sans-serif;
     font-size: 18px;
}

.photo-gallery-total {
    color: #ccc;
    text-align: right;
    font-family: "franklin-gothic-urw-cond", Arial, sans-serif;
    font-weight: bold;
    font-size: 18px;
}

.photo-gallery-prev, .photo-gallery-next {
    width: 50px;
    height: 50px;
    cursor: pointer;
    /*background-color: red;*/
   position: absolute;
    top: 50%;
    left: 50%;
   /*margin-top: -25px;*/
   margin-left: -25px;
     line-height: 50px;
    /* margin: 0px auto;*/
     text-align: center;
}

.photo-gallery-prev i, .photo-gallery-next i {
    font-size: 28px;
   
    padding: 10px;
    display: block;
    border: 2px solid white;
    color: white;
    -webkit-border-radius: 25px;
-moz-border-radius: 25px;
border-radius: 25px;
}

.prev-column, .next-column {
    /*background-color: yellow;*/
    position: relative;
    text-align: center;
}

#status {
  opacity: 0;
  position: fixed;
  right: 20px;
  top: 20px;
  background: hsla( 0, 0%, 0%, 0.8);
  padding: 20px;
  border-radius: 10px;
  z-index: 2; /* over other stuff */
}

.archive h2.cat-title, .single-schools h2.school-name, .search h2.search-title, .page h2.page-title, .single h2.related-projects {
      font-family: "franklin-gothic-urw-cond", Arial, sans-serif;
    font-weight: bold;
    font-size: 32px;
    text-align:center;
    color: white;
    text-transform: uppercase;
    letter-spacing: 1.5px;
}

.single-schools h3.country-name {
      font-family: "franklin-gothic-urw-cond", Arial, sans-serif;
    font-weight: 300;
    font-size: 22px;
    text-align:center;
    color: white;
    text-transform: uppercase;
    letter-spacing: 1.5px;
}

#viewMore {
    color: black;
    background-color: white;
    padding: 10px;
     font-family: "franklin-gothic-urw-cond", Arial, sans-serif;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 22px;
}

ul.search-results {
    list-style: none;
}

ul.search-results li {
    text-align: center;
    margin-bottom: 40px;
}

ul.search-results li h3 a {
     font-family: "franklin-gothic-urw-cond", Arial, sans-serif;
    font-weight: bold;
    font-size: 28px;
    /*color: white;*/
    text-transform: uppercase;
}

ul.search-results li p {
    font-family: Georgia, serif;
    font-size: 16px;
    line-height: 22px;
    color: white;
}

ul.search-results li h4 {
    color: white;
    font-family: "franklin-gothic-urw-cond", Arial, sans-serif;
    font-weight: 300;
    font-size: 18px;
}


ul.search-results li h4.authorName {
    font-style: italic;
}

ul.search-results li h4.schoolName {
    /*text-transform: uppercase;
    letter-spacing: 1.5px;*/
    font-size: 16px;
}


.sponsors-container, .leadership-container {
    background-color: white;
    padding-top: 30px;
    padding-bottom: 30px;
}

.sponsors-container h2, .leadership-container h2 {
     font-family: "franklin-gothic-urw-cond", Arial, sans-serif;
    font-weight: bold;
    font-size: 28px;
    /*color: white;*/
    text-transform: uppercase;
    margin-bottom: 20px;
}

.sponsors-container h3, .leadership-container h3 {
     font-family: "franklin-gothic-urw-cond", Arial, sans-serif;
    font-weight: 300;
    font-size: 18px;
    margin-bottom: 10px;
}

.container-outside-404 {
 background-color: white;
 padding-top: 30px;
 padding-bottom: 30px;
}
.container-outside-404 h1 {
 font-family: "franklin-gothic-urw-cond", Arial, sans-serif;   
  font-weight: bold;
  margin-bottom: 10px;
}
.container-outside-404 p {
font-family: Georgia;
font-size: 20px;
line-height: 30px;
margin-bottom: 20px;
font-weight: 300;
}