* { margin:0;padding:0;border:0;font-family:'Poppins', sans-serif;font-size:18px;font-weight: 400;box-sizing:border-box;color:#777; }
h1 { font-size:60px;font-weight:700;line-height: 1.0; }
h2 { text-align:center;font-size:44px;font-weight:700;padding-bottom:40px;line-height: 1.2; }
h3 { font-size:25px;font-weight:700; }
a { color:#eb6437;text-decoration:none; }
a.effect { padding-bottom:5px;position:relative; }
a.effect:before, a.effect:after { content: '';position: absolute;transition: transform .5s ease; }
a.effect:before { left:0;bottom:0;width:100%;height:2px;background:#eb6437;transform:scaleX(0); }
a.effect:hover:before { transform:scaleX(1); }
.clear { clear:both; }
.center { text-align:center; } 
::-moz-selection { color:#fff;background:#eb6437; }
::selection { color:#fff;background:#eb6437; }

/* Structure */
.column { float:left;margin-right:40px;min-height:1px; }
.full-width { width:1100px;margin:0 auto; }
.one-middle { width: 700px;margin:0 auto; }
.one-half { width: 530px; }
.one-third { width: 340px; }
.two-third { width: 720px; }
.one-forth { width: 240px; }
.last-col { margin-right: 0px !important; }

/* Header */
#header { width:100%; }
.headerContainer { width: 1100px;margin: 0 auto;padding: 10px 0 10px;height:70px;-ms-transition:all 0.3s ease-out;-moz-transition:all 0.3s ease-out;-webkit-transition: all 0.3s ease-out;-o-transition:all 0.3s ease-out;transition:all 0.3s ease-out; }
.logo { float: left;margin-top:3px;color:#fff;text-decoration:none;font-size:30px;font-weight:700; }
.title { display:block;padding:150px 0 170px;background: url(../img/titahi-bay.jpg) no-repeat center center;-webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover; }
.title h1 { color:#fff;margin-bottom:5px;text-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2); }
.title p { color:#fff;font-size:20px;line-height:27px;text-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2); }

/* Navigation */
#nav { float:right; }
#nav li { display:inline-block;list-style:none; }
#nav li a { display: block;text-transform:uppercase;font-size:18px;text-decoration:none;color:#fff;font-weight:300;padding:12px 15px;margin:0 5px; }
#nav li a.active,#nav li a:hover { color:#eb6437;-ms-transition:all 0.3s ease-out;-moz-transition:all 0.3s ease-out;-webkit-transition: all 0.3s ease-out;-o-transition:all 0.3s ease-out;transition:all 0.3s ease-out; }
.mMenu { display:none; }

/* Fixed Header */
.sticky { position: fixed;top: 0;z-index:999;width: 100%;background:#fff;box-shadow: 0 0 20px rgba(0,0,0,.1); }
.sticky .headerContainer { height:70px; }
.sticky + .content { padding-top: 70px; }
.sticky .logo { color:#672831;background: linear-gradient(to right, #672831 0%, #eb6437 100%);-webkit-background-clip: text;-webkit-text-fill-color: transparent; }
.sticky #nav li a { color:#555; }
.sticky #nav li a.active,.sticky #nav li a:hover { color:#eb6437; }

/* Content */
.content { margin-top:-70px; }
.alt-section { background:#f8f8f8; }
.content-container { width:753px;margin:0 auto;padding:90px 0; }
.content-container h2,.content-support-container h2 { color:#672831;background: linear-gradient(to right, #672831 0%, #eb6437 100%);-webkit-background-clip: text;-webkit-text-fill-color: transparent; }
.surf-cam { height:424px;background:#fff;box-shadow: 0 0 30px rgba(0,0,0,.75); }
.surf-cam-credit { font-size:13px;margin:5px 0 20px; }
.surf-cam-credit a { font-size:13px; }
.surf-forecast { margin-bottom:30px; }
.widget-container .about,.widget-container .about nobr { font-size:12px; }
.google-map { width:100%;-webkit-filter: grayscale(100%);-moz-filter: grayscale(100%);-ms-filter: grayscale(100%);-o-filter: grayscale(100%);filter: grayscale(100%); }
#instagram-feed { padding:0px 0;background:#fff; }
#instagram-feed iframe { float: left;height:100%; }
.content-support-container { padding:90px 0; }
.content-support-container h2 { padding-bottom:20px; }
.content-support { text-align:center; }
.content-support img { width:100%;max-width:300px;margin-bottom:10px; }
.cam-location { margin-bottom:25px; }
.primaryBtn { width:auto;cursor:pointer;background:#672831;border:0;color:#fff;margin-top:15px;padding:10px 25px;line-height: 28px;text-transform:uppercase;font-size:18px;border-radius: 3px;-moz-border-radius: 3px;-khtml-border-radius: 3px;-webkit-border-radius: 3px;display: inline-block;vertical-align: middle;-webkit-transform: perspective(1px) translateZ(0);transform: perspective(1px) translateZ(0);box-shadow: 0 0 1px rgba(0, 0, 0, 0);-webkit-transition-duration: 0.3s;transition-duration: 0.3s;-webkit-transition-property: transform;transition-property: transform;-webkit-transition-timing-function: ease-out;transition-timing-function: ease-out; }
.primaryBtn:hover, .primaryBtn:focus, .primaryBtn:active { -webkit-transform: translateY(-8px);transform: translateY(-8px); }
.line { position: relative;margin-bottom:80px; }
.line:after { content: "";position: absolute;bottom: -30px;width: 60px;height: 1px;background-color: #eb6437;left: 50%;margin-left: -30px; }

/* Footer */
footer { padding: 40px 0 0;background: rgba(103,40,49,1);
    background: -moz-linear-gradient(-45deg, rgba(103,40,49,1) 0%, rgba(235,100,55,1) 100%);
    background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(103,40,49,1)), color-stop(100%, rgba(235,100,55,1)));
    background: -webkit-linear-gradient(-45deg, rgba(103,40,49,1) 0%, rgba(235,100,55,1) 100%);
    background: -o-linear-gradient(-45deg, rgba(103,40,49,1) 0%, rgba(235,100,55,1) 100%);
    background: -ms-linear-gradient(-45deg, rgba(103,40,49,1) 0%, rgba(235,100,55,1) 100%);
    background: linear-gradient(135deg, rgba(103,40,49,1) 0%, rgba(235,100,55,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#672831', endColorstr='#eb6437', GradientType=1 );
}
footer h3 { color:#fff;margin-bottom:20px; }
footer p { font-size: 16px;color: #fff;line-height:20px;margin-bottom:10px; }
.content-footer { padding-bottom:120px; }
.content-footer a { text-decoration:none;color:#fff;font-size:16px; } 
.content-footer a:hover { color:#fff; }
.content-footer p { color:#fff; }
.content-footer .fa { font-size:16px;color:#fff; }
.footerDetailsContainer { background:#672831; }
.footerDetails { width:1100px;margin:0 auto;padding:30px 0 20px; }
.footerDetails p { font-size:14px; }
.footerDetails p a { font-size:14px; }
.footerDetailsLeft { float:left; }
.footerDetailsLeft p { font-size:18px;font-weight: 700; }
.footerDetailsRight { float:right; }

/* Back to top */
#toTop { display:block;position:fixed;bottom:2%;right:1%;background:#fff;padding:0;opacity: 0.5; text-decoration:none;font-size:25px;line-height:25px; }
#toTop .fa { color:#000;padding:5px 10px 5px; }
#toTop:hover .fa:before { color:#eb6437;opacity:1.0; }


@media only screen and (max-width: 1100px) {
	.column { margin-right:2%; }
	.full-width { width:100%;padding: 0 2%; }
    .one-half  { width: 46%; }
	.one-third { width: 32%; }
	.two-third { width: 65%; }
	.headerContainer { width:100%; }
	.headerContainer #headingToTop { padding-left:2%;padding-bottom: 10px; }
	nav { padding-right:2%; }
	.footerDetails { width:100%; }
	.footerDetailsLeft { padding-left:2%; }
	.footerDetailsRight { padding-right:2%; }
}

@media only screen and (min-width: 1025px) {
    .mMenu { display:none; }
    #nav { display: block !important; }
}

@media only screen and (max-width: 1024px) {
	body, html { -ms-text-size-adjust: 100%;-moz-text-size-adjust: 100%;-o-text-size-adjust: 100%;-webkit-text-size-adjust: 100%; }
	.headerContainer a { position:relative; }
    .mMenu { color:#fff;display:block;font-size:35px;float:right;margin-top:8px;margin-bottom:0px;padding-right:2%; }
    .mMenu:hover { cursor:pointer; }
    nav { float:none;padding-top:0;padding-right:0;clear: both;box-shadow: 0 10px 20px rgba(0,0,0,.1); }
    #nav { display: none;float:none;clear:both;text-align: center;background:#fff;z-index:10; }
    #nav li { display: block;float:none;padding:0; }
    #nav li a {display: block;background: #fff;color:#555;border-radius:0;box-shadow:none;margin:0; }
    
    .sticky .mMenu { color:#eb6437; }
}

@media only screen and (max-width: 970px) {
	.title h1 { font-size: 45px; }
	.title p { font-size: 18px; }
}


@media only screen and (max-width: 768px) {
	.column { margin: 10px 0 0 0; }
	.one-middle  { width: width:92%;padding: 0 4%; }
	.one-half { width: 100%; }
	.one-third  { width: 100%; }
	.two-third { width: 100%; }
	.title h1 { margin-right: 60%; }
	.title p { margin-right: 60%; }
	.content-container { width: 100%; }
	.content-container h2,.content-support-container h2 { font-size:35px; }
	.surf-cam { width:96%;margin:0 2%;position: relative;padding-bottom: 56.25%;padding-top: 30px;height: 0;overflow: hidden; }
	.surf-cam iframe,.video-container object,.video-container embed { position: absolute;top: 0;left: 0;width:100%;height: 100%; }
	.surf-cam-credit { padding-left:2%; }
	.surf-forecast { position:relative;margin:0 2% 30px;width: 96%;overflow-x:scroll;-webkit-overflow-scrolling:touch; }	
	.content-support .column,.content-footer .column { margin-bottom:50px; }
}

@media only screen and (max-width: 600px) {
	.title { padding: 100px 0 130px; }
	.title h1 { font-size: 40px;margin-right: 36%; }
	.title p { font-size: 17px;margin-right: 20%; }
}

@media only screen and (max-width: 475px) {
	.footerDetails p { font-size:13px; }
	.footerDetailsLeft p { font-size:15px;font-weight: 700; }
}

@media only screen and (max-width: 375px) {
	section h2 { font-size:45px; }
	section p { font-size:20px;line-height:25px; }
}

@media only screen and (max-width: 320px) {
	.title h1 { font-size: 24px; }
}