@font-face {
    font-family: 'Supria Sans';
    src: url('../fonts/SupriaSans-Bold.woff2') format('woff2'),
        url('../fonts/SupriaSans-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Supria Sans';
    src: url('../fonts/SupriaSans-Heavy.woff2') format('woff2'),
        url('../fonts/SupriaSans-Heavy.woff') format('woff');
    font-weight: 900;
    font-style: normal;
}

@font-face {
    font-family: 'Supria Sans';
    src: url('../fonts/SupriaSans-Light.woff2') format('woff2'),
        url('../fonts/SupriaSans-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Supria Sans';
    src: url('../fonts/SupriaSans-LightItalic.woff2') format('woff2'),
        url('../fonts/SupriaSans-LightItalic.woff') format('woff');
    font-weight: 300;
    font-style: italic;
}

@font-face {
    font-family: 'Supria Sans';
    src: url('../fonts/SupriaSans-Black.woff2') format('woff2'),
        url('../fonts/SupriaSans-Black.woff') format('woff');
    font-weight: 900;
    font-style: normal;
}

@font-face {
    font-family: 'Supria Sans';
    src: url('../fonts/SupriaSans-Regular.woff2') format('woff2'),
        url('../fonts/SupriaSans-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}


/* Parallax base styles
  --------------------------------------------- */
  
  .container-doble {
    height: 200vh;
  }

  .container-principal {
    position: relative;
  }

  .parallax {
    height: 100vh;
    /*overflow-x: hidden;
    overflow-y: auto;*/
    /*-webkit-perspective: 300px;*/
    /*perspective: 300px;*/
    /*-webkit-perspective-origin-x: 100%;
    perspective-origin-x: 100%;*/
  }

  .parallax__group {
    position: relative;
    height: 500px; /* fallback for older browsers */
    height: 100vh;
    /*-webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;*/
  }

  .parallax__layer {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    -webkit-transform-origin-x: 100%;
    transform-origin-x: 100%;
  }

  .parallax__layer--fore {
    /*-webkit-transform: translateZ(90px) scale(.7);
    transform: translateZ(90px) scale(.7);*/
    z-index: 1;
  }

  /*.parallax__layer--base {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    z-index: 4;
  }

  .parallax__layer--back {
    -webkit-transform: translateZ(-300px) scale(2);
    transform: translateZ(-300px) scale(2);
    z-index: 3;
  }

  .parallax__layer--deep {
    -webkit-transform: translateZ(-600px) scale(3);
    transform: translateZ(-600px) scale(3);
    z-index: 2;
  }*/


  /* demo styles
  --------------------------------------------- */
  
  html {
    scroll-behavior: smooth !important;
  }

  body {
    font-family: 'Supria Sans';
  }

  * {
    margin:0;
    padding:0;
  }

  img {
    max-width: 100%;
  }

  a.anchor {
    display: block;
    position: relative;
    top: -250px;
    visibility: hidden;
  }

   /* centre the content in the parallax layers */
  .title {
    text-align: center;
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
  }



  /* style the groups
  --------------------------------------------- */

/*DOMENIKA*/

  #group1 {
    z-index: 5; /* slide over group 2 */
  }
  #group1 .parallax__layer--base {
    background: white;
  }

  /*SLOGAN*/

  #group2 {
    z-index: 3; /* slide under groups 1 and 3 */
  }
  #group2 .parallax__layer--back {
    background: white;
  }

  #group2 .title {
    left: 0%;
    -webkit-transform: translate(0%, -50%);
    transform: translate(0%, -50%);
    position: relative;
  }

  #group2 h1 {
    font-weight: 900;
    font-style: normal;
    font-size: 50px;
  }

  #group2 a,
  #group2 a:hover {
    text-decoration: none;
    color: inherit;
  }

  #group2 h1 span {
    color: #E6B54A;
  }

  /*NOSOTROS*/
  
  .top-shadow {
    width: auto;
    height: 130px;
    background: linear-gradient(rgba(0, 0, 0, 0.9),transparent);
    z-index: 11;
    position: sticky;
    top: 0;
  }

  #group3 {
    z-index: 4; /* slide over group 2 and 4 */
  }
  /*#group3 .parallax__layer--base {
    background: url("../img/bg1.jpg");
    background-size: cover;
    background-position: center center;
  }*/
  
  #group3 .parallax__layer--fore {
    top: 100vh;
  }

  #group3 .parallax__layer--base {
    height: 200vh;
  }

  #group3 .parallax__layer--base img {
    width: 100%;
    position: sticky;
    top: 0;
  }

  #group3 .title {
    margin-top: 23vh;
  }

  #group3 .bg1 {
    height: 100vh;
    width: 100%;
    background: linear-gradient(rgba(0, 0, 0, .1),rgba(0, 0, 0, 0.1)), url(../img/bg1.jpg);
    background-size: cover;
    background-position: center center;
    position: sticky;
    top: 0;
  }

  #group3 p {
    font-weight: 900;
    font-style: normal;
    font-size: 40px;
    line-height: 45px;
    text-align: left;
  }

  #group3 p span {
    color: #E6B54A;
  }

  /*HISTORIA*/

  #group4 {
    z-index: 2; /* slide under group 3 and 5 */
  }

  #group4 .bg2 {
    height: 100vh;
    width: 100%;
    background: url("../img/bg2.jpg");
    background-size: cover;
    background-position: center center;
    position: sticky;
    top: 0;
  }
  /*#group4 .parallax__layer--deep {
    background: url("../img/bg2.jpg");
    background-size: cover;
    background-position: center center;
  }*/
  #group4 .parallax__layer--fore {
    top: 110vh;
  }
  #group4 .parallax__layer--base {
    height: 200vh;
  }
  #group4 .parallax__layer--base img {
    width: 100%;
    position: sticky;
    top: 0;
  }
  #group4 .title {
    margin-top: 21vh;
  }

  #group4 p {
    font-weight: 900;
    font-style: normal;
    font-size: 40px;
    line-height: 45px;
    text-align: left;
  }

  #group4 p span {
    color: #E6B54A;
  }

  /*PORTAFOLIO*/

  #group5 {
    z-index: 3; /* slide over group 4 and 6 */
    height: 76vw;
  }
  #group5 .parallax__layer--base {
    background: white;
  }
  #group5 .parallax__layer--base .title {
    width: 100%;
  }
  #group5 .parallax__layer--base .title .col-md-3 {
    padding-right: 2px;
    padding-left: 2px;
    margin-top: 2px;
    margin-bottom: 2px;
  }
  #group5 .title {
    top: 0%;
    left: 0%;
    -webkit-transform: translate(0%, 0%);
    transform: translate(0%, 0%);
  }

  #group5 .portafolio {
    width: 100%;
    height: 25vw;
    cursor: pointer;
  }

  #group5 .portafolio:hover {
    background: linear-gradient(rgba(0, 0, 0, 0.7),rgba(0, 0, 0, 0.7)), url(../img/portafolio/1.jpg);
  }

  #group5 .port1 {
    background: url("../img/portafolio/1-5-de-mayo/1.jpg");
    background-size: cover;
    background-position: center center;
  }

  #group5 .port1:hover {
    background: linear-gradient(rgba(0, 0, 0, 0.7),rgba(0, 0, 0, 0.7)), url("../img/portafolio/1-5-de-mayo/1.jpg");
    background-size: cover;
    background-position: center center;
  }

  #group5 .port2 {
    background: url("../img/portafolio/2-Alear/2.jpg");
    background-size: cover;
    background-position: center center;
  }

  #group5 .port2:hover {
    background: linear-gradient(rgba(0, 0, 0, 0.7),rgba(0, 0, 0, 0.7)), url("../img/portafolio/2-Alear/2.jpg");
    background-size: cover;
    background-position: center center;
  }

  #group5 .port3 {
    background: url("../img/portafolio/3-Arboleda/6.JPG");
    background-size: cover;
    background-position: center center;
  }

  #group5 .port3:hover {
    background: linear-gradient(rgba(0, 0, 0, 0.7),rgba(0, 0, 0, 0.7)), url("../img/portafolio/3-Arboleda/6.JPG");
    background-size: cover;
    background-position: center center;
  }

  #group5 .port4 {
    background: url("../img/portafolio/4-Callejon-de-los-Ayala/4.jpg");
    background-size: cover;
    background-position: center center;
  }

  #group5 .port4:hover {
    background: linear-gradient(rgba(0, 0, 0, 0.7),rgba(0, 0, 0, 0.7)), url("../img/portafolio/4-Callejon-de-los-Ayala/4.jpg");
    background-size: cover;
    background-position: center center;
  }

  #group5 .port5 {
    background: url("../img/portafolio/5-Joya-del-Venado/2.jpg");
    background-size: cover;
    background-position: center center;
  }

  #group5 .port5:hover {
    background: linear-gradient(rgba(0, 0, 0, 0.7),rgba(0, 0, 0, 0.7)), url("../img/portafolio/5-Joya-del-Venado/2.jpg");
    background-size: cover;
    background-position: center center;
  }

  #group5 .port6 {
    background: url("../img/portafolio/6-La-Ventura/3.jpg");
    background-size: cover;
    background-position: center center;
  }

  #group5 .port6:hover {
    background: linear-gradient(rgba(0, 0, 0, 0.7),rgba(0, 0, 0, 0.7)), url("../img/portafolio/6-La-Ventura/3.jpg");
    background-size: cover;
    background-position: center center;
  }

  #group5 .port7 {
    background: url("../img/portafolio/7-Ladera/1.jpg");
    background-size: cover;
    background-position: center center;
  }

  #group5 .port7:hover {
    background: linear-gradient(rgba(0, 0, 0, 0.7),rgba(0, 0, 0, 0.7)), url("../img/portafolio/7-Ladera/1.jpg");
    background-size: cover;
    background-position: center center;
  }

  #group5 .port8 {
    background: url("../img/portafolio/8-Mar-Mediterraneo/2.jpg");
    background-size: cover;
    background-position: center center;
  }

  #group5 .port8:hover {
    background: linear-gradient(rgba(0, 0, 0, 0.7),rgba(0, 0, 0, 0.7)), url("../img/portafolio/8-Mar-Mediterraneo/2.jpg");
    background-size: cover;
    background-position: center center;
  }

  #group5 .port9 {
    background: url("../img/portafolio/9-Punto-Central/2.jpg");
    background-size: cover;
    background-position: center center;
  }

  #group5 .port9:hover {
    background: linear-gradient(rgba(0, 0, 0, 0.7),rgba(0, 0, 0, 0.7)), url("../img/portafolio/9-Punto-Central/2.jpg");
    background-size: cover;
    background-position: center center;
  }

  #group5 .port10 {
    background: url("../img/portafolio/10-Purisima/3.jpg");
    background-size: cover;
    background-position: center center;
  }

  #group5 .port10:hover {
    background: linear-gradient(rgba(0, 0, 0, 0.7),rgba(0, 0, 0, 0.7)), url("../img/portafolio/10-Purisima/3.jpg");
    background-size: cover;
    background-position: center center;
  }

  #group5 .port11 {
    background: url("../img/portafolio/11-Saqqara/5.jpg");
    background-size: cover;
    background-position: center center;
  }

  #group5 .port11:hover {
    background: linear-gradient(rgba(0, 0, 0, 0.7),rgba(0, 0, 0, 0.7)), url("../img/portafolio/11-Saqqara/5.jpg");
    background-size: cover;
    background-position: center center;
  }

  #group5 .port12 {
    background: url("../img/portafolio/12-Sector-Frances/1.jpg");
    background-size: cover;
    background-position: center center;
  }

  #group5 .port12:hover {
    background: linear-gradient(rgba(0, 0, 0, 0.7),rgba(0, 0, 0, 0.7)), url("../img/portafolio/12-Sector-Frances/1.jpg");
    background-size: cover;
    background-position: center center;
  }

  .carousel-item img {
    height: 90vh !important;
    width: auto !important;
    margin: 0 auto;
    display: block;
  }

  .text {
    display: none;
    width: 100%;
    top: 10vw;
    position: absolute;
    z-index: 1;
    color: white;
    pointer-events: none;
    font-size: 30px;
    font-weight: 900;
    color: white;
    padding: 0px 3vw;
    line-height: 35px;
  }

  .text span {
    top: 10vw;
    position: absolute;
    font-weight: 100;
    width: 100%;
    left: 0;
    color: rgba(255, 255, 255, 0.5);
  }

  .plus {
    display: none;
    width: 100%;
    top: 15vw;
    position: absolute;
    z-index: 1;
    color: white;
    pointer-events: none;
  }

  .portafolio:hover + .text {
      display: block;
  }​


  /*CONTACTO*/


  #group6 {
    z-index: 2; /* slide under group 5 and 7 */
    
  }

  #group6.parallax__group {
    height: 100vh !important;
    background: url(../img/bg3.jpg);
    background-size: cover;
    background-position: center center;
  }

  #group6 .parallax__layer--back {

  }

  #group6 .title {
    top: 47%;
  }

  #group6 p {
    color: white;
    font-size: 21px;
    font-weight: 100;
    margin-bottom: 5px;
  }

  #group6 h2 {
    color: #e6b54a;
    font-weight: 900;
    margin-bottom: 25px;
  }

  #group6 a,
  #group6 a:hover {
    color: white;
    text-decoration: none;
  }

  .redes-sociales {
    display: block;
    font-size: 20px;
    margin: 10px 0;
  }

  .redes-sociales a {
    margin: 0 6px;
  }

  .redes-sociales i:hover {
    text-shadow: 2px 2px 6px #00000052;
  }

  /*OTHER*/

  #group7 {
    z-index: 3; /* slide over group 7 */
  }
  #group7 .parallax__layer--base {
    background: rgb(255,241,100);
  }


  /* misc
  --------------------------------------------- */
  .demo__info {
    position: absolute;
    z-index:100;
    bottom: 1vh;
    top: auto;
    font-size:80%;
    text-align:center;
    width: 100%;
  }

  /*HEADER*/

  .bg-dark {
    background: linear-gradient(rgba(0, 0, 0, 0.9),transparent);
    position: sticky;
    background-color: transparent !important;
    padding-bottom: 70px;
    margin-bottom: -148px;
  }
  
  .navbar-nav {
    font-size: initial;
  }

  .navbar-dark .navbar-nav .nav-link {
    color: white;
    font-weight: 100;
  }

  .navbar-dark .navbar-nav .nav-link.active,
  .navbar-dark .navbar-nav .nav-link:hover {
    color: #e6b54a;
  }


  /*FOOTER*/
  footer {
    background: linear-gradient(transparent,rgba(0, 0, 0, 0.9));
    color: white;
    bottom: 0;
    position: absolute;
    width: 100%;
    padding-top: 70px;
    padding-bottom: 15px;
  }

  footer p {
    font-size: 14px !important;
    text-align: center;
    margin-bottom: 0 !important;
  }

@media (min-width: 992px) {
  .navbar-expand-lg .navbar-collapse {
    position: absolute;
    width: 0 !important;
    display: block !important;
    right: 340px !important;
  }
}

/*MODAL*/

.modal-header {
  border-bottom: none;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 111;
}

.modal-header .close {
  padding: 2rem 2rem;
  margin: -1rem -1rem -1rem auto;
}

.modal-content {
  background: transparent;
  border: none;
}

.modal-backdrop { 
  background-color: white; 
  opacity:0.85 !important;
}

.close {
  color: white;
  opacity: .3;
}

.carousel-control-next, .carousel-control-prev {
  opacity: .3;
}

.carousel-control-next:hover, .carousel-control-prev:hover, .close:hover {
  opacity: .4 !important;
}

.carousel-control-next {
  position: fixed;
  right: 0;
}

.carousel-control-prev {
  position: fixed;
  left: 0;
}

@media screen and (max-width:991px) {

  #group3 p {
    font-size: 28px;
    line-height: 35px;
  }

  #group4 p {
    font-size: 28px;
    line-height: 35px;
  }

  #group5 {
    height: 77vw;
  }

}

@media (min-width: 992px) {
  .modal-lg, .modal-xl {
    max-width: 100%;
  }
}

@media screen and (max-width: 1100px) {
  .carousel-item img {
    height: auto !important;
    width: 100% !important;
  }
}

@media screen and (max-width:767px) {
  #group5 {
    height: 154vw;
  }
}

@media screen and (max-width:575px) {

  #group5 {
    height: 309vw;
  }

  #group5 .portafolio {
    height: 28vw;
  }

}

.fade2 {
    transform: scale(0.9);
    opacity: 0;
    transition: all .2s linear;
    display: block !important;
}

.fade2.show {
    opacity: 1;
    transform: scale(1);
}