@import url('https://fonts.googleapis.com/css?family=Amatic+SC:400,700|Lato:100,300,400,700,900|Pinyon+Script');
/* font-family: 'Amatic SC', cursive;
font-family: 'Pinyon Script', cursive;
font-family: 'Lato', sans-serif;
*/

html, body{
    width:100%;
    height:100%;
    margin:0;
    font-family: 'Lato', sans-serif;
    font-size: .9em;
    letter-spacing: .04em;

}


main{
  width:100%;
  height:auto;
  
}

.hero{
  padding-top:80px;
  width:100vw;
  height: 92vh;
  background-image: url('img/parallax2.jpg');
  background-size: cover;
  background-attachment: fixed;
  background-position:top;
  overflow: hidden;
  top: 0;
  left: 0;
}

.outter-box{
  width:100%;
  text-align: center;
}

.box{
  width:60%;
  margin:-60px auto;
  background-color:silver;
  display:inline-block;
  padding:20px;
  font-family: 'Amatic SC', cursive;    
  color: rgb(206, 151, 13);

}

.box p{
  margin:100px;
  font-family: 'Amatic SC', cursive;
}

.inner-box{
  width:100%;
  padding:20px;
  height: auto;
  background-color:white;
}

.bottom, .g-hero{
  width:80%;
  margin:0 auto;
  height:auto;
  /* background-color:black; */
  padding:100px 0 80px;
  display:block;
}

.bottom2{
width:75%;
margin:0 auto;
height:auto;
/* background-color:black; */
padding:10px 0 100px;
display:block;
}

.bottom2 h2{
font-family: 'Amatic SC', cursive;
text-align:center;
padding-bottom: 50px;
font-size: 2.6em;
}

.g-hero h2{
font-family: 'Amatic SC', cursive;
text-align:center;
padding: 40px 0 50px;
font-size: 2.6em;
}

.g-hero h3{
font-family: 'Amatic SC', cursive;
}

#family-pricing{
  text-align:center;
}

.bottom2 p{
text-align:center;
}

.bottom h2{
  font-family: 'Amatic SC', cursive;
  padding-bottom: 50px;
  font-size: 2.6em;
}


.signature{
  font-family: 'Pinyon Script', cursive;
  text-align: right;

}

#storyTeller{
    float:right;
    border:1px solid black;
}

.signature span{
font-size: 1.6em;
}

.parallax{
  width:100%;
  height: 9em;
  background-image: url('img/kids3.jpeg');
  background-size: cover;
  background-attachment: fixed;
  background-position:top;
  display: none;
}

.parallax2{
width:100%;
height: 9em;
background-image: url('img/IMG_5097%20copyvld-1.jpg');
background-size: cover;
background-attachment: fixed;
background-position:top;
display:none;
}


footer{
  width:100%;
  height: 6em;
  border-top:1px solid black;
  display: inline-block;
  padding:20px 40px;
}

footer h6{
  color:black;
  float:left;
  padding:20px 0;
}


.social-media{
  width:100px;
  height: auto;
  float:right;
}

.fb{
  float:left;
  width:40px;
}

.instagram{
  float:right;
  width:40px;

}


@import url(https://fonts.googleapis.com/css?family=Unica+One);
@import url(https://fonts.googleapis.com/css?family=Vollkorn);

figure{
margin:0!important;
}
.snip1442 {
position: relative;
overflow: hidden;
width: 50%;
color: #404040;
text-align: left;
font-size: 16px;
line-height: 1.5em;
float:left;
}
.snip1442 * {
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
}
.snip1442 img {
max-width: 100%;
vertical-align: top;
}
.snip1442 figcaption {
background-color: #ffffff;
position: absolute;
top: 26px;
bottom: 26px;
left: 26px;
right: 26px;
padding: 22px;
opacity: 0;
-webkit-transform: scale(0.8);
transform: scale(0.8);
}
.snip1442 h3 {
font-family: 'Amatic SC', cursive;
text-align: center;
font-size: 2em;
color:rgb(94, 74, 18);
margin:20% 0 5px;
font-weight: 400;
text-transform: uppercase;
}
.snip1442 p {
margin: 0;
}
.snip1442:before,
.snip1442:after {
border: 1px solid rgba(255, 255, 255, 0.5);
content: "";
-webkit-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
.snip1442:before {
position: absolute;
top: 20px;
bottom: 20px;
left: 20px;
right: 20px;
}
.snip1442:after {
position: absolute;
top: 23px;
bottom: 23px;
left: 23px;
right: 23px;
}
.snip1442 a {
left: 0;
right: 0;
top: 0;
bottom: 0;
position: absolute;
z-index: 1;
}
.snip1442:hover figcaption,
.snip1442.hover figcaption {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1;
}

/*---------------------- EMAIL FORM BEGINS -----------------------*/
#success-message {
  opacity: 0;
}

.col-xs-12.col-sm-12.col-md-12.col-lg-12 {
  padding: 0 20% 0 20%;
}

.margin-top-25 {
  margin-top: 25px;
}

.form-title {
  padding: 25px;
  font-size: 30px;
  font-weight: 300;
  font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
}

.form-group{
  margin-bottom:0;
}

.form-group .form-control {
  -webkit-box-shadow: none;
  border-bottom: 1px;
  border-style: none none solid none;
  border-radius:0; 
  border-color: #000;
}

.form-group .form-control:focus {
	box-shadow: none;
  border-width: 0 0 2px 0;
  border-color: #000;
  
}

textarea {
  resize: none;
  height:5em!important;

}

button{
  font-family: 'Amatic SC', cursive!important;
  font-weight: bold;
  font-size:1.4em!important;
  width:280px;
  padding:10px 0;
  margin:40px;
  background-color:white!important;
  box-shadow: -1px 25px 38px -16px rgba(0,0,0,.9);
  transition: 2s!important;
  border: 1px solid whitesmoke;
  
}
 button:focus { outline:0 !important; }


button:hover {
  background-color: white;
  border: 1px solid ghostwhite;
  color: black;
  text-decoration: none;
  -webkit-box-shadow: 10px 13px 21px -6px rgba(255,255,255,1);
  -moz-box-shadow: 10px 13px 21px -6px rgba(255,255,255,1);
  box-shadow: 10px 13px 21px -6px rgba(255,255,255,1) /*-webkit-box-shadow: -1px 25px 38px -16px rgba(0,0,0,1); -moz-box-shadow: -1px 25px 38px -16px rgba(0,0,0,1); box-shadow: -1px 25px 38px -16px rgba(0,0,0,1);*/;
}

@media only screen and (max-width: 500px) {

  
.form-title {
    font-size: 20px;
}

footer{
height: auto;
padding-bottom:60px;
}

footer h6{
text-align:center;
float:none;
}

.social-media{
margin:0 auto;
float:none;

}
}


/*---------------------- EMAIL FORM ENDS -----------------------*/


.css_grid_gallery {
  display: grid;
  padding: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  grid-gap: 1rem;
}
.css_grid_gallery img {
  display: inline-block;
  width: 100%;
  box-shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.75);
  cursor: pointer;
}

#img_bg_overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.75);
  z-index: 3;
}

#modal_image {
  position: fixed;
  max-width: 70%;
  max-height: auto;
  top: 60%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%) scale(0.1);
          transform: translate(-50%, -50%) scale(0.1);
  box-shadow: 0 0.25rem 5rem rgba(0, 0, 0, 0.75);
  z-index: 5;
  opacity: 0;
  pointer-events: none;
  transition: all 400ms cubic-bezier(0.2, 0, 0, 1.25);
}
#modal_image.is_visible {
  opacity: 1;
  pointer-events: auto;
  -webkit-transform: translate(-50%, -50%) scale(1);
          transform: translate(-50%, -50%) scale(1);
}

#img_close_cta {
  position: fixed;
  top: 7.5rem;
  right: 3rem;
  font-size: 3rem;
  color: #FFFFFF;
  cursor: pointer;
  z-index: 7;
  -webkit-transform: scale(0.1);
          transform: scale(0.1);
  opacity: 0;
  pointer-events: none;
  transition: all 250ms ease;
}
#img_close_cta.is_visible {
  opacity: 1;
  pointer-events: auto;
  -webkit-transform: scale(1);
          transform: scale(1);
}

#previous_img_cta {
  position: fixed;
  top: 50%;
  left: 1rem;
  -webkit-transform: translateY(-50%) rotate(-45deg) scale(0.1);
          transform: translateY(-50%) rotate(-45deg) scale(0.1);
  border: 1rem solid #FFFFFF;
  border-right-color: transparent;
  border-bottom-color: transparent;
  z-index: 7;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: all 250ms ease;
}
#previous_img_cta.is_visible {
  opacity: 1;
  pointer-events: auto;
  -webkit-transform: translateY(-50%) rotate(-45deg) scale(1);
          transform: translateY(-50%) rotate(-45deg) scale(1);
}

#next_img_cta {
  position: fixed;
  top: 50%;
  right: 1rem;
  -webkit-transform: translateY(-50%) rotate(45deg) scale(0.1);
          transform: translateY(-50%) rotate(45deg) scale(0.1);
  border: 1rem solid #FFFFFF;
  border-left-color: transparent;
  border-bottom-color: transparent;
  z-index: 7;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: all 250ms ease;
}
#next_img_cta.is_visible {
  opacity: 1;
  pointer-events: auto;
  -webkit-transform: translateY(-50%) rotate(45deg) scale(1);
          transform: translateY(-50%) rotate(45deg) scale(1);
}


@media only screen and (max-width: 696px){


.snip1442{
width:100%;
margin-top:20px !important;
}
  
}




/*---------------------- MOBILE NAVIGATION BEGINS -----------------------*/
.mobile-logo{
  width:310px;
  float:left;
}

.mobile-logo img{
  float:left;
}
.mobile-logo h1{
  font-size:1em;
  /* float: right; */
  font-family: 'Amatic SC', cursive;
  padding: 20px 60px;
  color:black!important;
}

header#nav {
  position: fixed;
  top: 0;
  z-index: 100;
  width: 100%;
  background-color:white;
  height:auto; 
  display: none;
}
.container {
  text-align: left;
  display: inline-block;
  height: auto;
  position: relative; 
  width:100%!important;
  text-align: center;
}
header#nav #menuWrapper {
  height: auto;
  display:inline-block;
}
header#nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: inline-block;
}
header#nav ul > li {
  position: relative;
  display: inline-block;
  margin: 0;
  padding: 0 15px;
  font-weight:600;
}
header#nav ul > li > a {
  display: block;
  color:black;
  font-weight: 400;
  font-size: 1.1em;
  letter-spacing: .2em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  -webkit-transition: all .3s ease;
  -moz-transition: all .3s ease;
  -ms-transition: all .3s ease;
  -o-transition: all .3s ease;
  transition: all .3s ease;
  line-height:43px;
  font-family: 'Amatic SC', cursive;

}
header#nav .container ul > li > ul {
  position: absolute;
  left: 10px;
  opacity: 0;
  min-width: 600px;
  margin: 0;
  background-color:white;
  pointer-events: none;
/* Adding a transition timing on here will cause mouse out bugs after hover! */
}

header#nav .container ul > li > ul > li {
  padding: 0;
  float: left;
  display: block;
  width:100%;
}
header#nav .container ul > li > ul > li > a {
  border-bottom: 0;
  display: block;
  padding: 0px 5px 0 5px;
  color: #666;
  width: 100%; 
  text-transform:none;
}
/* Fade = no need for animations - just timing effects... */
.ddFade {
 -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -ms-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}
.ddFadeFast {
 -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.ddFadeSlow {
 -webkit-transition: all 1s ease-in-out;
  -moz-transition: all 1s ease-in-out;
  -ms-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
}

/* General Animation settings */
header#nav .container ul > li > ul {
opacity:0;
display:block;
perspective:1000px;
min-width:inherit;
text-align: left;
}
header#nav .container ul > li > ul.dropin li {
opacity:1;
display:block;
width:100%;
background:#333;
padding:3px;
display:block;
float: left;
}
li:hover ul.hov {
animation-duration: 0.3s;
animation-delay:0.3s;
}
li:hover ul.hov li {
  animation-direction: normal;
  animation-iteration-count:1;
  animation-timing-function : ease-in-out;
  background:#fff;
  animation-fill-mode: forwards;
}
/* Drop Up */
header#nav .container ul > li > ul.dropup li {opacity:0; transform: translate(0,200px);}
li:hover .dropup li {animation-name: dropup;}
@keyframes dropup {
  0%   {opacity:0; transform: translate(0,200px);}
  100% {opacity:1; transform: translate(0,0);}
}
@-webkit-keyframes dropup {
  0%   {opacity:0; transform: translate(0,200px); }
  100% {opacity:1; transform: translate(0,0);}
}
li:hover ul.dropup.hov li:nth-child(1) {
animation-duration: 0.3s;
animation-delay 0.3s;

}
li:hover ul.dropup.hov li:nth-child(2) {
animation-duration: 0.4s;
animation-delay 0.5s;
}
li:hover ul.dropup.hov li:nth-child(3) {
animation-duration: 0.5s;
animation-delay 1s;
}
li:hover ul.dropup.hov li:nth-child(4) {
animation-duration:0.6s;
animation-delay 1.5s;
}
li:hover ul.dropup.hov li:nth-child(5) {
animation-duration:0.7s;
animation-delay 2s;
}
#menuWrapper .dropup li a:hover{
color: white;
}
/* sort all the overing, going on... */
header#nav ul li:hover a { 
color: #ccc;

}
header#nav .container ul > li:hover ul {
  opacity:1;
  top:24px;
  pointer-events: auto;
}
header#nav .container ul > li > ul .ico:hover, 
header#nav .container ul > li > ul a:hover { /*background-color: rgba(0,0,0,.5);*/ background-color:#ccc; }
header#nav .container ul > li:hover ul { top :45px; }

/* A non image based mobile menu and close button */
#hamburger {
  display: none;
  width: 25px;
  height: 24px;
  position: fixed;
  right: 15px;
  top: 15px;
  cursor: pointer;
}
#hamburger > span {
  background: #fff;
  display: block;
  width: 100%;
  height: 3px;
  position: relative;
  margin-top: 3px;
  color: #666;
    -webkit-transition:all .3s ease;
  -moz-transition:all .3s ease;
  -ms-transition:all .3s ease;
  -o-transition:all .3s ease;
  transition:all .3s ease;
}
#close {
  position: fixed;
  top: 10px;
  right: 13px;
  width: 30px;
  height: 30px;
  z-index: 1200;
  display: none;
  cursor: pointer;
}
#close > span, #close > span::after {
  content: "";
  display: block;
  width: 4px;
  height: 100%;
  background: black;
  position: absolute;
  left: 50%;
  margin-left: -3px;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}
#close > span::after {
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);
}
#close:hover > span,
#close:hover > span::after { background: #ccc; }
#hamburger:hover > span,
#hamburger:hover > span::after,
#hamburger:hover > span::before {
background: rgba(250,250,250,0.5);
}


nav {
width: 100%;
height:70px;
background-color:white;
position: relative;
transition-duration: 0.5s;
transition-timing-function: swing;
overflow: hidden;
}
nav.open {
height: 100%;}

nav ul {
clear:both;
padding-top: 10px;
padding-inline-start: 0px;

}
nav ul li {
list-style: none;
text-align: center;
}
nav ul li a {
padding: 20px 0;
display: inline-block;
text-decoration: none;
color: #666;
font-family: 'Amatic SC', cursive;
font-weight: bold;
font-size:1.3em;
}
nav ul li a:hover{
color:goldenrod;
font-weight: 400;
}


#monav{
position: fixed;
z-index: 1;

}

#monav h1{
   font-weight: 600;
  letter-spacing:.2em; 
  color:silver;
}

#monav h1 span{
  color: #666;
}

#monav a{
text-decoration: none;
}

.navToggle {
position: absolute;
width: 60px;
height: 60px;
top: 6px;
right: 2px;
transition-duration: 0.5s;
}
.navToggle .icon {
transition-duration: 0.25s;
position: absolute;
width: 30px;
height: 2px;
top: 30px;
left: 15px;
background-color: #666;
}
.navToggle .icon:before,
.navToggle .icon:after {
transition-duration: 0.25s;
position: absolute;
width: 30px;
height: 2px;
background-color: #666;
content: "";
}
.navToggle .icon:before {
top: -7px;
left: 0;
}
.navToggle .icon:after {
top: 7px;
left: 0;
}
.navToggle:hover {
cursor: pointer;
}
.navToggle:hover .icon:before {
top: -10px;
}
.navToggle:hover .icon:after {
top: 10px;
}
.navToggle.open {
transition-duration: 1s;
transform: rotate(180deg);
-webkit-transform: rotate(180deg);
}
.navToggle.open .icon {
transition-duration: 0.5s;
background-color: transparent;
}
.navToggle.open .icon:before {
transition-duration: 0.5s;
top: 0;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
}
.navToggle.open .icon:after {
transition-duration: 0.5s;
top: 0;
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
}

@media (min-width: 700px){
.container {
    max-width:100%!important;
}
}
@media only screen and (max-width: 700px) {

  header#nav{
  display: none;
  }

}

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

  #monav{
  display: none;
  }

  header#nav{
  display: inline-block;
  }

  .parallax, .parallax2{
    display:block;
  }

  .bottom2{
    width:55%;
    padding:100px 0 100px;
    }

}




/*---------------------- MOBILE NAVIGATION ENDS -----------------------*/