Project
Archive
Events
News & Upcoming
Service
Contact

Sign in

Welcome!Log into your account

your username

your password

Forgot your password?

Password recovery

Recover your password

your email

Search

Sign in

Welcome! Log into your account

your username

your password

Forgot your password? Get help

Password recovery

Recover your password

your email

A password will be e-mailed to you.

Genealogy of Amnesia Rethinking the Past for a new Future of Convivality

Project
Archive
Events
News & Upcoming
Service
Contact

Home Service

Service

Selected artistic and theoretical sources

Newsletter archive

FWF PEEK Project “Genealogy of Amnesia,” AR 439
Academy of Fine Arts Vienna
Lehargasse 6-8/II, 1060 Vienna
Email: archiveofamnesia@akbild.ac.at

This site uses cookies: Find out more.

Edit with Live CSS

/* title circles*/

*, *:before, *:after{
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing:border-box;
  box-sizing: border-box;
}

body{
  background: #f9f9f9;
  font-size: 16px;
  font-family: 'Raleway', sans-serif;
}

.main-title{
  color: #2d2d2d;
  text-align: center;
  text-transform: capitalize;
  padding: 0.7em 0;
}

.container{
  padding: 1em 0;
  float: left;
  width: 50%;
}
@media screen and (max-width: 640px){
  .container{
    display: block;
    width: 100%;
  }
}

@media screen and (min-width: 900px){
  .container{
    width: 33.33333%;
  }
}

.container .title{
  color: #1a1a1a;
  text-align: center;
  margin-bottom: 10px;
}

.content {
  position: relative;
  width: 90%;
  max-width: 400px;
  margin: auto;
  overflow: hidden;
}

.content .content-overlay {
  background: rgba(0,0,0,0.7);
  position: absolute;
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  opacity: 0;
  -webkit-transition: all 0.4s ease-in-out 0s;
  -moz-transition: all 0.4s ease-in-out 0s;
  transition: all 0.4s ease-in-out 0s;
  border-radius: 50%;
}

.content:hover .content-overlay{
  opacity: 1;
}

.content-image{
  width: 100%;
}

.content-details {
  position: absolute;
  text-align: center;
  padding-left: 1em;
  padding-right: 1em;
  width: 100%;
  top: 50%;
  left: 50%;
  opacity: 0;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  -webkit-transition: all 0.3s ease-in-out 0s;
  -moz-transition: all 0.3s ease-in-out 0s;
  transition: all 0.3s ease-in-out 0s;
}

.content:hover .content-details{
  top: 50%;
  left: 50%;
  opacity: 1;
  
}

.content-details h3{
  color: #fff;
  font-weight: 500;
  letter-spacing: 0.15em;
  margin-bottom: 0.5em;
  text-transform: uppercase;
}

.content-details p{
  color: #fff;
  font-size: 0.8em;
}

.fadeIn-bottom{
  top: 80%;
}

/*quote*/

blockquote h4{
    padding:0.8em 4em;
    font-family: "Abhaya Libre";
}

@media screen and (max-width: 640px){
blockquote h4{
    padding:0.1em 1em;
}
}

@media screen and (min-width: 900px){
  blockquote h4{
    padding:0.8em 8em;
}
}

Save

Write CSS OR LESS and hit save. CTRL + SPACE for auto-complete.