Template:Fudan-CHINA/ReadingText2

.cd-btn { 

 display: inline-block;
 padding: 1.5vw 1.5vw;
 font-size: 1.5vw;
 color: #ffffff;
 font-weight: 900;
 font-family:_CalistoMT;
 background-color: rgba(54,191,196,1);

} .cd-btn:hover { 

 text-decoration: none;
 color: white;

}


/* --------------------------------

Modal window

*/

.cd-modal { 

 position: fixed;
 top: 0;
 left: 0;
 z-index: 889;
 height: 100%;
 width: 100%;
 overflow: hidden;
 background: #402f44 url("T--Fudan-CHINA--modal-bg.jpg") no-repeat center center;
 background-size: cover;
 opacity: 0;
 visibility: hidden;
 -webkit-transition: opacity 0.3s 0s, visibility 0s 0.3s;
 -moz-transition: opacity 0.3s 0s, visibility 0s 0.3s;
 transition: opacity 0.3s 0s, visibility 0s 0.3s;

} .modal-content { 

 height: 100%;
 overflow-y:scroll;
 padding: 0;
 margin: 0;
 color: #e4dcca;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;

} .cd-modal h1 { 

 	padding: 150px 0 0 0;
 	color: #E4DCC9;
 	text-align: center;

font-size: 50px; } .cd-modal h1::after { 

 /* ink/brush separation */
 content: ;
 display: block;
 width: 130px;
 height: 8px;
 background: url("https://static.igem.org/mediawiki/2018/6/6d/T--Fudan-CHINA--ink-separation.svg") no-repeat center center;
 margin: 0 auto -20px;

padding: 80px 0 0 0; } .cd-modal .pasPra { 

 line-height: 1.6;
 margin: 0 auto;
 max-width: 80vw;
 text-align: justify;
 font-size: 21px;
 font-family: palatino,_palatino ;

} .cd-modal .modal-close { 

 /* 'X' icon */
 position: absolute;
 z-index: 1;
 top: 10%;
 right: 5%;
 height:4vw;
 width: 4vw;
 border-radius: 50%;
 background: rgba(0, 0, 0, 0.3) url("https://static.igem.org/mediawiki/2018/6/60/T--Fudan-CHINA--cd-icon-close.svg") no-repeat center center;
 /* image replacement */
 overflow: hidden;
 text-indent: 100%;
 white-space: nowrap;
 visibility: hidden;
 opacity: 0;
 -webkit-transform: scale(0);
 -moz-transform: scale(0);
 -ms-transform: scale(0);
 -o-transform: scale(0);
 transform: scale(0);
 -webkit-transition: -webkit-transform 0.3s 0s, visibility 0s 0.3s, opacity 0.3s 0s;
 -moz-transition: -moz-transform 0.3s 0s, visibility 0s 0.3s, opacity 0.3s 0s;
 transition: transform 0.3s 0s, visibility 0s 0.3s, opacity 0.3s 0s;

} .no-touch .cd-modal .modal-close:hover { 

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

} .cd-modal.visible { 

 opacity: 1;
 visibility: visible;
 -webkit-transition: opacity 0.7s, visibility 0s;
 -moz-transition: opacity 0.7s, visibility 0s;
 transition: opacity 0.7s, visibility 0s;

} .cd-modal.visible .modal-content { 

 /* this fixes the buggy scrolling on webkit browsers - mobile devices only - when overflow property is applied */
 -webkit-overflow-scrolling: touch;

} .cd-modal.visible .modal-close { 

 visibility: visible;
 opacity: 1;
 -webkit-transition: -webkit-transform 0.3s 0s, visibility 0s 0s, opacity 0.3s 0s;
 -moz-transition: -moz-transform 0.3s 0s, visibility 0s 0s, opacity 0.3s 0s;
 transition: transform 0.3s 0s, visibility 0s 0s, opacity 0.3s 0s;
 -webkit-transform: scale(1);
 -moz-transform: scale(1);
 -ms-transform: scale(1);
 -o-transform: scale(1);
 transform: scale(1);

}

/* --------------------------------

Transition Layer

*/

.cd-transition-layer { 

 position: fixed;
 top: 0;
 left: 0;
 z-index: 2;
 height: 100%;
 width: 100%;
 opacity: 0;
 visibility: hidden;
 overflow: hidden;

} .cd-transition-layer .bg-layer { 

 position: absolute;
 left: 50%;
 top: 50%;
 -webkit-transform: translateY(-50%) translateX(-2%);
 -moz-transform: translateY(-50%) translateX(-2%);
 -ms-transform: translateY(-50%) translateX(-2%);
 -o-transform: translateY(-50%) translateX(-2%);
 transform: translateY(-50%) translateX(-2%);
 /* its dimentions will be overwritten using jQuery to proportionally fit the viewport */
 height: 100%;
 /* our sprite is composed of 25 frames */
 width: 2500%;
 background: url("T--Fudan-CHINA--ink4textread.png") no-repeat 0 0;
 background-size: 100% 100%;

} .cd-transition-layer.visible { 

 opacity: 1;
 visibility: visible;

} .cd-transition-layer.opening .bg-layer { 

 -webkit-animation: cd-sequence 0.8s steps(24);
 -moz-animation: cd-sequence 0.8s steps(24);
 animation: cd-sequence 0.8s steps(24);
 -webkit-animation-fill-mode: forwards;
 -moz-animation-fill-mode: forwards;
 animation-fill-mode: forwards;

} .cd-transition-layer.closing .bg-layer { 

 -webkit-animation: cd-sequence-reverse 0.8s steps(24);
 -moz-animation: cd-sequence-reverse 0.8s steps(24);
 animation: cd-sequence-reverse 0.8s steps(24);
 -webkit-animation-fill-mode: forwards;
 -moz-animation-fill-mode: forwards;
 animation-fill-mode: forwards;

} .no-cssanimations .cd-transition-layer { 

 display: none;

}

@-webkit-keyframes cd-sequence { 

 0% {
   /* translateX(-2%) is used to horizontally center the first frame inside the viewport */
   -webkit-transform: translateY(-50%) translateX(-2%);
 }
 100% {
   /* translateX(-98%) (2% + 96) is used to horizontally center the last frame inside the viewport  */
   -webkit-transform: translateY(-50%) translateX(-98%);
 }

} @-moz-keyframes cd-sequence { 

 0% {
   /* translateX(-2%) is used to horizontally center the first frame inside the viewport */
   -moz-transform: translateY(-50%) translateX(-2%);
 }
 100% {
   /* translateX(-98%) (2% + 96) is used to horizontally center the last frame inside the viewport  */
   -moz-transform: translateY(-50%) translateX(-98%);
 }

} @keyframes cd-sequence { 

 0% {
   /* translateX(-2%) is used to horizontally center the first frame inside the viewport */
   -webkit-transform: translateY(-50%) translateX(-2%);
   -moz-transform: translateY(-50%) translateX(-2%);
   -ms-transform: translateY(-50%) translateX(-2%);
   -o-transform: translateY(-50%) translateX(-2%);
   transform: translateY(-50%) translateX(-2%);
 }
 100% {
   /* translateX(-98%) (2% + 96) is used to horizontally center the last frame inside the viewport  */
   -webkit-transform: translateY(-50%) translateX(-98%);
   -moz-transform: translateY(-50%) translateX(-98%);
   -ms-transform: translateY(-50%) translateX(-98%);
   -o-transform: translateY(-50%) translateX(-98%);
   transform: translateY(-50%) translateX(-98%);
 }

} @-webkit-keyframes cd-sequence-reverse { 

 0% {
   -webkit-transform: translateY(-50%) translateX(-98%);
 }
 100% {
   -webkit-transform: translateY(-50%) translateX(-2%);
 }

} @-moz-keyframes cd-sequence-reverse { 

 0% {
   -moz-transform: translateY(-50%) translateX(-98%);
 }
 100% {
   -moz-transform: translateY(-50%) translateX(-2%);
 }

} @keyframes cd-sequence-reverse { 

 0% {
   -webkit-transform: translateY(-50%) translateX(-98%);
   -moz-transform: translateY(-50%) translateX(-98%);
   -ms-transform: translateY(-50%) translateX(-98%);
   -o-transform: translateY(-50%) translateX(-98%);
   transform: translateY(-50%) translateX(-98%);
 }
 100% {
   -webkit-transform: translateY(-50%) translateX(-2%);
   -moz-transform: translateY(-50%) translateX(-2%);
   -ms-transform: translateY(-50%) translateX(-2%);
   -o-transform: translateY(-50%) translateX(-2%);
   transform: translateY(-50%) translateX(-2%);
 }

}