File: D:/HostingSpaces/SBogers10/komma.pro/wwwroot/css/style.css.map
{"version":3,"sources":["webpack:///./resources/assets/sass/site/resources/assets/sass/global/_base.sass","webpack:///./resources/assets/sass/site/style.sass","webpack:///./resources/assets/sass/site/resources/assets/sass/global/mixins/_placeholder.sass","webpack:///./resources/assets/sass/site/resources/assets/sass/global/grid/_grid.sass","webpack:///./resources/assets/sass/site/resources/assets/sass/global/mixins/_mediaQueries.sass","webpack:///./resources/assets/sass/site/resources/assets/sass/global/grid/_flexGrid.sass","webpack:///./resources/assets/sass/site/resources/assets/sass/global/grid/_visibleGrid.sass","webpack:///./resources/assets/sass/site/resources/assets/sass/global/partials/_breakpoints.sass","webpack:///./resources/assets/sass/site/resources/assets/sass/site/_base.sass","webpack:///./resources/assets/sass/site/resources/assets/sass/site/_helpers.sass","webpack:///./resources/assets/sass/site/resources/assets/sass/site/partials/_buttons.sass","webpack:///./resources/assets/sass/site/resources/assets/sass/global/bourbon/addons/_prefixer.scss","webpack:///./resources/assets/sass/site/resources/assets/sass/global/mixins/_sprite.sass","webpack:///./resources/assets/sass/site/resources/assets/sass/global/bourbon/css3/_transition.scss","webpack:///./resources/assets/sass/site/resources/assets/sass/global/bourbon/addons/_position.scss","webpack:///./resources/assets/sass/site/resources/assets/sass/site/partials/_images.sass","webpack:///./resources/assets/sass/site/resources/assets/sass/site/partials/_lists.sass","webpack:///./resources/assets/sass/site/resources/assets/sass/site/partials/_textBlocks.sass","webpack:///./resources/assets/sass/site/resources/assets/sass/site/partials/_accountManagers.sass","webpack:///./resources/assets/sass/site/resources/assets/sass/site/partials/_callToActionBar.sass","webpack:///./resources/assets/sass/site/resources/assets/sass/site/partials/_callToActionBlock.sass","webpack:///./resources/assets/sass/site/resources/assets/sass/site/partials/cases/_caseIndexRow.sass","webpack:///./resources/assets/sass/site/resources/assets/sass/site/partials/cases/_caseTags.sass","webpack:///./resources/assets/sass/site/resources/assets/sass/site/partials/cases/_featured.sass","webpack:///./resources/assets/sass/site/resources/assets/sass/site/partials/cases/_scrollableWebsite.sass","webpack:///./resources/assets/sass/site/resources/assets/sass/site/partials/cases/_tops.sass","webpack:///./resources/assets/sass/site/resources/assets/sass/site/partials/_jobList.scss","webpack:///./resources/assets/sass/site/resources/assets/sass/site/partials/_applyCtaBlock.scss","webpack:///./resources/assets/sass/site/resources/assets/sass/global/mixins/_flex.sass","webpack:///./resources/assets/sass/site/resources/assets/sass/site/partials/_serviceContent.scss","webpack:///./resources/assets/sass/site/resources/assets/sass/site/partials/_serviceFooter.scss","webpack:///./resources/assets/sass/site/resources/assets/sass/site/partials/_projector.scss","webpack:///./resources/assets/sass/site/resources/assets/sass/site/partials/_slideIndicator.scss","webpack:///./resources/assets/sass/site/resources/assets/sass/site/partials/_drips.sass","webpack:///./resources/assets/sass/site/resources/assets/sass/site/partials/drips/_dripTransition.sass","webpack:///./resources/assets/sass/site/resources/assets/sass/site/partials/_form.sass","webpack:///./resources/assets/sass/site/resources/assets/sass/site/partials/_footer.sass","webpack:///./resources/assets/sass/site/resources/assets/sass/site/partials/_header.sass","webpack:///./resources/assets/sass/site/resources/assets/sass/site/partials/_navigation.sass","webpack:///./resources/assets/sass/site/resources/assets/sass/site/partials/posts/_postGrid.sass","webpack:///./resources/assets/sass/site/resources/assets/sass/site/partials/posts/_pagination.scss","webpack:///./resources/assets/sass/site/resources/assets/sass/site/partials/_scrollHinter.sass","webpack:///./resources/assets/sass/site/resources/assets/sass/site/partials/_team.sass","webpack:///./resources/assets/sass/site/resources/assets/sass/global/bourbon/addons/_clearfix.scss","webpack:///./resources/assets/sass/site/resources/assets/sass/site/partials/_notification.scss","webpack:///./resources/assets/sass/site/resources/assets/sass/site/partials/_video.scss","webpack:///./resources/assets/sass/site/resources/assets/sass/site/pages/_sectionSorter.sass","webpack:///./resources/assets/sass/site/resources/assets/sass/site/pages/_40x.sass","webpack:///./resources/assets/sass/site/resources/assets/sass/site/pages/_about.sass","webpack:///./resources/assets/sass/site/resources/assets/sass/site/pages/_alaaf.sass","webpack:///./resources/assets/sass/site/resources/assets/sass/site/mixins/_theme.sass","webpack:///./resources/assets/sass/site/resources/assets/sass/site/pages/_case.sass","webpack:///./resources/assets/sass/site/resources/assets/sass/site/partials/cases/_caseHeader.sass","webpack:///./resources/assets/sass/site/resources/assets/sass/site/pages/_contact.sass","webpack:///./resources/assets/sass/site/resources/assets/sass/site/pages/_home.sass","webpack:///./resources/assets/sass/site/resources/assets/sass/site/pages/_ip.sass","webpack:///./resources/assets/sass/site/resources/assets/sass/site/pages/_jobs.sass","webpack:///./resources/assets/sass/site/resources/assets/sass/site/pages/_jobsCustom.sass","webpack:///./resources/assets/sass/site/resources/assets/sass/site/pages/_offer.sass","webpack:///./resources/assets/sass/site/resources/assets/sass/site/pages/_process.sass","webpack:///./resources/assets/sass/site/resources/assets/sass/site/pages/_services.sass","webpack:///./resources/assets/sass/site/resources/assets/sass/site/pages/_service.sass","webpack:///./resources/assets/sass/site/resources/assets/sass/site/pages/_testimonials.sass","webpack:///./resources/assets/sass/site/resources/assets/sass/site/pages/_spinWin.sass","webpack:///./resources/assets/sass/site/resources/assets/sass/site/pages/posts/_index.sass","webpack:///./resources/assets/sass/site/resources/assets/sass/site/partials/posts/header/_postHeaderBasic.sass","webpack:///./resources/assets/sass/site/resources/assets/sass/site/partials/posts/header/_postHeaderIndex.sass","webpack:///./resources/assets/sass/site/resources/assets/sass/site/pages/posts/_show.sass","webpack:///./resources/assets/sass/site/resources/assets/sass/site/partials/posts/header/_postHeaderShow.sass","webpack:///./resources/assets/sass/site/resources/assets/sass/site/pages/posts/_posts.sass","webpack:///./resources/assets/sass/site/resources/assets/sass/site/pages/_error.sass"],"names":[],"mappings":"AAIA,EACE,oDCiDD,KDvCC,gBCkDD,ID5CC,cEpBA,qEF4BE,UACA,wDACA,8RE5BF,mDF0BE,UACA,wBACA,8RE1BF,2DFwBE,UACA,wBACA,8RExBF,iDFsBE,UACA,wBACA,8RE9BF,iFFkCI,UACA,wEEjCJ,+DFgCI,UACA,gCE/BJ,uEF8BI,UACA,gCE7BJ,6DF4BI,UACA,gCEjCJ,mDFqCE,WG7BJ,kBACE,kBACA,WACA,iBACA,cACA,YACA,mBANF,0BASI,WACA,SACA,0BCpBF,oCDSF,kBAcI,mBF4ID,CE3HD,OACE,kBACA,kBACA,mBAEA,qBACA,cACA,mBACA,eCrCF,qCD6BA,OAWI,eFmJH,CE9JD,gBAoBI,cACA,iBACA,kBAKF,cACE,WADF,cACE,WADF,cACE,WADF,cACE,WADF,cACE,WADF,cACE,WADF,cACE,WADF,cACE,WADF,cACE,WADF,eACE,YADF,eACE,YADF,eACE,YADF,eACE,YADF,eACE,YA5BJ,OACE,mBACA,kBACA,mBAEA,qBACA,cACA,mBACA,eCrCF,qCD6BA,OAWI,eF4OH,CEvPD,gBAoBI,cACA,iBACA,kBAKF,cACE,UADF,cACE,WADF,cACE,WADF,cACE,WADF,cACE,WADF,cACE,WADF,cACE,WADF,cACE,WADF,cACE,WADF,eACE,WADF,eACE,WADF,eACE,WADF,eACE,WADF,eACE,WA5BJ,OACE,mBACA,kBACA,mBAEA,qBACA,cACA,mBACA,eCrCF,qCD6BA,OAWI,eFqUH,CEhVD,gBAoBI,cACA,iBACA,kBAKF,cACE,mBADF,cACE,mBADF,cACE,WADF,cACE,oBADF,cACE,oBADF,cACE,WADF,cACE,oBADF,cACE,oBADF,cACE,WADF,eACE,oBADF,eACE,oBADF,eACE,WADF,eACE,oBADF,eACE,oBA5BJ,OACE,mBACA,kBACA,mBAEA,qBACA,cACA,mBACA,eCrCF,qCD6BA,OAWI,eF8ZH,CEzaD,gBAoBI,cACA,iBACA,kBAKF,cACE,UADF,cACE,UADF,cACE,UADF,cACE,WADF,cACE,WADF,cACE,WADF,cACE,WADF,cACE,WADF,cACE,WADF,eACE,WADF,eACE,WADF,eACE,WADF,eACE,WADF,eACE,WA5BJ,OACE,mBACA,kBACA,mBAEA,qBACA,cACA,mBACA,eCrCF,qCD6BA,OAWI,eFufH,CElgBD,gBAoBI,cACA,iBACA,kBAKF,cACE,UADF,cACE,UADF,cACE,UADF,cACE,UADF,cACE,WADF,cACE,WADF,cACE,WADF,cACE,WADF,cACE,WADF,eACE,WADF,eACE,WADF,eACE,WADF,eACE,WADF,eACE,WA5BJ,OACE,mBACA,kBACA,mBAEA,qBACA,cACA,mBACA,eCrCF,qCD6BA,OAWI,eFglBH,CE3lBD,gBAoBI,cACA,iBACA,kBAKF,cACE,mBADF,cACE,mBADF,cACE,UADF,cACE,mBADF,cACE,mBADF,cACE,WADF,cACE,oBADF,cACE,oBADF,cACE,WADF,eACE,oBADF,eACE,oBADF,eACE,WADF,eACE,oBADF,eACE,oBA5BJ,OACE,UACA,kBACA,mBAEA,qBACA,cACA,mBACA,eCrCF,qCD6BA,OAWI,eFyqBH,CEprBD,gBAoBI,cACA,iBACA,kBAKF,cACE,mBADF,cACE,mBADF,cACE,mBADF,cACE,mBADF,cACE,mBADF,cACE,mBADF,cACE,WADF,cACE,oBADF,cACE,oBADF,eACE,oBADF,eACE,oBADF,eACE,oBADF,eACE,oBADF,eACE,WA5BJ,OACE,mBACA,kBACA,mBAEA,qBACA,cACA,mBACA,eCrCF,qCD6BA,OAWI,eFkwBH,CE7wBD,gBAoBI,cACA,iBACA,kBAKF,cACE,YADF,cACE,UADF,cACE,YADF,cACE,UADF,cACE,YADF,cACE,UADF,cACE,YADF,cACE,WADF,cACE,aADF,eACE,WADF,eACE,aADF,eACE,WADF,eACE,aADF,eACE,WA5BJ,OACE,mBACA,kBACA,mBAEA,qBACA,cACA,mBACA,eCrCF,qCD6BA,OAWI,eF21BH,CEt2BD,gBAoBI,cACA,iBACA,kBAKF,cACE,mBADF,cACE,mBADF,cACE,mBADF,cACE,mBADF,cACE,mBADF,cACE,mBADF,cACE,mBADF,cACE,mBADF,cACE,WADF,eACE,oBADF,eACE,oBADF,eACE,oBADF,eACE,oBADF,eACE,oBA5BJ,QACE,mBACA,kBACA,mBAEA,qBACA,cACA,mBACA,eCrCF,qCD6BA,QAWI,eFo7BH,CE/7BD,iBAoBI,cACA,iBACA,kBAKF,eACE,UADF,eACE,UADF,eACE,UADF,eACE,UADF,eACE,UADF,eACE,UADF,eACE,UADF,eACE,UADF,eACE,UADF,gBACE,WADF,gBACE,WADF,gBACE,WADF,gBACE,WADF,gBACE,WA5BJ,QACE,mBACA,kBACA,mBAEA,qBACA,cACA,mBACA,eCrCF,qCD6BA,QAWI,eF6gCH,CExhCD,iBAoBI,cACA,iBACA,kBAKF,eACE,kBADF,eACE,mBADF,eACE,mBADF,eACE,mBADF,eACE,mBADF,eACE,mBADF,eACE,mBADF,eACE,mBADF,eACE,mBADF,gBACE,mBADF,gBACE,WADF,gBACE,oBADF,gBACE,oBADF,gBACE,oBA5BJ,QACE,mBACA,kBACA,mBAEA,qBACA,cACA,mBACA,eCrCF,qCD6BA,QAWI,eFsmCH,CEjnCD,iBAoBI,cACA,iBACA,kBAKF,eACE,kBADF,eACE,mBADF,eACE,UADF,eACE,mBADF,eACE,mBADF,eACE,UADF,eACE,mBADF,eACE,mBADF,eACE,UADF,gBACE,mBADF,gBACE,mBADF,gBACE,WADF,gBACE,oBADF,gBACE,oBA5BJ,QACE,mBACA,kBACA,mBAEA,qBACA,cACA,mBACA,eCrCF,qCD6BA,QAWI,eF+rCH,CE1sCD,iBAoBI,cACA,iBACA,kBAKF,eACE,kBADF,eACE,mBADF,eACE,mBADF,eACE,mBADF,eACE,mBADF,eACE,mBADF,eACE,mBADF,eACE,mBADF,eACE,mBADF,gBACE,mBADF,gBACE,mBADF,gBACE,mBADF,gBACE,WADF,gBACE,oBA5BJ,QACE,WACA,kBACA,mBAEA,qBACA,cACA,mBACA,eCrCF,qCD6BA,QAWI,eFwxCH,CEnyCD,iBAoBI,cACA,iBACA,kBAKF,eACE,kBADF,eACE,mBADF,eACE,mBADF,eACE,mBADF,eACE,mBADF,eACE,mBADF,eACE,UADF,eACE,mBADF,eACE,mBADF,gBACE,mBADF,gBACE,mBADF,gBACE,mBADF,gBACE,mBADF,gBACE,WAOJ,UACE,wBADF,UACE,yBADF,UACE,yBADF,UACE,yBADF,UACE,yBADF,UACE,yBADF,UACE,gBADF,UACE,yBADF,UACE,yBADF,WACE,yBADF,WACE,yBADF,WACE,yBADF,WACE,yBADF,WACE,iBCjEF,qCD+EE,UACE,QAEF,aACE,cFu3CH,CGr9CD,qCDyGI,UACE,QAEF,aACE,cFk3CL,CG/9CD,qCDyGI,UACE,QAEF,aACE,cF43CL,CGz+CD,oCDyGI,UACE,QAEF,aACE,cFs4CL,CGn/CD,oCDyGI,UACE,QAEF,aACE,cFg5CL,CGl/CD,qCD+EE,UACE,kBAEF,aACE,wBFy6CH,CGvgDD,qCDyGI,UACE,kBAEF,aACE,wBFo6CL,CGjhDD,qCDyGI,UACE,kBAEF,aACE,wBF86CL,CG3hDD,oCDyGI,UACE,kBAEF,aACE,wBFw7CL,CGriDD,oCDyGI,UACE,kBAEF,aACE,wBFk8CL,CGpiDD,qCD+EE,UACE,mBAEF,aACE,yBF29CH,CGzjDD,qCDyGI,UACE,mBAEF,aACE,yBFs9CL,CGnkDD,qCDyGI,UACE,mBAEF,aACE,yBFg+CL,CG7kDD,oCDyGI,UACE,mBAEF,aACE,yBF0+CL,CGvlDD,oCDyGI,UACE,mBAEF,aACE,yBFo/CL,CGtlDD,qCD+EE,UACE,UAEF,aACE,gBF6gDH,CG3mDD,qCDyGI,UACE,UAEF,aACE,gBFwgDL,CGrnDD,qCDyGI,UACE,UAEF,aACE,gBFkhDL,CG/nDD,oCDyGI,UACE,UAEF,aACE,gBF4hDL,CGzoDD,oCDyGI,UACE,UAEF,aACE,gBFsiDL,CGxoDD,qCD+EE,UACE,mBAEF,aACE,yBF+jDH,CG7pDD,qCDyGI,UACE,mBAEF,aACE,yBF0jDL,CGvqDD,qCDyGI,UACE,mBAEF,aACE,yBFokDL,CGjrDD,oCDyGI,UACE,mBAEF,aACE,yBF8kDL,CG3rDD,oCDyGI,UACE,mBAEF,aACE,yBFwlDL,CG1rDD,qCD+EE,UACE,mBAEF,aACE,yBFinDH,CG/sDD,qCDyGI,UACE,mBAEF,aACE,yBF4mDL,CGztDD,qCDyGI,UACE,mBAEF,aACE,yBFsnDL,CGnuDD,oCDyGI,UACE,mBAEF,aACE,yBFgoDL,CG7uDD,oCDyGI,UACE,mBAEF,aACE,yBF0oDL,CG5uDD,qCD+EE,UACE,UAEF,aACE,gBFmqDH,CGjwDD,qCDyGI,UACE,UAEF,aACE,gBF8pDL,CG3wDD,qCDyGI,UACE,UAEF,aACE,gBFwqDL,CGrxDD,oCDyGI,UACE,UAEF,aACE,gBFkrDL,CG/xDD,oCDyGI,UACE,UAEF,aACE,gBF4rDL,CG9xDD,qCD+EE,UACE,mBAEF,aACE,yBFqtDH,CGnzDD,qCDyGI,UACE,mBAEF,aACE,yBFgtDL,CG7zDD,qCDyGI,UACE,mBAEF,aACE,yBF0tDL,CGv0DD,oCDyGI,UACE,mBAEF,aACE,yBFouDL,CGj1DD,oCDyGI,UACE,mBAEF,aACE,yBF8uDL,CGh1DD,qCD+EE,UACE,mBAEF,aACE,yBFuwDH,CGr2DD,qCDyGI,UACE,mBAEF,aACE,yBFkwDL,CG/2DD,qCDyGI,UACE,mBAEF,aACE,yBF4wDL,CGz3DD,oCDyGI,UACE,mBAEF,aACE,yBFsxDL,CGn4DD,oCDyGI,UACE,mBAEF,aACE,yBFgyDL,CGl4DD,qCD+EE,UACE,UAEF,aACE,gBFyzDH,CGv5DD,qCDyGI,UACE,UAEF,aACE,gBFozDL,CGj6DD,qCDyGI,UACE,UAEF,aACE,gBF8zDL,CG36DD,oCDyGI,UACE,UAEF,aACE,gBFw0DL,CGr7DD,oCDyGI,UACE,UAEF,aACE,gBFk1DL,CGp7DD,qCD+EE,WACE,mBAEF,cACE,yBF22DH,CGz8DD,qCDyGI,WACE,mBAEF,cACE,yBFs2DL,CGn9DD,qCDyGI,WACE,mBAEF,cACE,yBFg3DL,CG79DD,oCDyGI,WACE,mBAEF,cACE,yBF03DL,CGv+DD,oCDyGI,WACE,mBAEF,cACE,yBFo4DL,CGt+DD,qCD+EE,WACE,mBAEF,cACE,yBF65DH,CG3/DD,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","file":"css/style.css","sourcesContent":["/* ==========================================================================\n Basic style settings\n @mixin ========================================================================= */\n\n* {\n box-sizing: border-box; }\n\n/*\n * Set up the body\n *\n * 1. This is the base for al rem units\n */\n\nhtml {\n font-size: $baseFontSize /* 1 */;\n line-height: 1.6; }\n\n/**\n * Default display for images is block to lose the extra margin below the image\n */\nimg {\n display: block; }\n\n\n/**\n * Set default animation for placeholder\n */\ninput, textarea {\n @include placeholder {\n opacity: 1;\n transform: translate3d(0, 0, 0);\n transition: transform 0.3s, opacity 0.3s, all 9999s linear 9999s; }\n\n &:focus {\n @include placeholder {\n opacity: 0;\n transform: translate3d(20px, 0, 0); }\n\n } // Give opacity to firefox placeholders\n &::-moz-placeholder {\n opacity: 0.5; } }\n\n\n\n\n// WEBPACK FOOTER //\n// ./resources/assets/sass/site/resources/assets/sass/global/_base.sass","/* ==========================================================================\n Config settings\n @mixin ========================================================================= */\n\n/**\n * Define grid columns\n *\n * The inner grid is the section where the content is\n * The outer grid is the inner grid with extra margin columns on each side\n */\n\n/**\n * Define breakpoint for given formats\n */\n\n/* Bourbon 4.0.2\n * http://bourbon.io\n * Copyright 2011-2014 thoughtbot, inc.\n * MIT License */\n\n/* ==========================================================================\n Font related functions\n @mixin ========================================================================= */\n\n/**\n * Add some functions for readability\n * Return font-weight based on name\n */\n\n/* ==========================================================================\n Functions used in grid calculation\n @mixin ========================================================================= */\n\n/**\n * This is where the magic happens\n * Return percentage based on amount of columns\n * Use parent column size to adjust the origin\n */\n\n/**\n * Default function for columns\n * Return as percentage\n */\n\n/**\n * Return as viewport width\n */\n\n/* ==========================================================================\n Basic style settings\n @mixin ========================================================================= */\n\n* {\n box-sizing: border-box;\n}\n\n/*\n * Set up the body\n *\n * 1. This is the base for al rem units\n */\n\nhtml {\n font-size: 18px;\n line-height: 1.6;\n}\n\n/**\n * Default display for images is block to lose the extra margin below the image\n */\n\nimg {\n display: block;\n}\n\n/**\n * Set default animation for placeholder\n */\n\ninput::-webkit-input-placeholder,\ntextarea::-webkit-input-placeholder {\n opacity: 1;\n transform: translate3d(0, 0, 0);\n transition: transform 0.3s, opacity 0.3s, all 9999s linear 9999s;\n}\n\ninput::-moz-placeholder,\ntextarea::-moz-placeholder {\n opacity: 1;\n transform: translate3d(0, 0, 0);\n transition: transform 0.3s, opacity 0.3s, all 9999s linear 9999s;\n}\n\ninput:-ms-input-placeholder,\ntextarea:-ms-input-placeholder {\n opacity: 1;\n transform: translate3d(0, 0, 0);\n transition: transform 0.3s, opacity 0.3s, all 9999s linear 9999s;\n}\n\ninput:-moz-placeholder,\ntextarea:-moz-placeholder {\n opacity: 1;\n transform: translate3d(0, 0, 0);\n transition: transform 0.3s, opacity 0.3s, all 9999s linear 9999s;\n}\n\ninput:focus::-webkit-input-placeholder,\ntextarea:focus::-webkit-input-placeholder {\n opacity: 0;\n transform: translate3d(20px, 0, 0);\n}\n\ninput:focus::-moz-placeholder,\ntextarea:focus::-moz-placeholder {\n opacity: 0;\n transform: translate3d(20px, 0, 0);\n}\n\ninput:focus:-ms-input-placeholder,\ntextarea:focus:-ms-input-placeholder {\n opacity: 0;\n transform: translate3d(20px, 0, 0);\n}\n\ninput:focus:-moz-placeholder,\ntextarea:focus:-moz-placeholder {\n opacity: 0;\n transform: translate3d(20px, 0, 0);\n}\n\ninput::-moz-placeholder,\ntextarea::-moz-placeholder {\n opacity: 0.5;\n}\n\n/* ==========================================================================\n Grid\n @mixin ========================================================================= */\n\n/**\n * Grid row\n *\n * 1. Remove inter-cell whitespace\n * 2. Force no-wrap\n */\n\n.contained-layout {\n position: relative;\n width: 100%;\n max-width: 1680px;\n margin: 0 auto;\n font-size: 0;\n white-space: nowrap;\n}\n\n.contained-layout .spacer {\n width: 100%;\n height: 0;\n margin-bottom: 7.14285714%;\n}\n\n@media screen and (max-width: 768px) {\n .contained-layout {\n white-space: normal;\n }\n}\n\n/* Columns\n @mixin ========================================================================= */\n\n/*\n * Calculate width by dividing a full width into 12 columns\n * Create a class for each column\n */\n\n/**\n * Grid column\n *\n * 1. Reset white-space inherited from `.grid`\n */\n\n.col-1 {\n width: 7.14285714%;\n position: relative;\n vertical-align: top;\n display: inline-block;\n margin: 0 auto;\n white-space: normal;\n font-size: 18px;\n /**\n * Center column\n *\n * 1. 'inline-block' doesn't center with margin '0 auto'\n */\n}\n\n@media screen and (min-width: 1601px) {\n .col-1 {\n font-size: 20px;\n }\n}\n\n.col-1.centered {\n display: block;\n margin-left: auto;\n margin-right: auto;\n}\n\n.col-1 > .col-1 {\n width: 100%;\n}\n\n.col-1 > .col-2 {\n width: 200%;\n}\n\n.col-1 > .col-3 {\n width: 300%;\n}\n\n.col-1 > .col-4 {\n width: 400%;\n}\n\n.col-1 > .col-5 {\n width: 500%;\n}\n\n.col-1 > .col-6 {\n width: 600%;\n}\n\n.col-1 > .col-7 {\n width: 700%;\n}\n\n.col-1 > .col-8 {\n width: 800%;\n}\n\n.col-1 > .col-9 {\n width: 900%;\n}\n\n.col-1 > .col-10 {\n width: 1000%;\n}\n\n.col-1 > .col-11 {\n width: 1100%;\n}\n\n.col-1 > .col-12 {\n width: 1200%;\n}\n\n.col-1 > .col-13 {\n width: 1300%;\n}\n\n.col-1 > .col-14 {\n width: 1400%;\n}\n\n/**\n * Grid column\n *\n * 1. Reset white-space inherited from `.grid`\n */\n\n.col-2 {\n width: 14.28571429%;\n position: relative;\n vertical-align: top;\n display: inline-block;\n margin: 0 auto;\n white-space: normal;\n font-size: 18px;\n /**\n * Center column\n *\n * 1. 'inline-block' doesn't center with margin '0 auto'\n */\n}\n\n@media screen and (min-width: 1601px) {\n .col-2 {\n font-size: 20px;\n }\n}\n\n.col-2.centered {\n display: block;\n margin-left: auto;\n margin-right: auto;\n}\n\n.col-2 > .col-1 {\n width: 50%;\n}\n\n.col-2 > .col-2 {\n width: 100%;\n}\n\n.col-2 > .col-3 {\n width: 150%;\n}\n\n.col-2 > .col-4 {\n width: 200%;\n}\n\n.col-2 > .col-5 {\n width: 250%;\n}\n\n.col-2 > .col-6 {\n width: 300%;\n}\n\n.col-2 > .col-7 {\n width: 350%;\n}\n\n.col-2 > .col-8 {\n width: 400%;\n}\n\n.col-2 > .col-9 {\n width: 450%;\n}\n\n.col-2 > .col-10 {\n width: 500%;\n}\n\n.col-2 > .col-11 {\n width: 550%;\n}\n\n.col-2 > .col-12 {\n width: 600%;\n}\n\n.col-2 > .col-13 {\n width: 650%;\n}\n\n.col-2 > .col-14 {\n width: 700%;\n}\n\n/**\n * Grid column\n *\n * 1. Reset white-space inherited from `.grid`\n */\n\n.col-3 {\n width: 21.42857143%;\n position: relative;\n vertical-align: top;\n display: inline-block;\n margin: 0 auto;\n white-space: normal;\n font-size: 18px;\n /**\n * Center column\n *\n * 1. 'inline-block' doesn't center with margin '0 auto'\n */\n}\n\n@media screen and (min-width: 1601px) {\n .col-3 {\n font-size: 20px;\n }\n}\n\n.col-3.centered {\n display: block;\n margin-left: auto;\n margin-right: auto;\n}\n\n.col-3 > .col-1 {\n width: 33.33333333%;\n}\n\n.col-3 > .col-2 {\n width: 66.66666667%;\n}\n\n.col-3 > .col-3 {\n width: 100%;\n}\n\n.col-3 > .col-4 {\n width: 133.33333333%;\n}\n\n.col-3 > .col-5 {\n width: 166.66666667%;\n}\n\n.col-3 > .col-6 {\n width: 200%;\n}\n\n.col-3 > .col-7 {\n width: 233.33333333%;\n}\n\n.col-3 > .col-8 {\n width: 266.66666667%;\n}\n\n.col-3 > .col-9 {\n width: 300%;\n}\n\n.col-3 > .col-10 {\n width: 333.33333333%;\n}\n\n.col-3 > .col-11 {\n width: 366.66666667%;\n}\n\n.col-3 > .col-12 {\n width: 400%;\n}\n\n.col-3 > .col-13 {\n width: 433.33333333%;\n}\n\n.col-3 > .col-14 {\n width: 466.66666667%;\n}\n\n/**\n * Grid column\n *\n * 1. Reset white-space inherited from `.grid`\n */\n\n.col-4 {\n width: 28.57142857%;\n position: relative;\n vertical-align: top;\n display: inline-block;\n margin: 0 auto;\n white-space: normal;\n font-size: 18px;\n /**\n * Center column\n *\n * 1. 'inline-block' doesn't center with margin '0 auto'\n */\n}\n\n@media screen and (min-width: 1601px) {\n .col-4 {\n font-size: 20px;\n }\n}\n\n.col-4.centered {\n display: block;\n margin-left: auto;\n margin-right: auto;\n}\n\n.col-4 > .col-1 {\n width: 25%;\n}\n\n.col-4 > .col-2 {\n width: 50%;\n}\n\n.col-4 > .col-3 {\n width: 75%;\n}\n\n.col-4 > .col-4 {\n width: 100%;\n}\n\n.col-4 > .col-5 {\n width: 125%;\n}\n\n.col-4 > .col-6 {\n width: 150%;\n}\n\n.col-4 > .col-7 {\n width: 175%;\n}\n\n.col-4 > .col-8 {\n width: 200%;\n}\n\n.col-4 > .col-9 {\n width: 225%;\n}\n\n.col-4 > .col-10 {\n width: 250%;\n}\n\n.col-4 > .col-11 {\n width: 275%;\n}\n\n.col-4 > .col-12 {\n width: 300%;\n}\n\n.col-4 > .col-13 {\n width: 325%;\n}\n\n.col-4 > .col-14 {\n width: 350%;\n}\n\n/**\n * Grid column\n *\n * 1. Reset white-space inherited from `.grid`\n */\n\n.col-5 {\n width: 35.71428571%;\n position: relative;\n vertical-align: top;\n display: inline-block;\n margin: 0 auto;\n white-space: normal;\n font-size: 18px;\n /**\n * Center column\n *\n * 1. 'inline-block' doesn't center with margin '0 auto'\n */\n}\n\n@media screen and (min-width: 1601px) {\n .col-5 {\n font-size: 20px;\n }\n}\n\n.col-5.centered {\n display: block;\n margin-left: auto;\n margin-right: auto;\n}\n\n.col-5 > .col-1 {\n width: 20%;\n}\n\n.col-5 > .col-2 {\n width: 40%;\n}\n\n.col-5 > .col-3 {\n width: 60%;\n}\n\n.col-5 > .col-4 {\n width: 80%;\n}\n\n.col-5 > .col-5 {\n width: 100%;\n}\n\n.col-5 > .col-6 {\n width: 120%;\n}\n\n.col-5 > .col-7 {\n width: 140%;\n}\n\n.col-5 > .col-8 {\n width: 160%;\n}\n\n.col-5 > .col-9 {\n width: 180%;\n}\n\n.col-5 > .col-10 {\n width: 200%;\n}\n\n.col-5 > .col-11 {\n width: 220%;\n}\n\n.col-5 > .col-12 {\n width: 240%;\n}\n\n.col-5 > .col-13 {\n width: 260%;\n}\n\n.col-5 > .col-14 {\n width: 280%;\n}\n\n/**\n * Grid column\n *\n * 1. Reset white-space inherited from `.grid`\n */\n\n.col-6 {\n width: 42.85714286%;\n position: relative;\n vertical-align: top;\n display: inline-block;\n margin: 0 auto;\n white-space: normal;\n font-size: 18px;\n /**\n * Center column\n *\n * 1. 'inline-block' doesn't center with margin '0 auto'\n */\n}\n\n@media screen and (min-width: 1601px) {\n .col-6 {\n font-size: 20px;\n }\n}\n\n.col-6.centered {\n display: block;\n margin-left: auto;\n margin-right: auto;\n}\n\n.col-6 > .col-1 {\n width: 16.66666667%;\n}\n\n.col-6 > .col-2 {\n width: 33.33333333%;\n}\n\n.col-6 > .col-3 {\n width: 50%;\n}\n\n.col-6 > .col-4 {\n width: 66.66666667%;\n}\n\n.col-6 > .col-5 {\n width: 83.33333333%;\n}\n\n.col-6 > .col-6 {\n width: 100%;\n}\n\n.col-6 > .col-7 {\n width: 116.66666667%;\n}\n\n.col-6 > .col-8 {\n width: 133.33333333%;\n}\n\n.col-6 > .col-9 {\n width: 150%;\n}\n\n.col-6 > .col-10 {\n width: 166.66666667%;\n}\n\n.col-6 > .col-11 {\n width: 183.33333333%;\n}\n\n.col-6 > .col-12 {\n width: 200%;\n}\n\n.col-6 > .col-13 {\n width: 216.66666667%;\n}\n\n.col-6 > .col-14 {\n width: 233.33333333%;\n}\n\n/**\n * Grid column\n *\n * 1. Reset white-space inherited from `.grid`\n */\n\n.col-7 {\n width: 50%;\n position: relative;\n vertical-align: top;\n display: inline-block;\n margin: 0 auto;\n white-space: normal;\n font-size: 18px;\n /**\n * Center column\n *\n * 1. 'inline-block' doesn't center with margin '0 auto'\n */\n}\n\n@media screen and (min-width: 1601px) {\n .col-7 {\n font-size: 20px;\n }\n}\n\n.col-7.centered {\n display: block;\n margin-left: auto;\n margin-right: auto;\n}\n\n.col-7 > .col-1 {\n width: 14.28571429%;\n}\n\n.col-7 > .col-2 {\n width: 28.57142857%;\n}\n\n.col-7 > .col-3 {\n width: 42.85714286%;\n}\n\n.col-7 > .col-4 {\n width: 57.14285714%;\n}\n\n.col-7 > .col-5 {\n width: 71.42857143%;\n}\n\n.col-7 > .col-6 {\n width: 85.71428571%;\n}\n\n.col-7 > .col-7 {\n width: 100%;\n}\n\n.col-7 > .col-8 {\n width: 114.28571429%;\n}\n\n.col-7 > .col-9 {\n width: 128.57142857%;\n}\n\n.col-7 > .col-10 {\n width: 142.85714286%;\n}\n\n.col-7 > .col-11 {\n width: 157.14285714%;\n}\n\n.col-7 > .col-12 {\n width: 171.42857143%;\n}\n\n.col-7 > .col-13 {\n width: 185.71428571%;\n}\n\n.col-7 > .col-14 {\n width: 200%;\n}\n\n/**\n * Grid column\n *\n * 1. Reset white-space inherited from `.grid`\n */\n\n.col-8 {\n width: 57.14285714%;\n position: relative;\n vertical-align: top;\n display: inline-block;\n margin: 0 auto;\n white-space: normal;\n font-size: 18px;\n /**\n * Center column\n *\n * 1. 'inline-block' doesn't center with margin '0 auto'\n */\n}\n\n@media screen and (min-width: 1601px) {\n .col-8 {\n font-size: 20px;\n }\n}\n\n.col-8.centered {\n display: block;\n margin-left: auto;\n margin-right: auto;\n}\n\n.col-8 > .col-1 {\n width: 12.5%;\n}\n\n.col-8 > .col-2 {\n width: 25%;\n}\n\n.col-8 > .col-3 {\n width: 37.5%;\n}\n\n.col-8 > .col-4 {\n width: 50%;\n}\n\n.col-8 > .col-5 {\n width: 62.5%;\n}\n\n.col-8 > .col-6 {\n width: 75%;\n}\n\n.col-8 > .col-7 {\n width: 87.5%;\n}\n\n.col-8 > .col-8 {\n width: 100%;\n}\n\n.col-8 > .col-9 {\n width: 112.5%;\n}\n\n.col-8 > .col-10 {\n width: 125%;\n}\n\n.col-8 > .col-11 {\n width: 137.5%;\n}\n\n.col-8 > .col-12 {\n width: 150%;\n}\n\n.col-8 > .col-13 {\n width: 162.5%;\n}\n\n.col-8 > .col-14 {\n width: 175%;\n}\n\n/**\n * Grid column\n *\n * 1. Reset white-space inherited from `.grid`\n */\n\n.col-9 {\n width: 64.28571429%;\n position: relative;\n vertical-align: top;\n display: inline-block;\n margin: 0 auto;\n white-space: normal;\n font-size: 18px;\n /**\n * Center column\n *\n * 1. 'inline-block' doesn't center with margin '0 auto'\n */\n}\n\n@media screen and (min-width: 1601px) {\n .col-9 {\n font-size: 20px;\n }\n}\n\n.col-9.centered {\n display: block;\n margin-left: auto;\n margin-right: auto;\n}\n\n.col-9 > .col-1 {\n width: 11.11111111%;\n}\n\n.col-9 > .col-2 {\n width: 22.22222222%;\n}\n\n.col-9 > .col-3 {\n width: 33.33333333%;\n}\n\n.col-9 > .col-4 {\n width: 44.44444444%;\n}\n\n.col-9 > .col-5 {\n width: 55.55555556%;\n}\n\n.col-9 > .col-6 {\n width: 66.66666667%;\n}\n\n.col-9 > .col-7 {\n width: 77.77777778%;\n}\n\n.col-9 > .col-8 {\n width: 88.88888889%;\n}\n\n.col-9 > .col-9 {\n width: 100%;\n}\n\n.col-9 > .col-10 {\n width: 111.11111111%;\n}\n\n.col-9 > .col-11 {\n width: 122.22222222%;\n}\n\n.col-9 > .col-12 {\n width: 133.33333333%;\n}\n\n.col-9 > .col-13 {\n width: 144.44444444%;\n}\n\n.col-9 > .col-14 {\n width: 155.55555556%;\n}\n\n/**\n * Grid column\n *\n * 1. Reset white-space inherited from `.grid`\n */\n\n.col-10 {\n width: 71.42857143%;\n position: relative;\n vertical-align: top;\n display: inline-block;\n margin: 0 auto;\n white-space: normal;\n font-size: 18px;\n /**\n * Center column\n *\n * 1. 'inline-block' doesn't center with margin '0 auto'\n */\n}\n\n@media screen and (min-width: 1601px) {\n .col-10 {\n font-size: 20px;\n }\n}\n\n.col-10.centered {\n display: block;\n margin-left: auto;\n margin-right: auto;\n}\n\n.col-10 > .col-1 {\n width: 10%;\n}\n\n.col-10 > .col-2 {\n width: 20%;\n}\n\n.col-10 > .col-3 {\n width: 30%;\n}\n\n.col-10 > .col-4 {\n width: 40%;\n}\n\n.col-10 > .col-5 {\n width: 50%;\n}\n\n.col-10 > .col-6 {\n width: 60%;\n}\n\n.col-10 > .col-7 {\n width: 70%;\n}\n\n.col-10 > .col-8 {\n width: 80%;\n}\n\n.col-10 > .col-9 {\n width: 90%;\n}\n\n.col-10 > .col-10 {\n width: 100%;\n}\n\n.col-10 > .col-11 {\n width: 110%;\n}\n\n.col-10 > .col-12 {\n width: 120%;\n}\n\n.col-10 > .col-13 {\n width: 130%;\n}\n\n.col-10 > .col-14 {\n width: 140%;\n}\n\n/**\n * Grid column\n *\n * 1. Reset white-space inherited from `.grid`\n */\n\n.col-11 {\n width: 78.57142857%;\n position: relative;\n vertical-align: top;\n display: inline-block;\n margin: 0 auto;\n white-space: normal;\n font-size: 18px;\n /**\n * Center column\n *\n * 1. 'inline-block' doesn't center with margin '0 auto'\n */\n}\n\n@media screen and (min-width: 1601px) {\n .col-11 {\n font-size: 20px;\n }\n}\n\n.col-11.centered {\n display: block;\n margin-left: auto;\n margin-right: auto;\n}\n\n.col-11 > .col-1 {\n width: 9.09090909%;\n}\n\n.col-11 > .col-2 {\n width: 18.18181818%;\n}\n\n.col-11 > .col-3 {\n width: 27.27272727%;\n}\n\n.col-11 > .col-4 {\n width: 36.36363636%;\n}\n\n.col-11 > .col-5 {\n width: 45.45454545%;\n}\n\n.col-11 > .col-6 {\n width: 54.54545455%;\n}\n\n.col-11 > .col-7 {\n width: 63.63636364%;\n}\n\n.col-11 > .col-8 {\n width: 72.72727273%;\n}\n\n.col-11 > .col-9 {\n width: 81.81818182%;\n}\n\n.col-11 > .col-10 {\n width: 90.90909091%;\n}\n\n.col-11 > .col-11 {\n width: 100%;\n}\n\n.col-11 > .col-12 {\n width: 109.09090909%;\n}\n\n.col-11 > .col-13 {\n width: 118.18181818%;\n}\n\n.col-11 > .col-14 {\n width: 127.27272727%;\n}\n\n/**\n * Grid column\n *\n * 1. Reset white-space inherited from `.grid`\n */\n\n.col-12 {\n width: 85.71428571%;\n position: relative;\n vertical-align: top;\n display: inline-block;\n margin: 0 auto;\n white-space: normal;\n font-size: 18px;\n /**\n * Center column\n *\n * 1. 'inline-block' doesn't center with margin '0 auto'\n */\n}\n\n@media screen and (min-width: 1601px) {\n .col-12 {\n font-size: 20px;\n }\n}\n\n.col-12.centered {\n display: block;\n margin-left: auto;\n margin-right: auto;\n}\n\n.col-12 > .col-1 {\n width: 8.33333333%;\n}\n\n.col-12 > .col-2 {\n width: 16.66666667%;\n}\n\n.col-12 > .col-3 {\n width: 25%;\n}\n\n.col-12 > .col-4 {\n width: 33.33333333%;\n}\n\n.col-12 > .col-5 {\n width: 41.66666667%;\n}\n\n.col-12 > .col-6 {\n width: 50%;\n}\n\n.col-12 > .col-7 {\n width: 58.33333333%;\n}\n\n.col-12 > .col-8 {\n width: 66.66666667%;\n}\n\n.col-12 > .col-9 {\n width: 75%;\n}\n\n.col-12 > .col-10 {\n width: 83.33333333%;\n}\n\n.col-12 > .col-11 {\n width: 91.66666667%;\n}\n\n.col-12 > .col-12 {\n width: 100%;\n}\n\n.col-12 > .col-13 {\n width: 108.33333333%;\n}\n\n.col-12 > .col-14 {\n width: 116.66666667%;\n}\n\n/**\n * Grid column\n *\n * 1. Reset white-space inherited from `.grid`\n */\n\n.col-13 {\n width: 92.85714286%;\n position: relative;\n vertical-align: top;\n display: inline-block;\n margin: 0 auto;\n white-space: normal;\n font-size: 18px;\n /**\n * Center column\n *\n * 1. 'inline-block' doesn't center with margin '0 auto'\n */\n}\n\n@media screen and (min-width: 1601px) {\n .col-13 {\n font-size: 20px;\n }\n}\n\n.col-13.centered {\n display: block;\n margin-left: auto;\n margin-right: auto;\n}\n\n.col-13 > .col-1 {\n width: 7.69230769%;\n}\n\n.col-13 > .col-2 {\n width: 15.38461538%;\n}\n\n.col-13 > .col-3 {\n width: 23.07692308%;\n}\n\n.col-13 > .col-4 {\n width: 30.76923077%;\n}\n\n.col-13 > .col-5 {\n width: 38.46153846%;\n}\n\n.col-13 > .col-6 {\n width: 46.15384615%;\n}\n\n.col-13 > .col-7 {\n width: 53.84615385%;\n}\n\n.col-13 > .col-8 {\n width: 61.53846154%;\n}\n\n.col-13 > .col-9 {\n width: 69.23076923%;\n}\n\n.col-13 > .col-10 {\n width: 76.92307692%;\n}\n\n.col-13 > .col-11 {\n width: 84.61538462%;\n}\n\n.col-13 > .col-12 {\n width: 92.30769231%;\n}\n\n.col-13 > .col-13 {\n width: 100%;\n}\n\n.col-13 > .col-14 {\n width: 107.69230769%;\n}\n\n/**\n * Grid column\n *\n * 1. Reset white-space inherited from `.grid`\n */\n\n.col-14 {\n width: 100%;\n position: relative;\n vertical-align: top;\n display: inline-block;\n margin: 0 auto;\n white-space: normal;\n font-size: 18px;\n /**\n * Center column\n *\n * 1. 'inline-block' doesn't center with margin '0 auto'\n */\n}\n\n@media screen and (min-width: 1601px) {\n .col-14 {\n font-size: 20px;\n }\n}\n\n.col-14.centered {\n display: block;\n margin-left: auto;\n margin-right: auto;\n}\n\n.col-14 > .col-1 {\n width: 7.14285714%;\n}\n\n.col-14 > .col-2 {\n width: 14.28571429%;\n}\n\n.col-14 > .col-3 {\n width: 21.42857143%;\n}\n\n.col-14 > .col-4 {\n width: 28.57142857%;\n}\n\n.col-14 > .col-5 {\n width: 35.71428571%;\n}\n\n.col-14 > .col-6 {\n width: 42.85714286%;\n}\n\n.col-14 > .col-7 {\n width: 50%;\n}\n\n.col-14 > .col-8 {\n width: 57.14285714%;\n}\n\n.col-14 > .col-9 {\n width: 64.28571429%;\n}\n\n.col-14 > .col-10 {\n width: 71.42857143%;\n}\n\n.col-14 > .col-11 {\n width: 78.57142857%;\n}\n\n.col-14 > .col-12 {\n width: 85.71428571%;\n}\n\n.col-14 > .col-13 {\n width: 92.85714286%;\n}\n\n.col-14 > .col-14 {\n width: 100%;\n}\n\n/* Column offset\n @mixin ========================================================================= */\n\n.offset-1 {\n margin-left: 7.14285714%;\n}\n\n.offset-2 {\n margin-left: 14.28571429%;\n}\n\n.offset-3 {\n margin-left: 21.42857143%;\n}\n\n.offset-4 {\n margin-left: 28.57142857%;\n}\n\n.offset-5 {\n margin-left: 35.71428571%;\n}\n\n.offset-6 {\n margin-left: 42.85714286%;\n}\n\n.offset-7 {\n margin-left: 50%;\n}\n\n.offset-8 {\n margin-left: 57.14285714%;\n}\n\n.offset-9 {\n margin-left: 64.28571429%;\n}\n\n.offset-10 {\n margin-left: 71.42857143%;\n}\n\n.offset-11 {\n margin-left: 78.57142857%;\n}\n\n.offset-12 {\n margin-left: 85.71428571%;\n}\n\n.offset-13 {\n margin-left: 92.85714286%;\n}\n\n.offset-14 {\n margin-left: 100%;\n}\n\n/* Media queries\n @mixin ========================================================================= */\n\n/*\n * Define widths for different screen sizes\n */\n\n@media screen and (min-width: 1601px) {\n .col-xl-0 {\n width: 0%;\n }\n\n .offset-xl-0 {\n margin-left: 0%;\n }\n}\n\n@media screen and (max-width: 1366px) {\n .col-lg-0 {\n width: 0%;\n }\n\n .offset-lg-0 {\n margin-left: 0%;\n }\n}\n\n@media screen and (max-width: 1080px) {\n .col-md-0 {\n width: 0%;\n }\n\n .offset-md-0 {\n margin-left: 0%;\n }\n}\n\n@media screen and (max-width: 768px) {\n .col-sm-0 {\n width: 0%;\n }\n\n .offset-sm-0 {\n margin-left: 0%;\n }\n}\n\n@media screen and (max-width: 500px) {\n .col-xs-0 {\n width: 0%;\n }\n\n .offset-xs-0 {\n margin-left: 0%;\n }\n}\n\n@media screen and (min-width: 1601px) {\n .col-xl-1 {\n width: 8.33333333%;\n }\n\n .offset-xl-1 {\n margin-left: 8.33333333%;\n }\n}\n\n@media screen and (max-width: 1366px) {\n .col-lg-1 {\n width: 8.33333333%;\n }\n\n .offset-lg-1 {\n margin-left: 8.33333333%;\n }\n}\n\n@media screen and (max-width: 1080px) {\n .col-md-1 {\n width: 8.33333333%;\n }\n\n .offset-md-1 {\n margin-left: 8.33333333%;\n }\n}\n\n@media screen and (max-width: 768px) {\n .col-sm-1 {\n width: 8.33333333%;\n }\n\n .offset-sm-1 {\n margin-left: 8.33333333%;\n }\n}\n\n@media screen and (max-width: 500px) {\n .col-xs-1 {\n width: 8.33333333%;\n }\n\n .offset-xs-1 {\n margin-left: 8.33333333%;\n }\n}\n\n@media screen and (min-width: 1601px) {\n .col-xl-2 {\n width: 16.66666667%;\n }\n\n .offset-xl-2 {\n margin-left: 16.66666667%;\n }\n}\n\n@media screen and (max-width: 1366px) {\n .col-lg-2 {\n width: 16.66666667%;\n }\n\n .offset-lg-2 {\n margin-left: 16.66666667%;\n }\n}\n\n@media screen and (max-width: 1080px) {\n .col-md-2 {\n width: 16.66666667%;\n }\n\n .offset-md-2 {\n margin-left: 16.66666667%;\n }\n}\n\n@media screen and (max-width: 768px) {\n .col-sm-2 {\n width: 16.66666667%;\n }\n\n .offset-sm-2 {\n margin-left: 16.66666667%;\n }\n}\n\n@media screen and (max-width: 500px) {\n .col-xs-2 {\n width: 16.66666667%;\n }\n\n .offset-xs-2 {\n margin-left: 16.66666667%;\n }\n}\n\n@media screen and (min-width: 1601px) {\n .col-xl-3 {\n width: 25%;\n }\n\n .offset-xl-3 {\n margin-left: 25%;\n }\n}\n\n@media screen and (max-width: 1366px) {\n .col-lg-3 {\n width: 25%;\n }\n\n .offset-lg-3 {\n margin-left: 25%;\n }\n}\n\n@media screen and (max-width: 1080px) {\n .col-md-3 {\n width: 25%;\n }\n\n .offset-md-3 {\n margin-left: 25%;\n }\n}\n\n@media screen and (max-width: 768px) {\n .col-sm-3 {\n width: 25%;\n }\n\n .offset-sm-3 {\n margin-left: 25%;\n }\n}\n\n@media screen and (max-width: 500px) {\n .col-xs-3 {\n width: 25%;\n }\n\n .offset-xs-3 {\n margin-left: 25%;\n }\n}\n\n@media screen and (min-width: 1601px) {\n .col-xl-4 {\n width: 33.33333333%;\n }\n\n .offset-xl-4 {\n margin-left: 33.33333333%;\n }\n}\n\n@media screen and (max-width: 1366px) {\n .col-lg-4 {\n width: 33.33333333%;\n }\n\n .offset-lg-4 {\n margin-left: 33.33333333%;\n }\n}\n\n@media screen and (max-width: 1080px) {\n .col-md-4 {\n width: 33.33333333%;\n }\n\n .offset-md-4 {\n margin-left: 33.33333333%;\n }\n}\n\n@media screen and (max-width: 768px) {\n .col-sm-4 {\n width: 33.33333333%;\n }\n\n .offset-sm-4 {\n margin-left: 33.33333333%;\n }\n}\n\n@media screen and (max-width: 500px) {\n .col-xs-4 {\n width: 33.33333333%;\n }\n\n .offset-xs-4 {\n margin-left: 33.33333333%;\n }\n}\n\n@media screen and (min-width: 1601px) {\n .col-xl-5 {\n width: 41.66666667%;\n }\n\n .offset-xl-5 {\n margin-left: 41.66666667%;\n }\n}\n\n@media screen and (max-width: 1366px) {\n .col-lg-5 {\n width: 41.66666667%;\n }\n\n .offset-lg-5 {\n margin-left: 41.66666667%;\n }\n}\n\n@media screen and (max-width: 1080px) {\n .col-md-5 {\n width: 41.66666667%;\n }\n\n .offset-md-5 {\n margin-left: 41.66666667%;\n }\n}\n\n@media screen and (max-width: 768px) {\n .col-sm-5 {\n width: 41.66666667%;\n }\n\n .offset-sm-5 {\n margin-left: 41.66666667%;\n }\n}\n\n@media screen and (max-width: 500px) {\n .col-xs-5 {\n width: 41.66666667%;\n }\n\n .offset-xs-5 {\n margin-left: 41.66666667%;\n }\n}\n\n@media screen and (min-width: 1601px) {\n .col-xl-6 {\n width: 50%;\n }\n\n .offset-xl-6 {\n margin-left: 50%;\n }\n}\n\n@media screen and (max-width: 1366px) {\n .col-lg-6 {\n width: 50%;\n }\n\n .offset-lg-6 {\n margin-left: 50%;\n }\n}\n\n@media screen and (max-width: 1080px) {\n .col-md-6 {\n width: 50%;\n }\n\n .offset-md-6 {\n margin-left: 50%;\n }\n}\n\n@media screen and (max-width: 768px) {\n .col-sm-6 {\n width: 50%;\n }\n\n .offset-sm-6 {\n margin-left: 50%;\n }\n}\n\n@media screen and (max-width: 500px) {\n .col-xs-6 {\n width: 50%;\n }\n\n .offset-xs-6 {\n margin-left: 50%;\n }\n}\n\n@media screen and (min-width: 1601px) {\n .col-xl-7 {\n width: 58.33333333%;\n }\n\n .offset-xl-7 {\n margin-left: 58.33333333%;\n }\n}\n\n@media screen and (max-width: 1366px) {\n .col-lg-7 {\n width: 58.33333333%;\n }\n\n .offset-lg-7 {\n margin-left: 58.33333333%;\n }\n}\n\n@media screen and (max-width: 1080px) {\n .col-md-7 {\n width: 58.33333333%;\n }\n\n .offset-md-7 {\n margin-left: 58.33333333%;\n }\n}\n\n@media screen and (max-width: 768px) {\n .col-sm-7 {\n width: 58.33333333%;\n }\n\n .offset-sm-7 {\n margin-left: 58.33333333%;\n }\n}\n\n@media screen and (max-width: 500px) {\n .col-xs-7 {\n width: 58.33333333%;\n }\n\n .offset-xs-7 {\n margin-left: 58.33333333%;\n }\n}\n\n@media screen and (min-width: 1601px) {\n .col-xl-8 {\n width: 66.66666667%;\n }\n\n .offset-xl-8 {\n margin-left: 66.66666667%;\n }\n}\n\n@media screen and (max-width: 1366px) {\n .col-lg-8 {\n width: 66.66666667%;\n }\n\n .offset-lg-8 {\n margin-left: 66.66666667%;\n }\n}\n\n@media screen and (max-width: 1080px) {\n .col-md-8 {\n width: 66.66666667%;\n }\n\n .offset-md-8 {\n margin-left: 66.66666667%;\n }\n}\n\n@media screen and (max-width: 768px) {\n .col-sm-8 {\n width: 66.66666667%;\n }\n\n .offset-sm-8 {\n margin-left: 66.66666667%;\n }\n}\n\n@media screen and (max-width: 500px) {\n .col-xs-8 {\n width: 66.66666667%;\n }\n\n .offset-xs-8 {\n margin-left: 66.66666667%;\n }\n}\n\n@media screen and (min-width: 1601px) {\n .col-xl-9 {\n width: 75%;\n }\n\n .offset-xl-9 {\n margin-left: 75%;\n }\n}\n\n@media screen and (max-width: 1366px) {\n .col-lg-9 {\n width: 75%;\n }\n\n .offset-lg-9 {\n margin-left: 75%;\n }\n}\n\n@media screen and (max-width: 1080px) {\n .col-md-9 {\n width: 75%;\n }\n\n .offset-md-9 {\n margin-left: 75%;\n }\n}\n\n@media screen and (max-width: 768px) {\n .col-sm-9 {\n width: 75%;\n }\n\n .offset-sm-9 {\n margin-left: 75%;\n }\n}\n\n@media screen and (max-width: 500px) {\n .col-xs-9 {\n width: 75%;\n }\n\n .offset-xs-9 {\n margin-left: 75%;\n }\n}\n\n@media screen and (min-width: 1601px) {\n .col-xl-10 {\n width: 83.33333333%;\n }\n\n .offset-xl-10 {\n margin-left: 83.33333333%;\n }\n}\n\n@media screen and (max-width: 1366px) {\n .col-lg-10 {\n width: 83.33333333%;\n }\n\n .offset-lg-10 {\n margin-left: 83.33333333%;\n }\n}\n\n@media screen and (max-width: 1080px) {\n .col-md-10 {\n width: 83.33333333%;\n }\n\n .offset-md-10 {\n margin-left: 83.33333333%;\n }\n}\n\n@media screen and (max-width: 768px) {\n .col-sm-10 {\n width: 83.33333333%;\n }\n\n .offset-sm-10 {\n margin-left: 83.33333333%;\n }\n}\n\n@media screen and (max-width: 500px) {\n .col-xs-10 {\n width: 83.33333333%;\n }\n\n .offset-xs-10 {\n margin-left: 83.33333333%;\n }\n}\n\n@media screen and (min-width: 1601px) {\n .col-xl-11 {\n width: 91.66666667%;\n }\n\n .offset-xl-11 {\n margin-left: 91.66666667%;\n }\n}\n\n@media screen and (max-width: 1366px) {\n .col-lg-11 {\n width: 91.66666667%;\n }\n\n .offset-lg-11 {\n margin-left: 91.66666667%;\n }\n}\n\n@media screen and (max-width: 1080px) {\n .col-md-11 {\n width: 91.66666667%;\n }\n\n .offset-md-11 {\n margin-left: 91.66666667%;\n }\n}\n\n@media screen and (max-width: 768px) {\n .col-sm-11 {\n width: 91.66666667%;\n }\n\n .offset-sm-11 {\n margin-left: 91.66666667%;\n }\n}\n\n@media screen and (max-width: 500px) {\n .col-xs-11 {\n width: 91.66666667%;\n }\n\n .offset-xs-11 {\n margin-left: 91.66666667%;\n }\n}\n\n@media screen and (min-width: 1601px) {\n .col-xl-12 {\n width: 100%;\n }\n\n .offset-xl-12 {\n margin-left: 100%;\n }\n}\n\n@media screen and (max-width: 1366px) {\n .col-lg-12 {\n width: 100%;\n }\n\n .offset-lg-12 {\n margin-left: 100%;\n }\n}\n\n@media screen and (max-width: 1080px) {\n .col-md-12 {\n width: 100%;\n }\n\n .offset-md-12 {\n margin-left: 100%;\n }\n}\n\n@media screen and (max-width: 768px) {\n .col-sm-12 {\n width: 100%;\n }\n\n .offset-sm-12 {\n margin-left: 100%;\n }\n}\n\n@media screen and (max-width: 500px) {\n .col-xs-12 {\n width: 100%;\n }\n\n .offset-xs-12 {\n margin-left: 100%;\n }\n}\n\n@media screen and (min-width: 1601px) {\n .col-xl-13 {\n width: 108.33333333%;\n }\n\n .offset-xl-13 {\n margin-left: 108.33333333%;\n }\n}\n\n@media screen and (max-width: 1366px) {\n .col-lg-13 {\n width: 108.33333333%;\n }\n\n .offset-lg-13 {\n margin-left: 108.33333333%;\n }\n}\n\n@media screen and (max-width: 1080px) {\n .col-md-13 {\n width: 108.33333333%;\n }\n\n .offset-md-13 {\n margin-left: 108.33333333%;\n }\n}\n\n@media screen and (max-width: 768px) {\n .col-sm-13 {\n width: 108.33333333%;\n }\n\n .offset-sm-13 {\n margin-left: 108.33333333%;\n }\n}\n\n@media screen and (max-width: 500px) {\n .col-xs-13 {\n width: 108.33333333%;\n }\n\n .offset-xs-13 {\n margin-left: 108.33333333%;\n }\n}\n\n@media screen and (min-width: 1601px) {\n .col-xl-14 {\n width: 116.66666667%;\n }\n\n .offset-xl-14 {\n margin-left: 116.66666667%;\n }\n}\n\n@media screen and (max-width: 1366px) {\n .col-lg-14 {\n width: 116.66666667%;\n }\n\n .offset-lg-14 {\n margin-left: 116.66666667%;\n }\n}\n\n@media screen and (max-width: 1080px) {\n .col-md-14 {\n width: 116.66666667%;\n }\n\n .offset-md-14 {\n margin-left: 116.66666667%;\n }\n}\n\n@media screen and (max-width: 768px) {\n .col-sm-14 {\n width: 116.66666667%;\n }\n\n .offset-sm-14 {\n margin-left: 116.66666667%;\n }\n}\n\n@media screen and (max-width: 500px) {\n .col-xs-14 {\n width: 116.66666667%;\n }\n\n .offset-xs-14 {\n margin-left: 116.66666667%;\n }\n}\n\n/*\n * This class is used when element contains .col-elements\n * Mostly we use it in combination with another class, f.e. an .col-element\n */\n\n.column-container {\n white-space: nowrap;\n}\n\n@media screen and (max-width: 1080px) {\n .column-container {\n white-space: normal;\n }\n}\n\n@media screen and (max-width: 500px) {\n .col-12 {\n width: 100%;\n }\n}\n\n/* ==========================================================================\n Flex Grid\n @mixin ========================================================================= */\n\n/**\n * Flex row\n */\n\n.flexable-layout {\n display: flex;\n white-space: normal;\n}\n\n.flexable-layout.contained {\n max-width: 85.71428571%;\n margin: 0 auto;\n}\n\n.flexable-layout.contained.full-row {\n max-width: 1680px;\n}\n\n/**\n * Flex row\n *\n * Note: flex-grow 1, flex-shrink 1 and flex-bases 0 can be shorthanded to flex: 1\n * 1. Reset font-size\n */\n\n.flex-col {\n flex-grow: 1;\n flex-shrink: 1;\n flex-basis: 0;\n font-size: 18px;\n}\n\n/* ==========================================================================\n This grid can be turned on and off when you want to check\n if everything is nice in place.\n @mixin ========================================================================= */\n\n.visible-grid-container {\n display: flex;\n justify-content: center;\n}\n\n/**\n * 1. Makes it able to control the website while grid is shown\n */\n\n.visible-grid {\n display: block;\n position: fixed;\n z-index: 10000;\n pointer-events: none;\n}\n\n.visible-grid .grid-col {\n background: rgba(0, 255, 255, 0.6);\n height: 100vh;\n}\n\n.visible-grid .grid-col:nth-child(2n) {\n background: rgba(0, 255, 255, 0.3);\n}\n\n.visible-grid .grid-col:nth-child(1),\n.visible-grid .grid-col:nth-child(14) {\n background: rgba(0, 255, 0, 0.5);\n}\n\n.breakpoint {\n position: fixed;\n right: 0;\n bottom: 0;\n width: 20px;\n height: 20px;\n z-index: 10000;\n background: #0ABEFF;\n}\n\n@media screen and (min-width: 1601px) {\n .breakpoint {\n background: red;\n }\n}\n\n@media screen and (max-width: 1366px) {\n .breakpoint {\n background: blue;\n }\n}\n\n@media screen and (max-width: 1080px) {\n .breakpoint {\n background: green;\n }\n}\n\n@media screen and (max-width: 768px) {\n .breakpoint {\n background: yellow;\n }\n}\n\n@media screen and (max-width: 500px) {\n .breakpoint {\n background: pink;\n }\n}\n\n/* ==========================================================================\n Expend Config settings\n @mixin ========================================================================= */\n\n/* ==========================================================================\n Expend Basic style settings\n @mixin ========================================================================= */\n\n/*\n * Set up the html\n *\n * 1. This is the base for al rem units\n */\n\nhtml {\n font-size: 18px;\n}\n\n@media screen and (min-width: 1601px) {\n html {\n font-size: 20px;\n }\n}\n\n/*\n * Set up the body\n *\n * 1. Set font to lining figures\n */\n\nbody {\n margin: 0;\n color: #5D696E;\n font-family: 'freight-sans-pro', sans-serif;\n font-weight: 400;\n line-height: 1.6;\n font-feature-settings: \"lnum\";\n}\n\n@media screen and (max-width: 768px) {\n body {\n padding-top: 60px;\n }\n}\n\n/**\n * 1. Correct the extra rendered space on the top with a negative margin\n */\n\nh2 {\n margin: -15px 0 40px 0;\n color: #646464;\n font-size: 1.5rem;\n font-weight: 300;\n line-height: 1.2;\n}\n\nh2 a {\n color: #646464;\n text-decoration: none;\n}\n\n@media screen and (max-width: 500px) {\n h2 {\n margin-top: 0;\n margin-bottom: 40px;\n }\n}\n\n/**\n * All margin is at the bottom of a paragraph\n * This way a paragraph can be better aligned with non-paragraph objects\n *\n * 1. Optical correction\n */\n\np {\n margin-top: 0;\n}\n\np:last-child {\n margin-bottom: -4px;\n}\n\np.inline {\n display: inline;\n margin-bottom: 0;\n}\n\n/**\n * Set font weight to semibold\n */\n\nstrong {\n font-weight: 600;\n}\n\na {\n color: #0000FF;\n}\n\nol {\n padding-left: 1em;\n}\n\nh3 {\n color: #1E2433;\n}\n\n/* ==========================================================================\n Helper classes\n @mixin ========================================================================= */\n\n/**\n * Use on elements from where the children should not wrap\n */\n\n.nowrap {\n white-space: nowrap;\n}\n\n/**\n * Hide elements on different screen sizes\n */\n\n@media screen and (max-width: 1600px) {\n .hide-on-xl-or-smaller {\n display: none;\n }\n}\n\n@media screen and (min-width: 1601px) {\n .hide-on-xl-or-larger {\n display: none;\n }\n}\n\n@media screen and (max-width: 1366px) {\n .hide-on-lg-or-smaller {\n display: none;\n }\n}\n\n@media screen and (min-width: 1367px) {\n .hide-on-lg-or-larger {\n display: none;\n }\n}\n\n@media screen and (max-width: 1080px) {\n .hide-on-md-or-smaller {\n display: none;\n }\n}\n\n@media screen and (min-width: 1081px) {\n .hide-on-md-or-larger {\n display: none;\n }\n}\n\n@media screen and (max-width: 768px) {\n .hide-on-sm-or-smaller {\n display: none;\n }\n}\n\n@media screen and (min-width: 769px) {\n .hide-on-sm-or-larger {\n display: none;\n }\n}\n\n@media screen and (max-width: 500px) {\n .hide-on-xs-or-smaller {\n display: none;\n }\n}\n\n@media screen and (min-width: 501px) {\n .hide-on-xs-or-larger {\n display: none;\n }\n}\n\n/* ==========================================================================\n Mixin used to give the cases their custom colors\n @mixin ========================================================================= */\n\n/* ==========================================================================\n Partial CSS\n @mixin ========================================================================= */\n\n/**\n * Global CSS\n */\n\n/* ==========================================================================\n Buttons\n @mixin ========================================================================= */\n\n/*\n * Main settings for each button\n *\n * 1. Reset default link property\n */\n\n.button {\n position: relative;\n display: inline-block;\n min-width: 200px;\n padding: 0 20px;\n border-radius: 4px;\n line-height: 45px;\n font-size: .9rem;\n font-weight: 600;\n text-decoration: none;\n cursor: pointer;\n -webkit-transition: all 200ms ease-out;\n -moz-transition: all 200ms ease-out;\n transition: all 200ms ease-out;\n /* Sizes\n @mixin ========================================================================= */\n /* Color types\n @mixin ========================================================================= */\n /* Icons\n @mixin ========================================================================= */\n}\n\n.button.small {\n min-width: 0;\n}\n\n.button.stroked.white {\n border: 2px solid #fff;\n color: #fff;\n}\n\n.button.stroked.white:hover {\n border-color: #0000FF;\n color: #fff;\n background: #0000FF;\n}\n\n.button.stroked.blue {\n border: 2px solid #0000FF;\n color: #0000FF;\n}\n\n.button.stroked.blue:hover {\n border-color: #fff;\n color: #fff;\n background: #0000FF;\n}\n\n.button.stroked.black {\n border: 2px solid #5D696E;\n color: #1D2433;\n}\n\n.button.stroked.black:hover {\n border-color: #fff;\n color: #fff;\n background: #1D2433;\n}\n\n.button.stroked.light-blue {\n border: 2px solid #c3cfe6;\n color: #c3cfe6;\n}\n\n.button.stroked.light-blue:hover {\n border-color: #fff;\n color: #fff;\n}\n\n.button.stroked.footer {\n border: 2px solid #92A6B2;\n color: #92A6B2;\n}\n\n.button.stroked.footer:hover {\n border-color: #fff;\n color: #fff;\n}\n\n.button.like {\n padding-left: 52px;\n}\n\n.button.like:before {\n position: absolute;\n top: 9px;\n left: 14px;\n width: 25px;\n height: 24px;\n content: '';\n background-image: url(/img/komma/komma_sprite.svg?v=2);\n background-size: 140px 85px;\n background-position: -45px -60px;\n -webkit-transition: -webkit-transform 200ms ease-out;\n -moz-transition: -moz-transform 200ms ease-out;\n transition: transform 200ms ease-out;\n}\n\n.button.like:hover:before {\n -webkit-transform: rotate(-5deg);\n -moz-transform: rotate(-5deg);\n -ms-transform: rotate(-5deg);\n -o-transform: rotate(-5deg);\n transform: rotate(-5deg);\n}\n\n.button.arrow {\n padding-right: 52px;\n}\n\n.button.arrow:before {\n position: absolute;\n top: 17px;\n right: 23px;\n width: 14px;\n height: 14px;\n content: '';\n -webkit-transition: right 200ms ease-out;\n -moz-transition: right 200ms ease-out;\n transition: right 200ms ease-out;\n}\n\n.button.arrow.small:before {\n top: 17px;\n}\n\n.button.arrow:hover:before {\n right: 18px;\n}\n\n.button.arrow.stroked.white:before {\n background-image: url(/img/komma/komma_sprite.svg?v=2);\n background-size: 140px 85px;\n background-position: -40px -35px;\n}\n\n.button.arrow.stroked.blue:before {\n background-image: url(/img/komma/komma_sprite.svg?v=2);\n background-size: 140px 85px;\n background-position: -20px -35px;\n}\n\n.button.arrow.stroked.blue:hover:before {\n background-image: url(/img/komma/komma_sprite.svg?v=2);\n background-size: 140px 85px;\n background-position: -40px -35px;\n}\n\n.button.arrow.stroked.black:before {\n background-image: url(/img/komma/komma_sprite.svg?v=2);\n background-size: 140px 85px;\n background-position: -80px -20px;\n}\n\n.button.arrow.stroked.black:hover:before {\n background-image: url(/img/komma/komma_sprite.svg?v=2);\n background-size: 140px 85px;\n background-position: -40px -35px;\n}\n\n.button.arrow.stroked.blue.down:before {\n background-image: url(/img/komma/komma_sprite.svg?v=2);\n background-size: 140px 85px;\n background-position: -20px -20px;\n}\n\n.button.arrow.stroked.light-blue:before {\n background-image: url(/img/komma/komma_sprite.svg?v=2);\n background-size: 140px 85px;\n background-position: -60px -40px;\n}\n\n.button.arrow.stroked.light-blue:hover:before {\n background-image: url(/img/komma/komma_sprite.svg?v=2);\n background-size: 140px 85px;\n background-position: -40px -35px;\n}\n\n.button.arrow.stroked.footer:before {\n background-image: url(/img/komma/komma_sprite.svg?v=2);\n background-size: 140px 85px;\n background-position: -40px -20px;\n}\n\n.button.arrow.stroked.footer:hover:before {\n background-image: url(/img/komma/komma_sprite.svg?v=2);\n background-size: 140px 85px;\n background-position: -40px -35px;\n}\n\n.back-to-grid {\n display: inline-block;\n position: relative;\n color: #1D2433;\n font-size: .9rem;\n font-weight: 500;\n text-decoration: none;\n padding-left: 42px;\n}\n\n.back-to-grid:before {\n position: absolute;\n top: 6px;\n left: 0;\n content: '';\n width: 16px;\n height: 16px;\n background-image: url(/img/komma/komma_sprite.svg?v=2);\n background-size: 140px 85px;\n background-position: -100px -40px;\n}\n\n.back-to-grid:after {\n position: absolute;\n top: 8px;\n left: 23px;\n content: '';\n width: 14px;\n height: 14px;\n background-image: url(/img/komma/komma_sprite.svg?v=2);\n background-size: 140px 85px;\n background-position: -100px -20px;\n}\n\n/* ==========================================================================\n All global image related sass\n @mixin ========================================================================= */\n\n/**\n * Preload images\n */\n\nimg {\n opacity: 1;\n -webkit-transition: opacity 300ms ease-out;\n -moz-transition: opacity 300ms ease-out;\n transition: opacity 300ms ease-out;\n}\n\nimg.preload {\n opacity: 0;\n}\n\nimg.content,\nimg.stretch {\n width: 100%;\n}\n\nimg.cover {\n object-fit: cover;\n}\n\n/**\n * Used for divs with background-images\n */\n\n.image-cover {\n background-size: cover;\n}\n\n/* Images on grid\n @mixin ========================================================================= */\n\n.image-grid {\n display: grid;\n grid-template-columns: 1fr 1fr;\n}\n\n.image-grid.with-gaps {\n grid-gap: 60px 7.14285714%;\n}\n\n/* ==========================================================================\n Lists\n @mixin ========================================================================= */\n\n/**\n * Services list\n */\n\nul.services-list {\n padding: 0;\n margin: -9px 0 0;\n list-style: none;\n /**\n * 1. make sure display is block to make clickable over the full width\n */\n}\n\nul.services-list a {\n position: relative;\n display: block;\n color: #96A6B2;\n text-decoration: none;\n cursor: pointer;\n /**\n * Arrow at the end of a list item\n */\n}\n\nul.services-list a:after {\n position: absolute;\n top: 10px;\n right: 0;\n width: 15px;\n height: 15px;\n content: '';\n background-image: url(/img/komma/komma_sprite.svg?v=2);\n background-size: 140px 85px;\n background-position: -59px -20px;\n}\n\nul.services-list a:hover {\n color: #0000FF;\n}\n\nul.services-list a:hover:after {\n background-image: url(/img/komma/komma_sprite.svg?v=2);\n background-size: 140px 85px;\n background-position: -59px 0;\n}\n\nul.services-list li.active a {\n color: #1D2433;\n font-weight: 600;\n}\n\nul.services-list li.active a:after {\n background-image: none;\n}\n\n@media screen and (max-width: 500px) {\n ul.services-list {\n line-height: 2;\n }\n}\n\n/* ==========================================================================\n Text blocks\n @mixin ========================================================================= */\n\n.text-block {\n padding: 7.14285714%;\n font-size: 18px;\n /**\n * Buttons in a text block are usually at the bottom,\n * so they can use a little margin top\n */\n}\n\n.col-12 .text-block {\n padding: 8.33333333%;\n}\n\n@media screen and (max-width: 1366px) {\n .text-block {\n padding: 7.14285714% 3.57142857%;\n }\n\n .col-12 .text-block {\n padding: 8.33333333% 4.16666667%;\n }\n}\n\n.col-6 .text-block {\n padding: 16.66666667%;\n}\n\n@media screen and (max-width: 1366px) {\n .col-6 .text-block {\n padding: 16.66666667% 8.33333333%;\n }\n}\n\n.text-block p {\n -webkit-transform: translateY(-9px);\n -moz-transform: translateY(-9px);\n -ms-transform: translateY(-9px);\n -o-transform: translateY(-9px);\n transform: translateY(-9px);\n}\n\n.text-block.top-indent .h2-spacer {\n display: block;\n margin: -15px 0 40px 0;\n font-size: 1.5rem;\n}\n\n.text-block .button {\n margin-top: 40px;\n}\n\n@media screen and (max-width: 768px) {\n .text-block .button {\n margin-top: 16px;\n }\n}\n\n@media screen and (max-width: 500px) {\n .text-block .button {\n margin-top: 0;\n }\n}\n\n@media screen and (max-width: 500px) {\n .text-block {\n line-height: 1.4;\n }\n}\n\n/**\n * Specific partials\n */\n\n/* Account managers\n @mixin ========================================================================= */\n\n.account-managers-holder {\n white-space: nowrap;\n}\n\n.account-managers-holder .account-manager {\n display: inline-block;\n width: calc((100% - 80px) / 3);\n font-size: .8rem;\n line-height: 1.2;\n white-space: normal;\n}\n\n.account-managers-holder .account-manager + .account-manager {\n margin-left: 40px;\n}\n\n.account-managers-holder .account-manager .portrait {\n position: relative;\n overflow: hidden;\n border-radius: 500px;\n margin-bottom: 20px;\n}\n\n.account-managers-holder .account-manager .portrait img {\n width: 100%;\n}\n\n.account-managers-holder .account-manager .name {\n display: block;\n font-weight: 600;\n white-space: nowrap;\n}\n\n.account-managers-holder .account-manager .function {\n display: block;\n color: rgba(255, 255, 255, 0.8);\n white-space: nowrap;\n}\n\n.account-managers-holder .account-manager a {\n text-decoration: none;\n color: #0000FF;\n}\n\n@media screen and (max-width: 768px) {\n .account-managers-holder .account-manager .function {\n font-size: .9rem;\n }\n}\n\n@media screen and (max-width: 550px) {\n .account-managers-holder {\n white-space: normal;\n font-size: 0;\n }\n\n .account-managers-holder .account-manager {\n width: calc((100% - 40px) / 2);\n margin-bottom: 40px;\n }\n\n .account-managers-holder .account-manager:nth-child(2n + 1) {\n margin-left: 0;\n }\n}\n\n@media screen and (max-width: 375px) {\n .account-managers-holder {\n text-align: center;\n }\n\n .account-managers-holder .account-manager {\n width: 100%;\n max-width: 200px;\n margin-left: 0 !important;\n }\n}\n\n/* ==========================================================================\n Call to action bar with account manager\n @mixin ========================================================================= */\n\n.call-to-action-bar {\n position: relative;\n display: block;\n background: #0000FF;\n color: #fff;\n /**\n * Left side with the call-to-action and contact details\n *\n * 1. center the content vertically\n * 2. make sure the contact-details go over the account manager\n */\n /**\n * Right side with the photo of the account manager\n */\n /**\n * Responsive rules\n */\n /*\n * Small breakpoint:\n * Set account manager to background and set contact details over full width\n */\n /*\n * Small breakpoint:\n * Put the text at the bottom for more readability\n */\n}\n\n.call-to-action-bar .call-to-action {\n position: relative;\n display: flex;\n align-items: center;\n flex-grow: 0;\n flex-basis: auto;\n width: 50%;\n z-index: 10;\n}\n\n.call-to-action-bar .container {\n display: flex;\n flex-direction: column;\n justify-content: center;\n padding-left: 16.66666667%;\n max-height: 600px;\n}\n\n.call-to-action-bar .streamer {\n display: block;\n margin-bottom: 2rem;\n line-height: 1;\n font-size: 2rem;\n font-weight: 600;\n}\n\n.call-to-action-bar .name {\n display: block;\n font-size: 1.4rem;\n line-height: 1;\n}\n\n.call-to-action-bar .function {\n display: block;\n margin-bottom: 1.8rem;\n color: rgba(255, 255, 255, 0.7);\n}\n\n.call-to-action-bar .contact-details {\n font-size: 1.4rem;\n font-weight: 500;\n white-space: nowrap;\n}\n\n.call-to-action-bar .phone,\n.call-to-action-bar .email {\n display: inline-block;\n position: relative;\n text-decoration: none;\n}\n\n.call-to-action-bar .phone {\n color: #fff;\n}\n\n.call-to-action-bar .separator {\n display: inline-block;\n margin: 0 10px;\n}\n\n.call-to-action-bar .email {\n color: #00C7FF;\n}\n\n.call-to-action-bar .phone,\n.call-to-action-bar .email {\n padding: 0 5px;\n}\n\n.call-to-action-bar .phone:before,\n.call-to-action-bar .email:before {\n content: '';\n position: absolute;\n bottom: 0;\n left: 0;\n z-index: -1;\n width: 100%;\n height: 50%;\n opacity: 0.2;\n background: #fff;\n transform: scale3d(0, 1, 1);\n transform-origin: 0 50%;\n transition: transform 0.5s;\n transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);\n}\n\n.call-to-action-bar .phone:hover:before,\n.call-to-action-bar .email:hover:before {\n transform: scale3d(1, 1, 1);\n}\n\n.call-to-action-bar .account-manager {\n display: flex;\n justify-content: center;\n align-items: flex-end;\n width: 50%;\n}\n\n.call-to-action-bar .account-manager img {\n max-width: 100%;\n}\n\n@media screen and (max-width: 1080px) {\n .call-to-action-bar .streamer {\n font-size: 1.8rem;\n }\n\n .call-to-action-bar .contact-details {\n font-size: 1.2rem;\n }\n}\n\n@media screen and (max-width: 768px) {\n .call-to-action-bar .call-to-action {\n justify-content: center;\n width: 100%;\n height: 56.25vw;\n }\n\n .call-to-action-bar .container {\n padding-left: 0;\n }\n\n .call-to-action-bar .streamer {\n font-size: 1.4rem;\n margin-bottom: 1rem;\n }\n\n .call-to-action-bar .contact-details {\n font-size: 1rem;\n line-height: 1.2;\n white-space: normal;\n }\n\n .call-to-action-bar .contact-details a {\n display: block;\n }\n\n .call-to-action-bar .separator {\n display: none;\n }\n\n .call-to-action-bar .account-manager {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n justify-content: flex-start;\n }\n\n .call-to-action-bar .account-manager img {\n height: 100%;\n }\n}\n\n@media screen and (max-width: 500px) {\n .call-to-action-bar .call-to-action {\n align-items: flex-end;\n height: 440px;\n }\n\n .call-to-action-bar .call-to-action .streamer,\n .call-to-action-bar .call-to-action .function {\n margin-bottom: 10px;\n }\n\n .call-to-action-bar .container {\n padding-bottom: 40px;\n }\n}\n\n/* ==========================================================================\n Black centered call to action block\n @mixin ========================================================================= */\n\n/**\n * Main block styling\n *\n * 1. Reset default block quote margins\n * except the left for which this is already set\n */\n\n.call-to-action-block {\n padding: 7.14285714%;\n margin-top: 0;\n margin-right: 0;\n margin-bottom: 7.14285714%;\n background: #1D2433;\n color: #fff;\n font-size: 1.1rem;\n font-weight: 500;\n line-height: 1.2727272727;\n /**\n * The block is divided in two flex columns\n *\n * 1. Reset inherit from .call-to-action-block\n */\n /**\n * Large heavy letters on the left side\n */\n /**\n * Small Comment\n */\n}\n\n.call-to-action-block .flex-row {\n align-items: center;\n}\n\n.call-to-action-block .flex-col {\n white-space: normal;\n}\n\n.call-to-action-block .flex-col:first-child {\n margin-right: 25%;\n}\n\n.call-to-action-block .flex-col:nth-child(2) {\n display: flex;\n flex-direction: column;\n flex-shrink: 1;\n justify-content: flex-start;\n /*\n * Add margin-top 'auto' to align .button-holder\n * to the bottom of the parent flex box\n */\n}\n\n.call-to-action-block .flex-col:nth-child(2) .button-holder {\n margin-top: auto;\n}\n\n.call-to-action-block h2 {\n margin: 0;\n color: #fff;\n font-size: 4rem;\n font-weight: 900;\n line-height: 0.875;\n text-transform: uppercase;\n}\n\n.call-to-action-block h3 {\n margin-top: 0;\n}\n\n.call-to-action-block a {\n color: #00C7FF;\n text-decoration: none;\n}\n\n.call-to-action-block .comment {\n display: block;\n margin: 10px 0;\n font-size: 0.8rem;\n line-height: 1.375;\n}\n\n@media screen and (max-width: 1366px) {\n .call-to-action-block .flex-col:first-child {\n margin-right: 16.66666667%;\n }\n}\n\n@media screen and (max-width: 960px) {\n .call-to-action-block h2 {\n font-size: 3rem;\n }\n\n .call-to-action-block .flex-col:first-child {\n margin-right: 0;\n }\n}\n\n@media screen and (max-width: 768px) {\n .call-to-action-block .flexable-layout {\n display: block;\n }\n\n .call-to-action-block h2 {\n font-size: 1.5rem;\n margin-bottom: .5rem;\n }\n\n .call-to-action-block h2 br {\n display: none;\n }\n\n .call-to-action-block .button {\n margin-top: 1.5rem;\n }\n\n .call-to-action-block .flex-col:nth-child(2) {\n max-width: 400px;\n }\n}\n\n@media screen and (max-width: 500px) {\n .call-to-action-block {\n margin-bottom: 0;\n }\n}\n\n@media screen and (max-width: 500px) {\n #call-to-action-block {\n width: 100%;\n }\n}\n\n/* ==========================================================================\n Case row on overview page (/cases)\n @mixin ========================================================================= */\n\n/**\n * 1. Align the half grid-row to the right\n */\n\n.case-layout {\n display: flex;\n min-height: 35vw;\n text-decoration: none;\n /* Responsive case row\n @mixin ========================================================================= */\n}\n\n.case-layout .case-info-container {\n display: flex;\n justify-content: flex-end;\n align-items: flex-end;\n width: 50%;\n}\n\n.case-layout .case-info-container .contained-layout {\n max-width: 840px;\n margin: 0;\n}\n\n.case-layout .case-info-container .info {\n width: 42.85714286%;\n margin-left: 42.85714286%;\n margin-bottom: 14.28571429%;\n color: rgba(255, 255, 255, 0.7);\n font-size: 18px;\n white-space: normal;\n line-height: 1.4;\n}\n\n.case-layout .case-info-container h2 {\n display: inline-block;\n position: relative;\n z-index: 2;\n margin: -8px 0 10px -8px;\n padding: 0 8px;\n color: #fff;\n font-size: 1.6rem;\n font-weight: 600;\n}\n\n.case-layout .case-info-container h2:before {\n content: '';\n position: absolute;\n bottom: 0;\n left: 0;\n z-index: -1;\n width: 100%;\n height: 50%;\n opacity: 0.2;\n background: #fff;\n transform: scale3d(0, 1, 1);\n transform-origin: 100% 50%;\n transition: transform 0.5s;\n transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);\n}\n\n.case-layout .case-info-container .arrow {\n display: inline-block;\n width: 32px;\n height: 14px;\n transition: transform 0.5s;\n background-image: url(/img/komma/komma_sprite.svg?v=2);\n background-size: 140px 85px;\n background-position: 0 0;\n}\n\n.case-layout .case-info-container .cta {\n display: inline-block;\n position: relative;\n top: -2px;\n margin-right: 10px;\n font-weight: 600;\n -webkit-transition: color 0.5s ease-out;\n -moz-transition: color 0.5s ease-out;\n transition: color 0.5s ease-out;\n}\n\n.case-layout .case-image {\n position: relative;\n overflow: hidden;\n width: 50%;\n}\n\n.case-layout .case-image .image {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-size: cover;\n transition: transform 0.5s;\n transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);\n}\n\n.case-layout:hover .case-info-container h2:before {\n transform: scale3d(1, 1, 1);\n}\n\n.case-layout:hover .case-info-container .tags .tag {\n border-color: rgba(255, 255, 255, 0.6);\n}\n\n.case-layout:hover .case-info-container .arrow {\n -webkit-transform: translate3D(20px, 0, 0);\n -moz-transform: translate3D(20px, 0, 0);\n -ms-transform: translate3D(20px, 0, 0);\n -o-transform: translate3D(20px, 0, 0);\n transform: translate3D(20px, 0, 0);\n}\n\n.case-layout:hover .case-info-container .cta {\n color: #fff;\n}\n\n.case-layout:hover .case-image .image {\n -webkit-transform: scale(1.1);\n -moz-transform: scale(1.1);\n -ms-transform: scale(1.1);\n -o-transform: scale(1.1);\n transform: scale(1.1);\n}\n\n@media screen and (max-width: 1080px) {\n .case-layout .case-info-container h2 {\n font-size: 1.2rem;\n }\n}\n\n@media screen and (max-width: 768px) {\n .case-layout {\n flex-direction: column;\n }\n\n .case-layout .case-info-container {\n order: 2;\n width: 100%;\n height: 200px;\n align-items: center;\n }\n\n .case-layout .case-info-container .info {\n box-sizing: border-box;\n margin-left: 0;\n margin-bottom: 0;\n width: 100%;\n padding: 0 30px;\n }\n\n .case-layout .case-image {\n order: 1;\n width: 100%;\n height: 71.42857143vw;\n }\n}\n\nhtml.ie .case-layout {\n min-height: 0;\n}\n\nhtml.ie .case-layout .case-info-container,\nhtml.ie .case-layout .case-image {\n min-height: 500px;\n}\n\n.tags {\n display: block;\n margin-left: -5px;\n margin-bottom: 40px;\n}\n\n.tags .tag {\n display: inline-block;\n padding: 2px 5px;\n margin-right: 5px;\n margin-bottom: 8px;\n border: 1px solid rgba(255, 255, 255, 0.2);\n border-radius: 3px;\n font-size: 18px;\n white-space: nowrap;\n transition: border-color 0.2s;\n cursor: pointer;\n}\n\n.tags .tag:hover {\n border-color: rgba(255, 255, 255, 0.6);\n}\n\n/* ==========================================================================\n Two featured cases next to each other.\n For example as found at the bottom of the about page.\n @mixin ========================================================================= */\n\n.featured-cases {\n /*\n * Small breakpoint:\n * Default is flex, place below each other with display block\n */\n}\n\n.featured-cases .featured-case {\n position: relative;\n}\n\n.featured-cases .featured-case:hover .tags .tag {\n border-color: rgba(255, 255, 255, 0.6);\n}\n\n.featured-cases .color-overlay {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n opacity: 0;\n}\n\n.featured-cases a {\n color: #fff;\n text-decoration: none;\n}\n\n.featured-cases .text-overlay {\n display: flex;\n justify-content: center;\n align-items: center;\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n text-align: center;\n}\n\n.featured-cases .title {\n display: inline-block;\n position: relative;\n z-index: 2;\n margin: -8px 0 10px -8px;\n padding: 0 8px;\n color: #fff;\n font-size: 1.6rem;\n font-weight: 600;\n opacity: 0;\n -webkit-transform: translateY(20px);\n -moz-transform: translateY(20px);\n -ms-transform: translateY(20px);\n -o-transform: translateY(20px);\n transform: translateY(20px);\n}\n\n.featured-cases .tags {\n opacity: 0;\n}\n\n.featured-cases .arrow {\n display: inline-block;\n width: 14px;\n height: 14px;\n opacity: 0;\n -webkit-transition: right 200ms ease-out;\n -moz-transition: right 200ms ease-out;\n transition: right 200ms ease-out;\n background-image: url(/img/komma/komma_sprite.svg?v=2);\n background-size: 140px 85px;\n background-position: -40px -35px;\n -webkit-transform: translateX(-10px);\n -moz-transform: translateX(-10px);\n -ms-transform: translateX(-10px);\n -o-transform: translateX(-10px);\n transform: translateX(-10px);\n}\n\n.featured-cases .read-more__label {\n display: none;\n position: relative;\n top: -2px;\n font-size: 1rem;\n line-height: 1.6;\n margin-right: 20px;\n}\n\n@media screen and (max-width: 768px) {\n .featured-cases {\n display: block;\n }\n}\n\n@media screen and (max-width: 740px) {\n .featured-cases .featured-case + .featured-case {\n margin-top: 24px;\n }\n\n .featured-cases .color-overlay {\n z-index: -1;\n opacity: 1 !important;\n width: 100% !important;\n height: 100% !important;\n transform: none !important;\n }\n\n .featured-cases .text-overlay {\n position: relative;\n height: auto;\n text-align: left;\n }\n\n .featured-cases .description {\n width: 100%;\n padding: 20px 30px 35px;\n line-height: 0;\n }\n\n .featured-cases .title {\n display: block;\n padding: 0;\n margin: 0 0 12px;\n transform: none !important;\n }\n\n .featured-cases .tags {\n margin-left: 0;\n margin-bottom: 15px;\n }\n\n .featured-cases .read-more__label {\n display: inline-block;\n }\n\n .featured-cases .tags,\n .featured-cases .title,\n .featured-cases .arrow {\n opacity: 1 !important;\n line-height: 1.6;\n }\n}\n\n/* ==========================================================================\n Scrollable website component on case-detail\n @mixin ========================================================================= */\n\n#full-size-site-scroll {\n background: #2475CE;\n}\n\n#full-size-site-scroll .scrollable-website {\n width: 100%;\n margin-left: auto;\n margin-right: auto;\n max-width: 1000px;\n padding: 80px 0;\n}\n\n.scrollable-website {\n display: flex;\n flex-direction: column;\n justify-content: center;\n padding: 7.14285714%;\n background: #2475CE;\n}\n\n.scrollable-website .frame {\n position: relative;\n overflow: hidden;\n width: 100%;\n padding-bottom: 60%;\n background: #fff;\n border-radius: 10px;\n box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);\n}\n\n.scrollable-website .frame .image-holder {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n}\n\n.scrollable-website .frame img {\n display: block;\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n}\n\nbody.topsLuchtfilters #identity .logo-wrapper {\n width: 100%;\n max-width: 1000px;\n margin: auto;\n}\n\nbody.topsLuchtfilters #identity .logo-wrapper #tops-logo {\n width: 100%;\n display: block;\n}\n\nbody.topsLuchtfilters #identity .logo-wrapper #tops-logo #icon #arrow-1 path,\nbody.topsLuchtfilters #identity .logo-wrapper #tops-logo #icon #arrow-2 path {\n stroke-dasharray: 290;\n stroke-dashoffset: 0;\n transition: stroke-dashoffset 1.2s;\n}\n\nbody.topsLuchtfilters #identity .logo-wrapper #tops-logo #icon #arrow-3 path,\nbody.topsLuchtfilters #identity .logo-wrapper #tops-logo #icon #arrow-4 path {\n stroke-dasharray: 368;\n stroke-dashoffset: 0;\n transition: stroke-dashoffset 1.2s;\n}\n\nbody.topsLuchtfilters #identity .logo-wrapper #tops-logo #icon #arrow-1 path,\nbody.topsLuchtfilters #identity .logo-wrapper #tops-logo #icon #arrow-2 path,\nbody.topsLuchtfilters #identity .logo-wrapper #tops-logo #icon #arrow-3 path,\nbody.topsLuchtfilters #identity .logo-wrapper #tops-logo #icon #arrow-4 path {\n transition-delay: 1s;\n}\n\nbody.topsLuchtfilters #identity .logo-wrapper #tops-logo #icon #blue-line,\nbody.topsLuchtfilters #identity .logo-wrapper #tops-logo #icon #white-line {\n stroke-dasharray: 130;\n stroke-dashoffset: 0;\n transition: stroke-dashoffset 1.2s;\n}\n\nbody.topsLuchtfilters #identity .logo-wrapper #tops-logo #icon #blue-line {\n transition-delay: 1.7s;\n}\n\nbody.topsLuchtfilters #identity .logo-wrapper #tops-logo #icon #white-line {\n transition-delay: 1.4s;\n}\n\nbody.topsLuchtfilters #identity .logo-wrapper #tops-logo #icon polygon {\n opacity: 1;\n transition: opacity 1s;\n transition-delay: 1.7s;\n}\n\nbody.topsLuchtfilters #identity .logo-wrapper #tops-logo #name #tops path {\n opacity: 1;\n transition: opacity 1s;\n}\n\nbody.topsLuchtfilters #identity .logo-wrapper #tops-logo #name #tops path:nth-child(1) {\n transition-delay: 3s;\n}\n\nbody.topsLuchtfilters #identity .logo-wrapper #tops-logo #name #tops path:nth-child(2) {\n transition-delay: 3.1s;\n}\n\nbody.topsLuchtfilters #identity .logo-wrapper #tops-logo #name #tops path:nth-child(3) {\n transition-delay: 3.2s;\n}\n\nbody.topsLuchtfilters #identity .logo-wrapper #tops-logo #name #tops path:nth-child(4) {\n transition-delay: 3.3s;\n}\n\nbody.topsLuchtfilters #identity .logo-wrapper #tops-logo #name #tops path:nth-child(5) {\n transition-delay: 3.4s;\n}\n\nbody.topsLuchtfilters #identity .logo-wrapper #tops-logo #name #luchtfilters path {\n opacity: 1;\n transition: opacity 1s;\n}\n\nbody.topsLuchtfilters #identity .logo-wrapper #tops-logo #name #luchtfilters path:nth-child(1) {\n transition-delay: 4.2s;\n}\n\nbody.topsLuchtfilters #identity .logo-wrapper #tops-logo #name #luchtfilters path:nth-child(2) {\n transition-delay: 4.24s;\n}\n\nbody.topsLuchtfilters #identity .logo-wrapper #tops-logo #name #luchtfilters path:nth-child(3) {\n transition-delay: 4.28s;\n}\n\nbody.topsLuchtfilters #identity .logo-wrapper #tops-logo #name #luchtfilters path:nth-child(4) {\n transition-delay: 4.32s;\n}\n\nbody.topsLuchtfilters #identity .logo-wrapper #tops-logo #name #luchtfilters path:nth-child(5) {\n transition-delay: 4.36s;\n}\n\nbody.topsLuchtfilters #identity .logo-wrapper #tops-logo #name #luchtfilters path:nth-child(6) {\n transition-delay: 4.4s;\n}\n\nbody.topsLuchtfilters #identity .logo-wrapper #tops-logo #name #luchtfilters path:nth-child(7) {\n transition-delay: 4.44s;\n}\n\nbody.topsLuchtfilters #identity .logo-wrapper #tops-logo #name #luchtfilters path:nth-child(8) {\n transition-delay: 4.48s;\n}\n\nbody.topsLuchtfilters #identity .logo-wrapper #tops-logo #name #luchtfilters path:nth-child(9) {\n transition-delay: 4.52s;\n}\n\nbody.topsLuchtfilters #identity .logo-wrapper #tops-logo #name #luchtfilters path:nth-child(10) {\n transition-delay: 4.56s;\n}\n\nbody.topsLuchtfilters #identity .logo-wrapper #tops-logo #name #luchtfilters path:nth-child(11) {\n transition-delay: 4.6s;\n}\n\nbody.topsLuchtfilters #identity .logo-wrapper #tops-logo #name #luchtfilters path:nth-child(12) {\n transition-delay: 4.64s;\n}\n\nbody.topsLuchtfilters #identity .logo-wrapper #tops-logo #name #luchtfilters path:nth-child(13) {\n transition-delay: 4.68s;\n}\n\nbody.topsLuchtfilters #identity .logo-wrapper #tops-logo #name #luchtfilters path:nth-child(14) {\n transition-delay: 4.72s;\n}\n\nbody.topsLuchtfilters #identity .logo-wrapper #tops-logo #name #luchtfilters path:nth-child(15) {\n transition-delay: 4.76s;\n}\n\nbody.topsLuchtfilters #identity .logo-wrapper #tops-logo #grid #logo-side-horizontal line {\n stroke-dasharray: 1080;\n stroke-dashoffset: 0;\n transition: stroke-dashoffset 1s;\n}\n\nbody.topsLuchtfilters #identity .logo-wrapper #tops-logo #grid #logo-side-vertical line,\nbody.topsLuchtfilters #identity .logo-wrapper #tops-logo #grid #logo-main-vertical line,\nbody.topsLuchtfilters #identity .logo-wrapper #tops-logo #grid #logo-name-vertical-whitespace line,\nbody.topsLuchtfilters #identity .logo-wrapper #tops-logo #grid #logo-name-right line {\n stroke-dasharray: 300;\n stroke-dashoffset: 0;\n transition: stroke-dashoffset 1s;\n}\n\nbody.topsLuchtfilters #identity .logo-wrapper #tops-logo #grid #logo-main-vertical line:nth-child(1),\nbody.topsLuchtfilters #identity .logo-wrapper #tops-logo #grid #logo-main-vertical line:nth-child(8) {\n transition-delay: 0.4s;\n}\n\nbody.topsLuchtfilters #identity .logo-wrapper #tops-logo #grid #logo-main-vertical line:nth-child(2),\nbody.topsLuchtfilters #identity .logo-wrapper #tops-logo #grid #logo-main-vertical line:nth-child(7) {\n transition-delay: 0.3s;\n}\n\nbody.topsLuchtfilters #identity .logo-wrapper #tops-logo #grid #logo-main-vertical line:nth-child(3),\nbody.topsLuchtfilters #identity .logo-wrapper #tops-logo #grid #logo-main-vertical line:nth-child(6) {\n transition-delay: 0.2s;\n}\n\nbody.topsLuchtfilters #identity .logo-wrapper #tops-logo #grid #logo-main-vertical line:nth-child(4),\nbody.topsLuchtfilters #identity .logo-wrapper #tops-logo #grid #logo-main-vertical line:nth-child(5) {\n transition-delay: 0.1s;\n}\n\nbody.topsLuchtfilters #identity .logo-wrapper #tops-logo #grid #logo-name-vertical-whitespace line,\nbody.topsLuchtfilters #identity .logo-wrapper #tops-logo #grid #logo-name-right line {\n transition-delay: 2.4s;\n}\n\nbody.topsLuchtfilters #identity .logo-wrapper #tops-logo #grid #logo-main-horizontal line {\n stroke-dasharray: 470;\n stroke-dashoffset: 0;\n transition: stroke-dashoffset 1s;\n}\n\nbody.topsLuchtfilters #identity .logo-wrapper #tops-logo #grid #logo-main-horizontal line:nth-child(1),\nbody.topsLuchtfilters #identity .logo-wrapper #tops-logo #grid #logo-main-horizontal line:nth-child(4) {\n transition-delay: 0.4s;\n}\n\nbody.topsLuchtfilters #identity .logo-wrapper #tops-logo #grid #logo-main-horizontal line:nth-child(2),\nbody.topsLuchtfilters #identity .logo-wrapper #tops-logo #grid #logo-main-horizontal line:nth-child(3) {\n transition-delay: 0.3s;\n}\n\nbody.topsLuchtfilters #identity .logo-wrapper #tops-logo #grid #logo-circles-right-top path,\nbody.topsLuchtfilters #identity .logo-wrapper #tops-logo #grid #logo-circles-left-top path,\nbody.topsLuchtfilters #identity .logo-wrapper #tops-logo #grid #logo-circles-right-bottom path,\nbody.topsLuchtfilters #identity .logo-wrapper #tops-logo #grid #logo-circles-left-bottom path {\n stroke-dashoffset: 0;\n transition: stroke-dashoffset 1s;\n}\n\nbody.topsLuchtfilters #identity .logo-wrapper #tops-logo #grid #logo-circles-right-top path:nth-child(1),\nbody.topsLuchtfilters #identity .logo-wrapper #tops-logo #grid #logo-circles-left-top path:nth-child(1) {\n stroke-dasharray: 400;\n transition-delay: 0.4s;\n}\n\nbody.topsLuchtfilters #identity .logo-wrapper #tops-logo #grid #logo-circles-right-top path:nth-child(2),\nbody.topsLuchtfilters #identity .logo-wrapper #tops-logo #grid #logo-circles-left-top path:nth-child(2) {\n stroke-dasharray: 310;\n transition-delay: 0.5s;\n}\n\nbody.topsLuchtfilters #identity .logo-wrapper #tops-logo #grid #logo-circles-right-top path:nth-child(3),\nbody.topsLuchtfilters #identity .logo-wrapper #tops-logo #grid #logo-circles-left-top path:nth-child(3) {\n stroke-dasharray: 225;\n transition-delay: 0.6s;\n}\n\nbody.topsLuchtfilters #identity .logo-wrapper #tops-logo #grid #logo-circles-right-top path:nth-child(4),\nbody.topsLuchtfilters #identity .logo-wrapper #tops-logo #grid #logo-circles-left-top path:nth-child(4) {\n stroke-dasharray: 135;\n transition-delay: 0.7s;\n}\n\nbody.topsLuchtfilters #identity .logo-wrapper #tops-logo #grid #logo-circles-right-bottom path:nth-child(1),\nbody.topsLuchtfilters #identity .logo-wrapper #tops-logo #grid #logo-circles-left-bottom path:nth-child(1) {\n stroke-dasharray: 225;\n transition-delay: 0.7s;\n}\n\nbody.topsLuchtfilters #identity .logo-wrapper #tops-logo #grid #logo-circles-right-bottom path:nth-child(2),\nbody.topsLuchtfilters #identity .logo-wrapper #tops-logo #grid #logo-circles-left-bottom path:nth-child(2) {\n stroke-dasharray: 135;\n transition-delay: 0.8s;\n}\n\nbody.topsLuchtfilters #identity .logo-wrapper #tops-logo #grid #logo-diagonal line {\n stroke-dasharray: 275;\n stroke-dashoffset: 0;\n transition: stroke-dashoffset 1s;\n transition-delay: 1s;\n}\n\nbody.topsLuchtfilters #identity .logo-wrapper #tops-logo #grid #logo-name-horizontal-whitespace line {\n stroke-dasharray: 600;\n stroke-dashoffset: 0;\n transition: stroke-dashoffset 1s;\n transition-delay: 1s;\n}\n\nbody.topsLuchtfilters #identity .logo-wrapper #tops-logo #grid #logo-name-horizontal-whitespace line:nth-child(1) {\n transition-delay: 3.8s;\n}\n\nbody.topsLuchtfilters #identity .logo-wrapper #tops-logo #grid #logo-name-horizontal-whitespace line:nth-child(2) {\n transition-delay: 3.7s;\n}\n\nbody.topsLuchtfilters #identity .logo-wrapper #tops-logo #grid #logo-name-horizontal-whitespace line:nth-child(3) {\n transition-delay: 3.6s;\n}\n\nbody.topsLuchtfilters #identity .logo-wrapper #tops-logo #grid #logo-name-horizontal-whitespace line:nth-child(4) {\n transition-delay: 3.5s;\n}\n\nbody.topsLuchtfilters #identity .logo-wrapper.animate #tops-logo path,\nbody.topsLuchtfilters #identity .logo-wrapper.animate #tops-logo line,\nbody.topsLuchtfilters #identity .logo-wrapper.animate #tops-logo polygon {\n transition-delay: 0s !important;\n transition-duration: 1s !important;\n}\n\nbody.topsLuchtfilters #identity .logo-wrapper.animate #tops-logo #name #tops path,\nbody.topsLuchtfilters #identity .logo-wrapper.animate #tops-logo #name #luchtfilters path {\n opacity: 0;\n}\n\nbody.topsLuchtfilters #identity .logo-wrapper.animate #tops-logo #icon #arrow-1 path,\nbody.topsLuchtfilters #identity .logo-wrapper.animate #tops-logo #icon #arrow-2 path {\n stroke-dashoffset: 290;\n}\n\nbody.topsLuchtfilters #identity .logo-wrapper.animate #tops-logo #icon #arrow-3 path,\nbody.topsLuchtfilters #identity .logo-wrapper.animate #tops-logo #icon #arrow-4 path {\n stroke-dashoffset: 368;\n}\n\nbody.topsLuchtfilters #identity .logo-wrapper.animate #tops-logo #icon polygon {\n opacity: 0;\n}\n\nbody.topsLuchtfilters #identity .logo-wrapper.animate #tops-logo #icon #white-line,\nbody.topsLuchtfilters #identity .logo-wrapper.animate #tops-logo #icon #blue-line {\n stroke-dashoffset: 130;\n}\n\nbody.topsLuchtfilters #identity .logo-wrapper.animate #tops-logo #grid #logo-side-horizontal line {\n stroke-dashoffset: 1080;\n}\n\nbody.topsLuchtfilters #identity .logo-wrapper.animate #tops-logo #grid #logo-side-vertical line {\n stroke-dashoffset: 300;\n}\n\nbody.topsLuchtfilters #identity .logo-wrapper.animate #tops-logo #grid #logo-main-vertical line {\n stroke-dashoffset: 300;\n}\n\nbody.topsLuchtfilters #identity .logo-wrapper.animate #tops-logo #grid #logo-main-horizontal line {\n stroke-dashoffset: 470;\n}\n\nbody.topsLuchtfilters #identity .logo-wrapper.animate #tops-logo #grid #logo-circles-right-top path:nth-child(1),\nbody.topsLuchtfilters #identity .logo-wrapper.animate #tops-logo #grid #logo-circles-left-top path:nth-child(1) {\n stroke-dashoffset: 400;\n}\n\nbody.topsLuchtfilters #identity .logo-wrapper.animate #tops-logo #grid #logo-circles-right-top path:nth-child(2),\nbody.topsLuchtfilters #identity .logo-wrapper.animate #tops-logo #grid #logo-circles-left-top path:nth-child(2) {\n stroke-dashoffset: 310;\n}\n\nbody.topsLuchtfilters #identity .logo-wrapper.animate #tops-logo #grid #logo-circles-right-top path:nth-child(3),\nbody.topsLuchtfilters #identity .logo-wrapper.animate #tops-logo #grid #logo-circles-left-top path:nth-child(3) {\n stroke-dashoffset: 225;\n}\n\nbody.topsLuchtfilters #identity .logo-wrapper.animate #tops-logo #grid #logo-circles-right-top path:nth-child(4),\nbody.topsLuchtfilters #identity .logo-wrapper.animate #tops-logo #grid #logo-circles-left-top path:nth-child(4) {\n stroke-dashoffset: 135;\n}\n\nbody.topsLuchtfilters #identity .logo-wrapper.animate #tops-logo #grid #logo-circles-right-bottom path:nth-child(1),\nbody.topsLuchtfilters #identity .logo-wrapper.animate #tops-logo #grid #logo-circles-left-bottom path:nth-child(1) {\n stroke-dashoffset: 225;\n}\n\nbody.topsLuchtfilters #identity .logo-wrapper.animate #tops-logo #grid #logo-circles-right-bottom path:nth-child(2),\nbody.topsLuchtfilters #identity .logo-wrapper.animate #tops-logo #grid #logo-circles-left-bottom path:nth-child(2) {\n stroke-dashoffset: 135;\n}\n\nbody.topsLuchtfilters #identity .logo-wrapper.animate #tops-logo #grid #logo-diagonal line {\n stroke-dashoffset: 275;\n}\n\nbody.topsLuchtfilters #identity .logo-wrapper.animate #tops-logo #grid #logo-name-vertical-whitespace line,\nbody.topsLuchtfilters #identity .logo-wrapper.animate #tops-logo #grid #logo-name-right line {\n stroke-dashoffset: 300;\n}\n\nbody.topsLuchtfilters #identity .logo-wrapper.animate #tops-logo #grid #logo-name-horizontal-whitespace line {\n stroke-dashoffset: 600;\n}\n\n.job-list {\n padding: 0;\n font-size: 18px;\n line-height: 1.4;\n list-style: none;\n}\n\n.job-list > * + * {\n margin-top: 10px;\n}\n\n.job-list__link {\n display: block;\n padding: 20px;\n border: solid 2px currentColor;\n font-size: 1.1em;\n color: #00C7FF;\n text-decoration: none;\n transition: all 0.2s;\n}\n\n.job-list__link:hover {\n color: #fff !important;\n}\n\n.on-light .job-list__link {\n color: #96A6B2;\n}\n\n.on-light .job-list__link:hover {\n color: #0000FF !important;\n}\n\n/* ==========================================================================\n Black centered apply cta block\n ========================================================================== */\n\n.apply-cta-block {\n position: relative;\n width: 83.33333333%;\n margin: auto;\n padding: 7.14285714%;\n background: #1D2433;\n color: #fff;\n font-size: 0.9rem;\n font-weight: 500;\n line-height: 1.6;\n white-space: normal;\n overflow: hidden;\n}\n\n@media screen and (max-width: 1366px) {\n .apply-cta-block {\n width: 100%;\n }\n}\n\n.apply-cta-block__burger {\n position: absolute;\n left: -10%;\n bottom: 40px;\n width: 35%;\n}\n\n.apply-cta-block__burger svg {\n width: 100%;\n}\n\n.apply-cta-block__title {\n margin: 0 0 40px;\n color: #fff;\n font-size: 2.6rem;\n font-weight: 900;\n line-height: 0.875;\n text-transform: uppercase;\n}\n\n.apply-cta-block__inner {\n display: -ms-flexbox;\n display: -webkit-flex;\n display: flex;\n -webkit-justify-content: space-between;\n -moz-justify-content: space-between;\n -ms-justify-content: space-between;\n -webkit-align-items: flex-start;\n -moz-align-items: flex-start;\n -ms-align-items: flex-start;\n justify-content: space-between;\n align-items: flex-start;\n}\n\n@media screen and (max-width: 1366px) {\n .apply-cta-block__inner {\n padding: 0 4.16666667%;\n }\n}\n\n@media screen and (max-width: 500px) {\n .apply-cta-block__inner {\n padding: 0;\n }\n}\n\n.apply-cta-block__content {\n width: 45%;\n}\n\n.apply-cta-block__content-flex {\n display: -ms-flexbox;\n display: -webkit-flex;\n display: flex;\n -webkit-justify-content: space-between;\n -moz-justify-content: space-between;\n -ms-justify-content: space-between;\n -webkit-align-items: center;\n -moz-align-items: center;\n -ms-align-items: center;\n justify-content: space-between;\n align-items: center;\n}\n\n.apply-cta-block__person {\n width: 120px;\n}\n\n.apply-cta-block__person img {\n width: 100%;\n border-radius: 50%;\n overflow: hidden;\n}\n\n.apply-cta-block__description {\n width: calc(100% - 140px);\n}\n\n.apply-cta-block__description a {\n color: #00C7FF;\n text-decoration: none;\n}\n\n.apply-cta-block__form {\n position: relative;\n z-index: 2;\n width: 45%;\n}\n\n.apply-cta-block__form .input-holder input,\n.apply-cta-block__form .input-holder textarea {\n color: white;\n}\n\n.apply-cta-block__form .input-holder textarea {\n overflow: hidden;\n background-color: rgba(29, 36, 51, 0.85);\n}\n\n.apply-cta-block__form .input-holder label {\n color: white;\n margin-bottom: 5px;\n}\n\n.apply-cta-block__form input[type=\"submit\"] {\n margin-top: 5px;\n background-color: #1D2433;\n border-color: white;\n color: white;\n}\n\n.apply-cta-block__form input[type=\"submit\"]:hover {\n color: #1D2433;\n background-color: white;\n}\n\n.apply-cta-block__label {\n margin: 0 0 5px;\n font-size: 0.8rem;\n font-weight: 600;\n}\n\n.apply-cta-block__weTransfer {\n display: -ms-flexbox;\n display: -webkit-flex;\n display: flex;\n -webkit-justify-content: space-between;\n -moz-justify-content: space-between;\n -ms-justify-content: space-between;\n -webkit-align-items: center;\n -moz-align-items: center;\n -ms-align-items: center;\n justify-content: space-between;\n align-items: center;\n width: 300px;\n margin-bottom: 40px;\n padding: 10px 15px;\n border: 2px solid white;\n border-radius: 4px;\n background-color: #1D2433;\n color: white;\n font-size: 0.7rem;\n line-height: 1.1;\n font-weight: 600;\n text-decoration: none;\n transition: color 0.2s, background-color 0.2s;\n}\n\n.apply-cta-block__weTransfer:hover {\n background-color: white;\n color: #1D2433;\n}\n\n.apply-cta-block__weTransfer-icon {\n width: 60px;\n}\n\n.apply-cta-block__weTransfer-icon svg {\n width: 100%;\n}\n\n.apply-cta-block__weTransfer-label {\n width: calc(100% - 75px);\n}\n\n@media screen and (max-width: 950px) {\n .apply-cta-block__inner {\n display: block;\n }\n\n .apply-cta-block__content,\n .apply-cta-block__form {\n width: 100%;\n }\n\n .apply-cta-block__burger {\n left: auto;\n right: -10%;\n transform: scaleX(-1);\n }\n}\n\n@media screen and (max-width: 500px) {\n .apply-cta-block__burger {\n bottom: 10px;\n }\n}\n\n.is-light.apply-cta-block__weTransfer {\n background-color: white;\n color: #1d2433;\n border-color: #1d2433;\n}\n\n.o-service-header {\n margin-top: 60px;\n text-align: center;\n}\n\n.o-service-header__button {\n position: relative;\n display: inline-block !important;\n border: none !important;\n height: auto !important;\n}\n\n.o-service-header__button:after {\n content: '';\n position: absolute;\n width: 100%;\n height: 100%;\n left: 50%;\n top: 50%;\n border: 2px solid white;\n border-radius: 4px;\n transform: translate3d(-50%, -50%, 0);\n transition: height 0.2s, width 0.2s, background-color 0.2s;\n transition-timing-function: ease-in-out;\n}\n\n.o-service-header__button:hover:after {\n height: calc(100% + 10px);\n width: calc(100% + 25px);\n background-color: rgba(255, 255, 255, 0.1) !important;\n}\n\n.o-service-content,\n.o-service-footer {\n width: 85.71428571%;\n max-width: 1440px;\n margin: auto;\n}\n\n.o-service-content .col-3,\n.o-service-footer .col-3,\n.o-service-content .col-4,\n.o-service-footer .col-4,\n.o-service-content .col-5,\n.o-service-footer .col-5,\n.o-service-content .col-6,\n.o-service-footer .col-6,\n.o-service-content .col-7,\n.o-service-footer .col-7 {\n margin: 0;\n}\n\n.o-service-content__block {\n margin: 7.14285714% 0;\n}\n\n@media screen and (max-width: 900px) {\n .o-service-content__block {\n margin: 14.28571429% 0;\n }\n}\n\n@media screen and (min-width: 501px) {\n .o-service-content__block--full-text {\n width: 71.42857143%;\n margin-left: auto;\n margin-right: auto;\n }\n}\n\n@media screen and (min-width: 1201px) {\n .o-service-content__block--full-text {\n width: 57.14285714%;\n }\n}\n\n.o-service-content__text {\n padding: 0 7.14285714%;\n font-size: 18px;\n}\n\n@media screen and (min-width: 901px) {\n .o-service-content__block--two-columns .o-service-content__text {\n padding: 0 14.28571429%;\n }\n}\n\n.o-service-content__button {\n margin-top: 40px;\n}\n\n.o-service-content__block--two-columns {\n display: flex;\n justify-content: space-between;\n align-items: center;\n}\n\n.o-service-content__block--two-columns > * {\n width: 50%;\n}\n\n@media screen and (max-width: 900px) {\n .o-service-content__block--two-columns {\n flex-wrap: wrap;\n }\n\n .o-service-content__block--two-columns > * {\n width: 100%;\n }\n\n .o-service-content__block--two-columns > * + * {\n margin-top: 14.28571429%;\n }\n}\n\n.o-service-content__block--reverse {\n flex-direction: row-reverse;\n}\n\n.o-service-content__block-image img,\n.o-service-content__block--full-image img {\n width: 100%;\n}\n\n.o-service-footer {\n margin-top: 7.14285714%;\n margin-bottom: 7.14285714%;\n}\n\n.o-service-footer__title {\n margin-top: 0;\n}\n\n@media screen and (max-width: 740px) {\n .o-service-footer__featured {\n max-width: 400px;\n margin-bottom: 7.14285714%;\n }\n}\n\n@media screen and (min-width: 741px) {\n .o-service-footer {\n display: flex;\n justify-content: space-between;\n align-items: flex-start;\n }\n\n .o-service-footer__list {\n width: 40%;\n padding: 0 7.14285714%;\n }\n\n .o-service-footer__featured {\n margin-bottom: 0;\n width: 60%;\n }\n}\n\n@media screen and (min-width: 741px) and (max-width: 1200px) {\n .o-service-footer__list {\n width: 50%;\n }\n\n .o-service-footer__featured {\n width: 50%;\n max-width: 400px;\n }\n\n .service .featured-cases {\n display: block;\n }\n}\n\n.c-projector {\n position: relative;\n height: 100%;\n}\n\n.c-projector__figure {\n display: grid;\n grid-template-rows: 1fr;\n grid-template-columns: 1fr;\n height: 100%;\n}\n\n.c-projector__picture {\n grid-column: 1;\n grid-row: 1;\n align-self: center;\n height: 100%;\n display: flex;\n align-items: center;\n background-color: #eaeaea;\n opacity: 0;\n transition: opacity 0.5s;\n}\n\n.c-projector__picture.is-active {\n opacity: 1;\n}\n\n.c-projector__img {\n width: 100%;\n}\n\n@media screen and (min-width: 741px) {\n .c-projector__img {\n max-height: 78vh;\n }\n}\n\n.c-projector__control {\n position: relative;\n z-index: 2;\n grid-column: 1;\n grid-row: 1;\n align-self: end;\n margin-bottom: 8px;\n margin-right: 8px;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n.c-projector__button {\n display: flex;\n justify-content: center;\n align-items: center;\n margin: 5px;\n padding: 10px;\n color: #0000FF;\n background: white;\n border: 1px solid white;\n border-radius: 100%;\n cursor: pointer;\n transition-property: background-color, border, box-shadow;\n transition-duration: 0.25s;\n outline: none;\n}\n\n.c-projector__button:hover {\n color: white;\n background-color: #0000FF;\n border-color: transparent;\n cursor: pointer;\n}\n\n.c-projector__button:active {\n background-color: #0000b3;\n color: white;\n}\n\n.c-projector__button:focus {\n box-shadow: 0 1px 6px 0 black;\n}\n\n.c-projector__button.previous {\n transform: rotate(0.5turn);\n}\n\n.c-projector__arrow {\n display: flex;\n justify-content: center;\n align-items: center;\n height: 16px;\n font-size: 0;\n line-height: 0;\n}\n\n.c-slide-indicator {\n display: flex;\n justify-content: flex-end;\n align-items: center;\n}\n\n.c-slide-indicator__button {\n position: relative;\n display: inline-block;\n width: 30px;\n height: 30px;\n background-color: transparent;\n border: none;\n cursor: pointer;\n transition-property: background-color, opacity;\n transition-duration: 250ms;\n}\n\n.c-slide-indicator__button:focus {\n outline: none;\n}\n\n.c-slide-indicator__button:hover:not(.is-active),\n.c-slide-indicator__button:focus:not(.is-active) {\n opacity: 0.5;\n}\n\n.c-slide-indicator__button:before,\n.c-slide-indicator__button:after {\n content: '';\n position: absolute;\n background-clip: content-box;\n transition-property: transform, background-color, opacity;\n transition-duration: 0.3s;\n transition-timing-function: ease-in-out;\n border-radius: 100%;\n}\n\n.c-slide-indicator__button:before {\n top: calc((30px - 8px) / 2);\n right: calc((30px - 8px) / 2);\n bottom: calc((30px - 8px) / 2);\n left: calc((30px - 8px) / 2);\n background-color: rgba(255, 255, 255, 0.8);\n}\n\n.c-slide-indicator__button:after {\n top: calc((30px - 12px) / 2);\n right: calc((30px - 12px) / 2);\n bottom: calc((30px - 12px) / 2);\n left: calc((30px - 12px) / 2);\n border: 1px solid #00C7FF;\n transform: scale(1.4);\n opacity: 0;\n}\n\n.c-slide-indicator__button.is-active:before {\n background-color: #0066FF;\n border-color: rgba(0, 199, 255, 0.9);\n transform: scale(strip-unit(6px)/strip-unit(8px));\n}\n\n.c-slide-indicator__button.is-active:after {\n opacity: 0.9;\n transform: scale(1);\n}\n\n.c-slide-indicator__button:focus {\n opacity: 1 !important;\n}\n\n.c-slide-indicator__button:focus:before {\n box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.4), 0 0 10px 1px white;\n}\n\n.c-slide-indicator__button:focus:after {\n box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.4), 0 0 10px 1px white;\n}\n\n/* ==========================================================================\n Drip animation\n @mixin ========================================================================= */\n\n/**\n * Container holding al the drips\n * For now this is for simulation only\n */\n\n.drip-container {\n position: fixed;\n z-index: 1000;\n top: 0;\n left: 0;\n}\n\n.drip-container .drip {\n position: fixed;\n top: -100vh;\n left: 0;\n width: 100vw;\n height: 100vh;\n background: #0000FF;\n background: -moz-linear-gradient(top, #00C7FF 0%, #0000FF 100%);\n background: -webkit-linear-gradient(top, #00C7FF 0%, #0000FF 100%);\n background: linear-gradient(to bottom, #00C7FF 0%, #0000FF 100%);\n}\n\n/* ==========================================================================\n Contains styling for drip transition between pages\n @mixin ========================================================================= */\n\n.drip-transition-container {\n position: fixed;\n top: 0;\n left: 0;\n z-index: 1000;\n display: flex;\n justify-content: flex-start;\n width: 100%;\n pointer-events: none;\n}\n\n.drip-transition-container .drip {\n position: relative;\n /**\n * Body defines the height\n *\n * 1. Applying a very large border radius to create round bottom (50% doesn't work here)\n */\n /**\n * The tail contains the inverted circle\n *\n * 1. Use padding-bottom 100% to create a square shape\n * 2. Mask the top part with the inverted circle svg\n */\n /**\n * Create one gradient over all the drips\n *\n * 1. Make sure the gradient expands to viewport's size\n * todo: background attachment fixed doesn't work with transform,\n */\n}\n\n.drip-transition-container .drip .drip-body {\n width: 101%;\n margin-left: -.5%;\n border-radius: 0 0 500px 500px;\n}\n\n.drip-transition-container .drip .drip-tail {\n width: 100%;\n padding-bottom: 100%;\n mask-image: url(/img/komma/structure/drip_top.svg);\n}\n\n.drip-transition-container .drip .drip-body,\n.drip-transition-container .drip .drip-tail {\n position: relative;\n background: #00C7FF;\n}\n\n.drip-transition-container .drip:nth-child(2n) .drip-body {\n border-radius: 500px 500px 0 0;\n}\n\n.drip-transition-container .drip:nth-child(2n) .drip-tail {\n mask-image: url(/img/komma/structure/drip_bottom.svg);\n}\n\n.input-holder {\n margin-bottom: 10px;\n}\n\n.input-holder input,\n.input-holder textarea {\n padding: 0 10px;\n width: 100%;\n background: none;\n border: 1px solid #B5C1C7;\n font-family: 'freight-sans-pro', sans-serif;\n font-feature-settings: 'lnum';\n font-size: 18px;\n font-weight: 400;\n -webkit-appearance: none;\n}\n\n.input-holder input[type=\"text\"],\n.input-holder textarea[type=\"text\"] {\n height: 40px;\n}\n\n.input-holder input::placeholder,\n.input-holder textarea::placeholder {\n color: #d0d7e5;\n}\n\n.input-holder textarea {\n padding: 5px 10px;\n resize: vertical;\n height: 200px;\n min-height: 200px;\n}\n\n.input-holder label {\n display: block;\n color: #5D696E;\n font-weight: 600;\n font-size: .8rem;\n}\n\n.input-holder.error input,\n.input-holder.error textarea {\n border-color: #ffb600;\n}\n\n.input-holder.error label {\n display: none;\n}\n\n.input-holder.error .message {\n display: block;\n color: #ffb600;\n}\n\n.input-holder.honey {\n position: fixed;\n top: -50px;\n height: 20px;\n width: 100%;\n}\n\n.error-message,\nnoscript {\n display: block;\n font-size: 0.75rem;\n color: #ff323c;\n}\n\ninput[type=\"submit\"] {\n position: relative;\n display: inline-block;\n min-width: 240px;\n height: 60px;\n padding: 0 20px;\n margin-top: 20px;\n background: #fff;\n border-radius: 4px;\n border: 2px solid #0000FF;\n color: #0000FF;\n font-family: 'freight-sans-pro', sans-serif;\n font-size: 18px;\n line-height: 55px;\n font-weight: 600;\n cursor: pointer;\n -webkit-transition: all 200ms ease-out;\n -moz-transition: all 200ms ease-out;\n transition: all 200ms ease-out;\n -webkit-appearance: none;\n}\n\ninput[type=\"submit\"]:hover {\n border-color: #fff;\n color: #fff;\n background: #0000FF;\n}\n\ninput[type=\"submit\"]:hover:before {\n right: 18px;\n background-image: url(/img/komma/komma_sprite.svg?v=2);\n background-size: 140px 85px;\n background-position: -40px -35px;\n}\n\ninput[type=\"submit\"]:before {\n position: absolute;\n top: 22px;\n right: 23px;\n width: 14px;\n height: 14px;\n content: '';\n background-image: url(/img/komma/komma_sprite.svg?v=2);\n background-size: 140px 85px;\n background-position: -20px -35px;\n -webkit-transition: right 200ms ease-out;\n -moz-transition: right 200ms ease-out;\n transition: right 200ms ease-out;\n}\n\n/* ==========================================================================\n Main footer\n @mixin ========================================================================= */\n\nfooter.main {\n width: 100%;\n background: #1D2433;\n color: #92A6B2;\n /*\n * Small breakpoint\n * Align footer in column direction\n */\n}\n\nfooter.main a {\n color: #92A6B2;\n text-decoration: none;\n -webkit-transition: color 100ms ease-out;\n -moz-transition: color 100ms ease-out;\n transition: color 100ms ease-out;\n}\n\nfooter.main a:hover {\n color: #fff;\n}\n\nfooter.main .flexable-layout {\n flex-wrap: wrap;\n padding-top: 6.25%;\n}\n\nfooter.main .footer-col {\n display: flex;\n flex-direction: column;\n flex-basis: initial;\n flex-grow: 0;\n flex-shrink: 0;\n justify-content: flex-end;\n width: 33.33333%;\n font-size: 18px;\n}\n\nfooter.main .footer-col.logo-container {\n align-items: flex-start;\n}\n\nfooter.main .footer-col.logo-container .logo {\n width: 60%;\n max-width: 250px;\n fill: #92A6B2;\n -webkit-transition: fill 100ms ease-out;\n -moz-transition: fill 100ms ease-out;\n transition: fill 100ms ease-out;\n}\n\nfooter.main .footer-col.logo-container .logo:hover {\n fill: #fff;\n}\n\n@media screen and (max-width: 1080px) {\n footer.main .footer-col.logo-container .logo {\n width: 75%;\n }\n}\n\nfooter.main .footer-col.button-container {\n align-items: center;\n}\n\nfooter.main .footer-col.button-container .streamer {\n display: inline-block;\n text-align: center;\n margin-bottom: 30px;\n font-size: 1.5rem;\n line-height: 1.4;\n}\n\nfooter.main .footer-col.contact-container {\n align-items: flex-end;\n line-height: 1.6;\n text-align: right;\n}\n\nfooter.main .footer-col .contact-details .right {\n margin-top: 20px;\n}\n\n@media screen and (min-width: 769px) {\n footer.main .footer-col .contact-details {\n display: flex;\n justify-content: flex-end;\n }\n\n footer.main .footer-col .contact-details .right {\n margin-top: 0;\n margin-left: 40px;\n }\n}\n\nfooter.main nav.footer {\n border-top: 1px solid #262F3E;\n margin-top: 6.25%;\n text-align: center;\n width: 100%;\n}\n\nfooter.main nav.footer ul {\n padding: 0;\n margin: 0;\n list-style: none;\n}\n\nfooter.main nav.footer li {\n padding: 3.33333333% 0;\n display: inline-block;\n margin-right: 50px;\n}\n\nfooter.main nav.footer li:last-child {\n margin-right: 0;\n}\n\nfooter.main .social-media .icon {\n display: inline-block;\n height: 24px;\n margin-left: 10px;\n}\n\nfooter.main .social-media .icon.facebook {\n width: 14px;\n background-image: url(/img/komma/komma_sprite.svg?v=2);\n background-size: 140px 85px;\n background-position: 0 -60px;\n}\n\nfooter.main .social-media .icon.linkedIn {\n width: 22px;\n background-image: url(/img/komma/komma_sprite.svg?v=2);\n background-size: 140px 85px;\n background-position: -20px -60px;\n}\n\nfooter.main .social-media .icon.instagram {\n width: 22px;\n background-image: url(/img/komma/komma_sprite.svg?v=2);\n background-size: 140px 85px;\n background-position: -75px -60px;\n}\n\nfooter.main .social-media .icon.behance {\n width: 30px;\n background-image: url(/img/komma/komma_sprite.svg?v=2);\n background-size: 140px 85px;\n background-position: -100px -57px;\n}\n\nfooter.main .less-important-stuff {\n background: #141826;\n width: 100%;\n}\n\nfooter.main .less-important-stuff .col-6 {\n font-size: .8rem;\n line-height: 40px;\n color: #606D7A;\n}\n\nfooter.main .less-important-stuff .col-6 a {\n color: #606D7A;\n}\n\nfooter.main .less-important-stuff .col-6 a:hover {\n color: #788795;\n}\n\nfooter.main .less-important-stuff .col-6:nth-child(2) {\n text-align: right;\n}\n\nfooter.main .less-important-stuff .col-6:nth-child(2) a {\n margin-left: 20px;\n}\n\n@media screen and (min-width: 950px) and (max-width: 1200px) {\n footer.main .flexable-layout {\n justify-content: space-between;\n }\n\n footer.main .footer-col.logo-container {\n width: 210px;\n }\n\n footer.main .footer-col.logo-container .logo {\n width: 80%;\n }\n\n footer.main .footer-col.button-container {\n width: 240px;\n }\n\n footer.main .footer-col.contact-container {\n width: 340px;\n }\n}\n\n@media screen and (min-width: 768px) and (max-width: 950px) {\n footer.main .footer-col.logo-container {\n width: 50%;\n }\n\n footer.main .footer-col.button-container {\n width: 50%;\n align-items: flex-end;\n justify-content: center;\n }\n\n footer.main .footer-col.contact-container {\n margin-top: 80px;\n width: 400px;\n margin-left: auto;\n }\n}\n\n@media screen and (max-width: 1080px) {\n footer.main .footer-col.button-container .button {\n height: 50px;\n line-height: 45px;\n }\n\n footer.main .footer-col.button-container .button:before {\n top: 17px;\n }\n\n footer.main nav.footer li {\n margin-right: 20px;\n }\n}\n\n@media screen and (max-width: 768px) {\n footer.main .flexable-layout {\n flex-direction: column;\n }\n\n footer.main .footer-col {\n width: 100%;\n margin-bottom: 30px;\n }\n\n footer.main .footer-col.button-container {\n align-items: flex-start;\n order: 3;\n }\n\n footer.main .footer-col.contact-container {\n align-items: flex-start;\n order: 1;\n padding-top: 0;\n text-align: left;\n }\n\n footer.main .footer-col.contact-container .social-media .icon {\n margin-left: 0;\n margin-right: 10px;\n }\n\n footer.main .footer-col.logo-container {\n order: 4;\n margin: 6.25% 0;\n }\n\n footer.main nav.footer {\n margin: 0 0 6.25%;\n order: 2;\n border-top: none;\n text-align: left;\n }\n\n footer.main nav.footer li {\n display: block;\n padding: 0;\n }\n\n footer.main .less-important-stuff {\n padding: 20px 0;\n }\n\n footer.main .less-important-stuff .col-6 {\n line-height: 1.2;\n display: block;\n margin: 0 0 0 8.33333333%;\n }\n\n footer.main .less-important-stuff .col-6:nth-child(2) {\n text-align: left;\n }\n\n footer.main .less-important-stuff .col-6:nth-child(2) a {\n margin: 0;\n }\n\n footer.main .less-important-stuff .col-6 a {\n display: block;\n margin: 0;\n }\n}\n\n@media screen and (max-width: 500px) {\n footer.main {\n padding-top: 30px;\n }\n\n footer.main .flexable-layout {\n padding: 0 20px;\n }\n}\n\n/* ==========================================================================\n Big blue header\n specific CSS for the Cases header can be found in case.sass\n @mixin ========================================================================= */\n\n/**\n * Main header\n *\n * 1. Set up the height on 70% of viewport for now, maybe adjust later\n */\n\nheader.main {\n position: relative;\n z-index: 1;\n margin-bottom: 3.57142857vw;\n background: #0000FF;\n /**\n * Large intro text\n */\n /* Responsive header\n @mixin ========================================================================= */\n}\n\nheader.main .intro {\n position: relative;\n padding: 14.28571429% 0;\n color: #fff;\n font-size: 2rem;\n font-weight: 500;\n line-height: 1.25;\n /**\n * Page title\n */\n}\n\nheader.main .intro h1 {\n margin: 0 0 60px 0;\n color: #4D6EFF;\n font-size: .9rem;\n font-weight: 700;\n text-transform: uppercase;\n}\n\nheader.main .intro p {\n margin: 0;\n}\n\nheader.main .intro a {\n color: #00C7FF;\n text-decoration: none;\n}\n\nheader.main .intro .arrow:not(.o-service-header__button) {\n position: absolute;\n bottom: 14.28571429%;\n left: 50%;\n display: block;\n width: 14px;\n height: 32px;\n margin-left: -7px;\n background-image: url(/img/komma/komma_sprite.svg?v=2);\n background-size: 140px 85px;\n background-position: 0 -20px;\n cursor: pointer;\n -webkit-transition: -webkit-transform 200ms ease-out;\n -moz-transition: -moz-transform 200ms ease-out;\n transition: transform 200ms ease-out;\n}\n\nheader.main .intro .arrow:not(.o-service-header__button):hover {\n -webkit-transform: translateY(5px);\n -moz-transform: translateY(5px);\n -ms-transform: translateY(5px);\n -o-transform: translateY(5px);\n transform: translateY(5px);\n}\n\n@media screen and (max-width: 1080px) {\n header.main .intro {\n width: 78.57142857%;\n }\n}\n\n@media screen and (max-width: 768px) {\n header.main h1 {\n margin-bottom: 30px;\n }\n\n header.main .intro {\n font-size: 1.5rem;\n }\n\n header.main .intro .arrow {\n display: none;\n }\n}\n\n@media screen and (max-width: 500px) {\n header.main .intro {\n width: 100%;\n padding: 30px 20px 40px;\n }\n\n header.main .intro p {\n font-size: 1.2rem;\n line-height: 1.3;\n }\n}\n\n/* Header drips\n @mixin ========================================================================= */\n\n.header-drip {\n position: absolute;\n top: 0;\n left: 0;\n background: #0066FF;\n}\n\n.header-drip.top {\n width: 100%;\n height: 3.57142857vw;\n max-height: 60px;\n}\n\n.header-drip.left,\n.header-drip.right {\n top: 0;\n width: 3.57142857%;\n max-width: 60px;\n height: 100%;\n background: linear-gradient(to bottom, #0066FF 0%, #0000FF 100%);\n border-bottom-left-radius: 500px;\n border-bottom-right-radius: 500px;\n}\n\n.header-drip.right {\n left: auto;\n right: 0;\n}\n\n@media screen and (max-width: 768px) {\n .header-drip.top {\n height: 0;\n }\n}\n\n@media screen and (max-width: 500px) {\n .header-drip {\n display: none;\n }\n}\n\n/* ==========================================================================\n Navigation\n @mixin ========================================================================= */\n\n/**\n * Logo and burger container\n * Ratio = 1 : 2\n *\n * 1. Applying a very large border radius to create round bottom (50% doesn't work here)\n */\n\n.navigation-drip {\n position: fixed;\n top: 0;\n left: 0;\n z-index: 100;\n width: 7.14285714%;\n max-width: 120px;\n height: 14.28571429vw;\n max-height: 240px;\n background: #0066FF;\n border-radius: 0 0 500px 500px;\n}\n\n.navigation-drip .logo {\n display: block;\n width: 50%;\n margin: 25%;\n}\n\n.navigation-drip .logo .landscape {\n display: none;\n}\n\n.navigation-drip .logo .portrait {\n width: 100%;\n}\n\n.navigation-drip .burger-container {\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100%;\n padding-bottom: 100%;\n border-radius: 50%;\n}\n\n.navigation-drip .burger-button {\n position: absolute;\n top: 25%;\n left: 25%;\n width: 50%;\n padding-bottom: 50%;\n border-radius: 50%;\n background: #fff;\n cursor: pointer;\n}\n\n.navigation-drip .burger-button svg {\n position: absolute;\n top: 36%;\n left: 30%;\n width: 40%;\n fill: #0000FF;\n overflow: hidden;\n -webkit-transition: fill 200ms ease-out;\n -moz-transition: fill 200ms ease-out;\n transition: fill 200ms ease-out;\n}\n\nhtml.ie .navigation-drip .burger-button svg {\n top: 0;\n}\n\n.navigation-drip .burger-button svg .line1,\n.navigation-drip .burger-button svg .line2,\n.navigation-drip .burger-button svg .line3 {\n -webkit-transition: width 200ms ease-out;\n -moz-transition: width 200ms ease-out;\n transition: width 200ms ease-out;\n}\n\n.navigation-drip .burger-button:hover svg {\n fill: #1D2433;\n}\n\n.navigation-drip .burger-button:hover svg .line2 {\n width: 60%;\n}\n\n.navigation-drip .burger-button:hover svg .line3 {\n width: 70%;\n}\n\n@media screen and (max-width: 768px) {\n .navigation-drip {\n width: 100%;\n max-width: none;\n height: 60px;\n max-height: none;\n background: #0066FF;\n border-radius: 0;\n }\n\n .navigation-drip .burger-container {\n width: 60px;\n height: 60px;\n padding-bottom: 0;\n border-radius: 50%;\n }\n\n .navigation-drip .burger-button {\n top: 10px;\n left: 10px;\n padding-bottom: 0;\n width: 40px;\n height: 40px;\n }\n\n .navigation-drip .logo {\n margin: 10px auto;\n width: 124px;\n }\n\n .navigation-drip .logo .landscape {\n display: block;\n }\n\n .navigation-drip .logo .portrait {\n display: none;\n }\n}\n\n/* Main navigation\n @mixin ========================================================================= */\n\n.close {\n display: none;\n position: fixed;\n top: 0;\n right: 0;\n z-index: 510;\n width: 60px;\n height: 60px;\n cursor: pointer;\n}\n\n.close:after {\n content: '';\n position: absolute;\n top: 25px;\n right: 25px;\n background-image: url(/img/komma/komma_sprite.svg?v=2);\n background-size: 140px 85px;\n background-position: -80px -40px;\n width: 10px;\n height: 10px;\n}\n\n.navigation-is-open .close {\n display: block;\n}\n\n/*\n * White plane on the right side\n *\n * 1. Don't use vw for it will include the scroll bar in its calculations\n */\n\nnav.navigation-main {\n position: fixed;\n top: 0;\n right: 0;\n z-index: 500;\n transform: translate3d(100%, 0, 0);\n width: 50%;\n height: 100vh;\n padding: 10vh 7.14285714%;\n background: #fff;\n color: #0000FF;\n /* Mobile view\n @mixin ========================================================================= */\n}\n\nnav.navigation-main ul {\n position: relative;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n height: 60vh;\n padding: 0;\n margin: 0;\n list-style: none;\n}\n\nnav.navigation-main li {\n /* Services sub list\n @mixin ========================================================================= */\n}\n\nnav.navigation-main li a {\n text-decoration: none;\n -webkit-transition: color 200ms ease-out;\n -moz-transition: color 200ms ease-out;\n transition: color 200ms ease-out;\n}\n\nnav.navigation-main li.active > a {\n text-decoration: line-through;\n}\n\nnav.navigation-main li:not(.active) a:hover {\n color: #00C7FF;\n}\n\nnav.navigation-main li > a {\n display: block;\n color: #0000FF;\n font-size: 1.4rem;\n font-weight: 600;\n line-height: 1;\n}\n\nnav.navigation-main li > ul {\n display: inline-block;\n width: 50%;\n height: auto;\n margin-top: 1.36903571vw;\n}\n\nnav.navigation-main li > ul li {\n padding-bottom: 10px;\n}\n\nnav.navigation-main li > ul a {\n display: block;\n color: #96A6B2;\n font-size: 1.1rem;\n font-weight: 300;\n}\n\nnav.navigation-main li.offer {\n position: absolute;\n top: 0;\n right: 0;\n}\n\nnav.navigation-main li.offer .button {\n font-size: 1rem;\n line-height: 45px;\n}\n\nnav.navigation-main footer {\n display: flex;\n flex-direction: column;\n justify-content: center;\n height: 30vh;\n}\n\nnav.navigation-main footer .footer-content {\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n}\n\nnav.navigation-main footer svg.logo-web-branding-agency {\n width: 40%;\n fill: #D5DCE0;\n}\n\nnav.navigation-main footer .jobs {\n position: relative;\n display: inline-block;\n padding: 15px 20px;\n border-radius: 10px;\n border: 2px solid #0000FF;\n text-align: right;\n line-height: 1.2;\n color: #96A6B2;\n background-color: transparent;\n transition: background-color 0.2s;\n text-decoration: none;\n}\n\nnav.navigation-main footer .jobs strong {\n color: #1E2433;\n}\n\nnav.navigation-main footer .jobs .jobs-amount {\n position: absolute;\n z-index: 3;\n right: -14px;\n top: -10px;\n width: 26px;\n height: 26px;\n border-radius: 14px;\n display: -ms-flexbox;\n display: -webkit-flex;\n display: flex;\n -webkit-justify-content: center;\n -moz-justify-content: center;\n -ms-justify-content: center;\n -webkit-align-items: center;\n -moz-align-items: center;\n -ms-align-items: center;\n justify-content: center;\n align-items: center;\n color: white;\n font-size: 0.8rem;\n line-height: 1;\n font-weight: bold;\n}\n\nnav.navigation-main footer .jobs .jobs-amount:after {\n content: '';\n position: absolute;\n z-index: -1;\n left: 0;\n top: 0;\n display: block;\n width: 100%;\n height: 100%;\n border-radius: 14px;\n background-color: #ff323c;\n transform: scale3d(1, 1, 1);\n transition: all 0.2s;\n}\n\nnav.navigation-main footer .jobs:hover {\n background-color: rgba(0, 0, 255, 0.05);\n}\n\nnav.navigation-main footer .jobs:hover .jobs-amount:after {\n transform: scale3d(1.15, 1.15, 1);\n}\n\n@media screen and (max-width: 1366px) {\n nav.navigation-main {\n width: 57.14285714%;\n }\n}\n\n@media screen and (max-width: 1080px) {\n nav.navigation-main {\n width: 71.42857143%;\n }\n}\n\n@media screen and (max-width: 768px) {\n nav.navigation-main {\n padding: 0;\n width: 85.71428571%;\n height: 100vh;\n overflow-y: scroll;\n -webkit-overflow-scrolling: touch;\n }\n\n nav.navigation-main ul {\n justify-content: flex-start;\n height: auto;\n }\n\n nav.navigation-main li:not(.offer) a {\n display: block;\n padding: 20px;\n font-size: 1.1rem;\n border-bottom: 1px solid #eaeaea;\n }\n\n nav.navigation-main li:not(.offer):not(.active) a:hover {\n color: #0000FF;\n }\n\n nav.navigation-main li.offer {\n position: relative;\n padding: 20px;\n }\n\n nav.navigation-main li > ul {\n display: none;\n }\n\n nav.navigation-main footer {\n display: block;\n }\n\n nav.navigation-main footer .footer-content {\n display: block;\n padding: 0 20px;\n }\n\n nav.navigation-main footer .jobs {\n padding: 20px;\n text-align: left;\n }\n\n nav.navigation-main svg.logo-web-branding-agency {\n display: none;\n }\n}\n\n/* Navigation overlay\n @mixin ========================================================================= */\n\n.navigation-overlay-container {\n position: fixed;\n z-index: 499;\n top: 0;\n left: 0;\n}\n\n.navigation-overlay-container .drip {\n position: fixed;\n top: -100vh;\n left: 0;\n width: 100vw;\n height: 100vh;\n background: #0000FF;\n background: -moz-linear-gradient(top, #00C7FF 0%, #0000FF 100%);\n background: -webkit-linear-gradient(top, #00C7FF 0%, #0000FF 100%);\n background: linear-gradient(to bottom, #00C7FF 0%, #0000FF 100%);\n opacity: .8;\n}\n\n.post-grid {\n display: grid;\n align-items: center;\n justify-content: center;\n grid-template-columns: 1fr 1fr 1fr;\n grid-gap: 4vw;\n}\n\n@media screen and (max-width: 1080px) {\n .post-grid {\n grid-template-columns: 1fr 1fr;\n }\n}\n\n@media screen and (max-width: 500px) {\n .post-grid {\n grid-template-columns: 1fr;\n }\n}\n\n.post-grid .post-thumb {\n align-self: start;\n margin-bottom: 16.66666667%;\n text-align: center;\n}\n\n.post-grid .post-thumb .link-to-post,\n.post-grid .post-thumb .category {\n color: inherit;\n text-decoration: none;\n}\n\n.post-grid .post-thumb .link-to-post {\n display: block;\n}\n\n.post-grid .post-thumb figure {\n width: 100%;\n margin: 0;\n padding-bottom: 56%;\n background: #1D2433 center center;\n background-size: cover;\n}\n\n.post-grid .post-thumb .title {\n display: block;\n margin: 11.111% auto 15px;\n color: #0000FF;\n font-size: 1.2rem;\n line-height: 1.4;\n}\n\n.post-grid .post-thumb .category {\n display: inline-block;\n margin-top: 30px;\n color: rgba(100, 100, 100, 0.3);\n font-size: 16px;\n font-weight: 600;\n}\n\n.post-grid .post-thumb .category:hover {\n color: #00C7FF;\n}\n\n.post-grid__pagination {\n margin-bottom: 40px;\n text-align: center;\n}\n\n.c-pagination {\n display: -ms-flexbox;\n display: -webkit-flex;\n display: flex;\n -webkit-justify-content: center;\n -moz-justify-content: center;\n -ms-justify-content: center;\n -webkit-align-items: center;\n -moz-align-items: center;\n -ms-align-items: center;\n justify-content: center;\n align-items: center;\n display: inline-flex;\n list-style: none;\n padding: 0;\n border: 1px solid #0066FF;\n background-color: white;\n border-radius: 4px;\n}\n\n.c-pagination__item {\n display: -ms-flexbox;\n display: -webkit-flex;\n display: flex;\n -webkit-justify-content: center;\n -moz-justify-content: center;\n -ms-justify-content: center;\n -webkit-align-items: center;\n -moz-align-items: center;\n -ms-align-items: center;\n justify-content: center;\n align-items: center;\n font-size: 16px;\n line-height: 1;\n}\n\n.c-pagination__item + .c-pagination__item {\n border-left: 1px solid #0066FF;\n}\n\n@media screen and (max-width: 450px) {\n .c-pagination__item:first-child,\n .c-pagination__item:last-child {\n display: none;\n }\n\n .c-pagination__item:nth-child(2) {\n border-left: none;\n }\n}\n\n.c-pagination__text,\n.c-pagination__link,\n.c-pagination__prev,\n.c-pagination__next {\n display: -ms-flexbox;\n display: -webkit-flex;\n display: flex;\n -webkit-justify-content: center;\n -moz-justify-content: center;\n -ms-justify-content: center;\n -webkit-align-items: center;\n -moz-align-items: center;\n -ms-align-items: center;\n justify-content: center;\n align-items: center;\n min-width: 46px;\n min-height: 46px;\n padding: 11px 10px 9px;\n}\n\n@media screen and (max-width: 680px) {\n .c-pagination__text,\n .c-pagination__link,\n .c-pagination__prev,\n .c-pagination__next {\n min-width: 35px;\n min-height: 35px;\n padding: 6px 5px 4px;\n }\n}\n\n.c-pagination__text {\n color: rgba(0, 102, 255, 0.4);\n}\n\n.c-pagination__link {\n color: #0066FF;\n text-decoration: none;\n transition: color 0.2s, background-color 0.2s;\n}\n\n.c-pagination__link:hover {\n color: #0047b3;\n background: palette(neutral);\n}\n\n.c-pagination__link.is-active {\n background-color: rgba(0, 102, 255, 0.15);\n font-weight: bold;\n color: #0066FF;\n cursor: default;\n}\n\n.c-pagination__prev,\n.c-pagination__next {\n transition: color 0.2s;\n transform: rotate(0.75turn);\n}\n\n.c-pagination__prev.is-inactive,\n.c-pagination__next.is-inactive {\n color: rgba(0, 102, 255, 0.4);\n background: transparent;\n}\n\n.c-pagination__prev {\n transform: rotate(0.25turn);\n}\n\n/* ==========================================================================\n Holder with mouse icon that tells the user he can scroll\n @mixin ========================================================================= */\n\n.scroll-hinter {\n position: absolute;\n z-index: 15;\n top: 0;\n left: 67.85714286%;\n width: 10.71428571%;\n height: 0;\n}\n\n@media screen and (max-width: 768px) {\n .scroll-hinter {\n display: none;\n }\n}\n\n.scroll-hinter .sizer {\n width: 100%;\n padding-bottom: 75%;\n background: #0000FF;\n border-top-left-radius: 500px;\n border-top-right-radius: 500px;\n -webkit-transform: translateY(-99%);\n -moz-transform: translateY(-99%);\n -ms-transform: translateY(-99%);\n -o-transform: translateY(-99%);\n transform: translateY(-99%);\n}\n\n.scroll-hinter.scroll-hinter--bottom {\n top: auto;\n bottom: 0;\n}\n\n.scroll-hinter.scroll-hinter--bottom .sizer {\n -webkit-transform: translateY(-100%);\n -moz-transform: translateY(-100%);\n -ms-transform: translateY(-100%);\n -o-transform: translateY(-100%);\n transform: translateY(-100%);\n}\n\n.scroll-hinter .icon {\n position: absolute;\n top: 30%;\n left: 38%;\n width: 24%;\n cursor: pointer;\n}\n\n.scroll-hinter .icon .mouse-body,\n.scroll-hinter .icon .mouse-wheel,\n.scroll-hinter .icon .arrow {\n fill: #fff;\n}\n\n.scroll-hinter .icon .arrow {\n -webkit-transition: -webkit-transform 200ms ease-out;\n -moz-transition: -moz-transform 200ms ease-out;\n transition: transform 200ms ease-out;\n}\n\n.scroll-hinter .icon:hover .arrow {\n -webkit-transform: translate3D(0, 30%, 0);\n -moz-transform: translate3D(0, 30%, 0);\n -ms-transform: translate3D(0, 30%, 0);\n -o-transform: translate3D(0, 30%, 0);\n transform: translate3D(0, 30%, 0);\n}\n\n.scroll-hinter .mouse-wheel {\n animation: moveUpDown 1s ease-out infinite;\n}\n\n@keyframes moveUpDown {\n 0% {\n -webkit-transform: translate3D(0, 0, 0);\n -moz-transform: translate3D(0, 0, 0);\n -ms-transform: translate3D(0, 0, 0);\n -o-transform: translate3D(0, 0, 0);\n transform: translate3D(0, 0, 0);\n }\n\n 50% {\n -webkit-transform: translate3D(0, 5%, 0);\n -moz-transform: translate3D(0, 5%, 0);\n -ms-transform: translate3D(0, 5%, 0);\n -o-transform: translate3D(0, 5%, 0);\n transform: translate3D(0, 5%, 0);\n }\n\n 100% {\n -webkit-transform: translate3D(0, 0, 0);\n -moz-transform: translate3D(0, 0, 0);\n -ms-transform: translate3D(0, 0, 0);\n -o-transform: translate3D(0, 0, 0);\n transform: translate3D(0, 0, 0);\n }\n}\n\n/* ==========================================================================\n Team portraits\n @mixin ========================================================================= */\n\n.grid-layout.about-our-team {\n display: grid;\n grid-template-columns: 1fr 1fr 1fr 1fr;\n max-width: 1680px;\n margin: 0 auto;\n}\n\n.grid-layout.about-our-team .text {\n grid-area: 1 / 1 / auto / span 2;\n}\n\n.grid-layout.about-our-team .text-block {\n padding: 16.66666667%;\n padding-top: 3.57142857vw;\n}\n\n@media screen and (max-width: 1080px) {\n .grid-layout.about-our-team {\n grid-template-columns: 1fr 1fr 1fr;\n }\n\n .grid-layout.about-our-team .text-block {\n padding: 6.25%;\n }\n}\n\n@media screen and (max-width: 768px) {\n .grid-layout.about-our-team .text {\n grid-area: 1 / 1 / auto / span 3;\n }\n\n .grid-layout.about-our-team .text-block {\n padding: 8.33333333%;\n }\n}\n\n@media screen and (max-width: 640px) {\n .grid-layout.about-our-team {\n grid-template-columns: 1fr 1fr;\n }\n\n .grid-layout.about-our-team .text {\n grid-area: 1 / 1 / auto / span 2;\n }\n}\n\n@media screen and (max-width: 500px) {\n .grid-layout.about-our-team .text-block {\n padding: 30px 20px 40px;\n }\n\n@supports not (display: grid) {\n .grid-layout.about-our-team::after {\n clear: both;\n content: \"\";\n display: table;\n }\n}\n}\n\nhtml.ie .grid-layout.about-our-team::after {\n clear: both;\n content: \"\";\n display: table;\n}\n\n/**\n * A team member portrait\n *\n * 1. Base the margin on the view width\n * so you get equal spacing vertically and horizontally\n */\n\n.team-portrait {\n position: relative;\n overflow: hidden;\n /**\n * Photo\n */\n /**\n * Name and function\n */\n}\n\n.team-portrait .portrait {\n position: relative;\n overflow: hidden;\n padding-bottom: 138.889%;\n}\n\n.team-portrait .portrait img {\n position: absolute;\n top: 0;\n left: 0;\n max-width: 100%;\n -webkit-transform: translateY(100%);\n -moz-transform: translateY(100%);\n -ms-transform: translateY(100%);\n -o-transform: translateY(100%);\n transform: translateY(100%);\n opacity: 0;\n}\n\n.team-portrait .caption {\n position: relative;\n z-index: 10;\n display: flex;\n flex-direction: column;\n justify-content: center;\n height: 120px;\n padding-left: 16.66666667%;\n margin-bottom: 33.33333333%;\n background: #1D2433;\n color: #fff;\n line-height: 1.22222;\n}\n\n.team-portrait .caption .name,\n.team-portrait .caption .function {\n display: block;\n font-size: .9rem;\n}\n\n.team-portrait .caption .name {\n font-weight: 600;\n}\n\n.team-portrait .caption .function {\n color: #6C6C80;\n}\n\nhtml.ie .team-portrait {\n width: 33%;\n float: left;\n}\n\nhtml.ie .team-portrait .portrait {\n padding-bottom: 130%;\n}\n\n@media screen and (max-width: 500px) {\n .team-portrait .caption {\n margin-bottom: 0;\n height: 80px;\n }\n\n@supports not (display: grid) {\n .team-portrait {\n width: 50%;\n float: left;\n }\n\n .team-portrait .portrait {\n padding-bottom: 130%;\n }\n\n .team-portrait.job-offer {\n width: 100%;\n }\n}\n}\n\n.c-notification {\n text-align: center;\n}\n\n.c-notification--inline-top {\n margin-top: 40px;\n}\n\n.c-notification--inline-bottom {\n margin-bottom: 40px;\n}\n\n.c-notification--static {\n position: fixed;\n z-index: 20;\n bottom: 5px;\n left: 0;\n width: 100%;\n}\n\n.c-notification__main {\n display: inline-block;\n background-color: #0047FF;\n border: 1px solid #00C7FF;\n padding: 12px 20px 10px;\n border-radius: 4px;\n}\n\n.c-notification--static .c-notification__main {\n width: 84%;\n margin-left: auto;\n margin-right: auto;\n}\n\n@media screen and (max-width: 625px) {\n .c-notification--static .c-notification__main {\n width: calc(100% - 10px);\n }\n}\n\n.c-notification__text {\n margin: 0 !important;\n color: #00C7FF;\n font-size: 16px !important;\n line-height: 1.2 !important;\n font-weight: 500 !important;\n}\n\n@media screen and (max-width: 550px) {\n .c-notification__text {\n font-size: 15px !important;\n }\n}\n\n.c-video {\n position: relative;\n height: 0;\n width: 100%;\n padding-bottom: 56.25%;\n background-color: palette(neutral, 200);\n}\n\n.c-video__iframe {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n}\n\n/* ==========================================================================\n Easily change the order of all the sections on a page\n @mixin ========================================================================= */\n\n.section-sorter {\n display: flex;\n flex-direction: column;\n}\n\n.section-sorter .video {\n order: 1;\n}\n\n.section-sorter .intro-section {\n order: 2;\n}\n\n@media screen and (max-width: 768px) {\n .section-sorter .intro-section {\n order: 1;\n }\n\n .section-sorter .video {\n order: 2;\n }\n}\n\n.response-40x header.main .intro .arrow {\n display: none;\n}\n\n/* ==========================================================================\n Specific CSS for the about page\n @mixin ========================================================================= */\n\n.about #team-grid-md {\n white-space: normal;\n}\n\n@media screen and (max-width: 768px) {\n .about #services-list {\n margin-left: 0;\n }\n}\n\n.about .team-portrait.job-offer {\n display: block;\n text-decoration: none;\n}\n\n.about .team-portrait.job-offer .portrait,\n.about .team-portrait.job-offer .caption {\n background: #cad2db;\n}\n\n.about .team-portrait.job-offer .content {\n position: absolute;\n top: 0;\n left: 0;\n padding: 60px;\n font-size: .9rem;\n color: #fff;\n line-height: 1.4;\n}\n\n.about .team-portrait.job-offer .title {\n display: block;\n margin: 0 0 60px;\n color: #fff;\n font-size: 3rem;\n font-weight: 900;\n line-height: 0.875;\n text-transform: uppercase;\n}\n\n.about .team-portrait.job-offer .caption {\n padding-left: 60px;\n padding-right: 60px;\n}\n\n.about .team-portrait.job-offer .button {\n max-width: none;\n min-width: 0;\n}\n\n.about .team-portrait.job-offer:hover .button {\n border-color: #0000FF;\n color: #fff;\n background: #0000FF;\n}\n\n@media screen and (max-width: 768px) {\n .about header.main .intro {\n width: 71.42857143%;\n }\n\n .about .why-us .text-block {\n padding: 7.14285714%;\n }\n\n .about .team-portrait.job-offer {\n grid-area: auto / auto / auto / span 2;\n }\n\n .about .team-portrait.job-offer .title {\n margin-bottom: 10px;\n }\n\n .about .team-portrait.job-offer .portrait {\n padding-bottom: 69.4445%;\n }\n}\n\n@media screen and (max-width: 768px) {\n .about .call-to-action-block {\n margin-bottom: 0;\n }\n\n .about .image-grid.with-gaps {\n grid-gap: 0;\n }\n}\n\n@media screen and (max-width: 500px) {\n .about header.main {\n margin-bottom: 0;\n }\n\n .about header.main .intro {\n width: 100%;\n padding: 30px 20px 40px;\n }\n\n .about .team-portrait.job-offer .content {\n padding: 20px;\n }\n\n .about .team-portrait.job-offer .caption {\n padding: 0 20px;\n height: 100px;\n justify-content: flex-start;\n }\n}\n\n.alaaf .call-to-action-block h2 {\n font-size: 3rem;\n}\n\n.alaaf .puzzle {\n margin-bottom: 10%;\n}\n\n/* ==========================================================================\n Specific CSS for the cases page\n @mixin ========================================================================= */\n\n/* ==========================================================================\n Specific CSS for the cases page\n @mixin ========================================================================= */\n\n/* Case themes\n @mixin ========================================================================= */\n\n/* ==========================================================================\n Mixin used to give the cases their custom colors\n @mixin ========================================================================= */\n\n/* ==========================================================================\n Contains color configuration and add */\n\n/* BullWave\n @mixin ========================================================================= */\n\n/* Dale\n @mixin ========================================================================= */\n\n/* Een en al oor\n @mixin ========================================================================= */\n\n/* Fitale\n @mixin ========================================================================= */\n\n/* i.kapper\n @mixin ========================================================================= */\n\n/* Kiekeboe\n @mixin ========================================================================= */\n\n/* Promic\n @mixin ========================================================================= */\n\n/* Rentman\n @mixin ========================================================================= */\n\n/* Tandarts Maas\n @mixin ========================================================================= */\n\n/* TOPS WTW-filters\n @mixin ========================================================================= */\n\n/* Zuiderbos\n @mixin ========================================================================= */\n\n/* Kemi\n @mixin ========================================================================= */\n\n/* Netwerk Brabant\n @mixin ========================================================================= */\n\n/* Zelfverkopen\n @mixin ========================================================================= */\n\n/* Anvil\n @mixin ========================================================================= */\n\n/* Stafa\n @mixin ========================================================================= */\n\n/* Stempel\n @mixin ========================================================================= */\n\n/* Showdown\n @mixin ========================================================================= */\n\n/* Blije gasten\n @mixin ========================================================================= */\n\n.case.bullWave .navigation-drip {\n background: #463CE6;\n}\n\n.case.bullWave .navigation-drip .burger-container svg {\n fill: #463CE6;\n}\n\n.case.bullWave header.main {\n background: #463CE6;\n}\n\n.case.bullWave header.main .header-drip {\n background: #463CE6;\n}\n\n.case.bullWave .scroll-hinter .sizer {\n background: #3F3BC8;\n}\n\n.case.bullWave .intro-section {\n background: #3F3BC8;\n}\n\n.case.bullWave .dynamic aside {\n background: linear-gradient(to bottom, #ff8485 0%, #FF5153 100%);\n}\n\n.case.bullWave .testimonial {\n background-color: #3F3BC8;\n}\n\n.case.bullWave #full-size-site-scroll {\n background: #463CE6;\n}\n\n.case.bullWave .scrollable-website {\n background: #463CE6;\n}\n\n.testimonial-container.bullWave {\n background-color: #3F3BC8;\n}\n\n.featured-cases .featured-case.bullWave .color-overlay {\n background-color: #463CE6;\n}\n\n.case.dale .navigation-drip {\n background: #233176;\n}\n\n.case.dale .navigation-drip .burger-container svg {\n fill: #233176;\n}\n\n.case.dale header.main {\n background: #233176;\n}\n\n.case.dale header.main .header-drip {\n background: #233176;\n}\n\n.case.dale .scroll-hinter .sizer {\n background: #2750FB;\n}\n\n.case.dale .intro-section {\n background: #2750FB;\n}\n\n.case.dale .dynamic aside {\n background: linear-gradient(to bottom, #2c3f8e 0%, #202E67 100%);\n}\n\n.case.dale .testimonial {\n background-color: #2750FB;\n}\n\n.case.dale #full-size-site-scroll {\n background: #233176;\n}\n\n.case.dale .scrollable-website {\n background: #233176;\n}\n\n.testimonial-container.dale {\n background-color: #2750FB;\n}\n\n.featured-cases .featured-case.dale .color-overlay {\n background-color: #2750FB;\n}\n\n.case.eenenaloor .navigation-drip {\n background: #5546A9;\n}\n\n.case.eenenaloor .navigation-drip .burger-container svg {\n fill: #5546A9;\n}\n\n.case.eenenaloor header.main {\n background: #5546A9;\n}\n\n.case.eenenaloor header.main .header-drip {\n background: #5546A9;\n}\n\n.case.eenenaloor .scroll-hinter .sizer {\n background: #002350;\n}\n\n.case.eenenaloor .intro-section {\n background: #002350;\n}\n\n.case.eenenaloor .dynamic aside {\n background: linear-gradient(to bottom, #8378bd 0%, #6456AC 100%);\n}\n\n.case.eenenaloor .testimonial {\n background-color: #5546A7;\n}\n\n.case.eenenaloor #full-size-site-scroll {\n background: #5546A9;\n}\n\n.case.eenenaloor .scrollable-website {\n background: #5546A9;\n}\n\n.testimonial-container.eenenaloor {\n background-color: #5546A7;\n}\n\n.featured-cases .featured-case.eenenaloor .color-overlay {\n background-color: #6456AC;\n}\n\n.case.fitale .navigation-drip {\n background: #0ABEFF;\n}\n\n.case.fitale .navigation-drip .burger-container svg {\n fill: #0ABEFF;\n}\n\n.case.fitale header.main {\n background: #0ABEFF;\n}\n\n.case.fitale header.main .header-drip {\n background: #0ABEFF;\n}\n\n.case.fitale .scroll-hinter .sizer {\n background: #FF6EA4;\n}\n\n.case.fitale .intro-section {\n background: #FF6EA4;\n}\n\n.case.fitale .dynamic aside {\n background: linear-gradient(to bottom, #ffa1c4 0%, #FF6EA4 100%);\n}\n\n.case.fitale .testimonial {\n background-color: #0ABEFF;\n}\n\n.case.fitale #full-size-site-scroll {\n background: #0ABEFF;\n}\n\n.case.fitale .scrollable-website {\n background: #0ABEFF;\n}\n\n.testimonial-container.fitale {\n background-color: #0ABEFF;\n}\n\n.featured-cases .featured-case.fitale .color-overlay {\n background-color: #FF6EA4;\n}\n\n.case.iKapper .navigation-drip {\n background: #385675;\n}\n\n.case.iKapper .navigation-drip .burger-container svg {\n fill: #385675;\n}\n\n.case.iKapper header.main {\n background: #385675;\n}\n\n.case.iKapper header.main .header-drip {\n background: #385675;\n}\n\n.case.iKapper .scroll-hinter .sizer {\n background: #F09775;\n}\n\n.case.iKapper .intro-section {\n background: #F09775;\n}\n\n.case.iKapper .dynamic aside {\n background: linear-gradient(to bottom, #496f97 0%, #385675 100%);\n}\n\n.case.iKapper .testimonial {\n background-color: #F09775;\n}\n\n.case.iKapper #full-size-site-scroll {\n background: #385675;\n}\n\n.case.iKapper .scrollable-website {\n background: #385675;\n}\n\n.testimonial-container.iKapper {\n background-color: #F09775;\n}\n\n.featured-cases .featured-case.iKapper .color-overlay {\n background-color: #F09775;\n}\n\n.case.kiekeboe .navigation-drip {\n background: #9064D8;\n}\n\n.case.kiekeboe .navigation-drip .burger-container svg {\n fill: #9064D8;\n}\n\n.case.kiekeboe header.main {\n background: #9064D8;\n}\n\n.case.kiekeboe header.main .header-drip {\n background: #9064D8;\n}\n\n.case.kiekeboe .scroll-hinter .sizer {\n background: #FFAACD;\n}\n\n.case.kiekeboe .intro-section {\n background: #FFAACD;\n}\n\n.case.kiekeboe .dynamic aside {\n background: linear-gradient(to bottom, #ddea9d 0%, #CEE173 100%);\n}\n\n.case.kiekeboe .testimonial {\n background-color: #FFD346;\n}\n\n.case.kiekeboe #full-size-site-scroll {\n background: #9064D8;\n}\n\n.case.kiekeboe .scrollable-website {\n background: #9064D8;\n}\n\n.testimonial-container.kiekeboe {\n background-color: #FFD346;\n}\n\n.featured-cases .featured-case.kiekeboe .color-overlay {\n background-color: #9064D8;\n}\n\n.case.promic .navigation-drip {\n background: #ff8f00;\n}\n\n.case.promic .navigation-drip .burger-container svg {\n fill: #ff8f00;\n}\n\n.case.promic header.main {\n background: #ff8f00;\n}\n\n.case.promic header.main .header-drip {\n background: #ff8f00;\n}\n\n.case.promic .scroll-hinter .sizer {\n background: #161b26;\n}\n\n.case.promic .intro-section {\n background: #161b26;\n}\n\n.case.promic .dynamic aside {\n background: linear-gradient(to bottom, #ff7333 0%, #ff5000 100%);\n}\n\n.case.promic .testimonial {\n background-color: #ff7800;\n}\n\n.case.promic #full-size-site-scroll {\n background: #ff8f00;\n}\n\n.case.promic .scrollable-website {\n background: #ff8f00;\n}\n\n.testimonial-container.promic {\n background-color: #ff7800;\n}\n\n.featured-cases .featured-case.promic .color-overlay {\n background-color: #FE8D26;\n}\n\n.case.rentman .navigation-drip {\n background: #ff7800;\n}\n\n.case.rentman .navigation-drip .burger-container svg {\n fill: #ff7800;\n}\n\n.case.rentman header.main {\n background: #ff7800;\n}\n\n.case.rentman header.main .header-drip {\n background: #ff7800;\n}\n\n.case.rentman .scroll-hinter .sizer {\n background: #4C627A;\n}\n\n.case.rentman .intro-section {\n background: #4C627A;\n}\n\n.case.rentman .dynamic aside {\n background: linear-gradient(to bottom, #607b99 0%, #4C627A 100%);\n}\n\n.case.rentman .testimonial {\n background-color: #ff7800;\n}\n\n.case.rentman #full-size-site-scroll {\n background: #ff7800;\n}\n\n.case.rentman .scrollable-website {\n background: #ff7800;\n}\n\n.testimonial-container.rentman {\n background-color: #ff7800;\n}\n\n.featured-cases .featured-case.rentman .color-overlay {\n background-color: #ff7800;\n}\n\n.case.tandartsMaas .navigation-drip {\n background: #ffab8f;\n}\n\n.case.tandartsMaas .navigation-drip .burger-container svg {\n fill: #ffab8f;\n}\n\n.case.tandartsMaas header.main {\n background: #ffab8f;\n}\n\n.case.tandartsMaas header.main .header-drip {\n background: #ffab8f;\n}\n\n.case.tandartsMaas .scroll-hinter .sizer {\n background: #97CFE7;\n}\n\n.case.tandartsMaas .intro-section {\n background: #97CFE7;\n}\n\n.case.tandartsMaas .dynamic aside {\n background: linear-gradient(to bottom, #febfab 0%, #FE9978 100%);\n}\n\n.case.tandartsMaas .testimonial {\n background-color: #95CFE7;\n}\n\n.case.tandartsMaas #full-size-site-scroll {\n background: #ffab8f;\n}\n\n.case.tandartsMaas .scrollable-website {\n background: #ffab8f;\n}\n\n.testimonial-container.tandartsMaas {\n background-color: #95CFE7;\n}\n\n.featured-cases .featured-case.tandartsMaas .color-overlay {\n background-color: #95CFE7;\n}\n\n.case.topsLuchtfilters .navigation-drip {\n background: #00A1F7;\n}\n\n.case.topsLuchtfilters .navigation-drip .burger-container svg {\n fill: #00A1F7;\n}\n\n.case.topsLuchtfilters header.main {\n background: #00A1F7;\n}\n\n.case.topsLuchtfilters header.main .header-drip {\n background: #00A1F7;\n}\n\n.case.topsLuchtfilters .scroll-hinter .sizer {\n background: #0086f7;\n}\n\n.case.topsLuchtfilters .intro-section {\n background: #0086f7;\n}\n\n.case.topsLuchtfilters .dynamic aside {\n background: linear-gradient(to bottom, #2bb5ff 0%, #00A1F7 100%);\n}\n\n.case.topsLuchtfilters .testimonial {\n background-color: #00A1F7;\n}\n\n.case.topsLuchtfilters #full-size-site-scroll {\n background: #00A1F7;\n}\n\n.case.topsLuchtfilters .scrollable-website {\n background: #00A1F7;\n}\n\n.testimonial-container.topsLuchtfilters {\n background-color: #00A1F7;\n}\n\n.featured-cases .featured-case.topsLuchtfilters .color-overlay {\n background-color: #00A1F7;\n}\n\n.case.zuiderbos .navigation-drip {\n background: #1F76D0;\n}\n\n.case.zuiderbos .navigation-drip .burger-container svg {\n fill: #1F76D0;\n}\n\n.case.zuiderbos header.main {\n background: #1F76D0;\n}\n\n.case.zuiderbos header.main .header-drip {\n background: #1F76D0;\n}\n\n.case.zuiderbos .scroll-hinter .sizer {\n background: #12469F;\n}\n\n.case.zuiderbos .intro-section {\n background: #12469F;\n}\n\n.case.zuiderbos .dynamic aside {\n background: linear-gradient(to bottom, #f493b3 0%, #EF6593 100%);\n}\n\n.case.zuiderbos .testimonial {\n background-color: #1F76D0;\n}\n\n.case.zuiderbos #full-size-site-scroll {\n background: #1F76D0;\n}\n\n.case.zuiderbos .scrollable-website {\n background: #1F76D0;\n}\n\n.testimonial-container.zuiderbos {\n background-color: #1F76D0;\n}\n\n.featured-cases .featured-case.zuiderbos .color-overlay {\n background-color: #1F76D0;\n}\n\n.case.kemi .navigation-drip {\n background: #0849BF;\n}\n\n.case.kemi .navigation-drip .burger-container svg {\n fill: #0849BF;\n}\n\n.case.kemi header.main {\n background: #0849BF;\n}\n\n.case.kemi header.main .header-drip {\n background: #0849BF;\n}\n\n.case.kemi .scroll-hinter .sizer {\n background: #053B99;\n}\n\n.case.kemi .intro-section {\n background: #053B99;\n}\n\n.case.kemi .dynamic aside {\n background: linear-gradient(to bottom, #0a5cf0 0%, #0849BF 100%);\n}\n\n.case.kemi .testimonial {\n background-color: #0849BF;\n}\n\n.case.kemi #full-size-site-scroll {\n background: #0849BF;\n}\n\n.case.kemi .scrollable-website {\n background: #0849BF;\n}\n\n.testimonial-container.kemi {\n background-color: #0849BF;\n}\n\n.featured-cases .featured-case.kemi .color-overlay {\n background-color: #0849BF;\n}\n\n.case.netwerkBrabant .navigation-drip {\n background: #D7CCBA;\n}\n\n.case.netwerkBrabant .navigation-drip .burger-container svg {\n fill: #D7CCBA;\n}\n\n.case.netwerkBrabant header.main {\n background: #D7CCBA;\n}\n\n.case.netwerkBrabant header.main .header-drip {\n background: #D7CCBA;\n}\n\n.case.netwerkBrabant .scroll-hinter .sizer {\n background: #272C35;\n}\n\n.case.netwerkBrabant .intro-section {\n background: #272C35;\n}\n\n.case.netwerkBrabant .dynamic aside {\n background: linear-gradient(to bottom, #1d3c82 0%, #142958 100%);\n}\n\n.case.netwerkBrabant .testimonial {\n background-color: #272C35;\n}\n\n.case.netwerkBrabant #full-size-site-scroll {\n background: #D7CCBA;\n}\n\n.case.netwerkBrabant .scrollable-website {\n background: #D7CCBA;\n}\n\n.testimonial-container.netwerkBrabant {\n background-color: #272C35;\n}\n\n.featured-cases .featured-case.netwerkBrabant .color-overlay {\n background-color: #0849BF;\n}\n\n.case.zelfverkopen .navigation-drip {\n background: #7a96cc;\n}\n\n.case.zelfverkopen .navigation-drip .burger-container svg {\n fill: #7a96cc;\n}\n\n.case.zelfverkopen header.main {\n background: #7a96cc;\n}\n\n.case.zelfverkopen header.main .header-drip {\n background: #7a96cc;\n}\n\n.case.zelfverkopen .scroll-hinter .sizer {\n background: #ff8c1e;\n}\n\n.case.zelfverkopen .intro-section {\n background: #ff8c1e;\n}\n\n.case.zelfverkopen .dynamic aside {\n background: linear-gradient(to bottom, #9fb3da 0%, #7a96cc 100%);\n}\n\n.case.zelfverkopen .testimonial {\n background-color: #edf0f5;\n}\n\n.case.zelfverkopen #full-size-site-scroll {\n background: #7a96cc;\n}\n\n.case.zelfverkopen .scrollable-website {\n background: #7a96cc;\n}\n\n.testimonial-container.zelfverkopen {\n background-color: #edf0f5;\n}\n\n.featured-cases .featured-case.zelfverkopen .color-overlay {\n background-color: #edf0f5;\n}\n\n.case.anvil .navigation-drip {\n background: #19bcf7;\n}\n\n.case.anvil .navigation-drip .burger-container svg {\n fill: #19bcf7;\n}\n\n.case.anvil header.main {\n background: #19bcf7;\n}\n\n.case.anvil header.main .header-drip {\n background: #19bcf7;\n}\n\n.case.anvil .scroll-hinter .sizer {\n background: #514443;\n}\n\n.case.anvil .intro-section {\n background: #514443;\n}\n\n.case.anvil .dynamic aside {\n background: linear-gradient(to bottom, #5e5d5d 0%, #444444 100%);\n}\n\n.case.anvil .testimonial {\n background-color: #edf0f5;\n}\n\n.case.anvil #full-size-site-scroll {\n background: #19bcf7;\n}\n\n.case.anvil .scrollable-website {\n background: #19bcf7;\n}\n\n.testimonial-container.anvil {\n background-color: #edf0f5;\n}\n\n.featured-cases .featured-case.anvil .color-overlay {\n background-color: #edf0f5;\n}\n\n.case.stafa .navigation-drip {\n background: #375082;\n}\n\n.case.stafa .navigation-drip .burger-container svg {\n fill: #375082;\n}\n\n.case.stafa header.main {\n background: #375082;\n}\n\n.case.stafa header.main .header-drip {\n background: #375082;\n}\n\n.case.stafa .scroll-hinter .sizer {\n background: #213768;\n}\n\n.case.stafa .intro-section {\n background: #213768;\n}\n\n.case.stafa .dynamic aside {\n background: linear-gradient(to bottom, #e6bf92 0%, #DCA669 100%);\n}\n\n.case.stafa .testimonial {\n background-color: #3f588a;\n}\n\n.case.stafa #full-size-site-scroll {\n background: #375082;\n}\n\n.case.stafa .scrollable-website {\n background: #375082;\n}\n\n.testimonial-container.stafa {\n background-color: #3f588a;\n}\n\n.featured-cases .featured-case.stafa .color-overlay {\n background-color: #375082;\n}\n\n.case.stempel .navigation-drip {\n background: #242424;\n}\n\n.case.stempel .navigation-drip .burger-container svg {\n fill: #242424;\n}\n\n.case.stempel header.main {\n background: #242424;\n}\n\n.case.stempel header.main .header-drip {\n background: #242424;\n}\n\n.case.stempel .scroll-hinter .sizer {\n background: #1d1d1d;\n}\n\n.case.stempel .intro-section {\n background: #1d1d1d;\n}\n\n.case.stempel .dynamic aside {\n background: linear-gradient(to bottom, #fbe5ae 0%, #f9d57d 100%);\n}\n\n.case.stempel .testimonial {\n background-color: #242424;\n}\n\n.case.stempel #full-size-site-scroll {\n background: #242424;\n}\n\n.case.stempel .scrollable-website {\n background: #242424;\n}\n\n.testimonial-container.stempel {\n background-color: #242424;\n}\n\n.featured-cases .featured-case.stempel .color-overlay {\n background-color: #242424;\n}\n\n.case.showdown .navigation-drip {\n background: #3660B3;\n}\n\n.case.showdown .navigation-drip .burger-container svg {\n fill: #3660B3;\n}\n\n.case.showdown header.main {\n background: #3660B3;\n}\n\n.case.showdown header.main .header-drip {\n background: #3660B3;\n}\n\n.case.showdown .scroll-hinter .sizer {\n background: #191D21;\n}\n\n.case.showdown .intro-section {\n background: #191D21;\n}\n\n.case.showdown .dynamic aside {\n background: linear-gradient(to bottom, #fbd138 0%, #FAC606 100%);\n}\n\n.case.showdown .testimonial {\n background-color: #3660B3;\n}\n\n.case.showdown #full-size-site-scroll {\n background: #3660B3;\n}\n\n.case.showdown .scrollable-website {\n background: #3660B3;\n}\n\n.testimonial-container.showdown {\n background-color: #3660B3;\n}\n\n.featured-cases .featured-case.showdown .color-overlay {\n background-color: #191D21;\n}\n\n.case.blijeGasten .navigation-drip {\n background: #EA3228;\n}\n\n.case.blijeGasten .navigation-drip .burger-container svg {\n fill: #EA3228;\n}\n\n.case.blijeGasten header.main {\n background: #EA3228;\n}\n\n.case.blijeGasten header.main .header-drip {\n background: #EA3228;\n}\n\n.case.blijeGasten .scroll-hinter .sizer {\n background: #fff;\n}\n\n.case.blijeGasten .intro-section {\n background: #fff;\n}\n\n.case.blijeGasten .dynamic aside {\n background: linear-gradient(to bottom, #ef5e56 0%, #EA3228 100%);\n}\n\n.case.blijeGasten .testimonial {\n background-color: #fff;\n}\n\n.case.blijeGasten #full-size-site-scroll {\n background: #E6E6E6;\n}\n\n.case.blijeGasten .scrollable-website {\n background: #E6E6E6;\n}\n\n.testimonial-container.blijeGasten {\n background-color: #fff;\n}\n\n.featured-cases .featured-case.blijeGasten .color-overlay {\n background-color: #EA3228;\n}\n\n/* Other case styles\n @mixin ========================================================================= */\n\n.case {\n /* Dynamic content section\n @mixin ========================================================================= */\n /* Case closing image\n @mixin ========================================================================= */\n /* Case testimonial\n @mixin ========================================================================= */\n /* Case pagination\n @mixin ========================================================================= */\n /* Other cases\n @mixin ========================================================================= */\n}\n\n.case header.main {\n margin-bottom: 0;\n padding: 3.57142857% 3.57142857% 0 3.57142857%;\n}\n\n@media screen and (max-width: 500px) {\n .case header.main {\n display: none;\n }\n}\n\n.case header.main .scroll-hinter {\n top: auto;\n bottom: 0;\n}\n\n.case header.main .height-controller {\n position: relative;\n overflow: hidden;\n max-height: 87vh;\n min-height: 600px;\n}\n\n@media screen and (max-width: 1080px) {\n .case header.main .height-controller {\n max-height: none;\n min-height: 0;\n }\n}\n\n.case header.main .ratio-controller {\n position: relative;\n width: 100%;\n height: 0;\n padding-bottom: 56.25%;\n}\n\n@media screen and (min-width: 1981px) {\n .case header.main .ratio-controller {\n padding-bottom: 52%;\n }\n}\n\n.case header.main .ratio-controller .wrapper {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n}\n\n.case header.main .ratio-controller img {\n position: absolute;\n top: 0;\n right: 0;\n width: 100%;\n}\n\n.case header.main .hero-text-layout {\n position: relative;\n z-index: 10;\n height: 100%;\n color: #fff;\n}\n\n.case header.main .hero-text-layout .hero-text-flex-column {\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n margin: 0 auto;\n width: 76.92307692%;\n height: 45%;\n}\n\n@media screen and (min-width: 1801px) {\n .case header.main .hero-text-layout .hero-text-flex-column {\n width: 71.42857143%;\n }\n}\n\n@media screen and (min-width: 1981px) {\n .case header.main .hero-text-layout .hero-text-flex-column {\n width: 100%;\n }\n}\n\n@media screen and (max-width: 1080px) {\n .case header.main .hero-text-layout .hero-text-flex-column {\n width: 92.30769231%;\n }\n}\n\n.case header.main .hero-text-layout .title {\n margin-top: 7.14285714%;\n font-size: 6rem;\n font-weight: 700;\n line-height: 1;\n}\n\n.case header.main .hero-text-double-row .title {\n margin-bottom: 24px;\n}\n\n.case header.main .hero-text-double-row .arrow {\n display: block;\n width: 14px;\n height: 32px;\n background-image: url(/img/komma/komma_sprite.svg?v=2);\n background-size: 140px 85px;\n background-position: 0 -20px;\n cursor: pointer;\n}\n\n@media screen and (min-width: 1681px) {\n .case header.main {\n padding: 60px 60px 0;\n }\n}\n\n@media screen and (max-width: 1080px) {\n .case header.main .hero-text-layout .title {\n font-size: 4rem;\n margin-bottom: 30px;\n }\n}\n\n@media screen and (max-width: 768px) {\n .case header.main .hero-text-layout .title {\n font-size: 3rem;\n }\n}\n\n@media screen and (max-width: 500px) {\n .case header.main .hero-text-layout .title {\n font-size: 1rem;\n }\n}\n\n.case header.main {\n z-index: 3;\n}\n\n.case .intro-section {\n margin-bottom: 0;\n}\n\n.case .intro-section .intro {\n padding: 7.14285714% 0 14.28571429%;\n color: #fff;\n}\n\n.case .intro-section p {\n margin: 0;\n font-size: 2rem;\n font-weight: 500;\n line-height: 1.33333;\n}\n\n.case .intro-section .breadcrumb {\n display: block;\n margin-top: -0.5em;\n margin-bottom: 4.64285714vw;\n color: rgba(255, 255, 255, 0.5);\n font-size: .8rem;\n font-weight: 700;\n letter-spacing: .15em;\n text-transform: uppercase;\n white-space: nowrap;\n}\n\n@media screen and (max-width: 1366px) {\n .case .intro-section .intro p {\n font-size: 1.8rem;\n }\n}\n\n@media screen and (max-width: 1080px) {\n .case .intro-section .intro {\n width: 85.71428571%;\n }\n\n .case .intro-section .intro p {\n font-size: 1.6rem;\n }\n}\n\n@media screen and (max-width: 768px) {\n .case .intro-section .intro p {\n font-size: 1.3rem;\n }\n}\n\n.case .dynamic {\n position: relative;\n display: flex;\n /* Progress bar\n @mixin ========================================================================= */\n /* Content section\n @mixin ========================================================================= */\n}\n\n.case .dynamic aside.progress-container {\n position: absolute;\n top: 0;\n left: 0;\n max-width: 120px;\n height: 100%;\n z-index: 10;\n}\n\n.case .dynamic aside.progress-container .fixable {\n position: absolute;\n top: 0;\n left: 0;\n height: 100vh;\n width: 100%;\n}\n\n.case .dynamic aside.progress-container .fixable.fixed {\n position: fixed;\n width: 7.14285714%;\n max-width: 120px;\n}\n\n.case .dynamic aside.progress-container .fixable.sunk {\n top: auto;\n bottom: 0;\n}\n\n.case .dynamic aside.progress-container .progress {\n position: absolute;\n top: 33vh;\n left: 50%;\n height: 60vh;\n width: 50%;\n}\n\n.case .dynamic aside.progress-container .label {\n cursor: pointer;\n}\n\n.case .dynamic aside.progress-container .line {\n position: absolute;\n right: 0;\n bottom: 0;\n overflow: hidden;\n width: 100%;\n height: 1px;\n background: rgba(255, 255, 255, 0.25);\n}\n\n.case .dynamic aside.progress-container .line span {\n position: absolute;\n top: 0;\n left: 0;\n display: block;\n width: 100%;\n height: 100%;\n background: #fff;\n transform-origin: 100% 0;\n -webkit-transform: scaleX(0);\n -moz-transform: scaleX(0);\n -ms-transform: scaleX(0);\n -o-transform: scaleX(0);\n transform: scaleX(0);\n}\n\n.case .dynamic aside.progress-container ul {\n position: absolute;\n bottom: 0;\n left: 0;\n display: flex;\n justify-content: flex-end;\n width: 60vh;\n padding: 0;\n margin: 0;\n transform-origin: 0 100%;\n -webkit-transform: rotate(-90deg);\n -moz-transform: rotate(-90deg);\n -ms-transform: rotate(-90deg);\n -o-transform: rotate(-90deg);\n transform: rotate(-90deg);\n list-style: none;\n}\n\n.case .dynamic aside.progress-container li {\n position: relative;\n color: #fff;\n flex-grow: 1;\n font-size: 1.5vh;\n text-align: right;\n}\n\n@media screen and (max-width: 1080px) {\n .case .dynamic aside.progress-container {\n display: none;\n }\n}\n\n.case .dynamic .dynamic-content {\n width: 100%;\n font-size: 0;\n}\n\n.case .dynamic .dynamic-content .title-container,\n.case .dynamic .dynamic-content .content-container {\n position: relative;\n vertical-align: top;\n display: inline-block;\n padding: 7.14285714% 0;\n font-size: 18px;\n white-space: normal;\n}\n\n.case .dynamic .dynamic-content .title-container {\n width: 50%;\n padding-left: 14.28571429%;\n}\n\n.case .dynamic .dynamic-content .content-container {\n font-size: 18px;\n width: 35.71428571%;\n}\n\n.case .dynamic .dynamic-content .content-container p:first-child {\n margin-top: -.45em;\n}\n\n.case .dynamic .dynamic-content .content-container .button {\n margin-top: 1rem;\n}\n\n.case .dynamic .dynamic-content .image-container {\n position: relative;\n overflow: hidden;\n}\n\n.case .dynamic .dynamic-content .spacer {\n width: 100%;\n height: 0;\n margin-bottom: 7.14285714%;\n}\n\n@media screen and (max-width: 1600px) {\n .case .dynamic .dynamic-content .spacer:not(.keep) {\n margin-bottom: 0;\n }\n}\n\n@media screen and (max-width: 1080px) {\n .case .dynamic .dynamic-content .title-container {\n padding-left: 7.14285714%;\n }\n\n .case .dynamic .dynamic-content .content-container {\n width: 42.85714286%;\n }\n}\n\n@media screen and (max-width: 768px) {\n .case .dynamic .dynamic-content .title-container {\n width: 85.71428571%;\n margin-left: 7.14285714%;\n padding-left: 0;\n padding-bottom: 0;\n }\n\n .case .dynamic .dynamic-content .content-container {\n margin-left: 7.14285714%;\n padding-top: 0;\n width: 85.71428571%;\n }\n\n .case .dynamic .dynamic-content .image-grid {\n grid-template-columns: 1fr;\n }\n}\n\n@media screen and (max-width: 500px) {\n .case .dynamic .dynamic-content .col-10 {\n width: 100%;\n }\n\n .case .dynamic .dynamic-content .keep.spacer {\n display: none;\n }\n}\n\n.case .closing-image img {\n width: 100%;\n}\n\n.case .testimonial {\n min-height: 800px;\n padding: 7.14285714vw 0;\n margin-bottom: 7.14285714vw;\n background-repeat: no-repeat;\n background-size: contain;\n background-position-y: bottom;\n background-position-x: 20%;\n color: #fff;\n}\n\n.case .testimonial .story-container {\n width: 35.71428571%;\n margin-left: 50%;\n white-space: normal;\n}\n\n.case .testimonial .description {\n font-size: 18px;\n}\n\n.case .testimonial.story {\n font-size: .9rem;\n}\n\n.case .testimonial.story h2 {\n color: rgba(255, 255, 255, 0.7);\n font-size: 3.2rem;\n font-weight: 300;\n line-height: 1.15625;\n}\n\n.case .testimonial.story h2 .name {\n display: block;\n color: #fff;\n font-weight: 400;\n}\n\n@media screen and (max-width: 1080px) {\n .case .testimonial .story-container {\n width: 42.85714286%;\n }\n\n .case .testimonial .story-container h2 {\n font-size: 2rem;\n }\n}\n\n@media screen and (max-width: 768px) {\n .case .testimonial {\n background-size: auto 400px;\n background-position: center bottom;\n padding-bottom: 400px;\n min-height: 0;\n }\n\n .case .testimonial .story-container {\n width: 85.71428571%;\n margin-left: 7.14285714%;\n }\n}\n\n.case .cases-pagination .flex-col {\n overflow: hidden;\n}\n\n.case .other-cases {\n margin-bottom: 7.14285714%;\n}\n\n.case .featured-cases .featured-case:first-child .arrow {\n -webkit-transform: rotate(180deg) translateX(-10px);\n -moz-transform: rotate(180deg) translateX(-10px);\n -ms-transform: rotate(180deg) translateX(-10px);\n -o-transform: rotate(180deg) translateX(-10px);\n transform: rotate(180deg) translateX(-10px);\n}\n\n.case.netwerkBrabant header.main .hero-text-layout .hero-text-flex-column {\n height: 80%;\n max-height: 87vh;\n}\n\n.case.blijeGasten .tags .tag {\n border-color: rgba(21, 26, 36, 0.5);\n}\n\n.case.blijeGasten header.main .hero-text-layout {\n color: #151A24;\n}\n\n.case.blijeGasten .intro-section .breadcrumb {\n color: rgba(21, 26, 36, 0.5);\n}\n\n.case.blijeGasten .intro-section .intro {\n color: #151A24;\n}\n\n.case.blijeGasten .scroll-hinter .icon .mouse-body,\n.case.blijeGasten .scroll-hinter .icon .mouse-wheel,\n.case.blijeGasten .scroll-hinter .icon .arrow {\n fill: #151A24;\n}\n\n/* ==========================================================================\n Specific CSS for the contact page\n @mixin ========================================================================= */\n\n.contact {\n /* Basic structure\n @mixin ========================================================================= */\n /* Company details\n @mixin ========================================================================= */\n /* Social media\n @mixin ========================================================================= */\n /* Form\n @mixin ========================================================================= */\n /* Maps\n @mixin ========================================================================= */\n}\n\n.contact header.main {\n margin-bottom: 7.14285714%;\n padding-bottom: 7.14285714%;\n}\n\n.contact header.main .intro {\n padding-bottom: 7.14285714%;\n}\n\n.contact header.main .phone-holder .phone {\n display: block;\n color: #fff;\n text-decoration: none;\n font-size: 1.4rem;\n margin-bottom: 7.14285714%;\n}\n\n.contact header.main .company-details,\n.contact header.main .account-managers-holder {\n color: #fff;\n}\n\n.contact header.main .company-details a,\n.contact header.main .account-managers-holder a {\n color: #00C7FF;\n text-decoration: none;\n}\n\n.contact header.main .flexable-layout {\n flex-direction: row;\n align-items: flex-end;\n margin: 0 auto;\n padding-bottom: 3.57142857%;\n width: 71.42857143%;\n}\n\n@media screen and (max-width: 1080px) {\n .contact header.main .phone-holder,\n .contact header.main .flexable-layout {\n width: 78.57142857%;\n }\n\n .contact header.main .flexable-layout {\n flex-direction: column;\n align-items: flex-start;\n }\n\n .contact header.main .company-details {\n order: 2;\n width: 100%;\n }\n\n .contact header.main .account-managers-holder {\n order: 1;\n margin-bottom: 7.14285714%;\n width: 100%;\n }\n}\n\n@media screen and (max-width: 768px) {\n .contact header.main .account-managers-holder {\n padding-bottom: 7.14285714%;\n border-bottom: 1px solid rgba(255, 255, 255, 0.5);\n }\n}\n\n.contact .company-details {\n width: 50%;\n}\n\n.contact .account-managers-holder {\n width: 50%;\n}\n\n.contact .sm-icon {\n display: inline-block;\n height: 22px;\n margin-right: 10px;\n background-image: url(/img/komma/komma_sprite.svg?v=2);\n background-size: 140px 85px;\n background-position: 0 -60px;\n}\n\n.contact .sm-icon.facebook {\n width: 12px;\n}\n\n.contact .sm-icon.linkedin {\n width: 22px;\n background-position: -20px -60px;\n -webkit-transform: translateY(-1px);\n -moz-transform: translateY(-1px);\n -ms-transform: translateY(-1px);\n -o-transform: translateY(-1px);\n transform: translateY(-1px);\n}\n\n.contact .sm-icon.behance {\n width: 30px;\n background-position: -100px -57px;\n}\n\n.contact .sm-icon.instagram {\n width: 22px;\n background-position: -75px -60px;\n}\n\n@media screen and (max-width: 1080px) {\n .contact .form-maps-holder {\n width: 78.57142857%;\n }\n}\n\n.contact .form-holder {\n padding-bottom: 10%;\n}\n\n@media screen and (max-width: 1080px) {\n .contact .form-holder {\n display: block;\n margin: 0 auto;\n width: 72.72727273%;\n }\n}\n\n@media screen and (max-width: 768px) {\n .contact .form-holder {\n width: 100%;\n }\n}\n\n.contact .maps-holder {\n margin-left: 10%;\n}\n\n@media screen and (max-width: 1080px) {\n .contact .maps-holder {\n display: block;\n margin: 0 auto;\n width: 80%;\n }\n}\n\n@media screen and (max-width: 768px) {\n .contact .maps-holder {\n width: 100%;\n }\n}\n\n.contact .map-square {\n position: relative;\n width: 100%;\n padding-bottom: 100%;\n margin-bottom: 20%;\n}\n\n.contact .map-mask {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n overflow: hidden;\n}\n\n.contact #map {\n width: 100%;\n height: 110%;\n}\n\n/* ==========================================================================\n Specific CSS for the home page\n @mixin ========================================================================= */\n\n.intro-section {\n position: relative;\n z-index: 2;\n background: #0000FF;\n color: #fff;\n}\n\n.intro-section .intro {\n padding: 10.71428571% 0 10.71428571%;\n}\n\n.intro-section p {\n margin: 0;\n font-size: 2rem;\n font-weight: 500;\n line-height: 1.33333;\n}\n\n.intro-section .breadcrumb {\n display: block;\n margin-top: -0.5em;\n margin-bottom: 4.64285714vw;\n color: rgba(255, 255, 255, 0.5);\n font-size: .8rem;\n font-weight: 700;\n letter-spacing: .15em;\n text-transform: uppercase;\n white-space: nowrap;\n}\n\n@media screen and (max-width: 1681px) {\n .intro-section {\n margin-bottom: 0;\n }\n}\n\n@media screen and (max-width: 1366px) {\n .intro-section .intro p {\n font-size: 1.8rem;\n }\n}\n\n@media screen and (max-width: 1080px) {\n .intro-section .intro {\n width: 78.57142857%;\n }\n\n .intro-section .intro p {\n font-size: 1.6rem;\n }\n}\n\n@media screen and (max-width: 768px) {\n .intro-section .intro {\n width: 71.42857143%;\n }\n\n .intro-section .intro p {\n font-size: 1.3rem;\n }\n}\n\n@media screen and (max-width: 500px) {\n .intro-section .intro-section .header-drip {\n display: none;\n }\n\n .intro-section .intro-section .intro {\n padding: 30px 20px 40px;\n width: 100%;\n }\n\n .intro-section .intro-section .intro p {\n font-size: 1.1rem;\n line-height: 1.3;\n }\n}\n\n.home .featured-cases {\n max-width: 1680px;\n margin: 0 auto;\n}\n\n.home .about-our-company .text-block {\n padding-top: 14.28571429%;\n padding-bottom: 14.28571429%;\n}\n\n.home .featured-testimonials {\n display: flex;\n flex-wrap: wrap;\n}\n\n.home .award-container {\n display: flex;\n flex-wrap: wrap;\n}\n\n.home .award-container .award-logo,\n.home .award-container .award-text {\n width: 50%;\n}\n\n.home .award-container .award-text {\n display: table;\n padding: 12.5% 0;\n}\n\n.home .award-container .award-logo {\n display: flex;\n align-items: center;\n justify-content: flex-start;\n}\n\n.home .award-container .award-logo img {\n max-width: 300px;\n}\n\n@media screen and (max-width: 1080px) {\n .home .award-container {\n width: 78.57142857%;\n }\n}\n\n@media screen and (max-width: 768px) {\n .home .award-container .award-logo,\n .home .award-container .award-text {\n width: 100%;\n }\n\n .home .award-container .award-text {\n order: 1;\n }\n\n .home .award-container .award-logo {\n order: 2;\n justify-content: center;\n margin-bottom: 9.09090909%;\n }\n}\n\n@media screen and (max-width: 768px) {\n .home .award-container {\n width: 100%;\n }\n\n .home .award-container .award-text {\n padding: 30px 20px;\n }\n}\n\n.home .about-our-team img {\n width: 50%;\n max-height: 600px;\n object-fit: cover;\n}\n\n.home .about-our-team .text-block {\n width: 85.71428571%;\n padding: 14.28571429%;\n}\n\n@media screen and (min-width: 1601px) {\n .home .about-our-team .flexable-layout {\n padding: 7.14285714% 0;\n }\n}\n\n@media screen and (max-width: 1080px) {\n .home .about-our-company .column-container {\n white-space: nowrap;\n }\n}\n\n@media screen and (max-width: 768px) {\n .home .about-our-company .column-container {\n white-space: normal;\n }\n\n .home .about-our-company .text-block {\n padding-right: 8.33333333%;\n padding-left: 8.33333333%;\n }\n\n .home .about-our-company .col-12 > .col-6 {\n width: 100%;\n }\n\n .home .about-our-company .col-12 :nth-child(2) {\n padding-top: 0;\n }\n\n .home .about-our-team .flexable-layout {\n flex-direction: column;\n }\n\n .home .about-our-team .flexable-layout .flex-col,\n .home .about-our-team .flexable-layout .text-block {\n width: 100%;\n }\n\n .home .about-our-team .flexable-layout img {\n width: 100%;\n height: 56.25vw;\n }\n\n .home .about-our-company .column-container {\n width: 100%;\n }\n\n .home .about-our-company .text-block {\n padding: 30px 20px 40px;\n border-bottom: 1px solid #eaeaea;\n }\n\n .home .about-our-company .text-block:nth-child(2) {\n padding-top: 30px;\n }\n\n .home .about-our-team .flexable-layout .flex-col {\n order: 1;\n }\n\n .home .about-our-team .flexable-layout img {\n order: 2;\n }\n\n .home .about-our-team .text-block {\n padding: 30px 20px 40px;\n }\n}\n\n/**\n * video header\n *\n * 1. Set up the height on 90% of viewport for now, maybe adjust later\n */\n\nsection.video {\n position: relative;\n overflow: hidden;\n max-height: 95vh;\n min-height: 600px;\n}\n\n@media screen and (max-width: 1080px) {\n section.video {\n max-height: none;\n min-height: 0;\n }\n}\n\nsection.video .video-container {\n position: relative;\n padding-bottom: 56.3%;\n background: #1d2433;\n}\n\nsection.video iframe,\nsection.video .video-overlay {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n}\n\nsection.video .overlay {\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100%;\n height: 100%;\n}\n\nsection.video .contained-layout {\n display: flex;\n height: 100%;\n}\n\nsection.video .logo-web-branding-agency {\n position: absolute;\n bottom: 0;\n left: 0;\n fill: #fff;\n padding-bottom: 20%;\n}\n\n@media screen and (max-width: 1080px) {\n section.video .logo-holder {\n margin-left: 10.71428571%;\n }\n}\n\n@media screen and (max-width: 768px) {\n section.video .logo-holder {\n display: none;\n }\n\n section.video .overlay {\n display: none;\n }\n}\n\n#ytplayer {\n opacity: 0;\n}\n\n/* ==========================================================================\n Specific CSS for the jobs page\n @mixin ========================================================================= */\n\n.ip header.main {\n padding-bottom: 7.14285714%;\n margin-bottom: 0;\n}\n\n.ip header.main .intro {\n font-size: 1rem;\n padding-bottom: 0;\n margin-bottom: 60px;\n}\n\n.ip .ip-address {\n color: #00C7FF;\n}\n\n.ip input[name=\"name\"],\n.ip input[name=\"company\"] {\n margin-bottom: 60px;\n max-width: 300px;\n color: #fff;\n}\n\n.ip input[name=\"name\"]::placeholder,\n.ip input[name=\"name\"]::-webkit-input-placeholder,\n.ip input[name=\"name\"]::-moz-placeholder,\n.ip input[name=\"name\"]:-ms-input-placeholder,\n.ip input[name=\"name\"]:-moz-placeholder,\n.ip input[name=\"company\"]::placeholder,\n.ip input[name=\"company\"]::-webkit-input-placeholder,\n.ip input[name=\"company\"]::-moz-placeholder,\n.ip input[name=\"company\"]:-ms-input-placeholder,\n.ip input[name=\"company\"]:-moz-placeholder {\n color: #B2B2FD;\n}\n\n.ip label {\n color: #ffffff;\n}\n\n/* ==========================================================================\n Specific CSS for the jobs page\n @mixin ========================================================================= */\n\n.jobs header.main {\n margin-bottom: 0;\n}\n\n.jobs header.main .intro {\n padding: 14.28571429% 0 7.14285714%;\n}\n\n.jobs header.main .job-list {\n margin-top: 12.5%;\n}\n\n.jobs .our-offer {\n margin-bottom: 7.14285714%;\n}\n\n.jobs .image-holder {\n margin-bottom: 7.14285714%;\n}\n\n@media screen and (max-width: 1080px) {\n .jobs .summary .text-block,\n .jobs .job .text-block {\n display: block;\n width: 83.33333333%;\n margin: 0 auto;\n padding-left: 0;\n padding-right: 0;\n }\n\n .jobs .summary .text-block:first-child,\n .jobs .job .text-block:first-child {\n padding-bottom: 1em;\n }\n\n .jobs .summary .text-block:nth-child(2),\n .jobs .job .text-block:nth-child(2) {\n padding-top: 0;\n }\n\n .jobs .summary .text-block .h2-spacer,\n .jobs .job .text-block .h2-spacer {\n display: none;\n }\n\n .jobs .summary {\n margin-bottom: 80px;\n }\n\n .jobs .our-offer {\n display: block;\n margin: 0 auto;\n width: 71.42857143%;\n }\n}\n\n@media screen and (max-width: 768px) {\n .jobs .summary .text-block,\n .jobs .job .text-block {\n width: 100%;\n }\n\n .jobs .summary .image-holder {\n width: 100%;\n }\n\n .jobs .our-offer {\n width: 85.71428571%;\n }\n}\n\n@media screen and (max-width: 500px) {\n .jobs .our-offer {\n width: 100%;\n padding: 0 20px;\n }\n\n .jobs .summary,\n .jobs .job {\n padding: 0 20px;\n }\n}\n\n.job header.main .intro {\n width: 85.71428571%;\n max-width: 740px;\n margin: auto;\n padding: 14.28571429% 0 3.57142857%;\n}\n\n.job header.main .intro h1 {\n margin: 0;\n color: #fff;\n font-size: 2rem;\n font-weight: 500;\n line-height: 1.25;\n text-transform: none;\n}\n\n.job .job-description {\n width: 85.71428571%;\n max-width: 740px;\n margin: 0 auto 7.14285714%;\n font-size: 20px;\n white-space: normal;\n}\n\n.job .job-description > * + * {\n margin-top: 40px;\n}\n\n.job .job-intro {\n color: #1E2433;\n font-size: 1.22222rem;\n line-height: 1.54545;\n}\n\n.job .back-to-grid {\n margin-bottom: 16.66666667%;\n}\n\n.job .summary .text-block.top-indent .h2-spacer {\n margin-top: -27px;\n}\n\n.job .summary .image-holder {\n margin-bottom: 7.14285714%;\n}\n\n.job .back-to-grid-holder {\n text-align: center;\n}\n\n@media screen and (max-width: 1366px) {\n .job .summary .text-block {\n display: block;\n width: 100%;\n }\n\n .job .summary .text-block:first-child {\n padding-bottom: 0;\n }\n\n .job .summary .text-block.top-indent .h2-spacer {\n display: none;\n }\n\n .job .summary .image-holder {\n width: 100%;\n }\n}\n\n@media screen and (max-width: 1366px) and (max-width: 768px) {\n .job header.main .intro,\n .job .job-description .col-6 {\n line-height: 1.45;\n }\n}\n\n@media screen and (max-width: 500px) {\n .job .summary .text-block {\n padding-left: 7.14285714%;\n padding-right: 7.14285714%;\n }\n}\n\n.c-header {\n position: relative;\n}\n\n.c-header__img {\n position: relative;\n z-index: 0;\n width: 100%;\n object-fit: cover;\n}\n\n.c-header__title {\n position: absolute;\n z-index: 1;\n top: 50%;\n left: 50%;\n transform: translateY(-50%) translateX(-50%);\n font-size: calc(4vmin + 40px);\n margin: 0;\n color: white;\n text-shadow: 0 1px 5px rgba(0, 0, 0, 0.4);\n}\n\n.c-intro {\n padding: 7.14285714%;\n background-color: #0E121A;\n color: white;\n text-align: center;\n}\n\n.c-intro__main {\n margin: 0 auto;\n max-width: 576px;\n font-size: 1.6rem;\n font-weight: 600;\n}\n\n@media screen and (max-width: 576px) {\n .c-intro__main br {\n display: none;\n }\n}\n\n.c-intro__appendix {\n margin: 32px auto 0;\n max-width: 576px;\n color: #808080;\n font-size: 0.8rem;\n text-transform: uppercase;\n font-weight: bold;\n}\n\n.rwd-break {\n display: block;\n}\n\n@media screen and (max-width: 576px) {\n .rwd-break {\n display: none;\n }\n}\n\n.c-subsection {\n position: relative;\n width: 100%;\n margin: auto;\n padding: 14.28571429% 7.14285714%;\n}\n\n@media screen and (min-width: 769px) {\n .c-subsection {\n padding: 7.14285714%;\n }\n}\n\n@media screen and (min-width: 1367px) {\n .c-subsection {\n width: 83.33333333%;\n padding: 7.14285714% 0;\n }\n}\n\n.c-subsection--full-width {\n width: 100%;\n}\n\n.c-subheader,\n.t-vacancy__block .text-block h2 {\n margin: 0;\n font-size: calc(6vmin + 20px);\n font-weight: 700;\n color: #0E121A;\n}\n\n.c-subheader--service {\n font-size: 36px;\n text-align: center;\n}\n\n.c-subheader--light {\n color: #fff;\n}\n\n.c-benefits {\n display: flex;\n flex-wrap: wrap;\n flex-direction: column;\n list-style: none;\n margin: 7.14285714% 0 0;\n padding-left: 0;\n white-space: normal;\n}\n\n@media screen and (min-width: 901px) {\n .c-benefits {\n flex-direction: row;\n justify-content: space-between;\n }\n}\n\n.c-benefits__item {\n display: flex;\n border-top: 1px solid #0E121A;\n padding: 25px;\n color: #0E121A;\n font-size: 1.2rem;\n font-weight: 600;\n}\n\n.c-benefits__item::before {\n flex: 0 0 24px;\n content: '';\n display: block;\n background-image: url(/img/icons/check.svg);\n width: 24px;\n height: 18px;\n margin-top: 10px;\n}\n\n@media screen and (min-width: 901px) {\n .c-benefits__item {\n width: calc(40%);\n }\n}\n\n@media screen and (min-width: 1367px) {\n .c-benefits__item {\n width: calc(25% + 1px);\n }\n}\n\n.c-benefits__text {\n flex: 1;\n margin-left: 16px;\n}\n\n@media screen and (min-width: 577px) {\n .c-duo-picture {\n width: 83.33333333%;\n margin: auto;\n }\n}\n\n@media screen and (min-width: 801px) {\n .c-duo-picture {\n display: flex;\n }\n}\n\n.c-duo-picture__img {\n width: 100%;\n max-width: 100%;\n}\n\n@media screen and (min-width: 801px) {\n .c-duo-picture__img {\n width: 50%;\n flex: 1 1 50%;\n }\n}\n\n.c-personality {\n list-style: none;\n margin: 7.14285714% 0 0;\n padding-left: 0;\n}\n\n.c-personality__item {\n border-top: 1px solid #0E121A;\n padding-bottom: 26px;\n color: #0E121A;\n}\n\n@media screen and (min-width: 901px) {\n .c-personality__item {\n display: flex;\n }\n}\n\n.c-personality__label {\n display: flex;\n margin: 0;\n padding-top: 26px;\n font-size: 1.6rem;\n font-weight: 700;\n}\n\n.c-personality__label::before {\n flex: 0 0 24px;\n content: '';\n display: block;\n background-image: url(/img/icons/plus.svg);\n width: 24px;\n height: 24px;\n margin-top: 14px;\n margin-right: 24px;\n}\n\n@media screen and (min-width: 901px) {\n .c-personality__label {\n flex: 1 1 50%;\n }\n}\n\n.c-personality__description {\n padding-top: 26px;\n font-size: 0.9rem;\n font-weight: 600;\n white-space: normal;\n}\n\n@media screen and (min-width: 901px) {\n .c-personality__description {\n flex: 1 1 50%;\n padding-top: 36px;\n }\n}\n\n@media screen and (min-width: 1081px) {\n .l-split {\n display: flex;\n }\n}\n\n@media screen and (min-width: 1081px) {\n .l-split__item {\n flex: 0 0 50%;\n white-space: normal;\n }\n}\n\n.c-skills {\n list-style: none;\n padding-left: 0;\n}\n\n.c-skills__item {\n display: flex;\n margin: 16px 0 0;\n font-size: 0.9rem;\n font-weight: 500;\n line-height: 2;\n color: #fff;\n}\n\n.c-skills__item::before {\n flex: 0 0 24px;\n content: '';\n display: block;\n background-image: url(/img/icons/plus--white.svg);\n width: 24px;\n height: 24px;\n margin-top: 6px;\n margin-right: 24px;\n}\n\n.c-apply__form {\n max-width: 480px;\n margin-top: 32px;\n}\n\n.c-apply__form label,\n.c-apply__form .c-apply__label {\n margin-bottom: 6px;\n font-size: 0.9rem;\n line-height: 1.2;\n color: #0E121A;\n font-weight: 600;\n}\n\n.c-apply__form .input-holder {\n margin-bottom: 16px;\n}\n\n.c-apply__form .input-holder .message {\n font-size: 16px;\n background: #ffb502;\n color: #0E121A;\n border-radius: 4px;\n padding: 3px 10px;\n margin-bottom: 3px;\n}\n\n.c-apply__form input,\n.c-apply__form textarea {\n border: 2px solid #0E121A;\n border-radius: 4px;\n}\n\n.c-apply__form input::-webkit-input-placeholder,\n.c-apply__form textarea::-webkit-input-placeholder {\n color: #fff;\n}\n\n.c-apply__form input::-moz-placeholder,\n.c-apply__form textarea::-moz-placeholder {\n color: #fff;\n}\n\n.c-apply__form input:-ms-input-placeholder,\n.c-apply__form textarea:-ms-input-placeholder {\n color: #fff;\n}\n\n.c-apply__form input:-moz-placeholder,\n.c-apply__form textarea:-moz-placeholder {\n color: #fff;\n}\n\n.c-button {\n display: inline-block;\n padding: 16px 32px;\n background-color: #0D65FB;\n color: #fff;\n border: none;\n border-radius: 4px;\n font-size: 0.9rem;\n line-height: 1.2;\n font-weight: 600;\n cursor: pointer;\n transition: background-color 0.25s linear;\n}\n\n.c-button:hover {\n background-color: #0d5bb6;\n}\n\n.c-questions {\n display: flex;\n justify-content: flex-end;\n margin-bottom: 144px;\n}\n\n.c-questions__figure {\n flex: 0;\n margin: 0;\n position: relative;\n}\n\n@media screen and (max-width: 1080px) {\n .c-questions__img {\n width: 30vw;\n }\n}\n\n.c-questions__caption {\n position: absolute;\n bottom: -36px;\n font-size: 0.9rem;\n font-weight: 600;\n color: #000;\n}\n\n@media screen and (max-width: 1080px) {\n .c-questions__caption {\n display: none;\n }\n}\n\n.c-questions__body {\n flex: 0 1 50%;\n padding: 7.14285714%;\n background-color: #0E121A;\n color: #fff;\n}\n\n@media screen and (max-width: 1080px) {\n .c-questions__body {\n flex-basis: 100%;\n }\n}\n\n.c-questions__body a {\n color: #00C7FF;\n text-decoration: none;\n}\n\n.c-questions__body a:hover {\n text-decoration: underline;\n}\n\n.c-questions__body--small {\n padding: 3.57142857% 7.14285714%;\n}\n\n.c-questions__button {\n margin-top: 24px;\n}\n\n.c-questions__header {\n margin: 0 0 16px;\n color: #fff;\n font-size: 1.6rem;\n font-weight: 600;\n line-height: 1.25;\n}\n\n.c-questions__info {\n color: #fff;\n font-size: 0.9rem;\n line-height: 1.33;\n}\n\n.c-picture-slider {\n position: relative;\n}\n\n.c-picture-slider__prev,\n.c-picture-slider__next {\n position: absolute;\n z-index: 1;\n top: 0;\n bottom: 0;\n left: 0;\n width: 100px;\n transform: rotate(0.5turn);\n border: none;\n background-color: transparent;\n outline: none;\n cursor: pointer;\n}\n\n.c-picture-slider__prev::before,\n.c-picture-slider__next::before {\n flex: 0 0 32px;\n content: '';\n display: block;\n margin: 0 auto;\n background-image: url(/img/icons/arrow.svg);\n width: 32px;\n height: 32px;\n filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.5));\n}\n\n.c-picture-slider__next {\n left: auto;\n right: 0;\n}\n\n.c-picture-slider__next::before {\n transform: rotate(0.5turn);\n}\n\n.u-bg-dark {\n background-color: #0E121A;\n}\n\n.t-vacancy__dynamic {\n padding: 14.28571429% 0;\n}\n\n@media screen and (min-width: 769px) {\n .t-vacancy__dynamic {\n padding: 7.14285714% 0;\n }\n}\n\n.t-vacancy__dynamic.t-vacancy__dynamic--empty {\n padding-bottom: 0 !important;\n}\n\n.t-vacancy__block {\n width: calc(100% - 40px);\n margin: auto;\n}\n\n@media screen and (min-width: 577px) {\n .t-vacancy__block {\n width: 83.33333333%;\n }\n}\n\n.t-vacancy__block + .t-vacancy__block {\n margin-top: 60px;\n}\n\n.t-vacancy__block .text-block {\n padding: 0;\n white-space: normal;\n}\n\n/* ==========================================================================\n Specific CSS for the offer page\n @mixin ========================================================================= */\n\n.offer .form-holder {\n padding-bottom: 10%;\n}\n\n.offer .account-managers-holder .account-manager .function {\n color: rgba(0, 0, 0, 0.8);\n}\n\n@media screen and (max-width: 1080px) {\n .offer .form-holder {\n display: block;\n margin: 0 auto;\n width: 80%;\n }\n\n .offer .account-managers-holder {\n width: 100%;\n margin-bottom: 10%;\n }\n}\n\n@media screen and (max-width: 768px) {\n .offer .form-managers-holder {\n width: 78.57142857%;\n }\n\n .offer .form-holder,\n .offer .account-managers-holder {\n width: 100%;\n margin-left: 0;\n }\n}\n\n/* ==========================================================================\n Specific CSS for the process page\n @mixin ========================================================================= */\n\n.process header.main {\n margin-bottom: 0;\n}\n\n.process .process-step {\n position: relative;\n display: flex;\n margin: 0 auto;\n max-width: 1680px;\n height: 100vh;\n}\n\n.process .process-step .image {\n width: 50%;\n background: #efefef;\n background-size: cover;\n}\n\n.process .process-step .text-block-holder {\n width: 50%;\n align-self: center;\n}\n\n.process .process-step .text-block {\n padding: 14.28571429%;\n}\n\n.process .process-step .text-block > * {\n opacity: 0;\n -webkit-transform: translate3d(0, 60px, 0);\n -moz-transform: translate3d(0, 60px, 0);\n -ms-transform: translate3d(0, 60px, 0);\n -o-transform: translate3d(0, 60px, 0);\n transform: translate3d(0, 60px, 0);\n}\n\n.process .process-step .button {\n cursor: pointer;\n}\n\n.process .process-step:nth-child(2n) .image {\n order: 2;\n}\n\n.process .process-step:nth-child(2n) .text-block-holder {\n order: 1;\n}\n\n@media screen and (max-width: 1080px) {\n .process .process-step {\n height: auto;\n }\n}\n\n@media screen and (max-width: 768px) {\n .process .process-step {\n display: block;\n }\n\n .process .process-step .image {\n width: 100%;\n height: 75vw;\n }\n\n .process .process-step .text-block-holder {\n width: 100%;\n }\n}\n\n@media screen and (max-width: 500px) {\n .process .process-step .text-block {\n padding: 30px 20px 40px;\n }\n\n .process .process-step .text-block .button {\n margin-top: 10px;\n }\n\n .process .process-step h2 {\n margin-bottom: 20px;\n }\n}\n\n/* ==========================================================================\n Specific CSS for the services page\n @mixin ========================================================================= */\n\n.services header.main {\n margin-bottom: 0;\n}\n\n@media screen and (max-width: 1080px) {\n .services header.main .intro {\n width: 71.42857143%;\n }\n\n .services .call-to-action-block {\n padding-left: 14.28571429%;\n padding-right: 14.28571429%;\n margin: 0;\n }\n\n .services .call-to-action-block .flex-col:first-child {\n margin-right: 20%;\n }\n}\n\n@media screen and (max-width: 500px) {\n .services header.main .intro {\n width: 100%;\n }\n\n .services .call-to-action-block {\n padding: 30px 20px;\n }\n}\n\n/* Services Grid\n @mixin ========================================================================= */\n\n.services-grid {\n background: #0000FF;\n}\n\n.services-grid ul {\n display: grid;\n grid-template-columns: 1fr 1fr 1fr 1fr;\n grid-gap: 60px;\n padding: 0 0 10%;\n width: 100%;\n margin: 0 auto 10%;\n list-style: none;\n font-size: 18px;\n}\n\n.services-grid li {\n border-bottom: 1px solid white;\n}\n\n.services-grid li:hover {\n border-color: #00C7FF;\n}\n\n.services-grid li:hover .title {\n color: #00C7FF;\n}\n\n.services-grid li:hover .arrow {\n -webkit-transform: translate3D(20px, 0, 0);\n -moz-transform: translate3D(20px, 0, 0);\n -ms-transform: translate3D(20px, 0, 0);\n -o-transform: translate3D(20px, 0, 0);\n transform: translate3D(20px, 0, 0);\n}\n\n.services-grid a {\n display: block;\n padding-bottom: 1.5rem;\n text-decoration: none;\n color: rgba(255, 255, 255, 0.8);\n -webkit-transition: borderColor 200ms ease-out;\n -moz-transition: borderColor 200ms ease-out;\n transition: borderColor 200ms ease-out;\n}\n\n.services-grid .title {\n display: block;\n height: 6rem;\n color: #fff;\n line-height: 1.142857;\n font-size: 1.4rem;\n font-weight: 700;\n text-transform: uppercase;\n letter-spacing: .05em;\n -webkit-transition: color 200ms ease-out;\n -moz-transition: color 200ms ease-out;\n transition: color 200ms ease-out;\n}\n\n.services-grid .arrow {\n display: block;\n width: 25px;\n height: 14px;\n margin: 23px 0;\n background-image: url(/img/komma/komma_sprite.svg?v=2);\n background-size: 140px 85px;\n background-position: 0 0;\n -webkit-transition: -webkit-transform 200ms ease-out;\n -moz-transition: -moz-transform 200ms ease-out;\n transition: transform 200ms ease-out;\n}\n\n.services-grid .comment {\n display: block;\n}\n\n@media screen and (max-width: 1080px) {\n .services-grid ul {\n grid-template-columns: 1fr 1fr 1fr;\n margin: 0;\n }\n}\n\n@media screen and (max-width: 1080px) {\n .services-grid ul {\n grid-template-columns: 1fr 1fr;\n }\n}\n\n@media screen and (max-width: 500px) {\n .services-grid ul {\n grid-template-columns: 1fr;\n }\n}\n\n@media screen and (max-width: 500px) {\n .services-grid .col-10 {\n width: 100%;\n }\n\n .services-grid ul {\n border-top: 1px solid #fff;\n padding-bottom: 0;\n grid-gap: 0;\n }\n\n .services-grid li {\n padding-bottom: 0;\n }\n\n .services-grid li:last-child {\n border: none;\n }\n\n .services-grid a {\n position: relative;\n padding: 30px 20px;\n }\n\n .services-grid .title {\n font-size: 1.2rem;\n height: auto;\n }\n\n .services-grid .comment {\n width: 75%;\n }\n\n .services-grid .arrow {\n position: absolute;\n top: 50%;\n right: 20px;\n margin-top: -6px;\n }\n}\n\n/* ==========================================================================\n Specific CSS for the services detail page\n @mixin ========================================================================= */\n\n.service header.main {\n margin-bottom: 0;\n}\n\n.service .go-back-holder,\n.service .title-holder {\n position: relative;\n padding-bottom: 14.28571429%;\n}\n\n.service .go-back-holder .alignment-controller,\n.service .title-holder .alignment-controller {\n position: absolute;\n top: 0;\n left: 0;\n display: flex;\n align-items: center;\n height: 100%;\n width: 100%;\n}\n\n.service .go-back-holder .alignment-controller {\n justify-content: flex-end;\n}\n\n.service .title-holder h2 {\n padding-left: 14.28571429%;\n margin: 0;\n}\n\n@media screen and (max-width: 1366px) {\n .service .title-holder h2 {\n padding-left: 7.14285714%;\n }\n}\n\n@media screen and (max-width: 768px) {\n .service {\n text-align: left;\n }\n\n .service .title-holder h2 {\n padding-left: 0;\n }\n\n .service .title-holder,\n .service .go-back-holder {\n padding: 30px 10.71428571%;\n width: 100%;\n }\n\n .service .title-holder .alignment-controller,\n .service .go-back-holder .alignment-controller {\n position: relative;\n justify-content: flex-start;\n }\n}\n\n@media screen and (max-width: 500px) {\n .service .go-back-holder,\n .service .title-holder {\n padding: 30px 20px;\n }\n}\n\n.service .description-container .image {\n margin-bottom: 7.14285714%;\n}\n\n.service .description-container .text-block {\n padding-top: 0;\n}\n\n.service .description-container hr {\n border: 0;\n height: 1px;\n margin: 16.66666667% 0 10px;\n background: #eaeaea;\n}\n\n.service .description-container .next-service {\n display: inline-block;\n position: relative;\n padding-right: 22px;\n color: #1D2433;\n text-decoration: none;\n}\n\n.service .description-container .next-service:after {\n position: absolute;\n top: 7px;\n right: 0;\n content: '';\n width: 14px;\n height: 14px;\n background-image: url(/img/komma/komma_sprite.svg?v=2);\n background-size: 140px 85px;\n background-position: -80px -20px;\n -webkit-transition: -webkit-transform 300ms ease-out;\n -moz-transition: -moz-transform 300ms ease-out;\n transition: transform 300ms ease-out;\n}\n\n.service .description-container .next-service:hover:after {\n -webkit-transform: translateX(5px);\n -moz-transform: translateX(5px);\n -ms-transform: translateX(5px);\n -o-transform: translateX(5px);\n transform: translateX(5px);\n}\n\n.service .featured-cases {\n max-width: 1680px;\n margin: 0 auto;\n}\n\n@media screen and (max-width: 768px) {\n .service .description-container .image {\n margin-bottom: 0;\n width: 100%;\n }\n\n .service .text-block {\n padding: 14.28571429% 7.14285714% !important;\n width: 100%;\n }\n}\n\n@media screen and (max-width: 500px) {\n .service .description-container .image {\n margin-top: 0;\n }\n}\n\n/* ==========================================================================\n Testimonial specific css\n @mixin ========================================================================= */\n\n.testimonial-container {\n display: flex;\n justify-content: flex-end;\n width: 50%;\n background-repeat: no-repeat;\n background-size: contain;\n background-position: left bottom;\n /* Responsive Testimonials\n @mixin ========================================================================= */\n}\n\n.testimonial-container:nth-child(2n) {\n justify-content: flex-start;\n}\n\n.testimonial-container .contained-layout {\n display: grid;\n grid-template-columns: 6fr 6fr 2fr;\n grid-template-areas: '. quote .';\n max-width: 840px;\n margin: 0;\n align-items: center;\n}\n\n.testimonial-container .quote {\n grid-area: quote;\n color: rgba(255, 255, 255, 0.8);\n font-size: 1rem;\n font-weight: 300;\n line-height: 1.3;\n white-space: normal;\n padding-top: 100px;\n}\n\n.testimonial-container .author {\n margin-top: 1em;\n display: block;\n color: #fff;\n font-size: 1rem;\n font-style: normal;\n font-weight: 600;\n}\n\n.testimonial-container .button {\n margin: 60px 0 100px;\n font-style: normal;\n}\n\n@media screen and (max-width: 1080px) {\n .testimonial-container {\n background-size: auto 300px;\n }\n\n .testimonial-container .contained-layout {\n display: block;\n padding: 50px 14.28571429% 300px;\n }\n\n .testimonial-container .quote {\n padding-top: 0;\n font-size: 1.3rem;\n line-height: 1.4;\n }\n\n .testimonial-container .button {\n margin-bottom: 0;\n }\n}\n\n@media screen and (max-width: 768px) {\n .testimonial-container {\n width: 100%;\n }\n\n .testimonial-container .contained-layout {\n padding: 7.14285714% 7.14285714% 300px;\n }\n}\n\n@media screen and (max-width: 500px) {\n .testimonial-container .contained-layout {\n padding: 30px 20px 300px;\n }\n}\n\n/* Testimonial page CSS\n @mixin ========================================================================= */\n\n.testimonials header.main {\n margin-bottom: 0;\n}\n\n.testimonial-logo-grid {\n display: flex;\n flex-wrap: wrap;\n /**\n * Grid layout for our list\n */\n}\n\n.testimonial-logo-grid .clients {\n position: relative;\n display: grid;\n align-items: center;\n justify-content: center;\n grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;\n grid-gap: 30px;\n padding: 3.57142857vw 7.14285714vw;\n width: 100%;\n list-style: none;\n}\n\n@media screen and (max-width: 1366px) {\n .testimonial-logo-grid .clients {\n grid-template-columns: 1fr 1fr 1fr 1fr 1fr;\n }\n}\n\n@media screen and (max-width: 1080px) {\n .testimonial-logo-grid .clients {\n grid-template-columns: 1fr 1fr 1fr 1fr;\n }\n}\n\n@media screen and (max-width: 768px) {\n .testimonial-logo-grid .clients {\n grid-template-columns: 1fr 1fr 1fr;\n }\n}\n\n@media screen and (max-width: 500px) {\n .testimonial-logo-grid .clients {\n grid-template-columns: 1fr 1fr;\n }\n}\n\n.testimonial-logo-grid .clients .inner-shadow {\n position: absolute;\n left: 0;\n bottom: 0;\n width: 100%;\n height: 100px;\n box-shadow: inset 0px -100px 100px -50px white;\n}\n\n.testimonial-logo-grid .clients .toggle-client-mask {\n position: absolute;\n left: 50%;\n bottom: -30px;\n margin-left: -30px;\n width: 60px;\n height: 60px;\n cursor: pointer;\n}\n\nhtml.ie .testimonial-logo-grid .clients ul::after {\n clear: both;\n content: \"\";\n display: table;\n}\n\nhtml.ie .testimonial-logo-grid .clients ul li {\n float: left;\n width: 25%;\n}\n\nhtml.ie .testimonial-logo-grid::after {\n clear: both;\n content: \"\";\n display: table;\n}\n\nhtml.ie .testimonial-logo-grid .testimonial-container {\n padding: 50px;\n float: left;\n width: 50%;\n}\n\n@media screen and (max-width: 768px) {\n .testimonial-logo-grid .client-logo-group {\n width: 100%;\n }\n}\n\n.spinWin .spinWin__heading .text-block h1 {\n font-size: 48px;\n color: #1E2433;\n}\n\n.spinWin .spinWin__heading .text-block p {\n font-size: 24px;\n}\n\n.spinWin .spinWin__heading .account-managers-holder {\n margin: 7.14285714% 0 7.14285714% 7.14285714%;\n}\n\n.spinWin .spinWin__heading .account-managers-holder .account-manager {\n text-align: center;\n width: 100%;\n max-width: 160px;\n margin: 0 0 0 7.14285714%;\n}\n\n@media screen and (max-width: 480px) {\n .spinWin .spinWin__heading .text-block {\n width: 85.71428571%;\n }\n\n .spinWin .spinWin__heading .account-managers-holder {\n width: 85.71428571%;\n }\n}\n\n.spinWin .call-to-action-block h2 {\n font-size: 3rem;\n}\n\n.spinWin .spinWin__roulette-container {\n background-color: #0000FF;\n padding: 60px 0 0;\n}\n\n.spinWin .spinWin__roulette {\n width: 57.14285714%;\n margin: auto;\n text-align: center;\n}\n\n.spinWin .spinWin__roulette .roulette {\n width: 100%;\n max-width: 280px;\n margin: auto;\n}\n\n.spinWin .spinWin__roulette img {\n width: 100%;\n height: auto;\n}\n\n.spinWin .spinWin__price {\n margin-top: 40px;\n color: white;\n font-size: 32px;\n line-height: 1.2;\n font-weight: 700;\n padding-bottom: 40px;\n}\n\n.spinWin .spinWin__trigger {\n margin-top: 40px;\n text-align: center;\n padding-bottom: 120px;\n}\n\n.spinWin .spinWin__trigger.is-disabled {\n opacity: 0.2;\n pointer-events: none;\n}\n\n.spinWin .spinWin__button {\n padding: 12px 28px;\n appearance: none;\n border: none;\n background-color: #0000FF;\n color: white;\n font-size: 24px;\n line-height: 1.2;\n}\n\n.spinWin .spinWin__teaser {\n margin-top: 20px;\n text-align: center;\n font-size: 24px;\n line-height: 1.2;\n color: #1E2433;\n}\n\n.spinWin .spinWin__winning {\n margin-top: 60px;\n}\n\n.spinWin .spinWin__winning.is-hidden {\n margin-top: 0;\n display: none;\n}\n\n.spinWin .spinWin__winning .c-questions {\n margin-bottom: 60px;\n}\n\n@media screen and (max-width: 600px) {\n .spinWin .c-questions {\n display: block;\n }\n\n .spinWin .c-questions .c-questions__body--small {\n padding-top: 40px;\n padding-bottom: 40px;\n }\n\n .spinWin .c-questions .c-questions__figure {\n margin: 0 24px 24px;\n display: none;\n }\n\n .spinWin .c-questions .c-questions__img {\n border-radius: 50%;\n }\n}\n\n.spinWin .spinWin__form .c-subsection {\n padding-top: 0;\n}\n\n.spinWin .spinWin__form.is-hidden {\n display: none;\n}\n\n.spinWin .spinWin__form .c-subheader,\n.spinWin .spinWin__form .t-vacancy__block .text-block h2,\n.t-vacancy__block .text-block .spinWin .spinWin__form h2 {\n font-size: 48px;\n}\n\n.spinWin .spinWin__form .c-button {\n background-color: #0000FF;\n}\n\n.spinWin .spinWin__form .c-apply__form {\n margin-top: 12px;\n}\n\n.spinWin .spinWin__form-error {\n font-size: 14px;\n line-height: 1.2;\n color: #1D2433;\n}\n\n/*==========================================================================\n Posts overview page\n @mixin ========================================================================= */\n\n.posts header.main {\n margin-bottom: 0;\n padding: 3.57142857% 3.57142857% 0 3.57142857%;\n}\n\n@media screen and (min-width: 1601px) {\n .posts header.main {\n padding: 60px 60px 0 60px;\n }\n}\n\n@media screen and (max-width: 768px) {\n .posts header.main {\n padding: 0 3.57142857%;\n }\n}\n\n@media screen and (max-width: 500px) {\n .posts header.main {\n padding: 0;\n }\n}\n\n.posts header.main .height-controller {\n position: relative;\n overflow: hidden;\n max-height: 87vh;\n}\n\n@media screen and (max-width: 1080px) {\n .posts header.main .height-controller {\n max-height: none;\n min-height: 0;\n }\n}\n\n.posts header.main .ratio-controller {\n position: relative;\n width: 100%;\n height: 0;\n padding-bottom: 42%;\n}\n\n@media screen and (max-width: 768px) {\n .posts header.main .ratio-controller {\n padding-bottom: 60%;\n }\n}\n\n@media screen and (max-width: 500px) {\n .posts header.main .ratio-controller {\n padding-bottom: 80%;\n }\n}\n\n.posts header.main {\n margin-bottom: 7.14285714%;\n}\n\n.posts header.main .wrapper,\n.posts header.main .background-image {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n}\n\n.posts header.main .wrapper {\n background: rgba(0, 0, 255, 0.5);\n}\n\n.posts header.main .background-image {\n background-size: cover;\n background-position: 50% 50%;\n}\n\n.posts header.main .flexable-layout {\n margin: 0 auto;\n max-width: 1680px;\n height: 100%;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n}\n\n.posts header.main .title-holder {\n width: 85.71428571%;\n max-width: 720px;\n text-align: center;\n}\n\n.posts header.main .blog-title {\n display: block;\n padding-bottom: 30px;\n color: #00C7FF;\n font-size: .9rem;\n font-weight: 700;\n text-decoration: none;\n text-transform: uppercase;\n}\n\n.posts header.main h1 {\n display: block;\n margin: 0;\n padding-bottom: 30px;\n color: #fff;\n font-size: 2rem;\n font-weight: 500;\n line-height: 1.25;\n}\n\n.posts header.main .button {\n border-radius: 100px;\n}\n\n@media screen and (max-width: 1080px) {\n .posts header.main .blog-title {\n padding-bottom: 20px;\n }\n}\n\n.posts .featured.post-grid {\n border-bottom: 1px solid #F4F4F4;\n margin-bottom: 5%;\n}\n\n.posts h2 {\n color: #00C7FF;\n font-size: 18px;\n line-height: 1.4444;\n font-weight: 600;\n}\n\n.posts .back-to-grid {\n margin-bottom: 8.33333333%;\n}\n\n/*==========================================================================\n Blog detail page\n @mixin ========================================================================= */\n\n.post header.main {\n margin-bottom: 0;\n padding: 3.57142857% 3.57142857% 0 3.57142857%;\n}\n\n@media screen and (min-width: 1601px) {\n .post header.main {\n padding: 60px 60px 0 60px;\n }\n}\n\n@media screen and (max-width: 768px) {\n .post header.main {\n padding: 0 3.57142857%;\n }\n}\n\n@media screen and (max-width: 500px) {\n .post header.main {\n padding: 0;\n }\n}\n\n.post header.main .height-controller {\n position: relative;\n overflow: hidden;\n max-height: 87vh;\n}\n\n@media screen and (max-width: 1080px) {\n .post header.main .height-controller {\n max-height: none;\n min-height: 0;\n }\n}\n\n.post header.main .ratio-controller {\n position: relative;\n width: 100%;\n height: 0;\n padding-bottom: 42%;\n}\n\n@media screen and (max-width: 768px) {\n .post header.main .ratio-controller {\n padding-bottom: 60%;\n }\n}\n\n@media screen and (max-width: 500px) {\n .post header.main .ratio-controller {\n padding-bottom: 80%;\n }\n}\n\n.post header.main .wrapper,\n.post header.main .background-image {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n}\n\n.post header.main .wrapper {\n background: rgba(0, 0, 255, 0.5);\n}\n\n.post header.main .background-image {\n background-size: cover;\n background-position: 50% 50%;\n}\n\n.post header.main .flexable-layout {\n margin: 0 auto;\n max-width: 1680px;\n height: 100%;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n}\n\n.post header.main .title-holder {\n display: block;\n width: 85.71428571%;\n max-width: 720px;\n text-align: center;\n}\n\n.post header.main .blog-title {\n display: block;\n padding-bottom: 30px;\n color: #00C7FF;\n font-size: .9rem;\n font-weight: 700;\n text-decoration: none;\n text-transform: uppercase;\n}\n\n.post header.main h1 {\n display: block;\n margin: 0;\n color: #fff;\n font-size: 2rem;\n font-weight: 500;\n line-height: 1.25;\n}\n\n.post header.main .author {\n margin-top: 60px;\n display: flex;\n flex-direction: row;\n justify-content: flex-start;\n align-items: center;\n}\n\n.post header.main .author .profile-image {\n position: relative;\n top: 0;\n left: 0;\n overflow: hidden;\n border-radius: 100px;\n width: 60px;\n height: 60px;\n background-size: cover;\n}\n\n.post header.main .author .info {\n margin-left: 20px;\n color: #fff;\n line-height: 1.2;\n}\n\n.post header.main .author .name {\n font-weight: 600;\n}\n\n@media screen and (max-width: 768px) {\n .post header.main .blog-title {\n padding-bottom: 10px;\n }\n\n .post header.main h1 {\n font-size: 1.8rem;\n }\n}\n\n.post .post-container {\n width: 720px;\n margin: 0 auto;\n white-space: normal;\n font-size: 18px;\n}\n\n.post .post-body section:last-child {\n margin-bottom: 16.66666667%;\n}\n\n.post .post-body h2 {\n margin: 2rem 0;\n}\n\n.post .post-body p:last-child {\n margin: 0;\n}\n\n.post .post-intro {\n margin: 16.66666667% 0 8.33333333%;\n color: #1E2433;\n font-size: 1.22222rem;\n line-height: 1.54545;\n}\n\n.post .post-full-image img {\n display: block;\n margin: 8.33333333% 0;\n width: 100%;\n}\n\n.post .back-to-grid {\n margin-bottom: 5%;\n}\n\n.post .related-posts {\n border-top: 1px solid #eaeaea;\n padding: 3.57142857% 0 7.14285714%;\n}\n\n.post .related-posts h2 {\n display: block;\n margin-top: -10px;\n font-weight: 300;\n font-size: 1.5rem;\n}\n\n@media screen and (max-width: 768px) {\n .post .post-container {\n width: 92.85714286%;\n }\n\n .post .post-intro {\n font-size: 1.1rem;\n }\n}\n\n@media screen and (max-width: 500px) {\n .post .post-container {\n width: 100%;\n padding: 0 20px;\n }\n}\n\n/*==========================================================================\n Global for post index and show\n @mixin ========================================================================= */\n\n.posts-container {\n width: 1200px;\n margin: 0 auto;\n white-space: normal;\n font-size: 18px;\n}\n\n@media screen and (max-width: 1300px) {\n .posts-container {\n width: 85.71428571%;\n }\n}\n\n@media screen and (max-width: 500px) {\n .posts-container {\n padding-top: 60px;\n }\n\n .posts-container .posts-container,\n .posts-container .posts-container.related-posts {\n width: 100%;\n padding: 0 20px;\n }\n}\n\n#error-page-message {\n padding: 100px 0 100px;\n background-color: #eaeaea;\n}\n\n#error-page-message .grid-row .kms-content {\n width: 100%;\n text-align: center;\n}\n\n#error-page-message .grid-row .placeholder {\n max-width: 720px;\n margin: auto;\n}\n\n.c-error-page {\n padding: 160px 20px;\n background-color: #141826;\n}\n\n.c-error-page h1 {\n font-size: 8rem;\n}\n\n.c-error-page p {\n font-size: 1rem;\n}\n\n.c-error-page__message {\n text-align: center;\n color: white;\n}\n\n.c-error-page__title {\n position: relative;\n margin: 0 0 60px;\n font-size: 8rem;\n line-height: 1;\n}\n\n.c-error-page__ufo {\n position: absolute;\n left: 50%;\n bottom: 0;\n width: 100%;\n max-width: 250px;\n transform: translateX(-50%);\n}\n\n.c-error-page__ufo img {\n width: 100%;\n}\n\n.c-error-page__subtitle {\n font-size: 1.4rem;\n margin: 0;\n}\n\n.c-error-page__button {\n margin-top: 40px;\n}\n\n\n\n\n// WEBPACK FOOTER //\n// ./resources/assets/sass/site/style.sass","@mixin placeholder {\n &::-webkit-input-placeholder /* Chrome/Opera/Safari */ {\n @content; }\n &::-moz-placeholder /* Firefox 19+ */ {\n @content; }\n &:-ms-input-placeholder /* IE 10+ */ {\n @content; }\n &:-moz-placeholder /* Firefox 18- */ {\n @content; } }\n\n\n\n// WEBPACK FOOTER //\n// ./resources/assets/sass/site/resources/assets/sass/global/mixins/_placeholder.sass","/* ==========================================================================\n Grid\n @mixin ========================================================================= */\n\n/**\n * Grid row\n *\n * 1. Remove inter-cell whitespace\n * 2. Force no-wrap\n */\n\n.contained-layout {\n position: relative;\n width: 100%;\n max-width: $gridMaxWidth;\n margin: 0 auto;\n font-size: 0 /* 1 */;\n white-space: nowrap /* 2 */;\n\n .spacer {\n width: 100%;\n height: 0;\n margin-bottom: column(1); }\n\n @include respond-to-width($smGridBreakpoint) {\n white-space: normal; } }\n\n/* Columns\n @mixin ========================================================================= */\n\n/*\n * Calculate width by dividing a full width into 12 columns\n * Create a class for each column\n */\n\n@for $i from 1 through $gridColumns {\n\n /**\n * Grid column\n *\n * 1. Reset white-space inherited from `.grid`\n */\n .col-#{$i} {\n width: column($i);\n position: relative;\n vertical-align: top;\n\n display: inline-block;\n margin: 0 auto;\n white-space: normal /* 1 */;\n font-size: $baseFontSize /* 2 */;\n\n @include respond-to-width-beyond($xlGridBreakpoint) {\n font-size: $xlFontSize; }\n\n /**\n * Center column\n *\n * 1. 'inline-block' doesn't center with margin '0 auto'\n */\n\n &.centered {\n display: block /* 1 */;\n margin-left: auto;\n margin-right: auto; } }\n\n // Handle direct children (columns in columns)\n @for $c from 1 through $gridColumns {\n\n .col-#{$i} > .col-#{$c} {\n width: column($c,$i); } } }\n\n/* Column offset\n @mixin ========================================================================= */\n\n@for $i from 1 through $gridColumns {\n\n .offset-#{$i} {\n margin-left: column($i); } }\n\n/* Media queries\n @mixin ========================================================================= */\n\n/*\n * Define widths for different screen sizes\n */\n\n// Cover all columns\n@for $i from 0 through $gridColumns {\n\n // Larger then xlBreakpoint\n @include respond-to-width-beyond($xlGridBreakpoint) {\n .col-xl-#{$i} {\n width: column($i,12); }\n\n .offset-xl-#{$i} {\n margin-left: column($i,12); } }\n\n // Loop through $breakpoints for the other breakpoints\n $breakpoints : ('lg' $lgGridBreakpoint) ('md' $mdGridBreakpoint) ('sm' $smGridBreakpoint) ('xs' $xsGridBreakpoint);\n\n @each $list in $breakpoints {\n\n $name : nth($list,1);\n $breakpoint : nth($list,2);\n\n @include respond-to-width($breakpoint) {\n .col-#{$name}-#{$i} {\n width: column($i,12); }\n\n .offset-#{$name}-#{$i} {\n margin-left: column($i,12); } } } }\n\n\n/*\n * This class is used when element contains .col-elements\n * Mostly we use it in combination with another class, f.e. an .col-element\n */\n.column-container {\n white-space: nowrap;\n\n @include respond-to-width($mdGridBreakpoint) {\n white-space: normal; } }\n\n// On mobile\n.col-12 {\n @include respond-to-width($xsGridBreakpoint) {\n width: 100%; } }\n\n\n\n// WEBPACK FOOTER //\n// ./resources/assets/sass/site/resources/assets/sass/global/grid/_grid.sass","@mixin respond-to-width($width) {\n $width : $width + 'px';\n @media screen and (max-width: $width) {\n @content; } }\n\n@mixin respond-to-width-between($width, $width2) {\n $width : $width + 'px';\n $width2 : $width2 + 'px';\n @media screen and (min-width: $width) and (max-width: $width2) {\n @content; } }\n\n@mixin respond-to-width-beyond($width) {\n $width : ($width + 1) + 'px';\n @media screen and (min-width: $width) {\n @content; } }\n\n@mixin respond-to-height($height) {\n $height : $height + 'px';\n @media screen and (max-height: $height) {\n @content; } }\n\n@mixin respond-to-width-or-height($width, $height) {\n $width : $width + 'px';\n $height : $height + 'px';\n @media screen and (max-width: $width), screen and (max-height: $height) {\n @content; } }\n\n\n\n// WEBPACK FOOTER //\n// ./resources/assets/sass/site/resources/assets/sass/global/mixins/_mediaQueries.sass","/* ==========================================================================\n Flex Grid\n @mixin ========================================================================= */\n\n/**\n * Flex row\n */\n\n.flexable-layout {\n display: flex;\n white-space: normal;\n\n\n // Contained within max grid size\n &.contained {\n max-width: column(12);\n margin: 0 auto;\n\n &.full-row {\n max-width: $gridMaxWidth; } } }\n\n/**\n * Flex row\n *\n * Note: flex-grow 1, flex-shrink 1 and flex-bases 0 can be shorthanded to flex: 1\n * 1. Reset font-size\n */\n\n.flex-col {\n flex-grow: 1;\n flex-shrink: 1;\n flex-basis: 0;\n font-size: $baseFontSize /* 1 */; }\n\n\n\n// WEBPACK FOOTER //\n// ./resources/assets/sass/site/resources/assets/sass/global/grid/_flexGrid.sass","/* ==========================================================================\n This grid can be turned on and off when you want to check\n if everything is nice in place.\n @mixin ========================================================================= */\n\n.visible-grid-container {\n display: flex;\n justify-content: center; }\n\n/**\n * 1. Makes it able to control the website while grid is shown\n */\n.visible-grid {\n display: block;\n position: fixed;\n z-index: 10000;\n pointer-events: none /* 2 */;\n\n .grid-col {\n background: rgba(0,255,255,.6);\n height: 100vh;\n\n &:nth-child(2n) {\n background: rgba(0,255,255,.3); }\n\n &:nth-child(1),&:nth-child(14) {\n background: rgba(0,255,0,.5); } } }\n\n\n\n// WEBPACK FOOTER //\n// ./resources/assets/sass/site/resources/assets/sass/global/grid/_visibleGrid.sass",".breakpoint {\n position: fixed;\n right: 0;\n bottom: 0;\n width: 20px;\n height: 20px;\n z-index: 10000;\n background: #0ABEFF;\n\n // Larger then xlBreakpoint\n @include respond-to-width-beyond($xlGridBreakpoint) {\n background: red; }\n\n // Loop through other breakpoints\n $breakpoints : (blue $lgGridBreakpoint) (green $mdGridBreakpoint) (yellow $smGridBreakpoint) (pink $xsGridBreakpoint);\n\n @each $list in $breakpoints {\n\n $color : nth($list,1);\n $breakpoint : nth($list,2);\n\n @include respond-to-width($breakpoint) {\n background: $color; } } }\n\n\n\n// WEBPACK FOOTER //\n// ./resources/assets/sass/site/resources/assets/sass/global/partials/_breakpoints.sass","/* ==========================================================================\n Expend Basic style settings\n @mixin ========================================================================= */\n\n/*\n * Set up the html\n *\n * 1. This is the base for al rem units\n */\n\nhtml {\n font-size: $baseFontSize /* 1 */;\n\n @include respond-to-width-beyond($xlGridBreakpoint) {\n font-size: $xlFontSize; } }\n\n/*\n * Set up the body\n *\n * 1. Set font to lining figures\n */\n\nbody {\n margin: 0;\n\n color: $bodyText;\n font-family: 'freight-sans-pro', sans-serif;\n font-weight: book();\n line-height: 1.6;\n\n font-feature-settings: 'lnum' /* 1 */;\n\n @include respond-to-width($smGridBreakpoint) {\n padding-top: 60px; } }\n\n/**\n * 1. Correct the extra rendered space on the top with a negative margin\n */\nh2 {\n margin: -15px 0 40px 0 /* 1 */;\n color: $grey;\n font-size: 1.5rem;\n font-weight: light();\n line-height: 1.2;\n\n a {\n color: $grey;\n text-decoration: none; }\n\n @include respond-to-width($xsGridBreakpoint) {\n margin-top: 0 /* remove correction */;\n margin-bottom: $mobileBottomSpace; } }\n\n/**\n * All margin is at the bottom of a paragraph\n * This way a paragraph can be better aligned with non-paragraph objects\n *\n * 1. Optical correction\n */\np {\n margin-top: 0;\n\n &:last-child {\n margin-bottom: -4px /* 1 */; }\n\n &.inline {\n display: inline;\n margin-bottom: 0; } }\n\n/**\n * Set font weight to semibold\n */\nstrong {\n font-weight: semibold(); }\n\na {\n color: $blue; }\n\nol {\n padding-left: 1em; }\n\nh3 {\n color: $darkBodyText; }\n\n\n\n// WEBPACK FOOTER //\n// ./resources/assets/sass/site/resources/assets/sass/site/_base.sass","/* ==========================================================================\n Helper classes\n @mixin ========================================================================= */\n\n/**\n * Use on elements from where the children should not wrap\n */\n.nowrap {\n white-space: nowrap; }\n\n/**\n * Hide elements on different screen sizes\n */\n$breakpoints : ('xl' $xlGridBreakpoint) ('lg' $lgGridBreakpoint) ('md' $mdGridBreakpoint) ('sm' $smGridBreakpoint) ('xs' $xsGridBreakpoint);\n\n@each $list in $breakpoints {\n\n $name : nth($list,1);\n $breakpoint : nth($list,2);\n\n @include respond-to-width($breakpoint) {\n .hide-on-#{$name}-or-smaller {\n display: none; } }\n\n @include respond-to-width-beyond($breakpoint) {\n .hide-on-#{$name}-or-larger {\n display: none; } } }\n\n\n\n// WEBPACK FOOTER //\n// ./resources/assets/sass/site/resources/assets/sass/site/_helpers.sass","/* ==========================================================================\n Buttons\n @mixin ========================================================================= */\n\n/*\n * Main settings for each button\n *\n * 1. Reset default link property\n */\n\n.button {\n position: relative;\n\n display: inline-block;\n min-width: 200px;\n padding: 0 20px;\n border-radius: 4px;\n\n line-height: 45px;\n font-size: .9rem;\n font-weight: semibold();\n text-decoration: none /* 1 */;\n cursor: pointer;\n @include transition(all 200ms ease-out);\n\n /* Sizes\n @mixin ========================================================================= */\n\n &.small {\n min-width: 0; }\n\n /* Color types\n @mixin ========================================================================= */\n\n &.stroked.white {\n border: 2px solid #fff;\n color: #fff;\n\n &:hover {\n border-color: $blue;\n color: #fff;\n background: $blue; } }\n\n &.stroked.blue {\n border: 2px solid $blue;\n color: $blue;\n\n &:hover {\n border-color: #fff;\n color: #fff;\n background: $blue; } }\n\n &.stroked.black {\n border: 2px solid $bodyText;\n color: $black;\n\n &:hover {\n border-color: #fff;\n color: #fff;\n background: $black; } }\n\n &.stroked.light-blue {\n border: 2px solid $lightBlue;\n color: $lightBlue;\n\n &:hover {\n border-color: #fff;\n color: #fff; } }\n\n &.stroked.footer {\n border: 2px solid $footerTextColor;\n color: $footerTextColor;\n\n &:hover {\n border-color: #fff;\n color: #fff; } }\n\n /* Icons\n @mixin ========================================================================= */\n\n // Thumbs up icon\n &.like {\n padding-left: 52px;\n\n &:before {\n position: absolute;\n top: 9px;\n left: 14px;\n\n width: 25px;\n height: 24px;\n\n content: '';\n @include sprite(-45px -60px);\n @include transition(transform 200ms ease-out); }\n\n &:hover:before {\n @include transform(rotate(-5deg)); } }\n\n // Arrow right icon\n &.arrow {\n padding-right: 52px;\n\n // Set up arrow position\n &:before {\n position: absolute;\n top: 17px;\n right: 23px;\n\n width: 14px;\n height: 14px;\n\n content: '';\n @include transition(right 200ms ease-out); }\n\n &.small:before {\n top: 17px; }\n\n &:hover:before {\n right: 18px; }\n\n // White arrow\n &.stroked.white:before {\n @include sprite(-40px -35px); }\n\n // Blue arrow\n &.stroked.blue {\n &:before {\n @include sprite(-20px -35px); }\n &:hover:before {\n @include sprite(-40px -35px); } }\n\n // Black arrow\n &.stroked.black {\n &:before {\n @include sprite(-80px -20px); }\n &:hover:before {\n @include sprite(-40px -35px); } }\n\n // Blue Arrow down\n &.stroked.blue.down:before {\n @include sprite(-20px -20px); }\n\n // Light blue Arrow\n &.stroked.light-blue {\n &:before {\n @include sprite(-60px -40px); }\n &:hover:before {\n @include sprite(-40px -35px); } }\n\n // Light blue Arrow\n &.stroked.footer {\n &:before {\n @include sprite(-40px -20px); }\n &:hover:before {\n @include sprite(-40px -35px); } } } }\n\n\n.back-to-grid {\n display: inline-block;\n position: relative;\n color: $black;\n font-size: .9rem;\n font-weight: medium();\n text-decoration: none;\n padding-left: 42px;\n\n // Grid\n &:before {\n @include position(absolute, 6px null null 0);\n content: '';\n width: 16px;\n height: 16px;\n @include sprite(-100px -40px); }\n\n // Arrow\n &:after {\n @include position(absolute, 8px null null 23px);\n content: '';\n width: 14px;\n height: 14px;\n @include sprite(-100px -20px); } }\n\n\n\n// WEBPACK FOOTER //\n// ./resources/assets/sass/site/resources/assets/sass/site/partials/_buttons.sass","//************************************************************************//\n// Example: @include prefixer(border-radius, $radii, webkit ms spec);\n//************************************************************************//\n// Variables located in /settings/_prefixer.scss\n\n@mixin prefixer ($property, $value, $prefixes) {\n @each $prefix in $prefixes {\n @if $prefix == webkit {\n @if $prefix-for-webkit {\n -webkit-#{$property}: $value;\n }\n }\n @else if $prefix == moz {\n @if $prefix-for-mozilla {\n -moz-#{$property}: $value;\n }\n }\n @else if $prefix == ms {\n @if $prefix-for-microsoft {\n -ms-#{$property}: $value;\n }\n }\n @else if $prefix == o {\n @if $prefix-for-opera {\n -o-#{$property}: $value;\n }\n }\n @else if $prefix == spec {\n @if $prefix-for-spec {\n #{$property}: $value;\n }\n }\n @else {\n @warn \"Unrecognized prefix: #{$prefix}\";\n }\n }\n}\n\n@mixin disable-prefix-for-all() {\n $prefix-for-webkit: false !global;\n $prefix-for-mozilla: false !global;\n $prefix-for-microsoft: false !global;\n $prefix-for-opera: false !global;\n $prefix-for-spec: false !global;\n}\n\n\n\n// WEBPACK FOOTER //\n// ./resources/assets/sass/site/resources/assets/sass/global/bourbon/addons/_prefixer.scss","@mixin sprite($position) {\n background-image: url(/img/komma/komma_sprite.svg?v=2);\n background-size: 140px 85px;\n background-position: $position; }\n\n\n\n// WEBPACK FOOTER //\n// ./resources/assets/sass/site/resources/assets/sass/global/mixins/_sprite.sass","// Shorthand mixin. Supports multiple parentheses-deliminated values for each variable.\n// Example: @include transition (all 2s ease-in-out);\n// @include transition (opacity 1s ease-in 2s, width 2s ease-out);\n// @include transition-property (transform, opacity);\n\n@mixin transition ($properties...) {\n // Fix for vendor-prefix transform property\n $needs-prefixes: false;\n $webkit: ();\n $moz: ();\n $spec: ();\n\n // Create lists for vendor-prefixed transform\n @each $list in $properties {\n @if nth($list, 1) == \"transform\" {\n $needs-prefixes: true;\n $list1: -webkit-transform;\n $list2: -moz-transform;\n $list3: ();\n\n @each $var in $list {\n $list3: join($list3, $var);\n\n @if $var != \"transform\" {\n $list1: join($list1, $var);\n $list2: join($list2, $var);\n }\n }\n\n $webkit: append($webkit, $list1);\n $moz: append($moz, $list2);\n $spec: append($spec, $list3);\n }\n\n // Create lists for non-prefixed transition properties\n @else {\n $webkit: append($webkit, $list, comma);\n $moz: append($moz, $list, comma);\n $spec: append($spec, $list, comma);\n }\n }\n\n @if $needs-prefixes {\n -webkit-transition: $webkit;\n -moz-transition: $moz;\n transition: $spec;\n }\n @else {\n @if length($properties) >= 1 {\n @include prefixer(transition, $properties, webkit moz spec);\n }\n\n @else {\n $properties: all 0.15s ease-out 0s;\n @include prefixer(transition, $properties, webkit moz spec);\n }\n }\n}\n\n@mixin transition-property ($properties...) {\n -webkit-transition-property: transition-property-names($properties, 'webkit');\n -moz-transition-property: transition-property-names($properties, 'moz');\n transition-property: transition-property-names($properties, false);\n}\n\n@mixin transition-duration ($times...) {\n @include prefixer(transition-duration, $times, webkit moz spec);\n}\n\n@mixin transition-timing-function ($motions...) {\n// ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier()\n @include prefixer(transition-timing-function, $motions, webkit moz spec);\n}\n\n@mixin transition-delay ($times...) {\n @include prefixer(transition-delay, $times, webkit moz spec);\n}\n\n\n\n// WEBPACK FOOTER //\n// ./resources/assets/sass/site/resources/assets/sass/global/bourbon/css3/_transition.scss","@mixin position ($position: relative, $coordinates: null null null null) {\n\n @if type-of($position) == list {\n $coordinates: $position;\n $position: relative;\n }\n\n $coordinates: unpack($coordinates);\n\n $top: nth($coordinates, 1);\n $right: nth($coordinates, 2);\n $bottom: nth($coordinates, 3);\n $left: nth($coordinates, 4);\n\n position: $position;\n\n @if ($top and $top == auto) or (type-of($top) == number) {\n top: $top;\n }\n\n @if ($right and $right == auto) or (type-of($right) == number) {\n right: $right;\n }\n\n @if ($bottom and $bottom == auto) or (type-of($bottom) == number) {\n bottom: $bottom;\n }\n\n @if ($left and $left == auto) or (type-of($left) == number) {\n left: $left;\n }\n}\n\n\n\n// WEBPACK FOOTER //\n// ./resources/assets/sass/site/resources/assets/sass/global/bourbon/addons/_position.scss","/* ==========================================================================\n All global image related sass\n @mixin ========================================================================= */\n\n/**\n * Preload images\n */\n\nimg {\n opacity: 1;\n @include transition(opacity 300ms ease-out);\n\n &.preload {\n opacity: 0; }\n\n &.content, &.stretch {\n width: 100%; }\n\n &.cover {\n object-fit: cover; } }\n\n/**\n * Used for divs with background-images\n */\n.image-cover {\n background-size: cover; }\n\n/* Images on grid\n @mixin ========================================================================= */\n\n.image-grid {\n display: grid;\n grid-template-columns: 1fr 1fr;\n\n &.with-gaps {\n grid-gap: 60px column(1); } }\n\n\n\n// WEBPACK FOOTER //\n// ./resources/assets/sass/site/resources/assets/sass/site/partials/_images.sass","/* ==========================================================================\n Lists\n @mixin ========================================================================= */\n\n/**\n * Services list\n */\n\nul.services-list {\n\n padding: 0;\n margin: -9px 0 0;\n list-style: none;\n\n /**\n * 1. make sure display is block to make clickable over the full width\n */\n a {\n position: relative;\n display: block /* 1 */;\n color: $lightGrey;\n text-decoration: none;\n cursor: pointer;\n\n /**\n * Arrow at the end of a list item\n */\n &:after {\n position: absolute;\n top: 10px;\n right: 0;\n\n width: 15px;\n height: 15px;\n\n content: '';\n @include sprite(-59px -20px); }\n\n &:hover {\n color: $blue;\n\n &:after {\n @include sprite(-59px 0); } } }\n\n li.active {\n a {\n color: $black;\n font-weight: semibold();\n\n &:after {\n background-image: none; } } }\n\n @include respond-to-width($xsGridBreakpoint) {\n line-height: 2; } }\n\n\n\n// WEBPACK FOOTER //\n// ./resources/assets/sass/site/resources/assets/sass/site/partials/_lists.sass","/* ==========================================================================\n Text blocks\n @mixin ========================================================================= */\n\n.text-block {\n padding: column(1);\n font-size: $baseFontSize /* 2 */;\n\n // Todo clean this up:\n\n // Based on a 12 grid\n .col-12 & {\n padding: column(1,12); }\n\n @include respond-to-width($lgGridBreakpoint) {\n padding: column(1) column(.5);\n\n .col-12 & {\n padding: column(1,12) column(.5,12); } }\n\n // Bases on a 6 grid\n .col-6 & {\n padding: column(1,6);\n\n @include respond-to-width($lgGridBreakpoint) {\n padding: column(1,6) column(.5,6); } }\n\n // Line-height correction at the top for alignment\n p {\n @include transform(translateY(-9px)); }\n\n // Top indent for paragraphs without h2 next to a paragraph with h2\n &.top-indent {\n .h2-spacer {\n display: block;\n margin: -15px 0 40px 0 /* 1 */;\n font-size: 1.5rem; } }\n\n\n /**\n * Buttons in a text block are usually at the bottom,\n * so they can use a little margin top\n */\n .button {\n margin-top: 40px;\n\n @include respond-to-width($smGridBreakpoint) {\n margin-top: 16px; }\n @include respond-to-width($xsGridBreakpoint) {\n margin-top: 0; } }\n\n // Mobiel view\n @include respond-to-width($xsGridBreakpoint) {\n line-height: 1.4; } }\n\n\n\n// WEBPACK FOOTER //\n// ./resources/assets/sass/site/resources/assets/sass/site/partials/_textBlocks.sass","\n\n/* Account managers\n @mixin ========================================================================= */\n\n// Based on a col-5 container\n.account-managers-holder {\n white-space: nowrap;\n\n .account-manager {\n display: inline-block;\n width: calc((100% - 80px) / 3);\n font-size: .8rem;\n line-height: 1.2;\n white-space: normal;\n\n + .account-manager {\n margin-left: 40px; }\n\n .portrait {\n position: relative;\n overflow: hidden;\n border-radius: 500px;\n margin-bottom: 20px;\n\n img {\n width: 100%; } }\n\n\n .name {\n display: block;\n font-weight: semibold();\n white-space: nowrap; }\n\n .function {\n display: block;\n color: rgba(255,255,255,0.8);\n white-space: nowrap; }\n\n a {\n text-decoration: none;\n color: $blue; }\n\n @include respond-to-width($smGridBreakpoint) {\n .function {\n font-size: .9rem; } } }\n\n @include respond-to-width(550) {\n white-space: normal;\n font-size: 0;\n\n .account-manager {\n width: calc((100% - 40px) / 2);\n margin-bottom: 40px;\n\n &:nth-child(2n + 1) {\n margin-left: 0; } } }\n\n @include respond-to-width(375) {\n text-align: center;\n\n .account-manager {\n width: 100%;\n max-width: 200px;\n margin-left: 0 !important; } } }\n\n\n\n// WEBPACK FOOTER //\n// ./resources/assets/sass/site/resources/assets/sass/site/partials/_accountManagers.sass","/* ==========================================================================\n Call to action bar with account manager\n @mixin ========================================================================= */\n\n.call-to-action-bar {\n position: relative;\n display: block;\n background: $blue;\n color: #fff;\n\n /**\n * Left side with the call-to-action and contact details\n *\n * 1. center the content vertically\n * 2. make sure the contact-details go over the account manager\n */\n .call-to-action {\n position: relative;\n display: flex;\n align-items: center /* 1 */;\n flex-grow: 0;\n flex-basis: auto;\n width: column(6,12);\n z-index: 10 /* 2 */; }\n\n // This is used to align the call to action vertically centered\n .container {\n display: flex;\n flex-direction: column;\n justify-content: center;\n padding-left: column(1,6);\n max-height: 600px; }\n\n // The call-to-action streamer\n .streamer {\n display: block;\n margin-bottom: 2rem;\n line-height: 1;\n font-size: 2rem;\n font-weight: semibold(); }\n\n // Name and function\n .name {\n display: block;\n font-size: 1.4rem;\n line-height: 1; }\n\n .function {\n display: block;\n margin-bottom: 1.8rem;\n color: rgba(255,255,255,.7); }\n\n // Phone and e-mail\n .contact-details {\n font-size: 1.4rem;\n font-weight: medium();\n white-space: nowrap; }\n\n .phone, .email {\n display: inline-block;\n position: relative;\n text-decoration: none; }\n .phone {\n color: #fff; }\n .separator {\n display: inline-block;\n margin: 0 10px; }\n .email {\n color: $brightBlue; }\n\n // Hover\n .phone,.email {\n padding: 0 5px;\n // Before for animation\n &:before {\n content: '';\n @include position(absolute, null null 0 0);\n z-index: -1;\n width: 100%;\n height: 50%;\n opacity: 0.2;\n background: #fff;\n transform: scale3d(0,1,1);\n transform-origin: 0 50%;\n transition: transform 0.5s;\n transition-timing-function: cubic-bezier(0.2,1,0.3,1); }\n &:hover:before {\n transform: scale3d(1,1,1); } }\n\n /**\n * Right side with the photo of the account manager\n */\n .account-manager {\n display: flex;\n justify-content: center;\n align-items: flex-end;\n width: column(6,12);\n\n img {\n max-width: 100%; } }\n\n /**\n * Responsive rules\n */\n\n // Medium breakpoint\n @include respond-to-width($mdGridBreakpoint) {\n // Adjust some font sizes\n .streamer {\n font-size: 1.8rem; }\n .contact-details {\n font-size: 1.2rem; } }\n\n /*\n * Small breakpoint:\n * Set account manager to background and set contact details over full width\n */\n @include respond-to-width($smGridBreakpoint) {\n // Give bar a default height by enlarging the flex call-to-action\n // 1. 16:9 ratio\n .call-to-action {\n justify-content: center;\n width: 100%;\n height: 56.25vw /* 1 */; }\n .container {\n padding-left: 0; }\n // Adjust some font sizes\n .streamer {\n font-size: 1.4rem;\n margin-bottom: 1rem; }\n // Align detail below each other without the separator\n .contact-details {\n font-size: 1rem;\n line-height: 1.2;\n white-space: normal;\n a {\n display: block; } }\n .separator {\n display: none; }\n // Set account manager to the background\n .account-manager {\n @include position(absolute, 0 null null 0);\n width: 100%;\n height: 100%;\n justify-content: flex-start;\n\n img {\n height: 100%; } } }\n\n /*\n * Small breakpoint:\n * Put the text at the bottom for more readability\n */\n @include respond-to-width($xsGridBreakpoint) {\n .call-to-action {\n align-items: flex-end;\n height: 440px;\n .streamer,\n .function {\n margin-bottom: 10px; } }\n .container {\n padding-bottom: $mobileBottomSpace; } } }\n\n\n\n// WEBPACK FOOTER //\n// ./resources/assets/sass/site/resources/assets/sass/site/partials/_callToActionBar.sass","/* ==========================================================================\n Black centered call to action block\n @mixin ========================================================================= */\n\n/**\n * Main block styling\n *\n * 1. Reset default block quote margins\n * except the left for which this is already set\n */\n\n.call-to-action-block {\n padding: column(1);\n margin-top: 0 /* 1 */;\n margin-right: 0;\n margin-bottom: column(1);\n\n background: $black;\n color: #fff;\n font-size: 1.1rem;\n font-weight: medium();\n line-height: 1.2727272727;\n\n .flex-row {\n align-items: center; }\n\n /**\n * The block is divided in two flex columns\n *\n * 1. Reset inherit from .call-to-action-block\n */\n\n .flex-col {\n white-space: normal /* 1 */;\n\n // Add one grid-column spacing between columns\n &:first-child {\n margin-right: column(2,8); }\n\n &:nth-child(2) {\n display: flex;\n flex-direction: column;\n flex-shrink: 1;\n justify-content: flex-start;\n\n /*\n * Add margin-top 'auto' to align .button-holder\n * to the bottom of the parent flex box\n */\n .button-holder {\n margin-top: auto; } } }\n\n /**\n * Large heavy letters on the left side\n */\n\n h2 {\n margin: 0;\n\n color: #fff;\n font-size: 4rem;\n font-weight: black();\n line-height: 0.875;\n text-transform: uppercase; }\n\n h3 {\n margin-top: 0; }\n\n a {\n color: $brightBlue;\n text-decoration: none; }\n\n /**\n * Small Comment\n */\n\n .comment {\n display: block;\n margin: 10px 0;\n\n font-size: 0.8rem;\n line-height: 1.375; }\n\n // Block grows larger on medium screens, so we adjust the gutter\n @include respond-to-width($lgGridBreakpoint) {\n .flex-col:first-child {\n margin-right: column(2,12); } }\n\n // Remove gutter and lower top / bottom padding\n @include respond-to-width(960) {\n h2 {\n font-size: 3rem; }\n .flex-col:first-child {\n margin-right: 0; } }\n\n // Add this point we remove the columns and put everything below each other\n @include respond-to-width($smGridBreakpoint) {\n .flexable-layout {\n display: block; }\n h2 {\n font-size: 1.5rem;\n margin-bottom: .5rem;\n // Remove hard returns in title\n // Make sure you have spaces in the string\n br {\n display: none; } }\n // Add some button margin\n .button {\n margin-top: 1.5rem; }\n\n .flex-col:nth-child(2) {\n max-width: 400px; } }\n\n\n @include respond-to-width($xsGridBreakpoint) {\n margin-bottom: 0; } }\n\n// Handle parent div\n#call-to-action-block {\n @include respond-to-width($xsGridBreakpoint) {\n width: 100%; } }\n\n\n\n// WEBPACK FOOTER //\n// ./resources/assets/sass/site/resources/assets/sass/site/partials/_callToActionBlock.sass","/* ==========================================================================\n Case row on overview page (/cases)\n @mixin ========================================================================= */\n\n/**\n * 1. Align the half grid-row to the right\n */\n.case-layout {\n display: flex;\n min-height: 35vw;\n text-decoration: none;\n\n // Left column containing the info\n .case-info-container {\n display: flex;\n justify-content: flex-end;\n align-items: flex-end;\n width: 50%;\n\n .contained-layout {\n max-width: $gridMaxWidth / 2;\n margin: 0; }\n\n // The actual info\n .info {\n width: column(3,7);\n margin-left: column(3,7);\n margin-bottom: column(1,7);\n color: rgba(255,255,255,0.7);\n font-size: $baseFontSize;\n white-space: normal;\n line-height: 1.4; }\n\n // Title\n h2 {\n display: inline-block;\n position: relative;\n z-index: 2;\n margin: -8px 0 10px -8px;\n padding: 0 8px;\n color: #fff;\n font-size: 1.6rem;\n font-weight: semibold();\n\n // Before for animation\n &:before {\n content: '';\n @include position(absolute, null null 0 0);\n z-index: -1;\n width: 100%;\n height: 50%;\n opacity: 0.2;\n background: #fff;\n transform: scale3d(0,1,1);\n transform-origin: 100% 50%;\n transition: transform 0.5s;\n transition-timing-function: cubic-bezier(0.2,1,0.3,1); } }\n\n .arrow {\n display: inline-block;\n width: 32px;\n height: 14px;\n transition: transform 0.5s;\n\n @include sprite(0 0); }\n\n .cta {\n display: inline-block;\n position: relative;\n top: -2px;\n margin-right: 10px;\n font-weight: 600;\n @include transition(color .5s ease-out); } }\n\n // Case image holder\n .case-image {\n position: relative;\n overflow: hidden;\n width: 50%;\n\n // Cover image\n .image {\n @include position(absolute, 0 null null 0);\n width: 100%;\n height: 100%;\n background-size: cover;\n transition: transform 0.5s;\n transition-timing-function: cubic-bezier(0.2,1,0.3,1); } }\n\n // Hover state\n &:hover {\n .case-info-container {\n h2:before {\n transform: scale3d(1,1,1); }\n .tags .tag {\n border-color: rgba(255,255,255,0.6); }\n .arrow {\n @include transform(translate3D(20px, 0, 0)); }\n .cta {\n color: #fff; } }\n .case-image .image {\n @include transform(scale(1.1)); } }\n\n /* Responsive case row\n @mixin ========================================================================= */\n\n @include respond-to-width($mdGridBreakpoint) {\n .case-info-container h2 {\n font-size: 1.2rem; } }\n\n // Alternative layout\n @include respond-to-width($smGridBreakpoint) {\n flex-direction: column;\n\n .case-info-container {\n order: 2;\n width: 100%;\n height: 200px;\n align-items: center;\n\n .info {\n box-sizing: border-box;\n margin-left: 0;\n margin-bottom: 0;\n width: 100%;\n padding: 0 30px; } }\n\n .case-image {\n order: 1;\n width: 100%;\n height: 71.42857143vw /* 640px / 800px */; } }\n\n // Ie fix\n html.ie & {\n min-height: 0;\n\n .case-info-container,\n .case-image {\n min-height: 500px; } } }\n\n\n\n// WEBPACK FOOTER //\n// ./resources/assets/sass/site/resources/assets/sass/site/partials/cases/_caseIndexRow.sass","// Tag cloud\n.tags {\n display: block;\n margin-left: -5px;\n margin-bottom: 40px;\n\n .tag {\n display: inline-block;\n padding: 2px 5px;\n margin-right: 5px;\n margin-bottom: 8px;\n border: 1px solid rgba(255,255,255,0.2);\n border-radius: 3px;\n font-size: $baseFontSize;\n white-space: nowrap;\n transition: border-color 0.2s;\n cursor: pointer;\n\n &:hover {\n border-color: rgba(255,255,255,0.6); } } }\n\n\n\n// WEBPACK FOOTER //\n// ./resources/assets/sass/site/resources/assets/sass/site/partials/cases/_caseTags.sass","/* ==========================================================================\n Two featured cases next to each other.\n For example as found at the bottom of the about page.\n @mixin ========================================================================= */\n\n.featured-cases {\n\n .featured-case {\n position: relative;\n\n &:hover {\n .tags .tag {\n border-color: rgba(255,255,255,0.6); } } }\n\n .color-overlay {\n @include position(absolute, 0 null null 0);\n width: 100%;\n height: 100%;\n opacity: 0; }\n\n a {\n color: #fff;\n text-decoration: none; }\n\n .text-overlay {\n display: flex;\n justify-content: center;\n align-items: center;\n @include position(absolute, 0 null null 0);\n width: 100%;\n height: 100%;\n text-align: center; }\n\n .title {\n display: inline-block;\n position: relative;\n z-index: 2;\n margin: -8px 0 10px -8px;\n padding: 0 8px;\n color: #fff;\n font-size: 1.6rem;\n font-weight: semibold();\n\n opacity: 0;\n @include transform(translateY(20px)); }\n\n .tags {\n opacity: 0; }\n\n .arrow {\n display: inline-block;\n width: 14px;\n height: 14px;\n opacity: 0;\n @include transition(right 200ms ease-out);\n @include sprite(-40px -35px);\n @include transform(translateX(-10px)); }\n\n .read-more__label {\n display: none;\n position: relative;\n top: -2px;\n font-size: 1rem;\n line-height: 1.6;\n margin-right: 20px; }\n\n\n /*\n * Small breakpoint:\n * Default is flex, place below each other with display block\n */\n @include respond-to-width($smGridBreakpoint) {\n display: block /* 1 */; }\n\n @include respond-to-width(740) {\n .featured-case + .featured-case {\n margin-top: 24px; }\n\n .color-overlay {\n z-index: -1;\n opacity: 1 !important;\n width: 100% !important;\n height: 100% !important;\n transform: none !important; }\n\n .text-overlay {\n position: relative;\n height: auto;\n text-align: left; }\n\n .description {\n width: 100%;\n padding: 20px 30px 35px;\n line-height: 0; }\n\n .title {\n display: block;\n padding: 0;\n margin: 0 0 12px;\n transform: none !important; }\n\n .tags {\n margin-left: 0;\n margin-bottom: 15px; }\n\n .read-more__label {\n display: inline-block; }\n\n .tags,\n .title,\n .arrow {\n opacity: 1 !important;\n line-height: 1.6; } } }\n\n\n\n// WEBPACK FOOTER //\n// ./resources/assets/sass/site/resources/assets/sass/site/partials/cases/_featured.sass","/* ==========================================================================\n Scrollable website component on case-detail\n @mixin ========================================================================= */\n\n#full-size-site-scroll {\n background: #2475CE;\n\n .scrollable-website {\n width: 100%;\n margin-left: auto;\n margin-right: auto;\n max-width: 1000px;\n padding: 80px 0; } }\n\n\n.scrollable-website {\n display: flex;\n flex-direction: column;\n justify-content: center;\n\n padding: column(.5,7);\n background: #2475CE; // todo: customize\n\n .frame {\n position: relative;\n overflow: hidden;\n width: 100%;\n padding-bottom: 60%;\n background: #fff;\n border-radius: 10px;\n box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);\n\n .image-holder {\n @include position(absolute,0 null null 0);\n width: 100%;\n height: 100%; }\n\n img {\n display: block;\n @include position(absolute,0 null null 0);\n width: 100%; } } }\n\n\n\n// WEBPACK FOOTER //\n// ./resources/assets/sass/site/resources/assets/sass/site/partials/cases/_scrollableWebsite.sass","body.topsLuchtfilters {\n #identity {\n .logo-wrapper {\n width: 100%;\n max-width: 1000px;\n margin: auto;\n\n #tops-logo {\n width: 100%;\n display: block;\n\n #icon {\n\n #arrow-1, #arrow-2 {\n path {\n stroke-dasharray: 290;\n stroke-dashoffset: 0;\n transition: stroke-dashoffset 1.2s; } }\n\n #arrow-3, #arrow-4 {\n path {\n stroke-dasharray: 368;\n stroke-dashoffset: 0;\n transition: stroke-dashoffset 1.2s; } }\n\n #arrow-1, #arrow-2, #arrow-3, #arrow-4 {\n path {\n transition-delay: 1s; } }\n\n #blue-line, #white-line {\n stroke-dasharray: 130;\n stroke-dashoffset: 0;\n transition: stroke-dashoffset 1.2s; }\n\n #blue-line {\n transition-delay: 1.7s; }\n #white-line {\n transition-delay: 1.4s; }\n\n polygon {\n opacity: 1;\n transition: opacity 1s;\n transition-delay: 1.7s; } }\n\n #name {\n #tops {\n path {\n opacity: 1;\n transition: opacity 1s;\n\n @for $i from 0 to 5 {\n &:nth-child(#{$i + 1}) {\n transition-delay: #{ 3 + 0.1 * $i}s; } } } }\n\n #luchtfilters {\n path {\n opacity: 1;\n transition: opacity 1s;\n\n @for $i from 0 to 15 {\n &:nth-child(#{$i + 1}) {\n transition-delay: #{ 4.2 + 0.04 * $i}s; } } } } }\n\n #grid {\n #logo-side-horizontal {\n line {\n stroke-dasharray: 1080;\n stroke-dashoffset: 0;\n transition: stroke-dashoffset 1s;\n } } //transition-delay: 0s\n\n #logo-side-vertical, #logo-main-vertical, #logo-name-vertical-whitespace, #logo-name-right {\n line {\n stroke-dasharray: 300;\n stroke-dashoffset: 0;\n transition: stroke-dashoffset 1s;\n //transition-delay: 0s\n\n } } //transition: transfrom 1s\n\n #logo-main-vertical {\n line {\n &:nth-child(1), &:nth-child(8) {\n transition-delay: 0.4s; }\n &:nth-child(2), &:nth-child(7) {\n transition-delay: 0.3s; }\n &:nth-child(3), &:nth-child(6) {\n transition-delay: 0.2s; }\n &:nth-child(4), &:nth-child(5) {\n transition-delay: 0.1s; } } }\n\n #logo-name-vertical-whitespace, #logo-name-right {\n line {\n transition-delay: 2.4s; } }\n\n #logo-main-horizontal {\n line {\n stroke-dasharray: 470;\n stroke-dashoffset: 0;\n transition: stroke-dashoffset 1s;\n\n &:nth-child(1), &:nth-child(4) {\n transition-delay: 0.4s; }\n &:nth-child(2), &:nth-child(3) {\n transition-delay: 0.3s; } } }\n\n #logo-circles-right-top, #logo-circles-left-top, #logo-circles-right-bottom, #logo-circles-left-bottom {\n path {\n stroke-dashoffset: 0;\n transition: stroke-dashoffset 1s; } }\n\n #logo-circles-right-top, #logo-circles-left-top {\n path {\n &:nth-child(1) {\n stroke-dasharray: 400;\n transition-delay: 0.4s; }\n &:nth-child(2) {\n stroke-dasharray: 310;\n transition-delay: 0.5s; }\n &:nth-child(3) {\n stroke-dasharray: 225;\n transition-delay: 0.6s; }\n &:nth-child(4) {\n stroke-dasharray: 135;\n transition-delay: 0.7s; } } }\n\n #logo-circles-right-bottom, #logo-circles-left-bottom {\n path {\n &:nth-child(1) {\n stroke-dasharray: 225;\n transition-delay: 0.7s; }\n &:nth-child(2) {\n stroke-dasharray: 135;\n transition-delay: 0.8s; } } }\n\n #logo-diagonal {\n line {\n stroke-dasharray: 275;\n stroke-dashoffset: 0;\n transition: stroke-dashoffset 1s;\n transition-delay: 1s; } }\n\n #logo-name-horizontal-whitespace {\n line {\n stroke-dasharray: 600;\n stroke-dashoffset: 0;\n transition: stroke-dashoffset 1s;\n transition-delay: 1s;\n\n @for $i from 0 to 4 {\n &:nth-child(#{$i + 1}) {\n transition-delay: #{ 3.8 - 0.1 * $i}s; } } } } } }\n\n\n\n\n &.animate {\n #tops-logo {\n path, line, polygon {\n transition-delay: 0s !important;\n transition-duration: 1s !important; }\n #name {\n #tops, #luchtfilters {\n path {\n opacity: 0; } } }\n\n #icon {\n #arrow-1, #arrow-2 {\n path {\n stroke-dashoffset: 290; } }\n\n #arrow-3, #arrow-4 {\n path {\n stroke-dashoffset: 368; } }\n\n polygon {\n opacity: 0; }\n\n #white-line, #blue-line {\n stroke-dashoffset: 130; } }\n\n #grid {\n #logo-side-horizontal {\n line {\n stroke-dashoffset: 1080; } }\n\n #logo-side-vertical {\n line {\n stroke-dashoffset: 300; } }\n\n #logo-main-vertical {\n line {\n stroke-dashoffset: 300; } }\n\n #logo-main-horizontal {\n line {\n stroke-dashoffset: 470; } }\n\n #logo-circles-right-top, #logo-circles-left-top {\n path {\n &:nth-child(1) {\n stroke-dashoffset: 400; }\n &:nth-child(2) {\n stroke-dashoffset: 310; }\n &:nth-child(3) {\n stroke-dashoffset: 225; }\n &:nth-child(4) {\n stroke-dashoffset: 135; } } }\n\n #logo-circles-right-bottom, #logo-circles-left-bottom {\n path {\n &:nth-child(1) {\n stroke-dashoffset: 225; }\n &:nth-child(2) {\n stroke-dashoffset: 135; } } }\n\n #logo-diagonal {\n line {\n stroke-dashoffset: 275; } }\n\n #logo-name-vertical-whitespace, #logo-name-right {\n line {\n stroke-dashoffset: 300; } }\n\n #logo-name-horizontal-whitespace {\n line {\n stroke-dashoffset: 600; } } } } } } } }\n\n\n\n\n\n\n\n// WEBPACK FOOTER //\n// ./resources/assets/sass/site/resources/assets/sass/site/partials/cases/_tops.sass",".job-list{\n padding: 0;\n font-size: $baseFontSize;\n line-height: 1.4;\n list-style: none;\n\n > * + * {\n margin-top: 10px;\n }\n\n}\n\n.job-list__link {\n display: block;\n padding: 20px;\n border: solid 2px currentColor;\n font-size: 1.1em;\n color: $brightBlue;\n text-decoration: none;\n transition: all 0.2s;\n\n &:hover {\n color: #fff !important;\n }\n\n .on-light & {\n color: $lightGrey;\n\n &:hover {\n color: $blue !important;\n }\n }\n}\n\n\n// WEBPACK FOOTER //\n// ./resources/assets/sass/site/resources/assets/sass/site/partials/_jobList.scss","/* ==========================================================================\n Black centered apply cta block\n ========================================================================== */\n\n.apply-cta-block {\n position: relative;\n width: column(10, 12);\n margin: auto;\n padding: column(1);\n background: $black;\n color: #fff;\n font-size: 0.9rem;\n font-weight: medium();\n line-height: 1.6;\n white-space: normal;\n overflow: hidden;\n\n\n @include respond-to-width($lgGridBreakpoint) {\n width: 100%;\n }\n}\n\n.apply-cta-block__burger {\n position: absolute;\n left: -10%;\n bottom: 40px;\n width: 35%;\n\n svg {\n width: 100%;\n }\n}\n\n\n.apply-cta-block__title {\n margin: 0 0 40px;\n\n color: #fff;\n font-size: 2.6rem;\n font-weight: black();\n line-height: 0.875;\n text-transform: uppercase;\n}\n\n.apply-cta-block__inner {\n @include flex(space-between, flex-start);\n\n @include respond-to-width($lgGridBreakpoint) {\n padding: 0 column(.5,12);\n }\n\n @include respond-to-width($xsGridBreakpoint) {\n padding: 0;\n }\n}\n\n.apply-cta-block__content {\n width: column(4.5, 10);\n}\n\n.apply-cta-block__content-flex {\n @include flex(space-between, center);\n}\n\n.apply-cta-block__person {\n width: 120px;\n\n img {\n width: 100%;\n border-radius: 50%;\n overflow: hidden;\n }\n}\n\n.apply-cta-block__description {\n width: calc(100% - 140px);\n\n a {\n color: $brightBlue;\n text-decoration: none;\n }\n}\n\n.apply-cta-block__form {\n position: relative;\n z-index: 2;\n width: column(4.5, 10);\n\n .input-holder {\n\n input, textarea {\n color: white;\n }\n\n textarea {\n overflow: hidden;\n background-color: rgba($black, 0.85);\n }\n\n label {\n color: white;\n margin-bottom: 5px;\n }\n }\n\n input[type=\"submit\"] {\n margin-top: 5px;\n background-color: $black;\n border-color: white;\n color: white;\n\n &:hover {\n color: $black;\n background-color: white;\n }\n }\n}\n\n\n.apply-cta-block__label {\n margin: 0 0 5px;\n font-size: 0.8rem;\n font-weight: 600;\n}\n\n.apply-cta-block__weTransfer {\n @include flex(space-between, center);\n width: 300px;\n margin-bottom: 40px;\n padding: 10px 15px;\n border: 2px solid white;\n border-radius: 4px;\n background-color: $black;\n\n color: white;\n font-size: 0.7rem;\n line-height: 1.1;\n font-weight: 600;\n text-decoration: none;\n transition: color 0.2s, background-color 0.2s;\n\n &:hover {\n background-color: white;\n color: $black;\n }\n\n}\n\n.apply-cta-block__weTransfer-icon {\n width: 60px;\n\n svg{\n width: 100%;\n }\n}\n\n.apply-cta-block__weTransfer-label {\n width: calc(100% - 75px);\n}\n\n@include respond-to-width(950) {\n .apply-cta-block__inner {\n display: block;\n }\n\n .apply-cta-block__content,\n .apply-cta-block__form {\n width: 100%;\n }\n\n .apply-cta-block__burger {\n left: auto;\n right: -10%;\n transform: scaleX(-1);\n }\n}\n\n@include respond-to-width($xsGridBreakpoint) {\n .apply-cta-block__burger {\n bottom: 10px;\n }\n}\n\n.is-light {\n &.apply-cta-block__weTransfer {\n background-color: white;\n color: #1d2433;\n border-color: #1d2433;\n }\n}\n\n\n// WEBPACK FOOTER //\n// ./resources/assets/sass/site/resources/assets/sass/site/partials/_applyCtaBlock.scss","@mixin flex($justify: space-between, $alignItem: initial) {\n display: -ms-flexbox /* TWEENER - IE 10 */;\n display: -webkit-flex /* NEW - Chrome */;\n display: flex;\n\n @include prefixer(justify-content, $justify, webkit moz ms);\n @include prefixer(align-items, $alignItem, webkit moz ms);\n justify-content: $justify;\n align-items: $alignItem; }\n\n\n@mixin flex-rows {\n @include prefixer(flex-wrap, wrap, webkit ms);\n @include prefixer(flex-direction, row, webkit ms);\n @include prefixer(flex-flow, row wrap, webkit); }\n\n@mixin order($place) {\n @include prefixer(order, $place, webkit ms); }\n\n@mixin align-content($align) {\n @include prefixer(align-content, $align, webkit); }\n\n@mixin align-self($align) {\n @include prefixer(align-self, $align, webkit); }\n\n\n\n// WEBPACK FOOTER //\n// ./resources/assets/sass/site/resources/assets/sass/global/mixins/_flex.sass",".o-service-header {\n margin-top: 60px;\n text-align: center;\n}\n\n.o-service-header__button {\n position: relative;\n display: inline-block !important;\n border: none !important;\n height: auto !important;\n\n &:after {\n content: '';\n position: absolute;\n width: 100%;\n height: 100%;\n left: 50%;\n top: 50%;\n border: 2px solid white;\n border-radius: 4px;\n transform: translate3d(-50%, -50%, 0);\n transition: height 0.2s, width 0.2s, background-color 0.2s;\n transition-timing-function: ease-in-out;\n }\n\n &:hover {\n &:after {\n height: calc(100% + 10px);\n width: calc(100% + 25px);\n background-color: rgba(white, 0.1) !important;\n }\n }\n}\n\n.o-service-content {\n width: column(12);\n max-width: 1440px;\n margin: auto;\n\n .col-3,\n .col-4,\n .col-5,\n .col-6,\n .col-7 {\n margin: 0;\n }\n}\n\n.o-service-content__block {\n margin: column(1) 0;\n\n @include respond-to-width(900) {\n margin: column(2) 0;\n }\n}\n\n.o-service-content__block--full-text {\n @include respond-to-width-beyond(500){\n width: column(10);\n margin-left: auto;\n margin-right: auto;\n }\n\n @include respond-to-width-beyond(1200){\n width: column(8);\n }\n}\n\n.o-service-content__text {\n padding: 0 column(1);\n font-size: $baseFontSize;\n\n @include respond-to-width-beyond(900){\n .o-service-content__block--two-columns &{\n padding: 0 column(2);\n }\n }\n}\n\n.o-service-content__button {\n margin-top: 40px;\n}\n\n.o-service-content__block--two-columns {\n display: flex;\n justify-content: space-between;\n align-items: center;\n\n > * {\n width: 50%;\n }\n\n @include respond-to-width(900)\n {\n flex-wrap: wrap;\n > * {\n width: 100%;\n }\n\n > * + * {\n margin-top: column(2);\n }\n }\n}\n\n.o-service-content__block--reverse {\n flex-direction: row-reverse;\n}\n\n.o-service-content__block-image,\n.o-service-content__block--full-image{\n img {\n width: 100%;\n }\n}\n\n\n// WEBPACK FOOTER //\n// ./resources/assets/sass/site/resources/assets/sass/site/partials/_serviceContent.scss",".o-service-footer {\n @extend .o-service-content;\n\n margin-top: column(1);\n margin-bottom: column(1);\n}\n\n.o-service-footer__title {\n margin-top: 0;\n}\n\n@include respond-to-width(740) {\n\n .o-service-footer__featured {\n max-width: 400px;\n margin-bottom: column(1);\n }\n\n}\n\n@include respond-to-width-beyond(740) {\n\n .o-service-footer {\n display: flex;\n justify-content: space-between;\n align-items: flex-start;\n }\n\n .o-service-footer__list {\n width: column(4, 10);\n padding: 0 column(1);\n }\n\n .o-service-footer__featured {\n margin-bottom: 0;\n width: column(6, 10);\n }\n\n\n @include respond-to-width(1200) {\n .o-service-footer__list {\n width: column(5, 10);\n }\n\n .o-service-footer__featured {\n width: column(5, 10);\n max-width: 400px;\n }\n\n .service .featured-cases {\n display: block;\n }\n }\n\n}\n\n\n\n// WEBPACK FOOTER //\n// ./resources/assets/sass/site/resources/assets/sass/site/partials/_serviceFooter.scss",".c-projector {\n position: relative;\n height: 100%;\n}\n\n.c-projector__figure {\n display: grid;\n grid-template-rows: 1fr;\n grid-template-columns: 1fr;\n height: 100%;\n}\n\n.c-projector__picture {\n grid-column: 1;\n grid-row: 1;\n align-self: center;\n height: 100%;\n display: flex;\n align-items: center; \n background-color: $borderColor;\n opacity: 0;\n transition: opacity 0.5s;\n\n &.is-active {\n opacity: 1;\n }\n}\n\n.c-projector__img {\n // make sure it stretches the container\n width: 100%;\n //height: 100%;\n //object-fit: cover; // Fallback for IE via JS polyfill\n\n @include respond-to-width-beyond(740){\n max-height: 78vh; // Make sure images are visible entirely on small devices in landscape)\n }\n}\n\n\n.c-projector__control {\n position: relative;\n z-index: 2;\n grid-column: 1;\n grid-row: 1;\n align-self: end;\n margin-bottom: 8px;\n margin-right: 8px;\n\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n.c-projector__button {\n display: flex;\n justify-content: center;\n align-items: center;\n margin: 5px;\n padding: 10px;\n color: $blue;\n background: white;\n border: 1px solid white;\n border-radius: 100%;\n cursor: pointer;\n transition-property: background-color, border, box-shadow;\n transition-duration: 0.25s;\n outline: none;\n\n &:hover {\n color: white;\n background-color: $blue;\n border-color: transparent;\n cursor: pointer;\n }\n\n &:active {\n background-color: scale-color($blue, $lightness: -30%);\n color: white;\n }\n\n &:focus {\n box-shadow: 0 1px 6px 0 black;\n }\n\n &.previous {\n transform: rotate(0.5turn);\n }\n}\n\n.c-projector__arrow{\n display: flex;\n justify-content: center;\n align-items: center;\n height: 16px;\n font-size: 0;\n line-height: 0;\n}\n\n\n// WEBPACK FOOTER //\n// ./resources/assets/sass/site/resources/assets/sass/site/partials/_projector.scss","// Component settings: Slide indicator\n// ------------------------------------------\n\n$c-slide-indicator: (\n\t'color-dot':\t\t\trgba(white, 0.8),\n\t'color-dot-active':\t\t$pastelBlue,\n\t'color-ring-active':\t$brightBlue,\n\t'color-dots-background':$brightBlue,\n\t'color-hover-background': rgba(white, 0.4),\n\t'size-dot':\t\t\t\t8px,\n\t'size-dot-active':\t\t6px,\n\t'size-ring-active':\t\t12px,\n\t'size-targetbox':\t\t30px,\n\t'is-rounded':\t\t\ttrue,\n);\n\n// ------------------------------------------\n\n\n.c-slide-indicator {\n display: flex;\n justify-content: flex-end;\n align-items: center;\n}\n\n.c-slide-indicator__button {\n\tposition: relative;\n\tdisplay: inline-block;\n\twidth: map-get($c-slide-indicator, 'size-targetbox');\n\theight: map-get($c-slide-indicator, 'size-targetbox');\n\tbackground-color: transparent;\n\tborder: none;\n\tcursor: pointer;\n\ttransition-property: background-color, opacity;\n\ttransition-duration: 250ms;\n\n\t&:focus {\n\t\toutline: none;\n\t\t//box-shadow: 0 0 7px 0 map-get($c-slide-indicator, 'color-ring-active');\n\t\t//@if (map-get($c-slide-indicator, 'is-rounded') == true) {\n\t\t//\tborder-radius: 100%;\n\t\t//}\n\t}\n\n\t&:hover:not(.is-active),\n\t&:focus:not(.is-active) {\n\t\topacity: 0.5;\n\t}\n\n\t&:before,\n\t&:after {\n\t\tcontent: '';\n\t\tposition: absolute;\n\t\tbackground-clip: content-box;\n\t\ttransition-property: transform, background-color, opacity;\n\t\ttransition-duration: 0.3s;\n\t\ttransition-timing-function: ease-in-out;\n\t\t@if (map-get($c-slide-indicator, 'is-rounded') == true) {\n\t\t\tborder-radius: 100%;\n\t\t}\n\t}\n\n\t&:before {\n\t\t$offset: calc((#{map-get($c-slide-indicator, 'size-targetbox')} - #{map-get($c-slide-indicator, 'size-dot')}) / 2);\n\t\ttop: $offset;\n\t\tright: $offset;\n\t\tbottom: $offset;\n\t\tleft: $offset;\n\t\tbackground-color: map-get($c-slide-indicator, 'color-dot');\n\t}\n\n\t&:after {\n\t\t$offset: calc((#{map-get($c-slide-indicator, 'size-targetbox')} - #{map-get($c-slide-indicator, 'size-ring-active')}) / 2);\n\t\ttop: $offset;\n\t\tright: $offset;\n\t\tbottom: $offset;\n\t\tleft: $offset;\n\t\tborder: 1px solid map-get($c-slide-indicator, 'color-ring-active');\n\t\ttransform: scale(1.4);\n\t\topacity: 0;\n\t}\n\n\t&.is-active {\n\t\t&:before {\n\t\t\tbackground-color: map-get($c-slide-indicator, 'color-dot-active');\n\t\t\tborder-color: rgba(map-get($c-slide-indicator, 'color-ring-active'), 0.9);\n\t\t\ttransform: scale(strip-unit(map-get($c-slide-indicator, 'size-dot-active')) / strip-unit(map-get($c-slide-indicator, 'size-dot')));\n\t\t}\n\t\t&:after {\n\t\t\topacity: 0.9;\n\t\t\ttransform: scale(1);\n\t\t}\n\t}\n\n\t&:focus {\n\t\topacity: 1 !important;\n\n\t\t&:before {\n\t\t\t//background-color: palette(secondary);\n\t\t\tbox-shadow: 0 0 0 2px map-get($c-slide-indicator, 'color-hover-background'), 0 0 10px 1px white;\n\t\t}\n\t\t&:after {\n\t\t\t//background-color: palette(secondary);\n\t\t\tbox-shadow: 0 0 0 2px map-get($c-slide-indicator, 'color-hover-background'), 0 0 10px 1px white;\n\t\t}\n\t}\n}\n\n\n// WEBPACK FOOTER //\n// ./resources/assets/sass/site/resources/assets/sass/site/partials/_slideIndicator.scss","/* ==========================================================================\n Drip animation\n @mixin ========================================================================= */\n\n/**\n * Container holding al the drips\n * For now this is for simulation only\n */\n\n.drip-container {\n position: fixed;\n z-index: 1000;\n top: 0;\n left: 0;\n\n .drip {\n position: fixed;\n top: -100vh;\n left: 0;\n\n width: 100vw;\n height: 100vh;\n\n background: $blue /* Old browsers */;\n background: -moz-linear-gradient(top, $brightBlue 0%, $blue 100%) /* FF3.6-15 */;\n background: -webkit-linear-gradient(top, $brightBlue 0%,$blue 100%) /* Chrome10-25,Safari5.1-6 */;\n background: linear-gradient(to bottom, $brightBlue 0%,$blue 100%) /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */; } }\n\n\n\n// WEBPACK FOOTER //\n// ./resources/assets/sass/site/resources/assets/sass/site/partials/_drips.sass","/* ==========================================================================\n Contains styling for drip transition between pages\n @mixin ========================================================================= */\n\n.drip-transition-container {\n @include position(fixed, 0 null null 0);\n z-index: 1000;\n display: flex;\n justify-content: flex-start;\n width: 100%;\n pointer-events: none;\n\n .drip {\n position: relative;\n\n /**\n * Body defines the height\n *\n * 1. Applying a very large border radius to create round bottom (50% doesn't work here)\n */\n .drip-body {\n width: 101%;\n margin-left: -.5%;\n border-radius: 0 0 500px 500px /* 1 */; }\n\n /**\n * The tail contains the inverted circle\n *\n * 1. Use padding-bottom 100% to create a square shape\n * 2. Mask the top part with the inverted circle svg\n */\n .drip-tail {\n width: 100%;\n padding-bottom: 100% /* 1 */;\n mask-image: url(/img/komma/structure/drip_top.svg) /* 2 */; }\n\n /**\n * Create one gradient over all the drips\n *\n * 1. Make sure the gradient expands to viewport's size\n * todo: background attachment fixed doesn't work with transform,\n */\n .drip-body, .drip-tail {\n position: relative;\n background: $brightBlue; }\n\n &:nth-child(2n) {\n .drip-body {\n border-radius: 500px 500px 0 0; }\n\n .drip-tail {\n mask-image: url(/img/komma/structure/drip_bottom.svg); } } } }\n\n\n\n// WEBPACK FOOTER //\n// ./resources/assets/sass/site/resources/assets/sass/site/partials/drips/_dripTransition.sass",".input-holder {\n margin-bottom: 10px;\n\n input,textarea {\n padding: 0 10px;\n width: 100%;\n background: none;\n border: 1px solid #B5C1C7;\n\n font-family: 'freight-sans-pro', sans-serif;\n font-feature-settings: 'lnum';\n font-size: $baseFontSize;\n font-weight: book();\n\n -webkit-appearance: none;\n\n &[type=\"text\"] {\n height: 40px; }\n\n &::-webkit-input-placeholder, /* WebKit, Blink, Edge */ {}\n &:-moz-placeholder, /* Mozilla Firefox 4 to 18 */ {}\n &::-moz-placeholder, /* Mozilla Firefox 19+ */ {}\n &:-ms-input-placeholder, /* Internet Explorer 10-11 */ {}\n &::-ms-input-placeholder, /* Microsoft Edge */ {}\n &::placeholder {\n color: lighten($black,70); } }\n\n textarea {\n padding: 5px 10px;\n resize: vertical;\n height: 200px;\n min-height: 200px; }\n\n label {\n display: block;\n color: $bodyText;\n font-weight: 600;\n font-size: .8rem; }\n\n &.error {\n\n input,textarea {\n border-color: $warning; }\n\n label {\n display: none; }\n\n .message {\n display: block;\n color: $warning; } }\n\n &.honey {\n position: fixed;\n top: -50px;\n height: 20px;\n width: 100%; } }\n\n.error-message, noscript {\n display: block;\n font-size: 0.75rem;\n color: $red; }\n\n// Submit button\ninput[type=\"submit\"] {\n position: relative;\n\n display: inline-block;\n min-width: 240px;\n height: 60px;\n padding: 0 20px;\n margin-top: 20px;\n\n background: #fff;\n border-radius: 4px;\n border: 2px solid $blue;\n color: $blue;\n\n font-family: 'freight-sans-pro', sans-serif;\n font-size: $baseFontSize;\n line-height: 55px;\n font-weight: semibold();\n cursor: pointer;\n @include transition(all 200ms ease-out);\n\n -webkit-appearance: none;\n\n &:hover {\n border-color: #fff;\n color: #fff;\n background: $blue;\n\n &:before {\n right: 18px;\n @include sprite(-40px -35px); } }\n\n &:before {\n position: absolute;\n top: 22px;\n right: 23px;\n\n width: 14px;\n height: 14px;\n\n content: '';\n @include sprite(-20px -35px);\n @include transition(right 200ms ease-out); } }\n\n\n\n\n// WEBPACK FOOTER //\n// ./resources/assets/sass/site/resources/assets/sass/site/partials/_form.sass","/* ==========================================================================\n Main footer\n @mixin ========================================================================= */\n\nfooter.main {\n\n width: 100%;\n background: $black;\n color: $footerTextColor;\n\n a {\n color: $footerTextColor;\n text-decoration: none;\n @include transition(color 100ms ease-out);\n\n &:hover {\n color: #fff; } }\n\n .flexable-layout {\n flex-wrap: wrap;\n padding-top: column(.75,12); }\n\n\n // The footer is divided in three equal columns\n .footer-col {\n display: flex;\n flex-direction: column; // 1\n flex-basis: initial;\n flex-grow: 0;\n flex-shrink: 0;\n justify-content: flex-end;\n width: 33.33333%;\n font-size: $baseFontSize;\n\n // Position logo at the bottom left\n &.logo-container {\n align-items: flex-start;\n\n .logo {\n width: 60%;\n max-width: 250px;\n fill: $footerTextColor;\n @include transition(fill 100ms ease-out);\n\n &:hover {\n fill: #fff; }\n\n @include respond-to-width($mdGridBreakpoint) {\n width: column(3,4); } } }\n\n // Position button centered\n &.button-container {\n align-items: center;\n\n .streamer {\n display: inline-block;\n text-align: center;\n margin-bottom: 30px;\n font-size: 1.5rem;\n line-height: 1.4; } }\n\n // Social media is vertically centered\n // Contact details are at the bottom right\n &.contact-container {\n align-items: flex-end;\n line-height: 1.6;\n text-align: right; }\n\n .contact-details {\n .right {\n margin-top: 20px; }\n\n @include respond-to-width-beyond($smGridBreakpoint) {\n display: flex;\n justify-content: flex-end;\n\n .right {\n margin-top: 0;\n margin-left: 40px; } } } }\n\n nav.footer {\n border-top: 1px solid #262F3E;\n margin-top: column(.75,12);\n text-align: center;\n width: 100%;\n\n ul {\n padding: 0;\n margin: 0;\n list-style: none; }\n li {\n padding: column(.4,12) 0;\n display: inline-block;\n margin-right: 50px;\n\n &:last-child {\n margin-right: 0; } } }\n\n // Social icons\n .social-media {\n .icon {\n display: inline-block;\n height: 24px;\n margin-left: 10px;\n\n &.facebook {\n width: 14px;\n @include sprite(0 -60px); }\n\n &.linkedIn {\n width: 22px;\n @include sprite(-20px -60px); }\n\n &.instagram {\n width: 22px;\n @include sprite(-75px -60px); }\n\n &.behance {\n width: 30px;\n @include sprite(-100px -57px); } } }\n\n .less-important-stuff {\n background: $blacker;\n width: 100%;\n\n .col-6 {\n font-size: .8rem;\n line-height: 40px;\n color: #606D7A;\n\n a {\n color: #606D7A;\n &:hover {\n color: lighten(#606D7A,10); } }\n\n &:nth-child(2) {\n text-align: right;\n a {\n margin-left: 20px; } } } }\n\n @include respond-to-width-between(950, 1200) {\n .flexable-layout {\n justify-content: space-between; }\n\n .footer-col.logo-container {\n width: 210px;\n\n .logo {\n width: 80%; } }\n\n .footer-col.button-container {\n width: 240px; }\n\n .footer-col.contact-container {\n width: 340px; } }\n\n @include respond-to-width-between($smGridBreakpoint, 950) {\n .footer-col.logo-container {\n width: 50%; }\n\n .footer-col.button-container {\n width: 50%;\n align-items: flex-end;\n justify-content: center; }\n\n .footer-col.contact-container {\n margin-top: 80px;\n width: 400px;\n margin-left: auto; } }\n\n @include respond-to-width($mdGridBreakpoint) {\n\n .footer-col.button-container {\n .button {\n height: 50px;\n line-height: 45px;\n &:before {\n top: 17px; } } }\n\n nav.footer {\n li {\n margin-right: 20px; } } }\n\n /*\n * Small breakpoint\n * Align footer in column direction\n */\n @include respond-to-width($smGridBreakpoint) {\n\n .flexable-layout {\n flex-direction: column; }\n\n .footer-col {\n width: 100%;\n margin-bottom: 30px;\n &.button-container {\n align-items: flex-start;\n order: 3; }\n &.contact-container {\n align-items: flex-start;\n order: 1;\n padding-top: 0;\n text-align: left;\n .social-media .icon {\n margin-left: 0;\n margin-right: 10px; } }\n &.logo-container {\n order: 4;\n margin: column(.75,12) 0; } }\n\n nav.footer {\n margin: 0 0 column(.75,12);\n order: 2;\n border-top: none;\n text-align: left;\n li {\n display: block;\n padding: 0; } }\n\n .less-important-stuff {\n padding: 20px 0;\n .col-6 {\n line-height: 1.2;\n display: block;\n margin: 0 0 0 column(1,12);\n &:nth-child(2) {\n text-align: left;\n a {\n margin: 0; } }\n a {\n display: block;\n margin: 0; } } } }\n\n\n @include respond-to-width($xsGridBreakpoint) {\n padding-top: $mobileTopSpace;\n .flexable-layout {\n padding: 0 $mobileAsideSpace; } } }\n\n\n\n// WEBPACK FOOTER //\n// ./resources/assets/sass/site/resources/assets/sass/site/partials/_footer.sass","/* ==========================================================================\n Big blue header\n specific CSS for the Cases header can be found in case.sass\n @mixin ========================================================================= */\n\n/**\n * Main header\n *\n * 1. Set up the height on 70% of viewport for now, maybe adjust later\n */\nheader.main {\n position: relative;\n z-index: 1;\n margin-bottom: columnVw(.5);\n background: $blue;\n\n /**\n * Large intro text\n */\n .intro {\n position: relative;\n padding: column(2) 0;\n color: #fff;\n font-size: 2rem;\n font-weight: medium();\n line-height: 1.25;\n\n /**\n * Page title\n */\n h1 {\n margin: 0 0 60px 0;\n\n color: #4D6EFF;\n font-size: .9rem;\n font-weight: bold();\n text-transform: uppercase; }\n\n p {\n margin: 0; }\n\n a {\n color: $brightBlue;\n text-decoration: none; }\n\n .arrow:not(.o-service-header__button) {\n @include position(absolute, null null column(2) 50%);\n display: block;\n width: 14px;\n height: 32px;\n margin-left: -7px;\n\n @include sprite(0 -20px);\n cursor: pointer;\n @include transition(transform 200ms ease-out );\n\n &:hover {\n @include transform(translateY(5px)); } } }\n\n\n /* Responsive header\n @mixin ========================================================================= */\n\n @include respond-to-width($mdGridBreakpoint) {\n .intro {\n width: column(11); } }\n\n @include respond-to-width($smGridBreakpoint) {\n\n h1 {\n margin-bottom: 30px; }\n\n .intro {\n font-size: 1.5rem;\n\n .arrow {\n display: none; } } }\n\n @include respond-to-width($xsGridBreakpoint) {\n\n .intro {\n width: 100%;\n padding: $mobileTopSpace $mobileAsideSpace $mobileBottomSpace;\n\n p {\n font-size: 1.2rem;\n line-height: 1.3; } } } }\n\n/* Header drips\n @mixin ========================================================================= */\n\n.header-drip {\n @include position(absolute, 0 null null 0);\n background: $pastelBlue;\n\n &.top {\n width: 100%;\n height: columnVw(.5);\n max-height: $gridMaxWidth / 28; }\n\n &.left, &.right {\n top: 0;\n width: column(.5);\n max-width: $gridMaxWidth / 28;\n height: 100%;\n background: linear-gradient(to bottom, $pastelBlue 0%,$blue 100%);\n border-bottom-left-radius: 500px;\n border-bottom-right-radius: 500px; }\n\n &.right {\n left: auto;\n right: 0; }\n\n // Gets replaced by a mobile menu\n @include respond-to-width($smGridBreakpoint) {\n &.top {\n height: 0; } }\n @include respond-to-width($xsGridBreakpoint) {\n display: none; } }\n\n\n\n// WEBPACK FOOTER //\n// ./resources/assets/sass/site/resources/assets/sass/site/partials/_header.sass","/* ==========================================================================\n Navigation\n @mixin ========================================================================= */\n\n/**\n * Logo and burger container\n * Ratio = 1 : 2\n *\n * 1. Applying a very large border radius to create round bottom (50% doesn't work here)\n */\n.navigation-drip {\n position: fixed;\n top: 0;\n left: 0;\n z-index: 100;\n\n width: column(1);\n max-width: $gridMaxWidth / 14;\n height: columnVw(2);\n max-height: $gridMaxWidth / 7;\n\n background: $pastelBlue;\n border-radius: 0 0 500px 500px /* 1 */;\n\n .logo {\n display: block;\n width: 50%;\n margin: 25%;\n\n .landscape {\n display: none; }\n .portrait {\n width: 100%; } }\n\n // Add a square container at the bottom to center the button\n .burger-container {\n @include position(absolute, null null 0 0);\n width: 100%;\n padding-bottom: 100%;\n border-radius: 50%; }\n\n // White button containing the burger icon\n .burger-button {\n @include position(absolute, 25% null null 25%);\n width: 50%;\n padding-bottom: 50%;\n border-radius: 50%;\n background: #fff;\n cursor: pointer;\n\n // The burger icon\n svg {\n @include position(absolute, 36% null null 30%);\n width: 40%;\n fill: $blue;\n overflow: hidden;\n @include transition(fill 200ms ease-out);\n\n html.ie & {\n top: 0; }\n\n .line1,\n .line2,\n .line3 {\n @include transition(width 200ms ease-out); } }\n\n &:hover {\n svg {\n fill: $black;\n\n .line2 {\n width: 60%; }\n .line3 {\n width: 70%; } } } }\n\n // Align bar to the top over the full width\n @include respond-to-width($smGridBreakpoint) {\n width: 100%;\n max-width: none;\n height: 60px;\n max-height: none;\n\n background: $pastelBlue;\n border-radius: 0;\n\n .burger-container {\n width: 60px;\n height: 60px;\n padding-bottom: 0;\n border-radius: 50%; }\n\n .burger-button {\n top: 10px;\n left: 10px;\n padding-bottom: 0;\n width: 40px;\n height: 40px; }\n\n .logo {\n margin: 10px auto;\n width: 124px;\n .landscape {\n display: block; }\n .portrait {\n display: none; } } } }\n\n/* Main navigation\n @mixin ========================================================================= */\n\n// Close navigation\n.close {\n display: none;\n @include position(fixed, 0 0 null null );\n z-index: 510;\n width: 60px;\n height: 60px;\n cursor: pointer;\n &:after {\n content: '';\n @include position(absolute, 25px 25px null null );\n @include sprite(-80px -40px);\n width: 10px;\n height: 10px; }\n\n .navigation-is-open & {\n display: block; } }\n\n/*\n * White plane on the right side\n *\n * 1. Don't use vw for it will include the scroll bar in its calculations\n */\nnav.navigation-main {\n position: fixed;\n top: 0;\n right: 0;\n z-index: 500;\n transform: translate3d(100%,0,0);\n\n width: 50% /* 1 */;\n height: 100vh;\n padding: 10vh column(1);\n\n background: #fff;\n color: $blue;\n\n\n\n // List\n ul {\n position: relative;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n height: 60vh;\n padding: 0;\n margin: 0;\n list-style: none; }\n\n li {\n\n a {\n text-decoration: none;\n @include transition(color 200ms ease-out); }\n\n &.active > a {\n text-decoration: line-through; }\n\n &:not(.active) a:hover {\n color: $brightBlue; }\n\n // Links in main navigation\n & > a {\n display: block;\n color: $blue;\n font-size: 1.4rem;\n font-weight: semibold();\n line-height: 1; }\n\n /* Services sub list\n @mixin ========================================================================= */\n\n // Links in services\n & > ul {\n display: inline-block;\n width: 50%;\n height: auto;\n margin-top: columnVw(.38333 / 2);\n\n li {\n padding-bottom: 10px; }\n\n a {\n display: block;\n color: $lightGrey;\n font-size: 1.1rem;\n font-weight: light(); } }\n\n &.offer {\n position: absolute;\n top: 0;\n right: 0;\n\n .button {\n font-size: 1rem;\n line-height: 45px; } } }\n\n // Lower part of the navigation\n footer {\n display: flex;\n flex-direction: column;\n justify-content: center;\n height: 30vh;\n\n .footer-content {\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: center; }\n\n svg.logo-web-branding-agency {\n width: column(2,5);\n fill: #D5DCE0; }\n\n .jobs {\n position: relative;\n display: inline-block;\n padding: 15px 20px;\n border-radius: 10px;\n border: 2px solid $blue;\n text-align: right;\n line-height: 1.2;\n color: #96A6B2;\n background-color: transparent;\n transition: background-color 0.2s;\n text-decoration: none;\n\n strong {\n color: $darkBodyText; }\n\n .jobs-amount {\n position: absolute;\n z-index: 3;\n right: -14px;\n top: -10px;\n width: 26px;\n height: 26px;\n border-radius: 14px;\n @include flex(center, center);\n color: white;\n font-size: 0.8rem;\n line-height: 1;\n font-weight: bold;\n\n\n &:after {\n content: '';\n position: absolute;\n z-index: -1;\n left: 0;\n top: 0;\n display: block;\n width: 100%;\n height: 100%;\n border-radius: 14px;\n background-color: $red;\n transform: scale3d(1,1,1);\n transition: all 0.2s; } }\n\n &:hover {\n background-color: rgba($blue, 0.05);\n\n .jobs-amount {\n &:after {\n transform: scale3d(1.15, 1.15, 1); } } } } }\n\n // Responsive navigation plane\n @include respond-to-width($lgGridBreakpoint) {\n width: column(8); }\n\n @include respond-to-width($mdGridBreakpoint) {\n width: column(10); }\n\n /* Mobile view\n @mixin ========================================================================= */\n\n @include respond-to-width($smGridBreakpoint) {\n padding: 0;\n width: column(12);\n height: 100vh;\n overflow-y: scroll;\n -webkit-overflow-scrolling: touch /* 1: to add smooth scrolling to fixed element */;\n\n // Main list\n ul {\n justify-content: flex-start;\n height: auto; }\n\n // Main items\n li:not(.offer) {\n a {\n display: block;\n padding: 20px;\n font-size: 1.1rem;\n border-bottom: 1px solid #eaeaea; }\n\n &:not(.active) a:hover {\n color: $blue; } }\n\n // List item containing offer button\n li.offer {\n position: relative;\n padding: 20px; }\n\n // Sub list\n li > ul {\n display: none; }\n\n // Footer\n footer {\n display: block;\n\n .footer-content {\n display: block;\n padding: 0 20px; }\n\n .jobs {\n padding: 20px;\n text-align: left; } }\n\n svg.logo-web-branding-agency {\n display: none; } } }\n\n/* Navigation overlay\n @mixin ========================================================================= */\n\n.navigation-overlay-container {\n position: fixed;\n z-index: 499;\n top: 0;\n left: 0;\n\n .drip {\n position: fixed;\n top: -100vh;\n left: 0;\n\n width: 100vw;\n height: 100vh;\n\n background: $blue /* Old browsers */;\n background: -moz-linear-gradient(top, $brightBlue 0%, $blue 100%) /* FF3.6-15 */;\n background: -webkit-linear-gradient(top, $brightBlue 0%,$blue 100%) /* Chrome10-25,Safari5.1-6 */;\n background: linear-gradient(to bottom, $brightBlue 0%,$blue 100%) /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */;\n opacity: .8; } }\n\n\n\n// WEBPACK FOOTER //\n// ./resources/assets/sass/site/resources/assets/sass/site/partials/_navigation.sass","// Grid with thumbs\n.post-grid {\n display: grid;\n align-items: center;\n justify-content: center;\n grid-template-columns: 1fr 1fr 1fr;\n grid-gap: 4vw;\n\n @include respond-to-width($mdGridBreakpoint) {\n grid-template-columns: 1fr 1fr; }\n\n @include respond-to-width($xsGridBreakpoint) {\n grid-template-columns: 1fr; }\n\n // Thumb\n .post-thumb {\n align-self: start;\n margin-bottom: column(.5,3);\n text-align: center;\n\n .link-to-post,\n .category {\n color: inherit;\n text-decoration: none; }\n\n .link-to-post {\n display: block; }\n\n figure {\n width: 100%;\n margin: 0;\n padding-bottom: 56%;\n background: #1D2433 center center;\n background-size: cover; }\n\n .title {\n display: block;\n margin: column(0.33333,3) auto 15px;\n color: $blue;\n font-size: 1.2rem;\n line-height: 1.4; }\n\n .category {\n display: inline-block;\n margin-top: 30px;\n color: rgba(100,100,100,0.3);\n font-size: 16px;\n font-weight: semibold();\n\n &:hover {\n color: $brightBlue; } } } }\n\n.post-grid__pagination {\n margin-bottom: 40px;\n text-align: center; }\n\n\n\n// WEBPACK FOOTER //\n// ./resources/assets/sass/site/resources/assets/sass/site/partials/posts/_postGrid.sass","$c-pagination-text-color: $pastelBlue;\n\n.c-pagination {\n\t@include flex(center, center);\n\tdisplay: inline-flex;\n\tlist-style: none;\n\t//margin-left: 0;\n\tpadding: 0;\n\tborder: 1px solid $c-pagination-text-color;\n\tbackground-color: white;\n\tborder-radius: 4px;\n}\n\n.c-pagination__item {\n\t@include flex(center, center);\n\tfont-size: 16px;\n\tline-height: 1;\n\n\t& + & {\n\t\tborder-left: 1px solid $c-pagination-text-color;\n\t}\n\n\t@include respond-to-width(450) {\n\t\t&:first-child,\n\t\t&:last-child {\n\t\t\tdisplay: none;\n\t\t}\n\n\t\t&:nth-child(2) {\n\t\t\tborder-left: none;\n\t\t}\n\t}\n\n\n}\n\n.c-pagination__text,\n.c-pagination__link,\n.c-pagination__prev,\n.c-pagination__next{\n\t@include flex(center, center);\n\tmin-width: 46px;\n\tmin-height: 46px;\n\tpadding: 11px 10px 9px;\n\n\t@include respond-to-width(680) {\n\t\tmin-width: 35px;\n\t\tmin-height: 35px;\n\t\tpadding: 6px 5px 4px;\n\t}\n}\n\n.c-pagination__text {\n\tcolor: rgba($c-pagination-text-color, 0.4)\n}\n\n.c-pagination__link {\n\tcolor: $c-pagination-text-color;\n\ttext-decoration: none;\n\ttransition: color 0.2s, background-color 0.2s;\n\n\t&:hover {\n\t\tcolor: scale-color($c-pagination-text-color, $lightness: -30%);\n\t\tbackground: palette(neutral);\n\t}\n\n\t&.is-active {\n\t\tbackground-color: rgba($c-pagination-text-color, 0.15);\n\t\tfont-weight: bold;\n\t\tcolor: $c-pagination-text-color;\n\t\tcursor: default;\n\t}\n}\n\n.c-pagination__prev,\n.c-pagination__next {\n\ttransition: color 0.2s;\n\ttransform: rotate(0.75turn);\n\n\t&.is-inactive {\n\t\tcolor: rgba($c-pagination-text-color, 0.4);\n\t\tbackground: transparent;\n\t}\n}\n\n.c-pagination__prev {\n\ttransform: rotate(0.25turn);\n}\n\n\n// WEBPACK FOOTER //\n// ./resources/assets/sass/site/resources/assets/sass/site/partials/posts/_pagination.scss","/* ==========================================================================\n Holder with mouse icon that tells the user he can scroll\n @mixin ========================================================================= */\n\n.scroll-hinter {\n\n position: absolute;\n z-index: 15;\n top: 0;\n left: column(9.5);\n width: column(1.5);\n height: 0;\n\n // Hide on small view\n @include respond-to-width($smGridBreakpoint) {\n display: none; }\n\n // Use this element to determine the height using padding\n .sizer {\n width: 100%;\n padding-bottom: 75%;\n background: $blue;\n border-top-left-radius: 500px;\n border-top-right-radius: 500px;\n @include transform(translateY(-99%)); }\n\n &.scroll-hinter--bottom {\n top: auto;\n bottom: 0;\n .sizer {\n @include transform(translateY(-100%)); } }\n\n // The mouse with the arrow\n .icon {\n @include position(absolute, 30% null null 38%);\n width: 24%;\n cursor: pointer;\n\n // Color the svg\n .mouse-body,\n .mouse-wheel,\n .arrow {\n fill: #fff; }\n\n .arrow {\n @include transition(transform 200ms ease-out); }\n\n &:hover {\n .arrow {\n @include transform(translate3D(0,30%,0)); } } }\n\n\n .mouse-wheel {\n animation: moveUpDown 1s ease-out infinite; } }\n\n// Up and down animation for mouse wheel\n@keyframes moveUpDown {\n 0% {\n @include transform(translate3D(0,0,0)); }\n 50% {\n @include transform(translate3D(0,5%,0)); }\n 100% {\n @include transform(translate3D(0,0,0)); } }\n\n\n\n// WEBPACK FOOTER //\n// ./resources/assets/sass/site/resources/assets/sass/site/partials/_scrollHinter.sass","/* ==========================================================================\n Team portraits\n @mixin ========================================================================= */\n\n.grid-layout.about-our-team {\n display: grid;\n grid-template-columns: 1fr 1fr 1fr 1fr;\n max-width: $gridMaxWidth;\n margin: 0 auto;\n\n .text {\n grid-area: 1 / 1 / auto / span 2; }\n\n .text-block {\n padding: column(1,6);\n padding-top: columnVw(.5); }\n\n // Switch to 3-column layout\n @include respond-to-width($mdGridBreakpoint) {\n grid-template-columns: 1fr 1fr 1fr;\n .text-block {\n padding: column(.5,8); } }\n\n // Full screen text\n @include respond-to-width($smGridBreakpoint) {\n .text {\n grid-area: 1 / 1 / auto / span 3; }\n .text-block {\n padding: column(1,12); } }\n\n // Switch to 2-column layout\n @include respond-to-width(640) {\n grid-template-columns: 1fr 1fr;\n .text {\n grid-area: 1 / 1 / auto / span 2; } }\n\n @include respond-to-width($xsGridBreakpoint) {\n .text-block {\n padding: $mobileTopSpace $mobileAsideSpace $mobileBottomSpace; }\n\n @supports not (display: grid) {\n @include clearfix; } }\n\n // Ie fix\n html.ie & {\n @include clearfix; } }\n\n/**\n * A team member portrait\n *\n * 1. Base the margin on the view width\n * so you get equal spacing vertically and horizontally\n */\n.team-portrait {\n position: relative;\n overflow: hidden;\n\n /**\n * Photo\n */\n .portrait {\n position: relative;\n overflow: hidden;\n padding-bottom: 138.889%;\n\n img {\n position: absolute;\n top: 0;\n left: 0;\n max-width: 100%;\n @include transform(translateY(100%));\n opacity: 0; } }\n\n /**\n * Name and function\n */\n .caption {\n position: relative;\n z-index: 10;\n display: flex;\n flex-direction: column;\n justify-content: center;\n height: 120px;\n padding-left: column(.5,3);\n margin-bottom: column(1,3);\n\n background: $black;\n color: #fff;\n line-height: 1.22222;\n\n .name, .function {\n display: block;\n font-size: .9rem; }\n\n .name {\n font-weight: semibold(); }\n\n .function {\n color: #6C6C80; } }\n\n // Ie fix\n html.ie & {\n width: 33%;\n float: left;\n\n .portrait {\n padding-bottom: 130%; } }\n\n @include respond-to-width($xsGridBreakpoint) {\n\n .caption {\n margin-bottom: 0;\n height: 80px; }\n\n // Fallback when grid not supported\n @supports not (display: grid) {\n\n width: 50%;\n float: left;\n\n .portrait {\n padding-bottom: 130%; }\n\n &.job-offer {\n width: 100%; } } } }\n\n\n\n// WEBPACK FOOTER //\n// ./resources/assets/sass/site/resources/assets/sass/site/partials/_team.sass","// The clearfix mixin provides an easy way to contain floats\n//\n// Example usage:\n// .wrapper {\n// @include clearfix;\n// }\n\n@mixin clearfix {\n &::after {\n clear: both;\n content: \"\";\n display: table;\n }\n}\n\n// Acknowledgements:\n// Thierry Koblentz, cssmojo\n// http://goo.gl/AQWvyH\n\n\n\n// WEBPACK FOOTER //\n// ./resources/assets/sass/site/resources/assets/sass/global/bourbon/addons/_clearfix.scss",".c-notification {\n text-align: center;\n}\n\n.c-notification--inline-top {\n margin-top: 40px;\n}\n\n.c-notification--inline-bottom {\n margin-bottom: 40px;\n}\n\n.c-notification--static {\n position: fixed;\n z-index: 20;\n bottom: 5px;\n left: 0;\n width: 100%;\n}\n\n.c-notification__main {\n display: inline-block;\n //background-color: $brightLightBlue;\n background-color: #0047FF;\n border: 1px solid $brightBlue;\n padding: 12px 20px 10px;\n border-radius: 4px;\n\n .c-notification--static & {\n width: 84%;\n margin-left: auto;\n margin-right: auto;\n\n @include respond-to-width(625) {\n width: calc(100% - 10px);\n }\n }\n}\n\n.c-notification__text {\n margin: 0 !important;\n color: $brightBlue;\n font-size: 16px !important;\n line-height: 1.2 !important;\n font-weight: 500 !important;\n\n @include respond-to-width(550) {\n font-size: 15px !important;\n }\n}\n\n\n// WEBPACK FOOTER //\n// ./resources/assets/sass/site/resources/assets/sass/site/partials/_notification.scss",".c-video {\n position: relative;\n height: 0;\n width: 100%;\n padding-bottom: 56.25%; // Aspect Ratio: 16:9\n background-color: palette(neutral, 200);\n}\n\n\n.c-video__iframe {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n}\n\n\n// WEBPACK FOOTER //\n// ./resources/assets/sass/site/resources/assets/sass/site/partials/_video.scss","/* ==========================================================================\n Easily change the order of all the sections on a page\n @mixin ========================================================================= */\n\n.section-sorter {\n display: flex;\n flex-direction: column;\n\n .video {\n order: 1; }\n .intro-section {\n order: 2; }\n\n @include respond-to-width($smGridBreakpoint) {\n\n .intro-section {\n order: 1; }\n .video {\n order: 2; } } }\n\n\n\n// WEBPACK FOOTER //\n// ./resources/assets/sass/site/resources/assets/sass/site/pages/_sectionSorter.sass",".response-40x {\n header.main .intro .arrow {\n display: none; } }\n\n\n\n// WEBPACK FOOTER //\n// ./resources/assets/sass/site/resources/assets/sass/site/pages/_40x.sass","/* ==========================================================================\n Specific CSS for the about page\n @mixin ========================================================================= */\n\n.about {\n\n // Remove nowrap\n #team-grid-md {\n white-space: normal; }\n\n #services-list {\n @include respond-to-width($smGridBreakpoint) {\n margin-left: 0; } }\n\n .team-portrait.job-offer {\n display: block;\n text-decoration: none;\n\n .portrait,\n .caption {\n background: #cad2db; }\n\n .content {\n @include position(absolute, 0 null null 0);\n padding: 60px;\n font-size: .9rem;\n color: #fff;\n line-height: 1.4; }\n\n .title {\n display: block;\n margin: 0 0 60px;\n\n color: #fff;\n font-size: 3rem;\n font-weight: black();\n line-height: 0.875;\n text-transform: uppercase; }\n\n .caption {\n padding-left: 60px;\n padding-right: 60px; }\n .button {\n max-width: none;\n min-width: 0; }\n\n &:hover {\n .button {\n border-color: $blue;\n color: #fff;\n background: $blue; } } }\n\n\n @include respond-to-width($smGridBreakpoint) {\n // Responsive header intro\n header.main .intro {\n width: column(10); }\n\n .why-us {\n .text-block {\n padding: column(1); } }\n\n .team-portrait.job-offer {\n grid-area: auto / auto / auto / span 2;\n .title {\n margin-bottom: 10px; }\n .portrait {\n padding-bottom: 69.4445%; } } } // original divide by 2\n\n @include respond-to-width($smGridBreakpoint) {\n // Remove margin below call to action block\n .call-to-action-block {\n margin-bottom: 0; }\n\n // Responsive image grid\n .image-grid {\n &.with-gaps {\n grid-gap: 0; } } }\n\n @include respond-to-width($xsGridBreakpoint) {\n header.main {\n margin-bottom: 0;\n .intro {\n width: 100%;\n padding: $mobileTopSpace $mobileAsideSpace $mobileBottomSpace; } }\n\n .team-portrait.job-offer {\n .content {\n padding: 20px; }\n .caption {\n padding: 0 20px;\n height: 100px;\n justify-content: flex-start; } } } }\n\n\n\n// WEBPACK FOOTER //\n// ./resources/assets/sass/site/resources/assets/sass/site/pages/_about.sass",".alaaf {\n .call-to-action-block {\n h2 {\n font-size: 3rem; } }\n\n .puzzle {\n margin-bottom: column(1,10); } }\n\n\n\n// WEBPACK FOOTER //\n// ./resources/assets/sass/site/resources/assets/sass/site/pages/_alaaf.sass","/* ==========================================================================\n Mixin used to give the cases their custom colors\n @mixin ========================================================================= */\n\n@mixin theme($list) {\n\n $name: nth($list, 1);\n $headerDrips: nth($list, 2);\n $intro: nth($list, 3);\n $navigation: nth($list, 4);\n $testimonial: nth($list, 5);\n $featured: nth($list, 6);\n\n $progressLighten: 10;\n\n @if ( length($list) == 7 ) {\n $progressLighten: nth($list, 7); }\n\n $websiteColor: $headerDrips;\n @if ( length($list) == 8 ) {\n $websiteColor: nth($list, 8); }\n\n\n .case.#{$name} {\n\n // Navigation drip in the corner\n .navigation-drip {\n background: $headerDrips;\n .burger-container svg {\n fill: $headerDrips; } }\n\n // Header drips background\n header.main {\n background: $headerDrips;\n .header-drip {\n background: $headerDrips; } }\n\n .scroll-hinter .sizer {\n background: $intro; }\n\n // Intro background\n .intro-section {\n background: $intro; }\n\n // Navigation gradient\n .dynamic {\n aside {\n background: linear-gradient(to bottom, lighten($navigation, $progressLighten) 0%,$navigation 100%); } }\n\n // Testimonial\n // 1. Use background-color instead of background,\n // because this element also has a background-image\n .testimonial {\n background-color: $testimonial; }\n\n\n #full-size-site-scroll {\n background: $websiteColor; }\n\n .scrollable-website {\n background: $websiteColor; } }\n\n // Testimonials on references page\n .testimonial-container.#{$name} {\n background-color: $testimonial; }\n\n .featured-cases .featured-case.#{$name} {\n .color-overlay {\n background-color: $featured; } } }\n\n\n\n// WEBPACK FOOTER //\n// ./resources/assets/sass/site/resources/assets/sass/site/mixins/_theme.sass","/* ==========================================================================\n Specific CSS for the cases page\n @mixin ========================================================================= */\n\n/* Case themes\n @mixin ========================================================================= */\n\n// Contains +theme mixin\n@import \"../mixins/theme\";\n// Contains themes list\n@import \"../caseThemes/config\";\n// Add styles to css\n@each $theme in $themes {\n @include theme($theme); }\n\n/* Other case styles\n @mixin ========================================================================= */\n\n.case {\n\n @import '../partials/cases/caseHeader';\n\n header.main {\n z-index: 3; }\n\n // Intro with small description of our work\n .intro-section {\n margin-bottom: 0;\n\n .intro {\n padding: column(1) 0 column(2);\n color: #fff; }\n\n p {\n margin: 0;\n font-size: 2rem;\n font-weight: medium();\n line-height: 1.33333; }\n\n // 1. correction for perfect alignment\n // 2. for equal space above and below the breadcrumb\n .breadcrumb {\n display: block;\n margin-top: -0.5em /* 1. */;\n margin-bottom: columnVw(.65) /* 1 */;\n\n color: rgba(255,255,255,.5);\n font-size: .8rem;\n font-weight: bold();\n letter-spacing: .15em;\n text-transform: uppercase;\n white-space: nowrap; }\n\n @include respond-to-width($lgGridBreakpoint) {\n .intro p {\n font-size: 1.8rem; } }\n\n @include respond-to-width($mdGridBreakpoint) {\n .intro {\n width: column(12);\n p {\n font-size: 1.6rem; } } }\n\n @include respond-to-width($smGridBreakpoint) {\n .intro p {\n font-size: 1.3rem; } } }\n\n\n /* Dynamic content section\n @mixin ========================================================================= */\n\n .dynamic {\n position: relative;\n display: flex;\n\n /* Progress bar\n @mixin ========================================================================= */\n\n aside.progress-container {\n @include position(absolute, 0 null null 0);\n max-width: $gridMaxWidth / 14;\n height: 100%;\n z-index: 10;\n\n .fixable {\n @include position(absolute, 0 null null 0);\n height: 100vh;\n width: 100%;\n\n &.fixed {\n position: fixed;\n width: column(1,14);\n max-width: $gridMaxWidth / 14; }\n &.sunk {\n top: auto;\n bottom: 0; } }\n\n .progress {\n @include position(absolute, 33vh null null column(.5,1));\n height: 60vh;\n width: column(.5,1); }\n\n .label {\n cursor: pointer; }\n\n // Progress line background\n .line {\n @include position(absolute, null 0 0 null);\n overflow: hidden;\n width: 100%;\n height: 1px;\n background: rgba(255,255,255,.25);\n\n // Progress line, use scale to show progress\n span {\n @include position(absolute, 0 null null 0);\n display: block;\n width: 100%;\n height: 100%;\n background: #fff;\n transform-origin: 100% 0;\n @include transform(scaleX(0)); } }\n\n // Rotated list with sections\n ul {\n @include position(absolute,null null 0 0);\n\n display: flex;\n justify-content: flex-end;\n\n width: 60vh;\n padding: 0;\n margin: 0;\n transform-origin: 0 100%;\n @include transform(rotate(-90deg));\n\n list-style: none; }\n\n // Section label\n li {\n position: relative;\n color: #fff;\n flex-grow: 1;\n font-size: 1.5vh;\n text-align: right; }\n\n @include respond-to-width($mdGridBreakpoint) {\n display: none; } }\n\n /* Content section\n @mixin ========================================================================= */\n\n .dynamic-content {\n width: 100%;\n font-size: 0;\n\n // Containers\n .title-container,\n .content-container {\n position: relative;\n vertical-align: top;\n display: inline-block;\n padding: column(1) 0;\n font-size: $baseFontSize;\n white-space: normal; }\n\n .title-container {\n width: column(7);\n padding-left: column(2); }\n\n .content-container {\n font-size: $baseFontSize;\n width: column(5);\n\n // 1. Correction for alignment\n p:first-child {\n margin-top: -.45em; }\n\n .button {\n margin-top: 1rem; } }\n\n .image-container {\n position: relative;\n overflow: hidden; }\n\n .spacer {\n width: 100%;\n height: 0;\n margin-bottom: column(1); }\n\n @include respond-to-width($xlGridBreakpoint) {\n .spacer:not(.keep) {\n margin-bottom: 0; } }\n\n @include respond-to-width($mdGridBreakpoint) {\n .title-container {\n padding-left: column(1); }\n .content-container {\n width: column(6); } }\n\n @include respond-to-width($smGridBreakpoint) {\n .title-container {\n width: column(12);\n margin-left: column(1);\n padding-left: 0;\n padding-bottom: 0; }\n .content-container {\n margin-left: column(1);\n padding-top: 0;\n width: column(12); }\n .image-grid {\n grid-template-columns: 1fr; } }\n\n @include respond-to-width($xsGridBreakpoint) {\n .col-10 {\n width: 100%; }\n .keep.spacer {\n display: none; } } } }\n\n /* Case closing image\n @mixin ========================================================================= */\n\n .closing-image {\n img {\n width: 100%; } }\n\n\n /* Case testimonial\n @mixin ========================================================================= */\n\n // Testimonial\n .testimonial {\n min-height: 800px;\n padding: columnVw(1) 0;\n margin-bottom: columnVw(1);\n\n background-repeat: no-repeat;\n background-size: contain;\n background-position-y: bottom;\n background-position-x: 20%;\n color: #fff;\n\n .story-container {\n width: column(5);\n margin-left: column(7);\n white-space: normal; }\n\n .description {\n font-size: $baseFontSize; }\n\n // Long testimonials\n &.story {\n font-size: .9rem;\n\n h2 {\n color: rgba(255,255,255,.7);\n font-size: 3.2rem;\n font-weight: light();\n line-height: 1.15625;\n\n .name {\n display: block;\n color: #fff;\n font-weight: book(); } } }\n\n @include respond-to-width($mdGridBreakpoint) {\n .story-container {\n width: column(6);\n\n h2 {\n font-size: 2rem; } } }\n\n @include respond-to-width($smGridBreakpoint) {\n background-size: auto 400px;\n background-position: center bottom;\n padding-bottom: 400px;\n min-height: 0;\n\n .story-container {\n width: column(12);\n margin-left: column(1); } } }\n\n /* Case pagination\n @mixin ========================================================================= */\n\n .cases-pagination {\n .flex-col {\n overflow: hidden; } }\n\n /* Other cases\n @mixin ========================================================================= */\n\n .other-cases {\n margin-bottom: column(1); }\n\n .featured-cases {\n .featured-case:first-child {\n .arrow {\n @include transform(rotate(180deg) translateX(-10px)); } } } }\n\n\n.case.netwerkBrabant {\n header.main .hero-text-layout .hero-text-flex-column {\n height: 80%;\n max-height: 87vh; } }\n\n.case.blijeGasten {\n\n .tags .tag {\n border-color: rgba(#151A24, 0.5); }\n\n header.main .hero-text-layout {\n color: #151A24; }\n\n .intro-section {\n .breadcrumb {\n color: rgba(#151A24, 0.5); }\n .intro {\n color: #151A24; } }\n\n .scroll-hinter {\n .icon {\n .mouse-body,\n .mouse-wheel,\n .arrow {\n fill: #151A24; } } } }\n\n\n\n// WEBPACK FOOTER //\n// ./resources/assets/sass/site/resources/assets/sass/site/pages/_case.sass","// Custom header properties for the case header with image\nheader.main {\n margin-bottom: 0;\n padding: column(.5) column(.5) 0 column(.5);\n\n // Hide on smallest view for it has lost its value\n @include respond-to-width($xsGridBreakpoint) {\n display: none; }\n\n .scroll-hinter {\n top: auto;\n bottom: 0; }\n\n // Control min and max height\n .height-controller {\n position: relative;\n overflow: hidden;\n max-height: 87vh;\n min-height: 600px;\n\n @include respond-to-width($mdGridBreakpoint) {\n max-height: none;\n min-height: 0; } }\n\n // Container to determine the ratio of the header\n .ratio-controller {\n position: relative;\n width: 100%;\n height: 0;\n padding-bottom: 56.25%;\n\n @include respond-to-width-beyond(1980) {\n padding-bottom: 52%; }\n\n // Inner wrapper so we can add content inside\n .wrapper {\n @include position(absolute, 0 null null 0);\n width: 100%;\n height: 100%; }\n\n // Background image\n img {\n @include position(absolute, 0 0 null null);\n width: 100%; } }\n\n // Container hero layout\n .hero-text-layout {\n position: relative;\n z-index: 10;\n height: 100%;\n color: #fff;\n\n // Flex box containing title and tag cloud\n .hero-text-flex-column {\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n margin: 0 auto;\n width: column(10,13);\n height: 45%;\n\n @include respond-to-width-beyond(1800) {\n width: column(10); }\n @include respond-to-width-beyond(1980) {\n width: column(14); }\n @include respond-to-width($mdGridBreakpoint) {\n width: column(12,13); } }\n\n // Large title\n .title {\n margin-top: column(1);\n font-size: 6rem;\n font-weight: bold();\n line-height: 1; } }\n\n .hero-text-double-row {\n .title {\n margin-bottom: 24px; }\n\n // Arrow pointing down\n .arrow {\n display: block;\n width: 14px;\n height: 32px;\n\n @include sprite(0 -20px);\n cursor: pointer; } }\n\n // When max padding is reached\n @include respond-to-width-beyond(1680) {\n padding: 60px 60px 0; }\n\n @include respond-to-width($mdGridBreakpoint) {\n .hero-text-layout .title {\n font-size: 4rem;\n margin-bottom: 30px; } }\n @include respond-to-width($smGridBreakpoint) {\n .hero-text-layout .title {\n font-size: 3rem; } }\n @include respond-to-width($xsGridBreakpoint) {\n .hero-text-layout .title {\n font-size: 1rem; } } }\n\n\n\n// WEBPACK FOOTER //\n// ./resources/assets/sass/site/resources/assets/sass/site/partials/cases/_caseHeader.sass","/* ==========================================================================\n Specific CSS for the contact page\n @mixin ========================================================================= */\n\n.contact {\n\n /* Basic structure\n @mixin ========================================================================= */\n\n header.main {\n margin-bottom: column(1);\n padding-bottom: column(1);\n .intro {\n padding-bottom: column(1); }\n\n // Phone\n .phone-holder {\n\n .phone {\n display: block;\n color: #fff;\n text-decoration: none;\n font-size: 1.4rem;\n margin-bottom: column(1); } }\n\n // Row with details and account managers\n .company-details,\n .account-managers-holder {\n color: #fff;\n a {\n color: $brightBlue;\n text-decoration: none; } }\n\n .flexable-layout {\n flex-direction: row;\n align-items: flex-end;\n margin: 0 auto;\n padding-bottom: column(.5);\n width: column(10); }\n\n // Responsive layout\n @include respond-to-width($mdGridBreakpoint) {\n .phone-holder,\n .flexable-layout {\n width: column(11); }\n\n .flexable-layout {\n flex-direction: column;\n align-items: flex-start; }\n\n .company-details {\n order: 2;\n width: 100%; }\n\n .account-managers-holder {\n order: 1;\n margin-bottom: column(1);\n width: 100%; } }\n\n @include respond-to-width($smGridBreakpoint) {\n .account-managers-holder {\n padding-bottom: column(1);\n border-bottom: 1px solid rgba(255,255,255,.5); } } }\n\n /* Company details\n @mixin ========================================================================= */\n .company-details {\n width: 50%; }\n\n .account-managers-holder {\n width: 50%; }\n\n /* Social media\n @mixin ========================================================================= */\n\n .sm-icon {\n display: inline-block;\n height: 22px;\n margin-right: 10px;\n @include sprite(0 -60px);\n\n &.facebook {\n width: 12px; }\n\n &.linkedin {\n width: 22px;\n background-position: -20px -60px;\n @include transform(translateY(-1px)); }\n\n &.behance {\n width: 30px;\n background-position: -100px -57px; }\n\n &.instagram {\n width: 22px;\n background-position: -75px -60px; } }\n\n\n /* Form\n @mixin ========================================================================= */\n\n .form-maps-holder {\n @include respond-to-width($mdGridBreakpoint) {\n width: column(11); } }\n\n .form-holder {\n padding-bottom: column(1,10);\n\n @include respond-to-width($mdGridBreakpoint) {\n display: block;\n margin: 0 auto;\n width: column(8,11); }\n @include respond-to-width($smGridBreakpoint) {\n width: column(11,11); } }\n\n /* Maps\n @mixin ========================================================================= */\n\n .maps-holder {\n margin-left: column(1,10);\n @include respond-to-width($mdGridBreakpoint) {\n display: block;\n margin: 0 auto;\n width: column(8,10); }\n @include respond-to-width($smGridBreakpoint) {\n width: column(10,10); } }\n\n .map-square {\n position: relative;\n width: 100%;\n padding-bottom: 100%;\n margin-bottom: column(1,5); }\n\n .map-mask {\n @include position(absolute, 0 null null 0);\n width: 100%;\n height: 100%;\n overflow: hidden; }\n\n #map {\n width: 100%;\n height: 110%; } }\n\n\n\n// WEBPACK FOOTER //\n// ./resources/assets/sass/site/resources/assets/sass/site/pages/_contact.sass","/* ==========================================================================\n Specific CSS for the home page\n @mixin ========================================================================= */\n\n// Intro with small description of our work\n.intro-section {\n position: relative;\n z-index: 2;\n background: $blue;\n color: #fff;\n\n .intro {\n padding: column(1.5) 0 column(1.5); }\n\n p {\n margin: 0;\n font-size: 2rem;\n font-weight: medium();\n line-height: 1.33333; }\n\n // 1. correction for perfect alignment\n // 2. for equal space above and below the breadcrumb\n .breadcrumb {\n display: block;\n margin-top: -0.5em /* 1. */;\n margin-bottom: columnVw(.65) /* 1 */;\n\n color: rgba(255,255,255,.5);\n font-size: .8rem;\n font-weight: bold();\n letter-spacing: .15em;\n text-transform: uppercase;\n white-space: nowrap; }\n\n @include respond-to-width(1681) {\n margin-bottom: 0; }\n\n // Responsiveness for home header\n @include respond-to-width($lgGridBreakpoint) {\n\n .intro p {\n font-size: 1.8rem; } }\n\n @include respond-to-width($mdGridBreakpoint) {\n .intro {\n width: column(11);\n p {\n font-size: 1.6rem; } } }\n\n // Small view\n @include respond-to-width($smGridBreakpoint) {\n .intro {\n width: column(10);\n p {\n font-size: 1.3rem; } } }\n // Mobile view\n @include respond-to-width($xsGridBreakpoint) {\n .intro-section {\n\n // Hide drips\n .header-drip {\n display: none; }\n\n // Re-align intro\n .intro {\n padding: $mobileTopSpace $mobileAsideSpace $mobileBottomSpace;\n width: 100%;\n\n p {\n font-size: 1.1rem;\n line-height: 1.3; } } } } }\n\n.home {\n\n // Featured cases on home\n .featured-cases {\n max-width: $gridMaxWidth;\n margin: 0 auto; }\n\n .about-our-company {\n .text-block {\n padding-top: column(2);\n padding-bottom: column(2); } }\n\n .featured-testimonials {\n display: flex;\n flex-wrap: wrap; }\n\n // Award\n .award-container {\n display: flex;\n flex-wrap: wrap;\n .award-logo,\n .award-text {\n width: 50%; }\n .award-text {\n display: table;\n padding: column(1,8) 0; }\n .award-logo {\n display: flex;\n align-items: center;\n justify-content: flex-start;\n img {\n max-width: 300px; } }\n\n @include respond-to-width($mdGridBreakpoint) {\n width: column(11); }\n @include respond-to-width($smGridBreakpoint) {\n .award-logo,\n .award-text {\n width: 100%; }\n .award-text {\n order: 1; }\n .award-logo {\n order: 2;\n justify-content: center;\n margin-bottom: column(1,11); } }\n @include respond-to-width($smGridBreakpoint) {\n width: 100%;\n .award-text {\n padding: $mobileTopSpace $mobileAsideSpace; } } }\n\n\n\n // Intro about our team\n .about-our-team {\n\n img {\n width: 50%;\n max-height: 600px;\n object-fit: cover; }\n\n .text-block {\n width: column(6,7);\n padding: column(1,7); } }\n\n @include respond-to-width-beyond($xlGridBreakpoint) {\n .about-our-team .flexable-layout {\n padding: column(1) 0; } }\n\n @include respond-to-width($mdGridBreakpoint) {\n .about-our-company .column-container {\n white-space: nowrap; } }\n\n // Small view\n @include respond-to-width($smGridBreakpoint) {\n .about-our-company .column-container {\n white-space: normal; }\n\n // Re-align about-our-company\n .about-our-company {\n .text-block {\n padding-right: column(1,12);\n padding-left: column(1,12); }\n .col-12 > .col-6 {\n width: 100%; }\n .col-12 :nth-child(2) {\n padding-top: 0; } }\n\n // Re-align about-our-team\n // 1. 16:9 ratio\n .about-our-team {\n .flexable-layout {\n flex-direction: column;\n .flex-col,\n .text-block {\n width: 100%; }\n img {\n width: 100%;\n height: 56.25vw /* 1 */; } } }\n\n // About our company\n .about-our-company {\n .column-container {\n width: 100%; }\n .text-block {\n padding: $mobileTopSpace $mobileAsideSpace $mobileBottomSpace;\n border-bottom: 1px solid $borderColor;\n &:nth-child(2) {\n padding-top: $mobileTopSpace; } } }\n\n // About our team\n .about-our-team {\n .flexable-layout {\n .flex-col {\n order: 1; }\n img {\n order: 2; } }\n .text-block {\n padding: $mobileTopSpace $mobileAsideSpace $mobileBottomSpace; } } } }\n\n/**\n * video header\n *\n * 1. Set up the height on 90% of viewport for now, maybe adjust later\n */\nsection.video {\n position: relative;\n overflow: hidden;\n max-height: 95vh;\n min-height: 600px;\n\n @include respond-to-width($mdGridBreakpoint) {\n max-height: none;\n min-height: 0; }\n\n .video-container {\n position: relative;\n padding-bottom: 56.3% /* 16:9 */;\n background: #1d2433; }\n\n iframe, .video-overlay {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%; }\n\n .overlay {\n @include position(absolute, null null 0 0);\n width: 100%;\n height: 100%;\n } //box-shadow: inset 0px -600px 400px -300px rgba(0, 0, 0, 0.3)\n\n .contained-layout {\n display: flex;\n height: 100%; }\n\n .logo-web-branding-agency {\n @include position(absolute, null null 0 0);\n fill: #fff;\n padding-bottom: column(1,5); }\n\n // Align logo with the intro text\n @include respond-to-width($mdGridBreakpoint) {\n .logo-holder {\n margin-left: column(1.5); } }\n\n @include respond-to-width($smGridBreakpoint) {\n .logo-holder {\n display: none; }\n .overlay {\n display: none; } } }\n\n#ytplayer {\n opacity: 0; }\n\n\n\n// WEBPACK FOOTER //\n// ./resources/assets/sass/site/resources/assets/sass/site/pages/_home.sass","/* ==========================================================================\n Specific CSS for the jobs page\n @mixin ========================================================================= */\n\n.ip {\n\n header.main {\n padding-bottom: column(1);\n margin-bottom: 0;\n\n .intro {\n font-size: 1rem;\n padding-bottom: 0;\n margin-bottom: 60px; } }\n\n .ip-address {\n color: $brightBlue; }\n\n input[name=\"name\"],\n input[name=\"company\"] {\n margin-bottom: 60px;\n max-width: 300px;\n color: #fff;\n\n // Doesn't seem to work? todo: fix\n &::placeholder,\n &::-webkit-input-placeholder,\n &::-moz-placeholder,\n &:-ms-input-placeholder,\n &:-moz-placeholder {\n color: #B2B2FD; } }\n\n label {\n color: #ffffff; } }\n\n\n\n// WEBPACK FOOTER //\n// ./resources/assets/sass/site/resources/assets/sass/site/pages/_ip.sass","/* ==========================================================================\n Specific CSS for the jobs page\n @mixin ========================================================================= */\n\n// TODO: Refactor the whole page\n.jobs {\n\n // Remove margin on the header\n header.main {\n margin-bottom: 0;\n\n .intro {\n padding: column(2) 0 column(1); }\n\n .job-list {\n margin-top: column(1,8); } }\n\n .our-offer {\n margin-bottom: column(1); }\n\n .image-holder {\n margin-bottom: column(1); }\n\n @include respond-to-width($mdGridBreakpoint) {\n .summary,\n .job {\n .text-block {\n display: block;\n width: column(10,12);\n margin: 0 auto;\n padding-left: 0;\n padding-right: 0;\n\n &:first-child {\n padding-bottom: 1em; }\n &:nth-child(2) {\n padding-top: 0; }\n .h2-spacer {\n display: none; } } }\n .summary {\n margin-bottom: 80px; }\n .our-offer {\n display: block;\n margin: 0 auto;\n width: column(10,14); } }\n\n @include respond-to-width($smGridBreakpoint) {\n .summary,\n .job {\n .text-block {\n width: 100%; } }\n\n .summary {\n .image-holder {\n width: 100%; } }\n .our-offer {\n width: column(12,14); } }\n\n @include respond-to-width($xsGridBreakpoint) {\n .our-offer {\n width: 100%;\n padding: 0 $mobileAsideSpace; }\n .summary,\n .job {\n padding: 0 $mobileAsideSpace; } } }\n\n// Job detail page\n//QnD todo: refactor\n.job {\n header.main {\n .intro {\n width: column(12, 14);\n max-width: 740px;\n margin: auto;\n padding: column(2) 0 column(.5);\n\n h1 {\n margin: 0;\n color: #fff;\n font-size: 2rem;\n font-weight: medium();\n line-height: 1.25;\n text-transform: none; } } }\n\n .job-description {\n width: column(12, 14);\n max-width: 740px;\n margin: 0 auto column(1);\n font-size: 20px;\n white-space: normal;\n\n > * + * {\n margin-top: 40px; } }\n\n .job-intro {\n color: $darkBodyText;\n font-size: 1.22222rem;\n line-height: 1.54545; }\n\n .back-to-grid {\n margin-bottom: column(1,6); }\n\n //.call-to-action-block\n // margin-bottom: 0\n // line-height: 1.4\n //\n // .flex-col\n // &:first-child\n // margin-right: column(1,8)\n // width: column(3,8)\n // h3\n // color: #fff\n //\n // ol\n // margin-bottom: 0\n\n .summary {\n .text-block.top-indent .h2-spacer {\n margin-top: -27px; }\n .image-holder {\n margin-bottom: column(1); } }\n\n .back-to-grid-holder {\n text-align: center; }\n\n @include respond-to-width($lgGridBreakpoint) {\n //.call-to-action-block\n // width: 100%\n .summary {\n .text-block {\n display: block;\n width: 100%;\n &:first-child {\n padding-bottom: 0; }\n &.top-indent .h2-spacer {\n display: none; } }\n .image-holder {\n width: 100%; } }\n @include respond-to-width($smGridBreakpoint) {\n header.main .intro,\n .job-description .col-6 {\n line-height: 1.45; }\n //.call-to-action-block h2\n } } // display: none\n\n @include respond-to-width($xsGridBreakpoint) {\n .summary {\n .text-block {\n padding-left: column(1, 14);\n padding-right: column(1, 14); } } } }\n\n\n\n// WEBPACK FOOTER //\n// ./resources/assets/sass/site/resources/assets/sass/site/pages/_jobs.sass",".c-header {\n position: relative; }\n\n\n.c-header__img {\n position: relative;\n z-index: 0;\n width: 100%;\n object-fit: cover; }\n\n\n.c-header__title {\n position: absolute;\n z-index: 1;\n top: 50%;\n left: 50%;\n transform: translateY(-50%) translateX(-50%);\n font-size: calc(4vmin + 40px);\n margin: 0;\n color: white;\n text-shadow: 0 1px 5px rgba(0,0,0,0.4); }\n\n\n\n.c-intro {\n padding: column(1);\n background-color: #0E121A;\n color: white;\n text-align: center; }\n\n\n.c-intro__main {\n margin: 0 auto;\n max-width: 576px;\n font-size: 1.6rem;\n font-weight: 600;\n\n br {\n @include respond-to-width(576) {\n display: none; } } }\n\n\n.c-intro__appendix {\n margin: 32px auto 0;\n max-width: 576px;\n color: #808080;\n font-size: 0.8rem;\n text-transform: uppercase;\n font-weight: bold; }\n\n\n.rwd-break {\n display: block;\n\n @include respond-to-width(576) {\n display: none; } }\n\n\n.c-subsection {\n position: relative;\n width: 100%;\n margin: auto;\n padding: column(2) column(1);\n\n @include respond-to-width-beyond($smGridBreakpoint) {\n padding: column(1); }\n\n @include respond-to-width-beyond($lgGridBreakpoint) {\n width: column(10, 12);\n padding: column(1) 0; } }\n\n.c-subsection--full-width {\n width: 100%; }\n\n.c-subheader {\n margin: 0;\n font-size: calc(6vmin + 20px);\n font-weight: 700;\n color: #0E121A; }\n\n.c-subheader--service {\n font-size: 36px;\n text-align: center; }\n\n.c-subheader--light {\n color: #fff; }\n\n\n.c-benefits {\n display: flex;\n flex-wrap: wrap;\n flex-direction: column;\n list-style: none;\n margin: column(1) 0 0;\n padding-left: 0;\n white-space: normal;\n\n @include respond-to-width-beyond(900) {\n flex-direction: row;\n justify-content: space-between; } }\n\n\n.c-benefits__item {\n display: flex;\n border-top: 1px solid #0E121A;\n padding: 25px;\n color: #0E121A;\n font-size: 1.2rem;\n font-weight: 600;\n\n &::before {\n flex: 0 0 24px;\n content: '';\n display: block;\n background-image: url(/img/icons/check.svg);\n width: 24px;\n height: 18px;\n margin-top: 10px; }\n\n @include respond-to-width-beyond(900) {\n width: calc(40%); }\n\n @include respond-to-width-beyond($lgGridBreakpoint) {\n width: calc(25% + 1px); } }\n\n\n.c-benefits__text {\n flex: 1;\n margin-left: 16px; }\n\n\n.c-duo-picture {\n @include respond-to-width-beyond(576) {\n width: column(10, 12);\n margin: auto; }\n\n @include respond-to-width-beyond(800) {\n display: flex; } }\n\n\n.c-duo-picture__img {\n width: 100%;\n max-width: 100%;\n\n @include respond-to-width-beyond(800) {\n width: 50%;\n flex: 1 1 50%; } }\n\n\n.c-personality {\n list-style: none;\n margin: column(1) 0 0;\n padding-left: 0; }\n\n\n.c-personality__item {\n border-top: 1px solid #0E121A;\n padding-bottom: 26px;\n color: #0E121A;\n\n @include respond-to-width-beyond(900) {\n display: flex; } }\n\n\n.c-personality__label {\n display: flex;\n margin: 0;\n padding-top: 26px;\n font-size: 1.6rem;\n font-weight: 700;\n\n &::before {\n flex: 0 0 24px;\n content: '';\n display: block;\n background-image: url(/img/icons/plus.svg);\n width: 24px;\n height: 24px;\n margin-top: 14px;\n margin-right: 24px; }\n\n @include respond-to-width-beyond(900) {\n flex: 1 1 50%; } }\n\n\n.c-personality__description {\n padding-top: 26px;\n font-size: 0.9rem;\n font-weight: 600;\n white-space: normal;\n\n @include respond-to-width-beyond(900) {\n flex: 1 1 50%;\n padding-top: 36px; } }\n\n\n.l-split {\n @include respond-to-width-beyond($mdGridBreakpoint) {\n display: flex; } }\n\n\n.l-split__item {\n @include respond-to-width-beyond($mdGridBreakpoint) {\n flex: 0 0 50%;\n white-space: normal; } }\n\n\n.c-skills {\n list-style: none;\n padding-left: 0; }\n\n.c-skills__item {\n display: flex;\n margin: 16px 0 0;\n font-size: 0.9rem;\n font-weight: 500;\n line-height: 2;\n color: #fff;\n\n &::before {\n flex: 0 0 24px;\n content: '';\n display: block;\n background-image: url(/img/icons/plus--white.svg);\n width: 24px;\n height: 24px;\n margin-top: 6px;\n margin-right: 24px; } }\n\n\n\n.c-apply__form {\n max-width: 480px;\n margin-top: 32px;\n\n label, .c-apply__label {\n margin-bottom: 6px;\n font-size: 0.9rem;\n line-height: 1.2;\n color: #0E121A;\n font-weight: 600; }\n\n .input-holder {\n margin-bottom: 16px;\n\n .message {\n font-size: 16px;\n background: #ffb502;\n color: #0E121A;\n border-radius: 4px;\n padding: 3px 10px;\n margin-bottom: 3px; } }\n\n input, textarea {\n border: 2px solid #0E121A;\n border-radius: 4px;\n @include placeholder {\n color: #fff; } } }\n\n\n.c-button {\n display: inline-block;\n padding: 16px 32px;\n background-color: #0D65FB;\n color: #fff;\n border: none;\n border-radius: 4px;\n font-size: 0.9rem;\n line-height: 1.2;\n font-weight: 600;\n cursor: pointer;\n transition: background-color 0.25s linear;\n\n &:hover {\n background-color: #0d5bb6; } }\n\n\n\n.c-questions {\n display: flex;\n justify-content: flex-end;\n margin-bottom: 144px; }\n\n\n.c-questions__figure {\n flex: 0;\n margin: 0;\n position: relative; }\n\n\n.c-questions__img {\n @include respond-to-width($mdGridBreakpoint) {\n width: 30vw; } }\n\n\n.c-questions__caption {\n position: absolute;\n bottom: -36px;\n font-size: 0.9rem;\n font-weight: 600;\n color: #000;\n\n @include respond-to-width($mdGridBreakpoint) {\n display: none; } }\n\n\n.c-questions__body {\n flex: 0 1 50%;\n padding: column(1);\n background-color: #0E121A;\n color: #fff;\n\n @include respond-to-width($mdGridBreakpoint) {\n flex-basis: 100%; }\n a {\n color: #00C7FF;\n text-decoration: none;\n\n &:hover {\n text-decoration: underline; } } }\n\n.c-questions__body--small {\n padding: column(0.5) column(1); }\n\n.c-questions__button {\n margin-top: 24px; }\n\n.c-questions__header {\n margin: 0 0 16px;\n color: #fff;\n font-size: 1.6rem;\n font-weight: 600;\n line-height: 1.25; }\n\n\n.c-questions__info {\n color: #fff;\n font-size: 0.9rem;\n line-height: 1.33; }\n\n\n\n.c-picture-slider {\n position: relative; }\n\n.c-picture-slider__prev,\n.c-picture-slider__next {\n position: absolute;\n z-index: 1;\n top: 0;\n bottom: 0;\n left: 0;\n width: 100px;\n transform: rotate(.5turn);\n border: none;\n background-color: transparent;\n outline: none;\n cursor: pointer;\n\n\n &::before {\n flex: 0 0 32px;\n content: '';\n display: block;\n margin: 0 auto;\n background-image: url(/img/icons/arrow.svg);\n width: 32px;\n height: 32px;\n filter: drop-shadow(2px 4px 6px rgba(0,0,0,0.5)); } }\n\n\n.c-picture-slider__next {\n left: auto;\n right: 0;\n\n &::before {\n transform: rotate(.5turn); } }\n\n\n.u-bg-dark {\n background-color: #0E121A; }\n\n.t-vacancy__dynamic {\n padding: column(2) 0;\n\n @include respond-to-width-beyond($smGridBreakpoint) {\n padding: column(1) 0; }\n\n &.t-vacancy__dynamic--empty {\n padding-bottom: 0 !important; } }\n\n\n.t-vacancy__block {\n width: calc(100% - 40px);\n margin: auto;\n\n @include respond-to-width-beyond(576) {\n width: column(10, 12); }\n\n\n + .t-vacancy__block {\n margin-top: 60px; }\n\n .text-block {\n padding: 0;\n white-space: normal;\n\n h2 {\n @extend .c-subheader; } } }\n\n\n\n// WEBPACK FOOTER //\n// ./resources/assets/sass/site/resources/assets/sass/site/pages/_jobsCustom.sass","/* ==========================================================================\n Specific CSS for the offer page\n @mixin ========================================================================= */\n\n.offer {\n\n .form-holder {\n padding-bottom: column(1,10); }\n\n .account-managers-holder .account-manager .function {\n color: rgba(0,0,0,0.8); }\n\n // Responsive layout\n @include respond-to-width($mdGridBreakpoint) {\n\n .form-holder {\n display: block;\n margin: 0 auto;\n width: column(8,10); }\n\n .account-managers-holder {\n width: 100%;\n margin-bottom: column(1,10); } }\n\n @include respond-to-width($smGridBreakpoint) {\n\n .form-managers-holder {\n width: column(11); }\n\n .form-holder,\n .account-managers-holder {\n width: 100%;\n margin-left: 0; } } }\n\n\n\n\n// WEBPACK FOOTER //\n// ./resources/assets/sass/site/resources/assets/sass/site/pages/_offer.sass","/* ==========================================================================\n Specific CSS for the process page\n @mixin ========================================================================= */\n\n.process {\n\n // Remove margin on the header\n header.main {\n margin-bottom: 0; }\n\n // Process holder\n .process-step {\n position: relative;\n\n display: flex;\n margin: 0 auto;\n max-width: $gridMaxWidth;\n\n height: 100vh;\n\n .image {\n width: 50%;\n background: #efefef;\n background-size: cover; }\n\n .text-block-holder {\n width: 50%;\n align-self: center; }\n\n .text-block {\n padding: column(1,7); }\n\n .text-block > * {\n opacity: 0;\n @include transform(translate3d(0,60px,0)); }\n\n .button {\n cursor: pointer; }\n\n // Switch image and text every other step\n &:nth-child(2n) {\n .image {\n order: 2; }\n\n .text-block-holder {\n order: 1; } } }\n\n @include respond-to-width($mdGridBreakpoint) {\n .process-step {\n height: auto; } }\n\n @include respond-to-width($smGridBreakpoint) {\n .process-step {\n display: block;\n .image {\n width: 100%;\n height: 75vw /* 4:3 */; }\n\n .text-block-holder {\n width: 100%; } } }\n\n @include respond-to-width($xsGridBreakpoint) {\n .process-step {\n .text-block {\n padding: $mobileTopSpace $mobileAsideSpace $mobileBottomSpace;\n .button {\n margin-top: 10px; } }\n\n h2 {\n margin-bottom: 20px; } } } }\n\n\n\n// WEBPACK FOOTER //\n// ./resources/assets/sass/site/resources/assets/sass/site/pages/_process.sass","/* ==========================================================================\n Specific CSS for the services page\n @mixin ========================================================================= */\n\n.services {\n\n header.main {\n margin-bottom: 0; }\n\n @include respond-to-width($mdGridBreakpoint) {\n header.main {\n .intro {\n width: column(10); } }\n .call-to-action-block {\n padding-left: column(2);\n padding-right: column(2);\n margin: 0;\n .flex-col:first-child {\n margin-right: column(2,10); } } }\n\n @include respond-to-width($xsGridBreakpoint) {\n header.main {\n .intro {\n width: 100%; } }\n .call-to-action-block {\n padding: $mobileTopSpace $mobileAsideSpace; } } }\n\n\n/* Services Grid\n @mixin ========================================================================= */\n\n.services-grid {\n\n background: $blue;\n\n // The list containing all services\n ul {\n display: grid;\n grid-template-columns: 1fr 1fr 1fr 1fr;\n grid-gap: 60px;\n\n padding: 0 0 column(1,10);\n width: 100%;\n margin: 0 auto column(1,10);\n list-style: none;\n font-size: $baseFontSize; }\n\n // Service grid cell\n // 1. Because ul has a width of 12 with .75 padding on each side\n // The width origin from the li is 10.5\n li {\n border-bottom: 1px solid white;\n\n &:hover {\n border-color: $brightBlue;\n .title {\n color: $brightBlue; }\n .arrow {\n @include transform(translate3D(20px,0,0)); } } }\n a {\n display: block;\n padding-bottom: 1.5rem;\n text-decoration: none;\n color: rgba(255,255,255,0.8);\n @include transition(borderColor 200ms ease-out); }\n\n // Title\n .title {\n display: block;\n height: 6rem;\n color: #fff;\n\n line-height: 1.142857;\n font-size: 1.4rem;\n font-weight: bold();\n text-transform: uppercase;\n letter-spacing: .05em;\n @include transition(color 200ms ease-out); }\n\n .arrow {\n display: block;\n width: 25px;\n height: 14px;\n margin: 23px 0;\n @include sprite(0 0);\n @include transition(transform 200ms ease-out); }\n\n .comment {\n display: block; }\n\n\n // Switch to 3-column layout\n @include respond-to-width($mdGridBreakpoint) {\n ul {\n grid-template-columns: 1fr 1fr 1fr;\n margin: 0; } }\n\n // Switch to 2-column layout\n @include respond-to-width($mdGridBreakpoint) {\n ul {\n grid-template-columns: 1fr 1fr; } }\n\n // Switch to 1-column layout\n @include respond-to-width(500) {\n ul {\n grid-template-columns: 1fr; } }\n\n @include respond-to-width($xsGridBreakpoint) {\n .col-10 {\n width: 100%; }\n ul {\n border-top: 1px solid #fff;\n padding-bottom: 0;\n grid-gap: 0; }\n li {\n padding-bottom: 0;\n &:last-child {\n border: none; } }\n a {\n position: relative;\n padding: $mobileTopSpace $mobileAsideSpace; }\n\n .title {\n font-size: 1.2rem;\n height: auto; }\n .comment {\n width: 75%; }\n .arrow {\n @include position(absolute, 50% 20px null null);\n margin-top: -6px; } } }\n\n\n\n// WEBPACK FOOTER //\n// ./resources/assets/sass/site/resources/assets/sass/site/pages/_services.sass","/* ==========================================================================\n Specific CSS for the services detail page\n @mixin ========================================================================= */\n\n.service {\n\n // Remove margin on the header\n header.main {\n margin-bottom: 0; }\n\n // Top row with back-button and title\n .go-back-holder,\n .title-holder {\n position: relative;\n padding-bottom: column(2);\n\n .alignment-controller {\n @include position(absolute, 0 null null 0);\n display: flex;\n align-items: center;\n height: 100%;\n width: 100%; } }\n\n // Back to services\n .go-back-holder {\n .alignment-controller {\n justify-content: flex-end; } }\n\n .title-holder h2 {\n padding-left: column(1,7);\n margin: 0; }\n\n // Service top row on large\n @include respond-to-width($lgGridBreakpoint) {\n .title-holder h2 {\n padding-left: column(.5,7); } }\n\n // Service top row on small\n @include respond-to-width($smGridBreakpoint) {\n text-align: left;\n\n .title-holder h2 {\n padding-left: 0; }\n .title-holder,\n .go-back-holder {\n padding: 30px column(1.5,14);\n width: 100%;\n\n .alignment-controller {\n position: relative;\n justify-content: flex-start; } } }\n\n // Service top row on extra small\n @include respond-to-width($xsGridBreakpoint) {\n .go-back-holder,\n .title-holder {\n padding: $mobileTopSpace $mobileAsideSpace; } }\n\n // Description and image\n .description-container {\n .image {\n margin-bottom: column(1); }\n .text-block {\n padding-top: 0; }\n\n // Next service\n hr {\n border: 0;\n height: 1px;\n margin: column(1,6) 0 10px;\n background: $borderColor; }\n\n .next-service {\n display: inline-block;\n position: relative;\n padding-right: 22px;\n color: $black;\n text-decoration: none;\n\n // Arrow\n &:after {\n @include position(absolute, 7px 0 null null );\n content: '';\n width: 14px;\n height: 14px;\n @include sprite(-80px -20px);\n @include transition(transform 300ms ease-out); }\n\n // Move arrow on hover\n &:hover:after {\n @include transform(translateX(5px)); } } }\n\n // Featured\n .featured-cases {\n max-width: $gridMaxWidth;\n margin: 0 auto; }\n\n @include respond-to-width($smGridBreakpoint) {\n .description-container .image {\n margin-bottom: 0;\n width: 100%; }\n .text-block {\n padding: column(2) column(1) !important;\n width: 100%; } }\n\n @include respond-to-width($xsGridBreakpoint) {\n\n .description-container {\n .image {\n margin-top: 0; } } } }\n\n\n\n// WEBPACK FOOTER //\n// ./resources/assets/sass/site/resources/assets/sass/site/pages/_service.sass","/* ==========================================================================\n Testimonial specific css\n @mixin ========================================================================= */\n\n// The container has display flex for it works in one direction\n.testimonial-container {\n display: flex;\n justify-content: flex-end;\n\n width: 50%;\n\n background-repeat: no-repeat;\n background-size: contain;\n background-position: left bottom;\n\n &:nth-child(2n) {\n justify-content: flex-start; }\n\n // Align items on grid layout\n .contained-layout {\n display: grid;\n grid-template-columns: 6fr 6fr 2fr;\n grid-template-areas: '. quote .';\n max-width: $gridMaxWidth / 2;\n margin: 0;\n align-items: center; }\n\n // The grid-item\n .quote {\n grid-area: quote;\n\n color: rgba(255,255,255,.8);\n font-size: 1rem;\n font-weight: 300;\n line-height: 1.3;\n white-space: normal;\n padding-top: 100px; }\n\n .author {\n margin-top: 1em;\n display: block;\n color: #fff;\n font-size: 1rem;\n font-style: normal;\n font-weight: semibold(); }\n\n .button {\n margin: 60px 0 100px;\n font-style: normal; }\n\n /* Responsive Testimonials\n @mixin ========================================================================= */\n\n @include respond-to-width($mdGridBreakpoint) {\n background-size: auto 300px;\n .contained-layout {\n display: block;\n padding: 50px column(1,7) 300px; }\n .quote {\n padding-top: 0;\n font-size: 1.3rem;\n line-height: 1.4; }\n .button {\n margin-bottom: 0; } }\n\n @include respond-to-width($smGridBreakpoint) {\n width: 100%;\n .contained-layout {\n padding: column(.5,7) column(.5,7) 300px; } }\n\n @include respond-to-width($xsGridBreakpoint) {\n .contained-layout {\n padding: $mobileTopSpace $mobileAsideSpace 300px; } } }\n\n\n\n/* Testimonial page CSS\n @mixin ========================================================================= */\n\n.testimonials {\n header.main {\n margin-bottom: 0; } }\n\n.testimonial-logo-grid {\n display: flex;\n flex-wrap: wrap;\n\n /**\n * Grid layout for our list\n */\n .clients {\n position: relative;\n display: grid;\n align-items: center;\n justify-content: center;\n grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;\n grid-gap: 30px;\n padding: columnVw(.5) columnVw(1);\n width: 100%;\n list-style: none;\n\n // The fractions can be done with min/max-width,\n // but this way we have more control.\n @include respond-to-width($lgGridBreakpoint) {\n grid-template-columns: 1fr 1fr 1fr 1fr 1fr; }\n @include respond-to-width($mdGridBreakpoint) {\n grid-template-columns: 1fr 1fr 1fr 1fr; }\n @include respond-to-width($smGridBreakpoint) {\n grid-template-columns: 1fr 1fr 1fr; }\n @include respond-to-width($xsGridBreakpoint) {\n grid-template-columns: 1fr 1fr; }\n\n .inner-shadow {\n position: absolute;\n left: 0;\n bottom: 0;\n width: 100%;\n height: 100px;\n box-shadow: inset 0px -100px 100px -50px rgba(255,255,255,1); }\n\n .toggle-client-mask {\n position: absolute;\n left: 50%;\n bottom: -30px;\n margin-left: -30px;\n width: 60px;\n height: 60px;\n cursor: pointer; }\n\n // IE fix\n html.ie & {\n ul {\n @include clearfix;\n li {\n float: left;\n width: 25%; } } } }\n\n html.ie & {\n @include clearfix;\n\n .testimonial-container {\n padding: 50px;\n float: left;\n width: 50%; } }\n\n @include respond-to-width($smGridBreakpoint) {\n .client-logo-group {\n width: 100%; } } }\n\n\n\n// WEBPACK FOOTER //\n// ./resources/assets/sass/site/resources/assets/sass/site/pages/_testimonials.sass",".spinWin {\n\n .spinWin__heading {\n .text-block {\n h1 {\n font-size: 48px;\n color: $darkBodyText; }\n\n p {\n font-size: 24px; } }\n\n .account-managers-holder {\n margin: column(1) 0 column(1) column(1);\n\n .account-manager {\n text-align: center;\n width: 100%;\n max-width: 160px;\n margin: 0 0 0 column(1); } }\n\n @include respond-to-width(480) {\n .text-block {\n width: column(12); }\n\n .account-managers-holder {\n width: column(12); } } }\n\n\n\n .call-to-action-block {\n h2 {\n font-size: 3rem; } }\n\n .spinWin__roulette-container {\n background-color: $blue;\n padding: 60px 0 0; }\n\n .spinWin__roulette {\n width: column(8);\n margin: auto;\n text-align: center;\n\n .roulette {\n width: 100%;\n max-width: 280px;\n margin: auto; }\n\n img {\n width: 100%;\n height: auto; } }\n\n .spinWin__price {\n margin-top: 40px;\n color: white;\n font-size: 32px;\n line-height: 1.2;\n font-weight: bold();\n padding-bottom: 40px; }\n\n .spinWin__trigger {\n margin-top: 40px;\n text-align: center;\n padding-bottom: 120px;\n\n &.is-disabled {\n opacity: 0.2;\n pointer-events: none; } }\n\n .spinWin__button {\n padding: 12px 28px;\n appearance: none;\n border: none;\n background-color: $blue;\n color: white;\n font-size: 24px;\n line-height: 1.2; }\n\n .spinWin__teaser {\n margin-top: 20px;\n text-align: center;\n font-size: 24px;\n line-height: 1.2;\n color: $darkBodyText; }\n\n .spinWin__winning {\n margin-top: 60px;\n &.is-hidden {\n margin-top: 0;\n display: none; }\n\n .c-questions {\n margin-bottom: 60px; } }\n\n .c-questions {\n @include respond-to-width(600) {\n display: block;\n\n .c-questions__body--small {\n padding-top: 40px;\n padding-bottom: 40px; }\n\n .c-questions__figure {\n margin: 0 24px 24px;\n display: none; }\n\n .c-questions__img {\n border-radius: 50%; } } }\n\n .spinWin__form {\n .c-subsection {\n padding-top: 0; }\n\n &.is-hidden {\n display: none; }\n\n .c-subheader {\n font-size: 48px; }\n\n .c-button {\n background-color: $blue; }\n\n .c-apply__form {\n margin-top: 12px; } }\n\n .spinWin__form-error {\n font-size: 14px;\n line-height: 1.2;\n color: $black; } }\n\n\n\n// WEBPACK FOOTER //\n// ./resources/assets/sass/site/resources/assets/sass/site/pages/_spinWin.sass","/*==========================================================================\n Posts overview page\n @mixin ========================================================================= */\n\n\n.posts {\n @import '../../partials/posts/header/postHeaderIndex';\n\n .featured.post-grid {\n border-bottom: 1px solid #F4F4F4;\n margin-bottom: column(.5,10); }\n\n h2 {\n color: $brightBlue;\n font-size: 18px;\n line-height: 1.4444;\n font-weight: 600; }\n\n // qnd fix: for category page (category now uses the posts body-class)\n .back-to-grid {\n margin-bottom: column(.5,6); } }\n\n\n\n// WEBPACK FOOTER //\n// ./resources/assets/sass/site/resources/assets/sass/site/pages/posts/_index.sass","// Custom header properties for the case header with image\nheader.main {\n margin-bottom: 0;\n padding: column(.5) column(.5) 0 column(.5);\n\n @include respond-to-width-beyond($xlGridBreakpoint) {\n padding: 60px 60px 0 60px; }\n\n // Gets replaced by a mobile menu\n @include respond-to-width($smGridBreakpoint) {\n padding: 0 column(.5); }\n\n // Gets replaced by a mobile menu\n @include respond-to-width($xsGridBreakpoint) {\n padding: 0; }\n\n // Control min and max height\n .height-controller {\n position: relative;\n overflow: hidden;\n max-height: 87vh;\n\n @include respond-to-width($mdGridBreakpoint) {\n max-height: none;\n min-height: 0; } }\n\n // Container to determine the ratio of the header\n .ratio-controller {\n position: relative;\n width: 100%;\n height: 0;\n padding-bottom: 42%;\n\n @include respond-to-width($smGridBreakpoint) {\n padding-bottom: 60%; }\n\n @include respond-to-width($xsGridBreakpoint) {\n padding-bottom: 80%; } } }\n\n\n\n// WEBPACK FOOTER //\n// ./resources/assets/sass/site/resources/assets/sass/site/partials/posts/header/_postHeaderBasic.sass","@import 'postHeaderBasic';\n\nheader.main {\n margin-bottom: column(1);\n\n // Inner wrapper so we can add content inside\n .wrapper,\n .background-image {\n @include position(absolute, 0 null null 0);\n width: 100%;\n height: 100%; }\n\n .wrapper {\n background: rgba($blue,0.5); }\n\n .background-image {\n background-size: cover;\n background-position: 50% 50%; }\n\n // Make sure we can have vertical alignment\n .flexable-layout {\n margin: 0 auto;\n max-width: 1680px;\n height: 100%;\n flex-direction: column;\n justify-content: center;\n align-items: center; }\n\n // Max-width on title block\n .title-holder {\n width: column(12);\n max-width: 720px;\n text-align: center; }\n\n // Small title that tells us where we are\n .blog-title {\n display: block;\n padding-bottom: 30px;\n color: $brightBlue;\n font-size: .9rem;\n font-weight: bold();\n text-decoration: none;\n text-transform: uppercase; }\n\n h1 {\n display: block;\n margin: 0;\n padding-bottom: 30px;\n color: #fff;\n font-size: 2rem;\n font-weight: 500;\n line-height: 1.25; }\n\n .button {\n border-radius: 100px; }\n\n @include respond-to-width($mdGridBreakpoint) {\n .blog-title {\n padding-bottom: 20px; } } }\n\n\n\n// WEBPACK FOOTER //\n// ./resources/assets/sass/site/resources/assets/sass/site/partials/posts/header/_postHeaderIndex.sass","/*==========================================================================\n Blog detail page\n @mixin ========================================================================= */\n.post {\n @import '../../partials/posts/header/postHeaderShow';\n\n // Normally we would use a percentage as a width,\n // but the width needs to stay fixed until it doesn't fit\n .post-container {\n width: 720px;\n margin: 0 auto;\n white-space: normal;\n font-size: $baseFontSize; }\n\n .post-body {\n section:last-child {\n margin-bottom: column(1,6); }\n\n h2 {\n margin: 2rem 0; }\n\n p:last-child {\n margin: 0; } }\n\n .post-intro {\n margin: column(1,6) 0 column(.5,6);\n color: $darkBodyText;\n font-size: 1.22222rem;\n line-height: 1.54545; }\n\n .post-full-image {\n img {\n display: block;\n margin: column(.5,6) 0;\n width: 100%; } }\n\n .back-to-grid {\n margin-bottom: column(.5,10); }\n\n .related-posts {\n border-top: 1px solid $borderColor;\n padding: column(.5) 0 column(1);\n\n h2 {\n display: block;\n margin-top: -10px;\n font-weight: 300;\n font-size: 1.5rem; } }\n\n\n @include respond-to-width($smGridBreakpoint) {\n\n .post-container {\n // Change back to percentage\n width: column(13); }\n\n .post-intro {\n font-size: 1.1rem; } }\n\n @include respond-to-width($xsGridBreakpoint) {\n .post-container {\n width: 100%;\n padding: 0 20px; } } }\n\n\n\n// WEBPACK FOOTER //\n// ./resources/assets/sass/site/resources/assets/sass/site/pages/posts/_show.sass","@import 'postHeaderBasic';\n\nheader.main {\n\n // Inner wrapper so we can add content inside\n .wrapper,\n .background-image {\n @include position(absolute, 0 null null 0);\n width: 100%;\n height: 100%; }\n\n .wrapper {\n background: rgba($blue,0.5); }\n\n .background-image {\n background-size: cover;\n background-position: 50% 50%; }\n\n // Make sure we can have vertical alignment\n .flexable-layout {\n margin: 0 auto;\n max-width: 1680px;\n height: 100%;\n flex-direction: column;\n justify-content: center;\n align-items: center; }\n\n // Max-width on title block\n .title-holder {\n display: block;\n width: column(12);\n max-width: 720px;\n text-align: center; }\n\n // Small title that tells us where we are\n .blog-title {\n display: block;\n padding-bottom: 30px;\n color: $brightBlue;\n font-size: .9rem;\n font-weight: bold();\n text-decoration: none;\n text-transform: uppercase; }\n\n h1 {\n display: block;\n margin: 0;\n color: #fff;\n font-size: 2rem;\n font-weight: 500;\n line-height: 1.25; }\n\n .author {\n margin-top: 60px;\n display: flex;\n flex-direction: row;\n justify-content: flex-start;\n align-items: center;\n\n .profile-image {\n @include position(relative,0 null null 0);\n overflow: hidden;\n border-radius: 100px;\n width: 60px;\n height: 60px;\n background-size: cover; }\n\n .info {\n margin-left: 20px;\n color: #fff;\n line-height: 1.2; }\n\n .name {\n font-weight: semibold(); } }\n\n @include respond-to-width($smGridBreakpoint) {\n .blog-title {\n padding-bottom: 10px; }\n\n h1 {\n font-size: 1.8rem; } } }\n\n\n\n// WEBPACK FOOTER //\n// ./resources/assets/sass/site/resources/assets/sass/site/partials/posts/header/_postHeaderShow.sass","@import \"index\";\n@import \"show\";\n\n/*==========================================================================\n Global for post index and show\n @mixin ========================================================================= */\n\n// Normally we would use a percentage as a width,\n// but the width needs to stay fixed until it doesn't fit\n.posts-container {\n width: 1200px;\n margin: 0 auto;\n white-space: normal;\n font-size: $baseFontSize;\n\n @include respond-to-width(1300) {\n // Change back to percentage\n width: column(12); }\n\n @include respond-to-width($xsGridBreakpoint) {\n padding-top: 60px;\n\n .posts-container,\n .posts-container.related-posts {\n width: 100%;\n padding: 0 20px; } } }\n\n\n\n// WEBPACK FOOTER //\n// ./resources/assets/sass/site/resources/assets/sass/site/pages/posts/_posts.sass","#error-page-message {\n padding: 100px 0 100px;\n background-color: $borderColor;\n\n .grid-row {\n .kms-content {\n width: 100%;\n text-align: center; }\n\n .placeholder {\n max-width: 720px;\n margin: auto; }\n\n //p\n // font-size: 1rem\n // line-height: 1.7\n // font-weight: bold\n // color: $grey\n //\n // +respond-to-width(700)\n // font-size: 0.9rem\n // +respond-to-width(450)\n } } // font-size: 0.8rem\n\n.c-error-page {\n padding: 160px 20px;\n background-color: $blacker;\n\n h1 {\n font-size: 8rem; }\n\n p {\n font-size: 1rem; } }\n\n.c-error-page__message {\n text-align: center;\n color: white; }\n\n.c-error-page__title {\n position: relative;\n margin: 0 0 60px;\n font-size: 8rem;\n line-height: 1; }\n\n.c-error-page__ufo {\n position: absolute;\n left: 50%;\n bottom: 0;\n width: 100%;\n max-width: 250px;\n transform: translateX(-50%);\n\n img {\n width: 100%; } }\n\n\n.c-error-page__subtitle {\n font-size: 1.4rem;\n margin: 0; }\n\n.c-error-page__button {\n margin-top: 40px; }\n\n\n\n// WEBPACK FOOTER //\n// ./resources/assets/sass/site/resources/assets/sass/site/pages/_error.sass"],"sourceRoot":""}