/* ==================== *\
   FUENTES TIPOGRAFICAS
\* ==================== */

@font-face {
  font-family: 'Lobster Two';
  src:
    url('../fonts/LobsterTwo/LobsterTwo-Regular.eot')   format('embedded-opentype'),
    url('../fonts/LobsterTwo/LobsterTwo-Regular.woff2') format('woff2'),
    url('../fonts/LobsterTwo/LobsterTwo-Regular.woff')  format('woff'),
    url('../fonts/LobsterTwo/LobsterTwo-Regular.ttf')   format('truetype'),
    url('../fonts/LobsterTwo/LobsterTwo-Regular.svg')   format('svg');
}

@font-face {
  font-family: 'VT323';
  src:
    url('../fonts/VT323/VT323.eot')   format('embedded-opentype'),
    url('../fonts/VT323/VT323.woff2') format('woff2'),
    url('../fonts/VT323/VT323.woff')  format('woff'),
    url('../fonts/VT323/VT323.ttf')   format('truetype'),
    url('../fonts/VT323/VT323.svg')   format('svg');
}

/* =================== *\
   ESTILOS PRINCIPALES
\* =================== */

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

body {
  margin-bottom: 60px;
  background: silver;  
}

body > .container { padding: 60px 15px 0; }

.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 60px;
  background: orange;
  border-top: solid 1px #f5f5f5;
  overflow: hidden;
  text-align: center;
  font-family: 'Lobster Two', cursive;
  color: white;
}

.footer > .text-muted {
  color: white;
  text-shadow: 1px 2px 3px grey;
}

.footer > ul {
  list-style: none;
  padding-left: 0;
  margin-top: 0.25em;
}

.footer > ul li {
  display: inline-block;
}

.footer ul li a {
  color: white;
  text-shadow: 1px 2px 3px grey;
  padding: 0 1em;
}

.footer ul li:not(:last-child) {
  border-right: 1px solid white;
}

/* ======== *\
   CARRUSEL
\* ======== */

.carousel-inner .item img { width: 100%; }

.container .carousel-indicators .active { background-color: lime; }

.container .carousel-indicators li { border: 1px solid orange; }

.carousel .glyphicon-chevron-right,
.carousel .glyphicon-chevron-left {
  color: lime;
  background: orange;
  border-radius: 5px;
}

/* =============== *\
   MAIN NAV (MENU)
\* =============== */

.navbar-default { background: orange; }

.navbar-header .navbar-brand,
.navbar-header .navbar-brand:hover,
.navbar-default .navbar-nav > li a {
  color: white;
  text-shadow: 1px 2px 3px grey;
}

.navbar-default .navbar-nav > li a:hover {
  color: white;
  text-shadow: 1px 2px 3px grey;
  background: rgba(0,0,0, 0.1);
}

.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:focus,
.navbar-default .navbar-nav > .active > a:hover {
  background: gold;
  color: white;
  text-shadow: 1px 2px 3px grey;
}

.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:focus,
.navbar-default .navbar-nav > .open > a:hover { background: gold; }

.navbar-nav > li > .dropdown-menu { background: orange; }

.dropdown-menu > li > a:hover { background: gold; }

.navbar-default .navbar-toggle { border-color: white; }

.navbar-default .navbar-toggle .icon-bar { background: white; }

.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open >a:focus,
.navbar-default .navbar-nav > .open >a:hover { color: white; }

.navbar-default .navbar-nav .open .dropdown-menu > li > a { color: white; }
.navbar-default .navbar-nav .open .dropdown-menu > li > a:hover {
  color: white;
  background: rgba(0,0,0, 0.1);
}

/* =========== *\
   CALCULADORA
\* =========== */

.header-calc {
  text-align: center;
  font-family: 'Lobster Two', cursive;
}

.header-calc h1 {
  margin: 0;
  letter-spacing: 0.02em;
  display: inline;
  font-size: 1.7em;
}

.header-calc p {
  margin: 0 0 0.50em;
  line-height: 1.5;
  letter-spacing: 0.02em;
  font-size: 1.2em;
  display: inline-block;
}

sup,
sub {
  font-size: 0.55em;
}

.section-calc {
  background: aliceblue;
  margin: auto;
  padding: 0.50em;
  max-width: 400px;
  border: 2px solid;
  border-radius: 5px;
}

.display,
.botones {
  display: flex;
}

.section-calc input {
  background: rgba(0,255,0, 0.5);
  margin: 0.50em auto;
  padding: 0 0.25em;
  text-align: right;
  font-size: 3em;
  letter-spacing: 0.25em;
  font-family: 'VT323', monospace;
  border: 5px inset;
  border-radius: 5px;
  width: 90%;
}

.section-calc button {
  flex: 1;
  padding: 0.50em 0;
  margin: 0.25em;
  text-align: center;
  font-size: 1.2em;
}

/*

COLORES DEGRADADOS PARA LOS BOTONES

*/

#x-cuadrado,
#x-inverso,
#raiz-cuadrada,
#x-elevado-y,
#pot-2,
#factorial,
#sumatorio,
#producto {
  border: 1px solid silver;
  border-radius: 3px;
  background-color: #ffd65e; background-image: -webkit-gradient(linear, left top, left bottom, from(#ffd65e), to(#febf04));
  background-image: -webkit-linear-gradient(top, #ffd65e, #febf04);
  background-image: -moz-linear-gradient(top, #ffd65e, #febf04);
  background-image: -ms-linear-gradient(top, #ffd65e, #febf04);
  background-image: -o-linear-gradient(top, #ffd65e, #febf04);
  background-image: linear-gradient(to bottom, #ffd65e, #febf04);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#ffd65e, endColorstr=#febf04);
}

#x-cuadrado:hover,
#x-inverso:hover,
#raiz-cuadrada:hover,
#x-elevado-y:hover,
#pot-2:hover,
#factorial:hover,
#sumatorio:hover,
#producto:hover {
  border: 1px solid silver;
  background-color: #ffc92b; background-image: -webkit-gradient(linear, left top, left bottom, from(#ffc92b), to(#ce9a01));
  background-image: -webkit-linear-gradient(top, #ffc92b, #ce9a01);
  background-image: -moz-linear-gradient(top, #ffc92b, #ce9a01);
  background-image: -ms-linear-gradient(top, #ffc92b, #ce9a01);
  background-image: -o-linear-gradient(top, #ffc92b, #ce9a01);
  background-image: linear-gradient(to bottom, #ffc92b, #ce9a01);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#ffc92b, endColorstr=#ce9a01);
}

#suma,
#resta,
#multiplica,
#divide {
  border: 1px solid silver;
  border-radius: 3px;
  background-color: #d2d2f9; background-image: -webkit-gradient(linear, left top, left bottom, from(#d2d2f9), to(#a6a6f2));
  background-image: -webkit-linear-gradient(top, #d2d2f9, #a6a6f2);
  background-image: -moz-linear-gradient(top, #d2d2f9, #a6a6f2);
  background-image: -ms-linear-gradient(top, #d2d2f9, #a6a6f2);
  background-image: -o-linear-gradient(top, #d2d2f9, #a6a6f2);
  background-image: linear-gradient(to bottom, #d2d2f9, #a6a6f2);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#d2d2f9, endColorstr=#a6a6f2);
}

#suma:hover,
#resta:hover,
#multiplica:hover,
#divide:hover {
  border: 1px solid silver;
  background-color: #a5a5f3; background-image: -webkit-gradient(linear, left top, left bottom, from(#a5a5f3), to(#7a7aeb));
  background-image: -webkit-linear-gradient(top, #a5a5f3, #7a7aeb);
  background-image: -moz-linear-gradient(top, #a5a5f3, #7a7aeb);
  background-image: -ms-linear-gradient(top, #a5a5f3, #7a7aeb);
  background-image: -o-linear-gradient(top, #a5a5f3, #7a7aeb);
  background-image: linear-gradient(to bottom, #a5a5f3, #7a7aeb);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#a5a5f3, endColorstr=#7a7aeb);
}

#decimal,
#entero,
#pos-neg {
  border: 1px solid silver;
  border-radius: 3px;
  background-color: #f8b29a; background-image: -webkit-gradient(linear, left top, left bottom, from(#f8b29a), to(#ed9174));
  background-image: -webkit-linear-gradient(top, #f8b29a, #ed9174);
  background-image: -moz-linear-gradient(top, #f8b29a, #ed9174);
  background-image: -ms-linear-gradient(top, #f8b29a, #ed9174);
  background-image: -o-linear-gradient(top, #f8b29a, #ed9174);
  background-image: linear-gradient(to bottom, #f8b29a, #ed9174);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#f8b29a, endColorstr=#ed9174);
}

#decimal:hover,
#entero:hover,
#pos-neg:hover {
  border: 1px solid silver;
  background-color: #f58e6a; background-image: -webkit-gradient(linear, left top, left bottom, from(#f58e6a), to(#e76d47));
  background-image: -webkit-linear-gradient(top, #f58e6a, #e76d47);
  background-image: -moz-linear-gradient(top, #f58e6a, #e76d47);
  background-image: -ms-linear-gradient(top, #f58e6a, #e76d47);
  background-image: -o-linear-gradient(top, #f58e6a, #e76d47);
  background-image: linear-gradient(to bottom, #f58e6a, #e76d47);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#f58e6a, endColorstr=#e76d47);
}

#igual {
  border: 1px solid silver;
  border-radius: 3px;
  background-color: #9ae0f8; background-image: -webkit-gradient(linear, left top, left bottom, from(#9ae0f8), to(#9ab1f8));
  background-image: -webkit-linear-gradient(top, #9ae0f8, #9ab1f8);
  background-image: -moz-linear-gradient(top, #9ae0f8, #9ab1f8);
  background-image: -ms-linear-gradient(top, #9ae0f8, #9ab1f8);
  background-image: -o-linear-gradient(top, #9ae0f8, #9ab1f8);
  background-image: linear-gradient(to bottom, #9ae0f8, #9ab1f8);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#9ae0f8, endColorstr=#9ab1f8);
}

#igual:hover {
  border: 1px solid silver;
  background-color: #52caf3; background-image: -webkit-gradient(linear, left top, left bottom, from(#52caf3), to(#10b1e8));
  background-image: -webkit-linear-gradient(top, #52caf3, #10b1e8);
  background-image: -moz-linear-gradient(top, #52caf3, #10b1e8);
  background-image: -ms-linear-gradient(top, #52caf3, #10b1e8);
  background-image: -o-linear-gradient(top, #52caf3, #10b1e8);
  background-image: linear-gradient(to bottom, #52caf3, #10b1e8);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#52caf3, endColorstr=#10b1e8);
}

#borrar {
  border: 1px solid silver;
  border-radius: 3px;
  background-color: #a9db80; background-image: -webkit-gradient(linear, left top, left bottom, from(#a9db80), to(#96c56f));
  background-image: -webkit-linear-gradient(top, #a9db80, #96c56f);
  background-image: -moz-linear-gradient(top, #a9db80, #96c56f);
  background-image: -ms-linear-gradient(top, #a9db80, #96c56f);
  background-image: -o-linear-gradient(top, #a9db80, #96c56f);
  background-image: linear-gradient(to bottom, #a9db80, #96c56f);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#a9db80, endColorstr=#96c56f);
}

#borrar:hover {
  border: 1px solid silver;
  background-color: #8ed058; background-image: -webkit-gradient(linear, left top, left bottom, from(#8ed058), to(#7bb64b));
  background-image: -webkit-linear-gradient(top, #8ed058, #7bb64b);
  background-image: -moz-linear-gradient(top, #8ed058, #7bb64b);
  background-image: -ms-linear-gradient(top, #8ed058, #7bb64b);
  background-image: -o-linear-gradient(top, #8ed058, #7bb64b);
  background-image: linear-gradient(to bottom, #8ed058, #7bb64b);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#8ed058, endColorstr=#7bb64b);
}

#num-1, #num-2,
#num-3, #num-4,
#num-5, #num-6,
#num-7, #num-8,
#num-9, #num-0 {
  border: 1px solid silver;
  border-radius: 3px;
  background-color: #f2f5f6; background-image: -webkit-gradient(linear, left top, left bottom, from(#f2f5f6), to(#c8d7dc));
  background-image: -webkit-linear-gradient(top, #f2f5f6, #c8d7dc);
  background-image: -moz-linear-gradient(top, #f2f5f6, #c8d7dc);
  background-image: -ms-linear-gradient(top, #f2f5f6, #c8d7dc);
  background-image: -o-linear-gradient(top, #f2f5f6, #c8d7dc);
  background-image: linear-gradient(to bottom, #f2f5f6, #c8d7dc);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#f2f5f6, endColorstr=#c8d7dc);
}

#num-1:hover, #num-2:hover,
#num-3:hover, #num-4:hover,
#num-5:hover, #num-6:hover,
#num-7:hover, #num-8:hover,
#num-9:hover, #num-0:hover {
  border: 1px solid silver;
  background-color: #d4dee1; background-image: -webkit-gradient(linear, left top, left bottom, from(#d4dee1), to(#a9c0c8));
  background-image: -webkit-linear-gradient(top, #d4dee1, #a9c0c8);
  background-image: -moz-linear-gradient(top, #d4dee1, #a9c0c8);
  background-image: -ms-linear-gradient(top, #d4dee1, #a9c0c8);
  background-image: -o-linear-gradient(top, #d4dee1, #a9c0c8);
  background-image: linear-gradient(to bottom, #d4dee1, #a9c0c8);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#d4dee1, endColorstr=#a9c0c8);
}

/* ====== *\
   PUZZLE
\* ====== */

.puzzle {
  user-select: none;           /* user-select, hace el objeto no seleccionable */
  -webkit-touch-callout: none; /* anula el efecto visual del touch prolongado sobre el objeto */
  -webkit-tap-highlight-color: rgba(0,0,0,0); /* anula feedback de color al hacer tap en link */
  -webkit-tap-highlight-color: transparent;   /* similar anterior en algunos android */

  margin: 0;
  padding: 0;
}

#sortable { 
  list-style-type: none;
  margin: auto;
  padding-left: 0;
  max-width: 580px;
}

#sortable li { 
  float: left; 
  width: 33.33333%; 
}

#sortable li img {
  vertical-align: bottom;
  width: 100%; 
  height: auto;
}

/* En apaisado (landscape) anchura = máxima altura */
@media ( orientation:landscape ) {

  /* 100vh: 100% del alto de ventana visualizada */
  #sortable { width: 100vh; }

}

/* En vertical (portrait) se adapta al máximo ancho */
@media ( orientation:portrait ) {
  
  #sortable { width: 100%; }

}