@font-face {
  font-family: 'lyon';
  src: url('../../css/frontend/fonts/subset-lyon-bold.woff2') format('woff2'),
      url('../../css/frontend/fonts/subset-lyon-bold.woff') format('woff');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'lyon';
  src: url('../../css/frontend/fonts/subset-lyon-light.woff2') format('woff2'),
      url('../../css/frontend/fonts/subset-lyon-light.woff') format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'lyon';
  src: url('../../css/frontend/fonts/subset-lyon-black.woff2') format('woff2'),
      url('../../css/frontend/fonts/subset-lyon-black.woff') format('woff');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'lyon';
  src: url('../../css/frontend/fonts/subset-lyon-medium.woff2') format('woff2'),
      url('../../css/frontend/fonts/subset-lyon-medium.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'lyon';
  src: url('../../css/frontend/fonts/subset-lyon-regular.woff2') format('woff2'),
      url('../../css/frontend/fonts/subset-lyon-regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Lato';
  src: url('../../css/frontend/fonts/subset-Lato-Heavy.woff2') format('woff2'),
      url('../../css/frontend/fonts/subset-Lato-Heavy.woff') format('woff');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

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

@font-face {
  font-family: 'Playfair Display';
  src: url('../../css/frontend/fonts/subset-PlayfairDisplay-Italic.woff2') format('woff2'),
      url('../../css/frontend/fonts/subset-PlayfairDisplay-Italic.woff') format('woff');
  font-weight: normal;
  font-style: italic;
  font-display: swap;
}


body { font-family: 'lyon', sans-serif; color: #3f3f3f; font-size: 24px; line-height: 1.5; font-weight: 300; }

a       { color: #fff; outline: 0; }
a:hover, a:focus { color: #a26f48; text-decoration: none; outline: 0; }

b, strong { font-weight: 500; color: #a26f48; }

h1 { margin: 0 0 30px 0; color: #fff; font-family: 'lyon', sans-serif; font-size: 70px; line-height: 1.2; font-weight: 400; }
h2 { margin: 0 0 20px 0; color: #fff; font-family: 'lyon', sans-serif; font-size: 40px; line-height: 1.3; font-weight: 400; }
h3 { margin: 0 0 10px 0; color: #fff; font-family: 'lyon', sans-serif; font-size: 30px; line-height: 1.3; font-weight: 400; }

/************************ GENERAL *********************************/
html { background: #000; }
body { background: #000; }

#intro { padding: 0 100px; height: 100vh; }
.container-fluid { display: flex; height: 100%; align-items: center; }
#logo { width: 700px; }
#logo img { width: 100%; }
#left { flex: 0 0 50%; }
#right { flex: 0 0 50%; text-align: center; }
#intro-line1 { color: #504a43; font-size: 64px; }
#social { display: flex; justify-content: center; gap: 30px; width: 100%; margin: 40px 0; }
#intro-line2 { color: #504a43; font-size: 30px; }
#contact { display: flex; flex-direction: column; align-items: flex-start; max-width: 300px; margin: 30px auto 0 auto; list-style: none; color: #fff; font-size: 22px; line-height: 2; }
#contact li i { font-size: 30px; line-height: 1; color:#a26f48; position: relative; top: 5px; }
#contact li p { margin: 0; }
#eu-logos { display: flex; margin-top: 60px; align-items: center; justify-content: center; gap: 30px; }


/************************MEDIA QUERIES*************************/
@media (max-width: 575.98px) {  
  #logo { margin-bottom: 20px !important; width: 220px !important; }
}

@media (max-width: 767.98px) {    
  #eu-logos img { height: 55px; }
  #eu-logos img:nth-child(3) { height: 20px; }
}

@media (min-width: 768px) and (max-width: 991.98px) {  }

@media (min-width: 992px) and (max-width: 1199.98px) {  }

@media (max-width: 1199.98px) {  
  #intro { padding: 30px 0; height: auto; }
  .container-fluid { flex-direction: column; justify-content: flex-start; }
  #logo { margin-bottom: 50px; width: 320px; }
  #left, #right { flex: unset; }
  #intro-line1 { font-size: 40px; }
  #intro-line2 { font-size: 25px; }
  #contact { font-size: 18px; }
}

@media (min-width: 1200px) and (max-width: 1700px) {  
  #eu-logos img { height: 75px; }
  #eu-logos img:nth-child(3) { height: 30px; }
}