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

* { margin: 0; padding: 0; box-sizing: border-box;  -webkit-box-sizing: border-box;  -moz-box-sizing: border-box; }
h1, h2, h3, h4, h5, h6 { font-weight: normal;  }
article, aside, figure, figcaption, footer, header, hgroup, nav, section, summary { display: block; }
.clearfix:before, .clearfix:after {     content: " ";      display: table; }
.clearfix:after {     clear: both; }
.clearfix {     *zoom: 1; }

@font-face {		
	font-family: 'roboto';  
    src: url('/graduation/css/fonts/Roboto-Regular.woff') format('woff'),
         url('/graduation/css/fonts/Roboto-Regular.woff2') format('woff2')
}

@font-face {		
	font-family: 'roboto';  
	font-weight: bold;
    src: url('/graduation/css/fonts/Roboto-Black.woff') format('woff'),
         url('/graduation/css/fonts/Roboto-Black.woff2') format('woff2')
}

body{
	font-family: 'roboto';
	color:#2B276A;
}
header{
	padding: 50px 0;
}
@media (max-width: 1240px){
	header.container{
		padding: 50px 20px 0 20px;
	}
}
footer{
	background: #2B276A;
	padding: 50px;
	text-align: center;
	clear:both;
}
footer img{ padding: 0 50px;}

.floatright{ float:right;}
.container{
	margin: 0 auto;
	width: 1200px;
	
}

.welcome{ width:40%; float:left;}
.image{ width:55%; float:right; margin:-10vh 0 0 0 ;}
.image img{ max-width: 100%;}

@media (max-width: 1240px){
	.container{
		width: 100%;
		padding: 50px 20px;
	}

}

@media (max-width: 1050px){
	header{
	padding: 50px 0;
	text-align:center;
	}
	.container{
		width: 100%;
		padding: 50px 20px 0 20px;
	}
	.welcome{ width:400px; max-width:80%; float:none; margin:0 auto; text-align:center;}

	.image{  width:700px; max-width:80%; float:none; margin:0 auto; text-align: center;}
	.image img{ max-width: 100%;}
}
@media (max-width: 500px){
	.welcome{ width:80%; }

	.image{  width:80%; }
	.image img{ max-width: 100%;}
}

h1{ font-size:50px;}
h2{ clear:both; text-align:center; margin:50px 0; font-size:50px;}
h3{ clear:both; text-align:center; margin:50px 0; font-size:35px;}
p{ color:#333; font-size:16px; margin:20px 0;}
@media (max-width: 1240px){
	h1{ font-size:40px;}
	h2{ clear:both; text-align:center; margin:50px 0; font-size:40px;}
	h3{ clear:both; text-align:center; margin:50px 0; font-size:25px;}
}
h3.pink{ color:#E40057;}


.dept{ width: 30%; float:left; margin: 0 5% 5% 0;   padding: 0 0 0 0; font-size:30px;}
.dept div{height:160px; background: #eee;}
.dept p{ margin: 20px 0 0 0; color: #2B276A; font-size:18px;}
.dept:nth-of-type(3n+3){ margin:  0 0 5% 0;}
.dept a{ color: #2B276A; text-decoration: none;}
@media (max-width: 850px){
	.dept{ width: 47.5%; float:left; margin: 0 5% 5% 0;}
	.dept:nth-of-type(3n+3){ margin:  0 5% 5% 0;}
	.dept:nth-of-type(2n+2){ margin:  0 0 5% 0;}
}
@media (max-width: 501px){
	.dept{ width: 100%; float:none; margin: 0 0 5% 0;}
	.dept:nth-of-type(3n+3){ margin:  0 0 5% 0;}
	.dept:nth-of-type(2n+2){ margin:  0 0 5% 0;}
}

#wall{ background: #ddd; height:600px; overflow-y:scroll; padding:50px;}
body #congrats{ text-align:center; padding: 75px 0 75px 0;}

#congrats img{ max-width: 80%;}
.smallcontainer{ width: 700px; margin: 0 auto; line-height: 24px; max-width:100%; padding: 0 20px 20px 20px; }
.smallcontainer p{ margin:20px 0;}



.videoWrapper {
  position: relative;
 padding-bottom: 56.25%; /* 16:9 */
  height: 0;
  width:1200px;
  margin: 0 auto;
}
@media (max-width: 1200px){
.videoWrapper {
  width:100%;
}

}
.videoWrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
  border: none;
}

#dept01 div{ 
	background:url(images/card1.jpg) no-repeat center center;
	background-size: cover;
}
#dept02 div{ 
	background:url(images/card2.jpg) no-repeat center center;
	background-size: cover;
}
#dept03 div{ 
	background:url(images/card3.jpg) no-repeat center center;
	background-size: cover;
}
#dept04 div{ 
	background:url(images/card4.jpg) no-repeat center center;
	background-size: cover;
}
#dept05 div{ 
	background:url(images/card5.jpg) no-repeat center center;
	background-size: cover;
}