/**
 * Tip-Client CSS
 * Modernized for current CSS practices.
 * Uses CSS custom properties, logical properties, shorthand, and minimal vendor prefixes.
 */

:root {
  /* Tip-Client design tokens */
  --tc-font-heading: 'League Spartan', sans-serif;
  --tc-font-body: 'Open Sans', sans-serif;
  --tc-font-roboto: Roboto, sans-serif;
  --tc-color-text: #333;
  --tc-color-text-light: #666;
  --tc-color-white: #fff;
  --tc-color-black: #000;
  --tc-color-primary: #008FD5;
  --tc-color-hover: #0077c4;
  --tc-color-accent: #bdf6ff;
  --tc-radius-sm: 5px;
  --tc-radius-md: 10px;
  --tc-radius-lg: 15px;
  --tc-transition: 0.3s ease;
  --tc-transition-slow: 0.8s ease;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}
html {font-size: 99%;} /*16px*/

body {
  font-family: var(--tc-font-heading);
  font-size: 1.2em;
  color: var(--tc-color-white);
  padding: 0;
  margin: 0;
}

.margin {
    margin: clamp(1em, 2.5vw, 2.5em);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--tc-font-heading);
  margin: 0.5em 0;
}
/* =========================================
   H1 - GOLD GRADIENT TEXT
========================================= */

h1 {
  font-family: "Great Vibes", cursive;
  font-weight: 400;

  font-size: 64px;
  line-height: 1.2;
}
/*h1 {
  font-size: clamp(2rem, 3.3vw, 3.3rem);
}*/

h2 {
  font-size: clamp(1.7rem, 2.8vw, 2.8rem);
  margin-bottom:0;
}

h3 {
    font-size: clamp(1.4rem, 2.2vw, 2.2rem);
}
h4 {
    font-size: clamp(1.1rem, 1.8vw, 1.8rem);
}

h5 {
    font-size: clamp(.9rem, 1.4vw, 1.4rem);
}

h6 {
    font-size: 1.5rem;
    font-weight:400;
}

p {
  line-height: 1.3;
  font-size: clamp(0.9em, 1em, 1.3em);
  font-family: var(--tc-font-body);
  font-weight: 400;
  margin: 0;
}

/*.headerimg img {
    width: clamp(25vw, 28vw, 31vw);
} */

.small, .text_small {font-size: 0.8rem;}

/*====================== Link CSS ======================*/

a:link { color: var(--tc-color-white); text-decoration: none; }
a:visited { color: var(--tc-color-white); }
a:hover { color: var(--tc-color-accent); text-decoration: underline; }

ul.b {
  list-style-type: square;
  margin-inline-start: 40px;
  line-height: 1.2;
  font-size: clamp(0.9em, 1em, 1.3em);
}

/*========================= Heading Css =======================*/

.tan {
    background-color:#eeeae5 ;
}

/*===============Text Colors================*/

.purple
{
  color: #5c2e91;
}

.red
{
  color: #e24045;
}

.blue
{
  color: #008FD5;
}

.orange
{
  color: #fdaf17;
}

.teal
{
  color: #00aa94;
}

.white
{
  color: #FFFFFF;
}

/*============Radius Styling============*/

.radius5
{
  border-radius: 5px;
}

.radius10
{
  border-radius: 10px;
  border: 6px solid #c6c07a;
}

.radius15
{
  border-radius: 15px;
  border: 6px solid #fff;
}

.radius20
{
  border-radius: 20px;
}

.radius-circle {
    border-radius: 50%;
    border: 6px solid #c6c07a;
}

/*=============Background Colors============*/

.backblue {
  /*background-color: #009adf;*/
  color:#FFF;
  background-image: linear-gradient(135deg, #0061af 10%, #00aeef 100%);
  padding:15px;
}
.backred {
  /*background-color: #dc3e43;*/
  color:#fff;
  background-image: linear-gradient(135deg, #a92c31 15%, #f15a22 100%);
  padding:15px;
}
.backpurple {
  background-color: #01a490;
  color:#fff;
  background-image: linear-gradient(135deg, #5c2e91 0%, #c6168d 100%);
  padding:15px;
}
.backdkpurple {
  background-color: #922780;
  color:#fff;
  /*background-image: linear-gradient(135deg, #5c2e91 0%, #c6168d 100%);*/
  padding:15px;
}
.backteal {
  background-color: #01a490;
  color:#fff;
  background-image: linear-gradient(135deg, #006b6b  15%, #27bdbe 100%);
  padding:15px;
}
.backorange {
  /*background-color: #f47920;*/
  color:#fff;
  background-image: linear-gradient(135deg, #dd5928  15%, #fcaf17 100%);
  padding:15px;
}
.backwhite {
  background-color: #ffffff;
  color:#333;
 /* height:100%;*/
}
.backblack {
  background-color: #000000;
  color:#fff;
}

/*============Border Settings===========*/

.border1
{
  border: 1px solid #666666;
}

.border2
{
  border: 2px solid #666666;
}

.border3
{
  border: 3px solid #666666;
}

/*=============Paddings 5px 10px 15px 20px============*/

.padding5
{
  padding: 5px;
}

.padding10
{
  padding: 10px;
}

.padding15
{
  padding: 15px;
}

.padding20
{
  padding: 20px;
}
/*@media (max-width: 480px)
{
    .padding20 {
        padding:0 10px;
    }
}*/
.padding25
{
  padding: 25px;
}
.padding30
{
  padding: 30px;
}
@media (max-width: 480px)
{
    .padding30 {
        padding:0 15px;
    }
}
.paddingblock {
  padding-block: min(20vh, 20rem);
}

/*================== Alignment Elements ===============*/

.center
{
  text-align: center;
}

.right
{
  text-align: right;
}

.left
{
  text-align: left;
}

.heading
{
  font-weight: 700;
}

/*==========Font Sizes for Headings==========*/

.xsmall, .small, .medium, .large, .xlarge
{
  font-weight: 700;
}

.xsmall
{
  font-size: .8em;
}

.small
{
  font-size: 1em;
}

.medium
{
  font-size: 1.2em;
}

.large
{
  font-size: 1.4em;
}

.xlarge
{
  font-size: 1.7em;
}

/*=================== Template Banner ===================*/

.tplban
{
  color: #FFFFFF;
  padding: 10px 0;
  font-family: Roboto, sans-serif;
  font-size: clamp(1.4rem, 2.3vw, 2.3rem);
  font-weight: 600;
  margin:0;
  width:100%
}

/*=============Datablock CSS================*/

#blockdata
{
  font-size: 14px;
  font-family: Roboto, sans-serif;
  line-height: 1.2em;
  color: #fff;
  width: 100%;
  margin: 0 auto;
  padding: 10px;
  background-color: #00aeef;
  border: 1px solid #025196;
  border-radius: 8px;
}
.datablock-header {
    color:#FFF;
    font-size: 24px;
    text-shadow: 0px 0px 7px rgba(0,0,0,0.91);
    letter-spacing:1px;
    line-height:26px;
}

#datablock5
{
  padding: 12px;
  font-size: 14px;
  font-family: Cachet-Medium;
  color: #666;
  text-align: left;
}
.databoxes
{
  padding: 20px;
  border: 1px solid #999999;
  border-radius: 10px;
  box-shadow: 0 8px 8px rgb(0 0 0 / 0.4);
  margin: 10px;
}
/*==================SHOW RECENT BLOG ENTRY====================*/

#showrecent {
    margin-left: 5%;
    margin-top: 300px;
    padding: 12px;
    padding-left:15px;
    padding-top: 6px;
    border: 2px solid #000;
    border-radius: 15px;
    background-color: #005296;
    left: 72%;
    top: 5%;
    color:#fff;
    /*font-family: verdana;*/
}

@media screen and (max-width: 992px) {
    #showrecent {
        visibility: hidden;
    }
}
/*
   @media screen and (max-width: 1132px) {
       #showrecent {
           top:10%;
       }
      }
*/
#showrecent a:visited {
color:#fff !important
}
#showrecent > a:link {
    color :#fff !important;
    }

#showrecentmobile {

 /* margin-left: 2%; */
    border: 1px solid #666666;
    border-radius: 8px;
    background-color: #005296;
    position: fixed;
    bottom: 0;
    margin-right:3%;
    z-index: 1000;
    /*font-family: verdana;*/
    color:#fff;
    line-height:1.1em;
    font-size:18px;


}

#showrecentmobile > a:link {
    color :#fff !important;
    }

#showrecentmobile > a:visited {
color :#fff !important;
}

/*==================END OFSHOW RECENT BLOG ENTRY====================*/




/*=================Footer Link & Container CSS==================*/
.foot {
    padding:5px;
}
.foot a:link
{
  color: #FFFFFF;
}

.foot a:hover
{
  color: #FFFFFF;
  text-decoration: underline;
}

.foot a:visited
{
  color: #FFFFFF;
}

#footer-container
{
    min-height: 100px;
    margin: 0 auto;
    background-color: #191919;
    font-size: 14px;
    line-height: 1.4em;
 /* -webkit-box-shadow: 0 -5px 20px 1px #333; */
 /* box-shadow: 0 -5px 30px 1px #333;*/ /*dropshadow on top*/
}
/*================= Copyright CSS =================*/

.copyright
{
  margin: 0 auto;
  padding-top: 10px;
  color: #000;
  font-size: 10px;
  font-weight: 800;
  text-align: center;
}

/*==================== TEMPLATE CSS ====================*/
/*  Template base styles (.tpl8, .tpl9, .tpl13, .tpl14, .tpl16, .tpl20, .tpl35) moved to templates.css */

/*============Very Top Navigation Links================*/

.vtn a:link { color: var(--tc-color-text); }
.vtn a:hover { color: var(--tc-color-hover); text-decoration: underline; }
.vtn a:visited { color: var(--tc-color-text); }
/*===================End of vtn links==================*/

/*=============================Titlebar============================

.titlebar
{
  margin-bottom: 10px;
  -webkit-box-shadow: 0px 10px 3px 0px rgba(204,204,204,1);
  -moz-box-shadow: 0px 10px 3px 0px rgba(204,204,204,1);
  box-shadow: 0px 5px 5px #888888;
}
*/
/*==================Embed Container & Video CSS===================*/


.video
{
  width: 100%;
  height: auto;
}

.embed-container {
  position: relative;
  padding-bottom: 65%;
  height: 0;
  overflow: hidden;
  max-width: 100%;
}

.embed-container iframe, .embed-container object, .embed-container .embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.wrap1 {
  border-bottom: 0 solid #ccc;  /* set size to 0px for no border */
}

/* ====================  EVENT CSS ======================== */

.events {
  font-family: Roboto, Arial;
}


/* ========================= GALLERY CSS ===========================  */
.galleries {
  background-color: #BC8484;
  color:#fff;
  text-align:center;
}
.displaygal {
  background-color: #BC8484;
}
.pagenumgaltop {
  padding-top: 16px;
  text-align:center;
  color:#fff;
}
.pagenumgalbottom {
  padding:6px;
  padding-bottom:16px;
  text-align:center;
  color:#fff

}
.imgbackgrnd {
  background-color: #BC8484;

}

/* QPaginator (gallery / front) — only Previous / Next, styled like "< PREVIOUS     NEXT >" */
  span.paginator {
    display: inline-flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 2.25rem;
    background-color: transparent;
    margin: 3px;
    padding: 10px 15px;
    border-radius: 5px;
    vertical-align: middle;
    /* Base size for row; Lora is loaded site-wide. */
    font-family: "Lora", Georgia, "Times New Roman", serif;
    font-size: 20px;
    font-weight: 600;
    color: #333333;
  }
  /* Decorative brackets — not links; keep separate from a:link / hover. */
  span.paginator::before,
  span.paginator::after {
    font-family: "Lora", Georgia, "Times New Roman", serif;
    font-size: 20px;
    font-weight: 700;
    color: #444444;
    pointer-events: none;
    user-select: none;
  }
  span.paginator::before {
    content: '<';
    margin-right: 0.35em;
  }
  span.paginator::after {
    content: '>';
    margin-left: 0.35em;
  }
  /* Hide bracket when prev/next is unavailable (QCubed often omits <a> at limits). */
  span.paginator:has(> span.arrow:first-child:not(:has(a)))::before {
    display: none;
  }
  span.paginator:has(> span.arrow:last-child:not(:has(a)))::after {
    display: none;
  }
  span.paginator > span {
    list-style-type: none;
    margin: 0;
    padding: 0;
  }
  span.paginator span.page,
  span.paginator span.selected,
  span.paginator span.break,
  span.paginator span.ellipsis {
    display: none !important;
  }
  /* Gallery paginator is usually only Previous | pages | Next (no separate «first»/»last» spans).
     Do not hide first/last .arrow — that was removing the real Previous/Next links. */
  span.paginator span.page a:link,
  span.paginator span.page a:visited {
    text-decoration: none;
    background-color: #0c7ce1;
    color: #000;
    padding: 5px 8px;
    margin: 0;
  }
  span.paginator span.page a:hover {
    color: #fff;
    background-color: #B98D33;
  }
  span.paginator span.arrow {
    margin: 0;
    padding: 0 2px;
    text-transform: uppercase;
    font-family: "Lora", Georgia, "Times New Roman", serif;
    font-size: 20px;
    font-weight: 600;
    color: #333333;
  }
  /* Prev/next at first/last page: hide whole .arrow when there is no link (common QCubed output). */
  span.paginator span.arrow:not(:has(a)) {
    display: none !important;
  }
  span.paginator span.arrow:has(a[disabled]),
  span.paginator span.arrow:has(a[aria-disabled="true"]) {
    display: none !important;
  }
  span.paginator span.arrow a,
  span.paginator span.arrow a:link,
  span.paginator span.arrow a:visited {
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    color: #333333 !important;
    text-decoration: none;
    text-transform: uppercase !important;
    letter-spacing: 0.02em;
  }
  span.paginator span.arrow a:hover {
    color: #000000 !important;
    background-color: transparent;
    text-decoration: underline;
    text-transform: uppercase !important;
  }
  span.paginator span.selected {
    font-weight: bold;
    background-color: #f7f7ed;
    color: #333;
    padding: 5px 8px;
    margin: 3px;
    border: 1px solid #ccc;
  }
  span.paginator span.break { color: #c59817; margin: 0 5px; }
  span.paginator span.ellipsis { color: #cccccc; }

/* ========================= END OF GALLERY STUFF ========================= */


 /* Below are fckeditor styles */

/* End of fckeditor styles */



.sub_div
{
  position: absolute;
  bottom: 0px;
}
.tipdatawhite {
    background-color: #FFF;
    border-radius:10px;
    margin: 17px 0 ;
}




/*=================== TIP GRID STUFF ====================*/

.tipgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}

.tipgrid-footer {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}

@media screen and (max-width: 915px) {
  .tipgrid-footer {
    display: block;
  }
}

.tipgrid2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}
.tipcontainer {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    padding:5px;
    color:#666666;
}


/* Tipgrid/tipcell styles moved to templates.css */


/* =========================== FORM CSS ================================  */

input[type=text],[type=textarea],[type=email] {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  resize: vertical;
}
/*
input[type=textarea] {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  resize: vertical;
}

input[type=email] {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  resize: vertical;
}
*/

.label {
  padding:0px 12px 0px 0;
  display: inline-block;
}

/*
input[type=Submit] {
  background-color: #0060af;
  color: white;
  padding: 4px 14px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  float: right;
}
*/
input[type=Submit]:hover {
  background-color: #333333;
}

input[type=Submit]:visited {
  background-color: #000000;
}

input[type=Submit]:active {
  background-color: #000000;
}

.fmsect {
  display: grid;
  grid-template-columns: 20% 1fr;
  gap: 0.5rem;
  align-items: start;
}

.col-25 {
  font-weight: 700;
  margin-top: 6px;
}

.col-75 {
  margin-top: 6px;
}


/* Responsive layout - when the screen is less than 600px wide, stack columns */
@media screen and (max-width: 600px) {
  .fmsect {
    grid-template-columns: 1fr;
  }
  .col-25,
  .col-75,
  input[type=Submit] {
    margin-top: 0;
  }
}

/* ============================ END OF FORM STUFF ============================= */

/* ======================= READ MORE CSS ======================= */

.collapse {
  display: none;
  visibility: hidden;
}
.collapse.in {
  display: block;
  visibility: visible;
}
.collapsing {
  position: relative;
  height: 0;
  overflow: hidden;
  transition: height 0.35s ease, visibility 0.35s ease;
}

/* ========================== END OF READ MORE STUFF ======================== */






/* ==================== put all STUFF from Boot strap to Below this line ===================*/
/*  ########### BELOW IS BOOTSTRAP GRID CODE #####THIS MAY NOT BE NEEDED ANYMORE ##############################  */

.container {
  padding-inline: 15px;
  margin-inline: auto;
}

/*@media (min-width: 768px)
{
  .container
  {
    width: 750px;
  }
}

@media (min-width: 992px)
{
  .container
  {
    width: 970px;
  }
}

@media (min-width: 1200px)
{
  .container
  {
    width: 1170px;
  }
}*/

.container-fluid {
  padding-inline: 0;
  margin-inline: auto;
}

.row { margin-inline: 0; }



@media (min-width: 992px) {
  .row { display: flex; flex-wrap: wrap; }
  .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6,
  .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
    float: left;
  }

  .col-md-12
  {
    width: 100%;
  }

  .col-md-11
  {
    width: 91.66666667%;
  }

  .col-md-10
  {
    width: 83.33333333%;
  }

  .col-md-9
  {
    width: 75%;
  }

  .col-md-8
  {
    width: 66.66666667%;
  }

  .col-md-7
  {
    width: 58.33333333%;
  }

  .col-md-6
  {
    width: 50%;
  }

  .col-md-5
  {
    width: 41.66666667%;
  }

  .col-md-4
  {
    width: 33.33333333%;
  }

  .col-md-3
  {
    width: 25%;
  }

  .col-md-2
  {
    width: 20%;
  }

  .col-md-1
  {
    width: 8.33333333%;
  }
}



.resize:hover {
  background-color: var(--tc-color-text);
  transform: scale(1.08);
  transition: transform var(--tc-transition);
  border: 1px solid var(--tc-color-text);
  z-index: 1;
}

/*======================Highslide CSS====================*/

.highslide img {
    border: 0;
}
.highslide:hover img {
    border-color: transparent;
}
.highslide-image {
    border-width: 2px;
    border-style: solid;
    border-color: white;
}
.highslide-dimming {
    /*position: absolute;*/
    background: black;
}
/*=======================================================*/

/*=============================HR Classes===================================*/

.hr1 {
    border: 0;
    height: 5px;
    background: #fff;
    background-image: linear-gradient(to right,  #cccccc, black, #cccccc);
    border-radius:2px;
}
/* Gradient transparent - color - transparent */

.hr2 {
    border: 0;
    height: 2px;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.50), rgba(0, 0, 0, 0));
    width:30%;
    text-align:center;
}
/* Double-color dashed line */

.hr3 {
    border: 0;
    border-bottom: 2px dashed #666666;
    background: #fff;
}
/* Single-direction drop shadow */

.hr4 {
    height: 12px;
    border: 0;
    box-shadow: inset 0 12px 12px -12px rgba(0, 0, 0, 0.5);
}
hr {
    border: none;

    color: #333;
    overflow: visible;
    text-align: center;
    height: 5px;
}
hr:after {
    background: #fff;
    color:#68217a;
    font-size:28px;
    content: '\2726';
    padding: 0 4px;
    position: relative;
    top: -19px;
}

/* Glyph, by Harry Roberts */

.five {
    overflow: visible; /* For IE */
    padding: 0;
    border: none;
    color: #333;
    text-align: center;
    height: 2px;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.50), rgba(0, 0, 0, 0));
    width:98%;
}
.five:after {
    color:#bdbe89;
    content: "\2726";
    display: inline-block;
    position: relative;
    top: -0.7em;
    font-size: 1.5em;
    padding: 0 0.25em;
}
/* ====================For Creating a see-through box in a content area==================*/
.content-color {
  background: rgb(255 255 255 / 0.55);
  box-shadow: 0 8px 32px rgb(31 38 135 / 0.37);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border-radius: var(--tc-radius-md);
  border: 1px solid rgb(255 255 255 / 0.18);
  width: 100%;
  height: 99%;
  padding: 30px;
}

/*========================= Basckground CSS ===============================*/

.clouds { background: url("/cms/assets/_core/image/background3.jpg") center / cover fixed no-repeat; }
.clouds2 { background: url("/cms/assets/_core/image/background7.jpg") center / cover fixed no-repeat; }
.pastelclouds { background: url("/cms/assets/_core/image/background1.jpg") center / cover fixed no-repeat; }
.gradient1 { background: url("/cms/assets/_core/image/gradient1.jpg") center / cover fixed no-repeat; }
.gradient2 { background: linear-gradient(135deg, #d2fddf 0%, #69a101 100%) center / cover fixed; }
.gradient3 { background: linear-gradient(135deg, #f7c153 0%, #621903 100%) center / cover fixed; }
.gradient4 { background: linear-gradient(215deg, #ffd4c2 0%, #41007a 100%) center / cover; }
.gethsemane {
  background: url("/cms/assets/_core/image/gethsemane.jpg") center / cover fixed no-repeat;
}
.welcome-chimney-sweep {
  background: url("/cms/assets/_core/image/chimney-sweep-welcome-background.jpg") center / cover scroll no-repeat; min-height:768px;}
.about-chimney-sweep {
  background: url("/cms/assets/_core/image/chimney-sweep-about-background.jpg") center / cover scroll no-repeat;}
.worship1 { background: url("/cms/assets/_core/image/worship1.jpg") center / cover fixed no-repeat; }
.worship2 { background: url("/cms/assets/_core/image/worship2.jpg") center / cover fixed no-repeat; }
.parchment { background: url("/cms/assets/_core/image/background5.jpg") center / cover fixed no-repeat; }
.stripes1 { background: url("/cms/assets/_core/image/gradient2.jpg") center / cover fixed no-repeat; }
.smoke1 { background: url("/cms/assets/_core/image/background2.jpg") center / cover fixed no-repeat; }
.grunge1 { background: url("/cms/assets/_core/image/grunge1.jpg") center / cover fixed no-repeat; }
.grunge2 { background: url("/cms/assets/_core/image/grunge2.jpg") center / cover fixed no-repeat; }
.grunge3 { background: url("/cms/assets/_core/image/grunge3.jpg") center / cover fixed no-repeat; }
.abstract1 { background: url("/cms/assets/_core/image/abstract1.jpg") center / cover fixed no-repeat; }
.nightsky { background: url("/cms/assets/_core/image/night-sky2.jpg") center / cover fixed no-repeat; }
.crowd { background: url("/cms/assets/_core/image/crowd3.jpg") center / cover fixed no-repeat; }
.redchecker { background: url("/cms/assets/_core/image/redchecks.jpg") center / cover fixed no-repeat; }
.orangegradient { background: linear-gradient(to right, #fcf83b, #fe8052) center / cover fixed; }
.bluegradient { background: linear-gradient(to left, #6BD2F0, #004AAD) center / cover fixed; }
.redgradient { background: linear-gradient(to left, #FF9415, #FF1615) center / cover fixed; }
.greengradient { background: linear-gradient(to right, #a8e063, #56ab2f) center / cover fixed; }
.darkbackground {
    background-image: radial-gradient(circle at center center, transparent,rgb(33,33,33)),repeating-linear-gradient(135deg, rgb(33,33,33) 0px, rgb(33,33,33) 2px,transparent 2px, transparent 10px,rgb(33,33,33) 10px, rgb(33,33,33) 11px,transparent 11px, transparent 21px),repeating-linear-gradient(45deg, rgb(47,47,47) 0px, rgb(47,47,47) 4px,transparent 4px, transparent 8px),linear-gradient(90deg, rgb(33,33,33),rgb(33,33,33));
    background-position: center center;
    background-attachment: fixed;
    background-size:cover;
}
.green-gradient-circles {
    background-image: radial-gradient(circle at 97% 32%, rgba(131, 131, 131,0.05) 0%, rgba(131, 131, 131,0.05) 50%,rgba(20, 20, 20,0.05) 50%, rgba(20, 20, 20,0.05) 100%),radial-gradient(circle at 61% 40%, rgba(35, 35, 35,0.05) 0%, rgba(35, 35, 35,0.05) 50%,rgba(239, 239, 239,0.05) 50%, rgba(239, 239, 239,0.05) 100%),radial-gradient(circle at 47% 73%, rgba(122, 122, 122,0.05) 0%, rgba(122, 122, 122,0.05) 50%,rgba(5, 5, 5,0.05) 50%, rgba(5, 5, 5,0.05) 100%),linear-gradient(90deg, rgb(0, 209, 117),rgb(205, 241, 44));
    background-position: center center;
    background-attachment: fixed;
    background-size:cover;
}
.orange-gradient-circle {
    background-image: radial-gradient(circle at 11% 62%, rgba(205, 205, 205,0.04) 0%, rgba(205, 205, 205,0.04) 50%,rgba(149, 149, 149,0.04) 50%, rgba(149, 149, 149,0.04) 100%),radial-gradient(circle at 78% 10%, rgba(49, 49, 49,0.04) 0%, rgba(49, 49, 49,0.04) 50%,rgba(254, 254, 254,0.04) 50%, rgba(254, 254, 254,0.04) 100%),radial-gradient(circle at 92% 43%, rgba(34, 34, 34,0.04) 0%, rgba(34, 34, 34,0.04) 50%,rgba(206, 206, 206,0.04) 50%, rgba(206, 206, 206,0.04) 100%),linear-gradient(329deg, rgb(241, 77, 33),rgb(218, 227, 61));
    background-position: center center;
    background-attachment: fixed;
    background-size:cover;
}
.purple-gradient-circle {
    background-image: radial-gradient(circle at 79% 8%, rgba(218, 218, 218,0.04) 0%, rgba(218, 218, 218,0.04) 50%,rgba(129, 129, 129,0.04) 50%, rgba(129, 129, 129,0.04) 100%),radial-gradient(circle at 0% 68%, rgba(47, 47, 47,0.04) 0%, rgba(47, 47, 47,0.04) 50%,rgba(30, 30, 30,0.04) 50%, rgba(30, 30, 30,0.04) 100%),radial-gradient(circle at 96% 42%, rgba(88, 88, 88,0.04) 0%, rgba(88, 88, 88,0.04) 50%,rgba(225, 225, 225,0.04) 50%, rgba(225, 225, 225,0.04) 100%),linear-gradient(172deg, rgb(230, 6, 245),rgb(98, 24, 90));
    background-position: center center;
    background-attachment: fixed;
    background-size:cover;
}
.teal-gradient-circles {
    background-image: radial-gradient(circle at 32% 12%, rgba(229, 229, 229,0.05) 0%, rgba(229, 229, 229,0.05) 50%,rgba(101, 101, 101,0.05) 50%, rgba(101, 101, 101,0.05) 100%),radial-gradient(circle at 49% 59%, rgba(113, 113, 113,0.05) 0%, rgba(113, 113, 113,0.05) 50%,rgba(240, 240, 240,0.05) 50%, rgba(240, 240, 240,0.05) 100%),radial-gradient(circle at 16% 86%, rgba(118, 118, 118,0.05) 0%, rgba(118, 118, 118,0.05) 50%,rgba(207, 207, 207,0.05) 50%, rgba(207, 207, 207,0.05) 100%),linear-gradient(252deg,rgb(34, 85, 150),rgb(117, 220, 202));
    background-position: center center;
    background-attachment: fixed;
    background-size:cover;
}
.red-gradient-circles {
    background-image: radial-gradient(circle at 79% 30%, rgba(230, 230, 230,0.04) 0%, rgba(230, 230, 230,0.04) 50%,rgba(12, 12, 12,0.04) 50%, rgba(12, 12, 12,0.04) 100%),radial-gradient(circle at 53% 89%, rgba(210, 210, 210,0.04) 0%, rgba(210, 210, 210,0.04) 50%,rgba(24, 24, 24,0.04) 50%, rgba(24, 24, 24,0.04) 100%),radial-gradient(circle at 92% 89%, rgba(17, 17, 17,0.04) 0%, rgba(17, 17, 17,0.04) 50%,rgba(205, 205, 205,0.04) 50%, rgba(205, 205, 205,0.04) 100%),radial-gradient(circle at 21% 13%, rgba(124, 124, 124,0.04) 0%, rgba(124, 124, 124,0.04) 50%,rgba(243, 243, 243,0.04) 50%, rgba(243, 243, 243,0.04) 100%),radial-gradient(circle at 77% 0%, rgba(16, 16, 16,0.04) 0%, rgba(16, 16, 16,0.04) 50%,rgba(130, 130, 130,0.04) 50%, rgba(130, 130, 130,0.04) 100%),linear-gradient(90deg, rgb(247, 101, 31),rgb(250,25,25));
    background-position: center center;
    background-attachment: fixed;
    background-size:cover;
}
.white-gradient-circles {
    background-image: radial-gradient(circle at 28% 51%, rgba(206, 206, 206,0.03) 0%, rgba(206, 206, 206,0.03) 17%,transparent 17%, transparent 100%),radial-gradient(circle at 45% 10%, rgba(10, 10, 10,0.03) 0%, rgba(10, 10, 10,0.03) 45%,transparent 45%, transparent 100%),radial-gradient(circle at 48% 44%, rgba(74, 74, 74,0.03) 0%, rgba(74, 74, 74,0.03) 84%,transparent 84%, transparent 100%),radial-gradient(circle at 47% 50%, rgba(186, 186, 186,0.03) 0%, rgba(186, 186, 186,0.03) 23%,transparent 23%, transparent 100%),radial-gradient(circle at 29% 70%, rgba(9, 9, 9,0.03) 0%, rgba(9, 9, 9,0.03) 32%,transparent 32%, transparent 100%),radial-gradient(circle at 2% 75%, rgba(179, 179, 179,0.03) 0%, rgba(179, 179, 179,0.03) 19%,transparent 19%, transparent 100%),radial-gradient(circle at 2% 36%, rgba(26, 26, 26,0.03) 0%, rgba(26, 26, 26,0.03) 1%,transparent 1%, transparent 100%),radial-gradient(circle at 53% 70%, rgba(90, 90, 90,0.03) 0%, rgba(90, 90, 90,0.03) 55%,transparent 55%, transparent 100%),radial-gradient(circle at 28% 92%, rgba(31, 31, 31,0.03) 0%, rgba(31, 31, 31,0.03) 35%,transparent 35%, transparent 100%),linear-gradient(90deg, rgb(255,255,255),rgb(255,255,255));
     background-position: center center;
    background-attachment: fixed;
    background-size:cover;
}
.pizzabuffet { background: url("/cms/assets/_core/image/buffet8.jpg") center / cover fixed no-repeat; }
.blue-lens-flare { background: radial-gradient(circle at center, rgb(6 242 198), rgb(12 102 197)) center / cover fixed no-repeat; }

.phillipsgreengradient {
    background-image: linear-gradient(178deg, rgb(16,56,58),rgb(45,106,109));
}
.phillipsburgundygrad {
    background-image: linear-gradient(178deg, rgb(114,51,65),rgb(80,28,40));
}
.phillips-tan {
    background-image: repeating-linear-gradient(135deg, rgb(221,217,197) 0px, rgb(221,217,197) 2px,transparent 2px, transparent 4px),linear-gradient(90deg, rgb(236,233,218),rgb(236,233,218));
}
.him-blue {
    background-image: linear-gradient(94deg, rgba(163, 163, 163, 0.09) 0%, rgba(163, 163, 163, 0.09) 33.3%,rgba(100, 100, 100, 0.09) 33.3%, rgba(100, 100, 100, 0.09) 66.6%,rgba(162, 162, 162, 0.09) 66.6%, rgba(162, 162, 162, 0.09) 99%),linear-gradient(300deg, rgba(193, 193, 193, 0.06) 0%, rgba(193, 193, 193, 0.06) 33.3%,rgba(169, 169, 169, 0.06) 33.3%, rgba(169, 169, 169, 0.06) 66.6%,rgba(92, 92, 92, 0.06) 66.6%, rgba(92, 92, 92, 0.06) 99%),linear-gradient(171deg, rgba(45, 45, 45, 0.03) 0%, rgba(45, 45, 45, 0.03) 33.3%,rgba(223, 223, 223, 0.03) 33.3%, rgba(223, 223, 223, 0.03) 66.6%,rgba(173, 173, 173, 0.03) 66.6%, rgba(173, 173, 173, 0.03) 99%),linear-gradient(322deg, rgba(226, 226, 226, 0.06) 0%, rgba(226, 226, 226, 0.06) 33.3%,rgba(81, 81, 81, 0.06) 33.3%, rgba(81, 81, 81, 0.06) 66.6%,rgba(186, 186, 186, 0.06) 66.6%, rgba(186, 186, 186, 0.06) 99%),linear-gradient(127deg, rgba(225, 225, 225, 0.04) 0%, rgba(225, 225, 225, 0.04) 33.3%,rgba(95, 95, 95, 0.04) 33.3%, rgba(95, 95, 95, 0.04) 66.6%,rgba(39, 39, 39, 0.04) 66.6%, rgba(39, 39, 39, 0.04) 99%),linear-gradient(170deg, rgba(184, 184, 184, 0.06) 0%, rgba(184, 184, 184, 0.06) 33.3%,rgba(0, 0, 0, 0.06) 33.3%, rgba(0, 0, 0, 0.06) 66.6%,rgba(140, 140, 140, 0.06) 66.6%, rgba(140, 140, 140, 0.06) 99.89999999999999%),linear-gradient(365deg, rgba(40, 40, 40, 0.07) 0%, rgba(40, 40, 40, 0.07) 33.3%,rgba(214, 214, 214, 0.07) 33.3%, rgba(214, 214, 214, 0.07) 66.6%,rgba(190, 190, 190, 0.07) 66.6%, rgba(190, 190, 190, 0.07) 99.89999999999999%),linear-gradient(103deg, rgba(230, 230, 230, 0) 0%, rgba(230, 230, 230, 0) 33.3%,rgba(241, 241, 241, 0) 33.3%, rgba(241, 241, 241, 0) 66.6%,rgba(55, 55, 55, 0) 66.6%, rgba(55, 55, 55, 0) 99%),linear-gradient(42deg, #2625e3,#0bbaef);
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size:cover;
}
.him-orange {
    background-image: radial-gradient(circle at 11% 62%, rgba(205, 205, 205,0.04) 0%, rgba(205, 205, 205,0.04) 50%,rgba(149, 149, 149,0.04) 50%, rgba(149, 149, 149,0.04) 100%),radial-gradient(circle at 78% 10%, rgba(49, 49, 49,0.04) 0%, rgba(49, 49, 49,0.04) 50%,rgba(254, 254, 254,0.04) 50%, rgba(254, 254, 254,0.04) 100%),radial-gradient(circle at 92% 43%, rgba(34, 34, 34,0.04) 0%, rgba(34, 34, 34,0.04) 50%,rgba(206, 206, 206,0.04) 50%, rgba(206, 206, 206,0.04) 100%),linear-gradient(517deg, rgb(213,45,0),rgb(227,223,61));
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size:cover;
}
.HIM-Blue {
    background-color:#053968;
    color:#ffffff;
}
.HIM-Blue-text {
    color:#085498;
}
.HIM-Dark_Navy {
    background-color:#053968;
}

/*==================== image hover effect ====================*/

.hover1 img {
  filter: grayscale(0);
  transform: scale(1.01);
  transition: filter var(--tc-transition-slow), transform var(--tc-transition-slow);
}

.hover1 img:hover {
  filter: grayscale(1);
  transform: scale(1.05);
}

.centering {
  width:99%;
  /*height:16em;*/
  display:flex;
  justify-content:center;
  align-items:center;
  /*gap:15px;*/
}

/*====================Very nice Button Hover Effect====================*/
.btn-green {
    color: #FFFFFF !important;
    text-transform: uppercase;
    cursor: pointer;

/* ======== Below is the code to change the color of the button ======== */
    background: #08984c;  /* fallback for old browsers */
    /*background: -webkit-linear-gradient(to right, #64962C, #73C05A);  /* Chrome 10-25, Safari 5.1-6 */
    /*background: linear-gradient(to right, #a8e063, #56ab2f); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
/* ===================================================================== */
    font-weight: 700;
    padding: 10px 35px;
    border: 5px solid #bbe87a !important;
    border-radius: 10px;
    transition: all 0.8s ease 0s;
    text-align: center;
    text-decoration: none;
}
.btn-green a:link, a:visited {
    color: white;
}
.btn-green:hover {
    border-radius: 15px;

/*==== Below is the code to change the colors of the button on hover ====*/

    color: #ffffff !important;
    background: #000000;
    border-color: #6ca41d !important;
    text-decoration: none;
    transition: all 0.5s ease 0s;
}
/* ==================================================================== */

/*====================Very nice Button Hover Effect Orange====================*/
.btn-orange {
    color: #fff !important;
    text-transform: uppercase;
    cursor: pointer;
    background: linear-gradient(to right, #ff6200, #ffd060);
    font-weight: 700;
    padding: 10px 35px;
    border: 5px solid #ffd060 !important;
    border-radius: 10px;
    transition: all 0.8s ease 0s;
    text-align: center;
    text-decoration: none;
}
.btn-orange a:link, a:visited {
    color: white !important;
}
.btn-orange:hover {
    border-radius: 15px;

/*==== Below is the code to change the colors of the button on hover ====*/

    color: #ffffff !important;
    background: #000000;
    border-color: #ff6200 !important;
    text-decoration: none;
    transition: all 0.5s ease 0s;
}

/* ==================================================================== */

/*====================Very nice Button Hover Effect Red====================*/
.btn-red {
    color: #FFFFFF !important;
    text-transform: uppercase;
    cursor: pointer;

/* ======== Below is the code to change the color of the button ======== */
    background: #ff1616;  /* fallback for old browsers */
    /*background: -webkit-linear-gradient(to right, #c10404, #d07a00);  /* Chrome 10-25, Safari 5.1-6 */
    /*background: linear-gradient(to right, #c10404, #d07a00); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
/* ===================================================================== */
    font-weight: 700;
    padding: 10px 35px;
    border: 5px solid #e78903 !important;
    border-radius: 10px;
    transition: all 0.8s ease 0s;
    text-align: center;
    text-decoration: none;
}
.btn-red a:link, a:visited {
    color: white !important;
}
.btn-red:hover {
    border-radius: 15px;

/*==== Below is the code to change the colors of the button on hover ====*/

    color: #ffffff !important;
    background: #000000;
    border-color: #c10404 !important;
    text-decoration: none;
    transition: all 0.5s ease 0s;
}


/* ==================================================================== */

/*====================Very nice Button Hover Effect Red====================*/
.btn-blue {
    color: #FFFFFF !important;
    text-transform: uppercase;
    cursor: pointer;

/* ======== Below is the code to change the color of the button ======== */
    background: #0b6fc8;  /* fallback for old browsers */
    /*background: -webkit-linear-gradient(to right, #018295, #48cee2);  /* Chrome 10-25, Safari 5.1-6 */
    /*background: linear-gradient(to right, #018295, #48cee2); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
/* ===================================================================== */
    font-weight: 700;
    padding: 10px 35px;
    border: 5px solid #70d4e3 !important;
    border-radius: 10px;
    transition: all 0.8s ease 0s;
    text-align: center;
    text-decoration: none;
    /*display: inline-block;*/
}
.btn-blue a:link, a:visited {
    color: white !important;
}
.btn-blue:hover {
    border-radius: 15px;
    color: #333 !important;

/*==== Below is the code to change the colors of the button on hover ====*/

    color: #ffffff !important;
    background: #000;
    border-color: #008498 !important;
    text-decoration: none;
    transition: all 0.5s ease 0s;
}

/* ==================================================================== */


.fontsizing{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100vh;
  background-color: rgba(1, 1, 1, 0.4);
}

.textresponsive{
  top: 0;
  left: 0;
  margin: 0;
  padding: 0;
  color: white;
  font-size: 24vw;
  /* font-size: 12vw; */
}
/* ====================Margin Classes====================*/
.margin5 {
    margin:5px;
}
.margin10 {
    margin:10px;
}
.margin15 {
    margin:15px;
}
.margin20 {
    margin:20px;
}
.margin25 {
    margin:25px;
}
.margin30 {
    margin:30px;
}

/*===================== Ken Burns Effect ===================*/
.image-wrap {
  width: 100%;
  height: 40vw;
  display:flex;
  justify-content:center;
  align-items:center;
  overflow: hidden;
  position: relative;
}

.image-wrap img {
  width: 100%;
  animation: move 25s ease;
  position: absolute;
}

@keyframes move {
  0% { transform-origin: bottom left; transform: scale(1); }
  100% { transform: scale(1.2); }
}
/*==============================  To Top Button ==============================*/

#ToTopBtn {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 30px;
  z-index: 99;
  font-size: 18px;
  border: none;
  outline: none;
  background-color: red;
  color: white;
  cursor: pointer;
  padding: 15px;
  border-radius: 4px;
}

#ToTopBtn:hover {
  background-color: #555;
}

/*============================================================================*/

.divresizer div {
 /*  Not sure what you are "clamping" here.  Needs a directive... I remmed it out cause it displayed in error
  clamp(1em, 2.5vw, 2.5em);
*/
 font-size: clamp(.8em, 1vw, 1.1em);
}
/* ===================Slide In Contact Form CSS ================*/
.container2 {
  max-width: 1170px;
  margin-left: auto;
  margin-right: auto;
  padding: 1em;
}

ul {
  list-style: none;
  padding: 0;
}

.brand {
  text-align: center;
}

.brand span {
  color: #fff;
}

.wrapper{
 box-shadow: 0 8px 10px rgb(0 0 0 / 0.5);
border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}

.wrapper>* {
  padding: 1em;
}
.info {
  background: #10383a;
  color:#bdbdbd;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}
.info h3, .info ul{
  text-align: center;
  margin: 0 0 1rem 0;
}

.contact{
  background: #EEEEEE;
}

.contact form {
  padding: 1em;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}


.contact form label{
  display: block;
}

.contact form p{
  margin: 0;
}

.contact form .full{
  grid-column: 1/3;
}

.contact form button, .contact form input, .contact form textarea{
  width: 100%;
  padding: .2rem;
  border: 1px solid #666666;
}

.contact form button {
  background: #fff;
  border: 1px solid #666666;
  text-transform: uppercase;
}

.contact form button:hover, .contact form button:focus{
  color: #FFF;
  background: #a6a150;
  outline:0;
}

/*large screens*/
@media(min-width:700px){
  .wrapper{
    display: grid;
    grid-template-columns: 1fr 2fr;
  }
  .wrapper>*{
    padding: 1.5em;
  }
  .info h3, .info ul, .brand{
    text-align: left;
  }
}
/*=======================End of Form Stuff=====================*/

/*==================RESPONSIVE IFRAME CSS==================*/

.iframe-container {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
}

/* Then style the iframe to fit in the container div with full height and width */
.responsive-iframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 96%;
  height: 96%;
  margin:0 auto;
}

/*==========================================================*/





/*==========================Animations==========================*/

/******************
* Bounce in right *
*******************/


.animated { animation-duration: 1s; animation-fill-mode: both; }
.slow { animation-duration: 1.5s; animation-fill-mode: both; }
.slower { animation-duration: 2s; animation-fill-mode: both; }
.slowest { animation-duration: 3s; animation-fill-mode: both; }

/* Animation delay utilities */
.delay-250 { animation-delay: 0.25s; }
.delay-500 { animation-delay: 0.5s; }
.delay-750 { animation-delay: 0.75s; }
.delay-1000 { animation-delay: 1s; }
.delay-1250 { animation-delay: 1.25s; }
.delay-1500 { animation-delay: 1.5s; }
.delay-1750 { animation-delay: 1.75s; }
.delay-2000 { animation-delay: 2s; }
.delay-2500 { animation-delay: 2.5s; }
.delay-3000 { animation-delay: 3s; }
.delay-3500 { animation-delay: 3.5s; }

.bounceInRight, .bounceInLeft, .bounceInUp, .bounceInDown{
    opacity:0;
    -webkit-transform: translateX(400px);
    transform: translateX(400px);
}
.fadeInRight, .fadeInLeft, .fadeInUp, .fadeInDown{
    opacity:0;
    -webkit-transform: translateX(400px);
    transform: translateX(400px);
}

.flipInX, .flipInY, .rotateIn, .rotateInUpLeft, .rotateInUpRight, .rotateInDownLeft, .rotateDownUpRight, .rollIn{
    opacity:0;
}

.lightSpeedInRight, .lightSpeedInLeft{
    opacity:0;
    -webkit-transform: translateX(400px);
    transform: translateX(400px);
}

/***********
* bounceIn *
************/
@-webkit-keyframes bounceIn {
    0% {
        opacity: 0;
        -webkit-transform: scale(.3);
    }

    50% {
        opacity: 1;
        -webkit-transform: scale(1.05);
    }

    70% {
        -webkit-transform: scale(.9);
    }

    100% {
         -webkit-transform: scale(1);
    }
}

@keyframes bounceIn {
    0% {
        opacity: 0;
        transform: scale(.3);
    }

    50% {
        opacity: 1;
        transform: scale(1.05);
    }

    70% {
        transform: scale(.9);
    }

    100% {
        transform: scale(1);
    }
}

.bounceIn.go {
    -webkit-animation-name: bounceIn;
    animation-name: bounceIn;
}

/****************
* bounceInRight *
****************/

@-webkit-keyframes bounceInRight {
    0% {
        opacity: 0;

        -webkit-transform: translateX(400px);
    }
    60% {

        -webkit-transform: translateX(-30px);
    }
    80% {
        -webkit-transform: translateX(10px);
    }
    100% {
    opacity: 1;

        -webkit-transform: translateX(0);
    }
}

@keyframes bounceInRight {
    0% {
        opacity: 0;

        transform: translateX(400px);
    }
    60% {

        transform: translateX(-30px);
    }
    80% {
        transform: translateX(10px);
    }
    100% {
    opacity: 1;

        transform: translateX(0);
    }
}


.bounceInRight.go {
    -webkit-animation-name: bounceInRight;
    animation-name: bounceInRight;
}

/******************
* Bounce in left *
*******************/

@-webkit-keyframes bounceInLeft {
    0% {
        opacity: 0;

        -webkit-transform: translateX(-400px);
    }
    60% {

        -webkit-transform: translateX(30px);
    }
    80% {
        -webkit-transform: translateX(-10px);
    }
    100% {
        opacity: 1;

        -webkit-transform: translateX(0);
    }
}

@keyframes bounceInLeft {
    0% {
        opacity: 0;

        transform: translateX(-400px);
    }
    60% {

        transform: translateX(30px);
    }
    80% {
        transform: translateX(-10px);
    }
    100% {
        opacity: 1;

        transform: translateX(0);
    }
}

.bounceInLeft.go {
    -webkit-animation-name: bounceInLeft;
    animation-name: bounceInLeft;
}

/******************
* Bounce in up *
*******************/

@-webkit-keyframes bounceInUp {
    0% {
        opacity: 0;

        -webkit-transform: translateY(400px);
    }
    60% {

        -webkit-transform: translateY(-30px);
    }
    80% {
        -webkit-transform: translateY(10px);
    }
    100% {
        opacity: 1;

        -webkit-transform: translateY(0);
    }
}

@keyframes bounceInUp {
    0% {
        opacity: 0;

        transform: translateY(400px);
    }
    60% {

        transform: translateY(-30px);
    }
    80% {
        transform: translateY(10px);
    }
    100% {
        opacity: 1;

        transform: translateY(0);
    }
}

.bounceInUp.go {
    -webkit-animation-name: bounceInUp;
    animation-name: bounceInUp;
}


/******************
* Bounce in down *
*******************/

@-webkit-keyframes bounceInDown {
    0% {
        opacity: 0;

        -webkit-transform: translateY(-400px);
    }
    60% {

        -webkit-transform: translateY(30px);
    }
    80% {
        -webkit-transform: translateY(-10px);
    }
    100% {
        opacity: 1;

        -webkit-transform: translateY(0);
    }
}

@keyframes bounceInDown {
    0% {
        opacity: 0;

        transform: translateY(-400px);
    }
    60% {

        transform: translateY(30px);
    }
    80% {
        transform: translateY(-10px);
    }
    100% {
        opacity: 1;

        transform: translateY(0);
    }
}

.bounceInDown.go {
    -webkit-animation-name: bounceInDown;
    animation-name: bounceInDown;
}


/**********
* Fade In *
**********/
@-webkit-keyframes fadeIn {
    0% {opacity: 0;}
    100% {opacity: 1;
        display:block;}
}
@keyframes fadeIn {
    0% {opacity: 0;}
    100% {opacity: 1;
        display:block;}
}
.fadeIn{
    opacity:0;
}
.fadeIn.go {
    -webkit-animation-name: fadeIn;
    animation-name: fadeIn;
}

/**********
* Grow in *
***********/

@-webkit-keyframes growIn {
    0% {
        -webkit-transform: scale(0.2);
        opacity:0;
    }
    50% {
        -webkit-transform: scale(1.2);

    }
    100% {
        -webkit-transform: scale(1);
        opacity:1;
    }
}
@keyframes growIn {
    0% {
        transform: scale(0.2);
        opacity:0;
    }
    50% {
        transform: scale(1.2);

    }
    100% {
        transform: scale(1);
        opacity:1;
    }
}
.growIn {

    -webkit-transform: scale(0.2);
    transform: scale(0.2);
    opacity:0;
}
.growIn.go{
    -webkit-animation-name: growIn;
    animation-name: growIn;
}

/********
* Shake *
********/
@-webkit-keyframes shake {
    0%, 100% {-webkit-transform: translateX(0);}
    10%, 30%, 50%, 70%, 90% {-webkit-transform: translateX(-10px);}
    20%, 40%, 60%, 80% {-webkit-transform: translateX(10px);}
}
@keyframes shake {
    0%, 100% {transform: translateX(0);}
    10%, 30%, 50%, 70%, 90% {transform: translateX(-10px);}
    20%, 40%, 60%, 80% {transform: translateX(10px);}
}
.shake.go {
    -webkit-animation-name: shake;
    animation-name: shake;
}

/********
* ShakeUp *
********/
@-webkit-keyframes shakeUp {
    0%, 100% {-webkit-transform: translateY(0);}
    10%, 30%, 50%, 70%, 90% {-webkit-transform: translateY(-10px);}
    20%, 40%, 60%, 80% {-webkit-transform: translateY(10px);}
}
@keyframes shakeUp {
    0%, 100% {transform: translateY(0);}
    10%, 30%, 50%, 70%, 90% {transform: translateY(-10px);}
    20%, 40%, 60%, 80% {transform: translateY(10px);}
}
.shakeUp.go {
    -webkit-animation-name: shakeUp;
    animation-name: shakeUp;
}

/*************
* FadeInLeft *
*************/

@-webkit-keyframes fadeInLeft {
    0% {
        opacity: 0;
        -webkit-transform: translateX(-400px);
    }
    50%{
       opacity: 0.3;
    }
    100% {
        opacity: 1;
        -webkit-transform: translateX(0);
    }
}
@keyframes fadeInLeft {
    0% {
        opacity: 0;
        transform: translateX(-400px);
    }
    50%{
       opacity: 0.3;
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}
.fadeInLeft{
    opacity: 0;
    -webkit-transform: translateX(-400px);
    transform: translateX(-400px);
}
.fadeInLeft.go {
    -webkit-animation-name: fadeInLeft;
    animation-name: fadeInLeft;
}


/*************
* FadeInRight *
*************/

@-webkit-keyframes fadeInRight {
    0% {
        opacity: 0;
        -webkit-transform: translateX(400px);
    }
    50%{
       opacity: 0.3;
    }
    100% {
        opacity: 1;
        -webkit-transform: translateX(0);
    }
}
@keyframes fadeInRight {
    0% {
        opacity: 0;
        transform: translateX(400px);
    }
    50%{
       opacity: 0.3;
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}
.fadeInRight{
    opacity: 0;
    -webkit-transform: translateX(400px);
    transform: translateX(400px);
}
.fadeInRight.go {
    -webkit-animation-name: fadeInRight;
    animation-name: fadeInRight;
}

/*************
* FadeInUp *
*************/

@-webkit-keyframes fadeInUp {
    0% {
        opacity: 0;
        -webkit-transform: translateY(400px);
    }
    50%{
       opacity: 0.3;
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
    }
}
@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(400px);
    }
    50%{
       opacity: 0.3;
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}
.fadeInUp{
    opacity: 0;
    -webkit-transform: translateY(400px);
    transform: translateY(400px);
}
.fadeInUp.go {
    -webkit-animation-name: fadeInUp;
    animation-name: fadeInUp;
}
/****************
* FadeInUpShort *
*****************/

@-webkit-keyframes fadeInUpShort {
    0% {
        opacity: 0.8;
        -webkit-transform: translateY(250px);
    }
    50%{
       opacity: 0.9;
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
    }
}
@keyframes fadeInUpShort {
    0% {
        opacity: 0.8;
        transform: translateY(250px);
    }
    50%{
       opacity: 0.9;
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}
.fadeInUpShort{
    opacity: 0.6;
    -webkit-transform: translateY(250px);
    transform: translateY(250px);
}
.fadeInUpShort.go {
    -webkit-animation-name: fadeInUp;
    animation-name: fadeInUp;
}

/*************
* FadeInDown *
*************/

@-webkit-keyframes fadeInDown {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-400px);
    }
    50%{
       opacity: 0.3;
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
    }
}
@keyframes fadeInDown {
    0% {
        opacity: 0;
        transform: translateY(-400px);
    }
    50%{
       opacity: 0.3;
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}
.fadeInDown{
    opacity: 0;
    -webkit-transform: translateY(-400px);
    transform: translateY(-400px);
}
.fadeInDown.go {
    -webkit-animation-name: fadeInDown;
    animation-name: fadeInDown;
}

/*****************
* rotateIn *
*****************/
@-webkit-keyframes rotateIn {
    0% {
        -webkit-transform-origin: center center;
        -webkit-transform: rotate(-200deg);
        opacity: 0;
    }
    100% {
        -webkit-transform-origin: center center;
        -webkit-transform: rotate(0);
        opacity: 1;
    }
}
@keyframes rotateIn {
    0% {
        transform-origin: center center;
        transform: rotate(-200deg);
        opacity: 0;
    }
    100% {
        transform-origin: center center;
        transform: rotate(0);
        opacity: 1;
    }
}
.rotateIn.go {
    -webkit-animation-name: rotateIn;
    animation-name: rotateIn;
}

/*****************
* rotateInUpLeft *
*****************/

@-webkit-keyframes rotateInUpLeft {
    0% {
        -webkit-transform-origin: left bottom;
        -webkit-transform: rotate(90deg);
        opacity: 0;
    }
    100% {
        -webkit-transform-origin: left bottom;
        -webkit-transform: rotate(0);
        opacity: 1;
    }
}
@keyframes rotateInUpLeft {
    0% {
        transform-origin: left bottom;
        transform: rotate(90deg);
        opacity: 0;
    }
    100% {
        transform-origin: left bottom;
        transform: rotate(0);
        opacity: 1;
    }
}
.rotateInUpLeft.go {
    -webkit-animation-name: rotateInUpLeft;
    animation-name: rotateInUpLeft;
}

/*******************
* rotateInDownLeft *
*******************/
@-webkit-keyframes rotateInDownLeft {
    0% {
        -webkit-transform-origin: left bottom;
        -webkit-transform: rotate(-90deg);
        opacity: 0;
    }
    100% {
        -webkit-transform-origin: left bottom;
        -webkit-transform: rotate(0);
        opacity: 1;
    }
}
@keyframes rotateInDownLeft {
    0% {
        transform-origin: left bottom;
        transform: rotate(-90deg);
        opacity: 0;
    }
    100% {
        transform-origin: left bottom;
        transform: rotate(0);
        opacity: 1;
    }
}
.rotateInDownLeft.go {
    -webkit-animation-name: rotateInDownLeft;
    animation-name: rotateInDownLeft;
}

/******************
* rotateInUpRight *
*******************/

@-webkit-keyframes rotateInUpRight {
    0% {
        -webkit-transform-origin: right bottom;
        -webkit-transform: rotate(-90deg);
        opacity: 0;
    }
    100% {
        -webkit-transform-origin: right bottom;
        -webkit-transform: rotate(0);
        opacity: 1;
    }
}
@keyframes rotateInUpRight {
    0% {
        transform-origin: right bottom;
        transform: rotate(-90deg);
        opacity: 0;
    }
    100% {
        transform-origin: right bottom;
        transform: rotate(0);
        opacity: 1;
    }
}
.rotateInUpRight.go {
    -webkit-animation-name: rotateInUpRight;
    animation-name: rotateInUpRight;
}

/********************
* rotateInDownRight *
********************/

@-webkit-keyframes rotateInDownRight {
    0% {
        -webkit-transform-origin: right bottom;
        -webkit-transform: rotate(90deg);
        opacity: 0;
    }
    100% {
        -webkit-transform-origin: right bottom;
        -webkit-transform: rotate(0);
        opacity: 1;
    }
}
@keyframes rotateInDownRight {
    0% {
        transform-origin: right bottom;
        transform: rotate(90deg);
        opacity: 0;
    }
    100% {
        transform-origin: right bottom;
        transform: rotate(0);
        opacity: 1;
    }
}
.rotateInDownRight.go {
    -webkit-animation-name: rotateInDownRight;
    animation-name: rotateInDownRight;
}

/*********
* rollIn *
**********/

@-webkit-keyframes rollIn {
    0% { opacity: 0; -webkit-transform: translateX(-100%) rotate(-120deg); }
    100% { opacity: 1; -webkit-transform: translateX(0px) rotate(0deg); }
}
@keyframes rollIn {
    0% { opacity: 0; transform: translateX(-100%) rotate(-120deg); }
    100% { opacity: 1; transform: translateX(0px) rotate(0deg); }
}
.rollIn.go {
    -webkit-animation-name: rollIn;
    animation-name: rollIn;
}

/*********
* wiggle *
**********/

@-webkit-keyframes wiggle {
    0% { -webkit-transform: skewX(9deg); }
    10% { -webkit-transform: skewX(-8deg); }
    20% { -webkit-transform: skewX(7deg); }
    30% { -webkit-transform: skewX(-6deg); }
    40% { -webkit-transform: skewX(5deg); }
    50% { -webkit-transform: skewX(-4deg); }
    60% { -webkit-transform: skewX(3deg); }
    70% { -webkit-transform: skewX(-2deg); }
    80% { -webkit-transform: skewX(1deg); }
    90% { -webkit-transform: skewX(0deg); }
    100% { -webkit-transform: skewX(0deg); }
}
@keyframes wiggle {
    0% { transform: skewX(9deg); }
    10% { transform: skewX(-8deg); }
    20% { transform: skewX(7deg); }
    30% { transform: skewX(-6deg); }
    40% { transform: skewX(5deg); }
    50% { transform: skewX(-4deg); }
    60% { transform: skewX(3deg); }
    70% { transform: skewX(-2deg); }
    80% { transform: skewX(1deg); }
    90% { transform: skewX(0deg); }
    100% { transform: skewX(0deg); }
}
.wiggle.go {
    -webkit-animation-name: wiggle;
    animation-name: wiggle;
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
}

/********
* swing *
*********/

@-webkit-keyframes swing {
    20%, 40%, 60%, 80%, 100% { -webkit-transform-origin: top center; }
    20% { -webkit-transform: rotate(15deg); }
    40% { -webkit-transform: rotate(-10deg); }
    60% { -webkit-transform: rotate(5deg); }
    80% { -webkit-transform: rotate(-5deg); }
    100% { -webkit-transform: rotate(0deg); }
}
@keyframes swing {
    20% { transform: rotate(15deg); }
    40% { transform: rotate(-10deg); }
    60% { transform: rotate(5deg); }
    80% { transform: rotate(-5deg); }
    100% { transform: rotate(0deg); }
}
.swing.go {
    -webkit-transform-origin: top center;
    transform-origin: top center;
    -webkit-animation-name: swing;
    animation-name: swing;
}

/*******
* tada *
********/

@-webkit-keyframes tada {
    0% {-webkit-transform: scale(1);}
    10%, 20% {-webkit-transform: scale(0.9) rotate(-3deg);}
    30%, 50%, 70%, 90% {-webkit-transform: scale(1.1) rotate(3deg);}
    40%, 60%, 80% {-webkit-transform: scale(1.1) rotate(-3deg);}
    100% {-webkit-transform: scale(1) rotate(0);}
}
@keyframes tada {
    0% {transform: scale(1);}
    10%, 20% {transform: scale(0.9) rotate(-3deg);}
    30%, 50%, 70%, 90% {transform: scale(1.1) rotate(3deg);}
    40%, 60%, 80% {transform: scale(1.1) rotate(-3deg);}
    100% {transform: scale(1) rotate(0);}
}
.tada.go {
    -webkit-animation-name: tada;
    animation-name: tada;
}

/*********
* wobble *
**********/

@-webkit-keyframes wobble {
  0% { -webkit-transform: translateX(0%); }
  15% { -webkit-transform: translateX(-25%) rotate(-5deg); }
  30% { -webkit-transform: translateX(20%) rotate(3deg); }
  45% { -webkit-transform: translateX(-15%) rotate(-3deg); }
  60% { -webkit-transform: translateX(10%) rotate(2deg); }
  75% { -webkit-transform: translateX(-5%) rotate(-1deg); }
  100% { -webkit-transform: translateX(0%); }
}
@keyframes wobble {
  0% { transform: translateX(0%); }
  15% { transform: translateX(-25%) rotate(-5deg); }
  30% { transform: translateX(20%) rotate(3deg); }
  45% { transform: translateX(-15%) rotate(-3deg); }
  60% { transform: translateX(10%) rotate(2deg); }
  75% { transform: translateX(-5%) rotate(-1deg); }
  100% { transform: translateX(0%); }
}
.wobble.go {
    -webkit-animation-name: wobble;
    animation-name: wobble;
}

/********
* pulse *
*********/

@-webkit-keyframes pulse {
    0% { -webkit-transform: scale(1); }
    50% { -webkit-transform: scale(1.1); }
    100% { -webkit-transform: scale(1); }
}
@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}
.pulse.go {
    -webkit-animation-name: pulse;
    animation-name: pulse;
}

/***************
* lightSpeedInRight *
****************/
@-webkit-keyframes lightSpeedInRight {
   0% { -webkit-transform: translateX(100%) skewX(-30deg); opacity: 0; }
    60% { -webkit-transform: translateX(-20%) skewX(30deg); opacity: 1; }
    80% { -webkit-transform: translateX(0%) skewX(-15deg); opacity: 1; }
    100% { -webkit-transform: translateX(0%) skewX(0deg); opacity: 1; }
}
@keyframes lightSpeedInRight {
    0% { transform: translateX(100%) skewX(-30deg); opacity: 0; }
    60% { transform: translateX(-20%) skewX(30deg); opacity: 1; }
    80% { transform: translateX(0%) skewX(-15deg); opacity: 1; }
    100% { transform: translateX(0%) skewX(0deg); opacity: 1; }
}
.lightSpeedInRight.go {
    -webkit-animation-name: lightSpeedInRight;
    animation-name: lightSpeedInRight;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
}

/***************
* lightSpeedInLeft *
****************/
@-webkit-keyframes lightSpeedInLeft {
   0% { -webkit-transform: translateX(-100%) skewX(30deg); opacity: 0; }
    60% { -webkit-transform: translateX(20%) skewX(-30deg); opacity: 1; }
    80% { -webkit-transform: translateX(0%) skewX(15deg); opacity: 1; }
    100% { -webkit-transform: translateX(0%) skewX(0deg); opacity: 1; }
}
@keyframes lightSpeedInLeft {
    0% { transform: translateX(-100%) skewX(30deg); opacity: 0; }
    60% { transform: translateX(20%) skewX(-30deg); opacity: 1; }
    80% { transform: translateX(0%) skewX(15deg); opacity: 1; }
    100% { transform: translateX(0%) skewX(0deg); opacity: 1; }
}
.lightSpeedInLeft.go {
    -webkit-animation-name: lightSpeedInLeft;
    animation-name: lightSpeedInLeft;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
}


/*******
* Flip *
*******/
@-webkit-keyframes flip {
    0% {
        -webkit-transform: perspective(400px) rotateY(0);
        -webkit-animation-timing-function: ease-out;
    }
    40% {
        -webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg);
        -webkit-animation-timing-function: ease-out;
    }
    50% {
        -webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
        -webkit-animation-timing-function: ease-in;
    }
    80% {
        -webkit-transform: perspective(400px) rotateY(360deg) scale(.95);
        -webkit-animation-timing-function: ease-in;
    }
    100% {
        -webkit-transform: perspective(400px) scale(1);
        -webkit-animation-timing-function: ease-in;
    }
}
@keyframes flip {
    0% {
        transform: perspective(400px) rotateY(0);
        animation-timing-function: ease-out;
    }
    40% {
        transform: perspective(400px) translateZ(150px) rotateY(170deg);
        animation-timing-function: ease-out;
    }
    50% {
        transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
        animation-timing-function: ease-in;
    }
    80% {
        transform: perspective(400px) rotateY(360deg) scale(.95);
        animation-timing-function: ease-in;
    }
    100% {
        transform: perspective(400px) scale(1);
        animation-timing-function: ease-in;
    }
}
.flip.go {
    -webkit-backface-visibility: visible !important;
    -webkit-animation-name: flip;
    backface-visibility: visible !important;
    animation-name: flip;
}

/**********
* flipInX *
**********/
@-webkit-keyframes flipInX {
    0% {
        -webkit-transform: perspective(400px) rotateX(90deg);
        opacity: 0;
    }
    40% {
        -webkit-transform: perspective(400px) rotateX(-10deg);
    }
    70% {
        -webkit-transform: perspective(400px) rotateX(10deg);
    }
    100% {
        -webkit-transform: perspective(400px) rotateX(0deg);
        opacity: 1;
    }
}
@keyframes flipInX {
    0% {
        transform: perspective(400px) rotateX(90deg);
        opacity: 0;
    }
    40% {
        transform: perspective(400px) rotateX(-10deg);
    }
    70% {
        transform: perspective(400px) rotateX(10deg);
    }
    100% {
        transform: perspective(400px) rotateX(0deg);
        opacity: 1;
    }
}
.flipInX.go {
    -webkit-backface-visibility: visible !important;
    -webkit-animation-name: flipInX;
    backface-visibility: visible !important;
    animation-name: flipInX;
}

/**********
* flipInY *
**********/

@-webkit-keyframes flipInY {
    0% {
        -webkit-transform: perspective(400px) rotateY(90deg);
        opacity: 0;
    }
    40% {
        -webkit-transform: perspective(400px) rotateY(-10deg);
    }
    70% {
        -webkit-transform: perspective(400px) rotateY(10deg);
    }
    100% {
        -webkit-transform: perspective(400px) rotateY(0deg);
        opacity: 1;
    }
}
@keyframes flipInY {
    0% {
        transform: perspective(400px) rotateY(90deg);
        opacity: 0;
    }
    40% {
        transform: perspective(400px) rotateY(-10deg);
    }
    70% {
        transform: perspective(400px) rotateY(10deg);
    }
    100% {
        transform: perspective(400px) rotateY(0deg);
        opacity: 1;
    }
}
.flipInY.go {
    -webkit-backface-visibility: visible !important;
    -webkit-animation-name: flipInY;
    backface-visibility: visible !important;
    animation-name: flipInY;
}

/*****************
* Out animations *
*****************/


/************
* bounceOut *
*************/
@-webkit-keyframes bounceOut {
    0% {
        -webkit-transform: scale(1);
    }
    25% {
        -webkit-transform: scale(.95);
    }
    50% {
        opacity: 1;
        -webkit-transform: scale(1.1);
    }
    100% {
        opacity: 0;
        -webkit-transform: scale(.3);
    }
}
@keyframes bounceOut {
    0% {
        transform: scale(1);
    }
    25% {
        transform: scale(.95);
    }
    50% {
        opacity: 1;
        transform: scale(1.1);
    }
    100% {
        opacity: 0;
        transform: scale(.3);
    }
}
.bounceOut.goAway {
    -webkit-animation-name: bounceOut;
    animation-name: bounceOut;
}

/************
* bounceOutUp *
*************/
@-webkit-keyframes bounceOutUp {
    0% {
        -webkit-transform: translateY(0);
    }
    20% {
        opacity: 1;
        -webkit-transform: translateY(20px);
    }
    100% {
        opacity: 0;
        -webkit-transform: translateY(-2000px);
    }
}
@keyframes bounceOutUp {
    0% {
        transform: translateY(0);
    }
    20% {
        opacity: 1;
        transform: translateY(20px);
    }
    100% {
        opacity: 0;
        transform: translateY(-2000px);
    }
}
.bounceOutUp.goAway {
    -webkit-animation-name: bounceOutUp;
    animation-name: bounceOutUp;
}

/************
* bounceOutDown *
*************/
@-webkit-keyframes bounceOutDown {
    0% {
        -webkit-transform: translateY(0);
    }
    20% {
        opacity: 1;
        -webkit-transform: translateY(-20px);
    }
    100% {
        opacity: 0;
        -webkit-transform: translateY(2000px);
    }
}
@keyframes bounceOutDown {
    0% {
        transform: translateY(0);
    }
    20% {
        opacity: 1;
        transform: translateY(-20px);
    }
    100% {
        opacity: 0;
        transform: translateY(2000px);
    }
}
.bounceOutDown.goAway {
    -webkit-animation-name: bounceOutDown;
    animation-name: bounceOutDown;
}


/************
* bounceOutLeft *
*************/
@-webkit-keyframes bounceOutLeft {
    0% {
        -webkit-transform: translateX(0);
    }
    20% {
        opacity: 1;
        -webkit-transform: translateX(20px);
    }
    100% {
        opacity: 0;
        -webkit-transform: translateX(-2000px);
    }
}
@keyframes bounceOutLeft {
    0% {
        transform: translateX(0);
    }
    20% {
        opacity: 1;
        transform: translateX(20px);
    }
    100% {
        opacity: 0;
        transform: translateX(-2000px);
    }
}
.bounceOutLeft.goAway {
    -webkit-animation-name: bounceOutLeft;
    animation-name: bounceOutLeft;
}

/************
* bounceOutRight *
*************/
@-webkit-keyframes bounceOutRight {
    0% {
        -webkit-transform: translateX(0);
    }
    20% {
        opacity: 1;
        -webkit-transform: translateX(-20px);
    }
    100% {
        opacity: 0;
        -webkit-transform: translateX(2000px);
    }
}
@keyframes bounceOutRight {
    0% {
        transform: translateX(0);
    }
    20% {
        opacity: 1;
        transform: translateX(-20px);
    }
    100% {
        opacity: 0;
        transform: translateX(2000px);
    }
}
.bounceOutRight.goAway {
    -webkit-animation-name: bounceOutRight;
    animation-name: bounceOutRight;
}

/************
* fadeOut *
*************/
@-webkit-keyframes fadeOut {
    0% {opacity: 1;}
    100% {opacity: 0;}
}
@keyframes fadeOut {
    0% {opacity: 1;}
    100% {opacity: 0;}
}
.fadeOut.goAway {
    -webkit-animation-name: fadeOut;
    animation-name: fadeOut;
}

/************
* fadeOutUp *
*************/
@-webkit-keyframes fadeOutUp {
    0% {
        opacity: 1;
        -webkit-transform: translateY(0);
    }
    100% {
        opacity: 0;
        -webkit-transform: translateY(-2000px);
    }
}
@keyframes fadeOutUp {
    0% {
        opacity: 1;
        transform: translateY(0);
    }
    100% {
        opacity: 0;
        transform: translateY(-2000px);
    }
}
.fadeOutUp.goAway {
    -webkit-animation-name: fadeOutUp;
    animation-name: fadeOutUp;
}

/************
* fadeOutDown *
*************/
@-webkit-keyframes fadeOutDown {
    0% {
        opacity: 1;
        -webkit-transform: translateY(0);
    }
    100% {
        opacity: 0;
        -webkit-transform: translateY(2000px);
    }
}
@keyframes fadeOutDown {
    0% {
        opacity: 1;
        transform: translateY(0);
    }
    100% {
        opacity: 0;
        transform: translateY(2000px);
    }
}
.fadeOutDown.goAway {
    -webkit-animation-name: fadeOutDown;
    animation-name: fadeOutDown;
}

/************
* fadeOutLeft *
*************/
@-webkit-keyframes fadeOutLeft {
    0% {
        opacity: 1;
        -webkit-transform: translateX(0);
    }
    100% {
        opacity: 0;
        -webkit-transform: translateX(-2000px);
    }
}
@keyframes fadeOutLeft {
    0% {
        opacity: 1;
        transform: translateX(0);
    }
    100% {
        opacity: 0;
        transform: translateX(-2000px);
    }
}
.fadeOutLeft.goAway {
    -webkit-animation-name: fadeOutLeft;
    animation-name: fadeOutLeft;
}

/************
* fadeOutRight *
*************/
@-webkit-keyframes fadeOutRight {
    0% {
        opacity: 1;
        -webkit-transform: translateX(0);
    }
    100% {
        opacity: 0;
        -webkit-transform: translateX(2000px);
    }
}
@keyframes fadeOutRight {
    0% {
        opacity: 1;
        transform: translateX(0);
    }
    100% {
        opacity: 0;
        transform: translateX(2000px);
    }
}
.fadeOutRight.goAway {
    -webkit-animation-name: fadeOutRight;
    animation-name: fadeOutRight;
}
/************
* flipOutX *
*************/
@-webkit-keyframes flipOutX {
    0% {
        -webkit-transform: perspective(400px) rotateX(0deg);
        opacity: 1;
    }
    100% {
        -webkit-transform: perspective(400px) rotateX(90deg);
        opacity: 0;
    }
}
@keyframes flipOutX {
    0% {
        transform: perspective(400px) rotateX(0deg);
        opacity: 1;
    }
    100% {
        transform: perspective(400px) rotateX(90deg);
        opacity: 0;
    }
}
.flipOutX.goAway {
    -webkit-animation-name: flipOutX;
    -webkit-backface-visibility: visible !important;
    animation-name: flipOutX;
    backface-visibility: visible !important;
}

/************
* flipOutY *
*************/
@-webkit-keyframes flipOutY {
    0% {
        -webkit-transform: perspective(400px) rotateY(0deg);
        opacity: 1;
    }
    100% {
        -webkit-transform: perspective(400px) rotateY(90deg);
        opacity: 0;
    }
}
@keyframes flipOutY {
    0% {
        transform: perspective(400px) rotateY(0deg);
        opacity: 1;
    }
    100% {
        transform: perspective(400px) rotateY(90deg);
        opacity: 0;
    }
}
.flipOutY {
    -webkit-backface-visibility: visible !important;
    -webkit-animation-name: flipOutY;
    backface-visibility: visible !important;
    animation-name: flipOutY;
}

/************
* lightSpeedOutRight *
*************/
@-webkit-keyframes lightSpeedOutRight {
    0% { -webkit-transform: translateX(0%) skewX(0deg); opacity: 1; }
    100% { -webkit-transform: translateX(100%) skewX(-30deg); opacity: 0; }
}
@keyframes lightSpeedOutRight {
    0% { transform: translateX(0%) skewX(0deg); opacity: 1; }
    100% { transform: translateX(100%) skewX(-30deg); opacity: 0; }
}
.lightSpeedOutRight.goAway {
    -webkit-animation-name: lightSpeedOutRight;
    animation-name: lightSpeedOutRight;
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
}


/************
* lightSpeedOutLeft *
*************/
@-webkit-keyframes lightSpeedOutLeft {
    0% { -webkit-transform: translateX(0%) skewX(0deg); opacity: 1; }
    100% { -webkit-transform: translateX(-100%) skewX(30deg); opacity: 0; }
}
@keyframes lightSpeedOutLeft {
    0% { transform: translateX(0%) skewX(0deg); opacity: 1; }
    100% { transform: translateX(-100%) skewX(30deg); opacity: 0; }
}
.lightSpeedOutLeft.goAway {
    -webkit-animation-name: lightSpeedOutLeft;
    animation-name: lightSpeedOutLeft;
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;

}

/************
* rotateOut *
*************/
@-webkit-keyframes rotateOut {
    0% {
        -webkit-transform-origin: center center;
        -webkit-transform: rotate(0);
        opacity: 1;
    }
    100% {
        -webkit-transform-origin: center center;
        -webkit-transform: rotate(200deg);
        opacity: 0;
    }
}
@keyframes rotateOut {
    0% {
        transform-origin: center center;
        transform: rotate(0);
        opacity: 1;
    }
    100% {
        transform-origin: center center;
        transform: rotate(200deg);
        opacity: 0;
    }
}
.rotateOut.goAway {
    -webkit-animation-name: rotateOut;
    animation-name: rotateOut;
}


/************
* rotateOutUpLeft *
*************/
@keyframes rotateOutUpLeft {
    0% { transform-origin: left bottom; transform: rotate(0); opacity: 1; }
    100% { transform-origin: left bottom; transform: rotate(-90deg); opacity: 0; }
}
.rotateOutUpLeft.goAway {
    -webkit-animation-name: rotateOutUpLeft;
    animation-name: rotateOutUpLeft;
}

/************
* rotateOutDownLeft *
*************/

@-webkit-keyframes rotateOutDownLeft {
    0% {
        -webkit-transform-origin: left bottom;
        -webkit-transform: rotate(0);
        opacity: 1;
    }
    100% {
        -webkit-transform-origin: left bottom;
        -webkit-transform: rotate(90deg);
        opacity: 0;
    }
}
@keyframes rotateOutDownLeft {
    0% {
        transform-origin: left bottom;
        transform: rotate(0);
        opacity: 1;
    }
    100% {
        transform-origin: left bottom;
        transform: rotate(90deg);
        opacity: 0;
    }
}
.rotateOutDownLeft.goAway {
    -webkit-animation-name: rotateOutDownLeft;
    animation-name: rotateOutDownLeft;
}
/************
* rotateOutUpRight *
*************/

@-webkit-keyframes rotateOutUpRight {
    0% {
        -webkit-transform-origin: right bottom;
        -webkit-transform: rotate(0);
        opacity: 1;
    }
    100% {
        -webkit-transform-origin: right bottom;
        -webkit-transform: rotate(90deg);
        opacity: 0;
    }
}
@keyframes rotateOutUpRight {
    0% {
        transform-origin: right bottom;
        transform: rotate(0);
        opacity: 1;
    }
    100% {
        transform-origin: right bottom;
        transform: rotate(90deg);
        opacity: 0;
    }
}
.rotateOutUpRight.goAway {
    -webkit-animation-name: rotateOutUpRight;
    animation-name: rotateOutUpRight;
}

/************
* rollOut *
*************/
@-webkit-keyframes rollOut {
    0% {
        opacity: 1;
        -webkit-transform: translateX(0px) rotate(0deg);
    }
    100% {
        opacity: 0;
        -webkit-transform: translateX(100%) rotate(120deg);
    }
}
@keyframes rollOut {
    0% {
        opacity: 1;
        transform: translateX(0px) rotate(0deg);
    }
    100% {
        opacity: 0;
        transform: translateX(100%) rotate(120deg);
    }
}
.rollOut.goAway {
    -webkit-animation-name: rollOut;
    animation-name: rollOut;
}
/*****************
* Short Animations
*******************/

/*********************
* fadeInUpShort
*********************/
@-webkit-keyframes fadeInUpShort {
    0% {
        opacity: 0;
        -webkit-transform: translateY(20px);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
    }
}

@keyframes fadeInUpShort {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}
.fadeInUpShort{
    opacity: 0;
    -webkit-transform: translateY(20px);
    transform: translateY(20px);
}
.fadeInUpShort.go {
    -webkit-animation-name: fadeInUpShort;
    animation-name: fadeInUpShort;
}

/*********************
* fadeInDownShort
*********************/
@-webkit-keyframes fadeInDownShort {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-20px);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
    }
}

@keyframes fadeInDownShort {
    0% {
        opacity: 0;
        transform: translateY(-20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}
.fadeInDownShort{
    opacity: 0;
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px);
}
.fadeInDownShort.go {
    -webkit-animation-name: fadeInDownShort;
    animation-name: fadeInDownShort;
}

/*********************
* fadeInRightShort
*********************/
@-webkit-keyframes fadeInRightShort {
    0% {
        opacity: 0;
        -webkit-transform: translateX(20px);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateX(0);
    }
}
@keyframes fadeInRightShort {
    0% {
        opacity: 0;
        transform: translateX(20px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}
.fadeInRightShort {
    opacity: 0;
    -webkit-transform: translateX(20px);
    transform: translateX(20px);
}
.fadeInRightShort.go {
    -webkit-animation-name: fadeInRightShort;
    animation-name: fadeInRightShort;
}

/*********************
* fadeInLeftShort
*********************/
@-webkit-keyframes fadeInLeftShort {
    0% {
        opacity: 0;
        -webkit-transform: translateX(-20px);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateX(0);
    }
}
@keyframes fadeInLeftShort {
    0% {
        opacity: 0;
        transform: translateX(-20px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}
.fadeInLeftShort {
    opacity: 0;
    -webkit-transform: translateX(-20px);
    transform: translateX(-20px);
}
.fadeInLeftShort.go {
    -webkit-animation-name: fadeInLeftShort;
    animation-name: fadeInLeftShort;
}
/* Zooming entrances */
@-webkit-keyframes zoomIn {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }

  50% {
    opacity: 1;
  }
}
@keyframes zoomIn {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }

  50% {
    opacity: 1;
  }
}
.zoomIn {
  -webkit-animation-name: zoomIn;
  animation-name: zoomIn;
}
@-webkit-keyframes zoomInDown {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
@keyframes zoomInDown {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
.zoomInDown {
  -webkit-animation-name: zoomInDown;
  animation-name: zoomInDown;
}
@-webkit-keyframes zoomInLeft {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
@keyframes zoomInLeft {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
.zoomInLeft {
  -webkit-animation-name: zoomInLeft;
  animation-name: zoomInLeft;
}
@-webkit-keyframes zoomInRight {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
@keyframes zoomInRight {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
.zoomInRight {
  -webkit-animation-name: zoomInRight;
  animation-name: zoomInRight;
}
@-webkit-keyframes zoomInUp {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
@keyframes zoomInUp {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
.zoomInUp {
  -webkit-animation-name: zoomInUp;
  animation-name: zoomInUp;
}
/* Zooming exits */
@-webkit-keyframes zoomOut {
  from {
    opacity: 1;
  }

  50% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }

  to {
    opacity: 0;
  }
}
@keyframes zoomOut {
  from {
    opacity: 1;
  }

  50% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }

  to {
    opacity: 0;
  }
}
.zoomOut {
  -webkit-animation-name: zoomOut;
  animation-name: zoomOut;
}
@-webkit-keyframes zoomOutDown {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  to {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
@keyframes zoomOutDown {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  to {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
.zoomOutDown {
  -webkit-animation-name: zoomOutDown;
  animation-name: zoomOutDown;
  -webkit-transform-origin: center bottom;
  transform-origin: center bottom;
}
@-webkit-keyframes zoomOutLeft {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: scale(0.1) translate3d(-2000px, 0, 0);
    transform: scale(0.1) translate3d(-2000px, 0, 0);
  }
}
@keyframes zoomOutLeft {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: scale(0.1) translate3d(-2000px, 0, 0);
    transform: scale(0.1) translate3d(-2000px, 0, 0);
  }
}
.zoomOutLeft {
  -webkit-animation-name: zoomOutLeft;
  animation-name: zoomOutLeft;
  -webkit-transform-origin: left center;
  transform-origin: left center;
}
@-webkit-keyframes zoomOutRight {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: scale(0.1) translate3d(2000px, 0, 0);
    transform: scale(0.1) translate3d(2000px, 0, 0);
  }
}
@keyframes zoomOutRight {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: scale(0.1) translate3d(2000px, 0, 0);
    transform: scale(0.1) translate3d(2000px, 0, 0);
  }
}
.zoomOutRight {
  -webkit-animation-name: zoomOutRight;
  animation-name: zoomOutRight;
  -webkit-transform-origin: right center;
  transform-origin: right center;
}
@-webkit-keyframes zoomOutUp {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  to {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
@keyframes zoomOutUp {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  to {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
.zoomOutUp {
  -webkit-animation-name: zoomOutUp;
  animation-name: zoomOutUp;
  -webkit-transform-origin: center bottom;
  transform-origin: center bottom;
}
/*===================================End of Animation CSS===================================*/
.box {
    width:400px;
    height:400px;
    background-color:#aaaa00;
    margin:150px auto;
}

/* ############################## Stuff for Sponsorship ################################ */
.listkids {
  background: #fff;
  /*      border: 2px solid #dedede;
      border-radius: 5px;  */
  /*       position: absolute;
     positon:relative; left 50%;     */
  float: left;
  text-align: center;
  margin: 12px; /* this is around each image.*/
}

.lmargin {
  margin-left: 20vw;
}

.btn-green-form {
  color: #FFFFFF !important;
  text-transform: uppercase;
  cursor: pointer;

/* ======== Below is the code to change the color of the button ======== */
  background: #56ab2f;  /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #64962C, #73C05A);  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #a8e063, #56ab2f); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
/* ===================================================================== */
  font-weight: 700;
  padding: 6px 15px;
  border: 5px solid #bbe87a !important;
  border-radius: 10px;
  transition: all 0.8s ease 0s;
  text-align: center;
  text-decoration: none;
}
.btn-green-form a:link, a:visited {
  color: white;
}
.btn-green-form:hover {
  border-radius: 15px;
  /*==== Below is the code to change the colors of the button on hover ====*/

  color: #ffffff !important;
  background: #000000;
  border-color: #6ca41d !important;
  text-decoration: none;
  transition: all 0.3s ease 0s;
}


.btn-header {
    color: #333 !important;
    text-transform: uppercase;
    cursor: pointer;

/* ======== Below is the code to change the color of the button ======== */
    background: #fff;  /* fallback for old browsers */
    /*background: -webkit-linear-gradient(to right, #64962C, #73C05A);  /* Chrome 10-25, Safari 5.1-6 */
    /*background: linear-gradient(to right, #a8e063, #56ab2f); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
/* ===================================================================== */
    font-weight: 700;
    padding: 10px 25px;
    /*border: 5px solid #bbe87a !important;*/
    border-radius: 10px;
    transition: all 0.5s ease 0s;
    text-align: center;
    text-decoration: none;
}
.btn-header a:link, a:visited {
    color: #000000 ;
}
.btn-header:hover {
    border-radius: 15px;
    font-size:30px;

/*==== Below is the code to change the colors of the button on hover ====*/

    color: #FFF !important;
    /*background: #ff1616;
    border-color: #6ca41d !important;*/
    text-decoration: none;
    transition: all 0.3s ease 0s;
}
.BLUE-text-HIM {
    color:#085498;
}

.phillips-nav {
    font-family: Bubblegum Sans;
    font-size: 1.7em;
    text-align: center;
}

@media(min-width: 992px) { .phillips-nav {
    font-family: Bubblegum Sans;
    font-size: 1.7em;
    text-align: center;
}
}

.inset-shadow {
    box-shadow:
        inset 0px 25px 20px -10px #333,
        inset 0px -25px 20px -10px #333;
}

.read-more-btn {
    color: #FFFFFF !important;
    text-transform: uppercase;
    cursor: pointer;

/* ======== Below is the code to change the color of the button ======== */
    background: #FF9800;  /* fallback for old browsers */
    /*background: -webkit-linear-gradient(to right, #018295, #48cee2);  /* Chrome 10-25, Safari 5.1-6 */
    /*background: linear-gradient(to right, #018295, #48cee2); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
/* ===================================================================== */
    font-weight: 800;
    padding: 10px 25px;
    /*border: 5px solid #70d4e3 !important;*/
    border-radius: 5px;
    transition: all 0.8s ease 0s;
    text-align: center;
    text-decoration: none;
    margin:15px 0;
    /*display: inline-block;*/
}
.read-more-btn a:link, a:visited {
    color: white !important;
}
.read-more-btn:hover {
    /*border-radius: 15px;
    color: #333 !important;*/
/*==== Below is the code to change the colors of the button on hover ====*/

    color: #ffffff !important;
    background: #000;
    /*border-color: orange !important;*/
    text-decoration: none;
    transition: all 0.5s ease 0s;
}
/*######################  End of Code to change colors of Button on Hover #######/*

/* vidwrapper/vidcontainer moved to templates.css */


/*temporary code for Chimney Sweep */
/* =========================================
   TOP TRUST BANNER
   FULL REPLACEMENT CSS
   COSMETICS ONLY — NO SPACING OR SIZE CHANGES
========================================= */

.cse-trust-banner {
  position: relative;
  overflow: hidden;
  padding: 26px 34px 30px;
  background:
    radial-gradient(circle at 12% 0%, rgba(255, 218, 150, 0.34) 0%, rgba(255, 218, 150, 0.12) 10%, rgba(255, 218, 150, 0) 24%),
    radial-gradient(circle at 50% 0%, rgba(255, 220, 155, 0.12) 0%, rgba(255, 220, 155, 0.05) 18%, rgba(255, 220, 155, 0) 40%),
    radial-gradient(circle at 88% 0%, rgba(255, 218, 150, 0.30) 0%, rgba(255, 218, 150, 0.10) 10%, rgba(255, 218, 150, 0) 24%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0) 20%),
    radial-gradient(circle at 50% 45%, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0) 44%),
    linear-gradient(90deg, #4d0404 0%, #7d0c08 16%, #91120b 34%, #7f0b08 58%, #650604 78%, #3a0202 100%);
  border-top: 1px solid rgba(255, 214, 126, 0.62);
  border-bottom: 1px solid rgba(35, 6, 3, 0.88);
  box-shadow:
    inset 0 2px 0 rgba(255, 220, 150, 0.24),
    inset 0 -10px 26px rgba(0, 0, 0, 0.22);
}

.cse-trust-banner::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 7px;
  background:
    linear-gradient(
      90deg,
      #6a4814 0%,
      #e3be66 18%,
      #b98c2d 34%,
      #f1d27d 50%,
      #b98c2d 66%,
      #e3be66 82%,
      #6a4814 100%
    );
  box-shadow:
    0 1px 0 rgba(255, 238, 192, 0.42),
    0 2px 6px rgba(0, 0, 0, 0.24);
  z-index: 3;
}

.cse-trust-banner::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 78px;
  pointer-events: none;
  background:
    radial-gradient(circle at 12% 0%, rgba(255, 224, 168, 0.22) 0%, rgba(255, 224, 168, 0.08) 10%, rgba(255, 224, 168, 0) 24%),
    radial-gradient(circle at 50% 0%, rgba(255, 220, 155, 0.05) 0%, rgba(255, 220, 155, 0.02) 12%, rgba(255, 220, 155, 0) 34%),
    radial-gradient(circle at 88% 0%, rgba(255, 224, 168, 0.18) 0%, rgba(255, 224, 168, 0.06) 10%, rgba(255, 224, 168, 0) 24%);
  z-index: 1;
}

.cse-trust-banner-inner {
  position: relative;
  z-index: 2;
  max-width: 1600px;
  margin: 0 auto;
  min-height: 182px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.cse-trust-banner-content {
  flex: 1 1 auto;
  text-align: center;
  padding-left: 20px;
  padding-right: 20px;
}

.cse-trust-banner-title {
  margin: 0 0 14px;
  font-family: "Great Vibes", cursive;
  font-size: clamp(3.2rem, 5.4vw, 6.3rem);
  line-height: 1.02;
  font-weight: 400;
  letter-spacing: 0.01em;
  color: #efc86a;
  white-space: nowrap;
  text-shadow:
    0 1px 0 #fff3cc,
    0 2px 0 #e0b14a,
    0 3px 0 #9f681c,
    0 4px 0 #6e420f,
    0 6px 10px rgba(0, 0, 0, 0.34),
    0 10px 22px rgba(0, 0, 0, 0.32),
    0 14px 30px rgba(0, 0, 0, 0.20),
    0 0 10px rgba(255, 210, 120, 0.08);
}

.cse-trust-banner-subtitle {
  margin: 0 0 10px;
  font-family: Arial, sans-serif;
  font-size: clamp(1.1rem, 1.45vw, 1.75rem);
  line-height: 1.35;
  font-weight: 500;
  color: #fff7ea;
  text-shadow:
    0 1px 0 rgba(0, 0, 0, 0.25),
    0 2px 6px rgba(0, 0, 0, 0.34);
}

.cse-trust-banner-meta {
  margin: 0;
  font-family: Arial, sans-serif;
  font-size: clamp(0.95rem, 1.05vw, 1.2rem);
  line-height: 1.35;
  font-weight: 500;
  color: #e3b24a;
  text-shadow:
    0 1px 0 rgba(0, 0, 0, 0.20),
    0 2px 5px rgba(0, 0, 0, 0.28);
}

.cse-trust-banner-badge-wrap {
  flex: 0 0 230px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.cse-trust-banner-badge {
  display: block;
  width: 205px;
  max-width: 100%;
  height: auto;
  filter:
    drop-shadow(0 2px 0 rgba(255, 223, 151, 0.22))
    drop-shadow(0 6px 10px rgba(0, 0, 0, 0.30))
    drop-shadow(0 12px 22px rgba(0, 0, 0, 0.24));
}

/* =========================================
   LARGE DESKTOP
========================================= */

@media (min-width: 1500px) {
  .cse-trust-banner-inner {
    min-height: 190px;
  }

  .cse-trust-banner-badge-wrap {
    flex-basis: 250px;
  }

  .cse-trust-banner-badge {
    width: 220px;
  }
}

/* =========================================
   TABLET
========================================= */

@media (max-width: 1100px) {
  .cse-trust-banner {
    padding: 22px 24px 26px;
  }

  .cse-trust-banner-inner {
    min-height: 165px;
    gap: 10px;
  }

  .cse-trust-banner-content {
    padding-left: 0;
    padding-right: 0;
  }

  .cse-trust-banner-title {
    font-size: clamp(2.8rem, 5vw, 4.8rem);
    white-space: normal;
  }

  .cse-trust-banner-subtitle {
    font-size: 1.05rem;
  }

  .cse-trust-banner-meta {
    font-size: 0.92rem;
  }

  .cse-trust-banner-badge-wrap {
    flex-basis: 180px;
  }

  .cse-trust-banner-badge {
    width: 155px;
  }
}

/* =========================================
   MOBILE
========================================= */

@media (max-width: 767px) {
  .cse-trust-banner {
    padding: 18px 16px 24px;
  }

  .cse-trust-banner-inner {
    min-height: auto;
    flex-direction: column;
    gap: 16px;
  }

  .cse-trust-banner-content {
    order: 2;
  }

  .cse-trust-banner-badge-wrap {
    order: 1;
    flex: 0 0 auto;
  }

  .cse-trust-banner-badge {
    width: 130px;
  }

  .cse-trust-banner-title {
    margin-bottom: 10px;
    font-size: clamp(2.4rem, 9vw, 3.6rem);
    line-height: 1.06;
    white-space: normal;
  }

  .cse-trust-banner-subtitle {
    margin-bottom: 8px;
    font-size: 1rem;
    line-height: 1.4;
  }

  .cse-trust-banner-meta {
    font-size: 0.88rem;
    line-height: 1.45;
  }
}