/* This stylesheet is used to style the public-facing components of the plugin. */ html, body { min-height: 100% !important; height: auto !important; } .spu-box, .spu-box *{ box-sizing: border-box; } .spu-bg{ position: fixed; width: 100%; height: 100%; top: 0; left: 0; display: none; z-index: 99999; } .spu-box:before, .spu-box:after { content:""; display:table; } .spu-box:after { clear:both; } /* Triggers "haslayout" for IE6/7 */ .spu-box { zoom:1; } .spu-box { position:fixed; z-index: 999999; margin: 10px; max-width: 100%; } .spu-box.spu-centered{ margin: 0; } /** Some basic css for box content**/ .spu-box img{ max-width: 100%; height: auto; } /** end basic style**/ .spu-box.spu-top-left{ top: 0; left: 0; bottom: auto; right: auto; } .spu-box.spu-top-right{ top: 0; right: 0; bottom: auto; left: auto; } .spu-box.spu-bottom-left{ bottom: 0; left: 0; top: auto; right: auto; } .spu-box.spu-bottom-right{ bottom: 0; right: 0; top: auto; left: auto; } .spu-content > *:first-child { margin-top: 0; padding-top: 0; } .spu-content > *:last-child { margin-bottom:0; padding-bottom:0; } .spu-close{ position:absolute; padding: 0; cursor: pointer; background: transparent; border: 0; -webkit-appearance: none; line-height: 1; } .spu-close.top_right{ right:8px; top:5px; } .spu-close.top_left{ left:8px; top:5px; } .spu-close.bottom_right{ right:8px; bottom:5px; } .spu-close.bottom_left{ left:8px; bottom:5px; } p.spu-powered { position: absolute; bottom: -55px; width: 100%; text-align: center; color: #fff; left: 0px; } p.spu-powered a{ color: #ccc; text-decoration: underline; } .spu-close:hover, .spu-close:focus { text-decoration: none; cursor: pointer; } .spu-shortcode { float: left; line-height: normal !important; } .spu-facebook-page{ text-align: center; display: block; } .spu-shortcode iframe{ max-width: 1200px; } .spu_shortcodes{ zoom: 1; } .spu-content .wysija-msg li{ list-style: none; } .spu_shortcodes:before, .spu_shortcodes:after { content: ""; display: table; } .spu_shortcodes:after { clear: both; } @font-face { font-family: 'spufont'; src:url('../fonts/spufont.eot?sze5my'); src:url('../fonts/spufont.eot?#iefixsze5my') format('embedded-opentype'), url('../fonts/spufont.woff?sze5my') format('woff'), url('../fonts/spufont.ttf?sze5my') format('truetype'), url('../fonts/spufont.svg?sze5my#spufont') format('svg'); font-weight: normal; font-style: normal; } [class^="spu-icon-"], [class*=" spu-icon-"] { font-family: 'spufont'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .spu-icon-envelope:before { content: "\f003"; } .spu-icon-check:before { content: "\f00c"; } .spu-icon-close:before { content: "\f00d"; } .spu-icon-eye:before { content: "\f06e"; } .spu-icon-gears:before { content: "\f085"; } .spu-icon-angle-up:before { content: "\f106"; } .spu-icon-angle-down:before { content: "\f107"; } .spu-icon-spinner:before { content: "\f110"; } .spu-spinner { -webkit-animation: spu-rotate 1s infinite linear; -moz-animation: spu-rotate 1s infinite linear; -o-animation: spu-rotate 1s infinite linear; margin: 5px; display: none; } /** * Top Bar position */ .spu-box.spu-top-bar, .spu-box.spu-bottom-bar{ margin: 0; width: 100% !important; padding: 10px 30px !important; border-left: none !important; border-right: none !important; border-radius: 0; position: fixed; box-shadow: none; z-index: 1000; } .spu-box.spu-top-bar.with-spu-gdpr{ padding-bottom: 40px !important; } .spu-box.spu-top-bar{ top: 0; border-top: none !important; } .spu-box.spu-bottom-bar{ bottom: 0; border-bottom: none !important; } .spu-box.spu-top-bar h1, .spu-box.spu-top-bar h2, .spu-box.spu-top-bar h3, .spu-box.spu-top-bar h4, .spu-box.spu-top-bar h5, .spu-box.spu-top-bar h6, .spu-box.spu-top-bar p, .spu-box.spu-bottom-bar h1, .spu-box.spu-bottom-bar h2, .spu-box.spu-bottom-bar h3, .spu-box.spu-bottom-bar h4, .spu-box.spu-bottom-bar h5, .spu-box.spu-bottom-bar h6, .spu-box.spu-bottom-bar p{ margin: 0; } @keyframes spu-rotate { 0% { transform: rotate(0); } 100% { transform: rotate(360deg); } } @-webkit-keyframes spu-rotate { 0% { transform: rotate(0); } 100% { transform: rotate(360deg); } } @-moz-keyframes spu-rotate { 0% { transform: rotate(0); } 100% { transform: rotate(360deg); } } @-o-keyframes spu-rotate { 0% { transform: rotate(0); } 100% { transform: rotate(360deg); } } @media only screen and (max-width: 620px) { .spu-box.taller-than-viewport { left: 0 !important; top: 100px !important; position: absolute !important; } .spu-box{ margin: 0; } }