Team:NCKU Tainan/css/team member css

• {

   box-sizing: border-box;
   background-color: #272625;

} .row::after {

   content: "";
   clear: both;
   display: table;

} [class*="col-"] {

   float: left;
   padding: 15px;

} @media only screen and (max-width: 768px) {

   /* For mobile phones: */
   [class*="col-"] {
       width: 100%;
   }

} @media only screen and (min-width: 600px) {

   /* For tablets: */
   .col-s-1 {width: 8.33%;}
   .col-s-2 {width: 16.66%;}
   .col-s-3 {width: 25%;}
   .col-s-4 {width: 33.33%;}
   .col-s-5 {width: 41.66%;}
   .col-s-6 {width: 50%;}
   .col-s-7 {width: 58.33%;}
   .col-s-8 {width: 66.66%;}
   .col-s-9 {width: 75%;}
   .col-s-10 {width: 83.33%;}
   .col-s-11 {width: 91.66%;}
   .col-s-12 {width: 100%;}

} @media only screen and (min-width: 768px) {

   /* For desktop: */
   .col-1 {width: 8.33%;}
   .col-2 {width: 16.66%;}
   .col-3 {width: 25%;}
   .col-4 {width: 33.33%;}
   .col-5 {width: 41.66%;}
   .col-6 {width: 50%;}
   .col-7 {width: 58.33%;}
   .col-8 {width: 66.66%;}
   .col-9 {width: 75%;}
   .col-10 {width: 83.33%;}
   .col-11 {width: 91.66%;}
   .col-12 {width: 100%;}

} html {

   font-family: "Lucida Sans", sans-serif;

} img {

   width: 100%;
   height: auto;

} .gototop {

   bottom: 55px;
   right: 10px;
   position: fixed;
   width: 60px;
   height: 30px;
   cursor: pointer;
   color: #FFE6D5;
   background-color: rgba(0,0,0,0);

} .gototop img {

   background-color: rgba(0,0,0,0);

} .topbar{

   overflow: hidden;
   background-color: #272625;
   position: fixed;
   top: 0;
   width: 100%;
   z-index: 1;

} .topbar a {

   float: left;
   color: #f2f2f2;
   text-align: center;
   padding: 14px 16px;
   text-decoration: none;
   font-size: 17px;

} .topbar a:hover {

   background-color: #ddd;
   color: black;

} .barclass {

   text-decoration-line: none;
   font-size: 30px;
   background-color: #272625;
   color: #f2f2f2;

} .barclass:hover {

   color:white;

}

1. bartitle {

   font-size: 30px;
   padding-top :7px;
   padding-bottom: 7px;

} .topbar .active {

   background-color: #C8BCC7;
   color: white;

}

1. bartitle {

   background-color: #272625;
   color: #f2f2f2;

} .header h1{

   background-color: #C8BCC7;
   padding: 10px;
   font-size: 60px;
   color: #2F3632;
   letter-spacing: 2px;
   margin-top: 49px;
   text-align: center;
   border-style: none none none solid;
   border-color: #CE1441;
   border-left-width: 15px;

} .row h1 {

   background-color: #272625;
   padding: 20px;
   padding-top: 40px;
   font-size: 50px;
   letter-spacing: 2px;
   margin-top: 10px;
   text-align: center;
   font-family: Patua One;
   color: #FFE6D5;

} .menu {

   padding: 10px;
   box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
   position: fixed;
   background-color: #C8BCC7;
   font-family: Patua One;
   font-size: 20px;

} .menu ul {

   list-style-type: none;
   margin: 0;
   padding: 0;
   background-color: #C8BCC7;

} .menu li {

   padding: 10px;
   margin-bottom: 7px;
   background-color: #434343;
   color: #FFE6D5;
   box-shadow: 1px 1px 3px rgba(0,0,0,0.12), 2px 2px 2px rgba(0,0,0,0.24);
   cursor: pointer;

} .menu li:hover {

   background-color: #585757;

} .menu li.active {

   background-color: #585757;
   color: white;

} @media screen and (max-width: 930px) {

   div.menu {
     display: none;
   }

} /*folded-corner*/ .post {

   position: relative;
}

.folded-corner {

   position: absolute;
   bottom: 0px;  
   right: 0px;
   border-width: 0;
   border-style: solid;
   background: hsla(260,100%,100%,0.2);
   box-shadow: 0px -4px 0px rgba(0,0,0,0.3), -1px -4px 0px rgba(0,0,0,0.1);
   border-radius: 15px 0 0 0;
   border-color: transparent #FFEEEE transparent transparent;
   transition: border-width 0.2s ease-out;
}

.post:hover .folded-corner {

   border-width: 40px 40px 0 0;

} .photo .folded-corner {background: hsla(260,5%,75%,0.5);} .member {

   padding: 10px;
   margin: 20px;
   margin-top: 1px;
   background-color: #272625;

} .principle {

   margin: 20px;
   border-style: none none double none;
   border-bottom-width: 7px;
   border-color: #F88EAE;

} .advisor {

   margin: 20px;
   border-style: none none double none;
   border-bottom-width: 7px;
   border-color: #EA931F;

} .wet {

   margin: 20px;
   border-style: none none double none;
   border-bottom-width: 7px;
   border-color: #28BD55;

} .dry {

   margin: 20px;
   border-style: none none double none;
   border-bottom-width: 7px;
   border-color: #FFE049;

} .hp {

   margin: 20px;
   border-style: none none double none;
   border-bottom-width: 10px;
   border-color: #8BBDE7;

} .person {

   margin: 20px;
   box-shadow: 1px 1px 3px rgba(0,0,0,0.12), 2px 2px 2px rgba(0,0,0,0.24);
   background-color: #FFEEEE;

} .person h3 {

   padding: 10px;
   font-size: 25px;
   font-style: italic;
   font-weight: 600;
   color: #2F3632;
   height: 65px;
   letter-spacing: 2px;
   margin-top: 20px;
   text-align: center;
   background-color: #FFEEEE;

} /*set people center*/ .person.flip.none{

   background: #272625;
   box-shadow: 0px 0px 0px;

} .person.flip.none2{

   background: #272625;
   box-shadow: 0px 0px 0px;

} .person.flip.none3{

   background: #272625;
   box-shadow: 0px 0px 0px;

} .person.flip.none4{

   background: #272625;
   box-shadow: 0px 0px 0px;

} @media only screen and (max-width: 1700px) {

   /* 3 */
   .col-1.col-s-1.person.flip.none.principlenone{
       width: 12%;
   }
   .col-1.col-s-1.person.flip.none.advisornone{
       display: none;
   }  
   .col-1.col-s-1.person.flip.none3.wetnone{
       width: 12%;
   }
   .col-1.col-s-1.person.flip.none4.wetnone{
       width: 12%;
   }
   .col-1.col-s-1.person.flip.none.wetnone{
       display: none;
   }
   .col-1.col-s-1.person.flip.none2.wetnone{
       width: 12%;
   }
   .col-1.col-s-1.person.flip.none.drynone{
       width: 12%;
   }
   .col-1.col-s-1.person.flip.none2.drynone{
       width: 12%;
   }
   .col-3.col-s-6.person.flip.none.hpnone{
       width: 29%;
   }

} @media only screen and (min-width: 1700px) {

   /* 4 */
   .col-1.col-s-1.person.flip.none.principlenone{
       width: 20%;
   }
   .col-1.col-s-1.person.flip.none.advisornone{
       width: 10%;
   }
   .col-1.col-s-1.person.flip.none3.wetnone{
       display: none;
   }
   .col-1.col-s-1.person.flip.none4.wetnone{
       display: none;
   }
   .col-1.col-s-1.person.flip.none.wetnone{
       width: 10%;
   }
   .col-1.col-s-1.person.flip.none2.wetnone{
       display: none;
   }
   .col-1.col-s-1.person.flip.none.drynone{
       display: none;
   }
   .col-1.col-s-1.person.flip.none2.drynone{
       display: none;
   }
   .col-3.col-s-6.person.flip.none.hpnone{
       width: 33.33%;
   }

} @media only screen and (min-width: 2100px) {

   /* 5 */
   .col-1.col-s-1.person.flip.none.principlenone{
       width: 28%;
   }
   .col-1.col-s-1.person.flip.none.advisornone{
       width: 16.5%;
   }  
   .col-1.col-s-1.person.flip.none.wetnone{
       display: none;
   }
   .col-1.col-s-1.person.flip.none2.wetnone{
       display: inline;
       width: 28%;
   }
   .col-1.col-s-1.person.flip.none.drynone{
       display: none;
   }
   .col-3.col-s-6.person.flip.none.hpnone{
       width: 37%;
   }

} @media only screen and (min-width: 2470px) {

   /* 6 */
   .col-1.col-s-1.person.flip.none.principlenone{
       width: 31%;
   }
   .col-1.col-s-1.person.flip.none.advisornone{
       width: 25%;
   }  
   .col-1.col-s-1.person.flip.none.wetnone{
       display: none;
   }
   .col-1.col-s-1.person.flip.none2.wetnone{
       display: none;
   }
   .col-1.col-s-1.person.flip.none.drynone{
       display: inline;
       width: 7%;
   }
   .col-3.col-s-6.person.flip.none.hpnone{
       width: 40%;
   }

}

@media only screen and (max-width: 1330px) {

   /* For mobile phones: */
   .col-1.col-s-1.person.flip.none.principlenone{
       display: none;
   }
   .col-1.col-s-1.person.flip.none.advisornone{
       display: none;
   }  
   .col-1.col-s-1.person.flip.none.wetnone{
       display: none;
   }
   .col-1.col-s-1.person.flip.none2.wetnone{
       display: none;
   }
   .col-1.col-s-1.person.flip.none3.wetnone{
       display: none;
   }
   .col-1.col-s-1.person.flip.none4.wetnone{
       display: none;
   }
   .col-1.col-s-1.person.flip.none.drynone{
       display: none;
   }
   .col-1.col-s-1.person.flip.none2.drynone{
       display: none;
   }
   .col-3.col-s-6.person.flip.none.hpnone{
       display: none;
   }

} .flip {

   perspective: 800;
   width: 280px;
   height: 380px;

} .flip .card {

   width: 100%;
   height: 100%;
   transform-style: preserve-3d;
   background-color: #FFEEEE;

} .flip .card .namecard {

   backface-visibility: hidden;
   z-index: 2;
   font-size: 3em;
   line-height: 26px;

} .flip .card .front {

   position: absolute;
   z-index: 1;
   letter-spacing: 1px;
   background-color: #FFEEEE;
   letter-spacing: 1px;
   color: rgb(8, 7, 1);
   overflow: hidden;
   cursor: pointer;

} .flip .card .back {

   transform: rotatey(-180deg);
   cursor: pointer;
   letter-spacing: 1px;
   overflow: hidden;
   padding: 15px;
   text-align: left;
   background-color: #272625;

} .card .back h2 {

   font-size: 23px;
   letter-spacing: 1px;
   margin-top: 1px;
   margin-bottom: 3px;
   background-color: #272625;

} .card .back .quote {

   font-family: 'Courgette', cursive;
   letter-spacing: 0px;
   font-size: 20px;
   font-weight: normal;
   margin-top: 10px;

} .card .back p {

   color: #fff1b9;
   font-size: 13px;
   letter-spacing: 0px;
   margin-top: 1px;
   margin-bottom: 1px;
   background-color: #272625;
   line-height: 15px;

} .card .back h5 {

   color: #fff1b9;
   font-size: 15px;
   letter-spacing: 1px;
   margin-top: 1px;
   margin-bottom: 1px;
   background-color: #272625;
   font-weight: normal;

} .card .back h3 {

   background-color: #272625;
   color: #fff1b9;
   margin-top: 5px;
   margin-bottom: 1px;
   height: 55px;
   padding: 1px;

} .principle .card .back h2 {

   color: #F88EAE;

} .advisor .card .back h2 {

   color: #EA931F;

} .advisor .card .back .quote {

   color: rgb(241, 196, 137);

} .wet .card .back h2 {

   color: #28BD55;

} .wet .card .back .quote {

   color: #C5F0A4;

} .dry .card .back h2 {

   color: #FFE049;

} .dry .card .back .quote {

   color: rgb(253, 233, 135);

} .hp .card .back h2 {

   color: #8BBDE7;

} .hp .card .back .quote {

   color: rgb(193, 214, 231);

} .flipped {

   transform: rotatey(-180deg);

}