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

html {
	height: 100%;
}

body,p,td,th, q {
	font-family: "aktiv-grotesk",sans-serif;
	font-size: 18px;
	color: #040404;
	line-height: 1.33em;
	text-align: left;
}
body {
	background-color: #CCCCCC;
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	text-align: center;
	font-size: 18px;
}
a:link {
	color: #000000;
	text-decoration: none;
}
a:visited {
	text-decoration: none;
	color: #000000;
}
a:hover {
	text-decoration: none;
	color: #000000;
}
a:active {
	text-decoration: none;
	color: #000000;
	text-align: left;
	font-size: 16px;
}
h1 {
	font-size: 36px;
}
h2 {
	font-size: 24px;
}

#main-container {
	width: 850px;
	/*border: solid 1px #B03739;*/
	margin-left: auto;
	margin-right: auto;
	text-align: left;
	margin-top: 64px;
	padding-left: 50px;
	padding-right: 0px;
}

#logo {
	width: 850px;
	float: left;
}

#old-site {
	padding-top: 20px;
	font-size: 16px;
}

#main-text p {
	float:none;
	width: 780px;
	padding-top: 50px;
	font-size: 1.15em;
	line-height: 1.4;
	letter-spacing: 0.02em;
}
#img-container {
	width: 800px;
	float: left;
	padding-top: 55px;
}

#twitter-feed {
	padding-top: 50px;

}



/*IMAGE GRID*/


/*TOL*/

#box-tol    {
			width:792px;
          	height:306px;
          	background: url(../img/third_paalla.jpg);
			overflow:hidden;
	   	  margin-bottom: 16px;
}

#overlay-tol   {  background: url(../img/third_alla.jpg);
               opacity:0;
			   width: 792px;
			   height: 306px;
               -webkit-transition: opacity .25s ease;
				-moz-transition: opacity .25s ease;}

#box-tol:hover #overlay-tol {
               opacity:1;}

#text-tol     {
	padding-top: 256px;
	color: #ececec;
	padding-left: 15px;
	font-size: 12px;
	line-height: 1em;
	width: 364px;
	display: block;
	text-align: left;
			   }



/*LENIN*/

#box-lenin    {
			width:792px;
          	height:316px;
          	background: url(../img/lenin_paalla.jpeg);
			overflow:hidden;
	   	  margin-bottom: 16px;
}

#overlay-lenin  {  background: url(../img/lenin_alla.jpeg);
               opacity:0;
			   width: 792px;
			   height: 316px;
               -webkit-transition: opacity .25s ease;
				-moz-transition: opacity .25s ease;}

#box-lenin:hover #overlay-lenin {
               opacity:1;}

#text-lenin     {
	padding-top: 266px;
	color: #ececec;
	padding-left: 15px;
	font-size: 12px;
	line-height: 1em;
	width: 364px;
	display: block;
	text-align: left;
			   }

/*IMPIVAARA*/

#box-imp    {
			width:792px;
          	height:333px;
          	background: url(../img/impivaara_paalla.jpg);
			overflow:hidden;
	   	  margin-bottom: 16px;
}

#overlay-imp   {  background: url(../img/impivaara_alla.jpg);
               opacity:0;
			   width: 792px;
			   height: 333px;
               -webkit-transition: opacity .25s ease;
				-moz-transition: opacity .25s ease;}

#box-imp:hover #overlay-imp {
               opacity:1;}

#text-imp      {
	padding-top: 296px;
	color: #ececec;
	padding-left: 15px;
	font-size: 12px;
	line-height: 1em;
	width: 164px;
	display: block;
	text-align: left;
			   }

/*LOT*/

#box-lot    {
			width:792px;
          	height:222px;
          	background: url(../img/lot_paalla.jpg);
			overflow:hidden;
	   	  margin-bottom: 16px;
}

#overlay-lot    {  background: url(../img/lot_alla.jpg);
               opacity:0;
			   width: 792px;
			   height: 222px;
               -webkit-transition: opacity .25s ease;
				-moz-transition: opacity .25s ease;}

#box-lot:hover #overlay-lot {
               opacity:1;}

#text-lot      {
	padding-top: 186px;
	color: #ececec;
	padding-left: 15px;
	font-size: 12px;
	line-height: 1em;
	width: 164px;
	display: block;
	text-align: left;
			   }

/*BIND*/

#box-bind    {
			width:792px;
          	height:186px;
          	background: url(../img/bind_still.jpg);
			overflow:hidden;
	   	  margin-bottom: 16px;
}

#overlay-bind    {  background: url(../img/bind_inst.jpg);
               opacity:0;
			   width: 792px;
			   height: 186px;
               -webkit-transition: opacity .25s ease;
				-moz-transition: opacity .25s ease;}

#box-bind:hover #overlay-bind {
               opacity:1;}

#text-bind      {
	padding-top: 136px;
	color: #ececec;
	padding-left: 15px;
	font-size: 12px;
	line-height: 1em;
	width: 185px;
	display: block;
	text-align: left;
			   }

	 /*IAI*/

	 #box-iai    {
	 			width:792px;
	           	height:262px;
	           	background: url(../img/iai_paalla.jpg);
	 			overflow:hidden;
	 	   	  margin-bottom: 16px;
	 }

	 #overlay-iai    {  background: url(../img/iai_alla.png);
	                opacity:0;
	 			   width: 792px;
	 			   height: 262px;
	                -webkit-transition: opacity .25s ease;
	 				-moz-transition: opacity .25s ease;}

	 #box-iai:hover #overlay-iai {
	                opacity:1;}

	 #text-iai      {
	 	padding-top: 223px;
	 	color: #ececec;
	 	padding-left: 15px;
	 	font-size: 12px;
	 	line-height: 1em;
	 	width: 195px;
	 	display: block;
	 	text-align: left;
	 			   }

					 /*MARE*/

					 #box-mare    {
					 			width:792px;
					           	height:262px;
					           	background: url(../img/mare_paalla.jpg);
					 			overflow:hidden;
					 	   	  margin-bottom: 16px;
					 }

					 #overlay-mare   {  background: url(../img/mare_alla.png);
					                opacity:0;
					 			   width: 792px;
					 			   height: 262px;
					                -webkit-transition: opacity .25s ease;
					 				-moz-transition: opacity .25s ease;}

					 #box-mare:hover #overlay-mare {
					                opacity:1;}

					 #text-mare      {
					 	padding-top: 213px;
					 	color: #ececec;
						color: #101010;
					 	padding-left: 15px;
					 	font-size: 12px;
					 	line-height: 1em;
					 	width: 195px;
					 	display: block;
					 	text-align: left;
					 			   }



/*TRANSIT*/

#box-transit    {
			width:792px;
          	height:346px;
          	background: url(../img/transit_still.jpg);
			overflow:hidden;
	   	  margin-bottom: 16px;
}

#overlay-transit    {  background: url(../img/transit_inst.jpg);
               opacity:0;
			   width: 792px;
			   height: 346px;
               -webkit-transition: opacity .25s ease;
				-moz-transition: opacity .25s ease;}

#box-transit:hover #overlay-transit {
               opacity:1;}

#text-transit      {
	padding-top: 307px;
	color: #ececec;
	padding-left: 15px;
	font-size: 12px;
	line-height: 1em;
	width: 154px;
	display: block;
	text-align: left;
			   }


/*OMNIA*/

#box-omnia    {
			width:792px;
          	height:365px;
          	background: url(../img/omnia_still_794.jpg);
			overflow:hidden;
	   	  margin-bottom: 16px;
}

#overlay-omnia    {  background: url(../img/omnia_install_794.jpg);
               opacity:0;
			   width: 792px;
			   height: 365px;
               -webkit-transition: opacity .25s ease;
				-moz-transition: opacity .25s ease;}

#box-omnia:hover #overlay-omnia {
               opacity:1;}

#text-omnia      {
	padding-top: 327px;
	color: #ececec;
	padding-left: 15px;
	font-size: 12px;
	line-height: 1em;
	width: 174px;
	display: block;
	text-align: left;
			   }




/*A VIEW*/

#box-aview    {
			width:524px;
          	height:255px;
          	background: url(../img/AWiew_still_H280.jpg);
			overflow:hidden;}

#overlay-aview    {  background: url(../img/AWiew_install_H280.jpg);
               opacity:0;
			   width: 524px;
			   height: 255px;
               -webkit-transition: opacity .25s ease;
-moz-transition: opacity .25s ease;}

#box-aview:hover #overlay-aview {
               opacity:1;}

#text-aview      {
	padding-top: 217px;
	color: #ececec;
	padding-left: 15px;
	font-size: 12px;
	line-height: 1em;
	width: 174px;
	display: block;
	text-align: left;
			   }


/*NEKROPOLIS*/

#box-nekro    {
			width:254px;
           height:450px;
		   margin-right: 15px;
		  margin-bottom: 15px;

          background: url(../img/center/nekro_388_still.jpg);
overflow:hidden;
float: left;}

#overlay-nekro    {  background: url(../img/center/nekro_388_install.jpg);
               opacity:0;
			   height: 450px;
			   width: 254px;
               -webkit-transition: opacity .25s ease;
			-moz-transition: opacity .25s ease;}

#box-nekro:hover #overlay-nekro {
               opacity:1;}

#text-nekro      {
	padding-top: 414px;
	color: #ececec;
	padding-left: 15px;
	font-size: 12px;
	line-height: 1em;
	width: 174px;
	display: block;
	text-align: left;
			   }

 /*WAITING*/

#box-waiting    {
			width:254px;
           height:450px;
		   margin-right: 15px;
		  margin-bottom: 15px;


          background: url(../img/center/AWorldinWaiting_installationview_kunsthalleHelsinki2018.jpg);
overflow:hidden;
float: left;}

#overlay-waiting    {  background: url(../img/center/AWorldinWaiting_installationview_V&A2017.jpg);
               opacity:0;
			   background-size: cover;

			   height: 450px;
			   width: 254px;
               -webkit-transition: opacity .25s ease;
			-moz-transition: opacity .25s ease;}

#box-waiting:hover #overlay-waiting {
               opacity:1;}

#text-waiting      {
	padding-top: 414px;
	color: #ececec;
	padding-left: 15px;
	font-size: 12px;
	line-height: 1em;
	width: 185px;
	display: block;
	text-align: left;
			   }



 /*EPOKHE*/

#box-epokhe    {
			width:254px;
           height:450px;
		   margin-right: 0px;
		  margin-bottom: 15px;

          background: url(../img/center/Epokhe_still.jpg);
overflow:hidden;
float: left;}

#overlay-epokhe    {  background: url(../img/center/epokhe_Logomo_June2017.jpg);
               opacity:0;
			   height: 450px;
			   width: 254px;
               -webkit-transition: opacity .25s ease;
			-moz-transition: opacity .25s ease;}

#box-epokhe:hover #overlay-epokhe {
               opacity:1;}

#text-epokhe      {
	padding-top: 414px;
	color: #ececec;
	padding-left: 15px;
	font-size: 12px;
	line-height: 1em;
	width: 120px;
	display: block;
	text-align: left;
			   }


/*ABENDLAND*/

#box-abendland    {
			width:254px;
           height:254px;
		  margin-right: 15px;
		  margin-bottom: 15px;
          background: url(../img/abend_280_still.jpg);
		overflow:hidden;
		float:left;}

#overlay-abendland    {  background: url(../img/abend_280_install.jpg);
               opacity:0;
			   height: 254px;
			   width: 254px;
               -webkit-transition: opacity .25s ease;
			-moz-transition: opacity .25s ease;}

#box-abendland:hover #overlay-abendland {
               opacity:1;}

#text-abendland      {
	padding-top: 203px;
    color: #ececec;
	padding-left: 15px;
	font-size: 12px;
	line-height: 1em;
	width: 174px;
	display: block;
			   }

/*ARKHI*/

#box-arkhi    {
			width:794px;
           height:218px;
		  margin-top: 0px;
          background: url(../img/arkhi_794_still.jpg);
		overflow:hidden;}

#overlay-arkhi    {
				background: url(../img/arkhi_794_install.jpg);
               opacity:0;
			   width: 794px;
			   height: 218px;
               -webkit-transition: opacity .25s ease;
				-moz-transition: opacity .25s ease;
				}

#box-arkhi:focus #overlay-arkhi {
               opacity:1;}
#box-arkhi:hover #overlay-arkhi {
               opacity:1;}


#text-arkhi      {
	padding-top: 170px;
    color: #ececec;
	padding-left: 15px;
	font-size: 12px;
	line-height: 1em;
	width: 174px;
	display: block;
			   }

#footer-container {

	margin-top: 70px;
	padding-bottom: 100px;
	z-index: 999;
	font-size: 16px;
	left: 10px;
	}

#footer-left {
	float: left;
	width: 405px;
	text-align: left;
	font-size: 16px;

	}
#footer-center {
	float: left;
	width: 388px;
	text-align: left;
		font-size: 16px;

}
#footer-right {

	left: 550px;
	width: 310px;
	text-align: right;
		font-size: 16px;

}

/*TWITTER*/


/*
* Example style!
* You can do whatever the hell you want on your site :-)
*/

h2 {
  clear:both;
}

#example1 p {
  font-size: 16px;
  margin: 0px;
  color: #000;
}

#example1 a:link {
  color:#868686;
   word-break: break-all;

}

#example1 a:visited {
  color:#868686;
}

#example1 a:hover {
  color:#868686;
}

ul li {
  list-style:none;
  overflow: hidden;
  border:0px solid #dedede;
  margin:0px;
  padding-bottom:17px;
}

ul li:hover {
  background-color: none;
}

.user, .tweet, .timePosted {
  float:left;
}

.timePosted {
	font-weight: bold;
}

.user {
  width: 0%;
}

.tweet {
  width:73%;
}

.timePosted {
  width:35%;
}

.user {
  clear:left;
}

.user a {
 width: 100px;
}

.user span span {
  width:80px;
  display:block;
  margin-top:10px;
}

.user img, .user a > span {
  float:left;
}

.interact {
  display: none;
  float:left;
  width:10%;
  margin-top:-7px;
}

.interact a {
  margin-left:5px;
  float:left;
}

.user a > span {
  margin-left:10px;
}




.media img {
  max-width:250px;
  max-height:250px;
}