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

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

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



h1 {font-family:'familiar'; font-size:50px; color:#C1272D; font-weight:normal; margin:0 0 30px 0; line-height:40px;}
h2 {font-family:'familiar'; font-size:30px; color:#C1272D; font-weight:normal; margin:0 0 20px 0; line-height:30px;}
h3 {font-family:'familiar'; font-size:18px; margin:0 0 10px 0; font-weight:normal;}
h4 {font-weight:normal; font-family:'quattrocento'; font-size:16px; margin:0 0 10px 0;}
h4 b {font-weight:normal; color:#C1272D;}
h5 {font-family:'quattrocento'; font-weight:normal; font-size:14px; color:#000;}
p {font-weight:normal; font-family:'quattrocento'; font-size:14px; margin:0 0 10px 0;}
li {font-weight:normal; font-family:'quattrocento'; font-size:14px; list-style:none; padding-top:10px;}
ul {margin-top:-10px;}
section a {text-decoration:none; color:#F00;}
section a:hover {color:#000;}
hr {margin-bottom:30px; width:80%; border-bottom:1px solid #666;}

 
body{margin:0px; padding:0px;}

header {width: 100%; background:url('img/fondo.png') repeat-x; height:130px; margin-top:15px; position:relative; display:block;}
#logo {position:absolute; right:15px; top:15px;}
nav	{display:inline-block; position:absolute; bottom:10px; left:0px;}
nav ul li {list-style:none; font-family:'raleway'; font-size:18px; float:left; padding-right:25px;}
nav ul li a {border-bottom: 5px solid transparent; padding-bottom:5px; text-decoration:none; color:#FFF;}
nav ul li a:hover{border-bottom-color:#C1272D; color:#C1272D;}
nav ul b {font-weight:normal; border-bottom: 5px solid transparent; border-bottom-color:#C1272D; color:#C1272D; padding-bottom:5px;}

section {width:960px; margin:0 auto; position:relative; margin-top:70px;}

footer {width:100%; height:70px; background:url('img/fondo.png') repeat-x; font-family:'raleway'; margin-bottom:15px;}
footer p {color:#FFF; font-size:14px; line-height:18px; padding:0; margin:0px; float:right; text-align:right; width:200px; font-family:'raleway';}
.pie {padding-top:8px; margin-right:15px;}
.pie b{font-weight:normal; font-size:24px; margin-left:40px; display:block; float:left; padding-top:13px; color:#FFF;}



.clear {clear:both}





/*-----------INICIO-----------*/


.inicio article{width:700px; padding-top:80px;}
.inicio article p{
	-moz-column-count: 1;
	-moz-column-gap: 20px;
	-webkit-column-count: 1;
	-webkit-column-gap: 20px;
	margin-top:30px;
	font-size:16px;
    width: 50%;
    float: left;
}

.inicio article .codigoqr {
    float: right;
}


.inicio aside {width:170px; margin-bottom:40px; float:right;}
.inicio aside div {width:100%; margin:0 5px;}
.inicio aside div:hover {background:#BBB;}

.inicio aside a {text-decoration:none;}
.inicio aside h3 {margin:0px;}
.inicio aside h2 {color:#000; font-size:12px; margin:0px; padding:5px 0; text-align:center;}
.inicio aside p {color:#000; line-height:14px; margin:0px; padding:0; font-size:12px; text-align:center;}
.inicio aside h3 {color:#000; font-size:16px; margin:0px; padding:7px 0px; text-align:center;}




/*-----------PRODUCTOS-----------*/


.productos article {width:600px; float:left;}
.productos aside {margin-right:80px; width:230px; float:left;}

.productos aside div {height:auto; margin-bottom:20px; background:#BBB; padding:15px;}
.productos aside div:hover {background:#666;}
.productos aside a {text-decoration:none; color:#FFF; font-size:20px; line-height:20px; font-family:'raleway';}




/*-----------SERVICIOS-----------*/


.servicios article {margin:0 0 0 30px; width:300px; display:block; float:left;}
.servicios aside {float:left; height:340px; width:500px; background:url(img/img1.jpg);}



/*-----------ACTUALIZACIONES-----------*/

.actualizaciones article {width:600px; float:left;}
.actualizaciones aside {margin-right:80px; width:230; float:left;}

.actualizaciones aside div {height:auto; margin-bottom:20px; background:#BBB; padding:15px;}
.actualizaciones aside div:hover {background:#666;}
.actualizaciones aside a {text-decoration:none; color:#FFF; font-size:20px; line-height:20px; font-family:'raleway';}

.descarga {font-family:'familiar'; font-size:36px; color:#C1272D; font-weight:normal; margin:0 0 50px 0; text-decoration:none;}

.nota p {margin-left:30px; width:500px; font-size:13px;}



/*-----------SOPORTE-----------*/


.soporte article {width:450px; float:left;}
.soporte aside {margin-right:50px; width:450; float:left;}
.soporte form {margin-top:30px; font-weight:normal; font-family:'quattrocento'; font-size:14px;}


/*-----------GRACIAS-----------*/


.gracias {text-align:center;}


/*-----------WHATSAPP-----------*/

.whatsapp-button {
    position: fixed;
    box-sizing: border-box;
    bottom: 20px;
    right: 20px;
    z-index: 1000;
    background-color: #25d366;
    border-radius: 50%;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    height: 45px;
    width: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
}
  
.whatsapp-button img {
    width: 28px;
    height: 28px;
}