@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');
}

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;
}

.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);
}

.header-calc {
  text-align: center;
  font-family: 'Arial';
}

.header-calc h1 {
  margin: 0;
  letter-spacing: 0.02em;
}

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



span {
  display: block;
}

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

.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: 'Arial', 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;
}




#suma,
#resta,
#multiplica,
#divide,#decimal,
#entero,
#pos-neg,
#igual,
#borrar,#num-1, #num-2,
#num-3, #num-4,
#num-5, #num-6,
#num-7, #num-8,
#num-9, #num-0,#x-cuadrado,
#x-inverso,
#raiz-cuadrada,
#x-elevado-y {
  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);
}


.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;
}

.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%; }

}