/* Basic */

body.is-loading * {
	-moz-transition: none !important;
	-webkit-transition: none !important;
	-ms-transition: none !important;
	transition: none !important;
	-moz-animation: none !important;
	-webkit-animation: none !important;
	-ms-animation: none !important;
	animation: none !important;
}

/* Wrappers */

	#header-wrapper {
		position: relative;
		background: #ffffff;
		border-bottom: solid 1px #ccc;
	}


	

/* Desktop */

	@media screen and (min-width: 737px) {


			.dropotron {
				border-radius: 5px;
				background-color: #252122;
				background-color: rgba(34, 30, 31, 0.98);
				padding: 1.25em 1.5em 1.25em 1.5em;
				font-style: italic;
				min-width: 13em;
				box-shadow: 0px 8px 15px 0px rgba(0, 0, 0, 0.5);
				text-align: left;
				margin-top: -1.25em;
				margin-left: -1px;
			}

				.dropotron a, .dropotron span {
					color: #aaa;
					text-decoration: none;
					-moz-transition: color .25s ease-in-out;
					-webkit-transition: color .25s ease-in-out;
					-ms-transition: color .25s ease-in-out;
					transition: color .25s ease-in-out;
				}

				.dropotron li {
					padding: 0.25em 0 0.25em 0;
				}

					.dropotron li:hover > a, .dropotron li:hover > span {
						color: #fff;
					}

				.dropotron.level-0 {
					margin-top: 2em;
				}

					.dropotron.level-0:before {
						content: '';
						display: block;
						position: absolute;
						left: 50%;
						margin-left: -10px;
						top: -9px;
						border-left: solid 10px transparent;
						border-right: solid 10px transparent;
						border-bottom: solid 10px #252122;
						border-bottom-color: rgba(34, 30, 31, 0.98);
					}

	}
@media only screen and (max-width: 780px) {
	#menuLateral{opacity: 1;}
	#nav{opacity: 1;}
}
/* Mobile */

	#navPanel, #titleBar {
		display: none;
	}

	@media screen and (max-width: 736px) {
		#menuLateral{opacity: 1;}
		#nav{opacity: 0;}
		/* Basic */

			html, body {
				
				background: #252122;
				
			}
		/* Nav */

			#nav {
				display: none;
			}

		/* Off-Canvas Navigation */

			#page-wrapper {
				-moz-backface-visibility: hidden;
				-webkit-backface-visibility: hidden;
				-ms-backface-visibility: hidden;
				backface-visibility: hidden;
				-moz-transition: -moz-transform 0.5s ease;
				-webkit-transition: -webkit-transform 0.5s ease;
				-ms-transition: -ms-transform 0.5s ease;
				transition: transform 0.5s ease;
				padding-bottom: 1px;
			}

			#titleBar {
				-moz-backface-visibility: hidden;
				-webkit-backface-visibility: hidden;
				-ms-backface-visibility: hidden;
				backface-visibility: hidden;
				-moz-transition: -moz-transform 0.5s ease;
				-webkit-transition: -webkit-transform 0.5s ease;
				-ms-transition: -ms-transform 0.5s ease;
				transition: transform 0.5s ease;
				display: block;
				height: 44px;
				left: 0;
				position: fixed;
				top: 0;
				width: 100%;
				z-index: 10001;
				background: none;
			}

				#titleBar .toggle {
					width: 80px;
					height: 60px;
				}

					#titleBar .toggle:before {
						font-family: FontAwesome;
						text-decoration: none;
						font-style: normal;
						font-weight: normal;
						-webkit-font-smoothing: antialiased;
						-moz-osx-font-smoothing: grayscale;
						content: '\f0c9';
						display: block;
						position: absolute;
						left: 10px;
						top: 10px;
						width: 50px;
						height: 40px;
						line-height: 40px;
						font-size: 18px;
						color: #fff;
						text-align: center;
						background: rgba(150, 150, 150, 0.75);
						border-radius: 5px;
					}

					#titleBar .toggle:active:before {
						background-color: #969696;
					}

			#navPanel {
				-moz-backface-visibility: hidden;
				-webkit-backface-visibility: hidden;
				-ms-backface-visibility: hidden;
				backface-visibility: hidden;
				-moz-transform: translateX(-275px);
				-webkit-transform: translateX(-275px);
				-ms-transform: translateX(-275px);
				transform: translateX(-275px);
				-moz-transition: -moz-transform 0.5s ease;
				-webkit-transition: -webkit-transform 0.5s ease;
				-ms-transition: -ms-transform 0.5s ease;
				transition: transform 0.5s ease;
				display: block;
				height: 100%;
				left: 0;
				overflow-y: auto;
				position: fixed;
				top: 0;
				width: 275px;
				z-index: 10002;
				color: #858484;
				background-image: url("images/bg02.png");
				box-shadow: inset -3px 0px 5px 0px rgba(0, 0, 0, 0.35);
			}

				#navPanel .link {
					display: block;
					color: #888;
					text-decoration: none;
					height: 44px;
					line-height: 44px;
					border-top: solid 1px rgba(255, 255, 255, 0.05);
					padding: 0 1em 0 1em;
					font-style: italic;
				}

					#navPanel .link:first-child {
						border-top: 0;
					}

				#navPanel .indent-1 {
					display: inline-block;
					width: 1em;
				}

				#navPanel .indent-2 {
					display: inline-block;
					width: 2em;
				}

				#navPanel .indent-3 {
					display: inline-block;
					width: 3em;
				}

				#navPanel .indent-4 {
					display: inline-block;
					width: 4em;
				}

				#navPanel .indent-5 {
					display: inline-block;
					width: 5em;
				}

				#navPanel .depth-0 {
					color: #fff;
				}

			body.navPanel-visible #page-wrapper {
				-moz-transform: translateX(275px);
				-webkit-transform: translateX(275px);
				-ms-transform: translateX(275px);
				transform: translateX(275px);
			}

			body.navPanel-visible #titleBar {
				-moz-transform: translateX(275px);
				-webkit-transform: translateX(275px);
				-ms-transform: translateX(275px);
				transform: translateX(275px);
			}

			body.navPanel-visible #navPanel {
				-moz-transform: translateX(0);
				-webkit-transform: translateX(0);
				-ms-transform: translateX(0);
				transform: translateX(0);
			}


		

	}