html,body{
font-family: 'Source Sans Pro', sans-serif;
height: 100%;
width: 100%;
}
#customBtn,#customBtn1 {
display: inline-block;
background: white;
color: #444;
border-radius: 5px;
border: thin solid #888;
box-shadow: 1px 1px 1px grey;
white-space: nowrap;
}
#customBtn:hover,#customBtn1:hover {
cursor: pointer;
}
#btn-sidebar {
color: #f1f1f1;
position: absolute;
z-index: 5;
top: 2%;
right: 1%;
}
span.label {
font-family: serif;
font-weight: normal;
}
span.icon {
background: url('img/g-normal.png') transparent 5px 50% no-repeat;
width: 50px;
height: 50px;
background-size: 42px 42px;
display: inline-block;
vertical-align: middle;
}
span.buttonText {
text-align: left;
vertical-align: middle;
margin-left: 10px;
font-size: 18px;
/* Use the Roboto font that is loaded in the */
font-family: 'Roboto', sans-serif;
}
#btn-perfil{
position: absolute;
z-index: 5;
left: 1%;
top: 2%;
}
.titulo1{
margin: 0 !important;
font-size: 150%;
color: white;
padding-left: 0.2em;
padding-right: 0.2em;
padding-top: 0.5em;
padding-bottom: 0.5em;
}
.ir-atras {
display:block;
height: 2em;
width: 2em;
border:1px solid black;
text-align: center;
vertical-align: middle;
border-radius: 50%;
display: inline-block;
background: #fff;
font-size:1em;
color:#00336c;
line-height: 2em;
cursor:pointer;
position: absolute;
top: 2%;
left: 2%;
z-index: 5;
}
#ico{
margin: 0 !important;
padding: 0 !important;
position: absolute;
z-index: 5;
right: 1%;
top: 1%;
}
#ico2{
margin: 0 !important;
padding: 0 !important;
position: absolute;
z-index: 5;
left: 2%;
top: 10%;
}
#map {
height: 100%;
}
div #map {
width: 100%;
height: 100%;
}
.titulo_ficaapp{
font-family: 'Righteous', cursive;
font-weight: 700;
font-size: 4em;
}
.boton1{
margin: 0 !important;
font-size: 150%;
color: white;
cursor: pointer;
padding-left: 0.2em;
padding-right: 0.2em;
padding-top: 0.5em;
padding-bottom: 0.5em;
}
.inner_block{
border-radius: 7px;
border: 3px solid white;
}
/* otros */
.b_submit{
padding-left: 1em;
margin-top: 1em;
}
.col-centered{
float: none;
margin: 0 auto;
}
.directions{
padding-left: 1em;
color: black;
margin-top: 2em;
}
#invitado:hover{
text-decoration: none;
}
#floating-panel3:hover{
cursor: pointer;
}
#floating-panel1 {
position: absolute;
top: 7%;
left: 3%;
z-index: 5;
background-color: #33CC33;
color: white;
text-align: center;
padding: 5px;
border: 1px solid black;
text-align: center;
font-family: 'Roboto','sans-serif';
line-height: 30px;
padding-left: 10px;
}
#volver_mapa {
position: absolute;
bottom: 7%;
left: 7%;
z-index: 5;
color: white;
font-family: 'Roboto','sans-serif';
line-height: 30px;
width: 5em;
height: 3em;
background: #880e4f;
color: white;
margin: 0 auto;
cursor: pointer;
width: 20%;
}
#volver_mapa:before
{
content:"";
position: absolute;
color: black;
right: 100%;
width: 0;
height: 0;
border-top: 1.5em solid transparent;
border-right: 1em solid #880e4f;
border-bottom: 1.5em solid transparent;
}
#volver_mapa {
position: absolute;
bottom: 7%;
left: 7%;
z-index: 5;
color: white;
font-family: 'Roboto','sans-serif';
line-height: 30px;
width: 5em;
height: 3em;
background: #880e4f;
color: white;
margin: 0 auto;
cursor: pointer;
width: 20%;
}
#volver_mapa:before
{
content:"";
position: absolute;
color: black;
right: 100%;
width: 0;
height: 0;
border-top: 1.5em solid transparent;
border-right: 1em solid #880e4f;
border-bottom: 1.5em solid transparent;
}
#floating-panel3 {
position: absolute;
bottom: 10%;
left: 3%;
z-index: 5;
background-color: white;
color: black;
font-weight: bold;
text-align: center;
font-family: 'Roboto','sans-serif';
line-height: 30px;
}
.in_datos{
margin-top: 1em;
}
.lateral{
padding-left: 1em;
padding-top: 1em;
}
.nopadding{
padding: 0 !important;
margin: 0 !important;
}
.opt{
text-align: center;
padding-top: 3em;
padding-bottom: 3em;
font-size: 200%;
color: white;
}
.options .uno{
background-color:#FD6A02;
}
.options .dos{
background-color:#008081;
}
.options .tres{
background-color:#964000;
}
.options .cuatro{
background-color:#810100;
}
.options .cinco{
background-color:#EB9605;
}
.options div:hover{
background-color: #1E90FF;
cursor: pointer;
-webkit-transition: background-color 1s ease-out;
-moz-transition: background-color 1s ease-out;
-o-transition: background-color 1s ease-out;
transition: background-color 1s ease-out;
-moz-box-shadow: inset 0 -20px 20px -20px #000000;
-webkit-box-shadow: inset 0 -20px 20px -20px #000000;
box-shadow: inset 0 -20px 20px -20px #000000;
}
.popup-tip-anchor {
height: 0;
position: absolute;
/* The max width of the info window. */
width: 200px;
}
/* The bubble is anchored above the tip. */
.popup-bubble-anchor {
position: absolute;
width: 100%;
bottom: /* TIP_HEIGHT= */ 8px;
left: 0;
}
/* Draw the tip. */
.popup-bubble-anchor::after {
content: "";
position: absolute;
top: 0;
left: 0;
/* Center the tip horizontally. */
transform: translate(-50%, 0);
/* The tip is a https://css-tricks.com/snippets/css/css-triangle/ */
width: 0;
height: 0;
/* The tip is 8px high, and 12px wide. */
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-top: /* TIP_HEIGHT= */ 8px solid white;
}
/* The popup bubble itself. */
.popup-bubble-content {
position: absolute;
top: 0;
left: 0;
transform: translate(-50%, -100%);
/* Style the info window. */
background-color: white;
color: black;
padding-left: 0.4em;
padding-right: 0.4em;
border-radius: 2px;
font-family: sans-serif;
overflow-y: auto;
max-height: 1.2em;
}
.portada{
/* background-image: url("img/portada_mf169.png");
background-size: 100%;
background-repeat: no-repeat;
background-position: center; */
width: 100%;
height: 36%;
}
#snackbar {
visibility: hidden;
min-width: 250px;
margin-left: -125px;
background-color: #FF8C00;
border: 1px solid black;
color: black;
text-align: center;
border-radius: 2px;
padding: 0.5em;
position: fixed;
z-index: 1;
left: 50%;
bottom: 30px;
font-size: 17px;
}
#snackbar.show {
visibility: visible;
-webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
animation: fadein 0.5s, fadeout 0.5s 2.5s;
}
.sombra{
-moz-box-shadow: inset 0 -20px 20px -20px #000000;
-webkit-box-shadow: inset 0 -20px 20px -20px #000000;
box-shadow: inset 0 -20px 20px -20px #000000;
}
@-webkit-keyframes fadein {
from {bottom: 0; opacity: 0;}
to {bottom: 30px; opacity: 1;}
}
@keyframes fadein {
from {bottom: 0; opacity: 0;}
to {bottom: 30px; opacity: 1;}
}
@-webkit-keyframes fadeout {
from {bottom: 30px; opacity: 1;}
to {bottom: 0; opacity: 0;}
}
@keyframes fadeout {
from {bottom: 30px; opacity: 1;}
to {bottom: 0; opacity: 0;}
}
.texto1 {
margin-bottom: 1em;
float: left;
position: absolute;
left: 0%;
top: 30%;
z-index: 1000;
width:100%;
color: white;
font-weight: bold;
color: #fff;
}
.titulo{
color: white;
background-color: #33CC33;
text-align: center;
padding-top: 0.2em;
padding-bottom: 0.2em;
}
.titulo1{
margin: 0 !important;
font-size: 150%;
color: white;
padding-left: 0.2em;
padding-right: 0.2em;
padding-top: 0.5em;
padding-bottom: 0.5em;
}
.avatar {
position: relative;
top: -50px;
margin-bottom: -50px;
background-size: contain;
}
.avatar img {
width: 100%;
height: 200px;
max-width: 200px;
max-height: 200px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
border: 3px solid rgba(255,255,255,0.5);
}
#main {
text-align: center;
}
#content {
margin-top: 100px;
}