:root {
  --iblack: #122B38;
  --iblack75: rgba(12, 43, 56, 0.75);
  --ibalck50: rgba(12, 43, 56, 0.5);
  --iblack20: rgba(18, 43, 56, 0.2);
  --iblue: #7197b2;
  --iblue75: rgba(113, 151, 178, 0.75);
  --iblue50: rgba(113, 151, 178, 0.5);
  --iblue20: rgba(113, 151, 178, 0.2);
  --ired: #ff665b;
  --ired75: rgba(255, 102, 91, 0.75);
  --ired50: rgba(255, 102, 91, 0.5);
  --ired20: rgba(255, 102, 91, 0.2);
  --iwhite: #FFFFFF;
  --iwhite75: rgba(255, 255, 255, 0.75);
  --iwhite50: rgba(255, 255, 255, 0.5);
  --iwhite20: rgba(255, 255, 255, 0.2);
  --ilightgray: #E8E8E8;
  --ilightgray50: rgba(232, 232, 232, 0.5);

  --navButton: 3;
  --background: var(--ilightgray50);
}

* {
  padding: 0px;
  margin: 0px;
  text-decoration: none;
}

img.bio {
  float: right;
}

html {
  box-sizing: border-box;
  /* padding won't affect element width */
  font-family: 'ManRope', sans-serif;
  color: var(--black);
  height: 100%;
}

body {
  background: var(--background);
  line-height: 1.4;
  height: 100%;
  color: var(--black);
  font-weight: 300;
}

video {
  max-width: 100%;
  /* keep video inside container but allow to shrink for phone */
}

img {
  max-width: 100%;
}

a {
  color: var(--iblack75);
}

a:hover {
  color: var(--ired50);
}

/* Navigation*/
.main-nav {
  display: flex;
  justify-content: space-between;

}

.main-nav ul {

  display: grid;
  grid-gap: 10px;
  padding: 0;
  list-style: none;
  grid-template-columns: repeat(var(--navButton), 1fr);
}

.main-nav a {
  background: none;
  display: block;
  padding: 0.8rem;
  text-align: center;
  color: var(--black);
  text-transform: uppercase;
}

.main-nav a:hover {
  background: var(--gold);
  color: var(--ired75);
}

.main-nav .icon {
  display: none;
}

.wrapper {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  height: 100%;
}
.titlebox{
  grid-column: 2 / 4;
  }
.ctrbox{
  grid-column: 2 / 4;
}
/* Banners  */
.banner,
.bannerW {
  grid-column: span 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

}

.banner h1,
.banner h2,
.bannerW h1,
.bannerW p,
.banner p {

  text-align: center;
  /*max-width: 42rem;*/
  padding-bottom: 1rem;

}

.banner h1 {
  font-size: 45px;
  font-weight: 400;
  /*text-align: left;*/
}

.banner h2 {
  font-size: 35px;
  font-weight: 300;
  /*text-align: left;*/
}

.banner h3 {
  font-size: 25px;
  font-weight: 300;
  line-height: 125%;
  /*text-align: left;*/
}

/* Content  */

/* boxes */



footer {
  position: bottom;
  grid-column: span 4;
  color: var(--black);
  font-weight: 300;
  text-align: center;
  justify-content: center;
  padding: 2rem;
}

@media all and (max-width: 600px) {

  /* controls menu on phone */
  /* Header*/
  .main-nav {
    flex-direction: column;
  }

  .main-nav ul {
    width: 100%;
    grid-template-columns: 1fr;
    /*fill screen with one fraction*/

  }

  .main-nav li {
    display: none;
  }

  .main-nav .icon {
    display: block;
    position: absolute;
    right: 0;
    top: 0;
  }


  .main-nav.responsive a.icon {
    display: block;
    position: absolute;
    right: 0;
    top: 0;
  }

  .main-nav.responsive li {
    float: none;
    display: block;
    text-align: center;
  }

  .boxes {
    display: grid;
    grid-template-columns: repeat(2, 1fr);

  }

  .wrapper {
    grid-template-columns: repeat(2, 1fr);

  }
  .titlebox{
    grid-column: span 2;
    padding: 2rem;
    }

  .banner,
  .bannerW {
    grid-column: span 2;

  }

  footer {
    grid-column: span 2;

  }
}

/* closes media */