:root {
  /*** Paleta de colores ***/
  /* verdeclaroPylaw RGBA: rgba(222, 220, 83)  */
  --verdeclaroPylaw: #DEDC53;  
  /* verdePylaw RGBA: rgba(158, 186, 80)  */
  --verdePylaw: #3E6117;  
  /* azulPylaw RGBA: rgba(72, 159, 181)    */
  --azulPylaw: #489FB5;
  /* azulPylaw1 RGBA: rgba(41, 88, 134)    */
  --azulPylaw1: #295886;
  /* negroTexto RGBA: rgba(36, 36, 36)     */
  --negroTexto: #242424;
  /* negroClaro RGBA: rgba(47, 47, 47)     */
  --negroClaro: #474747;
  /* negroClaro RGBA: rgba(53, 53, 51)     */
  --negroClaro2: #353533;
  /* grisPylaw RGBA: rgba(186, 178, 179)  */
  --grisPylaw: #BAB2B3;
  /* grisFondo RGBA: rgba(206, 206, 206)   */
  --grisFondo: #CECECE;
  /* grisClaro RGBA: rgba(96.9, 96.9, 96.9)   */
  --grisClaro: #f7f7f7;
  /* blanco RGBA: rgba(255, 255, 255)      */
  --blanco: #ffffff;
  
  /* Altura de menu en scroll en Areas de practica */
  --scroll-nav-height: 50px;
}

/****** Fondos ******/
/* Fondo del div es verde */
.bgblack {
  background-color: var(--negroClaro) !important;
}

.bggreen {
  background-color: var(--verdePylaw);
}

/* Fondo del div es gris */
.bggray {
  background-color: var(--grisFondo);
}

.bggraylight {
  background-color: var(--grisClaro);
}

/* Fondo del div es blanco */
.bgwhite {
  background-color: var(--blanco);
}

/********************/
/********************/
#h2titlewhite {
  color: var(--blanco);
  border-bottom: 4px solid var(--blanco);
  font-size: 24px;
  display: inline-block;
  padding-bottom: .5rem;
  /* margin-left: 10%; */
  z-index: 10;
}

#h2titlegreen {
  border-bottom: 4px solid var(--verdePylaw);
  font-size: 24px;
  display: inline-block;
  padding-bottom: .5rem;
  /* margin-left: 10%; */
  z-index: 10;
}

#h2titleblue {
  border-bottom: 4px solid var(--azulPylaw);
  font-size: 24px;
  display: inline-block;
  padding-bottom: .5rem;
  margin-left: 10%;
  z-index: 10;
}

.titlewhite {
  /** border-bottom: 1px solid #dedede; **/
  margin-bottom: 20px;
}

.textwhite {
  color: var(--blanco);
}

.textgray {
  color: var(--grisPylaw);
}

.btn-primary-green{
  background-color: var(--verdePylaw) !important;
  /* border: 2px solid var(--verdePylaw); */
  border: none;
  color: var(--blanco);
}

.btn-primary-green:hover, .btn-primary-blue:hover {
  background-color: var(--azulPylaw) !important;
  border: none;
  text-decoration: none;
}

.btn-primary-blue{
  background-color: var(--azulPylaw1) !important;
  /* border: 2px solid var(--verdePylaw); */
  border: none;
  color: var(--blanco);
}

.justify-text {
  text-align: justify;
}
/********************/
/********************/

* {
  box-sizing: border-box;
}

body {
  font-family: 'Bodoni 72', 'IBM Plex Sans', 'Calibri', 'Arial';
  font-size: 12px;
  color: var(--negroTexto);
  background-color: var(--grisFondo);
}

h1, h2, h3, h4, h5, h6{
  font-family: 'Bodoni 72', 'IBM Plex Sans', 'Calibri';
}

#distinciones, #send-footer-bottom {
  min-height: 85vh;  
}

#full-page-footer {
  position: absolute;
  bottom: 0;
  width: 100%;
}

/* Mover todos los contenidos justo debajo del navbar */
.content-wrapper {
  position: relative;
  top: 75px;
}

/** Vista Desktop (xl) **/
@media only screen and (min-width: 1200px) {
  .content-wrapper {
    position: relative;
    top: 86px;
  }

  body {
    font-size: 17px;
  }

}

/** Vista Medium / Large (md / lg) **/
@media only screen and (min-width: 768px) {
  body {
    font-size: 15px;
  }
}

.hidden {
  display: none;
}

/********************/
/****** Navbar ******/
/********************/
#header-nav {
  border-radius: 0;
  border: 0;
  min-height: 75px;
  max-height: 86px;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  width: 100%;
  padding: 16px 0;
}

/* Prueba sidebar */
.navbar-dark .navbar-toggler {
  border-color: transparent;
}

.navbar-toggler:focus {
  border-color: transparent;
  box-shadow: none;
  font-weight: bold;
}

/* .navbar-dark .navbar-toggler-icon:before{
  font-family: FontAwesome;
  content: "\f0c9";
} */

.sidebar, .overlay {
  position: fixed;
  top: 75px;
  bottom: 0;
}

.sidebar {
  height: 100%;
  left: -100%;
  max-width: 250px;
  transition: all ease 0.25s;
}

.overlay {
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  background: rgba(0, 0, 0, .70);
  visibility: hidden;
}

.main-navigation.active .sidebar {
  left: 0;
}

.main-navigation.active .overlay {
  visibility: visible;
}

/* Fin prueba sidebar */

.navbar {
  justify-content: center;
}

.navbar-nav {
  margin: 0 auto;
  padding: 0;
}

.navbar-nav a {
  padding: .3rem 16px;
}

/* .navbar-pages{
  margin-bottom: 100%;
} */

.container-nav {
  padding: 0;
  margin: 0 10%;
}

.navbar-brand {
  position: absolute;
  left: 50%;
  top: 10px;
}

.navbar-brand-img {
  /* background: url('../images/icono-Blanco-md.png') no-repeat ; */
  /* margin: 5px 10px 0; */
  width: auto;
  height: auto;
  position: static;
  margin-left: -50%;
}

.nav-item {
  min-width: min-content;
  margin: 0 auto;
  padding: 0;
}

.nav-item:hover,
.footer-social .list-group-item:hover {
  color: var(--blanco);
  border-radius: 40px;
  background-color: rgba(255, 255, 255, .07);
}

.nav-item:active,
.footer-social .list-group-item:active {
  color: var(--blanco);
  border-radius: 40px;
  background-color: rgba(255, 255, 255, .07);
}

.nav-item .active {
  border-radius: 40px;
  /* background-image: radial-gradient(to left bottom, var(--negroClaro) 30%, var(--grisFondo) 50%); */
  background-image: radial-gradient(at bottom left, var(--negroClaro) 0%, var(--grisFondo) 190%);
}

.navbar-nav .nav-link {
  margin: 0;
  padding: .3rem 16px;
}

.list-group-horizontal,
.list-group-item {
  border-style: none;
  background-color: transparent;
}

.navbar-nav.list-group-horizontal {
  position: fixed;
  bottom: 0;
  max-width: 250px;
  width: 100%;
  text-align: end;
}

.list-group-item {
  border-radius: 40px !important;
  margin: 3px 5px;
  padding: 5px 0;
  max-width: 70px;
}

.list-group-item a {
  margin: 0 auto;
}

.social-icon {
  height: auto;
  width: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--blanco);
  font-size: 20px;
  border-radius: 7px;
  cursor: pointer
}

/** Vista Desktop (xl) **/
@media only screen and (min-width: 1200px) {

  .sidebar,
  .overlay {
    position: static;
    max-width: 100%;
  }

  .navbar-nav {
    margin: 0;
    padding: 0;
  }

  .navbar-brand {
    position: inherit;
    margin-right: 32px !important;
  }

  .navbar-brand-img {
    position: inherit;
    margin-left: 0;
  }

  .nav-item {
    margin: 0 8px;
    padding: 0;
  }

  .navbar-nav .nav-link {
    margin: 0;
    padding: .3rem .5rem !important;
  }

  .navbar-nav.list-group-horizontal,
  .navbar-nav .list-group-item {
    display: inline-block;
  }

  .navbar-nav.list-group-horizontal {
    position: inherit;
  }

  .navbar-nav .list-group-item {
    border-radius: 40px !important;
    min-width: 60px;
  }

  .navbar-nav .list-group-item a {
    margin: 0 auto;
  }
}

/********************/
/** Fin del navbar **/
/********************/


/********************/
/****** Footer ******/
/********************/
.copy-right {
  font-size: 14px;
}

#footer-nav .nav-item:hover,
#footer-nav .nav-item a:hover {
  background-color: transparent;
  color: var(--blanco);
}

#footer-nav .nav-item:active,
#footer-nav .nav-item a:active {
  background-color: transparent;
  color: var(--blanco);
}

.bgblack .text-muted {
  color: #979EA5 !important;
}

.footer-social .list-group-item {
  border-radius: 40px !important;
  margin: 0px 5px;
  padding: 3px 0;
  min-width: 52px;
  max-width: 70px;
}

.social-icon,
.fa {
  font-size: 18px;
}

/** Vista extra small (xs) **/
@media only screen and (max-width:576px) {
  .copy-right {
    font-size: 12px;
  }

  .footer-link {
    font-size: 15px;
  }

  .social-icon {
    font-size: 16px;
  }
}

/********************/
/** Fin del footer **/
/********************/


/***************************/
/****** Página Inicio ******/
/***************************/
/********************/
/***** Carrusel *****/
/********************/
/* .main{
  position: relative;
  top: 75px;
  width: 100%;
} */

#carouselHome {
  background-color: var(--grisFondo);
}

#carouselHome,
#carouselHome .carousel-inner,
.carousel-item,
.carousel-item.active {
  height: 40vh;
  padding: 0;
}

.carousel-indicators {
  bottom: 0rem;
  margin-bottom: 0rem;
}

.carousel-indicators [data-bs-target] {
  width: 35px;
  height: 3px;
  margin: auto 15px;
}

.carousel-item:nth-child(1) {
  background: url('../images/carrusel/fondos/oficina01_new_pylaw.png') no-repeat center;
  background-size: cover;
  background-position: 50% 62%;
  /* background-position: 50% 15%; */
  
}

.caro-logo-container {
  overflow: hidden;
  width: 100%;
  height: 100%;
  margin: 0 auto;
  padding: 0;
}

.carousel-logo {
  /* background-color: red; */
  background: url('../images/logos/png/pylaw_logo_final.png') no-repeat center;
  background-size: contain;
  max-width: 65%;
  /* max-height: 90%; */
  height: 100%;
  margin: auto;
  filter: drop-shadow(0 0 10px #fefefe);
}

.carousel-item:nth-child(2) {
  background: url('../images/carrusel/fondos/oficina_editada_02.png') no-repeat center;
  background-size: cover;
}

.carousel-item:nth-child(3) {
  background: url('../images/carrusel/fondos/oficina_editada_03.png') no-repeat center;
  background-size: cover;
}

/* Texto y CTA sobre los elementos del carrusel */
/* .caro-container {
  position: absolute;
  color: var(--blanco);
  background: hsla(0,0%,50%,.1);
  box-shadow: 4px 3px 25px var(--negroTexto);
  border: solid .5px rgba(255,255,255,.2);
  border-radius: 15px;
  bottom: 9rem;
  left: 12.5rem;
  width: 45%;
  padding: 50px;
} */

.caro-container {
  position: absolute;
  color: var(--blanco);
  border-radius: 15px;
  transform: translate(-50%, 50%);
  bottom: 55%;
  left: 50%;
  width: auto;
  min-width: 50%;
  max-width: 70%;
  /* min-height: 15rem; */
  margin: auto;
  padding: 1rem 1rem .5rem;
  background-image: linear-gradient(to bottom right, rgba(255, 255, 255, .2) 0%, rgba(255, 255, 255, 0) 100%);
  box-shadow: rgba(255, 255, 255, .1) -5px -10px 45px inset, 5px 5px 45px var(--negroTexto);
}

.caro-container h2 {
  font-size: 1rem;
  font-weight: bold;
  margin: 0 0 1rem;
  text-align: center;
}

.caro-container h5 {
  font-size: .75rem;
  margin: 0 0 1.2rem;
  text-align: center;
}

.caro-container a.btn-primary {
  font-size: .8rem;
  text-decoration: underline;
  font-weight: bold;
  display: block;
  text-align: center;
  height: auto;
  width: auto;
  background-color: transparent;
  border-color: transparent;
  margin-bottom: .25rem;
}

.caro-container a.btn-primary:hover {
  background-color: none;
  border-color: transparent;
  text-decoration: none;
}

/** Vista Desktop (lg / xl) **/
@media only screen and (min-width: 992px) {

  #carouselHome,
  #carouselHome .carousel-inner,
  .carousel-item,
  .carousel-item.active {
    height: 90vh;
  }

  .carousel-indicators {
    bottom: 2rem;
  }

  .carousel-indicators [data-bs-target] {
    width: 35px;
    height: 5px;
    margin: auto 25px;
  }

  .caro-logo-container {
    overflow: hidden;
    width: 80%;
    max-height: 100%;
    margin: 0 auto;
    padding: 0;
  }

  .carousel-logo {
    width: 100%;
    height: 80%;
    margin: auto;
    padding: 0;
  }

  .caro-container {
    bottom: 7rem;
    left: 8rem;
    width: auto;
    max-width: 60%;
    transform: translate(0, 0);
    min-height: 15rem;
    padding: 2rem 3rem;
    text-align: left;
  }

  .caro-container h2 {
    font-size: 2rem;
    text-align: left;
  }

  .caro-container h5 {
    font-size: 1.25rem;
    margin: 1rem 0 1rem;
    text-align: left;
  }

  .caro-container a.btn-primary {
    font-size: 1.25rem;
    text-align: right;
    text-decoration: none;
    padding: 1rem 1.5rem;
    /* text-decoration: none; */
    border-radius: 10em;
    background-color: rgba(255, 255, 255, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.2);
    float: right;
    margin-top: 1.5rem;
    margin-right: -.5rem;
  }

  .caro-container a.btn-primary:hover {
    background-color: rgba(41, 88, 134, 1);
    border: 1px solid rgba(255, 255, 255, 0);
    text-decoration: none;
  }

  .carousel-control-prev,
  .carousel-control-next {
    width: 10%;
  }

  .carousel-control-prev:hover {
    background: linear-gradient(to left, rgba(41, 41, 41, 0), rgba(255, 255, 255, 0.2));
  }

  .carousel-control-next:hover {
    background: linear-gradient(to right, rgba(41, 41, 41, 0), rgba(255, 255, 255, 0.2));
  }
}

/** Vista Small / Medium (sm / md) **/
@media only screen and (min-width: 576px) and (max-width: 991px) {

  #carouselHome,
  #carouselHome .carousel-inner,
  .carousel-item,
  .carousel-item.active {
    height: 93vh;
  }

  .carousel-indicators {
    bottom: 2rem;
  }

  .carousel-indicators [data-bs-target] {
    width: 35px;
    height: 5px;
    margin: auto 25px;
  }

  .caro-logo-container {
    overflow: hidden;
    width: 100%;
    height: 100%;
    margin: 0 auto;
    padding: 0 0;
  }

  .carousel-logo {
    width: 100%;
    height: 80%;
    margin: auto;
    padding: 0;
    /* margin-bottom: 20%; */
  }

  .caro-container {
    bottom: 6.5rem;
    left: 15%;
    width: auto;
    min-width: 50%;
    max-width: 65%;
    max-height: 25rem;
    transform: translate(0, 0);
    padding: 1rem 1.5rem;
    text-align: left;
  }

  .caro-container h2 {
    font-size: 1.25rem;
    text-align: left;
  }

  .caro-container h5 {
    font-size: 1rem;
    margin: 1rem 0 2rem;
    text-align: left;
  }

  .caro-container a.btn-primary {
    font-size: 1.15rem;
    text-align: right;
    text-decoration: underline;
    text-align: end;
    font-weight: bold;
    padding: 0;
    background-color: transparent;
    border: transparent;
    margin-bottom: .25rem;
    height: auto;
    width: auto;
  }

  .caro-container a.btn-primary:hover {
    background-color: none;
    border: none;
    text-decoration: none;
  }
}

/** Vista especial para acomodar el logo del carrusel en tamaño xs **/
@media only screen and (min-width: 451px) and (max-width: 575px) {
  .caro-logo-container {
    width: 80%;
    height: 100%;
  }

  .carousel-logo {
    max-width: 90%;
    max-height: 90%;
  }
}

/********************/
/**** Secciones *****/
/********************/
.justify-text {
  text-align: justify;
  text-justify: auto;
}

.header-center {
  text-align: center;
  display: block !important;
  border-bottom: none !important;
  margin-left: 0 !important;
}

.header-center>span {
  position: relative;
  top: 1px;
  display: inline-block;
  border-bottom: 4px solid var(--blanco);
  padding-bottom: .5rem;
}

/**************************/
/**** Seccion Valores *****/
/**************************/
.container .card-pablaw-expand {
  position: relative;
  cursor: pointer;
  border: solid 2px var(--blanco) !important;
  background-color: var(--blanco);
  padding-bottom: 0;
  box-shadow: 0 10px 25px rgba(0, 0, 0, .50);
}

.container .card-pablaw-expand .card-body {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
}

.container .card-pablaw-expand .face.face1 {
  z-index: 1;
}

.container .card-pablaw-expand .face.face1 .content {
  color: var(--negroTexto);
  opacity: 1;
}

.container .card-pablaw-expand .face.face2 {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: baseline;
  height: auto;
  transform: translateY(0px);
  overflow: hidden;
}

.container .card-pablaw-expand .card-text{
  padding-bottom: 1rem;
}

.card-pablaw-expand svg {
  fill: var(--verdePylaw);
  width: 4rem;
  height: 4rem;
  margin: 1rem auto 0;
}

/** Vista Desktop (lg / xl) **/
@media only screen and (min-width:992px) {
  .container .card-pablaw-expand {
    border: solid 2px var(--blanco) !important;
    background-color: var(--verdePylaw);
    box-shadow: none;
  }

  .container .card-pablaw-expand:hover {
    border: solid 2px var(--verdePylaw) !important;
    background-color: var(--blanco);
    height: 100% !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, .50);
    /* Revisar el sombreado con Chucho */
    padding-bottom: 0;
  }

  .container .card-pablaw-expand,
  .container .card-pablaw-expand .card-body {
    height: 50% !important;
    transition: 0.5s;
  }

  .container .card-pablaw-expand:hover .face.face1 {
    background: none;
  }

  .container .card-pablaw-expand .face.face1 .content {
    color: var(--blanco);
    opacity: .9;
    transition: 0.5s;
  }

  .container .card-pablaw-expand:hover .face.face1 .content {
    color: var(--negroTexto);
    opacity: 1;
  }

  .container .card-pablaw-expand .face.face2 {
    transform: translateY(-100px);
    height: 0%;
    transition: 0.5s;
  }

  .container .card-pablaw-expand:hover .face.face2 {
    height: auto;
    transform: translateY(0px);
  }

  .card-pablaw-expand svg {
    fill: var(--blanco);
    transition: 0.5s;
  }

  .card-pablaw-expand:hover svg {
    fill: var(--verdePylaw);
  }
}

/************************************/
/**** Seccion Areas de practica *****/
/************************************/
.btn-chip,
.card-pablaw {
  /* .card-pablaw -> nosotros.html */
  color: var(--negroTexto) !important;
  border: solid 2px var(--verdePylaw) !important;
  text-align: left;
}

.btn-chip:hover {
  color: var(--blanco) !important;
  background-color: var(--verdePylaw);
  border: solid 2px var(--verdePylaw);
}

.btn-chip:hover svg,
.btn-chip.svg-sm:hover svg {
  fill: var(--blanco);
}

.btn-chip:focus {
  box-shadow: 0 0 0 0.25rem rgba(186, 178, 179, .40);
  /*Verde Pylaw*/
}

.btn-chip:active {
  background-color: var(--verdePylaw);
  border: solid 2px var(--verdePylaw);
  box-shadow: none;
}

.btn-chip svg {
  fill: var(--verdePylaw);
  width: 25px;
  height: 25px;
  margin-right: 10px;
}

.btn-chip:active svg {
  fill: var(--blanco);
}

.btn-chip.svg-sm {
  min-height: 41.95px;
}

.btn-chip.svg-sm svg {
  fill: var(--verdePylaw);
  width: 22px;
  height: 24px;
  padding-bottom: 3px;
  margin-right: 15px;
}


/***************************/
/**** Seccion Contacto *****/
/***************************/
section#contacto {
  overflow: hidden;
  position: relative;
}

section#contacto .logo-mov {
  position: absolute;
  bottom: 0;
  left: 10%;
  height: 100%;
  z-index: 0;
}

/* section#contacto div.bg-svg{
  min-height: 400px;
  background: url('../images/logos/png/logotipo_contacto_sin_fondo.png') no-repeat left;
  background-size: contain;
} */

.card-container .card.card-contacto {
  /* font-size: 15px; */
  color: var(--blanco);
  border: none;
  /* border-radius: 1rem; */
  max-width: 100%;
  height: auto;
  margin: auto auto;
}

/* .card-container .card.card-contacto .card-logo {
  border-color: var(--azulPylaw) !important;
} */

.card-container .card.card-contacto.card-screen{
  border-radius: 0 0 1rem 1rem;
}

.card-container .card.card-contacto .card-logo img{
  max-height: 80%;
  width: auto;
}

/* .card-container .card.card-contacto .border-end.border-xs-end-0{
  border-right: none !important;
} */

.card-container .card.card-contacto .card-body a.btn-primary-blue {
  border: .5px solid var(--azulPylaw);
}

/* .card-container .card.card-contacto .card-body a.btn-primary:hover {
  background-color: #0b5ed7 !important;
} */

/** Vista Móvil (sm) **/
@media only screen and (min-width:576px){
  /* .card-container .card.card-contacto .border-bottom.border-sm-bottom-0{
    border-bottom: none !important;
  } */

  /* .card-container .card.card-contacto .border-end.border-xs-end-0.border-4{
    border-right: 4px solid !important;
  } */

  .card-container .card.card-contacto{
    position: relative;
  }
  
  .card-container .card.card-contacto.card-screen{
    z-index: 1;
    border-radius: 1rem 0 0 1rem !important;
  }
  
  .card-container .card.card-contacto .card-logo img{
    position: absolute;
    z-index: 0;
    width: auto;
    height: 70%;
    right: 1rem;
  }
}

/** Vista Desktop (md / lg / xl / xxl) **/
@media only screen and (min-width:992px) {
  .hidden-lg {
    display: none;
  }

  section#contacto div.logo-container {
    /* border: solid 1px red; */
    display: initial;
    /* position: relative; */
    /* overflow: hidden; */
    min-height: 60vh;
  }
  
  section#contacto div.logo-container div.bg-svg {
    position: absolute;
    bottom: 0;
    left: 10%;
    height: 515px;
    z-index: 0;
  }
  
  section#contacto div.logo-container div.bg-svg svg {
    height: 100%;
  }

}

/** Vista especial Desktop para logo SVG (xxl) **/
/* @media only screen and (min-width: 1400px) {
  section#contacto div.logo-container div.bg-svg {
    left: 10rem;
  }
} */

/*********************************/
/******* Fin Pagina Inicio *******/
/*********************************/


/*********************************/
/******** Página Nosotros ********/
/*********************************/
.card-pablaw svg {
  fill: var(--verdePylaw);
  width: 4rem;
  height: 4rem;
  margin: 1rem auto 0;
}

/* Codigo viejo abajo */
.container.container-left {
  position: relative;
  /* background: url(../images/law2.jpg); */
  background-size: cover;
  opacity: .9;
  height: 400px;
  margin-top: -.7rem;
  /*Checar valor de pt-3 de bootstrap */
}

.column-left {
  /* display: flex; */
  position: absolute;
  /* justify-content: center; */
}

.glass {
  /* Spanish Pink */
  /* background-color: rgba(237, 187, 187, .4); */
  /* Avocado */
  /* background-color: rgba(83, 120, 5, 0.1); */
  /* Pale Pink */
  background-color: rgba(251, 218, 218, .2);
  position: absolute;
  box-shadow: 10px 3px 30px black;
  height: 335px;
  width: 33%;
  left: 35%;
  border: solid 2px rgba(255, 255, 255, 0.3);
  border-radius: 25px;
  z-index: -2;
  overflow: hidden;
  transition: 1s;
}

/* .glass::before{
  content: '';
  margin: -35px;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  filter: blur(8px);
  -webkit-filter: blur(8px);
} */

.shine {
  height: 100%;
  width: 100%;
}

.shine::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100px;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.8);
  transform: skewX(15deg);
  transition: 1s;
  /* z-index: -3; */
}

.logo-card:hover~.glass .shine::before {
  left: 350px;
  filter: blur(15px);
}

.logo-card {
  background: url('../images/LogotipoSencudario-Original_cropped.png') no-repeat center;
  background-size: cover;
  height: 300px;
  width: 375px;
  position: absolute;
  left: 23%;
  transition: 1s;
}

.logo-card:hover {
  transform: skewY(3deg);
  transition: 1s;
}

.logo-card:hover~.glass {
  transform: skewY(5deg);
  transition: 1s;
  box-shadow: 20px 8px 30px black;
}


.column-right {
  margin-top: 2rem;
  text-align: justify;
  line-height: 26px;
  padding: 0 2.5rem;
}

/* Fin codigo viejo */
/***************************/
/*** Fin Pagina Nosotros ***/
/***************************/

/*************************************/
/******** Página Distinciones ********/
/*************************************/
#distinciones-img{
  background: url('../images/stock/Books2.jpeg') no-repeat center;
  background-size: cover;
}

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


/***************************************/
/******** Página A. de Practica ********/
/***************************************/
@media screen and (min-width: 1200px) and (max-width: 1399px) {
  .btn-areas {
    max-width: 13rem;
    height: 6rem;
    white-space: pre-line !important;
    /*Solucion temporal. Revisar opcion de cards*/
    text-align: center;
  }

}


/*******************************************/
/******** Fin Página A. de Practica ********/
/*******************************************/


.body-main,
main::before {
  position: relative;
  top: 85px;
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/80625/tree.jpg) 0 / cover fixed;
}

main {
  margin: 100px auto;
  position: relative;
  padding: 10px 5px;
  background: hsla(0, 0%, 100%, .3);
  font-size: 20px;
  /* font-family: 'Lora', serif; */
  line-height: 1.5;
  border-radius: 10px;
  width: 60%;
  box-shadow: 5px 3px 30px black;
  overflow: hidden;
}

main::before {
  content: '';
  margin: -35px;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  filter: blur(40px);
  z-index: -1;
}

/* REVISAR */
#textttt {
  filter: sepia(1) invert(100%);
}
/***********/

#administrativo-bg, #arbitraje_y_mediacion-bg, #contratos-bg, #constitucional_y_amparo-bg, 
#corporativo_y_notarias-bg, #fintech-bg, #fiscal-bg,
#gobierno_corporativo-bg, #laboral-bg, #litigio_civil_y_mercantil-bg,
#penal-bg, #propiedad_intelectual-bg, #pro_bono-bg, #seguridad_social-bg,
#tecnologia_y_datos-bg {
  display: none;
}

@media screen and (min-width:992px){
#administrativo-bg {
  display: block;
  background-image: url("../images/iconos/areas_practica/01_administrativo.svg");
  background-repeat: no-repeat;
  /** background-attachment: fixed; **/
  background-position: 75% 25%;
  filter: sepia(0.8) invert(75%);
}

#arbitraje_y_mediacion-bg {
  display: block;
  background-image: url("../images/iconos/areas_practica/02_arbitraje_y_mediacion.svg");
  background-repeat: no-repeat;
  /** background-attachment: fixed; **/
  background-position: 25% 25%;
  filter: sepia(0.8) invert(75%);
}

#contratos-bg {
  display: block;
  background-image: url("../images/iconos/areas_practica/04_contratos.svg");
  background-repeat: no-repeat;
  /** background-attachment: fixed; **/
  background-position: 75% 25%;
  filter: sepia(0.8) invert(75%);
}

#constitucional_y_amparo-bg {
  display: block;
  background-image: url("../images/iconos/areas_practica/03_constitucional_y_amparo.svg");
  background-repeat: no-repeat;
  /** background-attachment: fixed; **/
  background-position: 25% 25%;
  filter: sepia(0.8) invert(75%);
}

#corporativo_y_notarias-bg {
  display: block;
  background-image: url("../images/iconos/areas_practica/05_corporativo_y_notarias.svg");
  background-repeat: no-repeat;
  /** background-attachment: fixed; **/
  background-position: 75% 25%;
  filter: sepia(0.8) invert(75%);
}

#fintech-bg {
  display: block;
  background-image: url("../images/iconos/areas_practica/06_fintech.svg");
  background-repeat: no-repeat;
  /** background-attachment: fixed; **/
  background-position: 25% 25%;
  filter: sepia(0.8) invert(75%);
}

#fiscal-bg {
  display: block;
  background-image: url("../images/iconos/areas_practica/07_fiscal.svg");
  background-repeat: no-repeat;
  /** background-attachment: fixed; **/
  background-position: 75% 25%;
  filter: sepia(0.8) invert(75%);
}

#gobierno_corporativo-bg {
  display: block;
  background-image: url("../images/iconos/areas_practica/08_gobierno_corporativo.svg");
  background-repeat: no-repeat;
  /** background-attachment: fixed; **/
  background-position: 25% 25%;
  filter: sepia(0.8) invert(75%);
}

#laboral-bg {
  display: block;
  background-image: url("../images/iconos/areas_practica/09_laboral.svg");
  background-repeat: no-repeat;
  /** background-attachment: fixed; **/
  background-position: 75% 25%;
  filter: sepia(0.8) invert(75%);
}

#litigio_civil_y_mercantil-bg {
  display: block;
  background-image: url("../images/iconos/areas_practica/10_litigio_civil_y_mercantil.svg");
  background-repeat: no-repeat;
  /** background-attachment: fixed; **/
  background-position: 25% 25%;
  filter: sepia(0.8) invert(75%);
}

#penal-bg {
  display: block;
  background-image: url("../images/iconos/areas_practica/11_penal.svg");
  background-repeat: no-repeat;
  /** background-attachment: fixed; **/
  background-position: 75% 25%;
  filter: sepia(0.8) invert(75%);
}

#propiedad_intelectual-bg {
  display: block;
  background-image: url("../images/iconos/areas_practica/13_propiedad_intelectual.svg");
  background-repeat: no-repeat;
  /** background-attachment: fixed; **/
  background-position: 25% 25%;
  filter: sepia(0.8) invert(75%);
}

#pro_bono-bg {
  display: block;
  background-image: url("../images/iconos/areas_practica/12_pro_bono.svg");
  background-repeat: no-repeat;
  /** background-attachment: fixed; **/
  background-position: 75% 25%;
  filter: sepia(0.8) invert(75%);
}

#seguridad_social-bg {
  display: block;
  background-image: url("../images/iconos/areas_practica/14_seguridad_social.svg");
  background-repeat: no-repeat;
  /** background-attachment: fixed; **/
  background-position: 25% 25%;
  filter: sepia(0.8) invert(80%);
}


#tecnologia_y_datos-bg {
  display: block;
  background-image: url("../images/iconos/areas_practica/15_tecnologia_y_datos.svg");
  background-repeat: no-repeat;
  /** background-attachment: fixed; **/
  background-position: 75% 25%;
  filter: sepia(0.8) invert(75%);
}
}

/* Go to top Button*/
#topBtn {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 30px;
  z-index: 99;
  font-size: 18px;
  border: none;
  outline: none;
  background-color: var(--azulPylaw);
  opacity: 0.6;
  color: white;
  opacity: 0.6;
  cursor: pointer;
  padding: .85rem;
  border-radius: 4px;
}

#topBtn:hover {
  background-color: var(--verdePylaw);
  opacity: 1;
}


#areas-de-practica {
  /* padding-top: var(--scroll-nav-height); */
  padding-top: 0;
}

#scroll-menu {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  margin-top: -50px;
}

.nav-hidden{
  visibility: hidden;
  opacity: 0;
}

.nav-active{
  /* transform: translateY(75px); */
  /* box-shadow: none; */
  top: 75px;
  visibility: visible;
  opacity: 1;
  transition: visibility 0s, opacity .15s linear;
  /* transition: display 2s; */
}

#scroll-menu  div.container-fluid {
  margin: auto 12rem;
  justify-content: end !important;
}

#scroll-menu .links{
  padding-left: 0;
  margin-bottom: 0;
}

#scroll-menu .links li {
  margin: 0 auto;
  /* Cambiar color de border left */
  /* border-left: 2px solid #3ca0e7; */
  display: inline-block;
  padding: 0 15px;
  position: relative;
}

#scroll-menu li:hover {
  cursor: pointer;
}

#scroll-menu .dropdown-menu {
  max-height: 200px;
  overflow-y: auto;
}

#scroll-menu li .dropdown-item {
  color: var(--negroTexto);
}

#scroll-menu li .dropdown-item:hover {
  color: var(--verdePylaw);
  background-color: transparent;
}

/* #scroll-menu .links li > a.trigger-drop {
  padding-right: 20px !important;
} */

#scroll-menu .links .dropdown:hover > .dropdown-menu {
  box-shadow: 0px 3px 5px -1px #ccc;
} 


#scroll-menu .links .dropdown .dropdown-menu li {
  clear: both;
  width: 100%;
  text-align: left;
  margin-bottom: .5rem;
  border-style: none;
}

#scroll-menu .links .dropdown .dropdown-menu li .dropdown-item:hover {
  padding-left: 10px;
  border-left: 2px solid var(--verdePylaw);
  transition: all 0.3s ease;
}

#scroll-menu .links li ul li .dropdown-item {
  transition: all 0.5s ease; 
}

@media screen and (min-width: 1200px) {
  #scroll-menu .dropdown-menu {
    max-height: 350px;
    overflow-y: auto;
  }

  #scroll-menu .links .dropdown:hover > .dropdown-menu {
    display: block;
    min-width: 250px;
    box-shadow: 0px 3px 5px -1px #ccc;
  } 
}