div.clear { 
  clear: both; 
}
div.caption { 
  display: block !important; 
  position: relative !important;
      -webkit-margin-before: 0em;
    -webkit-margin-after: 0em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
}

.subtitle { 
  background: #000; 
  background: rgba(0,0,0,0); 
  color: #999999 !important; 
  display: none; 
  text-align: left; 
  position: absolute !important;
  left: 0px !important;
  bottom: -10px;
  width: 100%;
  height: 10px;
  font-weight: normal;
  font-size: 81.25%;
  font-family: Arial, Helvetica, sans-serif;
  line-height: 100%;
    }

html, body  {   background-color: black;
            }

header  {   margin-bottom: 1em;
        }		

a   {   text-decoration: none;
    }

.homelink	{	font-family: Arial, Helvetica, sans-serif;
				font-size: 162.5%;
				font-weight: bold;
				color: #ffffff;
			}

#container  {   overflow-x: hidden;
                position: absolute;
                height: 100%;
                top: 0px;
                left: 0px;
            }

.cv {   position: relative;
        display: inline-block;
        width: 150px;
        height: 150px;
    }

.textlink   {

            }

.column {   position: absolute;
            max-width: 100%;
            height: auto;
            width: auto;
            -webkit-column-count: 2; /* Chrome, Safari, Opera */
            -moz-column-count: 2; /* Firefox */
            column-count: 2;
            -webkit-column-gap: 50px; /* Chrome, Safari, Opera */
            -moz-column-gap: 50px; /* Firefox */
            column-gap: 50px;
            font-family: Arial, Helvetica, sans-serif;
        	font-size: 125%;
        	font-weight: normal;
        	color: #999999;
        	line-height: 125%;
        }

.column a {
    color: #0066CC;
    text-decoration: none;
}

.column a:visited {
    color: #0066CC;
    text-decoration: none;
}


h1	{	font-family: Arial, Helvetica, sans-serif;
		font-size: 125%;
		font-weight: bold;
		color: #999999;
		line-height: 50%;
		padding-bottom: 1em;
	}

p	{	font-family: Arial, Helvetica, sans-serif;
		font-size: 125%;
		font-weight: normal;
		color: #999999;
		line-height: 125%;
		max-width: 750px;
	}
	

/*dt	{	font-family: Arial, Helvetica, sans-serif;
    		font-size: 125%;
    		font-weight: normal;
    		color: #999999;
    		line-height: 125%;
    		max-width: 750px;
    	}

dd	{	font-family: Arial, Helvetica, sans-serif;
		font-size: 125%;
		font-weight: normal;
		color: #999999;
		line-height: 125%;
		max-width: 750px;
	}*/

.indent	{	margin: 1em;
			width: auto\9; /* ie8 */
			height: auto;
		}

img.home 	{	max-width: 100%;
    			height: auto;
    			width: 100%;
    			display: inline-block;
    		}

video   {   max-width: 100%;
            height: auto;
            width: 100%;
            display: inline-block;
        }            

.thing 	{	max-width: 100%;
    		height: auto;
    		width: 24%;
    		position: relative;
    		display: inline-block;
    	}

.thing2 {   max-width: 100%;
            height: auto;
            width: 24%;
            position: relative;
            display: inline-block;
        }

.thing p	{	position: absolute;
				top: -5px;
				left: 5px;
				font-weight: bold;
				line-height: 0%;
            }

.stabilize  {   max-width: 120%;
                width: 120%;
                left: 50%;
                margin-right: -50%;
            }       

.grid	{ 
		}

.rectangle  {	max-width:100%;
    			height: auto;
    			width: 100%;
    			display: inline-block;
    			background-color: black;
            }

.headertext {   position: absolute;
                font-family: Arial, Helvetica, sans-serif;
                font-size: 121.875%;
                font-weight: bold;
                line-height: 0%;
                color: #999999;
            }

img.corner  {   position: fixed;
                bottom: 0px;
                right: 0px;
                width: 100px;  
			}

.cornertext {   position: fixed;
                font-family: Arial, Helvetica, sans-serif;
                font-size: 121.875%;
                font-weight: bold;
                line-height: 0%;
                color: #999999;
                bottom: 170px;
                right: 10px;
                -ms-transform: rotate(90deg); /* IE 9 */
                -webkit-transform: rotate(90deg); /* Chrome, Safari, Opera */
                transform: rotate(90deg);
            }

.credit {       position: fixed;
                font-family: Arial, Helvetica, sans-serif;
                font-size: 40.2%;
                line-height: 0%;
                color: #999999;
                top: 11em;
                right: 0px;
                -ms-transform: rotate(90deg); /* IE 9 */
                -webkit-transform: rotate(90deg); /* Chrome, Safari, Opera */
                transform: rotate(90deg);
            }

.backgroundaudio    {   position: relative;
                        bottom: 0px;
                        left: 0px;
                        max-width: 100%;
                        width: 20%;
                    }

p.banner    {   font-family: Arial, Helvetica, sans-serif;
            	font-size: 162.5%;
            	font-weight: bold;
            	line-height: 100%;
            	color: white;
                position: relative;
                display: inline-block;
                margin: 0.5em;
                left:-10%;
                transform: translate(-100%, 0%);

                    /* Chrome, Safari, Opera */    
                    -webkit-animation-name: scrollone;
                    -webkit-animation-duration: 20s;
                    -webkit-animation-timing-function: linear;
                    -webkit-animation-iteration-count: infinite;
                    -webkit-animation-play-state: running;

                    /* Standard syntax */
                    animation-name: scrollone;
                    animation-duration: 20s;
                    animation-timing-function: linear;
                    animation-iteration-count: infinite;
                    animation-play-state: running;

                    /* Firefox */
                    -moz-animation-name: scrollone;
                    -moz-animation-duration: 20s;
                    -moz-animation-timing-function: linear;
                    -moz-animation-iteration-count: infinite;
                    -moz-animation-play-state: running;
                }

    
                    /* Chrome, Safari, Opera */
                    @-webkit-keyframes scrollone    {
                        0% {left:-10%; transform:translate(-100%, 0%);}
                        100% {left:90%; transform:translate(100%, 0%);}
                    }

                    /* Standard syntax */
                    @keyframes scrollone    {
                        0% {left:-10%; transform:translate(-100%, 0%);}
                        100% {left:90%; transform:translate(100%, 0%);}
                    }

                    /* Firefox */
                    @-moz-keyframes scrollone   {
                        0% {left:-10%; transform:translate(-100%, 0%);}
                        100% {left:90%; transform:translate(100%, 0%);}
                    }


p.banner2   {   font-family: Arial, Helvetica, sans-serif;
            	font-size: 162.5%;
            	font-weight: bold;
            	line-height: 100%;
            	color: white;
                position: relative;
                display: inline-block;
                margin: 0.5em;
                left:-10%;
                transform: translate(-100%, 0%);

                    /* Chrome, Safari, Opera */    
                    -webkit-animation-name: scrolltwo;
                    -webkit-animation-duration: 20s;
                    -webkit-animation-timing-function: linear;
                    -webkit-animation-iteration-count: infinite;
                    -webkit-animation-play-state: running;
                    -webkit-animation-fill-mode: backwards;
                    -webkit-animation-delay: 10s;

                    /* Standard syntax */
                    animation-name: scrolltwo;
                    animation-duration: 20s;
                    animation-timing-function: linear;
                    animation-iteration-count: infinite;
                    animation-play-state: running;
                    animation-fill-mode: backwards;
                    animation-delay: 10s;

                    /* Firefox */
                    -moz-animation-name: scrolltwo;
                    -moz-animation-duration: 20s;
                    -moz-animation-timing-function: linear;
                    -moz-animation-iteration-count: infinite;
                    -moz-animation-play-state: running;
                    -moz-animation-fill-mode: backwards;
                    -moz-animation-delay: 10s;
               
            }
    
                    /* Chrome, Safari, Opera */
                    @-webkit-keyframes scrolltwo    {
                        0%   {left:-10%; transform: translate(-100%, 0%);}
                        100%  {left:90%;transform: translate(100%, 0%);}
                    }

                    /* Standard syntax */
                    @keyframes scrolltwo    {
                        0%   {left:-10%; transform: translate(-100%, 0%);}
                        100%  {left:90%;transform: translate(100%, 0%);}
                    }
                    /* Firefox */
                    @-moz-keyframes scrolltwo   {
                        0%   {left:-10%; transform: translate(-100%, 0%);}
                        100%  {left:90%;transform: translate(100%, 0%);}
                    }

p.banner3   {   font-family: Arial, Helvetica, sans-serif;
            	font-size: 162.5%;
            	font-weight: bold;
            	line-height: 100%;
            	color: white;
                position: relative;
                display: inline-block;
                margin: 0.5em;
                left:-10%;
                transform: translate(-100%, 0%);

                    /* Chrome, Safari, Opera */    
                    -webkit-animation-name: scrollthree;
                    -webkit-animation-duration: 20s;
                    -webkit-animation-timing-function: linear;
                    -webkit-animation-iteration-count: infinite;
                    -webkit-animation-play-state: running;
                    -webkit-animation-fill-mode: backwards;
                    -webkit-animation-delay: 14s;

                    /* Standard syntax */
                    animation-name: scrollthree;
                    animation-duration: 20s;
                    animation-timing-function: linear;
                    animation-iteration-count: infinite;
                    animation-play-state: running;
                    animation-fill-mode: backwards;
                    animation-delay: 14s;

                    /* Firefox */
                    -moz-animation-name: scrollthree;
                    -moz-animation-duration: 20s;
                    -moz-animation-timing-function: linear;
                    -moz-animation-iteration-count: infinite;
                    -moz-animation-play-state: running;
                    -moz-animation-fill-mode: backwards;
                    -moz-animation-delay: 14s;
               
            }
    
                    /* Chrome, Safari, Opera */
                    @-webkit-keyframes scrollthree    {
                        0%   {left:-10%; transform: translate(-100%, 0%);}
                        100%  {left:90%;transform: translate(100%, 0%);}
                    }

                    /* Standard syntax */
                    @keyframes scrollthree    {
                        0%   {left:-10%; transform: translate(-100%, 0%);}
                        100%  {left:90%;transform: translate(100%, 0%);}
                    }
                    /* Firefox */
                    @-moz-keyframes scrollthree   {
                        0%   {left:-10%; transform: translate(-100%, 0%);}
                        100%  {left:90%;transform: translate(100%, 0%);}
                    }

p.banner4   {   font-family: Arial, Helvetica, sans-serif;
            	font-size: 162.5%;
            	font-weight: bold;
            	line-height: 100%;
            	color: white;
                position: relative;
                display: inline-block;
                margin: 0.5em;
                left:-10%;
                transform: translate(-100%, 0%);

                    /* Chrome, Safari, Opera */    
                    -webkit-animation-name: scrollfour;
                    -webkit-animation-duration: 20s;
                    -webkit-animation-timing-function: linear;
                    -webkit-animation-iteration-count: infinite;
                    -webkit-animation-play-state: running;
                    -webkit-animation-fill-mode: backwards;
                    -webkit-animation-delay: 18s;

                    /* Standard syntax */
                    animation-name: scrollfour;
                    animation-duration: 20s;
                    animation-timing-function: linear;
                    animation-iteration-count: infinite;
                    animation-play-state: running;
                    animation-fill-mode: backwards;
                    animation-delay: 18s;

                    /* Firefox */
                    -moz-animation-name: scrollfour;
                    -moz-animation-duration: 20s;
                    -moz-animation-timing-function: linear;
                    -moz-animation-iteration-count: infinite;
                    -moz-animation-play-state: running;
                    -moz-animation-fill-mode: backwards;
                    -moz-animation-delay: 18s;
               
            }

     /* Chrome, Safari, Opera */
                    @-webkit-keyframes scrollfour    {
                        0%   {left:-10%; transform: translate(-100%, 0%);}
                        100%  {left:90%;transform: translate(100%, 0%);}
                    }

                    /* Standard syntax */
                    @keyframes scrollfour    {
                        0%   {left:-10%; transform: translate(-100%, 0%);}
                        100%  {left:90%;transform: translate(100%, 0%);}
                    }
                    /* Firefox */
                    @-moz-keyframes scrollfour   {
                        0%   {left:-10%; transform: translate(-100%, 0%);}
                        100%  {left:90%;transform: translate(100%, 0%);}
                    }


.hover-title {
    display: inline;
    pointer-events: auto;
    cursor: pointer;
}

.hover-image {
    visibility: hidden;
}

body:not(.mobile) .hover-title:hover + .hover-image {
    visibility: visible;
    pointer-events: none;
}

.hover-image {
    display: flex;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: -1;
    pointer-events: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;

/* Change width and height to scale images */
    width: 90vw;
    height: 90vh;
}

.hover-image img {
    max-width: 100% !important;
    max-height: 100% !important;
    width: auto !important;
    height: auto !important;
    margin-bottom: 0;
}


@media screen and (max-width: 640px)	{
	
img.corner	{	width: 15%;
			}

.rectangle	{	max-width:100%;
				height: 0px;
				width: 0%;
				display: inline-block;
				background-color: black;
			}

img.home 	{	max-width: 100%;
    			height: auto;
    			width: 100%;
    			display: inline-block;
    		}

video   {   max-width: 100%;
            height: auto;
            width: 100%;
            display: inline-block;
        }            

.thing 	{	max-width: 100%;
    		height: auto;
    		width: 100%;
    		display: inline-block;
    	}

.column {   position: absolute;
            max-width: 100%;
            height: auto;
            width: 90%;
            -webkit-column-count: 1; /* Chrome, Safari, Opera */
            -moz-column-count: 1; /* Firefox */
            column-count: 1;
            font-family: Arial, Helvetica, sans-serif;
            font-size: 125%;
            font-weight: normal;
            color: #999999;
            line-height: 125%;
        }

.cornertext {   bottom: 100px;
            }

}