/* ----------------------------
General classes & ids
---------------------------- */
:root {
	font-family: Formata-Light, Verdana, 'Helvetica Neue', Helvetica, sans-serif;
	color:#fff9e7;
	background: #1f3549;
}

@font-face {
    font-family: Formata-Light;
    src: url(/..theTree/fonts/Formata-Light.otf);
}
@font-face {
    font-family: frutigeropen;
    src: url(/..theTree/fonts/frutigeropen.ttf);
}
/*::-webkit-scrollbar { width:8px; }*/
/*::-moz-selection { color:#333; background:#ffd17f; }*/
::selection { color:#333; background:#ffd17f; }

* { font: 100% Formata-Light, Verdana, 'Helvetica Neue', Helvetica, sans-serif;
	color:#fff9e7;
}

.body {
	display: grid;
	grid-template-rows: 4vh 96vh;
	top: 0;
	left: 0;
	bottom: 100vh;
	right: 100vw;
	padding: 0;
	position: fixed;
}
#bodyMain {
	z-index: 21;
	grid-row: 2;
	display: grid;
	grid-template-rows: max-content;
	justify-content: center;
	align-content: start;
	overflow-y: auto;
	position: static;
}
.bodyMainRow {
	padding: 5vh 1vw;
	--nOfCards: 2;
	--cardWidth: 20vmax;
	--fontSize: .9vmax;
	width: 100vw;
}
.theCards {
	display: grid;
	grid-template-columns: repeat(var(--nOfCards),var(--cardWidth));
	gap: 10px;
	justify-content:center;
/*	padding: 0 .5vw 2vh .5vw;*/
}

.dataCard {
	height: 10vmax;
/*	border: solid 1px #748da4;*/
	font-size: var(--fontSize);
/*	position:relative;
	height: 100%;
	width: 100%;*/
}
.dataCardContent {
	display:grid !important;
	grid-template-columns: 10vh auto;
	height:100%;
}
.dataCardContent>ul {
	height:100%;
}
.dataCard .field, .dataCard .field * {
	margin: 0 !important;
	padding: 0 !important;
	border: transparent !important;
}
.dataCard .field:hover, .dataCard .field *:hover {
	border: transparent !important;
}

.dataCard .field span {
	width:100% !important;
	display: flex;
	flex-direction: column;
	align-content: center;
	justify-content: left;
}
.dataCard .field span:first-child {
	display: none;
}
.dataCardThumb, .dataCardThumb * {
	height: 100%;
	padding: 2%;
}
.dataCardThumb .thumbImg {
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
}

.dataCardText {
	padding-left: 1vw;
}
.dataCardText * {
	width:100% !important;
}
.dataCardText li:first-child * {
	font-size: 120%;
	text-shadow: 0px 0px 1px;
}
.dataCardText li:last-child {
	color: #a8b8dd;
}

#allYouNeed {
	--iconSize: 4vmax;
}	
#allYouNeed>h1 {
	width: 100%;
	text-align: center;
	font-size: 1.5vmax !important;
	padding-bottom: 3vh;
}
#allYouNeed .dataCard {
	height: var(--iconSize);
}
#allYouNeed .dataCardContent {
	grid-template-columns: var(--iconSize) auto;
}

#bussinesTools {
	display: grid;
	grid-template-columns: 50% 50%;
	gap: 10px;
	justify-content:center;
	background-color: #a8b8dd;
/*	#fff9e7;*/
}
#bussinesTools * {
	color: #1f3549;
}
#bussinesTools #_123gFeatures {
	display: grid;
	justify-items: center;
	background: url("/img/123g-menu.png") top center no-repeat;
	padding-top:100px;

}
#bussinesTools #slideShow {
	background: url("/img/home/123g_p01s.jpg") center / contain no-repeat;

}
@media screen and (max-width:1440px) {
	:root {
	}
}
@media screen and (max-width:1120px) {
	:root {
	}
}
@media screen and (max-width:800px) {
	:root {
	}
}
@media screen and (max-width:480px) {
	#bodyMain {
/*		grid-template-rows: 60vh auto;*/
	}
	.bodyMainRow {
/*		padding: 1vh 1vw;*/
		--nOfCards: 1;
		--cardWidth: 90vw;
		--fontSize: 2vmax;
		width: 100vw;
	}
#allYouNeed {
	--iconSize: 8vmax;
}	
	#allYouNeed>h1 {
		font-size: 4vmax !important;
	}
	#bussinesTools {
		grid-template-columns: unset;
		grid-template-rows: max-content 90vw;
	}
}