.header-container-wrapper {
  height: 90px;
  position: relative !important;
}

.body-container-wrapper {
  padding-top: 0 !important;
}

.hoiva-2018.hs-site-page .body-container-wrapper {
  padding-top: 0 !important;
}


 body.js-enabled .header-container .hs-menu-wrapper.hs-menu-flow-horizontal.flyouts>ul li.hs-item-has-children:hover>ul.hs-menu-children-wrapper  {
    
    display: none;
  }


.header--nav .hs-menu-wrapper.hs-menu-flow-horizontal.flyouts>ul li.hs-item-has-children ul.hs-menu-children-wrapper.open {
  
  display: block !important;
  visibility: visible;
    opacity: 1;
  overflow: visible !important;
  
    position: absolute;

}

.header--nav .hs-menu-wrapper a.open {
 text-decoration: underline; 
}

.header--nav .hs-menu-wrapper.hs-menu-flow-horizontal.flyouts>ul li.hs-item-has-children.hs-menu-depth-2 ul.hs-menu-children-wrapper.open {
  left: 100%;
  top: -6px;
}

.header {
  position: fixed;
  top: 0;
  width: 100%;
  background: #fff;
  z-index: 100;
  max-width: 1700px;
}

.mg-header .header {
  background: #ed7102;
}

.header .page-center {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  max-width: 1315px !important;
  padding: 20px 0 !important;
}

.header__links {
    display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
 /* width: 85%; */
}

.header--logo {
/* width: 13%;  */
}

.header__links > div {
 margin-right: 15px; 
}


.header__links > div:last-child {
 margin-right: 0; 
}

.header--logo img {
  max-width: 160px !important;
  padding-left: 1rem;
}

.header--buttons .button--orange, .header--buttons .button--yellow, .header--buttons .button--blue {
  padding: 8px 14px;
  font-size: 15px;
  border: 0;
}

.mg-header .header .button--orange {
  background: #fff;
  color: #ed7102 !important;
}

.phone {
  margin-left: 10px;
}

.phone svg {
  width: 11px;
  transform: rotate(90deg);
  height: 11px;
}

.phone path {
  fill: #fff;
}

.mg-header .header .phone path {
  fill: #ed7102
}

/* NAVIGATION */

.header--nav .hs-menu-wrapper.hs-menu-flow-horizontal>ul {
  display: inline;
  vertical-align: middle;
  list-style: none;
}

.header--nav .hs-menu-item {
  padding: 15px 7px;
  display: inline-block;
  position: relative;
}

/*.header--nav .hs-menu-item.hs-menu-depth-1:last-child {
  padding: 0 0 0 15px;
}*/

.header--nav .hs-menu-item a {
  font-family: 'Gotham A', 'Gotham B', Arial, sans-serif;
  color: #ee7203;
  font-size: 15px;
  text-decoration: none;
  cursor: pointer;
}

.header--nav .hs-menu-item.active > a,.header--nav .hs-menu-item.active-branch > a {
  
 font-weight: 700; 
}

.header--nav .hs-menu-item a:hover {
  text-decoration: underline;
}

.mg-header .header .header--nav .hs-menu-item a {
  color: #fff;
}

.button--orange, .button.button--orange {
  background: #ed7102;
  border: solid 3px #fff;
  color: #fff !important;
  font-weight: bold;
  padding: 8px 24px;
  border-radius: 15px;
  display: inline-block;
  cursor: pointer;
  text-decoration: none;
  font-size: 18px;
  box-sizing: border-box;
}

.button--yellow {
  background: #f9b000;
  border: solid 3px #fff;
  color: #fff !important;
  font-weight: bold;
  padding: 8px 24px;
  border-radius: 15px;
  display: inline-block;
  cursor: pointer;
  text-decoration: none;
  font-size: 18px;
  box-sizing: border-box;
}

.button.button--border {
  border: solid 3px #fff;
}

.button--blue, .button.button--blue {
  background: #003869;
  border: solid 3px #fff;
  color: #fff !important;
  font-weight: bold;
  padding: 8px 24px;
  border-radius: 15px;
  display: inline-block;
  cursor: pointer;
  text-decoration: none;
  font-size: 18px;
  box-sizing: border-box;
}

.button.button--no-border {
 border: none; 
}


/*
.hs-menu-wrapper.hs-menu-flow-horizontal>ul li.hs-item-has-children>a:after {
  display: none !important;
}
*/

  .header--nav .hs-item-has-children > a:after, .header--nav li.hs-menu-item.hs-menu-depth-2.hs-item-has-children>a:after  {
   content: none !important; 
  }

@media (min-width: 1260px) {
  

  
.header--nav .hs-menu-wrapper>ul li.hs-menu-depth-1 ul {
 background-color: #fff; 
 
}
  
    .header--nav .hs-item-has-children:after {
    content:'';
    background-image: url('https://www.onniterveys.fi/hubfs/ONNIon/nuoli-alas-oranssi.png');
    background-size: 100% 100%;
    width: 10px;
    height: 5px;
    display: inline-block;
    vertical-align: middle;
    margin-left: 3px;
  }
  {#
  .mg-header .header--nav .hs-item-has-children:after {
    content:'';
    background-image: url('https://www.onniterveys.fi/hubfs/ONNIon/nuoli-valkoinen.png');
    background-size: 100% 100%;
    width: 5px;
    height: 10px;
    display: inline-block;
    vertical-align: middle;
    margin-left: 3px;
    transform: rotate(90deg);
  }
  #}
  
  .header--nav .hs-menu-depth-2.hs-item-has-children:after, .header--nav .hs-menu-depth-3.hs-item-has-children:after, .header--nav .hs-menu-depth-4.hs-item-has-children:after {
    transform: rotate(-90deg);
  }
  
  .header--nav .hs-menu-depth-2.hs-item-has-children a {
    display: inline-block !important;
  }
  
  .header--nav .hs-menu-item.hs-menu-depth-1.hs-item-has-children:hover > .hs-menu-children-wrapper {
    display: block;
  }

  .header--nav ul.hs-menu-children-wrapper {
    display: none;
    position: absolute; 
    background: #fff;
    padding: 5px 0;
    width: 235px;
    margin-top: 15px;
    border: solid 1px #ed7102;
    
  }
  
   .header--nav ul.hs-menu-children-wrapper .hs-menu-depth-2 ul {
   top: 0;  
  }
  
  .header--nav ul.hs-menu-children-wrapper li a {
    white-space: normal !important;
  }

  .header--nav ul.hs-menu-children-wrapper > li {
    padding: 10px 15px;
    display: block;
    position: relative;
    box-sizing: border-box;
  }
  
  .header--nav li.hs-menu-item:not(.hs-menu-depth-1).hs-item-has-children:hover > .hs-menu-children-wrapper {
    display: block;
    top: -21px;
    left: 100%;
  }
}


/* SEARCH */

.header .hs-search-field {
  display: none;
  margin-top: 1.5rem;
  border-radius: 15px;
  background: #fff;
  padding: 15px;
  position: absolute;
  border: solid 1px #ccc;
}

.hs-search-field__input {
  border: 1px solid #ccc;
  border-radius: 15px !important;
  box-shadow: none;
  padding: 10px 13px;
  font-size: 15px;
  display: inline-block !important;
  box-sizing: border-box;
  vertical-align: middle;
  min-width: 238px;
}

.hs-search-field__input:focus {
  outline: none;
}

.header--search__open {
  width: 20px !important;
  cursor: pointer;
  margin-right: 10px;
}

.mg-header .header--search__open path {
  fill: #fff;
}

.hs-search-field__bar button {
  background: #f9b000;
  color: #fff;
  border-radius: 15px;
  padding: 10px 24px 12px;
  border: 0;
  font-size: 15px;
  font-weight: bold;
  display: inline-block !important;
  vertical-align: middle;
  width: 100px;
}

.hs-search-field__bar button svg {
  height: 10px;
}
.hs-search-field__suggestions {
  margin: 0;
  padding: 0;
  list-style: none;
}
.hs-search-field--open .hs-search-field__suggestions {
  border: 0;
  margin-top: 10px;
}
.hs-search-field__suggestions li {
  display: block;
  margin: 0;
  padding: 0;
}
.hs-search-field__suggestions #results-for {
  font-weight: bold;
}
.hs-search-field__suggestions a,
.hs-search-field__suggestions #results-for {
  display: block;
}
.hs-search-field__suggestions a:hover,
.hs-search-field__suggestions a:focus {
  background-color: rgba(0, 0, 0, 0.1);
  outline: none;
}

@media(min-width: 1260px) {
  body.hoiva-2018 .hs-search-field__bar form {
    display: flex;
  }
  .mg-header .hs-menu-depth-2 a, .mg-header .hs-menu-depth-3 a {
    color: #ed7102 !important;
  }
}

body.hoiva-2018 .hs-search-field__bar button {
  margin-left: 5px;
}

.header--nav li.hs-menu-item.hs-menu-depth-2 {
  padding: 5px 12px;
}

@media(max-width: 600px) {
  .header-container-wrapper {
    height: 135px;
  }
  .header .button--orange.phone {
    width: 94%;
    margin: 0 auto !important;
    text-align: center;
    float: none !important;
    display: block;
    position: relative !important;
    top: -3px;
    left: 0 !important;
    transform: none !important;
    border-radius: 0 0 15px 15px;
    font-size: 14px;
  }
  .header .page-center {
    padding: 7px 0 10px;
  }
}

@media(max-width: 1260px) {
  .header .button--orange.phone {
    float: none !important;
    position: relative;
    top: -3px;
    border-radius: 0 0 15px 15px;
    font-size: 14px;
    position: absolute;
    transform: translate(-50%, 0);
    left: 50%;
  }
  
  body.mobile-open {
   overflow: hidden; 
  }
  
  .header--logo {
   position: relative;
    z-index: 999;
  }
  
 body div.header--nav div.hs-menu-wrapper {
    
      overflow: auto !important;
    height: 80vh !important;
  }
  
  .hs-search-field {
    width: 100%;
  }
  .hs-search-field__bar form {
    display: flex;
  }
  .hs-search-field__bar button {
    width: auto !important;
  }
  .hs-search-field__input {
    flex-grow: 1;
    margin-right: 10px;
  }
  .header--search__open {
    display: none !important;
  }
  
  .header--nav .hs-menu-wrapper.hs-menu-flow-horizontal>ul li.hs-item-has-children>a:after {
 content: none !important; 
}

.header--nav .hs-item-has-children > a {
 position: relative; 
}

.header--nav .hs-item-has-children.hs-menu-depth-1 > a {
  
  padding-left: 15px;  
  padding-bottom: 10px;
}

.header--nav .hs-item-has-children > a:before  {
  
  content: "+";
  font-size: inherit;
  line-height: 1em;
  margin-right: 10px;
  display: inline-block;
  position: absolute;
  left: -3px;
  top: 6px;
  
}
  
  
.header--nav .hs-item-has-children.hs-menu-depth-3 a:before {
  left: -18px;
  top: 13px;
  }

.header--nav .hs-menu-depth-2.hs-item-has-children > a:before  {
 top: 18px; 
}
  
  .header--nav ul li.hs-menu-depth-1 ul {
   margin-bottom: 15px; 
    margin-top: 15px;
  }
  
    
  .header--nav ul li.hs-menu-depth-1 > ul {

    margin-top: 0;
    margin-bottom: 30px;
  }

.header--nav .hs-item-has-children > a.open:before  {
 content: "-" 
}
}

@media(max-width: 767px) {
   body div.header--nav div.hs-menu-wrapper {
    
    
    height: 70vh !important;
  }
}


/* MOBILE NAV */


/* ==========================================================================
   Custom Menu Primary
   ========================================================================== */


/* Override max width on menu links */
.header--nav .hs-menu-wrapper > ul li a, 
.hs-menu-wrapper.hs-menu-flow-horizontal > ul li.hs-item-has-children ul.hs-menu-children-wrapper li a {
  overflow: visible !important;
  max-width: none !important;
  width: auto !important;
}

/* Fix menu disappearing on desktop after toggling mobile menu */
@media screen and (min-width:768px) {
      .header--nav .hs-menu-wrapper { 
          display:block;
        overflow: visible !important;
      }
  }


/* ==========================================================================
   Mobile Menu - Hubspot Standard Toggle Menu
   ========================================================================== */


/**
 * Special Note
 *
 * When the menu is open, a class of .mobile-open is applied to the body. You can 
 * use this for custom styling on any element when the menu is in the open position.                     
 */

.mobile-trigger, .child-trigger{
    display: none; /* Hide button on Desktop */
}

@media (max-width: 1260px){


  /* Variables
     ========================================================================== */

  {% set menuColorMobile = "#fff" %}   /* Set Mobile Menu Background Color */
  {% set aColorMobile = "#ee7203" %}      /* Set Link Color */
  {% set aColorHoverMobile = "#ee7203" %} /* Set Link Hover Color */

  /* 
    * Menu Reset
    *
    * Remove styling from desktop version of header--nav. Place any 
    * additional CSS you want removed from the mobile menu in this reset 
    */

  .header--nav,
  .header--nav .hs-menu-wrapper > ul,
  .header--nav .hs-menu-wrapper > ul li,
  .header--nav .hs-menu-wrapper > ul li a{
    display: block;
    float: none;
    position: static;
    top: auto;
    right: auto;
    left: auto;
    bottom: auto;
    padding: 0px;
    margin: 0px;
    background-image: none;
    background-color: transparent;
    border: 0px;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;
    -webkit-box-shadow: none;
    -moz-box-shadow:    none;
    box-shadow:         none; 
    max-width: none;
    width: 100%;
    height: auto;
    line-height: 1;  
    font-weight: normal;
    text-decoration: none;
    text-indent: 0px;
    text-align: left;
    color:#ee7203;
  }
  
  .header--nav .header--buttons {
    margin-top: 10px;
  }
  
  .header--buttons .button--orange {
    display: inline-block;
    margin-left: 0;
    font-size: 18px;
    padding: 10px 15px;
    margin-bottom: 10px;
  }
  
  .hs-search-field {
    margin-top: 0;
    border-radius: 0;
    padding: 0;
    position: relative;
    border: 0;
    display: inline-block;
  }
  
  .header--search {
    margin-bottom: 15px;
    margin-top: 15px;
    display: none;
  }
  
  .header--search__open, .header--buttons {
    display: none;
  }
  
  .header--nav .hs-menu-wrapper>ul li.hs-menu-depth-1 {

  float: none !important;
}
  
  .header--nav .hs-menu-wrapper>ul li.hs-menu-depth-1 > ul {
  
  background-color: #ee7203;
    padding: 15px;
  }
  
  .header--nav .hs-menu-wrapper>ul li.hs-menu-depth-1 > ul a {
   color: #fff !important; 
  }
  
  .header--nav .header--search, .header--nav .header--buttons {
   display: block; 
  }
  

  /* Toggle Button
     ========================================================================== */

  .mobile-trigger{
    display: inline-block !important; /* Show button on mobile */
    cursor: pointer; /* Mouse pointer type on hover */
    position: absolute; /*******************************************/
    top: 0px !important;          /* Position Button at right of screen  */
    right: 10px !important;        /*******************************************/
    width: auto; /* Button width */
    height: auto; /* Button height */      
    padding: 7px 10px 8px 10px !important;
    background: #ffffff; /* Background color */
    border: 1px solid #fff;
    font-size: 16px;
    font-weight: normal;
    text-align: left;
    text-transform: uppercase;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    color: #fff;
    margin-top: 6px !important;
  }
  .mobile-trigger:hover{
    text-decoration: none; /* Removes link text underline on button */
    color:#ee7203;
    background-color: #ee7203; 
    border-color: transparent;
  }

  /* Change button when menu is open */
  .mobile-open .mobile-trigger{
    color:#ee7203;
    background-color:#fff; 
    border-color: transparent;
  }


  /* Toggle Button Icon
     ========================================================================== */

  .mobile-trigger i{
    display: inline;
    position: relative;
    top: -4px;
  }
  .mobile-trigger i:before, .mobile-trigger i:after{
    position: absolute;
    content: '';
  }
  .mobile-trigger i, .mobile-trigger i:before, .mobile-trigger i:after{
    width: 22px; /* Icon line width */
    height: 2px; /* Icon line height */
    -webkit-border-radius: 1px;
    -moz-border-radius: 1px;
    border-radius: 1px;
    background-color: #ee7203 !important; /* Icon color */
    display: inline-block;
  }
  .mobile-trigger:hover i, .mobile-trigger:hover i:before, .mobile-trigger:hover i:after {
    color: #fff !important;
    background-color: #fff !important;
  }
  
    body.mobile-open .mobile-trigger:hover i, body.mobile-open .mobile-trigger:hover i:before, body.mobile-open .mobile-trigger:hover i:after {
    color: #ee7203 !important;
      background-color: #ee7203 !important;
}
  
  .mobile-trigger i:before{
    top: -6px !important; /* Position top line */
    margin-top: 0 !important;
  }
  .mobile-trigger i:after{
    top: 6px !important; /* Position bottom line */
    margin-top: 0 !important;
  }
  
  .mobile-trigger:hover i, .mobile-trigger:hover i:before, .mobile-trigger:hover i:after,  
  .mobile-open .mobile-trigger i, .mobile-open .mobile-trigger i:before, .mobile-open .mobile-trigger i:after{
      background-color: #fff; /* Icon color */
  }


  /* Child Toggle Button
     ========================================================================== */

  .child-trigger{
    display: block !important; /* Hide button on Desktop */
    cursor: pointer; /* Mouse pointer type on hover */
    position: absolute;
    top: 0px;
    right: 0px;
    width: 55px !important; /* Button width */
    min-width: 55px !important;
    height: 45px !important; /* Button height */  
    padding: 0 !important;
    border-left: 1px dotted rgba(255, 255, 255, .20);
  }
  .child-trigger:hover{
    text-decoration: none;
  }
  .child-trigger i{
    position: relative;
    top: 50%; /* Centers icon inside button */
    margin: 0 auto !important;
    -webkit-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  .child-trigger i:after{
    position: absolute;
    content: '';
  }
  .child-trigger i, .child-trigger i:after{
    width: 10px; /* Icon line width */
    height: 2px; /* Icon line height */
    display: block;
    background: #ed7102;

  }
  .child-trigger i:after{
    -webkit-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
  }
  .child-trigger.child-open i:after{
    -webkit-transform: rotate(-180deg);
    -ms-transform: rotate(-180deg);
    transform: rotate(-180deg);
  }
  .child-trigger.child-open i{
  }

    
  /* Menu Styles on Mobile Devices
     ========================================================================== */  
     
   .header--nav{
       position: absolute;
       padding-top: 44px; /* Makes room for button */
       /*margin: 10px 0 10px 0;*/
   }

  /* Hide menu on mobile */
  .header--nav .hs-menu-wrapper,
  .header--nav .hs-menu-children-wrapper{
    display: none;
  } 

  /* Make child lists appear below parent items */
  .header--nav ul.hs-menu-children-wrapper {
    visibility: visible !important;
    opacity: 1 !important;
    position: static !important;
    display: none;
    padding-left: 0;
  }

  /* Mobile Menu Styles */ 
  .header--nav .hs-menu-wrapper{
    width: 100%;
    position: absolute; /**************************************************************/
    top: 58px;             /* Positions the menu to drop from the very top of the screen */
    left: 0;          /**************************************************************/
    padding: 20px 1rem;
    box-sizing: border-box;
  }
  .mg-header .header--nav.js-enabled .hs-menu-wrapper {
    background: #ee7203;
  }
  .mg-header .hs-search-field {
    background: #ee7203;
    margin-top: 15px;
  }
  .mg-header .hs-search-field__input {
    height: auto;
  }
  .mg-header .child-trigger {
    border: 0;
    height: 45px !important;
  }
  .mg-header .child-trigger i, .mg-header .child-trigger i:after {
    background-color: #fff;
  }
  .header--nav .hs-menu-wrapper{
    background-color:#fff; /* Menu background color set off global menuColorMobile variable */
    width: 100%; /* Full screen width */
  }

   /* Level 1 Menu List Styles */
  .header--nav .hs-menu-wrapper > ul > li{
    position: relative;
  }
  .header--nav .hs-menu-wrapper > ul > li a{
    font-size: 22px; /* Font size of top level list items */
    line-height: 1.2em;
    margin-bottom: 5px;
    margin-top: 5px;
    display: block;
    overflow: visible;
  }
  
  .header--nav .hs-menu-wrapper > ul ul > li a{
    margin-bottom: 10px;
    margin-top: 10px;
  }
  
  .header--nav .hs-menu-wrapper > ul > ul {
  margin-bottom: 15px;
}

  /* Level 1 and Higher Menu List Styles */
  .header--nav .hs-menu-wrapper > ul li{
    border-top: 1px dotted rgba(255, 255, 255, .35); /* Adds transparent dark highlights to top of top level list items */
  }
  .header--nav .hs-menu-wrapper >  ul li a{
    padding: 0;
    color:#ee7203; /* link color set by global mobile-aColor variable */
  }
  .header--nav .hs-menu-wrapper > ul li a:hover{
    color:#ee7203; /* link hover color set by global mobile-aColorHover variable */
  }

  /* Level 2 and Higher Menu List Styles */
  .header--nav .hs-menu-wrapper > ul ul li{
    
    position: relative;
        display: flex;
    flex-direction: column;
  }
    .header--nav .hs-menu-wrapper > ul ul ul li{
      background-color: rgba(255, 255, 255, .05);
  }
  
  .header--nav .hs-menu-wrapper > ul ul li a{
    text-indent: 10px; /* Indent Child lists */
    font-size: 18px; /* Font size of child lists */
  }

  /* Level 3 and Higher Menu List Styles */
  .header--nav .hs-menu-wrapper > ul ul ul li a{
    text-indent: 30px; /* Indent Child lists */
  }
  .header--nav .hs-menu-wrapper > ul ul ul ul li a{
    text-indent: 50px; /* Indent Child lists */
  }
  
   .header--nav .hs-menu-wrapper > ul ul ul ul ul li a{
     text-indent: 80px;
  }
}

.header--lang ul, .header--lang li{
 list-style: none; 
  padding: 0;
  margin: 0;
}

#language-menu {
 position: relative; 
  line-height: 0;
}

#language-menu button {
  border: none;
  box-shadow: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  background: none;
  opacity: 1;
  transition: all 0.3s ease-in;
}

#language-menu button:hover, #language-menu button:focus-within {
  opacity: 0.6;
}

#language-menu button svg {
  width: 30px;
  height: 30px;

}

#language-menu-content {
 position: absolute;
  z-index: 999;
  display: none;
  top: 110%;
  left: -58px;
  width: 150px;
  height: auto;
  box-shadow: 0 4px 4px rgba(0,0,0,0.2);
  background: #fff;
}



#language-menu-content a {
 display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 10px 15px;
  width: 100%;
  text-indent: initial;
      margin: 0;
    font-size: 15px;
    line-height: 1.2em;
  
}

#language-menu-content a:hover, #language-menu-content a:focus-within {
  background-color: #f1f1f1;
}

#language-menu-content a svg {
  width: 20px;
  height: auto;
  margin-right: 15px;
  border: 1px solid rgba(0,0,0,0.1);
 
}

.header--nav .hs-menu-wrapper>ul ul#language-menu li {
  align-items: flex-start;
  justify-content: flex-start;

  
}

.header--nav .hs-menu-wrapper>ul ul#language-menu {
 margin-top: 30px; 
}


.header--nav #language-menu-content { 
 left: 0;
  
}