* {
    box-sizing: border-box;
    position: relative;
    -webkit-font-smoothing: antialiased;
}
@font-face {
    font-family: Inter Regular;
    font-weight: 400;
    src: url(fonts/Inter-Regular.ttf);
}

@font-face {
    font-family: Inter Semibold;
    font-weight: 600;
    src: url(fonts/Inter-SemiBold.ttf);
}

@font-face {
    font-family: Inter Bold;
    font-weight: 700;
    src: url(fonts/Inter-Bold.ttf);
}

@font-face {
    font-family: Inter ExtraBold;
    font-weight: 900;
    src: url(fonts/Inter-ExtraBold.ttf);
}

@font-face {
    font-family: Jumper Bold;
    font-weight: 700;
    src: url(fonts/Jumper-Bold.ttf);
}

@font-face {
    font-family: Inter Italic;
    font-weight: normal;
    src: url(fonts/Inter-Italic.ttf);
}

@font-face {
  font-family: Cassius;
  font-weight: 300;
  src: url(cassius/Cassius-Regular.ttf);
}

@font-face {
  font-family: CoinMono Medium;
  font-weight: 500;
  src: url(coin-mono/CoinMono-Medium.ttf);
}

@font-face {
  font-family: CoinMono Regular;
  font-weight: 400;
  src: url(coin-mono/CoinMono-Regular.ttf);
}

body {
    margin: 0;
    padding: 0;
    font-size: 14px;
    font-family: Inter Regular;
    padding-bottom: 100px;
    height: 100%;
    position: relative;
    color: #1A4D95;
    min-height: 100vh;
    background-color: #FFF;
}
.outer-wrapper {
    width: 100%;
    padding: 0 30px;
}
.inner-wrapper {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
}
.header-wrapper {
    display: inline-block;
    padding: 30px 0;
    width: 100%;
    border-bottom: 1px solid rgba(12, 32, 77, 0.2);
    font-family: Inter Semibold;
}
.logo {
    width: 120px;
    display: inline-block;
    vertical-align: middle;
}
.links-wrapper {
    width: calc(100% - 126px);
    display: inline-block;
    text-align: right;
}
.links-wrapper>a {
    display: inline-block;
    vertical-align: middle;
    margin-left: 30px;
}
a,
a:link,
a:visited,
a:hover,
a:active,
a:-webkit-any-link {
    text-decoration: none;
    color: #1F52C6;
}
.secondary {
    padding: 5px 14px 6px;
    border: 2px solid #1F52C6;
    border-radius: 40px;
    color: #1F52C6;
}
.content-wrapper {
    padding: 80px 0 0px;
    width: 60%;
    margin: 0 auto;
}

.photo-wrapper {

}

h1 {
    font-size: 48px; font-family: Cassius; color: #1A4D95; line-height: 60px;
}
h2 {
    font-size: 32px; font-family: Cassius; color: #1A4D95; line-height: 40px; padding-bottom: 30px;
}
.primary {
    border: 1px solid #0551F6; padding: 8px 18px; display: inline-block; background-color: #0551F6; color: white; border-radius: 50px; font-family: CoinMono Medium; font-size: 12px;
}
.outer-wrapper.footer { height: 100px; position: absolute; bottom: 0px; left: 0; width: 100%; padding: 50px 30px 80px; border-top: 1px solid #eff3fa; }

input { width: 100%; margin-bottom: 20px; border: 1.5px solid #eff3fa; outline: none; background-color: #fff; padding: 10px 13px; font-size: 16px; font-family: Inter Regular; color: #1A4D95;}

::-webkit-input-placeholder { color: #1A4D95; opacity: 0.5; }
::-ms-input-placeholder { color: #1A4D95; opacity: 0.5; }
::placeholder { color: #1A4D95; opacity: 0.5; }

.the_image {
    width: 80%; margin: 0 auto; background: no-repeat center center; background-image: url(https://collarbone.com/hmw/css/zen_hmw.png); position: relative; padding-bottom: 50%;     -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover; margin: 50px auto 100px;
}

@media (max-width: 800px) {
  .links-wrapper>a { display:none; }
  .links-wrapper>a.secondary { display: inline-block; }
  .content-wrapper { width: 100%; }
  .outer-wrapper.footer { height: 160px; text-align: center; }
  .content-wrapper {
    padding: 40px 0 0px;
}
.the_image { padding-bottom: 100%;  }
.flag { display: none; }
}