Difference between revisions of "Template:TUST China/css/team"

Revision as of 18:01, 5 October 2018

.at-section__title {

   margin: 0 0 70px;
   color: #000;
   font-family: 'Roboto', sans-serif;
   font-size: 3.5rem;
   font-weight: 300;
   line-height: 2.625rem;
   text-align: center;

} .at-grid {

   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-orient: horizontal;
   -webkit-box-direction: normal;
   -webkit-flex-direction: row;
   -ms-flex-direction: row;
   flex-direction: row;
   -webkit-flex-wrap: wrap;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
   background: #FFF;
   border: 1px solid #E2E9ED;

} .at-grid[data-column="1"] .at-column {

   width: 100%;
   max-width: 100%;
   min-width: 100%;
   -webkit-flex-basis: 100%;
   -ms-flex-preferred-size: 100%;
   flex-basis: 100%;

} .at-grid[data-column="2"] .at-column {

   width: 50%;
   max-width: 50%;
   min-width: 50%;
   -webkit-flex-basis: 50%;
   -ms-flex-preferred-size: 50%;
   flex-basis: 50%;

} .at-grid[data-column="3"] .at-column {

   width: 33.33333%;
   max-width: 33.33333%;
   min-width: 33.33333%;
   -webkit-flex-basis: 33.33333%;
   -ms-flex-preferred-size: 33.33333%;
   flex-basis: 33.33333%;

} .at-grid[data-column="4"] .at-column {

   width: 25%;
   max-width: 25%;
   min-width: 25%;
   -webkit-flex-basis: 25%;
   -ms-flex-preferred-size: 25%;
   flex-basis: 25%;

} .at-grid[data-column="5"] .at-column {

   width: 20%;
   max-width: 20%;
   min-width: 20%;
   -webkit-flex-basis: 20%;
   -ms-flex-preferred-size: 20%;
   flex-basis: 20%;

} .at-grid[data-column="6"] .at-column {

   width: 16.66667%;
   max-width: 16.66667%;
   min-width: 16.66667%;
   -webkit-flex-basis: 16.66667%;
   -ms-flex-preferred-size: 16.66667%;
   flex-basis: 16.66667%;

} .at-grid[data-column="7"] .at-column {

   width: 14.28571%;
   max-width: 14.28571%;
   min-width: 14.28571%;
   -webkit-flex-basis: 14.28571%;
   -ms-flex-preferred-size: 14.28571%;
   flex-basis: 14.28571%;

} .at-grid[data-column="8"] .at-column {

   width: 12.5%;
   max-width: 12.5%;
   min-width: 12.5%;
   -webkit-flex-basis: 12.5%;
   -ms-flex-preferred-size: 12.5%;
   flex-basis: 12.5%;

} .at-grid[data-column="9"] .at-column {

   width: 11.11111%;
   max-width: 11.11111%;
   min-width: 11.11111%;
   -webkit-flex-basis: 11.11111%;
   -ms-flex-preferred-size: 11.11111%;
   flex-basis: 11.11111%;

} .at-column {

   position: relative;
   background: #FFF;
   overflow: hidden;
   text-align: center;
   box-shadow: 0 0 0 1px #E2E9ED;
   padding: 10px;
   box-sizing: border-box;
   -webkit-transition: box-shadow 0.2s ease, -webkit-transform 0.2s ease;
   transition: box-shadow 0.2s ease, -webkit-transform 0.2s ease;
   transition: box-shadow 0.2s ease, transform 0.2s ease;
   transition: box-shadow 0.2s ease, transform 0.2s ease, -webkit-transform 0.2s ease;

} .at-column:before {

   content: "";
   display: block;
   padding-top: 100%;

} .at-column:hover {

   z-index: 1;
   box-shadow: 0 8px 50px rgba(0, 0, 0, 0.2);
   -webkit-transform: scale(1.05);
   transform: scale(1.05);

} .at-column:hover .at-social {

   margin: 16px 0 0;
   opacity: 1;

} @media (max-width: 800px) {

   .at-column {
       width: 50% !important;
       max-width: 50% !important;
       min-width: 50% !important;
       -webkit-flex-basis: 50% !important;
       -ms-flex-preferred-size: 50% !important;
       flex-basis: 50% !important;
   }

} @media (max-width: 600px) {

   .at-column {
       width: 100% !important;
       max-width: 100% !important;
       min-width: 100% !important;
       -webkit-flex-basis: 100% !important;
       -ms-flex-preferred-size: 100% !important;
       flex-basis: 100% !important;
   }

} .at-user {

   position: absolute;
   top: 50%;
   left: 0;
   width: 100%;
   -webkit-transform: translate(0, -50%);
   transform: translate(0, -50%);
   text-align: center;

} .at-user__avatar {

   width: 125px;
   height: 125px;
   border-radius: 100%;
   margin: 0 auto 20px;
   overflow: hidden;

} .at-user__avatar img {

   display: block;
   width: 100%;

} .at-user__name {

   color: #313435;
   font-family: 'Roboto', sans-serif;
   font-size: 1.5rem;
   font-weight: 500;
   line-height: 2.625rem;

} .at-user__title {

   color: #6F808A;
   font-family: 'Roboto', sans-serif;
   font-size: 0.875rem;
   line-height: 2.375rem;

}

body { background-color: #17BEBB;

   font-family: 'Roboto', sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;

} .container {

   max-width: 1170px;
   width: 100%;
   margin: 100px auto;
   padding: 0 20px;
   box-sizing: border-box;
   -webkit-transform-origin: top center;
   transform-origin: top center;
   -webkit-transform: scale(0.8);
   transform: scale(0.8);

}

.teamy1 {

   overflow: hidden;
   width: 100%;
   height: 100%;

}

.teamy1:before {

   content: "";
   position: absolute;

   top: 50%;
   left: 50%;
   z-index: 2;

}

.at-column .teamy1:before {

   width: 0;
   height: 0;
   padding: 25%;
   border-radius: 50%;
   -webkit-transition: opacity .3s ease-out, -webkit-transform .3s ease;
   transition: opacity .3s ease-out, -webkit-transform .3s ease;
   transition: transform .3s ease, opacity .3s ease-out;
   transition: transform .3s ease, opacity .3s ease-out, -webkit-transform .3s ease;
   will-change: opacity, transform;
   opacity: 0;
   -webkit-transform: translate(-50%, -50%) scale(0);
   transform: translate(-50%, -50%) scale(0);

} .at-column:hover .teamy1:before {

   opacity: 1;
   -webkit-transform: translate(-50%, -50%) scale(4);
   transform: translate(-50%, -50%) scale(4);
   -webkit-transition-duration: .6s;
   transition-duration: .6s;

}

.teamy1:before {

   background-color: rgba(72, 27, 174, .8);

}

.at-column span{

   display: inherit;
   position: absolute;
   text-align: left;
   white-space: pre-wrap;

   color: #fff;
   width: 80%;
   top: 20px;
   font-size: 1.0em;
   z-index: 5;
   opacity: 0;

} .at-column:hover span{

   opacity: 1;

}