h1 { font-size: 3.6em }
h2 { font-size: 3.0em }
h3 { font-size: 2.4em }
h4 { font-size: 1.8em }
h5 { font-size: 1.4em }
h6 { font-size: 1.0em }
p, label, fieldset { font-size: 1.0em }

h1, h2, h3, h4, h5, h6, p, label, fieldset, a {
    color: inherit;
    font-family: inherit;
    line-height: inherit;
}
h1, h2, h3, h4, h5, h6, p, label { margin: 1% 0 }

aside { padding-top: 20px; }
aside ul { width: 90% }
aside ul li {
    display: block;
    padding: 7px 0;
    position: relative;
    text-indent: 10px;
}
aside ul li a { display: block; font-size: 1.2em }
aside ul li ul {
    display: none;
    position: absolute;
    left: 100%;
    top: 0;
    transition: 0.5s linear;
}
aside ul li:hover ul { display: block }

fieldset {
    padding: 1% 0;
}
label {
    font-size: 1.2em;
    font-family: inherit;
}
input, select, textarea {
    background-color: inherit;
    border-radius: 3px;
    color: inherit;
    font-size: inherit;
    font-family: inherit;
    line-height: 1.2em;
    padding: 10px 0;
    width: 99%;
}
select { text-indent: initial }
input[type='radio'], input[type='checkbox'] { display: inline-block; width: 5% }
label.check { display: inline-block; width: 90% }
input.med, select.med, textarea.med { width: 49% }
input.peq, select.peq, textarea.peq { width: 24% }

.paginas {
    font-size: 1.2em;
    padding: 20px 0;
    text-align: left;
    width: 100%;
}
.paginas span {
    padding: 0 1%;
}
.paginas span.pag_selec { font-weight: bold; text-decoration: underline }

.btn {
    background-color: #7C8C9C;
    border: 0;
    border-radius: 20px;
    color: #FFFFFF;
    cursor: pointer;
    display: inline-block;
    font-size: 1.2em;
    font-weight: 600;
    line-height: 18px;
    margin: 8px 0;
    padding-left: 20px;
    padding-right: 50px;
    position: relative;
    transition: 0.5s linear;
}
.btn:hover { background-color: #002255 }
.btn svg {
    fill: #FFFFFF;
    float: left;
    height: 18px;
    margin: 8px 5px 0 0;
    transition: 0.5s linear;
    width: 18px;
}
img.svg { height: 0px }

[class*="col-"] { box-sizing: border-box; padding: 1%; width: 100%; }
@media only screen and (min-width: 480px) {
    [class*="col-"] { float: left; }
    .col-m-1 { width: 8.33% }
    .col-m-2 { width: 16.66% }
    .col-m-3 { width: 25% }
    .col-m-4 { width: 33.33% }
    .col-m-5 { width: 41.66% }
    .col-m-6 { width: 50% }
    .col-m-7 { width: 58.33% }
    .col-m-8 { width: 66.66% }
    .col-m-9 { width: 75% }
    .col-m-10 { width: 83.33% }
    .col-m-11 { width: 91.66% }
    .col-m-12 { width: 100% }
}
@media only screen and (min-width: 980px) {
    .col-1 { width: 8.33% }
    .col-2 { width: 16.66% }
    .col-3 { width: 25% }
    .col-4 { width: 33.33% }
    .col-5 { width: 41.66% }
    .col-6 { width: 50% }
    .col-7 { width: 58.33% }
    .col-8 { width: 66.66% }
    .col-9 { width: 75% }
    .col-10 { width: 83.33% }
    .col-11 { width: 91.66% }
    .col-12 { width: 100% }
}

.clear { clear: both }
.display_none { display: none }
.display_block { display: block }
.left { float: left }
.right { float: right }
.float_none { float: none }

.thumbnail {
    display: block;
    float: none;
    height: auto;
    overflow: hidden;
    padding-bottom: 65%;
    position: relative;
    width: 100%
}
.thumbnail img {
    left: 50%;
    max-height: 110%;
    min-height: 75%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    transition: all .2s;
    width: auto
}
.thumbnail img:hover { max-height: 130% }
.thumbnail.portrait img { max-width: 110% }
.thumbnail.portrait img:hover { max-width: 130% }