@font-face {
  font-family: 'gotham_bookregular';
  src: url("../fonts/gotham-book-webfont.eot");
  src: url("../fonts/gotham-book-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/gotham-book-webfont.woff") format("woff"), url("../fonts/gotham-book-webfont.ttf") format("truetype"), url("../fonts/gotham-book-webfont.svg#gotham_bookregular") format("svg");
  font-weight: normal;
  font-style: normal; 
 }
@font-face {
  font-family: 'CenturyGothicRegular';
  src: url('../fonts/century-gothic.eot');
  src: url('../fonts/century-gothic.eot') format('embedded-opentype'), url('../fonts/century-gothic.woff') format('woff'), url('../fonts/century-gothic.ttf') format('truetype'), url('../fonts/century-gothic.svg#CenturyGothicRegular') format('svg');
}
@font-face {
  font-family: 'CenturyGothicBold';
  src: url('../fonts/century-gothic-bold.eot');
  src: url('../fonts/century-gothic-bold.eot') format('embedded-opentype'), url('../fonts/century-gothic-bold.woff') format('woff'), url('../fonts/century-gothic-bold.ttf') format('truetype'), url('../fonts/century-gothic-bold.svg#CenturyGothicBold') format('svg');
}
@font-face {
  font-family: 'HelveticaNeueRegular';
  src: url('../fonts/helveticaneue.eot');
  src: url('../fonts/helveticaneue.eot') format('embedded-opentype'), url('../fonts/helveticaneue.woff') format('woff'), url('../fonts/helveticaneue.ttf') format('truetype'), url('../fonts/helveticaneue.svg#HelveticaNeueRegular') format('svg');
}
@font-face {
  font-family: 'HelveticaNeueMedium';
  src: url('../fonts/helveticaneue-medium.eot');
  src: url('../fonts/helveticaneue-medium.eot') format('embedded-opentype'), url('../fonts/helveticaneue-medium.woff') format('woff'), url('../fonts/helveticaneue-medium.ttf') format('truetype'), url('../fonts/helveticaneue-medium.svg#HelveticaNeueMedium') format('svg');
}
@font-face {
  font-family: 'HelveticaNeueLight';
  src: url('../fonts/helveticaneue-light.eot');
  src: url('../fonts/helveticaneue-light.eot') format('embedded-opentype'), url('../fonts/helveticaneue-light.woff') format('woff'), url('../fonts/helveticaneue-light.ttf') format('truetype'), url('../fonts/helveticaneue-light.svg#HelveticaNeueLight') format('svg');
}
@font-face {
  font-family: 'HelveticaNeueCondensedBold';
  src: url('../fonts/helveticaneue-condensedbold.eot');
  src: url('../fonts/helveticaneue-condensedbold.eot') format('embedded-opentype'), url('../fonts/helveticaneue-condensedbold.woff') format('woff'), url('../fonts/helveticaneue-condensedbold.ttf') format('truetype'), url('../fonts/helveticaneue-condensedbold.svg#HelveticaNeueCondensedBold') format('svg');
}

* {
	margin: 0;
}
html, body{
	background: #ddd;
	margin: 0 auto;
	font-family: "HelveticaNeueLight";
	height: 100%;
}

a{
	transition: all 0.5s ease;
	/* color: #33F4B6; */
	color: #000;
	cursor: pointer;
	text-decoration: none;
}
a:hover{
	color: #ddd;
}
.clear{
	clear: both;
}
.loader {
	position: fixed;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	z-index: 9999;
	background: url('../images/loading.gif') 50% 50% no-repeat rgb(0,0,0);
	display:none;
}

.loading {
	position: fixed;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	z-index: 9999;
	background: url('../images/loading.gif') 50% 50% no-repeat rgba(0,0,0, .5);
	display:none;
}

.header{
	background: #E41F1F;
	margin: 0 auto;
	margin-bottom: 50px;
	color: #fff;
	-webkit-box-shadow: 0 4px 4px -2px #000000;
	-moz-box-shadow: 0 4px 4px -2px #000000;
	box-shadow: 0 4px 4px -2px #000000;
	padding: 10px;
	width: 100%;
	position: fixed;
	z-index: 9;
}
	#nav
	{
		/* container */
		float: left;
	}
		#nav > a
		{
			display: none;
			color: #fff;
		}
		#nav li
		{
			position: relative;
			z-index: 9;
		}
	 
		/* first level */
	 
		#nav > ul
		{
			height: 20px;
			list-style: none;
			position: relative;
			z-index: 9;
		}
			#nav > ul > li
			{
				margin-left: 20px;
				margin-right: 20px;
				height: 100%;
				float: left;
			}
	 
		/* second level */
	 
		#nav li ul
		{
			display: none;
			position: absolute;
			top: 100%;
			list-style: none;
			padding-left: 0px;
			padding-right: 5px;
			padding-top: 5px;
			margin-bottom: 10px;
		}
			#nav li ul > li{
				margin-bottom: 2px;
				background: #ED312C;
				padding-left: 5px;
				padding-right: 5px;
				padding-bottom: 3px;
				width: 200px;
			}

			#nav li:hover ul
			{
				display: block;
			}

	

.container{
	min-height: 100%;
	height: auto !important; /* This line and the next line are not necessary unless you need IE6 support */
	height: 100%;
	margin: 0 auto -25px; 
}
	.tabs{
		margin-bottom: 1px;
		margin-left: 10px;
	}
		.tabs a.pil{
			background:#E41F1F; 
			color:#fff; 
			padding:5px; 
			padding-left:20px; 
			padding-right:30px; 
			display:inline-block;
		}
		.tabs a.pil:hover{
			background: red;
		}
		.tabs a.active{
			background: #fff;
			color: #000;
		}

	.form-input{
		margin-bottom: 10px;
		margin-left:10px;
	}
		.form-input label{
			width: 120px;
			display: inline-block;
		}
		.form-input .input-text, .form-input .input-list{
			background: #fff;
			border-radius: 3px;
			border-style: solid;
			border-width: 1px;
			border-color: #aaa #ccc #ccc #aaa;
			padding: 5px 7px 5px 7px; 
			width: 70%;
			transition: all 0.5s ease;
		}
		.form-input .input-text:focus{
			border-color: #E41F1F;
		}
	.btn-wrapper{
		margin-top: 30px;
	}
	
	/***** BUTTON  *****/
	.input-btn{
		background: #fff;
		border-radius: 3px;
		border-style: solid;
		border-width: 1px;
		border-color: #aaa #ccc #ccc #aaa;
		padding: 5px 10px 5px 10px;
		font-weight: bold;
		cursor: pointer;
		transition: all 0.5s ease;
	}
	.input-btn:hover{
		background: #ddd;
	}
	.input-btn.save{
		background: #0DCC1C;
		transition: all 0.5s ease;
	}
	.input-btn.save:hover{
		color: #fff;
	}

	.btn-edit{
		background: orange;
		color: #fff;
		padding: 2px 5px 2px 5px;
		font-size: 11px;
		border-radius: 3px;
	}
		.btn-edit:hover{
			background: #646464;
		}
	.btn-delete{
		background: red;
		color: #fff;
		padding: 2px 5px 2px 5px;
		font-size: 11px;
		border-radius: 3px;
	}
		.btn-delete:hover{
			background: #646464;
		}

	.active-menu{
		color: #fff;
	}

.footer, .push{
	height: 20px;
}

.ini-foot{
	background: #626160;
	border-bottom: 5px solid #E41F1F;
}

.popup{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 10;
	background-color: rgba(0,0,0,0.7); /*dim the background*/
	display: none;
}
.popup-wrapper {
	/* some styles to position the modal at the center of the page */
	position: fixed;
	top: 50%;
	left: 50%;
	width: 700px;
	height: 500px;
	margin-left: -350px;
	margin-top: -250px;
	background-color: #ddd;
	text-align: center;

	/* needed styles for the overlay */
	z-index: 10; /* keep on top of other elements on the page */
	border-radius: 20px;
	border:5px solid #fff;
}
	.popup-wrapper .popup-close{
		float:right; 
		width:30px; 
		height:30px; 
		background:#646464; 
		color:#fff; 
		border-radius:100px;
		cursor: pointer;
		transition: all 0.5s ease;
	}
		.popup-wrapper .popup-close:hover{
			background: #e41f1f;
		}
	.popup-wrapper .popup-close-btn{
		margin-top:3px; 
		font-weight:bold; 
		display:inline-block;
	}
	.popup-wrapper .title{
		font-size:20px; 
		font-weight:bold; 
		padding:10px;
		width: 90%;
		margin: 0 auto;
		border-bottom:1px solid #000;
	}
	.popup-wrapper .popup-form{
		margin-top:20px;
	}


@media (max-width:640px){
	#nav
    {
        position: relative;
    }
        #nav > a
        {
        }
        #nav:not( :target ) > a:first-of-type,
        #nav:target > a:last-of-type
        {
            display: block;
        }
 
    /* first level */
 
    #nav > ul
    {
        height: auto;
        display: none;
        position: absolute;
        left: 0;
        right: 0;
    }
        #nav:target > ul
        {
            display: block;
        }
        #nav > ul > li
        {
            width: 100%;
            float: none;
        }
 
    /* second level */
 
    #nav li ul
    {
        position: static;
    }
}