@font-face {
	font-family: 'Fa Brands';
	src: url('/fonts/');
	src: local('Fa Brands'), url('/fonts/fa-brands-400.ttf') format('truetype');
}
@font-face {
	font-family: 'Fa Regular';
	src: url('/fonts/');
	src: local('Fa Regular'), url('/fonts/fa-regular-400.ttf') format('truetype');
}
 @font-face {
      font-family: bookold;
      src: url('/fonts/');
      src: local('bookold'), url('/fonts/bookold.ttf') format('truetype');
}
:root {
	--nero: rgb(0, 0, 0);
	--bianco: rgb(255, 255, 255);
	--grigio:rgb(135, 135, 135);
	--zero: rgb(228, 228, 228);
	--uno: rgb(236, 236, 236);
	--due: rgb(146, 154, 171);
	--tre: rgb(97, 101, 117);
	--quattro: rgb(56, 56, 63);
	--cinque: rgb(11, 11, 13);
}
* {margin: 0; padding: 0; box-sizing: border-box; font-family:'bookold', sans-serif; scroll-behavior: smooth;}
p {font-weight: 300; font-size: 1.4em; color:#1e3799;}
a:link {color: navy;}
a:visited {color: var(--due);}
a:hover {color: var(--quattro);}
a:active {color: var(--tre);}
/*==BANNER==*/
.banner{position: relative; width: 100%; min-height: 100vh; display: flex; justify-content: center; align-items: center; background-size: cover;}
.banner .content {max-width: 900px; text-align: center;}
.banner  p{text-align: center; font-size: 1.5em; font-weight: 300; color: #fff;}
.banner h2{text-align: center; font-size: 5em; font-weight: 300; color: #fff;}
.btn {border-bottom-right-radius: 50px; border-top-left-radius: 50px; border-bottom-left-radius: 50px; border-top-right-radius: 50px; border: 2px solid #555; font-weight: 400; font-size: 1em; color: rgb(28 85 207) !important; background: silver; display: inline-block; padding: 10px 30px; margin-top: 20px; text-transform: uppercase; text-decoration: none; letter-spacing: 2px; transition: 0.5s;}
.btn:hover {background: rgb(24,85,207);background: radial-gradient(circle, rgba(24,85,207,1) 0%, rgba(65,66,70,1) 80%);color:white!important; border-bottom-right-radius: 50px; border-top-left-radius: 50px; border-bottom-left-radius: 50px; border-top-right-radius: 50px;}
/*===HEADER=====*/
header{position: fixed; top: 0; left: 0; width: 100%; padding: 40px 100px; z-index: 10000; display: flex; justify-content: space-between; align-items: center; transition: 0.5s;}
header.sticky{background: rgb(166, 166, 166); background: linear-gradient(0deg, rgba(166, 166, 166, 1) 0%, rgba(227, 225, 225, 1) 100%); padding: 10px 100px; box-shadow: 0 5px 20px rgba(0,0,0,0.05);/* background: #fff;*/}
header .logo{color:#fff; font-weight: 400; font-size: 2.2em; text-decoration: none;}
header.sticky .logo{color: #111;}
header .logo span{color: #ff0157;}
header .navigation{position: relative; display: flex;}
header .navigation li{list-style: none; margin-left: 30px;font-size:1.2em}
header .navigation li a{text-decoration: none; color: #fff; font-weight: 300;}
header.sticky .navigation li a{color: #111;}
header .navigation li a:hover{color: #ff0157;}
/*===SECTION=====*/
section{padding: 100px;}
.titleText{color: #111; font-size: 2em; font-weight: 300;}
.titleText span{color: #ff0157; font-weight: 700; font-size: 1.5em;}
.title{width: 100%; display: flex; justify-content: center; align-items: center; flex-direction: column;}
.white .titleText, .white p{color: #e0dddd;}
.black .titleText, .black p{color: #111;}
.imgx iframe {width: auto; height:500px; border-radius:10px; overflow:hidden;}
.fa-regular{color: #ed0a0a; font-size:1.2em}
.fa-solid{color: rgb(28 85 207);font-size:1.2em;}
/*===COPYRIGHT=====*/
.copyrightText{padding:  8px 40px; border-top: 1px solid rgba(0,0,0,0.1); text-align: center;}
.copyrightText p{color: rgb(227 225 225); font-size:1em; font-weight:100}
.copyrightText a{color: #ff0157; font-weight: 100; font-size: 1em; text-decoration: none;}
.invio p {text-align: center; margin-top: 15px;}
.invio a {text-decoration: none; font-size: 1.5em; font-weight: 300;}

/*===TABLET=====*/
@media (max-width: 991px)
{
    header .logo{font-size:3em;}
    header, header.sticky{padding: 10px 20px;}
    header .navigation{display: none;}
    header .navigation.active{width: 100%; height: 100%; height: calc(100% - 68px); position: fixed; top: 68px; left: 0; display: flex; justify-content: center; align-items: center; flex-direction: column; background: rgb(206, 206, 206); opacity: 0.9;}
    header .navigation li{margin-left: 0;}
    header .navigation li a{color:#111; font-size: 1.6em;}
    .menuToggle{position: relative; width: 40px; height: 40px; background: url("/images/menu.gif"); background-size: 30px; background-repeat: no-repeat; background-position: center; cursor: pointer;}
    .menuToggle.active{background: url("/images/close.gif"); background-size: 25px; background-repeat: no-repeat; background-position: center;}
    header .sticky .menuToggle{filter: invert(1);}
    section{padding: 20px;}
    .content{padding: 30px;}
    .title{text-align: center;}
    .titleText{font-size: 1.8em; line-height: 1.5em; margin-bottom: 15px; font-weight: 300;}
    .copyrightText p{color: #fff; font-size:1em}
    .fa-regular{color: #ed0a0a; font-size:1.1em}
    .fa-solid{color: rgb(28 85 207);font-size:1.1em;}
}
/*===SMARTPHONE=====*/
@media (max-width: 480px)
{
    header .logo{font-size:2.5em;}
    .banner h2{font-size: 2em; }
    .banner p{font-size: 1.1em; }
    .copyrightText p{color: #fff; font-size:0.8em}
    .fa-regular{color: #ed0a0a; font-size:1.1em}
    .fa-regular{color: #ed0a0a; font-size:1em}
    .fa-solid{color: rgb(28 85 207);font-size:1em;}
}
/*=========== VIDEO BG=============*/
.bg-video{width:100vw; height: 100vh;object-fit: cover; position: fixed; left: 0; right: 0; top: 0; bottom: 0; z-index: -1; background: linear-gradient(0deg, rgba(0,0,0,0.2), rgba(0, 0, 0, 0.9)) no-repeat center center; background-size: cover; overflow: hidden;}
#background-video{background: #000; position: absolute; bottom: 0; left: 0; min-width: 100%; min-height: 100%; z-index: 0; opacity: 0.5; }
.bg-video:after{content: ' '; width: 100%; height: 100%; display: block; position: absolute; top: 0; left: 0; background: #000; opacity: 0.5;}
/*======== VIDEO BG SMARTPHONE======*/
@media (max-width: 480px)
{
    #background-video {display: none;}
    .banner {position: relative; width: 100%; min-height: 100vh; display: flex; justify-content: center; align-items: center; background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.9)), url("/images/audi-1.webp"); background-size: cover;}
    .utility {background: url("/images/relax.jpeg");background-size: cover;}
    .ipcam {background: url("img/image22.jpg");background-size: cover;}
}
/*=========== VIDEO BG TABLET============*/
@media (max-width: 991px)
{
    .banner {background: #000; width: 100%; height: 100%; position: absolute; z-index: 0; opacity: 0.8;}
    #background-video{display: none;}
    .banner {position: relative; width: 100%; min-height: 100vh; display: flex; justify-content: center; align-items: center; background: linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.9)), url("/images/audi-1.webp"); background-size: cover; }
    .utility {background: url("/images/relax.jpeg");background-size: cover;}
    .ipcam {background: url("img/image22.jpg");background-size: cover;}
}
/*=====================UTILITY====================*/
.video{margin: 0; align-items: center;}
.video iframe{width: 100%; height: 100%;}
.text-box{font-size: 1em; text-align: center; border-radius: 10px; overflow: hidden; /*border:5px #142f9c solid;*/}
h3{font-size: 1.1em; color: blue;}
/*============ INIT SLIDESHOW IMAGES ====================*/
#card{box-sizing: border-box; align-items: center;/* border: 2px solid red;*/}
.mySlides{display: none;}
.mySlides img{vertical-align: middle; border-radius: 20px; border: 1px solid #0501ff;}
.slideshow-container{max-width: 1000px; position: relative; margin: auto;}
/* Next & previous buttons */
.prev, .next{cursor: pointer; position: absolute; top: 50%; width: auto; padding: 16px; margin-top: -22px; color: white; font-weight: bold; font-size: 18px; transition: 0.6s ease; border-radius: 0 3px 3px 0; user-select: none;}
/* Position the "next button" to the right */
.next{right: 0; border-radius: 3px 0 0 3px;}
/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover{background-color: rgba(0, 0, 0, 0.8);}
/* The dots/bullets/indicators */
.dots{cursor: pointer; height: 15px; width: 15px; margin: 0 2px; background-color: #999999; border-radius: 50%; display: inline-block; transition: background-color 0.6s ease;}
.activ, .dots:hover{background-color: #111111;}
/* Fading animation */
.fade{-webkit-animation-name: fade; -webkit-animation-duration: 1.5s; animation-name: fade; animation-duration: 1.5s;}
/*======KEYFRAME=========*/
@-webkit-keyframes fade
{
    from{opacity: 0.5;}
    to{opacity: 1;}
}
@keyframes fade
{
    from{opacity: 0.5;}
    to{opacity: 1;}
}
/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px)
{
    .prev, .next, .text{font-size: 11px;}
}

/*==== Add  Db ====*/
.bianco{font-size: 1.2em !important; font-weight: 300 !important; color: #fff !important; text-align: center !important;}
.nero {font-size: 1.2em !important; font-weight: 300 !important; color: #000 !important; text-align: center !important;}
#bianco {color:white;}
#nero {color:black;}
/*-----------------------------
Cover
-----------------------------*/

/*============== BORDERBOX ==================*/
*, *:before, *:after{-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}