nuevo diseño de portada con capa superior azul

assets/scss/base.scss

@@ -595,6 +595,7 @@ Navigation
   cursor: pointer;
   padding: 20px;
 }
+
 .navbar-default .navbar-nav > li > a {
   color: #777;
   font-size: 1.6rem;
@@ -735,6 +736,25 @@ a.bold{
   }
 }
 
+.top-header:before {
+  content: '';
+  background-image: url(/static/img/photos/portada.jpg);
+  background-size: cover;
+  opacity: 0.15;
+  background-position: center;
+ }
+ .top-header{
+  background: radial-gradient(circle farthest-side at 0% 50%,#1578aa 23.5%,rgba(240,166,17,0) 0)21px 30px, radial-gradient(circle farthest-side at 0% 50%,#1193d4 24%,rgba(240,166,17,0) 0)19px 30px, linear-gradient(#1578aa 14%,rgba(240,166,17,0) 0, rgba(240,166,17,0) 85%,#1578aa 0)0 0, linear-gradient(150deg,#1578aa 24%,#1193d4 0,#1193d4 26%,rgba(240,166,17,0) 0,rgba(240,166,17,0) 74%,#1193d4 0,#1193d4 76%,#1578aa 0)0 0, linear-gradient(30deg,#1578aa 24%,#1193d4 0,#1193d4 26%,rgba(240,166,17,0) 0,rgba(240,166,17,0) 74%,#1193d4 0,#1193d4 76%,#1578aa 0)0 0, linear-gradient(90deg,#1193d4 2%,#1578aa 0,#1578aa 98%,#1193d4 0%)0 0 #1578aa;
+  background-size: auto auto, auto auto, auto auto, auto auto, auto auto, auto auto;
+  background-size: 40px 60px;
+ }
+
+ .top-header p{
+  font-size: 1.5em;
+line-height: 24px;
+ }
+
+
 /*** Header Banner Signup ***/
 
 .banner-signup {
@@ -861,7 +881,7 @@ a.bold{
   height: 200px;
   width: 200px;
   background-color: #1b9bd8;
-  border: 1px solid #fff;
+  border: 3px solid #fff;
   -webkit-touch-callout: none;
   -moz-touch-callout: none;
   -ms-touch-callout: none;
@@ -873,6 +893,10 @@ a.bold{
   -o-user-select: none;
   user-select: none; }
 
+.cube > .side > div{
+  font-weight: 400;
+  }
+
 .cube > div > div.cube-image {
   width: 200px;
   height: 200px;
@@ -893,20 +917,9 @@ a.bold{
   .cube > div > div.cube-image.active {
     color: red; }
 
-.cube > div:hover {
-  cursor: pointer; }
-
-.cube > div:active {
-  cursor: pointer; }
-
 .cube > div:first-child {
-  -webkit-transform: rotateX(90deg) translateZ(100px);
-  -moz-transform: rotateX(90deg) translateZ(100px);
-  -ms-transform: rotateX(90deg) translateZ(100px);
-  -o-transform: rotateX(90deg) translateZ(100px);
-  transform: rotateX(90deg) translateZ(100px);
-  outline: 1px solid transparent; }
-
+  display:none;
+}
 .cube > div:nth-child(2) {
   -webkit-transform: translateZ(100px);
   -moz-transform: translateZ(100px);
@@ -1331,37 +1344,15 @@ Intro
   }
 }
 // Animation Box 3D
+div.cube{
+  transform-style: preserve-3d;
+  animation: giroCubo 15s ease infinite;
+  animation-direction: alternate;
+}
 
-.viewport .cube > .side{animation-direction: alternate;animation-fill-mode: forwards;}
-.cube > div:first-child{animation: giro1 10s ease-out infinite;}
-.cube > div:nth-child(2){animation: giro2 10s ease-out infinite;}
-.cube > div:nth-child(3){animation: giro3 10s ease-out infinite;}
-.cube > div:nth-child(4){animation: giro4 10s ease-out infinite;}
-.cube > div:nth-child(5){animation: giro5 10s ease-out infinite;}
-.cube > div:nth-child(6){animation: giro6 10s ease-out infinite;}
-@keyframes giro6{
-  0%{  -webkit-transform: rotateX(-90deg) rotate(180deg) translateZ(100px);transform: rotateX(-90deg) rotate(180deg) translateZ(100px);}
-  100%{   -webkit-transform: rotateX(-90deg) rotate(0deg) translateZ(100px);transform: rotateX(-90deg) rotate(270deg) translateZ(100px);}
-}
-@keyframes giro1{
-  0%{ -webkit-transform: rotateX(90deg) translateZ(100px); transform: rotateX(90deg) translateZ(100px);}
-  100%{  -webkit-transform: rotateX(159deg) translateZ(100px); transform: rotateX(90deg) translateZ(100px) rotate(270deg);}
-}
-@keyframes giro2{
-  0%{  -webkit-transform: translateZ(100px);transform: rotateY(0deg) translateZ(100px);}
-  100%{   -webkit-transform: rotateY(90deg) translateZ(100px);transform: rotateY(90deg) translateZ(100px);}
-}
-@keyframes giro3{
-  0%{  -webkit-transform: rotateY(90deg) translateZ(100px);transform: rotateY(90deg) translateZ(100px);}
-  100%{   -webkit-transform: rotateY(180deg) translateZ(100px);transform: rotateY(180deg) translateZ(100px);}
-}
-@keyframes giro4{
-  0%{  -webkit-transform: rotateY(180deg) translateZ(100px);transform: rotateY(180deg) translateZ(100px);}
-  100%{   -webkit-transform: rotateY(-90deg) translateZ(100px);transform: rotateY(270deg) translateZ(100px);}
-}
-@keyframes giro5{
-  0%{  -webkit-transform: rotateY(-90deg) translateZ(100px);transform: rotateY(-90deg) translateZ(100px);}
-  100%{   -webkit-transform: translateZ(100px);transform: rotateY(0deg) translateZ(100px);}
+@keyframes giroCubo{
+  0%{  -webkit-transform: rotateX(137deg) rotateY(0deg);transform: rotateX(137deg) rotateY(0deg);}
+  100%{  -webkit-transform: rotateX(137deg) rotateY(180deg);transform: rotateX(137deg) rotateY(180deg);}
 }
 
 /*----------------------------------------