/* Reset Browser Style Settings */
html, body {
    margin: 0;
    padding: 0;
    text-size-adjust: none;
    -webkit-text-size-adjust: none;
    -moz-text-size-adjust: none;
    -ms-text-size-adjust: none;
    font-family: Arial, Helvetica, sans-serif;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
  }

* {
    box-sizing: inherit;
}

li {
  line-height: 1.5;
  font-size: 1rem;
}

nav li {
  list-style: none;
}

a {
  text-decoration: none;
}

p {
  line-height: 1.5;
  font-size: 1rem;
}

@media all and (min-device-width: 884px) {
  p {
    font-size: 1.125rem;
  }
}

/* iPhone, portrait & landscape.*/
@media all and (max-device-width: 480px) {
  html,body { -webkit-text-size-adjust:none; }
}
/* iPad, portrait & landscape.*/
@media all and (min-device-width: 768px) and (max-device-width: 1024px) {
  html,body { -webkit-text-size-adjust:none; }
}

/* Navbar */
.fixed-nav {
  position: fixed;
  display: flex;
  z-index: 3;
  width: 100%;
  background-color: #61adffff;
  padding-bottom: 0.5rem;
}

.navbar {
  display: flex;
}

.nav-logo-container{
  position: relative;
  display: flex;
}

.nav-logo {
  height: 4.6rem;
  width: 4.6rem;
  padding-top: 0.5rem;
  padding-left: 2rem;
}

.nav-title {
  color: white;
  font-size: 1.6rem;
  font-weight: bold;
  margin: 0;
  padding-left: 10px;
  padding-top: 10px;
}

.nav-underlayer {
  width: 100%;
  height: 90px;
}

.nav-underlayer-articles {
  width: 100%;
  height: 75px;
}

.nav-group {
  position: static;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  z-index: 10;
  width: 100%; 
  background: transparent;
}

.nav-group a {
  display: flex;
  justify-content: right;
  gap: 0.5rem;
  font-size: 1.2rem;
  font-weight: bold;
  padding-right: 2.5rem;
  color: white;
}

.nav-group a::before {
  content:'';
  width:0%;
  height:0.2rem;
  display:block;
  background-color: #fff;
  margin-bottom:10px;
}
.nav-group a:hover::before {
  width:100%;
  transition:all .3s;
}

#hamburger {
  position: fixed;
  width: 50px;
  height: 50px;
  bottom: 10px;
  left: 50%;
  transform: translate(-50%, 0);
  z-index: 999;
  cursor: pointer;
  padding:0px;
  background-image: url('./img/hamburger-opt.svg');
  background-size: cover;
}

/*<span class="hamburger-tablet" onclick="openNav()">&#9776;</span>*/
.hamburger-tablet {
  display: flex;
  width: 100%;
  font-size:50px;
  color:white;
  cursor:pointer;
  justify-content: flex-end;
  padding:5px;
  margin-right:15px;
  position:relative;
  right:0px;
  z-index:4;
}

.overlay {
  height: 0%;
  width: 100%;
  position: fixed;
  z-index: 99;
  top: 0;
  left: 0;
  background-color: #61adffff;
  overflow-y: hidden;
  transition: 0.5s;
}

.overlay-content {
  position: relative;
  top: 25%;
  width: 100%;
  text-align: center;
  margin-top: 30px;
}

.overlay a {
  padding: 8px;
  text-decoration: none;
  font-size: 36px;
  color: white;
  display: block;
  transition: 0.3s;
}

.overlay a:hover, .overlay a:focus {
  color: #f1f1f1;
}

.overlay .closebtn {
  position: absolute;
  top: 20px;
  right: 45px;
  font-size: 60px;
}

@media screen and (min-width: 501px) {
  #hamburger {
    display: none;
  }
}

@media screen and (max-width: 501px) {
  .hamburger-tablet {
    display: none;
  }
}

@media screen and (min-width: 833px) {
  .hamburger-tablet {
    display: none;
  }
}

@media screen and (max-width: 833px) {
  .nav-group {
    display: none;
  }
}

@media screen and (max-width: 500px) {
  .navbar {
    justify-content: center;
    align-items: center;
  }

  .nav-logo {
    padding-top: 1rem;
    padding-left: 0rem;
    height: 4rem;
    width: 4rem;
  }

}

@media screen and (max-width: 880px) and (min-width: 833px) {
  .nav-group a {
    gap: 0.01rem;
  }

}

/* Home */
.home-opening {
  position: relative;
  min-height: 100vh;
  height: 100%;
  background-image: url('./img/home.svg');
  background-size: cover;
  background-position: right bottom;
}

.home-opening-title {
  position: relative;
  z-index: 2;
  padding: 50px;
  text-align: center;
}

.home-opening-title h1 {
  color: white;
  font-weight: bold;
  font-size: 62px;
}

.home-opening-title p {
  color: white;
  font-weight: bold;
  font-size: 27.9px;
  padding-top: 20;
}

/* Home Block */
.block {
  position: relative;
  width: 100vw;
  display: grid;
}

/* Home Block 1 */
.block-1 {
  display: flex;
  color: black;
  padding: 5% 10% 0%;
  gap:10%;
  flex-wrap: wrap;
  flex-shrink: 1;
  flex-grow: 1;
}

.problems-image {
  display: flex;
  width: 400px;
  height: 400px;
  justify-content: center;
  justify-items: center;
  align-items: center;
}

.block1-cont {
  flex-basis: 280px;
  flex-grow: 1;
}

@media screen and (max-width: 1000px) {
  .problems-image {
    display: none;
  }

  .block1-cont {
    width: 100%;
  }

  .block-1 h2 {
    text-align: center;
  }
}

/* Home Block 2 */

.block-2 {
  grid-template-columns: 1fr;
}

.home-grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(600px, 1fr));
  grid-gap: 20px;
  padding: 20px;
}

.bihomecard-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  grid-gap: 20px;
}

@media screen and (max-width: 639px) {
  .home-grid-container {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1.5fr));
    padding: 60px;
  }

}

@media screen and (max-width: 450px) {
  .home-grid-container {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1.5fr));
    padding: 20px;
  }

}

.home-grid-img {
  width: 100%;
  height: auto;
}

.block-2 h3{
  max-width: 100vw;
  padding-left: 20px;
}

.block-2 p{
  grid-column: 2 / 5;
  grid-row: 2 / 5;
  font-size: 1em;
}

.divider {
  background-image: url('./img/Wave4.svg');
  background-position: left;
  width: 100%;
  min-height: 100px;
}

/* Home Block 3 */
.block-3 {
  display: flex;
  padding: 10%;
  background-color: rgba(5, 95, 188, 1);
  color: white;
  gap:10%;
  flex-wrap: wrap;
  flex-shrink: 1;
  flex-grow: 1;
}

.block3-cont {
  flex-basis: 280px;
  max-width: 800px;
  flex-grow: 1;
}

.block-3 h2{
  text-align: center;
}

.home-logo {
  display: flex;
  width: 280px;
  height: 280px;
  justify-content: center;
  justify-items: center;
  align-items: center;
}

@media screen and (max-width: 780px) {
  .block3-logo {
    width:100%;
    display: flex;
    justify-content: center;
  }
}

/* Home Block 4 */
.block-4 {
  background-color: #ffffff;
  padding: 100px 100px;
  display: flex;
  flex-direction: column;
}

.block-4 h2 {
  text-align: center;
  grid-column: 2 / 5;
  grid-row: 1;
}

.block-4 p{
  grid-column: 2 / 5;
  grid-row: 2 / 5;
}

.home-prop-grid-container {
  display: grid;
  grid-template-rows: repeat(auto-fit, minmax(300px, 1fr));
  grid-gap: 20px;
  padding: 20px;
}

@media screen and (max-width: 780px) {
  .block-4 {
    padding: 100px 20px;
  }
}

/* Home Block 5 */

.block-5 {
  display: flex;
  padding: 10%;
  background-color: rgba(5, 95, 188, 1);
  color: white;
  gap:10%;
  flex-wrap: wrap;
  flex-shrink: 1;
  flex-grow: 1;
}

.block5-cont {
  flex-basis: 280px;
  max-width: 800px;
  flex-grow: 1;
}

.block-5 h2{
  text-align: center;
}

.lightbulb {
  display: flex;
  width: 280px;
  height: 280px;
  justify-content: center;
  justify-items: center;
  align-items: center;
}

@media screen and (max-width: 780px) {
  .block3-logo {
    width:100%;
    display: flex;
    justify-content: center;
  }
}

/*
.block-5 {
  background-color: rgba(5, 95, 188, 1);
  color: white;
  padding: 60px 60px;
  display: flex;
  flex-direction: column;
}

.block-5 h2 {
  text-align: center;
}

@media screen and (max-width: 515px) {
  .block-5 {
    padding: 60px 20px;
  }
}*/

/* Home Block 6 */
.block-6 {
  background-color: white;
  padding: 5%;
  grid-template-columns: 1fr;
  grid-template-rows: repeat(auto-fit, minmax(0.25fr, 1fr));
}

.block-6 h2 {
  text-align: center;
  grid-row: 1;
}

.block-6 .interest-button-container {
  grid-row: 2;
}

.interest-button-container {
  display: grid;
  grid-gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  cursor: pointer;
  padding-left: 20px;
  padding-right: 20px;
}

.interest-button {
  display: inline-grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 0.5fr;
}

.interest-button .img-top {
  display: none;
  position: absolute;
  z-index: 99;
  text-align: center;
}

.interest-button:hover .img-top {
  display: inline;
}

.icons-container {
  grid-column: 1;
  grid-row: 1;
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  align-items: center;
  justify-items: center;
}

.icons {
  grid-column: 1;
  grid-row: 1;
  width: 150px;
  height: 150px;
}

.interest-captions {
  grid-column: 1;
  grid-row: 2;
  font-weight: bold;
  text-align: center;
}

/* Home Block 7 */
.block-7 {
  padding-top: 50px;
  padding-bottom: 150px;
  justify-content: center;
  justify-items: center;
  align-items: center;
}

.contact {
  min-width: 600px;
  justify-content: center;
  justify-items: center;
  align-items: center;
}

@media screen and (max-width: 650px) {
  .contact {
    min-width: 300px;
  }
}

/* Constitucion */

.constitucion {
  height: 100%;
  width: 100%;
}

/* Vision, Articulos and Referendums Main Page */
.card {
  border: 1px solid #d3d3d3;
  border-radius: .25rem;
}

.bg-img {
  background-size: cover;
  min-height: 180px;
  background-position: center;
  background-color: #ccc;
}

.content {
  padding: 15px;
}

button {
  background-color: transparent;
  border: 1px solid #2196F3;
  padding: .5rem 1rem;
  cursor: pointer;
  border-radius: .25rem;
}

button:hover {
  background-color: #ddd;
  color: black;
}

.grid-container {
  display: grid;
  padding: 40px;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-gap: 20px;
}

@media screen and (max-width: 360px) {
  .grid-container {
    padding: 40px 20px;
  }
}

@media screen and (min-width: 620px) and (max-width: 660px) {
  .grid-container {
    padding: 40px 20px;
    grid-template-columns: repeat(auto-fit, minmax(280px, 0.5fr));
  }
}

@media screen and (max-width: 700px) {
  .grid-container {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  }
}

/* Articulos */
.article-container{
  display: grid;
  grid-template-columns: 0.1fr 1fr 0.1fr;
}

.articulo{
  padding: 20px 0px;
  grid-column: 2;
  max-width: 750px;
}

.articulo h1 {
  margin-block-start: 0.5em;
  margin-block-end: 0.5em;
}

.article-opening {
  position: relative;
  z-index: -1;
  width: 100%;
  height: 55vh;
  background-size: cover;
}

@media all and (max-width: 1024px) and (orientation : portrait) {
  .article-opening {
    height: 30vh;

  }
}

#introduction-grid-container {
  width: 50px;
}

/* Opening Images */
.introduction-opening {
  background-image: url('./img/Cortes_de_cadiz.jpg');
  background-position: center 40%;
}

.integracion-opening {
  background-image: url('./img/DisputaUnitaria-FederalCaricaturad3.jpg');
  background-position: center 0%;
}

.territorio-opening {
  background-image: url('./img/La_Rendición_de_Granada_-_Pradilla.jpg');
  background-position: center 40%;
}

.corruption-opening {
  background-image: url('./img/Cole_Thomas_The_Course_of_Empire_Destruction_1836.jpg');
  background-position: center 40%;
}

.politicians-opening {
  background-image: url('./img/chimps.jpg');
  background-position: center 75%;
}

.left-right-opening {
  background-image: url('./img/Francisco_de_Goya_y_Lucientes_-_Duelo_a_garrotazos.jpg');
  background-position: center 30%;
}

.nacionalismo-opening {
  background-image: url('./img/nazi_vision.jpg');
  background-position: center 60%;
}

.sorteo-opening {
  background-image: url('./img/greekdemocracy.jpg');
  background-position: center 30%;
}

.legislativo-opening {
  background-image: url('./img/legislativo-opening.jpg');
  background-position: center 20%;
}

.jefe-estado-opening {
  background-image: url('./img/catholic-monarchs.jpg');
  background-position: center 30%;
}

.mitos-monarquia-opening {
  background-image: url('./img/La_familia_de_Carlos_IV.jpg');
  background-position: center 40%;
}

.mitos-republicas-opening {
  background-image: url('./img/Manifestacion-por-la-II-Republica.jpg');
  background-position: center top;
}

.meritocracy-opening {
  background-image: url('./img/bureaucracy.jpg');
  background-position: center 60%;
}

.executive-opening {
  background-image: url('./img/The_Somerset_House_Conference_19_August_1604.jpg');
  background-position: center 30%;
}

.justice-opening {
  background-image: url('./img/Giaquinto_Corrado_-_Justice_and_Peace.jpg');
  background-position: center top;
}

.policia-opening {
  background-image: url('./img/guardia_civil.jpg');
  background-position: center 20%;
}

.vision-opening {
  background-image: url('./img/future.jpg');
  background-position: center top;
}

.referendum-opening {
  background-image: url('./img/seraph-voting.jpeg');
  background-position: center 20%;
}

/* Article Images */

.dimension {
  width: 90%;
}

.article-image {
  width: 100%;
}

.territory-image-wrapper {
  width: 100%;
  display: flex;
  justify-content: center;
}

.article-image-wrapper {
  width: 100%;
  margin: 0;
  display:flex;
  justify-content:flex-start; 
  flex-direction: column;
}

.article-img {
  max-width:750px; 
  width:100%;
}

/* Referendums */
.poll-container {
  width: 100%;
  height: auto;
  display: grid;
  grid-template-columns: 0.1fr 1fr 0.1fr;
  grid-template-rows: auto;
  row-gap: 20px;
  padding-bottom: 40px;
}

.poll {
  position:relative;
  grid-column: 2;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  width:100%;
  max-width:400px;
  background:#fff;
  border-radius:10px;
  box-shadow:0px 0px 20px 5px rgba(35,30,128,0.05);
}
.poll .question {
  padding:20px;
  color:#111;
  font-size:18px;
  border-bottom:1px solid #eee;
}
.poll .answers {
  padding:20px 20px 10px;
}
.poll .answers .answer {
  position:relative;
  width:95%;
  height:40px;
  padding:0px 10px;
  line-height:40px;
  color:#111;
  margin-bottom:10px;
  border:1px solid #d4d4d4;
  border-radius:10px;
  cursor:pointer;
  overflow:hidden;
}
.poll .answers .answer.selected {
  border:2px solid #8f9fe8;
}
.poll .answers .answer span.percentage-value {
  position:absolute;
  top:50%;
  right:0px;
  width:40px;
  transform:translateY(-50%);
  color:#111;
  font-size:15px;
}
.poll .answers .answer span.percentage-bar {
  position:absolute;
  top:0px;
  left:0px;
  width:0%;
  height:100%;
  background:#ccd8f1;
  z-index:-1;
  transition:width 300ms ease-in-out;
}

/* Referendum Opening Pictures */
.indultos-opening {
  background-image: url('./img/prison.jpg');
  background-position: center 30%;
}

.simbolos-opening {
  background-image: url('./img/Manifestacion-por-la-II-Republica.jpg');
  background-position: center 20%;
}

.inmigracion-opening {
  background-image: url('./img/cuidadania.jpeg');
  background-position: center 30%;
}

.lenguas-opening {
  background-image: url('./img/language-rights.jpg');
  background-position: center 100%;
}

.propiedad-opening {
  background-image: url('./img/property.jpg');
  background-position: center 90%;
}

.corporal-opening {
  background-image: url('./img/corporal.jpg');
  background-position: center 0%;
}

.naturaleza-opening {
  background-image: url('./img/elephant.jpg');
  background-position: center 60%;
}

/* Donar */

.donar-opening {
  background-image: url('./img/donate.png');
  background-position: center 60%;
}

.block-d {
  background-color: #ffffff;
  padding: 20px;
  grid-template-columns: 0.5fr 1fr 1fr 1fr 0.5fr;
}

.donate-wrapper {
  grid-column: 2 / 5;
}

.donate-wrapper img {
  max-width: 60%;
}

.jobs-container {
 width: 100%;
 display: -webkit-box;  /* OLD - iOS 6-, Safari 3.1-6, BB7 */
 display: -ms-flexbox;  /* TWEENER - IE 10 */
 display: -webkit-flex; /* NEW - Safari 6.1+. iOS 7.1+, BB10 */
 display: flex;         /* NEW, Spec - Firefox, Chrome, Opera */
 flex-wrap: wrap;
 justify-content: space-around;
 justify-items: center;
 align-items: center;
 padding: 0 60px 40px;
}

.job-img {
  max-width:250px;
  min-width:200px;
  padding-bottom: 50px;
}

.donation-box {
  width: 100%;
  display: -webkit-box;  /* OLD - iOS 6-, Safari 3.1-6, BB7 */
  display: -ms-flexbox;  /* TWEENER - IE 10 */
  display: -webkit-flex; /* NEW - Safari 6.1+. iOS 7.1+, BB10 */
  display: flex;         /* NEW, Spec - Firefox, Chrome, Opera */
  justify-content: center;
  justify-items: center;
  align-items: center;
  padding-bottom: 50px;
}

@media screen and (min-width: 577px) {
  .donation-box {
    padding-left: 77px;
  }
}

/* Tienda */

/* Footer 0f254eff*/

/*footer {
  position: relative;
  bottom: 0;
  padding: 20px;
  height: auto;
  width: 100%;
  background-color: #61adffff;
  color: white;
  text-align: center;
}*/

footer {
  background-color: #121315;
  color: #a7a7a7;
  font-size: 16px;
}
footer * {
  font-family: "Poppins", sans-serif;
  box-sizing: border-box;
  border: none;
  outline: none;
}
.row {
  padding: 1em 1em;
}
.row.primary {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 2fr;
  align-items: stretch;
}
.column {
  width: 100%;
  display: flex;
  flex-direction: column;
  padding: 0 2em;
  min-height: 15em;
}
footer h3 {
  width: 100%;
  text-align: left;
  color: white;
  font-size: 1.4em;
  white-space: nowrap;
}
footer ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  padding: 0;
  margin: 0;
}
footer li:not(:first-child) {
  margin-top: 0.8em;
}
footer ul li a {
  color: #a7a7a7;
  text-decoration: none;
}
footer ul li a:hover {
  color: #2a8ded;
}
footer .about p {
  text-align: justify;
  line-height: 2;
  margin: 0;
}
footer input,
button {
  font-size: 1em;
  padding: 1em;
  width: 100%;
  border-radius: 5px;
  margin-bottom: 5px;
}
footer button {
  background-color: #c7940a;
  color: #ffffff;
}
footer div.social {
  display: flex;
  justify-content: space-around;
  font-size: 2.4em;
  flex-direction: row;
  margin-top: 0.5em;
}
footer .social i {
  color: #bac6d9;
}

footer .copyright {
  padding: 0.3em 1em;
  background-color: #25262e;
}
.footer-menu{
  float: left;
    margin-top: 10px;
}

.footer-menu a{
  color: #cfd2d6;
  padding: 6px;

  text-decoration: none;
}
.footer-menu a:hover{
  color: #27bcda;
}
.copyright p {
  font-size: 0.9em;
  text-align: right;
}
@media screen and (max-width: 520px) {
  .row.primary {
    grid-template-columns: 1fr;
  }

}

.secondary {
  align-self: center;
  justify-self: center;
  text-align: center;
}
@media screen and (min-width: 520px) {
  .secondary {
    grid-column: 4/5;
  }

}