.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; min-height: 100%; }
.md-modal { position: fixed; top: 15%; left: 50%; height: 460px !important; width: 980px; padding:25px; margin-left: -490px; height: auto; z-index: 2000; visibility: hidden; background-color:#FFF; -webkit-box-shadow:  0px 0px 5px 0px rgba(0, 0, 0, 0.4);
    box-shadow:  0px 0px 5px 0px rgba(0, 0, 0, 0.4); }
.md-modal2 { position: fixed; top: 15%; left: 50%; height: 460px !important; width: 400px; padding:25px; margin-left: -490px; height: auto; z-index: 2000; visibility: hidden; background-color:#FFF; -webkit-box-shadow:  0px 0px 5px 0px rgba(0, 0, 0, 0.4);
    box-shadow:  0px 0px 5px 0px rgba(0, 0, 0, 0.4); }
.md-show { visibility: visible; }
.md-overlay { position: fixed; width: 100%; height: 100%; visibility: hidden; top: 0; left: 0; z-index: 1000; opacity: 0; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; z-index: 990; background-color: rgba(0,102,255,0.1); }
.md-show ~ .md-overlay { opacity: 1; visibility: visible; }



@media only screen and (max-width: 1024px) {
.md-modal { position: fixed; top: 15%; left: 50%; height: 420px !important; width: 780px; padding:25px; margin-left: -490px; height: auto; z-index: 2000; visibility: hidden; background-color:#FFF; -webkit-box-shadow:  0px 0px 5px 0px rgba(0, 0, 0, 0.4);}
.md-modal2 { position: fixed; top: 15%; left: 50%; height: 420px !important; width: 780px; padding:25px; margin-left: -490px; height: auto; z-index: 2000; visibility: hidden; background-color:#FFF; -webkit-box-shadow:  0px 0px 5px 0px rgba(0, 0, 0, 0.4);}

}

@media only screen and (max-width: 780px) {
.md-modal { position: fixed; top: 15%; left: 50%; height: 360px !important; width: 680px; padding:25px; margin-left: -490px; height: auto; z-index: 2000; visibility: hidden; background-color:#FFF; -webkit-box-shadow:  0px 0px 5px 0px rgba(0, 0, 0, 0.4);}
.md-modal2 { position: fixed; top: 15%; left: 50%; height: 360px !important; width: 680px; padding:25px; margin-left: -490px; height: auto; z-index: 2000; visibility: hidden; background-color:#FFF; -webkit-box-shadow:  0px 0px 5px 0px rgba(0, 0, 0, 0.4);}

}




/* Content styles */
.md-content { font-family: Arial, Helvetica, sans-serif !important; color: #666; position: relative; border-radius: 3px; margin: 0 auto; z-index: 999; -webkit-box-shadow: 0 0 20px 0 rgba(0,0,0,0.4); height: 400px !important; box-shadow: 0 0 20px 0 rgba(0,0,0,0.4); -webkit-font-smoothing: antialiased; background-color: #fff;  padding-left: 0px; }
.md-content h3 { margin: 0; padding: 20px 0px; color: #666; text-align: left; font-size: 2.4em; font-weight: 300; opacity: 1; border-radius: 3px 3px 0 0; }
.md-content > div { padding: 15px 0px 30px; margin: 0; font-weight: 300; font-size: 1.15em; }
.md-content > div p { margin: 0; padding: 10px 0; font-size: 17px; }
.md-content ul { margin: 20px 0px; padding: 0px; }
.md-content ul li { margin: 0px; padding: 0px; }
.md-content ul li { background-image: url(../../img/ico_arrow.png); background-repeat: no-repeat; background-position: left top; padding-top: 0px; padding-right: 0; padding-bottom: 5px; padding-left: 25px; }
.md-content button { display: block; margin: 0 auto; font-size: 0.8em; }



/* Individual modal styles with animations/transitions */

/* 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; }
/* Effect 3: Slide from the bottom */
.md-effect-3 .md-content { -webkit-transform: translateY(20%); -moz-transform: translateY(20%); -ms-transform: translateY(20%); transform: translateY(20%); opacity: 0; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; }
.md-show.md-effect-3 .md-content { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); opacity: 1; }