.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;}