.toc {
  background-color: #2e2b2a;  
  bottom: 20px;
  max-width: 320px;
  min-width: 130px;
  position: fixed !important;
  right: -228px;
  z-index: 9999;
  font-family: 'Roboto', sans-serif;
  -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
}
.toc.hover {
  right:0;
}
.toc-title span{
	
	font-size: 10px;
}

.toc-title {  
  font-size:18px;
  text-transform:uppercase;
  font-weight:700;
  color:#ffffff;
  border-bottom:1px solid rgba(255,255,255,0.28);
  margin:0 auto;
  padding:33px 0 29px 105px;
  background:transparent url(../images/toc_close.png) left top no-repeat;
  background-size:contain;
}
.toc-title:before {
  content:'';
  position:absolute;
  left:0px;
  top:0px;
  width:91px;
  height:91px;
  border-right:1px solid rgba(255,255,255,0.28);
}

.toc.hover .toc-title {
  background-image:url(../images/toc_open.png);
}

.toc-content {
  margin:0;
  max-height: 0;
  padding-right:25px;
  overflow-y: auto;
   -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
}

.toc.hover .toc-content {
  max-height: 40vh;
}

.toc ul {
  list-style: outside none none;  
  padding: 0 12px 0 32px;
  position:relative;
}

.toc li {
  padding: 2px 0px 2px 32px;
  margin-left: 0;
  background-image: url("../images/toc-nav-off.png");
  background-repeat: no-repeat;
  background-position: 0px center;
  font-size: 14px;
  font-weight: normal;
  display: table;
  height: 34px;
  line-height: 1.05;
  position:relative; 
  color: #ffffff;
}
.toc li.toc-active {
  background-image: url("../images/toc-nav-on.png");
  color: #ce171e;
}

.toc .toc-h2 {
  font-size:12px;
  font-weight:700;
}

.toc .toc-h3 {
  font-size:12px;
  font-weight:400;
}

.toc li a {
  color: #ffffff;
  cursor: pointer;
  display: table-cell;  
  font-weight: 400;
  text-decoration: none;
  vertical-align: middle;
  opacity:0;
  -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
}
.toc.hover li a {
  opacity:1;
}

.toc li.toc-active a {
  color:#ce171e;
}

.toc .toc-h2 a {
  font-weight:700;
}

.toc .toc-h3 a {
  font-weight:400;
}

.toc a:focus, .toc a:hover {
  text-decoration:none;
}

@media (max-width: 1024px) {
  .toc {
    right:-286px;
    width: 320px;
    max-width: none;
    min-width: unset;
  }

  .toc-title {
    padding:0 0 0 40px;
    font-size:14px;
    line-height:33px;
  }

  .toc-title:before {
    width:34px;
    height:33px;
  }

  .toc ul {
    padding-left:6px;
  }

  .toc-content {
    margin:0;
    max-height: 0;
  }

  .toc.hover .toc-content {
    max-height: 40vh;
  }
}
/*Reference : https://responsivedesign.is/develop/browser-feature-support/media-queries-for-common-device-breakpoints*/
/* standard Desktops and laptops ----------- */
@media only screen  and (min-width : 1224px) {
/* Styles */
  .toc {
    right:-215px;
  }
}
/*large  Desktops and laptops ----------- */
@media only screen  and (min-width : 1680px) {
/* Styles */
  .toc {
    right:-228px;
  }
}