/*
Theme Name: dellaroveredesignThemePHP
Theme URI: google.com
Description: dellaroveredesignThemePHP
Version: 1.0
Author: Filiberto/Patrizio
Author URI: google.com
*/

@font-face {
  font-family: Miller;
  src: url("/fonts/fonnts.com-Miller_Text_Bold-1.otf");
}
@font-face {
  font-family: ClobberGrotesk-Medium;
  src: url("/fonts/ClobberGrotesk-Medium.ttf");
}

/* ---------------------------GENERAL ----------------------- */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html {
  scrollbar-color: black;
  scrollbar-width: thin;
  height: 100%;
}
body {
    height: 100%;
  margin: 0;
  padding: 0;
  background-color: black;
  overflow-x: hidden;
  cursor: none;
}

.title-mobile{

  display: none;
}
/* ---------------------------PERSONAL CURSOR ----------------------- */
.personal-cursor {
  position: fixed;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #e64130;
  pointer-events: none;
  transform: translate(-50%, -50%);
  z-index: 9999;
  transition:  transform  .5s ease;

}

.personal-cursor.active {
  transform: translate(-50%, -50%) scale(2);
}

.arrow-left{
  
  position: absolute;
  transform: translate(-50%, -49.6%) scale(.06);
  opacity: 0;
   transition: transform .3s ease, opacity .3s ease;
}

.arrow-right{

  position: absolute;
  transform: translate(-49%, -49.6%) scale(.06);
  opacity: 0;
   transition: transform .3s ease, opacity .3s ease;
}

.personal-cursor.left .arrow-left {

  opacity: 1;

}

.personal-cursor.right .arrow-right {


  opacity: 1;

}


.personal-cursor.left, .personal-cursor.right {
  background-color: transparent;
  border-radius: 0;
}


/* ---------------------------BUTTON LANGUAGE ----------------------- */
.btn-lang {
  position: absolute;
  top: 0;
  z-index: 100;
  right: 40px;
}

.btn-lang button {
  position: absolute;
  all: unset;
  cursor: none;
  color: white;
  font-family: roboto;
  font-weight: bold;
  font-size: 0.9rem;
  margin: 5px;
}

.btn-lang button.active {
  color: black;
}
/* ---------------------------GENERAL A, P, H1 ----------------------- */
h1,
.container-info-pc,
footer {
  z-index: 10;
}
a {
  cursor: none;
}
a,
p {
  text-decoration: none;
  z-index: 100;
  color: aliceblue;
}

/* ---------------------------IMAGES ANIMATION ----------------------- */

.container-wrapper{

  position: relative;
  width: 100%;
  height: 100vh;
}
.container-first{

  position: relative;
  width: 100vw;
  height: 100vh;
}
.scorrimento {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

.img-item {
  position: absolute;
  
  opacity: 0;
  width: 100vw;
  height: 100vh;
  transition: transform 1s ease, left 0s 1s;
  will-change: transform, opacity;
}

.img-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.img-item.Right {
  
  transform: translateX(100%);
  /* transition: transform 1s ease; */
  opacity: 1;
  z-index: 0;
}

.img-item.Center {
  
   transform: translateX(0);
  
  opacity: 1;
  
 
}

.img-item.Left {
  
  transform: translateX(-100%);
  
  opacity: 1;
  z-index: 0;
}

.img-item.RightToCenter {
  left: 0;
  transform: translateX(0);
  transition: transform 1s ease;
  opacity: 1;
}

.img-item.CenterToLeft {
  transform: translateX(-100%);
  transition: transform 1s ease, right 0s 1s;
  opacity: 1;
}

.img-item.LeftToCenter {
  transform: translateX(0);
  transition: transform 1s ease, left 0s 1s;
  opacity: 1;
}

.img-item.CenterToRight{
  transform: translateX(100%);
  transition: transform 1s ease, left 0s 1s;
  opacity: 1;
}
/* ---------------------------END IMAGES ANIMATION ----------------------- */



/* ---------------------------ARROWS FOR IMAGES ANIMATION ----------------------- */

.container-arrow{

  position: absolute;
  background-color: transparent;
  width: 100px;
  height: 100vh;
  z-index: 2;

}

.container-arrow.left{

  left: 0px;
 
}


.container-arrow.right{

  right: 0px;
  
}















/* ---------------------------END ARROWS FOR IMAGES ANIMATION ----------------------- */



h1 {
  position: absolute;
  font-family: "Miller Display";
  font-weight: lighter;
  font-size: clamp(2rem, 6vw, 4.5rem);
   word-wrap: break-word;
  line-height: 1.2;
  width: 80%;
  top: 10%;
  padding: 0;
  margin: 0;
  left: 40px;
  color: aliceblue;
}

.container-info-pc {
  position: absolute;
  width: 100vw;
  justify-content: center;
  bottom: 24%;
  padding-bottom: 20px;
}

.container-info-mobile {
  display: none;
}
.container-info-pc ul {
  list-style: none;
  display: flex;
  justify-content: space-between;
  padding: 0;
  margin: 0;
  margin-left: 40px;
  margin-right: 40px;
}
.container-info-pc li {
  display: flex;
  padding: 0;

  align-items: center;
  color: aliceblue;
}
.container-info-pc li p {
  font-family: roboto;
  font-weight: lighter;
  min-width: 130px;
}

.logo {
  position: absolute;
  width: 100vw;
  bottom: 5px;
  
}
.logo img {
  position: relative;
  margin: 0 40px;
  width: auto;
  bottom: 0;
  z-index: 10;
}
/* ---------------------------FOOTER ----------------------- */
footer {
  position: relative;
  height: 40px;
  width: 100%;
  background-color: black;
}
.iubendastyle-pc {
  
  position: absolute;
  bottom: 10px;
  right: 0px;
  font-family: roboto;
  padding: 0;
  margin: 0;
  margin-right: 10px;
}

.iubendastyle-mobile {

  display: none;
}

.copyright {
  position: absolute;
  text-align: left;
  left: 40px;
  bottom: 10px;
}
/* ---------------------------END FOOTER ----------------------- */







/***** SMARTPHONE *****/
@media only screen and (max-width: 480px) {


  .container-arrow{

    display: none;
  }

  #img-detail1 img{
   object-position:  70% 50%;
  }

  footer {
    position: relative;
    height: 300px;
    width: 100%;
    padding: 0 20px;
    background-color: black;
    z-index: -1;
  }

  .personal-cursor{

    display: none;
  }

  h1 {

      font-size: clamp(2rem, 6vw, 3.5rem);
  }


.container-info-pc, 
.iubendastyle-pc,
.title-desktop{

  display: none;
}

.container-info-mobile,
.iubendastyle-mobile,
.title-mobile{

  display: block;
}
  .container-info-mobile {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    padding-top: 20px;
  }

  .container-info-mobile ul {
    list-style: none;
    padding: 0;
    margin: 0;


  }
  .container-info-mobile li {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 1rem;
    line-height: 0.6cm;
    color: aliceblue;
  }
  .container-info-mobile li p {
    font-family: roboto;
    font-weight: bold;
  }


.iubendastyle-mobile{

    position: absolute;
    text-align: right;
    right: 0;
    bottom: 10px;
    padding-right: 20px;
    font-family: roboto;

}
.container-first {
  position: relative;
  min-height: 100vh; 
}

#stop-logo{

  position: relative;
  height: 30px;
  bottom: 20px;

}

.logo {
  position: fixed;
  bottom: 0px; 
  left: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  z-index: 10;
}
.logo img {
  width: auto;
  margin: 0 40px;
}
}