/* This is going to be the CSS for the menu page */
@font-face {
  font-family:'slim-joe';
  src: url('dist/fonts/slim-joe.otf');
}

@font-face {
  font-family:'big-john';
  src: url('dist/fonts/big-john.otf');
}

.navbar-header {
	background: transparent;
}

#main-menu {
  font-family:"big-john";
}

.main-image {
	padding-top: 45px;
}

.menu-image{
       display:block;
       border: solid;
       border-width: 1;
       background-size: cover;
       background-position: center; 
       filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 3.5+, IE10 */
       filter: gray; /* IE6-9 */
      -webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */
      -webkit-transition: all .6s ease; /* Fade to color for Chrome and Safari */
      -webkit-backface-visibility: hidden; /* Fix for transition flickering */
}

.menu-image:hover{
      filter: none;
     -webkit-filter: grayscale(0%);
}

div#text{
	/*border: solid;
	border-width: 1;*/
	text-align: center;
	padding-top: 45px;

  /*background-color: ivory;
  background: linear-gradient(bottom, rgba(255,255,240,1), rgba(248,248,247,1));
  background: -webkit-linear-gradient(bottom, rgba(255,255,240,1), rgba(248,248,247,1));
  background: -moz-linear-gradient(bottom, rgba(255,255,240,1), rgba(248,248,247,1)));*/

	/*background-color: #fffaf8;
    background: linear-gradient(bottom, rgba(255,221,209,209), rgba(255,250,248,209));
    background: -webkit-linear-gradient(bottom, rgba(255,221,209,209), rgba(255,250,248,209));
    background: -moz-linear-gradient(bottom, rgba(255,221,209,209), rgba(255,250,248,209));*/
}

.describe {
	color: #000000;
	font-family: "slim-joe";
	font-size: 17px;
}

.extra {
  font-size: 17px;
  font-family: "slim-joe";
  font-style: italic;
}

#wrapper {
  padding-left: 250px;
  transition: all 0.4s ease 0s;
}

#sidebar-wrapper {
  margin-left: -250px;
  left: 250px;
  width: 250px;
  background: #ffffff;
  position: fixed;
  height: 100%;
  overflow-y: auto;
  z-index: 1000;
  transition: all 0.4s ease 0s;
}

#wrapper.active {
  padding-left: 0;
}

#wrapper.active #sidebar-wrapper {
  left: 0;
}

#page-content-wrapper {
  width: 100%;
}

.row {
  font-family: "big-john";
}

.sidebar-nav {
  position: absolute;
  top: 0;
  width: 250px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.sidebar-nav li {
  line-height: 40px;
  text-indent: 20px;
}

.sidebar-nav li a {
  color: #eb4a59;
  display: block;
  padding-left: 60px;
  font-family: "slim-joe";
  font-size: 18px;
  font-weight: bold;
}

.sidebar-nav li a span:before {
  position: absolute;
  left: 0;
  font-color: #0128c5;
  text-align: center;
  width: 20px;
  line-height: 18px;
}

.sidebar-nav li a:hover, 
.sidebar-nav li.active  {
    color: #ffffff;
    background: #eb4a59;
}


.sidebar-nav > .sidebar-brand {
  height: 65px;
  line-height: 60px;
  font-size: 18px;
}

.sidebar-nav > .sidebar-brand a {
  color: #0128c5;
}

.sidebar-nav > .sidebar-brand a:hover {
  background-color: #0128c5;
}

.sidebar-nav > .sidebar-red a:hover {
  background-color: #eb4a59;
}



.content-header {
  height: 65px;
  line-height: 65px;
}

.content-header h1 {
  margin: 20px;
  margin-left: 20px;
  line-height: 65px;
  display: inline-block;
  font-family: "big-john";
  color: #0128c5;
  font-size: 50px;
}

#menu-toggle {
    text-decoration: none;
}

.btn-menu {
  color: #0128c5;
} 

.inset {
  padding: 20px;
}

@media (max-width:767px) {

#wrapper {
  padding-left: 0;
}

#sidebar-wrapper {
  left: 0;
}

#wrapper.active {
  position: relative;
  left: 250px;
}

#wrapper.active #sidebar-wrapper {
  left: 250px;
  width: 250px;
  transition: all 0.4s ease 0s;
}

#menu-toggle {
  display: inline-block;
}