!button,hr,input{overflow:visible}audio,canvas,progress,video{display:inline-block}progress,sub,sup{vertical-align:baseline}html{font-family:sans-serif;line-height:1.15;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0} menu,article,aside,details,footer,header,nav,section{display:block}h1{font-size:2em;margin:.67em 0}figcaption,figure,main{display:block}figure{margin:1em 40px}hr{box-sizing:content-box;height:0}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}a{background-color:transparent;-webkit-text-decoration-skip:objects}a:active,a:hover{outline-width:0}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}dfn{font-style:italic}mark{background-color:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}audio:not([controls]){display:none;height:0}img{border-style:none}svg:not(:root){overflow:hidden}button,input,optgroup,select,textarea{font-family:sans-serif;font-size:100%;line-height:1.15;margin:0}button,input{}button,select{text-transform:none}[type=submit], [type=reset],button,html [type=button]{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:ButtonText dotted 1px}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}[hidden],template{display:none}
* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
.clearfix:after { visibility: hidden; display: block; font-size: 0; content: ""; clear: both; height: 0;}


body {
  font-family: 'Poppins', sans-serif;
  padding: 0 150px 0 150px;
  background-color: rgba(211,211,211,0.7);
}

header {
  padding: 50px;
}

header, .consectetur, .neque, .ffContact {
  background-color: white;
}

nav img {
  max-width: 75px;
  max-height: 75px;
}

nav, nav div {
  display: flex;
  justify-content: space-between;
}

nav ul {
  display: flex;
  list-style-type: none;
  padding:0;
  margin: 0;
  justify-content: space-around;
}

nav li {
  padding: 10px;
  font-weight: bold;
  font-size: 0.7em;
}

.titleNum {
  display: flex;
  justify-content: space-between;
  padding-top: 40px;
}

.title, .num {
  max-width: 45%;
  padding-bottom: 0;
}

.calcHeight {
  margin-top: 40px;
}

#lorem {
  font-size: 5em;
  margin: 0;
  font-weight: bold;
}

.num {
  font-size: 18em;
  color: lightgrey;
  font-weight: bold;
}

.plantPic {
  position: relative;
  min-height: 300px;
}


.pic {
  background-image: url(images/plantComp.jpg);
  height: 95%;
  width: 70%;
  position: absolute;
  right:0;
  background-size: cover;
}

.edges {
  display: flex;
  justify-content: space-between;
}

.edges p {
  border-bottom: 5px solid black;
  min-width: 100px;
  padding-bottom: 5px;
}

.edges p:nth-child(2) {
  text-align: right;
}

/* <!--consectetur section--> */

.consectetur {
  padding: 20px 50px 0px 50px;
}

.heading {
    max-width: 400px;
}

.headingcons {
  font-weight: bold;
  margin: 0;
  padding: 1.5px;
}

.consectetur h2, .epertize h2 {
  font-size: 2.5em;
  margin: 0;
  padding: 0;
}

.headingpara {
  margin: 0;
  padding:1.5px;
}

.iconGrid {
  padding: 50px 0 50px 0;
  max-width: 95%;
  margin: 0 auto;
}

.gridbold {
  font-weight: bold;
}

.box {
  display: flex;
  max-width: 30%;
  max-height: 50%;
  justify-content: space-between;
}

.box img {
  margin-right: 10px;
  margin-left: 20px;
  padding-top: 10px;
}

.gridBox1, .gridBox2 {
  display: flex;
}

/* epertize section with the pic and text boxes */

.epertizeGrid {
    padding: 50px 10px 50px 10px;
    background-color: #E6E7E8;
}

.epertize {
  max-width: 50%;
  margin: 0 auto;
  text-align: center;
  padding-bottom: 20px;

}

.twoGrid img {
  max-width: 500px;
  max-height: 300px;
}

.gridbox1a, .gridbox2a, .gridbox3, .gridbox4 {
  display: flex;
  min-height: 35vh;

}

.twoGrid {
  padding-left: 50px;
  padding-right: 50px;
}

.gridText {
  margin-top: 35px;
  min-width: 50%;
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-start;
}

.gridPic1, .gridPic2, .gridPic3, .gridPic4 {
  margin-top: 35px;
}

.gridPic1 {
  background-image: url("images/christopher-gower-291240.jpg");
  width: 200%;
  background-size: cover;
  margin-right: 25px;
}

.gridPic2 {
  background-image: url("images/christopher-gower-291240.jpg");
  width: 200%;
  background-size: cover;
  margin-left: 25px;
}

.gridPic3 {
  background-image: url("images/christopher-gower-291246.jpg");
  width: 200%;
  background-size: cover;
  margin-right: 25px;
}

.gridPic4 {
    background-image: url("images/christopher-gower-291239.jpg");
    width: 200%;
    background-size: cover;
    margin-left: 25px;
}

.marginleft {
  padding-left: 25px;
}

.marginright {
  padding-right: 25px;
}

.gridBrief {
  display: flex;
  justify-content: space-between;
}

.gridBrief h3 {
  font-weight: bold;
  font-size: 0.7em;
  margin-bottom: 0;
}

.gridBrief p {
  text-transform: uppercase;
  font-size: 0.5em;
  font-weight: bold;
}

.gridBrief {
  font-weight: bold;
}

.inside {
  text-align: right;
}
/* 940 and OVER neque section */

.neque {
  min-height: 40vh;
  width: 100%;
  text-align: center;
  padding: 100px 100px 100px 100px;
  margin: 0 auto;

}

.contButton {
  text-transform: uppercase;
  padding: 20px;
  color: white;
  background-color: black;
  max-height: 100px;
  max-width: 250px;
  margin: 0 auto;
  margin-top: 40px;
}

/* 940 and over sales ads section */

.sales {
  background-color: rgba(211,211,211,0.4);
  padding: 50px;
  display: flex;
  flex-direction: row;
  position: relative;
}

.tenDollars, .ntDollars, .nnDollars {
    margin: 0 auto;
    text-align: center;
    padding: 20px;
    min-height: 50vh;
    width: calc(30% - 5px);
    position: relative;
}

.ntDollars {
  background-color: black;
  color: white;
  padding: 20px;
}

.tenDollars, .nnDollars {
  background-color: white;

}

.cost, .cost2 {
  border-bottom: 2px solid rgba(211,211,211,0.8);
  padding-bottom: 20px;
  padding-top: 10px;
  max-width: 150px;
  margin: 0 auto;
  min-height: 150px;
}

#day {
  font-size: 0.5em;
  position: absolute;
  bottom: 10px;
  left:70px;
}

.price {
  display: flex;
  max-width: 100px;
  margin: 0 auto;
  margin-left: 5px;
  text-align: center;
  min-height: 50px;
  justify-content: space-between;
}

.paras {
  text-transform: uppercase;
  font-size: 0.5em;
  text-align: left;
  margin-left: 30px;
  padding: 10px 0 20px 0;
}
.paras p {
  margin-bottom: 15px;
}

.b {
  font-size: 3.7em;
  padding-left: 10px;
  padding-right: 10px;
}

.c {
  padding-top: 40px;
}

.cost p, .cost2 p {
  margin-right: 70px;
  font-family: 'Roboto', sans-serif;
  text-transform: uppercase;

}

.circle {
  max-width: 50px;
  min-height: 50px;
  border-radius: 50%;
  background-color: white;
  color: black;
  text-transform: uppercase;
  font-size: 0.7em;
  text-align: center;
  padding-top: 15px;
  font-family: 'Roboto', sans-serif;
  position: absolute;
  left: 55%;
  top: 15px;
  z-index: 1;

}

.lorumButton {
  min-height: 50px;
  min-width: 150px;
  line-height: 50px;
  text-align: center;
  background-color: black;
  color: white;
  font-size: 0.8em;
  margin: 0 auto;
  font-size: 0.8em;

}

.lorumButton2 {
  min-height: 50px;
  line-height: 50px;
  min-width: 150px;
  font-size: 0.8em;
  text-align: center;
  background-color: white;
  color: black;
  margin: 0 auto;
}

.lorumButton, .lorumButton2 {
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    left: 20px;
    right: 20px;
    bottom: 40px;
}

/* 940px and OVER short lorum section with log and button */

.ffContact {
  background-color: white;
  width: 100%;
  min-height: 40vh;
  margin: 0 auto;
  text-align: left;
  padding: 100px;
  display: flex;
  justify-content: space-around;

}

.florum {
  /* padding-top: 30px; */
  margin-left: 20px;
}

.clorum {
  margin-left: 100px;
  /* padding-top: 30px; */
}


.clorum div {
  min-height: 50px;
  max-width: 250px;
  text-align: center;
  background-color: black;
  color: white;
  line-height: 50px;
  text-transform: uppercase;
  font-size: 0.8em;


}

/* 940 and over footer */
footer {
  color: white;
  background-color: black;
  min-height: 50vh;
}

.bottom {
  display: flex;
  flex-direction: row;
  padding-top: 60px;
}

.iconz {
  display: flex;
  justify-content: space-between;
  max-width: 250px;
  margin: 0 auto;
  padding-top: 50px;
  padding-bottom: 50px;
  flex-direction: column;
}

.iconz p {
  padding-left: 10px;
  margin-top: 5px;
  max-width: 50px;

}

.blah {
  display: flex;

}

.blah img {
  max-height: 50px;
  max-width: 50px;

}

.la {
  padding-left: 10px;
}

i {
  margin-left: 10px;
}

.socMed {
  padding-top: 15px;
}

.list {
  max-width: 200px;
  margin: 0 auto;
  text-align: left;
  font-size: 0.7em;
  margin-top: 50px;
}

.list li {
  padding-top: 15px;
}

.list ul {
  list-style-type: none;
  margin-left: 0;
  padding-left: 0;
  padding-top: 15px;
  padding-bottom: 20px;
}

.list p {
  text-transform: uppercase;
  color: darkgrey;
}

.cap {
  text-transform: uppercase;

}

footer li {
  padding-top: 3px;
}


footer li:hover {
  color: grey;
  font-size: 1.2em;
}


.subscribe {
  max-width: 300px;
  margin: 0 auto;
  text-align: left;
  margin-top: 50px;
  padding-bottom: 50px;
  color: darkgrey;
  font-size: 0.7em;
}

input {
  min-width: 250px;
  max-height: 50px;
  line-height: 100px;
  padding-left: 20px;
  color: white;
  background-color: black;
  border: 2px darkgrey solid;
  margin-top: 10px;
}

.subscribe div {
  max-width: 125px;
  height: 50px;
  color: black;
  font-weight: bold;
  background-color: white;
  line-height: 50px;
  text-align: center;
  font-family: 'Roboto', sans-serif;
  margin-top: 20px;
}

/*--MEDIA QUERIES-->*/

/* FIRST BREAKPOINT/SECOND-BIGGEST VERSION - Portrait tablet and small desktops */
@media (max-width: 940px) {

  body {
    font-family: 'Poppins', sans-serif;
    padding: 0 50px 0 50px;
    background-color: rgba(211,211,211,0.7);
  }

  header {
    padding: 50px;
  }

  header, .consectetur, .neque, .ffContact {
    background-color: white;
  }

  nav img {
    max-width: 50px;
    max-height: 50px;
    margin-left: 10px;
    margin-top: 15px;

  }

  nav {
    display: flex;
    justify-content: space-around;
    width: calc(100% - 30px);
    margin: 0 auto;
  }

  nav ul {
    list-style-type: none;
    padding:0;
    margin: 0;
    margin-right: 20px;

  }

  nav li {
    padding: 10px;
    height: 40px;
    width: 60px;
    text-align: center;
    font-weight: bold;
    font-size: 0.7em;

  }

  .navB {
  margin-left: 10px;
  }

  .titleNum {
    display: flex;
    justify-content: space-around;
    padding: 5px;
    margin-bottom: 20px;
  }

  #lorem {
    font-size: 2em;
    margin: 0;
    font-weight: bold;
  }

  .num {
    font-size: 6em;
    color: lightgrey;
    font-weight: bold;
    padding-top: 5%;
  }

  .plantPic {
    min-height: 300px;
    width: 100%;
    margin: 0 auto;
  }


  .pic {
    background-image: url(images/plantComp.jpg);
    height: 95%;
    width: calc(100% - 5px);
    margin: 0 auto;
    background-size: cover;
  }

  .edges {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
  }

  .edges p {
    border-bottom: 3px solid black;
    min-width: 50px;
    padding-bottom: 2px;
  }

  .edges p:nth-child(2) {
    text-align: right;
  }

  /* <!--940 to 768 consectetur section--> */

  .consectetur {
    padding: 20px 10px 0px 10px;

  }

  .heading {
      max-width: 400px;
      text-align: center;
      margin: 0 auto;
  }

  .headingcons {
    font-weight: bold;
    margin: 0;
    padding: 1.5px;
  }

  .consectetur h2, .epertize h2 {
    font-size: 2.5em;
    margin: 0;
    padding: 0;
  }

  .headingpara {
    margin: 0;
    padding:1.5px;
  }

  .iconGrid {
    padding: 50px 0 50px 0;
    max-width: 40%;
    margin: 0 auto;
  }

  .gridbold {
    font-weight: bold;
  }

  .box {
    display: flex;
    max-width: 90%;
    max-height: 50%;
    justify-content: space-between;
    text-align: center;
  }

  .box img {
    margin-right: 10px;
    margin-left: 20px;
    padding-top: 30px;
  }

  .gridBox1, .gridBox2 {
    display: block;
  }

  .box p {
    max-width: 200px;
  }
  /* 940 to 768- epertize section with the pic and text boxes */

  .epertizeGrid {
      padding: 50px 10px 50px 10px;
      background-color: #E6E7E8;
  }

  .epertize {
    max-width: 50%;
    margin: 0 auto;
    text-align: center;
    margin-bottom: 40px;

  }

  .gridbox1a, .gridbox2a, .gridbox3, .gridbox4 {
    display:flex;
    flex-direction: column;
    margin-bottom: 20px;
  }

  .twoGrid {
    padding-left: 15px;
    padding-right: 15px;
    max-width: 50%;
    margin: 0 auto;
    margin-top: 30px;
  }

  .gridText {
    /* margin-top: 0px; */
    display: flex;
    flex-direction: column-reverse;
    justify-content: flex-end;
  }

  .gridPic1, .gridPic2, .gridPic3, .gridPic4 {
    margin-top: 15px;
    margin-bottom: 15px;
    min-height: 200px;

  }

  .gridPic1 {
    background-image: url("images/christopher-gower-291240.jpg");
    width: 100%;
    background-size: cover;
    margin: 0;
  }

  .gridPic2 {
    background-image: url("images/christopher-gower-291240.jpg");
    width: 100%;
    background-size: cover;
    margin: 0;
  }

  .gridPic3 {
    background-image: url("images/christopher-gower-291246.jpg");
    width: 100%;
    background-size: cover;
    margin-top: 40px;
    margin-bottom: 0;
  }

  .gridPic4 {
      background-image: url("images/christopher-gower-291239.jpg");
      width: 100%;
      background-size: cover;
      margin: 0;
  }

  .marginleft {
    padding: 0px;
    margin-top: 0;

  }

  .marginright {
    padding: 0px;
  }

  .gridBrief {
    display: flex;
    justify-content: space-between;
  }

  .gridBrief h3 {
    font-weight: bold;
    font-size: 0.7em;
    margin-bottom: 0;
  }

  .gridBrief p {
    text-transform: uppercase;
    font-size: 0.5em;
    font-weight: bold;
  }

  .gridBrief {
    font-weight: bold;
  }

  .inside {
    text-align: left;
  }
  /* 940 to 768 neque section */

  .neque {
    min-height: 40vh;
    width: 100%;
    text-align: center;
    padding: 75px 50px 75px 50px;
    margin: 0 auto;

  }

  .contButton {
    text-transform: uppercase;
    padding: 20px;
    color: white;
    background-color: black;
    max-height: 100px;
    max-width: 250px;
    margin: 0 auto;
    margin-top: 40px;
  }

  /* 940 to 768 sales ads section */

  .sales {
    background-color: rgba(211,211,211,0.4);
    padding: 50px;
    display: flex;
    flex-direction: column;
    position: relative;
  }

  .tenDollars, .ntDollars, .nnDollars {
      margin: 20px auto;
      text-align: center;
      padding: 20px;
      min-height: 50vh;
      width: 320px;
      position: relative;
  }

  .ntDollars {
    background-color: black;
    color: white;
    padding: 20px;
  }

  .tenDollars, .nnDollars {
    background-color: white;

  }

  .cost, .cost2 {
    border-bottom: 2px solid rgba(211,211,211,0.8);
    padding-bottom: 20px;
    padding-top: 10px;
    max-width: 150px;
    margin: 0 auto;
    min-height: 150px;
  }

  #day {
    font-size: 0.5em;
    position: absolute;
    bottom: 10px;
    margin-left: 20px;
    margin-right: 20px;
  }


  .price {
    display: flex;
    max-width: 100px;
    margin: 0 auto;
    margin-left: 5px;
    text-align: center;
    min-height: 50px;
    justify-content: space-between;
  }

  .paras {
    text-transform: uppercase;
    font-size: 0.5em;
    text-align: left;
    max-width: 50%;
    margin-left: 30px;
    padding: 10px 0 20px 0;
  }

  .paras p {
    margin-bottom: 15px;
  }

  .b {
    font-size: 3.7em;
    padding-left: 10px;
    padding-right: 10px;
  }

  .c {
    padding-top: 40px;
  }

  .cost p, .cost2 p {
    margin-right: 70px;
    font-family: 'Roboto', sans-serif;
    text-transform: uppercase;

  }

  .circle {
    max-width: 0;
    min-height: 0;
    border-radius: 50%;
    background-color: white;
    color: black;
    text-transform: uppercase;
    font-size: 0.7em;
    text-align: center;
    padding-top: 15px;
    font-family: 'Roboto', sans-serif;
    position: absolute;
    left: 60%;
    top: 500px;
    z-index: 1;

  }

  .lorumButton {
    min-height: 50px;
    min-width: 150px;
    line-height: 50px;
    text-align: center;
    background-color: black;
    color: white;
    font-size: 0.8em;
    margin: 0 auto;
    font-size: 0.8em;

  }

  .lorumButton2 {
    min-height: 50px;
    line-height: 50px;
    min-width: 150px;
    font-size: 0.8em;
    text-align: center;
    background-color: white;
    color: black;
    margin: 0 auto;
  }

  .lorumButton, .lorumButton2 {
      position: absolute;
      margin-left: auto;
      margin-right: auto;
      left: 20px;
      right: 20px;
      bottom: 40px;
  }


  /* 940 to 780  short lorum section with log and button */

  .ffContact {
    background-color: white;
    width: 100%;
    height: 100%;
    margin: 0 auto;
    text-align: center;
    padding: 75px 50px 75px 50px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;

  }


  .clorum, .florum {
  margin-left: 0;
  margin-right: 0;
  }

  .clorum {
    margin-top: -30px;
  }


  .clorum div {
    min-height: 50px;
    max-width: 250px;
    margin: 0 auto;
    margin-top: 20px;
    text-align: center;
    background-color: black;
    color: white;
    line-height: 50px;
    text-transform: uppercase;
    font-size: 0.8em;


  }

  /* ~940 to 768 footer */
  footer {
    color: white;
    background-color: black;
    min-height: 50vh;

  }

  .bottom {
    display: flex;
    flex-direction: column;
    padding-top: 20px;

  }

  .iconz {
    display: flex;
    justify-content: space-between;
    max-width: 250px;
    margin: 0 auto;
    padding-top: 50px;
    padding-bottom: 50px;
    flex-direction: column;
  }

  .iconz p {
    padding-left: 10px;
    margin-top: 15px;
    text-align: center;
  }

  .blah {
    display: flex;
    flex-direction: column;
    margin: 0;

  }

  .blah img {
    max-height: 50px;
    max-width: 50px;
    margin: 0 auto;

  }

  .la {
    padding-left: 20px;
  }

  i {
    margin-left: 0;
  }

  .socMed {
    padding-top: 15px;
  }

  .list {
    max-width: 200px;
    margin: 0 auto;
    text-align: center;
    font-size: 0.7em;
    margin-top: 15px;
  }

  .list li {
    padding-top: 15px;
  }

  .list ul {
    list-style-type: none;
    margin-left: 0;
    padding-left: 0;
    padding-top: 0;
    padding-bottom: 0;
  }

  .list p {
    text-transform: uppercase;
    color: darkgrey;
  }

  .cap {
    text-transform: uppercase;

  }

  footer li {
    padding-top: 3px;
  }


  footer li:hover {
    color: grey;
    font-size: 1.2em;
  }

  .subscribe {
    max-width: 300px;
    margin: 0 auto;
    text-align: center;
    margin-top: 50px;
    padding-bottom: 50px;
    color: darkgrey;
    font-size: 0.7em;
  }

  input {
    min-width: 250px;
    max-height: 50px;
    line-height: 100px;
    padding-left: 20px;
    color: white;
    background-color: black;
    border: 2px darkgrey solid;
    margin: 0 auto;
    margin-top: 10px;

  }

  .subscribe div {
    max-width: 125px;
    height: 50px;
    color: black;
    font-weight: bold;
    background-color: white;
    line-height: 50px;
    text-align: center;
    font-family: 'Roboto', sans-serif;
    margin: 0 auto;
    margin-top: 20px;
  }



}

/* SECOND-SMALLEST BREAKPOINT 768px to 480px: Landscape phone to portrait tablet */
@media (max-width: 768px) {

  body {
    font-family: 'Poppins', sans-serif;
    padding: 0 35px 0 35px;
    background-color: rgba(211,211,211,0.7);
  }

  header {
    padding: 30px;
  }

  header, .consectetur, .neque, .ffContact {
    background-color: white;
  }

  nav img {
    max-width: 50px;
    max-height: 50px;
    margin-left: 10px;
    margin-top: 15px;

  }

  nav {
    display: flex;
    justify-content: space-around;
    width: calc(100% - 20px);
    margin: 0 auto;
  }

  nav ul {
    list-style-type: none;
    padding:0;
    margin: 0;
    margin-right: 20px;

  }

  nav li {
    padding: 10px;
    height: 40px;
    width: 60px;
    text-align: center;
    font-weight: bold;
    font-size: 0.7em;

  }

  .navB {
  margin-left: 10px;
}

  .titleNum {
    display: flex;
    justify-content: space-around;
    padding: 5px;
    margin-bottom: 20px;
  }

  #lorem {
    font-size: 2em;
    margin: 0;
    font-weight: bold;
  }

  .num {
    font-size: 6em;
    color: lightgrey;
    font-weight: bold;
    padding-top: 5%;
  }

  .plantPic {
    min-height: 300px;
    width: 100%;
    margin: 0 auto;
  }


  .pic {
    background-image: url(images/plantComp.jpg);
    height: 95%;
    width: calc(100% - 5px);
    margin: 0 auto;
    background-size: cover;
  }

  .edges {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
  }

  .edges p {
    border-bottom: 3px solid black;
    min-width: 50px;
    padding-bottom: 2px;
  }

  .edges p:nth-child(2) {
    text-align: right;
  }

  /* <!--768 down to to 480 consectetur section--> */

  .consectetur {
    padding: 20px 10px 0px 10px;

  }

  .heading {
      max-width: 400px;
      text-align: center;
      margin: 0 auto;
  }

  .headingcons {
    font-weight: bold;
    margin: 0;
    padding: 1.5px;
  }

  .consectetur h2, .epertize h2 {
    font-size: 2.5em;
    margin: 0;
    padding: 0;
  }

  .headingpara {
    margin: 0;
    padding:1.5px;
  }

  .iconGrid {
    padding: 50px 0 50px 0;
    max-width: 50%;
    margin: 0 auto;
  }

  .gridbold {
    font-weight: bold;
  }

  .box {
    display: flex;
    max-width: 90%;
    max-height: 50%;
    justify-content: space-between;
    text-align: center;
  }

  .box img {
    margin-right: 10px;
    margin-left: 20px;
    padding-top: 10px;
  }

  .gridBox1, .gridBox2 {
    display: block;
  }

  /* 768 down to 481 - epertize section with the pic and text boxes */

  .epertizeGrid {
      padding: 50px 10px 50px 10px;
      background-color: #E6E7E8;
  }

  .epertize {
    max-width: 50%;
    margin: 0 auto;
    text-align: center;
    margin-bottom: 40px;

  }

  .gridbox1a, .gridbox2a, .gridbox3, .gridbox4 {
    display:flex;
    flex-direction: column;
  }

  .twoGrid {
    padding-left: 15px;
    padding-right: 15px;
    max-width: 50%;
    margin: 0 auto;
    margin-top: 30px;
  }

  .gridText {
    margin-top: 35px;
    /* min-width: 50%; */
    display: flex;
    flex-direction: column-reverse;
    justify-content: flex-end;
  }

  .gridPic1, .gridPic2, .gridPic3, .gridPic4 {
    margin-top: 15px;
    margin-bottom: 15px;
    min-height: 200px;
  }

  .gridPic1 {
    background-image: url("images/christopher-gower-291240.jpg");
    width: 100%;
    background-size: cover;
    margin: 0;
  }

  .gridPic2 {
    background-image: url("images/christopher-gower-291240.jpg");
    width: 100%;
    background-size: cover;
    margin: 0;
  }

  .gridPic3 {
    background-image: url("images/christopher-gower-291246.jpg");
    width: 100%;
    background-size: cover;
    margin-top: 25px;
    margin-bottom: 0;
  }

  .gridPic4 {
      background-image: url("images/christopher-gower-291239.jpg");
      width: 100%;
      background-size: cover;
      margin: 0;
  }

  .marginleft {
    padding: 0px;
    margin-top: 0;
  }

  .marginright {
    padding: 0px;
  }

  .gridbox3 {
    margin-top: 70px;
  }

  .gridBrief {
    display: flex;
    justify-content: space-between;
  }

  .gridBrief h3 {
    font-weight: bold;
    font-size: 0.7em;
    margin-bottom: 0;
  }

  .gridBrief p {
    text-transform: uppercase;
    font-size: 0.5em;
    font-weight: bold;
  }

  .gridBrief {
    font-weight: bold;
  }

  .inside {
    text-align: left;
  }
  /* 768 down to 481 AND SMALLER neque section */

  .neque {
    min-height: 40vh;
    width: 100%;
    text-align: center;
    padding: 75px 50px 75px 50px;
    margin: 0 auto;

  }

  .contButton {
    text-transform: uppercase;
    padding: 20px;
    color: white;
    background-color: black;
    max-height: 100px;
    max-width: 250px;
    margin: 0 auto;
    margin-top: 40px;
  }

  /* 768 to 481 AND SMALLER sales ads section */

  .sales {
    background-color: rgba(211,211,211,0.4);
    padding: 50px;
    display: flex;
    flex-direction: column;
    position: relative;
  }

  .tenDollars, .ntDollars, .nnDollars {
      margin: 20px auto;
      text-align: center;
      padding: 20px;
      min-height: 50vh;
      width: 320px;
      position: relative;
  }

  .ntDollars {
    background-color: black;
    color: white;
    padding: 20px;
  }

  .tenDollars, .nnDollars {
    background-color: white;

  }

  .cost, .cost2 {
    border-bottom: 2px solid rgba(211,211,211,0.8);
    padding-bottom: 20px;
    padding-top: 10px;
    max-width: 150px;
    margin: 0 auto;
    min-height: 150px;
  }

  #day {
    font-size: 0.5em;
    position: absolute;
    bottom: 10px;
    margin-left: 20px;
    margin-right: 20px;
  }


  .price {
    display: flex;
    max-width: 100px;
    margin: 0 auto;
    margin-left: 5px;
    text-align: center;
    min-height: 50px;
    justify-content: space-between;
  }

  .paras {
    text-transform: uppercase;
    font-size: 0.5em;
    text-align: left;
    max-width: 50%;
    margin-left: 30px;
    padding: 10px 0 20px 0;
  }

  .paras p {
    margin-bottom: 15px;
  }

  .b {
    font-size: 3.7em;
    padding-left: 10px;
    padding-right: 10px;
  }

  .c {
    padding-top: 40px;
  }

  .cost p, .cost2 p {
    margin-right: 70px;
    font-family: 'Roboto', sans-serif;
    text-transform: uppercase;

  }

  .circle {
    max-width: 0;
    min-height: 0;
    border-radius: 50%;
    background-color: white;
    color: black;
    text-transform: uppercase;
    font-size: 0.7em;
    text-align: center;
    padding-top: 15px;
    font-family: 'Roboto', sans-serif;
    position: absolute;
    left: 60%;
    top: 500px;
    z-index: 1;

  }

  .lorumButton {
    min-height: 50px;
    min-width: 150px;
    line-height: 50px;
    text-align: center;
    background-color: black;
    color: white;
    font-size: 0.8em;
    margin: 0 auto;
    font-size: 0.8em;

  }

  .lorumButton2 {
    min-height: 50px;
    line-height: 50px;
    min-width: 150px;
    font-size: 0.8em;
    text-align: center;
    background-color: white;
    color: black;
    margin: 0 auto;
  }

  .lorumButton, .lorumButton2 {
      position: absolute;
      margin-left: auto;
      margin-right: auto;
      left: 20px;
      right: 20px;
      bottom: 40px;
  }


  /* 780 AND SMALLER short lorum section with log and button */

  .ffContact {
    background-color: white;
    width: 100%;
    height: 100%;
    margin: 0 auto;
    text-align: center;
    padding: 75px 50px 75px 50px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;

  }


  .clorum, .florum {
  margin-left: 0;
  margin-right: 0;

  }

  .clorum {
    margin-top: -30px;
  }


  .clorum div {
    min-height: 50px;
    max-width: 250px;
    margin: 0 auto;
    margin-top: 20px;
    text-align: center;
    background-color: black;
    color: white;
    line-height: 50px;
    text-transform: uppercase;
    font-size: 0.8em;


  }

  /* ~780 to 480 footer */
  footer {
    color: white;
    background-color: black;
    min-height: 50vh;

  }

  .bottom {
    display: flex;
    flex-direction: column;
    padding-top: 20px;

  }

  .iconz {
    display: flex;
    justify-content: space-between;
    max-width: 250px;
    margin: 0 auto;
    padding-top: 50px;
    padding-bottom: 50px;
    flex-direction: column;
  }

  .iconz p {
    padding-left: 10px;
    margin-top: 15px;
    text-align: center;
  }

  .blah {
    display: flex;
    flex-direction: column;
    margin: 0;

  }

  .blah img {
    max-height: 50px;
    max-width: 50px;
    margin: 0 auto;

  }

  .la {
    padding-left: 20px;
  }

  i {
    margin-left: 0;
  }

  .socMed {
    padding-top: 15px;
  }

  .list {
    max-width: 200px;
    margin: 0 auto;
    text-align: center;
    font-size: 0.7em;
    margin-top: 15px;
  }

  .list li {
    padding-top: 15px;
  }

  .list ul {
    list-style-type: none;
    margin-left: 0;
    padding-left: 0;
    padding-top: 0;
    padding-bottom: 0;
  }

  .list p {
    text-transform: uppercase;
    color: darkgrey;
  }

  .cap {
    text-transform: uppercase;

  }

  footer li {
    padding-top: 3px;
  }


  footer li:hover {
    color: grey;
    font-size: 1.2em;
  }

  .subscribe {
    max-width: 300px;
    margin: 0 auto;
    text-align: center;
    margin-top: 50px;
    padding-bottom: 50px;
    color: darkgrey;
    font-size: 0.7em;
  }

  input {
    min-width: 250px;
    max-height: 50px;
    line-height: 100px;
    padding-left: 20px;
    color: white;
    background-color: black;
    border: 2px darkgrey solid;
    margin: 0 auto;
    margin-top: 10px;

  }

  .subscribe div {
    max-width: 125px;
    height: 50px;
    color: black;
    font-weight: bold;
    background-color: white;
    line-height: 50px;
    text-align: center;
    font-family: 'Roboto', sans-serif;
    margin: 0 auto;
    margin-top: 20px;
  }





}


/* 480px AND BELOW: LANDSCAPE PHONES AND SMALLER */
@media (max-width: 480px) {

  body {
    font-family: 'Poppins', sans-serif;
    padding: 0 15px 0 15px;
    background-color: rgba(211,211,211,0.7);
  }

  header {
    padding: 10px;
  }

  header, .consectetur, .neque, .ffContact {
    background-color: white;
  }

  nav img {
    max-width: 50px;
    max-height: 50px;
    margin-left: 10px;
    margin-top: 15px;

  }

  nav {
    display: flex;
    justify-content: space-between;
    width: calc(100% - 20px);
    margin: 0 auto;
  }

  nav ul {
    list-style-type: none;
    display: flex;
    flex-direction: column;
    padding:0;
    margin: 0;
    margin-right: 20px;

  }

  nav li {
    padding: 10px;
    height: 40px;
    width: 48px;
    font-weight: bold;
    font-size: 0.7em;

  }

  .titleNum {
    display: flex;
    justify-content: space-around;
    padding: 5px;
    margin-bottom: 20px;
  }

  #lorem {
    font-size: 2em;
    margin: 0;
    font-weight: bold;
  }

  .num {
    font-size: 6em;
    color: lightgrey;
    font-weight: bold;
    padding-top: 20%;
  }

  .plantPic {
    min-height: 300px;
    width: 100%;
    margin: 0 auto;
  }


  .pic {
    background-image: url(images/plantComp.jpg);
    height: 95%;
    width: calc(100% - 5px);
    margin: 0 auto;
    background-size: cover;
  }

  .edges {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
  }

  .edges p {
    border-bottom: 3px solid black;
    min-width: 50px;
    padding-bottom: 2px;
  }

  .edges p:nth-child(2) {
    text-align: right;
  }

  /* <!--480 and SMALLER consectetur section--> */

  .consectetur {
    padding: 20px 10px 0px 10px;

  }

  .heading {
      max-width: 400px;
      text-align: center;
  }

  .headingcons {
    font-weight: bold;
    margin: 0;
    padding: 1.5px;
  }

  .consectetur h2, .epertize h2 {
    font-size: 2.5em;
    margin: 0;
    padding: 0;
  }

  .headingpara {
    margin: 0;
    padding:1.5px;
  }

  .iconGrid {
    padding: 50px 0 50px 0;
    max-width: 95%;
    margin: 0 auto;
  }

  .gridbold {
    font-weight: bold;
  }

  .box {
    display: flex;
    max-width: 90%;
    max-height: 50%;
    justify-content: space-between;
    text-align: center;
  }

  .box img {
    margin-right: 10px;
    margin-left: 20px;
    padding-top: 10px;
  }

  .gridBox1, .gridBox2 {
    display: block;
  }

  /* 480 AND SMALLER epertize section with the pic and text boxes */

  .epertizeGrid {
      padding: 50px 10px 50px 10px;
      background-color: #E6E7E8;
  }

  .epertize {
    max-width: 60%;
    margin: 0 auto;
    text-align: center;
    margin-bottom: 30px;


  }

  .gridbox1a, .gridbox2a, .gridbox3, .gridbox4 {
    display:flex;
    flex-direction: column;
  }

  .twoGrid {
    padding-left: 15px;
    padding-right: 15px;
    max-width: 90%;
    margin: 0 auto;
  }

  .gridText {
    margin-top: 35px;
    /* min-width: 50%; */
    display: flex;
    flex-direction: column-reverse;
    justify-content: flex-end;
  }

  .gridPic1, .gridPic2, .gridPic3, .gridPic4 {
    margin-top: 15px;
    margin-bottom: 15px;
    min-height: 200px;
  }

  .gridPic1 {
    background-image: url("images/christopher-gower-291240.jpg");
    width: 100%;
    background-size: cover;
    margin: 0;
  }

  .gridPic2 {
    background-image: url("images/christopher-gower-291240.jpg");
    width: 100%;
    background-size: cover;
    margin: 0;
  }

  .gridPic3 {
    background-image: url("images/christopher-gower-291246.jpg");
    width: 100%;
    background-size: cover;
    margin: 0;
  }

  .gridbox3 {
    margin-top: 70px;
  }

  .gridPic4 {
      background-image: url("images/christopher-gower-291239.jpg");
      width: 100%;
      background-size: cover;
      margin: 0;
  }

  .marginleft {
    padding: 0px;
    margin-top: 0px;
  }

  .marginright {
    padding: 0px;
    margin-top: 0px;

  }

  .gridBrief {
    display: flex;
    justify-content: space-between;
  }

  .gridBrief h3 {
    font-weight: bold;
    font-size: 0.7em;
    margin-bottom: 0;
  }

  .gridBrief p {
    text-transform: uppercase;
    font-size: 0.5em;
    font-weight: bold;
  }

  .gridBrief {
    font-weight: bold;
  }

  .inside {
    text-align: left;
  }
  /* 480 AND SMALLER neque section */

  .neque {
    min-height: 40vh;
    width: 100%;
    text-align: center;
    padding: 70px 10px 100px 10px;
    margin: 0 auto;

  }

  .contButton {
    text-transform: uppercase;
    padding: 20px;
    color: white;
    background-color: black;
    max-height: 100px;
    max-width: 250px;
    margin: 0 auto;
    margin-top: 40px;
  }

  /* 480 AND SMALLER sales ads section */

  .sales {
    background-color: rgba(211,211,211,0.4);
    padding: 50px;
    display: flex;
    flex-direction: column;
    position: relative;
  }

  .tenDollars, .ntDollars, .nnDollars {
      margin: 20px auto;
      text-align: center;
      padding: 20px;
      min-height: 50vh;
      width: 100%;
      position: relative;
  }

  .ntDollars {
    background-color: black;
    color: white;
    padding: 20px;
  }

  .tenDollars, .nnDollars {
    background-color: white;

  }

  .cost, .cost2 {
    border-bottom: 2px solid rgba(211,211,211,0.8);
    padding-bottom: 20px;
    padding-top: 10px;
    max-width: 150px;
    margin: 0 auto;
    min-height: 150px;
  }

  #day {
    font-size: 0.5em;
    position: absolute;
    bottom: 10px;
    margin-left: 20px;
    margin-right: 20px;
  }


  .price {
    display: flex;
    max-width: 100px;
    margin: 0 auto;
    margin-left: 5px;
    text-align: center;
    min-height: 50px;
    justify-content: space-between;
  }

  .paras {
    text-transform: uppercase;
    font-size: 0.5em;
    text-align: left;
    margin-left: 30px;
    padding: 10px 0 20px 0;
  }
  .paras p {
    margin-bottom: 15px;
  }

  .b {
    font-size: 3.7em;
    padding-left: 10px;
    padding-right: 10px;
  }

  .c {
    padding-top: 40px;
  }

  .cost p, .cost2 p {
    margin-right: 70px;
    font-family: 'Roboto', sans-serif;
    text-transform: uppercase;

  }

  .circle {
    max-width: 50px;
    min-height: 50px;
    border-radius: 50%;
    background-color: white;
    color: black;
    text-transform: uppercase;
    font-size: 0.7em;
    text-align: center;
    padding-top: 15px;
    font-family: 'Roboto', sans-serif;
    position: absolute;
    left: 60%;
    top: 34%;
    z-index: 1;

  }

  .lorumButton {
    min-height: 50px;
    min-width: 150px;
    line-height: 50px;
    text-align: center;
    background-color: black;
    color: white;
    font-size: 0.8em;
    margin: 0 auto;
    font-size: 0.8em;

  }

  .lorumButton2 {
    min-height: 50px;
    line-height: 50px;
    min-width: 150px;
    font-size: 0.8em;
    text-align: center;
    background-color: white;
    color: black;
    margin: 0 auto;
  }

  .lorumButton, .lorumButton2 {
      position: absolute;
      margin-left: auto;
      margin-right: auto;
      left: 20px;
      right: 20px;
      bottom: 40px;
  }


  /* 480 AND SMALLER short lorum section with log and button */

  .ffContact {
    background-color: white;
    width: 100%;
    min-height: 80vh;
    margin: 0 auto;
    text-align: center;
    padding: 30px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;

  }

.florum {
  padding-top: 0;
}

.clorum, .florum {
  margin-left: 0;
  margin-right: 0;
  max-width: 95%;
  max-height: 95%;
}


  .clorum div {
    min-height: 50px;
    max-width: 250px;
    margin: 0 auto;
    text-align: center;
    background-color: black;
    color: white;
    line-height: 50px;
    text-transform: uppercase;
    font-size: 0.8em;


  }

  /* 480 AND SMALLER footer */
  footer {
    color: white;
    background-color: black;
    min-height: 50vh;

  }

  .bottom {
    display: flex;
    flex-direction: column;
    padding-top: 20px;

  }

  .iconz {
    display: flex;
    justify-content: space-between;
    max-width: 250px;
    margin: 0 auto;
    padding-top: 50px;
    padding-bottom: 50px;
    flex-direction: column;
  }

  .iconz p {
    padding-left: 10px;
    margin-top: 15px;
    text-align: center;
  }

  .blah {
    display: flex;
    flex-direction: column;
    margin: 0;

  }

  .blah img {
    max-height: 50px;
    max-width: 50px;
    margin: 0 auto;

  }

  .la {
    padding-left: 20px;
  }

  i {
    margin-left: 0;
  }

  .socMed {
    padding-top: 15px;
  }

  .list {
    max-width: 200px;
    margin: 0 auto;
    text-align: center;
    font-size: 0.7em;
    margin-top: 15px;
  }

  .list li {
    padding-top: 15px;
  }

  .list ul {
    list-style-type: none;
    margin-left: 0;
    padding-left: 0;
    padding-top: 0;
    padding-bottom: 0;
  }

  .list p {
    text-transform: uppercase;
    color: darkgrey;
  }

  .cap {
    text-transform: uppercase;

  }

  footer li {
    padding-top: 3px;
  }


  footer li:hover {
    color: grey;
    font-size: 1.2em;
  }

  .subscribe {
    max-width: 300px;
    margin: 0 auto;
    text-align: center;
    margin-top: 50px;
    padding-bottom: 50px;
    color: darkgrey;
    font-size: 0.7em;
  }

  input {
    min-width: 250px;
    max-height: 50px;
    line-height: 100px;
    padding-left: 20px;
    color: white;
    background-color: black;
    border: 2px darkgrey solid;
    margin: 0 auto;
    margin-top: 10px;

  }

  .subscribe div {
    max-width: 125px;
    height: 50px;
    color: black;
    font-weight: bold;
    background-color: white;
    line-height: 50px;
    text-align: center;
    font-family: 'Roboto', sans-serif;
    margin: 0 auto;
    margin-top: 20px;
  }

}