_header.scss 1.71 KB
// Header
header {
  background: #ffffff;
   position: fixed;
  top:0;
  left:0;
  width:100vw;
  z-index:99999999;
  @extend .row-f;
  .logo {
    @extend .col-l6;
    display: flex;
    img{
      margin-right:2rem;
    }
  }
  nav.main-navi {
    @extend .col-r6;
  }
  .header--payoff {
    padding-left:2rem;
  }
}

.progress-bar-ct
{
  width:100%;
  height:8px;
  background-color:#dedede;
}


.header--payoff {
  font-size: 1.4rem;
  font-family: "TheMixLight";
  line-height: 18;
  border-left: 1px solid #EFEFEF;

  color: #5A585A;
  line-height: 1.2em;
  display: none;
  @include bp-large {
    display: block;
  }
}

.navigation_right{
  display: flex;
  align-items:center;
  justify-content:center;

}

.close--header {
  border-left: 1px solid #EFEFEF;
  padding: 12px 14px;
}

.saveOffer{
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid black;
  border-radius: 50%;
  position: relative;
  cursor: pointer;
  width:40px;
  height:40px;
  margin-right:12px;
  @include bp-medium {
    border-radius: 4px;
    width: 240px;
    height:40px;
    justify-content: space-between;
  }
  p{
    font-size:1.4em;
    padding-right: 15px;
    display: none;
    text-transform: uppercase;
    @include bp-medium {
      display: block;
    }


  }
  img{
    padding-left:0;
    width:20px;
    @include bp-medium {
      padding-left:15px;
      width:auto;
    }
  }

}

.nav-home{
  .logo{
    @include bp-medium {
      position: absolute;
      height: 80px;
    }
    @include bp-large {
      height: auto;
      position: relative;
    }
  }
  .header--payoff{
    font-size:20px ;
  }
}