html, body { height: 100%; font-family: 'Open Sans Condensed', sans-serif; color: #ffffff; }
img { max-width: 100%; }
h1, h2, h3, h4, h5, h6 { font-family: 'Open Sans Condensed', sans-serif; padding: 0; margin: 0; }
p { font-size: 17px; color: #ffffff; line-height: 30px; font-family: 'Open Sans Condensed', sans-serif; }
a:hover, a:focus { text-decoration: none; outline: none; }
li, ul { margin: 0; padding: 0; }
.pt20 { padding-top: 20px; }
.pb20 { padding-bottom: 20px; }
.pl20 { padding-left: 20px; }
.pr20 { padding-right: 20px; }
.pl50 { padding-left: 50px; }
.pr50 { padding-right: 50px; }
.pl100 { padding-left: 100px; }
.pr100 { padding-right: 100px; }
.mb100 { margin-bottom: 100px; }
.mt100 { margin-top: 100px; }
.mb70 { margin-bottom: 70px; }
.mb50 { margin-bottom: 50px; }
.mb40 { margin-bottom: 40px; }
.mb20 { margin-bottom: 20px; }
.mb10 { margin-bottom: 10px; }
.mt10 { margin-top: 10px; }
.mt25 { margin-top: 25px; }
.nopad { padding-left: 0; padding-right: 0; }
body { background-color: #0077c8; }

.preview-logo { text-align: center; padding-top: 60px; }
.preview-logo .container { display: block; width: 100%; }
.preview-logo .container img { width: 100%; height: auto; }

.preview-text { text-align: center; padding-top: 30px; }
.preview-text .container { display: block; width: 100%; }
.preview-text .container p { font-size: 26px; margin-bottom: 30px; margin-top: 30px; }
 
.preview { padding-top: 50px; }
.single { text-align: center; display: block; background-color: #ffffff; box-shadow: -2px 4px 22px rgba(0, 0, 0, 0.5); margin-bottom: 30px; transition: all 0.3s; -webkit-transition: all 0.3s; }
.single img { min-width: 100%; }
.single h2 { font-family: 'Open Sans Condensed', sans-serif; margin: 0; padding: 20px 10px; font-size: 18px; font-weight: normal; color: #333; }
.single:hover { box-shadow: 0px 16px 40px rgba(0, 0, 0, 0.5); text-decoration: none; }