*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    outline:none;
    border:0;
    font-family: 'Roboto', sans-serif;
}

ul, ol {
    margin-left:20px;
}

h3 {
    text-align:center;
    line-height:3em;
    font-weight:normal;
}

body {
    background: url(images/texture1.png);
    background-attachment:fixed;
}

aside {
    display:flex;
    width:35%;
    flex-flow:column;
}

main {
    display:flex;
    flex-flow:column;
    flex: auto;
    background: whitesmoke;
    border-radius:40px 0 0 0;
    padding:20px 5px;
    justify-content:space-between;
    box-shadow: inset 5px 5px 3px 1px gray;
}

.row{
    display:flex;
    flex-flow: row nowrap;
    flex:auto;
    justify-content:space-between;
    overflow:hidden;
}

.page {
    display:flex;
    flex-flow:column nowrap;
    align-items:stretch;
    align-content:stretch;
    justify-content:space-around
    padding:0;
    margin:20px auto;
    width:21cm;
    height:29.7cm;
    border:1px solid lightgray;
    background: linear-gradient(#9fafaf,#1f2f2f);
    box-shadow:3px 5px 5px gray;
}

.container, .card {
    margin:10px;
    padding:10px;
}

.card {
    background:whitesmoke;
    padding:0px 5px 40px 5px;
    margin: 10px 20px;
    border:1px solid lightgray;
    border-radius:10px 40px;

}
.card-body {
    font-size:1.0em;
}

table {
    border-collapse:collapse;
    width:100%;
}

td  {
    white-space:nowrap;
    overflow:hidden;
    padding:10px 5px;
}

table tr {
    border-bottom:1px dotted lightgray;
    border-radius:0.4em;
}

table tr td:first-child {
    width:90px;;
}

.about-text {
    text-align:justify;
}

.foto {
    display:flex;
    border-radius:50%;
    border:5px solid lightgray;
}

.titulo {
    text-align:center;
    font-weight:400;
    font-size:3em;
    line-height:1.5em;
    color:white;
    background:black;
}
.oficio {
    font-size:2em;
    font-weight:bold;
    padding-top:40px;
}

.cabecera {
    display:flex;
    text-align:center;
    flex-flow:column nowrap;
    flex-grow:inherit;
}

.acerca {
    text-align:center;
    border-radius:10px 40px;
}

.ref-title {
    text-align:center;
    font-weight:bold;
    line-height:1.5em;
    display:block;
}

footer, .footer {
    display:flex;
    text-align:center;
    align-self:center;
}

.copyright {
    display:block;
    text-align:center;
    font-style:italic;

}

.icon-text {
    position:relative;
    top:4px;
    right:5px;
}

.unstyled {
    list-style:none;
 }

.material-icons {
    font-size:18px !important;
}

a abbr {
    text-decoration:none;
}

details summary  {
    list-style-type:none;
    cursor:pointer;
}

details summary::-webkit-details-marker {
    display:none;
}

details summary::marker {
    display:none;
}

details summary::after{
    top:0.5em;
    position:relative;
    content:url(images/arrow_drop_down_black_24dp.svg);
}

details[open] summary::after{
    content:url(images/arrow_drop_up_black_24dp.svg);
}

.summary-list {
    margin:0;
    font-size:0.9em;
    position: absolute;
    z-index:1;
    background:whitesmoke;
    padding:20px 10px 20px 30px;
    border:1px solid lightgray;
    border-radius:10px;
 }

.reload {
    display:inline-block;
    padding:0;
    margin:0;
    cursor:pointer;
    width:32px;
    height:32px;
    position:absolute;
    opacity:0.5;
    text-align:center;

}
.btn:hover {
    background:#c0F0F0;
}
.btn:active {
   background: #ccc;
}
.success {
    background:#2ED95B;
}

.modal {
    position:fixed;
    left:0;
    top:0;
    width:100%;
    height:100%;
    z-index:2;
    background-color:rgba(0,0,0,0.4);
    overflow:auto;
}

.modal-content {
    padding:10px 20px 20px 20px;
    width:80%;
    margin: 20% auto;
    background:whitesmoke;
    border:1px solid lightgray;
}
.modal-header{
    text-align:right;
}
.modal-header button{
    padding:0.05em 0.3em;
}

.close {
    font-size:30px;
    text-align:right;
}


@media only print {
    .page {
        width:100%;
        height:auto;
        margin:0;
        padding:0;
    }

    .page, main, .card {
        border:0;
        box-shadow:unset;
    }

    .foto{
        width:150px;
    }

    main {
        justify-content:flex-start;
    }
}