@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@300;400;700;900&display=swap');

@font-face {
  font-family: MontreuxGrotesk;
  src: url(font/MontreuxG-Lt.otf);
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: MontreuxGrotesk;
  src: url(font/MontreuxG-LtIt.otf);
  font-style: italic;
  font-weight: 300;
}
@font-face {
  font-family: MontreuxGrotesk;
  src: url(font/MontreuxG-Bd.otf);
  font-style: normal;
  font-weight: bold;
}
@font-face {
  font-family: MontreuxGrotesk;
  src: url(font/MontreuxG-BdIt.otf);
  font-style: italic;
  font-weight: bold;
}
@font-face {
  font-family: MontreuxGrotesk;
  src: url(font/MontreuxG-Rg.otf);
  font-style: normal;
  font-weight: normal;
}
@font-face {
  font-family: MontreuxGrotesk;
  src: url(font/MontreuxG-Bk.otf);
  font-style: normal;
  font-weight: 900;
}

/* Typography
__________________________*/
/* ---Home Page
__________________________*/
.home-text-bigBoy {
  font-weight: 900;
  font-size: 2.4rem;
  line-height: 2.8rem;
}
.home-text-superbigBoy {
  font-weight: 900;
  font-size: 6.6rem;
  line-height: 7.2rem;
}
.work-text-bigBoy {
  font-weight: 900;
  font-size: 2.4rem;
  line-height: 2.8rem;
}
.home-introText {
  font-weight: 300;
  font-size: 1.2rem;
  line-height: 1.8rem;
  padding: 0 0 1.2em;
}
.home-introTextTitle {
  font-weight: bold;
  font-size: 1.8rem;
  line-height: 1.8rem;
  padding: 0 0 0;
}

.align-right{
  text-align: right;
  float: right;
}

.home-title {
  margin: 0;
  font-size: 1.2rem;
}

.home-client {
  font-size: 1.2rem;
  font-weight: 300;
  font-style: italic;
  margin: 0.1em 0 0;

}
.home-client span {
  font-weight: bold;
  font-style: normal;
  font-size: 0.8rem;
}

.about-me-text {
  font-weight: normal;
  font-size: 0.8rem;
  line-height: 1.2rem;
}

.pop960 {
  font-weight: 900;
  font-size: 2.4rem;
  line-height: 2.8rem;
}

.text-blue {
  color: #8bceff;
}
.text-blueDark {
  color: #1d2977;
}
.text-bluelight {
  color: #CCE3FF;
}
.text-redlight {
  color: #ffd9db;
}
.text-red {
  color: #ff8287;
}
.text-grey {
  color: #8f9dc3;
}
.text-dark {
  color: #161719;
}

.text-blueBlack {
  color: #091129;
}
.text-blueDeep {
  color: #003C33;
}
.text-blueCiel {
  color: #2c61ed;
}
.textBeige {
  color: #9F5A43;
}
.textBeigelight{
  color:#BE7A58;
}
.textWhitish {
  color: #f7f7f7;
}
.text-rose {
  color: #C2424E;
}
.text-orange {
  color: #ff4200;
}

/*Ipad 768px*/
@media (min-width:40em) {
  .home-text-bigBoy{
    font-size: 4rem;
    line-height: 4.8rem;
  }
  .home-text-superbigBoy {
    font-size: 10rem;
    line-height: 10.8rem;
  }
  .work-text-bigBoy{
    font-size: 4rem;
    line-height: 4.8rem;
  }
  .about-me-text {
    font-size: 1rem;
    line-height: 1.5rem;
  }
}
@media (min-width:60em) {
  .home-text-bigBoy{
    font-size: 4.8rem;
    line-height: 5.2rem;
  }
  .work-text-bigBoy{
    font-size: 4.8rem;
    line-height: 5.2rem;
  }
  .home-introText{
    font-size: 1.6rem;
    line-height: 2.4rem;
    padding: 0;
  }
  .about-me-text {
    font-size: 1.2rem;
    line-height: 1.6rem;
  }
  .home-title {
    font-size: 1.6rem;
    margin: 0.8em 0 0.2em;
  }
  .home-client {
    font-size: 1.2rem;
  }
  .pop960 {
    padding-top: 5vh;
    font-size: 6rem;
    line-height: 6.8rem;
  }
}
/*Dekstop 1280px*/
@media (min-width:80em) {
  .home-text-bigBoy{
    font-size: 8rem;
    line-height: 8.8rem;
  }
  .work-text-bigBoy{
    font-size: 8rem;
    line-height: 8.8rem;
    padding: 0 0 0.8em;
  }
  .home-introText{
    font-size: 1.6rem;
    line-height: 2.4rem;
    padding: 0;
  }
}