html{
  height: 100%;
}
body
{
  width:100vw;
  margin: 0;
  padding: 0;
  position: relative;
  overflow-x:hidden;
}

.wrapper
{
    overflow-x: hidden !important;/*This is to stop AOS dissappearing */
}

nav .navbar-nav li a{
  color: white !important;
  }


.mainContainer
{
  display: grid;
  grid-template-columns: 1fr minmax(500px, 900px) 1fr;
  grid-template-rows: repeat(4, auto);
  /*grid-template-rows: 800px 550px 1680px 270px;*/
  grid-template-areas:
  "hd hd hd"
  ". cd ."
  ". main ."
  "ft ft ft";
  background-color: #81c2c9;
  justify-items: center;
  overflow: hidden;
}
.mainContainer2
{
  display: grid;
  grid-template-columns: 1fr minmax(500px, 900px) 1fr;
  grid-template-rows: repeat(4, auto);
  grid-template-areas:
  "hd hd hd"
  ". main ."
  "ft ft ft";
  background-color: #81c2c9;
  justify-items: center;
  overflow: hidden;
}

.cdContent
{
  display: grid;
  grid-area: cd;
  grid-template-columns: 280px 510px;
  grid-template-rows: 460px;
  grid-gap: 1em;
  grid-template-areas:
  "leftcd rightcd"
  ;
  padding-top:100px;
}

.cdContent h2
{
  font-size: 85px;
  text-align: center;
  font-family: 'Merriweather';
  color: #f1eeee;
  grid-area:leftcd;
}
.cdCardContainer{
  display: grid;
  width: 100%; /* remember to tell the div it can use either 100% or whatever you want */
  height:100%;
  grid-gap: 1em;
  font-family: 'Merriweather';
  grid-area: rightcd;
  grid-template-areas:
  "l1 r1"
  "l2 r2"
  "l3 r3"
  "l4 r4"
  ;
}
.cdCard{
  width: 246px;
  height: 100px;
  background-color: #c98881;
  border-radius: 0.5em;
  box-shadow: 5px 5px 3px 1px rgba(0, 0, 0, 0.1);
}
.cdCard p{
  text-align: center;
  margin-top: 37px;
  color: #f1eeee;
  font-size: 20px;
}
.mainContent
{
  display: grid;
  grid-area: main;
  grid-template-columns: 350px 350px;
  grid-template-rows: auto auto auto auto;
  grid-gap: 1em;
  grid-template-areas:
  "left0 right0"
  "left1 right1"
  "left2 right2"
  "left3 right3";
  padding-bottom: 30px;
  align-items: center;
  justify-content: center;
}
.mainContent2
{
  display: grid;
  grid-area: main;
  grid-template-columns: 350px 350px;
  grid-template-rows: 50vh 15vh 40vh 40vh 40vh;
  grid-gap: 1em;
  grid-template-areas:
  "left0 right0"
  "left1 right1"
  "left2 right2"
  "left3 right3"
  "left4 right4";
  padding-bottom:40px;
}
.mainContent p{
  font-size: 20px;

}
.aboutTitle{
  display: grid;
  grid-template-columns: minmax(500px, 900px);
  grid-template-rows: 25vh;
  width: 100%;
  background-size: cover;
  background-position: 50% 50% ;
  background-color: #f1eeee;
  position: relative;
  grid-area:hd;
  grid-template-areas:
  "top"
  "bot";
  justify-content: center;
}
.aboutTitle p{
  text-align: left;
  font-size: 25px;
  font-family: 'Merriweather';
  height:100%;
  margin-top:100px;
  margin-left:70px;
  font-size: 50px;
  color: #c98881;
}

.headerFlag
{
  display: grid;
  grid-template-columns: minmax(500px, 900px);
  grid-template-rows: auto auto;
  /*background-image: url(img/keyworkersHeroFlag2.png);*/
  width: 100%;
  background-size: cover;
  background-position: 50% 50% ;
  background-color: #f1eeee;
  position: relative;
  grid-area:hd;
  grid-template-areas:
  "top"
  "bot";
  justify-content: center;
  margin-top:30px;
}

.headerFlag img{
  position: relative;
  display: block;
  border-radius: 0.7em;
  height: 60vh;
  width: 100%;
  align-self: center;
  margin-top: 75px;
}

.headerFlag p{
  text-align: center;
  font-size: 25px;
  font-family: 'Merriweather';
  margin:20px 20px 20px 20px;
  color: #416165;
}

.mainContHeading{
  grid-area: left1 right1;

}


.textContent
{
  font-family: 'Merriweather';
  font-size: 24px;
  color: #ececec;
  padding:10px;
  align-self: start;
  overflow: hidden;
}
.textContent2
{
  font-family: 'Merriweather';
  font-size: 24px;
  color: #ececec;
  padding:10px;
  align-self: center;
  justify-self:center;
}
.textContent3
{
  font-family: 'Merriweather';
  font-size: 24px;
  color: #ececec;
  padding:10px;
  align-self: start;
  grid-area: 1 / span 2;
}
.mainContent h2
{
  font-size: 80px;
  font-family: 'Merriweather';
  color: #f1eeee;
  text-shadow:0px 8px 15px rgba(0, 0, 0, 0.1);
  align-self: center;
  grid-area: 1 / span 3;
  text-align:center;
  padding:110px 0 10px 0;
}
.mainContent img{
  border-radius: 0.5rem;
  height: 280px;
  width: 280px;
  margin-top:20px;
  justify-self: center;
  overflow: hidden;
}
.mainContent2 h2
{
  font-size: 80px;
  font-family: 'Merriweather';
  color: #f1eeee;
  text-shadow:0px 8px 15px rgba(0, 0, 0, 0.1);
  align-self: center;
  grid-area: 2 / span 2;
}
.mainContent2 img{
  border-radius: 0.5rem;
  height: 260px;
  width: 260px;
  justify-self:center;
  align-self: center;
}

.imgCont
{
  position: relative;
  justify-self: center;
  top:10%;
}

.formContainer{
  display: flex;
  text-align: left;
  width: 100%; /* remember to tell the div it can use either 100% or whatever you want */
  height:auto;
  box-shadow: 10px 10px 10px 10px rgba(0, 0, 0, 0.1);
  border-radius: 0.5em;
  font-family: 'Merriweather';
}

.formContainer form {
  width:100%;
  margin: 0 auto;
  padding: 1em;
  border:none;
  border-radius: 1em;

}
.formContainer ul
{
  list-style: none;
  color: #ececec;
  padding-left: 0;
}
.formContainer input,
textarea {
  font: 1em sans-serif;
  width: 100%;
  height: 40px;
  box-sizing: border-box;
  border: 1px solid #999;
  border-radius: 0.4em;
  padding:10px;
  background-color: #d4d4d4;
  box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
}
.formContainer textarea{
  vertical-align: top;
  height: 5em;
  resize: none;
}
.formContainer select{
  border-radius: 0.4em;
  font-size: 16px;
  height: 2.5em;
  background-color: #d4d4d4;
  margin-bottom: 0.2em;
  width: 100%;
}
.formContainer input:focus,
textarea:focus{
  border-color: #000;
}

.formContainer button {
    display: inline-block;
    border: none;
    padding: 1rem 2rem;
    margin-top:20px;
    text-decoration: none;
    background:#c98881;
    color: #ffffff;
    font-family: 'Merriweather';
    font-size: 1rem;
    cursor: pointer;
    text-align: center;
    transition: background 250ms ease-in-out,
                transform 150ms ease;
    -webkit-appearance: none;
    -moz-appearance: none;
    border-radius: 0.4em;
    box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
}

.formContainer button:hover,
button:focus {
    background:#5ac26d;
}

.formContainer button:focus {
    outline: 1px solid #fff;
    outline-offset: -4px;
}
.formContainer button:active {
    transform: scale(0.99);
}

.footer
{
  display: grid;
  grid-area:ft;
  grid-template-columns:1fr 238.5px 238.5px 1fr;
  grid-template-rows: 150px 48px;
  grid-template-areas:
  ". left right ."
  "fC fC fC fC";
  height: 195px;
  background-color:#416165;
  width:100%;
}
.footerFooter
{
  text-decoration: none;
  font-family: 'Merriweather';
  text-align: center;
  color:#cfcfcf;
  background-color: #31494c;
  grid-area:fC;
  height: 100%;
}
.footerFooter p
{
  margin-top:10px;
  margin-bottom:0;
  font-size: 10px;
}
.footerCol
{
  text-decoration: none;
  font-family: 'Merriweather';
  font-size: 13px;
  text-align: center;
  color:#cfcfcf;
}

.footer a{
  text-decoration: none;
  color: inherit;
  text-align: left;
}
.footer a:hover{
  text-decoration: none;
  color: #828282;
}
.footer ul
{
  text-decoration: none;
  list-style: none;
  margin:0;
  padding:0;
  margin: 10px 10px;
  text-align: left;
}
.footerCol h2
{
  font-size: 20px;
  font-family: 'Merriweather';
  margin: 10px 10px;
}
.footerLogo
{
  justify-self:center;
  margin: 3px 30px;
}

/* Bootstrap menu css */
body.offcanvas-active{
	overflow:hidden;
}
.offcanvas-header{ display:none; }

.navbar-custom{
  background-color:  #81c2c9;
  font-family: 'Merriweather';

}
.navbar /*need to make media queries for this  to adjust to each viewport */
{
  padding: 0.5em 15% !important;
  min-height: 70px !important;
}

@media (max-width: 992px) {
  .offcanvas-header{ display:block; }
  .navbar-collapse {
    position: fixed;
    top:0;
    bottom: 0;
    left: 100%;
    width: 50%;
    padding-right: 1rem;
    padding-left: 1rem;
    overflow-y: auto;
    visibility: hidden;
    background-color: #8881c9;
    transition: visibility .2s ease-in-out, transform .2s ease-in-out;
    z-index: 500;
  }
  .navbar-collapse.show {
    visibility: visible;
    transform: translateX(-100%);
  }
}
/*End of bootstrap menu css */

/* Button css */
.btn {
  position: relative;
  top:30%;
  justify-self:center;
}
.btn button {
  background: #28405b;
  color: #ececec;
  border: 0;
  font-size: 20px;
  padding: 10px 20px;
  position: relative;
  animation-name: shake;
  animation-duration: 7s;
  animation-iteration-count: infinite;
  border-radius: 5em;
  animation-timing-function: ease-in;
  cursor: pointer;
  box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
}
.btn button:hover {
  animation-name: shakeAnim;
}

@keyframes shakeAnim {
  0% {left: 0}
  1% {left: -3px}
  2% {left: 5px}
  3% {left: -8px}
  4% {left: 8px}
  5% {left: -5px}
  6% {left: 3px}
  7% {left: 0}
}

@keyframes shake {
  0% {left: 0}
  50% {left: -3px}
  51% {left: 5px}
  52% {left: -8px}
  53% {left: 8px}
  54% {left: -5px}
  55% {left: 3px}
  56% {left: 0}
}
/*End of button */

/*Start of Ipad and various device formatting*/
@media all and (max-width: 900px){
  .cdContent
  {
    grid-template-columns: 250px 470px;
  }
  .cdCard
  {
    width: 220px;
  }
  .mainContent
  {
    grid-template-rows: 18vh 32vh 32vh auto;
  }
  .headerFlag
  {
    grid-template-rows: auto auto;
  }
  .headerFlag img
  {
    height: 30vh;
    width: 90%;
    justify-self:center;
    align-self: center;
  }
  .headerFlag p{
    font-size: 20px;
  }
  .aboutTitle
  {
    grid-template-rows: 22vh;
  }
  .mainContent2
  {
    grid-template-rows: 45vh 12vh 30vh 30vh 30vh;
  }
}
/*Ipad 12 code */
@media all and (max-width: 1024px) and (min-width: 1024px){
  .mainContent
  {
    grid-template-rows: auto auto auto auto;
    padding-bottom:20px;
  }
  .headerFlag
  {
    grid-template-rows: auto auto;
  }
  .headerFlag img
  {
    height: 30vh;
    width: 70%;
    justify-self:center;
    align-self: center;
  }
  .aboutTitle
  {
    grid-template-rows: 27vh;
  }
  .mainContent2
  {
    grid-template-rows: 68vh 20vh 40vh 40vh 40vh;
  }
}

@media all and (max-width: 420px){
  .navbar /*need to make media queries for this  to adjust to each viewport */
  {
    padding: 0 !important;
    min-height: 50px !important;
  }
  .mainContainer
  {
    display: grid;
    grid-template-columns: minmax(355px, 900px);
    grid-template-rows: repeat(4, auto);
    grid-template-areas:
    "hd"
    "cd"
    "main"
    "ft";
    background-color: #81c2c9;
    justify-items: center;
  }
  .mainContainer2
  {
    display: grid;
    grid-template-columns: minmax(355px, 900px);
    grid-template-rows: repeat(3, auto);
    grid-template-areas:
    "hd"
    "main"
    "ft";
    background-color: #81c2c9;
    justify-items: center;
  }
  .headerFlag
  {
    display: grid;
    grid-template-columns: minmax(355px, 900px);
    grid-template-rows: auto auto;
    /*background-image: url(img/keyworkersHeroFlag2.png);*/
    width: 100%;
    background-size: cover;
    background-position: 50% 50% ;
    position: relative;
    grid-area:hd;
    grid-template-areas:
    "top"
    "bot";
    justify-content: center;
    margin-top:15px;
  }

  .headerFlag img{
    height: 27vh;
    width: 85%;
    margin:50px 0 0 0;
  }

  .headerFlag p{
    text-align: center;
    font-size: 20px;
    padding:0 15px 0px 15px;
  }
  .cdContent
  {
    display: grid;
    grid-area: cd;
    grid-template-columns: minmax(355px, 900px);
    grid-template-rows: 25vh 140vh;
    grid-gap: 1em;
    grid-template-areas:
    "leftcd"
    "rightcd"
    ;
    padding-top:35px;
  }

  .cdContent h2
  {
    font-size: 65px;
    text-align: center;
    font-family: 'Merriweather';
    color: #f1eeee;
    padding-left: 15px;
    padding-right: 15px;
  }
  .cdCardContainer{
    display: grid;
    width: 100%; /* remember to tell the div it can use either 100% or whatever you want */
    height:100%;
    grid-gap: 1em;
    font-family: 'Merriweather';
    grid-area: rightcd;
    grid-template-areas:
    "l1"
    "r1"
    "l2"
    "r2"
    "l3"
    "r3"
    "l4"
    "r4"
    ;
    align-self: center;
    justify-content: center;
  }
  .cdCard{
    width: 246px;
    height: 100px;
    background-color: #c98881;
    border-radius: 0.5em;
    box-shadow: 5px 5px 3px 1px rgba(0, 0, 0, 0.1);
  }

  .mainContent
  {
    display: grid;
    grid-area: main;
    grid-template-columns: minmax(355px, 900px);
    grid-template-rows:40vh 47vh 40vh 47vh 50vh 30vh 75vh;
    grid-gap: 0.5em;
    grid-template-areas:
    "left0"
    "right1"
    "left1"
    "left2"
    "right2"
    "left3"
    "right3"
    ;
    padding-bottom: 2.3em;
  }
  .mainContent h2
  {
    font-size: 65px;
    font-family: 'Merriweather';
    color: #f1eeee;
    text-shadow:0px 8px 15px rgba(0, 0, 0, 0.1);
    align-self: center;
    grid-area: left0;
    text-align:center;
    padding: 70px 20px 10px 20px;
    margin:0;
  }
  .formContainer{
    display: flex;
    text-align: left;
    width: 90%; /* remember to tell the div it can use either 100% or whatever you want */
    height:auto;
    box-shadow: 10px 10px 10px 10px rgba(0, 0, 0, 0.1);
    border-radius: 0.5em;
    font-family: 'Merriweather';
    justify-self:center;
  }
  .aboutTitle{
    display: grid;
    grid-template-columns: minmax(355px, 900px);
    grid-template-rows: 35vh;
    width: 100%;
    background-size: cover;
    background-position: 50% 50% ;
    background-color: #f1eeee;
    position: relative;
    grid-area:hd;
    grid-template-areas:
    "top"
    "bot";
    justify-content: center;
  }
  .aboutTitle p{

    margin-top:90px;

  }
  .mainContent2
  {
    display: grid;
    grid-area: main;
    grid-template-columns: minmax(355px, 900px);
    grid-template-rows: 100vh 30vh 50vh 30vh 50vh 30vh 50vh 30vh;
    grid-gap: 0.5em;
    grid-template-areas:
    "left0"
    "right0"
    "left2"
    "right2"
    "left3"
    "right3"
    "left4"
    "right4"
    ;
    padding-bottom: 2.3em;
    padding-top:2.3em;
  }
  .mainContent2 h2
  {
    font-size: 60px;
    font-family: 'Merriweather';
    color: #f1eeee;
    text-shadow:0px 8px 15px rgba(0, 0, 0, 0.1);
    align-self: center;
    justify-self:center;
    text-align: center;
  }
  .textContent3
  {
    font-family: 'Merriweather';
    font-size: 20px;
    color: #ececec;
    padding:10px;
    align-self: start;
    grid-area: left0;
  }
  .footer
  {
    display: grid;
    grid-area: ft;
    grid-template-columns: minmax(355px, 900px);
    grid-template-rows:110px 130px 48px;
    grid-gap: 0.5em;
    grid-template-areas:
    "left"
    "right"
    "fC";
    height: 298px;
    width: auto;
    margin-top: 30px;
    text-align: center;
  }
  .footerCol
  {
    text-align: center;
  }
  .footerCol2
  {
    text-align: center;
    padding-top:0;
    margin-top:0;
  }
  .footer ul
  {
    text-align: left;
    padding:0 0 0 90px;
    margin:0;
  }
    .footer a{
      text-decoration: none;
      color: inherit;
      text-align: center;
    }

}
/*iphone plus formatting */
@media all and (max-width: 414px) and (min-width: 414px){
  .cdContent{
    grid-template-rows: auto auto;
  }
  .mainContent{
    grid-template-rows:auto auto auto auto auto auto auto;
  }
  .mainContent2{
    grid-template-rows:80vh 25vh 40vh 25vh 40vh 25vh 40vh 25vh;
  }
  .headerFlag{
    grid-template-rows:auto auto;
  }
  .headerFlag img{
    margin:60px 0 0 0;
  }
}
@media all and (max-height: 820px) and (min-height: 811px)
{
  .headerFlag{
    grid-template-rows: auto auto;
  }
  .headerFlag img{
    margin:55px 0 0 0;
  }
  .cdContent{
    grid-template-rows: auto auto;
  }
  .mainContent{
    grid-template-rows: auto auto auto auto auto auto auto;
  }
  .mainContent h2{
    padding:0;
    margin:0;
  }
  .mainContent2{
    grid-template-rows: 80vh 25vh 32vh 25vh 32vh 25vh 32vh 25vh;
    padding:0;
  }
  .aboutTitle{
    grid-template-rows:28vh;
  }
}
@media all and (max-height: 896px) and (min-height: 813px){
  .cdContent{
    grid-template-rows: auto auto;
  }
  .mainContent{
    grid-template-rows: auto auto auto auto auto auto auto;
  }
  .aboutTitle{
    grid-template-rows: 25vh;
  }
  .mainContent2{
    grid-template-rows: 65vh 25vh 30vh 25vh 30vh 25vh 30vh 25vh;
  }


}

  @media only screen and (max-width:900px) and (max-height:414px){
    .headerFlag{
      grid-template-rows: 70vh 39vh;
    }
    .headerFlag img{
      width: 70%;
      height: 80%;
      margin:50px 0 0 0;
    }
    .headerFlag p{
      margin:10px 0 20px 0;
    }
    .cdContent{
      grid-template-columns: minmax(230px, 600px);
      grid-template-rows: auto auto;
      grid-template-areas:
      "leftcd"
      "rightcd";
      padding-top:30px;
    }
    .cdContent h2{
      font-size: 55px;
    }
    .cdCard{
      align-self: center;
      justify-self:center;
    }
    .mainContent
    {
      display: grid;
      grid-area: main;
      grid-template-columns: 300px 300px;
      grid-template-rows: auto auto auto auto;
      grid-gap: 1em;
      grid-template-areas:
      "left0 right0"
      "left1 right1"
      "left2 right2"
      "left3 right3";
    }
    .mainContent h2{
      padding:0;
      margin:0;
      font-size: 65px;
    }
    .formContainer{
      height:auto;
    }
    .aboutTitle{
      grid-template-rows:50vh;
    }
    .aboutTitle p {
      margin-top:75px;
    }
    .mainContent2
    {
      display: grid;
      grid-area: main;
      grid-template-columns: 300px 300px;
      grid-template-rows: 150vh 20vh 90vh 90vh 90vh;
      grid-gap: 1em;
      grid-template-areas:
      "left0 right0"
      "left1 right1"
      "left2 right2"
      "left3 right3"
      "left4 right4";
      padding-bottom:40px;
    }
  }
  @media only screen and (max-width:900px) and (max-height:700px){
    .headerFlag{
      grid-template-rows: auto auto;
    }
    .headerFlag p{
      padding: 0px 30px 0 30px;
      font-size: 15px;
    }

    .mainContent
    {
      display: grid;
      grid-area: main;
      grid-template-columns: minmax(230px, 900px);
      grid-template-rows: auto auto auto auto;
      grid-gap: 1em;
      grid-template-areas:
      "left0"
      "right1"
      "left1"
      "left2"
      "right2"
      "left3"
      "right3"
      ;
    }
    .mainContent h2{
      font-size: 60px;
    }
    .mainContent img{
      align-self: center;
    }

    .cdContent{
      grid-template-columns: minmax(230px, 600px);
      grid-template-rows: 40vh 90vh;
      grid-template-areas:
      "leftcd"
      "rightcd";
      padding-top:30px;
    }
    .cdCard{
      align-self: center;
      justify-self:center;
    }
  }
  @media only screen and (max-width:900px) and (max-height:900px){
    .mainContent
    {
      display: grid;
      grid-area: main;
      grid-template-columns: minmax(230px, 900px);
      grid-template-rows: auto auto auto auto;
      grid-gap: 1em;
      grid-template-areas:
      "left0"
      "right1"
      "left1"
      "left2"
      "right2"
      "left3"
      "right3"
      ;
    }
    .mainContent p{
      text-align: center;
    }
    .cdContent{
      grid-template-columns: minmax(230px, 600px);
      grid-template-rows: auto auto;
      grid-template-areas:
      "leftcd"
      "rightcd";
      padding-top:30px;
      padding-bottom:40px;
    }
    .cdCard{
      align-self: center;
      justify-self:center;
    }
    .formContainer{
      width: 80%;
      align-self: center;
      justify-self: center;
    }
  }