:root {
  --palette_white: #FFFFFF;
  --palette_blue: #3A6CA5;
  --palette_purple: #004E9B;
  --palette_orange: #E94F37;
  --palette_yellow: #FFD13A;
  --palette_green: #A1CA5B;
  --palette_dark_blue: #043351;

  --border-width: 5px;
}

html {
  height: 100%;
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
  font-family: 'Bebas Neue';
}

body {
  position: relative;
  margin: 0;
  padding-bottom: 6rem;
  min-height: 100%;
  background-image: url(../IMG/PNG/bg_pattern.png);
  background-repeat: repeat;
}

footer {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 50px;
  background-color: var(--palette_purple);
}

footer table {
  margin-right: 5%;
  height: 100%;
  margin: auto;
}

footer td {
  padding-left: 15px;
  padding-right: 15px;
  font-size: 10pt;
  color: var(--palette_white);
}


#navbar {
  z-index: 1000;
  position: sticky;
  top: 0;
  width: 100%;
  height: 70px;
  background-color: var(--palette_purple);
  border-bottom: 1px var(--palette_white) solid;
}

#navbar table {
  padding-top: 3px;
  width: 60em;
  height: 100%;
  margin: auto;
  table-layout: fixed;
}

#navbar td {
  width: calc(100%/4);
  height: 100%;
}

#navbar a {
  line-height: 70px;
  display: block;
  width: 100%;
  height: 105%;
  float: none;
  color: var(--palette_white);
  font-size: 24pt;
  font-weight: 300;
  font-stretch: extra-condensed;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  transition: 0.2s;
}

#content {
  position: relative;
  margin: 30px auto;
  width: 80%;
  min-height: 100%;
  max-width: 1300px;
}

#contact_table {
  width: 100%;
  height: 100%;
}

#contact_table th {
  font-family: 'Permanent Marker', cursive;
  color: var(--palette_green);
  text-align: center;
  height: 2em;
  font-size: 33pt;
}

#map {
  width: 90%;
  padding-top: 70%;
  margin-left: 0%;
  margin-right: 10%;
}

#mail_table {
  width: 90%;
  height: 100%;
  margin-left: 10%;
  margin-right: 0%;
}

#mail_table th {
  color: var(--palette_white);
  font-family: 'Bebas Neue';
  font-size: 16pt;
}

#mail_table td {
  font-size: 16pt;
  color: var(--palette_white);
}

.left_cell {
  text-align: right;
  padding-right: 1em;
}

.right_cell {
  text-align: left;
  padding-left: 1em;
}

#mail_table a {
  color: var(--palette_green);
  text-decoration: none;
}

#facebook {
  margin: 5% auto;
  width: 60%;
}

#facebook td {
  color: var(--palette_white);
  text-align: center;
  font-family: 'Permanent Marker', cursive;
  font-size: 18pt;
}

h1 {
  width: 100%;
  color: var(--palette_green);
  text-align: center;
  font-family: 'Permanent Marker', cursive;
  font-size: 4em;
}

p {
  text-align: justify;
  color: var(--palette_white);
  font-size: 2em;
}

#signature {
  color: var(--palette_green);
  text-align: right;
}

#home_content {
  position: relative;
  margin-top: 0px;
  margin-bottom: 30px;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  min-height: 100%;
  max-width: 1920px;
}

#logo_sagra {
  position: absolute;
  top: 70;
  z-index: 200;
  width: 55%;
  margin-left: 10%;
  font-family: 'Bebas Neue';
}

#logo_sagra img {
  width: 100%;
  margin-top: 10%;
}

#logo_sagra div {
  text-align: right;
  color: white;
}

#logo_sagra p {
  padding-left: 20px;
  font-size: 2em;
}

#chiesa_casoni {
  position: absolute;
  top: 70;
  right: 0;
  z-index: 100;
  width: 60%;
  -webkit-mask-image: linear-gradient(to left, rgba(0, 0, 0, 1), rgba(0, 0, 0, 1), rgba(0, 0, 0, 1), rgba(0, 0, 0, 0), rgba(0, 0, 0, 0));
}

#place_holder {
  position: relative;
  top: 70;
  right: 0;
  z-index: 1;
  width: 60%;
  -webkit-mask-image: linear-gradient(to left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0));
}

.green_text {
  color: var(--palette_green);
  font-weight: bold;
}

#schedule_table {
  width: 100%;
  height: 100%;
  font-family: 'Bebas Neue';
  border-collapse: separate;
  border-spacing: 0px 0px;
}

#schedule_table td {
  height: 4em;
  color: white;
  border-bottom: 1px var(--palette_white) solid;
  padding: 0 0 20px 0;
}

.date_cell {
  width: 5em;
  font-weight: bold;
  text-align: center;
  font-size: 2em;
  background-color: var(--palette_blue);
}

.text_cell {
  border-right: 1px var(--palette_white) solid;
}

.date_number {
  font-size: 2em;
}

.hour_p {
  font-size: 20pt;
  padding-left: 40px;
}

#count_down {
  font-family: 'Permanent Marker', cursive;
  font-size: 4em;
  margin-top: 2em;
  color: white;
  text-align: center;
}

#filler_lotteria {
  width: 100%;
  background-color: #FFFFFF90;
  aspect-ratio: 9/16;
}

#filler_lotteria div {
  width: 80%;
  position: absolute;
  color: var(--palette_blue);
  text-shadow: -2px 0 var(--palette_green), 0 2px var(--palette_green), 2px 0 var(--palette_green), 0 -2px var(--palette_green);
  top: 30%;
  left: 12%;
  rotate: -45deg;
  font-family: 'Lobster';
  font-size: 10vh;
}

#lista_premi {
  display: block;
  margin-top: 8em;
  margin-left: auto;
  margin-right: auto;
  width: 80%;
  max-width: 1131px;
}

#video_mosaico {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

#mosaico_title {
  margin-top: 3em;
  margin-bottom: 0.5em;
  width: 100%;
  color: var(--palette_white);
  text-align: center;
  font-size: 2em;
}

#libretto {
  position: relative;
  width: 30%;
  aspect-ratio: 1/1;
  margin: 2vh auto;
}

.libretto_circle1 {
  background-color: var(--palette_green);
  width: 35%;
  aspect-ratio: 1/1;
  border-radius: 50%;
  border-style: solid;
  border-color: var(--palette_white);
  border-width: var(--border-width);
  position: absolute;
  top: 0;
  left: 0;
}

.libretto_circle2 {
  background-color: var(--palette_dark_blue);
  width: 70%;
  aspect-ratio: 1/1;
  border-radius: 50%;
  border-style: solid;
  border-color: var(--palette_white);
  border-width: var(--border-width);
  position: absolute;
  top: 15%;
  left: 15%;
}

.libretto_circle3 {
  background-color: var(--palette_green);
  width: 35%;
  aspect-ratio: 1/1;
  border-radius: 50%;
  border-style: solid;
  border-color: var(--palette_white);
  border-width: var(--border-width);
  position: absolute;
  bottom: 0;
  right: 0;
}

.libretto_circle1.above {
  border-style: none;
  translate: var(--border-width) var(--border-width);
}

.libretto_circle2.above {
  border-style: none;
  translate: var(--border-width) var(--border-width);
}

.libretto_circle3.above {
  border-style: none;
  translate: calc(-1*var(--border-width)) calc(-1*var(--border-width));
}

#libretto_link_text {
  position: absolute;
  color: var(--palette_white);
  font-size: 1.8rem;
  text-align: center;
  width: 100%;
  top: 50%;
  transform: translateY(-50%);
}