/*

Yan Tomazewski

Author: Villa Bohnke
*/

@font-face {
  font-family:'PreissigText-BoldItalic';
  src: url('fonts/PreissigText-BoldItalic_gdi.eot');
  src: url('fonts/PreissigText-BoldItalic_gdi.eot?#iefix') format('embedded-opentype'),
    url('fonts/PreissigText-BoldItalic_gdi.woff') format('woff'),
    url('fonts/PreissigText-BoldItalic_gdi.ttf') format('truetype'),
    url('fonts/PreissigText-BoldItalic_gdi.svg#PreissigText-BoldItalic') format('svg');
  font-weight: 700;
  font-style: normal;
  font-stretch: normal;
  unicode-range: U+0020-2665;
  -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

@font-face {
  font-family:'PreissigOzdoby-Shape';
  src: url('fonts/PreissigOzdoby.eot');
  src: url('fonts/PreissigOzdoby.eot?#iefix') format('embedded-opentype'),
    url('fonts/PreissigOzdoby.woff') format('woff'),
    url('fonts/PreissigOzdoby.ttf') format('truetype'),
    url('fonts/PreissigOzdoby.svg#PreissigOzdoby-Shape') format('svg');
  font-weight: 400;
  font-style: normal;
  font-stretch: normal;
  unicode-range: U+0020-00E4;
}

@font-face {
  font-family:'CelliniTF-Bold';
  src: url('fonts/CelliniTF-Bold_gdi.eot');
  src: url('fonts/CelliniTF-Bold_gdi.eot?#iefix') format('embedded-opentype'),
    url('fonts/CelliniTF-Bold_gdi.woff') format('woff'),
    url('fonts/CelliniTF-Bold_gdi.ttf') format('truetype'),
    url('fonts/CelliniTF-Bold_gdi.svg#CelliniTF-Bold') format('svg');
  font-weight: 400;
  font-style: normal;
  font-stretch: normal;
  unicode-range: U+0020-2212;
  -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

@font-face {
  font-family:'CelliniTF-Regular';
  src: url('fonts/CelliniTF-Regular_gdi.eot');
  src: url('fonts/CelliniTF-Regular_gdi.eot?#iefix') format('embedded-opentype'),
    url('fonts/CelliniTF-Regular_gdi.woff') format('woff'),
    url('fonts/CelliniTF-Regular_gdi.ttf') format('truetype'),
    url('fonts/CelliniTF-Regular_gdi.svg#CelliniTF-Regular') format('svg');
  font-weight: 400;
  font-style: normal;
  font-stretch: normal;
  unicode-range: U+0020-2212;
  -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

@font-face {
  font-family:'CelliniTF-Italic';
  src: url('fonts/CelliniTF-Italic.eot');
  src: url('fonts/CelliniTF-Italic.eot?#iefix') format('embedded-opentype'),
    url('fonts/CelliniTF-Italic.woff') format('woff'),
    url('fonts/CelliniTF-Italic.ttf') format('truetype'),
    url('fonts/CelliniTF-Italic.svg#CelliniTF-Italic') format('svg');
  font-weight: 400;
  font-style: normal;
  font-stretch: normal;
  unicode-range: U+0020-2212;
  -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

.bluu{
  font-family:'PreissigText-BoldItalic';
  letter-spacing: 0px;
  font-size:1.06em;
  -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

.underline {
/*    border-bottom: 2px solid;*/
    box-shadow: inset 0 -8px 0 white, inset 0 -10px 0px black;
}

.italic{
  font-style: italic;
  font-style: normal;
}

.site-header{
  position: relative;
  z-index: 31;
}

.site-header .right-nav{
  font-size:0.85em;
  margin-right:10px;
}

.page-header:before{
      white-space: pre;
}

em{
  font-family:'CelliniTF-Italic';
  font-style: normal;
}

a {
   outline: 0;
}

.page-header:before, .projects li .icon:before, .captions-icon:before{
    font-family:'PreissigOzdoby-Shape';
    font-size: 1.2em;
    content: "\00E2\A";
}

.captions-icon {
    padding-left: 12.5%;
    margin-top: 5px;
}

.lang-switch{
    text-transform: capitalize;
    display: inline-block;
}

#page-1 .page-header:before, 
.projects li:nth-child(1) .icon:before,  
#page-1 .captions-icon:before, #page-10 .page-header:before, 
.projects li:nth-child(10) .icon:before,  #page-10 .captions-icon:before{
    content: "D";
}
#page-2 .page-header:before, .projects li:nth-child(2) .icon:before,  #page-2 .captions-icon:before, #page-11 .page-header:before, .projects li:nth-child(11) .icon:before,  #page-11 .captions-icon:before{
    content: "A";
}
#page-3 .page-header:before, .projects li:nth-child(3) .icon:before,  #page-3 .captions-icon:before, #page-12 .page-header:before, .projects li:nth-child(12) .icon:before,  #page-12 .captions-icon:before{
    content: "F";
}
#page-4 .page-header:before, .projects li:nth-child(4) .icon:before,  #page-4 .captions-icon:before, #page-13 .page-header:before, .projects li:nth-child(13) .icon:before,  #page-13 .captions-icon:before{
    content: "G";
    padding: 4px;
}
#page-5 .page-header:before, .projects li:nth-child(5) .icon:before,  #page-5 .captions-icon:before, #page-14 .page-header:before, .projects li:nth-child(14) .icon:before,  #page-14 .captions-icon:before{
    content: "I";
    padding-right: 7px;
}
#page-6 .page-header:before, .projects li:nth-child(6) .icon:before,  #page-6 .captions-icon:before, #page-15 .page-header:before, .projects li:nth-child(15) .icon:before,  #page-15 .captions-icon:before{
    content: "D";
    padding-right: 8px;
}
#page-7 .page-header:before, .projects li:nth-child(7) .icon:before,  #page-7 .captions-icon:before, #page-16 .page-header:before, .projects li:nth-child(16) .icon:before,  #page-16 .captions-icon:before{
    content: "C";
    /* padding-right: 4px; */
}
#page-8 .page-header:before, .projects li:nth-child(8) .icon:before,  #page-8 .captions-icon:before, #page-17 .page-header:before, .projects li:nth-child(17) .icon:before,  #page-17 .captions-icon:before{
    content: "H";

}
#page-9 .page-header:before, .projects li:nth-child(9) .icon:before,  #page-9 .captions-icon:before, #page-18 .page-header:before, .projects li:nth-child(18) .icon:before,  #page-18 .captions-icon:before{
    content: "E";
    padding-right: 10px;
}




#research-grid .shape img {
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
  user-select: none;
/*    position: absolute;
    left: 110px;
    top:50px;*/
}

.shape.toped img{
  top:0px !important;
}

.shape.toped {
  top:0px !important;
  margin-top:0px !important;
}


#research-grid .shape:nth-of-type(1) img{
  clip-path: url("#clipPolygon1");
  -webkit-clip-path: polygon(0px 253px,120px 251px,249px 117px,119px 0px);
}

#research-grid .shape:nth-of-type(2) img{
  clip-path: url("#clipPolygon2");
  -webkit-clip-path: polygon(2px 4px,65px 177px,240px 250px,166px 77px);
}

#research-grid .shape:nth-of-type(3) img{
  clip-path: url("#clipPolygon3");
  -webkit-clip-path: polygon(122px 242px,240px 180px,240px 113px,183px 3px,63px 2px,1px 118px);
}

#research-grid .shape:nth-of-type(4) img{
  clip-path: url("#clipPolygon4");
  -webkit-clip-path: polygon(53px 241px,181px 243px,242px 118px,186px 1px,55px 1px,1px 119px);

}

#research-grid .shape:nth-of-type(5) img{
  clip-path: url("#clipPolygon5");
  -webkit-clip-path: polygon(1px 4px,76px 122px,1px 237px,3px 235px,117px 164px,231px 239px,233px 237px,163px 123px,238px 2px,235px 1px,122px 75px,3px 2px);
}

#research-grid .shape:nth-of-type(6) img{
  clip-path: url("#clipPolygon1");
  -webkit-clip-path: polygon(0px 253px,120px 251px,249px 117px,119px 0px);

}


#research-grid .shape:nth-of-type(7) img{
  clip-path: url("#clipPolygon7");
  -webkit-clip-path: polygon(226px 228px,241px 129px,123px 1px,1px 229px);

}

#research-grid .shape:nth-of-type(8) img{
  clip-path: url("#clipPolygon8");
  -webkit-clip-path: polygon(123px 241px,239px 243px,123px 1px,1px 113px);

}

#research-grid .shape:nth-of-type(9) img{
  clip-path: url("#clipPolygon9");
  -webkit-clip-path: polygon(1px 54px,125px 1px,241px 55px,239px 185px,121px 236px,1px 179px);
}

#research-grid .shape:nth-of-type(10) img{
  clip-path: url("#clipPolygon1");
  -webkit-clip-path: polygon(0px 253px,120px 251px,249px 117px,119px 0px);
}

#research-grid .shape:nth-of-type(11) img{
  clip-path: url("#clipPolygon2");
  -webkit-clip-path: polygon(2px 4px,65px 177px,240px 250px,166px 77px);
}

#research-grid .shape:nth-of-type(12) img{
  clip-path: url("#clipPolygon3");
  -webkit-clip-path: polygon(122px 242px,240px 180px,240px 113px,183px 3px,63px 2px,1px 118px);
}

#research-grid .shape:nth-of-type(13) img{
  clip-path: url("#clipPolygon3");
  -webkit-clip-path: polygon(122px 242px,240px 180px,240px 113px,183px 3px,63px 2px,1px 118px);
}


#research-grid .shape:nth-of-type(1){
  margin-top: 160px;
  margin-left: 210px;
}
#research-grid .shape:nth-of-type(2){
  margin-top: 490px;
  margin-left: 120px;
}
#research-grid .shape:nth-of-type(3){
  margin-left: 50px;
  margin-top: 160px;
}
#research-grid .shape:nth-of-type(4){
  /* margin-top: 830px; */
  /* margin-left: -1290px; */
  margin-top: 330px;
  margin-left: 166px;
}
#research-grid .shape:nth-of-type(5){
  margin-top: -180px;
  margin-left: 185px;
}
#research-grid .shape:nth-of-type(6){
  /* margin-top: 450px; */
  margin-left: 180px;
}
#research-grid .shape:nth-of-type(7){
  margin-left: 130px;
  margin-top: 310px;
}
#research-grid .shape:nth-of-type(8){
  margin-left: 180px;
  margin-top: -130px;
}
#research-grid .shape:nth-of-type(9){
  margin-top: 170px;
  margin-left: 240px;
}
#research-grid .shape:nth-of-type(10){
  margin-top: 160px;
  margin-left: 210px;
}
#research-grid .shape:nth-of-type(11){
  margin-top: 490px;
  margin-left: 120px;
}
#research-grid .shape:nth-of-type(12){
  margin-left: 50px;
  margin-top: 160px;
}
#research-grid .shape:nth-of-type(13){
  /* margin-top: 830px; */
  /* margin-left: -1290px; */
  margin-top: 330px;
  margin-left: 166px;
}
#research-grid-wrapper{
   overflow: hidden;
   width: 1600px;
   margin: 0 auto;
   padding-bottom: 200px;
   display: block;
   -webkit-backface-visibility: hidden; /* Chrome, Safari, Opera */
   -webkit-transform-origin-y: 0px;
   transform-origin-y: 0px;

}

#research-grid{
    z-index: 30;
}


#research-grid.hidden{
    z-index:0;
}

#research-grid.hidden .shape{
    visibility:hidden;
}

.shape{
  width: 368px;
  height: 290px;
  transform: scale(2);
  -webkit-transform: scale(2);
  position: relative;
  float: left;
}

.shape img.portrait{
  width: 100%;
}

.shape img.landscape {
    height: 100%;
}
/* Reset
-------------------------------------------------- */
*, *:before, *:after {
  margin: 0;
  padding: 0;
  border: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.about-col {
  font-size: 0.8em;  
  list-style: none;
}

.about-col h2 {
    border-bottom: 0;
    font-family: Monaco, Monospace;
    font-size: 0.85em;
    line-height: 0em;
    padding-left: 29px;
    display: inline-block;
    padding-top: 10px;
}

.about-col strong {
  font-family:'CelliniTF-Bold';
  font-weight: normal !important;
}

.about-col p {
     font-family:'PreissigText-BoldItalic';
}

.about-col li {
    list-style: none;
    padding: 0px 0px 10px 0px;
}

span.bluu.underline {
    display: inline;
}

div#research-grid {
    position: fixed;
    top: 0px;
    left: 0px;
    height: 100%;
    text-align: center;
    width: 100%;
    -webkit-transform-origin-y: 0px;
    -moz-transform-origin-y: 0px;
    transform-origin-y: 0px;
    /* transform: translate3d(0px,0px,0px) scale(0.8); */
}

.page-header {/*    padding-right: 2em;
*/font-size: 2.5em;line-height: 1.5em;}

.spacer {
    height: 0.5em;
    clear: both;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, main, nav, section, summary {
  display: block;
}


/* Pix
-------------------------------------------------- */
img {
  display: block;
  max-width: 100%;
}


/* Links
-------------------------------------------------- */
a {
  color: #000;
  text-decoration: none;
}
a:hover {
  color: black;
}


/* Clearfix
-------------------------------------------------- */
.cf:after {
  content: "";
  display: table;
  clear: both;
}


/* Site
-------------------------------------------------- */
html {
  height: 101%;
  font-family:'CelliniTF-Regular';
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}

body {
  font-size: 19px;
  line-height: 1.5em;
  /* margin: 0 auto; */
  overflow-x: hidden;
  visibility: hidden;
  max-width: 1680px;
  margin: 1em auto 0 auto;
}

body.home {
    max-width: none;
    clear: both;
    float: none;
    width: 100%;
}

.page-margins.project{
    margin-right: 0rem !important;
}

.wrapper{
  margin: 0 1em;
}


/* Header
-------------------------------------------------- */
header {
    font-size: 1em;
    /* line-height: 1.25em; */
}

sup.sup-title  {
    display: inline;
    font-size: 0.55em;
    line-height: 1.5em; 
    position: relative;
    top: -4px;
}

.content p sup {
    font-size: 0.75em;
    line-height: 0.7em;
}

article header {
    font-size: 1em;
}

/* Headings
-------------------------------------------------- */
h1 {
  font-size: 1em;
  line-height: 1.2em;
  font-weight: 400;
  display: inline;
}
h2 {
  font-size: 1.5em;
  line-height: 1.4em;
  font-weight: 300;
  color: black;
  display: inline;
}
h3 {
  font-size: 1.4em;
  line-height: 1.5em;
  font-weight: 400;
}
h4 {
  font-size: 1.125em;
  font-weight: 600;
  line-height: 1.5em;
  color: black;
}
h1 a, h2 a, h3 a, h4 a {
  color: inherit;
  border: 0 !important;
}



/* Main
-------------------------------------------------- */
.margins{
  margin:0.3em;
}

.about-col .margins {margin: 0.3em 5em 0.3em 0.3em;}

.main {
  position: relative;
}
.main hr {
  margin: 3em 0;
  height: 2px;
  background: #ddd;
}
.main p,
.main figure,
.main ul,
.main ol {font-size: 1.2em;line-height: 1.3em;}

ul.projects {
    font-size: 2.5em;
    line-height: 1.5em;
    z-index: 0;
    position: relative;
}

ul.front.projects {
    z-index: 12;
    color: transparent;
    position: absolute;
}

ul.front.projects a:hover {
    background: transparent;
    /* color: white; */
}

ul.front.projects a {
    color: transparent;
}

a {}

a.home{
  position: relative;
  z-index:999;

}

a.refresh {
    position: relative;
    z-index: 99999;
    display: inline-block;
    margin-right: 15px;
    margin-left: 15px;
    top: 4px;
}

.projects li {
    display: inline;
    list-style: none;
}

.projects li a {
     padding: 11px 0; 
}
 a:hover, .hover a{
  /* border-color: #222; */
  background: #E6E6E6;
  color: black;
}

 a:hover .underline, .hover a .underline{
  box-shadow: inset 0 -8px 0 #E6E6E6, inset 0 -10px 0px black;
}



/* Text blocks */
.text ul,
.text ol {
  margin-left: 1em;
}

article{
  overflow: hidden;
}

.bold{
  font-family:'CelliniTF-Bold';
}

.content p{
  /* padding-right: 320px; */
  /* font-family: Times; */
  margin-bottom: 0.5em;
  font-family:'CelliniTF-Regular';
  letter-spacing: 1px;
}

.content p strong {
  font-family:'CelliniTF-Bold';
  font-weight: normal !important;
}

.content .about-col p strong{
  font-family:'CelliniTF-Bold';
  font-weight: normal !important;
  text-transform: uppercase;
}

.about-col p {
    font-family: 'BluuNext-Bold';
    font-size: 1.2em;
    line-height: 1.1em;
    margin-bottom: 0.75em;
}

.small p{
  font-size:0.85em;

}

.captions{
  overflow: hidden;
  position: relative;
  font-size: 0.75em;
  line-height: 1.4em;
  padding-right: 2em;
  padding-left: 1em;
}

.caption-count{
  font-family: Monaco, monospace;
  font-size: 0.7rem;
  position: relative;
  left: 4px;
  /* width: 21%; */
  /* width: 10%; */
}

.caption-count span{
/*  border-bottom: 2px solid;*/
  display: inline;

}


.project-gallery .caption-container{
  font-family:'CelliniTF-Bold';
  font-size: 0.85em;
  line-height: 1.4em;
  position: relative;
}

.project-gallery.align-right .img-wrapper{
  /* float:right !important; */
}

.project-gallery.align-right .caption-container, .project-gallery.align-center .caption-container{
  left:-30px;
}

.project-gallery.align-left .caption-container, .project-gallery.align-center .caption-container{
  right:10px;
}

.project-gallery .img-wrapper{
    /* width: 90%; */
    padding-left: 29px;
    /* float: right; */
}

.project-gallery .caption-count {
    margin-left: 0%;
    margin-top: -19px;
}

.project-gallery .text {
    max-width: 970px;
    position: relative;
    left: 5px;
}

.texts-index{
  list-style: none;
}

.texts-index li{
  margin:1em auto;
}

.languages .hidden {
    display: none;
}

.credits{
    font-size: 0.7em;
    position: fixed;
    right: -69px;
    bottom: 109px;
    transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
}