﻿*{	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	box-sizing:border-box;}
article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary {display:block}

/* *********************************************************
	Initial Structure Settings are for Mobile
************************************************************/
html, body {margin: 0; padding: 0; background: #fff;}
body, table {
	font-family: "Open Sans", "Lucida Sans", "Lucida Sans Regular", "Lucida Grande", "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
	font-size: 16px;
	color: #444; 
	line-height: 140%;
}

.row {clear: both;}
.row:after {content: ""; clear: both; display: block;}
[class*="col-"] {float: left; padding: 0; width: 100%;}

/*	LANGUAGE FLAGS ON THE TOP OF PAGE
	===================================== */
#flagBG {
	position: absolute;
	right: 8px;
	top: 0;
	padding:0;
	margin: 0;
	z-index:1; 
}
#flag img {margin: 0; display: block;}
#flagBG a {position: relative; display: inline-block; padding: 6px}

/*	HEADER - including Logo
	=====================================================*/
#header {overflow: hidden;}
#fixedLogoTitle {
	position: absolute;
	top: 20px;
	left: 0;
	padding-left: 5px;
	z-index: 2;
}

#logo {
	height: 50px;
	overflow: hidden;
	text-align: center;
	padding: 0;	
}
#logo img {margin: 0 auto; max-height: 100%;}

/* If logo is text - Title and Subtitle
**************************************/
#header h1,
#header h2 {
	font-family: inherit;
	font-size: 1.2em;
	font-weight: 400;
	margin: 0 !important;
	padding: 0 !important;
	display: inline;
	line-height: 100%;
}
#header h1 a {color: #999 !important;}
#header h1 a:hover {color: #000 !important;}

#header h2 {
	font-size: 0.8em;
	font-style: italic;
	font-weight: 500;
	color: #999;
	text-transform: lowercase;
}

/*	=================================
	TOP NAVIGATION:
	If transformed to Fixed Position by javaScript, set top/right/left values
	=====================================================*/
#nav {position: relative;
	top: 0;
	left: 0;
	right: 0;
	height: 44px;
	text-align: center;
	background: #fff;
	border-bottom: 1px solid #96706A;
	z-index: 10;
	box-shadow: 0 4px 7px 1px rgba(150,112,106,0.3), 0 6px 9px 0 rgba(150,112,106,0.4);
}

/*	=================================
	CONTENT - important to set to Position Relative
	=====================================================*/
#content {
	position: relative;
	background: #fff;
	overflow-x: hidden;
	overflow-y: auto;
	padding-bottom: 40px;
}

#content .row {padding: 20px 10px;}
#content .row .col-12,
#content .row .col-9,
#content .row .col-6,
#content .row .col-8 {margin: 0; padding: 0;}

#content .row .col-4,
#content .row .col-3 {margin: 0; padding: 8px 0 00;}

.section {clear: both; padding-bottom: 20px; margin-bottom: 20px;}
.section::after {content: ""; clear: both; display: block;}
.section .narrow {padding: 0;}

/*	=================================
	FOOTER 
	=====================================================*/
#footer {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	background: #111;
	text-align: center;
	z-index: 1
}
#footer .foterNotes,
#footer .power {font-size: 0.8em; line-height: 100%; padding: 6px; color: #666;}
#footer .power {float: right;  z-index: 1}
#footer .foterNotes {float: left; padding: 0 6px;}
#footer .foterNotes img {
	margin-left: 6px;
	height: 2.2em;
	display: inline-block;
	line-height: 100%;
}

.power a {color: #666;}
.power a:hover {color: #aaa}

.sxScrollTop {
	display: inline-block;
	width: 40px;
	margin: 0 auto;
	cursor: pointer;
	color: #ccc;
	font-size: 1.7em;
	line-height: 100%;
	text-align: center;
	background: #666;
	z-index:9999;
	opacity:0.5;
	display: none;
}
.sxScrollTop:hover {opacity: 1;}


/* END
**************************************/