/*************************** Type *******************************/

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

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

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

@font-face {
	font-family: OpenSansCondensed-LightItalic ; src: url(/css/fonts/OpenSansCondensed-LightItalic.ttf);
}

/*************************** Images *****************************/

.bg-slide {
	background-image: 		url(gallery/bg-slide.jpg);
	background-size: 		cover;
	background-position: 	center;
	animation:opac 2.0s}@keyframes opac{from{opacity:0} to{opacity:1}
}

/*************************** Invert *****************************/

.invert {
	filter:invert(100%);
}

/*************************** Link Up ****************************/

a-up {
	-webkit-filter: hue-rotate(180deg); filter: hue-rotate(180deg);
}

a-up:hover {
	-webkit-filter: hue-rotate(0deg); filter: hue-rotate(0deg);
}

/*************************** Link Icon **************************/

a-icon {
	-webkit-filter: hue-rotate(0deg); filter: hue-rotate(0deg);
}

a-icon:hover {
	-webkit-filter: hue-rotate(180deg); filter: hue-rotate(180deg);
}

/*************************** Bg-Color ***************************/

.bg-color-green {
	background-color: 		#a9c82c;
	background-size: 		cover;
	background-position: 	center;
	opacity: 				1.00;
}

.bg-color-midblue {
	background-color: 		#40789d;
	background-size: 		cover;
	background-position: 	center;
	opacity: 				1.00;
}

.bg-color-fuchsia {
	background-color: 		#ea4b94;
	background-size: 		cover;
	background-position: 	center;
	opacity: 				1.00;
}

.bg-color-green {
	background-color: 		#a9c82c;
	background-size: 		cover;
	background-position: 	center;
	opacity: 				1.00;
}

.bg-color-white {
	background-color: 		#FFFFFF;
	background-size: 		cover;
	background-position: 	center;
	opacity: 				1.00;
}

.bg-color-grey {
	background-color: 		#f5f5f5;
	background-size: 		cover;
	background-position: 	center;
	opacity: 				1.0;
}

.bg-color-blue-10 {
	background-color: 		#e4e6f2;
	background-size: 		cover;
	background-position: 	center;
	opacity: 				1.0;
}

.bg-color-blue-20 {
	background-color: 		#cad0e5;
	background-size: 		cover;
	background-position: 	center;
	opacity: 				1.0;
}

.bg-color-blue-30 {
	background-color: 		#b0bad7;
	background-size: 		cover;
	background-position: 	center;
	opacity: 				1.0;
}

.bg-color-blue-40 {
	background-color: 		#97a5ca;
	background-size: 		cover;
	background-position: 	center;
	opacity: 				1.0;
}

.bg-color-blue-50 {
	background-color: 		#7e91bc;
	background-size: 		cover;
	background-position: 	center;
	opacity: 				1.0;
}

.bg-color-blue-60 {
	background-color: 		#667fb0;
	background-size: 		cover;
	background-position: 	center;
	opacity: 				1.0;
}

.bg-color-blue-70 {
	background-color: 		#4d6ea4;
	background-size: 		cover;
	background-position: 	center;
	opacity: 				1.0;
}

.bg-color-blue-80 {
	background-color: 		#335d96;
	background-size: 		cover;
	background-position: 	center;
	opacity: 				1.0;
}

.bg-color-blue-90 {
	background-color: 		#154f8b;
	background-size: 		cover;
	background-position: 	center;
	opacity: 				1.0;
}

.bg-color-blue-100 {
	background-color: 		#004380;
	background-size: 		cover;
	background-position: 	center;
	opacity: 				1.0;
}

.bg-color-blue-gradient {
	background:             rgb(202,208,229);
    background:             linear-gradient(0deg, rgba(202,208,229,1) 0%, rgba(202,208,229,1) 30%,rgba(255,255,255,1) 100%);
	background-size: 		cover;
	background-position: 	center;
	opacity: 				1.0;
}

/*************************** Table ******************************/

.table-text {
	color: #666666;
	padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
	font-family: OpenSansCondensed-Light;
	letter-spacing: 0px;
    font-size: 24px;
    text-decoration: none;
	border-bottom: 1px solid #777777;
}

.table-text-total {
	color: #004380;
	padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
	font-family: Abel-Regular;
	letter-spacing: 0px;
    font-size: 24px;
    text-decoration: none;
	border-bottom: 3px solid #004380;
}

.table-title {
	color: #555555;
	padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
	font-family: Abel-Regular;
	letter-spacing: 0px;
    font-size: 36px;
    text-decoration: none;
	border-bottom: 1px solid #777777;
}

.table-title-medium {
	color: #004380;
	padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
	font-family: Abel-Regular;
	letter-spacing: 0px;
    font-size: 24px;
    text-decoration: none;
	border-bottom: 0px solid #777777;
}

/*************************** Fonts ******************************/

.text {
	color: #666666;
	padding-top: 20px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
	font-family: OpenSansCondensed-Light;
	letter-spacing: 0px;
    font-size: 24px;
    text-decoration: none;
}

.text-white {
	color: #ffffff;
	padding-top: 20px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
	font-family: OpenSansCondensed-Light;
	letter-spacing: 0px;
    font-size: 24px;
    text-decoration: none;
}

.link {
	color: #004380;
	padding-top: 20px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
	font-family: OpenSansCondensed-Light;
	letter-spacing: 0px;
    font-size: 24px;
    text-decoration: underline;
}

.text-diagram {
	color: #666666;
	padding-top: 20px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
	font-family: OpenSansCondensed-Light;
	letter-spacing: 0px;
    font-size: 16px;
    text-decoration: none;
}

.title {
	color: #555555;
	padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
	font-family: Abel-Regular;
	letter-spacing: 0px;
    font-size: 36px;
    text-decoration: none;
	border-bottom: 1px solid #777777;
}

.title-slide {
	color: #555555;
	padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
	font-family: Abel-Regular;
	letter-spacing: 0px;
    font-size: 36px;
    text-decoration: none;
	border-bottom: 1px solid #777777;
}

.title-slide-white {
	color: #ffffff;
	padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
	font-family: Abel-Regular;
	letter-spacing: 0px;
    font-size: 36px;
    text-decoration: none;
	border-bottom: 1px solid #ffffff;
}

/*************************** Fonts Short Links ******************/

.short-title {
	color: #004380;
	padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
	font-family: Abel-Regular;
	letter-spacing: 0px;
    font-size: 24px;
    text-decoration: none;
}

/*************************** Navi-Prime *************************/

/* Dropdown Button */
.dropbtn {
    /* background-color: #3498DB; */
    /*color: white;*/
    border: none;
    cursor: pointer;
}

/* Dropdown button on hover & focus */
.dropbtn:hover, .dropbtn:focus {
	-webkit-filter: hue-rotate(180deg); filter: hue-rotate(180deg);
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
    position: sticky;
    display: inline-block;
	opacity: 1.0;
    /*width: 980px;*/
    z-index: 1;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
    display: none;
    position: sticky;
	opacity: 1.0;
    /*width: 980px;*/
    z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {	

}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {

}

/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {
	display:block;
}

/*************************** Animation **************************/

.animate-left {
	position:relative;
	animation:animateleft 1.2s}@keyframes animateleft{from{left:-300px;opacity:0} to{left:0;opacity:1}
}

.animate-right {
	position:relative;
	animation:animateright 1.2s}@keyframes animateright{from{right:-300px;opacity:0} to{right:0;opacity:1}
}

.animate-zoom {
	position:relative;
	animation:animatezoom 1.2s}@keyframes animatezoom{from{transform:scale(0)} to{transform:scale(1)}
}

.animate-opacity {
	animation:opac 2.0s}@keyframes opac{from{opacity:0} to{opacity:1}
}

/*************************** Slide ******************************/

/* Slideshow container */
.slideshow-container {
  position: relative;

}

/* Slides */
.mySlides {
  display: none;
}

/* Next & previous buttons */
.prev {
  left: 0;
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -30px;
  padding: 16px;
  color: #fff;
  background-color: rgba(0,0,0,0.8);
  font-weight: bold;
  font-size: 36px;
  border-radius: 0px 10px 10px 0px;
  user-select: none;
}

.next {
  right: 0;
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -30px;
  padding: 16px;
  color: #fff;
  background-color: rgba(0,0,0,0.8);
  font-weight: bold;
  font-size: 36px;
  border-radius: 10px 0px 0px 10px;
  user-select: none;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
  color: bbb;
}

/* The dot/bullet/indicator container */
.dot-container {
    text-align: center;
    padding: 10px;
    background: #FFFFFF;
}

/* The dots/bullets/indicators */
.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

/* Add a background color to the active dot/circle */
.active, .dot:hover {
  background-color: #717171;
}

/* Add an italic font style to all quotes */
q {font-style: italic;}

/* Add a blue color to the author */
.author {color: cornflowerblue;}

/*************************** Scrolling **************************/

html {
  scroll-behavior: smooth;
}