@import url('https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css');

.bg-faded{background-color:#f3f3f3;max-height:500px}
.btn-round{border-radius:500px}
.btn-round,.btn-round:hover,.btn-round:active{border-color:transparent}
.modal.animate {opacity:0}
.modal.animate.show {opacity:1}
.modal.animate .modal-dialog{-webkit-transform:translate(0,0);-ms-transform: translate(0,0);transform:translate(0,0)}
.modal.animate .a-fadeLeftBig{-webkit-animation:fadeOutLeftBig .5s;animation:fadeOutLeftBig .5s}
    .modal.animate.show .a-fadeLeftBig{-webkit-animation:fadeInLeftBig .5s;animation:fadeInLeftBig .5s}
.modal.animate .a-fadeRightBig{-webkit-animation:fadeOutRightBig .5s;animation:fadeOutRightBig .5s}
    .modal.animate.show .a-fadeRightBig{-webkit-animation:fadeInRightBig .5s;animation:fadeInRightBig .5s}
.modal.animate .a-fadeUpBig{-webkit-animation:fadeOutUpBig .5s;animation:fadeOutUpBig .5s}
    .modal.animate.show .a-fadeUpBig{-webkit-animation:fadeInUpBig .5s;animation:fadeInUpBig .5s}
.modal.animate .a-fadeDownBig{-webkit-animation:fadeOutDownBig .5s;animation:fadeOutDownBig .5s}
	.modal.animate.show .a-fadeDownBig{-webkit-animation:fadeInDownBig .5s;animation:fadeInDownBig .5s}
.modal.animate .a-fadeRight{-webkit-animation:fadeOutRight .5s;animation:fadeOutRight .5s}
	.modal.animate.show .a-fadeRight{-webkit-animation:fadeInRight .5s;animation:fadeInRight .5s}
.modal.animate .a-fadeLeft{-webkit-animation:fadeOutLeft .5s;animation:fadeOutLeft .5s}
	.modal.animate.show .a-fadeLeft{-webkit-animation:fadeInLeft .5s;animation:fadeInLeft .5s}
.modal.animate .a-fadeUp{-webkit-animation:fadeOutUp .5s;animation:fadeOutUp .5s}
	.modal.animate.show .a-fadeUp{-webkit-animation:fadeInUp .5s;animation:fadeInUp .5s}
.modal.animate .a-fadeDown{-webkit-animation:fadeOutDown .5s;animation:fadeOutDown .5s}
    .modal.animate.show .a-fadeDown{-webkit-animation:fadeInDown .5s;animation:fadeInDown .5s}
.modal.animate .a-lightSpeed{-webkit-animation:lightSpeedOut .5s;animation:lightSpeedOut .5s}
    .modal.animate.show .a-lightSpeed {-webkit-animation:lightSpeedIn .5s;animation: lightSpeedIn .5s}
.modal.animate .a-flipX{-webkit-animation:flipOutX .5s;animation:flipOutX .5s}
	.modal.animate.show .a-flipX{-webkit-animation:flipInX .5s;animation:flipInX .5s}
.modal.animate .a-flipY{-webkit-animation:flipOutY .5s;animation:flipOutY .5s}
	.modal.animate.show .a-flipY{-webkit-animation:flipInY .5s;animation:flipInY .5s}
.modal.animate .a-roll{-webkit-animation:rollOut .5s;animation: rollOut .5s}
	.modal.animate.show .a-roll{-webkit-animation:rollIn .5s;animation:rollIn .5s}
.modal.animate .a-bounce{-webkit-animation:bounceOut .5s;animation:bounceOut .5s}
	.modal.animate.show .a-bounce{-webkit-animation:bounceIn .5s;animation:bounceIn .5s}
.modal.animate .a-rotate{-webkit-animation:rotateOut .5s;animation:rotateOut .5s}
	.modal.animate.show .a-rotate{-webkit-animation:rotateIn .5s;animation:rotateIn .5s}
.modal.animate .a-zoom{-webkit-animation:zoomOut .5s;animation:zoomOut .5s}
	.modal.animate.show .a-zoom{-webkit-animation:zoomIn .5s;animation:zoomIn .5s}
.modal.animate .a-zoomUp{-webkit-animation:zoomOutUp .5s;animation:zoomOutUp .5s}
	.modal.animate.show .a-zoomUp{-webkit-animation: zoomInUp .5s;animation:zoomInUp .5s}
.modal.animate .a-zoomRight {-webkit-animation: zoomOutRight .5s;animation:zoomOutRight .5s}
	.modal.animate.show .a-zoomRight{-webkit-animation: zoomInRight .5s;animation:zoomInRight .5s}
.modal.animate .a-zoomDown{-webkit-animation:zoomOutDown .5s;animation:zoomOutDown .5s}
	.modal.animate.show .a-zoomDown{-webkit-animation:zoomInDown .5s;animation:zoomInDown .5s}
.modal.animate .a-zoomLeft{-webkit-animation:zoomOutLeft .5s;animation:zoomOutLeft .5s}
	.modal.animate.show .a-zoomLeft{-webkit-animation:zoomInLeft .5s;animation:zoomInLeft .5s}

body {
    background-color: #272727;
}

header {
    background: url(../img/especialidad-h.jpg) no-repeat center fixed;
    background-position: center right;
    background-size: cover;
    min-height: 90vh;
    display: grid;
}

header:after {
    content: "";  
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    min-height: 90vh;
    background-image: linear-gradient(0deg,rgba(39,39,39,1),rgba(39,39,39,0),rgba(39,39,39,.45),rgba(39,39,39,.45));
}

/* header > * {
    z-index: 100;
} */

.contenedor {
    width: 100px;
    height: 100px;
    position: relative;
}

.imagen,
.info {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.info {
    z-index: 10;
}

.especialidad {
    background-position: center center;
    background-size: cover;
    min-height: 50vh;
    display: grid;
}

.ambiental {
    background-image: url(../img/especialidad/ambientales.jpg);
}
.bancos {
    background-image: url(../img/especialidad/bancos.jpg);
}

.bursatil {
    background-image: url(../img/especialidad/bursatil.jpg);
}
/* buscar imagen para competencia económica */
.competencia {
    background-image: url(../img/especialidad/competencia.jpg);
}

.corporativo {
    background-image: url(../img/especialidad/corporativo.jpg);
    overflow: hidden;
    background-position: center;
}

.inmobiliario {
    background-image: url(../img/especialidad/inmobiliario.jpg);
}
.laboral {
    background-image: url(../img/especialidad/laboral.jpg);
}

.litigio {
    background-image: url(../img/especialidad/litigio.jpg);
}
.intelectual {
    background-image: url(../img/especialidad/intelectual.jpg);
}
.prevencion {
    background-image: url(../img/especialidad/prevencion.jpg);
}

.opacity-6 {
    opacity: .6;
}

.opacity-6:hover {
    opacity: 1;
    text-decoration: none;
}

.sum {
    position: absolute;
    left: 45%;
    margin-left: -55px;
    top: 45%;
    margin-top: -55px;
    opacity: .5;
    margin: 0 auto;
    width: 45px;
    opacity: .5;
    transition: 0.3s;
}

.sum:hover {
    opacity: .95;
    transform: rotate(90deg);

}

h1 {
    font-size: 4em;
}

.modal-dialog {
    max-width: 80vw;
}

.modal-content {
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    width: 100%;
    pointer-events: auto;
    background-color: #34363D;
    background-clip: padding-box;
    border: none;
    border-radius: 0rem;
    outline: 0;
}

#geo {
    background: url(../img/geo.jpg) no-repeat  center center;
    background-size: cover;
    min-height: 150px;
}



@media screen and (max-width: 800px) {
    .modal-dialog {
        max-width: 100vw;
    }

    h1 {
        font-size: 2em;
    }
    #geo {
        /* background-position: 0 calc(0% - 30px); */
        min-height: 40vh;
    }
}