{"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/_cookieDialog.sass","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/_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/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/_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/partials/posts/header/_postHeaderBasic.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/_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"],"names":[],"mappings":"AAIA,EACE,oDCiDD,KDvCC,gBCkDD,ID5CC,cCoDD,qED5CG,UACA,wDACA,8RCqDH,mDDvDG,UACA,wBACA,8RE1BF,2DFwBE,UACA,wBACA,8RCmEH,iDDrEG,UACA,wBACA,8RC0EH,iFDtEK,UACA,wEEjCJ,+DFgCI,UACA,gCE/BJ,uEF8BI,UACA,gCCuFL,6DDxFK,UACA,gCC6FL,mDDzFG,WG7BJ,kBACE,kBACA,WACA,iBACA,cACA,YACA,mBANF,0BASI,WACA,SACA,0BCpBF,oCDSF,kBAcI,mBF4ID,CE3HD,OACE,kBACA,kBACA,mBAEA,qBACA,cACA,mBACA,eC3CF,qCDmCA,OAWI,eFmJH,CE3IC,gBACE,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,eC3CF,qCDmCA,OAWI,eF4OH,CEpOC,gBACE,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,eC3CF,qCDmCA,OAWI,eFqUH,CE7TC,gBACE,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,eC3CF,qCDmCA,OAWI,eF8ZH,CEtZC,gBACE,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,eC3CF,qCDmCA,OAWI,eFufH,CE/eC,gBACE,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,eC3CF,qCDmCA,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,eC3CF,qCDmCA,OAWI,eFyqBH,CEjqBC,gBACE,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,eC3CF,qCDmCA,OAWI,eFkwBH,CE1vBC,gBACE,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,eC3CF,qCDmCA,OAWI,eF21BH,CEn1BC,gBACE,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,eC3CF,qCDmCA,QAWI,eFo7BH,CE56BC,iBACE,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,eC3CF,qCDmCA,QAWI,eF6gCH,CErgCC,iBACE,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,eC3CF,qCDmCA,QAWI,eFsmCH,CE9lCC,iBACE,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,eC3CF,qCDmCA,QAWI,eF+rCH,CEvrCC,iBACE,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,eC3CF,qCDmCA,QAWI,eFwxCH,CEhxCC,iBACE,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,iBCvEF,qCDqFE,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,CGx/CD,qCDqFE,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,CG1iDD,qCDqFE,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,CG5lDD,qCDqFE,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,CG9oDD,qCDqFE,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,CGhsDD,qCDqFE,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,CGlvDD,qCDqFE,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,CGpyDD,qCDqFE,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,CGt1DD,qCDqFE,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,CGx4DD,qCDqFE,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,CG17DD,qCDqFE,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,CG5+DD,qCDqFE,WACE,mBAEF,cACE,yBF65DH,CG3/DD,qCDyGI,WACE,mB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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  height: 50px;\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);\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);\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);\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);\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);\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);\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);\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);\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);\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);\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);\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);\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);\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);\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);\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: 40%;\n  margin-right: 10%;\n  font-size: .8rem;\n  line-height: 1.2;\n  white-space: normal;\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/* ==========================================================================\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);\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}\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);\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@media screen and (max-width: 768px) {\n  .featured-cases {\n    display: block;\n  }\n}\n\n/* ==========================================================================\n   Scrollable website component on case-detail\n   @mixin ========================================================================= */\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\n/* HTML and navigation\n @mixin ========================================================================= */\n\nhtml.has-cookie-dialog {\n  padding-top: 60px;\n}\n\nhtml.has-cookie-dialog nav.main,\nhtml.has-cookie-dialog .navigation-drip {\n  top: 60px;\n}\n\n@media screen and (max-width: 1080px) {\n  html.has-cookie-dialog {\n    padding-top: 120px;\n  }\n\n  html.has-cookie-dialog nav.main,\n  html.has-cookie-dialog .navigation-drip {\n    top: 120px;\n  }\n}\n\n/* Dialog\n @mixin ========================================================================= */\n\n.cookie-consent {\n  position: fixed;\n  top: 0;\n  left: 0;\n  z-index: 10000;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  height: 60px;\n  width: 100%;\n  border-bottom: 1px solid #eaeaea;\n  background: #fff;\n  color: #1D2433;\n  font-size: 16px;\n}\n\n.cookie-consent .message {\n  display: block;\n  padding: 0 20px;\n  max-width: 75%;\n}\n\n.cookie-consent .message a {\n  display: inline-block;\n  color: #0000FF;\n  text-decoration: none;\n}\n\n.cookie-consent .message a:hover {\n  text-decoration: underline;\n}\n\n.cookie-consent .button {\n  margin-left: 40px;\n  width: auto;\n  min-width: 0;\n  height: 40px;\n  line-height: 36px;\n  font-size: 16px;\n}\n\n@media screen and (max-width: 1080px) {\n  .cookie-consent {\n    flex-direction: column;\n    text-align: center;\n    height: 120px;\n  }\n\n  .cookie-consent .message {\n    max-width: none;\n  }\n\n  .cookie-consent .button {\n    margin-left: 0;\n    margin-top: 10px;\n    position: relative;\n    top: 0;\n    right: 0;\n  }\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\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);\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);\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 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);\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);\n  background-size: 140px 85px;\n  background-position: -20px -60px;\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 (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 {\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);\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: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: 500px) {\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);\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.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.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.main li {\n  /* Services sub list\n      @mixin ========================================================================= */\n}\n\nnav.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.main li.active > a {\n  text-decoration: line-through;\n}\n\nnav.main li:not(.active) a:hover {\n  color: #00C7FF;\n}\n\nnav.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.main li > ul {\n  display: inline-block;\n  width: 50%;\n  height: auto;\n  margin-top: 1.36903571vw;\n}\n\nnav.main li > ul li {\n  padding-bottom: 10px;\n}\n\nnav.main li > ul a {\n  display: block;\n  color: #96A6B2;\n  font-size: 1.1rem;\n  font-weight: 300;\n}\n\nnav.main li.offer {\n  position: absolute;\n  top: 0;\n  right: 0;\n}\n\nnav.main li.offer .button {\n  font-size: 1rem;\n  line-height: 45px;\n}\n\nnav.main footer {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  height: 30vh;\n}\n\nnav.main footer .footer-content {\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: center;\n}\n\nnav.main footer svg.logo-web-branding-agency {\n  width: 40%;\n  fill: #D5DCE0;\n}\n\nnav.main footer .jobs {\n  text-align: right;\n  line-height: 1.3;\n  color: #96A6B2;\n}\n\nnav.main footer .jobs a {\n  color: #0000FF;\n  text-decoration: none;\n}\n\n@media screen and (max-width: 1366px) {\n  nav.main {\n    width: 57.14285714%;\n  }\n}\n\n@media screen and (max-width: 1080px) {\n  nav.main {\n    width: 71.42857143%;\n  }\n}\n\n@media screen and (max-width: 768px) {\n  nav.main {\n    padding: 0;\n    width: 85.71428571%;\n    height: 100vh;\n    overflow-y: scroll;\n    -webkit-overflow-scrolling: touch;\n  }\n\n  nav.main ul {\n    justify-content: flex-start;\n    height: auto;\n  }\n\n  nav.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.main li:not(.offer):not(.active) a:hover {\n    color: #0000FF;\n  }\n\n  nav.main li.offer {\n    position: relative;\n    padding: 20px;\n  }\n\n  nav.main li > ul {\n    display: none;\n  }\n\n  nav.main footer {\n    display: block;\n  }\n\n  nav.main footer .footer-content {\n    display: block;\n  }\n\n  nav.main footer .jobs {\n    padding: 20px;\n    text-align: left;\n  }\n\n  nav.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: 5%;\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%;\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/* ==========================================================================\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 .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/* ==========================================================================\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.section-sorter .award {\n  order: 3;\n}\n\n.section-sorter .featured-cases {\n  order: 4;\n}\n\n.section-sorter .about-our-company {\n  order: 5;\n}\n\n.section-sorter .featured-testimonials {\n  order: 6;\n}\n\n.section-sorter .about-our-team {\n  order: 7;\n}\n\n.section-sorter .call-to-action-bar {\n  order: 8;\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   @mixin ========================================================================= */\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.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.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.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.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.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.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.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.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.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.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.topsWtwFilters .navigation-drip {\n  background: #00A1F7;\n}\n\n.case.topsWtwFilters .navigation-drip .burger-container svg {\n  fill: #00A1F7;\n}\n\n.case.topsWtwFilters header.main {\n  background: #00A1F7;\n}\n\n.case.topsWtwFilters header.main .header-drip {\n  background: #00A1F7;\n}\n\n.case.topsWtwFilters .scroll-hinter .sizer {\n  background: #0086f7;\n}\n\n.case.topsWtwFilters .intro-section {\n  background: #0086f7;\n}\n\n.case.topsWtwFilters .dynamic aside {\n  background: linear-gradient(to bottom, #2bb5ff 0%, #00A1F7 100%);\n}\n\n.case.topsWtwFilters .testimonial {\n  background-color: #00A1F7;\n}\n\n.testimonial-container.topsWtwFilters {\n  background-color: #00A1F7;\n}\n\n.featured-cases .featured-case.topsWtwFilters .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.testimonial-container.zuiderbos {\n  background-color: #1F76D0;\n}\n\n.featured-cases .featured-case.zuiderbos .color-overlay {\n  background-color: #1F76D0;\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-layout .arrow {\n  display: block;\n  width: 14px;\n  height: 32px;\n  background-image: url(/img/komma/komma_sprite.svg);\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 .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/* ==========================================================================\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);\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.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: 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 .job-list {\n  margin-top: 12.5%;\n  padding: 0;\n  color: #00C7FF;\n  font-size: 18px;\n  line-height: 1.4;\n  list-style: none;\n}\n\n.jobs .job-list li {\n  margin-bottom: 10px;\n}\n\n.jobs .job-list a {\n  display: block;\n  padding: 20px;\n  border: solid 2px #00C7FF;\n  font-size: 1.1em;\n  cursor: pointer;\n}\n\n.jobs .job-list a:hover {\n  border: solid 2px #fff;\n  color: #fff;\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  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  margin-bottom: 7.14285714%;\n}\n\n.job .back-to-grid {\n  margin-bottom: 16.66666667%;\n}\n\n.job .call-to-action-block {\n  margin-bottom: 0;\n  line-height: 1.4;\n}\n\n.job .call-to-action-block .flex-col:first-child {\n  margin-right: 12.5%;\n  width: 37.5%;\n}\n\n.job .call-to-action-block h3 {\n  color: #fff;\n}\n\n.job .call-to-action-block ol {\n  margin-bottom: 0;\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 header.main .intro,\n  .job .job-description .col-6 {\n    width: 71.42857143%;\n  }\n\n  .job .call-to-action-block {\n    width: 100%;\n  }\n\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    width: 90%;\n    line-height: 1.45;\n  }\n\n  .job .call-to-action-block h2 {\n    display: none;\n  }\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);\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);\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/*==========================================================================\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: 500px) {\n  .posts header.main {\n    display: none;\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.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}\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: 28.57142857%;\n  text-align: center;\n}\n\n.posts header.main .blog-title {\n  display: block;\n  padding-bottom: 12.5%;\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: 12.5%;\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.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: 500px) {\n  .post header.main {\n    display: none;\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.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}\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: 28.57142857%;\n  text-align: center;\n}\n\n.post header.main .blog-title {\n  display: block;\n  padding-bottom: 12.5%;\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 .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\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-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  height: 50px;\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);\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: column(2,5);\n    margin-right: column(.5,5);\n    font-size: .8rem;\n    line-height: 1.2;\n    white-space: normal;\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\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  .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\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\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\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.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","\n$cookieDialogHeight : 60px;\n$cookieLargeDialogHeight : 120px;\n\n/* HTML and navigation\n @mixin ========================================================================= */\n\nhtml.has-cookie-dialog {\n  padding-top: $cookieDialogHeight;\n\n  nav.main,\n  .navigation-drip {\n    top: $cookieDialogHeight; }\n\n  @include respond-to-width($mdGridBreakpoint) {\n    padding-top: $cookieLargeDialogHeight;\n\n    nav.main,\n    .navigation-drip {\n      top: $cookieLargeDialogHeight; } } }\n\n/* Dialog\n @mixin ========================================================================= */\n\n.cookie-consent {\n  @include position(fixed,0 null null 0);\n  z-index: 10000;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n\n  height: $cookieDialogHeight;\n  width: 100%;\n  border-bottom: 1px solid #eaeaea;\n  background: #fff;\n  color: $black;\n  font-size: 16px;\n\n  .message {\n    display: block;\n    padding: 0 20px;\n    max-width: 75%;\n\n    a {\n      display: inline-block;\n      color: $blue;\n      text-decoration: none;\n      &:hover {\n        text-decoration: underline; } } }\n\n  .button {\n    margin-left: 40px;\n    width: auto;\n    min-width: 0;\n    height: 40px;\n    line-height: 36px;\n    font-size: 16px; }\n\n  // Set flex direct to column and put everything below each other\n  @include respond-to-width($mdGridBreakpoint) {\n    flex-direction: column;\n    text-align: center;\n    height: $cookieLargeDialogHeight;\n\n    .message {\n      max-width: none; }\n    .button {\n      margin-left: 0;\n      margin-top: 10px;\n      @include position(relative, 0 0 null null); } } }\n\n\n\n// WEBPACK FOOTER //\n// ./resources/assets/sass/site/resources/assets/sass/site/partials/_cookieDialog.sass","/* ==========================================================================\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// 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  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  .less-important-stuff {\n    background: #141826;\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($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 {\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($xsGridBreakpoint) {\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.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      text-align: right;\n      line-height: 1.3;\n      color: #96A6B2;\n      a {\n        color: $blue;\n        text-decoration: none; } } }\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\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: column(.5,10);\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);\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\n\n// WEBPACK FOOTER //\n// ./resources/assets/sass/site/resources/assets/sass/site/partials/posts/_postGrid.sass","/* ==========================================================================\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  // 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","/* ==========================================================================\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  .award {\n    order: 3; }\n  .featured-cases {\n    order: 4; }\n  .about-our-company {\n    order: 5; }\n  .featured-testimonials {\n    order: 6; }\n  .about-our-team {\n    order: 7; }\n  .call-to-action-bar {\n    order: 8; }\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  .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,10) 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  // 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  // Intro with small description of our work\n  .intro-section {\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\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    // 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    &.linkedin {\n      width: 22px;\n      background-position: -20px -60px;\n      @include transform(translateY(-1px)); }\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\n  // Responsiveness for home header\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(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    padding: 0;\n    color: $brightBlue;\n    font-size: $baseFontSize;\n    line-height: 1.4;\n    list-style: none;\n\n    li {\n      margin-bottom: 10px; }\n\n    a {\n      display: block;\n      padding: 20px;\n      border: solid 2px $brightBlue;\n      font-size: 1.1em;\n\n      cursor: pointer;\n      &:hover {\n        border: solid 2px #fff;\n        color: #fff; } } }\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    .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      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    margin-bottom: column(1); }\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    header.main .intro,\n    .job-description .col-6 {\n      width: column(10); }\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        width: 90%;\n        line-height: 1.45; }\n      .call-to-action-block h2 {\n        display: none; } } } }\n\n\n\n// WEBPACK FOOTER //\n// ./resources/assets/sass/site/resources/assets/sass/site/pages/_jobs.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","// 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  // Hide on smallest view for it has lost its value\n  @include respond-to-width($xsGridBreakpoint) {\n    display: none; }\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\n\n// WEBPACK FOOTER //\n// ./resources/assets/sass/site/resources/assets/sass/site/partials/posts/header/_postHeaderBasic.sass","/*==========================================================================\n  Posts overview page\n  @mixin ========================================================================= */\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","@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\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(4,14);\n    text-align: center; }\n\n  // Small title that tells us where we are\n  .blog-title {\n    display: block;\n    padding-bottom: column(0.5,4);\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: column(0.5,4);\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\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  .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\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\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(4,14);\n    text-align: center; }\n\n  // Small title that tells us where we are\n  .blog-title {\n    display: block;\n    padding-bottom: column(0.5,4);\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\n\n// WEBPACK FOOTER //\n// ./resources/assets/sass/site/resources/assets/sass/site/partials/posts/header/_postHeaderShow.sass"],"sourceRoot":""}