/* CSS Document */

.typography pre {
  font-family: "Courier New", Courier;
  display: block;
  font-size: 0.6em;
  margin: 2em 5em;
  padding: 0.5em;
  border: 1px #ccc solid;
  background: #eee;
  ;
}

.typography table {
  margin: 0 0 18px 0;
  color: #666;
  border-collapse: collapse;
}

.typography tr {}

.typography td {
  border: 0px solid #999;
  padding: 5px;
}









.typography {
  font-size: 16px;
  line-height: 24px;
}

.typography * {
  color: #444;
}



/** CMS LIST STYLES **/

.typography ul, .typography ol {
  margin-bottom: 15px;
}
.typography ul ul, .typography ol ol {
  margin-bottom: 0px;
}


/* HEADER STYLES */

/* Big and ugly to preserve styles when applying bold and/or italics to headers in the SilverStripe editor */

.typography h1,
.typography h1 strong,
.typography h1 em,

.typography h2,
.typography h2 strong,
.typography h2 em,

.typography h3,
.typography h3 strong,
.typography h3 em,

.typography h4,
.typography h4 strong,
.typography h4 em,

.typography h5,
.typography h5 strong,
.typography h5 em,

.typography h6,
.typography h6 strong,
.typography h6 em {
  margin: 0 0 12px 0;
  padding: 0;
  font-weight: bold;
  color: #353231;
}



.typography h1,
.typography h1 strong,
.typography h1 em {
  font-size: 36px;
  line-height: 1.15em;
}

.typography h2,
.typography h2 strong,
.typography h2 em {
  font-size: 30px;
  line-height: 1.15em;
}

.typography h3,
.typography h3 strong,
.typography h3 em {
  font-size: 20px;
  line-height: 1.15em;
}

.typography h4,
.typography h4 strong,
.typography h4 em {
  font-size: 18px;
  line-height: 1.15em;
}

.typography h5,
.typography h5 strong,
.typography h5 em {
  font-size: 16px;
  line-height: 1.15em;
}

.typography h6,
.typography h6 strong,
.typography h6 em {
  font-size: 13px;
  line-height: 1.15em;
}



.typography blockquote {
  background: #f2efed;
  border: 1px #757c5d solid;
  padding: 10px;
}



/* LINK STYLES */

.typography a,

.typography a * {
  color: #0a65a2 !important;
  text-decoration: none;
}

.typography a:hover {
  color: #0a65a2 !important;
  text-decoration: underline;
}



.typography .blue,

.typography .blue * {
  color: #024383 !important;
}


.typography a.button,
a.button {
  padding: 5px 20px;
  background: #003f69;
  color: #FFF !important;
  text-decoration: none;
  border-radius: 4px;
  display: inline-block;
}

.typography a.button:hover,
a.button:hover {
  color: #FFF !important;
  background: #012C49;
}

a.button-back {
  background: #999;
}



.typography table {}

.typography table tr td {}



.typography strong {
  font-weight: bold !important;
}

.typography em {
  font-style: italic !important;
}



/* WYSIWYG EDITOR ALIGNMENT CLASSES */

.typography .left, .typography .text-left, .text-left {
  text-align: left;
}

.typography .center, .typography .text-center, .text-center {
  text-align: center;
}

.typography .right, .typography .text-right, .text-right {
  text-align: right;
}



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

.typography img.right {
  float: right;
  margin: 0 0 5px 15px;
}

.typography img.left {
  float: left;
  margin: 0 15px 5px 0;
}

.typography img.center {
  display: block;
  margin: 0 auto 5px;
}



.typography .captionImage {
  max-width: 100%;
}

.typography .captionImage img {
  padding: 0;
  max-width: 100%;
  height: auto !important;
}

.typography .captionImage p {
  margin: 0;
  font: bold 10px/14px Arial, sans-serif;
}

.typography .captionImage.left {
  float: left;
  margin: 0 10px 5px 0;
  padding: 5px;
  background: #e8e8e8;
  text-align: center;
}

.typography .captionImage.right {
  float: right;
  margin: 0 0 5px 10px;
  padding: 5px;
  background: #e8e8e8;
  text-align: center;
}

.typography .captionImage.center {
  display: block;
  margin: 0 auto 5px;
}



.typography .superscript {
  vertical-align: baseline;
  font-size: 0.8em !important;
  position: relative;
  top: -0.4em;
}

.typography .subscript {
  vertical-align: baseline;
  font-size: 0.8em !important;
  position: relative;
  bottom: -0.4em;
}



.typography iframe {
  max-width: 100%;
}



.right form .field label {

  color: #555 !important;
  font: bold 14px/19px Arial, sans-serif !important;

}



.right form .field .sort-control label {
  font-weight: normal !important;
  font-size: 11px !important;
}



@media (max-width:500px) {

  .typography img {
    display: block;
    float: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .typography blockquote {
    margin-left: 10px;
    margin-right: 10px;
  }

}

.hover-underline-animation {
  display: inline-block;
  position: relative;
  color: #0087ca;
}

.hover-underline-animation::after {
  content: '';
  position: absolute;
  width: 100%;
  transform: scaleX(0);
  height: 2px;
  bottom: 0;
  left: 0;
  /* background-color: #0087ca;*/
  background-color: #F8B016;
  transform-origin: bottom right;
  transition: transform 0.25s ease-out;
}

.hover-underline-animation:hover::after {
  transform: scaleX(1);
  transform-origin: bottom left;
}