@import '../../node_modules/reset-css/reset.css';
@font-face {
  font-family: Raleway;
  font-display: swap;
  src: url('../fonts/Raleway/raleway-regular-webfont.woff') format('woff');
}
@font-face {
  font-family: RalewayBold;
  font-display: swap;
  src: url('../fonts/Raleway/Raleway-Bold.ttf') format('truetype');
}
@font-face {
  font-family: RalewayLight;
  font-display: swap;
  src: url('../fonts/Raleway/Raleway-Light.ttf') format('truetype');
}
@font-face {
  font-family: RalewayBoldItalic;
  font-display: swap;
  src: url('../fonts/Raleway/Raleway-BoldItalic.ttf') format('truetype');
}
@font-face {
  font-family: Ubuntu;
  font-display: swap;
  src: url('../fonts/Ubuntu/Ubuntu-Regular.ttf') format('truetype');
}
@font-face {
  font-family: UbuntuBold;
  font-display: swap;
  src: url('../fonts/Ubuntu/ubuntu-bold-webfont.woff') format('woff');
}
@font-face {
  font-family: UbuntuLight;
  font-display: swap;
  src: url('../fonts/Ubuntu/Ubuntu-Light.ttf') format('truetype');
}
@font-face {
  font-family: Merriweather;
  font-display: swap;
  src: url('../fonts/Merriweather/Merriweather-Regular.ttf') format('truetype');
}
@font-face {
  font-family: MerriweatherBold;
  font-display: swap;
  src: url('../fonts/Merriweather/Merriweather-Bold.ttf') format('truetype');
}
@font-face {
  font-family: MerriweatherLight;
  font-display: swap;
  src: url('../fonts/Merriweather/Merriweather-Light.ttf') format('truetype');
}
@font-face {
  font-family: MerriweatherBlack;
  font-display: swap;
  src: url('../fonts/Merriweather/Merriweather-Black.ttf') format('truetype');
}
body {
  font-size: 16px;
}
main {
  margin: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas: "nav-header             nav-header" "principal              principal" "titulo-opinion         titulo-opinion" "c1                     c1" "c2                     c3" "c4                     c5" "c6                     c7" "c8                     c9" "c10                    c11" "defensoras             defensoras" "titulo-especialistas   titulo-especialistas" "e1                     e2" "e3                     e4";
}
nav.header {
  grid-area: nav-header;
  background-color: #01425d;
  margin: 0px 15px;
  z-index: 3;
  display: grid;
  grid-template-columns: 3fr 1fr;
  grid-template-areas: "logo hamburger" "menu menu";
  /* menu */
  /* menu icon */
  /* menu btn */
}
nav.header a {
  color: white;
}
nav.header ul {
  margin: 0;
  padding: 0;
  list-style: none;
  overflow: hidden;
  background-color: #01425d;
}
nav.header ul li a {
  display: block;
  padding: 20px 20px;
  text-decoration: none;
  font-family: Ubuntu;
}
nav.header .logo {
  font-size: 2em;
  padding: 10px 20px;
  text-decoration: none;
  align-self: center;
  justify-self: center;
  grid-area: logo;
}
nav.header .logo img {
  max-width: 100%;
}
nav.header .menu {
  clear: both;
  max-height: 0;
  transition: max-height 0.2s ease-out;
  grid-area: menu;
}
nav.header .menu li {
  text-align: center;
}
nav.header .menu-icon {
  cursor: pointer;
  display: inline-block;
  padding: 28px 20px;
  position: relative;
  user-select: none;
  grid-area: hamburger;
  align-self: center;
  justify-self: right;
}
nav.header .menu-icon .navicon {
  background: #fff;
  display: block;
  height: 2px;
  position: relative;
  transition: background 0.2s ease-out;
  width: 18px;
}
nav.header .menu-icon .navicon:before,
nav.header .menu-icon .navicon:after {
  background: #fff;
  content: "";
  display: block;
  height: 100%;
  position: absolute;
  transition: all 0.2s ease-out;
  width: 100%;
}
nav.header .menu-icon .navicon:before {
  top: 5px;
}
nav.header .menu-icon .navicon:after {
  top: -5px;
}
nav.header .menu-btn {
  display: none;
}
nav.header .menu-btn:checked ~ .menu {
  max-height: 240px;
}
nav.header .menu-btn:checked ~ .menu-icon .navicon {
  background: transparent;
}
nav.header .menu-btn:checked ~ .menu-icon .navicon:before {
  transform: rotate(-45deg);
}
nav.header .menu-btn:checked ~ .menu-icon .navicon:after {
  transform: rotate(45deg);
}
nav.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before,
nav.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {
  top: 0;
}
article {
  padding: 15px;
}
article.main {
  grid-area: principal;
  background-color: #01425d;
  display: grid;
  grid-column-gap: 15px;
  grid-template-columns: 45% 50%;
  margin: auto;
  margin-left: 15px;
  margin-right: 15px;
  padding-bottom: 2em;
  padding-top: 1em;
}
article.main h2,
article.main p.author {
  color: #fce4cd;
}
article.main p.excerpt {
  color: white;
  hyphens: auto;
  overflow-wrap: break-word;
}
article.especialista {
  background-color: #d6dae2;
}
article.columna {
  background-color: #fce4cd;
}
article.c1 {
  grid-column-start: 1;
  grid-column-end: 3;
  display: grid;
  border: 15px solid #fce4cd;
  background-color: #fff4ed;
  padding-left: 15px;
  padding-right: 15px;
  padding-top: 15px;
  padding-bottom: 15px;
  grid-template-columns: minmax(50%, 1fr) minmax(50%, 1fr);
  grid-template-areas: "title_mobile profile_pic" "title_desktop ." "excerpt excerpt" "author author";
  grid-row-gap: 15px;
  grid-column-gap: 15px;
  margin-left: 15px;
  margin-right: 15px;
}
article.c1 figure {
  grid-area: profile_pic;
}
article.c1 figure a {
  display: block;
}
article.c1 figure img.profile-pic {
  max-width: 112px;
  margin: auto;
}
article.c1 svg {
  grid-area: title_mobile-start;
  margin-top: -1.5em;
}
article.c1 h2 {
  color: #e41b3c;
  grid-area: title_mobile;
  align-self: end;
  hyphens: none;
  overflow-wrap: unset;
}
article.c1 h2 figcaption {
  margin-top: -1.5em;
}
article.c1 p.excerpt {
  grid-area: excerpt;
}
article.c1 p.author {
  grid-area: author;
  color: #01425d;
}
article.c2,
article.c4,
article.c6,
article.c8,
article.c10 {
  margin-left: 15px;
}
article.c3,
article.c5,
article.c7,
article.c9,
article.c11 {
  margin-right: 15px;
}
article.especialista:nth-child(odd) {
  margin-right: 15px;
}
article.especialista:nth-child(even) {
  margin-left: 15px;
}
img.profile-pic {
  max-width: 100%;
  border-radius: 50%;
  margin: auto;
  display: block;
}
h1 {
  color: #01425d;
  font-size: 3em;
  font-family: ralewaybold;
  margin-top: -0.15em;
}
h2 {
  text-transform: uppercase;
  font-family: 'UbuntuBold';
  font-size: 1.1em;
  overflow-wrap: break-word;
  hyphens: auto;
  margin-top: 0.5em;
  margin-bottom: 0.3em;
  color: #01425d;
}
h2.sidebar {
  text-transform: none;
  color: #01425d;
}
h2.principal {
  margin-top: 0em;
}
h2 a {
  color: inherit;
  text-decoration: none;
  font-family: 'UbuntuBold';
}
p {
  font-family: 'Raleway';
}
p.author {
  margin-top: 0.5em;
  color: #e41b3c;
}
p.author a {
  color: inherit;
  text-decoration: none;
  font-family: 'UbuntuBold';
}
p.excerpt {
  line-height: 1;
}
.grid-container {
  display: grid;
  grid-template-columns: 100%;
  grid-template-areas: "header" "columnas" "defensoras" "especialistas" "mas-opinion";
  background-color: #fce4cd;
  margin-left: 15px;
  margin-right: 15px;
}
.grid-header {
  display: grid;
  grid-area: titulo-opinion;
  grid-template-columns: 1fr 1fr;
  grid-template-areas: "texto svg";
  column-gap: 15px;
  background-color: #fce4cd;
  margin-left: 15px;
  margin-right: 15px;
}
.grid-header h1 {
  grid-area: texto;
}
.grid-header svg {
  grid-area: svg;
  margin-top: -2em;
  max-width: 100%;
}
.defensoras-container {
  background-color: #baafb3;
  grid-area: defensoras;
  padding: 15px;
}
.defensoras-container header h2 {
  text-transform: none;
}
.defensoras-container article {
  display: grid;
  grid-template-columns: 1fr 2fr;
  grid-column-gap: 15px;
  grid-template-areas: "profile-pic    title" "profile-pic    excerpt" "profile-pic    author";
  margin-left: -15px;
  margin-right: -15px;
}
.defensoras-container article figure {
  grid-area: profile-pic;
}
.defensoras-container article h2 {
  grid-area: title;
}
.defensoras-container article p.excerpt {
  grid-area: excerpt;
}
.defensoras-container article:last-of-type {
  display: none;
}
.content-contained {
  padding-left: 15px;
  padding-right: 15px;
}
.container-contained {
  margin-left: 15px;
  margin-right: 15px;
}
nav.mas-link {
  background-color: #01425d;
  text-align: right;
  padding: 0px 15px;
  padding-top: 0.5em;
  padding-bottom: 0.3em;
  font-weight: normal;
  font-family: Ubuntu;
  letter-spacing: 2px;
  display: none;
}
nav.mas-link a {
  color: white;
  text-decoration: none;
}
.mobile-only {
  display: block;
}
#especialistas-desktop-title {
  background-color: #d6dae2;
  margin: 0px 15px;
  padding-top: 1em;
  grid-area: titulo-especialistas;
  text-transform: none;
}
.Layer_1 {
  transform: rotate(180deg);
  max-width: 30%;
}
#comillas-desktop {
  display: none;
}
footer {
  margin: auto;
  margin-top: 5em;
  display: grid;
  grid-template-columns: 30% 35% 35%;
  grid-row-gap: 15px;
  background-color: #4c4d4e;
  padding-bottom: 1em;
  color: #818181;
}
footer img {
  max-width: 100%;
}
footer div#mobile-logo {
  grid-column-start: 1;
  grid-column-end: 5;
  margin-top: -4.5em;
}
footer div#ver-mas {
  display: grid;
  grid-template-columns: 80% auto;
}
footer div#ver-mas h6 {
  font-family: UbuntuBold;
  font-size: 2rem;
  line-height: 0.9;
  align-self: center;
}
footer div#ver-mas img {
  height: 125px;
  align-self: center;
}
footer nav#section-titles ul {
  margin-top: 1em;
}
footer nav#section-titles ul li {
  margin-bottom: 1rem;
}
footer nav#section-titles ul li a {
  color: white;
  font-family: Ubuntu;
  text-decoration: none;
}
footer nav#section-logos ul {
  margin-top: 1em;
  display: grid;
  grid-template-columns: 1fr;
  grid-row-gap: 10px;
  height: 100%;
}
footer nav#asociados {
  grid-column-start: 1;
  grid-column-end: 4;
}
footer nav#asociados h2 {
  font-family: RalewayBold;
  display: inline;
  color: #818181;
}
footer nav#asociados ul {
  display: inline;
  line-height: 1.2;
}
footer nav#asociados ul li {
  font-family: Raleway;
}
footer nav#asociados ul h2,
footer nav#asociados ul li {
  display: inline;
  color: #818181;
}
footer nav#asociados ul h2 a,
footer nav#asociados ul li a {
  color: #818181;
  text-decoration: none;
}
footer div#publicidad {
  display: none;
}
@media (min-width: 576px) {
  main,
  footer {
    max-width: 540px;
  }
  h2 {
    font-size: 1.5em;
  }
  h2.principal {
    font-size: 2em;
  }
  .grid-header svg {
    grid-area: svg;
    margin: auto;
    margin-top: -2em;
    max-width: 50%;
  }
}
@media (min-width: 768px) {
  nav.header {
    margin: 0px;
    grid-area: nav-header;
  }
  main,
  footer {
    max-width: 720px;
  }
  main {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-areas: "nav-header     nav-header      nav-header" "principal      principal       principal" "titulo-opinion titulo-opinion  titulo-especialistas" "c1             c1              e1" "c2             c3              e2" "c4             c5              e3" "c6             c7              e4" "c8             c9              e4" "c10            c11             e4" "mas-opinion   mas-opinion      mas-especialistas" "defensoras     defensoras      defensoras";
  }
  article.main {
    grid-area: principal;
    grid-column-gap: 30px;
    grid-template-columns: 30% 60%;
    margin-left: 0px;
    margin-right: 0px;
  }
  article.main div:first-of-type {
    padding: 0% 10%;
  }
  article.main p {
    font-size: 1.3em;
  }
  article.main p.excerpt {
    hyphens: none;
    font-size: 1.4em;
  }
  article.especialista,
  article.columna {
    padding-bottom: 15px;
    padding-top: 15px;
  }
  article.c8,
  article.c9,
  article.c10,
  article.c11 {
    display: none;
  }
  article.c1 {
    max-width: 100%;
    grid-template-columns: minmax(48%, 1fr) minmax(50%, 1fr);
    grid-column-end: 3;
    margin-left: 0px;
    margin-right: 0px;
  }
  article.c1 h2 {
    color: #01425d;
    grid-area: title_desktop;
    align-self: start;
  }
  article.c1 p.author {
    color: #e41b3c;
  }
  article.c1 figure img.profile-pic {
    max-width: 80%;
    margin: 0;
  }
  article.c2,
  article.c4,
  article.c6,
  article.c8,
  article.c10 {
    margin-left: 0px;
  }
  article.c3,
  article.c5,
  article.c7,
  article.c9,
  article.c11 {
    margin-right: 0px;
  }
  article.especialista:nth-child(odd) {
    margin-right: 0px;
  }
  article.especialista:nth-child(even) {
    margin-left: 0px;
  }
  h1 {
    font-size: 5em;
    margin-bottom: 0.5em;
  }
  h2 {
    font-size: 1.5em;
    hyphens: none;
  }
  h2.principal {
    font-size: 2em;
  }
  p.excerpt {
    line-height: 1.5;
  }
  .grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-areas: "header         header          especialistas-header" "columnas       columnas        columnas" "mas-opinion    mas-opinion     mas-especialistas" "defensoras     defensoras      defensoras";
    background-color: #fce4cd;
    margin-left: 0px;
    margin-right: 0px;
  }
  .grid-header {
    margin-left: 0px;
    margin-right: 0px;
  }
  .grid-header svg {
    display: none;
  }
  .columnas-container {
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-areas: "c1     c1      e1" "c2     c3      e2" "c4     c5      e3" "c6     c7      e4" "c8     c9      e5" "c10    c11     e6";
    column-gap: 0px;
    row-gap: 0px;
  }
  .columnas-container nav.mas-link {
    grid-column-start: 1;
    grid-column-end: 4;
  }
  figcaption {
    display: none;
  }
  .especialistas-container {
    display: block;
  }
  .especialistas-container nav.mas-link {
    margin-top: 15px;
  }
  #comillas-desktop {
    display: block;
    grid-area: titulo-especialistas-start;
    max-width: 40%;
    margin-top: -2em;
  }
  .defensoras-container {
    grid-area: defensoras;
    margin-left: 0px;
    margin-right: 0px;
    padding: 0px 15px;
    padding-bottom: 15px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 15px;
    grid-row-gap: 15px;
  }
  .defensoras-container header,
  .defensoras-container nav {
    grid-column-start: 1;
    grid-column-end: 3;
  }
  .defensoras-container article {
    margin-left: 0px;
    margin-right: 0px;
    grid-column-start: 1;
    grid-column-end: 3;
  }
  .defensoras-container article:last-of-type {
    display: grid;
  }
  nav.mas-link {
    display: block;
  }
  .mobile-only {
    display: none;
  }
  #especialistas-desktop-title {
    text-transform: none;
    grid-area: titulo-especialistas;
    display: block;
    background: #d6dae2;
    margin: 0;
    align-self: stretch;
    justify-self: stretch;
    padding-top: 3em;
  }
  #paginacion-opinion {
    grid-area: mas-opinion;
    border: 15px solid #fce4cd;
  }
  #paginacion-especialistas {
    grid-area: mas-especialistas;
    border: 15px solid #d6dae2;
  }
  footer div#ver-mas h6 {
    font-size: 3em;
  }
  footer nav#section-titles ul {
    margin-top: 2.5em;
  }
}
@media (min-width: 992px) {
  nav.header {
    display: grid;
    grid-template-columns: 30% 70%;
    grid-template-areas: "logo menu";
  }
  nav.header a {
    float: none;
    padding: 0em;
    grid-area: logo;
    align-self: center;
    justify-self: center;
  }
  nav.header ul {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
  }
  nav.header ul li {
    align-self: center;
    justify-self: center;
  }
  nav.header ul li a {
    padding: 0px 0px;
  }
  nav.header .menu {
    clear: none;
    max-height: none;
  }
  nav.header .menu-icon {
    display: none;
  }
  main,
  footer {
    max-width: 960px;
  }
  main {
    grid-template-columns: repeat(4, 1fr);
    grid-template-areas: "nav-header     nav-header      nav-header              nav-header" "principal      principal       principal               principal" "titulo-opinion titulo-opinion  titulo-opinion          titulo-especialistas" "c1             c1              c2                      e1" "c3             c4              c5                      e2" "c6             c7              c8                      e3" "c9             c10             c11                     e4" "mas-opinion   mas-opinion      mas-opinion             mas-especialistas" "defensoras     defensoras      defensoras              defensoras";
  }
  article.c8,
  article.c9,
  article.c10,
  article.c11 {
    display: block;
  }
  .grid-container {
    grid-template-columns: 75% 25%;
  }
  .columnas-container {
    grid-template-columns: 1fr 1fr 1fr;
  }
  .defensoras-container article:first-of-type {
    grid-column-start: 1;
    grid-column-end: 2;
  }
  .defensoras-container article:last-of-type {
    grid-column-start: 2;
    grid-column-end: 3;
  }
  footer {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-row-gap: 15px;
    align-items: center;
    background: linear-gradient(to right, #4c4d4e 0%, #4c4d4e 74.5%, #4c4d4e 74.5%, #353637 74.5%, #353637 100%);
    padding-bottom: 1em;
    color: #818181;
  }
  footer img {
    max-width: 100%;
  }
  footer div#ver-mas {
    display: grid;
    grid-template-columns: 85% auto;
  }
  footer div#ver-mas h6 {
    font-size: 4rem;
    line-height: 0.9;
  }
  footer div#ver-mas img {
    height: 155px;
  }
  footer nav#section-titles ul {
    margin-top: 2em;
  }
  footer nav#section-titles ul li {
    margin-bottom: 1rem;
  }
  footer nav#section-titles ul li a {
    color: white;
    font-family: Ubuntu;
    text-decoration: none;
  }
  footer nav#section-logos ul {
    margin-top: 1em;
    display: grid;
    grid-template-columns: 1fr;
    grid-row-gap: 10px;
    height: 100%;
  }
  footer nav#asociados {
    grid-column-start: 1;
    grid-column-end: 5;
  }
  footer nav#asociados ul {
    line-height: 1.2;
  }
  footer nav#asociados ul h2 {
    font-family: RalewayBold;
  }
  footer nav#asociados ul li {
    font-family: Raleway;
  }
  footer nav#asociados ul h2,
  footer nav#asociados ul li {
    display: inline;
    color: #818181;
  }
  footer nav#asociados ul h2 a,
  footer nav#asociados ul li a {
    color: #818181;
    text-decoration: none;
  }
  footer div#publicidad {
    display: block;
    padding-top: 1em;
  }
  footer div#publicidad p {
    font-size: 1.5em;
    text-align: center;
    color: white;
  }
  footer div#publicidad p strong {
    font-size: 1.2em;
    font-family: RalewayBold;
  }
  footer div#publicidad p:last-of-type {
    margin-bottom: 1em;
  }
  footer div#publicidad img {
    display: block;
    margin: auto;
    max-width: 100%;
  }
}
@media (min-width: 1200px) {
  main,
  footer {
    max-width: 1140px;
  }
  footer div#ver-mas h6 {
    font-size: 5em;
  }
}