/*BOTH CURTAIN IMAGES CLASS*/
img.curtain {
   
/* so jQuery doesn't keep aspect ratio when animating the width '*/
    z-index:99
/* to show it on top of the content*/
}

/*LEFT CURTAIN IMAGE CLASS*/
img.curtainLeft {
    position:absolute;
/*absolute positioning is important*/
    left:0;
/*position it on left side of the container*/
    width:50%;
   
height:2300px
}

/*RIGHT CURTAIN IMAGE CLASS*/
img.curtainRight {
    position:absolute;
/*absolute positioning is important*/
    right:0;
/*position it on the right side of the container*/
    width:50%;
    height:2300px;
}

/*THE CLASS OF THE WRAPPING DIV (THAT WRAPS EVERYTHING)*/
.curtain_wrapper {
    width:100%; /* same as width of both the images summed */
    height:952px !important; 
    position:relative; /*relative position so we can absolutely position the child elements*/
    overflow:hidden; /* hidden = hide everything out of boundaries (in this case for the description div)*/
	overflow-x: scroll;
    background:transparent; /* just styling*/
	
}

/*THE TEXT DIV CLASS (BEHIND THE CURTAINS)*/
.content {
    position:relative;
/*so we can center it*/
    width:300px;
/*curtain_wrapper width - shrinked image width (50px is image when shrinked)*/
    margin:0 auto;
/*center it*/
    display:none
/*we don't want our users to see the content while the curtain images are loading*/
}

/*DESCRIPTION DIV CLASS (THE TEXT ON TOP LEFT SIDE IN THE DEMO)*/
.description {
    position:absolute;
/*absolute position is important*/
    top:0;
/*position it on top of the curtain_wrapper*/
    z-index:100;
/*show it on top of the curtain (remember that they have z-index of 99)*/
/*styling below*/
    padding:5px;
    text-align:center;
    font-size:15px;
    background:#eee;
    border:1px solid #ccc;
    border-left:0;
    border-top:0;
    color:#000
}