/******************************************************************

Stylesheet: Block Style
Block: Banner

******************************************************************/
/******************************************************************

Stylesheet: Variables

Here is where we declare all our variables like colors, fonts,
base values, and defaults. We want to make sure this file ONLY
contains variables that way our files don't get all messy.
No one likes a mess.

*******************************************************************


/*********************
COLORS
*********************/
/*********************
FONT SIZES
*********************/
/*********************
PADDINGS
*********************/
/*********************
MEDIA SIZES
*********************/
/*********************
WRAP SIZES
*********************/
/******************************************************************

Stylesheet: Grid Stylesheet

Still using this pretty basic grid, but it's customized a bit to
feel more like Bootstrap.
Wrap grid columns in grid-skin wrappers.

******************************************************************/
.with-padding {
  padding: 0 5px; }

.with-padding-large {
  padding: 0 10px; }

.grid-skin {
  position: relative;
  margin: 0 -5px; }

.grid-skin-large {
  position: relative;
  margin: 0 -10px; }

/* Mobile Grid Styles */
@media (max-width: 767px) {
  .m-all {
    float: left;
    width: 100%; }
  .m-1of2 {
    float: left;
    width: 50%; }
  .m-1of3 {
    float: left;
    width: 33.33%; }
  .m-2of3 {
    float: left;
    width: 66.66%; }
  .m-1of4 {
    float: left;
    width: 25%; }
  .m-3of4 {
    float: left;
    width: 75%; } }

/* Large Mobile to Tablet Grid Styles */
@media (min-width: 480px) and (max-width: 767px) {
  .mt-all {
    float: left;
    width: 100%; }
  .mt-1of2 {
    float: left;
    width: 50%; }
  .mt-1of3 {
    float: left;
    width: 33.33%; }
  .mt-2of3 {
    float: left;
    width: 66.66%; }
  .mt-1of4 {
    float: left;
    width: 25%; }
  .mt-3of4 {
    float: left;
    width: 75%; } }

/* Portrait tablet to landscape */
@media (min-width: 768px) and (max-width: 1029px) {
  .t-all {
    float: left;
    width: 100%; }
  .t-1of2 {
    float: left;
    width: 50%; }
  .t-1of3 {
    float: left;
    width: 33.33%; }
  .t-2of3 {
    float: left;
    width: 66.66%; }
  .t-1of4 {
    float: left;
    width: 25%; }
  .t-3of4 {
    float: left;
    width: 75%; }
  .t-1of5 {
    float: left;
    width: 20%; }
  .t-2of5 {
    float: left;
    width: 40%; }
  .t-3of5 {
    float: left;
    width: 60%; }
  .t-4of5 {
    float: left;
    width: 80%; } }

/* Landscape to small desktop */
@media (min-width: 1030px) {
  .d-all {
    float: left;
    width: 100%; }
  .d-1of2 {
    float: left;
    width: 50%; }
  .d-1of3 {
    float: left;
    width: 33.33%; }
  .d-2of3 {
    float: left;
    width: 66.66%; }
  .d-1of4 {
    float: left;
    width: 25%; }
  .d-3of4 {
    float: left;
    width: 75%; }
  .d-1of5 {
    float: left;
    width: 20%; }
  .d-2of5 {
    float: left;
    width: 40%; }
  .d-3of5 {
    float: left;
    width: 60%; }
  .d-4of5 {
    float: left;
    width: 80%; }
  .d-1of6 {
    float: left;
    width: 16.6666666667%; }
  .d-1of7 {
    float: left;
    width: 14.2857142857%; }
  .d-2of7 {
    float: left;
    width: 28.5714286%; }
  .d-3of7 {
    float: left;
    width: 42.8571429%; }
  .d-4of7 {
    float: left;
    width: 57.1428572%; }
  .d-5of7 {
    float: left;
    width: 71.4285715%; }
  .d-6of7 {
    float: left;
    width: 85.7142857%; }
  .d-1of8 {
    float: left;
    width: 12.5%; }
  .d-1of9 {
    float: left;
    width: 11.1111111111%; }
  .d-1of10 {
    float: left;
    width: 10%; }
  .d-1of11 {
    float: left;
    width: 9.09090909091%; }
  .d-1of12 {
    float: left;
    width: 8.33%; } }

@media (min-width: 768px) {
  .grid-space-right {
    padding-right: 20px; } }

.icon-boxes {
  position: relative;
  z-index: 1;
  transition: all .35s ease-in-out; }
  .icon-boxes .grid-skin-large {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center; }

.ikon-boks {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  margin-bottom: 20px; }
  .ikon-boks .boksen {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    text-align: center;
    background: #fff;
    box-shadow: 0 2px 10px 0 rgba(45, 42, 38, 0.04);
    border: 1px solid #f1f1f1;
    border-radius: 8px;
    padding: 40px 20px;
    width: 100%;
    height: 100%;
    transition: all .214s ease-in-out; }
  .ikon-boks a.boksen {
    text-decoration: none;
    position: relative;
    overflow: hidden; }
    .ikon-boks a.boksen:before {
      content: '';
      display: block;
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      width: 100%;
      transform: translateY(calc(100% + 1px));
      background: #daaa00;
      transition: all .35s ease-in-out;
      pointer-events: none; }
    .ikon-boks a.boksen:hover, .ikon-boks a.boksen:focus {
      box-shadow: 0 0 7px 0px rgba(45, 42, 38, 0.17);
      border-color: #daaa00; }
      .ikon-boks a.boksen:hover:before, .ikon-boks a.boksen:focus:before {
        transform: translateY(0); }
      .ikon-boks a.boksen:hover .ikon img, .ikon-boks a.boksen:focus .ikon img {
        transform: translate(-50%, -50%) scale(1.04); }
  .ikon-boks h3,
  .ikon-boks .ikon {
    z-index: 1; }
  .ikon-boks h3 {
    font-size: 1.5rem;
    line-height: 1.2;
    margin-top: 0;
    margin-bottom: 0;
    word-break: break-word;
    hyphens: auto; }
  .ikon-boks .ikon {
    margin-bottom: 10px;
    width: 60px;
    height: 60px;
    position: relative; }
    .ikon-boks .ikon img {
      width: auto;
      height: auto;
      max-width: 100%;
      max-height: 100%;
      min-width: 1px;
      min-height: 1px;
      position: absolute;
      transform: translate(-50%, -50%);
      top: 50%;
      left: 50%;
      transition: all .35s ease-in-out; }

@media (min-width: 768px) {
  .ikon-boks .boksen {
    padding: 40px 20px; } }

@media (min-width: 1030px) {
  .ikon-boks .boksen {
    padding: 40px 20px; }
  .ikon-boks .ikon {
    margin-bottom: 20px; } }

/* Main column width */
body.block-editor-page .ikon-boks h3 {
  font-size: 13px; }

body.block-editor-page .ikon-boks .ikon {
  width: 50px;
  height: 50px;
  margin-bottom: 10px; }

body.block-editor-page .ikon-boks a {
  color: #2d2a26; }

body.block-editor-page .ikon-boks .boksen {
  padding: 20px 10px 10px; }