/* ------------------------------------------ RESET ------------------------------------------ */
* {margin:0; padding:0;}

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

.group:before,
.group:after {
    content: "";
    display: table;
} 
.group:after {
    clear: both;
}
.group {
    zoom: 1; /* For IE 6/7 (trigger hasLayout) */
}



/* ------------------------------------------ BODY -------------------------------------------- */
body {
	margin: 0 auto;
	text-align: center;
	font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
	line-height: 1.3em;
	color: #8f8e8e;
}

div, img, ul, li {margin: 0; padding: 0;}div, p {text-align: left;}img {border:0}#contenido img{float:left;margin:1em 1.5em 0 0;}#contenido .principal img, #contenido .secundario img{float:none;}
strong{color:#717070;}br {clear:both; }hr {border: none; background-color:#870c0c; color:#870c0c; height: 1px; width: 80%; clear:both;}#contenido .clear{clear:both;float:none;}.border{border:6px double #8a8989;}

.red {color:#870c0c;}
h1,h2,h3,h4,h5,h6 {color: #870c0c;font-size:19px;margin-top:0;padding-top:.6em;clear:both;}
h1 {font-size: 20px; letter-spacing:.2em; padding-top:1.5em;}
h2 {font-style:italic;padding-top:2em;}#contenido h2{margin-left:-1em;}* html #contenido h2{margin-left:0;} 
#contenido h3 {padding:0;margin-bottom:.5em;padding-top:1em;}
h4 {padding:0;margin:0;font-size:18px;}
h5 {padding:1em; margin:0; font-size:17px;}
#inicio h1, #inicio h2, #inicio h3 {margin-bottom:.8em;padding-top:.6em;}
blockquote {color:#870c0c; font-weight:bold; font-style: italic; font-size:18px; line-height:1.3em; margin-top:-40px;}
#inicio #contenido p {margin-top:0;} p.last {margin-bottom: 4em;}
a:link, a:visited{color:#870c0c; text-decoration:none;}p a:link, p a:visited {text-decoration:underline;}
a:hover, a:active{font-weight:bold; color:#bb0301;}
a:active, #main ul li a:active{color:#870c0c;} #main ul a {color:#fff;}

#contenido ul {margin-left:1em; padding:0; text-indent:0;} #contenido ul li {padding-top:1em;}



/* ----------------------------------------- HEADER -------------------------------------------- */
header {
	height:85px; background: #fff url(../fotos/header-bgd.gif) repeat-x;
	border-top: solid 2.5px #870c0c; border-bottom: solid 1px #370c0c;
	text-align: center; position:relative; width:100%; clear:both;
}
#logo {position:absolute; top:18px; left:53px;}

#banner {position:absolute; left:0; right:0; top:3px; margin-left:auto; margin-right:auto; width:370px; height:78px;} 

#tels {position:absolute; top:18px; right:44px;}



/* ------------------------------------------ MAIN --------------------------------------------- */
#main {
	height:237px; clear:both;
	border-top:3px solid #870c0c; border-bottom: 3px solid #870c0c; /*bordes rojos*/
	background-color: #5f0000;
    background: -moz-linear-gradient(top, #390706 0%, #6e0001 14%, #6e0001 20%, #5e0000 50%, #4d0101 75%, #410102 100%);
	background: -webkit-linear-gradient(top, #390706 0%,#6e0001 14%,#6e0001 20%,#5e0000 50%,#4d0101 75%,#410102 100%);
	background: linear-gradient(to bottom, #390706 0%,#6e0001 14%,#6e0001 20%,#5e0000 50%,#4d0101 75%,#410102 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#390706', endColorstr='#410102',GradientType=0 );
}
#main div {position:absolute; margin-top:60px; left:85.5px;} #main #cta {margin-top:75px;}
#main div p {font-size:24px; color:#efefef; line-height:1.5em; text-shadow:2px -1px 8px #000; float:left;} 
#main #cta p {font-size:27px; text-shadow:2px 2px 3px #3c0101; padding-right:36px; background: transparent url('../fotos/arrow.png') no-repeat right center;}
#main #cta a {display:block; float:left; margin-top:12.5px; margin-left:23px; font-weight:bold; font-style:italic; color:#fff; font-size:31px; height:58.6px; width:274px; line-height:58.6px; text-align:center; box-shadow:3px 3px 3px rgba(30, 1, 1, 0.5);
-webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;
background-color:#8e0101; text-shadow:-1px -1px 1px #1b0000;
background: -moz-linear-gradient(top, #900101,#540101);
background: -webkit-linear-gradient(top, #900101,#540101);
background: linear-gradient(to bottom, #900101,#540101);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#540101', endColorstr='#900101',GradientType=0 );
} 
#main #cta a:hover {cursor:hand;
background-color:#8e0101; text-shadow:1px 1px 1px #1b0000;
background: -moz-linear-gradient(top, #540101,#900101);
background: -webkit-linear-gradient(top, #540101,#900101);
background: linear-gradient(to bottom, #540101,#900101);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#900101', endColorstr='#540101',GradientType=0 );
}



/* ------------------------------------------- NAV ----------------------------------------------- */
nav ul {
position: absolute;
font-size: 15px;
color: #fff;
top:308px;
list-style-type:none;
float:left;
width:950px;
margin-left:53px;
}
nav ul p {margin:0;}
nav ul li {margin-right:15px;float:left;}
nav ul li.last {margin-right:0;} .inicio p {color:#bb0301;}

#inicio li.inicio, #galeria li.galeria, #herreria li.herreria, #motores-portones li.motores-portones, #puertas-garaje li.puertas-garaje, #control-acceso li.control-acceso, #seguridad li.seguridad, #servicios li.servicios, #contacto li.contacto, #productos-ppa li.productos-ppa, #landing li.landing 
{
background: url(../fotos/navright.png) no-repeat top right; 
float:left; 
}
#inicio .inicio a, #galeria .galeria a, #herreria .herreria a, #motores-portones .motores-portones a, #puertas-garaje .puertas-garaje a, #control-acceso .control-acceso a, #seguridad .seguridad a, #servicios .servicios a, #contacto .contacto a, #productos-ppa .productos-ppa a, #landing .landing a 
{
display:block; 
color:#bb0301;
font-weight:bold; 
cursor:default; 
margin-right:16px; /* para el navright */
background: #fff; 
-webkit-border-top-left-radius: 5px; -moz-border-top-left-radius: 5px; border-top-left-radius: 5px;
padding:0 12px 0 10px;
line-height:1.75em;
float:left;
}

#main nav ul li.productos-ppa a {color:#fb9c20;} 
#productos-ppa nav ul li.productos-ppa a {color:#870c0c;}



/* ---------------------------------------- COLUMNS ----------------------------------------------- */
#columns {
	background: #FFF url(../fotos/side-bar.gif) repeat-y top right;
	min-width: 884px; text-align:left;
	padding-left:53px; border-top: solid 1px #370c0c;}
* html #columns {width:expression((document.documentElement.offsetWidth < 900)? “884px”: “auto” );}
#landing #columns {
	background-image:none;
	padding-left:53px; padding-right:53px;}



/* --------------------------------------- CONTENIDO ---------------------------------------------- */
#contenido {width: 74.2%;float:left;border:0; position:relative;} #contenido .last {clear:both;}#puertas-garaje #contenido p.last{margin-top:4em;}
.principal, .secundario{width:47%;}.principal{float:left;}.secundario{float:right;}
#landing #contenido {width:100%; float:none;}
/*  #contenido DROPDOWN ----------------- */
#contenido .dropbtn 
{background-color: #75120d; color: white; padding: 16px; font-size: 16px; border: none; cursor: pointer;} #contenido .dropbtn a {display:block; color:inherit; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px;}
#contenido .dropdown {position:relative; display: inline-block;}
#contenido .dropdown-content 
{display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; 
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 100;}
#contenido .dropdown-content a 
{color: black; padding: 12px 16px; text-decoration: none; display: block;}
#contenido .dropdown-content a:hover {background-color: #f1f1f1;}
#contenido .dropdown:hover .dropdown-content {display: block;}
#contenido .dropdown:hover .dropbtn {background-color: #9a1711;}



/* -----------------------------------------ASIDE ------------------------------------------------- */
aside {width: 228px;float: right;}
aside ul {text-align:center; list-style-type:none;padding-left:0;}
aside ul li {margin-bottom:14px;}
aside p,h2,h3,h4 {padding-righ:15px; padding-left:9px;margin-bottom:1.5em;}#sidebar p{padding-left:14px;}



/* ---------------------------------------- FOOTER ------------------------------------------------ */
footer {
	background: #FFF;
	border-top: solid thin #870c0c;
	color: #aaa;
	font-size: .8em;
	height: 30px;
	clear: both;
	text-indent: 53px;
	line-height: 30px;
	margin-left:-53px;
}
footer p {margin:0; padding:0;}



/* -------------------------------------- BACK TO TOP --------------------------------------------- */
a.back-to-top 
{display: none; width: 55px; height: 55px; text-indent: -9999px; 
position: fixed; z-index: 999; right: 250px; bottom: 20px;
background: #000 url("../fotos/up-arrow.png") no-repeat center 43%; opacity:0.3;
-webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px;
} a:hover.back-to-top {opacity: .8;}



/* ----------------------------------------- RESCOM ----------------------------------------------- */
#rescom { /* el fondo con borde */
border:1px solid #f00; border-left:0; 
width:105.7%;
margin-left:-53px;      /* pegarlo al borde */
-webkit-border-radius:0 25px 25px 0; -moz-border-radius:0 25px 25px 0; border-radius:0 25px 25px 0;
background-color:#560000; 
background: -moz-linear-gradient(#6b0101,#3e0000 87%);
background: -webkit-linear-gradient(#6b0101,#3e0000 87%);
background: linear-gradient(#6b0101,#3e0000 87%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3e0000', endColorstr='#6b0101',GradientType=0 );
}
#rescom ul { /* list-style, padding de botones, y top-shadow */
list-style:none; padding-left:10%; height:224px; margin:0;
background: transparent url('../fotos/rescom-top-shadow.png') repeat-x top;
-webkit-border-top-right-radius:25px; -moz-border-top-right-radius:25px; border-top-right-radius:25px;
} 
#rescom ul li {float:left;}
#rescom ul li a { /* botones */
display:block; color:#9e0101; font:31px Marcellus; text-align:center; text-transform:uppercase; margin-top:11.5px; width:269px; padding:22px 0 131.5px 0;
-webkit-border-radius:20px; -moz-border-radius:20px; border-radius:20px;
background-color: #690000;
background: -moz-linear-gradient(#810000,#3d0000);
background: -webkit-linear-gradient(#810000,#3d0000);
background: linear-gradient(#810000,#3d0000);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3d0000', endColorstr='#810000',GradientType=0 );
}
#rescom ul li a:hover { /* hover fondo de botones */
color:#cccaca; text-shadow:2px 2px 3px #b67373; font-weight:400;
background-color: #941216;
background: -moz-linear-gradient(#a11218,#3d0000);
background: -webkit-linear-gradient(#a11218,#3d0000);
background: linear-gradient(#a11218,#3d0000);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3d0000', endColorstr='#a11218',GradientType=0 );
}
#rescom ul li.res {margin-right:7.4%;}