/* NODES */
    .node { position:absolute; opacity:0.5; width:50px; height:50px; cursor:pointer; -webkit-transition-duration: 0.5s;
                                 -moz-transition-duration: 0.5s; -o-transition-duration: 0.5s; }
    .node:hover { opacity:1;}
    .node img { width:50px; -webkit-transition-duration: 0.5s; border-radius: 50%; -moz-transition-duration: 0.5s; -o-transition-duration: 0.5s;}
    .node img:hover { box-shadow:0px 0px 5px white;}

    .h1Interactive { font-family: Didot, "Didot LT STD", "Hoefler Text", Garamond, "Times New Roman", serif; }
    .h2Interactive {font-family: Didot, "Didot LT STD", "Hoefler Text", Garamond, "Times New Roman", serif; font-style:italic;}
    .textInteractive { font-family: 'Lato', sans-serif; }

    /*Common boxes*/
    .commonContainer { position:absolute; display:none; width:740px; left:50%; margin-left:-370px; /*top:50%; margin-top:-200px;*/ height:100%; z-index:30;}
    .commonContainer .mainImage {  width:320px; /*display:table-cell;*/ vertical-align: middle;}
    .commonContainer .mainImage img { width:100%;}
    .commonContainer .textContainer {  width:360px; display:table-cell; vertical-align: middle;}

    
    .middleWrapper { float:left; height:100%; display:table; margin:5px;}
    /*Common boxes*/
    .commonContainer2 { position:absolute; display:none; width:740px; left:50%; margin-left:-370px; /*top:50%; margin-top:-200px;*/ height:100%; z-index:30;}
    .commonContainer2 .mainImage { float:left; width:320px; position:relative; margin-top:65%; display:table-cell;  vertical-align: middle;}
    .commonContainer2 .mainImage  img { float:left; width:60%; margin-top:20px; margin-left:20%;}
    .commonContainer2 .mainImage .textHOVER { font-family: 'Lato', sans-serif; color:white; width:130px; text-align: center; opacity:0.7;}
    .commonContainer2 .mainImage .active { opacity:1; font-weight: bold;}
    .commonContainer2 .hidden { display:none;}
    .commonContainer2 .mainImage  .text1 { position:absolute; left:50%; margin-left:-35px; cursor:pointer; text-align: center; width:70px;}
    .commonContainer2 .mainImage  .text2 { position:absolute; left:100%; top:36%; margin-left:-60px;   cursor:pointer; text-align: left; width:70px;}
    .commonContainer2 .mainImage  .text3 { position:absolute; left:87%; top:100%;margin-left:-60px;   cursor:pointer; text-align: left; width:70px;}
    .commonContainer2 .mainImage  .text4 { position:absolute; right:80%; top:37%; margin-left:-60px;  cursor:pointer;  text-align: right; width:70px;}
    .commonContainer2 .mainImage  .text5 { position:absolute; right:72%; top:100%; margin-left:-60px;   cursor:pointer; text-align: right; width:70px;}

    .commonContainer2 .textContainer { float:right; width:360px; display:table-cell; vertical-align: middle;  margin-top:60%;}
    .commonContainer2 .textContainer span img { max-width: 80%;}

    #videoContainer { position:absolute; top:10px; left:10px; display:none; overflow:hidden;}
    #videoContainer #mainVideo {position:absolute; left:0px; right:0px; top:0px; bottom:0px; width:100% !important; height:100% !important;}
    #videoContainer #mainVideo_wrapper {position:absolute; left:0px; right:0px; top:0px; bottom:0px; width:100% !important; height:100% !important;}
    #videoContainer video {position:absolute; left:0px; right:0px; top:0px; bottom:0px;}
    #videoContainer #overlay { position:fixed; top:0; bottom:0; left:0; right:0; z-index:10; display:none; background:white;}
    .close { position: fixed; top:10px; right:10px; display:block; cursor:pointer; z-index:9999999999; display:none;}
    #videoContainer #interaction { position:absolute; top:0; bottom:0; left:0; right:0; z-index:20;}
    /*SNAPSHOT*/
    #videoContainer #snapshot {position:absolute; bottom:5px; right:5px; opacity:0.2; cursor:pointer; -webkit-transition-duration: 0.5s;
                                 -moz-transition-duration: 0.5s; -o-transition-duration: 0.5s; }
    #videoContainer #snapshot:hover {opacity: 1; }

    #videoContainer #snapshot_taken { display:none; position:absolute; bottom:5px; right:5px;  cursor:pointer; -webkit-transition-duration: 0.5s;
                                 -moz-transition-duration: 0.5s; -o-transition-duration: 0.5s; }
                    #picture_taken { max-width: 100px; border: 4px solid white; position: absolute; bottom: 47px; right: 91px;}

    /*end Snapshot*/
    
    #videoContainer .interaction {display:none; }
    
    /*Explanation - STEP 1*/
    #videoContainer #explanation .node { top:60%; left:25%; }
    #videoContainer #explanation #explanation_text1 { position:absolute; top:60.1%; left:25%; margin-left:60px;   display:none; font-style:italic;}
    #videoContainer #explanation #explanation_text2 { position:absolute; bottom:6px; right:100px; display:none;}
    #videoContainer #explanation #explanation_text2 img { position:absolute; right: -22px; width: 13px; top: 13px;}
    #videoContainer #explanation #explanation_text3 { position:absolute; bottom:35px; right:160px; height:100px; width:100px; overflow: hidden;                                                 display:none;}
    #videoContainer #explanation #explanation_text3 img { position:absolute; left:0; bottom:00px; border:3x solid white;}