@import url('https://fonts.googleapis.com/css2?family=Annie+Use+Your+Telescope&display=swap');
	@import url('https://fonts.googleapis.com/css2?family=Libre+Barcode+39+Extended+Text&display=swap');
	@import url('https://fonts.googleapis.com/css2?family=Libre+Barcode+39+Extended+Text&family=Odibee+Sans&display=swap');;
body {width: 98%; margin: 1vh 1%; font-family: 'Annie Use Your Telescope', cursive;}

@media screen and (min-width: 800px) {
.about_img {width: 100%; background-image: url('../../about.jpg'); background-repeat: no-repeat; background-size: cover; background-position: center center}
.contact_img {width: 100%; height: 30vh; background-image: url('../../bg_contact.jpg'); background-repeat: no-repeat; background-size: cover; background-position: center center}
.button_dettaglio {width: 380px;height: 86px; font-size: 36px;font-family: 'Odibee Sans', cursive;  text-align: center; margin: 25px 0;    background: linear-gradient(45deg, transparent 5%, #FF013C 5%); border: 0; color: #fff; letter-spacing: 3px;line-height: 88px;box-shadow: 6px 0px 0px #00e6f6;outline: transparent;}
h1 {width: 95%;font-size: 42px; letter-spacing: 2px;font-family: 'Odibee Sans', cursive;color: #000;background-color: #fff;margin: 0;padding: 10px 2.5% 0 2.5% ;border-top: solid 1px #000;}
h2 {width: 95%;font-size: 30px; letter-spacing: 2px;font-family: 'Odibee Sans', cursive;color: #000;background-color: #fff;margin: 0;padding: 10px 2.5% 0 2.5% ;}
p {width: 95%;font-size: 18px; letter-spacing: 2px; font-family: 'Odibee Sans', cursive;color: #000; background-color: #fff; margin:0; padding: 10px 2.5% 0 2.5% ;}

.bianco {color: #fff !important;}
.bg_bianco {background-color: #fff !important;}
video {object-fit: cover; width: 100%; height: 50vh; position: cover; top: 0; left: 0;}
.projects {object-fit: cover;width: 100%;height: 100vh;position: cover;top: 0;left: 0;}
.flex {flex: initial;}
.content { padding: 10px 2%; width: 96%; background-color: #fff;}
header {width: 100%; height: 200px; margin: 0 auto;}
header .logo {width: 320px; height: 90px; text-align: center; margin: 0 auto;}
header .logo a {width: 100%; margin: 0 auto;font-family: 'Libre Barcode 39 Extended Text', cursive; font-size: 60px;}
footer {width: 100%; padding-top: 116px; margin: 0 auto; background-color: #000; color: #fff; background-image: url('../../footer.jpg'); background-repeat: no-repeat; background-size: contain;}
footer .logo_footer {width: 50%; height: 90px; text-align: center; font-size: 60px;font-family: 'Libre Barcode 39 Extended Text', cursive; margin: 0 auto; color: #fff; }
footer a{font-size: 26px; font-family: 'Odibee Sans', cursive; text-decoration: none; color: #fff}
footer a:hover{font-size: 26px; font-family: 'Odibee Sans', cursive; text-decoration: none; color: #fff}
  header .flex {flex: initial;}
  li, ul {margin: 0; padding: 0;}
  ul {margin: 0 auto; width: 50%;}
  li {width: 30%; margin: 40px 1.33% 20px 1.33%; display: inline-block; text-align: center;}
  a{font-size: 26px; font-family: 'Odibee Sans', cursive; text-decoration: none; color: #000}
  a.classe:hover {width: 30%; margin: 40px 1.33% 20px 1.33%; text-align: center; font-size: 26px; letter-spacing: 2px; font-family: 'Odibee Sans', cursive; animation: 1s; color: #000}
  a.classe_footer{font-size: 26px; font-family: 'Odibee Sans', cursive; text-decoration: none; color: #fff}
  a.classe_footer:hover {width: 30%; margin: 40px 1.33% 20px 1.33%; text-align: center; font-size: 26px; letter-spacing: 2px; font-family: 'Odibee Sans', cursive; animation: 1s; color: #fff}
.container {display: flex;}
	.cl_50_black {width: 50%; height:100vh; background-color: #000; position: relative; background-image: url(../../bg_sx.jpg); background-position: center; background-size:cover;}
	.contenitore {width: 90%; background-color: rgba(27,27,27,0.5); height: auto; padding: 10px 1%; position: absolute; top: 10vh; left: 8%;}
	.titolo {width: 90%; color: #fff; font-size: 37px; position: absolute; bottom: 100px; left: 10%;font-family: 'Odibee Sans', cursive;}
	.sottotitolo {width:80%; padding:10px 0 0 10%; color: #fff; font-size: 20px; margin:10px 10% 0 0; line-height: 28px;font-family: 'Odibee Sans', cursive;}
	.join-left{animation: slide-in-left 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;}
	.join-right { animation: slide-in-right 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;}
	.cl_50_white {width: 50%; height: 100vh; background-color: #fff; position: relative; background-image: url(../../bg_dx.jpg); background-position: center; background-size:cover;}
	.cl_100_red {width: 100%; height: 50vh; background-color: #881010; position: relative;}
	.cl_50_red {width: 100%; height: 50vh; background-color: #881010; position: relative;}
	.titolo2 {width: 90%; color: #fff; font-size: 37px; position: absolute; bottom: 100px; left: 0;}
  .cl_50 {width:50%; height:100vh; background-color: #000; position: relative;}
  .thumb-gallery {width: 17%; object-fit: cover; object-position: center; margin: 1%;}

button, button::after {
  width: 380px;
  height: 86px;
  font-size: 32px;
  font-family: 'Odibee Sans', cursive;
  background: linear-gradient(45deg, transparent 5%, #FF013C 5%);
  border: 0;
  color: #fff;
  letter-spacing: 3px;
  line-height: 88px;
  box-shadow: 6px 0px 0px #00E6F6;
  outline: transparent;
  position: absolute;
  cursor: pointer;
 left: 0; 
  right: 0; 
  top:0;
  bottom:0;
  margin: auto;  
}
button::after {
  --slice-0: inset(50% 50% 50% 50%);
  --slice-1: inset(80% -6px 0 0);
  --slice-2: inset(50% -6px 30% 0);
  --slice-3: inset(10% -6px 85% 0);
  --slice-4: inset(40% -6px 43% 0);
  --slice-5: inset(80% -6px 5% 0);
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(45deg, transparent 3%, #00E6F6 3%, #00E6F6 5%, #FF013C 5%);
  text-shadow: -3px -3px 0px #F8F005, 3px 3px 0px #00E6F6;
  clip-path: var(--slice-0);
}
button:hover::after {
  animation: 1s glitch;
  animation-timing-function: steps(2, end);
}
	@keyframes slide-in-left { 
		0% {-webkit-transform: translateX(-1000px);transform: translateX(-1000px);opacity: 0;}
  		100% {-webkit-transform: translateX(0);transform: translateX(0);opacity: 1;}
  	}
  	@keyframes slide-in-right { 
		0% {-webkit-transform: translateX(+1000px);transform: translateX(+1000px);opacity: 0;}
  		100% {-webkit-transform: translateX(0);transform: translateX(0);opacity: 1;}
  	}
	@keyframes glitch {
		0% {clip-path: var(--slice-1);transform: translate(-20px, -10px);}
		10% {clip-path: var(--slice-3);transform: translate(10px, 10px);}
		20% {clip-path: var(--slice-1);transform: translate(-10px, 10px);}
		30% {clip-path: var(--slice-3);transform: translate(0px, 5px);}
		40% {clip-path: var(--slice-2);transform: translate(-5px, 0px);}
		50% {clip-path: var(--slice-3);transform: translate(5px, 0px);}
		60% {clip-path: var(--slice-4);transform: translate(5px, 10px);}
		70% {clip-path: var(--slice-2);transform: translate(-10px, 10px);}
		80% {clip-path: var(--slice-5);transform: translate(20px, -10px);}
		90% {clip-path: var(--slice-1);transform: translate(-10px, 0px);}
		100% {clip-path: var(--slice-1);transform: translate(0);}
	}
}

@media screen and (max-width: 799px) and (min-width: 200px){
.about_img {width: 100%; height: 30vh; background-image: url('../../about.jpg'); background-repeat: no-repeat; background-size: cover; background-position: center center}
.contact_img {width: 100%; height: 30vh; background-image: url('../../bg_contact.jpg'); background-repeat: no-repeat; background-size: cover; background-position: center center}
.button_dettaglio {width: 300px;height: 86px; font-size: 36px; cursor: pointer;    font-family: 'Odibee Sans', cursive;  text-align: center; margin: 0 auto 25px auto;    background: linear-gradient(45deg, transparent 5%, #FF013C 5%); border: 0; color: #fff; letter-spacing: 3px;line-height: 88px;box-shadow: 6px 0px 0px #00e6f6;outline: transparent;}
h1 {width: 95%;font-size: 42px; letter-spacing: 2px;font-family: 'Odibee Sans', cursive;color: #000;background-color: #fff;margin: 0;padding: 10px 2.5% 0 2.5% ;border-top: solid 1px #000;}
h2 {width: 95%;font-size: 30px; letter-spacing: 2px;font-family: 'Odibee Sans', cursive;color: #000;background-color: #fff;margin: 0;padding: 10px 2.5% 0 2.5% ;}
p {width: 95%;font-size: 18px; letter-spacing: 2px; font-family: 'Odibee Sans', cursive;color: #000; background-color: #fff; margin:0; padding: 10px 2.5% 35px 2.5% ;}
.thumb-gallery {width: 17%; object-fit: cover; object-position: center; margin: 1%;}


.bianco {color: #fff !important;}
.bg_bianco {background-color: #fff !important;}

	body {background-color: #fff}
	video {object-fit: cover;
  width: 100%;
  height: 50vh;
  position: cover;
  top: 0;
  left: 0;}
.flex {flex: initial;}
header {width: 100%; height: auto; margin: 0 auto; background-color: #fff;}
header .logo {width: 320px; height: 90px; text-align: center; margin: 0 auto;}
header .logo a {width: 100%; margin: 0 auto;font-family: 'Libre Barcode 39 Extended Text', cursive; font-size: 60px;}
footer a{font-size: 26px; font-family: 'Odibee Sans', cursive; text-decoration: none; color: #fff}
footer {width: 100%; padding-top: 116px; margin: 0 auto; background-color: #000; color: #fff; background-image: url('../../footer.png'); background-repeat: no-repeat; background-size: contain;}
footer .logo_footer {width: 50%; height: 90px; text-align: center; font-size: 60px;font-family: 'Libre Barcode 39 Extended Text', cursive; margin: 0 auto; color: #fff; }
  header .flex {flex: initial;}
  li, ul {margin: 0; padding: 0;}
  ul {margin: 0 auto; width: 100%;}
  li {width: 100%; margin: 20px 0 ; display: inline-block; text-align: center;}
  a{font-size: 26px; font-family: 'Odibee Sans', cursive; text-decoration: none; color: #000}
  a.classe:hover {width: 30%; margin: 40px 1.33% 20px 1.33%; text-align: center; font-size: 26px; letter-spacing: 2px; font-family: 'Odibee Sans', cursive; animation: 1s; color: #000}
  a.classe_footer{font-size: 26px; font-family: 'Odibee Sans', cursive; text-decoration: none; color: #fff}
  a.classe_footer:hover {width: 30%; margin: 40px 1.33% 20px 1.33%; text-align: center; font-size: 26px; letter-spacing: 2px; font-family: 'Odibee Sans', cursive; animation: 1s; color: #fff}
	.cl_50_black {width: 100%; height:100vh; background-color: #000; position: relative; background-image: url(../../bg_sx.jpg); background-position: center; background-size:cover;}
	.contenitore {width: 90%; background-color: rgba(27,27,27,0.5); height: auto; padding: 10px 1%; position: absolute; top: 10vh; left: 8%;}
	.titolo {width: 90%; color: #fff; font-size: 37px; position: absolute; bottom: 100px; left: 10%;font-family: 'Odibee Sans', cursive;}
	.sottotitolo {width:80%; padding:10px 0 0 10%; color: #fff; font-size: 20px; margin:10px 10% 0 0; line-height: 28px;font-family: 'Odibee Sans', cursive;}
	.join-left{animation: slide-in-left 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;}
	.join-right { animation: slide-in-right 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;}
	.cl_50_white {width: 100%; height: 100vh; background-color: #fff; position: relative; background-image: url(../../bg_dx.jpg); background-position: center; background-size:cover;}
	.cl_100_red {width: 100%; height: 50vh; background-color: #881010; position: relative;}
	.cl_50_red {width: 100%; height: 50vh; background-color: #881010; position: relative;}
	.titolo2 {width: 90%; color: #fff; font-size: 37px; position: absolute; bottom: 100px; left: 0;}
button, button::after {
  width: 300px;
  height: 86px;
  font-size: 36px;
  font-family: 'Odibee Sans', cursive;
  background: linear-gradient(45deg, transparent 5%, #FF013C 5%);
  border: 0;
  color: #fff;
  letter-spacing: 3px;
  line-height: 88px;
  box-shadow: 6px 0px 0px #00E6F6;
  outline: transparent;
  position: absolute;
  cursor: pointer;
 left: 0; 
  right: 0; 
  top:0;
  bottom:0;
  margin: auto;  
}
button::after {
  --slice-0: inset(50% 50% 50% 50%);
  --slice-1: inset(80% -6px 0 0);
  --slice-2: inset(50% -6px 30% 0);
  --slice-3: inset(10% -6px 85% 0);
  --slice-4: inset(40% -6px 43% 0);
  --slice-5: inset(80% -6px 5% 0);
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(45deg, transparent 3%, #00E6F6 3%, #00E6F6 5%, #FF013C 5%);
  text-shadow: -3px -3px 0px #F8F005, 3px 3px 0px #00E6F6;
  clip-path: var(--slice-0);
}
button:hover::after {
  animation: 1s glitch;
  animation-timing-function: steps(2, end);
}
	@keyframes slide-in-left { 
		0% {-webkit-transform: translateX(-1000px);transform: translateX(-1000px);opacity: 0;}
  		100% {-webkit-transform: translateX(0);transform: translateX(0);opacity: 1;}
  	}
  	@keyframes slide-in-right { 
		0% {-webkit-transform: translateX(+1000px);transform: translateX(+1000px);opacity: 0;}
  		100% {-webkit-transform: translateX(0);transform: translateX(0);opacity: 1;}
  	}
	@keyframes glitch {
		0% {clip-path: var(--slice-1);transform: translate(-20px, -10px);}
		10% {clip-path: var(--slice-3);transform: translate(10px, 10px);}
		20% {clip-path: var(--slice-1);transform: translate(-10px, 10px);}
		30% {clip-path: var(--slice-3);transform: translate(0px, 5px);}
		40% {clip-path: var(--slice-2);transform: translate(-5px, 0px);}
		50% {clip-path: var(--slice-3);transform: translate(5px, 0px);}
		60% {clip-path: var(--slice-4);transform: translate(5px, 10px);}
		70% {clip-path: var(--slice-2);transform: translate(-10px, 10px);}
		80% {clip-path: var(--slice-5);transform: translate(20px, -10px);}
		90% {clip-path: var(--slice-1);transform: translate(-10px, 0px);}
		100% {clip-path: var(--slice-1);transform: translate(0);}
	}

}

form input, form textarea {
    border-radius: 5px;
    text-align: left;
    margin-top: 10px;
    padding: 10px 2%;
    font-size: 18px;
    font-family: 'Odibee Sans', cursive;
    display: block;
    width: 94%;
    border: none;
    background-color: #eee;}