@charset "utf-8";/* CSS Document */
/* © Copyright 2020 Pro Dental Designs. All Rights Reserved.*/
/* Permalink - Advertising and Marketing for Dental industries https://prodentaldesigns.com */
body, html {max-width:2000px;margin:0px auto;padding:0px;line-height:1.5em;font-size:1em;font-family: 'Open Sans', sans-serif;color:#343434;background-color:transparent !important;}
h1 {font-size: clamp(1.3em, 1.7vw, 2.2em);font-family: 'Raleway', sans-serif;font-weight:400;line-height:normal;text-transform:uppercase;color:#000000;}
h2 {font-size: clamp(1.2em, 1.7vw, 2em);font-family: 'Raleway', sans-serif;font-weight:400;line-height:normal;text-transform:capitalize;color:#000000;}
h3 {font-size: clamp(1.1em, 1.7vw, 1.8em);font-family: 'Raleway', sans-serif;font-weight:400;line-height:normal;text-transform:capitalize;color:#000000;}
h4 {font-size: clamp(1em, 1.7vw, 1.4em);font-family: 'Raleway', sans-serif;font-weight:400;line-height:normal;color:#000000;margin:4px auto 0px auto;}
h5 {font-size: clamp(0.8em, 1.7vw, 0.9em);font-family: 'Raleway', sans-serif;font-weight:400;line-height:normal;}
h6 {font-size: clamp(0.7em, 1.7vw, 0.8em);font-family: 'Raleway', sans-serif;font-weight:400;line-height:normal;}
h1 span, h2 span, h3 span, h4 span {font-size: clamp(0.7em, 1.7vw, 0.8em);color:#5C5C5C;}

a {transition: all 0.2s ease-in-out;}
a {color:#9d0b0e;}
a:hover {text-decoration:none;}
hr {margin-top:40px;width:60%;border-bottom:none;border-top:solid 1px #086a91;}
img {max-width:100%;height:auto;border:none;}
img a {text-decoration:none;}

.clearFix {clear:both;max-height:0px;width:100%;}

/*ADA key-board accessible*/
a:focus img {}
a:focus {text-decoration:underline !important; color:#888888;}
a:focus span {color:#1e376d;}
a.skipcontent {padding:8px 15px;color:#FFFFFF;background-color:#e5e5e5;border:solid 1px #FFFFFF;position:absolute;left:-9999px;top:25px;z-index:200;}
a.skipcontent:focus {position:absolute; left:25px; top:50px;}
#plustext, #minustext, #resettext {display:none;}
#normal {display:none;}
#handicap {width:38px;height:38px;margin-top:10px;display:block;border:solid 2px #FFFFFF;background-color:#000000;background-image:url(../images/handicap-symbol.png);background-repeat:no-repeat;background-size:100% auto;position:absolute;top:0px;right:0px; z-index:200;}
#normal:hover, #handicap:hover, #normal:focus, #handicap:focus  {background-color:#FFFFFF;border:solid 1px #000000;background-image:url(../images/handicap-symbol-hover.png);}
@media only screen and (max-width:768px) {#handicap, #normal {display:none;}}

/*Accordion**/
.accordionWrapper {width:100%;display:block;margin:20px auto;}
.accordionItem {width:100%;display:block;margin:0px 0px 10px 0px;box-sizing: border-box;}
.accordionHeader {width: 100%;padding: 18px;background-color: #eee;color: #444;text-align: left;cursor: pointer;box-sizing: border-box;/*overrider button border styling*/font-size:1em;border:none;
-webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out;
-o-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;}
.accordionContent {height:auto;max-height:2000px;padding:18px;overflow:hidden;background-color:#FFFFFF;
-webkit-transition: all 0.8s ease-out;
-moz-transition: all 0.8s ease-out;
-o-transition: all 0.8s ease-out;
transition: all 0.8s ease-out;}
.open .accordionHeader {background-color: #ccc;}
.close .accordionContent {max-height:0;padding:0 18px;}
.open .accordionHeader:after {width:20px;content: "-";float: right;font-size: 13px;}
.close .accordionHeader:after {width:20px;content: "+";float: right;font-size: 13px;}
.ineditmode .close .accordionContent {max-height:2000px;}
.ineditmode .accordionHeader {cursor:none;}
li.accordionItem {width:auto;margin:0;}
ul.accordionContent {}
.close .accordionContent {padding:0;}

/***************************Page Theme**************************/
/***************************************************************/
.container {width:90%;max-width:1366px;margin:0 auto;padding:0;position:relative;box-sizing:border-box;}
.marginBoth {margin-top:100px !important;margin-bottom:100px !important;}
.marginTop {margin-top:50px !important;}
.marginBottom {margin-bottom:50px !important;}
.paddingBoth {padding-top:100px !important;padding-bottom:100px !important;}
.paddingTop {padding-top:50px !important;}
.paddingBottom {padding-bottom:50px !important;}

.lightcolorbg::before, .darkcolorbg::before {width:100vw;height:100%;content:'';position:absolute;top:0;left:50%;z-index:-1;transform:translate(-50%, 0);}

.lightcolorbg {position:relative;}
.lightcolorbg::before {background-color:#efefef;}
.lightcolorbg a {color:#82704c;}

.darkcolorbg {color:#FFFFFF;position:relative;}
.darkcolorbg h1, .darkcolorbg h2, .darkcolorbg h3, .darkcolorbg h4, .darkcolorbg h5, .darkcolorbg h6 {color:#FFFFFF;}
.darkcolorbg::before {background-color:#000000;}
.darkcolorbg a {color:#FFFFFF;text-decoration:none;}
.darkcolorbg h1, .darkcolorbg h2, .darkcolorbg h3, .darkcolorbg h4, .darkcolorbg h5, .darkcolorbg h6 {color:#FFFFFF;}

.content.right.lightcolorbg::before, .content.right.darkcolorbg::before, .content.left.lightcolorbg::before, .content.left.darkcolorbg::before {width:70vw;top:0;left:0;z-index:-1;
	-webkit-transform:translate(0, 0);
	transform:translate(0, 0);}
.content.rightsidebar.lightcolorbg::before, .content.rightsidebar.darkcolorbg::before, .content.leftsidebar.lightcolorbg::before, .content.leftsidebar.darkcolorbg::before {width:40vw;top:0;left:0;z-index:-1;
	-webkit-transform:translate(0, 0);
	transform:translate(0, 0);}

.backgroundImage {position:relative;background-repeat:no-repeat;color:#ffffff;}
.backgroundImage::before {background-repeat:no-repeat;background-position:center top;background-size:cover;}
.backgroundImage::after {background-color:rgba(0,0,0,0.50);}
.backgroundImage::after, .backgroundImage::before {width:100vw;height:100%;display:block;content: '';position:absolute;top:0;left:50%;z-index:-1;transform:translate(-50%, 0);}
.backgroundImage h1, .backgroundImage h2, .backgroundImage h3, .backgroundImage h4, .backgroundImage h5, .backgroundImage h6 {color:#fff;}
.backgroundImage blockquote {padding:20px !important;color:#000;background-color:#fff;border-radius: 20px;}
.backgroundImage blockquote h1, .backgroundImage blockquote h2, .backgroundImage blockquote h3, .backgroundImage blockquote h4, .backgroundImage blockquote h5, .backgroundImage blockquote h6 {color:#000;}
.content.rightsidebar.backgroundImage::before, .content.right.backgroundImage::before, .content.rightsidebar.backgroundImage::after, .content.right.backgroundImage::after {width:40vw;left:0;transform: translate(0, 0);}
.content.leftsidebar.backgroundImage::before, .content.left.backgroundImage::before, .content.leftsidebar.backgroundImage::after, .content.left.backgroundImage::after {width:70vw;left:auto;right:0;transform: translate(0, 0);}

.parallax {padding:175px 0px;position:relative;}
.parallax::before {background-repeat:no-repeat;background-position:center top;background-size:cover;background-attachment:fixed;}
.parallax::after {background-color:transparent;}
.parallax::after, .parallax::before {width:100vw;height:100%;display:block;content: '';position:absolute;top:0;left:0;z-index:-1;}
.parallax h1, .parallax h2, .parallax h3, .parallax h4, .parallax h5, .parallax h6, .parallax a {}
.parallax blockquote {padding:20px !important;color:#000;background-color:#fff;border-radius: 20px;position:relative;z-index:100;}
.content.rightsidebar.parallax::before, .content.leftsidebar.parallax::before  {width:40vw;}
.content.right.parallax::before, .content.left.parallax::before {width:75vw;}

.parallaxContainer {height: 70vh;position: relative;overflow: hidden;}
.parallaxScrolly {width: 100%;position: absolute;top: 0;left: 0;will-change: top;}
.parallaxScrolly img {width: 100%;min-height: 130%;height: auto;display: block;object-fit: cover;}
.parallaxScrolly-inner {max-width: 600px;padding: 2rem;background: rgba(0, 0, 0, 0.75);color: #fff;position: absolute;top: 50px;left: 5%;z-index: 1;}
.parallaxScrolly-inner h1, .parallaxScrolly-inner p {color: #fff;}
.cta-button {display: inline-block;padding: 0.75rem 1.5rem;background-color: #ffcc00;color: #000;font-weight: bold;text-decoration: none;border-radius: 5px;transition: background 0.3s ease;}
.cta-button:hover {background-color: #e6b800;}

@media only screen and (max-width:1024px) {
	.container {width:96%;}
	.paddingBoth{padding:25px 0px !important;}
	.marginBoth {margin-top:25px !important;margin-bottom:25px !important;}
	.paddingTop {padding-top:15px !important;} 
	.marginTop {margin-top:15px !important;} 
	.paddingBottom {padding-bottom:15px !important;} 
	.marginBottom {margin-bottom:15px !important;}

	.parallax::before {background-attachment: scroll !important;}}
@media only screen and (max-width:768px) {
	.content.left.darkcolorbg::before, .content.leftsidebar.darkcolorbg::before, .content.right.darkcolorbg::before, .content.rightsidebar.darkcolorbg::before, .content.left.darkcolorbg::before, .content.leftsidebar.lightcolorbg::before, .content.right.lightcolorbg::before, .content.rightsidebar.lightcolorbg::before {width: 100%;}}

/***************************Main Body***************************/
/***************************************************************/
.wrapper {background-color:#FFFFFF;position:relative;z-index:100;overflow-x:hidden;}
.contentContainer {width: 90%;max-width: 1366px;display: flex;margin: 0 auto;flex-wrap: wrap;justify-content: space-between;box-sizing: border-box;clear: both;position: relative;gap: 0;}
.content {padding: 0 30px;box-sizing: border-box;}
.content.left {flex: 0 0 65%;padding-right: 30px;}
.content.right {flex: 0 0 65%;padding-left: 30px;}
.content.leftsidebar {padding-right: 30px;flex: 0 0 35%;}
.content.rightsidebar {padding-left: 30px;flex: 0 0 35%;}
.content.splitEven {padding-right: 20px;flex: 0 0 50%;}
.content.splitEven:last-child {padding-right: 0;padding-left: 20px;}
.content.splitThirds {padding-right: 20px;flex: 0 0 33.3333%;}
.content.splitThirds:last-child {padding-right: 0;padding-left: 20px;}
@media only screen and (max-width:768px) {
	.contentContainer {margin-bottom:10px;} 
	.contentContainer, .content {display:block;} 
	.contentContainer {width:96%;margin:0 auto;} 
	.content.left, .content.right, .content.leftsidebar, .content.rightsidebar, .content.splitEven, .content.splitThrids {width:100%;padding:4px 0px;}}

/***************************Header******************************/
/***************************************************************/
.header {padding: 1rem 0;background-color: #ffffff;border-bottom: 2px solid #000000;position: relative;z-index: 110;}
.header-flex {display: flex;justify-content: space-between;align-items: center;flex-wrap: wrap;}
.logo {display: block;}
.logo-text-wrap {display: flex;align-items: center;gap: 0.75rem;}
.logo-text-wrap > div {display: flex;flex-direction: column;padding-top: 30px;}
.logo-img img {max-width: 100px;height: auto;display: block;}
.logo-text {font-family: Arial, sans-serif;font-weight: bold;color: #23408f;font-size: 2em;white-space: nowrap;}
.logo .tagline {font-size: 0.9em;margin-top: 0.5rem;color: #333333;}
.header .right {display: flex;flex-direction: column;align-items: flex-end;text-align: right;}
.socials {display: flex;gap: 0.5rem;margin-top: 0.5rem;}
.socials img {width: 18px;height: 18px;display: block;}
@media (max-width: 768px) {
	.header-flex {flex-direction: column;text-align: center;}
	.logo {margin: 0 auto;}
	.logo-text-wrap {flex-direction: column;align-items: center;text-align: center;}
	.logo-text-wrap > div {align-items: center;display: flex;flex-direction: column;padding:0;}
	.logo-text {font-size: 1.5em;white-space: normal;word-break: break-word;}
	.tagline {font-size: 0.9rem;margin-top: 0.3rem;max-width: 90vw;}
	.logo-img img {max-width: 80px;}
	.right {margin-top: 1rem;}}

/***************************Menus********************************/
/***************************************************************/

/*************************Banners*******************************/
/***************************************************************/
.banner {position:relative;}
.banner img {width:100%;height:auto;display:block;position:absolute;top:50%;left:50%;transform: translate(-50%, -50%);}
.bannerInner {width:100%;padding:2% 0;position:absolute;bottom:0;left:0;background-color: rgba(0,0,0,0.75)}
.bannerInner .description {width:90%;max-width:1200px;display:block;margin:0 auto;font-size: clamp(1.1em, 2.5vw, 1.8em);line-height:normal;color:#FFF;text-align:left;font-family: 'Caveat', cursive;}
.bannerInner .description span {padding-left:40px;color:#4c4b4b;font-weight:700;}
.banner p {margin:0px;}

/**************************Buttons******************************/
/***************************************************************/
.customButton {display: inline-block;padding: 0.6rem 1.2rem;margin-bottom: 0.5rem;background-color: #ffcc00;color: #000;font-weight: bold;text-decoration: none;border-radius: 4px;transition: background-color 0.3s ease;}
.customButton:hover {background-color: #e6b800;}
.services-grid {max-width: 1200px;display: grid;padding: 0;margin: 0 auto;grid-template-columns: repeat(4, 1fr);gap: 20px;list-style: none;}
.painted {min-height: 130px;display: flex;padding: 1rem;background-color: #fff;align-items: center;justify-content: center;flex-direction: column;text-align: center;font-weight: bold;font-size: clamp(0.95rem, 1.2vw, 1.1rem);color: #23408f;overflow: hidden;position: relative;z-index: 1;transition: color 0.3s ease;}
.painted::before {width: 100%;height: 100%;content: '';position: absolute;top: 0;left: 0;background-image:url("../images/paint.png");background-repeat: no-repeat;background-size: 1000% 100%;background-position:0% 0%;z-index: -1;opacity: 0;pointer-events: none;}
.painted:hover {color: #fff;}
.painted:hover::before {animation: paintStroke 1s steps(9) forwards; opacity: 1;}
.title-text {z-index: 2;transition: opacity 0.3s ease;}
.hover-details {display: none;margin-top: 0.5rem;color: #000000;font-weight: normal;font-size: 0.875rem;opacity: 0;transform: translateY(10px);transition: opacity 0.4s ease, transform 0.4s ease;pointer-events: none;line-height: 1.4;z-index: 2;}
.painted:hover .hover-details {display:block;opacity: 1;transform: translateY(0);}
.painted:hover .title-text {opacity: 1;}
@keyframes paintStroke {
  from {background-position: 100% 0%;}
  to {background-position: 0% 0%;}}
@media (prefers-reduced-motion: reduce) {
	.painted::before {animation: none !important;}}
@media (max-width: 1024px) {
    .services-grid {grid-template-columns: repeat(2, 1fr);}}
@media (max-width: 600px) {
    .services-grid {grid-template-columns: 1fr;}
	.painted {padding: 1.25rem 1rem;min-height: 100px;}}

.carousel-container {width: 100%;max-width: 100%;padding: 0 40px;text-align: center;box-sizing: border-box;overflow: hidden;}
.carousel {width: 100%;overflow: hidden;display: flex;justify-content: center;align-items: center;position: relative;}
.carousel-track-container {width: 100%;overflow: hidden;position: relative;text-align: center;}
ul.carousel-track {width: 100%;display: flex;margin: 0;padding: 0;transition: transform 0.5s ease-in-out;}
ul.carousel-track li {display: flex;padding: 0 20px;flex: 0 0 100%;justify-content: center;align-items: center;position: relative;box-sizing: border-box;opacity: 0.4;transform: scale(0.9);transition: transform 0.4s, opacity 0.4s;}
ul.carousel-track li img {max-width:100%;max-height:100%;width: auto;height: auto;object-fit: contain;border-radius: 10px;box-shadow: 0 0 10px rgba(0,0,0,0.1);}
.carousel-track li.is-active {opacity: 1;transform: scale(1);z-index: 2;}
ul.carousel-track .caption {padding: 5px 12px;background: rgba(0,0,0,0.6);color: #fff;border-radius: 5px;font-size: 14px;position: absolute;bottom: 20%;}
.carousel-btn {width: 40px;height: 40px;background: rgba(0,0,0,0.5);border: none;color: #fff;font-size: 24px;cursor: pointer;z-index: 2;border-radius: 50%;position: absolute;top: 50%;transform: translateY(-50%);}
.carousel-btn.prev {left: 10px;}
.carousel-btn.next {right: 10px;}
.carousel-btn:hover {background: rgba(0,0,0,0.8);}
@media (min-width: 600px) {
  ul.carousel-track li {flex: 0 0 50%;}}
@media (min-width: 960px) {
  ul.carousel-track li {flex: 0 0 33.3333%;}}

ul.column {width:100%;display:table;padding:0;margin:0;}
ul.column li  {display:table-cell;padding:8px 1%;box-sizing:border-box;list-style-type:none;vertical-align:top;position:relative;}
ul.column.colTwo li {width:50%;}
ul.column.colThree {border-spacing:20px 0;text-align:left;}
ul.column.colThree li {width:33.3%;}
ul.column.colFour li {width:25%;padding:8px 15px;} ul.column.colFour ul li {padding:8px 0px;}
ul.column.colFive li {width:20%;}
ul.column.colSix li {width:16.6%;}
ul.column ul {margin:0;padding:0;}
ul.column.colTwo ul li, ul.column.colThree ul li, ul.column.colFour ul li, ul.column.colFive ul li, ul.column.colSix ul li {width:auto;display: list-item;padding: 0;margin: 0 0 0 24px;list-style-type: disc;}
ul ul.column.colTwo li {width:50%;}
ul ul.column.colThree li {width:33.3%;}
ul ul.column.colFour li {width:25%;}
ul ul.column.colFive li {width:20%;}
ul ul.column.colSix li {width:16.6%;}
ul.column img {vertical-align:middle;}

ul.rowTwo, ul.rowThree, ul.rowFour, ul.rowFive, ul.rowSix  {width:100%;display:block;padding:0;margin:0;}
ul.rowTwo li, ul.rowThree li, ul.rowFour li, ul.rowFive li, ul.rowSix li {display:inline-block;padding:8px 1%;box-sizing:border-box;list-style-type:none;vertical-align:top;}
ul.rowTwo li {width:49%;}
ul.rowThree li {width:32%;}
ul.rowFour li {width:24%;}
ul.rowFive li {width:19%;}
ul.rowSix li {width:15%;}
@media only screen and (max-width:768px) {
	ul.column.colThree, ul.column.colFour, ul.column.colFive, ul.column.colSix {width:100%;display:block;text-align:center;} 
	ul.column.colThree li, ul.column.colFour li, ul.column.colFive li, ul.column.colSix li {width:48%;display:inline-block;text-align:left;}}
@media only screen and (max-width:600px) {
	ul.column.colThree li, ul.column.colFour li, ul.column.colFive li, ul.column.colSix li {width:100%;display:block;}}

/**************************Footer*******************************/
/***************************************************************/
.footer {padding:50px 10px 25px 10px;font-size:0.8em;text-align:center;line-height:normal;}
.footer h1, .footer h2, .footer h3, .footer h4, .footer h5, .footer h6 {margin-top:8px;}
.footerCredit {margin:0 auto;display:table;border-spacing:15px 0px;}
.footerCredit div {display: table-cell;vertical-align:bottom;text-align:left;}
.footerCredit img {width:100px;height:auto;}

/**************************Responsive***************************/
/***************************************************************/
@media only screen and (max-width:1024px) {
	.banner {padding:50px 0px !important;}}
@media only screen and (max-width:960px) {
	.customButton {min-width:0px;}}
@media only screen and (max-width:768px) {
	.header .right, .header .left {margin-top:0;float:none;text-align:center;}
	.header p {margin:10px auto;}}
@media only screen and (max-width:600px) {
	h1 {font-size:1.3rem;text-align:center;}
	h2 {font-size:1.25rem;text-align:center;}
	h3 {font-size:1.2rem;text-align:center;}
	h4 {font-size:1.1rem;}}
@media only screen and (max-width:450px) {
	.customButton {min-width:100%;}}

/**************************** Forms ****************************/
/***************************************************************/
.form-wrapper {width: 100%;max-width: 800px;margin: 3rem auto;padding: 1rem 2rem;box-sizing: border-box;background-color: #f9f9f9;border: 2px solid #e5e7eb;border-radius: 10px;box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);}
.form-wrapper h2 {color: #23408f;font-size: 2rem;margin-bottom: 2rem;font-weight: 700;text-align: center;}
.form-wrapper h2 span {display: block;margin-top: 0.5rem;font-size: 1rem;color: #444;}
#contactForm {max-width: 900px;display: grid;margin: 0 auto;grid-template-columns: 50px 1fr;gap: 1rem 1.5rem;align-items: center;}
#contactForm label {font-weight: 600;color: #23408f;font-size: 0.95rem;margin-bottom: 0;}
#contactForm input, #contactForm textarea {width: 100%;padding: 0.7rem 1rem;border: 1px solid #ccc;border-radius: 6px;font-size: 1rem;font-family: inherit;transition: border-color 0.3s ease;box-sizing: border-box;}
#contactForm input:focus, #contactForm textarea:focus {border-color: #23408f;outline: none;}
/* reCAPTCHA full width */
.g-recaptcha {grid-column: 1 / -1;display: flex;justify-content: center;margin: 1rem 0;}
#contactForm button[type="submit"] {grid-column: 1 / -1;background-color: #23408f;color: #fff;padding: 0.75rem 1.5rem;border: none;font-size: 1rem;font-weight: bold;border-radius: 6px;cursor: pointer;transition: background-color 0.3s ease;margin-top: 1rem;width: 200px;margin-left: auto;margin-right: auto;}
#contactForm button[type="submit"]:hover {background-color: #1a2f6b;}
#formSuccessPopup {display: none;margin-top: 2rem;padding: 1.5rem;background-color: #e6f7e6;border: 1px solid #b2dfb2;color: #2e7d32;border-radius: 6px;font-weight: 500;text-align: center;}

/**************************Animation****************************/
/***************************************************************/
.zoom { transition: transform .2s; z-index:1; /* Animation of an item*/}
.zoom:hover {transform: scale(1.05); z-index:200; /* (105% zoom - Note: if the zoom is too large, it will go outside of the viewport) */}
.animatedElement {visibility:hidden;}
.ineditmode .animatedElement {visibility:visible;}
@media only screen and (max-width:1024px) {.animatedElement {visibility:visible;}.zoom:hover {transform: scale(1);}}

/* slideDown */
.slideDown.animate {
  animation: slideDown 0.8s cubic-bezier(0.25, 0.1, 0.25, 1) both;
  visibility: visible !important;
}
@keyframes slideDown {
  0% { opacity: 0; transform: translateY(-40px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* slideUp */
.slideUp.animate {
  animation: slideUp 0.8s cubic-bezier(0.25, 0.1, 0.25, 1) both;
  visibility: visible !important;
}
@keyframes slideUp {
  0% { opacity: 0; transform: translateY(40px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* slideLeft */
.slideLeft.animate {
  animation: slideLeft 1s cubic-bezier(0.25, 0.1, 0.25, 1) both;
  visibility: visible !important;
}
@keyframes slideLeft {
  0% { opacity: 0; transform: translateX(60px); }
  100% { opacity: 1; transform: translateX(0); }
}

/* slideRight */
.slideRight.animate {
  animation: slideRight 1s cubic-bezier(0.25, 0.1, 0.25, 1) both;
  visibility: visible !important;
}
@keyframes slideRight {
  0% { opacity: 0; transform: translateX(-60px); }
  100% { opacity: 1; transform: translateX(0); }
}

	
/*slideUp & ExpandOut*/
.slideExpandUp.animate{animation-name: slideExpandUp;
-webkit-animation-name: slideExpandUp;
animation-duration: 1.6s;
-webkit-animation-duration: 1.6s;
animation-timing-function: ease-out;
-webkit-animation-timing-function: ease -out;
visibility: visible !important;}
@keyframes slideExpandUp {0% {transform: translateY(100%) scaleX(0.5);}
	30%{transform: translateY(-8%) scaleX(0.5);}	
	40%{transform: translateY(2%) scaleX(0.5);}
	50%{transform: translateY(0%) scaleX(1.1);}
	60%{transform: translateY(0%) scaleX(0.9);}
	70% {transform: translateY(0%) scaleX(1.05);}			
	80%{transform: translateY(0%) scaleX(0.95);}
	90% {transform: translateY(0%) scaleX(1.02);}	
	100%{transform: translateY(0%) scaleX(1);}}
@-webkit-keyframes slideExpandUp {0% {-webkit-transform: translateY(100%) scaleX(0.5);}
	30%{-webkit-transform: translateY(-8%) scaleX(0.5);}	
	40%{-webkit-transform: translateY(2%) scaleX(0.5);}
	50%{-webkit-transform: translateY(0%) scaleX(1.1);}
	60%{-webkit-transform: translateY(0%) scaleX(0.9);}
	70% {-webkit-transform: translateY(0%) scaleX(1.05);}			
	80%{-webkit-transform: translateY(0%) scaleX(0.95);}
	90% {-webkit-transform: translateY(0%) scaleX(1.02);}	
	100%{-webkit-transform: translateY(0%) scaleX(1);}}
	
/*expandUp*/
.expandUp.animate{animation-name: expandUp;
-webkit-animation-name: expandUp;
animation-duration: 0.7s;
-webkit-animation-duration: 0.7s;
animation-timing-function: ease;
-webkit-animation-timing-function: ease;
visibility: visible !important;}
@keyframes expandUp {0% {transform: translateY(100%) scale(0.6) scaleY(0.5);}
	60%{transform: translateY(-7%) scaleY(1.12);}
	75%{transform: translateY(3%);}	
	100% {transform: translateY(0%) scale(1) scaleY(1);}}
@-webkit-keyframes expandUp {0% {-webkit-transform: translateY(100%) scale(0.6) scaleY(0.5);}
	60%{-webkit-transform: translateY(-7%) scaleY(1.12);}
	75%{-webkit-transform: translateY(3%);}	
	100% {-webkit-transform: translateY(0%) scale(1) scaleY(1);}}
	
/*expand & fadeIn*/
.fadeIn.animate{animation-name: fadeIn;
-webkit-animation-name: fadeIn;
animation-duration: 1.5s;
-webkit-animation-duration: 1.5s;
animation-timing-function: ease-in-out;
-webkit-animation-timing-function: ease-in-out;
visibility: visible !important;}
@keyframes fadeIn {0% {transform: scale(0);
opacity: 0.0;}
	60% {transform: scale(1.1);}
	80% {transform: scale(0.9);
opacity: 1;}	
	100% {transform: scale(1);
opacity: 1;}}
@-webkit-keyframes fadeIn {0% {-webkit-transform: scale(0);
opacity: 0.0;}
	60% {-webkit-transform: scale(1.1);}
	80% {-webkit-transform: scale(0.9);
opacity: 1;}	
	100% {-webkit-transform: scale(1);
opacity: 1;}}

/*expandOpen*/
.expandOpen.animate{animation-name: expandOpen;
-webkit-animation-name: expandOpen;
animation-duration: 1.2s;
-webkit-animation-duration: 1.2s;
animation-timing-function: ease-out;
-webkit-animation-timing-function: ease-out;
visibility: visible !important;}
@keyframes expandOpen {0% {transform: scale(1.8);}
	50% {transform: scale(0.95);}	
	80% {transform: scale(1.05);}
	90% {transform: scale(0.98);}	
	100% {transform: scale(1);}}
@-webkit-keyframes expandOpen {0% {-webkit-transform: scale(1.8);}
	50% {-webkit-transform: scale(0.95);}	
	80% {-webkit-transform: scale(1.05);}
	90% {-webkit-transform: scale(0.98);}	
	100% {-webkit-transform: scale(1);}}
	
/*bigEntrance*/
.bigEntrance.animate{animation-name: bigEntrance;
-webkit-animation-name: bigEntrance;
animation-duration: 1.6s;
-webkit-animation-duration: 1.6s;
animation-timing-function: ease-out;
-webkit-animation-timing-function: ease-out;
visibility: visible !important;}
@keyframes bigEntrance {0% {transform: scale(0.3) rotate(6deg) translateX(-30%) translateY(30%);
opacity: 0.2;}
	30% {transform: scale(1.03) rotate(-2deg) translateX(2%) translateY(-2%);
opacity: 1;}
	45% {transform: scale(0.98) rotate(1deg) translateX(0%) translateY(0%);
opacity: 1;}
	60% {transform: scale(1.01) rotate(-1deg) translateX(0%) translateY(0%);
opacity: 1;}	
	75% {transform: scale(0.99) rotate(1deg) translateX(0%) translateY(0%);
opacity: 1;}
	90% {transform: scale(1.01) rotate(0deg) translateX(0%) translateY(0%);
opacity: 1;}	
	100% {transform: scale(1) rotate(0deg) translateX(0%) translateY(0%);
opacity: 1;}}
@-webkit-keyframes bigEntrance {0% {-webkit-transform: scale(0.3) rotate(6deg) translateX(-30%) translateY(30%);
opacity: 0.2;}
	30% {-webkit-transform: scale(1.03) rotate(-2deg) translateX(2%) translateY(-2%);
opacity: 1;}
	45% {-webkit-transform: scale(0.98) rotate(1deg) translateX(0%) translateY(0%);
opacity: 1;}
	60% {-webkit-transform: scale(1.01) rotate(-1deg) translateX(0%) translateY(0%);
opacity: 1;}	
	75% {-webkit-transform: scale(0.99) rotate(1deg) translateX(0%) translateY(0%);
opacity: 1;}
	90% {-webkit-transform: scale(1.01) rotate(0deg) translateX(0%) translateY(0%);
opacity: 1;}	
	100% {-webkit-transform: scale(1) rotate(0deg) translateX(0%) translateY(0%);
opacity: 1;}}

/*hatch*/
.hatch.animate{animation-name: hatch;
-webkit-animation-name: hatch;
animation-duration: 2s;
-webkit-animation-duration: 2s;
animation-timing-function: ease-in-out;
-webkit-animation-timing-function: ease-in-out;
transform-origin: 50% 100%;
-ms-transform-origin: 50% 100%;
-webkit-transform-origin: 50% 100%;
visibility: visible !important;}
@keyframes hatch {0% {transform: rotate(0deg) scaleY(0.6);}
	20% {transform: rotate(-2deg) scaleY(1.05);}
	35% {transform: rotate(2deg) scaleY(1);}
	50% {transform: rotate(-2deg);}	
	65% {transform: rotate(1deg);}	
	80% {transform: rotate(-1deg);}		
	100% {transform: rotate(0deg);}}
@-webkit-keyframes hatch {0% {-webkit-transform: rotate(0deg) scaleY(0.6);}
	20% {-webkit-transform: rotate(-2deg) scaleY(1.05);}
	35% {-webkit-transform: rotate(2deg) scaleY(1);}
	50% {-webkit-transform: rotate(-2deg);}	
	65% {-webkit-transform: rotate(1deg);}	
	80% {-webkit-transform: rotate(-1deg);}		
	100% {-webkit-transform: rotate(0deg);}}

/*bounce*/
.bounce.animate{animation-name: bounce;
-webkit-animation-name: bounce;
animation-duration: 1.6s;
-webkit-animation-duration: 1.6s;
animation-timing-function: ease;
-webkit-animation-timing-function: ease;
transform-origin: 50% 100%;
-ms-transform-origin: 50% 100%;
-webkit-transform-origin: 50% 100%;
visibility: visible !important;}
@keyframes bounce {0% {transform: translateY(0%) scaleY(0.6);}
	60%{transform: translateY(-100%) scaleY(1.1);}
	70%{transform: translateY(0%) scaleY(0.95) scaleX(1.05);}
	80%{transform: translateY(0%) scaleY(1.05) scaleX(1);}	
	90%{transform: translateY(0%) scaleY(0.95) scaleX(1);}				
	100%{transform: translateY(0%) scaleY(1) scaleX(1);}}
@-webkit-keyframes bounce {0% {-webkit-transform: translateY(0%) scaleY(0.6);}
	60%{-webkit-transform: translateY(-100%) scaleY(1.1);}
	70%{-webkit-transform: translateY(0%) scaleY(0.95) scaleX(1.05);}
	80%{-webkit-transform: translateY(0%) scaleY(1.05) scaleX(1);}	
	90%{-webkit-transform: translateY(0%) scaleY(0.95) scaleX(1);}				
	100%{-webkit-transform: translateY(0%) scaleY(1) scaleX(1);}}

/*pullUp*/
.pullUp.animate{animation-name: pullUp;
-webkit-animation-name: pullUp;
animation-duration: 1.1s;
-webkit-animation-duration: 1.1s;
animation-timing-function: ease-out;
-webkit-animation-timing-function: ease-out;
transform-origin: 50% 100%;
-ms-transform-origin: 50% 100%;
-webkit-transform-origin: 50% 100%;
visibility: visible !important;}
@keyframes pullUp {0% {transform: scaleY(0.1);}
	40% {transform: scaleY(1.02);}
	60% {transform: scaleY(0.98);}
	80% {transform: scaleY(1.01);}
	100% {transform: scaleY(0.98);}				
	80% {transform: scaleY(1.01);}
	100% {transform: scaleY(1);}}
@-webkit-keyframes pullUp {0% {-webkit-transform: scaleY(0.1);}
	40% {-webkit-transform: scaleY(1.02);}
	60% {-webkit-transform: scaleY(0.98);}
	80% {-webkit-transform: scaleY(1.01);}
	100% {-webkit-transform: scaleY(0.98);}				
	80% {-webkit-transform: scaleY(1.01);}
	100% {-webkit-transform: scaleY(1);}}
	
/*pullDown*/
.pullDown.animate{animation-name: pullDown;
-webkit-animation-name: pullDown;
animation-duration: 1.1s;
-webkit-animation-duration: 1.1s;
animation-timing-function: ease-out;
-webkit-animation-timing-function: ease-out;
transform-origin: 50% 0%;
-ms-transform-origin: 50% 0%;
-webkit-transform-origin: 50% 0%;
visibility: visible !important;}
@keyframes pullDown {0% {transform: scaleY(0.1);}
	40% {transform: scaleY(1.02);}
	60% {transform: scaleY(0.98);}
	80% {transform: scaleY(1.01);}
	100% {transform: scaleY(0.98);}				
	80% {transform: scaleY(1.01);}
	100% {transform: scaleY(1);}}
@-webkit-keyframes pullDown {0% {-webkit-transform: scaleY(0.1);}
	40% {-webkit-transform: scaleY(1.02);}
	60% {-webkit-transform: scaleY(0.98);}
	80% {-webkit-transform: scaleY(1.01);}
	100% {-webkit-transform: scaleY(0.98);}				
	80% {-webkit-transform: scaleY(1.01);}
	100% {-webkit-transform: scaleY(1);}}
	
/*stretchLeft*/
.stretchLeft.animate{animation-name: stretchLeft;
-webkit-animation-name: stretchLeft;
animation-duration: 1.5s;
-webkit-animation-duration: 1.5s;
animation-timing-function: ease-out;
-webkit-animation-timing-function: ease-out;
transform-origin: 100% 0%;
-ms-transform-origin: 100% 0%;
-webkit-transform-origin: 100% 0%;
visibility: visible !important;}
@keyframes stretchLeft {0% {transform: scaleX(0.3);}
	40% {transform: scaleX(1.02);}
	60% {transform: scaleX(0.98);}
	80% {transform: scaleX(1.01);}
	100% {transform: scaleX(0.98);}				
	80% {transform: scaleX(1.01);}
	100% {transform: scaleX(1);}}
@-webkit-keyframes stretchLeft {0% {-webkit-transform: scaleX(0.3);}
	40% {-webkit-transform: scaleX(1.02);}
	60% {-webkit-transform: scaleX(0.98);}
	80% {-webkit-transform: scaleX(1.01);}
	100% {-webkit-transform: scaleX(0.98);}				
	80% {-webkit-transform: scaleX(1.01);}
	100% {-webkit-transform: scaleX(1);}}
	
/*stretchRight*/
.stretchRight.animate{animation-name: stretchRight;
-webkit-animation-name: stretchRight;
animation-duration: 1.5s;
-webkit-animation-duration: 1.5s;
animation-timing-function: ease-out;
-webkit-animation-timing-function: ease-out;
transform-origin: 0% 0%;
-ms-transform-origin: 0% 0%;
-webkit-transform-origin: 0% 0%;
visibility: visible !important;}
@keyframes stretchRight {0% {transform: scaleX(0.3);}
	40% {transform: scaleX(1.02);}
	60% {transform: scaleX(0.98);}
	80% {transform: scaleX(1.01);}
	100% {transform: scaleX(0.98);}				
	80% {transform: scaleX(1.01);}
	100% {transform: scaleX(1);}}
@-webkit-keyframes stretchRight {0% {-webkit-transform: scaleX(0.3);}
	40% {-webkit-transform: scaleX(1.02);}
	60% {-webkit-transform: scaleX(0.98);}
	80% {-webkit-transform: scaleX(1.01);}
	100% {-webkit-transform: scaleX(0.98);}				
	80% {-webkit-transform: scaleX(1.01);}
	100% {-webkit-transform: scaleX(1);}}

/*pulse infinite*/
.pulse.animate{animation-name: pulse;
-webkit-animation-name: pulse;
animation-duration: 1.5s;
-webkit-animation-duration: 1.5s;
animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
visibility: visible !important;}
@keyframes pulse {0% {transform: scale(0.9);
opacity: 0.7;}
	50% {transform: scale(1);
opacity: 1;}	
	100% {transform: scale(0.9);
opacity: 0.7;}}
@-webkit-keyframes pulse {0% {-webkit-transform: scale(0.95);
opacity: 0.7;}
	50% {-webkit-transform: scale(1);
opacity: 1;}	
	100% {-webkit-transform: scale(0.95);
opacity: 0.7;}}

/*floating infinite*/
.floating.animate{animation-name: floating;
-webkit-animation-name: floating;
animation-duration: 1.5s;
-webkit-animation-duration: 1.5s;
animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
visibility: visible !important;}
@keyframes floating {0% {transform: translateY(0%);}
	50% {transform: translateY(8%);}	
	100% {transform: translateY(0%);}}
@-webkit-keyframes floating {0% {-webkit-transform: translateY(0%);}
	50% {-webkit-transform: translateY(8%);}	
	100% {-webkit-transform: translateY(0%);}}
	
/*tossing infinite*/
.tossing.animate{animation-name: tossing;
-webkit-animation-name: tossing;
animation-duration: 2.5s;
-webkit-animation-duration: 2.5s;
animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
visibility: visible !important;}
@keyframes tossing {0% {transform: rotate(-4deg);}
	50% {transform: rotate(4deg);}
	100% {transform: rotate(-4deg);}}
@-webkit-keyframes tossing {0% {-webkit-transform: rotate(-4deg);}
	50% {-webkit-transform: rotate(4deg);}
	100% {-webkit-transform: rotate(-4deg);}}