body { padding: 0; margin: 0; }

* {
	font-family: "Open Sans", sans-serif;
	box-sizing: border-box;
}

h1 { font-size: 1.5rem !important; }
h2 { font-size: 1.25rem !important; }

a { text-decoration: none; }

table { border-collapse: collapse; }

.orangeLink a, .orange { color: #f58612; }

header {
	margin-left: 0;
	margin-right: 0;
	padding: 10px calc(50vw - 50%) 0 calc(50vw - 50%);
	background-color: #B3B3B3;
}

header, header * {
	font-size: 16px;
	font-style: normal;
	color: black;
}

header ul {
	list-style-type: none;
	display: table;
}

header ul li {
	font-weight: bold;
	padding: 0 10px;
	position: relative;
    cursor: pointer;
    display: table-cell;
    z-index: 9;
}
header td { white-space: nowrap; }

header .current, 
header .current *,
header a:hover { color: rgb(6, 107, 163); }

footer { background: #F58612; }

footer * {
	font-size: 12.5px;
	color: black;
}

footer div {
	display: inline-block;
	padding: 10px 2px; 
}

footer a:hover { text-decoration: underline; }

section {
	background-image: url("images/bkg.png");
	background-repeat: repeat;
	min-height: 300px;
	padding: 20px calc(50vw - 490px);
}

.photoslider {
	width: 100%;
	height: 390px;
	box-shadow: rgb(102, 102, 102) 0px 0px 12px 0px;
	position: relative;
}

.photoslider > div {
	position: absolute;
	top: 0;
	left: 0;
	background-color: rgba(0, 0, 0, 0);
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-attachment: scroll;
	background-size: cover;
	
	width: 100%;
	height: 390px;
	opacity: 0;
	
	transition: opacity 1s linear;
}

.photoslider > div.active { opacity: 1; }

.flex {
	display: flex;
	flex-flow: row wrap;
	justify-content: space-evenly;
}

.btn {
    color: #066ba3;
    border: none;
    font-size: 20px;
    padding-top: 5px;
    padding-bottom: 5px;
    width: 100%;
	
}

.photo { flex-grow: 1; }

.photo img {
	height: 150px;
	max-height: 100%;
	min-width: 100%;
	object-fit: cover;
	vertical-align: bottom;
	box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.33);
}

.NOWRAP { white-space: nowrap; }
.AC { text-align: center; }
.AL { text-align: left; }
.AM { vertical-align: middle; }

div.ACM { position: relative; }
div.ACM img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

.DEBUG td, .DEBUG div { border: 1px solid red; }


@media (min-width: 1001px){
	.mDesk { }
	.mMobi { display: none !important; }	
}

@media (max-width: 1000px){
	.mDesk { display: none !important; }
	.mMobi { }
	section { padding-left: 10px; padding-right: 10px; }
}


.MobiButton {
	padding-top: 10px;
	width: 25vw;
	max-width: 100px;
	height: 80px;
	background: #f58612;
	color: white;
	font-weight: bold;
	border-radius: 10px;
	text-align: center;
}

.MobiButton.Mini {
	max-width: 50px;
}

#MobiMenu {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  right: 0;
  background-color: #111;
  overflow-x: hidden;
  padding-top: 60px;
  transition: 0.5s;
}

#MobiMenu a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
  transition: 0.3s;
}

#MobiMenu a:hover { color: #f1f1f1; }

#MobiMenu a.current { color: #f58612; }


/* Position and style the close button (top right corner) */
#MobiMenu .close {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}

/* Style page content - use this if you want to push the page content to the right when you open the side navigation */
#main {
  transition: margin-left .5s;
  padding: 20px;
}

/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
	#MobiMenu {padding-top: 15px;}
	#MobiMenu a {font-size: 18px;}
}