/* ---------------------------------------------- *	Big Mama Styles!	Here we collate all of our partials into one file ready to be processed and generate that	beautiful CSS.\* ---------------------------------------------- *//* - Index-------------------------------------------------	- Susy ...................................... 1.0.	- Breakpoint ................................ 2.0.	- Modular Scale ............................. 3.0.	- Mixins .................................... 4.0.	- Variables ................................. 5.0.	- Reset ..................................... 6.0.	- Base ...................................... 7.0.	- Grid ...................................... 8.0.	- Typography ................................ 9.0.	- Nav ...................................... 10.0.	- Header ................................... 11.0.	- Content .................................. 12.0.	- Footer ................................... 13.0.*//* -----------------------------------------	1.0. Susy----------------------------------------- *//* -----------------------------------------	2.0. Breakpoint----------------------------------------- *//* -----------------------------------------	3.0. Modular Scale----------------------------------------- *//* -----------------------------------------	4.0. Mixins----------------------------------------- *//* -----------------------------------------	5.0. Variables----------------------------------------- *//* -----------------------------------------	6.0. Reset----------------------------------------- *//* ---------------------------------------------- *  Partial: reset  Reset the fuck out of everything. Phwouah!\* ---------------------------------------------- */* {  box-sizing: border-box; }html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {  margin: 0;  padding: 0;  border: 0;  font-size: 100%;  font: inherit;  vertical-align: baseline; }article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {  display: block; }html, body {  height: 100%; }a img {  border: none; }blockquote {  quotes: none; }blockquote:before, blockquote:after {  content: '';  content: none; }table {  border-collapse: collapse;  border-spacing: 0; }caption, th, td {  text-align: left;  font-weight: normal;  vertical-align: middle; }/*! sanitize.css v3.0.0 | CC0 1.0 Public Domain | github.com/10up/sanitize.css *//* * Normalization */audio:not([controls]) {  display: none; }button {  overflow: visible;  -webkit-appearance: button; }details {  display: block; }html {  -ms-overflow-style: -ms-autohiding-scrollbar;  overflow-y: scroll;  -webkit-text-size-adjust: 100%; }input {  -webkit-border-radius: 0; }  input[type="button"], input[type="reset"], input[type="submit"] {    -webkit-appearance: button; }  input[type="number"] {    width: auto; }  input[type="search"] {    -webkit-appearance: textfield; }    input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration {      -webkit-appearance: none; }main {  display: block; }pre {  overflow: auto; }progress {  display: inline-block; }small {  font-size: 75%; }summary {  display: block; }svg:not(:root) {  overflow: hidden; }template {  display: none; }textarea {  overflow: auto; }[hidden] {  display: none; }/* * Universal inheritance */*,::before,::after {  box-sizing: inherit; }* {  font-size: inherit;  line-height: inherit; }::before,::after {  text-decoration: inherit;  vertical-align: inherit; }/* * Opinionated defaults */*,::before,::after {  border-style: solid;  border-width: 0; }* {  background-repeat: no-repeat;  margin: 0;  padding: 0; }:root {  background-color: #FFFFFF;  box-sizing: border-box;  color: #000000;  cursor: default;  font: 100% / 1.5 sans-serif;  text-rendering: optimizeLegibility; }a {  text-decoration: none; }audio,canvas,iframe,img,svg,video {  vertical-align: middle; }button,input,select,textarea {  background-color: transparent; }button,input,select,textarea {  color: inherit;  font-family: inherit;  font-style: inherit;  font-weight: inherit; }button,[type="button"],[type="date"],[type="datetime"],[type="datetime-local"],[type="email"],[type="month"],[type="number"],[type="password"],[type="reset"],[type="search"],[type="submit"],[type="tel"],[type="text"],[type="time"],[type="url"],[type="week"],select,textarea {  min-height: 1.5em; }code,kbd,pre,samp {  font-family: monospace, monospace; }nav ol,nav ul {  list-style: none; }select {  -moz-appearance: none;  -webkit-appearance: none; }  select::-ms-expand {    display: none; }  select::-ms-value {    color: currentColor; }table {  border-collapse: collapse;  border-spacing: 0; }textarea {  resize: vertical; }::-moz-selection {  background-color: #B3D4FC;  color: #ffffff;  text-shadow: none; }::selection {  background-color: #B3D4FC;  color: #ffffff;  text-shadow: none; }[aria-busy="true"] {  cursor: progress; }[aria-controls] {  cursor: pointer; }[aria-disabled] {  cursor: default; }[hidden][aria-hidden="false"] {  clip: rect(0 0 0 0);  display: inherit;  position: absolute; }  [hidden][aria-hidden="false"]:focus {    clip: auto; }/* -----------------------------------------	7.0. Base----------------------------------------- *//* ---------------------------------------------- *  Partial: grid  We're using Susy. Please visit http://susy.readthedocs.org/en/latest/install/  Due to using Susy, we're going to need the Ruby gems installed. Please a see a guide here: [TBD].  Usage  =====\* ---------------------------------------------- *//* - Index-------------------------------------------------  - Global defaults     ............................. 1.0.  - Grid makeup         ............................. 2.0.*//* ---------------------------------------------- *  1.0 Global defaults\* ---------------------------------------------- *//* ---------------------------------------------- *  1.0 Grid makeup\* ---------------------------------------------- */.contain {  max-width: 1080px;  margin-left: auto;  margin-right: auto;  padding: 0 1.944em; }  .contain:after {    content: " ";    display: block;    clear: both; }  @media (min-width: 75em) {    .contain {      padding: 0; } }  .contain--table {    display: table;    width: 100%;    max-width: 1080px;    margin: 0 auto; }/* ---------------------------------------------- *  Partial: base  Here you place the base defaults to any project\* ---------------------------------------------- */*, *:before, *:after {  box-sizing: border-box; }html {  font-size: 100%;  -webkit-text-size-adjust: 100%;      -ms-text-size-adjust: 100%;          text-size-adjust: 100%; }body {  color: #333;  font-family: "RobotoRegular", Arial, "Helvetica Neue", Helvetica, sans-serif;  font-size: 15px;  line-height: 1.6;  margin: 0;  -webkit-font-smoothing: antialiased;  -moz-osx-font-smoothing: grayscale; }  @media (min-width: 57.5em) {    body {      font-size: 16px; } }html, body {  height: 100%;  min-height: 100%; }small {  font-size: 0.85em; }ul li {  list-style: none; }ol li {  list-style: none; }img, object, embed {  height: auto;  max-width: 100%; }blockquote {  background: #e3e3e3;  color: #FFFFFF;  font-size: 1.1em;  font-style: italic;  margin: 0 0 1.250em 1.250em;  padding: 0.625em 1.250em 1.250em; }  blockquote p:last-child {    margin-bottom: 0; }/*********************************************	- 2.0 -  LINKS*********************************************//* - 2.1. - BASE LINK STYLES	------------------------------------------ */a {  color: #ed7887;  cursor: pointer;  text-decoration: none;  /* Improve readability when focused and hovered in all browsers: h5bp.com/h */ }  a:hover {    color: #e1838f; }  a:focus {    color: #ed7887; }  a:focus, a:active {    outline: none; }/* - 2.2. - HEADER LINKS 	------------------------------------------ */h1 a, h2 a, h3 a, h4 a, h5 a, h6 a,.h1 a, .h2 a, .h3 a, .h4 a, .h5 a, .h6 a {  color: #ed7887; }/*********************************************	- 3.0 -  Helpers*********************************************/.hide {  display: none; }.center-align {  text-align: center; }section {  padding: 5em 0; }  section:before, section:after {    content: "";    display: table; }  section:after {    clear: both; }.pink {  background-color: #ed7887; }.brown {  background-color: #61393e; }.purple {  background-color: #853b46; }.blue {  background-color: #81a8b7; }.stripes {  background-image: url("/budgetsafe-co-uk/_img/stripe-pattern.png");  background-repeat: repeat; }.dots {  background-image: url("/budgetsafe-co-uk/_img/dot-pattern.png");  background-repeat: repeat; }.divider {  position: relative; }  .divider:after {    content: "";    height: 3px;    width: 80px;    display: inline-block;    background-color: #ed7887;    position: absolute;    bottom: -0.3em;    left: 0; }  .divider.divider-center {    text-align: center; }    .divider.divider-center:after {      left: 50%;      display: inline-block;      -webkit-transform: translateX(-50%);          -ms-transform: translateX(-50%);              transform: translateX(-50%); }ul.tick-list {  padding-left: 2em; }  ul.tick-list li {    margin: 0.4em 0;    position: relative;    line-height: 1.6; }    ul.tick-list li:before {      content: "";      background-image: url("/budgetsafe-co-uk/_img/svg/tick.svg");      background-repeat: no-repeat;      background-position: 50% 50%;      background-size: contain;      height: 1em;      width: 1em;      display: inline-block;      position: absolute;      top: 6px;      left: -2em; }  ul.tick-list.white li:before {    background-image: url("/budgetsafe-co-uk/_img/svg/tick-white.svg"); }/* ---------------------------------------------- *  Partial: buttons  This is a work-in-progress. Please deploy your own method or use my exaple below. \* ---------------------------------------------- *//* -----------------------------------------	8.0. Grid----------------------------------------- *//* -----------------------------------------	9.0. Typography----------------------------------------- *//* ---------------------------------------------- *  Partial: typography  I set all typographic styles here. First we list our variables such as fonts (maybe we're using some @font-face) and  additionally and maps we might want to use. Then we specificy the typographic scales we want.\* ---------------------------------------------- */@font-face {  font-family: 'RobotoRegular';  src: url("/budgetsafe-co-uk/_img/fonts/Roboto-Regular.eot");  src: url("/budgetsafe-co-uk/_img/fonts/Roboto-Regular.eot?#iefix") format("embedded-opentype"), url("/budgetsafe-co-uk/_img/fonts/Roboto-Regular.woff") format("woff"), url("/budgetsafe-co-uk/_img/fonts/Roboto-Regular.ttf") format("truetype"), url("/budgetsafe-co-uk/_img/fonts/Roboto-Regular-webfont.svg#RobotoRegular") format("svg");  font-weight: normal;  font-style: normal; }@font-face {  font-family: 'RobotoBold';  src: url("/budgetsafe-co-uk/_img/fonts/Roboto-Bold.eot");  src: url("/budgetsafe-co-uk/_img/fonts/Roboto-Bold.eot?#iefix") format("embedded-opentype"), url("/budgetsafe-co-uk/_img/fonts/Roboto-Bold.woff") format("woff"), url("/budgetsafe-co-uk/_img/fonts/Roboto-Bold.ttf") format("truetype"), url("/budgetsafe-co-uk/_img/fonts/Roboto-Bold-webfont.svg#RobotoBold") format("svg");  font-weight: normal;  font-style: normal; }@font-face {  font-family: 'RobotoMedium';  src: url("/budgetsafe-co-uk/_img/fonts/Roboto-Medium.eot");  src: url("/budgetsafe-co-uk/_img/fonts/Roboto-Medium.eot?#iefix") format("embedded-opentype"), url("/budgetsafe-co-uk/_img/fonts/Roboto-Medium.woff") format("woff"), url("/budgetsafe-co-uk/_img/fonts/Roboto-Medium.ttf") format("truetype"), url("/budgetsafe-co-uk/_img/fonts/Roboto-Medium-webfont.svg#RobotoMedium") format("svg");  font-weight: normal;  font-style: normal; }h1, h2, h3, h4, h5, h6 {  font-family: "RobotoMedium", Arial, "Helvetica Neue", Helvetica, sans-serif;  font-weight: normal;  line-height: 1.2;  margin-top: 0.75em;  margin-bottom: 0.5em;  color: #333; }  h1:first-child, h2:first-child, h3:first-child, h4:first-child, h5:first-child, h6:first-child {    margin-top: 0; }h1 {  font-family: "RobotoMedium", Arial, "Helvetica Neue", Helvetica, sans-serif;  font-size: 2.3328em; }  @media (min-width: 57.5em) {    h1 {      font-size: 2.79936em; } }h2 {  font-family: "RobotoMedium", Arial, "Helvetica Neue", Helvetica, sans-serif;  font-size: 1.62em; }  @media (min-width: 57.5em) {    h2 {      font-size: 1.944em; } }h3 {  font-family: "RobotoBold", Arial, "Helvetica Neue", Helvetica, sans-serif;  font-size: 1.62em; }h4 {  font-family: "RobotoMedium", Arial, "Helvetica Neue", Helvetica, sans-serif;  font-size: 1.35em; }h5 {  font-family: "RobotoRegular", Arial, "Helvetica Neue", Helvetica, sans-serif;  font-size: 1.125em; }h6 {  font-family: "RobotoMedium", Arial, "Helvetica Neue", Helvetica, sans-serif;  font-size: 0.9375em; }p {  font-size: 0.9375em;  font-family: "RobotoRegular", Arial, "Helvetica Neue", Helvetica, sans-serif;  line-height: 1.6;  margin: 0.65em 0 1em;  color: #333; }  p:last-child {    margin-bottom: 0; }.small-text {  font-size: 0.78125em;  font-family: "RobotoRegular", Arial, "Helvetica Neue", Helvetica, sans-serif; }/* -----------------------------------------	10.0. Nav----------------------------------------- *//* ---------------------------------------------- *  Partial: nav  All navigation styles here. This is sort that we can try keep things seperated and easy to maintain. You can  include all global navigation styles here. \* ---------------------------------------------- */.main-nav {  width: 100%;  margin: 1em 0;  text-align: center;  display: none; }  .stuck .main-nav {    float: left;    width: calc(100% - 11em);    margin: 0; }    .stuck .main-nav .nav {      line-height: 0;      text-align: center; }  @media (min-width: 62.5em) {    .main-nav {      display: block; } }  .main-nav .menu {    margin: auto;    display: inline-block; }    .main-nav .menu:before, .main-nav .menu:after {      content: "";      display: table; }    .main-nav .menu:after {      clear: both; }    .main-nav .menu li {      float: left;      position: relative; }      .main-nav .menu li a {        padding: 1.5em 0.75em;        font-size: 0.78125em;        text-transform: uppercase;        color: #333;        display: inline-block;        font-family: "RobotoMedium", Arial, "Helvetica Neue", Helvetica, sans-serif; }        .main-nav .menu li a:hover {          color: #ed7887; }        @media (min-width: 62.5em) {          .main-nav .menu li a {            font-size: 0.9375em; } }        @media (min-width: 71.875em) {          .main-nav .menu li a {            padding: 1.5em; } }        .main-nav .menu li a.linkActive {          color: #ed7887; }          .main-nav .menu li a.linkActive:after {            content: "";            position: absolute;            bottom: 0;            width: 100%;            height: 3px;            left: 0;            background-color: #ed7887; }      .main-nav .menu li:hover > ul {        display: block;        opacity: 1; }      .main-nav .menu li > ul {        display: none;        top: 100%;        min-width: 13em;        opacity: 0;        position: absolute;        box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.2);        border: 1px solid #e85467; }        .main-nav .menu li > ul > li {          background-color: #ed7887;          float: none;          border-bottom: 1px solid #f29ca7; }          .main-nav .menu li > ul > li:hover {            background-color: #fff; }            .main-nav .menu li > ul > li:hover a {              color: #ed7887; }          .main-nav .menu li > ul > li a {            padding: 1em 0.5em 1em 1em;            color: #fff;            font-size: 0.9375em;            text-align: left;            display: block; }  .stuck .main-nav {    margin-top: 0.85em; }    @media (min-width: 71.875em) {      .stuck .main-nav {        margin-top: 0.4em; } }    .stuck .main-nav li {      line-height: 1.6; }      .stuck .main-nav li a {        font-size: 12px;        padding: 1.5em .75em; }        @media (min-width: 78.75em) {          .stuck .main-nav li a {            font-size: 0.9375em; } }.mobile-nav {  position: fixed;  left: 0;  top: 0;  height: 100%;  width: calc(100% + 20px);  background: rgba(2, 23, 37, 0.96);  z-index: 12;  text-align: center;  padding: 50px 20px 50px 0;  -webkit-backface-visibility: hidden;          backface-visibility: hidden;  overflow: auto;  -webkit-overflow-scrolling: touch;  -webkit-transform: translateY(-100%);      -ms-transform: translateY(-100%);          transform: translateY(-100%);  -webkit-transition: -webkit-transform 0.4s ease-in-out;          transition: transform 0.4s ease-in-out; }  @media (min-width: 62.5em) {    .mobile-nav {      display: none; } }  .show-menu .mobile-nav {    -webkit-transform: translateY(0);        -ms-transform: translateY(0);            transform: translateY(0); }  .mobile-nav .nav {    margin: 4em 0; }    .mobile-nav .nav .menu > li a {      padding: 0.5em 0;      font-size: 1.125em;      display: block;      text-transform: uppercase;      font-family: "RobotoRegular", Arial, "Helvetica Neue", Helvetica, sans-serif;      color: #fff; }      @media (min-width: 40em) {        .mobile-nav .nav .menu > li a {          padding: 1em 0; } }      .mobile-nav .nav .menu > li a:hover {        color: #ed7887; }    .mobile-nav .nav .menu > li > ul {      display: block; }      .mobile-nav .nav .menu > li > ul > li a {        padding: 0.5em 0.5em;        color: #fff;        font-size: 0.9375em; }  .mobile-nav .mobile-mascot {    max-width: 4em;    display: inline-block;    opacity: 0.75; }/* -----------------------------------------	11.0. Header----------------------------------------- */header {  width: 100%;  position: relative;  z-index: 2; }  header.stuck {    position: fixed;    top: 0;    width: 100%;    z-index: 10;    background-color: #fff;    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);    -webkit-animation: fade-down 500ms both linear;            animation: fade-down 500ms both linear;    padding-left: 2em; }    @media (min-width: 71.875em) {      header.stuck {        padding: 0em 0.5em 0 6em; } }.logo {  width: 50%;  margin-top: 3em;  padding-left: 2em;  opacity: 1;  height: auto;  -webkit-transform: translateY(0);      -ms-transform: translateY(0);          transform: translateY(0);  -webkit-transition: -webkit-transform 300ms ease 500ms;          transition: transform 300ms ease 500ms; }  .logo img {    max-width: 100%; }  @media (min-width: 30em) {    .logo {      padding-left: 4em; } }  @media (min-width: 62.5em) {    .logo {      text-align: center;      width: 100%;      padding-left: 0; }      .logo img {        max-width: 500px; } }  .stuck .logo {    opacity: 0;    margin-top: 0;    height: 0;    -webkit-transform: translateY(-200%);        -ms-transform: translateY(-200%);            transform: translateY(-200%); }.mascot {  display: none;  float: left;  width: 8em;  padding: 1em 0;  margin-right: 2em; }  @media (min-width: 62.5em) {    .mascot {      padding: 0.8em 0; } }  @media (min-width: 71.875em) {    .mascot {      padding: 0.6em 0; } }  @media (min-width: 78.75em) {    .mascot {      padding: 1em 0; } }  .stuck .mascot {    display: block;    -webkit-animation: fade-left 300ms both linear 600ms;            animation: fade-left 300ms both linear 600ms; }.burger {  width: 55px;  position: absolute;  right: 2em;  top: 0em;  cursor: pointer;  padding: 10px;  -webkit-transition: all 300ms ease;          transition: all 300ms ease; }  .stuck .burger {    top: 0.5em;    right: 1em; }  .burger:before {    content: "menu";    position: absolute;    left: -40px;    top: 1em;    font-family: "RobotoBold", Arial, "Helvetica Neue", Helvetica, sans-serif;    text-transform: uppercase;    color: #888; }  @media (min-width: 40em) {    .burger {      top: 1em; } }  @media (min-width: 48em) {    .burger {      right: 4em;      top: 2em; } }  @media (min-width: 62.5em) {    .burger {      display: none; } }.sticky-wrapper {  position: relative; }.burger-brick {  height: 4px;  background: #ed7887;  margin-top: 6px;  -webkit-transition: 0.3s ease-out;          transition: 0.3s ease-out; }.show-menu .burger-brick:first-child {  -webkit-transform: rotate(405deg);      -ms-transform: rotate(405deg);          transform: rotate(405deg);  margin-top: 14px; }.show-menu .burger-brick:last-child {  -webkit-transform: rotate(-405deg);      -ms-transform: rotate(-405deg);          transform: rotate(-405deg);  margin-top: -14px; }.show-menu .middle {  -webkit-transform: scale(0);      -ms-transform: scale(0);          transform: scale(0); }.burger.mobile-nav__burger {  position: fixed;  top: 1em;  right: 2em;  z-index: 100;  opacity: 0; }  .show-menu .burger.mobile-nav__burger {    opacity: 1; }  .burger.mobile-nav__burger:before {    content: ""; }/* -----------------------------------------	12.0. Content----------------------------------------- */.hero {  background-image: url("/budgetsafe-co-uk/_img/stripe-pattern.png");  background-repeat: repeat;  background-color: #f8f8f8; }.services {  background-color: #fff;  text-align: center; }  .services h1 {    text-transform: uppercase; }.service-icons {  padding: 2em 2em 0; }  .service-icons:before, .service-icons:after {    content: "";    display: table; }  .service-icons:after {    clear: both; }  @media (min-width: 62.5em) {    .service-icons {      padding: 2em 6em 0; } }  .service-icons li {    width: 50%;    float: left; }    .service-icons li:hover {      background-color: #ed7887;      box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16); }      .service-icons li:hover .icon-img {        background-position: 0 -70px; }      .service-icons li:hover .service-title {        color: #fff; }    .in-view .service-icons li:nth-child(1) {      -webkit-animation: fade-up 500ms ease-in both 200ms;              animation: fade-up 500ms ease-in both 200ms; }    .in-view .service-icons li:nth-child(2) {      -webkit-animation: fade-up 500ms ease-in both 400ms;              animation: fade-up 500ms ease-in both 400ms; }    .in-view .service-icons li:nth-child(3) {      -webkit-animation: fade-up 500ms ease-in both 600ms;              animation: fade-up 500ms ease-in both 600ms; }    .in-view .service-icons li:nth-child(4) {      -webkit-animation: fade-up 500ms ease-in both 800ms;              animation: fade-up 500ms ease-in both 800ms; }    .in-view .service-icons li:nth-child(5) {      -webkit-animation: fade-up 500ms ease-in both 1000ms;              animation: fade-up 500ms ease-in both 1000ms; }    .in-view .service-icons li:nth-child(6) {      -webkit-animation: fade-up 500ms ease-in both 1200ms;              animation: fade-up 500ms ease-in both 1200ms; }    .in-view .service-icons li:nth-child(7) {      -webkit-animation: fade-up 500ms ease-in both 1400ms;              animation: fade-up 500ms ease-in both 1400ms; }    .in-view .service-icons li:nth-child(8) {      -webkit-animation: fade-up 500ms ease-in both 1600ms;              animation: fade-up 500ms ease-in both 1600ms; }    @media (min-width: 25em) {      .service-icons li {        width: 33%; } }    @media (min-width: 40em) {      .service-icons li {        width: 25%; } }    @media (min-width: 71.875em) {      .service-icons li {        width: 12.5%; } }.service-title {  text-transform: uppercase;  font-size: 1.125em;  line-height: 1.2;  width: 100%;  padding: 0 1em 1.5em;  font-family: "RobotoBold", Arial, "Helvetica Neue", Helvetica, sans-serif;  display: block; }  @media (min-width: 25em) {    .service-title {      padding: 0 1em 2.5em; } }.icon-img {  height: 70px;  width: 71px;  margin: 1.5em auto 1.5em;  display: inline-block;  overflow: hidden;  background-size: 71px 140px;  background-position: 0 0; }  @media (min-width: 25em) {    .icon-img {      margin: 2.5em auto 1.5em; } }.home-icon {  background-image: url("/budgetsafe-co-uk/_img/home-icon.png"); }.managed-icon {  background-image: url("/budgetsafe-co-uk/_img/calc-icon.png"); }.support-icon {  background-image: url("/budgetsafe-co-uk/_img/handshake-icon.png"); }.training-icon {  background-image: url("/budgetsafe-co-uk/_img/bulb-icon.png"); }.payroll-icon {  background-image: url("/budgetsafe-co-uk/_img/calendar-icon.png"); }.pricing-icon {  background-image: url("/budgetsafe-co-uk/_img/price-icon.png"); }.work-icon {  background-image: url("/budgetsafe-co-uk/_img/border-icon.png"); }.contact-icon {  background-image: url("/budgetsafe-co-uk/_img/phone-icon.png"); }@-webkit-keyframes hero-text {  0% {    opacity: 0;    -webkit-transform: translateY(-100%);            transform: translateY(-100%); }  50% {    opacity: 0; }  100% {    opacity: 1;    -webkit-transform: translateY(0);            transform: translateY(0); } }@keyframes hero-text {  0% {    opacity: 0;    -webkit-transform: translateY(-100%);            transform: translateY(-100%); }  50% {    opacity: 0; }  100% {    opacity: 1;    -webkit-transform: translateY(0);            transform: translateY(0); } }@-webkit-keyframes fade-down {  0% {    opacity: 0;    -webkit-transform: translateY(-50%);            transform: translateY(-50%); }  50% {    opacity: 0; }  100% {    opacity: 1;    -webkit-transform: translateY(0);            transform: translateY(0); } }@keyframes fade-down {  0% {    opacity: 0;    -webkit-transform: translateY(-50%);            transform: translateY(-50%); }  50% {    opacity: 0; }  100% {    opacity: 1;    -webkit-transform: translateY(0);            transform: translateY(0); } }@-webkit-keyframes fade-right {  0% {    opacity: 0;    -webkit-transform: translateX(120%);            transform: translateX(120%); }  30% {    opacity: 0; }  100% {    opacity: 1;    -webkit-transform: translateY(0);            transform: translateY(0); } }@keyframes fade-right {  0% {    opacity: 0;    -webkit-transform: translateX(120%);            transform: translateX(120%); }  30% {    opacity: 0; }  100% {    opacity: 1;    -webkit-transform: translateY(0);            transform: translateY(0); } }@-webkit-keyframes fade-left {  0% {    opacity: 0;    -webkit-transform: translateX(-120%);            transform: translateX(-120%); }  30% {    opacity: 0; }  100% {    opacity: 1;    -webkit-transform: translateY(0);            transform: translateY(0); } }@keyframes fade-left {  0% {    opacity: 0;    -webkit-transform: translateX(-120%);            transform: translateX(-120%); }  30% {    opacity: 0; }  100% {    opacity: 1;    -webkit-transform: translateY(0);            transform: translateY(0); } }@-webkit-keyframes image-grow {  0% {    opacity: 0;    -webkit-transform: scale(0);            transform: scale(0); }  30% {    opacity: 0; }  100% {    opacity: 1;    -webkit-transform: scale(1);            transform: scale(1); } }@keyframes image-grow {  0% {    opacity: 0;    -webkit-transform: scale(0);            transform: scale(0); }  30% {    opacity: 0; }  100% {    opacity: 1;    -webkit-transform: scale(1);            transform: scale(1); } }@-webkit-keyframes fade-up {  0% {    opacity: 0;    -webkit-transform: translateY(120%);            transform: translateY(120%); }  30% {    opacity: 0; }  100% {    opacity: 1;    -webkit-transform: translateY(0);            transform: translateY(0); } }@keyframes fade-up {  0% {    opacity: 0;    -webkit-transform: translateY(120%);            transform: translateY(120%); }  30% {    opacity: 0; }  100% {    opacity: 1;    -webkit-transform: translateY(0);            transform: translateY(0); } }.hero {  padding: 0; }  .hero__wrap {    padding: 0 3em;    width: 100%;    line-height: 0;    position: relative;    overflow: hidden;    bottom: 0;    text-align: center; }    .hero__wrap:before, .hero__wrap:after {      content: "";      display: table; }    .hero__wrap:after {      clear: both; }    @media (min-width: 50em) {      .hero__wrap {        text-align: left; } }    @media (min-width: 62.5em) {      .hero__wrap {        padding: 0 3em; } }    @media (min-width: 75em) {      .hero__wrap {        padding: 0 5em; } }  .hero__text {    padding: 4em 0em 0em;    position: relative;    -webkit-animation: hero-text 1500ms ease-out both 500ms;            animation: hero-text 1500ms ease-out both 500ms; }    .hero__text h1 {      font-size: 1.62em;      color: #ed7887;      line-height: 1.4;      margin-bottom: 0; }      @media (min-width: 50em) {        .hero__text h1 {          font-size: 1.62em;          line-height: 1.4; } }      @media (min-width: 60em) {        .hero__text h1 {          font-size: 1.62em;          line-height: 1.4; } }      @media (min-width: 78.75em) {        .hero__text h1 {          font-size: 1.944em;          line-height: 1.4; } }    @media (min-width: 40em) {      .hero__text {        padding: 4em 2em 0em 2em; } }    @media (min-width: 50em) {      .hero__text {        padding: 7em 2em 0em 0em;        width: 50%;        float: left; }        .hero__text h1 {          max-width: 19em; } }    @media (min-width: 71.875em) {      .hero__text {        bottom: 2.5em;        padding: 10em 2em 0em 0em; } }  .hero__image {    padding: 3em 0 0 2em;    position: relative;    bottom: -0.1em;    line-height: 0;    -webkit-animation: fade-right 800ms ease-out both 1200ms;            animation: fade-right 800ms ease-out both 1200ms; }    .hero__image img {      line-height: 0;      max-width: 100%; }      @media (min-width: 25em) {        .hero__image img {          max-width: 20em; } }      @media (min-width: 50em) {        .hero__image img {          max-width: 100%; } }    @media (min-width: 50em) {      .hero__image {        width: 50%;        float: right;        margin-right: 0;        padding: 7em 0 0 2em; } }    @media (min-width: 60em) {      .hero__image {        padding: 2em 0 0 2em; } }.panel {  width: 100%;  overflow: hidden; }  .panel:before, .panel:after {    content: "";    display: table; }  .panel:after {    clear: both; }/***********************************************************************************************table / 50-50 layout***********************************************************************************************/.split-panel {  padding: 0;  display: table;  width: 100%; }  .previewFrame .split-panel {    min-height: 0; }  @media (min-width: 48em) {    .split-panel.reverse-panel .split-panel__image {      left: 50%; } }  @media (min-width: 62.5em) {    .split-panel.reverse-panel .split-panel__image {      left: 42%; } }  @media (min-width: 48em) {    .split-panel.reverse-panel .split-panel__content {      right: 49.9%; } }  @media (min-width: 62.5em) {    .split-panel.reverse-panel .split-panel__content {      right: 57.95%; } }.split-panel__cell {  position: relative; }  @media (min-width: 48em) {    .split-panel__cell {      display: table-cell;      vertical-align: middle; } }.split-panel__image {  height: 20em;  background-size: cover;  background-position: center; }  .touchevents .split-panel__image {    opacity: 1; }  .no-touchevents .split-panel__image {    opacity: 0; }  .in-view .split-panel__image {    -webkit-animation: image-grow 800ms cubic-bezier(0.17, 0.67, 0.1, 1.23) both 300ms;            animation: image-grow 800ms cubic-bezier(0.17, 0.67, 0.1, 1.23) both 300ms; }  @media (min-width: 48em) {    .split-panel__image {      width: 49.9%;      height: auto; } }  @media (min-width: 62.5em) {    .split-panel__image {      width: 57.95%; } }.split-panel__inner {  padding: 6em 3em 4em;  max-width: 45em;  position: relative; }  .split-panel__inner h5:first-child:before {    position: absolute;    top: -2em;    left: 0;    content: "";    width: 80px;    height: 3px;    display: inline-block;    background-color: #fff; }  @media (min-width: 62.5em) {    .split-panel__inner {      padding: 8em 3em 6em 3em; } }  @media (min-width: 75em) {    .split-panel__inner {      padding: 9em 5em 7em 5em; } }.split-panel__content {  line-height: 1.6;  position: relative; }  @media (min-width: 48em) {    .split-panel__content {      width: 50%;      right: 0; } }  @media (min-width: 62.5em) {    .split-panel__content {      width: 43%;      right: 0; } }  .touchevents .split-panel__content {    opacity: 1; }  .no-touchevents .split-panel__content {    opacity: 0; }  .in-view .split-panel__content {    -webkit-animation: fade-left 800ms ease-in both 300ms;            animation: fade-left 800ms ease-in both 300ms; }  .split-panel__content h1, .split-panel__content h2, .split-panel__content h3, .split-panel__content h4, .split-panel__content h5, .split-panel__content h6, .split-panel__content p, .split-panel__content li, .split-panel__content a {    font-family: "RobotoRegular", Arial, "Helvetica Neue", Helvetica, sans-serif;    color: #fff;    position: relative;    line-height: 1.6; }    @media (min-width: 62.5em) {      .split-panel__content h1, .split-panel__content h2, .split-panel__content h3, .split-panel__content h4, .split-panel__content h5, .split-panel__content h6, .split-panel__content p, .split-panel__content li, .split-panel__content a {        line-height: 1.8; } }    @media (min-width: 75em) {      .split-panel__content h1, .split-panel__content h2, .split-panel__content h3, .split-panel__content h4, .split-panel__content h5, .split-panel__content h6, .split-panel__content p, .split-panel__content li, .split-panel__content a {        line-height: 2; } }  .split-panel__content h1, .split-panel__content h2, .split-panel__content h3, .split-panel__content h4 {    font-family: "RobotoMedium", Arial, "Helvetica Neue", Helvetica, sans-serif; }  .split-panel__content a {    text-decoration: underline;    font-family: "RobotoMedium", Arial, "Helvetica Neue", Helvetica, sans-serif;    line-height: 1.6; }    .split-panel__content a:hover {      color: rgba(255, 255, 255, 0.55); }  .split-panel__content:after {    position: absolute;    top: -50px;    -webkit-transform: translateX(-50%);        -ms-transform: translateX(-50%);            transform: translateX(-50%);    left: 50%;    border: 25px solid transparent;    border-bottom-color: #ed7887;    content: "";    display: inline-block; }    @media (min-width: 48em) {      .split-panel__content:after {        top: 50%;        left: auto;        -webkit-transform: translateY(-50%);            -ms-transform: translateY(-50%);                transform: translateY(-50%);        right: -48px;        border: 25px solid transparent;        border-left-color: #ed7887; } }  .split-panel__content.pink:after {    border-color: transparent;    border-bottom-color: #ed7887; }    @media (min-width: 48em) {      .split-panel__content.pink:after {        border-color: transparent;        border-left-color: #ed7887; } }  .split-panel__content.purple:after {    border-color: transparent;    border-bottom-color: #853b46; }    @media (min-width: 48em) {      .split-panel__content.purple:after {        border-color: transparent;        border-left-color: #853b46; } }  .split-panel__content.blue:after {    border-color: transparent;    border-bottom-color: #81a8b7; }    @media (min-width: 48em) {      .split-panel__content.blue:after {        border-color: transparent;        border-left-color: #81a8b7; } }  .split-panel__content.brown:after {    border-color: transparent;    border-bottom-color: #61393e; }    @media (min-width: 48em) {      .split-panel__content.brown:after {        border-color: transparent;        border-left-color: #61393e; } }  .in-view .split-panel__content.right {    -webkit-animation: fade-right 800ms ease-in both 300ms;            animation: fade-right 800ms ease-in both 300ms; }  @media (min-width: 48em) {    .split-panel__content.right:after {      top: 50%;      left: -48px;      -webkit-transform: translateY(-50%);          -ms-transform: translateY(-50%);              transform: translateY(-50%);      right: auto;      border: 25px solid transparent;      border-right-color: #ed7887; } }  .split-panel__content.right.pink:after {    border-bottom-color: #ed7887;    border-right-color: transparent; }    @media (min-width: 48em) {      .split-panel__content.right.pink:after {        border-bottom-color: transparent;        border-right-color: #ed7887; } }  .split-panel__content.right.purple:after {    border-bottom-color: #853b46;    border-right-color: transparent; }    @media (min-width: 48em) {      .split-panel__content.right.purple:after {        border-bottom-color: transparent;        border-right-color: #853b46; } }  .split-panel__content.right.blue:after {    border-bottom-color: #81a8b7;    border-right-color: transparent; }    @media (min-width: 48em) {      .split-panel__content.right.blue:after {        border-bottom-color: transparent;        border-right-color: #81a8b7; } }  .split-panel__content.right.brown:after {    border-bottom-color: #61393e;    border-right-color: transparent; }    @media (min-width: 48em) {      .split-panel__content.right.brown:after {        border-bottom-color: transparent;        border-right-color: #61393e; } }.full-width {  padding: 7em 0 5em; }  @media (min-width: 50em) {    .full-width {      padding: 9em 0 8em; } }  .full-width .content-wrap {    width: 88%;    max-width: 55em;    margin: auto;    color: #fff; }    .full-width .content-wrap h1, .full-width .content-wrap h2, .full-width .content-wrap h3, .full-width .content-wrap h4, .full-width .content-wrap h5, .full-width .content-wrap h6, .full-width .content-wrap p, .full-width .content-wrap a {      color: #fff; }    .full-width .content-wrap a {      text-decoration: underline; }      .full-width .content-wrap a:hover {        color: rgba(255, 255, 255, 0.55); }    .full-width .content-wrap h2 {      margin-bottom: 1.5em;      position: relative; }    .full-width .content-wrap h2:first-child:before {      position: absolute;      top: -1em;      left: 0;      content: "";      width: 80px;      height: 3px;      display: inline-block;      background-color: #fff; }    .full-width .content-wrap .tick-list {      margin: 1em 0 2em; }      @media (min-width: 50em) {        .full-width .content-wrap .tick-list {          padding-left: 0;          margin: 1em 0 2em; }          .full-width .content-wrap .tick-list li {            width: 40%;            margin: 0.5em 2.5% 0.5em 40px;            display: inline-block;            vertical-align: top; } }.contact h4 {  margin-bottom: 0; }.contact p {  margin: 0; }.map {  padding: 0; }#contact-map {  height: 20em;  width: 100%; }  @media (min-width: 40em) {    #contact-map {      height: 30em; } }.gm-style-iw * {  display: block;  width: 100%; }.gm-style-iw h4, .gm-style-iw p {  margin: 0;  padding: 0; }.gm-style-iw a {  color: #4272db; }#s694723 .hero__wrap {  padding-bottom: 10em;  background-image: url("/budgetsafe-co-uk/_img/floating-pig.png");  background-repeat: no-repeat;  background-position: bottom right;  background-size: 100% auto; }  @media (min-width: 30em) {    #s694723 .hero__wrap {      padding-bottom: 13em; } }  @media (min-width: 40em) {    #s694723 .hero__wrap {      padding-bottom: 16em; } }  @media (min-width: 50em) {    #s694723 .hero__wrap {      padding-bottom: 10em; } }  @media (min-width: 115.625em) {    #s694723 .hero__wrap {      padding-bottom: 20em; } }  #s694723 .hero__wrap .hero__image {    display: none; }#s694723 .panel1 .split-panel__image {  background-image: url("/budgetsafe-co-uk/_img/managed-account-img1.jpg"); }#s694723 .panel2 .split-panel__image {  background-image: url("/budgetsafe-co-uk/_img/managed-account-img2.jpg"); }#s694724 .hero {  background-color: #caf2f7; }#s694724 .hero__image {  text-align: center;  padding-left: 0; }  @media (min-width: 50em) {    #s694724 .hero__image {      padding-left: 2em; } }  #s694724 .hero__image img {    max-width: 13em; }    @media (min-width: 25em) {      #s694724 .hero__image img {        max-width: 13em; } }    @media (min-width: 50em) {      #s694724 .hero__image img {        max-width: 18em; } }    @media (min-width: 71.875em) {      #s694724 .hero__image img {        max-width: 20em; } }    @media (min-width: 115.625em) {      #s694724 .hero__image img {        max-width: 23em; } }@media (min-width: 50em) {  #s694724 .hero__text {    padding: 9em 2em 0em 0em; } }#s694724 .panel1 .split-panel__image {  background-image: url("/budgetsafe-co-uk/_img/support-services-1.jpg"); }#s694724 .panel2 .split-panel__image {  background-image: url("/budgetsafe-co-uk/_img/support-services-2.jpg"); }#s694724 .panel3 .split-panel__image {  background-image: url("/budgetsafe-co-uk/_img/support-services-3.jpg"); }#s694725 .panel1 .split-panel__image {  background-image: url("/budgetsafe-co-uk/_img/training-1.jpg"); }#s694725 .panel2 .split-panel__image {  background-image: url("/budgetsafe-co-uk/_img/training-2.jpg"); }#s694727 .panel1 .split-panel__image {  background-image: url("/budgetsafe-co-uk/_img/payroll-services-1.jpg"); }#s694727 .panel2 .split-panel__image {  background-image: url("/budgetsafe-co-uk/_img/payroll-services-2.jpg"); }#s694729 .panel1 .split-panel__image {  background-image: url("/budgetsafe-co-uk/_img/work-with-us-1.jpg"); }#s694729 .panel2 .split-panel__image {  background-image: url("/budgetsafe-co-uk/_img/work-with-us-2.jpg"); }#s694725 .hero {  background-color: #eeeda0; }#s694725 .hero__image {  text-align: right;  right: -2em; }  @media (min-width: 50em) {    #s694725 .hero__image {      right: 0em; } }@media (min-width: 50em) {  #s694725 .hero__wrap {    padding-right: 0; } }#s694729 .hero {  background-color: #edc8ca; }#s694729 .hero__image {  text-align: center; }  #s694729 .hero__image img {    max-width: 13em; }    @media (min-width: 25em) {      #s694729 .hero__image img {        max-width: 13em; } }    @media (min-width: 50em) {      #s694729 .hero__image img {        max-width: 16em; } }    @media (min-width: 71.875em) {      #s694729 .hero__image img {        max-width: 18em; } }@media (min-width: 50em) {  #s694729 .hero__text {    padding: 7em 2em 0em 0em; } }@media (min-width: 60em) {  #s694729 .hero__text {    padding: 5em 2em 0em 0em; } }@media (min-width: 71.875em) {  #s694729 .hero__text {    padding: 8em 2em 0em 0em; } }#s694730 .contact .split-panel__image {  background-image: url("/budgetsafe-co-uk/_img/contact-img1.jpg"); }#s694730 .contact2 .split-panel__image {  background-image: url("/budgetsafe-co-uk/_img/contact-img2.jpg");  background-position: center right; }#s694728 .hero {  background-color: #cedbe6; }#s694728 .hero__image {  padding: 3em 0 0 2em;  text-align: right;  right: -2em; }  @media (min-width: 50em) {    #s694728 .hero__image {      right: 0em; } }@media (min-width: 50em) {  #s694728 .hero__wrap {    padding-right: 0; } }#s694730 .hero {  background-color: #d0f7d3; }#s694730 .hero__image {  padding: 0; }  @media (min-width: 50em) {    #s694730 .hero__image {      padding: 0em 0 0 0em; }      #s694730 .hero__image img {        max-width: 90%; } }  @media (min-width: 71.875em) {    #s694730 .hero__image img {      max-width: 100%; } }@media (min-width: 50em) {  #s694730 .hero__text {    padding: 5em 2em 0em 0em; } }@media (min-width: 71.875em) {  #s694730 .hero__text {    padding: 11em 2em 0em 0em; } }#s694727 .hero {  background-color: #1e1b28; }#s694727 .hero__wrap {  background-image: url("/budgetsafe-co-uk/_img/payroll-pig.png");  background-position: bottom center;  background-size: 80% auto;  padding-bottom: 11em; }  @media (min-width: 25em) {    #s694727 .hero__wrap {      padding-bottom: 16em; } }  @media (min-width: 40em) {    #s694727 .hero__wrap {      background-size: 55% auto;      padding-bottom: 17em; } }  @media (min-width: 50em) {    #s694727 .hero__wrap {      background-position: bottom right;      background-size: 60% auto;      padding-right: 1em;      padding-bottom: 8em; } }  @media (min-width: 71.875em) {    #s694727 .hero__wrap {      padding-bottom: 10em; } }  @media (min-width: 115.625em) {    #s694727 .hero__wrap {      background-position: bottom right;      background-size: auto 90%;      padding-right: 1em; } }#s694727 .hero__image {  display: none; }#s694727 .hero__text {  bottom: 0; }  @media (min-width: 50em) {    #s694727 .hero__text {      padding: 7em 2em 0em 0em;      width: 50%;      float: left; }      #s694727 .hero__text h1 {        max-width: 19em; } }  @media (min-width: 62.5em) {    #s694727 .hero__text {      padding: 4em 2em 0em 0em; } }  @media (min-width: 71.875em) {    #s694727 .hero__text {      padding: 8em 2em 0em 0em; } }  @media (min-width: 115.625em) {    #s694727 .hero__text {      padding: 10em 2em 0em 0em; } }#s694727 .main-nav .menu li a {  color: #fff; }  #s694727 .main-nav .menu li a:hover {    color: #ed7887; }  #s694727 .main-nav .menu li a.linkActive {    color: #ed7887; }#s694727 .stuck .main-nav .menu li a {  color: #333; }  #s694727 .stuck .main-nav .menu li a:hover {    color: #ed7887; }  #s694727 .stuck .main-nav .menu li a.linkActive {    color: #ed7887; }/*! * animsition v4.0.1 * A simple and easy jQuery plugin for CSS animated page transitions. * http://blivesta.github.io/animsition * License : MIT * Author : blivesta (http://blivesta.com/) */.animsition,.animsition-overlay {  position: relative;  opacity: 0;  -webkit-animation-fill-mode: both;  animation-fill-mode: both; }/** * overlay option */.animsition-overlay-slide {  position: fixed;  z-index: 1;  width: 100%;  height: 100%;  background-color: #ddd; }/* loading option */.animsition-loading,.animsition-loading:after {  width: 32px;  height: 32px;  position: fixed;  top: 50%;  left: 50%;  margin-top: -16px;  margin-left: -16px;  border-radius: 50%;  z-index: 100; }.animsition-loading {  background-color: transparent;  border-top: 5px solid rgba(0, 0, 0, 0.2);  border-right: 5px solid rgba(0, 0, 0, 0.2);  border-bottom: 5px solid rgba(0, 0, 0, 0.2);  border-left: 5px solid #eee;  -webkit-transform: translateZ(0);  transform: translateZ(0);  -webkit-animation-iteration-count: infinite;  animation-iteration-count: infinite;  -webkit-animation-timing-function: linear;  animation-timing-function: linear;  -webkit-animation-duration: .8s;  animation-duration: .8s;  -webkit-animation-name: animsition-loading;  animation-name: animsition-loading; }@-webkit-keyframes animsition-loading {  0% {    -webkit-transform: rotate(0deg);    transform: rotate(0deg); }  100% {    -webkit-transform: rotate(360deg);    transform: rotate(360deg); } }@keyframes animsition-loading {  0% {    -webkit-transform: rotate(0deg);    transform: rotate(0deg); }  100% {    -webkit-transform: rotate(360deg);    transform: rotate(360deg); } }@-webkit-keyframes fade-in {  0% {    opacity: 0; }  100% {    opacity: 1; } }@keyframes fade-in {  0% {    opacity: 0; }  100% {    opacity: 1; } }.fade-in {  -webkit-animation-name: fade-in;  animation-name: fade-in; }@-webkit-keyframes fade-out {  0% {    opacity: 1; }  100% {    opacity: 0; } }@keyframes fade-out {  0% {    opacity: 1; }  100% {    opacity: 0; } }.fade-out {  -webkit-animation-name: fade-out;  animation-name: fade-out; }@-webkit-keyframes fade-in-up {  0% {    -webkit-transform: translateY(500px);    transform: translateY(500px);    opacity: 0; }  100% {    -webkit-transform: translateY(0);    transform: translateY(0);    opacity: 1; } }@keyframes fade-in-up {  0% {    -webkit-transform: translateY(500px);    transform: translateY(500px);    opacity: 0; }  100% {    -webkit-transform: translateY(0);    transform: translateY(0);    opacity: 1; } }.fade-in-up {  -webkit-animation-name: fade-in-up;  animation-name: fade-in-up; }@-webkit-keyframes fade-out-up {  0% {    -webkit-transform: translateY(0);    transform: translateY(0);    opacity: 1; }  100% {    -webkit-transform: translateY(-500px);    transform: translateY(-500px);    opacity: 0; } }@keyframes fade-out-up {  0% {    -webkit-transform: translateY(0);    transform: translateY(0);    opacity: 1; }  100% {    -webkit-transform: translateY(-500px);    transform: translateY(-500px);    opacity: 0; } }.fade-out-up {  -webkit-animation-name: fade-out-up;  animation-name: fade-out-up; }@-webkit-keyframes fade-in-up-sm {  0% {    -webkit-transform: translateY(100px);    transform: translateY(100px);    opacity: 0; }  100% {    -webkit-transform: translateY(0);    transform: translateY(0);    opacity: 1; } }@keyframes fade-in-up-sm {  0% {    -webkit-transform: translateY(100px);    transform: translateY(100px);    opacity: 0; }  100% {    -webkit-transform: translateY(0);    transform: translateY(0);    opacity: 1; } }.fade-in-up-sm {  -webkit-animation-name: fade-in-up-sm;  animation-name: fade-in-up-sm; }@-webkit-keyframes fade-out-up-sm {  0% {    -webkit-transform: translateY(0);    transform: translateY(0);    opacity: 1; }  100% {    -webkit-transform: translateY(-100px);    transform: translateY(-100px);    opacity: 0; } }@keyframes fade-out-up-sm {  0% {    -webkit-transform: translateY(0);    transform: translateY(0);    opacity: 1; }  100% {    -webkit-transform: translateY(-100px);    transform: translateY(-100px);    opacity: 0; } }.fade-out-up-sm {  -webkit-animation-name: fade-out-up-sm;  animation-name: fade-out-up-sm; }@-webkit-keyframes fade-in-up-lg {  0% {    -webkit-transform: translateY(1000px);    transform: translateY(1000px);    opacity: 0; }  100% {    -webkit-transform: translateY(0);    transform: translateY(0);    opacity: 1; } }@keyframes fade-in-up-lg {  0% {    -webkit-transform: translateY(1000px);    transform: translateY(1000px);    opacity: 0; }  100% {    -webkit-transform: translateY(0);    transform: translateY(0);    opacity: 1; } }.fade-in-up-lg {  -webkit-animation-name: fade-in-up-lg;  animation-name: fade-in-up-lg; }@-webkit-keyframes fade-out-up-lg {  0% {    -webkit-transform: translateY(0);    transform: translateY(0);    opacity: 1; }  100% {    -webkit-transform: translateY(-1000px);    transform: translateY(-1000px);    opacity: 0; } }@keyframes fade-out-up-lg {  0% {    -webkit-transform: translateY(0);    transform: translateY(0);    opacity: 1; }  100% {    -webkit-transform: translateY(-1000px);    transform: translateY(-1000px);    opacity: 0; } }.fade-out-up-lg {  -webkit-animation-name: fade-out-up-lg;  animation-name: fade-out-up-lg; }@-webkit-keyframes fade-in-down {  0% {    -webkit-transform: translateY(-500px);    transform: translateY(-500px);    opacity: 0; }  100% {    -webkit-transform: translateY(0);    transform: translateY(0);    opacity: 1; } }@keyframes fade-in-down {  0% {    -webkit-transform: translateY(-500px);    transform: translateY(-500px);    opacity: 0; }  100% {    -webkit-transform: translateY(0);    transform: translateY(0);    opacity: 1; } }.fade-in-down {  -webkit-animation-name: fade-in-down;  animation-name: fade-in-down; }@-webkit-keyframes fade-out-down {  0% {    -webkit-transform: translateY(0);    transform: translateY(0);    opacity: 1; }  100% {    -webkit-transform: translateY(500px);    transform: translateY(500px);    opacity: 0; } }@keyframes fade-out-down {  0% {    -webkit-transform: translateY(0);    transform: translateY(0);    opacity: 1; }  100% {    -webkit-transform: translateY(500px);    transform: translateY(500px);    opacity: 0; } }.fade-out-down {  -webkit-animation-name: fade-out-down;  animation-name: fade-out-down; }@-webkit-keyframes fade-in-down-sm {  0% {    -webkit-transform: translateY(-100px);    transform: translateY(-100px);    opacity: 0; }  100% {    -webkit-transform: translateY(0);    transform: translateY(0);    opacity: 1; } }@keyframes fade-in-down-sm {  0% {    -webkit-transform: translateY(-100px);    transform: translateY(-100px);    opacity: 0; }  100% {    -webkit-transform: translateY(0);    transform: translateY(0);    opacity: 1; } }.fade-in-down-sm {  -webkit-animation-name: fade-in-down-sm;  animation-name: fade-in-down-sm; }@-webkit-keyframes fade-out-down-sm {  0% {    -webkit-transform: translateY(0);    transform: translateY(0);    opacity: 1; }  100% {    -webkit-transform: translateY(100px);    transform: translateY(100px);    opacity: 0; } }@keyframes fade-out-down-sm {  0% {    -webkit-transform: translateY(0);    transform: translateY(0);    opacity: 1; }  100% {    -webkit-transform: translateY(100px);    transform: translateY(100px);    opacity: 0; } }.fade-out-down-sm {  -webkit-animation-name: fade-out-down-sm;  animation-name: fade-out-down-sm; }@-webkit-keyframes fade-in-down-lg {  0% {    -webkit-transform: translateY(-1000px);    transform: translateY(-1000px);    opacity: 0; }  100% {    -webkit-transform: translateY(0);    transform: translateY(0);    opacity: 1; } }@keyframes fade-in-down-lg {  0% {    -webkit-transform: translateY(-1000px);    transform: translateY(-1000px);    opacity: 0; }  100% {    -webkit-transform: translateY(0);    transform: translateY(0);    opacity: 1; } }.fade-in-down-lg {  -webkit-animation-name: fade-in-down;  animation-name: fade-in-down; }@-webkit-keyframes fade-out-down-lg {  0% {    -webkit-transform: translateY(0);    transform: translateY(0);    opacity: 1; }  100% {    -webkit-transform: translateY(1000px);    transform: translateY(1000px);    opacity: 0; } }@keyframes fade-out-down-lg {  0% {    -webkit-transform: translateY(0);    transform: translateY(0);    opacity: 1; }  100% {    -webkit-transform: translateY(1000px);    transform: translateY(1000px);    opacity: 0; } }.fade-out-down-lg {  -webkit-animation-name: fade-out-down-lg;  animation-name: fade-out-down-lg; }@-webkit-keyframes fade-in-left {  0% {    -webkit-transform: translateX(-500px);    transform: translateX(-500px);    opacity: 0; }  100% {    -webkit-transform: translateX(0);    transform: translateX(0);    opacity: 1; } }@keyframes fade-in-left {  0% {    -webkit-transform: translateX(-500px);    transform: translateX(-500px);    opacity: 0; }  100% {    -webkit-transform: translateX(0);    transform: translateX(0);    opacity: 1; } }.fade-in-left {  -webkit-animation-name: fade-in-left;  animation-name: fade-in-left; }@-webkit-keyframes fade-out-left {  0% {    -webkit-transform: translateX(0);    transform: translateX(0);    opacity: 1; }  100% {    -webkit-transform: translateX(-500px);    transform: translateX(-500px);    opacity: 0; } }@keyframes fade-out-left {  0% {    -webkit-transform: translateX(0);    transform: translateX(0);    opacity: 1; }  100% {    -webkit-transform: translateX(-500px);    transform: translateX(-500px);    opacity: 0; } }.fade-out-left {  -webkit-animation-name: fade-out-left;  animation-name: fade-out-left; }@-webkit-keyframes fade-in-left-sm {  0% {    -webkit-transform: translateX(-100px);    transform: translateX(-100px);    opacity: 0; }  100% {    -webkit-transform: translateX(0);    transform: translateX(0);    opacity: 1; } }@keyframes fade-in-left-sm {  0% {    -webkit-transform: translateX(-100px);    transform: translateX(-100px);    opacity: 0; }  100% {    -webkit-transform: translateX(0);    transform: translateX(0);    opacity: 1; } }.fade-in-left-sm {  -webkit-animation-name: fade-in-left-sm;  animation-name: fade-in-left-sm; }@-webkit-keyframes fade-out-left-sm {  0% {    -webkit-transform: translateX(0);    transform: translateX(0);    opacity: 1; }  100% {    -webkit-transform: translateX(-100px);    transform: translateX(-100px);    opacity: 0; } }@keyframes fade-out-left-sm {  0% {    -webkit-transform: translateX(0);    transform: translateX(0);    opacity: 1; }  100% {    -webkit-transform: translateX(-100px);    transform: translateX(-100px);    opacity: 0; } }.fade-out-left-sm {  -webkit-animation-name: fade-out-left-sm;  animation-name: fade-out-left-sm; }@-webkit-keyframes fade-in-left-lg {  0% {    -webkit-transform: translateX(-1500px);    transform: translateX(-1500px);    opacity: 0; }  100% {    -webkit-transform: translateX(0);    transform: translateX(0);    opacity: 1; } }@keyframes fade-in-left-lg {  0% {    -webkit-transform: translateX(-1500px);    transform: translateX(-1500px);    opacity: 0; }  100% {    -webkit-transform: translateX(0);    transform: translateX(0);    opacity: 1; } }.fade-in-left-lg {  -webkit-animation-name: fade-in-left-lg;  animation-name: fade-in-left-lg; }@-webkit-keyframes fade-out-left-lg {  0% {    -webkit-transform: translateX(0);    transform: translateX(0);    opacity: 1; }  100% {    -webkit-transform: translateX(-1500px);    transform: translateX(-1500px);    opacity: 0; } }@keyframes fade-out-left-lg {  0% {    -webkit-transform: translateX(0);    transform: translateX(0);    opacity: 1; }  100% {    -webkit-transform: translateX(-1500px);    transform: translateX(-1500px);    opacity: 0; } }.fade-out-left-lg {  -webkit-animation-name: fade-out-left-lg;  animation-name: fade-out-left-lg; }@-webkit-keyframes fade-in-right {  0% {    -webkit-transform: translateX(500px);    transform: translateX(500px);    opacity: 0; }  100% {    -webkit-transform: translateX(0);    transform: translateX(0);    opacity: 1; } }@keyframes fade-in-right {  0% {    -webkit-transform: translateX(500px);    transform: translateX(500px);    opacity: 0; }  100% {    -webkit-transform: translateX(0);    transform: translateX(0);    opacity: 1; } }.fade-in-right {  -webkit-animation-name: fade-in-right;  animation-name: fade-in-right; }@-webkit-keyframes fade-out-right {  0% {    -webkit-transform: translateX(0);    transform: translateX(0);    opacity: 1; }  100% {    -webkit-transform: translateX(500px);    transform: translateX(500px);    opacity: 0; } }@keyframes fade-out-right {  0% {    -webkit-transform: translateX(0);    transform: translateX(0);    opacity: 1; }  100% {    -webkit-transform: translateX(500px);    transform: translateX(500px);    opacity: 0; } }.fade-out-right {  -webkit-animation-name: fade-out-right;  animation-name: fade-out-right; }@-webkit-keyframes fade-in-right-sm {  0% {    -webkit-transform: translateX(100px);    transform: translateX(100px);    opacity: 0; }  100% {    -webkit-transform: translateX(0);    transform: translateX(0);    opacity: 1; } }@keyframes fade-in-right-sm {  0% {    -webkit-transform: translateX(100px);    transform: translateX(100px);    opacity: 0; }  100% {    -webkit-transform: translateX(0);    transform: translateX(0);    opacity: 1; } }.fade-in-right-sm {  -webkit-animation-name: fade-in-right-sm;  animation-name: fade-in-right-sm; }@-webkit-keyframes fade-out-right-sm {  0% {    -webkit-transform: translateX(0);    transform: translateX(0);    opacity: 1; }  100% {    -webkit-transform: translateX(100px);    transform: translateX(100px);    opacity: 0; } }@keyframes fade-out-right-sm {  0% {    -webkit-transform: translateX(0);    transform: translateX(0);    opacity: 1; }  100% {    -webkit-transform: translateX(100px);    transform: translateX(100px);    opacity: 0; } }.fade-out-right-sm {  -webkit-animation-name: fade-out-right-sm;  animation-name: fade-out-right-sm; }@-webkit-keyframes fade-in-right-lg {  0% {    -webkit-transform: translateX(1500px);    transform: translateX(1500px);    opacity: 0; }  100% {    -webkit-transform: translateX(0);    transform: translateX(0);    opacity: 1; } }@keyframes fade-in-right-lg {  0% {    -webkit-transform: translateX(1500px);    transform: translateX(1500px);    opacity: 0; }  100% {    -webkit-transform: translateX(0);    transform: translateX(0);    opacity: 1; } }.fade-in-right-lg {  -webkit-animation-name: fade-in-right-lg;  animation-name: fade-in-right-lg; }@-webkit-keyframes fade-out-right-lg {  0% {    -webkit-transform: translateX(0);    transform: translateX(0);    opacity: 1; }  100% {    -webkit-transform: translateX(1500px);    transform: translateX(1500px);    opacity: 0; } }@keyframes fade-out-right-lg {  0% {    -webkit-transform: translateX(0);    transform: translateX(0);    opacity: 1; }  100% {    -webkit-transform: translateX(1500px);    transform: translateX(1500px);    opacity: 0; } }.fade-out-right-lg {  -webkit-animation-name: fade-out-right-lg;  animation-name: fade-out-right-lg; }@-webkit-keyframes rotate-in {  0% {    -webkit-transform: rotate(-90deg);    transform: rotate(-90deg);    -webkit-transform-origin: center center;    transform-origin: center center;    opacity: 0; }  100% {    -webkit-transform: rotate(0);    transform: rotate(0);    -webkit-transform-origin: center center;    transform-origin: center center;    opacity: 1; } }@keyframes rotate-in {  0% {    -webkit-transform: rotate(-90deg);    transform: rotate(-90deg);    -webkit-transform-origin: center center;    transform-origin: center center;    opacity: 0; }  100% {    -webkit-transform: rotate(0);    transform: rotate(0);    -webkit-transform-origin: center center;    transform-origin: center center;    opacity: 1; } }.rotate-in {  -webkit-animation-name: rotate-in;  animation-name: rotate-in; }@-webkit-keyframes rotate-out {  0% {    -webkit-transform: rotate(0);    transform: rotate(0);    -webkit-transform-origin: center center;    transform-origin: center center;    opacity: 1; }  100% {    -webkit-transform: rotate(90deg);    transform: rotate(90deg);    -webkit-transform-origin: center center;    transform-origin: center center;    opacity: 0; } }@keyframes rotate-out {  0% {    -webkit-transform: rotate(0);    transform: rotate(0);    -webkit-transform-origin: center center;    transform-origin: center center;    opacity: 1; }  100% {    -webkit-transform: rotate(90deg);    transform: rotate(90deg);    -webkit-transform-origin: center center;    transform-origin: center center;    opacity: 0; } }.rotate-out {  -webkit-animation-name: rotate-out;  animation-name: rotate-out; }@-webkit-keyframes rotate-in-sm {  0% {    -webkit-transform: rotate(-45deg);    transform: rotate(-45deg);    -webkit-transform-origin: center center;    transform-origin: center center;    opacity: 0; }  100% {    -webkit-transform: rotate(0);    transform: rotate(0);    -webkit-transform-origin: center center;    transform-origin: center center;    opacity: 1; } }@keyframes rotate-in-sm {  0% {    -webkit-transform: rotate(-45deg);    transform: rotate(-45deg);    -webkit-transform-origin: center center;    transform-origin: center center;    opacity: 0; }  100% {    -webkit-transform: rotate(0);    transform: rotate(0);    -webkit-transform-origin: center center;    transform-origin: center center;    opacity: 1; } }.rotate-in-sm {  -webkit-animation-name: rotate-in-sm;  animation-name: rotate-in-sm; }@-webkit-keyframes rotate-out-sm {  0% {    -webkit-transform: rotate(0);    transform: rotate(0);    -webkit-transform-origin: center center;    transform-origin: center center;    opacity: 1; }  100% {    -webkit-transform: rotate(45deg);    transform: rotate(45deg);    -webkit-transform-origin: center center;    transform-origin: center center;    opacity: 0; } }@keyframes rotate-out-sm {  0% {    -webkit-transform: rotate(0);    transform: rotate(0);    -webkit-transform-origin: center center;    transform-origin: center center;    opacity: 1; }  100% {    -webkit-transform: rotate(45deg);    transform: rotate(45deg);    -webkit-transform-origin: center center;    transform-origin: center center;    opacity: 0; } }.rotate-out-sm {  -webkit-animation-name: rotate-out-sm;  animation-name: rotate-out-sm; }@-webkit-keyframes rotate-in-lg {  0% {    -webkit-transform: rotate(-180deg);    transform: rotate(-180deg);    -webkit-transform-origin: center center;    transform-origin: center center;    opacity: 0; }  100% {    -webkit-transform: rotate(0);    transform: rotate(0);    -webkit-transform-origin: center center;    transform-origin: center center;    opacity: 1; } }@keyframes rotate-in-lg {  0% {    -webkit-transform: rotate(-180deg);    transform: rotate(-180deg);    -webkit-transform-origin: center center;    transform-origin: center center;    opacity: 0; }  100% {    -webkit-transform: rotate(0);    transform: rotate(0);    -webkit-transform-origin: center center;    transform-origin: center center;    opacity: 1; } }.rotate-in-lg {  -webkit-animation-name: rotate-in-lg;  animation-name: rotate-in-lg; }@-webkit-keyframes rotate-out-lg {  0% {    -webkit-transform: rotate(0);    transform: rotate(0);    -webkit-transform-origin: center center;    transform-origin: center center;    opacity: 1; }  100% {    -webkit-transform: rotate(180deg);    transform: rotate(180deg);    -webkit-transform-origin: center center;    transform-origin: center center;    opacity: 0; } }@keyframes rotate-out-lg {  0% {    -webkit-transform: rotate(0);    transform: rotate(0);    -webkit-transform-origin: center center;    transform-origin: center center;    opacity: 1; }  100% {    -webkit-transform: rotate(180deg);    transform: rotate(180deg);    -webkit-transform-origin: center center;    transform-origin: center center;    opacity: 0; } }.rotate-out-lg {  -webkit-animation-name: rotate-out-lg;  animation-name: rotate-out-lg; }@-webkit-keyframes flip-in-x {  0% {    -webkit-transform: perspective(550px) rotateX(90deg);    transform: perspective(550px) rotateX(90deg);    opacity: 0; }  100% {    -webkit-transform: perspective(550px) rotateX(0deg);    transform: perspective(550px) rotateX(0deg);    opacity: 1; } }@keyframes flip-in-x {  0% {    -webkit-transform: perspective(550px) rotateX(90deg);    transform: perspective(550px) rotateX(90deg);    opacity: 0; }  100% {    -webkit-transform: perspective(550px) rotateX(0deg);    transform: perspective(550px) rotateX(0deg);    opacity: 1; } }.flip-in-x {  -webkit-animation-name: flip-in-x;  animation-name: flip-in-x;  -webkit-backface-visibility: visible !important;  backface-visibility: visible !important; }@-webkit-keyframes flip-out-x {  0% {    -webkit-transform: perspective(550px) rotateX(0deg);    transform: perspective(550px) rotateX(0deg);    opacity: 1; }  100% {    -webkit-transform: perspective(550px) rotateX(90deg);    transform: perspective(550px) rotateX(90deg);    opacity: 0; } }@keyframes flip-out-x {  0% {    -webkit-transform: perspective(550px) rotateX(0deg);    transform: perspective(550px) rotateX(0deg);    opacity: 1; }  100% {    -webkit-transform: perspective(550px) rotateX(90deg);    transform: perspective(550px) rotateX(90deg);    opacity: 0; } }.flip-out-x {  -webkit-animation-name: flip-out-x;  animation-name: flip-out-x;  -webkit-backface-visibility: visible !important;  backface-visibility: visible !important; }@-webkit-keyframes flip-in-x-nr {  0% {    -webkit-transform: perspective(100px) rotateX(90deg);    transform: perspective(100px) rotateX(90deg);    opacity: 0; }  100% {    -webkit-transform: perspective(100px) rotateX(0deg);    transform: perspective(100px) rotateX(0deg);    opacity: 1; } }@keyframes flip-in-x-nr {  0% {    -webkit-transform: perspective(100px) rotateX(90deg);    transform: perspective(100px) rotateX(90deg);    opacity: 0; }  100% {    -webkit-transform: perspective(100px) rotateX(0deg);    transform: perspective(100px) rotateX(0deg);    opacity: 1; } }.flip-in-x-nr {  -webkit-animation-name: flip-in-x-nr;  animation-name: flip-in-x-nr;  -webkit-backface-visibility: visible !important;  backface-visibility: visible !important; }@-webkit-keyframes flip-out-x-nr {  0% {    -webkit-transform: perspective(100px) rotateX(0deg);    transform: perspective(100px) rotateX(0deg);    opacity: 1; }  100% {    -webkit-transform: perspective(100px) rotateX(90deg);    transform: perspective(100px) rotateX(90deg);    opacity: 0; } }@keyframes flip-out-x-nr {  0% {    -webkit-transform: perspective(100px) rotateX(0deg);    transform: perspective(100px) rotateX(0deg);    opacity: 1; }  100% {    -webkit-transform: perspective(100px) rotateX(90deg);    transform: perspective(100px) rotateX(90deg);    opacity: 0; } }.flip-out-x-nr {  -webkit-animation-name: flip-out-x-nr;  animation-name: flip-out-x-nr;  -webkit-backface-visibility: visible !important;  backface-visibility: visible !important; }@-webkit-keyframes flip-in-x-fr {  0% {    -webkit-transform: perspective(1000px) rotateX(90deg);    transform: perspective(1000px) rotateX(90deg);    opacity: 0; }  100% {    -webkit-transform: perspective(1000px) rotateX(0deg);    transform: perspective(1000px) rotateX(0deg);    opacity: 1; } }@keyframes flip-in-x-fr {  0% {    -webkit-transform: perspective(1000px) rotateX(90deg);    transform: perspective(1000px) rotateX(90deg);    opacity: 0; }  100% {    -webkit-transform: perspective(1000px) rotateX(0deg);    transform: perspective(1000px) rotateX(0deg);    opacity: 1; } }.flip-in-x-fr {  -webkit-animation-name: flip-in-x-fr;  animation-name: flip-in-x-fr;  -webkit-backface-visibility: visible !important;  backface-visibility: visible !important; }@-webkit-keyframes flip-out-x-fr {  0% {    -webkit-transform: perspective(1000px) rotateX(0deg);    transform: perspective(1000px) rotateX(0deg);    opacity: 1; }  100% {    -webkit-transform: perspective(1000px) rotateX(90deg);    transform: perspective(1000px) rotateX(90deg);    opacity: 0; } }@keyframes flip-out-x-fr {  0% {    -webkit-transform: perspective(1000px) rotateX(0deg);    transform: perspective(1000px) rotateX(0deg);    opacity: 1; }  100% {    -webkit-transform: perspective(1000px) rotateX(90deg);    transform: perspective(1000px) rotateX(90deg);    opacity: 0; } }.flip-out-x-fr {  -webkit-animation-name: flip-out-x-fr;  animation-name: flip-out-x-fr;  -webkit-backface-visibility: visible !important;  backface-visibility: visible !important; }@-webkit-keyframes flip-in-y {  0% {    -webkit-transform: perspective(550px) rotateY(90deg);    transform: perspective(550px) rotateY(90deg);    opacity: 0; }  100% {    -webkit-transform: perspective(550px) rotateY(0deg);    transform: perspective(550px) rotateY(0deg);    opacity: 1; } }@keyframes flip-in-y {  0% {    -webkit-transform: perspective(550px) rotateY(90deg);    transform: perspective(550px) rotateY(90deg);    opacity: 0; }  100% {    -webkit-transform: perspective(550px) rotateY(0deg);    transform: perspective(550px) rotateY(0deg);    opacity: 1; } }.flip-in-y {  -webkit-animation-name: flip-in-y;  animation-name: flip-in-y;  -webkit-backface-visibility: visible !important;  backface-visibility: visible !important; }@-webkit-keyframes flip-out-y {  0% {    -webkit-transform: perspective(550px) rotateY(0deg);    transform: perspective(550px) rotateY(0deg);    opacity: 1; }  100% {    -webkit-transform: perspective(550px) rotateY(90deg);    transform: perspective(550px) rotateY(90deg);    opacity: 0; } }@keyframes flip-out-y {  0% {    -webkit-transform: perspective(550px) rotateY(0deg);    transform: perspective(550px) rotateY(0deg);    opacity: 1; }  100% {    -webkit-transform: perspective(550px) rotateY(90deg);    transform: perspective(550px) rotateY(90deg);    opacity: 0; } }.flip-out-y {  -webkit-animation-name: flip-out-y;  animation-name: flip-out-y;  -webkit-backface-visibility: visible !important;  backface-visibility: visible !important; }@-webkit-keyframes flip-in-y-nr {  0% {    -webkit-transform: perspective(100px) rotateY(90deg);    transform: perspective(100px) rotateY(90deg);    opacity: 0; }  100% {    -webkit-transform: perspective(100px) rotateY(0deg);    transform: perspective(100px) rotateY(0deg);    opacity: 1; } }@keyframes flip-in-y-nr {  0% {    -webkit-transform: perspective(100px) rotateY(90deg);    transform: perspective(100px) rotateY(90deg);    opacity: 0; }  100% {    -webkit-transform: perspective(100px) rotateY(0deg);    transform: perspective(100px) rotateY(0deg);    opacity: 1; } }.flip-in-y-nr {  -webkit-animation-name: flip-in-y-nr;  animation-name: flip-in-y-nr;  -webkit-backface-visibility: visible !important;  backface-visibility: visible !important; }@-webkit-keyframes flip-out-y-nr {  0% {    -webkit-transform: perspective(100px) rotateY(0deg);    transform: perspective(100px) rotateY(0deg);    opacity: 1; }  100% {    -webkit-transform: perspective(100px) rotateY(90deg);    transform: perspective(100px) rotateY(90deg);    opacity: 0; } }@keyframes flip-out-y-nr {  0% {    -webkit-transform: perspective(100px) rotateY(0deg);    transform: perspective(100px) rotateY(0deg);    opacity: 1; }  100% {    -webkit-transform: perspective(100px) rotateY(90deg);    transform: perspective(100px) rotateY(90deg);    opacity: 0; } }.flip-out-y-nr {  -webkit-animation-name: flip-out-y-nr;  animation-name: flip-out-y-nr;  -webkit-backface-visibility: visible !important;  backface-visibility: visible !important; }@-webkit-keyframes flip-in-y-fr {  0% {    -webkit-transform: perspective(1000px) rotateY(90deg);    transform: perspective(1000px) rotateY(90deg);    opacity: 0; }  100% {    -webkit-transform: perspective(1000px) rotateY(0deg);    transform: perspective(1000px) rotateY(0deg);    opacity: 1; } }@keyframes flip-in-y-fr {  0% {    -webkit-transform: perspective(1000px) rotateY(90deg);    transform: perspective(1000px) rotateY(90deg);    opacity: 0; }  100% {    -webkit-transform: perspective(1000px) rotateY(0deg);    transform: perspective(1000px) rotateY(0deg);    opacity: 1; } }.flip-in-y-fr {  -webkit-animation-name: flip-in-y-fr;  animation-name: flip-in-y-fr;  -webkit-backface-visibility: visible !important;  backface-visibility: visible !important; }@-webkit-keyframes flip-out-y-fr {  0% {    -webkit-transform: perspective(1000px) rotateY(0deg);    transform: perspective(1000px) rotateY(0deg);    opacity: 1; }  100% {    -webkit-transform: perspective(1000px) rotateY(90deg);    transform: perspective(1000px) rotateY(90deg);    opacity: 0; } }@keyframes flip-out-y-fr {  0% {    -webkit-transform: perspective(1000px) rotateY(0deg);    transform: perspective(1000px) rotateY(0deg);    opacity: 1; }  100% {    -webkit-transform: perspective(1000px) rotateY(90deg);    transform: perspective(1000px) rotateY(90deg);    opacity: 0; } }.flip-out-y-fr {  -webkit-animation-name: flip-out-y-fr;  animation-name: flip-out-y-fr;  -webkit-backface-visibility: visible !important;  backface-visibility: visible !important; }@-webkit-keyframes zoom-in {  0% {    -webkit-transform: scale(0.7);    transform: scale(0.7);    opacity: 0; }  100% {    opacity: 1; } }@keyframes zoom-in {  0% {    -webkit-transform: scale(0.7);    transform: scale(0.7);    opacity: 0; }  100% {    opacity: 1; } }.zoom-in {  -webkit-animation-name: zoom-in;  animation-name: zoom-in; }@-webkit-keyframes zoom-out {  0% {    -webkit-transform: scale(1);    transform: scale(1);    opacity: 1; }  50% {    -webkit-transform: scale(0.7);    transform: scale(0.7);    opacity: 0; }  100% {    opacity: 0; } }@keyframes zoom-out {  0% {    -webkit-transform: scale(1);    transform: scale(1);    opacity: 1; }  50% {    -webkit-transform: scale(0.7);    transform: scale(0.7);    opacity: 0; }  100% {    opacity: 0; } }.zoom-out {  -webkit-animation-name: zoom-out;  animation-name: zoom-out; }@-webkit-keyframes zoom-in-sm {  0% {    -webkit-transform: scale(0.95);    transform: scale(0.95);    opacity: 0; }  100% {    opacity: 1; } }@keyframes zoom-in-sm {  0% {    -webkit-transform: scale(0.95);    transform: scale(0.95);    opacity: 0; }  100% {    opacity: 1; } }.zoom-in-sm {  -webkit-animation-name: zoom-in-sm;  animation-name: zoom-in-sm; }@-webkit-keyframes zoom-out-sm {  0% {    -webkit-transform: scale(1);    transform: scale(1);    opacity: 1; }  50% {    -webkit-transform: scale(0.95);    transform: scale(0.95);    opacity: 0; }  100% {    opacity: 0; } }@keyframes zoom-out-sm {  0% {    -webkit-transform: scale(1);    transform: scale(1);    opacity: 1; }  50% {    -webkit-transform: scale(0.95);    transform: scale(0.95);    opacity: 0; }  100% {    opacity: 0; } }.zoom-out-sm {  -webkit-animation-name: zoom-out-sm;  animation-name: zoom-out-sm; }@-webkit-keyframes zoom-in-lg {  0% {    -webkit-transform: scale(0.4);    transform: scale(0.4);    opacity: 0; }  100% {    opacity: 1; } }@keyframes zoom-in-lg {  0% {    -webkit-transform: scale(0.4);    transform: scale(0.4);    opacity: 0; }  100% {    opacity: 1; } }.zoom-in-lg {  -webkit-animation-name: zoom-in-lg;  animation-name: zoom-in-lg; }@-webkit-keyframes zoom-out-lg {  0% {    -webkit-transform: scale(1);    transform: scale(1);    opacity: 1; }  50% {    -webkit-transform: scale(0.4);    transform: scale(0.4);    opacity: 0; }  100% {    opacity: 0; } }@keyframes zoom-out-lg {  0% {    -webkit-transform: scale(1);    transform: scale(1);    opacity: 1; }  50% {    -webkit-transform: scale(0.4);    transform: scale(0.4);    opacity: 0; }  100% {    opacity: 0; } }.zoom-out-lg {  -webkit-animation-name: zoom-out-lg;  animation-name: zoom-out-lg; }@-webkit-keyframes overlay-slide-in-top {  0% {    height: 100%; }  100% {    height: 0; } }@keyframes overlay-slide-in-top {  0% {    height: 100%; }  100% {    height: 0; } }.overlay-slide-in-top {  top: 0;  height: 0;  -webkit-animation-name: overlay-slide-in-top;  animation-name: overlay-slide-in-top; }@-webkit-keyframes overlay-slide-out-top {  0% {    height: 0; }  100% {    height: 100%; } }@keyframes overlay-slide-out-top {  0% {    height: 0; }  100% {    height: 100%; } }.overlay-slide-out-top {  top: 0;  height: 100%;  -webkit-animation-name: overlay-slide-out-top;  animation-name: overlay-slide-out-top; }@-webkit-keyframes overlay-slide-in-bottom {  0% {    height: 100%; }  100% {    height: 0; } }@keyframes overlay-slide-in-bottom {  0% {    height: 100%; }  100% {    height: 0; } }.overlay-slide-in-bottom {  bottom: 0;  height: 0;  -webkit-animation-name: overlay-slide-in-bottom;  animation-name: overlay-slide-in-bottom; }@-webkit-keyframes overlay-slide-out-bottom {  0% {    height: 0; }  100% {    height: 100%; } }@keyframes overlay-slide-out-bottom {  0% {    height: 0; }  100% {    height: 100%; } }.overlay-slide-out-bottom {  bottom: 0;  height: 100%;  -webkit-animation-name: overlay-slide-out-bottom;  animation-name: overlay-slide-out-bottom; }@-webkit-keyframes overlay-slide-in-left {  0% {    width: 100%; }  100% {    width: 0; } }@keyframes overlay-slide-in-left {  0% {    width: 100%; }  100% {    width: 0; } }.overlay-slide-in-left {  width: 0;  -webkit-animation-name: overlay-slide-in-left;  animation-name: overlay-slide-in-left; }@-webkit-keyframes overlay-slide-out-left {  0% {    width: 0; }  100% {    width: 100%; } }@keyframes overlay-slide-out-left {  0% {    width: 0; }  100% {    width: 100%; } }.overlay-slide-out-left {  left: 0;  width: 100%;  -webkit-animation-name: overlay-slide-out-left;  animation-name: overlay-slide-out-left; }@-webkit-keyframes overlay-slide-in-right {  0% {    width: 100%; }  100% {    width: 0; } }@keyframes overlay-slide-in-right {  0% {    width: 100%; }  100% {    width: 0; } }.overlay-slide-in-right {  right: 0;  width: 0;  -webkit-animation-name: overlay-slide-in-right;  animation-name: overlay-slide-in-right; }@-webkit-keyframes overlay-slide-out-right {  0% {    width: 0; }  100% {    width: 100%; } }@keyframes overlay-slide-out-right {  0% {    width: 0; }  100% {    width: 100%; } }.overlay-slide-out-right {  right: 0;  width: 100%;  -webkit-animation-name: overlay-slide-out-right;  animation-name: overlay-slide-out-right; }.previewFrame .animsition {  opacity: 1 !important; }/* -----------------------------------------	13.0. Footer----------------------------------------- */.footer-top {  background-color: #ed7887;  padding: 2em;  display: table;  width: 100%; }  @media (min-width: 71.875em) {    .footer-top {      padding: 2em 6em; } }.footer-logo, .footer-contact {  width: 100%; }  @media (min-width: 32.5em) {    .footer-logo, .footer-contact {      display: table-cell;      width: 50%;      vertical-align: middle; } }.footer-logo {  text-align: center; }  @media (min-width: 32.5em) {    .footer-logo {      text-align: left; } }  .footer-logo img {    max-width: 11em; }    @media (min-width: 32.5em) {      .footer-logo img {        max-width: 11em; } }    @media (min-width: 57.5em) {      .footer-logo img {        max-width: 100%; } }.footer-contact {  text-align: center; }  @media (min-width: 32.5em) {    .footer-contact {      text-align: right; } }  .footer-contact h2, .footer-contact a {    color: #fff;    font-family: "RobotoRegular", Arial, "Helvetica Neue", Helvetica, sans-serif;    margin-bottom: 0;    padding-left: 40px;    position: relative;    display: inline-block;    line-height: 25px;    font-size: 1.35em; }    @media (min-width: 57.5em) {      .footer-contact h2, .footer-contact a {        font-size: 1.944em;        line-height: 50px;        padding-left: 70px; } }    .footer-contact h2:before, .footer-contact a:before {      content: "";      display: inline-block;      height: 25px;      width: 25px;      background-size: contain;      background-position: 50%;      background-repeat: no-repeat;      position: absolute;      left: 0;      top: 50%;      -webkit-transform: translateY(-50%);          -ms-transform: translateY(-50%);              transform: translateY(-50%); }      @media (min-width: 57.5em) {        .footer-contact h2:before, .footer-contact a:before {          height: 50px;          width: 50px; } }  .footer-contact a {    text-decoration: underline;    line-height: 1.6; }    .footer-contact a:hover {      color: rgba(255, 255, 255, 0.55); }  .footer-contact li {    margin: 1em 0; }  .footer-contact .phone:before {    background-image: url("/budgetsafe-co-uk/_img/svg/telephone.svg"); }  .footer-contact .mail-icon:before {    background-image: url("/budgetsafe-co-uk/_img/svg/envelope.svg"); }.footer-bottom {  padding: 1em 2em;  background-color: #fff;  text-align: center; }  .footer-bottom a {    color: #333; }    .footer-bottom a:hover {      color: #ed7887; }
/* not required */