body,
html {
  /* height: 100%; */
  font-family: 'Open sans', sans-serif !important;
  font-weight: 400 !important;
  font-size: 14px;
}

#page-container {
  position: relative;
  min-height: 93vh;
}

#content-wrap {
  padding-bottom: 5.5rem;    /* Footer height */
}

#footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 5.5rem;            /* Footer height */
}

.div-centrado{
  margin: 1px 10%;
  /* text-align: center; */
}

.slider__page {
   /*position: relative; */
   width: 100%;
   height: 100vh;
}

.round {
  position: relative;
}

fieldset{
  border: 2px solid #495057 !important;
  border-radius: 8px;
  font-size: 0.8rem;
}

fieldset legend{
  margin-left: 10%;
  padding: 14px;
  font-weight: 800;
}

.round label {
  background-color: #fff;
  border: 1px solid #212529;
  border-radius: 50%;
  cursor: pointer;
  height: 28px;
  /* left: 48px; */
  position: absolute;
  margin-top: -33px;
  margin-left: auto;
  margin-right: auto;
  width: 28px;
  /* right: 31px; */
}

.round label:after {
  border: 2px solid #fff;
  border-top: none;
  border-right: none;
  content: "";
  height: 6px;
  left: 7px;
  opacity: 0;
  position: absolute;
  top: 8px;
  transform: rotate(-45deg);
  width: 12px;
}

.round input[type="checkbox"] {
  visibility: hidden;
  height: 25px;
}

.round input[type="checkbox"]:checked + label {
  background-color: #66bb6a;
  border-color: #66bb6a;
}

.round input[type="checkbox"]:checked + label:after {
  opacity: 1;
}




.btnSig:hover{
  background-color: #ededed;
}

.btnSig{
  position: absolute;
  bottom: 10%;
  /*right:25%;*/
  font-size: 3em;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background-color: #fff;
  text-decoration: none;
  color:gray;
  text-align: center;
  line-height: 41px;
  cursor:pointer;
  z-index: 1;
}


#btnSalir:hover{
  background-color: #ededed;
}

#btnSalir{
  position: absolute;
  bottom: 10%;
  /*right:25%;*/
  padding: 8px;
  /*font-size: 1em;*/
  /*width: 70px;*/
  /*height: 70px;*/
  border-radius: 5%;
  background-color: #fff;
  text-decoration: none;
  color:gray;
  text-align: center;
  /*line-height: 50px;*/
  cursor:pointer;
}

.caja {
  color: #fff;
  border-radius: 18px;
  font-family: 'Open sans', 'Open sans', sans-serif;
}

.caja hr {
  border: solid 1px #fff;
}

.pResults {
  font-size: 1.5vw;
  font-family: 'Open sans', sans-serif;
  color: #fff;
  margin-bottom: 1px !important;
}

.resNumber {
  font-family: 'Open sans', 'Open sans', sans-serif;
  font-size: 5vh;
  color: #fff;
  font-weight: 800;
  line-height: 0.9;
}

.resNumberBig {
  font-family: 'Open sans', 'Open sans', sans-serif;
  font-size: 5.1vh;
  color: #fff;
  font-weight: 800;
  line-height: 1.1;
}

.derecha{
  text-align:right;
}

.centrar{
  text-align:center;
}

.bigtexto{
  font-family: 'Open sans', 'Open sans', sans-serif;
  font-size: 6vh;
  color: #4c4c4c;
  font-weight: 800;
  line-height: 0.9;
}

.mediotexto{
  font-family: 'Open sans', 'Open sans', sans-serif;
  font-size: 3vh;
  color: #4c4c4c;
  /* text-shadow: 1px 1px 10px lightgray; */
  font-weight: 800;
  line-height: 1.5;
  /* font-weight: bold; */
}


.triangulo {
  height: 53%;
  top: 6%;
  position: relative;
}

/*.triangulo:before {
  content: "";
  width: 0px;
  height: 0px;
  position: absolute;
  border-left: 20px solid transparent;
  border-right: 20px solid #e5eca9;
  border-top: 30px solid #e5eca9;
  border-bottom: 30px solid transparent;
  left: -39px;
  top: 10px;
}
*/
.cajaintro {
  margin: 20px auto;
  background-color:#e5eca9;
  padding: 20px;
  /* position:relative; */
  min-height: 75%;
}


.sabermas{
  position: absolute;
  bottom: 12px;
  right: 19px;
  /*font-size: 0.7em;*/
  color: #FAFAFA !important;
  text-decoration: none;
}

.sabermas a{
    color: #FAFAFA !important;
    text-decoration: none;
}

.caja {
  margin: 20px auto;
  background-color:#e5eca9;
  padding: 20px;
  position:relative;
  height: 90%;
}

.textoGris{
  color: #4c4c4c;
}

.divResult{
  min-width: 50%;
}

    .footer{
      position: absolute;
      width:100% !important;
      bottom: 0px;
      padding: 0rem 1.4rem;
    }

      #inicial {
/*        background: linear-gradient(225deg, #ffc27d, #ff8e93);
*/      }
      .slide-0 {
        /*background: linear-gradient(#65cce1, #6365ec);*/
      }
      .slide-1 {
        /*background: linear-gradient(#d2fcad, #22eaeb);*/
      }
      .slide-2{
        /*background: linear-gradient(#f0bed4, #a163f5);*/
      }
      .slide-3 {
        /*background: linear-gradient(225deg, #ffc27d, #ff8e93);*/
      }
      .slide-4 {
        /*background: linear-gradient(#f3defc, #63a3e6);*/
      }
      #final {
        /*background: linear-gradient(#65cce1, #6365ec);*/
      }
/*
      section > div {
        position: absolute;
        top: 46%;
        left: 48%;
        transform: translate(-49%, -50%);
        width: 77% !important;
         font-size: 0.8em; 
      }
     */ 

      section > div > .texto {font-size: 6vh;font-family: 'Open sans', 'Open sans', sans-serif; color: #000;line-height: 1.2 !important;}


@media screen and (min-height: 431px) and (max-height: 600px) and (orientation: landscape){
      #logoGIZfoot{
        /* height: 40px; */
      }  
      h1 {
        font-size: 1.5em !important;
      }
      p {
        font-size: 1em !important;
        line-height: 1.3 !important;
        margin-bottom: 2px !important;
      }

      .pResults{
        font-size: 1.2em !important;
      }

      .bigTexto{
        font-size: 3em !important;
      }

      .divResult{
        font-size: 1.4em !important;
      }


      .btn-block {
        margin-top:5px !important;
        font-size: 0.8em !important;
        padding: .175rem .15rem !important;
      }
      .form-control{
        /* height:26px !important; */
        /* font-size: 11px !important; */
      }

      section > div > .texto {
        font-size: 6vh !important;font-family: 'Open sans', 'Open sans', sans-serif;color: #fff ;
      }

      footer{
        margin-top: 4px !important;
        /*display: none !important;
      }

      #divfootnl{
        margin: 8px 4px !important;
      }

      .btnSig, #btnSalir{
        bottom: 14% !important;
        right: 1.5% !important;
      }
    
      section > .snuggle {
        position: absolute;
        /* top: 1%; */
        /* left: 47%; */
        width: 77%;
        /* margin: 18px; */
        /* transform: translate(50%, 50%); */
        font-size: 0.8em;
      }
}


@media screen and (max-height: 430px) and (orientation:landscape){
      #logoGIZfoot{
        height: 40px;
      }
      h1 {
        font-size: 1.2em !important;
      }
      p {
        font-size: 0.8em !important;
        line-height: 1.3 !important;
        margin-bottom: 2px !important;
      }
      .btn-block {
        margin-top:5px !important;
        font-size: 0.8em !important;
        padding: .175rem .15rem !important;
      }
      .form-control{
        height:26px !important;
        font-size: 11px !important;
      }

      section > div > .texto {
        font-size: 6vh !important;
        font-family: 'Open sans', sans-serif;
        color: #fff;
      }

      footer{
        margin-top: 4px !important;
        display: none !important;
      }

      #divfootnl{
        margin: 8px 4px !important;
      }

      .btnSig, #btnSalir{
        bottom: 14% !important;
        right: 1.5% !important;
      }
    
      section > .snuggle {
        position: absolute;
        /* top: 1%; */
        /* left: 47%; */
        width: 77%;
        /* margin: 18px; */
        /* transform: translate(50%, 50%); */
        font-size: 0.8em;
      }

}

@media only screen and (max-width: 600px) and (orientation:portrait){
      h1 {
        font-size: 1.2em !important;
      }
      p {
        font-size: 0.8em !important;
        line-height: 1.2 !important;
        margin-bottom: 3px !important;
      }

      .pResults{
        font-size: 1.2em !important;        
      }
      
      .bigTexto{
        font-size: 5vh;
      }

      .btn-block {
        margin-top:5px !important;
        font-size: 0.8em !important;
        padding: .175rem .15rem !important;
      }
      .form-control{
        height:32px !important;
      }

      section > div > .texto {
        font-size: 8vh!important;font-family: 'Open sans', sans-serif;color: #fff ;
      }

      #logoGIZfoot{
        /* height:60px; */
        /* width: auto; */
      }

/*      .btnSig{
        width
      }
*/
/*      .slider__page {
        position: relative;
        width: 100%;
        height: 100%;
      }
*/

      section > .snuggle {
        position: absolute;
        top: 0%;
        left: 3%;
        width: 72%;
        margin: 18px;
        transform: translate(13%, 3%);
      }

 }

    .resp-sharing-button__link,
.resp-sharing-button__icon {
  display: inline-block
}

.resp-sharing-button__link {
  text-decoration: none;
  color: #fff;
  margin: 0.3em;
}

.resp-sharing-button {
  font-size: 18px;
  border-radius: 5px;
  transition: 25ms ease-out;
  padding: 0.5em 0.65em;
  font-family: Helvetica Neue,Helvetica,Arial,'Open sans', sans-serif;
}

.resp-sharing-button__icon svg {
  width: 1em;
  height: 1em;
  margin-right: 0.4em;
  vertical-align: top
}

.resp-sharing-button--small svg {
  margin: 0;
  vertical-align: middle
}

/* Non solid icons get a stroke */
.resp-sharing-button__icon {
  stroke: #fff;
  fill: none
}

/* Solid icons get a fill */
.resp-sharing-button__icon--solid,
.resp-sharing-button__icon--solidcircle {
  fill: #fff;
  stroke: none
}

.resp-sharing-button--twitter {
  background-color: #55acee
}

.resp-sharing-button--twitter:hover {
  background-color: #2795e9
}

.resp-sharing-button--pinterest {
  background-color: #bd081c
}

.resp-sharing-button--pinterest:hover {
  background-color: #8c0615
}

.resp-sharing-button--facebook {
  background-color: #3b5998
}

.resp-sharing-button--facebook:hover {
  background-color: #2d4373
}

.resp-sharing-button--tumblr {
  background-color: #35465C
}

.resp-sharing-button--tumblr:hover {
  background-color: #222d3c
}

.resp-sharing-button--reddit {
  background-color: #5f99cf
}

.resp-sharing-button--reddit:hover {
  background-color: #3a80c1
}

.resp-sharing-button--google {
  background-color: #dd4b39
}

.resp-sharing-button--google:hover {
  background-color: #c23321
}

.resp-sharing-button--linkedin {
  background-color: #0077b5
}

.resp-sharing-button--linkedin:hover {
  background-color: #046293
}

.resp-sharing-button--email {
  background-color: #777
}

.resp-sharing-button--email:hover {
  background-color: #5e5e5e
}

.resp-sharing-button--xing {
  background-color: #1a7576
}

.resp-sharing-button--xing:hover {
  background-color: #114c4c
}

.resp-sharing-button--whatsapp {
  background-color: #25D366
}

.resp-sharing-button--whatsapp:hover {
  background-color: #1da851
}

.resp-sharing-button--hackernews {
background-color: #FF6600
}
.resp-sharing-button--hackernews:hover, .resp-sharing-button--hackernews:focus {   background-color: #FB6200 }

.resp-sharing-button--vk {
  background-color: #507299
}

.resp-sharing-button--vk:hover {
  background-color: #43648c
}

.resp-sharing-button--facebook {
  background-color: #3b5998;
  border-color: #3b5998;
}

.resp-sharing-button--facebook:hover,
.resp-sharing-button--facebook:active {
  background-color: #2d4373;
  border-color: #2d4373;
}

.resp-sharing-button--twitter {
  background-color: #55acee;
  border-color: #55acee;
}

.resp-sharing-button--twitter:hover,
.resp-sharing-button--twitter:active {
  background-color: #2795e9;
  border-color: #2795e9;
}

.resp-sharing-button--tumblr {
  background-color: #35465C;
  border-color: #35465C;
}

.resp-sharing-button--tumblr:hover,
.resp-sharing-button--tumblr:active {
  background-color: #222d3c;
  border-color: #222d3c;
}

.resp-sharing-button--email {
  background-color: #777777;
  border-color: #777777;
}

.resp-sharing-button--email:hover,
.resp-sharing-button--email:active {
  background-color: #5e5e5e;
  border-color: #5e5e5e;
}

.resp-sharing-button--pinterest {
  background-color: #bd081c;
  border-color: #bd081c;
}

.resp-sharing-button--pinterest:hover,
.resp-sharing-button--pinterest:active {
  background-color: #8c0615;
  border-color: #8c0615;
}

.resp-sharing-button--linkedin {
  background-color: #0077b5;
  border-color: #0077b5;
}

.resp-sharing-button--linkedin:hover,
.resp-sharing-button--linkedin:active {
  background-color: #046293;
  border-color: #046293;
}

.resp-sharing-button--reddit {
  background-color: #5f99cf;
  border-color: #5f99cf;
}

.resp-sharing-button--reddit:hover,
.resp-sharing-button--reddit:active {
  background-color: #3a80c1;
  border-color: #3a80c1;
}

.resp-sharing-button--whatsapp {
  background-color: #25D366;
  border-color: #25D366;
}

.resp-sharing-button--whatsapp:hover,
.resp-sharing-button--whatsapp:active {
  background-color: #1DA851;
  border-color: #1DA851;
}

.resp-sharing-button--vk {
  background-color: #507299;
  border-color: #507299;
}

.resp-sharing-button--vk:hover
.resp-sharing-button--vk:active {
  background-color: #43648c;
  border-color: #43648c;
}

.resp-sharing-button--telegram {
  background-color: #54A9EB;
}

.resp-sharing-button--telegram:hover {
  background-color: #4B97D1;}


/* HBS 2022-07 Mobile version */
@media only screen and (max-width: 800px) {
  .div-centrado{
    margin: 1px 4%;
  }
}
@media only screen and (max-width: 400px) {
  .div-centrado{
    margin: 1px 4px;
  }
}

/* HBS 2022-07 Form element styles */
input[type="radio"], input[type="checkbox"] {
  margin:auto 4px auto 5px !important;
}
textarea {
  width: inherit !important;
}
label.question {
  font-weight: bold;
}
.bordered-top {
  border-top: 1px solid #CCC;
}

.q-section {
  padding: 15px 10px;
  margin: 40px 0 10px 0;
  color: #FFF;
  background-color: #b0ce28;
  border-radius: .25rem;
}