@font-face {
    font-family: 'creoextrabold';
    src: url('../fonts/creo-extrabold-webfont.woff2') format('woff2'),
         url('../fonts/creo-extrabold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}
 
@font-face {
    font-family: 'creoextralight';
    src: url('../fonts/creo-extralight-webfont.woff2') format('woff2'),
         url('../fonts/creo-extralight-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

.elenco_puntato {
	position: relative;
}

.elenco_puntato i.fa-check{
	position: absolute;
	left: 0;
	margin-top: 6px;
}

.pp-scrollable {
	background-color: #fff;
}

.text-dark {
    color: #000000!important;
}

.logo_anim_container,
.logo_type,
.homeslogan,
.popup-youtube{
	/*mix-blend-mode: difference;*/
}

a.popup-youtube{
	transition: all 1000ms ease; 
}

	.popup-youtube span{
		transition: all 1000ms ease; 
	}

	.popup-youtube:hover span{	
		
		background-color: #000;
		color: #1bbfff;
		transform: scale(1.2);
		margin-right: 1.9rem;
	}

		.popup-youtube span:before{
			display: inline-block;
			position: relative;
			/*transition-delay: 200ms;*/
			/*transition: all 200ms ease; */
		}

		.popup-youtube:hover span:before{
			
		}



.homeslogan b{
	display: inline-block;
	transition: all 1000ms ease; 
	font-weight: 900;
	transform: translateY(30px);
	opacity: 0;
}

	.doanim .homeslogan b{
		transform: translateY(0px);
		opacity: 1;	
	}

.bg-changer{
	background-color: #000;
}

.bg-changer .section-bg:first-child {
    opacity: 0;
}

.bg-changer .active,
.bg-changer .section-bg.active:first-child 
{
	opacity: 0.5 !important;
}

.logo_type{
	font-family: 'creoextrabold';
	font-size: 9vw;
	letter-spacing: 2px;
	overflow: hidden;
	display: inline-block;
	line-height: 1;
	vertical-align: bottom;
	color: #000;
}

	.logo_type i{
		overflow: hidden;
		display: inline-block;
		line-height: 1;
		vertical-align: bottom;
		font-style: normal;
	}

		.logo_type i b{
			display: inline-block;
			transform: translateX(101%);
		}
 
		.doanim .logo_type i b{
			animation-timing-function: ease-out;
			animation-delay: 1.5s;
			animation-name: letters;
  			animation-duration: 2s;
  			animation-fill-mode: forwards; 
		}

		@keyframes letters {
		  0%   {transform: translateX(101%);}		 
		  100% {transform: translateX(0%);}
		}

.logo_anim_container{
	/*max-width: 100px;*/
	display: inline-block;
	width: 8vw;
	position: relative;
}

.logo_anim{
	width: 100%;
	padding-bottom: 100%;
	/*border: 1px solid #ccc;*/
	position: relative;
	/*left:50%;
	top: 50%;
	transform: translateX(-50%) translateY(-50%);*/
	margin-left: 8%; 
}

@media (min-width: 1200px) {

	.logo_anim{
		margin-bottom: 3%;
	}
	
}

	.logo_v{
		left: 0;
		bottom: 5%;
		width: 32%;
		height: 90%;
		position: absolute;
		background-color: #000;
		transform-origin: 0 100%;
		transform: scaleY(0);
		transition: all 200ms ease-in; 
		transition-delay: 1400ms;
	}

		.doanim .logo_v{
			transform: scaleY(1);
		}

	.logo_skew{
		position: absolute;
		background-color: #000;
		width: 32%;
		height: 37%;
		right: 0;
		bottom: 5%;
		transform-origin: 50% 50%;
		
		transform: skewX(45deg) translateX(-57%) scaleX(0);
	}

	.doanim .logo_skew{
		animation-fill-mode: forwards;
		animation-name: skewanim;
		animation-duration: 2s; 
	}

	@keyframes skewanim {
	  0%   {transform: skewX(45deg) translateX(-57%) scaleX(0); }	 
	  40% {transform: skewX(45deg) translateX(-57%) scaleX(2);	}
	  60% {transform: skewX(45deg) translateX(-57%) scaleX(2);	}
	  100% {transform: skewX(45deg) translateX(-57%) scaleX(1);	}
	}

	.logo_megaphone__anim__container{
		width: 100%;
		height: 77%;
		left: 0;
		top: 0;
		overflow: hidden;
		position: absolute;
	}

		.logo_megaphone__container{
			position: absolute;
			width: 43%;
		    height: 55%;
		    left: 37%;
		    top: 7%;
		    transition: all 1250ms ease; 
			transform: translateY(200%);
			transition-delay: 400ms;
		}

		.doanim .logo_megaphone__container{
			transform: translateY(0%);
		}

		.logo_megaphone{
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			transition: all 1250ms ease; 
			
			
			/*background-image: url(logo_megaphone.png);
			background-repeat: no-repeat;
			background-position: center center;
			background-size: contain;*/
		}

		.doanim .logo_megaphone{
			animation-delay: 400ms;
			animation-fill-mode: forwards;
			animation-name: rotatemegaphone;
			animation-duration: 2s;  
		}

		
		@keyframes rotatemegaphone {
		  0%   {transform:  rotateZ(300deg); }	 
		  50% {transform: rotateZ(31deg); }
		  55% {transform: rotateZ(31deg);}
		  100% {transform: rotateZ(725deg) translateX(9%);}
		}

			.logo_megaphone img{
				height: 100%; 
			}
  
		.logo_megaphone_inside{
			z-index: 4;
			position: absolute;
		    border-bottom: 150px solid #40b4e5;
		    border-left: 45px solid transparent;
		    border-right: 45px solid transparent;
		    height: 0;
		    width: 20%;
		    left: 5%;
		    top: 16%;
		    transform: rotateZ(-135deg);
		}

		.logo_megaphone_circle_mask{
			position: absolute;
			z-index: 2;
			background-color: #fff;
			width: 40%;
			height: 20%;
			transform: rotateZ(-29deg);
			top: 64%;
	    	left: 15%;
		}


		.logo_megaphone_circle{
			position: absolute;
			z-index: 0;
			width: 23%;
		    height: 23%;
		    background-color: #40b4e5;
		    border-radius: 50%;
		    left: 28%;
		    top: 70%;
		}


		.logo_megaphone_circle_small{
			position: absolute;
			z-index: 0;
			width: 23%;
		    height: 23%;
		    background-color: #fff;
		    border-radius: 50%;
		    left: 28%;
		    top: 70%;
	   		transform: scale(0.5);
		}



#fp-nav ul li a span, .fp-slidesNav ul li a span{
	background-color: #333333;
}

#fp-nav ul li a.active span, #fp-nav ul li:hover a.active span, .fp-slidesNav ul li a.active span, .fp-slidesNav ul li:hover a.active span{
	background-color: #40b4e5;
}

.brand,
.contacts .contact-item,
.contacts .contact-item a,
.social-list-bottom a{
	color: #000;
}

.show_blacklogo .brand,
.show_blacklogo .contacts .contact-item,
.show_blacklogo .contacts .contact-item a,
.show_blacklogo .copy-bottom,
.show_blacklogo .social-list-bottom a{
	color: #fff;
}

.show_bluelogo .brand,
.show_bluelogo .contacts .contact-item,
.show_bluelogo .contacts .contact-item a,
.show_bluelogo .copy-bottom,
.show_bluelogo .social-list-bottom a{
	color: #fff;
}

.show_bluelogo .contacts .contact-item a i,
.show_bluelogo .social-list-bottom a i{
	color: #000;
}


.navbar-toggle .icon-bar,
.menu{
	background-color: #000;
}

.show_blacklogo .navbar-toggle .icon-bar
{
	background-color: #fff;
}

.pp-scrollable .vertical-centred {
    padding-top: 6rem;
    padding-bottom: 6rem;
}

 .section-blue{
	background-color: #1bbfff;
}

 .section-black{
	background-color: #000;
}

.text-primary{
	color: #1bbfff !important;
}

.text-invert{
	color: #c74a19;
}

 .section-blue .text-primary{
	color: #000 !important;
}

#fp-nav{
	z-index: 9999;
}

#fp-nav li .active span{
	box-shadow: 0 0 0 3px #fff;
}

.navbar{
	position: fixed;
	z-index: 12;
}

.contacts {
	font-weight: 900;
	margin-top: 0.4rem;
}

.copy-bottom{
	font-weight: 900;
	font-size: 12px;
	bottom: 0;
	position: static;
}

.show_bluelogo  .copy-bottom a {
	color: #000;
}

.social-list-bottom{
	color: #000;
}

.popup-youtube span {
    position: relative;
    width: 5rem;
    height: 5rem;
    padding-left: .2rem;
    line-height: 5rem;
    text-align: center;
    border: 1px solid #000;
    border-radius: 50%;
    font-size: 1.5rem;
    margin-right: 1.5rem;
    margin-top: 1rem;
    color: #000;
    transition: all .3s ease-out;
}

.popup-youtube span:after {
    content: '';
    position: absolute;
    right: 100%;
    top: 50%;
    height: 1px;
    width: 99999rem;
    background: #000;
    margin-right: 2rem;
}

.section-1 .intro{
	position: relative;
	z-index: 12;
}

canvas#c {
	z-index: 100;
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	mix-blend-mode: multiply;
	transition: all 1000ms ease; 
	opacity: 0;
}

@media (max-width: 767px) {


	.bg-about{
		display: none;
	}

	canvas#c{
		display: none;
	}
	
}

.showcanvas canvas#c{
	opacity: 1;
}

.hidden_canvas canvas#c{
	opacity: 0;
}

.show_blacklogo canvas#c{
	 mix-blend-mode: screen;
}

.show_bluelogo canvas#c{
	 mix-blend-mode: luminosity;
}

.navbar-bg{
	background: transparent;
}

.brand{
	max-width: 250px;	
	position: relative;
}

.brand_top_normal,
.brand_top_blue,
.brand_top_black{
	width: 100%;
	transition: all 350ms ease; 
}

.show_bluelogo .brand_top_normal,
.show_bluelogo .brand_top_black,
.show_blacklogo .brand_top_normal,
.show_blacklogo .brand_top_blue{
	opacity: 0;
}

.brand_top_blue,
.brand_top_black{
	position: absolute;
	left:0;
	top: 0;
	opacity: 0;
}

.show_bluelogo .brand_top_blue{
	opacity: 1;
}

.show_blacklogo .brand_top_black{
	opacity: 1;
}

.col-specialization p{
	color: #000;
	font-weight: 700;
}

.col-resume{
	box-shadow: 0 20px 30px -10px rgba(0,0,0,0.3);
}

@media (max-width: 767px) {

	.project-title {
	    font-size: 2.68rem;
	}


	h2, .h2{
		font-size: 2.371rem;
	}

	.homeslogan{
		font-size: 1.7rem;
		font-weight: 900;
	}
	
}

@media (max-width: 575px) {

	.project-title {
	    font-size: 1.8rem;
	}

	.logo_megaphone{
		top: -48%;
	}


	.logo_anim_container{
		    margin-bottom: -2%;
	}

	.logo_type{
		font-size: 7vw;
	}
	
}


.form_offcanvas{
	width: 450px;
	max-width: 95vw;
	min-height: 230px;
	background-color: #fff;
	border-radius: 4px;

	position: fixed;
	z-index: 99999;
	-moz-transform: translateX(-100%);
	-webkit-transform: translateX(-100%);
	-o-transform: translateX(-100%);
	-ms-transform: translateX(-100%);
	transform: translateX(-100%);
	bottom: 10px;

	-webkit-transition: all 600ms ease;
	-moz-transition: all 600ms ease;
	-ms-transition: all 600ms ease;
	-o-transition: all 600ms ease;
	transition: all 600ms ease; 
}

.form_offcanvas.translate_offcanvas{
	-moz-transform: translateX(0);
	-webkit-transform: translateX(0);
	-o-transform: translateX(0);
	-ms-transform: translateX(0);
	transform: translateX(0);

	-webkit-box-shadow: 0 20px 80px -15px rgba(0,0,0,0.9);
	box-shadow: 0 20px 80px -15px rgba(0,0,0,0.9);
}

	.form_offcanvas__container{
		position: relative;
		overflow: hidden;
		width: 100%;
		height: 100%;
		padding: 15px 15px 15px 15px;
		text-align: center;
	}

		.form_offcanvas_logo{
			height: 40px;
			/*position: absolute;
			left: 108px;
			top: 15px;*/
			display: inline-block;
			margin: 2px 10px;
		}

		.form_offcanvas_number{		
		margin: 2px 10px;	
			/*position: absolute;
			left: 230px;
			top: 15px;*/
			display: inline-block;
		}

			.form_offcanvas_number img{
				height: 39px;
			}


		.form_offcanvas__close{
			line-height: 1.4;
			position: absolute;
			width: 32px;
			height: 32px;
			right: 15px;
			top: 15px;
			cursor: pointer;
			text-align: center;

			-webkit-transition: all 400ms ease;
			-moz-transition: all 400ms ease;
			-ms-transition: all 400ms ease;
			-o-transition: all 400ms ease;
			transition: all 400ms ease; 
			
			border-radius: 50%;
			font-size: 20px;
			padding-top: 3px;
		}

		.form_offcanvas__close:hover{
			background-color: rgba(0, 0, 0, 0.1);
		}

		.form_offcanvas__close:active{
			background-color: rgba(0, 0, 0, 0.2);
		}

		.form_offcanvas__container p{
			color: #092f6f;
			font-size: 120%;
			text-align: center;
		}

		#form_offcanvas{
			padding-top: 10px;
		}

			#form_offcanvas button{
				text-transform: uppercase;
				letter-spacing: 2px;
				margin-bottom: 0;
				font-weight: 700;
				outline: none;
				background-color: #38b5e6;
				color: #fff !important;
				border: none !important;
				-webkit-box-shadow: 0 12px 30px -10px rgba(0,0,0,0.7);
				box-shadow: 0 12px 30px -10px rgba(0,0,0,0.7);
			}

			#form_offcanvas button:hover{
				background-color: #2d90b7;
				-webkit-box-shadow: 0 10px 20px -10px rgba(0,0,0,0.8);
				box-shadow: 0 10px 20px -10px rgba(0,0,0,0.8);
			}

.form_offcanvas__label{
	cursor: pointer;
	width: 180px;
	height: auto;
	
	background-color: #38b5e6;
	color: #fff;
	
	display: block;
	text-align: center;
	border-radius: 40px;
	padding-top: 8px;
	padding-bottom: 8px;

	-webkit-box-shadow: 0 20px 60px -10px rgba(0,0,0,0.8);
	box-shadow: 0 20px 60px -10px rgba(0,0,0,0.8);

	position: fixed;
	z-index: 99998;
	left: 10px;
	bottom: 10px;		

	-webkit-transition: all 600ms ease;
	-moz-transition: all 600ms ease;
	-ms-transition: all 600ms ease;
	-o-transition: all 600ms ease;
	transition: all 600ms ease; 
}


.form_offcanvas__label.translate_offcanvas{
	background-color: #1f2c35;
	border-color: #1f2c35;
	box-shadow: none;
	-moz-transform: translateX(150px);
	-webkit-transform: translateX(150px);
	-o-transform: translateX(150px);
	-ms-transform: translateX(150px);
	transform: translateX(150px);
}

	.form_offcanvas__label span{
		display: inline-block;
		vertical-align: middle;
		margin-right: 10px;

		-webkit-transition: all 400ms ease;
		-moz-transition: all 400ms ease;
		-ms-transition: all 400ms ease;
		-o-transition: all 400ms ease;
		transition: all 400ms ease; 
	}

	.form_offcanvas__label i{
		display: inline-block;
		vertical-align: middle;
		width: 32px;
		height: 32px;
		font-size: 16px;
		background-color: #fff;
		background-image: url('https://www.clion.it/img/offcanvas_icon.jpg');
		background-repeat: no-repeat;
		background-position: 3px center;
		border-radius: 50%;
		
		padding-top: 8px;
		margin-right: 10px;

		-webkit-transition: all 400ms ease;
		-moz-transition: all 400ms ease;
		-ms-transition: all 400ms ease;
		-o-transition: all 400ms ease;
		transition: all 400ms ease; 
	}

	.form_offcanvas__label.translate_offcanvas i,
	.form_offcanvas__label.translate_offcanvas span{
		border-color: #1f2c35;
		color: #1f2c35;
	}

.whatsapp_fixed{
	position: fixed;
	z-index: 111;
	left: 200px;
	bottom: 10px;		
	width: 50px;
	height: 50px;

	background-color: #25d366;
	color: #000;
	 
	display: block;
	text-align: center;
	border-radius: 40px;
	font-size: 26px;

	 transition: all 200ms ease; 
}

.whatsapp_fixed:hover{
	background-color: #075e54;
	color: #fff;
	transform: scale(1.1);
}