.paused { background-color:#ddd; }  
    
    canvas{
        margin: 0;
        width:100%;
        height:100%;
        overflow: hidden;
    }

    body {
        position:absolute;
        top:0%;
        left:0%;
        margin: 0;
        width:100%;
/*        min-width: 800px;*/
        height:100%;
/*        font-family: 'Source Sans Pro', sans-serif;*/
        font-family: 'Source Code Pro';
        font-size: 0.9em;
        line-height: 1.8em;
        cursor: default; 
        overflow: hidden;
/*        overflow: hidden;*/
    }
    #hoverButton {
        position: absolute;
        width: 300px;
        height:208px;
        top:50%;
        left:50%;
        margin-left:-150px;
        margin-top:-104px;
    }

    #hoverButton:hover {
/*        color: #011940;*/
        cursor: pointer;
/*        text-shadow: none;    */
    }
   
    .hoverLogo {
        position: absolute;
        top:50%;
        left: 50%;
        margin-left:-150px;
        margin-top:-104px;
        width: 300px;
        height:208px;
        opacity:0;
/*        border: 1px solid blue;*/
/*        background-color:black;*/
    }

    .loading {
        position: absolute;
        font-size: 400em;
        color: #011940;
        text-align: center;
    }

    .loadingLogo {
        position: absolute;
        top:50%;
        left: 50%;
        margin-left:-150px;
        margin-top:-104px;
        width: 300px;
        height:208px; /*height is 69.5% of width*/
        line-height:100%;
/*        background-color:black;*/
/*        border: 1px solid blue;*/
    }
    

    #contents {
        position: absolute;
/*        width:100%;*/
        width:0%; /*changed in js
/*        min-width: 800px;*/
        height:102%;
        top: 0px;
        background-color: white;
        z-index: 300;
        box-shadow: 0px 0px 2px 1px #8796AA;
        -webkit-box-shadow: 0px 0px 2px 1px #8796AA;
        -moz-box-shadow: 0px 0px 2px 1px #8796AA;
        overflow: hidden;
    }  
      
    .pageLeft, .pageRight {
        position: absolute;
        left: 100%;
        overflow: scroll;
        -moz-transition: left 1s ease-out;
        -o-transition: left 1s ease-out;
        -webkit-transition: left 1s ease-out;
        transition: left 1s ease-out;
    }
    /*Slide Left Page transition*/  
    .pageLeft  {
        position: absolute;
        left: 0%;
        overflow: scroll;
    }


    .logo {
        position: absolute;
        top: 0px;
        left: 0%;
        margin-left:1px;
        height: 98px;
        width: 130px;
        z-index: 400;
    }
    
    .logo:hover {
        cursor:pointer;}
    
   .Wrapper {
        position: absolute;
        top: 5%;
        left: 3%;
        width: 95%;
        height: 90%;
        min-width:760px;
        min-height: 418px;
        white-space: nowrap;
        background-color: white;
        overflow-x: scroll;
/*        border: 1px solid blue;*/
       
   }
    
    .contentWrap  {
        position:relative;
        display: inline-block;
        height:100%;
        top: 0%;
        left:0%;
        white-space: normal;
        margin-left: 10px;
        width: 78%;
        min-width:500px; 
        min-height: 418px;
        overflow:hidden;
        background-color: white;
/*        border: 1px solid black;*/
    } 
        
    
    /***** Pages *****/   
      
   .contentFill1  {
        position:absolute;
        height:100%;
        top: 0%;
        left:0px;
        width:100%;
        min-width:500px; 
/*        overflow-x:scroll;*/
/*        border:solid 1px pink;*/
        background-color: white;
       opacity:1;
       -moz-transition:  1s ease-out;
        -o-transition:  1s ease-out;
        -webkit-transition:  1s ease-out;
        transition:  1s ease-out;
    } 
      
    .contentFill0  {
        position:absolute;
        height:100%;
        top: 0%;
        left:100%;
        width:95%;
        min-width:500px; 
/*        overflow:hidden;*/
        background-color: white;
        opacity:0;
        -moz-transition:  1s ease-out;
        -o-transition:  1s ease-out;
        -webkit-transition:  1s ease-out;
        transition:  1s ease-out;
    } 
      
    /***** Portfolio Pieces *****/ 
    
      .ResearchText, .IdeateText, .TestText {
        top:0px;
        display:block;
        width:100%;
        left:5%; 
        height: 100%;  
        overflow-y: scroll;
/*        border: 1px black solid*/
      }
      
      
      .ProtoTitle {
        font-size: 1.2em;
        font-weight: 600;
        color: #011940;
        margin-top: 5%;
        padding-left: 5%;
        margin-bottom:1%; 
        text-align: left; 
/*        width:45%;  */
      }
      

      .ProtoPara {
        font-size: 1em; 
        font-weight: 400;
        margin-top:0em;
        padding-top:0em;
        margin-left: 3%;
        margin-bottom: 1.8em;
        line-height: 2em;
        color: #011940;  
        text-align: left; 
/*        width:45%;  */
      }
      
      
      .ParaUnderline {
        width:75%;
        margin-left:0.5em;
/*        align-content: center;*/
        height:1px;
        background-color:#8796AA;
      }
      
    .portIdeat{
        position: absolute;
        opacity: 0;
        top: 15%;
        margin-top:10px;
        left: 100%;
        width: 100%;
        height: 85%;
        overflow-y:scroll;
        overflow-x: hidden;
        box-shadow: inset 0px 0px 2px 1px #8796AA;
        -webkit-box-shadow: inset 0px 0px 2px 1px #8796AA;
        -moz-box-shadow: inset 0px 0px 2px 1px #8796AA;
/*        border: 1px solid;*/
     }  
    
     .portTest{
        position: absolute;
        opacity: 0;
        top: 15%;
        margin-top:10px;
        left: 100%;
        width: 100%;
        height: 85%;
        overflow-y:scroll;
        overflow-x: hidden;
        box-shadow: inset 0px 0px 2px 1px #8796AA;
        -webkit-box-shadow: inset 0px 0px 2px 1px #8796AA;
        -moz-box-shadow: inset 0px 0px 2px 1px #8796AA;
/*        border: 1px solid;*/
     }   
      
    .portProto{
        position: absolute;
        opacity: 1;
        top: 10%;
        margin-top: 45px;
/*        padding-left:5%;*/
        left: 0%;
/*        width: 90%;*/
/*        width: auto;*/
        height: 85%;
        min-height: 342px;
        min-width:500px; 
        text-align: center;
/*        border: 2px solid blue;*/
        overflow-y: scroll;
        overflow-x: hidden;
        box-shadow: 0 4px 2px -2px grey;
/*
        box-shadow: inset 0px 0px 2px 1px #8796AA;
        -webkit-box-shadow: inset 0px 0px 2px 1px #8796AA;
        -moz-box-shadow: inset 0px 0px 2px 1px #8796AA;
*/
     }  
   
.portResearch{
        position: absolute;
        display:inline-block;
        opacity: 0;
        top: 15%;
        margin-top:10px;
        left: 100%;
        width: 100%;
        height: 85%;
        box-shadow: inset 0px 0px 2px 1px #8796AA;
        -webkit-box-shadow: inset 0px 0px 2px 1px #8796AA;
        -moz-box-shadow: inset 0px 0px 2px 1px #8796AA;
        overflow-y: scroll;
        overflow-x: hidden;
     }
    
    .ResWrap{
/*        min-height: 230px;  */
          display:inline-block;
/*
         -o-background-size: 45% auto;
        -moz-background-size: 45% auto;
        -webkit-background-size:45% auto;
        background-position:right top;
        background-repeat:no-repeat;   
*/
    }

    .imgText{
        display:inline-block;
        width:40%;
        height:auto;
        padding-left:4%;
        padding-bottom: 4%;
        padding-right: 4%;
    }
    
    .Col2Image {
/*        position: absolute;*/
/*        top:50%;*/
        vertical-align:top;
        padding-bottom: 5%;
/*        left: 55%;*/
        width:50%;
/*        float:top;*/
    }

    .VidCol2Image{
        vertical-align:top;
        padding-bottom: 5%;
/*        left: 50%;*/
        width:50%;
        height: 300px;
    
    }

    .Laptop{
        position: absolute;
        top: 0%;
/*        width: auto;*/
        left:0%;
/*        margin: 0px 0 0 -5%;*/
        min-height: 239px;
/*        height:70%;*/
/*        width:100%;*/
        height:auto;
        min-width:500px; 
/*        border: 1px solid green;*/
    } 

    .video {
        position: relative;
        float:top;
/*      
        top:2%;
        left:15%;
*/
        height: 65%;
        width:70%;
/*        min-height: 400px;*/
/*        min-width:837px;*/
    }

    .BuildingImage{
        position: relative;
        top:1%;
        left:00%;
        height:65%;
        width:auto;
        min-height: 239px;
        
    }

    .blackBkgd{
        position: absolute;
        top: 5%;
        width: 80%;
        left:10%;
/*        min-height: 210px;*/
        height:60%;
        background-color: black;
    }

    .ProtoImg {
        position:relative;
        top:0%;
        left:0%;
        margin:none;
        padding:none;
        min-height:239px;
/*        border: 1px solid yellow;*/
/*        Chrome, Safari, Opera */
/*        animation-play-state: move ;*/
        -webkit-animation: move 20s infinite forwards paused;
        -webkit-animation-delay: 1s;
        -moz-animation: move 20s infinite forwards paused;
        -moz-animation-delay: 1s;
        animation: move 20s infinite forwards paused;
        animation-delay: 1s;
    } 
    
    .ProtoImg2 {
        position:relative;
         margin:none;
        padding:none;
        top:0%;
        left:0%;
/*        margin-left:-12%;*/
/*        width:600%;*/
        height:70%;
        overflow:hidden;
/*        min-width:2509px;*/
        min-height:239px;
/*        background-size: 100%;*/
/*        border: 1px solid green;*/
        -webkit-animation: move2 20s infinite forwards paused;
        -webkit-animation-delay: 1s;
        -moz-animation: move2 20s infinite forwards paused;
        -moz-animation-delay: 1s;
        animation: move2 20s infinite forwards paused;
/*        animation: move2 20s infinite forwards paused;*/
        animation-delay: 1s;
    }

    
     @keyframes move{
      0% { left:0%;}
      5% {  opacity:1;}
      15% { left: 0%;}
      30% { left:-100%;}      
      45% { left:-100%;}
      55% { left:-200%;}          
      70% { left:-200%;}
      80% { left:-300%;}
      95% { left:-300%;
            opacity:1;}
      97% { left:-300%;   
            opacity:0;}  
      100% {left:0%;
           opacity:0;}     
    }

      @-webkit-keyframes move{
      0% { left:0%;}
      5% {  opacity:1;}
      15% { left: 0%;}
      30% { left:-100%;}      
      45% { left:-100%;}
      55% { left:-200%;}          
      70% { left:-200%;}
      80% { left:-300%;}
      95% { left:-300%;
            opacity:1;}
      97% { left:-300%;   
            opacity:0;}  
      100% {left:0%;
           opacity:0;} 
    }

/*
     @-moz-keyframes move{
      0% { left:0%;}
      5% {  opacity:1;}
      15% { left: 0%;}
      30% { left:-100%;}      
      45% { left:-100%;}
      55% { left:-200%;}          
      70% { left:-200%;}
      80% { left:-300%;}
      95% { left:-300%;
            opacity:1;}
      97% { left:-300%;   
            opacity:0;}  
      100% {left:0%;
           opacity:0;}    
    }
*/

    @-webkit-keyframes move2{
      0% { left:0%;}
      3% {  opacity:1;}
      15% { left: 0%;}
      19% { left:-100%;}      
      30% { left:-100%;}
      35% { left:-200%;}          
      46% { left:-200%;}
      51% { left:-300%;}
      62% { left:-300%;}      
      67% { left:-400%;}
      78% { left:-400%;}          
      83% { left:-500%;}
      97% { left:-500%;
            opacity:1;}
      99% { left:-500%;   
            opacity:0;}  
      100% {left:0%;
           opacity:0;}    
    }
    
    .Laptop:hover {
        cursor: pointer;
      } 

    

    .ProtoCaption {
        position: relative;
        display:block;
/*        top:70%;*/
        overflow-wrap: normal;
        overflow-y:scroll;
        height:auto;
        left:5%;
        opacity:0.8;
        background-color: none;
        font-size: 1em;
        font-weight: 400;
        text-align: center;
        color: #011940;
        padding-left:5%;
        padding-bottom:5%;
        line-height: 2em; 
        vertical-align: top;
    }

    #Text2{
     height:42%;
    }
      
    .protoImgs1{
        position: absolute;
        left:0%;
         margin:none;
        padding:none;
        width: 25%;
/*        height:100%;*/
        min-width:500px; 
/*        border:solid 1px black;*/
    }  
    .protoImgs2{
        position: absolute;
        left:25%;
/*        height:auto;*/
        width: 25%;
       min-width:500px; 
         margin:none;
        padding:none;
/*        border:solid 1px black;*/
    }  
    .protoImgs3{
        position: absolute;
        left:50%;
/*        height:auto;*/
        width: 25%;
        min-width:500px; 
         margin:none;
        padding:none;
/*        border:solid 1px black;*/
    }    
    .protoImgs4{
        position: absolute;
        left:75%;
/*        height:auto;*/
        width: 25%;
        min-width:500px;
         margin:none;
        padding:none;
/*        border:solid 1px black;*/
    }    

     .protoImgs21{
        position: absolute;
        left:0%;
        height:100%;
        min-width:500px; 
          margin:none;
        padding:none;
    }  
    .protoImgs22{
        position: absolute;
        left:16.6%;
        height:100%;
        min-width:500px; 
         margin:none;
        padding:none;
    }  
    .protoImgs23{
        position: absolute;
        left:33.2%;
        height:100%;
        min-width:500px; 
    }    
    .protoImgs24{
        position: absolute;
        left:50%;
        height:100%;
        min-width:500px; 
         margin:none;
        padding:none;
    } 
    .protoImgs25{
        position: absolute;
        left:66.6%;
        height:100%;
        min-width:500px; 
         margin:none;
        padding:none;
    }    
    .protoImgs26{
        position: absolute;
        left:83.3%;
        height:100%;
        min-width:500px; 
         margin:none;
        padding:none;
    }    


      
   /***** Top Nav Line *****/  
    .headline{
        font-weight: 300;
        text-align: center;
        color: #011940;
        margin-left: 25%;
/*        margin-right: 10%;*/
        overflow: hidden;
        white-space:nowrap;
        line-height: 1.5em;
        font-size: 2.5em;
        vertical-align: top;
/*        border:solid 1px black;*/
        width:50%;
    }

    .portNav {
        position:relative;
        height:6em;
/*        top: 20%;*/
        left: 25%;
        width:50%;
        opacity:0;
/*        background-color:green;*/    
    }

    .Port1 {
        position:absolute;
        left:25%;  
        top: 10%;  
        width:50%;
        min-width: 130px;
        margin-top: 6px;
        height:1px;
        background-color: #011940;  
      }
      
    .Navname{
        position: absolute;
        display:inline-block;
        top:10%;
        margin-left:-2.7em;
        margin-top: 12px;
        width: 5.4em;
        font-weight: 400;  
        font-size: 1em;
        color: #011940;
        text-align: center; 
/*        border-bottom: solid 1px;*/
        text-shadow:0px 1px 1px #8796AA;
        
      }
    
    .Navname:hover {
        cursor: pointer;
        color: #F05A28;
        text-shadow: none; 
/*        border-bottom: solid 1px #F05A28;*/
    }
    
    .Circ {
        position:absolute;  
        display: inline-block;
        top: 10%;    
        width:12px;
        height:12px;
        margin-left:-6px;
        margin-top:0px;
        border-radius: 50%;
        background-color: #011940;
        box-shadow: 0px 0px 2px #8796AA;
      }

    .Circ:hover {
        cursor: pointer;
        background-color: #F05A28;
        box-shadow: none;
      }
    
/*
    .circClick {
        border: 3px solid #8796AA;
        margin-left: -11px;
        margin-top:-4px;}
    }
*/
    
    .portNavClick {
        color: #F05A28;
    }
    
      #Navname11, #Navname21, #Navname31, #Navname41, #Navname51 { left:25%; }
      
      #Navname12, #Navname22, #Navname32, #Navname42, #Navname52{ left:42%; }

      #Navname13, #Navname23, #Navname33, #Navname43, #Navname53{ left:59%; }
      
      #Navname14, #Navname24, #Navname34, #Navname44, #Navname54{ left:75%; }
    
      #Circ11, #Circ21, #Circ31, #Circ41, #Circ51 { left:25%;}

      #Circ12, #Circ22, #Circ32, #Circ42, #Circ52 { left:42%;}

      #Circ13, #Circ23, #Circ33, #Circ43, #Circ53 { left:59%;}

      #Circ14, #Circ24, #Circ34, #Circ44, #Circ54 { 
            left:75%;
            border: 2px solid #F05A28;
            margin-left: -8px;
            margin-top:-2px;}
/*            background-color: #011940;}*/

      
    /*******About Text Page Wrap********/ 
      
    .aboutPage {
        position:absolute;
        height:100%;
        top: 110px;
        white-space: normal;
        width: 90%;
        min-width: none;
/*        background-color: yellow;*/
/*        overflow-x:scroll;*/
        margin-right: 20%;
/*        z-index:1000;*/
    }  
    

    
    /*Link for Source Sans Pro url and font weights https://www.google.com/fonts#UsePlace:use*/  
    .Title  {
/*       position: absolute;*/
        top:0px;
        font-size: 3em;
        font-weight: 900;
        color: #F05A28;
        margin: 0em;
/*        margin-left:5%;*/
        margin-right:5%;
        line-height: 1.4em;
        overflow-wrap: normal;
    }

    .Title2 {
        font-size: 2.8em;
        font-weight: 900;
        color: #F05A28;
        margin: 0em;
/*        margin-left:5%;*/
        margin-right:5%;
        line-height: 1.4em;
        overflow-wrap: normal;
    }
      
      
    .subHeading{
/*        position: absolute;*/
        font-size: 2em; 
        font-weight: 700;
        color: #011940;
        margin-top: 1em;
/*        margin-left:5%;*/
        margin-right:5%;
        line-height: 1.8em;
        overflow-wrap: normal;
    } 
      
    .Para {
        font-size: 1em; 
        font-weight: 400;
        color: #011940;
        margin-top: 2em;
/*        margin-left:5%;*/
        margin-right:5%;
        line-height: 2em;
        overflow-wrap: normal;
    }  

    .ContactPara {
        font-size: 1em; 
        font-weight: 400;
        color: #011940;
        margin-top: 1em;
/*        margin-left:5%;*/
        margin-right:5%;
        line-height: 2em;
        overflow-wrap: normal;
/*        border-bottom: solid 1px black;*/
        
    }  
    .ContactPara:hover {
        border-bottom: solid 1px #F05A28;
        color: #F05A28;
    }

    #email {
    width: 14em;
    }
    
    #linkedIn {
    width: 5em;
    }

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

/*    a:hover {color: #F05A28;}*/

    /*******Side Nav Panel********/ 
    
    .sidePanel{
    position:relative; 
    height:100%;
/*    width: 20%;*/
    min-width: 260px;
/*    overflow: hidden; */
    display: inline-block;
/*        border: 1px solid green;*/
    }

    .navPanel{
        position:absolute; 
        display: inline-block;
        top: 0%;   
        left: 0%;
        height: 100%;
/*        width: 50%;      */
        min-width: 130px;    
        background-color: white;
        overflow:hidden;
        margin-right:0 auto;
/*        border: 1px solid pink;*/
        z-index:100;
    }  

    .navSpan {
        position:absolute;
        top: 130px;
        left:0%;
        width:100%;
        min-width: 130px;
        height:40px;
        text-align: left;
        color: #011940;
        font-size: 1.1em; 
        font-weight: 500;
/*        text-shadow:0px 1px 1px #dbdbdb;*/
        line-height: 40px; /*vertically align text*/
        transition: all 0.2s ease;
/*        background: linear-gradient(to right, #F05A28 50%, white 50%);*/
        background-size: 200% 100%;
        background-position:right bottom;
    }
    
     .portPanel{
        position:absolute; 
        display: inline-block;
        top: 0%;   
        left: 50%;
        height: 100%;
        width: 50%;      
        min-width: 130px;   
        background-color: white;
        overflow:hidden;
/*        z-index: -100;*/
/*        border: 1px solid yellow;*/
/*        margin-left:-3%; */
        /* margin-left:-3px; */ 
    }   

 .portSpan {
        position:absolute;
        display:block;  
        left:0%;  
        top: 98px; 
        height:40px;  
        margin-left:-130px;
/*        width:100%;*/
        min-width: 130px;
       
        padding-left:10px;
        text-align: left; 
/*        text-shadow: 0.5px 0.5px 0.5px #292F36;  */
        color: #011940;  
        font-size: 0.8em; 
        font-weight: 500;
        line-height: 40px; /*vertically align text*/
/*        border: 1px solid yellow;  */
/*        z-index: 1000;*/
      } 
      
    .navSpan:hover {
        cursor: pointer;
        text-shadow: none;
/*
        transition: 1s ease-out; 
         background-position:left bottom;
        -moz-transition:  0.5s ease-out;
        -o-transition:  0.5s ease-out;
        -webkit-transition:  0.5s ease-out;
        transition:  0.5s ease-out;    
*/
     } 

      .portSpan:hover {
        cursor: pointer;  
        border-left: solid 1px #011940;
        color: #F05A28;
      }


     .clicked {
        color: #F05A28;
     }
      
      .underline{
        position:absolute;
        left:0px;  
        top: 98px;  
        width:100%;
        min-width: 130px;
        height:1px;
        background: #F05A28;
        background: linear-gradient(to right, #F05A28 60%, white 40%);
        background-size: 200% 100%;
        background-position:right bottom;
/*        opacity:0;  */
/*        background-color: #F05A28;*/
      }
      
     #About{margin-top: 44px;}
      
     #Portfolio { margin-top: 88px; } 
     
     #Contact {margin-top:132px;}  
    
     #First {margin-top:168px; }

     #Second{margin-top:208px; }   
      
     #Third{margin-top: 248px; }
      
     #Fourth {margin-top: 288px;} 
     
     #Fifth{margin-top:328px;} 
    
/*     #Sixth{margin-top:224px;} */
      
    .navSpan:hover + .underline {
         background-position:left bottom;
        -moz-transition:  0.3s ease-out;
        -o-transition:  0.3s ease-out;
        -webkit-transition:  0.3s ease-out;
        transition:  0.3s ease-out;
    }
      
    .sideLine{
        display: inline-block;
        position: relative;
        left: 100%;
        top:266px;
        margin-left: -1px;
        width:10px;
        height:200px;
/*        margin-left:-3px;*/
        background: #F05A28;
/*        vertical-align: 50%;*/
        background: linear-gradient(to bottom, #F05A28 50%, white 50%);
        background-size: 100% 200%;
        background-position:bottom;
/*        opacity:0;  */
/*        background-color: #F05A28;*/
      }  
      
   #Portfolio:hover ~ .sideLine {
        background-position: top;
/*      background: black;*/
        cursor: pointer;  
        -moz-transition: 0.3s ease-out 0.3s;
        -o-transition: 0.3s ease-out 0.3s;
        -webkit-transition: 0.3s ease-out 0.3s;
        transition: 0.3s ease-out 0.3s;
    } 
        
    #AboutLine { margin-top: 124px; } 
    
    #portLine { margin-top:168px; } 
    
    #contactLine { margin-top:212px;}