@font-face {
	font-family:'Exo';
	src: url(fonts/Exo-VariableFont_wght.ttf);
  }

	  @font-face {
	font-family:'Oxanium';
	src: url(fonts/Oxanium-VariableFont_wght.ttf);
  }

body {background: #00597c;
	background: -moz-linear-gradient(135deg, rgba(0,89,124,1) 0%, rgba(25,35,40,1) 100%);
	background: -webkit-linear-gradient(135deg, rgba(0,89,124,1) 0%, rgba(25,35,40,1) 100%);
	background: linear-gradient(135deg, rgba(0,89,124,1) 0%, rgba(25,35,40,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#00597c",endColorstr="#192328",GradientType=1);
}

.wapper {display: flex;
	justify-content: center;
	align-items: center;}

.efft h2{
	position: relative;
	font-size: 48px;
	color: #fff;
	-webkit-text-stroke: 0.2vw #fff;
}
.efft h2::before{
	content: attr(data-text);
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	color: #FDC32D;
	-webkit-text-stroke: 0vw #383d52;
	border-right: 1px solid #FDC32D;
	overflow: hidden;
	animation: animate 6s linear infinite;
	animation-delay: 3s;

}
@keyframes animate{
	0%,10%,100%{
			width: 0;
	}
	70%,90%{
			width: 100%;
	}
}

#upperWrap, #lowerWrap {
  overflow: hidden;
  height: 60px;
  line-height: 30px;
  width: 300px;
}

#upper {
  font-size: 24px;
  text-transform: uppercase
}

#line {
  width: 100%;
  height: 1px;
  background: white;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Exo", sans-serif;
}

.mmm {
	font-family: "Oxanium", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.bg {
  position: relative;
  width: 100%;
  height: 100vh;
  background: url('../../imgl/sala.jpg');
  background-size: cover;
  background-position: bottom no-repeat;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0px 0px 40px 0px #fff;
}

.cmp {
  top: 0;
  position: absolute;
}
.cmp img {width: 240px;}

.claim {
  bottom: 10%;
  position: absolute;
	z-index: 1000;
}

.claim img {width: 240px;}

.bg .fog {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
}
.bg .fog img {
  position: absolute;
  bottom: 0;
  max-width: 100%;
  animation: fog_effect calc(3s * var(--i)) ease-in infinite;
}
@keyframes fog_effect {
  0% {
    opacity: 0;
    transform: scale(1);
  }
  25%,
  75% {
    opacity: 1;
  }
  100% {
    transform: scale(3);
    opacity: 0;
  }
}


.container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
  width: auto;padding-right: var(--bs-gutter-x,.75rem);padding-left: var(--bs-gutter-x,.75rem);margin-right: auto;margin-left: auto;text-align: center;}

.featurette-divider {color:#fff;width: 100%;}

.iconPan {margin-top: 60px;color: #fff;}
.iconPan img {width: 64px !important;margin-bottom: 20px;}

.iconPan p {font-size: 18px;padding:20px;}

.iconPanS {margin-top: 60px;color: #fff;}
.iconPanS img {width: 64px !important;margin-bottom: 20px;}

.iconPanS h2 {font-size: 22px;}

h3.featurette-heading {color:#FDC32D;}
h2.featurette-heading {color:#fff;}
.featurette-heading {margin-top: 0rem !important;}
.featurette img {margin-top: 5rem;}
.featurette {margin-top: 40px;}
.featW {background-color: #fff;}

.init {margin-top: 5rem;}

.alg-l {text-align: left;}
.alg-r {text-align: right;}

.logoBs img {margin-bottom: 40px;}

p.lead {color: #fff;text-align: justify !important;}
.lead p{text-align: justify;}
h3.lead {color: #fff;font-size: 32px;}
.lead a {color: #fff;text-decoration: none;}
.yellow {color: #FDC32D !important;}
span.text-muted {color:#FDC32D !important;}
.listW {color: #fff;font-size: 20px;text-align: justify;}

.carOp {color: #fff;padding:60px 60px 0 60px;font-size: 28px;}
.carOp p {padding:60px 60px 0 60px;  object-fit: cover;
  object-position: center;
  height: 25vh;
  overflow: hidden;}

.cook {text-align: center;color: #fff;font-size: 14px;}


.w100I img {width: 100% !important;}

.circleImg {text-align: center;}
.circleImg img {width: 200px !important;}

.imgSm img {width: 240px !important;}

.list {color: #fff;font-size: 22px;text-align: left !important;}


.letter-image {
	position: relative;
	top: 50%;
	left: 50%;
	width: 200px;
	height: 200px;
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	cursor: pointer;
}

.animated-mail {
	position: absolute;
	height: 150px;
	width: 200px;
	-webkit-transition: .4s;
	-moz-transition: .4s;
	transition: .4s;}
	
	.body {
		position: absolute;
		bottom: 0;
		width: 0;
		height: 0;
		border-style: solid;
		border-width: 0 0 100px 200px;
		border-color: transparent transparent #fab60a transparent;
		z-index: 2;
	}
	
	.top-fold {
		position: absolute;
		top: 50px;
		width: 0;
		height: 0;
		border-style: solid;
		border-width: 50px 100px 0 100px;
		-webkit-transform-origin: 50% 0%;
		-webkit-transition: transform .4s .4s, z-index .2s .4s;
		-moz-transform-origin: 50% 0%;
		-moz-transition: transform .4s .4s, z-index .2s .4s;
		transform-origin: 50% 0%;
		transition: transform .4s .4s, z-index .2s .4s;
		border-color: #00597c transparent transparent transparent;
		z-index: 2;
	}
	
	.back-fold {
		position: absolute;
		bottom: 0;
		width: 200px;
		height: 100px;
		background: #FDC32D;
		z-index: 0;
	}
	
	.left-fold {
		position: absolute;
		bottom: 0;
		width: 0;
		height: 0;
		border-style: solid;
		border-width: 50px 0 50px 100px;
		border-color: transparent transparent transparent #FDC32D;
		z-index: 2;
	}
	
	.letter {
		left: 20px;
		bottom: 0px;
		position: absolute;
		width: 160px;
		height: 60px;
		background: white;
		z-index: 1;
		overflow: hidden;
		-webkit-transition: .4s .2s;
		-moz-transition: .4s .2s;
		transition: .4s .2s;}
		
		.letter-border {
			height: 10px;
			width: 100%;
      background: repeating-linear-gradient(
        -45deg,
        #00597c,
        #00597c 8px,
        transparent 8px,
        transparent 18px
      );
		}
		
		.letter-title {
			margin-top: 10px;
			margin-left: 5px;
			height: 10px;
			width: 40%;
			background: #FDC32D;
		}
		.letter-context {
			margin-top: 10px;
			margin-left: 5px;
			height: 10px;
			width: 20%;
			background: #FDC32D;
		}
		
		.letter-stamp {
			margin-top: 30px;
			margin-left: 120px;
			border-radius: 100%;
			height: 30px;
			width: 30px;
			background: #FDC32D;
			opacity: 0.3;
		}

	.letter-image:hover {
		.animated-mail {
			transform: translateY(50px);
			-webkit-transform: translateY(50px);
			-moz-transform: translateY(50px);
		}
		
		.animated-mail .top-fold {
			transition: transform .4s, z-index .2s;
			transform: rotateX(180deg);
			-webkit-transition: transform .4s, z-index .2s;
			-webkit-transform: rotateX(180deg);
			-moz-transition: transform .4s, z-index .2s;
			-moz-transform: rotateX(180deg);
			z-index: 0;
		}
		
		.animated-mail .letter {
			height: 180px;
		}
		
		.shadow {
			width: 250px;
		}
	}

.rowPic{box-shadow: 6px 8px 14px 3px rgba(10, 10, 10, 0.2);}
.mgt-20 {margin-top: 20px;}
.logo img {height: 60px;}
.bg-white {background-color: #fff;color:rgb(51,56,81) !important;box-shadow: 1px 1px #ececec;}
.navbar-white a{color:#000 !important;}
.nav-item {margin-bottom: 0px;}
.navbar-expand-md .navbar-nav .nav-link {padding-left: 1rem;padding-right: 1rem;margin-top: 20px;}
a.nav-link {color: #5a5a5a !important;}
.btn-menu {font-size: 12px;text-align: center;padding-top: 0px;color: #5a5a5a;}
.navbar-expand-lg .navbar-nav .nav-link{padding-left: 1rem;padding-right: 1rem;}


.mgtn {margin-top: 0rem !important;}
.prod  p{margin-top: 10px;}


.secPan p {font-size: 110%;}

.tar {text-align: right;}
.tal {text-align: left;}

.navbar-toggler {float: right !important;position: absolute; right: 10px;color: #dcdcdc !important;border-color: #5a5a5a;padding:0px 5px 5px 5px;top:25px;}
.carousel-caption h1 {text-shadow: 1px 1px #000;}
.carousel-caption p {text-shadow: 1px 1px #000;}

.navbar>.container, .navbar>.container-fluid, .navbar>.container-lg, .navbar>.container-md, .navbar>.container-sm, .navbar>.container-xl, .navbar>.container-xxl {
display: inline !important;flex-wrap: inherit;align-items: center;justify-content: space-between;}

.btn-grano {color: #fff;background-color: transparent;border-color: #fff;}

.btn-grano:hover {color: #000;background-color: #fff;border-color: #fff;}

.btn-icon {color: #6c757d;background-color: transparent;border-color: #6c757d;}

.mgtc {margin-top: 80px;}

.chiSiamo {margin-top: 200px;}


.footer {padding: 0px 40px 40px 40px;}

.float-end a {text-decoration: none !important;font-size: 24px}
.float-end {margin-top: 20px;}
.footText {margin-top: 20px;}
h2.conTitle {margin-top: -20px;color:#4C372B;}

.carousel-control-prev-icon,
.carousel-control-next-icon {width: 4rem;height: 4rem;}

.carousel-control-next, .carousel-control-prev {top:10%;width: 5%;opacity:.9;}


@media (max-width: 576px) {
	h3.lead {font-size: 18px;}
	.efft h2::before {font-size: 32px;}
	.efft h2 {font-size: 32px;}
	.iconPanS img{margin-top:20px;}
	.footer h2 {text-align: center;padding:20px;}
	.footer p.lead {text-align: center !important;}
	.circleImg img {width: 120px !important;}
}
@media (max-width: 768px) {
	h3.lead {font-size: 22px;}
}
@media (min-width: 992px) {}
@media (min-width: 1200px) {}
@media (min-width: 1400px) {}