Antonio’s Story *
Sed posuere consectetur est at lobortis, est non commodo luctus, nisi erat porttitor
* *
*
*
*
*
*
*/
.tiled-article {
border: 2px solid #c4c4c4;
-webkit-box-sizing: border-box;
box-sizing: border-box;
display: inline-block;
margin-bottom: 20px;
padding: 30px 20px;
width: 100%;
}
.tiled-article .article-thumbnail {
margin: -30px -20px 20px;
}
.tiled-article .article-thumbnail img {
display: block;
width: 100%;
}
.tiled-article .article-headline,
.tiled-article .gform_heading .gform_title,
.gform_heading .tiled-article .gform_title {
color: #484848;
margin: 0;
-webkit-transition: color 0.1s ease-in;
-o-transition: color 0.1s ease-in;
transition: color 0.1s ease-in;
}
.tiled-article .article-summary {
margin: 0;
}
.tiled-article .article-byline {
margin-bottom: 5px;
}
.tiled-article .article-byline .article-type {
color: #484848;
}
.tiled-article:hover,
.tiled-article:active,
.tiled-article:focus {
border-color: #ffaa91;
text-decoration: none;
}
.tiled-article:hover .article-headline,
.tiled-article:hover .gform_heading .gform_title,
.gform_heading .tiled-article:hover .gform_title,
.tiled-article:hover .article-subhead,
.tiled-article:active .article-headline,
.tiled-article:active .gform_heading .gform_title,
.gform_heading .tiled-article:active .gform_title,
.tiled-article:active .article-subhead,
.tiled-article:focus .article-headline,
.tiled-article:focus .gform_heading .gform_title,
.gform_heading .tiled-article:focus .gform_title,
.tiled-article:focus .article-subhead {
color: #ff5a5f;
}
/**
* A toast is an element that pops up from the bottom of the screen when it
* gets an 'active' class. Currently, it is used for share buttons.
*/
.toast {
background: rgba(245, 245, 245, 0.95);
-webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5);
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5);
padding: 20px 20px 10px;
z-index: 8;
position: fixed;
right: 0;
bottom: 0;
left: 0;
-webkit-transform: translateY(100%);
-o-transform: translateY(100%);
transform: translateY(100%);
-webkit-transition: -webkit-transform 0.2s ease-in;
transition: -webkit-transform 0.2s ease-in;
-o-transition: -o-transform 0.2s ease-in;
transition: transform 0.2s ease-in;
transition: transform 0.2s ease-in, -webkit-transform 0.2s ease-in, -o-transform 0.2s ease-in;
}
@media screen and (min-width: 744px) {
.toast {
display: inline-block;
left: 100px;
right: auto;
}
}
.toast.active {
-webkit-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0);
}
.toast .article-share {
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.toast .share-list {
-webkit-box-flex: 0;
box-flex: 0;
-moz-flex: 0;
-ms-flex: 0;
flex: 0;
}
/**
* An article hero image with a centered play button that triggers a video
* overlay.
*/
.video-hero {
position: relative;
}
.video-hero .article-hero {
-webkit-transition: opacity 0.1s ease-in;
-o-transition: opacity 0.1s ease-in;
transition: opacity 0.1s ease-in;
}
.video-hero .btn-video-play {
color: #ffffff;
display: block;
font-size: 90px;
line-height: 1;
margin: -.7em 0 0 -.5em;
opacity: .9;
padding: 0;
position: absolute;
top: 50%;
left: 50%;
-webkit-transition: opacity 0.1s ease-in;
-o-transition: opacity 0.1s ease-in;
transition: opacity 0.1s ease-in;
}
.video-hero .btn-video-play:hover,
.video-hero .btn-video-play:focus {
opacity: 1;
text-decoration: none;
}
.video-hero .btn-video-play:focus {
outline: 0;
text-shadow: 0 0 5px #00a699;
}
.video-hero .btn-video-close {
color: #ffffff;
display: none;
z-index: 9;
position: absolute;
top: 10px;
right: 10px;
}
.video-hero .btn-video-close:hover,
.video-hero .btn-video-close:focus {
text-decoration: none;
}
.video-hero.active {
background: #000000;
}
.video-hero.active::after {
content: '';
display: block;
opacity: 0;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
height: 100%;
width: 100%;
}
.video-hero.active .article-hero {
opacity: .7;
-webkit-filter: blur(5px);
filter: blur(5px);
}
.video-hero.active .btn-video-close {
display: block;
}
.video-hero.active .video-stage {
display: block;
}
.video-stage {
display: none;
margin: 0 auto;
padding: 20px;
width: 100%;
z-index: 9;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.video-hero .video-stage {
max-width: 444.44444444px;
}
@media screen and (min-width: 744px) {
.video-hero .video-stage {
max-width: 800px;
}
}
.video-wrapper {
background: #000000;
height: 0;
padding-bottom: 56.25%;
position: relative;
}
.video-wrapper > iframe {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
}
.youtube-tout .video-stage {
padding: 0;
-webkit-transform: none;
-o-transform: none;
transform: none;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.youtube-tout .video-wrapper {
background: #fff;
}
.youtube-tout .btn-video-play {
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: 100%;
text-align: center;
margin: 0;
}
.gform_wrapper {
background: #f5f5f5;
padding: 20px;
}
@media screen and (min-width: 1128px) {
.gform_wrapper,
.gform_confirmation_wrapper {
padding: 30px 60px;
margin-left: -12.5%;
margin-right: -12.5%;
padding: 30px 12.5%;
}
}
.gform_heading {
position: relative;
padding-left: 60px;
line-height: 1em;
margin-bottom: 30px;
}
.gform_heading .gform_title {
font-size: 30px;
display: inline;
line-height: 1em;
}
.gform_heading .gform_title:before {
color: #b4a76c;
position: absolute;
left: 0;
top: 0;
font-size: 40px;
}
.gform_heading .gform_description {
color: #767676;
font-weight: 200;
font-size: 30px;
line-height: 1em;
}
.gform_wrapper ul.gform_fields li.gfield {
text-indent: 0 !important;
clear: both;
}
.gform_wrapper ul.gform_fields li.gfield:before {
content: none !important;
}
.gform_wrapper form {
margin-bottom: 0;
}
.gform_wrapper .gfield_required {
padding-left: 1px;
color: #b23f42;
}
.ginput_container textarea {
height: auto;
}
.ginput_container textarea.small {
height: 6em;
}
.ginput_container textarea.medium {
height: 10em;
}
.ginput_container textarea.large {
height: 15em;
}
.gform_wrapper .gfield_error .gfield_label {
color: #b23f42;
}
.ginput_complex span label {
font-weight: normal;
color: #767676;
}
.gform_wrapper .gfield_radio {
margin-left: 0;
}
.gform_wrapper .gfield_radio li {
display: block;
text-indent: 0;
}
.gform_wrapper .gfield_radio li input,
.gform_wrapper .gfield_radio li label {
display: inline-block;
vertical-align: middle;
margin: 0 10px 0 0;
padding: 0;
}
.gform_wrapper .gfield_radio li:before {
content: none;
}
.radio-switch li {
display: inline-block;
}
.gfield_visibility_hidden {
display: none !important;
}
.address_country select {
width: 100%;
}
.address_country:before {
bottom: auto;
top: 1em;
margin-top: -5px;
padding-top: 0;
}
.gform_drop_area {
width: 100%;
border: 2px dashed #bbbbbb;
text-align: center;
-webkit-transition: all .25s ease-in-out;
-o-transition: all .25s ease-in-out;
transition: all .25s ease-in-out;
}
.gform_drop_area:hover {
border-color: #00a699;
background: #fff;
}
.gform_drop_area .gform_drop_instructions {
display: block;
margin-top: 40px;
margin-bottom: 10px;
text-transform: uppercase;
color: #bbbbbb;
font-weight: bold;
}
.gform_drop_area .gform_button_select_files {
margin-bottom: 40px;
}
.gfield_checkbox {
position: relative;
}
.gfield_checkbox li {
text-indent: 0 !important;
clear: both;
margin-bottom: 5px;
}
.gfield_checkbox li:before {
content: none !important;
}
.gfield_checkbox input {
position: absolute;
top: 0;
margin: 0;
left: 0;
}
.gfield_checkbox label {
display: inline-block;
text-indent: 0;
padding: 0;
}
.gfield.disclaimer .gfield_label {
display: none;
}
.disclaimer .gfield_checkbox label {
color: #484848;
text-transform: none;
font-weight: normal;
font-size: 14px;
}
.disclaimer.gfield_error .validation_message {
color: #b23f42;
font-weight: bold;
position: relative;
}
.disclaimer.gfield_error input {
border-color: #b23f42;
}
.disclaimer.gfield_error label:after {
font-family: Airglyphs;
content: '\F115';
position: absolute;
left: 0;
font-size: 1.5em;
font-weight: bold;
top: 20px;
display: block;
color: #b23f42;
}
.video-recorder {
margin-bottom: 40px;
}
.video-recorder .video-instructions h4 {
color: #7b0051;
}
.video-recorder .video-instructions li {
font-size: 14px;
line-height: 1.25em;
margin-bottom: 5px;
}
.video-recorder #hdfvr-content div {
margin-left: auto;
margin-right: auto;
}
.gf_progressbar_title {
font-size: 16px;
font-weight: 800;
color: #767676;
text-transform: uppercase;
}
.gf_progressbar {
margin-bottom: 30px;
}
.gf_progressbar .gf_progressbar_percentage span {
display: none;
}
@media screen and (min-width: 1128px) {
.video-recorder {
margin: 0 -80px 40px;
}
.ginput_complex {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
margin-left: -5px;
margin-right: -5px;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
}
.ginput_complex span {
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
margin: 0 5px;
}
.ginput_complex.ginput_container_address .address_city {
-webkit-box-flex: 2;
-ms-flex-positive: 2;
flex-grow: 2;
min-width: 40%;
}
.ginput_complex.ginput_container_address .address_country {
max-width: 25%;
}
.gf_left_half,
.gf_right_half {
display: inline-block;
width: 50%;
overflow: auto;
}
.gf_left_half {
float: left;
padding-right: 10px;
clear: none !important;
}
.gf_right_half {
float: right;
clear: right !important;
}
}
#tinymce {
height: auto !important;
margin: 15px;
}
.alignnone {
margin-left: 0;
margin-right: 0;
max-width: 100%;
height: auto;
}
.aligncenter {
display: block;
margin: 20px auto;
height: auto;
max-width: 100%;
}
.alignleft,
.alignright {
margin-bottom: 20px;
height: auto;
}
@media (min-width: 744px) {
.alignleft {
float: left;
margin-right: 20px;
margin-left: -12.5%;
}
.alignright {
float: right;
margin-left: 20px;
margin-right: -12.5%;
}
}
.wp-caption-text {
padding: 20px;
}
.pagination {
text-align: center;
}
.pagination .nav-links {
display: inline-block;
}
.module.module-signup {
margin-bottom: 40px;
}
.homepage-hero {
margin-bottom: 0 !important;
}
.pipeCounter {
top: 15px;
right: 15px;
font-size: 13px;
font-weight: bold;
color: #fff;
}
.ribbon {
padding: 40px 0;
background: #f5f5f5;
display: block;
}
.ribbon h3 {
font-size: 24px;
font-weight: 700;
margin-top: 0;
}
.ribbon h3 small {
font-size: 1em;
font-weight: 200;
}
.ribbon.ribbon-contrast,
.ribbon.ribbon-hackberry,
.ribbon.ribbon-kazan,
.ribbon.ribbon-hof {
background: #881962;
color: #fff;
}
.ribbon.ribbon-contrast h3,
.ribbon.ribbon-hackberry h3,
.ribbon.ribbon-kazan h3,
.ribbon.ribbon-hof h3 {
color: #fff;
}
.ribbon.ribbon-contrast h3 small,
.ribbon.ribbon-hackberry h3 small,
.ribbon.ribbon-kazan h3 small,
.ribbon.ribbon-hof h3 small {
color: rgba(255, 255, 255, 0.8);
}
.ribbon .ribbon-text-iconic {
padding-left: 40px;
position: relative;
}
@media screen and (min-width: 744px) {
.ribbon .ribbon-text-iconic {
padding-left: 60px;
}
}
.ribbon .ribbon-text-iconic .icon,
.ribbon .ribbon-text-iconic .gform_heading .gform_title:before,
.gform_heading .ribbon .ribbon-text-iconic .gform_title:before {
color: #b4a76c;
font-size: 30px;
position: absolute;
top: 0;
left: 0;
}
@media screen and (min-width: 744px) {
.ribbon .ribbon-text-iconic .icon,
.ribbon .ribbon-text-iconic .gform_heading .gform_title:before,
.gform_heading .ribbon .ribbon-text-iconic .gform_title:before {
font-size: 40px;
}
}
/**
* New community footer replaces BSD signup.
*/
.ribbon.ribbon-community {
background: #881962;
}
.ribbon.ribbon-story {
background: #881962;
}
.ribbon.ribbon-hackberry {
background: #881962;
}
.ribbon.ribbon-kazan {
background: #007a87;
}
.ribbon.ribbon-hof {
background: #484848;
}
html,
body {
height: 100%;
margin: 0;
padding: 0;
font-family: Cereal,-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
body {
background: #ffffff;
font-size: 16px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
letter-spacing: -.3px;
line-height: 1.5;
overflow-x: hidden;
overflow-y: scroll;
/**
* When the navigation drawer is active, the nav should be scrollable and
* not the page in the background.
*/
}
body.nav-active {
overflow-y: hidden;
}
a:focus,
button:focus,
input:focus,
textarea:focus,
div:focus,
select:focus,
.btn:focus,
.gform_wrapper .button:focus {
outline-color: #00a699;
}
/**
* The page wrapper is the direct child of the body and by using flexbox
* pushes the footer to the bottom of the screen even when the content is
* short.
*/
.page-wrapper {
min-height: 100%;
display: -webkit-box;
display: flex;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
box-orient: vertical;
-webkit-box-direction: normal;
box-direction: normal;
-moz-flex-direction: column;
flex-direction: column;
-ms-flex-direction: column;
}
/**
* Since the header is absolutely positioned, the .main-content of the page
* is pushed down via a margin equal to the height of the nav.
*/
.main-content {
margin-top: 54px;
-webkit-box-flex: 1;
box-flex: 1;
-moz-flex: 1 1 auto;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
}
@media screen and (min-width: 744px) {
.main-content {
margin-top: 72px;
}
}
.main-content > .article-detail:first-child {
padding: 30px 0 0;
}
@media screen and (min-width: 744px) {
.main-content > .article-detail:first-child {
padding: 50px 0 0;
}
}
a {
-webkit-transition: color 0.1s ease-in;
-o-transition: color 0.1s ease-in;
transition: color 0.1s ease-in;
}
blockquote {
border-left: 4px solid #b4a76c;
font-weight: 200;
margin-left: 0;
margin-right: 0;
margin-top: 0;
padding-left: 18px;
}
blockquote > p {
font-size: 30px;
line-height: 1.3;
margin-bottom: 10px;
}
blockquote cite {
color: #767676;
font-size: 14px;
font-style: normal;
font-weight: 700;
text-transform: uppercase;
display: block;
}
blockquote.small-quote > p {
font-size: 24px;
}
p,
ul,
ol,
dl,
blockquote {
margin-bottom: 30px;
}
input,
select,
textarea {
font-size: 14px;
}
input::-webkit-input-placeholder,
select::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
font-size: 14px;
letter-spacing: -.3px;
}
input::-moz-placeholder,
select::-moz-placeholder,
textarea::-moz-placeholder {
font-size: 14px;
letter-spacing: -.3px;
}
input:-moz-placeholder,
select:-moz-placeholder,
textarea:-moz-placeholder {
font-size: 14px;
letter-spacing: -.3px;
}
input:-ms-input-placeholder,
select:-ms-input-placeholder,
textarea:-ms-input-placeholder {
font-size: 14px;
letter-spacing: -.3px;
}
.link-more {
color: #484848;
font-weight: 700;
text-align: right;
text-transform: uppercase;
}
.text-community {
color: #00a6a8;
}
.page-container-wide {
width: 100%;
max-width: 1400px;
margin-left: auto;
margin-right: auto;
padding-left: 20px;
padding-right: 20px;
}
/**
* The main site header which contains a logo and a hamburger menu
* (.nav-toggle) absolutely positioned in the left and right corners,
* respectively. On larger viewports, the header is a bit taller and the logo
* a bit larger.
*
* .nav-active & - When the navigation is active, the header is positioned
* fixed so that its elements display above the navigation overlay. A
* background color and transition matching the overlay is added so that
* scrolling the navigation does not cause overlap with the logo.
*/
.main-header {
background-color: #ffffff;
-webkit-box-shadow: 0 2px rgba(72, 72, 72, 0.2);
box-shadow: 0 2px rgba(72, 72, 72, 0.2);
z-index: 10;
position: absolute;
right: 0;
left: 0;
height: 54px;
width: 100%;
-webkit-transition: background-color 0.25s ease-in, top 0s;
-o-transition: background-color 0.25s ease-in, top 0s;
transition: background-color 0.25s ease-in, top 0s;
}
@media screen and (min-width: 744px) {
.main-header {
height: 72px;
}
}
.main-header .nav-toggle {
position: absolute;
top: 16px;
right: 10px;
}
@media screen and (min-width: 744px) {
.main-header .nav-toggle {
right: 24px;
top: 24px;
}
}
.main-header .logo-container {
width: 116px;
position: absolute;
top: 16px;
left: 10px;
}
@media screen and (min-width: 744px) {
.main-header .logo-container {
left: 24px;
top: 19px;
width: 178px;
}
}
.main-header.stickable {
position: fixed;
top: -54px;
-webkit-transition: background-color 0.25s ease-in, top 0.2s ease-in;
-o-transition: background-color 0.25s ease-in, top 0.2s ease-in;
transition: background-color 0.25s ease-in, top 0.2s ease-in;
}
@media screen and (min-width: 744px) {
.main-header.stickable {
top: -72px;
}
}
.main-header.stickable.sticky {
top: 0;
-webkit-transition: background-color 0.25s ease-in, top 0.2s ease-in;
-o-transition: background-color 0.25s ease-in, top 0.2s ease-in;
transition: background-color 0.25s ease-in, top 0.2s ease-in;
}
.nav-active .main-header,
.nav-active .main-header.sticky {
background-color: #7b0051;
background-color: rgba(123, 0, 81, 0.95);
-webkit-box-shadow: none;
box-shadow: none;
position: fixed;
top: 0;
}
/**
* For sub pages, display the subheader copy in the header positioned to
* the right of the logo. This is carefully positioned so the subhead does
* not overflow over the hamburger nav but instead displays an ellipsis.
* .nav-active & - When the navigation is active, hide the locale.
*/
.header-subhead {
-webkit-box-shadow: -2px 0 rgba(72, 72, 72, 0.2);
box-shadow: -2px 0 rgba(72, 72, 72, 0.2);
color: #767676;
line-height: 54px;
padding-left: 10px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
position: absolute;
top: 0;
right: 40px;
bottom: 0;
left: 138px;
}
@media screen and (min-width: 744px) {
.header-subhead {
font-size: 24px;
left: 228px;
right: 68px;
line-height: 72px;
padding-left: 24px;
}
}
.nav-active .header-subhead,
.nav-active .header-subhead.sticky {
opacity: 0;
}
/**
* The main footer navigation.
*/
.footer-nav-primary {
background: rgba(118, 118, 118, 0.1);
font-size: 14px;
padding: 20px 0;
}
@media screen and (min-width: 744px) {
.footer-nav-primary {
padding: 40px 0;
}
}
.footer-nav-primary .logo-container {
margin-top: 6px;
width: 156px;
margin: 6px auto 20px;
}
@media screen and (min-width: 744px) {
.footer-nav-primary .logo-container {
margin: 0;
}
}
/**
* Footer navigation items that display as unstyled lists, with top-level
* items bolded.
*/
.footer-nav-list,
.footer-nav .menu {
letter-spacing: -.5px;
list-style: none;
margin: 0;
padding: 0;
}
.footer-nav-item,
.footer-nav .menu li a {
color: #484848;
}
.footer-nav-item.top-level,
.footer-nav .menu li a.top-level {
font-weight: 700;
}
.footer-nav-item:hover,
.footer-nav .menu li a:hover {
text-decoration: none;
}
/**
* An inline-list of social icons for the footer.
*/
.footer-social-headline {
font-size: 14px;
font-weight: 700;
letter-spacing: -.5px;
text-transform: uppercase;
}
.footer-social-list {
list-style: none;
margin: 0;
padding: 0;
}
.footer-social-list li {
display: inline-block;
margin-left: 1em;
}
.footer-social-list li:first-child {
margin-left: 0;
}
.footer-social-item {
color: #767676;
font-size: 16px;
}
.footer-social-item:hover {
text-decoration: none;
}
/**
* An auxiliary mobile menu that displays only for small viewports (this
* element should have the .show-sm class).
*/
.footer-nav-mobile {
padding: 20px 0;
}
.footer-nav-mobile .footer-nav-list,
.footer-nav-mobile .footer-social {
text-align: center;
}
/**
* A quick signup module in the footer. This uses flexbox to display fields
* inline, bottom-aligned. This disappears for smaller viewports by a
* .hide-sm class.
*/
.footer-signup {
background: #881962;
padding: 40px 0;
}
.footer-signup .signup-headline,
.footer-signup label,
.footer-signup .disclaimer {
color: #ffffff;
}
.footer-signup signup-form {
-webkit-box-align: end;
box-align: end;
-moz-align-items: flex-end;
-ms-align-items: flex-end;
-o-align-items: flex-end;
align-items: flex-end;
-ms-flex-align: end;
display: -webkit-box;
display: flex;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-lines: no-wrap;
-moz-box-lines: no-wrap;
box-lines: no-wrap;
-ms-flex-wrap: no-wrap;
flex-wrap: no-wrap;
-webkit-box-pack: center;
box-pack: center;
-moz-justify-content: center;
-ms-justify-content: center;
-o-justify-content: center;
justify-content: center;
-ms-flex-pack: center;
}
.footer-signup .form-group,
.footer-signup .gform_wrapper ul.gform_fields li.gfield,
.gform_wrapper ul.gform_fields .footer-signup li.gfield {
margin: 0 5px;
max-width: 160px;
}
.footer-signup .form-group label,
.footer-signup .gform_wrapper ul.gform_fields li.gfield label,
.gform_wrapper ul.gform_fields .footer-signup li.gfield label {
font-size: 12px;
font-weight: 700;
letter-spacing: -.5px;
padding: 0 0 4px;
text-transform: uppercase;
}
.footer-signup .signup-headline {
font-size: 24px;
margin: 0 5px 4px;
}
/**
* The final strip of legal links and copyright text at the very bottom of
* the page.
*/
.footer-legal {
background: #7b0051;
font-size: 12px;
padding: 12px;
text-align: center;
}
.footer-legal-item {
color: #ffffff;
display: inline-block;
margin-left: 1em;
}
.footer-legal-item:first-child {
margin-left: 0;
}
.footer-legal-item:hover {
text-decoration: none;
}
.index-header {
margin-bottom: 50px;
padding-bottom: 10px;
background-position: bottom;
background-image: -webkit-gradient(linear, left top, right top, color-stop(50%, rgba(72, 72, 72, 0.1)), color-stop(0%, rgba(255, 255, 255, 0)));
background-image: -webkit-linear-gradient(left, rgba(72, 72, 72, 0.1) 50%, rgba(255, 255, 255, 0) 0%);
background-image: -o-linear-gradient(left, rgba(72, 72, 72, 0.1) 50%, rgba(255, 255, 255, 0) 0%);
background-image: linear-gradient(to right, rgba(72, 72, 72, 0.1) 50%, rgba(255, 255, 255, 0) 0%);
background-repeat: repeat-x;
background-size: 6px 2px;
}
.content-index {
padding: 50px 0 70px;
}
/**
* EIR articles have a large purple header at the top that sits against the
* nav. This overwrites any padding rules.
*/
.main-content > .article-detail.eir-article:first-child {
padding: 0;
}
/**
* The EIR headline will generally say something like '2015 Economic Ipact
* Report: Los Angeles'. The city name is in an .article-subhead element. Since
* the subhead is generally short here, this prevents any typographic orphans
* by breaking the whole subhead to a separate line if necessary.
*/
.eir-headline .article-subhead,
.eir-subsection-header .article-subhead {
display: inline-block;
}
/**
* The EIR header is a full-width hackberry bar with the usual article headline
* styling, though with margins and padding adjusted. The eir-controller.js
* component clones this header and creates a smaller sticky version of it that
* displays constantly once you scroll past the original.
* .stickable - This class is added to the cloned version of the header and
* places the element off-canvas.
* .sticky - This class is applied to the cloned version of the header when
* the user has scrolled past its original. This moves the element into view.
*
*/
.eir-header {
background: #7b0051;
color: #ffffff;
padding: 30px 0;
margin-bottom: 80px;
}
.eir-header .eir-headline {
margin: 0;
}
.eir-header.stickable {
font-size: 16px;
padding: 15px 0;
z-index: 2;
position: fixed;
top: 0;
right: 0;
left: 0;
-webkit-transform: translateY(-100%);
-o-transform: translateY(-100%);
transform: translateY(-100%);
-webkit-transition: all 0.2s ease-in;
-o-transition: all 0.2s ease-in;
transition: all 0.2s ease-in;
}
.eir-header.stickable .eir-headline {
font-size: 16px;
}
@media screen and (min-width: 744px) {
.eir-header.stickable .eir-headline {
font-size: 24px;
}
}
.eir-header.stickable .eir-headline .article-subhead {
display: block;
font-size: 24px;
}
@media screen and (min-width: 744px) {
.eir-header.stickable .eir-headline .article-subhead {
display: inline-block;
}
}
.eir-header.stickable .eir-locales-menu {
display: none;
}
.eir-header.stickable.sticky {
-webkit-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0);
}
.eir-header.stickable.sticky .eir-locales-menu {
display: block;
}
.nav-sticky .eir-header.stickable.sticky {
top: 54px;
}
@media screen and (min-width: 744px) {
.nav-sticky .eir-header.stickable.sticky {
top: 72px;
}
}
/**
* The container of the locales switcher menu. On mobile breakpoint it
* displays on its own line. On mobile, it displays as an inline-block to
* allow for display inline but preventing it from creating orphans.
*/
.eir-locales {
display: block;
/**
* Basic styline for the link that hides and shows the .eir-locales-menu.
*/
}
.eir-locales.article-subhead {
color: #ffffff;
}
@media screen and (min-width: 744px) {
.eir-locales {
position: relative;
}
}
.eir-locales .eir-locales-toggle:link,
.eir-locales .eir-locales-toggle:visited,
.eir-locales .eir-locales-toggle:hover,
.eir-locales .eir-locales-toggle:active,
.eir-locales .eir-locales-toggle:focus {
color: #ffffff;
text-decoration: none;
}
.eir-locales .eir-locales-toggle .icon,
.eir-locales .eir-locales-toggle .gform_heading .gform_title:before,
.gform_heading .eir-locales .eir-locales-toggle .gform_title:before {
color: #b4a76c;
font-size: .5em;
margin-left: .3em;
vertical-align: middle;
}
/**
* The locales switcher menu. It displays a small overlay that displays
* beneath the .eir-locales-toggle and appears with a fade transition. At
* mobile breakpoints, its width fills the viewport. On desktop breakpoints
* it has a max-width.
*/
.eir-locales-menu {
background: #f5f5f5;
-webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
-webkit-box-sizing: border-box;
box-sizing: border-box;
font-size: 16px;
letter-spacing: -0.3px;
max-height: 0;
opacity: 0;
overflow: hidden;
z-index: 2;
position: absolute;
right: 15px;
left: 15px;
-webkit-transition: max-height 0s 0.1s, opacity 0.1s ease-in, visibility 0s 0.1s;
-o-transition: max-height 0s 0.1s, opacity 0.1s ease-in, visibility 0s 0.1s;
transition: max-height 0s 0.1s, opacity 0.1s ease-in, visibility 0s 0.1s;
}
.eir-locales-menu.active {
max-height: 9999px;
opacity: 1;
visibility: visible;
-webkit-transition: max-height 0s, opacity 0.1s ease-in, visibility 0s 0s;
-o-transition: max-height 0s, opacity 0.1s ease-in, visibility 0s 0s;
transition: max-height 0s, opacity 0.1s ease-in, visibility 0s 0s;
}
@media screen and (min-width: 744px) {
.eir-locales-menu {
min-width: 220px;
left: auto;
right: 0;
white-space: nowrap;
}
}
/**
* The list of locale links displays as a basic unsytled link.
*/
.eir-locales-list {
list-style: none;
margin: 10px 20px;
padding: 0;
}
/**
* An individual link in a list item.
*/
.eir-locales-item {
display: block;
padding: 10px 0;
}
.eir-locales-item.active {
color: #484848;
font-weight: 700;
}
/**
* A locale subsection in an EIR article, with margins defined for it and its
* header.
*/
.eir-locale-section {
margin-bottom: 80px;
}
.eir-locale-section .article-section-header,
.eir-locale-section .gsection .gsection_title,
.gsection .eir-locale-section .gsection_title {
margin-top: 30px;
}
@media screen and (min-width: 744px) {
.eir-locale-section .article-section-header,
.eir-locale-section .gsection .gsection_title,
.gsection .eir-locale-section .gsection_title {
margin-top: 80px;
}
}
/**
* After the first locale subsection, each subsequent locale is divided by a
* thick hackberry border.
*/
.eir-subsection-header {
border-top: 4px solid #7b0051;
margin: 0 -12.5px 30px;
padding: 30px 12.5px 0;
}
@media screen and (min-width: 744px) {
.eir-subsection-header {
margin: 0 0 30px;
padding: 30px 0 0;
}
}
/**
* Key statistics for EIRs. These are designed for visual contrast so that the
* highlighted copy, wrapped in a strong tag, are bold and darker.
* .eir-stat-primary - A very large version of the stat displayed in the
* "Key Findings" section of an EIR report.
* .eir-icon-stat - A stat that is prepended by a representative icon.
*/
.eir-stat {
color: #767676;
font-size: 16px;
line-height: 1.1;
}
.eir-stat strong {
color: #484848;
font-size: 30px;
}
.eir-stat-primary {
font-size: 24px;
font-weight: 200;
letter-spacing: -1.3px;
}
.eir-stat-primary strong {
display: block;
font-size: 48px;
line-height: 1.18;
}
.eir-stat.eir-icon-stat {
padding-left: 50px;
position: relative;
}
.eir-stat.eir-icon-stat .icon,
.eir-stat.eir-icon-stat .gform_heading .gform_title:before,
.gform_heading .eir-stat.eir-icon-stat .gform_title:before {
color: #b4a76c;
font-size: 40px;
position: absolute;
top: -14px;
left: 0;
}
@media screen and (min-width: 744px) {
.eir-stat strong {
font-size: 30px;
}
.eir-stat-primary {
font-size: 30px;
line-height: 1.18;
}
.eir-stat-primary strong {
font-size: 74px;
}
}
.homepage-hero {
color: #ffffff;
margin-bottom: 45px;
padding: 60px 0;
position: relative;
text-align: center;
}
@media screen and (min-width: 744px) {
.homepage-hero {
height: 628px;
text-align: left;
}
.homepage-hero .hero-title {
font-size: 74px;
letter-spacing: -2.3px;
}
.homepage-hero .btn-video-play {
font-size: 110px;
}
.homepage-hero .col-sm-12,
.homepage-hero .primary-tout .column,
.primary-tout .homepage-hero .column {
height: 508px;
}
}
.homepage-hero .article-hero {
height: auto;
margin: 0;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.homepage-hero .hero-subtitle {
font-size: 24px;
line-height: 1.25;
}
@media screen and (min-width: 744px) {
.homepage-hero .hero-subtitle {
line-height: 1.33;
}
}
.homepage-hero .btn-video-play {
margin: 0 auto;
position: static;
}
.homepage-hero.active .article-headline,
.homepage-hero.active .gform_heading .gform_title,
.gform_heading .homepage-hero.active .gform_title,
.homepage-hero.active .btn-video-play {
opacity: .5;
}
.homepage-section {
margin-bottom: 60px;
}
.homepage-signup {
color: #ffffff;
text-align: center;
}
.homepage-signup-content {
background: #7b0051 center center no-repeat;
background-size: cover;
padding-bottom: 60px;
padding-top: 60px;
}
@media screen and (min-width: 1128px) {
.homepage-signup-content {
font-size: 24px;
padding-bottom: 90px;
padding-top: 90px;
}
}
.homepage-signup-content h2 {
font-size: 30px;
letter-spacing: -1px;
}
@media screen and (min-width: 744px) {
.homepage-signup-content h2 {
font-size: 48px;
letter-spacing: -1.6px;
}
}
.homepage-signup-form {
background: rgba(123, 0, 81, 0.9);
padding: 20px 20px 30px;
}
@media screen and (min-width: 744px) {
.homepage-signup-form {
padding: 30px 50px 40px;
}
.homepage-signup-form .signup-email {
-moz-flex-grow: 1;
-webkit-box-flex: 1;
flex-grow: 1;
-ms-flex-positive: 1;
}
}
.homepage-signup-form legend {
margin-bottom: 20px;
text-align: center;
width: 100%;
}
.homepage-signup-form label {
text-align: left;
}
.primary-touts {
margin-bottom: 20px;
}
.primary-touts .article-section-header,
.primary-touts .gsection .gsection_title,
.gsection .primary-touts .gsection_title {
margin-bottom: 20px;
}
.primary-tout {
margin-bottom: 50px;
}
.entry-content .primary-tout .article-figure,
.entry-content .primary-tout .wp-caption {
margin: 0;
width: 100%;
}
/**
* Styles specific to landing page templates.
*/
@media screen and (min-width: 1128px) {
.eir-stat-panels {
display: -webkit-box;
display: flex;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
}
}
.eir-stat-panel {
background: #f5f5f5;
margin-bottom: 10px;
padding: 20px;
}
.eir-stat-panel .eir-stat {
letter-spacing: -.7px;
margin: 0;
}
.eir-stat-panel .eir-stat strong {
display: block;
letter-spacing: -1.8px;
margin-bottom: 10px;
}
@media screen and (min-width: 1128px) {
.eir-stat-panel {
margin-right: 25px;
padding: 40px 20px;
-webkit-box-flex: 1;
box-flex: 1;
-moz-flex: 1;
-ms-flex: 1;
flex: 1;
}
.eir-stat-panel:last-child {
margin-right: 0;
}
}
@media screen and (min-width: 1128px) {
.eir-stat-panel .eir-stat {
font-size: 24px;
letter-spacing: -1px;
}
.eir-stat-panel strong {
font-size: 40px;
letter-spacing: -2px;
}
}
/**
* Initiative links display large color block links in a row with vertically
* centered text using o2 vertical alignment markup.
*/
.initiative-links {
margin-bottom: 80px;
}
.initiative-link {
border: 3px solid transparent;
color: #ffffff;
display: block;
font-size: 30px;
font-weight: 700;
line-height: 1.1;
padding: 0 10px;
text-align: center;
height: 140px;
width: 100%;
-webkit-transition: color 0.1s ease-in, background-color 0.1s ease-in;
-o-transition: color 0.1s ease-in, background-color 0.1s ease-in;
transition: color 0.1s ease-in, background-color 0.1s ease-in;
}
.initiative-link:hover,
.initiative-link:focus {
text-decoration: none;
}
.initiative-link.bg-hackberry {
border-color: #7b0051;
}
.initiative-link.bg-hackberry:hover,
.initiative-link.bg-hackberry:focus {
background-color: transparent;
color: #7b0051;
}
.initiative-link.bg-rausch {
border-color: #ff5a5f;
}
.initiative-link.bg-rausch:hover,
.initiative-link.bg-rausch:focus {
background-color: transparent;
color: #ff5a5f;
}
.initiative-link.bg-tirol {
border-color: #b4a76c;
}
.initiative-link.bg-tirol:hover,
.initiative-link.bg-tirol:focus {
background-color: transparent;
color: #b4a76c;
}
.initiative-link.bg-kazan {
border-color: #007a87;
}
.initiative-link.bg-kazan:hover,
.initiative-link.bg-kazan:focus {
background-color: transparent;
color: #007a87;
}
.nearby-link {
color: #484848;
}
.nearby-link:hover {
color: #ff5a5f;
text-decoration: none;
}
.nearby-link-thumbnail {
border: 2px solid transparent;
margin: 0 0 20px;
-webkit-transition: border-color 0.1s ease-in;
-o-transition: border-color 0.1s ease-in;
transition: border-color 0.1s ease-in;
}
.nearby-link-thumbnail img {
display: block;
width: 100%;
}
.nearby-link:hover .nearby-link-thumbnail {
border-color: #ffaa91;
}
.nearby-link-headline {
font-size: 24px;
font-weight: 700;
margin: 0 0 30px;
}
.market-signup {
background: #881962;
margin-bottom: 30px;
padding: 20px 0;
}
@media screen and (min-width: 744px) {
.market-signup {
padding: 40px 0;
}
}
.market-signup .signup-header,
.market-signup label {
color: #ffffff;
}
@media screen and (min-width: 744px) {
.action-signup .signup-form {
-webkit-box-pack: start;
box-pack: start;
-moz-justify-content: flex-start;
-ms-justify-content: flex-start;
-o-justify-content: flex-start;
justify-content: flex-start;
-ms-flex-pack: start;
}
}
.market-section {
margin-bottom: 60px;
}
.market-map {
margin-bottom: 30px;
height: 500px;
width: 100%;
}
.market-map .gm-style-iw {
font-size: 14px;
font-weight: bold;
padding-top: 5px;
text-align: center;
}
.market-map .gm-style-iw + div {
display: none;
}
.market-lists {
margin-bottom: 40px;
}
@media screen and (min-width: 744px) {
.market-lists {
margin-bottom: 60px;
}
}
.market-lists .market-list {
letter-spacing: -.75px;
list-style: none;
margin: 0 0 30px;
padding: 0;
}
@media screen and (min-width: 744px) {
.market-lists .market-list {
margin-bottom: 20px;
}
}
a.market-toggle {
color: #484848;
text-align: right;
text-decoration: none;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
a.market-toggle .icon-minus {
display: none;
}
a.market-toggle.toggle-active .icon-minus {
display: block;
}
a.market-toggle.toggle-active .icon-add {
display: none;
}
@media screen and (max-width: 743px) {
.market-list.market-countries {
height: 0;
opacity: 0;
overflow: hidden;
margin-bottom: 15px;
-webkit-transition: opacity 0.2s ease-in;
-o-transition: opacity 0.2s ease-in;
transition: opacity 0.2s ease-in;
}
.market-list.market-countries.active {
height: auto;
opacity: 1;
margin-bottom: 30px;
}
}
.market-region {
color: #b4a76c;
font-size: 24px;
font-weight: 700;
letter-spacing: -.75px;
position: relative;
}
@media screen and (max-width: 743px) {
.market-region {
padding-bottom: 10px;
background-position: bottom;
background-image: -webkit-gradient(linear, left top, right top, color-stop(50%, rgba(72, 72, 72, 0.1)), color-stop(0%, rgba(255, 255, 255, 0)));
background-image: -webkit-linear-gradient(left, rgba(72, 72, 72, 0.1) 50%, rgba(255, 255, 255, 0) 0%);
background-image: -o-linear-gradient(left, rgba(72, 72, 72, 0.1) 50%, rgba(255, 255, 255, 0) 0%);
background-image: linear-gradient(to right, rgba(72, 72, 72, 0.1) 50%, rgba(255, 255, 255, 0) 0%);
background-repeat: repeat-x;
background-size: 6px 2px;
}
}
.market-country {
color: #767676;
font-weight: 700;
text-transform: uppercase;
}
@media screen and (min-width: 744px) {
.market-country {
font-size: 14px;
}
}
.market-locale {
color: #484848;
font-size: 24px;
font-weight: 700;
line-height: 1.67;
}
@media screen and (min-width: 744px) {
.market-locale {
font-size: 16px;
}
}
.market-country:hover,
.market-country:focus,
.market-locale:hover,
.market-locale:focus {
text-decoration: none;
}
.search-index {
padding: 50px 0 70px;
}
.search-query {
position: relative;
padding-left: 40px;
}
@media screen and (min-width: 744px) {
.search-query {
padding-left: 0;
}
}
.search-query .search-btn-submit,
.search-query .search-btn-reset {
color: #b4a76c;
line-height: 1;
padding: 0;
position: absolute;
vertical-align: top;
}
.search-query .search-btn-submit:hover,
.search-query .search-btn-submit:focus,
.search-query .search-btn-reset:hover,
.search-query .search-btn-reset:focus {
text-decoration: none;
}
.search-query .search-btn-submit {
font-size: 30px;
left: 0px;
top: 4px;
}
@media screen and (min-width: 744px) {
.search-query .search-btn-submit {
font-size: 40px;
left: -50px;
top: 0;
}
}
.search-query .search-btn-reset {
right: 0;
top: 10px;
}
@media screen and (min-width: 744px) {
.search-query .search-btn-reset {
top: 16px;
}
}
.search-query .search-index-field {
background: transparent;
border-color: rgba(118, 118, 118, 0.4);
border-radius: 0;
border-style: solid;
border-width: 0 0 2px 0;
font-size: 30px;
margin-bottom: 10px;
padding: 0 0 4px 0;
}
.search-query .search-index-field:focus {
outline: none;
}
.search-query .search-index-field::-webkit-input-placeholder {
color: #767676;
font-size: 30px;
}
.search-query .search-index-field::-moz-placeholder {
color: #767676;
font-size: 30px;
}
.search-query .search-index-field:-moz-placeholder {
color: #767676;
font-size: 30px;
}
.search-query .search-index-field:-ms-input-placeholder {
color: #767676;
font-size: 30px;
}
.search-pagination-count {
color: #767676;
margin: 0 0 30px 40px;
font-size: 14px;
}
@media screen and (min-width: 744px) {
.search-pagination-count {
margin: 0 0 50px;
}
}
.search-sort {
margin-bottom: 40px;
}
.search-sort legend {
font-size: 14px;
font-weight: 700;
letter-spacing: -.5px;
text-transform: uppercase;
}
.search-sort label {
padding: 5px 0;
}
.ugc-gallery {
padding: 50px 0 70px;
}
.ugc-gallery .article-headline,
.ugc-gallery .gform_heading .gform_title,
.gform_heading .ugc-gallery .gform_title {
margin-bottom: 20px;
}
.ugc-gallery .article-subhead {
color: #767676;
font-size: 24px;
margin-bottom: 50px;
}
@media screen and (min-width: 1128px) {
.ugc-gallery .tiled-articles {
-webkit-column-count: 3;
column-count: 3;
}
.ugc-gallery .article-header {
margin-bottom: 50px;
}
.ugc-gallery .article-subhead {
margin-bottom: 0;
}
}
.ugc-article {
padding: 20px;
}
.ugc-article .article-thumbnail {
margin-top: -20px;
}
.ugc-article .article-byline {
text-transform: none;
}
.ugc-article .article-headline,
.ugc-article .gform_heading .gform_title,
.gform_heading .ugc-article .gform_title {
color: #767676;
font-weight: normal;
line-height: 1.25;
margin-bottom: 0;
}
.ugc-article .truncated-headline + .article-headline,
.ugc-article .gform_heading .truncated-headline + .gform_title,
.gform_heading .ugc-article .truncated-headline + .gform_title {
display: none;
}
.ugc-article .article-byline {
color: #484848;
}
.ugc-article .article-byline .article-author,
.ugc-article .article-byline .article-type {
font-size: 16px;
}
.ugc-article .article-type {
float: right;
}
.ugc-article .article-type .icon-twitter {
color: #00aced;
}
.ugc-article .article-type .icon-facebook {
color: #3b5998;
}
.ugc-cta {
background: #f5f5f5;
border: 2px solid #c4c4c4;
margin-bottom: 20px;
padding: 20px;
text-align: center;
}
.ugc-cta p {
font-weight: 700;
margin-bottom: 10px;
}
@media screen and (min-width: 1128px) {
.ugc-cta {
background: none;
border: 0;
padding: 0;
text-align: right;
}
}
.ugc-overlay {
background: #7b0051;
background: rgba(123, 0, 81, 0.95);
max-height: 0;
opacity: 0;
overflow: hidden;
visibility: hidden;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
height: auto;
width: auto;
-webkit-transition: max-height 0s 0.25s, opacity 0.25s ease-in, visibility 0s 0.25s;
-o-transition: max-height 0s 0.25s, opacity 0.25s ease-in, visibility 0s 0.25s;
transition: max-height 0s 0.25s, opacity 0.25s ease-in, visibility 0s 0.25s;
}
.ugc-overlay.ugc-active {
max-height: 9999em;
opacity: 1;
visibility: visible;
z-index: 10;
-webkit-transition: max-height 0s, opacity 0.25s ease-in, visibility 0s 0s;
-o-transition: max-height 0s, opacity 0.25s ease-in, visibility 0s 0s;
transition: max-height 0s, opacity 0.25s ease-in, visibility 0s 0s;
}
.ugc-modal {
display: none;
overflow-y: scroll;
z-index: 11;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.ugc-modal.ugc-active {
display: block;
}
.ugc-modal:hover .article-headline,
.ugc-modal:hover .gform_heading .gform_title,
.gform_heading .ugc-modal:hover .gform_title {
color: #767676;
}
.ugc-modal .btn-link {
color: #ffffff;
font-weight: 700;
text-transform: uppercase;
}
.ugc-modal .btn-link:hover,
.ugc-modal .btn-link:focus {
text-decoration: none;
}
.ugc-modal-inner {
margin: 60px 20px;
position: relative;
}
.ugc-modal-inner::after {
clear: both;
content: "";
display: table;
}
@media screen and (min-width: 744px) {
.ugc-modal-inner {
margin: 60px auto;
width: 570px;
}
}
.ugc-modal-inner .ugc-modal-close {
font-size: 24px;
padding: 0;
position: absolute;
top: -40px;
right: 0;
}
@media screen and (min-width: 1128px) {
.ugc-modal-inner .ugc-modal-close {
right: -40px;
}
}
.ugc-modal-content {
background: #ffffff;
border: 0;
}
@media screen and (min-width: 744px) {
.ugc-modal-content {
padding: 40px;
}
.ugc-modal-content .article-thumbnail {
margin: 0 0 20px;
}
}
.ugc-modal-content .truncated-headline {
display: none;
}
.ugc-modal-content .truncated-headline + .article-headline,
.ugc-modal-content .gform_heading .truncated-headline + .gform_title,
.gform_heading .ugc-modal-content .truncated-headline + .gform_title {
display: block;
}
.ugc-modal-previous {
float: left;
padding-left: 0;
}
@media screen and (min-width: 1128px) {
.ugc-modal-previous {
float: none;
margin-top: -20px;
text-align: right;
position: absolute;
top: 50%;
right: 590px;
}
}
.ugc-modal-next {
float: right;
padding-right: 0;
}
@media screen and (min-width: 744px) {
.ugc-modal-next {
float: none;
margin-top: -20px;
text-align: left;
position: absolute;
top: 50%;
left: 590px;
}
}
.error404 .main-content .search-form,
.content-index .main-content .search-form {
background: #f5f5f5;
padding: 30px 60px 30px 80px;
margin-bottom: 40px;
}
.bg-hackberry {
background-color: #7b0051;
}
.bg-tirol {
background-color: #b4a76c;
}
.no-scroll {
overflow: hidden;
}
*
*
*
* // `data-lazy` uses the plugin's built-in lazy loading.
* 
* ...
*
*
* ...
*
*
*/
/**
* At the mobile breakpoint, the slideshow will display the main slides sliding
* left to right with a row of indicator dots below the main slide stage. The
* upcoming and previous slides should be slightly visible.
*
* At the desktop breakpoint, the slideshow will display the main slides on
* the left and a column of preview thumbnails on the right. The main slides
* switch with a fade transition defined in the JS plugin. Upcoming and
* previous slides are not visible. On the right, the column of thumbnails
* can display at most five thumbnails, along with some margin and possible
* next/previous navigation controls if there are more than five slides
* in the slideshow. The min-height ensures that there is room for this
* thumbnails, while the padding-right keeps the main slide stage from
* overlapping the thumbnail area.
*/
.slideshow {
margin-bottom: 30px;
}
@media screen and (min-width: 744px) {
.slideshow {
min-height: 375px;
padding-right: 87px;
position: relative;
}
}
/**
* .slideshow-slides is the primary stage for the individual slideshow slides.
* Next and previous arrow controls switch between slides. On desktop
* breapoints, indicator dots are added via the JS plugin.
*/
.slideshow-slides {
display: none;
/**
* Next and previous controls display an arrow icon semi-transparently over
* the slide.
* :hover - the background of the control turns rausch.
* .slick-disabled - the control should not respond to mouse events or
* focus when disabled and is visually de-emphasized.
*/
/**
* The navigation dots control. This is a list of button elements. When a
* dot is active, it displays as rausch.
*/
}
.slideshow-rendered .slideshow-slides {
display: block;
}
@media screen and (max-width: 743px) {
.slideshow-slides .slick-list {
overflow: visible !important;
}
}
.slideshow-slides .slideshow-prev,
.slideshow-slides .slideshow-next {
background: rgba(118, 118, 118, 0.5);
border-radius: 20px;
color: #ffffff;
font-size: 24px;
line-height: 40px;
margin-top: -10px;
padding: 0;
text-align: center;
z-index: 2;
height: 40px;
width: 40px;
position: absolute;
top: 50%;
-webkit-transition: background 0.1s ease-in;
-o-transition: background 0.1s ease-in;
transition: background 0.1s ease-in;
}
.slideshow-slides .slideshow-prev:hover,
.slideshow-slides .slideshow-prev:focus,
.slideshow-slides .slideshow-next:hover,
.slideshow-slides .slideshow-next:focus {
text-decoration: none;
}
.slideshow-slides .slideshow-prev:hover,
.slideshow-slides .slideshow-next:hover {
background: rgba(255, 90, 95, 0.5);
}
.slideshow-slides .slideshow-prev:focus,
.slideshow-slides .slideshow-next:focus {
-webkit-box-shadow: 0 0 5px #00a699;
box-shadow: 0 0 5px #00a699;
outline: 0;
}
.slideshow-slides .slideshow-prev.slick-disabled,
.slideshow-slides .slideshow-next.slick-disabled {
opacity: .3;
}
.slideshow-slides .slideshow-prev.slick-disabled:hover,
.slideshow-slides .slideshow-prev.slick-disabled:focus,
.slideshow-slides .slideshow-next.slick-disabled:hover,
.slideshow-slides .slideshow-next.slick-disabled:focus {
background: rgba(118, 118, 118, 0.5);
-webkit-box-shadow: none;
box-shadow: none;
cursor: default;
outline: none;
}
.slideshow-slides .slideshow-prev {
left: 30px;
text-indent: -4px;
}
@media screen and (min-width: 744px) {
.slideshow-slides .slideshow-prev {
left: 10px;
}
}
.slideshow-slides .slideshow-next {
right: 30px;
text-indent: 2px;
}
@media screen and (min-width: 744px) {
.slideshow-slides .slideshow-next {
right: 10px;
}
}
.slideshow-slides .slick-dots {
font-size: 0;
list-style: none;
margin-top: 30px;
padding: 0;
text-align: center;
}
.slideshow-slides .slick-dots li {
display: inline-block;
margin: 0 5px;
}
.slideshow-slides .slick-dots button {
background: #767676;
border: none;
border-radius: 4px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
overflow: hidden;
padding: 0;
height: 7px;
width: 7px;
}
.slideshow-slides .slick-dots .slick-active button {
background: #ff5a5f;
}
/**
* The individual slide element. It should be composed of a child figure
* element with child img and figcaption elements. The figcaption should only
* be visible on the active slide, which is relevant at the mobile breakpoint
* where part of the next and previous slide are visible.
*/
.slideshow-slide {
margin: 0 2px;
}
@media screen and (min-width: 744px) {
.slideshow-slide {
margin: 0;
}
}
.slideshow-slide figure > img {
height: auto;
margin: 0 auto;
max-width: 100%;
}
.slideshow-slide figcaption {
color: #767676;
font-size: 14px;
font-weight: 700;
margin: 6px 6px 0;
opacity: 0;
-webkit-transition: opacity 0.2s ease-in;
-o-transition: opacity 0.2s ease-in;
transition: opacity 0.2s ease-in;
}
.slideshow-slide.slick-current figcaption {
opacity: 1;
}
/**
* A simple indicator added to the figcaption by the slideshow.js component
* that indicates what number the currrent slide is out of the total number
* of slides.
*/
.slideshow-counter {
color: #484848;
display: inline-block;
margin-right: .5em;
}
/**
* The preview thumbnails of all the slides. This displays only on desktop
* breapoints to the right of the main slideshow stage as a vertical carousel.
*/
.slideshow-thumbnails {
display: none;
width: 85px;
position: absolute;
top: 0;
right: 0;
/**
* When there are more than five slides in the slideshow, up (previous) and
* down (next) controls display to navigate within the thumbnail group.
* :hover - the control has a raush background
* .slick-disabled - the control should not respond to mouse events or
* focus when disabled and is visually de-emphasized.
*/
/**
* The thumbnails have a defined width and height and the image within is
* made to fit that size. Non-active slides are less visually emphasized
* via opacity.
* .slick-current - The currently active thumbnail has full opacity.
*/
}
@media screen and (min-width: 744px) {
.slideshow-rendered .slideshow-thumbnails {
display: block;
}
}
.slideshow-thumbnails .slideshow-prev,
.slideshow-thumbnails .slideshow-next {
background: #767676;
border-radius: 0;
color: #ffffff;
display: block;
font-size: 16px;
line-height: 20px;
margin-bottom: 2px;
padding: 0;
text-align: center;
z-index: 2;
height: 20px;
width: 85px;
-webkit-transition: background 0.1s ease-in;
-o-transition: background 0.1s ease-in;
transition: background 0.1s ease-in;
}
.slideshow-thumbnails .slideshow-prev:hover,
.slideshow-thumbnails .slideshow-prev:focus,
.slideshow-thumbnails .slideshow-next:hover,
.slideshow-thumbnails .slideshow-next:focus {
text-decoration: none;
}
.slideshow-thumbnails .slideshow-prev:hover,
.slideshow-thumbnails .slideshow-next:hover {
background: #ff5a5f;
}
.slideshow-thumbnails .slideshow-prev.slick-disabled,
.slideshow-thumbnails .slideshow-next.slick-disabled {
opacity: .3;
}
.slideshow-thumbnails .slideshow-prev.slick-disabled:hover,
.slideshow-thumbnails .slideshow-prev.slick-disabled:focus,
.slideshow-thumbnails .slideshow-next.slick-disabled:hover,
.slideshow-thumbnails .slideshow-next.slick-disabled:focus {
background: #767676;
cursor: default;
outline: none;
}
.slideshow-thumbnails .slideshow-thumbnail {
border: none;
margin-bottom: 2px;
opacity: .5;
overflow: hidden;
height: 65px;
width: 85px;
-webkit-transition: opacity 0.1s ease-in;
-o-transition: opacity 0.1s ease-in;
transition: opacity 0.1s ease-in;
}
.slideshow-thumbnails .slideshow-thumbnail.slick-current {
opacity: 1;
}
.slideshow-thumbnails .slideshow-thumbnail > img {
-o-object-fit: cover;
object-fit: cover;
height: 65px;
width: 85px;
}
/**
* Basic table styling extending that of the o2 framework.
*/
.table th,
.entry-content table th,
.entry-content table th {
color: #767676;
font-size: 14px;
font-weight: normal;
text-align: right;
text-transform: uppercase;
}
.table th:first-of-type,
.entry-content table th:first-of-type,
.entry-content table th:first-of-type {
text-align: left;
}
.table > tbody > tr > td,
.entry-content table > tbody > tr > td,
.entry-content table > tbody > tr > td {
color: #7b0051;
text-align: right;
}
.table > tbody > tr:last-of-type > td,
.entry-content table > tbody > tr:last-of-type > td,
.entry-content table > tbody > tr:last-of-type > td {
border-bottom: 1px solid #dce0e0;
}
.table > tbody > tr > td:first-of-type,
.entry-content table > tbody > tr > td:first-of-type,
.entry-content table > tbody > tr > td:first-of-type {
border-right: 1px solid #dce0e0;
color: #484848;
text-align: left;
}
@media screen and (min-width: 744px) {
.table > tbody > tr > td:first-of-type,
.entry-content table > tbody > tr > td:first-of-type,
.entry-content table > tbody > tr > td:first-of-type {
border-right: none;
}
}
/**
* This displays a collection of .tiled-article elemets as two columns at the
* desktop breakpoint using a masonry-like effect of staggered tiles.
*/
.tiled-articles {
margin-bottom: 30px;
}
@media screen and (min-width: 744px) {
.tiled-articles {
-webkit-column-count: 2;
column-count: 2;
-webkit-column-gap: 20px;
column-gap: 20px;
}
}
/**
* The individual article tiles. They can optionally have a thumbnail image.
* On hover, the entire tile is selectable, with the title text changing to
* rausch, and the tile border turning ebisu.
*
* Sample markup:
*
*
*
*
* ...
*