/* 
coc-wrapper-styles.css 
Version 1.0 
December 9, 2015

Styles for the UI Wrapper Template - November 12, 2015

Dependencies:
- Google Open Sans Font
- Bootstrap grid 3.3.5 only
- Pattern Library core stylesheet: coc-styles.css
- modernizr
*/
/*////// MAIN CORPORATE THEME FOR CALGARY.CA */
/* Main corporate grey: #4b4f55 */
/*Lightest shade*/
/*Darkets shade*/
/*/////////// Gradients ///////////*/
/*/////////// Flexbox ///////////*/
/*  disable
.container {
  @include flexbox();
}

.item {
  @include flex(1 200px);
  @include order(2);
}
*/
/* -------------------------------------------------------
   START OF _base.scss -- Modified for internal use
   ------------------------------------------------------- */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,audio,canvas,details,figcaption,figure,footer,header,hgroup,mark,menu,meter,nav,output,progress,section,summary,time,video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
}

html {
  font-family: "Open Sans",Helvetica,Arial,Verdana,sans-serif;
/* Set font-size to 62.5% to reset rem units to match 10 pixels (e.g. 1.3em = 13px, 1rem == 10px) */
  font-size: 62.5%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

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

body {
  font-family: "Open Sans",Helvetica,Arial,Verdana,sans-serif;
  font-weight: 400;
  line-height: 1.6;
  font-size: 16px;
  font-size: 1.6rem;
  color: #333;
  background-color: #fff;
}

article,aside,dialog,figure,footer,header,hgroup,nav,section,blockquote {
  display: block;
}

/* Global Classes */
[role=button] {
  cursor: pointer;
}

[role=button]:focus {
  -webkit-box-shadow: 0 0 2px 2px #60bbfe,-4px 7px 11px rgba(0,0,0,0.35);
  -moz-box-shadow: 0 0 2px 2px #60bbfe,-4px 7px 11px rgba(0,0,0,0.35);
  box-shadow: 0 0 2px 2px #60bbfe,-4px 7px 11px rgba(0,0,0,0.35);
  box-shadow: 0 0 3px 3px #60bbfe;
  outline-style: none;
  outline: 2px solid #0394FF \9;
}

:focus,:focus {
  -webkit-box-shadow: 0 0 2px 2px #60bbfe,-4px 7px 11px rgba(0,0,0,0.35);
  -moz-box-shadow: 0 0 2px 2px #60bbfe,-4px 7px 11px rgba(0,0,0,0.35);
  box-shadow: 0 0 2px 2px #60bbfe,-4px 7px 11px rgba(0,0,0,0.35);
  box-shadow: 0 0 3px 3px #60bbfe;
  outline-style: none;
  outline: 2px solid #0394FF \9;
}

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

/* -------------------------------------------------------
   START OF HEADINGS _headings.scss
   ------------------------------------------------------- */
.coc h1,.coc .h1 {
  font-size: 45px;
  font-size: 4.5rem;
  line-height: 1.4;
  margin-top: 2.8rem;
  margin-bottom: 1.5rem;
  color: #6f7277;
  font-weight: 400;
}

@media only screen and (min-width: 200px) {
  .coc h1,.coc .h1 {
    font-size: 26px;
    font-size: 2.6rem;
    margin-bottom: 1.2rem;
  }
}

@media only screen and (min-width: 320px) {
  .coc h1,.coc .h1 {
    font-size: 26px;
    font-size: 2.6rem;
    margin-bottom: 1.2rem;
  }
}

@media only screen and (min-width: 480px) {
  .coc h1,.coc .h1 {
    font-size: 36px;
    font-size: 3.6rem;
    margin-bottom: 1.2rem;
  }
}

@media only screen and (min-width: 768px) {
  .coc h1,.coc .h1 {
    font-size: 40px;
    font-size: 4rem;
    margin-bottom: 1.2rem;
  }
}

@media only screen and (min-width: 992px) {
  .coc h1,.coc .h1 {
    font-size: 45px;
    font-size: 4.5rem;
  }
}

.coc h2,.coc .h2 {
  font-size: 32px;
  font-size: 3.2rem;
  line-height: 1.4;
  margin-top: 2rem;
  margin-bottom: 1.5rem;
  color: #4b4f55;
  font-weight: 400;
}

@media only screen and (min-width: 200px) {
  .coc h2,.coc .h2 {
    font-size: 23px;
    font-size: 2.3rem;
  }
}

@media only screen and (min-width: 320px) {
  .coc h2,.coc .h2 {
    font-size: 23px;
    font-size: 2.3rem;
  }
}

@media only screen and (min-width: 480px) {
  .coc h2,.coc .h2 {
    font-size: 28px;
    font-size: 2.8rem;
  }
}

@media only screen and (min-width: 768px) {
  .coc h2,.coc .h2 {
    font-size: 30px;
    font-size: 3rem;
  }
}

@media only screen and (min-width: 992px) {
  .coc h2,.coc .h2 {
    font-size: 32px;
    font-size: 3.2rem;
  }
}

.coc h3,.coc .h3 {
  font-size: 23px;
  font-size: 2.3rem;
  line-height: 1.5;
  margin-top: 1rem;
  margin-bottom: 1.5rem;
  color: #4b4f55;
  font-weight: 400;
}

@media only screen and (min-width: 200px) {
  .coc h3,.coc .h3 {
    font-size: 20px;
    font-size: 2rem;
  }
}

@media only screen and (min-width: 320px) {
  .coc h3,.coc .h3 {
    font-size: 20px;
    font-size: 2rem;
  }
}

@media only screen and (min-width: 480px) {
  .coc h3,.coc .h3 {
    font-size: 21px;
    font-size: 2.1rem;
  }
}

@media only screen and (min-width: 768px) {
  .coc h3,.coc .h3 {
    font-size: 22px;
    font-size: 2.2rem;
  }
}

@media only screen and (min-width: 992px) {
  .coc h3,.coc .h3 {
    font-size: 23px;
    font-size: 2.3rem;
  }
}

.coc h4,.coc .h4 {
  font-size: 16px;
  font-size: 1.6rem;
  line-height: 1.5;
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
  color: #4b4f55;
  font-weight: 400;
}

@media only screen and (min-width: 200px) {
  .coc h4,.coc .h4 {
    font-size: 16px;
    font-size: 1.6rem;
  }
}

@media only screen and (min-width: 320px) {
  .coc h4,.coc .h4 {
    font-size: 16px;
    font-size: 1.6rem;
  }
}

@media only screen and (min-width: 480px) {
  .coc h4,.coc .h4 {
    font-size: 16px;
    font-size: 1.6rem;
  }
}

@media only screen and (min-width: 768px) {
  .coc h4,.coc .h4 {
    font-size: 16px;
    font-size: 1.6rem;
  }
}

@media only screen and (min-width: 992px) {
  .coc h4,.coc .h4 {
    font-size: 16px;
    font-size: 1.6rem;
  }
}

.coc h5,.coc .h5 {
  font-size: 14px;
  font-size: 1.4rem;
  line-height: 1.4;
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
  color: #4b4f55;
  font-weight: 400;
}

@media only screen and (min-width: 200px) {
  .coc h5,.coc .h5 {
    font-size: 14px;
    font-size: 1.4rem;
  }
}

@media only screen and (min-width: 320px) {
  .coc h5,.coc .h5 {
    font-size: 14px;
    font-size: 1.4rem;
  }
}

@media only screen and (min-width: 480px) {
  .coc h5,.coc .h5 {
    font-size: 14px;
    font-size: 1.4rem;
  }
}

@media only screen and (min-width: 768px) {
  .coc h5,.coc .h5 {
    font-size: 14px;
    font-size: 1.4rem;
  }
}

@media only screen and (min-width: 992px) {
  .coc h5,.coc .h5 {
    font-size: 14px;
    font-size: 1.4rem;
  }
}

.coc h6,.coc .h6 {
  font-size: 12px;
  font-size: 1.2rem;
  font-weight: 400;
  color: #4b4f55;
}

@media only screen and (min-width: 320px) {
  .coc article h1,.coc article .h1,.coc article h2,.coc article .h2,.coc article h3,.coc article .h3,.coc article h4,.coc article .h4 {
    max-width: 440px;
    max-width: 44rem;
  }
}

@media only screen and (min-width: 480px) {
  .coc article h1,.coc article .h1,.coc article h2,.coc article .h2,.coc article h3,.coc article .h3,.coc article h4,.coc article .h4 {
    max-width: 490px;
    max-width: 49rem;
  }
}

@media only screen and (min-width: 768px) {
  .coc article h1,.coc article .h1,.coc article h2,.coc article .h2,.coc article h3,.coc article .h3,.coc article h4,.coc article .h4 {
    max-width: 560px;
    max-width: 56rem;
  }
}

@media only screen and (min-width: 992px) {
  .coc article h1,.coc article .h1,.coc article h2,.coc article .h2,.coc article h3,.coc article .h3,.coc article h4,.coc article .h4 {
    max-width: 600px;
    max-width: 60rem;
  }
}

@media only screen and (min-width: 1200px) {
  .coc article h1,.coc article .h1,.coc article h2,.coc article .h2,.coc article h3,.coc article .h3,.coc article h4,.coc article .h4 {
    max-width: 680px;
    max-width: 56rem;
  }
}

@media only screen and (min-width: 1680px) {
  .coc article h1,.coc article .h1,.coc article h2,.coc article .h2,.coc article h3,.coc article .h3,.coc article h4,.coc article .h4 {
    max-width: 700px;
    max-width: 70rem;
  }
}

/* -------------------------------------------------------
   START OF TEXT _text.scss
   ------------------------------------------------------- */
.coc {
/* Blockquote */
}

.coc p {
  font-size: 16px;
  font-size: 1.6rem;
  margin-bottom: 12px;
  margin-top: 12px;
  font-weight: 400;
/*max-width: $text-max-width;*/
}

@media only screen and (min-width: 320px) {
  .coc p {
    font-size: 16px;
    font-size: 1.6rem;
    max-width: 440px;
    max-width: 44rem;
  }
}

@media only screen and (min-width: 480px) {
  .coc p {
    font-size: 16px;
    font-size: 1.6rem;
    max-width: 490px;
    max-width: 49rem;
  }
}

@media only screen and (min-width: 768px) {
  .coc p {
    font-size: 16px;
    font-size: 1.6rem;
    max-width: 560px;
    max-width: 56rem;
  }
}

@media only screen and (min-width: 992px) {
  .coc p {
    font-size: 16px;
    font-size: 1.6rem;
    max-width: 600px;
    max-width: 60rem;
  }
}

@media only screen and (min-width: 1200px) {
  .coc p {
    font-size: 16px;
    font-size: 1.6rem;
    max-width: 680px;
    max-width: 56rem;
  }
}

@media only screen and (min-width: 1680px) {
  .coc p {
    font-size: 16px;
    font-size: 1.6rem;
    max-width: 700px;
    max-width: 70rem;
  }
}

.coc section > p:last-of-type {
  margin-bottom: 48px;
}

.coc blockquote {
  font-style: italic;
  border-left: 3px solid #c8102e;
  color: #4b4f55;
  padding-left: 15px;
  padding-left: 1.5rem;
  margin-bottom: 24px;
  margin-bottom: 2.4rem;
}

@media only screen and (min-width: 320px) {
  .coc blockquote {
    font-size: 16px;
    font-size: 1.6rem;
    max-width: 440px;
    max-width: 44rem;
  }
}

@media only screen and (min-width: 480px) {
  .coc blockquote {
    font-size: 16px;
    font-size: 1.6rem;
    max-width: 490px;
    max-width: 49rem;
  }
}

@media only screen and (min-width: 768px) {
  .coc blockquote {
    font-size: 17px;
    font-size: 1.7rem;
    max-width: 560px;
    max-width: 56rem;
  }
}

@media only screen and (min-width: 992px) {
  .coc blockquote {
    font-size: 18px;
    font-size: 1.8rem;
    max-width: 600px;
    max-width: 60rem;
  }
}

@media only screen and (min-width: 1200px) {
  .coc blockquote {
    font-size: 18px;
    font-size: 1.8rem;
    max-width: 680px;
    max-width: 56rem;
  }
}

@media only screen and (min-width: 1680px) {
  .coc blockquote {
    font-size: 18px;
    font-size: 1.8rem;
    max-width: 700px;
    max-width: 70rem;
  }
}

.coc blockquote:before,.coc blockquote:after {
  content: '';
  content: none;
}

.coc ins {
  text-decoration: underline;
}

.coc del {
  text-decoration: line-through;
}

.coc mark {
  background: #ff0;
}

.coc abbr[title],.coc dfn[title] {
  border-bottom: 1px dotted #000;
  cursor: help;
}

.coc hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  background: #ccc;
  margin: 24px 0;
  margin: 2.4rem 0;
  padding: 0;
}

/* -------------------------------------------------------
   START OF LINKS _links.scss
   ------------------------------------------------------- */
.coc a {
  color: #c8102e;
  text-decoration: underline;
  outline: 0;
}

.coc a:visited {
  color: #780519;
  outline-style: none;
}

.coc a:focus {
  -webkit-box-shadow: 0 0 2px 2px #60bbfe,-4px 7px 11px rgba(0,0,0,0.35);
  -moz-box-shadow: 0 0 2px 2px #60bbfe,-4px 7px 11px rgba(0,0,0,0.35);
  box-shadow: 0 0 2px 2px #60bbfe,-4px 7px 11px rgba(0,0,0,0.35);
  box-shadow: 0 0 3px 3px #60bbfe;
  outline-style: none;
/* 1st */
  outline: 2px solid #0394FF \9;
/* 2nd -- IE8 hack  */
  background: transparent;
  color: #ef3654;
  text-decoration: none;
}

.coc a:hover {
  outline-style: none;
  color: #ef3654;
  text-decoration: none;
}

.coc a:active {
  outline-style: none;
}

.coc a.light {
  color: #f6f6f6;
  text-decoration: underline;
  outline: 0;
}

.coc a.light:visited {
  color: #bdc2c6;
  outline-style: none;
}

.coc a.light:focus {
  -webkit-box-shadow: 0 0 2px 2px #60bbfe,-4px 7px 11px rgba(0,0,0,0.35);
  -moz-box-shadow: 0 0 2px 2px #60bbfe,-4px 7px 11px rgba(0,0,0,0.35);
  box-shadow: 0 0 2px 2px #60bbfe,-4px 7px 11px rgba(0,0,0,0.35);
  box-shadow: 0 0 3px 3px #60bbfe;
  outline-style: none;
/* 1st */
  outline: 2px solid #0394FF \9;
/* 2nd -- IE8 hack  */
  background: transparent;
  color: #fff;
  text-decoration: none;
}

.coc a.light:hover {
  outline-style: none;
  color: #fff;
  text-decoration: none;
}

.coc a.light:active {
  outline-style: none;
}

/* -------------------------------------------------------
   START OF LISTS _lists.scss
   ------------------------------------------------------- */
.coc {
/*List style classes*/
/* Definition Lists */
}

.coc ol,.coc ul {
  margin: 0 0 0 15px;
  margin: 0 0 0 1.5rem;
  padding: 0;
}

.coc nav ul {
  list-style: none;
}

.coc ol li {
  list-style: decimal;
  list-style-position: inside;
}

.coc ul li {
  list-style: disc;
  list-style-position: inside;
}

.coc ul ul {
  list-style: circle;
}

.coc ol ol {
/*list-style: lower-alpha;
    list-style: upper-roman;*/
}

.coc ul ul,.coc ul ol,.coc ol ul,.coc ol ol {
  list-style-position: inherit;
  margin-left: 24px;
  margin-left: 2.4rem;
}

.coc .lower-alpha {
  list-style-type: lower-alpha;
}

.coc .lower-roman {
  list-style-type: upper-roman;
}

.coc dl {
  overflow: hidden;
  margin: 0 0 24px;
  margin: 0 0 2.4rem;
  line-height: 1.6;
}

@media only screen and (min-width: 320px) {
  .coc dl {
    font-size: 16px;
    font-size: 1.6rem;
    max-width: 440px;
    max-width: 44rem;
  }
}

@media only screen and (min-width: 480px) {
  .coc dl {
    font-size: 16px;
    font-size: 1.6rem;
    max-width: 490px;
    max-width: 49rem;
  }
}

@media only screen and (min-width: 768px) {
  .coc dl {
    font-size: 16px;
    font-size: 1.6rem;
    max-width: 560px;
    max-width: 56rem;
  }
}

@media only screen and (min-width: 992px) {
  .coc dl {
    font-size: 16px;
    font-size: 1.6rem;
    max-width: 600px;
    max-width: 60rem;
  }
}

@media only screen and (min-width: 1200px) {
  .coc dl {
    font-size: 16px;
    font-size: 1.6rem;
    max-width: 680px;
    max-width: 68rem;
  }
}

@media only screen and (min-width: 1680px) {
  .coc dl {
    font-size: 18px;
    font-size: 1.8rem;
    max-width: 700px;
    max-width: 70rem;
  }
}

.coc dl dt {
  font-weight: 800;
  line-height: 1.6;
}

.coc dl dd {
  margin: 0 0 10px;
  margin: 0 0 1rem;
  line-height: 1.6;
}

/* -------------------------------------------------------
   START OF BUTTONS _buttons.scss
   ------------------------------------------------------- */
button.cui:focus {
  -webkit-box-shadow: 0 0 2px 2px #60bbfe,-4px 7px 11px rgba(0,0,0,0.35);
  -moz-box-shadow: 0 0 2px 2px #60bbfe,-4px 7px 11px rgba(0,0,0,0.35);
  box-shadow: 0 0 2px 2px #60bbfe,-4px 7px 11px rgba(0,0,0,0.35);
  box-shadow: 0 0 3px 3px #60bbfe;
  outline-style: none;
/* 1st */
  outline: 2px solid #0394FF \9;
/* 2nd -- IE8 hack  */
}

.cui[class*="btn"] {
  display: inline-block;
  margin: 4px 2px;
  height: 40px;
  height: 4rem;
  color: #606060;
  color: rgba(0,0,0,0.6);
  line-height: 1;
  font-family: "Open Sans",Helvetica,Arial,Verdana,sans-serif;
  font-weight: 400;
  white-space: nowrap;
  font-size: 14px;
  font-size: 1.4rem;
  padding: 12px 18px;
  padding: 1.2rem 1.8rem;
  border: 2px solid #9da4a9;
  border: 2px solid rgba(157,164,169,0.8);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  vertical-align: top;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  -webkit-transition: all .2s ease;
  -moz-transition: all .2s ease;
  -ms-transition: all .2s ease;
  -o-transition: all .2s ease;
  transition: all .2s ease;
}

.cui[class*="btn"]:hover {
/*@include prefix(box-shadow, 0px 7px 11px rgba(0,0,0,0.15), webkit moz);*/
  -webkit-transition: all .2s ease;
  -moz-transition: all .2s ease;
  -ms-transition: all .2s ease;
  -o-transition: all .2s ease;
  transition: all .2s ease;
  outline-style: none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  -box-shadow: none;
}

.cui[class*="btn"]:focus {
  -webkit-box-shadow: 0 0 2px 2px #60bbfe,-4px 7px 11px rgba(0,0,0,0.35);
  -moz-box-shadow: 0 0 2px 2px #60bbfe,-4px 7px 11px rgba(0,0,0,0.35);
  box-shadow: 0 0 2px 2px #60bbfe,-4px 7px 11px rgba(0,0,0,0.35);
  box-shadow: 0 0 3px 3px #60bbfe;
  outline-style: none;
/* 1st */
  outline: 2px solid #0394FF \9;
/* 2nd -- IE8 hack  */
}

.cui[class*="btn"]:active {
  background: #ebebeb;
  -webkit-transition: all 0 ease;
  -moz-transition: all 0 ease;
  -ms-transition: all 0 ease;
  -o-transition: all 0 ease;
  transition: all 0 ease;
  outline-style: none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  -box-shadow: none;
}

.cui[class*="btn"].primary {
  background: #c8102e;
/*@include linear-gradient($coc-main, darken($coc-main,6) );*/
  color: #fff;
  border: 2px solid #c8102e;
  border: 2px solid rgba(200,16,46,0.8);
}

.cui[class*="btn"].primary:hover {
  background: #c8102e;
  background: #db1535;
  outline-style: none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  -box-shadow: none;
}

.cui[class*="btn"].primary:active {
  background: #c8102e;
  outline-style: none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  -box-shadow: none;
}

.cui[class*="btn"].primary-fluid {
  background: #c8102e;
/*@include linear-gradient($coc-main, darken($coc-main,6) );*/
  color: #fff;
  border: 2px solid #c8102e;
  border: 2px solid rgba(200,16,46,0.8);
  width: 100%;
}

.cui[class*="btn"].primary-fluid:hover {
  background: #c8102e;
  background: #db1535;
  outline-style: none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  -box-shadow: none;
}

.cui[class*="btn"].primary-fluid:active {
  background: #c8102e;
  outline-style: none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  -box-shadow: none;
}

.cui[class*="btn"].primary-ghost {
  background: transparent;
/*@include linear-gradient($coc-main, darken($coc-main,6) );*/
  color: #c8102e;
  border: 2px solid #c8102e;
  border: 2px solid #c8102e;
}

.cui[class*="btn"].primary-ghost:hover {
  background: #db1535;
  color: #fff;
  outline-style: none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  -box-shadow: none;
}

.cui[class*="btn"].primary-ghost:active {
  background: #c8102e;
  color: #fff;
  outline-style: none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  -box-shadow: none;
}

.cui[class*="btn"].primary-ghost-fluid {
  background: transparent;
/*@include linear-gradient($coc-main, darken($coc-main,6) );*/
  color: #c8102e;
  border: 2px solid #c8102e;
  border: 2px solid #c8102e;
  width: 100%;
}

.cui[class*="btn"].primary-ghost-fluid:hover {
  background: #db1535;
  color: #fff;
  outline-style: none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  -box-shadow: none;
}

.cui[class*="btn"].primary-ghost-fluid:active {
  background: #c8102e;
  color: #fff;
  outline-style: none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  -box-shadow: none;
}

.cui[class*="btn"].secondary-ghost {
  background: rgba(0,0,0,0.1);
  background: transparent;
/*@include linear-gradient($coc-main, darken($coc-main,6) );*/
  color: #333;
  border: 2px solid #5b6770;
  border: 2px solid rgba(91,103,112,0.8);
}

.cui[class*="btn"].secondary-ghost:hover {
  background: #4b4f55;
  color: #ededee;
  outline-style: none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  -box-shadow: none;
}

.cui[class*="btn"].secondary-ghost:active {
  background: #7f7f7f;
  color: #ededee;
  outline-style: none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  -box-shadow: none;
}

.cui[class*="btn"].secondary-ghost-fluid {
  background: rgba(0,0,0,0.1);
  background: transparent;
/*@include linear-gradient($coc-main, darken($coc-main,6) );*/
  color: #333;
  border: 2px solid #5b6770;
  border: 2px solid rgba(91,103,112,0.8);
  width: 100%;
}

.cui[class*="btn"].secondary-ghost-fluid:hover {
  background: #4b4f55;
  color: #ededee;
  outline-style: none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  -box-shadow: none;
}

.cui[class*="btn"].secondary-ghost-fluid:active {
  background: #7f7f7f;
  color: #ededee;
  outline-style: none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  -box-shadow: none;
}

.cui[class*="btn"].primary-solid {
  background: #fff;
/*@include linear-gradient($coc-main, darken($coc-main,6) );*/
  color: #c8102e;
  border: 2px solid #c8102e;
  border: 2px solid #c8102e;
}

.cui[class*="btn"].primary-solid:hover {
  background: #db1535;
  color: #fff;
  outline-style: none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  -box-shadow: none;
}

.cui[class*="btn"].primary-solid:active {
  background: #c8102e;
  color: #fff;
  outline-style: none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  -box-shadow: none;
}

.cui[class*="btn"].primary-solid-fluid {
  background: #fff;
/*@include linear-gradient($coc-main, darken($coc-main,6) );*/
  color: #c8102e;
  border: 2px solid #c8102e;
  border: 2px solid #c8102e;
  width: 100%;
}

.cui[class*="btn"].primary-solid-fluid:hover {
  background: #db1535;
  color: #fff;
  outline-style: none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  -box-shadow: none;
}

.cui[class*="btn"].primary-solid-fluid:active {
  background: #c8102e;
  color: #fff;
  outline-style: none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  -box-shadow: none;
}

.cui[class*="btn"].secondary-solid {
  background: #fff;
/*@include linear-gradient($coc-main, darken($coc-main,6) );*/
  color: #333;
  border: 2px solid #5b6770;
  border: 2px solid rgba(91,103,112,0.8);
}

.cui[class*="btn"].secondary-solid:hover {
  background: #4b4f55;
  color: #ededee;
  outline-style: none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  -box-shadow: none;
}

.cui[class*="btn"].secondary-solid:active {
  background: #7f7f7f;
  color: #ededee;
  outline-style: none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  -box-shadow: none;
}

.cui[class*="btn"].secondary-solid-fluid {
  background: #fff;
/*@include linear-gradient($coc-main, darken($coc-main,6) );*/
  color: #333;
  border: 2px solid #5b6770;
  border: 2px solid rgba(91,103,112,0.8);
  width: 100%;
}

.cui[class*="btn"].secondary-solid-fluid:hover {
  background: #4b4f55;
  color: #ededee;
  outline-style: none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  -box-shadow: none;
}

.cui[class*="btn"].secondary-solid-fluid:active {
  background: #7f7f7f;
  color: #ededee;
  outline-style: none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  -box-shadow: none;
}

.cui[class*="btn"].disabled,.cui[class*="btn"][disabled] {
  background: #dbdcdd;
/*background: rgba(222, 225, 226 ,0.9);*/
/*color: $coc-secondary-4L;*/
  color: rgba(0,0,0,0.25);
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  filter: progid:DXImageTransform.Microsoft.gradient GradientType=0,startColorstr=#000000 endColorstr=#000000;
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0,startColorstr=#000000,endColorstr=#000000)";
  cursor: not-allowed;
}

.cui[class*="btn"].disabled-fluid,.cui[class*="btn"][disabled] {
  background: #dbdcdd;
/*background: rgba(222, 225, 226 ,0.9);*/
/*color: $coc-secondary-4L;*/
  color: rgba(0,0,0,0.25);
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  filter: progid:DXImageTransform.Microsoft.gradient GradientType=0,startColorstr=#000000 endColorstr=#000000;
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0,startColorstr=#000000,endColorstr=#000000)";
  cursor: not-allowed;
}

.cui[class*="btn"].disabled-fluid {
  width: 100%;
}

.cui[class*="btn"].success {
  background: #409D44;
/*@include linear-gradient($success, darken($success,6) );*/
  color: #fff;
}

.cui[class*="btn"].success:active {
  background: #348037;
  outline-style: none;
}

.cui[class*="btn"].warning {
  background: #D87400;
/*@include linear-gradient($warning, darken($warning,4) );*/
  color: #fff;
}

.cui[class*="btn"].warning:active {
  background: #af5e00;
  outline-style: none;
}

.cui[class*="btn"].danger {
  background: #d43f3a;
/*@include linear-gradient($danger, darken($danger,7) );*/
  color: #fff;
}

.cui[class*="btn"].danger:active {
  background: #bc2e29;
  outline-style: none;
}

.cui[class*="btn"].primary-text {
  box-shadow: none;
  background: transparent;
  border: 2px solid transparent;
  padding-left: 10px;
  padding-left: 1rem;
  padding-right: 10px;
  padding-right: 1rem;
  color: #c8102e;
}

.cui[class*="btn"].primary-text:hover {
  background: #ededee;
  outline-style: none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  -box-shadow: none;
}

.cui[class*="btn"].primary-text:focus {
/*@include prefix( box-shadow, 0px 0px 5px 2px $btn-blue-glow, webkit moz);
        Using the global focus class with the red glowing border
        */
  background: #ededee;
/*outline-style: 1px solid green;*/
}

.cui[class*="btn"].primary-text:active {
  outline-style: none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  -box-shadow: none;
}

.cui[class*="btn"].primary-text.disabled,.cui[class*="btn"].primary-text[disabled] {
  color: rgba(0,0,0,0.25);
  background: transparent;
/*@include prefix( box-shadow, none, webkit moz);*/
}

.cui[class*="btn"].secondary-text {
  box-shadow: none;
  background: transparent;
  border: 1px solid transparent;
  padding-left: 10px;
  padding-left: 1rem;
  padding-right: 10px;
  padding-right: 1rem;
  color: #333;
}

.cui[class*="btn"].secondary-text:hover {
  background: #ededee;
/*background: rgba(0,0,0,0.05);*/
  background: #ededee;
  outline-style: none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  -box-shadow: none;
}

.cui[class*="btn"].secondary-text:focus {
/*@include prefix( box-shadow, 0px 0px 5px 2px $btn-blue-glow, webkit moz);
        Using the global focus class with the red glowing border
        */
  background: #ededee;
}

.cui[class*="btn"].secondary-text:active {
  outline-style: none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  -box-shadow: none;
}

.cui[class*="btn"].secondary-text.disabled,.cui[class*="btn"].secondary-text[disabled] {
  color: rgba(0,0,0,0.25);
  background: transparent;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}

.cui[class*="btn"] [class*="icon"].left {
  margin: 0 6px 0 0;
  margin: 0 .6rem 0 0;
}

.cui[class*="btn"] [class*="icon"].right {
  margin: 0 0 0 6px;
  margin: 0 0 0 .6rem;
}

.cui[class*="btn"].block {
  width: 100%;
}

button.cui.btn {
/*outline:0;
    remove the default outline on the button element -- cui.btn uses a box-shadow instead for :focus*/
}

.cui.btn-sm {
  padding: 5px 10.5px;
  padding: .5rem 1.05rem;
  font-size: 14px;
  font-size: 1.4rem;
  height: 30px;
  height: 3rem;
}

.cui.btn-sm:hover {
  outline-style: none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  -box-shadow: none;
}

.cui.btn-sm:active {
  outline-style: none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  -box-shadow: none;
}

.cui.btn-md {
  padding: 8px 15px;
  padding: .8rem 1.5rem;
  font-size: 16px;
  font-size: 1.6rem;
  height: 37px;
  height: 3.7rem;
}

.cui.btn-md:hover {
  outline-style: none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  -box-shadow: none;
}

.cui.btn-md:active {
  outline-style: none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  -box-shadow: none;
}

.cui.btn-lg {
  padding: 11px 27px;
  padding: 1.1rem 2.7rem;
  font-size: 20px;
  font-size: 2rem;
  height: 47px;
  height: 4.7rem;
}

.cui.btn-lg:hover {
  outline-style: none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  -box-shadow: none;
}

.cui.btn-lg:active {
  outline-style: none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  -box-shadow: none;
}

.cui.icon-only {
  padding: 7px 0;
  padding: .7rem 0;
  font-size: 24px;
  font-size: 2.4rem;
  height: 40px;
  height: 4rem;
  width: 40px;
  width: 4rem;
}

.cui.icon-only:focus {
  outline-style: none;
}

.cui.icon-only:active {
  outline-style: none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  -box-shadow: none;
}

.cui.icon-only.btn-sm {
  padding: 5px 0;
  padding: .5rem 0;
  font-size: 16px;
  font-size: 1.6rem;
  height: 28px;
  height: 2.8rem;
  width: 28px;
  width: 2.8rem;
}

.cui.icon-only.btn-md {
/* Defaults to .cui.icon-only class */
}

.cui.icon-only.btn-lg {
  padding: 10px 0;
  padding: 1rem 0;
  font-size: 30px;
  font-size: 3rem;
  height: 50px;
  height: 5rem;
  width: 50px;
  width: 5rem;
}

.cui.btn-mega {
  padding: 16px;
  padding: 1.6rem;
  font-size: 16px;
  font-size: 1.6rem;
/*@include rem(width, 160px);*/
  height: 160px;
  height: 16rem;
  line-height: 1.5;
}

.cui.btn-mega [class*="icon"] {
  display: block;
  font-size: 400%;
}

.cui.btn-mega [class*="icon"].top {
  margin: 0 0 10px;
  margin: 0 0 1rem;
}

.cui.btn-mega [class*="icon"].bottom {
  margin: 10px 0 0;
  margin: 1rem 0 0;
}

.cui.btn-mega:hover {
  background: #c8102e;
  background: #db1535;
  outline-style: none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  -box-shadow: none;
}

.cui.btn-mega:active {
  background: #c8102e;
  outline-style: none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  -box-shadow: none;
}

.ie8 .cui[class*="btn"]:focus {
  outline: 2px solid #0394FF;
}

.coc img {
  max-width: 100%;
  height: auto;
}

/* -------------------------------------------------------
   START OF COLORS _colors.scss
   ------------------------------------------------------- */
.coc-white {
  background-color: #fff;
  color: #333;
}

.coc-white h1,.coc-white h2,.coc-white h3,.coc-white h4,.coc-white h5,.coc-white h6,.coc-white p {
  color: #333 !important;
}

.coc-white-opacity {
  background-color: rgba(255,255,255,0.9);
  color: #black;
}

.coc-white-opacity h1,.coc-white-opacity h2,.coc-white-opacity h3,.coc-white-opacity h4,.coc-white-opacity h5,.coc-white-opacity h6,.coc-white-opacity p {
  color: #black !important;
}

.coc-black-opacity {
  background-color: rgba(0,0,0,0.8);
  color: #fff;
}

.coc-black-opacity h1,.coc-black-opacity h2,.coc-black-opacity h3,.coc-black-opacity h4,.coc-black-opacity h5,.coc-black-opacity h6,.coc-black-opacity a,.coc-black-opacity p {
  color: #fff !important;
}

.coc-main {
  background-color: #c8102e;
  color: #fff;
}

.coc-main h1,.coc-main h2,.coc-main h3,.coc-main h4,.coc-main h5,.coc-main h6,.coc-main a,.coc-main p {
  color: #fff !important;
}

.coc-secondary-green-safety {
  background-color: #009639;
  color: #000;
}

.coc-secondary-green-safety h1,.coc-secondary-green-safety h2,.coc-secondary-green-safety h3 {
  color: #fff !important;
}

.coc-secondary-green-safety h4,.coc-secondary-green-safety h5,.coc-secondary-green-safety h6,.coc-secondary-green-safety p,.coc-secondary-green-safety a {
  color: #000 !important;
}

.coc-secondary-green-pedestrian {
  background-color: #C4D600;
  color: #000;
}

.coc-secondary-green-pedestrian h1,.coc-secondary-green-pedestrian h2,.coc-secondary-green-pedestrian h3,.coc-secondary-green-pedestrian h4,.coc-secondary-green-pedestrian h5,.coc-secondary-green-pedestrian h6,.coc-secondary-green-pedestrian a,.coc-secondary-green-pedestrian p {
  color: #000 !important;
}

.coc-secondary-blue-access {
  background-color: #0057B8;
  color: #fff;
}

.coc-secondary-blue-access h1,.coc-secondary-blue-access h2,.coc-secondary-blue-access h3,.coc-secondary-blue-access h4,.coc-secondary-blue-access h5,.coc-secondary-blue-access h6,.coc-secondary-blue-access a,.coc-secondary-blue-access p {
  color: #fff !important;
}

/*based on the corporate grey*/
.coc-secondary {
  background-color: #4b4f55;
  color: #f6f6f6;
}

.coc-secondary h1,.coc-secondary h2,.coc-secondary h3,.coc-secondary h4,.coc-secondary h5,.coc-secondary h6,.coc-secondary a,.coc-secondary p {
  color: #f6f6f6 !important;
}

.coc-secondary .cui.secondary-ghost {
  color: #fff !important;
  border: 2px solid #a5a7aa !important;
}

.coc-secondary .cui.secondary-ghost:hover {
  background: #ededee !important;
  color: #4b4f55 !important;
}

.coc-secondary-1L {
  background-color: #5d6066;
  color: #f6f6f6;
}

.coc-secondary-1L h1,.coc-secondary-1L h2,.coc-secondary-1L h3,.coc-secondary-1L h4,.coc-secondary-1L h5,.coc-secondary-1L h6,.coc-secondary-1L a,.coc-secondary-1L p {
  color: #f6f6f6 !important;
}

.coc-secondary-1L .cui.secondary-ghost {
  color: #fff !important;
  border: 2px solid #a5a7aa !important;
}

.coc-secondary-1L .cui.secondary-ghost:hover {
  background: #ededee !important;
  color: #4b4f55 !important;
}

.coc-secondary-2L {
  background-color: #6f7277;
  color: #fff;
}

.coc-secondary-2L h1,.coc-secondary-2L h2,.coc-secondary-2L h3,.coc-secondary-2L h4,.coc-secondary-2L h5,.coc-secondary-2L h6,.coc-secondary-2L a,.coc-secondary-2L p {
  color: #fff !important;
}

.coc-secondary-2L .cui.secondary-ghost {
  color: #fff !important;
  border: 2px solid #a5a7aa !important;
}

.coc-secondary-2L .cui.secondary-ghost:hover {
  background: #ededee !important;
  color: #4b4f55 !important;
}

.coc-secondary-3L {
  background-color: #818388;
  color: #000;
}

.coc-secondary-3L h1,.coc-secondary-3L h2,.coc-secondary-3L h3,.coc-secondary-3L h4,.coc-secondary-3L h5,.coc-secondary-3L h6,.coc-secondary-3L a,.coc-secondary-3L p {
  color: #000 !important;
}

.coc-secondary-4L {
  background-color: #939599;
  color: #000;
}

.coc-secondary-4L h1,.coc-secondary-4L h2,.coc-secondary-4L h3,.coc-secondary-4L h4,.coc-secondary-4L h5,.coc-secondary-4L h6,.coc-secondary-4L a,.coc-secondary-4L p {
  color: #000 !important;
}

.coc-secondary-5L {
  background-color: #a5a7aa;
  color: #000;
}

.coc-secondary-5L h1,.coc-secondary-5L h2,.coc-secondary-5L h3,.coc-secondary-5L h4,.coc-secondary-5L h5,.coc-secondary-5L h6,.coc-secondary-5L a,.coc-secondary-5L p {
  color: #000 !important;
}

.coc-secondary-6L {
  background-color: #b7b9bb;
  color: #000;
}

.coc-secondary-6L h1,.coc-secondary-6L h2,.coc-secondary-6L h3,.coc-secondary-6L h4,.coc-secondary-6L h5,.coc-secondary-6L h6,.coc-secondary-6L a,.coc-secondary-6L p {
  color: #000 !important;
}

.coc-secondary-7L {
  background-color: #c9cacc;
  color: #333;
}

.coc-secondary-7L h1,.coc-secondary-7L h2,.coc-secondary-7L h3,.coc-secondary-7L h4,.coc-secondary-7L h5,.coc-secondary-7L h6,.coc-secondary-7L a,.coc-secondary-7L p {
  color: #333 !important;
}

.coc-secondary-8L {
  background-color: #dbdcdd;
  color: #333;
}

.coc-secondary-8L h1,.coc-secondary-8L h2,.coc-secondary-8L h3,.coc-secondary-8L h4,.coc-secondary-8L h5,.coc-secondary-8L h6,.coc-secondary-8L a,.coc-secondary-8L p {
  color: #333 !important;
}

.coc-secondary-9L {
  background-color: #ededee;
  color: #333;
}

.coc-secondary-9L h1,.coc-secondary-9L h2,.coc-secondary-9L h3,.coc-secondary-9L h4,.coc-secondary-9L h5,.coc-secondary-9L h6,.coc-secondary-9L p {
  color: #333 !important;
}

.coc-secondary-10L {
  background-color: #f6f6f6;
  color: #333;
}

.coc-secondary-10L h1,.coc-secondary-10L h2,.coc-secondary-10L h3,.coc-secondary-10L h4,.coc-secondary-10L h5,.coc-secondary-10L h6,.coc-secondary-10L p {
  color: #333 !important;
}

/*based on the corporate black*/
.coc-black {
  background-color: #000;
  color: #f6f6f6;
}

.coc-black h1,.coc-black h2,.coc-black h3,.coc-black h4,.coc-black h5,.coc-black h6,.coc-black a,.coc-black p {
  color: #f6f6f6 !important;
}

.coc-black .cui.secondary-ghost {
  color: #fff !important;
  border: 2px solid #a5a7aa !important;
}

.coc-black .cui.secondary-ghost:hover {
  background: #ededee !important;
  color: #4b4f55 !important;
}

.coc-secondary-1D {
  background-color: #191919;
  color: #f6f6f6;
}

.coc-secondary-1D h1,.coc-secondary-1D h2,.coc-secondary-1D h3,.coc-secondary-1D h4,.coc-secondary-1D h5,.coc-secondary-1D h6,.coc-secondary-1D a,.coc-secondary-1D p {
  color: #f6f6f6 !important;
}

.coc-secondary-1D .cui.secondary-ghost {
  color: #fff !important;
  border: 2px solid #a5a7aa !important;
}

.coc-secondary-1D .cui.secondary-ghost:hover {
  background: #ededee !important;
  color: #4b4f55 !important;
}

.coc-secondary-2D {
  background-color: #333;
  color: #f6f6f6;
}

.coc-secondary-2D h1,.coc-secondary-2D h2,.coc-secondary-2D h3,.coc-secondary-2D h4,.coc-secondary-2D h5,.coc-secondary-2D h6,.coc-secondary-2D a,.coc-secondary-2D p {
  color: #f6f6f6 !important;
}

.coc-secondary-2D .cui.secondary-ghost {
  color: #fff !important;
  border: 2px solid #a5a7aa !important;
}

.coc-secondary-2D .cui.secondary-ghost:hover {
  background: #ededee !important;
  color: #4b4f55 !important;
}

.coc-secondary-3D {
  background-color: #4c4c4c;
  color: #f6f6f6;
}

.coc-secondary-3D h1,.coc-secondary-3D h2,.coc-secondary-3D h3,.coc-secondary-3D h4,.coc-secondary-3D h5,.coc-secondary-3D h6,.coc-secondary-3D a,.coc-secondary-3D p {
  color: #f6f6f6 !important;
}

.coc-secondary-3D .cui.secondary-ghost {
  color: #fff !important;
  border: 2px solid #a5a7aa !important;
}

.coc-secondary-3D .cui.secondary-ghost:hover {
  background: #ededee !important;
  color: #4b4f55 !important;
}

.coc-secondary-4D {
  background-color: #666;
  color: #f6f6f6;
}

.coc-secondary-4D h1,.coc-secondary-4D h2,.coc-secondary-4D h3,.coc-secondary-4D h4,.coc-secondary-4D h5,.coc-secondary-4D h6,.coc-secondary-4D a,.coc-secondary-4D p {
  color: #f6f6f6 !important;
}

.coc-secondary-4D .cui.secondary-ghost {
  color: #fff !important;
  border: 2px solid #a5a7aa !important;
}

.coc-secondary-4D .cui.secondary-ghost:hover {
  background: #ededee !important;
  color: #4b4f55 !important;
}

.coc-secondary-5D {
  background-color: #7f7f7f;
  color: #000;
}

.coc-secondary-5D h1,.coc-secondary-5D h2,.coc-secondary-5D h3,.coc-secondary-5D h4,.coc-secondary-5D h5,.coc-secondary-5D h6,.coc-secondary-5D a,.coc-secondary-5D p {
  color: #000 !important;
}

.coc-secondary-6D {
  background-color: #999;
  color: #000;
}

.coc-secondary-6D h1,.coc-secondary-6D h2,.coc-secondary-6D h3,.coc-secondary-6D h4,.coc-secondary-6D h5,.coc-secondary-6D h6,.coc-secondary-6D a,.coc-secondary-6D p {
  color: #000 !important;
}

.coc-secondary-7D {
  background-color: #b2b2b2;
  color: #000;
}

.coc-secondary-7D h1,.coc-secondary-7D h2,.coc-secondary-7D h3,.coc-secondary-7D h4,.coc-secondary-7D h5,.coc-secondary-7D h6,.coc-secondary-7D a,.coc-secondary-7D p {
  color: #000 !important;
}

.coc-secondary-8D {
  background-color: #ccc;
  color: #333;
}

.coc-secondary-8D h1,.coc-secondary-8D h2,.coc-secondary-8D h3,.coc-secondary-8D h4,.coc-secondary-8D h5,.coc-secondary-8D h6,.coc-secondary-8D a,.coc-secondary-8D p {
  color: #333 !important;
}

.coc-secondary-9D {
  background-color: #e5e5e5;
  color: #333;
}

.coc-secondary-9D h1,.coc-secondary-9D h2,.coc-secondary-9D h3,.coc-secondary-9D h4,.coc-secondary-9D h5,.coc-secondary-9D h6,.coc-secondary-9D p {
  color: #333 !important;
}

/*color palette*/
.coc-secondary-orange {
  background-color: #E57200;
  color: #000;
}

.coc-secondary-orange h1,.coc-secondary-orange h2,.coc-secondary-orange h3,.coc-secondary-orange h4,.coc-secondary-orange h5,.coc-secondary-orange h6,.coc-secondary-orange p,.coc-secondary-orange a {
  color: #000 !important;
}

.coc-secondary-orange-L {
  background-color: #ED8B00;
  color: #000;
}

.coc-secondary-orange-L h1,.coc-secondary-orange-L h2,.coc-secondary-orange-L h3,.coc-secondary-orange-L h4,.coc-secondary-orange-L h5,.coc-secondary-orange-L h6,.coc-secondary-orange-L p,.coc-secondary-orange-L a {
  color: #000 !important;
}

.coc-secondary-orange-D {
  background-color: #DC4405;
  color: #000;
}

.coc-secondary-orange-D h1,.coc-secondary-orange-D h2,.coc-secondary-orange-D h3,.coc-secondary-orange-D h4,.coc-secondary-orange-D h5,.coc-secondary-orange-D h6,.coc-secondary-orange-D p,.coc-secondary-orange-D a {
  color: #000 !important;
}

.coc-secondary-yellow {
  background-color: #FFC600;
  color: #000;
}

.coc-secondary-yellow h1,.coc-secondary-yellow h2,.coc-secondary-yellow h3,.coc-secondary-yellow h4,.coc-secondary-yellow h5,.coc-secondary-yellow h6,.coc-secondary-yellow p,.coc-secondary-yellow a {
  color: #000 !important;
}

.coc-secondary-yellow-L {
  background-color: #FEDB00;
  color: #000;
}

.coc-secondary-yellow-L h1,.coc-secondary-yellow-L h2,.coc-secondary-yellow-L h3,.coc-secondary-yellow-L h4,.coc-secondary-yellow-L h5,.coc-secondary-yellow-L h6,.coc-secondary-yellow-L p,.coc-secondary-yellow-L a {
  color: #000 !important;
}

.coc-secondary-yellow-D {
  background-color: #F2A900;
  color: #000;
}

.coc-secondary-yellow-D h1,.coc-secondary-yellow-D h2,.coc-secondary-yellow-D h3,.coc-secondary-yellow-D h4,.coc-secondary-yellow-D h5,.coc-secondary-yellow-D h6,.coc-secondary-yellow-D p,.coc-secondary-yellow-D a {
  color: #000 !important;
}

.coc-secondary-green {
  background-color: #4C8C2B;
  color: #000;
}

.coc-secondary-green h1,.coc-secondary-green h2,.coc-secondary-green h3,.coc-secondary-green h4,.coc-secondary-green h5,.coc-secondary-green h6,.coc-secondary-green p,.coc-secondary-green a {
  color: #000 !important;
}

.coc-secondary-green-L {
  background-color: #78BE20;
  color: #000;
}

.coc-secondary-green-L h1,.coc-secondary-green-L h2,.coc-secondary-green-L h3,.coc-secondary-green-L h4,.coc-secondary-green-L h5,.coc-secondary-green-L h6,.coc-secondary-green-L p,.coc-secondary-green-L a {
  color: #000 !important;
}

.coc-secondary-green-D {
  background-color: #44693D;
  color: #fff;
}

.coc-secondary-green-D h1,.coc-secondary-green-D h2,.coc-secondary-green-D h3,.coc-secondary-green-D h4,.coc-secondary-green-D h5,.coc-secondary-green-D h6,.coc-secondary-green-D p,.coc-secondary-green-D a {
  color: #fff !important;
}

.coc-secondary-blue {
  background-color: #0085AD;
  color: #000;
}

.coc-secondary-blue h1,.coc-secondary-blue h2,.coc-secondary-blue h3,.coc-secondary-blue h4,.coc-secondary-blue h5,.coc-secondary-blue h6,.coc-secondary-blue p,.coc-secondary-blue a {
  color: #000 !important;
}

.coc-secondary-blue-L {
  background-color: #00a3e0;
  color: #000;
}

.coc-secondary-blue-L h1,.coc-secondary-blue-L h2,.coc-secondary-blue-L h3,.coc-secondary-blue-L h4,.coc-secondary-blue-L h5,.coc-secondary-blue-L h6,.coc-secondary-blue-L p,.coc-secondary-blue-L a {
  color: #000 !important;
}

.coc-secondary-blue-D {
  background-color: #005670;
  color: #fff;
}

.coc-secondary-blue-D h1,.coc-secondary-blue-D h2,.coc-secondary-blue-D h3,.coc-secondary-blue-D h4,.coc-secondary-blue-D h5,.coc-secondary-blue-D h6,.coc-secondary-blue-D p,.coc-secondary-blue-D a {
  color: #fff !important;
}

.coc-secondary-dark-blue {
  background-color: #003865;
  color: #fff;
}

.coc-secondary-dark-blue h1,.coc-secondary-dark-blue h2,.coc-secondary-dark-blue h3,.coc-secondary-dark-blue h4,.coc-secondary-dark-blue h5,.coc-secondary-dark-blue h6,.coc-secondary-dark-blue p,.coc-secondary-dark-blue a {
  color: #fff !important;
}

.coc-secondary-dark-blue-L {
  background-color: #006298;
  color: #fff;
}

.coc-secondary-dark-blue-L h1,.coc-secondary-dark-blue-L h2,.coc-secondary-dark-blue-L h3,.coc-secondary-dark-blue-L h4,.coc-secondary-dark-blue-L h5,.coc-secondary-dark-blue-L h6,.coc-secondary-dark-blue-L p,.coc-secondary-dark-blue-L a {
  color: #fff !important;
}

.coc-secondary-dark-blue-D {
  background-color: #041E42;
  color: #fff;
}

.coc-secondary-dark-blue-D h1,.coc-secondary-dark-blue-D h2,.coc-secondary-dark-blue-D h3,.coc-secondary-dark-blue-D h4,.coc-secondary-dark-blue-D h5,.coc-secondary-dark-blue-D h6,.coc-secondary-dark-blue-D p,.coc-secondary-dark-blue-D a {
  color: #fff !important;
}

.coc-secondary-purple {
  background-color: #642F6C;
  color: #fff;
}

.coc-secondary-purple h1,.coc-secondary-purple h2,.coc-secondary-purple h3,.coc-secondary-purple h4,.coc-secondary-purple h5,.coc-secondary-purple h6,.coc-secondary-purple p,.coc-secondary-purple a {
  color: #fff !important;
}

.coc-secondary-purple-L {
  background-color: #93328E;
  color: #fff;
}

.coc-secondary-purple-L h1,.coc-secondary-purple-L h2,.coc-secondary-purple-L h3,.coc-secondary-purple-L h4,.coc-secondary-purple-L h5,.coc-secondary-purple-L h6,.coc-secondary-purple-L p,.coc-secondary-purple-L a {
  color: #fff !important;
}

.coc-secondary-purple-D {
  background-color: #3C1053;
  color: #fff;
}

.coc-secondary-purple-D h1,.coc-secondary-purple-D h2,.coc-secondary-purple-D h3,.coc-secondary-purple-D h4,.coc-secondary-purple-D h5,.coc-secondary-purple-D h6,.coc-secondary-purple-D p,.coc-secondary-purple-D a {
  color: #fff !important;
}

.coc-secondary-pink {
  background-color: #AC145A;
  color: #fff;
}

.coc-secondary-pink h1,.coc-secondary-pink h2,.coc-secondary-pink h3,.coc-secondary-pink h4,.coc-secondary-pink h5,.coc-secondary-pink h6,.coc-secondary-pink p,.coc-secondary-pink a {
  color: #fff !important;
}

.coc-secondary-pink-L {
  background-color: #CE0F69;
  color: #fff;
}

.coc-secondary-pink-L h1,.coc-secondary-pink-L h2,.coc-secondary-pink-L h3,.coc-secondary-pink-L h4,.coc-secondary-pink-L h5,.coc-secondary-pink-L h6,.coc-secondary-pink-L p,.coc-secondary-pink-L a {
  color: #fff !important;
}

.coc-secondary-pink-D {
  background-color: #6C1D45;
  color: #fff;
}

.coc-secondary-pink-D h1,.coc-secondary-pink-D h2,.coc-secondary-pink-D h3,.coc-secondary-pink-D h4,.coc-secondary-pink-D h5,.coc-secondary-pink-D h6,.coc-secondary-pink-D p,.coc-secondary-pink-D a {
  color: #fff !important;
}

/*Custom Styles for this website 
Use this stylesheet to override the bootstrap css

Changing Lives Landing Page custom CSS - Use this stylesheet to override the Bootstrap CSS

    Table Of Contents

    1. Base styles
    2. Headings
    3. Typography
    4. Anchors
    5. Navigation
    6. Form Elements
    7. General Classes
    8. Template & Layout
    9. Print
    10. Media Queries 
    
*/
/********ADD 'coc' class on the body tag********/
/*==========  Mobile First Method  ==========*/
@media only screen and (min-width: 200px) {
  .coc-wrapper-header {
    width: 100%;
    height: 67px;
    height: 6.7rem;
    padding: 0 0 0 9px;
    padding: 0 0 0 .9rem;
    margin-left: 0;
    background: #f6f6f6;
    border-bottom: 1px solid #ededee;
  }

  .coc-wrapper-header .coc-logo-link {
    display: block;
    width: 150px;
    width: 15rem;
    height: 71px;
    height: 7.1rem;
    float: left;
  }

  .coc-wrapper-header .coc-logo-link .coc-logo {
    display: block;
  }
}

@media only screen and (min-width: 320px) {
  /*Header*/
  h1.app-title {
    color: #4b4f55;
    display: inline-block;
    margin-left: 30px;
    margin-left: 3rem;
    margin-top: 14px;
    margin-top: 1.4rem;
  }

  /*Footer*/
  #cocis-footer-row.cui {
    width: 100%;
    background-color: #f6f6f6;
    padding: 18px 18px 38px;
    padding: 1.8rem 1.8rem 3.8rem;
    text-align: center;
  }

  #cocis-footer-row.cui .footer-copyright {
    text-align: center;
    margin: 15px auto 0;
    margin: 1.5rem auto 0;
    font-size: 12px;
    font-size: 1.2rem;
    width: 100%;
    max-width: 100%;
  }

  #cocis-footer-row.cui ul {
    margin-left: 0;
    display: block;
  }

  #cocis-footer-row.cui ul li {
    list-style-type: none;
    display: inline-block;
    margin: 0 10px;
    margin: 0 1rem;
  }
}

@media only screen and (min-width: 768px) {
  .coc-wrapper-header {
    margin-left: 0;
    padding-left: 18px;
    padding-left: 1.8rem;
  }

  h1.app-title {
    margin-top: 2px;
    margin-top: .2rem;
  }
}

/* Medium Devices, Desktops */
@media only screen and (min-width: 992px) {
  .coc-wrapper-header {
    height: 90px;
    height: 9rem;
    margin-left: 0;
    padding-left: 18px;
    padding-left: 1.8rem;
  }

  .coc-wrapper-header .coc-logo-link {
    width: 217px;
    width: 21.7rem;
    height: 103px;
    height: 10.3rem;
  }

  h1.app-title {
    margin-top: 12px;
    margin-top: 1.2rem;
  }

  #cocis-footer-row.cui {
    padding: 36px;
    padding: 3.6rem;
  }

  #cocis-footer-row.cui p {
    max-width: 100%;
    width: 100%;
  }

  #cocis-footer-row.cui ul li {
    display: inline-block;
    margin: 0 10px;
    margin: 0 1rem;
  }
}

/* Large Devices, Wide Screens */
@media only screen and (min-width: 1200px) {
  .coc-wrapper-header {
    margin-left: 0;
    padding-left: 36px;
    padding-left: 3.6rem;
  }

  main {
    margin: 0 36px;
    margin: 0 3.6rem;
  }
}