/*
 * Table of contents:
 * 
 * from line 14 - Primary
 * from line 86 - Preloader style
 * from line 301 - Cursor
 * from line 345 - Navigation
 * from line 750 - Hero Sections
 * from line 2040 - Blog
 * from line 2812 - Media, for smaller screens
 *
 */

/* #Primary
================================================== */

body{
	font-family: 'Mulish', sans-serif;
	font-weight: 300;
	font-size: 15px;
	line-height: 1.7;
	color: #c4c3ca;
	overflow-x: hidden;
	background-color: #080808;
}
body.nav-active{
	overflow: hidden;
}
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6{
	font-weight: 300;
	margin-bottom: 0;
	line-height: 1.35;
	color: #fff;
}
h1, .h1 {
	font-size: 4rem;
	font-weight: 200;
}
h2, .h2 {
	font-size: 3.4rem;
	font-weight: 300;
}
h3, .h3 {
	font-size: 2.7rem;
	text-transform: capitalize;
}
h4, .h4 {
	font-size: 2.2rem;
}
h5, .h5 {
	font-size: 1.6rem;
	font-weight: 400;
	text-transform: capitalize;
}
h6, .h6 {
	font-size: 1rem;
	text-transform: uppercase;
	font-weight:400;
	letter-spacing: 2px;
}
::selection {
	color: #fff;
}
::-moz-selection {
	color: #fff;
}
::selection {
	background-color: #000;
}
::-moz-selection {
	background-color: #000;
}
mark{
	color:#fff;
	background-color: #000;
}
.lead {
	font-size: 1.35rem;
	font-weight: 300;
	color: #fff;
}
.lead-q {
	font-size: 1.8rem;
	font-weight: 300;
	line-height: 1.6;
}
.lead a{
	color: #fff;
	text-decoration: underline;
}
.lead a:hover{
	opacity: 0.5;
	text-decoration: underline;
}

.subtitle{
	opacity: 0;
}

/* #Preloader style
================================================== */

.animsition-loading,
.animsition-loading:after {
	width: 36px;
	height: 36px;
	position: fixed;
	top: 50%;
	left: 50%;
	margin-top: -18px;
	margin-left: -18px;
	border-radius: 50%;
	z-index: 100;
}
.animsition-loading {
	opacity: .2;
	background-color: transparent;
	border:none;
	background-color: #fff;
	animation: loaderAnim 0.7s linear infinite alternate forwards;
}
@keyframes loaderAnim {
	to {
		opacity: 1;
		transform: scale3d(0.5,0.5,1);
	}
}

/* #Primary style
================================================== */

.section {
    position: relative;
	width: 100%;
	display: block;
}
.relative {
    position: relative;
}
.over-hide{
	overflow: hidden;
}
.full-height {
	height: 100vh;
}
.hero-full-height {
	height: calc(100vh - 140px);
}
.half-height {
	height: 50vh;
}
.big-55-height {
	height: 55vh;
}
.big-60-height {
	height: 60vh;
}
.big-65-height {
	height: 65vh;
}
.big-70-height {
	height: 70vh;
}
.big-75-height {
	height: 75vh;
}
.big-80-height {
	height: 80vh;
}
.max-width-80 {
	max-width: 80%;
}
.background-white {
	background-color: #ffffff;
}
.background-grey {
	background-color: #fbfbfb;
}
.background-grey-1 {
	background-color: #f9f9f9;
}
.background-dark {
	background-color: #101010;
}
.background-dark-1 {
	background-color: #242424;
}
.background-dark-2 {
	background-color: #0f1010;
}
.background-dark-3 {
	background-color: #171717;
}
.background-dark-4 {
	background-color: #151515;
}
.background-black {
	background-color: #000000;
}
.color-black {
	color: #000000;
}
.color-white {
	color: #ffffff;
}
.color-grey {
	color: #B9B9B9;
}
.img-wrap  {
	position:relative;
	width:100%;
	display:block;
}
.img-wrap img {
	width:100%;
	height: auto;
	display:block;
}
.img-wrap video{
	width:100%;
	height: auto;
	display:block;
	margin: 0 auto;
	border-radius: 20px;
}
.col-md-4 .img-wrap video{
	max-width: 80%;
}
.z-bigger  {
	z-index:10;
}
.container.z-bigger  {
	z-index: 50;
}
.z-too-big  {
	z-index:11000;
}
.padding-page-top {
	padding-top: 180px;
}
.padding-top-bottom {
	padding-top: 100px;
	padding-bottom: 100px;
}
.padding-top {
	padding-top: 100px;
}
.padding-bottom {
	padding-bottom: 30px;
}
.padding-top-bottom-big {
	padding-top: 140px;
	padding-bottom: 140px;
}
.padding-top-big {
	padding-top: 140px;
}
.padding-bottom-big {
	padding-bottom: 140px;
}
.padding-top-bottom-small {
	padding-top: 70px;
	padding-bottom: 70px;
}
.padding-top-small {
	padding-top: 70px;
}
.padding-bottom-small {
	padding-bottom: 70px;
}
.padding-top-bottom-smaller {
	padding-top: 50px;
	padding-bottom: 50px;
}
.padding-top-smaller {
	padding-top: 50px;
}
.padding-bottom-smaller {
	padding-bottom: 50px;
}
.section-title-wrap p{
	letter-spacing: 2px;
	font-size: 19px;
	font-weight: 400;
	padding: 0;
}
.section-title-wrap h1, .section-title-wrap h3{
	margin: 0;
	padding: 0;
    font-size: 4.5rem;
	font-weight: 800;
	line-height: 1.1;
}
br.mob{
	display: none;
}
span.typed-cursor {
    font-weight: 400;
}

.char{
    animation: an 1s ease-out 1 both;
    display: inline-block;
}

@keyframes an{
    from{
        opacity: 0;
        transform: perspective(500px) translate3d(-35px, -40px, -150px) rotate3d(1, -1, 0, 35deg);
    }
    to{
        opacity: 1;
        transform: perspective(500px) translate3d(0, 0, 0);
    }
}

.scroll-to-top{
	position: fixed;
	top: 50%;
	right: 50px;
	display: none;
	width: 35px;
	height: 80px;
	z-index: 51;
	background-repeat: no-repeat;
	background-position: top center;
	background-size: 43px 43px;
	cursor: pointer;
	background-image: url('../img/arrow-up.svg');
	transform: translateY(-50%);
	-webkit-transition: all 200ms linear;
	transition: all 200ms linear;
	mix-blend-mode: difference;
}
.scroll-to-top:after{
	position: absolute;
	top: 27px;
	left: 17px;
	width: 1px;
	height: 26px;
	background-color: #fff;
	content: '';
	z-index: 1;
	-webkit-transition: all 200ms linear;
	transition: all 200ms linear; 
}
.scroll-to-top:hover:after{
	top: 32px;
	height: 36px;
}

.scroll-to-bottom{
	position: fixed;
    bottom: 4%;
    left: 6px;
    letter-spacing: 0.2rem;
    text-transform: uppercase;
    font-size: 10px;
    height: 180px;
    width: 44px;
	opacity: 0;
	-webkit-transition: all 1000ms linear;
	transition: all 1000ms linear;
}
.scroll-to-bottom p{
	transform: rotate(-90deg);
    width: max-content;
    position: absolute;
    top: 80px;
    left: -60px;
    display: block;
	color: #B9B9B9;
}
.scroll-to-bottom.visible{
	opacity: 1;
	-webkit-transition: all 1000ms linear;
	transition: all 1000ms linear;
}
.scroll-indicator {
	position: absolute;
    right: 0;
    top: 0;
    width: 6px;
    height: 6px;
    background-color: #B9B9B9;
    border-radius: 50%;
    animation: scrollAnimation 3s ease-in-out infinite;
  }

  @keyframes scrollAnimation {
	0% {
	  opacity: 0;
	  transform: translateY(-10px);
	}
	100% {
	  opacity: 1;
	  transform: translateY(170px);
	}
  }


.linea:after{
	content: "";
	display: block;
	width: 1px;
	height: 200px;
	background-color: #fff;
	margin: 50px auto 0;
}

.little_title{
    color: #151515;
    -webkit-text-fill-color: #151515;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: #fff;
    letter-spacing: 3px;
    font-size: 50px;
    line-height: 50px;
    opacity: 0.5;
    position: absolute;
    top: -36px;
}

.info{
	padding-left: 80px;
}

.info p{
    font-size: 18px;
    line-height: 24px;
    color: #fff;
    margin-bottom: 20px;
    position: relative;
    padding-top: 25px;
    padding-left: 10px;
}

.info p:first-child{
	padding-top: 0;
}

.info p span{
    color: #151515;
    -webkit-text-fill-color: #151515;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: #fff;
    letter-spacing: 3px;
    font-size: 50px;
    line-height: 50px;
    display: block;
    position: relative;
    top: 0;
    left: 0;
    z-index: 0;
    margin-bottom: -22px;
    opacity: 0.5;
}

.info p strong{
	position: relative;
	z-index: 1;
}

.info p b{
	position: relative;
	z-index: 1;
}

/* #Cursor
================================================== */

* {
	cursor: none;
}
.cursor {
	--size: 6px;
	height: var(--size);
	width:  var(--size);
	border-radius: 50%;
	position: absolute;
	z-index: 10000;
	transform: translate(-50%, -50%);
	pointer-events: none;
}
.cursor.cursor-shadow {
	background-color: transparent;
	border: 2px solid #fff;
	--size: 30px;
	transition: top .2s, left .2s,
              width .2s, height .2s,
              background-color .2s, border-color 0.2s;
	transition-timing-function: ease-out;
	mix-blend-mode: difference;
}
.cursor.cursor-dot {
	background: #fff;
	transition: width .2s, height .2s;
	mix-blend-mode: difference;
}
.cursor-shadow.active {
	--size: 80px;
	border-color: rgba(255,255,255, 0);
	background-color: rgba(255,255,255,.1);
}
.cursor-dot.active {
	--size: 0;
}
a {
	cursor: pointer;
}
a:hover {
	text-decoration: none;
}
.cursor.tempHide{
	opacity: 0;
	-webkit-transition: all 200ms linear;
	-moz-transition: all 200ms linear;
	-o-transition: all 200ms linear;
	-ms-transition: all 200ms linear;
	transition: all 200ms linear; 
}

/* #Navigation
================================================== */
 
.header{
    position: fixed;
	width:100%;
	top:0;
	left:0;
	z-index:100;
} 
.header-wrapper{
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: space-between;
    align-items: center;
    height: 100%;
    padding: 0 100px;
} 
.logo-wrap {
	display:block;
	cursor: pointer;
}
.logo-wrap a {
	cursor: pointer;
}
.logo-wrap img{
	height: 56px;
	width:auto;
	display:block;
	cursor: pointer;
}
.cd-header {
	position: absolute;
	top: 0;
	left: 0;
	background: rgba(21, 21, 21, 1);
	width: 100%;
	z-index: 2002;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
	height: 100px;
	background: transparent;
	box-shadow: none;
	-webkit-transition: all 300ms linear;
	-moz-transition: all 300ms linear;
	-o-transition: all 300ms linear;
	-ms-transition: all 300ms linear;
	transition: all 300ms linear; 
	-webkit-transform: translate3d(0, 0, 0);
	-moz-transform: translate3d(0, 0, 0);
	-ms-transform: translate3d(0, 0, 0);
	-o-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	max-width: 100vw;
}
.cd-header.is-fixed {
	position: fixed;
	top: -100px;
	background-color: rgba(0, 0, 0, 0.96);
	-webkit-transition: -webkit-transform 0.3s;
	-moz-transition: -moz-transform 0.3s;
	transition: transform 0.3s;
}
.cd-header.is-visible {
	-webkit-transform: translate3d(0, 100%, 0);
	-moz-transform: translate3d(0, 100%, 0);
	-ms-transform: translate3d(0, 100%, 0);
	-o-transform: translate3d(0, 100%, 0);
	transform: translate3d(0, 100%, 0);
}
.cd-header.menu-is-open {
	background-color: rgba(21, 21, 21, 0);
}

.secretPassionFound{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
	display: none;

}
.secretPassionFound p {
    font-size: 10px;
    text-transform: uppercase;
    margin: 0 auto 4px;
	letter-spacing: 1px;
	text-align: center;
}
.secretPassionFound .gems{
	display: flex;
    gap: 10px;
    justify-content: center;
}
.secretPassionFound .gems div{
	width: 8px;
	height: 8px;
	background-color: #B9B9B9;
	border-radius: 50%;
    position: relative;
}
.secretPassionFound .gems div.active{
	background-color: #EE731B;
}
.secretPassionFound .gems div span {
    content: "";
    position: absolute;
    width: 8px;
    height: 8px;
    background-color: #B9B9B9;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: width 1.5s ease-in-out, height 1.5s ease-in-out, opacity 1.5s ease-in-out;
    z-index: 1;
	display: block;
	opacity: 1;
}
.secretPassionFound .gems div.active.expanded span {
	background-color: #EE731B;
    width: 40px;
    height: 40px;
	opacity: 0;
}
.secretPassionFound .gems div .attention, .secretPassionFound .gems div .congrats {
    position: absolute;
    width: 250px;
    top: 28px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #fff;
    height: auto;
    border-radius: 20px;
    font-size: 12px;
    line-height: 16px;
    color: #333;
    padding: 8px 20px;
	display: none;
	text-transform: inherit;
}
.secretPassionFound .gems div .attention:before, .secretPassionFound .gems div .congrats:before {
    content: "";
    width: 20px;
    height: 20px;
    background-color: #fff;
    position: absolute;
    top: -4px;
    left: 115px;
    rotate: 45deg;
    z-index: -1;
}
.secretPassionFound .count{
	display: none;
}
p.occhiello {
    font-size: 18px;
    text-transform: uppercase;
    color: #fff;
    font-weight: 700;
    letter-spacing: .05rem;
}
.occhiello .lettera {
    display: inline-block;
}
.nav-but-wrap{ 
	position: relative;
	display: inline-block;
	float: right;
	padding-left: 15px;
	-webkit-transition : all 0.3s ease-out;
	-moz-transition : all 0.3s ease-out;
	-o-transition :all 0.3s ease-out;
	transition : all 0.3s ease-out;
}
.nav-but-wrap a{
	cursor: pointer;
	color: #fff;
}
.desktopMenu{
    display: flex;
    gap: 20px;
}
.desktopMenu p{
	cursor: pointer;
	margin: 0;
	-webkit-transition : all 300ms ease-out;
	-moz-transition : all 300ms ease-out;
	-o-transition :all 300ms ease-out;
	transition : all 300ms ease-out;
}
.desktopMenu p:hover{
	color: #fff;
}
.menu-icon {
	height: 20px;
	width: 20px;
	position: relative;
	z-index: 2;
	cursor: pointer;
	display: none;
}
.menu-icon__line {
	height: 2px;
	width: 20px;
	display: block;
	background-color: #fff;
	margin-bottom: 4px;
	cursor: pointer;
	-webkit-transition: background-color .5s ease, -webkit-transform .2s ease;
	transition: background-color .5s ease, -webkit-transform .2s ease;
	transition: transform .2s ease, background-color .5s ease;
	transition: transform .2s ease, background-color .5s ease, -webkit-transform .2s ease;
}
.menu-icon__line-left {
	-webkit-transition: all 200ms linear;
	-moz-transition: all 200ms linear;
	-o-transition: all 200ms linear;
	-ms-transition: all 200ms linear;
	transition: all 200ms linear;
}
.menu-icon__line-right {
	float: right;
	-webkit-transition: all 200ms linear;
	-moz-transition: all 200ms linear;
	-o-transition: all 200ms linear;
	-ms-transition: all 200ms linear;
	transition: all 200ms linear;
}

.nav {
	position: fixed;
	z-index: 98;
	width: 100%;
	height: 100%;
	visibility: hidden;
}
body.nav-active .nav{
	visibility: visible;
}
.nav:before, .nav:after {
	content: "";
	position: fixed;
	width: 100vw;
	height: 100vh;
	background: rgba(21, 21, 21, 0.6);
	z-index: -1;
	-webkit-transition: -webkit-transform cubic-bezier(0.77, 0, 0.175, 1) 0.8s;
	transition: -webkit-transform cubic-bezier(0.77, 0, 0.175, 1) 0.8s;
	transition: transform cubic-bezier(0.77, 0, 0.175, 1) 0.8s;
	transition: transform cubic-bezier(0.77, 0, 0.175, 1) 0.8s, -webkit-transform cubic-bezier(0.77, 0, 0.175, 1) 0.8s;
	-webkit-transform: translateX(0%) translateY(-100%);
          transform: translateX(0%) translateY(-100%);
}
.nav:after {
	background: rgba(0, 0, 0, 1);
	-webkit-transition-delay: 0s;
          transition-delay: 0s;
}
.nav:before {
	-webkit-transition-delay: .2s;
          transition-delay: .2s;
}
.nav__content {
	position: relative;
    visibility: hidden;
    width: 100%;
    height: 100%;
    overflow-y: scroll;
}
.nav__list {
	padding: 0;
	margin: 0;
	display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
	gap: 28px;
}
.nav__list-item {
	position: relative;
	display: block;
	-webkit-transition-delay: 0.8s;
          transition-delay: 0.8s;
	opacity: 0;
	text-align: center;
	color: #fff;
	overflow: hidden; 
	font-size: 2.5vh;
	font-weight: 700;
	-webkit-transform: translate(0%, 100%);
          transform: translate(0%, 100%);
	-webkit-transition: opacity .2s ease, -webkit-transform .3s ease;
	transition: opacity .2s ease, -webkit-transform .3s ease;
	transition: opacity .2s ease, transform .3s ease;
	transition: opacity .2s ease, transform .3s ease, -webkit-transform .3s ease;
	margin-top: 0;
	margin-bottom: 0;
	text-transform: uppercase;
	letter-spacing: .3rem;
}
body.nav-active .nav__content {
	visibility: visible;
}
body.nav-active .cd-header.is-fixed {
	-webkit-transform: translate3d(0, 100%, 0);
	-moz-transform: translate3d(0, 100%, 0);
	-ms-transform: translate3d(0, 100%, 0);
	-o-transform: translate3d(0, 100%, 0);
	transform: translate3d(0, 100%, 0);
}
body.nav-active .cd-header.is-visible {
}
body.nav-active .menu-icon__line {
	background-color: #fff;
	-webkit-transform: translate(-.5px, 0px) rotate(-45deg);
    transform: translate(-.5px, 0px) rotate(-45deg);
}
body.nav-active .menu-icon__line-left {
	width: 15px;
	-webkit-transform: translate(0px, 4px) rotate(45deg);
    transform: translate(-0, 4px) rotate(45deg);
}
body.nav-active .menu-icon__line-right {
	width: 15px;
	float: right;
	-webkit-transform: translate(-1px, -4px) rotate(45deg);
    transform: translate(-1px, -4px) rotate(45deg);
}
body.nav-active .nav {
	visibility: visible;
}
body.nav-active .nav:before, body.nav-active .nav:after {
	-webkit-transform: translateX(0%) translateY(0%);
          transform: translateX(0%) translateY(0%);
}
body.nav-active .nav:after {
	-webkit-transition-delay: .1s;
          transition-delay: .1s;
}
body.nav-active .nav:before {
	-webkit-transition-delay: 0s;
          transition-delay: 0s;
}
body.nav-active .nav__list-item {
	opacity: 1;
	-webkit-transform: translateX(0%);
          transform: translateX(0%);
	-webkit-transition: opacity .3s ease, color .3s ease, -webkit-transform .3s ease;
	transition: opacity .3s ease, color .3s ease, -webkit-transform .3s ease;
	transition: opacity .3s ease, transform .3s ease, color .3s ease;
	transition: opacity .3s ease, transform .3s ease, color .3s ease, -webkit-transform .3s ease;
}
body.nav-active .nav__list-item:nth-child(0) {
	-webkit-transition-delay: 0.4s;
          transition-delay: 0.4s;
}
body.nav-active .nav__list-item:nth-child(1) {
	-webkit-transition-delay: 0.5s;
          transition-delay: 0.5s;
}
body.nav-active .nav__list-item:nth-child(2) {
	-webkit-transition-delay: 0.6s;
          transition-delay: 0.6s;
}
body.nav-active .nav__list-item:nth-child(3) {
	-webkit-transition-delay: 0.7s;
          transition-delay: 0.7s;
}
body.nav-active .nav__list-item:nth-child(4) {
	-webkit-transition-delay: 0.8s;
          transition-delay: 0.8s;
}
body.nav-active .nav__list-item:nth-child(5) {
	-webkit-transition-delay: 0.9s;
          transition-delay: 0.9s;
}
body.nav-active .nav__list-item:nth-child(6) {
	-webkit-transition-delay: 1s;
          transition-delay: 1s;
}
body.nav-active .nav__list-item:nth-child(7) {
	-webkit-transition-delay: 1.1s;
          transition-delay: 1.1s;
}
body.nav-active .nav__list-item:nth-child(8) {
	-webkit-transition-delay: 1.2s;
          transition-delay: 1.2s;
}
body.nav-active .nav__list-item:nth-child(9) {
	-webkit-transition-delay: 1.3s;
          transition-delay: 1.3s;
}
body.nav-active .nav__list-item:nth-child(10) {
	-webkit-transition-delay: 1.4s;
          transition-delay: 1.4s;
}
.nav__list .sub-links{ 
	position: relative;
	padding: 0;
	margin: 0;
	margin-bottom: 20px;
    -webkit-transition: all 200ms linear;
    transition: all 200ms linear; 
}
.nav__list .sub-links li{ 
	padding: 0;
	margin: 0 auto;
	text-align: center;
	margin-top: 7px;
	margin-bottom: 7px;
	display: block;
}
.nav__list .sub-links li:first-child{ 
	margin-top: 0;
}
.nav__list .sub-links li a{ 
	color: rgba(255,255,255,.6);
	overflow: hidden;
	font-family: 'Roboto', sans-serif;
	font-weight: 400;
	font-size: 15px;
	line-height: 22px;
	letter-spacing: 2px;
	padding: 0;
	margin: 0 auto;
	text-align: center;
	max-width: 250px;
	display: block;
    -webkit-transition: all 200ms linear;
    transition: all 200ms linear; 
}
.nav__list .sub-links li a:after{ 
	display: none;
}
.nav__list .sub-links li a:hover{ 
	color: rgba(255,255,255,1);
}
.nav__list .sub-links li.active-nav a{ 
	color: rgba(255,255,255,1);
}

/* #Cursor
================================================== */
.cursor.cursor-dot.active-passion.starwars,
.cursor.cursor-dot.active-passion.matrix,
.cursor.cursor-dot.active-passion.milan,
.cursor.cursor-dot.active-passion.vanellope,
.cursor.cursor-dot.active-passion.siliconvalley,
.cursor.cursor-dot.active-passion.cocker,
.cursor.cursor-dot.active-passion.bttf {
	opacity: 0;
}
.cursor-shadow.active-passion.starwars,
.cursor-shadow.active-passion.matrix,
.cursor-shadow.active-passion.milan,
.cursor-shadow.active-passion.vanellope,
.cursor-shadow.active-passion.siliconvalley,
.cursor-shadow.active-passion.cocker,
.cursor-shadow.active-passion.bttf {
	--size: 160px;
	border-color: rgba(255,255,255, 0);
	border-width: 0;
	background-color: transparent;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	z-index: 99;
	mix-blend-mode: normal;
}
.cursor-shadow.active-passion:after{
	content: "";
	width: max-content;
	padding: 4px 16px;
	font-size: 12px;
	background-color: #EE731B;
	color: #fff;
	display: block;
	position: absolute;
	bottom: -28px;
	left: 50%;
	rotate: -2deg;
	transform: translateX(-50%);
	border-radius: 20px;
}
/* starwars */
.cursor-shadow.active-passion.starwars {
	background-image: url('../img/gif/starwars.gif');
}
.cursor-shadow.active-passion.starwars:after{
	content: "Yes, I have a lightsaber at home!";
}
/* matrix */
.cursor-shadow.active-passion.matrix {
	background-image: url('../img/gif/matrix.gif');
}
.cursor-shadow.active-passion.matrix:after{
	content: "I took the red pill";
}
/* milan */
.cursor-shadow.active-passion.milan {
	background-image: url('../img/gif/milan.gif');
}
.cursor-shadow.active-passion.milan:after{
	content: "I support the best team in the world!";
}
/* vanellope */
.cursor-shadow.active-passion.vanellope {
	background-image: url('../img/gif/vanellope.gif');
}
.cursor-shadow.active-passion.vanellope:after{
	content: "I like Disney movies!";
}
/* silicon valley */
.cursor-shadow.active-passion.siliconvalley {
	background-image: url('../img/gif/siliconvalley2.gif');
}
.cursor-shadow.active-passion.siliconvalley:after{
	content: "My favorite TV Series!";
}
/* cocker */
.cursor-shadow.active-passion.cocker {
	background-image: url('../img/gif/cocker.gif');
}
.cursor-shadow.active-passion.cocker:after{
	content: "I have a dog called Cookie";
}
/* bttf */
.cursor-shadow.active-passion.bttf {
	background-image: url('../img/gif/bttf.gif');
}
.cursor-shadow.active-passion.bttf:after{
	content: "88 MPH! Great Scott!";
}

.magic {
	display: inline-block;
	position: relative;
	cursor: pointer;
	z-index: 2;
}
.magic span, .magic img{
	cursor: pointer;
}
.section.intro {
    height: 100vh;
}

/* #Glitch
================================================== */
.magic span{
	display: none;
}
.magic.glitch span{
	display: block;
}

:root {
  --f-size: 15;
  --f-unit: 1vmin;
  --f: calc(var(--f-size) * var(--f-unit));
  --bg: #080808;
}

.glitch {
	flex: 1;
	margin: auto;
	text-align: center;
	transform: scaleX(var(--scale, 1));
	/*animation: glitch-p 11s infinite alternate;*/
	display: inline-block;
}

span.glitch::before, span.glitch::after {
  --top: 0;
  --left: 0;
  --v-height: 30%;
  --n-tenth: calc(var(--f-size) * .1 * var(--top));
  --t-cut: calc(var(--n-tenth) / var(--f-size) * 100%);
  --b-cut: calc(var(--t-cut) + var(--v-height));
  content: attr(data-text);
  position: absolute;
  width: 100%;
  left: 0;
  text-align: center;
  transform: translateX(calc(var(--left) * 100%));
  filter: drop-shadow(0 0 transparent);
  text-shadow: calc(var(--left) * -3em) 0 0.02em lime, calc(var(--left) * -6em) 0 0.02em #ff00e1;
  /*background-color: var(--bg);*/
  clip-path: polygon(0% var(--t-cut), 100% var(--t-cut), 100% var(--b-cut), 0% var(--b-cut));
}
span.glitch::before {
  animation: glitch-b 1.7s infinite alternate-reverse;
}
span.glitch::after {
  animation: glitch-a 3.1s infinite alternate;
}

@keyframes glitch-p {
  17% {
    --scale: .87;
  }
  31% {
    --scale: 1.1;
  }
  37% {
    --scale: 1.3;
  }
  47% {
    --scale: .91;
  }
  87% {
    --scale: 1;
  }
}
@keyframes glitch-a {
  10%,30%,50%,70%,90% {
    --top: 0;
    --left: 0;
  }
  0% {
    --v-height: 15%;
  }
  20% {
    --left: .005;
  }
  40% {
    --left: .01;
    --v-height: 20%;
    --top: 3;
  }
  60% {
    --left: .03;
    --v-height: 25%;
    --top: 6;
  }
  80% {
    --left: .07;
    --v-height: 5%;
    --top: 8;
  }
  100% {
    --left: .083;
    --v-height: 30%;
    --top: 1;
  }
}
@keyframes glitch-b {
  10%,30%,50%,70%,90% {
    --top: 0;
    --left: 0;
  }
  0% {
    --v-height: 15%;
    --top: 10;
  }
  20% {
    --left: -.005;
  }
  40% {
    --left: -.01;
    --v-height: 17%;
    --top: 3;
  }
  60% {
    --left: -.03;
    --v-height: 35%;
    --top: 6;
  }
  80% {
    --left: -.07;
    --v-height: 5%;
    --top: 8;
  }
  100% {
    --left: -.083;
    --v-height: 30%;
    --top: 1;
  }
}

/* #Works
================================================== */
.works .transformer{
	position: relative;
    background-color: red;
    width: 100%;
    height: 100%;
}
.works .containerDevice{
	position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    align-content: center;
    justify-content: center;
    flex-wrap: wrap;
    z-index: 2;
}
.works .projectInfo{
	position: sticky;
	top: 0;
	min-height: 100vh;
}
.works .controller div{
	min-height: 100vh;
}
.works .device.mob{
	position: absolute;
    background-color: #B9B9B9;
    border-radius: 40px;
    margin: 0 auto;
    overflow: visible;
    width: 300px;
    height: 645px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
	transition: all 500ms ease-in-out;
}
.works .device .screen{
	position: absolute;
	opacity: 0;
	transition: all 250ms ease-in-out;
	padding: 2px;
}
.works .device.desk .screen{
	height: -webkit-fill-available;
    padding: 0;
}
.works .device.desk .screen img{
	border-radius: 0;
    object-position: left top;
}
.works .device .screen.active{
	opacity: 1;
	transition: all 250ms ease-in-out;
}
.works .device .screen img{
	max-width: 100%;
	height: auto;
	border-radius: 40px;
}
.screen-economia .screen{
	transition: all 250ms ease-in-out;
	opacity: 1;
}
.works .device.desk{
	position: absolute;
    background-color: #B9B9B9;
    border-radius: 8px;
    margin: 0 auto;
    overflow: hidden;
    width: 1024px;
    height: 645px;
    transition: all 500ms ease-in-out;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}
.works .device.desk .topBarBrowser{
	position: relative;
    width: 100%;
    height: 32px;
    background-color: #fff;
    border-bottom: 1px solid #949494;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    display: flex;
    gap: 8px;
    align-items: center;
    padding: 12px;
}
.works .device.desk .topBarBrowser div{
	width: 12px;
	height: 12px;
	border-radius: 50%;
}
.works .device.desk .topBarBrowser div:nth-child(1){
	background-color: #FF6058;
}
.works .device.desk .topBarBrowser div:nth-child(2){
	background-color: #FFBF2E;
}
.works .device.desk .topBarBrowser div:nth-child(3){
	background-color: #2CCB40;
}
.works .device.desk .contentBrowser{
	border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
	background-color: #fff;
	overflow: hidden;
	height: 613px;
}
.contentBrowser img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
}
.works .projectInfo{
	display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
	z-index: 1;
}
.projectInfo h3 {
    font-weight: 900;
	font-size: 52px;
}
.projectInfo p {
    font-size: 22px;
    line-height: 32px;
	margin: 0;
}
.projectInfo .tags {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
	gap: 12px;
	margin: 12px 0 24px;
}
.projectInfo .tags div {
    font-size: 12px;
    font-weight: 700;
    border: 1px solid #fff;
    border-radius: 20px;
    padding: 4px 16px;
    text-transform: uppercase;
}
.projectInfo .tags div.primary{
	border-color: #EE731B;
	color: #EE731B;
}
.projectInfo .accordion-item{
	background-color: transparent;
	border: none!important;
	margin-bottom: 20px;
}
.projectInfo .accordion-item .accordion-button{
	font-weight: 800;
    font-size: 16px;
    background-color: transparent;
    color: #fff;
	padding: 0;
	margin-bottom: 8px;
	pointer-events: none;
}
.projectInfo .accordion-item .accordion-button.collapsed{
	opacity: .15;
}
.projectInfo .accordion-item .accordion-button::after{
	display: none;
}
.projectInfo .accordion-item .accordion-body{
	padding: 0;
	font-size: 20px;
    line-height: 30px;
}
.accordion-button::after{
	background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>");
}
.accordion-button:not(.collapsed)::after{
	background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>");
}
.works .carousel-indicators{
	display: none;
}

.parall{
	box-shadow: 0 8px 16px rgba(0, 0, 0, .32);
	overflow: hidden;
	z-index: 2;
	border: 2px solid #B9B9B9;
	border-radius: 20px;
	position: absolute;
}
.works .controller div{
	position: relative;
}
.iconApp.parall{
    width: 120px;
    top: 0;
    left: calc(50vw);
    height: 120px;
    min-height: auto !important;
    position: absolute !important;
}
.blogPost.parall {
    width: 422px;
    height: 130px;
    min-height: auto !important;
    top: 50%;
}
.blogPost.parall img {
    max-width: 100%;
    border-radius: 0!important;
}
.rimeController.rime1 {
    /*background-color: rgba(255, 255, 255, .06);*/
}
.blogPost01{
	right: 40px;
	top: 35%;
}
.scrittona {
    position: absolute;
    font-size: 100vh;
    width: max-content;
    z-index: -1;
    opacity: .05;
    font-weight: 900;
    text-transform: uppercase;
    transition: left 0.3s linear;
}

/* #Cookie
================================================== */
.cookiePopup {
    position: fixed;
    bottom: 32px;
    right: 32px;
    background-color: #fff;
    border-radius: 12px;
    font-size: 14px;
    line-height: 20px;
    color: #0F0F0F;
    max-width: 400px;
    z-index: 99;
}
.cookiePopup:before {
    content: "";
    position: absolute;
    width: calc(100% + 16px);
    height: calc(100% + 16px);
    background-color: rgba(255, 255, 255, .32);
    border-radius: 12px;
    top: -8px;
    left: -8px;
    z-index: -1;
    box-shadow: 0 0 24px rgba(0, 0, 0, .24);
}
.cookieTop {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 20px;
    padding: 20px;
}
.cookieTop p, .cookieTop p a{
	color: #6F6F6F;
}
.cookieTop b{
	font-size: 22px;
    line-height: 22px;
	font-weight: 700;
	display: block;
	color: #0F0F0F;
	margin-bottom: 4px;
}
.cookieBottom {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    background-color: #E4E7EB;
    gap: 1px;
    border-top: 1px solid #E4E7EB;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
    overflow: hidden;
    font-size: 18px;
    line-height: 18px;
}
.cookieButtons {
    width: 50%;
    text-align: center;
    background-color: #fff;
    padding: 20px;
    cursor: pointer;
}
.cookieButtons p{
	cursor: pointer;
	margin: 0;
	opacity: .7;
}
.cookieButtons:hover p{
	opacity: 1;
}

/* #Footer
================================================== */
.social-wrap.on-footer{ 
	position: relative;
	bottom: auto;
	right: auto;
	padding-right: 45px;
	padding-top: 10px;
	display: inline-block;
	color: #c4c3ca;
	float: right;
	padding-top: 0;
}
.social-wrap.on-footer:before{ 
	top: 0;
}
.social-wrap ul{ 
	top: -145px;
}
.social-wrap.on-footer ul a{ 
	background-color: rgba(32,32,32,32.8);
	box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.8);
}
.social-wrap.on-footer ul a:hover{ 
	background-color: rgba(42,42,42,.8);
}

.footer p{ 
	margin: 0;
	padding: 0;
	line-height: 20px;
	font-weight: 400;
	font-size: 13px;
	letter-spacing: 2px;
}
.footer a{ 
	color: #ebebeb;
	cursor: pionter;
}
.footer a:hover{ 
	color: #fff;
}

/* #Skills
================================================== */
.skills{
	overflow: hidden;
    font-size: 22px;
    color: #fff;
}
.skills .accordion-item{
	background-color: transparent;
	border-bottom: 1px solid #B9B9B9;
}
.accordion-flush .accordion-item:last-child{
	border-bottom: 1px solid #B9B9B9;
}
.skills .accordion-button{
	background-color: transparent;
	color: #fff;
	padding: 1rem 0;
	font-size: 22px;
	font-weight: 600;
}
.skills .accordion-button:focus{
	outline:0;
	border-color: #B9B9B9;
	box-shadow: none;
}
.skills .accordion-body {
    padding: 0 0 1rem;
    color: #B9B9B9;
}

/* #Tools
================================================== */
.scroller {
	max-width: 100%;
}

.scroller__inner {
	display: flex;
	flex-wrap: wrap;
}

.scroller[data-animated="true"] {
	overflow: hidden;
}

.scroller[data-animated="true"] .scroller__inner {
	width: -webkit-max-content;
	width: -moz-max-content;
	width: max-content;
	flex-wrap: nowrap;
	-webkit-animation: scroll var(--_animation-duration, 80s)
		var(--_animation-direction, forwards) linear infinite;
			animation: scroll var(--_animation-duration, 80s)
		var(--_animation-direction, forwards) linear infinite;
}

.scroller[data-direction="right"] {
	--_animation-direction: reverse;
}

.scroller[data-direction="left"] {
	--_animation-direction: forwards;
}
.scroller .logoContainer{
	width: 280px;
    display: flex;
    justify-content: center;
    align-items: center;
}

@-webkit-keyframes scroll {
	to {
		transform: translate(calc(-50% - 0.5rem));
	}
}

@keyframes scroll {
	to {
		transform: translate(calc(-50% - 0.5rem));
	}
}

/* #Confetti
================================================== */
@keyframes confetti-slow {
	0% {
		transform: translate3d(0, 0, 0) rotateX(0) rotateY(0);
	}
	100% {
		transform: translate3d(25px, 105vh, 0) rotateX(360deg) rotateY(180deg);
	}
}
@keyframes confetti-medium {
	0% {
		transform: translate3d(0, 0, 0) rotateX(0) rotateY(0);
	}
	100% {
		transform: translate3d(100px, 105vh, 0) rotateX(100deg) rotateY(360deg);
	}
}
@keyframes confetti-fast {
	0% {
		transform: translate3d(0, 0, 0) rotateX(0) rotateY(0);
	}
	100% {
		transform: translate3d(-50px, 105vh, 0) rotateX(10deg) rotateY(250deg);
	}
}

.confetti-container {
	perspective: 700px;
	position: fixed;
	overflow: hidden;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: -1;
}
.confetti {
	position: absolute;
	z-index: 1;
	top: -10px;
	border-radius: 0%;
}
.confetti--animation-slow {
	animation: confetti-slow 2.25s linear 1 forwards;
}
.confetti--animation-medium {
	animation: confetti-medium 1.75s linear 1 forwards;
}
.confetti--animation-fast {
	animation: confetti-fast 1.25s linear 1 forwards;
}

/* intro */
.section.intro{
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.cookie-policy strong{
	font-weight: 900;
	font-size: 17px;
}
.cookie-policy a{
	color: #fff;
}

/* #Media
================================================== */

@media (max-width: 1500px) { 
}

@media (max-width: 1300px) {
	
}

@media (max-width: 1199px) { 
	* {
		cursor: auto;
	}
	.cursor {
		display: none;
	}
	.scroll-to-top{
		/*background-color: #333;*/
		transform: translateY(0);
		top: auto;
		right: 4px;
		bottom: 20px;
		background-size: 35px 35px;
		height: 35px;
	}
	.scroll-to-top:after{
		display: none;
	}
	.project-link-wrap p{
		font-size: 60px;
		line-height: 40px;
	}
	.project-link-wrap h4{
		font-size: 1.6rem;
	}
	.project-link-wrap.on-contact p{
		font-size: 40px;
		line-height: 30px;
	}
}

@media (max-width: 991px) { 
	.padding-page-top {
		padding-top: 170px;
	}
}

@media (max-width: 1024px) {
	.cursor-shadow.mobActive{
		position: fixed;
		top: 50% !important;
		left: 50% !important;
		display: block!important;
	}
	.mobOverlay{
		position: fixed;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, .8);
		top: 0;
		left: 0;
		display: none;
		opacity: 0;
		-webkit-transition: all 250ms linear;
    	transition: all 250ms linear;
	}
	.mobOverlay.active{
		opacity: 1;
		-webkit-transition: all 250ms linear;
    	transition: all 250ms linear;
	}
	/* logo */
	.header-wrapper{
		justify-content: center;
	}
	.logo-wrap img{
		height: 48px;
	}
	.nav-but-wrap{
		position: absolute;
	}
	.nav-but-wrap{
		position: absolute;
		padding: 0;
		margin: 0;
		right: 32px;
	}
	.menu-icon{
		display: block;
	}
	.desktopMenu{
		display: none;
	}
	
	/* passions */
	.secretPassionFound{
		left: 32px;
    	transform: translateY(-50%);
	}
	.secretPassionFound p{
		line-height: 14px;
		text-align: left;
		display: inline-block;
	}
	.secretPassionFound p br.mob{
		display: block;
	}
	.secretPassionFound .gems{
		display: inline-block;
		margin-left: -8px;
	}
	.secretPassionFound .gems div{
		display: none;
	}
	.secretPassionFound .gems div.mobVisible{
		display: block;
	}
	.secretPassionFound .gems div .attention, .secretPassionFound .gems div .congrats{
		left: -48px;
    	transform: none;
	}
	.secretPassionFound .gems div .attention:before, .secretPassionFound .gems div .congrats:before{
		left: 42px;
	}
	.secretPassionFound .count{
		display: inline-block;
		font-size: 11px;
		font-weight: 600;
	}
	/* works */
	.works .device .screen img{
		height: auto;
	}
}
@media (min-width: 769px) {
	.works .device .screen{
	    display: inherit;
	}
	.projectInfo .accordion-item .accordion-body {
	    padding-right: 32px;
	}
}
@media (max-width: 768px) {
	.section-title-wrap h1, .section-title-wrap h3{
		font-size: 3.2rem;
	}
	.animsition, .animsition-overlay{
		overflow-x: hidden;
	}
	/* works */
	.projectInfo h3{
		font-size: 36px;
	}
	.projectInfo .accordion-item .accordion-body{
		font-size: 16px;
    	line-height: 26px;
	}
	.works .device.mob{
		width: 240px;
    	height: 515px;
		border-radius: 28px;
		position: relative;
		top: inherit;
		transform: none;
		left: inherit;
	}
	.works .device .screen img{
		border-radius: 28px;
	}
	.works .controller div{
		display: none;
	}
	.works .accordion.accordion-flush{
		display: flex;
		width: calc(100vw);
		gap: 32px;
		overflow-x: scroll;
		margin-left: -32px;
		padding-left: 32px;
		padding-right: 32px;
	}
	.works .projectInfo .accordion-item{
		max-width: 70vw;
		min-width: 70vw;
	}
	.works .accordion-flush .accordion-collapse{
		display: block;
	}
	.works .projectInfo .accordion-item .accordion-button.collapsed{
		opacity: 1;
	}
	.works .device.desk .topBarBrowser{
		height: 20px;
	}
	.works .device.desk .topBarBrowser div{
		width: 8px;
    	height: 8px;
	}
	.scroll-to-bottom{
		left: 0;
		width: 28px;
	}
	.scroll-to-bottom p{
		left: -70px;
	}
	.works .projectInfo{
		min-height: auto;
	}
	.works .device.desk{
		width: 544px;
		height: auto;
		position: relative;
		top: inherit;
		transform: none;
		left: inherit;
		overflow: visible;
		background-color: transparent;
	}
	.works .containerDevice{
		height: auto;
		position: relative;
		top: inherit;
		display: block;
		margin-top: 32px;
	}
	.projectInfo .tags{
		gap: 8px;
		width: calc(100vw);
        overflow-x: scroll;
        margin-left: -32px;
        padding-left: 32px;
        padding-right: 32px;
	}
	.projectInfo .tags div{
	    min-width: fit-content;
	}
	.works .device .screen{
		opacity: 1;
	}
	.works .device.desk .contentBrowser{
		height: 340px;
		width: 544px;
	}
	.carousel-indicators{
		bottom: 0;
		padding: 0;
    	margin-right: 0;
		margin-bottom: 0;
		margin-left: 0;
		gap: 8px;
		position: relative;
		margin-top: 16px;
	}
	.carousel-indicators [data-bs-target]{
		width: 8px;
		height: 8px;
		border-radius: 50%;
		margin: 0;
		border: none;
	}
	.works .carousel-indicators{
		display: flex;
		width: 100%;
	}
	.scroller .logoContainer{
		width: 180px;
	}
	.col-md-6{
		width: 100%;
	}
	.works .device .screen{
		position: relative;
	}
	.works .device.mob{
		overflow: hidden;
	}
	.scrittona{
		display: none;
	}
}

@media (max-width: 575px) {
	
	/* logo */
	.section{
		overflow: hidden;
	}
	.section-title-wrap h1 br{
		display: none;
	}
	.section-title-wrap h1 br.mob{
		display: block;
	}
	.section-title-wrap h1, .section-title-wrap h3{
		font-size: 2.2rem;
	}
	/* skills*/
	.accordion-header{
		font-size: 24px;
		line-height: 24px;
	}
	.skills .accordion-body{
		font-size: 18px;
		line-height: 28px;
	}

	.lead{
		font-size: 1.2rem;
		line-height: 1.7rem;
	}
	.lead br{
		display: none;
	}
	.container{
		padding-left: 32px;
    	padding-right: 32px;
	}
	h4{
		font-size: 24px;
		line-height: 34px;
	}
	p.occhiello{
		font-size: 14px;
	}
	.lead{
		font-size: 18px;
    	line-height: 28px;
	}
	.tools .row, .tools .col-md-12 {
		padding: 0 !important;
	}
	.works .carousel-indicators{
		display: flex;
		width: calc(100vw - 64px);
	}
	/* cookie */
	.cookiePopup{
		width: calc(100% - 32px);
		right: 50%;
		transform: translateX(50%);
	}
	.cookieTop{
		flex-direction: column;
		gap: 8px;
	}
	.cookieTop img {
	    max-width: 36px;
	}
	.cookieTop b{
		font-size: 18px;
    	line-height: 18px;
	}
	.cookieBottom{
		font-size: 16px;
    	line-height: 16px;
	}
	.cookieButtons{
		padding: 17px;
	}
}