html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { border: 0; outline: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; margin: 0; padding: 0; }	
:focus { outline: 0; }


body {
  background: #FFF;
  color: #000;
  line-height: 1.4;
  overflow:hidden;
}
ol, ul {
  list-style: none;
}
/*************************************/
/* ELEMENTS
/*************************************/
html {
  font-size: 100%; /*62.5%*/
  width: 100%;
  height: 100%;
}
body {
  
  color: #3d3d3d;
  font-family: Helvetica, Helvetica Neue, Arial, sans-serif;
  font-size: 16px/26px; font-size: 1rem/1.625rem;  
    height:100%; /* Blank */
    
}
body#portfolio-page {
  background: #000;
  height:100%; /* Blank */
  overflow:hidden;

}

#portfolio-header{
    
        position:relative;
        z-index:9;
        width:100%; 
        height:60px;
        background-image:url(../images/misc/homelink_logo.png);
        background-repeat: no-repeat;
        background-position:left center; 
        background-color:rgb(104,93,69);
        box-shadow: 0px 1px 7px #000;
    
    
}

#homeButton{
    
    
	/*display: block; */
	height: 60px;
	margin-left: 9px;
    cursor:pointer; 
    float:left; 
    width:183px;
    
    
    
}

#buttonElement{
    
    width:100%; 
    height:60px;
    margin:0; 
    position:absolute;
    
}

.mediaButtons{
    
    margin:0; 
    position:absolute;
    left:50%;
    top:0;
    width:591px;
    height:60px;
    box-sizing: border-box;
    float: left;
    transform: translate(-50%, 0%); 
 
}


.mediaButtons img{
    
    float:left; 
    box-sizing: border-box; 
    /*width:35px;*/
    max-height:61px;
    display:block; 
    padding:19px 7px; 
    
    
}

a {
  color: #333333; 
  font-weight: bold;
  text-decoration: none;
}
  a:hover {
	color: #7b8738;
	text-decoration: underline;
  }
  a:link img, a img, a:hover img, a:visited img {
	border: none;
  }
div {
  box-sizing: border-box;  	
  -moz-box-sizing: border-box;  
  -webkit-box-sizing: border-box;
}



ul li, p {
  font-size: 13px; font-size: 0.813rem;
}

/*************************************/
/* SITE LAYOUT                       */
/*************************************/

#container {
  width: 100%; 
  background-color:black;
}




  .hide {
	position: absolute;
	left: 0;
	top: -500px;
	width: 1px;
	height: 1px;
	overflow: hidden;
  }
  

.pageCounter{
    
    box-sizing: border-box;
    position: relative;
    margin:0 auto;
    height:25px;
    font-size: 10pt;
    font-family: Arial, Sans-Serif;
    font-weight:600;
    text-align: center;
    border-radius: 7px;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;   
    border:0px solid black;
    background-color: rgba(0,0,0,0.5);
    color: white;
    display: block;
    top: -19px;
    z-index:9;
    padding:5px 0;
    width:250px;

    
}


  a#trigger {
    background: #f4d36c;
    display: block;
    box-sizing: border-box;
    height: 36px;
    width: 177px;
    margin: 12px;
    padding: 8px;
    text-decoration: none;
    float: right;
    cursor: pointer;
    font-size: 11pt;
    font-weight: 600;
    font-family: arial, sans-serif;
    text-align: center;
    color: #1e1609;

  }


	a#trigger:hover {
	  background: #c7a46c;
	}


#panel {
  background-color: #e6e0be;
  border-left: 1px solid #bdbda3;
  height: 100%;
  position: fixed;
  right: -32%;
  top: 60px;
  width: 18.8%;
}
#index {
  margin: 18px 0 0 18px;
}
  #index ul#indexNav {
	list-style: none;
	margin-bottom: 18px;
	overflow: hidden;	  
  }
	#index ul#indexNav li {
	  list-style: none;
	  display: inline;
	  float: left;
	  height: 22px;
	  margin: 1px;	
	  text-align: center;
	}
	#index ul#indexNav li a {
	  background-color: #d9d4b3;	  
	  color: #496666;
	  display: block;
	  height: 22px;
	  line-height: 22px;
	  text-decoration: none;
	  width: 21px;
	}
    #index ul#indexNav > .active > a,
	#index ul#indexNav > .active > a:hover {
	  background-color: #496666;
	  color: #fff;
	}
.indexSection {
  overflow: auto;
}
  .indexSection.hide {
	display: none;
  }
  .indexSection.active {	
	display: block;
  }
  .indexSection ul li {
	margin-right: 18px;
  }  
ul.index {
  list-style-type: none;	
}
  ul.index li {
	border-top: 1px dotted #bdbda3;
  }
  ul.index li:first-child {
	border: none;	
	padding-top: 0;
  }
  ul.index li a {
	display: block;
	font-weight: normal;
	padding: 6px;	
	text-decoration: none;
  }
  ul.index li a:hover, ul.index li a:active {
    background-color: #d9d4b3;
	color: #3d3d3d;
  }


 #myViewerContent {
      height: 100%;   
      left: 0;
      position: absolute;
      overflow: hidden;
      top: 60px;
      width: 100%;
 
}
   
.zoomIn{
        
        cursor:zoom-in;
        
        
} 

.zoomOut{
        
       cursor:zoom-out;

}
    
    .imgLinks{
        
        position:absolute; 
        top:50px; 
        right:70px; 
        background-color:white; 
        opacity:.5; 
        width:3.5%; 
        height:5%; 
        border-radius:30px; 
        border:1px solid;
        
        
    }
    
    .imgLinks span{
        
        width:100%;
        height:100%; 
        position:absolute; 
        z-index:999; 
        cursor:pointer;
  
    }

.slides{
  position: relative;
   display: block;
    overflow-x: hidden;
    overflow-y:hidden; /* new */

}

.slides:focus{
 outline: 0;
}

.slides figure:first-child{
  position: absolute;
  overflow-x: hidden;
  overflow-y:hidden; /* new */

}

.slides .showSlide{
     position:absolute;
     z-index: 2;
     opacity: 0;  /* cover up the sloppy slides moving around */
     width:100%; 
     overflow-x: hidden;
     overflow-y:hidden; /* new */

}

figure{
    
    position:absolute;
    left:115%;
    top:0;
    opacity:0; /* cover up the sloppy slides moving around */
    margin:0 auto;
    transform: rotate(0deg);
    overflow-y:hidden; /* new */
    overflow-x: hidden;
    width:100%;
    height:100%;
    background:url(../images/misc/loading.gif) 50% no-repeat;
    background-size:120px;
    
        
}

    #imageContainer{

        box-sizing: border-box; 
        width:85%; 
        margin:0 auto; 
        position:relative; 
        overflow-x:hidden; 
        /* overflow-y:auto; */
        overflow-y:hidden; /* new */


    }


.nextSlide, .previousSlide{
  color: #fff;
  position: absolute;
  background: #000;
  background: rgba(0,0,0, .6);
  top: 44%;
  line-height:64pt;
  z-index: 4;
  font-size: 2em;
  margin-top: -1.2em;
  opacity: .5;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.nextSlide:hover, .previousSlide:hover{
  cursor: pointer;
  opacity: 1;
}
.nextSlide{
  right: -1px;
  padding: 10px 5px 15px 10px;
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
}
.previousSlide{
  left: 0;
  padding: 10px 10px 15px 5px;
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
}

/* Loading Animation Code */
#loader {
  position:absolute;
  left:50%;
  top:50%;
  margin:0;
  z-index:99;
  width:110px;
  height:110px;
  transform: translate(-50%, -50%);  
  -ms-transform: translate(-50%, -50%);   
}

#loader p{
            
    font-size:13pt;
    font-family: 'Arial Black', sans-serif;  
    color:white;
    font-weight:800;
    letter-spacing:0pt;
    position: absolute;  
    top:50%;
    left:50%;
    margin:0;
    transform: translate(-50%, -50%);  
    -ms-transform: translate(-50%, -50%); 
         
}

.double-bounce1{
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: rgb(104, 93, 69);
  opacity: 0.6;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-animation: sk-bounce 2.0s infinite ease-in-out;
  animation: sk-bounce 2.0s infinite ease-in-out;
} 
        
.double-bounce2 {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: #f3e7c9;
  opacity: 0.6;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-animation: sk-bounce 2.0s infinite ease-in-out;
  animation: sk-bounce 2.0s infinite ease-in-out;
}

.double-bounce1.off {
    -moz-animation-name: none;
	-webkit-animation-name: none;
	-ms-animation-name: none;
	animation-name: none;	
}
        
.double-bounce2.off {
    -moz-animation-name: none;
	-webkit-animation-name: none;
	-ms-animation-name: none;
	animation-name: none;	
}
  

.double-bounce2 {
  -webkit-animation-delay: -1.0s;
  animation-delay: -1.0s;
}

@-webkit-keyframes sk-bounce {
  0%, 100% { -webkit-transform: scale(0.0) }
  50% { -webkit-transform: scale(1.0) }
}

@keyframes sk-bounce {
  0%, 100% { 
    transform: scale(0.0);
    -webkit-transform: scale(0.0);
  } 50% { 
    transform: scale(1.0);
    -webkit-transform: scale(1.0);
  }
}
    
/* End of Loading Animation Code */

/* Beginning of Search Bar Styling */


 #ulTag{
            
            list-style-type:none;
           /* background-color:black;
            opacity: .75; */
            width:47%;
            margin:5px -21px 0 0 !important;
            padding:0;
            color:white;
            font-family:helvetica, arial, sans-serif;
            font-weight:lighter;
            font-size:10pt;
            float:right;
            display:none;
            max-height:400px;
            overflow-x: hidden; /* Hide horizontal scrollbar */
            overflow-y: scroll; /* Add vertical scrollbar */            
        }
        
       #ulTag li{
            
            width:90%;
            padding:10px 5px; 
            border-bottom:.5px solid rgba(255,255,255,.5);
            position:relative;
            margin:0 auto;
            background-color:rgba(0,0,0,.7);
   
        }
        
       #ulTag li a{
            
            color:white;
            font-family:helvetica, arial, sans-serif;
            font-weight:lighter;
            font-size:10pt;
            
            
            
        }
        
        #toggleClose{
            
            
            cursor:pointer;
            font-size:9pt;
            font-weight:600;
            background-color:rgba(255,255,255,.75);
            border:0px solid rgba(255,255,255,.75); 
            border-radius:0px;
            
            
        }


#submitContent{
    
    
    float:left;
    margin: 18px 0 0 10px;
    box-sizing:border-box;
    
    
}

#searchHere{
    
    
    width:170px;
    
    
}


#submit{
    
    
    height:23px;
    border-radius:0px;
    
}


/* End of Search Bar Styling */