:root {
          --primary: #2a3e60;
          --primary-dark: #001836;
          --primary-light: #56688e;
          --secondary: #383737;
          --secondary-dark: #121111;
          --secondary-light: #626161;
}

body {
          background-size: contain;
          background-image: url("../img/logo.png");
          background-position: center;
          background-repeat: no-repeat;
          background-size: contain;
          background-attachment: fixed;
          font-size: 1em;
          font-family: "Open Sans", sans-serif;
          display: flex;
          min-height: 100vh;
          flex-direction: column;
}
main {
          flex: 1;
}

.principal {
          width: 100%;
          transition: 0.3s;
          font-size: 1.1em;
          background-color: rgba(255, 255, 255, 0.3);
          justify-content: space-between;
}

.main {
          margin: 0 auto;
          width: 100% !important;
}

.parallax-section {
          background-attachment: fixed;
          background-repeat: repeat;
          background-size: cover;
          height: 100vh;
          margin: 0 auto;
          overflow: hidden;
          padding: 0;
          position: relative;
          width: 100% !important;
          background-position: center;
}

.parallax-section-title {
          background-attachment: fixed;
          background-repeat: no-repeat;
          background-size: cover;
          height: 60vh;
          margin: 0 auto;
          overflow: hidden;
          padding: 0;
          position: relative;
          width: 100% !important;
          background-position: center;
}

.text-in-parallax {
          display: flex;
          align-items: center;
          justify-content: center;
          flex-direction: column;
}

.text-in-parallax h1 {
          color: white;
          font-size: 3.5em;
          transition: 0.4s;
}

.elementor-button {
          background-color: rgba(255, 255, 255, 0.3);
          border-radius: 0px 0px 0px 0px;
          padding: 18px 80px 18px 80px;
          line-height: 1;
          color: #fff;
          text-align: center;
          -webkit-transition: all 0.5s;
          -o-transition: all 0.5s;
          transition: all 0.5s;
}

.elementor-button:hover {
          background-color: var(--primary);
          padding: 18px 80px 18px 80px;
          line-height: 1;
          color: #fff;
          text-align: center;
          text-decoration: none;
          -webkit-transition: all 0.5s;
          -o-transition: all 0.5s;
          transition: all 0.5s;
}
.opacity-parallax {
          height: 100vh;
          margin: 0 auto;
          overflow: hidden;
          padding: 0;
          position: relative;
          width: 100% !important;
          background-color: rgba(0, 0, 0, 0.5);
          display: flex;
          flex-direction: column;
}
.opacity-parallax-title {
          height: 60vh;
          margin: 0 auto;
          overflow: hidden;
          padding: 0;
          position: relative;
          width: 100% !important;
          background-color: rgba(0, 0, 0, 0.5);
          display: flex;
          flex-direction: column;
}

.text-in-parallax-container {
          display: flex;
          align-items: center;
          justify-content: center;
          height: 100%;
}
.mousewheel-in-parallax-container {
          display: flex;
          align-items: center;
          justify-content: center;
          height: 10%;
}

.opacity-parallax-logo {
          margin: 0 auto;
          padding: 0;
          position: relative;
          width: 100% !important;
          background-color: rgba(255, 255, 255, 0.95);
}

.parallax-logo {
          background-attachment: fixed;
          height: 100vh;
          margin: 0 auto;
          padding: 0;
          position: relative;
          width: 100% !important;
          background-position: center;
          background-repeat: no-repeat;
          background-size: contain;
}

.bloque1 {
          background-image: url("../img/index-header-sin.jpg");
}
.bloque2 {
          background-image: url("../img/cocinas-section.jpg");
}
.bloque3 {
          background-image: url("../img/salones-section.jpg");
}
.bloque4 {
          background-image: url("../img/dormitorios-section.jpg");
}

.bloque-logo-parallax {
          background-image: url("../img/logo.png");
}

.logo-parallax {
          display: block;
          margin: 6em auto 0;
          opacity: 0.8;
          width: 200px;
}
.main-menu {
          padding-top: 0px;
          padding-bottom: 0px;
          padding-left: 50px;
          padding-right: 50px;
          color: black !important;
}

.main-menu-scrolled {
          background-color: rgba(255, 255, 255, 0.9);
          color: black !important;
          padding: 0em;
          font-size: 1em;
          padding-top: 0px;
          padding-bottom: 0px;
          padding-left: 50px;
          padding-right: 50px;
}

.navbar-collapse {
          -ms-flex-preferred-size: 100%;
          flex-basis: 100%;
          -ms-flex-positive: 1;
          flex-grow: 0;
          -ms-flex-align: center;
          align-items: center;
}

.navbar-toggler {
          border: 1px solid transparent !important;
}

.nav-link {
          color: white !important;
}

.nav-link-scrolled {
          color: black !important;
}

.nav-item {
          border-radius: 10px;
          margin: 2px;
}

.nav-item:hover {
          background-color: var(--secondary-light);
          border-radius: 20px;
}

.nav-link-scrolled:hover {
          color: white !important;
}

.dropdown-menu {
          background-color: var(--primary-light);
}

.dropdown-menu .nav-item:hover {
          background-color: var(--secondary);
          border-radius: 20px;
}

.active {
          background-color: var(--primary);
          color: white !important;
          border-radius: 20px;
}

.custom-toggler.navbar-toggler {
          border-color: rgb(42, 62, 96);
}
.custom-toggler .navbar-toggler-icon {
          background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(42, 62, 96, 0.7)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}

.logo {
          width: 300px;
          transition: 0.4s;
}
.logo img {
          width: 100%;
}
.logo-scrolled {
          width: 250px;
}

.info {
          justify-content: space-evenly;
          flex-wrap: wrap;
          margin: 50px;
}

.info-column {
          background-color: white;
          flex-direction: column;
          flex-wrap: wrap;
          margin: 50px;
}

.card {
          box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.3);
          transition: 0.3s;
          width: 30%;
          border: 0;
}

.card-info-column {
          box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.3);
          transition: 0.3s;
          display: flex;
          width: 100%;
          border: 0;
          margin: 20px;
}

.card:hover {
          -webkit-box-shadow: 0px 0px 25px 5px rgba(0, 0, 0, 0.5);
          -moz-box-shadow: 0px 0px 25px 5px rgba(0, 0, 0, 0.5);
          box-shadow: 0px 0px 25px 5px rgba(0, 0, 0, 0.5);
}

.card-img-top-column {
          width: 30%;
          height: 30%;
          border-top-left-radius: calc(0.25rem - 1px);
          border-top-right-radius: calc(0.25rem - 1px);
}

.card-image {
          width: 750px;
          display: flex;
          align-self: center;
}
.card-image img {
          width: 100%;
          max-height: 50%;
}

.card-text {
          padding: 10px;
}

.container {
          padding: 2px 16px;
}

.services-container {
          background: rgb(221, 221, 221);
}

.text-in-services-container {
          display: flex;
          align-items: center;
          justify-content: center;
          height: 100%;
          padding: 3em;
}

/*--------------GALLERY-----------*/
.gallery {
          padding: 15px;
          /*align-items: center;*/
}

.photo-container {
          margin: 15px;
          width: 30%;
          transition: 0.3s;
          height: 350px;
}

.photo-container:hover {
          -webkit-box-shadow: 0px 0px 30px 5px rgba(0, 0, 0, 0.7);
          -moz-box-shadow: 0px 0px 30px 5px rgba(0, 0, 0, 0.7);
          box-shadow: 0px 0px 30px 5px rgba(0, 0, 0, 0.7);
}

.photo-container figure img {
          height: 100%;
          width: 100%;
          object-fit: cover;
          /*opacity: 0.8;*/
          opacity: 1;
          -webkit-transition: opacity 0.35s;
          transition: opacity 0.35s;
}

.gallery figure {
          position: relative;
          float: left;
          overflow: hidden;
          margin-bottom: 0;
          background: var(--primary);
          cursor: pointer;
          width: 100%;
          height: 100%;
}

.gallery figcaption a {
          transition: all 0.3s ease;
          text-decoration: none;
          z-index: 1000;
          text-indent: 200%;
          white-space: nowrap;
          font-size: 0;
          opacity: 0;
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
}

.gallery figcaption h2 {
}

.gallery figure:hover img {
          /*opacity: 0.8;*/
}
.gallery figure:hover figcaption::before,
.gallery figure:hover figcaption::after {
}

.gallery figure:hover h2,
.gallery figure:hover p {
}

.nuestros-trabajos section {
          box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.3);
          transition: 0.3s;
          margin: 15px;
}

.nuestros-trabajos section .card-header {
          padding: 0;
          margin: 0;
          background-color: rgba(0, 0, 0, 0);
          border: 0;
}

.nuestros-trabajos section .card-header button {
          width: 100%;
          display: flex;
          align-items: center;
          background-color: var(--primary);
}

.nuestros-trabajos section .card-header button i {
          margin: 0;
          padding: 5px;
          color: white;
}

.nuestros-trabajos section .card-header button h4 {
          margin: 0;
          padding: 5px;
          color: white;
}

.text-in-parallax-container h5 {
          margin: 0;
}

.text-in-parallax-container .card {
          width: 50%;
}