Files
nhgooi.nl/public/css/style.css
2024-03-15 17:46:43 +01:00

1119 lines
21 KiB
CSS
Vendored
Raw Blame History

This file contains invisible Unicode characters
This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap");
.clearfix::after {
display: block;
clear: both;
content: "";
}
body {
margin: 0;
padding: 0;
}
.body_container {
max-width: 1170px;
margin: 0 auto;
padding: 67px 0;
background-color: #f9f9f9;
}
.header_container {
max-width: 1170px;
margin: 0 auto;
}
.grey_background {
background-color: #f9f9f9;
}
.content_container {
padding-right: 50px;
}
.sidebar {
width: calc(300px + var(--bs-gutter-x));
}
.btn {
display: block;
width: calc(100% - 78px);
padding: 10px 39px 10px 39px;
border-radius: 3px;
background-image: linear-gradient(to right, #0f259d, #5ba8f4);
font-family: Nunito, serif;
font-size: 14px;
font-weight: bold;
line-height: 0.93;
text-align: center;
color: #fff;
margin-bottom: 10px;
text-decoration: none;
text-transform: uppercase;
}
.btn.auto_width {
width: fit-content;
margin: 0 auto;
}
.header {
height: 110px;
}
.header .logo {
float: left;
margin-top: 18px;
}
.header .logo img {
height: 75px;
}
.menu_container {
height: 75px;
margin-bottom: 20px;
background-image: linear-gradient(to right, #0102b0, #4090e3);
}
.menu_container nav {
display: flex;
}
.menu_container nav > div {
height: 30px;
background: white;
flex-grow: 1;
border: 1px solid white;
}
.menu_container .menu {
margin: 0;
padding: 0;
list-style: none;
overflow: hidden;
position: relative;
z-index: 0;
margin: 0px -1px;
width: 1170px;
margin: 0 auto;
}
.menu_container .menu > li {
float: left;
margin: 0px -1px;
}
.menu_container .menu > li.has_submenu {
position: relative;
}
.menu_container .menu > li ul {
display: none;
}
.menu_container .menu > li a {
display: block;
font-family: Nunito, serif;
color: #1a1a1a;
font-weight: bold;
font-size: 14px;
text-align: center;
padding: 5px 20px 5px 40px;
text-decoration: none;
background: white;
text-transform: uppercase;
}
.menu_container .menu > li.selected a, .menu_container .menu > li:hover a, .menu_container .menu > li.hover a {
color: white;
background: transparent;
position: relative;
}
.menu_container .menu > li.selected a:before, .menu_container .menu > li:hover a:before, .menu_container .menu > li.hover a:before {
content: "";
display: block;
width: 33px;
height: 25px;
background-image: URL("/images/menu-corner-1.svg");
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
.menu_container .menu > li.selected a:after, .menu_container .menu > li:hover a:after, .menu_container .menu > li.hover a:after {
content: "";
display: block;
width: 12px;
height: 15px;
background-image: URL("/images/menu-corner-2.svg");
position: absolute;
bottom: 0;
right: -1px;
z-index: 1;
}
.menu_container .menu > li:last-child {
margin-left: 10px;
}
.menu_container .menu > li:last-child:after {
content: " ";
z-index: -1;
background: white;
position: absolute;
top: 0;
width: 100%;
height: 100%;
margin-left: -10px;
}
.top_menu_container {
height: 50px;
max-width: 1170px;
margin: 0 auto;
}
.top_menu_container ul {
float: right;
margin: 0;
padding: 0;
list-style: none;
}
.top_menu_container ul li {
float: left;
padding: 6px 19px;
margin: 8px;
border-right: 1px solid #fff;
}
.top_menu_container ul li:last-child {
border: none;
}
.top_menu_container ul li:nth-child(2) {
padding: 0 19px;
}
.top_menu_container ul li a {
float: left;
font-family: Nunito, serif;
font-size: 14px;
font-weight: bold;
text-align: right;
color: #fff;
text-decoration: none;
text-transform: uppercase;
}
.top_menu_container ul li a i {
font-size: 18px;
position: relative;
top: 2px;
margin-left: 5px;
}
.top_menu_container ul li .search_form {
float: left;
overflow: hidden;
height: 34px;
margin-right: 10px;
}
.top_menu_container ul li .search_form .search_input {
border: 1px solid #efefef;
border-radius: 5px;
background-color: #fff;
height: 29px;
font-family: Montserrat, serif;
font-size: 16px;
line-height: 1.25;
color: #1a1a1a;
}
.top_menu_container ul li .search_form .search_submit {
float: right;
margin: 6px;
}
.top_menu_container ul li .search_button {
margin-top: 6px;
}
.menu-submenu {
position: absolute;
}
.menu-submenu > a {
display: block;
height: 30px;
}
.menu-submenu ul {
margin: 0;
padding: 0;
list-style: none;
}
.menu-submenu ul a {
display: block;
font-family: Nunito, serif;
font-size: 14px;
font-weight: bold;
color: #1a1a1a;
text-decoration: none;
padding: 15px 0;
border-bottom: 1px solid #f8f8f8;
text-transform: uppercase;
}
.menu-submenu > ul {
padding: 20px;
border-radius: 3px;
box-shadow: 0 0 15px 0 rgba(35, 31, 32, 0.1);
background-color: #fff;
margin-left: 20px;
width: max-content;
display: none;
}
.menu-submenu > ul li ul {
display: none;
}
.menu-submenu > ul li ul li {
padding-left: 10px;
}
.menu-submenu > ul li.has_submenu {
position: relative;
}
.menu-submenu > ul li.has_submenu:after {
-webkit-font-smoothing: antialiased;
display: var(--fa-display, inline-block);
font-style: normal;
font-variant: normal;
line-height: 1;
text-rendering: auto;
font-family: "Font Awesome 6 Free";
font-weight: 900;
content: "\f0d7";
position: absolute;
right: 0;
top: 15px;
-webkit-transform: rotate(270deg);
transform: rotate(270deg);
}
.menu-submenu > ul li.has_submenu.opened:after {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
.header .now-playing-header {
float: right;
}
.now-playing-header {
font-size: 16pt;
font-family: "Roboto Condensed", serif;
font-weight: 300;
background: rgba(246, 246, 246, 0.4);
width: 728px;
color: #787878;
text-align: center;
display: block;
overflow: hidden;
position: relative;
margin: auto;
padding-top: 10px;
padding-bottom: 30px;
}
.now-playing-header .title {
font-weight: bold;
font-size: 120%;
}
.now-playing-header .title, .now-playing-header .artist {
padding: 3px;
}
.now-playing-header .controls {
font-size: 75%;
bottom: 0;
position: absolute;
padding: 3px;
width: 100%;
}
.now-playing-header .controls ul {
margin: 0;
}
.now-playing-header .controls ul li {
display: inline-block;
}
.now-playing-header .controls ul li a {
line-height: 120%;
font-size: 80%;
color: #ABABAB;
display: block;
padding: 4px;
margin-left: 5px;
margin-right: 5px;
}
.now-playing-header .controls ul li a label {
cursor: pointer;
}
.blog_grid .row, .blog_grid .row > * {
padding: 0;
margin: 0;
}
.blog_grid .row {
height: 100%;
}
.blog_grid .post {
position: relative;
height: 100%;
}
.blog_grid .post img {
width: 100%;
height: 100%;
object-fit: cover;
filter: brightness(70%);
}
.blog_grid .post.small {
height: 50%;
}
.blog_grid .post .slider_content_box {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 15px;
}
.blog_grid .post .slider_content_box .post_details {
margin: 0;
padding: 0;
list-style: none;
}
.blog_grid .post .slider_content_box .post_details .category a {
padding: 6px 11px 7px;
border-radius: 3px;
background-image: linear-gradient(to right, #0d1ca3, #45aaf8);
font-family: Nunito, serif;
font-size: 10px;
font-weight: bold;
text-align: center;
color: #fff;
text-decoration: none;
text-transform: uppercase;
}
.blog_grid .post .slider_content_box h2, .blog_grid .post .slider_content_box h5 {
margin: 15px 0 0 0;
}
.blog_grid .post .slider_content_box h2 a, .blog_grid .post .slider_content_box h5 a {
font-family: Montserrat, serif;
font-size: 30px;
font-weight: 600;
line-height: 1;
color: #fff;
text-decoration: none;
}
.blog_grid .post .slider_content_box h5 a {
font-size: 16px;
line-height: 1.17;
}
.blog_grid .post .slider_content_box .post_date {
display: block;
height: 30px;
font-family: Nunito, serif;
font-size: 12px;
font-weight: 500;
line-height: 3.17;
letter-spacing: normal;
text-align: left;
color: #666;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
color: #fff;
}
.box_header {
border-bottom: 1px solid #efefef;
padding-right: 20px;
}
.box_header span {
font-family: Nunito, serif;
font-size: 20px;
font-weight: bold;
color: #0f259d;
border-bottom: 3px solid #0f259d;
display: inline-block;
text-transform: uppercase;
height: 30px;
}
.box_header.extra_small span {
font-size: 12px;
}
.box_header.small span {
font-size: 14px;
}
.box_header.medium span {
font-size: 18px;
}
.box {
display: inline-block;
width: auto;
padding: 30px 23px 30px 30px;
border-radius: 3px;
box-shadow: 0 0 15px 0 rgba(35, 31, 32, 0.1);
background-color: #fff;
margin-bottom: 50px;
}
.box.full-width {
width: calc(100% - 60px);
}
.tabs {
display: flex;
justify-content: space-between;
}
.tabs.fit_content {
width: fit-content;
}
.tabs .box_header {
padding-right: 20px;
}
.tabs .box_header:last-of-type {
padding-right: 0;
}
.tabs .box_header span {
color: #999;
border-bottom: none;
cursor: pointer;
padding-bottom: 3px;
}
.tabs .box_header.extra_small span {
font-size: 12px;
}
.tabs .box_header.small span {
font-size: 14px;
}
.tabs .box_header.medium span {
font-size: 18px;
}
.tabs .box_header.active span, .tabs .box_header:hover span {
color: #0f259d;
border-bottom: 3px solid #0f259d;
padding-bottom: 0;
}
.tab_content {
display: none;
padding: 20px 23px 20px 20px;
}
.tab_content.active {
display: block;
}
.blog {
margin: 0;
padding: 0;
list-style: none;
}
.blog .post {
margin-bottom: 27px;
}
.blog .post img {
width: 100%;
height: 100%;
object-fit: cover;
}
.blog .post .post_title {
margin: 0;
font-family: Montserrat, serif;
font-size: 14px;
font-weight: 600;
line-height: 1.43;
color: #1a1a1a;
}
.blog .post .post_title a {
text-decoration: none;
display: inline-block;
color: #1a1a1a;
}
.blog .post .col-8 {
padding: 0;
}
.blog .post .post_date {
display: block;
height: 30px;
font-family: Nunito, serif;
font-size: 12px;
font-weight: 500;
line-height: 3.17;
letter-spacing: normal;
text-align: left;
color: #666;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.blog .post .disabled {
color: #A1A1A1;
cursor: not-allowed;
}
.blog .post .post_body {
font-family: Nunito, serif;
font-size: 15px;
line-height: 1.6;
color: #282828;
}
.sidebar .box {
width: calc(100% - 43px);
padding: 20px 23px 20px 20px;
}
.radio_box {
padding: 15px 23px 15px 15px;
width: calc(100% - 38px);
}
.radio_box h2 {
font-family: Montserrat, serif;
font-size: 20px;
font-weight: 600;
line-height: 1.35;
color: #1a1a1a;
}
.radio_box .post_date {
display: block;
height: 30px;
font-family: Nunito, serif;
font-size: 12px;
font-weight: 500;
line-height: 3.17;
letter-spacing: normal;
text-align: left;
color: #666;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.radio_box p {
font-family: Nunito, serif;
font-size: 14px;
font-weight: 500;
line-height: 1.57;
text-align: left;
color: #666;
}
.contact_box {
position: relative;
}
.contact_box .logo-whatsapp {
position: absolute;
right: 0;
top: 0;
}
.contact_box h2 {
font-family: Montserrat, serif;
font-size: 24px;
font-weight: 600;
line-height: 1.17;
color: #282828;
margin-top: 0;
padding-right: 60px;
}
.contact_box p {
font-family: Nunito, serif;
font-size: 14px;
font-weight: 500;
line-height: 1.57;
color: #666;
}
.contact_box .read_more {
font-family: Nunito, serif;
font-size: 14px;
font-weight: 500;
line-height: 1.57;
color: #0f259d;
text-transform: uppercase;
}
.featured img {
width: 100%;
}
.featured h2 {
margin: 0;
}
.featured h2 a {
font-family: Montserrat, serif;
font-size: 20px;
font-weight: 600;
line-height: 1.35;
text-align: left;
color: #1a1a1a;
text-decoration: none;
}
.featured .sub_title {
width: 100%;
display: flex;
}
.featured .sub_title .program_name {
font-family: Nunito, serif;
font-size: 12px;
font-weight: 500;
line-height: 3.17;
text-align: left;
color: #000;
margin-right: 10px;
text-decoration: none;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.featured .sub_title .post_date {
display: block;
height: 30px;
font-family: Nunito, serif;
font-size: 12px;
font-weight: 500;
line-height: 3.17;
letter-spacing: normal;
text-align: left;
color: #666;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.featured p {
font-family: Nunito, serif;
font-size: 14px;
font-weight: 500;
line-height: 1.57;
text-align: left;
color: #666;
margin: 10px 0;
}
.podcast_items ul {
margin: 0;
padding: 0;
list-style: none;
}
.podcast_items ul.row {
margin-top: calc(-1 * var(--bs-gutter-y));
margin-right: calc(-0.5 * var(--bs-gutter-x));
margin-left: calc(-0.5 * var(--bs-gutter-x));
}
.podcast_items ul li {
margin-bottom: 25px;
}
.podcast_items ul li h2 {
margin: 0;
}
.podcast_items ul li h2 a {
font-family: Montserrat, serif;
font-size: 14px;
font-weight: 600;
line-height: 1.43;
text-align: left;
color: #1a1a1a;
text-decoration: none;
}
.podcast_items ul li .sub_title {
width: 100%;
display: flex;
}
.podcast_items ul li .sub_title .program_name {
font-family: Nunito, serif;
font-size: 12px;
font-weight: 500;
line-height: 3.17;
text-align: left;
color: #000;
margin-right: 10px;
text-decoration: none;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.podcast_items ul li .sub_title .post_date {
display: block;
height: 30px;
font-family: Nunito, serif;
font-size: 12px;
font-weight: 500;
line-height: 3.17;
letter-spacing: normal;
text-align: left;
color: #666;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.bread_crumb {
height: 38px;
margin: 0;
padding: 0;
list-style: none;
}
.bread_crumb li {
float: left;
font-family: Nunito, serif;
font-size: 12px;
font-weight: 500;
line-height: 3.17;
text-align: left;
color: #666;
margin-right: 5px;
}
.bread_crumb li a {
color: #666;
text-decoration: none;
}
.bread_crumb li i {
font-size: 8px;
}
.page_title {
margin: 17px 0;
font-family: Montserrat, serif;
font-size: 40px;
font-weight: 600;
line-height: 1.15;
text-align: left;
color: #282828;
}
.post_container {
max-width: 1170px;
margin: 0 auto;
padding: 32px 0;
}
.post_container > .col-8 {
width: calc(66.66666667% - 20px);
margin-right: 20px;
}
.post_container .bread_crumb {
border-bottom: 1px solid #efefef;
padding-bottom: 18px;
}
.post_container .post_tags {
margin: 0;
padding: 0;
list-style: none;
height: 31px;
margin-top: 20px;
}
.post_container .post_tags li {
float: left;
margin-right: 10px;
}
.post_container .post_tags li a {
display: block;
padding: 6px 15px 7px;
border-radius: 3px;
background-image: linear-gradient(to left, #0d1ca3, #45aaf8);
font-family: Nunito, serif;
font-size: 10px;
font-weight: bold;
text-align: center;
color: #fff;
text-decoration: none;
text-transform: uppercase;
}
.post_container .post_body {
width: 100%;
font-family: Nunito, serif;
font-size: 15px;
line-height: 1.6;
color: #282828;
}
.post_container .post_body h3 {
font-size: 15px;
}
.post_container .post_body .sentence {
font-size: 12px;
font-style: italic;
line-height: 3.17;
text-align: right;
color: #585858;
display: block;
width: 100%;
}
.post_container .post_body .sentence span {
padding: 0 5px;
}
.post_container .post_body blockquote {
border-left: 3px solid #5ba8f4;
margin-left: 0;
padding-left: 20px;
font-family: Lato, serif;
font-size: 30px;
font-style: italic;
line-height: 1.27;
color: #5ba8f4;
}
.post_container .post_body blockquote .author {
font-family: Nunito, serif;
font-size: 12px;
font-style: normal;
line-height: 3.17;
color: #585858;
}
.post_container .post_body .post_details {
margin: 0;
padding: 0;
list-style: none;
}
.post_container .post_body .post_details li {
float: left;
margin-right: 10px;
font-family: Nunito, serif;
font-size: 12px;
font-weight: 500;
line-height: 3.17;
color: #666;
}
.post_container .post_body .post_details li a {
color: #666;
text-decoration: none;
}
.post_container .post_body .post_details li i {
margin-right: 4px;
}
.post_container .post_body .post_image img, .post_container .post_body video, .post_container .post_body .mejs__video {
width: calc(100% + 53px);
margin: 0 -23px 0 -30px;
}
.post_container .post_body .mejs__video, .post_container .post_body video {
width: calc(100% + 53px) !important;
}
.post_container .info {
padding: 1em;
color: #3E3E3E;
line-height: 150%;
border-radius: 10px;
margin: 1em;
}
.post_container .info h2 {
text-overflow: ellipsis;
overflow: hidden;
margin-top: 3px;
clear: both;
}
.post_container .info a {
color: #ED1C24;
}
#schedule a {
text-decoration: none;
}
#schedule .program-title {
font-family: Montserrat, serif;
font-size: 14px;
font-weight: 600;
line-height: 1.43;
color: #1a1a1a;
}
#schedule .program-times {
display: block;
height: 30px;
font-family: Nunito, serif;
font-size: 12px;
font-weight: 500;
line-height: 3.17;
letter-spacing: normal;
text-align: left;
color: #666;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
#schedule .no-results, #schedule .loading {
font-family: Montserrat, serif;
font-size: 14px;
font-weight: 600;
line-height: 1.43;
color: #1a1a1a;
text-align: center;
padding: 20px;
}
#schedule .no-results span, #schedule .loading span {
margin-right: 10px;
}
.page_container {
max-width: 1170px;
margin: 0 auto;
background-color: #fff;
width: calc(100% - 270px);
padding: 32px 135px;
}
.page_body {
font-family: Nunito, serif;
font-size: 15px;
line-height: 1.6;
color: #282828;
}
.action_button {
text-decoration: none;
color: #282828;
}
.action_button .fa {
margin-right: 10px;
}
.input_container {
border: 1px solid #efefef;
border-radius: 5px;
background-color: #fff;
display: flex;
height: 48px;
font-family: Montserrat, serif;
font-size: 16px;
line-height: 1.25;
color: #1a1a1a;
}
.input_container .input_prefix, .input_container .input_postfix {
padding: 13px 10px 13px 15px;
}
.input_container input {
border: none;
padding: 13px 5px;
font-family: Montserrat, serif;
font-size: 16px;
font-weight: 600;
line-height: 1.25;
color: #1a1a1a;
}
.footer_container {
font-family: Montserrat, serif;
font-size: 14px;
font-weight: 600;
line-height: 1.71;
text-align: left;
color: #fff;
}
.footer_container .footer_menu {
background-image: linear-gradient(to right, #0102b0, #4090e3);
}
.footer_container .footer_menu .row {
max-width: 1170px;
margin: 0 auto;
}
.footer_container .footer_menu .row:first-child {
padding-bottom: 70px;
margin-bottom: 34px;
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
.footer_container .footer_menu a {
color: #fff;
text-decoration: none;
display: block;
width: 100%;
}
.footer_container .footer_menu .buttons a {
text-transform: uppercase;
margin-bottom: 10px;
}
.footer_container .footer_menu .box_header {
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
.footer_container .footer_menu .box_header span {
border-bottom: 3px solid #fff;
color: #fff;
font-size: 14px;
}
.footer_container .copyright {
padding: 20px;
background-color: #0f259d;
text-align: center;
position: relative;
}
.footer_container .copyright .scroll_top {
position: absolute;
right: 30px;
top: -19px;
width: 38px;
height: 38px;
background-color: #5ba8f4;
color: #fff;
text-decoration: none;
line-height: 40px;
border-radius: 5px;
}
.footer_container .footer_menu2 {
margin: 0;
padding: 0;
list-style: none;
}
.footer_container .footer_menu2 li {
float: left;
margin-right: 40px;
}
.footer_container .footer_menu2 li a {
text-decoration: underline;
}
.footer_container .footer_social_media {
float: right;
margin: 0;
padding: 0;
list-style: none;
}
.footer_container .footer_social_media li {
float: left;
margin: 4px;
}
.footer_container .footer_social_media li a {
display: block;
width: 34px;
height: 34px;
border-radius: 5px;
text-align: center;
line-height: 37px;
}
.footer_container .footer_social_media li a.facebook {
background-color: #0f259d;
}
.footer_container .footer_social_media li a.twitter-x {
background-color: #5ba8f4;
}
.footer_container .footer_social_media li a.youtube {
background-color: #e73323;
}
.mejs__overlay-button {
border: none;
}
.clipText {
display: -webkit-box;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
overflow: hidden;
}
.clipText-1 {
-webkit-line-clamp: 1;
}
.clipText-2 {
-webkit-line-clamp: 2;
}
.clipText-3 {
-webkit-line-clamp: 3;
}
.clipText-4 {
-webkit-line-clamp: 4;
}
.clipText-5 {
-webkit-line-clamp: 5;
}
.clipText-6 {
-webkit-line-clamp: 6;
}
.clipText-7 {
-webkit-line-clamp: 7;
}
.clipText-8 {
-webkit-line-clamp: 8;
}
.clipText-9 {
-webkit-line-clamp: 9;
}
.clipText-10 {
-webkit-line-clamp: 10;
}
/*# sourceMappingURL=style.css.map */