/*

Theme Name: Vincenzo Basile

Theme URI: https://www.vincenzobasile.it/

Author: Vincenzo Basile

Author URI: https://www.vincenzobasile.it/

Version: 1.0

Description: Vincenzo Basile Fotografia

Theme domain: vincenzobasile

*/



/******/



:root {

  --main--text-color: #000;

  --main--text-color-light: #fff;

  --main--text-color-hover: #ededed;

  --main--bgcolor: linear-gradient(90deg, rgba(38, 117, 175, 1) 0%, rgba(110, 35, 129, 1) 25%, rgba(155, 25, 101, 1) 70%, rgba(189, 32, 76, 1) 85%, rgba(232, 73, 35, 1) 100%);

  --main--transition: all .3s ease;

}



body {

  margin: 0;

}



p {

  margin: 0;

  padding: 0;

}



/******* pulsanti */



.pulsante {

  background: var(--main--bgcolor) !important;

  border-radius: 50px;

  transition: var(--main--transition);

}



.pulsante:hover {

  box-shadow: 0 0 8px var(--main--text-color) !important;

}



.pulsante a {

  color: var(--main--text-color-light) !important;

  min-width: 180px;

  text-align: center;

}



/********** menu */

#menu {

  position: fixed;

  width: 100%;

  top: 0;

  left: 0;

  transition: var(--main--transition);

}



#menu.scroll {

  top: -200px;

}



#menu2 {

  position: fixed;

  width: 100%;

  top: -200px;

  left: 0;

  transition: var(--main--transition);

}



#menu2.scroll {

  top: 0;

}



#menu .pulsante,

#menu2 .pulsante {

  margin-left: 20px;

}



#menu .pulsante a,

#menu2 .pulsante a {

  display: inline-block !important;

}



/********** content */



#intro {

  transition-timing-function: linear;

  transition: var(--main--transition);

  perspective: 800px;

  display: block;

}



#intro .bg {

  transition: var(--main--transition);

  transition-timing-function: linear;

  transform-style: preserve-3d;

  transform-origin: 50% 50%;

  transform: rotateY(-10deg) rotateX(0deg);

}



#logo2,#menub{

  opacity:0;

  transform: scale(1,0);



  transition: all .3s ease-in-out;

 

}

#menub{

  box-shadow: 0 0 20px #000;

  opacity:0;

  transform: scale(1,0);

}

body.scrolled #logo2,

body.scrolled #menub{

  opacity:1;

  transform: scale(1,1);

  transition: all .3s ease-in-out;

}

#logo{

  left:65% !important;

  top:50%;

  transform: translate(-50%,-50%) !important;

  transition: all .3s ease-in-out;

}

body.scrolled #logo{

  top:-300px;

  opacity:0;



}

#menu{



}

body.scrolled #menu{

  left: 118px;
  background-color: transparent !important;

}
body.scrolled #menu .elementor-widget-container{
  background-color: transparent !important;
}
#superslider{

  display:none !important;

}

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

  #logo{

    left:50% !important;

  }

}
.menumb{
  opacity:0;
  max-height:0px;
  overflow: hidden;
  transition: all .3s ease-in-out;
}
body.menuopen .menumb{
  opacity:1;
  max-height:2000px;
}
.closemenu{
  transform: scale(0,0);
  opacity:0;
  transition: all .3s ease-in-out;
}
body.menuopen .closemenu{
  transform: scale(1,1);
  opacity:1;
}