@charset "UTF-8";

@font-face {
    font-family: avant garde book;
    src: url('../assets/ITCAvantGardeStd-Bk.woff2') format('woff2'),
        url('../assets/ITCAvantGardeStd-Bk.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: avant garde xtra lt;
    src: url('../assets/ITCAvantGardeStd-XLt.woff2') format('woff2'),
        url('../assets/ITCAvantGardeStd-XLt.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

body{
	position:relative;
	padding:0px;
	margin:0px;
	text-align:center;
	background-image:url("../assets/degrees-page-assets/type-gray-bg.png");
	height:auto;
	background-repeat:no-repeat;
	background-position:cover;
		
}

header{
	position:relative;
	min-height:350px;
	background-color:white;
	z-index:3;
	display:flex;
	justify-content:center;
	align-items:center;
	
}

main{
	position:relative;

	justify-content: center;
	align-items:center;
	min-height:1000px;
}


.program-logo{
	
	z-index:2;
	width:80%;
	height:auto;
}


nav{
	width:100%;
	background-color: white;
	border-top:3px solid black;
	border-bottom:3px solid black;
	z-index:5;
}




nav ul{
	list-style-type:none;
	display:flex;
	justify-content: center;
	
}

nav ul li a{
	margin:100px;
	font-family:avant garde xtra lt;
	font-size:1.9em;
	text-decoration:none;
	color:black;
	
}


.top-bg-image{
	background-image:url("../assets/program_overview_page-assets2/collage-bg-image.jpg");
	background-repeat:no-repeat;
	background-size:cover;
	display: flex;
  	justify-content: center;
  	align-items: center;
	z-index:2;
	min-height:500px;
	width:100%;	
}

h1{
	font-family: avant garde book;
	color:rgba(3,174,161,1.00);
	font-size:10em;
	font-weight:bolder;
	z-index:5;
}

.main-body-copy{
	color:white;
	font-size:1.7em;
	font-family: avant garde book;
	z-index: 4;
	line-height:1.9em;
	top:65%;
	width:80%;
	margin: 0px auto;
	padding-top:3%;
	padding-bottom:3%;
}

.bolder-type{
	color:white;
	font-size:2.3em;
	font-weight:bolder;
	font-family: avant garde book;
	z-index: 4;
	width:80%;
	margin: 0px auto;
}

.color-swatch-parallax{
	clear:both;
	height:400px;
	background-image:url("../assets/program_overview_page-assets2/color-swatches-bg-image.jpg");
	background-repeat:no-repeat;
	background-position:cover;
	background-attachment:fixed;
	margin-top:3%;
}

.mouse-pad-parallax{
	clear:both;
	height:400px;
	background-image:url("../assets/program_overview_page-assets2/computer-bg-image.jpg");
	background-repeat:no-repeat;
	background-position:cover;
	background-attachment:fixed;
	
}








@media only screen and (max-width:1480px){
	nav ul li a{
		margin:70px;
	}	
}

@media only screen and (max-width:1280px){
	nav ul li a{
		margin:50px;
		font-size:1.6em;
	}
}

@media only screen and (max-width:1000px){
	nav ul li a{
		margin:50px;
		font-size:1.3em;
	}
	
	h1{
		font-size:8em;
	}

	.top-bg-image{
		min-height:300px;
	}
	
	.main-body-copy{
		font-size:1.6em;
		line-height:1.6em;
		margin-top:4%;
		margin-bottom:2%;
	}
}

@media only screen and (max-width:900px){
	nav ul li a{
		margin:40px;
		font-size:1em;
	}
	
	h1{
		font-size:6em;
	}

	.top-bg-image{
		min-height:270px;
			
	}
	
	.main-body-copy{
		font-size:1.5em;
		line-height:1.7em;
		margin-top:4%;
		margin-bottom:2%;
	}

	
	.bolder-type{
		font-size:1.8em;
		margin-bottom:5%;
	}
	
	header{
		
		min-height:270px;
	}
}

@media only screen and (max-width:800px){
	nav ul li a{
		margin:40px;
		font-size:1em;
	}
	
	h1{
		font-size:4em;
	}
	
	
	header{
		
		min-height:250px;
	}
	
	.top-bg-image{
		min-height:250px;
			
	}
	
	.color-swatch-parallax{
	height:300px;
	}
	
	
	.mouse-pad-parallax{
		height:300px;
	}
}

@media only screen and (max-width:700px){
	
	nav ul li a{
		margin:20px;
		
	}
	
	h1{
		font-size:3.5em;
	}
	
	.main-body-copy{
		font-size:1.2em;
		line-height:1.5em;
		margin-top:2%;
		margin-bottom:1%;
	}
	
	.bolder-type{
		font-size:1.3em;
		margin-bottom:3%;
		margin-top:1%;
	}
	
	.color-swatch-parallax{
		height:250px;
	}
	
	
	.mouse-pad-parallax{
		height:250px;
	}
}

@media only screen and (max-width:600px){
	

	h1{
		font-size:3.5em;
	}
	
	.main-body-copy{
		font-size:1.2em;
		line-height:1.5em;
		margin-top:2%;
		margin-bottom:1%;
	}
	
	.bolder-type{
		font-size:1.3em;
		margin-bottom:3%;
		margin-top:1%;
	}
	
	.color-swatch-parallax{
		height:250px;
	}
	
	
	.mouse-pad-parallax{
		height:250px;
	}
	
	header{
		position:relative;
		min-height:200px;	
	}
	
	nav{
		display:flex;
		justify-content:center;
		align-items:center;
	}
	
	nav ul{
	flex-direction:column;
		margin:30px;
	}
	
	nav ul li a{
		font-size:1.8em;
	}
	
}