@import "bootstrap";
@import "bootstrap-sprockets";



body {
  background-color: #E5E5E5;
  height: 100%;
  margin: 80px;
}

h9 {
  font-size: 65px;
  text-decoration: none;
}

.wrapper {

}

.containerrr {
  max-width: 1180px;
  margin: 0px auto;
  padding: 0px 10px;
}

.header {
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 50;
}

.header:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 30px;
  background-color: #376FFF;
  z-index: 2;
}

.header_body {
  position: relative;
  display: flex;
  justify-content: space-between;
  height: 80px;
  align-items: center;
  margin: 10px;
  text-decoration: none;
}

.header_list {
  display: flex;
  position: relative;
  z-index: 2;
}

.header_list li{
  list-style: none;
  margin: 0px 0px 0px 20px;
}


.header_link {
  color: #F7F7F7;
  font-family: Wellfleet;
  font-size: 40px ;
  text-decoration: none;

}

.header_logo {
  flex: 0 0 60px;
  color: #F7F7F7;
  text-decoration: none;
  font-size: 80px;
  font-family: Wellfleet;
  z-index: 3;
}

.header_logo:hover{
  text-decoration: none;
  color: #F7F7F7;
}

.header_link:hover{
  text-decoration: none;
  color: #F7F7F7;
}

.header_burger {
  display: none;
}

@media (max-width: 767px){

  body.lock{
    overflow: hidden;
  }
  .header_body {
    height: 50px;
  }
  .header_logo {
    flex: 0 0 50px;
  }
  .header_burger {
    display: block;
    position: relative;
    width: 30px;
    height: 20px;
    z-index: 3;

  }
  .header_burger span {
    position: absolute;
    background-color: #F7F7F7;
    left: 0;
    width: 100%;
    height: 2px;
    top: 9px;
    transition: all 0.3s ease 0s;
  }
  .header_burger:before,
  .header_burger:after{
    content: "";
    background-color: #F7F7F7;
    position: absolute;
    width: 100%;
    height: 2px;
    left: 0;
    transition: all 0.3s ease 0s;

  }
  .header_burger:before {
    top: 0;
  }
  .header_burger:after {
    bottom: 0;
  }

  .header_burger.active span{
    transform: scale(0);

  }
  .header_burger.active:before {
    transform: rotate(45deg);
    top: 9px
  }
  .header_burger.active:after {
    transform: rotate(-45deg);
    bottom: 9px
  }

  .header_menu {
    position: fixed;
    top: -100%;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: #376FFF;
    padding: 70px 10px 20px 10px;
    transition: all 0.3s ease 0s;
  }

  .header_menu.active{
    top: 0;
  }
  .header_list {
    display: block;
  }
  .header_list li {
    margin: 0px 0px 20px 0px;
  }
}