/*
 css de SinDominio.net
 para el template de Hugo
 2020 12 22
 entre otras cosas utiliza:
   - https://semantic-ui.com/
   - https://fomantic-ui.com/
*/

@charset "UTF-8";

@font-face{
  font-family: 'Neuropolitical';
  src: local('Neuropolitical'), url('../fonts/neuropolitical-regular.ttf') format('truetype');
  font-style: normal;
  font-weight: normal;
}

:root {
  --sd-color-verdemar: #46869b;
  --sd-color-verdeoscuro2: #327186;
  --sd-color-verdeoscuro: #427180;
  --sd-color-purpura: #B434D5;
  --sd-color-blanco: #fefefe;
  --sd-color-negro: #010101;
  --sd-color-casinegro: #333;
  --sd-color-grisoscuro: #444;
  --sd-color-grisclaro: #e0e1e2;
  --sd-margin: 1rem;
  --sd-padding: 1rem;
  --sd-border: 1px solid var(--sd-color-grisclaro);
}

/* any screen */
@media screen {


  html, body {
    font-size: 1em;
  }
  body {
    color:var(--sd-color-negro);
    background-color: var(--sd-color-verdeoscuro);
  }
  .hide, .esconde {
    display: none;
  }
  h1,h2,h3,h4,h5,h6 {
    color:var(--sd-color-verdemar);
  }
  h1 {
    border-bottom: 3px solid var(--sd-color-negro);
  }
  h1.ui.header{
    color: var(--sd-color-grisoscuro);
  }
  h2 cleanborder {
    border: 0;
  }
  a:hover{
    color: var(--sd-color-purpura);
  }
  article a:hover{
    color: var(--sd-color-blanco);
    background-color: var(--sd-color-verdemar);
    margin: -0.2rem;
    padding: 0.2rem;
  }
  article p,
  article ul,
  article ol {
    max-width: 45rem;
  }
  .monospaced,
  .monospaced a{
    font-family:  Courier New, Courier, Lucida Sans Typewriter, Lucida Typewriter, monospace;
  }
  ul li {
    padding: calc(var(--sd-padding) / 3) 0;
  }
  /* colores y logos sd*/
  .sd-color{
    color: var(--sd-color-verdemar);
  }
  .sd-color-secundario {
    color: var(--sd-color-purpura);
  }
  .sd-color-fondo,
  .sd-color-fondo i{
    background-color: var(--sd-color-verdemar)!important;
  }
  a.sd-enlace{
    font-family: Courier New, Courier, Lucida Sans Typewriter, Lucida Typewriter, monospace;
    font-weight: bolder;
    font-size: 1.2rem;
  }
  a:hover.sd-color-fondo,
  a:hover.sd-color-fondo i{
    background-color: var(--sd-color-purpura)!important;
  }
  .sd-color-fondo-secundario {
    background-color: var(--sd-color-purpura);
  }
  a.sd-color:hover{
    color: var(--sd-color-purpura);
  }
  a.sd-color-fondo:hover
  a.sd-color-fondo:hover i {
    background-color: var(--sd-color-purpura)!important;
  }
  .sd-imagotipo,.sd-nombresd {
    padding: 0;
    font-family: Neuropolitical;
    font-size: 2rem;
    text-align: right;
    color: var(--sd-color-purpura);
  }
  .sd-logo {
    display: block;
    width: 3rem;
    height: 3rem;
    background: url('../img/sd-logo-bn-196.png') no-repeat center;
    background-size: contain;
  }
  .mini .sd-logo {
    width: 2rem;
    height: 2rem;
  }
  .sd-logo i {
    display:none;
  }
  /* _colores y logos sd*/


  /* botones */
  .ui.buttons {
    display:flex;
    flex-direction: row;

  }
   .ui.buttons, .ui.button{
    align-self: center;
    color: var(--sd-color-grisoscuro);
    background-color: var(--sd-color-grisclaro);
  }
  .ui.button:hover{
    color: var(--sd-color-grisclaro);
    background-color: var(--sd-color-grisoscuro);
  }
  .ui.primary.button, .ui.primary.buttons, .ui.primary.buttons .button{
    color: var(--sd-color-blanco);
    background-color: var(--sd-color-verdemar);
  }
  .ui.primary.button:focus, .ui.primary.buttons .button:focus{
    background-color: var(--sd-color-verdeoscuro);
  }
  .ui.primary.button:hover, .ui.primary.buttons .button:hover{
    background-color: var(--sd-color-purpura);
  }
  /* _botones*/

  /* tarjetas */
  .ui.cards > .card {
    margin: 1em;
    box-shadow: 0 1px 3px 0 var(--sd-color-grisclaro),0 0 0 1px var(--sd-color-grisclaro);
    -webkit-transition: -webkit-box-shadow .1s ease,-webkit-transform .1s ease;
    transition: -webkit-box-shadow .1s ease,-webkit-transform .1s ease;
    transition: box-shadow .1s ease,transform .1s ease;
    transition: box-shadow .1s ease,transform .1s ease,-webkit-box-shadow .1s ease,-webkit-transform .1s ease;
  }
  .ui.cards > .card:hover {
    box-shadow: 0 1px 3px 0 var(--sd-color-verdemar),0 0 0 1px var(--sd-color-verdemar);
  }
  .ui.cards a.card:hover, .ui.link.card:hover, .ui.link.cards .card:not(.icon):hover, a.ui.card:hover{
    transform: none;
    --webkit-transform: none;
  }
  .description {
    padding-top: 1rem;
  }
  .card .content .meta {
    font-weight: bolder;
  }
  /* _tarjetas */

  /* shortcodes */
  .blockwrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
  }
  .adblock {
    background-color: var(--sd-color-verdeoscuro);
    color: var(--sd-color-blanco);
    padding: 1rem;
    margin: 1rem;
    border-radius: 1rem;
    font-weight: bold;
    text-align: center;
  }
  .adtext {
    font-size: 1.4em;
    font-weight: bold;
  }
  .adsubtext {
    justify-content: center;
    max-width: 12rem;
  }
  /* _shortcodes  */

  /* images */
  .big-block {
    width: 40%;
    display: block;
  }
  .medium-block {
    width: 18%;
    display: block;
  }
  .small-block {
    width: 100px;
    display: block;
  }
  .small-inline {
    width: 80px;
    display: inline-block;
    margin-right: 2em;
  }

  /* _images */

  /* estructura */

  /* menu superior */

  .ui.menu {
    border-radius: 0;
  }
  .ui.menu .ui.dropdown .menu>.item:hover {
    color: var(--sd-color-purpura)!important;
   }

  /* _menu superior */

  #container {
    background-color: var(--sd-color-blanco);
    padding-bottom: calc( var(--sd-padding) * 4 );
  }

  /* bloque cabecera */
  .cabecera-banner-block .column {
    padding-bottom: 2rem;
  }
  .cabecera-banner-block .sd-baila{
    padding: 2rem 2rem 1rem 2rem;
    margin: 0;
    max-width: unset;
    box-sizing: border-box;
    font-family: Courier New, Courier, Lucida Sans Typewriter, Lucida Typewriter, monospace;
    font-weight: bolder;
    font-size: 1rem;
    line-height: 1.5;
    letter-spacing: 0.02rem;
    font-weight: 600;
    text-align: justify;
  }
  .cabecera-banner-block .sd-nombresd {
    padding: 2rem 2rem 1rem 2rem;
  }
  /* _bloque cabecera */

  /* bloque herramientas */
  .herramientas-sub-block {
    margin: calc( var(--sd-margin) * 2 ) var(--sd-margin);
    padding: 0;
  }
  .herramientas-sub-block .cards {
    padding:0;
    margin:0;
  }
  /* /bloque herramientas */

  /* bloque ayuda */
  .ayuda-block {
    margin-top:6rem;
    padding-bottom: 6rem;
  }
  .ayuda-block h1, .ayuda-block h2, .ayuda-block h3, .ayuda-block h4, .ayuda-block h5, .ayuda-block h6 {
    margin: 0;
    padding: 0;
    text-align: center;
    color: var(--sd-color-casinegro);
  }
  .ayuda-block ul {
    list-style: none;
    padding:0;
  }
  .ayuda-block .menu-nosotras, .ayuda-block .menu-ayuda {
    margin:0;
    text-align: center;
  }
  /* _bloque ayuda */

  /* bloque footer */
  footer.sd-color {
    color: var(--sd-color-blanco);
    background-color: var(--sd-color-verdemar);
  }
  footer.sd-home {
    height: 4em;
    margin-top: -4em;
  }
  footer .firma-sd{
    margin: calc( var(--sd-padding) * 1) 0;
  }
  footer.sd-color .segment, footer.sd-color .ui.vertical.segment {
    background-color: var(--sd-color-verdeoscuro);
    padding: calc( var(--sd-padding) * 2 ) 0;
  }
  /* _footer*/

  /* estructura */
  .herramientas-sub-block .ui.stackable.cards {
    display: flex !important;
    align-items: baseline;
    margin-left: -1rem !important;
    margin-right: -1rem !important;
  }
  .herramientas-sub-block .ui.stackable.cards > .card {
    max-width: unset !important;
    /*display: block !important;*/
    min-height: 20rem;
  }

}
/* small mobile only*/
@media only screen and (max-width: 480px){
}
/* bigger than small mobile*/
@media only screen and (min-width: 480px){
  .herramientas-sub-block .ui.stackable.cards > .card {
    max-width: calc((100% / 2) - 2rem) !important;
  }
}
/* mobile only*/
@media only screen and (max-width: 768px){
  .hide-mobile,.show-desktop {
    display: none;
  }
  .hide-desktop,.show-mobile {
    display: unset;
  }
  .menu-final-pagina * {
    flex-direction: column;
    display: block;
    text-align: center;
    justify-content: center;
    align-self: center;
  }
  .menu-final-pagina .column {
    display:block;
  }
  .sd-imagotipo,.sd-nombresd {
    font-size: 2rem;
  }
}

/* tablet and desktop // bigger than mobile*/
@media only screen and (min-width:768px) {
  .hide-mobile,.show-desktop {
    display: unset;
  }
  .hide-desktop,.show-mobile {
    display: none;
  }
  .cabecera-banner-block .sd-baila{
    padding: 1.5rem 3rem 1.5rem 3rem;
  }
  .cabecera-banner-block .sd-nombresd {
    padding: 1.5rem 3rem 1.5rem 3rem;
  }
  .sd-imagotipo,.sd-nombresd {
    font-size: 3rem;
  }
}

/* tablet only */
@media only screen and (min-width:768px) and (max-width:991px) {
}

/* mobile and tablet // smaller than desktop*/
@media only screen and (max-width:991px) {
}

/* desktop // bigger than tablet mobile*/
@media only screen and (min-width:991px) {
  .ayuda-block {
      padding-bottom:6rem;
  }
  .cabecera-banner-block{
    margin: 0  auto;
    max-width: 90vw;
  }
}
/* desktop large // bigger than desktop tablet mobile*/
@media only screen and (min-width:1200px) {
  .cabecera-banner-block .sd-baila{
    margin: 0 auto 0 auto;
    max-width: 50rem;
  }
  .cabecera-banner-block .portada-imagen-arriba-derecha {
    background: url('../img/portada-pulpo.jpeg');
    background-position: center;
    background-size: cover;
    margin-right: calc(-5vw + 1rem); /* en fomantic-ui la anchura del div contenerdor 90vw con margen auto > son 5vw de margen, el sub container tiene un margen de -1rem > por lo tanto se lo sumamos.*/
  }
  /* cambios anchura para patallas grandes*/
  .ui.ui.ui.container:not(.fluid) {
    width: 85vw;
  }
  .ui.ui.ui.grid.container {
    width:calc(85vw + 2rem)
  }
  .ui.ui.ui.relaxed.grid.container {
    width: calc(85vw + 3rem)
  }
  .ui.ui.ui.very.relaxed.grid.container {
    width: calc(85vw + 5rem)
  }
  .ayuda-block {
    padding-bottom: 10rem;
  }
  .ayuda-block.portada-imagen-abajo-izquierda {
    background: url('../img/portada-apuntes.jpeg');
    background-position: left center;
    background-size: 50%;
    background-repeat: no-repeat;
  }
  .ayuda-block h1, .ayuda-block h2, .ayuda-block h3, .ayuda-block h4, .ayuda-block h5, .ayuda-block h6 {
    text-align: right;
  }
  .ayuda-block .menu-nosotras, .ayuda-block .menu-ayuda {
    margin-right: 3rem;
    text-align: right;
  }
}