$highlite-color: #bd9f55; $highlite-color-rgba: rgba(89, 202, 255, 0.75); .img-fill { display: block; height: auto; width: 100%; } .card { margin-bottom: 45px; } h1,h2 { margin-top: 30px; margin-bottom: 20px; } .row.separator { margin-bottom: 32px; } .fb-send-to-messenger{ margin: 40px 0 10px; } hr { margin-bottom: 45px; } p:last-child{ margin-bottom:0; } /* summary is set to a list-elemtn from unknown ecternal css */ body summary { display: block; cursor: default; } .hyphenate{ hyphens: auto; -webkit-hyphens: auto; -moz-hyphens: auto; -ms-hyphens: auto; } nav.tag-menu.gq-container{ padding:25px 15px 13px!important; } nav.tags-menu{ padding:10px 0; a{ padding: 4px; } } nav.tag-listing{ margin-bottom:30px; } ::selection{ background:$highlite-color; color:#070707; } a:focus,button:focus{ outline:none; } .share-icons ul{ padding: 0; margin: 15px 0 0 0; list-style: none; li { display: inline-block; border: 1px solid rgb(201, 204, 202); border-radius: 100%; width: 48px; height: 48px; padding: 2px 9px; text-align: center; font-size:16px; line-height:24px; a{ display: inline-block; font-size: 1.2rem; padding: 8px; .fa-twitter:before { content: "\f099"; margin-left: -3px; } } a:hover{ border-bottom: none; background-color: transparent; } } } .share-icons ul li:hover { border-color: $highlite-color; a{ color:$highlite-color; } } a{ color:inherit; text-decoration:none; &.button1{ border-bottom: 2px solid $highlite-color; } &:hover{ color:#000; border-bottom: 2px solid $highlite-color; background-color: $highlite-color; .card-kicker{ text-decoration: none; } } } .ctaButton{ background-color: $highlite-color; padding:11px 20px; display:inline-block; font: 12px/16px GTWalsheimGQ700, "Helvetica Neue", Helvetica, Arial, sans-serif; border: none; &:hover{ color: $highlite-color; background-color: #000; border-bottom: none; } } .badge{ list-style-type: none; color: rgb(46, 48, 47); display: inline-block; transition-property: color, background-color, border-color; text-transform: uppercase; margin: 0px 8px 8px 0px; font: 500 14px/18px GTWalsheimGQ, "Helvetica Neue", Helvetica, Arial, sans-serif; background: rgb(255, 255, 255); border-width: 1px!important; border-style: solid; border-color: rgb(201, 204, 202)!important; border-image: initial; padding: 6px 12px; text-decoration: none; border-radius: 4px; &.large{ border-radius: 0; padding: 19px 32px; } &:hover, &.active{ background-color: $highlite-color; } } .gq-container { z-index: 2000; position: relative; max-width: 1400px; margin: 0 5vw; @media (min-width: 1540px){ margin: 0 auto; } padding: 0; } #gq-header { box-shadow: rgba(7, 7, 7, 0.06) 0 4px 8px 0; z-index: 2000; position: relative; background-color: #000; .logo-link{ display:block; &:hover{ background-color:transparent; border-bottom:0; } } .logo { max-height: 62px; position: relative; top: -8px; left: calc(-5vw - 4px); width: 128px; float:left; transition: width 0.15s ease-in 0s; } .description-text{ float: left; left: calc(-5vw); position: relative; top:13px; pointer-events: none; cursor: default; @media (min-width: 992px) { top:45px; } } .gq-container { background: #000; min-height: 64px; float:none; clear: both; &.second-line{ min-height:0; } &.navbar-level-2{ min-height: 0; margin: 0 0 0 16px; .nav-link{ color:#fff; background-color: #000; border-color: #fff; } } @media (max-width: 991px) { &.navbar { min-height: inherit; max-width: initial; margin: 0; } } } .navbar-toggler{ border: none; position: relative; top: -16px; left: 12px; } .navbar-wrapper{ margin-left: calc( -5vw - 4px + 128px ); margin-top: -64px; @media (max-width: 991px) { position: relative; left: -15px; top: 10px; margin-left: 0; margin-top: -25px; #gq-mainnav{ padding-top: 11px; padding-bottom: 40px; } } } .d-lg-none.text-right.navbar-light{ width:calc( 100% - 128px ); } .navbar-toggler-icon{ width:64px; height:64px; cursor: pointer; border-radius: 50%; background-color: #bd9f55; background-size: auto 30px; border-width: 0px; border-style: initial; border-color: initial; border-image: initial; padding: 24px 21px; background-image: none; &:after{ position: relative; content: '\f00d'; font-size: 28px; top: -4px; left: 0px; font-family: 'Font Awesome 5 Pro'; color: #000; } } .collapsed{ .navbar-toggler-icon{ &:after{ content: '\f0c9'; font-size: 23px; top: -2px; } } } .navbar { .inner { width: 100%; margin: 0; flex: 0 0 auto; padding-left: 15px; &.noSubNavigation{ border-bottom:0; } } .nav-link { list-style-type: none; color: #fff; box-shadow: none; margin: 0 20px 0 0; font: 16px/20px GTWalsheimGQ700, "Helvetica Neue", Helvetica, Arial, sans-serif; @media (max-width: 991px) { font: 40px/40px GTWalsheimGQ700, "Helvetica Neue", Helvetica, Arial, sans-serif; } text-decoration: none; transition: color 0.15s ease-in 0s; flex: 0 0 auto; padding: 20px 0 5px; &.active{ color: $highlite-color; background-color:transparent; border-bottom:0; } &:hover{ color: $highlite-color; background-color:transparent; border-bottom:0; } } &.navbar-level-1{ .nav-link{ &:hover{ color: $highlite-color; background-color:transparent; border-bottom:0; } } } } .navbar-level-2 { .inner { margin-top: 21px; margin-bottom: 10px; border-bottom: 0; border-top: 0; } ul.navbar-nav { flex-flow: wrap row; } .nav-link { list-style-type: none; color: rgb(46, 48, 47); display: inline-block; transition-property: color, background-color, border-color; text-transform: uppercase; margin: 0px 8px 8px 0px; font: 500 14px/18px GTWalsheimGQ, "Helvetica Neue", Helvetica, Arial, sans-serif; background: rgb(255, 255, 255); border-width: 1px !important; border-style: solid; border-color: rgb(201, 204, 202) !important; border-image: initial; padding: 6px 12px; text-decoration: none; border-radius: 4px; &:hover, &.active { background-color: $highlite-color; border-bottom: 1px solid rgb(201, 204, 202); color: rgb(46, 48, 47); } } } } header{ margin-bottom: 40px; h1 { font: 48px/52px GTWalsheimGQ900, "Helvetica Neue", Helvetica, Arial, sans-serif; margin: 40px 0; } summary { color: #000; font-size: 16px; font-weight: 300; line-height: 24px; text-align: center; } } #gq-footer { padding-top: 56px; padding-bottom: 32px; background-color: #070707; .logo { background-color: rgba(255, 255, 255, 0.1); overflow: hidden; margin-bottom: 24px; .gq-container{ margin: 0; } svg { margin: -12px 0 -15px; @media (min-width: 575px) { max-width: 450px; } } } .social { position: absolute; top: calc(50% - 44px); right: calc(50% - 103px); @media (min-width: 992px) { right: 0; } li.nav-item a.nav-link { font-size: 16px; border: 1px solid #fff; border-radius: 23px; height: 46px; width: 46px; text-align: center; padding-top: 10px; margin: 6px; &:hover{ border-color: $highlite-color; background-color: transparent; } i{ color: $highlite-color!important; } } } .cn-logo { margin-bottom: 11px; } .copyright { color: #caccce; font-size: 11px; line-height: 16px; } #gq-footernav { margin-bottom: 20px; li.nav-item a.nav-link { color: #fff; font-weight: 500; font-size: 12px; line-height: 20px; padding: 3px 1rem; font: 14px/18px "GTWalsheimGQ","Helvetica Neue","Helvetica","Arial",sans-serif; &:hover{ color:#909391; background-color: transparent; border:none; } } } } .four-teasers{ h3{ font:48px/52px GTWalsheimGQ900, "Helvetica Neue", Helvetica, Arial, sans-serif; @media (max-width: 767px){ font:40px/44px GTWalsheimGQ900, "Helvetica Neue", Helvetica, Arial, sans-serif; } margin: 50px 0 50px; text-align:center; text-transform: uppercase; } h2{ margin-top:40px; font: 72px/68px GTWalsheimGQ900, "Helvetica Neue", Helvetica, Arial, sans-serif; @media (max-width: 767px){ font:40px/38px GTWalsheimGQ900, "Helvetica Neue", Helvetica, Arial, sans-serif; } padding-bottom: 23px; hyphens:auto; word-wrap: break-word; text-transform: uppercase; @media (max-width: 767px){ font: 40px/38px GTWalsheimGQ900, "Helvetica Neue", Helvetica, Arial, sans-serif; margin-bottom:-3px; } } .top-highlight{ margin-bottom:56px; .card-body{ width: 63.333%; margin-left: auto; margin-right: 0px; margin-top:-56px; padding:32px 0 0 32px; @media (max-width: 979px){ margin-left: 0; margin-right: auto; margin-top:-32px; width:90%; } h5{ font:48px/52px GTWalsheimGQ700, "Helvetica Neue", Helvetica, Arial, sans-serif; @media (max-width: 979px){ font-size: 32px; line-height: 36px; } } } .ctaButton{ padding:20px 30px; } } } nav.more{ width: 100%; text-align: center; margin: 0 0 20px; } .view-header{ text-align: center; .buttons{ padding-top:30px; } h3{ font:48px/52px GTWalsheimGQ900, "Helvetica Neue", Helvetica, Arial, sans-serif; @media (max-width: 767px){ font:40px/44px GTWalsheimGQ900, "Helvetica Neue", Helvetica, Arial, sans-serif; } text-align: center; margin: 0 0 10px; } } .block.partner{ h4{ font: 32px/40px GTWalsheimGQ900, "Helvetica Neue", Helvetica, Arial, sans-serif; text-align: center; margin: 50px 0 30px; } .card{ border:1px solid #777; border-radius: 0; img{ width:75%; margin: 2% auto; } } } .content{ margin-bottom: 170px; @media (max-width: 767px){ margin-bottom: 40px; } } .content.video{ margin-bottom: -60px; } .gallery{ a:hover{ color:#000; border-bottom: none; background-color: #fff; } figcaption{ color: #000000; font-family: GTWalsheimGQ, "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 16px; line-height: 18px; padding:0 25px; .copyright{ color: #909391; margin: 0px; font: 14px/18px GTWalsheimGQ, "Helvetica Neue", Helvetica, Arial, sans-serif; text-align: right; padding:5px 0 10px; } } } .slick-slider { margin: 50px -15px 30px; &.slick-lightbox-slick{ margin:0; } .slick-lightbox-slick-img{ max-width: 100%; } .slick-lightbox-slick-caption{ max-width: 800px; display: inline-block; } } .slick-slide .distancer{ margin: 0 15px; display:block; position: relative; &:before{ font-family: 'Font Awesome 5 Pro'; content: "\f31d"; color:#fff; text-shadow: 1px 1px 2px #000; font-size:30px; display: block; position: absolute; bottom:3px; right:7px; } } .slick-prev, .slick-next{ left: -30px; z-index:10; top:125px; height:50px; width:25px; &:before{ font-family: 'Font Awesome 5 Pro'; content: "\f053"; font-size:50px; font-weight: 100; color:#000; opacity: 1; } } .slick-next { left:auto; right: -26px; &:before{ content: "\f054"; } } .slick-slider *:focus{ outline:none; } .slick-lightbox-slick{ .slick-prev, .slick-next{ left: 15px; z-index:10; top:50%; height:50px; width:25px; &:before{ color:#fff; } } .slick-next { left:auto; right: 15px; &:before{ content: "\f054"; } } } .slick-lightbox-close{ right: 30px; &:before { font-size: 40px; opacity: 1; } } .kicker, .kicker-soft{ font: 12px/16px GTWalsheimGQ, "Helvetica Neue", Helvetica, Arial, sans-serif; text-decoration: none !important; margin-bottom: 4px; text-transform: uppercase; background-image: linear-gradient(to right, $highlite-color 0%, $highlite-color 100%); background-repeat: repeat-x; background-position: 0px calc(1em - 4px); display: inline; letter-spacing: .9px; } .kicker-soft{ background-image: linear-gradient(to right, $highlite-color-rgba 0%, $highlite-color-rgba 100%); } @media (max-width: 575px) { .four-teasers .top-highlight .card .card-img-top { margin-left: -15px; margin-right: -15px; width: calc( 100% + 30px ); } .four-teasers .top-highlight .card-body{ margin-left:-16px; width: calc( 100% + 16px ); } .four-teasers h3 { font: 32px/36px GTWalsheimGQ900, "Helvetica Neue", Helvetica, Arial, sans-serif; } } .container.content-footer.four-teasers{ padding-top:10px; margin-bottom: 80px; } .container.content.video{ margin-top:100px; } summary { display: block; cursor: default; } .backlink{ padding-left:66px; display: inline-block; &:before{ content:''; background: $highlite-color url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAABCklEQVQ4jZXSsUoDQRAG4O9CEAnBIliKSCqxEMkjiA8g1j6CpZXYik+R0ipYiIUIdvaKCEJqKwURERGRc222WM6NdzdXHTd89+/MFkFQV4Wig2UMgnCTbQoNnohcYorNbE8DZAUXKBFwh/VWUETO8R2RMiYbNoYwwCRBAu6xik4jKM7kNDlOiWuszfxxBunjBF+VJKNckiyERYwrM7nFqG4pncptGGIL3fj+gys81Fy1P4l62MN7cqwn7KL774ZnDHsfLwn2GrH5tlAfh/hMsEfstIIi1sUB3irJtjHXGEqSHeEjwabYaAUl2HE8ZokzLLWGItaLySY5JAiK2FhbhWIhbu05+70pVFe/MnWC7+9DUgcAAAAASUVORK5CYII=') no-repeat center center; border-radius: 100%; height:46px; width:46px; position: relative; top:34px; left:-66px; display: block; } &:hover{ background: none; border: none; } } .hor-center-container { -webkit-box-align: center; -webkit-align-items: center; align-items: center; } //content .listing-header{ margin-bottom: 10px; margin-top: 10px; h1 { margin-bottom: 0; text-transform: uppercase; } summary { margin-top: 32px; } } .container.content-header { padding-top:25px; @media (max-width: 575px){ padding-top:0; } &.video{ padding-top:0; } .headervisual{ figcaption{ color: rgb(144, 147, 145); margin: 0px; font: 12px/16px GTWalsheimGQ, "Helvetica Neue", Helvetica, Arial, sans-serif; width: 56.25%; text-align: right; padding-top:5px; @media (max-width: 991px) { width: 100%; padding-right:15px; } } } } header{ h1{ font: 56px/60px GTWalsheimGQ700, "Helvetica Neue", Helvetica, Arial, sans-serif; @media (max-width: 767px){ font:32px/36px GTWalsheimGQ900, "Helvetica Neue", Helvetica, Arial, sans-serif; } color: rgb(7, 7, 7); margin: 8px 0px 0px; } .author{ font: 12px/16px GTWalsheimGQ700, "Helvetica Neue", Helvetica, Arial, sans-serif; color: rgb(144, 147, 145); margin-top: 20px; } .date{ font: 11px/16px GTWalsheimGQ, "Helvetica Neue", Helvetica, Arial, sans-serif; color: rgb(144, 147, 145); } summary{ font: 16px/24px GTWalsheimGQ, "Helvetica Neue", Helvetica, Arial, sans-serif; padding:24px 0; text-align: left; } .share-icons ul { margin:0; } } .container.content{ font: 18px/32px Georgia, serif; margin-bottom: 25px; p > a { text-decoration:underline; transition: color 0.1s ease-in 0s, background-color 0.1s ease-in 0s, border-bottom-color 0.1s ease-in 0s; text-decoration: none; border-bottom: 2px solid $highlite-color; &:hover{ border-bottom-color: $highlite-color; background-color: $highlite-color; } &.ctaButton{ border-bottom:none; &:hover{ color: $highlite-color; background-color: #000; border-bottom: none; } } } h2{ color: rgb(7, 7, 7); list-style-type: none; margin-top: 24px; margin-bottom: 3px; font: 26px/34px GTWalsheimGQ900, "Helvetica Neue", Helvetica, Arial, sans-serif; } h3.selectionShareable{ color: rgb(7, 7, 7); list-style-type: none; margin-top: 0px; margin-bottom: 6px; font: 28px/32px GTWalsheimGQ900, "Helvetica Neue", Helvetica, Arial, sans-serif; } section, p.MsoNormal{ margin-bottom:24px; } section figure figcaption{ &:before{ content: ""; position: absolute; background-color: $highlite-color; width: 6px; height: 16px; display: inline-flex; margin-bottom: 12px; left: 0; top:5px; } overflow-wrap: break-word; margin: 0; font: 14px/18px GTWalsheimGQ, "Helvetica Neue", Helvetica, Arial, sans-serif; padding-left: 15px; padding-top:5px; position: relative; .copyright{ float: right; color: rgb(144, 147, 145); } } .article-tags{ padding: 32px 0px 24px; } .infobox{ > p:first-child { color: #070707; list-style-type: none; margin-top: 0; margin-bottom: 6px; font: 22px/26px GTWalsheimGQ700, "Helvetica Neue", Helvetica, Arial, sans-serif; } ul{ position: relative; list-style-type: disc; list-style-position: outside; margin-bottom: 15px; padding-left: 15px; li{ margin-bottom: 5px; p{ margin:0; padding:0; } } } } .embed.facebook{ iframe{ width:100%; } } section blockquote { p { font-style: italic; font-size: 130%; line-height: 130%; padding: 0 0 0 20px; margin-bottom: 0; &:before { content: '”'; position: relative; display: inline-block; top: 28px; width: 32px; font-size: 60px; } } footer { padding-left: 20px; font-style: italic; font-size: 90%; } } section.st-html{ iframe[src^='https://condenastverlag.wufoo.com/embed/']{ margin:30px 0 0 -1%; } } } .container.container-main{ p > a { transition: color 0.1s ease-in 0s, background-color 0.1s ease-in 0s, border-bottom-color 0.1s ease-in 0s; text-decoration: none; border-bottom: 2px solid $highlite-color; &:hover{ border-bottom-color: $highlite-color; background-color: $highlite-color; } } } .singleblock{ margin-bottom:70px; @media (max-width: 767px) { margin-bottom:40px; } } .keyvisual{ width:100%; min-height:50vh; &.large{ @media (max-width: 500px) { min-height: 40vh; } @media (min-width: 700px) and (max-width: 1199px) { min-height: 75vh; background-size: 100% 100%; } @media (min-width: 1200px) { min-height: 80vh; background-size: 100% 100%; } } background-repeat: no-repeat; background-position: center; background-size: cover; background-attachment: fixed; @media (max-width: 767px) { background-attachment: scroll; } -webkit-box-align: center; -webkit-align-items: center; align-items: center; text-align: center; display: -webkit-box; display: -ms-flexbox; display: flex; .overlay{ margin:0 auto; max-width: 75%; h2{ color:#ffffff; text-transform: uppercase; font:48px/52px GTWalsheimGQ900, "Helvetica Neue", Helvetica, Arial, sans-serif; @media (max-width: 767px){ font:40px/44px GTWalsheimGQ900, "Helvetica Neue", Helvetica, Arial, sans-serif; } } p{ color:#ffffff; max-width: 500px; font-size: 16px; line-height:18px; } img{ max-width: 100vmin; width: 100% } } } .block.teaserlist{ margin-top: 60px; @media (max-width: 767px){ margin-top: 30px; } } .video-sub{ background-color: #000; margin-bottom: 110px; margin-top: -24px; color: #fff; padding: 10px 0 60px; h1{ font-size: 56px; line-height:60px; font-family: GTWalsheimGQ700; @media (max-width: 575px){ font-size: 32px; line-height:36px; } } } .container.articles, .container.competitions{ margin-top:100px; } .quote-content { background-color: #fff; color: #000; text-align: center; margin: 0 0 45px 0; border-left: none; padding: 0; font: 26px/34px GTWalsheimGQ900, "Helvetica Neue", Helvetica, Arial, sans-serif; .spacer { font-size: 50px; line-height: 80px; &:after { content: ''; width: 1px; height: 75px; border-right: 2px solid #000; position: relative; top: 0; left: 0px; } } .cite{ font: 18px/32px Georgia, serif; } } @media (min-width: 992px){ .container.content-header { padding-top:45px; padding-bottom:45px; &.video{ padding-top:0; } .headervisual{ figcaption{ transform: rotate(-90deg) translateY(12px) translateX(100%); position: absolute; right: 15px; bottom: 7px; transform-origin: right center 0px; text-align: left; width: 56.25%; padding: 0px; margin: 0px; color: rgb(144, 147, 145); margin: 0px; font: 12px/16px GTWalsheimGQ, "Helvetica Neue", Helvetica, Arial, sans-serif; } } header{ background-color: #fff; padding-top: 40px; padding-right: 40px; &.noOffsetTop{ margin-top: 0; } h1{ font: 56px/60px GTWalsheimGQ700, "Helvetica Neue", Helvetica, Arial, sans-serif; } .author{ font: 11px/16px GTWalsheimGQ700, "Helvetica Neue", Helvetica, Arial, sans-serif; } .date{ font: 12px/16px GTWalsheimGQ, "Helvetica Neue", Helvetica, Arial, sans-serif; } summary{ font: 16px/24px GTWalsheimGQ, "Helvetica Neue", Helvetica, Arial, sans-serif; } } } } .navbar-collapse.show{ height:100vh; } .collapsing{ transition:none; } @media (max-width: 575px){ figure.headervisual { margin-left: -15px; margin-right: -15px; } } figure.singleImage{ margin-bottom:24px; figcaption { color: #000000; font-family: GTWalsheimGQ, "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 16px; line-height: 18px; padding: 0 10px; .copyright { color: #909391; margin: 0px; font: 14px/18px GTWalsheimGQ, "Helvetica Neue", Helvetica, Arial, sans-serif; text-align: right; padding: 5px 0 10px; } } }