@import "small.css" screen and (max-width: 600px);
@import "xga.css" screen and (min-width: 601px) and (max-width: 1024px);
@import "hd1080.css" screen and (min-width: 1025px);


* {
    /*border: 1px solid #000000;*/
    box-sizing: border-box;
}

html {
    margin: 0;
    padding: 0;
    /*background-color: #658DC6;*/
}

body {
    background-color: #B5C7D3;
    margin: 0;
    padding: 0;
}

header {
    margin: 0;
}

main {
    background: #fff;
}

div.principal {
    background-color: #0F4C81;
    color: #F9E1C8;
    overflow: hidden;
    display: flex;
}

div.principal h2 {
}

/*Header Navigation section*/

div.sub {
    background-color: #658DC6;
    color: #000000;
    overflow: hidden;
}

nav.template ol {
    display: grid;
    grid-template-columns: 100fr;
}

nav.aside ul {
    display: grid;
    grid-template-columns: 100fr;
}

.sub > nav > ol, .sub > nav > ul {
    /*margin: .75em 0;*/
    /*padding: 0 .75em;*/

    margin: 10px;
    padding: 0;
}

li.sub {
    float: left;
    display: block;
    margin: 1px 0 0;
}

li.sub > a {
    background-color: #B5C7D3;
    display: block;
    color: black;
    font-size: 1rem;
    text-decoration: none;
    /*font-weight: bold;*/
    padding: 1rem;
}

li.sub > a:visited {
    color: black;
}

li.sub > a:hover {
    background-color: #F9E1C8;
    color: #000000;
}

li.aside {
    margin: 1px 0 0;
    list-style: none;
    color: #F9E1C8;
    text-align: right;
}

li.aside > a {
    background-color: #0F4C81;
    display: block;
    color: #FFFFFF;
    text-decoration: none;
    font-size: 1rem;
    /*font-weight: bold;*/
    padding: 1rem;
    font-family: "DejaVu Sans", sans-serif;
}

li.aside > a:hover {
    background-color: #84898C;
    color: #FFFFFF;

}

li > button{
    background-color: #0F4C81;
    color: #FFFFFF;
    text-decoration: none;
    font-size: 1rem;
    /*font-weight: bold;*/
    padding: 5px;
    width: 100%;
    border: 0;
    text-align: right;
    font-family: "DejaVu Sans", sans-serif;
}

li > button:hover {
    background-color: #84898C;
    color: #FFFFFF;

}


/**/

/*Head Section*/
section.template {
    float: left;
}

ol.template, ul.template {
    margin: 0;
}

li.template > a {
    color: #A42875;
}

li.template > a:hover {
    background-color: #A42875;
    color: #FFFFFF;
}


aside.template {
    width: auto;
    display: block;
}

.palette {
    display: flex;
}

.color {
    float: left;
    width: 10px;
    height: 10px;
    color: transparent;
}

.CF3D5AD {
    background-color: #F3D5AD;
    border: 1px transparent solid;
}

.CF5B895 {
    background-color: #F5B895;
    border: 1px transparent solid;
}

.CA58D7F {
    background-color: #A58D7F;
    border: 1px transparent solid;
}

.C84898C {
    background-color: #84898C;
    border: 1px transparent solid;
}

.C658DC6 {
    background-color: #658DC6;
    border: 1px transparent solid;
}

.CB5C7D3 {
    background-color: #B5C7D3;
    border: 1px transparent solid;
}

.C0F4C81 {
    border: 1px #FFFFFF solid;
}

.C6A1A4C {
    background-color: #6A1A4C;
    border: 1px transparent solid;
}


/*Footer section*/
footer {
    background-color: #658DC6;
}

footer nav {
}

footer ul {
    display: flex;
    list-style: none;
}

footer li {
    flex-grow: 1;
    border: 0;
    background-color: #658DC6;
    text-align: center;
    margin: .1em;
}

footer li:hover{
    background-color: #B5C7D3;
}

footer li a {
    color: #000000;
    display: block;
    text-decoration: none;
    font-size: 1rem;
    padding: 1rem;
}