/*
 * Variables
 */

@greyText: #eee;
@black: #000;
@white: #fff;
@red: #ff0000;
@leftSideForm: #272727;
@bottomSideForm: #161616;
@defaultFontSize: 16;
@em: @defaultFontSize * 1em;

.font-size(@pxValue) {
    @remValue: @pxValue / @defaultFontSize;
    font-size: ~"@{pxValue}px";
    font-size: ~"@{remValue}rem";
}

.px-rem(@property; @sizeValue) {
    @pxValue: @sizeValue;
    @remValue: (@sizeValue / @defaultFontSize);
    @{property}: ~"@{pxValue}px";
    @{property}: ~"@{remValue}rem";
}


/*
 * Basics
 */
html,
body {
    height: 100%;
    font-family: 'Oswald', sans-serif;
    font-weight: 300;
    line-height: 1.8;
    word-wrap: break-word;
    overflow: hidden;
    font-size: 100%;
}

body {
    background: #fff url('/images/bg.jpg') fixed center center;
    color: #fff;
    -webkit-font-smoothing: subpixel-antialiased;
    font-size: 1rem;
    text-align: center;
    text-shadow: 0 .05rem .1rem rgba(0, 0, 0, .5);
    background-size: cover;
}

.content-scrollbar {
    overflow-y: scroll;
    //width: 100%;
    height: 100%;
    height: 100vh;
    .px-rem(margin-right,-17);
    outline: none;
}

/* Links */
a,
a:focus,
a:hover {
    color: #fff;
}


/* Czech quotes */
h1 + blockquote, .cover-heading blockquote {
    quotes: '\201E' '\201C';

    &:before {
        content: open-quote;
        .px-rem(padding-right,1);
    }
    &:after {
        content: close-quote;
        .px-rem(padding-left,1);
    }
}

.site-wrapper-inner {
    vertical-align: top;
    position: relative;
    z-index: 4;
}


.cover-container {
    margin-right: auto;
    margin-left: auto;
    overflow: visible;
}

.cover {
    padding: 15px;
    position: relative;
    overflow: visible;

    .btn-lg {
        padding: .75rem 1.25rem;
    }

    @media (max-width: (991/@em)) {
        .px-rem(padding-right,15);
        .px-rem(padding-left,15);
    }

}


/*
 * Footer
 */

.footer {
    color: rgba(255, 255, 255, .5);
    font-weight: lighter;
    font-style: italic;
    color: #fff;
    .font-size(14);
    float: left;
    margin: 0;
    width: 100%;
    .px-rem(padding-bottom,35);

    &.fixed {
        position: fixed;
        left: 0;
        padding-bottom: 0;
        padding-top: 0;
        .px-rem(bottom,35);
    }

    p {
        margin-bottom: 0;
        text-align: center;
    }
}



@media (min-width: 40em) {
    .site-wrapper-inner {
        vertical-align: top;

        &.loaded .cover {
            .px-rem(padding-top,60);
        }
    }

    .masthead,
    .footer,
    .cover-container {
        width: 100%;
    }
}

@media (min-width: 48em) {
    .masthead-brand {
        float: left;
    }
    .nav-masthead {
        float: right;
    }
}

@media (min-width: 62em) {
    .bottom,
    .masthead,
    .cover-container {
        width: 50rem;
    }
    .extra-big {
        width: 120%;
        margin-left: -10%;
    }
}

@media (min-width: 72em) {
    .bottom,
    .masthead,
    .cover-container {
        width: 50rem;
    }
    .extra-big {
        width: 144%;
        margin-left: -22%;
    }

}

@media only screen and (max-height: (800/@em)) and (min-width: 72em) {
    .extra-big {
        width: 130%;
        margin-left: -15%;
    }
}

.header-wrapper {
    .px-rem(padding-bottom, 40);

    h1 {
        .font-size(60);
        padding-bottom: 0;
        text-decoration: underline;
    }
}

.blockquote {

    &.img {
        border: none;
        font-weight: lighter;
        color: @greyText;
        font-style: italic;
        line-height: 1.8;
        .px-rem(min-height, 92);
        padding-left: 10rem;
        text-align: left;
        background: url("/images/blockquote.png") no-repeat left 40%;
    }

    &.souteze {
        .px-rem(margin-top, 8);
    }

    &.img-small {
        border: none;
        color: #eee;
        font-weight: lighter;
        font-style: italic;

        .px-rem(min-height, 92);
        .px-rem(padding-left, 60);
        background-size: 40px !important;
        background-size: 2.5rem !important;
        .font-size(16);

        text-align: left;
        background: url('/images/blockquote.png') left 0.6875rem no-repeat;
        line-height: 1.3;

        &.one-line {
            .px-rem(line-height, 38);
        }

        p {
            .font-size(14);
            color: #a7a7a7;
            letter-spacing: 0.0625rem;
            padding-top: 0.1875rem;

            -webkit-transition: all 0.3s;
            -moz-transition: all 0.3s;
            -ms-transition: all 0.3s;
            -o-transition: all 0.3s;
            transition: all 0.3s;

            &:hover {
                color: #fff;
            }
        }

        &.gold > p:hover {
            color: #e6b528;
        }
    }

    @media(max-width: (991/@em)) {
        &.img {
            .px-rem(background-position-x,20);
        }
    }
}

.btn{

    &.btn-grey {
        background-color: @greyText;
        border: none;
        border-radius: 0;
        position: relative;
        .font-size(24);
        padding: 8px 28px;
        padding: 0.5rem 1.75rem;
        .px-rem(margin-bottom,10);
        .px-rem(margin-left,30);
        .px-rem(margin-right,30);
        text-transform: uppercase;
        color: #000;

        -webkit-transition: all 0.2s ease;
        -moz-transition: all 0.2s ease;
        -o-transition: all 0.2s ease;
        transition: all 0.2s ease;
        -webkit-animation: none;
        -o-animation: none;
        animation: none;

        &:before,
        &::after {
            .px-rem(width,30);
            content: '';
            position: absolute;
            top: 0;
        }
        &::before {
            .px-rem(left,-29);
            border-left: 16px solid transparent;
            border-left: 1rem solid transparent;
            border-top: 46px solid @greyText;
            border-top: 2.875rem solid @greyText;
        }
        &::after {
            .px-rem(right,-29);
            border-right: 16px solid transparent;
            border-right: 1rem solid transparent;
            border-bottom: 46px solid @greyText;
            border-bottom: 2.875rem solid @greyText;
        }
        &:hover {
            -webkit-transform: scale(1.15);
            -moz-transform: scale(1.15);
            -ms-transform: scale(1.15);
            -o-transform: scale(1.15);
            transform: scale(1.15);
            background-color: @greyText;
            border-color: @greyText;
        }
        &.full {
            width: 100%;
            .px-rem(max-width,215);
        }
    }
}

.max {
    -webkit-transform: scale(1.15);
    -moz-transform: scale(1.15);
    -ms-transform: scale(1.15);
    -o-transform: scale(1.15);
    transform: scale(1.15);
    background-color: @greyText;
    border-color: @greyText;
}

.txt-grey {
    color: @greyText;
}

@media (max-width: (767/@em)) {
    .blockquote.img {
        padding-left: 0;
        padding-right: 0;
        background: none !important;
    }
    .blockquote.img-small p {
        .px-rem(margin-top, 0);
    }
    .site-wrapper {
        padding-top: 0;
    }
    #zaliby-content {
        padding: 0 !important;
    }
}

@keyframes RotateY {
    0%,10% {
        -webkit-transform: rotateY(0deg);
        -moz-transform: rotateY(0deg);
        -ms-transform: rotateY(0deg);
        -o-transform: rotateY(0deg);
        transform: rotateY(0deg);
    }
    90%,100% {
        -webkit-transform: rotateY(360deg);
        -moz-transform: rotateY(360deg);
        -ms-transform: rotateY(360deg);
        -o-transform: rotateY(360deg);
        transform: rotateY(360deg);
    }
}
@-webkit-keyframes RotateY {
    0%,10% {
        -webkit-transform: rotateY(0deg);
        -moz-transform: rotateY(0deg);
        -ms-transform: rotateY(0deg);
        -o-transform: rotateY(0deg);
        transform: rotateY(0deg);
    }
    90%,100% {
        -webkit-transform: rotateY(360deg);
        -moz-transform: rotateY(360deg);
        -ms-transform: rotateY(360deg);
        -o-transform: rotateY(360deg);
        transform: rotateY(360deg);
    }
}
@-moz-keyframes RotateY {
    0%,10% {
        -webkit-transform: rotateY(0deg);
        -moz-transform: rotateY(0deg);
        -ms-transform: rotateY(0deg);
        -o-transform: rotateY(0deg);
        transform: rotateY(0deg);
    }
    90%,100% {
        -webkit-transform: rotateY(360deg);
        -moz-transform: rotateY(360deg);
        -ms-transform: rotateY(360deg);
        -o-transform: rotateY(360deg);
        transform: rotateY(360deg);
    }
}
.relative {
    position: relative;
}
.pohar.rotateY {
    animation: none;
}
.rotateY:hover, .rotateY.hovered {
    animation: RotateY 800ms ease;
    -moz-animation: RotateY 800ms ease;
    -o-animation: RotateY 800ms ease;
    -webkit-animation: RotateY 800ms ease;
}

// Shine effect
.shine-effect {
    position: absolute;
    overflow: hidden;
    width: 100%;
    top: 0;
    left: 0;
    height: 100%;
    display: inline-block;
    color: #fff;
    text-decoration: none;
    text-align: center;
    z-index: 999;
}

.shine-effect:after {
    content: "";
    transition-property: left,top,opacity;
    transition-duration: .7s,.7s,.15s;
    transition-timing-function: ease;
    position: absolute;
    top: -110%;
    left: -210%;
    width: 200%;
    height: 200%;
    opacity: 0;
    transform: rotate(30deg);
    background: rgba(255, 255, 255, 0.13);
    background: linear-gradient(to right,
    rgba(255, 255, 255, 0.13) 0%,
    rgba(255, 255, 255, 0.13) 77%,
    rgba(255, 255, 255, 0.5) 92%,
    rgba(255, 255, 255, 0.0) 100%);
}


.shine-effect.active:after,
.shine-effect:hover:after {
    opacity: 1;
    top: -30%;
    left: -30%;
}

// Interactive codes
#code-left,
#code-right {
    white-space: pre;
    unicode-bidi: embed;
    color: #a3a39e;
    width: 35%;
    .px-rem(top,10);
    position: fixed;
    text-align: left;
    opacity: 0.6;
    line-height: 1.7;
    .font-size(20);
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    overflow: hidden;

    span {
        display: block;

        &.line {
            .px-rem(margin-right,15);
        }
    }
    span.red {
        color: #a42130 !important;
    }
    span.comment {
        color: #6f6f6f !important;
    }

    @media(max-width: (1199/@em)) {
        opacity: .25;
        .font-size(16);
        color: #7d7d79;
    }
    @media(max-width: (991/@em)) {
        width: 100%;
        opacity: 0.18 !important;
    }
}

#code-left {
    .px-rem(left,10);
}
#code-right {
    .px-rem(right,10);
    text-align: right;

    span.red {
        padding-right: 0;
    }
    span.comment {
        padding-right: 0;
    }
}

#code-right {
    .px-rem(right,10);
}

.loaded h1.heading-b {
    .font-size(76);
    .px-rem(padding-top,10);
    text-decoration: underline;

    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;

    @media (max-width: (530/@em)) {
        .font-size(66);
        .px-rem(line-height,90);
    }
}
.loaded .cover-container {
    padding-top: 0;
}
#cover {
    position: relative;
    z-index: 2;
    float: left;
    width: 100%;
    .px-rem(padding-right, 32);

    .content {
        float: left;
        width: 100%;
        overflow: visible;
    }
}

#site-wrapper
{
    .cover-heading {
        text-decoration: none;
        height: auto;
        top: 30%;

        h1, .heading-big {
            text-decoration: none;
            padding-bottom: 0;
            font-size: 6rem;
            position: relative;
            display: inline;
            margin: 0;
            font-weight: 500;
            line-height: 1.1;

            &:after {
                display: block;
                position: absolute;
                .px-rem(left,3);
                .px-rem(bottom,13);
                width: 0;
                .px-rem(height,10);
                background-color: #fff;
                content: "";
                -webkit-animation-delay: 3500ms;
                -moz-animation-delay: 3500ms;
                -o-animation-delay: 3500ms;
                animation-delay: 2500ms;
                animation: widthFull 5s forwards;
                -webkit-animation: widthFull 5s forwards;
                -webkit-animation-fill-mode: forwards;
                animation-fill-mode: forwards;
            }
        }

        @media(max-width: (767/@em)) {
            top: 50%;
            left: 25%;
            max-width: 50%;

            .px-rem(margin-top, -190);
            .px-rem(line-height, 135);

            h1:after {
                .px-rem(left,-16);
                .px-rem(bottom,10);
                content: none;
            }
        }
    }

    .cover-heading-small {
        height: auto;
        .px-rem(margin-top, 142);

        @media(max-width: (767/@em)) {
            display: none;
        }
    }
}
@keyframes widthFull {
    to {
        width: 100%;
    }
}

@-webkit-keyframes widthFull {
    to {
        width: 100%;
    }
}

@-moz-keyframes widthFull {
    to {
        width: 100%;
    }
}

.noise-btn, .noise-hover {
    transform: translateZ(0);
    outline: 90px solid transparent !important;
    -webkit-font-smoothing: antialiased;
    -webkit-transition: background-color 0.1s ease-out;
    -moz-transition: background-color 0.1s ease-out;
    transition: background-color 0.1s ease-out;
}
.text-me {
    padding-top: 10px;
    text-align: justify;
    line-height: 1.8;
    color: #dadada;
    .font-size(19);
}
.img-desc {
    color: #dadada;
    .px-rem(padding-top,5);
    display: block;
    text-align: center;
}
.zal-small {
    color: #dadada;
    display: block;
    .font-size(18);
}

.cover-container-inner {
    height: 100%;
    overflow: hidden;
    width: 100%;
}

#reference {
    position: relative;

    img, a, div {
        -webkit-user-drag: none;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }
}
.reference-desc {
    z-index: 9;
    padding: 20px 15px;
    background-color: rgba(45, 45, 45, 0.46);

    h3 {
        text-transform: uppercase;
        text-align: center;
    }
}
.me-wrap, .reference-wrap {
    position: relative;

    padding: 10px 0;
    padding: 0.625rem 0;

    img {
        padding: 0 16px;
        padding: 0 1rem;
        max-width: 100%;
        -webkit-animation: animLoadedContent
            1s cubic-bezier(.7,0,.3,1) both;
        animation: animLoadedContent
            1s cubic-bezier(.7,0,.3,1) both;
        z-index: 2;
        position: relative;

        @media (max-width: (767/@em)) {
            padding: 0;
        }
    }

    &:before {
        background: url('/images/ram.png') no-repeat center top;
        background-size: contain;
        transition: transform .2s ease;
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
    }

    &:hover {
        img {
            transform: scale(1.03);
        }
        &:before {
            -moz-transform: scaleX(-1);
            -o-transform: scaleX(-1);
            -webkit-transform: scaleX(-1);
            transform: scaleX(-1);
            filter: "FlipH";
            -ms-filter: "FlipH";
        }
    }

    @media (min-width: (420/@em)) and (max-width: (991/@em)) {
        &:before {
            content: none;
        }
    }
}
.me-wrap {
    padding: 16px 10px;
}
.reference-wrap {

    -moz-animation: animLoadedContent 1s
        cubic-bezier(.7,0,.3,1) both;
    -webkit-animation: animLoadedContent 1s
        cubic-bezier(.7,0,.3,1) both;
    animation: animLoadedContent 1s
        cubic-bezier(.7,0,.3,1) both;

    overflow: hidden;
    .px-rem(margin-top,20);
    padding: 50px 15px;
    padding: 3.125rem 0.9375rem;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;

    &:before {
        background: none;
        content: "";
        position: absolute;
        .px-rem(top,2);
        .px-rem(left,-15);
        width: 0;
        z-index: 1;
        border-left: 4000px solid #fcfcfc;
        border-left: 250rem solid #fcfcfc;
        border-top: 300px solid transparent;
        border-top: 18.75rem solid transparent;
        border-bottom: 300px solid transparent;
        border-bottom: 18.75rem solid transparent;
        -webkit-transform: none;
        -moz-transform: none;
        -ms-transform: none;
        -o-transform: none;
        transform: none;
    }
    img {
        padding: 0;
        transform: scale(1) !important;
    }

    &:hover {
        &:before {
            -webkit-transform: none;
            -moz-transform: none;
            -ms-transform: none;
            -o-transform: none;
            transform: none;
        }
    }
    .shine-effect {
        .px-rem(max-width,1028);
        .px-rem(max-height,642);
        .px-rem(margin-top,50);
        .px-rem(margin-left,48);
    }
}
@media (min-width: (992/@em)) {
    .reference-wrap img {
        padding: 0 32px;
        padding: 0 2rem;
    }
    .reference-desc {
        position: absolute;
        width: calc(~"100% - 5.875rem");
        bottom: 19px;
        padding: 20px 15px;
        .px-rem(margin,032);
        z-index: 9;
        background-color: rgba(34, 34, 36, 0.85);
        display: block;

        h3 {
            text-align: left;
        }
    }
}

.btn-grey {
    position: relative;
    border: none !important;
    text-decoration: none !important;

    span.txt {
        position: relative;
        z-index: 2;
    }

    .pohar, .www, .kontakt {
        position: absolute;
        content: "";
        background: url('/images/pohar.png') no-repeat;
        .px-rem(top,-31);
        .px-rem(left,-10);
        .px-rem(width,55);
        .px-rem(height,55);
        z-index: 1;
        background-size: contain;
    }
    .www {
        background: url('/images/www.png') no-repeat;
        background-size: contain;
    }
    .kontakt {
        background: url('/images/phone.png') no-repeat;
        background-size: contain;
        z-index: 0;
    }
    .pohar:nth-child(1) {
        .px-rem(left,66);
        .px-rem(height,65);
        .px-rem(width,65);
        .px-rem(top,-37);
    }
    .pohar:nth-child(2) {
        .px-rem(left,150);
        .px-rem(height,75);
        .px-rem(width,75);
        .px-rem(top,-43);
    }
    .pohar:nth-child(1) {
        .px-rem(left,66);
        .px-rem(height,65);
        .px-rem(width,65);
        .px-rem(top,-37);
    }
    .pohar:nth-child(2) {
        .px-rem(left,150);
        .px-rem(height,75);
        .px-rem(width,75);
        .px-rem(top,-43);
    }

    .www:nth-child(1), .kontakt:nth-child(1) {
        .px-rem(left,66);
        .px-rem(height,65);
        .px-rem(width,65);
        .px-rem(top,-37);
    }
    .www:nth-child(2), .kontakt:nth-child(2) {
        .px-rem(left,150);
        .px-rem(height,75);
        .px-rem(width,75);
        .px-rem(top,-43);
    }
    .kontakt:nth-child(1) {
        .px-rem(top,-40);
    }
    .kontakt:nth-child(2) {
        .px-rem(top,-43);
    }
}

.full-width {
    display: block;
    max-width: 80% !important;
    margin: 0 auto !important;
}

.btn-prev, .btn-next {
    display: block;
    position: absolute;
    .px-rem(left,-70);
    .font-size(30);
    z-index: 9999;
    color: white;
    opacity: 0.7;
    -webkit-transition: opacity 0.3s ease;
    -moz-transition: opacity 0.3s ease;
    -ms-transition: opacity 0.3s ease;
    -o-transition: opacity 0.3s ease;
    transition: opacity 0.3s ease;

    &:hover {
        opacity: 1;
    }

    img {
        .px-rem(max-width,50);
        width: auto;
        height: auto;
    }

    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
}
.btn-next {
    .px-rem(right,-70);
    left: inherit;
}

.hidden {
    display: none;
}

@media (max-width: (1360/@em)) {
    #code-left, #code-right {
        .font-size(17);
        opacity: .3;
        color: #7d7d79;
    }
    .reference-wrap:before {
        content: none;
    }
    .btn-prev {
        .px-rem(left,-8);
    }
    .btn-next {
        .px-rem(right,-8);
    }
}


@media(max-width: (991/@em)) {
    .shine-effect {
        display: none;
    }
    .btn-prev {
        .px-rem(left,45);
    }
    .btn-next {
        .px-rem(right,45);
    }
    .reference-desc {
        padding: 20px 90px;
    }
    #code-left {
        left: 0;
    }
    #code-right {
        right: 0;
    }
}

@media (max-width: (650/@em)) {
    #code-left, #code-right {
        opacity: .1 !important;
    }
    .reference-wrap {
        padding: 10px 0;
        padding: 0.625rem 0;
    }
    .btn-next, .btn-prev {
        -webkit-transform: none;
        -moz-transform: none;
        -ms-transform: none;
        -o-transform: none;
        transform: none;
        .px-rem(top,12);

        img {
            .px-rem(max-width,14);
        }
    }
    .reference-desc {
        padding: 20px 10px;
        padding: 1.25rem 0.625rem;
    }
    #site-wrapper .cover-heading {
        max-width: 100% !important;
        left: 0 !important;
    }
}

@media (max-width: (480/@em)) {
    .site-wrapper-inner.loaded, .site-wrapper {
        display: block;
    }
    .reference-desc h3 {
        .font-size(23);
    }
    .btn-next, .btn-prev {
        .px-rem(top, 10);
    }
    .btn-prev {
        .px-rem(left, 35);
    }
    .btn-next {
        .px-rem(right, 35);
    }
}

.slider-info {
    display: block;
    float: left;
    position: absolute;
    .px-rem(bottom,20);
    .px-rem(left,61);
    color: #0e0e10;
    font-style: initial;
    -moz-animation: animLoadedContent 1s
        cubic-bezier(.7,0,.3,1) both;
    -webkit-animation: animLoadedContent 1s
        cubic-bezier(.7,0,.3,1) both;
    animation: animLoadedContent 1s
        cubic-bezier(.7,0,.3,1) both;


    @media (max-width: (1360/@em)) {
        color: #fff;
        float: right;
        right: 0;
        text-align: right;
        .px-rem(padding-right, 60);
    }
    @media (max-width: (991/@em)) {
        .px-rem(padding-right, 30);
    }
}

#form_wrap.hide:after, #form_wrap.hide:before {
    display:none;
}


#kontakt-form {
    background: @bottomSideForm;
    .px-rem(min-height, 350);
    .px-rem(width, 700);
    position: relative;
    margin: 0 auto;
    -webkit-transition: all 0.4s ease;
    outline: 0 !important;

    * {
        outline: 0 !important;
    }

    &:after {
        content: '';
        display: block;
        position: absolute;
        background: url(/images/znamka.png) center center no-repeat;
        width: 100%;
        .px-rem(height, 120);
        visibility: hidden;
        opacity: 0;
        z-index: -1;
        bottom: 0;
        margin: 0;
        left: 50%;
        top: 50%;
        -webkit-transform: translate(-50%,-50%);
        -moz-transform: translate(-50%,-50%);
        -ms-transform: translate(-50%,-50%);
        -o-transform: translate(-50%,-50%);
        transform: translate(-50%,-50%);
    }

    .bot {
        bottom: 0;
        position: absolute;
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 0 350px 176px 350px;
        border-width: 0 21.88rem 11rem 21.88rem;
        border-color: transparent transparent @bottomSideForm transparent;

    }
    .top {
        top: 175px;
        position: absolute;
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 0 350px 175px 350px;
        border-width: 0 21.88rem 10.94rem 21.88rem;
        border-color: transparent transparent @bottomSideForm transparent;
        z-index: -1;
        -webkit-transition: all 0.5s ease;
    }
    .left {
        bottom: 0;
        position: absolute;
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 175px 0 175px 350px;
        border-width: 10.94rem 0 10.94rem 21.88rem;
        border-color: transparent transparent transparent @leftSideForm;

    }
    .right {
        bottom: 0;
        position: absolute;
        width: 0;
        height: 0;
        right: 0;
        border-style: solid;
        border-width: 175px 350px 175px 0;
        border-width: 10.94rem 21.88rem 10.94rem 0;
        border-color: transparent @leftSideForm transparent transparent;

    }

    .inside {
        color: #7c7873;
        position: relative;
        margin: 0 auto;
        .px-rem(top, 175);
        width: 80%;
        height: 0;
        -webkit-transition: all 0.4s ease;
        overflow: auto;
        background: #f7f2ec url('/images/kontakt_bg.png');
        .px-rem(max-height, 500);
        .px-rem(max-width, 350);
        .px-rem(padding, 20);
        border: 1px solid #fff;
        border-radius: 3px;
        -moz-border-radius: 3px;
        -webkit-border-radius: 3px;
        box-shadow: 0 0 3px #9d9d9d, inset 0 0 27px #fff;
        -moz-box-shadow: 0 0 3px #9d9d9d, inset 0 0 14px #fff;
        -webkit-box-shadow: 0 0 3px #9d9d9d, inset 0 0 27px #fff;

        input[type=text], input[type=email], textarea {
            color: #7c7873;
            width: 100%;
            max-width: 100%;
            min-width: 100%;
            .px-rem(height, 42);
            padding: 0 10px;
            padding: 0 0.625rem;
            margin: 0 0 10px 0;
            margin: 0 0 0.625rem 0;
            -webkit-transition: border 0.3s ease;
            -moz-transition: border 0.3s ease;
            -ms-transition: border 0.3s ease;
            -o-transition: border 0.3s ease;
            transition: border 0.3s ease;

            background: #fffcf7;
            border: 1px solid #b9b5ae;

            -webkit-border-radius: 4px;
            -moz-border-radius: 4px;
            border-radius: 4px;

            &:focus, &:active {
                -webkit-box-shadow: 0 0 4px #969696;
                -moz-box-shadow: 0 0 4px #969696;
                box-shadow: 0 0 4px #969696;
            }
        }

        button {
            .font-size(20);
            color: @bottomSideForm;
            background: transparent !important;

            &:before, &:after {
                content: none;
            }
        }
        textarea {
            .px-rem(height, 60);
            max-height: 60px !important;
            max-height: 3.75rem !important;
            .px-rem(padding-top, 5);
        }

        textarea:focus, input[type="text"]:focus, input[type="email"]:focus {
            background: rgba(255, 255, 255, .35);
        }


        input[type="submit"] {
            position: relative;
            font-family: 'YanoneKaffeesatzRegular', sans-serif;
            .font-size(24);
            color: #7c7873;
            text-shadow: 0 1px 0 #fff;
            width: 100%;
            text-align: center;
            opacity: 1;
            background: none;
            cursor: pointer;
            -moz-border-radius: 3px;
            -webkit-border-radius: 3px;
            border-radius: 3px;
        }

        input:hover[type=submit] {
            color: #435c70;
        }

        &.highlighted {
            input, button {
                z-index: 9;
                position: relative;

            }
        }
    }

    @media (min-width: (768/@em)) {

        &.hovered {

            .px-rem(margin-top, 165);

            .inside {
                .px-rem(height, 410);
                .px-rem(top, -165);
                overflow: hidden;
            }
            .top {
                .px-rem(top, -175);
            }
        }


        &.closed {

            * {
                -webkit-box-shadow: none !important;
                -moz-box-shadow: none !important;
                box-shadow: none !important;
            }
            cursor: progress;
            margin: 0 auto;

            .inside {
                cursor: progress;
                height: 0;
                .px-rem(top, 175);

                input, button {
                    z-index: -1;
                    position: static;
                }
            }
            .top {
                cursor: progress;
                .px-rem(top, 175);
            }

            &:after {
                z-index: 12;
                visibility: visible;
                opacity: 1;
            }
        }

        &.done {
            cursor: auto !important;
            .inside, .top {
                cursor: auto !important;
            }
        }


    }

    @media (max-width: (767/@em))
    {
        width: auto !important;
        height: auto !important;
        background-color: transparent;

        .top, .bot, .left, .right {
            display: none;
        }
        .inside {
            max-width: 100%;
            width: 100%;
            height: auto !important;
            position: static;
        }
    }
}
Tomáš Dvořák

Programátor srdcem i duší
Programátor, designér a velký milovník koček. Možná tak by se dal krátce popsat autor tohoto webu. Jeho život se momentálně točí kolem školy, programování a ~~fitka~~. Věří ve svobodu internetu a v lepší zítřky. Na internetových fórech se vyskytuje pod přezdívkou Tomas2D. Je dvojnásobným vítězem celostátního kola v “Návrhu a tvorbě webových stránek” určená pro studenty středních škol. Aktuálně studuje na ČVUT FIT.
Web byl naposledy aktualizován někdy v roce 2017.
Řekni mi víc
(Informací je mnoho)