@charset "utf-8";

*{padding: 0; margin: 0;}

body {margin: 0; padding: 0; background-color: black;
scroll-behavior: smooth;}

::-webkit-scrollbar {
  width: 5px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #000000; 
}
 
/* Handle */
::-webkit-scrollbar-thumb {
background: #9C9C9C;
border-radius: 6px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
	background: #B7B7B7; }

img {max-width: 100%;}

a {cursor: pointer;}
a:hover {color: yellow;}

.loader{
	position: fixed;

	min-width: 100%;
	min-height: 100%;
	background-color: black;
	width: auto; height: auto;
	z-index: 500;
	background-image: url("../img/Loader.gif");
	background-size: auto;
	background-position: center;
	background-repeat: no-repeat;
	pointer-events: none;
}

.zoomin {
	transition: 0.8s;
    transform: scale(1.5); /* Ingrandisce il loader */
    opacity: 0;           /* Lo rende trasparente */
    pointer-events: none; /* Evita l'interazione */
}

.fullscreen_video {
	position: fixed;
    overflow: hidden;
    top: 50%;
    left: 50%;
    min-width: 125%; /*modificato da 100%*/
    min-height: 125%; /*modificato da 100%*/
	max-width: 100%;
	display: block;
    width: auto;
    height: auto;
	transition: 0.4s;
    transform: translateX(-50%) translateY(-50%);
    z-index: -1;
	opacity: 0;
	}

.opacity {opacity: 1!important;}

.fullscreen_mobile {
	position: fixed;
    overflow: hidden;
    top: 50%;
    left: 50%;
    min-width: 125%; /*modificato da 100%*/
    min-height: 125%; /*modificato da 100%*/
	max-width: 100%;
	display: none;
    width: auto;
    height: auto;
	transition: 0.4s;
    transform: translateX(-50%) translateY(-50%);
    z-index: -1;
	/*
    min-width: 100%;
    min-height: 100%;
	max-width: 100%;
	*/
}

.homepagelogo {position: absolute;
	display: block;
	top: 45vh;
	left: 43vw;
	width: 14vw;
	height: 10%;
	/*sostituire con svg*/ background-image: url("../img/logo_01.png");
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	transition: 0.3s;}


.homepagelogo:hover{transform: scale(125%); transform-origin: center;}
.homepagelogo:hover + .opacity {opacity: 1;}

#wrapper {padding-top: 8vh;
	width: 100%;
	min-height: 40px;
	clear: both;}

h1 {width: auto;
	font-family: 'Bricolage Grotesque', sans-serif;
	color: white;
	font-size: 1em;
	transition: 0.3s;}

h1:hover {color: yellow;}

.align_left {text-align: left;}
.align_right {text-align: right;}
.align_center {text-align: center;}

header_mobile {z-index: 100;
	top: 0px;
	padding-top: 20px;
	margin-bottom: 2px;
	display: none;
	position: fixed;
	width: 100vw;
	height: 100px;
	background: linear-gradient(to bottom, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));}


.burger_navbar{z-index: 99;
	margin-left: 5vw;
	float: left;
	position: fixed;
	height: 30px;
	width: 30px;
	background-size: contain;
	background-repeat: no-repeat;
	fill: white;}

.burger_icon {background-image: url("../img/menu_FILL0_wght500_GRAD0_opsz24.png");}
.close_icon {background-image: url("../img/close_FILL0_wght500_GRAD0_opsz24.png");}

.list_container{padding-left: 5vw;
	padding-top: 20vh;
	z-index: 95;
	transform: translateY(-10vh) translate3d(0, 0, 0);
	width: 100vw;
	height: 110vh;
	position: absolute;
	background-color: black;}

@supports ((backdrop-filter: blur(2em)) or (-webkit-backdrop-filter: blur(2em))) {.list_container{
	background-color: rgba(255,255,255,0.00);
	backdrop-filter: grayscale(1) blur(2px) brightness(40%);
	-webkit-backdrop-filter: grayscale(1) blur(2px) brightness(40%);
	}}


h2 {width: auto;
	height: 8vh;
	font-family: 'Bricolage Grotesque', sans-serif;
	color: white;
	font-size: 1.1em;
	text-shadow: 1px 1px 2px #000000, -1px -1px 2px #000000 ;
	float: left;
	clear: left;}

h2:hover {color: yellow;}

header_desktop{display: block;
	z-index: 10;
	position: fixed;
	top: 0px;
	width: 100%;
	height: 80px;
	padding-top: 5px;
	background: linear-gradient(to bottom, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));}

header_desktop ul {width: 100vw;
  	list-style-type: none;
  	overflow: hidden;}

header_desktop ul li {display: block;
  	float: left;
	width: 15vw;
	padding-left: 2.5vw;
	padding-right: 2.5vw;}

header_desktop ul li a {text-decoration: none;}

.navbar_logo {float: left;
	/*sostituire con svg*/	background-image: url("../img/logo_01.png");
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	margin: -15px 38vw 0;
	width: 24%;
	transform: scale(80%);
	transform-origin: top;
	transition: 0.3s;
	height: 60px;}

.navbar_logo:hover {transform: scale(90%); transform-origin: top;}

#footer {z-index: 100;
	bottom: 0px;
	padding: 8px 2.5vw;
	display: block;
	position: fixed;
	width: 95vw;
	height: 40px;
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1));}

.icon_social {float: right;
	width: 40px;
	height: 40px;
	transition: 0.3s;
	margin: 0px 10px;
	background-size: contain;
	background-repeat: no-repeat;}

.icon_social:hover{transform: scale(116%);transform-origin: bottom;}

.ig_icon{background-image: url("../img/iconmonstr-instagram-13-240.png");}
.vimeo_icon {background-image: url("../img/iconmonstr-vimeo-2-240.png");}
.mail_icon {background-image: url("../img/iconmonstr-email-10-240.png");}

.active_link {color: yellow;}
.extra_margin_20 {margin-right: 20vw;}

.cover_box {clear: both;
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	display: flex;
	margin: 4vh 32.5vw 0;
	transition: 0.3s;
	z-index: -100;
	width: 35vw;
	height: auto;}

.cover_box:hover {transform: scale(102%); box-shadow: 0px 0px 4px 1px #fff; filter: none;} 
.cover_box:hover + .title_side {opacity: 1; letter-spacing: normal;}

.gallery_box {float: left;
	image-resolution: from-image;
	background-size: cover;
	background-repeat: no-repeat;
	min-height: 10px;
	display: flex;
	padding: 0.3% 0}

.gallery_100 {width: 100%;}
.gallery_50 {width: 50%;}

a img:hover{opacity: 0; transition: 0.2s;}

/* nuova implementazione webm vedi anche media query "a video" */
.cover_box video {opacity: 0;}
.cover_box video:hover{opacity: 1; transition: 0.2s;}



.mvcover_001 {background-image: url("../img/COVER_mp_straniero.jpg"); background-size: cover;}
.mvcover_002 {background-image: url("../img/COP GEOLIER SANREMO.jpg"); background-size: cover;}
.mvcover_003 {background-image: url("../img/COP TRAILER MP.jpg"); background-size: cover;}
.mvcover_004 {background-image: url("../img/mv_cover_lazza_cenere.jpg"); background-size: cover;}
.mvcover_005 {background-image: url("../img/mv_cover_ghali_sensazioneultra.jpg"); background-size: cover;}
.mvcover_006 {background-image: url("../img/mv_cover_blauer_paky.jpg"); background-size: cover;}
.mvcover_007 {background-image: url("../img/mv_cover_bonton_drillionaire_lazza_blanco_sfera.jpg"); background-size: cover;}
.mvcover_008 {background-image: url("../img/COP MP NON PARLARMI.png"); background-size: cover;}
.mvcover_009 {background-image: url("../img/mv_cover_geolier_money.jpg"); background-size: cover;}
.mvcover_010 {background-image: url("../img/mv_cover_capoplaza_albumtrailer.jpg"); background-size: cover;}
.mvcover_011 {background-image: url("../img/mv_cover_jlord_karlkaniflow.jpg"); background-size: cover;}
.mvcover_012 {background-image: url("../img/mv_cover_lavazza_gaiaerniamadamerkomisamuraijay.jpg"); background-size: cover;}
.mvcover_013 {background-image: url("../img/mv_cover_babygang_cella4.jpg"); background-size: cover;}
.mvcover_014 {background-image: url("../img/mv_cover_capoplaza_allenamento4.jpg"); background-size: cover;}
.mvcover_015 {background-image: url("../img/mv_cover_jlord_nomoneymorelove(albumtrailer).jpg"); background-size: cover;}
.mvcover_016 {background-image: url("../img/mv_cover_paky_nonscherzare.jpg"); background-size: cover;}
.mvcover_017 {background-image: url("../img/mv_cover_paky_boss.jpg"); background-size: cover;}
.mvcover_018 {background-image: url("../img/mv_cover_rozzi_paky.jpg"); background-size: cover;}
.mvcover_019 {background-image: url("../img/COP ADIDAS FIGC.jpg"); background-size: cover;}
.mvcover_020 {background-image: url("../img/adv_cover_timberland.jpg"); background-size: cover;}
.mvcover_021 {background-image: url("../img/COP PIAGGIO.jpg"); background-size: cover;}
.mvcover_022 {background-image: url("../img/adv_cover1_pumamilan.jpg"); background-size: cover;}
.mvcover_023 {background-image: url("../img/adv_cover2_ADIDASROMA.jpg"); background-size: cover;}
.mvcover_024 {background-image: url("../img/adv_cover3_COPERTINA_LAMBORGHINI.jpg"); background-size: cover;}
.mvcover_025 {background-image: url("../img/adv_cover4_sectornolim.jpg"); background-size: cover;}
.mvcover_026 {background-image: url("../img/adv_cover_romaticketing.jpg"); background-size: cover;}
.mvcover_027 {background-image: url("../img/adv_cover5_-RaybanRosevillain.jpg"); background-size: cover;}
.mvcover_028 {background-image: url("../img/adv_cover6_camparilab.jpg"); background-size: cover;}
.mvcover_029 {background-image: url("../img/Doc_cover_lazza_replay.jpg"); background-size: cover;}
.mvcover_030 {background-image: url("../img/doc_cover_2016.jpg"); background-size: cover;}
.mvcover_031 {background-image: url("../img/adv_cover_TIM.png"); background-size: cover;}
.mvcover_032 {background-image: url("../img/adv_cover_PUMAxFPF.jpg"); background-size: cover;}
.mvcover_033 {background-image: url("../img/adv_cover_Kidult.jpg"); background-size: cover;}
.mvcover_034 {background-image: url("../img/advcover_INFINITI_QX80 TEASER.jpg"); background-size: cover;}
.mvcover_035 {background-image: url("../img/advCOVER_PUMA WOMEN'S EURO CAMPAIGN '25.jpg"); background-size: cover;}
.mvcover_036 {background-image: url("../img/MV_COVER_RESIDUE.jpg"); background-size: cover;}
.mvcover_037 {background-image: url("../img/adv_cover_MOS KSA.jpg"); background-size: cover;}




.pcontainer {padding: 2.5%;
	width: 95%;
	margin: 0 0 18vh;
	float: left;}

p {font-family: 'Bricolage Grotesque', sans-serif;
	display: block;
	float: left;
	width: 45vw;
	text-align: left;
	font-size: 0.8em;
	line-height: 1.8em;
	color: white;
	font-weight: 300;}

.title_side {position: fixed;
	top: 35%;
	width: 100vw;
	height: 30vh;
	float: left;
	overflow: hidden;
	transition: 0.3s;
	opacity: 0;
	z-index: -30;
	display: flex;
	justify-content: center;
	align-items: center;
	letter-spacing:2px;}

h3 {width: 32.5vw;
	position: relative;
	display: block;
	float: left;
	font-size: 1.2em;
	color: white;
	font-weight: 800;
	text-align: center;
	font-family: 'Bricolage Grotesque', sans-serif;}

.title_box_full {width: 95vw;
	clear: both;
	margin: 10vh 2.5vw 2vh;}

.title_alt {width: 90vw;
	margin: 5vh 5vw 1vh;
	display: none;}

h4 {font-weight: 800;
	font-size: 2.6em;
	color: white;
	text-align: left;
	line-height: 1em;
	font-family: 'Bricolage Grotesque', sans-serif;}

h5 {font-weight: 600;
	margin-top: 10px;
	font-size: 1em;
	color: white;
	text-align: left;
	font-family: 'Bricolage Grotesque', sans-serif;}

.about_box_desktop{display: block; width: 45vw; float: left; margin: 18vh 0 0 2.5vw;}
.about_box_mobile{display: none;}


h6{font-family: 'Bricolage Grotesque', sans-serif; font-weight: 300; 
	overflow: hidden; font-size: 16px;
	line-height: 24px;
	color: white;}

h7{font-family: 'Bricolage Grotesque', sans-serif; 
	font-weight: 200; 
	font-size: 0.8em;
	text-align: center;
	line-height: 24px;
	display: none;
	color: white;}

.interact_txt_01 {font-weight: 700; color: black; background-color: white;}
.about_img_genral {position: fixed; right: 10%; top: 26%; width: 30%; height: 50%; opacity: 0; transition: 0.6s; background-size: contain; background-repeat: no-repeat;}
.about_img_01 {background-image: url("../img/FOTO ABOUT 1.jpg"); }
.about_img_02 {background-image: url("../img/GIF ABOUT 2.gif");}
.about_img_03 {background-image: url("../img/GIF ABOUT 3.gif");}

.interact_txt_01:hover {background-color: yellow;}
.interact_txt_01:hover + .about_img_genral {opacity: 1;}

.animated_element_slide_from_bot {animation-name: slide_from_bot; animation-duration: 1s; animation-delay: initial; animation-timing-function: ease-out;}

.animated_element_opacity {animation-name: opacity_appear; animation-duration: 1s; animation-delay: initial;  animation-timing-function: ease-out;}

.animated_element_opacity_slow {animation-name: opacity_appear_slow; animation-duration: 4s; animation-delay: initial;  animation-timing-function: ease-in-out;}

.animated_element_opacity_2_loader {animation-name: opacity_disappear_loader; animation-duration: 1.4s; animation-delay: initial; animation-fill-mode: forwards;   animation-timing-function: ease-out;}

.animated_element_slide_from_top{animation-name: slide_from_top; animation-duration: 1s; animation-delay: initial; animation-timing-function: ease-out;}

.animated_text {animation-name: text_animation; animation-duration: 1s; animation-delay: initial; animation-timing-function: ease-out;}



/*ANIMATIOS*/

@keyframes slide_from_top {0% {transform: translateY(-200%);}10% {transform: translateY(-200%);}100% {transform: translateY(0%)}}
@keyframes slide_from_bot {0% {transform: translateY(200%);}10% {transform: translateY(200%);}100%{transform: translateY(0%)}}
@keyframes opacity_appear {0% {opacity: 0;} 100% {opacity: 1;}}
@keyframes opacity_appear_slow {0% {opacity: 0; letter-spacing: 5px;} 50%{opacity: 0; } 100% {opacity: 1; letter-spacing: normal;}}
@keyframes opacity_disappear_loader {0% { opacity: 1; display: block;} 30%{opacity: 1;} 99%{opacity: 0; display: block;} 100%{opacity: 0; display: none;}}
@keyframes text_animation {0%{letter-spacing: 1px;opacity: 0;} 100% {letter-spacing: normal;opacity: 1;}}

/*RESPONSIVE*/

@media only screen and (max-width: 1234px){
	
	h7{display: block;}
	
	.loader{background-size: 70%;}
	
	header_desktop {display: none;}
	header_mobile{display: block;}
	
	.homepagelogo {width: 50%;top: 40vh;left: 25vw;}
	.cover_box {margin: 0 5vw; width: 90vw;}
	
	#footer {position: relative; display: none;}
	
	h1{font-size: 1em;}
	.fullscreen_video {display: none;}
	.fullscreen_mobile {display: block;}
	
	.gallery_50 {width: 100%;}
	h4 {font-size: 1.3em;}
	
	.about_box_desktop{display: none;}
	.about_box_mobile{display: block;}

	
	.title_alt {display: block;}
	.title_side {display: none;}
	
	.icon_social {float: left;
	width: 50px;
	height: 50px;
	transition: 0.3s;
	margin: 32vh 30px 0 0;
	background-size: contain;
	background-repeat: no-repeat;}
	
	.icon_social:hover {transform: scale(110%); transform-origin: left;}
	
	.pcontainer{padding: 5%; width: 90%;}
	p{width: 100%;}
	
	a img{opacity: 1;}
	a img:hover {opacity: 1;}
	.cover_box video {opacity: 0;}
	.cover_box video:hover {opacity: 0;}
	
}