* {
  box-sizing: border-box;
}

body, html {
  height: 100%;
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}

.logo {
	float: left;
	margin: 20px;
}
.hero-image {
  background-image: linear-gradient(rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.0)), url("images/bluebells.jpg");
  height: 100%;
  min-height: 400px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}
.topnav {
 position: fixed;
  width: 100%;
}

/* Style the links inside the navigation bar */
.topnav a {
  float: right;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 24px;
}

/* Change the color of links on hover */
.topnav a:hover, .topnav a:active {
  text-align: right;
  color: #663333;
}

.hero-text {
  text-align: center;
  position: absolute;
  top: 20%;
  left: 50%;
  transform: translate(-50%, 0%);
  color: white;
  z-index:1;
}
.sticky {
  position: fixed;
  top: -70px;   /* this is because when you scroll it jumps back down ..*/
 /* width: 100%;*/
}
.hero-text button {
  border: none;
  outline: 0;
  display: inline-block;
  padding: 10px 25px;
  color: black;
  background-color: #ddd;
  text-align: center;
  cursor: pointer;
}

.hero-text button:hover {
  background-color: #555;
  color: white;
}

.bubble {
	position: absolute;
	opacity: 0;  
   z-index:0;
 /*  width: 10;
   height: 10;*/
}
#mainBody {
/*	        float: left;*/
		position: relative;
		background:#E4EAD5;
		width: 100%; 
		display: flex;
  		flex-flow: row wrap;
		justify-content: space-around;
		 align-items: center;
}
	
	
.scroller {								/* this is the display area*/
		position: relative;
		width: 500px; 
		height: 400px;

    }
.scroller .innerScrollArea0,
.scroller .innerScrollArea1,
 .scroller .innerScrollArea2,
 .scroller .innerScrollArea3 {    /* within the scroller, there is an innerScrollArea in which all the cards (images, audio and video are arrangted side by side */
        overflow:hidden;        /* only the part in the display shows */
        position: absolute;       /*initially the cards are on top of each other (until placed randomly via coding */
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
		padding: 0;
        margin: 0;
    }
.scroller ul {
        padding: 0;
        margin: 0;
        position: relative;

    }
.scroller li {
        padding: 0;
        margin: 0;
        list-style-type: none;
        position: absolute;
    }
.sectionBox {
	position: relative;
	width: 500px;
	color: #807853;
	padding: 25px;
	font-family: 'Source Sans Pro', sans-serif;
  font-size: 16px;
}

	
.mainImage {

width: 450px;
height: 300px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
z-index:0;
}

a:link, a:visited {
  text-decoration: none;
}
a:hover, a:active {
  text-decoration: none;
  color: #663333;
}
/*.sectionBox img:hover {
	opacity: 0.5;
}*/
.overlay {
	position: absolute;
/*	object-fit:none;*/
	z-index: 1;
	width: 0;
	height: 0;
	
}

.textPart {
position: absolute;
width: 180px;
z-index:9;
right:60px;
bottom: 60px;
text-align:center;
background: rgba(230, 230, 230, 0.8);
padding:10px 25px;
border-radius: 10px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.sectionBox h1,
.textPart p {
  margin: 0;
  letter-spacing: 1px;
   font-size: 18px;
   font-weight: bold;
}

.sectionBox h1 {
 font-size: 32px;	
}
	
/* here's some code from the web */
@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro);
@import url(https://fonts.googleapis.com/css?family=Teko:700);
.snip1543 {
  background-color: #fff;
  color: #ffffff;
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 16px;
  margin: 50px;
  width: 450px;

  overflow: hidden;
  position: relative;
  text-align: left;
  width: 450px;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.footer {
  background-color: #663333;
  overflow: hidden;
  bottom: 0;
  width: 100%;
}

/* Style the footer and links inside the footer*/
.footer div {
  float: left;
  display: block;
  color: #807853;
  text-align: center;
  font-size: 20px;
}
.footer  a{

  text-decoration: none;
    color: #807853;
	margin-left: 25px;
	margin-right: 25px;
}

.footer  a:hover, a.active {
opacity: 0.5;
}

.footer .footRight {
	  padding: 10px;
	  float: right;
	text-align: right;
	padding-top: 10;
}

.footer .smllogo a{
	vertical-align: middle;
		margin-left: 10px;
	margin-right: 10px;
}

.footer .smllogo {
padding: 5px 0px ;
	text-align: left;
}