body, html {
  height: 100%;
  padding:0;
  margin:0;
	background-color:#d24558;
  font-family: "Manrope", sans-serif;
  font-optical-sizing: auto;
  font-weight: 200;
  font-size: 18px;
  line-height:30px;
  font-style: normal;
  color: #ffffff;
	text-align:center;
}

strong {
  font-weight: 600;
}

a {transition: all .2s ease-in-out; }
a,
a:hover,
a:active,
a:visited {
  color: #ffffff;
  text-decoration:none;
  outline:0;  
}
a:hover {font-weight: 600; }  

.contenitore {  
  height: 100%;
	max-width:960px;
	margin:0 auto;
	padding:0 20px;
  position: relative;
	text-align:center;
}

.logo { 
	height:60%; 
	min-height:300px; 
	display: flex;
  align-items: center;
  justify-content: center;
	
}
@media only screen and (max-width: 560px) {
  .logo { height:45%; }
}	
	
.logo img { 
	width:550px;
	max-width:100%;
	height:auto;
}

.content { 
	height:30%; 
	min-height:200px;	
}
@media only screen and (max-width: 560px) {
  .content { height:45%; min-height:350px; }
}	
	
.grid-3 .col { 
	width:33.33%; 
	float:left;
	text-align:center;
}
.grid-3 .col p { 
	text-align:left; 
	display:inline-block; 
	width:auto;
	margin:0 auto;
}

@media only screen and (max-width: 560px) {	
	.grid-3 .col { 
		width:100%; 
		float:none;	
		margin-bottom:50px;
	}
	.grid-3 .col p {
		text-align:center; 
	}
} 

.social img { 
	width:32px; 
	height:32px;
	margin:0 10px 10px 10px;
	transition: all .2s ease-in-out; 
}
.social a:hover img { 
	transform: scale(1.3);
}

.bottom {
  clear:both;
	height:10%;
	min-height:60px;  
  text-align: center;
}


.fade-in { animation: fadeIn 1s; }

@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}