@media (max-width: 600px) {
}

@beige: #f4ece0;

.clearfix {
    zoom:1;
    &:before, &:after{ content:""; display:table; }
    &:after{ clear: both; }
}

@import "grid.less";

@import "portrait.less";
@import "landscape.less";

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    vertical-align:baseline;
    background:transparent;
}

html {
    font-size:16px;
    background-color:@beige;
    height:100%;
    width:100%;
    position:relative;
}

body {
    position:relative;
    height:100%;
    width:100%;
}

input:invalid {
	background-color:rgba(255,0,0,.25);
}

input, select, textarea {
    padding:.2rem;
    border:0 none transparent;
}
.Actions {
    margin:1em 0 0 20%;
}
input.action {
    font-family:Cochin;
    font-size:1rem;
    padding:.2rem 1rem 0 1rem;
    border:0 none transparent;
	background-color:#D0B98A;
}

html.debug {
    background-image:url(../images/ruler.gif);
    background-repeat:repeat-x;
    background-position:left top;
    body:before {
        content:"16px";
        position:absolute;
        z-index:1001;
        display:block;
        font-size:2rem;
        left:20%;
        top:20%;
        color:red;
        background:yellow; 
    }
}

.box {
    z-index:1000;
    display:block;
    width:20%;
    height:0;
    position:absolute;
    background:@beige;
    padding: 12% 0 0 0;
    overflow:hidden;
    left:7%;
    top:2%;
    margin:0;
    > * {
        background-repeat:no-repeat;
        background-size:100%;
        background-position:center center;
        position:absolute;
        display: block;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
    }
}

.box.x-2 { left:29%; }
.box.x-3 { left:51%; }
.box.x-4 { left:73%; }

#logo {
    display:block;
    width:100%;
    height:100%;
    background-size:80%;
    background-position:75% center;
    background-image:url(../images/logo.png);
    a {
        display:block;
        width:100%;
        height:100%;
        text-indent:-999em;
    }
}

.box.x-2 {
    display:table-cell;
    vertical-align:middle;
}

.box.x-2 {
    display:table-cell;
    vertical-align:middle;
}

#the-shop-box {
    background:black;
    font-size:6rem;
    text-align:center;
    font-weight:100;
    a {
        text-decoration:none;
        color:@beige;
        span.small {
            display:block;
        }
        span.small.before {
            margin:.5rem  2.5rem -3rem 0;
            font-size:3rem;
            font-style:italic;
            text-align:right;
        }
        span.small.after {
            margin:-2rem 0 -2rem 0rem;
            font-size:1.2rem;
            font-weight:normal;
        }
    }
}

.middle {
    display:inline-block;
    vertical-align:middle;
}

#menu2,
#menu {
    display:inline-block;
    list-style:none;
    padding:.9rem 0 0 .9rem;
    height:auto;
    li {
        font-size:1.2rem;
        padding-left:5%;
        a {
            display:block;
            padding:0;
            margin:4.5% 0;
            line-height:.8rem;
            float:left;
            clear:left;
            text-decoration:none;
            color:black;
            white-space: nowrap;
            .small {
                font-size:.75rem;
            }
        }
        a.current, a.section {
            border-bottom:1px solid black;
        }
    }
}
#menu2,
#menu2 li {
    padding-left:0;
}

/***** PAGE Start *****/

#ruler {
    display: block;
    height: 2px;
    border: 0;
    border-bottom: 2px solid #ccc;
    width:90%;
    position:absolute;
    left:5%;
    padding-top:14%;
}

#content {
    display: block;
    position:absolute;
    padding-top:16%;
    width:90%;
    left:5%;
    .left, .right {
        float:left;
        min-height:10%;
    }
    .left {
        width:40%;
        margin-right:5%;
        [data-pos] {
            display:block;
            position:relative;
            img {
                margin:0;
            }
        }
        [data-pos]:after {
            content:attr(data-pos);
            position:absolute;
            background:black;
            color:@beige;
            right:.5rem;
            bottom:.5rem;
            padding:.1rem .25rem 0 .25rem;
            font-size:.5rem;
        }
        img {
            display:block;
            width:100%;
            margin:0;
        }
    }
    .right {
        font-size:1.25rem;
    }
}

body.Shop #content > .right.tiles {
    width: 100%;
}

/***** PAGE End *****/

/***** GALLERY Start *****/

#slides {
    position:absolute;
    left:0;
    top:0;
    .slides-navigation {
        a {
            display:block;
            font-size:5rem;
            color:@beige;
            text-decoration:none;
        }
        a.prev {
            padding-left:3rem;
            margin-left:1rem;
            background-image:url(../images/arrow_L.png);
            background-repeat: no-repeat;
            background-position: left 2.1rem;
            background-size:2rem;
        }
        a.next {
            padding-right:3rem;
            margin-right:1rem;
            background-image:url(../images/arrow_R.png);
            background-repeat: no-repeat;
            background-position: right 2.1rem;
            background-size:2rem;
        }
    }
}

#gallery-content {
    cursor:pointer;
    [data-image-pos] {
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
        filter: alpha(opacity=100);
        -moz-opacity: 1;
        -khtml-opacity: 1;
        opacity: 1;
    	transition:all 1s;
    }
    .kitchen-box {
        padding-top:1rem;
    }
    .link {
        font-style:italic;
        top:6.5rem;
        left:1rem;
    }
}

#gallery-content [data-image-pos].hidden {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    -moz-opacity: 0;
    -khtml-opacity: 0;
    opacity: 0;
}

#the-shop {
    position:absolute;
    display:block;
    width:20rem;
    height:5rem;
    bottom:2rem;
    left:50%;
    margin-left:-10rem;
    z-index:1000;
    text-decoration:none;
    color:@beige;
    font-size:5rem;
    text-align:center;

    padding-bottom:1rem;
    margin-bottom:0rem;
    background-image:url(../images/arrow_D.png);
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size:2rem;
    line-height:1.5rem;
    // text-shadow:.1rem .1rem .25rem rgba(0,0,0,.75);
    .small {
        font-size:1.25rem;
    }
}

/***** GALLERY End *****/

/***** STORY Start *****/

#slides {
    position:absolute;
    left:0;
    top:0;
    .slides-container {
        .container {
            width:50%;
            position:absolute;
            left:50%;
            top:0;
            height:100%;
            background:@beige;
            color:black;
            .content {
                font-size:3rem;
                position:absolute;
                bottom:0;
                padding: 0 3rem 1rem;
            }
        }
    }
    .slides-navigation a {
        font-size:5rem;
        color:@beige;
        text-decoration:none;
    }
}

.Story {
    #slides {
        .slides-navigation a {
            text-indent:-999em;
        }
    }
}

/***** STORY End *****/

/***** KITCHEN Start *****/

.kitchen-box {
    padding:1rem 0 0 1rem;
    h1 {
        line-height:6.7rem;
        vertical-align:top;
        letter-spacing:-.22rem;
        display:inline-block;
        font-size:7.5rem;
        font-weight:normal;
    }
    .no {
        font-size:2rem;
        line-height:2rem;
        display:inline-block;
        width:1.7rem;
        text-align:center;
    }
}
#ruler {
    display:none;
}
#content {
    .right {
        width:55%;
        hr.above, hr.below {
            border-color: #888;
            border-image: none;
            border-style: none none solid;
            border-width: 0 0 2px;
            display: block;
            height: 2px;
        }
        hr.above { margin:0 0 2rem 0; }
        hr.below { margin:2rem 0 0 0; }
        .image-captions {
            font-size:1rem;
            margin-top:2rem;
        }
        &.wide {
            width:100%;
        }
    }
}


/***** KITCHEN End *****/

/***** SHOP Start *****/

.Shop {
    .cell {
        img {
            width:100%;
        }
    }
    .cell.Abstrakt, .cell.Title {
        background:rgba(0,0,0,.1);
        padding:1%;
        -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
        -moz-box-sizing: border-box;    /* Firefox, other Gecko */
        box-sizing: border-box;         /* Opera/IE 8+ */
        a {
            text-decoration:none;
        }
    }
}

/***** SHOP End *****/

#blinds.hidden {
    display:none;
}
#blinds {
    position: fixed;
    top:0%;
    height:100%;
    left:0%;
    width:100%;
    background:rgba(255,255,255,.95);
    z-index:2000;
    #close {
        position:fixed;
        display:inline;
        width:.8rem;
        height:1.5rem;
        right:20%;
        bottom:97%;
        font-size:1.75rem;
        font-weight:bold;
        text-align:right;
        cursor:pointer;
        text-align:center;
    }
    #popup {
        position: absolute;
        top:5%;
        height:90%;
        left:20%;
        width:60%;
        z-index:2000;
        background-color:@beige;
        overflow:auto;
        box-shadow:.25rem .25rem .25rem rgba(0,0,0,.125);
        .logo {
            background-image:url(../images/logo.png);
            background-repeat:no-repeat;
            background-position:center center;
            background-size:contain;
            width:100%;
            height:6rem;
            margin:2rem 0;
        }
        .typography {
            margin:1rem 5rem 5rem;
            .title {
                text-transform:none;
                border-bottom:1px solid black;
            }
        }
        form {
            .field {
                clear:both;
                padding:.3rem 0;
                label {
                    float:left;
                    width:20%;
                    margin:0;
                }
                .middleColumn {
                    float:right;
                    width:70%;
                    margin:0;
                    input, textarea {
                        width:100%;
                        box-sizing:content-box;
                        border:0 none;
                        margin:0;
                        padding:.1rem;
                    }
                }
                &.nolabel .middleColumn {
                    width:100%;
                }
            }
            .Actions {
                margin:0;
                clear:both;
                input {
                    float:right;
                }
            }
        }
    }
}

.image-captions, .mfp-title {
    font-style: italic;
    a {
        color:black;
    }
}



.process-container {
    font-size:.7em;
    margin-bottom:1em;
    .process {
        display:inline-block;
    }
    .process::after {
        content:"▸";
    }
    .process.last::after {
        content:"";
    }
}

.field {
    .clearfix;
    label {
        display:inline-block;
        width:20%;
    }
    &.checkbox {
        padding-left:20%;
        label {
            width:auto;
        }
    }
    .middleColumn {
        display:inline-block;
        width:70%;
        input, select, textarea {
            -webkit-box-sizing:border-box;
            -moz-box-sizing:border-box;
            -ms-box-sizing:border-box;
            -o-box-sizing:border-box;
            box-sizing:border-box;
            width:100%;
        }
        input[type="radio"],
        input[type="checkbox"] {
            width:auto;
        }
        ul {
            margin:0;
            padding:0;
            li {
                list-style:none;
                display:inline-block;
                margin:0;
                padding:0;
            }
        }
    }
}

.align-right {
    text-align:right;
}
.box.x-3 a {
    color:black;
}



#content {
    padding-bottom:2em;
    .tiles {
        .shop-articles {
            .grid {
                .cell {
                    background-size:cover;
                    position:relative;
                    &:before {
                        content: "";
                        display: block;
                    }
                    > a {
                        text-decoration:none;
                        display:block;
                    	top: 0;
                    	left: 0;
                    	bottom: 0;
                    	right: 0;
                        position:absolute;
                        .cell-text {
                            -webkit-box-sizing:border-box;
                            -moz-box-sizing:border-box;
                            -ms-box-sizing:border-box;
                            -o-box-sizing:border-box;
                            box-sizing:border-box;
                            width:100%;
                            &.padding {
                                position:absolute;
                                bottom:0;
                                padding:.5em .5em 0 .5em;
                                margin-bottom:1em;
                            }
                            &.half-padding {
                                position:absolute;
                                bottom:0;
                                padding:0 .5em;
                            }
                            *:last-child {
                                padding-bottom:0;
                                margin-bottom:0;
                            }
                        }
                    }
                }
            }
        }
    }
}