/*  
	CSS for Final Project
good light grey = #CACACA
another color #fff, 959592
body =#697e83;
header = 
backgroundcolor/body - #666666;b
backgroundcolor/nav - #909082 
*/

/* ----------------- General CSS Verdana; ----------------- */

body { 		background-color: #666677;
		/* color: #959592; */
		font-family: Lucida Sans, Arial, Helvetica, sans-serif;
		font-size: 14px;		}

main {		font-size: 110%;
		margin: auto;
		padding-right: 5%;
		padding-left: 5%;
		width: 90%;		}

main p { 	text-align: justify;
		margin: 15px;
		line-height: 150%;
		color:  #A0A0B0; 			}
 
main ul li, main ul li:hover {text-decoration: none; color: #A0A0B0;}

/*	aside {	width: 20%;
		padding: 10px 4px 10px 24px;
		margin-left: 15px;
		float: left;					}

 	section {	width: 75%;
		padding: 6px 4px 6px 8px;
		border-left: 1px solid #959592;
		float: right;					}	*/

header {	height: 100px;
		padding: 0px;
		margin: 0px;
		width: 100%;
		background-color: #191919;
		border-radius: 0px;			}




nav { 	border-radius: 5px;
		margin: 10px;
		padding-right: 5%;
		padding-left: 5%;
		height: 35px;
		font-size: 150%;
		font-weight: bold;
		text-align: center;
		line-height: 35px; }
 
nav ul {	list-style: none;
		background-color: #828290;
		padding: 0px;	
		border-radius: 50px;				}

nav ul li { 	display: inline-block;
		position: relative; 	
		padding: 0px 40px 0px;
		font-size: 80%;					}

nav ul li ul {	min-width: 100%;
		opacity: 0.9;
		display: none;
		position: absolute;
		border-radius: 5px;	
		text-align: left; }

nav ul li ul li a {	text-align: left;
			padding: 0px; }

nav ul li a:before {	content: "";
			position: absolute;
			width: 100%;
			height: 2px;
			bottom: 0;
			left: 0;
			background-color: #000;
			visibility: hidden;
			-webkit-transform: scaleX(0);
			transform: scaleX(0);
			-webkit-transition: all 0.3s ease-in-out 0s;
			transition: all 0.3s ease-in-out 0s;}

nav ul li a:hover before {	visibility: visible;
				transform: scaleX(1);
				text-decoration: none;		}

nav ul li a, nav ul li:hover ul, nav ul li ul li { display:block;}

nav a { 	text-decoration: none;
		font-weight: bold;
		color: #000;					}

nav a:hover {color: #444466}




a:link {	color:  #c3c3cc;		
		font-weight: bold;				}

a:hover {	color: #000;
		text-decoration: none;				}

p a {		text-decoration: none;
		letter-spacing: 0.5px; 
		font-weight: bold;	
		color:  #E1E1E9;	}

h1 {		/* font-family: Arial, Helvetica, sans-serif; */
		letter-spacing: -1px;
		font-size: 54px;
		margin: 0;
		padding: 10px 0px 0px 10px;
		color: #727290; /*#828290; */
		/* color: #666; */
		text-align: center;	
		vertical-align: middle; 
		display: inline;			}

h2 {		font-size: 27px;
		margin: 0px;
		text-transform: uppercase;
		color: #A0A0B0;	/* h2 and h3 are the same */
		text-align: center;				}

h3 {	font-size: 18px;
		margin: 0px;
		padding: 5px;
		text-transform: uppercase;
		color: #A0A0B0; /* h2 and h3 are the same */
		letter-spacing: 0.5px;
		text-align: left;				}

p {		margin: 10px 0px;
		padding: 0px;
		font-size: 14px;
		color: #A0A0B0 ;} /* #C3C3CC #C7C7D0; DFDFE4}*/

img {	/*	border-style: solid; 
		border-color: #959592;
		border-width: 2px;
		padding: 50px; */ }

/* ul li:hover {	text-decoration: underline;
		cursor: pointer;				} */
ul li {font-size: 14px;}

footer {	background-color:  #828290;
		color:  #c3c3cc;	
		height: 60%;
		font-weight: bold;
		padding: 30px;	
		text-align: center;
		border-radius: 10px;					}

footer p {color: #c3c3cc;}

form {		padding-top: 15px;				}	

#wrapper {	margin: 0 auto;
		width: 85%;
		padding: 20px;
		background-color: #FFF;
		border: 1px solid #878e63;
		border-radius: 0px;
		box-shadow: 0px 0px 10px rgba(12, 3, 25, 0.8);	}

.trilogo {max-height: 100%; display: inline; padding-left: 6%;}

table {vertical-align: middle; color: #000;}

table td, table label {color: #A0A0B0;}
table th {color: #A3A3B3; }


/* ----------------- Home page ----------------- */

/* ----------------- About page ----------------- */

/* ----------------- Contact page ----------------- */
#name, #email, #phone, #select, #textarea {margin: 10px;}

/* ----------------- TD, Design, Tech pages ----------------- */
/* .photoDesignTech { padding: 2%;} */
.tablePhoto {width: 60%; padding: 3%;}

.tableText {width: 30%; padding: 1%;}
/* ----------------- Light, Set, Sound, Other pages ----------------- */
.indivSection {width: 30%; padding: 1%;}

/* ----------------- Photo Gallary pages ----------------- */

.picture {
	width: 100%;
	overflow: hidden;
}

#curtain{			width: 100%;
					/* height: 100%; */
					top: 0;
					left: 0;
					position: fixed;
					background-color: rgba(0,0,0,0.4);	}

#light{				max-width: 80%;
					/* max-height: 80%; */
					top: 0;
					left: 0;
					right: 0;
					bottom: 0;
					position: absolute;
					margin: auto;			}

#close{				/* height: 50px; */
					width: 50px;
					top:0;
					right: 0;
					position: absolute;
					z-index: 990;						}

		
.black_overlay{		display: none;
					position: absolute;
					top: 0%;
					left: 0%;
					width: 100%;
					height: 100%;
					background-color: black;
					z-index:1001;
					-moz-opacity: 0.8;
					opacity:.80;
					filter: alpha(opacity=80);			}
		
.white_content {	display: none;
					position: absolute;
					top: 25%;
					left: 25%;
					width: 50%;
					/* height: 50%; */
					padding: 5px;
					background-color: grey;
					z-index:1002;
					overflow: auto;						}


/* slideshow */

.homeSlides { 			display: none;						}

.slideshow-container {	max-width: 1200px;
						height: 700px; 
						position: relative;
						margin: 0 auto;	
						padding:10px;						}

.banner{				width: 100%;
						height: 100%;	/* 538px */
						position: relative;					}

#slider{				width: 100%;
						height: 100%;	/* 538px */
						position: absolute;
						overflow: hidden;					}

#next{					text-align: center;
						font-size: 24px;
						line-height: 48px;	/* 50px */
						color: #ffffff;
						width: 48px;		/* 50px */
						height: 48px;		/* 50px; */
						background-color: #595971; 
						position: absolute;
						top: 205px;
						right: 0;
						z-index: 99;
						cursor: pointer;
						opacity:.4; 						}

#prev{					text-align: center;
						font-size: 24px;
						line-height: 48px;	/* 50px; */
						color: #ffffff; 
						width: 48px;		/* 50px */
						height: 48px;		/* 50px; */
						background-color: #595971;
						position: absolute;
						top:205px;
						left:0;
						z-index:99;
						cursor: pointer;
						opacity:.4; 						}

a.prev:link, a.next:link {	color: rgba(255, 255, 255, 1);	
							font-weight: bold;				}

a.prev:hover, a.next:hover {	color: rgba(255, 255, 255, 1);	
								text-decoration: none;		}

.banner: hover #next {	opacity:1;
			transition: all .5s ease-out;
			-webkit-transition: all .5s ease-out;
			-ms-transition: all .5s ease-out;				}

.banner: hover #prev {	opacity:1;
			transition: all .5s ease-out;
			-webkit-transition: all .5s ease-out;
			-ms-transition: all .5s ease-out;				}



/* ----------------- tablet/phone/ect ----------------- */

@media only screen and (max-width: 1024px) {
	body { margin: 0px;}
	nav, section, main, aside, .sideleft, .sideright {width: 100%; float: none;}
	#wrapper {width: auto; min-width: 0px; margin: 0px; padding: 0px; box-shadow: none;}
	h1 {font-size: 300%; text-align: center;}
	nav {float: none; width: auto;}
	nav li {display: inline-block; padding: 0.5em;}
	nav ul {text-align: center;}
	nav a {border-style: none;}
	h1, h2 {font-size: 120%; text-align: center;}
	p {font-size: 90%;}
	.sideleft {width: 95%; border-right: none;}
	.slideshow-container { max-width: 1200px; position: relative; margin: 0 auto; padding:10px;	}
}

@media only screen and (max-width: 768px) {
	nav li {display: block;}
	nav a {display:block; padding:0.2em; /* font-size: 1.3em; */}
	nav ul {text-align: left;}
}