.navigation{z-index: 600;}

.location-menu {padding-top: 0px !important;}

.menu.menu-course{
	width: 100%;
	overflow: hidden;
	margin-top: -115px;
}

.menu-title{
	color: @inverted-foreground-color;
	margin-bottom:@menu-title-padding-bottom;
	font-weight:bold !important;
}

.menu-header {
    background-color: @primary-color;
    display: block;
    position: fixed;
    z-index: 510;
    top: -100px;
    width: 100%;
    height: 100%;
    opacity: 1;
}

.menu-header-inner{margin-top: 20% !important;}

.menu-body {
		display: block;
		color: @white !important;
		margin-bottom:@menu-title-padding-bottom;
		font-size: 120%;
}

.menu-item-control {
	position: fixed;
	top: 50%;
	width: 44px;
	height: 80px;
	line-height: 80px;
	text-align: center;
	font-size: 24px;
	margin-top: -40px;
	background-color: rgba(50,50,50,0.9);
	color: @white;
	border: solid 2px @white;
	-webkit-transition: background-color .25s ease-in, color .25s ease-in, border-color .25s ease-in;
	-moz-transition: background-color .25s ease-in, color .25s ease-in, border-color .25s ease-in;
	-ms-transition: background-color .25s ease-in, color .25s ease-in, border-color .25s ease-in;
	transition: background-color .25s ease-in, color .25s ease-in, border-color .25s ease-in;
	z-index: 502;
}
.menu-item-control:hover {
	background-color: rgba(255,255,255,0.9);
	color: @black;
	border: solid 2px @black;
}
.menu-item-control-hide {display:none !important;}
.menu-item-control.menu-item-control-left, .menu-item-control.menu-home-control-left {left: 0;}
.menu-item-control.menu-item-control-left:before, .menu-item-control.menu-home-control-left:before {
	content: "\e64e";
	color: @white;
	height: 80px;
	width: 44px;
	line-height: 80px;
	font-weight: bold;
}
.menu-item-control.menu-item-control-left:hover:before, .menu-item-control.menu-home-control-left:hover:before {
	color: @black;
}
.menu-item-control.menu-home-control-right {z-index: 515 !important;}
.menu-item-control.menu-item-control-right, .menu-item-control.menu-home-control-right {right: 0;}
.menu-item-control.menu-item-control-right:before, .menu-item-control.menu-home-control-right:before {
	content: "\e651";
	color: @white;
	height: 80px;
	width: 44px;
	line-height: 80px;
	font-weight: bold;
}
.menu-item-control.menu-item-control-right:hover:before, .menu-item-control.menu-home-control-right:hover:before {
	color: @black;
}

.menu {
	background: @primary-color;
	.menu-container {
		.responsive-large;
		.responsive-medium;
		.responsive-small;
	}

	.menu-container-inner {
		padding:@menu-body-padding;
		display: -webkit-inline-box;
	    	display: -moz-inline-box;
	    	display: -webkit-inline-flex;
	    	display: -ms-inline-flexbox;
	    	display: inline-flex;
		position: relative;
		width: 100%;
	}

	.menu-container-inner:after {
	    position: fixed;
	    background-color: @white;
	    height: 100px;
	    width: 100%;
	    display: block;
	    bottom: 0px;
	    z-index: 100;
	}

	.menu-item {
		.responsive-medium;
		.responsive-small;
		margin-top:@menu-body-padding-bottom;
		margin-bottom:20px;
		vertical-align: top !important;
		margin: 0px !important;
		display: inline-block;
		position: relative;
		background-size: cover !important;
		background-repeat: no-repeat !important;
		background-position: center 60px;


		&.nth-child-even{
			.menu-item-inner{
				margin-left:0%;
		        .dir-rtl & {
		            margin-left:inherit;
		            margin-right:0% !important;
		        }
			}
		}

		&.nth-child-odd {
			clear: both;
			
			.menu-item-inner {
				margin-right:0% !important;
                .dir-rtl & {
                    margin-right:inherit;
                    margin-left:0%;
                }
			}
		}
	}

	.menu-box-info {
		position: absolute;
		width: 60%;
		display: block;
		padding-left: 20%;
		padding-right: 20%;
		top: 35%;
		text-align: center;
		z-index: 499;
	}
	.menu-inner-info {
		background: rgba(255,255,255,0.85);
		text-align: center;
		width: auto;
		display: block;
		padding: 2%;
		border-radius: 0px;
		border: none;
	}

	.menu-item-title-inner.h3, .menu-item-body-inner{
		color: @black !important;
		font-weight: bold;
	}

	.menu-graphic a {
		display: block;
	}

	.menu-item-graphic {
		opacity: 0;
	}
	
	.menu-item-title {
		padding:@menu-body-padding;
	}

	.menu-item-body {
		padding:@menu-body-padding;
		text-align:left;
	}

	.menu-item-button {
		padding:@menu-body-padding;

		a {
			text-decoration: none;
			background-color:@white;
			color:@black;
			border: @black solid 1px;
			padding:@button-padding;
			
			&:hover {
				background-color:@button-hover-color;
				color:@button-text-hover-color;
			}
			
			&.visited {
				background-color:@button-disabled-color;
				color:@button-text-disabled-color;
			}
		}
	}

	.menu-box-info .menu-item-button button {
		background-color:@black;
		color:@white;
		border: @white solid 2px;
		font-weight: 500;

		&:hover {
			background-color: #E31F26;
			color:@white;
			border: @white solid 2px;
		}

		&.visited {
			background-color: rgba(175,175,175,0.9);
			color: @white;
			border: @white solid 2px;
		}
	}

	.locked .menu-item-inner, .locked a.numspotlink {
		color: transparent !important;
	}

	.locked .duration-bar .numberspot:before {
		color: @white;
		content:'\e631';
		font-family: 'vanilla';
	    	speak: none;
	    	font-style: normal;
	    	font-weight: normal;
	    	font-variant: normal;
	    	text-transform: none;
	    	line-height: 1;
	   	 -webkit-font-smoothing: antialiased;
	    	-moz-osx-font-smoothing: grayscale;
	    	display: block;
    		line-height: 40px;
	}

	.menu-item-duration {
		float:right;
        .dir-rtl & {
            float:left;
        }
	}

	.duration-bar {
		position: fixed;
	    	width: 100%;
	    	height: 50px;
	    	padding-top: 40px;
	    	vertical-align: middle;
	    	text-align: center;
	    	bottom: 0px;
	    	background: transparent;
    		z-index: 999;
	}

	.duration-bar-home {
		position: fixed;
	    	width: 80px;
	    	height: 50px;
	    	padding-top: 40px;
	    	vertical-align: middle;
	    	text-align: center;
	    	bottom: 0px;
	    	background: transparent;
    		z-index: 999;
    		left: -10px;
	}

	.duration-bar .menu-item-inner{
		position: absolute !important;
	    width: 100%;
	    display: inline-block;
	    text-align: center;
	    max-width: none !important;
    	padding-top: 0px !important;
    	padding-bottom: 0px !important;
    	padding-right: 0px !important;
	    background : none !important;
	    background-color: transparent !important;
	}

	.duration-bar-home .menu-item-inner{
		position: absolute !important;
	    width: 100%;
	    display: inline-block;
	    text-align: center;
	    max-width: none !important;
    	padding-top: 0px !important;
    	padding-bottom: 0px !important;
    	padding-right: 0px !important;
    	padding-left: 40px !important;
	    background : none !important;
	    background-color: transparent !important;
	}

	.duration-bar .page-level-progress-menu-item {
		position: relative !important;
		width: 60px !important;
		height: 60px !important;
	}
	.duration-bar .page-level-progress-menu-item-indicator {
		border-radius: 60px !important;
		width: 60px !important;
		height: 60px !important;
		background-color: rgba(50,50,50,0.2) !important;
		border: none !important;
		-webkit-transform: rotate(-90deg);
	    -moz-transform: rotate(-90deg);
	    -o-transform: rotate(-90deg);
	    -ms-transform: rotate(-90deg);
	    transform: rotate(-90deg);
	}
	.duration-bar .numberspot{
		border-radius: 44px;
		height: 44px;
		width: 44px;
		text-align: center;
		vertical-align: middle;
		line-height: 44px;
		display: block;
		position: absolute;
		background-color: #E31F26;
		margin: -20px -18px;
		font-family: 'Open Sans', Helvetica, Arial, sans-serif;
		font-weight: bold;
		font-size: 20px;
		z-index: 10;
		border: solid 2px @white;
		text-indent:2px;
	}
	.duration-bar-home .homespot{
		border-radius: 44px;
		height: 44px;
		width: 44px;
		text-align: center;
		vertical-align: middle;
		line-height: 44px;
		display: block;
		position: absolute;
		background-color: #8b8b8b;
		margin: -20px -18px;
		font-family: 'Open Sans', Helvetica, Arial, sans-serif;
		font-weight: bold;
		font-size: 20px;
		z-index: 10;
		border: solid 2px @white;
		text-indent:2px;
	}
	.duration-bar-home .homespot{border: solid 7px rgba(0,0,0,0.2) !important; top: -6px;}
	.duration-bar-home .homespot.isDown{
		background-color: #E31F26;
	    -webkit-transition: background-color .5s,-webkit-transform .5s;
	    transition: background-color .5s,transform .5s;
	}
	.active .duration-bar .numberspot{
		background-color: #8b8b8b;
	    -webkit-transition: background-color 0.5s, -webkit-transform 0.5s;
		transition: background-color 0.5s, transform 0.5s;
	}

	a.numspotlink, a.numspothome {color: @white;}
	a.numspotlink:hover, a.numspothome:hover {color: rgba(50,50,50,0.85);}
	.duration-bar-home .homespot:before {
		content: "\e616";
		font-family: 'vanilla' !important;
		speak: none;
		font-style: normal;
		font-weight: normal;
		font-variant: normal;
		text-transform: none;
		line-height: 1;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}

	.duration-bar .page-level-progress-menu-item-indicator-bar{
		border-radius: 0px !important;
		background-color: @black;
		height: 60px !important;
	}

	.numspotlink .menu-tooltip{
	    background-color: @black;
	    border-radius: 5px;
	    bottom: 110px;
	    -webkit-box-shadow: 0 3px 10px 0 rgba(0,0,0,0.5);
	    -moz-box-shadow: 0 3px 10px 0 rgba(0,0,0,0.5);
	    box-shadow: 0 3px 10px 0 rgba(0,0,0,0.5);
	    color: @white;
	    display: block;
	    left: 5px;
	    line-height: 25px;
	    margin-left: -45px;
	    opacity: 0;
	    padding: 10px;
	    pointer-events: none;
	    position: absolute;
	    -webkit-animation-duration: 1s;
  		animation-duration: 1s;
        -webkit-animation-fill-mode: both;
  		animation-fill-mode: both;
	    width: 150px;
	    z-index: 999;
	    font-weight: bold;
	}

	.numspotlink .menu-tooltip:after {
		border-left: 20px solid transparent;
		border-right: 20px solid transparent;
		border-top: 20px solid @black;
		bottom: -15px;
		content: '';
		height: 0;
		left: 50%;
		margin-left: -20px;
		position: absolute;
		width: 0;
	}

	.numspothome .menu-tooltip{
	    background-color: @black;
	    border-radius: 5px;
	    bottom: 50px;
	    -webkit-box-shadow: 0 3px 10px 0 rgba(0,0,0,0.5);
	    -moz-box-shadow: 0 3px 10px 0 rgba(0,0,0,0.5);
	    box-shadow: 0 3px 10px 0 rgba(0,0,0,0.5);
	    color: @white;
	    display: block;
	    left: 5px;
	    line-height: 25px;
	    margin-left: -40px;
	    opacity: 0;
	    padding: 10px;
	    pointer-events: none;
	    position: absolute;
	    -webkit-animation-duration: 1s;
  		animation-duration: 1s;
        -webkit-animation-fill-mode: both;
  		animation-fill-mode: both;
	    width: 150px;
	    z-index: 999;
	    font-weight: bold;
	}

	.numspothome .menu-tooltip:after {
		border-left: 20px solid transparent;
		border-right: 20px solid transparent;
		border-top: 20px solid @black;
		bottom: -15px;
		content: '';
		height: 0;
		left: 50%;
		margin-left: -20px;
		position: absolute;
		width: 0;
	}

	@keyframes fadeInUp {
	  from {
	    opacity: 0;
	    -webkit-transform: translate3d(0, 100%, 0);
	    transform: translate3d(0, 100%, 0);
	  }

	  to {
	    opacity: 1;
	    -webkit-transform: none;
	    transform: none;
	  }
	}

	.carouselpushLeft {
	    position: fixed;
	    display: block;
	    height: 100px;
	    width: 52px;
	    bottom: 0px;
	    left: -20px;
	    z-index: 1000;
	    background-color: rgba(50,50,50,0.9);
	    color: #ffffff;
	    border: solid 2px #ffffff;
	    -webkit-transition: background-color .25s ease-in,color .25s ease-in,border-color .25s ease-in;
	    -moz-transition: background-color .25s ease-in,color .25s ease-in,border-color .25s ease-in;
	    -ms-transition: background-color .25s ease-in,color .25s ease-in,border-color .25s ease-in;
	    transition: background-color .25s ease-in,color .25s ease-in,border-color .25s ease-in;
	}
	.carouselpushRight {
	    position: fixed;
	    display: block;
	    height: 100px;
	    width: 52px;
	    bottom: 0px;
	    right: -20px;
	    z-index: 1000;
	    background-color: rgba(50,50,50,0.9);
	    color: #ffffff;
	    border: solid 2px #ffffff;
	    -webkit-transition: background-color .25s ease-in,color .25s ease-in,border-color .25s ease-in;
	    -moz-transition: background-color .25s ease-in,color .25s ease-in,border-color .25s ease-in;
	    -ms-transition: background-color .25s ease-in,color .25s ease-in,border-color .25s ease-in;
	    transition: background-color .25s ease-in,color .25s ease-in,border-color .25s ease-in;
	}
	.carouselpushLeft:hover, .carouselpushRight:hover {
		background-color: rgba(255,255,255,0.9);
		color: @black;
		border: solid 2px @black;
	}
	.carouselpushLeft:before{
		content: "\e64e";
		font-family: 'vanilla' !important;
		speak: none;
		font-style: normal;
		font-variant: normal;
		text-transform: none;
		line-height: 1;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		line-height: 80px;
		font-weight: bold;
	}
	.carouselpushRight:before{
		content: "\e651";
		font-family: 'vanilla' !important;
		speak: none;
		font-style: normal;
		font-variant: normal;
		text-transform: none;
		line-height: 1;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		line-height: 80px;
		font-weight: bold;
		margin-left: -16px;
	}
}
/* HIDES THE MENU ARROWS ADDS CLICK HERE */
.menu-item-control {visibility: hidden;}
.menu-item-button:after {
    content: 'Click or tap View to start.';
    display: block;
    font-size: 15px;
    font-weight: 700;
    color: @black;
    font-style: italic;
    letter-spacing: 1px;
}

.skipme {
    color: #ffffff;
    text-align: right;
    letter-spacing: 1px;
    cursor: pointer;
    width: 49%;
    display: inline-block;
    position: relative;
    margin-bottom: 0px;
    margin-top: 10px;
    font-weight: bold;
    float: right;
}
.skipme:hover {
    text-decoration: underline;
}

@-moz-document url-prefix() { 
  .menu-item-control {visibility: hidden;}
}

@media all and (max-width:1034px) {
	.duration-bar, .menu-tooltip {display:none !important;}
	.active .duration-bar, .homespot {display:block !important;}
	.active .duration-bar .menu-item-inner{position: fixed !important;}
	.active .duration-bar .menu-item-inner {margin-left: 0px !important;}
	.menu .duration-bar-home .menu-item-inner {margin-left: 0px !important; padding-left: 0px !important; position: fixed !important;}
	.menu .duration-bar-home {left: -10px !important; top: inherit !important; bottom: 0px !important;}
	.menu .menu-container-inner {text-align: left;}
	.menu-header-inner {margin-top: 100px !important;}
	.menu-item-body, .isDown, .carouselpushLeft, .carouselpushRight {display: none !important;}
	.menu-item-control {top:inherit; bottom: 8px; z-index: 1000;}
	.menu-item-control {visibility: visible;}
	@-moz-document url-prefix() { 
	  .menu-item-control {visibility: visible;}
	}
}
@media all and (max-width:768px) {
	.menu-header-inner {margin-top: 200px !important;}
}
@media all and (max-width:760px) {
	.menu-title-inner{
		padding:15px 0 0;
	}

	.duration-bar {display:none;}

	.menu-body-inner{
		padding:0px 0 10px;
	}
	.menu-box-info {top: 30vh !important;}
	.menu-header-inner {margin-top: 100px !important;}

   	.menu{

   		.menu-inner {
			padding:0;
		}

		.menu-item{
			margin-bottom:20px;
			
			&.nth-child-even, &.nth-child-odd{
				
				.menu-item-inner{
					margin:0;
				}
			}
		}
   	}
}

@media all and (max-width:@device-width-small) {
	.menu .menu-item-body-inner p {
	    overflow: hidden;
	    position: relative;
	    width: 80%;
	    left: 10%;
	    line-height: 1.3em;
	    max-height: 24.4em;
	    text-align: justify;
	    margin-right: -1em;
	    padding-right: 1em;
	}
	.menu-item-body-inner p:before {
	    content: '...';
	    position: absolute;
	    right: 0;
	    bottom: 0;
	}
	.menu-body {display: none !important;}
	.menu-header-inner {margin-top: 200px !important;}
}

.tooltips6 {
  font-family: 'BrownLight',Helvetica,Arial,sans-serif !important;
  font-size: 15px !important;
  letter-spacing: 0px;
  border: solid 2px @secondary-color;
  moz-box-shadow: 0 5px 8px rgba(0,0,0,0.5);
  -webkit-box-shadow: 0 5px 8px rgba(0,0,0,0.5);
  box-shadow: 0 5px 8px rgba(0,0,0,0.5);
} 


.tooltips6 h3{
  font-family: 'open_sans_Bold',Helvetica,Arial,sans-serif !important;
  font-size: 100%;
  letter-spacing: 0px;
}

.tooltips6 {
  position: fixed;
  width:350px;
  color: @white;
  background: @secondary-color;
  height: auto;
  line-height: 18px;
  text-align: center;
  border-radius: 0px;
  bottom: 100px;
  z-index: 600;
  right: 0px;
  padding: 20px;
  text-align:justify;
  border: 1px solid @white;
  left: 169px;

}
.tooltips6:after {
   content: '';
   position: absolute;
   bottom: -10px !important;
   left: 78% !important;
   margin-left: -8px;
   width: 0;
   height: 0;
   border-top: 10px solid @secondary-color;
   border-right: 10px solid transparent;
   border-left: 10px solid transparent;
}

*::-ms-backdrop, .tooltips6 { z-index: 511; } 
.tooltips6 { z-index: 500\9 ; }
_:-ms-lang(x), _:-webkit-full-screen, .tooltips6 { z-index: 511; }


@media all and (max-width:1366px){
    .tooltips6 {left: 121px;}
}

@media all and (max-width:1280px){
    .tooltips6 {left: 158px;}
}

@media all and (max-width:1024px){
    .tooltips6 {left: 208px;}
}

@media all and (max-width:950px){
    .tooltips6 {left: 86px;}
}

@media all and (max-width:@device-width-small){
    .tooltips6 {display: none;}
}
