body.bg--1 { background: rgba(169, 169, 169, 1) url(../img/bg3.png); }
body.bg--2 { background: rgba(70, 130, 180, 1) url(../img/bg3.png); }
body.bg--3 { background: rgba(157, 121, 72, 0.75) url(../img/bg3.png); }
body.bg--4 { background: rgba(139, 0, 0, 0.5) url(../img/bg3.png); }

body {
  font: 18px 'Merienda',sans-serif;
}
h3 { font-weight: 900; }
h4 {
  font-weight: 900;
  font-size: 1.1em;
  box-shadow: 0 0 0 1px rgba(51, 51, 51, 0.5);
  padding: 4px 10px;
}

.lead {
  font-size: 22px;
}
.navbar-brand {
  font-weight: 900;
}
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:focus, .navbar-default .navbar-nav > .active > a:hover {
  background-color: rgba(51, 51, 51, 0.6);
  color: #fff;
}
.navbar {
  box-shadow: 0 1px 5px rgba(51, 51, 51, 0.4);
}
.font--1,.font--2,.font--3,.font--4 { 
  text-shadow: 1px 1px 1px #666;
 }
.font--1 { 
  font: 4em 'Boogaloo', sans-serif;
  color: steelblue;
 }
.font--2 { 
  font: 3.5em 'Rancho', sans-serif;
  color: darkred;
 }
.font--3 { 
  font: 3em 'Boogaloo', sans-serif;
  color: rgba(51, 51, 0, 0.6);
 }
 .font--4 { 
  font: 3em 'Rancho', sans-serif;
  color: rgba(102, 0, 102, 0.8);
 }
code {
    font-size: 0.95em;
}
.fsize--1 {
  font-size: .5em;
}
img.ejm {
  box-shadow: 1px 1px 8px rgba(0,0,0,0.5);
  border: 4px solid #eee;
  cursor: pointer;  
}

.espacio { margin: 0 1em;}
.espacioV { margin: 1em 0; }
.sp--T { margin-top    : 1em; }
.sp--L { margin-left   : 1em; }
.sp--R { margin-right  : 1em; }
.sp--B { margin-bottom : 1em; }

.centro { text-align: center; }
.trans {
  opacity: 0.7;
  transition: all 0.3s ease-out;
}
.trans:hover {
  opacity: 1;
  box-shadow: 0 5px 5px 0 rgba(51, 51, 51, 0.5);
}

.well {
  background-color: rgba(245, 245, 245, 0.4);
}
/*=======================================
=            CSS3 transiciones          =
=======================================*/
.rotar, .escalar, .inclinar, .transladar, .matriz, .origen {
  transition: all .5s ease-out;
}


/*========================================
=            CSS3 transformaciones       =
========================================*/
.rotar:hover,.rotar:active {
  transform: rotate(25deg);
}
.escalar:hover,.escalar:active {
  transform: scale(1.3);
}
.inclinar:hover,.inclinar:active {
  transform: skew(25deg);
}
.transladar:hover,.transladar:active {
  transform: translate(-50px,100px);
}

.matriz:hover, .matriz:active {
    transform: matrix(1,0.25,0.5,1,50,0);
}
.origen:hover, .origen:active {
    transform-origin: 0 0;
           transform: rotate(-90deg);
}




/*===================================
=            ANIMACIONES            =
===================================*/
.caja-ani {
  max-width: 300px;
  height: 300px;
  background-color: hsla(0, 0%, 50%, 0.1);
  display: flex;
  justify-content: center;
  align-items: center;
}
#objeto-ani {
  /* transition: all 1s ease-out; */
}

.ani-cartel {
    transform-origin : 50% 0 ;
    animation        : cartel 5s ease-in 1s 12 alternate backwards;
}

.ani-cuadrado {
  width: 75%;
  height: 75%;
  background-color: hsla(0, 100%, 50%, 0.1);
  animation: key--cuadrado 10s linear 10;
}
.ani-zoom {
  width: 75%;
  height: 75%;
  border-radius: 50%;
  background-color: hsla(0, 100%, 50%, 0.5);
  animation: key--zoom 5s linear 10 alternate;
}

.ani-aspa {
  width: 14px;
  height: 75%;
  border-radius: 50%;
  background-color: hsla(0, 100%, 20%, 0.5);
  animation: key--aspa 10s linear 10;
}



@keyframes key--cartel {
    50% {
      transform: rotate(15deg);
    }
    100% {
      transform: rotate(-15deg);
    }
}
@keyframes key--cuadrado {
  25%{ background-color: hsla(60, 100%, 50%, 0.8); }
  50%{ background-color: hsla(120, 100%, 50%, 0.8); }
  75%{ background-color: hsla(240, 100%, 50%, 0.8); }
  100% { background-color: hsla(300, 100%, 50%, 0.8); }
}

@keyframes key--aspa {
  100% {
    transform: rotate(1turn);
  }
}

@keyframes key--zoom {
  100% {
    width: 1px;
    height: 1px;
  }
}

/*=====  End of ANIMACIONES  ======*/

/*===========================================
=            TRANSFORMACIONES 3D            =
===========================================*/

.contenedor {
  width: 200px;
  height: 200px;
  position: relative;
  margin: 3em auto;
  /* top: 100px; */
  /* left: 100px; */
  /* border: thin solid #CCC; */
  -webkit-perspective: 1200px;
     -moz-perspective: 1200px;
       -o-perspective: 1200px;
          perspective: 1200px;
}

#cube {
  width: 100%;
  height: 100%;
  position: absolute;
  -webkit-transform-style: preserve-3d;
     -moz-transform-style: preserve-3d;
       -o-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-transform: translateZ( -100px );
     -moz-transform: translateZ( -100px );
       -o-transform: translateZ( -100px );
          transform: translateZ( -100px );
}

#cube.spinning {
  -webkit-animation: spinCubeWebkit 16s infinite ease-in-out;
     -moz-animation: spinCubeMoz    16s infinite ease-in-out;
       -o-animation: spinCubeO      16s infinite ease-in-out;
          animation: spinCube       16s infinite ease-in-out;
}

@-webkit-keyframes spinCubeWebkit {
    0% { -webkit-transform: translateZ( -100px ) rotateX(   0deg ) rotateY(   0deg ); }
  100% { -webkit-transform: translateZ( -100px ) rotateX( 360deg ) rotateY( 360deg ); }
}

@-moz-keyframes spinCubeMoz {
    0% { -moz-transform: translateZ( -100px ) rotateX(   0deg ) rotateY(   0deg ); }
  100% { -moz-transform: translateZ( -100px ) rotateX( 360deg ) rotateY( 360deg ); }
}

@keyframes spinCube {
    0% { transform: translateZ( -100px ) rotateX(   0deg ) rotateY(   0deg ); }
  100% { transform: translateZ( -100px ) rotateX( 360deg ) rotateY( 360deg ); }
}

#cube figure {
  display: block;
  position: absolute;
  width: 185px;
  height: 185px;
  border: 10px solid rgba(0, 0, 0, 0.1);
  line-height: 185px;
  font-size: 120px;
  font-weight: bold;
  color: white;
  text-align: center;
}

/*     #cube.panels-backface-invisible figure {
  -webkit-backface-visibility: hidden;
     -moz-backface-visibility: hidden;
       -o-backface-visibility: hidden;
          backface-visibility: hidden;
} */

#cube .front  { background: hsla(   0, 70%, 50%, 0.7 ); }
#cube .back   { background: hsla(  60, 70%, 50%, 0.7 ); }
#cube .right  { background: hsla( 120, 70%, 50%, 0.7 ); }
#cube .left   { background: hsla( 180, 70%, 50%, 0.7 ); }
#cube .top    { background: hsla( 240, 70%, 50%, 0.7 ); }
#cube .bottom { background: hsla( 300, 70%, 50%, 0.7 ); }

#cube .front  {
  -webkit-transform: translateZ( 100px );
     -moz-transform: translateZ( 100px );
       -o-transform: translateZ( 100px );
          transform: translateZ( 100px );
}
#cube .back {
  -webkit-transform: rotateX( -180deg ) translateZ( 100px );
     -moz-transform: rotateX( -180deg ) translateZ( 100px );
       -o-transform: rotateX( -180deg ) translateZ( 100px );
          transform: rotateX( -180deg ) translateZ( 100px );
}
#cube .right {
  -webkit-transform: rotateY(   90deg ) translateZ( 100px );
     -moz-transform: rotateY(   90deg ) translateZ( 100px );
       -o-transform: rotateY(   90deg ) translateZ( 100px );
          transform: rotateY(   90deg ) translateZ( 100px );
}
#cube .left {
  -webkit-transform: rotateY(  -90deg ) translateZ( 100px );
     -moz-transform: rotateY(  -90deg ) translateZ( 100px );
       -o-transform: rotateY(  -90deg ) translateZ( 100px );
          transform: rotateY(  -90deg ) translateZ( 100px );
}
#cube .top {
  -webkit-transform: rotateX(   90deg ) translateZ( 100px );
     -moz-transform: rotateX(   90deg ) translateZ( 100px );
       -o-transform: rotateX(   90deg ) translateZ( 100px );
          transform: rotateX(   90deg ) translateZ( 100px );
}
#cube .bottom {
  -webkit-transform: rotateX(  -90deg ) translateZ( 100px );
     -moz-transform: rotateX(  -90deg ) translateZ( 100px );
       -o-transform: rotateX(  -90deg ) translateZ( 100px );
          transform: rotateX(  -90deg ) translateZ( 100px );
}


/*=====  End of TRANSFORMACIONES 3D  ======*/