/*----- RESET -----*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  outline: none;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}


@font-face {
	font-family: 'Aculida';
	src: url('fonts/Aculida/AculidaN11D.eot');
	src: url('fonts/Aculida/AculidaN11D.eot?#iefix') format('embedded-opentype'),
		url('fonts/Aculida/AculidaN11D.woff') format('woff'),
		url('fonts/Aculida/AculidaN11D.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}



/*----- HTML AND BODY -----*/
html {  }

body { 
  background: white; 
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  color: #313131;
  font-size: 100%; 
  line-height: 1; 
}

.no-scroll {
	overflow: hidden;
}

/*----- ACULIDA FONT -----*/
.file-type-video label { font-family: 'Aculida', Helvetica, Arial, sans-serif; font-weight: normal; text-transform: uppercase;font-size: 30px; }
a.btn { font-family: 'Aculida', Helvetica, Arial, sans-serif; font-weight: normal; text-transform: uppercase; }
h2.project-title { font-family: 'Aculida', Helvetica, Arial, sans-serif; font-weight: normal; text-transform: uppercase;font-size: 35px !important;line-height: 33px !important; }
.menu-btn { font-family: 'Aculida', Helvetica, Arial, sans-serif; font-weight: normal !important; text-transform: uppercase; letter-spacing: 0px !important; font-size: 1.5em !important;}

/*----- HEADER -----*/

header {
	width:100%;
	height:80px;
	box-sizing: border-box;
	background:black;
	color:white;
	padding:20px 0px 20px 0px;
	position: fixed;
	border:0;
	top:0;
	left:0;
	z-index:9999;
}

.logo {
		width:184px;
		height:40px;
		background:url(drop/images/ncc-logo.png);
		display: inline-block;
		background-size: auto 40px;
		background-repeat: no-repeat;
		margin:0 0 0 20px;
		float:left;
		}
		
		
header.slide {
    -webkit-transition: all .25s ease-in-out;
    -moz-transition: all .25s ease-in-out;
    -o-transition: all .25s ease-in-out;
    transition: all .25s ease-in-out;
}
header.slide--reset {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
}
header.slide--up {
    -webkit-transform: translateY(-100%);
    -ms-transform: translateY(-100%);
    transform: translateY(-100%);
}



		

		

label {
	color:#000000;
	font-weight: bold;
	display: block;
	margin:0px 0px 10px 0px;
}

label a {
	color:#000000;
}

a {
	margin-top:10px;
	display: block;
}

a.small {
	font-size: 0.8em;
}






video {
	width:100%;
	max-width:944px;
}






#preview {
	background:rgba(20,20,20,1);
	width:100%;
	height:100%;
	position: fixed;
	top:0;left:0;
	margin:0;padding:0;
	z-index:8888;
	display: table;
}

.preview-box {
	display: table-cell;
	text-align: center;
	vertical-align: middle;
}


#link-vid {
	width:100%;
	padding:20px;
	background-color: #333;
	/* border:3px solid #000000; */
	color:white;
	display: block;
	font-size: 2em;
	text-align: center;
	text-decoration: none;
	border-radius: 5px;
}

a#close-preview {
	color:white;
	position: fixed;
	top:0;
	right:-100px;
	margin:10px;
	z-index: 999999;
	border:1px solid white;
		border-radius: 5px;
		padding:10px;
}

a#close-preview:hover {
	color:#000000;
	border-color:#000000;
	cursor: pointer;
  -webkit-transition: all 0.2s linear;
  -moz-transition: all 0.2s linear;
  transition: all 0.2s linear;
}

#preview h1 {
	margin-bottom:20px;
}

header b {
	font-weight: bolder;
}








/* ADMIN */

#admin-login-btn {
	
}

#admin-login {
	margin: 0; padding: 0;
	background-color: rgba(20,20,20,0.9);
	width:100%; height:100%;
	position: fixed;
	top:0;left:0;
	z-index:99999999;
	display: none;
}

.bg {
		background-color: rgba(4,4,200,0.9);
		display: none;
}

#admin-login input {
	width:60px; height:80px;
	border:5px solid #e9e9e9;
	margin:0 5px 0 5px;
	font-size: 3em;
	text-align: center;
	-webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;
}

#admin-login .pin-box {
 background-color:#eee;
	width:400px;
	height: 200px;
	margin:0 auto;
	text-align: center;
	-webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px;
    position: absolute;
    top:100;
    bottom: 0;
    left: 0;
    right: 0;

    margin: auto;
    
    -webkit-box-shadow: 0 0 20px 0 rgba(0,0,0,0.1);
box-shadow: 0 0 20px 0 rgba(0,0,0,0.1);
}

#admin-login .pin-box h1 {
	display: block;
	margin:30px 0 20px 0;
	line-height: 1em;
	color:#999;
}

/* FOOTER */

hr.clear {
	background-color: transparent;
	border:1px solid white;
	clear: both;
	
}

.footer {
	padding:20px 0 20px 0;
	color:#ccc;
	font-size: 0.7em;
	display: block;
	clear:both;
}


/*  DIRECTORY  */




/* LOGIN PAGE */

#login {
		margin-top:200px;
		text-align: center;
}

#login h1 {
	margin-bottom:10px;
	color:#666;
}

.login-box {
	width:300px;
	background-color:#f9f9f9;
	-webkit-box-shadow: 0px 3px 10px 0px rgba(50, 50, 50, 0.2); -moz-box-shadow:    0px 3px 10px 0px rgba(50, 50, 50, 0.2); box-shadow:         0px 3px 10px 0px rgba(50, 50, 50, 0.2);
	-webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;
	padding:20px;
	margin:0 auto;
}

#login input[type=text],#login input[type=password] {
	font-size:1.3em;
	border:1px solid #ddd;
	padding:10px;
	color:#666;
	margin-bottom:3px;
	width:240px;
}

#login .submit {
	background-color:#000000;
	border:0px;
	color:#fff;
	padding:10px;
	font-size:1em;
	-webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;
	margin-top:5px;
	width:262px;
	text-decoration: none;
}

#login .submit:hover {
	cursor: pointer;
	background-color:#ff6c1d;
}

#login span {
	display: block;
	color:red;
	font-style: italic;
	font-size: 0.7em;
	margin-bottom:10px;
}









/*-- NAV --*/

.left {
	float:left;
}

.right {
	float:right;
}

.menu-btn {
	letter-spacing: -1px;
	color:#ad974e;
	height:47px;
	display:inline-block;
	float:right;
	text-decoration: none;
	line-height:47px;
	margin:0 20px 0 15px;
	font-weight: bold;
	font-size:20px;
	
	-webkit-transition: color ease-out 0.25s;
    -moz-transition: color ease-out 0.25s;
    -o-transition: color ease-out 0.25s;
    transition: color ease-out 0.25s;
	
}

.menu-btn:hover {
	color:white;
	-webkit-transition: color ease-out 0.25s;
    -moz-transition: color ease-out 0.25s;
    -o-transition: color ease-out 0.25s;
    transition: color ease-out 0.25s;
}

.menu-btn span { display: inline-block;margin-left:5px; }

@media screen and (max-width:800px) {
   .menu-btn span { display: none; }
   .menu-btn { margin:0 20px 0 0; }
}






/*-- DROP --*/
#inputfield {
width:100%;
  display: inline-block;
  background: #e1e1e1;
  padding: 0;
  margin: 0;
  padding: 5px;
  border-radius: 3px;
  margin: 5px 0 0 0;
  position: relative;
}
#inputfield .biginput {
  width:100%;
  height: 40px;
  padding: 0 10px 0 10px;
  background-color: #fff;
  border: 1px solid #c8c8c8;
  border-radius: 3px;
  color: #aeaeae;
  font-weight:normal;
  font-size: 1em;
  -webkit-transition: all 0.2s linear;
  -moz-transition: all 0.2s linear;
  transition: all 0.2s linear;
}
#inputfield .biginput:focus {
  color: #858585;
}



.flatbtn {
width:100%;
height:40px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  display: inline-block;
  outline: 0;
  border: 0;
  color: #ffffff;
  text-decoration: none;
  background-color: #6bb642;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  font-size: 0.9em;
  font-weight: bold;
  padding: 0px 0 0px 0;
  line-height: 40px;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  text-transform: uppercase;
  text-shadow: 0 1px 0 rgba(0,0,0,0.3);
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  -webkit-box-shadow: 0 1px 0 rgba(15, 15, 15, 0.3);
  -moz-box-shadow: 0 1px 0 rgba(15, 15, 15, 0.3);
  box-shadow: 0 1px 0 rgba(15, 15, 15, 0.3);
}
.flatbtn:hover,.flatbtn.hover {
  color: #fff;
  background-color: #73c437;
}
.flatbtn:active,.flatbtn.active {
  -webkit-box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.1);
  -moz-box-shadow:inset 0 1px 5px rgba(0, 0, 0, 0.1);
  box-shadow:inset 0 1px 5px rgba(0, 0, 0, 0.1);
}



.autocomplete-suggestions {   border: 1px solid #c8c8c8; background: #fff; cursor: default; overflow: auto; margin-top:2px;  border-radius: 3px; }
.autocomplete-suggestion { padding: 10px 5px; font-size: 1.2em; white-space: nowrap; overflow: hidden; }
.autocomplete-selected { background: #f0f0f0; }
.autocomplete-suggestions strong { font-weight: normal; color: #000000; }






label {
	color:#000000;
	font-weight: bold;

}


.customSelect { 
width:100%;
  height: 40px;
  padding: 0 0 0 10px;
  line-height:40px;
  background-color: #fff;
  border: 1px solid #c8c8c8;
  border-radius: 3px;
  color: #aeaeae;
  font-weight:normal;
  font-size: 0.9em;
  -webkit-transition: all 0.2s linear;
  -moz-transition: all 0.2s linear;
  transition: all 0.2s linear;
}
.customSelect.customSelectHover {
/* Styles for when the select box is hovered */
}
.customSelect.customSelectOpen {
/* Styles for when the select box is open */
}
.customSelect.customSelectFocus {
/* Styles for when the select box is in focus */
}
.customSelectInner {
width:300px;
}



#myAwesomeDropzone {
	margin:0 0 15px 0;
}



.client-input,.project-input {
	width:37%;
	display:inline-block;
}

.project-input {
	opacity:0.3;
}

.project-round {
	width:24%;
	display:inline-block;
	float:right;
	opacity:0.3;
}



/*
@media all and (-webkit-min-device-pixel-ratio:1.5),(min--moz-device-pixel-ratio:1.5),(-o-min-device-pixel-ratio:1.5/1),(min-device-pixel-ratio:1.5),(min-resolution:138dpi),(min-resolution:1.5dppx) {
	.logo {
		width:150px;
		height:38px;
		background:url(images/ncc-logo@2x.png);
		display: block;
		background-size: 150px 38px;
	}
*/
	




#clear-client, #clear-project, #round-spinner, #project-spinner {
	display: inline-block;
	display: none;
	position: absolute;
	float:right;
	top:13px;
	right:13px;
	color:#ddd;
	padding:0;
	text-align: center;
	border-radius: 5px;
	font-size: 1.3em;
	-webkit-transition: all 0.2s linear;
	-moz-transition: all 0.2s linear;
	transition: all 0.2s linear;
}

#round-spinner, #project-spinner {
	color:#999;
}

#clear-client:hover, #clear-project:hover {
	cursor: pointer;
	color:#000000;
	  -webkit-transition: all 0.2s linear;
  -moz-transition: all 0.2s linear;
  transition: all 0.2s linear;
}






/* ADMIN CSS */


/* Structure */
.col {
	width:400px;
	float:left;
	display: inline-block;
	padding-right:40px;
}

.col li {
	margin:10px 0 0 0;
}

/* Buttons */
.edit-project-btn, .delete-project-btn, .edit-client-btn, .delete-client-btn {
	-webkit-transition: all 0.2s linear;
	-moz-transition: all 0.2s linear;
	transition: all 0.2s linear;
	display: inline-block;
	padding:2px;
	background-color:#ffc1c1;
	-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;
	font-size:0.8em;
	color:red;
	border:1px solid red;
	float:right;
}

.edit-project-btn:hover, .delete-project-btn:hover, .edit-client-btn:hover, .delete-client-btn:hover {
	color:red;
	cursor:pointer;
	background-color:red;
	color:#ffc1c1;
	-webkit-transition: all 0.2s linear;
	-moz-transition: all 0.2s linear;
	transition: all 0.2s linear;
}

.delete-project-btn, .delete-client-btn {
	display: none;
}


#admin label {
	display: block;
	margin-top:10px;
}

#admin .flatbtn {
	margin-top:10px;
}

.perma {
	font-size: 0.7em !important;
	height:30px !important;
	background-color:#f1f1f1 !important;
}

#admin .description {
	font-size: 0.6em;
	display: block;
	padding:5px;
	color:#666;
	line-height:1.2em;
	font-style: italic;
}

#admin h1 {
	margin-top:20px;
	font-weight: bold;
	font-size: 2em;
}



.list li {
	border:1px solid #ccc;
	padding:7px;
	background-color:#f6f6f6;
	-webkit-border-radius: 6px;-moz-border-radius: 6px;border-radius: 6px;
}





/*-- LIST VIEWS --*/

.content {
	padding:20px;
	margin-top:80px;
	position: relative;
}


/*-- FILES --*/

.file-list {
	margin-left:270px;
}

@media screen and (max-width:800px) {
   .file-list { margin-left:0px; }
}


/*-- FILE BOX --*/

.file-box {
	padding:20px;
	background-color:white;
	margin:20px 0 0 0;
	display: block;
	width:904px;
	box-sizing: border-box;
	border:1px solid #d9d9d9;
	max-width:100%;
	-webkit-border-top-left-radius: 5px;
	-webkit-border-top-right-radius: 5px;
	-moz-border-radius-topleft: 5px;
	-moz-border-radius-topright: 5px;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
}




/*-- COPY TO CLIPBOARD --*/
.copy-confirm {
background-color: #c4ffb3;
border-bottom:1px solid #40a74d;
color:#40a74d;
padding:8px;
width:100%;

position: absolute;
text-align: center;
display: none;
top:80px;
left:0px;right:0px;
height:30px;
font-size: 13px;
line-height: 14px;

z-index: 99999;

}

.copy-confirm.show-dialog {
	top:0px;
}



/*-- MENU BUTTONS --*/

.btn {
	font-size: 1.5em;
	line-height: 40px;
	text-align: center;
	margin: 0;
	padding:0 15px 0 15px;
	border: 1px solid #000000;
	border-radius: 5px;
	background-color:white;
	text-decoration: none;
	color:#000000;
	display: inline-block;
	box-sizing: border-box;
}

.btn.btn-close {
	border: none;
	color:#999;
	background-color: transparent;
	font-size: 30px;
}

.btn.bigbtn {
	font-size: 1.3em;
	line-height: 50px;
	height:50px;
	float:left !important;
}

.btn:hover,.btn.hover,.zeroclipboard-is-hover {
	background-color:#000000;
	color:white;
	-webkit-transition: all 0.2s linear;
	-moz-transition: all 0.2s linear;
	transition: all 0.2s linear;

}
.btn:active,.btn.active {

}

.btn.copied {
	background:green;
}

@media screen and (max-width:1000px) {
   .btn span { display:none; }
}


.file-menu .biginput:focus {
  color: #858585;
}

.file-menu {
  width:904px;
  max-width: 100%;
  display: block;
  clear: both;
  background: #f9f9f9;
  box-sizing: border-box;
  border:1px solid #d9d9d9;
  border-top:none;
  margin: 0 0 10px 0;
  padding: 15px;
  text-align: center;
  -webkit-border-bottom-right-radius: 5px;
  -webkit-border-bottom-left-radius: 5px;
  -moz-border-radius-bottomright: 5px;
  -moz-border-radius-bottomleft: 5px; 
  border-bottom-right-radius: 5px;
  border-bottom-left-radius: 5px;
}

.file-menu .biginput {
  width:100%;
  height: 25px;
  padding: 0 10px 0 10px;
  background-color: #fff;
  border: 1px solid #c8c8c8;
  border-radius: 3px;
  color: #aeaeae;
  font-weight:normal;
  font-size: 0.7em;
  -webkit-transition: all 0.2s linear;
  -moz-transition: all 0.2s linear;
  transition: all 0.2s linear;
}



/*-- PDF --*/

.file-type-pdf {
	text-align: center;
	font-size: 12px;
}

.file-type-pdf img {
	max-width: 100%;
}

.file-type-pdf span {
	display: block;
	margin-top: 10px;
	font-weight: bold;
	color:#999;
}


/*-- AUDIO --*/

.file-type-audio audio {
	width:100%;
}

.file-type-audio span {
	display:block;
	color:#000000;
	margin-bottom:15px;
	line-height:20px;
	font-size: 14px;
}





/*-- RIGHT CLICK --*/

#right-click {
	position: fixed;
	display: none;
	width:200px;
	background-color: white;
	border:1px solid #ccc;

	overflow: hidden;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
}

#right-click .btn {
	background: transparent;
	margin:0;width:100%;
	display: block;
	border: none;
	border-bottom: 1px solid #ccc;
	-webkit-border-radius: 0px;
	-moz-border-radius: 0px;
	border-radius: 0px;
		margin-bottom: -1px;
}

#right-click .btn:nth-child(2) {
/* 	border: none; */
}



/*-- PREVIEW --*/

#preview {
	position: fixed;
	top:0;bottom:0;left:0;right:0;
	background:rgba(0,0,0,0.7);
	display: none;
	z-index: 999999;
}

.preview-type-pdf {
	max-width: 80%;
	width:1024px;
	max-height: calc(100% - 60px);
	height:100%;
	background-color: white;
	margin:30px auto;
	overflow: hidden;
	-webkit-border-top-left-radius: 10px;-webkit-border-top-right-radius: 10px;-moz-border-radius-topleft: 10px;-moz-border-radius-topright: 10px;border-top-left-radius: 10px;border-top-right-radius: 10px;
}

.preview-pdf-header {
	height:60px;line-height: 40px;background-color: #f9f9f9;padding:10px 5px 10px 20px;border-bottom: 1px solid #ccc;
}

.preview-pdf-header span {
	width:calc(100% - 330px);display: inline-block;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;
}

.preview-pdf-header span i {
	color:red;
}

.preview-pdf-content {
	position: relative;
	height:calc(100% - 60px);
}

.preview-pdf-content iframe {
	position: absolute;
	width:100%;height:100%;
	top:0;left:0;right:0;bottom:0;
	margin:0;padding:0;
}

.preview-type-pdf .btn {
	margin-left:5px;
	float:right;
}





/*----- PROJECT HEADER -----*/		
		
.project-header {   width:100%; max-width:904px; height:60px;line-height: 60px; }

.project-header .project-title {
	font-size:3em;
	display: inline-block;
	margin-right: 20px;
}

.project-header .project-version {
	float:right;
	display: inline-block;
}

.project-header h2 span {
	font-weight: bold;
}

@media screen and (max-width:800px) {
   .project-header { height:30px;line-height: 30px; }
   .project-header .project-title { font-size: 1.5em; }
}


.project-header.slide--up { height:30px;line-height:30px;position: fixed;top:80px; background: #000000;color:white; font-size: 12px;z-index: 8888;margin-left:-20px;padding:0 20px;width: 100%;max-width: 100%;

	-webkit-transform:translateY(-30px);
	transform:translateY(-30px);
	
	-webkit-animation: showProjectHeader ease-Out 0.5s forwards; /* Chrome, Safari, Opera */
    animation: showProjectHeader ease-Out 0.55s forwards;
}		
		
/* Chrome, Safari, Opera */
@-webkit-keyframes showProjectHeader {
    from {-webkit-transform:translateY(-30px);}
    to {-webkit-transform:translateY(0px);}
}

/* Standard syntax */
@keyframes showProjectHeader {
    from {transform:translateY(-30px);}
    to {transform:translateY(0px);}
}