html{
    margin: 0;
    padding: 0;
    height: 100%;
}

body{
    height: 100%;
    font-family: "Helvetica Neue", "Liberation Sans", sans-serif;
    font-size: 1em;
    background-color: rgb(230,230,230);
    margin: 0;
    padding: 0;

    /* min-height: 100%; */
    /* overflow-x: hidden; */
}

#everythingVisible {
    width: 100%;
    min-height: 100%;
    position: relative;
    overflow-x: hidden;
    /* height: 100%; */
}

a {
    color: rgb(35, 67, 88);
    text-decoration: none;
}

i {
    filter: opacity(30%);
}

h1 {
    color: rgb(35, 67, 88);
}

a:hover {
    filter: brightness(60%);
}

a:visited {
    filter: blur(5px);
}

header{
    background-color: rgb(230, 230, 230);
    width: 100%;
    height: 4rem;
    padding: 1rem;
}

.headerContents .is-menu form{
    left: initial;
}

header .portada {
    height: 1.2rem;
}

#headerCrown{
    width: 100%;
    height: 0.6rem;
    background-color: white;
    padding: 0;
    margin: -0.7rem 0 0 -1rem;
    border-bottom-width: 0.1rem;
    border-bottom-color: rgb(17, 172, 240);
    border-bottom-style: solid;
}

.articulo{
    margin: 0 auto;
    /* max-width: 120ch; */
    /* padding: 0.5rem; */
    min-height: 70vh;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
}

#articleContent{
    margin: auto;
    width: 100vw;
    padding: 0 0 5rem 0;
}

#articleContent > h1 {
    padding: 0 1rem;
}

#articleContent > p {
    padding: 0 1rem;
}

.articulo-front{
    padding: 0.5rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    /* background-color: rgb(230,230,230); */
}

#logoFrontImage {
    max-width: 100ch;
    margin: 0 auto;
    padding: 0 1rem;
}

.frontList {
    margin: 1rem;
    /* flex: 1; */
    flex-basis: 20rem;
    flex-shrink: 1;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.frontList h2{
    position: relative;
    text-align: center;
    transition: all ease-in 0.2s;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: rgb(35,67,88);
    box-sizing: border-box;
    padding: 0.1rem 0.5rem;
    border-radius: 4px;
}

.frontList h2:hover{
    background-color: rgb(235,235,235);
    border-bottom-width: 0.6rem;
    border-bottom-style: inset;
    border-bottom-color: rgb(16,134,218);
    box-sizing: border-box;
    transition: all ease-out 0.1s;
    transform: translate(0,-0.6rem);
}

.frontList > a{
    filter:unset;
    display: block;
    position: relative;
    height: 1.2rem;
}

.frontArticleList{
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
    justify-content: center;
    margin: 3rem 0 0 0;
}

.frontNewsList{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
    margin: 3rem 0 0 0;
}

.frontNews{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 0 1.3rem 0;
    width: 100%;
    background-color: rgb(235,235,235);
    border-radius: 4px;
}

.frontNews h3{
    margin: 0;
}
.frontNews p{
    margin: 0.5rem 0;
    font-size: 0.8rem;
}

.frontArticle h3{
    margin: 0;
    width: 98%;
}

.frontArticle p{
    margin: 0.5rem 0;
    font-size: 0.8rem;
    width: 98%;
}


.frontArticle{
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 150px;
    text-align: center;
    transition: all cubic-bezier(0.19, 1, 0.22, 1) 0.3s;
    background-color: rgb(235, 235, 235);
    border-radius: 4px;
    height: 100%;
}

.frontArticle:hover{
    transform: scale(1.02);
    filter: brightness(105%);
}

.frontArticleLink {
    box-sizing: border-box;
    margin: 0.4rem;
}

.frontNewsLink {
    box-sizing: border-box;
    margin: 0.4rem;
    width: 100%;
}

.frontArticleLink:hover{
    filter: brightness(105%);
}

.frontNewsLink:hover{
    filter: brightness(105%);
}

.frontArticle .wp-post-image{
    width: 100%;
    object-fit: contain;
}

.articleMainTitle{
    text-align: center;
    width: 100%;
}

.encabezado {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
    height: 5.5rem;
}

.encabezado li {
    height: 100%;
    position: relative;
    transition: all ease-in 0.2s;
    border-bottom-width: 0;
    border-bottom-style: solid;
    border-bottom-color: rgb(35,67,88);
    box-sizing: border-box;
}

.encabezado li:hover {
    background-color: rgb(200,200,200);
    border-bottom-width: 0.6rem;
    border-bottom-style: inset;
    border-bottom-color: rgb(16,134,218);
    box-sizing: border-box;
    transition: all ease-out 0.1s;
}

.encabezado li a {
    padding: .25rem 1rem;
    /* height: 100%; */
    height: 3rem;
    display: block;
    position: relative;
    top: 50%;
    transform: translate(0, -15%);
}

.encabezado li .sub-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translate(-50%, 0);
    background-color: whitesmoke;
    box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.1);
    margin: 0;
    padding: 0;
    list-style-type: none;
    min-width: 120%;
    z-index: 1000;
}

.encabezado li .sub-menu a {
    padding: .5rem;
    text-align: center;
    display: block;
}

.encabezado .menu-item-has-children:hover .sub-menu{
    display: block;
}

.headerLogoAndMenues{
    /* display: flex;
    justify-content:space-between;
    align-items: center;
    
    max-width: 80%; */
    height: 100%;
    max-width: 90%;
}

.headerContents {
    display: flex;
    justify-content: right;
    align-items: center;
    height: 100%;
}

.logoLink:hover {
    filter: brightness(110%);
    position:absolute;
    margin: 0;
}

.logo-grafico {
    height: 4rem;
    position: absolute;
    margin: 0.5rem 3rem;
}

.archiveLink {
    display: inline-block;
    color: pink;
}

#archiveList{
    margin: 0 auto;
    min-height: 60vh;
}

.archiveCard{
    display: flex;
    flex-flow: row;
    padding: 0.5rem;
    margin-bottom: 1rem;
    background-color: white;
    align-items: center;
    max-width: 80ch;
    margin: 0 auto 1.5rem;
}

.archiveCard:hover {
    filter: none;
    box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.1);
}

.archiveCardTextContainer {
    padding-left: 1rem;
}

.archiveCardTextContainer > a {
    color: black;
}

.archiveCardTextContainer > a > p {
    margin: 0 1rem 1rem 0;
}

.archiveCardHeaderContainer h3 {
    margin: 1rem inherit;
    padding-right: 1rem;
}

.archiveCardHeaderContainer p {
    padding-top: 0.2rem;
    margin: 1rem inherit;
    padding-right: 0.5rem;
    font-size: 0.9rem;
    color: dimgrey;
}
.archiveCardOtherLinks {
    padding-right: 0.3rem;
}

.archiveCardHeaderContainer {
    display: flex;
    align-items: center;
}

.videoContainerFullColumn {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
}

.videoIframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

#videoArticle {
    display: flex;
    /*position: relative;
    left: 50%;
    transform: translate(-50%,0);*/
    align-items: stretch;
    justify-content: center;
    flex-wrap: wrap;
    margin: 0 auto;
}

#singleVideoElement {
    margin: 0;
    /* max-height: calc(100vh - 14.8rem); */
    width: min(100vw, 80rem);
}

/* #singleVideoElement p{
    padding: 0 1rem;
} */

#singleVideoElement video {
    margin: 0;
    /* max-height: calc(100vh - 14.8rem); */
    max-width: 100%;
}

.singleVideoText {
    max-width: 80ch;
    margin: 0 auto;
}

.singleVideoText > *{
    padding: 0 1rem;
}

.singleVideoText > * > h1 {
    text-align: center;
}



#singlePicArticle {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    margin: auto;
}

#singlePicText {
    margin: 0 2rem;
    max-width: 60ch;
    flex-basis: 40ch;
    flex-grow: 1;
}

#mainPic{
    transition: transform, width 0.8s cubic-bezier(0.19, 1, 0.22, 1);
    margin: 0 auto;
    cursor: pointer;
    width: min(100vw, 50rem);
}

#mainPic.maximized{
    transition: transform, width 0.8s cubic-bezier(0.19, 1, 0.22, 1);
    object-fit: contain;
    position: relative;
    transform: translate(-50%, -50%);
    left: 50%;
    top: 50%;
    height: 98vh;
    width: 98%;
    cursor: pointer;
}

#mainPicContainer{
    background-color: rgba(0, 0, 0, 0);
}

#mainPicContainer.maximized{
    transition: background-color 0.3s cubic-bezier(0.19, 1, 0.22, 1), transform, width, height 0.8s cubic-bezier(0.19, 1, 0.22, 1);
    background-color: rgba(0, 0, 0, 0.75);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
}

.halfColumnPic{
    width: 40%;
}

.halfColumnText {
    width: 58%;
}

.picWithSideTextContainer {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.thumbnailPic {
    cursor: pointer;
    object-fit: cover;
    height: 8rem;
    width: 8rem;
    border-radius: 50%;
}

#footerSpace {
    width: 100%;
    height: 10.8rem;
}
#footerBorder {
    z-index: 999;
    position: absolute;
    bottom: 0;
    color: white;
    background-color: white;
    width: 100%;
    height: 10rem;
    left: 0;
    right: 0;
    display: flex;
    justify-content: end;
    align-items: center;
    margin: 0;
}
#footerContainer {
    z-index: 1000;
    position: absolute;
    bottom: 0;
    color: white;
    background-color: rgb(29, 61, 80);
    width: 100%;
    height: 8rem;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0;
}

.footerContent {
    max-width: 40ch;
    font-size: min(0.8rem, 2.9vw);
    text-align: justify;
    margin: 1rem 0.6rem;
    transition: all ease-out 0.12s;
    outline: 8px solid rgba(29,61,80,0);
    border-radius: 3.5px;
    outline-offset: 6px;
    padding: 0.4rem;
}

.footerContent * {
    margin: 0;
    color: rgb(95, 152, 166);
}

.footerContent a:hover{
    filter: unset;
}

.footerContent:hover {
    outline: 1px solid rgb(49, 97, 125);
    outline-offset: 0px;
}

.socialMedia{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    width: 80vw;
}

.socialIcon{
    margin: min(1rem, 0.7vw);
    width: min(1.8rem, 5.2vw);
}

.socialIconImage{
    width: 100%;
}

/* #footerContainer *{
    cursor: default;
    margin: 2rem;
} */

#footerLogo {
    cursor: default;
    margin: min(2rem, 2vw);
    display: flex;
    flex-flow: column;
    justify-content: start;
    align-items: center;
}

#footerLogo *{
    color: white;
    margin: 0;
    -webkit-user-select: none; /* Safari */        
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE10+/Edge */
    user-select: none; /* Standard */
}

#footerLogo h1{
    font-size: 2rem;
    letter-spacing: -0.05rem;
    /* margin-left: 1rem; */
}

#footerLogo p{
    font-size: 1.2rem;
    letter-spacing: 1rem;
    margin-left: 1.1rem;
    margin-top: -0.4rem;
}

#backgroundContainer{
    overflow: hidden;
    position: absolute;
    bottom: 9.5rem;
    right: 0;
    z-index: -1;
}

#backgroundImage{
    position: relative;
    width: min(110vw,140vh);
}

.tileContainer{
    display: flex;
    width: min(100%, 80rem);
    justify-content: center;
    align-items: stretch;
    flex-wrap: wrap;
    margin: 0 auto;
}

.tileLink{
    display: flex;
flex-flow: column;
align-items: center;
margin: 1rem;
flex-basis: 20ch;
background-color: white;
color: black;
max-width: 20%;
transition: cubic-bezier(0.19, 1, 0.22, 1) 0.3s;
min-width: 15ch;
border-radius: 6px;
}

.tileLink p{
    flex-grow: 1;
    text-align: center;
    margin: 0.6rem;
}

.tileLink:hover{
    transform: scale(1.07);
    filter: none;
}

.tilePic{
    width: 100%;
}

.paginateSection {
    margin: 1.5rem auto;
    max-width: 80ch;
}