@font-face {
	font-family: Ubuntu-Regular;
	src: url(../fonts/ubuntu/Ubuntu-R.ttf);
}

@font-face {
	font-family: Ubuntu-Bold;
	src: url(../fonts/ubuntu/Ubuntu-M.ttf);
}

@font-face {
	font-family: Ubuntu-Light;
	src: url(../fonts/ubuntu/Ubuntu-L.ttf);
}

@font-face {
	font-family: Ubuntu-Italic;
	src: url(../fonts/ubuntu/Ubuntu-LI.ttf);
}

@font-face {
	font-family: OpenSans-Regular;
	src: url(../fonts/opensans/OpenSans-Regular.ttf);
}

@font-face {
	font-family: OpenSans-Bold;
	src: url(../fonts/opensans/OpenSans-Bold.ttf);
}

@font-face {
	font-family: OpenSans-Light;
	src: url(../fonts/opensans/OpenSans-Light.ttf);
}

@font-face {
	font-family: OpenSans-Italic;
	src: url(../fonts/opensans/OpenSans-Italic.ttf);
}

@font-face {
	font-family: Nobile-Regular;
	src: url(../fonts/nobile/Nobile-Regular.ttf);
}

@font-face {
	font-family: Nobile-Bold;
	src: url(../fonts/nobile/Nobile-Bold.ttf);
}

@font-face {
	font-family: Nobile-Medium;
	src: url(../fonts/nobile/Nobile-Medium.ttf);
}

@font-face {
	font-family: Nobile-Italic;
	src: url(../fonts/nobile/Nobile-Italic.ttf);
}


html, body {
	display: block;
	position: absolute;
	width: 100vw;
	height: 100vh;
	font-family: OpenSans-Regular, Arial, Verdana;
	padding: 0em;
	margin: 0em;
	overflow: hidden;
	}

.main {
	display: flex;
	position: absolute;
	width: 100vw;
	height: 100vh;
	font-family: OpenSans-Regular, Arial, Verdana;
	padding: 0em;
	margin: 0em;
	overflow: auto;
	flex-flow: wrap;
    justify-content: flex-start;
    align-items: flex-start;
    align-content: start;
}
	
br {
	display: block;
	position: relative;
	width: 100%;
	clear: both;
	height: 0.5em;
}

.br {
	display: block;
	position: relative;
	width: 100%;
	height: 0.5em;
	clear: both;
}
.textcenter{
	text-align: center;
}
.overhidden{
	overflow: hidden;
}
.none{
	display: none;
}
.invert{
	filter: invert(1);
}

.line{
	border-bottom: solid 1px #DDDDDD;
}

.dashedline{
	border-bottom: dashed 1px #DDDDDD;
}

.absolute{
	position: absolute;
}

.relative{
	position: relative;
}

.pointer{
	cursor: pointer;
}

.left {
	float : left;
}

.right {
	float : right;
}

.flexcenter{
	display: inline-flex !important;
	width: auto;
	height: auto;
	flex-flow: column !important;
    justify-content: center !important;
    align-items: center !important;
    align-content: center !important;
}

.flexcenterheight{
	display: inline-flex !important;
	width: auto;
	height: auto;
	flex-flow: wrap !important;
    justify-content: start !important;
    align-items: center !important;
    align-content: center !important;
}

.shadow{
	box-shadow: 0.2vh 0.2vh 0.5vh #DDDDDD;
}

@media ( orientation : landscape) {
	html, body {
		font-size: 1em;
		background-color: #fffef9;
	}
	
	.col{
		display: block;
		position: relative;
		margin: 0.5em;
	}
	
	.col1{
		display: block;
		position: relative;
		width: calc(100% - 1em);
		margin: 0.5em;
	}
	
	.col2{
		display: block;
		position: relative;
		width: calc(50% - 1em);
		margin: 0.5em;
	}
	.col3{
		display: block;
		position: relative;
		width: calc(33.3% - 1em);
		margin: 0.5em;
	}
	
	.col4{
		display: block;
		position: relative;
		width: calc(25% - 1em);
		margin: 0.5em;
	}
	
	.wmini{
		width: 4em !important;
	}
	
	.wsmall{
		width: 8em !important;
	}
	
	.wmid{
		width: 20em !important;
	}
	
	.wbig{
		width: 34em !important;
	}
	
	.wbigger{
		width: 44em !important;
	}
	
	.w100{
		width: 100% !important;
	}
	
	.hmini{
		height: 3em !important;
	}
	
	.hsmall{
		height: 5em !important;
	}
	
	.hmid{
		height: 10em !important;
	}
	
	.hbig{
		height: 20em !important;
	}
	
	.hbigger{
		height: 40em !important;
	}
	.h100{
		height: 100% !important;
	}
	
	.mleft1{
		margin-left: 1em !important;
	}
	.mleft2{
		margin-left: 1em !important;
	}
	
	.mright1{
		margin-right: 1em !important;
	}
	.mright2{
		margin-right: 1em !important;
	}
}

@media ( orientation : portrait) {
	html, body {
		font-size: 1em;
		background-color: #fffef9;
	}
	
}