/* Custom CSS */


@charset "UTF-8";


/* Icons */
@import "/include/fonts/fontello/css/fontello.css";
@import "/include/fonts/fontawesome/css/all.css";
/* Fonts */
@import url('https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700|Open+Sans:300,400,400i,600,700,700i,800');
/* 
font-family: 'Open Sans', sans-serif;
font-family: 'Open Sans Condensed', sans-serif;
*/


html {
    -ms-overflow-style: scrollbar;
    -ms-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
    -webkit-text-size-adjust: 100%;
}
body{
    background: #e7eae8;
	background: #fff;
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    line-height: normal;
}
/* CLEAR STYLES */
.customCSS.clearStyles *{
  padding:initial;
  margin:initial;
  font:initial;
  color:initial;
 }

/* No Float */
.noFloat{
    float:none !important;
}
customCSS.noFloat{
    float:none;
}
/* Float Left */
@media (max-width:767px){
  .floatLeftMobile{
    float:left;
  }
}
@media (min-width:768px) and (max-width:991px){
  .floatLeftTablet{
    float:left;
  }
}
@media (min-width:992px){
  .floatLeftDesktop{
    float:left;
  }
}
/* Float Right */
@media (max-width:767px){
  .floatRightMobile{
    float:right;
  }
}
@media (min-width:768px) and (max-width:991px){
  .floatRightTablet{
    float:right;
  }
}
@media (min-width:992px){
  .floatRightDesktop{
    float:right;
  }
}

/* center text horizontally and vertically */
.centerText{
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  -webkit-transform: translate(-50%, -50%) !important;
  -moz-transform: translate(-50%, -50%) !important;
  -ms-transform: translate(-50%, -50%) !important;
  -o-transform: translate(-50%, -50%) !important;
  transform: translate(-50%, -50%) !important;
}
 
/* Remove Position */
.positionInitial{
  position: initial !important;
}
/* Anchors */
a:not(.navLinks a), a:not(li[data-component="navigationItem"] a){
    color: #333;
    text-decoration: underline;
}
a:not(.navLinks a):hover, a:not(li[data-component="navigationItem"] a):hover{
    color: #333;
    text-decoration: underline;
}
.btn a, .btn a:hover{
    color:inherit !important;
    text-decoration: inherit !important;
}

.linkInheritStyle a{
  color:inherit !important;
  text-decoration: inherit !important;
}

.linkInheritStyle a:hover{
  color:inherit !important;
  text-decoration: inherit !important;
}
.cancelRemove a{
  color: red !important;
}
.cancelRemove a:hover{
  color: red !important;
  text-decoration: underline red !important;
}

/* control navigation links */

.navLinks a{
  color:inherit !important;
  text-decoration: inherit !important;
}
.navLinks a:hover{
  color:inherit !important;
  text-decoration: inherit !important;
}


.topNavLinks a{
	color:rgba(244, 242, 237, 0.71) !important;
	text-decoration: none !important;
	padding: 12px 20px;
	border-bottom:3px solid transparent;
}
.topNavLinks a:hover{
	color: rgb(244, 242, 237) !important;
	text-decoration: none !important;
	border-bottom:3px solid #55595c;
}


.navLinks{
}

.iconLinks a{
	color:rgba(244, 242, 237, 0.71) !important;
	text-decoration: none !important;
	border-bottom:3px solid transparent;
	padding: 6px 20px;
}
.iconLinks a:hover{
	color: rgb(244, 242, 237) !important;
	text-decoration: none !important;
	border-bottom:3px solid #55595c;
}

@media (max-width: 340px){
	.iconLinks a{
		padding:3px 10px;
	}
}

/* log in - log out links */
.loginLogoutLinks a{
	color:rgba(244, 242, 237, 0.71) !important;
	text-decoration: none !important;
	padding: 12px 20px 10px;
	border-bottom:3px solid transparent;
	display:block;
}
.loginLogoutLinks a:hover {
	color: rgb(244, 242, 237) !important;
	text-decoration: none !important;
	border-bottom:3px solid #55595c;
}
@media (max-width: 340px){
	.loginLogoutLinks a{
		padding: 10px 10px 8px;
	}
}

/* FORMS */
.customCSS.squareCorners textarea, .customCSS.squareCorners input{
  border-radius:0px !important;
}
/* bullet lists */
.bulleted ul li{
  display: list-item !important;
  list-style-type: disc;
  list-style-position: inside;
  list-style-image: initial;

}
/* Headings */
h1.customCSS, .customCSS h1{
   /* font-family: Arial, Helvetica, sans-serif;
    font-size: 1.6em;
    font-weight: 700;
    letter-spacing: unset;
    line-height: 1.3em;
    color: #007FC8;*/
}
h2.customCSS, .customCSS h2{
   /* font-family: Arial, Helvetica, sans-serif;
    font-size: 1.47em;
    font-weight: 700;
    letter-spacing: unset;
    line-height: 1.3em;
    color: #007FC8;*/
}
h3.customCSS, .customCSS h3{
   /* font-family: Arial, Helvetica, sans-serif;
    font-size: 1.2em;
    font-weight: 700;
    letter-spacing: unset;
    line-height: 1.3em;
    color: #007FC8;*/
}
h4.customCSS, .customCSS h4{
    /*font-family: Arial, Helvetica, sans-serif;
    font-size: 1.07em;
    font-weight: 700;
    letter-spacing: unset;
    line-height: 1.3em;
    color: #007FC8;*/
}
h5.customCSS, .customCSS h5{
   /* font-family: Arial, Helvetica, sans-serif;
    font-size: .9em;
    font-weight: 700;
    letter-spacing: unset;
    line-height: 1.3em;
    color: #007FC8;*/
}
h6.customCSS, .customCSS h6 {
   /* font-family: Arial, Helvetica, sans-serif;
    font-size: .7em;
    font-weight: 700;
    letter-spacing: unset;
    line-height: 1.3em;
    color: #007FC8;*/
}

.customCSS h1, h1.customCSS a,
.customCSS h2, h2.customCSS a,
.customCSS h3, h3.customCSS a,
.customCSS h4, h4.customCSS a,
.customCSS h5, h5.customCSS a,
.customCSS h6, h6.customCSS a{
    color: inherit;
    text-decoration: underline transparent;
}
.customCSS h1, h1.customCSS a:hover,
.customCSS h2, h2.customCSS a:hover,
.customCSS h3, h3.customCSS a:hover,
.customCSS h4, h4.customCSS a:hover,
.customCSS h5, h5.customCSS a:hover,
.customCSS h6, h6.customCSS a:hover{
    color: inherit;
    text-decoration: underline transparent;
}

/* PRIMARY NAVIGATION */

/* Primary Navigation Icons
Using :before, :after, and a custom class on the navigation item, we can insert an icon into the HTML.
We are using the Fontello icon font set found in the /includes/fonts folder of the web directory. Locate the desired icon in the fontello.css and replace the content: '' with the desired icon code.

*/

.subMenuIndicatorIcon > label{
    padding-left: 0px;
}
.subMenuIndicatorIcon > label a{
    display: inline-block;
}
.subMenuIndicatorIcon > label:after{
    font-family: "fontello";
    font-style: normal;
    font-weight: normal;
    speak: none;

    display: inline-block;
    text-decoration: inherit;
    width: 1em;
    margin-right: .2em;
    text-align: center;
    content: '\eccc';
}
.subMenuIndicatorIcon > label:hover:before{
    color: inherit;
}

/* Primary Navigation Submenu */

@media(min-width:992px){
  .customCSS .centerSubMenu .submenu{
      left: 50%;
      -webkit-transform: translateX(-50%);
      transform: translateX(-50%);
  }
}

.customCSS ul[data-component="navigationItem.menu"].submenu label{
    white-space: nowrap;
}


.customCSS ul[data-component="navigationItem.menu"].submenu li[data-component="navigationItem"]{
/*    border-width: 0px;
    display: inline-block;
    width: 248px;
    text-align: left;
    background-color: rgba(255, 255, 255, 0);

    color: rgb(51, 51, 51);

    padding-top: 0px;
    padding-bottom: 0px;*/

}
.customCSS ul[data-component="navigationItem.menu"].submenu li[data-component="navigationItem"]:hover{
/*    background-color: rgb(51, 51, 51);
    color: rgb(255, 255, 255);*/
}
.customCSS ul[data-component="navigationItem.menu"].submenu li[data-component="navigationItem"]:first-child{
  /*border: none;*/
}

.customCSS ul[data-component="navigationItem.menu"].submenu li[data-component="navigationItem"] label[data-component="navigationItem.label"]{
/*    padding: 24px 20px;
    background-color: rgb(70, 100, 127);
    color: rgb(255, 255, 255);
    display: block;
    font-family: "Fira Sans", sans-serif;
    font-size: 16px;
    line-height: 18px;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    margin: 0px;*/
}

.customCSS ul[data-component="navigationItem.menu"].submenu li[data-component="navigationItem"] label[data-component="navigationItem.label"]:hover {
/*    background-color: rgb(29, 48, 62);
    color: rgb(255, 255, 255);
    font-family: "Fira Sans", sans-serif;
*/
}

/* End Primary Navigation */

/* flexbox */
/*

** EXAMPLES **
Each declaration is appended with an M, T, or D to indicate usage in Mobile, Tablet, or Desktop.
-M = Mobile
-T = Tablet
-D = Desktop

Enable flexbox: 
    Parent container: flexbox-M 

Evenly distribute items horizontally across available space: 
    Parent container: flexbox-M flexboxH-M flexbox-justify-space-between-M

Center items vertically
    flexbox-D flexboxV-D flexbox-justify-center-D



** REFERENCE **

flexbox-M
flexbox-T
flexbox-D

flexboxH-M
flexboxH-T
flexboxH-D

flexboxV-M
flexboxV-T
flexboxV-D

flexbox-inline-flex-M
flexbox-inline-flex-T
flexbox-inline-flex-D

flexboxWrap-M
flexboxWrap-T
flexboxWrap-D

flexbox-nowrap-M
flexbox-nowrap-T
flexbox-nowrap-D

flexbox-justify-start-M
flexbox-justify-start-T
flexbox-justify-start-D

flexbox-justify-end-M
flexbox-justify-end-T
flexbox-justify-end-D

flexbox-justify-center-M
flexbox-justify-center-T
flexbox-justify-center-D

flexbox-justify-space-between-M
flexbox-justify-space-between-T
flexbox-justify-space-between-D

flexbox-align-top-M
flexbox-align-top-T
flexbox-align-top-D

flexbox-align-bottom-M
flexbox-align-bottom-T
flexbox-align-bottom-D

flexbox-align-center-M
flexbox-align-center-T
flexbox-align-center-D

flexbox-align-stretch-M
flexbox-align-stretch-T
flexbox-align-stretch-D

flexitem-grow-equal-M
flexitem-grow-equal-T
flexitem-grow-equal-D

flexitem-grow-2x-M
flexitem-grow-2x-T
flexitem-grow-2x-D

flexitem-grow-3x-M
flexitem-grow-3x-T
flexitem-grow-3x-D

flexitem-grow-4x-M
flexitem-grow-4x-T
flexitem-grow-4x-D

flex-basis-100-M
flex-basis-100-T
flex-basis-100-D

flex-basis-75-M
flex-basis-75-T
flex-basis-75-D

flex-basis-50-M
flex-basis-50-T
flex-basis-50-D

flex-basis-25-M
flex-basis-25-T
flex-basis-25-D

flex-basis-content-M
flex-basis-content-T
flex-basis-content-D

*/


/* flexbox - add class to parent container */
@media (max-width: 768px){
  .flexbox-M{
    display:flex;
  }

}
@media (max-width: 992px){
  .flexbox-T{
    display:flex;
  }

}
@media (min-width: 993px){
  .flexbox-D{
    display:flex;
  }

}

/* flexboxH */
@media (max-width: 768px){
  .flexboxH-M{
    display:flex;
    flex-direction: row;
    align-items: center;
  }

}
@media (max-width: 992px){
  .flexboxH-T{
    display:flex;
    flex-direction: row;
    align-items: center;
  }

}
@media (min-width: 993px){
  .flexboxH-D{
    display:flex;
    flex-direction: row;
    align-items: center;
  }

}

/* flexboxV */
@media (max-width: 768px){
  .flexboxV-M{
    display:flex;
    flex-direction: column;
    align-items: center;
  }

}
@media (max-width: 992px){
  .flexboxV-T{
    display:flex;
    flex-direction: column;
    align-items: center;
  }

}
@media (min-width: 993px){
  .flexboxV-D{
    display:flex;
    flex-direction: column;
    align-items: center;
  }

}

/* display: inline-flex */
@media (max-width: 768px){
  .flexbox-inline-flex-M{
    display: inline-flex;
  }

}
@media (max-width: 992px){
  .flexbox-inline-flex-T{
    display: inline-flex;
  }

}
@media (min-width: 993px){
  .flexbox-inline-flex-D{
    display: inline-flex;
  }

}

/* flex-wrap: wrap */
@media (max-width: 768px){
  .flexboxWrap-M{
    flex-wrap: wrap;
  }

}
@media (max-width: 992px){
  .flexboxWrap-T{
    flex-wrap: wrap;
  }

}
@media (min-width: 993px){
  .flexboxWrap-D{
    flex-wrap: wrap;
  }

}

/* flex-wrap: nowrap */
@media (max-width: 768px){
  .flexbox-nowrap-M{
    flex-wrap: nowrap;
  }

}
@media (max-width: 992px){
  .flexbox-nowrap-T{
    flex-wrap: nowrap;
  }

}
@media (min-width: 993px){
  .flexbox-nowrap-D{
    flex-wrap: nowrap;
  }

}

/* justify-content: flex-start */
@media (max-width: 768px){
  .flexbox-justify-start-M{
    justify-content: flex-start;
  }

}
@media (max-width: 992px){
  .flexbox-justify-start-T{
    justify-content: flex-start;
  }

}
@media (min-width: 993px){
  .flexbox-justify-start-D{
    justify-content: flex-start;
  }

}

/* justify-content: flex-end */
@media (max-width: 768px){
  .flexbox-justify-end-M{
    justify-content: flex-end;
  }

}
@media (max-width: 992px){
  .flexbox-justify-end-T{
    justify-content: flex-end;
  }

}
@media (min-width: 993px){
  .flexbox-justify-end-D{
    justify-content: flex-end;
  }

}

/* justify-content: center */
@media (max-width: 768px){
  .flexbox-justify-center-M{
    justify-content: center;
  }

}
@media (max-width: 992px){
  .flexbox-justify-center-T{
    justify-content: center;
  }

}
@media (min-width: 993px){
  .flexbox-justify-center-D{
    justify-content: center;
  }

}

/* justify-content: space-between */
@media (max-width: 768px){
  .flexbox-justify-space-between-M{
    justify-content: space-between;
  }
}
@media (max-width: 992px){
  .flexbox-justify-space-between-T{
    justify-content: space-between;
  }

}
@media (min-width: 993px){
  .flexbox-justify-space-between-D{
    justify-content: space-between;
  }

}

/* align-items: flex-start */
@media (max-width: 768px){
  .flexbox-align-top-M{
    align-items: flex-start;
  }

}
@media (max-width: 992px){
  .flexbox-align-top-T{
    align-items: flex-start;
  }

}
@media (min-width: 993px){
  .flexbox-align-top-D{
    align-items: flex-start;
  }

}

/* align-items: flex-end */
@media (max-width: 768px){
  .flexbox-align-bottom-M{
    align-items: flex-end;
  }

}
@media (max-width: 992px){
  .flexbox-align-bottom-T{
    align-items: flex-end;
  }

}
@media (min-width: 993px){
  .flexbox-align-bottom-D{
    align-items: flex-end;
  }

}

/* align-items: center */
@media (max-width: 768px){
  .flexbox-align-center-M{
    align-items: center;
  }

}
@media (max-width: 992px){
  .flexbox-align-center-T{
    align-items: center;
  }

}
@media (min-width: 993px){
  .flexbox-align-center-D{
    align-items: center;
  }

}

/* align-items: stretch */
@media (max-width: 768px){
  .flexbox-align-stretch-M{
    align-items: stretch;
  }

}
@media (max-width: 992px){
  .flexbox-align-stretch-T{
    align-items: stretch;
  }

}
@media (min-width: 993px){
  .flexbox-align-stretch-D{
    align-items: stretch;
  }

}

/* flex-grow:1 */
@media (max-width: 768px){
  .flexitem-grow-equal-M{
    flex-grow:1;
  }

}
@media (max-width: 992px){
  .flexitem-grow-equal-T{
    flex-grow:1;
  }

}
@media (min-width: 993px){
  .flexitem-grow-equal-D{
    flex-grow:1;
  }

}

/* flex-grow:2 */
@media (max-width: 768px){
  .flexitem-grow-2x-M{
    flex-grow:2;
  }

}
@media (max-width: 992px){
  .flexitem-grow-2x-T{
    flex-grow:2;
  }

}
@media (min-width: 993px){
  .flexitem-grow-2x-D{
    flex-grow:2;
  }

}

/* flex-grow:3 */
@media (max-width: 768px){
  .flexitem-grow-3x-M{
    flex-grow:3;
  }

}
@media (max-width: 992px){
  .flexitem-grow-3x-T{
    flex-grow:3;
  }

}
@media (min-width: 993px){
  .flexitem-grow-3x-D{
    flex-grow:3;
  }

}

/* flex-grow:4 */
@media (max-width: 768px){
  .flexitem-grow-4x-M{
    flex-grow:4;
  }

}
@media (max-width: 992px){
  .flexitem-grow-4x-T{
    flex-grow:4;
  }

}
@media (min-width: 993px){
  .flexitem-grow-4x-D{
    flex-grow:4;
  }

}

/* flex-basis: 100% */
}
@media (max-width: 768px){
  .flex-basis-100-M{
    flex-basis: 100%;
  }

}
@media (max-width: 992px){
  .flex-basis-100-T{
    flex-basis: 100%;
  }

}
@media (min-width: 993px){
  .flex-basis-100-D{
    flex-basis: 100%;
  }

}

/* flex-basis: 75% */
}
@media (max-width: 768px){
  .flex-basis-75-M{
    flex-basis: 75%;
  }

}
@media (max-width: 992px){
  .flex-basis-75-T{
    flex-basis: 75%;
  }

}
@media (min-width: 993px){
  .flex-basis-75-D{
    flex-basis: 75%;
  }

}

/* flex-basis: 50% */
}
@media (max-width: 768px){
  .flex-basis-50-M{
    flex-basis: 50%;
  }

}
@media (max-width: 992px){
  .flex-basis-50-T{
    flex-basis: 50%;
  }

}
@media (min-width: 993px){
  .flex-basis-50-D{
    flex-basis: 50%;
  }

}

/* flex-basis: 25% */
@media (max-width: 768px){
  .flex-basis-25-M{
    flex-basis: 25%;
  }

}
@media (max-width: 992px){
  .flex-basis-25-T{
    flex-basis: 25%;
  }

}
@media (min-width: 993px){
  .flex-basis-25-D{
    flex-basis: 25%;
  }

}
/* flex-basis:content */
@media (max-width: 768px){
  .flex-basis-content-M{
    flex-basis: content;
  }

}
@media (max-width: 992px){
  .flex-basis-content-T{
    flex-basis: content;
  }

}
@media (min-width: 993px){
  .flex-basis-content-D{
    flex-basis: content;
  }

}
/* END FLEXBOX */

/* TRANSITIONS */

.noTransition div, .noTransition label, .noTransition a, .noTransition li{
  transition: none;
}
/* color change slowly on everything */
div{
  -webkit-transition: color .25s;
  transition: color .25s;
}

label, a, li{
  -webkit-transition: color .25s ease-out, background-color .25s ease-out, text-decoration .25s ease-out; /* Safari */
  transition: color .25s ease-out, background-color .25s ease-out, text-decoration .25s ease-out;
}

/* primary navigation submenus transition to expanded  */
/* place cssTransitions override class on container above navigation items */
@media(max-width:992px){ /* mobile and tablet only */
  .cssTransitions .menu-header .submenu{
    -webkit-transition:max-height 2s, height 2s;
    transition: max-height 2s, height 2s;
    height:0;
    max-height: 0;
    overflow: hidden;
    display: block !important;
  }
  .cssTransitions .menu-header.selected > .submenu.expanded{
    max-height:100vh;
    height:auto;
  }
}
@media(min-width:992px){ /* desktop only */
  .cssTransitions ul.submenu{
    opacity: 0;
    -webkit-transition: opacity .25s ease-out;
    transition: opacity .25s ease-out;
    display: block !important;
    visibility: hidden;
  }
  .design-mode .cssTransitions .menu-header.selected > ul.submenu{
    opacity: 1;
    visibility: visible;
  }
  body:not(.design-mode) .cssTransitions .menu-header:hover > ul.submenu{
    opacity: 1;
    visibility: visible;
  }
}

/* expander contents fade in after expanding */

  .cssTransitions .collapse {
    opacity: 0;
    height:0px;
    -webkit-transition: opacity .5s ease-out;
    transition: opacity .5s ease-out;
    display: block !important;
    visibility: hidden;
    overflow: hidden;
  }

  .cssTransitions .collapse.in {
    opacity: 1;
    visibility: visible;
    height:auto;
  }

/* END TRANSITIONS */

/* STICKY HEADER */

@media(min-width:992px){
    .stickToTopOnScroll{
      position: fixed !important;
      top: 0;
      right:0;
      width: 100%;
      max-width: 100% !important;
      z-index: 500 !important;
      margin:auto !important;
      margin-left: auto !important;
      margin-right: auto !important;
      box-shadow: rgb(53, 52, 52) 0px 0px 5px 0px !important;
      text-align:center;
    }

    .stickToTopOnScroll .stickyHeaderContent{
      max-width:1500px !important;
      margin:auto;
      float:none;
    }


	.stickyanimated {
	  -webkit-animation-duration: 1s;
	  animation-duration: 1s;
	  -webkit-animation-fill-mode: both;
	  animation-fill-mode: both;
	}

	@media (print), (prefers-reduced-motion: reduce) {
	    .stickyanimated {
	      -webkit-animation-duration: 1ms !important;
	      animation-duration: 1ms !important;
	      -webkit-transition-duration: 1ms !important;
	      transition-duration: 1ms !important;
	      -webkit-animation-iteration-count: 1 !important;
	      animation-iteration-count: 1 !important;
	    }
	}

}


/* Generic page stuff */
.hideoverflow, .hideOverflow{
    overflow: hidden;
}
.verticalTop{
    vertical-align: top;
}
.verticalMiddle {
    vertical-align:middle;
}
.verticalBottom{
    vertical-align:bottom;
}
.noWrap{
    white-space: nowrap;
}
.customCSS.contentWrapperMaster{
	padding-top:40px;
}
	
.customCSS.contentWrapper{
  max-width: 1440px;
  margin-left:10px;
  margin-right:10px;
  padding:20px 10px;
  float:none;
}
@media (min-width: 992px){
  .customCSS.contentWrapper{
    max-width:1440px;
    margin:auto;
  }
}

@media print{
  .hide-for-print, .hide-for-print *{
    display: none !important;
  }
}

/* Images */
.centeredImage{ /* add class to container immediately above image */
  width:100% !important;
  max-width:100% !important;
  height:0px !important;
  padding-bottom: 70% !important;
  position:relative !important;
  overflow: hidden !important;
}
.centeredImage img{
  width: 100% !important;
  max-width:100% !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  -webkit-transform: translate(-50%, -50%) !important;
  -moz-transform: translate(-50%, -50%) !important;
  -ms-transform: translate(-50%, -50%) !important;
  -o-transform: translate(-50%, -50%) !important;
  transform: translate(-50%, -50%) !important;
}
.centered {   /* center an item horizontally and vertically */
  position: relative;
  max-width: 400px;
  top: 50%;
  left: 50%;
  transform: translate(-50%);
}
.grayscaleImage img{
filter: grayscale(100%);
transition: filter 1s;
}
.grayscaleImage img:hover{
filter: grayscale(0%);
}
/*
Placeholder images

4:3 ratio - divide width by 1.333 to calculate height

https://via.placeholder.com/400x300.png?text=Wycliffe+Associates+4:3+ratio+-+400+x+300+native

https://via.placeholder.com/400x300.png

https://via.placeholder.com/900x675.png

https://via.placeholder.com/900x675.png?text=Wycliffe+Associates+4:3+ratio+-+900+x+875+native

SOURCE: https://placeholder.com/

*/

 /* slideshow control */
 /* 
 For full-width slides 100% viewport width divide by the slide ratio
 
 Slide Ratio = width/height
 
 Add slideshowHeight override class to slideDeck top level
 
 Should work for smaller widths if we define slide widths in VH units
 
 */
 .slideshowHeight{
	height:calc(100vw / 2.5); 
}
.slideshowHeight [data-component="slideShow.paging"]{
	top: calc(100% - 60px);
}
/* Hero Image with calculated ratio */

 .heroHeight{
	height:calc(100vw / 3.8); 
}


/* search */
.searchCategoriesVertical .dropdown-menu li{
  display: block !important;
}

/* Buttons */
/*
Override Classes:
	ACTIVE: btn customCSS allButtons activeButtons COLOR
		i.e. btn customCSS allButtons activeButtons ghostTan
		
	PASSIVE: btn customCSS allButtons passiveButtons COLOR
		i.e. btn customCSS allButtons passiveButtons ghostOffWhite
		
	SECONDARY NAV: customCSS allButtons secondaryNav COLOR
		i.e. customCSS allButtons secondaryNav surfSpray
		
	COLORS:
		ghostTan
		ghostOffWhite
		ghostYellow
		solidYellow
		ghostDarkBlue
		solidDarkBlue
		solidTeal
		surfSpray

*/

.btn{
  -webkit-transition: background-color .25s;
  transition: background-color .25s;
}
.btn, .btn:focus{
    outline: transparent !important;
}
/* Set the general size/shape of all buttons here */
.customCSS.allButtons { 
  transition: all .1s;
  display: inline-block;
  white-space: normal;
  vertical-align: middle;
  -ms-touch-action: manipulation;
  touch-action: manipulation;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  outline: transparent !important;

  background-image: none;

  border: 2px solid transparent;
  border-radius: 40px; /* Button Border Radius - Change */

  padding: 0px;
  margin-bottom: 0;

  font-size: 14px;
  font-weight: 400;
  line-height: 1.42857143;
  text-align: center;
}
.customCSS.allButtons:focus {
  outline: transparent !important;
}
.customCSS.allButtons a{
  color: inherit !important;
  text-decoration: inherit !important;
  padding:15px 40px;
  border-radius: 40px;
  border:2px solid transparent;
  font-family: "DM Sans", sans-serif;
  font-size: 18px;
  text-align: center;
  line-height: 26px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
}
.customCSS.allButtons a:hover{
  color: inherit !important;
  text-decoration: inherit !important;
}
.customCSS.allButtons a:active{
  color: inherit !important;
  text-decoration: inherit !important;
}
.customCSS.allButtons label{
  font-weight: inherit;
  display: inherit;
  max-width:inherit;
  margin-bottom:inherit;
}
button.customCSS.allButtons{
  padding:15px 40px;
  border-radius: 40px;
  border:2px solid transparent;
  font-family: "DM Sans", sans-serif;
  font-size: 18px;
  text-align: center;
  line-height: 26px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
}

/* button colors */

.customCSS.ghostTan{
	color: #fff;
}
.customCSS.ghostTan:hover{
	color: #fff;
}
.customCSS.ghostTan a{
	background-color: rgba(184, 171, 152, 0);
	border: 2px solid rgba(184, 171, 152, 1) !important;
}
.customCSS.ghostTan:hover a{
	background-color: rgba(184, 171, 152, 1);
}

.customCSS.ghostOffWhite{
	color: rgb(183, 198, 194);
}
.customCSS.ghostOffWhite:hover{
	color: rgb(41, 73, 89);
}
.customCSS.ghostOffWhite a{
	background-color: rgba(183, 198, 194, 0);
	border: 2px solid rgba(183, 198, 194, 1);
}
.customCSS.ghostOffWhite:hover a{
	background-color: rgba(183, 198, 194, 1);
}
.customCSS.ghostYellow{
	color:rgb(46, 52, 72);
}
.customCSS.ghostYellow:hover{
	color:rgb(46, 52, 72);
}
.customCSS.ghostYellow a{
	background-color: rgba(224, 199, 78, 0);
	border: 2px solid rgba(224, 199, 78, 1);
}
.customCSS.ghostYellow:hover a{
	background-color: rgba(224, 199, 78, 1);
}


.customCSS.solidYellow{
	color:rgb(46 52 72);
}
.customCSS.solidYellow a, .customCSS.solidYellow.onlyButton{
	background-color: rgba(224, 199, 78, 1);
	border-color: rgba(224, 199, 78, 1);
}
.customCSS.solidYellow a:hover, .customCSS.solidYellow.onlyButton:hover{
	background-color: rgba(224, 199, 78, 1);
	border-color: rgb(201 178 69);
}

.customCSS.ghostDarkBlue{
	color: #fff;
}
.customCSS.ghostDarkBlue a{
	background-color:rgba(41, 73, 89, 0);
	border-color: rgb(41, 73, 89);
}
.customCSS.ghostDarkBlue a:hover{
	background-color:rgba(41, 73, 89, 1);
}
.customCSS.solidDarkBlue{
	color:#fff;
}
.customCSS.solidDarkBlue a{
	background-color:rgb(41, 73, 89) ;
	border-color: rgb(41, 73, 89);
}
.customCSS.solidDarkBlue a:hover{
	background-color:rgb(46, 52, 72);
	border-color: rgb(46, 52, 72);
}




.customCSS.button.solidDarkBlue{
	color:#fff;
}
.customCSS.button.solidDarkBlue{
	background-color:rgb(41, 73, 89) ;
	border-color: rgb(41, 73, 89);
}
.customCSS.button.solidDarkBlue:hover{
	background-color:rgb(46, 52, 72);
	border-color: rgb(46, 52, 72);
}



.customCSS.solidTeal{}

.customCSS.solidTeal a{
	background-color: rgb(35, 138, 137);
	border-color: rgb(35, 138, 137);
}

.customCSS.solidTeal a:hover{
	background-color: rgb(35, 217, 214);
	border-color: rgb(35, 217, 214);
}

.customCSS.button.solidTeal{
	background-color: rgb(35, 138, 137);
	border-color: rgb(35, 138, 137);
}

.customCSS.button.solidTeal:hover{
	background-color: rgb(35, 217, 214);
	border-color: rgb(35, 217, 214);
}

.customCSS.surfSprayLight a{
	background-color: #fff;
	border-color: #E5F0ED;
}
.customCSS.surfSprayLight a:hover{
	background-color: #E5F0ED;
	border-color: #E5F0ED;
}

/* button sizes */
.smallBtn a{
	font-size:12px;
	background-color: rgba(180, 200, 194, 1); /* Surf Spray */ /* CHANGE COLOR */
	border-color: rgba(180, 200, 194, 1); /* Surf Spray */
	border-radius:40px;
}
.smallBtn:hover a{
	background-color: rgba(85, 105, 98, 1); /* Dark Forest */ /* CHANGE COLOR */
	color:rgba(255, 255, 255, 1); /* WHITE */
}
	

/* /end all buttons settings */


/* secondary Navigation */
.customCSS.secondaryNav a{
	background-color:transparent;
	border-color:transparent !important;
	color:inherit !important;
}
.customCSS.secondaryNav a:hover{
	border-color:transparent !important;
	color:inherit !important;
}

/* Set Active buttons here - Add the following override classes to the button in ASO: btn allButtons customCSS activeButtons */
.customCSS.activeButtons{
	/* background-color: rgba(31, 73, 91, 1); /* Legacy Blue */ /* CHANGE COLOR */ 
	background-color: rgba(224, 199, 78, 1); /* Gold */
	/* border: rgba(31, 73, 91, 1); */
	border: 2px solid rgba(224, 199, 78, 1); /* Gold */
	/* color:#fff; */
}
.customCSS.activeButtons:hover{
	/* background-color: rgba(46, 52, 74, 1); /* Naval Academy */ /* CHANGE COLOR */
	background-color: rgba(250, 223, 87, 1); /* Light Gold */
	border: 2px solid rgba(224, 199, 78, 1); /* Gold */
	/* color:#fff; */
  
}
.customCSS.activeButtons:active{
	/* background-color: rgba(46, 52, 74, 1); /* Naval Academy */ /* CHANGE COLOR */
	background-color: rgba(250, 223, 87, 1); /* Light Gold */
	border: 2px solid rgba(224, 199, 78, 1); /* Gold */
	/* color:#fff; */
}
/* /end Active buttons */


/* Set Passive buttons here - Add the following override classes to the button in ASO: btn allButtons customCSS passiveButtons */
.customCSS.passiveButtons{
  background-color: rgba(180, 200, 194, 1); /* Surf Spray */ /* CHANGE COLOR */
  border-color: rgba(180, 200, 194, 1); /* Surf Spray */
}
.customCSS.passiveButtons:hover{
  background-color: rgba(85, 105, 98, 1); /* Dark Forest */ /* CHANGE COLOR */
  color:rgba(255, 255, 255, 1); /* WHITE */
  border-color: rgba(180, 200, 194, 1);
}
.customCSS.passiveButtons:active{
  background-color: rgba(85, 105, 98, 1); /* Dark Forest */ /* CHANGE COLOR */
  color:rgba(255, 255, 255, 1); /* WHITE */
}
.button.customCSS.passiveButtons:active{
  border-color: rgba(180, 200, 194, 1);
}
/* /end Passive buttons */


/* Giving Array buttons - These often follow Active button styling - Add the following override class to a parent container: customCSS */

.customCSS label.giftAmount.radio-button[data-component="ButtonGiftArray.button"], 
.customCSS label.giftAmount.radio-button[data-component="PledgeButtonGiftArray.button"], 
.customCSS label.giftAmount.radio-button[data-component="DonationButtonFrequency.button"]{


  -webkit-transition: all .3s;
  transition: all .3s;
  display: inline-block;
  white-space: normal;
  vertical-align: middle;
  -ms-touch-action: manipulation;
  touch-action: manipulation;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  outline: transparent !important;

  padding: 6px 12px;
  margin: 0 5px 0 0;

  font-size: 14px;
  font-weight: 400;
  line-height: 1.42857143;
  text-align: center;

  background-image: none;
  background-color: rgb(182, 189, 194); /* light gray background for unselected buttons */ /* CHANGE COLOR */

  border: 1px solid transparent;
  border-radius: 4px; /* Button Border Radius - Change */
 
  color:#fff;
}

.customCSS label.giftAmount.radio-button[data-component="ButtonGiftArray.button"]:active, 
.customCSS label.giftAmount.radio-button[data-component="PledgeButtonGiftArray.button"]:active, 
.customCSS label.giftAmount.radio-button[data-component="DonationButtonFrequency.button"]:active{
  box-shadow: 0px 4px 3px inset rgba(0, 0, 0, .1) !important;
}

.customCSS label.giftAmount.radio-button[data-component="ButtonGiftArray.button"]:hover, 
.customCSS label.giftAmount.radio-button[data-component="PledgeButtonGiftArray.button"]:hover{
  background-color: rgba(31, 73, 91, 1); /* Legacy Blue */  /* CHANGE COLOR */
}

.customCSS label.giftAmount.radio-button[data-component="ButtonGiftArray.button"]:focus, 
.customCSS label.giftAmount.radio-button[data-component="PledgeButtonGiftArray.button"]:focus{
  outline: transparent !important;
}

/* Selected buttons */
.customCSS label.giftAmount.radio-button.selected[data-component="ButtonGiftArray.button"], 
.customCSS label.giftAmount.radio-button.selected[data-component="PledgeButtonGiftArray.button"], 
.customCSS label.giftAmount.radio-button.selected[data-component="DonationButtonFrequency.button"]{
  background-color: rgba(31, 73, 91, 1); /* Legacy Blue */ /* CHANGE COLOR */
}


.customCSS label.giftAmount.radio-button.selected[data-component="ButtonGiftArray.button"]:hover, 
.customCSS label.giftAmount.radio-button.selected[data-component="PledgeButtonGiftArray.button"]:hover, 
.customCSS label.giftAmount.radio-button.selected[data-component="DonationButtonFrequency.button"]:hover{
  background-color: rgba(31, 73, 91, 1); /* Legacy Blue */ /* CHANGE COLOR */
}

.customCSS label.giftAmount.radio-button.selected[data-component="ButtonGiftArray.button"]:focus, 
.customCSS label.giftAmount.radio-button.selected[data-component="PledgeButtonGiftArray.button"]:focus, 
.customCSS label.giftAmount.radio-button.selected[data-component="DonationButtonFrequency.button"]:focus {
  outline: transparent !important;
  background-color: rgba(31, 73, 91, 1); /* Legacy Blue */  /* CHANGE COLOR */
}



/* Other Amount */
.customCSS .giftAmount.giftAmountOther.radio-button.selected{
  /* padding:2px; */ /* someday, maybe */
}

.customCSS label.giftAmount.giftAmountOther.radio-button.selectionButtons.selected{
    margin: 0px;
    padding: 0px;
    background-color: transparent;
}
.customCSS label.giftAmount.giftAmountOther.radio-button.selectionButtons.selected:focus{
    background-color: transparent;
}


.customCSS label.giftAmount.giftAmountOther.radio-button.selectionButtons.selected:active{
    box-shadow: none;
}
.customCSS label.giftAmount.giftAmountOther.radio-button.selectionButtons.selected:hover{
    background-color: transparent;
    color: initial;
}

.customCSS label.giftAmount.giftAmountOther.radio-button.selectionButtons.selected span span{
    background-color: rgba(31, 73, 91, 1); /* Legacy Blue */  /* CHANGE COLOR */
    padding:  0px; /* CHANGE SIZE */
    border-radius:  0px; /* Button Border Radius - Change */
    color: #fff;
}
.customCSS .radio-button.giftAmountOther input[type=text] {
    border: 0px solid rgba(31, 73, 91, 1); /* Legacy Blue */  /* CHANGE COLOR */
    border-radius: 0px; /* Don't change */
    padding: 0px 4px;
    width: auto;
    line-height: normal;
    margin-right: 5px;
    font-size: inherit;
}
.customCSS [data-component-id="5_pledgeButtonGiftAmount"] [data-nested-id="5_s10440"] .gift-amounts label.radio-button.selected:hover {
    color: initial;
}
/* /end Other Amount */



/* SPECIAL GIVING ARRAY STYLING - only Other amount visible */
/*
/* Add class otherOnlyGiving and customCSS to container above giving array
/* Add a label with currency symbol at the front of the giving array
/* Turn off "Include currency symbol" in gift array properties
*/ 

body:not(.design-mode) .otherOnlyGiving label.giftAmount:not(.giftAmountOther){
  display:none !important;
}

/* Other Amount */
.customCSS.otherOnlyGiving label.giftAmount.giftAmountOther.radio-button[data-component="ButtonGiftArray.button"]{
  background: none;
  color:#707070;
  font-size: 20px;
  padding:0;
  margin:0px !important;
  border-radius: 0px !important; /* Button Border Radius - Change */
}

.customCSS.otherOnlyGiving label.giftAmount.giftAmountOther.radio-button[data-component="ButtonGiftArray.button"]:active{
  box-shadow: none !important;
}

.customCSS.otherOnlyGiving label.giftAmount.giftAmountOther.radio-button.selectionButtons.selected{
    margin: 0px;
    padding: 0px;
    background-color: transparent;
}
.customCSS.otherOnlyGiving label.giftAmount.giftAmountOther.radio-button.selectionButtons.selected:focus{
    background-color: transparent;
}


.customCSS.otherOnlyGiving label.giftAmount.giftAmountOther.radio-button.selectionButtons.selected:active{
    box-shadow: none;
}
.customCSS.otherOnlyGiving label.giftAmount.giftAmountOther.radio-button.selectionButtons.selected:hover{
    background-color: transparent;
    color: initial;
}

.customCSS.otherOnlyGiving label.giftAmount.giftAmountOther.radio-button.selectionButtons.selected span span{
/*    background-color: #175C86;
    padding:  7px 12px 8px;
    border-radius:  5px; /* Button Border Radius - Change */
    /*color: #fff;*/
    vertical-align: bottom;
}
.customCSS.otherOnlyGiving .radio-button.giftAmountOther input[type=text] {
    border:none;
    border-bottom: 0px solid #707070;
    border-radius:0;
    padding: 0px;
    width: 160px;
    line-height: normal;
    margin: auto;
    font-size: inherit;
    display: inline-block;
}
.otherOnlyGiving [class^="icon-"]:before, .otherOnlyGiving [class*=" icon-"]:before{
    margin:auto;
    width:auto;
}
.customCSS.otherOnlyGiving .radio-button.giftAmountOther:before{
/*    font-family: "fontello";
    font-style: normal;
    font-weight: normal;
    speak: none;

    display: inline-block;
    text-decoration: inherit;
    width: 20px;
    margin-right: 5px;
    text-align: center;
    content: '\f155';*/
}
.customCSS.otherOnlyGiving [data-component-id="5_pledgeButtonGiftAmount"] [data-nested-id="5_s10440"] .gift-amounts label.radio-button.selected:hover {
    color: initial;
}
/* /end Other Amount */

/* /end Giving Array buttons */

/* Frequency buttons - These often follow Active button styling - Add the following override class to a parent container: customCSS */

.customCSS label.frequency.radio-button[data-component="PledgeButtonFrequency.button"], 
.customCSS label.frequency.radio-button[data-component="DonationButtonFrequency.button"]{


  -webkit-transition: all .3s;
  transition: all .3s;
  display: inline-block;
  white-space: normal;
  vertical-align: middle;
  -ms-touch-action: manipulation;
  touch-action: manipulation;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  outline: transparent !important;

  padding: 6px 12px;
  margin: 0 5px 0 0;

  font-size: 14px;
  font-weight: 400;
  line-height: 1.42857143;
  text-align: center;

  background-image: none;
  background-color: rgb(182, 189, 194); /* light gray background for unselected buttons */ /* CHANGE COLOR */

  border: 1px solid transparent;
  border-radius: 5px; /* Button Border Radius - Change */

  color:#fff;

}

.customCSS label.frequency.radio-button[data-component="PledgeButtonFrequency.button"]:hover, 
.customCSS label.frequency.radio-button[data-component="DonationButtonFrequency.button"]:hover{
  background-color: rgba(31, 73, 91, 1); /* Legacy Blue */ /* CHANGE COLOR */
}

.customCSS label.frequency.radio-button[data-component="PledgeButtonFrequency.button"]:focus, 
.customCSS label.frequency.radio-button[data-component="DonationButtonFrequency.button"]:focus{
  outline: transparent !important;
}

/* Selected buttons */
.customCSS label.frequency.radio-button.selected[data-component="PledgeButtonFrequency.button"], 
.customCSS label.frequency.radio-button.selected[data-component="DonationButtonFrequency.button"]{


  -webkit-transition: all .3s;
  transition: all .3s;
  display: inline-block;
  white-space: normal;
  vertical-align: middle;
  -ms-touch-action: manipulation;
  touch-action: manipulation;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  outline: transparent !important;

  padding: 6px 12px;
  margin-bottom: 0;

  font-size: 14px;
  font-weight: 400;
  line-height: 1.42857143;
  text-align: center;

  border: 1px solid transparent;
  border-radius: 5px; /* Button Border Radius - Change */

  background-image: none;
  background-color: rgba(31, 73, 91, 1); /* Legacy Blue */  /*  Selected button color */ /* CHANGE COLOR */

  color:#fff;

}

.customCSS label.frequency.radio-button.selected[data-component="PledgeButtonFrequency.button"]:hover, 
.customCSS label.frequency.radio-button.selected[data-component="DonationButtonFrequency.button"]:hover{
  background-color: rgba(31, 73, 91, 1); /* Legacy Blue */ /* CHANGE COLOR */
}

.customCSS label.frequency.radio-button.selected[data-component="PledgeButtonFrequency.button"]:focus, 
.customCSS label.frequency.radio-button.selected[data-component="DonationButtonFrequency.button"]:focus {
  outline: transparent !important;
  background-color: rgba(31, 73, 91, 1); /* Legacy Blue */ /* CHANGE COLOR */
}
/* /end Frequency buttons */

/* Use on Day buttons - These often follow Active button styling - Add the following override class to a parent container: customCSS */
.customCSS .useOnDay[data-component="ButtonUseOnDaySelector.button"]{

  -webkit-transition: all .3s;
  transition: all .3s;
  display: inline-block;
  white-space: normal;
  vertical-align: middle;
  -ms-touch-action: manipulation;
  touch-action: manipulation;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  outline: transparent !important;

  padding: 6px 12px;
  margin: 0 5px 0 0 !important;
  
  font-family: inherit !important;
  font-size: 14px !important;
  font-weight: 400;
  line-height: normal !important;
  text-align: center;

  border: 1px solid transparent;
  border-radius: 5px !important; /* Button Border Radius - Change */

  background-image: none;
  background-color: rgb(182, 189, 194) !important; /* Unselected button color */ /* CHANGE COLOR */

  color:#fff !important;

}
.customCSS .useOnDay[data-component="ButtonUseOnDaySelector.button"]:hover{
    background-color: rgba(31, 73, 91, 1) !important; /* Legacy Blue */ /* CHANGE COLOR */
}
.customCSS .useOnDay.selected[data-component="ButtonUseOnDaySelector.button"]{
    background-color: rgba(31, 73, 91, 1) !important; /* Legacy Blue */ /* CHANGE COLOR */
}
.customCSS .useOnDay.selected[data-component="ButtonUseOnDaySelector.button"]:hover{
    background-color: rgba(31, 73, 91, 1) !important; /* Legacy Blue */ /* CHANGE COLOR */
}
/* /end Use On Day buttons */



/* Grid / List view buttons - These frequently follow Passive button styling - Add the following override class to a parent container: customCSS */

.customCSS [data-component=gridListToggle] {
    text-align: right;
}
.customCSS [data-component='gridListToggle.gridButton'].btn, [data-component='gridListToggle.listButton'].btn {
    background-color: rgb(182, 189, 194); /* light gray background for unselected buttons */ /* CHANGE COLOR */
    margin-right: 5px;
}
.customCSS .gridListButton{
    line-height: 5px;
    color: #fff; /* CHANGE COLOR */
    font-size: 16px;
    border-radius:5px;
}
.customCSS .gridListButton:hover {
    background-color: rgba(108, 107, 107, 1) !important; /* CHANGE COLOR */
    color: rgb(255, 255, 255);
}
.customCSS .gridListButton.resultsSelected {
    background-color: rgba(108, 107, 107, 1); /* CHANGE COLOR */
    color: rgb(255, 255, 255);
}
.customCSS [data-component='gridListToggle.gridButton'].btn label, [data-component='gridListToggle.listButton'].btn label, [data-component=link] {
    cursor: pointer;
}
/* /end Grid / List view buttons */


/* Pagination - These frequently follow Passive button styling - Add the following override class to a parent container: customCSS */
.customCSS .paging-item {
    width: 45px;
    height: 45px;
    margin: 5px;
    display: inline-block;

    font-size: 20px;
    font-weight: 700;
    line-height: 45px;
    text-align: center;

    color: #545b62;

    border-radius: 5px;

    background-color: rgb(182, 189, 194); /* light gray background for unselected buttons */
}

.customCSS .paging-item:hover {
    background-color: #545b62; /* CHANGE COLOR */
    color: rgb(255, 255, 255);
}

.customCSS .paging-item.page-number.current-page {
    background-color: #545b62; /* CHANGE COLOR */
    color: rgb(255, 255, 255);
}

.customCSS .paging-item.page-number.current-page:hover {
    background-color: #545b62; /* CHANGE COLOR */
    color: rgb(255, 255, 255);
}
.customCSS .paging-item.ellipses{
  background-color: rgba(255, 255, 255, 0);
  color: rgb(182, 189, 194); /* CHANGE COLOR */

}
.customCSS .paging-item.ellipses:hover{
  background-color: rgba(255, 255, 255, 0);
  color: rgb(182, 189, 194); /* CHANGE COLOR */
}

.customCSS .page-number:not(.current-page), .paging-control:not(.disabled), .paging-control:not(.disabled) * {
    cursor: pointer;
}
.customCSS span[data-component*=".paging.previousPage"] label{
  font-family: "Open Sans", sans-serif;
  font-size: 16px;
  font-weight: 700;
  text-transform: uppercase;
  color:rgb(182, 189, 194); /* CHANGE COLOR */
}
.customCSS span[data-component*=".paging.previousPage"] label:hover{
  color:#545b62; /* CHANGE COLOR */
}
.customCSS span[data-component*=".paging.nextPage"] label{
  font-family: "Open Sans", sans-serif;
  font-size: 16px;
  font-weight: 700;
  text-transform: uppercase;
  color:rgb(182, 189, 194); /* CHANGE COLOR */
}
.customCSS span[data-component*=".paging.nextPage"] label:hover{
  color:#545b62; /* CHANGE COLOR */
}

/* /end Pagination */


/* End Buttons */

/* Mobile-Only Content - Useful for showing menu items in mobile only */
@media (min-width:992px){
  .mobileOnly{
    display: none !important;
  }
}
/* Desktop-Only Content - Useful for showing menu items in desktop only */
@media (max-width:992px){
  .desktopOnly{
    display: none !important;
  }
}

/* mobile up to 768px */
/*ul li{
	display: inline-block;
	list-style-type:none;
} */ /* REMOVED BECAUSE THIS DOESN'T SEEM NECESSARY ANYMORE */
.row{
	margin:0;
}
.row [data-component="even01Column.column"] {
	padding-right: 0;
	padding-left: 0;
}
.siteHeader .col-lg-1, .siteHeader .col-lg-10, .siteHeader .col-lg-11, .siteHeader .col-lg-12, .siteHeader .col-lg-2, .siteHeader .col-lg-3, .siteHeader .col-lg-4, .siteHeader .col-lg-5, .siteHeader .col-lg-6, .siteHeader .col-lg-7, .siteHeader .col-lg-8, .siteHeader .col-lg-9, .siteHeader .col-md-1, .siteHeader .col-md-10, .siteHeader .col-md-11, .siteHeader .col-md-12, .siteHeader .col-md-2, .siteHeader .col-md-3, .siteHeader .col-md-4, .siteHeader .col-md-5, .siteHeader .col-md-6, .siteHeader .col-md-7, .siteHeader .col-md-8, .siteHeader .col-md-9, .siteHeader .col-sm-1, .siteHeader .col-sm-10, .siteHeader .col-sm-11, .siteHeader .col-sm-12, .siteHeader .col-sm-2, .siteHeader .col-sm-3, .siteHeader .col-sm-4, .siteHeader .col-sm-5, .siteHeader .col-sm-6, .siteHeader .col-sm-7, .siteHeader .col-sm-8, .siteHeader .col-sm-9, .siteHeader .col-xs-1, .siteHeader .col-xs-10, .siteHeader .col-xs-11, .siteHeader .col-xs-12, .siteHeader .col-xs-2, .siteHeader .col-xs-3, .siteHeader .col-xs-4, .siteHeader .col-xs-5, .siteHeader .col-xs-6, .siteHeader .col-xs-7, .siteHeader .col-xs-8, .siteHeader .col-xs-9{
	position: initial;
}
.siteHeader .menuSide{
	vertical-align: top;
}
.siteHeader [data-component="secondaryNavigation"] {
	vertical-align: top;
}
.siteHeader [data-component="secondaryNavigation"] [data-component="navigationItem"] label{
	cursor: pointer;
}
/* primary navigation */
.primaryNav a{
  color: inherit !important;
  text-decoration: inherit !important;
  font-family: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
}

.customCSS.primaryNav .submenu {
	background-color: none;
	top:100%;
	padding-top:20px;
}
.customCSS.primaryNav .submenu li[data-component="navigationItem"]{
	padding:0;
	background-color: rgba(231, 234, 232, 1);
}
.customCSS.primaryNav .submenu a{
}
.customCSS.primaryNav .submenu a:hover{
}

.customCSS.primaryNav .submenu[data-component="navigationItem.menu"]{
}
.customCSS.primaryNav .submenu[data-component="navigationItem.menu"] [data-component="navigationItem"]{
}
.customCSS.primaryNav .submenu[data-component="navigationItem.menu"] [data-component="navigationItem"]:first-child{
}
.customCSS.primaryNav .submenu[data-component="navigationItem.menu"] label[data-component="navigationItem.label"]{
	padding:13px 20px;
	border-left:8px solid transparent;
}
.customCSS.primaryNav .submenu[data-component="navigationItem.menu"] label[data-component="navigationItem.label"]:hover{
	background-color:#294959;
	color:#fff;
}

@media (max-width:991px){
	.customCSS.primaryNav .menu-toggle ul {
		background-color:#e7eae8;
	}
	.customCSS.primaryNav .menu-toggle [data-component="navigationItem"]{
		padding:0px;
	}
	.customCSS.primaryNav .menu-toggle [data-component="navigationItem"] label{
		padding-left:10px;
		padding-right:10px;
	}
	.customCSS.primaryNav .menu-toggle [data-component="navigationItem"] label:hover{
		background-color:#294959;
		color:#fff;
	}
	.customCSS.primaryNav .submenu[data-component="navigationItem.menu"]{
		padding-top:0px;
	}
	.customCSS.primaryNav .submenu[data-component="navigationItem.menu"] [data-component="navigationItem"]{
		padding:0;
		background-color: rgba(231, 234, 232, 1);
	}
	.customCSS.primaryNav .submenu[data-component="navigationItem.menu"] [data-component="navigationItem"]:first-child{
	}
	.customCSS.primaryNav .submenu[data-component="navigationItem.menu"] label[data-component="navigationItem.label"]{
		padding:13px 20px;
		border-left:8px solid transparent;
		margin:0px;
		margin-bottom:0px;
	}
	.customCSS.primaryNav .submenu[data-component="navigationItem.menu"] label[data-component="navigationItem.label"]:hover{
		background-color:#294959;
		color:#fff;
	}
	.customCSS.primaryNav .submenu .submenu[data-component="navigationItem.menu"] label[data-component="navigationItem.label"]{
	}
}
/* current page indicator */
.currentPage a:after{

  font-family: "fontello";
  font-style: normal;
  font-weight: normal;
  speak: none;

  display: none;
  text-decoration: inherit;
  text-align: center;
  content: '\e818';

  position:absolute;
  top:30%;
  width: 100%;
  transform: translate(-10%);
}
}

/* mobile menu icon */
.hamburgerContainer {

}

[data-component-id="3_header"] [data-nested-id="3_i89562"] .menu-toggle [data-component="primaryNavigation.mobile"]{

}
[data-component=primaryNavigation].hamburger .menu-toggle [data-component="primaryNavigation.mobile.hamburger"]{
    height:100%;
    width:100%;
}
[data-component=primaryNavigation].hamburger .menu-toggle [data-component="primaryNavigation.mobile.hamburger"] span{
	display: block;
    position: absolute;
    height: 3px;
    width: 30px;
    margin: 0px 0;
    transition: .25s;
}


[data-component=primaryNavigation].hamburger .menu-toggle [data-component="primaryNavigation.mobile"] .hamburgerBar1{
	top: 5px;
    left: 0px;
}
[data-component=primaryNavigation].hamburger .menu-toggle [data-component="primaryNavigation.mobile"] .hamburgerBar2{
	top: 13px;
    left: 0px;
}
[data-component=primaryNavigation].hamburger .menu-toggle [data-component="primaryNavigation.mobile"] .hamburgerBar3{
	top: 21px;
    left: 0px;
}


[data-component=primaryNavigation].hamburger .menu-toggle [data-component="primaryNavigation.mobile"].expanded .hamburgerBar1{
    top: 0px;
    left: 4px;
}

[data-component=primaryNavigation].hamburger .menu-toggle [data-component="primaryNavigation.mobile"].expanded .hamburgerBar3{
    top: 21px;
    left: 4px;
}
li[data-component="navigationItem"], li[data-component="navigationItem"] label{
	cursor: pointer;
}

/* mobile menu */
.mobileMenuScroll{
    overflow-y:auto;
}
@media(min-width: 992px){
    .mobileMenuScroll{
        overflow-y:visible;
    }
    .mobileMenuNoFloat{
        float:none !important;
    }
	.mobileMenuOnly{
      	display:none !important;
	}
}
@media(max-width: 991px){

    .menuTopLevel{
        display: none !important;
    }
    [data-component=primaryNavigation] .menu-header.navItemMobile ul.submenu{
        display: block !important;
    }

}


/* header */
.mobileLoginButton{
    vertical-align: top;
}
/* phone link in header */
.headerPhone{
    /*vertical-align:middle;
    color:rgba(245, 130, 32, 1);
    
    font-size:inherit;
    font-weight:400;*/
}
.headerPhone:hover{/*
    text-decoration: none;
    color:rgba(245, 130, 32, .8);*/
}
/* social icons */
.socialIcons{
    padding:0;
}
.socialIcons li{
    display: inline-block;
    font-size:inherit;
    margin:0 15px 10px;
}
.socialIcons li a, .socialIcons a, a.socialIcons{
    font-size:inherit;
    /*color:rgba(255, 255, 255, .5);*/
    /*color:#238a89;*/
    color:rgba(186, 80, 54, 1);
    transition: all 0.33s;
		-moz-transition: all 0.33s;
		-ms-transition: all 0.33s;
		-o-transition: all 0.33s;
		-webkit-transition: all 0.33s;
    cursor: pointer;
    display: block;
	
    padding: 5px 10px;
    border: 2px solid #fff;
    border-radius: 50px;
}
.socialIcons li a:hover, .socialIcons a:hover, a.socialIcons:hover{
    /*color:rgba(255, 255, 255, 1);*/
    /*color:rgb(35,217,215);*/
    color:rgba(225, 255, 255, .71) !important;
	border-color:rgba(225, 255, 255, .71) !important;
}
.socialIcons {
    font-size:inherit;
}
.socialIcons.twitterIcon{

}
.socialIcons.youtubeIcon{
    font-size:120%;
}
/* FOOTER */


/* ACCOUNT PAGE */

/* other addresses */
.otherAddressPanel{
    vertical-align: top;
}
.otherAddressPanel .otherAddresses-items-wrapper > .row{
    display: inline-block;
    width:48%;
    min-width: 270px;
    vertical-align: top;
}
/* recurring */
/*.my-recurring-wrapper > .row{
    display:inline-block !important;
    vertical-align: top;
    width: 48%;
}
.my-recurring-wrapper > .row > .col-sm-12{
    padding:0px;
}
@media(max-width:400px){
    .my-recurring-wrapper > .row{
        width:100%;
    }
}*/
/* saved payments */
.accountSavedPayments [class^="savedPayments-item-eft"], .accountSavedPayments [class^="savedPayments-item-creditCard"]{
    display: inline-block !important;
    vertical-align: top;
}

/* EXPANDERS */
.collapsor::after {
    font-size:10px;
    vertical-align: middle;
    line-height: 43px;
    float:none;
    color:rgba(85, 105, 98, 1);
}
/* TABS */
/* left tabs */
.customCSS.leftTabs ul[data-component="tabsContainer.tabsList"]{
  display: inline-block;
  float:none;
  width:22%;
  margin-right: 10px;
}
.customCSS.leftTabs ul[data-component="tabsContainer.tabsList"] li{
  display: block;
  float:none;
  margin:0px;
  margin-top:0px;
}
.customCSS.leftTabs div[data-component="tabsContainer.contentContainer"]{
  display: inline-block;
  float:none;
  width:72%; 
  vertical-align: top;
}
@media (max-width: 991px){
  .customCSS.leftTabs ul[data-component="tabsContainer.tabsList"]{
	  display:block;
	  width:100%;
  }
  .customCSS.leftTabs div[data-component="tabsContainer.contentContainer"]{
	  display:block;
	  width:100%;
  }
}
/* top tabs */
.customCSS.topTabs ul[data-component="tabsContainer.tabsList"]{
  display: block;
  float:none;
  width:100%;
}
.customCSS.topTabs ul[data-component="tabsContainer.tabsList"] li{
  display: inline-block;
  float:none;
  margin:0px;
  margin-top:0px;
}
.customCSS.topTabs div[data-component="tabsContainer.contentContainer"]{
  display: block;
  float:none;
  width:100%; 
  vertical-align: top;
}


/* CHECKOUT */

/* shopping cart */
div[data-component*="cart.populated"] > div.row:last-child div[data-component="even01Column"] {
    /* border-bottom:none; */
}
/* shipping methods */

.shipping-methods-item-shipping-method [disabled], .shipping-methods-item-shipping-method [disabled] + label, .shipping-methods-item-shipping-method [disabled] + label + label, .shipping-methods-item-shipping-method [disabled] + label + label + label, .shipping-methods-item-shipping-method [disabled] + label + label + label + label{
    color:rgba(204, 204, 204, 1) !important ;
}

/* FORGOT PASSWORD */

.forgotPassLink{

}

.forgotPassLink a{

}

.forgotPassLink a:hover{

}
.forgotCancelLink{

    
}
.forgotCancelLink a{

}
.forgotCancelLink a:hover{}


/* tablet and larger only */
@media(min-width:768px){

}

/* desktop only */
@media(min-width:992px){


}



/*

 *****            *****
 ***** ANIMATIONS *****
 *****            *****

*/ 

/*!
 * animate.css -https://daneden.github.io/animate.css/
 * Version - 3.7.2
 * Licensed under the MIT license - http://opensource.org/licenses/MIT
 *
 * Copyright (c) 2019 Daniel Eden
 */

@-webkit-keyframes bounce {
  from,
  20%,
  53%,
  80%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  40%,
  43% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -30px, 0);
    transform: translate3d(0, -30px, 0);
  }

  70% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -15px, 0);
    transform: translate3d(0, -15px, 0);
  }

  90% {
    -webkit-transform: translate3d(0, -4px, 0);
    transform: translate3d(0, -4px, 0);
  }
}

@keyframes bounce {
  from,
  20%,
  53%,
  80%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  40%,
  43% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -30px, 0);
    transform: translate3d(0, -30px, 0);
  }

  70% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -15px, 0);
    transform: translate3d(0, -15px, 0);
  }

  90% {
    -webkit-transform: translate3d(0, -4px, 0);
    transform: translate3d(0, -4px, 0);
  }
}

.bounce {
  -webkit-animation-name: bounce;
  animation-name: bounce;
  -webkit-transform-origin: center bottom;
  transform-origin: center bottom;
}

@-webkit-keyframes flash {
  from,
  50%,
  to {
    opacity: 1;
  }

  25%,
  75% {
    opacity: 0;
  }
}

@keyframes flash {
  from,
  50%,
  to {
    opacity: 1;
  }

  25%,
  75% {
    opacity: 0;
  }
}

.flash {
  -webkit-animation-name: flash;
  animation-name: flash;
}

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */

@-webkit-keyframes pulse {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
    transform: scale3d(1.05, 1.05, 1.05);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

@keyframes pulse {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
    transform: scale3d(1.05, 1.05, 1.05);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

.pulse {
  -webkit-animation-name: pulse;
  animation-name: pulse;
}

@-webkit-keyframes rubberBand {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  30% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
    transform: scale3d(1.25, 0.75, 1);
  }

  40% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
    transform: scale3d(0.75, 1.25, 1);
  }

  50% {
    -webkit-transform: scale3d(1.15, 0.85, 1);
    transform: scale3d(1.15, 0.85, 1);
  }

  65% {
    -webkit-transform: scale3d(0.95, 1.05, 1);
    transform: scale3d(0.95, 1.05, 1);
  }

  75% {
    -webkit-transform: scale3d(1.05, 0.95, 1);
    transform: scale3d(1.05, 0.95, 1);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

@keyframes rubberBand {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  30% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
    transform: scale3d(1.25, 0.75, 1);
  }

  40% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
    transform: scale3d(0.75, 1.25, 1);
  }

  50% {
    -webkit-transform: scale3d(1.15, 0.85, 1);
    transform: scale3d(1.15, 0.85, 1);
  }

  65% {
    -webkit-transform: scale3d(0.95, 1.05, 1);
    transform: scale3d(0.95, 1.05, 1);
  }

  75% {
    -webkit-transform: scale3d(1.05, 0.95, 1);
    transform: scale3d(1.05, 0.95, 1);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

.rubberBand {
  -webkit-animation-name: rubberBand;
  animation-name: rubberBand;
}

@-webkit-keyframes shake {
  from,
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  10%,
  30%,
  50%,
  70%,
  90% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0);
  }

  20%,
  40%,
  60%,
  80% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
  }
}

@keyframes shake {
  from,
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  10%,
  30%,
  50%,
  70%,
  90% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0);
  }

  20%,
  40%,
  60%,
  80% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
  }
}

.shake {
  -webkit-animation-name: shake;
  animation-name: shake;
}

@-webkit-keyframes headShake {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  6.5% {
    -webkit-transform: translateX(-6px) rotateY(-9deg);
    transform: translateX(-6px) rotateY(-9deg);
  }

  18.5% {
    -webkit-transform: translateX(5px) rotateY(7deg);
    transform: translateX(5px) rotateY(7deg);
  }

  31.5% {
    -webkit-transform: translateX(-3px) rotateY(-5deg);
    transform: translateX(-3px) rotateY(-5deg);
  }

  43.5% {
    -webkit-transform: translateX(2px) rotateY(3deg);
    transform: translateX(2px) rotateY(3deg);
  }

  50% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@keyframes headShake {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  6.5% {
    -webkit-transform: translateX(-6px) rotateY(-9deg);
    transform: translateX(-6px) rotateY(-9deg);
  }

  18.5% {
    -webkit-transform: translateX(5px) rotateY(7deg);
    transform: translateX(5px) rotateY(7deg);
  }

  31.5% {
    -webkit-transform: translateX(-3px) rotateY(-5deg);
    transform: translateX(-3px) rotateY(-5deg);
  }

  43.5% {
    -webkit-transform: translateX(2px) rotateY(3deg);
    transform: translateX(2px) rotateY(3deg);
  }

  50% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

.headShake {
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  -webkit-animation-name: headShake;
  animation-name: headShake;
}

@-webkit-keyframes swing {
  20% {
    -webkit-transform: rotate3d(0, 0, 1, 15deg);
    transform: rotate3d(0, 0, 1, 15deg);
  }

  40% {
    -webkit-transform: rotate3d(0, 0, 1, -10deg);
    transform: rotate3d(0, 0, 1, -10deg);
  }

  60% {
    -webkit-transform: rotate3d(0, 0, 1, 5deg);
    transform: rotate3d(0, 0, 1, 5deg);
  }

  80% {
    -webkit-transform: rotate3d(0, 0, 1, -5deg);
    transform: rotate3d(0, 0, 1, -5deg);
  }

  to {
    -webkit-transform: rotate3d(0, 0, 1, 0deg);
    transform: rotate3d(0, 0, 1, 0deg);
  }
}

@keyframes swing {
  20% {
    -webkit-transform: rotate3d(0, 0, 1, 15deg);
    transform: rotate3d(0, 0, 1, 15deg);
  }

  40% {
    -webkit-transform: rotate3d(0, 0, 1, -10deg);
    transform: rotate3d(0, 0, 1, -10deg);
  }

  60% {
    -webkit-transform: rotate3d(0, 0, 1, 5deg);
    transform: rotate3d(0, 0, 1, 5deg);
  }

  80% {
    -webkit-transform: rotate3d(0, 0, 1, -5deg);
    transform: rotate3d(0, 0, 1, -5deg);
  }

  to {
    -webkit-transform: rotate3d(0, 0, 1, 0deg);
    transform: rotate3d(0, 0, 1, 0deg);
  }
}

.swing {
  -webkit-transform-origin: top center;
  transform-origin: top center;
  -webkit-animation-name: swing;
  animation-name: swing;
}

@-webkit-keyframes tada {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  10%,
  20% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
  }

  30%,
  50%,
  70%,
  90% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
  }

  40%,
  60%,
  80% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

@keyframes tada {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  10%,
  20% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
  }

  30%,
  50%,
  70%,
  90% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
  }

  40%,
  60%,
  80% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

.tada {
  -webkit-animation-name: tada;
  animation-name: tada;
}

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */

@-webkit-keyframes wobble {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  15% {
    -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
    transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
  }

  30% {
    -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
    transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
  }

  45% {
    -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
    transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
  }

  60% {
    -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
    transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
  }

  75% {
    -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
    transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes wobble {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  15% {
    -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
    transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
  }

  30% {
    -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
    transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
  }

  45% {
    -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
    transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
  }

  60% {
    -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
    transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
  }

  75% {
    -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
    transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.wobble {
  -webkit-animation-name: wobble;
  animation-name: wobble;
}

@-webkit-keyframes jello {
  from,
  11.1%,
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  22.2% {
    -webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
    transform: skewX(-12.5deg) skewY(-12.5deg);
  }

  33.3% {
    -webkit-transform: skewX(6.25deg) skewY(6.25deg);
    transform: skewX(6.25deg) skewY(6.25deg);
  }

  44.4% {
    -webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
    transform: skewX(-3.125deg) skewY(-3.125deg);
  }

  55.5% {
    -webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
    transform: skewX(1.5625deg) skewY(1.5625deg);
  }

  66.6% {
    -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);
    transform: skewX(-0.78125deg) skewY(-0.78125deg);
  }

  77.7% {
    -webkit-transform: skewX(0.390625deg) skewY(0.390625deg);
    transform: skewX(0.390625deg) skewY(0.390625deg);
  }

  88.8% {
    -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
    transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
  }
}

@keyframes jello {
  from,
  11.1%,
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  22.2% {
    -webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
    transform: skewX(-12.5deg) skewY(-12.5deg);
  }

  33.3% {
    -webkit-transform: skewX(6.25deg) skewY(6.25deg);
    transform: skewX(6.25deg) skewY(6.25deg);
  }

  44.4% {
    -webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
    transform: skewX(-3.125deg) skewY(-3.125deg);
  }

  55.5% {
    -webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
    transform: skewX(1.5625deg) skewY(1.5625deg);
  }

  66.6% {
    -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);
    transform: skewX(-0.78125deg) skewY(-0.78125deg);
  }

  77.7% {
    -webkit-transform: skewX(0.390625deg) skewY(0.390625deg);
    transform: skewX(0.390625deg) skewY(0.390625deg);
  }

  88.8% {
    -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
    transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
  }
}

.jello {
  -webkit-animation-name: jello;
  animation-name: jello;
  -webkit-transform-origin: center;
  transform-origin: center;
}

@-webkit-keyframes heartBeat {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  14% {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
  }

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

  42% {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
  }

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

@keyframes heartBeat {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  14% {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
  }

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

  42% {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
  }

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

.heartBeat {
  -webkit-animation-name: heartBeat;
  animation-name: heartBeat;
  -webkit-animation-duration: 1.3s;
  animation-duration: 1.3s;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
}

@-webkit-keyframes bounceIn {
  from,
  20%,
  40%,
  60%,
  80%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

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

  20% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }

  40% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(1.03, 1.03, 1.03);
    transform: scale3d(1.03, 1.03, 1.03);
  }

  80% {
    -webkit-transform: scale3d(0.97, 0.97, 0.97);
    transform: scale3d(0.97, 0.97, 0.97);
  }

  to {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

@keyframes bounceIn {
  from,
  20%,
  40%,
  60%,
  80%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

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

  20% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }

  40% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(1.03, 1.03, 1.03);
    transform: scale3d(1.03, 1.03, 1.03);
  }

  80% {
    -webkit-transform: scale3d(0.97, 0.97, 0.97);
    transform: scale3d(0.97, 0.97, 0.97);
  }

  to {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

.bounceIn {
  -webkit-animation-duration: 0.75s;
  animation-duration: 0.75s;
  -webkit-animation-name: bounceIn;
  animation-name: bounceIn;
}

@-webkit-keyframes bounceInDown {
  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -3000px, 0);
    transform: translate3d(0, -3000px, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, 25px, 0);
    transform: translate3d(0, 25px, 0);
  }

  75% {
    -webkit-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0);
  }

  90% {
    -webkit-transform: translate3d(0, 5px, 0);
    transform: translate3d(0, 5px, 0);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes bounceInDown {
  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -3000px, 0);
    transform: translate3d(0, -3000px, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, 25px, 0);
    transform: translate3d(0, 25px, 0);
  }

  75% {
    -webkit-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0);
  }

  90% {
    -webkit-transform: translate3d(0, 5px, 0);
    transform: translate3d(0, 5px, 0);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

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

@-webkit-keyframes bounceInLeft {
  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  0% {
    opacity: 0;
    -webkit-transform: translate3d(-3000px, 0, 0);
    transform: translate3d(-3000px, 0, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(25px, 0, 0);
    transform: translate3d(25px, 0, 0);
  }

  75% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0);
  }

  90% {
    -webkit-transform: translate3d(5px, 0, 0);
    transform: translate3d(5px, 0, 0);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes bounceInLeft {
  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  0% {
    opacity: 0;
    -webkit-transform: translate3d(-3000px, 0, 0);
    transform: translate3d(-3000px, 0, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(25px, 0, 0);
    transform: translate3d(25px, 0, 0);
  }

  75% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0);
  }

  90% {
    -webkit-transform: translate3d(5px, 0, 0);
    transform: translate3d(5px, 0, 0);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

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

@-webkit-keyframes bounceInRight {
  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  from {
    opacity: 0;
    -webkit-transform: translate3d(3000px, 0, 0);
    transform: translate3d(3000px, 0, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(-25px, 0, 0);
    transform: translate3d(-25px, 0, 0);
  }

  75% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
  }

  90% {
    -webkit-transform: translate3d(-5px, 0, 0);
    transform: translate3d(-5px, 0, 0);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes bounceInRight {
  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  from {
    opacity: 0;
    -webkit-transform: translate3d(3000px, 0, 0);
    transform: translate3d(3000px, 0, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(-25px, 0, 0);
    transform: translate3d(-25px, 0, 0);
  }

  75% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
  }

  90% {
    -webkit-transform: translate3d(-5px, 0, 0);
    transform: translate3d(-5px, 0, 0);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

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

@-webkit-keyframes bounceInUp {
  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 3000px, 0);
    transform: translate3d(0, 3000px, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0);
  }

  75% {
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0);
  }

  90% {
    -webkit-transform: translate3d(0, -5px, 0);
    transform: translate3d(0, -5px, 0);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes bounceInUp {
  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 3000px, 0);
    transform: translate3d(0, 3000px, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0);
  }

  75% {
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0);
  }

  90% {
    -webkit-transform: translate3d(0, -5px, 0);
    transform: translate3d(0, -5px, 0);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

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

@-webkit-keyframes bounceOut {
  20% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9);
  }

  50%,
  55% {
    opacity: 1;
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }

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

@keyframes bounceOut {
  20% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9);
  }

  50%,
  55% {
    opacity: 1;
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }

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

.bounceOut {
  -webkit-animation-duration: 0.75s;
  animation-duration: 0.75s;
  -webkit-animation-name: bounceOut;
  animation-name: bounceOut;
}

@-webkit-keyframes bounceOutDown {
  20% {
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0);
  }

  40%,
  45% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }
}

@keyframes bounceOutDown {
  20% {
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0);
  }

  40%,
  45% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }
}

.bounceOutDown {
  -webkit-animation-name: bounceOutDown;
  animation-name: bounceOutDown;
}

@-webkit-keyframes bounceOutLeft {
  20% {
    opacity: 1;
    -webkit-transform: translate3d(20px, 0, 0);
    transform: translate3d(20px, 0, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0);
  }
}

@keyframes bounceOutLeft {
  20% {
    opacity: 1;
    -webkit-transform: translate3d(20px, 0, 0);
    transform: translate3d(20px, 0, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0);
  }
}

.bounceOutLeft {
  -webkit-animation-name: bounceOutLeft;
  animation-name: bounceOutLeft;
}

@-webkit-keyframes bounceOutRight {
  20% {
    opacity: 1;
    -webkit-transform: translate3d(-20px, 0, 0);
    transform: translate3d(-20px, 0, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }
}

@keyframes bounceOutRight {
  20% {
    opacity: 1;
    -webkit-transform: translate3d(-20px, 0, 0);
    transform: translate3d(-20px, 0, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }
}

.bounceOutRight {
  -webkit-animation-name: bounceOutRight;
  animation-name: bounceOutRight;
}

@-webkit-keyframes bounceOutUp {
  20% {
    -webkit-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0);
  }

  40%,
  45% {
    opacity: 1;
    -webkit-transform: translate3d(0, 20px, 0);
    transform: translate3d(0, 20px, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0);
  }
}

@keyframes bounceOutUp {
  20% {
    -webkit-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0);
  }

  40%,
  45% {
    opacity: 1;
    -webkit-transform: translate3d(0, 20px, 0);
    transform: translate3d(0, 20px, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0);
  }
}

.bounceOutUp {
  -webkit-animation-name: bounceOutUp;
  animation-name: bounceOutUp;
}

@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.fadeIn {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
}

@-webkit-keyframes fadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.fadeInDown {
  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown;
}

@-webkit-keyframes fadeInDownBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInDownBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.fadeInDownBig {
  -webkit-animation-name: fadeInDownBig;
  animation-name: fadeInDownBig;
}

@-webkit-keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.fadeInLeft {
  -webkit-animation-name: fadeInLeft;
  animation-name: fadeInLeft;
}

@-webkit-keyframes fadeInLeftBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInLeftBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.fadeInLeftBig {
  -webkit-animation-name: fadeInLeftBig;
  animation-name: fadeInLeftBig;
}

@-webkit-keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.fadeInRight {
  -webkit-animation-name: fadeInRight;
  animation-name: fadeInRight;
}

@-webkit-keyframes fadeInRightBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInRightBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.fadeInRightBig {
  -webkit-animation-name: fadeInRightBig;
  animation-name: fadeInRightBig;
}

@-webkit-keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.fadeInUp {
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
}

@-webkit-keyframes fadeInUpBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInUpBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.fadeInUpBig {
  -webkit-animation-name: fadeInUpBig;
  animation-name: fadeInUpBig;
}

@-webkit-keyframes fadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

.fadeOut {
  -webkit-animation-name: fadeOut;
  animation-name: fadeOut;
}

@-webkit-keyframes fadeOutDown {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
}

@keyframes fadeOutDown {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
}

.fadeOutDown {
  -webkit-animation-name: fadeOutDown;
  animation-name: fadeOutDown;
}

@-webkit-keyframes fadeOutDownBig {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }
}

@keyframes fadeOutDownBig {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }
}

.fadeOutDownBig {
  -webkit-animation-name: fadeOutDownBig;
  animation-name: fadeOutDownBig;
}

@-webkit-keyframes fadeOutLeft {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}

@keyframes fadeOutLeft {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}

.fadeOutLeft {
  -webkit-animation-name: fadeOutLeft;
  animation-name: fadeOutLeft;
}

@-webkit-keyframes fadeOutLeftBig {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0);
  }
}

@keyframes fadeOutLeftBig {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0);
  }
}

.fadeOutLeftBig {
  -webkit-animation-name: fadeOutLeftBig;
  animation-name: fadeOutLeftBig;
}

@-webkit-keyframes fadeOutRight {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
}

@keyframes fadeOutRight {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
}

.fadeOutRight {
  -webkit-animation-name: fadeOutRight;
  animation-name: fadeOutRight;
}

@-webkit-keyframes fadeOutRightBig {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }
}

@keyframes fadeOutRightBig {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }
}

.fadeOutRightBig {
  -webkit-animation-name: fadeOutRightBig;
  animation-name: fadeOutRightBig;
}

@-webkit-keyframes fadeOutUp {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}

@keyframes fadeOutUp {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}

.fadeOutUp {
  -webkit-animation-name: fadeOutUp;
  animation-name: fadeOutUp;
}

@-webkit-keyframes fadeOutUpBig {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0);
  }
}

@keyframes fadeOutUpBig {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0);
  }
}

.fadeOutUpBig {
  -webkit-animation-name: fadeOutUpBig;
  animation-name: fadeOutUpBig;
}

@-webkit-keyframes flip {
  from {
    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0)
      rotate3d(0, 1, 0, -360deg);
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  40% {
    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
      rotate3d(0, 1, 0, -190deg);
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
      rotate3d(0, 1, 0, -190deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  50% {
    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
      rotate3d(0, 1, 0, -170deg);
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
      rotate3d(0, 1, 0, -170deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  80% {
    -webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0)
      rotate3d(0, 1, 0, 0deg);
    transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0)
      rotate3d(0, 1, 0, 0deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  to {
    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0)
      rotate3d(0, 1, 0, 0deg);
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
}

@keyframes flip {
  from {
    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0)
      rotate3d(0, 1, 0, -360deg);
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  40% {
    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
      rotate3d(0, 1, 0, -190deg);
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
      rotate3d(0, 1, 0, -190deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  50% {
    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
      rotate3d(0, 1, 0, -170deg);
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
      rotate3d(0, 1, 0, -170deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  80% {
    -webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0)
      rotate3d(0, 1, 0, 0deg);
    transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0)
      rotate3d(0, 1, 0, 0deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  to {
    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0)
      rotate3d(0, 1, 0, 0deg);
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
}

.animated.flip {
  -webkit-backface-visibility: visible;
  backface-visibility: visible;
  -webkit-animation-name: flip;
  animation-name: flip;
}

@-webkit-keyframes flipInX {
  from {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  60% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
  }

  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
}

@keyframes flipInX {
  from {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  60% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
  }

  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
}

.flipInX {
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipInX;
  animation-name: flipInX;
}

@-webkit-keyframes flipInY {
  from {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  60% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
  }

  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
}

@keyframes flipInY {
  from {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  60% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
  }

  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
}

.flipInY {
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipInY;
  animation-name: flipInY;
}

@-webkit-keyframes flipOutX {
  from {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }

  30% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    opacity: 1;
  }

  to {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    opacity: 0;
  }
}

@keyframes flipOutX {
  from {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }

  30% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    opacity: 1;
  }

  to {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    opacity: 0;
  }
}

.flipOutX {
  -webkit-animation-duration: 0.75s;
  animation-duration: 0.75s;
  -webkit-animation-name: flipOutX;
  animation-name: flipOutX;
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
}

@-webkit-keyframes flipOutY {
  from {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }

  30% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
    opacity: 1;
  }

  to {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    opacity: 0;
  }
}

@keyframes flipOutY {
  from {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }

  30% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
    opacity: 1;
  }

  to {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    opacity: 0;
  }
}

.flipOutY {
  -webkit-animation-duration: 0.75s;
  animation-duration: 0.75s;
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipOutY;
  animation-name: flipOutY;
}

@-webkit-keyframes lightSpeedIn {
  from {
    -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
    transform: translate3d(100%, 0, 0) skewX(-30deg);
    opacity: 0;
  }

  60% {
    -webkit-transform: skewX(20deg);
    transform: skewX(20deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: skewX(-5deg);
    transform: skewX(-5deg);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes lightSpeedIn {
  from {
    -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
    transform: translate3d(100%, 0, 0) skewX(-30deg);
    opacity: 0;
  }

  60% {
    -webkit-transform: skewX(20deg);
    transform: skewX(20deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: skewX(-5deg);
    transform: skewX(-5deg);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.lightSpeedIn {
  -webkit-animation-name: lightSpeedIn;
  animation-name: lightSpeedIn;
  -webkit-animation-timing-function: ease-out;
  animation-timing-function: ease-out;
}

@-webkit-keyframes lightSpeedOut {
  from {
    opacity: 1;
  }

  to {
    -webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
    transform: translate3d(100%, 0, 0) skewX(30deg);
    opacity: 0;
  }
}

@keyframes lightSpeedOut {
  from {
    opacity: 1;
  }

  to {
    -webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
    transform: translate3d(100%, 0, 0) skewX(30deg);
    opacity: 0;
  }
}

.lightSpeedOut {
  -webkit-animation-name: lightSpeedOut;
  animation-name: lightSpeedOut;
  -webkit-animation-timing-function: ease-in;
  animation-timing-function: ease-in;
}

@-webkit-keyframes rotateIn {
  from {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: rotate3d(0, 0, 1, -200deg);
    transform: rotate3d(0, 0, 1, -200deg);
    opacity: 0;
  }

  to {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

@keyframes rotateIn {
  from {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: rotate3d(0, 0, 1, -200deg);
    transform: rotate3d(0, 0, 1, -200deg);
    opacity: 0;
  }

  to {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

.rotateIn {
  -webkit-animation-name: rotateIn;
  animation-name: rotateIn;
}

@-webkit-keyframes rotateInDownLeft {
  from {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }

  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

@keyframes rotateInDownLeft {
  from {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }

  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

.rotateInDownLeft {
  -webkit-animation-name: rotateInDownLeft;
  animation-name: rotateInDownLeft;
}

@-webkit-keyframes rotateInDownRight {
  from {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }

  to {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

@keyframes rotateInDownRight {
  from {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }

  to {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

.rotateInDownRight {
  -webkit-animation-name: rotateInDownRight;
  animation-name: rotateInDownRight;
}

@-webkit-keyframes rotateInUpLeft {
  from {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }

  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

@keyframes rotateInUpLeft {
  from {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }

  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

.rotateInUpLeft {
  -webkit-animation-name: rotateInUpLeft;
  animation-name: rotateInUpLeft;
}

@-webkit-keyframes rotateInUpRight {
  from {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, -90deg);
    transform: rotate3d(0, 0, 1, -90deg);
    opacity: 0;
  }

  to {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

@keyframes rotateInUpRight {
  from {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, -90deg);
    transform: rotate3d(0, 0, 1, -90deg);
    opacity: 0;
  }

  to {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

.rotateInUpRight {
  -webkit-animation-name: rotateInUpRight;
  animation-name: rotateInUpRight;
}

@-webkit-keyframes rotateOut {
  from {
    -webkit-transform-origin: center;
    transform-origin: center;
    opacity: 1;
  }

  to {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: rotate3d(0, 0, 1, 200deg);
    transform: rotate3d(0, 0, 1, 200deg);
    opacity: 0;
  }
}

@keyframes rotateOut {
  from {
    -webkit-transform-origin: center;
    transform-origin: center;
    opacity: 1;
  }

  to {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: rotate3d(0, 0, 1, 200deg);
    transform: rotate3d(0, 0, 1, 200deg);
    opacity: 0;
  }
}

.rotateOut {
  -webkit-animation-name: rotateOut;
  animation-name: rotateOut;
}

@-webkit-keyframes rotateOutDownLeft {
  from {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    opacity: 1;
  }

  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }
}

@keyframes rotateOutDownLeft {
  from {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    opacity: 1;
  }

  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }
}

.rotateOutDownLeft {
  -webkit-animation-name: rotateOutDownLeft;
  animation-name: rotateOutDownLeft;
}

@-webkit-keyframes rotateOutDownRight {
  from {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    opacity: 1;
  }

  to {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }
}

@keyframes rotateOutDownRight {
  from {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    opacity: 1;
  }

  to {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }
}

.rotateOutDownRight {
  -webkit-animation-name: rotateOutDownRight;
  animation-name: rotateOutDownRight;
}

@-webkit-keyframes rotateOutUpLeft {
  from {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    opacity: 1;
  }

  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }
}

@keyframes rotateOutUpLeft {
  from {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    opacity: 1;
  }

  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }
}

.rotateOutUpLeft {
  -webkit-animation-name: rotateOutUpLeft;
  animation-name: rotateOutUpLeft;
}

@-webkit-keyframes rotateOutUpRight {
  from {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    opacity: 1;
  }

  to {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, 90deg);
    transform: rotate3d(0, 0, 1, 90deg);
    opacity: 0;
  }
}

@keyframes rotateOutUpRight {
  from {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    opacity: 1;
  }

  to {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, 90deg);
    transform: rotate3d(0, 0, 1, 90deg);
    opacity: 0;
  }
}

.rotateOutUpRight {
  -webkit-animation-name: rotateOutUpRight;
  animation-name: rotateOutUpRight;
}

@-webkit-keyframes hinge {
  0% {
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  20%,
  60% {
    -webkit-transform: rotate3d(0, 0, 1, 80deg);
    transform: rotate3d(0, 0, 1, 80deg);
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  40%,
  80% {
    -webkit-transform: rotate3d(0, 0, 1, 60deg);
    transform: rotate3d(0, 0, 1, 60deg);
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    opacity: 1;
  }

  to {
    -webkit-transform: translate3d(0, 700px, 0);
    transform: translate3d(0, 700px, 0);
    opacity: 0;
  }
}

@keyframes hinge {
  0% {
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  20%,
  60% {
    -webkit-transform: rotate3d(0, 0, 1, 80deg);
    transform: rotate3d(0, 0, 1, 80deg);
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  40%,
  80% {
    -webkit-transform: rotate3d(0, 0, 1, 60deg);
    transform: rotate3d(0, 0, 1, 60deg);
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    opacity: 1;
  }

  to {
    -webkit-transform: translate3d(0, 700px, 0);
    transform: translate3d(0, 700px, 0);
    opacity: 0;
  }
}

.hinge {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
  -webkit-animation-name: hinge;
  animation-name: hinge;
}

@-webkit-keyframes jackInTheBox {
  from {
    opacity: 0;
    -webkit-transform: scale(0.1) rotate(30deg);
    transform: scale(0.1) rotate(30deg);
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
  }

  50% {
    -webkit-transform: rotate(-10deg);
    transform: rotate(-10deg);
  }

  70% {
    -webkit-transform: rotate(3deg);
    transform: rotate(3deg);
  }

  to {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@keyframes jackInTheBox {
  from {
    opacity: 0;
    -webkit-transform: scale(0.1) rotate(30deg);
    transform: scale(0.1) rotate(30deg);
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
  }

  50% {
    -webkit-transform: rotate(-10deg);
    transform: rotate(-10deg);
  }

  70% {
    -webkit-transform: rotate(3deg);
    transform: rotate(3deg);
  }

  to {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

.jackInTheBox {
  -webkit-animation-name: jackInTheBox;
  animation-name: jackInTheBox;
}

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */

@-webkit-keyframes rollIn {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
    transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes rollIn {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
    transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.rollIn {
  -webkit-animation-name: rollIn;
  animation-name: rollIn;
}

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */

@-webkit-keyframes rollOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
    transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
  }
}

@keyframes rollOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
    transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
  }
}

.rollOut {
  -webkit-animation-name: rollOut;
  animation-name: rollOut;
}

@-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;
}

@-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-transform-origin: center bottom;
    transform-origin: center bottom;
    -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-transform-origin: center bottom;
    transform-origin: center bottom;
    -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-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);
    -webkit-transform-origin: left center;
    transform-origin: left center;
  }
}

@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);
    -webkit-transform-origin: left center;
    transform-origin: left center;
  }
}

.zoomOutLeft {
  -webkit-animation-name: zoomOutLeft;
  animation-name: zoomOutLeft;
}

@-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);
    -webkit-transform-origin: right center;
    transform-origin: right center;
  }
}

@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);
    -webkit-transform-origin: right center;
    transform-origin: right center;
  }
}

.zoomOutRight {
  -webkit-animation-name: zoomOutRight;
  animation-name: zoomOutRight;
}

@-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-transform-origin: center bottom;
    transform-origin: center bottom;
    -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-transform-origin: center bottom;
    transform-origin: center bottom;
    -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-keyframes slideInDown {
  from {
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes slideInDown {
  from {
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.slideInDown {
  -webkit-animation-name: slideInDown;
  animation-name: slideInDown;
}

@-webkit-keyframes slideInLeft {
  from {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes slideInLeft {
  from {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.slideInLeft {
  -webkit-animation-name: slideInLeft;
  animation-name: slideInLeft;
}

@-webkit-keyframes slideInRight {
  from {
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes slideInRight {
  from {
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.slideInRight {
  -webkit-animation-name: slideInRight;
  animation-name: slideInRight;
}

@-webkit-keyframes slideInUp {
  from {
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes slideInUp {
  from {
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.slideInUp {
  -webkit-animation-name: slideInUp;
  animation-name: slideInUp;
}

@-webkit-keyframes slideOutDown {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
}

@keyframes slideOutDown {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
}

.slideOutDown {
  -webkit-animation-name: slideOutDown;
  animation-name: slideOutDown;
}

@-webkit-keyframes slideOutLeft {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}

@keyframes slideOutLeft {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}

.slideOutLeft {
  -webkit-animation-name: slideOutLeft;
  animation-name: slideOutLeft;
}

@-webkit-keyframes slideOutRight {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
}

@keyframes slideOutRight {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
}

.slideOutRight {
  -webkit-animation-name: slideOutRight;
  animation-name: slideOutRight;
}

@-webkit-keyframes slideOutUp {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}

@keyframes slideOutUp {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}

.slideOutUp {
  -webkit-animation-name: slideOutUp;
  animation-name: slideOutUp;
}

.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.animated.infinite {
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

.animated.delay-quartersecond {
  -webkit-animation-delay: .25s;
  animation-delay: .25s;
}
.animated.delay-1s {
  -webkit-animation-delay: 1s;
  animation-delay: 1s;
}

.animated.delay-2s {
  -webkit-animation-delay: 2s;
  animation-delay: 2s;
}

.animated.delay-3s {
  -webkit-animation-delay: 3s;
  animation-delay: 3s;
}

.animated.delay-4s {
  -webkit-animation-delay: 4s;
  animation-delay: 4s;
}

.animated.delay-5s {
  -webkit-animation-delay: 5s;
  animation-delay: 5s;
}

.animated.fast {
  -webkit-animation-duration: 800ms;
  animation-duration: 800ms;
}

.animated.faster {
  -webkit-animation-duration: 500ms;
  animation-duration: 500ms;
}

.animated.slow {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
}

.animated.slower {
  -webkit-animation-duration: 3s;
  animation-duration: 3s;
}

@media (print), (prefers-reduced-motion: reduce) {
  .animated {
    -webkit-animation-duration: 1ms !important;
    animation-duration: 1ms !important;
    -webkit-transition-duration: 1ms !important;
    transition-duration: 1ms !important;
    -webkit-animation-iteration-count: 1 !important;
    animation-iteration-count: 1 !important;
  }
}
/***********************************/
/* END ANIMATIONS FROM Animate.CSS */
/***********************************/


/**********************/
/* CUSTOM ANIMATIONS */
/**********************/

/* Ripple Effect on click */
@keyframes ripple-wave {
  0% {
    height: 40px;
    width: 40px;
    opacity: 0.35;
    position: relative;
  }
  100% {
    height: 200px;
    width: 200px;
    margin-left: -80px;
    margin-top: -80px;
    opacity: 0;
  }
}

.rippleClickAction:after, .sparkleAction {
  -webkit-animation: ripple-wave 0.65s;
  -moz-animation: ripple-wave 0.65s;
  animation: ripple-wave 0.65s;
  background: #40e0d0;
  content: '';
  display: block;
  position: relative;
  z-index: 100;
}

@keyframes shadow-expansion {
  0% {
    box-shadow: 0 0 25px 0 #175c86;
  }
  100% {
    box-shadow: 0 0 50px 0 #175c86;
  }
}


.shadowBloomAction {
  -webkit-animation: shadow-expansion .5s;
  -moz-animation: shadow-expansion .5s;
  animation: shadow-expansion .5s;
}


.addedToCart{
  background:coral;
}


/***************************/
/** END CUSTOM ANIMATIONS **/
/***************************/

/*****************************************/
/** Primary Navigation Customizations ****/
/*****************************************/

@media (min-width: 992px){
  
  .addCharacterBetweenNavItems li[data-component="navigationItem"]::after{
    content: '/';
    margin:auto 20px;
    color:rgb(16, 127, 119);
  }
  .addCharacterBetweenNavItems li[data-component="navigationItem"]:last-child::after{
    content: '';
  }
}


/* Primary Navigation Animation */
@media (min-width: 992px){
	.moveUpOnHover li label:not(.submenu label), button.moveUpOnHover{
		position:relative;
		-webkit-transition: .4s !important;
		-o-transition: .4s !important;
		transition: .4s !important;
	}
	
	.moveUpOnHover li:hover label:not(.submenu label), button.moveUpOnHover:hover{
		transform: translateY(-8px);
	}
	/*
	.moveUpOnHover label.hover {
		transform: translate(0px,10px);
		transform: rotate(45deg);
	}
	*/
	
	.moveUpOnHover.socialIcons li{
		position:relative;
		-webkit-transition: .4s;
		-o-transition: .4s;
		transition: .4s;
	}
	.moveUpOnHover.socialIcons li:hover{
		transform: translateY(-8px);
	}
	
}