/* MAINMENU */

/* Main Menu */

.fixed-menu {position:fixed;   display: block; top:0px; right:0px; height:50px; width:100%; background-color:#95C123; text-align: center; z-index:9999;}
.main-menu {position: relative; display: inline-block; vertical-align: middle; height: 100%; width: auto; z-index: 10; }
.main-menu ul { list-style: none; margin: 0px 0px; padding: 0px 0px; font-weight: var(--ronmi-font-weight-text);}
.main-menu a {text-decoration:none; color:#fff; font-size: 1.25vw; padding-top:20px;} 
.main-menu a:hover {color: #966d09;}
.main-menu a:active {color: #95C123; background-color: white;}
.main-menu > ul {position: relative; display: flex; width: 100%; vertical-align: middle; height: 100%; }
.main-menu > ul > li { margin: 0px 9px; padding: 0px 0px; float: left; position: relative; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; height: 100%;}
.main-menu [aria-current='page'] {text-decoration: underline 0.15rem; text-underline-offset: 0.3rem;}

.active { font-weight:800; text-decoration: underline;}

/*--------------------------------------------------------------
## Menu DT/Mobie
--------------------------------------------------------------*/
.header-mobile {display: none;}
.mobile-section { display: none;}
.admin-bar section:not(.is-stuck) .mmenu-wrapper { top: 32px;}
@media only screen and (max-width: 1024px) {.header-desktop { display: none; } .header-mobile  {display: block; } .desktop-section {display: none;} .mobile-section {display: block; } .main-menu a {padding-top:0px;} }

/* SIDEMENU */
    /* w3 sidemenu */
    /* Fixed sidenav, full height */
.mopen { display: none; position:fixed; top: 20%; left: 0%; width:80px; height: 48px; z-index:777;  }

[data-role=sidemenu-container] {position: fixed; top:50px; left:0px; height: 100%; transition: transform 400ms ease; -webkit-transition: -webkit-transform 400ms ease; }
[data-sidemenu-dir=left].is-active {transform: translate3d(100%, 0, 0); -webkit-transform: translate3d(100%, 0, 0); z-index:6; width: 60%; }
[data-sidemenu-dir=right].is-active {transform: translate3d(-70%, 0, 0); -webkit-transform: translate3d(-70%, 0, 0); z-index:6;}
#sidemenu { overflow-x: hidden; overflow-y: auto; position: absolute; top: 0; bottom: 0; width: 100%; background-color: rgba(40, 40, 40, 0.75); font-size: 14px; transition: transform 400ms ease 0s; -webkit-transition: -webkit-transform 1ms ease 0s; z-index: 9999;}
[data-sidemenu-dir=left] #sidemenu {left: 0; transform: translate3d(-100%, 0, 0); -webkit-transform: translate3d(-100%, 0, 0);}
[data-sidemenu-dir=right] #sidemenu {right: 0; transform: translate3d(100%, 0, 0); -webkit-transform: translate3d(100%, 0, 0);}
.heading {font-weight:bold; font-size:x-large; color:lime;}
#sidemenu ul { list-style: none; margin: 0 0 20px; padding: 0;}
#sidemenu li { border-bottom: 1px solid #222; }
#sidemenu a { display: block; padding: 5px 10px; color: #fff; text-decoration: none;}
#sidemenu a:hover {color: silver;}
#sidemenu .divider { height: 65px;}

@-ms-viewport { width:device-width; }
@media only screen and (min-device-width:800px) 
{  #sidemenu {width: 100%} [data-sidemenu-dir=left].is-active { transform: translate3d(100%, 0, 0); -webkit-transform: translate3d(100%, 0, 0);}
[data-sidemenu-dir=right].is-active {transform: translate3d(-30%, 0, 0); -webkit-transform: translate3d(-30%, 0, 0);} 
}
[data-role=sidemenu-content] > a {display: inline-block; margin: 8px; }
    

.sidenav { height: 100%; width: 100%; position: fixed; z-index: 1; top: 0; left: 0; overflow-x: hidden; padding-top: 18px;}

/* Style the sidenav links and the dropdown button */
.sidenav a, .dropdown-btn {padding: 6px 8px 6px 16px; text-decoration: none; font-size: 14px; display: block; border: none; background: #404040; color: #fff; width: 100%; text-align: left; cursor: pointer; outline: none;}
/* On mouse-over */
.sidenav a:hover, .dropdown-btn:hover { color: #f1f1f1;}
/* Main content */
.main {margin-left: 200px; /* Same as the width of the sidenav */ font-size: 20px; /* Increased text to enable scrolling */ padding: 0px 10px;}
/* Add an active class to the active dropdown button */
.active { font-weight: 800; }
/* Dropdown container (hidden by default). Optional: add a lighter background color and some left padding to change the design of the dropdown content */
.dropdown-container {
  display: none;
  background-color: #858585;
  padding-left: 8px;
}

/* Optional: Style the caret down icon */
.fa-caret-down {
  float: right;
  padding-right: 8px;
}

[data-role=sidemenu-container] {position: fixed; height: 100%; transition: transform 400ms ease; -webkit-transition: -webkit-transform 400ms ease; z-index:9999;}
[data-sidemenu-dir=left].is-active {z-index:9999;}
.mvopen { position:fixed; top: 0%; left: 0%; height: 200px; z-index:9999;  }

.menuLogo {display: block; margin-left: auto; margin-right: auto;}

/* Some media queries for responsiveness */
@media screen and (max-height: 450px) {.sidenav {padding-top: 15px;} .sidenav a {font-size: 16px;}}
/* Landscape phone */

/* Laptop/PC */
@media (min-width: 45em){.mopen {width: 120px; height: 72px;}[data-sidemenu-dir=left].is-active {width: 20%;}}
@media  (max-device-width: 50em) and (orientation: landscape) {.mvopen { position:fixed; top: 0%; left: 0%; height: 200px; z-index:9999;  } }
@media (min-width: 65em) { .mvopen { height: 300px; } }

/* AMAZON */
      /* Always set the pano height explicitly to define the size of the div
       * element that contains the pano. */

html { height:100%; }
body { height:100%; font-family: "Times New Roman", sans-serif; font-size:16px; margin:0px; border:0px; padding:0px; color:#ffffff; background-color: gray; }
#contentz {height: 100%; overflow:hidden;}
#scroll {height: auto;}
h1,h2 {font-size : large; font-weight: bold; clear:both}
h2 {color:0x806000;}
h3 {font-size : medium; font-weight: bold; color:0x806000;  clear:both; padding: 0px;}
#logo {display: none;}
#title {width: 250px; position:absolute; top:3%; right:3%; z-index:999; font-size:large; color:white; text-align: right;}
#title {display: none;}
.title {font-size:x-large; font-weight:bold;}
.button {background-color:rgba(40, 40, 40, 0.75); text-decoration:none; padding: 0.5vw 0.75vw; font-size: 15px; color:#ffffff; line-height: 1.5; margin-bottom:2%; border-color:white; border-radius: 0px 0px 5px 5px; border-style: solid; border-width: 0px 1px 1px 1px;}
.button:hover, .button:active { background: #007B80; }
.callbut {position:fixed; right:10px; bottom:100px; top:auto; width: 100px; z-index:9999;}
#call {position: fixed; left:5px; bottom:50px; z-index:999; width:75px;}
#buy {position: fixed; left:60px; bottom:50px; z-index:999; width:75px;}
.seeMore { position:fixed; top: 15%; left: 0%; height: 100px; z-index:9999;  } 

/* PANO */
#pano, #pano360 { width:100%; height:40%;  position: absolute; left:0; top:0; overflow-y: hidden; z-index:666}
#pano360 { height:100%;}
#pano { height:40%;}

/* INFO */
.info { width:100%; height:60%; position:fixed; bottom:0%; right:0%;  overflow:auto; background-color: rgba(87, 65, 66, 0.8); color: #fff; text-align: left; }
.info_content {width: 200px; padding: 0px; border: 0px; color: #696969;} 
.precis {padding: 0px 10px; height:45px; overflow:hidden;}
.soc { width:25px; float: right; }
.fb {padding:0.5%; margin:0; width:98%}
.cat { display: block; width: 100%; }
.icontent {padding:10px; margin:0}
.popImg {width: 100%; height:auto;}
#client {display: none;}

/* kerkyra/map */
#map { width: 100%; height: 650px; border: 0px; padding: 0px; }
#mapCanvas {width: 100%; height: 100%;}
#zoom2 {position: fixed; bottom:50px; right: 15px; height:120px; visibility: visible; z-index:9999;}
#map360 { width:45px; height: 53px; z-index:999; position:fixed; top:15%; right:0px; } 

.styled { border: 0; line-height: 2.5; padding: 0 20px; font-size: 1rem;  text-align: center; color: #fff; text-shadow: 1px 1px 1px #000;  border-radius: 10px; 
    background-color: rgba(149,193,35, 1) ; background-image: linear-gradient( to top left, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2) 30%, rgba(0, 0, 0, 0) );
    box-shadow: inset 2px 2px 3px rgba(255, 255, 255, 0.6), inset -2px -2px 3px rgba(0, 0, 0, 0.6);}
.styled:hover { background-color: rgba(204,153,0, 0.6);}
.styled:active {  box-shadow: inset -2px -2px 3px rgba(255, 255, 255, 0.6), inset 2px 2px 3px rgba(0, 0, 0, 0.6);}
    
.center {position: fixed; top:40%; left: 40% ;  width: 20%; z-index:9999; pointer-events:none; }   
.laptop {display:none}
.mobile {display: inline}    

  /* MEDIA TERMS */
@media  (max-device-width: 50em) and (orientation: landscape) {#pano { width:60%; height:100%;} .info { width:40%; height:100%;} }
@media (min-width: 45em) { #logo {width: 120px; position:absolute; bottom:3%; right:3%; z-index:999; display:inline} title {display: inline;} .callbut{right: 60px; top:80px; bottom: auto} #client {display: block; position: fixed; left:2%; bottom:5%; z-index:999; width:120px;}}
@media (min-width: 65em) { .popImg {width: 100%;} #pano { width:65%; height:100%;}.info { width:35%; height:100%;} .info_content {width: 250px;} .fb {display: block;	float: left; width: 49%; }.icontent {padding:15px;} .laptop {display:inline} .mobile {display: none}  }
@media screen and (max-width: 767px) {#zoom2 {visibility: visible;}}