@font-face { font-family: "Melbourne"; src: url("../../_System/fonts/Melbourne_reg.eot") format("eot"), url("../../_System/fonts/Melbourne_reg.woff") format("woff"), url("../../_System/fonts/Melbourne_reg.ttf") format("truetype"), url("../../_System/fonts/Melbourne_reg.svg#Melbourne") format("svg"); } @font-face { font-family: "Melbourne Bold"; src: url("../../_System/fonts/Melbourne_bold.eot") format("eot"), url("../../_System/fonts/Melbourne_bold.woff") format("woff"), url("../../_System/fonts/Melbourne_bold.ttf") format("truetype"), url("../../_System/fonts/Melbourne_bold.svg#Melbourne Bold") format("svg"); } @font-face { font-family: "Melbourne Light"; src: url("../../_System/fonts/Melbourne_light.eot") format("eot"), url("../../_System/fonts/Melbourne_light.woff") format("woff"), url("../../_System/fonts/Melbourne_light.ttf") format("truetype"), url("../../_System/fonts/Melbourne_light.svg#Melbourne Light") format("svg"); } header .inner, a:not(.box), span, #boxes ul li img, nav, nav ul li ul, .email, .phone, #copy .column > div img, a#pull:after { -webkit-transition:all 0.2s ease; transition:all 0.2s ease; } * { text-decoration: none; outline:none; border: none; } ::-moz-selection { background: #333; color:#fff; } ::selection { background: #333; color:#fff; } body { margin: 0 auto; max-width: 1900px; box-shadow: 0 0 3px 0 rgba(0,0,0,0.3); } #container { margin: 8px; opacity:0; } .tel { cursor: default; } /* LOADER */ .loader { position:fixed; background: #fff url(../../_System/images/load.gif) center no-repeat; width:100%; height:100%; top:-8px; z-index:99991; max-width: 1900px; } .loaderImg { position:fixed; top:20%; left:50%; margin: -93px 0 0 -150px; z-index:999911; } /* HEADER */ header { position:fixed; top:0; left:0; right:0; height:200px; text-align:center; border-top: 9px solid #fff; z-index:9999; } header .inner { background:url(../../_System/images/header.png) bottom left no-repeat; position:relative; width:100%; max-width:1920px; height:200px; margin:auto; padding:0; text-align:left; } header .logo { position:absolute; left:40px; top:15px; width:250px; z-index:1; } header .phone { position:absolute; top:50px; right:50px; font:300 45px/45px 'Melbourne', arial; z-index:2; } header .phone a { color:#4f9c6d; } header .email { position:absolute; top:90px; right:50px; font: 100 20px/24px 'Melbourne Bold', arial; z-index:2; } header .email a { color:#000; } header.scroll { height: 160px; } header.scroll .inner { background-image: url(../../_System/images/header-scroll.png); height:160px; } header.scroll .logo img { height:120px; width:auto; } header.scroll .phone { top:25px; } header.scroll .email { top:65px; } header.scroll nav { top:55px; } /* NAVIGATION */ nav { position:absolute; top:70px; left:50%; width:auto; height:20px; margin:0 -545px; padding:0; clear:both; text-shadow:none; z-index:3; } nav ul { position:relative; margin:0; padding:0; list-style:none; text-align:center; display:block; } nav ul li { position:relative; width:auto; height:auto; margin:0 20px; padding:0; display:inline-block; -webkit-transition: none !important; transition: none !important; } nav ul li a { height:22px; font: 700 20px/20px 'Lato', arial; color:#000; margin:0; padding:0 5px; text-align:center; text-transform:uppercase; overflow:hidden; display:block; -webkit-transition: none !important; transition: none !important; } nav ul li a span { position:relative; display:inline-block; } nav ul li a span:before { position:absolute; top:100%; content:attr(data-hover); -webkit-transform:translate3d(0,0,0); transform:translate3d(0,0,0); } nav ul li:first-child { margin:0 20px 0 0; } nav ul li:last-child { margin:0 0 0 20px; } nav ul li ul { position:absolute; top:20px; left:45%; width:170px; height:0; margin:0 0 0 -80px; padding:15px 0 0 0; overflow:hidden; opacity:0; z-index:9999; } nav ul li ul.dropdown { height:auto; opacity:1; } nav ul li ul.dropdown li:first-child { border-top: 1px solid #4f9c6d; } nav ul li ul li { width:auto; height:auto; margin:0 !important; padding:0; display:block; } nav ul li ul li a { background: #fff; font:300 18px/20px 'Lato', arial; margin:0; padding: 10px 0; color:#000 !important; text-transform:uppercase; border:none; overflow:visible; display:block; } nav a#pull { color:#fff; cursor:pointer; display:none; z-index:4; } nav ul li.add {display: none;} /* SLIDESHOW */ #slideshow { position: relative; width: 100%; height: auto; background: #ffffff; padding: 0; cursor: default; overflow: hidden; } .homeSlideshow { padding: 0 0 55px 0;} .homeSlideshow:after { display: block; position:absolute; background: url(../../_System/images/slideshow-bottom.jpg) center top no-repeat; content:""; bottom:0px; width: 100%; height: 76px; z-index:999; } #slideshow p.quote { position: absolute; font: 100 50px/50px 'Melbourne Light', sans-serif; width: 98%; margin: 28% 1%; text-align: center; vertical-align: middle; color: #645c59; } #slideshow p.quote strong { font-weight: 900; } #slideshow p.quote span { background: rgba(255,255,255,0.9); padding: 15px 25px; box-shadow: #222 0.5px 1px 5px -1px; } #slideshow .pager { position:absolute; bottom: 130px; width:100%; height:auto; padding:0; text-align:center; z-index:19; bottom: 55px; } #slideshow .pager a { background:#fff; width:30px; height:5px; margin:0 3px; display:inline-block; overflow:hidden; box-shadow: #eee 0px 0px 0.5px 0px; bottom: 55px; } #slideshow .pager a span { display:none; } #slideshow .pager a.selected { background:#52c3ac; } .fade:after { content:""; clear:both; display:block; } .fade .item { position:relative; width:100%; height:auto; margin:0; padding:0; float:left; overflow:hidden; cursor:default; } .fade .item img { width:100%; height:auto; margin:0; padding:0; display:block; cursor:default; } a.nav { position:absolute; width: 25px; height: 35px; bottom: 40px; margin:0; cursor:pointer; -webkit-transition:all 0s ease; transition:all 0s ease; z-index:20; } a.nav.prev { background:url(../../_System/images/arrows.png) top left; right:100px; } a.nav.next { background:url(../../_System/images/arrows.png) top right; right:50px; } /* BOXES */ #boxes, #boxes ul, #boxes ul li { width:100%; margin:0; padding:0; list-style:none; } #boxes ul li { position:relative; width:25%; height: 100%; margin:0; padding:0; float:left; display:inline-block; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; overflow: hidden; } #boxes ul li img { width:100%; height:auto; display:block; } #boxes ul li a { font:300 60px/60px 'Melbourne',arial; position:absolute; width:100%; height:100%; color:#fff; text-align:center; text-transform:uppercase; z-index:10; } #boxes ul li a span { position:relative; display: block; top:50%; margin-top:-13%; } #boxes ul li a span:before, #boxes ul li a span:after { display:block; position:absolute; background: #fff; width: 25%; height: 2px; margin: 0 37.5%; content:""; } #boxes ul li a span:after { margin-top: 55px; } #boxes ul li a span:before { margin-top: -55px; } #boxes ul li p.tagline { position:absolute; width:100%; top:80%; margin-top: -8%; color: #fff; font: 400 14px/20px 'Lato', arial; text-align: center; text-transform: uppercase; z-index:10; } #boxes ul li p.tagline.grey { color:#cecece; } #boxes ul li.margin a span { display: block; top:32%; margin-top: -1.5%; } #boxes ul li.margin p.tagline { margin-top: -1%; } #boxes ul li.subscribe h4:before { display:block; position:absolute; background: #fff; width: 45%; height: 2px; margin: -30px 0 0 27.5%; content:""; } #boxes ul li.subscribe h4 { top: 28% !important; font: 400 60px/60px "Melbourne", Lato !important; } #boxes ul li.subscribe h4, #boxes ul li.subscribe p { position: absolute; width: 70%; top: 45%; margin: 0 15%; color: #fff; font: 400 14px/20px "Lato", arial; text-align: center; text-transform: uppercase; z-index: 10; } #boxes ul li a.black { background: rgba(5,5,5,0.80); } #boxes ul li a.orange { background: rgba(180, 120, 38, 0.7); } #boxes ul li a.dark { background: rgba(39, 40, 41, 0.85); } #boxes ul li a.green { background: rgba(35,87,56,0.75); } #boxes ul li a.lightdark { background: rgba(39,40,41,0.6); } #boxes ul li a.lightgreen { background: rgba(52,105,68,0.6); } #boxes ul li form { position: absolute; z-index: 11; margin-top: 56%; width: 100% } #boxes ul li form input { width: 75%; height: 50px; margin: 0 auto; display: block; background: none; color: #fff; font: 600 16px/18px 'Lato',arial; border-bottom: 2px solid #fff; } #boxes ul li form button[type="submit"] { position: relative; height: 51px; background: none; color: #fff; cursor: pointer; float: right; margin: -54px 58px 0 0; font: 600 16px/18px 'Lato',arial; text-transform: uppercase; } #boxes ul li form .placeholder { color: #fff; font: 600 16px/18px 'Lato',arial; text-transform: uppercase; } #boxes ul li form ::-webkit-input-placeholder { color: #fff; font: 600 16px/18px 'Lato',arial; text-transform: uppercase; } #boxes ul li form :-moz-input-placeholder { color: #fff; font: 600 16px/18px 'Lato',arial; text-transform: uppercase; } #boxes ul li form ::-moz-input-placeholder { color: #fff; font: 600 16px/18px 'Lato',arial; text-transform: uppercase; } #boxes ul li form :-ms-input-placeholder { color: #fff; font: 600 16px/18px 'Lato',arial; text-transform: uppercase; } /* Webapp */ #copy .column { position:relative; width:100%; margin:0; padding:0; -moz-column-count:3; -moz-column-gap:10px; -webkit-column-count:3; -webkit-column-gap:10px; -webkit-column-count:3; -moz-column-count:3; column-count:3; -webkit-column-gap:10px; -moz-column-gap:10px; column-gap:10px; display:block; clear:both; } #copy .column.fix{ padding:0 0 75px 0; } #copy .column > div { background:#eeffee; width:100%; margin:0 0 10px 0; padding:30px 0; display:inline-block; overflow:hidden; z-index: 1; -webkit-column-break-inside:avoid; page-break-inside:avoid; break-inside:avoid; -webkit-transform:translate3d(0,0,0); transform:translate3d(0,0,0); } #copy .column > div:last-child { display: inline-block; } #copy .column > div.review:first-child { margin-top: 0; } #copy .column > div .download, #copy .column > div h2, #copy .column > div h3, #copy .column > div h4, #copy .column > div p, #copy .column > div ul{ padding:0 30px; } #copy .column > div h3 span{ background:#fff; position:inherit; margin:0 10px 0 0; padding:10px; } #copy .column > div h3{ font:300 26px/33px 'Roboto', arial; white-space: normal; color: #666666; margin: 25px 0 10px 0; } #copy .column > div p { padding: 13px 30px; } #copy .column > div p a, #copy .column > div li a{ padding: 10px; } #copy .column > div img{ width:100%; height:auto; display:block; z-index: 10000; } #copy .column > div.whatson{ padding:0 0 30px 0 !important; } #copy .column > div.whatson:hover { background-color: rgba(79,156,109,0.08); } #copy .column .pagination{ position:absolute; bottom:0; left:0; } /*Table*/ .responsiveTable { margin: 0 auto; position:relative; } .responsiveTable table { margin-bottom:50px; float: left; border-collapse: collapse; width:25% } .responsiveTable table.fullWidth { width:100% } .responsiveTable table.respHideLabels { width:15% } .responsiveTable table.respHideLabels tr td:first-child, .responsiveTable table.respHideLabels tr th:first-child { display:none; } .responsiveTable td, .responsiveTable th { margin:0; padding:5px 20px; text-align: left;} .mainLabels { margin: 0 auto; position:relative; } .mainLabels table { margin-bottom:40px; float: left; border-collapse: collapse; } .mainLabels table.respHideLabels tr td:first-child, .responsiveTable table.respHideLabels tr th:first-child { display:none; } .mainLabels td, .responsiveTable th { margin:0; text-align: left; width: 251px;} /* Main */ #copy { width: 85%; height:auto; margin:auto; font:400 16px/22px 'Open Sans', arial; color:#666666; clear: both; overflow:hidden; padding:40px 0; } #copy h1 { display:block; font: 300 47px/50px 'Melbourne',arial; color: #272829; margin: 30px 0; padding:0; text-transform: uppercase; text-align:left; } #copy h2 { display:block; color: #36704d; margin: 30px 0; padding:0; text-transform: uppercase; text-align:left; } #copy h3 { display:block; color: #36704d; margin: 25px 0; padding:0; text-transform: uppercase; text-align:left; } #copy h4 { margin: 0 0 15px 0; padding: 0; font: 500 24px/30px'Open Sans', arial; } #copy p { display:block; margin:0; padding: 10px 0; } #copy .copyHr { display:none; } #copy span.heading { color: #4f9c6d; } #copy .left { position: relative; width:50%; padding-right: 100px; float:left; box-sizing: border-box; } #copy .right { position: relative; width:50%; padding-left: 100px; float:left; box-sizing: border-box; border-left: 1px solid #eee; } #copy p a, #copy li a, #copy h2 a, #copy a p { background: #4f9c6d; color: #fff; padding: 2px 10px; cursor: pointer; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); white-space: nowrap; } #copy h3 a { background: #4f9c6d; color: #fff; padding: 0 10px 2px 10px; cursor: pointer; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } #copy h4 a { background: #4f9c6d; color: #fff; padding: 0 10px 2px 10px; cursor: pointer; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } #copy a:hover,#copy a p:hover { background: #36704d; color: #fff; } #copy li {padding: 10px 0;} .intro { font: 500 26px/38px'Open Sans', arial; color: #36704d; padding: 0 0 30px 0 !important; } #copy ul {background-color: #e7f3eb; margin: 35px 0 35px 0; padding: 25px; list-style: none; } #copy li { margin: 5px 0 0 0; padding: 0 0 0 25px; line-height: 1.25em; } #copy li:before { display: inline-block; position: static; margin: 4px 20px 0 -28px; width: 10px; height: 10px; content: ''; border: 1px solid #4f9c6d; border-radius: 50px; } #copy p.clear {clear: both;} .form input[type=submit]{ background:#4f9c6d; margin:-68px 0 0 0; padding:20px 25px 20px 25px; position:relative; float:right; width:auto; clear:both; cursor:pointer; color:#fff; border: 2px solid #4f9c6d; font: 200 20px/20px 'Fjalla One', arial; text-transform: } iframe {float:left; padding: 30px 70px 30px 0; width: 560px; max-width: 100%; height: 315px;} /* Web Forms */ .form{ display:block; position:relative; width:100%; margin: 0 auto; clear:both; padding-bottom:50px; } .form input, .form select, .form textarea{ background:none; margin:0; padding:25px 0; width:48%; float:left; color:#777; border:none; border-bottom:2px solid #8E8E8E ; font: 300 16px/16px 'Open Sans', arial; } .form label, .form .labelAdd{ color:#777; padding: 35px 0 20px 0; display: inline-block; } .form label{ padding-left:4%; } .form textarea{ margin-bottom:0; width:100%; float:none; clear:both; } .form input#checkin, .form input#checkout{ background:url('/_System/images/datepicker.png') top right no-repeat; cursor:pointer; } .form div{ position:absolute; right:0; bottom:-7px; } .form input[type=submit]{ background:#4f9c6d; margin:-70px 0 0 0; padding:20px 25px 20px 25px; position:relative; float:right; width:auto; clear:both; cursor:pointer; color:#fff; border: 2px solid #4f9c6d; font: 200 20px/20px 'Fjalla One', arial; text-transform: uppercase; } .form input:nth-child(even), .form .right{ float:right; } .form .left{ float:left!important; } .form input.fullWidth{ width:100%; } .form .mandatory::-webkit-input-placeholder{ line-height:1.56em; opacity:1; color:#4f9c6d; } .form .mandatory:-moz-placeholder{ line-height:1.2em; opacity:1; color:#4f9c6d; } .form .mandatory::-moz-placeholder{ line-height:1.2em; opacity:1; color:#4f9c6d; } .form .mandatory:-ms-input-placeholder{ line-height:1.56em; opacity:1; color:#4f9c6d; } .form br{ clear:both; } .reviewsForm input[type=submit]{margin:-125px 0 0 0;} .form input:hover { background: rgba(54, 112, 77, 0.2); } .form input[type=submit]:hover{ background: #36704d;} input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill { background-color: #36704d !important; } /* reviews */ #copy .reviews .column.bgBox div { padding: 0 0 25px 0; margin: 20px 0 10px 0;} .quoteIcon { background: url('../../_System/images/quote.png') center no-repeat; display: inline-block; margin: 5px 5px 0 0; width: 35px; height: 28px; } /* #form { position:relative; width:100%; clear:both; display:block; } #form input, #form select, #form textarea { background:none; width:100%; font:400 16px/20px 'Open Sans', arial; color:#666; margin:0 0 8px 0; padding:20px 0; text-align:left; text-transform:none; border:none; border-bottom:1px solid #eee; } #form textarea { margin-bottom:0; } #form select { width:322px; height:37px; padding:5px; } #form input.checkin, #form input.checkout { background:url(/_System/images/datepicker.png) top right no-repeat; cursor:pointer; } #form div { position:absolute; bottom:0; right:0; } .form input[type=submit]{ background:#4f9c6d; margin:-68px 0 0 0; padding:20px 25px 20px 25px; position:relative; float:right; width:auto; clear:both; cursor:pointer; color:#fff; border: 2px solid #4f9c6d; font: 200 20px/20px 'Fjalla One', arial; text-transform: } #form input.mandatory::-webkit-input-placeholder { color:#333; line-height:25px; text-transform:none; opacity:1; } #form input.mandatory:-moz-placeholder { color:#333; line-height:25px; text-transform:none; opacity:1; } #form input.mandatory::-moz-placeholder { color:#333; line-height:25px; text-transform:none; opacity:1; } #form input.mandatory:-ms-input-placeholder { color:#333; line-height:25px; text-transform:none; opacity:1; } #form br { clear:both; } */ /* Footer */ footer { background:#fff; width:100%; margin:0; padding:0; clear:both; } footer .centre { width: 100% !important; } footer .tagline { background:#fff; height:auto; font:100 40px/40px 'Melbourne Light', arial; color:#272829; border-top:1px solid #e7e7e7; text-align:center; } footer .tagline em { font-style:normal; } footer .tagline a { color:#272829; } footer .tagline .wheel { position:absolute; margin:-30px 0 0 0; } footer .details { background:#fff; font:500 14px/20px 'Open Sans', arial; color:#272829; border-top:1px solid #e7e7e7; text-align:center; text-transform:uppercase; } footer .details span { color:#e7e7e7; margin:0 10px; } footer .details a { color:#272829; } footer .details p { margin: 30px 0; vertical-align: middle; } footer .social { background:#eee; height:135px; text-align:center; } footer .social a { width:140px; margin: 40px 25px 0 0; display:inline-block; -webkit-transition-duration:0; transition-duration:0; } footer .social a.facebook { background:url(../../_System/images/facebook.png) top left no-repeat; height: 57px; } footer .social a.youtube { background:url(../../_System/images/youtube.png) top left no-repeat; height: 52px; } footer .social a.google { background:url(../../_System/images/google.png) top left no-repeat; height: 42px; } footer .social a:last-child { margin:0; } footer .copyright { position:relative; font:400 12px/12px 'Open Sans', arial; color:#999; padding:40px 0; text-transform:uppercase; } footer .copyright p { position:relative; width:595px; margin:0 auto; padding:0 200px 0 0; } footer .copyright p a { color:#999; margin:0 0 0 25px; } footer .copyright .pd { position:absolute; top:-9px; right:0; } /*Blogpost*/ .blogpost h2 {line-height: 40px;} @media only screen and (min-width: 1075px) { nav ul li ul li a:hover { background-color: rgba(2,2,2,0.9); color:#fff !important; } nav ul li a:hover span, nav ul li:hover a span { -webkit-transform:translateY(-100%); -ms-transform:translateY(-100%); transform:translateY(-100%); } #boxes ul li:hover a ~ img { -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); } #boxes ul li:hover a span { -webkit-transform: scale(0.95); -ms-transform: scale(0.95); transform: scale(0.95); } footer .social a:hover { background-position: left bottom; } #boxes ul li:hover p.tagline, footer .social a:hover { -webkit-animation-name:wobble; animation-name:wobble; -webkit-animation-duration:2s; animation-duration:2s; -webkit-animation-timing-function:ease; animation-timing-function:ease; -webkit-animation-iteration-count:1; animation-iteration-count:1; } a:not(.nopush):hover, button:hover { -webkit-animation-name:push; animation-name:push; -webkit-animation-duration:0.2s; animation-duration:0.2s; -webkit-animation-timing-function:ease; animation-timing-function:ease; -webkit-animation-iteration-count:1; animation-iteration-count:1; } } /* RESIZE*/ @media only screen and (max-width:1855px) { #copy h2.clear2 {clear: both;} } @media only screen and (max-width:1680px) { nav { margin-left: -485px; } nav ul li { margin: 0 10px; } #boxes ul li a { font-size: 54px; line-height: 54px; } #boxes ul li a span:after { margin-top: 45px; } #boxes ul li a span:before { margin-top: -45px; } #boxes ul li p.tagline { font-size:13px; line-height:13px; } } @media only screen and (max-width:1540px) { nav { margin-left: -425px; } nav ul li a { font-size: 18px; } #boxes ul li.subscribe h4 { font-size:56px !important; } #boxes ul li.subscribe p { font-size:12px; line-height:17px; } #boxes ul li form input { font-size: 14px; line-height: 14px; height:40px; } #boxes ul li form button[type="submit"] { font-size: 13px; top: 10px; left: 20px; height: 42px; } #boxes ul li form ::-webkit-input-placeholder { font-size: 12px; line-height: 14px } #boxes ul li form :-moz-input-placeholder { font-size: 12px; line-height: 14px } #boxes ul li form ::-moz-input-placeholder { font-size: 12px; line-height: 14px } #boxes ul li form :-ms-input-placeholder { font-size: 12px; line-height: 14px } } @media only screen and (max-width:1480px) { nav { margin-left: -430px; } nav ul li a { font-weight: 400; font-size: 17px; } #slideshow:after { height:65px; } #slideshow p.quote { font-size:40px; line-height:42px; } #slideshow .pager, #slideshow .nav { bottom: 100px; } #slideshow .pager, #slideshow .nav { bottom: 100px; } #boxes ul li a { font-size: 50px; line-height: 50px; } #boxes ul li a span:after { margin-top: 40px; } #boxes ul li a span:before { margin-top: -40px; } #boxes ul li p.tagline { font-size:13px; line-height:13px; } #copy { width:90%; font-size:18px; line-height: 24px; } #copy h1 { font-size: 38px; line-height: 44px; } .column p{ padding:22% 50px 0 50px; } .column p a{ font:300 18px/22px 'Roboto', arial; } } @media only screen and (max-width:1430px) { nav { margin-left: -370px } nav ul li.drop { display: none;} nav ul li.add {display: block;} } @media only screen and (max-width:1366px) { #slideshow p.quote { font-size:34px; line-height:38px; } #boxes ul li a { font-size: 47px; line-height: 47px; } #boxes ul li a span:after { margin-top: 30px; } #boxes ul li a span:before { margin-top: -30px; } .column p a span{ top:16px; } .column p{ padding:40px 40px 0 40px; } } @media only screen and (max-width:1340px) { nav { margin-left: -360px; } .column p{ padding:18% 50px 0 50px; } } @media only screen and (max-width:1280px) { #slideshow p.quote { top:5%; font-size:30px; line-height:32px; } #slideshow:after { height:50px; } #slideshow .pager, #slideshow .nav { bottom: 80px; } #boxes ul li a { font-size: 44px; line-height: 44px; } #boxes ul li a span:after { margin-top: 25px; } #boxes ul li a span:before { margin-top: -25px; } #boxes ul li p.tagline { font-size:11.5px; line-height:11px; } #copy { width:99%; font-size:17px; line-height: 23px; } #copy h1 { font-size: 37px; line-height: 44px; } #boxes ul li.subscribe h4 { top:20% !important; font-size:43px !important; } #boxes ul li.subscribe p { display:none; } #boxes ul li form { margin-top:40%; } #boxes ul li.subscribe h4:before { display:none; } #copy .column > div h3{ font:300 20px/24px 'Roboto', arial; } } @media only screen and (max-width:1260px) { header .phone { top:50px; } header .email { display:none; } header.scroll nav { top:80px; } nav { top:100px; margin:0; left:initial; right:40px; } #boxes ul li a { font-size: 40px; line-height:40px; } #boxes ul li a span { top:50%; margin-top: -8%; } #boxes ul li.margin a span { margin-top: 1%; } #boxes ul li p.tagline { display:none; } .column p a{ font:300 20px/24px 'Roboto', arial; padding: 50px 50px 0 50px; } } @media only screen and (max-width:1160px) { #boxes ul li a { font-size: 36px; line-height:36px; } .column p a{ font:300 18px/22px 'Roboto', arial; padding:15px 0 0 0; } .column .image p{ top:32%; } .column { bottom:57%; } .column p{ padding:15px 0 0 0; } .column p a{ font:300 16px/22px 'Roboto', arial; } .column p a strong{ font-weight:600; } .column p{ padding:40px 40px 0 40px; } .column p a span{ display:none; } #copy .column{ -moz-column-count:2; -moz-column-gap:10px; -webkit-column-count:2; -webkit-column-gap:10px; -webkit-column-count:2; -moz-column-count:2; column-count:2; -webkit-column-gap:10px; -moz-column-gap:10px; column-gap:10px; } } @media only screen and (max-width:1080px) { nav ul li { margin: 0 7px; } nav ul li.stay { display:none; } .scrollelement, .scrollelement2{ opacity:1 !important; } #slideshow { height:550px; padding:0 0 8px 0;} #slideshow:after { display:none; } #slideshow .pager, #slideshow .nav { bottom:30px; } #slideshow img { position:relative; height:550px; width:auto; left:50%; margin: 0 0 0 -528px; } #boxes ul li form button[type="submit"] { left:30px; } footer .tagline p { font-size: 28px; margin: 30px 0 30px -60px; } footer .tagline .wheel { width:auto; height: 80px; margin-top: -20px; } .column .text p a{ font:300 16px/18px 'Roboto', arial; } .column .image p{ top:36%; } .responsiveTable table.mainLabels { width: 251px !important; } .responsiveTable table.respHideLabels { width: 125px; } .responsiveTable td, .responsiveTable th { padding:0; } } @media only screen and (max-width:1060px){ #copy h2.clear {clear: both;} .column { bottom:57%; } .column p{ padding:30px 40px 0 40px; } .column p a span{ bottom:-65px; } .column p a span em{ left:25px; } .column p{ top:40%; } } @media only screen and (max-width:960px) { #container { margin: 0; } header { position: relative; height: 160px; border:none; } header .inner { height:160px; background: #fff; } header .logo img { height:125px; width:auto; } header .email { display:block; } nav { position: relative; width:100%; top:160px !important; left:0; right:0; } nav ul { top:63px; } nav ul, nav ul li ul { display:none; } nav ul li a { padding:15px 0; line-height: 30px; } nav ul li ul, nav ul li a span:before { display:none; } nav ul li.drop { display: block;} nav ul li, nav ul li:last-child { display:block; width:100%; margin:0; background:#fff; border-bottom:1px solid #000; } a#pull { position:absolute; display:block !important; background: #333; width: 100%; padding: 20px 0; font: 100 24px/24px "Melbourne Light", Lato; text-align:center; } a#pull:after { content:""; background:url('../../_System/images/nav.png')right top no-repeat; width:25px; height:30px; display:inline-block; position:absolute; right:30px; top:23px; } a#pull.close:after { background-position: left top; } #slideshow { width:100%; height:auto; margin: 64px 0 0 0; } #slideshow img { position:static; width:100%; height:auto; left:0; margin: 0; } #slideshow p.quote { top:-10%; font-size:26px; line-height: 28px; } #boxes ul li { width: 50%; } #boxes ul li:nth-child(3n+1) { float:right; } #boxes ul li a { font:300 60px/60px 'Melbourne',arial; } #boxes ul li a span { top:50%; margin-top:-13%; } #boxes ul li a span:after { margin-top: 55px; } #boxes ul li a span:before { margin-top: -55px; } #boxes ul li p.tagline { display:block; font-size:14px; line-height:14px; top:80%; margin-top:-8%; } #boxes ul li.margin a span { top:32%; margin-top: -1.5%; } #boxes ul li.margin p.tagline { margin-top: 2%; } #boxes ul li.subscribe h4 { margin-top:5%; font-size:56px !important; } #boxes ul li form input { font-size: 14px; line-height: 14px; height:40px; } #boxes ul li form button[type="submit"] { font-size: 14px; top: 10px; left: 0; height: 42px; } #boxes ul li form ::-webkit-input-placeholder { font-size: 14px; line-height: 14px } #boxes ul li form :-moz-input-placeholder { font-size: 14px; line-height: 14px } #boxes ul li form ::-moz-input-placeholder { font-size: 14px; line-height: 14px } #boxes ul li form :-ms-input-placeholder { font-size: 14px; line-height: 14px } #copy { width:90%; } #copy .left, #copy .right { width:100%; padding:0; text-align:center; border: none; } #copy h1 { text-align:center; } #copy .copyHr { display:block; margin: 25px 0; border-bottom: 1px solid #eee; } footer .details { border-top: none; } footer .tagline p { font-size: 24px; margin: 20px 0 20px -60px;} footer .tagline .wheel {height: 60px; margin-top: -10px; } footer .details { padding: 0 25px; } footer .details span { color: #fff; display: block; height: 1px; } footer .details a { border-bottom: 1px solid #eee; } footer .details strong { border-bottom: 1px solid #eee; } footer .copyright p { width:auto; margin:0; padding:0; text-align:center; } footer .copyright .pd { position:static; top:0; right:0; margin:25px 0 0 0; display:block; clear:both; } #copy .column > div h3{ font:300 18px/24px 'Roboto', arial; margin: 0; padding-top: 10px; } .column .text p span{ display:none; } .column a.nav{ bottom:57%; } .column p a{ font:400 20px/24px 'Roboto', arial; padding: 4px !important; } .column p a em{ top:-10px; left:-20px; } .column p a span em{ top:-25px; left:20px; font:400 30px/30px 'Roboto', arial; } #copy .column > div.whatson { padding: 0 0 10px 0 !important; } @media only screen and (max-width:800px) { #slideshow p.quote { font-size: 24px; line-height: 26px; } #slideshow .pager { display:none !important; } #slideshow a.prev { right:50px; bottom: 20px; } #slideshow a.next { right:10px; bottom: 20px; } #boxes ul li a { font-size: 50px; line-height: 50px; } #boxes ul li a span:after { margin-top: 35px; } #boxes ul li a span:before { margin-top: -35px; } #boxes ul li p.tagline { font-size:13px; line-height:13px; } .column p{ top:45%; } .column p a{ font:300 24px/24px 'Roboto', arial; padding:18px 20px 22px 20px; } #copy .column{ -moz-column-count:1; -moz-column-gap:0; -webkit-column-count:1; -webkit-column-gap:0; -webkit-column-count:1; -moz-column-count:1; column-count:1; -webkit-column-gap:0; -moz-column-gap:0; column-gap:0; } #copy .column > div h3 { font: 300 24px/24px 'Roboto', arial; padding-top: 10px; } .column .pagination{ position:relative; bottom:0; left:0; display:block; clear:both; } .column .box{ max-height:782px; } .column{ width:100%; display:block; clear:both; } .column h3 a{ font:300 36px/40px 'Roboto', arial; padding: 50px 30px 0 30px !important;} .column h3 a:after{ top:-250px; left:-250px; } .column p{ padding:50px 20px 0 20px !important; } .column img{ display:none; } .column img.mobile{ display:block; } .column p{ top:45%; } .column p a span{ top:71px; right:50%; width:125px; height:35px; margin:0 -63px 0 0; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; opacity:1; -webkit-transform:scale(1); -ms-transform:scale(1); transform:scale(1);} .column a.nav{ bottom:53%; } } @media only screen and (max-width:700px) { #slideshow p.quote { display:none; } #boxes ul li a { font-size: 44px; line-height: 44px; } #boxes ul li a span:after { margin-top: 30px; } #boxes ul li a span:before { margin-top: -30px; } #boxes ul li p.tagline { font-size:12px; line-height:12px; } #boxes ul li.margin p.tagline { margin-top: -2%; } #boxes ul li.subscribe h4 { margin-top:5%; font-size:48px !important; } #boxes ul li form { margin-top:50%; } #boxes ul li form input { font-size: 12px; line-height: 12px; height:40px; } #boxes ul li form button[type="submit"] { font-size: 12px; top: 10px; left: 20px; height: 42px; } #boxes ul li form ::-webkit-input-placeholder { font-size: 12px; line-height: 12px } #boxes ul li form :-moz-input-placeholder { font-size: 12px; line-height: 12px } #boxes ul li form ::-moz-input-placeholder { font-size: 12px; line-height: 12px } #boxes ul li form :-ms-input-placeholder { font-size: 12px; line-height: 12px } } @media only screen and (max-width:660px) { .column h3 a{ font:300 25px/25px 'Roboto', arial; } .columm p a span{ bottom:-50px; top:66px; } } @media only screen and (max-width:600px) { header { height:200px; } header .logo { left:0; width:100%; text-align:center; } header .phone { width:100%; top:150px !important; left:0; font-size: 30px; text-align:center; } header .email { display:none; } nav { top:200px !important; } #boxes ul li a { font-size: 35px; line-height:35px; } #boxes ul li a span { top:50%; margin-top: -8%; } #boxes ul li.margin a span { margin-top: 3%; } #boxes ul li p.tagline { display:none; } #boxes ul li.subscribe h4 { margin-top:5%; font-size:40px !important; } #boxes ul li form { margin-top:45%; } #boxes ul li form input { font-size: 11px; line-height: 11px; height:40px; } #boxes ul li form button[type="submit"] { font-size: 11px; top: 10px; left: 25px; height: 42px; } #boxes ul li form ::-webkit-input-placeholder { font-size: 11px; line-height: 11px } #boxes ul li form :-moz-input-placeholder { font-size: 11px; line-height: 11px } #boxes ul li form ::-moz-input-placeholder { font-size: 11px; line-height: 11px } #boxes ul li form :-ms-input-placeholder { font-size: 11px; line-height: 11px } #copy { font-size: 16px; line-height: 20px; } #copy h1 { font-size: 30px; line-height: 38px; } footer .tagline p { margin:15px 0; } footer .tagline .wheel { display:none; } .column p{ padding:100px 80px 0 80px; } .column p a em{ left:-20px; } .column p a span{ bottom:-125px; } .column p a span em{ left:110px; } } @media only screen and (max-width:500px) { #slideshow { height:250px; padding-bottom: 4px; } #slideshow img { position:relative; width:auto; height:250px; left:50%; margin: 0 0 0 -240px; } footer .copyright .centre span { margin-top:5px; display:block; } footer .social { height:auto; padding:0 0 10px 0; } footer .social a { margin:0 auto; display:block; } footer .social a.google { margin: 10px auto 5px auto; } } @media only screen and (max-width:480px) { #boxes ul li { width:100%; max-height: 250px; border-bottom: 4px solid #fff; } #boxes ul li a { font-size: 48px; line-height: 48px; } #boxes ul li a span { margin-top: -6%; } #boxes ul li.margin a span { margin-top: -1%; } #boxes ul li a span:after { margin-top: 35px; } #boxes ul li a span:before { margin-top: -35px; } #boxes ul li.subscribe h4 { margin-top:0; font-size:40px !important; } #boxes ul li form { margin-top:120px; } #boxes ul li form input { font-size: 12px; line-height: 12px; height:40px; } #boxes ul li form button[type="submit"] { font-size: 12px; top: 10px; left: 0px; height: 42px; } #boxes ul li form ::-webkit-input-placeholder { font-size: 12px; line-height: 12px } #boxes ul li form :-ms-input-placeholder { font-size: 12px; line-height: 12px } .column p{padding: 10px !important;} .column p a{ font:300 20px/20px 'Roboto', arial; } .column p a em{ font:400 52px/52px 'Roboto', arial; left:-25px; } #copy .column > div h3 { padding: 20px 10px;} .responsiveTable table.respHideLabels { width: 115px;} } /* KEYFRAMES */ .noani a, a.noani { -webkit-animation: none !important; animation: none !important; } @-webkit-keyframes push { 50% { -webkit-transform:scale(1.1); transform:scale(1.1); } 100% { -webkit-transform:scale(1); transform:scale(1); } } @keyframes push { 50% { -webkit-transform:scale(1.1); transform:scale(1.1); } 100% { -webkit-transform:scale(1); transform:scale(1); } } @-webkit-keyframes wobble { 16.65% { -webkit-transform: translateY(5px); transform: translateY(5px); } 33.3% { -webkit-transform: translateY(-5px); transform: translateY(-5px); } 49.95% { -webkit-transform: translateY(3px); transform: translateY(3px); } 66.6% { -webkit-transform: translateY(-3px); transform: translateY(-3px); } 83.25% { -webkit-transform: translateY(1px); transform: translateY(1px); } 100% { -webkit-transform: translateY(0); transform: translateY(0); }} @keyframes wobble { 16.65% { -webkit-transform: translateY(5px); transform: translateY(5px); } 33.3% { -webkit-transform: translateY(-5px); transform: translateY(-5px); } 49.95% { -webkit-transform: translateY(3px); transform: translateY(3px); } 66.6% { -webkit-transform: translateY(-3px); transform: translateY(-3px); } 83.25% { -webkit-transform: translateY(1px); transform: translateY(1px); } 100% { -webkit-transform: translateY(0); transform: translateY(0); }}