#sg-patterns {
    -webkit-box-sizing: border-box !important;
    box-sizing: border-box !important;
    max-width: 100%;
    padding: 0 0.5em;
}

.demo-animate {
    background: #ddd;
    padding: 1em;
    margin-bottom: 1em;
    text-align: center;
    border-radius: 8px;
    cursor: pointer;
}

.sg-colors {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
.sg-colors li {
    -webkit-box-flex: 1;
    -ms-flex: auto;
    flex: auto;
    padding: 0.3em;
    margin: 0 0.5em 0.5em 0;
    min-width: 5em;
    max-width: 14em;
    border: 1px solid #ddd;
    border-radius: 8px;
    height: auto !important;
    min-height: 12.0em;
}

.sg-swatch {
    display: block;
    height: 4em;
    margin-bottom: 0.3em;
    border-radius: 5px;
}

.sg-label {
    font-size: 90%;
    line-height: 1;
}

.sg-tabs-panel {min-height: 20em !important;}
.sg-pattern-example figure,
.sg-pattern-example .carousel:not(.carousel--stage):not(.carousel--quadruple),
.sg-pattern-example .accordion,
.sg-pattern-example .utilitybox,
.sg-pattern-example .infoblock,
.sg-pattern-example .icondisplay,
.sg-pattern-example .tabcarousel,
.sg-pattern-example .collapsible,
.sg-pattern-example .jobsearch {max-width: 600px;}
.sg-pattern-example .tabs {max-width: 800px;}
.sg-pattern-example .blockquote-wrapper,
.sg-pattern-example .table-wrapper,
.sg-pattern-example .card-wrapper {max-width: 820px;}
.sg-pattern-example .card-wrapper .card {width: 100%;}
.sg-pattern-example .area-display .container {min-height: 300px;}
.sg-pattern-example footer, .sg-pattern-example header {max-width: 1400px; position: relative;}
.sg-pattern-example header .header__nav-main > ul {list-style: outside none none; padding: 0; max-width: 1000px;}
.sg-pattern-example header .header__nav-main > ul > li + li {margin-top: 0;}
.sg-pattern-example .cv__entry,
.sg-pattern-example .locations .tabcarousel {max-width: 1000px;}
.sg-pattern-example .locations {margin-left: 0 !important;}
.sg-pattern-example .cv__head {max-width: 1000px; margin-top: 0;}
.sg-pattern-example .card  {width: 240px;}
.sg-pattern-example .key-figure {width: 320px;}
.sg-pattern-example .locations__entry {max-width: 600px;}
.sg-pattern-example .footer__share {max-width: 600px; padding: 2em; background: #122833;}

.sg-pattern-example .area-display .carousel.carousel--stage .container {min-height: 1px;}
.sg-pattern-example .area-display .carousel.carousel--stage .stage {max-width: 10000px;;}
.sg-pattern-example .iconlink,
.sg-pattern-example .btn {margin-bottom: 0.75em;}
.sg-pattern-example .stage, .sg-pattern-example .carousel--quadruple {max-width: 1500px;}
.sg-pattern-example .carousel--quadruple.slick-dotted.slick-slider {margin-bottom: 80px}
.sg-pattern-example .stage__overlay .h1 {margin-bottom: 0;}
.sg-pattern-example .carousel.carousel--triple.carousel--contentgallery {max-width: 900px; margin-left: 60px;}
.sg-pattern-example .tabcarousel { margin-left: 40px;}

.sg-pattern-example ol {margin: 0; padding: 0rem 0 0.375rem 1.375rem;}
.sg-pattern-example ol li + li {margin-top: 1.75em;}
.sg-pattern-example ul:not(.sg-colors):not(.list):not(.clean):not(.slick-dots) {list-style: square; margin: 0; padding: 0rem 0 0.375rem 1.375rem; max-width: 800px;}
.sg-pattern-example ul:not(.sg-colors) li + li {margin-top: 1.0em;}

.sg-pattern-category-title {text-transform: none !important;}

.sg-pattern-example h1 {font-size: 1.5rem;}
.sg-pattern-example h2 {font-size: 1.375rem;}
.sg-pattern-example h3 {font-size: 1.25rem;}
.sg-pattern-example h4 {font-size: 1.125rem;}
.sg-pattern-example h5 {font-size: 1.0625rem;}
.sg-pattern-example h6,
.sg-pattern-example h3.h6 {font-size: 0.875rem;}

@media (min-width: 768px)
{
    .sg-pattern-example .stage__overlay {top: auto; bottom: 0; height: auto; background-color: rgba(26,48,64,0.6);}
    .sg-pattern-example .stage__overlay .h3.light {margin: 0.75em 0 0.1875em 0;}
    .sg-pattern-example .stage__overlay .h1 {margin-bottom: 0.5em;}
    .sg-pattern-example h1 {font-size: 2.0rem;}
    .sg-pattern-example h2 {font-size: 1.625rem;}
    .sg-pattern-example h3 {font-size: 1.3125rem;}
    .sg-pattern-example h5 {font-size: 1.25rem;}
    .sg-pattern-example h6,
    .sg-pattern-example h3.h6 {font-size: 0.9375rem;}
}
@media (min-width: 1000px)
{
    .sg-pattern-example h1 {font-size: 2.5rem;}
}
@media (min-width: 1280px)
{
    .sg-pattern-example h1 {font-size: 3.0rem;}
    .sg-pattern-example h2 {font-size: 2.0rem;}
    .sg-pattern-example h3 {font-size: 1.625rem;}
    .sg-pattern-example h4 {font-size: 1.5rem;}
    .sg-pattern-example h5 {font-size: 1.3125rem;}
    .sg-pattern-example h6,
    .sg-pattern-example h3.h6 {font-size: 1.0rem;}
}
@media (min-width: 1520px)
{
    .sg-pattern-example h1 {font-size: 3.375rem;}
    .sg-pattern-example h2 {font-size: 2.25rem;}
    .sg-pattern-example h3 {font-size: 1.6875rem;}
    .sg-pattern-example h4 {font-size: 1.5rem;}
    .sg-pattern-example h5 {font-size: 1.3125rem;}
    .sg-pattern-example h6,
    .sg-pattern-example h3.h6 {font-size: 1.125rem;}
}