html, body{
	font-family: 'Lato', sans-serif;
	margin: 0;
	padding: 0;
	background-color: #FFF;
    color: #585B5D;
}


img{
	max-width:100%;
	display: block;
}

.larghezza-totale{
	float: left;
	width: 100%;
}

.larghezza-1260{
	max-width: 1260px;
	margin: 0 auto;
}

.larghezza-1140{
	max-width: 1140px;
	margin: 0 auto;
	
}

.header-contenitore{
	
}


.header-contenitore .header{
	background-color: #FFF;
	display: grid;
	grid-template-columns: repeat(3 , calc(100% / 3));
}

.header-contenitore .header .logo{}

.header-contenitore .header .logo.logo-ca{
	align-self: start;
	padding: 20px 0 0 20px;
}

.header-contenitore .header .logo.logo-indolore{
	padding: 20px 0 15px;
	text-align: center;
}
.header-contenitore .header .logo.logo-indolore img{
	display: inline-block;
}
.header-contenitore .header .menu-social-contenitore{
	padding: 20px 0 0 25px;
}

.header-contenitore .header .menu-social-contenitore .menu-social{
	display: flex;
}

.header-contenitore .header .menu-social-contenitore .menu-social .social{
	margin-right: 15px;
}

.header-contenitore .header .menu-social-contenitore .menu-social .social a{
	color: #585B5D;
	font-size: 30px;
}



.titolo-contenitore{
    float: left;
    width: 100%;
}

.titolo-contenitore .titolo{
    color: #7B75A6;
    font-size: 100px;
    text-align: center;
    font-style: italic;
    font-weight: 800;
}

.frase-contenitore{
    background-color: #7B75A6;
 
}

.frase-contenitore .frase{
    color: #fff;
    font-size: 40px;
    text-align: center;
    font-style: italic;
    font-weight: 500;
    padding: 15px 0;
}







.introduzione-contenitore{}
.introduzione-contenitore .introduzione{}
.introduzione-contenitore .introduzione p{}

.fascia-immagini-contenitore{}

.fascia-immagini-contenitore .fascia-immagini{
	background-color: #F7941E;
	display: grid;
	grid-template-columns: repeat(3 , calc(100% / 3 - 13.3333333px));
	grid-gap: 20px;
	padding: 20px;
}

.fascia-immagini-contenitore .fascia-immagini .thumb{
	text-align: center;
}
.fascia-immagini-contenitore .fascia-immagini .thumb img {
	display: inline-block;
	width: 100%;
}
.fascia-immagini-contenitore .fascia-immagini .thumb span{
	font-size: 15px;
	color: #FFF;
	display: block;
	font-style: italic;

}



.titolo-video-contenitore{}
.titolo-video-contenitore .titolo-video{
	text-align: center;
}

.titolo-video-contenitore .titolo-video h2{

	color: #231F20;
	display: inline-block;
	padding: 5px 2px;
	font-size: 35px;
	font-family: "Zilla Slab Highlight";
}

.titolo-video-contenitore .titolo-video h2 a{
	color: #231F20;
}


.racconta-storia-contenitore{}
.racconta-storia-contenitore .racconta-storia{
	text-align: center;
}

.racconta-storia-contenitore .titolo-storia h2{
	margin-bottom: 0;
	color: #231F20;
	display: inline-block;
	padding: 5px 2px;
	font-size: 35px;
	font-family: "Zilla Slab Highlight";
}

.racconta-storia-contenitore .titolo-storia h2 a{
	color: #231F20;
}


.racconta-storia-contenitore .scheda-storia{}

.racconta-storia-contenitore .scheda-storia input{
	display: block;
	margin-bottom: 10px;
	max-width: 280px;
	padding: 8px 10px;
	width: calc(100% - 20px);
	border: 1px solid #ebebeb;
}

.racconta-storia-contenitore .scheda-storia textarea{
	display: block;
	max-width: 280px;
	margin-bottom: 10px;
	padding: 8px 10px;
	width: calc(100% - 20px);
	border: 1px solid #ebebeb;
	min-height: 150px;
}

.racconta-storia-contenitore .scheda-storia input.chk{
	display: inline-block;
	width: auto;
}

.racconta-storia-contenitore .scheda-storia label{
	font-size: 14px;
}

.racconta-storia-contenitore .scheda-storia .btn{
	background-color: #F7941E;
	color: #FFF;
	font-weight: 600;
}




.frase-arancione-contenitore{
    background: linear-gradient(180deg, #FFF 0, #FFF 15px, #F7941E 15px, #F7941E 61px, #FFF 61px,  #FFF 76px);
    color: #FFF;
}


.frase-arancione-contenitore .frase-arancione{
    font-style: italic;
    font-weight: 800;
    font-size: 30px;
    padding: 0;
    padding-left: 15px;
    line-height: 72px;
}


.frase-arancione-contenitore .frase-arancione a{}



.frase-arancione-contenitore .frase-arancione img{
     color: #FFF;
    background-color: #FFF;
    padding: 8px;
    width: 60px;
    vertical-align: middle;
    display: inline-block;
    cursor: pointer;
}











.storie-contenitore{
    margin-bottom: 30px
}

.storie-contenitore .storie{}

.storie-contenitore .storie h2{
	font-size: 70px;
	padding: 5px 2px;
	display: inline-block;
	margin-bottom: 10px;
    color: #7B75A6;
    font-style: italic;
}


.storie-contenitore .storie .singola-storia{
	margin: 25px 0 0px;
	position: relative;
    float: left;
    width: 100%;
}

.storie-contenitore .storie .singola-storia a{
    color: #F7941E;
}
.storie-contenitore .storie .singola-storia .titolo{
    font-size: 22px;
    font-weight: 700;
    font-style: italic;
    cursor: pointer;
}

.storie-contenitore .storie .singola-storia .titolo i{
    margin-right: 5px;
    font-size: 22px;
    color: #F7941E;
}


.storie-contenitore .storie .singola-storia .testo{
    text-align: justify;
    margin-top: 5px;
    display: none;
}


.storie-contenitore .storie .singola-storia .testo img{
max-width: 250px;
float: left;
margin: 5px 10px 0 0;
border: 4px solid #7B75A6;
box-sizing: border-box;

}

.footer-contenitore{
    margin-top: 100px;
}

.footer-contenitore .footer{
    display: grid;
    grid-template-columns: 50% 50%;
}


.footer-contenitore .footer> div{
    font-size: 14px;
    align-self: end;
}

.footer-contenitore .footer img{
    display: inline-block;
    margin-left: 5px
}


.striscia-viola-contenitore{
    background-color: #7B75A6;
    height: 100px;
    margin-top: 100px;
    display: none;
}

.striscia-grigia-contenitore{
    background-color: #585B5D;
    color: #FFF;
    text-align: center;
    padding: 15px 0;
    margin-top: 100px;
    
}

@media screen and (max-width: 1259px) {
	.larghezza-1140 {
		padding: 10px 5px;
	}
}


@media screen and (max-width: 959px) {
	

	.header-contenitore .header {
		grid-template-columns: 100%;
	}

	.header-contenitore .header .logo {
		text-align: center;
		padding: 5px 0 !important;
		margin: 0 !;
	}

	.header-contenitore .header .logo img {
		display: inline-block;
	}

	.header-contenitore .header .logo.logo-ca img{

	}

	.header-contenitore .header .logo.logo-indolore img{
		max-width: 200px;
	}


	.header-contenitore .header .social {
		text-align: center;
	}

	.header-contenitore .header .menu-social-contenitore {
		padding: 0;
	}

	.header-contenitore .header .menu-social-contenitore .menu-social {
		display: block;
		text-align: center;
	}

	.header-contenitore .header .menu-social-contenitore .menu-social .social{
		text-align: center;
		display: inline-block;
		margin: 0 10px;
	}


    .footer-contenitore .footer{
        grid-template-columns: 100%;
        text-align: center;
    }
    
    .footer-contenitore .footer > div{
        margin-bottom: 15px;
    }
    
    
    .footer-contenitore .footer span,.footer-contenitore .footer img{
        display: block;
        margin: 0 auto;
        
    }
    
    
    
    
}
@media screen and (max-width: 767px) {
    .titolo-contenitore .titolo{
        font-size: 75px;
    }	
    .frase-arancione-contenitore .frase-arancione{
        font-size: 25px;
    }
    
}


@media screen and (max-width: 639px) {
    .titolo-contenitore .titolo{
        font-size: 60px;
    }	
    .frase-contenitore .frase{
        font-size: 30px;
    }
    .frase-arancione-contenitore .frase-arancione{
        font-size: 18px;
    }
    .storie-contenitore .storie .singola-storia .testo img{
        max-width: 100%;
        float: none;
        margin: 0;
    }
}

@media screen and (max-width: 479px) {
    .titolo-contenitore .titolo{
        font-size: 35px;
    }	
    .frase-contenitore .frase{
        font-size: 22px;
        
    }
    
    .frase-arancione-contenitore{
        background: none;
        background-color: #F7941E;
        text-align: center
    }
    
    .frase-arancione-contenitore .frase-arancione img{
        display: block;
        margin: 10px auto 0;
        
    }
    
    .frase-arancione-contenitore .frase-arancione{
        font-size: 15px;
        padding-left: 5px;
    }

}