/* ********** Custom Properties ********** */
:root {
  --main-font: 'Libre Franklin';
  --alternate-font: sans-serif;
  --font-size: 16px;
  --line-height: 1.6;

  --main-color: rgb(217, 0, 98);
  --main-modal-color: rgb(217, 0, 98, .75);
  --second-color: rgb(20, 25, 45);
  --second-modal-color: rgba(20, 25, 45, .75);
  --alternate-color: rgb(80, 20, 100);
  --alternate-modal-color: rgb(80, 20, 100, .75);
  --action-color: rgb(84, 194, 141);
  --action-modal-color: rgba(84, 194, 84, .75);

  --bg-color: rgb(242, 244, 247);
  --bg-modal-color: rgba(242, 244, 247, .75);
  --bg-alternate-color: rgb(255, 255, 255);
  --bg-alternate-modal-color: rgba(255, 255, 255, .75);
  --border-color: #DDD;

  --text-color: #161616;
  --title-color: rgb(131, 131, 131);

  --link-color: #509EE3;
  --link-hover-color: var(--main-color);

  --max-width: 1200px;
  --header-height: 5rem;

  --logo-width: 4rem;
  --logo-height: 4rem;
  --logo-spacing: .5rem;

  --nav-height: 64px;
}

/* ********** Reset Styles ********** */
html {
  font-family: var(--main-font), var(--alternate-font);
  font-size: var(--font-size);
  line-height:  var(--line-height);
  color: var(--text-color);
  background-color: var(--bg-color);
}

body {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  background-color: inherit;
  overflow-x: hidden;
}

a {
  text-decoration: none;
  color: #fff;
  transition: all .3s ease-out;
}

a:hover { color: var(--title-color); }

h2 { font-size: 3rem; }

h3 { font-size: 2.5rem; }

::selection {
  background-color: rgb(163, 163, 163);
  color: var(--second-color);
}

/* ********** Bootstrap Styles ********** */
.bg-dark {
  background-color: var(--text-color) !important;
}
.navbar-brand {
  width: 98vw;
  position: absolute;
  top: 0;
}

.navbar-brand img {
  display: block;
  margin: auto;
  height: 120px;
  padding-top: 5px;
}

.navbar-nav {
  padding-top:120px;
}

.navbar {
  min-height:150px;
}

.navbar-toggler {
  margin-top:65px;
  border: 0;
}

.navbar-toggler:hover,
.navbar-toggler:focus {
  outline: 0;
}

.navbar-dark .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255, 255, 255, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
  transition: all .3s ease;
}

.navbar-dark .navbar-toggler-icon:hover {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(163, 163, 163, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

.nav-item:hover {
  background-color:  rgb(163, 163, 163);
  transition: all .3s ease;
}

.navbar-dark .navbar-nav .nav-link.active {
  color: var(--text-color);
  background-color: #fff;}

.navbar-dark .navbar-nav .nav-link {
  display: block;
  color: #fff;
  font-size: 1.15rem;
  font-weight: bold;
  transition: all .3s ease;
}

.navbar-dark .navbar-nav .nav-link:hover { color: var(--title-color); }

.bg-success {
  background-color: var(--action-color) !important;
}

a.bg-success:hover {
  background-color: var(--action-color) !important;
  opacity: .85;
  transition: all .3s ease
}

.text-success {
  color: var(--action-color) !important;
}

.card {
  padding: 2rem;
  background-color: rgba(255, 255, 255, 0.7);
  border-radius: 0.5rem;
}

.card p {font-size: 1.25rem;}

.card a {
  color: var(--alternate-color);
}

.card a:hover {
  color: var(--alternate-modal-color);
}

.card-img-overlay {
  background-color: var(--second-modal-color);
}

.card-text a {
  color: var(--action-color);
}

.card-text a:hover {
  color: var(--action-modal-color);
}

.form-control {
  border-color: var(--second-color);
}

.form-control:focus {
  border-color: var(--second-color);
  box-shadow: 0 0 0 0.2rem var(--main-modal-color);
}

.form-group label {
  color: var(--text-color);
  border-color: var(--second-color);
}

.form-group .btn {
  font-weight: 600;
  color: #fff;
  background-color: var(--title-color);
  border-color: var(--text-color);
}

.modal.show .modal-dialog {
  padding-top: 14rem;
}

.modal-title {
  font-size: 1.8rem;
  font-weight: 600;
}

.modal-content {
  background: linear-gradient(-10deg, rgba(201, 201, 201, 0.85) 0%, rgba(255, 255, 255, 0.85) 70%);
}

.btn-primary {
  font-weight: 600;
  color: #fff;
  background-color: var(--title-color);
  border-color: var(--text-color);
}

.btn-primary:hover {
  color: #fff;
  background-color: rgb(104, 104, 104);
  border-color: var(--text-color);
}

/* ********** My Styles ********** */
.HeroImage {
  min-height: calc(100vh + var(--logo-height));
  background-image:url(../img/fondo_firma_espinoza.jpg);
  background-size: cover;
}

.HeroImage p {font-size: 1.20rem;}

.HeroImageTeam {
  min-height: calc(100vh + var(--logo-height));
  background-image:url(../img/equipo_espinosa_river_abogados.jpg);
  background-size: cover;
  background-origin: content-box, content-box;
}

.areas {
  background-image: linear-gradient(-10deg, #c9c9c9 0%, #ffffff 50%);
  padding-top: 12.5rem;}

.Services img {
  background-color: var(--alternate-color);
}

.Website .carousel {
  margin: auto;
  max-width: 500px;
  height: auto;
}

.ResponsiveSites figure {
  margin: 0;
  text-align: center;
}

.ResponsiveSites figure img {
  padding: .5rem;
  background-color: var(--alternate-color);
}

.WorkFlow-steps sup {
  font-size: 1rem;
  color: var(--main-color);
}

.SinglePage,
.MultiPage {
  background-image: url('../img/site-singlepage.jpg');
  background-repeat: no-repeat;
  background-size: cover;
}

.MultiPage {
  background-image: url('../img/site-multipage.jpg');
}

.SinglePage > .u-fullScreen,
.MultiPage > .u-fullScreen {
  background-color: var(--bg-modal-color);
}

.AboutInfo {
  padding: 1rem;
  font-size: 150%;
  background-color: var(--second-modal-color);
}

.Footer {
  background-color: var(--text-color);
}

.u-fullScreen {
  width: 100%;
  min-height: 100vh;
}

.u-flowText { font-size: 1.25rem; }

.pointer {cursor: pointer;}

.pp-5 {
  padding: 0 3rem 0 3rem;
}

@media (max-width: 992px) {
  .HeroImage {
    padding-top: 150px;
  }
  .HeroImageTeam {
    padding: 100px 10px 70px 10px;
  }
  
}

/* ********** Media Queries Small ********** */
@media (max-width: 576px) {
  .pp-5 {
    padding: 0 1rem 0 1rem;
  }

  .navbar-brand img {
    height: 70px;
    padding-top: 10px;
  }

  .navbar-nav {
    padding-top:10px;
  }

  .modal.show .modal-dialog {
    padding-top: 4rem;
  }
  
}

/* ********** Media Queries Medium ********** */
@media (min-width: 768px) {
  .HeroImageTeam {
    padding-top: 100px;
  }
}

/* ********** Media Queries Large ********** */
@media (min-width: 992px) {
   .nav-item:hover { background-color: transparent; }

   .u-flowText { font-size: 1.75rem; }

   .modal-lg {
    max-width: 1080px;
  }
}

/* ********** Media Queries ExtraLarge ********** */
@media (min-width: 1200px) {

}

.fullpage-loader {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  background: #fff;
  z-index: 9999;
  opacity: 1;
  -webkit-transition: opacity 5.5s;
  transition: opacity 5.5s;
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
          justify-content: center;
  -webkit-box-align: center;
          align-items: center;
}
.fullpage-loader .fullpage-loader__logo {
  position: relative;
}
.fullpage-loader .fullpage-loader__logo:after {
  content: '';
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-animation: shine 2.5s infinite cubic-bezier(0.42, 0, 0.58, 1);
          animation: shine 2.5s infinite cubic-bezier(0.42, 0, 0.58, 1);
  background: rgba(255, 255, 255, 0.8);
  /* FF3.6-15 */
  /* Chrome10-25,Safari5.1-6 */
  background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), color-stop(50%, white), to(rgba(255, 255, 255, 0)));
  background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 50%, rgba(255, 255, 255, 0) 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#00ffffff',GradientType=1 );
  /* IE6-9 */
}

@-webkit-keyframes shine {
  0% {
    -webkit-transform: translateX(-100%) skew(-30deg);
            transform: translateX(-100%) skew(-30deg);
  }
  100% {
    -webkit-transform: translateX(200%) skew(-30deg);
            transform: translateX(200%) skew(-30deg);
  }
}

@keyframes shine {
  0% {
    -webkit-transform: translateX(-100%) skew(-30deg);
            transform: translateX(-100%) skew(-30deg);
  }
  100% {
    -webkit-transform: translateX(200%) skew(-30deg);
            transform: translateX(200%) skew(-30deg);
  }
}
.fullpage-loader--invisible {
  opacity: 0;
}