body {
  margin: auto;
}

@keyframes mymove {
  from {left: 0px;}
  to {left: 300px;}
}

/* Brand Colors
*  Brand Colors Primary - bcp-01, 02, 03, 04
*  Brand Colors Secondary - bcs-01, 02
*/
.bcp-04 {
  background-color: #ffe6c4;
}

li#current-page-nav-link {
  background-color: #813e51;
}

a.gold-links {
  text-decoration: none;
  color: #dfb886;
}

a.gold-links:hover {
  font-size: 22px;
}

a.maroon-links {
  text-decoration: none;
  color: #9c6767;
}

a.maroon-links:hover {
  font-size: 27px;
}

a.orange-links {
  text-decoration: none;
  color: #dfb886;
  padding: 16px 24px;
  background-color: #2b2928;
  border-left: 5px solid #dfb886;
  border-right: 5px solid #dfb886;
  text-align: left;
  font-size: 20px;
  font-family: Georgia, serif;
  letter-spacing: 3px;
  font-weight: bold;
  line-height: 1.6em;
}

a.orange-links:hover {
  /* font-size: 27px; */
}

a.works-links {
  text-decoration: none;
  color: #6b2135;
}

.box-link {
  text-decoration: none;
}

a.works-links:hover {
  color: #252934;
}

span#special-emphasis {
  background-color: #2b2928;
  color: #dfb886;
  font-style: italic;
  padding: 4px 10px;
  border-bottom: 2px solid #dfb886;
  text-transform: uppercase;
}

.container-works {
  padding-bottom: 4%;
  background-color: white;
}

.container-colors-mod {
  background-color: white;
  padding-top: 5%;
  padding-bottom: 5%;
}

.card-container-t07 {
  overflow: hidden;
}

h1 {
  text-align: center;
  overflow: hidden;
  padding: 50px;
  box-sizing: border-box;
  margin: 0;
  width: 100%;
}

.main-heading {
  padding: 5%;
  font-size: 35px;
  font-weight: 600;
  line-height: 50px;
  font-family: Georgia, serif;
  margin: auto;
  overflow: hidden;
  padding: 6%;
  background-color: #ffb591;
  overflow: hidden;
  /*
  max-width: 1200px;
  margin: auto;
  z-index: 1;
  position: relative;
  margin-top: -121px;
  */
  color: black;
}

.main-heading-colormod {
  background-color: #4e131f;
  color: #dfb886;
}

.main-heading-colormodtwo {
  background-color: #dfb886;
  color: #dfb886;
  background-image: url(../img/identity/type-impact_bubbly_gray.svg);
  background-repeat: round;
}

p.main-heading-text {
  max-width: 800px;
  overflow: hidden;
  margin: auto;
}

.main-heading-text-center {
  text-align: center;
}

p.main-heading-subtext {
  font-size: 15px;
  max-width: 800px;
  margin: auto;
  line-height: 1.5em;
  padding-top: 20px;
  font-size: 18px;
  font-weight: normal;
}

div.container-card-t05.cc-white {
  background-color: white;
  display: flex;
  flex-wrap: wrap;
}

#special-subtitle.card-title {
  padding-bottom: 0;
  color: #dfb886;
  font-size: 20px;
  padding-bottom: 10px;
  padding-top: 10px;
}

.aln-right {
  text-align: right;
}

#mod-one.layout-master {
  padding: 1rem;
}

div.layout-master-nospace.mod-fifty-one {
  width: 50%;
}

div.layout-master.fullscreen {
  width: 100%;
}

div.layout-master.splitscreen {
  width: 50%;
  padding: 10px 10px;
}

div.layout-master.triplescreen {
  width: 33.33%;
  padding: 10px 10px;
}

div.layout-master.quadscreen {
  width: 25%;
  padding: 10px 10px;
}

.call-to-action {
  text-align: center;
  /*! background-color: #7a2101; */
  width: 100%;
  position: relative;
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  height: 620px;
  max-width: 100%;
}

/* Top Hero Images */
.top-hero-home {
  height: 100vh;
  background-color: #9c6767;
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.50) 15%, rgba(0, 0, 0, 0.50) 100%), url(../img/hero/home-hero-06.jpg);
}

.top-hero-about {
  background-color: #252934;
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.50) 15%, rgba(0, 0, 0, 0.50) 100%), url(../img/hero/about-hero.jpg);
}

.top-hero-work {
  background-color: #252934;
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.50) 15%, rgba(0, 0, 0, 0.50) 100%), url(../img/hero/work-hero.jpg);
}

.top-hero-contact {
  background-color: #252934;
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.50) 15%, rgba(0, 0, 0, 0.50) 100%), url(../img/hero/contact-hero.jpg);
}

/* Featured Works Hero Images */
.top-hero-work-amy {
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5) 14%, rgba(0, 0, 0, 0.5) 100%), url(../img/hero/amys-hero.jpg);
}

.top-hero-work-pcal {
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5) 14%, rgba(0, 0, 0, 0.5) 100%), url(../img/hero/pcal-hero.jpg);
}

.top-hero-work-voal {
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5) 14%, rgba(0, 0, 0, 0.5) 100%), url(../img/hero/voal-hero.jpg);
}

/* Bottom Hero Images */
.bottom-hero {
  background-color: #252934;
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.50) 15%, rgba(0, 0, 0, 0.50) 100%), url(../img/hero/home-hero-bottom.jpg);
}

.bottom-hero-about {
  background-color: #252934;
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.50) 15%, rgba(0, 0, 0, 0.50) 100%), url(../img/hero/about-hero-bottom.jpg);
}

.bottom-hero-work {
  background-color: #252934;
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.50) 15%, rgba(0, 0, 0, 0.50) 100%), url(../img/hero/work-hero-bottom.jpg);
}

.bottom-hero-contact {
  background-color: #252934;
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.50) 15%, rgba(0, 0, 0, 0.50) 100%), url(../img/hero/contact-hero-bottom.jpg);
}

.bottom-hero-amys {
  background-color: #252934;
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.50) 15%, rgba(0, 0, 0, 0.50) 100%), url(../img/hero/amys-hero-bottom.jpg);
}

.bottom-hero-pcal {
  background-color: #252934;
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.50) 15%, rgba(0, 0, 0, 0.50) 100%), url(../img/hero/pcal-hero-bottom.jpg);
}

.bottom-hero-voal {
  background-color: #252934;
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.50) 15%, rgba(0, 0, 0, 0.50) 100%), url(../img/hero/voal-hero-bottom.jpg);
}

.action-text-container {
  font-size: 40px;
  padding-top: 10%;
  font-family: Georgia, serif;
  max-width: 1500px;
  margin: auto;
  padding-right: 6%;
  padding-left: 6%;
}

.action-heading {
  color: #dfb886;
  font-size: 50px;
  text-align: left;
  width: 100%;
  font-weight: bold;
  text-transform: uppercase;
  font-family: Georgia, serif;
  letter-spacing: 5px;
  overflow: hidden;
}

.action-link {
  color: #ffb591;
  text-align: left;
  padding-top: 15px;
  font-size: 20px;
  width: 100%;
  font-family: Georgia, serif;
  letter-spacing: 3px;
  margin: 0 auto;
  font-weight: bold;
  line-height: 1.6em;
  padding-right: 20%;
  padding: auto;
}

div.action-link.small-text {
  font-size: 25px;
  color: white;
  padding-right: 0;
  padding-bottom: 10px;
  letter-spacing: 5px;
}

/* Process Numbering System Component */
.container-system {
  padding: 6%;
  overflow: hidden;
}

.number-circle {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: 55px;
  min-width: 55px;
  height: 55px;
  border-radius: 50px;
  background-color: #4e131f;
  color: #ffe6c4;
  font-size: 28px;
  font-weight: bold;
}

ul {
  margin: 0;
  padding: 0;
}

li {
  display: flex;
  align-items: center;
  /*! vertical-align: baseline; */
  padding-top: 3%;
}

p.process-title {
  padding-left: 2%;
  font-size: 2rem;
  font-weight: bold;
  color: #dfb886;
  margin: 0;
  line-height: 1em;
}

p.process-desc {
  padding-left: 32px;
  font-size: 2rem;
  font-weight: bold;
}

.section-about {
  box-sizing: border-box;
  padding: 10% 6%;
  overflow: hidden;
  background-color: #ffe6c4;
  font-size: 130%;
  overflow: hidden;
  padding-top: 2%;
}

/*
* New Components
* 1. Hero image
* 2.
*/
/* Hero Image*/
.hero-image {
  display: block;
  width: 100%;
  height: auto;
}

.hero-image img {
  width: 100%;
  height: 100vh;
  object-fit: cover;
}

/* */
/* This is a universal / shared component - changing
 * it will impact all cards. Be careful how you use it.
 */
.layout-master,
.layout-master-100,
.layout-master-50,
.layout-master-33,
.layout-master-25,
.layout-master-20,
.layout-master-nospace {
  /*! padding: 5px 5px; */
  float: left;
  height: auto;
  box-sizing: border-box;
  margin: 0;
  width: 33.33%;
}

.layout-master-100 {
  width: 100%;
  /*! padding: 1% 5%; */
}

.layout-master-50 {
  width: 50%;
}

.layout-master-33 {
  width: 100%;
}

.layout-master-25 {
  width: 25%;
}

.layout-master-20 {
  width: 20%;
}

.layout-master-nospace {
  padding: 0px;
  display: flex;
  flex-wrap: wrap;
}

/* These are default values
 * To be completed ...
 */
.card-container {}

.card {}

.card-title {
  font-size: 30px;
  /*! text-align: center; */
  font-weight: bold;
  /*! padding-bottom: 15px; */
  font-family: Georgia, serif;
  line-height: 1.2em;
}

.link-redirector {
  color: #6b2135;
  padding: 10px;
  padding-left: 1rem;
  font-size: 25px;
  text-transform: uppercase;
}

.card-desc {
  line-height: 1.6;
  font-size: 18px;
  font-family: Georgia, serif;
  max-width: 24rem;
  width: 100%;
  padding: 4rem 1rem 4rem 2rem;
}

/* ------------- Card Type 01 ------------- */
.container-card-t01 {
  /* The container helps categorize our modules.
  *  We Should copy/paste modules by container.
  */
  overflow: hidden;
  padding: 5% 5%;
  /*! padding-top: 1%; */
  background-color: white;
  display: flex;
  flex-wrap: wrap;
}

div.container-card-t01.topmargin {
  /*! padding-top: 0px; */
  padding: 4.3%;
  padding-top: 0;
}

.card-t01 {
  /*! background-color: #00273d; */

  color: black;
  /*! height: 200px; */
  width: 100%;
  float: right;
  overflow: hidden;
}

.card-t01-title {
  font-size: 25px;
  padding: 3%;
  font-family: Georgia, serif;
  padding-left: 0;
  border-bottom: 1px solid #ffb591;
  padding-right: 0;
  background-color: #2b2928;
  text-align: center;
  color: #dfb886;
  border-bottom: 5px solid #dfb886;
  margin-top: 0;
  font-size: 20px;
  letter-spacing: 3px;
  font-weight: bold;
}

.card-t01-desc {
  /*! padding: 10px; */
  text-align: left;
  font-size: 18px;
  padding: 5%;
  padding-top: 1%;
}

div.card-image {
  margin-bottom: 0px;
}

div.card-image img {
  width: 100%;
  height: auto;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  position: relative;

}

/* ------------- Card Type 02 ------------- */
.container-card-t02 {
  /* The container helps categorize our modules.
  *  We Should copy/paste modules by container.
  */
  overflow: hidden;
  /*! padding: 8%; */
  /*! padding-top: 2%; */
  /*! padding-bottom: 2%; */
  max-width: 1100px;
  margin: auto;
  overflow: hidden;
  padding: 1% 6%;
  padding-bottom: 4%;
  background-color: white;
}

.card-t02-01,
.card-t02-02,
.card-t02-03,
.card-t02-04,
.card-t02-05,
.card-t02-06 {
  height: auto;
  font-family: Georgia, serif;
  line-height: 1.8em;
  /*! padding: 7%; */
  /*! border-top: 5px solid #ff5757; */
  /*! padding-bottom: 0; */
  /*! padding-top: 0; */
}

/* Card Type 02 */
.card-t02-01 {
  /*! background-color: #ecf6f5; */
  /*! color: #52c0b3; */
}

.card-t02-02 {
  /*! background-color: #f7efe6; */
  /*! color: #f79726 */
}

.card-t02-03 {
  background-color: #f9f3f3;
  color: #f26865;
}

.card-t02-04 {
  background-color: #f5ecf6;
  color: #9352c0;
}

.card-t02-05 {
  background-color: #e9e6f7;
  color: #266ef7;
}

.card-t02-06 {
  background-color: #f9f8f3;
  color: #f2c865;
}

/* Card Type 02 Icons */
.card-t02-icons {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 6%;
}

/* Card Type 02 Title */
.card-t02-title {
  font-size: 30px;
  text-align: center;
  font-weight: bold;
  padding-top: 20px;
}

/* Card Type 02 Description/Text */
.card-t02-desc {
  padding: 10px;
  text-align: left;
  font-size: 18px;
  color: ba;
  border-bottom: 1px solid #ffb591;
  /*! padding-top: 2%; */
  padding-bottom: 4%;
  color: black;
}

/* ------------- END Card Type 02 ------------- */
/* ------------- Card Type 03 ------------- */
.container-card-t03 {
  /* The container helps categorize our modules.
  *  We Should copy/paste modules by container.
  */
  overflow: hidden;
}

.card-t03-01,
.card-t03-02,
.card-t03-03,
.card-t03-04,
.card-t03-05,
.card-t03-06 {
  height: auto;
  font-family: Georgia, serif;
  line-height: 1.8em;
  padding: 20px;
  border-top: 5px solid #ff5757;
}

/* Card Type 03 */
.card-t03-01 {
  background-color: #ecf6f5;
  color: #52c0b3;
}

.card-t03-02 {
  background-color: #f7efe6;
  color: #f79726
}

.card-t03-03 {
  background-color: #f9f3f3;
  color: #f26865;
}

.card-t03-04 {
  background-color: #f5ecf6;
  color: #9352c0;
}

.card-t03-05 {
  background-color: #e9e6f7;
  color: #266ef7;
}

.card-t03-06 {
  background-color: #f9f8f3;
  color: #f2c865;
}

/* Card Type 03 Icons */
.card-t03-icons {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 6%;
  float: left;
}

/* Card Type 03 Title */
.card-t03-title {
  font-size: 30px;
  text-align: left;
  font-weight: bold;
  padding-top: 20px;
}

/* Card Type 03 Description/Text */
.card-t03-desc {
  padding: 10px;
  text-align: left;
  font-size: 18px;
  color: #3D3D3D;
}

/* ------------- END Card Type 03 ------------- */
/* ------------- Card Type 04 ------------- */
.container-card-t04 {
  /* The container helps categorize our modules.
  *  We Should copy/paste modules by container.
  */
  overflow: hidden;
}

.card-t04 {
  height: auto;
  font-family: Georgia, serif;
  line-height: 1.8em;
  padding: 20px;
  background-color: white;
  border: 1px solid #f0f0f0;
  box-shadow: 0 4px 7px rgba(0, 0, 0, .05);
  border-top: 5px solid #1b95f5;
  background-color: #f5f7f9;
  /* or swap this with white and have the background this color*/
}

/* Card Type 04 Icons */
.card-t04-icons {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 6%;
}

/* Card Type 04 Title */
.card-t04-title {
  font-size: 30px;
  text-align: center;
  font-weight: bold;
  padding-top: 20px;
}

/* Card Type 04 Description/Text */
.card-t04-desc {
  padding: 10px;
  text-align: left;
  font-size: 18px;
  color: #3D3D3D;
}

/* ------------- END Card Type 04 ------------- */
/* ------------- Card Type 05 ------------- */
.container-card-t05 {
  /* The container helps categorize our modules.
  *  We Should copy/paste modules by container.
  */
  overflow: hidden;
  padding: 8%5%;
  /*! padding-top: 3%; */
  background-color: white;
  color: black;
}

.card-t05-01,
.card-t05-02,
.card-t05-03,
.card-t05-04,
.card-t05-05,
.card-t05-06 {
  height: auto;
  font-family: Georgia, serif;
  line-height: 1.8em;
}

.card-t05-01 {
  /*! background-color: #ecf6f5; */
  /*! color: #52c0b3; */
}

.card-t05-02 {
  /*! background-color: #f7efe6; */
  /*! color: #f79726 */
}

.card-t05-03 {
  /*! background-color: #f9f3f3; */
  /*! color: #f26865; */
}

.card-t05-04 {
  /*! background-color: #f5ecf6; */
  /*! color: #9352c0; */
}

.card-t05-05 {
  /*! background-color: #e9e6f7; */
  /*! color: #266ef7; */
}

.card-t05-06 {
  /*! background-color: #f9f8f3; */
  /*! color: #f2c865; */
}

/* Card Type 05 Title */
.card-t05-title {
  font-size: 25px;
  text-align: left;
  font-weight: bold;
  padding-top: 20px;
  padding-left: 3%;
  /*! border-bottom: 1px solid silver; */
  /*! margin-right: 31%; */
  /*! padding-bottom: 2%; */
  /*! margin-left: -3%; */
  color: #dfb886;
}

/* Card Type 05 Description/Text */
.card-t05-desc {
  padding: 3%;
  text-align: left;
  font-size: 18px;
  /*! color: #3D3D3D; */
}

/* ------------- END Card Type 05 ------------- */
/* ------------- Card Type 06 ------------- */
.container-card-t06 {
  /* The container helps categorize our modules.
  *  We Should copy/paste modules by container.
  */
  overflow: hidden;
}

.card-t06,
.card-t07 {
  background-color: #4e131f;
  color: white;
  /*! min-height: 100%; */
  width: 37%;
  float: left;
  display: flex;
  justify-content: center;
  align-items: center;
  /*! padding: 4rem 1rem 4rem 2rem; */
}

div.card-t06.fifty-split {
  width: 50%;
}

.color-dark {
  background-color: #4e131f;
}

div.card-image-left img.p-fifty {
  width: 50%;
}

.card-image-left {
  display: flex;
}

div.card-image-left img {
  width: 63%;
  height: auto;
  object-fit: cover;
  background-color: #252934;
}

.card-t06-desc,
.card-t07-desc {
  font-weight: 100;
  letter-spacing: .7px;
  line-height: 1.6;
  font-size: 18px;
  font-family: Georgia, serif;
  padding: 3rem 6rem 3rem 6rem;
}

/* ------------- END Card Type 06 ------------- */
/* ------------- Card Type 07 ------------- */
.container-card-t07 {
  /* The container helps categorize our modules.
  *  We Should copy/paste modules by container.
  */
  overflow: hidden;
}

.card-image-right {
  display: flex;
  flex-direction: row-reverse;
}

div.card-image-right img {
  width: 63%;
  height: auto;
  object-fit: cover;
  background-color: #252934;
}

/* ------------- END Card Type 07 ------------- */
/*
*
*
*
*/
/* ------------- MEDIA QUERIES ------------- */
@media only screen and (max-width: 64em) {

  .layout-master,
  .layout-master-33,
  .layout-master-nospace {
    padding: 5px 5px;
    float: left;
    width: 100%;
  }

  .layout-master-nospace {
    padding: 0px;
  }

  div.layout-master-nospace.mod-fifty-one {
    width: 100%;
  }

  div.layout-master.splitscreen {
    width: 100%;
  }

  div.layout-master.triplescreen {
    width: 33.33%;
  }

  /* Card Type 01 */
  .card-t01 {
    height: auto;
  }

  /* Card Type 06 */
  .layout-master-100 {
    width: 100%;
    /*! padding: 1% 5%; */
  }

  .card-t06 {
    width: 100%;
    overflow: hidden;
  }

  div.card-image-left img,
  div.card-image-right img {
    width: 100%;
    height: auto;
    object-fit: cover;
  }

  .card-image-left,
  .card-image-right {
    flex-direction: column;
  }

  .card-t06-desc,
  .card-t07-desc {
    /*! max-width: 45rem; */
  }

  /* Card Type 07 */
  .card-t07 {
    width: 100%;
    overflow: hidden;
  }

  .card-desc {
    max-width: 45rem;
  }

  .main-heading {
    padding: 7%;
  }

  /* Universal Components */
  .card {
    width: 100%;
  }

  div.card-image-left img.p-fifty {
    width: 100%;
  }

  div.card-t06.fifty-split {
    width: 100%;
  }
}

@media only screen and (max-width: 37.5em) {

  .layout-master,
  .layout-master-33,
  .layout-master-nospace {
    padding: 5px 5px;
    float: left;
    width: 100%;
  }

  .layout-master-nospace {
    padding: 0px;
  }

  /* Used in Card 06 */
  .layout-master-100 {
    width: 100%;
    /*! padding: 1% 5%; */
  }

  div.layout-master.triplescreen {
    width: 50%;
  }

  div.layout-master.quadscreen {
    width: 50%;
  }

  .card-desc {
    padding: 3rem 2rem;
  }

  .card-t06-desc,
  .card-t07-desc {
    padding: 7%;
  }

  .action-heading {
    padding-left: 10px;
  }

  .action-link {
    padding: 7%;
    padding-left: 10px;
  }

  .container-works {
    padding: 0;
  }
}