.storyteller {
font-size: 10px;
} .storyteller .hide-lt-768 {
display: none;
} .storyteller .hide-mobile {
display: none;
} .storyteller .story-section {
position: relative;
overflow: hidden;
} .storyteller .story-section .section-background {
max-width: 100%;
} .storyteller .story-section .story-element {
position: absolute;
top: 150px;
left: 50%;
margin-left: -35%;
max-width: 70%;
line-height: 1.2;
color: white;
} .storyteller .story-section .story-element .roof-line,
.storyteller .story-section .story-element h2 {
text-transform: uppercase;
font-size: 11px;
} .storyteller .story-section .story-element h2 {
color: white;
font-size: 14px;
margin: 0;
} .storyteller .story-section .story-element .roof-line {
margin: 0;
padding: 0;
} .storyteller .story-section .story-element p {
margin: 1em 0;
} .storyteller .story-section .story-element.story-element-image {
overflow: hidden;
} .storyteller .story-section .story-element.story-element-image img {
width: 100%;
height: auto;
} .storyteller .story-section .story-element.story-element-circle .canvas-container {
position: relative;
} .storyteller .story-section .story-element.story-element-circle .canvas-container .canvas-inner {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
text-align: center;
} .storyteller .story-section .story-element.story-element-circle .canvas-container .canvas-inner .text-wrapper {
position: absolute;
width: 100%;
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
transform: translateY(-50%);
} .storyteller .story-section .story-element.story-element-circle .canvas-container .canvas-inner .text-wrapper .value {
font-size: 250%;
} .storyteller .story-section .story-element.story-element-fill {
background-repeat: no-repeat;
background-size: cover;
} .storyteller .story-section .story-element.story-element-fill .colorizer {
position: relative;
top: 0;
margin: 0 auto;
max-width: 100%;
height: 100%;
} .storyteller .story-section .story-element.story-element-fill .colorizer img {
width: auto;
height: auto;
} .storyteller .story-section .story-element.story-element-fill .colorizer .to-colorize {
position: absolute;
overflow: hidden;
left: 0;
width: 100%;
height: 100%;
} .storyteller .story-section .story-element.story-element-fill .colorizer .to-colorize img {
position: absolute;
left: 0;
bottom: 0;
} .storyteller .story-section .story-element.story-element-fill .colorizer .to-colorize.uncolored-image {
top: auto;
bottom: 0;
max-height: 100%;
} .storyteller .story-section .story-element.story-element-fill .colorizer .to-colorize.uncolored-image img {
max-height: 100%;
} .storyteller .story-section .story-element.story-element-fill .colorizer .to-colorize.colored-image {
bottom: 0;
left: 0;
right: 0;
width: 0;
height: 0;
}
@media only screen and (min-width: 768px) { .storyteller {
font-size: 12px;
} .storyteller .hide-lt-768 {
display: block;
} .storyteller .story-section .story-element h2 {
font-size: 20px;
}
}
@media only screen and (min-width: 1024px) { .storyteller {
font-size: 14px;
} .storyteller .hide-mobile {
display: block;
} .storyteller .story-section .story-element .roof-line {
font-size: 120%;
} .storyteller .story-section .story-element h2 {
font-size: 40px;
}
}
@media only screen and (max-width: 767px) { .storyteller .story-section .story-element.full-size-mobile {
margin-left: 0;
max-width: 90% !important;
padding-right: 5%;
} .storyteller .story-section .story-element.full-size-mobile.full-size-mobile-from-right {
padding-right: 0;
padding-left: 5%;
}
}
@media only screen and (max-width: 1023px) { .storyteller .story-section .story-element.full-size-mobile {
margin-left: 0;
max-width: 90% !important;
padding-right: 5%;
} .storyteller .story-section .story-element.full-size-mobile.full-size-mobile-from-right {
padding-right: 0;
padding-left: 5%;
}
} @media only screen and (max-width: 767px) { #storyteller-giraffe #main-text-giraffe {
top: 10% !important;
} #storyteller-giraffe #main-text-giraffe .roof-line {
display: none !important;
} #storyteller-giraffe #main-text-giraffe h2 {
font-size: 12px !important;
} #storyteller-giraffe #wall-text-right {
font-size: 10px;
} #storyteller-giraffe #wall-text-right .roof-line {
display: none !important;
} #storyteller-giraffe #wall-text-right h2 {
font-size: 12px !important;
}
}
@media only screen and (max-width: 468px) { #storyteller-giraffe #wall-text-right {
font-size: 6px;
max-width: 100% !important;
padding-left: 5%;
} #storyteller-giraffe #giraffe-text-left {
top: 0;
max-width: 100% !important;
padding-right: 5%;
} #storyteller-giraffe #giraffe-text-left .roof-line {
display: none;
} #storyteller-giraffe #giraffe-text-left p {
font-size: 9px;
} #storyteller-giraffe #last-text-left {
max-width: 100% !important;
padding-right: 5%;
} #storyteller-giraffe #last-text-right {
max-width: 100% !important;
padding-left: 5%;
} #storyteller-beer #main-text-giraffe {
top: 10px !important;
} #storyteller-beer #main-text-giraffe .roof-line {
display: none;
} #storyteller-beer #main-text-giraffe p {
font-size: 9px;
} #storyteller-beer #hopfen-text {
max-width: 80% !important;
margin-left: -40% !important;
} #storyteller-beer #fill-giraffe {
top: -82px !important;
} #storyteller-beer #last-text-left {
padding-left: 14%;
max-width: 100% !important;
} #storyteller-shoes #last-text {
max-width: 70% !important;
margin-left: -35% !important;
}
}
@media only screen and (max-width: 1023px) { #storyteller-giraffe #fill-giraffe {
width: 256px !important;
height: 266px !important;
}
}
@media only screen and (max-width: 1279px) { #storyteller-giraffe #fill-giraffe {
width: 310px !important;
height: 319px !important;
}
}
@media only screen and (min-width: 1280px) { .storyteller { }
}