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

  --main-color: #363645;
  --main-modal-color: #818191;
  --second-color: rgb(67, 67, 69);/* #454546;*/
  --second-modal-color: rgba(67, 67, 69, .75);
  --alternate-color: rgb(80, 20, 100);
  --alternate-modal-color: rgb(80, 20, 100, .75);
  --action-color: #869183;
  --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: #515B6D;
  --title-color: #333;

  --link-color: #919191;
  --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: #fff;
}

body { overflow-x: hidden; }

a {
  text-decoration: none;
  color: var(--link-color);
  transition: all .3s ease-out;
}

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

blockquote {
  border-left: 5px solid #DEA600;
  color: var(--second-color);
}

::selection {
  background-color: var(--main-modal-color);
  color: var(--action-color);
}

h2 { font-size: 3rem;}
/* ********** Materialize Styles ********** */

nav,
.navbar-fixed  {
  background-color: var(--second-color);
  height: var(--nav-height);
  line-height: var(--nav-height);
}

.brand-logo img {
  padding: var(--logo-spacing);
  max-height: var(--nav-height);
}

.sidenav-trigger:hover { color: var(--main-color); }

.sidenav {
  top: var(--nav-height);
  background-color: var(--second-modal-color);
}

.sidenav li:hover {
  background-color: var(--main-modal-color);
  transition: all .3s ease;
}

.sidenav li > a,
.desktop-nav a {
  color: #fff;
  font-size: 1rem;
  font-weight: bold;
  transition: all .3s ease;
}

.sidenav li > a:hover { color: var(--bg-color); }

.desktop-nav a:hover {
  color: var(--action-color);
  background-color: transparent;
}

.dropdown-content {
  top: -64px;
}

/*.display {display: none;}*/

.dropdown-content li:hover, .dropdown-content li.active {
  background-color: red;
}

.sidenav li>a>i.material-icons{
  color: var(--main-color);
}

h1 {margin: 1.25rem 0 1.25rem 0;}

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

.Subtitle {font-size: 2.35rem;}

.parrafos {
  font-size: 1.5rem;
}

.card-title { font-weight: 600 !important; }

.black-dmi { background-color: var(--action-color) !important; }

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

.card .card-action a:not(.btn):not(.btn-large):not(.btn-small):not(.btn-large):not(.btn-floating) { color: var(--alternate-color); }

.card .card-action a:not(.btn):not(.btn-large):not(.btn-small):not(.btn-large):not(.btn-floating):hover { color: var(--alternate-modal-color); }

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

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

.blue-grey.darken-1 {
  background-color: #918C73 !important;
}
/* Forms de Materialize */

/* label color */
/*.input-field label,
.input-field .prefix.active { color: var(--main-color) !important; }*/

/* label focus color */
.input-field input:focus + label,
.input-field textarea:focus + label { color: var(--main-color) !important; }

/* label underline focus color */
.input-field input:focus,
.input-field textarea:focus {
  border-bottom: 1px solid var(--main-color) !important;
  box-shadow: 0 1px 0 0 var(--main-color) !important;
}

.input-field .btn { background-color: var(--main-color); }

.input-field .btn:hover { background-color: var(--second-color); }

.btn {text-transform: capitalize !important;}

.tabs .tab a:hover, .tabs .tab a.active {
  background-color: transparent;
  color: var(--text-color) !important;
  font-weight: 600;
}

.tabs .tab a {
  color: var(--text-color) !important;
}

.tabs .indicator {
  height: 2px;
  background-color: var(--action-color) !important;
}

/* ********** My Styles ********** */
.pt-1 {padding-top: 1rem;}

.pt-section {padding-top: 3rem !important;}

/*
.container-fluid {
  margin: 0 auto;
  max-width: 1440px;
  width: 97%;
}
*/

.HeroImage {
  min-height: calc(100vh - var(--nav-height));
  background-size:cover;
  background-image: url("../../img/fondo.jpg");
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
}

.HeroImageAbout {
  min-height: calc(50vh - var(--nav-height));
  background-size:cover;
  background-image: url("../../img/hero-abaut.jpg");
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
}

.Services {
  background-color: transparent;
  /*margin-top: -95px;*/
  z-index: 1;
  position: relative;
}

.Section-white {
  background-color: #fff;
  margin-top: -95px;
}

.frase {font-size: 2.35rem;}

.quotes {
  font-weight: 600;
  font-size: 2.5rem;
  color: #ffa500;
}

.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 > .section,
.MultiPage > .section {
  background-color: var(--bg-modal-color);
  height: inherit;
}

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

.Footer {
  padding: 1rem;
  background-color: var(--second-color);
  text-align: center;
}

.SocialMedia {
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}

.mision {
  left: 0;
  background-color: #B07C4B !important;
}

.vision {
  left: 50%;
  background-color: #fff;
}

.panel{padding: 24px !important;}


.primary-color {
  background-color: var(--second-color) !important;
}

/*.alineacion-planes {text-align: right;}*/

.plans ul {color: #fff;}

.plans-title{
  font-size: 2.50rem;
  font-weight: 600;
}

.oro {color: #eac102;}

.plata {color: #b9babb;}

.paladio {color: #bfbfbf;}

.platinum {color: #888888;}

.plans-list {font-size: 1.5rem;}

.img-clientes {
  padding: 3rem;
  background-image: url("../../img/division.png");
  color: #fff !important;
}

.collapsible-header, .collapsible-body{
  font-size: 1.25rem;
  text-align: justify;
}

.collapsible-header > i {font-size: 1rem;}

.justifyTextDesktop{
  text-align: justify;
  }

  .pt-5 {
    padding-top: 3rem !important;
  }

  .title-hero { 
    text-align: center;
    font-size: 2rem;
  }

  .collapsible-header i {
    margin-top: .35rem;
  }
  
  .parrafo-hero { 
    font-size: 1.5rem; 
  }

  /*
  .modal {
    background-color: var(--second-modal-color);
    color: #fff;
  }

  .modal .modal-footer {
    background-color: var(--second-modal-color);
    color: #fff !important;
  }
  */

  .text-client {
    font-size: 1.25rem;
  }

  .subtitle-aviso { 
    font-size: 1.25rem;
    font-weight: 600;
  }

  .parrafo-aviso {
    font-size: 1.25rem;
  }

  ol.r {
    list-style-type: upper-roman;
    font-size: 1.25rem;
    margin-left: 2rem;
  }

  ol.w {list-style-type: inherit;}

/* ********** Media Queries Medium ********** */
@media only screen and (max-width: 601px) {
  .alineacion-planes {text-align: left;}

  h2 {
    font-size: 2.25rem;
    font-weight: 600;
  }

  .Subtitle {font-size: 2rem;}

  .plans-title{
    font-size: 2rem;
    font-weight: 600;
  }

  .justifyTextMovil{
    text-align : justify;
  }

  .justifyTextDesktop{
    text-align: left;
    }

  .collapsible-header, .collapsible-body{
    text-align: left;
  }

  .sidenav li > a,
  .desktop-nav a {
    font-size: 1.15rem;
  }

  .title-hero { font-size: 1.75rem;}

  .parrafo-hero { font-size: 1.25rem; }
}

/* ********** Media Queries Large ********** */
@media only screen and (min-width: 993px) {
  .u-lg-flexCenter {
    min-height: inherit;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .u-lg-flexCenter {
    min-height: inherit;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
/* ********** Media Queries ExtraLarge ********** */
@media only screen and (min-width: 1201px) {

}

@supports (-webkit-overflow-scrolling: touch) {
  /* CSS specific to iOS devices */ 
  .HeroImage { 
      background-attachment: scroll;
  }
}