/*
--------------------------------------------------
resets
--------------------------------------------------
*/
html,body,address,blockquote,div,
form,fieldset,caption,
h1,h2,h3,h4,h5,h6,
hr,ul,li,ol,ul,dl,dt,dd,
table,tr,td,th,p,img {
 margin:0;
 padding:0;
}

img, fieldset {
 border:none;
}

*, *:after, *:before {
 box-sizing:border-box;
}
/*
--------------------------------------------------
variables
--------------------------------------------------
*/
:root {
  --primary-color:   linear-gradient(90deg, rgba(26,11,56,1) 0%, rgba(57,25,122,1) 100%);
  --secondary-color: #665CC0;
  --tertiary-color:  #1e90ff;

  --button-primary-bgcolor: linear-gradient(90deg, rgba(83,71,189,1) 0%, rgba(164,0,255,1) 100%);
  --button-secondary-bgcolor: #665CC0;
  --button-tertiary-color:  #fff;
}
/*
--------------------------------------------------
keyframes
--------------------------------------------------
*/
@keyframes         fade-in { from { opacity: 0 } to { opacity: 1 } }
@-o-keyframes      fade-in { from { opacity: 0 } to { opacity: 1 } }
@-ms-keyframes     fade-in { from { opacity: 0 } to { opacity: 1 } }
@-moz-keyframes    fade-in { from { opacity: 0 } to { opacity: 1 } }
@-webkit-keyframes fade-in { from { opacity: 0 } to { opacity: 1 } }

@keyframes scrolling-x-left  { to { background-position-x: -200% } }
@keyframes scrolling-x-right { from { } to { background-position-x:  200% } }
/*
--------------------------------------------------
fonts
--------------------------------------------------
*/
@font-face {
  font-family: 'Poppins';
  src: local('Poppins Black'), local('Poppins-Black'),
    url('../fonts/Poppins-Black.woff2') format('woff2'),
    url('../fonts/Poppins-Black.woff') format('woff');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Poppins';
  src: local('Poppins Black Italic'), local('Poppins-BlackItalic'),
    url('../fonts/Poppins-BlackItalic.woff2') format('woff2'),
    url('../fonts/Poppins-BlackItalic.woff') format('woff');
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Poppins';
  src: local('Poppins Bold'), local('Poppins-Bold'),
    url('../fonts/Poppins-Bold.woff2') format('woff2'),
    url('../fonts/Poppins-Bold.woff') format('woff');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Poppins';
  src: local('Poppins Bold Italic'), local('Poppins-BoldItalic'),
    url('../fonts/Poppins-BoldItalic.woff2') format('woff2'),
    url('../fonts/Poppins-BoldItalic.woff') format('woff');
  font-weight: bold;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Poppins';
  src: local('Poppins ExtraBold'), local('Poppins-ExtraBold'),
    url('../fonts/Poppins-ExtraBold.woff2') format('woff2'),
    url('../fonts/Poppins-ExtraBold.woff') format('woff');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Poppins';
  src: local('Poppins ExtraBold Italic'), local('Poppins-ExtraBoldItalic'),
    url('../fonts/Poppins-ExtraBoldItalic.woff2') format('woff2'),
    url('../fonts/Poppins-ExtraBoldItalic.woff') format('woff');
  font-weight: bold;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Poppins';
  src: local('Poppins ExtraLight'), local('Poppins-ExtraLight'),
    url('../fonts/Poppins-ExtraLight.woff2') format('woff2'),
    url('../fonts/Poppins-ExtraLight.woff') format('woff');
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Poppins';
  src: local('Poppins ExtraLight Italic'), local('Poppins-ExtraLightItalic'),
    url('../fonts/Poppins-ExtraLightItalic.woff2') format('woff2'),
    url('../fonts/Poppins-ExtraLightItalic.woff') format('woff');
  font-weight: 200;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Poppins';
  src: local('Poppins Italic'), local('Poppins-Italic'),
    url('../fonts/Poppins-Italic.woff2') format('woff2'),
    url('../fonts/Poppins-Italic.woff') format('woff');
  font-weight: normal;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Poppins';
  src: local('Poppins Light'), local('Poppins-Light'),
    url('../fonts/Poppins-Light.woff2') format('woff2'),
    url('../fonts/Poppins-Light.woff') format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Poppins';
  src: local('Poppins Light Italic'), local('Poppins-LightItalic'),
    url('../fonts/Poppins-LightItalic.woff2') format('woff2'),
    url('../fonts/Poppins-LightItalic.woff') format('woff');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Poppins';
  src: local('Poppins Medium'), local('Poppins-Medium'),
    url('../fonts/Poppins-Medium.woff2') format('woff2'),
    url('../fonts/Poppins-Medium.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Poppins';
  src: local('Poppins Medium Italic'), local('Poppins-MediumItalic'),
    url('../fonts/Poppins-MediumItalic.woff2') format('woff2'),
    url('../fonts/Poppins-MediumItalic.woff') format('woff');
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Poppins';
  src: local('Poppins Regular'), local('Poppins-Regular'),
    url('../fonts/Poppins-Regular.woff2') format('woff2'),
    url('../fonts/Poppins-Regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Poppins';
  src: local('Poppins SemiBold'), local('Poppins-SemiBold'),
    url('../fonts/Poppins-SemiBold.woff2') format('woff2'),
    url('../fonts/Poppins-SemiBold.woff') format('woff');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Poppins';
  src: local('Poppins SemiBold Italic'), local('Poppins-SemiBoldItalic'),
    url('../fonts/Poppins-SemiBoldItalic.woff2') format('woff2'),
    url('../fonts/Poppins-SemiBoldItalic.woff') format('woff');
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Poppins';
  src: local('Poppins Thin'), local('Poppins-Thin'),
    url('../fonts/Poppins-Thin.woff2') format('woff2'),
    url('../fonts/Poppins-Thin.woff') format('woff');
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Poppins';
  src: local('Poppins Thin Italic'), local('Poppins-ThinItalic'),
    url('../fonts/Poppins-ThinItalic.woff2') format('woff2'),
    url('../fonts/Poppins-ThinItalic.woff') format('woff');
  font-weight: 100;
  font-style: italic;
  font-display: swap;
}
/*
--------------------------------------------------
elements
--------------------------------------------------
*/
h2 {
  font-weight: 500;
  font-size: 2.5em;
  line-height: 1.8em;
}

h2, p {
  margin-bottom: 15px;
}

h3 {
  font-weight: 500;
  font-size: 2.0em;
  line-height: 1.2em;
}

p {
  font-weight: 300;
  line-height: 1.6em;
  letter-spacing: 0.02em;
}

b { 
  font-weight: 500 
}

input,select,button {
  font-family: inherit;
  letter-spacing: 0.05em;
}

a,button,.button,select {
  cursor: pointer;
}

.button {
  padding: 8px 15px;
  display: inline-block;
  border-radius: 10px;
  border: 0;
  text-decoration: none;
}

.button-primary {
  padding: 8px 15px;
  display: inline-block;
  border-radius: 10px;
  background: var(--button-primary-bgcolor);
  text-decoration: none;
  color: #fff;
}

.button-primary-dark {
  background: #000;button-secondary
  color: #fff;
}

.button-secondary {
  padding: 8px 15px;
  display: inline-block;
  border-radius: 10px;
  text-decoration: none;
}

.button-secondary-outline {
  box-shadow: inset 0 0 0 1px #000;
  text-align: center;
  color: #000;
}

.button-tertiary {
  background: var(--button-tertiary-color);
  color: #000;
}

.button-large {
  padding: 15px 25px;
}

.button-large .title {
  font-size: 1em;
}

.button-large .sub-title {
  font-size: 0.85em
}

.button-primary .title {
  display: block;
  text-align: center;
}

.button-primary .sub-title {
  display: block;
  text-align: center;
  font-size: 0.80em;
  opacity: 0.8;
}

select {
  width: 200px;
  padding: 10px;
  font-family: inherit;
  font-size: 14px;
  color: #333;
  background: #f5f5f5;
  border: 1px solid #ccc;
  border-radius: 4px;
}

hr {
  height: 1px;
  margin: 20px 0;
  border: 0;
  background-color: #ececec;
}
/*
--------------------------------------------------
layouts
--------------------------------------------------
*/
html {
  scroll-behavior: smooth;
  font-family: 'Poppins';
}

footer {
  padding: 50px 0 50px;
  border-top: 1px solid #ddd;
}

.container {
  width: 100%;
  max-width: 1024px;
  margin: 0 auto;
  padding: 0 20px;
}

.content {
  max-width: 650px;
}

.container {
  width: 100%;
  margin: 0 auto;
  padding: 0 20px;
}

.content {
  max-width: 650px;
}

.site-logo {
  margin-right: 15px;
  display: flex;
  align-items: center;
}

h1.site-logo {
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-size: 1.0em;
  color: #fff;
}

.site-logo a {
  font-weight: 600;
  text-decoration: none;
  color: #000;
}

.page-header {
  max-width: 100vw;
  overflow-x: hidden;
  min-height: 60px;
  display: flex;
  background-color: #fff;
}

.page-header .container {
/*  max-width: 100%;*/
}

.page-nav {
  width: 100%;
  min-height: inherit;
}

.page-nav a {
  transition: color 0.2s ease-in-out;
  color: #333;
}

.page-nav a:hover {
  color: rgba(190,190,190,0.9);
}

.page-nav a:not(.site-logo a) {
  margin: 0 10px;
  padding: 10px 0;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 0.75em;
  letter-spacing: 0.15em;
}

.page-nav .menu a {
  font-weight: 300;
}

.page-nav a.current {
  font-weight: 600;
}

.page-nav .container {
  min-height: inherit;
  display: flex;
/*  justify-content: space-between;*/
}

.page-nav .menu-wrapper {
  min-height: inherit;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.page-nav .menu-items {
  display: flex;
  list-style: none;
}

@media screen and (min-width: 1440px) {
  .container {
    max-width: 1120px;
  }
}

@media screen and (max-width: 1439px) {
  .container {
    max-width: 1000px;
  }
}

@media screen and (min-width: 1024px) {
  .page-nav a:not(.site-logo a) {
    display: inline-block;
  }
}

@media screen and (max-width: 767px) {
  .menu-button {
    z-index: 1000;
    top: 15px;
    right: 10px;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    border-radius: 10px;
    background-color: rgba(255,255,255,0.5);
    box-shadow: 0 5px 10px rgba(0,0,0,0.1);
    position: fixed;
   -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
  }

  .menu-bar {
    width: 50%;
    height: 1px;
    transform: translateY(-2px);
    display: flex;
    background-color: black;
  }

  .menu-bar::after {
    width: inherit;
    height: inherit;
    transform: translateY(5px);
    content: '';
    display: block;
    background-color: black;
  }

  .page-nav .menu-wrapper {
    display: none;
  }

  .query-wrapper .container {
    max-width: 100%;
  }
}