img {
  display: block;
  max-width: 100%;
  height: auto;
}

.sustainability {
  background: url('/wp-content/themes/phenix-theme/assets/img/background1.svg');
  background-size: 100%;
	overflow: hidden;
}

.sustainabilityinner {
   background: rgba( 255, 255, 255, 0.3)
}

/* Fonts */

@font-face {
    font-family: JuniorBantamwt;
    src: url(/wp-content/themes/phenix-theme/assets/fonts/Knockout-HTF27-JuniorBantamwt.otf);
  }
@font-face {
    font-family: JuniorFeatherwt;
    src: url(/wp-content/themes/phenix-theme/assets/fonts/Knockout-HTF28-JuniorFeatherwt.otf);
  }
@font-face {
    font-family: JuniorMiddlewt;
    src: url(/wp-content/themes/phenix-theme/assets/fonts/Knockout-HTF31-JuniorMiddlewt.otf);
  }
  @font-face {
    font-family: Liteweight;
    src: url(/wp-content/themes/phenix-theme/assets/fonts/Knockout-HTF49-Liteweight.otf);
  }
  @font-face {
    font-family: FullCruiserwt;
    src: url(/wp-content/themes/phenix-theme/assets/fonts/Knockout-HTF72-FullCruiserwt.otf);
  }
  @font-face {
    font-family: FullHeviweight;
    src: url(/wp-content/themes/phenix-theme/assets/fonts/Knockout-HTF73-FullHeviweight.otf);
  }

  /* row 1 */
  .row.firstcontainer {
    background-color:#90BB5E;
    padding:30px 0;
    text-align:center;
  }
  .greenblock {
    width:70%;
    margin:auto;
  }
  .greenblock p {
    font-family: 'JuniorMiddlewt' !important;
    font-size: 2em;
	font-weight: bold;
	margin: 0;
	line-height: 1.2em;
  }
  .greenblock span {
    color: #fff;
  }
  /* end row 1 */
  /* row 2 BINS */
  .counter {
    margin: auto;
    width: 40%;
    padding-top: 2%;
  }
  .top {
    width: 100%;
    position: absolute;
    z-index: 1;
  }
  .bins {
    margin: 40px 0;
  }
  .binanimate {
    width: 75%;
    margin: auto;
  }

  .binanimate img {
    display: inline-block;
  }
  /* end row 2 */
  /* row 3 CHECKS */
  .checks {
    margin: 70px 0;
    width: 100%;
    text-align:center;
  }
  .checkstext {
    width: 450px;
    z-index: 1;
    margin: auto;
    color: #2A4168;
	line-height: 2.5em;
  }
  .checkstextcontainer {
    position: absolute;
    z-index: 1;
  }
  .checks1 {
    font-family: 'FullHeviweight';
    font-size: 4.2em;
    letter-spacing: 10px;
  }
  .checks2 {
    font-family: 'JuniorFeatherwt';
    font-size: 2.5em;
    letter-spacing: 7px;
  }
  .checks3 {
    font-family: 'FullCruiserwt';
    font-size: 2.7em;
    letter-spacing: 7px;
  }
  .checks4 {
    font-family: 'FullCruiserwt';
    font-size: 2.7em;
    letter-spacing: 6px;
  }
  .checks5 {
    font-family: 'JuniorFeatherwt';
    font-size: 2.7em;
    letter-spacing: 7px;
  }

  .checks img{
    width: 200px;
    display:inline-block;
  }
  /* end row 3 */
  /* row 4 Green/Blue Containers */
  .containerBoxleft {
      position: relative;
      display: inline-block;
    float:left;
    width: 50%;
  }
  .containerBoxright {
      position: relative;
      display: inline-block;
    float:right;
    width: 50%;
  }
  .text-box {
      text-align: center;
  }
  .text-box.green {
    float: right;
    margin: 7% 5% 0 0;
    transform: skewY(-5deg);
    width: 60%;
  }
  .text-box.green p{
  }
  .text-box.blue {
    margin: 5% auto;
    width: 40%;
    transform: skewY(5deg);
    line-height: 1.5em;
  }
  .text-box:before {
     content: '';
     height: 100%;
     vertical-align: middle;
  }
  .bluecontainer {
    width: 100%;
    height: 250px;
    display: inline-block;
    font-family: 'JuniorBantamwt';
    color: #FFF;
    z-index: 1000;
    text-transform: uppercase;
    font-weight: lighter;
    background: #1E263E;
  }
  .greencontainer {
    width: 100%;
    height: 250px;
    display: inline-block;
    font-family: 'JuniorBantamwt';
    color: #FFF;
    z-index: 1000;
    text-transform: uppercase;
    background: #8CC15D;
  }
  .green {
    font-size: 2em;
    line-height: 1.2em;
    text-align: left;
font-weight: bold;
  }
  .green img {
    width: 100px;
  }
  .blue1 {
    font-family: 'JuniorBantamwt' !important;
    font-size: 1.5em;
  }
  .blue2 {
    font-family: 'JuniorBantamwt' !important;
    font-size: 1.4em;
  }
  .blue3 {
    font-family: 'Liteweight';
    font-size: 7em;
    line-height: .8em;
    color: #90BB5E;
  }
  .blue4 {
    font-family: 'JuniorBantamwt' !important;
    font-size: 2.8em;
    line-height: .8em;
  }
  /* end row 4 */
  /* row 5 BOTTOM ROW */
  .bottomtext {
    margin: auto;
    text-align: center;
    font-family: 'JuniorFeatherwt';
    font-weight: lighter;
    font-size: 2.5em;
    text-transform: uppercase;
    margin-top: 50px;
  }
  .greenbar {
    height: 5px;
  margin: auto;
  background: #8CC15D;
  }
  /* end row 5 */

/* temporary fix */
.mobilefix {
  display: none;
}

/* Responsive Breakpoints */

/* Laptop ----------- */
@media only screen
and (max-width : 1200px) {
	.text-box.green {
		margin: 11% 2% 0 0;
		width: 70%;
		line-height: 1.2em;
	}
	.text-box.blue {
		margin: 8% auto;
	}

  /* iPads (landscape) ----------- */
@media only screen
and (max-width : 1024px) {
	.text-box.green {
    float: right;
    margin: 12% 5% 0 0;
    transform: skewY(-5deg);
    width: 70%;
		line-height: 1.1em;
	font-size: 1.8em;
	}
.text-box.blue {
    margin: 9% auto;
    width: 45%;
	}

}
/* iPads (portrait) ----------- */
@media only screen
and (max-width : 768px) {
  .counter {
    width: 63%;
	padding-top: 1%;
  }
	.text-box.green {
		width: 80%;
	}
	.binanimate {
	width: 100%;
	}
}
/* iPhone 6S (landscape) ----------- */
@media only screen
 and (max-width : 736px)
and (orientation : landscape) {

  .binanimate {
    width: 100%;
  }
  .counter {
    width: 70%;
	padding: 0;
  }
  .text-box.green {
    margin-top: 14%;
    margin-right: 3%;
    width: 90%;
    line-height: 1.1em;
	font-size: 1.7em;
  }
  .green img {
    width: 100px;
  }
  .text-box.blue {
    margin-top: 12%;
    width: 55%;
  }
  .blue4 {
    font-size: 2.5em;
  }
  .bottomtext {
    font-size: 2em;
  }
}

/* iPhone 6S (portrait) ----------- */
@media only screen
 and (max-width : 667px)
and (orientation : portrait) {
  .greenblock {
    width: 85%;
    font-size: .7em;
  }

  .binanimate {
    width: 100%;
  }
  .counter {
    padding-top: 2%;
    width: 80%;
  }
  .checkstext {
    width: 90%;
  }
  .checks1 {
    font-size: 2.9em;
  }
  .checks2 {
    font-size: 1.5em;
  }
  .checks3 {
    font-size: 1.9em;
  }
  .checks4 {
    font-size: 1.9em;
  }
  .checks5 {
    font-size: 1.9em;
  }
  .checks img {
    width: 120px;
  }
  .containerBoxleft {
    width: 100%;
  }
  .text-box.green {
    margin-top: 10%;
    margin-right: 0;
    width: 90%;
    line-height: 1.1em;
  }
  .green img {
    width: 100px;
  }
  .containerBoxright {
    width: 100%;
  }
  .text-box.blue {
    margin: 11% auto;
  }
  .blue4 {
    font-size: 2.5em;
  }

  .bottomtext {
    font-size: 1.9em;
  }
}


/* samsung galaxy s7 (landscape) ----------- */
@media only screen
 and (max-width : 568px) {
   .binanimate {
     width: 100%;
   }
   .checkstext {
	line-height:1.6em;
	}
   .checks img {
     width: 115px;
   }
  .checks1 {
    font-size: 2.9em;
  }
  .checks2 {
    font-size: 1.5em;
  }
  .checks3 {
    font-size: 1.9em;
  }
  .checks4 {
    font-size: 1.9em;
  }
  .checks5 {
    font-size: 1.9em;
  }
}

/* Mobile ETC (landscape) ----------- */
@media only screen
and (max-width : 360px) {
	.checks1 {
		font-size: 2.3em;
	}
	.checks2 {
		font-size: 1.1em;
	}
	.checks3 {
		font-size: 1.4em;
	}
	.checks4 {
		font-size: 1.4em;
	}
	.checks5 {
		font-size: 1.4em;
	}
	.checks img {
		width: 100px;
	}
	.text-box.green {
    margin-top: 15%;
    margin-right: 1%;
    width: 97%;
    line-height: 1.1em;
	}
	.text-box.blue {
	    margin: 14% auto;
			width: 50%;
	}
	.bottomtext {
	    font-size: 1.7em;
	}
	.mobilefix {
		min-height: 9px;
		display: block;
	}
	.container {
		overflow-x: hidden;
	}
}