#fotoDestino:before, #fotoDestino:after{ content: ' '; display: table; }  #fotoDestino:after{ clear: both; }  #fotoDestino > div > img{ width: 100%; background-size: cover; background-position: center; border-radius: 4px; display: block; cursor: pointer; }  #fotoDestino{ white-space: nowrap; overflow: auto; }  #fotoDestinoCont{ margin-bottom: 20px; position: absolute; bottom: 0; left: 0; right: 0; z-index: 5; padding: 5px; background-color: rgba(0, 0, 0, 0.6); margin-bottom: 0; text-align: left; }  #fotoDestino::-webkit-scrollbar-track{ background-color: transparent; } #fotoDestino::-webkit-scrollbar{ -webkit-appearance: none; } #fotoDestino::-webkit-scrollbar:horizontal{ height: 10px; } #fotoDestino::-webkit-scrollbar-thumb{ border-radius: 8px; border: 2px solid #FFF; background-color: rgba(255, 255, 255, 0.7); }  #fotoDestino > div{ width: 33%; padding: 5px; }  #fotoDestino > div{ display: inline-block; position: relative; }  #fotoScrollRight, #fotoScrollLeft{ position: absolute; top: 0; bottom: 0; width: 40px; display: -webkit-flex; display:  -ms-flexbox; display: 		 flex; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-transition: border 0.2s linear; -moz-transition: border 0.2s linear; transition: border 0.2s linear; } @-moz-document url-prefix() { #fotoScrollRight, #fotoScrollLeft{ bottom: 0; } }  #fotoScrollRight{ right: 0; border-right: 0px solid rgba(0, 0, 0, 0.6); background: -webkit-linear-gradient(to right, transparent , rgba(0, 0, 0, 0.6)); background:    -moz-linear-gradient(to right, transparent , rgba(0, 0, 0, 0.6)); background:         linear-gradient(to right, transparent , rgba(0, 0, 0, 0.6)); } #fotoScrollRight:hover{ border-right-width: 5px; }  #fotoScrollLeft{ left: 0; border-left: 0px solid rgba(0, 0, 0, 0.6); background: -webkit-linear-gradient(to right, rgba(0, 0, 0, 0.6) , transparent); background:    -moz-linear-gradient(to right, rgba(0, 0, 0, 0.6) , transparent); background: 		linear-gradient(to right, rgba(0, 0, 0, 0.6) , transparent); } #fotoScrollLeft:hover{ border-left-width: 5px; }  #fotoScrollRight img, #fotoScrollLeft img{ display: block; margin: auto; width: 20px; opacity: 0.7; -webkit-transition: opacity 0.3s; -moz-transition: opacity 0.3s; transition: opacity 0.3s; }  #fotoScrollRight:hover img, #fotoScrollLeft:hover img{ opacity: 0.9; }   .description, #fotoEnlazarDesc{ position: absolute; background-color: rgba(0,0,0,0.5); color: #fff; font-size: 11px; } .description{ bottom: 5px; left: 5px; right: 5px; padding: 10px; white-space: normal; border-radius: 0 0 4px 4px; text-shadow: -0.5px -0.5px 0px rgb(0, 0, 0), 1px 1px 0px rgb(0, 0, 0); }   #fotoEnlazarDesc{ bottom: 0; left: 0; border-top-right-radius: 4px; text-align: left; padding: 15px; font-size: 14px; } .description:empty{display: none;}  .description > span, #fotoEnlazarDesc > span{ display: block; line-height: 1; font-weight: bold; } .description > .esp{ font-size: 12px; } .description > .esp ~ .ing{ margin-top: 3px; } #desEsp{ font-size: 16px; margin-bottom: 5px; }  .description > .ing, #desIng{ color: #DADADA; }  #fotoEnlazarDesc > span{ display: block; line-height: 1; }  #fotoEnlazar{ display: inline-block; box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.47),0 2px 10px 0 rgba(0, 0, 0, 0.21); border: 1px solid #fff; } #fotoEnlazar{ position: relative; }  #inputFotoEnlazar{ max-width: none !important; display: block; border-radius: 2px; user-drag: none; user-select: none; -moz-user-select: none; -webkit-user-drag: none; -webkit-user-select: none; -ms-user-select: none; }     .helperLink2{ position: absolute; z-index: 1; cursor: pointer; color: #FFFFFF; text-shadow: -0.5px -0.5px 0px rgba(0, 0, 0, 0.5), 1px 1px 0px rgba(0, 0, 0, 0.5); }  .helperLink2 > img{ width: 35px; background-color: #73BDEF; border-radius: 50%; box-shadow: 1px 1px 0px rgba(0, 0, 0, 0.5); }    #modalPanel{ z-index: 100; display: none !important; opacity: 0; } body.modalPanel{overflow: hidden;} body.modalPanel #modalPanel{ display: block !important; } body.modalPanel.showModal #modalPanel{ opacity: 1; } .hidden{display: none;}  #modalPanel > img.times{ width: 20px; position: absolute; right: 10px; top: 10px; opacity: 0.7; } #modalPanel > img.times:hover{opacity: 0.9}  #modalPanel > div{ max-width: 1046px; padding: 0; height: calc(100% - 45px); margin: auto; margin-top: 45px; overflow: hidden; background-color: #fff; position: relative; }  .modalDialog { position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0,0,0,0.7); -webkit-transition: opacity 0.3s, visibility 0.3s; -moz-transition: opacity 0.3s, visibility 0.3s; transition: opacity 0.3s, visibility 0.3s; }  #fotoEnlazarCont{ position: absolute; top: 0; left: 0; right: 0; bottom: 0; text-align: center; padding: 15px; padding-bottom: calc(33% + 35px); overflow: auto;  }  @media (min-width: 500px){ #fotoDestino > div{ width: 10%; } #fotoEnlazarCont{padding-bottom: calc(16% + 30px)} }  #tourFotos{ text-decoration: none; display: inline-block; font-size: 12px; margin-top: 5px; padding: 5px 10px; border-radius: 6px; box-shadow: 1px 1px 1px #7C50A8; color: #629192; background-color: #F9FAFD; }  @media (min-width: 768px){  #modalPanel > div{ height: calc(100% - 60px); width: calc(100% - 60px); margin-top: 30px; border-radius: 5px; }    }