header{
  position:fixed;
  display:block;
  background-color:#ffffff;
  width:100%;
  height:60px;
  z-index:50000;
  top:0px;
  left:0px;
  right:0px;
}
div.sm_header_margin{
  position:relative;
  width:100%;
  background-color:#ffffff;
  height:60px;
}
div.mat_header_mobile_navigation > button.close_button{
  position:absolute;
  top:16px;
  right:16px;
  z-index:100001;
}
div.mat_haeder_mobile_navigation_div{
  position:relative;
  width:100%;
  padding:32px 16px;
}
div.mat_haeder_mobile_navigation_div > div{
  position:relative;
  width:100%;
  padding:8px 16px;
  text-align:left;
}
div.mat_header_mobile_navigation{
  position:fixed;
  width:100%;
  height:100%;
  z-index:100000;
  top:0px;
  left:0px;
  right:0px;
  bottom:0px;
  transition:all ease-out .2s;
  background-color:#eeeeee;
  transform:translateY(-150%);
}
div.mat_header_mobile_navigation.is-active{
  transform:translateY(0px);
}
div.mat_header_mobile{
  position:fixed;
  top:0px;
  width:100px;
  height:60px;
  z-index:50001;
  left:0px;
  right:0px;
  padding:16px;
}
div.mat_header{
  position:relative;
  height:100%;
  overflow:hidden;
}
img.mat_header_logo{
  position:relative;
  height:48px;
  margin-top:12px;
  float:left;
}
div.mat_header_button_group{
  position:relative;
  margin-left:32px;
  height:100%;
  float:left;
}
div.mat_header_button_group.no_header{
  position:relative;
  height:100%;
  margin-left:0px;
  float:left;
}
div.mat_header_signin{
  position:absolute;
  right:0px;
  top:0px;
  height:60px;
}
button.mat_signin_button{
  position:relative;
  height:100%;
  text-transform: none;
  transition:background-color .2s, color .2s;
  background-color:#fff;
  color:#222;
  font-family:Raleway;
  border-radius:0px;
}
button.mat_signin_button.is-active{
  background-color:#2196F3;
  color:#fff;
}
button.mat_header_button{
  height:100%;
  position:relative;
  font-family:Raleway;
  text-transform: none;
  color:#666;
}
.search_prefix{
  display:none;
}
@media (min-width: 1281px) {
  .on-desktop{
    display:block !important;
  }
  .on-desktop.flex{
    display:flex !important;
  }
  .on-mobile{
    display:none !important;
  }
  .container-hori{
    padding:0px 10%;
  }
  .container{
    padding:32px 10%;
  }
  div.mat_header{
    padding:0px 64px;
  }
}

/*
  ##Device = Laptops, Desktops
  ##Screen = B/w 1025px to 1280px
*/

@media (min-width: 1025px) and (max-width: 1280px) {
  .on-desktop{
    display:block !important;
  }
  .on-desktop.flex{
    display:flex !important;
  }
  .on-mobile{
    display:none !important;
  }
  .container-hori{
    padding:0px 10%;
  }
  .container{
    padding:32px 10%;
  }
  div.mat_header{
    padding:0px 64px;
  }
}

/*
  ##Device = Tablets, Ipads (portrait)
  ##Screen = B/w 768px to 1024px
*/

@media (min-width: 768px) and (max-width: 1024px) {
  .on-desktop{
    display:block !important;
  }
  .on-desktop.flex{
    display:flex !important;
  }
  .on-mobile{
    display:none !important;
  }
  .container-hori{
    padding:0px 10%;
  }
  .container{
    padding:16px 10%;
  }
  div.mat_header{
    padding:0px 32px;
  }
}

/*
  ##Device = Tablets, Ipads (landscape)
  ##Screen = B/w 768px to 1024px
*/

@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
  .on-desktop{
    display:block !important;
  }
  .on-desktop.flex{
    display:flex !important;
  }
  .on-mobile{
    display:none !important;
  }
  .container-hori{
    padding:0px 10%;
  }
  .container{
    padding:16px 10%;
  }
  div.mat_header{
    padding:0px 32px;
  }
}

/*
  ##Device = Low Resolution Tablets, Mobiles (Landscape)
  ##Screen = B/w 481px to 767px
*/

@media (min-width: 481px) and (max-width: 767px) {
  .on-desktop{
    display:none;
  }
  .on-mobile{
    display:block;
  }
  .container-hori{
    padding:0px 32px;
  }
  .container{
    padding:16px 32px;
  }
  div.mat_header{
    padding:0px 32px 0px 64px;
  }
}

/*
  ##Device = Most of the Smartphones Mobiles (Portrait)
  ##Screen = B/w 320px to 479px
*/

@media (min-width: 320px) and (max-width: 480px) {
  .inner_container{
    padding:0px 16px;
  }
  .on-desktop{
    display:none;
  }
  .on-mobile{
    display:block;
  }
  .container-hori{
    padding:0px 16px;
  }
  .container{
    padding:16px;
  }
  div.mat_header{
    padding:0px 16px 0px 64px;
  }
}
