/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/
html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,time, mark, audio, video {
margin: 0;padding: 0;border: 0;font-size: 100%;font: inherit;vertical-align: baseline;outline: 0;text-indent: 0;}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;}
body {line-height: 1; }
ol, ul {list-style: none;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after,q:before, q:after {content: '';content: none;}
table {border-collapse: collapse;border-spacing: 0;}
button{border:0;outline: 0;}
button::-moz-focus-inner{ border:0;}
input{padding:0; margin:0; border:0;}
strong{font-weight: bold;}

/*
ebb52d --> jaune
2d2d2d --> dark grey
8c8c8c --> light grey
*/
::-webkit-input-placeholder {color: #EBB52D; }
:-moz-placeholder { /* Firefox 18- */color: #EBB52D; }
::-moz-placeholder {  /* Firefox 19+ */color: #EBB52D;  }
:-ms-input-placeholder { color: #EBB52D;}


/* HOME PAGE */
#content {width: 100%;  margin-top: 60px; background-color: #ededed; padding-bottom: 30px; font-family: Lato;}

#map-image{
	width:100%;height: 100%;background-color: #80a9e2;z-index: 10000; margin-bottom: 10px;
	-webkit-box-shadow: 0px 2px 4px 0 rgba(0,0,0,0.4);-moz-box-shadow: 0px 2px 4px 0 rgba(0,0,0,0.4);box-shadow: 0px 2px 4px 0 rgba(0,0,0,0.4); }

#map-image img {display: block; margin: 0 auto; width: 100%; max-width: 1232px;} 
#access-map{width: 100%; margin-top: -6vw !important; margin-top: -10%; z-index: 100000; position: absolute;}

#access-map input{display: block;margin: auto; width: 11vw !important;width: 15%;min-width:100px;height: 2.5vw !important;height: 4%;min-height: 15px; 
	font-size: 1.3vw; font-family: Arial; outline: 0px none;border-right: 1px solid rgba(0, 0, 0, 0.4);background-color: #ebb52d;border-radius: 2px;
-webkit-box-shadow: 2px 2px 4px 0px rgba(0, 0, 0, 0.75),inset 0px -1px 1px rgba(0,0,0,0.5), inset 0px 1px 1px rgba(255,255,255,0.8); 
-moz-box-shadow: 2px 2px 4px 0px rgba(0, 0, 0, 0.75),inset 0px -1px 1px rgba(0,0,0,0.5), inset 0px 1px 1px rgba(255,255,255,0.8); 
box-shadow: 2px 2px 4px 0px rgba(0, 0, 0, 0.75),inset 0px -1px 1px rgba(0,0,0,0.5), inset 0px 1px 1px rgba(255,255,255,0.8);z-index: 1000000;cursor: pointer; }

#access-map input:hover{-webkit-box-shadow: 1px 2px 3px 0px rgba(0, 0, 0, 0.75),1px 0px 2px 0px rgba(0, 0, 0, 0.75) inset;
-moz-box-shadow: 1px 2px 3px 0px rgba(0, 0, 0, 0.75),1px 0px 2px 0px rgba(0, 0, 0, 0.75) inset; box-shadow: 1px 2px 3px 0px rgba(0, 0, 0, 0.75), 1px 0px 2px 0px rgba(0, 0, 0, 0.75) inset;} 

#container{height: 100%;}

.container-intro{padding: 25px;font-size: 23px;line-height: 32px; }
.container-intro a{color: #5a5a5a;}
.container-item{
	-webkit-column-count: 3; /* Chrome, Safari, Opera */
    -moz-column-count: 3; /* Firefox */
    column-count: 3;
    -webkit-column-gap: 35px; /* Chrome, Safari, Opera */
    -moz-column-gap: 35px; /* Firefox */
    column-gap: 35px;
    padding: 0 25px 25px 25px;
	font-size: 21px;
	line-height: 30px; }

.article2 {margin-bottom: 15px; display: inline-block;}
.article{margin-bottom: 15px;}
#border.container-item {border-bottom: 1px solid #aaa; }
#map-location{display: block; width: 100%; border: 1px solid #000; max-width: 650px; max-height: 400px; margin-left: auto; margin-right: auto; margin-top: 10px; margin-bottom: 10px;}
#beach-icon {vertical-align: middle; width: 20px; height: 20px; }
.container-item h2 a{font-weight: bold; color: #000;}
.container-item h2 a img{vertical-align: middle;}
.container-item h2 a:hover{color:#8c8c8c }
.container-item a{color: #5a5a5a;}

footer{ height: 220px;background-color: #2d2d2d; color:#848484 ; z-index: 10000;
	-webkit-box-shadow: 0px -2px 4px 0 rgba(0,0,0,0.4);-moz-box-shadow: 0px -2px 4px 0 rgba(0,0,0,0.4);box-shadow: 0px -2px 4px 0 rgba(0,0,0,0.4);  }
#foot-container{
	justify-content:space-between; -webkit-justify-content: space-between;
	display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex;
	font-size: 17px; line-height: 20px;
	width: 90vw !important; width: 90%; margin: auto;
	}
ul:before{content:attr(data-header); font-weight: bold; color: #b4b4b4}
.foot-column{padding: 20px 0 20px 0; color: #848484; width: 30vw !important; /*width: 30%;*/}
.foot-column a{color: #848484;}
.foot-column a:hover{color: #aaa;}
.foot-column h3{color: #aaa;}
.foot-column img{padding: 7px 3px 0 0;}
#foot-line{width: 90vw !important; width: 90%; height: 1px; margin: auto; background-color: #848484;}
#logo-cubaism{ padding: 20px 20px 0 30px;}
#logo-cubaism img{width:100%; max-width: 150px; max-height:59px; height:100%; }
#copyright{ color:#848484; padding: 10px 0 0 0; width: 90vw !important; width: 90%; margin: auto; font-size: 1.1vw !important; font-size: 0.5em; text-align: left; }
#CubaDirecto{padding: 20px 30px 0 20px; }
#CubaDirecto img{width:100%; max-width: 150px; max-height:62px; height:100%;}





/* END OF HOME PAGE */ 



a{text-decoration: none;}
html{font-family: Lato;margin:0; padding: 0; font-size: 1.1em; overflow: auto; min-width: 1134px; min-height: 750px; }
body{overflow: auto; font-family: Lato;}
header{position: absolute; top:0; left:0; width: 100%; height:60px; background-color: #2d2d2d; min-width: 1134px; z-index: 10000;
 -webkit-box-shadow: 0px 2px 4px 0 rgba(0,0,0,0.5);-moz-box-shadow: 0px 2px 4px 0 rgba(0,0,0,0.5);box-shadow: 0px 2px 4px 0 rgba(0,0,0,0.5);}
div header {float: left;}
nav{display: inline-block;  }
nav a{width: 100px; height: 60px;}
h1{width: 200px;font-size: 15px; color: #8c8c8c;  margin-left: 30px;text-shadow: 2px 2px 1px #000000; }
h2{display: inline-block;}
h3{font-weight: bold;}
.logo{width: 200px; font-size: 25px; color: #ebb52d; margin-top: 10px; margin-left: 10px; text-shadow: 2px 2px 1px #000000;}
.logo a{color:#ebb52d; }
.white{color: #fff;}
#menu1{position: absolute; top: 21px; left: 200px;}
#menu1 a{font-size: 17px; color: #ebb52d; margin-right: 26px; text-shadow: 2px 2px 1px #000000;}
#menu1 a:hover{color:#8c8c8c }
#menu1 a.active{color: #ffffff;}
#menu2 a.active{color: #ffffff;}
#menu2 a {font-size: 15px; color: #8c8c8c; margin-right: 15px; text-shadow: 2px 2px 1px #000000; }
#menu2 a:hover{color: #ebb52d}
#menu2 {float: right; margin: -29px 120px 0 0; }
#social{float: right;margin: -34px 10px 0 0; z-index: 10000;}
#map{position: absolute;background-color: #80a9e2; width: 100%; height: 100%; top: 0px; left: 0;min-height: 750px; min-width: 1135px;}
#tools{position: absolute; left: 15px; top: 15px;}
#toolbar{position: absolute; width: 800px; left: 200px; top: 80px;}
#toolbar div{float: left; margin-right: 16px;}
#toolbar input {font-family:Lato ; width: 218px; height: 28px; background-color: #2d2d2d; border-radius: 2px; color: #EBB52D; text-indent: 30px;
-webkit-box-shadow: 2px 2px 4px 0px rgba(0, 0, 0, 0.5),2px 2px 4px 0px rgba(0, 0, 0, 0.5) inset; -moz-box-shadow: 2px 2px 4px 0px rgba(0, 0, 0, 0.5),2px 2px 4px 0px rgba(0, 0, 0, 0.5) inset; box-shadow: 2px 2px 4px 0px rgba(0, 0, 0, 0.5),2px 2px 4px 0px rgba(0, 0, 0, 0.5) inset;
background-image: url(img/search-15.png);background-repeat: no-repeat;background-position: 3% center;}
#searchcity{margin-right: -16px;}
.ui-autocomplete-category{color: #ebb52d; /*font-weight: bold;*/ font-size: 23px; text-indent: 10px; margin-bottom: 5px; }
.ui-autocomplete-subcat{color: #ebb52d; text-indent: 15px; font-size: 21px;}

.displayAll{position: absolute;font-family: Lato;font-size: 15px;width:110px;outline: 0px none; border-right: 1px solid rgba(0, 0, 0, 0.4);height: 28px;
background-color: #ebb52d;right: 118px; top: 80px;border-radius: 2px 0 0 2px;
-webkit-box-shadow: 2px 2px 4px 0px rgba(0, 0, 0, 0.5),inset 0px -1px 1px rgba(0,0,0,0.5), inset 0px 1px 1px rgba(255,255,255,0.5); -moz-box-shadow: 2px 2px 4px 0px rgba(0, 0, 0, 0.5),inset 0px -1px 1px rgba(0,0,0,0.5), inset 0px 1px 1px rgba(255,255,255,0.5); box-shadow: 2px 2px 4px 0px rgba(0, 0, 0, 0.5),inset 0px -1px 1px rgba(0,0,0,0.5), inset 0px 1px 1px rgba(255,255,255,0.5);}

.displayAll:hover{-webkit-box-shadow: 1px 2px 3px 0px rgba(0, 0, 0, 0.5),-1px 0px 2px 0px rgba(0, 0, 0, 0.5) inset; -moz-box-shadow: 1px 2px 3px 0px rgba(0, 0, 0, 0.5),-1px 0px 2px 0px rgba(0, 0, 0, 0.5) inset; box-shadow: 1px 2px 3px 0px rgba(0, 0, 0, 0.5), -1px 0px 2px 0px rgba(0, 0, 0, 0.5) inset; cursor: pointer;}

.hideAll{position: absolute;font-family: Lato;font-size: 15px; width:110px;outline: 0px none;  height: 28px; background-color: #ebb52d; 
right: 8px; top: 80px; border-radius: 0 2px 2px 0;
-webkit-box-shadow: 2px 2px 4px 0px rgba(0, 0, 0, 0.5),inset 0px -1px 1px rgba(0,0,0,0.5), inset 0px 1px 1px rgba(255,255,255,0.5); -moz-box-shadow: 2px 2px 4px 0px rgba(0, 0, 0, 0.5),inset 0px -1px 1px rgba(0,0,0,0.5), inset 0px 1px 1px rgba(255,255,255,0.5); box-shadow: 2px 2px 4px 0px rgba(0, 0, 0, 0.5),inset 0px -1px 1px rgba(0,0,0,0.5), inset 0px 1px 1px rgba(255,255,255,0.5);}

.hideAll:hover{-webkit-box-shadow: 1px 2px 3px 0px rgba(0, 0, 0, 0.5),1px 0px 2px 0px rgba(0, 0, 0, 0.5) inset; -moz-box-shadow: 1px 2px 3px 0px rgba(0, 0, 0, 0.5),1px 0px 2px 0px rgba(0, 0, 0, 0.5) inset; box-shadow: 1px 2px 3px 0px rgba(0, 0, 0, 0.5), 1px 0px 2px 0px rgba(0, 0, 0, 0.5) inset; cursor: pointer;}
#logo-cub{position: absolute; bottom: 30px; left: 30px; z-index: 600000;}
/*OverWrite the google style*/
.gm-style div {font-family: Lato; font-size: 17px;}
.gm-style span, .gm-style label, .gm-style a{font-family: Lato;font-size: 15px;}
.gm-style-cc{display: none;}
/*************************/
#OpenLayers_Control_Attribution_4{position:absolute; z-index: 2000; text-align: center;bottom: 10px; margin: auto; width: 100%; font-weight: normal; font-size: 17px;}
#OpenLayers_Control_Attribution_14{position:absolute; z-index: 2000;bottom: 0.5em; left: 10px;font-weight: normal; font-size: 13px;}
#NOAA-legend{position: absolute; left: 200px; top: 67px; z-index: 15000;}
#hurri-com{position: absolute;width: 150px; right: 30px; top: 400px; z-index: 15000; color: #fff;}

/********************    Zoom button  **********************/
.olControlZoomInItemInactive 
{vertical-align: middle; border-radius: 2px;
-webkit-box-shadow: 2px 2px 4px 0px rgba(0, 0, 0, 0.5); -moz-box-shadow: 2px 2px 4px 0px rgba(0, 0, 0, 0.5); box-shadow: 2px 2px 4px 0px rgba(0, 0, 0, 0.5); 
cursor: pointer; text-align: center; line-height: 20px; position: absolute; width: 28px; height: 28px; background-color: #2d2d2d; background-image: url('img/control/zoomIn.png');
top: 120px; left: 0; }
.olControlZoomInItemInactive:hover{background-image: url('img/control/zoomIn-hover.png'); -webkit-box-shadow: 1px 2px 3px 0px rgba(0, 0, 0, 0.5); -moz-box-shadow: 1px 2px 3px 0px rgba(0, 0, 0, 0.5); cursor: pointer; box-shadow: 1px 2px 3px 0px rgba(0, 0, 0, 0.5);}
.olControlZoomOutItemInactive {vertical-align: middle; border-radius: 2px;
-webkit-box-shadow: 2px 2px 4px 0px rgba(0, 0, 0, 0.5); -moz-box-shadow: 2px 2px 4px 0px rgba(0, 0, 0, 0.5);box-shadow: 2px 2px 4px 0px rgba(0, 0, 0, 0.5);
text-align: center; cursor: pointer; line-height: 20px; position: absolute; width: 28px; height: 28px; background-color: #2d2d2d; background-image: url('img/control/zoomOut.png');
top: 155px;left: 0;}
.olControlZoomOutItemInactive:hover{background-image: url('img/control/zoomOut-hover.png'); -webkit-box-shadow: 1px 2px 3px 0px rgba(0, 0, 0, 0.5); -moz-box-shadow: 1px 2px 3px 0px rgba(0, 0, 0, 0.5); cursor: pointer; box-shadow: 1px 2px 3px 0px rgba(0, 0, 0, 0.5);}

/*********************  Tips *************************/
#tips{ }
#button-toggle3{position: absolute; left: 15px; top: 80px; width: 28px; height: 28px; border-radius: 2px; background-color: #2d2d2d; color:#ebb52d; font-family: Tahoma; font-weight: bolder; font-size: 25px; line-height: 28px; text-align: center;
-webkit-box-shadow: 2px 2px 4px 0px rgba(0, 0, 0, 0.5); -moz-box-shadow: 2px 2px 4px 0px rgba(0, 0, 0, 0.5); box-shadow: 2px 2px 4px 0px rgba(0, 0, 0, 0.5);}
#button-toggle3:hover{-webkit-box-shadow: 1px 2px 3px 0px rgba(0, 0, 0, 0.5); -moz-box-shadow: 1px 2px 3px 0px rgba(0, 0, 0, 0.5); box-shadow: 1px 2px 3px 0px rgba(0, 0, 0, 0.5); color: #fff;
}
.tips{display: none;}
.activated3{position: absolute; width: 338px; height: auto; border-radius: 0 0 2px 2px; left: 65px; top: 60px; padding: 10px; background-color: #ebb52d;display: block; color: #000;
-webkit-box-shadow: 2px 2px 4px 0px rgba(0, 0, 0, 0.5); -moz-box-shadow: 2px 2px 4px 0px rgba(0, 0, 0, 0.5); box-shadow: 2px 2px 4px 0px rgba(0, 0, 0, 0.5);z-index: 200000;}
.arrowtips{width: 0; height: 0; border-top: 15px solid transparent;border-right: 15px solid #ebb52d;border-bottom: 15px solid transparent; position: absolute; left: -15px; z-index: 200000; top: 20px;}

/********************************* For map popup ********************************************/
.popup {font-weight: bold;font-size: 21px;color:#2d2d2d;white-space: nowrap;}
.popup a{font-size: 13px;color:#05569a;display: inline;white-space: nowrap;}
.popup:hover a {color:#1585e3;}
.stars{margin: 0 0 0 2px;border: 0;padding:0;width: 13px;height: 12px;display: inline;}
.icon{margin-left: 10px; vertical-align: middle;}
.popup2 {font-size: 15px;color:#666666; line-height: 1.2}
.popup2 img{margin: 10px 10px 0 0;height: 60%;}
.popup3 {margin: 20px 10px 10px 0px;}
.popup5 {font-size: 13px;color:#000000;margin-top: 8px;}
.popup6 {font-size: 15px;color:#2d2d2d;margin-top: 8px;line-height: 19px;}
.popup7{font-size: 13px;color:#666666; margin: 10px 0 15px 0;}
.popup8 img{margin: 4px 4px 0 4px;height: 150px;padding: 5px 0 0 0;}

.info{background-color: #2d2d2d; padding: 2px 15px; color: #ebb52d; margin-right: 10px;
border-radius: 2px; 
box-shadow:inset 0 1px 1px rgba(255,255,255,.22),inset 0 -1px 1px rgba(0,0,0,.17),inset 0 10px 5px rgba(255,255,255,.12);}
a.info:hover{box-shadow: inset 0 -1px 1px rgba(255,255,255,.22),inset 0 1px 1px rgba(0,0,0,.17),inset 0 -10px 5px rgba(255,255,255,.12);}
#legend {text-align: center;vertical-align: middle;padding-left:2px;}
#legend2 {vertical-align:middle;padding-left:10px;display: inline;}
.legendmap {display: inline;vertical-align:middle;margin-left: 2px;padding-top: 10px;}
.legendmap2 {vertical-align: middle;display: inline;margin-left: 2px; }
img.legendmap2{vertical-align: middle;}
.olButton{vertical-align: middle; }

/*events*/
/*Music*/.cat1{font-family: Pacifico, cursive; font-size: 35px; color: rgba(225,90,36,1); float: right;margin-top: -50px !important; margin-right: 10px;text-transform: lowercase;
-webkit-transform: rotate(-10deg);-moz-transform: rotate(-10deg);-ms-transform: rotate(-10deg);-o-transform: rotate(-10deg);}
/*Dance*/.cat2{font-family: Pacifico, cursive; font-size: 35px; color: rgba(0,169,163,1); float: right;margin-top: -45px !important; margin-right: 10px;text-transform: lowercase;
-webkit-transform: rotate(-10deg);-moz-transform: rotate(-10deg);-ms-transform: rotate(-10deg);-o-transform: rotate(-10deg);}
/*Visual Art*/.cat3{font-family: Pacifico, cursive; font-size: 35px; color: rgba(145,190,75,1); float: right;margin-top: -50px !important; margin-right: 10px;text-transform: lowercase;
-webkit-transform: rotate(-10deg);-moz-transform: rotate(-10deg);-ms-transform: rotate(-10deg);-o-transform: rotate(-10deg);}
/*Theatre*/.cat4{font-family: Pacifico, cursive; font-size: 35px; color: rgba(222,30,121,1); float: right;margin-top: -50px !important; margin-right: 10px;text-transform: lowercase;
-webkit-transform: rotate(-10deg);-moz-transform: rotate(-10deg);-ms-transform: rotate(-10deg);-o-transform: rotate(-10deg);}
/*Cinema*/.cat5{font-family: Pacifico, cursive; font-size: 35px; color: rgba(117,76,36,1); float: right;margin-top: -50px !important; margin-right: 10px;text-transform: lowercase;
-webkit-transform: rotate(-10deg);-moz-transform: rotate(-10deg);-ms-transform: rotate(-10deg);-o-transform: rotate(-10deg);}
/*Festivities*/.cat6{font-family: Pacifico, cursive; font-size: 35px; color: rgba(102, 45, 130, 1); float: right;margin-top: -50px !important; margin-right: 10px;text-transform: lowercase;
-webkit-transform: rotate(-10deg);-moz-transform: rotate(-10deg);-ms-transform: rotate(-10deg);-o-transform: rotate(-10deg);}
/*Festivals*/.cat7{font-family: Pacifico, cursive; font-size: 35px; color: rgba(57,166,74,1); float: right;margin-top: -50px !important; margin-right: 10px;text-transform: lowercase;
-webkit-transform: rotate(-10deg);-moz-transform: rotate(-10deg);-ms-transform: rotate(-10deg);-o-transform: rotate(-10deg);}
/*Sports*/.cat10{font-family: Pacifico, cursive; font-size: 35px; color: rgba(222,28,36,1); float: right;margin-top: -50px !important; margin-right: 10px;text-transform: lowercase;
-webkit-transform: rotate(-10deg);-moz-transform: rotate(-10deg);-ms-transform: rotate(-10deg);-o-transform: rotate(-10deg);}
/*Fair*/.cat11{font-family: Pacifico, cursive; font-size: 35px; color: rgba(148,0,93,1); float: right;margin-top: -50px !important; margin-right: 10px;text-transform: lowercase;
-webkit-transform: rotate(-10deg);-moz-transform: rotate(-10deg);-ms-transform: rotate(-10deg);-o-transform: rotate(-10deg);}
/*Tours*/.cat12{font-family: Pacifico, cursive; font-size: 35px; color: rgba(251,176,59,1); float: right;margin-top: -50px !important; margin-right: 10px;text-transform: lowercase;
-webkit-transform: rotate(-10deg);-moz-transform: rotate(-10deg);-ms-transform: rotate(-10deg);-o-transform: rotate(-10deg);}
/*!!!!!!!!Carnival*/.cat13{font-family: Pacifico, cursive; font-size: 35px; color: rgba(222,30,121,1); float: right;margin-top: -50px !important; margin-right: 10px;text-transform: lowercase;
-webkit-transform: rotate(-10deg);-moz-transform: rotate(-10deg);-ms-transform: rotate(-10deg);-o-transform: rotate(-10deg);}
/*!!!!!!!!Motors*/.cat15{font-family: Pacifico, cursive; font-size: 35px; color: rgba(222,30,121,1); float: right;margin-top: -50px !important; margin-right: 10px;text-transform: lowercase; 
-webkit-transform: rotate(-10deg);-moz-transform: rotate(-10deg);-ms-transform: rotate(-10deg);-o-transform: rotate(-10deg);}
/******************************/




/************************************Smartphone - pixel ratio = 1 ***********************************************************/
@media only screen and (max-width: 479px) and (-webkit-min-device-pixel-ratio: 1), only screen and (max-width: 479px) and (-o-min-device-pixel-ratio: 10/10), only screen and (max-width: 479px) and (min--moz-device-pixel-ratio:1), only screen and (max-width: 479px) and (min-resolution: 1dppx) {
  html{ font-size: 1em; overflow: auto; min-width: 320px; max-width: 479px; min-height: 320px; }
  header{min-width: 320px; max-width: 479px; height: 55px;}
  .logo{position:absolute; ;width: 100px; font-size: 16px; color: #ebb52d; top: -5px; left: 50%; margin-left: -50px; text-shadow: 2px 2px 1px #000000;}
  h1{position:absolute;top: 20px;width: 100px;font-size: 10px; color: #8c8c8c;  margin-left: -45px; left: 50%; /*margin-top: -5px;*/ text-shadow: 2px 2px 1px #000000; }
  #menu1{position: absolute; top: 32px; left: 0; width: 360px; left: 50%; margin-left: -180px;}
  #menu1 a{font-size: 12px; margin-right: 1.5%; margin-left: 0px;}
  h2{display: inline;}
  #menu2{display: none;}
  #content{margin-top: 55px;}
  .foot-column {font-size: 10px; width: 30vw;}
  #cuba-logo img {width: 60%;}
  #access-map{margin-top: -9vw !important; margin-top: -50%;}
  #access-map input{font-size: 3vw; width: 25vw !important; height: 4.5vw !important;}
  .container-intro{padding: 0 20px 20px 20px;}
  .container-item{-webkit-column-count: 1; /* Chrome, Safari, Opera */
    -moz-column-count: 1; /* Firefox */
    column-count: 1;
    -webkit-column-gap: 30px; /* Chrome, Safari, Opera */
    -moz-column-gap: 30px; /* Firefox */
    column-gap: 30px;
    padding: 0 20px 20px 20px;
	font-size: 18px;
	line-height: 21px; }
#border.container-item{margin-bottom: 20px;}
  #tips{display: none;}
  #map{min-height: 320px; min-width: 320px; max-width: 479px;}
  #toolbar{width: 310px; left: 5px; top: 65px; }
  #toolbar div{float: left; margin-right: 5px;}
  #toolbar input {width: 90px; height: 18px;text-indent: 4px;background-image:none;}
  #searchcity{margin-right: -5px;}
  .displayAll{display: none;}
  .hideAll{display: none;}
  #logo-cub{position: absolute; left: 5px; z-index: 600000;}
  #logo-cub img{position:absolute;width: 75px; height: 29px; bottom: -10px; z-index: 600000; left: 5px;}
  #hurri-com{display: none;}
  #NOAA-legend{left: 0px;top: 60px;}
  .olControlZoomInItemInactive {display: none;}
  .olControlZoomInItemInactive:hover{display: none;}
  .olControlZoomOutItemInactive {display: none;}
  .olControlZoomOutItemInactive:hover{display: none;}
  ::-webkit-input-placeholder {color: #EBB52D;font-size: 11px;}
  :-moz-placeholder { /* Firefox 18- */color: #EBB52D; font-size: 11px;}
  ::-moz-placeholder {  /* Firefox 19+ */color: #EBB52D; font-size: 11px;}
  :-ms-input-placeholder { color: #EBB52D;font-size: 11px;}
  .ui-autocomplete-category{color: #ebb52d; font-weight: bolder; font-size: 15px; text-indent: 10px; margin-bottom: 5px; }
  .ui-autocomplete-subcat{color: #ebb52d; font-weight: bold; text-indent: 15px; font-size: 13px;}
  .ui-menu {max-width: 310px; font-size: 10px;height: 100px;}
  .ui-menu-item {font-size: 12px;}
  #OpenLayers_Control_Attribution_4{font-size: 10px;text-align: right; bottom: 3px; margin-right: 3px;}
  #OpenLayers_Control_Attribution_14{left: 3px; font-size: 9px; bottom: 1em;}
  .gm-style div {font-family: Calibri; /*font-weight: bold;*/ font-size: 12px;}
  .gm-style span, .gm-style label, .gm-style a{font-family: Calibri; /*font-weight: bold;*/ font-size: 12px;}
  .gm-style-cc{display: none;}
  .popup{font-size: 11px;}
  .popup a{font-size: 9px;}
  .popup:hover a{font-size: 9px;}
  .icon{width: 15px;}
  .popup2 {font-size: 11px;}
  .popup2 img{height: 50%;}
  .popup3 {font-size: 11px; margin: 5px 0px 5px 0px;}
  .popup5 {font-size: 11px;}
  .popup6 {font-size: 11px;}
  .popup7{font-size: 11px;}
  .popup8 img{height: 100px;}
  .info{font-size: 9px; margin-right: 10px; padding: 2px 10px;}
  #legend {text-align: center;vertical-align: middle;padding-left:2px;width: 15px;height: 15px;}
  #legend2 {vertical-align:middle;padding-left:10px;display: inline;}
  .legendmap {display: inline;vertical-align:middle;margin-left: 2px;}
  .legendmap2 {vertical-align: middle;display: inline;margin-left: 2px;}
  img.legendmap2{vertical-align: middle;}
  .stars{margin-left: 2px;}
  .olButton{vertical-align: middle; }

}
/**************** end****************************/
/************************************Smartphone - pixel ratio = 1.5 ***********************************************************/
@media only screen and (max-width: 479px) and (-webkit-min-device-pixel-ratio: 1.5), only screen and (max-width: 479px) and (-o-min-device-pixel-ratio: 15/10), only screen and (max-width: 479px) and (min--moz-device-pixel-ratio:1.5), screen and (max-width: 479px) and (min-resolution: 1.5dppx) {
  html{ font-size: 1em; overflow: auto; min-width: 320px; max-width: 479px; min-height: 320px; }
  header{min-width: 320px; max-width: 479px; height: 55px;}
  .logo{position:absolute; ;width: 100px; font-size: 16px; color: #ebb52d; top: -5px; left: 50%; margin-left: -50px; text-shadow: 2px 2px 1px #000000;}
  h1{position:absolute;top: 20px;width: 100px;font-size: 10px; color: #8c8c8c;  margin-left: -45px; left: 50%; /*margin-top: -5px;*/ text-shadow: 2px 2px 1px #000000; }
  #menu1{position: absolute; top: 32px; left: 0; width: 360px; left: 50%; margin-left: -180px;}
  #menu1 a{font-size: 12px; margin-right: 1.5%; margin-left: 0px;}
  h2{display: inline;}
  #menu2{display: none;}
  #content{margin-top: 54px;}
  .foot-column {font-size: 10px; width: 30vw;}
  #cuba-logo img {width: 60%;}
  #access-map{margin-top: -9vw !important;}
  #access-map input{font-size: 3vw; width: 25vw !important; height: 4.5vw !important;}
  .container-intro{padding: 0 20px 20px 20px;}
  .container-item{-webkit-column-count: 1; /* Chrome, Safari, Opera */
    -moz-column-count: 1; /* Firefox */
    column-count: 1;
    -webkit-column-gap: 30px; /* Chrome, Safari, Opera */
    -moz-column-gap: 30px; /* Firefox */
    column-gap: 30px;
    padding: 0 20px 20px 20px;
	font-size: 18px;
	line-height: 21px; }
  #border.container-item{margin-bottom: 20px;}
  #tips{display: none;}
  #map{min-height: 320px; min-width: 320px; max-width: 479px;}
  #toolbar{width: 310px; left: 5px; top: 65px; }
  #toolbar div{float: left; margin-right: 5px;}
  #toolbar input {width: 90px; height: 18px; text-indent: 4px;background-image:none;}
  #searchcity{margin-right: -5px;}
  .displayAll{display: none;}
  .hideAll{display: none;}
  #logo-cub{position: absolute; left: 5px; z-index: 600000;}
  #logo-cub img{position:absolute;width: 75px; height: 29px; bottom: -10px; z-index: 600000; left: 5px;}
  #hurri-com{display: none;}
  #NOAA-legend{left: 0px;top: 60px;}
  .olControlZoomInItemInactive {display: none;}
  .olControlZoomInItemInactive:hover{display: none;}
  .olControlZoomOutItemInactive {display: none;}
  .olControlZoomOutItemInactive:hover{display: none;}
  ::-webkit-input-placeholder {color: #EBB52D;font-size: 11px; }
  :-moz-placeholder { /* Firefox 18- */color: #EBB52D; font-size: 11px; }
  ::-moz-placeholder {  /* Firefox 19+ */color: #EBB52D; font-size: 11px; }
  :-ms-input-placeholder { color: #EBB52D;font-size: 11px;}
  .ui-autocomplete-category{color: #ebb52d; font-weight: bolder; font-size: 15px; text-indent: 10px; margin-bottom: 5px; }
  .ui-autocomplete-subcat{color: #ebb52d; font-weight: bold; text-indent: 15px; font-size: 13px;}
  .ui-menu {max-width: 310px; font-size: 10px;height: 100px;}
  .ui-menu-item {font-size: 12px;}
  #OpenLayers_Control_Attribution_4{font-size: 10px;text-align: right; bottom: 3px; margin-right: 3px;}
  #OpenLayers_Control_Attribution_14{left: 3px; font-size: 9px; bottom: 1em;}
  .gm-style div {font-family: Calibri; /*font-weight: bold;*/ font-size: 12px;}
  .gm-style span, .gm-style label, .gm-style a{font-family: Calibri; /*font-weight: bold;*/ font-size: 12px;}
  .gm-style-cc{display: none;}
  .popup{font-size: 12px;}
  .popup a{font-size: 9px;}
  .popup:hover a{font-size: 9px;}
  .popup2 {font-size: 10px;}
  .popup2 a {font-size: 11px;}
  .popup2:hover a {font-size: 11px;}
  .popup2 img{/*width: 75px;*/ height: 50%;}
  .popup3 {font-size: 10px; margin: 5px 0px 5px 0px;}
  .popup3 a {font-size: 10px;}
  .popup3:hover a {font-size: 10px;}
  .popup4 {font-size: 12px;}
  .popup4 a {font-size: 10px;}
  .popup4:hover a {font-size: 10px;}
  .popup5 {font-size: 10px;}
  .popup6 {font-size: 10px;}
  .popup7{font-size: 10px;}
  #legend {text-align: center;vertical-align: middle;padding-left:2px;width: 15px;height: 15px;}
  #legend2 {vertical-align:middle;padding-left:10px;display: inline;}
  .legendmap {display: inline;vertical-align:middle;margin-left: 2px;}
  .legendmap2 {vertical-align: middle;display: inline;margin-left: 2px;}
  img.legendmap2{vertical-align: middle;}
  .stars{margin-left: 2px;}
  .olButton{vertical-align: middle;}

}
/**************** end****************************/


/************** smatphone landscape / tablets - ratio 1 ************************************/
@media screen and (max-width: 600px) and (min-width: 480px) and (-webkit-min-device-pixel-ratio: 1), screen and (max-width: 600px) and (min-width: 480px) and (-o-min-device-pixel-ratio: 10/10), screen and (max-width: 600px) and (min-width: 480px) and (min--moz-device-pixel-ratio:1){
  html{ font-size: 1em; overflow: auto; min-width: 480px; max-width: 600px; min-height: 295px; }
  header{min-width: 480px; max-width: 600px; height: 40px;}
  .logo{position:absolute; ;width: 100px; font-size: 15px; color: #ebb52d; top: 0; margin-top: 7px; text-shadow: 2px 2px 1px #000000;}
  h1{position:absolute;top: 22px;width: 100px;font-size: 10px; color: #8c8c8c;  margin-left: 17px; /*margin-top: -5px;*/ text-shadow: 2px 2px 1px #000000; }
  #menu1{position: absolute; top: 10px; left: 125px; width: 360px; }
  #menu1 a{font-size: 12px; margin-right: 1.5%; margin-left: 0px;}
  h2{display: inline;}
  #menu2{display: none;}
  #content{margin-top: 40px;}
  .foot-column {font-size: 11px; width: 30vw;}
  #cuba-logo img {width: 80%;}
  #access-map{margin-top: -7vw !important;}
  #access-map input{font-size: 2vw}
  .container-intro{padding: 0 20px 20px 20px;}
  .container-item{-webkit-column-count: 1; /* Chrome, Safari, Opera */
    -moz-column-count: 1; /* Firefox */
    column-count: 1;
    -webkit-column-gap: 30px; /* Chrome, Safari, Opera */
    -moz-column-gap: 30px; /* Firefox */
    column-gap: 30px;
    padding: 0 20px 20px 20px;
	font-size: 18px;
	line-height: 21px; }
#border.container-item{margin-bottom: 20px;}
  #tips{display: none;}
  #map{min-height: 295px; min-width: 480px; max-width: 600px;}
  #toolbar{width: 310px; left: 5px; top: 56px; }
  #toolbar div{float: left; margin-right: 5px;}
  #toolbar input {width: 90px; height: 18px;text-indent: 2px; background-image: none;}
  #searchcity{margin-right: -5px;}
  .displayAll{display: none;}
  .hideAll{display: none;}
  #logo-cub{position: absolute; left: 5px; z-index: 600000;}
  #logo-cub img{position:absolute;width: 75px; height: 29px; bottom: -10px; z-index: 600000; left: 5px;}
  #hurri-com{display: none;}
  #NOAA-legend{left: 0px;top: 39px; }
  .olControlZoomInItemInactive {display: none;}
  .olControlZoomInItemInactive:hover{display: none;}
  .olControlZoomOutItemInactive {display: none;}
  .olControlZoomOutItemInactive:hover{display: none;}
  ::-webkit-input-placeholder {color: #EBB52D;font-size: 11px; }
  :-moz-placeholder { /* Firefox 18- */color: #EBB52D; font-size: 11px; }
  ::-moz-placeholder {  /* Firefox 19+ */color: #EBB52D; font-size: 11px; }
  :-ms-input-placeholder { color: #EBB52D;font-size: 11px;}
  .ui-autocomplete-category{color: #ebb52d; font-weight: bolder; font-size: 15px; text-indent: 10px; margin-bottom: 5px; }
  .ui-autocomplete-subcat{color: #ebb52d; font-weight: bold; text-indent: 15px; font-size: 13px;}
  .ui-menu {max-width: 310px; font-size: 10px;height: 100px;}
  .ui-menu-item {font-size: 12px;}
  #OpenLayers_Control_Attribution_4{font-size: 10px;bottom: 0.5em;}
  #OpenLayers_Control_Attribution_14{left: 3px; font-size: 9px; bottom: 0.5em;}
  .gm-style div {font-size: 12px;}
  .gm-style span, .gm-style label, .gm-style a{font-size: 12px;}
  .gm-style-cc{display: none;}
  .popup{font-size: 13px;}
  .popup a{font-size: 9px;}
  .popup:hover a{font-size: 9px;}
  .icon{width: 20px;}
  .info{margin-right: 5px;}
  .popup2 {font-size: 11px;}
  .popup2 img{height: 55%;}
  .popup3 {font-size: 11px; margin: 5px 0px 5px 0px;}
  .popup5 {font-size: 11px;}
  .popup6 {font-size: 11px;}
  .popup7{font-size: 11px; min-width: 200px;}
  .popup8 img{margin: 4px 4px 0 4px;height: 100px;padding: 5px 0 0 0;}
  #legend2 {padding-left:10px;}
  .legendmap {margin-left: 2px;}
  .legendmap2 {margin-left: 2px;}
  img.legendmap2{vertical-align: middle;}
  .stars{margin-left: 2px;}
  .olButton{vertical-align: middle; }

}
/****************************** End *************************************/

/************** smatphone landscape / tablets - ratio 1.5 ************************************/
@media screen and (max-width: 600px) and (min-width: 480px) and (-webkit-min-device-pixel-ratio: 1.5), screen and (max-width: 600px) and (min-width: 480px) and (-o-min-device-pixel-ratio: 15/10), screen and (max-width: 600px) and (min-width: 480px) and (min--moz-device-pixel-ratio:1.5){
  html{min-width: 480px; max-width: 600px; min-height: 295px; }
  header{min-width: 480px; max-width: 600px; height: 36px;}
  .logo{width: 100px; font-size: 16px;left: -5px;}
  h1{top: 20px;width: 100px;font-size: 10px; margin-left: 5px;}
  #menu1{top: 8px; left: 120px; width: 360px; }
  #menu1 a{font-size: 12px; margin-right: 1.5%; margin-left: 0px;}
  h2{display: inline;}
  #menu2{display: none;}
  #access-map{margin-top: -7vw !important;}
  #access-map input{font-size: 2vw}
  #content{margin-top: 36px;}
  .foot-column {font-size: 11px; width: 30vw;}
  #cuba-logo img {width: 80%;}
  .container-intro{padding: 0 20px 20px 20px;}
  .container-item{-webkit-column-count: 1; /* Chrome, Safari, Opera */
    -moz-column-count: 1; /* Firefox */
    column-count: 1;
    -webkit-column-gap: 30px; /* Chrome, Safari, Opera */
    -moz-column-gap: 30px; /* Firefox */
    column-gap: 30px;
    padding: 0 20px 20px 20px;
	font-size: 18px;
	line-height: 21px; }
#border.container-item{margin-bottom: 20px;}
  #tips{display: none;}
  #map{min-height: 295px; min-width: 480px; max-width: 600px;}
  #toolbar{width: 310px; left: 5px; top: 56px; }
  #toolbar div{float: left; margin-right: 5px;}
  #toolbar input {width: 90px; height: 18px;text-indent: 4px;background-image:none;}
  #searchcity{margin-right: -5px;}
  .displayAll{display: none;}
  .hideAll{display: none;}
  #logo-cub{position: absolute; left: 5px; z-index: 600000;}
  #logo-cub img{position:absolute;width: 75px; height: 29px; bottom: -10px; z-index: 600000; left: 5px;}
  #hurri-com{display: none;}
  #NOAA-legend{left: 0px;top: 39px; }
  .olControlZoomInItemInactive {display: none;}
  .olControlZoomInItemInactive:hover{display: none;}
  .olControlZoomOutItemInactive {display: none;}
  .olControlZoomOutItemInactive:hover{display: none;}
  ::-webkit-input-placeholder {color: #EBB52D;font-size: 11px; }
  :-moz-placeholder { /* Firefox 18- */color: #EBB52D; font-size: 11px; }
  ::-moz-placeholder {  /* Firefox 19+ */color: #EBB52D; font-size: 11px; }
  :-ms-input-placeholder { color: #EBB52D;font-size: 11px;}
  .ui-autocomplete-category{color: #ebb52d; font-weight: bolder; font-size: 15px; text-indent: 10px; margin-bottom: 5px; }
  .ui-autocomplete-subcat{color: #ebb52d; font-weight: bold; text-indent: 15px; font-size: 13px;}
  .ui-menu {max-width: 310px; font-size: 10px; height: 100px;}
  .ui-menu-item {font-size: 12px;}
  #OpenLayers_Control_Attribution_4{font-size: 10px;bottom: 0.5em;}
  #OpenLayers_Control_Attribution_14{left: 3px; font-size: 9px; bottom: 0.5em;}
  .gm-style div {font-size: 12px;}
  .gm-style span, .gm-style label, .gm-style a{font-size: 12px;}
  .gm-style-cc{display: none;}
  .popup{font-size: 13px;}
  .popup a{font-size: 9px;}
  .popup:hover a{font-size: 9px;}
  .icon{width: 20px;}
  .info{margin-right: 5px;}
  .popup2 {font-size: 11px;}
  .popup2 img{height: 55%;}
  .popup3 {font-size: 11px; margin: 5px 0px 5px 0px;}
  .popup5 {font-size: 11px;}
  .popup6 {font-size: 11px;}
  .popup7{font-size: 11px; min-width: 200px;}
  .popup8 img{margin: 4px 4px 0 4px;height: 100px;padding: 5px 0 0 0;}
  #legend2 {padding-left:10px;}
  .legendmap {margin-left: 2px;}
  .legendmap2 {margin-left: 2px;}
  img.legendmap2{vertical-align: middle;}
  .stars{margin-left: 2px;}
  .olButton{vertical-align: middle; }

}
/****************************** End *************************************/

/************** tablets - pixel ratio 1 ************************************/
@media screen and (max-width: 800px) and (min-width: 601px) and (-webkit-min-device-pixel-ratio: 1), screen and (max-width: 800px) and (min-width: 601px) and (-o-min-device-pixel-ratio: 10/10), screen and (max-width: 800px) and (min-width: 601px) and (min--moz-device-pixel-ratio:1) {
  html{min-width: 601px; max-width: 800px; min-height: 480px; }
  header{min-width: 601px; max-width: 800px; height: 45px;}
  .logo{width: 100px; font-size: 17px; color: #ebb52d; top: 0; margin-top:7px ;}
  h1{top: 25px;width: 120px;font-size: 11px; color: #8c8c8c;  margin-left: 20px;}
  #menu1{top: 13px; left: 150px; width: 430px; }
  #menu1 a{font-size: 13px; margin-right: 3%; margin-left: 0px;}
  #menu2{display: none;}
  #social{display: none;}
  #content{margin-top: 45px; min-width: 601px;}
  .container-intro{padding: 0 20px 20px 20px;}
  .container-item{-webkit-column-count: 2; /* Chrome, Safari, Opera */
    -moz-column-count: 2; /* Firefox */
    column-count: 2;
    -webkit-column-gap: 30px; /* Chrome, Safari, Opera */
    -moz-column-gap: 30px; /* Firefox */
    column-gap: 30px;
    padding: 0 20px 20px 20px;
	font-size: 18px;
	line-height: 21px; }
#border.container-item{margin-bottom: 20px;}
  /*********** tips ***********/
#button-toggle3{left: 10px; top: 65px; width: 22px; height: 22px; font-size: 20px; line-height: 22px;}
.tips{display: none;}
.activated3{width: 300px; height: auto; left: 50px; top: 45px; padding: 10px;}
.arrowtips{width: 0; height: 0; border-top: 10px solid transparent;border-right: 10px solid #ebb52d;border-bottom: 10px solid transparent; position: absolute; left: -10px; z-index: 200000; top: 20px;}
/****************************/
  #map{min-height: 480px; min-width: 601px; max-width: 800px;}
  #toolbar{width: 500px; left: 50px; top: 65px; }
  #toolbar div{float: left; margin-right: 5px;}
  #toolbar input {width: 140px; height: 22px;text-indent: 4px; background-image:none;}
  #searchcity{margin-right: -5px;}
  .displayAll{display: none;}
  .hideAll{display: none;}
  #logo-cub{position: absolute; left: 5px; z-index: 600000;}
  #logo-cub img{position:absolute;width: 75px; height: 29px; bottom: -10px; z-index: 600000; left: 5px;}
  #hurri-com{display: none;}
  #NOAA-legend{left: 100px;top: 43px;}
  .olControlZoomInItemInactive {display: none;}
  .olControlZoomInItemInactive:hover{display: none;}
  .olControlZoomOutItemInactive {display: none;}
  .olControlZoomOutItemInactive:hover{display: none;}
  ::-webkit-input-placeholder {color: #EBB52D;font-size: 12px; }
  :-moz-placeholder { /* Firefox 18- */color: #EBB52D; font-size: 12px; }
  ::-moz-placeholder {  /* Firefox 19+ */color: #EBB52D; font-size: 12px; }
  :-ms-input-placeholder { color: #EBB52D;font-size: 12px;}
  .ui-autocomplete-category{color: #ebb52d; font-weight: bolder; font-size: 16px; text-indent: 10px; margin-bottom: 5px; }
  .ui-autocomplete-subcat{color: #ebb52d; font-weight: bold; text-indent: 15px; font-size: 14px;}
  .ui-menu {max-width: 330px; font-size: 11px; height: 120px;}
  .ui-menu-item {font-size: 13px;}
  #OpenLayers_Control_Attribution_4{font-size: 10px;bottom: 0.5em;}
  #OpenLayers_Control_Attribution_14{left: 3px; font-size: 9px; bottom: 0.5em;}
  .gm-style div {font-size: 12px;}
  .gm-style span, .gm-style label, .gm-style a{font-size: 12px;}
  .gm-style-cc{display: none;}
  .popup{font-size: 13px;}
  .popup a{font-size: 9px;}
  .popup:hover a{font-size: 9px;}
  .icon{width: 20px;}
  .info{margin-right: 5px;}
  .popup2 {font-size: 11px;}
  .popup2 img{height: 55%;}
  .popup3 {font-size: 11px; margin: 5px 0px 5px 0px;}
  .popup5 {font-size: 11px;}
  .popup6 {font-size: 11px;}
  .popup7{font-size: 11px; min-width: 200px;}
  .popup8 img{margin: 4px 4px 0 4px;height: 100px;padding: 5px 0 0 0;}
  #legend2 {padding-left:10px;}
  .legendmap {margin-left: 2px;}
  .legendmap2 {margin-left: 2px;}
  img.legendmap2{vertical-align: middle;}
  .stars{margin-left: 2px;}
  .olButton{vertical-align: middle; }

}
/*************End***********************************/
/************** tablets - pixel ratio 1.5 ************************************/
@media screen and (max-width: 800px) and (min-width: 601px) and (-webkit-min-device-pixel-ratio: 1.5), screen and (max-width: 800px) and (min-width: 601px) and (-o-min-device-pixel-ratio: 15/10), screen and (max-width: 800px) and (min-width: 601px) and (min--moz-device-pixel-ratio:1.5) {
  html{min-width: 601px; max-width: 800px; min-height: 480px; }
  header{min-width: 601px; max-width: 800px; height: 45px;}
  .logo{width: 100px; font-size: 17px; color: #ebb52d; top: 0; margin-top:7px ;}
  h1{top: 25px;width: 120px;font-size: 11px; color: #8c8c8c;  margin-left: 20px;}
  #menu1{top: 13px; left: 150px; width: 430px; }
  #menu1 a{font-size: 13px; margin-right: 3%; margin-left: 0px;}
  #menu2{display: none;}
  #social{display: none;}
  #content{margin-top: 45px; min-width: 601px;}
  .container-intro{padding: 0 20px 20px 20px;}
  .container-item{-webkit-column-count: 2; /* Chrome, Safari, Opera */
    -moz-column-count: 2; /* Firefox */
    column-count: 2;
    -webkit-column-gap: 30px; /* Chrome, Safari, Opera */
    -moz-column-gap: 30px; /* Firefox */
    column-gap: 30px;
    padding: 0 20px 20px 20px;
	font-size: 18px;
	line-height: 21px; }
#border.container-item{margin-bottom: 20px;}
  /*********** tips ***********/
#button-toggle3{left: 10px; top: 65px; width: 22px; height: 22px; font-size: 20px; line-height: 22px;}
.tips{display: none;}
.activated3{width: 300px; height: auto; left: 50px; top: 45px; padding: 10px;}
.arrowtips{width: 0; height: 0; border-top: 10px solid transparent;border-right: 10px solid #ebb52d;border-bottom: 10px solid transparent; position: absolute; left: -10px; z-index: 200000; top: 20px;}
/****************************/
  #map{min-height: 480px; min-width: 601px; max-width: 800px;}
  #toolbar{width: 500px; left: 50px; top: 65px; }
  #toolbar div{float: left; margin-right: 5px;}
  #toolbar input {width: 140px; height: 22px;text-indent: 4px; background-image:none;}
  #searchcity{margin-right: -5px;}
  .displayAll{display: none;}
  .hideAll{display: none;}
  #logo-cub{position: absolute; left: 5px; z-index: 600000;}
  #logo-cub img{position:absolute;width: 75px; height: 29px; bottom: -10px; z-index: 600000; left: 5px;}
  #hurri-com{display: none;}
  #NOAA-legend{left: 100px;top: 43px;}
  .olControlZoomInItemInactive {display: none;}
  .olControlZoomInItemInactive:hover{display: none;}
  .olControlZoomOutItemInactive {display: none;}
  .olControlZoomOutItemInactive:hover{display: none;}
  ::-webkit-input-placeholder {color: #EBB52D;font-size: 12px; }
  :-moz-placeholder { /* Firefox 18- */color: #EBB52D; font-size: 12px; }
  ::-moz-placeholder {  /* Firefox 19+ */color: #EBB52D; font-size: 12px; }
  :-ms-input-placeholder { color: #EBB52D;font-size: 12px;}
  .ui-autocomplete-category{color: #ebb52d; font-weight: bolder; font-size: 16px; text-indent: 10px; margin-bottom: 5px; }
  .ui-autocomplete-subcat{color: #ebb52d; font-weight: bold; text-indent: 15px; font-size: 14px;}
  .ui-menu {max-width: 330px; font-size: 11px; height: 120px;}
  .ui-menu-item {font-size: 13px;}
  #OpenLayers_Control_Attribution_4{font-size: 10px;bottom: 0.5em;}
  #OpenLayers_Control_Attribution_14{left: 3px; font-size: 9px; bottom: 0.5em;}
  .gm-style div {font-size: 12px;}
  .gm-style span, .gm-style label, .gm-style a{font-size: 12px;}
  .gm-style-cc{display: none;}
  .popup{font-size: 13px;}
  .popup a{font-size: 9px;}
  .popup:hover a{font-size: 9px;}
  .icon{width: 20px;}
  .info{margin-right: 5px;}
  .popup2 {font-size: 11px;}
  .popup2 img{height: 55%;}
  .popup3 {font-size: 11px; margin: 5px 0px 5px 0px;}
  .popup5 {font-size: 11px;}
  .popup6 {font-size: 11px;}
  .popup7{font-size: 11px; min-width: 200px;}
  .popup8 img{margin: 4px 4px 0 4px;height: 100px;padding: 5px 0 0 0;}
  #legend2 {padding-left:10px;}
  .legendmap {margin-left: 2px;}
  .legendmap2 {margin-left: 2px;}
  img.legendmap2{vertical-align: middle;}
  .stars{margin-left: 2px;}
  .olButton{vertical-align: middle; }

}
/*************End***********************************/

/**************tablets big/ notbook - pixel ratio 1 ************************************/
@media screen and (max-width: 1023px) and (min-width: 801px) and (-webkit-min-device-pixel-ratio: 1), screen and (max-width: 1023px) and (min-width: 801px) and (-o-min-device-pixel-ratio: 10/10),screen and (max-width: 1023px) and (min-width: 801px) and (min--moz-device-pixel-ratio:1){
html{min-width: 801px; max-width: 1024px; min-height: 500px; }
header{min-width: 801px; max-width: 1024px; height: 50px;}
.logo{width: 100px; font-size: 19px;top: 0;margin-top: 7px;}
h1{width: 120px;font-size: 13px;margin-left: 15px;}
#menu1{top: 14px; left: 160px; width: 490px; }
#menu1 a{font-size: 15px; margin-right: 3%; margin-left: 0px;}
#menu2 h2{margin-right: -100px; margin-top:8px; }
#social{display: none;}
.container-item{-webkit-column-count: 2; /* Chrome, Safari, Opera */
    -moz-column-count: 2; /* Firefox */
    column-count: 2;
    -webkit-column-gap: 30px; /* Chrome, Safari, Opera */
    -moz-column-gap: 30px; /* Firefox */
    column-gap: 30px;
    padding: 0 20px 20px 20px;
	font-size: 18px;
	line-height: 21px; }
#border.container-item{margin-bottom: 20px;}
#content{margin-top: 50px; min-width: 801px;}
.container-intro{padding: 0 20px 20px 20px;}
/*********** tips ***********/
#tips{}
#button-toggle3{left: 10px; top: 70px; width: 22px; height: 22px; font-size: 20px; line-height: 22px; }
#button-toggle3:hover{
}
.tips{display: none;}
.activated3{width: 300px;left: 50px; top: 50px; padding: 10px;}
.arrowtips{left: -10px; top: 15px;}
/****************************/
#map{min-height: 500px; min-width: 801px; max-width: 1024px;}
#toolbar{width: 600px; left: 50px; top: 70px;}
#toolbar div{margin-right: 7px;}
#toolbar input {width: 170px; height: 22px; text-indent: 4px;background-image:none;}
#searchcity{margin-right: -5px;}
.displayAll{font-size: 10px;width:82px;height: 22px;top: 70px;}
.hideAll{font-size: 10px;width:82px;height: 22px;top: 70px; right: 36px;}
#logo-cub{left: 5px;}
#logo-cub img{position:absolute;width: 75px; height: 29px; bottom: -10px; z-index: 600000; left: 5px;}
#hurri-com{display: none;}
#NOAA-legend{left: 50px;top: 43px; }
.olControlZoomInItemInactive {display: none;}
.olControlZoomInItemInactive:hover{display: none;}
.olControlZoomOutItemInactive {display: none;}
.olControlZoomOutItemInactive:hover{display: none;}
::-webkit-input-placeholder {font-size: 12px;}
:-moz-placeholder {font-size: 12px;}
::-moz-placeholder {font-size: 12px;}
:-ms-input-placeholder {font-size: 12px;}
.ui-autocomplete-category{font-size: 17px;}
.ui-autocomplete-subcat{font-size: 14px;}
.ui-menu {max-width: 400px; font-size: 12px; height: 200px;}
.ui-menu-item {font-size: 14px;}
#OpenLayers_Control_Attribution_4{font-size: 12px;}
#OpenLayers_Control_Attribution_14{left: 3px; font-size: 9px;}
.gm-style div { font-size: 12px;}
.gm-style span, .gm-style label, .gm-style a{font-size: 12px;}
.gm-style-cc{display: none;}
.popup{font-size: 13px;}
.popup a{font-size: 9px;}
.popup:hover a{font-size: 9px;}
.popup2 {font-size: 11px;}
.popup2 img{height: 55%;}
.popup3 {margin: 5px 0px 5px 0px;}
.popup5 {font-size: 11px;}
.popup6 {font-size: 13px;}
.popup7{font-size: 11px;}
.popup8 img{height: 100px;}
.info {margin-right: 5px;font-size: 11px;}
#legend {width: 18px;height: 18px;}


}

/**************notbook/small PC screen - pixel ratio 1 ************************************/
@media screen and (max-width: 1134px) and (min-width: 1024px) and (-webkit-min-device-pixel-ratio: 1), screen and (max-width: 1134px) and (min-width: 1024px) and (-o-min-device-pixel-ratio: 10/10),screen and (max-width: 1134px) and (min-width: 1024px) and (min--moz-device-pixel-ratio:1){
html{ min-width: 1024px; max-width: 1134px;  }
header{ min-width: 1024px;}
#content{min-width: 1024px;}
#map{min-height: 600px; min-width: 1024px; max-width: 1134px;}
#toolbar{width: 700px; left: 100px;}
#toolbar div{margin-right: 10px;}
#toolbar input {width: 200px;}
#searchcity{margin-right: -10px;}
#logo-cub{left: 5px;}
#hurri-com{display: none;}
#NOAA-legend{left: 160px; top: 67px;}
.ui-autocomplete-category{font-size: 19px;}
.ui-autocomplete-subcat{font-size: 17px;}
.ui-menu {max-width: 500px; font-size: 13px; height: auto; max-height: 500px;}
.ui-menu-item {font-size: 17px;}
#OpenLayers_Control_Attribution_4{}
#OpenLayers_Control_Attribution_14{left: 5px;}
.gm-style div {font-size: 13px;}
.gm-style span, .gm-style label, .gm-style a{font-size: 13px;}
.popup{font-size: 21px;}
.popup2 {font-size: 15px;}
.popup2 img{height: 55%;}
.popup3 {margin: 5px 0px 5px 0px;}
.popup5 {font-size: 11px;}
.popup6 {font-size: 15px;}
.popup7{font-size: 11px;}
.popup8{height: 100px;}
.info{}
a.info:hover{box-shadow: inset 0 -1px 1px rgba(255,255,255,.22),inset 0 1px 1px rgba(0,0,0,.17),inset 0 -10px 5px rgba(255,255,255,.12);}
#legend {width: 22px;height: 22px;}



}