@import url(https://fonts.googleapis.com/css?family=Roboto+Slab:400,700,300);

html, body, ul, li, p, a, h1, h2, h3, h4, h5, h6, div, span, input, label, input[type="radio"]  {margin:0; padding:0; outline:none}
* {-moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box}
input[type='number'] {-moz-appearance:textfield}
::-webkit-input-placeholder {opacity:1}
:-moz-placeholder {opacity:1}
::-moz-placeholder {opacity:1}
:-ms-input-placeholder {opacity:1}
select, input[type='submit'] {-webkit-appearance:none; -moz-appearance:none; appearance:none; font-family:'Raleway', sans-serif}

html, body {height:100%}
body, input, textarea {font-family:'Roboto Slab', sans-serif}
body, .texture {background:url(../images/hughes/texture.png) top center #23110b}
.main-container {width:1100px; margin:0 auto; position:relative}
.clear {clear:both}
a {text-decoration:none}
ul, li {list-style:none}

.enquiry {position:fixed; top:200px; right:0; z-index:999999}

.banner {text-align:center; padding-top:9%; height:100vh; background:url(../images/hughes/border-top.jpg) top center no-repeat}
.banner img {display:block; margin:0 auto; max-width:70%}
.banner img:nth-child(2) {position:absolute; bottom:20px; left:50%; margin-left:-16px}
.bounce.wait0.animated {animation:bounce-wait0 1.6s ease infinite} @keyframes bounce-wait0 {0% {transform:translateY(0)} 12.5% {transform:translateY(0)} 25% {transform:translateY(0)} 50% {transform:translateY(-5px)} 62.5% {transform:translateY(0)} 75% {transform:translateY(-5px)} 100% {transform:translateY(0)}}
.contact .links {margin-top:10px; position:absolute}
.contact .links a {display:block; float:left}
.contact a img {margin:0; margin-right:5px}
.contact .links a:nth-child(4) {color:#d3a54c; font-family:"Arial"; margin:5px 0 0 10px}
.contact .main-container > img {position:absolute; right:0; width:90px; margin-top:10px}

.overview .main-container {height:678px; background:url(../images/hughes/overviewD.jpg) no-repeat; margin-top:36px; padding-top:125px; z-index:999}
.overview .content {width:665px; padding:30px; border:6px solid transparent; color:#fff; margin-left:50px;
-webkit-border-image: url(../images/hughes/border.jpg) 30 stretch;
-o-border-image: url(../images/hughes/border.jpg) 30 stretch;
border-image: url(../images/hughes/border.jpg) 30 stretch}
.overview h2 {font-size:41px; text-transform:uppercase}
.overview .content p {font-size:15px; margin-top:15px}
.overview .main-container > img:nth-of-type(1) {display:none}

.overview ul {width:205px; position:absolute; bottom:50px; left:553px; color:#fff}
.overview ul li {display:inline-block; width:100px; margin-top:40px; line-height:18px; text-align:center}
.overview ul li img {display:block; margin:0 auto 10px}
.overview ul li b {display:block}
.overview .main-container > b {display:block; font-size:13px; font-weight:100; position:absolute; right:20px; margin-top:50px; z-index:999; color:#fff; bottom:15px}

.proximity {width:100%; position:relative; overflow:hidden}
.proximity .main-container {background:#a7d0cc; padding:30px 35px; min-height:673px}
.proximity h2 {font-size:41px; color:#23110b; max-width:530px; text-transform:uppercase; line-height:40px}
.enquire h3, .proximity h3 {font-size:22px; text-transform:uppercase; margin:20px 0}
.proximity h3 {color:#23110b; margin-top:50px}
.proximity .main-container > img:nth-of-type(1) {position:absolute; top:0; left:588px}
.proximity .main-container > img:nth-of-type(2) {margin:20px 0; display:none}
.proximity ul {width:500px; margin-top:20px}
.proximity ul li {width:50%; float:left; line-height:75px; text-transform:uppercase; color:#23110b; border-bottom:1px solid rgba(35,17,11,0.25); padding-left:10px}
.proximity ul li:nth-child(odd) {border-right:1px solid rgba(35,17,11,0.25)}
.proximity ul li:nth-child(even) {padding-left:30px}
.proximity ul li:nth-child(7), .proximity ul li:nth-child(8) {border-bottom:0}
.proximity ul li:nth-child(1), .proximity ul li:nth-child(2) {line-height:68px}
.proximity ul li img {margin-right:20px; display:block; float:left; margin-top:17px}
.proximity ul li:nth-child(1) img, .proximity ul li:nth-child(2) img {margin-top:12px}

.amenities h2, .gallery h2 {font-size:41px; color:#e4e4d9; text-transform:uppercase; line-height:125px}
.amenities ul li {float:left; margin-left:4px; margin-bottom:4px; position:relative}
.amenities ul li:nth-of-type(1) {width:39.82%}
.amenities ul li:nth-of-type(2) {width:calc(32% - 4px)}
.amenities ul li:nth-of-type(3) {width:calc(28.18% - 4px)}
.amenities ul li:nth-of-type(4) {width:58.29%}
.amenities ul li:nth-of-type(5) {width:calc(41.71% - 4px)}
.amenities ul li:first-of-type, .amenities ul li:nth-of-type(4) {margin-left:0}
.amenities ul li img {display:block; width:100%}
.amenities ul li b {width:100%; height:82px; background:url(../images/hughes/gradient.png); position:absolute; bottom:0; display:block}
.amenities ul li p {color:#fff; font-size:16px; line-height:20px; text-transform:uppercase; position:absolute; bottom:7px; z-index:9; margin:0 13px}

.gallery {background:#1b0d08; padding-top:50px; border-bottom:1px solid #3c3430; margin-top:50px}
.gallery h2 {line-height:50px}
.gallery ul li {float:left; margin-left:15px}
.gallery ul li img {display:block; margin-top:15px; width:100%}
.gallery ul li:first-child {margin-left:0}
.gallery ul li:nth-child(1) {width:calc(40.69% - 15px)}
.gallery ul li:nth-child(2) {width:calc(32.2% - 15px)}
.gallery ul li:nth-child(3) {width:calc(28.2% - 15px)}
.gallery i {font-size:13px; text-align:right; display:block; margin:5px 0 50px; color:#ccc}
.gallery ul li a {position:relative; display:block}
.gallery ul li a b {position:absolute; width:100%; height:100%; display:block}
.gallery ul li a:hover b {background:url(../images/zoom-bg.png) center}
.gallery .brochure {line-height:38px; background:#d3a54c; color:#23110b; font-weight:700; text-transform:uppercase; display:block; margin:0 auto 40px; width:235px; text-align:center}

.enquire {border-bottom:1px solid #746555; background:url(../images/hughes/footer-elevation.png) left calc(50% - 490px) bottom no-repeat; min-height:440px; color:#c8bca1; padding-bottom:30px}
.enquire .main-container {padding-top:70px; padding-left:135px}
form input {display:block}
.enquire h2 {font-size:29px; text-transform:uppercase; line-height:30px}
form .left {float:left}
form input {line-height:38px; width:100%; max-width:300px; border:1px solid #c8bca1; background:0; margin-bottom:13px; color:#c8bca1; font-size:16px; padding:0 10px}
form textarea {width:100%; max-width:300px; height:146px; border:1px solid #c8bca1; background:0; resize:none; color:#c8bca1; font-size:16px; padding:5px 10px; float:left; margin:0 13px}
form input[type="submit"] {line-height:38px; width:127px; background:#d3a54c; color:#23110b; border:0; font-weight:700; text-transform:uppercase; margin-top:27px; float:left; cursor:pointer}
.enquire .clear.mobile {display:none}
.g-recaptcha {float:left}

.footer {padding:20px 0; text-align:center; background:#1b0d08}
.footer p {font-size:13px; color:#c8bca1; margin-top:30px}
.footer p span {margin:0 10px}
.footer p br {display:none}
.footer p a {color:#c8bca1}
.footer p a.active {color:#fff}
.footer p i {font-style:normal}

@media screen and (max-width:1150px) {
.main-container {width:94%}

.proximity .main-container > img:nth-of-type(1) {left:500px}

.enquire {background:url(../images/hughes/footer-elevation.png) left -160px bottom no-repeat}
.enquire .main-container {padding-left:80px}
form input[type="submit"] {margin-right:20px}
}

@media screen and (max-width:1065px) {
.contact {position:fixed; background:#23110b; width:100%; margin-top:0; padding:5px 0; left:0; height:60px; z-index:999 !important}
.contact .main-container > img {margin-top:0}
}

@media screen and (max-width:1000px) {
.overview .main-container {background:url(../images/hughes/overviewD.jpg) right -130px center no-repeat}
.overview .content {width:70%}
.overview h2 {line-height:40px}

.proximity .main-container > img:nth-of-type(1) {left:500px; width:590px}

.enquire .clear.mobile {display:block}
form input[type="submit"] {margin-top:0}
.g-recaptcha {float:none; margin-bottom:10px}

.overview ul {left:50%; margin-left:-100px}
}

@media screen and (max-width:800px) {
.proximity .main-container {padding:30px 0}
.proximity .main-container > img:nth-of-type(1) {display:none}
.proximity .main-container > img:nth-of-type(2) {display:block}
.proximity h2, .proximity h3 {margin:0 35px}
.proximity ul {width:calc(100% - 70px); margin:0 35px}

form .left {float:none}
form textarea {float:none; display:block; margin:0 0 10px}
}

@media screen and (max-width:700px) {
.main-container	{width:92%}

.overview .main-container {padding-top:40px}
.overview .content {width:60%; margin-left:40px}
.overview h2 {font-size:30px; line-height:32px}

.amenities ul li p {font-size:13px; line-height:15px}

.enquire h2 br {display:none}
}

@media screen and (max-width:600px) {
.overview .main-container {background:url(../images/hughes/overview.jpg) center no-repeat; background-size:cover; height:auto; padding:30px; padding-bottom:0}
.overview .content {width:100%; margin-left:0}
.overview .main-container > img:nth-of-type(1) {display:block; margin:20px auto 0; padding-bottom:120px}
.overview ul {bottom:50px}
.overview ul li img {width:25px}

.banner {padding-top:12%}

.proximity {margin-top:0}
.proximity ul li {float:none; width:100%; border-right:0 !important; padding-left:0 !important}
.proximity ul li:nth-child(7) {border-bottom:1px solid rgba(35,17,11,0.25)}
.proximity h2 {font-size:30px; line-height:30px}

.amenities ul li {width:100% !important; max-height:200px; overflow:hidden}
.amenities ul li p {font-size:16px; line-height:20px}

.enquire .main-container {padding-left:0}
form {margin-left:60px}

.gallery ul li {float:none; margin-left:0; width:100% !important}

.footer p br {display:block}
.footer p > span:nth-of-type(1) {display:none}
}

@media screen and (max-width:450px) {
.main-container	{width:88%}

.banner {padding-top:calc(50vh - 180px)}

.proximity .main-container {overflow:hidden}
.proximity .main-container > img:nth-of-type(2) {margin-left:-130px}

form {margin-left:0}
.enquire {background:none}
}

@media screen and (max-width:400px) {
.overview .content {padding:0; border:0}
.proximity ul li img {margin-right:10px}

.amenities h2 {font-size:35px}
.contact .main-container > img {display:none}
}

@media screen and (max-width:340px) {
.g-recaptcha {transform:scale(0.9); -webkit-transform:scale(0.9); -moz-transform:scale(0.9); -o-transform:scale(0.9); -ms-transform:scale(0.9); transform-origin:0 0; -webkit-transform-origin:0 0; -moz-transform-origin:0 0; -o-transform-origin:0 0; -ms-transform-origin:0 0}
}