/* :::::::::::::::::::::::::::: NAIPSBCN S.L. ::::::::::::::::::::::::::::::::::::::::::::::::::::: */
/*!
 *  Font Awesome 4.3.0 by @davegandy - http://fontawesome.io - @fontawesome
 *  License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License)
 */
/* > FONT PATH
 * -------------------------- */
 @font-face {
  font-family: 'FontAwesome';
  src: url('/mobile/fonts/fontawesome-webfont.eot?v=4.3.0');
  src: url('/mobile/fonts/fontawesome-webfont.eot?#iefix&v=4.3.0') format('embedded-opentype'), url('/mobile/fonts/fontawesome-webfont.woff2?v=4.3.0') format('woff2'), url('/mobile/fonts/fontawesome-webfont.woff?v=4.3.0') format('woff'), url('/mobile/fonts/fontawesome-webfont.ttf?v=4.3.0') format('truetype'), url('/mobile/fonts/fontawesome-webfont.svg?v=4.3.0#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}
.fa {
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transform: translate(0, 0);
}
.fa-bars:before {
  content: "\f0c9";
}
/* < FONT PATH
 * -------------------------- */


@font-face {
font-family: 'segoeui_regular';
src: url('/css/segoeui-webfont.eot');
src: url('/css/segoeui-webfont.eot?#iefix') format('embedded-opentype'),
     url('/css/segoeui-webfont.woff') format('woff'),
     url('/css/segoeui-webfont.ttf') format('truetype'),
     url('/css/segoeui-webfont.svg#segoeui_regular') format('svg');
font-weight: normal;
font-style: normal;
}

.clear {clear:both;}
img.img-responsive {max-width:100%; height:auto; display:block;}
.center {display:block; margin:0 auto 0 auto;}
.justify {text-align:justify;}
h1 {padding:10px 0 0 0; font: 28px/28px "segoeui_regular"; font-weight:bold;}
hr {display:block; border:1px solid #000;}
.alert {color:#c40907;}

body {
transition: background-color .5s;
background: #fff;
margin: 0;
font: 14px/16px "segoeui_regular";
color: #000; }


/* -> SIDE NAVIGATION */
.sidenav {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 999;
    top: 0;
    left: 0;
    background-color: #111;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 20px;
	color:#fff;
	overflow: scroll;
}

.sidenav a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 25px;
    display: block;
    transition: 0.3s;
	font:16px/18px "segoeui_regular";
	color:#fff;
	text-decoration:none;
	padding: 0 15px 0 10px;
}

.sidenav a:hover, .offcanvas a:focus{
    color: #ff0000;
}

.sidenav li {
    list-style:none;
	text-indent:10px;
	height:25px;
}

.sidenav li.spacer {
    height:3px;
	background:#000;
	border-top:1px solid #fff;
	padding:10px 0 10px 0;
}

.sidenav .closebtn {
    position: absolute;
    top: 5px;
    right: 5px;
    font-size: 36px;
    margin-left: 50px;
}

@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}


#menu {
position: relative;
float: left;
width: 222px;
top: 15px;
margin-bottom: 30px;	}
    #menu ul {
    list-style:none;
    margin:0;
    padding:0; }
    #menu ul li {
    position: relative;
    top: 0;
    left: 0;
    font-size: 15px;
    color: #fff;
    text-align: left;
    margin: 0;
    line-height: 35px;  }
    #menu ul li a {
    display: block;
    text-decoration: none;
    width: 222px;
    padding:5px 0 5px 5px;
	color: #fff; }
    #menu ul li a:hover {
    position: relative;
    top: 0;
    left: 0;
    color: #fff;
    text-decoration: none;
    background: #ba1715; }
    #menu ul li.on {
    position: relative;
    top: 0;
    left: 0;
    color: #ba1715;
    background: #000;}
    #menu ul li.on a {color: #fff;}

    .subgrups {
    clear: both;
    position: relative;
    width: 222px;
    top: 0;
    padding: 0 0 10px 30px; }
    .subgrups ul li {list-style:none; height:25px;}
	.subgrups ul li a {color:#fff; text-decoration: none;}
	.subgrups ul li a:hover {text-decoration:underline; color:#ba1715;}
    .subgrups ul li a.on {text-decoration:underline; color:#ba1715;}
				
/* <- SIDE NAVIGATION */

				
#top {
position: relative;
top: 0;
width: 100%;
margin: 0 auto 0 auto;
height: 170px; }


    #topmenu {
    position: relative;
	width: 100%;
	height: 55px; }
    
		
		#clients {
		position: relative;
		float: left;
		top: 8px;
		width: 120px;
		height: 40px; }
		#clients a {font:12px/14px "segoeui_regular"; color:#000; padding:0 10px 0 0; text-decoration:none;}
		#clients a:hover {color: #c40907; text-decoration:none;}
		#clients a.login {color:#fff; background-color:#c40907; padding:7px;}
		#clients a:hover.login {color:#fff; background-color:#000; padding:7px;}
		#clients a.logout {color:#fff; background-color:#c40907; padding:7px 14px 7px 14px;}
		#clients a:hover.logout {color:#fff; background-color:#000; padding:7px 14px 7px 14px;}
		
		
		#cistella, #cistella a {
		float: right;
		top: 0;
		width: 175px;
		height: 30px;
		background: #000;
		background: url(/mobile/img/cistella.png) no-repeat;
		background-position: 100% 100%;
		color:#fff;
		font:14px/16px "segoeui_regular";
		text-decoration: none; }
		#cistella a:hover {text-decoration:none;}


        #compra {
        position:relative;
        top: 7px;
        text-align:right;
        margin:0 40px 0 0; }


    #logo a {
    display: block;
	position: relative;
    top:0;
	margin: 0 auto 0 auto;
	width: 250px;
    height: 73px;
    background:url(/img/logo.png);
	background-size: 250px 73px;}


    .buttonmenu {display:block; position:relative; top:10px; padding:10px; color:#fff; text-align:center; text-decoration:none; border:0; font-size:20px; cursor:pointer;}
	.buttonmenu:hover {text-decoration:none;}
	.buttonmenu.red {background:#c40907;}
	
	
	/*
	#cerca {
    position: absolute;
    top: 56px;
    left: 422px;
    width: 280px;
    height: 30px; }
    #social img {padding:0 0 0 5px;}


    #social {
    position: absolute;
    top: 56px;
    left: 659px;
    width: 120px;
    height: 30px; }
    #social img {padding:0 0 0 5px;}
	*/

#content_zone {
position: relative;
width: 100%; }


    #content {
    position: relative;
    top: 10px;
    width: 90%;
    margin: 0 auto 0 auto;
    overflow: hidden;
    padding-bottom: 40px; }


        .mapa {
		position: relative;
		padding-bottom: 65.25%;
		height: 0;
		overflow: hidden; }
		
		.mapa iframe {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%; }

		.familia {
        position: relative;
        float: left;
        width: 100%;
        height: 130px;
        margin: 0 14px 20px 0;}
        .familia a {text-decoration:none; border:1px solid #000; display:block; width:99%; height:129px;}
        .familia a:hover {text-decoration:none; border:1px solid #c40907;}
        .familia.new a {border:1px solid #c40907;}
        .familia.new a:hover {border:1px solid #000;}
        .familia a .bgnom {position:absolute; width:100%; height:45px; background:#000; bottom:0;}
        .familia a:hover .bgnom {background:#c40907;}
        .familia a .bgnom.new {background:#c40907;}
        .familia a:hover .bgnom.new {background:#000;}
        .familia .bgnom h1 {margin:15px 0 0 0; font:17px/17px "segoeui_regular"; color:#fff; text-align:center;}


        /*
		.ruta {
        position: relative;
        float: left;
        top: 10px;
        width: 933px;
        height: 40px; }
        .ruta a {color:#000; text-decoration:none;}
        .ruta a:hover {text-decoration:underline;}
		*/


            .producte {
            position: relative;
            float: left;
            width: 99%;
            height: 290px;
			margin: 0 13px 13px 0;}
            .producte a {text-decoration:none; border:1px solid #000; display:block; width:100%; height:290px;}
            .producte a:hover {text-decoration:none; border:1px solid #c40907;}
            .producte .foto {display:table; text-align:center; width:100%; padding-top:5px;}
            .producte .foto .cont-foto {vertical-align:middle; display:table-cell;}
            .producte .foto img {border:0;}
            .producte a .bgnom {position:absolute; width:100%; height:45px; background:#000; top:110px;}
            .producte a:hover .bgnom {background:#c40907;}
            .producte .bgnom h2 {margin:6px 0 0 0; font:17px/17px "segoeui_regular"; color:#fff; text-align:center;}
            .producte .info {position:absolute; top:150px; width:100%; color:#000; text-align:center;}
            .producte .info .dat1 {float:left; width:45%; text-align:left; padding:20px 0 0 10px;}
            .producte .info .dat2 {float:right; width:45%; text-align:right; padding:20px 10px 0 0;}
                .preu {color:#c40907; font-weight:bold;}

            .numresultats {
            clear: both;
            float: left;
            width: 285px;
            padding: 10px 10px 10px 0; }

            .pagresultats {
            clear: both;
			float: left;
            width: 397px;
            height: 30px;
            padding: 10px 0 10px 0;}

            .pagresultats a {
            background-color: #000;
            border: 1px solid #000;
            color: #fff;
            margin: 2px;
            padding: 8px 15px 8px 15px;
            text-decoration: none; }

            .pagresultats a:hover, .pagresultats a:active {
            background-color: #c40907;
            border: 1px solid #000;
            color: #fff;
            margin: 2px;
            padding: 8px 15px 8px 15px; }

            .pagresultats .current {
            background-color: #c40907;
            border: 1px solid #000;
            color: #fff;
            margin: 2px;
            padding: 8px 15px 8px 15px; }

            .pagresultats .disabled {
            border: 1px solid #ccc;
            color: #ccc;
            margin: 2px;
            padding: 8px 15px 8px 15px; }

            #detall {position:relative; width:100%;}
            #detall h2 {float:left; margin:15px 0 15px 0; font:25px/30px "segoeui_regular"; color:#000; text-align:left;}
            #detall .preu {float:right; margin:15px 0 15px 15px; font:25px/25px "segoeui_regular"; color:#c40907; text-align:right;}
            #detall td.td1 {width:40%; height:30px; text-align:left; padding:0 0 0 15px; font:14px/14px "segoeui_regular";}
			#detall table {margin: 0 auto; width:100%;}
            #detall td.td2 {width:60%; height:30px; text-align:right; padding:0 15px 0 0; font:14px/14px "segoeui_regular";}
            #detall td.td3 {width:100%; text-align:justify; padding:0 15px 0 15px; font:14px/14px "segoeui_regular";}
            #detall td.dark {background:#f4f4f4;}

            .enrere {float:left; margin:15px 0 40px 15px; text-align:left; width:164px;}
            .enrere a {font:18px/18px "segoeui_regular"; color:#000;}
            
            .social {float:left; margin:15px 0 15px 0; text-align:right; width:100%;}
            
			
#bottom_zone {
clear: both;
position: relative;
width: 100%;
background-color: #000; }


    #bottom {
    position: relative;
    padding: 20px; }
    #bottom a {color:#fff; text-decoration:none;}
    #bottom a:hover {color:#c40907; text-decoration:none;}
    #bottom a.on {color:#c40907; text-decoration:none;}


        #marca {
        position: relative; }


        #copy {
        clear: both;
        position: relative;
        top: 10px;
		text-align: center;
		color: #fff; }


.grid {text-align:left; float:left; width:99%;}
.grid.right  {padding:0 0 0 15px;}
label {display:block;}

input, select, textarea {
    position: relative;
    background-color: #fff;
    height: 26px;
    width:98%;
	margin: 0 0 13px 0;
    border: 1px solid #000;
    padding-left: 5px; }

    input[type="image"] {border:0;}
    .label1 {position:relative; float:left;}
    .label2 {position:relative; float:left; top:1px; left:-35px;}
    .label2 button {padding:0; margin:0; background:none; border:0; cursor:pointer;}

.checkbox {border:1 none transparent; width:25px; vertical-align:top;}

.comprar {position:relative; top:10px; width:123px; height:35px; background:url(/img/comprar1.png); border:0; cursor:pointer;}
.comprar:hover {background: url(/img/comprar1.png) 0 -35px; border:0;}

.comprar2 {display:block; margin:40px auto 40px auto; width:205px; height:56px; background:url(/img/comprar2.png); border:0; cursor:pointer;}
.comprar2:hover {background: url(/img/comprar2.png) 0 -57px;}

.boto {display:block; float:left; top:50px; padding:15px; color:#fff; text-decoration:none; border:0;}
.boto:hover {text-decoration:none;}
.boto.black {background:#000;}
.boto.red {background:#c40907;}

/* ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */