/*GENERAL STYLE*/
body, html {
  height:100%;
  width:100%
}

.navbar-custom, body {
  background-color: #D3D3D3;
}

.intro, body, html {
  width:100%;
}

body {
  font-family:Monteserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
  color:#fff;
  webkit-tap-highlight-color:rgba(255,255,255,.2);
}

.btn, .navbar-custom, h1, h2, h3, h4, h5, h6 {
  text-transform: uppercase;
  font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
}

h1, h2, h3, h4, h5, h6 {
  margin:0 0 15px;
  font-weight:700;
  letter-spacing:2px;
}

@media (min-width:768px) {
  p {
    margin:0 0 35px;
    font-size:20px;
    line-height:1.6;
  }
}

a {
 color:#42DCA3;
 -webkit-transition:all .2s ease-in-out;
 -moz-transition:all .2s ease-in-out;transition:all .2s ease-in-out;
}

a:focus, a:hover {
  text-decoration:none;
  color:#1d9b6c;
}

.light {
  font-weight:400;
}

.navbar-custom {
  margin-bottom:0;
  border-bottom:1px solid rgba(255,255,255,.3);
}

.navbar-custom,.navbar-toggle {
  color:#fff;
  background-color:rgba(255,255,255,.2);
  font-size:12px;
}

.navbar-custom .nav li a:active, .navbar-custom .nav li a:focus, .navbar-custom .nav li a:hover {
  background-color:transparent;
  outline:0;
}

.navbar-custom .navbar-toggle:active,.navbar-custom .navbar-toggle:focus {
  outline:0;
}

.navbar-custom .navbar-brand {
  font-weight:700;
}

.navbar-custom .navbar-brand:focus {
  outline:0;
}

.navbar-custom a {
  color:#fff;
}

.navbar-custom .nav li a {
  -webkit-transition:background .3s ease-in-out;
  -moz-transition:background .3s ease-in-out;
  transition:background .3s ease-in-out;
}

.navbar-custom .nav li a:hover{
  color:rgba(255,255,255,.8);
}

.navbar-custom .nav li.active {
  outline:0
}

.navbar-custom .nav li.active a {
  background-color:rgba(255,255,255,.3);
}

.navbar-custom .nav li.active a:hover {
  color:#fff;
}

@media (min-width:768px) {
  .navbar-custom {
    padding:20px 0;
    border-bottom:none;
    letter-spacing:1px;
    background:0 0;
    -webkit-transition:background .5s ease-in-out,padding .5s ease-in-out;
    -moz-transition:background .5s ease-in-out,padding .5s ease-in-out;
    transition:background .5s ease-in-out,padding .5s ease-in-out;
  }
  .navbar-custom.top-nav-collapse {
    padding:0;
    background:#000;
    border-bottom:1px solid rgba(255,255,255,.3);
  }
}

/*THE Backgrounds*/

.homeIntro {
  background:url(../img/background-images/horse-man.jpg) bottom center no-repeat #000;
}

.communityIntro {
  background:url(../img/background-images/woman-instrument.jpg) bottom center no-repeat #000;
}

.findingsIntro {
  background:url(../img/background-images/EllaBack.jpg) bottom center no-repeat #000;
}

.teamIntro {
  background:url(../img/background-images/team-back.jpg) bottom center no-repeat #000;
}

.pressIntro {
  background:url(../img/background-images/lorenzo-interview.jpg) bottom center no-repeat #000;
}

.intro {
  display:table;
  height:auto;
  padding:100px 0;
  text-align:center;
  color:#fff;
  -webkit-background-size:cover;-moz-background-size:cover;
  background-size:cover;-o-background-size:cover;
}

.intro .intro-body {
  display:table-cell;
  vertical-align:middle;
}

.intro .intro-body .brand-heading {
  font-size:40px;
}

.intro .intro-body .intro-text {
  font-size:18px;
}

@media (min-width:768px) {
  .intro {
    height:100%;
    padding:0
  }
  .intro .intro-body .brand-heading {
    font-size:100px;
  }
  .intro .intro-body .intro-text {
    font-size:26px;
  }
}


div.center  {
}

@media (min-width: 991px) {
  div.center  { padding-top:70px; }
}

div.mobile {
  display:block;
}

div.desktop{
  display:none;
}

@media (min-width: 640px) {
  div.mobile { display: none}
  div.desktop { display: block }
}

#in-between {
  height:0.7em;
}

/*INDEX STYLE*/

.intro-text {
  font-size:1em;
  text-shadow: 1px 1px #000;
}

#who-are-we{
  -moz-background-size: cover;
  -webkit-background-size: cover;
  background-size: cover;
  background-position: top center !important;
  background-repeat: no-repeat !important;
  background-image: linear-gradient(to left, rgba(0,0,0,0), rgba(0,0,0,0.8)), url("../img/background-images/Team1.jpg");
  height:50em;
}

#what-are-we-doing{
  -moz-background-size: cover;
  -webkit-background-size: cover;
  background-size: cover;
  background-position: top center !important;
  background-repeat: no-repeat !important;
  background-image: url("../img/background-images/MoizMallory.jpg");
  height:50em;
}

#why-does-it-matter{
  -moz-background-size: cover;
  -webkit-background-size: cover;
  background-size: cover;
  background-position: top center !important;
  background-repeat: no-repeat !important;
  background-image: linear-gradient(to right, rgba(0,0,0,0), rgba(0,0,0,0.6)), url("../img/background-images/cooking.jpg");
  height:50em;
}

#who-are-we-mobile{
  background: linear-gradient(to left, rgba(0,0,0,0), rgba(0,0,0,0.8)), url("../img/background-images/Team1.jpg") no-repeat center center;
  background-size: 100% 30em;
}

#what-are-we-doing-mobile{
  background: url("../img/background-images/MoizMallory.jpg") no-repeat center center;
  background-size: 100% 30em;
}

#why-does-it-matter-mobile{
  background: linear-gradient(to right, rgba(0,0,0,0), rgba(0,0,0,0.6)), url("../img/background-images/cooking.jpg") no-repeat center center;
  background-size: 100% 30em;
}

/*COMMUNITY STYLE*/
html, body {
height: 100%;
}

#community{
  background: linear-gradient(to left, rgba(0,0,0,0), rgba(0,0,0,0)), url("../img/community/man.jpg")  no-repeat center center;
  text-shadow: 1px 1px #000;
}

.dateIdentifier {
  color: red;
}

.timeline1:hover{
  color:white;
  text-shadow: 1px 1px 3px #000;
  -moz-background-size: cover;
  -webkit-background-size: cover;
  background-size: cover;
  background-position: top center !important;
  background-repeat: no-repeat !important;
  background-image: linear-gradient(rgba(0,0,0,0.2), rgba(0,0,0,.6)), url("../img/timeline/timeline1.jpg");
}

.timeline3:hover{
  color:white;
  text-shadow: 1px 1px 5px #000;
  -moz-background-size: cover;
  -webkit-background-size: cover;
  background-size: cover;
  background-position: top center !important;
  background-repeat: no-repeat !important;
  background-image: linear-gradient(rgba(0,0,0,0.2), rgba(0,0,0,0.6)), url("../img/timeline/timeline3.jpg");
}
.timeline4:hover{
  color:white;
  text-shadow: 1px 1px 5px #000;
  -moz-background-size: cover;
  -webkit-background-size: cover;
  background-size: cover;
  background-position: top center !important;
  background-repeat: no-repeat !important;
  background-image: linear-gradient(rgba(0,0,0,0.2), rgba(0,0,0,0.6)), url("../img/timeline/timeline2.jpg");
}
.timeline5:hover{
  color:white;
  text-shadow: 1px 1px 5px #000;
  -moz-background-size: cover;
  -webkit-background-size: cover;
  background-size: cover;
  background-position: top center !important;
  background-repeat: no-repeat !important;
  background-image: linear-gradient(rgba(0,0,0,0.2), rgba(0,0,0,0.6)), url("../img/timeline/timeline5.jpg");
}
.timeline6:hover{
  color:white;
  text-shadow: 1px 1px 5px #000;
  -moz-background-size: cover;
  -webkit-background-size: cover;
  background-size: cover;
  background-position: top center !important;
  background-repeat: no-repeat !important;
  background-image: linear-gradient(rgba(0,0,0,0.2), rgba(0,0,0,0.6)), url("../img/timeline/timeline6.jpg");
}
.timeline7:hover{
  color:white;
  text-shadow: 1px 1px 5px #000;
  -moz-background-size: cover;
  -webkit-background-size: cover;
  background-size: cover;
  background-position: top center !important;
  background-repeat: no-repeat !important;
  background-image: linear-gradient(rgba(0,0,0,0.2), rgba(0,0,0,0.6)), url("../img/timeline/timeline7.jpg");
}
.timeline8:hover{
  color:white;
  text-shadow: 1px 1px 5px #000;
  -moz-background-size: cover;
  -webkit-background-size: cover;
  background-size: cover;
  background-position: top center !important;
  background-repeat: no-repeat !important;
  background-image: linear-gradient(rgba(0,0,0,0.2), rgba(0,0,0,0.6)), url("../img/timeline/timeline8.jpg");
}
.timeline9:hover{
  color:white;
  text-shadow: 1px 1px 5px #000;
  -moz-background-size: cover;
  -webkit-background-size: cover;
  background-size: cover;
  background-position: top center !important;
  background-repeat: no-repeat !important;
  background-image: linear-gradient(rgba(0,0,0,0.2), rgba(0,0,0,0.6)), url("../img/timeline/timeline9.jpg");
}
.timeline10:hover{
  color:white;
  text-shadow: 1px 1px 5px #000;
  -moz-background-size: cover;
  -webkit-background-size: cover;
  background-size: cover;
  background-position: top center !important;
  background-repeat: no-repeat !important;
  background-image: linear-gradient(rgba(0,0,0,0.2), rgba(0,0,0,0.6)), url("../img/timeline/timeline10.jpg");
}
.timeline11:hover{
  color:white;
  text-shadow: 1px 1px 5px #000;
  -moz-background-size: cover;
  -webkit-background-size: cover;
  background-size: cover;
  background-position: top center !important;
  background-repeat: no-repeat !important;
  background-image: linear-gradient(rgba(0,0,0,0.2), rgba(0,0,0,0.6)), url("../img/timeline/timeline11.jpg");
}
.timeline12:hover{
  color:white;
  text-shadow: 1px 1px 5px #000;
  -moz-background-size: cover;
  -webkit-background-size: cover;
  background-size: cover;
  background-position: top center !important;
  background-repeat: no-repeat !important;
  background-image: linear-gradient(rgba(0,0,0,0.2), rgba(0,0,0,0.6)), url("../img/timeline/timeline12.jpg");
}
.timeline13:hover{
  color:white;
  text-shadow: 1px 1px 5px #000;
  -moz-background-size: cover;
  -webkit-background-size: cover;
  background-size: cover;
  background-position: top center !important;
  background-repeat: no-repeat !important;
  background-image: linear-gradient(rgba(0,0,0,.2), rgba(0,0,0,0.6) ), url("../img/background-images/collaborating.jpg");
}
.timeline14:hover{
  color:white;
  text-shadow: 1px 1px 5px #000;
  -moz-background-size: cover;
  -webkit-background-size: cover;
  background-size: cover;
  background-position: top center !important;
  background-repeat: no-repeat !important;
  background-image: linear-gradient(rgba(0,0,0,0.2), rgba(0,0,0,0.6)), url("../img/timeline/timeline14.jpg");
}
.timeline15:hover{
  color:white;
  text-shadow: 1px 1px 5px #000;
  -moz-background-size: cover;
  -webkit-background-size: cover;
  background-size: cover;
  background-position: top center !important;
  background-repeat: no-repeat !important;
  background-image: linear-gradient(rgba(0,0,0,0.2), rgba(0,0,0,0.6)), url("../img/timeline/timeline15.jpg");
}

/* Wrapper for page content to push down footer */
#wrap-community {
  min-height: 100%;
  height: auto;
}

/* Set the fixed height of the footer here */
#footer {
height: 60px;
}

#wrapper {
  width: 90%;
  border: 1px solid black;
  overflow: hidden;
  margin-bottom:10em;
}

#year {
  width:20%;
  float:left;
  color:white;
  font-size:20px;
  text-align:center;
  padding-left:15%;
}

#event {
  width:80%;
  float:right;
  overflow: hidden;
}


/*FINDINGS STYLE*/

#findings{
  width: 100%;
  padding:10em 10em;
  text-align:center;
  color:#fff;
  background: linear-gradient(to left, rgba(0,0,0,0), rgba(0,0,0,0.5)), url("../img/background-images/analyzing.jpg")  no-repeat center ;
  text-shadow: 1px 1px #000;
  -webkit-background-size:cover;-moz-background-size:cover;
  background-size:cover;-o-background-size:cover;
}

.researchFinding {
  margin-bottom:4em;
}

.researchTitle {
  margin:auto;
}
.findingNumber {
  font-size:3rem;
  margin:0px;
}

.miniFindingTitle {
  font-size:2rem;
}
.findingText {
  text-align:center;
}

/*TEAM STYLE*/
a.facultySite {
  color:black;
}

#team-image{
  -moz-background-size: cover;
  -webkit-background-size: cover;
  background-size: cover;
  background-position: top center !important;
  background-repeat: no-repeat !important;
  background-attachment: fixed;
  background-image: url("img/team-back.jpg");
  height:17em;
}

img.team-image{
  filter: brightness(90%);
  max-width: 25%;
  border-radius: 50%;
  cursor:pointer;

}

img.team-image:hover{
  filter: brightness(100%) !important;
}

.hidden-bio-image{
  border-radius:50%;
}

.bio-container{
  display:none;
  background-color:#A9A9A9;
  padding-top:2%;
  padding-bottom:1%
}

/*PRESS STYLE*/
.outerPress{
  display: inline;
  font-family: 'Open Sans', Helvetica, sans-serif;
}
.innerPress{
  display: inline-block;
  background-color:white;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}

.press-box{
  width: 15%;
  padding-left:2%;
  padding-bottom:4%;
}
.press-box:hover{
  filter:grayscale(100%);
}