@charset "UTF-8";
.sg-index-list {
  margin: 0;
  list-style: none;
  padding: 0;
}

.sg-content-wrapper:after, .sg-example:after, .sg-content-columns:after {
  display: table;
  clear: both;
  content: " ";
}

::-moz-selection {
  background-color: rgba(30, 100, 200, 0.3);
}

::selection {
  background-color: rgba(30, 100, 200, 0.3);
}

.sg-color-gradient ::-moz-selection {
  background-color: rgba(255, 255, 255, 0.3);
}

.sg-color-gradient ::selection {
  background-color: rgba(255, 255, 255, 0.3);
}

@font-face {
  font-family: "style-guide";
  font-style: normal;
  font-weight: normal;
  src: url("../../fonts/style-guide/style-guide.eot?#iefix") format("embedded-opentype"), url("../../fonts/style-guide/style-guide.woff") format("woff"), url("../../fonts/style-guide/style-guide.ttf") format("truetype"), url("../../fonts/style-guide/style-guide.svg#style-guide") format("svg");
}

.sg-page-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 11;
  height: 100px;
  background-color: #FFFFFF;
  padding: 10px 20px;
  white-space: nowrap;
  line-height: 60px;
  transition: top 0.5s ease;
}

.sg-page-header .sg-logo {
  display: inline-block;
  vertical-align: middle;
  margin: 0 0 0 10px;
  width: 50px;
  line-height: 1;
  border: none;
}

.sg-page-header .sg-logo img {
  max-width: 100%;
  height: 44px;
}

.sg-page-header .sg-page-title {
  display: inline-block;
  margin-left: 5px;
  vertical-align: middle;
  max-width: 50%;
  font-size: 1.7em;
}

.sg-page-header .sg-page-title a {
  text-decoration: none;
  border: 0;
}

.sg-page-header .sg-login {
  position: absolute;
  right: 20px;
  bottom: 8px;
}

.sg-page-header .sg-language-switch {
  position: absolute;
  right: 20px;
  top: 10px;
  height: 40px;
}

.sg-page-header .sg-language-switch a {
  text-decoration: none;
  border: 0;
}

.sg-page-header .sg-language-switch .selected {
  text-decoration: underline;
}

.sg-page-header .sg-header-navigation a {
  text-decoration: none;
  border: 0;
}

.sg-page-header .sg-header-navigation {
  float: left;
  margin: 0;
}

.sg-page-header .sg-header-navigation a {
  display: inline-block;
  border-right: 1px solid #C8C8C2;
  height: 50px;
  padding-right: 10px;
  vertical-align: middle;
  text-decoration: none;
}

.sg-page-header .sg-menu-toggle {
  position: relative;
  text-align: center;
  line-height: 70px;
  text-transform: uppercase;
  font-size: 0.9em;
  color: #444444;
}

.sg-page-header .sg-menu-toggle:hover {
  color: #1E64C8;
}

.sg-page-header .sg-menu-toggle:before {
  position: absolute;
  top: -0.7em;
  left: 0;
  right: 10px;
  font-family: 'FontAwesome';
  content: '\f0c9';
  display: block;
  font-size: 2em;
}

.sg-page-header .sg-header-toggles {
  position: absolute;
  top: 80px;
  left: 0;
  right: 0;
  margin: 0;
  box-shadow: 0 3px 2px -2px rgba(0, 0, 0, 0.25);
  min-height: 40px;
  border-top: 1px solid #C8C8C2;
  background-color: #F0F0EC;
  padding-left: 20px;
  padding-right: 20px;
  line-height: 40px;
  font-size: 0.8em;
  transition: opacity 0.5s ease, top 0.5s ease;
}

.sg-page-header .sg-header-toggles a {
  border: 0;
}

.sg-page-header .breakpoint-indicator {
  float: right;
}

.sg-page-header .breakpoint-indicator:before {
  padding-right: 0.5em;
  vertical-align: middle;
  font-family: 'style-guide';
  font-size: 1.5em;
  content: "";
}

.sg-page-header .breakpoint-indicator:after {
  vertical-align: middle;
  content: 'Handheld';
}

@media only screen and (max-width: 320px) {
  .sg-page-header .breakpoint-indicator:before {
    content: "";
  }
  .sg-page-header .breakpoint-indicator:after {
    content: 'Handheld portrait';
  }
}

@media only screen and (min-width: 321px) {
  .sg-page-header .breakpoint-indicator:before {
    content: "";
  }
  .sg-page-header .breakpoint-indicator:after {
    content: 'Handheld landscape';
  }
}

@media only screen and (min-width: 661px) {
  .sg-page-header .breakpoint-indicator:before {
    content: "";
  }
  .sg-page-header .breakpoint-indicator:after {
    content: 'Tablet portrait';
  }
}

@media only screen and (min-width: 1001px) {
  .sg-page-header .breakpoint-indicator:before {
    content: "";
  }
  .sg-page-header .breakpoint-indicator:after {
    content: 'Tablet landscape';
  }
}

@media only screen and (min-width: 1151px) {
  .sg-page-header .breakpoint-indicator:before {
    content: "";
  }
  .sg-page-header .breakpoint-indicator:after {
    content: 'Desktop';
  }
}

.sg-page-header.is-hidden {
  top: -165px;
}

.sg-show-menu .sg-page-header.is-hidden {
  top: 0;
}

.sg-page-header.is-hidden .sg-breakpoint {
  opacity: 0;
}

.sg-page-header.is-hidden .sg-breakpoint.is-visible {
  top: 100px;
  opacity: 1;
}

.sg-page-header .sg-header-toggle {
  float: left;
  margin-right: 30px;
  line-height: 40px;
  text-decoration: none;
  color: inherit;
}

.sg-page-header .sg-header-toggle.is-toggled {
  color: #1E64C8;
}

.sg-page-header .sg-header-toggle:before {
  position: relative;
  display: inline-block;
  top: -0.1em;
  vertical-align: middle;
  margin-right: 0.5em;
  font-family: 'style-guide';
  font-size: 1.3em;
  content: '';
}

.sg-page-header .sg-header-toggle.sg-grid-toggle:before {
  content: "";
}

.sg-page-header .sg-header-toggle.sg-editable-toggle {
  color: #1E64C8;
}

.sg-page-header .sg-header-toggle.sg-editable-toggle:before {
  width: 15px;
  height: 15px;
  outline: 1px dashed #1E64C8;
  outline-offset: -1px;
}

.sg-page-header .sg-header-toggle.sg-editable-toggle.is-toggled {
  color: inherit;
}

.sg-page-header .sg-header-toggle.sg-editable-toggle.is-toggled:before {
  outline-color: #444;
}

@media screen and (max-width: 320px) {
  .sg-page-header .sg-header-toggle.sg-editable-toggle {
    display: none;
  }
}

@media only screen and (min-width: 321px) {
  .sg-page-header .sg-page-title {
    max-width: 66%;
  }
}

@media only screen and (min-width: 661px) {
  .sg-page-header .sg-logo {
    width: 60px;
  }
  .sg-page-header .sg-page-title {
    margin-left: 15px;
    font-size: 2.5em;
  }
  .sg-page-header .sg-logo {
    margin-left: 20px;
  }
  .sg-page-header .sg-header-navigation a {
    padding-right: 15px;
  }
  .sg-page-header .sg-menu-toggle:before {
    right: 15px;
  }
}

body {
  overflow-x: hidden;
  margin-top: 120px;
  background-color: #FFFFFF;
}

.off-screen {
  position: absolute;
  left: -9999px;
}

.sg-main-menu {
  position: fixed;
  top: 123px;
  left: 0;
  width: 250px;
  overflow: auto;
  padding-bottom: 20px;
}

.sg-main-menu a {
  border: 0;
  width: 100%;
}

.sg-main-menu-section .sg-menu-section-links {
  display: none;
}

.sg-main-menu-section .sg-menu-section-links.visible {
  display: block;
}

.sg-content-wrapper {
  position: relative;
  transition: transform 0.3s ease;
  min-height: 80vh;
  background-color: #FFFFFF;
  padding: 20px 20px 100px;
}

.sg-content-container {
  clear: both;
  margin: 0 auto;
}

@media only screen and (min-width: 661px) {
  .sg-content-container {
    width: 640px;
  }
}

@media only screen and (min-width: 1001px) {
  .sg-content-container {
    width: 1024px;
  }
}

.sg-templates-container .sg-template-link {
  margin-top: -25px;
  margin-bottom: 40px;
}

.sg-show-menu {
  background-color: #F5F5F0;
}

.sg-show-menu .sg-content-wrapper {
  -webkit-transform: translate(250px);
  -moz-transform: translate(250px);
  -ms-transform: translate(250px);
  -o-transform: translate(250px);
  transform: translate(250px);
  box-shadow: 4px 6px 10px 4px rgba(0, 0, 0, 0.25);
}

.no-csstransforms .sg-show-menu .sg-content-wrapper {
  left: 200px;
}

.sg-scroll-to-top {
  position: fixed;
  right: 20px;
  bottom: -50px;
  -webkit-transition: bottom 0.2s ease;
  -moz-transition: bottom 0.2s ease;
  transition: bottom 0.2s ease;
}

.sg-scroll-to-top:after {
  position: relative;
  top: 3px;
  display: inline-block;
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  transform: rotate(-90deg);
  vertical-align: bottom;
  padding-left: 10px;
  line-height: 1;
  font-size: 1.2em;
  content: '\00BB';
}

.sg-scroll-to-top.sg-is-visible {
  bottom: 20px;
}

.sg-text-container figcaption {
  font-size: 12px;
}

.sg-main-menu ul {
  margin: 0;
  list-style: none;
  padding: 0;
}

.sg-main-menu li {
  margin: 0 25px;
  border-bottom: 1px solid #CDCDCD;
  overflow: hidden;
  padding: 12px 0;
}

.sg-main-menu .sg-index-link a {
  padding-left: 18px;
}

.sg-main-menu .sg-is-active a {
  color: #1E64C8;
}

.sg-main-menu .sg-item-index {
  float: left;
  display: inline-block;
  width: 10%;
}

.sg-main-menu .sg-item-text {
  float: left;
  display: inline-block;
  width: 90%;
}

.sg-main-menu .sg-main-menu-button {
  margin-bottom: 5px;
  text-align: left;
}

.sg-text-container {
  font-family: Arial, sans-serif;
  font-size: 15px;
}

.sg-text-container, .sg-text-width {
  max-width: 700px;
}

.sg-text-container h1, .sg-heading.sg-h1 {
  font-size: 1.42857em;
}

.sg-text-container h2, .sg-heading.sg-h2 {
  font-size: 1.14286em;
}

.sg-text-container h3, .sg-heading.sg-h3 {
  margin-top: 30px;
  font-size: 1em;
}

.sg-text-container h4, .sg-heading.sg-h4 {
  text-transform: none;
  font-size: 1em;
}

.sg-index-links {
  font-family: Arial, sans-serif;
  font-size: 15px;
  display: block;
  clear: both;
  margin-bottom: 2em;
  overflow: hidden;
  border-style: solid;
  border-width: 1px 0;
  border-color: #D2D2CC;
  padding: 2em 0;
  line-height: 1.9;
}

.sg-index-list {
  float: left;
  margin-right: 70px;
}

.sg-index-list .sg-chapter {
  display: inline-block;
  min-width: 2.5em;
  color: #1E64C8;
}

.sg-index-list a {
  text-decoration: none;
  color: #1E64C8;
  border: 0;
}

.sg-index-list a:after {
  display: inline-block;
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  transform: rotate(90deg);
  vertical-align: top;
  padding-left: 10px;
  line-height: 1;
  font-size: 1.2em;
  content: '\00BB';
}

.sg-index-list a:hover {
  text-decoration: underline;
}

.sg-index-list li:before {
  display: none;
}

.sg-header-image {
  padding-right: 20px;
}

.sg-header-image img {
  max-width: 100%;
}

.sg-section-block {
  box-sizing: border-box;
  margin-bottom: 2em;
  padding-right: 20px;
}

.sg-section-block h2 {
  margin-top: 0;
}

.sg-section-block h2 a {
  text-decoration: none;
  color: inherit;
}

.sg-section-block h2 a:after {
  content: '\00a0\203a';
}

.sg-section-block .block {
  min-height: 150px;
  font-size: 1em;
}

.sg-section-block .block p {
  margin: 0;
}

.sg-section-block p {
  margin: 0 0 14px;
}

.sg-section-block ul {
  padding: 0;
  list-style: none;
}

.sg-section-block ul li:before {
  padding-right: 5px;
  content: '\203a';
}

@media only screen and (min-width: 661px) {
  .sg-section-block {
    float: left;
    width: 50%;
  }
}

@media only screen and (min-width: 661px) and (max-width: 1000px) {
  .sg-section-block.sg-odd {
    clear: left;
  }
}

@media only screen and (min-width: 1001px) and (max-width: 1150px) {
  .sg-section-block {
    width: 33.33333%;
  }
  .sg-section-block.sg-fourth {
    clear: left;
  }
}

@media only screen and (min-width: 1151px) {
  .sg-section-block {
    width: 25%;
  }
  .sg-section-block.sg-fifth {
    clear: left;
  }
}

a.sg-anchor, a.sg-anchor:hover {
  text-decoration: inherit;
  color: inherit;
}

a.sg-anchor:hover:after {
  padding-left: 5px;
  color: #868681;
  content: '\00B6';
}

.sg-figure.is-centered {
  margin: 0 auto;
}

.sg-figure img {
  max-width: 100%;
}

.sg-figure figcaption {
  margin: 0 0 1em;
  padding: 0;
  font-style: italic;
}

.sg-figure-row .sg-figure {
  display: inline-block;
  vertical-align: bottom;
  width: 100%;
}

@media only screen and (min-width: 661px) {
  .sg-figure-row .sg-figure {
    width: 49%;
    text-align: center;
  }
}

@media only screen and (min-width: 1001px) {
  .sg-figure-row .sg-figure {
    width: 33%;
  }
  .sg-figure-row .sg-figure:last-child {
    width: 100%;
  }
}

@media only screen and (min-width: 1151px) {
  .sg-figure-row .sg-figure, .sg-figure-row .sg-figure:last-child {
    width: 24%;
  }
}

.sg-figure-row.sg-is-top-aligned .sg-figure {
  vertical-align: top;
}

.sg-proposition-text blockquote, .sg-proposition-text h3 {
  color: #1E64C8;
}

.sg-proposition-text h2 {
  margin-top: 2em;
  margin-bottom: 1em;
}

.sg-proposition-text.sg-text-container h3 {
  margin: 0;
  text-transform: none;
  font-size: 18px;
  font-weight: normal;
}

.sg-content-row {
  clear: both;
  margin: 1em 0 30px;
}

.sg-example {
  position: relative;
  display: inline-block;
  margin-bottom: 1em;
  border: 1px solid #AAA;
  padding: 45px 15px 15px;
}

.sg-example:before {
  position: absolute;
  top: 15px;
  left: 15px;
  text-transform: uppercase;
  font-size: 11px;
  color: #959595;
  content: 'Voorbeeld';
}

.sg-example.sg-min-mobile-width {
  min-width: 320px;
}

.sg-example.sg-is-full-width {
  display: block;
  margin-bottom: 2em;
  border-width: 1px 0;
  padding-top: 0;
  padding-left: 0;
  padding-right: 0;
}

.sg-example.sg-is-full-width:before {
  display: block;
  position: static;
  clear: both;
  margin: 0 auto;
  max-width: 1120px;
  height: 45px;
  line-height: 45px;
}

.sg-content-column .sg-example {
  display: block;
}

@media only screen and (min-width: 661px) {
  .sg-content-column {
    float: left;
    box-sizing: border-box;
    padding-right: 20px;
    width: 50%;
  }
  .sg-content-column.sg-column-25 {
    width: 25%;
  }
  .sg-content-column.sg-column-75 {
    width: 75%;
  }
  .sg-content-column.sg-column-one-third:nth-of-type(2n+1) {
    clear: left;
  }
}

@media only screen and (min-width: 1001px) {
  .sg-content-column.sg-column-one-third {
    width: 33.33333%;
  }
  .sg-content-column.sg-column-one-third:nth-of-type(2n+1) {
    clear: none;
  }
  .sg-content-column.sg-column-two-third {
    width: 66.66667%;
  }
}

.sg-grid-column {
  position: relative;
  display: block;
  min-height: 200px;
  text-align: center;
}

.sg-grid-column, .sg-grid-column:before {
  border-top: 20px solid #393939;
}

.sg-grid-column:after {
  display: block;
  clear: both;
  content: "60px";
}

.sg-grid-column:before {
  position: absolute;
  top: 60px;
  right: 100%;
  width: 20px;
  line-height: 1;
  content: "20 px";
}

.sg-grid-column:first-child:before {
  display: none;
}

.sg-color-swatch {
  position: relative;
  float: left;
  clear: left;
  margin-bottom: 1em;
  width: 80px;
  height: 80px;
  padding: 10px;
  font-size: 0.85714em;
}

.sg-color-swatch .sg-color-gradient-end {
  position: absolute;
  bottom: 10px;
  right: 10px;
}

.sg-color-secondary {
  background-color: #FFD200;
  color: #fff;
}

.sg-color-primary {
  background-color: #1E64C8;
  color: #fff;
}

.sg-color-tertiary {
  background-color: #e9f0fa;
  color: #202020;
}

.sg-color-text {
  background-color: #202020;
  color: #fff;
}

.sg-color-dark-text {
  background-color: #646464;
  color: #fff;
}

.sg-color-border {
  background-color: #CCCCCC;
  color: #202020;
}

.sg-color-border-light {
  background-color: #DDDDDD;
  color: #202020;
}

.sg-color-brand-warning {
  background-color: #fffae5;
  color: #202020;
}

.sg-color-brand-disabled {
  background-color: #B4B4B4;
  color: #202020;
}

.sg-color-brand-faculty1 {
  background-color: #F1A42B;
  color: #fff;
}

.sg-color-brand-faculty2 {
  background-color: #DC4E28;
  color: #fff;
}

.sg-color-brand-faculty3 {
  background-color: #2D8CA8;
  color: #fff;
}

.sg-color-brand-faculty4 {
  background-color: #E85E71;
  color: #fff;
}

.sg-color-brand-faculty5 {
  background-color: #8BBEE8;
  color: #fff;
}

.sg-color-brand-faculty6 {
  background-color: #AEB050;
  color: #fff;
}

.sg-color-brand-faculty7 {
  background-color: #825491;
  color: #fff;
}

.sg-color-brand-faculty8 {
  background-color: #FB7E3A;
  color: #fff;
}

.sg-color-brand-faculty9 {
  background-color: #27ABAD;
  color: #fff;
}

.sg-color-brand-faculty10 {
  background-color: #BE5190;
  color: #fff;
}

.sg-color-brand-faculty11 {
  background-color: #71A860;
  color: #fff;
}

.sg-color-gradient {
  background-color: #1E64C8;
  background-image: -webkit-linear-gradient(top left, #E45123, #FCBA1A);
  background-image: linear-gradient(to bottom right , #E45123, #FCBA1A);
  color: #FFFFFF;
}

.sg-color-promo {
  background-color: #D52B1E;
  color: #FFFFFF;
}

.sg-color-swatch-text {
  margin-left: 120px;
  height: 100px;
}

.sg-color-swatch-text h2, .sg-color-swatch-text h3 {
  margin-top: 0;
}

.sg-editable {
  font-family: Arial, sans-serif;
  font-size: 15px;
}

@media only screen {
  .sg-portrait-hidden {
    display: none;
  }
}

@media only screen and (min-width: 1001px) {
  .sg-portrait-hidden {
    display: block;
  }
  .sg-landscape-hidden,
  .sg-portrait-down {
    display: none;
  }
}

@media only screen and (min-width: 1151px) {
  .sg-portrait-hidden, .sg-landscape-hidden {
    display: block;
  }
}

.editable {
  outline: 1px dotted gray;
}

.hide-editable-borders .editable {
  outline-color: transparent;
}

.editable.cke_focus {
  outline-color: darkgray;
}

.editable.is-changed {
  outline-color: orangered;
}

.sg-notification {
  position: fixed;
  top: 1em;
  left: 50%;
  z-index: 12;
  margin-left: -16.5%;
  width: 33%;
  opacity: 0;
  transition: opacity 0.5s ease;
  border-radius: 3px;
  padding: 10px;
  text-align: center;
}

.sg-notification.sg-visible {
  opacity: 1;
}

.sg-notification.sg-success {
  border-color: #d6e9c6;
  background-color: #dff0d8;
  color: #3c763d;
}

.sg-notification.sg-info {
  border-color: #bce8f1;
  background-color: #d9edf7;
  color: #31708f;
}

.sg-notification.sg-warning {
  border-color: #faebcc;
  background-color: #fcf8e3;
  color: #8a6d3b;
}

.sg-notification.sg-error {
  border-color: #ebccd1;
  background-color: #f2dede;
  color: #a94442;
}

.sg-inspections {
  position: absolute;
  right: 0;
  bottom: 0;
  border-style: solid;
  border-color: #DDD;
  border-width: 1px 0 0 1px;
  border-radius: 4px 0 0 0;
  padding: 3px 0 0 5px;
  font-size: 0.9em;
  white-space: nowrap;
}

.sg-inspections .sg-inspection {
  padding-right: 15px;
}

.sg-inspections .sg-inspection:before {
  position: relative;
  padding-right: 3px;
  vertical-align: middle;
  font-family: 'style-guide', sans-serif;
  font-size: 1.1em;
}

.sg-inspections .sg-color {
  display: inline-block;
  margin-left: 5px;
  width: 10px;
  height: 10px;
}

.sg-inspections .sg-type-font-family:before {
  top: -2px;
  font-size: 0.9em;
  content: "";
}

.sg-inspections .sg-type-font-size:before {
  content: "";
}

.sg-inspections .sg-type-font-style:before {
  content: "";
}

.sg-inspections .sg-type-line-height:before {
  content: "";
}

.sg-inspections .sg-type-font-weight:before {
  content: "";
}

.sg-inspections .sg-type-color:before {
  content: "";
}

.sg-inspections .sg-type-background-color:before {
  content: "";
}

.sg-inspections .sg-type-text-decoration:before {
  content: "";
}

.image-left {
  padding: 20px 0 20px 0;
  display: block !important;
}

@media only screen and (max-width: 1000px) {
  .image-left {
    max-width: 100%;
    height: auto !important;
  }
}

@media only screen and (min-width: 1001px) {
  .image-left {
    float: left;
    padding: 0 20px 20px 0;
  }
}

.image-right {
  padding: 20px 0 20px 0;
  display: block !important;
}

@media only screen and (max-width: 1000px) {
  .image-right {
    max-width: 100%;
    height: auto !important;
  }
}

@media only screen and (min-width: 1001px) {
  .image-right {
    float: right;
    padding: 0 0 20px 20px;
  }
}

.image-center {
  text-align: center;
}

.no-edit .sg-content-row img {
  cursor: pointer;
}

.sg-content-row img {
  height: 100%;
}

.sg-colors {
  list-style-type: none;
  padding: 0;
  margin: 0;
  max-width: 900px;
}

.sg-colors .sg-colors-block {
  padding: 0;
  margin: 0;
  float: left;
  margin-right: 20px;
  margin-bottom: 20px;
  border: 1px solid black;
}

.sg-colors .sg-colors-block:last-child {
  margin-right: 0;
}

.sg-colors .sg-colors-block:after, .sg-colors .sg-colors-block:before {
  display: none;
}

.sg-colors-swatch {
  position: relative;
  height: 220px;
  width: 220px;
  border-bottom: 1px solid black;
}

.sg-colors-info {
  list-style-type: none;
  padding: 0;
  margin: 0;
  min-height: 190px;
}

.sg-colors-info .sg-colors-info-row {
  padding: 0;
  margin: 0;
  margin-left: 10px;
  margin-right: 10px;
  margin-top: 5px;
}

.sg-colors-info .sg-colors-info-row:last-child {
  margin-bottom: 5px;
}

.sg-colors-info .sg-colors-info-row:after, .sg-colors-info .sg-colors-info-row:before {
  display: none;
}

.sg-colors-info-row-label {
  font-family: "PannoTextSemiBold", Arial, sans-serif;
  font-size: 20px;
}

.sg-colors-info-row-value {
  float: right;
}

.sg-colors-title {
  color: white;
  padding: 20px;
  display: block;
  font-size: 23px;
  font-family: "PannoTextMedium", Arial, sans-serif;
}

.sg-colors-title-light {
  display: block;
  font-family: "PannoTextLight", Arial, sans-serif;
}

.sg-colors-subtitle {
  color: white;
  position: absolute;
  padding: 20px;
  bottom: 0;
  font-family: "PannoTextLight", Arial, sans-serif;
  font-size: 18px;
}

.sg-colors-ral {
  font-size: 15px;
  font-family: "PannoTextLight", Arial, sans-serif;
}