@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{
	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;
}


.logo{
	width:80%;
	height:auto;
}

nav{
	width:100%;
	height:auto;
	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;
	align-items:center;
}


.top-bg-image{
	background-image:url("../assets/degrees-page-assets/monitor-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(188,87,145,1.00);
	font-size:10em;
	font-weight:bolder;
	z-index:5;

}

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

.tracks{
	justify-content:center;
	width:40%;
	height:auto;
}

.tracks-underline{
	justify-content:center;
	width:100%;
}

.white-rectangle{
	width:100%;
	background-color:white;
	min-height:5px;	
}

h2{
	font-family:avant garde book;
	color:rgba(214,73,65,1.00);
	font-size:6em;
	padding:2%;
	display:flex;
	align-items:center;
	justify-content:center;
	margin:1.5%;
}

h3{
	font-family:avant garde book;
	color:rgba(119, 71, 214,1.00);
	font-size:6em;
	padding:2%;
	display:flex;
	align-items:center;
	justify-content:center;
	margin:1.5%;
}

h4{
	font-family:avant garde book;
	color:rgba(97, 181, 165,1.00);
	font-size:6em;
	padding:2%;
	display:flex;
	align-items:center;
	justify-content:center;
	margin:1.5%;
}

.gd-bg-image{
	width:100%;
	height:auto;
}

.mg-bg-image{
	width:100%;
	height:auto;
}

.web-bg-image{
	width:100%;
	height:auto;
}

.link-text{
	color:white;
	font-size:2.3em;
	font-family: avant garde book;
	z-index: 4;
	line-height:1.9em;
	width:80%;
	margin: 0px auto;
	padding-top:3%;
	padding-bottom:3%;
	font-weight:bold;
}

.red{
	color:crimson;
	font-weight:bold;
}

p a{text-decoration: 
	none;}







@media only screen and (max-width:1480px){
	nav ul li a{
		margin:70px;
	}
	
	.link-text{
		font-size:2.2em;
	}
}

@media only screen and (max-width:1280px){
	nav ul li a{
		margin:50px;
		font-size:1.6em;	
	}
	
	.link-text{
		font-size:2em;
		line-height:1.5em;
	}
	
	
}

@media only screen and (max-width:1120px){
	h2, h3, h4{
		font-size:5em;
	}
	
	.link-text{
		font-size:1.8em;
		line-height:1.4em;
	}
	
}

@media only screen and (max-width:930px){
	h2, h3, h4{
		font-size:4em;
	}
}

@media only screen and (max-width:750px){
	h2, h3, h4{
		font-size:3em;
	}
	
	.link-text{
		font-size:1.4em;
		line-height:1.2em;
	}
	
}

@media only screen and (max-width:560px){
	h2, h3, h4{
		font-size:2em;
	}
	
	.link-text{
		font-size:1.2em;
		line-height:1.4em;
	}
}


@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;
	}
	
}