@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;
	min-height:1000px;
}


.logo{
	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;
	align-items:center;
}

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

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

.gallery {
  line-height: 45px;
  -webkit-column-count: 2;
  -webkit-column-gap:   0px;
  -moz-column-count:    2;
  -moz-column-gap:      0px;
  column-count:         2;
  column-gap:           100px;
  margin-left:10%;
	margin-right:10%;
	margin-top:10%;
}


.gallery img {
  /* Just in case there are inline attributes */
  width: 100% !important;
  height: auto !important;
}



@media only screen and (max-width: 500px) {
  .gallery {
   column-count:1;
   moz-column-count:1;
  }
}

.gallery img:hover {
  border: 3px solid white;
}









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