/* CSS Document */
body,html{overflow: hidden;}
#map{width:100vw; height: 100vh }
#divContent, #divListContent{height: 530px;}
#divListContent{padding-top: 20px;}
#divSearch{overflow: hidden; z-index: 2; transition: all 0.5s ease;width:60%; top:calc(50% + 50px); left: 50%; border-radius: 2px; transform: translate(-50%,-50%); position: absolute; box-shadow: 0 2px 4px rgba(0,0,0,0.2), 0 -1px 0px rgba(0,0,0,0.02);}
#searchInput{line-height:48px; height: 48px; width: 100%; box-sizing: border-box; padding:0px 10px 0px 50px; text-align: center; direction: rtl;}
#divSearch #search_button{position: absolute; font: normal normal normal 14px/1 FontAwesome; height: calc(100% - 10px);width: 50px; top:5px; border-right:1px solid rgba(67,80,97,0.3); text-align:center; line-height:38px; opacity:0.5;}
#divSearch #search_button.enabled{opacity:1; cursor:pointer;}
#divSearch.searched  #search_button{line-height: 70px;}
#divSearch.searched{
	top:10px;
    height: 80px;
    width: 220px; 
	right: 130px;
	left: auto;
	transform: translate(0);
	opacity: 1;animation-duration: 1s;animation-name: slidein;}

#divSearch.searched #searchInput{height: 80px; line-height: 80px}
#map_overlay{/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#435061+0,435061+100&0+0,1+65 */
background: -moz-radial-gradient(center, ellipse cover, rgba(67,80,97,0) 0%, rgba(67,80,97,0.5) 65%, rgba(67,80,97,0.5) 100%); /* FF3.6-15 */
background: -webkit-radial-gradient(center, ellipse cover, rgba(67,80,97,0) 0%,rgba(67,80,97,0.5) 65%,rgba(67,80,97,0.5) 100%); /* Chrome10-25,Safari5.1-6 */
background: radial-gradient(ellipse at center, rgba(67,80,97,0) 0%,rgba(67,80,97,0.5) 65%,rgba(67,80,97,0.5) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00435061', endColorstr='#435061',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

position: absolute;	
top:0px; left: 0px; width:100%; height: 100%;
z-index: 1;
opacity:1px;
	
}
.logo_map{box-sizing: border-box; padding:10px; width:120px; height: 80px; z-index:3; position: absolute; top: 10px; right: 10px;  background-color: rgba(67,80,97,1); box-shadow: 0 2px 4px rgba(0,0,0,0.2), 0 -1px 0px rgba(0,0,0,0.02); border-radius: 2px;}
.logo_map a{display:inline-block;line-height: 60px;}
.logo_map img{max-width:100%; vertical-align: middle}

.ratio{ display: none; font-weight: bold; z-index: 990; position: absolute; bottom:10px; pointer-events: none; padding:5px 10px; left:50%; transform: translateX(-50%); border-radius: 0px 0px 2px 2px; box-shadow: 0 2px 4px rgba(0,0,0,0.2), 0 -1px 0px rgba(0,0,0,0.02); background-color:#fff;  font-size:12px; }

#popup{z-index: 999; direction: rtl; overflow:hidden; right: -500px;  position: absolute; top: 88px; width:340px;      height: auto;  border-radius: 0px 0px 2px 2px; box-shadow: 0 2px 4px rgba(0,0,0,0.2), 0 -1px 0px rgba(0,0,0,0.02); background-color:#fff;}
#popup.show_popup{right:10px; animation-duration: 1s;animation-name: slideinright;}
#popup.hide_popup{right: -500px; animation-duration: 1s;animation-name: slideoutright;}
#popup .text{padding:15px; padding-bottom:0px;}
#popup .image img{width:100%;}
#popup #popup_close, #popup #popup_itemlist, #popup #popup_item{z-index: 99999; position:absolute; top:0px; left: 0px; width: 24px; height: 24px; line-height: 24px; text-align: center; background-color: #fff; box-shadow: 0 2px 4px rgba(0,0,0,0.2), 0 -1px 0px rgba(0,0,0,0.02); cursor: pointer}
#popup #popup_itemlist, #popup #popup_item{left: 24px;}
#popup .text h3{margin-top:0px;}
#popup .text .text_desc, #popup .text .text_title{height: 2em;    line-height: 1em; overflow: hidden;}
#popup a{text-decoration:none;}

.pin{position: relative; width: 100%; overflow: auto;top: 0px;}
.pin_list{border-bottom:3px solid rgba(67,80,97,0.3); padding-bottom: 10px; margin: 10px;    box-shadow: 0 2px 4px rgba(0,0,0,0.2), 0 -1px 0px rgba(0,0,0,0.02);}

.loader{position:absolute; top:0px; left: 0; height: 100%; width: 100%; z-index: 9999; /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#435061+0,435061+100&0.5+0,0.8+66 */
background: -moz-radial-gradient(center, ellipse cover, rgba(67,80,97,0.5) 0%, rgba(67,80,97,0.8) 66%, rgba(67,80,97,0.8) 100%); /* FF3.6-15 */
background: -webkit-radial-gradient(center, ellipse cover, rgba(67,80,97,0.5) 0%,rgba(67,80,97,0.8) 66%,rgba(67,80,97,0.8) 100%); /* Chrome10-25,Safari5.1-6 */
background: radial-gradient(ellipse at center, rgba(67,80,97,0.5) 0%,rgba(67,80,97,0.8) 66%,rgba(67,80,97,0.8) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#80435061', endColorstr='#cc435061',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */}

.sk-folding-cube {
  width: 40px;
  height: 40px;
  position: absolute;
	top: 50%; 
	left: 50%;
  -webkit-transform: rotateZ(45deg) translate(-50%);
          transform: rotateZ(45deg) translate(-50%);
}

.sk-folding-cube .sk-cube {
  float: left;
  width: 50%;
  height: 50%;
  position: relative;
  -webkit-transform: scale(1.1);
      -ms-transform: scale(1.1);
          transform: scale(1.1); 
}
.sk-folding-cube .sk-cube:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
  -webkit-animation: sk-foldCubeAngle 2.4s infinite linear both;
          animation: sk-foldCubeAngle 2.4s infinite linear both;
  -webkit-transform-origin: 100% 100%;
      -ms-transform-origin: 100% 100%;
          transform-origin: 100% 100%;
}
.sk-folding-cube .sk-cube2 {
  -webkit-transform: scale(1.1) rotateZ(90deg);
          transform: scale(1.1) rotateZ(90deg);
}
.sk-folding-cube .sk-cube3 {
  -webkit-transform: scale(1.1) rotateZ(180deg);
          transform: scale(1.1) rotateZ(180deg);
}
.sk-folding-cube .sk-cube4 {
  -webkit-transform: scale(1.1) rotateZ(270deg);
          transform: scale(1.1) rotateZ(270deg);
}
.sk-folding-cube .sk-cube2:before {
  -webkit-animation-delay: 0.3s;
          animation-delay: 0.3s;
}
.sk-folding-cube .sk-cube3:before {
  -webkit-animation-delay: 0.6s;
          animation-delay: 0.6s; 
}
.sk-folding-cube .sk-cube4:before {
  -webkit-animation-delay: 0.9s;
          animation-delay: 0.9s;
}
@-webkit-keyframes sk-foldCubeAngle {
  0%, 10% {
    -webkit-transform: perspective(140px) rotateX(-180deg);
            transform: perspective(140px) rotateX(-180deg);
    opacity: 0; 
  } 25%, 75% {
    -webkit-transform: perspective(140px) rotateX(0deg);
            transform: perspective(140px) rotateX(0deg);
    opacity: 1; 
  } 90%, 100% {
    -webkit-transform: perspective(140px) rotateY(180deg);
            transform: perspective(140px) rotateY(180deg);
    opacity: 0; 
  } 
}

@keyframes sk-foldCubeAngle {
  0%, 10% {
    -webkit-transform: perspective(140px) rotateX(-180deg);
            transform: perspective(140px) rotateX(-180deg);
    opacity: 0; 
  } 25%, 75% {
    -webkit-transform: perspective(140px) rotateX(0deg);
            transform: perspective(140px) rotateX(0deg);
    opacity: 1; 
  } 90%, 100% {
    -webkit-transform: perspective(140px) rotateY(180deg);
            transform: perspective(140px) rotateY(180deg);
    opacity: 0; 
  }
}


@media only screen and (max-width: 767px) {
	#divSearch{
		width:90%;
	}
	#divSearch.searched{
		width: calc(100vw - 140px); 
	}
	#popup{

    width: calc(100% - 20px);
		
	}
	#popup .text .text_desc, #popup .text .text_title {
		height: 37px;
		overflow: hidden;
	}
	.sample_details{margin-bottom:0px!important;}
	
}


@keyframes slidein {
  0%{
	transform-origin: center;
	transform: translate(-50%,-50%);
    height: 48px;
	top:calc(50% + 50px);
	left: 50%;
	opacity: 1;
  }

  40% {
    height: 0;
    width: 0;
	opacity: 0;
	left: 50%;
	transform: translate(-50%,-50%);
	top:calc(50% + 50px);
  }
  60% {
    height: 0;
    width: 0;
	opacity: 0;
	left: auto;
	transform: translate(-50%,-50%);
	right:-130px;
	top:10px;
  }

  100% {
	top:10px;
    height: 80px;
	right:130px;
	left: auto;
	transform-origin: center;
	transform: translate(0);
    width: 220px; 
	opacity: 1;
  }
}

@keyframes slideinright {
  from {
	right: -500px;
  }

  to {
	right: 10px;
  }
}
@keyframes slideoutright {
  from {
	right: 10px;
  }

  to {
	right: -500px;
  }
}


::-webkit-scrollbar
{
  width: 8px;
  height: 8px;
  background-color: rgba(67,80,97,0.1);border-radius: 4px;
}

::-webkit-scrollbar-thumb:vertical, ::-webkit-scrollbar-thumb:horizontal
{
  background-color: rgba(67,80,97,0.8);
	border-radius: 4px;
}

::-webkit-scrollbar-button:start:decrement,
::-webkit-scrollbar-button:end:increment
{
  display: none;
}