@charset "UTF-8";
/* CSS Document */


#header_inner {
  border: 0px solid #f09;
  border-bottom: 2px solid var(--red);
  margin: 0px 0px -5px;
  padding: 0px;
  height: 90px;
  position: relative;
  z-index: 300;
  box-shadow: 0px 2px 6px 1px rgba(0, 0, 0, 0.1)
}
.underline {
  background: var(--red);
  height: 2px;
  position: absolute;
  bottom: 0px;
  width: 100%
}
.header_inside .mainlogo {
  border: 0px solid #f09;
  position: absolute;
  bottom: 5px;
  z-index: 20
}
.mainlogo .icon-logo-damm {
  font-size: 3rem;
  color: var(--red);
}
.mobilelogo {
  border: 0px solid #f09;
  position: absolute;
  bottom: 0px;
  z-index: 20;
  display: none
}
.mobilelogo .icon-logo-damm {
  font-size: 3rem;
  color: #fff;
}
/********* home page header *********/
.button_m {
  
  padding: 0px 20px !important;
  border-radius: 300px;
  color: #fff !important;
  background: var(--red);
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
  white-space: nowrap;
}

/* menu icon */
/********* other page header *********/
.header_inside {
  border: 0px solid #f09;
  margin: 0px 180px 10px;
  padding: 0px;
  height: 100%;
  position: relative;
  z-index: 200;
  background: #fff
}
.header_inside .user_desk {
  position: absolute;
  right: 95px;
  top: 44px
}

.ud_damm {right: 50px!important}

.header_inside .envelope {
  position: absolute;
  right: 0px;
  top: 38px
}

.header_inside .envelope a {font-size: 24px; position: relative; bottom: -2px}
.header_inside .envelope i:hover {color: var(--red)!important}

.header_inside .envelope span {color: #777; font-weight: normal; font-size: 21px; position: relative; bottom: 2px; margin-right: 2px}

.header_inside .user_desk i {
  font-size: 20px;
  margin: 0px 0px 0px 10px
}
.header_inside .user_desk a i {
  color: #444
}
.header_inside .user_desk a i:hover {
  color: var(--red)
}
.header_inside .user_desk span {
  font-size: 1.1em;
  margin: 0px 0px 0px 10px
}
.header_inside ul {
  margin: 0px 0px 0px 0px;
  padding: 0px;
  list-style: none;
  overflow: hidden;
  border: 0px solid #f09;
  width: auto;
  position: absolute;
  top: 92px;
  right: 30px;
  background: var(--greyvlight);
}

.u_damm {right: 0px!important}

.header_inside li {
  background: var(--greyvlight);
    border-bottom: 1px solid rgba(0,0,0,0.1);
}


.header_inside li a {
  padding: 5px 80px 5px 10px;
  border: 0px solid #f4f4f4;
  font-size: 0.75em;
    text-transform: uppercase;
    color: var(--greymenu);
  line-height: 30px;
  display: inline-block;
    font-weight: lighter
}
.header_inside li a:hover {
  color: var(--red);
}
.login {
  margin: 10px 0px 0px
}
.signin {
  margin: 5px 0px 10px 10px
}
/* menu */
.header_inside .menu {
  clear: both;
  max-height: 0;
  transition: max-height .2s ease-out;
  border: 0px solid #f09;
}
/* menu icon */
.header_inside .menu-icon {
  cursor: pointer;
  display: inline-block;
  float: right;
  padding: 41px 45px 8px 0px;
  position: relative;
  user-select: none;
}

.m_damm { padding: 41px 0px 8px 0px!important}

.header_inside .menu-icon .navicon {
  background: var(--red);
  display: block;
  height: 4px;
  position: relative;
  transition: background .2s ease-out;
  width: 24px;
  border-radius: 100px;
}
.header_inside .menu-icon .navicon:before, .header_inside .menu-icon .navicon:after {
  background: var(--red);
  content: '';
  display: block;
  height: 4px;
  position: absolute;
  transition: all .2s ease-out;
  width: 100%;
  border-radius: 100px;
}
.header_inside .menu-icon .navicon:before {
  top: 8px;
}
.header_inside .menu-icon .navicon:after {
  top: -8px;
}
/* menu btn */
.header_inside .menu-btn {
  display: none;
}
.header_inside .menu-btn:checked ~ .menu {
  max-height: 288px;
}
.header_inside .menu-btn:checked ~ .menu-icon .navicon {
  background: transparent;
}
.header_inside .menu-btn:checked ~ .menu-icon .navicon:before {
  transform: rotate(-45deg);
}
.header_inside .menu-btn:checked ~ .menu-icon .navicon:after {
  transform: rotate(45deg);
}
.header_inside .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before, .header_inside .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {
  top: 0;
}
/********************************************bigger screen settings**********************************************************/
@media screen and (min-width: 1800px) {
  #header_main, .header_inside {
    margin: 0px 320px 10px
  }
}
/********************************************smaller screen settings
@media screen and (max-width: 1400px) {
#header_main {border: 0px solid #f09; margin: 0px 160px 5px ; padding: 0px; height: 120px; position: relative; z-index: 300}
    
.nav-wrapper { right: 160px;}
}
**********************************************************/
/********************************************tablet settings**********************************************************/
@media screen and (max-width: 1300px) {
  #header_inner {
    height: 70px;
    top: 0px;
  }
  .nav-wrapper {
    right: 10px !important;
    border: 0px solid #f09
  }
    
  /********* other page header *********/
  .header_inside {
    border: 0px solid #f09;
    margin: 0px;
    padding: 0px 10px;
    height: 70px;
    position: relative;
    z-index: 300;
    background: var(--red);
    top: 0px
  }
  .mainlogo {
    border: 0px solid #f09;
    position: absolute;
    bottom: 0px;
    z-index: 20;
    display: none
  }
  .mobilelogo {
    border: 0px solid #f09;
    position: absolute;
    bottom: 3px;
    z-index: 20;
    display: block
  }
  .mobilelogo img {
    height: 55px;
  }
  .header_inside .user_desk {
    position: absolute;
    right: 50px;
    top: 27px
  }
  .header_inside .user_desk i {
    font-size: 20px;
    margin: 0px 0px 0px 10px
  }
    
.header_inside .user_desk a i {
  color: var(--greyvlight)
}
.header_inside .user_desk a i:hover {
  color: #fff
}
  .header_inside .user_desk span {
    font-size: 0.8em;
    margin: 0px 0px 0px 10px;
      color: #fff
  }
  .header_inside ul {
    margin: 0px 0px 0px 0px;
    padding: 0px;
    list-style: none;
    overflow: hidden;
    border: 0px solid #f09;
    width: 100%;
    position: absolute;
    top: 70px;
    right: 0px;
  }
  .header_inside li {
    background: var(--greyvlight);
  }

  .header_inside li a {
    padding: 5px 20px 5px 10px;
    border: 0px solid #f4f4f4;
      font-size: 0.9em;
    
    line-height: 25px;
    display: inline-block;
  }
  .header_inside li a:hover {
    color: var(--red);
  }
  .login {
    margin: 10px 0px 0px
  }
  .signin {
    margin: 5px 0px 10px 10px
  }
  /* menu */
  .header_inside .menu {
    clear: both;
    max-height: 0;
    transition: max-height .2s ease-out;
    border: 0px solid #f09;
  }
  /* menu icon */
  .header_inside .menu-icon {
    cursor: pointer;
    display: inline-block;
    float: right;
    padding: 26px 0px 0px 0px;
    position: relative;
    user-select: none;
  }
  .header_inside .menu-icon .navicon {
    background: #fff;
    display: block;
    height: 4px;
    position: relative;
    transition: background .2s ease-out;
    width: 24px;
    border-radius: 100px;
  }
  .header_inside .menu-icon .navicon:before, .header_inside .menu-icon .navicon:after {
    background: #fff;
    content: '';
    display: block;
    height: 4px;
    position: absolute;
    transition: all .2s ease-out;
    width: 100%;
    border-radius: 100px;
  }
  .header_inside .menu-icon .navicon:before {
    top: 8px;
  }
  .header_inside .menu-icon .navicon:after {
    top: -8px;
  }
  /* menu btn */
  .header_inside .menu-btn {
    display: none;
  }
  .header_inside .menu-btn:checked ~ .menu {
    max-height: 240px;
  }
  .header_inside .menu-btn:checked ~ .menu-icon .navicon {
    background: transparent;
  }
  .header_inside .menu-btn:checked ~ .menu-icon .navicon:before {
    transform: rotate(-45deg);
  }
  .header_inside .menu-btn:checked ~ .menu-icon .navicon:after {
    transform: rotate(45deg);
  }
  .header_inside .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before, .header_inside .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {
    top: 0;
  }
}
/********************************************general mobile settings**********************************************************/
@media all and (max-width: 64em), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1024px), only screen and (min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min-resolution: 192dpi) and (max-width: 1024px), only screen and (min-resolution: 2dppx) and (max-width: 1024px) {
  
  #header_inner {
    height: 70px;
  }
  .mainlogo {
    border: 0px solid #f09;
    position: absolute;
    bottom: 0px;
    z-index: 20;
    display: none
  }

  /********* other page header *********/
  .header_inside {
    border: 0px solid #f09;
    margin: 0px;
    padding: 0px 10px;
    height: 70px;
    position: relative;
    z-index: 300;
    background: var(--red);
    top: 0px
  }
  .mobilelogo {
    border: 0px solid #f09;
    position: absolute;
    bottom: 5px;
    z-index: 20;
    display: block
  }
  .mobilelogo img {
    height: 50px;
  }
  .nav-wrapper {
    right: 10px;
  }
    
    .envelope {margin-right: 10px}
.header_inside .envelope a {font-size: 24px; position: relative; bottom: 14px; color: #fff!important}
.header_inside .envelope i {color: #fff}
.header_inside .envelope i:hover {color: #eee!important}

.header_inside .envelope span {color: #eee; font-weight: normal; font-size: 21px; position: relative; bottom: 17px; margin-right: 2px}
    
    
  .header_inside .user_desk {
    position: absolute;
    right: 95px;
    top: 27px
  }
    
    
  .header_inside .user_desk i {
    font-size: 20px;
    margin: 0px 0px 0px 10px
  }
  .header_inside .user_desk span {
    font-size: 0.9em;
    
    margin: 0px 0px 0px 10px
  }
  .header_inside ul {
    margin: 0px 0px 0px 0px;
    padding: 0px;
    list-style: none;
    overflow: hidden;
    border: 0px solid #f09;
    width: 100%;
    position: absolute;
    top: 70px;
    right: 0px;
  }
  .header_inside li {
    background: var(--greyvlight);
  }

  .header_inside li a {
    padding: 5px 20px 5px 10px;
    border: 0px solid #f4f4f4;
    font-size: 0.9em;
    
    line-height: 25px;
    display: inline-block;
  }
  .header_inside li a:hover {
    color: var(--red);
  }
  .login {
    margin: 10px 0px 0px
  }
  .signin {
    margin: 5px 0px 10px 10px
  }
  /* menu */
  .header_inside .menu {
    clear: both;
    max-height: 0;
    transition: max-height .2s ease-out;
    border: 0px solid #f09;
  }
  /* menu icon */
  .header_inside .menu-icon {
    cursor: pointer;
    display: inline-block;
    float: right;
    padding: 26px 45px 0px 0px;
    position: relative;
    user-select: none;
  }
    

.m_damm { padding: 26px 0px 0px 0px!important}
    
  .header_inside .menu-icon .navicon {
    background: #fff;
    display: block;
    height: 4px;
    position: relative;
    transition: background .2s ease-out;
    width: 24px;
    border-radius: 100px;
  }
  .header_inside .menu-icon .navicon:before, .header_inside .menu-icon .navicon:after {
    background: #fff;
    content: '';
    display: block;
    height: 4px;
    position: absolute;
    transition: all .2s ease-out;
    width: 100%;
    border-radius: 100px;
  }
  .header_inside .menu-icon .navicon:before {
    top: 8px;
  }
  .header_inside .menu-icon .navicon:after {
    top: -8px;
  }
  /* menu btn */
  .header_inside .menu-btn {
    display: none;
  }
  .header_inside .menu-btn:checked ~ .menu {
    max-height: 253px;
  }
  .header_inside .menu-btn:checked ~ .menu-icon .navicon {
    background: transparent;
  }
  .header_inside .menu-btn:checked ~ .menu-icon .navicon:before {
    transform: rotate(-45deg);
  }
  .header_inside .menu-btn:checked ~ .menu-icon .navicon:after {
    transform: rotate(45deg);
  }
  .header_inside .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before, .header_inside .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {
    top: 0;
  }
    .est_name {display: none}
    
}

#header-logout-form {
  display: inline;
}
#header-logout-form button {
  text-align: center;
  border: none;
  background-color: transparent;
}
#header-logout-form button:hover {
  cursor: pointer;
}
#header-logout-form button i {
  margin: 0;
}