@import url(http://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700);

/* Eric Meyer's Reset CSS v2.0 - http://cssreset.com */
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,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}table{border-collapse:collapse;border-spacing:0}

.cf:before,.cf:after {content:"";display:table;}.cf:after {clear:both;}.cf {zoom:1;}

body {font-family: 'Ubuntu', sans-serif; background:url(../images/bg.png) repeat}

.container {width:960px; margin:0 auto; display:block;}
.half_l {width:440px;padding:15px;float:left}
.half_r {width:440px;padding:15px;float:right}

header {height:90px;width:100%; padding-top:10px; background:#fff; border-bottom:#ccc 1px solid;}
#logo {width:265px;height:80px;display:inline-block;float:left;background:url(../images/decorcenter.jpg)}
header nav {float:right;margin-top:30px;}
header ul li {display:inline;float:left;}
header ul li a {padding:2px 18px 3px 18px;text-decoration:none;color:#fff;font-weight:500;background:#3c53a4;}
header ul li a:hover, header ul li a.active:hover {color:#eee;background:#999}
header ul li a.active {color:#666;background:#eee}

#slider {background:url(../images/slider-shadow.png) no-repeat center 293px; margin-bottom:10px}
#slider img{display:block;width:100%;height:auto;}
#bar{width:0%;max-width:100%;height:4px;background:#3c53a4;}
#progressBar{width:100%;background:#ccc;}

#main { margin:0 auto; padding:20px 0 90px 0;}

#novedades {background:#fff; border-radius:3px}
#novedades h1 {color:#fff;font-size:15px;background:#3c53a4;font-weight:700;text-align:center;padding:10px 0}
.novedad {text-align:center;padding:10px; border-bottom:2px dashed #999;}
.novedad_title {text-transform:uppercase;font-weight:500; margin-bottom:4px; color:#F00}
.novedad_content {font-size:13px; text-align:left; line-height:15px}

#empresas {background:#fff; border-radius:3px}
#empresas .logo {width:150px; height:50px; background:url(../images/decorcenter.jpg) no-repeat; margin: 0 auto; display:block}
#empresas h1 {text-align:center}

#empresas ul {text-align:center}
#empresas li {display:inline-block;margin:5px}
#empresas li img {width:50px}

#tarjetas {padding-top:20px; clear:both; text-align:center; }
.tarjeta {display:inline-block; width:50px; margin:0 5px; box-shadow:0 0 3px #666}
.tarjeta img { width:100%}

footer {background:url(../images/bg2.png);color:#fff;border-top:5px solid #3c53a4;padding:10px 0;margin:20px 0 0;position:fixed;bottom:0%;width:100%}
footer a {text-decoration:none; color:#ccc}
#info {display:inline-block;float:left}
#creditos {display:inline-block;float:right}

#institucional { font-size:14px; line-height:20px}
.local { width:230px; float:left; margin-right:20px}

#profesional .imagenes {float:left; width:250px; margin-right:30px;}
#profesional img {width:100%; margin-bottom:3px}
#profesional .content {float:left; width:600px; line-height:30px}
#profesional .content p {margin-bottom:20px}

ul.marcas {list-style:none; text-align:center}
ul.marcas li {display:inline-block; background:#fff; width:180px; margin:10px; text-align:center; border:1px solid #eee; padding:5px}
ul.marcas li:hover {border:1px solid #ccc; box-shadow:0px 0px 5px rgba(0,0,0,0.1)}
ul.marcas li img{width:80%;}
ul.marcas li p {background:#eee; padding:3px 0; }

#menu-productos {text-align:center;width:150px;margin:5px 25px;float:left;font-weight:500; background:#ccc; padding:10px 0; border-radius:5px; position:fixed;}
#menu-productos h3 { background:#3c53a4; color:#fff; padding:5px}
#menu-productos img { width:100px; margin:10px 0}

#productos {width:760px; margin:0 auto; float:right}
.producto {width:320px; background:#fff; float:left; text-align:center; padding:10px 20px; margin:5px; border:1px solid #ccc; position:relative; cursor:pointer}
.producto h3 {color:#666; font-weight:500; margin-bottom:5px;}
.producto h2 {color:#666; margin-bottom:10px; font-size:12px; text-transform:capitalize}
.producto:hover {border:1px solid #666;box-shadow:0px 0px 5px rgba(0,0,0,0.1)}
.producto:hover h3{color:#000;}
.producto img {height:120px;width:auto; margin:0 10px 10px 10px; float:left;}
.producto img.marca{height:50px;border:none;position:absolute;top:0px;right:0px}
.producto:hover img.marca{ opacity:0.2;}
.producto .desciz,.producto .descder {float:left; font-size:12px; padding:3px; text-align:left; line-height:15px}
.desc {float:left; font-size:12px; padding:3px; text-align:justify; line-height:15px}

#contacto {text-align:center;}
#contacto p {font-size:18px;margin:20px;font-weight:500;display:inline-block;}
#contacto img.mapa {display:inline-block;height:auto;width:950px; border:5px solid #fff}
#contacto img {display:inline-block;height:20px;}

.tr300{-webkit-transition: all 300ms ease-in-out;-moz-transition: all 300ms ease-in-out;-ms-transition: all 300ms ease-in-out;-o-transition: all 300ms ease-in-out;transition: all 300ms ease-in-out;}