/***************************************
*
*___TRIPLEPRO CUSTOM_______________
*
*   Template Casper
*   www.warta.template.triplepro.nl
*
***************************************/
  
@import url('https://fonts.googleapis.com/css2?family=Hind+Guntur:wght@300;400;500;600;700&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

:root
{
  --font-size             : 16px;
  --font-text             : 'Hind Guntur', sans-serif;
  --font-header           : 'Montserrat', sans-serif;

  --color-light           : hsl(0, 0%, 100%);
  --color-dark            : #023047;

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

  --color-1               : #003E9B;
  --color-2               : #E3EAF4;
  --color-3               : #EBEBEB;

  --color-button          : #FB8500;
  --color-link            : #FB8500;
}

@media(min-width: 1365px)
{
  #copyright
  {
    --color-copyright: var(--color-light);
  }
}

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

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

  scroll-behavior : smooth;
}

@media (max-width : 1364px)
{
  body
  {
    font-size : 0.8em;
  }
}

h1
{
  color       : inherit;
  font-size   : 2.5rem;
  font-weight : 700;
  font-family : var(--font-header);

  margin      : 0 0 0.25em;
}

h2
{
  color       : inherit;
  font-size   : 1.6rem;
  font-weight : 500;
  font-family : var(--font-header);

  margin      : 0 0 0.25em;
}

h3
{
  color       : var(--color-link);
  font-weight : 500;
}

pre
{
  color              : var(--color-link);
  font-family        : inherit;

  display            : inline-block;
  width              : max-content;
  padding            : 0.25em 0;
  padding-inline-end : 3em;

  border-top         : 0.15em solid;
}

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;

  vertical-align  : middle;

  width           : max-content;
  padding         : 0.3em 1.5em 0.1em;

  border          : 0.15em solid var(--color-button);
  background      : var(--color-button);
  border-radius   : 5em;

  transition      : 0.2s;
}

a.button:hover
{
  padding    : 0.5em 1.7em 0.3em;
  margin     : -0.2em;
  background : var(--color-button);
}

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

a.button.line
{
  color         : var(--color-button);

  padding       : 0.5em 0;

  border        : none;
  border-bottom : 0.1em solid var(--color-button);
  border-radius : 0;

  background    : transparent;
}

a.button.line:hover
{
  padding : 0.5em 0.3em;
  margin  : 0 -0.3em;
}

.not_visible
{
  display : none;
}

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

ul.checkmarks
{
  padding : 0;
}

ul.checkmarks li
{
  position      : relative;

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

ul.checkmarks li p
{
  margin : 0;
}

ul.checkmarks li:before
{
  content     : "\e2e6";

  color       : #70B77E;
  font-family : 'Material Symbols Outlined', sans-serif;
  font-weight : 700;
  font-size   : 1.15em;

  position    : absolute;
  left        : 0;
  top         : -0.1em;
}

/** BLUE BOX
 ***************************/

.blue-box
{
  border-radius    : 0.4em;

  padding          : 3em;

  background-color : var(--color-1);
  color: #ffff;
}

.blue-box .fa
{
  font-size : 2em;
}

 
/** bedankt page
*****************/

.bedankt
{
  text-align: center;
}

.slideshow img
{
  object-fit : cover;
  width      : 100%;
  height     : 500px;  
}

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

/** BREADCRUMBS
 ***************************/

.module.kruimelpad a
{
  color : inherit;
}

.module.kruimelpad a:hover
{
  color : var(--color-link);
}

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

@media (max-width: 1440px) {
  .module.kruimelpad {
    padding: 2em;
  }
}

/** LIJST
 ***************************/

.left_hand_list
{
  margin-right     : var(--element-padding);
  padding: 2em 2em 2em var(--element-padding);

  border-radius    : 0 3em 3em 0;

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

.module.lijst .row
{
  grid-template-columns : 3em 1.5em auto;

  padding-left          : 0;

  background-color      : transparent;
}

.module.lijst .number
{
  padding : 0.3em 0.25em 0.1em;
}

.module.lijst ul
{
  padding : 0;
}

/** SERVICES
 ***************************/
.module.diensten img{
  width : 30em;
  height : 15em;
  object-fit : cover
}
.module.diensten
{
  display         : flex;
  flex-flow       : row wrap;
  justify-content: center;
}

.module.diensten .content
{
  display          : inline-block;
  width            : 100%;
  max-width        : 22.5em;
  min-width        : 15em;
  padding          : 0;
  margin-right     : 1em;
  margin-bottom    : 1em;

  border-radius    : 0.4em;

  overflow         : hidden;

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

.module.diensten .content .text,
.module.diensten .content .header
{
  padding : 0 1rem;
  margin-top: 1em;
}

.module.diensten .link
{
  color         : var(--color-button);

  width         : max-content;
  padding       : 0.25em 0 0.25em 0.1em;
  margin: 0 1em;
  margin-bottom: 1em;
  /*margin        : 1em 2rem 1.5em;*/

  border-bottom : 0.1em solid;

  transition    : 0.2s;
}

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

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

.visible[data-navigation]:before {
  display : none;
}

.module.review .visible {
    position: relative;
    height: 20em;
    margin: 0 auto;
    overflow: hidden;
    z-index: 1;
}


.module.review .review_block .top_row {
    position: relative;
    width: inherit;
    padding: 0 1em;
    background-color: #ffff;
}

.speech-bubble
{
  color            : transparent;
  font-size        : 1em;

  width            : calc(var(--element-padding) + 24em);
  height           : 16em;

  background-color : var(--color-1);

  border-radius    : 0 3em 0 0;
}

.speech-bubble:after
{
  content          : '';

  position         : absolute;
  bottom           : 0;
  left             : calc(var(--element-padding) - 7em);

  width            : 0;
  height           : 0;
  margin-left      : -1em;
  margin-bottom    : -2em;

  border           : 2em solid transparent;
  border-top-color : var(--color-1);
  border-bottom    : 0;
  border-right     : 0;
}

/** PERSONEEL
 ***************************/

html body[data-responsive] #hoofd > .element .module.personeel img
{
  max-width : 100%;
}

.module.personeel .visible
{
  height         : 17.5em;
  padding-bottom : 0.5em;
}

.module.personeel .visible .scroller .row
{
  height        : 98%;
  margin-right  : 1em;

  border-radius : 0.6em;

  overflow      : hidden;

  box-shadow    : 1px 1px 3px rgb(0, 0, 0, 0.2);
}

.module.personeel .visible .content
{
  grid-gap : 0.25em;
}

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

.module.personeel .visible .content .image img
{
  border : none;
}

.module.personeel .visible .content h2,
.module.personeel .visible .content .text
{
  padding   : 0.2em 1em;
  font-size : 0.8em;
}

/** ELEMENTEN
*********************************/

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

/** BACKGROUND (COLOR)
 ***************************/

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

#hoofd > .element.text.header,
#hoofd > .element.text.breadcrumbs,
/*#hoofd > .element.text.content_block_2,*/
/*#hoofd > .element.text.content_block_3,*/
#hoofd > .element.text.content_block_5,
#hoofd > .element.text.content_block_6,
#hoofd > .element.text.contact,
#hoofd > .element.text.contact_form
{
  background-color : var(--color-2);
}
#home #hoofd > .element.text.content_block_2,
#home #hoofd > .element.text.content_block_3
{
  background-color : var(--color-2);
}

/** SLIDESHOW
 ***************************/
 
.slider .navigation
{
 grid-template-columns: 2em repeat(auto-fit, 2.5em);
}

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

#hoofd > .element.text.usp
{
  position              : sticky !important;
  top                   : 0 !important;

  display               : grid;
  height                : 2rem !important;
  padding               : 0 2em;

  grid-template-columns : 5fr 1fr;
  grid-template-areas   : "usp phone";

  z-index               : 500;
}

#hoofd > .element.text.usp .website-phone
{
  grid-area       : phone;

  display         : flex;
  align-items     : center;
  justify-content : end;

  padding         : 0 0.7em;

  z-index         : 2;
}

#hoofd > .element.text.usp .website-phone a
{
  color   : inherit;
  display : flex;
}

.unique-selling-points
{
  grid-area : usp;
  z-index   : 1;
}

.unique-selling-points
{
  padding : 0 10em;
}

.unique-selling-points ul
{
  display         : flex;
  height          : 2.15em;
  margin          : 0;
  padding         : 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;
  padding-left    : 0.5rem;

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

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

  color       : var(--color-2);
  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           : 100vw;
    justify-content : center;
    align-items     : center;
    animation       : scroll-horizontal 20s ease-out infinite alternate;
  }
}

@keyframes scroll-horizontal
{
  0%,
  30%
  {
    transform : translateX(0);
  }
  35%,
  65%
  {
    transform : translateX(-100%);
  }
  70%,
  100%
  {
    transform : translateX(-200%);
  }
}

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

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

  transition       : 0.4s;
  background-color : var(--color-light);

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

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

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

#hoofd > .element.menu ul a
{
  color : var(--color-dark);
   font-weight : bold;
}

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

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

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

@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 a
{
  color : var(--color-light);
}

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

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

@media (max-width : 1364px)
{
  #hoofd > .element.menu.top
  {
    padding-right : 0.5em;
  }

  #hoofd > .element.menu.top .website-menu-phone
  {
    display         : grid;
    align-items     : center;
    justify-content : center;
  }

  #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;
  }
}

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

#hoofd > .element.text.header h1
{
  text-align : center;
  margin     : 0;
}

/** CONTENT BLOCK|2|3|5|6|8
 ***************************/

/*#home #hoofd > .element.text.content_block_1*/
/*{*/
/*  padding      : 4em 15em;*/
/*  padding-left : var(--element-padding);*/
/*}*/


 
#home #hoofd > .element.text.content_block_2 img
{
  object-fit    : cover;
  height        : 100%;

  border-radius : 0 0 0 3em;
}
body:not(.home) #hoofd > .element.text.content_block_2 img{
  object-fit    : cover;
  height        : 30em;
  width        :  50em;
  border-radius : 0 0 3em 0;
}

#home #hoofd > .element.text.content_block_3 img
{
  height      : 4.5em;
  margin-left : 1em;
}

 
#hoofd > .element.text.content_block_6 img{
  border-radius : 0 0 3em 0;
}
#hoofd > .element.text.content_block_5 img
{
  object-fit    : cover;
  height        : 30em;
  width        : 50em;
  border-radius : 0 0 0 3em;
}

#hoofd > .element.text.content_block_8 img
{
  object-fit    : cover;
  height        : 30em;
  width        : 50em;
  border-radius : 0 0 3em 0;
}





/** CONTENT LINE 1
 ***************************/



/** CONTENT LINE 2
 ***************************/

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

/** CONTACT
 ***************************/
.contact_footer_text{
    font-size: 1.5em;
    margin: 0;
    margin-bottom: 0.5em;
}
.contact_footer
{
  text-align       : center;
  background-color : var(--color-2);
}

.contact_footer h3{
  font-size: 2.5em;
   margin: 0;
}

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

#hoofd > .element.text.footer
{
  background-color : var(--color-1);
  color : #fff;
}

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

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

#hoofd > .element.text.footer .logo img
{
  width : 15em;
}

#hoofd > .element.text.footer h2
{
  font-size : 1.3em;
}

#hoofd > .element.text.footer a
{
  color : inherit;
}

#hoofd > .element.text.footer .social a
{
  font-size : 2em;
}

/** SITEMAP
 ***************************/

.sitemap ul ul {
  display: none;
}

#hoofd > .element.text.footer .module.sitemap
{
  height : auto;
}

#hoofd > .element.text.footer .module.sitemap a
{
  border-bottom : none;
  padding       : 0;
  font-size     : 1em;
}

#hoofd > .element.text.footer .module.sitemap a:hover
{
  text-decoration : underline;
}

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

#hoofd
{
  padding-bottom : 0.5em;
}

body[data-responsive] #hoofd > .element.text.scrollbar
{
  font-size        : 0.8em;
  text-align       : center;

  position         : fixed !important;
  bottom           : 0;

  padding          : 0;
  padding-top      : 0.5em;

  background-color : var(--color-1);

  z-index          : 1000;
}

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

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

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

form
{
  font-size        : 0.85em;

  padding          : 3em;

  border-radius    : 0.4em;
  box-shadow       : 0.1em 0.1em 0.5em rgba(0, 0, 0, 0.2);
  background-color : var(--color-light);
}

form li
{
  margin-bottom : 0.75em;
}

form label
{
  color       : var(--color-dark);
  font-weight : 600;

  margin      : 0.35em 0.75em 0 0;
}

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

  padding          : 1.25em 0.75em;

  border           : none;
  background-color : var(--color-3);
}

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

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

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

  background      : var(--color-button);
  border-radius   : 5em;

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

  transition      : 0.2s;
}

form input[type=submit]:hover
{
  padding    : 0.9em 1.7em;
  margin     : -0.2em -0.2em;
  height     : 3.4em;
  background : var(--color-1);
}

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

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

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

#hoofd > .element.menu,
#hoofd > .element.text.usp,
#hoofd > .element.text.breadcrumbs,
/*#hoofd > .element.text.content_block_2,*/
#hoofd > .element.text.content_line_2,
#hoofd > .element.text.content_line_4,
#hoofd > .element.text.scrollbar
{
  padding : 0;
}
#home #hoofd > .element.text.content_block_2{
  
   padding : 0;
  
}

#hoofd > .element.text.header,
#hoofd > .element.text.content_block_1,
#hoofd > .element.text.content_block_3,
#hoofd > .element.text.content_block_2,
#hoofd > .element.text.content_block_5,
#hoofd > .element.text.content_block_6,
#hoofd > .element.text.content_line_1,
#hoofd > .element.text.content_block_7,
#hoofd > .element.text.content_block_8,
#hoofd > .element.text.products,
#hoofd > .element.text.reviews,
#hoofd > .element.text.contact,
#hoofd > .element.text.contact_form,
#hoofd > .element.text.content_line_3,
#hoofd > .element.text .contact_footer,
#hoofd > .element.text.footer
{
  padding : 2em;
}

@media (min-width : 1365px)
{
  #hoofd > .element.text.header,
  #hoofd > .element.text.content_block_1,
  #hoofd > .element.text.content_block_2,
  #hoofd > .element.text.content_block_5,
  #hoofd > .element.text.content_block_6,
  #hoofd > .element.text.content_line_1,
  #hoofd > .element.text.content_block_7,
  #hoofd > .element.text.content_block_8,
  #hoofd > .element.text.products,
  #hoofd > .element.text.reviews,
  #hoofd > .element.text.contact,
  #hoofd > .element.text.contact_form,
  #hoofd > .element.text.content_line_3,
  #hoofd > .element.text .contact_footer,
  #hoofd > .element.text.footer
  {
    padding : 4em 4em;
  }

  #hoofd > .element.menu,
  #hoofd > .element.text.usp,
  #hoofd > .element.text.header,
  #hoofd > .element.text.breadcrumbs,
  #hoofd > .element.text.content_block_1,
  #hoofd > .element.text.content_block_3,
  #hoofd > .element.text.content_block_5,
  #hoofd > .element.text.content_line_1,
  #hoofd > .element.text.content_block_7,
  #hoofd > .element.text.products,
  #hoofd > .element.text.reviews,
  #hoofd > .element.text.contact,
  #hoofd > .element.text.content_line_3,
  #hoofd > .element.text .contact_footer,
  #hoofd > .element.text.footer,
  #hoofd > .element.text.scrollbar
  {
    padding-left : var(--element-padding);
  }

  #hoofd > .element.menu,
  #hoofd > .element.text.usp,
  #hoofd > .element.text.header,
  #hoofd > .element.text.breadcrumbs,
  #hoofd > .element.text.content_block_6,
  #hoofd > .element.text.content_line_1,
   #hoofd > .element.text.content_block_2,
  #hoofd > .element.text.content_block_8,
  #hoofd > .element.text.products,
  #hoofd > .element.text.reviews,
  #hoofd > .element.text.contact_form,
  #hoofd > .element.text.content_line_3,
  #hoofd > .element.text .contact_footer,
  #hoofd > .element.text.footer,
  #hoofd > .element.text.scrollbar
  {
    padding-right : var(--element-padding);
  }

}


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

@media (min-width : 1365px)
{
  #hoofd
  {
    grid-gap              : 0;
    grid-template-columns : 1fr 6em 6em 1fr;
    grid-template-areas   :
      "usp usp usp usp"
      "menu_top menu_top menu_top menu_top"
      "header header header header"
      "breadcrumbs breadcrumbs breadcrumbs breadcrumbs"
      "content_block_1 content_block_1 content_block_1 content_block_2"
      "content_block_3 content_block_3 content_block_3 content_block_2"
      "content_block_5 content_block_5 content_block_6 content_block_6"
      "content_line_1 content_line_1 content_line_1 content_line_1"
      "content_block_7 content_block_7 content_block_8 content_block_8"
      "products products products products"
      "reviews reviews reviews reviews"
      "contact contact contact_form contact_form"
      "content_line_2 content_line_2 content_line_2 content_line_2"
      "content_line_3 content_line_3 content_line_3 content_line_3"
      "content_line_4 content_line_4 content_line_4 content_line_4"
      "footer footer footer footer"
      "scrollbar scrollbar scrollbar scrollbar"
    ;
  }
}

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

@media (max-width : 1365px)
{
  #hoofd
  {
    grid-gap              : 0;
    grid-template-columns : 1fr 1fr;
    grid-template-areas   :
      "usp usp"
      "menu_top menu_top"
      "header header"
      "breadcrumbs breadcrumbs"
      "content_block_1 content_block_2"
      "content_block_3 content_block_2"
      "content_block_5 content_block_6"
      "content_line_1 content_line_1"
      "content_block_7 content_block_8"
      "products products"
      "reviews reviews"
      "contact contact_form"
      "content_line_2 content_line_2"
      "content_line_3 content_line_3"
      "content_line_4 content_line_4"
      "footer footer"
      "scrollbar scrollbar"
    ;
  }
}

@media (max-width : 768px)
{
  #hoofd
  {
    grid-gap              : 0;
    grid-template-columns : 1fr;
    grid-template-areas   :
      "usp"
      "menu_top"
      "header"
      "breadcrumbs"
      "content_block_1"
      "content_block_2"
      "content_block_3"
      "content_block_5"
      "content_block_6"
      "content_line_1"
      "content_block_7"
      "content_block_8"
      "products"
      "reviews"
      "contact"
      "contact_form"
      "content_line_2"
      "content_line_3"
      "content_line_4"
      "footer"
      "scrollbar"
    ;
  }
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@media (max-width : 1364px)
{
  .element.menu.top
  {
    grid-template-columns : 1fr 4fr 1fr;
    grid-template-areas   : "top_menu top_logo top_cta";
  }
}

.element.menu
{
  display : grid;
}

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

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

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