@font-face {
  font-family: fontBold;
  src: url('/fonts/layout/Montserrat-Bold.ttf');
}
@font-face {
  font-family: fontMedium;
  src: url('/fonts/layout/Montserrat-Medium.ttf');
}
@font-face {
  font-family: fontRegular;
  src: url('/fonts/layout/Montserrat-Regular.ttf');
}

body {
  margin: 0;
  padding: 0;
  background-color: black;
  background-image: url(/img/2024/background.webp);
  background-attachment: fixed;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center; 
  font-family: 'fontRegular', sans-serif;
}

.container {
  max-width: 100%;
}

.title {
  font-size: 5.5em;
  text-align: center;
}

.date-number {
  font-size: 4em; }

.date-text {
  font-size: 3em; }
  
.color-v1 {
  color: #21d90c;
}
.color-v2 {
  color: #cad90d; }

h1 {
  font-family: 'fontBold', sans-serif;
  font-size: 5em;
}

.font-bold {
  font-family: 'fontBold', sans-serif;
}

.bg-black-60 {
    background-color: rgba(0, 0, 0, 0.6);
    color: white;
}
.bg-black-80 {
    background-color: rgba(0, 0, 0, 0.8);
    color: white;
}

.titoletto-color {
  background-color: #84bc2a; }

.text-shadow {
  text-shadow: 2px 2px 4px black; }

.where {
  background-color:#cad90d;
  font-family: 'fontBold', sans-serif;
  font-size: 1.2em;
}

.globe {
  margin: -3em;
  margin-top: -5em;
  margin-bottom: -4em;
  padding-top: 5.5em;
  float: right;
  color: white;
  line-height: 0.9;
  font-size: 2.0em;
  text-align: center;
  background-image: url(/img/2024/globe.webp);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center; 
  font-family: 'fontBold', sans-serif;
  height: 15.0em;
  width: 15.0em;
}

.elettrotux {
  margin-left:-4.0em;
  margin-bottom: -1.0em;
}
  
.speaker, .speaker:visited, .speaker:hover, .speaker:active {
  font-weight: 300;
  color: #21d90c;
  padding-bottom: 3px;
}

.talk, .talk:visited, .talk:hover, .talk:active {
  color: white;
}

.logo, .logo:visited, .logo:hover, .logo:active {
  float: left;
  color: white;
  text-align: center;
  font-family: 'fontMedium', sans-serif;
  font-size: 0.6em;
  display: inline-block;
  max-width: 130px;
}
.logo > img {
  max-height: 70px;
  max-width: 130px;
}

.blink_text {
  animation:2s blinker linear infinite;
}
@keyframes blinker { 
  0% { opacity: 1.0; }
  50% { opacity: 0.0; }
  100% { opacity: 1.0; }
}

.barre {
 border-left: 1px solid #21d90c;
 border-right: 1px solid #21d90c;
}

@media only screen and (max-width: 768px) {
  .globe {
    margin-top: -1.0em;
    margin-right: 0;
  }
  .barre {
   border-left: none;
   border-right: none;
  }
}