html, body { 
	height: 100%;
    min-height:100%; 
}
body {
	position: relative;
	font-family: Helvetica, "Helvetica Neue", Arial, sans-serif;
	font-size: 62.5%; /*font-size: 62.5%;*/
	line-height: 1.4em;
	color: #fff;
	text-align: center; /* centering content */
	background-color: #000;
}

/* replacing image attribute border="0" in stylesheet is recommended */
img {
	border: 0px;
	display: block; /* xhtml strict: no baseline for image tags (small margin bottom) */
	-ms-interpolation-mode: bicubic;
}

/* DOUBLE SAFETY
*
* never came across a browser not displaying strong as bold text,
* but strong does semantically not necessarily mean that the text has
* to be displayed bold - so with the above rules it is set now.
* -
* em = to emphasize (set to italic)
* -
* strong means a "double" emphasis, whereas em is a "single" emphasis
*
---------------------------------------------------------- */
strong {
	font-weight: 700;
	color: #fff;
	letter-spacing: 0px;
}
em {
	font-style: italic;
}
p {
	margin-top: 0;
	padding: 0;
	margin: 0;
	padding-bottom: 1em;
}
h1 {
	font-weight: 400;
	/*font-size: 1em;
	font-weight: 700;
	letter-spacing: 0.3em;
	color: #444;*/
}
h2 {
	font-weight: 400; 
	font-size: 1.5em;
	line-height: 1.3em;
	padding-bottom: 0.5em;
}
h3 {
	font-size: 108%;
	margin: 0;
	padding: 0;
	letter-spacing: 0px;
	line-height: 1.8em;
}
a:link, a:visited {
	text-decoration: none;
	color: #fff;
	/*border-bottom: 1px dotted #999999;*/
}
a:hover {
	text-decoration: none;
	color: #ccc;
}
hr {
	border: 0;
	border-top: 1px dotted #b0b0b0;
	height: 0;
	background-color: transparent;
	margin: 0;
	margin-bottom: 1.4em;
}
code {
	display: block;
	border: 1px dotted #cc6;
	padding: 12px;
	background-color: #ffe;
	font-size: 1.12em;
}
.cb {
	clear: both;
}
.smalltext {
	font-size: 0.9em;
	line-height: 1.2em;
}
small {
	font-size: 0.9em;
	line-height: 1.5em;
}


/* @group Loading */
.loader {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 60;
  	width: 100%;
  	height: 100%;
  	text-align: center;
  	padding: 1em;
  	display: inline-block;
  	vertical-align: top;
  	background-color: rgba(255,255,255,0.8);
}
.loader div {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: auto;
  margin-top: -40px;
  margin-left: -40px;
  width: 40px;
}
/* @end */


/*
  Set the color of the icon
*/
svg path,
svg rect{
  fill: #000000;
}





#page {
	text-align: center;
	font-size: 1.8em;
	height: 100%;
}


/* self-clear floats */
.group:after {
	content: " "; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}



#logo {
	position: absolute;
	top: 17px;
	left: 60px;
}
#logo img {
	width: 221px;
}


/* @group Header */
#header {
	position: relative;
	border: 0px solid red;
	min-height: 74px;
	z-index: 999;
}
/* @end */



/* @group Content/Pages */
.section  {
	position: relative;
	background-color: transparent;
	height: 100%;
	width: 100%;
    min-height: 760px;
    border: 0px solid red;
    overflow: hidden;
}
.section .intro {
	color: #000;
	-webkit-background-size: auto 100%;
  	-moz-background-size: auto 100%;
  	-o-background-size: auto 100%;
  	background-size: auto 100%;
  	background-position: center center;
  	
  	background-attachment: fixed;
  	background-repeat: no-repeat;
  
	height: 100%;
    min-height: 760px;
  
  	border: 0px solid red;
  	border-bottom: 1px solid #ccc;
}
.section.plus2nd {
	height: auto;
}
.section.plus2nd .intro {
	height: auto;
}
.fp-tableCell { /* all parent elements have to have a height of 100% in order to have image max-height working in FF */
	

}
.section img {
	display: block;
	margin: auto;
	max-width:100%;
    max-height:100%;
    min-height: 760px;
    border: 0px solid red;
}
.section .img2nd {
	/*border: 1px solid red;*/
}

.section h1 {
	position: absolute;
	top: 12px;
	left: 50%;
	z-index: 999;	
	text-align: center;
	width: 360px;
	margin-left: -180px;
	font-size: 2em;
	line-height: 1.2em;
	font-weight: 700; 
}
/* @end */



/* @group About */
#about {
	display:none;
	text-align: left;
	color: #fff;
	background-color: transparent;
	font-size: 1.8em;
	line-height: 1.4em;
	padding: 24px;
}
#about h2 {
	font-size: 1em;	
	font-weight: 700;
	padding-bottom: 0;
}
#about a {
	border-bottom: 1px dotted #fff;	
}
#about a:hover {
	border-bottom: 1px dotted #999;	
}
/* @end */





/* @group Home */
#section-home {
	position: relative;
	min-height: 610px !important;
	/* 
	UPDATE, JUNE 29, 2018: 
	Adds 100px padding top on the home page. We now have enough bulletins to 
	always require at least 3 rows. Without this padding they would touch 
	the upper end of the viewport which looks bad. One could obviously change 
	the way the layout works but it’s too complicated, involving JS and a 
	jQuery plugin. This is a hack but it gets the job done.
	*/
	padding-top: 100px;
}
#section-home .intro {
  	border-bottom: 0px solid #ccc;
	border: 0px solid red;
	height: auto !important;
    min-height: 610px;
}
#section-home ul {
	position: relative;
	text-align: left;
	border: 0px solid red;
	max-width: 950px;
	height: 610px;
	margin: auto;
}
#section-home ul li {
	position: relative;
	list-style: none;
	float: left;
	border: 0px solid red;
	width: 430px;
	height: 610px;
	background-color: #222;
	margin-top: 0;
}
#section-home ul li ul {
-webkit-opacity: 0;
  -moz-opacity: 0;
  opacity: 0;
	
	-webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
  
}
#section-home ul li:hover ul {
	-webkit-opacity: 1;
  -moz-opacity: 1;
  opacity: 1;
}


#section-home ul li a {
	display: block;
}
#section-home ul li:first-child {
	margin-right: 90px;
}
#section-home ul li ul {
	position: absolute;
	top: 0;
	width: 430px;
	height: 610px;
	padding: 0;
	margin-top: 0;
	background-color: rgba(0,0,0,0.7);
	
	border: 0px solid red !important;
}
#section-home ul li ul li {
	position: relative;
	list-style: none;
	float: none;
	width: auto !important;
	height: auto;
	font-size: 0.9em;
	line-height: 1.1em;
	margin-top: 0;
	margin-bottom: 0;
	background-color: transparent;
}
#section-home ul li ul li.download-pdf {
	position: absolute;
	bottom: 62px;
	border: 0px solid red !important;
}
#section-home ul li ul li.link-read {
	padding-top: 36px;
}

#section-home ul li ul li a {
	display: block;
	padding: 3px;
	padding-left: 48px;
	color: #ccc;
}
#section-home ul li ul li a:hover {
	color: #fff;
}
#section-home ul li ul li:first-child {
	margin-right: 0;
}
#section-home img {
	max-width: 100%;
	min-height: 100%;
}



#section-home #home3x {
	min-height: 426px;
}
#section-home #home3x ul {
	position: relative;
	text-align: left;
	border: 0px solid red;
	max-width: 1132px;
	height: 490px;
	margin: auto;
}
#section-home #home3x ul li {
	position: relative;
	list-style: none;
	float: left;
	border: 0px solid red;
	width: 345px;
	height: 490px;
	background-color: #222;
	margin-top: 0;
	margin-right: 30px;
}
/*#section-home #home3x ul li:first-child {
	margin-left: 0;
	margin-right: 0;
}*/
#section-home #home3x ul li ul {
	width: 345px;
	height: 490px;
	position: absolute;
	top: 0;
}
#section-home #home3x ul li ul li {
	position: relative;
	list-style: none;
	float: none;
	width: auto !important;
	height: auto;
	background-color: transparent;
	margin-left: 0;
}
#section-home #home3x ul li ul li.download-pdf {
	position: absolute;
	bottom: 62px;
	border: 0px solid red !important;
}
/* @end */



/* @group unveil.js */
.section img.bulletin-image {
  opacity: 0.7;
  transition: opacity .3s ease-in;
} 
/* @end */



/* @group Navigation */
#nav-main {
	position: fixed;	
	padding-left: 4px;
	padding-bottom: 22px;
	z-index: 70;
	background-color: rgba(255,255,255,0.9);
	border-bottom: 0px solid #000;
}
#nav-main-toggle {
	position: fixed;
	top: 0px;
	left: 18px;
	z-index: 71;
	display: block;
	width: 24px;
	height: 36px;
	background: transparent url(../pics/btn_nav_toggle.png) no-repeat 0 0;
}
#nav-main-toggle2 {
	position: absolute;
	bottom: 0;
	left: 18px;
	z-index: 71;
	display: block;
	width: 24px;
	height: 36px;
	background: transparent url(../pics/icon_close.png) no-repeat 0 0;
}

#backhome {
	display: block;
	position: relative;
	top: 24px;
	left: 18px;
	z-index: 71;
	color: #999;
	font-weight: 700;
	padding-left: 24px;
	border: 0px solid red;
	text-align: left;
}
#backhome:hover {
	color: #000;
}

#menu li a  {
	display: block;
	text-decoration:none;
	padding: 2px;
	padding-left: 24px;
	color: #999;
}
#menu li a:hover {
	color: #000;
}
#menu li.active a:hover {
	color: #000;
}
#menu li a,
#menu li.active a {
	display:block;
}
#menu li.active a, #menu li li.active a {
	color: #000;	
	background: transparent url(../pics/nav_index.png) no-repeat 0 4px;
}
#menu li.active li a {
	color: #999;
	background: none;
}
#menu li li.active a {
	color: #000;
}
#menu {	
	position: relative;
	z-index: 70;
	padding: 0;
	padding-top: 40px;
	padding-left: 18px;
	padding-bottom: 20px;
	margin:0;
	text-align: left;
	font-weight: 700;
	line-height: 1.1em;
	width: 250px;
}
.menu-sticky {
	position: fixed !important; 
	top: 0 !important;
}
.menu-sub {
	display: none;
}


#navUpDown {
	position: fixed; 
	z-index: 9999; 
	bottom: 16%; 
	right: 12px;
}
#navUpDown li {
	border-top: 1px solid #fff;
}
#navUpDown li:first-child {
	border-top: 0;
	border-bottom: 2px solid #000;
}
#navUpDown li a {
	display: block;
	width: 48px;
	height: 36px;
	border: 0px solid red;
}
#btnUp {
	background: transparent url(../pics/btn-up.png) no-repeat center center;
}
#btnDown {
	background: transparent url(../pics/btn-down.png) no-repeat center center;
}


#btn-about {
	display: block;
	position: absolute;
	right: 12px;
	top: 16px;
	z-index: 999;
	font-size: 1.2em;
	letter-spacing: 1px;
	font-weight: 700;
	padding: 6px;
}
/* @end */




/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
/* Styles */
	.section .intro {
  		background-attachment: scroll !important;
	}
}

/* Smartphones (landscape) ----------- */
@media only screen 
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen 
and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
/* Styles */
	.section .intro {
  		background-attachment: scroll !important;
	}

}

/* iPads (landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
	/* Styles */
	
	/* Home vertical */
	#section-home #home3x {
	min-height: auto;
}
#section-home #home3x ul {
	max-width: 450px;
	height: auto;
	margin: auto;
	padding-top: 48px;
}
#section-home #home3x ul li {
	float: none;
	width: 450px;
	height: 639px;
	margin-top: 0;
	margin-left: 0;
}
#section-home #home3x ul li ul {
	width: 450px;
	height: 639px;
}
#section-home #home3x ul li ul li {
	margin-left: 0;
	font-size: 1em;
	line-height: 1.1em;
}
#section-home #home3x ul li ul li a {
	padding-left: 64px;
}
#section-home #home3x ul li ul li.download-pdf {
	bottom: 148px;
}
}