Team:Tianjin/Resources/CSS:style666

• {

 box-sizing: border-box;

} body {

 line-height: 1.5;
 font-family: 'Lato';
 -webkit-font-smoothing: antialiased;
 overflow-x: hidden;

} h1, h2, h3, p {

 font-weight: 300;
 margin: 0 0 2.4rem 0;

} h1, h2, h3 {

 line-height: 1.3;

} a {

 text-decoration: none;
 color: inherit;
 font-weight: 400;

} /**

* Material Modal CSS
*/

.modal {

 will-change: visibility, opacity;
 display: -webkit-box;
 display: -ms-flexbox;
 display: flex;
 -webkit-box-align: center;
     -ms-flex-align: center;
         align-items: center;
 -webkit-box-pack: center;
     -ms-flex-pack: center;
         justify-content: center;
 position: fixed;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 overflow-y: auto;
 overflow-x: hidden;
 z-index: 1000;
 visibility: hidden;
 opacity: 0;
 -webkit-transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
 transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
 -webkit-transition-delay: $modal-delay;
         transition-delay: $modal-delay;

} .modal--active {

 visibility: visible;
 opacity: 1;

} .modal--align-top {

 -webkit-box-align: start;
     -ms-flex-align: start;
         align-items: flex-start;

} .modal__bg {

 background: transparent;

} .modal__dialog {

 max-width: 1200px;
 padding: 1.2rem;

} .modal__content {

 will-change: transform, opacity;
 position: relative;
 padding: 2.4rem;
 background: #ffebee;
 background-clip: padding-box;
 box-shadow: 0 12px 15px 0 rgba(0,0,0,0.25);
 opacity: 0;
 -webkit-transition: all 0.25s cubic-bezier(0.23, 1, 0.32, 1);
 transition: all 0.25s cubic-bezier(0.23, 1, 0.32, 1);

} .modal__content--active {

 opacity: 1;

} .modal__close {

 z-index: 1100;
 cursor: pointer;

} .modal__trigger {

 position: relative;
 display: inline-block;
 padding: 0.6rem 0.8rem;
 color: rgba(0,0,0,0.7);
 line-height: 1;
 cursor: pointer;
 background: #ffebee;
 box-shadow: 0 2px 5px 0 rgba(0,0,0,0.26);
 -webkit-tap-highlight-color: rgba(0,0,0,0);
 -webkit-user-select: none;
    -moz-user-select: none;
     -ms-user-select: none;
         user-select: none;
 -webkit-transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
 transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);

} .modal__trigger--active {

 z-index: 10;

} .modal__trigger:hover {

 background: #e5d3d6;

}

1. modal__temp {

 will-change: transform, opacity;
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 background: #ffebee;
 -webkit-transform: none;
         transform: none;
 opacity: 1;
 -webkit-transition: opacity 0.1s ease-out, -webkit-transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
 transition: opacity 0.1s ease-out, -webkit-transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
 transition: opacity 0.1s ease-out, transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
 transition: opacity 0.1s ease-out, transform 0.5s cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);

} /**

* Demo specific CSS
*/

img {

 max-width: 100%;

} .demo-btns header {

 padding: 7vh 10vw;
 background: #ffebee;
 display: -webkit-box;
 display: -ms-flexbox;
 display: flex;
 -webkit-box-align: center;
     -ms-flex-align: center;
         align-items: center;

} .demo-btns header h1 {

 margin: 0;
 color: rgba(0,0,0,0.54);
 font-weight: 300;

} .demo-btns .info {

 background: #f44336;
 padding: 3vh 10vw;
 height: 70vh;
 display: -webkit-box;
 display: -ms-flexbox;
 display: flex;
 -webkit-box-align: center;
     -ms-flex-align: center;
         align-items: center;
 -webkit-box-pack: center;
     -ms-flex-pack: center;
         justify-content: center;
 -ms-flex-flow: column wrap;
     flex-flow: column wrap;

} .demo-btns p {

 text-align: center;
 color: #fff;

} .demo-btns .link {

 font-size: 20px;

} .demo-btns .modal__trigger {

 margin-right: 3px;

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

 .demo-btns .modal__trigger {
   margin-bottom: 0.8rem;
 }

} .demo-close {

 position: absolute;
 top: 0;
 right: 0;
 margin: 1.2rem;
 padding: 0.6rem;
 background: rgba(0,0,0,0.3);
 border-radius: 50%;
 -webkit-transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
 transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);

} .demo-close svg {

 width: 24px;
 fill: #fff;
 pointer-events: none;
 vertical-align: top;

} .demo-close:hover {

 background: rgba(0,0,0,0.6);

} .logo {

 position: fixed;
 bottom: 3vh;
 right: 3vw;
 z-index: 2;

} .logo img {

 width: 45px;
 -webkit-transform: rotate(0);
         transform: rotate(0);
 -webkit-transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
 transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);

} .logo img:hover {

 -webkit-transform: rotate(180deg) scale(1.1);
         transform: rotate(180deg) scale(1.1);

}