:root {
	--oly-main: #333; 
	--oly-li: #f9fafd;	
	--oly-bg-main: rgb(240, 252, 250);
	--oly-bg-header: #f9fafd;
	--oly-bg-1: #eedddd;
	--oly-bg-2: #c8dcf0;
	--oly-menu-color: #007464;
	--oly-menu-color-li: #009c8e;	
	--oly-menu-hover: #333;
	--oly-menu-active: #2c7be5;
	--oly-sched-bk: #007464;
	--oly-center-bg: #f8f9fa;
	/* Bootstrap */
	/*--bs-btn-active-bg: #005444;
	--bs-btn-active-border-color: #005444;
*/
	}

html {
	font-size: 15px;
}

body {
	font-family: 'Roboto', sans-serif;
	font-size: 15px;
	font-weight: 400;
	color: var(--oly-main);
	background-color: var(--oly-bg-main);
	margin: 3px;
}

img {
	max-width: 100%;
	height: auto;
}

a {
	color: var(--oly-menu-color);
}

a:hover {
	color: var(--oly-menu-hover);
}

a.btn:hover, a.btn:active {
	color: var(--oly-li) !important;
}


h1 {
	text-align: center;
	font-size: 16px;
}

h2 {
	text-align: center;
	font-size: 15px;
}

.oly-space {
	margin: 1px;
}

.page-link {
  color: var(--oly-menu-color);
}

.page-link:hover {
	color: var(--oly-menu-hover);
}

.page-link:active, .page-link:focus {
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 4px var(--oly-menu-color);
}

.page-item.active .page-link {
  color: var(--oly-bg-1);
	background:  var(--oly-menu-color);
	border-color: var(--oly-menu-color);	
}

.page-item:active, .page-item:focus {
  border-color: var(--oly-menu-color);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 4px var(--oly-menu-color);
}


.btn {
  color: var(--oly-li);
	background:  var(--oly-menu-color) !important;
	border-color: var(--oly-menu-color) !important;
	
}

.btn:active, .btn:focus {
  color: var(--oly-li)  !important;
	background: var(--oly-menu-color-li) !important;
	border-color: var(--oly-menu-color-li) !important;	
	box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px var(--oly-menu-color);
}

.btn:hover {
  color: white !important;
	background: var(--oly-menu-color-li) !important;
	border-color: var(--oly-menu-color-li) !important;	
}

.btn-primary {
  color: var(--oly-li) !important;
	background:  var(--oly-menu-color) !important;
	border-color: var(--oly-menu-color) !important;
	
}

.btn-primary:active, .btn-primary:focus {
  color: white  !important;
	background: var(--oly-menu-color-li) !important;
	border-color: var(--oly-menu-color-li) !important;	
	box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px var(--oly-menu-color);
}


.w70 {
	width: 70%;	
}

.form-control:focus {
  border-color: var(--oly-menu-color);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px var(--oly-menu-color);
}


/* Header */

header {
	margin: 2px;
}

.navbar-light .navbar-nav .nav-link {
	font-weight: 500;
	text-transform: uppercase;
/*  background-color: #f9fafd;*/
}

.top-menu li a::after {
	content: '';
	display: block;
	width: 100%;
	background-color: var(--oly-bg-1);
	height: 1px;
	transition: all .05s;
	transform: scale(0);
}

.top-menu li a:hover::after {
	transform: scale(1);
}

/* Header */

/* Footer */
.afooter {
	font-size: 12px;
}
/* --Footer */


/* Left menu */

.left-menu li a {
color: var(--oly-menu-color);
font-weight: 500;
}

.left-menu li a:hover {
	color: var(--oly-menu-hover);

}
/* News */
.news a {
	color: var(--oly-menu-color);
}

.news a :hover {
	color: var(--oly-menu-hover);
}


/* Documents */

.docs {
	border-color: var(--oly-menu-color);	
}

.docs :hover {
	border-color: var(--oly-menu-hover);
}

.docs i {
	font-size: 25px;
}

.docs h5 {
	font-size: 14px;
	font-weight: 300;	

}

.oly-docs {
	margin: 0 auto 15px;
	width: 45px;
	height: 45px;
	border: 2px solid;
	display: flex;
	justify-content: center;
	align-items: center;
}
/* --Documents */

/* Fast links */

.docs {
	border-color: var(--oly-menu-color);	
}

.flink :hover {
	border-color: var(--oly-menu-hover);
}

.flink i {
	font-size: 25px;
}

.flink h5 {
	font-size: 14px;
	font-weight: 400;	

}

.oly-flink {
	margin: 0 auto 15px;
	width: 100px;
	height: 100px;
	border: 2px solid;
	display: flex;
	justify-content: center;
	align-items: center;
}
/* --Fast links */



/* Schedule */
.sched {
	border-color: var(--oly-sched-bk);
	border: 1px solid;
	width: 100%;
	font-size: 12px;
	color:  var(--oly-menu-color);	
}

/* --Schedule */

.img-caption {
  font-size: 14px;
  color: #777;
  padding: 7px;
}

.img-container {
  padding: 5px;
}

@media (max-width: 600px) {
  .img-container img {
      width: 100%;
      max-width: 600px;
  }
}

.img-container-small img {
  float: left;
  margin-right: 20px;
  max-width: 300px;
  width: 150px;
}

@media (max-width: 600px) {
  .img-container-small img {
      width: 100%;
      max-width: 600px;
      align-items: center;
      justify-content: center;
  }
}

.img-area {
  display: flex;
  align-items: center;
  justify-content: center;
}