/*
Theme Name: moonstone
Description: A child theme of twentyseventeen
Author: Jessie Mele
Template: twentyseventeen
Version: 0.1.0
*/

@import url('https://fonts.googleapis.com/css?family=Gloria+Hallelujah|Montserrat:400,400i,700,700i');

body, html {
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #848b9a;
    overflow-x:hidden; 
 }
body, html, h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: 'Montserrat', Arial, sans-serif;
 }
 h1, h2, h3, h5 {
    font-family: 'Gloria Hallelujah', cursive;
    padding: 0;
    margin: 0;
 }
 h1 {
    color: #ed3e27;
 }
 h2 {
    color: #3fab39;
    font-size: 28px;
    padding: 0 0 35px 0;
 }
 h3 {
    color: #1d88eb;
    font-size: 28px;
 }
 h4 {
    color: #491e70;
    font-family: 'Montserrat', Arial, sans-serif;
    padding: 0;
    margin: 0;
 }
 h5 {
    color: #ffffff;
    font-size: 28px;
    text-transform: none;
    letter-spacing: 0;
}
p {
    margin: 0;
    padding: 0 0 35px 0;
}
 span.subheader {
    color: #491e70;
    font-size: 17px;
 }
 ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.page-contents {
    position: relative;
}
.page:not(.home) #content {
    padding-bottom: 0;
}
#content {
    padding: 0;
}
.center-me {
    text-align: center;
}
.left-me {
    text-align: left;
}
.right-me {
    text-align: right;
}
.block-me {
    display: block;
}
.purple-me {
    font-size: 17px;
}
.blue-me {
    color: #1d88eb;
}
.grey-me {
    color: #848b9a;
}
.bold-me {
    font-weight: bold;
}
a:focus {
    outline: none;
}
:focus {
    outline:none;
} 
::-moz-focus-inner {
    border:0;
}
 /*---------------------nav----------------------------*/
 .site-heade {
    height: 131px;
    z-index:9999;
    background-color: #ffffff;
}
 .navigation-top .wrap {
    padding: 0;
    background: #e5ac12;
    margin: 0;
    max-width: 100%;
    height: 35px;
    -o-animation:myfirst 17s ease-in infinite ;
    -moz-animation:myfirst 17s ease-in infinite ; /* Firefox */
    -webkit-animation:myfirst 17s ease-in infinite ; /* Safari and Chrome */
    animation:myfirst 17s ease-in infinite ;
    z-index:9999;
}
ul.sub-menu {
    background: #e5ac12;
    -o-animation:myfirst 17s ease-in infinite ;
    -moz-animation:myfirst 17s ease-in infinite ; /* Firefox */
    -webkit-animation:myfirst 17s ease-in infinite ; /* Safari and Chrome */
    animation:myfirst 17s ease-in infinite ;
}
.main-navigation ul ul {
 /*   background: #e5ac12;*/
  /*  animation:myfirst 17s ease-in infinite ;*/
   /* -moz-animation:myfirst 17s ease-in infinite ;*/ /* Firefox */
   /* -webkit-animation:myfirst 17s ease-in infinite ;*/ /* Safari and Chrome */
    border: none;
    text-align: center;
    padding: 15px 28px;
    width: 200px;
}
.main-navigation li {
    z-index: 999999;
    border-color: #ffffff;
}
.main-navigation li li:hover, .main-navigation li li.focus {
    background: none;
}
.main-navigation ul li.menu-item-has-children:before, .main-navigation ul li.menu-item-has-children:after, .main-navigation ul li.page_item_has_children:before, .main-navigation ul li.page_item_has_children:after {
    border-style: none;
}
.main-navigation .menu-item-has-children > a > .icon, .main-navigation .page_item_has_children > a > .icon {
    display: none;
}
.main-navigation ul ul a {
    padding: 8px 5px;
    width: 140px;
    font-size: 12px;
}
.main-navigation ul li:hover > ul, .main-navigation ul li.focus > ul {
    left: -12px;
    right: auto;
}
.navigation-top {
    top: 0;
    height: 130px;
    z-index: 9;
 }
 .navigation-top a {
    color: #ffffff;
    padding: 7.5px 35px;
    font-size: 14px;
    font-weight: 400;
    text-transform: uppercase;
    -moz-transition: color 0.2s;;
    -o-transition: color 0.2s;;
    -webkit-transition: color 0.2s;
    transition: color 0.2s;
}
.dropdown-toggle {
    color: #fff;
    padding: 8px 35px 8px 8px;
}
.js .menu-toggle {
    position: absolute;
}
.main-navigation ul ul.toggled-on {
    display: block;
    text-align: left;
}
.menu-toggle:focus {
    outline: none;
}
button.menu-toggle {
    color: #ffffff;
}
img.moonstone-logo {
    height: 71px;
    width: 350px;
    display: block;
    margin: 0 auto;
}
img.moonstone-logo-mob {
    display: none;
}
a.home {
    padding: 0;
}
a.parent-Portal {
    position: absolute;
    right: 20px;
    top: 15px;
    font-size: 12px;
    color: #e5ac12;
    font-weight: 400
}
a.parent-Portal:hover {
    text-decoration: underline;
}
.tipTopNav {
    height: 95px;
    padding: 12px 0;
}
.menu-nav-container {
    max-width: 983px;
    margin: 0 auto;
    padding: 0 33px;
}
.main-navigation a:hover {
    text-decoration: underline;
    color: #ffffff;
}
.navigation-top .current-menu-item > a, .navigation-top .current_page_item > a {
    color: #ffffff;
    text-decoration: underline;
}
.custom-header-media:before {
    background: none;
}
li#menu-item-873, li#menu-item-534, li#menu-item-740 {
    display: none;
}
.main-navigation ul li:hover > ul, .main-navigation ul li.focus > ul {
    left: 0;
    right: 0;
    text-align: left;
}
    /*------------add new for icon for mobil menu------------------*/
.hamburger {
    display: block;
    width: 35px;        
    height: 35px;
    float: right;
    position: fixed;
    z-index: 15;
    top: -65px;
    right: 25px;
}
.hamburger.x {
    top: 35px;
}
.hamburger rect {
    fill: #000000;
    -moz-transition: all .2s;
    -o-transition: all .2s;
    -webkit-transition: all .2s;
    transition: all .2s;
}
.hamburger.x rect:nth-child(1) {
    margin-top: 5px;
    transform: rotate(45deg) translate(7px, -4px);
    fill: #fff !important;
}
.hamburger.x rect:nth-child(2) {
    opacity: 0;
}
.hamburger.x rect:last-child {
    margin-top: 5px;
    transform: rotate(-45deg) translate(-11px, 1px);
    fill: #fff !important;
}
/*---------------------home page----------------------------*/
.home.container {
    text-align: center;
    padding-top: 50px;
}
.dayLife {
    width: 740px;
    height: 255px;
    margin: 0 auto;
    text-align: center;
    background: rgba(237, 62, 39, 0.6);
    padding: 50px 35px;
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
}
.dayLife h1 {
    color: #ffffff;
    font-size: 40px;
    padding-bottom: 10px;
    line-height: 50px;
}
.dayLife p {
    color: #ffffff;
    font-size: 22px;
    padding-bottom: 20px;
}
.dayLife a.homeCTA {
    background-color: #ffffff;
}
.dayLife a.homeCTA:hover {
    background-color: #ed3e27;
}
img.moonReach {
    display: block;
    margin: 0 auto;
    padding-top: 35px;
}
.home.container h2 {
    padding: 45px 0 35px 0;
}
span.subheader {
    padding: 0 210px 25px 210px;
    display: block;
}
.fishDrawing {
    padding-bottom: 35px;
}
img.homeFish {
    position: relative;
    left: 0;
    display: block;
    -o-animation: wave 20s forwards infinite linear;
    -moz-animation: wave 20s forwards infinite linear;
    -webkit-animation: wave 20s forwards infinite linear;
    animation: wave 20s forwards infinite linear;
}
.home.container .row {
    position: relative;
    padding-bottom: 175px;
}
.trio h3 {
    text-align: left;
    margin-bottom: 17px;
}
h3.announce {
    text-align: center;
    padding: 20px 0;
}
a.homeCTA {
    color: #ed3e27;
    font-size: 18px;
    line-height: 48px;
    text-align: center;
    border: 2px solid #ed3e27;
    width: 380px;
    height: 50px;
    display: block;
    margin: 0 auto;
    margin-top: 10px;
}
a.homeCTA:hover {
    background-color: #ed3e27;
    color: #ffffff;
}
.trio a.homeCTA {
    width: 100%;
    height: auto;
}
img.homeImg {
    width: 100%;
}
p.calenderDays {
    padding: 21px 0 15px;
    line-height: 30px;
    color: #491e70;
}
 /*---------------------parallax----------------------------*/
  .parallaxHome { 
    height: 100vh;
    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    top: -35px; 
}
 .parallax { 
    /* The image used */
    background-image: url("/wp-content/themes/moonstone/img/watercolor.jpg");
    height: 300px;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    position: relative;
    top: 0;
    z-index: 2;
}
.parallax.financialP {
    background-image: url("/wp-content/themes/moonstone/img/watercolors_2.jpg");
    position: relative;
    z-index: 2;
}
.parallax.giveBackP {
    background-image: url("/wp-content/themes/moonstone/img/Watercolors-giveback.jpg");
}
.parallax.parentsP {
    background-image: url("/wp-content/themes/moonstone/img/Watercolors-parents.jpg");
}
.parallax.programP {
    background-image: url("/wp-content/themes/moonstone/img/Watercolors-program.jpg");
}
.parallax.footerP {
    background-image: url("/wp-content/themes/moonstone/img/Watercolors-footer.jpg");
}
.parallax.connectedP {
    background-image: url("/wp-content/themes/moonstone/img/Watercolors-stayconnected.jpg");
}
/*----------------------------video-------------------------------*/
.overlayed {
    position: relative;
    z-index: 6;
    /* top: 1000px; */
    background: #ffffff;
}
/* Hero Video + Fallback */
#hero-vid {
backface-visibility:hidden;
/*background:url("http://www.markhillard.com/sandbox/media/polina.jpg") no-repeat scroll 0 0 #000;
background-size:cover;*/
background: url("/wp-content/themes/moonstone/img/MoonstoneAspot-OG2.jpg");
background-size:cover;
bottom:0;
height:auto;
min-height:100%;
min-width:100%;
perspective:1000;
position:fixed;
right:0;
width:auto;
max-width: none;
left: -100%;
right: -100%;
top: -100%;
bottom: -100%;
margin: auto;
/*height: auto;
width: auto*/;
}

 /*---------------------single pages----------------------------*/
/*.single-featured-image-header img {
    display: block;
    margin: auto;
    width: 100%;
}*/
.singlePage h1 {
    font-size: 40px;
    color: #ffffff;
    text-align: center;
    padding: 128px 20px;
}
/*.container {
    line-height: 26px;
    max-width: 1020px;
    position: relative;
    margin: 0 auto;
    overflow: auto;
}*/
.vision, .staff, .boardMembers, .community, .financial, .enrollment, .curriculum, .experience, .connected, .giveBack, .faq, .testimonials, .parentPortal, .employment, .bioPages, .parentPortalPage, .forms {
    line-height: 26px;
    max-width: 1020px;
    position: relative;
    margin: 0 auto;
/*    overflow: auto;*/
}
img.flowers {
    position: absolute;
    right: 250px;
    bottom: -143px;
    z-index: 7;
}
img.flowers.moveMe {
    bottom: 0;
    -moz-transition-duration: 2s;
    -o-transition-duration: 2s;
    -webkit-transition-duration: 2s;
    transition-duration: 2s;
}
 /*---------------------vision----------------------------*/
.vision h2:nth-of-type(1) {
    margin: 120px 0 0;
}
.vision h2:nth-of-type(2) {
    margin: 105px 0 0;
}
.vision h4 {
    padding: 40px 0 10px;
}
.innerVision {
    padding: 0 65px;
}
a.learnMore {
    color: #ed3e27;
}
a.learnMore:hover {
    text-decoration: underline;
}
.blueBox {
    background-color: #1d88eb;
    padding: 60px;
    margin-top: 150px;
    width: 100%;
}
.blueBox h5 {
    padding-bottom: 30px;
    line-height: 35px;
}
.blueBox p {
    color: #ffffff;
}
ul.visionUl {
    margin: 30px 0;
    list-style: disc;
    padding-left: 35px;
}
ul.visionUl li {
    color: #ffffff;
}
img.artsCenter {
    width: 200px;
    display: block;
    margin: 0 auto;
    padding-top: 15px;
}
a.blueBoxCTA {
    color: #ffffff;
    font-size: 18px;
    line-height: 48px;
    text-align: center;
    border: 2px solid #ffffff;
    width: 380px;
    height: 50px;
    display: block;
    margin: 0 auto;
    margin-top: 50px;
    float: none;
}
a.blueBoxCTA:hover {
    background: #ffffff;
    color: #1d88eb;
}
.CTAs {
    padding: 100px 55px 250px 55px;
    overflow: auto;
}
.CTAs a.homeCTA {
    margin: 0 30px;
}
.container.vision img.flowers {
    right: 95px;
}
.monsterBox {
    position: absolute;
    left: -160px;
    top: 550px;
}
.monsterBox.moveMe {
    left: 0;
    -moz-transition-duration: 1s;
    -o-transition-duration: 1s;
    -webkit-transition-duration: 1s;
    transition-duration: 1s;
}
.monsterBox.moveMeBack {
    left: -160px;
    -moz-transition-duration: 2s;
    -o-transition-duration: 2s
    -webkit-transition-duration: 2s;
    transition-duration: 2s;
}
.fish2Box {
    position: relative;
}
img.fish2 {
    position: absolute;
    right: 0;
    top: -35px;
    -o-animation: shimmy 1s infinite;
    -moz-animation: shimmy 1s infinite;
    -webkit-animation: shimmy 1s infinite;
    animation: shimmy 1s infinite;
}
 /*---------------------staff----------------------------*/
.staff {
    padding: 75px 0 225px;
}
.staff h2, .staff h4 {
    text-align: center;
}
.staff h2 {
    padding: 25px 0 0;
}
.staff h4 {
    font-size: 17px;
    padding-top: 10px;
}
.staff .row {
    padding-bottom: 40px;
}
p.gender {
    text-align: center;
    margin-top: 5px;
}
 /*---------------------bio pages----------------------------*/
 .bioPages {
    padding: 150px 0 200px;
    text-align: center;
}
.bioPages h2 {
    padding-top: 50px;
    padding-bottom: 10px;
}
.bioPages p {
    padding-top: 5px;
}
p.genderSingle {
    padding-bottom: 35px;
}
 /*---------------------board members----------------------------*/
.boardMembers {
    padding: 125px 0 200px;
    overflow: visible;
}
.boardMembers span.subheader {
    padding: 0 100px 0 0;
}
.boardMembers h2 {
    padding: 40px 0 10px;
}
span.boards {
    padding: 15px 0;
    display: block;
}
img.heart {
    position: absolute;
    right: 0;
    top: 600px;
    -o-animation: shimmy 2s linear alternate infinite;
    -moz-animation: shimmy 2s linear alternate infinite;
    -webkit-animation: shimmy 2s linear alternate infinite;
    animation: shimmy 2s linear alternate infinite;
}
img.crown {
    position: absolute;
    left: -175px;
    top: 1000px;
    -o-animation: jump 600ms linear alternate infinite;
    -moz-animation: jump 600ms linear alternate infinite;
    -webkit-animation: jump 600ms linear alternate infinite;
    animation: jump 600ms linear alternate infinite;
}
.heartBox, .crownBox {
    position: relative;
}
 /*---------------------community----------------------------*/
 .community {
    padding: 125px 0 200px;
}
.community span.subheader {
    padding: 0 0 45px;
}
ul.communityUl {
    padding-left: 15px;
    list-style: disc;
    color: #1d88eb;
}
ul.communityUl li {
    padding: 0 0 35px 5px;
}
/*ul.communityUl li:before {
    content: "•  ";
    padding-right: 5px;
    color: #1d88eb;
    margin-left: -12px;
}*/
.blueBox.comm {
    margin-top: 95px;
    padding-bottom: 70px;
    position: relative;
    z-index: 3;
}
.blueBox.comm h5{
    padding-bottom: 10px;
    text-align: center;
}
.jonahBox {
    position: absolute;
    right: -230px;
    top: 525px;
}
.jonahBox.moveMe {
    right: 0;
    -moz-transition-duration: 1s;
    -o-transition-duration: 1s;
    -webkit-transition-duration: 1s;
    transition-duration: 1s;
}
.jonahBox.moveMeBack {
    right: -230px;
    -moz-transition-duration: 1s;
    -o-transition-duration: 1s
    -webkit-transition-duration: 1s;
    transition-duration: 1s;
}
.catapillarBox {
    position: relative;
}
.catapillarBox {
    position: relative;
/*    width: 194px;*/
    width: 100%;
    height: 101px;
    -o-animation: tinywalk 500ms linear alternate infinite;
    -moz-animation: tinywalk 500ms linear alternate infinite;
    -webkit-animation: tinywalk 500ms linear alternate infinite;
    animation: tinywalk 500ms linear alternate infinite;
}
img.caterpillar {
    position: absolute;
    bottom: -95px;
    left: 0;
    -o-animation: walk 20s forwards infinite linear;
    -moz-animation: walk 20s forwards infinite linear;
    -webkit-animation: walk 20s forwards infinite linear;
    animation: walk 20s forwards infinite linear;
    z-index: 3;
}
.community {
    overflow: visible;
}
 /*---------------------financial----------------------------*/
 .financial {
    padding: 125px 0 200px;
}
.innerVision.divider {
    border-top: 1px solid #d4d6dc;
    margin: 0 auto;
    width: 890px;
    margin-top: 70px;
    margin-bottom: 100px;
}
.blueBox.finan {
    margin-top: 125px;
    padding-bottom: 70px;
    position: relative;
    z-index: 2;
}
.enrollment .blueBox.finan {
    margin-top: 200px;
}
.blueBox.finan h5 {
    padding-bottom: 10px;
    text-align: center;
}
.upsidedownBox, .birdBox {
    position: relative;
}
.upsidedownBox {
    z-index: 1;
}
img.upsidedown.moveMe {
    top: -262px;
    -moz-transition-duration: 500ms;
    -o-transition-duration: 500ms;
    -webkit-transition-duration: 500ms;
    transition-duration: 500ms;
}
img.upsidedown.moveMeBack {
    top: -125px;
    -moz-transition-duration: 2s;
    -o-transition-duration: 2s
    -webkit-transition-duration: 2s;
    transition-duration: 2s;
}
img.upsidedown {
    position: absolute;
    top: -125px;
    right: 0;
}
img.birds {
    position: absolute;
    bottom: -125px;
    left: 70px;
    -o-animation: jumpUp 500ms linear alternate infinite;
    -moz-animation: jumpUp 500ms linear alternate infinite;
    -webkit-animation: jumpUp 500ms linear alternate infinite;
    animation: jumpUp 500ms linear alternate infinite;
}
img.birds2 {
    position: absolute;
    bottom: -125px;
    left: 160px;
    -o-animation: jumpUp 500ms 250ms linear alternate infinite;
    -moz-animation: jumpUp 500ms 250ms linear alternate infinite;
    -webkit-animation: jumpUp 500ms 250ms linear alternate infinite;
    animation: jumpUp 500ms 250ms linear alternate infinite;
}
.birdBox {
    padding-top: 25px;
}
 /*---------------------enrollment----------------------------*/
.enrollment {
    padding: 125px 0 200px;
}
.enrollment h2 {
    line-height: 40px;
}
.blueBox.app {
    margin: 0 0 100px;
}
.blueBox.app h5 {
    padding-bottom: 0;
    text-align: center;
}
.enrollment span.subheader {
    padding: 35px 0 10px;
}
ul.enrollemntUl {
    padding-left: 15px;
    list-style: disc;
    color: #1d88eb;
}
ul.enrollemntUl li {
    padding: 0 0 10px 5px;
}
.enrollment p {
    padding-bottom: 20px;
}
p.disclaimer {
    padding-top: 20px;
    font-size: 12px;
}
.pricingChart {
    padding-top: 35px;
}
.monster2Box {
    position: relative;
    -0-animation: tinywalk 500ms linear alternate infinite;
    -moz-animation: tinywalk 500ms linear alternate infinite;
    -webkit-animation: tinywalk 500ms linear alternate infinite;
    animation: tinywalk 500ms linear alternate infinite;
}
img.monster2.illustrations {
    position: absolute;
/*    bottom: -130px;
    right: 0;*/
    top: 12px;
    left: 0;
    width: 137px;
    z-index: 1;
    -moz-animation: walkBack 20s forwards infinite linear;
    -o-animation: walkBack 20s forwards infinite linear;
    -webkit-animation: walkBack 20s forwards infinite linear;
    animation: walkBack 20s forwards infinite linear;
}
.tatoo1Box {
    margin-bottom: -50px;
}
img.tatoo1.illustrations {
    width: 175px;
    right: 0;
    margin: 0 auto;
    display: block;
    padding-bottom: 20px;
    -o-animation: shimmy 750ms infinite;
    -moz-animation: shimmy 750ms infinite;
    -webkit-animation: shimmy 750ms infinite;
    animation: shimmy 750ms infinite;
}
 /*---------------------curriculum---------------------------*/
.curriculum {
    padding: 125px 0 200px;
}
.currAreas {
    padding: 65px 0 70px 0;
}
.curriculum span.subheader {
    padding: 25px 0 5px 0;
}
.currAreas p {
    padding: 0 0 20px;
}
.curriculum p {
    padding-bottom: 0px;
}
.curriculum h2 {
    padding-top: 35px;
}
p.right-me.names {
    padding: 0;
    margin-bottom: -5px;
}
span.center-me.block-me.or {
    font-size: 16px;
    padding: 10px 0 35px;
}
img.schedule {
    padding: 0 0 35px 0;
}
.butterfly3Box {
    position: relative;
}
img.butterfly3.illustrations {
    position: absolute;
    right: -165px;
    top: 600px;
    -o-animation: shimmy .5s infinite;
    -moz-animation: shimmy .5s infinite;
    -webkit-animation: shimmy .5s infinite;
    animation: shimmy .5s infinite;
}
.monster3Box {
    position: relative;
    padding-top: 100px;
}
img.monster3.illustrations {
    position: absolute;
    bottom: -325px;
    left: 50px;
    z-index: 2;
    -o-animation: updown 5s linear infinite;
    -moz-animation: updown 5s linear infinite;
    -webkit-animation: updown 5s linear infinite;
    animation: updown 5s linear infinite;
}

 /*---------------------experience---------------------------*/
 .experience {
    padding: 125px 0 200px;
}
ul.exposureUl {
    padding-left: 15px;
    padding-bottom: 35px;
    list-style: disc;
    color: #1d88eb;
}
ul.exposureUl li {
    padding: 0 0 10px 5px;
}
.experience p.right-me.names {
    padding: 0;
    margin-bottom: -5px;
    margin-top: -20px;
}
.virtual {
    padding-top: 65px;
}
.virtual h2 {
    padding-bottom: 5px;
}
.exposure {
    padding-top: 100px;
    position: relative;
}
img.experienceIMG, img.galleryIMG {
    padding: 35px 0;
    margin: 0 auto;
    display: block;
}
/*#ngg-gallery-a80593384e8113f0fdb3c5c27ffa55fa-1 {
    display: none !important;
}
#ngg-gallery-a6bcdc3bf6884c88b91b1ed2b9f632fb-1 {
    display: none !important;
}
div#ngg-gallery-5bacdbf0b8d345298b0d2bab20780f6a-1 {
    display: none !important;
}*/

div#ngg-gallery-4b6577ca59c99b2634b553fb98ac1450-1 {
    display: none !important;
}

.tatoo3Box {
    position: relative;
    padding: 85px 0 20px 0;
}
img.tatoo3.illustrations {
    position: absolute;
    top: -370px;
    left: 0;
    width: 200px;
    height: auto;
}
.monster1Box {
    position: absolute;
    left: -200px;
    top: 475px;
}
.monster1Box.moveMe {
    position: absolute;
    top: -2000px;
    -moz-transition-duration: 1s;
    -o-transition-duration: 1s;
    -webkit-transition-duration: 1s;
    transition-duration: 1s;
}
.monster1Box.moveMeBack {
    top: 475px;
    -moz-transition-duration: 1s;
    -o-transition-duration: 1s
    -webkit-transition-duration: 1s;
    transition-duration: 1s;
}
 /*---------------------connected---------------------------*/
.connected {
    padding: 125px 0 200px;
}
.connected h3 {
    font-size: 22px;
}
img.schoolCalendar {
    padding: 35px 0;
}
.connected ul.enrollemntUl {
    padding: 35px 0 35px 15px;
}
p.center-me.MFAcal {
    padding: 45px 0 20px 0;
}
.connected .innerVision.divider {
    margin-top: 100px;
}
p.sched {
    padding: 2px 0 2px 35px;
    font-size: 15px;
}
.schedule span.purple-me {
    padding: 15px 0 5px;
    display: block;
}
.butterfly2Box {
    position: relative;
}
img.butterfly2.illustrations {
    position: absolute;
    right: 100px;
    top: 300px;
}
img.butterfly2.illustrations.moveMe {
    right: -2000px;
    top: -2000px;
    -moz-transition-duration: 4s;
    -o-transition-duration: 4s;
    -webkit-transition-duration: 4s;
    transition-duration: 4s;
}
img.butterfly2.illustrations.moveMeBack {
    right: 100px;
    top: 300px;
    -moz-transition-duration: 1s;
    -o-transition-duration: 1s;
    -webkit-transition-duration: 1s;
    transition-duration: 1s;
}
.monster6Box {
    position: relative;
    padding-bottom: 100px;
}
img.monster6.illustrations {
    position: absolute;
    top: 0;
    width: 175px;
    right: 50%;
}
img.monster6.illustrations.moveMe {
    right: -100%;
    top: -2000px;
    -moz-transition-duration: 1s;
    -o-transition-duration: 1s;
    -webkit-transition-duration: 1s;
    transition-duration: 1s;
}
img.monster6.illustrations.moveMeBack {
    right: 50%;
    top: 0;
    -moz-transition-duration: 1s;
    -o-transition-duration: 1s;
    -webkit-transition-duration: 1s;
    transition-duration: 1s;
}
 /*---------------------give back---------------------------*/
 .giveBack {
    padding: 125px 0 200px;
}
.giveBack ul.enrollemntUl {
    padding: 35px 0;
}
img.tileFund {
    margin: 0 auto;
    display: block;
    padding: 35px 0;
}
.monster5Box, .tatoo5Box {
    position: relative;
}
img.monster5 {
    position: absolute;
    top: -60px;
    right: 100px;
    width: 165px;
    -o-animation: fade 2s alternate infinite;
    -moz-animation: fade 2s alternate infinite;
    -webkit-animation: fade 2s alternate infinite;
    animation: fade 2s alternate infinite;
}
img.tatoo5 {
    position: absolute;
    right: 0;
    top: -147px;
    width: 100px;
    z-index: 1;
    -o-animation: rotateCircle 2s linear infinite;
    -moz-animation: rotateCircle 2s linear infinite;
    -webkit-animation: rotateCircle 2s linear infinite;
    animation: rotateCircle 2s linear infinite;
}

@-o-keyframes rotateCircle {
  0% {top: -100px; transform: rotate(0deg) translateX(-100px);}
  100% {top: -100px; transform: rotate(360deg) translateX(-100px);}
}
@-webkit-keyframes rotateCircle {
  0% {top: -100px; transform: rotate(0deg) translateX(-100px);}
  100% {top: -100px; transform: rotate(360deg) translateX(-100px);}
}
@-moz-keyframes rotateCircle {
  0% {top: -100px; transform: rotate(0deg) translateX(-100px);}
  100% {top: -100px; transform: rotate(360deg) translateX(-100px);}
}
@keyframes rotateCircle {
  0% {top: -100px; transform: rotate(0deg) translateX(-100px);}
  100% {top: -100px; transform: rotate(360deg) translateX(-100px);}
}

/*---------------------faq----------------------------*/
.faq {
    padding: 125px 0 200px;
}
.faq h2:nth-of-type(2), .faq h2:nth-of-type(3), .faq h2:nth-of-type(4) {
    padding-top: 35px;
}
.butterfly1Box, .monster4Box {
    position: relative;
}
img.butterfly1.illustrations {
    position: absolute;
    right: 0;
    top: 0;
}
img.butterfly1.illustrations.moveMe {
    position: absolute;
    right: -2500px;
    top: 0;
    -moz-transition-duration: 15s;
    -o-transition-duration: 15s
    -webkit-transition-duration: 15s;
    transition-duration: 15s;
    -o-animation: babyWave 5s forwards infinite linear;
    -moz-animation: babyWave 5s forwards infinite linear;
    -webkit-animation: babyWave 5s forwards infinite linear;
    animation: babyWave 5s forwards infinite linear;
}
img.butterfly1.illustrations.moveMeBack {
    position: absolute;
    right: 0;
    top: 0;
    -moz-transition-duration: 2s;
    -o-transition-duration: 2s
    -webkit-transition-duration: 2s;
    transition-duration: 2s;
}
img.monster4.illustrations {
    position: absolute;
    top: 200px;
    right: -2500px;
    -o-animation: miniJump 450ms linear alternate infinite;
    -moz-animation: miniJump 450ms linear alternate infinite;
    -webkit-animation: miniJump 450ms linear alternate infinite;
    animation: miniJump 450ms linear alternate infinite;
}
img.monster4.moveMe {
    right: 0;
    -moz-transition-duration: 1.5s;
    -o-transition-duration: 1.5s;
    -webkit-transition-duration: 1.5s;
    transition-duration: 1.5s;
}
img.monster4.moveMeBack {
    right: -2500px;
    -moz-transition-duration: 1.5s;
    -o-transition-duration: 1.5s
    -webkit-transition-duration: 1.5s;
    transition-duration: 1.5s;
}
 /*---------------------testimonials----------------------------*/
.testimonials {
    padding: 125px 0 200px;
    overflow: visible;
}
.testimonials p {
    padding: 0;
}
p.left-me.names {
    margin: 15px 0 50px;
}
img.tatoo4.illustrations {
    width: 150px;
    margin: 0 auto;
    display: block;
    margin-top: -100px;
    margin-right: 45px;
    right: 0;
    -o-animation: shakeSmall 1.25s infinite;
    -moz-animation: shakeSmall 1.25s infinite;
    -webkit-animation: shakeSmall 1.25s infinite;
    animation: shakeSmall 1.25s infinite;
}
.monster7Box {
    position: relative;
}
img.monster7.illustrations {
    position: absolute;
    top: -100px;
    left: -200px;
}
 /*---------------------employment----------------------------*/
 .employment {
    padding: 125px 0 325px;
}
p.employmentDisclaimer {
    font-size: 12px;
}
.tatoo2Box {
    position: relative;
    padding-bottom: 20px;
}
img.tatoo2.illustrations {
    position: absolute;
    top: -100px;
    right: 50px;
    -o-animation: scaleMe 1.5s infinite;
    -moz-animation: scaleMe 1.5s infinite
    -webkit-animation: scaleMe 1.5s infinite;
    animation: scaleMe 1.5s infinite;
}
.monster8Box {
    position: relative;
}
img.monster8.illustrations {
    position: absolute;
    left: -62px;
    top: 130px;
}
img.monster8.illustrations.moveMe {
    -o-animation: turnDive 5s 1 forwards;
    -moz-animation: turnDive 5s 1 forwards;
    -webkit-animation: turnDive 5s 1 forwards;
    animation: turnDive 5s 1 forwards;
}
 /*---------------------parent portal----------------------------*/
.parentPortalPage {
    padding: 100px 0 250px;
}
.parentPortalPage h2 {
    padding-bottom: 15px;
}
a.homeCTA.pp {
    width: 100%;
    height: auto;
}
.heartportalBox {
    padding-bottom: 25px;
    margin-top: -50px;
}
img.heartportal.illustrations {
    width: 200px;
    -o-animation: shimmy 500ms infinite;
    -moz-animation: shimmy 500ms infinite;
    -webkit-animation: shimmy 500ms infinite;
    animation: shimmy 500ms infinite;
}
img.flowers.illustrations.foot {
    bottom: 0;
}
img.flowers.illustrations.foot.moveMe {
    bottom: 280px;
    -moz-transition-duration: 2s;
    -o-transition-duration: 2s;
    -webkit-transition-duration: 2s;
    transition-duration: 2s;
}
 /*---------------------forms----------------------------*/
.forms {
    padding: 150px 0 275px;
}
.forms a {
    padding: 10px 0;
    color: #848b9a;
    line-height: 45px;
}
.forms a:hover {
    text-decoration: underline;
}
.forms a.homeCTA {
    color: #ed3e27;
    line-height: 28px;
}
.forms a.homeCTA:hover {
    background-color: #ed3e27;
    color: #ffffff;
    text-decoration: none;
}
.forms .CTAs {
    padding: 125px 55px 75px 55px;
}
 /*---------------------policies----------------------------*/
 .forms h3 {
    font-size: 20px;
    padding: 30px 0 11px;
}
/*---------------------login----------------------------*/
.parentPortal {
    padding: 300px 0;
}
div#ewd-feup-login {
    color: #ed3e27;
}
form#ewd-feup-login-form {
    width: 500px;
    margin-left: auto;
    margin-right: auto;
}
.feup-pure-form-aligned .feup-pure-control-group {
    float: none;
    width: 100%;
    padding: 0 10px;
}
.feup-pure-form-aligned .feup-pure-control-group label, .feup-pure-control-group .ewd-feup-text-input {
    float: none;
    display: block;
}
.feup-pure-form-aligned .feup-pure-control-group label, input[type="text"], input[type="password"] {
    color: #848b9a;
    padding: 5px 0;
    border-color: #848b9a;
    -webkit-border-radius: 0px;
    border-radius: 0px;
}
.feup-pure-control-group .ewd-feup-text-input {
    width: 100% !important;
    padding-left: 5px;
}
::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: #848b9a;
  padding-left: 5px;
}
::-moz-placeholder { /* Firefox 19+ */
  color: #848b9a;
  padding-left: 5px;
}
:-ms-input-placeholder { /* IE 10+ */
  color: #848b9a;
  padding-left: 5px;
}
:-moz-placeholder { /* Firefox 18- */
  color: #848b9a;
  padding-left: 5px;
}
input[type="submit"] {
    -webkit-border-radius: 0px; 
    border-radius: 0px; 
}
input[type="submit"] {
    -webkit-border-radius: 0px;
    border-radius: 0px;
    color: #ffffff;
    text-align: center;
    background-color: #ed3e27;
    font-weight: 400;
}
input[type="submit"]:hover, input[type="submit"]:focus {
    background: #641c62;
}
.loggedOut {
    padding: 350px 0;
    text-align: center;
}
span.contact {
    padding-top: 25px;
    display: block;
    text-align: center;
}
 /*---------------------footer----------------------------*/
.site-foote {
    margin: 0; 
    height: auto;
    font-size: 14px;
    color: #848b9a;
    border: none;
    z-index: 8;
    position: relative;
}
.site-foote .wrap {
    padding: 0;
    height: 30px;
    line-height: 20px;
    max-width: none;
    z-index: 99;
}
.social {
    background: #a7163f;
    height: 35px;
    color: #ffffff;
    z-index: 99;
}
.mainFoot .container {
    color: #ffffff;
    padding-top: 35px;
}
.mainFoot {
    background: #e5ac12;
    -o-animation:myfirst 17s ease-in infinite ;
    -moz-animation:myfirst 17s ease-in infinite ; /* Firefox */
    -webkit-animation:myfirst 17s ease-in infinite ; /* Safari and Chrome */
    animation:myfirst 17s ease-in infinite ;
    z-index: 99;
}
.newsletterBox, .donateBox {
    background: #a7163f;
    width: 100%;
    height: auto;
    padding: 20px;
    line-height: 20px;
}
span.donateCTA:hover {
    color: #a7163f;
    background-color: #ffffff;
}
.copy {
    padding-left: 20px;
}
.site-info {
    float: left;
    width: 100%;
}
.createdBy.col-sm-6 {
    text-align: right;
    padding-right: 20px;
    width: 50%;
    float: right;
}
.copy.col-sm-6 {
    width: 50%;
    float: left;
}
.site-info a:hover {
    text-decoration: underline;
    color: #ed3e27;
    box-shadow: none;
}
.footEmail {
    color: #ffffff;
}
.footEmail:hover {
    color: #ffffff;
    text-decoration: underline;
}

/*---------------------overrride mialchimp styles----------------------------*/
#mc_embed_signup .button:hover {
    color: #a7163f !important;
    background-color: #ffffff !important;
}
#mc_embed_signup form {
    padding: 0 !important;
}
#mc_embed_signup input {
    border: none !important;
    border-radius: 0px !important;
}
#mc_embed_signup .button {
    border-radius: 0px !important;
    color: #FFFFFF !important;
    font-size: 14px !important;
    text-align: center !important;
    text-decoration: none !important;
    width: 100% !important;
    border: 2px solid #ffffff !important;
    padding: 0 !important;
    margin-top: 5px !important;
    display: block !important;
    background-color: #a7163f !important;
    text-transform: uppercase;
    margin-bottom: 0 !important;
    height: 36px !important;
    transition: none !important;
}
.newsletterBox {
    margin-bottom: 35px;
}
span.sub {
    padding-bottom: 15px;
    display: block;
    font-weight: bold;
}
#mc_embed_signup .mc-field-group {
    width: 100% !important;
}
/*---------------------------------tables----------------------------------------*/
table, th, td {
    border: 1px solid #848b9a;
    border-collapse: collapse;
}
th, td {
    padding: 10px;
    text-align: left;
}
th:first-child, td:first-child {
    padding-left: 10px;
}
th.tableHeader {
    color: #ffffff;
    background-color: #848b9a;
    text-align: center;
}
/*---------------------------------footer----------------------------------------*/
.donateBox {
    text-align: center;
}
span.donateCTA {
    color: #ffffff;
    border: 2px solid #ffffff;
    padding: 6px 0;
    margin-top: 15px;
    display: block;
}
.social .container {
    height: 35px;
    padding: 5px 30px 5px 30px;
}
img.socialIcon {
    width: 20px;
    height: 20px;
    margin-right: 20px;
}
.footerLinksRight {
    float: right;
}
.footerLinksLeft {
    float: left;
}
.footerLinksRight a {
    color: #ffffff;
    padding: 0 0 0 30px;
    font-size: 12px;
}
.footerLinksRight a:hover {
    text-decoration: underline;
}
span.uWay {
    float: right;
    padding-top: 20px;
}
/*----------------------blog page and single posts---------------------------------------*/
.blogPage, .wrap.blogPageSingle {
    padding: 125px 0 200px;
}
.blog:not(.has-sidebar) #primary article {
    width: 100%;
    float: none;
    padding: 0 0 100px;
}
header.page-header {
    display: none;
}
h1.entry-title.blogPostsPage:hover {
    text-decoration: underline;
}
time.entry-date.published {
    color: #491e70;
}
.blogPage .container {
    width: 100%;
}
.blogPage h1 {
    padding-top: 10px;
}
.navigation.pagination {
    float: none;
    width: 100%;
}
img.attachment-twentyseventeen-featured-image.size-twentyseventeen-featured-image.wp-post-image {
    width: 500px;
    display: block;
    margin: 0 auto;
    padding-top: 50px;
}
.jp-carousel-info {
    display: none;
}
/*--------------single page----------------*/
h1.entry-title.blogPostsSingle {
    font-size: 36px;
}
.single-featured-image-header {
    background-color: #ffffff;
    border-bottom: none;
    margin: 10px 0 50px;
}
.single-featured-image-header img {
    height: auto;
    margin: 0;
}
.entry-footer {
    border: none;
}
h3#reply-title {
    font-size: 22px;
}
.form-submit input[type="submit"] {
    -webkit-border-radius: 0px;
    border-radius: 0px;
    color: #ffffff;
    text-align: center;
    background-color: #ffffff;
    font-weight: 400;
    color: #ed3e27;
    font-size: 14px;
    text-align: center;
    border: 2px solid #ed3e27;
    padding: 10px 20px;
    text-transform: uppercase;
    transition: none;
}
.form-submit input[type="submit"]:hover {
    text-align: center;
    color: #ffffff;
    background-color: #ed3e27;
}
/*body:not(.twentyseventeen-front-page) .entry-header {
    padding-top: 175px;
}*/
/*---------------------gallery/slideshow----------------------------*/
.ngg-gallery-thumbnail {
    text-align: center;
    max-width: 100%!important;
    background-color: #FFF;
    border: none !important;
    margin: 6px;
}
.ngg-gallery-thumbnail a {
    display: block;
    margin: 0 !important;
    border: none;
    box-shadow: none;
}
.slideshowlink {
    display: none;
}
.gallery {
    margin: 50px 0;
    margin-left: -6px;
    margin-right: -6px;
}
/*#fancybox-overlay {
    background-color: rgb(0, 0, 0) !important;
}
#fancybox-left, #fancybox-right {
    visibility: visible !important;
    display: block !important;
}
#fancybox-left {
    left: 0;
}
#fancybox-right {
    right: 0;
}
#fancybox-left span {
    left: 20px;
}
#fancybox-right span {
    left: auto;
    right: 20px;
}
#fancybox-right:hover span {
    left: auto;
    right: 20px;
}
#fancybox-close {
    display: block !important;
}*/

.galleria-theme-nextgen_pro_lightbox {
    background: rgba(0,0,0,0.5) !important;
}
i.fa.fa-times-circle {
    font-size: 30px;
}
#npl_button_close {
    top: 35px !important;
    right: 40px !important;
    color: #616161 !important;
}
.galleria-counter, .galleria-thumbnails-container, .galleria-dock-toggle-container, .galleria-thumbnails-container.galleria-carousel {
    display: none;
}
/*---------------------404 page----------------------------*/
.error404:not(.has-sidebar) #primary .page-content, .error404.has-sidebar #primary .page-content {
    width: 100%;
    float: none;
}
p.four-o-four-p {
    text-align: center;
    padding: 200px 0;
}
/*---------------------responsive breakpoint----------------------------*/
@media only screen and (max-width: 1732px) {
    .parallax {
        background-size: auto;
    }
}

@media (min-width: 1300px) {
    .container {
        width: 1280px;
    }
}

@media only screen and (max-width: 1375px) {
    img.crown {
        right: 0;
        left: auto;
    }
    img.butterfly3.illustrations {
        right: -100px;
        width: 150px;
    }
}

@media only screen and (max-width: 1300px) {
    .home .container {
        width: 100%;
    }
    .CTAs a.homeCTA {
        width: 40%;
        margin: 0 5%;
    }
    img.butterfly3.illustrations {
        top: 380px;
        right: -37px;
    }
    img.tatoo5 {
        right: 50px;
    }
}

@media only screen and (max-width : 1280px) {
    .home .container {
        width: 100%;
        padding: 50px 50px 0;
    }
    .home .social .container {
        height: 35px;
        padding: 5px 30px 5px 30px;
    }
    .mainFoot .container {
        padding: 35px 0 0 0;
        width: 100%
    }
    .social .container {
        padding: 5px 20px;
        width: 100%;
    }
    .seperate {
        overflow: auto;
        width: 50%;
        float: left;
    }
    .mainFoot {
        padding-bottom: 20px;
    }
    .mainFoot .col-sm-3 {
        width: 100%;
        float: none;
    }
    .seperate.text .col-sm-3 {
        margin-top: 35px;
    }
    .forms .CTAs {
        padding: 125px 0 75px 0;
    }
    .home .col-sm-4 a.homeCTA {
        width: 100%;
    }
    p.calenderDays {
        padding: 16px 0 8px;
    }
    .trio {
        overflow: auto;
    }
}

@media only screen and (max-width : 1280px) {
    .col-sm-4.box-right {
        float: none;
        margin: 0 auto;
        padding: 50px 0 35px;
        clear: left;
    }
    .trio .col-sm-4 {
        width: 50%;
    }
    .home.container h3 {
        font-size: 27px;
    }
    a.homeCTA {
        font-size: 17px;
    }
    .parentPortal {
        padding: 175px 0 250px;
    }
}

@media only screen and (max-width : 1215px) {
    .monster1Box {
        left: -155px;
        width: 140px;
    }
}

@media only screen and (max-width : 1140px) {
    .monsterBox {
        width: 90px;
    }
    .parentPortalPage {
        padding: 75px 0 250px;
    }
    .jonahBox {
        width: 140px;
    }
}

@media only screen and (max-width : 1122px) {
    .monster1Box {
        left: -125px;
        width: 125px;
    }
}

@media only screen and (max-width : 1080px) {
    .monster1Box {
        top: 1075px;
    }
}

@media only screen and (max-width : 1060px) {
    .jonahBox{
        width: 100px;
    }
    img.monster7.illustrations {
        top: -100px;
        width: 145px;
        left: 0;
    }
    .monster7Box {
        padding-top: 85px;
    }
    .monster1Box {
        display: none;
    }
}

@media only screen and (max-width : 1024px) {
    img.fish2 {
        width: 175px;
    }
    img.butterfly3.illustrations {
        right: 0;
    }
    .parentPortal {
        padding: 225px 0 250px;
    }
}

@media (max-width: 990px) {
    .home .container {
        width: 100%;
    }
}

@media only screen and (max-width: 989px) {
    .innerVision {
        padding: 0 25px;
    }
    .parentPortalPage .col-sm-4 {
        width: 100%;
        float: none;
    }
    img.pPort  {
        width: 100%;
    }
    .parentPortalPage h2 {
        padding-bottom: 20px;
    }
    a.homeCTA.pp {
        margin: 30px 0 50px;
    }
    ul#top-menu a {
        padding: 7.5px 17px;
    }
    .main-navigation ul {
        text-align: center;
    }
    .main-navigation ul ul {
        padding: 15px 5px;
        width: 175px;
    }
    .main-navigation ul ul a {
        width: 175px;
    }
/*    .main-navigation ul ul {
    padding: 15px 0;
    width: 150px;
    }*/
    span.subheader {
        padding: 0 0 25px;
    }
    .boardMembers span.subheader {
        padding-right: 0;
    }
    img.butterfly3.illustrations {
        right: -18px;
        width: 125px;
        top: 440px;
    }
    img.monster8.illustrations {
        left: -22px;
        top: 150px;
    }
    .monster1Box {
        top: 1180px;
    }
    img.monster4.illustrations {
        top: 70px;
        width: 125px;
    }
    .parentPortalPage {
        padding: 50px 0 250px;
    }
    .heartportalBox {
        margin-top: 0;
    }
    img.tatoo4.illustrations {
        margin-top: -45px;
    }
    .staff h2 {
        font-size: 22px;
    }
    p.gender, .staff h4 {
        font-size: 13px;
    }
    p.gender {
        margin-top: 0;
        padding: 0;
    }
    .staff h4 {
        line-height: 18px;
    }
}

@media only screen and (min-width : 810px) {
    .home.container h3 {
        font-size: 27px;
    }
}

@media only screen and (min-width : 768px) {

}

@media only screen and (max-width : 850px) {
    .monsterBox {
        display: none;
    }
    .jonahBox {
        top: 400px;
    }
}

@media only screen and (max-width : 767px) {
    body, html {
        -webkit-overflow-scrolling: touch;
        overflow-x:hidden; 
    }
    .site-heade {
        height: 80px;
    }
    .main-navigation > div > ul {
        border-top: none;
        padding: 0;
    }
    .main-navigation li {
        background: rgba(255, 255, 255, 0);
        animation:none;
    }
    .menu-nav-container {
        padding: 0;
    }
    .main-navigation ul ul {
        padding-left: 45px;
    }
   .main-navigation li {
        border-color: rgba(255, 255, 255, 0.3);
    }
    .main-navigation li:first-child {
        border-top: 1px solid rgba(255, 255, 255, 0.3)
    }
    .main-navigation li:last-child {
        border-bottom: 1px solid rgba(255, 255, 255, 0.3)
    }
    ul.sub-menu.toggled-on li {
        border: none;
    }
    a.parent-Portal {
        display: none;
    }
    .menu-toggle {
        margin: 0 0 0 10px;
    }
    .main-navigation, .navigation-top .wrap {
        height: 5px;
    }
    .navigation-top {
        height: 80px;
    }
    ul#top-menu a {
        padding: 25px 35px;
    }
    .tipTopNav {
        height: 75px;
        padding: 0;
    }
    li#menu-item-873, li#menu-item-534, li#menu-item-740 {
        display: block;
    }
    .navigation-top a {
        text-align: center;
    }
    .main-navigation ul ul.toggled-on {
        text-align: center;
        margin: 0 auto;
        padding: 0 0 20px 0;
        margin-top: -15px;
    }
    .navigation-top .wrap.mob {
        height: 100vh;
        z-index: 99;
        padding-top: 100px;
        margin-top: -101px;
    }
    #masthead .wrap.mob {
        width: 100%;
        height: 1500px;
        clear: inherit;
    }
    .main-navigation ul ul a {
        width: 100%;
    }
    .main-navigation ul {
        background: rgba(255, 255, 255, 0);
    }
    ul.sub-menu, .main-navigation ul ul {
        background: rgba(255, 255, 255, 0);
        animation: none; 
    }
    .dropdown-toggle {
        top: 15px;
    }
    ul.sub-menu.toggled-on a {
        padding: 10px 0;
    }
    .main-navigation ul ul {
        width: 100%;
    }
    ul.sub-menu.toggled-on a {
        padding: 10px 35px !important;
    }
    img.moonstone-logo-mob {
        display: block;
        padding: 25px 0 0 20px;
        float: left;
    }
    img.moonstone-logo { 
        display: none;
    }
    .vision, .staff, .boardMembers, .community, .financial, .enrollment, .curriculum, .experience, .connected, .giveBack, .faq, .testimonials, .employment, .bioPages, .parentPortalPage, .forms {
        padding: 50px 0 200px;
    }
    .parentPortal {
        padding: 75px 0 200px;
    }
    .dayLife {
        width: 90%;
        height: auto;
    }
    .blog:not(.has-sidebar) #primary article {
        padding-top: 50px;
    }
    .ngg-gallery-thumbnail {
        margin: 0 !important;
        width: 100% !important;
    }
    .ngg-galleryoverview {
        width: 100% !important;
        padding: 0 !important;
        display: block !important;
    }
    .gallery {
        margin: 50px 0 !important;
        width: 100% !important;
        padding: 0 !important;
        display: block !important;
        margin: 0 auto !important;
    }
    .ngg-gallery-thumbnail-box {
        width: 50% !important;
        padding: 1% !important;
    }
    img.homeFlowers, img.flowers, img.fish2 {
        bottom: 0;
        margin-left: auto;
        margin-right: auto;
        left: 0;
        right: 0;
    }  
    img.homeFlowers, img.flowers {
        width: 240px;
        height: auto;
    }
    img.fish2 {
        top: 0;
    }
    .fish2Box {
        padding-top: 175px;
    }
    .vision .blueBox {
        margin-top: 30px;
    }
    .catapillarBox {
        padding-top: 30px;
    }
    img.caterpillar, img.birds {
        bottom: -96px;
    }
    img.upsidedown {
        top: -50px;
    }
    .upsidedownBox {
        padding-bottom: 50px;
    }
    .birdBox {
        padding-top: 100px;
    }
    .navigation-top .current-menu-item > a, .navigation-top .current_page_item > a {
        text-decoration: none;
    }
    .home .container {
        padding: 50px 25px 0;
    }
/*    .monster3Box {
        padding-top: 175px;
    }*/
    img.monster3.illustrations {
        bottom: -315px;
    }
    .tatoo2Box {
        padding-bottom: 70px;
    }
    img.tatoo2.illustrations {
        top: -30px;
        right: 45px;
        width: 125px;
        height: auto;
    }
    .monster8Box, .monster1Box {
        display: none;
    }
    img.tatoo3.illustrations {
        top: -300px;
        left: -2px;
        width: 175px;
        height: auto;
        margin-left: auto;
        margin-right: auto;
        left: 0;
        right: 0;
}
    .experience {
        padding-top: 65px;
    }
    .tatoo3Box {
        padding: 100px 0 30px 0;
    }
    div#ewd-feup-login {
        padding: 35px 0 0 0;
    }
    form#ewd-feup-login-form {
        width: 90%;
        position: relative;
        top: 0;
        left: 0;
        transform: none;
        padding: 0 5%;
        margin: 0 auto;
    }
    img.monster4.illustrations {
        top: 0;
        width: 100px;
    }
    .tatoo5Box {
        padding-top: 70px;
    }
    .monster7Box {
        padding-top: 150px;
    }
    img.monster7.illustrations {
        top: -38px;
    }  
    .blueBox.app {
        margin-bottom: 75px;
    } 
    .jonahBox {
        display: none;
    }
    img.butterfly3.illustrations {
        display: none;
    }
    img.upsidedown.moveMeBack {
        top: -50px;
        }
    img.upsidedown {
        top: -50px;
    }
    .pagination {
        display: block;
    }
    .site-info {
        padding: 0.7em 0 0;
    }
}

@media only screen and (max-width: 760px) {
    .forms .CTAs, .CTAs {
        padding: 50px 0;
    }
    .CTAs a.homeCTA {
        width: 95%;
        margin: 0 auto;
        margin-top: 25px;
    }
    .vision h2:nth-of-type(1) {
        margin: 0;
    }
    .vision h2:nth-of-type(2) {
        margin: 20px 0 0;
    }
    .vision h4 {
        padding: 20px 0 10px;
    }
    h2 {
        padding-bottom: 20px;
    }
    p {
        padding-bottom: 20px;
    }
    .blueBox {
        margin-top: 50px;
    }
    img.staffTiny {
        display: block;
        margin: 0 auto;
        width: 60%;
    }
    .staff h2 {
        font-size: 26px;
    }
    .staff h4 {
        padding: 10px 0 0;
        font-size: 18px;
    }
    p.gender {
        padding: 5px 0 45px;
        font-size: 14px;
    }
    .staff .row {
        padding-bottom: 0;
    }
    .community span.subheader {   
        padding-top: 0;
    }
    .blueBox.finan, .blueBox.comm {
        margin-bottom: 35px;
    }
    .enrollment .blueBox.finan {
        margin-top: 200px;
    }
    .giveBack .blueBox.finan{
        margin-top: 125px;
    }
    .exposure {
        padding-top: 50px;
    }
    .enrollment span.subheader {
        padding-top: 15px;
    }
    .innerVision.divider, .connected .innerVision.divider {
        margin-top: 50px;
        margin-bottom: 50px;
    }
    .trio .col-sm-4 {
        width: 100%;
        float: none;
    }
    .trio .col-sm-4 {
        width: 90%;
        padding: 20px 5%;
        margin: 0 auto;
    }
    .butterfly3Box {
        display: none;
    }
    img.monster5.illustrations {
        top: -48px;
        width: 125px;
        padding-top: 20px;
    }
    .monster6Box {
        padding-bottom: 150px;
    }
    img.monster6.illustrations {
        top: 12px;
        width: 150px;
        padding-top: 20px;
    }
    .monster6Box {
        padding-bottom: 100px;
    }
    img.monster2.illustrations {
        top: 28px;
        width: 125px;
    }
    img.artsCenter {
        padding: 15px 0 50px;
    }
    .site-info {
        float: left;
        width: 100%;
    }
}

@media only screen and (max-width : 690px) {
    img.heart {
        /*display: none;*/
        width: 100px;
        top: 700px;
    }
    img.butterfly2.illustrations {
        width: 125px;
        top: 325px;
    }
}

@media only screen and (max-width : 615px) {
    h1.enrol {
        padding: 106px 20px;
    }
}

@media only screen and (max-width : 600px) {
    .seperate {
        overflow: auto;
        width: 100%;
        float: none;
        padding-top: 35px;
    }
    .seperate.text {
        padding-top: 0;
    }
    .mainFoot .container {
        padding: 0 20px; 
    }
    .social .container, .social {
        height: 100px;
    }
    .footerLinksRight {
        float: none;
        padding-top: 2.5px;
    }
    .footerLinksLeft {
        float: right;
        padding-top: 5px;
    }
    .footerLinksRight a {
        padding: 5px 0;
        display: block;
    }
    .mainFoot .col-sm-3 {
        padding: 0 5px;
    }
    .social .container {
        padding: 5px 20px 5px 20px;
    }
    img.socialIcon {
        margin-left: 15px;
        margin-right: 0;
    }
    .site-info {
        margin-top: 5px;
    }
    img.butterfly1.illustrations {
        width: 100px;
        right: -35px;
    }
}

@media only screen and (max-width : 580px) {
    img.crown {
        display: none;
    }
    img.butterfly2.illustrations {
        right: 50px;
    }
    img.butterfly2.illustrations.moveMeBack {
        right: 50px;
    }
    img.butterfly2.illustrations.moveMe {
        top: -50px;
    }
}

@media only screen and (max-width : 550px) {
    a.blueBoxCTA {
        width: 100%;
        height: auto;
        margin-top: 0;
    }
    .blueBox {
        padding: 45px;
        margin: 75px 0 35px;
    }
    .blueBox.finan, .blueBox.comm {
        padding-bottom: 45px;
    }
    .birdBox {
        padding-top: 75px;
    }
    .blueBox.comm h5, .blueBox.finan h5 {
        padding-bottom: 30px;
    }
    .giveBack a.blueBoxCTA {
        margin-top: 25px;
    }
    ul.visionUl {
        margin: 0px 0 20px 0;
    }
    img.staffTiny {
        width: 80%;
    }
/*    img.caterpillar {
        bottom: -92px;
    }*/
    img.birds {
        bottom: -45px;
    }
    .trio .col-sm-4 {
        width: 95%;
        padding: 20px 2.5%;
    }
    .home.container h3 {
        text-align: center;
    }
    .fishDrawing {
        padding: 25px 0 35px 0;
    }
    .trio {
        padding-bottom: 30px;
    }
    a.homeCTA {
        width: 90%;
    }
    .home .container {
        padding-top: 25px;
    }
    th, tr {
        font-size: 12px;
        padding: 0 4px;
    }
    th.thHead {
        padding: 7px;
    }
    th:first-child, td:first-child {
        padding: 10px 5px;
        line-height: 15px;
    }
    .pricingChart th, .pricingChart td {
        padding: 10px 10px;
        text-align: center;
    }
/*    img.illustrations {
        width: 50%;
    }*/
    img.monster3.illustrations {
/*        bottom: -45px;*/
        width: 30%;
    }
    form#ewd-feup-login-form {
        width: 90%;
    }
    img.tatoo5.illustrations {
        width: 75px;
    }
    .tatoo5Box {
        padding-top: 18px;
    }
    .fish2Box {
        padding-top: 150px;
    }
    img.fish2.illustrations {
        width: 175px;
    }
    .blueBox.app h5 {
        padding-bottom: 20px;
        line-height: 42px;
    }
    img.homeFish {
        width: 200px;
        -o-animation: smallerWave 7.5s forwards infinite linear;
        -moz-animation: smalerWave 7.5s forwards infinite linear;
        -webkit-animation: smallerWave 7.5s forwards infinite linear;
        animation: smallerWave 7.5s forwards infinite linear;
    }
           @-moz-keyframes smallerWave{
          0% { left: 0; top: 10px; transform: rotateY(0deg);}
          10%{ top: -15px;}
          20%{ top: 10px;}
          30%{ top: -15px;}
          40%{ top: 10px;}
          49% {transform: rotateY(0deg) ;}
          50% {left: 100%; top: -15px; margin-left:-200px; transform: rotateY(180deg) ;}
          60%{ top: 10px;}
          70%{ top: -15px;}
          80%{ top: 10px;}
          90%{ top: -15px;}
          99% {transform: rotateY(180deg) ;}
          100% {left: 0; top: 10px; transform: rotateY(0deg) ;}
        }
        @-webkit-keyframes smallerWave{
          0% { left: 0; top: 10px; transform: rotateY(0deg);}
          10%{ top: -15px;}
          20%{ top: 10px;}
          30%{ top: -15px;}
          40%{ top: 10px;}
          49% {transform: rotateY(0deg) ;}
          50% {left: 100%; top: -15px; margin-left:-200px; transform: rotateY(180deg) ;}
          60%{ top: 10px;}
          70%{ top: -15px;}
          80%{ top: 10px;}
          90%{ top: -15px;}
          99% {transform: rotateY(180deg) ;}
          100% {left: 0; top: 10px; transform: rotateY(0deg) ;}
        }
        @-o-keyframes smallerWave{
          0% { left: 0; top: 10px; transform: rotateY(0deg);}
          10%{ top: -15px;}
          20%{ top: 10px;}
          30%{ top: -15px;}
          40%{ top: 10px;}
          49% {transform: rotateY(0deg) ;}
          50% {left: 100%; top: -15px; margin-left:-200px; transform: rotateY(180deg) ;}
          60%{ top: 10px;}
          70%{ top: -15px;}
          80%{ top: 10px;}
          90%{ top: -15px;}
          99% {transform: rotateY(180deg) ;}
          100% {left: 0; top: 10px; transform: rotateY(0deg) ;}
        }
        @keyframes smallerWave{
          0% { left: 0; top: 10px; transform: rotateY(0deg);}
          10%{ top: -15px;}
          20%{ top: 10px;}
          30%{ top: -15px;}
          40%{ top: 10px;}
          49% {transform: rotateY(0deg) ;}
          50% {left: 100%; top: -15px; margin-left:-200px; transform: rotateY(180deg) ;}
          60%{ top: 10px;}
          70%{ top: -15px;}
          80%{ top: 10px;}
          90%{ top: -15px;}
          99% {transform: rotateY(180deg) ;}
          100% {left: 0; top: 10px; transform: rotateY(0deg) ;}
        }
}

@media only screen and (max-width : 543px) {
    h1.employ {
        padding: 106px 20px;
    }
}

@media only screen and (max-width : 500px) {
    img.monster5.illustrations {
        top: -5px;
        width: 117px;
    }
    .giveBack .blueBox.finan {
        margin-top: 160px;
    }
    img.butterfly2.illustrations {
        display: none;
    }
    img.tatoo4.illustrations {
        width: 135px;
    }
    #fancybox-right span, #fancybox-right:hover span {
        right: 10px !important;
    }
    #fancybox-left span, #fancybox-left:hover span {
        left: 10px !important;
    }
    img.artsCenter {
        padding-top: 25px;
    }
    .parallax { 
        background-size: inherit;
        background-attachment: scroll;
    }
    .parallaxHome {
        background-image: url("/wp-content/themes/moonstone/img/MoonstoneAspot-OG2.jpg");
        background-attachment: scroll;
        top: 0;
    }
    #hero-vid {
        display: none;
    }
}

@media only screen and (max-width : 450px) {
    .vision, .staff, .boardMembers, .community, .financial, .enrollment, .curriculum, .experience, .connected, .giveBack, .faq, .testimonials, .parentPortal, .employment, .bioPages, .parentPortalPage, .forms {
        padding: 60px 0 185px;
    }
    .parentPortal {
        padding: 50px 0 175px;
    }
    .parentPortalPage {
        padding: 50px 0 75px;
    }
    img.monster3.illustrations {
        width: 35%;
    }
    .butterfly1Box, .monster4Box {
        display: none;
    }
    img.tatoo2.illustrations {
        width: 85px;
    }
    ul.visionUl {
        padding-left: 15px;
    }
    img.upsidedown {
        top: -65px;
    }
    img.upsidedown.moveMeBack {
        top: -65px;
    }
    img.heartportal.illustrations {
        width: 175px;
    }
    .galleria-image-nav-left {
        left: 0 !important;
    }
    .galleria-image-nav-right {
        right: 0 !important;
    }
}

@media only screen and (max-width : 423px) {
    h1.finan {
        padding: 106px 20px;
    }
    .createdBy.col-sm-6 {
        text-align: left;
        padding-left: 20px;
        width: 100%;
        float: none;
    }
    .copy.col-sm-6 {
        width: 100%;
        float: none;
    }
}

@media only screen and (max-width : 400px) {
    .home.container .row {
        padding-bottom: 140px;
    }
    .innerVision {
        padding: 0 5px;
    }
    .blueBox {
        padding: 30px;
        margin: 50px 0 20px;
    }
    .forms .CTAs, .CTAs {
        padding: 20px 0;
    }
    img.staffTiny {
        width: 90%;
    }
    .giveBack .blueBox {
        padding: 30px 20px;
    }
    .giveBack .blueBox.finan h5 {
        padding-bottom: 25px;
    }
    .upsidedownBox {
        padding-bottom:100px;
    }
    img.upsidedown {
        margin-left: auto;
        margin-right: auto;
        left: 0;
        right: 0;
    }
    a.homeCTA {
        width: 100%;
    }
    th.thHead, th:first-child, td:first-child {
        text-align: center;
    }
    .dayLife {
        padding: 35px;
    }
    .dayLife h1 {
        font-size: 35px;
    }
    .dayLife p {
        font-size: 20px;
    }
/*    img.illustrations {
        width: 60%;
    }*/
    .monster3Box {
        padding-top: 60px;
    }
    img.heartportal.illustrations {
        width: 150px;
    }
    .blueBox.app {
        margin-bottom: 50px;
    }
    img.heart {
        top: 725px;
    }
    img.homeFlowers, img.flowers {
        width: 200px;
        height: auto;
    }
}

@media only screen and (max-width : 386px) {
    h1.enrol {
        padding: 84px 20px;
    }
}
@media only screen and (max-width : 353px) {
    img.heart {
        display: none;
    }
}

@media only screen and (max-width : 346px) {
    h1.staycon {
        padding: 106px 20px;
    }
}

@media only screen and (max-width : 343px) {
    h1.bMem {
        padding: 106px 20px;
    }
}

@media only screen and (max-width : 334px) {
    h1.com {
        padding: 106px 20px;
    }
}

@media only screen and (max-width : 330px) {
    .monster4Box {
        display: block;
    }
    #fancybox-left span, #fancybox-left:hover span {
        left: 5px !important;
    }
    #fancybox-right span, #fancybox-right:hover span {
        right: 5px !important;
    }
    .curriculum a.blueBoxCTA {
        font-size: 17px;
    }
    img.homeFish {
        width: 150px; 
        -o-animation: tinyWave 7.5s forwards infinite linear;
        -moz-animation: tinyWave 7.5s forwards infinite linear;
        -webkit-animation: tinyWave 7.5s forwards infinite linear;
        animation: tinyWave 7.5s forwards infinite linear;   
    }
        @-moz-keyframes tinyWave{
          0% { left: 0; top: 10px; transform: rotateY(0deg);}
          10%{ top: -15px;}
          20%{ top: 10px;}
          30%{ top: -15px;}
          40%{ top: 10px;}
          49% {transform: rotateY(0deg) ;}
          50% {left: 100%; top: -15px; margin-left:-150px; transform: rotateY(180deg) ;}
          60%{ top: 10px;}
          70%{ top: -15px;}
          80%{ top: 10px;}
          90%{ top: -15px;}
          99% {transform: rotateY(180deg) ;}
          100% {left: 0; top: 10px; transform: rotateY(0deg) ;}
        }
        @-webkit-keyframes tinyWave{
          0% { left: 0; top: 10px; transform: rotateY(0deg);}
          10%{ top: -15px;}
          20%{ top: 10px;}
          30%{ top: -15px;}
          40%{ top: 10px;}
          49% {transform: rotateY(0deg) ;}
          50% {left: 100%; top: -15px; margin-left:-150px; transform: rotateY(180deg) ;}
          60%{ top: 10px;}
          70%{ top: -15px;}
          80%{ top: 10px;}
          90%{ top: -15px;}
          99% {transform: rotateY(180deg) ;}
          100% {left: 0; top: 10px; transform: rotateY(0deg) ;}
        }
        @-o-keyframes tinyWave{
          0% { left: 0; top: 10px; transform: rotateY(0deg);}
          10%{ top: -15px;}
          20%{ top: 10px;}
          30%{ top: -15px;}
          40%{ top: 10px;}
          49% {transform: rotateY(0deg) ;}
          50% {left: 100%; top: -15px; margin-left:-150px; transform: rotateY(180deg) ;}
          60%{ top: 10px;}
          70%{ top: -15px;}
          80%{ top: 10px;}
          90%{ top: -15px;}
          99% {transform: rotateY(180deg) ;}
          100% {left: 0; top: 10px; transform: rotateY(0deg) ;}
        }
        @keyframes tinyWave{
          0% { left: 0; top: 10px; transform: rotateY(0deg);}
          10%{ top: -15px;}
          20%{ top: 10px;}
          30%{ top: -15px;}
          40%{ top: 10px;}
          49% {transform: rotateY(0deg) ;}
          50% {left: 100%; top: -15px; margin-left:-150px; transform: rotateY(180deg) ;}
          60%{ top: 10px;}
          70%{ top: -15px;}
          80%{ top: 10px;}
          90%{ top: -15px;}
          99% {transform: rotateY(180deg) ;}
          100% {left: 0; top: 10px; transform: rotateY(0deg) ;}
        }
    img.heart {
        top: 860px;
    }
    img.tatoo5.illustrations {
        width: 65px;
    }
}
/*---------------------ie stuff----------------------------*/
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
     /* IE10+ CSS styles go here */
    .menu-nav-container {
        max-width: 988px;
    } 
}

@supports (-ms-accelerator:true) {
  /* IE Edge 12+ CSS styles go here */
    .menu-nav-container {
        max-width: 988px;
    } 
}
_:-ms-lang(x), .menu-nav-container { max-width:988px\9; }

_:-ms-lang(x), .menu-nav-container { max-width:988px; }
/*---------------------animations----------------------------*/
@-moz-keyframes myfirst {
    0%   {background:#d9332e;}
    8%   {background:#b82039;}
    16%  {background:#91184b;}
    25%   {background:#641c62;}
    33%   {background:#413288;}
    41%   {background:#2c65c2;}
    50%  {background:#228dd2;}
    58%   {background:#329e7d;}
    66%   {background:#4fab35;}
    75%   {background:#9eac23;}
    83%  {background:#e5a813;}
    91%   {background:#e9731d;}
    100%   {background:#ed3e27;}
}
@-webkit-keyframes myfirst {
    0%   {background:#d9332e;}
    8%   {background:#b82039;}
    16%  {background:#91184b;}
    25%   {background:#641c62;}
    33%   {background:#413288;}
    41%   {background:#2c65c2;}
    50%  {background:#228dd2;}
    58%   {background:#329e7d;}
    66%   {background:#4fab35;}
    75%   {background:#9eac23;}
    83%  {background:#e5a813;}
    91%   {background:#e9731d;}
    100%   {background:#ed3e27;}
}
@-o-keyframes myfirst {
    0%   {background:#d9332e;}
    8%   {background:#b82039;}
    16%  {background:#91184b;}
    25%   {background:#641c62;}
    33%   {background:#413288;}
    41%   {background:#2c65c2;}
    50%  {background:#228dd2;}
    58%   {background:#329e7d;}
    66%   {background:#4fab35;}
    75%   {background:#9eac23;}
    83%  {background:#e5a813;}
    91%   {background:#e9731d;}
    100%   {background:#ed3e27;}
}
@keyframes myfirst {
    0%   {background:#d9332e;}
    8%   {background:#b82039;}
    16%  {background:#91184b;}
    25%   {background:#641c62;}
    33%   {background:#413288;}
    41%   {background:#2c65c2;}
    50%  {background:#228dd2;}
    58%   {background:#329e7d;}
    66%   {background:#4fab35;}
    75%   {background:#9eac23;}
    83%  {background:#e5a813;}
    91%   {background:#e9731d;}
    100%   {background:#ed3e27;}
}

@-moz-keyframes babyWave{
  0% { top: 0px;}
  10%{ top: -25px;}
  20%{ top: 0px;}
  30%{ top: -25px;}
  40%{ top: 0px;}
  50%{ top: -25px;}
  60%{ top: 0px;}
  70%{ top: -25px;}
  80%{ top: 0px;}
  90%{ top: -25px;}
  100%{top: 0px;}
}
@-webkit-keyframes babyWave{
  0% { top: 0px;}
  10%{ top: -25px;}
  20%{ top: 0px;}
  30%{ top: -25px;}
  40%{ top: 0px;}
  50%{ top: -25px;}
  60%{ top: 0px;}
  70%{ top: -25px;}
  80%{ top: 0px;}
  90%{ top: -25px;}
  100%{top: 0px;}
}
@-o-keyframes babyWave{
  0% { top: 0px;}
  10%{ top: -25px;}
  20%{ top: 0px;}
  30%{ top: -25px;}
  40%{ top: 0px;}
  50%{ top: -25px;}
  60%{ top: 0px;}
  70%{ top: -25px;}
  80%{ top: 0px;}
  90%{ top: -25px;}
  100%{top: 0px;}
}
@keyframes babyWave{
  0% { top: 0px;}
  10%{ top: -25px;}
  20%{ top: 0px;}
  30%{ top: -25px;}
  40%{ top: 0px;}
  50%{ top: -25px;}
  60%{ top: 0px;}
  70%{ top: -25px;}
  80%{ top: 0px;}
  90%{ top: -25px;}
  100%{top: 0px;}
}

@-moz-keyframes wave{
  0% { left: 0; top: 10px; transform: rotateY(0deg);}
  10%{ top: -15px;}
  20%{ top: 10px;}
  30%{ top: -15px;}
  40%{ top: 10px;}
  49% {transform: rotateY(0deg) ;}
  50% {left: 100%; top: -15px; margin-left:-252px; transform: rotateY(180deg) ;}
  60%{ top: 10px;}
  70%{ top: -15px;}
  80%{ top: 10px;}
  90%{ top: -15px;}
  99% {transform: rotateY(180deg) ;}
  100% {left: 0; top: 10px; transform: rotateY(0deg) ;}
}
@-webkit-keyframes wave{
  0% { left: 0; top: 10px; transform: rotateY(0deg);}
  10%{ top: -15px;}
  20%{ top: 10px;}
  30%{ top: -15px;}
  40%{ top: 10px;}
  49% {transform: rotateY(0deg) ;}
  50% {left: 100%; top: -15px; margin-left:-252px; transform: rotateY(180deg) ;}
  60%{ top: 10px;}
  70%{ top: -15px;}
  80%{ top: 10px;}
  90%{ top: -15px;}
  99% {transform: rotateY(180deg) ;}
  100% {left: 0; top: 10px; transform: rotateY(0deg) ;}
}
@-o-keyframes wave{
  0% { left: 0; top: 10px; transform: rotateY(0deg);}
  10%{ top: -15px;}
  20%{ top: 10px;}
  30%{ top: -15px;}
  40%{ top: 10px;}
  49% {transform: rotateY(0deg) ;}
  50% {left: 100%; top: -15px; margin-left:-252px; transform: rotateY(180deg) ;}
  60%{ top: 10px;}
  70%{ top: -15px;}
  80%{ top: 10px;}
  90%{ top: -15px;}
  99% {transform: rotateY(180deg) ;}
  100% {left: 0; top: 10px; transform: rotateY(0deg) ;}
}
@keyframes wave{
  0% { left: 0; top: 10px; transform: rotateY(0deg);}
  10%{ top: -15px;}
  20%{ top: 10px;}
  30%{ top: -15px;}
  40%{ top: 10px;}
  49% {transform: rotateY(0deg) ;}
  50% {left: 100%; top: -15px; margin-left:-252px; transform: rotateY(180deg) ;}
  60%{ top: 10px;}
  70%{ top: -15px;}
  80%{ top: 10px;}
  90%{ top: -15px;}
  99% {transform: rotateY(180deg) ;}
  100% {left: 0; top: 10px; transform: rotateY(0deg) ;}
}

@-moz-keyframes fade {
  0% {opacity: 1;}
  100% {opacity: 0;}
}
@-webkit-keyframes fade {
  0% {opacity: 1;}
  100% {opacity: 0;}
}
@-o-keyframes fade {
  0% {opacity: 1;}
  100% {opacity: 0;}
}
@keyframes fade {
  0% {opacity: 1;}
  100% {opacity: 0;}
}

@-moz-keyframes walk{
  0% { left: 0; transform: rotateY(0deg);}
  49% {transform: rotateY(0deg);}
  50% {left: 100%; margin-left:-194px; transform: rotateY(180deg);}
  99% {transform: rotateY(180deg);}
  100% {left: 0; transform: rotateY(0deg);}
}
@-webkit-keyframes walk{
  0% { left: 0; transform: rotateY(0deg);}
  49% {transform: rotateY(0deg);}
  50% {left: 100%; margin-left:-194px; transform: rotateY(180deg);}
  99% {transform: rotateY(180deg);}
  100% {left: 0; transform: rotateY(0deg);}
}
@-o-keyframes walk{
  0% { left: 0; transform: rotateY(0deg);}
  49% {transform: rotateY(0deg);}
  50% {left: 100%; margin-left:-194px; transform: rotateY(180deg);}
  99% {transform: rotateY(180deg);}
  100% {left: 0; transform: rotateY(0deg);}
}
@keyframes walk{
  0% { left: 0; transform: rotateY(0deg);}
  49% {transform: rotateY(0deg);}
  50% {left: 100%; margin-left:-194px; transform: rotateY(180deg);}
  99% {transform: rotateY(180deg);}
  100% {left: 0; transform: rotateY(0deg);}
}

@-moz-keyframes walkBack{
  0% { left: 0; transform: rotateY(0deg);}
  49% {transform: rotateY(0deg);}
  50% {left: 90%; transform: rotateY(180deg);}
  99% {transform: rotateY(180deg);}
  100% {left: 0; transform: rotateY(0deg);}
}
@-webkit-keyframes walkBack{
  0% { left: 0; transform: rotateY(0deg);}
  49% {transform: rotateY(0deg);}
  50% {left: 90%; transform: rotateY(180deg);}
  99% {transform: rotateY(180deg);}
  100% {left: 0; transform: rotateY(0deg);}
}
@-o-keyframes walkBack{
  0% { left: 0; transform: rotateY(0deg);}
  49% {transform: rotateY(0deg);}
  50% {left: 90%; transform: rotateY(180deg);}
  99% {transform: rotateY(180deg);}
  100% {left: 0; transform: rotateY(0deg);}
}
@keyframes walkBack{
  0% { left: 0; transform: rotateY(0deg);}
  49% {transform: rotateY(0deg);}
  50% {left: 100%; margin-left:-137px; transform: rotateY(180deg);}
  99% {transform: rotateY(180deg);}
  100% {left: 0; transform: rotateY(0deg);}
}

@-moz-keyframes tinywalk {
  0%{ bottom: 0;}
  50%{ bottom: 5px;}
  100%{ bottom: 0;}
}
@-webkit-keyframes tinywalk {
  0%{ bottom: 0;}
  50%{ bottom: 5px;}
  100%{ bottom: 0;}
}
@-o-keyframes tinywalk {
  0%{ bottom: 0;}
  50%{ bottom: 5px;}
  100%{ bottom: 0;}
}
@keyframes tinywalk {
  0%{ bottom: 0;}
  50%{ bottom: 5px;}
  100%{ bottom: 0;}
}

@-moz-keyframes shakeSmall {
    0% {transform:rotate(5deg);}
    20% {transform:rotate(-5deg);}
    30% {transform:rotate(5deg);}
    40% {transform:rotate(-5deg);}
    50%, 100% {transform:rotate(5deg);}
}
@-webkit-keyframes shakeSmall {
    0% {transform:rotate(5deg);}
    20% {transform:rotate(-5deg);}
    30% {transform:rotate(5deg);}
    40% {transform:rotate(-5deg);}
    50%, 100% {transform:rotate(5deg);}
}
@-o-keyframes shakeSmall {
    0% {transform:rotate(5deg);}
    20% {transform:rotate(-5deg);}
    30% {transform:rotate(5deg);}
    40% {transform:rotate(-5deg);}
    50%, 100% {transform:rotate(5deg);}
}
@keyframes shakeSmall {
    0% {transform:rotate(5deg);}
    20% {transform:rotate(-5deg);}
    30% {transform:rotate(5deg);}
    40% {transform:rotate(-5deg);}
    50%, 100% {transform:rotate(5deg);}
}

@-moz-keyframes shimmy {
    0% {transform:rotate(5deg);}
    50% {transform:rotate(-5deg);}
    100% {transform:rotate(5deg);}
}
@-webkit-keyframes shimmy {
    0% {transform:rotate(5deg);}
    50% {transform:rotate(-5deg);}
    100% {transform:rotate(5deg);}
}
@-o-keyframes shimmy {
    0% {transform:rotate(5deg);}
    50% {transform:rotate(-5deg);}
    100% {transform:rotate(5deg);}
}
@keyframes shimmy {
    0% {transform:rotate(5deg);}
    50% {transform:rotate(-5deg);}
    100% {transform:rotate(5deg);}
}

@-moz-keyframes updown {
   0%, 20%{ transform: translateY(0);}
   85%, 95%{ transform: translateY(-180px);}
   100%{ transform: translateY(0);}
}
@-webkit-keyframes updown {
   0%, 20%{ transform: translateY(0);}
   85%, 95%{ transform: translateY(-180px);}
   100%{ transform: translateY(0);}
}
@-o-keyframes updown {
   0%, 20%{ transform: translateY(0);}
   85%, 95%{ transform: translateY(-180px);}
   100%{ transform: translateY(0);}
}
@keyframes updown {
   0%, 20%{ transform: translateY(0);}
   85%, 95%{ transform: translateY(-180px);}
   100%{ transform: translateY(0);}
}

@-moz-keyframes jumpUp {
    0% {bottom: -125px;}
    50% {bottom: -115px;}
    100% {bottom: -125px;}
}
@-webkit-keyframes jumpUp {
    0% {bottom: -125px;}
    50% {bottom: -115px;}
    100% {bottom: -125px;}
}
@-o-keyframes jumpUp {
    0% {bottom: -125px;}
    50% {bottom: -115px;}
    100% {bottom: -125px;}
}
@keyframes jumpUp {
    0% {bottom: -125px;}
    50% {bottom: -115px;}
    100% {bottom: -125px;}
}

@-moz-keyframes scaleMe {
    0% {transform: scale(1.0);}
    80% {transform: scale(1.2);}
}
@-webkit-keyframes scaleMe {
    0% {transform: scale(1.0);}
    80% {transform: scale(1.2);}
}
@-o-keyframes scaleMe {
    0% {transform: scale(1.0);}
    80% {transform: scale(1.2);}
}
@keyframes scaleMe {
    0% {transform: scale(1.0);}
    80% {transform: scale(1.2);}
}

@-moz-keyframes miniJump {
    from { transform:translateY(0);}
    30%, 100% {transform:translateY(10px);}
}
@-webkit-keyframes miniJump {
    from { transform:translateY(0);}
    30%, 100% {transform:translateY(10px);}
}
@-o-keyframes miniJump {
    from { transform:translateY(0);}
    30%, 100% {transform:translateY(10px);}
}
@keyframes miniJump {
    from { transform:translateY(0);}
    30%, 100% {transform:translateY(10px);}
}

@-moz-keyframes jump {
    from { transform:translateY(0);}
    30%, 100% {transform:translateY(20px);}
}
@-webkit-keyframes jump {
    from { transform:translateY(0);}
    30%, 100% {transform:translateY(20px);}
}
@-o-keyframes jump {
    from { transform:translateY(0);}
    30%, 100% {transform:translateY(20px);}
}
@keyframes jump {
    from { transform:translateY(0);}
    30%, 100% {transform:translateY(20px);}
}

@-moz-keyframes turnDive{
  0% { left: 0; transform: rotate(0deg);}
  49% {transform: rotate(0deg);}
  50% {left: 90%; transform: rotate(-135deg);}
  99% {transform: rotate(-135deg);}
  100% {left: 0; transform: rotate(0deg);}
}
@-webkit-keyframes turnDive{
  0% { left: 0; transform: rotateY(0deg);}
  49% {transform: rotateY(0deg);}
  50% {left: 90%; transform: rotateY(180deg);}
  99% {transform: rotateY(180deg);}
  100% {left: 0; transform: rotateY(0deg);}
}
@-o-keyframes turnDive{
  0% { left: 0; transform: rotateY(0deg);}
  49% {transform: rotateY(0deg);}
  50% {left: 90%; transform: rotateY(180deg);}
  99% {transform: rotateY(180deg);}
  100% {left: 0; transform: rotateY(0deg);}
}
@keyframes turnDive{
  0% { top: 130px; transform: rotate(0deg);}
  21%, 25% { top: 130px; transform: rotate(-140deg);}
  40% {top: 550px; transform: rotate(-140deg);}
  100% {top: 550px; transform: rotate(0deg);}
/*  80% {top: 130px; transform: rotate(0deg}
  100% {top: 130px; transform: rotate(0deg);}*/
}