/* The snackbar - position it at the bottom and in the middle of the screen */
.snackbar {
	visibility: hidden; /* Hidden by default. Visible on click */
	min-width: 250px; /* Set a default minimum width */
	margin-left: -125px; /* Divide value of min-width by 2 */
	background-color: #333; /* Black background color */
	color: #fff; /* White text color */
	text-align: center; /* Centered text */
	border-radius: 2px; /* Rounded borders */
	padding: 16px; /* Padding */
	position: fixed; /* Sit on top of the screen */
	z-index: 1; /* Add a z-index if needed */
	left: 50%; /* Center the snackbar */
	bottom: 30px; /* 30px from the bottom */
}

/* Show the snackbar when clicking on a button (class added with JavaScript) */
.snackbar.show {
	visibility: visible; /* Show the snackbar */
	/* Add animation: Take 0.5 seconds to fade in and out the snackbar.
  However, delay the fade out process for 2.5 seconds */
	-webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
	animation: fadein 0.5s, fadeout 0.5s 2.5s;
}

/* Animations to fade the snackbar in and out */
@
-webkit-keyframes fadein {
	from {bottom: 0;
	opacity: 0;
}

to {
	bottom: 30px;
	opacity: 1;
}

}
@
keyframes fadein {
	from {bottom: 0;
	opacity: 0;
}

to {
	bottom: 30px;
	opacity: 1;
}

}
@
-webkit-keyframes fadeout {
	from {bottom: 30px;
	opacity: 1;
}

to {
	bottom: 0;
	opacity: 0;
}

}
@
keyframes fadeout {
	from {bottom: 30px;
	opacity: 1;
}

to {
	bottom: 0;
	opacity: 0;
}

}
.alertElement {
	color: #c01c28;
}

.inactive {
	display: none;
}

.section-wide {
	width: 100%;
	margin: 30px 0;
	margin-bottom: 100px;
	box-sizing: border-box;
}

.section-header {
	margin-bottom: 70px;
}

.section-title {
	font-style: normal;
	font-weight: 600;
	font-size: 48px;
	line-height: 72px;
	letter-spacing: -0.015em;
	text-transform: uppercase;
	color: #04898A;
}

.section-desc {
	font-style: normal;
	font-weight: normal;
	font-size: 20px;
	line-height: 30px;
	letter-spacing: -0.015em;
	max-width: 700px;
}

.section-body {
	
}

.section-container {
	margin: 0 auto;
}

.img-left-rigth-section {
	display: grid;
	grid-template-columns: 1fr 2fr;
	grid-gap: 10px;
	width:100%;
}

.img-right-left-section {
	display: grid;
	grid-template-columns: 2fr 1fr;
	grid-gap: 10px;
	width:100%;
}


.left-rigth-section {
	display: grid;
	grid-template-columns: 1fr 2fr;
	grid-gap: 10px;
	width:100%;
}

.left-rigth-section .section-header .section-desc{
	min-width: 350px;	
}

.img-container {
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	height: 100%;
}

.section-image{
	
}

.itemsgrid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min-content,350px));;
	grid-gap: 10px;
}

.itemsgrid-small {
	display: grid;
	grid-template-columns: repeat(auto-fit, 250px);;
	grid-gap: 10px;
}

.grid-item {
	display: inline-flex;
	vertical-align: middle;
	padding-bottom: 20px;
	padding-left: 20px;
}

.grid-item-icon {
/* 	float: left; */
	background: linear-gradient(180deg, #317A78 0%, #1B3340 100%);
	color: #317A78;
	display: flex;
	background: -webkit-linear-gradient(180deg, #317A78 0%, #1B3340 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	height: 100%;
	margin-right: 20px;
}

.grid-item-icon>span {
	font-size: 90px;
	text-align: center;
}

.grid-item-info {
	display: inline;
}

.grid-item-title {
	font-style: normal;
	font-weight: 600;
	font-size: 24px;
	line-height: 29px;
	display: flex;
	align-items: center;
	letter-spacing: -0.015em;
	text-transform: uppercase;
	color: #04898A;
}

.grid-item-content {
	font-style: normal;
	font-weight: normal;
	font-size: 18px;
	line-height: 30px;
	letter-spacing: -0.015em;
	color: #000000;
}

.grid-item-value {
	font-style: normal;
	font-weight: 600;
	font-size: 50px;
	line-height: 60px;
	display: flex;
	align-items: center;
	letter-spacing: -0.015em;
	color: #13D3D5;
}

.grid-item-label {
	font-style: normal;
	font-weight: 600;
	font-size: 25px;
	line-height: 30px;
	display: flex;
	align-items: center;
	letter-spacing: -0.015em;
	text-transform: uppercase;
	color: #000000;
}

@media only screen and (max-width:980px) {
	.itemsgrid {
		grid-template-columns: repeat(auto-fit, minmax(min-content,80%));;
	}
	
	.itemsgrid-small {
		grid-template-columns: repeat(auto-fit, minmax(170px,1fr));;
	}
	
	.grid-item-title {
		font-size: 15px;
		line-height: 18px;
	}
	
	.grid-item-content{
		font-size: 12px;
		line-height: 16px;
	}
	
	.grid-item-value{
		font-size: 40px;
		line-height: 48px;
	}
	
	.grid-item-label{
		font-size: 25px;
		line-height: 30px;
	}
	
	.grid-item-icon>span {
		font-size: 60px;
		text-align: center;
	}
	
	.img-left-rigth-section{
		grid-template-columns: 100%;
	}
	
	.img-right-left-section{
		grid-template-columns: 100%;
	}
	
	.img-right-left-section img{
		order: -1;
	}
	
	.left-rigth-section{
		grid-template-columns: 100%;
	}
	
	.section-image{
		margin: 20px 0px;
	}
	
	.section-wide {
		margin-bottom: 30pt;
		padding: 0 20pt;
	}
}