@CHARSET "ISO-8859-1";

/*********** Global ************/
    h1 {
        color:#fff;
	    font-size:20px;
    	padding:5%;
    	font:Helvetica;
    }
    h2 {
        color:#000;
	    font-size:20px;
    	padding:5%;
    	font:Helvetica;
    }
    img {
    	max-width:100%; 
        max-height:100%;
        width:auto;
        height:auto;
    }
/** links **/  
a {
    color: black;
    text-decoration: underline;
    font:bold;
}
/* unvisited link */
a:link {
    color: black;
    text-decoration: underline;
    font:bold;
}

/* visited link */
a:visited {
    color: darkblue;
    text-decoration: underline;
    font:bold;
}

/* mouse over link */
a:hover {
    color: hotpink;
    text-decoration: underline;
    font:bold;
}

/* selected link */
a:active {
    color: blue;
    text-decoration: underline;
    font:bold;
}

    #menuNav {
        position:fixed;
        background: transparent;
        display: inline-block;
        z-index: 99999;
    }

     #jButton {
        position:fixed;
		top:16px;
		left:14px;
        background: transparent;
		border:none;
        display: inline-block;
        z-index: 99999;
    }
    #oButton {
		position:fixed;
    	top:16px;
		left:86px;
        background: transparent;
		border:none;
		display: inline-block;
        z-index: 99999;
    }
    #hButton {
		position:fixed;
    	top:66px;
		left:14px;
        background: transparent;
		border:none;
		display: inline-block;
        z-index: 99999;
    }
    #nButton {
		top:66px;
		left:86px;
		position:fixed;
        background: transparent;
		border:none;
		display: inline-block;
        z-index: 99999;
    }

    #jButton:hover, #oButton:hover, #hButton:hover, #nButton:hover {
	cursor: url(images/cursors/dotcursor/dotcursor.png), auto;
	border:hidden;
    }
    #jButton:active, #oButton:active, #hButton:active, #nButton:active {
	background: transparent;
	border:hidden;
    }

    #jButton:visited, #oButton:visited, #hButton:visited, #nButton:visited {
	background: transparent;
	border:hidden;
    }

    #jButton:focus, #oButton:focus, #hButton:focus, #nButton:focus {
	background: transparent;
	border:hidden; 
    }
/************** Popup ***************/
.column {
  float: left;
  width: 50%;
}

/* Clear floats after the columns */
.row:after {
  display: table;
  clear: both;
}

/************** Arrow Buttons ****************/
    #projectUp {	
        position:fixed;
        top: .10%;
		left: 50%;
    	transform: translateX(-50%);
		z-index: 99999;
    }
    #projectDown {
        position:fixed;
        bottom: .25%;
        left: 50%;
    	transform: translateX(-50%);
        z-index: 99999;
    }
    
    #slideRight {
        position:fixed;
		right: .25%;
        bottom: 50%;
    	transform: translateY(50%);
        z-index: 99999;
    }
    #slideLeft {
        position:fixed;
        left: .5%;
		bottom: 50%;
    	transform: translateY(50%);
        z-index: 99999;
    }

    #slideRight a, #slideLeft a, #projectUp a, #projectDown a {
        background: transparent;
        color: #000;
        display: inline-block;
    }
    #slideRight a:hover, #slideLeft a:hover, #projectUp a:hover, #projectDown a:hover {
        cursor: url(images/cursors/dotcursor/dotcursor.png), auto;
        border:hidden;
    }
    
/************ About Popup ***************/
    #about {
        
        margin:0 auto;
    }
    #about_column {
        float:left;
        padding-right: 0px;
        height:400px;
        width:400px;
        /*display:inline;
        position:relative;*/
    }

    /* Clear floats after the columns */
    #about_row:after {
        content: "";
        display: table;
        clear: both;
    }
    #about_row {
        width:840px;
        margin:0 auto;
        background-color:rgba(255,255,255, 0.95);
    }

    #about_img {
        border: none;
        display: block;
    }
    
/**************** Contact Popup ****************/
    #contact {
        height:85%;
        width:85%;
        margin: 0 auto;
        background-color:rgba(186,109,122, 0);
    }
    #contact:hover {
        
    }
    #contact_img {
        margin:auto;
        display: block;
        cursor: url(images/cursors/dotcursor/yellowcursor.png), auto;
    }

/******************* Info Popup  *******************/
    #info {
        background-color:rgba(0,0,0,.85);
        height:60%;
        width:60%;
    }
    #info_column {
        float:left;
        width:100%;
        /*max-height:100%;
        max-width:100%;
        display:inline;
        position:relative;*/
    }

    /* Clear floats after the columns 
    #info_row:after {
        content: "";
        display: table;
        clear: both;
    }
    #info_row {
        width:940px;
        margin:5% auto;
    }

    #info_img {
        border: none;
        display: block;
        z-index:999999;
    }*/
    
    .info_open {
        cursor: url(images/cursors/dotcursor/yellowcursor.png), auto;
    }
    
    /*----------------------- Preloader -----------------------*/
#preloader_bg {
    position:fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: #FFF url('images/preloader_duck.gif') no-repeat center;
    background-size: cover;
    z-index:999999999;
}
#preloader_bar {
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: url('images/preloader_bar.gif') no-repeat center;
    z-index:999999999;
}