@import url('https://fonts.googleapis.com/css2family=Lato:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=PT+Serif:ital,wght@0,400;0,700;1,400;1,700&display=swap');

html, body {
  overflow-x: hidden;
  margin: 0;
  padding: 0;
  font-family: 'Lato', sans-serif;
  color: #555; background:#000;
  -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}
a{ text-decoration:none; transition: all 200ms ease-out;color:#e1011a;}
a:hover{ color: #000}
a img{ border: 0}
h1 {
  font-family: 'Source Sans Pro', serif;
}
.transform{  -webkit-transition: all 300ms ease-out;  
    -moz-transition: all 300ms ease-out;  
    -o-transition: all 300ms ease-out;  
    -ms-transition: all 300ms ease-out;  
    transition: all 300ms ease-out;}
.transformSlow{  -webkit-transition: all 800ms ease-out;  
    -moz-transition: all 800ms ease-out;  
    -o-transition: all 800ms ease-out;  
    -ms-transition: all 800ms ease-out;  
    transition: all 800ms ease-out;}
.transformVerySlow{  -webkit-transition: all 1800ms ease-out;  
    -moz-transition: all 1800ms ease-out;  
    -o-transition: all 1800ms ease-out;  
    -ms-transition: all 1800ms ease-out;  
    transition: all 1800ms ease-out;
	-webkit-transition-delay: 1s; /* Safari */
    transition-delay: 1s;}
	
#container{ overflow-x:hidden}
.barba-container {
  position: relative;
}

header {
  position: relative; overflow: hidden;
  height: 100vh;
  width: 100%; padding-top:100px; box-sizing:border-box;
  background-size: cover;
  background-position: center center;
}

header h1 {
  position: absolute; font-size: 90px; margin: 0 auto;
  width: 100%;
  text-align: center;
  top: 40%;
  left: 50%;
  color: #fff;
  transform: translate(-50%, -50%);
  webkit-transform: translate(-50%, -50%);
  moz-transform: translate(-50%, -50%);
}
header h2{ color:#fff; font-size:1.99rem; max-width: 650px; margin: 0 auto; border-left: 2px solid #e10119;
position: absolute; font-weight: 400; z-index: 20; background: rgba(0,0,0,0.5); background: #e1011a; background: transparent; padding: 20px 20px;
  width: 50%;
  text-align: left;
  bottom: 20%;
  left: 7%;}
.img-header{position: absolute; font-weight: 400;  width: 60%; top: 230px;  right: 0%; height: 70%; object-fit: cover; border-radius: 50px 0 0 50px}
header .btn{ display: inline-block; margin: 20px 0 0 0; background: #e10119; color: #fff; font-size: 18px; border: 1px solid #e10119; padding: 10px 20px }
/*HEAD COMPACT*/
.compact #head{ height: 100px; 
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,000000+100&0.65+0,0+100;Neutral+Density */
background: -moz-linear-gradient(top,  rgba(0,0,0,0.80) 20%, rgba(0,0,0,0) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(0,0,0,0.80) 20%,rgba(0,0,0,0) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(0,0,0,0.80) 20%,rgba(0,0,0,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00000000',GradientType=0 ); /* IE6-9 */
}
.home .compact #back{}
.compact .menu-lang{ display: none }
.compact .menu-up{ top: 30px}

#head{ position:fixed; top:0; left:0; width:100%; z-index:33333; height:230px; transition: all 300ms ease-out; border-bottom: 0px solid #000; /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,000000+100&0.65+0,0+100;Neutral+Density */
background: -moz-linear-gradient(top,  rgba(0,0,0,0.75) 0%, rgba(0,0,0,0) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(0,0,0,0.75) 0%,rgba(0,0,0,0) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(0,0,0,0.75) 0%,rgba(0,0,0,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00000000',GradientType=0 ); /* IE6-9 */
}
#back{ width:420px; position:fixed; z-index:30001;  top:0px; left:40px; height:230px; height: 100%; background:transparent url(elementi/logo_positivo.svg) no-repeat center left; background-size:contain; cursor:pointer;  }
.menu-up{ position:fixed; top:90px; right:40px; z-index:30000}
.menu-up ul{ list-style:none; margin:0; padding:0}
.menu-up li{ display:inline-block; font-size: 0.9rem; text-transform: uppercase; margin-left: 10px}
.menu-up li a{ display:block; font-weight: 800; letter-spacing: 0.8px; padding:10px; color:#fff; border-bottom:2px solid transparent}
.menu-up li a:hover, .menu-up li a.active { color:#e1011a; border-color:#e1011a }
.menu-up li a.ticket, .compact.article .menu-up li a.ticket{ display:block; padding:10px 20px; color:#fff; background:#E8573B; margin: 0 20px 0 0; margin: 0 10px 0 0; 
box-shadow:0 0 10px rgba(0,0,0,0.3); border-radius:2px; animation: pulse 2s infinite;}

.menu-lang{ position:fixed; top:25px; right:50px; z-index:30000}
.menu-lang ul{ list-style:none; margin:0; padding:0}
.menu-lang li{ display:inline-block; vertical-align: bottom; margin-left:25px}
.menu-lang li a{ display:block; padding:10px 0; font-size: 12px; font-weight: 600; letter-spacing: 0.5px; color:#fff; text-transform: uppercase; transition: all 100ms ease-in;}
.menu-lang li.fesr{ padding: 0}
.menu-lang li.fesr a{ padding: 0}
.menu-lang li img{ max-height: 30px;}

/*variante light dell ahead*/
#head.light{ }
#head.light #back{}
#head.light .menu-up li a{ color:#000;}
#head.light .menu-up li a:hover, #head.light .menu-up li a.active { color:#e1011a;}
#head.light .navbar .navicon-line{ background-color: #000}

.navbar{ margin-top:15px; position: relative; display: none}
.navbar .menu-label{ position:absolute; bottom:-70px; right:30px; color:#fff; transform:translate(0%,0) rotate(90deg); -webkit-transform:translate(50%,0) rotate(90deg); -webkit-transform-origin:bottom center; transform-origin:bottom center; font-size: 15px; color: #fff; font-weight: 600; white-space: nowrap; letter-spacing: 2px; text-transform: uppercase;}
#toggle-sidemenu{}

#buy-ticket{ background:none;  text-align: center; margin:0px auto; position: fixed; top: 20px; z-index: 200; height: 50px; width: 100%}
#buy-ticket ul { margin: 0; padding: 0; list-style: none; text-align: right}
#buy-ticket ul li { display: inline-block; margin: 0 30px}
#buy-ticket ul li a{ color: #fff;  margin: 0; padding: 0; font-family: 'Bison'; line-height: 50px; font-weight: bold; font-size:25px; text-align: center }
#buy-ticket ul li.alert a{ color: red }


.pul{ text-align: center; padding: 20px 0}
.pul a{ padding:10px 20px; display: inline-block; color: #fff; background: transparent;  margin: 0 10px;}
.pul a.ticket{  color:#fff; background:#E8573B;  
box-shadow:0 0 10px rgba(0,0,0,0.3); border-radius:2px; animation: pulse 2s infinite;}
.pul a.ticket:hover{background:#fff; color:#E8573B }


p {
    font-family: 'PT Serif', serif;
  margin: 15px auto;
  width: 100%;
  max-width: 1000px;
  line-height: 1.7; font-size:20px; box-sizing: border-box
}

.container{ max-width: 2800px; margin: 0 auto; padding: 40px 0; color: #fff}
.container.light{ background-color: #fff; color: #000 }
.container .label{ text-align: center; font-size: 40px; padding: 10vh 20px 5vh 20px}
.container.banner{ padding: 0; height: 50vh }
.container.banner img{ width: 100%; height: 100%; object-fit: cover}
.container.photowall{ height: 70vh; background-repeat: no-repeat; background-size: cover; background-position: center center}
.titoletto{ text-align: center; color: #e1011a; font-size: 2rem; margin: 20px 0 20px 0; text-transform: uppercase}
.text-center{ text-align: center}

[off-canvas], #sidemenu{ background-color: #000; font-weight: 400; width:30%; min-width:250px; padding-top:10vh; border-left:1px solid #fff}
#sidemenu h2{ display:block; padding:0px; color:#fff; text-align:center; font-size:30px; margin:40px 0 10px 0; line-height:1em}
#sidemenu ul{ margin:0 0 10px 0; padding:0; list-style:none; text-align:center}
#sidemenu ul li{ margin:0 0 5px 0; }
#sidemenu ul li a{ display:block; padding:10px; color:#fff; text-align:center; font-size:30px; line-height:1em}
#sidemenu ul li a.active{ color: #fff}
#sidemenu ul li a:hover{ color:#fff }
#sidemenu ul.social { padding:20px 0}
#sidemenu ul.social li{ display:inline-block}
#sidemenu ul.social li a{ font-size:20px }
#sidemenu ul li a span{ background:#fff; vertical-align: bottom; color: #000; font-size: 0.8em; padding: 0.1em 0.2em; display: inline-block}

#company .titoletto{ text-transform: none}

#services{background-image:url(foto/FONDO_PAGINA_SERVIZI.jpg); background-position:0% bottom; background-repeat: no-repeat; background-size: 100%; min-height: 80vh}
#services .titoletto{ margin-bottom: 40px}
.service{ display: flex; flex-grow: 1;  justify-content: center;  flex-direction: column; min-height: 80vh; height: auto; padding: 0 10px}
.longform .service{ height: auto}
.service h2{ max-width: 1000px; margin: 0 auto 10px auto; width: 100%; color: #e1011a; border-bottom: 0px solid #e1011a; padding: 20px 0px; box-sizing: border-box; font-size: 2rem}
.service p{ padding: 0; max-width: 1000px}
.service a{margin: 0 auto 10px auto; max-width: 1000px; text-align: right; color: #000; width: 100%; font-weight: 700; text-decoration: underline}
.box-container{ display: flex; flex-direction: row; justify-content: center }
.box{ width: 25vw; height: 25vw; display: flex; justify-content: center; background: #e1011a; text-align: center; border-radius: 20px; margin: 0 10px; transition: all 0.2s ease;}
.box:hover{ box-shadow: 0 0 20px rgba(0,0,0,0.1); transform: scale(1)}
.box a{ color: #fff; font-size: 2rem; flex-grow: 1; font-weight: 800; display: flex; align-items: center; justify-content: center}
.service hr{ height: 1px; width: 100%; max-width: 1000px; margin: 20px auto; background-color: #e1011a; border: 0; }
.img-service{ width: 50%; height: 80vh; margin-left: -25%; float: left;}
.img-service img{ width: 100%; height: 100%; object-fit: contain}
#cybersecurity, #offensive{ overflow: hidden}
.img-service.float-right{ margin-left:0; margin-right: -25% }
.float-right{ float: right}

#project{ background-color: #ef7e1f}
#project .service h2, #project .service p{ color: #fff}

#storytelling .service h2, #storytelling .service p{ color: #fff}
#storytelling{ background-color: deepskyblue}

#territorio .service h2, #territorio .service p{ color: #fff}
#territorio{ background-color: #420622}

#sponsorizzazioni .service h2, #sponsorizzazioni .service p{ color: #fff}
#sponsorizzazioni{ background-color: #e1011a}

#logos h2, #logos p{ color: #fff}
#logos{ background-color: #e1011a; display: flex; align-items: center; flex-flow: wrap; justify-content: center; border-top: 1px solid #fff}
.logo-container{ text-align: center; font-size: 15px; width: 25%; max-width: 250px; }
.logo-container.fesr{ width: 100%; max-width: 400px; margin-top: 40px}
.logo-container img{ display: inline-block; max-width: 90%; max-height: 80px}
.logo-container a{ color: #fff; display: block; text-align: center; letter-spacing: 1px;  } 
#logos hr{ width: 100%; flex-basis: 100%; flex-grow: 3; background: none; border: 0; }

#careers{}
#careers .box-container{ margin: 30px auto 30px auto}
#careers .box{ background: #383b40; height: auto; margin-bottom: 30px; position: relative; flex-direction: column; color: #fff; justify-content: space-between; padding-bottom: 20px}
#careers .box p{ font-size: 19px; color: #fff }
#careers .box:after{ content: ''; display: block; position: absolute; bottom: -20px; height: 40px; width: 60%; left: 20%; background: #e1011a;}
.tag{ padding: 10px 20px; font-size: 19px; font-weight: 700; text-align: left; }
#careers h3{ font-size: 2rem; text-align: center; padding: 10px 20px; margin: 20px 0}

#contacts { padding: 0px 0px 0px 0px; background-color: #e1011a}
#contacts .service{ min-height: 0}
#contacts .label{ padding-top: 20px; padding-bottom: 0; margin-bottom: 0}
#contacts .titolo{ text-transform: uppercase; color: #e1011a; font-weight: 800; }
#contacts p{ text-align: center}
#contacts footer  a{ color: #000; text-decoration: underline}
#contacts a:hover{ color: #fff}
#contacts .service h2, #contacts .service p{ color: #fff; text-align: center}

footer{ text-align:left; padding:0 20px 20px 20px; border-top: 1px solid #fff}
footer p, .article footer p{ width:100%; font-size:15px; color:#fff; max-width:none; padding:20px; box-sizing:border-box }
footer p a:hover, .article footer p a:hover{ color: #fff }
.back{ float: right; font-size: 1.1rem; margin: 15px 0; font-weight: 700}
.back a{ display: inline-block; padding: 20px; color: #fff}
.back a:hover{ background-color: #fff; color: #e1011a}
/*CSS PER VIDEO*/
#my_video { position: absolute; left: 0px; top: 0px; }

.videoWall { 
  position: absolute;
  bottom: 2px; 
  /*left: 0%;*/ 
  min-width: 100%; 
  min-height: 100%; 
  width: auto; 
  height: auto; 
  z-index: 10; 
  overflow: hidden;
  object-fit:fill;
}

.clearer{ clear:both; height:0px}

.particle-background{ position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100vh}
/*GRID STYLE*/
.grid{ width: 100%; max-width: 1200px; margin: 0 auto;}
.grid-container{ padding: 0 80px}
.grid-item{  padding:0px;  z-index: 10; box-sizing: border-box; color: #fff; min-height: 300px; background-color:none}
.grid-sizer, .grid-item { width: 33.3%; }
/* 2 columns */
.grid-item--width2 { width: 66.6%; }

.grid-item figure{ padding: 0; margin: 0; width: 100% }
.grid-item figure img{ display: block; width: 100%}
.grid-item h2{ margin: 0; padding: 10px; font-size: 16px; line-height: 1.3em }
.grid-item a h2{ color: #666; text-decoration: none; transition: all 200ms ease-out; font-weight: 200}
.grid-item-container{ padding: 10px; transition: all 300ms ease-out; border: 1px solid transparent; margin: 20px 5px }
.grid-item:hover { z-index: 200}
.grid-item:hover a h2{ color: #fff;}
.grid-item:hover .grid-item-container{ transform: scale(1.2);  background: #000; border: 1px solid transparent; box-shadow: 0 0 80px rgba(0,0,0,1)}
.button-group{ text-align: center; margin: 20px 0 40px 0}
.button-group .button{ display:inline-block; padding: 10px; background: none; font-size: 20px; color: #fff; }
#sidemenu .button-group .button{ display:inline-block; padding: 5px; background: none; font-size: 12px; color: #fff; }
.grid-item:hover .tag-list{ top: 10px; opacity: 1; width: auto}
.tag-list{ text-align: left; padding: 10px; position: absolute; top: 30px; left: 10px;  overflow: hidden; max-width: 100%; opacity: 0; transition: all 200ms ease-out;font-size: 11px; text-transform: uppercase ;
transform:translate(0%,0) rotate(0deg); -webkit-transform:translate(0%,0) rotate(0deg); -webkit-transform-origin:left bottom; transform-origin:left bottom; }
.article section.content .tag-list{ opacity: 1; position: relative; top: auto; left: auto; max-width: 700px; margin: 20px auto; padding: 0 20px; box-sizing: border-box; font-size: 14px }
.tag-list a{ display: inline-block; padding:2px 5px; margin: 0 0 2px 0; border: 0px solid #fff; color:#fff; background: #000}
.tag-list a.author{ font-weight: 800 }
/*ANIMAZIONE SCROLL DOWN*/
@-webkit-keyframes ani-mouse {
	0% {
	opacity: 1;
	top: 29%;
	}
	15% {
	opacity: 1;
	top: 50%;
	}
	50% {
	opacity: 0;
	top: 50%;
	}
	100% {
	opacity: 0;
	top: 29%;
	}
}
@-moz-keyframes ani-mouse {
	0% {
	opacity: 1;
	top: 29%;
	}
	15% {
	opacity: 1;
	top: 50%;
	}
	50% {
	opacity: 0;
	top: 50%;
	}
	100% {
	opacity: 0;
	top: 29%;
	}
}
@keyframes ani-mouse {
	0% {
	opacity: 1;
	top: 29%;
	}
	15% {
	opacity: 1;
	top: 50%;
	}
	50% {
	opacity: 0;
	top: 50%;
	}
	100% {
	opacity: 0;
	top: 29%;
	}
}
 .scroll-btn {
	display: block;
	position: absolute; 
	left: 0;
	right: 0;
	bottom:20px;
	text-align: center; z-index:3001
}
.scroll-btn > * {
	display: inline-block;
	line-height: 18px;
	font-size: 13px;
	font-weight: normal;
	color: #7f8c8d;
	color: #ffffff;
	letter-spacing: 2px;
}
.scroll-btn p {
  margin-left: 0px; padding:0; margin: 0;
}
.scroll-btn > *:hover,
.scroll-btn > *:focus,
.scroll-btn > *.active {
	color: rgb(167,25,48);
}
.scroll-btn > *:hover,
.scroll-btn > *:focus,
.scroll-btn > *:active,
.scroll-btn > *.active {
	opacity: 0.8;
	filter: alpha(opacity=80);
}
.scroll-btn .mouse {
	position: relative;
	display: block;
	width: 35px;
	height: 55px;
	margin: 0 auto 20px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	border: 3px solid rgb(277,277,277);
	border-radius: 23px;
}
.scroll-btn .mouse > * {
	position: absolute;
	display: block;
	top: 29%;
	left: 50%;
	width: 8px;
	height: 8px;
	margin: -4px 0 0 -4px;
	background: white;
	border-radius: 50%;
	-webkit-animation: ani-mouse 2.5s linear infinite;
	-moz-animation: ani-mouse 2.5s linear infinite;
	animation: ani-mouse 2.5s linear infinite;
}

/*STILI PERSONALIZZATI PER IL MODAL*/
.blocker { z-index: 9000000}
.modal p{ font-size: 14px}
.modal{ min-width: 800px}
.modal .btn.close{ display: inline-block; padding: 10px 20px; border-radius: 5px; background: #333; color: #fff }

@media(min-width:1600px){
    #back{ width: 500px}
   
}
@media(min-width:1300px){
   
}
@media(max-width:1400px){
     .service{ padding-left: 100px}
}
@media(max-width:1200px){
    
	header { height:65vh}
    .home header { height:100vh}
	header .logo-mbs{ height:65vh; margin:58px auto 0px auto}
    #head .logo-mbs{ top:30px; height: 140px }
	
.theEvent.insta, .insta{ margin-top:15vh}
    
    
	  
	}
@media(max-width:1024px){
    .menu-up .main-nav{ display: none}
    .navbar{display: block}
    .img-service{ display: none}
	header h2{ width: 100%; bottom: 0px;left: 0; box-sizing: border-box; max-width: none }
    .img-header{ width: 100%; left: 0%; height: 60vh; border-radius: 0}
    .service{ padding-left: 20px}
    
    #sidemenu ul li a{ font-size: 20px}
	}
@media(max-width:768px){
	
	p{ width:100%;  font-size: 17px}
	.menu-up, .compact .menu-up{ right:5px; top: 10px}
    
    .titoletto{ font-size: 1.5rem }
    
	#back{ height:80px; width:200px; left: 10px; top: 0px}
	#head, .compact #head{ height:80px}
    header h2{ width: 100%; bottom: auto; max-width: 600px; top: 70vh; bottom: auto; font-size: 22px; padding: 20px 20px 40px 20px; left: 0; box-sizing: border-box; font-weight: 300 }
    .img-header{ width: 100%; left: 0%; top: 90px; height: 60vh; border-radius: 0}
    .container{ padding: 20px}
    .column-container{ flex-direction: column}
    .box-container{ flex-direction: column}
    .box{ width: 100%}
    .box{ width: 100%; height: 100px; margin: 5px auto; border: 1px solid #000; max-width: 500px}
    .box a br{ display:none}
    .box a{ font-size: 16px;}
    .service{ height: auto}
    .service a.active{ display: none}
    .service h2{ font-size: 24px; border: 0; padding-bottom: 0}
    #careers .box-container{ flex-direction: column}
    #careers .box{ width: 90vw}
    #careers h3{ font-size: 1.79rem }
    
    #services{ background-size: cover}
    
    .back{ float: none; text-align: right}
    

}
@media(max-width:500px){
    .img-header{ width: 100%; left: 0%; top: 90px; height: 60vh; border-radius: 0}
    header h2{ width: 70%; bottom: auto; top: 100px; font-size: 20px; padding: 20px 20px 40px 20px; left: 0; box-sizing: border-box; font-weight: 300 }
    .container.photowall{ background-position: center right}
    .menu-lang li.social{ display: none}
    
    #logos{ flex-direction: column}
    .logo-container{ width: 100%; padding-bottom: 20px}
    
}