@import url("../pbai_style.css");
/*****************************************************************************
*               Sculpture / Project Individual Pages                          *
******************************************************************************/
section#page {  /*consider removing 'section' keyword once all pages are
                    responsive, also images are sized to fit a 1400px max-width
                    for when all pages are updated to responsive layout */
    max-width: 1075px;
    margin-left: auto;
    margin-right: auto;
    width:100%;
    text-align:left;
    font-family: "europa",sans-serif;
}
#banner {
    position:relative;
    overflow:hidden;
}
#banner img {   /* max image width is 1386px to avoid gap below div*/
    max-width: 100%;
    height: auto;
    min-height: 157px;
    min-width: 400px;
    display:flex; /*removeds gap below image inside #banner div */
}
#right-content {
    width:46.5%;
    float:left;
    padding: 3% 3% 3% 0.5%;
}
#left-content {
    width: 45.5%;
    float: left;
    padding: 3% 1.5% 2% 3%;
}
#left-content h1.with-sub {  /*removes margin below project headers for thouse with location and date info */
    margin-bottom: 0.2em;
    font-size: 1.7em;
    line-height: 1.3em;
}
#left-content h2, #right-content h2 {
    font-size:1em;
}
.pre-text { /*space after project location/date info, and before paragraph */
    padding-bottom:2%;
    font-size: 1.5em;
}
#left-content a {
    color:#fff;
    border-bottom: 1px dotted gray;
}
#left-content a.no-underline {
    border-bottom: 0;
}
#left-content a:hover {
    color:#c4c4c4;
     -webkit-transition: color .25s ease-in-out;
    -moz-transition: color .25s ease-in-out;
    -ms-transition: color .25s ease-in-out;
    -o-transition: color .25s ease-in-out;
    transition: color .25s ease-in-out;
}
#thumbnails a {
    width:31.33%;
    float:left;
    margin:1%;
    border-bottom: 0;
    position:relative;
}
.pdf-article {
    color: #C5C5C5;
    position: absolute;
    top: 43%;
    left: 28%;
    font-size: 0.85em;
    margin: 0;
    text-transform: uppercase;
}
#images {  /* slideshow and thumbnails div  old template*/
    padding:40px 20px 20px 30px;
    width: 550px;
    float:left;
}
#text-space {   /* Remove when all pages are updated to responsive */
    padding:40px 0px 10px 10px;
    width:430px;
    float:left;
}
#text-container { /* Remove when all pages are updated to responsive */
    width:360px;
    float:left;
}
#links, #sponsor-credit { /* Remove when all pages are updated to responsive */
    padding-left:10px;
    width:430px;
    margin:1% 0 1% 0;
    float:left;
}
#sponsor-credit { /* Remove when all pages are updated to responsive */
    margin-bottom:10%;
}
#sponsor, #credits {
    margin-right:40%;
}
#thumbs { /* Remove when all pages are updated to responsive */
    padding-top:6px;
    margin-left: -2px;
}
#thumbs img { /* Remove when all pages are updated to responsive */
    padding: 3px;
    border:0;
}
#thumbs a { /* Remove when all pages are updated to responsive */
    border:0;
}
/*****************************************************************************
*                                LIGHTBOX                                      *
******************************************************************************/
#fadeshow1 { /* Remove when all pages are updated to responsive */
  z-index: 1;
}
#lightbox a {
    border:0;
}
.lb-data .lb-details {
    width: 80%;
}
.lb-closeContainer {
    width: 20%;
}
.lb-outerContainer {
    -webkit-border-radius: 0 !important;
    -moz-border-radius: 0 !important;
    -ms-border-radius: 0 !important;
    -o-border-radius: 0 !important;
    border-radius: 0 !important;
}
/*****************************************************************************
*                              Sponsor Pages                                  *
******************************************************************************/
.sponsor-content, .credit-content {  /*affects background image on sponsor and credit pages. Images are set in Sculptures/index.css */
    width: 100%;
    background-size: auto 100%;
    float:left;
    background-repeat: no-repeat;
    background-color:#000; /* needs to be black rather than off-black to avoide visible strip beside background-image */
    background-position:right;
    height:100%;
    min-height:600px;
}
h1.sponsor {
    padding: 10% 0 3% 10%;
    max-width: 28em;
    font-weight:normal;
    font-size:1.2em;
}
#sponsor-content {
    background-color:#080808;
    width:100%;
    height:auto;
    color:#fbfbfb;
    float:left;
}
.logos, .logos-left {
    padding: 0  0 10% 10%;
    float: left;
    max-width:400px;
}
.logos-left,.logos-right {
    float:left;
    width:50%;
}
.logos img, .logos-left img,.logos-right img{
    float:left;
    padding: 0 30% 6% 0;
}
/*****************************************************************************
*                              credits Pages                                  *
******************************************************************************/
.credits-left, .credits-right, .credits-far-right, .credits-far-far-right {
    float:left;
    width: 22%;
    padding: 0 1% 2% 0;
}
.credit-content {
    padding-top: 5%;
}
.credits-left {
    margin-left: 8%;
}
.credit-content h2 {
    padding: 0;
    margin-top: 2em;
    font-weight: 400;
    font-size: 1.2em;
}
.credit-content p {
    font-size:0.9em;
    padding: 0;
    margin: 0;
}
.credits-wide {  /* for a single column of very short credits */
    width: 50%;
    float:left;
    padding: 0 2% 2% 20%;;
}
.credits-right-wide {
    width: 50%;
    float: left;
    padding: 0 0 2% 2%;
}
/*****************************************************************************
*                              Video Pages                                   *
******************************************************************************/
div#video {
    margin: 10% 0 5% 20%;
}
div#video p {
    padding-left: 5%;
}
.video {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 25px;
    height: 0;
}
.video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
#video p, #video a { /* Remove when all pages are updated to responsive */
    font-size:0.7em;
    color:#fbfbfb;
}
.video-content {
    width: 99%;
    float:left;
    background-color:#000; /* needs to be black rather than off-black to avoide visible strip beside background-image */
    height:100%;
}
/*****************************************************************************
*                                Footer                                      *
******************************************************************************/
#footer {
    float:right;
}
#footer p {
    color:#080808;
    font-size:0.85em;
    margin-top:0.5em;
}
#bottom-nav {
    padding:8px 10px 0px 20px;
    float:left;
}
#footer a, #footer p {
    float:left;
    border:0;
}
/**************SPONSOR and CREDIT Background Images*************************************/

.boston {
    background-image:url('../../sculptures/Sentient-Veil/background.jpg');
}

.grove {
    background-image:url('../../sculptures/Hylozoic-Grove/background.jpg');
}

.breathing {
    background-image:url('../../projects/Breathing-Pore/background.jpg');
}

.lines {
    background-image:url('../../projects/Iris_van_Herpen_Between-the-Lines/background.jpg');
}

.ocean {
    background-image:url('../../sculptures/1617_Nuit-Blanche/sponsor-background.jpg');
}
.lasg-singapore {
    background-image:url('../../projects/1613_Living-Architecture-Systems-ADM/sponsor-background.jpg');
}
.lucid {
    background-image:url('../../projects/Iris_van_Herpen_Lucid/background.jpg');
}
.dissipative {
    background-image:url('../../projects/1524_CITA-Dissipative-Architectures/background.jpg');
}
.cpnas {
    background-image:url('../../sculptures/Sentient-Chamber/background.jpg');
}
.dragon {
    background-image:url('../../sculptures/Spring-Dragon-Tail/background.jpg');
}
.academy-of-art {
    background-image:url('../../sculptures/1512_Epiphyte-Spring/background.jpg');
}
.hacking {
    background-image:url('../../projects/Iris_van_Herpen_Hacking-Infinity/background.jpg');
}
.bioart {
    background-image:url('../../projects/1515_BioArt/background.jpg');
}
.hammock {
    background-image:url('../../projects/1515_Hammock-Veil/background.jpg');
}
.berlin {
    background-image:url('../../sculptures/1416_Berlin_Flaurafauna/background.jpg');
}
.mmca {
    background-image:url('../../sculptures/1312_MMCA_Epiphyte-Chamber/background.jpg');
}
.hangzhou {
    background-image:url('../../sculptures/1222_Epiphyte_Spring_Hangzhou/background.jpg');
}
.paris {
    background-image:url('../../sculptures/1218_Radiant-Soil_Paris/background.jpg');
}
.exit {
   background-image:url('../../sculptures/1225_EXIT-Epiphyte-Veil/background.jpg');
}
.simons {
   background-image:url('../../sculptures/1115_Simons-Aurora/background.jpg');
}
.mesh {
    background-image:url('../../sculptures/1212_Protocell_Mesh/background.jpg');
}
.cloud {
    background-image:url('../../sculptures/1216_Protocell_Cloud/background.jpg');
}
.trondheim {
    background-image:url('../../sculptures/1208_Epiphyte-Grove/background.jpg');
}
.sydney {
    background-image:url('../../sculptures/1036_Sibyl/background.jpg');
}
.deaf {
    background-image:url('../../sculptures/1207_Protocell-Field/background.jpg');
}
.espacio {
    background-image:url('../../sculptures/1118_Hylozoic-Soil-Espacio/background.jpg');
}
.wellington {
   background-image:url('../../sculptures/1117_City_Gallery_Wellington/sponsor-background.jpg');
}
.stitches {
   background-image:url('../../sculptures/1114-1214_Cloud-Brocade/sponsor-background.jpg');
}
.leonardo {
   background-image:url('../../sculptures/1016_The_Leonardo/sponsor-background.jpg');
}
.cambridge {
   background-image:url('../../projects/1012_HG_Collaboration/background.jpg');
}
.luminato {
   background-image:url('../../sculptures/1016_The_Leonardo/sponsor-background.jpg');
}
.aurora {
    background-image:url('../../sculptures/1008_aurora/background.jpg');
}
.mexico {
   background-image:url('../../sculptures/0935mexicocity_hylozoicsoil/sponsor-background.jpg');
}
.quebec {
   background-image:url('../../sculptures/0918quebeccity_hylozoicsoil/sponsor-background.jpg');
}
.ball {
   background-image:url('../../sculptures/09xxBall_State/sponsor-background.jpg');
}
.linz{
   background-image:url('../../sculptures/0847Linz/sponsor-background.jpg');
}
.champs{
   background-image:url('../../sculptures/08xxChamp_Libre/sponsor-background.jpg');
}
.la{
   background-image:url('../../sculptures/0836Endothelium/sponsor-background.jpg');
}
.washington{
   background-image:url('../../projects/1413_Hylozoic_Ground_Collaboration/sponsor-background.jpg');
}
.matter {
   background-image:url('../../projects/1421_Hylozoic_Matter/sponsor-background.jpg');
}
.motion {
   background-image:url('../../projects/Iris_van_Herpen_Magnetic_Motion/sponsor-background.jpg');
}
.soil {
   background-image:url('../../sculptures/0635hylozoic_soil/sponsor-background.jpg');
}
.implant {
   background-image:url('../../sculptures/0610implant_matrix/credits-background.jpg');
}
.wilderness {
   background-image:url('../../projects/1222B_Wilderness-Embodied/background.jpg');
}
.herpen {
   background-image:url('../../projects/1222_Van-Herpen/sponsor-background.jpg');
}
.taipei {
   background-image:url('../../projects/1215_Taipei/background.jpg');
}
.microwave {
   background-image:url('../../sculptures/1431_Microwave_Hong-Kong/background.jpg');
}
.palestine {
   background-image:url('../../projects/1433_Palestine_Living-Architecture-Test-Bed/background.jpg');
}
.venice {
   background-image:url('../../sculptures/0929_Hylozoic_Ground_Venice/background.jpg');
}
/*****************************************************************************
*                                MEDIA QUERIES                               *
******************************************************************************/
/* Tablet Portrait size to standard 960 (devices and browsers) */
@media only screen and (min-width: 768px) and (max-width: 959px) {
}
/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
@media only screen and (min-width: 480px) and (max-width: 767px) {
     #right-content, #left-content {
        width:94%;
        padding:3%;
    }
    .sponsor-content, .credit-content, .video-content, #logo, #menu, .nav-toggle, #content {
        width:100%;
    }
}
/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
@media only screen and (max-width: 479px) {
     #right-content, #left-content {
        width:94%;
        padding:3%;
    }
    .video-content, .sponsor-content, .credit-content {
        background-image:none;
    }
    .credits-left, .credits-right, .credits-far-right, .credits-far-far-right {
        width: 94%;
        margin:3%;
    }
    #left-content h1.with-sub {
        font-size:1.4em;
    }
    .logos-right {
        padding: 0  0 10% 10%;
    }
    #footer p {
        width:100%;
        padding: 3%;
    }
}