/* 
    Document   : style
    Created on : 11-03-2014, 10:08:01 AM
    Author     : Fdo Alfaro
    Description:
        Purpose of the stylesheet follows.
*/
@font-face {
 font-family: 'MyriadPro-Light'; /* requerido */
 src: url('../fuente/MyriadPro-Light.otf');                        /* requerido */
 font-weight: weight;                /* opcional */
 font-style: style;                /* opcional */
}

body{
    margin:0;
    padding:0;
    font-family: 'MyriadPro-Light', sans-serif, arial;
    color: #373636 !important;
    background: #fff;
    font-size: 15px;

}
.img-fondo
{
    background-color: transparent;
    background-image: url(../images/rot-3.jpg);
    background-repeat: no-repeat;
    background-position: center top;
    background-attachment: fixed;
}

.fondo_webs 
{
    width:100%; /* todo el largo del navegador...*/
    height:100%; /*/ todo el alto del navegador...*/
    position:absolute; /* tendrá una posición absoluta...*/
    top:0; /* comienza arriba del todo...*/
    left:0; /*y a la izquierda del todo...*/
    overflow:hidden; /* ocultamos lo sobrante por si las dudas...*/
    background-color: transparent;
    background-image: url(../images/rot-3.png);
    background-repeat: no-repeat;
    background-position: center top;
    background-attachment: fixed;
}
/*agrandar imagen*/
.grow:hover
{
    -webkit-transform: scale(1.3);
    -ms-transform: scale(1.3);
    transform: scale(1.3);
    transition:all 0.3s ease;
}
/*desvanecer imagen*/
.fade-img
{
    opacity:1;
}
.fade-img:hover
{
    opacity:0.5;
    transition:all 0.3s ease;

}
/*cambiar color*/
.cambio-color
{
    background-color: #fff;
}
.cambio-color:hover
{
    background:#334559;
    transition:all 0.3s ease;
    color: #fff;
}

.cambio-color-bln-vrd
{
    background-color: #fff;
}
.cambio-color-bln-vrd:hover
{
    background:#45BA01;
    transition:all 0.3s ease;
    color: #fff;
}

.cambio-color_azul
{
    background-color: #334559;
}
.cambio-color_azul:hover
{
    background:#121b32;
    transition:all 0.3s ease;
    color: #fff;
}

.cambio-color_verde
{
    background-color: #45BA01;
}
.cambio-color_verde:hover
{
    background:#629820;
    transition:all 0.3s ease;
    color: #fff;
}

.cambio-color_gris
{
    background-color: #949494;
}
.cambio-color_gris:hover
{
    background:#7c7979;
    transition:all 0.3s ease;
    color: #fff;
}

.cambio-color_naranjo
{
    background-color: #ee8c23;
}
.cambio-color_naranjo:hover
{
    background:#ea6b16;
    transition:all 0.3s ease;
    color: #fff;
}

/*agrga sombra al contenido*/
.threed:hover
{
    box-shadow:
        1px 1px #121b32,
        2px 2px #121b32,
        3px 3px #121b32;
    -webkit-transform: translateX(-3px);
    transform: translateX(-3px);
    transition:all 0.3s ease;
}
/*agrandar imagen con zoom dentro de un contenedor*/
#img-contenedor img {
    -webkit-transition:all .9s ease; /* Safari y Chrome */
    -moz-transition:all .9s ease; /* Firefox */
    -o-transition:all .9s ease; /* IE 9 */
    -ms-transition:all .9s ease; /* Opera */
    width:100%;
}
#img-contenedor:hover img {
    -webkit-transform:scale(1.25);
    -moz-transform:scale(1.25);
    -ms-transform:scale(1.25);
    -o-transform:scale(1.25);
    transform:scale(1.25);

}
#img-contenedor {/*Ancho y altura son modificables al requerimiento de cada uno*/
    width:100%;
    height:100%;
    overflow:hidden;
}

#bljaIMGte{float:left;position:relative;}#bljaIMGte 
.bljaIMGtex 
{
    width:100%;
    position:absolute;
    top:50%;
    /*    left:20%; */
    font-size: 50px;
    color: #fff !important;
    text-align: center;
}

.transparencia_verde
{
    background-color: rgba(124,198,35,0.5);
}

.transparencia_osc
{
    background-color: rgba(0,0,0,0.7);
}

.transparencia 
{
    background-color: rgba(255,255,255,0.5);
}

.transparencia_azul
{
    background-color: rgba(18,27,50,0.7);
}

/***********************************************************************************
************************* Clases Genericos *****************************************/
.bloque_100p
{
    width: 100%;
    float: left;
}
.encap_auto
{
    width: auto;
}
.linea_generica
{
    width: 100%;
}
.posic_der
{
    float: right;
}

.posic_izq
{
    float: left;
}
.posic-bton
{
    float: right;
}
@media only screen and (min-width: 229px) and (max-width: 790px)  {
    .posic-bton
    {
        float: left !important;
    }
}

.text_subcabec
{
    text-align: center;
}

.text_subcabec_izq
{
    text-align: left;
    padding-left: 20px;

}

.border_bottom
{
    border-bottom: solid 1px #B3BBC5 !important;
}

.border_top
{
    border-top: solid 1px #ccc !important;
}

.borde-completo
{
    border-radius: 2px;
    -moz-border-radius: 1px;
    -webkit-border-radius: 1px;
    box-shadow: 0px 0px 2px #4B2145;
    float: left;
}
.letra_blanca
{
    color: #fff;
}

.letra_celeste
{
    color: #66B4C0;
}

.letra-azul
{
    color: #3D4166 !important;
}

.letra-rojizo
{
    color: #E13E20 !important;
}

.letra-gris
{
    color: #c7c1c1;
}

.letra_naranja
{
    color: #E5941E !important;
}

.letra-verde
{
    color: #7bc523 !important;
}

.letra-amarilla
{
    color: #E5DF29 !important;
}

.letra-rosad
{
    color: #CE0538 !important;
}

.letra-roja
{
    color: #FF6666 !important;
}

.letra-morada
{
    color:#8D00AE !important;
}

.tam-letra18px
{
    font-size: 18px !important;
}

.letra-mayuscula
{
    text-transform: uppercase; 
}

.letra_portada 
{
    display: inline-block;
    margin: 0 0 28px 0;
    padding: 10px 10px 12px 10px;
    /*    border-top: 2px solid rgba(255, 255, 255, 0.5);
        border-bottom: 2px solid rgba(255, 255, 255, 0.5);*/
    font-size: 54px;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0px;
}


.letra_50px
{
    font-size: 50px;
}
.letra_35px
{
    font-size: 35px !important;
}

/*P:first-letter 
{
    font-size: 200%;
    color: #993333; font-weight: bold;
}*/

.tam-letra19px
{
    font-size: 19px;
}

.tam-letra25px
{
    font-size: 25px;
}

.tam-letra45px
{
    font-size: 45px;
}

.margin_top_50px
{
    margin-top: 50px !important;
}

.margin_top_90px
{
    margin-top: 90px;
}

.margin_top_120px
{
    margin-top: 120px !important;
}

.margin_top_10px
{
    margin-top: 10px !important;
}

.margin_der_5px
{
    margin-right: 5px !important;
}

.margen_der_10px
{
    margin-right: 10px;
}

.margen_der_20px
{
    margin-right: 20px;
}

.margen_izq_10px
{
    margin-left: 10px !important;
}

.margen_izq_20px
{
    margin-left: 20px;
}

.margentop_5px
{
    margin-top: 5px !important;
}

.margentop_10px
{
    margin-top: 10px !important;
}

.margentop_5px
{
    margin-top: 5px !important;
}

.margentop_15px
{
    margin-top: 15px !important;
}

.margentop_20px
{
    margin-top: 20px;
}

.margentop_30px
{
    margin-top: 30px;
}

.margentop_33px
{
    margin-top: 33px;
}

.margentop_50px
{
    margin-top: 50px;
}
.margentop_70px
{
    margin-top: 70px;
}

.margentop_120px
{
    margin-top: 120px;
}

.margentop_180px
{
    margin-top: 180px;
}

.marginbottom_5px
{
    margin-bottom: 5px !important;
}

.marginbottom_10px
{
    margin-bottom: 10px !important;
}

.marginbottom_20px
{
    margin-bottom: 20px !important;
}

.marginbottom_100px
{
    margin-bottom: 100px !important;
}

.marginbottom_70px
{
    margin-bottom: 70px !important;
}

.marginbottom_150px
{
    margin-bottom: 150px !important;
}

.padding-0px
{
    padding: 0px !important;
}

.padding-10px
{
    padding: 10px;
}

.padding-20px
{
    padding: 20px;
}

.padding-50px
{
    padding: 50px;
}

.padding-5px
{
    padding: 5px;
}

.paddingbottom-7px
{
    padding-bottom: 7px;
}

.paddingbottom-20px
{
    padding-bottom: 20px;
}


.margen_0
{
    margin-top: 1px !important;
    margin-bottom: 1px !important;
}

.alto-30px
{
    height: 30px !important;
}
.alto-40px
{
    height: 40px !important;
}

.alto-61px-resp
{
    height: 61px !important;
}
@media only screen and (min-width: 400px) and (max-width: 768px) {
    .alto-160px-resp
    {
        height: 16px !important;
    }

}

.letra45px-resp
{
    font-size: 45px;
}

@media only screen and (min-width: 200px) and (max-width: 500px) {
    .letra45px-resp
    {
        font-size: 20px !important;
    }
}

.alto-50px-resp
{
   margin-top: 50px;
}
@media only screen and (min-width: 200px) and (max-width: 768px) {
    .alto-50px-resp
    {
        margin-top: 2px !important;
    }

}

.margin-top20px-resp
{
   margin-top: 20px;
}
@media only screen and (min-width: 200px) and (max-width: 768px) {
    .margin-top20px-resp
    {
        margin-top: 2px !important;
    }

}


.margin-topimg-resp
{
   margin-top: 0px;
}
@media only screen and (min-width: 836px) and (max-width: 1272px) {
    .margin-topimg-resp
    {
        margin-top: 160px !important;
    }

}
@media only screen and (min-width: 768px) and (max-width: 835px) {
    .margin-topimg-resp
    {
        margin-top: 250px !important;
    }

}
@media only screen and (min-width: 426px) and (max-width: 766px) {
    .margin-topimg-resp
    {
        margin-top: 150px !important;
    }

}
@media only screen and (min-width: 200px) and (max-width: 425px) {
    .margin-topimg-resp
    {
        margin-top: 200px !important;
    }

}



.margin-top120px-resp
{
   margin-top: 120px;
}
@media only screen and (min-width: 836px) and (max-width: 1272px) {
    .margin-top120px-resp
    {
        margin-top: 160px !important;
    }

}
@media only screen and (min-width: 768px) and (max-width: 835px) {
    .margin-top120px-resp
    {
        margin-top: 250px !important;
    }

}
@media only screen and (min-width: 426px) and (max-width: 766px) {
    .margin-top120px-resp
    {
        margin-top: 150px !important;
    }

}
@media only screen and (min-width: 200px) and (max-width: 425px) {
    .margin-top120px-resp
    {
        margin-top: 200px !important;
    }

}

.alto-80px-resp
{
    height: 80px !important;
}
@media only screen and (min-width: 400px) and (max-width: 768px) {
    .alto-80px-resp
    {
        height: 56px !important;
    }

}



.alto-100px-resp
{
    height: 100px !important;
}
@media only screen and (min-width: 400px) and (max-width: 768px) {
    .alto-100px-resp
    {
        height: 56px !important;
    }

}

.alto-104px-resp
{
    height: 104px !important;
}
@media only screen and (min-width: 769px) and (max-width: 1024px) {
    .alto-104px-resp
    {
        height: 41px !important;
    }

}
@media only screen and (min-width: 300px) and (max-width: 768px) {
    .alto-104px-resp
    {
        height: 41px !important;
    }

}

.alto-160px-resp
{
    height: 160px !important;
}
@media only screen and (min-width: 400px) and (max-width: 768px) {
    .alto-160px-resp
    {
        height: 26px !important;
    }

}


.alto-216px
{
    height: 216px !important;
}
@media only screen and (min-width: 400px) and (max-width: 768px) {
    .alto-216px
    {
        height: 26px !important;
    }

}

.letra-cursiva
{
    font-style: italic;
}

.letra_13px
{
    font-size: 13px;
}

.letra_16px
{
    font-size: 16px !important;
}

.letra_21px
{
    font-size: 21px !important;
}

.letra_25px
{
    font-size: 25px;
}

.sombra_letra
{
    text-shadow: 3px 3px 5px #000;
}

.sobreponer
{
    z-index: 99999;
}

.link_otro
{
    color: #015dcc;
    border: none;
}

.link_otro:hover
{
    color: #ffa903;
    text-decoration: none !important;
    font-weight: bold;
}

.font-size30px
{
    font-size: 30px;
}

/***********************************************************************************
************************* Colores *****************************************/

.color_gris
{
    background-color: #232122;
}

.color_blanco
{
    background-color: #fff;
}

.color_azul_osc
{
    background-color: #1C2126;
}

.title-background3 {
    color: #F9F9F9;
    background: #02A05B;
}

.color_celeste
{
    background-color: #025ece;
}
.negrita
{
    font-weight: bold !important;
}



/***********************************************************************************
************************* Clases movimiento *****************************************/


.move
{
    margin:0px;
    width:100%;
    float:left;
}
.move ul
{
    list-style:none;
    margin:20px 0px 0px 550px;
}

.portad_move ul li{
    float:left;
    padding:5px;
    margin:5px;
    color:#aaa;
}
.portad_move ul li a{
    display:block;
    color:#f0f0f0;
}
.portad_move ul li a:hover{
    text-decoration:none;
    color:#fff;
}


.trabaj_move ul li{
    float:left;
    padding:5px;
    margin:5px;
    color:#aaa;
}
.trabaj_move ul li a{
    display:block;
    color:#f0f0f0;
}
.trabaj_move ul li a:hover{
    text-decoration:none;
    color:#fff;
}

.servic_move ul li{
    float:left;
    padding:5px;
    margin:5px;
    color:#aaa;
}
.servic_move ul li a{
    display:block;
    color:#f0f0f0;
}
.servic_move ul li a:hover{
    text-decoration:none;
    color:#fff;
}

.contacto_move ul li{
    float:left;
    padding:5px;
    margin:5px;
    color:#aaa;
}
.contacto_move ul li a{
    display:block;
    color:#f0f0f0;
}
.contacto_move ul li a:hover{
    text-decoration:none;
    color:#fff;
}

/***********************************************************************************
***********************************************************************************/

aside, details, figcaption, figure,
footer, hgroup, menu  {
    display: block;
}

section
{
    width: 100%;
    float: left;
}

article
{
    display: block;
    float: left;
    padding-left: 10px;
    padding-right: 10px;
    line-height: 1.3;
}

/*.header
{
    width: 100%;
    height: 80px;
        background: #fff;
    position: fixed;
    z-index: 99999;
    top: 0;
    float: left;
    box-shadow: 0 0 10px rgba(0,0,0,0.8);
    background: none repeat scroll 0 0 rgba(21, 21, 21, 0.85);
}*/

.header
{
    top: 0;
    position: fixed !important;
    height: 80px;
    left: 0;
    z-index: 999;
    width: 100%;
}

.logo
{
    float: left;
    margin-right: 20px;
    margin-top: 15px;
    margin-bottom: 15px;
}
.bton
{
    font-size: 16px;
    padding: 7px;
    float: left;
    margin-right: 10px;
    /*    box-shadow: 0 0 0.3em #ccc;*/

}

.box_carrusel
{
    width: 100%;
    height: 600px;
    float: left;

}

.color_link
{
    color: #fff;
    text-decoration:none;
}

.color_link:hover
{
    color: #456aaf;
    text-decoration:none;
}

/*.bton:hover
{
    font-size: 16px;
    color: red;
}*/


.centrado
{
    width: 960px;
    margin: 0px auto;
}

.menu
{
    float: right;
    margin-top: 30px;

}


#contenedor
{
    width: 100%;
    height: auto;
    /*    margin-top: 90px;*/

}

#contacto
{ 

    background: red 50% 0 no-repeat fixed;
    height: 450px;  
    margin: 0 auto; 
    width: 100%; 
    max-width: 1920px; 
    position: relative; 
    box-shadow: 0 0 10px rgba(0,0,0,0.8);
}

.sector_350px
{
    width: 100%;
    height: 350px;
    float: left;
}
.sector_auto
{
    width: 100%;
    float: left;

}

.titulo_portada
{
    width: 100%;
    margin-top: 180px;
}

.bloque_info
{
    padding: 20px;
    height: auto;
}

.footer
{
    width: 100%;
    height: 80px;
    z-index: 99999;
    top: 0;
    float: left;
    background-color: #E55E48;
    float: left;
}

.linea_generica 
{
    width: 100%;
    float: left;
    margin-bottom: 4px;
}

.cuadro_img 
{
    width: 300px;
    height: 280px;
    float: left;
    box-shadow: 0 0 0.5em #999;
}

.separ_cuadro_img 
{
    width: 20px;
    float: left;
    height: 280px;
}

.orange-background.opacity 
{
    background: none repeat scroll 0 0 rgba(251, 99, 42, 0.9);
    color: #fff;
}

.pos_der
{
    float: right;
}


.color-container 
{
    border-radius: 4px;
    position: relative;
    width: 50%;
    z-index: 2;
}

.modulos p 
{
    padding-left: 20px;
    padding-right: 20px;
    font-size: 18px;
}

.circulo
{
    border: solid 1px #FFF;
    padding: 12px;
    border: solid 2px #232122;
}

.circunf
{
    width: 100px;
    height: 100px;
}

.img-circle_alt {
    -webkit-border-radius: 500px;
    -moz-border-radius: 500px;
    border-radius: 500px;
    border-bottom: 1px solid #FFF;
    background: #F5F2DD;
    -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1);
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1);
    padding: 30px;
}

.box_centrado
{
    margin: 0px auto;
    margin-top: 10px;
    background-color: red;
}
.fondo_verde_f
{
    background: #45BA01;
}
.fondo_morado
{
    background-color: #4B2145;
}

.fondo_gris
{
    background: #949494;
}

.fondo_blanco
{
    background: #fff;
}

.fondo_negro
{
    background-color: #000;
}

.fondo_verde
{
    background-color: #47a447;
}

.fondo_azul
{
    background-color: #121b32;
}
.fondo_azul_cl
{
    background-color: #334559;
}

.fondo-footer
{
    background-color: #222;
}

.sub-fondo
{
    background: #381934;
}

.verde_menu_foot
{
    background: #3E5976;
    color: #fff;
    font-size:18px; 
}

.verde_menu_foot:hover
{
    background: #3E5976 !important;
    color: #d6ddd6 !important;
}

.fondo_footer
{
    background-color: #222;
}

.fontsize-8px
{
    font-size: 10px !important;
}

/* Carousel base class */
.carousel {
    height: 600px;
    margin-bottom: 60px;
}
/* Since positioning the image, we need to help out the caption */
.carousel-caption {
    z-index: 10;
}

/* Declare heights because of positioning of img element */
.carousel .item {
    height: 600px;
    background-color: #777;
}
.carousel-inner > .item > img {
    position: absolute;
    top: 0;
    left: 0;
    min-width: 100%;
    height: 600px;
}

/* MARKETING CONTENT
-------------------------------------------------- */

/* Center align the text within the three columns below the carousel */
.marketing .col-lg-4 {
    margin-bottom: 20px;
    text-align: center;
}
.marketing h2 {
    font-weight: normal;
}
.marketing .col-lg-4 p {
    margin-right: 10px;
    margin-left: 10px;
}

.google-maps {
    position: relative;
    padding-bottom: 75%; 
    height: 0;
    overflow: hidden;
}
.google-maps iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
}

.link
{
    color: #fff!important;
    border: none;
}

.link:hover
{
    color: #00C500 !important;
    border: none !important;
}

.link_ext
{
    color: #fff !important;
    border: none;
}

.link_ext:hover
{
    color: #ccc !important;
    border: none !important;
    text-decoration: none;
}

.link_enlace
{
    color: #f4711a !important;
    border: none;
    text-decoration: none;
}

.link_enlace:hover
{
    color: #f9e113 !important;
    border: none !important;
    text-decoration: none;
}


.button-light 
{
    border-radius: 3px;
    -moz-border-radius: 1px;
    -webkit-border-radius: 1px;
    box-shadow: 0px 0px 3px #eee;
    color: #eee !important;
}

.button-light:hover
{
    border-radius: 3px;
    -moz-border-radius: 1px;
    -webkit-border-radius: 1px;
    box-shadow: 0px 0px 6px #000;
    color: #fff !important;
    text-decoration: none; 
    background-color: rgba(88,17,30,0.7);
}

/*.button-light:focus,
.button-light.focus {
  color: #333;
  background-color: #e6e6e6;
  border-color: #8c8c8c;
}*/

.bton_index
{
    padding: 20px;
    font-size: 22px;
    margin-top: 40px;
}

@media (max-width: 1024px)  {
    .bton_index
    {
        padding: 20px;
        font-size: 22px;
        margin-top: 40px;
    }
}

@media (max-width: 768px)  {
    .bton_index
    {
        padding: 10px;
        font-size: 18px;
        margin-top: 10px;
    }
}

@media (max-width: 600px)  {
    .bton_index
    {
        padding: 10px;
        font-size: 15px;
        margin-top: 10px;
    }

}

@media (max-width: 448px)  {
    .bton_index
    {
        padding: 10px;
        font-size: 13px;
        margin-top: 5px;

    }
}

.letra-icon
{
    font-size: 70px;
}

@media (max-width: 1024px)  {
    .letra-icon
    {
        font-size: 40px !important;
    }
}

@media (max-width: 768px)  {
    .letra-icon
    {
        font-size: 25px !important;
    }
}

@media (max-width: 600px)  {
    .letra-icon
    {
        font-size: 20px !important;
    }

}

@media (max-width: 448px)  {
    .letra-icon
    {
        font-size: 12px !important;
    }
}


.contenedor-img {
    width: 200px;
    height: 200px;
    float: left;
    overflow: hidden;
    position: relative;
    text-align: center;
    cursor: default;
  
}
@media only screen and (min-width: 768px) and (max-width: 1100px) {
    .contenedor-img
    {
        width: 200px;
        height: 200px;
        font-size: 10px !important;
    }
    
}
@media only screen and (min-width: 680px) and (max-width: 768px) {
    .contenedor-img
    {
        margin-right: 10px;
    }
    
}
@media only screen and (min-width: 500px) and (max-width: 680px) {
    .contenedor-img
    {
        width: 200px;
        height: 200px;
        float: left;
        overflow: hidden;
        position: relative; 
        margin-right: 10px;
    }
    
}

@media only screen and (min-width: 139px) and (max-width: 400px) {
    .contenedor-img
    {
        width: 250px;
        height: 200px;
        float: left;
        overflow: hidden;
        position: relative;  
    }
    
}
.contenedor-img .mascara,.contenedor-img .contenido {
    width: 200px;
    height: 200px;
    position: absolute;
    overflow: hidden;
    margin-right: 10px;
    top: 0;
    left: 0
}
@media only screen and (min-width: 680px) and (max-width: 768px) {
    .contenedor-img .mascara,.contenedor-img .contenido
    {
        margin-right: 10px;
    }
    
}

@media only screen and (min-width: 768px) and (max-width: 1100px) {
    .contenedor-img .mascara,.contenedor-img .contenido
    {
        width: 200px;
        height: 200px;
        font-size: 8px !important;
    }
    
}

@media only screen and (min-width: 500px) and (max-width: 680px) {
    .contenedor-img .mascara,.contenedor-img .contenido
    {
        width: 250px;
        height: 200px;
        font-size: 8px !important;
            
    }
    
}

@media only screen and (min-width: 139px) and (max-width: 400px) {
    .contenedor-img .mascara,.contenedor-img .contenido
    {
        width: 250px;
        height: 200px;
        position: absolute;
        overflow: hidden;
        top: 0;
        left: 0 
    }
    
}

.contenedor-img img {
    display: block;
    position: relative;

}
.contenedor-img h2 {
    text-transform: uppercase;
    color: #fff;
    text-align: center;
/*    position: relative;*/
    font-size: 13px;
    padding: 10px;
    background: rgba(0, 0, 0, 0.9);
    margin: 20px 0 0 0
}
.contenedor-img p {    
    font-size: 12px;
    position: relative;
    color: #fff;
    padding: 10px 20px 10px;
    text-align: center
}
.contenedor-img a.link {
    display: inline-block;
    text-decoration: none;
    padding: 7px 14px;
    background: #222;
    color: #fff;
    text-transform: uppercase;
    box-shadow: 0 0 1px #000
}
.contenedor-img a.link:hover {
    box-shadow: 0 0 5px #000
}


/*Ejemplo 1*/
.ejemplo-1 img { 
    transition: all 0.2s linear;
}
.ejemplo-1 .mascara {
    opacity: 0;
    background-color: rgba(3,30,71, 0.7); 
    transition: all 0.3s ease-in-out;
}
.ejemplo-1 h2 {
    transform: translateX(-200px);
    opacity: 0;
    transition: all 0.7s ease-in-out;
}
.ejemplo-1 p { 
    transform: translateX(200px);
    opacity: 0;
    transition: all 0.4s linear;
}
.ejemplo-1 a.link{
    opacity: 0;
    transition: all 0.4s ease-in-out;
    transform: translateY(100px)
}
.ejemplo-1:hover img { 
    transform: scale(1.1);
} 
.ejemplo-1:hover .mascara { 
    opacity: 1;
}
.ejemplo-1:hover h2,
.ejemplo-1:hover p,
.ejemplo-1:hover a.link {
    opacity: 1;
    transform: translateX(0px);
}
.ejemplo-1:hover p {
    transition-delay: 0.1s;
}
.ejemplo-1:hover a.link {
    transition-delay: 0.2s;
    transform: translateY(0px);
}

.top-footer
{
    margin-top: 85px;
}

.top-grupo
{
    margin-top: 37px;
}

@media only screen and (min-width: 200px) and (max-width: 768px) {
    .top-grupo
    {
        margin-top: 7px !important;
    }

}