body {
	font-family: "Roboto", sans-serif;
	font-optical-sizing: auto;
	font-weight: 400;
	font-style: normal;
	font-variation-settings: "wdth" 100;
	background-color: #ddd;
}
.main-container {
	max-width: 1640px;
	padding-left: 0px;
	padding-right: 0px;
}

.bg-dark {
	background-color: #000 !important;
}

.btn {
	border-radius: 0;	
}
.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: #2ca8a8;
    --bs-btn-border-color: #2ca8a8;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #219090;
    --bs-btn-hover-border-color: #219090;
    --bs-btn-focus-shadow-rgb: 49,132,253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #219090;
    --bs-btn-active-border-color: #219090;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #2ca8a8;
    --bs-btn-disabled-border-color: #2ca8a8;
    letter-spacing: 0.1rem;
    transform: skew(25deg);
    position: relative;
    margin-left: -10px;
}
	.btn-primary span {
		display: block;
		transform: skew(-25deg);
		padding-left: 10px;
	}
	.btn-primary i {
		display: block;
		position: absolute;
		top: -1px;
		left: -10px;
		width: 20px;
		height: 38px;
		background-color: #fff;
		transform: skew(-25deg);
	}

.btn-outline-secondary {
    --bs-btn-color: #000;
    --bs-btn-border-color: #000;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #000;
    --bs-btn-hover-border-color: #000;
    --bs-btn-focus-shadow-rgb: 108,117,125;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #000;
    --bs-btn-active-border-color: #000;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #000;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #000;
    --bs-gradient: none;
    letter-spacing: 0.1rem;
    font-weight: 400;
    transform: skew(25deg);
    position: relative;
}
	.btn-outline-secondary span {
		display: block;
		transform: skew(-25deg);
		padding-left: 10px;
		width: 100%;
		height: 100%;
	}
	/*
	.btn-outline-secondary i {
		display: block;
		position: absolute;
		top: -1px;
		left: -8px;
		width: 20px;
		height: 38px;
		background-color: #fff;
		transform: skew(-20deg);
		border-right: 1px solid #000;
	}
	*/
.btn-dark {
	transform: skew(25deg);
    position: relative;
    margin-left: -12px;
}

	.btn-dark span {
		display: block;
		transform: skew(-25deg);
		padding-left: 10px;
	}
	.btn-dark i {
		display: block;
		position: absolute;
		top: -1px;
		left: -8px;
		width: 20px;
		height: 38px;
		background-color: #2ca8a8;
		transform: skew(-25deg);
	}


.navbar {
	padding-top: 0px;
	padding-bottom: 0px;
}
	.navbar-brand {
		margin: 5px 0 10px 0;
		padding: 0;
		padding-left: 15px;
	}
	.offcanvas {
		background-color: #000 !important;
	}
		.offcanvas-body {
		}
		.offcanvas-body .nav-link {
			border-bottom: 0px;
			border-top: 0px;
		}
		.offcanvas-body .btn-primary {
			transform: skew(25deg);
			font-size: 14px;
			width: 100%;
			margin-left: 10px;
		}
		.navbar-nav {
			min-height: 60px;					
		}
			.nav-item {
				min-height: 60px;
				padding-left: 8px;
				padding-right: 8px;
			}
				.nav-link {
					line-height: 54px;
					padding: 0;
					margin: 0;
					border-top: 3px solid #000;
					border-bottom: 3px solid #000;
				}
				.nav-link.active {
					border-bottom: 3px solid #2ca8a8;
				}
			.nav-item.last {
				padding-right: 0px;
			}
			.nav-item.last .nav-link {
				padding-right: 0px;
			}
			.nav-item .btn-primary {
			    transform: skew(-25deg);
			    margin-top: 13px;
			    line-height: 20px;
			}
				.nav-item .btn-primary span {
					transform: skew(25deg);
				}
				.nav-item .btn-primary i {
					display: none;
				}
			
			.nav-item .badge {
				font-size: 16px;
				border-radius: 0;
				position: relative;
				line-height: 35px;
				transform: skew(-25deg);
				margin-top: 10px;
				background-color: #2ca8a8 !important;
				font-weight: 400;
				--bs-btn-hover-color: #fff;
				--bs-btn-hover-bg: #219090;
				--bs-btn-hover-border-color: #219090;
			}
			.nav-item .badge {
				color: red;
				background-color: redv !important;
			}
			.nav-item .badge span {
				display: block;
				transform: skew(25deg);
				padding-left: 10px;
				width: 100%;
				height: 35px;
			}
			.nav-item .badge i {
				display: block;
				position: absolute;
				top: 0px;
				right: -8px;
				width: 20px;
				height: 35px;
				background-color: #2ca8a8;
				transform: skew(25deg);
			}
	.navbar-toggler {
		border-color: #fff;
		border-radius: 0 !important;
		color: #2ca8a8;
		margin-right: 15px;
	}
	.navbar-toggler:focus {
	    box-shadow: none;
	}
		.navbar-toggler-icon {
			color: #fff;
			background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255, 255, 255, 1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
		}
			
.hero {
	background: white url('../../layout/gfx/hero.jpg') no-repeat top center;
	min-height: 688px;
	margin-top: 0px;
}
	.hero .content {
		padding-top: 25px;
	}
.hero-m {
	background: white url('../../layout/gfx/hero_m_n.jpg') no-repeat top center;
	min-height: 668px;
	margin-top: 30px;
}
	.hero-m .content {
		font-size: 16px;
		padding-top: 15px;
		padding-bottom: 0px;
		background-color: #fff;
		background-color: rgba(255, 255, 255, 0.8);
		margin-left: 0%;
		margin-right: 5%;
		width: 90%;
		/*border: 1px solid red;*/
		transform: skew(-25deg);
		margin-left: -45px;
		margin-top: 140px;
	}
		.hero-m .btn-primary {
			margin-left: -35px;
			margin-top: -55px;
			/*display: none;*/
		}
		.hero-m .content h1 {
			font-size: 22px;
			transform: skew(25deg);
			margin-left: 5px;
		}
		.hero-m .content p {
			font-size: 14px;
			color: #000;
			font-weight: 400;
			transform: skew(25deg);
			margin-left: 40px;
		}
.body-container {
	background-color: transparent !important;
}
	.services {
		background: transparent url('../../layout/gfx/GrungeDarkBg_m.png') no-repeat top center;
		margin-top: -190px;
		padding-bottom: 50px;
	}
		.services h2, .services-m h2 {
			color: #fff;
			font-weight: 500;
			margin-top: 0px;
			margin-bottom: 120px;
		}
		.services-m {
			margin-top: -100px;
			/*background-color: #000;*/
		}
		.services-m h2 {
			
		}
		.services .list {
			
		}
		.services .item {
			background-color: rgba(0, 0, 0, 0.9);
		}
		.services .figure {
			position: relative;
			
		}
			.services .figure h3 {
				color: #fff;
				font-weight: 300;
				font-size: 20px;
				line-height: 26px;
				margin-top: 60px;
				
			}
			.services .figure a {
				position: absolute;
				top: 0px;
				left: 0px; 
				width: 100%;
				height: 100%;
				text-decoration: none;
				background-color: transparent;
				background-color: rgba(0, 0, 0, 0.65);
				cursor: pointer;
			}
			.services .figure a:hover {
				background-color: transparent;
				background-color: rgba(0, 0, 0, 0.3);
			}
				.services .figure a span {
					position: absolute;
					top: 10%;
					left: 0px; 
					width: 100%;
					height: 90%;
					background: transparent url('../../layout/gfx/icon_plug_w_65_tr.png') no-repeat top center;
				}
					.services .figure a span.service_1 {
						background: transparent url('../../layout/gfx/icon_bolt_w_65_tr.png') no-repeat top center;
					}
					.services .figure a span.service_2 {
						background: transparent url('../../layout/gfx/icon_plug_w_65_tr.png') no-repeat top center;
					}
					.services .figure a span.service_3 {
						background: transparent url('../../layout/gfx/icon_charger_w_65_tr.png') no-repeat top center;
					}
					.services .figure a span.service_4 {
						background: transparent url('../../layout/gfx/icon_home_w_65_tr.png') no-repeat top center;
					}
					.services .figure a span h3 {
						margin-left: 10px;
						margin-right: 10px;
					}
		.services .figure-caption {
			text-align: left;
			color: #fff;
			line-height: 18px;
			font-size: 16px;
		}
			.services .figure-caption a {
				color: #2ca8a8;
			}
			.services .figure-caption a:hover {
				color: #fff;
			}
			
		.services .btn-primary i {
			display: block;
			position: absolute;
			top: -1px;
			left: -10px;
			width: 20px;
			height: 38px;
			background-color: #000;
			transform: skew(-25deg);
		}
			
	.prices {
		background-color: #fff;
		padding-top: 50px;
		padding-bottom: 50px;
	}
		.prices h2 {
			color: #000;
			font-weight: 600;
			margin-top: 0px;
			text-align: center;
		}
		
		.prices p {
			/*text-align: center;*/
		}
		
			.prices ul {
				list-style-type:none;
			}
				.prices ul li {
					line-height: 30px;
				}
				.prices ul li i {
					font-size: 22px; 
					color: #2ca8a8;
				}
				
	.prices-m {
		text-align: left !important;
	}
		.prices-m h2, .prices-m p, .prices-m strong {
			text-align: left !important;
		}
		.prices-m ul {
			margin-left: 0px;
			padding-left: 0px;
		}

	.about {
		background: #000 url('../../layout/gfx/GrungeDarkBg.png') no-repeat top center;
		background-position-y: -120px;
		color: #fff;
		padding-top: 50px;
		padding-bottom: 50px;
	}
	
	.testimonials {
		background-color: #f2f2f2;		
		padding-top: 50px;
		padding-bottom: 50px;
	}
		.testimonials .card {
			min-height: 280px;
		}
		.testimonials i.text-info {
			color: #2ca8a8 !important;
		}
			.testimonials h5 {
				padding: 0px;
				margin: 0px;
			}
			.testimonials h6 {
				padding: 0px;
				margin: 0px;
				font-size: 14px;
				font-weight: normal;
				margin-top: 0px !important;
			}
	
	.contact {
		background-color: #2ca8a8;
		padding-top: 50px;
		padding-bottom: 50px;
		color: #000;
	}	
		/*
		.contact .container {
			padding-left: 0px;
			padding-right: 0px;
			margin-left: 0px;
			margin-right: 0px;
		}
		*/
		.contact h2 {
			color: #000;
		}
		.contact a {
			color: #000;
		}
		.contact p {
			line-height: 20px;
		}
		.contact .btn-dark {
			float: left;
			display: inline-block;
		} 
		.contact .alert { 
			float: left;
			display: inline-block;
			line-height: 4px;
			margin-left: 20px;
			border-radius: 0;
			transform: skew(25deg);
			position: relative;
		}
			.contact .alert span {
				display: block;
				transform: skew(-25deg);
				/*padding-left: 10px;*/
			}
			.contact .alert i {
				display: block;
				position: absolute;
				top: -1px;
				right: -10px;
				width: 20px;
				height: 38px;
				background-color: #2ca8a8;
				transform: skew(-25deg);
			}
		.contact .badge {
			font-size: 18px;
			border-radius: 0;
			transform: skew(25deg);
			position: relative;
			margin-left: -10px;
			text-decoration: none;
		}
			.contact .badge span {
				display: block;
				transform: skew(-25deg);
				padding-left: 10px;
			}
			.contact .badge i {
				display: block;
				position: absolute;
				top: -1px;
				left: -10px;
				width: 20px;
				height: 38px;
				background-color: #2ca8a8;
				transform: skew(-25deg);
			}
		
		.form-control {
		    border: 4px solid #219090;
		    border-radius: 0;
		}
		.form-select {
			border: 4px solid #219090;
		    border-radius: 0;
		}
	.ok {
		background-color: #2ca8a8;
		padding-top: 80px;
		padding-bottom: 30px;
		color: #000;
	}	
		.ok a {
			color: #000;
		}
		.ok .btn-dark {
			color: #fff;
		}
			.ok .btn-dark i {
				background-color: transparent !important;
				font-style: normal !important;
			}
		
	.footer, .footer-m-bg {
		color: #FFF;
		min-height: 370px;
		padding-top: 150px;
		background: #2ca8a8 url('../../layout/gfx/footer_bg.png') no-repeat top right;
	}
		.footer .row {
			/*border: 1px solid red;*/
		}
		.footer a, .footer-m-bg a, .footer-m-xs-bg a {
			text-decoration: none;
			color: #fff;
			/*line-height: 30px;*/
			text-decoration: underline;
		}
		.footer a:hover, .footer-m-bg a:hover, .footer-m-xs-bg a:hover {
			text-decoration: none;
			color: #ddd;
		}
		.footer .logo {
			margin-top: 90px;
		}
	.footer-m-bg .col-xs-7 {
		/*background-color: red;*/
	}
	.footer-m-bg .col-xs-5 {
		/*background-color: blue;*/
	}
	.footer-m-bg {
		color: #FFF;
		background: #2ca8a8 url('../../layout/gfx/footer_bg_m.png') no-repeat top center;
	} 
		.footer-m-bg .logo {
			margin-top: 120px;
			width: 220px;
		}
	.footer-m-xs-bg {
		color: #FFF;
		padding-top: 100px;
		min-height: 370px;
		background: #2ca8a8 url('../../layout/gfx/footer_bg_m.png') no-repeat top center;
	} 
		.footer-m-xs-bg .logo {
			margin-top: 28px;
			width: 190px;
		}