/* Theme Name: K2blog Author: Kaartje2go Version: 1.1 Text Domain: k2blog */ @font-face { font-family: 'Source Sans Pro'; font-style: normal; font-weight: 400; font-display: swap; src: url('/blog/wp-content/themes/k2blog/assets/fonts/source-sans-3/SourceSans3-Regular.woff') format('woff'), url('/blog/wp-content/themes/k2blog/assets/fonts/source-sans-3/SourceSans3-Regular.ttf') format('truetype'); } @font-face { font-family: 'Source Sans Pro'; font-style: normal; font-weight: 600; font-display: swap; src: url('/blog/wp-content/themes/k2blog/assets/fonts/source-sans-3/SourceSans3-SemiBold.woff') format('woff'), url('/blog/wp-content/themes/k2blog/assets/fonts/source-sans-3/SourceSans3-SemiBold.ttf') format('truetype'); } @font-face { font-family: 'Source Sans Pro'; font-style: normal; font-weight: 700; font-display: swap; src: url('/blog/wp-content/themes/k2blog/assets/fonts/source-sans-3/SourceSans3-Bold.woff') format('woff'), url('/blog/wp-content/themes/k2blog/assets/fonts/source-sans-3/SourceSans3-Bold.ttf') format('truetype'); } @font-face { font-family: 'Source Sans Pro'; font-style: normal; font-weight: 900; font-display: optional; src: local('Source Sans Pro Bold'), local('SourceSansPro-Bold'), url('/blog/wp-content/themes/k2blog/assets/fonts/source-sans-pro/SourceSansPro-Bold.woff2') format('woff2'), url('/blog/wp-content/themes/k2blog/assets/fonts/source-sans-pro/SourceSansPro-Bold.woff') format('woff'), url('/blog/wp-content/themes/k2blog/assets/fonts/source-sans-pro/SourceSansPro-Bold.ttf') format('truetype'); } html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{border:0;margin:0;outline:0;padding:0;vertical-align:baseline} html{scroll-padding-top: 185px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;overflow-y:scroll;-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;-ms-text-size-adjust:100%;height:100%;font-family:'Source Sans Pro',Arial,sans-serif;font-size:100%;font-style:inherit;font-weight:inherit} *,:before,:after{-webkit-box-sizing:inherit;-moz-box-sizing:inherit;box-sizing:inherit;-webkit-tap-highlight-color: transparent;} body{background-color:#ffffff;font-size:16px;line-height:1.3em;color:#4c4c4c;font-weight:400;width:100%;margin:0;padding:0;min-height:100vh;position:relative;text-rendering:optimizeLegibility!important;-webkit-font-smoothing:antialiased!important;-moz-osx-font-smoothing:grayscale!important;overflow-x: hidden;display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-moz-box-orient:vertical;-moz-box-direction:normal;-ms-flex-direction:column;flex-direction:column} article,aside,details,figcaption,figure,footer,header,main,nav,section{display:block} ol,ul{list-style-position:inside;margin:20px 0 20px 20px} ul li, ol li {line-height:1.65} b,strong{font-weight:600} table{border-collapse:separate;border-spacing:0} caption,th,td{font-weight:400;text-align:left} blockquote:before,blockquote:after,q:before,q:after{content:""} blockquote,q{-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;quotes:none} figcaption {font-size:12px;color:#c5c5c5} a{outline:0;color:#E21586;text-decoration:none} a:focus,a:hover,a:active{outline:0;color: #E21586;text-decoration:underline} ol li a, ul li a {color:#4c4c4c} #main-sidebar ol li a:focus, #main-sidebar ol li a:hover, #main-sidebar ol li a:active, #main-sidebar ul li a:focus, #main-sidebar ul li a:hover, #main-sidebar ul li a:active, .single a h1:hover, .single a h2:hover, .single a h3:hover, .single a h4:hover, .single a h5:hover, .single #page-lower a:hover{outline:0;color:#E21586;text-decoration:underline} .single a h1, .single a h2, .single a h3, .single a h4, .single a h5, .single a {text-decoration:none} a img{border:0;cursor:pointer} p {line-height: 1.65;margin-bottom:20px} em {font-style:italic} H1,H2,H3,H4,H5,.schema-faq-section .schema-faq-question{color:#4c4c4c;margin:1.25rem 0 .625rem;line-height:1.25;font-family:'Source Sans Pro',Arial,sans-serif;} H1{font-size:30px;font-weight:400} H2, .schema-faq-section .schema-faq-question{font-size:24px;font-weight:400} H3{font-size:18px;font-weight:400} H4{font-size:16px;font-weight:600} H5{font-size:16px;font-weight:400} ::-webkit-input-placeholder{color:#979797;font-family: 'Source Sans Pro';font-weight:light;font-size:1rem;} :-moz-placeholder{color:#979797;opacity:1;font-family: 'Source Sans Pro';font-weight:light;font-size:1rem;} ::-moz-placeholder{color:#979797;opacity:1;font-family: 'Source Sans Pro';font-weight:light;font-size:1rem;} :-ms-input-placeholder{color:#979797;font-family: 'Source Sans Pro';font-weight:light;font-size:1rem;} .show-mobile, .show-mobile-inline, .show-mobile-small{display:none} input[type="text"], input[type="search"], input[type="email"] {width:90%;padding: 6px;margin:8px 0;box-sizing:border-box;outline:none;height:35px;font-size:15px;-moz-appearance:none;-webkit-appearance:none;border:1px solid #e5e5e5;} .fa,.far,.fas{margin-left:2px} .br, figure img, #section-content img{border-radius:6px;-webkit-border-radius:6px;-moz-border-radius:6px} .bb {border-radius:0 0 6px 6px!important;-webkit-border-radius:0 0 6px 6px!important;-moz-border-radius:0 0 6px 6px!important} .bbr {border-radius:0 6px 6px 0!important;-webkit-border-radius:0 6px 6px 0!important;-moz-border-radius:0 6px 6px 0!important} .bbh {border-radius:6px 6px 0 0!important;-webkit-border-radius:6px 6px 0 0!important;-moz-border-radius:6px 6px 0 0!important} .button,.button:visited{position:relative;min-width:140px;padding:0 15px;outline:0;box-shadow:0 1px 5px rgba(10,10,10,.2);text-align:center;color:#fff!important;background:#02b8ff;margin:5px 10px 0 0;font-weight:600;border:none;text-decoration:none;display:inline-block;font-size:16px;-moz-appearance:none;-webkit-appearance:none;cursor:pointer;height:35px;line-height:35px} .button:hover{background-color:#E21586;color:#fff;text-decoration:none} .button:active{background-color:#02b8ff;color:#fff;text-decoration:none} .button .fas{vertical-align:middle;margin-left:5px} .button-orange,.button-orange:visited{background:#E21586} .button-orange:hover{background-color:#02b8ff} .button-orange:active{background-color:#E21586} .sh{-webkit-box-shadow:0 1px 4px 0 rgba(0,0,0,.3);box-shadow:0 1px 4px 0 rgba(0,0,0,.3)} .orange,.page-numbers.current,.header-widget h3{color:#E21586} .magentafill svg {fill:#E21586} .greenfill svg {fill: #08b30a} .greyfill svg {fill: #555555} .iconsvg {width:24px;margin-left:3px;} .header{-webkit-box-flex:0;-webkit-flex:0 0 auto;-moz-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto} #main{-webkit-box-flex:1;-webkit-flex:1 0 auto;-moz-box-flex:1;-ms-flex:1 0 auto;flex:1 0 auto;margin-top:100px} .flextainer{display:-ms-flexbox;display:-webkit-flex;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;-webkit-align-content:flex-start;-ms-flex-line-pack:start;align-content:flex-start;-webkit-align-items:center;-ms-flex-align:center;align-items:center} .flexitem{-webkit-order:0;-ms-flex-order:0;order:0;-webkit-flex:0 1 auto;-ms-flex:0 1 auto;flex:0 1 auto;-webkit-align-self:auto;-ms-flex-item-align:auto;align-self:auto} #header-wrap,#page-wrap,#header-ticker,.container{width:100%;max-width:1280px;margin:0 auto} #footer-inner-wrap,#footer-title-wrap{width:100%;max-width:1200px;margin:0 auto} #footer-inner-wrap .flexitem,#page-wrap .flexitem{align-self:normal;-webkit-align-self:normal;-ms-flex-item-align:normal} #footer-inner-wrap{padding:15px} .header{width:100%;overflow:hidden;display:block;position:fixed;box-shadow:0 0 5px rgba(0,0,0,.2);z-index:25;background-color:#fff} #header-wrap{height:64px;padding:5px 10px} .footer-border{border-bottom: 1px solid #f1f1f1;margin-bottom:5px} #header-logo{padding-left:10px;color:#6f6f6f;font-weight:600} #header-logo a{text-decoration:none;display:block;max-width:213px} #header-logo .logo-svg svg{fill:#E21586;width:100%} .header-menu-mobile,.header-menu-mobile a{color:#4c4c4c;text-decoration:none;cursor:pointer;padding:0 5px;margin-top:20px;width:40px;height:40px;text-align:center} #toggler-menu,#toggler-search{cursor:pointer;color:#737373} #menu-mobile-menu .mobile-menu-wrapper,#menu-mobile-search{display:none;background-color:#fff;padding:25px 10px;margin-top:70px;box-shadow:0 0 5px rgba(0,0,0,.2);left:0;right:0;z-index:24;position:fixed;top:0;overflow-y:scroll} body:not(.mega-menu) #menu-mobile-menu{height:405px} #menu-mobile-search{height:150px;text-align:center} #header-menu{margin-top:5px} #header-menu ul,#menu-mobile-menu ul{list-style-type:none;margin:0;padding:0;overflow:hidden} #header-menu ul li{float:left} #header-menu ul li a{display:block;text-align:center;padding:10px;text-decoration:none;font-weight:600;font-size:17px;color:#555555} #header-menu ul li a:hover{text-decoration:none;color:#E21586} #menu-mobile-menu ul li{width:100%;padding:10px 0;border-top:1px solid #f1f1f1} #menu-mobile-menu ul li a:hover{text-decoration:none} #header-search{width:33%;text-align:center;position:relative;max-width:175px} #header-search input[type="search"]{width:100%;max-width:175px;vertical-align:bottom;outline:none;margin:0;font-size: 13px;} #header-search button{width:42px;height:42px;background:#ffffff;color:#fff;outline:none;cursor:pointer;border:1px solid #e5e5e5;border-left:none;vertical-align:initial;position:absolute;right:4px;top:5px} #header-search .fa-search:before {color:#E21586} .header-widget ul li a{width:100%;line-height:24px;display:block;position:relative} #page-wrap{background-color:#fff;padding:20px} #page-upper{width:100%;padding-bottom:20px;margin-bottom:20px} #page-lower{width:100%;padding-bottom:20px} #breadcrumbs-wrap{width:100%;margin-bottom:5px} #breadcrumbs-wrap,#breadcrumbs-wrap a{font-size:13px;color:#909090} #breadcrumbs-wrap a{text-decoration:none;font-weight:700} #breadcrumbs i{font-size:11px;margin:0 5px} .linkx{color:#4c4c4c!important} .linkx:hover {color:#E21586!important;text-decoration:none} .linkall{display:block} .page #main-section{width:100%} .single #main-section{max-width:900px;float:left;padding-right:20px;width:100%} #section-bar{width:100%;font-size:14px;color:#909090;font-weight:400;line-height:40px} #section-bar .span,.section-bar span, .items-content .item-cat span,.main-image .item-cat span{font-weight:600;color:#fff!important;padding:4px 10px;background:#87be3c;font-size:1rem;margin-right:8px} #section-social{float:right;width:170px;text-align:right} #section-social img{width:30px;margin-right:5px} #section-social .fa-lg{margin-right:5px;font-size:22px} #section-title{padding-bottom:10px} #section-title h1{font-size:40px;line-height:40px;} #section-content{overflow:hidden} #section-content a:not(.wp-block-button__link){text-decoration:underline} #section-content blockquote{margin-top:30px;margin-bottom:15px;margin-left:45px;padding:3px 3px 3px 15px;border-left:2px solid #cacaca} #section-content blockquote p, #section-content blockquote p:first-of-type {font-style: italic;font-weight:400;margin-bottom:0} #section-content blockquote cite {font-size:12px;font-style: normal;margin-top:10px;display: inline-block} #section-content img {margin-top:20px;margin-bottom:0!important} #section-content ul, #section-content ol {margin:0 15px 15px 15px;} #section-content ul li, #section-content ol li {margin:0 15px} #section-content .yoast-table-of-contents ul, #section-content .yoast-table-of-contents ol {margin: 0 0 0 20px;} #section-content .yoast-table-of-contents ul li, #section-content .yoast-table-of-contents ol li {margin:0} #section-content ul.checklist {list-style-type: none;margin-left: 30px} #section-content ul.checklist li {margin:13px 0} #section-content .wp-block-image{text-align:center;margin:0;width:100%} #section-content .wp-block-image figure{margin:0} #section-content .wp-block-image img{width:100%;margin-bottom:20px;height: auto} #section-content .wp-block-image:first-child{margin-bottom:15px;width:inherit} #section-content .wp-block-image:first-child img{width:100%;object-fit: cover} #section-content .wp-block-table table {width:100%} #section-content h2:first-of-type{clear:both} #section-content h2 {font-size:24px;margin:1.25rem 0 .1rem} #section-content h3 {font-size:18px;margin:1.25rem 0 .1rem;font-weight:600} #section-content h4 {margin:1.25rem 0 .1rem} #section-content .post-wrap{width:100%;overflow:auto;clear:both;padding:20px 0;border-top:1px solid #f1f1f1;position:relative} #section-content .section-bar{position:absolute;top:30px;left:10px;z-index:24} #section-content .section-bar .span, #section-content .section-bar span{font-weight:600;color:#fff;padding:4px 5px;background:#87be3c;font-size:13px;margin-right:8px} #section-content .post-wrap .post-image{float:left;width:100%;max-width:250px} #section-content .post-wrap .post-image img{width:100%;max-width:300px} #section-content .post-wrap .post-content{padding:0 15px 15px;overflow:hidden} #section-content .post-wrap .post-content .headlink{text-decoration:none} #section-search{width:100%;margin:20px 0;padding:20px 0;border-top:1px solid #f1f1f1} #main-sidebar{width:340px;float:left;padding-top:5px;padding-left:20px;border-left:1px solid #f1f1f1} #main-sidebar .sidebar-list {justify-content: space-between;width:100%;display:inline-flex;} #main-sidebar .sidebar-list .icon--arrow-right{margin-top:15px;} #main-sidebar h3,#page-lower h3{color:#E21586;font-weight:600} #main-sidebar ol,#main-sidebar ul{list-style:none;margin-left:2px} #main-sidebar .sidebar-box{padding:20px 0;width:100%;border-bottom:1px solid #f3f3f3} #main-sidebar .sidebar-box:first-of-type{padding-top:0} #main-sidebar .sidebar-box .siblings{margin-bottom:15px;border-bottom:1px solid #f1f1f1;padding-bottom:10px;overflow:hidden} #main-sidebar .sidebar-box .siblings:last-child{border-bottom:0} #main-sidebar .sidebar-box .text-link{font-weight:700;color:#4c4c4c} #main-sidebar .sidebar-box .text-link:hover{color:#E21586} #main-sidebar .sidebar-box:last-child{border-bottom:0} #main-sidebar .sidebar-box .sidebar-category{width:100%;position:relative;max-width:500px} #main-sidebar .sidebar-box .sidebar-category img{width:100%;max-width:500px} #main-sidebar .sidebar-box .widget-image__button{position:absolute;top:auto;right:1.25rem;bottom:1.25rem;left:1.25rem} .single #main-sidebar{margin-top:60px} .page.single #main-sidebar{margin-top:3px} .frontpage .single #main-sidebar{margin-top:0} .sidebar-category .button.button--icon-right{padding-right:45px;position:relative} .sidebar-category .button .icon{position:absolute;top:50%;right:15px;bottom:auto;left:auto;-webkit-transform:translateY(-50%);transform:translateY(-50%);font-size:14px;margin:0 .25em} .sidebar-category .button.button--spread{display:block;width:100%} .sidebar-category .button.button--shadow{-webkit-box-shadow:0 0 6px rgba(0,0,0,.3);box-shadow:0 0 6px rgba(0,0,0,.3)} .sidebar-category .button, #section-content .wp-block-button__link{height:50px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;display:inline-block;padding:0 15px;font-family:inherit;font-weight:600;line-height:50px;font-size:16px;color:#555!important;vertical-align:baseline;text-align:center;text-decoration:none;background-color:#fff!important;border:0;border-radius:8px;cursor:pointer;zoom:1;outline:0} .sidebar-category .icon{display:inline-block;width:1em;height:1em;font-size:1.5rem;fill:#E21586} .category #section-title{text-align:center} .frontpage{margin-top:20px} #content-main{max-width:860px;width:65%;float:left;position:relative;background-color:#fbfbfb} #content-main .main-wrap{min-height:310px} #content-main .main-wrap .main-image{position:relative} #content-main .main-wrap .main-image figure{height:425px;width:100%;margin:0;padding:0} #content-main .main-wrap .main-image .main-content{position:relative;bottom:0;padding:10px 10px 20px;width:100%} #content-summary{width:380px;float:left;margin-bottom:20px} #content-summary .linkall,#main-sidebar .linkall,#sidebar-moments .linkall{width:100%;height:100px;overflow:hidden;border-bottom:1px solid #f1f1f1;padding:15px 35px 10px 0!important;line-height:24px;position:relative} #main-sidebar .linkall{line-height:18px} #sidebar-moments .linkall{height:50px;padding:0 10px 0 0} #content-summary h2{color:#555555} .sidebar-box.contact img{max-width:245px} .summary-row img{height:70px;float:left;margin-right:10px} #main-sidebar .linkall:last-child{border-bottom:none} #page-wrap .item-wrap{width:100%;margin-top:10px} #page-wrap .wrap-bar{width:100%;border-bottom:1px solid #f1f1f1;overflow:auto} #page-wrap .wrap-title{width:100%;text-align:left;padding:0 10px;position:relative} #page-wrap .wrap-title h2{font-size:24px;color:#555555;margin:0} #page-wrap .wrap-content{width:100%;text-align:left;padding:0 10px;position:relative} #page-wrap .wrap-content-below {margin-top: 40px} #page-wrap .wrap-more{text-align:right;position:absolute;right:10px;bottom:0;font-size:14px;line-height:24px} #page-wrap .wrap-more .arrow{font-size:18px;font-weight:700} #page-wrap .wrap-items{width:100%;width:100%} #page-wrap .items-content{width:25%;padding:10px;position:relative;margin-bottom:10px} #page-wrap .items-content .item-cat,.main-image .item-cat{position:absolute;right:10px;top:20px;z-index:23} #page-wrap .items-content img{width:100%;height:auto} #page-wrap .items-content a h4{color:#4c4c4c!important;font-weight:400;margin-top:5px} #page-wrap .items-content a:hover,#page-wrap .items-content a:hover h4{color:#555555!important;text-decoration:none} #page-wrap.category .items-content{width:50%;padding:15px} #page-wrap .item-wrap.wrap-center{text-align:center} #page-wrap .item-wrap .wrap-image{width:100%;max-width:1280px} .item-wrap.pagination-wrap{text-align:center} .item-wrap.pagination-wrap .nav-links .prev{float:left} .item-wrap.pagination-wrap .nav-links .next{float:right} .item-wrap.pagination-wrap .nav-links .page-numbers{margin-right:5px} #section-content .pagination-wrap a{text-decoration:none} #related-items{width:100%;overflow:hidden;position:relative} #related-items .related-item{width:30%;overflow:hidden} #related-items .related-item figure{height:190px;overflow:hidden;padding:0;margin:0 0 10px} #related-items .related-item a{overflow:hidden;display:block} #related-items .related-item:hover img,#main-sidebar .sidebar-box a:hover img,.post-image a:hover img,#section-social a:hover img,#page-wrap .wrap-items .items-content a:hover img,#content-summary a:hover img{opacity:.7} .wp-block-columns {display: flex;flex-direction: row;flex-wrap: nowrap;justify-content: center;align-items: stretch;align-content: stretch;width:100%} .wp-block-columns .wp-block-column {padding:10px} .wp-block-columns .wp-block-column img {margin:0!important;} .wp-block-columns.has-2-columns .wp-block-column {width:50%;} .article-banner-wrap {width:100%;margin:20px 0 30px;} .article-banner picture {width:100%;} .article-banner picture img {width:100%;} .footer{width:100%;overflow:hidden;display:block;position:relative;right:0;bottom:0;left:0} #footer-inner{width:100%;background-color:#fff;min-height:80px} #footer-inner-wrap h3{color:#555555;font-size:18px;line-height:1.65} #footer-4 h3{color:#02b8ff} #footer-inner-wrap .footer-widget{margin-bottom:20px;font-size:15px} #footer-inner-wrap .footer-widget a,#main-sidebar ol li,#main-sidebar ul li{color:#4c4c4c;text-decoration:none;padding:15px 5px;} #footer-inner-wrap .footer-widget a:hover{color:#E21586} #footer-inner-wrap .footer-widget a i {padding:15px 0;} #footer-inner-wrap .footer-widget ul,#footer-inner-wrap .footer-widget ol{list-style-type:none;margin-left:2px;margin-top:0} #footer-inner-wrap .footer-widget ul li,#footer-inner-wrap .footer-widget ol li{line-height:23px} #footer-title{width:100%;background-color:#e21586;color:#fff;font-size:15px;box-shadow:inset 0 3px 6px 0 rgba(0,0,0,.3)} #footer-title-wrap{padding:10px;text-align:center} #footer-title-wrap span{font-weight:700} #snippet-box{display:none!important} .wp-caption-text {margin-bottom:10px;font-style:italic;} .schema-faq-section .schema-faq-question {} .schema-faq-section .schema-faq-answer {} .main-link,.main-link h2,.main-link:hover,.main-link h2:hover{color:#555!important;text-decoration:none} .main-link h2{font-weight:600;margin-bottom:10px;} /* Basis styling voor de Pinterest wrap */ .k2g-pinterest-wrap { display: flex; justify-content: center; flex-wrap: wrap; /* Zorgt ervoor dat pins zich wrappen als er geen ruimte is */ } /* Achtergrondpositie-afhankelijk van extra class (center, top, bottom) */ .k2g-pinterest-wrap.center { align-items: center; /* Verticaal centreren */ } .k2g-pinterest-wrap.top { align-items: flex-start; /* Verticaal centreren */ } .k2g-pinterest-wrap.bottom { align-items: flex-end; /* Verticaal centreren */ } /* Carousel-functionaliteit voor mobiel (horizontale scroll) */ .k2g-pinterest-carousel { overflow-x: auto; */ scroll-snap-type: x mandatory; scroll-padding-left: 0px; /* Verzeker dat de eerste pin helemaal links begint */ -webkit-overflow-scrolling: touch; flex-wrap: nowrap; /* Pins blijven op één rij bij horizontaal scrollen */ justify-content: flex-start; } .k2g-pinterest-carousel .k2g-pinterest-item { scroll-snap-align: start; /* Zorgt voor smooth scrollen */ justify-content: flex-start; } /* Styling voor pin-items */ .k2g-pinterest-item { flex: 1 1 calc(33.333% - 20px); /* Zorgt voor drie pins naast elkaar op desktop */ margin-right: 20px; margin-bottom: 20px; /* Ruimte tussen de rijen op desktop */ } .k2g-pinterest-item:last-child { margin-right: 0; /* Verwijdert de marge na het laatste item */ } /* Mobiele styling */ @media (max-width: 767px) { .k2g-pinterest-item { flex: 0 0 auto; /* Pins worden niet gewrapped op mobiel */ } /* Fallback voor wanneer er geen carousel is, maar er wel meerdere pins zijn */ .k2g-pinterest-wrap:not(.k2g-pinterest-carousel) .k2g-pinterest-item { flex: 1 1 100%; /* Pins nemen 100% van de breedte in op mobiel */ margin-bottom: 20px; /* Zorgt voor ruimte tussen pins */ } } .wp-block-embed-youtube {margin: 0 auto;padding: 0;display:block;width:100%;max-width:600px} .wp-block-embed__wrapper iframe {width:100%} .toc-wrap {width:100%;padding:20px 0} .toc-wrap .toc-title {font-weight:400;font-size:24px;margin-bottom:10px} #section-content .toc-wrap .toc-contents ul {margin: 5px 0 20px;list-style-position: outside;padding-left:20px} #section-content .toc-wrap .toc-contents ul li {margin-bottom:10px} .toc-wrap .toc-contents ul li {list-style-type: disc} .toc-wrap .toc-contents ul li ul li {list-style-type: circle} .toc-bump::before {content:"";display:block;height:80px;margin:-80px 0 0} #lv {height:1px;margin:0;padding:0} #lv img, .lv {height:1px;width:1px;border:none} #onesignal-slidedown-container #onesignal-slidedown-dialog .slidedown-button.primary {background:#E21586!important;} #onesignal-slidedown-container #onesignal-slidedown-dialog .primary.slidedown-button+.secondary.slidedown-button {color:#E21586!important;} @media screen and (max-width: 601px) { #menu-mobile-search{display:none} } @media screen and (min-width:1281px) { #section-content .wp-block-image:first-child img{height:586px} } @media screen and (max-width:1280px) { .single #main-section{width:65%} #section-content .wp-block-image:first-child img{height:415px} } @media screen and (max-width:1150px) { #content-main{width:60%} #related-items .related-item figure{height:165px} } @media screen and (min-width:1024px) { .sidebar-category picture img {min-height: 211px;} #page-wrap .section-author { margin: 0; width: 100%; border: none; } #page-wrap .wrap-bar.section-author.author-page { margin: 0 15px; width: calc(100% - 30px); } .section-author-container a, .section-author-container.no-link { padding: 45px; } .section-author-container .author-info .h4 { font-size: 1.65em; } .k2g-editor-p.has-text-color { font-size: 18px; } } @media screen and (max-width:1024px) { #main-sidebar{width:290px} #content-summary{width:275px} #content-summary .linkall{font-size:15px;} #related-items .related-item figure{height:150px} #content-main .main-wrap .main-image figure{height:400px} #main-sidebar .linkall{font-size:14px} } @media screen and (min-width:901px) { .sidebar-category picture img {min-height: 178px;} } @media screen and (max-width:900px) { .single #main-section{width:100%;float:inherit;border-bottom:1px solid #e0e0e0;padding-bottom:20px;padding-right:0} #main-sidebar{border-left:0;padding:0;width:100%;margin-top:0} #main-sidebar .sidebar-box{width:100%} #content-main .main-wrap .main-image .main-content{position:relative;padding:5px 10px 10px} #sidebar-moments{width:50%!important;float:left;padding-right:20px!important} #sidebar-labels{width:50%!important;float:left;padding-left:20px!important} #header-search{width:auto} #main-sidebar .linkall{font-size:16px} #main-sidebar .category-box{text-align:center} #main-sidebar .sidebar-category{margin:0 auto} } @media screen and (max-width:799px) { #page-wrap {padding: 10px 10px 20px} #content-main, #content-summary {width: 100%;margin-bottom: 20px} } @media screen and (max-width:768px) { .hide-mobile{display:none!important;} .show-mobile{display:block} .show-mobile-inline{display:inline-block} #header-logo{margin-top:0;text-align:center;padding-left:0} } @media screen and (max-width:767px) { #page-wrap .wrap-items .items-content{width:50%} #page-wrap .wrap-items .items-content img{max-height:232px} } @media screen and (max-width: 650px) { /*#section-bar.flexitem{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;order:2}*/ #footer-inner-wrap.flextainer{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column} #footer-inner-wrap .footer-widget{margin-bottom:0;text-align:center;width:100%} #footer-2 h3{display:none} #page-upper{border-bottom:none} #section-content figure.wp-block-image:first-child img{max-width:100%} #section-content .post-wrap .post-image,#section-content .post-wrap .post-image img{max-width:100%} #breadcrumbs{margin-bottom:0!important} #section-title h1{font-size:30px;line-height:30px;} #sidebar-moments{width:100%!important;float:unset;padding-right:0!important} #sidebar-labels{width:100%!important;float:unset;padding-left:0!important} #section-content .size-full{max-width:650px;max-height:430px} } @media screen and (max-width: 550px) { #content-main .main-wrap .main-image figure{height:325px} #related-items.flextainer{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column} #related-items .related-item{width:100%;padding:20px} #main-sidebar .category-box{text-align:left} .sidebar-category picture img {min-height: 324px;} .hide-mobile-small{display:none} } @media screen and (max-width: 480px) { #page-wrap .wrap-items .items-content{width:100%;padding:10px 30px 10px 10px;overflow:hidden;border-bottom:1px solid #f1f1f1;line-height:24px;position:relative} #page-wrap .wrap-items .items-content img{max-height:50px;height:50px;float:left;margin-right:10px;width:auto} #page-wrap .wrap-items .items-content h4{font-weight:400} #page-wrap .wrap-items .items-content .item-cat{display:none} #related-items.flextainer{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column} #related-items .related-item{width:100%;padding:20px} #content-main{margin-bottom:0} .wrap-title h1{font-size:27px} /*#section-content .size-full{max-width:480px;max-height:320px}*/ #section-content .size-full{max-width:480px} /*.single #breadcrumbs-wrap{display:none}*/ .items-content h2 {font-size:20px;} .wp-block-columns {flex-direction: column;} .wp-block-columns.has-2-columns .wp-block-column {width:100%;} #page-wrap {padding: 10px 5px 20px} #header-ticker{font-size:13px} #section-content .wp-block-table {margin-inline-start: 5px;margin-inline-end: 5px;} .sidebar-category picture img {min-height: 285px;} #section-content .wp-block-image:first-child img{height:245px} } @media screen and (max-width: 320px) { .show-mobile-small{display:block} #section-social{text-align:left;width:100%;float:unset;margin-top:20px} #header-ticker{font-size:12px} .sidebar-category picture img {min-height: 200px;} #section-content .wp-block-image:first-child img{height:206px} } /* @new */ @media screen and (max-width: 799px) { #content-summary .linkall,#main-sidebar .linkall,#sidebar-moments .linkall{width:100%;overflow:hidden;border-bottom:1px solid #f1f1f1;padding:15px 35px 15px 10px;position:relative;height:auto;} .summary-row img{max-height: 50px;height: 50px;float: left;margin-right: 10px;width: auto;} #content-summary h2{color:#E21586;padding:0 10px;} } @media screen and (max-width: 1024px) { #related-items .related-item figure{height:0;padding-bottom:60%;} } /********************************** AUTHOR PAGE & BLOCK STYLING **********************************/ .section-author { background-color: #fbfbfb; border-radius:6px;-webkit-border-radius:6px;-moz-border-radius:6px; } .section-author-container a, .section-author-container.no-link { display: flex; align-items: center; flex-wrap: wrap; padding: 20px; } .section-author-container .author-image-title-wrapper { display: flex; flex-wrap: wrap; width: 100%; } .section-author-container .author-image-title-wrapper .author-top-title { width: 100%; margin-bottom: 10px; } .section-author-container .author-image-title-wrapper .author-top-title .top-title { color: #000000; font-weight: 600; } .section-author-container .author-image { display: flex; align-items: flex-start; margin-bottom: 0; } #page-wrap .section-author-container .author-image-title-wrapper .wrap-title.author-info { padding: 0; } .section-author-container .author-image img { border-radius:50%;-webkit-border-radius:50%;-moz-border-radius:50%; margin-right: 15px; } .section-author-container .author-info .h4 { color: #000000; font-weight: 600; margin-top: 0; font-size: 18px; } .section-author-container .author-info p { margin-bottom: 0; margin-top: 5px; color: #000000; } .wrap-bar.author-bar { display: flex; align-items: center; } #page-wrap .section-author.author-page { margin: 10px 10px 0 10px; width: calc(100% - 20px); border: none; } #page-wrap .wrap-bar.section-author.author-page .author-info h1 { margin-top: 0; margin-bottom: 0; } h1.clear-bottom { margin-bottom: 0; padding-bottom: 0; } /********************* HEADER STYLING - START **********************/ .logo-svg { display: flex; align-items: center; max-width: 100%; } .logo-svg svg { width: 100%; max-width: 120px; fill: #fff; } .logo-svg:after { content: 'Blog'; margin-left: 4px; display: block; color: #555555; font-size: 16px; line-height: 1.25!important; font-weight: 900; } #header-wrap #header-logo a { max-width: 100%; } #header-menu ul li.button-menu-link { display: list-item; } /* remove line 682 - 689 after header redesign update */ @media screen and (max-width: 496px) { #header-menu { margin-top: 0; } #header-wrap { padding-top: 2px; } } @media screen and (min-width: 768px) { #header-menu ul li { display: list-item; } .button-menu-link a { padding: 10px 15px!important; margin-left: 7.5px; font-size: 16px!important; } .button-menu-link a:before { margin-right: 7.5px; font-size: 16px; } } @media screen and (min-width: 1024px) { .logo-svg svg { min-width: 178px; max-width: 178px; } .logo-svg:after { font-size: 21px; } } /********************* HEADER STYLING - END **********************/ /******************* USP STYLING - START *******************/ @keyframes cycleOneThird { 97% { transform: translateY(40px); opacity: 0; } 0%, 27%, 100% { transform: translateY(0px); opacity: 1; } 30% { transform: translateY(-40px); opacity: 0; } } @keyframes cycleTwoThird { 0%, 30% { transform: translateY(40px); opacity: 0; } 33%, 60% { transform: translateY(0px); opacity: 1; } 63%, 100% { transform: translateY(-40px); opacity: 0; } } @keyframes cycleThreeThird { 0%, 63% { transform: translateY(40px); opacity: 0; } 66%, 94% { transform: translateY(0px); opacity: 1; } 97%, 100% { transform: translateY(-40px); opacity: 0; } } header.header .topbar { width: 100%; position: relative; } header.header .topbar .topbar-container { width: 100%; margin: 0 auto; padding: 0 10px; justify-content: center; align-items: center; align-content: center; height: 36px; overflow: hidden; flex-wrap: wrap; flex-direction: row; position: relative; } header.header .topbar .topbar-container .usp-container { padding: 0; margin: 0; display: flex; align-items: center; justify-content: center; width: 100%; position: absolute; } header.header .topbar .topbar-container .usp-container:nth-of-type(1) { animation: cycleOneThird 12s linear infinite; } header.header .topbar .topbar-container .usp-container:nth-of-type(2) { animation: cycleTwoThird 12s linear infinite; } header.header .topbar .topbar-container .usp-container:nth-of-type(3) { animation: cycleThreeThird 12s linear infinite; } header.header .topbar .topbar-container .usp-container > a { display: flex; align-items: center; justify-content: center; text-decoration: none; } header.header .topbar .topbar-container .usp-container:first-child { margin-left: 0; } header.header .topbar .topbar-container .usp-container:last-child { margin-right: 0; } header.header .topbar .topbar-container .usp-container svg { fill: #87be3c; margin-right: 5px; width: 16px; height: 16px; } header.header .topbar .topbar-container .usp-container p { margin-bottom: 0; font-size: .875rem; font-weight: 600; color: #555; } @media screen and (min-width: 1024px) { header.header .topbar { width: 100%; } header.header .topbar .topbar-container { flex-wrap: wrap; width: 100%; max-width: 1280px; animation: none; height: 36px; ul { height: 36px; } } header.header .topbar .topbar-container .usp-container { padding: 0; margin: 0 1.5rem; width: auto; min-width: auto; } header.header .topbar .topbar-container .usp-container { position: relative; animation: none!important; height: 36px; } } /******************* USP STYLING - END *******************/ /***************************** SEARCH BANNER STYLING - START *****************************/ #header-wrap #header-logo, #header-wrap #header-search { flex: 1 1 auto; } #header-wrap #header-search { width: auto; max-width: 33%; } #menu-mobile-search { margin-top: 100px; height: auto; } #header-wrap #header-search form input, #menu-mobile-search form input[type="search"] { width: 100%; max-width: 100%; height: 50px; border-radius: 6px; padding: 0 45px 0 20px; font-size: 15px; color: #555555; } #header-wrap #header-search form button { border: none; background-color:transparent; top: 25px; right: 10px; transform: translateY(-50%); } @media screen and (min-width: 1280px) { #header-wrap #header-search { transform: translateX(-25%); } } /************************** SEARCH BANNER STYLING - END **************************/ /***************************** COMPLETE HEADER STYLING *****************************/ #menu-mobile-menu { @media screen and (min-width: 768px) { display: none!important; } } .mega-menu { #main { margin-top: 92px; @media screen and (min-width: 768px) { margin-top: 171px; } } .mobile-search form { width: 100%; max-width: 370px; } .logo-svg:after { display: none!important; } .mobile-search form input { width: 100%; max-width: 100%; height: 50px; border: 2px solid #d8d8d8; border-radius: 6px; padding: 0 45px 0 16px; font-size: 15px; color: #555555; } .mobile-search form button { border: none; background-color:transparent; top: calc(50% - 1px); right: 11px; transform: translateY(-50%); } .header { overflow: visible; box-shadow: none; display: flex; flex-direction: column; transition: all 0.3s ease-in-out; top: 0; &:before { content: ''; position: absolute; top: 0; left:0; right:0; bottom: 0; box-shadow: 0 1px 2px 0 rgba(66,66,66,.1), 0 2px 6px 3px hsla(0,0%,39%,.1); z-index:2; pointer-events: none; } .topbar { width: 100%; position: relative; cursor: pointer; .topbar-container { width: 100%; margin: 0 auto; padding: 0 10px; justify-content: center; align-items: center; align-content: center; height: 32px; overflow: hidden; flex-wrap: wrap; position: relative; flex-direction: column; ul { display: flex; width: 100%; margin: 0 auto; padding: 0 10px; justify-content: center; align-items: center; align-content: center; height: 32px; overflow: hidden; flex-wrap: wrap; flex-direction: row; position: relative; .usp-container { padding: 0; margin: 0; display: flex; align-items: center; justify-content: center; width: 100%; position: absolute; height: 32px; & > a { display: flex; align-items: center; justify-content: center; text-decoration: none; pointer-events: none; } svg { fill: #87be3c; margin-right: 5px; margin-left: 8px; width: 16px; height: 16px; } p { margin-bottom: 0; font-size: 14px; font-weight: 600; color: #555; position: relative; top: 1px; line-height: 44px; } &:nth-of-type(1) { animation: cycleOneThird 12s linear infinite; } &:nth-of-type(2) { animation: cycleTwoThird 12s linear infinite; } &:nth-of-type(3) { animation: cycleThreeThird 12s linear infinite; } &:first-child { margin-left: 0; } &:last-child { margin-right: 0; } } } } } #header-wrap { height: auto; display: flex; flex-direction: column; max-width: 100%; padding: 0; .menu-bg { position: absolute; left: 0; top: 100%; right: 0; height: 100vh; z-index: 0; pointer-events: none; background-color: rgba(0, 0, 0, 0); &.active { background-color: rgba(0, 0, 0, 0.4); } } .header-top-wrap { display: flex; justify-content: center; background-color: #e21586; .top-wrap-container { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; align-items: center; line-height: 1.25; height: 3.5rem; max-width: 1170px; width: 100%; padding: 0 1.5rem; .header-menu-mobile { width: 25px; height: 30px; margin-right: 1rem; margin-top: 0; padding: 0; #toggle-menu { &:after { content: "menu"; display: block; font-size: 10px; font-weight: 400; margin-top: 15px; text-transform: uppercase; color: #fff; } .bars { background-color: #fff; display: block; height: 3px; position: relative; width: 25px; &:before { content: ''; background-color: #fff; display: block; height: 3px; position: relative; top: 6px; width: 25px; } &:after { content: ''; background-color: #fff; display: block; height: 3px; position: relative; top: 9px; width: 25px; } } } } #header-logo { margin-right: 2.5rem; margin-top: 0; display: flex; flex: 2 1 auto; align-items: center; flex-direction: row; padding-left: 0; .header-logo-holder { display: flex; flex-direction: column; a { max-width: 100%; .logo-svg { display: flex; align-items: center; max-width: 120px; padding-bottom: 1px; position: relative; top: 1px; &:after { display: none; } .hidden-xs { display: none; fill: #fff!important; } .visible-xs { display: flex; fill: #fff!important; } } } &.de { a { .logo-svg { max-width: 155px; svg { min-width: 155px; max-width: 155px; } } } } } } #header-search { align-items: center; display: flex; flex: 2 1 auto; justify-content: center; padding-top: 0; transform: translateX(0%); form { width: 100%; max-width: 370px; input { width: 100%; max-width: 100%; height: 44px; border-radius: 6px; padding: 0 45px 0 16px; font-size: 15px; color: #555555; } button { border: none; background-color:transparent; top: 0; right: 4px; border-radius: 4px!important; transform: translateY(0%); svg { position: relative; top: 1px; } &:hover { background-color: #f3f3f3; } } } } #header-menu { display: flex; margin-left: 0; align-items: flex-end; flex: 1 1 auto; flex-direction: column; justify-content: center; margin-top: 0; & > div { ul { display: flex; flex-direction: row; li { margin-left: 1rem; &:first-child { margin-left: 0; } } } & > ul { overflow: visible; & > li { position: relative; text-align: center; & > a { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; flex-direction: column; font-size: 16px; line-height: 1.25; padding: 4px 0; svg { fill: #fff; position: relative; right: 6px; @media screen and (max-width:768px) { width: 20px!important; height: 20px!important; right: 0; } } span { color: #fff; display: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 100%; margin-left: 12px; position: relative; right: 6px; top: 1px; } &.title-fill { span { position: absolute; left: 50%; top: auto; right: auto; bottom: 2px; transform: translateX(-50%); margin-left: 8px; } &:after { content: 'Inloggen'; color: transparent; display: flex; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 100%; margin-left: 12px; position: relative; right: 6px; top: 1px; } @media screen and (max-width: 768px) { &:after { display: none; } } } &:hover { border-radius: 6px; background-color: #c51977; } } &.menu-item-type-taxonomy { position: relative; } } } } } } } .header-bottom-wrap { display: flex; justify-content: center; .bottom-wrap-container { display: flex; justify-content: space-between; align-items: center; max-width: 1170px; width: 100%; padding: 0 1.5rem; } & > div { #menu-mega-menu { display: flex; padding: 0; margin: 0; & > li { position: static; list-style-type: none; & > a { display: block; font-weight: 700; margin: 0 1rem; padding: 0.875rem 0; text-decoration: none; position: relative; font-size: 1.125rem; color: #555; border-bottom: 2px solid transparent; &:before { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 4px; background-color: #E21586; transform-origin: left; transform: scale(0,1); } &:hover { :before { transform: scale(1,1); } } } &.menu-item-has-children { cursor: default!important; & > a { cursor: default!important; pointer-events: none; } } &.active-item { & > a { &:before { transform: scale(1,1)!important; } } } &:first-child { & > a { margin-left: 0; } } & > .sub-menu-wrapper { padding: 2.5rem 0; position: absolute; left: 0; right: 0; bottom: 0; transform-origin: top; transform: scale(1,0) translateY(100%); margin: 0; background-color: #ffffff; z-index:1; .k2g-menu-title { padding: 0.25rem 0; font-weight: 700; font-size: 16px; } .sub-menu { li { a { display: inline-block; margin: 0; font-weight: 400; font-size: 16px; line-height: 1.65; padding: .5rem 0; &:hover { color: #E21586; text-decoration: underline; } } &.bold-menu-link { a { font-weight: 700; } } } } .image-submenu-wrapper { display: flex; justify-content: space-between; width: 100%; max-width: 1170px; margin: 0 auto; padding: 0 1.5rem; .sub-menu-holder { width: 67%; display: flex; .sub-menu { -moz-columns: 3; column-count: 3; flex: 1 1; margin: 0; .mega-menu-wrapper { padding-bottom: calc(1lh + .5rem); page-break-inside: avoid; -moz-column-break-inside: avoid; break-inside: avoid; .list-flex { display: flex; flex-direction: column; li { list-style-type: none; a { display: block; padding: 0.25rem 0; font-size: 16px; border: none; } } } } } } .sub-menu-image-wrapper { width: 29%; display:block; img { width: 100%; border-radius: 6px; } a.button { appearance: none; height: 3rem; font-size: 1rem; position: relative; display: inline-flex; border: none; font-weight: 600; justify-content: center; align-items: center; text-align: center; text-decoration: none; cursor: pointer; box-sizing: border-box; border-radius: 0; padding: 0 24px; color: #ffffff!important; background-color: #e21586; border: 2px solid transparent; border-radius: 6px; font-weight: 600; -webkit-transition: box-shadow 125ms ease-in-out; transition: box-shadow 125ms ease-in-out; line-height: 1.2rem; margin-top: 1.5rem; width: 100%; &:hover { box-shadow: 0 8px 15px #f4b2da; backface-visibility: hidden; text-decoration: none; } svg { fill: #ffffff; margin-left: 8px; } } } } } &:hover { & > .sub-menu-wrapper { transform: scale(1,1) translateY(calc(100% - 1px)); } } } } .small-menu { & > div { ul { display: flex; padding: 0; margin: 0 -12px 0 0; li { list-style-type: none; a { color: #979797; font-weight: 400; line-height: 2rem; font-size: .875rem; display: inline-flex; align-items: center; justify-content: center; padding: 0 14px; text-decoration: none; transition: all 0.15s ease-out; background-color: #ffffff; border-radius: 6px; &:hover { background-color: #fdeff8; color: #E21586; } } } } } } } } } @media screen and (min-width: 1024px) { .topbar { width: 100%; .topbar-container { flex-wrap: wrap; width: 100%; max-width: 1170px; animation: none; height: 36px; ul { .usp-container { padding: 0; margin: 0 1.5rem; width: auto; min-width: auto; position: relative; animation: none!important; } } } } #header-wrap { & > div { padding-left: 1.5rem; padding-right: 1.5rem; } .header-top-wrap { .top-wrap-container { height: 72px; #header-logo { max-width: 178px; .header-logo-holder { a { .logo-svg { max-width: 178px; .hidden-xs { display: flex; } .visible-xs { display: none; } } } &.de { a { .logo-svg { max-width: 228px; svg { min-width: 228px; max-width: 228px; } } } } } &.de { margin-right: 2.5rem; max-width: 228px; } } #header-search { max-width: 471px; width: 471px; form { max-width: 100%; } &.de { max-width: 448px; form { max-width: 100%; } } } #header-menu { margin-left: 1rem; & > div { ul { li { margin-left: 24px; &:first-child { margin-left: 24px; } } } & > ul { & > li { & > a { span { display: flex; } } } } } &.de { margin-left: 2rem; } } } } } } @media screen and (min-width: 1200px) { #header-wrap #header-menu { min-width: 393px; } #header-wrap .header-top-wrap { height: 4.5rem; } #header-wrap .header-bottom-wrap { height: 3.45rem; } } &.scrolled { top: -32px; @media screen and (min-width: 1024px) { top: -36px; } } } .show-mobile { display: block!important; } #menu-mobile-menu { position: fixed; top: 0; left: 0; right: 0; background-color: white; z-index: 999; .mobile-menu-wrapper { margin-top: 0; height: 100vh; bottom: 0; z-index: 25; padding: 60px 0 0 0; overflow-x: hidden; display: block; left: -100%; right: 100%; box-shadow: none; transition: all 0.3s ease-out; .mobile-top-content { background-color: #e21586; bottom: auto; height: 60px; left: 0; position: absolute; right: 0; top: 0; z-index: 999; .mobile-header { display: flex; flex-direction: row; align-items: center; margin-left: 0.5rem; margin-right: 0.5rem; .mobile-header-column { padding-left: 0.5rem; padding-right: 0.5rem; display: flex; width: 100%; flex-basis: 50%; max-width: 50%; flex: 0 0 auto; flex-direction: row; align-items: center; height: 60px; &.header-logo-holder { a { line-height: 3.5rem; } } &.close-mobile-menu { justify-content: flex-end; button { color: #fff; font-weight: 600; background: none; border: none; padding: 0; position: relative; top: 1px; cursor: pointer; } svg { padding-left: 5px; font-size: 1.25rem; fill: #fff; } } } } &.fixed-div { position: fixed; } } .mobile-content { .mobile-search { background: #f3f3f3; margin: 0; padding: 1rem; position: fixed; top: 60px; z-index: 99; left: -100%; right: 100%; transition: all 0.3s ease-out; form { max-width: 100%; position: relative; input { margin: 0; } button { position: absolute; svg { fill: #e21586; } } } } .mobile-menu-holder { display: flex; flex-direction: column; position: relative; padding-top: 83px; & > div { background: #fff; display: flex; flex-direction: column; height: 100%; overflow-y: scroll; overscroll-behavior: contain; padding-bottom: 0; width: 100%; margin-left: auto; margin-right: auto; padding-left: 1rem; padding-right: 1rem; &:last-child { padding-bottom: 1rem; } ul { display: flex; flex-direction: column; font-size: 1rem; font-weight: 600; justify-content: space-between; line-height: 3; margin-bottom: 0.5rem; margin-top: 16px; li { display: inline-flex; align-items: center; padding: 0; border: none; font-size: 16px; line-height: 48px; color: #555; font-weight: 600; a { display: inline-flex; align-items: center; padding: 0; border: none; font-size: 16px; line-height: 48px; color: #555; font-weight: 600; } } &.sub-menu { margin-top: 0; li { a { font-size: 16px; font-weight: 400; } &.bold-menu-link { a { font-weight: 600; svg { fill: #555555; } } } } } .sub-menu-wrapper { position: absolute; right: -110%; top: 0; width: 100%; z-index: 30; background-color: #ffffff; transition: height 0s ease-out 0.3s, right 0.3s ease-out; padding: 0 1rem; height: 0; overflow: hidden; .sub-menu-holder { display: flex; flex-direction: column; .back-menu { display: inline-flex; align-items: center; color: #555555; text-decoration: none; line-height: 1.2; padding: 16px 0; position: relative; top: 1px; font-weight: 400; cursor: pointer; svg { margin-right: 8px; fill: #555; position: relative; top: -1px; } &:hover, &:active { text-decoration: underline; } } .submenu-title { color: #555555; font-size: 1.25rem; font-weight: 700; line-height: 1.25; padding: 16px 0; margin-top: 2px; } .sub-menu { margin-bottom: 0; .mega-menu-wrapper { margin-bottom: 1rem; position: relative; top: -1px; &:last-child { margin-bottom: 14px; } .k2g-menu-title { color: #555; font-weight: 700; line-height: 1.25; padding: 16px 0; } .list-flex { li { a { color: rgb(85,85,85); font-weight: 400; line-height: 1.25; padding: 16px 0; svg { fill: #979797; } } } } } } } &.show-menu { position: fixed; top: 142px; right: 0; height: calc(100vh - 82px - 60px); overflow: visible; overflow-y: scroll; transition: height 0s ease-out, right 0.3s ease-out; } } } & > ul { margin-bottom: 0; li { a { font-size: 20px; font-weight: 700; justify-content: space-between; width: 100%; display: inline-flex; align-items: center; color: #555555; line-height: 56px; svg { fill: #555555; position: relative; top: -1px; } } } } } .sub-menu-holder { a.button { appearance: none; height: 3rem; font-size: 1rem; position: relative; display: inline-flex; border: none; font-weight: 600; justify-content: center; align-items: center; text-align: center; text-decoration: none; cursor: pointer; box-sizing: border-box; border-radius: 0; padding: 0 24px; color: #ffffff!important; background-color: #e21586; border: 2px solid transparent; border-radius: 6px; font-weight: 600; -webkit-transition: box-shadow 125ms ease-in-out; transition: box-shadow 125ms ease-in-out; line-height: 1.2rem; margin-bottom: 1rem; margin-top: 0; width: 100%; box-shadow: none; &:hover { box-shadow: 0 8px 15px #f4b2da; backface-visibility: hidden; text-decoration: none; } svg { fill: #ffffff; margin-left: 8px; } } } } } .login-button { position: relative; bottom: 15px; left: 15px; color: #555; display: inline-flex; align-items: center; font-weight: 600; font-size: 16px; margin-bottom: 15px; svg { margin-right: 8px; fill: #555; } span { position: relative; top: 2px; } } &.show-mobile-menu { left: 0; right: 0; .mobile-search { left: 0!important; right: 0!important; } } } } @media screen and (min-width: 768px) { .show-mobile { display: none!important; } } } /***************************** TEXTCOPY BLOCK STYLING - START *****************************/ .k2g-editor-p:empty { margin-bottom: 0; } .k2g-editor-p:has(> strong:empty) { margin-bottom: 0; } .k2g-editor-p.has-text-color { color: #000000bd; } .relative-container { display: flex; } .wp-block-column.relative-container { display: block; position: relative; padding: 2em; } .wp-block-column.relative-container > .text-copy-container { position: static!important; } .wp-block-group.relative-container { margin-bottom: 30px; } .text-copy-container { position: relative; margin: 0!important; display: flex; flex-wrap: wrap; flex-grow: 1; padding: 2em; } .relative-container .text-copy-container.column-container { padding: 2em; margin: 0!important; } .wp-block-column.relative-container .text-copy-container.column-container { padding: 2em; margin: -2em!important; } .text-copy-container p, .text-copy-container cite { width: 100%; margin-bottom: 10px; } .text-copy-container p:last-child, .text-copy-container cite { margin-bottom: 0; } .text-copy-container .copy-overlay { position: absolute; top:0; bottom:0; left:0; right:0; opacity: 0; transition: all 0.3s ease-in-out; background-color: #f0fbffe6; display: flex; align-items: center; justify-content: center; } .text-copy-container .copy-icon { position: absolute; right: 10px; top: 10px; display: inline-flex; padding: 0; transition: all 0.3s ease-in-out; } .text-copy-container .copy-icon svg { fill: #E21586; } .text-copy-container .copy-icon.active svg { fill: #F8D1EA; } .text-copy-container .copy-overlay .copy-button { height: 3rem; font-size: 18px; position: relative; display: inline-flex; font-weight: 600; -webkit-box-pack: center; justify-content: center; -webkit-box-align: center; align-items: center; text-align: center; text-decoration: none; cursor: pointer; box-sizing: border-box; padding: 0px 24px; color: #E21586!important; background-color: rgb(255, 255, 255); border: 2px solid #E21586; border-radius: 6px; line-height: 1.2; transition: all 0.3s ease-in-out; overflow: hidden; box-shadow: none!important; } .text-copy-container .copy-overlay .copy-button:hover { background-color: #FDEFF8!important; } .text-copy-container .copy-overlay .copy-button.disabled { color: #D8D8D8!important; border-color: #D8D8D8; pointer-events: none; cursor: default; background-color: #EAEAEA!important; } .text-copy-container .copy-overlay .copy-button svg { fill: #E21586; margin-right: 8px; transition: all 0.3s ease-in-out; } .text-copy-container .copy-overlay .copy-button svg.right { margin-right: 0; margin-left: 8px; } .text-copy-container .copy-overlay .copy-button.disabled svg { fill: #D8D8D8; } .text-copy-container p.has-text-color { pointer-events: none; } .relative-container:hover .copy-overlay { opacity: 1; } .wp-block-column.is-style-margin-bottom:last-child, .wp-block-group.is-style-margin-bottom{ margin-bottom: 30px!important; } @media screen and (min-width: 768px) { .wp-block-column.is-style-margin-bottom { margin-bottom: 30px!important; } .text-copy-container.column-container.bottom30, .bottom30 { margin-bottom: 30px!important; } } @media screen and (max-width: 768px) { .relative-container:hover .copy-overlay.copied { opacity: 0; } } /***************************** TEXTCOPY BLOCK STYLING - END *****************************/ /*************************** OBJECT STYLING - START ***************************/ .other-posts-container { display: flex; flex-direction: column; gap: 1rem; padding-bottom: 1rem; } .other-posts-container .title-holder h3 { margin-bottom: 0!important; font-size: 1rem!important; text-align: center; } .other-posts-buttons { margin: 0 auto!important; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.5rem; } .other-posts-buttons li { margin: 0!important; list-style-type: none; } .other-posts-buttons li a { display: inline-flex; align-items: center; padding: 0px 10px; font-size: 0.875rem; font-weight: 600; line-height: 1.5; border: 2px solid rgb(216, 216, 216); border-radius: 50px; height: 38px; background-color: rgb(255, 255, 255); color: rgb(85, 85, 85); cursor: pointer; text-decoration: none!important; } .other-posts-buttons li a:hover { background-color: rgb(243, 243, 243); } @media screen and (min-width: 1024px) { .other-posts-container { gap: 0.5rem; padding-bottom: 0.5rem; } .other-posts-buttons { max-width: 75%; } .other-posts-buttons li a { padding: 0 24px; } } /*************************** OBJECT STYLING - END ***************************/ /**************************** FOOTER STYLING - START ****************************/ .customer-service-banner { background-color: #fff5e6; } .customer-service-banner .container { max-width: 1170px; padding: 0 1.5rem; } .customer-service-banner .container .customer-service-wrapper { display: grid; grid-template-columns: 12rem 1fr 12rem; } .customer-service-banner .container .customer-service-wrapper .image-holder { display: flex; grid-column: 1; grid-row: span 2; } .customer-service-banner .container .customer-service-wrapper .content-holder { display: flex; flex-wrap: wrap; grid-column: 2; flex-direction: column; padding: 1.2rem 0 0 0; } .customer-service-banner .container .customer-service-wrapper .customer-service-buttons { text-align: center; grid-column: 2; box-sizing: border-box; padding: 0 0 1.2rem 0; } .customer-service-banner .container .customer-service-wrapper .content-holder > * { width: 100%; text-align: center; } .customer-service-banner .container .customer-service-wrapper .content-holder h3 { font-size: 32px; line-height: 2.5rem; margin: 1rem 0; font-weight: 700; color: #555; } .customer-service-banner .container .customer-service-wrapper .content-holder p { margin-bottom: 0; color: #555; } .customer-service-banner .container .customer-service-wrapper .customer-service-buttons a, .customer-service-banner .container .customer-service-wrapper .customer-service-buttons button { color: #555555!important; font-weight: 600; text-decoration: none; cursor: pointer; box-sizing: border-box; border: none; padding: 0; background-color: transparent; margin: 0 1rem; display: inline-flex; align-items: center; } .customer-service-banner .container .customer-service-wrapper .customer-service-buttons a svg, .customer-service-banner .container .customer-service-wrapper .customer-service-buttons button svg { fill: #e21586; margin-right: 8px; } .footer #footer-inner { border-top: 2px solid #d8d8d8; padding-bottom: 3rem; padding-top: 3rem; } .footer #footer-inner #footer-inner-wrap { display: flex; justify-content:space-between; align-items:flex-start; flex-wrap: wrap; max-width: 1170px; padding: 0 1.5rem; } .footer #footer-inner #footer-inner-wrap .footer-inner-holder { display: flex; flex-wrap: wrap; justify-content: space-between; width: 100%; padding: 0 0.75rem; } .footer #footer-inner #footer-inner-wrap .footer-inner-holder.title-holder { width:100%; padding: 0; } .footer #footer-inner #footer-inner-wrap .footer-inner-holder.info-holder { justify-content: flex-end; } .footer #footer-inner #footer-inner-wrap .footer-inner-holder.info-holder .social-button-holder { width: 100%; margin-top: 1.5rem; } .footer #footer-inner #footer-inner-wrap .footer-inner-holder .social-button-holder .social-buttons { display: flex; gap: 1rem; } .footer #footer-inner #footer-inner-wrap .footer-inner-holder .social-button-holder .social-buttons a { display: inline-flex; justify-content: center; align-items: center; width: 24px; height: 24px; padding: 0; background-color: #ffffff; border-radius: 50%; transition: all 0.15s ease-out; } .footer #footer-inner #footer-inner-wrap .footer-inner-holder .social-button-holder .social-buttons a svg { fill: #e21586; position: relative; transition: all 0.15s ease-out; } .footer #footer-inner #footer-inner-wrap .footer-inner-holder span.h4 { display: block; width: 100%; font-size: 1.5rem; font-weight: 900; margin-bottom: 1.25rem; margin-top: 0; text-align: left; color: #555; } .footer #footer-inner #footer-inner-wrap .footer-inner-holder.menu-holder { width: 100%; } .footer #footer-inner #footer-inner-wrap .footer-inner-holder.menu-holder > div { width: 100%; } .footer #footer-inner #footer-inner-wrap .footer-inner-holder.menu-holder ul { column-count: 2; margin: 0; } .footer #footer-inner #footer-inner-wrap .footer-inner-holder.menu-holder ul li { list-style-type: none; } .footer #footer-inner #footer-inner-wrap .footer-inner-holder.menu-holder ul li a { font-size: 1rem; font-weight: 600; display: inline-block; padding: 0; line-height: 2.3; padding-right: 0.5rem; color: #555!important; } .footer #footer-inner #footer-inner-wrap .footer-inner-holder.info-holder .footer-banner { border-radius: 6px; color: #555; display: flex; justify-content: center; margin-bottom: 1rem; text-decoration: none; width: 100%; } .footer #footer-inner #footer-inner-wrap .footer-inner-holder.info-holder .footer-banner:last-child { margin-bottom: 0; } .footer #footer-inner #footer-inner-wrap .footer-inner-holder.info-holder .footer-banner.blue { background-color: #e6f8fd; margin-bottom: 0; } .footer #footer-inner #footer-inner-wrap .footer-inner-holder.info-holder .footer-banner.green { background-color: #f6faf0; } .footer #footer-inner #footer-inner-wrap .footer-inner-holder.info-holder .footer-banner .footer-banner-content { display: flex; align-items: center; gap: 1rem; padding: 1rem; max-width: 400px; width:100%; } .footer #footer-inner #footer-inner-wrap .footer-inner-holder.info-holder .footer-banner .footer-banner-content .footer-banner-image { min-width: 60px; max-width: 60px; display: flex; } .footer #footer-inner #footer-inner-wrap .footer-inner-holder.info-holder .footer-banner .footer-banner-content .footer-banner-image.qr-code { min-width: 52px; max-width: 52px; display: flex; } .footer #footer-inner #footer-inner-wrap .footer-inner-holder.info-holder .footer-banner .footer-banner-content .footer-banner-image picture { display: flex; } .footer #footer-inner #footer-inner-wrap .footer-inner-holder.info-holder .footer-banner .footer-banner-content .footer-banner-image img { width: 100%; height: auto; } .footer #footer-inner #footer-inner-wrap .footer-inner-holder.info-holder .footer-banner .footer-banner-content .footer-banner-last-child { margin-left: auto; } .footer #footer-inner #footer-inner-wrap .footer-inner-holder.info-holder .footer-banner .footer-banner-content .footer-banner-image img.footer-app-image { border-radius: 8px; filter: drop-shadow(0 2px 4px rgba(0,0,0,.1)); } .footer #footer-inner #footer-inner-wrap .footer-inner-holder.info-holder .footer-banner .footer-banner-content .footer-banner-title span { line-height: 1.25; font-size: 16px; color: #555; } .footer #footer-inner #footer-inner-wrap .footer-inner-holder.info-holder .footer-banner .footer-banner-content .footer-banner-title span.h4 { font-weight: 700; margin-bottom:0; color: #555; } .footer #footer-inner #footer-inner-wrap .footer-inner-holder.info-holder .footer-banner:hover .footer-banner-content .footer-banner-title span { text-decoration: underline; } .footer #footer-inner #footer-inner-wrap .footer-inner-holder.info-holder .footer-banner:hover .footer-banner-content .footer-banner-title span.h4 { text-decoration: none; color: #555; } .footer-payment { background-color: #fdeff8; padding: 1.5rem 0; } .footer-payment .container .payment-wrapper { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; } .footer-payment .container .payment-wrapper strong { line-height: 1.25; margin-right: 1rem; color: #555; } .footer-payment .container .payment-wrapper img { max-width: 300px; height: auto; } .footer-payment .container .payment-wrapper svg { fill: #87be3c; margin-right: 8px; } #footer-title { box-shadow: none; } #footer-title #footer-title-wrap { display: flex; justify-content: center; align-items: center; padding: 21px 10px; } #footer-title #footer-title-wrap > span { margin-right: 1.5rem; font-weight: 600; font-size: 0.9rem; } #footer-title #footer-title-wrap > div > ul { display: flex; justify-content: space-between; margin: 0; } #footer-title #footer-title-wrap > div > ul li { list-style-type: none; } #footer-title #footer-title-wrap > div > ul li a { margin-right: 1.5rem; color: #fff!important; font-size: 0.9rem; font-weight: 600; } #footer-title #footer-title-wrap > div > ul li:last-child a { margin-right: 0; } .footer-row { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; max-width: 1170px; } @media screen and (min-width: 1024px) { .footer #footer-inner #footer-inner-wrap .footer-inner-holder.menu-holder { width: 58.33%; } .footer #footer-inner #footer-inner-wrap .footer-inner-holder.menu-holder ul { column-count: 3; } .footer #footer-inner #footer-inner-wrap .footer-inner-holder { width: 41.6%; } .footer-row { margin: 0 -0.75rem; } } @media screen and (max-width: 1024px) { #page-upper { margin-bottom: 0; padding-bottom: 0; } #main-sidebar .sidebar-box { padding-bottom: 0; } .customer-service-banner .container .customer-service-wrapper { grid-auto-rows: min-content; grid-template-columns: 1fr; } .customer-service-banner .container .customer-service-wrapper .image-holder { grid-row: 2; justify-content: center; } .customer-service-banner .container .customer-service-wrapper .content-holder { grid-row: 1; grid-column: 1; margin-bottom: 15px; } .customer-service-banner .container .customer-service-wrapper .customer-service-buttons { grid-column: 1; grid-row: 3; } .customer-service-banner .container .customer-service-wrapper .customer-service-buttons button { margin: 1rem 0; } .customer-service-banner .container .customer-service-wrapper .customer-service-buttons a { display: block; width: 100%; margin: 1rem 0; } .customer-service-banner .container .customer-service-wrapper .content-holder h3 { font-size: 1.35rem; margin: 0.5rem 0; } .customer-service-banner .container { padding: 0 1rem; } .footer #footer-inner { padding: 3rem 1rem; } .footer #footer-inner #footer-inner-wrap { padding: 0; } .footer #footer-inner #footer-inner-wrap .footer-inner-holder { padding: 0; } .footer-payment .container { padding: 0; } .footer-payment .container .payment-wrapper img { margin-top: 15px; } #footer-title { padding: 1.5rem 0; } #footer-title #footer-title-wrap { padding: 0; } #footer-title #footer-title-wrap > div { order: -1; margin-bottom: 1.5rem; } #footer-title #footer-title-wrap > div > ul, #footer-title #footer-title-wrap { flex-wrap: wrap; } #footer-title #footer-title-wrap > div > ul li { width: 100%; } #footer-title #footer-title-wrap > span { margin: 0 0 1rem 0; } #footer-title #footer-title-wrap > div > ul li a { display: inline-block; margin: 0 0 5px 0; } .footer #footer-inner #footer-inner-wrap .footer-inner-holder.info-holder { margin-top: 1.5rem; } .footer-payment .container .payment-wrapper img { max-width: 85%; } } /**************************** FOOTER STYLING - END ****************************/ .sidebar-box > a { padding: 0!important; display:block!important; background-color: transparent!important; } /******************************* USP BANNER STYLING - START ****************************/ .modal { background-color: #fff; display: flex; flex-direction: column; height: auto; max-height: 100vh; overflow-x: visible!important; overflow-x: initial!important; position: relative; width: 100vw } .modal h3 { font-size: 1.15rem; line-height: 1.75rem; margin-bottom: 0; } .modal .h1 { font-size: 2.25rem; line-height: 2.25rem; margin-bottom: 0.825rem; font-weight: 700; } .modal.modal--after-open { animation: modalIn .3s ease-out; animation-fill-mode: forwards } .modal.modal--before-close { animation: modalOut .3s ease-out; animation-fill-mode: forwards } .modal.modal--full { border: none; border-radius: 0 } .modal .modal__close { background: none; border: 0; bottom: auto; cursor: pointer; left: auto; line-height: 0; padding: 1rem; position: absolute; right: 0; top: 0; z-index: 2 } .modal .modal__close .icon { font-size: 1rem; fill: #737373; transition: transform 125ms linear; will-change: transform } .modal .modal__close:focus .icon,.modal .modal__close:hover .icon { transform: translateZ(0) scale(1.3); fill: var(--magenta); -webkit-backface-visibility: hidden; backface-visibility: hidden } .modal .modal__close:active .icon { fill: var(--magenta) } .modal .modal__header { display: flex; margin: -1rem -1rem 1rem; padding: 3rem 1rem 1rem } .modal .modal__header .modal__header-content,.modal .modal__header .modal__header-image { display: flex } .modal .modal__header .modal__header-image { align-items: center; justify-content: center; margin-right: 2rem } .modal .modal__header .modal__header-image>img { display: block; max-height: 150px; max-width: 150px; width: auto } .modal .modal__header .modal__header-content { flex-direction: column; justify-content: center } .modal .modal__header .modal__header-content .modal__header-content-title { color: var(--magenta); font-size: 1.5rem; font-weight: 700; margin: 0 } .modal .modal__header .modal__header-content span { font-size: 1.1rem; line-height: 1.25; margin-bottom: .2rem } .modal .modal__heading { color: #555; display: block; line-height: normal; margin: 1rem 0 1.5rem } .modal .modal__heading.has--subtitle { margin-bottom: 5px } .modal .modal__content { flex: 1 1 auto; max-height: 100%; overflow-x: hidden; overflow-y: auto; width: 100%; -webkit-overflow-scrolling: touch } .modal .modal__content p { white-space: pre-wrap } .modal .modal__content img.modal__content__product-image { display: inline-block; max-height: 150px; max-width: 100%; width: auto } .modal .modal__content-inner { min-height: 100%; padding: 1rem } .modal .modal__buttons { margin-top: 2rem } .modal .modal__footer { box-shadow: 2px 0 5px rgba(0,0,0,.1); padding: 1.25rem 1rem; z-index: 1 } .modal .modal-footer__buttons { display: flex; gap: 1rem; } .modal .modal-footer__buttons .button { flex: 1 1 auto; } .modal.modal--drawer { padding-top: 0; } .modal.modal--drawer .modal__content .modal__content-inner { padding: 1.5rem 1rem; } .modal.modal--drawer .modal__heading { font-size: 1.5rem; margin-top: 0; } .modal.modal--drawer .modal__close { right: .5rem; top: 1rem; } .modal.modal--drawer.modal--left { border: none; margin-right: auto; } .modal.modal--drawer.modal--right { margin-left: auto; } .modal.modal--has-header-image .modal__close { align-items: center; background: #fff; border-radius: 6px; display: flex; height: 2.25rem; justify-content: center; padding: 0; right: .25rem; top: .25rem; width: 2.25rem; } .modal__overlay { align-items: center; background-color: hsla(0,0%,95%,.8); bottom: 0; display: flex; justify-content: center; left: 0; opacity: 0; position: fixed; right: 0; top: 0; transition: opacity .3s ease-in-out; z-index: 200; } .modal__overlay.modal__overlay--after-open,.modal__overlay.modal__overlay--no-animation { opacity: 1; } .modal__overlay.modal__overlay--before-close { opacity: 0; } .modal--overflow .modal__content { overflow: visible; } .modal.modal--giftselect { padding-top: 0; } .modal--order-gift-modal .modal__content p { white-space: normal; } .modal.modal--has-header-image .modal__close { right: .5rem; top: .5rem; } .modal .modal__header { margin: -1.875rem -1.875rem 1.875rem; } .modal .modal__content-inner { padding: 1.875rem; } .modal .modal__footer { padding: 1.25rem 1.875rem; } .modal.modal--drawer .modal__content .modal__content-inner { padding: 2.5rem 2rem; } .modal.modal--drawer .modal__heading { font-size: 2rem; padding-right: 2.5rem; } .modal.modal--drawer .modal__footer { padding: 1.25rem 2rem; } .modal.modal--drawer .modal__footer .button { appearance: none; height: 3rem; font-size: 1rem; position: relative; display: inline-flex; -webkit-box-pack: center; justify-content: center; -webkit-box-align: center; align-items: center; text-align: center; text-decoration: none; cursor: pointer; box-sizing: border-box; padding: 0px 40px 0px 24px; color: rgb(255, 255, 255); background-color: rgb(226, 21, 134); border: 2px solid transparent; border-radius: 6px; font-weight: 600; transition: box-shadow 125ms ease-in-out 0s; } .modal.modal--drawer .modal__footer .button .icon { position: absolute; right: 16px; height: 1rem; width: 1rem; min-width: 1rem; fill: #fff; } body.locked { overflow: hidden!important; height:100vh; } .modal.modal--drawer:not(.modal--has-header-image) .modal__close { right: 1.5rem; top: 2rem; } .modal.modal--small { max-width: 450px; } .modal.modal--large { max-width: 992px; } .modal.modal--full { height: 100%; max-height: 100vh; max-width: 100vw; width: 100%; } .usp-modal { pointer-events: none; .modal__overlay { background-color: transparent; transition: all 0.3s ease-in-out; } .modal.modal--drawer { border-radius: 0; height: 100vh; justify-content: space-between; max-height: 100vh; max-width: 600px; border-left: 3px solid #d8d8d8; transform: translateX(100%); transition: all 0.3s ease-in-out; .modal__close { bottom: auto; left: auto; position: absolute; right: .5rem; top: .5rem; svg { fill: #737373!important; width: 24px; height: 24px; transition: all 0.3s ease-in-out; transform: scale(1); transform-origin: center; } &:hover { svg { transform: scale(1.3); fill: #e21586!important; } } } .modal__content { h2 { font-weight: 700!important; font-size: 18px; line-height: 32px; margin-bottom: 20px; margin-top: 0; } p { font-size: 16px; margin: 0 0 .625rem; margin-bottom: 1.25rem; } .text--strong { display: flex; align-items: center; margin-bottom: .625rem; font-weight: 600; svg { fill: #87be3c; margin-right: 8px; } } .modal__content-inner { padding: 1.5rem 1rem; } } .modal__header-image { img { width: 100%; } } } &.active { pointer-events: visible; .modal__overlay { background-color: hsla(0,0%,95%,.8); } .modal.modal--drawer { transform: translateX(0); } } @media screen and (min-width: 768px) { .modal.modal--drawer { .modal__content { h2 { font-size: 24px; line-height: 32px; margin-bottom: 20px; margin-top: 0; } .text--strong { display: flex; align-items: center; margin-bottom: .625rem; font-weight: 600; svg { fill: #87be3c; margin-right: 8px; } } .modal__content-inner { padding: 2.5rem 2rem; } } } } } /************************ K2G CARD WIDGET STYLING ***********************/ .no-title { #k2go-widget-wrapper { margin-top: 0; #k2go-widget-title-text { display: none; } } } #k2go-widget-container-k2gCards { @media screen and (min-width: 768px) { margin: 0 -20px; } } #k2go-widget-container-k2gCards #k2go-widget-wrapper { font-family: 'Source Sans Pro'!important; } #k2go-widget-wrapper { margin: 30px 0; border: none; #k2go-widget-title-row { justify-content: center!important; #k2go-widget-title-text { font-size: 24px!important; font-weight: 700!important; } } #k2go-widget-card-row { &.wp-mobile-view { min-height: 350px; overflow: hidden; .k2go-widget-card { opacity: 0; position: absolute; z-index: -1; left: -100%; transition: all 0.3s ease-in-out; @media screen and (max-width: 768px) { max-width: 100%!important; width: calc(100% - 40px)!important; } &.fade-to-right { z-indeX: 1; left: 100%; } &.fade-to-left { z-indeX: 1; left: -100%; } &.position-right { left: 100%; z-index: 1; opacity: 0; } &.active-card { opacity: 1; z-index: 2; left: 20px; } } } } .k2g-cardwidget-arrows { display: flex; justify-content: space-between; position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); z-index: 9; pointer-events: none; .k2g-arrow { width: 35px; height: 35px; border-radius: 50%; background-color: #E11586; display: flex; justify-content: center; align-items: center; pointer-events: all; cursor: pointer; svg { width: 18px; height: 18px; fill: #fff; } &.k2g-prev-arrow { transform: rotate(-180deg); transform-origin: center; } &.k2g-next-arrow { } } } } #k2go-widget-usp-row { justify-content: center!important; #k2go-widget-usps { flex-direction: column; align-items: flex-start; gap: 0px; display: none; } #k2go-widget-button { text-decoration: none; #k2go-widget-button-text { p { color: #fff!important; } } } }