* {
	margin: 0; padding: 0;
}
body { 
	--bottom-height: 10px;
}
.group:before,
.group:after {
  content: "";
  display: table;
} 
.group:after {
  clear: both;
}
.group {
  zoom: 1; /* For IE 6/7 (trigger hasLayout) */
}

/* poppins-300 - latin */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: 'Poppins';
font-style: normal;
font-weight: 300;
src: url('../fonts/poppins-v20-latin-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* poppins-600 - latin */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: 'Poppins';
font-style: normal;
font-weight: 600;
src: url('../fonts/poppins-v20-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

html { 
	font-size: 10px;
}

* {
	font-family: 'Poppins';
	font-style: normal;
	font-weight: 300;
}

#gradient {
	background: rgb(255,255,255);
	background: -moz-linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
	background: -webkit-linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
	background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff",endColorstr="#ffffff",GradientType=1); 
	position: fixed; bottom: 0; left: 0; width: 100%; height: 200px; opacity: .96;
}
#bottombar { position: fixed; bottom: 0; right: 0; width: 100% }
#bottomgrid { height: var(--bottom-height); width: 100%; background: #ff9}
#bottommenu { text-align: right; padding: 0 20px 20px 0 }

#bottomgrid .group > div { float: left; width: 20%; background: #f90; height: var(--bottom-height)}
#logocontainer { padding: 0 0 200px 0 }
#logo { padding: 50px 0 0 50px}
#intro { padding: 50px 0; text-align: center }
	#intro h1 { font-size: 4rem; line-height: 1.2em; margin: 0 0 10px 0 }
	#intro h1 span { font-weight: 600; color: #C54A17 }
	#intro p { font-weight: 300; color: #183A38; font-size: 2.2rem }
	
#bottomgrid div.bottom-grid-1 { background: #08151E; }
#bottomgrid div.bottom-grid-2 { background: #183A38 }
#bottomgrid div.bottom-grid-5 { background: #641E3A }
#bottomgrid div.bottom-grid-4 { background: #C54A17 }
#bottomgrid div.bottom-grid-3 { background: #EFD5AC }

.unit > a { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block; z-index: 1000 }
.unit:hover { opacity: .6 }

#bottommenu { font-size: 0 }
#bottommenu li { display: inline-block; }
#bottommenu li a { font-size: 1.4rem; color: #183A38; opacity: .6; text-decoration: none; margin: 0 0 0 20px }
	
	#bottommenu li a:hover { opacity: 1; color: #641E3A}
	#logocontainer { margin: 0 auto; max-width: 1000px }
	.unit, .default-content {
		-webkit-box-shadow: 40px 40px 80px 5px rgba(0,0,0,0.2);
		box-shadow: 40px 40px 80px 5px rgba(0,0,0,0.2);
		-webkit-border-radius: 8px 8px 8px 8px;
		border-radius: 8px 8px 8px 8px;
		position: relative;
		-webkit-transition: all 350ms ease-in-out;
		-moz-transition: all 350ms ease-in-out;
		-ms-transition: all 350ms ease-in-out;
		-o-transition: all 350ms ease-in-out;
		transition: all 350ms ease-in-out;
	}
	.default-content { background: #fff }
	.unit-text { padding: 30px }
	.unit-logo { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex }
		.unit-logo img { object-fit: contain; width: calc(100% - 80px); height: calc(100% - 90px); margin: auto }
	.unit.unit-last { background: #641E3A; color: #ff692d }
	.unit.unit-last p { padding: 0; font-size: 2rem; line-height: 1.2em; margin: 0 0 10px 0 }
		.unit.unit-last p a {  text-decoration: none; font-weight: 600; color: #fff }
	
	.default-content-inner { padding: 40px 50px}
	
		.default-content ul { 
			margin: 10px 30px 30px 30px
		}
		.default-content ul,
		.default-content p { font-size: 1.5rem; line-height: 1.4em }
		.default-content p { margin: 0 0 20px 0 }
		.default-content p a { color: #183A38; }
		.default-content h1 { font-size: 4rem; line-height: 1.4em; color:#C54A17; margin: 0 0 30px 0  }
		.default-content h2 { font-size: 3rem; line-height: 1.4em }
		.default-content h3 { font-size: 2.5rem; line-height: 1.4em; margin: 30px 0 10px 0; font-family: 'Poppins';
			font-style: normal;
			font-weight: 600; }
			
		.default-content h4 { font-size: 2rem; line-height: 1.4em; margin: 20px 0 5px 0; font-family: 'Poppins';
			font-style: normal;
			font-weight: 600; }
			
			.default-content h3 strong,
			.default-content h4 strong {
				font-family: 'Poppins';
				font-style: normal;
				font-weight: 600;
				color: #183A38
			}
	
	@media screen and (min-width: 1300px) {
		.unit { float: left; width: calc((100% / 3) - 30px); background: #fff; margin: 0 40px 40px 0; height: 200px }
		#logocontainer .group .unit:nth-child(3n) { margin: 0 0 40px 0 }
	}
	
	@media screen and (min-width: 1400px) {
		.unit { height: 250px }
		#logocontainer { max-width: 1200px }
		.unit-logo img { object-fit: contain; width: calc(100% - 130px); height: calc(100% - 30px); margin: auto }
	}
	
	@media screen and (max-width: 1299px) {
		#logocontainer { max-width: calc(100% - 100px); }
		.unit { float: left; width: calc((100% / 3) - 30px); background: #fff; margin: 0 40px 40px 0; height: 200px }
		#logocontainer .group .unit:nth-child(3n) { margin: 0 0 40px 0 }
		.unit-logo img { object-fit: contain; width: calc(100% - 60px); height: calc(100% - 100px); margin: auto }
	}
	
	@media screen and (max-width: 1000px) {
		.unit { height: 150px }
		.unit-logo img { object-fit: contain; width: calc(100% - 60px); height: calc(100% - 30px); margin: auto }	
	}
	
	@media screen and (max-width: 850px) {
		.unit { float: left; width: calc((100% / 2) - 30px); background: #fff; margin: 0 40px 40px 0; height: 200px }
		#logocontainer .group .unit:nth-child(2n),  #logocontainer .unit.unit-last  { margin: 0 0 40px 0 !important }
		#logocontainer .group { padding: 0 0 100px 0 }
		#logocontainer .group .unit:nth-child(3n) { margin: 0 40px 40px 0 }
		#intro { text-align: left; padding: 0 40px 40px;}
		#logo { padding: 40px}
	}
	
	@media screen and (max-width: 650px) {
		#logocontainer { max-width: calc(100% - 80px); }
		.unit { height: 150px }
		.unit.unit-last p { font-size: 1.6rem }
		
		#intro h1 { font-size: 3rem }
		#logo { width: 200px; }
			#logo svg { max-width: 100%; }
			
		.unit { width: calc((100% / 2) - 21px); background: #fff; margin: 0 40px 40px 0; height: 200px }
		
	}
	
	@media screen and (max-width: 550px) {
		.unit { width: 100% !important; height: 250px }
		.unit-logo img { object-fit: contain; width: calc(100% - 120px); height: calc(100% - 100px);  }
		.default-content-inner { padding: 20px 25px}
		
		.default-content-inner h1 { font-size: 2rem; font-weight: 600; margin: 0 0 10px 0 }
		.default-content-inner h2 { font-size: 1.8rem }
		.default-content-inner h3 { font-size: 1.6rem }
	}
	
	@media screen and (max-width: 450px) {
		.unit { height: 150px }
		#intro h1 { font-size: 2rem }
		#intro p { font-size: 1.4rem }
		.unit-logo img { width: calc(100% - 120px); height: 60%;}
	}
	@media screen and (max-width: 350px) {
		.unit-logo img { width: calc(100% - 60px); height: 60%;}
		#logocontainer .unit, #logocontainer .unit.unit-last,
		#logocontainer .group .unit:nth-child(2n), #logocontainer .unit.unit-last { margin: 0 0 20px 0 !important }
		#logo { padding: 20px}
		#intro { padding: 0 20px 30px }
		#logocontainer { max-width: calc(100% - 40px) }
	}