/* Configuramos el color del footer */
.footer .grid-child {
  display: block;
}

.footer {
  background: rgba(178, 31, 119, 1); /* Color corporativo */
}

.footer > div { 
  text-align: center; 
} 

.container-header .container-nav { /* Referido solo a la position "Menu", alias .container-nav */
/*Se reduce padding predefinido*/
  padding: .2em; 
/* Elementos con tamaño dinámico: 
https://stackoverflow.com/questions/4684304/how-can-i-resize-an-image-dynamically-with-css-as-the-browser-width-height-chang
    height: auto;
    width: auto;
    max-width: 100vh;
    position: relative;
    z-index: 10;
    */
    margin-bottom: 30px;
    box-shadow: 0 5px 5px rgba(0, 0, 0, 0.03) inset;
}

.container-header { /* Afecta a todo el Header */
    background: rgba(178, 31, 119, 1);
    height: 82px;
}

.container-topbar{ /* posicion en la que se encuentra el language switcher: topbar. */
    padding: .2em; 
    background: white;
}

/* Landing page, componente de jomsocial que incluye imagen y autenticación (cover & actions) */
.joms-landing {
	margin: -5px 0px 52px !important;
}

.joms-landing__cover {
	max-height: 60vh !important;
	width: auto;
}

.joms-landing__action {
    background: #fff;
    padding: 2px;
}

/* Language Switcher, adaptar la visualización */

.mod-languages {
  display: flex;
  justify-content: right;
  /*
  border: 1px solid #ccc;
  margin-left: 0px;
  margin-right: 0px;
  padding: 0px;
  */
}

/* juntamos las banderas eliminando el padding */
div.mod-languages a {
  padding: 0;
  text-decoration: none;
}

/* Customize Banner Size vs Screen Size*/
/* CLASSIC BANNER */
/*
.container-header {   
    height: max(100px, 50vh); #by default is 50vh in Cassiopeia
}

@media (min-width: 200px) {
    .container-header {   
        height: max(100px, 6vh);
    }
}

@media (min-width: 1366px) {
    .container-header {   
        height: max(100px, 10vh);
    }
}
*/

/*
Imagen con tamaño dinámico
https://stackoverflow.com/questions/4684304/how-can-i-resize-an-image-dynamically-with-css-as-the-browser-width-height-chang

.MDDIBanner-svg {
.MDDILogo-svg {
    max-width: 30%;
    max-width: 30vw;
    max-height: 20vh; 
    width: auto\9;
    height: auto;
    width: 30%;
    max-width: 10vh; 
}
*/

/* mod-login & mod-logout: Finalmente no se utiliza: se autentica el usuario con el login que aporte landing page de Jomsocial.
.mod-login { 
    width: 100%;
    height: 10%;
    border: solid #5B6DCD 5px;
    padding: 20px;
    background-color: white;
    flex-flow: row wrap;
    box-sizing: border-box;
    background-color: yellow;
    display: flex;
    flex-direction: row;  
    float: none;
    line-height: 24px;
    position: static;
    z-index: auto;
    border-radius: 5px;
    background:#ccc;
    border:1px solid #ccc;
    padding:0px;
    margin:0px 0px 10px 0px;
    font-family: var(--body-font-family);
    font-size: var(--body-font-size);
    font-weight: var(--body-font-weight);
    line-height: var(--body-line-height);
    color: var(--body-color);
    text-align: var(--body-text-align);
    -webkit-text-size-adjust: 100%;
    justify-content: center;
    align-items: center;
}

.mod-login-logout {
    display: inline-block;
 	height:70px; 
	margin:0;  
	padding:0;  
	position: absolute;
	right:20px;
	top:10px;
	z-index:99;
    width:200px;
    color: white;
}
*/
 
/* Style the Language Switcher's image flags */
/*
.lang-image {
  width: 64px;
  height: 64px;
  margin: 0px;
}
*/

/* Style the Language Switcher's active language */

/*
.lang-active {
  border: 0px solid #f00;
}
*/

/* No nos interesa porque el posicionamiento no es el correcto.
.mod-languages {  
justify-content: left;
align-items: center;
#position: fixed; # Permanece siempre en la misma posición.
#top: 10px; 
#right: 10px;
z-index: 1002;  
background: none rgba(0,0,0,0);  
padding: 0;  
}  

.mod-languages img {  
padding: 0px;  
border: 0px solid #e2e2e2;  
#box-shadow: 0 0 10px rgba(0,0,0,0.1) ;  
}
*/

/* Modifying position of Language Switcher... (position "debug") */

/* .mod-languages {  
#justify-content: left;
#align-items: center;
position: fixed; # Permanece siempre en la misma posición.
#position: absolute;
top: 10px; 
right: 10px;
z-index: 1002;  
background: none rgba(0,0,0,0);  
padding: 0;  
}  

.mod-languages img {  
padding: 1px;  
border: 1px solid #e2e2e2;  
box-shadow: 0 0 10px rgba(0,0,0,0.1) ;  
}
*/

/*
@supports (display: grid) {
    .site-grid {
        grid-template-areas:
          ". banner banner banner banner ."
          ". comp comp comp comp ."
          ". side-r side-r side-r side-r ."
          ". side-l side-l side-l side-l ."
          ". bot-a bot-a bot-a bot-a ."
          ". bot-b bot-b bot-b bot-b .";
          ". top-a top-a top-a top-a ."
          ". top-b top-b top-b top-b ."      
    }
    @media (min-width: 992px) {
        .site-grid {
            grid-template-areas:
              ". banner banner banner banner ."
              ". side-l comp comp side-r ."
              ". bot-a bot-a bot-a bot-a ."
              ". bot-b bot-b bot-b bot-b ."
              ". top-a top-a top-a top-a ."
              ". top-b top-b top-b top-b ."
        }
    }
}
*/

/* The page header of Cassiopeia has the class "header" so you control it with .header */


/*.header {
    
    #background: rgba(178, 31, 119, 1);
    #background: linear-gradient(90deg, rgba(2, 0, 36, 1) 0%, rgba(119, 9, 121, 1) 35%, rgba(0, 212, 255, 1) 100%);

}
*/

/* The page footer of Cassiopeia has the class "footer" so you control it with .footer */
/*
.footer {
    background: rgba(178, 31, 119, 1);
    #background: linear-gradient(90deg, rgba(2, 0, 36, 1) 0%, rgba(119, 9, 121, 1) 35%, rgba(0, 212, 255, 1) 100%);
}
*/

/* Modifying colours */

/*.own {
  --cassiopeia-color-primary: #2F9C95;
  --cassiopeia-color-hover: #174F4B;
  --cassiopeia-color-link: #1C5E5A;
}
*/