@charset "utf-8";
/* CSS Document*/
/*Define the body element's color*/
body
{
    background: #FFFFFF;
}



h1{
    position: absolute;
    left: 40px;
    top: 20px;
    font-size: 20px;
    font-family: "Times New Roman", Times, serif;
}


#freeman_and_jessie_image {
    border-style:solid;
    border-width:1px;
	position: absolute;
    left: 40px;
    top: 120px;
	background: #FFFFFF;
    color: #000000
}

   
#freeman_image {
    border-style:solid;
    border-width:1px;
	position: absolute;
    left: 535px;
    top: 150px;
	background: #FFFFFF;
    color: #000000
}



#willow_image {
    border-style:solid;
    border-width:1px;
	position: absolute;
    left: 880px;
    top: 320px;
	background: #FFFFFF;
    color: #000000
}


#south_africa_movie_header {
   position: absolute;
   left: 180px;
   top: 630px;
   width: 640px;
   height: 480px;
}


#south_africa_movie {
   position: absolute;
   left: 210px;
   top: 730px;
}


#south_africa_movie_footer {
   position: relative;
   left: 340px;
   top: -60px;
   width: 640px;
   height: 20px;
}

#south_africa_light_box {
   position: absolute;
   left: 130px;
   top: 1270px;
   width: 800px;
   border-style: solid;
   border-width: 1px;
}


div.scroll_images {
    background-color: #333;
    overflow: auto;
    white-space: nowrap;
}

div.scroll_images a {
    display: inline-block;
    color: white;
    text-align: center;
    padding: 14px;
    text-decoration: none;
}


div.scroll_images a:hover {
    background-color: #777;
}




/* rollover css */

.image_container {
 position: relative;
}

.image {
  opacity: 1;
  display: inline;
  transition: .5s ease;
  backface-visibility: hidden;
}


.image_container:hover .image {
  opacity: 0.3;
}

.image_container:hover .middle {
  opacity: 1;
}