body, html {
    height: 100%;
	width: 100%;
   
}

body#abouthappiness{
background: url("hotairballoons.jpg") repeat center center fixed; 
  -webkit-background-size: cover;
  background-size: cover;
}   
body#happyfoods{
background: url("balloonright.jpeg") repeat center center fixed; 
  -webkit-background-size: cover;
  background-size: cover;
}   

body#workhappy{
  background: url("balloonfield.jpeg") repeat center center fixed; 
  -webkit-background-size: cover;
  background-size: cover;
}

body#activities{
  background: url("balloon4.jpeg") repeat center center fixed; 
  -webkit-background-size: cover;
  background-size: cover;
  background-position: bottom;
}

.parallax {
    background-image: url("hotairballons.jpg");
    height: 100%;
    background-attachment: fixed;
    background-position: top;
    background-repeat: no-repeat;
    background-size: cover;
      
}


.parallax2 {
    background-image: url("balloonfield.jpg");
    height: 100%; 
    background-attachment: fixed;
    background-position: top;
    background-repeat: no-repeat;
    background-size: cover;
}


.parallax3 {
    background-image: url("balloon4.jpg");
    height: 100%; 
    background-attachment: fixed;
    background-position: top;
    background-repeat: no-repeat;
    background-size: cover;
    min-width:100%;
}


.parallax4 {
    background-image: url('balloon5.jpeg');
    height: 100%; 
    background-attachment: fixed;
    background-position: top;
    background-repeat: no-repeat;
    background-size: cover;
}


.fullscreen-bg {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
    z-index: -100;
}

.fullscreen-bg__video {
    position: absolute;
    top: 0;
    left: 0;
    right:0;
    bottom:0;
    width: 100%;
    height: 100%;
}

div.a {
	width: 110px;
	height:230px;
	position:fixed;
}

div.b {
	width: 110px;
	height:230px;
	position:fixed;    
}

div.c {
	width: 110px;
	height:230px;
	position:fixed;
}

div.d {
	width: 180px;
	height:290px;
	position:fixed;
}

.text{
    background-color: rgba(248,248,255,.85);
    display: block;
    float: left;
    padding: 32px;
    margin-left: 25%;
    font-family: adobe-caslon-pro, serif;
    font-style: normal;
    font-size: 18px;
    color: #16174f;
    width: 50%;
}

.text2{
	font-family: proxima-nova, sans serif;
	font-size: 8px;
	
}

.block{
    float: left;
    width:25%;
    z-index: 1;
    position: fixed;
    top: 80px;
    left: 80px;
    font-size: 18px;
    background-color: rgb(248,248,255);
    padding: 15px 15px;    
    color: #16174f;
    opacity: .80;
}
@media screen and (max-width: 375px) {
    .block {text-align: center; width:50%;}
	.text{margin-left: 35px; width:75%; text-align: center;}

}

.block1{
    float: left;
    width:25%;
    z-index: 2;
    position: relative;
    top: 280px;
    left: 10px;
    padding: 10px 10px;
    background-color: rgba(248,248,255,.65);
    color: #16174f;
}

div.block1:hover {
  	border: 1px solid #777;

}

div.block1 img {
  	width: 100%;
  	display: block;
}

div.block1desc {
  	float: left;
  	padding: 15px;
  	text-align: center;
  	font-size: 1vw;
  	font-family: adobe-caslon-pro, serif;
}

@media screen and (max-width: 400px) {
    .block1{text-align: center; height: 14px; width:5%;}
}

#myDIV {
  	background-color: lightblue; 
  	color: #16174f;
 	 font-weight: 300;
 	 font-size: 1.2vw;
 	 border: 5px solid white;
 	 position: fixed;
 	 top: 50%;
 	 left: 50%;
	 transform: translate(-50%, -50%);
	 z-index: 2;
 	 width: 30%;
 	 padding: 20px;
 	 display: none;
 	 font-style: italic;
     font-size: 1.3vw;
}
 
slideshow-container {
	  max-width: 600px;
 	  position: relative;
 	  margin: auto;
}

.mySlides {
  	display: none;
}

img{
	vertical-align: middle;
	width: 100%;
	height: 50%;
	top: 25px;
}

.prev, .next {
  	cursor: pointer;
  	position: absolute;
  	top: 30%;
  	width: auto;
  	margin-top: -22px;
  	padding: 16px;
  	color: white;
  	font-weight: bold;
  	font-size: 40px;
  	transition: 0.6s ease;
  	border-radius: 0 3px 3px 0;
 	 user-select: none;
}

.next {
  	right: 0;
  	border-radius: 3px 0 0 3px;
}

.prev:hover, .next:hover {
 	 background-color: rgba(0,0,0,0.8);
}

/* Caption text */
.caption{
 	 color: #f2f2f2;
  	font-size: 2vw;
  	padding: 8px 12px;
  	position: absolute;
  	top: 45%;
  	width: 100%;
  	text-align: center;
  	background-color: rgba(248,248,255,.35);
  	color: #16174f;
  	font-family: adobe-caslon-pro, serif;

}

.numbertext {
 	 color: #f2f2f2;
 	 font-size: 2vw;
	  padding: 8px 12px;
	  position: absolute;
	  top: 5%;
	  right: 5%;
}

.dot {
  	cursor: pointer;
 	 height: 15px;
 	 width: 15px;
  	margin: 0 2px;
 	 background-color: #bbb;
 	 border-radius: 50%;
 	 display: inline-block;
 	 transition: background-color 0.6s ease;
}

.dotstyle{
     text-align: center;
     }
.active, .dot:hover {
  	background-color: #717171;
}

/* Fading animation */
.fade {
  	-webkit-animation-name: fade;
 	 -webkit-animation-duration: 1s;
 	 animation-name: fade;
 	 animation-duration: 1s;
}

@-webkit-keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

.topnav {
    background-color: #16174f;
    overflow: hidden;
    position: fixed;
    top:0px;
	left:0px;
    width:100%;
    Z-index: 1;
	font-family: proxima-nova, sans serif;
}

.topnav a {
    float: left;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
	margin-right: 16px;
    text-decoration: none;
    font-size: 14px;
    font-family: proxima-nova, sans serif;
}

.topnav a:hover {
    background-color: #ececec;
    color: black;
}

.topnav a.active {
    background-color: #9ad3de;
    color: black;
	padding-bottom:8px;
	padding-top: 8px;
	
}
.spacing{
padding-left: 16px;
padding-top:8px;
}