@font-face {
    font-family: "Roboto-Black";
    src: url(/fonts/Roboto/Roboto-Black.ttf);
}
@font-face {
    font-family: "Roboto-BlackItalic";
    src: url(/fonts/Roboto/Roboto-BlackItalic.ttf);
}
@font-face {
    font-family: "Roboto-Bold";
    src: url(/fonts/Roboto/Roboto-Bold.ttf);
}
@font-face {
    font-family: "Roboto-BoldItalic";
    src: url(/fonts/Roboto/Roboto-BoldItalic.ttf);
}
@font-face {
    font-family: "Roboto-Italic";
    src: url(/fonts/Roboto/Roboto-Italic.ttf);
}
@font-face {
    font-family: "Roboto-Light";
    src: url(/fonts/Roboto/Roboto-Light.ttf);
}
@font-face {
    font-family: "Roboto-LightItalic";
    src: url(/fonts/Roboto/Roboto-LightItalic.ttf);
}
@font-face {
    font-family: "Roboto-Medium";
    src: url(/fonts/Roboto/Roboto-Medium.ttf);
}
@font-face {
    font-family: "Roboto-MediumItalic";
    src: url(/fonts/Roboto/Roboto-MediumItalic.ttf);
}
@font-face {
    font-family: "Roboto-Regular";
    src: url(/fonts/Roboto/Roboto-Regular.ttf);
}
@font-face {
    font-family: "Roboto-Thin";
    src: url(/fonts/Roboto/Roboto-Thin.ttf);
}
@font-face {
    font-family: "Roboto-ThinItalic";
    src: url(/fonts/Roboto/Roboto-ThinItalic.ttf);
}

@font-face {
    font-family: "RobotoMono-Bold";
    src: url(/fonts/Roboto_Mono/RobotoMono-Bold.ttf);
}
@font-face {
    font-family: "RobotoMono-BoldItalic";
    src: url(/fonts/Roboto_Mono/RobotoMono-BoldItalic.ttf);
}
@font-face {
    font-family: "RobotoMono-Italic";
    src: url(/fonts/Roboto_Mono/RobotoMono-Italic.ttf);
}
@font-face {
    font-family: "RobotoMono-Light";
    src: url(/fonts/Roboto_Mono/RobotoMono-Light.ttf);
}
@font-face {
    font-family: "RobotoMono-LightItalic";
    src: url(/fonts/Roboto_Mono/RobotoMono-LightItalic.ttf);
}
@font-face {
    font-family: "RobotoMono-Medium";
    src: url(/fonts/Roboto_Mono/RobotoMono-Medium.ttf);
}
@font-face {
    font-family: "RobotoMono-MediumItalic";
    src: url(/fonts/Roboto_Mono/RobotoMono-MediumItalic.ttf);
}
@font-face {
    font-family: "RobotoMono-Regular";
    src: url(/fonts/Roboto_Mono/RobotoMono-Regular.ttf);
}
@font-face {
    font-family: "RobotoMono-Thin";
    src: url(/fonts/Roboto_Mono/RobotoMono-Thin.ttf);
}
@font-face {
    font-family: "RobotoMono-ThinItalic";
    src: url(/fonts/Roboto_Mono/RobotoMono-ThinItalic.ttf);
}
@font-face {
  font-family: 'DMSans-Bold';
  src: url(/fonts/DM_Sans/DMSans-Bold.ttf);
}
@font-face {
  font-family: 'DMSans-BoldItalic';
  src: url(/fonts/DM_Sans/DMSans-BoldItalic.ttf);
}
@font-face {
  font-family: 'DMSans-Italic';
  src: url(/fonts/DM_Sans/DMSans-Italic.ttf);
}
@font-face {
  font-family: 'DMSans-Medium';
  src: url(/fonts/DM_Sans/DMSans-Medium.ttf);
}
@font-face {
  font-family: 'DMSans-MediumItalic';
  src: url(/fonts/DM_Sans/DMSans-MediumItalic.ttf);
}
@font-face {
  font-family: 'DMSans-Regular';
  src: url(/fonts/DM_Sans/DMSans-Regular.ttf);
}

* {
  padding: 0;
  margin:  0;
  box-sizing: border-box;
}

body {
  font-family: 'DMSans-Bold' !important;
}

a, a:hover, a:active, a:visited, a:focus {
    text-decoration:none !important;
}

#header {
  position:absolute;
  padding: 0px !important;
  margin-top: 54px;
  margin-left: 80px;
  color: black;
  z-index: 5000;
}

.logo {
  font-size: 50px;
  font-family: 'DMSans-Bold';
  font-weight: bold !important;
}

nav {
  height: 10vh;
}
.wrapper {
  height: 100vh;
  width: 100%;
  background: url("/img/bg.svg")no-repeat center center;
  background-size: cover;
  background-repeat: no-repeat;
}

.nav-wrapper {
  display: none;
}

.nav-links-wrapper {
  display: flex;
  width:50%;
  height:100%;
  /* justify-content: space-around; */
  justify-content:flex-start;
  align-items: center;
  margin-left: auto;
}
.nav-links {
  margin-top:10vh;
  list-style: none;
  text-align: center;
}

.nav-links li {
  padding: 15px;
}

.link {
  color:black;
  text-decoration: none;
  font-size: 23px;
  font-family: 'DMSans-Bold' !important;
}

.link:hover {
  color:white !important;
}

.landing {
  height: 90vh;
  display:flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.custom-btn {
  background-color:black !important;
  color:white !important;
  width: 387px;
  height: 100px;
  border-radius: 43px !important;
  font-size:31px !important;
  font-family: 'DMSans-Bold' !important;
  font-weight: bold !important;
  line-height: 100px !important;
  text-align: center;
}

.moto {
  margin-bottom:35px;
  color:black;
  font-size:70px;
  font-family: 'DMSans-Bold' !important;
}

.app-store-download{
  display: flex;
  justify-content: center;
  align-items: center;
}
/*
.app-store-download {
  position: fixed;
  left: 0;
  right: 0;
} */

@media only screen and (min-width : 0px) and (max-width: 480px) {
  .wrapper {
    background: url("/img/bg-mobile.svg")no-repeat center center;
    background-size: cover;
    background-repeat: no-repeat;
  }

  #header {
    position:absolute;
    padding: 0px !important;
    margin-top: 20px;
    margin-left: 20px;
    color: black;
  }

  .logo {
    font-size: 20px;
    font-family: 'DMSans-Bold';
    font-weight: bold !important;
  }

  .nav-wrapper {
    display: block;
  }

  .line {
    width:30px;
    height:3px;
    background: white;
    margin: 5px;
  }

  nav {
    position: relative;
  }

  .hamburger {
    position: absolute;
    cursor: pointer;
    right: 5%;
    top: 50%;
    transform: translate(-5%, -50%);
    z-index: 2;
  }

  .nav-links-wrapper {
    position: fixed;
    background: #F29C13;
    height: 100vh;
    width: 100%;
    flex-direction: column;
    clip-path: circle(100px at 90% -10%);
    -webkit-clip-path: circle(100px at 90% -10%);
    transition: all 0.2s ease-out;
    pointer-events: none;
  }

  .nav-links-wrapper.open {
    clip-path: circle(700px at 90% -10%);
    -webkit-clip-path: circle(700px at 90% -10%);
    pointer-events: all;
  }

  .logo.on-menu {
    color:white;
  }

  .custom-btn {
    background-color:black !important;
    color:white !important;
    width: 227px;
    height: 54px;
    border-radius: 43px !important;
    font-size:16px !important;
    font-family: 'DMSans-Bold' !important;
    font-weight: bold !important;
    line-height: 54px !important;
  }

  .moto {
    margin-bottom:25px;
    color:black;
    font-size:24px;
    font-family: 'DMSans-Bold' !important;
  }

  .app-store-download {
    position: fixed;
    bottom:0;
    right: 0;
  }
}

@media screen and (min-width:481px) and (max-width:768px) {
  .wrapper {
    background: url("/img/bg-tablet.svg")no-repeat center center;
    background-size: cover;
    background-repeat: no-repeat;
  }

  #header {
    position:absolute;
    padding: 0px !important;
    margin-top: 34px;
    margin-left: 40px;
    color: black;
  }

  .logo {
    font-size: 40px;
    font-family: 'DMSans-Bold';
    font-weight: bold !important;
  }

  .nav-wrapper {
    display: block;
  }

  .line {
    width:30px;
    height:3px;
    background: white;
    margin: 5px;
  }

  nav {
    position: relative;
  }

  .hamburger {
    position: absolute;
    cursor: pointer;
    right: 5%;
    top: 50%;
    transform: translate(-5%, -50%);
    z-index: 2;
  }

  .nav-links-wrapper {
    position: fixed;
    background: #F29C13;
    height: 100vh;
    width: 100%;
    flex-direction: column;
    clip-path: circle(100px at 90% -10%);
    -webkit-clip-path: circle(100px at 90% -10%);
    transition: all 0.2s ease-out;
    pointer-events: none;
  }

  .nav-links-wrapper.open {
    clip-path: circle(980px at 90% -10%);
    -webkit-clip-path: circle(700px at 90% -10%);
    pointer-events: all;
  }

  .logo.on-menu {
    color:white;
  }

  .custom-btn {
    background-color:black !important;
    color:white !important;
    width: 300px;
    height: 77px;
    border-radius: 43px !important;
    font-size:25px !important;
    font-family: 'DMSans-Bold' !important;
    font-weight: bold !important;
    line-height: 77px !important;
  }

  .moto {
    margin-bottom:25px;
    color:black;
    font-size:34px;
    font-family: 'DMSans-Bold' !important;
  }

  .app-store-download {
    position: fixed;
    bottom:0;
    left: 0;
    right: 0;
  }
}