/*
Theme Name: RollemaMedia
Theme URI: https://www.rollemamedia.nl/
Author: Rollema Media
Author URI: https://www.rollemamedia.nl/
Description: Een door Rollema Media ontwikkelde template.
Version: 2023-03
License: GNU General Public License
License URI: https://www.gnu.org/licenses/gpl.html
Text Domain: rollemamedia
*/

html, body { margin: 0; padding: 0; }

.elementor-widget:not(:last-child) { margin-bottom: 0 !important; }

select { -moz-appearance: none; -webkit-appearance: none; appearance: none; padding: 15px 40px 15px 15px; border: 1px solid #ccc; border-radius: 3px; color: #2d2d2f; background: #fff url('https://cdn.onlinewebfonts.com/svg/img_295694.svg') no-repeat; background-size: 14px; background-position: 97% 50%; }
input,
textarea { border: 1px solid #ccc; border-radius: 3px; padding: 10px; font-family: "Fira Sans"; font-size: 15px; font-weight: 300; }

main { max-width: 1600px; margin: 0 auto; }
main .container { padding: 10px; }

header h1 { padding: 0 10px; }

.melding-balk { padding: 10px; color: #fff; text-align: center; }
.melding-balk a { color: #fff; }

.elementor-nav-menu>li.menu-item.contact { display: none; }

/* FAQ - Begin */
.faq { margin: 0; }
.faq .single-faq { background: #eee; padding: 20px; font-size: 14px; border-radius: 10px; margin: 0 0 20px; }
.faq .faq-vraag a { text-decoration: none; font-weight: 500; display: flex; align-items: center; }
.faq .faq-vraag a:before { content: "\f13a"; font-weight: 300; font-family: "Font Awesome 7 PRO"; font-size: 18px; margin-right: 10px; transition: .3s; }
.faq .faq-vraag.active a:before { content: "\f139"; }
.faq .faq-antwoord { margin: 10px 0 0 0; }
.faq .faq-antwoord p:nth-last-child(-n+1) { margin: 0; }
.faq .subtitel { font-size: 18px; font-weight: 600; }
/* FAQ - Einde */

/* Pagina CSS - Begin */
.pagina-hero { height: calc(40vh - 40px); min-height: 200px; padding: 40px 0 5vh; display: flex ; flex-direction: column; justify-content: flex-end; background-size: cover; position: relative; background-position: 50% 50%; }
.pagina-hero::before { content: ''; position: absolute; background: rgba(0, 0, 0, .5); top: 0; left: 0; width: 100%; height: 100%; }
.pagina-hero::after { content: ''; position: absolute;  inset: 0;  left: 0; bottom: 0; width: 100%; height: 5vh; clip-path: path("M 0 0 H 100 V 90 Q 50 100 0 90 Z"); }
.pagina-hero .content { color: #fff; z-index: 9; max-width: 50%; display: flex ; justify-content: flex-start; flex-direction: column; flex-wrap: wrap; gap: 0; margin: 0; position: relative; }
.pagina-hero .content h1 { color: #fff; font-size: 30px; line-height: 30px; font-weight: 900; letter-spacing: 1.2px; margin: 0 0 20px; }
.pagina-hero .content .woocommerce-breadcrumb,
.pagina-hero .content .woocommerce-breadcrumb a { color: #fff; font-size: 12px; }

.rm-container { margin: 0 auto; padding: clamp(24px,3vw,20px) 16px; }
.rm-container .knop { display:  inline-block; }
.rm-container.rm-grid.rm-1200 { max-width: calc(1200px - 20px)}
.rm-container h2.titel { font-weight: 900; font-size: 25px; }
.rm-grid { display: grid; gap: clamp(16px,2vw,32px); max-width: calc(1600px - 20px); padding: 50px; width: auto; margin: 0 auto; position: relative; align-items: center; }
.inner-container { display: grid; gap: clamp(16px,2vw,32px); max-width: calc(1600px - 20px); padding: 50px; width: calc(100% - 100px); margin: 0 auto; position: relative; }
.has-bg-photo { position: relative; color: #fff; }
.has-bg-photo::before { content: ''; position: absolute; background: rgba(0, 0, 0, .5); top: 0; left: 0; width: 100%; height: 100%; }

/*tekstblok overlap*/
.rm-col-overlap.tekstblok-overlap { background-color: #f9f9f9; padding: 40px; border-radius: 10px; margin-right: -80px; z-index: 1; box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;  }
.rm-col-overlap.tekstblok-rechts-overlap { background-color: #f9f9f9; padding: 40px; border-radius: 10px; margin-left: -80px; z-index: 1; box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;  }
.rm-col-overlap img { border-radius: 10px; width: 100%; max-height: 600px !important; object-fit: cover;}

/* Blok shortcode */


/* Tekstblok - Afbeelding */
.rm-col.tekstblok { background-color: #f9f9f9; padding: 40px; border-radius: 10px; z-index: 1; box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;  }
.rm-col.tekstblok-rechts {  color: #fff; padding: 40px;  margin-left: 0px; z-index: 1;   }
.rm-col.tekstblok-rechts h3 { color: #fff !important; font-family: "Public Sans", Sans-serif; font-size: 23px; font-weight: 500; line-height: 32px; letter-spacing: 0.5px;}
.rm-col.tekstblok-rechts h2 { color: #fff; }

.rm-blok.heeft-foto::before { background: rgba(8, 58, 92, .8); position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; content: '';  }

.rm-blok.rm-blokken-naast-elkaar { display: grid; grid-column: 3; }

.rm-col img { border-radius: 10px; width: 100%; max-height: 450px; object-fit: cover; }
.rm-2col { grid-template-columns: repeat(2,minmax(0,1fr)); z-index: 9; padding-top: 60px; }
.rm-responsive { align-items: center; }
/* .rm-auto-cols { grid-template-columns: repeat(auto-fit,minmax(240px,1fr)); } */
.rm-auto-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; align-items: start; }

h2.rm-container { font-family: "Public Sans" !important, Sans-serif; font-size: 30px !important; font-weight: 800 !important; text-transform: uppercase !important; line-height: 50px !important; letter-spacing: 0.5px; text-align: center; }
p.subtitel { margin: 0 0 10px; font-family: "Public Sans" !important, Sans-serif; font-size: 30px !important; font-weight: 800 !important; text-transform: uppercase !important; line-height: 50px !important; letter-spacing: 0.5px;}

.rm-container.rm-grid.rm-1200 { margin-bottom: 0px; z-index: 10; }
.rm-container .titel-blok { font-family: "Public Sans"; font-size: 30px; font-weight: 500; line-height: 50px;  }
.rm-center { justify-content: center; }
.rm-container a { text-decoration: none; color: #1C1C1C; }

.rm-wysiwyg:where(p,ul,ol) { margin: 0 0 10px; }
.rm-wysiwyg:where(a) { text-decoration: underline; }
.rm-wysiwyg h2,
.rm-wysiwyg h3 { margin: 0 0 20px; }
.rm-wysiwyg.intro { font-size: 13px; }


/* Afbeelding volledige breedte */
.rm-afbeelding-volledige-breedte { width: 100%; height: 600px; background-size: cover; background-position: center; position: relative; }
.rm-afbeelding-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; /* overlaykleur of semi-transparant zwart bv: rgba(0,0,0,0.4) */ }


a.hero-button { width: fit-content !important; background-color: #1B9B38; font-family: "Public Sans", Sans-serif; font-size: 1em; color: #fff !important; border-style: none; border-radius: 3px 3px 3px 3px; padding: 10px 40px 10px 40px; margin-top: 20px; text-decoration: none; letter-spacing: 0.05em; transition: .3s; }
.hero-button:hover { background-color:  #fff; color: #2d2d2f !important; }

.rm-container .knop.primair { background-color: #1B9B38; font-family: "Public Sans", Sans-serif; font-size: 1em; color: #fff !important; border-style: none; border-radius: 3px 3px 3px 3px; padding: 10px 40px 10px 40px; margin-top: 20px; text-decoration: none; letter-spacing: 0.05em; transition: .3s; }
.rm-container .knop.primair:hover { background-color:  #186D2B; color: #fff !important; }

.rm-container .knop.secundair:hover { background-color:  #186D2B !important; color: #fff !important; }

.rm-hero-over-image { position:relative; color: #111; }
.rm-hero-over-image .rm-hero-inner { background: rgba(255,255,255,0.7); backdrop-filter: saturate(120%) blur(4px); border-radius: 16px; padding: clamp(16px,2vw,32px); }

.rm-card,
.rm-product-card { background: #fff; color: #1C1C1C; border-radius: 10px; padding: 20px; box-shadow: 0 0 20px -10px rgba(0, 0, 0, .3); transition: .4s; }
.rm-card:hover,
.rm-product-card:hover { box-shadow: 0 0 20px -10px rgba(0, 0, 0, .6); margin: -5px 0 5px 0; }

.rm-card-media img { display: block; width: 100%; height: 250px; object-fit: contain; border-radius: 5px; }
.rm-product-media img { width: 100%; height: 400px; object-fit: cover; border-radius: 5px; }
//.rm-logos img { display: block; max-width: 100%; height: auto; border-radius: 5px; }
//.rm-logos-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(300px,1fr)); gap: 20px; align-items: center; }

.rm-logos-grid { column-count: 4; column-gap: 1rem; display: block; }
.rm-logo { display: inline-block; width: 100%; margin-bottom: 1rem; cursor: pointer; transition: transform 0.3s ease; }
.rm-logo img { width: 100%; border-radius: 8px; display: block; }
.rm-logo:hover { transform: scale(1.03); }

/* Popup */
.rm-popup { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.85); justify-content: center; align-items: center; z-index: 9999; }
.rm-popup img { max-width: 90%; max-height: 90%; border-radius: 10px; box-shadow: 0 0 20px rgba(0,0,0,0.5); animation: fadeIn 0.3s ease; }
@keyframes fadeIn { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } }

.rm-products-grid { display: grid ; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: clamp(16px, 2vw, 32px); max-width: 1600px; padding: 0; width: 100%; margin: 0 auto; position: relative; }
.rm-product-title { font-size: 1.1rem; margin: .5rem 0; }
.rm-product-price del{opacity:.7;margin-right:.35em;}
.rm-product-price ins{text-decoration:none;}

/* Vormscheiding (asymmetrische boog) */
.rm-shape-sep svg path { fill: #fff; /* of een andere kleur */ }
.rm-shape-sep--top svg path { transform: rotate(180deg); }

/* Sectie spacing */
.rm-blok { position: relative; }
.rm-blok + .rm-blok { margin-top: 40px; }
.rm-blok.rm-blokken-naast-elkaar + .rm-blok.rm-blokken-naast-elkaar{ margin-top: -40px; }

.usp-lijst { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.usp-lijst.horizontaal { flex-direction: row; gap: 40px; }
.usp-lijst li { display: flex; flex-direction: row; align-items: center; gap: 10px; }
.usp-lijst li a { color: #1C1C1C; }
.usp-lijst li:before { content: '\f00c'; font-size: 1.3em; color: #1B9B38; font-family: 'Font Awesome 7 PRO'; font-weight: 400; }
.usp-lijst li.adres:before { content: '\f1ad'; }
.usp-lijst li.tel-vast:before { content: '\f8d3'; }
.usp-lijst li.tel-mobiel:before { content: '\f095'; }
.usp-lijst li.mail:before { content: '\f0e0'; }

.usp-blokken { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 20px; }
.usp-blokken.horizontaal { flex-direction: row; gap: 40px; }
.usp-blokken li { display: flex; flex-direction: row; align-items: center; gap: 10px; border: 1.5px solid #1B9B38; padding: 20px; border-radius: 3px; }
.usp-blokken li i { color: #1B9B38; font-size: 1.5em; font-weight: 300; }
.usp-blokken.horizontaal li i { font-size: 2em; }
/* Pagina CSS - Einde */

/* Formulier - Begin */
.gform-theme--foundation { --gf-form-gap-y: 20px !important; }
.gform-body label { color: #1C1C1C !important; font-weight: 300 !important; font-size: 1em !important; }
.gform-body input,
.gform-body textarea { border: 1px solid #DBDBDB !important; box-shadow: none !important; }
.gform-body input::placeholder,
.gform-body textarea::placeholder { color: #9f9f9f; }
.gfield_required { display: none !important; }

.gform_button { background-color: #1B9B38 !important; padding: 10px 20px !important; width: 50% !important; font-size: 1em !important; font-weight: 500 !important; letter-spacing: .05em !important; border: none !important; transition: .3s !important; }
.gform_button:hover { background-color: #186D2B !important; }

.footer-formulier .gform-body label { font-size: .9em !important; }
.footer-formulier .gfield textarea.small { min-block-size: 5rem !important; block-size: 5rem !important; }

/* Project - Begin */
.archive .project-archief .container { margin: 0 0 40px; }
.project-archief .container { gap: 40px; display: grid; grid-template-columns: repeat(3, 1fr); }
.project-archief .project { padding: 20px; background: #fff; border-radius: 5px; box-shadow: 0 0 30px -10px rgba(0, 0, 0, .2); transition: .3s; }
.project-archief .project:hover { margin: -5px 0 5px 0 }
.project-archief .project .entry-title { text-decoration: none; color: #1C1C1C; font-size: 18px; font-weight: 600; text-align: center; margin: 20px 0 0 0; }
.project-archief .project img { width: 100%; height: 400px; object-fit: cover; border-radius: 5px; }
/* Project - Einde */

.home .rm-card { gap: 20px; display: flex; flex-direction: row; align-items: center; flex-wrap: wrap; }
.home .rm-card img { height: 100px; }
.home .rm-card p { margin: 0; }
.home .rm-card .rm-wysiwyg { min-height: 70px; }

@media (max-width: 1024px) {
  .rm-logos-grid { column-count: 3; }
}

@media (max-width: 768px) {
  .pagina-hero { height: auto; }
  .rm-auto-cols { grid-template-columns: repeat(2, 1fr); padding: 30px; }
  .rm-2col { grid-template-columns: repeat(1,minmax(0,1fr)); padding: 30px; }
  .rm-col-overlap.tekstblok-rechts-overlap { margin-left: 0;  }
  .rm-col-overlap.tekstblok-overlap { margin-right: 0; }
  .rm-logos-grid { column-count: 2; }
  .rm-grid { padding: 30px; width: calc(100% - 60px); display: block; }
  .inner-container { padding: 30px; width: calc(100% - 60px); }
  .pagina-hero .content { max-width: 100%; }
  .usp-lijst.horizontaal { flex-wrap: wrap; gap: 20px; }
  .project-archief .project { max-width: 100%; flex: 100%; }
  .project-archief .project img { width: 100%; }
  .home .rm-card { margin: 0 0 20px; }
  .rm-container .knop.primair,
  a.hero-button { font-size: .9em; padding: 10px 20px; }
  .elementor-nav-menu>li.menu-item.contact { display: block; }
}

@media (max-width: 480px) {
  .rm-logos-grid { column-count: 2; }
  .rm-auto-cols { grid-template-columns: repeat(1, 1fr); padding: 30px; }
  .rm-products-grid { grid-template-columns: repeat(1, 1fr); }
  .home .rm-card img { height: 70px; }
}