/* SIDEBAR -------------------------------- */

.subContainer,
.subPusher,
.subContent {
    height: calc(100% + 50px)
}
.subContent,
.subContent-inner {
    position: relative;
    overflow: hidden
}
.subContainer {
    position: relative
}
.subPusher {
    position: relative;
    left: 0;
    height: 100%;
    -webkit-transition: -webkit-transform 0.5s;
    transition: transform 0.5s;
    z-index: 99
}
.subPusher::after {
    position: absolute;
    right: 0;
    top: 0;
    width: 0;
    height: 0;
    content: '';
    opacity: 0;
    background: rgba(0, 0, 0, 0.7);
    -webkit-transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s;
    transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s
}
.sidebarOpen .subPusher::after {
    width: 100%;
    height: 100%;
    opacity: 1;
    -webkit-transition: opacity 0.5s;
    transition: opacity 0.5s
}
.sidebar {
    visibility: hidden;
    position: absolute;
    left: 0;
    top: 0;
    width: 400px;
    height: 100%;
    color: #fff;
    background: #445944;
    -webkit-transition: all 0.5s;
    transition: all 0.5s;
    z-index: 100
}
.sidebarOpen .sidebar::after {
    width: 0;
    height: 0;
    opacity: 0
}
.effect1.sidebarOpen .subPusher {
    -webkit-transform: translate3d(400px, 0, 0);
    transform: translate3d(400px, 0, 0)
}
.effect1.sidebar {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0)
}
.effect1.sidebarOpen .effect1.sidebar {
    visibility: visible;
    -webkit-transition: -webkit-transform 0.5s;
    transition: transform 0.5s
}
.effect1.sidebar::after {
    display: none
}
.sideClose {
    position: absolute;
    right: 0;
    top: 0;
    width: 100px;
    height: 30px;
    font: 400 12px "Fira Sans";
    color: #1f2621;
    letter-spacing: 4px;
    background: #f9b233;
    cursor: pointer
}
.sideClose:hover {
    background: #f99533
}
#sideTitle {
    position: relative;
    float: left;
    margin: 100px 0 50px 0;
    padding: 0 20px 10px 20px;
    width: 100%;
    height: auto;
    font: 400 16px/1.8 "monBold";
    text-transform: uppercase;
    color: #edfac8;
    text-align: left;
    letter-spacing: 4px;
    box-sizing: border-box
}
#sideSearch {
    position: relative;
    float: left;
    width: 100%;
    height: 40px;
    box-sizing: border-box
}
.sideInput {
    position: relative;
    float: left;
    padding: 0 20px;
    width: calc(100% - 100px);
    height: 40px;
    font: 400 16px "Fira Sans";
    border: 0
}
.sideSubmit {
    position: relative;
    float: left;
    width: 100px;
    height: 40px;
    font: 400 12px "Fira Sans";
    color: #fff;
    letter-spacing: 4px;
    background: #7ea67e;
    cursor: pointer
}
.sideSubmit:hover {
    background: #91bf91
}
.sideMenu {
    position: relative;
    float: left;
    width: 100%
}
.sideMenu,
.subMenu {
    padding: 0;
    margin: 0;
    list-style: none
}
.sideMenu a {
    display: block;
    padding: 20px;
    color: #edfac8;
    text-decoration: none;
    background: #628062
}
.sideMenu a:hover {
    background: #4e664e
}
.sideMenu li:hover .subMenu {
    display: block;
    max-height: 300px
}
.subMenu a {
    background: #445944
}
.subMenu a:hover {
    background: #4e664e
}
.subMenu {
    overflow: hidden;
    max-height: 0;
    transition: all 0.7s ease-out
}
/* HEADER --------------------------------- */

header {
    position: relative;
    float: left;
    margin: 30px 0;
    padding: 0 50px;
    width: 100%;
    height: auto;
    box-sizing: border-box
}
#headerBlock1 {
    position: relative;
    float: left;
    width: 100%;
    height: auto
}
#headerLogo {
    position: relative;
    float: left;
    width: 156px;
    height: 140px
}
#headerLogo > img {
    width: 156px;
    height: 100%;
    object-fit: scale-down;
    object-position: 50% 50%;
}
#headerTitle {
    position: relative;
    float: left;
    margin: 0px 0 55px 50px;
    width: auto;
    font: 28px/1.1 "monBold";
    color: #fff;
    letter-spacing: 2px;
    text-transform: uppercase
}
#headerTitle > span {
    font: 14px "monLight";
    letter-spacing: 3px
}
#headerLanguage {
    position: relative;
    float: right;
    margin: 0;
    width: auto;
    height: auto
}
#headerLanguage > #globe {
    position: relative;
    float: right;
    margin-left: 20px;
    width: 20px;
    height: 20px;
    background: url(../img/globe.png)
}
#headerLanguage > #lang {
    position: relative;
    float: right;
    font: 600 12px/1.8 "Fira Sans";
    text-align: right;
    letter-spacing: 1px
}
#headerLanguage > #lang > a {
    font-weight: 400
}
#menuButton {
    display: none;
    position: absolute;
    top: 0;
    right: 0;
    width: 30px;
    height: 30px;
    background: url(../img/menu.png);
    cursor: pointer
}
#headerBlock2 {
    position: relative;
    float: left;
    margin-left: 50px;
    width: calc(100% - 210px);
    height: 40px;
    border-top: 2px solid #0b6632
}
#headerMenu {
    position: relative;
    float: left;
    list-style: none;
    z-index: 400
}
#headerMenu > li {
    position: relative;
    float: left;
    margin-right: 50px;
    padding: 13px 20px 13px 20px;
    font: 12px "monBold";
    letter-spacing: 2px;
    text-transform: uppercase;
    transition: all 0.2s ease-in-out;
    cursor: pointer
}
#headerMenu > li:hover {
    background: #0b6632
}
.aboutSub,
.servicesSub,
.gallerySub {
    display: none;
    position: absolute;
    left: 0;
    top: 38px;
    width: auto;
    list-style: none;
    transition: opacity 0.2s ease-in-out
}
.aboutSub > li,
.servicesSub > li,
.gallerySub > li {
    padding: 10px 20px;
    width: 250px;
    font: 12px "monlight";
    text-transform: uppercase;
    background: #2f4033;
    box-sizing: border-box;
    transition: all 0.2s ease-in-out
}
.aboutSub > li:hover,
.servicesSub > li:hover,
.gallerySub > li:hover {
    background: #11994a
}
.aboutTrigger,
.servicesTrigger,
.galleryTrigger {
    transition: all 0.2s ease-in-out
}
.aboutTrigger:hover .aboutSub {
    display: block
}
.servicesTrigger:hover .servicesSub {
    display: block
}
.galleryTrigger:hover .gallerySub {
    display: block
}
#headerSearch {
    position: absolute;
    height: 100%;
    width: calc(100% - 80px);
    background: transparent;
    z-index: 50
}
.headerInput {
    position: relative;
    float: left;
    padding: 0 20px;
    width: calc(100% - 60px);
    height: 39.50px;
    font: 400 18px "Fira Sans";
    border: 0
}
.headerSubmit {
    position: relative;
    float: left;
    width: 60px;
    height: 40px;
    background: #11994a url(../img/search.png) no-repeat center center;
    cursor: pointer
}
.headerSubmit:hover {
    background: #14b256 url(../img/search.png) no-repeat center center
}
#searchButton {
    position: relative;
    float: right;
    width: 80px;
    height: 100%;
    font: 400 12px "Fira Sans";
    color: #fff;
    letter-spacing: 2px;
    background: #0b6632;
    cursor: pointer;
    z-index: 30
}
#searchButton:hover {
    background: #447559
}
#headerComplete,
#sideComplete {
    position: absolute;
    top: 40px;
    width: 100%;
    height: 100%;
    z-index: 200
}
/* RESPONSIVE ----------------------------- */

@media screen and (max-width: 1365px) {
    #headerMenu > li {
        margin-right: 30px
    }
}
@media screen and (max-width: 1245px) {
    #headerTitle {
        margin: 0px 0 50px 50px;
        width: calc(100% - 300px)
    }
    #headerLanguage {
        display: none
    }
    #headerMenu > li {
        margin-right: 10px
    }
}
@media screen and (max-width: 1135px) {
    #headerBlock1 {
        height: 100%
    }
    #menuButton {
        display: block
    }
    #headerLogo {
        left: 50%;
        margin: 100px 0 0 -78px
    }
    #headerTitle {
        margin: 50px 0 0 0;
        width: 100%;
        font-size: 22px;
        text-align: center
    }
    #headerTitle > span {
        font-size: 12px
    }
    #headerLanguage {
        display: none
    }
    #headerBlock2 {
        display: none
    }
}
@media screen and (max-width: 450px) {
    .sidebar {
        width: 100%
    }
    .effect1.sidebarOpen .subPusher {
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0)
    }
}
@media screen and (max-width: 310px) {
    header {
        padding: 0 20px
    }
    #headerTitle {
        font: 24px "monBold"
    }
}