@CHARSET "UTF-8";

html
{
    position: relative; 
    min-height: 100%;
}

body {
  font-family: "Lato", "Arial", sans-serif;
  font-size: 14px;
  font-weight: 400;
  text-rendering: optimizeLegibility !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  -ms-overflow-style: scrollbar;
  background-color: #FFF;
  color: #616f77;
}

#navegacion{
	  margin: 0;
}

body a {
    -webkit-transition: all 0.2s ease-out;
    -moz-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out; 
}

a{
	color: #616f77;
	text-decoration: none;
	background-color: transparent;
}

a:hover{
	color: #337ab7;
}

ul {
    display: block;
    list-style-type: disc;
    margin-top: 1em;
    margin-bottom: 1 em;
    margin-left: 0;
    margin-right: 0;
    padding-left: 40px;
}


.custom-font{
	padding: 0;
    margin: 0;
    display: inline-block;
    font-weight: 400;
    font-size: 20px;
    line-height: 26px;
	font-family: "Dosis", "Arial", sans-serif;
}

.tile {
    position: relative;
    margin-bottom: 20px;
    color: #616f77;
    background-color: white;
    filter: alpha(opacity=100);
    opacity: 1;
    -webkit-transition: opacity 0.25s ease-out;
    -moz-transition: opacity 0.25s ease-out;
    transition: opacity 0.25s ease-out;
    display: block;
}

.tile .dvd {
	border-color: rgba(0, 0, 0, 0.1);
    border-style: solid;
    border-width: 0;
    border-bottom-width: 1px;
}

.tile .dvd-btm{
	border-bottom-width: 1px;
}

.tile-header {
	position: relative;
	padding: 8px 15px;
}

.controls{
	position: absolute;
    right: 0;
    top: 0;
    z-index: 9;
    list-style: none;
    padding: 0;
    margin: 0;
    height: 100%;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.controls > li {
	border-left: 1px solid rgba(0, 0, 0, 0.1);
	display: inline-block;
    height: 100%;
    float: left;
}

.controls > li > a {
	display: block;
    height: 100%;
    line-height: 43px;
    min-width: 41px;
    padding: 0 10px;
    text-align: center;
    color: #95a2a9;
}

b, strong {
    font-weight: bold;
}

.button{
    background:#e5e5e5;
    display:inline-block;
    margin:0 6px;
    padding:7px 20px 7px;
    color:#333;
    text-decoration:none;
    text-shadow: 0 1px 1px #FFF;
    border:1px solid #ccc;
 
    /* Bordes redondenados - Border Radius */
    -webkit-border-radius:4px;
    -moz-border-radius:4px;
    border-radius:4px;
 
    /* Fondo Degradado - Background Gradient */
    background:-webkit-linear-gradient(top, #fefefe, #e5e5e5); /* Chrome 10+ */
    background:   -moz-linear-gradient(top, #fefefe, #e5e5e5); /* Firefox 3.6+ */
    background:    -ms-linear-gradient(top, #fefefe, #e5e5e5); /* IE10 */
    background:        linear-gradient(top, #fefefe, #e5e5e5);
 
    /* Aplcamos sombras al boton - Box Shadow */
    -webkit-box-shadow:inset 0 1px 0 rgba(255,255,255, .3), inset 0 0 0 1px rgba(255,255,255, .6), 0 1px 2px rgba(0, 0, 0, .1);
    -moz-box-shadow:inset 0 1px 0 rgba(255,255,255, .3), inset 0 0 0 1px rgba(255,255,255, .6), 0 1px 2px rgba(0, 0, 0, .1);
    box-shadow:inset 0 1px 0 rgba(255,255,255, .3), inset 0 0 0 1px rgba(255,255,255, .6), 0 1px 2px rgba(0, 0, 0, .1);
 
    /* Animacion - Transition */
    -webkit-transition: all ease-in-out .3s;
    -moz-transition: all ease-in-out .3s;
    transition: all ease-in-out .3s;
}

.button:hover{
    border-color:#adcce2; /* Modificamos el color del borde */
 
    /* Cambiamos los colores del fondo degradado */
    background:-webkit-linear-gradient(top, #fefefe, #f1f1f1); /* Chrome 10+ */
    background:   -moz-linear-gradient(top, #fefefe, #f1f1f1); /* Firefox 3.6+ */
    background:    -ms-linear-gradient(top, #fefefe, #f1f1f1); /* IE10 */
    background:        linear-gradient(top, #fefefe, #f1f1f1);
 
    /* Modificamos las propiedades del Box Shadow para un efecto Glow */
    -webkit-box-shadow:inset 0 1px 0 rgba(255,255,255, .3), inset 0 0 0 1px rgba(255,255,255, .6), 0 1px 6px rgba(36, 168, 229, .3);
    -moz-box-shadow:inset 0 1px 0 rgba(251,247,193, .3), inset 0 0 0 1px rgba(251,247,193, .3), 0 1px 6px rgba(36, 168, 229, .3);
    box-shadow:inset 0 1px 0 rgba(251,247,193, .3), inset 0 0 0 1px rgba(251,247,193, .3), 0 1px 6px rgba(36, 168, 229, .3);
}

#general{
    text-align: center;
    margin-top: 30px;
    margin-bottom: 30px;
}

.boton{
    text-align: center;
    margin-top: 20px;
}

.columna{
    width: 32%;
    height: 450px;
    text-align: center;
}

.columna legend{
    text-transform: uppercase;
}

#flecha-drcha{
    position: absolute;
    margin-left: 32%;
    margin-top: 190px;
}

#flecha-izqda{
    position: absolute;
    margin-left: 64%;
    margin-top: 190px;
}