@charset "UTF-8";/** * Theme Name: Basic * Version: 1.0.0 * Theme URL: http://sequencejs.com/themes/basic/ * * A simple, colorful side-to-side slider * * This theme is powered by Sequence.js - The * responsive CSS animation framework for creating unique sliders, * presentations, banners, and other step-based applications. * * Author: Ian Lunn * Author URL: http://ianlunn.co.uk/ * * Theme License: http://sequencejs.com/licenses/#free-theme * Sequence.js Licenses: http://sequencejs.com/licenses/ * * Copyright © 2015 Ian Lunn Design Limited unless otherwise stated. */body,html,.seq{/* Uncomment to make the theme full-screen */ /* width: 100% !important; */ /* max-width: 100% !important; */ /* height: 100% !important; */ /* max-height: 100% !important; */}/* Google Web Font */.seq{position: relative; /* Dimensions */ width: 100%; height: 340px; max-width: 100%; /* Center the Sequence container on the page */ margin: 0 auto; padding: 0; /* Some basic styles */ font-family: sans-serif;}.seq .seq-pagination,.seq .seq-screen,.seq .seq-canvas,.seq .seq-canvas > *{/* Reset the canvas and steps for better browser consistency */ margin: 0; padding: 0; list-style: none;}.seq .seq-preloader{/* background: #279FE5; */}.seq .seq-pagination{position: absolute; z-index: 10; bottom: 20px; width: 100%; border: none; text-align: center;}.seq .seq-pagination a{display: block; width: 100%; height: 100%;}.seq .seq-pagination .seq-current{border-radius: 100%; background: rgba(187, 0, 0, .6); border-color: rgba(187, 0, 0, .6);}.seq .seq-pagination > *{margin: 0 4px; padding: 0; display: inline-block; zoom: 1; width: 28px; height: 28px; cursor: pointer; background: rgba(255, 255, 255, .6); border: white solid rgba(255, 255, 255, .6); border-radius: 100%; -webkit-transition-duration: .1s; transition-duration: .1s; -webkit-transition-property: background-color, border-radius; transition-property: background-color, border-radius; /* Image replacement */ font: 0/0 a; text-shadow: none; color: transparent;}.seq .seq-canvas{/* Make the canvas the same dimensions as the container and prevent lines * from wrapping so each step can sit side-by-side */ position: absolute; height: 100%; width: 100%; white-space: nowrap; /* Reset the font-size to remove 4px from :before and .title */ font-size: 0;}.seq .seq-canvas > *{/* Make the steps the same size as the container and sit side-by-side */ display: inline-block; zoom: 1; vertical-align: top; width: 100%; height: 100%; white-space: normal; text-align: center; color: white; -webkit-transform: translateZ(0); -ms-transform: translateZ(0); transform: translateZ(0);}.seq .seq-canvas > *:before{/* Vertically align .seq-content */ content: ""; display: inline-block; vertical-align: middle; height: 100%;}.seq .seq-content{/* Default styles for content */ display: inline-block; vertical-align: middle; max-width: 835px; margin: 0 4%; /* Reset the font-size from 0 back to 16 */ font-size: 16px; color: white;}.seq .seq-button{display: inline-block; zoom: 1; margin-top: 2em; /* padding: .6em; */ /* color: white; */ /* border: white solid 2px; */ text-decoration: none; text-transform: uppercase; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-transition-duration: .25s; transition-duration: .25s; -webkit-transition-property: background-color, color; transition-property: background-color, color;}.seq .seq-button:focus,.seq .seq-button:hover{/* background-color: white; */}.seq .seq-title,.seq .seq-subtitle,.seq .seq-button{-moz-osx-font-smoothing: grayscale; -webkit-transform: translateZ(0); -ms-transform: translateZ(0); transform: translateZ(0);}.seq .seq-title,.seq .seq-subtitle{color: white; margin: 0 0 .5em 0; display: block; line-height: 1.4; -moz-osx-font-smoothing: grayscale; -webkit-transform: translateZ(0); -ms-transform: translateZ(0); transform: translateZ(0); text-shadow: 0px 3px 12px rgba(0, 0, 0, 0.15);}.seq .seq-title{font-size: 1.8em;}.seq.seq-active{/* when JS is enabled */ /* Hide anything that goes beyond the boundaries of the Sequence container */ overflow: hidden;}.seq.seq-active .seq-preloader,.seq.seq-active .seq-pagination{visibility: visible;}.seq.seq-active .seq-preloader.seq-preloaded{visibility: hidden;}.seq.seq-active .seq-preloader .seq-preload-circle{fill: white;}.seq.seq-active .seq-content{/* Pull the content up a bit to account for the pagination */ margin-top: -26px;}.seq.seq-active .seq-button{-webkit-transform: translateZ(0) scale(0); -ms-transform: translateZ(0) scale(0); transform: translateZ(0) scale(0);}@-webkit-keyframes jelly{0%{-webkit-transform: translateZ(0) scale(0); transform: translateZ(0) scale(0);}40%{-webkit-transform: translateZ(0) scale(1.15); transform: translateZ(0) scale(1.15);}60%{-webkit-transform: translateZ(0) scale(1); transform: translateZ(0) scale(1);}80%{-webkit-transform: translateZ(0) scale(1.05); transform: translateZ(0) scale(1.05);}100%{-webkit-transform: translateZ(0) scale(1); transform: translateZ(0) scale(1);}}@keyframes jelly{0%{-webkit-transform: translateZ(0) scale(0); -ms-transform: translateZ(0) scale(0); transform: translateZ(0) scale(0);}40%{-webkit-transform: translateZ(0) scale(1.15); -ms-transform: translateZ(0) scale(1.15); transform: translateZ(0) scale(1.15);}60%{-webkit-transform: translateZ(0) scale(1); -ms-transform: translateZ(0) scale(1); transform: translateZ(0) scale(1);}80%{-webkit-transform: translateZ(0) scale(1.05); -ms-transform: translateZ(0) scale(1.05); transform: translateZ(0) scale(1.05);}100%{-webkit-transform: translateZ(0) scale(1); -ms-transform: translateZ(0) scale(1); transform: translateZ(0) scale(1);}}.seq.seq-active .seq-title,.seq.seq-active .seq-subtitle{/* Starting positions */ opacity: 0; -webkit-transition-duration: .4s; transition-duration: .4s;}.seq.seq-active .seq-title{-webkit-transform: translate3d(0, -20px, 0); -ms-transform: translate3d(0, -20px, 0); transform: translate3d(0, -20px, 0);}.seq.seq-active h3{-webkit-transform: translate3d(0, 20px, 0); -ms-transform: translate3d(0, 20px, 0); transform: translate3d(0, 20px, 0);}.seq .seq-in{/* Animate in positions for content */}.seq .seq-in .seq-title,.seq .seq-in .seq-subtitle{opacity: 1; -webkit-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);}.seq .seq-in .seq-button{-webkit-animation-name: jelly; animation-name: jelly; -webkit-animation-duration: .5s; animation-duration: .5s;}.seq .seq-out{/* Animate out positions for content */}.seq .seq-out .seq-title,.seq .seq-out .seq-subtitle{opacity: 1; -webkit-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);}.seq .seq-out .seq-button{-webkit-transform: scale(1) translateZ(0); -ms-transform: scale(1) translateZ(0); transform: scale(1) translateZ(0);}@media only screen and (min-width: 600px){.seq{/* Make the container 16:9 but no bigger than 90% of the screen height */ position: relative; height: auto; /* height: 100%; */ height: 460px; /* max-height: 90vh; */ /* min-height: 420px; */}.seq:before{/* Make an element a certain aspect ratio */ display: block; content: ""; width: 100%; padding-top: 56.25%;}.seq .seq-screen{position: absolute; top: 0; left: 0; right: 0; bottom: 0;}.seq .seq-content{/* Pull the content up to account for the pagination */ margin-top: -19px;}.seq .seq-pagination > *{width: 12px; height: 12px;}}@media only screen and (min-width: 768px){.seq .seq-title, .seq .seq-subtitle{font-size: 1.4em;}.seq .seq-title{margin-top: 7px; font-size: 2.6em; font-weight: 800; letter-spacing: 2px; line-height: 1.1;}.seq .seq-subtitle{max-width: 630px; margin: 0 auto; font-size: 16px; font-weight: 600; letter-spacing: 1pt;}}@media (min-width: 991px){.seq .seq-content{max-width: 100%;}.seq .seq-title{max-width: 100%; font-size: 47px;}}