@font-face {
    font-family: "HelveticaNeueBold";
    font-weight: bold;
    src: url("font/HelveticaNeueW23forSKY-Bd.eot") format("embedded-opentype"), url("font/HelveticaNeueW23forSKY-Bd.woff") format("woff"), url("font/HelveticaNeueW23forSKY-Bd.ttf") format("truetype"), url("font/HelveticaNeueW23forSKY-Bd.svg") format("svg");
}
@font-face {
    font-family: "HelveticaNeue";
    font-style: normal;
    font-weight: normal;
    src: url("font/HelveticaNeueW23forSKY-Reg.eot?#iefix") format("embedded-opentype"), url("font/HelveticaNeueW23forSKY-Reg.woff") format("woff"), url("font/HelveticaNeueW23forSKY-Reg.ttf") format("truetype"), url("font/HelveticaNeueW23forSKY-Reg.svg#HelveticaNeueLTArabic55Roman") format("svg");
}
body{ text-align:center; font-family: "HelveticaNeue"  !important; margin:0 !important; padding:0 0 80px 0; !important}
#gadara{ text-align:center}
	.garada-con{ max-width:1028px; padding:15px 0;  margin:0 auto; text-align:left}
		.garada-con a{ display:block}

#wrapper{ border-bottom:1px solid #EEE}
#header-wrapper{ border-bottom:1px solid #EEE;}
.header-row{width:95%; padding:10px 2.5%; max-width:1100px; margin:0 auto}
	 .header-row img{ max-height:80px;}
	 .header-row  a{ display:block}
	.header-logo-left{ display:inline-block; width:20%; text-align:left; vertical-align:bottom}
	.header-nav{ width:60%; display:inline-block; vertical-align:bottom}
		.header-nav ul{ margin:0 20px; padding:0; text-align:right; direction:ltr}
		.header-nav ul li{ list-style-type:none; display:inline-block; margin:0 20px }
		.header-nav ul li a{ text-decoration:none; color:#0BBAE5; font-size:16px; display:block}
	.logo-menu-con{display:inline-block; text-align:right; vertical-align:bottom}
	.header-logo-right{ float:left }
	.header-menu-right{ float:right}
.home-logo{ width:100%; text-align:center}
	.home-logo h1{ margin:60px 0 10px;}
.search-con{ max-width:590px; border:1px solid #007F43; border-radius:24px; padding:0 18px 0 10px; margin:20px auto;  box-shadow:5px 5px 5px 0 rgba(204, 204, 204, 0.8)}
.gsc-search-button-v2{ padding:2px !important}
#content{ margin:30px 0;}

h1{ font-size:30px; }
#main{ width:100%; max-width:900px; padding:0 0 50px 0; margin:0 auto; text-align:left; min-height:200px; position:relative}
	.translate-btn{ position:absolute; top:80px; right:0;}
.gcsc-more-maybe-branding-root{ display:none !important}
#footer-wrapper{ background:#F2F2F2; border-top:1px solid #E4E4E4; position:fixed; bottom:0; width:100%;}
#footer{width:80%; max-width:900px; padding:10px 10%; margin:0 auto; display:inline-block}
#footer p{ margin:0; text-align:center; font-size:14px;}
#footer p a{ color:#4D5156; text-decoration:none; margin-right:30px}
    /* Use a different font family for search results */
    .gs-title, .gs-snippet {
        font-family: "HelveticaNeue";
    }
	.gs-title{ font-size:18px !important}
	.gsc-input{   font-family: "HelveticaNeue";}
    /* Add a border between individual search results */
    .gs-webResult {
        border: 1px solid #eee;
        padding: 1em;
    }
	.gsc-search-button{ cursor:pointer !important}

    /* Do no display the count of search results */
    /*.gsc-result-info {
        display: none;
    }*/

    /* Hide the Google branding in search results */
    .gcsc-branding {
        display: none;
    }

    /* Hide the thumbnail images in search results */
    .gsc-thumbnail {
        display: none;
    }

    /* Hide the snippets in Google search results */
   /* .gs-snippet {
        display: none;
    }*/

    /* Change the font size of the title of search results */
    .gs-title a {
        font-size: 18px;
    }

    /* Change the font size of snippets inside search results */
    .gs-snippet {
        font-size: 16px;
    }

    /* Google Custom Search highlights matching words in bold, toggle that */
    .gs-title b, .gs-snippet b {
        font-weight: normal;
    }

    /* Do no display the URL of web pages in search results */
    .gsc-url-top, .gsc-url-bottom {
        display: none;
    }

    /* Highlight the pagination buttons at the bottom of search results */
	.gsc-cursor{ direction:ltr !important;}
    .gsc-cursor-page {
        font-size: 13px;
        padding: 4px 8px;
        border: 1px solid #007F43;
    }
	.gsc-cursor-current-page, .gsc-cursor-page:hover{ background:#007F43 !important; color:#FFF !important;}


#translate-row{box-shadow:5px 5px 5px 0 rgba(204, 204, 204, 0.8); background:none; background-size:cover; width:95%; display:inline-block; padding:2.5%; border:1px solid #EEE; border-radius:10px;}
	.translate-col{ width:50%; float:left; }
	.translate-col h4{ margin:0; font-size:14px; color:#333;}	
	.selecttext{ border-bottom:2px solid #FFF; padding:2%; width:96%;}
	.selecttext select{ width:150px;}
	.textareacon{ width:95%; padding:2.5%; height:300px;; border:1px solid silver}
	.textareacon textarea{ width:95%; padding:2.5%; height:80%; resize:none; background:#EEE;  border:1px solid #222}
	#translation{width:95%; padding:2.5%; height:80%; border:1px solid #222; font-size:13px; background:#EEE;}
	#translate-row input[type="button"]{ background:#000; border:none; color:#FFF; margin:10px 0; font-size:16px; padding:5px 25px; text-align:center; cursor:pointer; line-height:16px; border-radius:2px;}

/* Weather */
.contentright{ width:45%; float:right}
.contentleft{ width:45%; float:left;}
.searchcity, .weather-con, .forcast-con{ text-align:right; direction:ltr;}
.searchcity{ width:95%; padding:8px 2.5%; text-align:center; color:#FFF; background:#222; border-radius:5px;}
.searchcity h2{ font-size:18px; margin:0 0 5px 0;}
.searchcity input[type="text"]{width:95%; padding:6px 2.5%;}
.searchcity button{ cursor:pointer; border:none; margin-top:10px; padding:8px 25px; background:#00A99D; color:#FFF; text-align:center}
.weather-con{ margin:15px 0; width:95%; padding:20px 2.5%; color:#FFF; border-radius:10px; background: linear-gradient(to top, #93D3FE 1%, #108BFF 99%);}
.weather-con h1{ font-size:25px; font-weight:normal;}
.weather-row{ display:inline-block; width:95%; margin:10px 0;padding:10px 2.5%; background-color:rgba(4,108, 165, 0.3); border-radius:30px}
.weather-row h3,.weather-row h4, .weather-row h5{ margin:0; display: inline-block; width:100%;}
#temp{ font-size:40px;}
#weather_icon img{ height:65px}
.weather-row h3{ font-size:25px; direction:ltr;}
.weather-row h4{ font-size:20px;}
.weather-row h5{ font-size:16px; font-weight:normal}
.weather-col{ float:right; margin-left:15px;}
#weather, #weather_desc{ font-size:18px}

.forcast-con{ margin:0 0 15px 0; width:95%; padding:20px 2.5%; color:#FFF; border-radius:10px; background: #046CA5;}
.forcast-con h1{ font-size:25px; font-weight:normal;}
.forcast-con table{ margin:0; padding:0; width:100%; font-size:13px}
.forcast-con table th{ text-align:center}
.forcast-con table td{ direction: ltr !important; text-align:center}
.forcast-con img{ height:30px}
.wi-sunrise{ color:yellow !important}
.wi-sunset{ color:gray !important}
.weather-row .wi{ font-size:30px;}
.pac-logo::after{ display:none !important}
/* MObile MENU */
#mobile-menu-con{ overflow-y:auto; background:#FFF; text-align:center; max-width:500px; box-shadow:-webkit-box-shadow: -14px 2px 22px -14px rgba(0,0,0,0.75);
-moz-box-shadow: -14px 2px 22px -14px rgba(0,0,0,0.75);box-shadow: -14px 2px 22px -14px rgba(0,0,0,0.75);}
	#closeMenu{ margin:50px 0; cursor:pointer}
	#mobile-menu-con.wrapper{padding:30px 20px 30px}
		.menu-mobile{ margin:0 auto; padding:0; text-transform:uppercase; max-width:300px;}
		.menu-mobile li{ list-style:none; border-top:1px solid #00A99D;}
		.menu-mobile li:first-child{ border:none}
		.menu-mobile li a{ text-decoration:none; color:#0BBAE5; font-size:18px; font-weight:bold;  padding:20px 0; display:block;}
#openMenu{ display:none; text-align:right; cursor:pointer}

/* MAP */
      #map {
        width: 100%;
		height:100%;
      }

      /* Optional: Makes the sample page fill the window. */
      html,
      body {
        height: 100%;
        margin: 0;
        padding: 0;
		width:100%;
      }

      #floating-panel {
        position: absolute;
        top: 10px;
        left: 25%;
        z-index: 5;
        background-color: #fff;
        padding: 5px;
        border: 1px solid #999;
        text-align: center;
        font-family: "Roboto", "sans-serif";
        line-height: 30px;
        padding-left: 10px;
      }
	  .custom-map-control-button {
  appearance: button;
  background-color: #fff;
  border: 0;
  border-radius: 2px;
  box-shadow: 0 1px 4px -1px rgba(0, 0, 0, 0.3);
  cursor: pointer;
  margin: 80px auto;
  padding: 0 0.5em;
  height: 40px;
  font: 400 18px Roboto, Arial, sans-serif;
  overflow: hidden;
}
.custom-map-control-button:hover {
  background: #ebebeb;
}
/* DIRECTION */
.controls {
  margin-top: 10px;
  border: 1px solid transparent;
  border-radius: 2px 0 0 2px;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  height: 32px;
  outline: none;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

#origin-input,
#destination-input {
  background-color: #fff;
  font-family: Roboto;
  font-size: 15px;
  font-weight: 300;
  margin-left: 12px;
  padding: 0 11px 0 13px;
  text-overflow: ellipsis;
  width: 200px;
  text-align:right
}

#origin-input:focus,
#destination-input:focus {
  border-color: #4d90fe;
}

#mode-selector {
  color: #fff;
  background-color: #4d90fe;
  margin-left: 12px;
  padding: 5px 11px 0px 11px;
}

#mode-selector label {
  font-family: Roboto;
  font-size: 13px;
  font-weight: 300;
}

#right-panel {
  height: 100%;
  float: right;
  width: 390px;
  overflow: auto;
  z-index:999999;
  background:#FFF;
  display:none
  
}
#origin-input{ left:425px !important}
#destination-input{}
#mode-selector{ left:0 !important }
.openpanel{ display:block !important; width:30% !important;}
.openmap{ width:70% !important; float:left !important}
button.gsc-search-button.gsc-search-button-v2 {
    padding: 17px 10px !important;
}

@media screen and (max-width: 855px) {
	.logo-menu-con{ width:18%;}
	.header-logo-left img, .header-logo-right img{ width:100%; height:auto}
	.header-logo-right img{ width:100%; height:auto}
	.header-nav ul{ margin:0 5px;}
	.header-nav ul li{ margin:0 5px}
	#translate-row{ width:92.5%}
.contentright,.contentleft{ width:100%; float:none}
	#mobile-menu-con .wrapper {width: 90%;height: 96%;overflow-y: auto; position: relative;-webkit-overflow-scrolling: touch;padding:2% 5%;}
}
@media screen and (max-width: 580px) {
#openMenu{ display:block}	
.header-nav{ display:none}
.header-row{ display:inline-block}
.header-logo-left{ display:inherit; width:25%;}
.logo-menu-con{ display:inherit; width:65%;}
.header-logo-left{ float:left}
	.header-logo-left img, .header-logo-right img{ width:inherit; height:37px}
.logo-menu-con{ float:right}
.header-logo-right, .header-menu-right{ float:right; margin:0 10px;}
.header-row{ padding-bottom:0 !important}

#content{ min-height:200px !important; margin:30px 10px !important}
.search-con{ width:90% !important}
#map{ float:none !important; width:100% !important; height:70% !important}
#right-panel{float:none !important; width:100% !important; height:100% !important}
.adp-directions{ width:100% !important}
#destination-input{ left:0 !important; top:40px !important}
#mode-selector{ left:0 !important; top:80px !important}
#origin-input{ left: 0 !important}
}