@import url(https://fonts.googleapis.com/css?family=Lato:900);
@import url(https://fonts.googleapis.com/css?family=Raleway:300,400,600,700,900);

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:'Raleway', sans-serif}
body {background:url(../images/ruby/texture.jpg)}
.main-container {width:1100px; margin:0 auto; position:relative}
.clear {clear:both}
a {text-decoration:none}
ul, li {list-style:none}

.g-recaptcha {transform:scale(0.76); -webkit-transform:scale(0.76); -moz-transform:scale(0.76); -o-transform:scale(0.76); -ms-transform:scale(0.76); transform-origin:0 0; -webkit-transform-origin:0 0; -moz-transform-origin:0 0; -o-transform-origin:0 0; -ms-transform-origin:0 0}

.enquiry {position:fixed; top:150px; right:-274px; z-index:999999; transition:right 0.3s ease-out}
.enquiry.active {right:0}
.enquiry a {position:absolute; margin-left:-46px; text-decoration:none}
.enquiry form {width:274px; padding:25px 22px 15px; background:rgba(0,0,0,0.9)}
.enquiry input[type="text"], .enquiry input[type="email"], .enquiry input[type="number"], .enquiry select {width:100%; height:30px; line-height:30px; border:1px solid #727272; margin-bottom:15px; background:none; color:#fff; padding:0 15px; font-size:15px}
.enquiry input[type="submit"] {background:#585858; width:93px; height:34px; border:0; color:#fff; text-transform:uppercase; font-size:15px; font-weight:700}
.enquiry textarea {width:100%; height:70px; border:1px solid #727272; font-size:15px; padding:5px 15px; color:#fff; background:none; resize:none; margin-bottom:10px}
.enquiry p {color:#fff; font-size:14px; line-height:18px; margin-bottom:12px; font-weight:300}
.enquiry .heading {font-size:20px; border-top:1px solid #727272; font-weight:400; margin-top:15px; padding-top:12px; text-transform:uppercase}
.enquiry p a {position:relative; margin:0; display:block; color:#fff; font-size:18px; font-weight:400; line-height:24px}
.enquiry .close {margin:-20px 0 0 230px; font-family:"Arial"; color:#fff}

.banner .links {margin-top:10px; position:absolute}
.banner .links a {display:block; float:left}
.banner a img {margin:0}
.banner .main-container > a {color:#686868; position:absolute; right:0; font-family:"Arial"; margin-top:10px}
.banner {text-align:center; min-height:100vh}
.banner .main-container {height:100vh}
.banner b {display:block; background:#98005d; width:50%; height:4px; float:left}
.banner i {display:block; background:#711371; width:50%; height:4px; float:left}
.banner img {margin-top:50px; max-width:85%}
.banner h1 {font-family:'Lato', sans-serif; font-weight:900; font-size:52px; color:#323232; text-transform:uppercase; margin-top:100px}
.banner em {width:90px; height:1px; background:#323232; display:block; position:absolute}
.banner em:first-of-type {margin:-30px 0 0 170px}
.banner em:last-of-type {margin:-30px 0 0 835px}
.banner .arrow {position:absolute; bottom:30px}

.parallax {background:url(../images/ruby/parallax.jpg) center no-repeat; background-attachment:fixed}
.parallax .main-container {height:600px; padding-top:250px}
.parallax img {position:absolute; bottom:0}
.parallax h2 {font-size:52px; font-weight:900; color:#fff; margin-left:400px; line-height:50px}

.highlights {padding:50px 0 70px}
.highlights h2, .location h2, .map h3, .clients h2, .gallery h2, .stakeholder h2, .awards h2 {font-size:42px; color:#454545; text-align:center; font-weight:300; text-transform:uppercase; margin-bottom:20px}
.highlights ul li {font-size:15px; color:#3e3e3e; font-weight:600; width:calc(50% - 40px); float:left; background:url(../images/ruby/star-bullet.png) 0 17px no-repeat; border-bottom:1px dotted #858585; line-height:22px; padding:15px 0 15px 50px}
.highlights ul li:nth-child(2), .highlights ul li:nth-child(3), .highlights ul li:nth-child(5) {float:right}
.highlights ul li:nth-child(5) {margin-bottom:50px}

.location, .download {background:#f1f1f1}
.location h2 {line-height:75px; margin-bottom:0}
.map {width:100%; height:880px; position:relative; overflow:hidden}
.map iframe {margin-top:-600px; width:100%; height:1480px; position:absolute}
.map .proximity {background:rgba(241,241,241,0.9); margin-top:300px; position:relative; z-index:99; text-align:center; padding-bottom:22px}
.map h3 {font-size:32px; padding-top:20px}
.map ul li {width:33.3%; height:200px; font-size:13px; color:#454545; border-bottom:1px solid #c1c1c1; border-left:1px solid #c1c1c1; float:left; padding:0 35px; line-height:23px; text-transform:uppercase; font-weight:600}
.map ul li img {margin:15px 0}
.map ul li b {font-weight:900; font-size:14px; display:block; margin-bottom:5px}
.map ul li p {margin-bottom:20px}
.map ul li:first-child, .map ul li:nth-child(4) {border-left:0}
.map ul li:nth-child(4), .map ul li:nth-child(5) {width:50%; border-bottom:0; height:auto}
.map ul li strong {font-weight:700}

.clients {padding:40px 0; background:#fff; border-top:2px solid #98005d}
.clients ul {margin-top:50px}
.clients ul li {width:20%; float:left; text-align:center; border-bottom:1px solid #ccc; border-left:1px solid #ccc; height:140px}
.clients ul li img {margin-top:40px; max-width:90%}
.clients ul li:nth-child(1), .clients ul li:nth-child(6) {border-left:0}
.clients ul li:nth-child(6), .clients ul li:nth-child(7), .clients ul li:nth-child(8), .clients ul li:nth-child(9), .clients ul li:nth-child(10) {border-bottom:0}
.clients ul li:nth-child(1) img, .clients ul li:nth-child(5) img {margin-top:20px}
.clients ul li:nth-child(3) img, .clients ul li:nth-child(10) img {margin-top:30px}
.clients ul li:nth-child(8) img {margin-top:50px}

.gallery {background:#f1f1f1; padding:35px 0 65px}
.gallery ul li {float:left; margin-left:15px}
.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 ul li img {display:block; margin-top:15px; width:100%}
.gallery ul li:first-child {margin-left:0}

.alliances {background:url(../images/ruby/stakeholder-bg.jpg) center no-repeat; padding:30px 0; color:#fff; text-align:center; background-attachment:fixed}
.alliances ul li {border-top:1px solid rgba(255,255,255,0.2); border-left:1px solid rgba(255,255,255,0.2); width:25%; float:left; padding:5px 20px; height:150px; font-size:14px}
.alliances ul li:nth-child(5), .alliances ul li:nth-child(6), .alliances ul li:nth-child(7), .alliances ul li:nth-child(8) {border-bottom:1px solid rgba(255,255,255,0.2); padding-top:40px}
.alliances ul li:nth-child(1), .alliances ul li:nth-child(5) {border-left:0}
.alliances ul li h4 {font-size:16px; font-weight:300; text-transform:uppercase; margin:10px 0 5px}
.alliances ul li p {font-weight:600}

.stakeholder, .awards {padding:30px 0; color:#454545; text-align:center; background:#fff; border-bottom:1px solid #ccc}
.stakeholder h2, .awards h2 {color:#454545}
.alliances h3, .stakeholder h3 {font-size:26px; text-transform:uppercase; font-weight:400; margin:30px 0}
.stakeholder img {margin-bottom:10px}
.stakeholder img:first-of-type {margin-right:50px}

.download a {display:block; text-align:center; font-size:31px; color:#454545; text-transform:uppercase; font-weight:300; line-height:62px}
.download a img {margin-right:10px}

.awards {background:#f1f1f1}
.awards p {font-size:18px; line-height:24px; margin-bottom:60px}
.awards img {max-width:100%} 

.footer {text-align:center; padding-top:70px}
.footer > img {display:block; margin:0 auto 50px}
.footer p {font-size:15px; color:#3e3e3e; padding-bottom:15px}
.footer p span {margin:0 10px}
.footer p br {display:none}
.footer p a {color:#3e3e3e}
.footer p a.active {color:#fff}
.footer p i {font-style:normal}

@media screen and (max-width:1150px) {
.main-container {width:calc(97% - 50px); margin-left:3%; margin-right:50px}
.footer .main-container {width:94%}

.banner em {display:none}

.parallax, .alliances {background-attachment:inherit}

.alliances ul li {height:180px}

.awards p br {display:none}
}

@media screen and (max-width:900px) {
.map ul li {height:230px; padding:0 25px}
.map {height:940px}

.banner img {margin-top:100px}

.clients ul li {width:33.3%}
.clients ul li:nth-child(4), .clients ul li:nth-child(7) {border-left:0}
.clients ul li:nth-child(10) {border-right:1px solid #ccc; margin-left:33.3%; width:calc(33.3% + 1px)}
.clients ul li:nth-child(6) {border-left:1px solid #ccc}
.clients ul li:nth-child(6), .clients ul li:nth-child(7), .clients ul li:nth-child(8), .clients ul li:nth-child(9) {border-bottom:1px solid #ccc}
}

@media screen and (max-width:850px) {
.banner h1 {font-size:40px}
.banner h1 br {display:none}

.parallax .main-container {height:550px}
.parallax h2 {font-size:40px; margin-left:320px; line-height:42px}
.parallax img {width:450px}

.highlights ul li {width:calc(50% - 20px)}

.alliances ul li {width:33.3%; height:200px}
.alliances ul li:nth-child(4), .alliances ul li:nth-child(7) {border-left:0}
.alliances ul li:nth-child(5) {border-left:1px solid rgba(255,255,255,0.2)}
.alliances ul li:nth-child(4) {padding-top:40px; border-bottom:1px solid rgba(255,255,255,0.2)}
.alliances ul li:nth-child(8) {border-right:1px solid rgba(255,255,255,0.2); width:calc(33.3% + 1px); border-top:0}
.alliances ul li:nth-child(7) {border-top:0}
}

@media screen and (max-width:700px) {
.parallax .main-container {height:450px; padding-top:200px}
.parallax h2 {margin-left:250px}
.parallax img {width:350px}

.banner .main-container {height:580px}

.highlights ul li {width:100%; float:none}
.highlights ul li:nth-child(2), .highlights ul li:nth-child(3), .highlights ul li:nth-child(5) {float:none}
.highlights ul li:nth-child(5) {margin-bottom:0}

.map {height:auto}
.map iframe {height:298px; margin-top:0}
.map ul li {float:none; width:100%; height:auto; border-left:0; padding:0}
.map ul li:nth-child(4), .map ul li:nth-child(5) {width:100%}
.map ul li:nth-child(4) {border-bottom:1px solid #c1c1c1}

.footer {padding-top:50px}
.footer > img {width:220px}
}

@media screen and (max-width:600px) {
.main-container	{width:calc(95% - 50px); margin-left:5%}
.footer .main-container {width:90%}

.parallax {overflow:hidden}
.parallax .main-container {height:510px; padding-top:30px}
.parallax h2 {margin-left:0; text-align:center}

.gallery ul li {float:none; margin-left:0; width:100% !important}

.alliances ul li {width:50%; height:180px}
.alliances ul li:nth-child(3), .alliances ul li:nth-child(5) {border-left:0}
.alliances ul li:nth-child(4) {border-left:1px solid rgba(255,255,255,0.2); border-bottom:0; padding-top:5px}
.alliances ul li:nth-child(8) {border-right:0; width:50%}

.stakeholder img:first-of-type {margin-right:0}

.footer p {line-height:24px}
.footer p br {display:block}
.footer p > span:nth-of-type(1) {display:none}
}

@media screen and (max-width:500px) {
.banner h1 {font-size:30px}
.parallax h2 {font-size:30px; line-height:35px}

.highlights ul li {padding-left:30px}

.clients ul {margin-top:30px}
.clients ul li {width:50%}
.clients ul li:nth-child(3), .clients ul li:nth-child(5), .clients ul li:nth-child(9) {border-left:0}
.clients ul li:nth-child(10) {border-right:0; margin-left:0; width:50%}
.clients ul li:nth-child(4) {border-left:1px solid #ccc}
.clients ul li:nth-child(9) {border-bottom:0}

.alliances ul li {width:100% !important; height:auto; border-left:0 !important; padding:20px 0 !important; border-bottom:0 !important; border-top:1px solid rgba(255,255,255,0.2) !important}
.alliances ul li:nth-child(1) {border-top:0 !important; margin-top:-20px}

.highlights h2, .location h2, .map h3, .clients h2, .gallery h2, .stakeholder h2, .awards h2 {font-size:36px}
}

@media screen and (max-width:400px) {
.main-container	{width:calc(93% - 50px); margin-left:7%}
.footer .main-container {width:86%}

.map h3 {font-size:28px; margin-bottom:0}

.highlights h2, .location h2, .map h3, .clients h2, .gallery h2, .stakeholder h2 {font-size:36px}

.clients ul li {width:100% !important; float:none; border-left:0 !important}
.clients ul li:nth-child(9) {border-bottom:1px solid #ccc}
}