@font-face {
    font-family: amatic;
    src: url(../fonts/AmaticSC-Regular.ttf);
}
@font-face {
    font-family: amatic-bold;
    src: url(../fonts/Amatic-Bold.ttf);
}

* {
  box-sizing: border-box;
}
html,body {
  height: 100%;
  background: transparent;
}

table {
  border: 1px solid black;
  border-collapse: collapse;
}

table td {
  padding: 2px;
  border: 1px solid black;
  border-collapse: collapse;
}

#sidebar {
  display: flex;
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

#sidebar img {
  display: block;
  width: 100%;
  max-width: 90%;
  margin: auto;
}

#sidebar .side-title {
  color: #00aa5a;
}

#side-menu {
  display: block;
  position: relative;
  width: 30px;
  height: 100%;
  background-color: #c5c5c5;
  vertical-align: top;
  border-right: 1px solid #878787;
  z-index: 10;
}

#sections-wrapper {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

#sections {
  display: block;
  height: 100%;
  margin-right: -20px;
  padding: 10px;
  overflow: auto;
  vertical-align: top;
}

#sections * {
/*   margin: 25px 0; */
  text-align: justify;
}

/*#section1, #section2, #section3, #section4, #section5, #section6  {
    padding: 200px 0;
}*/

#myScrollspy {
  display: block;
  float: none;
  width: 100%;
  margin: 0 auto;
  padding: 2px 0;
}

#myScrollspy li {
  float: none;
  margin: 0 auto;
}

#myScrollspy a {
  padding: 2px 0;
  font-size: 18px;
  text-align: center;
  color: #00aa5a;
  background-color: transparent;
}

#myScrollspy .active a{
  font-size: 25px;
  color: #ffffff;
}

.flex-container {
  display: flex;
  align-items: center;
  height: 100%;
}

#index {
  text-align: center;
  margin: 0 auto;
}

#index h3 {
  text-align: center;
  margin: 5px 0;
  color: #00aa5a;
  font-family: amatic-bold;
/*   line-height: 2px; */
  font-size: 35px;
}

#index ul {
  display: inline-block;
  font-size: 96.2%;
  padding: 0;
  margin: 10px auto;
}

#index li {
  margin: 0;
}

#index li a {
  color: #00aa5a;
}

.carousel .left, .carousel .right {
  background: transparent;
}

.carousel-inner img {
  height: 100% !important;
  max-width: 100% !important;
  max-height: 500px !important;
  margin: 0 auto;
}

.carousel-control .glyphicon {
  color: #f7c100 !important;
  font-size: 22pt !important;
}