body, html { height: 100%; }
body { font-family: 'Montserrat', 'Helvetica', 'Arial', 'sans-serif'; font-weight: 200; }
h1, h2, h3 { font-weight: 400; }
h1 { font-size: 2em; }
h2 { font-size: 1.5em; }
h3 { font-size: 1.25em; }

/* Bootstrap overrides and inherited styles. */
nav { font-weight: 400; }
.navbar-brand img { height: 1.5em; }

/* Custom styles used in this design. */
.pm-container { margin: 1em auto; }
.pm-legal { font-size: 0.875em; }
.pm-legal-container h2 { margin-top: 1.5em; }
.pm-legal-container h3 { margin-top: 0.875em; }
.pm-get-icons { display: inline; }
.pm-get-icons img { height: 4em; margin: 0.5em 1em 0.5em 0; }
.pm-screenshot { width: 100%; }

/* Consider only mobile telephones. A bit of a hack. */
@media (max-width: 575px) {
    .pm-mob-lead { text-align: center; margin: 1em; }
    .pm-mob-scr { margin: 1em; }
}

/* CSS 'slideshow' slash fading. With thanks to StackOverflow. */
#pm-slideshow img { position: absolute; left: 0; top: 0; 
    -webkit-animation-name: fade; -webkit-animation-iteration-count: infinite;
    -webkit-animation-duration: 18s; animation-name: fade; 
    animation-iteration-count: infinite; animation-duration: 18s;
}

@-webkit-keyframes fade { 
    0% { opacity: 0; }
    20% { opacity: 1; }
    33% { opacity: 1; }
    53% { opacity: 0; }
    100% { opacity: 0; }
}

@keyframes fade { 
    0% { opacity: 0; }
    20% { opacity: 1; }
    33% { opacity: 1; }
    53% { opacity: 0; }
    100% { opacity: 0; }
}

#pm-fade1 { -webkit-animation-delay: 0s; }
#pm-fade2 { -webkit-animation-delay: -12s; }
#pm-fade3 { -webkit-animation-delay: -6s; }