body {background-color: #fff;}
.logo {margin: 65px auto;}
.left-col {background-color: #fff; display: block; padding: 0px 15px 15px 15px; height: 100%; position: fixed;}
h1 {font-family: 'Roboto', sans-serif; font-size: 26px; color: 2b2b2b; padding: 20px 0px 40px 0px;}
h2 {font-family: 'Roboto', sans-serif; font-size: 22px; color: 2b2b2b; padding: 40px 5px 20px 5px;}
p {font-family: 'Roboto', sans-serif; font-size: 16px; color: 2b2b2b;}
a {font-family: 'Roboto', sans-serif; font-size: 16px; color: 2b2b2b; text-decoration: none;}
a:hover {text-decoration: none; color: 2b2b2b !important;}
.dot {margin: 0px 20px 0px 20px; color: 2b2b2b;}





$color-stack:
  (group: primary, id: normal, color: #fff),
  (group: complement, id: normal, color: #999999);

@function color($group, $shade:normal, $transparency:1) {
  @each $color in $color-stack {
    $c-group: map-get($color, group);
    $c-shade: map-get($color, id);
    @if($group == map-get($color, group) and $shade == map-get($color, id)){
      @return rgba(map-get($color, color), $transparency);
    }
  }
}

$b-height: 60px; //Height (and width) of the burger menu
$b-margin-top: 30px; //Burger menu margin (distance from top)
$b-margin-left: 30px; //Burger menu margin (distance from left)
$b-border-width: 2px; //Width of the borders and 'buns'
$b-bun-width: 25px; //Width of the 'buns'
$b-bun-height: $b-border-width; //Height of the 'buns'
$b-border-radius: 50%; //Change the border radius of the menu

$b-trans-speed: .4s; //Transition speed settings
$b-transition: all $b-trans-speed ease; //Transitions

$b-font-size: 24px; //Font size of brand and links
$b-font-family: Helvetica-Neue, Helvetica, Arial, sans-serif; //Font family of the brand and links
$b-font-weight: 300; //Font weight of brand and links
$b-txt-pad: 30px; //Left padding on both brand and links

$b-line-height: ($b-height / 2 - ($b-font-size / 2.8)); //Vertically centers brand to menu
$b-txt-pad-top: ($b-margin-top + $b-height + $b-txt-pad); //Top margin for first link element
$b-bun-width-half: ($b-bun-width / 2); //Half bun width used for calculation
$b-pad-left: ($b-height / 2 - $b-bun-width-half - 2); //Horizontally centers bun in menu
$b-pad-top: ($b-height / 2 - $b-bun-width-half); //Vertically centers bun in menu

@keyframes slideInLeft {
  0% {
    transform: translate3d(250px, 0, 0);
    visibility: visible;
  }

  100% {
    transform: translate3d(0, 0, 0);
  }
}

@keyframes slideOutLeft {
  0% {
    transform: translate3d(0, 0, 0);
  }

  100% {
    transform: translate3d(250px, 0, 0);
    visibility: hidden;
  }
}

* {
  box-sizing: border-box;
}

body {
  &:after {
    background: color(primary);
    content: '';
    height: 100%;
    left: 0;
    opacity: 0;
    overflow: auto;
    padding: 0;
    position: absolute;
    top: 0;
    transition: $b-transition;
    width: 100%;
  }


	
  &.open {
    overflow: hidden;
  }

  &.open:after {
    opacity: 1;
    visibility: visible;
  }
}

.b-nav {
  position: absolute;
  z-index: 11;

  &:not(.open) {
    visibility: hidden;
  }

  li {
    color: color(complement);
    list-style-type: none;
    padding: 10px;
    text-align: left;
    transform: translateX(-250px);
  }

  li:not(.open) {
    animation-duration: $b-trans-speed;
    animation-fill-mode: both;
    animation-name: slideOutLeft;
  }

  li:first-child {
    padding-top: $b-txt-pad-top;
  }

  &.open {
    visibility: visible;

    li {
      animation-duration: $b-trans-speed;
      animation-fill-mode: both;
      animation-name: slideInLeft;
    }
  }
}

.b-link {
  background: transparent;
  border-left: color(complement, normal, 0) solid $b-border-width;
  color: color(complement);
  font-family: $b-font-family;
  font-size: $b-font-size;
  font-weight: $b-font-weight;
  margin-left: $b-margin-left;
  text-decoration: none;
  transition: $b-transition;
  width: auto;

  &:hover,
  &--active {
    border-left: color(complement) solid $b-border-width;
    padding-left: $b-txt-pad;
  }
}

.b-menu {
  background: color(primary);
  border: color(primary) solid $b-border-width;
  border-radius: $b-border-radius;
  cursor: pointer;
  display: inline-block;
  height: $b-height;
  padding-left: $b-pad-left;
  padding-top: $b-pad-top;
  position: relative;
  transition: $b-transition;
  user-select: none;
  width: $b-height;
  z-index: 12;

  &:hover {
    border: color(complement) solid $b-border-width;
  }
}

.b-bun {
  background: color(complement);
  position: relative;
  transition: $b-transition;
	box-shadow: 2px 2px #888888;

  &--top {
    height: $b-bun-height;
    top: 0;
    width: $b-bun-width;
  }

  &--mid {
    height: $b-bun-height;
    top: 8px;
    width: $b-bun-width;
  }

  &--bottom {
    height: $b-bun-height;
    top: 16px;
    width: $b-bun-width;
  }
}

/*.b-container {
  height: $b-height;
  left: $b-margin-left;
  position: absolute;
  top: $b-margin-top;
*/
  &:hover:not(.open) {
    .bun-top,
    .bun-mid,
    .bun-bottom {
      background: color(primary);
    }
  }

  &.open {
    .b-main {
      border: color(complement) solid $b-border-width;
    }

    .b-bun--top {
      background: color(complement);
      top: 9px;
      transform: rotate(45deg);
			box-shadow: none;
    }

    .b-bun--mid {
      opacity: 0;
    }

    .b-bun--bottom {
      background: color(complement);
      top: 5px;
      transform: rotate(-45deg);
			box-shadow: none;
    }

    .b-brand {
      color: color(complement);
    }
  }
}

.custom-top {
  z-index: 100;
}

.content {padding-left: 5px; padding-right: 5px;}

.content-pic {margin-bottom: 20px !important;} 


.content p {padding-left: 10px;}
.content h2 {padding-left: 15px;}



	body {overflow: -moz-scrollbars-vertical !important; overflow-y: scroll !important;}	
	.p11 {padding-right: 10px !important; padding-left: 10px !important;} 
	.p21 {padding-right: 10px !important; padding-left: 10px !important;} 
	.p22 {padding-right: 10px !important; padding-left: 10px !important;} 
	.p31 {padding-right: 10px !important; padding-left: 10px !important;} 
	.p32 {padding-right: 10px !important; padding-left: 10px !important;} 
	.p33 {padding-right: 10px !important; padding-left: 10px !important;} 


.abc a {color: black}
.abc a:hover {color: black;}




/* width */
::-webkit-scrollbar {
    width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
    background: #f1f1f1; 
}
 
/* Handle */
::-webkit-scrollbar-thumb {
    background: #888; 
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #555; 
}