html, body {
	height: 100%;
} 

body {
	box-sizing: border-box !important;
	-moz-box-sizing: border-box !important; /* Firefox */
	-webkit-box-sizing:border-box !important;
	margin: 0 !important;
	font-family: Helvetica Neue, Helvetica, sans-serif;
	position: relative;
	background-image: url('../images/brushed.png') !important;
}
b {
	font-weight: normal;
}
h1,h2,h3,h4,h5,h6 {
	margin: 0;
}
h2 {
	font-size: 24px;
	line-height: 32px;
	
}
a {
	text-decoration: none;
	font-size: 14px;
}


ul {
	text-shadow: none;
}
ul li {
	list-style: none;
	display: inline-block;
}


table {
	width: 100%;
	border-collapse: collapse;
	text-align: center;
	margin-bottom: 2%;
}
.right {
	float: right;
}
.left {
	float: left;
}
.clickable {
	cursor: pointer;
}





.inner-wrap {
	padding: 10px;
	overflow: auto;
	position: relative;
}

.double-wrap {
	overflow: auto;
}

.fixed-table-headers {
	margin-left: 95px;
}
img.weather-summary {
	width: 110px;
}
img.uv-index {
	width: 30px;
}
/*************************************************************************
		HEADER
*************************************************************************/

#main-header {
	background: rgba(255,255,255,0.5);
	padding: 12px 10px;
	border-bottom: 1px solid #959595;
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 99;
	background: #272323;
	color: #DDD;
}

#main-header h1,#main-header h2  {
	font-size: 18px;
	line-height: 18px; /* Makes sure the backround logo image is the same height as the text */
}

#main-header .header-element {
	display: inline-block;	
}
#main-header #menu-button {
	padding: 0 10px 0 0;
}
#main-header .logo {
	background: url('../images/logo-small.png') no-repeat;
	padding-left: 40px;
	background-size: auto 100%;
}

/*************************************************************************
		SIDE NAV
*************************************************************************/

#side-nav .ui-slider-switch { 
	width: 15em;
	margin: 0.1em 0;
}
#side-nav {
    position: fixed;
    top: 0;
    height: 100%;
    z-index: 999;
    width: 239px;
    overflow-x: none;
    overflow-y: auto;
    background: rgba(255,255,255,0.5);
    background: #272323;
    border-right: 1px solid #959595;
	padding: 10px;
    left: -260px;
    right: auto;
}

/*************************************************************************
		CONTENT
*************************************************************************/

#wrapper {
	height: 100%;
	position: relative;
	padding: 44px 0 40px 0; /* SAME AS HEADER AND FOOTER HEIGHT */
}
#widget-container {
	margin: 10px;
}

/*************************************************************************
		FOOTER
*************************************************************************/

#main-footer {
	position: fixed;
	bottom: 0;
	width: 100%;
	z-index: 99;
	background: #272323;
	color: #DDD;
	border-top: 1px solid #959595;
}
#main-footer a, #main-footer a:visited, #main-footer a:hover, #main-footer a:active {
  color: inherit !important;
}
.footer-bar {
	margin: 10px 0;
	padding: 0 10px;
}
.footer-bar li {
	padding: 0 3px;
}
.footer-bar li:last-child {
	padding: 3px;
	font-size: 14px;
	font-weight: bold;	
}
.footer-bar li i {
	font-size: 20px;
}
.twitter, .linked-in, .blog {

	/* ANIMATIONS */
    -webkit-animation-duration: 1s;
    -webkit-animation-delay: 0s;
    -webkit-animation-iteration-count: 1;
    -moz-animation-duration: 1s;
    -moz-animation-delay: 0s;
    -moz-animation-iteration-count: 1;
    -ms-animation-duration: 1s;
    -ms-animation-delay: 0s;
    -ms-animation-iteration-count: 1;
    -o-animation-duration: 1s;
    -o-animation-delay: 0s;
    -o-animation-iteration-count: 1;

    /* BACKGROUND COLOUR TRANSITION*/
    transition:.3s;
	-webkit-transition:.3s;
	-moz-transition:.3s;
	-ms-transition:.3s;
	-o-transition:.3s;
}
.linked-in:hover {
	color: #287BBC;
}
.twitter:hover {
	color: #0084B4;
}
.blog:hover {
	color: #AE81F9;
}



/*************************************************************************
		JQUERY MOBILE OVERRIDES
*************************************************************************/

.ui-collapsible-inset {
	margin: 0 !important;
}
.ui-body-c, .ui-overlay-c {
	text-shadow: none !important;
}

/*************************************************************************
		INCREMENTAL TIDAL CHART
*************************************************************************/

#tidal-chart {
	height: 300px;
	overflow: hidden;
}

/*************************************************************************
		GRID (12 UNITS WIDE AT NORMAL RES)
*************************************************************************/

.grid-3 {
	width: 24.99%;
}
.grid-6 {
	width: 49.99%;
}
.grid-12 {
	width: 99.99%;
}




/*************************************************************************
		CONTENT?
*************************************************************************/

section#content {
	position: relative;
}
#container {
	min-height: 600px;
}
.weather-info h3 img {
	height: 20px;
	padding-right: 5px;
}

.time-icon {
	position: relative;
	
}
.time-icon:after {
	content : "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; 
    opacity: 0.6;
}
.sunrise:after {
	background: url("../images/Sunrise.PNG") no-repeat;
	background-position: -5px -20px;
}
.day:after {
	background: url("../images/Day.PNG") no-repeat;
	background-position: 0px -25px;
	
}
.sunset:after {
	background: url("../images/Sunset.PNG") no-repeat;
	background-position: -7px -32px;
}
.night:after {
	background: url("../images/Night.PNG") no-repeat;
	background-position: 0px 0px;
}





/* ------------------------------------------- GENERAL TABLE STYLING */
section.weather-info {
	position: relative;
}
section.weather-info.weather-table {
	position: relative;
}
section.weather-info .outer {
	overflow-x: scroll;
	margin-left: 100px;
}

/*************************************************************************
		TABLES
*************************************************************************/

table.forecast-table {
	text-shadow: none;
	text-align: center;
	table-layout: fixed;
	width: 10%; /* This is a stupid hack to make sure the table floats left */
	margin: 0;
}
table.forecast-table th img {
	width: 100%;
}
#yr-no table.forecast-table td img {
	width: 25px;
}
table.forecast-table td, table.forecast-table th {
	font-size: 13px;
	background-color: #f3f3f3 ; 
	padding: 6px 0;
}
table.forecast-table tr:first-child td {
	padding: 6px 3px;
}
table.forecast-table th {
	width: 85px;
	padding-right: 10px;
	text-align: right;
	position: absolute;
	left: 20px; /* Would be 0 but postion:relative is attached to the complete outside box */;
}
table.forecast-table  td {
	width: 24px;
}
table.forecast-table tr.row-time td {
	padding: 0;
}
table.forecast-table tr.row-time td div.innerWrapper {
	padding: 6px 0;
}



/*************************************************************************
		WINDGURU OVERRIDES
*************************************************************************/

.wgfcst table {
	width: 10%;
}
.wgfcst table.forecast-ram {
	border: none !important;
}
.wgfcst table.forecast-ram > tbody > tr > td {
	padding: 0;
}
.wgfcst table.forecast:first-child {
	display: none;
}



/* ------------------------------------------- JERSEY MET */

article.forecast-text {
	width: 49%;
	float: left;
}
article.forecast-text img {
	width: 110px;
	float: left;
	margin: 0 15px 0 0;
}
article.forecast-text h4 {
	margin-bottom: 5px;
}

article.forecast-text:nth-child(odd) {
	margin-right: 2%;
}
article.forecast-text table {
	float: left;
	text-align: left;
	table-layout: fixed;
}
article.forecast-text table th {
	padding-right: 10px;
	text-align: right;
	white-space: nowrap;
	width: 110px;
}
article.forecast-text table td {
	padding: 6px;
}
article.forecast-text table tr:nth-child(odd), table.forecast-5day tr:nth-child(odd) {
	background-color: hsla(210,100%,95%,1);
}
article.forecast-text table tr:nth-child(even) {
	background-color: hsla(210,100%,90%,1);
}

/*************************************************************************
		FORECAST.IO 7DAY
*************************************************************************/

.forecast-icon {
	width: 100%;
	height: auto;
}



/* ------------------------------------------- Tides */

#tides article {
	width: 23.5%;
	float: left;
	margin-right: 2%; 
	text-align: center;
	font-size: 13px;
	text-shadow: none;
}
#tides table {
	table-layout: fixed;
	width: 100%;
}
#tides article:nth-child(4n) {
	margin-right: 0; 
}
#tides table th, #tides table td {
	padding: 5px;
}
#tides table tr:nth-child(odd) {
	background-color: hsla(210,100%,95%,1);
}
#tides table tr:nth-child(even) {
	background-color: hsla(210,100%,90%,1);
}

/* ------------------------------------------- TIDAL STREAMS */

#tidal-streams img {
	width: 100%;
	min-width: 300px;
}


/* ------------------------------------------- GOOGLE MAPS */
.overlay-time {
	position: absolute;
	top: 20px;
	left: 100px;
	z-index: 2;
	background: white;
	padding: 0 5px;
}
#map-canvas { 
	height: 400px;
	width: 100%;
}
/* To stop the map being fucked up */
#map-canvas img {
	max-width: none;
}


/*************************************************************************
		MAGICSEAWEED WIND ARROWS
*************************************************************************/

.msw-ssa {
    background:         url("../images/msw-swa.png") no-repeat top left;
    width:              26px;
    height:             26px;
}

.msw-ssa-10{ background-position: 0 0; } 
.msw-ssa-100{ background-position: 0 -52px; } 
.msw-ssa-105{ background-position: 0 -104px; } 
.msw-ssa-110{ background-position: 0 -156px; } 
.msw-ssa-115{ background-position: 0 -208px; } 
.msw-ssa-120{ background-position: 0 -260px; } 
.msw-ssa-125{ background-position: 0 -312px; } 
.msw-ssa-130{ background-position: 0 -364px; } 
.msw-ssa-135{ background-position: 0 -416px; } 
.msw-ssa-140{ background-position: 0 -468px; } 
.msw-ssa-145{ background-position: 0 -520px; } 
.msw-ssa-15 { background-position: 0 -572px; } 
.msw-ssa-150{ background-position: 0 -624px; } 
.msw-ssa-155{ background-position: 0 -676px; } 
.msw-ssa-160{ background-position: 0 -728px; } 
.msw-ssa-165{ background-position: 0 -780px; } 
.msw-ssa-170{ background-position: 0 -832px; } 
.msw-ssa-175{ background-position: 0 -884px; } 
.msw-ssa-180{ background-position: 0 -936px; } 
.msw-ssa-185{ background-position: 0 -988px; } 
.msw-ssa-190{ background-position: 0 -1040px; } 
.msw-ssa-195{ background-position: 0 -1092px; } 
.msw-ssa-20 { background-position: 0 -1144px; } 
.msw-ssa-200{ background-position: 0 -1196px; } 
.msw-ssa-205{ background-position: 0 -1248px; } 
.msw-ssa-210{ background-position: 0 -1300px; } 
.msw-ssa-215{ background-position: 0 -1352px; } 
.msw-ssa-220{ background-position: 0 -1404px; } 
.msw-ssa-225{ background-position: 0 -1456px; } 
.msw-ssa-230{ background-position: 0 -1508px; } 
.msw-ssa-235{ background-position: 0 -1560px; } 
.msw-ssa-240{ background-position: 0 -1612px; } 
.msw-ssa-245{ background-position: 0 -1664px; } 
.msw-ssa-25 { background-position: 0 -1716px; } 
.msw-ssa-250{ background-position: 0 -1768px; } 
.msw-ssa-255{ background-position: 0 -1820px; } 
.msw-ssa-260{ background-position: 0 -1872px; } 
.msw-ssa-265{ background-position: 0 -1924px; } 
.msw-ssa-270{ background-position: -52px 0; } 
.msw-ssa-275{ background-position: -52px -52px; } 
.msw-ssa-280{ background-position: -52px -104px; } 
.msw-ssa-285{ background-position: -52px -156px; } 
.msw-ssa-290{ background-position: -52px -208px; } 
.msw-ssa-295{ background-position: -52px -260px; } 
.msw-ssa-30 { background-position: -52px -312px; } 
.msw-ssa-300{ background-position: -52px -364px; } 
.msw-ssa-305{ background-position: -52px -416px; } 
.msw-ssa-310{ background-position: -52px -468px; } 
.msw-ssa-315{ background-position: -52px -520px; } 
.msw-ssa-320{ background-position: -52px -572px; } 
.msw-ssa-325{ background-position: -52px -624px; } 
.msw-ssa-330{ background-position: -52px -676px; } 
.msw-ssa-335{ background-position: -52px -728px; } 
.msw-ssa-340{ background-position: -52px -780px; } 
.msw-ssa-345{ background-position: -52px -832px; } 
.msw-ssa-35 { background-position: -52px -884px; } 
.msw-ssa-350{ background-position: -52px -936px; } 
.msw-ssa-355{ background-position: -52px -988px; } 
.msw-ssa-40{ background-position: -52px -1040px; } 
.msw-ssa-45{ background-position: -52px -1092px; } 
.msw-ssa-5 { background-position: -52px -1144px; } 
.msw-ssa-50{ background-position: -52px -1196px; } 
.msw-ssa-55{ background-position: -52px -1248px; } 
.msw-ssa-60{ background-position: -52px -1300px; } 
.msw-ssa-65{ background-position: -52px -1352px; } 
.msw-ssa-70{ background-position: -52px -1404px; } 
.msw-ssa-75{ background-position: -52px -1456px; } 
.msw-ssa-80{ background-position: -52px -1508px; } 
.msw-ssa-85{ background-position: -52px -1560px; } 
.msw-ssa-90{ background-position: -52px -1612px; } 
.msw-ssa-95{ background-position: -52px -1664px; }

/*************************************************************************
		MAGICSEAWEED WIND ARROWS
*************************************************************************/

.msw-swa {
    background:         url("../images/msw-ssa.png") no-repeat top left;
    width:              26px;
    height:             26px;
}

.msw-swa-10{ background-position: 0 0; } 
.msw-swa-100{ background-position: 0 -52px; } 
.msw-swa-105{ background-position: 0 -104px; } 
.msw-swa-110{ background-position: 0 -156px; } 
.msw-swa-115{ background-position: 0 -208px; } 
.msw-swa-120{ background-position: 0 -260px; } 
.msw-swa-125{ background-position: 0 -312px; } 
.msw-swa-130{ background-position: 0 -364px; } 
.msw-swa-135{ background-position: 0 -416px; } 
.msw-swa-140{ background-position: 0 -468px; } 
.msw-swa-145{ background-position: 0 -520px; } 
.msw-swa-15{ background-position: 0 -572px; } 
.msw-swa-150{ background-position: 0 -624px; } 
.msw-swa-155{ background-position: 0 -676px; } 
.msw-swa-160{ background-position: 0 -728px; } 
.msw-swa-165{ background-position: 0 -780px; } 
.msw-swa-170{ background-position: 0 -832px; } 
.msw-swa-175{ background-position: 0 -884px; } 
.msw-swa-180{ background-position: 0 -936px; } 
.msw-swa-185{ background-position: 0 -988px; } 
.msw-swa-190{ background-position: 0 -1040px; } 
.msw-swa-195{ background-position: 0 -1092px; } 
.msw-swa-20{ background-position: 0 -1144px; } 
.msw-swa-200{ background-position: 0 -1196px; } 
.msw-swa-205{ background-position: 0 -1248px; } 
.msw-swa-210{ background-position: 0 -1300px; } 
.msw-swa-215{ background-position: 0 -1352px; } 
.msw-swa-220{ background-position: 0 -1404px; } 
.msw-swa-225{ background-position: 0 -1456px; } 
.msw-swa-230{ background-position: 0 -1508px; } 
.msw-swa-235{ background-position: 0 -1560px; } 
.msw-swa-240{ background-position: 0 -1612px; } 
.msw-swa-245{ background-position: 0 -1664px; } 
.msw-swa-25 { background-position: 0 -1716px; } 
.msw-swa-250{ background-position: 0 -1768px; } 
.msw-swa-255{ background-position: 0 -1820px; } 
.msw-swa-260{ background-position: 0 -1872px; } 
.msw-swa-265{ background-position: 0 -1924px; } 
.msw-swa-270{ background-position: -52px 0; } 
.msw-swa-275{ background-position: -52px -52px; } 
.msw-swa-280{ background-position: -52px -104px; } 
.msw-swa-285{ background-position: -52px -156px; } 
.msw-swa-290{ background-position: -52px -208px; } 
.msw-swa-295{ background-position: -52px -260px; } 
.msw-swa-30 { background-position: -52px -312px; } 
.msw-swa-300{ background-position: -52px -364px; } 
.msw-swa-305{ background-position: -52px -416px; } 
.msw-swa-310{ background-position: -52px -468px; } 
.msw-swa-315{ background-position: -52px -520px; } 
.msw-swa-320{ background-position: -52px -572px; } 
.msw-swa-325{ background-position: -52px -624px; } 
.msw-swa-330{ background-position: -52px -676px; } 
.msw-swa-335{ background-position: -52px -728px; } 
.msw-swa-340{ background-position: -52px -780px; } 
.msw-swa-345{ background-position: -52px -832px; } 
.msw-swa-35 { background-position: -52px -884px; } 
.msw-swa-350{ background-position: -52px -936px; } 
.msw-swa-355{ background-position: -52px -988px; } 
.msw-swa-360{ background-position: -52px -1040px; } 
.msw-swa-40 { background-position: -52px -1092px; } 
.msw-swa-45 { background-position: -52px -1144px; } 
.msw-swa-5 { background-position: -52px -1196px; } 
.msw-swa-50{ background-position: -52px -1248px; } 
.msw-swa-55{ background-position: -52px -1300px; } 
.msw-swa-60{ background-position: -52px -1352px; } 
.msw-swa-65{ background-position: -52px -1404px; } 
.msw-swa-70{ background-position: -52px -1456px; } 
.msw-swa-75{ background-position: -52px -1508px; } 
.msw-swa-80{ background-position: -52px -1560px; } 
.msw-swa-85{ background-position: -52px -1612px; } 
.msw-swa-90{ background-position: -52px -1664px; } 
.msw-swa-95{ background-position: -52px -1716px; }


/*************************************************************************
		MAGICSEAWEED WEATHER ICONS
*************************************************************************/

.msw-sw {
    width:              30px;
    height:             30px;
    background:         url("../images/msw-sw.png") no-repeat top left;
}

.msw-sw-1{ background-position: 0 0; width: 30px; height: 30px; } 
.msw-sw-10{ background-position: 0 -60px; width: 30px; height: 30px; } 
.msw-sw-11{ background-position: 0 -120px; width: 30px; height: 30px; } 
.msw-sw-12{ background-position: 0 -180px; width: 30px; height: 30px; } 
.msw-sw-13{ background-position: 0 -240px; width: 30px; height: 30px; } 
.msw-sw-14{ background-position: 0 -300px; width: 30px; height: 30px; } 
.msw-sw-15{ background-position: 0 -360px; width: 30px; height: 30px; } 
.msw-sw-16{ background-position: 0 -420px; width: 30px; height: 30px; } 
.msw-sw-17{ background-position: 0 -480px; width: 30px; height: 30px; } 
.msw-sw-18{ background-position: 0 -540px; width: 30px; height: 30px; } 
.msw-sw-19{ background-position: 0 -600px; width: 30px; height: 30px; } 
.msw-sw-2{ background-position: 0 -660px; width: 30px; height: 30px; } 
.msw-sw-20{ background-position: 0 -720px; width: 30px; height: 30px; } 
.msw-sw-21{ background-position: 0 -780px; width: 30px; height: 30px; } 
.msw-sw-22{ background-position: 0 -840px; width: 30px; height: 30px; } 
.msw-sw-23{ background-position: 0 -900px; width: 30px; height: 30px; } 
.msw-sw-24{ background-position: 0 -960px; width: 30px; height: 30px; } 
.msw-sw-25{ background-position: 0 -1020px; width: 30px; height: 30px; } 
.msw-sw-26{ background-position: 0 -1080px; width: 30px; height: 30px; } 
.msw-sw-27{ background-position: 0 -1140px; width: 30px; height: 30px; } 
.msw-sw-28{ background-position: 0 -1200px; width: 30px; height: 30px; } 
.msw-sw-29{ background-position: 0 -1260px; width: 30px; height: 30px; } 
.msw-sw-3{ background-position: 0 -1320px; width: 30px; height: 30px; } 
.msw-sw-30{ background-position: 0 -1380px; width: 30px; height: 30px; } 
.msw-sw-31{ background-position: 0 -1440px; width: 30px; height: 30px; } 
.msw-sw-32{ background-position: 0 -1500px; width: 30px; height: 30px; } 
.msw-sw-33{ background-position: 0 -1560px; width: 30px; height: 30px; } 
.msw-sw-34{ background-position: 0 -1620px; width: 30px; height: 30px; } 
.msw-sw-35{ background-position: 0 -1680px; width: 30px; height: 30px; } 
.msw-sw-36{ background-position: 0 -1740px; width: 30px; height: 30px; } 
.msw-sw-37{ background-position: 0 -1800px; width: 30px; height: 30px; } 
.msw-sw-38{ background-position: 0 -1860px; width: 30px; height: 30px; } 
.msw-sw-4{ background-position: 0 -1920px; width: 30px; height: 30px; } 
.msw-sw-5{ background-position: -60px 0; width: 30px; height: 30px; } 
.msw-sw-6{ background-position: -60px -60px; width: 30px; height: 30px; } 
.msw-sw-7{ background-position: -60px -120px; width: 30px; height: 30px; } 
.msw-sw-8{ background-position: -60px -180px; width: 30px; height: 30px; } 
.msw-sw-9{ background-position: -60px -240px; width: 30px; height: 30px; }


/*************************************************************************
		ISTOPE STYLING
*************************************************************************/

/**** Isotope Filtering ****/

.isotope-item {
  z-index: 2;
}

.isotope-hidden.isotope-item {
  pointer-events: none;
  z-index: 1;
}

/**** Isotope CSS3 transitions ****/

.isotope,
.isotope .isotope-item {
  -webkit-transition-duration: 0.8s;
     -moz-transition-duration: 0.8s;
      -ms-transition-duration: 0.8s;
       -o-transition-duration: 0.8s;
          transition-duration: 0.8s;
}

.isotope {
  -webkit-transition-property: height, width;
     -moz-transition-property: height, width;
      -ms-transition-property: height, width;
       -o-transition-property: height, width;
          transition-property: height, width;
}

.isotope .isotope-item {
  -webkit-transition-property: -webkit-transform, opacity;
     -moz-transition-property:    -moz-transform, opacity;
      -ms-transition-property:     -ms-transform, opacity;
       -o-transition-property:      -o-transform, opacity;
          transition-property:         transform, opacity;
}

/**** disabling Isotope CSS3 transitions ****/

.isotope.no-transition,
.isotope.no-transition .isotope-item,
.isotope .isotope-item.no-transition {
  -webkit-transition-duration: 0s;
     -moz-transition-duration: 0s;
      -ms-transition-duration: 0s;
       -o-transition-duration: 0s;
          transition-duration: 0s;
}

/*************************************************************************
		ICON FONT
*************************************************************************/

@font-face {
  font-family: 'fontello-custom';
  src: url('../font/fontello-custom.eot?45548214');
  src: url('../font/fontello-custom.eot?45548214#iefix') format('embedded-opentype'),
       url('../font/fontello-custom.woff?45548214') format('woff'),
       url('../font/fontello-custom.ttf?45548214') format('truetype'),
       url('../font/fontello-custom.svg?45548214#fontello-custom') format('svg');
  font-weight: normal;
  font-style: normal;
}
/* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. */
/* Note, that will break hinting! In other OS-es font will be not as sharp as it could be */
/*
@media screen and (-webkit-min-device-pixel-ratio:0) {
  @font-face {
    font-family: 'fontello-custom';
    src: url('../font/fontello-custom.svg?45548214#fontello-custom') format('svg');
  }
}
*/
 
 [class^="icon-"]:before, [class*=" icon-"]:before {
  font-family: "fontello-custom";
  font-style: normal;
  font-weight: normal;
  speak: none;
 
  display: inline-block;
  text-decoration: inherit;
  width: 1em;
  margin-right: .2em;
  text-align: center;
  /* opacity: .8; */
 
  /* For safety - reset parent styles, that can break glyph codes*/
  font-variant: normal;
  text-transform: none;
     
  /* fix buttons height, for twitter bootstrap */
  line-height: 1em;
 
  /* Animation center compensation - margins should be symmetric */
  /* remove if not needed */
  margin-left: .2em;
 
  /* Uncomment for 3D effect */
  /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
}
 
.icon-comment:before { content: '\e800'; } /* '' */
.icon-menu:before { content: '\e801'; } /* '' */
.icon-linkedin:before { content: '\e803'; } /* '' */
.icon-twitter:before { content: '\e802'; } /* '' */

/*************************************************************************
		MEDIA QUERIES
*************************************************************************/


@media all and (max-width: 1500px) {

	.grid-3 {
		width: 99.99%;
	}
	.grid-6 {
		width: 99.99%;
	}

	#widget-container {
		margin: 0;
	}
	.inner-wrap {
		padding: 0;
	}

}

@media screen and (max-width: 960px) {


	table.forecast-7day.mobile {
		display: block;
	}
	table.forecast-7day.desktop {
		display: none;
	}

	#tides article {
		width: 32%;
	}
	#tides article:nth-child(n) {
		margin-right: 2%; 
	}
	#tides article:nth-child(3n) {
		margin-right: 0; 
	}

}

@media screen and (max-width: 760px) {

	/* ------------------------------------------- JERSEY MET */
	article.forecast-text {
		width: 100%;
		margin: 0 !important;
	}
	.overlay-time {
		left: 40px;
		top: 10px;
	}
	table.forecast-7day.mobile {
		display: block;
	}
	table.forecast-7day.desktop {
		display: none;
	}

	/* ------------------------------------------- TIDES */
	#tides article {
		width: 100%;
	}
	#tides article:nth-child(n) {
		margin-right: 0; 
	}

}