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

main, article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block;}
ol, ul {list-style: none;} article {list-style:circle;}

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

.orange-gradient {background:#f75f00; background: linear-gradient( to right, #ff8000 60%,#ed4700);}

h1,h2,h3,h4,h5,h6 {color:#f45b00; font-family:futura, "futura md", "trebuchet ms";} h2, h4, h6 {color:#6b6c6f;} 
h1 {font-size: 28px;}
h2 {font-size:24px; padding-top:2em;}
h3 {font-size:20.5px; font-style:italic; padding-top:1.8em;}
h4 {font-size:18.5px; padding-top:1.6em;}
h5 {font-size:18px; padding-top:1.4em;}
h6 {font-size:17.5px; font-style:italic; padding-top:1.1em;}
p  {margin-top:1em; line-height:1.4em;} p:first-child {margin:0;}
blockquote {margin-top:2.5em; margin-left:4em; line-height:1.5em; font-style:italic; font-weight:bold; font-size:18px; color:#7d7e81; font-family:"Trebuchet ms", arial;}
blockquote cite {font-weight:normal; font-size:15px;}
hgroup {margin-bottom:1.2em;}
hgroup h1, hgroup h2, hgroup h3, hgroup h4, hgroup h5, hgroup h6 {padding-top:1em; margin-bottom:0;}

h1 + p {margin-top:3.6em;} h2 + p {margin-top:3.1em;} h3 + p {margin-top:2.6em;} 
h4 + p {margin-top:2.1em;} h5 + p {margin-top:1.7em;} h6 + p {margin-top:1.2em;}
main h1 a, main h2 a, main h3 a, main h4 a, main h5 a, main h6 a {color:inherit;} main p a {color:#f45b00;}

img.style {-moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; 
-webkit-box-shadow:3px 3px 7px 0px #444; -moz-box-shadow:3px 3px 7px 0px #444; box-shadow:3px 3px 7px 0px #444;}

/* ----------------------------------------- HTML / BODY -------------------------------------- */
html {font-size:62.5%} /* over media queries limits */
body {font-family: verdana, "xTrebuchet Ms", Arial; line-height: 1;  margin: 0 auto;}

/* ------------------------------------------- HEADER ----------------------------------------- */
header {clear: both; font-family:futura, "futura md", "trebuchet ms", arial; font-size: 18.8px; font-size: 1.8rem; border-top:13.5px solid #ccbfc3;}
#logo {float:left; margin:39px 0 0 6.8%; text-indent:100%; white-space: nowrap; overflow: hidden;}
#logo a {display:block; width:202px; width:337px; height:150px; background: url("../images/logo-ppa-ocasio-pr.png") 0 0 no-repeat;}
/* ------------ #NAV ------------- */
nav {float:right; margin:108px 6.1% 145px 0;}
 #home nav {margin-bottom:136px;}
nav ul li {float:left; } 
nav ul li a {color:#181412; text-decoration: none; border-left:2.2px solid #a49e9c; margin-left:19.8px; padding-left:19.8px;}
nav ul li:first-child a {border:none; margin:0; padding:0;}
nav ul li a:hover {color:#f45b00;}

#productos .productos a, #videos .videos a, #blog .blog a, #instaladores .instaladores a, #contacto .contacto a {cursor:default; color:#f45b00;}


/* ---------------------------------------- #MAIN-WRAPPER -------------------------------------- */
#main-wrapper {color:#fff; font-family:futura, "futura md", "trebuchet ms", arial;}
#main-wrapper a {color:#fff;}

/* ------------ #CLAIM ------------- */
#claim {height:129px; line-height:129px; text-align:center;  font-size:35px; font-size:3.5rem; xfont-size:3vw; font-style:italic; clear:both;}

/* ---------- #MAIN-VIDEO ---------- */
#main-video {position:relative; height:0; padding-bottom:56.25%; overflow:hidden; background:#000;}
#main-video iframe, #main-video object, #main-video embed {position:absolute; top:0; left:0; width:100%; height:100%;}

/* OPT-IN FORM ---------------------*/
#mc_embed_signup {position:absolute; right:5%; bottom:15%; background:#000; background:rgba(0, 0, 0, 0.5); padding:2rem 2rem 3rem 3rem; width:260px; font-size:15px;}
form h2 {font-size:18px; margin-bottom:2rem;}
label {font-family:Arial; color:#dd3f00;} label span {color:#db430f;}
#mc_embed_signup input {color:#181412; background-color:#fff; border:none; padding:4.5px 0;}
input#mc-embedded-subscribe {color:#fff; font-size:22px; font-weight:bold; width:100%; padding: 10px 0; text-align:center; background-color:#f85822; border:none;}
#mc_embed_signup form div, #mc_embed_signup #radio-buttons li {padding-top:.8em;}
#mc_embed_signup form div label {float:left; width:45%;}

/* INSTALADORES CONTACT FORM */
#forma-contacto {width:600px;}
#forma-contacto input, #forma-contacto textarea {
padding: 5px; width: 471px; font-family: Helvetica, sans-serif; font-size: 1.4em; margin: 0px 0px 10px 0px;}
#forma-contacto textarea {height: 90px;}
#forma-contacto textarea:focus, #contacto-instaladores input:focus {border: 2px solid #900;}
#forma-contacto input.submit-button {width: 100px;float: right;}
#forma-contacto label {float: left; text-align: right; margin-right: 15px; width: 100px; padding-top: 5px;}

/* --------- #icons-MENU ---------- */
#icons-menu {padding-top:27px; padding-bottom:4px;}
 #home #icons-menu {padding-top:23px; padding-bottom:0;} 
#icons-menu ul {display:table; margin:0 auto;} 
#icons-menu ul li {float:left; display:inline;}
#icons-menu ul li a {display:block; text-decoration:none; height:56px; line-height:1.4em; margin-left:55px; padding-left:9px; padding-top:61px;
	font-size:9.2px; text-transform:uppercase; color:#fff; letter-spacing:0.75px;} 
#icons-menu ul li a:hover {color:#6b6c6f;}
#icons-menu ul li:first-child a {margin:0;}

#icons-menu ul li.motores-portones-corredizos a {background:url('../images/icons/motores-portones-corredizos.png') no-repeat; width:128px;}
#icons-menu ul li.motores-puertas-garaje a {background:url('../images/icons/motores-puertas-garaje.png') no-repeat; width:112px;}
#icons-menu ul li.brazos-pivotantes a {background:url('../images/icons/brazos-pivotantes.png') no-repeat; width:95px; padding-left:8px;}
#icons-menu ul li.accesorios-ppa a {background:url('../images/icons/accesorios-ppa.png') no-repeat; width:64px; padding-left:5px;}

#motores-portones-corredizos .motores-portones-corredizos a, #motores-puertas-garaje .motores-puertas-garaje a, #brazos-pivotantes .brazos-pivotantes a, #accesorios-ppa .accesorios-ppa a {cursor:default; color:#6b6c6f;}
#motores-portones-corredizos .motores-portones-corredizos a:hover, #motores-puertas-garaje .motores-puertas-garaje a:hover, #brazos-pivotantes .brazos-pivotantes a:hover, #accesorios-ppa .accesorios-ppa a:hover {color:#6b6c6f;}


/*--------------------------------------------- MAIN ------------------------------------------ */
main {position:relative; font-size:17.5px; color:#28292a; margin-top:50px; margin-bottom:80px; padding-left:4%; padding-right:30px;}
article {width:70%; float:left;}
aside {width:250px; float:right; border-left: 1.5px solid #c4c5ca;}
aside p {font-size:16px; margin-top:1.8em;}
aside ul {text-align:center; list-style-type:none; margin-top:1.5em;}
aside ul li {margin-bottom:14px;}
aside p, aside h3, aside h4, aside h5, aside h6 {padding-left:31px;}




/* ------------------------------------------- FOOTER ------------------------------------------ */
footer {position:relative; background:#505154; width:100%; height:110px;}
footer div {position:absolute; bottom:0; background:#393a3c; width:100%; height:40.5px; color:#3d3e41; text-align:center;}
footer div small {line-height:40.5px;}

/* ---------------------------------------- MEDIA QUERIES -------------------------------------- */

/*  iphone 320      320 - 480/568   */
/*  android phones  320/360 - 640   */
/*  ipad            768 - 1024      */

/* llego hasta 583 */

@media screen and (max-width: 1600px) {
  html {font-size: 62.5%;}													/* big screens */
}
@media (max-width: 1024px) {
  html { font-size: 53%; xbackground-color: red;} 							/* tablets landscape */
}
@media (max-width: 500px) {
  html { font-size: 45%; xbackground-color: blue;} #nav li {float:none;}	/* phones landscape */
}