/* DARK MODE */

#darkPH.dark-mode {
  filter: invert();
}

#darkPH:hover {
  cursor: pointer;
}

#darkPH {
  margin-right: 10px;
  padding-bottom: 3px;
}

#darkPC.dark-mode {
  filter: invert();
}

#darkPC:hover {
  cursor: pointer;
}

#darkPC {
  margin-right: 10px;
  padding-bottom: 3px;
}

body.dark-mode .apps {
  fill: currentcolor;
  color: rgb(169, 162, 151);
}

body.dark-mode .mode-icon {
  fill: currentcolor;
  color: rgb(169, 162, 151);
}

body.dark-mode header {
  border-bottom-color: rgb(54, 58, 60);
}

body.dark-mode .result-date {
  color: rgb(158, 150, 137);
}

body.dark-mode .result-text {
  color: rgb(192, 186, 178);
}

body.dark-mode .selected-mode span {
  color: rgb(48, 146, 234);
}

body.dark-mode, body.dark-mode span, body.dark-mode p, body.dark-mode b {
  background-color: #181a1b;
  color: rgb(178, 171, 161);
}

body.dark-mode .search-result a:visited {
  color: rgb(202, 97, 255);
}

body.dark-mode .search-result a, body.dark-mode .related-searches-card a, body.dark-mode .related-searches-card a span {
  color: rgb(105, 151, 244);
}

body.dark-mode .related-searches-heading {
  color: rgb(211, 207, 201);
}

body.dark-mode .search-bar {
  border-color: rgb(56, 61, 63);
  color: rgba(232, 230, 227, 0.87);
  outline-color: initial;
  background-color: #454a4d;
}

body.dark-mode .galeria {
  border-bottom-color: rgb(71, 77, 80);
}

body.dark-mode .sidebar {
  border-left-color: rgb(71, 77, 80);
}

body.dark-mode .questions-box {
  border: 2px solid rgb(56, 61, 63);
}

body.dark-mode .question1, body.dark-mode .question2, body.dark-mode .question3, body.dark-mode .question4 {
  border-top-color: rgb(55, 60, 62);
}

body.dark-mode footer {

    background-color: rgb(31, 34, 35);
    border-top-color: rgb(56, 60, 63);
}

body.dark-mode .location, body.dark-mode .location-row {
    border-bottom-color: rgb(56, 60, 63);
}

body.dark-mode .location-row {
  border-left-color: rgb(56, 60, 63);
}

body.dark-mode .space {
  color: rgba(232, 230, 227, 0.54);
  background-color: transparent;
}

body.dark-mode .moonland {
  color: rgb(200, 195, 188);
  background-color: transparent;
}

body.dark-mode .location-row .circle {
  background: #9e9e9e;
  
}

body.dark-mode .loc, body.dark-mode .footer-loc-link, body.dark-mode .footer-link {
  color: rgb(169, 162, 151);
  background-color: transparent;
}

body.dark-mode hr {

  background-color: rgb(56, 56, 56);
}

/* Body */

body {

  font-family: arial,sans-serif;

  font-size: 14px;

  color: #222;

}

/* Header */

header {

  display: grid;

  grid-template-columns: 13% 35% auto 70px 200px;

  grid-template-rows: 65px 57px;

  grid-template-areas:

    "logo search auto apps signin"

    ". nav . . lang";

  border-bottom: 1px solid #ebebeb;

}



/* Logo */

.logo-area {

  grid-area: logo;

  place-self: center;

}

.logo {

  margin: 61px 0 0 0px;

  width: 92px;

  height: 30px;

}

#langPH {

  display: none;
}

/* Search */

#search-area {

  grid-area: search;

}

.search-container {

  display: flex;

  flex-direction: row-reverse;

}

.search-bar {

  margin-top: 20px;

  padding-left: 20px;

  width: 640px;

  height: 46px;

  border: 1px solid #dfe1e5;

  border-radius: 24px;

  color: rgba(0,0,0,.87);

  outline: none;

  font-size: 16px;

}

.search-bar:hover {

  box-shadow: 0 1px 6px 0 rgba(32,33,36,0.28);

  border-color: rgba(223,225,229,0);

}

.search-btn {

  position: absolute;

  margin: 31px 17px 0 -17px;

  width: 24px;

  fill: currentColor;

  color: #4285f4;

  outline: none;

}

.search-btn:hover + .search-bar {

  box-shadow: 0 1px 6px 0 rgba(32,33,36,0.28);

  border-color: rgba(223,225,229,0);

}



/* Apps */

#apps-area {

  grid-area: apps;

  place-self: center;

}

.apps {

  margin: 27px -7px 0 34px;

  padding: 8px;

  width: 40px;

  fill: currentColor;

  color: #5f6368;

  border-radius: 50%;

}

.apps:hover {

  background-color: rgba(60,64,67,0.08);

}



/* Sign in */

#signin-area {

  grid-area: signin;

  place-self: center;

  margin-top: 22px;

}

.signin {

  margin-right: 10px;

  padding: 10px 27px;

  font-family: 'Arial', sans-serif;

  font-weight: 400;

  color: #FFF;

  background-color: #1a73e8;

  border-radius: 4px;

}

.signin:hover {

  background-color: #2b7de9;

  box-shadow: 0 1px 2px 0 rgba(6,133,244,0.3),0 1px 3px 1px rgba(66,133,244,0.15);

}



/* Navigation */

#nav {

  grid-area: nav;

  display: flex;

}

.search-modes {

  display: flex;

  margin-left: 10px;

  font-size: 13px;

  color: #5f6368;

}

.nav-mode {

  display: inline-flex;

  justify-content: center;

  margin-top: 10px;

  padding: 16px 12px 12px 9px;

}

.nav-mode:hover svg,

.nav-mode:hover {

  color: #1A73E8;

}

.selected-mode {

  border-bottom: 3px solid #1A73E8;

  color: #1A73E8;

}

.mode-icon {

  margin: 0 5px 3px 2px;

  height: 16px;

  width: 16px;

  fill: currentColor;

  color: #5f6368;

}

.mode-text {

  margin-top: 1px;

}

.mode-more {

  margin-right: 0px;

  margin-left: -1px;

}

.search-settings {

  margin-left: 57px;

  font-size: 13px;

  color: #5f6368;

}

.nav-tools {

  margin: 21px 0 7px -3px;

  padding: 6px 11px;

  border: 1px solid transparent;

}

.nav-tools:hover {

  background-color: #f8f8f8;

  background-image: linear-gradient(to bottom, #f8f8f8, #f1f1f1);

  border: 1px solid #c6c6c6;

  border-radius: 2px;

  box-shadow: 0 1px 1px rgba(0,0,0,.1);

  transition: all 0.0s;

}



#langPC {



    grid-area: lang;

    display: flex;

    justify-content: center;

    align-items: center;



}

#langPC p {

  font-size: 2em;
}

#en {



  text-decoration: none;

  color: #000;

  padding-right: 5px;

}



#es {



  color: #000;

  padding-left: 5px;

  

}



/* Main Content */

.grid {

  display: grid;

  grid-template-columns: 13% 35% auto;

  grid-template-areas: '. main sidebar';

}

main {

  grid-area: main;

  padding: 0 20px;

}



.sidebar {

  grid-area: sidebar;

}



/* Search Results */



#mousePC {

  

  margin-bottom: -10px;

  margin-left: 5px;

  animation-name: mouses;

  animation-duration: 2s;

  animation-iteration-count: infinite;

  animation-timing-function: ease-in-out;

}



@keyframes mouses {

  0%{transform: translateX(20px) rotate(270deg);;}

  

  50%{transform: translateX(0px) rotate(270deg);}



  100%{transform: translateX(20px) rotate(270deg);}

}



.results-stats {

  line-height: 43px;

  color: #70757a;

}

.search-results-block {

  padding-top: 8px;

}

.search-result {

  margin-bottom: 28px;

}

.search-result a {

  display: inline-block;

  color: #1a0dab;

}

.search-result > a:hover h3 {

  text-decoration: underline;

}

.search-result a:visited {

  color: #609;

}

.cite {

  line-height: 1.3;

  color: #3C4043;

}

.caret {

  font-size: 10px;

  padding-left: 3px;

}

h3 {

  margin-top: 4px;

  font-size: 20px;

  line-height: 1.3;

}

.result-date {

  color: #70757a;

}

.result-text {

  width: 100%;

  margin-top: 3px;

  line-height: 1.57;

  color: #3C4043;

}

b {

  color: #52565A;

}



/* Videos */

.videos-heading {

  margin-left: 21px;

  padding-bottom: 12px;

  font-size: 20px;

  line-height: 1.3;

  color: #222;

}

.videos {

  margin: 0 -20px 40px -21px;

}

.video-box {

  display: inline-block;

  margin-left: 5px;

  width: 204px;

  height: 300px;

  border: 1px solid #dfe1e5;

  border-radius: 8px;

}

.video-link {

  display: block;

}

.video-link:hover {

  text-decoration: underline;

  text-decoration-color: #1a0dab;

}

.video-link:visited:hover {

  text-decoration-color: #609;

}

.video-link:visited > .video-name {

  color: #609;

}

.video-name {

  padding: 13px 16px 0 16px;

  height: 6.875rem;

  line-height: 1.375;

  font-size: 16px;

  color: #1a0dab;

}

.video-channel {

  padding: 19px 0 0 16px;

  color: #808080;

}

.video-source {

  padding: 7px 0 0 16px;

  font-size: 12px;

}

.video-date {

  color: #808080;

}



/* Questions Box */

.questions-box {

  margin: 0 -20px 48px -20px;

  border: 1px solid #dfe1e5;

  border-radius: 8px;

}

.questions-box-title {

  font-size: 20px;

  padding: 9px 16px;

  line-height: 1.3;

}

.question {

  padding: 9px 16px;

  font-size: 16px;

  line-height: 1.58;

  border-top: 1px solid #e5e5e5;

  height: 50px;

}



/* Pregunta 1*/



.question1:hover {



  cursor: pointer;

}





.question1 {

  padding: 9px 16px;

  font-size: 16px;

  line-height: 1.58;

  border-top: 1px solid #e5e5e5;

  max-height: 50px;

  width: auto;

  word-wrap: break-word;

  transition: max-height 0.5s ease-in-out;

}



.inactive1 {

  height: auto;

  max-height: 600px;

  transition: max-height 1s ease-in-out;

}

.q1 {
  font-size: 18px;
}

.q1txt {



  width: auto;

  opacity: 0;

  padding-top: 20px;

  visibility: hidden;

  transition:visibility 0s ease-in-out 0.5s,opacity 0.5s ease-in-out;

}



.inactiveq1 {

  display: block;

  opacity: 1;

  visibility: visible;

  transition: opacity 0.5s ease-in-out;

}



.q1arrow {

  float: right;

  width: 24px;

  fill: currentColor;

  color: #70757A;

  transition: transform 0.3s ease-in-out;

}



.inactiveq1arrow {



  transform: rotate(180deg);

  transform-origin: 50% 50%;

  transition: transform 0.3s ease-in-out;

}



/* Pregunta 2*/



.question2:hover {



  cursor: pointer;

}



.question2 {

  padding: 9px 16px;

  font-size: 16px;

  line-height: 1.58;

  border-top: 1px solid #e5e5e5;

  max-height: 50px;

  width: auto;

  word-wrap: break-word;

  transition: max-height 0.5s ease-in-out;

}



.inactive2 {

  height: auto;

  max-height: 600px;

  transition: max-height 1s ease-in-out;

}

.q2 {
  font-size: 18px;
}

.q2txt {



  width: auto;

  opacity: 0;

  padding-top: 20px;

  visibility: hidden;

  transition:visibility 0s ease-in-out 0.5s,opacity 0.5s ease-in-out;

}



.inactiveq2 {

  display: block;

  opacity: 1;

  visibility: visible;

  transition: opacity 0.5s ease-in-out;

}



.q2arrow {

  float: right;

  width: 24px;

  fill: currentColor;

  color: #70757A;

  transition: transform 0.3s ease-in-out;

}



.inactiveq2arrow {



  transform: rotate(180deg);

  transform-origin: 50% 50%;

  transition: transform 0.3s ease-in-out;

}





/* Pregunta 3*/



.question3:hover {



  cursor: pointer;

}



.question3 {

  padding: 9px 16px;

  font-size: 16px;

  line-height: 1.58;

  border-top: 1px solid #e5e5e5;

  max-height: 50px;

  width: auto;

  word-wrap: break-word;

  transition: max-height 0.5s ease-in-out;

}



.inactive3 {

  height: auto;

  max-height: 600px;

  transition: max-height 1s ease-in-out;

}

.q3 {
  font-size: 18px;
}

.q3txt {



  width: auto;

  opacity: 0;

  padding-top: 20px;

  visibility: hidden;

  transition:visibility 0s ease-in-out 0.5s,opacity 0.5s ease-in-out;

}



.inactiveq3 {

  display: block;

  opacity: 1;

  visibility: visible;

  transition: opacity 0.5s ease-in-out;

}



.q3arrow {

  float: right;

  width: 24px;

  fill: currentColor;

  color: #70757A;

  transition: transform 0.3s ease-in-out;

}



.inactiveq3arrow {



  transform: rotate(180deg);

  transform-origin: 50% 50%;

  transition: transform 0.3s ease-in-out;

}



/* Pregunta 4*/



.question4:hover {



  cursor: pointer;

}



.question4 {

  padding: 9px 16px;

  font-size: 16px;

  line-height: 1.58;

  border-top: 1px solid #e5e5e5;

  max-height: 50px;

  width: auto;

  word-wrap: break-word;

  transition: max-height 0.5s ease-in-out;

}



.inactive4 {

  height: auto;

  max-height: 600px;

  transition: max-height 1s ease-in-out;

}

.q4 {
  font-size: 18px;
}

.q4txt {



  width: auto;

  opacity: 0;

  padding-top: 20px;

  visibility: hidden;

  transition:visibility 0s ease-in-out 0.5s,opacity 0.5s ease-in-out;

}

.q4txt ul {
    margin: revert;
    padding: revert;
    list-style: revert;
}

.inactiveq4 {

  display: block;

  opacity: 1;

  visibility: visible;

  transition: opacity 0.5s ease-in-out;

}



.q4arrow {

  float: right;

  width: 24px;

  fill: currentColor;

  color: #70757A;

  transition: transform 0.3s ease-in-out;

}



.inactiveq4arrow {



  transform: rotate(180deg);

  transform-origin: 50% 50%;

  transition: transform 0.3s ease-in-out;

}



.question-arrow {

  float: right;

  width: 24px;

  fill: currentColor;

  color: #70757A;

}

.question-feedback,

.related-search-feedback {

  padding: 6px 15px 0;

  float: right;

  font-size: 12px;

  font-style: italic;

  color: #70757a;

}

.question-feedback:hover,

.related-search-feedback:hover {

  text-decoration: underline;

}



/* Related Search */

.related-search-box {

  margin: 28px -20px 0 -20px;

  padding: 16px 0;

  border: 1px solid #dfe1e5;

  border-radius: 8px;

}

.item a:visited > .item-name {

  color: #609;

}

.related-search {

  margin: 0 0 3px 16px;

  color: #70757a;

}

.related-search-title {

  margin: 0 16px;

  color: #222;

  line-height: 1.3;

  font-size: 20px;

}

.more-related-items {

  float: right;

  margin-top: 4px;

  font-size: 14px;

  color: #70757a;

}

.more-related-items:hover {

  text-decoration: underline;

}

.items-links {

  display: flex;

  padding-bottom: 4px;

  padding-top: 14px;

}

.item {

  width: 72px;

  margin-left: 17px;

}

.item-name {

  margin-top: 3px;

  color: #1a0dab;

  overflow: hidden;

  text-overflow: ellipsis;

}

.item a {

  display: block;

}

.item a:hover {

  text-decoration: underline;

  text-decoration-color: #1a0dab;

}

.item a:visited:hover {

  text-decoration-color: #609;

}

.related-search-feedback {

  padding: 6px 0;

}



/* Related Searches */

.related-searches-heading {

  margin-top: 27px;

  padding-bottom: 20px;

  color: #222;

}

.related-searches-block {

  display: inline-flex;

}

.related-searches-card {

  display: flex;

  flex-direction: column;

}

.related-searches-card a {

  padding: 3px 32px 7px 0;

  font-weight: bold;

  color: #1a0dab;

}

.related-searches-card a:visited {

  color: #609;

}

.no-bold {

  font-weight: normal;

}

.related-searches-card a:hover {

  text-decoration: underline;

}



/* Bio */



.sidebar {



  border: 0;

  border-left: 1px solid #adadad;

  border-radius: 0;

  margin-left: 10%;

  margin-top: 5%;

  display: grid;

  grid-template-areas: 'tittle .'

                       'body .'

                       '. .';

  grid-template-rows: 370px 320px auto;

  grid-template-columns: 500px auto;

  max-height: 690px;



}



#tittle {

  font-size: 24px;

}



#subtittle {

  padding-top: 10px;

}



.bio-box-tittle {



  padding-left: 5%;

  padding-top: 1%;

  grid-area: tittle;

  

}



.galeria {

  padding-top: 2%;

  border-bottom: 1px solid #adadad;

  padding-bottom: 2%;

}



.bio-box {



  font-size: 14px;

}



.bio-box-body {



  padding-left: 5%;

  padding-top: 5%;

  

  grid-area: body;

  line-height: 1.58;



}



.bio-box-body-info {



  line-height: 2;

}



/* Pager */

.pager {

  margin: 30px auto;

  border-collapse: collapse;

}

tr {

  vertical-align: top;

}

.pager-td {

  padding: 0;

  text-align: center;

}

.pager-td a {

  color: #4285f4;

}

.pager-td a:hover {

  text-decoration: underline;

}

.pager-G {

  display: block;

  background: url(../img/google-pager.webp) no-repeat;

  background-position: -24px 0;

  width: 28px;

  height: 40px;

}

.pager-red-o {

  display: block;

  background: url(../img/google-pager.webp) no-repeat;

  background-position: -53px 0;

  width: 20px;

  height: 40px;

}

.pager-yellow-o {

  display: block;

  background: url(../img/google-pager.webp) no-repeat;

  background-position: -74px 0;

  width: 20px;

  height: 40px;

}

.pager-gle {

  display: block;

  background: url(../img/google-pager.webp) no-repeat;

  background-position: -96px 0;

  width: 71px;

  height: 40px;

}

.pager-next {

  margin-left: 53px;

}



/* Footer */

footer {

  display: grid;

  grid-template-columns: auto;

  grid-template-rows: 41.5px 40px;

  grid-template-areas:

    "auto"

    "auto";

  background: #f2f2f2;

  border-top: 1px solid #e4e4e4;

}

.location {

  grid-area: auto;

  line-height: 40px;

  border-bottom: 1px solid #e4e4e4;

}

.space {

  margin-left: 166px;

  font-size: 15px;

  color: rgba(0,0,0,.54);

}

.location-row {

  display: inline-block;

  margin-left: 13px;

  padding-left: 16px;

  border-left: 1px solid #e4e4e4;

  line-height: 25px;

}

.circle {

  border-radius: 100%;

  display: inline-block;

  width: 10px;

  height: 10px;

  margin: 7px 0 9px 0;

  vertical-align: middle;

  background: #9e9e9e;

}

.moonland {

  color: #333;

  font-weight: bold;

}

.loc,

.footer-loc-link,

.footer-link {

  color: #5f6368;

}

.footer-links {

  margin-left: 143px;

  line-height: 40px;

}

.footer-link {

  padding-left: 23px;

}

.footer-loc-link:hover,

.footer-link:hover {

  color: #333;

}



.sidebar-mobile {

  display: none;

}



hr {

  display: none;

}



@media (max-width: 1024px) {

  .grid{display: block;}

  header{display: block}

  #langPC {display: none;}

  #langPH {display: flex;align-items: center;}

  #langPH p {font-size: 2em;}

  #nav{width: 100vw;

    overflow-x: auto;

    white-space: nowrap;}

  #search-area{width: 100vw;}

  .search-container {margin-left: 10px;margin-right: 10px;}

  .search-bar{width: 100%;}

  .logo-area{width: 100vw; text-align: center;display: flex;justify-content: space-around;align-items: flex-end;}

  .logo{margin-top: 30px;}

  body{width: 100vw;}

  #apps-area{display: none;}

  #signin-area{display: none;}

  .results-stats{display: none;}

  .sidebar{display: none;}

  .sidebar-mobile{display: block;width: 100%;margin-bottom: 20px;}

  .bio-box-body{padding-left: 0;}

  .bio-box-tittle{padding-left: 0;}

  .search-results-block{padding-top: 20px;}

  hr{display: block;height:5px;border-width:0;background-color:#f1f3f4;margin-left: -20px;width: 100vw;margin-bottom: 20px;}

  footer{display: flex;flex-wrap: wrap;}

  .footer-links{margin-left: 0;}

}


#mousePH {

  display: none;
}

@media (max-width: 500px) {

  #imagen1, #imagen2 {
    width: 155px;
  }

  }

@media (max-width: 400px) {

  #mousePC {

    display: none;
  }

#mousePH {

    display: block;

    margin-left: auto;

    margin-right: auto;

    margin-bottom: 30px;

    animation-name: mouses;

    animation-duration: 2s;
  
    animation-iteration-count: infinite;
  
    animation-timing-function: ease-in-out;

}



@keyframes mouses {

  0%{transform: translateY(20px);}

  

  50%{transform: translateY(0px);}



  100%{transform: translateY(20px);}

}

}