/*! HTML5 Boilerplate v9.0.0-RC1 | MIT License | https://html5boilerplate.com/ */

/* main.css 3.0.0 | MIT License | https://github.com/h5bp/main.css#readme */
/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html {
  color: #222;
  font-size: 1em;
  line-height: 1.4;
}

/*
 * Remove text-shadow in selection highlight:
 * https://twitter.com/miketaylr/status/12228805301
 *
 * Customize the background color to match your design.
 */

::-moz-selection {
  background: #b3d4fc;
  text-shadow: none;
}

::selection {
  background: #b3d4fc;
  text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0;
  padding: 0;
}

/*
 * Remove the gap between audio, canvas, iframes,
 * images, videos and the bottom of their containers:
 * https://github.com/h5bp/html5-boilerplate/issues/440
 */

audio,
canvas,
iframe,
img,
svg,
video {
  vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
  resize: vertical;
}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */

/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Hide visually and from screen readers
 */

.hidden,
[hidden] {
  display: none !important;
}

/*
 * Hide only visually, but have it available for screen readers:
 * https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
 *
 * 1. For long content, line feeds are not interpreted as spaces and small width
 *    causes content to wrap 1 word per line:
 *    https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
 */

.visually-hidden {
  border: 0;
  clip: rect(0, 0, 0, 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
  /* 1 */
}

/*
 * Extends the .visually-hidden class to allow the element
 * to be focusable when navigated to via the keyboard:
 * https://www.drupal.org/node/897638
 */

.visually-hidden.focusable:active,
.visually-hidden.focusable:focus {
  clip: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  position: static;
  white-space: inherit;
  width: auto;
}

/*
 * Hide visually and from screen readers, but maintain layout
 */

.invisible {
  visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * The use of `table` rather than `block` is only necessary if using
 * `::before` to contain the top-margins of child elements.
 */

.clearfix::before,
.clearfix::after {
  content: "";
  display: table;
}

.clearfix::after {
  clear: both;
}


@media print {
  *,
  *::before,
  *::after {
    background: #fff !important;
    color: #000 !important;
    /* Black prints faster */
    box-shadow: none !important;
    text-shadow: none !important;
  }

  a,
  a:visited {
    text-decoration: underline;
  }

  a[href]::after {
    content: " (" attr(href) ")";
  }

  abbr[title]::after {
    content: " (" attr(title) ")";
  }

  /*
   * Don't show links that are fragment identifiers,
   * or use the `javascript:` pseudo protocol
   */
  a[href^="#"]::after,
  a[href^="javascript:"]::after {
    content: "";
  }

  pre {
    white-space: pre-wrap !important;
  }

  pre,
  blockquote {
    border: 1px solid #999;
    page-break-inside: avoid;
  }

  tr,
  img {
    page-break-inside: avoid;
  }

  p,
  h2,
  h3 {
    orphans: 3;
    widows: 3;
  }

  h2,
  h3 {
    page-break-after: avoid;
  }
}

.lato-regular {
  font-family: "Lato", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.lato-black {
  font-family: "Lato", sans-serif;
  font-weight: 900;
  font-style: normal;
}


body {
  margin: 0;
  font-family: "Lato", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.heading {
  font-family: "Lato", sans-serif;
  font-weight: 900;
  font-style: normal;
}

.site-header {
  text-align: center;
  color: #353534;
  padding: 0 20px;
}

.navbar {
  background-color: #fff;
  padding: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo {
  width: 240px; /* Adjust as necessary */
}

.menu-toggle {
  font-size: 35px;
  background: none;
  border: none;
}


/* --------  MENU ------ */
.fullscreen-menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #ffffff;
  z-index: 1000; /* Assicurarsi che il menu sia sopra tutto il resto */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.4s ease-in-out;
  -webkit-transition: opacity 0.4s ease-in-out;
}
.aperto{
  visibility:visible;
  opacity: 1;
  transition: opacity 0.4s ease-in-out;
  -webkit-transition: opacity 0.4s ease-in-out;
}
.fullscreen-menu::before{
  content: "";
  background-image: url(/img/weissmattenColori2.jpg);
  background-position: center center;
  background-size: cover;
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  opacity: 0.2;
}

.close-menu {
  position: absolute;
  top: 20px;
  right: 30px;
  font-size: 30px;
  cursor: pointer;
}
.menu-content {
  position: relative;
}
.menu-logo {
  max-width: 200px; /* Adatta la dimensione del tuo logo */
  margin-bottom: 50px;
}

.menu-list {
  list-style: none;
  padding: 0;
}

.menu-list li {
  margin: 10px 0;
}

.menu-list li a {
  text-decoration: none;
  font-size: 24px;
  color: #333;
  transition: color 0.3s;
}

.menu-list li a.active,
.menu-list li a:hover {
  color: #CA0C00; /* Colore quando l'elemento è attivo o al passaggio del mouse */
}

/* -------- FINE MENU ------ */


.hero {
  height: calc(100vh - 65px);
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;
}
.piste {
  justify-content: flex-start;
}
.paginaPiste{
  overflow-x: hidden;
}
.immagine-piste{
  max-height: 70vh;
  width: 100vw;
  margin-bottom: 10vh;
}

.hero .immagine-hero{
  display: block;
  width: 100%;
}
.hero .freccia-giu{
  width: 25px;
}
.intro-separatore{
  background-image: url(/img/weissmattenColori1.jpg);
  background-size: cover;
  background-position: center;
  height: 40vh;
  width: 100%;
}
.fondo-separatore{
  background-image: url(/img/weissmattenColori2.jpg);
  background-size: cover;
  background-position: center right;
  height: 50vh;
  width: 100%;
}
.maestri-separatore{
  background-image: url(/img/i-maestri-della-scuola-di-sci-Weissmatten.jpg);
  background-size: cover;
  background-position: center center;
  height: 40vh;
  width: 100%;
}
.courses {
  background-color: #eee;
  padding: 50px 20px;
  text-align: center;
}

.courses .content {
  max-width: 800px;
  margin: 0 auto;
}

.courses h2 {
  margin-bottom: 20px;
}

.courses p {
  margin-bottom: 20px;
}

.btn {
  display: inline-block;
  text-decoration: none;
  color: #353534;
  padding: 10px 20px;
  border: 3px solid #CA0C00 ;
}

.site-footer {
  background-color: #fff;
  padding: 20px;
  text-align: center;
}

section.instructors {
  display: flex;
  flex-direction: column;
  align-content: center;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-bottom: 50px;
}
.instructors .team-photo {
  max-width: 100vw;

}

.instructors .content {
  max-width: 100vw;
  padding: 0 20px;
}

section.slopes {
  display: flex;
  flex-direction: column;
  align-content: center;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-bottom: 50px;
}
.slopes .slopes-photo {
  max-width: 100vw;
}
.slopes .content {
  max-width: 100vw;
  padding: 0 20px;
}
.infografica {
  margin: 25px 0;
  padding: 0 10px;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;
}
.infografica h5{
  text-align: center;
  font-size: 1.3em;
}
.infografica ul {
  list-style: none;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
  gap: 20px;
}
.infografica ul li{
  list-style: none;
  text-align: center;
}
.infografica ul li h5{
  font-size: 1.2em;
  margin: 1em 0;
}
.footer-center{
  margin: 50px 0;
}
.footer-center nav ul {
  list-style: none;
  padding: 0;
}
.footer-left-center a {
  color:#353534;
  margin-top: 10px;
  display: block;
}
.footer-center nav ul li {
  list-style: none;
  padding: 0;
  margin: 20px 0;
}
.footer-center nav ul li a {
  color: #353534;
}
.site-footer {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;
  border-top:3px solid #CA0C00;
  color: #353534;
}

.footer-left img{
  width: 90%;
  margin: 0 0 40px 0;

}
.footer-left a{
  color:#353534;
  margin-top: 10px;
  display: block;
}
.footer-right {
  display: flex;
  gap: 20px;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;
}
/* TABELLA */

.tabella{
  font-size: 0.8em;
  width: 100%;
}

.footer-center nav ul li a.active{
  color: #CA0C00;
}

/* LE PISTE */

.ski-section {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.map-container {
  position: relative;
  max-width: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;
  gap: 50px;
}

.ski-map {
  width: 100%;
  height: auto;
}

.trail-list {
  list-style: none; /* Remove default list styling */
  padding: 0; /* Remove default padding */
  width: auto;
}


.trail-list li {
  padding: 5px 0; /* Add some padding to list items */
  position: relative; /* Position relative for the pseudo-elements */
}

/* Define the red, blue, and black classes for list item colors */
.red::before, .blue::before, .black::before,.yellow::before,.yellowBlur::before  {
  content: '•'; /* Unicode bullet character */
  position: absolute; /* Position the bullets absolutely */
  left: -25px; /* Move the bullets to the left of the list items */
}

.red::before {
  color: #E60000; /* Red bullet color */
}
.yellow::before {
  color: #f8d00a;
}
.yellowBlur::before {
  color: #f8c50a;
  filter: blur(3px);
}

.blue::before {
  color: #0000FF; /* Blue bullet color */
}

.black::before {
  color: #000000; /* Black bullet color */
}
.spanred {
  color: #E60000; /* Red bullet color */
}
.spanyellow {
  color: #f8d00a;
}

.spanblue {
  color: #0000FF; /* Blue bullet color */
}

.spanblack {
  color: #000000; /* Black bullet color */
}


/* You can further refine these styles with additional properties as needed */

.description-container {
  text-align: center;
  padding: 20px;
  max-width: 800px;
}

.description-container h2 {
  color: #353534; /* Colore blu scuro, scegli un colore appropriato */
}

.call-to-action {
  background-color: #fff;
  color: #353534;
  text-align: center;
  padding: 20px;
  margin-top: 20px;
}
.testo-centrato{
  text-align: center !important;
}
.marginTop{
  margin-top: 15px;
}
.webcam-section {
  text-align: center;
  width: 100%;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;
}
.webcam-section img {
  max-width: 800px;
}

.description-container-contatti  {
  text-align: center;
  padding: 20px;
  max-width: 800px;
  margin: 0 auto;
}

@media (max-width: 768px) {
  .ski-section {
      flex-direction: column;
  }

  .map-container,
  .description-container {
      max-width: 100%;
  }
}
/* Small devices (es. tablet in modalità verticale) */
@media (min-width: 576px) {
  /* Stili per dispositivi small (>=576px) */
}

/* Medium devices (es. tablet in modalità orizzontale) */
@media (min-width: 768px) {

.tabella{
  font-size: 1em;


}
  section.instructors {
    display: flex;
    flex-direction: row;
    align-content: center;
    justify-content: center;
    gap: 20px;
    margin-bottom: 50px;
    flex-wrap: nowrap;
  }
  .instructors .team-photo,.slopes .slopes-photo {
    max-width: 50vw;
  }
  section.slopes {
    display: flex;
    flex-direction: row-reverse;
    align-content: center;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-bottom: 50px;
    flex-wrap: nowrap;
  }
  .site-footer .container {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: space-around;
    align-items: center;
  }
  .footer-left img {
    width: 250px;
  }
  .site-footer {
    display: block;
  }
  .map-container {
    position: relative;
    max-width: 100%;
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;
    gap: 50px;
  }
  
  .ski-map {
    width: 50vw;
    height: auto;
  }
  
  .trail-list {
    list-style: none; /* Remove default list styling */
    padding: 0; /* Remove default padding */
    width: auto;
  }
  
}

/* Large devices (es. desktop piccoli) */
@media (min-width: 992px) {
  .contenuto-lezioni {
    padding: 20px 0;
    margin: 0 15vw;
}
.hero .immagine-hero {
  max-width: 60%;
  width: 60%;
}
}

/* Extra-large devices (es. desktop grandi) */
@media (min-width: 1200px) {
  .hero .immagine-hero {
    max-width: 45%;
    width: 45%;
  }
}

/* XX-Large devices (es. desktop molto grandi) */
@media (min-width: 1400px) {
  /* Stili per dispositivi XX-large (>=1400px) */
}