a {
     color: inherit;
     text-decoration: none;
     transition: all 0.3s;
 }
 
 a:hover {
     color: inherit;
     text-decoration: none;
     transition: all 0.3s;
 }
 
 a:focus {
     color: inherit;
     text-decoration: none;
     transition: all 0.3s;
 }
 
 .navbar {
     padding: 15px 10px;
     background: #fff;
     border: none;
     border-radius: 0;
     margin-bottom: 40px;
     box-shadow: -1px 1px 3px rgba(0, 0, 0, 0.1);
 }
 
 .navbar-btn {
     box-shadow: none;
     outline: none !important;
     border: none;
 }
 
 .line {
     width: 100%;
     height: 1px;
     border-bottom: 1px dashed #ddd;
     margin: 40px 0;
 }
 
 .wrapper {
     display: flex;
     width: 100%;
     align-items: stretch;
     perspective: 1500px;
 }
 
 #sidebar {
     min-width: 250px;
     max-width: 250px;
     background: #f8f9fb;
     color: #000;
     transition: all 0.6s cubic-bezier(0.945, 0.02, 0.27, 0.665);
     transform-origin: bottom right;
 }
 
 #sidebar .sidebar-header {
     padding: 20px;
 }
 
 #sidebar ul.components {
     padding: 20px 20px 0 20px;
     margin: 0;
 }
 
 #sidebar ul p {
     font-weight: 400;
     line-height: 1.5rem;
     letter-spacing: normal;
     letter-spacing: -0.02em;
     color: #9ca8ba;
     margin: 0;
 }
 
 #sidebar ul li a {
     display: flex;
     line-height: 1.5rem;
     letter-spacing: normal;
     padding-top: 4px;
     padding-top: 0.25rem;
     padding-left: 5px;
     padding-left: 0.3125rem;
     padding-bottom: 4px;
     padding-bottom: 0.25rem;
     padding-right: 5px;
     padding-right: 0.3125rem;
     border-radius: 8px;
     -webkit-border-radius: 8px;
     -moz-border-radius: 8px;
     margin-bottom: 5px;
     margin-bottom: 0.3125rem;
     position: relative;
     color: #000 !important;
 }
 
 #sidebar .sidebar-active a {
     color: #fff !important;
 }
 
 #sidebar ul li a:hover {
     background: #b55921;
     color: #fff !important;
 }
 
 #sidebar ul li a:after {
     transform: translateY(-50%) rotate(90deg);
 }
 
 #sidebar ul li.active>a {
     background: #fff;
 }
 
 #sidebar.active {
     margin-right: -250px;
     transform: rotateY(-100deg);
 }
 
 .dropdown-toggle {
     padding-left: 15px;
 }
 
 a[aria-expanded="true"] {
     background: #fff;
 }
 
 a[aria-expanded="true"]:after {
     transform: translateY(-50%) rotate(0deg) !important;
 }
 
 a[data-toggle="collapse"] {
     position: relative;
 }
 
 .dropdown-toggle::after {
     display: block;
     position: absolute;
     top: 50%;
     left: 5px;
     transform: translateY(-50%);
 }
 
 ul.CTAs {
     padding: 20px;
 }
 
 ul.CTAs a {
     text-align: center;
     display: block;
     border-radius: 5px;
     margin-bottom: 5px;
 }
 
 a.download {
     background: #fff;
     color: #7386d5;
 }
 
 a.article {
     background: #6d7fcc !important;
     color: #fff !important;
 }
 
 a.article:hover {
     background: #6d7fcc !important;
     color: #fff !important;
 }
 
 #content {
     width: 100%;
     min-height: 100vh;
     transition: all 0.3s;
 }
 
 #sidebarCollapse {
     width: 40px;
     height: 40px;
     background: #f5f5f5;
     cursor: pointer;
 }
 
 #sidebarCollapse span {
     width: 80%;
     height: 2px;
     margin: 0 auto;
     display: block;
     background: #555;
     transition: all 0.8s cubic-bezier(0.81, -0.33, 0.345, 1.375);
     transition-delay: 0.2s;
 }
 
 #sidebarCollapse span:first-of-type {
     transform: rotate(-45deg) translate(-2px, 2px);
 }
 
 #sidebarCollapse span:nth-of-type(2) {
     opacity: 0;
 }
 
 #sidebarCollapse span:last-of-type {
     transform: rotate(45deg) translate(-1px, -1px);
 }
 
 #sidebarCollapse.active span {
     transform: none;
     opacity: 1;
     margin: 5px auto;
 }
 
 @media (max-width: 768px) {
     #sidebar {
         margin-right: -250px;
         transform: rotateY(-90deg);
     }
     #sidebar.active {
         margin-right: 0;
         transform: none;
     }
     #sidebarCollapse span:first-of-type {
         transform: none;
         opacity: 1;
         margin: 5px auto;
     }
     #sidebarCollapse span:nth-of-type(2) {
         transform: none;
         opacity: 1;
         margin: 5px auto;
     }
     #sidebarCollapse span:last-of-type {
         transform: none;
         opacity: 1;
         margin: 5px auto;
     }
     #sidebarCollapse.active span {
         margin: 0 auto;
     }
     #sidebarCollapse.active span:first-of-type {
         transform: rotate(-45deg) translate(-2px, 2px);
     }
     #sidebarCollapse.active span:nth-of-type(2) {
         opacity: 0;
     }
     #sidebarCollapse.active span:last-of-type {
         transform: rotate(45deg) translate(-1px, -1px);
     }
 }
 
 header .dropdown .dropdown-toggle::after {
     left: 0;
 }
 
 .onhover-dropdown:hover .onhover-show-div {
     opacity: 1;
     -webkit-transform: translateY(0px);
     transform: translateY(0px);
     visibility: visible;
     border-radius: 5px;
     overflow: hidden;
 }
 
 .onhover-dropdown .onhover-show-div {
     -webkit-box-shadow: 0 0 20px rgba(89, 102, 122, 0.1);
     box-shadow: 0 0 20pxrgba 89, -102, -122, -0.1;
     -webkit-transform: translateY(30px);
     transform: translateY(30px);
     opacity: 0;
     visibility: hidden;
     right: 0;
     display: block;
     transition: all linear 0.3s;
 }
 /******************************* * MODAL AS LEFT/RIGHT SIDEBAR * Add "left" or "right" in modal parent div, after class="modal". * Get free snippets on bootpen.com *******************************/
 
 .modal.left .modal-dialog,
 .modal.right .modal-dialog {
     position: fixed;
     margin: auto;
     width: 320px;
     height: 100%;
     -webkit-transform: translate3d(0%, 0, 0);
     -ms-transform: translate3d(0%, 0, 0);
     -o-transform: translate3d(0%, 0, 0);
     transform: translate3d(0%, 0, 0);
 }
 
 .modal.left .modal-content,
 .modal.right .modal-content {
     height: 100%;
     overflow-y: auto;
 }
 
 .modal.left .modal-body,
 .modal.right .modal-body {
     padding: 15px 15px 80px;
 }
 /*Left*/
 
 .modal.left.fade .modal-dialog {
     right: -320px;
     -webkit-transition: opacity 0.3s linear, right 0.3s ease-out;
     -moz-transition: opacity 0.3s linear, right 0.3s ease-out;
     -o-transition: opacity 0.3s linear, right 0.3s ease-out;
     transition: opacity 0.3s linear, right 0.3s ease-out;
 }
 
 .modal.left.fade.show .modal-dialog {
     right: 0;
 }
 /*Right*/
 
 .modal.right.fade .modal-dialog {
     left: -320px;
     -webkit-transition: opacity 0.3s linear, left 0.3s ease-out;
     -moz-transition: opacity 0.3s linear, left 0.3s ease-out;
     -o-transition: opacity 0.3s linear, left 0.3s ease-out;
     transition: opacity 0.3s linear, left 0.3s ease-out;
 }
 
 .modal.right.fade.show .modal-dialog {
     left: 0;
 }
 /* ----- MODAL STYLE ----- */
 
 .modal-content {
     border-radius: 0;
     border: none;
 }
 
 .modal-header {
     border-bottom-color: #eee;
     background-color: #fafafa;
 }
 /* ----- v CAN BE DELETED v ----- */
 
 .demo {
     padding-top: 60px;
     padding-bottom: 110px;
 }
 
 .btn-demo {
     margin: 15px;
     padding: 10px 15px;
     border-radius: 0;
 }
 
 .btn-demo:focus {
     outline: 0;
 }