/* Copyright 2014 Pebble Design Pty Ltd. All Rights Reserved. */ /* FONTS */ @font-face { font-family:'Open Sans'; font-style:normal; font-weight:400; src:local('Open Sans'), local('OpenSans'), url(../../http_/themes.googleusercontent.com/static/fonts/opensans/v8/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.html) format('woff'); } /* GENERAL */ * { text-decoration:none; border:none; outline:none; max-width: 1920px; font-family: 'Open Sans', arial; } ::-moz-selection { color:#222; background: #1cadc1; } ::selection { color:#222; background: #1cadc1; } ::-moz-selection { color:#fff; background:#272829; } .loader { z-index: 999999999; background: #fff url(../images/load.gif) center no-repeat; width: 100%; height: 100%; position: fixed; } html, body { background:#fff; margin:0 auto; padding:0; max-width: 1920px; width:100%; height:100%; min-height:100%; } #container { position:relative; max-width: 1920px; margin:auto; padding:10px; overflow:hidden; box-shadow: 0 0 2px 0; } .centre { position:relative; max-width: 80%; margin:auto; } .clear { clear:both; } strong { font-weight:600; } /* Header */ header { position: fixed; max-width: 1920px; width: 100%; height:80px; margin: 0 auto; padding: 0; text-align:center; z-index:9999; border-top: 10px solid #fff; -webkit-transform:translate3d(0,0,0); transform:translate3d(0,0,0); } header .inner { background: rgba(2, 2, 2, 0.5); position:relative; width: auto; height:80px; margin:0 auto; padding:0; border-right: 10px solid #fff; border-left: 10px solid #fff; } header .logo { position:absolute; top: 5.5px; left: 30px; margin:0 0 0 75px; padding:0; } header p.guarantee { position:absolute; margin: 10px 0 0 0; right:250px; font:600 20px/24px 'Open Sans', arial; color:#fff; height:80px; text-transform: uppercase;} header p.guarantee span { background: url(../images/tick-of-approval.png) center no-repeat; width: 25px; height: 25px; top: 5px; left: 4px; position: relative; display: inline-block; } header #mobileTagLine { opacity: 0; } header #menu-open, header #book-open { position:relative; background-color: #1cadc1; height:80px; margin:0; padding:0; cursor:pointer; overflow:hidden; -webkit-appearance:none; display:block; } header #menu-open { float:left; width:80px; border-right: 1px solid #b7bfc6; } header #book-open { float:right; width: 220px; border-left: 1px solid #b7bfc6; } header #book-open p { font: 500 30px/0px 'Fjalla One'; color: #fff; margin:0; } header #menu-open span, header #book-open span { position:absolute; top:50%; left:50%; width:30px; height:2px; font-size:0px; margin-top:-2px; margin-left:-15px; } header #menu-open span:before, header #book-open span:before, header #menu-open span:after, header #book-open span:after { position:absolute; left:0; width:100%; height:100%; -webkit-transition: all 0.2s cubic-bezier(0, 0.985, 0.17, 0.99); transition: all 0.2s cubic-bezier(0, 0.985, 0.17, 0.99); content:''; } #home header #menu-open { background: #fff; } header #menu-open span { background-color:#fff; } header #menu-open span:before, header #menu-open span:after { background-color:#fff; } header #menu-open span:after { -webkit-transform:translateY(10px) rotate(0deg); -ms-transform:translateY(10px) rotate(0deg); transform:translateY(10px) rotate(0deg); } header #menu-open span:before { -webkit-transform:translateY(-10px) rotate(0deg); -ms-transform:translateY(-10px) rotate(0deg); transform:translateY(-10px) rotate(0deg); } header #book-open p em { font-style:normal; } header #book-open p em.book { display:none; } /* Menu and Booking Panel */ #menu, #book { background:#fff; position:fixed; top:0; width:400px; height:100%; margin:0; padding:0; overflow:hidden; display:block; z-index:9999; border-radius:1px; -webkit-transition: ease 0.2s all; transition: ease 0.2s all; } #menu .content, #book .content { position:relative; width: 300px; top:50px; margin:0; padding: 0 0 0 90px; } #menu .content { padding: 0 30px 30px 30px; } #menu .menuSub { margin: 30px 0 0 30px; } #menu .menuSub a { font: 300 20px/24px 'Open Sans', arial; color:#222; text-transform: lowercase;} #menu p, #book p { font:400 14px/20px 'Open Sans', arial; color:#222; margin:0; padding:0; text-transform:none; max-width: 380px; } #menu p.heading, #book p.heading { font:200 60px/60px 'Open Sans', arial; color:#1CADC1; margin: -10px 0 0 0; padding: 0 0 30px 0; text-transform:uppercase; } #menu p.title, #book p.title { font:400 24px/24px 'Open Sans', arial; color:#1CADC1; margin:0 0 10px 0; padding:0; text-transform:capitalize; } #menu p.title2, #book p.title2 { font:200 24px/24px 'Open Sans', arial; color:#1CADC1; margin:0 0 10px 0; padding:0; text-transform:uppercase; } #menu p.title a, #book p.title a, #menu p.title2 a, #book p.title2 a { color:#1CADC1; } #menu p.text a { color: #000; } #menu hr, #book hr { border:none; border-top:1px solid #e6e5e5; margin:30px 0; clear:both; } #menu div.social { height: 32px; overflow: hidden; } #menu div.social a { float: left; } #menu div.social a.facebook { background: url(../images/icon-facebook.png) center top no-repeat; height: 32px; width: 32px; } #menu div.social a.youtube { background: url(../images/icon-youtube.png) center top no-repeat; height: 32px; width: 32px; margin: 0 10px; } #menu div.social a.googlePlus { background: url(../images/icon-googleplus.png) center top no-repeat; height: 32px; width: 32px; } #menu { left:-761px; text-align:left; border-right:1px solid #fff; } #menu.active { left:0; box-shadow:0 0 3px rgba(0,0,0,0.35); z-index:99999; } #menu.active #menu-close { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; opacity:1; } #menu nav ul, #menu nav li { -webkit-transform:translate3d(0,0,0); transform:translate3d(0,0,0); margin:0; padding:0; list-style:none; } #menu nav ul.main li { margin:0 0 15px 0; } #menu nav ul.main li p.title { line-height:35px; border-bottom:1px solid #fff; } #menu nav ul.sub li { font:400 16px/20px 'Open Sans', arial; color:#1CADC1; text-transform:uppercase; } #menu nav ul.sub li a { color:#222; } #menu nav ul.sub li.book { clear:both; display:block; } #menu nav ul.sub li.book a { background:#1CADC1; width:auto; font: 500 25px/20px 'Fjalla One', arial; color:#fff; margin:25px 0; padding:15px 30px; text-transform:uppercase; cursor:pointer; clear:both; display:inline-block; } #book { width:0; min-width:0; max-width:0; right:-1px; text-align:right; border-left:1px solid #fff; } #book form { width: 0; display: none; } #book.active form { width: auto; display: block; } #book.active { width:430px; min-width:430px; max-width:430px; box-shadow:0 0 3px rgba(0,0,0,0.35); z-index:99999; } #book.active #book-close { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; opacity:1; } #book p.title { text-transform: none; font-size: 20px; margin: 0; } #book .info { width:100%; margin:-20px 0 0 0; padding:0; } #book .info span { width:33.33%; font:400 14px/18px 'Open Sans', arial; color:#222; margin:0; padding:15px 0; text-transform:none; text-align:center; float:left; } #book input#arrival, #book input#departure { position:relative; width:100%; height:0; max-height:0; font-size:0; line-height:0; overflow:hidden; -webkit-appearance:none; clear:both; display:block; } #book .btn { background:#231f20 url(../images/datepicker.png) top center no-repeat; position:relative; width:33.33%; height:auto; margin:0; padding:35px 0 45px 0; border-right:1px solid #fff; text-align:center; float:left; overflow:hidden; } #book .btn a { cursor:pointer; display:block; color: #1CADC1; } #book .btn a:after { background:url(../../images/blank.png); position:absolute; top:-500px; left:-500px; width:1000px; height:1000px; z-index:10; content:""; display:block; } #book .btn.guests { position:relative; height:145px; margin:0 -2px 0 0; padding:0; border:none; overflow:visible; display:block; } #book .btn.guests input { background:transparent; width:100%; height:134px; font:200 58px/134px 'Source Sans Pro', arial; color:#fff; margin:0; padding:0; cursor:pointer; -webkit-appearance:none !important; vertical-align:middle; text-align:center; display:block; } #book .btn.guests ul { position:absolute; top:145px; left:0; width:100%; height:auto; overflow:hidden; display:none; z-index:10; } #book .btn.guests ul li { background:#221f20; position:relative; top:0; left:-33px; width:160%; font:200 30px/30px 'Open Sans', arial; color:#fff; padding:12px 0 18px 0; text-align:center; cursor:pointer; list-style:none; } #book .btn.guests ul li.selected { background:#333; color:#1cadc1; } #book .btn .month { background:#231f20; position:absolute; top:0; left:0; width:100%; font:600 16px/16px 'Open Sans', arial; padding:15px 0; text-transform:uppercase; } #book .btn .number { font:200 58px/65px 'Source Sans Pro', arial; color: #fff; } #book .btn.click .number { color:#e8d4a3; } #book a.booknow { background:#1CADC1; font:400 18px/18px 'Open Sans', arial; color:#fff; width:100%; margin:10px 0 0 0; padding:15px 0; text-align:center; text-transform:uppercase; cursor:pointer; display:block; } #book .bus span { position: absolute; background: url(../images/bus-thumb.png) bottom center no-repeat; width: 75px; height: 35px; left: 10px; } #book .clock span { position: absolute; background: url(../images/clock-thumb.png) bottom center no-repeat; width: 75px; height: 35px; left: 10px; } #book .plate span { position: absolute; background: url(../images/plate-thumb.png) bottom center no-repeat; width: 75px; height: 35px; left: 10px; } #book .plane span { position: absolute; background: url(../images/plane-thumb.png) bottom center no-repeat; width: 75px; height: 35px; left: 10px; } #menu-close, #book-close { background:transparent; position:absolute; top:27px; width:80px; height:80px; margin:0; padding:0; cursor:pointer; overflow:hidden; -webkit-appearance:none; display:block; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; opacity:0; z-index:99999; } #menu-close { right:25px; } #menu-close span p { display: none; } #book-close { left:25px; } #menu-close span, #book-close span { background:transparent; position:absolute; top:50%; left:50%; width:30px; height:2px; font-size:0px; margin-top:-2px; margin-left:-15px; display:block; } #menu-close span:before, #book-close span:before, #menu-close span:after, #book-close span:after { position:absolute; left:0; width:100%; height:100%; -webkit-transition: all 0.2s cubic-bezier(0, 0.985, 0.17, 0.99); transition: all 0.2s cubic-bezier(0, 0.985, 0.17, 0.99); content:''; } #menu-close span:before, #book-close span:before, #menu-close span:after, #book-close span:after { background-color:#221f20; } #menu-close span:before, #book-close span:before { -webkit-transform:translateY(0) rotate(45deg); -ms-transform:translateY(0) rotate(45deg); transform:translateY(0) rotate(45deg); } #menu-close span:after, #book-close span:after { -webkit-transform:translateY(0) rotate(-45deg); -ms-transform:translateY(0) rotate(-45deg); transform:translateY(0) rotate(-45deg); } /* Slideshow */ #slideshow { position: relative; width: 100%; height: auto; background: #ffffff; cursor: default; overflow: hidden; } #slideshow p.quote { position: absolute; font: 100 80px/50px 'Fjalla One', arial; width: 98%; margin: 25% 1%; text-align: center; vertical-align: middle; text-transform: uppercase; color: #fff; } #slideshow p.quote span { color: #EFE84F; font: 100 80px/50px 'Fjalla One', arial; } #slideshow .pager { position:absolute; bottom: 14%; width:100%; height:auto; padding:0; text-align:center; z-index:9999; } #slideshow .pager a { background:#fff; width:30px; height:5px; margin:0 3px; display:inline-block; overflow:hidden; box-shadow: #fff 0px 0px 0.5px 0px; } #slideshow .pager a span { display:none; } #slideshow .pager a.selected { background:#1CADC1; } #loader_img { background: url(../../'/_System/images/load.gif') no-repeat !important; } .slide:after, .slide:after, .fade:after, .random:after { content:""; clear:both; display:block; } .slide .item, .slide .item, .fade .item, .random .item { position:relative; width:100%; height:auto; margin:0; padding:0; float:left; overflow:hidden; cursor:default; } .slide .item img, .fade .item img, .random .item img { width:100%; height:auto; margin:0; padding:0; display:block; cursor:default; } .random .item { display:none; } a.nav { position:absolute; width: 25px; height: 35px; bottom: 5%; 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 { clear:both; } #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.roomsPrices { background: rgba(28,173,193,0.75); position:absolute; width:100%; height:100%; font:300 60px/60px 'Fjalla One',arial; color:#fff; text-align:center; text-transform:uppercase; z-index:10; } #boxes ul li a.roomsPrices span { position: absolute; width: 100%; top: 50%; margin-top: -60px; left: 0; font: 300 60px/60px 'Fjalla One',arial; color:#fff; text-transform: uppercase; } #boxes ul li a.offers { background: rgba(0,0,0,0.75); position:absolute; width:100%; height:100%; font:300 60px/60px 'Fjalla One',arial; color:#fff; text-align:center; text-transform:uppercase; z-index:10; } #boxes ul li a.offers span { position: absolute; width: 100%; top: 50%; margin-top: -30px; left: 0; font: 300 60px/60px 'Fjalla One',arial; color:#fff; text-transform: uppercase; } #boxes ul li a.roomtypes { background: #60BECA; position:absolute; width:100%; height:100%; font:300 60px/60px 'Fjalla One',arial; color:#fff; text-align:center; text-transform:uppercase; z-index:10; } #boxes ul li a.roomtypes span { position: absolute; width: 100%; top: 50%; margin-top: -30px; left: 0; font: 300 55px/55px 'Fjalla One',arial; color:#fff; text-transform: uppercase; } #boxes ul li a.facilities { background: rgba(0,0,0,0.75); position:absolute; width:100%; height:100%; font:300 60px/60px 'Fjalla One',arial; color:#fff; text-align:center; text-transform:uppercase; z-index:10; } #boxes ul li a.facilities span { position: absolute; width: 100%; height: 150px; top: 50%; margin-top: -30px; left: 0; font: 300 60px/60px 'Pacifico'; color:#fff; text-transform: capitalize; } #boxes ul li a.tours { background: rgba(239,232,79,0.75); position:absolute; width:100%; height:100%; font:300 60px/60px 'Fjalla One',arial; color:#fff; text-align:center; text-transform:uppercase; z-index:10; } #boxes ul li a.tours span { position: absolute; width: 100%; top: 50%; margin-top: -60px; left: 0; font: 300 60px/60px 'Pacifico',arial; color:#000; text-transform: capitalize; } #boxes ul li .subscribe { background: #55C1D0; position:absolute; width:100%; height: 100%; font:300 60px/60px 'Fjalla One',arial; color:#fff; text-align:center; text-transform:uppercase; z-index:10; } #boxes ul li a.map { background: rgba(0,0,0,0.5); position:absolute; width:100%; height:100%; font:300 60px/60px 'Fjalla One',arial; color:#fff; text-align:center; text-transform:uppercase; z-index:10; } #boxes ul li a.map span { position: absolute; width: 100%; height: 150px; top: 50%; margin-top: -60px; left: 0; font: 300 60px/60px 'Pacifico'; color:#fff; text-transform: capitalize; } #boxes ul li .subscribe p { position: relative; top: 20%; margin: 0; font: 300 60px/60px 'Fjalla One', arial; } #boxes ul li .subscribe + p { position: absolute; width: 70%; top: 40%; margin: 0 15%; font: 300 14px/16px 'Open Sans'; color: #fff; text-align: center; text-transform: uppercase; z-index: 10; } #boxes ul li a.news { background: rgba(0,0,0,0.75); position:absolute; width:100%; height:100%; font:300 60px/60px 'Fjalla One',arial; color:#fff; text-align:center; text-transform:uppercase; z-index:10; } #boxes ul li a.news span { position: absolute; width: 100%; top: 50%; margin-top: -60px; left: 0; font: 300 60px/60px 'Fjalla One',arial; color:#fff; text-transform: uppercase; } #boxes ul li form { position: absolute; z-index: 11; margin-top: 50%; width: 100% } #boxes ul li form input { width: 75%; height: 50px; margin: 0 auto; display: block; background: none; color: #fff; font: 600 16px/18px 'Open Sans',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 'Open Sans',arial; text-transform: uppercase; } #boxes ul li form ::-webkit-input-placeholder { color: #fff; font: 600 16px/18px 'Open Sans',arial; text-transform: uppercase; } /*#boxes ul li form ::-moz-input-placeholder { color: #fff; font: 600 16px/18px 'Open Sans',arial; text-transform: uppercase; }*/ /*#boxes ul li form :-moz-input-placeholder { color: #fff; font: 600 16px/18px 'Open Sans',arial; text-transform: uppercase; }*/ /*#boxes ul li form :-ms-input-placeholder { color: #fff; font: 600 16px/18px 'Open Sans',arial; text-transform: uppercase; }*/ .boxes, .boxWidth{ display:block; position:relative; margin:0; padding:0; width:100%; overflow:hidden; box-sizing:border-box; } .boxes{ padding:0; width:auto; clear:both; } .boxes .box img{ display:block; margin:0 auto; padding:0; width: 100%; height:auto; } .boxes .box .w100 img{ margin:0 auto; width: auto; height: 100px; } .borderTop:after{ position:absolute; top:0; right:0; width:100%; height:1px; z-index:100; content:' '; border-top:1px solid #fff; } .borderRight:before{ position:absolute; top:0; left:0; width:1px; height:100%; z-index:100; content:' '; border-left:1px solid #fff; } .borderBottom:after{ position:absolute; right:0; bottom:0; width:100%; height:1px; z-index:100; content:' '; border-top:1px solid #fff; } .borderLeft:before{ position:absolute; top:0; right:0; width:1px; height:100%; z-index:100; content:' '; border-left:1px solid #fff; } .boxWidth{ width:auto; float:left; } .boxWidth.w100{ width:100%; clear:both; } .boxWidth.w75{ width:75%; } .boxWidth.w70{ width:70%; } .boxWidth.w60{ width:60%; } .boxWidth.w50{ width:50%; } .boxWidth.w40{ width:40%; } .boxWidth.w33{ width:33.33%; } .boxWidth.w30{ width:30%; } .boxWidth.w25{ width:25%; } .boxWidth.w20{ width:20%; } .boxWidth.w16{ width:16.66%; } .boxWidth.w1{ width:1%; } .box{ overflow:hidden; } .box .boxInner{ position:absolute; margin:0 auto; padding:10px; width:100%; z-index:10; text-align:center; color:#fff; } .borderTop:after, .borderRight:before, .borderBottom:after, .borderLeft:before{ position:absolute; z-index:100; content:' '; border-color:#fff; } .borderTop:after{ top:0; right:0; width:100%; height:1px; border-top-width:1px; } .borderRight:before{ top:0; right:0; width:1px; height:100%; border-left-width:1px; } .borderBottom:after{ right:0; bottom:0; width:100%; height:1px; border-top-width:1px; } .borderLeft:before{ top:0; left:0; width:1px; height:100%; border-left-width:1px; } .box.aTxtBtn .title{ font-size:3em; } .box.aTxtBtn .btn.rightBottom{ background-color:rgba(0, 0, 0, 0.5); position:absolute; right:0; bottom:0; padding:1em; z-index:20; text-transform:lowercase; } .box.aTxtBtn p{ font-size:1.5em; } .box.aTxtBtn .subTitlePhotoGallery{ margin-left:8em; } .box.overlayGray{ background-color:#333; } .box.overlayGray img{ opacity:0.6; -ms-filter:'progid:DXImageTransform.Microsoft.Alpha(Opacity=60)'; } .box.overlayBlue{ background-color:#1560b6; } .box.overlayBlue img{ opacity:0.1; -ms-filter:'progid:DXImageTransform.Microsoft.Alpha(Opacity=10)'; } /* Main COPY */ #home { width: 100%; font:300 20px/30px 'Open Sans',arial; color:#222; padding: 30px 0; clear: both; } #home .alignRight { text-align: right; } #home a { font-weight:bold; color: #1cadc1; } #home a:hover { color:#3b3c38; } #home h1 { font: 300 47px/50px 'Fjalla One',arial; color:#222; margin:0 0 5px 0; padding:0; text-transform: uppercase; } #home p { font: 20px/24px 'Open Sans', arial; color:#222; margin:0 0 25px 0; padding:0; } #home p.intro { font: 100 30px/40px 'Open Sans',arial; color:#1CADC1; margin:0 0 25px 0; text-transform:lowercase; } #home p.fine, #home span.fine { font:300 16px/20px 'Open Sans',arial; } #home p:last-child { margin:0; } #home p a { font-weight:bold; color:#1CADC1; } #home p a:hover { color:#3b3c38; } #home p a.button { background:#3b3c38; font:300 15px/15px 'Open Sans',arial; color:#fff; margin:0; padding:15px; text-transform:uppercase; cursor:pointer; } #home p a.button:hover { background:#1CADC1; font: 300 47px/50px 'Fjalla One',arial; } #home span.heading{ color:#1CADC1; font-family: 'Fjalla One',arial; } #home .left, #home .right { width:100%; margin:0; padding:0; text-align:left; } #home .left, #home .right { width:47%; } #home .left h1, #home .right h1 { margin:0; } #home .left { padding: 50px 2.5% 50px 0; float: left; } #home .right { padding: 50px 0 50px 2.5%; border-left:1px solid #eee; float: right;} #home .contentimage { width:100%; height:auto; } /* Second Level */ .centre #copy { margin:0 auto; padding:75px 0 100px 0; width:80%; font-size:16px; font-weight:300; background: #fff;} .centre #copy h1{ display:inline-block; margin:20px 0 5px 0; padding:0; font-size:2.69em; line-height:1.4em; color: #000; text-transform:uppercase; font-family: 'Fjalla One', arial; } .centre #copy p.intro{ margin:0 0 25px 0; font-size:1.88em; line-height:1.3em; text-align:left; color:#1CADC1 } .centre #copy a:not(.btn){ background:#68CFDE; margin:0 3px; padding:0 0.3em; font-weight:400; color:#fff; border:1px solid rgba(0, 0, 0, 0); } main { background: #fff; } .secondlevel .content { margin:0 auto; padding:75px 0 100px 0; width:80%; font-size:16px; font-weight:300; background: #fff;} .secondlevel .content h1{ display:inline-block; margin:20px 0 5px 0; padding:0; font-size:2.69em; line-height:1.4em; color: #000; text-transform:uppercase; font-family: 'Fjalla One', arial; } .secondlevel .content h1 span{ font-weight:bold; font-family: 'Fjalla One'; } .secondlevel .content h3{ margin:0 0 25px 0; padding:0; font-size:1.88em; line-height:1.3em; color: #000; font-family: 'Fjalla One', arial;} .secondlevel .content h2{ margin:0 0 20px 0; padding:0; font-size:1.88em; line-height:1.3em; color: #000; font-family: 'Fjalla One', arial;} .secondlevel .content h4{ margin:0 0 15px 0; padding:0; font-size:1.25em; font-weight:400; line-height:1.3em; color: #000; font-family: 'Fjalla One', arial;} .secondlevel .content h1 a, .secondlevel .content h2 a, .secondlevel .content h3 a, { padding:0.05em 0.5em; -webkit-transition:none; transition:none; font-family: 'Fjalla One', arial; } .secondlevel .content a:not(.btn){ background:#68CFDE; margin:0 3px; padding:0 0.3em; font-weight:400; color:#fff; border:1px solid rgba(0, 0, 0, 0); } .secondlevel .content .box a:not(.btn){ background: transparent; } .secondlevel .content .imgWrapper, .secondlevel .content a.imgWrapper{ margin:-20px 0 0 0; padding:0; width:100%; height:auto; border:0; overflow: hidden; } .secondlevel .content .imgWrapper img { padding:0; width:100%; height:auto; } .secondlevel .content .imgWrapper a { background: none; } .secondlevel .content .imgWrapper a:hover { background: none; } .secondlevel .content .btn { max-width: 120px; margin: 30px 0 12px 0; padding:10px 0px; background: #68CFDE; color: white; display: block; clear: both; text-align: center; font: 200 20px/20px 'Fjalla One', arial; text-transform: uppercase;} .secondlevel .content .btn.viewattractions { max-width: 285px; display: inline-block; padding: 10px 25px} .secondlevel .content .btn.viewblog { max-width: 230px; } .secondlevel .content .btn.enquire { max-width: 140px; clear: none; margin-left: 30px; display: inline-block; padding: 10px 25px} .secondlevel .content .btn.backToRooms { max-width: 240px; } .secondlevel .content strong { font-weight:700; } .secondlevel .content h1 a { font-family: 'Fjalla One' arial;} .secondlevel .content p{ margin:0 0 25px 0; padding:0; line-height:1.56em; text-align: left; color:#424242; } .secondlevel .content p.intro{ margin:0 0 25px 0; font-size:1.88em; line-height:1.3em; text-align:left; color:#1CADC1 } .secondlevel .content span.heading{ font-size:25px; color:#222; display:block; } .secondlevel .content span.dates{ font-size:12px; font-weight:400; } .secondlevel .content .addInfo{ font-size:1em; line-height:1.25em; } .secondlevel .content ul{ background-color:#f2fafb; margin:0 0 2px 0; padding:25px; color:#4E4E4E; list-style:none; } .secondlevel .content ul h2, .secondlevel .content ul h3, .secondlevel .content ul h4{ color:#1CADC1; } .secondlevel .content ul h2 a, .secondlevel .content ul h3 a, .secondlevel .content ul h4 a, { font-family: 'Fjalla One', arial; } .secondlevel .content li{ margin:5px 0 0 0; padding:0 0 0 25px; line-height:1.25em; } .secondlevel .content li:before{ display:inline-block; position:static; margin:4px 20px 0 -28px; width:10px; height:10px; content:''; border:1px solid #61bfc5; border-radius:50px; } .secondlevel .content li.indent{ margin-left:30px; } .secondlevel .content hr{ margin:25px 0; clear:both; border:none; border-top:1px solid #fff; } .secondlevel .content .imgFloat, .secondlevel .content a.imgFloat { background: none; margin:0 25px 0 0; padding:0; width:100%; max-width:300px; height:auto; min-height:165px; float:left; overflow:hidden; border:none !important; } .secondlevel .content .imgFloat.w100 { max-width: 100%; min-height: initial; } .secondlevel .content .imgFloat.w100 img { width: auto; height: 100px; margin: 0 auto; } .secondlevel .content .meetings .imgFloat.w100 img { width: 100%; height: auto; } .secondlevel .content .boxImg { margin: 0; padding: 0; overflow: hidden; } .secondlevel .content .meetings .boxImg { margin: -20px -20px 0 -20px; padding: 0; overflow: hidden; } .secondlevel .content .boxImg + h3 { padding: 20px 0 0 0; } .secondlevel .content .boxImgRight .imgFloat { margin:0 0 0 25px; float:right; } .secondlevel .content .boxImgRight a.btn{ float:right; } .secondlevel .content .imgFloat a{ margin:0; padding:0; width:100%; height:auto; font-size:0; line-height:0; } .secondlevel .content .box{ margin:0 10px 20px 10px; padding:30px; clear:both; background: #F2FAFB; } .secondlevel .content .fullBoxLink { background: #F2FAFB; padding: 30px; } .secondlevel .content .boxWidth .box:last-child{ border:none; } .secondlevel .content .column .bgBox { background:#fff; padding: 20px; } .secondlevel .content .boxWidth.bgBox .box, .secondlevel .content .boxWidth.bgBox .box:last-child{ background:#F2FAFB; margin:0 10px 20px 10px; padding:20px 0 0 0; } .secondlevel .content .boxWidth.bgBox .box h1, .secondlevel .content .bgBox .box h2, .secondlevel .content .bgBox .box h3, .secondlevel .content .bgBox .box h4{ padding:0 30px; color: #68CFDE; } .secondlevel .content .boxWidth.bgBox .box p{ padding:10px 30px 0 30px; } /*.secondlevel .content .boxWidth.bgBox .box > p a.btn { display: block; clear: both; }*/ .secondlevel .content .box h1, .secondlevel .content .box h2, .secondlevel .content .box h3, .secondlevel .content .box h4{ display:inline-block; margin:0 0 15px 0; padding:0; color: #68CFDE; } .secondlevel .content .floatingBoxes .box h1, .secondlevel .content .floatingBoxes .box h2, .secondlevel .content .floatingBoxes .box h3, .secondlevel .content .floatingBoxes .box h4{ display:inline; padding:0; } .secondlevel .content .box h1 a, .secondlevel .content .box h2 a, .secondlevel .content .box h3 a, .secondlevel .content .box h4 a{ background:none; padding-left:0; color:#68CFDE; border:none !important; font-family: 'Fjalla One', arial; } .secondlevel .content .box p{ margin:0 0 25px 0; text-align:left; } .secondlevel .content .column{ display:block; position:relative; margin:0; padding:0 0 50px 0; width:100%; clear:both; -webkit-column-count:3; -moz-column-count:3; column-count:3; -webkit-column-gap:34px; -moz-column-gap:34px; column-gap:34px; } /*.secondlevel .content .column.attractions p {color:#1CADC1; font-size: 20px; font-family: 'Fjalla One', arial; } */ .secondlevel .content .column.bgBox{ -webkit-column-gap:20px; -moz-column-gap:20px; column-gap:20px; } .secondlevel .content .column.bgBox ul{ border:none; } .secondlevel .content .column > div{ display:inline-block; position:relative; margin:0 0 20px 0; padding: 0 0 30px 0; width:100%; overflow:hidden; text-align: center; -webkit-column-break-inside:avoid; -moz-column-break-inside:avoid; column-break-inside:avoid; -webkit-transform:translate3d(0,0,0); transform:translate3d(0,0,0); } .secondlevel .content .column.bgBox > div{ background:#f2fafb;} .secondlevel .content .column.bgBox > div h3, .secondlevel .content .column.bgBox > div p, .secondlevel .content .column.bgBox > div ul{ padding:0 30px; } .secondlevel .content .column.bgBox > div h3{ margin:30px 0 25px 0; } .secondlevel .content .column.bgBox.reviews > div h3{ color:#c3a16e; } .secondlevel .content .column > div h3 span{ background:#fff; margin:0 20px 0 0; padding:10px; } .secondlevel .content .column > div h1, .secondlevel .content .column > div h2, .secondlevel .content .column > div h3, .secondlevel .content .column > div h4{ background:none; padding-left:0; color:#68CFDE; } .secondlevel .content .column > div h3 a:not(.btn){ background: #F2FAFB; margin:0; padding:0; font-weight:400; color: #68CFDE; border:1px solid rgba(0, 0, 0, 0); font-family: 'Fjalla One', arial; } .secondlevel .content .column > div p, .secondlevel .content .column > div h3 { margin:0; padding: 20px 10px 0 10px; text-align: left; } .secondlevel .content .column > div p a.btn { display: block; clear: both; } .secondlevel .content .column > div .addInfo{ display:block; margin:20px 0 0 0; color:#1CADC1; } .secondlevel .content .column > div img{ margin:0; padding:0; width:100%; height:auto; } .secondlevel .content .column .pagination{ position:absolute; bottom:0; left:0; } .secondlevel .content .pagination{ background:none; display:block; padding:25px 0 0 0; width:100%; height:auto; clear:both !important; border:none; } .secondlevel .content ul.pagination{ margin-top:50px !important; } .secondlevel .content .pagination li{ display:inline-block; margin:0 5px 0 0; padding:0; } .secondlevel .content .pagination li:before{ display:none; } .secondlevel .content .pagination li a{ padding:4px 8px; } .secondlevel .content .pagination li.pag-current{ background:#737373; margin:-5px 5px 0 0; padding:6px 9px; font-weight:bold; color:#fff; } .secondlevel .content .pagination li a:not(pag-current){ background: #9A9A9A; color:#fff; } .secondlevel .content .contPadWrapper{ background:#F2FAFB; margin:40px 0; padding:40px; } .secondlevel .content .contPadWrapper ul{ border:none; } .secondlevel .content .contPadWrapper h2 { color:#65C6D4; } .secondlevel .content .contPadWrapper h1 a, .secondlevel .content .contPadWrapper h2 a, .secondlevel .content .contPadWrapper h3 a, .secondlevel .content .contPadWrapper h2 a { font-family: 'Fjalla One', arial !important; } .secondlevel .content .contPadWrapper div p{ margin:0; } .secondlevel .content .quote{ position:relative; margin:0; padding:5px 0 30px 0; z-index:200; } .secondlevel .content .quote .centre{ max-width:50%; text-align:center; } .secondlevel .content .quote p { font-size: larger; } .secondlevel .content .quote p .quoteIcon{ background:url('/_System/images/quote.png') center no-repeat; display:inline-block; margin:0 5px 0 0; width:60px; height:43px; } .secondlevel .content .quote p.addInfo a{ padding:8px; } .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 input[type=checkbox]{ display: inline-block; width: auto; float: none; margin: 0 20px; } .form textarea{ margin-bottom:0; width:100%; float:none; clear:both; } .form select{ padding: 24px 0; cursor: pointer; } .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:#68CFDE; 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 #68CFDE; 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:#3ECCE0; } .form .mandatory:-moz-placeholder{ line-height:1.2em; opacity:1; color:#3ECCE0; } .form .mandatory::-moz-placeholder{ line-height:1.2em; opacity:1; color:#3ECCE0; } .form .mandatory:-ms-input-placeholder{ line-height:1.56em; opacity:1; color:#3ECCE0; } .form br{ clear:both; } .reviewsForm input[type=submit]{margin:-125px 0 0 0;} /* ICONS */ .icons.w100 { width:100%; clear:both; min-height: 250px; height: auto; } .icons .w25 { width:25%; height: 100%; float: left; } .icons .w25 .imgwrap { width: auto; margin-top: 40px; -webkit-transform: translateZ(0); -ms-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); } .icons .w25 img#bus { position: relative; left: 50%; margin-left: -58.5px; } .icons .w25 img#clock { position: relative; left: 50%; margin-left: -32px; } .icons .w25 img#plate { position: relative; left: 50%; margin-left: -49px; } .icons .w25 img#plane { position: relative; left: 50%; margin-left: -43.5px; } .icons .w25 p { font: 200 20px/20px 'Open Sans', arial; text-align: center; padding: 0 50px; } .icons .w25 p { font: 200 20px/20px 'Open Sans', arial; text-align: center; padding: 0 50px; } /* Date Picker (for booking panels and enquiry forms) */ .ui-datepicker { position: fixed !important; background:#fff; font-family:'Open Sans',arial; width:520px; padding:10px; font-size:16px; line-height:20px; border-radius:0px; display:none; z-index:99999; overflow:hidden; float: right; right: 10px !important; left: auto !important; } .ui-datepicker-group { width:250px; float:left; margin:0 5px; border-radius:0px; } .ui-datepicker-group .ui-datepicker-header { position:relative; background:#3b3c38; width:260px; height:25px; margin:-5px 0 0 -5px; padding:10px 0; color:#FFF; text-transform:lowercase; } .ui-datepicker-group-first .ui-datepicker-header { -moz-border-top-left-radius:0px; border-top-left-radius:0px; } .ui-datepicker-group-last .ui-datepicker-header { -moz-border-top-right-radius:0px; border-top-right-radius:0px; } .ui-datepicker .ui-datepicker-title { font-size:16px; font-weight:bold; line-height:25px; text-align: center; } .ui-datepicker .ui-datepicker-title select { font-size:1em; margin:1px 0; } .ui-datepicker select.ui-datepicker-month-year {width: 100%;} .ui-datepicker select.ui-datepicker-month, .ui-datepicker select.ui-datepicker-year { width: 49%;} .ui-datepicker table { width:100%; border-collapse:collapse; margin:0; } .ui-datepicker th { width:25px; padding:5px; font-weight:bold; color:#696969; text-transform:lowercase; } .ui-datepicker td span, .ui-datepicker td a { display:block; padding:3px; text-align:right; text-decoration:none; } .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default { background:#fff; font-size:12px; font-weight:bold; line-height:20px; color:#696969; text-align:center; } .ui-state-hover, .ui-widget-content .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus, .ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active { background:#1CADC1; color:#fff; } .ui-widget-header .ui-state-hover { opacity:0.50; filter:Alpha(Opacity=50); cursor:pointer; } .ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited { color:#fff; text-decoration:none; } .ui-state-highlight a, .ui-widget-content .ui-state-highlight a,.ui-widget-header .ui-state-highlight a { color:#fff; } .ui-state-disabled, .ui-widget-content .ui-state-disabled, .ui-widget-header .ui-state-disabled { opacity:0.50; filter:Alpha(Opacity=50); cursor:default; } .ui-icon { width:30px; height:30px; text-indent:-99999px; overflow:hidden; display:block; } .ui-datepicker .ui-datepicker-prev .ui-icon { background:url(../../_System/images/datepicker-arrows.png) center left no-repeat; } .ui-datepicker .ui-datepicker-next .ui-icon { background:url(../../_System/images/datepicker-arrows.png) center right no-repeat; } .ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next { position:absolute; top:7px; width:30px; height:30px; } .ui-datepicker .ui-datepicker-prev:hover, .ui-datepicker .ui-datepicker-next:hover { background:none; } .ui-datepicker .ui-datepicker-prev { left:5px; } .ui-datepicker .ui-datepicker-next { right:5px; } /* Google Map (location page) */ #google-map { position:relative; padding-bottom:56.25%; height:0; overflow:hidden; max-width:100%; height:auto; margin:50px 0 0 0; } #google-map iframe, #google-map object, #google-map embed { position:absolute; top:0; left:0; width:100%; height:100%; } #google-map .overlay{ background:transparent; position:relative; width:100%; height:850px; top:850px; margin-top:-850px; z-index:99; } /* Footer */ footer { width:100%; margin:0; padding:0; clear:both; } footer .centre { width: 100% !important; } footer .tagline, footer .tagline p { background:#fff; height:auto; font:400 30px/30px 'Pacifico', arial; color:#272829; border-top:1px solid transparent; text-align:center; } footer .tagline p.rooms { font:400 35px/35px 'Pacifico', arial; } footer .tagline em { font-style:normal; } footer .tagline a { color:#272829; } footer .details { background:#fff; font:400 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 em { font-style:normal; } footer .details a { color:#272829; } footer .details p { height: auto; 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:25px 0 10px 0; text-align:center; 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; } /* Hovers */ @media only screen and (min-width:1075px) { .secondlevel .content .column > div h1 a:hover, .secondlevel .content .column > div h2 a:hover, .secondlevel .content .column > div h3 a:hover, .secondlevel .content .column > div h4 a:hover { } .secondlevel .content .fullBoxLink:hover{ background-color:#EFE84F !important; } .secondlevel .content .fullBoxLink:hover h3 a, .secondlevel .content .fullBoxLink:hover p { color: #fff; } .secondlevel .content .imgFloat:hover, .secondlevel .content a.imgFloat:hover { background: none; } .secondlevel .content a:hover, .secondlevel .fullBoxLink:hover .btn { background: #EFE84F; color: #000; } .secondlevel .content .box a:not(.btn):hover { background: transparent; } .secondlevel .content .pagination li a:not(pag-current):hover { background: #54B9C7; } .secondlevel .content input[type="submit"]:hover{ background: #EFE84F; color: #000; border: 2px solid #EFE84F;} .form input:hover, .form select:hover, .form textarea:hover{ border-bottom:2px solid #68CFDE; } .form input:focus, .form select:focus, .form textarea:focus{ border-bottom:2px solid #68CFDE; } header #menu-open:hover span:after { -webkit-transform:translateY(0) rotate(-90deg); -ms-transform:translateY(0) rotate(-90deg); transform:translateY(0) rotate(-90deg); } header #menu-open:hover span:before { -webkit-transform:translateY(0) rotate(90deg); -ms-transform:translateY(0) rotate(90deg); transform:translateY(0) rotate(90deg); } #menu nav ul.main li p.title a:hover { color:#222; } #menu nav ul.main li p.title a:hover span { margin:0 0 0 10%; } #menu nav ul.sub li a:hover { color:#221f20; } #menu nav ul.sub li.book a:hover { color: #fff; background: #222; } #menu .menuSub a:hover { color: #1CADC1; } #menu div.social a:hover { background-position: center bottom; } #menu-close:hover span:before, #menu-close:hover span:after, #book-close:hover span:before, #book-close:hover span:after { -webkit-transform:translateY(0) rotate(180deg); -ms-transform:translateY(0) rotate(180deg); transform:translateY(0) rotate(180deg); } #book p.title:hover a { color: #222; } #book .btn.guests:hover input, #book .btn.guests:focus input { color:#1CADC1; } #book .btn.guests ul li:hover { background:#222 !important; color:#fff !important; } #book .btn:hover .number, #book .btn:focus .number { color: #1CADC1; } #book a.booknow:hover { background:#221f20; } .pager a:hover { background: #EFE84F; } #home a:hover { color:#272829; } #home p a.button:hover { background:#1CADC1; } #home li a:hover { font-weight:bold; color:#333; } #home .special h3 a:hover, #home .news h3 a:hover { background: #1CADC1; } #home .news p a:hover, #home article p a:hover { background:none !important; color:#272829 !important; } #boxes ul li form input:active ::-webkit-input-placeholder { color: #fff; } #boxes ul li form input:hover { border-bottom: 2px solid #156A75;} #boxes ul li form input:focus { border-bottom: 2px solid #156A75;} #boxes ul li a.link:hover { background: rgba(255, 235, 59, 0.75); overflow: hidden; } #boxes ul li a.link:hover span { font: 300 40px/40px 'Open Sans',arial; max-height: 100%; overflow: hidden; } #boxes form input:hover::-webkit-input-placeholder, #boxes form input:focus::-webkit-input-placeholder { color: #fff; -webkit-transition-timing-function:ease; transition-timing-function:ease; -webkit-transition-duration:0.2s; transition-duration:0.2s; } #boxes form input:hover:-moz-input-placeholder, #boxes form input:focus::-moz-input-placeholder { color: #fff; transition-timing-function:ease; -webkit-transition-duration:0.2s; transition-duration:0.2s; } #boxes form input:hover::-moz-input-placeholder, #boxes form input:focus:-moz-input-placeholder { color: #fff; transition-timing-function:ease; -webkit-transition-duration:0.2s; transition-duration:0.2s; } #boxes form input:hover:-ms-input-placeholder, #boxes form input:focus::-ms-input-placeholder { color: #fff; transition-timing-function:ease; -webkit-transition-duration:0.2s; transition-duration:0.2s; } .roomsPrices:hover + img, .offers:hover + img, .roomtypes:hover + img, .facilities:hover + img, .tours:hover + img, .map:hover + img, .news:hover + img { -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); -webkit-transition: ease 0.6s; transition: ease 0.6s; overflow: hidden; } .roomsPrices:hover span, .offers:hover span, .roomtypes:hover span, .facilities:hover span, .tours:hover span, .map:hover span, .news:hover span { -webkit-transform: scale(0.9); -ms-transform: scale(0.9); transform: scale(0.9); -webkit-transition: ease 0.6s; transition: ease 0.6s; overflow: hidden; } .icons .w25:hover .imgwrap { -webkit-animation-name: wobble; animation-name: wobble; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite;} footer .inner .copyright a:hover { color:#231f20; } footer .social li a:hover { background-position: bottom left; } footer .details a:hover { color:#1CADC1; } footer .details a.tel:hover { color:#272829; } a.tel { cursor:default !important; } footer .social a:hover { background-position:bottom left; } footer .copyright p a:hover { color:#1CADC1; } footer .copyright .pd:hover { opacity:0.75; } #menu nav ul.sub li.book a:hover, #book form button:hover, .boxes .column .join form button:hover { -webkit-animation-name:push2; animation-name:push2; -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; } /* ANIMATION TIMING */ a, input, select, button, span, form, header .logo img, #menu, #menu-open, #book, #book-open, #boxes ul li img, #boxes ul li .text, #menu, #book,#book .btn:hover .number, #book .btn:focus .number, .ui-datepicker.active, #book.active form, #book form, #book form input, #book form .btn { -webkit-transition-timing-function:ease; transition-timing-function:ease; -webkit-transition-duration:0.2s; transition-duration:0.2s; } /* KEY FRAMES */ header #book-open:hover p, header .logo:hover a img, #boxes ul li form button[type="submit"]: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; } @-webkit-keyframes push { 50% { -webkit-transform:scale(1.08); transform:scale(1.08); } 100% { -webkit-transform:scale(1); transform:scale(1); } } @keyframes push { 50% { -webkit-transform:scale(1.08); transform:scale(1.08); } 100% { -webkit-transform:scale(1); transform:scale(1); } } @-webkit-keyframes wobble { 16.65% { -webkit-transform: translateY(8px); transform: translateY(8px); } 33.3% { -webkit-transform: translateY(-6px); transform: translateY(-6px); } 49.95% { -webkit-transform: translateY(4px); transform: translateY(4px); } 66.6% { -webkit-transform: translateY(-2px); transform: translateY(-2px); } 83.25% { -webkit-transform: translateY(1px); transform: translateY(1px); } 100% { -webkit-transform: translateY(0); transform: translateY(0); }} @keyframes wobble { 16.65% { -webkit-transform: translateY(8px); -ms-transform: translateY(8px); transform: translateY(8px); } 33.3% { -webkit-transform: translateY(-6px); -ms-transform: translateY(-6px); transform: translateY(-6px); } 49.95% { -webkit-transform: translateY(4px); -ms-transform: translateY(4px); transform: translateY(4px); } 66.6% { -webkit-transform: translateY(-2px); -ms-transform: translateY(-2px); transform: translateY(-2px); } 83.25% { -webkit-transform: translateY(1px); -ms-transform: translateY(1px); transform: translateY(1px); } 100% { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); }} } @media only screen and (max-width:1440px ){ } @media only screen and (max-width: 1440px) { .centre { max-width: 90%; } .secondlevel .content .w33, .secondlevel .content .w25 { width: 50%; } .secondlevel .content .column { -webkit-column-count: 2; -moz-column-count: 2; column-count: 2; } } @media only screen and (max-width:1400px) { #panel { width:auto; } #panel p:first-child { display:none; } #panel form { position:static; max-width:1160px; height:100px; margin:0 auto; } nav ul { max-width:1050px; margin:0 auto; padding:0 185px 0 0; } nav ul li.reviews { display:none; } } @media only screen and (max-width:1366px) { .centre { max-width: 100%; } #boxes ul li a span { font-size: 85% !important; } #home { width:auto; padding: 50px 25px 50px 25px; } } @media only screen and (max-width:1280px) { .centre { max-width: 100%; padding: 0; margin: 0; } #boxes ul li a span { font-size: 80% !important; } .secondlevel .content iframe.youtube { height: 500px; } } @media only screen and (max-width: 1230px) { #boxes ul li form {margin-top:58%;} #boxes ul li .subscribe p { top: 10%; } #boxes ul li .subscribe + p { top: 32% } #boxes ul li form { top: -10px; } #boxes ul li form button[type="submit"] { font-size: 14px; top: 6px; margin-right: 30px; } #boxes ul li form input { height: 40px; font-size: 14px; } #boxes ul li form input::-webkit-input-placeholder { font-size: 14px; } #boxes ul li form input::-moz-input-placeholder { font-size: 14px; } #boxes ul li form input:-moz-input-placeholder { font-size: 14px; } #boxes ul li form input::-ms-input-placeholder { font-size: 14px; } } @media only screen and (max-width:1195px) { nav ul { max-width:930px; margin:0 auto; padding:0 115px 0 0; } nav ul li.enquire { display:none; } #boxes ul li a span { font-size: 75% !important; } } 1 @media only screen and (max-width:1175px) { #boxes ul li a span { font-size: 75% !important; } #home h1 { font-size: 40px; line-height: 40px; } #home p { font-size: 17px; } footer .tagline p { font-size: 25px; margin-top: 30px; } } @media only screen and (max-width:1110px){ #boxes ul li a span { font-size: 65% !important; } } @media only screen and (max-width:1075px) { #boxes ul li .subscribe p { font-size: 40px; top: 5px; } #boxes ul li .subscribe + p { font-size: 13px; top: 60px } .secondlevel .content .w33, .secondlevel .content .w25 { width: 100%; } .secondlevel .content .column { -webkit-column-count: 1; -moz-column-count: 1; column-count: 1; } } @media only screen and (max-width: 1025px) { #slideshow p.quote, #slideshow p.quote span { font-size: 60px; } a.nav.prev { right:75px; } a.nav.next { right:25px; } .icons .w25 { width: 50%; height: 225px; } } @media only screen and (max-width: 980px) { #boxes ul li form button[type="submit"] { font-size: 12px; top: 6px; margin-right: 30px; } #boxes ul li form input { height: 40px; font-size: 12px; } #boxes ul li form input::-webkit-input-placeholder { font-size: 12px; } #boxes ul li form input::-moz-input-placeholder { font-size: 12px; } #boxes ul li form input:-moz-input-placeholder { font-size: 12px; } #boxes ul li form input::-ms-input-placeholder { font-size: 12px; } #boxes ul li a span { font-size: 62% !important; } } @media only screen and (max-width: 960px) { #boxes ul li { width: 50%; } #boxes ul li a span { font-size: 100% !important; } #boxes ul li .subscribe p { top: 20%; font-size: 60px; } #boxes ul li .subscribe + p { top: 40%; margin: 0 15%; font-size: 16px; } #boxes ul li form { margin-top: 55%; } #boxes ul li form input { height: 50px; font-size: 16px; } #boxes ul li form button[type="submit"] { height: 40px; margin: -54px 10.5% 0 0; font-size: 16px; } #boxes ul li form input::-webkit-input-placeholder { font-size: 16px; } #boxes ul li form input:-moz-input-placeholder { font-size: 16px; } #boxes ul li form input::-moz-input-placeholder { font-size:16px; } #boxes ul li form input:-ms-input-placeholder { font-size: 16px; } .secondlevel .content iframe.youtube { height: 425px; } } @media only screen and (max-width:950px) { footer .details { border-top: none; } footer .details p em.email { display:none; } #home h1 { font-size: 35px; line-height: 35px } #home p { font-size: 14px; line-height: 18px;} } @media only screen and (max-width:875px) { footer .copyright p { width: 100%; padding: 0;} footer .copyright .pd { display: block; clear: both; text-align: center; margin: 15px 0 0 0; position: relative; padding: 0;} footer .copyright .pd img {margin: 0 auto;} } @media only screen and (max-width: 800px) { #slideshow p.quote { font-size: 55px; } } @media only screen and (max-width:775px) { } @media only screen and (max-width: 760px) { #boxes ul li a span { font-size: 90% !important; } div#container { padding: 0; overflow: auto; } header { position: static; height: 240px; border: none; margin: 0; width: 100%; } header .inner { background: #222; width: 100%; border: none; } header #menu-open, header #book-open { position: relative; display: block; clear: both; top: 80px; width: 100%; margin-bottom: 1px; float: left; } header .logo { margin-left: 5px; } header p.guarantee { right: 30px; } #menu p.heading { font-size: 50px; padding: 0 0 10px 0; } #menu nav ul.main li { margin: 0; } #menu nav ul.main li p { margin: 0; line-height: 20px; } #menu nav ul.main li p.title { border: none; } /* #book-close { position: fixed; }*/ /* #book.active ~ #container { opacity: 0; height: 0; }*/ #slideshow { max-width: 1920px; width: 100%; padding: 0; margin: 0; } #slideshow p.quote { margin: 21% 1%; } #home .left h1, #home .right h1 { text-align: center; } #home .left, #home .right { display: block; width: 95%; text-align: center; border:none; } #home .left { border-bottom: 1px solid #fff; } footer .tagline p { width: 98%; margin: 30px auto; } } @media only screen and (max-width:725px) { #boxes ul li .subscribe p { top: 15%; } #boxes ul li .subscribe + p { top: 35%; } } @media only screen and (max-width:675px) { #boxes ul li a span { font-size: 80% !important; } #boxes ul li .subscribe + p { top: 35%; font-size: 13px; } #boxes ul li form input { height: 50px; font-size: 14px; } #boxes ul li form button[type="submit"] { font-size: 14px; } #boxes ul li form input::-webkit-input-placeholder { font-size: 14px; } #boxes ul li form input:-moz-input-placeholder { font-size: 14px; } #boxes ul li form input::-moz-input-placeholder { font-size:14px; } #boxes ul li form input:-ms-input-placeholder { font-size: 14px; } footer .details { padding: 0 25px; } footer .details span { color: #fff; display: block; height: 1px; } footer .details a { border-bottom: 1px solid #fff; } footer .details strong { border-bottom: 1px solid #fff; } footer .copyright p { width:auto; margin:0; padding:0; } .secondlevel .content iframe.youtube { height: 300px; } } @media only screen and (max-width: 600px) { #boxes ul li a span { font-size: 70% !important; } #slideshow p.quote, #slideshow p.quote span { font-size: 45px; } .icons .w25 { width: 100%; height: auto; } .icons .w25 .imgwrap { margin: 20px 0 0 0; } .icons .w25 p { font-size: 18px; } } @media only screen and (max-width:575px) { #home .left h1, #home .right h1 { font-size: 30px; line-height: 30px; } #home .left { padding: 0 0 20px 0; } #home .right { padding: 20px 0 0 0; } #boxes ul li form { margin-top: 55%; } #boxes ul li form input { height: 40px; } #boxes ul li form button[type="submit"] { height: 47px; font-size: 13px; } #boxes ul li .subscribe p { font-size: 50px; top: 25px; } #boxes ul li .subscribe + p { top: 33%; } #boxes ul li a span { font-size: 65% !important; } footer .details { display: block; height:auto; line-height: 25px; clear: both; } 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; } footer .copyright { font:400 12px/25px 'Open Sans', arial !important; } .ui-datepicker { width: 100%; right: 0 !important; } #book.active ~ #container { opacity: 0; height: 0; } #book.active {position: absolute; overflow: visible; box-shadow: none; width: 100%; max-width: 100%; } #menu { width: 100%; } #menu.active { position: absolute; height: auto; padding-bottom: 25px; } #menu.active ~ #container { opacity: 0; height: 0; } #book .content {right: -10%;} .secondlevel .content p.intro { font-size:1.5em;} } @media only screen and (max-width: 480px) { header { height: 280px; } header .inner { height: 120px; } header #menu-open { top: 120px; } header #book-open { top: 120px; } header .guarantee#desktopTagLine { opacity: 0; } header #mobileTagLine { opacity: 1; top: 70px; left: 0px; width: 100%; height: auto; } header p.guarantee span { display: none; } header .logo { margin: 0 auto; width: 100%; left: 0; } header .logo img { margin:0 auto;} #slideshow p.quote, #slideshow p.quote span { font-size: 35px; } #boxes ul li { width: 100%; max-height: 250px; border-bottom: 1px solid #fff; } #boxes ul li a span { font-size: 100% !important; } #boxes ul li .subscribe p { top: 14%; font-size: 60px; } #boxes ul li .subscribe + p { display: none; } #boxes ul li form { margin-top: 23%; } #boxes ul li form input { height: 50px; font-size: 16px; } #boxes ul li form button[type="submit"] { height: 40px; margin: -54px 10.5% 0 0; font-size: 16px; } #boxes ul li form input::-webkit-input-placeholder { font-size: 16px; } #boxes ul li form input:-moz-input-placeholder { font-size: 16px; } #boxes ul li form input::-moz-input-placeholder { font-size:16px; } #boxes ul li form input:-ms-input-placeholder { font-size: 16px; } footer .tagline p { font-size: 22px; } .secondlevel .content iframe.youtube { height: auto; } #book .content {right:0;} } @media only screen and (max-width:450px) { #boxes ul li form { margin-top: 27%; } /* #book.active .content { float: right; padding: 0 45px 0 0; width: 300px; }*/ #book div .bus span, #book div .plate span, #book div .clock span, #book div .plane span {visibility: hidden;} /*#book.active { position: absolute; min-width: 100%; max-width: 100%; width: 100%; height: auto; overflow: visible; padding-bottom: 60px; } #book-close { right: 100px;} */ #book.active .content { float: right; padding: 0 10px 0 0; width: 295px; } #boxes ul li a span { font-size: 80% !important; } #boxes ul li form { margin-top: 30%; } #book-close { left: 50px; } #book.active .content { padding: 0 60px 0 0;} } @media only screen and (max-width:400px) { #slideshow { height: 300px; } #slideshow p.quote, #slideshow p.quote span { margin: 30% 1%; font-size: 45px; } #slideshow .fade { overflow: visible; } #slideshow .item { height: 300px; } #slideshow .item img { height: 100%; width: auto; } #slideshow .pager a { display: none; } #menu-close { right: 10px; position: fixed; } #book.active .content { padding: 0 30px 0 0;} #book-close { left: 80px; } } @media only screen and (max-width:350px) { header .logo { width:100%; height:auto; } .icons .w25 p { font-size: 14px; } .icons .w25 .imgwrap { margin-top: 0; } .icons .w25 .imgwrap:first-child { margin-top: 10px; } .icons .w25 img { width: auto; height: 50px; } .icons .w25 img#bus { position: relative; left: 50%; margin-left: -41px; } .icons .w25 img#clock { position: relative; left: 50%; margin-left: -18px; } .icons .w25 img#plate { position: relative; left: 50%; margin-left: -25px; } .icons .w25 img#plane { position: relative; left: 50%; margin-left: -18px; } #boxes ul li form { margin-top: 35%; } #book.active .content { padding: 0 20px 0 0;} #book-close { left: 90px; } } .form div.form-progress-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); display: none; z-index: 1000; } .form-progress-loading { position: absolute; top: 50%; left: 50%; bottom: unset; right: unset; transform: translateX(-50%) translateY(-50%); } .form div.form-progress-loading * { position: relative; right: unset; bottom: unset; } .form.loading div.form-progress-overlay { display: block; } h3#form-success { position: absolute; top: 50%; left: 50%; color: #fff; transform: translateX(-50%) translateY(-50%) scale(0.85); opacity: 0; transition: all 0.25s; transform-origin: center; } h3#form-success.in { transform: scale(1) translateX(-50%) translateY(-50%); opacity: 1; } .form.loading.loaded div.form-progress-overlay { display: block; background: rgba(0,0,0,0.8); }