/* HOMEPAGE */
@font-face {
  font-family: "Montserrat Bold";
  src: url('https://static.igem.wiki/teams/4437/wiki/fonts/montserrat-bold.ttf');
}

@font-face {
  font-family: "Lato Light";
  src: url('https://static.igem.wiki/teams/4437/wiki/fonts/lato-light.ttf');
}

.bg-homepage-1{background:linear-gradient(#eff8c4 10%, #214905); }
.bg-homepage-2{background:linear-gradient(#214905 10%, #55730f 30%,#eff8c4, #f6cf92, #f7c577); }

@media only screen and (max-width: 750px) {
  .bg-homepage-2{background:linear-gradient(#214905 5%, #55730f 10%,#eff8c4, #f6cf92, #f7c577); }
}
.logo-image{
  top: 5%;
  width: 50%;
}
#homepage-caption{
    font-family: "Lato Italic";
    font-weight: bold;
    font-style: normal;
    font-size: 2rem !important;
    color: #55730f;
}
.bg-leaves{
  background-image: url("https://static.igem.wiki/teams/4437/wiki/homepage/leaves/full-1.svg");
  background-size:100%,100%;
}
.bg-news{
  background-image: url("https://static.igem.wiki/teams/4437/wiki/homepage/newspaperblank.svg");
  background-size:100%,100%;
}
.leaves-img{
  width: 100%;
}

.height-1{
  height:1rem;
}
.cropped2 {
    width: 100%; /* width of container */
    height: 50%; /* height of container */
    object-position: right 45%; /* try 20px 10px */
}

.bolded-text{
   font-size: 3rem !important;
   color: #eff8c4;
   overflow: visible !important;
   font-family: "Montserrat Bold";
   font-weight: normal;
   font-style: normal;
   text-align: center;
   margin:0;
}

 .tons-text{
   font-size: 5vw !important;
   color: #eff8c4;
   overflow: visible !important;
   font-family: "Montserrat Bold";
   font-weight: normal;
   font-style: normal;
   text-align: center;
   margin:0;
}

.green-text{
  color:#55730f;
}


.caption-text{
   font-size: 1.75rem !important;
   color: #eff8c4;
   overflow: visible !important;
   font-family: "Lato Light";
   font-weight: bold;
   font-style: normal;
   text-align: center;
   margin:0;
}
.green-text-caption{
  color:#55730f;
}

.cream-text-caption{
  color:#eff8c4;
}
money-food{
    width: 50%; /* width of container */
    height: 50%; /* height of container */
    object-position: right 45%; /* try 20px 10px */
}

.trash {
  display: block;
  margin-left: 7rem;
  margin-right: 3rem;
  width: 70%;
}
.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
}

.value-watch{
  font-size: 5vw !important;
  color: #eff8c4;
  overflow: visible !important;
  font-family: "Montserrat Bold";
  font-weight: normal;
  font-style: normal;
  text-align: center;
   margin:0;
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
}

.money-watch{
  font-size: 5vw !important;
  color: #eff8c4;
  overflow: visible !important;
  font-family: "Montserrat Bold";
  font-weight: normal;
  font-style: normal;
  text-align: center;
   margin:0;
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
}

.news-image{
  position: absolute;
}

.box-bolded-text{
   font-size: 2rem !important;
   color: #000000;
   overflow: visible !important;
   font-family: "Montserrat Bold";
   font-weight: normal;
   font-style: normal;
   text-align: center;
   margin:0;
}

.box-capiton-text{
   text-align: justify;
   font-size: 1.2rem !important;
   color: #7d0a23;
   overflow: visible !important;
   font-family: "Lato Light";
   font-weight: bold;
   font-style: normal;
   margin:0;
}


@media only screen and (max-width: 750px) {
        .bolded-text{
       font-size: 2rem !important;
       color: #eff8c4;
       overflow: visible !important;
       font-family: "Montserrat Bold";
       font-weight: normal;
       font-style: normal;
       text-align: center;
       margin:0;
    }
      .caption-text{
       font-size: 3vw !important;
       color: #eff8c4;
       overflow: visible !important;
       font-family: "Lato Light";
       font-weight: bold;
       font-style: normal;
       text-align: center;
       margin:0;
    }
      .green-text-caption{
      color:#55730f;
    }
    
      .green-text{
      color:#55730f;
    }
  }

  .speech-bubble {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 70%;
  }

  .portrait{
    z-index: 2;
    transition: transform .2s;

  }

  .projectButtons{
  flex: 0 0 auto;
  width: 33.33333333%;
}

.description-box-button{
    z-index: 1;
    margin: -2%;
    margin-top: -4%;
    display: block;
    /* width: 100%; */
    border: none;
    cursor: pointer;
    /* background: #333; */
    /* color: #fff; */
    text-align: left;
    transition: background 0.2s;
  }

  a:hover img {
        transform: scale(1.25);
    }


@media only screen and (max-width: 750px) {
            .box-capiton-text{
      text-align: justify;
      font-size: 0.75rem !important;
      color: #7d0a23;
      overflow: visible !important;
      font-family: "Lato Light";
      font-weight: bold;
      font-style: normal;
      margin:0;
      padding-right: 0;
      padding-left: 0;
    }
}

.flask{
  width: 70%;
  margin-right:0;
}

@media only screen and (max-width: 585px){
  .flask{
    width: 50%;
    margin-right: auto;
  }
}

.col-space{
    padding-right: 3rem!important;
    padding-left: 3rem!important;
}
.space-4{
     padding-top: 1.5rem!important;
    padding-bottom: 1.5rem!important;
}

@media only screen and (max-width: 585px){
  .flask{
    width: 50%;
    margin-right: auto;
  }
  .col-space{
    padding-right: 0!important;
    padding-left: 0!important;
  }
  
  .space-4{
     padding-top: 5px!important;
    padding-bottom: 5px!important;
}
}