/***************************************
*
*___TRIPLEPRO CUSTOM_______________
*
*   Template Maurits
*   www.taxatiethijssen.nl
*
***************************************/

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap');

:root
{
  /*--font-size             : 16px;*/
  --font-size             : clamp(12px, 0.85vw, 32px);
  --font-text             : 'Nunito', sans-serif;
  --font-header           : 'Plus Jakarta Sans', sans-serif;

  --luna-scrolled         : #FFFFFF;
  --color-light           : #F9F9F9;
  --color-dark            : hsl(0, 0%, 0%);
  --color-usp             : #FFFFFF;
  --color-link            : #753572;

  --website-content-width : 75em;
  --element-padding       : calc(calc(100vw - var(--website-content-width)) / 2);

  --color-1               : #883277;
  --color-2               : #541048;
  --color-3               : #753572;
  --color-4               : #934584;
  --color-4-transparent   : hsl(310deg 35% 42.5% / 65%);
  --color-5               : #FFFFFF;
  --color-6               : #E6E6E7;
  --color-button          : #39062F;
}

/** BASE
 ***********************************************/

html
{
  font-size       : var(--font-size);
  font-family     : var(--font-text);

  scroll-behavior : smooth;
}

body
{
  color : #000000;
}

h1
{
  color       : #000000;
  font-size   : 2rem;
  font-weight : 700;
  font-family : var(--font-header);

  margin      : 0 0 0.25em;
}

h2
{
  color       : #000000;
  font-size   : 1.8rem;
  font-weight : 700;
  font-family : var(--font-header);

  margin      : 0 0 0.25em;
}

h3
{
  color       : var(--color-button);
  font-size   : 1.25rem;
  font-weight : 400;
  font-family : var(--font-header);

  margin      : 0 0 0.25em;
}

p:last-of-type
{
  margin : 0;
}

a
{
  color : var(--color-link);
}

a:hover
{
  text-decoration : underline;
}

a.button
{
  color           : var(--color-light);
  text-align      : center;
  text-decoration : none;

  display         : inline-flex;
  align-items     : center;

  width           : max-content;
  padding         : 0.5em 1em;

  border          : 1px solid var(--color-button);
  background      : var(--color-button);
  border-radius   : 0.3em;

  transition      : 0.2s;
}

a.button:after
{
  content     : "\e5cc";
  font-family : 'Material Symbols Outlined', sans-serif;
  font-size   : 1.6em;
  line-height : 1;
}

a.button:hover
{
  padding    : 0.65em 1.25em;
  margin     : -0.15em -0.25em;
  background : var(--color-button);
}

a.button.inverse
{
  color      : var(--color-button);
  background : transparent;
}

a.button.inverse:hover
{
  color      : var(--color-button);
  background : transparent;
}

/** UL.CHECKMARKS
 ***************************/

ul.checkmarks
{
  padding : 0;
}

ul.checkmarks li
{
  font-size     : 1.2em;
  text-align    : left;

  position      : relative;

  display       : block;
  padding-left  : 1.25em;
  margin-bottom : 0.75em;
}

ul.checkmarks li p
{
  margin : 0;
}

ul.checkmarks li:before
{
  content     : "\f00c";
  font-family : FontAwesome, sans-serif;

  position    : absolute;
  left        : 0;
  top         : 0;
}

/** MODULES
 ***********************************************/

/** KRUIMELPAD
 ***************************/

.module.kruimelpad a:hover
{
  text-decoration : underline;
}

.module.kruimelpad a:nth-child(1n+3)::after
{
  top : 0;
}

/** SLIDESHOW
 ***************************/

.slider .navigation > *:hover:after
{
  color : var(--color-button);
}

/** REVIEW
 ***************************/

#hoofd > .element.text.content_line_3
{
  text-align : center;
}

.module.review .review_blocks
{
  --module-review-top-row        : var(--color-6);
  --module-review-top-row-active : var(--color-5);
  --module-review-stars          : var(--color-5);
}

/** SERVICES
 ***************************/

#hoofd > .element.text.content_line_1
{
  text-align : center;
}

.module.diensten
{
  display         : flex;
  flex-flow       : row wrap;
  justify-content : center;
}

.module.diensten .content
{
  display          : inline-block;
  width            : 100%;
  max-width        : 20em;
  min-width        : 15em;
  padding          : 0.5em;

  background-color : var(--color-light);
}

.module.diensten img
{
  object-fit : cover;
  height     : 12.5em;
  width      : 100%;
}

.module.diensten .link
{
  color           : var(--color-button);
  text-align      : center;
  text-decoration : none;

  display         : flex;
  align-items     : center;
  width           : max-content;
  padding         : 0.25em 0.25em 0.25em 0.75em;
  margin          : 1em auto 0.5em;

  border          : 1px solid;

  border-radius   : 0.3em;

  transition      : 0.2s;
}

.module.diensten .link:hover .material-symbols-outlined
{
  font-weight : bold;
}

/** ELEMENTS
 ***********************************************/

[data-responsive] #hoofd > .element.text:empty
{
  margin  : 0;
  padding : 0;
}

div#copyright a svg
{
  width  : 12.5em !important;
  height : 2em !important;
}

/** UNIQUE-SELLING-POINTS
 ***************************/

#hoofd > .element.text.usp
{
  color            : var(--color-light);
  background-color : var(--color-3);

  position         : sticky !important;
  top              : 0 !important;

  height           : 2rem !important;

  z-index          : 500;
}

.unique-selling-points
{
  width   : calc(100% - 8.25em);
  padding : 0 10em;
}

.unique-selling-points ul
{
  display         : flex;
  height          : 2em;
  margin          : 0;

  justify-content : space-between;
  flex-flow       : row;

  align-items     : center;

  overflow        : hidden;

  list-style-type : none;
}

.unique-selling-points ul li
{
  display         : flex;
  margin          : 0;
  padding         : 0;

  white-space     : nowrap;
  justify-content : center;
  align-items     : center;
}

.unique-selling-points ul li:before
{
  content     : "\f058";

  color       : var(--color-usp);
  font-family : FontAwesome, sans-serif;
  font-size   : 1.2em;

  position    : relative;
  left        : -0.5rem;
}

@media (max-width : 1365px)
{
  .unique-selling-points
  {
    position : absolute;
    padding  : 0;
  }

  .unique-selling-points ul
  {
    flex-flow       : column wrap;
    justify-content : center;
  }

  .unique-selling-points ul li
  {
    width           : 100%;
    justify-content : center;
    align-items     : center;
    animation       : scroll-horizontal 20s ease-out infinite alternate;
  }
}

@keyframes scroll-horizontal
{
  0%,
  20%
  {
    transform : translateX(0);
  }
  25%,
  45%
  {
    transform : translateX(-100%);
  }
  50%,
  70%
  {
    transform : translateX(-200%);
  }
  75%,
  100%
  {
    transform : translateX(-300%);
  }
}

#hoofd > .element.text.usp .usp_grid .whatsapp
{
  padding-top : 0.15em;
}

#hoofd > .element.text.usp .usp_grid .translate
{
  padding-top : 0.35em;
}

/** USP STRUCTURE
 ***************************/

#hoofd > .element.text.usp .usp_grid
{
  display               : grid;
  gap                   : 1em;
  grid-template-columns : auto 1.75em 2.5em;
  grid-template-areas   :
    'unique_selling_points whatsapp translate';
}

#hoofd > .element.text.usp .usp_grid .unique-selling-points
{
  grid-area : unique_selling_points;
}

#hoofd > .element.text.usp .usp_grid .translate
{
  grid-area : translate;
}

#hoofd > .element.text.usp .usp_grid .whatsapp
{
  grid-area : whatsapp;
}

/** MENU
 ***************************/

#hoofd > .element.menu
{
  height           : auto;
  top              : 2rem !important;

  background-color : var(--luna-scrolled);
}

#hoofd > .element.menu.luna-scrolled
{
  background-color : #FFFFFF;
}

#hoofd > .element.menu .menu
{
  font-size : 1.2rem;
}

#hoofd > .element.menu ul ul
{
  background-color : var(--luna-scrolled);
}

#hoofd > .element.menu ul a
{
  color     : #000000;
  font-size : 1.15em;
}

#hoofd > .element.menu li.active > a
{
  color       : var(--color-3);
  font-weight : bold;
}

#hoofd > .element.menu .bar_label
{
  font-size : 1em;
}

#hoofd > .element.menu label
{
  color     : var(--color-1);
  font-size : 0.5em;
}

@media (max-width : 1364px)
{
  #hoofd > .element.menu ul.responsive
  {
    background-color : var(--color-light);
  }
}

/** MENU|LOGO|CONTACT
 ***************************/

#hoofd > .element.menu.top .website-menu-logo img
{
  object-fit : contain;
}

#hoofd > .element.menu.top .website-menu-phone
{
  display     : flex;
  align-items : center;
  gap         : 1em;
}

#hoofd > .element.menu.top .website-menu-phone a
{
  color : var(--color-light);
}

#hoofd > .element.menu.top .website-menu-phone a.button
{
  padding : 0.65em 1.25em;
}

#hoofd > .element.menu.top .website-menu-phone a.button:hover
{
  padding : 0.80em 1.5em;
}

@media (min-width : 768px)
{
  #hoofd > .element.menu.top .website-menu-phone a
  {
    display : inline-flex;
  }
}

#hoofd > .element.menu.top .website-menu-phone a.nwwi_logo img
{
  display : inline-block;
  height  : 3em;
}

@media (min-width : 1365px)
{
  #hoofd > .element.menu.top
  {
    place-items : center center;
    padding     : 2em;
  }

  #hoofd > .element.menu.top .website-menu-logo img
  {
    display : block;
    height  : 3.5em;
  }
}

@media (min-width : 400px) and (max-width : 1364px)
{
  #hoofd > .element.menu.top
  {
    padding-left : 1em;
  }
}

@media (max-width : 1364px)
{
  #hoofd > .element.menu.top .website-menu-logo img
  {
    height     : 3em;
    margin-top : 0.5em;
  }

  #hoofd > .element.menu.top .website-menu-phone a
  {
    padding : 0.5em 0.5em;
  }
}

@media (max-width : 768px)
{
  #hoofd > .element.menu.top .website-menu-phone
  {
    display         : grid;
    align-items     : center;
    justify-content : center;
  }
}

/** HEADER
 ***************************/

#hoofd > .element.text.header:not(.no_page_content)
{
  margin-top : -5em
}

#hoofd > .element.text.header img
{
  display : block;
  height  : 60vh;
  width   : 100%;
}

#home #hoofd > .element.text.header img
{
  height     : 70vh;
  object-fit : cover;
}

@media (max-width : 1364px)
{
  #hoofd > .element.text.header img
  {
    height : 30vh;
  }

  #home #hoofd > .element.text.header img
  {
    height : 35vh;
  }
}

/** SIDE_MASK
 ***************************/

body[data-boxsizing="border_box"] .side_mask
{
  box-sizing : content-box;
}

.side_mask
{
  position         : absolute;
  top              : 0;
  left             : 0;
  right            : 0;

  display          : block;
  height           : 100%;
  max-width        : 22em;

  padding-left     : var(--element-padding);

  justify-items    : left;
  align-items      : center;
  align-content    : center;

  background-color : var(--color-2);
}

@media (max-width : 1364px)
{
  .side_mask
  {
    display : none;
  }
}

/** HEADER_BLOCK
 ***************************/

body:not(#home) #hoofd .element.text.header
{
  height     : max-content !important;
  margin-top : -10em;
}

#hoofd > .element.text.header_block
{
  color            : var(--color-light);

  text-align       : center;

  background-color : var(--color-4);
  z-index          : 400;
}

#home #hoofd > .element.text.header_block
{
  text-align : left;
}

@media (min-width : 1365px)
{
  #home #hoofd > .element.text.header_block
  {
    width            : 45em;
    height           : max-content !important;
    margin-top       : 10em;
    margin-bottom    : -100%;
    margin-left      : calc(var(--element-padding) + 5em);

    border-radius    : 0.2em;
    background-color : var(--color-4-transparent);

    z-index          : 400;
  }
}

body:not(#home) #hoofd > .element.text.header_block *
{
  color : var(--color-light);
}

#home #hoofd > .element.text.header_block h1
{
  color       : var(--color-light);
  line-height : 1;
}

#home #hoofd > .element.text.header_block a
{
  color : var(--color-link);
}

#home #hoofd > .element.text.header_block a.button
{
  color         : var(--color-light);
  margin-right  : 0.5em;
  margin-bottom : 0.5em;
}

/** SUMMARY
 ***************************/

.summary .material-symbols-outlined
{
  color            : var(--color-light);
  font-size        : 2.5em;

  display          : inline-block;
  padding          : 0.3em;
  margin-top       : 0.15em;
  margin-right     : 0.75em;

  border-radius    : 50%;
  background-color : var(--color-usp);
}

/** OVERLAP_BLOCK
 ***************************/

.overlap_block
{
  color            : var(--color-light);

  padding          : 1.25em;
  margin-top       : 2em;
  margin-bottom    : 2em;

  background-color : var(--color-2);
}

@media (min-width : 1365px)
{
  .overlap_block
  {
    margin-top  : 0;
    margin-left : -8em;
  }
}

/** PERSONNEL
 ***************************/

.module.personeel h2
{
  color     : var(--color-dark);
  font-size : 1em;
}

.module.personeel .visible
{
  height : 20em;
}

.module.personeel .visible .content
{
  border-radius       : 0.4em;
  background-color    : var(--color-light);

  grid-template-rows  : 80% auto;
  grid-template-areas : "image" "header";
}

.module.personeel .visible .content .image
{
  padding       : 0.25em;
  border-radius : 0.4em;
}

.module.personeel .visible .content .title
{
  display         : flex;
  align-items     : center;
  justify-content : center;
}

.module.personeel .visible .content .collections
{
  display : none;
}

@media (min-width : 1000px)
{
  .module.personeel .visible
  {
    width : 63em;
  }
}

.module.personeel .visible .scroller .row
{
  margin-right : 0.67em;
}

.module.personeel .visible .scroller .row.active img
{
  border-color : transparent;
}

/** CONTENT_LINE
 ***************************/

#hoofd > .element.text.content_line_1
{
  background-color : #F0E9F0;
}

#hoofd > .element.text.content_line_3
{
  background : var(--color-light);
}

#hoofd > .element.text.content_line_4
{
  color            : var(--color-light);

  text-align       : center;
  background-color : var(--color-3);
}

#hoofd > .element.text.content_line_4 h3,
#hoofd > .element.text.content_line_4 > h2
{
  font-size : 1.5em;
  color     : var(--color-light);
}

#hoofd > .element.text.content_line_4 a
{
  text-decoration : none;
}

/** CONTENT_BLOCK
 ***************************/

#hoofd > .element.text.content_block_1,
#hoofd > .element.text.content_block_2
{
  background : var(--color-light);
}

#hoofd > .element.text.content_block_4 .luna-ghost
{
  color     : hsla(303, 38%, 33%, 0.2);

  font-size : 17.5em;

  top       : 0.40em;
}

#hoofd > .element.text.content_block_4
{

}

/** CONTENT_BLOCK 5 | 6
 ***************************/

#hoofd > .element.text.content_block_5 img
{
  display    : block;
  width      : 100%;
  max-height : 50em;
  object-fit : cover;
  height     : 100%;
}

#hoofd > .element.text.content_block_6
{
  color            : var(--color-light);
  background-color : var(--color-4);
}

#hoofd > .element.text.content_block_6 h2
{
  color : var(--color-light);
}

#hoofd > .element.text.content_block_6 h3
{
  color : var(--color-button);
}

#hoofd > .element.text.content_block_6 a
{
  color : var(--color-link);
}

#hoofd > .element.text.content_block_6 a.button
{
  color : var(--color-light);
}

/** CONTENT_BLOCK 7 | 8
 ***************************/

#hoofd > .element.text.content_block_7,
#hoofd > .element.text.content_block_8
{
  text-align       : left;
  background-color : #7535721C;
}

#hoofd > .element.text.content_block_7 a
{
  color : var(--color-5)
}

#hoofd > .element.text.content_block_7 h2,
#hoofd > .element.text.content_block_7 h3
{
  color       : var(--color-dark);
  font-weight : 400;
}

#hoofd > .element.text.content_block_7 h2
{
  font-size : 1.6em;
}

@media (min-width : 1365px)
{
  #hoofd > .element.text.content_block_7
  {
    display       : grid;
    justify-items : start;
  }

  #hoofd > .element.text.content_block_8
  {
    display         : grid;

    align-items     : center;
    justify-content : start;
  }
}

/** FOOTER
 ***************************/

#hoofd > .element.text.footer
{
  color            : var(--color-dark);

  background-color : #E9D5E4;

  overflow         : hidden;
}

#hoofd > .element.text.footer .footer_block
{
  display               : grid;
  grid-gap              : 1.5em;
  grid-template-columns : 2fr 2fr 1fr;
}

@media (max-width : 900px)
{
  #hoofd > .element.text.footer .footer_block
  {
    grid-template-columns : 1fr;
  }
}

#hoofd > .element.text.footer .logo
{
  width  : 15em;
  margin : 0 auto;
}

#hoofd > .element.text.footer hr
{
  color : var(--color-4);
}

#hoofd > .element.text.footer h2
{
  color     : var(--color-dark);
  font-size : 1.3em;
}

#hoofd > .element.text.footer a
{
  color : var(--color-dark);
}

#hoofd > .element.text.footer > img
{
  position  : absolute;
  bottom    : 0;
  left      : 0;
  right     : 0;

  max-width : unset;
  height    : 100%;

  z-index   : -1;
}

.partners img
{
  max-height   : 5em;
  margin-top   : 1em;
  margin-right : 1em;
}

/** SCROLLBAR
 ***************************/

#hoofd
{
  padding-bottom : 0.5em;
}

body[data-responsive] #hoofd > .element.text.scrollbar
{
  position : fixed !important;
  bottom   : 0;

  padding  : 0;

  z-index  : 1000;
}

.element.text.scrollbar .luna-scrollbar-track
{
  background-color : var(--color-2);
}

.element.text.scrollbar .luna-scrollbar-thumb
{
  background-color : var(--color-3);
}

/** FORM
 *************************************/

form
{
  font-size : 0.85em;
}

form > ul
{
  display   : flex;
  flex-flow : row wrap;
  gap       : 1em;
}

form > ul > li
{
  flex : 1 1 99%;
}

form > ul > li.block
{
  flex      : 1 1 45%;
  min-width : 20em;
}

form p
{
  color : var(--color-3);
}

form label
{
  color       : var(--color-3);
  font-weight : bold;
}

form input,
form textarea
{
  color            : var(--color-3);

  padding          : 1.25em 0.75em;
  margin-bottom    : 0.75em;

  border           : none;
  background-color : #FFFFFF;
  box-shadow       : 0.1em 0.1em 0.2em rgba(0, 0, 0, 0.1);
}

form input:focus,
form textarea:focus,
form input:focus-visible,
form textarea:focus-visible
{
  outline : 0.15em solid var(--color-3) !important;
}

form input[type=submit]
{
  color           : var(--color-light);
  font-weight     : bold;

  text-align      : left;
  text-decoration : none;

  display         : inline-block;
  width           : auto;
  padding         : 0 1.5em;
  margin          : 1.5em 0 0 0;

  background      : var(--color-2);
  border-radius   : 0.2em;

  box-shadow      : 0.1em 0.1em 0.2em rgba(0, 0, 0, 0.1);

  transition      : 0.2s;
}

form input[type=submit]:hover
{
  background : var(--color-2);
}

@media (max-width : 1364px)
{
  form li[type=submit]
  {
    text-align : center;
  }
}

/** STRUCTURE
 ***********************************************/

/** PADDING
 *************************************/

#hoofd > .element.menu,
#hoofd > .element.text.header,
#hoofd > .element.text.content_block_5
{
  padding : 0;
}

#hoofd > .element.text.content_block_1,
#hoofd > .element.text.content_block_2,
#hoofd > .element.text.content_line_1,
#hoofd > .element.text.content_block_3,
#hoofd > .element.text.content_block_4,
#hoofd > .element.text.content_line_2,
#hoofd > .element.text.content_block_6,
#hoofd > .element.text.content_line_3,
#hoofd > .element.text.content_block_7,
#hoofd > .element.text.content_block_8,
#hoofd > .element.text.content_line_4,
#hoofd > .element.text.footer
{
  padding : 2em;
}

#hoofd > .element.text.content_block_8,
#hoofd > .element.text.content_block_7
{
  padding : 1em;
}

#hoofd > .element.text.header_block
{
  padding : 2.5em;
}

@media (min-width : 1365px)
{
  #hoofd > .element.text.content_block_1,
  #hoofd > .element.text.content_block_2,
  #hoofd > .element.text.content_line_1,
  #hoofd > .element.text.content_block_3,
  #hoofd > .element.text.content_block_4,
  #hoofd > .element.text.content_line_2,
  #hoofd > .element.text.content_block_6,
  #hoofd > .element.text.content_line_3,
  #hoofd > .element.text.content_line_4,
  #hoofd > .element.text.footer
  {
    padding : 4em;
  }

  #hoofd > .element.menu,
  #hoofd > .element.text.usp,
  #hoofd > .element.text.content_block_1,
  #hoofd > .element.text.content_line_1,
  #hoofd > .element.text.content_block_3,
  #hoofd > .element.text.content_line_2,
  #hoofd > .element.text.content_line_3,
  #hoofd > .element.text.content_block_7,
  #hoofd > .element.text.content_line_4,
  #hoofd > .element.text.footer
  {
    padding-left : var(--element-padding);
  }

  #hoofd > .element.menu,
  #hoofd > .element.text.usp,
  #hoofd > .element.text.content_block_2,
  #hoofd > .element.text.content_line_1,
  #hoofd > .element.text.content_block_4,
  #hoofd > .element.text.content_line_2,
  #hoofd > .element.text.content_block_6,
  #hoofd > .element.text.content_line_3,
  #hoofd > .element.text.content_block_8,
  #hoofd > .element.text.content_line_4,
  #hoofd > .element.text.footer
  {
    padding-right : var(--element-padding);
  }
}

/** GRID
 *************************************/

@media (min-width : 1365px)
{
  #hoofd
  {
    grid-gap              : 0;
    grid-template-columns : 1fr 4em 4em 1fr;
    grid-template-areas   :
      "usp usp usp usp"
      "menu menu menu menu"
      "header_block header_block header_block header_block"
      "header header header header"
      "content_block_1 content_block_1 content_block_2 content_block_2"
      "content_line_1 content_line_1 content_line_1 content_line_1"
      "content_block_3 content_block_3 content_block_3 content_block_4"
      "content_line_2 content_line_2 content_line_2 content_line_2"
      "content_block_5 content_block_6 content_block_6 content_block_6"
      "content_line_3 content_line_3 content_line_3 content_line_3"
      "content_line_4 content_line_4 content_line_4 content_line_4"
      "content_block_7 content_block_7 content_block_7 content_block_8"
      "footer footer footer footer";
  }
}

@media (max-width : 1365px)
{
  #hoofd
  {
    grid-gap              : 0;
    grid-template-columns : auto;
    grid-template-areas   :
      "usp"
      "menu"
      "header"
      "header_block"
      "content_block_1"
      "content_block_2"
      "content_line_1"
      "content_block_3"
      "content_block_4"
      "content_line_2"
      "content_block_5"
      "content_block_6"
      "content_line_3"
      "content_line_4"
      "content_block_7"
      "content_block_8"
      "footer"
      "scrollbar";
  }
}

.element.menu
{
  grid-area : menu;
}

.element.text.usp
{
  grid-area : usp;
}

.element.text.header
{
  grid-area : header;
}

.element.text.header_block
{
  grid-area : header_block;
}

.element.text.content_block_1
{
  grid-area : content_block_1;
}

.element.text.content_block_2
{
  grid-area : content_block_2;
}

.element.text.content_line_1
{
  grid-area : content_line_1;
}

.element.text.content_block_3
{
  grid-area : content_block_3;
}

.element.text.content_block_4
{
  grid-area : content_block_4;
}

.element.text.content_line_2
{
  grid-area : content_line_2;
}

.element.text.content_block_5
{
  grid-area : content_block_5;
}

.element.text.content_block_6
{
  grid-area : content_block_6;
}

.element.text.content_line_3
{
  grid-area : content_line_3;
}

.element.text.content_line_4
{
  grid-area : content_line_4;
}

.element.text.content_block_7
{
  grid-area : content_block_7;
}

.element.text.content_block_8
{
  grid-area : content_block_8;
}

.element.text.footer
{
  grid-area : footer;
}

.element.text.scrollbar
{
  grid-area : scrollbar;
}

/** MENU
 ***************************/

@media (min-width : 1365px)
{
  .element.menu.top
  {
    grid-template-columns : 5em 15em auto 30em;
    grid-template-areas   : ". top_logo top_menu top_phone";
  }
}

@media (min-width : 768px) and (max-width : 1364px)
{
  .element.menu.top
  {
    grid-template-columns : 5em auto 25em;
    grid-template-areas   : "top_menu top_logo top_phone";
  }
}

@media (max-width : 768px)
{
  .element.menu.top
  {
    grid-template-columns : 5em auto 7.5em;
    grid-template-areas   : "top_menu top_logo top_phone";
  }
}

.element.menu
{
  display : grid;
}

.element.menu.top .website-menu-logo
{
  grid-area : top_logo;
}

.element.menu.top .website-menu-phone
{
  grid-area : top_phone;
}

.element.menu.top .website-menu-menu
{
  grid-area : top_menu;
}