/* Barra de navegacion */

/***
Colores 
Color
Azul #00589d
Dorado #ffd700
Negro #000000

#CC9933

HTML: #0022D2
HTML: #FFB800
HTML: #FFFFFF
HTML: #000000



**/

.main {
  max-width: 600px;
  margin: 0 auto;
  text-align: center;
}

.table-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 3fr;
  border-top: 1px solid #FFFFFF;
  border-right: 1px solid #FFFFFF;
  margin-bottom: 1rem;
  text-align: left;
}

.table-grid>span {
  padding: 8px 4px;
  border-left: 1px solid #FFFFFF;
  border-bottom: 1px solid #FFFFFF;
}


html {
  min-height: 100%;
  position: relative;
}

body {
  margin: 0;
  margin-bottom: 40px;
  background: linear-gradient(to right, #000000, #0022D2);
}

.navbar {
  background: linear-gradient(to right, #000000, #0022D2);
}

.bi-list {
  color: white;
}

.nav-link {
  transition: ease-in .4s;
}

.nav-link:hover {
  color: #988726 !important;
  transform: scale(1.1);
}

.horizontal-gradient {
  background: linear-gradient(to right, #000000, #0022D2);
}


/**
.btn {
  background-color: #00589d !important;
  /**transition: background ease-in .3s;
  

  transition: ease-in .4s;
}
*/
.simple-login-container {
  width: 300px;
  background: white;
  max-width: 100%;
  margin: 50px auto;
  border-radius: 10px;
  box-shadow: 0px 1px 4px 4px white;
  padding: 1px;

}

.simple-login-container h2 {
  text-align: center;
  font-size: 20px;
}

.simple-login-container .btn-login {
  background-color: #FF5964;
  color: #fff;
}

/*
.btn:hover {
  background: yellow !important;
  transform: scale(2.5);
}*/

.centrado {
  display: flex;
  justify-content: center;
}

.img_bordes {
  border-radius: 10px;
  box-shadow: 0px 1px 4px 4px #00589d;
  width: 150px;
  padding: 1px;

}

.separacion_informativo {
  margin-top: 9rem;
}


.accordion {
  border-radius: 5px;
  box-shadow: 0px 0px 0px 3px #00589d;
  padding: 1px;

}

.texto_box {
  color: white;
  padding: 30px;
  text-align: center;
  font-family: Roboto-Medium;
  font-size: 20px;
}

.box .col {
  align-items: center;
  transition: ease-in .5s;
  height: 300px;
}

.box .col1 {
  background-color: #660033;
}

.box .col1:hover {
  background-color: #763354;
}

.box .col2 {
  background-color: #336666;
}

.box .col2:hover {
  background-color: #659494;
}

.box .col3 {
  background-color: #999966;
}

.box .col3:hover {
  background-color: #c7c78f;
}

.box .col4 {
  background-color: #666666;
}

.box .col4:hover {
  background-color: #a7a5a5;
}

.box .col5 {
  background-color: #333333;
}

.box .col5:hover {
  background-color: #918f8f;
}



/*** CAMBIOS DE PANTALLA ***/

@media (min-width:320px) {

  .nav-link-atributos {
    font-size: 20px;
  }

  .navbar-right {
    position: absolute;
    right: 5%;
    transform: translatex(-50%);
    top: 20%;
  }

  .logo_inicio {
    width: 30%;
    border-radius: 10px;
    box-shadow: 0px 1px 4px 4px;
  }

  .separacion {
    margin-top: 3rem;
  }

  .imagen_encabezado {
    background-image: url("/static/imagen/delavegaabogados/encabezado/1.png");
    height: 400px;
    background-attachment: local;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
  }

  .imagen_encabezado2 {
    background-image: url("/static/imagen/delavegaabogados/encabezado/2.png");
    height: 400px;
    background-attachment: local;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
  }

  .imagen_encabezado3 {
    background-image: url("/static/imagen/delavegaabogados/encabezado/3.png");
    height: 400px;
    background-attachment: local;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
  }

  .texto_encabezado {
    max-width: 420px;
    position: absolute;
    left: 0%;
    top: 0%;
    overflow: hidden;

    font-family: Roboto-Regular;
    font-size: 20px;
    color: #00589d;
    text-align: justify;

    opacity: 0.8;
    background-color: white;

    margin-top: 3rem;
    padding: 5px;


    border-radius: 10px;
    box-shadow: 0px 1px 4px 1px #FFB800;
  }

  .mapa {
    box-shadow: 0px 1px 4px 1px #FFB800;
  }

  .logo_encabezado {
    max-width: 200px;
    position: absolute;
    left: 10%;
    top: 8%;
    overflow: hidden;
    border-radius: 10%;
  }

  .img_cabecera_bordes {
    border-radius: 10px;
    box-shadow: 0px 1px 4px 1px #00589d;
    width: 300px;
    padding: 10px;

  }

  .parrafo_servicio {
    font-family: Roboto-Medium;
    color: white;
    text-align: justify;
    font-size: 20px;
    width: 95%;
    margin: auto;
    padding: 30px;
  }


}

@media (min-width:480px) {
  /* smartphones, Android phones, landscape iPhone */

  .nav-link-atributos {
    font-size: 20px;
  }

  .texto_encabezado {
    max-width: 420px;
    position: absolute;
    left: 13%;
    top: 3%;
    overflow: hidden;

    font-family: Roboto-Regular;
    font-size: 20px;
    color: #00589d;
    text-align: justify;

    opacity: 0.8;
    background-color: white;

    margin-top: 3rem;
    padding: 20px;


    border-radius: 10px;
    box-shadow: 0px 1px 4px 1px #FFB800;
  }

  .logo_encabezado {
    max-width: 220px;
    position: absolute;
    left: 10%;
    top: 9%;
    overflow: hidden;
    border-radius: 10%;
  }
}

@media (min-width:700px) {



  .nav-link-atributos {
    font-size: 25px;
  }

  .logo_inicio {
    border-radius: 10px;
    box-shadow: 0px 1px 4px 4px;
    width: 15%;
  }

  .texto_encabezado {
    max-width: 480px;
    position: absolute;
    left: 34%;
    top: 0%;
    overflow: hidden;

    font-family: Roboto-Regular;
    font-size: 20px;
    color: #00589d;
    text-align: justify;

    opacity: 0.8;
    background-color: white;

    margin-top: 3rem;
    padding: 20px;


    border-radius: 10px;
    box-shadow: 0px 1px 4px 1px #FFB800;
  }

  .logo_encabezado {
    max-width: 240px;
    position: absolute;
    left: 10%;
    top: 9%;
    overflow: hidden;
    border-radius: 10%;
  }

}

@media (min-width:801px) {

  /* tablet, landscape iPad, lo-res laptops ands desktops */
  /* Inicio */

  .nav-link-atributos {
    font-size: 25px;
  }

  .texto_encabezado {
    max-width: 500px;
    position: absolute;
    left: 44%;
    top: 42%;
    overflow: hidden;

    font-family: Roboto-Regular;
    font-size: 20px;
    color: #00589d;
    text-align: justify;

    opacity: 0.8;
    background-color: white;

    margin-top: 3rem;
    padding: 20px;

    border-radius: 10px;
    box-shadow: 0px 1px 4px 1px #FFB800;
  }

  .logo_encabezado {
    max-width: 240px;
    position: absolute;
    left: 10%;
    top: 9%;
    overflow: hidden;
    border-radius: 10%;
  }

}

@media (min-width:980px) {
  .navbar-center {
    position: absolute;
    left: 50%;
    transform: translatex(-50%);
  }

  .navbar-right {
    position: absolute;
    right: 2%;
    top: 40%;
    transform: translatex(-50%);
  }
}

@media (min-width:1025px) {

  /* big landscape tablets, laptops, and desktops */
  .nav-link-atributos {
    font-size: 30px;
  }

  .navbar-center {
    position: absolute;
    left: 50%;
    transform: translatex(-50%);
  }

  .navbar-right {
    position: absolute;
    right: 2%;
    top: 40%;
    transform: translatex(-50%);
  }

  .custom-navbar .navbar-right {
    float: right;
    padding-right: 15px;
  }

  .custom-navbar .nav.navbar-nav.navbar-right li {
    float: right;
  }

  .custom-navbar .nav.navbar-nav.navbar-right li>a {
    padding: 8px 5px;
  }

  .logo_inicio {
    border-radius: 10px;
    box-shadow: 0px 1px 4px 4px;
    width: 10%;
  }

  .separacion {
    margin-top: 3rem;
  }

  .imagen_encabezado {
    background-image: url("/static/imagen/delavegaabogados/encabezado/1.png");
    height: 600px;
    background-attachment: local;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
  }

  .imagen_encabezado2 {
    background-image: url("/static/imagen/delavegaabogados/encabezado/2.png");
    height: 600px;
    background-attachment: local;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
  }

  .imagen_encabezado3 {
    background-image: url("/static/imagen/delavegaabogados/encabezado/3.png");
    height: 600px;
    background-attachment: local;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
  }

  .texto_encabezado {
    max-width: 600px;
    position: absolute;
    left: 48%;
    top: 32%;
    overflow: hidden;

    font-family: Roboto-Regular;
    font-size: 25px;
    color: #00589d;
    text-align: justify;

    opacity: 0.8;
    background-color: white;

    margin-top: 3rem;
    padding: 20px;

    border-radius: 10px;
    box-shadow: 0px 1px 4px 1px #FFB800;
  }

  .logo_encabezado {
    max-width: 350px;
    position: absolute;
    left: 10%;
    top: 15%;
    overflow: hidden;
    border-radius: 10%;
  }

  .img_cabecera_bordes {
    border-radius: 10px;
    box-shadow: 0px 1px 4px 1px #00589d;
    width: 500px;
    padding: 1px;

  }

  .parrafo_servicio {
    font-family: Roboto-Medium;
    color: white;
    text-align: justify;
    font-size: 30px;
    width: 40rem;
    margin: auto;
    padding: 100px;
  }

}

@media (min-width:1281px) {
  /* hi-res laptops and desktops */
}


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

/** boton flotante **/

.btn-flotante-email {
  font-size: 16px;
  /* Cambiar el tamaño de la tipografia */
  text-transform: uppercase;
  /* Texto en mayusculas */
  font-weight: bold;
  /* Fuente en negrita o bold */
  color: #FFB800;
  /* Color del texto */
  border-radius: 50%;
  /* Borde del boton */
  letter-spacing: 2px;
  /* Espacio entre letras */
  background-color: #FFFFFF;
  /* Color de fondo */
  padding: 10px 14px;
  /* Relleno del boton */
  position: fixed;
  bottom: 212px;
  right: 16px;
  transition: all 300ms ease 0ms;
  box-shadow: 0px 0px 0px 8px #000000;
  z-index: 99;
}

.btn-flotante-llamar {
  font-size: 16px;
  /* Cambiar el tamaño de la tipografia */
  text-transform: uppercase;
  /* Texto en mayusculas */
  font-weight: bold;
  /* Fuente en negrita o bold */
  color: #FFB800;
  /* Color del texto */
  border-radius: 50%;
  /* Borde del boton */
  letter-spacing: 2px;
  /* Espacio entre letras */
  background-color: #FFFFFF;
  /* Color de fondo */
  padding: 10px 14px;
  /* Relleno del boton */
  position: fixed;
  bottom: 150px;
  right: 16px;
  transition: all 300ms ease 0ms;
  box-shadow: 0px 0px 0px 8px #000000;
  z-index: 99;
}

.btn-flotante {
  font-size: 16px;
  /* Cambiar el tamaño de la tipografia */
  text-transform: uppercase;
  /* Texto en mayusculas */
  font-weight: bold;
  /* Fuente en negrita o bold */
  color: #FFB800;
  /* Color del texto */
  border-radius: 50%;
  /* Borde del boton */
  letter-spacing: 2px;
  /* Espacio entre letras */
  background-color: #FFFFFF;
  /* Color de fondo */
  padding: 10px 14px;
  /* Relleno del boton */
  position: fixed;
  bottom: 88px;
  right: 16px;
  transition: all 300ms ease 0ms;
  box-shadow: 0px 0px 0px 8px #000000;
  z-index: 99;
}

.btn-flotante-whatsapp {
  font-size: 16px;
  /* Cambiar el tamaño de la tipografia */
  text-transform: uppercase;
  /* Texto en mayusculas */
  font-weight: bold;
  /* Fuente en negrita o bold */
  color: #ffffff;
  /* Color del texto */
  border-radius: 50%;
  /* Borde del boton */
  letter-spacing: 2px;
  /* Espacio entre letras */
  background-color: rgb(50, 189, 12);
  /* Color de fondo */
  padding: 16px 20px;
  /* Relleno del boton */
  position: fixed;
  bottom: 20px;
  right: 10px;
  transition: all 300ms ease 0ms;
  box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
  z-index: 99;
}

.btn-flotante-email:hover {
  background-color: #2c2fa5;
  /* Color de fondo al pasar el cursor */
  box-shadow: 0px 15px 20px rgba(0, 0, 0, 0.3);
  transform: translateY(-7px);
}

.btn-flotante-llamar:hover {
  background-color: #2c2fa5;
  /* Color de fondo al pasar el cursor */
  box-shadow: 0px 15px 20px rgba(0, 0, 0, 0.3);
  transform: translateY(-7px);
}

.btn-flotante:hover {
  background-color: #2c2fa5;
  /* Color de fondo al pasar el cursor */
  box-shadow: 0px 15px 20px rgba(0, 0, 0, 0.3);
  transform: translateY(-7px);
}

.btn-flotante-whatsapp:hover {
  background-color: #2c2fa5;
  /* Color de fondo al pasar el cursor */
  box-shadow: 0px 15px 20px rgba(0, 0, 0, 0.3);
  transform: translateY(-7px);
}


/*
@media only screen and (max-width: 600px) {

  .btn-flotante-email {
    bottom: 10px;
    right: 212px;
  }

  .btn-flotante-llamar {
    bottom: 10px;
    right: 148px;
  }

  .btn-flotante {
    bottom: 10px;
    right: 84px;
  }

  .btn-flotante-whatsapp {
    bottom: 10px;
    right: 20px;
  }
}*/

/*
  Letras Cormorant-garamond
*/

@font-face {
  font-family: CormorantGaramond-Bold;
  src: url(../fonts/cormorant-garamond/CormorantGaramond-Bold.ttf);
}

@font-face {
  font-family: CormorantGaramond-BoldItalic;
  src: url(../fonts/cormorant-garamond/CormorantGaramond-BoldItalic.ttf);
}

@font-face {
  font-family: CormorantGaramond-Italic;
  src: url(../fonts/cormorant-garamond/CormorantGaramond-Italic.ttf);
}

@font-face {
  font-family: CormorantGaramond-Light;
  src: url(../fonts/cormorant-garamond/CormorantGaramond-Light.ttf);
}

@font-face {
  font-family: CormorantGaramond-LightItalic;
  src: url(../fonts/cormorant-garamond/CormorantGaramond-LightItalic.ttf);
}

@font-face {
  font-family: CormorantGaramond-Medium;
  src: url(../fonts/cormorant-garamond/CormorantGaramond-Medium.ttf);
}

@font-face {
  font-family: CormorantGaramond-MediumItalic;
  src: url(../fonts/cormorant-garamond/CormorantGaramond-MediumItalic.ttf);
}

@font-face {
  font-family: CormorantGaramond-Regular;
  src: url(../fonts/cormorant-garamond/CormorantGaramond-Regular.ttf);
}

@font-face {
  font-family: CormorantGaramond-SemiBold;
  src: url(../fonts/cormorant-garamond/CormorantGaramond-SemiBold.ttf);
}

@font-face {
  font-family: CormorantGaramond-SemiBoldItalic;
  src: url(../fonts/cormorant-garamond/CormorantGaramond-SemiBoldItalic.ttf);
}

@font-face {
  font-family: NotoSerif-CondensedMedium;
  src: url(../fonts/noto-serif/NotoSerif-CondensedMedium.ttf);
}

@font-face {
  font-family: Roboto-Medium;
  src: url(../fonts/roboto/Roboto-Medium.ttf);
}

@font-face {
  font-family: Roboto-Regular;
  src: url(../fonts/roboto/Roboto-Regular.ttf);
}

.titulo_a {
  font-family: Roboto-Medium !important;
  /*font-family: NotoSerif-CondensedMedium;*/
  color: white !important;
}

.titulo_b {
  color: #FFB800 !important;
}


h2 {
  text-align: center;
}

.contenido_relativo {
  position: relative
}

.servicios .col {
  padding: 10px;
}

.servicios_texto {
  font-family: Roboto-Regular;
  color: black;
  font-size: 20px;
  text-align: center;
}

.blog_titulo {
  font-family: CormorantGaramond-SemiBold;
  color: black;
  font-size: 38px;
  text-align: center;
}

.blog_bitacora {
  font-family: CormorantGaramond-SemiBold;
  color: black;
  font-size: 30px;
  text-align: center;
}


.parrafo {
  font-family: Roboto-Regular;
  color: white;
  text-align: justify;
  font-size: 20px;
}

.parrafo_form {
  font-family: Roboto-Regular;
  color: white;
  text-align: left;
  font-size: 20px;
}

/* footer */
.abajo {
  margin-top: 34rem;

}

.linea_dorada {
  background-color: #FFB800;
  padding: 2px;
}

footer {
  font-family: Roboto-Regular;
  bottom: 0;
  color: white;
}

footer .contacto {
  font-style: normal;
  color: white;
  text-align: left;
  font-size: 16px;
}

footer h4 {
  color: white;
  text-align: center;
}

footer .texto {
  color: white;
  text-align: center;
  font-size: 15px;
}

footer h3 {
  color: #CC9933;
  margin-bottom: 30px;
}

footer .footer-col {
  margin-bottom: 40px;
}