/*------------------------------ Menu ----------------------------------*/
#block-adminmenu ul.menu li{
	width: 100%;
}
ul.menu li.menu-item--active-trail a{
	color: #e94c26;
}
#block-topmenubar ul.menu{
	margin-top: 5px;
}
#block-mainnavigation-3{
	margin-top: 0px;
}
#block-mainnavigation-3 .menu-container .menu ul{
	width: 100%;
	margin: 0;
}
#block-mainnavigation-3 .menu-container .menu ul li{
	display: inline;
	float: left;
	padding: 0.5rem 0.75rem;
}
#block-mainnavigation-3 .menu-container .menu ul li:last-child{
/*	margin-top: -3px;*/
}
ul.level-0 li a{
	padding: 0;
	color: #333;
	font-weight: bold;
	font-size: large;
}
ul.level-0 > li:hover{
	background-color: #e94c26;
}
ul.level-0 > li:hover > a{
	color: #fff;
}
#block-mainnavigation-3 .menu-container .menu ul.level-1{
	width: 88vw;
	position: absolute;
	left: 0;
	top: 33px;
	background: #fff;
	border-top: solid 5px #e94c26;
	border-bottom-left-radius: 15px;
	border-bottom-right-radius: 15px;
	box-shadow: 0 8px 6px -6px #ccc;
	padding-bottom: 20px;
	z-index: 1000;
	display: none;
	margin: 0;
}
.shrink #block-mainnavigation-3 .menu-container .menu ul.level-1{
	left: -20%;
}
@media(min-width: 1024px){
	#block-mainnavigation-3 .menu-container .menu ul.level-1{
		width: 80vw;
	}
}
@media(min-width: 1400px){
	#block-mainnavigation-3 .menu-container .menu ul.level-1{
		width: 70vw;
	}
}
i.fi-home{
	font-size: 20px;
}
ul.level-1 > li{
	width: 29%;
	margin: 0 2%;
	float: left;
}
ul.level-2{
	padding: 20px 1%;
}
#block-mainnavigation-3 .menu-container .menu ul.level-2 li{
	width: 100%;
	padding: 5px;
}
ul.level-2 > li,
ul.level-2 > li a{
	width: 100%;
	font-weight: normal;
	transition: 0.15s;
}
ul.level-2 > li:hover{
	background: #e94c26;
}
ul.level-2 > li:hover a{
	color: #fff;
}
ul.level-1 > li > span{
	font-size: x-large;
	border-bottom: solid 3px #e94c26;
	padding: 0.5rem;
	width: 100%;
	display: block;
}
.show-on-mobile{
	visibility: collapse;
}
@media(min-width: 769px){
	a.menu-mobile{
		display: none;
	}
}



.hc-nav-trigger.hc-nav-1{
	top: 5px;
	padding: 5px;
	background: #e94c26;
	right: 5px;
}

@media(min-width: 480px){
	.hc-nav-trigger.hc-nav-1{
		top: 0px;
		right: 0px;
	}
}



@media(max-width: 991px){
	#block-mainnavigation-3{
		display: none;
	}
	.top-navigation > .cell > .grid-x{
		display: block;
	}
	#block-topmenubar,
	#block-languageswitcher,
	#block-resizeblock,
	#block-socialmedia{
		float: left;
	}
	#block-mainnavigation-4{
		float: right;
	}

	.hc-offcanvas-nav .nav-content>.nav-close:first-child a{
		background: #e94c26;
	}
	.hc-nav-trigger span,
	.hc-nav-trigger span::before,
	.hc-nav-trigger span::after{
		height: 2px;
		width: 20px;
		background: #fff;
		top: 12px;
		left: unset;
	}
	.hc-nav-trigger span::before{
		top: -5px;
	}
	.hc-nav-trigger span::after{
		top: 5px;
	}
	.hc-nav-trigger.toggle-open span{
		top: 15px;
		left: 0;
	}
	.hc-nav-trigger.toggle-open span::before{
		top: -15px;
	}
	ul.level-1 > li{
		width: 100%;
	}
	.hc-offcanvas-nav .nav-item-link, .hc-offcanvas-nav li.nav-close a, .hc-offcanvas-nav .nav-back a{
		border-bottom-color: #666;
	}
	.hc-offcanvas-nav .nav-wrapper>.nav-content>ul:first-of-type>li:first-child:not(.nav-back):not(.nav-close)>.nav-item-wrapper>.nav-item-link,
	.hc-offcanvas-nav .nav-content>.nav-close:first-child a, .hc-offcanvas-nav .nav-title+.nav-close a.has-label, .hc-offcanvas-nav li.nav-close a, .hc-offcanvas-nav .nav-back a{
		border-top: solid 1px #e94c26;
	}
	.hc-offcanvas-nav .nav-content>.nav-close:first-child a, .hc-offcanvas-nav .nav-title+.nav-close a.has-label, .hc-offcanvas-nav li.nav-close a, .hc-offcanvas-nav .nav-back a{
		width: 100%;
	}	
	.hc-offcanvas-nav .nav-close-button span::before, .hc-offcanvas-nav .nav-close-button span::after{
		width:8px;
		height: 8px;
	}
	.hc-offcanvas-nav .nav-content>.nav-close:first-child a:hover{
		background: #000;
		border: none;
	}
	.hc-offcanvas-nav .nav-wrapper>.nav-content>ul:first-of-type>li:first-child:not(.nav-back):not(.nav-close)>.nav-item-wrapper>.nav-item-link+a{
		border: none;
	}
	.hc-offcanvas-nav a.nav-next:before{
		display: none;
	}
}
@media(min-width: 992px){
	#block-mainnavigation-2{
		display: none;
	}
}
@media(min-width: 1100px){
	#block-mainnavigation-3 .menu-container .menu ul li{
		padding: 0.5rem 1rem;
	}
}
@media(min-width: 1200px){
	#block-mainnavigation-3{
		position: absolute;
		left: 15%;
		bottom: -4px;
	}
	.shrink #block-mainnavigation-3{
		bottom: 0;
		left: unset;
		right: 5%;
	}
}



@import "bourbon";

// The bare basics you need to get a multi-layered sliding navigaton up and running

@import url(https://fonts.googleapis.com/css?family=Open+Sans);

$light-blue: #4cc4cf;
$dark-blue: #374d72;
$pale-blue: lighten($dark-blue, 30);

body {
  font-family: 'Open Sans', sans-serif;
}

* {
  @include box-sizing(border-box);
}

.sidebar-navigation {
	background-color: $dark-blue;
	color: white;
	overflow-x: hidden; // for multi layer nav
  width: 300px;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  
	a {
		color: $pale-blue;
		text-decoration: none;
	}

/*---------------------- Navigation */

	nav {
		position: relative;
		height: 100%;
		ul {
			position: absolute;
			top: 0;
			padding: 1rem;
			width: 100%;
			background: $dark-blue;
			z-index: 1;
			@include transition(all 1s $ease-in-out-cubic);
			
			// Nested navs
			ul { 
				right: calc(200% + 10px);
				left: calc(100% + 10px);
			}
			li {

				// Parent
				&.parent > a {
					&:after {
              content: " +";
            }
				}

				// Back button
				&.back {
					a {
						color: white;
						background-color: rgba($pale-blue, 0.2);
						&:before {
                content: "< ";
              }
						&:focus,
						&:hover {
							color: white;
						}
					}
				}

				// Links
				a {
					padding: 0.75rem;
					display: block;
					position: relative; // for positioning parent after element
					border-radius: 0.25rem;
					@include transition(all 1s);
					&:focus,
					&:hover {
						color: $light-blue;
					}
				}
			}

			// Active state
			.active {
				left: 0;
				right: 0;
				> li {
					> a {
						opacity: 1;
					}
				}
			}
			
			// Hidden state (for active parent)
			&.hidden {
				>li > a {
					opacity: 0;
				}	
			}
			
			// Nested nav active
			ul .active {
				left: - calc(100% + 10px);
				right: - calc(100% + 10px);
			}
		}
	}
}

// Position fixed for demo purposes only

.main {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 300px;
  h1 {
    font-size: 30px;
    margin: 30px;
  }
}

.preloader {
   position: absolute;
   top: 0;
   left: 0;
   width: 100vw;
   height: 100vh;
   z-index: 9999;
   background-image: url('/themes/iitpkd/img/preloader.gif');
   background-repeat: no-repeat; 
   background-color: #FFF;
   background-position: center;
   background-size:contain;
}