@import url(https://fonts.googleapis.com/css?family=Montserrat:400,600&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Parisienne&display=swap); 


@font-face{
	font-family: 'Bank';
	src:url(../fonts/bank.otf);
	font-display: swap;
}
@font-face{
	font-family: 'Butler';
	src:url(../fonts/Butler.otf);
	font-display: swap;
}
@font-face{
	font-family: 'Roboto-Regular';
	src:url(../fonts/Roboto-Regular.ttf);
	font-display: swap;
}
@font-face{
	font-family: 'Roboto-Bold';
	src:url(../fonts/Roboto-Bold.ttf);
	font-display: swap;
}
@font-face{
	font-family: 'Roboto-Italic';
	src:url(../fonts/Roboto-Italic.ttf);
	font-display: swap;
}





:root {
	--body-color: #22211f;
	--body-color-t: #22211fbf;
	--light-grey: #fafafa;
	--light-grey-2: #dce1e6;
	--light-grey-3: #ebecec;
	--light-grey-4: #eeeef0;
	--main-grey: #8c8c91;
	--main-color: #007f6d; 
	--main-color-t: #007f6df2; 
	--main-color-2: #00a94f; 
	--main-color-3: #f58220; 
	--main-color-4: #2e2e3a; 
	--main-color-5: #275d46;
}

a:hover {
	color: var(--main-color-5);
}

h5, h3 , button[type="submit"] {
	font-family: 'Bank', sans-serif;
}

h1, h2 {
	font-family: 'Butler', sans-serif;
}

P , .normal , .normal a , .no_font {
	font-family: 'Montserrat', sans-serif!important;
}

h4, .p-bold {
	font-family: 'Montserrat', sans-serif;
	font-weight: 600;
}


#colgreen { 
	background-image:url("../../images/foto1.jpg");
	padding-left: 5%;
}


p {
	margin-bottom: 0;
	
}

#colgreen::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: var(--main-color);
	opacity: .9;
}

.logo {
	margin-top: 10%;
	z-index: 11;
	
}

.text-welcome {
	transform: rotate(270deg) translateY(-100%);
    top: 50%;
    transform-origin: right;
    z-index: 10;
    left: -50px;
	font-size: 18px;
    height: 12px;
    line-height: 12px;
}

.text-welcome::before {
	content: "";
    position: absolute;
    width: 50VH;
    height: 2px;
    background-color: #fff;
    top: 50%;
    transform: translateY(-50%);
    left: -55vh;
}


#colwhite {
	padding-right: 5%;
}


.dropdown-menu a:hover{
	background-color: var(--main-color);
	color: #fff;
}

.link-menu {
	font-weight: bold;
	font-size: 18px;
	letter-spacing: 3px;
	color: var(--body-color-t);
}
.link-menu:hover {
	color: var(--main-color);
}
.dropdown-toggle::after {
	display: none;
	position: absolute;
	top: 50%;
	transform: translate(100% , -50%);
    right: 0;
} 
.dropdown-menu-end {
	border-radius: 0;
	left: 50%!important;
	transform: translateX(-50%)!important;
	top: calc(100% + 15px)!important;
}
.dropdown-item {
	color: var(--body-color-t);
}
.dropdown-menu:before {
	position: absolute;
	top: -7px;
	left: 50%;
	transform: translateX(-50%);
	display: inline-block;
	border-right: 7px solid transparent;
	border-bottom: 7px solid rgba(0,0,0,.15);
	border-left: 7px solid transparent;
	border-bottom-color: rgba(0,0,0,.15);
	content: '';
}
  
.dropdown-menu:after {
	position: absolute;
	top: -6px;
	left: 50%;
	transform: translateX(-50%);
	display: inline-block;
	border-right: 6px solid transparent;
	border-bottom: 6px solid #ffffff;
	border-left: 6px solid transparent;
	content: '';
}

#colwhite a.icons {
	color: var(--body-color-t);
	font-size: 18px;
	border: 1px solid var(--body-color-t);
	padding: 10px; 
	border-radius: 50%;
	width: 40px;
	height: 40px;	
}

#colwhite a.icons:hover {
	color: var(--body-color);
	border: 1px solid var(--body-color);
}

#colwhite a.icons i , #colwhite a.icons i::before , .contact i::before {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50% , -50%);
}


h1 {
	font-size: 60px;
	font-weight: bold;
}


.btn-first {
	font-size: 18px;
	background-color: var(--main-color);
	font-weight: bold;
	letter-spacing: 3px;
}
.btn-first:hover {
	background-color: var(--main-color-2);
}
.text-justify {
	text-align: justify!important;
} 

.container-foto1 {
	left: 84px;
	right: -84px;
	bottom: -84px;
	background-image: url("../../images/foto1.jpg");
	background-size: cover;
	background-position: center ;

}

.box1 { 
	background: var(--main-color-2);
	text-align: center;

}

.box2 { 
	background: var(--main-color);
	text-align: center;

}

.box3 { 
	background: var(--main-color-3);
	text-align: center;

}


.title { 
	font-weight: bold;
	font-size: 18px;
	letter-spacing: 3px;
}


.btn-card {
	border: 1px solid var(--main-grey);
	font-size: 18px;
	font-weight: bold;
	letter-spacing: 3px;
	color: var(--main-grey);
}
.btn-card:hover {
	border: 1px solid var(--main-color);
	color: var(--main-color);
}


.line {
	height: 50px;
	width: 3px;
	background: var(--main-color);
	margin-left: 50%;
	margin-top: 20px;
	margin-bottom: 20px;
}

h2 {
	font-size: 40px;
	font-weight: bold;

}

.red::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(to bottom, transparent, #000 );
	opacity: .55;
}

.text-red {
	left: 0;
	right: 0;
	bottom: 0;
	font-size: 22px;
	letter-spacing: 3px;
	
}

.square-photo {
	width: 1000px;
	height: 800px;
	background-color: var(--main-color-2);
	left: 55%;
	bottom: -150px;	
}

.text-clienti {
	transform: rotate(90deg) translateY(0);
	top: 50%;
	transform-origin: right;
	z-index: 10;
	left: 93%;
	font-size: 22px;
}

.text-clienti::before {
	content: "";
    position: absolute;
    width: 50VH;
    height: 2px;
    background-color: #fff;
    top: 50%;
    transform: translateY(-50%);
    left: 12vh;
}


.quadrato, .rettangolo {
	object-fit: cover;
}

.bg-flowers {
	background-image: url("../../images/foto9.jpg");
	background-size: cover; 
	background-position: center;
}

.box-text {
	background: var(--main-color-t);	
}

.btn-box {
	border: 1px solid #fff;
	color: #fff;
	font-size: 18px;
	font-weight: bold;
	letter-spacing: 3px;
}

.btn-box:hover {
	color: var(--main-color)!important;
	background: #fff;
}
.text-box {
	position: relative;
	z-index: 2;
}

.services .row {
	justify-content: center;
}

.contact {
	background-color: var(--main-color);
}

.img_cont_det {
	left: 84px;
	width: calc(100vw - 84px - 84px);
	bottom: -84px;
}
.img_cont_det  h1 {
	left: 0;
	right: 0;
	bottom: 168px;
}

.contact i {
	background: white; 
	color: var(--main-color);
	font-size: 18px;
	border: 1px solid;
	padding: 10px; 
	border-radius: 50%;
	width: 40px;
	height: 40px;
	position: relative;
}

.form-group label {
	left: 1px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--main-grey);
}
.form-group label[for="text"] {
	top: 8px;
	transform: translateY(0%);
}
.transl.form-group label {
	font-size: 75%;
	top: 0;	
	left: 8px;
	right: initial;
	transform: translateY(-50%);
}
label a {
	font-family: 'Montserrat' , sans-serif;
	font-weight: 600;
}
label a:hover , .normal a:hover {
	color: var(--main-color-2);
}
.form-check-input[type=checkbox] {
    border-radius: 0;
	box-shadow: none!important;
} 
.form-check-input:checked {
    background-color: var(--main-color);
    border-color: var(--main-color);
}
.form-control {
	border-radius: 0;
}
.form-control:focus {
	border: solid 1px var(--body-color-t);
	padding-left: 16px!important;
}
.form-control {
	box-shadow: none!important;
}

h3 {
	font-size: 36px;
}

h4 {
	font-size: 30px;
}

.contact form {
	font-family: 'Montserrat', sans-serif;
}

.btn-contact {
	text-align: right;
}

.footer {
	background: #2e2e3a;
}

.footer a {
	color: #fff;
}

.footer a:hover {
	color: var(--main-color);
}



#colgreen-servizi { 
	background-color: var(--main-color);
	padding-left: 5%;
}

.container-foto1-servizi {
	left: 100px;
	right: 100px;
	height: 75vh;
	bottom: -50px;
	background-image: url("../../images/foto18.jpg"); /* manca la foto nella cartella che ha mandato, l'ho estrapolata da indesign, ma è sgranata" */
	background-size: cover;
	background-position: center;	
}

.container-foto1-servizi h2 {  
	top: 80%;
    left: 50%;
	transform: translate(-50%, -50%);
}

.first-p-services {
	margin-top: 130px;
}

.description-services {
	margin-top: 70px;
}

.description-services h2, .more-services h2 {
	color: var(--main-color);
}

.btn-pagservices a {
	background-color: var(--main-color);
	padding: 10px 30px;
	font-size: 18px;
	font-weight: bold;
	letter-spacing: 3px;
}

.btn-pagservices {
	text-align: right;
}

.description-services img {
	height: 600px; /* per ora c'è un' altezza fissa per tutte ( le foto inviate hanno misure diverse fra loro) */
    object-fit: cover;
}


.more-services {
	margin-bottom: -50px;
}

.small_img {
	height: 50px;
}
.img_cont_det::before {
	content: '';
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	position: absolute;
	background: linear-gradient(transparent , #00000080);
}
.red img {
	object-fit: cover;
	object-position: center;

}
.main_color {
	color: var(--main-color)!important;
}
.logo_img  {
	cursor: pointer!important
}
@media screen and (min-width: 1200px) {
	
	.first-text {
		position: absolute;
		left: 0;
		width: 650px;
	}
	.first-section {
		height: 100vh;
	}
}
@media screen and (max-width: 1200px) {
	.img_cont_det {
		position: relative!important;
		width: 100%;
		left: 0;
		bottom: unset;
		height: 50vh;
	}
	.img_cont_det h1 {
		bottom: 20px;
	}
	.container-foto1 {
		position: relative!important;
		height: 50vh;
	}
	#colgreen {
		height: 50vh;
	}
	#colgreen {
        width: 100%;
	}

	.container-foto1 {
		left: 0;
		right: 0;
		bottom: 0;
		top: 0;
	}
	.text-welcome{
		left: -75px;
	}

	#colwhite a {
		display: none;
	}

	#colwhite {
		height: 100vh;
		width: 100%;
	}

	.first-text {
		margin-top: initial;
		margin-left: initial;
		width: initial;
	}
	.text-welcome::before {
		display: none;
	}
	.text-welcome {
		top: initial!important;
		transform: rotate(270deg) translateX(100%) translateY(-100%)!important;
		bottom: 15px!important;
	}
	h1 {
		font-size: 36px;
	}

	.cards {
		margin-top: 350px;
		margin-bottom: -20px;
	}

	.cards .col {
		margin-bottom: 50px;
	}

	h2 {
		font-size: 30px;
	}

	.work-for {
		margin-bottom: -70%;	
	}

	.work-for img, .work-for h5 {
		margin-left: 10px;
	}

	.h2-square {
		color: var(--main-color) !important;
		/* left: 5% !important; 
		top: -1450px !important;
		text-align: center;
		position: relative !important; */
	}
	.work-for {
		margin-bottom: 0!important;
	}

	.img-enti-pubblici {
		position: relative !important;
		margin-top: 0 !important;
	}

	.enti-pubblici {
		color: #000 !important;
		top: initial;
		left: initial;
		position: relative !important;
		left: 2% !important;
		top: 1% !important;
	}
	
	.btn-contact {
		text-align: center;
	}

	.text-red {
		font-size: 18px;
	}

	#colgreen-servizi {
		display: none;
	}

	.container-foto1-servizi {
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		height: 75vh;
		
	}

	.first-p-services {
		margin-top: -160px;
		margin-bottom: -50px;
	}

	.description-services {
		text-align: center;
	}

	.description-services img {
		height: 400px; /* per ora c'è un' altezza fissa per tutte ( le foto inviate hanno misure diverse fra loro) */
	}

	.btn-pagservices {
		text-align: center;
		margin: 30px 0 50px 0;
	}
	
    .services img {
		margin-top: 10px;
	}

	.col-inverter {
		order: -1;
	}

	.contact i {
		border: 1px solid;
		padding: 4px; 
		border-radius: 50%;
		width: 30px;
		height: 30px;
		font-size: 16px!important;
		
	}

	.dropdown-item {
		white-space: normal;
		line-height: 1;
		padding-bottom: 10px;
		padding-top: 10px;
	}


}









a {
	color: var(--main-color)
}

a.text-muted:hover {
	color: var(--main-color)!important
}



.hidden {
	visibility: hidden;
	opacity: 0
}

.text-muted {
	color: var(--main-grey)!important
}


::-webkit-scrollbar {
	width: 0!important;
	height: 0!important
}

::-webkit-scrollbar-track {
	background: var(--main-color-4)
}

::-webkit-scrollbar-thumb {
	background: var(--main-color)
}

::-webkit-scrollbar-thumb:hover {
	background: var(--main-color-3)
}

::selection {
	background: #22211f40
}

body,
html {
	max-width: 100%;
	overflow-x: hidden!important;
	font-size: 16px;
	font-family: 'Bank', sans-serif;
	color: var(--body-color)!important
}

a {
	text-decoration: none!important
}

*,
:focus {
	outline: 0!important
}

.navbar-toggler:focus {
	box-shadow: none!important
}

.small,
small {
	font-size: 75%
}

.btn-theme::after,
.btn-white::after,
.ease,
.section_title_blue::after,
.section_title_blue::before,
.step_check .form-check-input:checked::before {
	-webkit-transition: all .25s ease;
	-moz-transition: all .25s ease;
	-ms-transition: all .25s ease;
	-o-transition: all .25s ease;
	transition: all .25s ease
}

.body_color {
	color: var(--body-color)!important
}


.main_color,
.primary_color {
	color: var(--main-color)
}

.bg_secondary {
	background: var(--main-color-2)
}

.bg_primary {
	background: var(--main-color)
}

.secondary_color {
	color: var(--main-color-2)
}

.main_grey {
	color: var(--main-grey)
}

.w-0 {
	width: 0!important
}

.h-0 {
	height: 0!important
}

.cursor-pointer,
.cursor-pointer * {
	cursor: pointer!important
}

.cursor-normal,
.cursor-normal * {
	cursor: default!important
}

img.white_img {
	filter: brightness(0) invert(1)
}

.overflow-hidden {
	overflow-x: hidden!important;
	overflow-y: hidden!important;
	overflow: hidden!important
}

.preloader {
	background-color: #ffffffe6;
	height: 100vh;
	width: 100vw;
	position: fixed;
	overflow: hidden;
	z-index: 1031;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	text-align: center
}

.preloader .spinner {
	display: inline-block;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 75px;
	height: 75px
}

.preloader .spinner div {
	position: absolute;
	border: 3px solid var(--main-color);
	opacity: 1;
	border-radius: 50%;
	animation: spinner 1s cubic-bezier(0, 0, .2, 1) infinite
}

.preloader .spinner div:nth-child(2) {
	animation-delay: -.5s
}

.preloader span {
	display: inline-block;
	position: absolute;
	top: 55%;
	left: 50%;
	transform: translate(-50%, -50%)
}

::placeholder {
	color: var(--body-color-t)!important;
	opacity: 1
}

:-ms-input-placeholder {
	color: var(--body-color-t)!important
}

::-ms-input-placeholder {
	color: var(--body-color-t)!important
}

.grecaptcha-badge {
	visibility: hidden;
	opacity: 0;
	height: 0;
	width: 0;
	overflow: hidden;
	z-index: -2
}

img.navbar-brand {
	height: 50px!important;
	width: auto!important
}

.navbar-toggler {
	border: none!important;
	outline: 0;
	position: relative;
	color: #fff;
	border: none;
	font-size: 30px;
	cursor: pointer;
	padding: 0
}

.nav-toggle {
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
	cursor: pointer;
	height: 2rem;
	right: 0;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 2.5rem;
	z-index: 2
}

.nav-toggle .nav-toggle-bar,
.nav-toggle .nav-toggle-bar::after,
.nav-toggle .nav-toggle-bar::before {
	left: 0;
	position: absolute;
	top: 50%;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
	background: var(--main-color);
	content: '';
	height: .4rem;
	width: 100%
}

.nav-toggle .nav-toggle-bar {
	margin-top: 0
}

.nav-toggle .nav-toggle-bar::after {
	margin-top: .8rem
}

.nav-toggle .nav-toggle-bar::before {
	margin-top: -.8rem
}

.nav-toggle.expanded .nav-toggle-bar {
	background: 0 0!important
}

.nav-toggle.expanded .nav-toggle-bar::after,
.nav-toggle.expanded .nav-toggle-bar::before {
	margin-top: 0
}

.nav-toggle.expanded .nav-toggle-bar::after {
	-ms-transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg)
}

.nav-toggle.expanded .nav-toggle-bar::before {
	-ms-transform: rotate(-45deg);
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg)
}

.eweb_signature {
	background: var(--body-color);
	color: var(--main-grey);
	letter-spacing: 1.5px
}

textarea {
	resize: none
}

.gx-xl-34 {
	--bs-gutter-x: 0.5rem!important;
}

@media screen and (min-width:1200px) {

	.gx-xl-34 {
		--bs-gutter-x: 2rem!important;
	}
	.cards {
		padding-top: 168px!important;
		padding-bottom: 84px!important;
		background-color: #0000000d;
	}
	.services {
		background-color: #0000000d;
	}
	.square_sec::after {
		background: var(--main-color-2);
		position: absolute;
		right: 0;
		left: 50%;
		top: 0;
		bottom: 0;
		height: 100%;
		width: 50%;
		content: '';
		z-index: -1;
	}
	.text-xl-white {
		color: #fff!important;
	}
	
}

@keyframes spinner {
	0% {
		top: 36px;
		left: 36px;
		width: 0;
		height: 0;
		opacity: 1
	}
	100% {
		top: 0;
		left: 0;
		width: 72px;
		height: 72px;
		opacity: 0
	}
}

@keyframes bounce {
	0% {
		transform: translateY(0) translateX(-50%)
	}
	10% {
		transform: translateY(0) translateX(-50%)
	}
	30% {
		transform: translateY(-5px) translateX(-50%)
	}
	50% {
		transform: translateY(0) translateX(-50%)
	}
	60% {
		transform: translateY(0) translateX(-50%)
	}
	65% {
		transform: translateY(0) translateX(-50%)
	}
	100% {
		transform: translateY(0) translateX(-50%)
	}
}

@media screen and (max-width: 768px) {
	.thanks {
		font-size: 50px !important;
	}

	.thank-you {
        margin-top: 0px !important;
	}
}

.swal2-confirm {
	color: #000 !important;;
}