/*Paleta ceramia fest
#E8C1A0 - Inspiracion
#A09EC8 - Bienestar
#C8DBAF - Diseño
*/

html{
  scroll-behavior: smooth;
}

body {
  font-family: "SpaceGrotesk-Medium"
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: gray;
}

@font-face {
  font-family: "Made-Saonara";
  font-style: normal;
  font-weight: normal;
  src: url("fonts/Made-Saonara.ttf");
}

@font-face {
  font-family: "SpaceGrotesk-Medium";
  font-style: normal;
  font-weight: normal;
  src: url("fonts/SpaceGrotesk-Medium.ttf");
}

.contai-header {
  position: absolute;
  z-index: 5;
  max-width: 100% !important;
  padding-top: 50px;
  padding-bottom: 50px;
}

#logo {
  width: 50%;
}

.colougo {
  display: flex;
  align-self: center;
  justify-content: center;
}

.nav {
  justify-content: start;
  background-color: transparent;
}

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

#menu2 {
  justify-content: end;
  color: white !important;
}

#div-bienve {
  margin-top: 40px;
  width: 60%;
}

.col-bienv{
  padding: 2em 5em;
}

#bienv-h1 {
  text-align: center;
  color: white;
  font-family: 'Made-Saonara';
  font-size: 50px;
}

#bienv-h3 {
  text-align: center;
  color: white;
  font-family: 'SpaceGrotesk-Medium';
  font-size: 20px;
}

#div-ideo-dis{
  display: flex;
  text-align-last: center;
}

#div-ideo-ins, #div-ideo-bie{
  display: none;
  text-align-last: center;
}

.video1-dis, .video2-ins, .video3-bie {
  width: 700px;
  height: 370px;
}

.videos-ins{
  width: 640px;
  height: 350px;
}

#mom {
  position: relative;
  z-index: 3;
}

#sec1 {
  background-color: #c8dbaf;
  height: 650px;
  width: 90%;
  position: absolute;
  top: 0px;
  z-index: 1;
  scroll-behavior: smooth;
}

#sec2 {
  background-color: #e8c1a0;
  height: 650px;
  position: absolute;
  width: 95%;
  top: 0px;
  z-index: 0;
}

#sec3 {
  background-color: #a09ec8;
  height: 650px;
  width: 100%;
  top: 0px;
  z-index: -1;
}

#dis {
  position: absolute;
  font-family: 'Made-Saonara';
  top: 85%;
  right: -1%;
  color: white;
  transform: rotate(270deg);
  z-index: 5;
}

#ins {
  position: absolute;
  font-family: 'Made-Saonara';
  top: 80%;
  right: -3%;
  color: white;
  transform: rotate(270deg);
  z-index: 5;
}

#bie {
  position: absolute;
  font-family: 'Made-Saonara';
  top: 82%;
  right: -2%;
  color: white;
  transform: rotate(270deg);
  z-index: 5;
}


/*Diseño*/
#diseño {
  display: flex;
  margin-top: 5%;
}

#diseño-h1{
  font-family: 'Made-Saonara';
  font-size: 60px;
}

#diseño-h5{
  font-family: 'SpaceGrotesk-Medium';
}

.col-diseño {
  display: flex;
  flex-direction: column;
  padding: 5%;
  justify-content: center;
}

.col2-diseño {
  padding: 3% 5% 3% 0%;
}

#galery1,
#galery2,
#galery3 {
  display: flex;
  flex-wrap: wrap;
  max-width: 100%;
  height: 400px;
  flex-direction: column;
  padding: 0px;
}

#gal1, #gal4, #gal7 {
  display: flex;
  width: 28%;
  padding: 0px 12px 20px 12px;
}

#gal2, #gal5, #gal8 {
  display: flex;
  width: 28%;
}

#gal3, #gal6, #gal9 {
  display: flex;
  width: 80%;
  padding-left: 0px;
}

#btn-vermas {
  background: #c8dbaf;
  border: none;
  border-radius: 0px;
  width: auto;
}

/*Inspiración*/
#inspiracion {
  display: flex;
}

#inspi-h1{
  font-family: 'Made-Saonara';
  font-size: 60px;
}

#inspi-h5{
  font-family: 'SpaceGrotesk-Medium';
  font-size: 20px;
}

#inspi2-h3{
  font-family: 'Made-Saonara';
  font-size: 40px;
}

#inspi2-h5{
  font-family: 'SpaceGrotesk-Medium';
  font-size: 20px
}

.col-inspiracion {
  background-color: #e8c1a0;
  display: flex;
  justify-content: center;
  padding: 5%;
}

.col2-inspiracion {
  display: flex;
  justify-content: center;
  flex-direction: column;
  padding: 5%;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.col-inspiracion2 {
  display: flex;
  flex-direction: column;
  padding-left: 5%;
  padding-right: 5%;
  justify-content: center;
  text-align: center;
}

.col2-inspiracion2 {
  background-color: #e8c1a0;
  padding: 5%;
  display: flex;
  justify-content: center;
}

#color {
  position: relative;
}

#btn-mira {
  background: #e8c1a0;
  border: none;
  border-radius: 0px;
  width: auto;
}

#carouselExampleIndicators3{
  height: 320px;
}

/*Bienestar*/
#bienestar {
  background-color: #a09ec8;
  height: 500px;
}

#column {
  display: flex;
  flex-direction: column;
  padding: 5%;
  color: white;
}

#column2 {
  display: flex;
  padding: 5%;
  flex-direction: row;
  flex-wrap: wrap;
}

#bienes-h1{
  font-size: 50px;
  color: white;
  font-family: 'Made-Saonara';
}

#bienes-h5 {
  color: white;
  font-size: 18px;
  font-family: 'SpaceGrotesk-Medium';
}

#row-bienes {
  padding: 3rem 43rem 3rem 10rem;
}

#title{
  font-size: 15px;
  color: white;
}

#div-art1{
  position: absolute;
  line-height: 0;
  top: 13rem;
  width: 15rem;
  height: 4rem;
  background-color: #a09ec8;
  text-align: center;
  padding: 5px 0px;
}

#div-art2{
  position: absolute;
  line-height: 0;
  top: 13rem;
  width: 15rem;
  height: 4rem;
  background-color: #a09ec8;
  text-align: center;
  padding: 5px 0px;
}

#div-art3{
  position: absolute;
  line-height: 0;
  top: 13rem;
  width: 15rem;
  height: 4rem;
  background-color: #a09ec8;
  text-align: center;
  padding: 5px 0px;
}

#art1 {
  display: flex;
  position: relative;
  justify-content: flex-end;
}

#art2 {
  display: flex;
  position: relative;
  justify-content: center;
}

#art3 {
  display: flex;
  position: relative;
  justify-content: flex-start;
}

#img-art1, #img-art2, #img-art3{
  width: 15rem;
  height: 20rem;
}

/*Form*/
.form1 {
  margin-top: 8rem !important;
  border-bottom: groove;
  border-top: groove;
  margin-bottom: 3rem;
  padding: 4rem 5rem 3rem 6rem;
}

.fas {
  color: gray;
  width: 150%;
}

.nav-form {
  font-weight: 700;
  font-size: 30px;
}

.nav-form2 {
  padding: 0px !important;
  color: gray !important;
  font-size: 30px;
  line-height: 1.2 !important;
  font-weight: 500 !important;
}

.form-control {
  border-top: 0px !important;
  border-right: 0px !important;
  border-left: 0px !important;
  margin: 5px !important;
  font-size: 15px !important;
}

#btn-start{
  display: inherit;
  background-color: gray;
  border-color: gray;
  border-radius: 100px;
  width: 30px;
}


/* .ir-arriba {
  padding:20px;
	display:inline-block;
	background:#024959;
	color:#fff;
	position: fixed;
	font-size:20px;
	bottom:20px;
	right:20px;
	/* display:none; */
	/* cursor:pointer; */
/* } */ 
.go-btn {
  display: none;
  position: fixed;
  background: #c1d82f;
  border-radius: 50%;
  cursor: pointer;
  width: 50px;
  height: 50px;
  bottom: 20px;
  right: 20px;
  z-index: 2;
  text-decoration: none;
  text-align: center;
  line-height: 50px;
  transform: translate(-50%, -50%);
}

/* .active{
  bottom: 32px;
  pointer-events: auto;
  opacity: 1;
} */

#logo2 {
  display: flex;
  justify-content: center;
  text-align: center;
  width: 50%;
}



























/*Responsive*/

/*mobile-portrait:*/
@media only screen and (min-width: 320px) and (max-width: 500px){

  #menu, #menu2, #dis, #ins, #bie{
    display: none;
  }

  #div-ideo-dis{
    display: block;
  }

  #div-ideo-ins, #div-ideo-bie{
    display: none;
  }

  #sec1, #sec2, #sec3 {
    height: 430px;
    margin-bottom: 3rem;
  }

  .video1-dis, .video2-ins, .video3-bie {
    width: 350px;
    height: 195px;
    margin-top: 1rem;
  }

  #div-bienve {
    margin-top: 3rem;
    width: 100%;
  }

  .col-bienv {
    padding: 0em;
  }

  #gal1, #gal4, #gal7 {
    width: 48%;
    padding: 0px 12px 12px 12px;
}

  #gal2, #gal5, #gal8 {
    width: 48%;
  }

  #gal3, #gal6, #gal9 {
    width: 90%;
  }

  #diseño {
    display: flex;
    margin-top: 10rem;
  }

  .col-diseño {
    text-align: center;
  }
  .col2-diseño {
    padding-top: 3%;
    margin-bottom: -6%;
}

  .col-inspiracion2 {
    padding-bottom: 8%;
  }
  .col2-inspiracion {
    padding: 10%;
  }

  #bienv-h1, #diseño-h1, #inspi-h1, #bienes-h1 {
    font-size: 35px;
    margin-bottom: -5px;
  }
  #inspi2-h3 {
    font-size: 25px;
  }
  #bienv-h3, #diseño-h5, #inspi-h5, #inspi2-h5, #btn-mira, #btn-vermas, #bienes-h5, #asesoria{
    font-size: 15px;
  }
  .videos-ins {
    width: 375px;
    height: 210px;
  }


  #bienestar {
    height: 300px;
  }

  #row-bienes {
    padding: 2rem 2rem 1rem;
    text-align: center;
  }

  #img-art1, #img-art2, #img-art3 {
    width: 6rem;
    height: 9rem;
  }

  .carousel-indicators {
    display: none !important;
  }

  #div-art1 {
    position: absolute;
    line-height: 0;
    top: 4rem;
    width: 6rem;
  }

  #title {
    font-size: 9px;
    font-weight: 700;
  }

  #div-art2 {
    top: 4rem;
    width: 6rem;
    height: 4rem;
  }

  #div-art3 {
    top: 4rem;
    width: 6rem;
    height: 4rem;
  }

  .form1 {
    margin-top: 5rem !important;
    border-bottom: groove;
    border-top: groove;
    margin-bottom: 3rem;
    padding: 2rem;
  }

  .nav-form2 {
    font-size: 20px !important;
    line-height: 1.2 !important;
    font-weight: 500 !important;
  }

  .siguenos{
    padding: 10%;
    line-height: 0.5;
  }

  /* #asesoria{
    font-size: 12px;
  } */

  #logo2 {
    width: 80%;
  }

  .go-btn {
    bottom: 0px;
    right: 0px;
  }

}


/*tablet-portrait or phone horizon:*/
@media only screen and (min-width: 768px) and (max-width: 1023px) {


  #div-bienve {
    margin-top: 40px;
    width: 80%;
  }

  .col-bienv {
    padding: 2em 0em;
  }

  #dis, #ins, #bie{
    display: none;
  }

  #sec1, #sec2, #sec3{
    height: 580px;
  }

  #diseño {
    display: flex;
    margin-top: 12%;
  }

  #bienv-h1, #diseño-h1,  #inspi-h1{
    font-size: 50px;
  }

  #bienv-h3, #diseño-h5, #inspi-h5, #inspi2-h5, #bienes-h5 {
    font-size: 15px;
  }

  #inspi2-h3{
    font-size: 40px;
  }

  #galery1, #galery2, #galery3 {
    height: 500px;
  }

  #gal1, #gal4, #gal7 {
    display: flex;
    width: 34%;
    padding: 0% 1% 1% 0%;
  }
  #gal2, #gal5, #gal8 {
    display: flex;
    width: 34%;
    padding: 0% 1% 0% 0%;
  }

  #gal3, #gal6, #gal9 {
    display: flex;
    width: 80%;
    height: 100%;
    padding-left: 0px;
  }

  .col-diseño {
    padding: 3% 10% !important;
    text-align: center;
  }

  .col2-diseño {
    padding: 3% 1.5% !important;
  }

  .col2-inspiracion, .col-inspiracion2{
    padding: 5% !important;
  }

  .videos-ins{
    width: 680px;
    height: 380px;
  }

  .video1-dis, .video2-ins, .video3-bie {
    width: 530px;
    height: 300px;
  }

  /*Bienestar 768*/
  #bienestar {
    background-color: #a09ec8;
    height: 430px;
  }

  #row-bienes {
    padding: 3rem 8rem 3rem 5rem;
  }

  #img-art1, #img-art2, #img-art3 {
    width: 10rem;
    height: 15rem;
  }

  #div-art1 {
    top: 7rem;
    width: 10rem;
    height: 6.5rem;
  }

  #div-art2 {
    top: 7rem;
    width: 10rem;
    height: 6.5rem;
  }

  #div-art3 {
    top: 7rem;
    width: 10rem;
    height: 6.5rem;
  }

  /*Form 768*/

  .form1 {
    margin-top: 5rem !important;
  }

  .nav-form {
    font-size: 20px;
    margin-bottom: 5%;
  }

  .siguenos{
    font-size: 20px;
    margin-bottom: 5%;
  }


}

/*Tablets en horizonal y escritorios normales: min:1024px;*/
@media only screen and (min-width: 1024px) and (max-width: 1200px) {

  #bienv-h3{
    font-size: 18px;
  }

  #dis{
    right: -2%;
    top: 84.5%;
  }

  #ins{
    right: -4.5%;
  }

  #bie{
    right: -3%;
  }

  #diseño-h1,   #inspi-h1{
    font-size: 40px;
  }

  #diseño-h5,   #inspi-h5{
    font-size: 15px;
  }

  #inspi2-h3{
    font-size: 30px;
  }

  #inspi2-h5{
    font-size: 18px;
  }

  #gal1, #gal4, #gal7 {
    display: flex;
    width: 40%;
    padding: 0px 12px 10px 12px;
}

  #gal2, #gal5, #gal8 {
    display: flex;
    width: 40%;
  }

  #gal3, #gal6, #gal9 {
    display: flex;
    width: 80%;
    padding-left: 0px;
  }

  .videos-ins{
    width: 410px;
    height: 230px;
  }

  .video1-dis, .video2-ins, .video3-bie {
    width: 480px;
    height: 280px;
  }

  .col-diseño {
    padding: 5% 5% 0% 5%;
  }

  .col2-diseño {
    padding: 5% 3% 0% 0%;
    height: 450px;
  }

  /*Bienestar 1024*/
  #bienestar {
    background-color: #a09ec8;
    height: 450px;
  }

  #row-bienes {
    padding: 3rem 10rem 3rem 10rem;
  }

  #bienes-h5 {
    color: white;
    font-size: 15px;
    font-family: 'SpaceGrotesk-Medium';
  }

}

/*Escritorios muy anchos Yezi: 1280px - Heylen: 1366px
@media (min-width: 1200px) AND (max-width: 1370px) {

  .videos-ins, .video1-dis, .video2-ins, .video3-bie{
    width: 450px;
    height: 250px;
  }

}*/


/*RESPONSIVE BIG SCREENS*/
@media only screen and (min-width: 1201px) and (max-width: 1439px) {

  #dis {
    right: -0.5%;
    z-index: 100;
  }

  #ins {
    right: -2.7%;
    z-index: 100;
  }

  #bie {
    right: -1.7%;
    z-index: 100;
  }

  #div-ideo-dis{
    display: block;
  }

  #div-ideo-ins{
    display: none;
  }

  #div-ideo-bie{
    display: none;
  }

  .video1-dis, .video2-ins, .video3-bie {
    width: 700px;
    height: 370px;
  }

  #diseño {
    margin-top: 8%;
  }

  #gal1, #gal4, #gal7 {
    display: flex;
    width: 29%;
    padding: 0% 1% 1.5% 0%;
  }

  #gal2, #gal5, #gal8 {
    display: flex;
    width: 29%;
    padding: 0% 1% 0% 0%;
  }

  #gal3, #gal6, #gal9 {
    display: flex;
    width: 80%;
    padding-left: 0px;
  }

  .videos-ins {
    width: 580px;
    height: 320px;
  }

  .col-inspiracion {
    padding: 5% 4% !important;
  }

  .col2-inspiracion2 {
    padding: 5% 4% !important;
  }

}

/*RESPONSIVE RE BIG SCREENS*/
@media only screen and (min-width: 1440px) and (max-width: 1600px) {

  #dis {
    right: 0%;
    z-index: 100;
  }

  #ins {
    right: -1.5%;
    z-index: 100;
  }

  #bie {
    right: -0.7%;
    z-index: 100;
  }

  #div-ideo-dis{
    display: block;
  }

  #div-ideo-ins{
    display: none;
  }

  #div-ideo-bie{
    display: none;
  }

  .videos-ins {
    width: 640px;
    height: 360px;
  }

  .video1-dis, .video2-ins, .video3-bie {
    width: 750px;
    height: 430px;
  }

  #galery1, #galery2, #galery3 {
    height: 500px;
  }

  #gal1, #gal4, #gal7 {
    display: flex;
    width: 31%;
    padding: 0% 1% 1% 0%;
}

#gal2, #gal5, #gal8 {
  display: flex;
  width: 31%;
  padding: 0% 1% 0% 0%;
}

#gal3, #gal6, #gal9 {
  display: flex;
  width: 80%;
  height: 100%;
  padding: 0px 0px 0px 0px;
}

  #diseño {
    display: flex;
    margin-top: 10%;
  }
  #logo2{
    width: 30%;
  }
}

  /*RESPONSIVE RE-RE BIG SCREENS*/
@media only screen and (min-width: 1700px) and (max-width: 2000px) {

  #dis {
    right: 0%;
    z-index: 100;
  }

  #ins {
    right: -1.5%;
    z-index: 100;
  }

  #bie {
    right: -0.7%;
    z-index: 100;
  }

  #div-ideo-dis{
    display: block;
  }

  #div-ideo-ins{
    display: none;
  }

  #div-ideo-bie{
    display: none;
  }

  .videos-ins {
    width: 700px;
    height: 400px;
  }

  .video1-dis, .video2-ins, .video3-bie {
    width: 750px;
    height: 430px;
  }

  .col-diseño{
    padding: 1% 5% !important;
  }
  .col2-diseño{
    padding: 2% 8% !important;
  }

  .carousel-item{
    height: 500px;
  }

  #diseño{
    margin-top: 10%;
    margin-bottom: 0%;
  }

  #carouselExampleIndicators{
    padding: 0% 5%;
  }

  #galery1, #galery2, #galery3 {
    display: flex;
    flex-wrap: wrap;
    max-width: 100%;
    height: 100%;
    flex-direction: column;
    padding: 0px;
  }

  #gal1, #gal4, #gal7 {
    width: 33.7%;
    padding: 0%;
    margin: 0px 5px 5px 0px;
  }

  #gal2, #gal5, #gal8 {
    width: 33.9%;
    padding: 0%;
  }

  #gal3, #gal6, #gal9 {
    width: 100%;
    height: 100%;
    padding: 0%;
  }

  .col2-inspiracion{
    padding: 5% !important;
  }

  #bienv-h3, #diseño-h5, #inspi-h5, #inspi2-h5, #bienes-h5 {
    font-size: 25px;
}

  #logo2{
    width: 30%;
  }

  .nav-form2 {
    font-size: 40px;
  }

  #asesoria{
    font-size: 30px;
  }

  .form-control {
    font-size: 1.5rem !important;
  }

}



/*BLOGs*/
#header-back {
  position: relative;
  z-index: 3;
}

#color1 {
  background-color: #c8dbaf;
  height: 70px;
  width: 90%;
  position: fixed;
  top: 0px;
  z-index: 2;
}

#color2 {
  background-color: #e8c1a0;
  height: 70px;
  position: fixed;
  width: 95%;
  top: 0px;
  z-index: 1;
}

#color3 {
  background-color: #a09ec8;
  position: fixed;
  height: 70px;
  width: 100%;
  top: 0px;
  z-index: 0;
}

.contai-header-blog {
  display: flex;
  flex-direction: column;
  background-color: transparent;
  padding: 1%;
  position: fixed;
  z-index: 100;
}

.header-row-blog{
  align-items: center;
}

.header-row-blog-mobile{
  display: none;
}

#logo-blog{
  width: 30%;
}

.colougo2 {
  display: flex;
  align-self: center;
  justify-content: left;
}

#info-prin-blog {
  margin-bottom: 2%;
  /*background: linear-gradient(15deg, #2c2c2c 0.5%, transparent 50%, transparent 100%);*/
  background: linear-gradient(20deg, #2c2c2c 15%, transparent 60%, transparent 100%);
  border-bottom: 15px solid #a09ec8;
}

.img-prin{
  /*filter: brightness(70%);*/
  max-width: 100%;
  z-index: -1;
  height: 800px;
}

#bienestar-blog {
  background-color: #a09ec8;
  height: 405px;
}

.info-row-blog{
  flex-direction: column;
  position: absolute;
  top: 350px;
  left: 150px;
  max-width: 80% !important;
}

#title-h1{
  font-family: 'Made-Saonara';
  font-size: 70px;
  line-height: 80px;
  margin-bottom: 1%;
  color: white;
}
#title-h5{
  font-family: 'SpaceGrotesk-Medium';
  font-size: 30px;
  margin-bottom: 3%;
  color: white;
}
.info-row-blog p{
  color: white;
}
#title-fuente{
  font-family: 'SpaceGrotesk-Medium';
  display: flex;
  justify-content: right;
  text-decoration: none;
  color: white;
}

#rows-img{
  padding: 1% 20%;
}


#parrafos p{
  padding: 0% 1%;
}

#quieressaber{
  margin: 2% 0%;
}

@media only screen and (min-width: 320px) and (max-width: 425px) {
  #color1, #color2, #color3{
    height: 50px;
  }

  #logo-blog {
    width: 70%;
  }

  .header-row-blog-mobile, #menu2 {
    display: flex !important;
    flex-direction: row;
    align-items: center;
    font-size: 12px;
  }
  .header-row-blog{
    display: none !important;
  }

  .colougo2 {
    display: flex;
    align-self: center;
    justify-content: left;
}

  .info-row-blog{
    top: 110px;
    left: 30px;
    line-height: 0%;
    max-width: 92% !important;
  }

  #title-h1{
    font-size: 25px;
    line-height: 28px;
    color: white;
  }
  #title-h5{
    font-size: 12px;
    margin-bottom: 8%;
    color: white;
  }
  .info-row-blog p{
    color: white;
    font-size: 10px;
    line-height: 10px;
  }
  #title-fuente{
    font-size: 12px;
  }

  #rows-img {
    padding: 5% 10%;
  }

  .img-prin {
    height: 300px;
  }

  #parrafos h2{
    padding: 0% 5%;
    font-size: 15px;
  }

  #parrafos p{
    padding: 0% 5%;
    font-size: 15px;
    vertical-align: middle;
  }

  #quieressaber {
    margin: 2% 0%;
    text-align: center;
  }

  #carouselExampleIndicators3 {
    height: 150px;
  }

  #bienestar-blog {
    height: 190px;
  }
}

@media all and (min-width: 768px) and (max-width: 1024px) {
  #logo-blog {
    width: 50%;
  }

  #color1, #color2, #color3 {
    background-color: #c8dbaf;
    height: 95px;
  }

  .info-row-blog {
    top: 300px;
    left: 90px;
  }
}

@media all and (min-width: 1700px) and (max-width: 2000px) {

  .info-row-blog {
    top: 340px;
    left: 380px;
    max-width: 62% !important;
  }

  #color1, #color2, #color3{
    height: 85px;
  }

}