@charset "UTF-8";
/* CSS Document */

/* colors:
dark blue: #3f97b5	
light blue:#8cc1d3	
dark gray: #333	
light gray: #999
med gray: #666*


new tan : #c6b799 */

@font-face {
    font-family: 'ralewaysemibold';
    src: url('Raleway-SemiBold-webfont.eot');
    src: url('Raleway-SemiBold-webfont.eot?#iefix') format('embedded-opentype'),
         url('Raleway-SemiBold-webfont.woff2') format('woff2'),
         url('Raleway-SemiBold-webfont.woff') format('woff'),
         url('Raleway-SemiBold-webfont.ttf') format('truetype'),
         url('Raleway-SemiBold-webfont.svg#ralewaysemibold') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'chunkfiveroman';
    src: url('chunkfive-webfont.eot');
    src: url('chunkfive-webfont.eot?#iefix') format('embedded-opentype'),
         url('chunkfive-webfont.woff') format('woff'),
         url('chunkfive-webfont.ttf') format('truetype'),
         url('chunkfive-webfont.svg#chunkfiveroman') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'ralewaylight';
    src: url('raleway-light-webfont.eot');
    src: url('raleway-light-webfont.eot?#iefix') format('embedded-opentype'),
         url('raleway-light-webfont.woff') format('woff'),
         url('raleway-light-webfont.ttf') format('truetype'),
         url('raleway-light-webfont.svg#ralewaylight') format('svg');
    font-weight: normal;
    font-style: normal;

}

html, body, div, h1, h3, p, ul, li, img {
margin: 0;
padding:0;
}

body {
	width: 100vw;
	max-width: 100vw;
	padding-left: 0;
	padding-right: 0;
	margin: auto;
	clear: none;
	float: none;
	margin-left: auto;
	font-size: 16px;
	 
}
.pebble { 
 background: url(images/rocks.jpg)no-repeat center center fixed; 
	 -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover; 
 
	 height: 100vh; 
	display: block;
	 }



 

a:link { color: #666;text-decoration: none;}

a:visited { color: #333;text-decoration: none;}

a:hover { color: #3f97b5;text-decoration: none;
 }

a:active { color: #FFF;text-decoration: none;}

  
/*  -----------text formatting-------------*/

p {
font-family: 'ralewaylight';	
font-size: 1em;
line-height: 2em;
color: #666;
letter-spacing: .02em;
font-weight: 400;
}



h5 {
font-family: 'ralewaylight';	
font-size: 1em;
line-height: 2em;
color: #666;
letter-spacing: .02em;
font-weight: 400;
}



p2 {
font-family: 'ralewaylight';	
font-size: .8em;
line-height: 1em;
color: #666;
letter-spacing: .02em;
font-weight: 400;
}
.title {
font-family: 'ralewaylight';	
font-size: .7em;
line-height: .5;
color: #666;
letter-spacing: .02em;
font-weight: 400;
font-style: italic;
}


h1 { 
font-family: 'ralewaylight';
font-size: 4.5em;
color: #999;
font-weight: 400;
margin: 0; 
line-height: 1em;
}

h2 { 
font-family: 'ralewaylight';
font-size: 2em;
color: #c6b799;
font-weight: 400;
margin: 0; 
	 
}


footer p {
	font-size: 1em;
}
 h3 { 
font-family: 'ralewaylight';
font-size: 2em;
line-height: 2.3em;
color: #3f97b5;
}


 h4 { 
font-family: 'ralewaylight';
font-size: 1.5em;
line-height: 1.25	em;
color: #c6b799;
}



ul li {
    background-image: url(wdbullet.png);
    background-repeat: no-repeat;
    background-position: 0px center; 
    padding-left: .5em; 
	margin : 1em 0 0 2em;
	
}

.bluechunk {
	font-family: 'chunkfiveroman';
	color: #fff;
	font-weight:lighter; !important;
	font-size: 2em;
	opacity: .4;
}
.bluebold {
	font-family: 'ralewaysemibold';
	color: #c6b799;
	 
}
.blue  {
	font-family: 'ralewaylight';
	color: #3f97b5;
}

.light {color: #999;}

 

.caption  {
	font-family: 'ralewaylight';
	color: #3f97b5;
	position: absolute;
	bottom: 2em;
	left: 14%;
	padding: 1em 0 0 0;
	margin-right: 15%;
	line-height: 1.5em;
}


.popsize {
	max-width: 90%;
	height: 90%;
}
	 

 .txt {
	float: left;
	height: auto;
	width: 48%;
	margin: 0 0 0 20vw;
	max-width: 60em;
	padding: 0 15em 0 0 ;
	 
}

 .txt2 {
	float: left;
	height: auto;
	width: 40%;
	margin: 8em 0 0 35%;
	max-width: 60em;
	padding: 0 15em 0 0 ;
}
	 .logohome {display: block;
	float: left;
	height: auto;
	width: 30%;
	margin: 0 0 0 20vw;
	max-width: 35em;
	padding: 0 0 0 0 ;
	 
}

.column {
	position: absolute;
	width: 50%;
	margin: 5em 0 0 0;
}

.column p  {
	margin-top: 16em;
}
 
.column2 {
	float: left;
	height: auto;
	width: 100%;
	margin: 0 0 0 0%;
	max-width: 60em;
	padding: 0 5% 0 0 ;
}

.column3 {
	float: left;
	height: auto;
	width: 100%;
	margin: 2em 0 0 0;
	max-width: 60em;
	padding: 5em 5% 0 5% ;
} 
 

.columnhome {
	position: absolute;
	width: 55%;	 
	max-width: 60em;

}


.column2float {
	float: left;
	width: 55%;
	margin: 2em 0 0 22.5%;
	max-width: 60em;
	
	 
	
}
.column2 p {
	margin: 0 15% 0 0;
	/*text-color: #fff;
	font-weight: 500;
	letter-spacing: 1.5;*/
}

.column3 p {
	margin: 0 25% 0 0;
	/*text-color: #fff;
	font-weight: 500;
	letter-spacing: 1.5;*/
}

.piece5
 {
	float: left;
	width: auto;
	height: 19em;
	margin: 2em 0em .5em 0; 
	max-width: 250px;
	 
	border: medium;
	  border-color: rgba(255, 255, 255, .0);
	  border-top-style: none;
    border-right-style: none;
    border-bottom-style: solid;
    border-left-style: none;
 
  }

.piece {
	float: left;
	width: auto;
	height: 7em;
	margin: 2em 2em .5em 0; 
	max-width: 250px;
	 box-shadow: 0px 1px 15px rgba(0, 0, 0, 0.2);
	border: medium;
	  border-color: rgba(255, 255, 255, .0);
	  border-top-style: none;
    border-right-style: none;
    border-bottom-style: solid;
    border-left-style: none;
 
  }
  .piece2 {
	float: left;
	width: auto;
	height: 10em;
	margin: 2em 3em 0 0; 
	max-width: 600px;
	/* box-shadow: 0px 1px 20px #5E5E5E;*/ 
  }

  .piece3 {
	float: left;
	width: auto;
	height: 10em;
	margin: 2em 3em 0 0; 
	max-width: 250px;
	/* box-shadow: 0px 1px 20px #5E5E5E;*/ 
  }
  
  .piece:hover {
	 
	  border: medium;
	  border-color: #c6b799;
	  border-top-style: none;
    border-right-style: none;
    border-bottom-style: solid;
    border-left-style: none;
	border-opacity:0.5;
  }
  
  .piece2:hover {
	 
	  border: medium;
	  border-color: #8cc1d3;
	  border-top-style: none;
    border-right-style: none;
    border-bottom-style: solid;
    border-left-style: none;
	border-opacity:0.5;
  }
  
  .small {
	float: left;
	width:22%;
	height:auto;
	min-height: 180px;
	margin: 10% 6% 0 2%;
	padding: 0 1em 0 0 ;
	border: medium;
 
  }
  
  
  
  
  .down {
	float: left;
	opacity: .5;
	 -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  -ms-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s;
  margin-right: 60%;
  margin-top: 1em;
-webkit-filter: saturate(10%);
-moz-filter: saturate(10%);
-o-filter: saturate(10%);
-ms-filter: saturate(10%);
  }
    .down:hover{
	opacity: 1;
	-webkit-filter: saturate(100%);
-moz-filter: saturate(100%);
-o-filter: saturate(100%);
-ms-filter: saturate(100%);
  }
    .up {
		float: left;
	margin: 0 auto; 
	opacity: .3;
	 -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  -ms-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s;
  }
    .up:hover{
	opacity: 1;
  }


header {
	width: 100%; 
	margin: 0  ;
	padding: 1% 3% 0 0;
	position:fixed;
	top: 0;
	left: 0;
	height:auto;
	background-color: rgba(255,255,255, 0.8);
}


header:hover {
	width: 100%; 
	margin: 0  ;
	padding: 1% 3% 0 0;
	position:fixed;
	top: 0;
	left: 0;
	height:auto;
	background-color: rgba(255,255,255, .95);
}




header h1 {
	font-size: 1.5em;
	text-align: left;
	margin-right: 1em;
	 
}



/*------------nav--------------------*/


 
.navlogo {float: left;
width: 16vw;
	height: 4em;
margin: 1em 0 0 3vw;
	 
 
 }


/*.navbut{float: left;
width: 20%;
	height: auto;
margin-right: 5vw;
 }*/


.flex-container {
  display: flex;
 margin: 0;
	padding: 0;
	
}

.flex-container > div {
 align: left;
  margin: 15px 30px 0 0;
  padding: 0px;
  font-size: 1em;

}



nav
 {
	float: left; 
	 opacity: 1.0;
	height:auto;
	 padding: 0 0 0 1em;
	margin: 0 0 0 0 ;
 	width: 70vw;
	z-index: 3000;
 
}

 
/*
nav:hover
{ opacity: 1;
 
} */

nav p {
	font-size: 1em;
	font-color: #fff;
	margin: 0;
	text-align: left;
	
}



#cat {
display: inline;
font-family: 'ralewaylight';	
font-size: 1em;
margin-top: 10px;
padding: 5px;
/*text-transform: uppercase;*/
vertical-align: 12px;

width: 0;
transition: all 4.5s ease;
letter-spacing: -10px;
margin-left: -15px;
color: rgba(255, 255, 55, 0)
}

#catactive {
display: inline;
font-family: 'ralewaylight';	
font-size: 1em;
margin-top: 10px;
padding: 5px;
/*text-transform: uppercase;*/
vertical-align: 12px;

width: 0;
transition: all 2.5s ease;
letter-spacing: 3px;
margin-left: 5px;
color: rgba(55, 55, 55, 1)
}

#catbut {margin-top:0;}

#menu {
font-family: 'ralewaylight';	
display: show;
padding: 5px 0 5px 20px;
color: #333;
transition: all 1.5s ease;
}

#catbut:hover #cat {
font-family: 'ralewaylight';	
display: inline;
letter-spacing: 3px;
margin-left: 5px;
color: rgba(55, 55, 55, 1.0);
transition: all 1.5s ease;
}

button {
float: left;
background-color: inherit; 
border: none;
color: #FFF; 
padding: 0 ;
text-align: left;
text-decoration: none;
display: inline-block;
}

 

.navphone {  
	margin-left: 0;
	opacity: .3;
	 -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  -ms-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s;
}

.navphone 


.fade {
  	opacity: .7;
	 -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  -ms-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s;
}

.fade:hover {
  	opacity: 1.0;
}
  
 #home2 {
 	 
  	padding-top:9.5em;
  	padding-bottom: 29em;
   background-position: auto 0; 
	 max-width: 1000px;
	margin-left: 20vw;
	margin-right: 15%;
} 


#home {
	 
max-width: 100%;
margin-top:0;
margin-bottom: 20vh;
background-position: auto 0;
height: 20em;
min-height: 60vh;

padding: 13.5em 0 2em 0;
 
} 


 
#trp, #can, #ska, #hm, #one, #trek, #bel, #wis, #strive, #im, #spot, #logos, #illus, #photo, #web, #anim, #booklets, #businesscards, #billboards, #flyers, #brochures, #sixlives, #garli, #slow, #misc, #conversations, #design {
width: 60vw;
float: left;
height: auto;  	
margin: 0 5vw 8em 20vw;
box-shadow: 5px 5px 8px rgba(0, 0, 0, 0.05); 
background-color: rgba(255, 255, 255, 0.5);
max-width: 1000px;
padding: 6em 0 2em 0;
}

 
 
 
/*#logos, #illus, #photo, #web, #anim {
   	width: 100%;
	 height: auto;
	float: left;
	margin-bottom: 7em;
   
 /* 	padding-top: 1em 3em 3em 0;*/

/*padding-top: 1em;
padding-bottom: 3em;
	 box-shadow: 0px 1px 50px #5E5E5E;
	background-color: rgba(255, 255, 255, 0.7); 

	max-width: 1000px;
	padding-left: 15%;
	padding-right: 15%;
padding: 0 0 3em 0;
	
} */
 
  .next
{position: absolute;
	bottom: 3em;
		left: 25%;
	width: 30%;
		height: auto;
}
 
 
footer
 {
 position: fixed;
	bottom: 3em;
	right: 1em;
	height:auto;
	padding: 1em;
	margin: 0 0 0 0 ;
 	width: 3em;
	z-index: 300;
	 opacity: .5;
	
 }
 
	 

  .social
{opacity: 0.50;
	margin: 0 4em 2em 0;
	
}


 .social:hover
{
	animation: roll 1s infinite;
  transform: rotateY(720deg);
	opacity: 1.0;
	  
}
 /*@keyframes roll {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }*/
}
.corner1 {
position: fixed;
	left: 0;
	top:0;
	width: 500px;
	height: 500px;
	background-image: url(images/paper.png);
	background-repeat: no-repeat;
	 -ms-transform: rotate(90deg); /* IE 9 */
    -webkit-transform: rotate(90deg); /* Chrome, Safari, Opera */
    transform: rotate(90deg);
	opacity: .4;
	z-index: -100;
}
.corner2 {

	width: 500px;
	height: 500px;
	background-image: url(images/paper.png);
	background-repeat: no-repeat;
	 -ms-transform: rotate(180deg); /* IE 9 */
    -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
    transform: rotate(180deg);
position:fixed;
right: 0;
top: 0;
opacity: .4;
	z-index: -100;

}
.corner3 {

	width: 500px;
	height: 500px;
	background-image: url(images/paper.png);
	background-repeat: no-repeat;
	 -ms-transform: rotate(270deg); /* IE 9 */
    -webkit-transform: rotate(270deg); /* Chrome, Safari, Opera */
    transform: rotate(270deg);
position:fixed;
right: 0;
bottom: 0;
opacity: .4;
	z-index: -100;

}
.corner4 {

	width: 500px;
	height: 500px;
	background-image: url(images/paper.png);
	background-repeat: no-repeat;
	 -ms-transform: rotate(0deg); /* IE 9 */
    -webkit-transform: rotate(0deg); /* Chrome, Safari, Opera */
    transform: rotate(0deg);
position:fixed;
left: 0;
bottom: 0;
opacity: .4;
	z-index: -100;

}
/*
 
 

 
 

/*---------clearfix--------*/
 .clearfix:before, .clearfix:after {
content:””;
display:table;
}
.clearfix:after {
clear:both;
}




/*........phone........*/
#pcover{ position:fixed; top:0; left:0; background:rgba(0,0,0,0.8); z-index:900; width:100%; height:100%; display:none; } 

.pcancel { display:block; position:absolute; bottom:1em; left:1.7em;   color:black; height:30px; width:35px; font-size:30px; text-decoration:none; text-align:center; font-weight:bold; z-index:1100; } 


#phone   { height:4em;    width: 4em;  position:fixed; top: 10%; left:0%; right: 0%;   z-index:1000; display:none;    background-color: rgba(255,255,255,0.9);    padding: 3em;  border-radius:2px;  border-radius:250px; } 

#phone:target, #phone:target + #pcover{ display:block; opacity:2; } 

.bag {
float: left;
 
width: 400px;
height: 330px;
margin: 0;
background-image: url( images/bagneyes400.gif)

}

.menu {
	display: none;
}

.hide {
	display: none;
}

span.dropt {   }
span.dropt:hover {text-decoration: none;   z-index: 6; }
span.dropt span {position: absolute; left: -9999px;
  margin: 20px 0 0 0px; padding: 3px 3px 3px 3px;
    z-index: 6;}
span.dropt:hover span {left: 2%;  } 
span.dropt span {position: absolute; left: -9999px;
  margin: 4px 0 0 0px; padding: 3px 3px 3px 3px; 
   }
span.dropt:hover span {margin: 0px 0 0 12px;   z-index:6;} 


/*---------------tablet landscape----------------*/

@media only screen and (min-width : 701px) and (max-width : 1068px)and (orientation : landscape){ 

/*.pebble{
background: url('images/rocksm.jpg')no-repeat center center scroll; 
background-size: 100%;
background-position: top;
}
	*/
	
		.pebble { 
		float: left;
 background: url(images/rocks.jpg)no-repeat ;   
	 
	height: 100vh;
		width: 100%;
			margin: 0 0 6em 0;
			padding: 0;
		background-size: auto 100%;  
	 
	}
	
	
 
	
}

	


/*---------------tablet portrait----------------*/

@media only screen and (min-width : 701px) and (max-width : 1068px)and (orientation : portrait){ 
/*
.pebble {
background: url('images/rocksm.jpg')no-repeat center center scroll; 
background-size: 100% ;
background-position: top;
}*/
		.pebble { 
		float: left;
 background: url(images/rocksm.jpg)no-repeat ;   
	 
	height: 100vh;
		width: 100%;
			margin: 0 0 6em 0;
			padding: 0;
		background-size: 100% auto;  
	 
	}
	} 



/*---------------mobile----------------*/
@media only screen and (max-width: 480px)  {
	
	


	
	
	
	p {
font-family: 'ralewaylight';	
font-size: 1em;
line-height: 2em;
color: #666;
letter-spacing: .02em;
font-weight: 400;
}



h5 {
font-family: 'ralewaylight';	
font-size: 1em;
line-height: 2em;
color: #666;
letter-spacing: .02em;
font-weight: 400;
}

	
	
	body {
	width: 100%;
	max-width: 480px;
	padding-left:0;
	padding-right: 0;
	
	margin: auto;
	clear: none;
	float: left;
	margin-left: auto;
	font-size: 16px;
	
}
	

	
	
	.bluechunk {
	font-family: 'chunkfiveroman';
	color: #fff;
	font-weight:lighter !important;
	font-size: 1.5em;
	opacity: .4;
}
.next
{position: absolute;
	bottom: 3em;
		left: 10%;
	width: 70%;
		height: auto; 
}
	
			 .logohome {display: block;
	float: left;
	height: auto;
	width: 100%;
	margin: 3em 0 0 5%;
	max-width: 90%;
	padding: 0 0 0 0 ;
			 
}
	
	
	 .txt {
	float: left;
	height: auto;
	width: 90%;
	margin: 0 5% 1em 5%;
	max-width: none;
	padding: 0 0 0 0 ; 
	  
}
	
	
	
	.pebble { 
		float: left;
 background: url(images/rocksm.jpg)no-repeat ;   
	 
	height: 100vh;
		width: 100%;
			margin: 0;
			padding: 0;
		background-size: 100% auto;  
	 
	}
	 
	#home {
	 
max-width: 80%;
margin-top:5vh;
margin-bottom: 2em;
background-position: auto 0;
height: 100vh;
min-height: none;
background-color: rgba(255, 255, 255, .3);
padding: 0em 5% 2em 5%;
 z-index: 2000;
} 
	
#home2 {
margin: 3em 0 0 0;		
background-position: auto 0;
height: auto;
min-height: 100vh;
background-color: rgba(255, 255, 255, .3);
padding: 0em 5% 2em 5%;
 z-index: 2000;
max-width: 90vw;
	 
} 

/*	#home2 {
 	max-width: 100%;
  	padding-top:3em;
  	padding-bottom: 29em;
   background-position: auto 0; 
	
} */
	
		
 
	

.column2 {
	float: left;
	height: auto;
	width: 100%;
	margin: 1em 0 1em 0 ;
	padding: 0;
	z-index: 800;
 
	}
	
	 

 
	
	.column3 {
	float: left;
	height: auto;
	width: 90%;
	margin: 5% 0 0 5%;
	max-width: none;
	padding: 0 0 0 0 ; 
} 
	 
	.column3 p {
	margin: 0 0 0 0;
	/*text-color: #fff;
	font-weight: 500;
	letter-spacing: 1.5;*/
}
	 
	
		
	.navlogo {float: left;
width: 40vw;
	height: 3em;
margin: 1em 0 0 10%;
	 
 
 }

header {
	width: 100%; 
	margin:  0 0 1em 0;
	padding-left: 0;
	float: left;
	
	  
}
header h1 {
	font-size: 1.5em;
	text-align: left;
	margin-right: 0;
	 
}
	
	
	
.flex-container {
display: flex;
	flex-direction: column;
margin: 3em 0 0 0;
padding: 0 0 0 10%;
	
}

.flex-container > div {
 align: left;
  margin: .5em 0 0 0;
  padding: 0px;
  font-size: 1em;

}

	
	

 nav
 {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	opacity: 1;
	height:auto;
	padding: 12% 0 10% 0;
	margin: 0 0 0 0 ;
 	width: 100%;
	z-index: 200;
	 -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  -ms-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s;
   background-color: rgba(255, 255, 255, 0.95); 
	box-shadow: 0px 1px 50px #5E5E5E;
}

	nav:hover
{ opacity: 1; 
} 

#show:target {display:inline;}
#hide {display:block;}
#show:target {display:block;}
#hide:target {display:none;}


#menu-toggle {
  top:1.5em;
	right: 10%;
  position:fixed;
  	z-index: 2000;
  /*left:10em;*/
}

.menu {
	display: block;
	margin: 0 5% 0 0;
 
}

nav p {
	font-size: 1em;
	font-color: #999;
	margin : 0 0 0 0% ;
	padding: 2em 0 1em 5%;
	 
	text-align:left;
	line-height: 1.5em;
	 
	 
	
}
 


#home p{
 	max-width: 100%;
	margin-top: 25em;
	 z-index: 2000;
  	 
} 
.hide {
	display: block;
}
	
	
	
 #trp, #can,  #ska, #hm, #one, #trek, #bel, #wis,  #strive, #im, #spot, #logos, #illus, #photo, #web, #anim, #booklets, #businesscards, #billboards, #flyers, #brochures,  #sixlives, #garli, #slow, #misc, #conversations {
   width: 100vw;
	float: left;
	height: auto;
	margin: 0 0 3em 0;
	box-shadow: 0px 5px 25px rgba(0,0,0, 0.4);
	background-color: rgba(255, 255, 255, 0.6);
	  max-width: 100vw;
	padding: 5em 0 3em 0;
	 
	 
	 }
	 
	 
	 .column2 p {
	margin: 0 0 0 0;
	text-color: #fff;
	font-weight: 500;
	letter-spacing: 1.5;
}
 
	 
 

  .corner1 {
position: absolute;
	left: 0;
	top:0;
	width: 300px;
	height: 300px;
	background-image: url(images/paper.png);
	background-repeat: no-repeat;
	 -ms-transform: rotate(90deg); /* IE 9 */
    -webkit-transform: rotate(90deg); /* Chrome, Safari, Opera */
    transform: rotate(90deg);
	opacity: .8;
	z-index: -100;
}
.corner2 {

	width: 300px;
	height: 300px;
	background-image: url(images/paper.png);
	background-repeat: no-repeat;
	 -ms-transform: rotate(180deg); /* IE 9 */
    -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
    transform: rotate(180deg);
position:fixed;
right: 0;
top: 0;
opacity: .8;
	z-index: -100;

}
.corner3 {

	width: 300px;
	height: 300px;
	background-image: url(images/paper.png);
	background-repeat: no-repeat;
	 -ms-transform: rotate(270deg); /* IE 9 */
    -webkit-transform: rotate(270deg); /* Chrome, Safari, Opera */
    transform: rotate(270deg);
position:fixed;
right: 0;
bottom: 0;
opacity: .8;
	z-index: -100;

}
.corner4 {

	width: 300px;
	height: 300px;
	background-image: url(images/paper.png);
	background-repeat: no-repeat;
	 -ms-transform: rotate(0deg); /* IE 9 */
    -webkit-transform: rotate(0deg); /* Chrome, Safari, Opera */
    transform: rotate(0deg);
position:fixed;
left: 0;
bottom: 0;
opacity: .8;
	z-index: -100;

}

/*changed the width of the textures to 500 because they were extending the width of the window*/


	
.columnhome {
	position: absolute;
	width: 55%;	 
	max-width: 60em;
	 margin-top: 0;
	 
}
 

#trpweb, #trpchart, #trpsign, #skaban, #skabc, #skapost,  #onedm, #onebc, #hmfood, #hmweb, #trek1, #trek3, #beldm, #belfb, #wi1, #wi2, #wi3, #wi4, #wi5, #strweb, #strfly, #intfly, #intapt    
	{ height:50%;   
		max-width: 90%;  
		position:fixed; 
		top: 5%; left:0; 
		right: 0;   
		z-index:200; display:none;    
		background-color: rgba(255,255,255,0.9);    
		padding: 1em 1em 1em 5%;  border-radius:2px;   }

#spotbc { height:50%;   max-width: 70%;  position:fixed; top: 5%; left:5%; right: 5%;   z-index:200; display:none;         padding: 1em 1em 1em 5%;  border-radius:2px;   }  

 
	
  .small {
	 
	float: center;
	width: 70%;
	height: auto;
	margin: 1em 0 1em 5%; 
	max-width: 80%;
	 min-height: 5em;
 
}
	
	

	
	

.bag {
float: left;
 
width: 60%;
height: auto;
margin: 0;
background-image: url( images/bagneyes400.gif);
background-repeat:none;

}
footer { display: none;}

/*#logos, #illus, #photo, #web, #anim {
   	 height: auto;
	float: left;
	margin-bottom: 7em;
  	width: 100%;
  	padding: 3em 3em 3em 0;
	 box-shadow: 0px 1px 50px #5E5E5E;
	background-color: rgba(255, 255, 255, 0.7); 
	
}*/
}