@charset "UTF-8";
/* CSS Document */
/* common - based on Eric Meyer's reset, you shouldn't change this section
======================================*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var, ol, ul, li,
fieldset, form, label, legend {
	border: 0;
	margin: 0;
	padding: 0;
	vertical-align: baseline;
	font-weight: inherit;
	font-family: inherit;
}
html, body{margin:0px; padding:0px;font-family: 'Droid Sans', Arial;color:#58585a; font-weight: 500;overflow-x: hidden;}
strong{font-weight: 900;}

table{width: 100%;}
table tr td{vertical-align:top;padding:10px 0;}
td h2{padding: 0px !important;}
td p{font-size: 16px !important;}
td ul {font-size: 15px;padding: 0 40px !important;}
.thumb_prod {margin: 0 5px 0 0;}
._70{width:70%;}
._30{width:30%;}
._50{width:50%;}
.center{text-align:center;}
.middle{vertical-align: middle !important;}

#corner a{position:fixed;top:0px;right:0px;height:105px;width:105px;background: url(images/corner.png);z-index: 999999;}

/*ERRORS box*/
#blank{display:none;position:fixed;top:0px;left: 0px;width:100%;height:100%;background: url(images/error_box/black90.png) repeat;z-index: 9999;}
#handle{border-bottom: 1px solid #AAAAAA;cursor: move;padding: 10px;text-align: right;}
.close{cursor: pointer;}
#box{height: 450px;width: 600px;margin:150px auto 0 auto;background: #fff;border-radius: 5px 5px 5px 5px;}
#box_privacy_content{height: 360px;width: 580px;font-size: 13px;padding: 10px;overflow-y: scroll;}
#box_errors_content{font-size: 16px;height: 299px;line-height: 20px;overflow: hidden;padding: 50px 100px;width: 400px;}
.errors{background: url(images/error_box/error.png) no-repeat scroll left center rgba(0, 0, 0, 0);color: #E04006;height: 64px;line-height: 64px;padding-left: 84px;}
.infos{background: url(images/error_box/info.png) no-repeat scroll left center rgba(0, 0, 0, 0);color: #503800;height: 64px;line-height: 64px;padding-left: 84px;}

/*PHOTOGALLERY*/
.main-image {width: 380px;margin-bottom: 0.75em;}
.thumbnails li {display: inline;margin: 0 10px 0 0;}
/*BACKGROUND EFFECTS*/
#wrap{margin:0 auto;}
.wrapout{width: 100%;}
.arrurro{background: #d1e2ee;z-index:-1;}
._3d{height:22px;background: url(images/_wrapout/3d.png) left top repeat-x;margin-bottom:-22px !important;position: relative;z-index: 999;}
.fishes{background: url(images/_wrapout/fiches.gif) repeat-x scroll center bottom rgba(0, 0, 0, 0);border-top: 30px solid #503800;margin:30px auto 0 auto;}
.greyborder{margin:30px auto 0 auto;} /* border-top: 30px solid #b1b3b4; */
.orangeborder{margin:30px auto 0 auto;}/* border-top: 30px solid #503800; */
.gears{}
.orange{background:#503800;}
.grey{background:#b1b3b4; margin: 0 0 30px;}

/*wrap (centering position)*/
#wrap{width:1000px;}
#wrap > img{display:block;}

ul.dock {
    display: inline-block;
    list-style: none outside none;
    padding: 40px 0;
    width: 100%;
}
ul.dock li, ul.dock li:hover {
    background-size: contain;
    float: left;
    height: 268px;
    margin: 20px 1%;
    transition: all 0.8s ease 0s;
    width: 23%;
    z-index: 500;
}

li.card1 {
    background: url("images/home/card1.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
}
li.card2 {
    background: url("images/home/card2.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
}
li.card3 {
    background: url("images/home/card3.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
}
li.card4 {
    background: url("images/home/card4.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
}
ul.dock li:hover {
    z-index: 99999;
}
li.card1:hover {
    background: url("images/home/card1h.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
    transform: rotate(-10deg);
}
li.card2:hover {
    background: url("images/home/card2h.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
    transform: rotate(-5deg);
}
li.card3:hover {
    background: url("images/home/card3h.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
    transform: rotate(-10deg);
}
li.card4:hover {
    background: url("images/home/card4h.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
    transform: rotate(-5deg);
}


/*HEADER E MENU*/
#header{height:160px;	width: 1000px;}
#logo{margin: 0 auto;}
/* #logo img{padding: 20px 0;} */
#menu {list-style: none outside none;margin: 0 0 0 80px;padding: 0;}
#menu li {display: inline-block;}
#menu a {font-family: 'Ubuntu', Arial;color: #503800; font-size: 14px; float: left;padding: 6px 10px 4px 10px;text-decoration: none;text-transform: uppercase;}
#menu a:hover {color: #503800; }
#menu_mobile{display:none;}
#magic-line { position: absolute;margin-top: 36px; left: 0;  height: 4px; background: #503800;}
.current_page_item a { color: #503800 !important; }
.ie6 #menu li, .ie7 #menu li { display: inline; }
.ie6 #magic-line {bottom: -3px;}

/*CONTENT AREA*/
#inbox{display: inline-block;padding: 30px 5%;width: 90%;}
#inbox h2 {color:#503800;padding: 30px 0 10px 0;font-size:35px;}
.prodotti table td h2{padding: 30px 0 10px 0;font-size:20px !important;}
#inbox h3 {color:#503800;font-size: 16px;padding: 15px 0 0;}
#inbox{font-size:16px;}
#inbox span.note{line-height: 30px;}
#inbox span.note a{color:#58585a;}
#inbox ul{padding:10px 40px;}
#inbox ul li{margin:10px 0;}
iframe{margin: 30px 0;}
#slide {border-top: 4px solid #503800;margin-top: 10px;padding: 20px 0;
}

/*
	
	QUI ANCHE CSS SPECIFICO PER LE VARIE PAGINE
	
*/

.info_req{font-size:13px;text-align: right;padding: 10px 0;margin-right:2%;color:#aaa;}

.privacy_click {color: #FFFFFF;}
.privacy_click:hover{text-decoration: none;}
/*FORM*/
input, textarea {font-family: 'Droid Sans',Arial;font-size: 16px;border: none;border-radius: 5px;display: inline-flex;padding: 10px 2%;
}
.input_left, .input_right {width: 45%;margin-bottom: 10px;
}
.input_left {margin-top: 0px;margin-left: 0px;
}
.input_right {margin-top: 0px;margin-left: 0px;float: right;
}
textarea {width: 96%;resize: vertical;margin-top: 0px;margin-right: 0px;margin-bottom: 10px;margin-left: 0px;min-height: 80px;max-height: 250px;  
}
.submit{
	border-radius:5px;
	background: none repeat scroll 0 0 #B1B3B4;color: #FFFFFF;margin: 10px 0;padding: 10px 15px;text-align: center;cursor: pointer;
}

.submit:hover{
	background:#fff;
	color:#503800;
}
/*FOOTER*/
#footer {display: inline-block;width:100%;padding: 35px 0;}
.note{float:left;}
.contacts{float:right;}
#footer .note strong{font-weight: 900;color:#503800;}
a.num_verde, a.facebook, a.ippogrifo{float:left}
a.facebook {    background: url("images/facebook.png") no-repeat scroll 0 0 / 45px auto rgba(0, 0, 0, 0);cursor: pointer;height: 45px;transition: background-position 0.2s ease-in-out 0s;width: 45px;margin:22px 0 22px 22px}
a.ippogrifo{background: url("images/logo_ippo.png") no-repeat center center;height: 45px;width: 45px;margin:22px 0 22px 22px}
a.facebook:hover{background-position: 0 -45px;}

@media (max-width: 999px) {
	#menu a {padding: 6px 4px 4px 4px;font-sie:12px;}
	#wrap, #wrap > img, #wrap iframe{height:auto; width:100%; max-width:1000px;}
	.input_left, .input_right {
		width: 92%;
	    margin-right: 2%;
	    margin-left: 2%;
	    float: none;
	    clear: both;
	}
	
	.video > img {
    display: block;
    max-width: 1000px;
    width: 100%;
}
	
	textarea{
		width: 92%;
		margin-right: 2% !important;
	    margin-left: 2% !important;
	}
	.submit{width:91%;margin: 0 2%;}
	#footer{width: 96%;margin: 0 2%;text-align: center}
#footer span {
    display: inline-block;
    float: none;
    padding: 15px 0 0;
}
.contacts {
    text-align: center;
}
	



}

@media(max-width:600px){
		#header{height:auto;padding-bottom: 10px;border-bottom:3px solid #503800;}
		#menu{display:none;}
		#menu_mobile{display:block;list-style: none;color:#503800;}
		.opener{padding-left: 35px;background:url("images/menu.png") no-repeat left center;cursor:pointer;}
		#menuopen ul{display:none;list-style: none;border-top:3px solid #503800;}
		#menuopen ul li{list-style: none;padding:5px 0px 5px 20px}
		#menuopen ul li a{text-transform: uppercase;text-decoration: none; color:#503800;}
		.current_page_item{background: #503800;}
		
	
}
@media(max-width:400px){
ul.dock li, ul.dock li:hover {
    background-size: contain;
    height: 300px;
    margin: 50px 0 0 10%;
    transition: all 0.8s ease 0s;
    width: 90%;
    z-index: 500;
}
}