@charset "utf-8"; /* CSS Document */
/*------------------------------------------ @AllElements -------------------------------- */
* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    border: none;
}

a {
    text-decoration: none;
    color: inherit;
}

em {
    font-style: italic;
}

strong {
    font-weight: bold;
}

img {
    border: none;
}

/*------------------------------------------ @HtmlBody -------------------------------- */
html,body {
    background: #fffaed;
    background-repeat: no-repeat;
    color: #333;
    height: 100%;
    width: 100%;
    font-family: "Trebuchet MS", sans-serif;
    font-size: 1.08em;
    padding: 0;
    margin: 0;
}

/*------------------------------------------ @TitleElements -------------------------------- */
.robTitle {
    min-width: 600px;
    max-width: 1600px;
    width: 85%;
    max-height: 200px;
    height: 25%;
    position: absolute;
    top: 75%;
    left: 10%;
    background: url("../images/svgs/robKooTitleAngle-63.svg"), #333;
    z-index: 200;
    border: #fffaee solid 8px;

    -webkit-background-size: 90%;
    -moz-background-size: 90%;
    background-size: 90%;
    background-repeat: no-repeat;
    background-position: center center;

    -webkit-box-shadow: 0 6px 15px rgba(0,0,0,.1);
    -moz-box-shadow: 0 6px 15px rgba(0,0,0,.1);
    box-shadow: 0 6px 15px rgba(0,0,0,.1);
    -webkit-transform: rotate(-14deg);
    -moz-transform: rotate(-14deg);
    -o-transform: rotate(-14deg);
    -ms-transform: rotate(-14deg);
    transform: rotate(-14deg);
}

.textTitle {
    min-width: 140px;
    max-width: 600px;
    width: 45%;
    max-height: 140px;
    height: 15%;
    position: absolute;
    top: -3%;
    right: 8%;
    border: #fffaee solid 8px;
    z-index: 200;

    -webkit-transform: rotate(14deg);
    -moz-transform: rotate(14deg);
    -o-transform: rotate(14deg);
    -ms-transform: rotate(14deg);
    transform: rotate(14deg);

    -webkit-box-shadow: 0 6px 15px rgba(0,0,0,.1);
    -moz-box-shadow: 0 6px 15px rgba(0,0,0,.1);
    box-shadow: 0 6px 15px rgba(0,0,0,.1);
}

.textTitleLeft {
    top: -3%;
    left: 8%;

    -webkit-box-shadow: 0 6px 15px rgba(0,0,0,.1);
    -moz-box-shadow: 0 6px 15px rgba(0,0,0,.1);
    box-shadow: 0 6px 15px rgba(0,0,0,.1);

    -webkit-transform: rotate(-14deg);
    -moz-transform: rotate(-14deg);
    -o-transform: rotate(-14deg);
    -ms-transform: rotate(-14deg);
    transform: rotate(-14deg);
}

.essayText {
    background: url("../images/svgs/essayText-64.svg"), #333;

    -webkit-background-size: 90%;
    -moz-background-size: 90%;
    background-size: 90%;
    background-repeat: no-repeat;
    background-position: center center;
    top: -138px;
}

.photoText {
    background: url("../images/svgs/photosText-67.svg"), #333;

    -webkit-background-size: 90%;
    -moz-background-size: 90%;
    background-size: 90%;
    background-repeat: no-repeat;
    background-position: center center;
    top: -138px;
}

.articleText {
    background: url("../images/svgs/articleText-68.svg"), #333;

    -webkit-background-size: 90%;
    -moz-background-size: 90%;
    background-size: 90%;
    background-repeat: no-repeat;
    background-position: center center;
    top: -138px;
    right: 6%;
}

.processText {
    background: url("../images/svgs/processText-66.svg"), #333;

    -webkit-background-size: 90%;
    -moz-background-size: 90%;
    background-size: 90%;
    background-repeat: no-repeat;
    background-position: center center;
    top: -138px;
}

.robTitleBottom {
    width: 100%;
    height: 7.5%;
    background: #fffaee;
    position: absolute;
    bottom: 0;
    z-index: 200;
}

.mediaTitle {
    height: 100px;
    width: 220px;
    position: absolute;
    z-index: 200;
    left: 50%;
    top: 54px;
    margin-left: 120px;
    background: url("../images/svgs/mediaTitle-69.svg");
    background-repeat: no-repeat;

    -webkit-background-size: 220px;
    -moz-background-size: 220px;
    background-size: 220px;
    background-position: left center;
}


/*------------------------------------------ @SpinButtons -------------------------------- */
.button {
    width: 220px;
    margin: 0 auto;
    height: 220px;

    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    -ms-transition: all 0.2s ease;
    transition: all 0.2s ease;
    margin-top: 4%;
    margin-bottom: 2%;

    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -o-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
}

.mediaButton {
    background: url("../images/svgs/videoButton-22.svg");
    background-repeat: no-repeat;

    -webkit-background-size: 200px;
    -moz-background-size: 200px;
    background-size: 200px;
    background-position: left center;
    margin-top: 0;
}

.essayButton {
    background: url("../images/svgs/essayButton-24.svg");
    background-repeat: no-repeat;

    -webkit-background-size: 200px;
    -moz-background-size: 200px;
    background-size: 200px;
    background-position: left center;
}

.photoButton {
    background: url("../images/svgs/photosButton-25.svg");
    background-repeat: no-repeat;

    -webkit-background-size: 200px;
    -moz-background-size: 200px;
    background-size: 200px;
    background-position: left center;
}

.articleButton {
    background: url("../images/svgs/articleButton-26.svg");
    background-repeat: no-repeat;

    -webkit-background-size: 200px;
    -moz-background-size: 200px;
    background-size: 200px;
    background-position: left center;
}

.processButton {
    background: url("../images/svgs/processButton-27.svg");
    background-repeat: no-repeat;

    -webkit-background-size: 200px;
    -moz-background-size: 200px;
    background-size: 200px;
    background-position: left center;
}


/*------------------------------------------ @ContentCss -------------------------------- */
.contentPlacement {
    position: relative;
    margin: 0 auto;
    width: 90%;
    height: auto;
    max-width: 1600px;
}

.fullWidthContainer {
    position: relative;
    width: 100%;
    height: 100%;
}

.slide {
    min-width: 820px;
    width: 100%;
    height: auto;
    min-height: 100%;
    background-color: rgb(255,250,239);
}

.slide1 {
    -webkit-background-size: 100% 159px;
    -moz-background-size: 100% 159px;
    background-size: 100% 159px;
    background: url("../images/webreadyBackdrop.jpg");
    background-position: left 200px;
}

.slideParallax {
    position: absolute;
    top: 0;
    left: 0;
    -webkit-background-size: 100% 159px;
    -moz-background-size: 100% 159px;
    background-size: 100% 159px;
    background: url("../images/webReadyRobCutOut.png");
    background-position: left 200px;
}

.slideSep {
    height: 250px;
    min-height: 0;
}

#content3,#content4,#content5,#content6,#content7 {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    opacity: 0;
    display: none;
    left: -2000px;
}


/*------------------------------------------ @TextStyles -------------------------------- */
.essay {
    line-height: 1.7em;
    margin: 0 auto;
    width: 100%;
    max-width: 1200px;
    text-align: justify;
    position: relative;
    color: #333;

    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -o-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
    clear: both;
    text-shadow: 0 1px 1px rgba(255,255,255,.7);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    opacity: 1;
}

.indent {
    text-indent: 2.3em;
}

.boldLetter {
    font-size: 130%;
    font-weight: bold;
    padding-right: 1px;
}

h1 {
    text-align: center;
    font-weight: bold;
    margin-bottom: 25px;
    font-size: 118%;
    text-transform: capitalize;
}

.essay.selection {
    padding-top: 30px;
    padding-left: 70px;
    padding-right: 70px;
    width: 90%;
    border-top: 4px solid #333;
}

.smallCap
{
    font-variant: small-caps;
    font-size: 120%;
}

.articleNumber {
    position: absolute;
    margin-left: -5px;
    top: -37px;
    text-align: center;
    font-weight: bold;
    color: #f9ad30;
    font-family: 'helvetica',sans-serif;
    opacity: .5;
}

.aNum1
{
    left:12.5%;
}

.aNum2
{
    left:37.5%;
}

.aNum3
{
    left:62.5%;
}

.aNum4
{
    left:87.5%;
}

/*------------------------------------------ @Arrows -------------------------------- */
.arrow {
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: solid #333 10px;
    margin: 0 auto;
    margin-top: 76px;
}

.arrow.black,.essay.selection.black {
    border-bottom-color: #333333;
    border-top-color: #333333;
}

.arrow.transparent,.essay.selection.transparent {
    border-bottom-color: transparent;
    border-top-color: transparent;
    padding-top: 0;
}

.arrow.red,.essay.selection.red {
    border-bottom-color: #ee3f2e;
    border-top-color: #ee3f2e;
}

.arrow.green,.essay.selection.green {
    border-bottom-color: #87c433;
    border-top-color: #87c433;
}

.arrow.yellow,.essay.selection.yellow {
    border-bottom-color: #ffe65b;
    border-top-color: #ffe65b;
}

.arrow.orange,.essay.selection.orange {
    border-bottom-color: #f9ad30;
    border-top-color: #f9ad30;
}

.arrowSide {
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 10px solid #333;
    border-right: transparent;
    position: fixed;
    z-index: 1;
    left: 65px;
    margin-top: 2px;
}

.arrowUp {
    border-bottom: 10px solid #333;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    position: absolute;
    z-index: 1;
    left: 17px;
    top: 50px;
}

.arrowDown {
    border-top: 10px solid #333;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    position: absolute;
    z-index: 1;
    left: 17px;
    top: -14px;
}

.arrowSide.red {
    border-left-color: #ee3f2e;
}

.arrowSide.green {
    border-left-color: #87c433;
}

.arrowSide.yellow {
    border-left-color: #ffe65b;
}

.arrowSide.orange {
    border-left-color: #f9ad30;
}

.arrowSide.white {
    border-left-color: #fffbca;
}

.arrowHolderHolderLol {
    width: 100px;
    margin: 0 auto;
}

.arrowHolder {
    height: 31px;
    font-weight: bold;
    font-size: 140%;
    font-style: italic;
    cursor: pointer;
    display: block;
    width: 100px;
    float: left;

    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}

.arrowHolder.orangeArrow:hover {
    color: rgb(248, 183, 88);
    background-position: left -62px;
}

.arrowHolder.yellowArrow:hover {
    color: #ffe84d;
    background-position: left -31px;
}


/*----------------------------------------------------- @Hightlights ---------- */
span.highlight_Paper {
    background-color: rgb(247,233,147);
    background-color: rgba(247,233,147,.5);
    font-style: italic;
}

span.highlight_Dark {
    background-color: #333;
    color: #fffaee;
    padding: 2px 4px;
    border-radius: 3px;
    font-weight: bold;
    cursor: pointer;
    margin-right: 10px;
    line-height: 2em;
    text-shadow: none;
}


/*----------------------------------------------------- @ColoredLinks ---------- */
a.link {
    font-weight: bold;
    color: inherit;
    text-decoration: none;
    border-bottom: 2px solid #333;

    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    -ms-transition: all 0.2s ease;
    transition: all 0.2s ease;
}

a.link.orange:hover {
    color: #f7ac40;
    border: none;
}

a.link.yellow:hover {
    color: #ffe566;
    border: none;
}

a.link.green:hover {
    color: #87c433;
    border: none;
}

a.link.red:hover {
    color: #ee3f2e;
    border: none;
}


/*----------------------------------------------------- @Selections@ScrollBar ---------- */
::selection {
    background: transparent;
    text-shadow: none;
}

::-moz-selection {
    background: transparent;
    text-shadow: none;
}

/*-------------------*/
.slide1 *::selection {
    background: #ee3f2e;
}

.slide1 *::-moz-selection {
    background: #ee3f2e;
}

/*-------------------*/
#slide3 *::selection {
    background: #ee3f2e;
    color: #fffaee;
}

#slide3 *::-moz-selection {
    background: #ee3f2e;
    color: #fffaee;
}

/*-------------------*/
#slide4 *::selection {
    background: #87c433;
    color: #fffaee;
}

#slide4 *::-moz-selection {
    background: #87c433;
    color: #fffaee;
}

/*-------------------*/
#slide5 *::selection {
    background: #ffe65b;
}

#slide5 *::-moz-selection {
    background: #ffe65b;
}

/*-------------------*/
#slide6 *::selection {
    background: #f9ad30;
}

#slide6 *::-moz-selection {
    background: #f9ad30;
}

#slide7 *::selection {
    background: #fffbca;
}

#slide7 *::-moz-selection {
    background: #fffbca;
}

::-webkit-scrollbar {
    background: #333;
    width: 12px;
}

::-webkit-scrollbar-track {
  background: none;
}

::-webkit-scrollbar-thumb {
    background: -webkit-linear-gradient(left, #ffe65b, #f9ad30);
    border: 1px solid #333;
    box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.4);
}


/*------------------------------------------ @Edges -------------------------------- */
.gradientBox {
    background: url("../images/sepGradientAI.png");
    background-repeat: repeat-x;
    height: 250px;
    width: 100%;
}

.slide1edge {
    background: url("../images/edgeBottomSoft.png");
    position: absolute;
    background-position: bottom;
    background-repeat: repeat-x;
    height: auto;
    min-height: 92.6%;
    width: 100%;
}

.edgeBox {
    background: url("../images/edgeBottomSoft.png");
    position: absolute;
    background-position: bottom;
    background-repeat: repeat-x;
    height: 250px;
    width: 100%;
}

.edgeTop {
    background: url("../images/edgeTopSoft.png");
    position: absolute;
    left: 0;
    background-position: left -1px;
    background-repeat: repeat-x;
    height: 200px;
    width: 100%;
}


/*------------------------------------------ @BackgroundImages -------------------------------- */
.backgroundImagePicture {
    background-image: url(../images/webReadyBookPicture.jpg);
}

.backgroundImageWall {
    background-image: url(../images/webReadyPhotoWall.jpg);
}

.backgroundImageWork {
    background-image: url(../images/WebReadyWorkSetUp.jpg);
}

.backgroundImageBook {
    background-image: url(../images/webReadyBookBlackandWhite2.jpg);
}

#backgroundImageTogether {
    background: #fffaee url(../images/webReadyTogether.jpg);
    width: 100%;
    min-height: 0;
    -webkit-background-size: 100%;
    -moz-background-size: 100%;
    background-size: 100%;
    background-position: right bottom;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

.withBackgroundImage {
    background-attachment: fixed;
    background-position: left top;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    background-repeat: repeat;
}


/*------------------------------------------ @Footer(sidebar)styles -------------------------------- */
/*sidebar*/
.slideSepFooter {
    background-color: rgb(51,51,51);
    background-color: rgba(51,51,51,1);
    height: auto;
    width: 65px;
    position: fixed;
    z-index: 201;
    top: 50%;
    margin-top: -182.5px;
    border-radius: 0 5px 5px 0;

    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}

.musicContainer {
    top: 0;
    margin-top: 0;
    height: 125px;
}

div.object-link {
    margin: 5px;
    position: relative;
    display: block;
    cursor: pointer;

    -webkit-transition: all 0.1s ease;
    -moz-transition: all 0.1s ease;
    -o-transition: all 0.1s ease;
    -ms-transition: all 0.1s ease;
    transition: all 0.1s ease;
    width: 55px;
    height: 55px;
    border-radius: 3px;
}

div.object-link:hover {
    border-radius: 0;
}

/* Must be kept to perserve functionality inside of the javascript*/
#musicBtnBox {
}

.scrollTop {
    background: url("../images/svgs/arrowUp-61.svg");
    -webkit-background-size: 55px;
    -moz-background-size: 55px;
    background-size: 55px;
    background-position: left top;
}

.scrollBottom {
    background: url("../images/svgs/arrowsDown-73.svg");
    -webkit-background-size: 55px;
    -moz-background-size: 55px;
    background-size: 55px;
    background-position: left bottom;
}

.scrollBottom:hover {
    width: 65px;
    right: 5px;
    background-position: 5px -5px;
}

.scrollTop:hover {
    width: 65px;
    right: 5px;
    background-position: 5px -102.7px;
}

.musicButton {
    background: url("../images/svgs/soundSlide-62.svg"), #333;

    -webkit-background-size: 165px;
    -moz-background-size: 165px;
    background-size: 165px;
    background-position: -106.5px top;
    background-repeat: no-repeat;
}

.musicButton:hover {
    margin-bottom: 0;
    width: 65px;
    left: -5px;
    background-position: 5px center;
}

.arrowProjects {
    background: url("../images/svgs/arrowButtonSlide-62.svg"), #333;

    -webkit-background-size: 165px;
    -moz-background-size: 165px;
    background-size: 165px;
    background-position: -2px center;
    background-repeat: no-repeat;
}

.arrowProjects:hover {
    margin-bottom: 0;
    width: 65px;
    left: -5px;
    background-position: -102.5px top;
}

#videoButton {
    background: url("../images/svgs/videoButtonSlide-57.svg"), #ee3f2e;

    -webkit-background-size: 165px;
    -moz-background-size: 165px;
    background-size: 165px;
    background-position: left top;
}

#videoButton:hover {
    -webkit-background-size: 165px;
    -moz-background-size: 165px;
    background-size: 165px;
    width: 65px;
    left: -5px;
    background-position: -102.5px top;
}

#essayButton {
    background: url("../images/svgs/essayButtonSlide-56.svg"), #87c433;

    -webkit-background-size: 165px;
    -moz-background-size: 165px;
    background-size: 165px;
    background-position: left top;
}

#essayButton:hover {
    width: 65px;
    left: -5px;
    background-position: -104px top;
}

#photoButton {
    background: url("../images/svgs/photoButtonSlide-58.svg"), #ffe65b;

    -webkit-background-size: 165px;
    -moz-background-size: 165px;
    background-size: 165px;
    background-position: left top;
}

#photoButton:hover {
    width: 65px;
    left: -5px;
    background-position: -104px top;
}

#articleButton {
    background: url("../images/svgs/articleButtonSlide-59.svg"), #f9ad30;

    -webkit-background-size: 165px;
    -moz-background-size: 165px;
    background-size: 165px;
    background-position: left top;
}

#articleButton:hover {
    width: 65px;
    left: -5px;
    background-position: -104px top;
}

#processButton {
    background: url("../images/svgs/processButtonSlide-60.svg"), #fffbca;

    -webkit-background-size: 165px;
    -moz-background-size: 165px;
    background-size: 165px;
    background-position: left top;
}

#processButton:hover {
    width: 65px;
    left: -5px;
    background-position: -104px top;
}


/*------------------------------------------ @Video -------------------------------- */
.videoBand {
    width: 100%;
    position: absolute;
    height: 480px;
    top: 252px;
    background: #333333;
}

.video-container {
    margin: 0 auto;
    position: relative;
    height: 480px;
    width: 720px;
}

#videoContainer,#redArrow,#videoText {
    opacity: 0;
}


/*------------------------------- @PaperEssay ------------------------------------- */
.paper {
    background: #f6f6f6;
    width: 90%;
    max-width: 1200px;
    padding: 70px;

    -webkit-box-shadow: 0 1px 7px hsla(0,0%,0%,.2);
    -moz-box-shadow: 0 1px 7px hsla(0,0%,0%,.2);
    box-shadow: 0 1px 7px hsla(0,0%,0%,.2);
    margin: 0 auto;
}

img.box {
    position: relative;
    z-index: 1;

    -webkit-box-shadow: 0 1px 7px hsla(0,0%,0%,.2);
    -moz-box-shadow: 0 1px 7px hsla(0,0%,0%,.2);
    box-shadow: 0 1px 7px hsla(0,0%,0%,.2);
}

.dottedPaper {
    background-image: -webkit-repeating-radial-gradient(center center, #fefefe, #fefefe 1px, transparent 1px, transparent 100%);
    background-image: -moz-repeating-radial-gradient(center center, #fefefe, #fefefe 1px, transparent 1px, transparent 100%);
    background-image: -ms-repeating-radial-gradient(center center, #fefefe, #fefefe 1px, transparent 1px, transparent 100%);
    background-image: repeating-radial-gradient(center center, #fefefe, #fefefe 1px, transparent 1px, transparent 100%);

    -webkit-background-size: 3px 3px;
    -moz-background-size: 3px 3px;
    background-size: 3px 3px;
}

.leftImage {
    float: left;
    margin: 3px 15px 0 0;
    position: relative;
}

.rightImage {
    float: right;
    margin: 5px 0 0 15px;
    position: relative;
}

img.leftImage,img.rightImage {
    position: relative;
    border: 6px solid #f6f0c2;
    display: block;

    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}

img.leftImage:hover,img.rightImage:hover {
    border: 6px solid #87c433;
}

.greenDot {
    width: 10px;
    height: 10px;
    border-radius: 10px;
    background: #87c433;
    position: absolute;
    z-index: 10;
}

.dotRight {
    top: 0;
    right: -4px;
}

.dotLeft {
    top: 0;
    left: -4px;
}


/*------------------------------------------ @tooltip -------------------------------- */
a > .tooltip,span > .tooltip {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    opacity: 0;
    visibility: hidden;
    top: 50px;
    left: 0;

    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}

a:hover > .tooltip,span:hover > .tooltip,a .tooltip:hover,span .tooltip:hover {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    opacity: 1;
    visibility: visible;
    overflow: visible;
    display: inline;
    top: 150px;

    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}

/* -------------------- @right side ------------------------- */
a > .tooltipRight,span > .tooltipRight {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    opacity: 0;
    visibility: hidden;
    top: 50px;
    right: 0;

    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}

a:hover > .tooltipRight,span:hover > .tooltipRight,a .tooltipRight:hover,span .tooltipRight:hover {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    opacity: 1;
    visibility: visible;
    overflow: visible;
    display: inline;
    top: 150px;

    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}

/* -------------------- @top side arrow ------------------------- */
a > .tooltipArrowTop,span > .tooltipArrowTop {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    opacity: 0;
    margin-top: -45px;

    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}

a:hover > .tooltipArrowTop,span:hover > .tooltipArrowTop,a .tooltipArrowTop:hover,span .tooltipArrowTop:hover {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    opacity: 1;
    overflow: visible;
    display: inline;
    margin-top: -63px;

    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}

/* -------------------- @bottom side arrow ------------------------- */
a > .tooltipArrowBottom,span > .tooltipArrowBottom {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    opacity: 0;
    margin-top: 53px;

    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}

a:hover > .tooltipArrowBottom,span:hover > .tooltipArrowBottom,a .tooltipArrowBottom:hover,span .tooltipArrowBottom:hover {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    opacity: 1;
    overflow: visible;
    display: inline;
    margin-top: 74px;

    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}

/* -------------------- @tooltip styling ------------------------- */
.tooltip,.tooltipRight,.tooltipArrowTop,.tooltipNavLeft,.tooltipBottom {
    background-color: #87c433;
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#87c433), to(#8dcd36));

    background-image: -webkit-linear-gradient(top, #87c433, #8dcd36);
    background-image: -moz-linear-gradient(top, #87c433, #8dcd36);
    background-image: -o-linear-gradient(top, #87c433, #8dcd36);
    background-image: -ms-linear-gradient(top, #87c433, #8dcd36);
    background-image: linear-gradient(top, #87c433, #8dcd36);
    border-radius: 3px;
    padding: 10px;
    position: absolute;
    font-family: "Trebuchet MS", sans-serif;
    font-size: 14px;
    width: 150px;
    text-decoration: none;
    font-style: normal;
    color: #fffaee;
    line-height: 1.2em;
    text-indent: 0;
    text-align: left;
    text-shadow: none;
}

.tooltipArrowTop, .tooltipArrowBottom {
    position: fixed;
    width: 65px;
    background: transparent;
    color: #333;
    margin-left: 5px;
    font-weight: bold;
    font-size: 100%;
}

.smallNav {
    font-size: 40%;
    float: left;
    margin-top: -7px;
    text-shadow: none;
}

.relative {
    width: 50px;
    position: relative;
}

/* -------------------- @left side arrow ------------------------- */
a > .tooltipNavLeft, div > .tooltipNavLeft {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    opacity: 0;
    visibility: hidden;

    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    top: 0;
    left: 20px;
}

a:hover > .tooltipNavLeft,a .tooltipNavLeft:hover, div:hover > .tooltipNavLeft,div .tooltipNavLeft:hover {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    opacity: 1;
    visibility: visible;
    overflow: visible;
    display: inline;

    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    top: 0;
    left: 70px;
}

.tooltipNavLeft {
    height: 55px;
    color: #333;
    background: transparent;
    font-weight: bold;
    font-size: 100%;
    padding-top: 16px;
    width: 70px;
}

/*------------------------------------------ @sliderz -------------------------------- */
.sliderz {
    margin-bottom: 20px;
    height: 421px;
    position: relative;
    display: block;
    border: solid 6px #333;
}

.sliderArrow {
    width: 25px;
    height: 35.53px;
    position: absolute;
    z-index: 200;
    top: 50%;
    margin-top: -12.5px;
    cursor: pointer;

}

.sliderArrowLeft {
    left: 13px;
    opacity: 1;
    background: url("../images/sliderArrowLeft.png");
}

.sliderArrowRight {
    right: 13px;
    opacity: 1;
    background: url("../images/sliderArrowRight.png");
}

.sliderz .slidez {
    display: none;
    background: #fffaef;
    position: absolute;
    height: 410px;
    width: 100%;
}

.slider-nav {
    margin: 0 auto;
    width: 810px;
    clear: both;
}

.slider-nav li {
    float: left;
    margin: 0 10px;
    margin-bottom: 2%;
    list-style: none;
}

#link1,#link2,#link3,#link4,#link5,#link6,#link7,#link8,#link9,#link10,#link11,#link12,#link13,#link14,#link15 {
    text-decoration: none;
    font-weight: bold;
    color: #333;
    padding: 5px;
    cursor: pointer;
    display: block;
}

#link1:hover,#link2:hover,#link3:hover,#link4:hover,#link5:hover,#link6:hover,#link7:hover,#link8:hover,#link9:hover,#link10:hover,#link11:hover,#link12:hover,#link13:hover,#link14:hover,#link15:hover {
    background: #333;
    color: #fffaef;
    border-radius: 100px;
}

#slidez1 {
    background: url(../images/slideshowImages/slideshowImages1.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
}

#slidez2 {
    background: url(../images/slideshowImages/slideshowImages2.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
}

#slidez3 {
    background: url(../images/slideshowImages/slideshowImages3.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
}

#slidez4 {
    background: url(../images/slideshowImages/slideshowImages4.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
}

#slidez5 {
    background: url(../images/slideshowImages/slideshowImages5.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
}

#slidez6 {
    background: url(../images/slideshowImages/slideshowImages6.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
}

#slidez7 {
    background: url(../images/slideshowImages/slideshowImages7.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
}

#slidez8 {
    background: url(../images/slideshowImages/slideshowImages8.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
}

#slidez9 {
    background: url(../images/slideshowImages/slideshowImages9.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
}

#slidez10 {
    background: url(../images/slideshowImages/slideshowImages10.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
}

#slidez11 {
    background: url(../images/slideshowImages/slideshowImages11.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
}

#slidez12 {
    background: url(../images/slideshowImages/slideshowImages12.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
}

#slidez13 {
    background: url(../images/slideshowImages/slideshowImages13.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
}

#slidez14 {
    background: url(../images/slideshowImages/slideshowImages14.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
}

#slidez15 {
    background: url(../images/slideshowImages/slideshowImages15.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
}


/*------------------------------------------ @processAndArticleHolders -------------------------------- */
.processHolder,.articleHolder {
    width: 100%;
    height: 333px;
    position: relative;
    display: block;
    overflow: hidden;
}

.articleHolder {
    margin-bottom: -22px;
    overflow: visible;
}

.articlePage {
    width: 25%;
    height: 333px;
    float: left;

    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}

.articlePage:hover {
    margin-top: 10px;

    -webkit-transform: rotate(10deg);
    -moz-transform: rotate(10deg);
    -o-transform: rotate(10deg);
    -ms-transform: rotate(10deg);
    transform: rotate(10deg);
}

.articlePage:active {
    margin-top: 20px;
    -webkit-transform: rotate(+15deg);
    -moz-transform: rotate(+15deg);
    -o-transform: rotate(+15deg);
    -ms-transform: rotate(+15deg);
    transform: rotate(+15deg);
}

.articlePage.page1 {
    background: url("../images/articleThum/thum1.jpg");
    background-repeat: no-repeat;
    background-position: center;
    z-index: 4;
}

.articlePage.page2 {
    background: url("../images/articleThum/thum2.jpg");
    background-repeat: no-repeat;
    background-position: center;
    z-index: 3;
}

.articlePage.page3 {
    background: url("../images/articleThum/thum3.jpg");
    background-repeat: no-repeat;
    background-position: center;
    z-index: 2;
}

.articlePage.page4 {
    background: url("../images/articleThum/thum4.jpg");
    background-repeat: no-repeat;
    background-position: center;
    z-index: 1;
}

.processBTN {
    cursor: pointer;

    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    background: #555;

    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -o-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
}

.processBTN:hover {
    top: 20px;
    padding: 10px;
    -webkit-box-shadow: none;
    box-shadow: none;
    background: #333;
}


/*------------------------------------------ @pNamMyohoRengeKyo -------------------------------- */
@-webkit-keyframes "namAnimation" {
0% {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=30);
    opacity: .3;
 }
100% {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=40);
    opacity: .5;
 }
}
@-o-keyframes "namAnimation" {
0% {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=30);
    opacity: .3;
 }
100% {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=40);
    opacity: .5;
 }
}
@-moz-keyframes "namAnimation" {
0% {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=30);
    opacity: .3;
 }
100% {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=40);
    opacity: .5;
 }
}
@keyframes "namAnimation" {
0% {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=30);
    opacity: .3;
 }
100% {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=40);
    opacity: .5;
 }
}

.namMyohoRengeKyo {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
    filter: alpha(opacity=30);
    opacity: .3;
    width: 44px;
    height: 44px;
    background: url("../images/svgs/namMyohoRengeKyo-71.svg");

    -webkit-background-size: 44px;
    -moz-background-size: 44px;
    background-size: 44px;
    margin-bottom: 12px;

    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;

    -webkit-animation: namAnimation .4s infinite;
    -moz-animation: namAnimation .4s infinite;
    -ms-animation: namAnimation .4s infinite;
    -o-animation: namAnimation .4s infinite;
    animation: namAnimation .4s infinite;
    display: block;
    cursor: pointer;
}

.namMyohoRengeKyo:hover {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    opacity: 1;
}

.nam {
    width: 58px;
    margin: 0 auto;
}


/*------------------------------------------ @AnimationVariableSetUo -------------------------------- */
#paper,#essay1,#essay2,#essay3,#essay4,#essay5,#essay6,#essay7,#essay8,#essay9,#essay10,#eImg1,#eImg2,#eImg3,#eImg4,#eImg5,#eImg6,#eImg7,#eImg8,#eImg9,#greenArrow,#essayText {
    opacity: 0;
}

.sliderz,.changeText,#yellowArrow,#photoText,.slider-nav, #holderholderLol1 {
    opacity: 0;
}

#articleText,#orangeArrow,.articleHolder, #holderholderLol2 {

    opacity: 0;
}

#processText, #processBlackLine, .processHolder {
    opacity: 0;
}

#changeTextTools {
    margin-top: 20px;
}


/*------------------------------------------ @MouseXYInteraction -------------------------------- */
.clickCircle {
    position: absolute;
    margin-top: -15px;
    width: 30px;
    height: 30px;
    border-radius: 40px;
    pointer-events: none;
    z-index: 300;
    opacity: 0;
}
.clickCircle1 {
    background: #7da9e8;
}
.clickCircle2 {
    background: #b378e9;
}
.clickCircle3 {
    background: #8ceb01;
}
.clickCircle4 {
    background: #edb64a;
}
.clickCircle5 {
    background: #d871ab;
}
.clickCircle6 {
    background: #60b1d3;
}
.clickCircle7 {
    background: #7d878e;
}
.clickCircle8 {
    background: #834ba2;
}
.clickCircle9 {
    background: #fbefc5;
}


/*------------------------------------------ @VariousStyles -------------------------------- */
.bottomSpacing {
    height: 50px;
    width: 100%;
}
.fadeIn {
    pointer-events: none;
}


/*------------------------------------------ @MediaQueries -------------------------------- */
@media screen and (max-width:1600px) {

    .processHolder {
        height: 282px;
    }

}

@media screen and (max-width:1300px) {

    .essay {
        line-height: 1.5em;
    }
    h1 {
        font-size: 100%;
    }
    .processHolder {
        height: 225px;
    }

}

@media screen and (max-width:1100px) {

    .slider-nav {
        width: 570px;
    }
    .slider-nav li {
        margin: 0 4px;
        font-size: 90%;
        margin-bottom: 3%;
    }
    .processHolder {
        height: 190px;
    }
    .articlePage:hover {
        -webkit-transform: none;
        -moz-transform: none;
        -o-transform: none;
        -ms-transform: none;
        transform: none;
    }
    .articlePage.page1 {
        background-position: left;
        z-index: 4;
    }
    .articlePage.page2 {
        background-position: left;
        z-index: 3;
    }
    .articlePage.page3 {
        background-position: left;
        z-index: 2;
    }
    .articlePage.page4 {
        background-position: left;
        z-index: 1;
    }

}

@media screen and (max-width:900px) {

    .slider-nav {
        width: 480px;
    }
    .slider-nav li {
        margin: 0 2px;
        font-size: 85%;
        margin-bottom: 3%;
    }
    .processHolder {
        height: 156px;
    }

}

@media screen and (max-height:665px) {

    .navContainer {
        top: 120px;
        margin-top: 0;
        border-radius: 0 0 5px 0;
    }
    div.object-link.scrollBottom {
        display: none;
    }
    div.object-link.scrollTop {
        display: none;
    }
    a span.tooltipArrowBottom {
        display: none;
    }
    a span.tooltipArrowTop {
        display: none;
    }

}

@media screen and (max-height:600px) {
    #content3,#content4,#content5,#content6,#content7 {
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
        filter: alpha(opacity=100);
        opacity: 1;
        left: 0;
    }

}

@media screen and (max-height:500px) {
    .robTitle {
        max-height: 300px;
        height: 35%;
        z-index: 200;

        -webkit-background-size: 90%;
        -moz-background-size: 90%;
        background-size: 90%;
        background-repeat: no-repeat;
        background-position: center center;

        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        transform: rotate(0deg);
    }
}