@charset "UTF-8";
/* CSS Document */

html, body {
	margin: 0px;
	padding: 0px;
}

header {
	height: 100px;
	background-color:rgba(0,0,0,0.90);
	margin: -13px 0px 75px 0px;
	padding: 10px;
}

body {
	background-image: url("../images/orange-blue-background.png");
	background-repeat: no-repeat;
}


h1 {
	text-align: left;
	font-family: 'lopez_demoregular';
	font-size: 2.75em;
	line-height: 3.5rem;
	margin: 0px 0px 0px 5px;
	color: whitesmoke;
}

h3 {
	text-align: left;
	font-family: 'lopez_demoregular';
	font-size: 2em;
	line-height: 3.5rem;
	margin: 0px;
	color: whitesmoke;
}

p {
	text-align: justify;
	line-height: 1.5rem;
	font-family: Helvetica, Arial, "sans-serif";
	color: whitesmoke;
	padding: 0px 150px 0px 5px;
}

.content-container {
	background-color:rgba(0,0,0,0.80);
	height: 650px;
	width: 850px;
	padding: 20px;
	margin: -50px 100px 10px 0px;

}

.image {
	float: right; 
	margin: -330px 30px -10px 100px;
	border-radius: 10px;
}

.classes-content-container {
	background-color:rgba(0,0,0,0.80);
	height: 850px;
	width: 850px;
	padding: 20px;
	margin: -50px 100px 10px 0px;
	
}

.classes-image {
	width: 700px;
	height: 500px;
	float: right;
	margin: -800px 0px 0px 0px;
	border-radius: 10px;
}

.certificate-content-container {
	background-color:rgba(0,0,0,0.80);
	height: 850px;
	width: 850px;
	padding: 20px;
	margin: -50px 100px 10px 0px;
	
}

.certificate-image {
	width: 700px;
	height: 500px;
	float: right;
	margin: -820px 0px 0px 0px;
	border-radius: 10px;
	
}

.art-gallery-content-box {
	background-color:rgba(38,34,161,0.85);
	height: 600px;
	width: 1000px;
	padding: 10px;
	margin: -400px auto 20px auto;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	
}

.art-image-box {
	width: 300px;
	height: 200px;
	margin: 5px;
	border-radius: 10px;
}

.art-gallery-headline-content-box {
	height: 200px;
	width: 650px;
	padding: 10px;
	margin: -10px 0px 0px 10px;
	background-color: rgba(0,0,0,0.80);
}

.art-gallery-headline {
	font-size: 3.5em;
	line-height: 5rem;
	
}
.instructor-content-box {
	background-color:rgba(38,34,161,0.85);
	height: 850px;
	width: 850px;
	padding: 20px;
	margin: -40px 100px 0px 0px;
	
}

.image-instructor-box {
	width: 150px;
	height: 150px;
	margin: 7px;
	border-radius: 10px;
}

.first-image-instructor-box {
	width: 150px;
	height: 150px;
	margin: 38px 10px -130px 10px;
	border-radius: 10px;
}

.instructor-bio-content-box {
	margin: -865px 0px 0px 200px; 
	padding: 10px;
	width: 800px;
	height: 800px;
}

.instructor-bio-info {
	margin: 10px 0px 0px 0px;
	font-size: 1em;
}

.instructor-page-image {
	float: right; 
	height: 800px;
	width: 500px;
	margin: -770px 60px -10px 100px;
	border-radius: 10px;
	
	
}

.tmcc-logo-content-box {
	margin: 365px 1250px 0px 0px;
}

.main-navigation-buttons {
	font-weight: bold;
	font-size: 1em;
	text-align: left;
	font-family: Helvetica, Arial, "sans-serif";
	float: center;
	margin: -280px 0px 5px 150px;
	
}

.main-navigation-buttons ul {
	list-style-type: none;
	list-style-image: none;
	display: flex;
	justify-content: left;
}

.main-navigation-buttons ul li {
	 position: relative; 
}

.main-navigation-buttons ul a {
	color:rgba(134,205,232,1.00);
	text-decoration: none; 
	padding: 10px;
}

.main-navigation-buttons ul a:hover {
	color:rgba(249,77,14,1.00);
}

@font-face {
    font-family: 'lopez_demoregular';
    src: url('../images/lopezdemoregular-webfont.woff2') format('woff2'),
         url('../images/lopezdemoregular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}