Our default CSS files should have all of the necessary styles to give you a running start. The _globals.css file contains default CSS custom properties (variables) that control the site's colors, fonts, and others. Feel free to add to this list as needed.

Our template css resets box-sizing to border-box for every element. This allows us to more easily assign widths to elements that also have padding and borders.

Our layouts include /css/_grid.css which provides some helper classes for laying out flexbox elements:

• .flex sets display: flex; on the element
• .centered tries to center the contents of the flex container both horizontally and vertically
• .stacked sets the contents to be vertically stacked
• .middle centers the contents vertically
• .grid-[number] sets the width of its element to the specified percentage. Check the file for the included widths

In addition, when the viewport's width is 768px or less, it sets all of the .grid-[number] columns to width: 100%; and all of the flex containers to flex-direction: column;

For improved cross-browser rendering, it's a good idea to include default styles at the beginning of the globals.css to correct small inconsistencies across browsers and devices. The following is based on Normalize.css but modified to work with our typical site build-outs and Perpetua styling.

/* Default Styles
   ========================================================================== */

article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
menu,
nav,
section {
    display: block
}

audio,
canvas,
progress,
video {
    display: inline-block
}

a {
    background-color: transparent;
    -webkit-text-decoration-skip: objects
}

a:active,
a:hover,
a:visited:hover,
a:active:hover {
    text-decoration: none;
    outline-width: 0
}

b,
strong {
    font-weight: inherit
}

b,
strong {
    font-weight: bolder
}

sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline
}

sub {
    bottom: -0.25em
}

sup {
    top: -0.5em
}

a img {
  border-style: none;
}

svg:not(:root) {
  overflow: hidden;
}

hr {
    box-sizing: content-box;
    height: 0;
    overflow: visible
}

button,
input,
select,
textarea {
    font: inherit;
    margin: 0
}

optgroup {
    font-weight: bold
}

button,
input {
    overflow: visible
}

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
    border-style: none;
    padding: 0
}

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
    outline: 1px dotted ButtonText
}

textarea {
    overflow: auto
}

[type="checkbox"],
[type="radio"] {
    box-sizing: border-box;
    padding: 0
}

[type="search"] {
    -webkit-appearance: textfield;
    outline-offset: -2px
}

[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none
}

::-webkit-input-placeholder {
    color: inherit;
    opacity: 0.54
}

::-webkit-file-upload-button {
    -webkit-appearance: button;
    font: inherit
}

html {
  width: 100%;
  min-height: 100%;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%
}

  *, *:before, *:after {
    box-sizing: inherit;
  }

/* Page Layout & Utility
   ========================================================================== */

body {
  width: 100%;
  min-height: 100%;
  padding: 0;
  margin: 0;
  background: #353535;
  -ms-font-feature-settings: 'liga' 1, 'kern';
   -o-font-feature-settings: 'liga' 1, 'kern'; /* FF old */
      font-feature-settings: 'liga' 1, 'kern';
}

.main-container {
  position: relative;
  width: 100%;
  min-width: 1024px;
  height: 100%;
  min-height: 400px;
  padding: 0;
  margin: 0 auto;
  font-family: 'Lato', Helvetica, Arial, sans-serif;
  font-size: 10px;
  font-weight: 400;
  color: #65615c;
}

.wide {
  position: relative;
  width: 100%;
  min-width: 1024px;
  padding: 0;
  margin: 0 auto;
}

.container {
  position: relative;
  width: 1000px;
  max-width: 100%;
  margin: 0 auto;
  padding: 0;
}


.mobile {
  display: none !important;
}

@media (max-width: 768px) {
  .wide, .main-container {
    width: 100%;
    min-width: 0;
  }

  .container {
    width: 540px;
  }
}

@media (max-width: 576px) {
  .container {
    width: 100%;
    padding-left: 30px;
    padding-right: 30px;
  }
}

/*  Header
   ========================================================================== */

.primary {
  position: relative;
  padding-top: 16px;
  padding-bottom: 16px;
  display: block;
  background-color: #fff;
  z-index: 3000;
}

.primary > .container {
  width: 90%;
  overflow: hidden;
  display: table;
  vertical-align: middle;
}

#logo {
  display: table-cell;
  width: 30%;
  transition:. 25s ease-out;
  line-height: 1;
  vertical-align: middle;
}

#logo a {
  display: block;
}

#logo img {
  max-width: 400px;
  max-height: 100px;
  height: auto;
}


@media (max-width: 768px) {
  .primary {
    padding: 0;
    display: block;
  }
  
  .primary > .container {
    display: block;
    width: 100%;
    padding: 0;
  }
  
  #logo {
    float: left;
    display: block;
    margin-left: 2%;
    padding: 8px 0;
    width: 70%;
    max-width: 300px;
  }
}
  
/*  Navigation
   ========================================================================== */

#menu {
  display: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.navigation {
  position: relative;
  width: 70%;
  display: table-cell;
  vertical-align: middle;
  z-index: 100;
  text-align: right;
}

.navigation ul {
  position: relative;
  margin: 0 auto;
  padding: 0;
  list-style: none;
  overflow: hidden;
  font-size: 0;
}

.navigation ul li {
  position: relative;
  display: inline-block;
  text-align: center;
  font-size: 16px;
  margin-left: 8px;
}

.navigation ul li a {
  position: relative;
  display: block;
  padding: 8px 14px;
  margin: 0;
  color: #413d3a;
  font-size: 16px;
  font-weight: normal;
  line-height: 1;
  text-decoration: none;
  text-align: center;
  transition:.12s cubic-bezier(.4,0,.2,1);
}


.navigation ul li a:hover,
.navigation ul li a:focus,
.navigation ul li a.active,
.navigation ul li a.active:hover {
  color: #005a9c;
}

@media (max-width: 768px) {
  /*
   * Menu Button
   */

  #menu {
    position: relative;
    float: right;
    z-index: 201;
    font: inherit;
      display: block;
      overflow: visible;
      margin: 0;
      padding: 29px 20px;
      cursor: pointer;
      transition-timing-function: linear;
      transition-duration: .15s;
      transition-property: opacity,-webkit-filter;
      transition-property: opacity,filter;
      transition-property: opacity,filter,-webkit-filter;
      text-transform: none;
      color: inherit;
      border: 0;
      background-color: #fff;
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
  }
  #menu:focus,
  #menu:active {
    outline: 0;
  }

  .menu-bars {
    position: relative;
      display: block;
      width: 30px;
      height: 20px;
  }

  .menu-bar {
    display: block;
    top: 50%;
    margin-top: -1px;
  }
  .menu-bar,
  .menu-bar::before,
  .menu-bar::after {
      width: 30px;
      height: 2px;
      background-color: #005a9c;
      border-radius: 4px;
      position: absolute;
      transition-property: transform;
      transition-duration: 0.15s;
      transition-timing-function: ease;
  }
  .menu-bar::before,
  .menu-bar::after {
    content: "";
    display: block;
  }
  .menu-bar::before {
    top: -8px;
  }
  .menu-bar::after {
    bottom: -8px;
  }

  /*
   * Menu Animation
   */
   
  #menu.active {
    background-color: #005a9c;
  }
  
  .active .menu-bar,
  .active .menu-bar::before,
  .active .menu-bar::after {
      background-color: #fff;
  }
  
  .menu-bar {
    transition-duration: 0.1s;
    transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  
  .menu-bar::before {
    transition: top 0.1s 0.14s ease, opacity 0.1s ease;
  }
  
  .menu-bar::after {
    transition: bottom 0.1s 0.14s ease, transform 0.1s cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  .active .menu-bar {
    transform: rotate(45deg);
    transition-delay: 0.14s;
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  
  .active .menu-bar::before {
    top: 0;
    opacity: 0;
    transition: top 0.1s ease, opacity 0.1s 0.14s ease;
  }
  
  .active .menu-bar::after {
    bottom: 0;
    transform: rotate(-90deg);
    transition: bottom 0.1s ease, transform 0.1s 0.14s cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  .navigation {
    position: relative;
    display: block;
    margin: 0;
    width: 100%;
    max-width: 100%;
    max-height: 100%;
    height: 0px;
    float: none;
    background-color: #005a9c;
    transition: 0.4s ease-out;
    overflow: hidden;
  }

  .navigation ul {
    height: auto;
    width: 100%;
  }
  
  .navigation ul .left,
  .navigation ul .right {
    float: none;
    width: 100%;
    display: block; 
  }

  .navigation ul li {
    width: 100%;
    display: block;
    float: none;
    margin: 0;
  }

  .navigation ul li a {
    width: 100%;
    display: block;
    float: none;
    margin: 0;
    padding: 12px 3%;
    color: #fff;
    font-size: 18px;
    line-height: 24px;
    text-align: center;
  }
  
  .navigation ul li a:hover,
  .navigation ul li a:focus,
  .navigation ul li a.active,
  .navigation ul li a.active:hover {
    color: #fff;
  }
}


/*  General Content Styles
   ========================================================================== */

.hero {
  position: relative;
  width: 100%;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  overflow: hidden;
}

#content .cb-body img {
  max-width: 100%;
  height: auto;
}

.text-center {
  text-align: center !important;
}

.text-right {
  text-align: right !important;
}

.text-justify {
  text-align: justify !important;
}
  

/*  Footer
   ========================================================================== */

.site-footer {
  background: #2e2e2e;
  color: #fff;
  overflow: hidden;
  padding: 0;
}

.footer-row {
  margin: 5em auto;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -ms-flex-flow: row nowrap;
  -webkit-flex-flow: row nowrap;
          flex-flow: row;
  -ms-flex-pack: justify;
    -webkit-justify-content: space-between;
            justify-content: space-between;
}

.footer-column {
  font-size: 1.4em;
  line-height: 1.6;
}

.footer-column p {
  margin: .2em 0;
}

.footer-column a:not(.button) {
  color: #fff;
}

.footer-column strong {
  font-size: 1.14em;
}

.footer-column strong,
.footer-column strong a {
  color: #dea92c !important;
  font-weight: 600;
}

.footer-column a:not(.button):not(.social-link):hover {
  text-decoration: underline;
}

.footer-column a.button {
  font-size: 14px;
  margin: 1em 0;
}

#search {
  position: relative;
  width: 260px;
  margin: 0;
}

.search-input {
  position: relative;
  width: 100%;
  padding: 8px 48px 8px 8px;
  font-size: 16px;
  line-height: 16px;
  background: #404140;
  color: #fff;
  outline: 0;
  box-sizing: border-box;
}

.search-btn,
.search-input {
  margin: 0;
  border: 0;
  border-radius: 0;
  -webkit-appearance: none;
}

.search-btn {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 40px;
  background: #212224;
  color: #dea92c;
  font-size: 13px;
}

.footer-info {
  background: #212224;
  padding: 2em 0;
}

.footer-copyright {
  text-align: right;
}

.footer-copyright p {
  display: inline-block;
  margin: 10px 0 0 50px;
  font-family: Arial,Helvetica,sans-serif;
  font-size: 10px;
  color: #acacac;
  vertical-align: middle;
  text-transform: uppercase;
}

.footer-copyright a,.footer-copyright a:visited{
  color: #acacac;
  text-decoration: underline;
} 

@media (max-width: 640px) {
  .footer-row {
    -ms-flex-flow: column;
        -webkit-flex-flow: column;
            flex-flow: column;
    text-align: center;
  }

  .footer-column {
    margin: 1em 0;
    font-size: 1.4em;
    line-height: 2;
  }

  #search {
    width: 100%;
  }


  .footer-copyright {
    text-align: center;
  }

  .footer-copyright p {
    display: block;
    margin: 20px auto;
  }
}