:root{
	--offWhite:#F1FFFA;
	--menuBg:#464e47;
	--menuActive:#657153;
	--menuHover:#8aaa79;

    --trBlack:rgba(0,0,0,0.3);
	--vltGrey:#d8d7e3;
	--ltGrey:#B7B6C2;
	--medBrown:#8E8176;
	--yellow:#cbcb00;
}



/* ######## structure ######## */

body {
    font-family: 'Open Sans', sans-serif;
}

h1, h2, h3{
	font-family: 'Dekko', cursive;
    color: var(--offWhite);
    text-align: center;
}

p{
    color: var(--offWhite);
    z-index: 1;
}

hr 	{
	width: 100%; 
	color: var(--offWhite); 
	height: 1px;
	border: 0px;
	background-color:var(--offWhite);
}


/* ######## nav bar ######## */

/* navbar */
.navbar{
    background: var(--menuBg);
    padding: 10px 20px;
}

.navbar-background{
    padding: 2px 20px;
}

.nav-link{
    color: var(--offWhite);
    font-size: 15px;
    padding: 5px 20px!important;
    margin: 5px;
    border-radius: 5px;
    transition: all 0.5s ease-in-out;
}

.nav-link:hover{
    color: var(--offWhite);
    background: var(--menuHover);
}

.nav-active{
    color: var(--offWhite);
    font-size: 15px;
    padding: 5px 20px!important;
    background: var(--menuActive);
}

.navbar-toggler{
    border: 3px solid var(--menuHover);
    padding: 3px;
}

.bar1, .bar2, .bar3{
    width: 23px;
    height: 3px;
    margin: 5px;
    background: var(--menuHover);
    transition: all 0.5s ease;
}

.change .bar1{
    transform: rotate(-45deg) translate(-5px, 6px);
}

.change .bar2{
    opacity: 0;
}

.change .bar3{
    transform: rotate(45deg) translate(-5px, -6px);
}



/* ######## main page ######## */

.text-col{
    background: var(--trBlack);
    border: 0.5px solid var(--trBlack);
    border-radius: 25px;
    font-size: 1.25rem;
}

.nav-icons{
    opacity: 1;
    height: 70px;
    width: auto;
    transition: all 0.5s ease-in-out;
}

.nav-icons:hover{
    transform: scale(1.2);
    color: white;
}

.nav-icons-na{
    opacity: 0;
    height: 70px;
    width: auto;
}

.week-list{
    padding-bottom: 15px;
}

.day-list{
    padding-bottom: 5px;
	color: var(--offWhite);
}

.text-col a{
    color: var(--offWhite);
}

.text-col a:hover{
    color: var(--menuHover);
    text-decoration: none;
}

.text-col ul {list-style: none}
.text-col li::before {content: "•   "; color: var(--offWhite)}

.img-inline{
    width: 100%;
    height: auto;
}

p .sidenote{
    color: var(--green);
    font-size: 8px;
    font-style: italic;
}

.carousel-caption {
    opacity: 0.8;
    color: var(--offWhite);
}

.carousel-caption-tc{
    top: 0;
    bottom: auto;
}

.carousel-caption-bc{
    bottom: 90;
    top: auto;
}

/* ######## panorama ######## */
.panorama {
	height: 500px;
	overflow-x: hidden;
	overflow-y: hidden;
	img {
		height: 100%;
	}
	meta: true;
}

.title{
    color: var(--offWhite);
    font-size: 15px;
	text-align: center;
	margin-top: 13px;
}
/* ######## end of panorama ######## */

.footer-copyright{
    color: var(--offWhite);
    font-size: 13px;
	text-align: center;
	opacity: 0.75;
}