/*------------------------------------
 RESET by Harry Roberts + Normalize.css
 http://csswizardry.com/2011/10/reset-restarted/
------------------------------------*/

* {
-webkit-box-sizing: border-box; 
-moz-box-sizing: border-box; 
box-sizing: border-box; 
}

html,body,div,span,applet,object,iframe,
h1,h2,h3,h4,h5,h6,p,blockquote,pre,hr,
a,abbr,address,cite,code,
del,dfn,em,img,ins,kbd,q,s,samp,
small,strong,sub,sup,tt,var,
b,u,i,
dl,dt,dd,ol,ul,li,
fieldset,form,label,legend,
table,caption,tbody,tfoot,thead,tr,th,td,
article,aside,canvas,details,figcaption,figure,
footer,header,hgroup,menu,nav,section,summary,
time,mark,audio,video{
	margin:0;
	padding:0;
}

article,aside,details,figcaption,figure,footer,
header,hgroup,menu,nav,section{
	display:block;
}

/*------------------------------------
 Stili default del documento.
------------------------------------*/

body {
 font-size: 100%;
 font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
 font-weight: 300;
 line-height: 1.4;
 background-image: url("http://www.franchinetti.com/img/texture_home.png");
 
 color: #222;
}

a {color: #000;}

a:hover {color: #2795b6;}

a:focus {color: #2ba6cb; outline: none;}

p {
 font-size: 16px; 
 line-height: 1.6; 
 margin-bottom: 17px;
}



h1, h2, h3, h4, h5, h6 { 
 text-rendering: optimizeLegibility; 
 line-height: 1.1; 
 margin-bottom: 14px; 
 margin-top: 14px; 
}

h1 {font-size: 40px;}

h2 {
 font-size: 30px;
 color: red;
 text-shadow: 2px 2px 5px #333333;
}


/*------------------------------------
 Stili demo.
------------------------------------*/

header {
 position:relative;
 height: 700px;
 background-size:cover;
 -webkit-box-shadow:inset 0 -1px 5px rgba(0,0,0,0.6);
 -moz-box-shadow:inset 0 -1px 5px rgba(0,0,0,0.6);
 box-shadow:inset 0 -1px 5px rgba(0,0,0,0.6);
}



/*------------------------------------
CLASSI NELL?ESEMPIO 1 ????

html, body {
 height: 100%;
}
------------------------------------*/




/*------------------------------------
 Stili header menu.
------------------------------------*/

header-menu {
 position: fixed;
 top: 0;
 left: 0;
 z-index: 100;
 width: 100%;
 height: 40px 100%;
 background-color: rgba(0,0,0,0.6);
}

#menu {
 list-style: none;
 text-align: center;
}

#menu li {
 display: inline-block;
 padding: 10px;
}

#menu li a {
 color: #fff;
 text-decoration: none;
 font-weight: bold;
}


/*------------------------------------
 Active non serve perchè non rimane nella stessa pagina
------------------------------------*/
#menu li.active a {
 color: #b8b8b8;
}

#menu li:hover a {
 color: #e01414;
}



/*------------------------------------
 Stili header menu - FINE -
------------------------------------*/



#testo-header {
 position: absolute;
 top: 150px;
 left: 150px;
}


#testo-header h1{
 color: #fff;
 text-shadow: 2px 2px 5px #333333;
}

#testo-header h2{
 font-size: 30px;
 color: red;
 text-shadow: 2px 2px 5px #333333;
}

#testo-header p {
 font-size: 16px; 
 line-height: 1.6; 
 margin-bottom: 17px;
 color: #fff;
 text-shadow: 2px 2px 5px #333333;
}

#testo-header a {
 color: #fff;
}

#testo-header a:link {
 color: #fff;
}
#testo-header a:active {
 color: #fff;
}
#testo-header a:focus {
 color: #fff;
}

#testo-header a:hover {
 color: #e01414;
}

section {
 width: 70%;
 margin: 0 auto;
 padding: 40px;
 background: #d7cfc7;
 padding-top: 100px;
}





/*------------------------------------
 Stili FRECCIA 1
------------------------------------*/




#freccia-header {
 position: absolute;
 bottom: 0;
 width: 100%;

}

#freccia-header a {
 display: block;
 width: 80px;
 height: 80px;
 margin: 0 auto;
 background: url('../img/arrow.png') no-repeat;
}


/* Image replacement */
.ir {
 border: 0;
 overflow: hidden;
 *text-indent: -9999px;
 width: 128px;
 height: 128px;
}

.ir:before {
 content: "";
 display: block;
 width: 0;
 height: 100%;
}


/* Regole per IE8  */

.lt-ie9 header {
 background-position: top center;
}



/*------------------------------------
 Stili FRECCIA 1  - FINE -
------------------------------------*/


/*--------------------------------------------------------------------
----------------SUB MENU in ARTICLE/SECTION---------------------------
-------------------------------------------------------------------*/



.menusocial{
	margin: 0 auto;
	text-align: center;
	width: 100%;
	height: 40px 100%;
	background-color: rgba(0,0,0,0.2);
	margin: 0 auto;
}



#submenu {
 list-style: none;
 text-align: center;
 border-top: 40px solid #84817e;
 margin: -100px -40px -40px;
}

#submenu li {
 display: inline-block;
 padding: 2% 30px;
}

#submenu li a {
 color: #fff;
 text-decoration: none;
 font-weight: bold;
}

#submenu li a:hover {
 color: #797979;
}


/*--------------------------------------------------------------------
-------------------------------------------------------------------*/



/*------------------------------------
 Stili FRECCIA 2  - FINE -
------------------------------------*/

#freccia-section {
	margin-top: 5%;
}

#freccia-section a {
 display: block;
 width: 80px;
 height: 80px;
 margin: 0 auto;
 background: url('../img/arrow2.png') no-repeat;
}


.ir-section {
 border: 0;
 overflow: hidden;
 *text-indent: -9999px;
 width: 128px;
 height: 128px;
}

.ir-section:before {
 content: "";
 display: block;
 width: 0;
 height: 100%;
}


/*------------------------------------
 Stili FRECCIA 2  - FINE -
------------------------------------*/


article img {
	width:100%;

}


#testo p {
 font-size: 16px; 
 line-height: 1.6; 
 margin-bottom: 17px; 

}

#testo p a:link {
	color: #000;
}

#testo p a:hover {
	color: red;
}

#testo p a:focus {
	color: #000;
	outline: none;
}

#testo p a:active {
	color: #000;
	outline: none;
}

/*------------------------------------
 Stili FOOTER
------------------------------------*/

.footer{
	background: #333333;
	padding: 20px 50px;
}

#brand img{
	margin-left: -6%;
	width: 100%;
	max-width: 600px;
}

.footer h2{
	font-size: 3em;
	font-weight: bold;
	color: #333333;
	margin-top: -61px;
}

.footer h3{
	color: white;
	font-size: 30px;
}
.footer span{
	color: #fff;
}
.footer p{
	color: #7B7B7B;
	font-size: 1em;
}

.footer a{
	text-decoration: none;
	color:#7B7B7B;
}

.footer a:hover{
	color:#fff;
}


#contat {
width: 100%;
border-top: 2px solid #fff;
}

.footer .short-contact{
	float: left;
	background: #333333;
	padding: 0;
	margin-top: 20px;
	
	padding-top: 10px;
    width: 80%;
}

.footer .iva{
	margin-top: 20px;
	border-top: 2px solid #fff;
	padding-top: 10px;
	clear: both;
}


#icon{
	float: left;
	margin-top: 10%;
}


#icon img{
    opacity: 0.4;
    filter: alpha(opacity=40); /* For IE8 and earlier */
}

#icon img:hover {
    opacity: 1.0;
    filter: alpha(opacity=100); /* For IE8 and earlier */
} 


/*------------------------------------
 Stili FOOTER  - FINE -
------------------------------------*/

/* Media Query
 * --------------------------------------- */





@media only screen and (max-device-width: 1024px) and (min-device-width: 500px) and (orientation:landscape) {
	#freccia-header {
		border-bottom-style: none;
		border-bottom: none;
		border-bottom: 0px none #fff !important;
	}
	section {
	    width: 100%;
	    margin: 0;
	    padding: 100px 0 0 0;
	}
	#submenu {
	    margin: -100px 0 0 0 !important;
	}
	#submenu li {
		padding: 10px;
	}
	.menusocial {
	    text-align: center;
	    width: 100% !important;
	    background-color: rgba(0,0,0,0.2);
	    margin: 0 auto !important;
	}
	article {
		padding: 0 15px !important;
	}
	article li {
		margin-left: 10px;
	}
	#freccia-section {
	    margin-top: 0;
	}
	#freccia-section a {
	    float: right;
	    margin-top: -61px;
	    margin-right: 10px;
	}
}


@media only screen and (min-device-width: 500px) and (max-device-width: 1024px) and (orientation:portrait) {
	#freccia-header {
		border-bottom-style: none;
		border-bottom: none;
		border-bottom: 0px none #fff !important;;
	}
	section {
	    width: 100%;
	    margin: 0;
	    padding: 100px 0 0 0;
	}
	#submenu {
	    margin: -100px 0 0 0 !important;
	}
	#submenu li {
		padding: 10px;
	}
	.menusocial {
	    text-align: center;
	    width: 100% !important;
	    background-color: rgba(0,0,0,0.2);
	    margin: 0 auto !important;
	}
	article {
		padding: 0 15px !important;
	}
	article li {
		margin-left: 10px;
	}
	#freccia-section {
	    margin-top: 0;
	    padding-bottom: 20%;
    	padding-top: 20%;
	}
	#freccia-section a {
	    float: right;
	    margin-top: -61px;
	    margin-right: 10px;
	}
}


@media only screen and (min-device-width: 150px) and (max-device-width: 500px) and (orientation:portrait) {
	#freccia-header {
		border-bottom-style: none;
		border-bottom: none;
		border-bottom: 0px none #fff !important;;
	}
	section {
	    width: 100%;
	    margin: 0;
	    padding: 100px 0 0 0;
	}
	#submenu {
	    margin: -100px 0 0 0 !important;
	}
	#submenu li {
		padding: 10px;
	}
	.menusocial {
	    text-align: center;
	    width: 100% !important;
	    background-color: rgba(0,0,0,0.2);
	    margin: 0 auto !important;
	}
	article {
		padding: 0 15px !important;
	}
	article li {
		margin-left: 10px;
	}
	#freccia-section {
	    margin-top: 0;
	    padding-bottom: 20%;
    	padding-top: 20%;
	}
	#freccia-section a {
	    float: right;
	    margin-top: -61px;
	    margin-right: 10px;
	}
}