html {
font-family: sans-serif;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%
}
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary { display: block }
audio, canvas, progress, video {
display: inline-block;
vertical-align: baseline
}
a { background-color: transparent }
a:active, a:hover { outline: 0 }
abbr[title] { border-bottom: 1px dotted }
b, strong { font-weight: bold }
dfn { font-style: italic }
h1 {
font-size: 2em;
margin: .67em 0
}
mark {
background: #ff0;
color: #000
}
small { font-size: 80% }
sub, sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline
}
sup { top: -0.5em }
sub { bottom: -0.25em }
img { border: 0 }
svg:not(:root) { overflow: hidden }
figure { margin: 0 }
hr {
box-sizing: content-box;
border-color: #fff;
border-width: 0 0 1px;
height: 0
}
pre { overflow: auto }
code, kbd, pre, samp {
font-family: monospace, monospace;
font-size: 1em
}
button, input, optgroup, select, textarea {
color: inherit;
font: inherit;
margin: 0
}
button { overflow: visible }
button, select { text-transform: none }
button, html input[type="button"], input[type="reset"], input[type="submit"] {
-webkit-appearance: button;
cursor: pointer
}
button[disabled], html input[disabled] { cursor: default }
button::-moz-focus-inner, input::-moz-focus-inner {
border:0;
padding:0
}
input { line-height: normal }
input[type="checkbox"], input[type="radio"] {
box-sizing: border-box;
padding: 0
}
input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button {
height:auto
}
input[type="search"] {
-webkit-appearance: textfield;
box-sizing: content-box
}
input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration {
-webkit-appearance:none
}
fieldset {
border: 1px solid #c0c0c0;
margin: 0 2px;
padding: .35em .625em .75em
}
legend {
border: 0;
padding: 0
}
textarea { overflow: auto }
optgroup { font-weight: bold }
table {
border-collapse: collapse;
border-spacing: 0
}
td, th { padding: 0 }
body {
margin: 0;
font-family: 'Muli';
background: #0c0907 url(../img/bg.jpg) fixed no-repeat 0 0;
font-size: 16px;
font-weight: normal
}
a {
text-decoration: none;
color: #efe9dd;
-webkit-transition: all .2s ease-out;
-moz-transition: all .2s ease-out;
-o-transition: all .2s ease-out;
transition: all .2s ease-out
}
a:hover { color: #fff }
*:after, *:before, * { box-sizing: border-box }
h1, h2, h3, h4, h5, h6 {
font-family: 'Julius Sans One';
font-weight: normal;
text-transform: uppercase
}
h1 {
color: #8f3e2c;
font-size: 26px
}
h2 {
color: #fff;
font-size: 40px
}
h3 {
color: #8f3e2c;
font-size: 20px
}
h4 {
color: #efe9dd;
font-size: 20px
}
.lead {
color: #fff;
font-size: 16px
}
.big {
color: #fff;
font-size: 36px
}
.container {
width: 1170px;
color: #0c0907;
margin: 0 auto
}
header {
background: #efe9dd;
position: relative;
z-index: 1;
border-radius: 0 0 3px 3px;
padding: 8px 60px;
width: 100%;
min-height: 110px;
position: -webkit-sticky;
position: -moz-sticky;
position: -o-sticky
}
.logo {
position: relative;
width: auto;
height: 93px;
line-height: 33px;
font-family: "Julius Sans One";
font-size: 42px;
color: #000;
text-transform: uppercase;
padding: 15px 0 0 105px;
margin: 0;text-align: center;
display: block;
float: left
}
.logo:before {
background: url(../img/sprite.png) center top;
position: absolute;
left: 0;
top: 0;
content: "";
width: 104px;
height: 93px;
display: block
}
.logo small {
    font-size: 22px;
}
.nav-bar {
list-style: none;
margin: 45px 0 0;
float: right;
padding: 0;
font-family: "Julius Sans One"
}
.nav-bar>li {
float: left;
position: relative
}
.nav-bar a {
color: #000;
font-size: 14px;
position: relative;
padding: 5px 19px;
text-transform: uppercase
}
.nav-bar a:hover { color: #8f3e2c }
.nav-bar a:hover:before {
background: url("../img/sprite.png") no-repeat center -110px;
content: "";
display: block;
height: 30px;
left: 0;
position: absolute;
top: -28px;
width: 100%;
opacity: .3
}
.nav-bar .active a { color: #8f3e2c }
.nav-bar .active:before {
background: url("../img/sprite.png") no-repeat center -110px;
content: "";
display: block;
height: 30px;
left: 0;
position: absolute;
top: -30px;
width: 100%
}
.slider {
width: 100%;
min-height: 295px;
text-align: center
}
.btn-donwload {
background: #5ab00e;
box-shadow: 0 1px 8px rgba(0,0,0,0.6);
text-shadow: 0 1px 3px rgba(0,0,0,0.3);
color: white;
display: table;
margin: 16px auto 0;
padding: 10px 35px 15px 95px;
position: relative;
text-align: left;
border-radius: 3px
}
.btn-donwload:before {
background: url(../img/sprite.png) center -154px;
content: "";
display: block;
height: 38px;
left: 30px;
position: absolute;
top: 16px;
width: 36px
}
.btn-donwload strong {
font-size: 24px;
text-transform: uppercase;
font-weight: normal
}
.btn-donwload em { font-size: 14px }
.btn-donwload:hover {
background: #80e00f;
box-shadow: 0 1px 1px rgba(0,0,0,0.8);
text-shadow: 0 1px 1px rgba(0,0,0,0.1);
margin: 20px auto 0
}
main {
background: #efe9dd;
border-radius: 3px;
width: 100%;
padding: 50px 60px;
display: table
}
.content { margin-bottom: 30px }
.width80, .width70, .width60, .width50, .width40, .width30, .width25, .width20 {
display: inline-block;
float: left
}
.width80 { width: 80% }
.width70 { width: 70% }
.width60 { width: 60% }
.width50 { width: 50% }
.width40 { width: 40% }
.width30 { width: 30% }
.width25 { width: 25% }
.width20 { width: 20% }
article { position: relative }
.row {
clear: both;
display: block;
margin-bottom: 40px;
margin-left: -60px;
margin-right: -60px;
min-height: 105px;
width: auto
}
.bgcolor { background: #c5a481 }
.box {
color: #efe9dd;
font-size: 18px;
padding: 15px 0;
text-align: center
}
.box:last-child { border-right: 0 }
.icon {
background-image: url(../img/sprite.png);
margin: 0 auto;
width: 52px;
height: 52px;
display: block
}
.icon-convert { background-position: center -199px }
.icon-organize { background-position: center -252px }
.icon-load { background-position: center -306px }
.icon-syncro { background-position: center -358px }
.blog article:nth-child(odd) { padding-right: 30px }
.blog article:nth-child(even) { padding-left: 30px }
.blog a { color: #8f3e2c }
.social-bar {
display: table;
list-style: none;
margin: 0 auto;
padding: 0
}
.social-bar li { display: inline-block }
.social-bar a {
background-image: url(../img/sprite.png);
text-indent: -9999px;
width: 75px;
height: 75px;
opacity: .8;
display: block
}
.social-bar a.facebook { background-position: center -415px }
.social-bar a.google { background-position: center -491px }
.social-bar a.twitter { background-position: center -574px }
.social-bar a:hover { opacity: 1 }
footer {
color: #efe9dd;
text-align: center;
padding: 46px 56px
}
.base:after {
background-image: url(../img/footer-books.png);
background-position: center top;
background-repeat: no-repeat;
border-top: 1px solid #efe9dd;
bottom: 0;
content: "";
height: 102px;
left: 0;
position: absolute;
width: 100%
}
.base {
position: relative;
padding: 0 0 102px 0
}
.mapa iframe {
width:100%
}
@font-face {
font-family: 'Muli';
font-style: normal;
font-weight: 400;
src: local('Muli'), url(https://fonts.gstatic.com/s/muli/v7/z6c3Zzm51I2zB_Gi7146Bg.woff2) format('woff2')
}
@font-face {
font-family: 'Julius Sans One';
font-style: normal;
font-weight: 400;
src: local('Julius Sans One'), local('JuliusSansOne-Regular'), url(https://fonts.gstatic.com/s/juliussansone/v5/iU65JP9acQHPDLkdalCF7iJccsb45t3MJKcv5BJtrIs.woff2) format('woff2')
}
#btn-area[type="checkbox"], label.btn-area { display: none }
label.btn-area { display: none }
.sticky {
border-top: 0 none;
left: auto;
position: fixed;
right: auto;
top: 0;
width: 1170px;
z-index: 100
}
header.sticky {
background: white;
box-shadow: 0 1px 28px rgba(0,0,0,0.3);
min-height: 70px;
padding: 2px 60px
}
header.sticky .logo:before {
background-size: 100% auto;
height: 50px;
width: 50px
}
header.sticky .logo {
    font-size: 22px;
    height: 50px;
    line-height: 22px;
    margin-top: 11px;
    padding: 0 0 0 55px;
}
header.sticky .logo small {
    font-size: 12px;
}
header.sticky .nav-bar { margin-top: 35px }
.download { font-weight: 700 }
header.sticky .download {
background: #5ab00e;
border-radius: 2px;
box-shadow: 0 1px 1px rgba(0,0,0,0.2);
color: white;
padding-bottom: 3px
}
.nav-bar a.download {
background: #5ab00e;
border-radius: 2px;
box-shadow: 0 1px 1px rgba(0,0,0,0.2);
color: white;
border-bottom: 0;
padding-bottom: 6px;
padding-top: 8px
}
.nav-bar a.download:hover:before { display: none }
.articles .slider, .article .slider, .manuales .slider { min-height: 93px }
.entry {
clear: both;
display: block;
float: left;
padding: 20px;
box-shadow: 0 0 1px 1px rgba(255,255,255,0.8);
margin-top: 30px;
height: 270px;
margin-bottom: 0
}
.thu {
float: left;
margin: 0 18px 13px 0
}
.entry h3 { margin-top: 0 }
.entry p { color: #0c0907 }
.entry:hover { background: rgba(255,255,255,0.3) }
.entry:hover h3, .entry:hover p { color: #8f3e2c }
.pagination-bar {
display: table;
list-style: none;
margin: 0 auto;
padding: 30px 0 0
}
.pagination-bar li { display: inline-block }
.pagination-bar a {
background: rgba(255,255,255,0.3);
border: 1px solid rgba(255,255,255,0.8);
border-radius: 50px;
color: black;
display: block;
height: 50px;
line-height: 50px;
text-align: center;
width: 50px;
color: #8f3e2c;
font-family: "Julius Sans One"
}
.pagination-bar a:hover {
background: rgba(255,255,255,0.8);
border: 1px solid rgba(255,255,255,1);
color: #0c0907
}
.article h2 { color: #0c0907 }
.article article {
padding-right: 50px;
margin-top: 10px
}
aside h4 {
color: #8f3e2c;
font-family: "Julius Sans One"
}
.large {
float: left;
margin: 20px 30px 20px 0
}
.side-bar {
font-family: "Muli";
list-style: none;
margin: 0;
padding: 0
}
.side-bar>li {
clear: both;
display: block;
float: left;
margin-bottom: 15px;
position: relative;
width: 100%
}
.side-bar>li:after {
background: rgba(0,0,0,0.2) url(../img/sprite.png) center -711px;
border-radius: 200px;
content: "";
display: block;
height: 20px;
left: 0;
position: absolute;
top: 3px;
width: 20px
}
.side-bar a {
border-bottom: 1px solid rgba(0,0,0,0.2);
color: #0c0907;
display: block;
float: left;
font-size: 12px;
text-transform: uppercase;
line-height: 16px;
padding: 5px 0 8px 25px;
position: relative;
width: 100%
}
.side-bar a:hover { color: #8f3e2c }
.side-bar>li:hover:after { background-color: #8f3e2c }
.list {
background: rgba(255,255,255,0.3);
color: #8f3e2c;
font-size: 13px;
list-style: square;
padding: 20px 30px
}
blockquote {
background: #f9f9f9;
border-left: 7px solid #8f3e2c;
font-style: italic;
margin: 1.5em 10px 1.5em 0;
padding: 0;
quotes: "\201C""\201D""\2018""\2019";
font-family: "Source Sans Pro", georgia, sans-serif
}
blockquote:before {
color: #8f3e2c;
content: open-quote;
font-size: 6em;
line-height: 1em;
margin-right: .25em;
vertical-align: -0.5em
}
blockquote p { display: inline }
.items {
clear: both;
float: left;
padding-top: 20px;
width: 100%
}
.item {
border: 1px solid rgba(255,255,255,0.8);
clear: both;
display: block;
border-radius: 3px;
float: left;
height: 100px;
padding: 20px 20px 18px 45px;
position: relative;
width: 100%
}
.item:hover { background: rgba(255,255,255,0.3) }
.item h3 {
font-size: 16px;
margin: 0
}
.manuales article:nth-child(3n+2) {
padding-right: 15px;
padding-left: 15px
}
.manuales article.width30 {
margin-bottom: 15px;
width: calc(36% - 30px)
}
.item:after {
background: #fff url(../img/sprite.png) center -736px;
border-radius: 40px;
content: "";
display: block;
height: 40px;
left: -10px;
position: absolute;
top: -10px;
width: 40px
}
@media(max-width:1200px) {
.container { width: 980px }
.sticky { width: 980px }
.responsive {
height: auto;
width: 100%
}
.article article.content { font-size: 14px }
.side-bar>li:after { display: none }
.side-bar a { padding: 5px 0 8px 0 }
}
@media(min-width:992px) and (max-width:1200px) {
figure.width40 {
display: block;
margin-right: -60px;
position: absolute;
right: 0;
overflow: hidden
}
figure .responsive { width: 470px }
}
@media(max-width:992px) {
.container { width: 760px }
.sticky { width: 760px }
header { min-height: 90px }
.logo:before {
background-size: 100% auto;
height: 80px;
width: 80px
}
.logo {
font-size: 32px;
height: 80px;
line-height: 80px;
padding: 0 0 0 80px
}
#btn-area[type="checkbox"], label.btn-area { display: none }
#area { display: none }
label.btn-area {
background: #fff url(../img/sprite.png) center -655px no-repeat;
border: 1px solid rgba(0,0,0,0.1);
border-radius: 2px;
color: #fff;
cursor: pointer;
display: block;
float: right;
height: 55px;
margin: 8px 0 0;
position: static;
width: 60px;
z-index: 9999
}
#btn-area[type="checkbox"]:checked ~ nav#area {
background: #fff;
display: block;
left: 0;
position: absolute;
top: 88px;
width: 100%;
border-top: 1px solid rgba(0,0,0,0.1);
box-shadow: 0 8px 8px rgba(0,0,0,0.6)
}
.nav-bar {
display: table;
float: none;
margin: 50px auto 0;
padding-bottom: 30px
}
.nav-bar a { padding: 5px }
.content.width60 { width: 100% }
figure.width40 { width: 100% }
.icon {
transform: scale(0.6);
-webkit-transform: scale(0.6);
-moz-transform: scale(0.6);
-o-transform: scale(0.6)
}
header.sticky #btn-area[type="checkbox"]:checked ~ nav#area { top: 68px }
header.sticky .nav-bar { padding-bottom: 20px }
.articles article { width: 100% }
.entry { height: auto }
.articles article:nth-child(odd) { padding-right: 0 }
.articles article:nth-child(even) { padding-left: 0 }
.articles article.content { margin-bottom: 0 }
.side-bar a {
font-size: 10px;
padding: 4px 0 5px
}
.large {
margin: 20px 0;
width: 100%;
height: auto
}
.manuales article:nth-child(even) { margin-left: 15px }
.manuales article.width30 {
margin-bottom: 15px;
width: calc(50% - 15px)
}
.manuales article:nth-child(3n+2) {
padding-left: 0;
padding-right: 0
}
.item { height: 80px }
.item h3 { font-size: 14px }
}
@media(max-width:768px) {
.container { width: 100% }
.sticky { width: 100% }
.slider h2 {
padding-left: 25px;
padding-right: 25px;
margin-bottom: 0
}
.slider .lead {
padding-left: 25px;
padding-right: 25px
}
.blog .width50 { width: 100% }
.blog article:nth-child(odd) { padding-right: 0 }
.blog article:nth-child(even) { padding-left: 0 }
header, main { border-radius: 0 }
h2 { font-size: 34px }
.article article.content, .article aside { width: 100% }
.article article.content { padding-right: 0 }
.side-bar a { font-size: 12px }
.manuales article:nth-child(2n) { margin-left: 0 }
.manuales article.width30 { width: 100% }
.manuales article:nth-child(3n+2) {
padding-right: 0;
padding-left: 0
}
.item { height: auto }
.item h3 { font-size: 16px }
}
@media(max-width:480px) {
header { padding: 8px 30px }
.nav-bar>li {
margin: 0 5%;
padding: 10px 0;
text-align: center;
width: 90%
}
.nav-bar a {
border-bottom: 1px solid;
display: block;
margin: 0;
width: 100%
}
.nav-bar .active:before {
position: absolute;
top: 5px;
width: 50%
}
.nav-bar a:hover:before {
position: absolute;
top: 5px;
width: 50%;
top: -4px;
left: 0
}
h2 { font-size: 32px }
main { padding: 30px }
.btn-donwload {
margin: 16px auto;
padding: 8px 15px 8px 58px
}
.btn-donwload:before {
left: 12px;
position: absolute;
top: 10px;
width: 36px
}
.btn-donwload strong {
font-size: 20px;
letter-spacing: -1px
}
.btn-donwload em { font-size: 12px }
.row {
display: table;
margin: 0;
min-height: auto;
width: 100%
}
.box.width25 { width: 50% }
.box.width25:nth-child(2) {
border-bottom: 1px solid #0d0907;
border-right: 0
}
.box.width25:nth-child(1) { border-bottom: 1px solid #0d0907 }
footer { padding: 30px 0 }
.base { padding: 0 30px 102px }
.legal { padding: 0 30px }
.social-bar a {
transform: scale(0.6);
-webkit-transform: scale(0.6);
-moz-transform: scale(0.6);
-o-transform: scale(0.6);
height: 73px;
width: 73px
}
.nav-bar a.download {
padding-bottom: 10px;
padding-top: 10px
}
.side-bar a { font-size: 10px }
.item h3 { font-size: 14px }
}
@media(max-width:380px) {
header.sticky { padding: 2px 30px }
.logo:before {
height: 50px;
width: 50px
}
.logo {
font-size: 22px;
height: 50px;
margin-top: 13px;
line-height: 50px;
padding: 0 0 0 55px
}
.btn-donwload:hover { margin: 16px auto }
.entry, .entry:hover {
box-shadow: none;
background: 0;
padding: 0
}
.pagination-bar a {
height: 30px;
line-height: 30px;
width: 30px
}
}