@charset "UTF-8";
/* CSS Document */


/*==========  FINANCE ============*/

/* ------ layout --------- */
@media screen and (max-width: 2400px) {
    .financegraphic {
      margin: 80px 0px 80px 80px;
    }
    .financeleft {
      display: block;
      float: left;
      background-color: #969696;
      color: #000;
      width: 40%;
      height: 300px;
    }
    .financeright {
      display: block;
      float: left;
      width: 40%;
      background-color: #387b2b;
      color: #000;
      height: 300px;
    }
}

@media screen and (max-width: 1200px) {
    .financegraphic {
      margin: 80px 0px 80px 40px;
    }
    .financeleft {
      display: block;
      float: left;
      background-color: #969696;
      color: #000;
      width: 40%;
      height: 250px;
    }
    .financeright {
      display: block;
      float: left;
      width: 40%;
      background-color: #387b2b;
      color: #000;
      height: 250px;
    }
}
 
 @media screen and (max-width: 900px) {
    .financegraphic {
      margin: 80px 0px 80px 40px;
    }
    .financeleft {
      display: block;
      float: left;
      background-color: #969696;
      color: #000;
      width: 40%;
      height: 200px;
    }
    .financeright {
      display: block;
      float: left;
      width: 40%;
      background-color: #387b2b;
      color: #000;
      height: 200px;
    }
}


@media screen and (max-width: 750px) {
    .financegraphic {
		display: table;
  margin: 0 auto;
    }
    .financeleft {
      display: block;
      float: none;
      background-color: #969696;
      color: #000;
      width: 400px;
    }
    .financeright {
      display: block;
      float: none;
      width: 400px;
      background-color: #387b2b;
      color: #000;
      margin-top:-60px;
    }
}
 
 @media screen and (max-width: 400px) {
    .financegraphic {
      margin: 20px 10px 0px 10px;
    }
    .financeleft {
      display: block;
      float: none;
      background-color: #969696;
      color: #000;
      width: 378px;
    }
    .financeright {
      display: block;
      float: none;
      width: 378px;
      background-color: #387b2b;
      color: #000;
      margin-top:-60px;
    }
}

/* ---- triangles ---- */

    .lefttriangle {
      display: block;
      background-color: #387b2b;
    }
    .righttriangle {
      display: block;
      background-color: #fff;
    }


@media screen and (max-width: 2400px) {
    .lefttriangle {
      float: left;
      width: 10%;
      width: 0;
      height: 0;
      border-top: 150px solid transparent;
      border-left: 70px solid #969696;
      border-bottom: 150px solid transparent;
    }
    .righttriangle {
      float: left;
      width: 10%;
      width: 0;
      height: 0;
      border-top: 150px solid transparent;
      border-left: 70px solid #387b2b;
      border-bottom: 150px solid transparent;
    }
}

@media screen and (max-width: 1200px) {
    .lefttriangle {
      float: left;
      width: 10%;
      width: 0;
      height: 0;
      border-top: 125px solid transparent;
      border-left: 70px solid #969696;
      border-bottom: 125px solid transparent;
    }
    .righttriangle {
      float: left;
      width: 10%;
      width: 0;
      height: 0;
      border-top: 125px solid transparent;
      border-left: 70px solid #387b2b;
      border-bottom: 125px solid transparent;
    }
}

@media screen and (max-width: 900px) {
    .lefttriangle {
      float: left;
      width: 10%;
      width: 0;
      height: 0;
      border-top: 100px solid transparent;
      border-left: 60px solid #969696;
      border-bottom: 100px solid transparent;
    }
    .righttriangle {
      float: left;
      width: 10%;
      width: 0;
      height: 0;
      border-top: 100px solid transparent;
      border-left: 60px solid #387b2b;
      border-bottom: 100px solid transparent;
    }
}

@media screen and (max-width: 750px) {
    .lefttriangle {
      float: none;
      width: 0;
      height: 0;
       border-left: 200px solid transparent;
		border-right: 200px solid transparent;
		border-top: 50px solid #969696;
    }
    .righttriangle {
      float: none;
      width: 0;
      height: 0;
      border-left: 200px solid transparent;
	  border-right: 200px solid transparent;
	  border-top: 50px solid #387b2b;
    }
}

@media screen and (max-width: 400px) {
    .lefttriangle {
      float: none;
      width: 0;
      height: 0;
       border-left: 189px solid transparent;
		border-right: 189px solid transparent;
		border-top: 50px solid #969696;
    }
    .righttriangle {
      float: none;
      width: 0;
      height: 0;
      border-left: 189px solid transparent;
	  border-right: 189px solid transparent;
	  border-top: 50px solid #387b2b;
    }
}




.clearfix::after {
  content: "";
  clear: both;
  display: table;
}


/* ========= TYPOGRAPHY =========== */


.plantertitle {
  color: white;
}
.financelist {
  font-family: "jd_sans_probook", 'Helvetica Neue', Helvetica, Arial;
  color: white;
}
.financeyellow {
  color: #ffdd00;
  font-family: "jd_sans_probold", 'Helvetica Neue', Helvetica, Arial;
}
.financedisclaimer {
  font-size: 12px;
  color: #999;
  margin: -50px 20px 80px 0px;
  text-align:center;
}

/* ======== MEDIAQUERY ======== */


@media screen and (max-width: 2400px) {
  .plantertitle {
    font-size: 64px;
    padding: 70px 50px 50px 50px;
    line-height: 56px;
  }
  .financelist {
    font-size: 40px;
    padding: 25px 0px 0px 60px;
 	line-height: 50px;
    margin-top: 20px;
  }
}


@media screen and (max-width: 1200px) {
  .plantertitle {
    font-size: 56px;
    line-height: 56px;
    padding: 50px 0px 0px 40px;
  }
  .financelist {
    font-size: 35px;
    line-height: 45px;
    padding: 15px 0px 0px 40px;
    margin-top: 20px;
  }
}

@media screen and (max-width: 1050px) {
  .plantertitle {
    font-size: 48px;
    line-height: 49px;
      padding: 50px 0px 0px 40px;
  }
  .financelist {
    font-size: 28px;
    line-height: 40px;
    padding: 20px 0px 0px 60px;
    margin-top: 20px;
  }
}

@media screen and (max-width: 900px) {
  .plantertitle {
    font-size: 40px;
    line-height: 40px;
     padding: 20px 0px 0px 30px;
  }
  .financelist {
    font-size: 24px;
    line-height: 30px;
    padding: 0px 0px 0px 60px;
  }
}

@media screen and (max-width: 750px) {
  .plantertitle {
    text-align:center;
    font-size: 52px;
    line-height: 50px;
    padding: 60px 0px 0px 0px;
  }
  .financelist {
    font-size: 30px;
    line-height: 40px;
    padding: 0px 0px 0px 40px;
    margin-top:0;
  }
  	.financedisclaimer {
      margin: -50px 10px 60px 10px;
	}
}

@media screen and (max-width: 400px) {
  .plantertitle {
    text-align:center;
    font-size: 48px;
    line-height: 48px;
    padding: 40px 0px 0px 0px;
  }
  .financelist {
    font-size: 32px;
    line-height: 38px;
    padding: 0px 0px 0px 50px;
    margin-top:0;
  }
}