
	body{ color: #4d0663;
		font-weight: 700;
		font-family: 'Droid Serif', serif;
		background-image: url("img/background2.jpg");
		background-repeat: none;
	}	
	header{
		/*max-width:1000px;*/
		}
	
	td {padding: 10px;}

	div#wrapper {
		width:800px;
		margin:auto;
	}

	.title span{background-color: rgba(230,0,0,.8);
		padding-left: 30px;
		padding-right: 30px;}
	.title{
		padding-top: 20px;
		font-family: 'Gidugu', sans-serif;
		color: #4d0663;
		line-height: .9em;
		font-size: 100px;
		letter-spacing: 2px;
	   }
	.with {background-color: rgba(230,0,0,.5);
		padding-left: 10px;
		padding-right: 10px;
		letter-spacing: 2px;
		margin-left: -50px;
		margin-top: 20px;
		font-family: 'Gidugu', sans-serif;
		font-size: 60px;
		line-height: .9em;
		color: #4d0663;
		max-width: 825px;
		}

	.info span {
		 text-transform: uppercase;
		 letter-spacing: 1px;
		padding-left: 10px;
		background-color: rgba(230,0,0,.7);}
	.info {
		margin-left: 200px;
		font-size:40px;
		color: white;} 
	.location span {
		 letter-spacing: 1px;
		padding-left: 10px;
		background-color: rgba(230,0,0,.7);}
	.location {
		margin-left: 300px;
		font-size: 20px;
		color: white;} 

	.description{
		margin-left: 20px;
		max-width: 400px;
	 	display: inline-block; }

	h2 {color: #011787;
		font-family: 'Gidugu', sans-serif;
		font-size: 40px;
		line-height: .9em;
	}

	.artist{
		font-family: 'Gidugu', sans-serif;
		color: #4d0663;
		float: left;
		margin-bottom: -30px;
		font-size:50px;
		letter-spacing: 2px;
	}

	.who{font-weight: bold;}
	.content{
		background-color:rgba(255,255,255,.8);
		max-width: 800px;
		padding:10px;
		margin: auto;
	} 
	.background{z-index: -1;}


	/*//////the secton I'm messing with is below ! don't confuse yourself///////*/

.students{}	
	/*.deplayerlogo{
		float: left;
	]*/
	.panelimg {
		float: left;
		margin:  auto;
	}

	.studentswork {
		margin: auto;
		float: left;
	}
	
	/*.studentname{
		color: #000;
		font-family: 'Gidugu', sans-serif;
		font-size: 30px;
		text-align: center;
		line-height: 0.8;
		text-decoration: none;
		border: solid 2px #000;
		padding: 15px;
		margin: 15px;
		width: 120px;
		background: rgba(200, 54, 54, 0.4);
		float: left; 
	}*/
	.collapse {
		float: left;
	}
	/*.pzilogo{
		width: 20px;
		}*/

button.accordion {
                background-color: rgba(240, 164, 0, 0.55);
                color: #000;
                cursor: pointer;
                padding: 10px;
                width: 100%;
                border: none;
                text-align: left;
                outline: none;
                font-size: 15px;
                transition: 0.4s;
                font-family: 'Gidugu', sans-serif;
                font-size: 30px;
      
            }
button.accordion::after { 
    /*content: " ▽";*/
    content: "﹀﹀﹀";
    /*content: "V";*/

    padding: 18px;
    background-color: rgba(240, 240, 5, 0.45);
}

button.accordion.active, button.accordion:hover {
	background-color: rgba(240, 5, 0, 0.65); 
}

div.panel {
                padding: 10px 18px;
                display: none;
                background-color: rgba(240, 240, 240, 0.65);
                max-width: 764px;
               
               }
            .studentswork {
                    
            }
/* need to make .a so that links stop being blue*/
/* need to incorporate the video pieces from Michael&Aymeric*/

/*////////mobile///////*/

@media screen and (max-width:767px) {
	.title {line-height: 74px;
		font-size: 60px;}
	.with{font-size: 40px;
		margin-left: 0px;}
	.info{font-size: 30px;
		margin-left: 0px;}
	.location{
		margin-left: 0px;}
		.artist{
			margin-top: -20px;
		}
	div#wrapper{
		width:500px;
	}
}/*/end of 767*/
