.sliderContainer{
  overflow: hidden;
  box-shadow: 0 0 9px #646464;
  top: 300px;
margin-bottom: 20px;
  border-radius: 10px;
  position: relative;
  margin: auto;
  width: auto;
  max-width: 800px;
  display: block;
  z-index: 1;
  height: auto;
  background-color: white;
}


.dataArt{

	top: 0px;
	left: 0px;
	line-height: 50px;
	text-align: center;
	position: absolute;
	width: auto;
	padding-left: 15px;
	padding-right: 15px;
	height: 100%;
}

.autoreArt{
	top: -5px;
	font-family: 'Nunito', serif;
	padding-left: 15px;
	padding-right: 15px;
	line-height: 50px;
	right: -5px;
	text-align: center;
	background-color: #b71705;
	color: white;
	border-radius: 10px;
	position: absolute;
	width: auto;
	height: 100%;
}

.mySlides {
  display:grid;
  font-family: 'Lora', serif;
  position: relative;
  background-color: white;
  height: 300px;
  margin-top: 20px;
  border-radius: 10px;
  grid-template-columns: 50% 49%;
  grid-column-gap: 20px;
  padding: 40px;
  padding-bottom: 60px;
  grid-template-rows: 320px ;
}

.barraTop{
	width: 100%;
	font-family: 'Lora', serif;
	height: 38px;
	position: absolute;
	z-index: 1;
	top: 0px;
	left: 0px;
	display: inline-block;
}





.mySlides img{
  display: block;
  margin:auto;
  position: relative;
  vertical-align: middle;


  max-width: 85%;
  border-radius: 10px;
  box-shadow: 0 0 2px 0px black;
  max-height: 100%;

}

.indiceSlider{
  width: 80px;
  position: absolute;
  top:-5px;
  padding-bottom: 5px;
  color: white;
  background-color: #b71705;
  margin: auto;
  height: 38px;
  line-height: 48px;
  border-radius: 5px;
  font-family: 'Nunito', sans-serif;
  font-size: 110%;
  display: grid;
  z-index: 2;
  text-align: center;
  grid-template-columns: 48% 4% 48%;
}






.leftButton{
  background-color: #b71705;
  position: absolute;
  top: 45%;
  left: -25px;
  z-index: 2;
  width: 40px;
  height: 40px;

  border-radius: 15px;
  padding:auto;


  float: right;
  padding-left: 20px;
}

.rightButton {
  right: -25px;
  background-color: #b71705;
  position: absolute;
  top: 45%;
  z-index: 2;
  width: 40px;
  height: 40px;
  border-radius: 15px;
  padding:auto;

  line-height: 30px;
  display: block;
  float: left;
  padding-right: 20px;


}

.slideButton{
  cursor: pointer;
}

.descrizioneSlider{

    font-family: 'Muli', serif;
    text-align: center;
    word-wrap:break-word;


}





.leftButton img, .rightButton img{
  margin: auto;
  margin-top: 8px;

  position: relative;
  height: 24px;


  display: block;
}

.puntoSlider{
  width: 35px;
  height: 4px;
  margin-left: 20px;
  border-radius: 4px;
  background-color: white;
  border: 0.5px solid #c3c3c3;
  z-index: 2;
  display: inline-block;
  cursor: pointer;
  margin-top: 8px;
}

.backPunto{
  width: 35px;
  height: 4px;
  border-radius: 4px;
  background-color: blue;
  z-index: 2;
}


.barraBottom{
  position: absolute;
  bottom: 0px;
  height: 30px;
  width: 100%;


  text-align: center;
  z-index: 1;
}

.titoloSlide{
    font-weight: bold;
    position: relative;
    display: block;
    height: auto;
    min-height: 30px;
    width: 90%;
    font-size: 1.8em;
    font-family: 'Lora', serif;
    text-align: center;
    padding: 20px;
    padding-top: 0px;
    cursor: pointer;
    word-wrap:break-word;

}
.titoloSlide:hover{
	text-decoration: underline;

}

a{
	text-decoration: none;
	color: black;
}

.slideArticolo{
	width: 100%;
	height: 400px;
	top: 0px;
	display: none;
	position: static;
	cursor: pointer;
}




@media screen and (max-width: 650px) {
 .sliderContainer{
	 top: 250px;
   height: auto;
 }
 .slideArticolo{
 	height: 420px;

 }

 .mySlides {
   padding: 20px;
   grid-template-columns: 100%;
   grid-template-rows: 180px 180px;
   grid-template-areas:
  'header'
  'main';
 }
 .mySlides img{
   grid-area: header;
   max-width: 100%;
   max-height: 100%;
   width: auto;

 }
 .titoloSlide{
          width: 100%;
     font-size: 1.3em;
		margin-bottom: 0;
	 padding-bottom: 10px;

 }
	.descrizioneSlider{

    margin: 0;
	padding-bottom: 5px;


}


}