/*    

	- Clearfix.........(line 29)
 	- Header...........(line xx)
    	- Menu.........(line xx)  	
		- Social.......(line xx)
    - Main/Design......(line xx) 
    - Content/Inner....(line xx)
    	- Slideshow....(line xx)
    - Contact..........(line xx)
        - Map..........(line xx)
    - Fonts............(line xx)
    - Tooltip..........(line xx)
  
Foxhaus Colors
	#F56D33 - Orange (nav text,  )
	#CD5B29 - Dark Orange ( )
	#F2F2F2 - Light Grey (body BG, )
	#CCCCCC - Medium Grey (header text, )
	#565656 - Med/Dark Grey(nav text, )
	#434343 - Dark Grey ( )
	#000000 - Black ( )
	#ffffff - White (header BG, ) 
	
*/




/* Clearfix ------------------------------------------------------------------------ */
	
	.clearfix:before,  
	.clearfix:after {  
	    content: " ";  
	    display: table;  
	}  
	.clearfix:after {  
	    clear: both;  
	}  
	 
	.clearfix {  
	    *zoom: 1;
	    overflow: auto;  
	}
	



/* Header ----------------------------------------------------------------------------- */
	
    header{
        display: block;
        position: fixed;
        width: 300px;
        min-height: 100%;
		margin: 0 auto;
        background: #ffffff;  /* White */
        float: left;
        overflow: hidden;
        z-index: 9999;
    }
	/* --- BREAK POINTS FOR SMALLER SCREEN SIZES --- */	
		@media only screen and (max-width:499px){
		
			header{
      			position: relative;
      			width: 100%;
      			height: 100%;
  		  	}
		}
		
    header .logo{
        width: 200px;
        margin: 50px 0 50px 50px;      
    }
	/* --- BREAK POINTS FOR SMALLER SCREEN SIZES --- */	
		@media only screen and (max-width:499px){
		
			header .logo{
       			width: 180px;
       			margin: -42px 0 0 -10px;
  		  	}
		}
		
    header .footer{
        position: absolute;
        top: 550px;
    }
	/* --- BREAK POINTS FOR SMALLER SCREEN SIZES --- */	
		@media only screen and (max-width:499px){
		
			header .footer{
        		display: block;
        		position: relative;
        		width: 100%;
        		top: -60px;
        		text-align: center;
    		}
		}
		
	header .rights p{
        color: #565656; /* Med/Dark Grey */
        font-family: "raleway-regular", arial;
        font-size: 11px;
        letter-spacing: 1px;
        line-height: 18px;
        margin-left: 77px; 
    }
	/* --- BREAK POINTS FOR SMALLER SCREEN SIZES --- */	
		@media only screen and (max-width:499px){
		
			header .rights p{
        		display: none;
    		}
			#menu_icon, .close_menu, .show_menu{
        		display: block;
    		}
    		.show_menu{
        		display: block;
    		}
		}
		
    header .rights a{
        font-family: "raleway-bold", arial;
        font-weight: bold;
        text-decoration: none;
    }
    
    header ul.social li a,
	.main .work a .caption,
	header nav ul li a{
	    transition:all .1s linear;
	    -webkit-transition:all .1s linear;
	    -moz-transition:all .1s linear;
	    -o-transition:all .1s linear;
	}
		
		
		
		
/* Header Menu ------------------------------------------------------------------------ */		

    header nav ul{
        display: inline;
        overflow: hidden;
        margin: 0 30px auto;
        list-style: none;
        text-align: center;
    }
	/* --- BREAK POINTS FOR SMALLER SCREEN SIZES --- */	
		@media only screen and (max-width:499px){
		
			header nav ul{
				display: none;
				position: relative;
    		}
    		
    		header #menu_icon, 
  		  	header .close_menu{
				float: right;
				margin: 30px 30px 0 0;
   			}
   			
   			header nav{
       			width: 100%;
				position: absolute;
				margin:0 0 0 0;
				background: #fff;
				z-index: 999;
    		}
		}
		
    header nav ul li{
        display: block;
        margin-bottom: 20px;
    }

    header nav ul li a{
        color: #565656;  /* Med/Dark Grey */
        font-family: "raleway-regular", arial;
        font-size: 14px;
        text-decoration: none;
        letter-spacing: 1px;
    }
	/* --- BREAK POINTS FOR SMALLER SCREEN SIZES --- */	
		@media only screen and (max-width:499px){
		
		    header nav ul li a{
		        display: block;
        		width: 100%;
        		padding: 12px 0 0 0;
        		text-align: center;
 				border-top: 1px solid #F2F2F2;  /* Light Grey */
        		background: #fff;
			}
		}
		
    header nav ul li a:hover{
        color: #CCCCCC;  /* Medium Grey */
    }
    
    header nav ul li a.selected{
		color: #F56D33;  /* Orange */
    }

	.js #menu {
		display:none;
	}
	
	.slicknav_menu {
		display:none;
	}
	
	.slicknav_btn {
		display:none;
	}
	
	.slicknav_icon {
		display:none;
	}
	
	/* --- BREAK POINTS FOR SMALLER SCREEN SIZES --- */	
		@media only screen and (max-width:499px){
		
			.js #menu {
				display:block;
			}
	
			.slicknav_menu {
				display:block;
			}
	
			.slicknav_btn {
				display:block;
			}
	
			.slicknav_icon {
				display:block;
			}
		}

	#menu_icon, .close_menu{
	    display: none;
	    float: right;
	    margin-right: 40px;
	    width: 40px;
	    height: 40px;
	    cursor: pointer;
	    background: url('../img/men_icons.png') no-repeat;
	}

	#menu_icon{    
	    background-position: 0 0;
	}

	.close_menu{
	    background-position: -41px 0!important;
	}
	
			

	
/* Header Social ---------------------------------------------------------------------- */
	
    header ul.social{
        list-style: none;
        margin: 0 0 5px 45px;
    }
	/* --- BREAK POINTS FOR SMALLER SCREEN SIZES --- */	
		@media only screen and (max-width:499px){
		
			header ul.social{
        		display: block;
        		margin: auto;
    		}
		}
		
    header ul.social li{
        display: block;
        float: right;
        position: relative;
        margin: 0 15px 15px 0;
    }

    header ul.social li a{
        display: block;
        width: 30px;
        height: 30px;
        background: url('../img/sm.png') no-repeat;
        background-position: 0 0;
    }

    header ul.social li a:hover{
        background: url('../img/sm_hover.png') no-repeat;
    }

    header ul.social li a.facebook,
    header ul.social li a.facebook:hover{
        background-position: 0 0;
    }

    header ul.social li a.linkedin,
    header ul.social li a.linkedin:hover{
        background-position: -31px 0;
    }

    header ul.social li a.behance,
    header ul.social li a.behance:hover{
        background-position: -62px 0;
    }

    header ul.social li a.twitter,
    header ul.social li a.twitter:hover{
        background-position: -93px 0;
    }

    header ul.social li a.pinterest,
    header ul.social li a.pinterest:hover{
        background-position: -124px 0;
    }

    header ul.social li a.instagram,
    header ul.social li a.instagram:hover{
        background-position: -155px 0;
    }




/*  Main Page / Design Grid ----------------------------------------------------------- */

	.main{
	    width: 100%;
	    height: 100%;
	    padding-left: 300px;
	    -moz-box-sizing: border-box;
	    -webkit-box-sizing: border-box;
	    box-sizing: border-box;
	    position: relative;
	    z-index: 55;
	    background: #ffffff; /* White - affects BG only behind content box*/
	    clear: both;
	}
	/* --- BREAK POINTS FOR SMALLER SCREEN SIZES --- */	
		@media only screen and (max-width:499px){
		
			.main{
				padding-left: 0;
			}
		}
	
	.main .work{
	    display: block;
	    width: 33.33333333333333%;  /* <---- 3-wide at >1000px */
	    height: auto;
	    float: left;
	    position: relative;
	    overflow: hidden;
	}
	/* --- BREAK POINTS FOR SMALLER SCREEN SIZES --- */	
		@media only screen and (max-width:999px){
		.main .work{
			width: 50%;  /* <---- 2-wide at 650px-999px */
			}
		}
		@media only screen and (max-width:649px){
		.main .work{
			width: 100%;  /* <---- 1-wide at <649px */
			}
		}
	
	.main .work .media{
	    width: 100%;
	    vertical-align: middle;
	}
	
	.main .work .caption{  /* white square over home page thumbnails */
	    position: absolute;
	    display: block;
	    width: 90%;
	    height: 90%;
	    top: 5%; 
	    left: 5%;
	    background: #ffffff; /* White */
	    opacity: 0;
	}
	
	.main .work a:hover .caption{
	    opacity: 0.9;
	}
	
	.main .work .caption h1{
		position: relative;
	    display: inline-block;
	    max-width: 90%;
	    padding: 20px 0;
	    z-index: 77;
	    color: #565656; /* Med/Dark Grey */
	    font-family: "raleway-regular", arial;
	    font-size: 16px;
	    letter-spacing: .5px;
	    border-bottom: 0px solid #CCCCCC;  /* Medium Grey */
	    border-top: 0px solid #CCCCCC;  /* Medium Grey */
	}
	
		.work .caption .work_title{
	    display: block;
	    width: 100%;
	    position: absolute;
	    text-align: center;
	    top: 50%;
	    margin-top: -40px;
	}


/*  Content / Inner Pages ------------------------------------------------------------- */

	a {
	    text-decoration:none;
	    color: #F56D33;  /* Orange */
	    font-family: "raleway-regular", arial;
	}
	
	.container{
		width: 90%;
		margin: 0 auto;
	}
	
	.content_header{
	    position: relative;
	    top: 10;
	    margin: 0 auto;
	    left: 50%;
	    margin-left: -47%;
	}
	
	.content{ /* project description box & text, copywriting text */
	    color: #565656;  /* Med/Dark Grey */
	    font-family: "raleway-regular", arial;
	    font-size: 15px;
	    line-height: 22px;
	    padding: 0px 0px; /* text distance from box edge */
	    background: #ffffff;  /* White */
	    text-rendering: optimizeLegibility; 
	    text-shadow: 0px 0px 1px rgba(255,255,255,.1);
	    
	    -webkit-font-smoothing: antialiased;
	    -webkit-box-sizing: border-box;
	    -moz-box-sizing: border-box;
	    -ms-box-sizing: border-box;
	    box-sizing: border-box; 
	}

	.content p{
	    color: #565656;  /* Med/Dark Grey */
	    font-family: "raleway-regular", arial;
	    font-size: 15px;
	    line-height: 24px;
	    margin-bottom: 30px;
	}

	* p:last-child {margin-bottom: 0;}
	
	.content h1,
	.content h2,
	.content h3,
	.content h4,
	.content h5,
	.content h6{
	    color: #565656;  /* Med/Dark Grey */
	    font-family: "raleway-semibold", arial;
	    font-weight: bold;
	    line-height: 1.2;
	    margin-bottom: 16px;
	}
	
	.figcaption { 
   		display: block;
	}
	
	.published{
		font-family: "raleway-regular", arial;
	    font-size: 13px;
	    font-style: italic;
	}
	
	.read-link{
		color: #F56D33;  /* Orange */
	    font-family: "raleway-regular", arial;
	    /* letter-spacing: 1px; */
	    font-size: 12px;
	    font-weight: bold;
	    text-align: right;
	}
	
	.signature{
	    color: #F56D33;  /* Orange */
	    font-family: "raleway-regular", arial;
	    font-size: 15px;
	    font-style: italic;
	    padding: 5px 25px 0 25px; /* text distance from box edge */
	    background: #ffffff;  /* White */
	    text-align: right;
	}

	.signature p{
	    color: #F56D33;  /* Orange */
	    font-family: "raleway-regular", arial;
	    font-size: 15px;
	    font-style: italic;
	    text-align: right;
	}
	
	.testimonial{
	    color: #565656;  /* Med/Dark Grey */
	    font-family: "raleway-regular", arial;
	    font-size: 15px;
	    line-height: 22px;
	    padding: 0 25px 0 25px; /* text distance from box edge */
	    background: #ffffff;  /* White */
	    margin-bottom: 0px;
	}

	.testimonial p{
	    color: #565656;  /* Med/Dark Grey */
	    font-family: "raleway-regular", arial;
	    font-size: 15px;
	    line-height: 24px;
	    margin-bottom: 0px;
	}
	
	.textbox{ /* used in lorem ipsum article */
		background-color: rgba(0,0,0,0.05);
		padding: 15px;
	}
	
	.textwrapleft{
		float: right;
		margin: 0px 0px 30px 20px;
	}

	.textwrapright{
		float: left;
		margin: 0px 20px 30px 0;
	}
	
	.top{
	    width: 100%;
	    height: 60px;
	    overflow: hidden;
	    display: block;
	    position: relative;
	    background: #ffffff;  /* White */
	    background-size: cover;
	    -webkit-background-size: cover;
	    -moz-background-size: cover;
	    -o-background-size: cover;
	    background-position: 50% 50%;
	}
	
	.top .title{
	    display: block;
	    width: 90%;color: #565656;  /* Med/Dark Grey */
	    font-family: "raleway-bold", arial;
	    font-size: 18px;
	    font-weight: bold;
	    padding: 20px 20px 20px 0px;
	    text-transform: uppercase;
	    line-height: 18px;
	    margin: 0 0 0 0px!important;
	    overflow: hidden;
		z-index: 1;
	    -webkit-box-sizing: border-box;
	    -moz-box-sizing: border-box;
	    -ms-box-sizing: border-box;
	    box-sizing: border-box;
	}
	
	.work_nav{
	    display: block;
	    width: 100%;
	}
	
	.work_nav a{
	    display: block;
	    width: 40px;
	    height: 40px;
	    background: url('../img/p_navigation.png') no-repeat;
	    background-position: 0 0;
	}

	.work_nav a.previous{
	    background-position: 0 0;
	}
		
	.work_nav a.grid{
	    background-position: -41px 0;
	}

	.work_nav a.next{
	    background-position: -82px 0;
	}
	
	.work_nav .btn{
	    right: 1%;
	    position: absolute;
	    top: 5px;
		float: right;
	    }
	/* --- BREAK POINTS FOR SMALLER SCREEN SIZES --- */	
		@media only screen and (max-width:999px){
			.work_nav .btn{
				margin: 5px 0px 0px 0px;
			}
		}
		
	.work_nav ul{
	    list-style: none;
	}
	
	.work_nav ul li{
	    display: block;
	    float: left;
	    margin: 5px 5px 1px 1px;
	    position: relative;
	}



	
/*  Slideshow ------------------------------------------------------------------------- */   

	.jssor_1{
		position: relative; 
		margin: 0 auto;  
		width: 700px; 
		height: 400px; 
		overflow: hidden; 
		visibility: hidden;
	}

	.slider_filter{
		filter: alpha(opacity=70); 
		opacity: 0.7; 
		position: absolute; 
		display: block; 
		top: 0px; 
		left: 0px; 
		width: 100%; 
		height: 100%;
	}

	.slider_position{
		position: absolute;
		display: block;
		background: url('../img/slider_loading.gif') no-repeat center center;
		margin: 0 auto;  
		width: 100%;
		height: 100%;
	}

	.slider_cursor{
		cursor: default; 
		position: relative; 
		top: 0px; 
		left: 0px; 
		width: 700px; 
		height: 400px; 
		overflow: hidden;
	}
	   
	/* jssor slider BULLET navigator skin 05 css

        .jssorb05 div           (normal)
        .jssorb05 div:hover     (normal mouseover)
        .jssorb05 .av           (active)
        .jssorb05 .av:hover     (active mouseover)
        .jssorb05 .dn           (mousedown)
        */

		.jssorb05 {
			position: absolute;
			bottom:16px;
			right:16px;
		}
	
		.jssorb05 div, .jssorb05 div:hover, .jssorb05 .av {
			position: absolute;
			/* size of BULLET elment */
			width: 16px;
			height: 16px;
			background: url('../img/slider_bullets.png') no-repeat;
			overflow: hidden;
			cursor: pointer;
		}
	
		.jssorb05 div { background-position: -7px -7px; }
		.jssorb05 div:hover, .jssorb05 .av:hover { background-position: -37px -7px; }
		.jssorb05 .av { background-position: -67px -7px; }
		.jssorb05 .dn, .jssorb05 .dn:hover { background-position: -97px -7px; }

	/* jssor slider ARROW navigator skin 12 css

        .jssora12l                  (normal)
        .jssora12r                  (normal)
        .jssora12l:hover            (normal mouseover)
        .jssora12r:hover            (normal mouseover)
        .jssora12l.jssora12ldn      (mousedown)
        .jssora12r.jssora12rdn      (mousedown)
        */

		.jssora12l, .jssora12r {
			display: block;
			position: absolute;
			/* size of ARROW element */
			width: 30px;
			height: 46px;
			cursor: pointer;
			background: url('../img/slider_arrow.png') no-repeat;
			overflow: hidden;
		}
        
		.jssora12l { background-position: -16px -37px; }
		.jssora12r { background-position: -75px -37px; }
		.jssora12l:hover { background-position: -136px -37px; }
		.jssora12r:hover { background-position: -195px -37px; }
		.jssora12l.jssora12ldn { background-position: -256px -37px; }
		.jssora12r.jssora12rdn { background-position: -315px -37px; }
		
		


/*  Contact Page ---------------------------------------------------------------------- */ 
	
	.contact {
		padding: 30px 0 0 280px;
	}
	/* --- BREAK POINTS FOR SMALLER SCREEN SIZES --- */	
		@media only screen and (max-width:499px){	
			.contact {
				padding: 10px 0 0 10px;
			}
		}
		


	input[type=text] {
    	width: 300px;
  		padding: 4px;
  	 	margin: 2px 0 10px 0;
	    box-sizing: border-box;
	    border: 1px solid #CCCCCC;  /* Med/Dark Grey */
	}

	input[type=text]:focus {
	    outline: none;
	    border: 1px solid #F56D33;  /* Orange */
	}
	
	textarea {
		width: 80%;
		min-width: 300px;
		height: 100px;
		padding: 4px;
		box-sizing: border-box;
		border: 1px solid #CCCCCC;  /* Med/Dark Grey */
	}
	
	textarea:focus {
	    outline: none;
	    border: 1px solid #F56D33;  /* Orange */
	}
	
	input[type=button], input[type=submit], input[type=reset] {
    	background-color: #CCCCCC;  /* Med/Dark Grey */
    	border: none;
    	color: white;
    	padding: 8px 12px;
    	font-size: 12pt;
    	text-decoration: none;
    	margin: 4px 0px;
    	cursor: pointer;
	}

	input[type=button], input[type=submit]:focus {
	    outline: none;
	    border: 1px solid #F56D33;  /* Orange */
	}




/*  Map ------------------------------------------------------------------------------- */ 

	#map {
		width: 100% !important;
		height: 400px !important;
	}
			
	#map .map_address,
	#map .map_tel,
	#map .map_email{
	    font-family: 'raleway-regular', arial;
	    font-size: 14px;
	    line-height: 18px;
	    letter-spacing: 1px;
	}

	#map .map_address,
	#map .map_tel,
	#map .map_email{
	    padding: 5px;
	}

	#map .map_address .address,
	#map .map_tel .tel,
	#map .map_email .email{
	    font-family: 'raleway-bold', arial;
	    font-weight: bolder;
	}
	
	#map img{
	    max-width: none;
	}
	
	
	
	
/* Fonts ------------------------------------------------------------------------------ */

	@font-face {
	    font-family: 'raleway-regular';
	    src: url('../fonts/raleway-regular.eot');
	    src: url('../fonts/raleway-regular.eot?#iefix') format('embedded-opentype'),
	         url('../fonts/raleway-regular.woff') format('woff'),
	         url('../fonts/raleway-regular.ttf') format('truetype'),
	         url('../fonts/raleway-regular.svg#ralewayregular') format('svg');
	    font-weight: normal;
	    font-style: normal;
	}

	@font-face {
	    font-family: 'raleway-bold';
	    src: url('../fonts/raleway-bold.eot');
	    src: url('../fonts/raleway-bold.eot?#iefix') format('embedded-opentype'),
	         url('../fonts/raleway-bold.woff') format('woff'),
	         url('../fonts/raleway-bold.ttf') format('truetype'),
	         url('../fonts/raleway-bold.svg#ralewaybold') format('svg');
	    font-weight: normal;
	    font-style: normal;
	}

	@font-face {
	    font-family: 'raleway-semibold';
	    src: url('../fonts/raleway-semibold.eot');
	    src: url('../fonts/raleway-semibold.eot?#iefix') format('embedded-opentype'),
	         url('../fonts/raleway-semibold.woff') format('woff'),
	         url('../fonts/raleway-semibold.ttf') format('truetype'),
	         url('../fonts/raleway-semibold.svg#ralewaysemibold') format('svg');
	    font-weight: normal;
	    font-style: normal;
	}

	h1, h2, h3, h4, h5 ,h6{
	    color: #CCCCCC;  /* Medium Grey */
	    font-family: "raleway-regular", arial;
	    letter-spacing: 1px;
	    font-weight: bolder
	}

	h1 { font-size: 2em; margin: .67em 0 }
	h2 { font-size: 1.5em; margin: .75em 0 }
	h3 { font-size: 1.17em; margin: .83em 0 }
	h5 { font-size: .83em; margin: 1.5em 0 }
	h6 { font-size: .75em; margin: 1.67em 0 }
	
	


/* Tooltip ---------------------------------------------------------------------------- */

.tooltip{
    display: block;
    padding: 7px 10px;
    background: #565656;  /* Med/Dark Grey */
    color: #fff;
    font-family: "raleway-regular", arial;
    font-size: 12px;
    position: absolute;
    white-space: nowrap;
    z-index: 999;
    opacity: 0;
    text-align: center;
    letter-spacing: .5px;

}

.tooltip:after{
    content: '';
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 3px 3px 0 3px;
    border-color: #565656 transparent transparent transparent;  /* Med/Dark Grey */
    display: block;
    text-align: center;
    position: absolute;
    bottom: -3px;
    left: 50%;
    margin-left: -3px;
}