@import url(font-awesome.min.css);


/* Header */

.header-container {
			background-color:#199fda;
		}	

		#header {
			position:relative;
			width: 100%;
			max-width: 1440px;
			margin: 0 auto;
			height: 95px;
			z-index: 10000;
			box-sizing: border-box;
			padding:1px;
		}	

		@media screen and (min-width: 800px) {
			#header {
				width:100%;
				z-index: 200;
			}
		}
		
		#header nav {
			height: inherit;
			line-height: inherit;
			position: absolute;
			right: 0px;
			top: 50px;
			font-weight:400;
		}

			#header nav > ul {
				list-style: none;
				margin: 0;
				padding: 0;
			}

				#header nav > ul > li {
					display: inline-block;
					text-align: center;
					margin-left:0.15em;
				}

				#header nav > ul > li a {
					display: block;
					font-weight: 600;
					color: #000;
					padding: 5px 0px;
				}



					#header nav > ul > li > ul {
						display: none;
					}

					#header nav > ul > li a {
						font-size: 0.95em;
						font-weight: 400;
						text-decoration: none;
						border-bottom: 0;
						color:#FFF;
						background-color: rgba(255, 255, 255, .18);
						border: 10px;
						border-radius: 10px;
						padding:12px 8px;
						-moz-transition: background-color 0.2s ease-in-out;
						-webkit-transition: background-color 0.2s ease-in-out;
						-ms-transition: background-color 0.2s ease-in-out;
						transition: background-color 0.2s ease-in-out;
					}

				

						@media (min-width: 1280px) {
							
							#header nav > ul > li {
								margin-left:0.45em;
							}
							
							#header nav > ul > li a {
								font-size: 1em;
								border: 14px;
								border-radius: 14px;
								padding:16px 12px;
								-moz-transition: background-color 0.2s ease-in-out;
								-webkit-transition: background-color 0.2s ease-in-out;
								-ms-transition: background-color 0.2s ease-in-out;
								transition: background-color 0.2s ease-in-out;
							}
						}


					#header nav > ul > li a:hover {

						background-color: rgba(255, 255, 255, .38);
						cursor: pointer;
					}

						#header nav > ul > li a:before {
							-moz-osx-font-smoothing: grayscale;
							-webkit-font-smoothing: antialiased;
							font-family: FontAwesome;
							font-style: normal;
							font-weight: normal;
							text-transform: none !important;
						}

						#header nav > ul > li a:before {
							margin-right: 0.75em;
						}

					#header nav > ul > li:first-child {
						margin-left: 0;
					}

				#header nav > ul > li a.active {
					background-color:#fade4b;
					color: #000;
				}


		#header .navPanelToggle {
			text-decoration: none;
			border: 0;
			height: 4em;
			position: absolute;
			right: 0;
			top: 35px;
			width: 50px;
			display: none;
			
			color:#000;
			
		}

			#header .navPanelToggle:before {
				-moz-osx-font-smoothing: grayscale;
				-webkit-font-smoothing: antialiased;
				font-family: FontAwesome;
				font-style: normal;
				font-weight: normal;
				text-transform: none !important;
			}

			#header .navPanelToggle:before {
				content: '\f0c9';
				width: 50px;
				height: 50px;
				display: block;
				position: absolute;
				right: 0;
				top: 0;
				text-align: center;
				font-size: 20px;
				line-height: 50px;
				color:#fff;
				background-color: rgba(255, 255, 255, 0.18);
				border:10px;
				border-radius: 10px;
			}


		#header.reveal {
			-moz-animation: reveal-header 0.5s ease;
			-webkit-animation: reveal-header 0.5s ease;
			-ms-animation: reveal-header 0.5s ease;
			animation: reveal-header 0.5s ease;
		}

		
		@media screen and (max-width: 800px) {

			#header nav {
				display: none;
			}

			#header .navPanelToggle {
				display: block;
			}
		}
			
		
		@media only screen and (max-device-width: 800px), screen and (max-width: 800px) {
			#header {
				height: 110px;
				left: 0;
				line-height: 4.5em;
			}
		}


/* Navigation Panel */

	#navPanel {
		-moz-transform: translateX(20em);
		-webkit-transform: translateX(20em);
		-ms-transform: translateX(20em);
		transform: translateX(20em);
		-moz-transition: -moz-transform 0.5s ease, box-shadow 0.5s ease, visibility 0.5s;
		-webkit-transition: -webkit-transform 0.5s ease, box-shadow 0.5s ease, visibility 0.5s;
		-ms-transition: -ms-transform 0.5s ease, box-shadow 0.5s ease, visibility 0.5s;
		transition: transform 0.5s ease, box-shadow 0.5s ease, visibility 0.5s;
		-webkit-overflow-scrolling: touch;
		background-color: #FFF;
		box-shadow: none;
		display: none;
		height: 100%;
		max-width: 80%;
		overflow-y: auto;
		position: fixed;
		right: 0;
		top: 0;
		visibility: hidden;
		width: 20em;
		z-index: 10002;
		font-family: 'Comfortaa', cursive;
		font-weight: 700;
	}

		#navPanel nav {
			padding: 3em 2em;
		}

		#navPanel .link {
			border: 0;
			border-top: solid 1px #e6e6e6;
			color: inherit !important;
			display: block;
			font-size: 1em;
			padding: 0.75em 0;
			text-decoration: none;
		}

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

		#navPanel .close {
			text-decoration: none;
			-moz-transition: color 0.2s ease-in-out;
			-webkit-transition: color 0.2s ease-in-out;
			-ms-transition: color 0.2s ease-in-out;
			transition: color 0.2s ease-in-out;
			-webkit-tap-highlight-color: transparent;
			border: 0;
			color: #5E6167;
			cursor: pointer;
			display: block;
			height: 4em;
			padding-right: 1.25em;
			position: absolute;
			right: 0;
			text-align: right;
			top: 0;
			vertical-align: middle;
			width: 5em;
		}

			#navPanel .close:before {
				-moz-osx-font-smoothing: grayscale;
				-webkit-font-smoothing: antialiased;
				font-family: FontAwesome;
				font-style: normal;
				font-weight: normal;
				text-transform: none !important;
			}

			#navPanel .close:before {
				content: '\f00d';
				width: 3em;
				height: 3em;
				line-height: 3em;
				display: block;
				position: absolute;
				right: 0;
				top: 0;
				text-align: center;
			}

			#navPanel .close:hover {
				color: inherit;
			}

			@media screen and (max-width: 736px) {

				#navPanel .close {
					height: 4em;
					line-height: 4em;
				}

			}

		#navPanel.visible {
			-moz-transform: translateX(0);
			-webkit-transform: translateX(0);
			-ms-transform: translateX(0);
			transform: translateX(0);
			box-shadow: 0 0 0.125em 0 rgba(0, 0, 0, 0.35);
			visibility: visible;
		}

		@media screen and (max-width: 980px) {

			#navPanel {
				display: block;
			}

		}


.logo {
	background-image:url(../../images/itsa-logo.svg);
	background-size:contain;
	background-repeat:no-repeat;
	width:100px;
	height:100px;
}

	@media (min-width: 480px) {
		.logo {
			width:120px;
			height:120px;
		}
	}

	
	@media (min-width: 800px) {
		.logo {
			width:120px;
			height:120px;
		}
	}

	@media (min-width: 1280px) {
		.logo {
			width:130px;
			height:130px;
		}
	}

	@media (min-width: 1680px) {
		.logo {
			width:160px;
			height:160px;
		}
	}

@media (min-width: 800px) {
		
	.hideme {
		visibility: hidden;
		width:0;
		overflow:hidden;
	}
}