*{box-sizing: border-box; padding: 0%; top: 0; margin: 0%;font-family: "Karma", sans-serif;}
/*body {background-color:#f5f5f5; font-family: 'Heebo', sans-serif;}*/


/* FINE SIDEBAR LEFT*/


/* ARTICLE DESK*/
/*SCHEDE CON TESTO SOTTO*/
.title-home {
text-align: center;
}
#title-home-h1{
font-size: 30px; 
color: rgb(31, 31, 107); 
margin-top: 55px; 
text-align: center; 
}
#title-home-p{
font-size: 20px; 
text-align: center; }
.article-h3{color: rgb(31, 31, 107);
}
/* Column container */
#cards-1{
width: 550px;height: 450px; 
margin-bottom: 50px;
margin-left: 50px;
} /*DIMENSIONE SCHEDA DA ADATTARE CON RIGA SOTT 77*/
#cards{
width: 300px;
height: 350px;
} /*DIMENSIONE SCHEDA DA ADATTARE CON RIGA SOTT 77*/
#cards-2{
width: 300px;
height: 350px; 
margin-top: 40px;
} /*DIMENSIONE SCHEDA DA ADATTARE CON RIGA SOTT 77*/
.img-cards{
border-radius: 5px; 
box-shadow: 1px 1px 5px 1px #25384d;
width: 300px; 
height: 200px; 
} 
.img-cards:hover{
transform: scale(1.02);
box-shadow: 3px 3px 6px 3px #313d4b;
transition: all 0.3s ease; 
}

.img-cards-004{
margin-top: 20px;
border-radius: 5px; 
box-shadow: 1px 1px 5px 1px #25384d;
width: 300px; 
height: 200px; 
}
#img-cards-1{
width: 100%; 
height: auto; 
margin-left: 8px;
}            /*DIMENSIONE IMMAGINE DA ADATTARE CON RIGA SOPRA 74*/
.div-cards-hover p{
text-align: center; 
font-size: 15px; 
color: rgb(53, 53, 70);
font-family: "Karma", sans-serif; 
margin-bottom: 5px;
}
iframe{
width: 280px; 
height: 180px; 
border-radius: 5px;
} 
.slide-h2{
text-align: center; 
font-size: 20px;
}
.img-cards:hover{ 
transform: scale(1.01); 
cursor: pointer;
}

hr{
margin-top: 0px;
width: 100%;
}
.div-cards-hover{
display: none;
}
@keyframes fadeInAnimation {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
.div-cards:hover .div-cards-hover{
display: block;
animation: fadeInAnimation ease 2s;
animation-iteration-count: 1;
animation-fill-mode: forwards; 
}

#sidebar-1400{
display: none;
}
/* Responsive layout - when the screen is less than 700px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 1400px) {
#sidebar{
display: none;
}

#sidebar-1400{
display: block;
}
.sidebar-1400 {
background-image: url(../images/sidebar1.jpg); 
background-size: cover;
border-radius: 5px;
border: solid 1px gray;
width: 200px;
height: auto;
margin-top: 35PX;
flex: 1;
background-color: #f1f0f0;
padding: 20px;
text-decoration: none;
margin-left: 20px;
}
.sidebar-1400 {
margin-left: 75px;
text-align: left;
}
#sidebar-a {
margin-left: 30px;
}
.sidebar-1400 li{
text-align: left;
list-style: none;
color: red; font-weight: bold;
margin-bottom: -10px;
margin-right: 20px;
}
}


/* Responsive layout - when the screen is less than 700px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 790px) {
#w3-center{margin-left: -19px;}
#w3-center h3{margin-left: 15px;}
#w3-center p{margin-left: 15px;}
.title-home{text-align: center; }
#title-home-h1{font-size: 25px;color: rgb(31, 31, 107); margin-top: 65px; text-align: center; }
#title-home-p{ font-size: 13px; margin-bottom: 20px; margin-left: 20px; margin-right: 10px; }
.img-cards{ width: 320px; height: 250px; }
.main-device div{display: block;}
.main-device p{font-size: 10px; text-align: center;}
#cards{width: 300px;height: 400px; justify-content: center;}
}

/*SIDEBAR*/
.container {
display: flex;            
width: 100%;
padding: 20px;
}
.flex-sidebar {
margin-top: 30px;
}
#sidebar-a{
text-decoration: none;
color: red; font-weight: bold;
margin-bottom: 30px;
margin-right: 20px;
}

#ico-calendar{
width: 30px;height: 30px;
}
.ico-calendar {
white-space: nowrap;
overflow: hidden;
box-sizing: border-box;
width: 100%;
}

.ico-calendar img{
margin-left: 30px;
  display: inline-block;
  animation: scroll 2s linear infinite;
}

@keyframes scroll {
  0% {
    transform: translateX(-100%) scale(1);

  }
    30% {
    transform: translateX(-10%) scale(1.1) ;

  }
  50% {
    transform: translateX(30%) scale(1) ;

  }
  100% {
    transform: translateX(100%) scale(0.5) ;

  }

    }
.article {
    flex: 2;
    margin-right: 20px;
}

.sidebar {
background-image: url(../images/sidebar1.jpg); 
background-size: cover;
border-radius: 5px;
border: solid 1px gray;
width: 200px;
margin-top: 35PX;
flex: 1;
background-color: #f1f0f0;
padding: 20px;
height: 60vh;
text-decoration: none;
margin-left: 20px;
}
.sidebar a{
    text-decoration: none;
    color: rgb(35, 35, 102);
    text-decoration: underline;


}
.sidebar-hr{
    padding-bottom: 3px;

}

#sidebar {

    width: 250px;
}

.article h1 {
    font-size: 24px;
    margin-bottom: 10px;
}

.article p {
    font-size: 16px;
    line-height: 1.6;
}

.sidebar h2 {
    font-size: 20px;
}

.sidebar ul {
    list-style-type: none;
    padding: 0;
}

.sidebar ul li {
    margin: 10px 0;
    font-size: 20px; color: rgb(19, 19, 100);
    text-shadow: 0.2px  0.2px 0.2px rgb(196, 231, 125), -0.2px -0.2px 0.2px yellowgreen;

}

#mese-evento{ /*  MODIFICA IL TESTO MESEr*/
color: rgb(31, 31, 107);
font-weight: bold;
margin-bottom: 30px;
margin-right: 20px;
}

@-webkit-keyframes flashing /*  text calendar*/
{
0% { opacity: 0.1; color: white}
40% { opacity: 1.0; color: red}
70% { opacity: 1.0; color: red}
100% { opacity: 0.3; color: white}
}
.flashing{font-size: 18px; font-weight: bold;text-shadow: -0.2px  0.2px 0.2px rgb(19, 19, 100), -0.2px -0.2px 0.2px rgb(19, 19, 100);

-webkit-animation-name: flashing;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: cubic-bezier(.5, 0, 1, 1);
-webkit-animation-duration: 1.7s;
} 

@media  (max-width: 1400px){

#ico-calendar{
width: 20px;height: 20px;
}

.container {
           
width: 100%;
padding: 20px;
}

.sidebar {

width: 70%;
height: 80vh;
margin-left: 20px;

}
.sidebar a{
font-size: 12px;

}
}

@media  (max-width: 798px){
.container {
display: block;            
width: 100%;
padding: 20px;
}

.sidebar {

width: 70%;
margin: auto;

}
.sidebar a{
font-size: 15px;

}




}

/*CALENDARIO NON IN USO*/

input[type="date"] {
margin-top: 50px;
background-color: lightgray;
  cursor: pointer;  
  padding: 10px;
  font-size: 16px;
  border: 2px solid #ccc;
  border-radius: 4px;
  background-color: #f9f9f9;
}

input[type="date"]:focus {
  border-color: #007BFF;
  outline: none;
}


/*SLIDE LATERALE SX SPONSOR*/

/*DA QUI C'E' TUTTA LA PARTE RELATIVA ALLA SIDE BAR SX DELLA HOME*/
.testo_sponsor{
text-decoration: none;


}
.w3-main{
display:-webkit-flex;
display:-moz-flex;
display:-ms-flex;
display:flex;
-webkit-flex-direction:row;
flex-direction:row;
-webkit-justify-content:center;
justify-content:center;
justify-items: center;
}

.flex-sidebar{
max-width: 200px;
height: auto;

}

.img-side-left{
width: 200px;
height: auto;
border-radius: 5px;
box-shadow: 2px 2px 5px 2px #25384d;

}

.p-side-left-1{
margin-bottom: 0px;
text-align: center;
font-size: 20px; 
font-weight: bold;
text-shadow: -0.2px  0.2px 0.2px rgb(19, 19, 100), -0.2px -0.2px 0.2px rgb(19, 19, 100);
animation: p-side-left-1 1.7s linear infinite;
}

@keyframes p-side-left-1 {
0% { opacity: 0.3; color: white}
50% { opacity: 1.0; color: yellowgreen}
100% { opacity: 0.3; color: white}
}

@keyframes hover {
0% { opacity: 0.3; color: white}
50% { opacity: 1.0; color: red}
100% { opacity: 0.3; color: white}
}



.p-side-left-3{
margin-top: 30px;
text-align: center;
font-size: 20px; 
font-weight: bold;
text-shadow: -0.2px  0.2px 0.2px rgb(19, 19, 100), -0.2px -0.2px 0.2px rgb(19, 19, 100);
animation: p-side-left-3 1s linear infinite;
}

@keyframes p-side-left-3 {
0% { opacity: 0.3; color: white}
50% { opacity: 1.0; color: yellowgreen}
100% { opacity: 0.3; color: white}
}

/*SIDE LEFT VIDEO YOUTUBE SLWIPE*/

.p-video-youtube-home{
text-align: center;
font-size: 20px; 
font-weight: bold;
text-shadow: -0.2px  0.2px 0.2px rgb(19, 19, 100), -0.2px -0.2px 0.2px rgb(19, 19, 100);
animation: p-video-youtube-home 0s linear infinite;
color: yellowgreen
}

@keyframes p-video-youtube-home {
0% { opacity: 0.3; color: white}
50% { opacity: 1.0; color: yellowgreen}
100% { opacity: 0.3; color: white}
}

/*SLIDE LATERALE SX CIBO IN HOME RIGA 163*/

/* Fading animation */
.fade {
  animation-name: fade;
  animation-duration: 2s;
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}





#container000{

display: block; 
margin: auto;   
width: 200px;
}

.img-slidetime {
    width: 200px;
    height: 150px;
    border-radius: 5px;
    box-shadow: 2px 2px 5px 2px #25384d;
    /* Aggiungi questa riga */
    transition: all 0.3s ease; 
}

.img-slidetime:hover {
    transform: scale(1.02);
    box-shadow: 3px 3px 6px 3px #313d4b;
}



.text p{
font-size: 15px; 
width: 200px;
color: rgb(102, 143, 21); 
text-align: center; 
margin-bottom: 0px;
}
/*FINE SLIDE LATERALE SX CIBO IN HOME RIGA 163*/


/*SLIDE LATERALE SX CIBO IN HOME RIGA 215*/
.p-side-left-2{
line-height: 20px;
margin-top: 30px;
text-align: center;
font-size: 20px; 
font-weight: bold;
text-shadow: -0.2px  0.2px 0.2px rgb(19, 19, 100), -0.2px -0.2px 0.2px rgb(19, 19, 100);
animation: p-side-left-2 1s linear infinite;
margin-bottom: -2px;
margin-top: 30px;
}

@keyframes p-side-left-2 {
0% { opacity: 0.3; color: white}
50% { opacity: 1.0; color: yellowgreen}
100% { opacity: 0.3; color: white}
}
.mySlides000 img {
width: 100%;
height: 150px;
border-radius: 5px;
box-shadow: 2px 2px 5px 2px #25384d;
}

.slide-container001 {
width: 100%; /*QUESTO MODFICA DIMENSIONE*/
max-width: 600px;
margin: 0 auto;
position: relative;

}
.slide001 {
display: none;
}
.slide001 img {
width: 100%;
height: auto;
border-radius: 5px;
box-shadow: 2px 2px 5px 2px #25384d;
}

/*FINE SLIDE LATERALE SX CIBO IN HOME RIGA 240*/


/*SLIDE LATERALE SX PERCORSI IN HOME RIGA 245*/
.p-side-left-3{
margin-top: 30px;
text-align: center;
font-size: 20px; 
font-weight: bold;
text-shadow: -0.2px  0.2px 0.2px rgb(19, 19, 100), -0.2px -0.2px 0.2px rgb(19, 19, 100);
animation: p-side-left-3 1s linear infinite;
margin-bottom: -2px;
}

@keyframes p-side-left-3 {
0% { opacity: 0.3; color: white}
50% { opacity: 1.0; color: red}
100% { opacity: 0.3; color: white}
}

.slide-container002 {
width: 100%; /*QUESTO MODFICA DIMENSIONE*/
max-width: 600px;
margin: 0 auto;
position: relative;

}
.slide002 {
    display: none;
}
.slide002 img {
width: 100%;
height: 150px;
border-radius: 5px;
box-shadow: 2px 2px 5px 2px #25384d;
}

/*FINE SLIDE LATERALE SX CIBO IN HOME RIGA 240*/

/*FINE SLIDE 03 LATERALE SX ITINERARI 240*/

.p-side-left-009{
line-height: 20px;
padding-bottom: 8px;
text-align: center;
font-size: 20px; 
font-weight: bold;
text-shadow: -0.2px  0.2px 0.2px rgb(19, 19, 100), -0.2px -0.2px 0.2px rgb(19, 19, 100);
animation: p-side-left-009 2s linear infinite;
}

@keyframes p-side-left-009 {
0% { opacity: 1.0; color: red}
50% { opacity: 1.0; color: red}
100% { opacity: 1.0; color: red}
}

.p-side-left-003{
line-height: 20px;
margin-top: 30px;
text-align: center;
font-size: 20px; 
font-weight: bold;
text-shadow: -0.2px  0.2px 0.2px rgb(19, 19, 100), -0.2px -0.2px 0.2px rgb(19, 19, 100);
animation: p-side-left-003 1s linear infinite;
margin-bottom: -2px;
margin-top: 30px;
}

@keyframes p-side-left-003 {
0% { opacity: 0.3; color: white}
50% { opacity: 1.0; color: red}
100% { opacity: 0.3; color: white}
}


.fade {
  animation-name: fade;
  animation-duration: 2s;
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}
.text {/* SLIDE 03 ITINERARI */
font-size: 15px; 
width: 200px;
color: rgb(102, 143, 21); 
text-align: center; 
margin-top: 5px;
margin-bottom: 10px;
} 


/*FINE SLIDE 03 LATERALE SX ITINERARI */

/*FINE SLIDE 04 LATERALE SX ITINERARI */



.p-side-left-004{
line-height: 20px;
margin-top: 30px;
text-align: center;
font-size: 20px; 
font-weight: bold;
text-shadow: -0.2px  0.2px 0.2px rgb(19, 19, 100), -0.2px -0.2px 0.2px rgb(19, 19, 100);
animation: p-side-left-004 1s linear infinite;
margin-bottom: -2px;
margin-top: 30px;
}

@keyframes p-side-left-004 {
0% { opacity: 0.3; color: white}
50% { opacity: 1.0; color: yellowgreen}
100% { opacity: 0.3; color: white}
}

.slide-container004 {
width: 100%; /*QUESTO MODFICA DIMENSIONE*/
max-width: 600px;
margin: 0 auto;
position: relative;

}
.slide004 {
    display: none;
}
.slide0041 img {
width: 100%;
height: auto;
border-radius: 5px;
box-shadow: 2px 2px 5px 2px #25384d;
}

/*FINE SLIDE 03 LATERALE SX ITINERARI */


iframe{
width: 400px;
/*height: 100%; MODIFICATA IO */
height: 300px; /*MODIFICA QUESTO UGUALE A swiper-slide img PER TENERE DENTRO PALLINI*/
box-shadow: 1px 1px 5px 1px #25384d;
}
swiper-container {
width: 400px;
/*height: 100%; MODIFICATA IO */
height: 300px;
}
swiper-slide {
font-size: 18px;
text-align: center;
background: #fff;
display: flex;
justify-content: center;
align-items: center;
}

.swiper-slide{
text-align: center;
color: yellowgreen;
}

swiper-container {
margin-left: auto;
margin-right: auto;
}