@charset "utf-8";
/* CSS Document */
#images {
    width: 800px;       /* both were 500px */
    height: 800px;         /* both were 500px */
    overflow: hidden;
    position: relative;

    margin: 20px auto;
}
#images img {
    width: 800px;      /* both were 500px */
    height: 800px;       /* both were 500px */
                       
    position: absolute;
    top: 0;
    left: 0px; /* Controls how far off to the side the picture is and can slide into the middle ( 0px ) */
    z-index: 1;
    opacity: 100;

    transition: all linear 500ms;
    -o-transition: all linear 500ms;
    -moz-transition: all linear 500ms;
    -webkit-transition: all linear 500ms;
}
#images img:target {
    left: 0;
    z-index: 9;/* this # pulls each picture out with or without overlap from other pictures */
    opacity: 10;
}
#images img:first-child {
    left: 0;/* this # tells you if the 1st picture slides out from other pictures or shows up in the middle right away */
}
#slider a {
    text-decoration: none;
    background: #E3F1FA;
    border: 1px solid #C6E4F2;
    padding: 4px 6px;
    color: #222;
}
#slider a:hover {
    background: #C6E4F2;
}

/* This is the configuration of pencil Drawings slider */

#drawings {
    width: 500px;
    height: 500px;
    overflow: hidden;
    position: relative;

    margin: 20px auto;
}
#drawings img {
    width: 500px;
    height: 500px;

    position: absolute;
    top: 0;
    left: 0px; /* Controls how far off to the side the picture is and can slide into the middle ( 0px ) */
    z-index: 1;
    opacity: 100;

    transition: all linear 500ms;
    -o-transition: all linear 500ms;
    -moz-transition: all linear 500ms;
    -webkit-transition: all linear 500ms;
}
#drawings img:target {
    left: 0;
    z-index: 9;/* this # pulls each picture out with or without overlap from other pictures */
    opacity: 10;
}
#drawings img:first-child {
    left: 0;/* this # tells you if the 1st picture slides out from other pictures or shows up in the middle right away */
}
#slider2 a {
    text-decoration: none;
    background: #E3F1FA;
    border: 1px solid #C6E4F2;
    padding: 4px 6px;
    color: #222;
}
#slider2 a:hover {
    background: #C6E4F2;
}

/* This is for storyBoards section */

#storyImages1 {
    width: 650px;
    height: 503px;
    overflow: hidden;
    position: relative;
    margin: 20px auto;
}
#storyImages1 img {
    width: 650px;
    height: 503px;
    position: absolute;
    top: 0;
    left: 0px; /* Controls how far off to the side the picture is and can slide into the middle ( 0px ) */
    z-index: 1;
    opacity: 100;

    transition: all linear 500ms;
    -o-transition: all linear 500ms;
    -moz-transition: all linear 500ms;
    -webkit-transition: all linear 500ms;
}
#storyImages1 img:target {
    left: 0;
    z-index: 9;/* this # pulls each picture out with or without overlap from other pictures */
    opacity: 10;
}
#storyImages1 img:first-child {
    left: 0;/* this # tells you if the 1st picture slides out from other pictures or shows up in the middle right away */

}
#storySlider1 a {
    text-decoration: none;
    background: #E3F1FA;
    border: 1px solid #C6E4F2;
    padding: 4px 6px;
    color: #222;
}
#storySlider1 a:hover {
    background: #C6E4F2;
}
/* this is the second story boards section */

#storyImages2 {
    width: 650px;
    height: 503px;
    overflow: hidden;
    position: relative;
    margin: 20px auto;
}
#storyImages2 img {
    width: 650px;
    height: 503px;
    position: absolute;
    top: 0;
    left: 0px; /* Controls how far off to the side the picture is and can slide into the middle ( 0px ) */
    z-index: 1;
    opacity: 100;

    transition: all linear 500ms;
    -o-transition: all linear 500ms;
    -moz-transition: all linear 500ms;
    -webkit-transition: all linear 500ms;
}
#storyImages2 img:target {
    left: 0;
    z-index: 9;/* this # pulls each picture out with or without overlap from other pictures */
    opacity: 10;
}
#storyImages2 img:first-child {
    left: 0;/* this # tells you if the 1st picture slides out from other pictures or shows up in the middle right away */

}
#storySlider2 a {
    text-decoration: none;
    background: #E3F1FA;
    border: 1px solid #C6E4F2;
    padding: 4px 6px;
    color: #222;
}
#storySlider2 a:hover {
    background: #C6E4F2;
}