/* 	global */

    * {
		font-family: 'Montserrat', sans-serif;
		margin: 0;
		padding: 0;
	  }
  
	  /* 	animazioni */
  
  
	  /* animation for header only, includes translation */
	  @keyframes header {
		0% {
		  top: 50vh;
		  opacity: 0;
		}
  
		30% {
		  opacity: 0.3;
		}
  
		100% {
		  top: 10px;
		  opacity: 1;
		}
	  }
  
	  /* this animation is for all content in the page*/
	  @keyframes appear {
		from {
		  opacity: 0;
		}
  
		to {
		  opacity: 1;
		}
	  }
  
  
  
	  /* blocchi */
  
	  section.color {
		background: #9583b6;
		width: 70%;
		padding: 7% 15% 2% 15%;
		color: #fff;
		margin-right: auto;
		margin-left: auto;
	  }
  
	  section.white {
		background: #fff;
		width: 70%;
		padding: 7% 15% 2% 15%;
		color: #000;
		margin-right: auto;
		margin-left: auto;
	  }
  
	  /* triangoli */
  
	  .skew-cc {
		width: 100%;
		height: 40px;
		position: relative;
		left: 0px;
		background: linear-gradient(to right bottom, #9583b6 49%, #fff 50%), linear-gradient(-50deg, #ffffff 16px, #000 0);
	  }
  
	  .skew-c {
		width: 100%;
		height: 40px;
		position: relative;
		left: 0px;
		background: linear-gradient(to left bottom, #fff 49%, #9583b6 50%);
		animation: none;
	  }
  
  
	  /* CSS CUSTOM HEADER E ALTRO*/
  
	  header {
		position: relative;
		border: 0px solid black;
		margin: 10px;
		margin-bottom: 10%;
		animation: header 1s ease 0s 1 normal forwards running;
	  }
  
	  .nome_sito {
		width: 80%;
		margin-right: auto;
		margin-left: auto;
		color: black;
		font-size: 40px;
		font-family: 'La Belle Aurore', normal;
		text-align: center;
		border: 0px solid black;
	  }
  
	  .nome_sito>img {
		max-height: 5%;
		max-width: 80%;
		background-size: cover;
	  }
  
	  nav {
		width: 100%;
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		border: 0px solid black;
		margin-left: auto;
		margin-right: auto;
	  }
  
	  @media (min-width:480px) {
		nav>div {
		  text-align: center;
		  font-size: 48px;
		  font-family: 'La Belle Aurore', normal;
		  border: 0px solid black;
		}
  
		a.a_header {
		  font-family: 'La Belle Aurore', normal;
		  color: #9583b6;
		  font-size: 48px;
		  text-decoration: none;
		  border-bottom: 2px solid rgba(149, 131, 182, 0.2);
		}
  
		a.a_header:hover {
		  font-family: 'La Belle Aurore', normal;
		  font-size: 48px;
		  color: #9583b6;
		  border-bottom: 2px solid rgba(149, 131, 182, 1);
		}
	  }
  
	  @media (max-width:480px) {
		nav>div {
		  text-align: center;
		  font-size: 18px;
		  font-family: 'La Belle Aurore', normal;
		  border: 0px solid black;
		}
  
  
		a.a_header {
		  font-family: 'La Belle Aurore', normal;
		  color: #9583b6;
		  font-size: 18px;
		  text-decoration: none;
		  border-bottom: 2px solid rgba(149, 131, 182, 0.2);
		}
  
		a.a_header:hover {
		  font-family: 'La Belle Aurore', normal;
		  color: #9583b6;
		  font-size: 18px;
		  border-bottom: 2px solid rgba(149, 131, 182, 1);
		}
	  }
  
	  /* css text */
  
	  content {
		animation: appear 2s;
	  }
  
	  p {
		font-family: 'Montserrat', sans-serif;
		font-size: 18px;
		text-align: left;
	  }
  
	  h1 {
		font-family: 'Montserrat', sans-serif;
		font-size: 22px;
		text-align: left;
		padding-bottom: 15px;
	  }
  
	  a {
		color: #9583b6;
		font-family: 'Montserrat', sans-serif;
		text-decoration: none;
		color: #9583b6;
		border-bottom: 2px solid rgba(149, 131, 182, 1);
	  }
  
	  section.color>*>a {
		color: #fff;
		font-family: 'Montserrat', sans-serif;
		text-decoration: none;
		color: #fff;
		border-bottom: 2px solid #ffffff;
	  }
  
	  a:hover {
		background-color: #ccc;
		color: #9583b6;
		border-bottom: 2px solid rgba(149, 131, 182, 1);
	  }
  
	  section.color>*>a:hover {
		background-color: #ccc;
		color: #4b1acf;
		border-bottom: 2px solid #4b1acf;
	  }
  
  
	  /* css grid */
  
	  .container-img {
		background-size: cover;
	  }
  
	  .round-border {
		border-radius: 50px 20px / 10px 40px;
	  }
  
	  .container-img1 {
		grid-area: img1;
		background-size: cover;
		height: 30vh;
	  }
  
	  .container-img2 {
		grid-area: img2;
		background-size: cover;
	  }
  
	  .container-img3 {
		grid-area: img3;
		background-size: cover;
	  }
  
	  .container-img4 {
		grid-area: img4;
		background-size: cover;
	  }
  
	  .container-img5 {
		grid-area: img5;
		background-size: cover;
	  }
  
	  .container-img6 {
		grid-area: img6;
		background-size: cover;
	  }
  
	  .container-img7 {
		grid-area: img7;
		background-size: cover;
	  }
  
	  @media (min-width:480px) {
		.grid-container {
		  display: grid;
		  grid-template-areas:
			'img1 img1 img2 img2 img3'
			'img1 img1 img2 img2 img3'
			'img4 img4 img5 img6 img3'
			'img7 . img5 img6 .'
			'img7 . . . .'
			'. . . . .';
		  grid-gap: 1vw;
		  background-color: #9583b6;
		  padding: 1vw;
		  grid-auto-rows: auto 15vh 15vh 15vh 15vh 18vh;
		  grid-auto-columns: 18.4vw 18.4vw 18.4vw 18.4vw;
		}
	  }
  
	  @media (max-width:480px) {
		.grid-container {
		  display: grid;
		  grid-template-areas:
			'img1 img1 img2 img2'
			'img1 img1 img2 img2'
			'img4 img4 img5 img3'
			'img6 img7 img5 img3'
			'img6 img7 . img3'
			'. . . .'
			'. . . .';
		  grid-gap: 1vw;
		  background-color: #9583b6;
		  padding: 1vw;
		  grid-auto-rows: auto 15vh 15vh 15vh 15vh 18vh 18vh;
		}
	  }
  
	  .grid-container>div {
		background-color: rgba(255, 255, 255, 0.8);
		text-align: center;
		padding: 20px 0;
		font-size: 30px;
	  }
  
  
	  /* footer */
  
	  footer {
		text-align: center;
	  }
  
	  footer img.logo {
		max-width: 15vw;
	  }