body, html {width:100%; height:100%; font-family: arial, sans-serif;}
strong {color:#D7B56D;}

.container {display:flex; flex-direction:row; flex-wrap:nowrap; width:100%; min-height:100%; box-sizing:border-box;}

.sidepanel  {width: 0; position: fixed; z-index: 8; height: 100%; top: 0; right: -2px; background-color: #003f3f; overflow-x: hidden; transition: 0.5s; padding-top: 60px; display:none; border-left:2px solid #D7B56D ;}
.sidepanel > a {padding: 8px 8px 8px 32px; text-decoration: none; font-family: 'Exo 2', sans-serif; font-size: 25px; color: #fff; display: block; transition: 0.5s;}
.sidepanel > a:hover {color: #D7B56D;}
.sidepanel .closebtn {position: absolute; top: 0; right: 25px; font-size: 42px;}
.sidepanel .sidepanel-logo {position:absolute; bottom:160px; left:0; display:block; width:100%; text-align:center;}
.sidepanel .sidepanel-logo img {width:200px;}
.sidepanel .sidepanel-tel {position:absolute; bottom:80px; left:0; display:block; width:100%; text-align:center;}
.sidepanel .sidepanel-tel a{display:inline-block; padding:10px 20px;}
.sidepanel .sidepanel-tel a img {width:40px;}


.openbtn {font-size: 2em; cursor: pointer; background-color: rgba(0,0,0,0.8); color: #D7B56D; padding: 10px 15px; border: none; display:none; position:fixed; z-index:7; top:0; right:0; transition:0.5s}
.openbtn:hover {background-color: rgba(215,181,109,0.8); color:#000;}

#navbar {position:fixed; display:flex; justify-content:center; box-sizing: border-box; padding:15px 100px; width:100%; height:80px; background:#000; top:-80px; transition: 0.5s; z-index:9;}
#navbar .navbar-logo {flex:1;}
#navbar .navbar-logo img {height: 50px;}
#navbar ul {flex:2; text-align: right;padding-top:10px;}
#navbar ul li {display:inline-block;}
#navbar ul li a{color:#fff; transition:0.5s; font-size:1.4em; font-family: 'Exo 2', sans-serif; padding:0 15px;}
#navbar ul li a:hover {color:#D7B56D;}

#header {background-color:#000; background-image: url("../img/header-bg.png"); background-repeat:no-repeat; background-size:cover; background-position:center; background-attachment: fixed; width:100%; height:100%; }
#header .headerLogo {text-align:center; display:block; width:100%; position:absolute; top:50%; transform: translate(0,-50%);}
#header .headerLogo img{width: 40%; transition: 0.5s;}
#header .headerArrow {position:absolute; bottom:50px; left:50%; transform: translate(-50%,0); z-index:4; transition:1s; opacity: 0.3; display:block;}
#header .headerArrow img {height:60px; margin:20px; transition:0.5s;}
#header .headerArrow:hover {opacity:1;}


#header .headerArrow {animation:arrow 2s infinite;}
@keyframes arrow {
  0%   {bottom:50px;}
  50%  {bottom:20px;}
  100% {bottom:50px;}
}


#about {background:#003f3f;}
#about > div {flex:1;}
#about .about-img {overflow: hidden; display:block;}
#about .about-img img {object-fit:cover; width:100%; height:100%;}
#about .about-txt-container {color:#fff; transition:0.5s; overflow:hidden;}
#about .about-txt-container .about-txt-wrapper {margin:100px; box-sizing:border-box;}
#about .about-txt-container h1 {display:block; text-align:center; font-size:1.8em; transition:0.5s; font-family: 'Exo 2', sans-serif; margin-bottom:20px; color:#D7B56D;}
#about .about-txt-container .about-txt {border: 1px solid #fff; padding:50px; font-size:1.1em; line-height:1.5em; transition:0.5s;}
#about .about-txt-container .about-txt p {margin-bottom:0.5em; text-indent:2em;}

#gallery {background:#000; margin:0; padding:5px;}
#gallery .gallery-wrapper {display:flex; flex-flow:row wrap; justify-content:center;}
#gallery .gallery-wrapper > a {width:200px; height:200px; overflow:hidden; margin:5px; display:block; flex-grow:0; flex-shrink:0; transition:0.5s;}
#gallery .gallery-wrapper > a img {object-fit:cover; width:100%; height:100%;}

#menu {background:#000; box-sizing: border-box; padding:5%; display:flex; }
#menu .menu-cat {flex:1; overflow:hidden; position:relative;}
#menu .menu-btn-bg {display:block; position:absolute; overflow:hidden; width:100%; height:100%;}
#menu .menu-btn-bg img {width:100%; height:100%; object-fit: cover; opacity:0.15; transition: 0.5s; }
#menu .menu-btn-txt {display:block; position:absolute; z-index:6; top:50%; left:50%; transform: translate(-50%,-50%); color:#fff; font-family: 'Exo 2', sans-serif; font-size: 2em; border:2px #D7B56D solid; padding:35px; text-align:center;}
#menu .menu-cat:hover .menu-btn-bg img {opacity:0.5;}

#map {background:#000; z-index:1; height:50%;}
#map iframe {opacity:0.2; z-index:1; transition:0.5s}
#map iframe:hover {opacity:0.5;}

#footer {background:#000; display:block; width:100%; color:#fff; padding:50px 100px 70px; box-sizing:border-box; position:relative; transition:0.5s;}
#footer .footer-container {display:flex; box-sizing: border-box;}
#footer .footer-container .footer-box {flex:1; align-self:center; box-sizing:border-box; padding:20px; text-align:center;}
#footer .footer-container .footer-box.left {border:none; text-align:center;}
#footer .footer-container .footer-box.left img {width:60%; transition:0.5s;}
#footer .footer-container .footer-box.middle {border: 2px solid #D7B56D; line-height:1.3em; font-size:1em; margin: 20px;}
#footer .footer-container .footer-box.right {margin:20px;}

#footer .footer-copy {text-align:center; font-size:0.8em; display:block;}
#footer .footer-copy a {color:#D7B56D; font-weight: bold;}

@media (max-width: 1500px) {
  
    #about .about-txt-container .about-txt-wrapper {margin:75px}
    #about .about-txt-container h1 {font-size:1.5em;}
    #about .about-txt-container .about-txt {font-size:1em; line-height:1.3; padding:35px;}
    #footer {padding: 50px 25px 50px;}
    #footer .footer-container .footer-box.left img {width:90%;}
}

@media (max-width: 1200px) {
  
    #header .headerLogo img{width: 50%;}
    #about .about-txt-container .about-txt-wrapper {margin:50px}
    #about .about-txt-container h1 {font-size:1.6em;}
    #about .about-txt-container .about-txt {font-size:0.9em; line-height:1.2; padding:25px;}
    #menu {flex-flow: column wrap;}
    #footer .footer-container {flex-flow: column wrap; width:100%;}
    #footer .footer-container .footer-box {width:100%;}
    #footer .footer-container .footer-box.middle {margin:20px 0;}
    #footer .footer-container .footer-box.right {margin:20px 0;}
    #footer .footer-container .footer-box.left {margin-bottom:30px;}
    #footer .footer-container .footer-box.left img {width:30%}
    
}

@media (max-width: 1000px) {
    #header .headerLogo img{width: 70%;}
    #about {flex-flow: column wrap; min-height:0;}
    #about .about-img {height:30%; height:250px;}
    #about .about-txt-container .about-txt-wrapper {margin:20px}
    #gallery .gallery-wrapper > a {width:150px; height:150px;}
    
    .sidepanel {display:block;}
    .openbtn {display:block;}
    
    #navbar{display:none;}
}

@media (max-width: 1000px) and (orientation: portrait)
{
    #map iframe {opacity:0.6}
    #header .headerArrow img {height:35px;}
    
}

@media (max-width: 700px) {
   #footer .footer-container .footer-box.left img {width:70%}
}


@media (max-height: 500px) {
    #menu{height:500px !important;}
    #menu .menu-btn-bg {height:200px;}
    
}

@media (max-height: 450px) {
    #header .headerArrow img {height:40px; margin:10px;}
    
    
}

@media (max-height: 400px) {
    .sidepanel .sidepanel-logo {display:none;}
    #header .headerArrow {animation:none; bottom:5px;}
    #header .headerArrow img {margin:5px;}
    
}

@media (max-height: 350px) {
    .sidepanel .sidepanel-tel {display:none;}
    
}

@media (max-height: 250px) {
    #header .headerArrow {display:none;}
}