@font-face {
  font-family: "MonaCondensedBold";
  src: local('sans-serif'), local('sans'), url('../fonts/MonaSansCondensed-Bold.woff2') format('woff2');
  font-display: swap;
}

@font-face {
  font-family: "MonaSansCondensedMedium";
  src: local('sans-serif'), local('sans'), url("../fonts/MonaSansCondensed-Medium.woff2") format('woff2');
  font-display: swap;
}

@font-face {
  font-family: "MonaSansRegular";
  src: local('sans-serif'), local('sans'), url("../fonts/MonaSans-Regular.woff2") format('woff2');
  font-display: swap;
}

@font-face {
  font-family: "MonaSansCondensedRegular";
  src: local('sans-serif'), local('sans'), url("../fonts/MonaSansCondensed-Regular.woff2") format('woff2');
  font-display: swap;
}

@font-face {
  font-family: "MonaSansExpandedBlack";
  src: local('sans-serif'), local('sans'), url("../fonts/MonaSansExpanded-Black.woff2") format('woff2');
  font-display: swap;
}


*,
*:after,
*:before {
  box-sizing: inherit;
  border: 0 solid;
}

:root {
  --header-top-height-full: 7vw;
  --header-bottom-height-full: 2vw;

  --header-bg: #fff;
  --body-bg: #fff;
  --color-blu-tiffany: #00B0B1;
  --color-corallo: #EB8258;
  --color-menu-su-chiaro: #324b4b;
  --color-menu-su-scuro: #eee8a9;
  --color-band-beige-og: #e6daba;
  --color-band-beige-lt-og: #f7f3d6;
  --color-band-beige-lter-og: #fefaf0;
  --color-band-ligth-gray-og: #f1f1f1;
  --color-band-ligth-gray: #f2f2f2;
  --color-text-default-og: #333;
  --color-text-default-border: #333;
  --color-text-lighter-og: #444;
  --color-text-lighter: #000;
  --color-gold-og: #b39340; /*#5F5025*/
  --color-dark-gold-og: #7b652c;
  --page-width: 1280px;

  --carousel-basic-size: 23;
}

body {
  font-family: "MonaSansRegular", sans-serif;
  font-size: 20px;
  background-color: var(--color-band-beige-og);
  color: var(--color-text-default-og);
  position: relative;
  margin: 0;
}


h2 {
  font-family: "MonaCondensedBold";
  font-size: 3rem;
}


#band_tail {
  height: calc(3 * var(--header-top-height-full));
}

.gold_links a {
  display: inline-block;
  color: var(--color-dark-gold-og);
  text-decoration: none;
  font-family: inherit;
  font-size: inherit;
  font-weight: bold;
  transition: color 300ms, background-color 300ms;
}

.gold_links a:hover {
  color: var(--color-gold-og);
  text-decoration: underline;
}

.svg-content {
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
}

.center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.vertical_center {
  margin-top: auto;
  margin-bottom: auto;
}

.text_bright {
  color: var(--color-menu-su-scuro);
}

.lineUp {
  animation: 2s fadeInAnimation ease-out 1;
}

@keyframes fadeInAnimation {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* ----> HEADER */

.header_top {
  width: 100%;
  display: grid;
  grid-template-columns: 50% 50%;
  background-color: var(--color-blu-tiffany);
  height: var(--header-top-height-full);
  overflow: hidden;
  position: sticky;
  top: 0;
  z-index: 99;
  min-height: 80px;
  text-align: center;
  /*border-radius: 0px 0px var(--header-top-height-full) var(--header-top-height-full);  */

}

.header_top .logo {
  display: flex;
  padding-left: calc(2* var(--header-top-height-full));
  min-height: 60px;
}

.header_top .logo img {
  padding-top: 0.7vw;
  padding-bottom: 0.7vw;
}


.header_top .menu {
  margin-top: auto;
  margin-bottom: auto;
}

.header_top .header_navigation {
  display: flex;
  font-family: 'MonaSansExpandedBlack';
  font-size: 1.6rem;
}

.header_top .header_navigation .languages {
  margin-right: auto;
  margin-left: 3vw;
}

.header_top .header_navigation a {
  text-decoration: none;
  color: var(--color-text-default-og);
}

.header_top .header_navigation a:hover {
  color: var(--color-menu-su-scuro);
}

.header_top .header_navigation .current_page {
  color: var(--color-text-lighter);
}

.header_top .header_navigation .current_page a {
  text-decoration: none;
  color: var(--color-text-lighter);
}

.header_top .header_navigation .current_page a:hover {
  color: var(--color-text-lighter);
}

.header_top .header_navigation .separatore {
  color: var(--header-bg);
  padding-left: 3px;
  padding-right: 3px;
  width: 20px;
}

.header_top .header_navigation .flag {
  width: 1.5rem;
  height: 1.5rem;
}


.header_bottom {
  width: 100%;
  position: relative;
  display: flex;
  background-color: var(--header-bg);
  height: calc(var(--header-top-height-full) + var(--header-bottom-height-full));
  top: calc(-1 * var(--header-top-height-full));
  overflow: hidden;
  /*border-radius: 0px 0px calc(var(--header-top-height-full) + var(--header-bottom-height-full)) 0px;  */
  /* border-radius: 0px 0px calc(var(--header-top-height-full) + var(--header-bottom-height-full)) calc(var(--header-top-height-full) + var(--header-bottom-height-full));  */
}


.header_bottom .logo {
  display: flex;
  width: 100%;
}

.header_bottom .img_logo {
  margin-top: auto;
  padding-bottom: 3px;
  height: calc(var(--header-bottom-height-full) * 0.8);
  padding-left: calc(2* var(--header-top-height-full));
}


/* ----> PROGETTO/CONTATTACI */

#band_progetto {
  display: grid;
  grid-template-columns: 15% 35% 35% 15%;
  font-family: "MonaSansRegular";
  background-color: var(--color-band-beige-lter-og);
}

#band_progetto #robottino {
  text-align: center;
  padding: 1vw;
}

#band_progetto #contatto_per_progetto {
  text-align: justify;
  padding: 2vw;
}

#band_progetto #contatto_per_progetto #discutiamo_titolo {
  font-size: 1.8rem;
}

#band_progetto #contatto_per_progetto #discutiamo {
  font-size: 1.6rem;
}

/* ----> FOOTER */

#band_footer_container {
  padding-left: 10%;
  padding-right: 10%;
  background-color: var(--color-band-beige-lt-og);  
}

#band_footer {  
  display: grid;
  grid-template-columns: 75% 25%;
  line-height: 0.6;
  font-family: 'MonaSansCondensedRegular';
}

#band_footer p {
  padding-left: unset;
  padding-right: unset;
}

#band_footer #social {
  display: grid;
  grid-template-columns: 100%;
  text-align: center;
}

.linkedin_logo {
  width: 3rem;
  padding: 0.5rem;
  ;
}

/* ----> CREDITS */

#band_credits {
  text-align: center;
  font-size: 0.8rem;
  background-color: var(--color-band-ligth-gray-og);
}

/* ----> CORNICETTA */

.band_decorativa {
  width: 100%;
  height: 10px;
  background-color: var(--color-blu-tiffany);
}

#band_titolo {
  width: 100%;
  text-align: center;
  font-family: "MonaCondensedBold";
  font-size: 15vw;
  position: relative;
  top: calc(-0.7 * var(--header-top-height-full));
  color: var(--color-menu-su-scuro);
  text-shadow: 2px 0 var(--color-text-default-border), -2px 0 var(--color-text-default-border), 0 2px var(--color-text-default-border), 0 -2px var(--color-text-default-border),
    1px 1px var(--color-text-default-border), -1px -1px var(--color-text-default-border), 1px -1px var(--color-text-default-border), -1px 1px var(--color-text-default-border);
}


@media (max-width: 1500px) {
  :root {
    --carousel-basic-size: 16;
  }
}

@media (max-width: 1350px) {
  .header_top {
    grid-template-columns: 100%;
  }

  .header_top .logo {
    padding: 0;
    min-height: unset;
  }

  .header_top .menu {
    font-size: 1.4rem;
    margin-left: auto;
    margin-right: auto;
  }

  .header_top .logo img {
    padding-bottom: unset;
  }

  .header_top .logo img {
    margin-left: auto;
    margin-right: auto;
  }


  .header_bottom .img_logo {
    margin-left: auto;
    margin-right: auto;
    padding-left: unset;
  }


}


@media (max-width: 1200px) {

  :root {
    --carousel-basic-size: 22;
  }

  #band_progetto {
    grid-template-columns: 100%;
  }

  #band_footer #linkedin {
    margin-left: auto;
    margin-right: auto;
  }
}

@media (max-width: 900px) {

  :root {
    --carousel-basic-size: 16;
    --header-bottom-height-full: 4vw;
  }

  #band_progetto #contatto_per_progetto {
    text-align: center;
  }

  #band_footer {
    line-height: 1;
  }
}

@media (max-width: 670px) {

  :root {
    --carousel-basic-size: 12;
    --header-top-height-full: 15vw;
  }

  .header_top .header_navigation {
    font-size: 0.9rem;
    display: grid;
    grid-template-columns: auto auto auto auto auto auto auto auto;
  }

  .header_bottom .img_logo {
    height: calc(var(--header-bottom-height-full) * 0.6);
  }

  #band_footer {  
    grid-template-columns: 100%;
  }  

}

@media (max-width: 500px) {

  :root {
    --carousel-basic-size: 9;
  }
}