Files
nhgooi.nl/public/css/style.css
2024-03-13 12:37:09 +01:00

889 lines
17 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: "";
}
.site_container {
max-width: 1440px;
margin: 0 auto;
}
.body_container {
padding: 67px 135px;
background-color: #f9f9f9;
margin: 0;
}
.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 {
margin-left: 135px;
float: left;
}
.header .logo img {
height: 75px;
}
.menu_container {
height: 75px;
margin-bottom: 20px;
background-image: linear-gradient(to right, #0102b0, #4090e3);
}
.menu_container .menu {
margin: 0;
padding: 0;
list-style: none;
overflow: hidden;
position: relative;
z-index: 0;
margin: 0px -1px;
}
.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;
}
.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:first-child {
width: 135px;
display: block;
background: white;
height: 29px;
}
.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;
}
.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 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: 21px;
margin-right: 10px;
}
.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;
}
.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: #F6F6F6; */
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(50%);
}
.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;
}
.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 {
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 .box_header span {
color: #999;
border-bottom: none;
cursor: pointer;
}
.tabs .box_header.small span {
font-size: 13px;
}
.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;
}
.tab_content {
display: none;
}
.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 h2 {
margin: 0;
}
.blog .post h2 a {
font-family: Montserrat, serif;
font-size: 14px;
font-weight: 600;
line-height: 1.43;
color: #1a1a1a;
text-decoration: none;
display: inline-block;
}
.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;
}
.sidebar .box {
width: calc(100% - 38px);
}
.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 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;
}
.post_container {
padding: 40px 135px;
background-color: #f9f9f9;
margin: 0;
}
.post_container > .col-8 {
width: calc(66.66666667% - 50px);
margin-right: 50px;
}
.post_container .bread_crumb {
height: 38px;
margin: 0;
padding: 0;
list-style: none;
border-bottom: 1px solid #efefef;
padding-bottom: 18px;
}
.post_container .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;
}
.post_container .bread_crumb li a {
color: #666;
text-decoration: none;
}
.post_container .bread_crumb li i {
font-size: 8px;
}
.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 h1 {
margin: 17px 0;
font-family: Montserrat, serif;
font-size: 40px;
font-weight: 600;
line-height: 1.15;
text-align: left;
color: #282828;
}
.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;
}
.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 {
padding: 61px 135px 38px 134px;
background-image: linear-gradient(to right, #0102b0, #4090e3);
}
.footer_container .footer_menu .row:first-child {
padding-bottom: 70px;
margin-bottom: 34px;
border-bottom: 1px solid #fff;
}
.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 #fff;
}
.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;
}
/*# sourceMappingURL=style.css.map */