:root {

  /* CORES */



  --01-Color-White: #fff;

  --01-Color-White-2: rgba(245, 245, 245, 0.966);



  --02-Color-Black: rgba(34, 34, 34, 0.94);

  --02-Color-Black-2: #303030;



  --03-Color-Gray: rgba(202, 202, 202, 0.94);

  --03-Color-Gray-2: #fff;



  --04-Color-Custom1: #F2D4AE;

  --04-Color-Custom1-2: #fff;



  --05-Color-Custom2: #373E51;

  --05-Color-Custom2-2: #272D38;



  /* TAMANHOS %%%% */



  --tp-100: 100%;

  --tp-90: 90%;

  --tp-50: 50%;

  --tp-60: 60%;

  --tp-40: 40%;

  --tp-40-2: 53%;

  --tp-30: 30%;

  --tp-10: 10%;



  /* TAMANHOS VW */



  --tvw-100: 100vw;

  --tvw-90: 90vw;

  --tvw-80: 80vw;

  --tvw-80-2: 88vw;

  --tvw-50: 50vw;

  --tvw-10: 10vw;

  --tvw-10-2: 7vw;

  --tvw-10-3: 16vw;



  /* TAMANHOS VH */



  --tvh-100: 100vh;

  --tvh-90: 90vh;

  --tvh-80: 80vh;

  --tvh-80-2: 87vh;

  --tvh-70-2: 75vh;

  --tvh-50: 50vh;

  --tvh-10: 10vh;







  /* Z-INDEX */



  --z-1: -1;

  --z-10: 10;

  --z-11: 11;

  --z-12: 12;

  --z-13: 13;

  --z-14: 14;



  /* Bordas */



  --Borda-1: 1vw;

  --Borda-2: 1vw;

  --Borda-3: 1vw;

  --Borda-3: 1vw;

}





main {

  background-repeat: no-repeat;

  background-size: cover;

  display: flex;

  justify-content: center;

  align-items: center;

  height: var(--tvh-100);

  padding: 0 !important;

  background-color: var(--01-Color-White-2);

}





/* Containers */



/* C1 = CONTAINER BASE PARA SEGURAR FACHADA-MENU-SLIDE */



#c1 {

  display: flex;

  justify-content: center;

  align-items: center;



  width: var(--tvw-80-2);

  height: var(--tvh-80);



  background: rgb(231, 231, 231);

  background: -moz-radial-gradient(circle, rgba(231, 231, 231, 1) 0%, rgba(215, 215, 215, 1) 99%);

  background: -webkit-radial-gradient(circle, rgba(231, 231, 231, 1) 0%, rgba(215, 215, 215, 1) 99%);

  background: radial-gradient(circle, rgba(231, 231, 231, 1) 0%, rgba(215, 215, 215, 1) 99%);

  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#e7e7e7", endColorstr="#d7d7d7", GradientType=1);



}



/* C1 = CONTAINER BASE PARA SEGURAR FACHADA-MENU-SLIDE -02 */



#c1-filho-1 {

  position: relative;

  display: flex;

  width: 85vw;

  height: var(--tvh-70-2);

  padding: 0;

  align-items: center;

  justify-content: center;



  box-shadow: -4px 5px 10px 1px rgba(0, 0, 0, 0.53);

}







/* CONTAINER PARA FACHADA ANIMADA */



#c2-fachada {

  /* background-image: url("../artes/homepage/Fachda_tarde02.png"); */

  background-repeat: no-repeat;

  background-size: cover;

  display: flex;

  align-self: flex-end;

  width: var(--tp-40-2);

  height: var(--tvh-80-2);





  animation: color-change-2x 5s linear infinite alternate-reverse both;



}



@keyframes color-change-2x {

  0% {

    background-image: url("../artes/homepage/Fachada_dia.png");

  }



  100% {

    background-image: url("../artes/homepage/Fachda_tarde02.png");

  }

}









/* CONTAINER PARA SLIDE */



#c4-slide {

  width: var(--tp-60);

  height: var(--tvh-70-2);



  display: flex;

  justify-content: center;

  align-items: center;

  align-content: center;





}



#c4-slide-img {



  background-image: url("../artes/homepage/home-1.png");





  display: flex;

  position: relative;

  background-size: cover;

  width: 100%;

  height: var(--tvh-70-2);







  animation: color-change-home 5s linear infinite alternate-reverse both;



}



@keyframes color-change-home {

  0% {

    background-image: url("../artes/homepage/home-1.png");

  }



  100% {

    background-image: url("../artes/homepage/home-2.png");

  }

}





/* CONTAINER PARA O MENU FLUTUANTE */





#c3-menu-position {

  z-index: var(--z-11);

  height: auto;

  position: absolute;

  display: flex;

  justify-content: center;

  align-items: center;

  width: 15vw;

  transform: translate(-2vw, 0vw);

}





#c3-menu-animation {

  position: relative;

  z-index: 12;

  display: flex;

  flex-direction: column;

  align-items: center;

  align-content: center;

  width: var(--tp-100);

  height: var(--tp-100);



}





.c3-menu-buttom {







  -webkit-animation: scale-in-center 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;



  display: flex;

  text-align: center;

  align-items: center;

  justify-content: center;





  width: var(--tvw-10-2);

  height: var(--tvw-10-2);



  transform: rotate(45deg);



  border-width: 0.02vw;

  border-style: solid;

  border-color: var(--04-Color-Custom1);

  border-radius: 0.2vw;



  background: var(--05-Color-Custom2);

  background: radial-gradient(circle farthest-corner at center center, #373e51 0%, #272d38 80%);

  background: -webkit-radial-gradient(circle farthest-corner at center center, #373e51 0%, #272d38 80%);

  background: -moz-radial-gradient(circle farthest-corner at center center, #373e51 0%, #272d38 80%);



  box-shadow: -4px 5px 10px 1px rgba(0, 0, 0, 0.53);

}







@-webkit-keyframes scale-in-center {

  0% {

    -webkit-transform: scale(0);

    transform: scale(0);

    transform: rotate(0);

    opacity: 0;

  }



  100% {

    -webkit-transform: scale(1.1);

    transform: scale(1.1);

    transform: rotate(45deg);

    opacity: 1;

  }

}



/* CLOSE  */

#Position-Close {
  display: block;
  position: absolute;
  z-index: 50;

  display: block;
  position: absolute;
  width: 6vh;
  height: 6vh;

  background-image: url("../artes/X-color2.svg");

  top: 0;
  right: 0;

  transform: translate(-8vw, -0.4vw);
}

#Position-Close:hover {
  background-image: url("../artes/X-color1.svg");
  cursor: pointer;
}




.c3-menu-cage-meio {

  z-index: 13;

}



#c3-menu-buttom-meio {



  width: var(--tvw-10-3);

  height: var(--tvw-10-3);





  background-size: contain;

  background-repeat: no-repeat;

  background-color: transparent;

  background-image: url("../artes/arte_logo_theone_R04.svg");



  filter: drop-shadow(-6px 9px 10px rgba(0, 0, 0, 0.61));

}



.c3-menu-cage-meio {

  align-self: center;

  justify-self: center;

}





.c3-menu-buttom h3 {

  margin-top: 0.3vw;

  margin-right: 0.3vw;

  font-size: 1vw;

  font-weight: 500;

  display: flex;

  font-family: Arial, Helvetica, sans-serif;

  text-decoration: none;

  text-transform: uppercase;

  color: var(--04-Color-Custom1);

  justify-content: center;

  align-items: center;

  transform: rotate(-45deg);

  width: 100%;

  height: 50%;

}



.c3-menu-animation-top,

.c3-menu-animation-bottom {

  display: flex;

  flex-direction: column;

  flex-wrap: wrap;

}



/* LINKDS LOTTIE */



#lottielinks {

  position: absolute;

  display: flex;

  flex-direction: column;

  justify-content: space-between;

  z-index: 50 !important;

  width: 16vw !important;

  height: 80vh !important;



  transform: translate(35vw, 0vw) !important;



}



.L-B {

  cursor: pointer;

  position: absolute;

  width: 5vw;

  height: 5vw;

  transform: rotate(45deg);

}





#l-b-realizacao {

  transform: translate(1.5vw, 0vw);

}



#l-b-ph {

  transform: translate(4.5vw, -2vw);

}



#l-b-perspectivas {

  transform: translate(9.5vw, -6vw);

}



#l-b-filme {

  transform: translate(-0.5vw, 1vw);

}



#l-b-tour {

  transform: translate(4.5vw, -3vw);

}

#l-b-localizacao {

  transform: translate(1.5vw, -5vw);

}



/* LINKDS LOTTIE */









.custom-top3 {

  transform: translate(-3vw, 5.5vw);

}



.custom-top {

  transform: translate(0vw, 5.5vw);

}



.left {

  transform: translate(5vw, 3.5vw);

}







.right {

  transform: translate(-5vw, -3.5vw);



}



.custom-bottom {

  transform: translate(0vw, -5.5vw);

}





.custom-bottom3 {

  transform: translate(-3vw, -5.5vw);

}



/* ANIMACAO */



@-webkit-keyframes fade-in {

  0% {

    opacity: 0;

  }



  100% {

    opacity: 1;

  }

}



@keyframes fade-in {

  0% {

    opacity: 0;

  }



  100% {

    opacity: 1;

  }

}



#lottielinks {

  position: absolute;



  transform: translate(5vw, 5vw);



}