123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226 |
- .md-perspective,
- .md-perspective body {
- height: 100%;
- overflow: hidden;
- }
- .md-perspective body {
- background: #222;
- -webkit-perspective: 600px;
- -moz-perspective: 600px;
- perspective: 600px;
- }
- .container {
- background: #e74c3c;
-
- }
- .md-modal {
- background: url(../images/word_bg.png) no-repeat center center rgba(255,255,255,0.8) ;
- background-size:100% 100%;
- position: fixed;
- top: 50%;
- left: 50%;
- width: 70%;
- max-width: 730px;
- min-width: 380px;
- height: auto;
- z-index: 2000;
- visibility: hidden;
- -webkit-backface-visibility: hidden;
- -moz-backface-visibility: hidden;
- backface-visibility: hidden;
- -webkit-transform: translateX(-50%) translateY(-50%);
- -moz-transform: translateX(-50%) translateY(-50%);
- -ms-transform: translateX(-50%) translateY(-50%);
- transform: translateX(-50%) translateY(-50%);
- }
- .md-show {
- visibility: visible;
- }
- /* Content styles */
- .md-content {
- position: relative;
- border-radius: 3px;
- margin: 0 auto;
- }
- .md-content h3 {
- margin: 0;
- padding: 0.4em;
- text-align: center;
- font-size: 2.4em;
- font-weight: 300;
- opacity: 0.8;
- background: rgba(0,0,0,0.1);
- border-radius: 3px 3px 0 0;
- }
- .md-content h3 img{
- width:90%;
- margin:auto;
- }
- .md-content > div {
- padding: 15px 40px 30px;
- margin: 0;
- font-weight: 300;
- }
- .md-content > div p {
- margin: 0;
- padding: 5px 0px;
- text-align:center;
- font-size:0.9em;
- }
- .md-content > div ul {
- list-style:none;
- margin: 0;
- padding: 0 0 20px 0px;
- font-size:1.05em;
- line-height:30px;
- text-indent:2em;
- }
- .md-content > div ul li {
- padding: 5px 0;
- }
- .md-content button {
- display: block;
- margin: 0 auto;
- font-size: 1em;
- width:60px;
- background:#c0392b;
- border-radius:5px;
- }
- /* Effect 2: Slide from the right */
- .md-effect-2 .md-content {
- -webkit-transform: translateX(20%);
- -moz-transform: translateX(20%);
- -ms-transform: translateX(20%);
- transform: translateX(20%);
- opacity: 0;
- -webkit-transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
- -moz-transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
- transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
- }
- .md-show.md-effect-2 .md-content {
- -webkit-transform: translateX(0);
- -moz-transform: translateX(0);
- -ms-transform: translateX(0);
- transform: translateX(0);
- opacity: 1;
- }
- @media screen and (max-width: 32em) {
- body { font-size: 85%; }
- }
- .clearfix:before, .clearfix:after { content: " "; display: table; }
- .clearfix:after { clear: both; }
- a {
- color: #000;
- text-decoration: none;
- }
- /* Header Style */
- .main,
- .container > header {
- margin: 0 auto;
- padding: 0em 0 2em 2em;
- }
- .container > header {
- text-align: center;
- background: #d94839;
- padding: 3em;
- }
- .container > header h1 {
- font-size: 2.625em;
- line-height: 1.3;
- margin: 0;
- font-weight: 300;
- }
- .container > header span {
- display: block;
- font-size: 60%;
- opacity: 0.7;
- padding: 0 0 0.6em 0.1em;
- }
- /* Main Content */
- .main {
- max-width: 400px;
- float:right;
- }
- .column {
- float: left;
- width: 100%;
- min-height: 60px;
- position: relative;
- margin-top:0px;
- }
- .column:nth-child(2) {
- box-shadow: -1px 0 0 rgba(0,0,0,0.1);
- }
- .column p {
- font-weight: 300;
- font-size: 2em;
- padding: 0;
- margin: 0;
- text-align: right;
- line-height: 1.5;
- }
- button {
- border: none;
- background:rgba(255,255,255,0.3);
- color: #fff;
- font-family: 'Lato', Calibri, Arial, sans-serif;
- font-size: 1em;
- letter-spacing: 1px;
- text-transform: uppercase;
- cursor: pointer;
- display: inline-block;
- margin: 3px 3px;
- border-radius: 2px;
- width: 37px;
- padding: 0 10px;
- }
- @media screen and (max-width: 46.0625em) {
- .column {
- width: 100%;
- min-width: auto;
- min-height: auto;
- padding: 1em;
- }
- .column p {
- text-align: left;
- font-size: 1.5em;
- }
- .column:nth-child(2) {
- box-shadow: 0 -1px 0 rgba(0,0,0,0.1);
- }
- }
- @media screen and (max-width: 25em) {
- .codrops-icon span {
- display: none;
- }
- }
- .foot{display:none;bottom:10px;width:80%;margin-left:10%;position: absolute; font-size:13px;text-align:center; z-index:1002;}
|