.tooltipx {
  position:relative; /* making the .tooltip span a container for the tooltip text */
  border-bottom:1px dashed #000; /* little indicater to indicate it's hoverable */
}


.tooltipx:before {
  content: attr(data-text); /* here's the magic */
  position:absolute;

  /* vertically center */
  top:300%;
  transform:translateY(-50%);

  /* move to right */
  left:100%;
  margin-left:15px; /* and add a small left margin */

  /* basic styles */
  width:200px;
  padding:10px;
  border-radius:10px;
  background:#000;
  color: #fff;
  text-align:center;

  display:none; /* hide by default */

  z-index:2000;

  opacity:0;
  transition:.3s opacity;
}

.tooltipx.left:before {
  /* reset defaults */
  left:initial;
  margin:initial;

  /* set new values */
  right:100%;
  margin-right:15px;
}

.tooltipx:hover:before {
/*  display:block;*/
  opacity:1;
}

.tooltipx:after {
  content: "";
  position:absolute;

  /* position tooltip correctly */
  left:100%;
  margin-left:-5px;

  /* vertically center */
  top:50%;
  transform:translateY(-50%);

  /* the arrow */
  border:10px solid #000;
  border-color: transparent black transparent transparent;

  display:none;

  opacity:0;
  transition:.3s;
}
.tooltipx:hover:before, .tooltip:hover:after {
  display:block;
}

.tooltipx:hover:after {
  opacity:1;
}


.p3 {
  font-family: "Verdana", "Tahoma", "Lucida Console";
  font-size: 2em;
  font-weight: bold;
  font-variant: small-caps;
  color: #f4f4f4;
 	-webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: #231F69;
}

.video-wrapper {
  position: relative;
}

.video-wrapper object,
.video-wrapper embed,
.video-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.video-wrapper {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
}

.bg-shade {
  background-color: rgba(0,0,0,0.45);
  padding: 20px 20px;
}

:root {
  --size: 40px;
}

.c-pp {
  position: absolute;
  width: var(--size);
  height: var(--size);
  display: block;
  border: calc(var(--size) / 30) solid #fff;
  border-radius: 25%;
  padding: 0;
  margin: 0 auto;
  cursor: pointer;
  transform: translate(50%,50%);
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
.c-pp__icon {
  box-sizing: border-box;
  display: block;
  position: absolute;
  transition: all 0.2s ease;
  width: 25%;
  height: 60%;
  transform: translate(150%,-10%);
  top: calc(var(--size) / 4);
  border-top: 0 solid transparent;
  border-right: calc(var(--size) / 12) solid #fff;
  border-bottom: 0 solid transparent;
  border-left: calc(var(--size) / 12) solid #fff;
}
.c-pp.is-play .c-pp__icon {
  transform: translate(110%,-15%);
  border-top: calc(var(--size) / 3) solid transparent;
  border-right: 0px solid transparent;
  border-bottom: calc(var(--size) / 3) solid transparent;
  border-left: calc(var(--size) / 3) solid #fff;
}


/*****************************/


.destaca {
  font-family: fantasy;
  font-weight:bold;
  white-space: nowrap;
}

br2 {
  display: block; /* makes it have a width */
  content: ""; /* clears default height */
  margin-top: 1.0em; /* 0.75em = normal */
}

br05 {
  display: block; /* makes it have a width */
  content: ""; /* clears default height */
  margin-top: 0.5em; /* 0.75em = normal */
}

br025 {
  display: block; /* makes it have a width */
  content: ""; /* clears default height */
  margin-top: 0.25em; /* 0.75em = normal */
}

/* Works on Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: #231F69 #f4f4f4; /*333c87 171839*/
}

/* Works on Chrome, Edge, and Safari */
*::-webkit-scrollbar {
  width: 10px;
}

*::-webkit-scrollbar-track {
  background: #f4f4f4;
  /*border-radius: 10px;*/
}

*::-webkit-scrollbar-thumb {
/*  background-color: #231F69;
  border-radius: 20px;
  border: 3px solid #f4f4f4;*/
  background-image: linear-gradient(45deg, #231F69, #a68eff); /*#00aeff, #a68eff);*/
  border-radius: 5px;
	-webkit-box-shadow: rgba(0,0,0,.12) 0 3px 13px 1px;
}

/*************************/

.hidden {
  display: none;
}

.button
{
    display:block;
    opacity: 0.9;
/*    width:10%;
    min-width: 80px;
    height:auto;*/
    color:#fff;
    position: fixed;
    left:50%;
    top:20px;
    border-radius:50%;
    line-height:80px;
    text-align:center;
    z-index:999;
    align-items: center;
    transform: translateX(-42px);

    width: 84px;
    height: 44px; /* canvas size */
    margin: -20px auto 0 auto;
    overflow: hidden;
}

.button.b2
{
    border-radius: 2px;
}

.checkbox
{
    position: relative;
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    opacity: 0;
    cursor: pointer;
    z-index: 3;
}
.knobs
{
    z-index: 2;
}

.layer
{
    width: 100%;
    background-color: #ebf7fc;
    transition: 0.3s ease all;
    z-index: 1;
}

#button-en-es .knobs:before, #button-en-es .knobs:after, #button-en-es .knobs span
{
    position: absolute;
    top: 4px;
    width: 38px; /* knobs width */
    font-size: 15px;
    font-weight: bold;
    text-align: center;
    line-height: 1;
    padding: 18px 0px; /* knobs height */
    border-radius: 2px;
    transition: 0.3s ease all;
    vertical-align: -5px;
}

#button-en-es .knobs:before
{
    content: '';
    left: 4px;
    height: 8px;
    background-color: #03A9F4;
}

#button-en-es .knobs:after
{
    content: '';
    right: 0px;
    color: #4e4e4e;
    top: 7px;
    background-image: url("../images/flag_es_24px.png");
    background-size: 30px;
    background-repeat: no-repeat;
    opacity: 0.5;
}

#button-en-es .checkbox:checked + .knobs:after
{
    opacity: 1;
}

#button-en-es .checkbox:unchecked + .knobs span
{
    opacity: 1;
}

#button-en-es .checkbox:checked + .knobs span
{
    opacity: 0.5;
}

#button-en-es .checkbox:unchecked + .knobs:after
{
    opacity: 0.5;
}

#button-en-es .checkbox:checked + .knobs:after
{
    opacity: 1;
}

#button-en-es .knobs span
{
    top: 7px;
    display: inline-block;
    left: 8px;
    color: #fff;
    z-index: 1;
    height: 3px;
    background-image: url("../images/flag_uk_24px.png");
    background-size: 30px;
    background-repeat: no-repeat;
}

#button-en-es .checkbox:checked + .knobs span
{
    color: #4e4e4e;
}

#button-en-es .checkbox:checked + .knobs:before
{
    left: 42px;
    background-color: #F44336;
    opacity: 1;
}

#button-en-es .checkbox:checked + .knobs:after
{
    color: #fff;
}

#button-en-es .checkbox:checked ~ .layer
{
    background-color: #fcebeb;
}

#ytd-url {
  display: block;
  position: fixed;
  right: 0;
  bottom: 0;
  padding: 10px 14px;
  margin: 20px;
  color: #fff;
  font-size: 14px;
  text-decoration: none;
  background-color: #143240;
  border-radius: 4px;
  box-shadow: 0 10px 20px -5px rgba(20, 50, 64, 0.76);
}

/*********************************/

.container-logo {
  display: flex;
  justify-content: space-around;
  align-items: flex-start;
  width:10%;
  height:auto;
  background: rgba(114, 186, 94, 0.05);
}

.btn-logo,
.btn-reserva {
       display:block;
       opacity: 0.75;
       width:10%;
       min-width: 110px;
       height:auto;
       color:#fff;
       position: fixed;
       /*left:5px;*/
       left:-100%;
       top:5px;
       border-radius:50%;
       /*line-height:40px;*/
       text-align:center;
       z-index:999;
}

.btn-reserva {
       transform: translateY(110%);
}

.btn-logo-show,
.btn-reserva-show {
  display:block;
  opacity: 0.75;
  width:10%;
  min-width: 110px;
  height:auto;
  color:#fff;
  position: fixed;
  left:5px;
  top:5px;
  border-radius:50%;
  /*line-height:40px;*/
  text-align:center;
  z-index:999;
}

.btn-reserva-show {
       transform: translateY(110%);
}

/*@media (max-width: 767px) {
  .btn-reserva {
    left:2px;
  }
}*/

.btn-galeria,
.btn-videos {
       display:block;
       opacity: 0.85;
       width:10%; /*180px;*/
       min-width: 110px;
       height:auto;
       color:#fff;
       position: fixed;
       top:5px;
       /*top:-100%;*/
       right:-100%;
       border-radius:50%;
       /*line-height:0px;*/
       text-align:center;
       z-index:999;
}

/*@media (max-width: 767px) {
  .btn-galeria,
  .btn-videos {
    right:0px;
  }
}
*/

.btn-videos {
       transform: translateY(95%);
}

.btn-galeria-show,
.btn-videos-show {
       display:block;
       opacity: 0.85;
       width:10%; /*180px;*/
       min-width: 80px;
       height:auto;
       color:#fff;
       position: fixed;
       right:5px;
       top:0px;
       border-radius:50%;
       /*line-height:0px;*/
       text-align:center;
       z-index:999;
}

.btn-videos-show {
       transform: translateY(95%);
}

@media (max-width: 767px) {
  .btn-galeria-show,
  .btn-videos-show {
    right:0px;
  }
}


.btn-whatsapp {
       display:block;
       width:60px;
       height:60px;
       color:#fff;
       position: fixed;
       right:10px;
       bottom:10px;
       border-radius:50%;
       /*line-height:80px;*/
       text-align:center;
       z-index:999;
}

@media (max-width: 767px) {
  .btn-whatsapp {
       right:5px;
       bottom:5px;
  }
}

.btn-phone {
       display:block;
       width:60px;
       height:60px;
       color:#fff;
       position: fixed;
       left:10px;
       bottom:10px;
       border-radius:50%;
       /*line-height:80px;*/
       text-align:center;
       z-index:999;
}

@media (max-width: 767px) {
  .btn-phone {
       left:5px;
       bottom:5px;
  }
}

img.invert {
  filter: invert(100%);
  opacity: 0.9;
}

scrollin {
  display:none;
}

scrollin_top {
  /*display:none;*/
}

scrollin_left {
  /*display:none;*/
}

scrollout {
  /*display:none;*/
}

a.text-galeria span {
    position: fixed;
    /*top: 30px;*/
    top: -110px;
    left: 5px;
    width: 10%;
    border: #000 1px solid;
    background: #F8F8F8;
    padding: 5px;
    z-index: 999;
    display: inline;
    /*opacity: 0;*/
    /*transition: 750ms all;*/
}

a.text-galeria:hover span {
    outline: none;
    text-decoration: none;
    font-size: 70%;
    color: #000;
    opacity: 1;
}

.img-derecha{
  float: right;
  width: 40%;
}

@media (max-width: 900px) {
  .img-derecha {
       width:70%;
  }
}

@media (max-width: 767px) {
  .img-derecha {
       width:100%;
  }
}