h1{
             font-size:1em;
             text-align: center;/*text-align: left;*/
             text-transform:capitalize;
         }
        .service-box{
            position: relative;
            display:inline-block; /* añadido LAURA 13/01/2016*/
            overflow: hidden;
            margin-top:20px;/* añadido LAURA 13/01/2016*/
            margin-bottom:20px;
            perspective:1000px;
            -webkit-perspective:1000px;
            
        }
        .service-icon{
            width: 100%;
            height: 37vh;
      /*      padding: 20px;*/
            text-align: center;
            transition: all .5s ease;
            background-color: #f5861a; /*BACKGROUND CUBOS -CUANDO NO HOVER*/
        }



        .service-content{
            position: absolute;
            top: 0;
            left: 0;
            z-index: 1;
            opacity: ;
            width: 100%;
            height: 120vh; /*cuando hover*/
           padding: ;
            text-align: center;
            transition: all .5s ease;
            background-color:#06143b;
             background:#f5861a;
            background:#044587; /*- background menu*/
            /* background: #f5861a;*/
            /*  background-color: linear-gradient(to top, rgba(254, 147, 0, .5) 0%, #044587 100%);*/
            background-color: rgba(11, 15, 39, 0.56);
           background-color:  transparent;
            border: 4px none #F5861A;/*vanesa*/
                
            /*background-image: url(../images/escudo_sanvi.png);*//*le quite el backg gris a los cubos*/
            backface-visibility:hidden;
            transform-style: preserve-3d;
            -webkit-transform: translateY(110px) rotateX(-90deg);
            -moz-transform: translateY(110px) rotateX(-90deg);
            -ms-transform: translateY(110px) rotateX(-90deg);
            -o-transform: translateY(110px) rotateX(-90deg);
            transform: translateY(110px) rotateX(-90deg);
        }



        .service-box .service-icon .front-content{ /* parte superior del cubo -  titulo*/
            position: relative;          
            text-align: center;       
            top:70%;         
            -webkit-transform: translateY(-50%);
            -moz-transform: translateY(-50%);
            -ms-transform: translateY(-50%);
            -o-transform: translateY(-50%);
            transform: translateY(-50%);
            background:#f5861a;
            background:#044587; /*- background menu*/
            /* background: #f5861a;*/
            /*  background-color: linear-gradient(to top, rgba(254, 147, 0, .5) 0%, #044587 100%);*/

            background-color: rgba(11, 15, 39, 0.56);
            padding-top:2em; /* añadido LAURA 13/01/2016*/
                                    

        }

        .service-box .service-icon .front-content i {
            font-size: 28px;
            color: #fff;
            font-weight: normal;
        }

        .service-box .service-icon .front-content h3 {
            font-size: 15px;
            color: #F5861A;
            font-weight: bold;
            text-align: center;
            margin-bottom: 15px;
            text-transform: uppercase;
        }
        .service-box .service-content h3 {
            font-size: 15px;
            font-weight: 700;
            color: #fff;
            margin-bottom:10px;
            text-transform: uppercase;
        }
        .service-box .service-content p {
            font-size: 13px;
            color: #b1b1b1;
            margin:0;
        }
        .yellow{ background-color:#F5861A;background-image:url(../images/enlaces-de-interes.jpg);
        background-repeat: no-repeat;
        border: 2px solid #F5861A;}
        .orange{background-image:url(../images/tiempo.jpg);
        background-repeat: no-repeat;
        border: 2px solid #F5861A
  
}
        /*.red{background-color: #e84b3a;}
        .grey{background-color: #474747;}*/
        .service-box:hover .service-icon{
            opacity: 0;
            -webkit-transform: translateY(-110px) rotateX(90deg);
            -moz-transform: translateY(-110px) rotateX(90deg);
            -ms-transform: translateY(-110px) rotateX(90deg);
            -o-transform: translateY(-110px) rotateX(90deg);
            transform: translateY(-110px) rotateX(90deg);
        }
        .service-box:hover .service-content {
            opacity: 1;
            -webkit-transform: rotateX(0);
            -moz-transform: rotateX(0);
            -ms-transform: rotateX(0);
            -o-transform: rotateX(0);
            transform: rotateX(0);
            
        }