/* CSS Document */

.introHome
{
	display: -webkit-box;   /* OLD - iOS 6-, Safari 3.1-6, BB7 */
  display: -ms-flexbox;  /* TWEENER - IE 10 */
  display: -webkit-flex; /* NEW - Safari 6.1+. iOS 7.1+, BB10 */
  display: flex; 
	background-color: #cc0f14;
	color:white;
	width: 100%;
	padding-right: 10%;
	box-sizing: border-box;
}
.introHome .logo
{
	width: 35%;
	background-image: url(../images/logo-intro-home.AVIF);
	background-size: contain;
	background-position: center bottom;
}
.introHome .descrizione
{
	width: 100%;
	padding-left:1%;
}
.introHome .descrizione .title
{
	font-size: 21px;
	font-family:'Verdana'; 
    text-transform: regular;
	margin-top:9px;
}
.introHome .descrizione .testo
{
    font-size:21px;
	margin-top:15px;
}

.serviziHome { width: 100%; clear: both; }
.serviziHome .allenamento, .serviziHome .riabilitazione
{
	height: 300px;
	width: 100%;
	padding:0 10%;
}
.serviziHome .foto{ text-align: center; }
.serviziHome .contenuto{ position:relative; }
.serviziHome .contenuto .logo{ position:absolute; background-image: url(../images/icona-servizi.AVIF); background-size:contain;}
.serviziHome .contenuto .title{ position:absolute; }
.serviziHome .contenuto .button{ position:absolute; }
.serviziHome .foto img{ max-height: 80%; margin-top:6%; max-width: 80%; border-radius: 5%; box-shadow: 2px 2px 5px #AAA}
.serviziHome .allenamento .foto{ float:right;} 
.serviziHome .riabilitazione { background-color:#f7f1f1}
.serviziHome .riabilitazione .contenuto{ float:right;}

.serviziHome .title
{
	font-family:'Verdana'; color:#cc0f14;
}

.serviziHome .riabilitazione .foto{ float:left;}



@media screen and (max-width: 768px)
{	
	.introHome{ padding:10px; height: auto !important; padding-bottom:35px; }
	.introHome .logo{ display: none; }
	.introHome .descrizione{ width:100% !important; text-align: center; }
	.introHome .descrizione .title{ font-size:18px !important; width:100%; margin-top:25px !important }
	.introHome .descrizione .testo{ font-size:17px !important; width:100%; }
	
	.serviziHome .allenamento, .serviziHome .riabilitazione
	{
		height: 150px;
		clear: both;
		padding:0 5%;
		
	}
	.serviziHome .foto{ width:30%; height: 100px; margin-top:30px; float:right; }
	.serviziHome .contenuto{ width:70%; height: 150px; }
	.serviziHome .contenuto .logo{  width: 50px; height:70px;  left: 0; top:40px; background-size: contain;}
	.serviziHome .contenuto .title{  left: 0; margin-left: 60px; top:42px; font-size:15px;}
	.serviziHome .contenuto .button{ text-align: center; margin-left:60px; top:70px; padding:5px 10px; width: 160px; font-size:14px;}
	.serviziHome .riabilitazione .foto{ float:right;}
}
@media screen and (min-width:769px) and (max-width:1024px)
{
	.introHome{ padding:10px; padding-bottom:24px; height: 180px }
	.introHome .logo{ height: 170px; margin-bottom:-35px; padding:0;}
	.introHome .descrizione .title{ font-size:18px !important; width:100%; margin-top:15px !important }
	.introHome .descrizione .testo{ font-size:16px !important; width:100%; }
	
	.serviziHome .allenamento, .serviziHome .riabilitazione
	{
		height: 210px;		
	}
	.serviziHome .foto{ width:30%; margin-top:25px; float:right; }
	.serviziHome .contenuto{ width:70%; height: 120px; }
	.serviziHome .contenuto .logo{  width: 80px; height:120px;  left: 0; top:60px; background-size: contain;}
	.serviziHome .contenuto .title{  left: 0; margin-left: 120px; top:80px; font-size:17px;}
	.serviziHome .contenuto .button{ text-align: center; margin-left:120px; top:100px; padding:5px 10px; width: 160px; font-size:16px;}	
	.serviziHome .riabilitazione .foto{ float:right;}
}

@media screen and (min-width:1025px) and (max-width:1200px)
	
{
	.introHome{ padding:10px; padding-bottom:24px; height: 180px }
	.introHome .logo{ height: 170px; margin-bottom:-35px; padding:0;}
	.introHome .descrizione .title{ font-size:18px !important; width:100%; margin-top:20px !important }
	.introHome .descrizione .testo{ font-size:17px !important; width:100%; }
	
	.serviziHome .contenuto .title{ font-size:16px; }
}

@media screen and (min-width:1201px) and (max-width:1450px)
{
	.serviziHome .contenuto .title{ font-size:18px; }
}

@media screen and (min-width:1025px) and (max-width:1450px)
{
	
	.serviziHome { width: 100%; }
	.serviziHome .allenamento, .serviziHome .riabilitazione
	{
		height: 250px;
		width: 100%;
		clear: both;
		padding:0 10%;
	}

	.serviziHome .foto{ width:40%; height: 250px; text-align: center;}
	.serviziHome .contenuto{ width:60%; height: 300px; position:relative; }
	.serviziHome .contenuto .logo{ position:absolute; width: 70px; height:90px;  left: 25%; top:30%; background-image: url(../images/icona-servizi.AVIF); background-size:contain;}
	.serviziHome .contenuto .title{ position:absolute; left: 25%; margin-left: 100px; top:16%;}
	.serviziHome .contenuto .button{ position:absolute; left: 25%; margin-left: 100px; top:40%; padding:5px 20px;}
	.serviziHome .foto img{ max-height: 80%; margin-top:6%; max-width: 80%; border-radius: 5%; box-shadow: 2px 2px 5px #AAA}
	.serviziHome .allenamento .foto{ float:right;} 
	.serviziHome .riabilitazione { background-color:#f7f1f1}
	.serviziHome .riabilitazione .foto{ float:left;}
	.serviziHome .riabilitazione .contenuto{ float:right;}
	.serviziHome .title
	{
		margin-top: 50px; font-family:'Verdana'; color:#cc0f14;
	}
}
@media screen and (min-width:1451px)
{
	.serviziHome { width: 100%; }
	.serviziHome .allenamento, .serviziHome .riabilitazione
	{
		height: 300px;
		width: 100%;
		clear: both;
		padding:0 10%;
	}

	.serviziHome .foto{ width:40%; height: 300px; text-align: center;}
	.serviziHome .contenuto{ width:60%; height: 300px; position:relative; }
	.serviziHome .contenuto .logo{ position:absolute; width: 70px; height:90px;  left: 25%; top:34%; background-image: url(../images/icona-servizi.AVIF); background-size:contain;}
	.serviziHome .contenuto .title{ position:absolute; left: 25%; margin-left: 100px; top:19%; font-size:22px;}
	.serviziHome .contenuto .button{ position:absolute; left: 25%; margin-left: 100px; top:44%; padding:5px 20px;}
	.serviziHome .foto img{ max-height: 80%; margin-top:6%; max-width: 80%; border-radius: 5%; box-shadow: 2px 2px 5px #AAA}
	.serviziHome .allenamento .foto{ float:right;} 
	.serviziHome .riabilitazione { background-color:#f7f1f1}
	.serviziHome .riabilitazione .foto{ float:left;}
	.serviziHome .riabilitazione .contenuto{ float:right;}
	.serviziHome .title
	{
		margin-top: 50px; font-family:'Verdana'; color:#cc0f14;
	}
}me.css