@font-face {
    font-family: 'Ogg Thin';
    font-style: normal;
    font-weight: 400;
    src: url('https://blackballoon.agency/assets/Ogg-Thin.woff') format('woff');
}
@font-face {
    font-family: 'Monument Extended';
    font-style: normal;
    font-weight: 100;
    src: url('https://blackballoon.agency/assets/MonumentExtended-Ultralight.woff') format('woff');
}

:root {
--app-height: 100%;
}
html,
body {
  padding: 0;
  margin: 0;
  overflow: hidden;
  width: 100vw;
  height: 100vh;
  height: var(--app-height);
  font-family: 'Monument Extended'; 
  font-weight: 100; 
}
h2{
  font-size: 33px;
  line-height: 41px;
  font-family: 'Ogg Thin';
  font-weight: 400;
  margin: 0;
  font-size: clamp(10px, 5vw, 33px);
  line-height: clamp(14px, 7vw, 41px);
}
.bb_logo{
  margin:50px auto;
}
a.bb_btn{
  margin: 50px auto;
  text-decoration:none;
  background-color: #1F1F1F;
  color:#fff;
  border: 1px solid #1F1F1F;
  border-radius: 50px;
  padding: 14.5px 31.5px !important;
  line-height: normal !important;
  text-transform: uppercase;
  font-size: 10px;
  text-align: center;
  letter-spacing: 0.105em;
  font-weight: 100;
  transition: .3s cubic-bezier(.49,.025,.49,1);
}
.bb-left a.bb_btn{
  border: 1px solid #fff;
  background-color: #fff;
  color:#1F1F1F;
}
a.bb_btn:hover{
  border: 1px solid #1F1F1F;
  background-color: #fff;
  color:#1F1F1F;
}
.bb-left a.bb_btn:hover{
  border: 1px solid #fff;
  background-color: #1F1F1F;
  color:#fff;
}
.bb{
  display:flex;
  align-items: center;
  justify-content: space-bewteen;
  height:100%;
  width:100%;
}
.bb_sides {
  width:40%;
  height:100%;
  padding:0 5%;
  display:flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align:center;
  position:relative;
}
.bb-left{
  background:#1F1F1F;
  color:#fff;
}
.bb-right{
  background:#fff;
  color:#1F1F1F;
}
.bb_img{
  position:absolute;
  overflow:hidden;
}
.bb_img img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.HC_1{
  width:8vw;
  height:11vw;
  top:0;
  left:0;
}
.HC_2{
  width:8vw;
  height:11vw;
  top:5vw;
  right:5vw;
}
.HC_3{
  width:10vw;
  height:7vw;
  bottom:3vw;
  left:7vw;
}
.ST_1{
  width:8vw;
  height:11vw;
  top:1vw;
  left:3vw;
}
.ST_2{
  width:10vw;
  height:7vw;
  top:3vw;
  right:8vw;
}
.ST_3{
  width:8vw;
  height:11vw;
  bottom:0;
  right:0;
}
.rotate-icon img{
  max-width: 7vw;
  -webkit-animation: 6s linear 0s infinite laroue;
animation: 6s linear 0s infinite laroue;
}
@keyframes laroue{
0% {
  transform: rotate(0deg);
}
100% {
  transform: rotate(360deg);
}
0% {
  transform: rotate(0deg);
}
100% {
  transform: rotate(360deg);
}
}

@media(max-width: 767px){
  .bb_logo{
    margin:0 auto 20px;
    width: 70%;
  }
  .bb_logo img{
    width:100%;
    height:100%:
    object-fit:contain;
  }
  a.bb_btn{
    margin: 25px auto 0;
    padding: 10px 20px !important;
    font-size: 8px;
  }
  .bb{
    flex-direction: column;
  }
  .bb_sides{
    width: 70%;
    height: 50%;
    padding: 0 15%;
  }
  .bb_img{
    display:none;
  }
  .rotate-icon{
    position:absolute;
    right:0;
    bottom:8vh;
    transform: translate(50%);
  }
  .rotate-icon img{
    max-width: 20vw;
  }
}