/* The sidebar menu */

.sidebar {
  height: 100%; /* 100% Full-height */
  width: 0; /* 0 width - change this with JavaScript */
  position: fixed; /* Stay in place */
  z-index: 101; /* Stay on top */
  top: 0;
  left: 0;
  overflow-x: hidden; /* Disable horizontal scroll */
  overflow-y: auto;
  opacity: 0.1;
  transition: 0.5s; /* transition effect to slide in the sidebar */
}
.sidebar a {
  color: #fff;
}
.sidebar a:visited {
  color: #fff;
}

.menu-sidebar {
  padding-top: 30px;
  height: calc(100% - 30px);
}

.menu-sidebar-booking {
  padding-top: 30px;
  height: calc(100% - 30px);
}

#booking_sidebar_links a{

  text-decoration: none;
  font-size: 14px;
  color: #333;
  display: block;
  transition: 0.5s;  
  padding-left: 20px;

}

#booking_sidebar_links ul {
  list-style: none;
  width: auto;
  margin-top: 0;
}

#booking_sidebar_links li {
  padding: 10px 0 10px 0px; 
  letter-spacing: 1px;
  border-bottom: 1px solid #ccc;
}

#booking_sidebar_links .sub-menu li a {
  margin-left: 20px;
  color: #666;
}

#sidebar_links a {
  text-decoration: none;
  font-size: 15px;
  color: #555;
  display: block;
  transition: 0.5s;  
  padding-left: 20px;
}
#sidebar_links ul {
  list-style: none;
  width: auto;
  margin-top: 0;
  margin-bottom: 0px;
  padding-left: 0px;
}
.sub-menu-header {
/*  text-transform: uppercase; */
}
#sidebar_links li {
  padding: 7px 0 7px 0px; 
  letter-spacing: 1px;
/*  border-bottom: 1px solid #000; */
}
#sidebar_links .sub-menu li a {
  margin-left: 20px;
  color: #333;
}
.sub-menu {
  padding-left: 0;
  background-color: #f5f5f5;
  padding-top: 7px;
  padding-bottom: 7px;
}
#sidebar_links .sidebar-header {
  font-size: 16px;
  margin-top: 5px;
  margin-bottom: 5px;
}
.studio-tools-link {
	border-bottom: 1px solid #000; color: #fff; letter-spacing: 1px; padding: 10px 0 10px 32px;
	font-size: 18px; 
  }
.studio-links {
	padding: 10px 0 10px 0;   }	

/* cross button */
.cross-container {
  position: relative;
  margin: auto;
  width: 30px;
  height: 30px;
}
.line {
  position: absolute;
  width: 100%;
  height: 3px;
  top: 50%;
  left: 0;
}
.line1 {
 transform: rotate(45deg);
}
.line2 {
 transform: rotate(-45deg);
}

/* The button used to open the sidebar */
.openbtn {
  position: absolute;
  top: 15px; left: 0;
  cursor: pointer;
  color: #444;
  border: none;
  height: 60px;
  width: 60px;
 }
.mini-bar {
  background-color: #444;
  margin-left: auto; margin-right: auto;
}
@media only screen and (min-width: 750px) {
 .mini-bar-container {
   margin: 18px 0 0 11px;
  }
 .mini-bar {
   width: 40px;
   height: 3px;

   margin-top: 10px; 
   }
}
@media only screen and (max-width: 750px) {
 .mini-bar-container {
   margin: 22px 0 0 11px;
  }
 .mini-bar {
   width: 30px;
   height: 3px;
   margin-top: 8px; 
   }
} 
.terms {
	margin-top: 100%;
  }
.terms a{
  	color: #fff;
	font-size: 10pt;
  }
.terms a:visited {
	color: #fff;
 }


@media screen and (max-height: 450px) {
  .sidebar a {font-size: 18px;}
}

.sidebar-large-closed {
  height: 100%; /* 100% Full-height */
  width: 0%; /* 0 width - change this with JavaScript */
  max-width: 0px;
  position: fixed; /* Stay in place */
  z-index: 101; /* Stay on top */
  top: 0;
  right: 0;
  opacity: 0.1;
  transition: 1s;
}
.sidebar-large-open {
  height: 100%; /* 100% Full-height */
  min-width: 0px;
  max-width: 650px;
  position: fixed; /* Stay in place */
  z-index: 101; /* Stay on top */
  top: 0;
  right: 0;
  opactity: 1;
  box-shadow: 10px 10px 10px 10px #666;
  transition: 1s; /* transition effect to slide in the sidebar */
}
.sidebar-close-button-open {
  max-height: 70px;
  box-sizing: border-box;
  cursor: pointer;
  box-sizing: border-box;
  padding: 10px 0px;
/*  font-size: 30px; */
  text-align: center;
  min-width: 0px;
  max-width: 650px;
  position: fixed;
  z-index: 102;
  top: 0;
  right: 0;
  opacity: 1;
  transition: 1s;
}
.sidebar-close-button-closed {
  max-height: 70px;
  box-sizing: border-box;
  padding: 10px 0px;
/*  font-size: 30px; */
  text-align: center;
  max-width: 0px;
  width: 0%; /* 0 width - change this with JavaScript */
  position: fixed; /* Stay in place */
  z-index: 102; /* Stay on top */
  top: 0;
  right: 0;
  opacity: 0.1;
  transition: 1s;
}
 @media only screen and (min-width: 601px) {
  .sidebar-large-open {
    width: 600px;
  }
 .sidebar-close-button-open {
    width: 600px;
  }
}
 @media only screen and (max-width: 600px) {
  .sidebar-large-open {
    width: 100%;
  }
  .sidebar-close-button-open {
    width: 100%;
  }
}

.sidebar-large-content-closed {
  opacity: 0.1;
  overflow: auto;
/*  transition: 1s;*/
  height: calc(100% - 70px);
}
.sidebar-large-content-open {
  opacity: 1;
  transition: 2s; 
  overflow: auto;
  height: calc(100% - 70px);
}
.sidebar-title {
  animation-name: fade;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  animation-play-state: running;
  opacity: 0.1;
}