/**
 * All of the CSS for your public-facing functionality should be
 * included in this file.
 */

/* All Text CSS starts here */
#weplant-planted {
    color: #4d4d4d;
    font-size:18px;
    font-weight:600;
}

#weplant-slash {
  font-size:16px;
  font-weight:400;
  color:#999999;
}

#weplant-total {
  font-size:16px;
  font-weight:400;
  color:#999999;
}

.weplant-text {
  font-size:14px;
  font-weight:400;
  color:#999999;
}

.weplant-com-text {
  font-size:10px;
  font-weight:400;
  color:#999999;
}

#weplant-personal-count {
  color: #4d4d4d;
  font-size:16px;
  font-weight:600;
}

#weplant-dedicated-count {
  color: #4d4d4d;
  font-size:16px;
  font-weight:600;
}
/* Text CSS ends here */

/* Treecounter SVG CSS starts here */
.openCrown{fill:rgba(255,255,255,0.0);}
.openShadow{fill:rgba(255,255,255,0.0);}
.openRoot{fill:rgba(255,255,255,0.0);}

.communityCrown{fill:#89b53a;}
.communityShadow{fill:#50742b;}
.communityRoot{fill:#42692F;}

.plantedCrown{fill:#89b53a;}
.plantedShadow{fill:#50742b;}
.plantedRoot{fill:#42692F;}

.openCircle{fill:none;stroke:#B0BEC5;stroke-miterlimit:10;stroke-width:26px;}
.communityCircle{fill:none;stroke:#7da12c;stroke-miterlimit:10;stroke-width:26px;}
.plantedCircle{fill:none;stroke: #89b53a;stroke-miterlimit:10;stroke-width:26px;}

.unpledged, .pledgedCircle {
    fill: transparent;
}

.st8 {
    fill: #FFFFFF;
    stroke: #CBCACB;
    stroke-miterlimit: 10;
}

.st9 {
    fill: #FFFFFF;
    stroke: #CAC9CA;
    stroke-miterlimit: 10;
}

.st10 {
    fill: #FFFFFF;
}

.st11 {
    fill: #E97D5F;
}

.st12 {
    fill: #F5D1D9;
}

.st13 {
    fill: #6E3F22;
    stroke: #6E3F22;
    stroke-miterlimit: 10;
}

.st14 {
    fill: #736741;
}

.st15 {
    fill: none;
    stroke: #736741;
    stroke-miterlimit: 10;
}

.st16 {
    fill: #836240;
}

.st17 {
    fill: #6E3F22;
}

.st18 {
    fill: none;
    stroke: #AD544D;
    stroke-miterlimit: 10;
}

.st19 {
    opacity: 0.5;
    fill: #FFFFFF;
}

.st20 {
    fill: #714923;
}

.st21 {
    fill: #93A378;
}

.st22 {
    fill: none;
    stroke: #A79880;
    stroke-miterlimit: 10;
}

.st23 {
    fill: none;
    stroke: #B6A48B;
    stroke-miterlimit: 10;
}

.st24 {
    fill: #B4A589;
}

.st25 {
    fill: #ABD2B8;
}

.st26 {
    opacity: 0.2;
    fill: #FFFFFF;
}

.st27 {
    fill: #A6947A;
}

.st28 {
    fill: #938E56;
}

.st29 {
    fill: #F4AC9E;
}

.st30 {
    fill: #A07353;
}

.st31 {
    fill: #712E0F;
}
/* SVG CSS ends here */

/* widget wrap */
#weplant-container {
position: relative;
width: 100%;
max-width: 650px;
height: auto;
display: block;
margin:  auto;
z-index:200;
}

/* behind the treecounter */
.weplant-background {
position: absolute;
margin: auto !important;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: -1;
width: 54%;
height: 54%;
border-radius: 50%;
background-color: #f3f3f3;
-webkit-box-shadow: 0px 0px 88px -15px rgba(31,221,255,0.75);
-moz-box-shadow: 0px 0px 88px -15px rgba(31,221,255,0.75); 
box-shadow: 0px 0px 88px 55px rgba(173, 194, 198, 0.85);
}

/* inside the treecounter wrapper */
.weplant-inner-content {
position: absolute !important;
margin: auto !important;
 top: 0;
 right: 0;
 bottom: 0;
 left: 0;
 z-index: 3 !important;
width: 52%;
height: 52%;
border-radius: 50%;
}

/* Slider Wrapper */
.weplant-slider-container {
height: 60%;
width: 100%;
border-top-left-radius: 180px;
border-top-right-radius: 180px;
display: flex;
flex-direction: column;
overflow: hidden;
position: relative;
/* border: 1px solid black; */
}

.weplant-slider-wrapper {
height: 100%;
width: 100%;
position: relative;
}

.weplant-base {
position: absolute;
width: 100%;
height: 100%;
bottom: 0;
left: 0;
right: 0;
overflow: hidden;
background-color: #f3f3f3;
/* transition: .5s ease; */
}

.weplant-overlay {
position: absolute;
width: 0;
height: 100%;
bottom: 0;
left: 100%;
right: 0;
overflow: hidden;
background-color: #f3f3f3;
transition: 0.5s ease;
}

.weplant-slider-wrapper:hover .weplant-overlay {
width: 100%;
left: 0;
transition: 0.5s ease;
}

/* .weplant-slider-wrapper:hover .weplant-base {
right: 100%;
width: 0;
transition: 0.5s ease;
} */



/* Slide */
.weplant-slide {

/* border: solid 1px blue; */

}

/* slide 1 CSS start */
#weplant-main-numbers {
/* display: flex; */
/* flex-direction: row; */
/* justify-content: center;
text-align: center;
vertical-align: baseline; */
}

#weplant-planted-container {
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
padding-top: 8%;
}

#weplant-count {
display: flex;
flex-direction: row;
vertical-align: bottom;
align-items: baseline;
justify-content: center;
}

/* slide 1 CSS end */

/* Slide 2 CSS start */
#weplant-community-numbers {
height: 100%;
width: 100%;
display: flex;
/* display: none; */
align-items: center;
justify-content: center;
flex-direction: row;
padding-bottom: 8%;
padding-left: 3%;
padding-right: 3%;
}

.weplant-personal-wrap {
height: 100%;
width: 50%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-end;
}

.weplant-community-wrap {
height: 100%;
width: 50%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-end;
}

/* Slide 2 CSS end */

/* Slide pagination Indicator */
.weplant-pagination {
display: inline-flex;
justify-content: center;
order: 1;
}

.weplant-arrows {
margin-top: -5%;
display: flex;
justify-content: space-between;
flex-direction: row;
order: 2;
}

.weplant-left {
z-index: 10;
bottom: 0;
position: absolute;
}

#weplant-left-checkbox {
z-index: 10;
bottom: 0;
left: 50px;
position: absolute;
top: 60px;
display: none;
}

.weplant-right {
z-index: 10;
  bottom: 0;
  right: 0;
  position: absolute;
}

#weplant-right-checkbox {
z-index: 100;
  position: absolute;
  bottom: 20px;
  right: 50px;
  top: 60px;
  display: none;
}

input[type="radio"]#weplant-right-checkbox:checked ~ div.weplant-slider-wrapper > div.weplant-overlay {
width: 100%;
left: 0;
transition: 0.5s ease;
}

input[type="radio"]#weplant-right-checkbox:checked ~ div.weplant-pagination > div.weplant-bullet-1 {
background-color: #bbb;
}

input[type="radio"]#weplant-right-checkbox:checked ~ div.weplant-pagination > div.weplant-bullet-2 {
background-color: #89b53a;
}

input[type="radio"]#weplant-left-checkbox:checked ~ div.weplant-slider-wrapper > div.weplant-overlay  {
width: 0;
left: 100%;
transition: 0.5s ease;
}

input[type="radio"]#weplant-left-checkbox:checked ~ div.weplant-pagination > div.weplant-bullet-2 {
background-color: #bbb;
}

input[type="radio"]#weplant-left-checkbox:checked ~ div.weplant-pagination > div.weplant-bullet-1 {
background-color: #89b53a;
}


.weplant-bullets {
height: 6px;
width: 6px;
margin: 1.5px;
border-radius: 50%;
display: inline-block;
transition: .5s ease;
}

.weplant-bullet-1 {
background-color: #89b53a;
}

.weplant-bullet-2 {
background-color: #bbb;
}

div.weplant-slider-wrapper:hover + div.weplant-pagination div.weplant-bullet-1 {
background-color: #bbb;
}

div.weplant-slider-wrapper:hover + div.weplant-pagination div.weplant-bullet-2 {
background-color: #89b53a;
}

/* .weplant-bullet-2:active > .weplant-overlay {
width: 100%;
left: 0;
}

.weplant-bullet-2:active {
background-color: #89b53a;
}

.weplant-bullet-2:active > .weplant-bullet-1 {
background-color: #bbb;
}

.weplant-bullet-1:active > .weplant-overlay {
width: 0;
left: 100%;
} */

/* Support buttons wrap */
.weplant-support-container {
height: 40%;
width: 100%;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
border-bottom-left-radius: 180px;
border-bottom-right-radius: 180px;
padding-bottom: 8%;
overflow: hidden;
/* border: 1px solid black; */
}

/* profile link button */
#weplant-profile-link {
}

/* donate trees button */
#weplant-support-button {
}

/* over the treecounter */
/* #weplant-hover {
position: absolute;
margin: auto;
margin-top: 35%;
 top: 0;
 right: 0;
 left: 0;
 z-index: 10;
 width: 30%;
 height: 18%;
 border-radius: 40%;
 border: solid 1px black;
} */

/* CSS Button Class */
.weplant-button {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #89b53a !important;
  color: white;
  border-radius:90px;
  -webkit-appearance: none;
  -moz-appearance: none;
  border: none;
  cursor: pointer;
  font-weight: 400;
  letter-spacing: 0.0333em;
  margin: 0;
  opacity: 1;
  padding: 0 1vw;
  height:24px;
  max-height:50px;
  text-align: center;
  text-decoration: none;
  margin-top: -2%;
  text-transform: capitalize;
  transition: opacity 0.15s linear;
  font-size: 10px;
}

/* Weplant Icon Button Class */
.weplant-icon {
  display: flex;
  align-items: center;
  justify-content: center;
    background-color: #89b53a !important;
    color: white;
    border-radius:50px;
    -webkit-appearance: none;
    -moz-appearance: none;
    border: none;
    cursor: pointer;
    margin: 0;
    opacity: 1;
    height:24px;
    width: 24px;
    max-width: 50px;
    max-height:50px;
    letter-spacing: 0.0333em;
    margin-top: -2%;
  padding: 0;
    text-align: center;
    text-decoration: none;
    transition: opacity 0.15s linear;
}

/* SVG ICON CSS */
.weplant-svg-icon {
    height: 12px;
    width: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    justify-items: center;
    max-height: 30px;
    max-width: 30px;
    margin:0;
    padding:0;
    text-align: center;
    /* display: initial; */
}

/* Media Queries */

/* X-Extra small devices (phones, 480px and down) */
@media only screen and (max-width: 480px) {
  #weplant-container  {
      width: 116% !important;
      left: -8%;
  }

  .weplant-button {
    padding: 0 2vw;
  }
 }

 /* Warning: overlapping breakpoint in use. check for conflicts before adding new css in here */
 /* Small devices (portrait tablets and large phones, 400px and up) */
 @media only screen and (min-width: 400px) {
  #weplant-planted {
      color: #4d4d4d;
      font-size:24px;
      font-weight:600;
  }

  #weplant-slash {
    font-size:20px;
    font-weight:400;
  }

  #weplant-total {
    font-size:20px;
    font-weight:400;
  }

  .weplant-text {
    font-size:16px;
    font-weight:400;
  }

  .weplant-com-text {
    font-size:12px;
  }

  #weplant-personal-count {
    font-size:22px;
    font-weight:600;
  }

  #weplant-dedicated-count {
    font-size:22px;
    font-weight:600;
  }

  .weplant-button {
      height:32px;
      font-size: 14px;
    }

    .weplant-icon {
        height:32px;
        width: 32px;
    }  
  
    .weplant-svg-icon {
        height: 18px;
        width: 18px;
    }

    #weplant-community-numbers {
      padding-bottom: 5%;
      padding-left: 5%;
      padding-right: 5%;
    }

    .weplant-bullets {
      height: 6px;
      width: 6px;
      margin: 1.5px;
    }
 }

    /* Small devices (portrait tablets and large phones, 500px and up) */
    @media only screen and (min-width: 500px) {
      #weplant-planted {
          color: #4d4d4d;
          font-size:28px;
          font-weight:600;
      }
    
      #weplant-slash {
        font-size:22px;
        font-weight:400;
      }
    
      #weplant-total {
        font-size:22px;
        font-weight:400;
      }
    
      .weplant-text {
        font-size:22px;
        font-weight:400;
      }
  
      .weplant-com-text {
        font-size:14px;
      }
    
      #weplant-personal-count {
        font-size:20px;
        font-weight:600;
      }
    
      #weplant-dedicated-count {
        font-size:20px;
        font-weight:600;
      }
  
      .weplant-button {
          height:34px;
          font-size: 14px;
        }
  
        .weplant-icon {
            height:34px;
            width: 34px;
        }  
      
        .weplant-svg-icon {
            height: 18px;
            width: 18px;
        }
  
        #weplant-community-numbers {
          padding-bottom: 7%;
          padding-left: 5%;
          padding-right: 5%;
        }
  
        .weplant-bullets {
          height: 6px;
          width: 6px;
          margin: 1.5px;
        }

        .weplant-right {
          display: none;
        }

        .weplant-left {
          display: none;
        }
     }
 
 /* Small devices (portrait tablets and large phones, 600px and up) */
 @media only screen and (min-width: 600px) {
  #weplant-planted {
      color: #4d4d4d;
      font-size:34px;
      font-weight:600;
  }

  #weplant-slash {
    font-size:28px;
    font-weight:400;
  }

  #weplant-total {
    font-size:28px;
    font-weight:400;
  }

  .weplant-text {
    font-size:26px;
    font-weight:400;
  }

  .weplant-com-text {
    font-size:16px;
  }

  #weplant-personal-count {
    font-size:28px;
    font-weight:600;
  }

  #weplant-dedicated-count {
    font-size:28px;
    font-weight:600;
  }

  .weplant-button {
      height:40px;
      font-size: 18px;
    }
    .weplant-icon {
        height:40px;
        width: 40px;
    }  
  
    .weplant-svg-icon {
        height: 20px;
        width: 20px;
    }

    .weplant-bullets {
      height: 8px;
      width: 8px;
      margin: 3px;
    }
 }
 
 /* Medium devices (landscape tablets, 768px and up) */
 @media only screen and (min-width: 768px) {
  #weplant-planted {
    color: #4d4d4d;
    font-size:34px;
    font-weight:600;
}

#weplant-slash {
  font-size:28px;
  font-weight:400;
}

#weplant-total {
  font-size:28px;
  font-weight:400;
}

.weplant-text {
  font-size:26px;
  font-weight:400;
}

.weplant-com-text {
  font-size:16px;
}

#weplant-personal-count {
  font-size:28px;
  font-weight:600;
}

#weplant-dedicated-count {
  font-size:28px;
  font-weight:600;
}

.weplant-button {
    height:40px;
    font-size: 18px;
  }
  .weplant-icon {
      height:40px;
      width: 40px;
  }  

  .weplant-svg-icon {
      height: 20px;
      width: 20px;
  }

  #weplant-community-numbers {
    padding-bottom: 12%;
  }
 }

 /* Large devices (laptops/desktops, 992px and up) */
 @media only screen and (min-width: 992px) {

 }
 
 /* Extra large devices (large laptops and desktops, 1200px and up) */
 @media only screen and (min-width: 1200px) {

 }