ul { padding:0 }

a img {border: none; }

     P {  
         font-family:arial, helvetica, sans-serif;
font-weight: normal;
         font-size:11pt;
         color:White;       }

		 
P.address {  
         font-family:arial, helvetica, sans-serif;
font-weight: normal ;
         font-size:1.5vw;
         color:#888888 ;       }
		 
		 P.projecttext {  
         font-family:arial, helvetica, sans-serif;
font-weight: normal ;
         font-size:1.8vw;
         color:White;     
	text-shadow: .12vw .12vw black;	 
	overflow-wrap: break-word;

		 }
		 		 
		 P.menu {  
         font-family:arial, helvetica, sans-serif;
font-weight: normal;
         font-size:7pt;
         color:red;       }

A.email { 
font-family:arial, helvetica, sans-serif;

         font-size:1.3vw;
    color:white;     
       }

	   h1 {
	   font-family:arial, helvetica, sans-serif;
font-weight: bold;
         font-size:16px;
    color:white;     
	   }

#lightbox{
	position: absolute;
	left: 0;
	width: 100%;
	z-index: 100;
	text-align: center;
	line-height: 0;
	}

#lightbox a img{ border: none; }

#outerImageContainer{
	position: relative;
	background-color: #fff;
	width: 250px;
	height: 250px;
	margin: 0 auto;
	}

#imageContainer{
	padding: 10px;
	}

#loading{
	position: absolute;
	top: 40%;
	left: 0%;
	height: 25%;
	width: 100%;
	text-align: center;
	line-height: 0;
	}
#hoverNav{
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	z-index: 10;
	}
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}

#prevLink, #nextLink{
	width: 49%;
	height: 100%;
	background: transparent url(/Images/blank.gif) no-repeat; /* Trick IE into showing hover */
	display: block;
	}
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(/Images/btn_back.png) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(/Images/btn_next.png) right 15% no-repeat; }


#imageDataContainer{
	font: 10px Verdana, Helvetica, sans-serif;
	background-color: #fff;
	margin: 0 auto;
	line-height: 1.4em;
	}

#imageData{	padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }	
#imageData #caption{ font-weight: bold;	}
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;	}			
#imageData #bottomNavClose{ width: 66px; float: right;  padding-bottom: 0.7em;	}	
		
#overlay{
	position: absolute;
	top: 0;
	left: 0;
	z-index: 90;
	width: 100%;
	height: 500px;
	background-color: #000;
	}
	

/* Min-Width */
.lbWidth { /* most browsers */
	position: absolute;
	top: 0px; left: 0px;
	width: 100%;
	min-width: 830px;
	}

* html .lbContent { /* IE6 */
	margin-left: -830px;
	position:relative;
	}

* html .lbMinWidth { /* IE6 */
	padding-left: 830px;
	}
	
	
/* Clearfix */	
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */ 



#fl_menu{position:absolute; top:25px; left:30px; z-index:999; }

#fl_menu .label{padding:0.2vw 1.0vw;  font-family: 'Jura', sans-serif;  font-size: 24px; font-weight:400; background:rgba(0,0,0,0); color:rgba(255,255,255,1); text-shadow: 1px   1px   black; letter-spacing:0.15vw;}
#fl_menu .label:hover{padding:0.2vw 1.0vw;  font-family: 'Jura', sans-serif;  font-size: 24px; font-weight:400; background:rgba(55, 55, 55, 0.73); color:rgba(255,255,255,1); text-shadow: 1px   1px   black; letter-spacing:0.15vw;}
#fl_menu .menu{display:none;}

#fl_menu .labelthin{padding:0.2vw 1.0vw;  font-family: 'Jura', sans-serif;  font-size: 24px; font-weight:400; text-shadow: 1px   1px   black; background:rgba(0,0,0,0); color:rgba(255,255,255,1)  ; letter-spacing:0.15vw;}
#fl_menu .menu{display:none;}

#fl_menu .menu .menu_item{display:block; background-color:rgba(55, 55, 55, 0.73);   color:rgba(255,255,255,0.9); font-size: 20px; text-shadow: 1px   1px   black; padding:0.4vw 1.1vw; font-weight:normal; font-family:Arial, Helvetica, sans-serif; text-decoration:none;}
#fl_menu .menu a.menu_item:hover{background:rgba(0,0,0,1);  color:rgba(255,255,255,1);  text-shadow: 1px   1px   black;}

#fl_menu .menu .menu_item_r{display:block; background-color:rgba(55, 55, 55, 0.73); text-align: right; right:-5vw; color:rgba(255,255,255,1);  text-shadow: 1px   1px   black; word-wrap: normal; font-size: 20px; padding:0.4vw 1.1vw; font-weight:normal; font-family:Arial, Helvetica, sans-serif;  text-decoration:none;}
#fl_menu .menu a.menu_item_r:hover{background:rgba(20,0,0,1); right:0px; color:rgba(255,255,255,1);  text-shadow: 1px   1px   black;}

#fl_menu .menu .menu_item_blank{display:block; background-color:rgba(55, 55, 55, 0.73); text-align: left; right:0px; color:rgba(200,200,200,1); font-size: 20px;  text-shadow: 1px   1px   black; padding:0.4vw 1.1vw; font-weight:normal; font-family:Arial, Helvetica, sans-serif;  text-decoration:none;}
.content{width:400px; margin:50px auto;}

#fl_menu .menu .menu_item_blank2{display:block; background-color:rgba(0,0,0,0); font-size: 1vw; text-align: right;  color:rgba(200, 200,200,0.8);  padding:0.73vw 1.1vw; font-weight:normal; font-family:Arial, Helvetica, sans-serif; text-decoration:none;}
.content{width:400px; margin:50px auto;}
	
#fl_menu .menu .menu_item_red{display:block; background-color:rgba(55, 55, 55, 0.73); text-align: right; right:-5vw; color: yellow;  text-shadow: 3px   3px   black; word-wrap: normal; font-size: 20px; padding:0.4vw 1.1vw; font-weight:bold; font-family: 'Jura', sans-serif;   text-decoration:none;}
#fl_menu .menu a.menu_item_red:hover{background:rgba(20,0,0,1); right:0px; color: green;  font-weight:bold; text-shadow: 1px   1px   black;}


@media (max-width: 800px) {
#fl_menu .label{padding:0.2vw 1.0vw;  font-family: 'Jura', sans-serif;  font-size: 18px; text-shadow: 1px   1px   black; background:rgba(0,0,0,0); color:rgba(255,255,255,1) ; letter-spacing:0.15vw;}
#fl_menu .label:hover{padding:0.2vw 1.0vw;  font-family: 'Jura', sans-serif;  font-size: 18px; text-shadow: 1px   1px   black; background:rgba(55, 55, 55, 0.73); color:rgba(255,255,255,1) ; letter-spacing:0.15vw;}

#fl_menu .menu{display:none;}

#fl_menu .labelthin{padding:0.2vw 1.0vw;  font-family: 'Jura', sans-serif;  font-size: 18px; font-weight:400; text-shadow: 1px   1px   black; background:rgba(0,0,0,0); color:rgba(255,255,255,1)  ; letter-spacing:0.15vw;}
#fl_menu .menu{display:none;}

#fl_menu .menu .menu_item{display:block; background-color:rgba(55, 55, 55, 0.73);   color:rgba(255,255,255,0.9); font-size: 14px; text-shadow: 1px   1px   black; padding:0.4vw 1.1vw; font-weight:normal; font-family:Arial, Helvetica, sans-serif; text-decoration:none;}
#fl_menu .menu a.menu_item:hover{background:rgba(0,0,0,1);  color:rgba(255,255,255,1);  text-shadow: 1px   1px   black;}

#fl_menu .menu .menu_item_r{display:block; background-color:rgba(55, 55, 55, 0.73); text-align: right; right:0px; color:rgba(255,255,255,1);  text-shadow: 1px   1px   black; font-size: 14px; padding:0.4vw 1.1vw; font-weight:normal; font-family:Arial, Helvetica, sans-serif;  text-decoration:none;}
#fl_menu .menu a.menu_item_r:hover{background:rgba(20,0,0,1); right:0px; color:rgba(255,255,255,1);  text-shadow: 1px   1px   black;}

#fl_menu .menu .menu_item_blank{display:block; background-color:rgba(55, 55, 55, 0.73); text-align: left; right:0px; color:rgba(200,200,200,1); font-size: 14px;  text-shadow: 1px   1px   black; padding:0.4vw 1.1vw; font-weight:normal; font-family:Arial, Helvetica, sans-serif;  text-decoration:none;}
.content{width:400px; margin:50px auto;}

#fl_menu .menu .menu_item_blank2{display:block; background-color:rgba(0,0,0,0); font-size: 1vw; text-align: right;  color:rgba(200, 200,200,0.8);  padding:0.73vw 1.1vw; font-weight:normal; font-family:Arial, Helvetica, sans-serif; text-decoration:none;}
.content{width:400px; margin:50px auto;}
}





	
img.bg {
			/* Set rules to fill background */
			min-height: 100%;
			min-width: 1024px;
			
			/* Set up proportionate scaling */
			width: 100%;
			height: 100%;
			
			/* Set up positioning */
			position: fixed;
			top: 0;
			left: 0;
		}
		
		@media screen and (max-width: 1024px){
			img.bg {
				left: 50%;
				margin-left: -512px; }
		}
		
		#page-wrap { position: relative; margin: 0px auto; word-wrap: break-word; padding: 0px; background: rgba(0,0,0,0.1); -moz-box-shadow: 0 0 40px black; -webkit-box-shadow: 0 0 40px black; box-shadow: 0 0 100px black; }
		p { font: 15px/2 Arial, Serif; margin: 0 0 5px 0; text-indent: 5px; }


        jssor_slider1_starter = function (containerId) {

            //Reference http://www.jssor.com/development/slider-with-caption.html
            //Reference http://www.jssor.com/development/reference-ui-definition.html#captiondefinition
            //Reference http://www.jssor.com/development/tool-caption-transition-viewer.html

            var _CaptionTransitions = [
            //CLIP|LR
            {$Duration: 900, $Clip: 3, $Easing: $JssorEasing$.$EaseInOutCubic },
            //CLIP|TB
            {$Duration: 900, $Clip: 12, $Easing: $JssorEasing$.$EaseInOutCubic },

            //ZMF|10
            {$Duration: 600, $Zoom: 11, $Easing: { $Zoom: $JssorEasing$.$EaseInExpo, $Opacity: $JssorEasing$.$EaseLinear }, $Opacity: 2 },

            //ZML|R
            {$Duration: 600, $Zoom: 11, $FlyDirection: 2, $Easing: { $Left: $JssorEasing$.$EaseInCubic, $Zoom: $JssorEasing$.$EaseInCubic }, $ScaleHorizontal: 0.6, $Opacity: 2 },
            //ZML|B
            {$Duration: 600, $Zoom: 11, $FlyDirection: 8, $Easing: { $Top: $JssorEasing$.$EaseInCubic, $Zoom: $JssorEasing$.$EaseInCubic }, $ScaleVertical: 0.6, $Opacity: 2 },

            //ZMS|B
            {$Duration: 700, $Zoom: 1, $FlyDirection: 8, $Easing: { $Top: $JssorEasing$.$EaseInCubic, $Zoom: $JssorEasing$.$EaseInCubic }, $ScaleVertical: 0.6, $Opacity: 2 },

            //RTT|10
            {$Duration: 700, $Zoom: 11, $Rotate: 1, $Easing: { $Zoom: $JssorEasing$.$EaseInExpo, $Opacity: $JssorEasing$.$EaseLinear, $Rotate: $JssorEasing$.$EaseInExpo }, $Opacity: 2, $Round: { $Rotate: 0.8} },

            //RTTL|R
            {$Duration: 700, $Zoom: 11, $Rotate: 1, $FlyDirection: 2, $Easing: { $Left: $JssorEasing$.$EaseInCubic, $Zoom: $JssorEasing$.$EaseInCubic, $Opacity: $JssorEasing$.$EaseLinear, $Rotate: $JssorEasing$.$EaseInCubic }, $ScaleHorizontal: 0.6, $Opacity: 2, $Round: { $Rotate: 0.8} },
            //RTTL|B
            {$Duration: 700, $Zoom: 11, $Rotate: 1, $FlyDirection: 8, $Easing: { $Top: $JssorEasing$.$EaseInCubic, $Zoom: $JssorEasing$.$EaseInCubic, $Opacity: $JssorEasing$.$EaseLinear, $Rotate: $JssorEasing$.$EaseInCubic }, $ScaleVertical: 0.6, $Opacity: 2, $Round: { $Rotate: 0.8} },

            //RTTS|R
            {$Duration: 700, $Zoom: 1, $Rotate: 1, $FlyDirection: 2, $Easing: { $Left: $JssorEasing$.$EaseInQuad, $Zoom: $JssorEasing$.$EaseInQuad, $Rotate: $JssorEasing$.$EaseInQuad, $Opacity: $JssorEasing$.$EaseOutQuad }, $ScaleHorizontal: 0.6, $Opacity: 2, $Round: { $Rotate: 1.2} },
            //RTTS|B
            {$Duration: 700, $Zoom: 1, $Rotate: 1, $FlyDirection: 8, $Easing: { $Top: $JssorEasing$.$EaseInQuad, $Zoom: $JssorEasing$.$EaseInQuad, $Rotate: $JssorEasing$.$EaseInQuad, $Opacity: $JssorEasing$.$EaseOutQuad }, $ScaleVertical: 0.6, $Opacity: 2, $Round: { $Rotate: 1.2} },

            //R|IB
            {$Duration: 900, $FlyDirection: 2, $Easing: { $Left: $JssorEasing$.$EaseInOutBack }, $ScaleHorizontal: 0.6, $Opacity: 2 },
            //B|IB
            {$Duration: 900, $FlyDirection: 8, $Easing: { $Top: $JssorEasing$.$EaseInOutBack }, $ScaleVertical: 0.6, $Opacity: 2 },

            ];

            var options = {
                $AutoPlay: true,                                    //[Optional] Whether to auto play, to enable slideshow, this option must be set to true, default value is false
                $AutoPlaySteps: 1,                                  //[Optional] Steps to go for each navigation request (this options applys only when slideshow disabled), the default value is 1
                $AutoPlayInterval: 4000,                            //[Optional] Interval (in milliseconds) to go for next slide since the previous stopped if the slider is auto playing, default value is 3000
                $PauseOnHover: 1,                               //[Optional] Whether to pause when mouse over if a slider is auto playing, 0 no pause, 1 pause for desktop, 2 pause for touch device, 3 pause for desktop and touch device, default value is 1

                $ArrowKeyNavigation: true,   			            //[Optional] Allows keyboard (arrow key) navigation or not, default value is false
                $SlideDuration: 500,                                //[Optional] Specifies default duration (swipe) for slide in milliseconds, default value is 500
                $MinDragOffsetToSlide: 20,                          //[Optional] Minimum drag offset to trigger slide , default value is 20
                //$SlideWidth: 800,                                 //[Optional] Width of every slide in pixels, default value is width of 'slides' container
                //$SlideHeight: 300,                                //[Optional] Height of every slide in pixels, default value is height of 'slides' container
                $SlideSpacing: 0, 					                //[Optional] Space between each slide in pixels, default value is 0
                $DisplayPieces: 1,                                  //[Optional] Number of pieces to display (the slideshow would be disabled if the value is set to greater than 1), the default value is 1
                $ParkingPosition: 0,                                //[Optional] The offset position to park slide (this options applys only when slideshow disabled), default value is 0.
                $UISearchMode: 1,                                   //[Optional] The way (0 parellel, 1 recursive, default value is 1) to search UI components (slides container, loading screen, navigator container, arrow navigator container, thumbnail navigator container etc).
                $PlayOrientation: 1,                                //[Optional] Orientation to play slide (for auto play, navigation), 1 horizental, 2 vertical, default value is 1
                $DragOrientation: 3,                                //[Optional] Orientation to drag slide, 0 no drag, 1 horizental, 2 vertical, 3 either, default value is 1 (Note that the $DragOrientation should be the same as $PlayOrientation when $DisplayPieces is greater than 1, or parking position is not 0)

                $CaptionSliderOptions: {                            //[Optional] Options which specifies how to animate caption
                    $Class: $JssorCaptionSlider$,                   //[Requi#F44336] Class to create instance to animate caption
                    $CaptionTransitions: _CaptionTransitions,       //[Requi#F44336] An array of caption transitions to play caption, see caption transition section at jssor slideshow transition builder
                    $PlayInMode: 1,                                 //[Optional] 0 None (no play), 1 Chain (goes after main slide), 3 Chain Flatten (goes after main slide and flatten all caption animations), default value is 1
                    $PlayOutMode: 3                                 //[Optional] 0 None (no play), 1 Chain (goes before main slide), 3 Chain Flatten (goes before main slide and flatten all caption animations), default value is 1
                },

                $BulletNavigatorOptions: {                                //[Optional] Options to specify and enable navigator or not
                    $Class: $JssorBulletNavigator$,                       //[Requi#F44336] Class to create navigator instance
                    $ChanceToShow: 2,                               //[Requi#F44336] 0 Never, 1 Mouse Over, 2 Always
                    $AutoCenter: 0,                                 //[Optional] Auto center navigator in parent container, 0 None, 1 Horizontal, 2 Vertical, 3 Both, default value is 0
                    $Steps: 1,                                      //[Optional] Steps to go for each navigation request, default value is 1
                    $Lanes: 1,                                      //[Optional] Specify lanes to arrange items, default value is 1
                    $SpacingX: 10,                                   //[Optional] Horizontal space between each item in pixel, default value is 0
                    $SpacingY: 10,                                   //[Optional] Vertical space between each item in pixel, default value is 0
                    $Orientation: 1                                 //[Optional] The orientation of the navigator, 1 horizontal, 2 vertical, default value is 1
                },

                $ArrowNavigatorOptions: {
                    $Class: $JssorArrowNavigator$,              //[Requried] Class to create arrow navigator instance
                    $ChanceToShow: 1,                               //[Requi#F44336] 0 Never, 1 Mouse Over, 2 Always
                    $Steps: 1                                       //[Optional] Steps to go for each navigation request, default value is 1
                }
            };
            var jssor_slider1 = new $JssorSlider$(containerId, options);
            //responsive code begin
            //you can remove responsive code if you do not want the slider scales while window resizes
            function ScaleSlider() {
                var parentWidth = jssor_slider1.$Elmt.parentNode.clientWidth;
                if (parentWidth)
                    jssor_slider1.$SetScaleWidth(Math.min(parentWidth, 800));
                else
                    $JssorUtils$.$Delay(ScaleSlider, 30);
            }

            ScaleSlider();
            $JssorUtils$.$AddEvent(window, "load", ScaleSlider);


            if (!navigator.userAgent.match(/(iPhone|iPod|iPad|BlackBerry|IEMobile)/)) {
                $JssorUtils$.$OnWindowResize(window, ScaleSlider);
            }
	
            //if (navigator.userAgent.match(/(iPhone|iPod|iPad)/)) {
            //    $JssorUtils$.$AddEvent(window, "orientationchange", ScaleSlider);
            //}
            //responsive code end
        };
		
		
body{margin:0px; padding:0px;}

#loading {
   width: 100%;
   height: 100%;
   top: 0px;
   left: 0px;
   position: fixed;
   display: block;
   opacity: 0.7;
   background-color: #fff;
   z-index: 99;
   text-align: center;
}

#loading-image {
  position: absolute;
  top: 100px;
  left: 240px;
  z-index: 100;
}
a {
  color: #900;
  text-decoration: none;
}

a:hover {
  color: #F44336;
  position: relative;
}

a[title]:hover:after {
  content: attr(title);
  padding: 4px 8px;
  color: #333;
  position: absolute;
  left: 0;
  top: 100%;
  z-index: 20;
  white-space: nowrap;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  -moz-box-shadow: 0px 0px 4px #222;
  -webkit-box-shadow: 0px 0px 4px #222;
  box-shadow: 0px 0px 4px #222;
  background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
  background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #eeeeee),color-stop(1, #cccccc));
  background-image: -webkit-linear-gradient(top, #eeeeee, #cccccc);
  background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
  background-image: -ms-linear-gradient(top, #eeeeee, #cccccc);
  background-image: -o-linear-gradient(top, #eeeeee, #cccccc);
}