.md-perspective {
height: 100%;
overflow: hidden;
}

.md-perspective  {
background: #222;
-webkit-perspective: 600px;
-moz-perspective: 600px;
perspective: 600px;
}

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

.md-modal {
position: fixed;
top: 50%;
left: 50%;
width: 50%;
max-width: 630px;
min-width: 320px;
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;}

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

.md-content {
color: #fff;
background: #e74c3c;
position: relative;
border-radius: 3px;
margin: 0 auto;
}

.md-content h3 {
margin: 0;
padding: 0.4em;
font-size: 2em;
font-weight: 300;
opacity: 0.8;
background: rgba(0,0,0,0.1);
border-radius: 3px 3px 0 0;
}

.md-content > div {
padding: 15px 40px 30px;
margin: 0;
font-weight: 300;
font-size: 1.15em;
}

.md-content > div p {margin: 0;padding: 10px 0;}
.md-content > div ul {margin: 0;padding: 0 0 30px 20px;}
.md-content > div ul li {padding: 5px 0;}

.md-content button {
display: block;
margin: 0 auto;
font-size: 0.8em;
}

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

.md-close {
border: none;
padding: 0.6em 1.2em;
background: #c0392b;
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 2px;
border-radius: 2px;
}

.md-close:hover {background: #A5281B;}

.md-trigger {
border: none;
padding: 0.2em 1.2em;
background: #c0392b;
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 2px;
border-radius: 2px;
}

.md-trigger:hover {background: #A5281B;}



.md-recept {
border: none;
padding: 0.2em 1.2em;
background: #c0392b;
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 2px;
border-radius: 2px;
}

.md-recept:hover {background: #A5281B;}