html, body { height: 100%; background: #CCC; min-width: 320px; font-family: 'proxima-nova', sans-serif; font-size: 14px; line-height: 1.25em; margin: 0; padding: 0; } @media(min-width:767px) { html, body { font-size:16px; } } /*** HELPERS ***/ .table { display: table; table-layout: fixed; width: 100%; height: 100%; } .table-row { display: table-row; } .table-cell { display: table-cell; vertical-align: middle; } .spacer { clear: both; height: 30px; } h1, h2, h3, h4, h5 { font-weight: 700; color: #000; margin: 50px 0 10px 0; padding: 0; -webkit-font-smoothing: antialiased; } h1 { font-size: 40px; } h2 { font-size: 20px; margin: 10px 0 20px 0; text-transform: uppercase; } h3 { font-size: 16px; text-transform: uppercase; margin: 20px 0; } h4 { font-size: 16px; margin: 5px 0; } h5 { font-size: 1em; margin: 0; } p.sub-head { margin: -15px 0 20px 0; display: block; } p { display: block; margin: 0 0 20px 0; } p:last-child { margin-bottom: 0; } .page-wrap { height: 100%; overflow: hidden; } /*** NAV ***/ #nav-wrap { background: #FaFaFa; position: absolute; width: 100%; bottom: 0px; left: 0px; z-index: 5; -webkit-box-shadow: 0px 1px 2px rgba(0,0,0,0.5); -moz-box-shadow: 0px 1px 2px rgba(0,0,0,0.5); -o-box-shadow: 0px 1px 2px rgba(0,0,0,0.5); box-shadow: 0px 1px 2px rgba(0,0,0,0.5); } .nav-header { display: none; text-align: center; background: #FFF; } .nav-header img { margin: 26px 20px 34px 20px; } .nav-content { height: 300px; overflow:hidden; -webkit-overflow-scrolling: touch; -webkit-font-smoothing: antialiased; } .nav-content h2:first-child { margin-top: 0; } .nav-content .swipe-wrap > div { padding: 20px; } .nav-content .link { color: #000; display: block; overflow: hidden; cursor: pointer; } .nav-content .link a { color: #1F96F2; } .nav-content .link h5 { color: #1F96F2; } .nav-content .link:hover h5, .nav-content .link:active h5, .nav-content .link:focus h5 { text-decoration: underline; } .nav-content p:last-child { margin-bottom: 20px; } .nav-content a:last-child p { margin-bottom: 0; } .nav-footer { text-align: center; background: #FaFaFa; position: relative; } .nav-footer:before { width: 100%; height: 40px; position: absolute; top: -40px; left: 0px; content: ""; z-index: 4; background-image: -webkit-linear-gradient(top, rgba(250,250,250,1), rgba(250,250,250,0)); background-image: linear-gradient(to top, rgba(250,250,250,1), rgba(250,250,250,0)); } .actions { overflow: hidden; } .actions .btn { float: left; width: 50%; } @media(min-width:767px) { #nav-wrap { width: 320px; height: 100%; float: right; position: relative; bottom: auto; left: auto; } .nav-header { display: block; } .nav-content .swipe-wrap > div { padding: 30px; } .nav-footer { position: absolute; bottom: 0px; left: 0px; width: 100%; } } /*** * SLIDER **/ .swipe { overflow: hidden; visibility: hidden; position: relative; height: 100%; } .swipe-wrap { overflow: hidden; position: relative; height: 100%; } .swipe-wrap > div { float:left; width:100%; position: relative; height: 100%; overflow: hidden; overflow-y: scroll; } .pos { position: absolute; top: -24px; left: 0px; width: 100%; padding: 0; z-index: 5; line-height: 24px; } .pos span { display: inline-block; height: 8px; width: 8px; background: #666; margin: 0 2px; -webkit-border-radius: 4px; border-radius: 4px; } .pos span.active { background: #1F96F2; } /*** * BUTTONS **/ .btn { height: 40px; line-height: 40px; padding: 0 20px; color: #FFF; text-transform: uppercase; text-align: center; font-size: 14px; font-weight: bold; -webkit-border-radius: 0; -moz-border-radius: 0; -o-border-radius: 0; border-radius: 0; margin: 0; display: block; background: #AAA; border: none; -webkit-transition: background 200ms ease-in-out; -moz-transition: background 200ms ease-in-out; -o-transition: background 200ms ease-in-out; transition: background 200ms ease-in-out; } .btn:hover, .btn:active, .btn:focus { color: #FFF; text-decoration: none; background: #BBB; outline: none!important; } .btn.btn-sm { height: 40px; line-height: 40px; font-size: 14px; margin-bottom: 20px; } .blue { background: #1976D2!important; } .red { background: #FF0000!important; } .green { background: #66BB6A!important; } .yellow { background: #FFCC33!important; } .blue:hover, .blue:active, .blue:focus { background: #2196F3!important; } @media(min-width:767px) { .btn { height: 60px; line-height: 60px; font-size: 20px; } } .btn[disabled], .btn[disabled]:hover, .btn[disabled]:active, .btn[disabled]:focus, .btn.disabled, .btn.disabled:hover, .btn.disabled:active, .btn.disabled:focus { opacity: 1!important; background: #EEE!important; } /*** * MAP **/ #map { height: 200px; } @media(min-width:767px) { #map { height: 100%; } } .key { margin-bottom: 20px; } .key span { display: inline-block; height: 8px; width: 8px; background: #666; margin: 0 2px; -webkit-border-radius: 4px; border-radius: 4px; }