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


*{
	padding: 0;
	margin: 0;
	box-sizing: border-box;
	
	}

/*
body{
	
	background-image: url(background/gradiantcolordarkred.svg);
	/* Background-repeat: no-repeat; 
	background-size: cover;
	
	}
*/

.logo{
	position: fixed;
	top: 5px;
	left: 5px;
	z-index: 999;
	width: 120px;
	}


h1{
	margin: 30px 0;
	margin-bottom: 5px;
	font-size: 3em;
	}

h2{
	margin: 0;
	margin-bottom: 15px;
	font-size: 2em;
	}

/* Nav bar */


nav{
	Position: sticky;
	z-index: 1000;
	top: 0px;
	background-color: #434040;
	box-shadow: 3px 3px 5px rgba(0,0,0,0.1);
	}

nav ul{
	width: 100%;
	list-style: none;
	display: flex;
	justify-content: flex-end;
	align-items: center;
	}

nav li{
	height: 50px;
	}

/* nav li:fisrt-child{
	margin-right: auto;
	} */



nav a{
	height: 100%;
	padding:0 30px;
	text-decoration: none;
	display: flex;
	align-items: center;
	color: white;
	font-weight: bold;
	}

nav a:hover{
	background-color: #5F5B5B;  /* #DBDBDB */
	}

.logomenu{
	position: left;
	
	/* align-content: left;
	align-items: flex-start;
	align-self: flex-start; */
}

.sidebar{
	position: fixed;
	top: 0;
	right: 0;
	height: 100vh;
	width: 250px;
	z-index: 999;
	background-color: rgba(255,255,255,0.2);
	backdrop-filter: blur(10px);
	box-shadow: -10px 0 10px rgba(0,0,0,0.1);
	display: none;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	
	}

.sidebar li{
	width: 100%;
	}

.sidebar a{
	width: 100%;
	}

.menu-button{
	display: none;
}


/* End of Nav bar */



/* section 1 */

.section1 {
	position: relative;
	/* background-color: darkblue; */
	background-image: url(background/gradiantcolorgrey.svg);
	Background-repeat: no-repeat;
	background-size: cover;
		
	color: white;
	/* margin-top: 0px; */
	/* margin-left: 0px; */
	
	padding-top: 20px;
	padding-bottom: 20px;
	padding-left: 20px;
	
	/* overflow: none; */
	}

.container1 {
	position: relative;
	display: flex;
	max-width: 1200px;
	padding-right: 20px;
	}


.c1box1{
	flex: 1.5;
	min-height: 300px;
	background-color: none;
	padding-left: 20px;
	padding-top: 20px;
	padding-bottom: 20px;
	text-overflow: none;
	color: white;
	}

.list1 {
	margin-top: 10px;
	margin-left: 20px;
	font-size: 1.2rem;
	padding-right: 40px;
	padding-bottom: 20px;
	text-transform: none;
		}

hlist{
	margin-left: 0px;
	margin-bottom: 10px;
	font-size: 1.3rem;
	text-transform: none;
	}



.c1box2{
	flex: 1;
	min-height: 200px;
	background-color: none;
	padding-left: 20px;
	padding-top: 20px;
	padding-bottom: 20px;
	text-overflow: none;
	color: white;
	}

.c1box2image {
	width: 100%;
	margin-top: 20px;
	border-radius: 40px;
	/* padding-top: 150px;
	padding-left: 60px;
	padding-right: 0px; */
	color: #FFFFFF;
	/* border: 2px solid green; */
	}

.c2box2image {
	width: 100%;
	margin-top: 200px;
	border-radius: 40px;
	/* padding-top: 150px;
	padding-left: 60px;
	padding-right: 0px; */
	color: #FFFFFF;
	/* border: 2px solid green; */
	}




/* end of section 1 */

/* section 2 registration bar 1 */

.section2 {
		
	position: relative;
	width: 100%;
	min-height: 80px;
	
	background-color: #9E0219;
	color: white;
	/* margin-top: 0px; */
	/* margin-left: 0px; */
	padding-top: 0px;
	padding-bottom: 0px;
	padding-left: 20px;
	overflow: none;
		
	align-content: center;
	text-align: center;
	line-height: 20px;
	
	font-size: 0.7em;
	text-transform: uppercase;
	letter-spacing: 3px;
	/* border: 3px solid blue; */ 
	
	}

.container2 {
	position: relative;
	display: flex;
	max-width: 1200px;
	padding-right: 20px;
	overflow: none;
	}


.button {
	position: relative;
	top: 0px;
	right: 10px;
	padding-top: 15px;
	padding-left: 20px;
	padding-right: 20px;
	padding-bottom: 15px;
	border: 2px #FFFFFF solid;
	border-radius: 30px;
	float: right;
	color: #FFFFFF;
	font-size: 2em;
	text-decoration: none;
	}

.button:hover {
	background: #7A040C;
	} 

.c2box1{
	flex: 1.5;
	min-height: 50px;
	background-color: none;
	padding-left: 20px;
	padding-top: 30px;
	padding-bottom: 0px;
	text-overflow: none;
	/* border: 3px solid blue; */
	}

.c2box2{
	flex: 0.5;
	min-height: 50px;
	background-color: none;
	padding-right: 40px;
	padding-top: 10px;
	padding-bottom: 10px;
	text-overflow: none;
	/* border: 3px solid red; */
	}

/* end of section 2 registration bar 1 */

/* section 3 */

.section3 {
	position: relative;
	background-image: url("background/gradiantcolorgreyblue.svg");
	Background-repeat: no-repeat;
	background-size: cover;
	color: white;
	/* margin-top: 0px; */
	/* margin-left: 0px; */
	padding-top: 20px;
	padding-bottom: 20px;
	padding-left: 20px;
	overflow: none;
	}

.container3 {
	position: relative;
	display: flex;
	max-width: 1200px;
	padding-right: 20px;
	min-height: 300px;
	
	}


.c3box1{
	flex: 1;
	min-height: 200px;
	background-color: none;
	padding-left: 0px;
	padding-right: 20px;
	padding-top: 20px;
	padding-bottom: 20px;
	text-overflow: none;
	color: white;
	}

.c3box2{
	flex: 1;
	min-height: 200px;
	background-color: none;
	padding-left: 0px;
	padding-right: 20px;
	padding-top: 20px;
	padding-bottom: 20px;
	text-overflow: none;
	}

.c3box3{
	flex: 1;
	min-height: 200px;
	background-color: none;
	padding-left: 0px;
	padding-right: 20px;
	padding-top: 20px;
	padding-bottom: 20px;
	text-overflow: none;
	}

.c3box4{
	flex: 1;
	min-height: 200px;
	background-color: none;
	padding-left: 0px;
	padding-right: 20px;
	padding-top: 20px;
	padding-bottom: 20px;
	text-overflow: none;
	}

/* end of section 3 */


/* section program */

.sectionprog {
	Position: relative;
	/* z-index: 1000;
	top: 0px; */
	width: 100%;
	min-height: 80px;
	
	background-color: #9E0219;
	color: white;
	/* margin-top: 0px; */
	/* margin-left: 0px; */
	padding-top: 0px;
	padding-bottom: 0px;
	padding-left: 20px;
	overflow: none;
		
	align-content: center;
	text-align: center;
	line-height: 20px;
	
	font-size: 0.7em;
	text-transform: uppercase;
	letter-spacing: 3px;
	/* border: 3px solid blue; */ 
	
	}

.containerprog {
	position: relative;
	display: flex;
	max-width: 1200px;
	padding-right: 20px;
	overflow: none;
	}


.button {
	position: relative;
	top: 0px;
	right: 10px;
	padding-top: 15px;
	padding-left: 20px;
	padding-right: 20px;
	padding-bottom: 15px;
	border: 2px #FFFFFF solid;
	border-radius: 30px;
	float: right;
	color: #FFFFFF;
	font-size: 2em;
	text-decoration: none;
	}

.button:hover {
	background: #7A040C;
	} 

.cpbox1{
	flex: 1.5;
	min-height: 50px;
	background-color: none;
	padding-left: 20px;
	padding-top: 30px;
	padding-bottom: 0px;
	text-overflow: none;
	/* border: 3px solid blue; */
	}

.cpbox2{
	flex: 0.5;
	min-height: 50px;
	background-color: none;
	padding-right: 40px;
	padding-top: 10px;
	padding-bottom: 10px;
	text-overflow: none;
	/* border: 3px solid red; */
	}

/* end of section program */


/* section 4 */

.section4 {
	position: relative;
	background-image: url("background/gradiantcolorgrey.svg");
	Background-repeat: no-repeat;
	background-size: cover;
	color: white;
	/* margin-top: 0px; */
	/* margin-left: 0px; */
	
	padding-top: 20px;
	padding-bottom: 20px;
	padding-left: 20px;
	
	overflow: none;
	}

.container4 {
	position: relative;
	display: flex;
	max-width: 1200px;
	padding-right: 20px;
	}


.c4box1{
	flex: 1;
	min-height: 200px;
	background-color: none;
	padding-left: 20px;
	padding-top: 20px;
	padding-bottom: 20px;
	text-overflow: none;
	color: black;
	}

.c4box1image {
	width: 100%;
	margin-top: 0px;
	/* padding-top: 150px;
	padding-left: 60px;
	padding-right: 0px; */
	color: #FFFFFF;
	/* border: 2px solid green; */
		}



/* end of section 4 */

/* section insttructor title bar*/

.sectioninstbar{
	Position: relative;
	/* z-index: 1000;
	top: 0px; */
	width: 100%;
	min-height: 80px;
	
	background-color: #9E0219;
	color: white;
	/* margin-top: 0px; */
	/* margin-left: 0px; */
	padding-top: 0px;
	padding-bottom: 0px;
	padding-left: 20px;
	overflow: none;
		
	align-content: center;
	text-align: center;
	line-height: 20px;
	
	font-size: 0.7em;
	text-transform: uppercase;
	letter-spacing: 3px;
	/* border: 3px solid blue; */ 
	
	}

.containerinstbar {
	position: relative;
	display: flex;
	max-width: 1200px;
	padding-right: 20px;
	overflow: none;
	}


.buttonib {
	position: relative;
	top: 15px;
	right: 10px;
	padding-top: 15px;
	padding-left: 20px;
	padding-right: 20px;
	padding-bottom: 15px;
	border: 2px #FFFFFF solid;
	border-radius: 30px;
	float: right;
	color: #FFFFFF;
	font-size: 2em;
	text-decoration: none;
	}

.buttonib:hover {
	background: #7A040C;
	} 

.cibbox1{
	flex: 1.5;
	min-height: 50px;
	background-color: none;
	padding-left: 20px;
	padding-top: 30px;
	padding-bottom: 0px;
	text-overflow: none;
	/* border: 3px solid blue; */
	}

.cibbox2{
	flex: 0.5;
	min-height: 50px;
	background-color: none;
	padding-right: 40px;
	padding-top: 10px;
	padding-bottom: 10px;
	text-overflow: none;
	/* border: 3px solid red; */
	}

/* end of section instructor bar */






/* section 5 */

.section5 {
	position: relative;
	background-image: url(background/gradiantcolordarkred.svg);
	Background-repeat: no-repeat;
	background-size: cover;
	color: white;
	/* margin-top: 0px; */
	/* margin-left: 0px; */
	
	padding-top: 20px;
	padding-bottom: 20px;
	padding-left: 20px;
	
	overflow: none;
	}

.container5 {
	position: relative;
	display: flex;
	max-width: 1200px;
	padding-right: 0px; /* changeed from 20px */
	/* border: 3px solid white; */
	}


.c5box1{
	flex: 1;
	min-height: 200px;
	background-color: none;
	padding-left: 20px;
	padding-right: 0px;
	padding-top: 20px;
	padding-bottom: 20px;
	text-overflow: none;
	display: flex;
	justify-content: flex-end;
	/* border: 3px solid blue; */
	}

.c5box2{
	flex: 1;
	min-height: 200px;
	background-color: none;
	padding-left: 20px;
	padding-top: 20px;
	padding-bottom: 20px;
	text-overflow: none;
	/* border: 3px solid green; */
	}

.c5box3{
	flex: 1;
	min-height: 200px;
	background-color: none;
	padding-left: 20px;
	padding-top: 20px;
	padding-bottom: 20px;
	text-overflow: none;
	display: flex;
	justify-content: flex-end;
	}

.c5box4{
	flex: 1;
	min-height: 200px;
	background-color: none;
	padding-left: 20px;
	padding-top: 20px;
	padding-bottom: 20px;
	text-overflow: none;
	}

.c5box1image {
	width: 50%;
	height: 60%;
	margin-top: 20px;
	border-radius: 20px;
	/* padding-top: 150px;
	padding-left: 60px;
	padding-right: 0px; */
	color: #FFFFFF;
	}


/* end of section 5 */

/* section 6 */

.section6 {
	position: relative;
	background-image: url(background/gradiantcolordarkred.svg);
	Background-repeat: no-repeat;
	background-size: cover;
	height: 1200px;
	/* margin-top: 0px; */
	/* margin-left: 0px; */
	
	padding-top: 20px;
	padding-bottom: 20px;
	padding-left: 20px;
	
	overflow: none;
	}

.container6 {
	position: relative;
	display: flex;
	max-width: 1200px;
	padding-right: 20px;
	}


.c6box1{
	flex: 1;
	min-height: 200px;
	background-color: gray;
	padding-left: 20px;
	padding-top: 20px;
	padding-bottom: 20px;
	text-overflow: none;
	color: black;
	}

.c6box2{
	flex: 1;
	min-height: 200px;
	background-color: purple;
	padding-left: 20px;
	padding-top: 20px;
	padding-bottom: 20px;
	text-overflow: none;
	}

.c6box3{
	flex: 1;
	min-height: 200px;
	background-color: rebeccapurple;
	padding-left: 20px;
	padding-top: 20px;
	padding-bottom: 20px;
	text-overflow: none;
	}

.c6box4{
	flex: 1;
	min-height: 200px;
	background-color: red;
	padding-left: 20px;
	padding-top: 20px;
	padding-bottom: 20px;
	text-overflow: none;
	}

/* end of section 6 */

/* section 7 */

.section7 {
	position: relative;
	background-color: coral;
	color: white;
	/* margin-top: 0px; */
	/* margin-left: 0px; */
	
	padding-top: 20px;
	padding-bottom: 20px;
	padding-left: 20px;
	
	overflow: none;
	}

.container7 {
	position: relative;
	display: flex;
	max-width: 1200px;
	padding-right: 20px;
	}


.c7box1{
	flex: 1;
	min-height: 200px;
	background-color: gray;
	padding-left: 20px;
	padding-top: 20px;
	padding-bottom: 20px;
	text-overflow: none;
	color: black;
	}

.c7box2{
	flex: 1;
	min-height: 200px;
	background-color: purple;
	padding-left: 20px;
	padding-top: 20px;
	padding-bottom: 20px;
	text-overflow: none;
	}

.c7box3{
	flex: 1;
	min-height: 200px;
	background-color: rebeccapurple;
	padding-left: 20px;
	padding-top: 20px;
	padding-bottom: 20px;
	text-overflow: none;
	}

.c7box4{
	flex: 1;
	min-height: 200px;
	background-color: red;
	padding-left: 20px;
	padding-top: 20px;
	padding-bottom: 20px;
	text-overflow: none;
	}

/* end of section 7 */



/* section 8 */

.section8 {
	position: relative;
	background-color: coral;
	color: white;
	/* margin-top: 0px; */
	/* margin-left: 0px; */
	
	padding-top: 20px;
	padding-bottom: 20px;
	padding-left: 20px;
	
	overflow: none;
	}

.container8 {
	position: relative;
	display: flex;
	max-width: 1200px;
	padding-right: 20px;
	}


.c8box1{
	flex: 1;
	min-height: 200px;
	background-color: gray;
	padding-left: 20px;
	padding-top: 20px;
	padding-bottom: 20px;
	text-overflow: none;
	color: black;
	}

.c8box2{
	flex: 1;
	min-height: 200px;
	background-color: purple;
	padding-left: 20px;
	padding-top: 20px;
	padding-bottom: 20px;
	text-overflow: none;
	}

.c8box3{
	flex: 1;
	min-height: 200px;
	background-color: rebeccapurple;
	padding-left: 20px;
	padding-top: 20px;
	padding-bottom: 20px;
	text-overflow: none;
	}

.c8box4{
	flex: 1;
	min-height: 200px;
	background-color: red;
	padding-left: 20px;
	padding-top: 20px;
	padding-bottom: 20px;
	text-overflow: none;
	}

/* end of section 8 */


/* section 9 */

.section9 {
	position: relative;
		
	background-image: url("background/gradiantcolorgreyblue.svg");
	Background-repeat: no-repeat;
	background-size: cover;
	height: 300px;
	/* margin-top: 0px; */
	/* margin-left: 0px; */
	
	padding-top: 10px;
	padding-bottom: 20px;
	padding-left: 0px;
	
	overflow: none;
	}

.container9 {
	position: relative;
	display: flex;
	max-width: 1200px;
	padding-right: 0px;
	}

/* end of section 9 */

/* section 10 */

.section10 {
	position: relative;
	/* background-color: #9E0219; */
	
	background-image: url(background/gradiantcolorgrey.svg);
	Background-repeat: no-repeat;
	background-size: cover;
	
	
	color: white;
	/* margin-top: 0px; */
	/* margin-left: 0px; */
	
	padding-top: 1px;
	padding-bottom: 1px;
	padding-left: 20px;
	
	overflow: none;
	}

.container10 {
	position: relative;
	display: flex;
	max-width: 1200px;
	padding-right: 20px;
	}


.c10box1{
	flex: 0.5;
	min-height: 100px;
	background-color: none;
	padding-left: 20px;
	padding-top: 10px;
	padding-bottom: 25px;
	text-overflow: none;
	color: white;
	}

.c10box2{
	flex: 0.5;
	min-height: 100px;
	background-color: none;
	padding-left: 20px;
	padding-top: 10px;
	padding-bottom: 25px;
	text-overflow: none;
	color: white;
	}

.c10box2image1 {
	width: 50px;
	margin-top: 20px;
	/* padding-top: 150px;
	padding-left: 60px;
	padding-right: 0px; */
	/* color: #FFFFFF; */
	/* border: 2px solid green; */
		}

.c10box2image2 {
	width: 60px;
	margin-top: 0px;
	/* padding-top: 150px; */
	padding-left: 10px;
	/*padding-right: 0px; */
	/* color: #FFFFFF; */
	/* border: 2px solid green; */
		}

/*
.c10box3{
	flex: 0.2;
	min-height: 200px;
	background-color: rebeccapurple;
	padding-left: 20px;
	padding-top: 20px;
	padding-bottom: 20px;
	text-overflow: none;
	}

.c10box4{
	flex: 0.2;
	min-height: 200px;
	background-color: red;
	padding-left: 20px;
	padding-top: 20px;
	padding-bottom: 20px;
	text-overflow: none;
	}  */

/* end of section 10 */

/* section 11 */

.section11 {
	position: relative;
	background-image: url("background/gradiantcolorgreyblue.svg");
	Background-repeat: no-repeat;
	background-size: cover;
	height: 500px;
	/* margin-top: 0px; */
	/* margin-left: 0px; */
	
	padding-top: 1px;
	padding-bottom: 20px;
	padding-left: 0px;
	
	overflow: none;
	}

.container11 {
	position: relative;
	display: flex;
	max-width: 1200px;
	padding-right: 0px;
	}

/* end of section 11 */




@media (max-width: 1000px){
	
	
	.hideOnMobile{
		display: none;
		}
	
	.menu-button{
		display: block;
	}
		
	.container1 {
		position: relative;
		display: flex;
		/* Height: 500px; */
		flex-direction: column;
		}
	
	.container2 {
		position: relative;
		display: flex;
		/* Height: 500px; */
		flex-direction: column;
		}
	
	.container3 {
		position: relative;
		display: flex;
		/* Height: 500px; */
		flex-direction: column;
		}
	
	.container4 {
		position: relative;
		display: flex;
		/* Height: 500px; */
		flex-direction: column;
		}
	
	.container5 {
		position: relative;
		display: flex;
		/* Height: 500px; */
		flex-direction: column;
		}
	
	.container6 {
		position: relative;
		display: flex;
		/* Height: 500px; */
		flex-direction: column;
		}
	
	.container7 {
		position: relative;
		display: flex;
		/* Height: 500px; */
		flex-direction: column;
		}
	
	.container8 {
		position: relative;
		display: flex;
		/* Height: 500px; */
		flex-direction: column;
		}
	
	
	.c1box2image {
		width: 40%;
		margin-top: 20px;
		/* padding-top: 150px;
		padding-left: 60px;
		padding-right: 0px; */
		color: #FFFFFF;
		/* border: 2px solid green; */
		}
	
	.c2box2image {
		width: 40%;
		margin-top: 20px;
		/* padding-top: 150px;
		padding-left: 60px;
		padding-right: 0px; */
		color: #FFFFFF;
		/* border: 2px solid green; */
		}

}