/*
 * Main style for villa template.
 */

body, html {
    color: #575756;
    font-family: 'Roboto Slab', serif;
    width: 100%;
    position: relative;
    font-size: 1.2vw;
}

/* General styles */
h1 {
    padding-bottom: .5em;
    font-size: 2em;
}

h2 {
    padding: 2em 0;
    font-size: 2em;
    text-align: center;
}

img {
    width: 100%;
}

img.arrow {
    position: absolute;
    left: 50%;
    top: -0.9em;
    left: 47.5%;
    z-index: 50;
    width: 5%;
}

a {
    color: #A7A9AC;
    text-decoration: none;
}

a:hover {
    color: #575756;
}

p {
    margin-bottom: 1em;
    font-size: 1.1em;
    line-height: 1.4em;
}

b {
    font-weight: 400;
}

section, footer {
    position: relative;
}

section.bgimg {
    background: url("../Images/Layout/background.png") no-repeat top;
    background-size: contain;
    background-attachment: fixed;
}

section.bgcolor, section.bgnone, footer {
    border-top: 1em solid #FFFFFF;
}

section.bgcolor {
    background-color: #F6F6F6;
}

.left {
    float: left;
    left: 0;
}

.right {
    float: right;
    right: 0;
}

.bg {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.bgGr {
    background-color: #009A42;
}

.green {
    color: #00662C;
}

.grey {
    color: #58595B;
}

.white {
    color: #FFFFFF;
}

.button, input[type="submit"] {
    padding: 0.8em 1em;
    text-align: center;
    display: inline-block;
    text-transform: uppercase;
    font-size: .9em;
    border: 0;
    line-height: 1em;
    -webkit-appearance: none;
    color: #00662C;
    border: 2px solid #00662C;
    border-radius: 7px;
}

.button:hover {
    border: 2px solid #009942;
    background-color: #f2f2f2;
    color: #009942;
}

.button.grey, .button.grey:hover {
    border: 2px solid #58595B;
    color: #58595B;
}

.table {
    display: table;
    width: 80%;
    height: 100%;
    overflow: hidden;
    margin: auto;
}

.table-cell {
    display: table-cell;
    width: 100%;
    margin: auto;
    vertical-align: middle;
    text-align: left;
}

.mobile {
    display: none;
}

/* Header styles */
header {
    padding: 1em 3%;
    width: 94%;
    overflow: hidden;
}

header > a.logo {
    width: 22%;
}

header > a.fb {
    width: 2.7%;
    margin-top: 2.5em;
}

header .fb img {
    background-color: #DDDDDD;
}

header > div {
    overflow: hidden;
    z-index: 100;
    width: 100%;
}

header > div > div {
    margin: 0px auto;
}

header > a {
    margin: 1em 0em 1em 0em;
}

header li {
    display: inline-block;
    margin: 0em 0.5em 0em 0.5em;
    padding: 0.3em;
    text-transform: uppercase;
    line-height: 1.7em;
}

header li:first-child {
    margin-left: 0%;
}

header li:last-child {
    margin-right: 0%;
}

header #nav-main {
    float: left;
}

header #nav-lang {
    float: right;
}

header #nav-lang li {
    background-color: #DDDDDD;
    width: 1.5em;
    height: 1.5em;
    line-height: 1.5em;
    text-align: center;
    margin-top: .4em;
}

/* Head section */
#head {
    display: inline-block;
    width: 100%;
}

#head > div.left {
    width: 50%;
    height: 27em;
    background-color: rgba(255,255,255,.9);
}

#head > div.left h3 {
    margin: .5em 0em .5em 0em;
    font-size: 1.5em;
}

#head > div.left a.button, #head > div.left label.button {
    margin-bottom: 1em;
}

/* Cover style */
div.cover {
    position: absolute;
    top: 5.5em;
    left: 6em;
    right: 6em;
    bottom: 5.5em;
    border: 2px solid #009942;
    background-color: #f2f2f2;
    color: #009942;
    border-radius: 7px;
}

div.cover > div {
    display: table;
    height: 100%;
    overflow: hidden;
    width: 80%;
    margin: auto;
}

div.cover > div > div {
    display: table-cell;
    vertical-align: middle;
    text-align: left;
    width: 100%;
}

div.cover > div > div > * {
    margin: auto;
}

/* Categories preview */
#category {
    padding-bottom: 1.5em;
    width: 94%;
    margin: 0 3%;
    display: inline-block;
    text-align: center;
}

div#category > .categoryPreview {
    width: 25%;
    float: left;
    margin: 1em 2%;
    position: relative;
    padding: 1.5em 2%;
    height: 29em;
}

div#category > .categoryPreview:hover {
    background-color: #F6F6F6;
}

div#category > a.categoryPreview > div {
    padding: 35% 0;
    position: relative;
    margin-bottom: 1.5em;
}

div#category > a.categoryPreview div.cover {
    display: none;
}

div#category > a.categoryPreview:hover div.cover {
    display: block;
}

div#category > a.categoryPreview div.cover h3 {
    text-align: center;
    text-transform: uppercase;
    padding: .4em 0;
    font-size: 1em;
}

div#category > a.categoryPreview > h3 {
    margin: .5em 0em .5em 0em;
    font-size: 1.5em;
}

div#category > a.categoryPreview > p {
    line-height: 1.5em;
    font-weight: 300;
}

/* Section text */
.text div.table {
    width: 50%;
    padding: 4em 0;
}

.text div.table div.table-cell p {
    margin-bottom: inherit;
}

.text div.table div.table-cell h3 {
    font-size: 1.1em;
    line-height: 1.4em;
    margin-top: 1em;
    margin-bottom: .5em;
}

.text div.table div.table-cell ul {
    list-style: disc;
    line-height: 1.4em;
    font-size: 1.1em;
    padding-left: 2em;
    columns: 2;
      -webkit-columns: 2;
        -moz-columns: 2;
}

/* Fourth section (map) */
#map {
    width: 100%;
    height: 32em;
    position: relative;
}

#map h2 {
    position: absolute;
    width: 100%;
    z-index: 1;
    color: #FFFFFF;
}

#map #gmap {
    height: 100%;
    width: 100%;
    min-width: 320px;
}

/* Fith section (address) */
.address {
    width: 94%;
    padding: 2em 3%;
    overflow: hidden;
}

.address > div {
    display: block;
    width: 45%;
    vertical-align: top;
}

.address h3 {
    font-size: 1.5em;
    font-weight: 400;
    margin-bottom: 1em;
}

.address img {
    vertical-align: middle;
    margin-right: 1em;
    width: 4%;
}

.address p {
    margin-bottom: 1em;
    font-size: 1.1em;
}

/* Footer styles */
footer {
    background-color: #575756;
    color: #FFFFFF;
    text-align: center;
}

footer h2 {
    margin-bottom: 3%;
}

footer a {
    color: #FFFFFF;
    font-weight: 300;
}

footer form a {
    text-decoration: underline;
}

footer a:hover {
    color: #FFFFFF;
}

footer form, footer .weather {
    display: inline-block;
    vertical-align: top;
}

footer form {
    width: 80%;
    min-width: 300px;
}

footer .weather {
    width: 28%;
    background-color: black;
}

footer input[type="text"], footer textarea {
    width: 95%;
    height: 2em;
    margin-bottom: 2%;
    color: #DDDDDD;
    font-style: italic;
    font-family: 'Roboto Slab', serif;
    font-size: 1em;
}

footer textarea {
    height: 12em;
}

footer form div {
    width: 95%;
    display: inline-block;
}

footer label.small {
    display: block;
    float: left;
    font-size: 0.8em;
}

footer input[type="submit"] {
    display: block;
    float: right;
    border: 0;
    padding: 0;
    background: none;
    font-size: 1.5em;
    color: #FFFFFF;
    cursor: pointer;
}

#subjectSpecial {
   display: none !important;
}

footer #fLinks {
    border-top: 1px solid #FFFFFF;
    margin-top: 1.5em;
    line-height: 1.2em;
    overflow: hidden;
}

footer #fLinks h5 {
    font-size: 1.2em;
    font-weight: 400;
    margin: .5em 0 .5em 0;
}

footer #fLinks > div {
    margin-top: 1.5em;
    text-align: center;
    width: 94%;
    padding: 0 3%;
    display: inline-block;
}

footer #fLinks > div > div {
    float: left;
    text-align: left;
    vertical-align: top;
    width: 33.33%;
}

footer #fLinks > div > div ul li {
    margin-bottom: .5em;
    font-size: 1.1em;
}

footer #legal {
    margin: 2% 0 2% 0;
    padding-top: 2%;
    background-color: #FFFFFF;
    font-size: .8em;
    color: #575756;
}

/* Screen size adjustments */
@media screen and (max-width: 780px) {

    /* General style */
    body, html {
        font-size: 2.2vw;
    }

    .mobile {
        display: block!important;
    }

    .desktop {
        display: none!important;
    }

    .text div.table {
        width: 70%;
    }

    #head > div.left {
        height: 30em;
    }

    #map {
        height: 30em;
    }

    header > a.logo {
        width: 35%;
    }

    header > a.fb {
        width: 4.7%;
    }

    footer #fLinks > div > div {
        width: 50%;
    }
}

/* Screen size adjustments */
@media screen and (max-width: 500px) {

    /* General style */
    body, html {
        font-size: 4vw;
    }

    header > a.logo {
        width: 55%;
    }

    .table {
        width: 90%;
    }

    #head.landing {
        background-image: none!important;
    }

    #head > div.left {
        width: 100%;
    }

    #head > div.right {
        padding: 5em 80%;
        background-position: 8em;
        background-repeat: no-repeat;
        background-size: contain;
    }

    .text div.table div.table-cell ul {
        columns: inherit;
            -webkit-columns: inherit;
                -moz-columns: inherit;
    }

    .text div.table {
        width: 90%;
    }

    div#category {
        width: 90%;
        margin: 0 5%;
    }

    div#category > .categoryPreview {
        width: 92%;
    }

    .address {
        width: 90%;
        padding: 2em 5%;
    }

    .address > div {
        width: 100%;
        margin: 0 auto;
        float: inherit;
    }

    footer #fLinks > div {
        width: 100%;
        padding: 0 5%;
    }

    footer #fLinks > div > div {
        width: 100%;
    }
}