/*
Author: Kiboko Labs
Author URI: http://kibokolabs.com
Description: Default css for mebelinomea.com
Version: 0.0.1
*/

@import url("normalize.css");
@import url('https://fonts.googleapis.com/css?family=Open+Sans');


/*-------------------------------------------------------------
# Grid system
-------------------------------------------------------------*/
.container {
    margin-right: auto;
    margin-left: auto;
    /*padding-left: 0.938em;
    padding-right: 0.938em;
    width: calc(100% - 1.875em);*/
    padding: 0 0;
    width: 100%;
}

.container::after, header::after, .content::after, aside::after, section::after, footer::after {
    content: "";
    display: table;
    clear: both;
}

.row {
    margin-left: -0.938em;
    margin-right: -0.938em;
}

.row::after {
    content: "";
    display: table;
    clear: both;
}

.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8,.col-9, .col-10, .col-11, .col-12 {
    position: relative;
    min-height: 1px;
    padding-left: 0.938em;
    padding-right: 0.938em;
}

.no-space {
    padding: 0;
    overflow: hidden;
}

.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12 {
    width: 100%;
}

/*--------------------------------------------------------------
# Typography
--------------------------------------------------------------*/
body,
button,
input,
select,
textarea {
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    font-size: 16px !important;
    font-size: 1rem;
    line-height: 1.5;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    clear: both;
    font-weight: 700;
    margin: 0;
    text-rendering: optimizeLegibility;
}

p {
    margin-bottom: 1.75em;
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
}

dfn,
cite,
em,
i {
    font-style: italic;
}

blockquote {
    border-left-width: 4px;
    font-size: 19px;
    font-size: 1.1875rem;
    font-style: italic;
    line-height: 1.4736842105;
    margin: 0 0 1.4736842105em;
    padding: 0 0 0 1.263157895em;
}

blockquote,
q {
    quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
    content: "";
}

blockquote p {
    margin-bottom: 1.4736842105em;
}

blockquote cite,
blockquote small {
    display: block;
    font-size: 16px;
    font-size: 1rem;
    line-height: 1.75;
}

blockquote cite:before,
blockquote small:before {
    content: "\2014\00a0";
}

blockquote em,
blockquote i,
blockquote cite {
    font-style: normal;
}

blockquote strong,
blockquote b {
    font-weight: 400;
}

blockquote > :last-child {
    margin-bottom: 0;
}

address {
    font-style: italic;
    margin: 0 0 1.75em;
}

pre {
    background: #eee;
    font-family: "Courier 10 Pitch", Courier, monospace;
    font-size: 15px;
    font-size: 0.9375rem;
    line-height: 1.6;
    margin-bottom: 1.6em;
    max-width: 100%;
    overflow: auto;
    padding: 1.6em;
}

code,
kbd,
tt,
var {
    font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
    font-size: 15px;
    font-size: 0.9375rem;
}

abbr {
    border-bottom: 1px dotted #666;
    cursor: help;
}

mark,
ins {
    background: #fff9c0;
    text-decoration: none;
}

big {
    font-size: 125%;
}

section h1 {
    font-size: 0.875rem;
    font-weight: normal;
}

section h2 { font-size: 1.125rem; }
section h3 { font-size: 1rem; }
section h4 { font-size: 0.938rem; }
section h5 { font-size: 0.875rem; }



/*--------------------------------------------------------------
# Elements
--------------------------------------------------------------*/
html {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

*,
*:before,
*:after { /* Inherit box-sizing to make it easier to change the property for components that leverage other behavior; see http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
    -webkit-box-sizing: inherit;
    -moz-box-sizing: inherit;
    box-sizing: inherit;
}

header, footer {
    clear: both;
}

footer .container {
    padding: 1% 0;
}

.content {
    padding: 20px 0 20px 0;
}

aside, footer .info {
    width: 100%;
    float: none;
}

section, footer nav {
    width: 100%;
    float: none;
}

footer .info {
    text-align: center;
    padding: 10px 15px;
}

section h1 {
    padding: 0.625rem 0.625rem;
    margin: 2.08%;
}

.map, .contact {
    margin: 2.08%;
}

.logo {
    margin: 0 auto;
    text-align: center;
    width: 100%;
    clear: both;
}

.logo img {
    max-width: 100%;
    height: auto;
}

.lang {
    margin: 0 auto;
    width: 100%;
    float: none;
    display: block;
    font-size: 0.875em;
}

.lang ul, footer nav ul {
    list-style: none;
    margin: 0 auto;
    padding: 0 0;
    width: 100%;
    text-align: center;
}

.lang ul li, .lang ul li a {
    display: inline-block;
    text-decoration: none;
}

footer nav ul li, footer nav ul li a {
    display: inline-block;
    text-decoration: none;
    text-align: center;
}

.lang ul li a {
    padding: 35px 5px 5px 5px;
}

footer nav ul li a {
    padding: 10px 15px;
}

footer nav li:first-child a {
    padding-left: 0;
}

.contact p {
    padding: 0;
    margin-top: 0;
}

.contact input[type=text], .contact input[type=email], .contact textarea {
    width: 100%;
    background-color: #DFDFDF;
    padding: 0.625rem;
    border: none;
}

.contact textarea {
    height: 115px;
}


/* Main nav */
.toggle { display: none;  }
.leftnav nav {
    position: relative;
    display: block;
    margin: 2%;
    padding: 0 0;
}

.leftnav nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}
li.dropdown {
    display: inline-block;
}

.leftnav nav > ul > li {
    border-bottom: 1px solid;
    float: left;
    width: 100%;
    padding-left: 38px;
    background-repeat: no-repeat;
    background-position: 18px center;
}

.leftnav nav ul li a, .dropbtn {
    display: inline-block;
    text-align: left;
    text-decoration: none;
    font-size: 0.875em;
    width: 100%;
}

.leftnav nav > ul > li > a {
    padding: 12px 16px;
}

.subcat > ul > li > a {
    padding: 5px 10px;
}

.subnav {
    display: block;
    position: relative;
    padding: 10px 16px;
    width: 100%;
    min-width: 320px;
}

.subcat {
    padding: 10px;
}

.subnav .subcat {
    display: block;
}

.btn {
    padding: 0.625rem;
}

/* Gallery */
.gallery ul {
    margin: 0;
    padding: 0 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
}

.gallery ul li {
    width: 100%;
    margin: auto 0;
    padding: 2.08% 2.08%;
}

.gallery img {
    width: 100%;
    height: auto;
}


/*--------------------------------------------------------------
# Colors
--------------------------------------------------------------*/
body {
    background: #85A13A;
}

a {
    color: #85A13A;
}

a:hover {
    color: #697f2e;
    text-decoration: none;
}

header {
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#efefef+0,ffffff+50,ffffff+50&1+0,0+50 */
    background: -moz-linear-gradient(top, rgba(239,239,239,1) 0%, rgba(255,255,255,0) 50%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(239,239,239,1) 0%,rgba(255,255,255,0) 50%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, rgba(239,239,239,1) 0%,rgba(255,255,255,0) 50%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#efefef', endColorstr='#00ffffff',GradientType=0 ); /* IE6-9 */
}

footer .container {
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,efefef+100 */
    background: #ffffff; /* Old browsers */
    background: -moz-linear-gradient(top, #ffffff 0%, #efefef 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #ffffff 0%,#efefef 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #ffffff 0%,#efefef 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#efefef',GradientType=0 ); /* IE6-9 */
}

.container {
    background-color: #fff;
}

section h1 {
    background-color: #659026;
    color: #fff;
}

section {
    color: #7F7F7F;
}

.lang ul a, footer nav ul li a {
    color: #9d9d9d;
}

footer nav li a:hover {
    color: #85A13A;
}

.lang ul .active a  {
    background-color: #85A13A;
    color: #fff;
    font-weight: bold;
}

footer .info {
    color: #9d9d9d;
}

.leftnav nav, .subnav {
    background-color: #85A13A;
}

.leftnav nav > ul > li {
    border-bottom-color: rgba(255,255,255,0.4);
}

.leftnav nav ul li a, .dropbtn {
    color: #fff;
}

.leftnav nav > ul > li:hover,
.subcat li:hover,
.active {
    background-color: #659026;
}

/*.leftnav nav > ul > li > a:hover {
    background-image: url(../images/arrow.png);
    background-position: right center;
    background-repeat: no-repeat;
}*/

.cat > a:hover, .cat .active > a {
    background-image: url(../images/arrow_dn.png);
    background-position: right center;
    background-repeat: no-repeat;
}

.subnav .subcat {
    border-bottom: 1px solid rgba(255,255,255,0.4);
}

.subnav .subcat:last-of-type {
    border-bottom: none;
}

.home { background-image: url(../images/home.png); }
.sert { background-image: url(../images/sert.png); }
.cust { background-image: url(../images/cust.png); }
.addr { background-image: url(../images/addr.png); }
.cat {
    background-image: url(../images/cat.png);
    background-position: 18px 10px !important;
}

.contact {
    color: #7F7F7F;
}

.btn {
    background-color: #85A13A;
    color: #fff;
    border: none;
}

.cert img {
    border: 2px solid #85A13A;
}

/* Cards */
.card-columns {
    -webkit-column-count: 1;
    -moz-column-count: 1;
    column-count: 1;
    -webkit-column-gap: 1.25rem;
    -moz-column-gap: 1.25rem;
    column-gap: 1.25rem;
    orphans: 1;
    widows: 1;
    margin-right: 2.08%;
    margin-left: 2.08%;
}

.card {
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: #fff;
    background-clip: border-box;
}

.card-columns .card {
    margin-bottom: 1.25rem;
}

.card-columns .card {
    display: inline-block;
    width: 100%;
}

.card img {
    width: 100%;
    height: auto;
}

.card a img {
    margin: 0;
    padding: 0 0;
}

.card a {
    text-decoration: none;
}

.card-body {
    /*top: calc(100% - 4rem);*/
    /*position: absolute;
    right: 0;
    bottom: 0.25rem;
    left: 0;*/
    padding: 1.25rem;
    background-color: rgba(0, 0, 0, 0.75);
    color: #fff;
    display: flex;
    flex-wrap: wrap;
}

.card-title {
    width: 70%;
}

.card-price {
    width: 30%;
    text-align: right;
    font-weight: bold;
}

.card-text {
    width: 100%;
    border-top: 1px solid rgba(255, 255, 255, 0.25);
}

.card-footer {
    position: relative;
    background-color: rgba(0, 0, 0, 0.75);
    color: #fff;
    padding: 1rem 1.25rem 1.25rem 1.25rem;
    text-align: center;
    margin-top: 0;
}

.card-footer a {
    border: 1px solid #85A13A;
    padding: 0.5rem 1rem;
		word-wrap: break-word;
    display: block;
}

.card-footer a:hover {
    background-color: #fff;
    border-color: #fff;
    color: rgba(0, 0, 0, 0.75);
}

q {
    font-weight: bold;
}


/**
 * Media Queries
 */

/**
 * Does the same thing as <meta name="viewport" content="width=device-width">,
 * but in the future W3C standard way. -ms- prefix is required for IE10+ to
 * render responsive styling in Windows 8 "snapped" views; IE10+ does not honor
 * the meta tag. See https://core.trac.wordpress.org/ticket/25888.
 */
@-ms-viewport {
    width: device-width;
}

@viewport {
    width: device-width;
}


/**
 *  >= 710px
 */

@media screen and (min-width: 44.375em) {

    /* Cards */
    .card-columns {
        -webkit-column-count: 2;
        -moz-column-count: 2;
        column-count: 2;
        margin-left: 0%;
    }

}

/**
 *  >= 783px
 */

@media screen and (min-width: 48.9375em) {

}

/**
 *  >= 910px
 */

@media screen and (min-width: 56.875em) {

    aside, footer .info {
        width: 25%; /* 240px */
        float: left;
    }

    section, footer nav {
        width: 75%;
        float: right;
    }

    section, footer nav {
        padding: 0 0 0 1.04%;
    }

    section p {
        padding: 0 2.08% 0 0;
    }

    .lang {
        margin: 0 20px 0 calc(93.75% - 90px );
        width: 70px; /* 60px */
        float: right;
        display: table-cell;
        font-size: 0.875em;
    }

    .lang ul, footer nav ul {
        margin: 0;
        padding: 0 0;
        width: auto;
        text-align: left;
    }

    .lang ul li, .lang ul li a {
        display: inline-block;
    }

    footer nav ul li a {
        display: inline-block;
    }

    /* Main nav */
    .toggle { display: none; z-index: 100; }
    .leftnav nav {
        position: relative;
        display: inline-block;
        margin: 0 1.04% 0 0;
    }

    .leftnav nav ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
        overflow: hidden;
    }
    li.dropdown {
        display: inline-block;
    }

    .leftnav nav > ul > li {
        border-bottom: 1px solid rgba(255,255,255,0.4);
        float: left;
        width: 100%;
        padding-left: 38px;
        background-repeat: no-repeat;
        background-position: 18px center;
    }

    .leftnav nav ul li a, .dropbtn {
        display: inline-block;
        text-align: left;
        text-decoration: none;
        font-size: 0.875em;
        width: 100%;
    }

    .leftnav nav > ul > li > a {
        padding: 10px 16px;
    }

    .subcat > ul > li > a {
        padding: 5px 10px;
    }

    .subnav {
        position: absolute;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
        background-color: #85A13A;
        padding: 12px 16px;
        z-index: 150;
        top: 0px;
        left: 220px;
        min-width: 680px;
        display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
        display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
        display: -ms-flexbox;      /* TWEENER - IE 10 */
        display: -webkit-flex;     /* NEW - Chrome */
        display: flex;
    }

    .subcat {
        -webkit-box-flex: 1;      /* OLD - iOS 6-, Safari 3.1-6 */
        -moz-box-flex: 1;         /* OLD - Firefox 19- */
        width: 25%;               /* For old syntax, otherwise collapses. */
        -webkit-flex: 1;          /* Chrome */
        -ms-flex: 1;              /* IE 10 */
        flex: 1;                  /* NEW, Spec - Opera 12.1, Firefox 20+ */
    }

    .subnav .subcat {
        display: inline !important;
        float: left !important;
        border-right: 1px solid rgba(255,255,255,0.3);
        border-bottom: none;
    }

    .subnav .subcat:last-of-type {
        border-right: none;
    }

    .cat > a:hover, .cat .active > a {
        background-image: url(../images/arrow.png);
    }

    .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12 {
        float: left;
        display: table-cell;
    }

    .col-12 { width: 100%; }
    .col-11 { width: 91.66666667%; }
    .col-10 { width: 83.33333333%; }
    .col-9 {  width: 75%; }
    .col-8 {  width: 66.66666667%; }
    .col-7 {  width: 58.33333333%; }
    .col-6 {  width: 50%; }
    .col-5 {  width: 41.66666667%; }
    .col-4 {  width: 33.33333333%; }
    .col-3 {  width: 25%; }
    .col-2 {  width: 16.66666667%; }
    .col-1 {  width: 8.33333333%; }

    .offset-12 { margin-left: 100%; }
    .offset-11 { margin-left: 91.66666667%; }
    .offset-10 { margin-left: 83.33333333%; }
    .offset-9 {  margin-left: 75%; }
    .offset-8 {  margin-left: 66.66666667%; }
    .offset-7 {  margin-left: 58.33333333%; }
    .offset-6 {  margin-left: 50%; }
    .offset-5 {  margin-left: 41.66666667%; }
    .offset-4 {  margin-left: 33.33333333%; }
    .offset-3 {  margin-left: 25%; }
    .offset-2 {  margin-left: 16.66666667%; }
    .offset-1 {  margin-left: 8.33333333%; }
    .offset-0 {  margin-left: 0%; }

    section h1 {
        margin: 0 2.08% 2.08% 0;
    }

    .map, .contact {
        margin: 0 2.08% 2.08% 0;
    }

    .gallery ul {
        margin: 0;
        padding: 0 0;
        list-style: none;
        display: flex;
        flex-wrap: wrap;
    }

    .gallery ul li {
        width: 50%;
        margin: auto 0;
        padding: 0 2.08% 2.08% 0;
    }

    .gallery ul li span {
        display: inline-block;
        vertical-align: top;
        margin: 0 2.08%;
        width: 50%;
    }
    .gallery img {
        max-width: 100%;
        height: auto;
    }

    .cert img {
        max-width: 40%;
        height: auto;
    }

    .cert li a {
        width: 45%;
        margin: 0 auto;
    }

}


/**
 *  >= 985px
 */

@media screen and (min-width: 61.5625em) {
    .container {
        width: 60em; /* 960px; */
    }

    .subnav {
        left: 230px;
        min-width: 700px;
    }

}


/**
 *  >= 1200px
 */

@media screen and (min-width: 75em) {

    .container {
        width: 73.125em; /* 1170px; */
    }

    .subnav {
        left: 280px;
        min-width: 800px;
    }

}