body 		{
	background-color: #262728; color: #EEEEEE;
	background-image: url(../images/noise.jpg);}

a			{ color: #262728; text-decoration: none;}

#beherenow	{
	background:#666d7d url(../images/2017_1.jpg) no-repeat center center;
	position:relative; display:block; width: 800px; height:420px; margin: 45px auto 0 auto;
	border: solid 2px white; border-bottom: 0; transition: background-image 0.1s ease-in-out;}

.icon		{ display: block; float: right; margin: 23px;}


/* Vertical Accordion Style */

.va-container	{
	position:relative;
	margin:40px auto 0 auto;}
	
.va-wrapper		{
	width:100%; height:100%;
	position:relative; overflow:hidden;
	background:#262728; border: solid 2px white; border-top: solid 1px white;
	margin-top: -40px; margin-left: -2px;}
	
.va-slice		{
	cursor:pointer;
	position:absolute;
	width:100%; left:0px;
	overflow:hidden;}	
	
.va-title		{
	font-family: 'Open Sans Condensed', sans-serif;
	font-size:60px; line-height: 133px; text-transform:uppercase;
	margin-left: 20px; color:#fff;
	text-shadow: 0px 0px 1px white;}
	
.va-content		{
	display:none;
	position: absolute; bottom: 10px; left: 10px; margin: -10px;}
	
.va-content p	{
	margin: 10px 0 15px 20px;
	font-size: 17px; line-height: 24px;
	font-family: Georgia, serif; font-style: italic; font-weight: 400;}


/* Effect 10: reveal, push out */

.va-content a 	{
	font-family: 'Open Sans Condensed', sans-serif;
	text-transform:uppercase; letter-spacing: 1px;
	font-size: 33px; line-height: 33px;
	display: inline-block; margin: 0 0 0 0;
	position: relative; z-index: 1; overflow: hidden;
	text-decoration: none; 	outline: none;}

.va-content a:hover,
.va-content a:focus {
	outline: none;}
	
.va-content a span {
	display: block;
	padding: 10px 20px;
	background: #FFF;
	-webkit-transition: -webkit-transform 0.2s;
	-moz-transition: -moz-transform 0.2s;
	transition: transform 0.2s;}

.va-content a::before {
	position: absolute; top: 0; left: 0; z-index: -1;
	padding: 10px 20px;
	width: 100%; height: 100%;
	background: #fff;  color: #EEEEEE;
	content: attr(data-hover);
	-webkit-transition: -webkit-transform 0.2s;
	-moz-transition: -moz-transform 0.2s;
	transition: transform 0.3s;
	-webkit-transform: translateX(-25%);}

.va-content a:hover span,
.va-content a:focus span {
	-webkit-transform: translateX(100%);
	-moz-transform: translateX(100%);
	transform: translateX(100%);}

.va-content a:hover::before,
.va-content a:focus::before {
	-webkit-transform: translateX(0%);
	-moz-transform: translateX(0%);
	transform: translateX(0%);}


/* Slices of Life */

.va-slice-2016	{background:#000 url(../images/2016.jpg) no-repeat center center; color: #EEEEEE;} .va-slice-2016 a {color: #fa2e89;} .va-slice-2016 a::before {background: #FF3066;  color: #FFF;}
.va-slice-2015	{background:#000 url(../images/2015.jpg) no-repeat center center; color: #FFFFFF;} .va-slice-2015 a {color: #ff0000;} .va-slice-2015 a::before {background: #ff0000;  color: #FFF;}
.va-slice-2014	{background:#000 url(../images/2014.jpg) no-repeat center center; color: #EEEEEE;} .va-slice-2014 a {color: #fa2e89;} .va-slice-2014 a::before {background: #fa2e89;  color: #FFF;}
.va-slice-2013	{background:#000 url(../images/2013.jpg) no-repeat center center; color: #FFFFFF;} .va-slice-2013 a {color: #333333;} .va-slice-2013 a::before {background: #3a3d42;  color: #FFF;}
.va-slice-2012	{background:#000 url(../images/2012.jpg) no-repeat center center; color: #EEEEEE;} .va-slice-2012 a {color: #fa2e89;} .va-slice-2012 a::before {background: #fa2e89;  color: #FFF;}
.va-slice-2011	{background:#000 url(../images/2011.jpg) no-repeat center center; color: #4f3030;} .va-slice-2011 a {color: #b58852;} .va-slice-2011 a::before {background: #b58852;  color: #FFF;}
.va-slice-2010	{background:#000 url(../images/2010.jpg) no-repeat center center; color: #EEEEEE;} .va-slice-2010 a {color: #9d080d;} .va-slice-2010 a::before {background: #310f0f;  color: #FFF;}
.va-slice-2009	{background:#000 url(../images/2009.jpg) no-repeat center center; color: #beb426;} .va-slice-2009 a {color: #beb426;} .va-slice-2009 a::before {background: #beb426;  color: #000;}
.va-slice-2008	{background:#000 url(../images/2008.jpg) no-repeat center center; color: #EEEEEE;} .va-slice-2008 a {color: #eb2425;} .va-slice-2008 a::before {background: #eb2425;  color: #000;}
.va-slice-2007	{background:#000 url(../images/2007.jpg) no-repeat center center; color: #EEEEEE;} .va-slice-2007 a {color: #563074;} .va-slice-2007 a::before {background: #563074;  color: #00a7e5;}
.va-slice-2006	{background:#000 url(../images/2006.jpg) no-repeat center center; color: #FFFFFF;} .va-slice-2006 a {color: #d7235c;} .va-slice-2006 a::before {background: #d7235c;  color: #000;}
.va-slice-2005	{background:#000 url(../images/2005.jpg) no-repeat center center; color: #322222;} .va-slice-2005 a {color: #000000;} .va-slice-2005 a::before {background: #000000;  color: #FFF;}
.va-slice-2004	{background:#000 url(../images/2004.jpg) no-repeat center center; color: #FFFFFF;} .va-slice-2004 a {color: #AAAA1A;} .va-slice-2004 a::before {background: #D9E021;  color: #000;}
.va-slice-2003	{background:#000 url(../images/2003.jpg) no-repeat center center; color: #000000;} .va-slice-2003 a {color: #999999;} .va-slice-2003 a::before {background: url(../images/nihil.gif); color: #000;}
.va-slice-2002	{background:#000 url(../images/2002.jpg) no-repeat center center; color: #FFFFFF;} .va-slice-2002 a {color: #91120d;} .va-slice-2002 a::before {background: #91120d;  color: #000;}
.va-slice-2001	{background:#000 url(../images/2001.jpg) no-repeat center center; color: #322222;} .va-slice-2001 a {color: #000000;} .va-slice-2001 a::before {background: url(../images/nihil.gif); color: #000;}
.va-slice-2000	{background:#000 url(../images/2000.jpg) no-repeat center center; color: #e3caab;} .va-slice-2000 a {color: #000000;} .va-slice-2000 a::before {background: #000000;  color: #FFF;}
.va-slice-1999	{background:#000 url(../images/1999.jpg) no-repeat center center; color: #ba83a4;} .va-slice-1999 a {color: #000000;} .va-slice-1999 a::before {background: #ba83a4;  color: #000;}
.va-slice-1998	{background:#000 url(../images/1998.jpg) no-repeat center center; color: #FFFFFF;} .va-slice-1998 a {color: #bda528;} .va-slice-1998 a::before {background: #d9be2e;  color: #000;}
.va-slice-1997	{background:#000 url(../images/1997.jpg) no-repeat center center; color: #FFFFFF;} .va-slice-1997 a {color: #601c65;} .va-slice-1997 a::before {background: #601c65;  color: #FFF;}


/* Nav Arrows */

/*
.va-nav span{
	top:-35px; left:50%; width:40px; height:25px;
	background:transparent url(../images/prev.png) no-repeat center center;
	position:absolute; margin-left:-20px; text-indent:-9000px;
	opacity:0.8; cursor:pointer; display:none; z-index:100;}
	
.va-nav span.va-nav-next{
	background-image:url(../images/next.png);
	top:auto; bottom:-35px;}
*/

.va-nav span{
	top:-50px; left:50%; width:40px; height:25px;
	content: "\e61d"; font-size: 50px; color: white;
	position:absolute; margin-left:-20px;
	opacity:0.8; cursor:pointer; display:none; z-index:999;}
	
.va-nav span.va-nav-next{
	content: "\e61f";
	top:auto; bottom:-25px;}
	
.va-nav span:hover{
	opacity:1.0;}


/* FOOTER */

footer			{color: #eeeeee; margin:75px auto 50px auto; width:800px; text-align:center}
footer a		{color: #47494b; margin: 0 10px; font-size: 32px}
footer a:hover	{color: #cccccc;}
footer div		{display: inline-block; margin: 0 7px}
footer span		{display: none;}


/* ICOMOON */ 

@font-face {
	font-family: 'icomoon';
	src:url('../fonts/icomoon.eot');
	src:url('../fonts/icomoon.eot?#iefix') format('embedded-opentype'),
		url('../fonts/icomoon.ttf') format('truetype'),
		url('../fonts/icomoon.woff') format('woff'),
		url('../fonts/icomoon.svg#icomoon') format('svg');
	font-weight: normal; font-style: normal;}

[class^="icon-"], [class*=" icon-"] {
	font-family: 'icomoon';
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;

	/* Better Font Rendering =========== */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;}


/* HI-ICON */
		
.hi-icon {
	display: inline-block;
	font-size: 0px; cursor: pointer; margin: 0 3px;
	width: 48px; height: 48px; border-radius: 50%;
	text-align: center; position: relative; z-index: 1;}

.hi-icon:after {
	pointer-events: none;
	position: absolute;
	width: 100%; height: 100%;
	border-radius: 50%; content: '';
	-webkit-box-sizing: content-box; 
	-moz-box-sizing: content-box; 
	box-sizing: content-box;}
	
.hi-icon:before {
	font-family: 'icomoon'; font-size: 24px; line-height: 48px;
	font-style: normal; font-weight: normal; font-variant: normal;
	text-transform: none; display: block; speak: none;
	-webkit-font-smoothing: antialiased;}

.hi-icon-effect-5 .hi-icon {
	background: rgba(0,0,0,0.2); overflow: hidden;
	-webkit-transition: background 0.3s, color 0.3s, box-shadow 0.3s;
	-moz-transition: background 0.3s, color 0.3s, box-shadow 0.3s;
	transition: background 0.3s, color 0.3s, box-shadow 0.3s;}
	
.hi-icon-effect-5 .hi-icon:after {display: none;}

.no-touch .hi-icon-effect-5 .hi-icon:hover {
	box-shadow: 0 0 3px 6px rgba(0,0,0,0.1); 
	}
	
.no-touch .hi-icon-effect-5a .hi-icon:hover:before {
	-webkit-animation: toRightFromLeft 0.3s forwards;
	-moz-animation: toRightFromLeft 0.3s forwards;
	animation: toRightFromLeft 0.3s forwards;}
	
@-webkit-keyframes toRightFromLeft {    49% {     -webkit-transform: translate(100%);     }   50% {       opacity: 0;         -webkit-transform: translate(-100%);    }   51% {       opacity: 1;     } } @-moz-keyframes toRightFromLeft {   49% {       -moz-transform: translate(100%);    }   50% {       opacity: 0;         -moz-transform: translate(-100%);   }   51% {       opacity: 1;     } } @keyframes toRightFromLeft {    49% {       transform: translate(100%);     }   50% {       opacity: 0;         transform: translate(-100%);    }   51% {       opacity: 1;     } } .no-touch .hi-icon-effect-5b .hi-icon:hover:before {    -webkit-animation: toLeftFromRight 0.3s forwards;   -moz-animation: toLeftFromRight 0.3s forwards;  animation: toLeftFromRight 0.3s forwards; } @-webkit-keyframes toLeftFromRight {    49% {       -webkit-transform: translate(-100%);    }   50% {       opacity: 0;         -webkit-transform: translate(100%);     }   51% {       opacity: 1;     } } @-moz-keyframes toLeftFromRight {   49% {       -moz-transform: translate(-100%);   }   50% {       opacity: 0;         -moz-transform: translate(100%);    }   51% {       opacity: 1;     } } @keyframes toLeftFromRight {    49% {       transform: translate(-100%);    }   50% {       opacity: 0;         transform: translate(100%);     }   51% {       opacity: 1;     } } .no-touch .hi-icon-effect-5c .hi-icon:hover:before {    -webkit-animation: toTopFromBottom 0.3s forwards;   -moz-animation: toTopFromBottom 0.3s forwards;  animation: toTopFromBottom 0.3s forwards; } @-webkit-keyframes toTopFromBottom {    49% {       -webkit-transform: translateY(-100%);   }   50% {       opacity: 0;         -webkit-transform: translateY(100%);    }   51% {       opacity: 1;     } } @-moz-keyframes toTopFromBottom {   49% {       -moz-transform: translateY(-100%);  }   50% {       opacity: 0;         -moz-transform: translateY(100%);   }   51% {       opacity: 1;     } } @keyframes toTopFromBottom {    49% {       transform: translateY(-100%);   }   50% {       opacity: 0;         transform: translateY(100%);    }   51% {       opacity: 1;     } } .no-touch .hi-icon-effect-5d .hi-icon:hover:before {    -webkit-animation: toBottomFromTop 0.3s forwards;   -moz-animation: toBottomFromTop 0.3s forwards;  animation: toBottomFromTop 0.3s forwards; } @-webkit-keyframes toBottomFromTop {    49% {       -webkit-transform: translateY(100%);    }   50% {       opacity: 0;         -webkit-transform: translateY(-100%);   }   51% {       opacity: 1;     } } @-moz-keyframes toBottomFromTop {   49% {       -moz-transform: translateY(100%);   }   50% {       opacity: 0;         -moz-transform: translateY(-100%);  }   51% {       opacity: 1;     } } @keyframes toBottomFromTop {    49% {       transform: translateY(100%);    }   50% {       opacity: 0;         transform: translateY(-100%);   }   51% {       opacity: 1;     } } 


/* SOCIAL ICONS */

.icon-behance:before 	{ content: "\e610";} .icon-behance:hover	{background-color: #1769ff; color: #d8dbe2;}
.icon-dribbble:before 	{ content: "\e605";} .icon-dribbble:hover	{background-color: #e04c86; color: #FFFFFF;}
.icon-vimeo4:before 	{ content: "\e60b";} .icon-vimeo4:hover		{background-color: #1ab7ea; color: #FFFFFF}

.icon-vynil:before 		{ content: "\e61b";} .icon-vynil:hover		{background-color: #313e42; color: #629aa9;}
.icon-cassette:before 	{ content: "\e614";} .icon-cassette:hover	{background-color: #d6f0f2; color: #2e4358;}
.icon-lastfm:before 	{ content: "\e61a";} .icon-lastfm:hover		{background-color: #d2013a; color: #FFFFFF;}

.icon-medium:before 	{ content: "\e601";} .icon-medium:hover		{background-color: #111111; color: #EEEEEE;}
.icon-books:before 		{ content: "\e607";} .icon-books:hover		{background-color: #d3c7a5; color: #77614e;}

.icon-facebook:before 	{ content: "\e622";} .icon-facebook:hover	{background-color: #3b5998; color: #FFFFFF;}
.icon-twitter:before 	{ content: "\e600";} .icon-twitter:hover	{background-color: #1ab7ea; color: #FFFFFF;}
.icon-instagram:before  { content: "\e612";} .icon-instagram:hover	{background-color: #6a5646; color: #e7dbc7;}


.icon-caret-up:before 	{ content: "\e61c";}
.icon-caret-down:before { content: "\e61f";}
.icon-caret-right:after { content: "\e604";}




