/*Time for the CSS*/
.slider{
	width: 100%; /*Same as width of the large image*/
	position: relative;
	/*Instead of height we will use padding*/
	padding-top: 10px; /*That helps bring the labels down*/
	margin: 10px auto;	
	/*Lets add a shadow*/
	/* box-shadow: 5px 0px 20px -5px rgba(0, 0, 0, 0.75);*/
}
/*Last thing remaining is to add transitions*/
.slider > img{
	position: absolute;
	width: 85%;
	left: 50px; top: 0;
	z-index: 100;
	transition: all 0.5s;}

.slider input[name='slide_switch'] {
	display: none;}
.slider label {
	/*Lets add some spacing for the thumbnails*/
	margin: 2px 0 0 5px;
	height: 65px;
	width: 60px;
	display: block;
	/*float: left;*/
	cursor: pointer;
	transition: all 0.5s;
	/*Default style = low opacity*/
	opacity: 1;}

.slider label img{
	display: block;
    opacity: 1;}
/*Time to add the hover effects*/
.slider input[name='slide_switch']:hover+label {
	opacity: 1;
    transform: translateX(-15px);
	box-shadow: -5px 5px 15px -4px rgba(38, 86, 10, 0.6);}
/*Time to add the click effects*/
.slider input[name='slide_switch']:checked+label {
	/*border-top: 1px solid rgba(25, 103, 5, 0.6);
    padding-top: 10px;*/
    transform: translateX(-15px);
	box-shadow: -5px 5px 15px -4px rgba(38, 86, 10, 0.6);}
/*Clicking any thumbnail now should change its opacity(style)*/
/*Time to work on the main images*/
.slider input[name='slide_switch'] ~ img {
	opacity: 0;
	transform: scale(1.1);}

/*That hides all main images at a 110% size
On click the images will be displayed at normal size to complete the effect
*/
.slider input[name='slide_switch']:checked+label+img {
	opacity: 1;
	transform: scale(1);}
.slider input[name='slide_switch']:checked:hover+label+img {
	opacity: 1;
	transform: translateX(30px) scale(1.5);}

/*Clicking on any thumbnail now should activate the image related to it*/
/*We are done :)*/
/**** HEADER ****/
/* SLIDE IMMAGINI HEADER*/
.header{
	width: 100%;}
.sliderheader {
	display: inline-block;
  width:inherit;
  height:inherit;
	margin-top: 1px;
  padding-bottom: 0%;
  overflow:hidden;
  position:absolute;
	z-index: 1;}
@media only screen and (min-width: 320px){
	/*
.sliderheader img{
    position:absolute;
    animation:sliderheader 21s infinite;
    width: 100%;
    height: inherit;}

@keyframes sliderheader {99%{z-index:-1} 1%{z-index:1}} 
.sliderheader img:nth-child(3){animation-delay:0s;}
.sliderheader img:nth-child(2){animation-delay:7s;}
.sliderheader img:nth-child(1){animation-delay:14s;}
*/
	/********INDEX **********/
#img_5, #img_4, #img_3, #img_2, #img_1
{
	position:absolute;
  animation:sliderheader 29s infinite;
  width: 100%;
  height: inherit;
	background-repeat: no-repeat;
	background-size: cover;
	z-index: -1;}

@keyframes sliderheader {99%{z-index:-1} 1%{z-index:1}}
#img_1 {animation-delay:0s; background-image:url(../img/sliderHeader/sliderHeader1.svg);}
#img_2 {animation-delay:5s; background-image: url(../img/sliderHeader/sliderHeader2.svg);}
#img_3 {animation-delay:11s; background-image: url(../img/sliderHeader/sliderHeader3.svg);}
#img_4 {animation-delay:17s; background-image: url(../img/sliderHeader/sliderHeader4.svg);}
#img_5 {animation-delay:23s; background-image: url(../img/sliderHeader/sliderHeader5.svg);}
}
	/********IMP ACQUISTO **********/
#img_3A, #img_2A, #img_1A
{
	position:absolute;
  animation:sliderheader 17s infinite;
  width: 100%;
  height: inherit;
	background-repeat: no-repeat;
	background-size: cover;
	z-index: -1;}

@keyframes sliderheader {99%{z-index:-1} 1%{z-index:1}}
#img_1A {animation-delay:0s; background-image:url(../img/sliderHeader/sliderHeader1.svg);}
#img_2A {animation-delay:5s; background-image: url(../img/sliderHeader/sliderHeader2.svg);}
#img_3A {animation-delay:11s; background-image: url(../img/sliderHeader/sliderHeader3.svg);}
}


/* stili testo*/
/* TESTO SLOGAN */
/* stili comuni txtslider*/
.sliderheader .txtslider{
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	width: 100%;}
.sliderheader .txtslider h1, .sliderheader .txtslider h2{
		margin-bottom: 1%;
		color: #daded6;
		font-weight: 500;
		line-height: 1;}
.sliderheader .txtslider h1 {
	padding-left: 1%;
	text-align: left;}	
.sliderheader .txtslider h2 {
	text-align: right;}
#img_1 h1, #img_1 h2 {
text-shadow: 3px 3px 5px rgb(70, 102, 127)	}
#img_2 h1, #img_2 h2 {
text-shadow: 3px 3px 5px rgb(237, 85, 9)	}
#img_3 h1, #img_3 h2 {
text-shadow: 3px 3px 5px rgb(27, 76, 24) /*rgb(9, 69, 130)	*/}
#img_4 h1, #img_4 h2 {
text-shadow: 3px 3px 5px  rgb(27, 76, 24) /*rgb(3, 123, 163)*/	}
#img_5 h1, #img_5 h2 {
text-shadow: 3px 3px 5px rgb(27, 76, 24)	}


/* ANIMAZIONE TESTO*/
.sliderText{
	z-index: 2;
	position:relative;
    padding-left: 5%;
}
/* Fade del titolo H1 - apparizzione lenta */
.sliderText h1{
	font-weight: 900;
	text-shadow: 5px -2px rgba(0, 0, 0, 0.6);
	text-align: left;
    color: #ffffff;
    opacity:0;
    margin-left: 30px;
    animation:sliderText_h1 42s infinite;
}
@keyframes sliderText_h1
{99%{opacity: 0} 1%{opacity: 1}}
/*{0%{opacity: 1} 10%{opacity: 1} 100%{opacity: 1}}*/

.sliderText h1{animation-delay:0s;}
/* Fade del p (paragrafo) - apparizzione lenta in po' dopo h1*/
.sliderText div{
    
	font-weight: 700;
	text-align: left;
	margin-top: 1%;
    width: 80%;
    padding: 0.5% 2%;
    background: -ms-linear-gradient(90deg, rgba(0, 0, 0, 0.5)10%, rgba(0, 0, 0, 0.2)30%, rgba(0, 0, 0, 0)40%, rgba(0, 0, 0, 0) 100%);
    background: -webkit-linea-gradient(90deg, rgba(0, 0, 0, 0.5)10%, rgba(0, 0, 0, 0.2)30%, rgba(0, 0, 0, 0)40%, rgba(0, 0, 0, 0) 100%);
    background:  -moz- linear-gradient(90deg, rgba(0, 0, 0, 0.5)10%, rgba(0, 0, 0, 0.2)30%, rgba(0, 0, 0, 0)40%, rgba(0, 0, 0, 0) 100%);
    background: -o-linear-gradient(90deg, rgba(0, 0, 0, 0.5)10%, rgba(0, 0, 0, 0.2)30%, rgba(0, 0, 0, 0)40%, rgba(0, 0, 0, 0) 100%);
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.5)10%, rgba(0, 0, 0, 0.2)30%, rgba(0, 0, 0, 0)40%, rgba(0, 0, 0, 0) 100%);
   /* box-shadow: 5px 0px 18px rgba(255, 255, 255, 0.7);*/
    color: rgba(255, 255, 255, 0.9);
}
#p_1, #p_2, #p_3, #p_4, #p_5, #p_6
{
    position: absolute;
    margin-left: 30px;
    opacity: 0;
    z-index: -1;
    animation:sliderText_p 21s infinite; 
}

/*@keyframes sliderText_p {0%, 17.5%, 100%	{ opacity: 0; z-index: 0; }
			5%, 15%{ opacity: 1; z-index: 1; }}*/
@keyframes sliderText_p {95%{opacity: 0; z-index: -1} 99%{opacity: 1; z-index: -1}  1%{opacity: 1; z-index: 1}}

/*@keyframes sliderText_p {0% {opacity:1; color:#ffffff} 50% {opacity:0; color: rgba(0, 0, 0, 0.5);}  100%{opacity:0; color: rgba(0, 0, 0, 0.5);}} */
#p_3 {animation-delay:0s;}
#p_2 {animation-delay:7s;}
#p_1 {animation-delay:14s;}