@color:#6F874D;
@bg_color:#227A86;
@bg_image:'testimg.bohemiakraft.com/2f7fb840-4800-4fc8-9fa4-0cbf692650b8.jpg';
@title_color:#FFFFFF;
@title_opacity:1;
@header_color:#FFFFFF;
@header_bg_color:#BD160E;
@header_opacity:0.1;
@footer_color:#FFFFFF; 
@footer_bg_color:transparent;
@footer_opacity:0.4;
@menu_color:#FEFFDF;
@menu_bg_color:#47383D;
@menu_opacity:0.3;
@menu_active_color:#FFFFFF;
@menu_active_bg_color:#47383D;
@menu_active_opacity:0.6;
@article_bg_color:#47383D;
@article_color:#FEFFDF;
@article_title_color:#FEFFDF;
@article_opacity:0.7;
@article_box_color:#FFFFFF;
@article_box_bg_color:#47383D;
@article_box_opacity:0.5;
@pager_bg_color:#CBCEBB;
@pager_opacity:0.4;

@font-face {
    font-family: 'title_font';
    src: url('../fonts/Economica-Regular.ttf'); 
}

@font-face {
    font-family: 'subtitle_font';
    src: url('../fonts/Economica-Regular.ttf');
}

@font-face {
    font-family: 'normal_font';
    src: url('../fonts/Ubuntu-Regular.ttf'); 
}

//reset
img {
  max-width: 100%; // Make images inherently responsive
  vertical-align: middle;
  border: 0;
  -ms-interpolation-mode: bicubic;
}

//mixins
.border-radius(@radius: 5px) {
  -webkit-border-radius: @radius;
     -moz-border-radius: @radius;
          border-radius: @radius;
}

.bg_opaque(@c, @alpha) when (iscolor(@c)) {
    background: hsla(hue(@c), saturation(@c), lightness(@c), @alpha);
}

.bg_opaque(@c, @alpha) when not (iscolor(@c)) {
}

.opaque(@c, @alpha) when (iscolor(@c)) {
    color: hsla(hue(@c), saturation(@c), lightness(@c), @alpha);
}

.opaque(@c, @alpha) when not (iscolor(@c)) {
}

.box-shadow(@shadow, @color, @darken: 5%, @alpha: 1) when (iscolor(@color)) {
  -webkit-box-shadow: @shadow darken(hsla(hue(@color), saturation(@color), lightness(@color), @alpha), @darken);
     -moz-box-shadow: @shadow darken(hsla(hue(@color), saturation(@color), lightness(@color), @alpha), @darken);
          box-shadow: @shadow darken(hsla(hue(@color), saturation(@color), lightness(@color), @alpha), @darken);
}

.box-shadow(@shadow, @color, @darken, @alpha) when not (iscolor(@color)) {
}

.no-box-shadow {
  -webkit-box-shadow: none;
     -moz-box-shadow: none;
          box-shadow: none;
}

.text-shadow(@shadow, @color, @darken: 5%, @alpha: 1) when (iscolor(@color)) {
    text-shadow: @shadow darken(hsla(hue(@color), saturation(@color), lightness(@color), @alpha), @darken);
}

.text-shadow(@shadow, @color, @darken, @alpha) when not (iscolor(@color)) {
}

.rotate(@degrees) {
  -webkit-transform: rotate(@degrees);
     -moz-transform: rotate(@degrees);
      -ms-transform: rotate(@degrees);
       -o-transform: rotate(@degrees);
          transform: rotate(@degrees);
}

.background-size(@size){
  -webkit-background-size: @size;
     -moz-background-size: @size;
       -o-background-size: @size;
          background-size: @size;
}

// DEFAULT - PC: 981-1200px
.debugLabel {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 9000;
    display: none;
}

#debugPC { display: block}
html {
    background-color: @bg_color;
    background-image: url('http://@{bg_image}');
    background-attachment: fixed;
    background-repeat: no-repeat;
    .background-size(cover);
    padding: 0;
    margin: 0;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://@{bg_image}', sizingMethod='scale');
    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://@{bg_image}', sizingMethod='scale')";
}

body {
    background-color: transparent;
    padding: 0;
    margin: 0;
    font-family: normal_font, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 18px;
}

h2, h3, h4, h5, {
    font-family: subtitle_font, "Helvetica Neue", Helvetica, Arial, sans-serif;
}

#menu, .submenu, #header, #footer, .title {
    font-family: menu_font, "Helvetica Neue", Helvetica, Arial, sans-serif;
}

#pager {
    margin: 20px auto 10px auto;
    padding: 10px 0 0 0;
    .border-radius(18px);
    width: 90%;
    .bg_opaque(@pager_bg_color, @pager_opacity);
}
#header .wrapper, #footer {
    padding: 7px 15px 7px 15px;
    margin: 0;
    display: block;
    text-decoration: none;
}
#header {
    margin: 0 auto;
    width: 90%;
    .wrapper {
        padding: 7px 20px 9px 20px;
        color: @header_color;
        .bg_opaque(@header_bg_color, @header_opacity);
        .box-shadow(0px 1px 4px, @header_bg_color, 30%, @header_opacity / 2);
        .border-radius(0 0 12px 12px);
    }
}
#footer {
    margin-top: 5px;
    color: @footer_color;
    .bg_opaque(@footer_bg_color, @footer_opacity);
    text-align: right;
}

#title {
    float: left;
    width: 400px;
    font-family: title_font, "Helvetica Neue", Helvetica, Arial, sans-serif;
    .text-shadow(0px 1px 3px, @title_color, 1%, 0.3);
    .opaque(@title_color, @title_opacity);
    text-align: right;
    margin-top: 100px;
    img {
        float: left;
        height: 80px;
        padding: 2px 8px 2px 8px;
    }
    h1 {
        font-size: 92px;
        line-height: 65px;
        padding: 0px 8px 2px 2px;
        margin: 0px 8px 2px 2px;
    }
    h2 {
        font-size: 18px;
        padding: 2px 8px 2px 2px;
        margin: 2px 8px 2px 2px;
    }
}

#menu {
    ul {
        text-align: right;
        margin: 0 10px 4px 0;
        padding: 0px 0 5px 0;
        li {
            line-height: 35px;
            vertical-align: top;
            display: inline;
            list-style-type: none;
            margin: 0 0 0 2px;
            a {
                padding: 7px 12px 7px 12px;
                margin: 0 0 0 0;
                color: @menu_color;
                .bg_opaque(@menu_bg_color, @menu_opacity);
                .box-shadow(0px 1px 4px, @menu_bg_color, 30%, @menu_opacity / 2);
                text-decoration: none;
                .border-radius(12px);
            }
        }
        li.active {
            a {
                .bg_opaque(@menu_active_bg_color, @menu_active_opacity);
                color: @menu_active_color;
                .box-shadow(0px 1px 4px, @menu_active_bg_color, 30%, @menu_active_opacity / 2);
            }
        }
    }
}

.submenu {
    padding-left: 400px;
    ul {
        margin: 0;
        text-align: right;
        padding: 4px 0 5px 0;
        li {
            line-height: 35px;
            vertical-align: top;
            display: inline;
            list-style-type: none;
            margin: 0 0 0 2px;
            a {
                padding: 10px 6px 10px 6px;
                margin: 0 0 5px 0;
                color: @menu_color;
                .bg_opaque(@menu_bg_color, @menu_opacity);
                text-decoration: none;
       //         .box-shadow(1px 1px 3px darken(@menu_bg_color, 10));
                .border-radius(2px);
            }
        }
        li.active {
            a {
                .bg_opaque(@menu_active_bg_color, @menu_active_opacity);
                color: @menu_active_color;
      //        .box-shadow(1px 1px 3px darken(@menu_active_bg_color, 20));
            }
        }
    }
}

#content {
    margin-left: 400px;
    margin-right: 10px;
    padding: 5px 10px 15px 10px; 
    color: @article_color;
    .bg_opaque(@article_bg_color, @article_opacity);
    .box-shadow(0px 1px 4px, @article_bg_color, 30%, @article_opacity / 2);
    .border-radius(12px);

    p, li {
        margin: 2px 0;
        padding: 2px 0;
    }

    h2, h3, h4, h5 {
        color: @article_title_color;
    }
}

.elements {
    .u-title {
        h1 {
            margin: 10px 0 10px 0;
            padding: 5px 0 5px 0;
            font-size: 44px;
        }
        h2 {
            margin: 1px 0 1px 0;
            padding: 2px 0 2px 0;
            font-size: 33px;
        }
        h3 {
            margin: 1px 0 1px 0;
            padding: 2px 0 2px 0;
            font-size: 22px;
        }
        h4 {
            margin: 1px 0 1px 0;
            padding: 2px 0 2px 0;
            font-size: 18px;
        }
    }
    .u-index {
        ul {
            li {
                a {
//                  color: @menu_color;
                }
            }
        }
    }
    .u-person {
        padding: 5px;
        .photo {
            float: left;
            width: 50%;
            text-align: right;
            img {
                margin: 5px
            }
        }
    }
    .items {
        float: left;
        width: 50%;
        font-size: 80%;
        table {
            // margin-top: 11px;
            th {
                text-align: left;
                vertical-align: top;
            }
            td {
                text-align: left;
            }
        }
    }
    .u-contact {
        color: @article_box_color;
        .bg_opaque(@article_box_bg_color, @article_box_opacity);
        padding: 5px;
        .items {
            float: left;
            width: 50%;
            table {
                th {
                    text-align: right;
                    vertical-align: top;
                }
                td {
                    text-align: left;
                }
            }
        }
        .map {
            float: left;
            width: 50%;
            iframe {
                width: 100%;
                height: 100%;
            }
            text-align: center;
        }
    }
    .u-2photos, .u-3photos, .u-4photos, .u-2texts, .u-3texts, .u-4texts {
        padding: 20px 0 20px 0;
        text-align: center;
        .column {
            float: left;
            width: 50%;
            .frame {
                width: 80%;
                img {
                }
                .title {
                }
            }
        }
    }
    .u-4photos, .u-4texts {
        .column {
            width: 25%;
        }
    }
    .u-3photos, .u-3texts {
        .column {
            width: 33.33%;
        }
    }
    .u-photo {
        padding: 20px 0 20px 0;
        .frame {
            width: 50%;
            img {
            }
            .title {
            }
        }
    }
    .u-photo, .u-2photos, .u-3photos, .u-4photos, .u-2texts, .u-3texts, .u-4texts {
        padding: 20px 0 20px 0;
        .frame {
            position: relative;
            margin: 0 auto;

            display: block;
            padding: 4px;
            border: 1px solid @article_box_bg_color;
            .border-radius(2px);
            .box-shadow(0px 1px 1px, @article_box_bg_color, 20%, @article_box_opacity / 6);
            
            img {
                width: 100%;
            }
            .title {
                color: white;
                text-align: center;
                line-height: 1;
                display: block;
                font-size: 90%;
                margin: 5px 5px 5px 5px;
                a {
                    color: @article_box_bg_color;
                }
            }
        }
    }
    .u-2texts, .u-3texts, .u-4texts {
        .frame {
            border-style: none;
            .no-box-shadow;
            text-align: left;
        }
    }
}

// TABLET LANSCAPE: 769-980px
@media ( max-width: 980px) {
    #debugPC { display: none}
    #debugTABLET { display: block}

    #pager {
        margin: 0;
        padding: 0 10px;
        .border-radius(0);
        width: inherit;
    }

    #title {
        float: inherit;
        margin: 0px;
        padding: 30px 0 0 0;
        h1, h2 {
            text-align: left;
        }
    }

    #content, #menu, .submenu {
        margin: 0 5px 0 5px;
    }

    #menu, .submenu {
        margin: 0;
        ul {
            text-align: center;
            padding-top: 40px;
            li {
                line-height: 47px;
                a {
                    padding: 10px 16px 10px 16px;
                    font-size: 120%;
                }
            }
        }
    }
}

// SMARTPHONE, TABLET PORTAIT: 480-768px
@media (max-width: 768px) {
    #debugSMARTPHONE { display: block}
    #debugPC { display: none}
    #debugTABLET { display: none}

    #pager {
        padding: 0px 6px 0px 6px;
        margin: 0px;
    }

    #title {
        margin: 0px;
        padding: 0px;
        width: inherit;
        h1 {
            font-size: 46px;
            margin: 0;
        }
        h2 {
            font-size: 26px;
            margin: 0;
        }
    }

    #menu, .submenu {
        ul {
            margin: 0;
            padding-top: 0px;
            li {
            }
        }
    }

    #content, #menu, .submenu {
        margin: 0px;
    }
    
    .elements {
        .u-2photos {
            .column {
                .frame {
                    width: 80%;
                    img {
                    }
                    .title {
                    }
                }
            }
        }
    }
}

// PHONE: 0-480px
@media (max-width: 480px) {
    #debugPC { display: none}
    #debugTABLET { display: none}
    #debugSMARTPHONE { display: none}
    #debugPHONE { display: block}

    #pager {
        padding: 0px;
        .bg_opaque(@pager_bg_color, @pager_opacity * 1.4);
    }
    
    #title {
        text-align: center;
        margin: 0 0 10px 0;
        h1 {
            font-size: 36px;
        }
        h2 {
            font-size: 16px;
        }
    }

    #menu, .submenu {
        ul {
            padding: 0;
            li {
                margin-bottom: 3px;
                display: block;
                text-align: center;
                a {
                    line-height: 35px;
                    display: block;
                    .bg_opaque(@menu_bg_color, @menu_opacity * 4);
                    font-size: 110%;
                    padding: 4px 18px 4px 18px;
                    .border-radius(6px);
                }
            }
            li.active {
                a {
                    .bg_opaque(@menu_active_bg_color, @menu_active_opacity * 4);
                }
            }
        }
    }

    #content {
        .bg_opaque(@article_bg_color, @article_opacity * 4);
    }
    #header {
//        .bg_opaque(@header_bg_color, @header_opacity * 4);
    }
    .elements {
        .u-title {
            h1 {
                font-size: 32px;
            }
            h2 {
                font-size: 26px;
            }
            h3 {
                font-size: 22px;
            }
            h4 {
                font-size: 18px;
            }
        }

        .u-2photos, .u-3photos, .u-4photos, .u-2texts, .u-3texts, .u-4texts {
            .column {
                float: left;
                width: 50%;
            }
        }
    }
}

// TV: 1200-...px
@media (min-width: 1200px) {
    #debugPC { display: none}
    #debugTV { display: block}

    #title {
        margin: 140px 0px 30px 0px;
        img {
            height: 100px;
        }
        h1 {
            font-size: 110px;
            line-height: 75px;
        }
        h2 {
            font-size: 37px;
        }
    }

    #menu, .submenu {
        ul {
            li {
                line-height: 47px;
                a {
                    padding: 10px 16px 10px 16px;
                    font-size: 120%;
                }
            }
        }
    }
    #content {
        p, li {
            margin: 5px 0;
            padding: 5px 0;
        }
    }
    .elements {
        .u-title {
            h1 {
                font-size: 56px;
            }
            h2 {
                font-size: 44px;
            }
            h3 {
                font-size: 28px;
            }
            h4 {
                font-size: 22px;
            }
        }
    }
}