Template:NCKU Tainan/team css

@media (max-width:1023px) {

 .col-md-4 {
   width: 100%;
   height: 425px;
 }
 .part {
   width: auto;
   height: 60px;
   text-align: center;
 }
 .part h1 {
   font-family: 'Nanum Pen Script', cursive;
   font-size: 72px;
 }
 .flip {
     -webkit-perspective: 800;
     width: 300px;
     height: 400px;
     position: relative;
     margin: 50px auto;
 }
 .flip .card.flipped {
     -webkit-transform: rotatey(-180deg);
 }
 .flip .card {
     width: 100%;
     height: 100%;
     margin: auto;
     -webkit-transform-style: preserve-3d;
     -webkit-transition: 0.5s;
 }
 .flip .card .namecard {
     width: 100%;
     height: 100%;
     position: absolute;
     -webkit-backface-visibility: hidden;
     z-index: 2;
     font-size: 3em;
     text-align: center;
     line-height: 200px;
 }
 .flip .card .front {
     position: absolute;
     z-index: 1;
     cursor: pointer;
     letter-spacing: 1px;
     margin: auto;
     border-radius: 15px;
     overflow: hidden;
     background-color: rgba(255, 255, 255, 1);
     letter-spacing: 1px;
     color: rgb(8, 7, 1);
     border-radius: 15px;
     overflow: hidden;
     cursor: pointer;
     padding: 15px;
     border-width: 10px;
     border-style: solid;
     -webkit-border-image: url(/assets/img/border.png) 20% stretch;
     -moz-border-image: url(/assets/img/border.png) 20% stretch;
     /* Safari 3.1-5 */
     -o-border-image: url(/assets/img/border.png) 20% stretch;
     /* Opera 11-12.1 */
     border-image: url(/assets/img/border.png) 20% stretch;
 }
 .flip .card .back {
     -webkit-transform: rotatey(-180deg);
     cursor: pointer;
     background-color: rgba(255, 255, 255, 1);
     letter-spacing: 1px;
     border-radius: 15px;
     overflow: hidden;
     border-width: 10px;
     border-style: solid;
     padding: 15px;
     -webkit-border-image: url(/assets/img/border.png) 20% stretch;
     -moz-border-image: url(/assets/img/border.png) 20% stretch;
     /* Safari 3.1-5 */
     -o-border-image: url(/assets/img/border.png) 20% stretch;
     /* Opera 11-12.1 */
     border-image: url(/assets/img/border.png) 20% stretch;

 }
 .namecard img {
   width: 250px;
   height: 250px;
   margin: auto;
   border-radius: 8px;
   box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.2);
   transition-duration: 0.4s;
 }
 .txt {
   position: absolute;
   width: 250px;
   height: 100px;
   top: 250px;
   text-align: center;
 }
 .txt h2 {
   font-family: 'Nanum Pen Script', cursive;
   font-size: 28px;
   color: #091d20;
   letter-spacing: 2px;
 }
 .txt h5 {
   font-family: 'Nanum Pen Script', cursive;
   color: #0094ad;
   font-size: 22px;
   letter-spacing: 2px;
 }
 .txt HR {
   /*position:absolute;*/
   /*top:250px;*/
   margin-left: auto;
   margin-right: auto;
 }
 .txt span {
   color: rgb(129, 104, 182);
   font-size: 11px;
 }
 .card .back h2 {
   font-family: 'Nanum Pen Script', cursive;
   font-size: 24px;
   letter-spacing: 6px;
 }
 .card .back span {
   font-family: 'Nanum Pen Script', cursive;
   padding: 0px;
   font-size: 18px;
   color: #0094ad;
   letter-spacing: 2px;
 }
 .card .back h5 {
   font-family: 'Nanum Pen Script', cursive;
   color: #0094ad;
   font-size: 22px;
   letter-spacing: 4px;
 }
 .card .back HR {
   margin-left: auto;
   margin-right: auto;
 }
 .card .back p {
   font-family: 'Nanum Pen Script', cursive;
   width: 22 em;
   word-wrap: break-word;
   font-size: 24px;
   font-weight: 900;
   word-wrap: break-word;
   color: rgba(13, 1, 6, 0.96);
   line-height: 24px;
   /*display: block;*/
 }
 .flip .card .namecard .logo {
   width: 80px;
   height: 106px;
   border-radius: 100%;
   position: absolute;
   transition-duration: 0.5s;
   right: 0px;
   bottom: -20px;
   background-image: url(/assets/img/fish.png);
 }
 /* 動畫 */
 .tit h1 {
   /*position: absolute;*/
   text-align: center;
   font-size: 80px;
   font-family: 'Nanum Pen Script', cursive;
   color: rgb(55, 55, 55);
   font-weight: bold;
   letter-spacing: 5px;
   /*font-family: 'Open Sans', sans-serif;*/
 }
 .tit {
   height: 200px;
   /*border: 2px solid rgb(173, 83, 213);*/
 }

}

@import url(//fonts.googleapis.com/earlyaccess/nanumpenscript.css); @media (min-width:1024px) {

 .part {
   width: auto;
   height: 100px;
   text-align: center;
 }
 .part h1 {
   font-family: 'Nanum Pen Script', cursive;
   font-size: 90px;
 }
 .flip {
     -webkit-perspective: 800;
     width: 300px;
     height: 400px;
     position: relative;
     margin: 50px auto;
 }
 .flip .card.flipped {
     -webkit-transform: rotatey(-180deg);
 }
 .flip .card {
     width: 100%;
     height: 100%;
     margin: auto;
     -webkit-transform-style: preserve-3d;
     -webkit-transition: 0.5s;
 }
 .flip .card .namecard {
     width: 100%;
     height: 100%;
     position: absolute;
     -webkit-backface-visibility: hidden;
     z-index: 2;
     font-family: Georgia;
     font-size: 3em;
     text-align: center;
     line-height: 200px;
 }
 .flip .card .front {
     position: absolute;
     z-index: 1;
     cursor: pointer;
     letter-spacing: 1px;
     margin: auto;
     border-radius: 15px;
     overflow: hidden;
     background-color: rgba(255, 255, 255, 1);
     letter-spacing: 1px;
     color: rgb(8, 7, 1);
     border-radius: 15px;
     overflow: hidden;
     cursor: pointer;
     border: 10px solid transparent;
     padding: 15px;
     -webkit-border-image: url(/assets/img/border.png) 20% stretch;
     -moz-border-image: url(/assets/img/border.png) 20% stretch;
     /* Safari 3.1-5 */
     -o-border-image: url(/assets/img/border.png) 20% stretch;
     /* Opera 11-12.1 */
     border-image: url(/assets/img/border.png) 20% stretch;
 }
 .flip .card .back {
     -webkit-transform: rotatey(-180deg);
     cursor: pointer;
     background-color: rgba(255, 255, 255, 1);
     letter-spacing: 1px;
     border-radius: 15px;
     overflow: hidden;
     border: 10px solid transparent;
     padding: 15px;
     -webkit-border-image: url(/assets/img/border.png) 20% stretch;
     -moz-border-image: url(/assets/img/border.png) 20% stretch;
     /* Safari 3.1-5 */
     -o-border-image: url(/assets/img/border.png) 20% stretch;
     /* Opera 11-12.1 */
     border-image: url(/assets/img/border.png) 20% stretch;

 }
 .namecard img {
   width: 250px;
   height: 250px;
   margin: auto;
   border-radius: 8px;
   box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.2);
   transition-duration: 0.4s;
 }

 .txt {
   position: absolute;
   width: 250px;
   height: 100px;
   top: 250px;
   text-align: center;

 }
 .txt h2 {
   font-family: 'Nanum Pen Script', cursive;
   font-size: 28px;
   color: #091d20;
   letter-spacing: 2px;
 }
 .txt h5 {
   font-family: 'Nanum Pen Script', cursive;
   color: #0094ad;
   font-size: 22px;
   letter-spacing: 2px;
   z-index: 2;
 }
 .txt HR {
   /*position:absolute;*/
   /*top:250px;*/
   margin-left: auto;
   margin-right: auto;
 }
 .txt span {
   color: rgb(129, 104, 182);
   font-size: 11px;
 }
 .card .back h2 {
   font-family: 'Nanum Pen Script', cursive;
   font-size: 24px;
   letter-spacing: 6px;
 }
 .card .back span {
   font-family: 'Nanum Pen Script', cursive;
   padding: 0px;
   font-size: 18px;
   color: #0094ad;
   letter-spacing: 2px;
 }
 .card .back h5 {
   font-family: 'Nanum Pen Script', cursive;
   color: #0094ad;
   font-size: 22px;
   letter-spacing: 4px;
 }
 .card .back HR {
   margin-left: auto;
   margin-right: auto;
 }
 .card .back p {
   font-family: 'Nanum Pen Script', cursive;
   width: 22 em;
   word-wrap: break-word;
   font-size: 24px;
   font-weight: 900;
   word-wrap: break-word;
   color: rgba(13, 1, 6, 0.96);
   line-height: 24px;
   /*display: block;*/
 }
 .flip .card .namecard .logo {
   width: 80px;
   height: 106px;
   border-radius: 100%;
   position: absolute;
   transition-duration: 0.5s;
   right: 0px;
   bottom: -20px;
   background-image: url(/assets/img/fish.png);
 }

 .tit h1 {
   /*position: absolute;*/
   text-align: center;
   font-size: 80px;
   font-family: 'Nanum Pen Script', cursive;
   color: rgb(55, 55, 55);
   font-weight: bold;
   letter-spacing: 5px;
   /*font-family: 'Open Sans', sans-serif;*/
 }
 .tit {
   height: 200px;
   /*border: 2px solid rgb(173, 83, 213);*/
 }

}