*, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
body, html { font-size: 100%; padding: 0; margin: 0; }

/* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before, .clearfix:after { content: " "; display: table; }
.clearfix:after { clear: both; }

/* General styles for the modal */

/*
Styles for the html/body for special modal where we want 3d effects
Note that we need a container wrapping all content on the page for the
perspective effects (not including the modals and the overlay).
*/
.md-perspective,
.md-perspective body {
        height: 100%;
        overflow: hidden;
}

.md-perspective body  {
        background: #7fa3fc;
        -webkit-perspective: 600px;
        -moz-perspective: 600px;
        perspective: 600px;
}

.container {
        background: #0f3fbb;
        min-height: 100%;
}

.md-modal {
        position: fixed;
        top: 10%;
        left: 50%;
        height: auto;
        z-index: 2000;
        visibility: hidden;
        -webkit-backface-visibility: hidden;
        -moz-backface-visibility: hidden;
        backface-visibility: hidden;
        -webkit-transform: translateX(-50%) translateY(0%);
        -moz-transform: translateX(-50%) translateY(0%);
        -ms-transform: translateX(-50%) translateY(0%);
        transform: translateX(-50%) translateY(0%);
}

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

.md-show ~ .md-overlay {
        opacity: 1;
        visibility: visible;
}


/* Individual modal styles with animations/transitions */

/* Effect 1: Fade in and scale up  */       
.md-effect-1 .md-content {
        -webkit-transform: scale(0.7);
        -moz-transform: scale(0.7);
        -ms-transform: scale(0.7);
        transform: scale(0.7);
        opacity: 0;
        -webkit-transition: all 0.3s;
        -moz-transition: all 0.3s;
        transition: all 0.3s;
}

.md-show.md-effect-1 .md-content {
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1);
        opacity: 1;
}