@charset "UTF-8";
@import url('https://fonts.googleapis.com/css?family=Titillium+Web:300,400,600,700');
*{
  box-sizing: border-box;
}
body #warning{
  width: 100%;
  margin: 0;
  background: rgb(0, 0, 0);
  color: rgb(255, 255, 255);
  text-align: center;
  font-size: 1.3rem;
}
body #warning a:first-of-type{
  color: rgb(255, 255, 255);
  cursor: pointer;
}
body{
  margin: 0;
  font-family: Titlillium, Arial, sans-serif;
}
#container{
  background: #8E8E8E;
}
#info_container{
  max-width: 75%;
  margin: 0 auto;
  background: #534F4E;
  padding: .25rem;
  margin-top: 4rem;
  color: #FFF;
}
#header{
  background: #fff;
  padding-bottom: 2rem;
  box-shadow: 1px 5px 10px 1px #444;
}
#menu{
  display: flex;
}
nav a{
  flex: 1;
  width: 14.3%;
  text-decoration: none;
  text-align: center;
  font-size: 1rem;
  color: black;
  padding: 1rem 0 1rem 0;
}
nav > a:first-of-type{
  display: none;
}
#logo{
  width: 50%;
  margin: 0 25% 0 25%;
}
iframe{
  width: 75%;
  height: 40vw;
  margin: 0 12.5% 0 12.5%;
}
h2{
  text-align: center;
  padding-top: 1rem;
}
h3{
  text-align: center;
  margin: 1rem 1rem 0 1rem;
  padding: 0.5rem;
  font-size: 1.4rem;
}
h4{
  font-size: 1.4rem;
}
article{
  padding: 0 1rem 0 2rem;
  font-size: 1.2rem;
}
li{
  padding-bottom: 1rem;
}
.content{
  margin-top: 1rem;
  width: 50%;
}
#special{
  margin-bottom: 1rem;
  width: 100%;
}
footer{
  background: #FFF;
  margin: 0 auto;
  text-align: center;
  box-shadow: 1px -5px 10px 1px #444;
  display: flex;
}
#footer{
  width: 80%;
  margin-right: 2rem;
}
.footer{
  margin: 0 auto;
  display: inline-flex;
  width: 60%;
}
footer p{
  font-size: 2rem;
  padding-bottom: 0
}
#pic{
  width: 60%;
  margin: 1rem;
  padding-right: 3rem;
  border-right: 2px solid white;
}
aside{
  float: right;
  padding: 1rem;
  text-align: center;
  margin-right: 8%;
  margin-top: 7%;
}
.smaller{
  font-size: 0.8rem;
}
#space{
  margin-bottom: 5rem;
}
#padding li{
  margin-bottom: 0.8rem;
}
#student_work{
  margin-bottom: 3rem;
}
.photoshop, .illustrator, .web{
  display: flex;
  margin: 0 10% 0 10%;
}
figure{
  width: 15vw;
  height: 15vw;
  overflow: hidden;
  display: inline-table;
  flex: 1;
}
figure img{
  width: 100%;
}
figure video{
  width: 100%;
}
.grow, .web_grow, .special_grow, .dean_grow{
  transition: all .2s ease-in-out;
}
.grow:hover img{
  transform: scale(2.2);
}
.grow:hover, .web_grow:hover, .special_grow:hover, .dean_grow:hover{
  overflow: visible;
}
.web_grow:hover img{
  transform: scale(4.5);
}
.special_grow:hover img{
  transform: scale(3.5);
}
.dean_grow:hover img{
  transform: scale(4);
}
.orange{
  background: #D88850;
}
.purple{
  background: #8771AA;
}
.green{
  background: #83CC44;
}
.blue{
  background: #80B8C1;
}
.pink{
  background: #D891B1;
}
.red{
  background: #DB3F37;
}
.pink, .blue, .green, .purple, .orange, .red{
  color: #000;
}
.black_border{
  border-bottom: 10px solid #403F42;
}
.pink_border{
  border-bottom: 10px solid #D198C4;
}
.white_border{
  border-bottom: 10px solid #CCC;
}
.important{
  text-decoration: underline;
  font-weight: bold;
}
.hidden{
  display: none;
}
.push{
  display: inline-table;
  padding-bottom: 0;
}
@media all and (max-width: 1022px) {
  #pic{
    width: 50%;
    padding-right: 2rem;
  }
  aside{
    padding: 1rem;
    text-align: center;
  }
}
@media all and (max-width: 1070px){
  .photoshop, .illustrator, .web{
    margin: 0;
  }
}
@media all and (max-width: 997px) {
  aside{
    padding: 0.5rem;
  }
}
@media all and (max-width: 895px) {
  aside{
    padding: 0.3rem;
  }
}
@media all and (max-width: 833px) {
  aside{
    padding: 0.2rem;
  }
}
@media all and (max-width: 812px) {
  #info_container{
    max-width: 99vw;
  }
  #menu{
    flex-direction: column;
  }
  nav a{
    width: 100%;
    padding-top: 1.7rem;
  }
  nav > a:first-of-type{
    display: block;
  }
  nav #menu{
    height: 0;
    overflow: hidden;
    transition: .6s height;
  }
  nav.noscript:hover #menu, .expand{
    height: 30rem;
  }
  .expand #menu{
    overflow: visible;
  }
  #pic{
    display: block;
    width: 100%;
    border: none;
  }
  aside{
    width: 90%;
    margin: 5%;
  }
  .black_border, .pink_border, .white_border{
    border: none;
  }
  .hidden{
    display: inline;
  }
  #problem{
    display: none;
  }
  .photoshop, .illustrator, .web{
    display: block;
    margin: 0;
  }
}
@media all and (max-width: 535px){
  .footer{
    display: block;
  }
  .content{
    width: 100%;
  }
}
@media all and (max-width: 426px) {
  aside{
    width: 85%;
    margin: 8%;
  }
  figure{
    width: 50vw;
    height: 50vw;
    overflow: hidden;
    display: block;
  }
  figure img{
    width: 100%;
  }
  figure video{
    width: 100%;
  }
  #logo{
    width: 70%;
    margin: 0 15% 0 15%;
  }
  .hidden{
    display: block;
  }
  .problem{
    display: none;
  }
  #special{
    height: 88%;
  }
  .grow{
    margin-bottom: 8rem;
    padding: 0;
  }
  #special_figure{
    margin-bottom: 11rem;
  }
  figure{
    overflow: visible;
  }
  .web_grow:hover img, .dean_grow:hover img, .grow:hover img{
    margin-left: 3rem;
  }
  .web_grow:hover img{
    transform: scale(2.3);
  }
  .dean_grow:hover img{
    transform: scale(1.75);
  }
  .push{
    padding-bottom: 1.3rem;
  }
}