body {
  position: relative;
}

p {
  font-family: "Roboto Condensed";
  font-size: .9rem;
}

ul {
  font-family: "Roboto Condensed";
  font-size: .9rem;
  font-weight: bold;
}

body {
  background: #efefef !important;
}

/* Fonts */
h1 {
  font-size: 2rem;
  font-weight: bold;
  color: #707070;
}

h3 {
  font-size: 1rem;
  font-weight: 300;
  color: #707070;
}

.vertical-text { 
  font-size: 2rem;
  font-weight: bold;
}

h2 {
  font-size: 1.1rem;
  
  color: #707070;
}

/* Fonts */

.sec-padding {
  padding-top: 25px;
}

.second-panel {
  background-image: url("/images/blob2.png");
  background-repeat: no-repeat;
  background-position: top left;
  background-size: 40%;
}

.recycle-app {
  width: 50%;
  padding-top: 20px;
  padding-bottom: 20px;
}

.third-panel {
  background-image: url("/images/blob2.png");
  background-repeat: no-repeat;
  background-position: top left;
  height: 100vh;
}

.blue-blob {
  background-image: url("/images/blue-blob.png");
  background-repeat: no-repeat;
  background-position: 0% 55%;
  background-size: 40%;
}

.who-what {
  padding-top: 10rem;
}

body {
  padding-top: 0rem;
  font-family: "Roboto Condensed";
}



.btn-primary:hover { 
  background-color:#65D2F9;
  
}

.btn-secondary:hover { 
  background-color:#65D2F9;
  
}

.btn-primary { 
  background-color:#4F66EA;
  font-weight: bold;
  padding-left: 20px;
  padding-right: 20px;
  
}

.btn-h1 { 
  font-size:14px;
}

.btn-secondary { 
  background-color:#3D3D9F;
  font-weight: bold;
  padding-left: 20px;
  padding-right: 20px;
}



/* Black and white hover styles */

.third-panel img {
  transition: filter 0.5s ease-in-out;
  -webkit-filter: grayscale(0%); /* Ch 23+, Saf 6.0+, BB 10.0+ */
  filter: grayscale(100%); /* FF 35+ */
}

.third-panel img:hover {
  -webkit-filter: grayscale(100%); /* Ch 23+, Saf 6.0+, BB 10.0+ */
  filter: grayscale(0%); /* FF 35+ */
}

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
  
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
 
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
  
  p {
    font-size: 1rem;
  }

  h1 {
    font-size: 3rem;
    font-weight: bold;
    color: #707070;
    line-height: 3.1rem;
  }

  h3 {
    font-size: 1.5rem;

    font-weight: 300;
    color: #707070;
  }

  h2 {
    font-size: 1.5rem;

    font-weight: 300;
    color: #707070;
  }

  ul {
    font-family: "Roboto Condensed";
    font-size: 1.2rem;
    font-weight: bold;
  }
  
  
  
  .sec-padding {
    padding-top: 100px;
  }

  .recycle-app {
    width: 75%;
  }

  .second-panel {
    background-image: url("/images/blob2.png");
    background-repeat: no-repeat;
    background-position: top left;
    background-size: 20%;
  }

  .blue-blob {
    background-image: url("/images/blue-blob.png");
    background-repeat: no-repeat;
    background-position: 0% 55%;
    background-size: 35%;
  }
}

.image-stack::after {
  content: " ";
  display: table;
  clear: both;
}

.image-stack__item--top-right {
  float: right;

  margin-left: -100%;
  padding-top: 31%;
  padding-right: 12%;
  position: relative;
  z-index: 1;
}

.image-stack__item--top-left {
  float: left;

  margin-right: -100%;
  padding-top: 31%;
  padding-left: 7%;
  position: relative;
  z-index: 1;
}

.image-stack__item--bottom {
}

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

  p {
    font-size: 1rem;
  }

  h1 {
    font-size: 4rem;
    font-weight: bold;
    color: #707070;
    line-height: 4.1rem;
  }

  h3 {
    font-size: 1.5rem;

    font-weight: 300;
    color: #707070;
  }

  h2 {
    font-size: 2rem;

    font-weight: 300;
    color: #707070;
  }


  .btn-h1{ 
    font-size: 21px;
  }
  .btn-primary { 
    background-color:#4F66EA;
    font-weight: bold;
    padding-left: 70px;
    padding-right: 70px;
    
  }
  
  .btn-secondary { 
    background-color:#3D3D9F;
    font-weight: bold;
    padding-left: 70px;
    padding-right: 70px;
  }

  .recycle-app {
    width: 65%;
  }

  

  .sec-padding {
    padding-top: 150px;
  }
}

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

  p {
    font-size: 1.2rem;
  }

  h1 {
    font-size: 6rem;
    font-weight: bold;
    color: #707070;

    line-height: 6.1rem;
  }

  h3 {
    font-size: 1.5rem;

    font-weight: 300;
    color: #707070;
  }

  h2 {
    font-size: 3rem;

    font-weight: 300;
    color: #707070;
  }


  .recycle-app {
    width: 45%;
  }
}

/* Custom media query */
@media only screen and (min-width: 1304px) {
  .vertical-text {
    transform: rotate(-90deg) translate(-108%, -89%);
    text-align: end;
    left: 0px;
    text-transform: uppercase;
    transform-origin: 0 0;
    line-height: 1;
    font-weight: bolder;
    font-size: 3.2rem;
    padding-bottom: 40px;
    padding-left: 30px;
    color: #d1d1d1;
    font-weight: 500;
  }

  .text-adjustment {
    margin-top: -80px;
  }
}

.grey-blob-right {
  background-image: url("/images/grey-blob-right.png");
  background-repeat: no-repeat;
  background-position: top right;
  background-size: 100%;
}

.vertical-text {

  color: #d1d1d1;
  text-transform: uppercase;
}

.text-dark-grey {
  color: #707070;
 
}

.text-light-grey {
  color: #d1d1d1;

 
}


.process-padding {
  margin-top: 25%;
  margin-left: 20%;
}



.neo-box {
  background-color: #efefef ;
  max-width: 100%;
  border-radius: 48px;
  box-shadow: inset 5px 5px 10px #b1b1b1, inset -5px -5px 10px #ffffff;
}

.neo-circle { 
  height: 200px;
  width: 200px;
  
  border-radius: 50%;
  box-shadow: inset 5px 5px 10px #b1b1b1, inset -5px -5px 10px #ffffff;
}

.neo-circle img { width:50%;
  padding-top:20px;
  
}

.neo-circle h3 { 
  font-weight: bold;
}