* {
	padding: 0;
	margin: 0;
}
@font-face 
{
	src: url('BebasNeue.otf');
	font-family: 'BebasNeue';
	    src: url('BebasNeue.otf?#iefix') format('embedded-opentype'), 
}


p.custom_font{
    	src: url('BebasNeue.otf');
    	font-family: 'BebasNeue';
	    src: url('BebasNeue.otf?#iefix') format('embedded-opentype'),
}

@font-face {
    font-family: 'Movipcrg';
    src:  url('Movipcrg.ttf') format('truetype')
    font-weight: normal;
    font-style: normal;
}



html {
	background: #FFFFFF;
}


.credits {
	
}


/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* MODAL */
.modal-content {
    background-color: #fefefe;
    margin: 15% auto; /* 15% from the top and centered */
    padding: 20px;
    border: 1px solid #888;
    width: 80%; /* Could be more or less, depending on screen size */
}

/* The Close Button */
.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

.button {
	
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  border: none;
  font-size:+50px;
  font-weight:100;
  padding-left:20px;
  color: rgba(255,255,255,1);
  text-decoration: none;
  text-align: left;
  -o-text-overflow: clip;
  text-overflow: clip;
  white-space: pre;

  -webkit-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
  -moz-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
  -o-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
  transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
}

.button:hover {
  text-shadow: 0 0 10px rgba(255,255,255,1) , 0 0 20px rgba(255,255,255,1) , 0 0 30px rgba(255,255,255,1) , 0 0 40px #000000 , 0 0 70px #000000 , 0 0 80px #000000 , 0 0 100px #000000 ;
}

* {
 cursor:url("cursor.png"), pointer;
 -webkit-transform: translateZ(0);
}




a.rolloverbrianwoodlogo {
	display: inline;
	width: 200px;
	height: 43px;
	text-decoration: none;
	background: url("brianwoodsprite.png");
	background-repeat:no-repeat;
	float:left;
    

	}


a.rolloverbrianwoodlogo:hover {
	  background-position: -200px 0;
			}



	
	
a.rolloverbwood {
		display: inline;
		width: 150px;
		height: 43px;
		text-decoration: none;
		background: url("bwoodsprite.png");
		background-repeat:no-repeat;
		float:left;
		margin-top:1px;
		
		}

a.rolloverbwood:hover {
		background-position: -150px 0;
		}

	

a.rolloversep {
			display: inline;
			width: 42px;
			height: 42px;
			text-decoration: none;
			background: url("sepsprite.png");
			background-repeat:no-repeat;
			float:left;	
			
		
			}

a.rolloversep:hover {
			background-position: -42px 0;
			}





body {
  margin: 0;
  paddng: 0;
  background: #FFFFFF;
  font: 11px Arial;
  color: #000;
  font-size: 9px;
  overflow: scroll;
}

ul {
	list-style: none;
}

li {
  font-weight: lighter

}
a {
  text-decoration: none;
  color: #000000;
  border: 0;
 }

h3 {
  font-family: BebasNeue;
  font-size: 25px;
 opacity:0.1;
}

img {
  margin: 0;
  padding: 0;
  border: 0;
}

p {
  color: #000;
}

table {
  padding: 0;
  margin: 0;

}

#menu {
  position: fixed;
  right: 1%;
  bottom: 2%;

  padding: 10px;
  z-index: 10
 }

.logo {
  text-align: center;
  padding: 2px;
  margin-right: -40px;

}
.logo2 {
  text-align: center;
  padding: 2px;
  margin-right: -10px;
  background-color:#FFFFFF;
}

.main_nav {
 
}

ul.new_nav li {
  margin: 0;
  padding: 5px 12px 0 2px;
  display: inline;
  list-style: none;
  font-family: BebasNeue;
  font-size: 44px;
  letter-spacing:1px

new_nav  {
	
}
  
  opacity:0.1;
}

.splash {
  margin: 0;
  padding: 5px 12px 0 2px;
  list-style: none;
  font-family: BebasNeue;
  font-size:30px;
  margin-top:100px;

}

ul.main_nav2 li {
  margin: 0;
  padding: 5px 12px 0 2px;
  display: inline;
  list-style: none;
  font-family: BebasNeue;
  font-size: 17px;
  text-align: right;
  font-weight: lighter;
  letter-spacing:1px

}

a:link {
	color:#000000;
}
}


li.new_nav{
	color:white;
}
ul.main_nav li:hover {
	   	zoom: 1;
        filter: alpha(opacity=50);
        opacity: 0.4;
}

ul.main_nav2 li:hover {
	   	zoom: 1;
        filter: alpha(opacity=50);
        opacity: 0.4;
}

ul.main_nav li {
  display: inline;
  text-decoration: none;
}

.img/tomorrow {
  position: absolute;
  left: 5%;
  top: 5%;
  color: #000;
  width: 700px;
  height: 500px;
}

.menu_img/tomorrow {
position: absolute;
width: auto;
left: -30px;
top: 70px;
padding: 2px;
height: 25px;

}
.main_content {
padding: 2px;
}

.sub_nav {
	list-style: none;
  	font-family: BebasNeue;
  	font-size: 20px;
  	position: absolute;
  	right: 2%;
  	top: 50px;
    opacity:0.1;
    
}

.breadcrumb {
	position: absolute;
	bottom: 100px;
	right: 2%;
  	font-family: BebasNeue;
	font-size: 20px;
	opacity:0.1;
}
#newboxes1_bio {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: -100
}

#newboxes2_collab {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
}

#newboxes3_video {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: -100
}

#newboxes5_retail {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: -100
}

.eye {
	top : 10px;
	left : 10px;
	width : 450px;
	height : 450px;
	padding : 10px;
	position :relative; 
	float : left;
}
.bio {
	width: 500px;
	margin-top: 50px;
	font-size: 11px;
	margin-left: 50px
}

#newboxes4_retail	     
	{
	color: white;
	background-color: transparent;
	text-align: center;
	position: absolute;
	top: 50%;
	left: 0px;
	width: 100%;
	height: 1px;
	overflow: visible;
	visibility: visible;
	display: block
}
	
.frame_img/tomorrow {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;	
}
.content    
	{
	font-family: Verdana, Geneva, Arial, sans-serif;
	background-color: transparent;
	position: absolute;
	top: 40%;
	left: 50%;
	width: 100%;
	height: 70px;
	visibility: visible
	}

.bodytext 
	{
	font-size: 40px
	margin-right: -200px;
	}


.headline 
	{
	font-weight: bold;
	font-size: 24px
	}
	
#retail_grid {

}

.retail_gridly {
  margin: 0;
  padding: 5px 12px 0 2px;
  display: inline;
  list-style: none;
  font-family: BebasNeue;
  font-size: 47px;
  text-align: right;
  font-weight: lighter;
  letter-spacing:1px
  float: right;
  font-color:white;
  opacity:0.1;
  
}
#retail_grid a:hover
{
	zoom: 1;
    filter: alpha(opacity=50);
    opacity: 0.1;
}

#sub_nav a:hover
{
	zoom: 1;
    filter: alpha(opacity=50);
    opacity: 0.1;
}

#sub_nav ul:hover
{
	zoom: 1;
    filter: alpha(opacity=50);
    opacity: 0.1;
}

#sub_nav ul
{
	zoom: 1;
    filter: alpha(opacity=50);
    opacity: 0.1;
}

#sub_nav li
{
	zoom: 1;
    filter: alpha(opacity=50);
    opacity: 0.1;
}


.retail_grid h4:hover
{
	zoom: 1;
    filter: alpha(opacity=50);
    opacity: 0.1;
}

.retail_grid li
{
font-color:black;
}
.contact_grid p{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	margin-left: 200px
}

inine_frame {
	position: absolute;
	top: 0;
	left: 0;

}

#navbar {
   position: relativ;

	font-family: Verdana, Geneva, Arial, sans-serif;
	font-size:20px;

   }
#navbar li {
   list-style: none;
   float: left; }
#navbar li a {
   display: block;
   padding: 3px 8px;
   text-transform: uppercase;
   text-decoration: none; 
   color: #FFFFFF;
   font-weight: lighter;
   font-family: BebasNeue;

    }
#navbar li a:hover {
   color: #FFFFFF; 
 
}
   
#navbar li ul {
    }
#navbar li:hover ul, #navbar li.hover ul {

   width: 100%;
   margin-left: -50px;
   padding: 0;
   opacity:0.1
 }
#navbar li:hover li, #navbar li.hover li {
   float: left;
   opacity:0.1
 }
#navbar li:hover li a, #navbar li.hover li a {
   color: #FFF; 
   opacity:0.1
}
#navbar li li a:hover {
   color: #FFF; 
   opacity:0.1
}
   
div.htmltooltip {
	position: absolute; /*leave this and next 3 values alone*/
	z-index: 1000;
	left: -1000px;
	top: -1000px;
	background: #272727;
	border: 10px solid black;
	color: white;
	padding: 3px;
	width: 250px; /*width of tooltip*/
}
#contact222 {
	font-family: Verdana, Geneva, Arial, sans-serif;
	background-color: transparent;
	position: center;
	top: 40%;
	left: 50%;
	width: 900px;
	height: 70px;
	visibility: visible;
	margin-top:450px;
}
}
.content2 
	{
	font-family: Verdana, Geneva, Arial, sans-serif;
	background-color: transparent;
	position: center;
	margin-top:500px;
	margin-right:500px;
	top: 40%;
	left: 60%;
	width: 400px;
	height: 70px;
	visibility: visible
	}

.shopbwoodnow {
	list-style: none;
	 font-family: BebasNeue;
	 font-size: 40px;
	 margin-top:450px;
	 margin-left:15px;
	 position: absolute;
	 top: 50px;
	}
	
.contact {
	list-style: none;
	font-family: BebasNeue;
	font-size: 17px;
	margin-top:350px;
    margin-left:265px;

    }





	*{margin:0;padding:0;}
	#overlay{ /* we set all of the properties for are overlay */
	    height:80%;
	    width:80%;
	    margin:0 auto;
	    background:white;
	    color:black;
	    padding:10px;
	    position:absolute;
	    top:5%;
	    left:10%;
	    z-index:1000;
	    display:none;
	    /* CSS 3 */
	    -webkit-border-radius:10px;
	    -moz-border-radius:10px;
	    -o-border-radius:10px;
	    border-radius:10px;
	}

	#mask{ /* create are mask */
	    position:fixed;
	    top:0;
	    left:0;
	    background:rgba(0,0,0,0.6);
	    z-index:500;
	    width:100%;
	    height:100%;
	    display:none;
	}
	/* use :target to look for a link to the overlay then we find are mask */
	#overlay:target, #overlay:target + #mask{
	    display:block;
	    opacity:1;
	}
	.close{ /* to make a nice looking pure CSS3 close button */
	    display:block;
	    position:absolute;
	    top:-20px;
	    right:-20px;
	    background:red;
	    color:white;
	    height:40px;
	    width:40px;
	    line-height:40px;
	    font-size:35px;
	    text-decoration:none;
	    text-align:center;
	    font-weight:bold;
	    -webkit-border-radius:40px;
	    -moz-border-radius:40px;
	    -o-border-radius:40px;
	    border-radius:40px;
	}
	#open-overlay{ /* open the overlay */
	    padding:10px 5px;
	    background:blue;
	    color:white;
	    text-decoration:none;
	    display:inline-block;
	    margin:20px;
	    -webkit-border-radius:10px;
	    -moz-border-radius:10px;
	    -o-border-radius:10px;
	    border-radius:10px;
	}


{	.distribution-map
	  position: relative
	  width: 100%
	  padding: 20px
	  @include box-sizing(border-box)
	  margin: 0 auto
	  >img
	    width: 100%
	    position: relative
	    margin: 0
	    padding: 0
	  .map-point
	    cursor: pointer
	    outline: none
	    z-index: 0
	    position: absolute
	    width: $map-dot-size
	    height: $map-dot-size
	    @include border-radius($map-dot-size/2)
	    @include opacity(0.8)
	    @include translate(-50%, -50%)
	    @include transition(opacity $transition-time ease-in-out $transition-time, width $transition-time ease-in-out $transition-time, height $transition-time ease-in-out $transition-time, z-index $transition-time ease-in-out $transition-time)
	    background: transparentize($color-background, 0.15)
	    border: $map-dot-size/8 solid $color-highlight-dark
	}


	@import compass

{	$font-stack-safe: Helvetica, sans-serif
	$font-stack-main: "Roboto", $font-stack-safe
	$font-stack-highlight: "Roboto Condensed", $font-stack-safe

	$color-background: rgb(26, 26, 26)
	$color-highlight: rgb(175, 225, 250)
	$color-highlight-light: lighten($color-highlight, 10%)
	$color-highlight-dark: darken($color-highlight, 10%)

	$color-foreground: invert($color-background)

	$map-dot-size: 40px

	$transition-time: 0.25s
}



{

	.description
	  max-width: 600px
	  margin: 0 auto
	  color: transparentize($color-foreground, 0.3)
}
{
	h1, h2, h3, h4, h5, h6
	  margin-bottom: 20px
	  text-transform: uppercase
	  font-family: $font-stack-highlight
	  font-weight: 300
}
	h1
	  font-size: 36pt

	h2
	  font-size: 24pt

	h3
	  font-size: 18pt

	h4
	  font-size: 16pt

	h5
	  font-size: 14pt

	h6
	  font-size: 12pt

	p
	  font-size: 12pt
	  margin-bottom: 12pt

	strong
	  font-weight: 900
	  font-family: $font-stack-highlight
	  color: $color-foreground
{
	a
	  @include transition(color $transition-time ease-in-out)
	  font-family: $font-stack-highlight
	  text-transform: uppercase
	  text-decoration: none
	  color: $color-highlight-light
	  &:visited
	    color: $color-highlight-light
	  li.active &,
	  &:hover,
	  &:active
	    color: $color-foreground
}
{
	.centered
	  position: absolute
	  top: 50%
	  left: 50%
	  @include translate(-50%, -50%)
}
{
	.centered-y
	  position: absolute
	  width: 100%
	  top: 50%
	  @include translateY(-50%)
}
{
      .content
	      @include opacity(0)
	      @include transition(opacity $transition-time ease-in-out)
	      width: 100%
	      height: 100%
	      left: 50%
	      @include translateX(-50%)
	      overflow: overlay
	    &:active, &:focus
	      //Deal with Firefox :active styling
	      margin: 0
	      padding: 0
	      @include opacity(1)
	      width: 300px
	      height: 220px
	      color: $color-foreground
	      z-index: 1
	      @include transition(opacity $transition-time ease-in-out, width $transition-time ease-in-out, height $transition-time ease-in-out)
	}    
	{
	.content
	        @include opacity(1)
	        @include transition(opacity $transition-time ease-in-out $transition-time, height 0 ease-in-out $transition-time, overflow 0 ease-in-out $transition-time)
	        overflow: hidden
	        a:hover, a:active
	          color: $color-highlight
}