body {
  color: #337ab7;
  height: 100vh;
/*  overflow:hidden;	*/
  background-color: #E4EDFC; /* For browsers that do not support gradients */
  background-image: radial-gradient(#E4EDFC, #9FBFF3);
}

h1 { 
  font-family: "Lobster", serif;
  font-size: 7vw;
  margin: 35px;
}

h2 {
  font-family: "Lobster", serif;
  font-size: 3.8vw;
  margin-top: 0px;
  margin-bottom: 0px;
}

h3 {
  text-align:center;
  font-size: 2.7vw;
  margin-top: 0px;
}

h4 {
  text-align:center;
  font-size: 1.7vw;
}

span {
	font-weight: bold;
	font-size: 3vw;
}

.icon {
	width: 25vw;
}

.cuadropalabra {
	border-radius: 5px;
	border: 1px solid #3D7FCB;
	text-align: center;
	font-weight: bold;
	font-size: 2.7vw;
}

#refranesmostrados,#totalrefranes,#puntos,.marcador{
	font-size: 5vw;
}

#ayuda{
	position:absolute;
	bottom:20px;
	right:20px;
	width:6vw;
}

#ayuda:hover{
	width:6.1vw;
	cursor:pointer;
}

.btn-group {
	margin:5px;
}

@media (max-width: 767px) { 
    h2 {
	  font-size: 6vw;
	}

	h3 {
	  font-size: 5vw;
	}

	h4 {
	  font-size: 3.7vw;
	}

	span {
		font-size: 5vw;
	}
	
	.icon {
		width: 40vw;
	}

	.cuadropalabra {
		font-size: 5vw;
	}
	
	.nav .nav-tabs:hover {
		background-color: red;
	}
	
	#refranesmostrados,#totalrefranes,#puntos,.marcador{
		font-size: 10vw;
	}

	#ayuda{
		width:12vw;
	}

	#ayuda:hover{
		width:12.1vw;
	}
}


/*barra progreso*/
.meter {
    position: relative;
    width:100%;
    box-sizing: border-box;
	visibility: hidden;
}
 
.meter .bar {
    height: 7px;
    background: #555;
    /*border-radius: 25px;
    box-shadow: inset 0 -1px 1px rgba(255,255,255,0.3);
    padding: 10px;*/
    width:100%;
}
 
.meter .num {
    color:White;
    position: absolute;
    top:1px;
    text-align:center;
    font-weight:bold;
    font-family:Arial;
    padding: 10px;
    width:100%;
}
 
.meter .bar span {
    display: none;
    height: 100%;
    width:100%;
    /*border-radius: 20px;*/
    background-color: rgb(43,194,83);
    box-shadow:
    inset 0 2px 9px  rgba(255,255,255,0.3),
    inset 0 -2px 6px rgba(0,0,0,0.4);
    position: relative;
    overflow: hidden;
}
 
.start {
    /* modificar la cantidad de segundos y en la varable contador de javascript */
    animation: move linear;
	animation-duration: 10s;
}
 
@keyframes move {
    0% {
        width: 0;
    }
    100% {
        width: 100%;
    }
}