/*  MID CSS*/
.mid {display: inline-block; box-sizing: border-box; width: 80vw; min-height: 100vh; height: auto; ; margin-top: 80vh; margin-left: 10vw;}
.mid_servicios{width: auto; min-height: 70vh; padding: 0 2.5vw; border-top: 2px solid rgb(212,175,55); margin-top: 10vh; border-top-left-radius: 25px; border-top-right-radius: 25px; background-color: #264040; }
#servicios a{display: inline-block; text-decoration: none; color: #ffffff; cursor: pointer; margin: 0 2vw;}
.servicios_head{display: inline-block; box-sizing: border-box; width: 100%; height: 10vh; display: inline-block; text-align: center; font-size: 2rem; text-transform: uppercase; color: #ffffff; }


.law_div{inline-block; float: left; min-height: 65vh; padding-top: 0vh;}
.law, .law2{display: flex; justify-content: space-around; flex-flow: row wrap; align-items: stretch; height: 20vh; width: 75vw;}
.law2 {margin-top: 1vh;}

.civil, .familiar, .penal, .agrario, .amparo, .familiar, .administrativo, .laboral, .mercantil, .inmobiliario { min-width: 16vw; height: 20vh; background-color: #ffffff; margin: 0 0.25vw; transition-duration: 0.85s; cursor: pointer; border-radius: 15px; padding: 5px 5px; box-sizing: border-box; flex: 1;}
.civil:hover,.familiar:hover, .penal:hover, .agrario:hover, .amparo:hover, .administrativo:hover, .laboral:hover, .mercantil:hover, .inmobiliario:hover {flex-grow: 2; background-color:gainsboro; }

.civil p, .familiar p, .penal p, .agrario p, .amparo p, .familiar p, .administrativo p, .laboral p, .mercantil p, .inmobiliario p{display: none;}
.civil:hover p,.familiar:hover p, .penal:hover p, .familiar:hover p, .agrario:hover p, .amparo:hover p, .administrativo:hover p, .laboral:hover p, .mercantil:hover p, .inmobiliario:hover p{display: inline-block; box-sizing: border-box; padding: 0.5vw 1.5vw;} 


#civ_top, #adm_top, #pen_top, #fam_top,  #agr_top, #amp_top, #lab_top, #inm_top, #mer_top {font-size: 4vh; margin-top: 25%; text-align: center; }
.civil:hover #civ_top, .familiar:hover #fam_top, .administrativo:hover #adm_top, .penal:hover #pen_top, .agrario:hover #agr_top, .amparo:hover #amp_top, .laboral:hover #lab_top, .inmobiliario:hover #inm_top, .mercantil:hover #mer_top {margin-top: 1vh; padding-right: 0.5vw; transition-duration: 0.5s; text-align: right; font-size: 3.8vh; }

.mid_nosotros{width: auto; min-height: 65vh; background-color: #264040; }
.nosotros_head{display: inline-block; box-sizing: border-box; width: 100%; height: 10vh; display: inline-block; text-align: center; font-size: 2rem; text-transform: uppercase; color: #ffffff; padding-top: 1vh; border-top-left-radius: 25px; border-top-right-radius: 25px; border-top: 2px solid rgb(212,175,55);}
.mid_nos{display: inline-block; box-sizing: border-box; width: 100%; min-height: 85vh; margin-top: 5vh;}

#mid_nos_div1, #mid_nos_div2 {display: inline-block; box-sizing: border-box; width: 100%; min-height: 25vh; padding: 1vh 10vw; color: #ffffff; font-size: 4vh; text-align: justify;}
.slogan2{padding-top: 5vh; color: #ffffff; text-align: center; font-size: 5vh; min-height: 15vh; height: auto; font-style: italic;}