/* 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;}}

/*--------------------------------------------------------------
## 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;} }