@import '/css/bootstrapgridutilities.min.css'; 

@font-face {
    font-family: 'helveticaneueltstd-md-webfont';
    src: url('/fonts/helveticaneueltstd-md-webfont.eot');
    src: url('/fonts/helveticaneueltstd-md-webfont.eot?#iefix') format('embedded-opentype'),
         url('/fonts/helveticaneueltstd-md-webfont.woff') format('woff'),
         url('/fonts/helveticaneueltstd-md-webfont.ttf') format('truetype'),
         url('/fonts/helveticaneueltstd-md-webfont.svg#helveticaneueltstd-md-webfont') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'helveticaneueltstd-roman-webfont';
    src: url('/fonts/helveticaneueltstd-roman-webfont.eot');
    src: url('/fonts/helveticaneueltstd-roman-webfont.eot?#iefix') format('embedded-opentype'),
         url('/fonts/helveticaneueltstd-roman-webfont.woff') format('woff'),
         url('fonts/helveticaneueltstd-roman-webfont.ttf') format('truetype'),
         url('fonts/helveticaneueltstd-roman-webfont.svg#helveticaneueltstd-roman-webfont') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'helveticaneueltstd-bd-webfont';
    src: url('/fonts/helveticaneueltstd-bd-webfont.eot');
    src: url('/fonts/helveticaneueltstd-bd-webfont.eot?#iefix') format('embedded-opentype'),
         url('/fonts/helveticaneueltstd-bd-webfont.woff') format('woff'),
         url('fonts/helveticaneueltstd-bd-webfont.ttf') format('truetype'),
         url('fonts/helveticaneueltstd-bd-webfont.svg#helveticaneueltstd-bd-webfont') format('svg');
    font-weight: normal;
    font-style: normal;

}

*, h1 {padding: 0; margin: 0; font-weight: normal;}

html {overflow-y: scroll;}
body,html,#page,#innerpage{height: 100%;}
body {font-size: 15px; line-height: 1.4em; color: #000; font-family: 'helveticaneueltstd-md-webfont', sans-serif;}
#content.workshops strong {color: red;}
.imgholder {
    position: fixed;
    overflow: hidden;
    height: 100vh;
    width: 100%;
    z-index: -1;
}
.imgholder img{
    position: absolute;
    top: 50%; 
    left: 50%;
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    min-width: 100%; 
    min-height: 100%; 
    width: auto; 
    height: auto;
    z-index: -1000; 
    overflow: hidden;
}
.studio_photos #images {
    position: fixed;
    left: 50%; 
    top: 50%;    
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    z-index: 10;
}

.studio_photos .imgholder {
    position: absolute;
    width: calc((85vw - 800px)/4); 
    height: calc((85vw - 800px)/4); 
    max-width: 90vh;
    max-height: 90vh;
    top: 0;
    right: 0;
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
    margin-right: calc(-7vw + 100px);
    display: none;
    background: white;
    z-index: 10;
}
.studio_photos .imgholder:first-child {
    position: relative;
    width: calc(85vw - 800px);
    height: calc(85vw - 800px); 
    border-radius: 100%;
    -webkit-transform: translateX(0%);
    transform: translateX(0%);
    display: block;
    margin-right: 0;
}
.studio_photos .imgholder:first-child img {
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}
.studio_photos .imgholder:nth-child(2) {display: block; max-width: 22.5vh; max-height: 22.5vh;}
.studio_photos .imgholder:nth-child(3) {display: block; top: 25%; max-width: 22.5vh; max-height: 22.5vh;}
.studio_photos .imgholder:nth-child(4) {display: block; top: 50%; max-width: 22.5vh; max-height: 22.5vh;}
.studio_photos .imgholder:nth-child(5) {display: block; top: auto; bottom: 0; max-width: 22.5vh; max-height: 22.5vh;}
.studio_photos .imgholder::before {content: ""; position: absolute; width: 100%; height: 100%; background: rgba(0,0,0,0.07);}
.studio_photos .imgholder:first-child::before {content: none;}
@media (min-height: 1000px) {
    .studio_photos .imgholder {max-width: 900px; max-height: 900px;}
    .studio_photos .imgholder:nth-child(2),
    .studio_photos .imgholder:nth-child(3),
    .studio_photos .imgholder:nth-child(4),
    .studio_photos .imgholder:nth-child(5) {max-width: 225px; max-height: 225px;}
}
@media (max-width: 2000px) {
    .studio_photos #images { 
        left: calc(7.5vw + 400px);
        -webkit-transform: translateX(0%) translateY(-50%);
        transform: translateX(0%) translateY(-50%);
    }
    .studio_photos .imgholder {
        width: calc((85vw - 600px)/4); 
        height: calc((85vw - 600px)/4);
    }
    .studio_photos .imgholder:first-child {
        width: calc(85vw - 600px); 
        height: calc(85vw - 600px);
    } 
}
@media (max-width: 1500px) {
    .studio_photos .imgholder {margin-right: 0;}
}
@media (max-width: 1100px) {
    .studio_photos #images {
        position: absolute;
    }
    .studio_photos .imgholder {
        top: auto!important;
        bottom: 0;
        right: auto;
        left: 0;
        margin-right:0;
        -webkit-transform: translateY(0%);
        transform: translateY(0%);
        width: calc((85vw - 400px)/4); 
        height: calc((85vw - 400px)/4);
    }
    .studio_photos .imgholder:nth-child(1) {
        margin-bottom: 25%;
        width: calc(85vw - 400px); 
        height: calc(85vw - 400px);
    }
    .studio_photos .imgholder:nth-child(3) {left: 25%;}
    .studio_photos .imgholder:nth-child(4) {left: 50%;}
    .studio_photos .imgholder:nth-child(5) {left: 75%;}
    .studio_photos #title {padding-bottom: calc(125% + 30px);}
    .studio_photos #outercontent,.studio_photos #images {
        top: 0; 
        left: 5%; 
        width: 90%;
        -webkit-transform: translate(0%);
        transform: translate(0%);
    }
    .studio_photos #images {top: 240px;}
    .studio_photos .imgholder {
        width: 25%!important; 
        height: auto!important;
    }
    .studio_photos .imgholder img {position: relative!important; -webkit-transform: none!important; transform: none!important; left: 0!important; width: 100%!important;}
    .studio_photos .imgholder:nth-child(1) {width: 100%!important;}
    .studio_photos .imgholder:nth-child(1) img {-webkit-transform: scale(0.75)!important; transform: scale(0.75)!important;}
}
#drawing, #drawing img {width: 100%; max-width: 250px; margin: 0px 0 50px;}

#overlay {z-index: 0; position: fixed; width: 100%; height: 100%;}
body.product #overlay, body.workshop #overlay {box-shadow: inset 0 500px 500px -7px rgba(255,255,255,0.3);}
body.products.diap #overlay, .workshop.diap #overlay {box-shadow: inset 0 500px 500px -7px rgba(0,0,0,0.3);}
body.studio_photos #overlay, body.home.diap #overlay, body.home #overlay {box-shadow: none;}
body.home {background: url('/img/45-degree-fabric-50.png'), url('/img/rept.png') left top / auto 1405px!important;}
body.studio_photos #section {border-top: 1px solid black; border-bottom: 1px solid black; display: block; max-width: 400px; margin-top: 20px;}
body.studio_photos #section {padding: 7px 0;}

h2 {font-size: 15px; text-transform: uppercase;}
a {outline: none; color: #000!important; 
    text-decoration-line: underline!important;
    text-decoration-color: rgba(0,0,0,0.75)!important;
    text-decoration-style: dotted!important;
}
#body.products a, #body.workshops a {text-decoration: none!important;}
#menu a {text-decoration: none!important;}
.diap a {color: white!important;}
.diap #content a {color: #000!important;}
.editable a {}

.products .row > div a {position: relative; display: block; overflow: hidden;}
.products .row > div:not(.studio_photos) a::before {
    content: "CUSTOM"; 
    background: white;
    color: black;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 9;
    padding: 2.75em 3em 0.25em;
    transform: rotate(45deg) translate(50%, 0%) ;
    transform-origin: right top;
}
.workshops .row > div > a,
.products .row > div > a {text-transform: uppercase;}
.workshops .row > div > a > span,
.products .row > div > a > span {line-height: 1.2em; padding-top: 10px; display: block; font-size: 15px; padding-bottom: 8px;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.row {margin-bottom: 1.4em;}
.row > div {padding-bottom: 1.4em;}
.row > div p {padding-right: calc(2vw + 10px);}

/* logo */
body > a > #logo, body > a > #logodiap, #logomenu {width: auto; display: block; position: absolute; top: 32px; left: 5%; height: 21px; cursor: pointer; z-index: 2;}
body > a > #logodiap {display: none;}
body.diap > a > #logodiap {display: block;}
body.diap > a > #logo {display: none;}

/* home */
/*.home #logodiap, .home #logo {position: relative; top: auto; left: auto; width: 90vh; height: 93%; margin: 0 auto; max-width: 89vw;}*/
.home {cursor: pointer;}

#closemenu, #menu {display: none;}
.normal #openmenu, .normal #section {color: black;}
#openmenu, #closemenu {font-family: 'helveticaneueltstd-roman-webfont', sans-serif; z-index: 30; color: white; position: absolute; right: 5%; top: 34px; text-align: center; 
font-size: 18px; text-transform: uppercase; cursor: pointer;}
#openmenu .icon, #closemenu .icon {width: 27px; height:27px; vertical-align: middle; position: relative; bottom: 1px;}
#closemenu {z-index: 4; color: black;}
#section {display: inline-block; color: black!important; cursor: pointer; position: relative; right: 0px; margin: 10px 0 35px; line-height: 0;}
#section a {display: inline-block; position: relative; padding: 0;}
#section .icon {width: 36px; height: 36px;}


.diap #section {color: white!important;}
#menu {font-weight: bold; position: fixed; z-index: 99; background: white; line-height: 1.2em; font-size: 8vh;}
#menu .icon {
width: 16vh;
height: 16vh;
position: absolute;
vertical-align: middle;
margin-left: -14vh;
transform: translateY(-19%);
}
#menu div {margin: 0 auto; width: 90%;}
#menu, table, td {text-align: left; top: 0; left: 0; width: 100%; height: 100%;}
#menu td > div > a {font-family: 'helveticaneueltstd-bd-webfont', sans-serif; color: black!important; text-decoration: none; position: relative; left: 8.3vh;}
@media (orientation: portrait) {
    #menu {line-height: 1.2em; font-size: 8vw;}
    #menu td > div > a {left: 8.3vw;}
    #menu .icon {
        width: 16vw;
        height: 16vw;
        margin-left: -14vw;
    }
}

#outercontent {position: absolute; z-index: 2; top: 90px; left: 5%; width: 90%;}
.diap #outercontent {color: white;}
body.product #outercontent {position: absolute; z-index: 2; top: 95px; left: 5%; width: 90%;}
#category {display: inline-block; text-transform: uppercase; font-size: 16px; margin-bottom: 5px;}
#id, #title {display: block; font-size: 36px; line-height: 1.2em; text-transform: uppercase; font-weight: normal;}
#content {color: black; font-size: 15px; line-height: 1.4em; padding: 10px 12px; margin: 30px 0 10px; max-width: 400px; width: 100%; background: white; overflow: auto;}
.studio_photos #content {background: none; padding: 0;}
#content.workshops > div {float: left; width: calc(50% - 10px);}
#content.workshops {max-width: 820px;}
#content > div:nth-child(2) {margin-left: 20px;}
@media (max-width: 930px) {
    #content.workshops {max-width: 400px;}
    #content.workshops > div {float: none; width: 100%;}
    #content > div:nth-child(2) {margin-left: 0px;}
}

.dont-break-out {
  /* These are technically the same, but use both */
  overflow-wrap: break-word;
  word-wrap: break-word;

  -ms-word-break: break-all;
  /* This is the dangerous one in WebKit, as it breaks things wherever */
  word-break: break-all;
  /* Instead use this non-standard one: */
  word-break: break-word;

  /* Adds a hyphen where the word breaks, if supported (No Blink) */
  -ms-hyphens: auto;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;
}

#prev,#next {position: fixed; width: 5%; top: 0; height: 100%; z-index: 1;}
#prev {left: 0; cursor: w-resize;}
#next {right: 0; cursor: e-resize;}


p {margin-bottom: 1.4em;}
p:last-child {margin-bottom: 0em;}
p strong, b, strong {font-family: 'helveticaneueltstd-bd-webfont', sans-serif; font-weight: normal;}
.editable li {list-style: none;}
.editable li::before {content: '- ';}


#retailmenu svg.icon {
width: 23px;
height: 23px;
position: absolute;
margin-top: -1px;
} 
body.workshops #content>div a svg.icon,
body.products #content>div a svg.icon {
width: 23px;
height: 23px;
position: relative;
bottom: 1px;
vertical-align: middle;
margin-left: -7px;
}

#retailmenu svg.icon {margin-left: -22px;}

.columns {padding-inline: 15px; display: grid; grid-template-columns: repeat(auto-fill, clamp(35rem, 25%, 25%)); grid-gap: 0;}
.columns > * {margin-bottom: 1.4em;}