Template:DLUT China B/css/team.css

@keyframes fadeInLeft { 

   0% {
       opacity: 0;
       -moz-opacity: 0;
       transform: translate3d(-30px, 0, 0);
       -moz-transform: translate3d(-30px, 0, 0);
   }
   100% {
       opacity: 1;
       -moz-opacity: 1;
       transform: none;
       -moz-transform: none;
   }

}

@keyframes fadeInRight { 

   0% {
       opacity: 0;
       -moz-opacity: 0;
       transform: translate3d(30px, 0, 0);
       -moz-transform: translate3d(30px, 0, 0);
   }
   100% {
       opacity: 1;
       -moz-opacity: 1;
       transform: none;
       -moz-transform: none;
   }

}

  1. dlutb #header {
   background: url("T--DLUT_China_B--Team1.jpg") bottom center no-repeat;
   background-size: cover;
   height: 100vh;

}

  1. dlutb #ourTeam {
   color: white;
   text-shadow: 2px 0 1px #f68925, -2px 0 1px #f68925, 0 2px 1px #f68925, 0 -2px 1px #f68925;
   text-align: center;
   font-size: 72px;
   line-height: normal;

}

  1. dlutb #teamName {
   margin-top: 50px;

}

  1. dlutb #start {
   font-size: 20px;
   display: table;
   margin: 30px auto 0 auto;
   cursor: pointer;

}

  1. dlutb #meetUs #students, #dlutb #meetUs #instructors {
   margin: 50px auto;
   position: relative;

}

  1. dlutb #meetUs #students {
   max-width: calc(100vw - 200px);

}

  1. dlutb #meetUs #instructors {
   max-width: calc(100vw - 400px);

}

  1. dlutb #meetUs .td {
   position: relative;

}

  1. dlutb #meetUs #students, #dlutb #meetUs #instructors {
   display: table;

}

  1. dlutb #meetUs #students div.tr div.td:nth-child(1), #dlutb #meetUs #students div.tr div.td:nth-child(3) {
   width: 30%;

}

  1. dlutb #meetUs #students div.tr div.td:nth-child(2) {
   width: 40%;

}

  1. dlutb #meetUs #instructors div.tr div.td {
   width: 33%;

}

  1. dlutb #meetUs img {
   max-width: 100%;

}

  1. dlutb #meetUs .intro {
   padding: 10px;
   background: #f8e8d3;
   color: #f68925;
   font-size: 18px;
   display: none;
   width: 100%;
   position: absolute;
   left: 100%;
   top: 0;
   text-indent: 0;

}

  1. dlutb #meetUs #part1, #dlutb #meetUs #part3, #dlutb #meetUs #part8 {
   width: 50%;
   height: 100%;
   z-index: 1;
   position: absolute;
   left: 0;
   top: 0;

}

  1. dlutb #meetUs #part2, #dlutb #meetUs #part4 {
   width: 50%;
   height: 100%;
   z-index: 1;
   position: absolute;
   left: 50%;
   top: 0;

}

  1. dlutb #meetUs #part5, #dlutb #meetUs #part6, #dlutb #meetUs #part7 {
   width: 20%;
   height: 100%;
   z-index: 1;
   position: absolute;
   top: 0;

}

  1. dlutb #meetUs #part5 {
   left: 20%;

}

  1. dlutb #meetUs #part6 {
   left: 40%;

}

  1. dlutb #meetUs #part7 {
   left: 60%;

}

  1. dlutb #meetUs #part2:hover div, #dlutb #meetUs #img2:hover div, #dlutb #meetUs #part4:hover div, #dlutb #meetUs #img5:hover div, #dlutb #meetUs #part7:hover div, #dlutb #meetUs #img9:hover div, #dlutb #meetUs #img11:hover div {
   -webkit-animation: fadeInLeft forwards .4s cubic-bezier(.19, 1, .22, 1);
   -o-animation: fadeInLeft forwards .4s cubic-bezier(.19, 1, .22, 1);
   animation: fadeInLeft forwards .4s cubic-bezier(.19, 1, .22, 1);
   -webkit-animation-delay: 0s;
   -moz-animation-delay: 0s;
   -o-animation-delay: 0s;
   animation-delay: 0s;
   display: block;
   position: absolute;
   right: 0;

}

  1. dlutb #meetUs #part1:hover div, #dlutb #meetUs #img3:hover div, #dlutb #meetUs #part3:hover div, #dlutb #meetUs #img6:hover div, #dlutb #meetUs #part5:hover div, #dlutb #meetUs #part6:hover div, #dlutb #meetUs #part8:hover div, #dlutb #meetUs #img10:hover div, #dlutb #meetUs #img12:hover div {
   -webkit-animation: fadeInRight forwards .4s cubic-bezier(.19, 1, .22, 1);
   -o-animation: fadeInRight forwards .4s cubic-bezier(.19, 1, .22, 1);
   animation: fadeInRight forwards .4s cubic-bezier(.19, 1, .22, 1);
   -webkit-animation-delay: 0s;
   -moz-animation-delay: 0s;
   -o-animation-delay: 0s;
   animation-delay: 0s;
   display: block;
   position: absolute;

}

  1. dlutb #meetUs #img2:hover div, #dlutb #meetUs #img5:hover div, #dlutb #meetUs #part7:hover div, #dlutb #meetUs #img9:hover div, #dlutb #meetUs #img11:hover div {
   width: calc(133% - 20px);

}

  1. dlutb #meetUs #part2:hover div, #dlutb #meetUs #part4:hover div {
   width: calc(150% - 20px);

}

  1. dlutb #meetUs #part5:hover div {
   left: -475%;
   width: calc(375% - 20px);

}

  1. dlutb #meetUs #part6:hover div {
   left: -575%;
   width: calc(375% - 20px);

}

  1. dlutb #meetUs #part7:hover div {
   left: 200%;
   width: calc(375% - 20px);

}

  1. dlutb #meetUs #img3:hover div, #dlutb #meetUs #img6:hover div {
   left: -133%;
   width: calc(133% - 20px);

}

  1. dlutb #meetUs #part1:hover div, #dlutb #meetUs #part3:hover div, #dlutb #meetUs #part8:hover div {
   left: -150%;
   width: calc(150% - 20px);

}

  1. dlutb #meetUs #img10:hover div, #dlutb #meetUs #img12:hover div {
   left: -100%;
   width: calc(100% - 20px);

}