figure.headervisual { position: relative; /* We need full screen as soon as the grid is fluid */ @media (max-width: 575px) { margin-left: -15px; margin-right: -15px; } @media (min-width: 992px) { &:before { content: " "; background-color: rgba(238, 0, 0, 0.8); width: 36%; max-width: 190px; height: 72px; position: absolute; top: -35px; margin: 0 auto; left: 0; right: 0; } } figcaption { .copyright { font-size: 12px; line-height: 16px; font-weight:300; color: rgb(108, 110, 112); text-align: right; margin-top: 2px; @media (max-width: 575px) { margin-right:15px; } } } } header { h1 { margin-top: 15px; /* FIXME: h1 margin-top is 50px on aggregations */ margin-bottom: 46px; /* FIXME: h1 margin-bottom is 32px on aggregations */ position: relative; } summary { color: #6C6E70; font-family: GTWalsheimVogue, Helvetica, sans; font-size: 16px; font-weight: 300; line-height: 24px; text-align: center; } } .listing-header header { margin-bottom: 40px; margin-top: 25px; h1 { margin-bottom: 0; } summary { margin-top: 32px; } } .content-header { .has-image { header { @media (min-width: 992px) { margin-top: 100px; /* Changed from design (113px) in agreement with caro */ } } } } .content-header header { margin-top: 29px; margin-bottom: 46px; h1:after { content: " "; background-color: rgba(238, 0, 0, 0.8); width: 34px; height: 4px; position: absolute; bottom: -32px; margin: 0 auto; left: 0; right: 0; } p.kicker { font-family: GTWalsheimVogue700, Helvetica, sans; color: #6C6E70; /* FIXME: teaser kicker is #000 */ font-size: 12px; /* FIXME: teaser kicker is 11 */ letter-spacing: 1.8px; line-height: 14px; text-align: center; text-transform: uppercase; font-synthesis: style; } } .content { font-family: Georgia; font-size: 18px; line-height: 32px; margin-bottom: 45px; p,h2 { font-family: Georgia; font-size: 18px; line-height: 32px; } h2 { text-align: left; font-weight: bold; margin-bottom: 0px; } a { border-bottom: 1px solid rgb(238, 0, 0); transition: color 0.1s ease-in 0s; &:hover { color: rgb(238, 0, 0); } } .button { margin-bottom: 30px; } } .content .language, .content .date, header .date, header .author { font-family: GTWalsheimVogue700, Helvetica, sans; font-size: 12px; letter-spacing: 1.8px; line-height: 14px; text-align: center; margin-bottom: 48px; font-synthesis: style; } &.article header .author, &.info header .author, &.page header .author{ margin-bottom: 10px; text-transform: uppercase; } &.article header .date, &.info header .date{ font-weight: normal; margin-bottom: 25px; } .content-header header .date{ font-weight: 300; text-transform: uppercase; } .content .language { color: #9B9B9B; a{ border: none; } .active { color: #000; } } .content .date { text-align: left; position: relative; margin-top: 23px; time{ color: #9B9B9B; } a{ border: none; } i.arrow{ color: rgba(238,0,0,0.8); font-size: 20px; margin: 0 15px; position: relative; top: -2px; } .active { color: #000; &:before { content: " "; background-color: rgba(238, 0, 0, 0.8); width: 34px; height: 4px; position: absolute; top: -22px; } } } .sponsored-content{ background-color: rgba(45,46,47, 0.6); height: 28px; font-family: GTWalsheimVogue, Helvetica, sans; font-size: 13px; line-height: 30px; letter-spacing: 1.8px; color: #fff; padding-left: 1.25rem; text-transform: uppercase; } .advertisement-CA { @media (max-width: 991px) { /* FIXME: why no padding top/bottom */ margin-bottom: 40px; background-color: #eee; margin-left: -15px; margin-right: -15px; } } /* Youtube - Responsive iframe */ section.embed.youtube, section.embed.vimeo{ position: relative; padding-bottom: 56.25%; overflow: hidden; padding-top: 0; height: 0; } section.embed.youtube iframe, section.embed.vimeo iframe{ width: 100%; height: 100%; top: 0; left: 0; position: absolute; } .newsletter-box iframe{ width:100%!important; } .btn { font: 12px/16px GTWalsheimVogue700, "Helvetica Neue", Helvetica, Arial, sans-serif; border:none; border-radius:0; color: #fff; padding: 11px 20px; font-weight: bold; display: inline-block; cursor: pointer; letter-spacing: .9px; text-transform: uppercase; &:focus{ outline:none; } &.btn-primary { background:#EE0000; &:hover{ color: #fff; background-color: rgb(45, 46, 47); border-bottom: none; } } } section { .separator { border-bottom:1px solid #CACCCE; margin-bottom:40px; margin-top:40px; } .headline { font-size:64px; line-height:64px; margin-bottom:63px; @media (max-width: $break-sm) { font-size:32px; line-height:40px; margin-bottom:36px; } span { border-top:10px solid #000000; display:inline-block; padding-top:10px; font-family: DomaineDisplay, Georgia, Times, "Times New Roman", serif } } .separator { border-bottom:1px solid #CACCCE; @media (max-width: $break-sm) { margin-bottom:36px; margin-top:36px; } } .menu-links { .content-list { border-bottom:1px solid #CACCCE; border-top:1px solid #F2F2F2; margin-bottom:63px; padding-bottom:10px; padding-top:7px; } a { text-transform:uppercase; text-decoration: none; border-bottom:none; font: 13px/16px GTWalsheimVogue700, "Helvetica Neue", Helvetica, Arial, sans-serif; margin: 0 3.3vw; } } .menu-image { border-top:1px solid #F2F2F2; border-bottom:1px solid #CACCCE; margin-bottom:63px; padding-top:19px; padding-bottom:19px; @media (max-width: $break-sm) { margin-bottom:36px; .slick-next { right: -2px; } .slick-prev { left: -12px; } } .slick-slide { margin: 0; } .card { margin:0 21px 0 21px; @media (max-width: $break-sm) { margin:0 12px; } img { border-radius: 100%; } .card-body { margin:0; padding-bottom:0; .card-title { margin:0; text-transform:uppercase; text-decoration: none; border-bottom:none; font: 13px/16px GTWalsheimVogue700, "Helvetica Neue", Helvetica, Arial, sans-serif; } } } } .menu-container{ white-space: nowrap; -webkit-overflow-scrolling: touch; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; margin-bottom: -6px !important; overflow-y: hidden; overflow-x: hidden; &::-webkit-scrollbar { display: none; } &::-webkit-scrollbar-thumb, &::-webkit-scrollbar-track, &::-webkit-scrollbar { background-color: transparent; } } .menu-element { display: inline-block; } .menu-indicator{ width: 20px; height: 22px; background-color: #fff; background-position: 0 0; position: absolute; right: 0; display: none; top: calc(50% - 11px); font-size: 16px; line-height: 24px; &:after{ content: "\f054"; font-family: 'Font Awesome 5 Pro'; font-weight: 300; line-height: 1; } } .btn { padding: 15px 30px; margin-right:15px; margin-bottom:15px; } } .headline-border { border-top:1px solid #000000; } .content section h2 { font: 26px/29px GTWalsheimVogue700, "Helvetica Neue", Helvetica, Arial, sans-serif; margin-bottom:17px; } figure { margin-top: 34px; margin-bottom: 38px; &.headervisual { figcaption { margin-top: 0; &:before { display:none; } } } figcaption { font-size: 14px; line-height: 20px; position: relative; margin-top: 38px; &:before { content: " "; display:block; background-color: rgba(238, 0, 0, 0.8); width: 34px; height: 4px; position: absolute; top: -22px; left: 0; } .copyright { font-size: 12px; line-height: 16px; color: rgb(108, 110, 112); } } } .gallery figure { margin-top: 0; }