/*
    Theme Name: Simplix Theme
    Description: Theme development by Simplix
    Author: Simplix
    Author URI: https://simplix.nl
    Template: Avada
    Version: 1.0.0
    Text Domain:  Avada
*/

/* Vars */
:root { --dark_blue: #19223E; --blue: #004690; --orange: #E34536; --light_blue: #E5ECF3; }

/* General */
.max-width-400 { max-width: 400px; }
.sticky-button {position:fixed; right:0; top:64px; background:var(--orange); color:#fff; font-weight:bold; padding:10px 32px; clip-path:polygon(0 0, 100% 0, 100% 100%, 100% 100%, 24px 100%, 0 calc(100% - 24px)); z-index:999;}
.sticky-button:hover { background: var(--dark_blue); color: #fff; }
.admin-bar .sticky-button { top: 96px; }

.white-cta-wrapper { overflow: visible; }
.white-cta-wrapper .fusion-row { margin-top: -50px; }
.white-cta-wrapper .fusion-column-wrapper { clip-path: polygon(40px 0%, 100% 0, 100% calc(100% - 40px), calc(100% - 40px) 100%, 0 100%, 0 40px); position: relative; }
.white-cta-wrapper .fusion-column-wrapper:after { content: "\f061"; font-family: "Font Awesome 6 Pro"; position: absolute; top: 0; bottom: 0; margin: auto; right: 16px; display: flex; align-items: center; color: var(--blue); font-size: 28px; }

.gap-40 .fusion-column-wrapper { gap: 24px 40px; }

/* Titlebar */
.titlebar-wrapper {min-height:32vh; padding:128px 32px; background-size:cover; display:flex; align-items:center; justify-content:center; position:relative;}
.titlebar-wrapper:before {content:''; position:absolute; top:0; left:0; width:100%; height:100%; background:#19223e; opacity:.72;}
.titlebar-wrapper .titlebar-container {max-width:var(--site_width); width:100%; position:relative;}
.titlebar-wrapper .titlebar-container * {color:#fff; max-width:720px;}

.single .titlebar-wrapper {min-height:24vh; padding:64px 32px;}
.single .titlebar-wrapper:before {opacity:1;}

/* Image clip path */
/* .image-clip-path { clip-path: polygon(120px 0%, 100% 0, 100% calc(100% - 120px), calc(100% - 120px) 100%, 0 100%, 0 120px); }
.image-clip-path.reversed { clip-path: polygon(0 0, calc(100% - 120px) 0, 100% 120px, 100% 100%, 120px 100%, 0 calc(100% - 120px)); }
.image-clip-path.big { clip-path: polygon(250px 0%, 100% 0, 100% calc(100% - 250px), calc(100% - 250px) 100%, 0 100%, 0 250px); } */

.clip-path {clip-path:polygon(128px 0%, 100% 0, 100% calc(100% - 128px), calc(100% - 128px) 100%, 0 100%, 0 128px); overflow:hidden;}
.clip-path.small {clip-path:polygon(64px 0%, 100% 0, 100% calc(100% - 64px), calc(100% - 64px) 100%, 0 100%, 0 64px);}
.clip-path.extra-small {clip-path:polygon(32px 0%, 100% 0, 100% calc(100% - 32px), calc(100% - 32px) 100%, 0 100%, 0 32px);}
.clip-path.large {clip-path:polygon(256px 0%, 100% 0, 100% calc(100% - 256px), calc(100% - 256px) 100%, 0 100%, 0 256px);}
.clip-path.reversed {clip-path:polygon(0 0, calc(100% - 128px) 0, 100% 128px, 100% 100%, 128px 100%, 0 calc(100% - 128px));}

/* Buttons */
.button-wrapper .button {color:#fff; font-weight:bold; background:var(--orange); padding:12px 32px; clip-path:polygon(16px 0%, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%, 0 16px); overflow:hidden; transition:.3s;}
.button-wrapper .button.small {font-size:14px; padding:8px 24px;}
.button-wrapper .button:hover {background:var(--blue);}
.fusion-button { clip-path: polygon(16px 0%, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%, 0 16px); }

/* Nieuws - Slider */
.posts-wrapper#nieuws .single { display: flex; flex-direction: column; }
.posts-wrapper#nieuws .single h4 { color: white; text-size-adjust: 30px; }
.posts-wrapper#nieuws .single .excerpt { color: white; }
.posts-wrapper#nieuws .single .button { background-color: transparent; font-weight: bold; color: var(--blue); margin-top: 24px; }
.posts-wrapper#nieuws .single .button .button-text::after { content: "\f061"; font-family: "Font Awesome 6 Pro"; }
.posts-wrapper#nieuws .single .button:hover { background-color: transparent; font-weight: bold; color: var(--orange); }
.posts-wrapper#nieuws .single .image-wrapper { position: relative; padding-top: 75%; clip-path: polygon(0 0, calc(100% - 64px) 0, 100% 64px, 100% 100%, 64px 100%, 0 calc(100% - 64px)); overflow: hidden; }
.posts-wrapper#nieuws .single .image-wrapper img { width: 100%; height: 100%; object-fit: cover; position: absolute; left: 0; top: 0; }

/* Diensten - Slider */
.posts-wrapper#diensten .single {display:flex; flex-direction:column; background:#fff;}
.posts-wrapper#diensten .single .image-wrapper {overflow:hidden;}
.posts-wrapper#diensten .single .image-wrapper img {transition:.3s;}
.posts-wrapper#diensten .single:hover .image-wrapper img {transform:scale(1.1);}
.posts-wrapper#diensten .single .content-wrapper {padding:24px; display:inline-flex; gap:24px; flex-direction:column;}
.posts-wrapper#diensten .single .content-wrapper h4 {margin-top:0; margin-bottom:0;}
.posts-wrapper#diensten .single .content-wrapper .excerpt {font-size:14px; color:var(--dark_blue);}
.posts-wrapper#diensten .single .button-wrapper {margin-top:auto; padding:0 24px 24px 24px;}

.posts-wrapper.grid#diensten .output {display:grid; grid-template-columns:repeat(3, 1fr); grid-gap:32px;}

/* Contactformulier */
#main .contact-form { width: 100%; margin: 0; }
#main .contact-form label, #main .contact-form legend { color: white !important; font-weight: normal; font-size: 16px; }
#main .contact-form button { line-height: 1.5; padding: 16px 32px; height: auto; outline: none; box-shadow: none; border: none; border-radius: 0; font-size: 16px; font-weight: bold; background: var(--blue); clip-path: polygon(24px 0%, 100% 0, 100% calc(100% - 24px), calc(100% - 24px) 100%, 0 100%, 0 24px); }
#main .contact-form button:after { display: none !important; }
#main .contact-form input { height: 50px; clip-path: polygon(0 0%, 100% 0, 100% calc(100% - 24px), calc(100% - 24px) 100%, 0 100%, 0 24px); border-radius: 0px; }
#main .contact-form textarea { resize: none; clip-path: polygon(0 0%, 100% 0, 100% calc(100% - 24px), calc(100% - 24px) 100%, 0 100%, 0 24px); border-radius: 0px; }

/* Contact info */
.contact-info { color: #fff; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; margin-top: 16px; }
.contact-info span { display: flex; gap: 8px; line-height: 1px; align-items: center; }
.contact-info span i { width: 20px; flex: 0 0 20px; }

/* News archive */
.posts-wrapper.archive#nieuws .output { display: grid; grid-template-columns: repeat(3, 1fr); gap: 64px; }
.posts-wrapper.archive#nieuws .output .single h4 { color: var(--dark_blue); }
.posts-wrapper.archive#nieuws .output .single .excerpt { color: var(--dark_blue); }

/* Loader */
.loader-wrapper { display: none; width: 100%; }
.loader-wrapper .loader { display: flex; justify-content: center; padding: 16px; }

/* Load more */
.load-more-wrapper { width: 100%; display: flex; justify-content: center; margin-top: 64px; }
.load-more-wrapper .load-more { margin: 0 auto; display: inline-block; padding: 16px 32px; font-size: 16px; cursor: pointer; transition: .3s; font-weight: bold; background: var(--blue); color: #fff; line-height: 1.5; clip-path: polygon(24px 0%, 100% 0, 100% calc(100% - 24px), calc(100% - 24px) 100%, 0 100%, 0 24px); }
.load-more-wrapper .load-more:hover { background: var(--orange); }

/* Downloads */
.post-password-form {padding:64px 0; display:flex; justify-content: center; flex-direction: column;}
.post-password-form input[type="password"] {background:#fff !important; border-color:var(--orange) !important}
.post-password-form p {display:flex; gap:12px; align-items: center; flex-wrap:wrap}

.download-wrapper {display:flex; flex-direction: column; margin:64px 0;}
.download-wrapper .download {padding:16px 0; border-bottom:solid #000 1px; display:flex; gap:16px;}
.download-wrapper .download .button-wrapper {margin-left:auto; flex-shrink:0;}

/* Support */
#main .support-form {width:100%; margin:0;}

#main .support-form button { line-height: 1.5; padding: 16px 32px; height: auto; outline: none; box-shadow: none; border: none; border-radius: 0; font-size: 16px; font-weight: bold; background: var(--blue); clip-path: polygon(24px 0%, 100% 0, 100% calc(100% - 24px), calc(100% - 24px) 100%, 0 100%, 0 24px); }
#main .support-form button:after { display: none !important;}
#main .support-form button:hover {background:var(--orange)}

/* Price slider */
.price-container {padding:24px; height:100%; display:flex; align-items: center;}