﻿

/*************** modifiche bootstrap ****************/

/*  blu:      0,113,188    #0071BC  */
/*  azzurro:  27,230,175   #1BE6AF  */

.navbar-light .navbar-toggler
{
  border-color: #FFFFFF !important;
} 

.navbar-light span.navbar-toggler-icon
{
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,255,255, 1)' stroke-width='3' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
  color: #FFFFFF !important;
}




/*************** media query ****************/


.bkMalvaWhite
{
  background-color: white !important;
}

.logodim
{
  height: 72px; /*36px*/
  position: relative;
}


.fsx
{
  font-size: 9pt;
}

.fs0
{
  font-size: 11pt;
}

.fs1
{
  font-size: 13pt;
}

.fs2
{
  font-size: 15pt;
}

.fs3
{
  font-size: 17pt;
}

.fs4
{
  font-size: 19pt;
}

.hBox1
{
  min-height : 450px;
}

.hBox2
{
  min-height: 300px;
}

.hLogoGara
{
  min-height: 370px;
}

.fsPuntiGara
{
  font-size: 64pt;
}

.fsLuogoGara
{
  font-size: 22pt;
}

.imgSizeFase
{
  width: 32px;
  height: 32px;
}

.fixed-top0
{
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  left: 0 !important;
  min-height: 50px;
}


.fixed-top1
{
  position: fixed !important;
  top: 50px !important;
  right: 0 !important;
  left: 0 !important;
  min-height: 30px;
}

.fixed-top2
{
  position: fixed !important;
  top: 80px !important;
  right: 0 !important;
  left: 0 !important;
}

body
{
  margin-top: 130px !important;
}




@media (max-width: 1024px)
{
  .bkMalvaWhite
  {
    background-color: #EBE5FF !important;
  }

  .logodim
  {
    height: 50px;
    position: relative;
    vertical-align: middle !important;
  }

  .hBox1
  {
    min-height: 300px;
  }

  .hBox2
  {
    min-height: 250px;
  }

  .hLogoGara
  {
    min-height: 270px;
  }

  .fsPuntiGara
  {
    font-size: 44pt;
  }

  .fsLuogoGara
  {
    font-size: 18pt;
  }

  .imgSizeFase
  {
    width: 32px;
    height: 32px;
  }

  .fixed-top1
  {
    position: fixed !important;
    top: 50px !important;
    right: 0 !important;
    left: 0 !important;
    min-height: 30px;
  }

  .fixed-top2
  {
    position: fixed !important;
    top: 80px !important;
    right: 0 !important;
    left: 0 !important;
  }

  body
  {
    margin-top: 130px !important;
  }
}

@media only screen and (max-width : 768px)
{
  .navbar-collapse
  {
    background: #a30000; /*rgba(0, 113, 188, 1);*/
  }

  .fsx
  {
    font-size: 8pt;
  }

  .fs0
  {
    font-size: 10pt;
  }

  .fs1
  {
    font-size: 12pt;
  }

  .fs2
  {
    font-size: 14pt;
  }

  .fs3
  {
    font-size: 16pt;
  }

  .fs4
  {
    font-size: 18pt;
  }

  .hBox1
  {
    min-height: 300px;
  }

  .hBox2
  {
    min-height: 250px;
  }

  .hLogoGara
  {
    min-height: 210px;
  }

  .fsPuntiGara
  {
    font-size: 30pt;
  }

  .fsLuogoGara
  {
    font-size: 14pt;
  }

  .imgSizeFase
  {
    width: 32px;
    height: 32px;
  }

  .fixed-top1
  {
    position: fixed !important;
    top: 50px !important;
    right: 0 !important;
    left: 0 !important;
    min-height: 30px;
  }

  .fixed-top2
  {
    position: fixed !important;
    top: 80px !important;
    right: 0 !important;
    left: 0 !important;
  }

  body
  {
    margin-top: 130px !important;
  }
}


@media (max-width: 425px)
{
  .fsx
  {
    font-size: 7pt;
  }

  .fs0
  {
    font-size: 8pt;
  }

  .fs1
  {
    font-size: 10pt;
  }

  .fs2
  {
    font-size: 12pt;
  }

  .fs3
  {
    font-size: 14pt;
  }

  .fs4
  {
    font-size: 16pt;
  }

  .hBox1
  {
    min-height: 250px;
  }

  .hBox2
  {
    min-height: 200px;
  }

  .hLogoGara
  {
    min-height: 160px;
  }

  .fsPuntiGara
  {
    font-size: 20pt;
  }

  .fsLuogoGara
  {
    font-size: 8pt;
  }

  .imgSizeFase
  {
    width: 20px;
    height: 20px;
  }

  .fixed-top1
  {
    position: fixed !important;
    top: 50px !important;
    right: 0 !important;
    left: 0 !important;
    min-height: 60px;
  }

  .fixed-top2
  {
    position: fixed !important;
    top: 110px !important;
    right: 0 !important;
    left: 0 !important;
  }

  body
  {
    margin-top: 160px !important;
  }

}


@media (max-width: 320px)
{

  .logodim
  {
    height: 50px;
    !important; /*24px */
    position: relative;
    vertical-align: middle !important;
  }

  .fsx
  {
    font-size: 6pt;
  }

  .fs0
  {
    font-size: 7pt;
  }

  .fs1
  {
    font-size: 9pt;
  }

  .fs2
  {
    font-size: 11pt;
  }

  .fs3
  {
    font-size: 13pt;
  }

  .fs4
  {
    font-size: 14pt;
  }

  .hBox1
  {
    min-height: 200px;
  }

  .hBox2
  {
    min-height: 160px;
  }

  .hLogoGara
  {
    min-height: 160px;
  }

  .fsPuntiGara
  {
    font-size: 20pt;
  }

  .fsLuogoGara
  {
    font-size: 7pt;
  }

  .imgSizeFase
  {
    width: 20px;
    height: 20px;
  }

  .fixed-top1
  {
    position: fixed !important;
    top: 50px !important;
    right: 0 !important;
    left: 0 !important;
    min-height: 60px;
  }

  .fixed-top2
  {
    position: fixed !important;
    top: 110px !important;
    right: 0 !important;
    left: 0 !important;
  }

  body
  {
    margin-top: 160px !important;
  }
}


/*************** varie ****************/

.bkSfondo
{
  background-repeat: no-repeat;
  background-size:cover;
  background-position: center;
}

.bkSponsor
{
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

.bkBlackTrans
{
  background-color: rgba(0, 0, 0, 0.75);
}

.bkGreenTrans
{
  background-color: rgba(0, 155, 30, 0.75);
}

.bkBlueTrans
{
  background-color: rgba(0, 113, 188, 0.75);
}

.bkGoldTrans
{
  background-color: rgba(223, 225, 0, 0.75);
}

.bkRedTrans
{
  background-color: rgba(150, 3, 3, 0.75);
}

.bkLBred
{
  background-color: #a30000;
}

.bkLBredTrans
{
  background-color: rgba(163, 0, 0, 0.75);
}

.boBottomLBred
{
  border-bottom-color: #A30000;
  border-bottom-width: 3px;
  border-top-width: 0px;
  border-left-width: 0px;
  border-right-width: 0px;
  border-style: solid;
}

.boRightGray
{
  border-right-color: darkgray;
  border-bottom-width: 0px;
  border-top-width: 0px;
  border-left-width: 0px;
  border-right-width: 1px;
  border-style: solid;
}

.mh310
{
  min-height: 310px !important;
}

.mh140
{
  min-height: 140px !important;
}

.mh240
{
  min-height: 240px !important;
}


.mh192
{
  min-height: 192px !important;
}

.mh292
{
  min-height: 292px !important;
}

.mh392
{
  min-height: 392px !important;
}

.lhShort
{
  line-height: 1.2 !important;
}

.lh26
{
  line-height: 26px !important;
}

.lh36
{
  line-height: 36px !important;
}

.boRadU4
{
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}

.boRadD4
{
  border-bottom-left-radius : 4px;
  border-bottom-right-radius : 4px;
}

.boLogoSx
{
  border-top-right-radius: 25px;
  border-bottom-right-radius: 25px;
  border-top-width: 8px;
  border-bottom-width: 8px;
  border-right-width: 8px;
  border-left-width: 0px;
}

.boLogoDx
{
  border-top-left-radius: 25px;
  border-bottom-left-radius: 25px;
  border-top-width: 8px;
  border-bottom-width: 8px;
  border-right-width: 0px;
  border-left-width: 8px;
}

.rt
{
  padding: 5px 20px;
  border-radius: 60px;
  min-height: 200px;
  border: 10px solid white;
}

.bkRtPre
{
  background-color: sandybrown !important;
}

.bkRtImm
{
  background-color: #ffff66 !important;
}

.bkRtDur
{
  background-color: palegreen !important;
}

/* ------------- boxSponsor ----------------*/

.boxSponsor5
{
  width: 100%;
  padding: 5px;
}

.boxSponsor6
{
  width: 100%;
  padding: 10px 5px;
  border-top: 1px solid gainsboro;
}

.boxSponsor9
{
  height: 90px;
/*  width: 100%;
  padding: 10px 5px;
  border-top: 1px solid gainsboro;*/
}

/* ------------- boxPartita ----------------*/

.boxPartita
{
  border-left: 1px solid #b4b4b4;
  border-right: 1px solid #b4b4b4;
}


/* ------------- colori ----------------*/


.colLBred
{
  color: #A30000;
}

/* ------------- link ----------------*/

a.lnkWhiteSQ1:link, a.lnkWhiteSQ1:visited, a.lnkWhiteSQ1:active
{
  color: white !important;
  text-decoration: none !important;
}

a.lnkWhiteSQ1:hover
{
  color: #0071BC !important;
  text-decoration: none !important;
}

a.lnkWhiteSQ2:link, a.lnkWhiteSQ2:visited, a.lnkWhiteSQ2:active
{
  color: white !important;
  text-decoration: none !important;
}

a.lnkWhiteSQ2:hover
{
  color: #1BE6AF !important;
  text-decoration: none !important;
}

a.lnkWhiteSQ3:link, a.lnkWhiteSQ3:visited, a.lnkWhiteSQ3:active
{
  color: #0071BC !important;
  text-decoration: none !important;
}

a.lnkWhiteSQ3:hover
{
  color: #1BE6AF !important;
  text-decoration: none !important;
}

/* ------------- map ----------------*/

#map
{
  height: 100%;
  width: 100%;
}

/* ------------- carousel ----------------*/

.carousel
{
  margin-left: 30px;
  margin-right: 30px;
}

/*
.carousel-inner
{
  height: 100%;
}

.carousel-inner > .item > img
{
  height: 100%;
}*/

@media (max-width: 767px)
{
  .carousel-inner .carousel-item > div
  {
    display: none;
  }

  .carousel-inner .carousel-item > div:first-child
  {
    display: block;
  }
}

.carousel-inner .carousel-item.active,
.carousel-inner .carousel-item-next,
.carousel-inner .carousel-item-prev
{
  display: flex;
  height: 100px;
}

/* medium and up screens */
@media (min-width: 768px)
{

  .carousel-inner .carousel-item-end.active,
  .carousel-inner .carousel-item-next
  {
    transform: translateX(25%);
  }

  .carousel-inner .carousel-item-start.active,
  .carousel-inner .carousel-item-prev
  {
    transform: translateX(-25%);
  }
}

.carousel-inner .carousel-item-end,
.carousel-inner .carousel-item-start
{
  transform: translateX(0);
}


.carousel-item
{
  /*Other properties*/
  transition: none  !important;
}

.carousel-control-prev
{
  justify-content: start !important;
  align-items: center !important;
  width: 2rem !important;
  margin-left: -30px;
}

.carousel-control-next
{
  justify-content: end !important;
  align-items: center !important;
  width: 2rem !important;
  margin-right: -30px;
}

/*.carousel-inner > .carousel-item > img
  {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);*/
/*max-height: 400px;*/
/*width: auto;
  }

.carousel-control.left,
.carousel-control.right
{
  background-image: none;
}*/


.thumbs img
{
  width: 80px;
  height: 60px;
  object-fit: cover;
  cursor: pointer;
  opacity: 0.6;
  border: 2px solid transparent;
  transition: all 0.3s;
  margin-right: 5px;
  display: inline-block;
}

.thumbs-container
{
  overflow-x: auto;
  white-space: nowrap;
  padding: 5px;
  max-width: 100%;
}

.thumbs img.active
{
  opacity: 1;
  border-color: #0d6efd; /* blu bootstrap */
}



#carouselFoto .carousel-inner img
{
  height: 400px !important;
  object-fit: contain; /* così non vengono mai deformate */
  background-color: transparent; /* opzionale: sfondo per "riempire" in caso di bande */
}

#carouselFoto .carousel-inner
{
  height: 400px !important;
}

/* ------------- forme ----------------*/
.rtShp
{
  width: 50% !important;
}

/* ------------- varie ----------------*/

.imgProfilo img
{
  border: 2px solid white;
  border-radius: 4px;
  width: 100%;
}
