@import "../_style/app.theme";

/*.cover {
  height: 100vh;
  overflow: hidden;
}

.cover:before{
  content: '';
  position: absolute;
  width: 100vw;
  height: inherit;
  background: rgba(0, 0, 0, 0.5);
  z-index: -1;
}

.cover img{
  position:relative;
  object-fit: contain;
  left: 0;
  top: 0;
  z-index: -2;
}

.action_volunteer {

    background: linear-gradient(rgba(255, 255, 255, 1),rgba(255, 255, 255, 0.6), rgba(121, 195, 253, 0)), url("/assets/pexels-photo-407237.jpeg") no-repeat center center;
    background-attachment:fixed;

    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;

    // max-width: 100%;
    display: flex;
    flex-direction: column;
    //justify-content: space-around;
    justify-content: center;
    align-items: center;
    height: 99vh;
    text-align: center;
    //position: relative;
}
*/

//Cover image and text

//Previous home page
//classes for cover image
.cover {
  height: 100vh;
  overflow: hidden;
}

.cover:before{
  content: '';
  position: absolute;
  width: 100vw;
  height: inherit;
  background: rgba(0, 0, 0, 0.5);
  z-index: -1;
}

.cover img{
  position:relative;
  object-fit: contain;
  left: 0;
  top: 0;
  z-index: -2;

  //max-width: 100%;
}
/*.action{
    background: url("/assets/pexels-photo-407237.jpeg");

    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;

    height: 99vh;
    margin-top: 2vh;
    display: flex;
    flex-direction: column;
    position: relative;
}*/

/*.action {

    background: linear-gradient(rgba(255, 255, 255, 1),rgba(255, 255, 255, 0.6),rgba(121, 195, 253, 0)), url("/assets/image_1.jpeg") no-repeat center center;
    background-attachment:fixed;

    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    display: flex;
    flex-direction: column;
    //justify-content: space-around;
    justify-content: center;
    align-items: center;
    //height: 87.1vh;
    height:-webkit-fill-available;
    text-align: center;
    //position: relative;
}*/

//cursor and aniSlogan
/*@font-face {
  font-family: "aniFont";
  src: url("/assets/fonts/Gotham-Black-Regular.ttf");
  //src: url("/assets/fonts/Myriad-Pro-Regular.ttf");
  // src: url("/assets/fonts/Thruster-Regular.ttf");
}*/

.maindiv{
  height: 100%;
  position: relative;
}

.action {
    
    height: 94vh;
    //height: auto;
    //height: 510px;
}

video {  
    
    position: relative;
    top: 40%;
    left: 50%;
    z-index: -100;
    transform: translateX(-50%) translateY(-50%);
    
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;    
    
    //background: url('/assets/image_1.jpeg') no-repeat;
    background-size: cover;
    //transition: 1s opacity;
    
    pointer-events: none;
    
}

.aniSlogan-background{
    // background-color: rgba(0, 0, 0, 0.4);
    width: 100%;
    text-align: center;
    position: absolute;
    bottom: 0%;
    top: 45%;
    height: 36%;
}

.aniSlogan {
  //font-family: "aniFont";
  font-size: 3em;
  //font-weight: 100;
  font-weight: bold;
  color: #fff;
  // padding-top: 1em;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.aniWord {
  font-family: inherit;
  color: #383838;
}

/*#aniSlogan.vol_slogan {
  position: absolute;
  top: 11rem;
  left: 28rem;
}*/

//classes for project search
.input-pre {
  border-bottom: 2px solid $secondary-bg-color;
}
 /* label color */
 .input-field label {
   color: $main-color;
   top: 2rem;
 }
/* label focus color */
.input-field input[type=text]:focus + label, .materialize-textarea:focus:not([readonly]) + label {
 color: $main-color !important;
}
/* label underline focus color */
.input-field input[type=text]:focus, .materialize-textarea:focus:not([readonly]) {
 border-bottom: 1px solid $main-color !important;
 box-shadow: 0 1px 0 0 $main-color !important;
}
.search_button {
  padding: 0 1rem;
}

//Ribbons
.green-ribbon {
    background-color: $secondary-bg-color;
    text-align: center;
    font-family: $main-font;
    font-size: 1.6em;
    font-weight: bolder;
    padding: 10px 0px;
    text-transform: uppercase;

}

.green-ribbon.white-text {
        color: white;
        letter-spacing: 1px;
    }
.ribbon-padding-top{
padding: 30px 0px;
}
.white-ribbon {
    background-color: transparent;
    text-align: center;
    font-family: $main-font;
    font-size: 22px;
    font-weight: bold;
    padding: 10px 0px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

//second section
.second-section{
    text-align: center;
    font-family: $main-font;
    //max-width: 45%;
}
.second-section-heading {
    //font-size: 28px;
    font-size: 2em;
    font-weight: bold;
}
.second-section-text{
    font-size: 1.3em;
    //font-size: 18px;
    //font-weight: bold;
	
}
.volunteer-heading{
    color: #0BAFAA;
}
.organization-heading{
    color: $secondary-color;
}

.button-bordered {
    background-color: white;
    color: black;
    border: 2px solid black;
    padding: 5px 60px;
}

.button-bordered:hover { 
    background-color: $secondary-bg-color;
	color: white;
}

.btn-bordered {
    background-color: $secondary-color;
    color: white;
    border: none;
    padding: 5px 15px;
    text-transform: uppercase;
    font-weight: bold;
}

.btn-bordered:hover { 
    background-color: $secondary-bg-color;
  color: white;
}



//Green Arrow image
.green-arrow-img{
    max-width: 70%;
    display: block;
    margin: auto;
}



//featured projects section
.card{
    min-height: 370px;
    background-color: white;
    border: 1px $secondary-color solid;
    position: relative;
    .card-content{
        text-align: center;
        position: absolute;
        top: 160px;
        left:10px;
        right:10px;
        height: 130px;
        .material-icons{
          position: absolute;
          right: 0;          
          top: 50%;
          transform: translateY(-50%);
          cursor: pointer;
        }
        .card-title {
          font-size: 18px;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%,-50%);
          width: 80%;
          line-height: 30px;
        }
    }
    .card-reveal{
      .material-icons{
        position: absolute;
        right: 10px;
        top: 10px;                           
      }
    }
    

    .card-image{
      height: 150px;
      position: absolute;
      top: 10px;
      left: 10px;
      right: 10px;      
      img{
          max-width: 100%;
          max-height: 100%;
          object-fit: contain;
      }  
  }
  .card-action {
    position:absolute;
    bottom:10px;
    right:10px;
    left:10px;
    .btn {
      padding: 0 5px; 
    }    
  }
}

.featured-project-heading{
    font-family: $main-font;
    font-size: 1.3em;
    font-weight: bold;
    color: #84C44C;
    text-transform: uppercase;
}

.featured-project-text{
    font-size: 1.1em;
}

.featured-project-img{
    max-height: 95%;
    max-width: 95%;
    //display: block;
    //margin: auto;
}
.featured-project-img-div{
    height: 300px;
    //width: 300px;
}

.button-colored{
    background-color: $secondary-color;
    color: white;
    border: none;
    font-size: 1em;
    padding: 5px 30px;
    width: 100%;
}

// SEE MORE Button

.btn-see-more{
  background-color: #84c44c;
  width:30%;
  position: relative;
  padding: 0 2rem;
  display: block;
  margin:0 auto;
}
#see-more{
margin-bottom:35px;
}




//github
/*
.github_cta {
  background-color: $secondary-bg-color;
  text-align: center;
  color: #fff;
  font-size: 2rem;
  //font-family: "aniFont";
  .btn {
    background: #fff;
    color: $secondary-bg-color;
    margin-bottom: 2rem;
    font-size: 1.2rem;
  }
}*/
.padding{
    padding-bottom: 20px;
}

.btn_github {
    background: #fff;
    color: $secondary-bg-color;
    //margin-bottom: 2rem;
    font-size: 0.9rem;
    margin: 10px;
    //padding-top: -10px;
    //height: 48px;
    width: 240px;
}

.toLower{
    text-transform: lowercase;
}
.toLower::first-letter{
    text-transform: uppercase;

}

/* google map */

.developers_list li {
  display: inline-block;
  margin-right: 10px;
}

.developers_list li:last-child {
  margin-right: 0;
}

agm-map {
  width: 100%;
  height: 500px;
  background-color: rgba(0,0,0,0.5);
}

.sebm-google-map-container{

  .info-window{
    //width: 100px;
    text-align: center;

    .info-container{
      width: 100%;
      height: 100%;

      .info-avatar{
        width: 80px;
        position: relative;
        padding-bottom: 80px;
        overflow: hidden;
        margin:10px auto 0.75em auto;
        border-radius: 50%;
        border: solid 2px #ccc;

        img{
          width: auto;
          max-width: none;
          height: 100%;
          position: absolute;
          left: -50%;
          right: -50%;
          margin: auto;
        }
      }
    }
  }
}

.main-row .title {
  border-bottom: $border-width $page-title-bg-color solid;
  background: $page-title-bg-color;
  padding-top: 5px;
  padding-bottom: 0px;
  h1 {
    @include page-title-font;
    padding: 0px;
    margin: 5px;
    text-align: center;
  }
}

.map {
  position: relative;
  text-align: center;
  p {
    font-size: 1.2rem;
  }
  h2 {
    font-family: Raleway;
    font-weight: 500;
    margin-bottom: -.5rem;
  }
  .problem {
    margin-bottom: 3rem;
  }
}

//copied from materialize template
.icon-block {
  padding: 0 15px;
}
.icon-block .material-icons {
	font-size: inherit;
}

.divStats{
  background-color: $secondary-color;
  color: white;
  border: none;  
  font-weight: bold;  
  text-align: center;
    a {
        color: white;
        text-decoration:none;
    }
    a:hover {
       text-decoration:underline;
    }
}

.largeScreen {
    margin-left: -22px;
    font-size: 1.8em;
    height: 500px;
}

@media screen and (max-width: 400px) {
    .show-on-extra-small-and-down {
        display: block !important;
    }
}
    
.spanPublicVolunteer{
  font-size: 0.6em;
}

.tableStats{
  height: 100%;
  .tr{
    height: 25%;
  }
}

/*********************
  Media Query Classes
**********************/

@media screen and (max-width: 1150px) and (min-width: 993px)  {
    
    .action {      
      height: 80vh;
    }    
    
    .aniSlogan-background {
        height: 42%;
    }
}

@media screen and (max-width: 992px) {
    
    .action {
      background: linear-gradient(rgba(255, 255, 255, 1),rgba(255, 255, 255, 0.6),rgba(121, 195, 253, 0)), url("/assets/image_1.jpeg") no-repeat center center;
        
      background-repeat: no-repeat;
      height: 90vh;
      background-size: cover;

    }
    
    video {
        display: none;
    }
    
    .aniSlogan {
      font-size: 2.2em;
      padding-top:2%;
    }
     .featured-project-heading{
        font-size: 1.1em;
    }
    .featured-project-text{
        font-size: 1em;
    }
    .button-colored{
        font-size: 0.9em;
    }
     .btn_github {
        font-size: 1rem;
        //margin: 10px;
    }
    .green-arrow-img{
        max-width: 70%;
    }
    .green-ribbon {
        font-size: 1.5em;
    }
    .white-ribbon {
        font-size: 1.5em;
    }
    .second-section-heading {
        font-size: 1.5em;
        font-weight: bold;
    }
    .second-section-text{
        font-size: 1em;
        //font-size: 18px;
        //font-weight: bold;
    }
    
}

@media screen and (max-width: 650px) {
   
    .aniSlogan-background{
        top: 38%;
        height: 36%;
    }
    .aniSlogan {
      font-size: 1.8em;
    }
    .featured-project-heading{
        font-size: 1.1em;
    }
    .featured-project-text{
        font-size: 1em;
    }
    .button-colored{
        font-size: 0.9em;
    }
    .green-arrow-img{
        max-width: 30%;
    } 
    .green-ribbon {
        font-size: 1.3em;
    }
    .white-ribbon {
        font-size: 1.3em;
    }
    .btn_github {
        font-size: 1rem;
        //margin: 10px;
    }
    .second-section-heading {
        font-size: 1.5em;
        font-weight: bold;
    }
    .second-section-text{
        font-size: 1em;
        //font-size: 18px;
        //font-weight: bold;
    }
}

@media screen and (min-width: 401px) {
    .hide-on-extra-small-and-up {
        display: none !important;
    }
}

@media screen and (max-width: 400px) {
    .hide-on-extra-small-and-down {
        display: none !important;
    }
}

@media screen and (max-width: 400px) {
    .show-on-extra-small-and-down {
        display: block !important;
    }
}

