/* CSS Document */

/*
--------------------------------------------------
BMRC
April 2015
Global CSS file

-------------------------------------------------- */


/* General
-----------------------------------------------------------------------------*/

html, body {height:100%; font-family: 'Lato', sans-serif; font-size:16px; line-height:16px; box-sizing: border-box; }

html {position: relative; min-height: 100%; font-size:16px; line-height:16px;}

body {margin: 0 0 270px; /* bottom = footer height */ height:100%;}

.clear {clear:both;}

.wrapper {max-width:1200px; margin:0 auto;}

.header {background:rgba(37, 124, 170, 0.7); height:60px; padding:20px 0;}

header .logo {float:left;}

.header ul {float:right; color:#fff; margin:15px 0 0 0;}

.header ul li {float:left; list-style:none; font-family: 'Lato', sans-serif; font-size:.9em; margin:0 0 0 30px; background-repeat:no-repeat; background-position:0px 2px; padding:4px 0 4px 26px; text-transform:uppercase;}

.header ul li a {color:#fff; text-decoration:none;}

.header ul li a:hover {text-decoration:underline;}

.header ul li.phone {background-image:url(../images/icon-phone.png);}

.header ul li.mail {background-image:url(../images/icon-mail.png);}

.bottom {position:absolute; left:0; bottom:0; height:270px; width:100%;}

.bottom h1 {background:rgba(37, 124, 170, 0.7); line-height:120px; text-align:center; text-transform:uppercase; color:#fff; font-family: 'Lato', sans-serif; font-weight:300; font-size:3.4em;}

.bottom .copy {background:rgba(255, 255, 255, 0.7); text-align:center; height:150px;}

.bottom h2 {color:#000; text-transform:uppercase; font-family: 'Crimson Text', serif; font-weight:600; font-size:1.6em; line-height:75px;}

.bottom a {display:inline-block; width:64px; height:64px; background-image:url(../images/icon-arrow.png); background-repeat:no-repeat; cursor:pointer; text-align:center; margin:-8px 0 0 0;}

.bottom a:hover {background-position:0 -64px;}

.left-side {float:left; width:65%; background:rgba(255, 255, 255, 0.7); height:100%;}

.left-side .text {font-family: 'Crimson Text', serif; color:#000; padding:0% 5% 5% 30%;}

.left-side .text h2 {text-transform:uppercase; font-size:1.6em; padding:100px 0 0 0;}

.left-side .text p {line-height:1.35em; font-size:1.3em; padding:25px 0 0 0;}

.left-side .text p a {text-transform:uppercase; font-size:.7em; color:#257caa; cursor:pointer;}

.left-side .text p a:hover {text-decoration:underline;}

.right-side {float:right; width:35%; background:rgba(37, 124, 170, 0.7); height:100%; color:#fff; text-transform:uppercase; font-family: 'Lato', sans-serif; font-weight:300; box-sizing: border-box; padding:0 15% 5% 3%;}

.right-side h2 {font-size:3.4em; font-weight:300; line-height:1em; padding:90px 0 0 0;}

.right-side h3 {font-size:.9em; padding:3% 0 6% 0; line-height:1.4em; font-weight:600;}

.right-side label {display:block; font-size:.9em; font-weight:400;}

.right-side .field {background:rgba(255, 255, 255, 0.4); border:1px solid #fff; padding:4px; margin:1% 0 4% 0; width:90%; height:20px; font-weight:400; color:#000; font-family: 'Lato', sans-serif; font-size:1em;}

.right-side .text-field {background:rgba(255, 255, 255, 0.4); border:1px solid #fff; padding:4px; margin:1% 0 4% 0; width:90%; height:120px; font-weight:400; color:#000; font-family: 'Lato', sans-serif; font-size:1em;}

.right-side .button {font-family: 'Crimson Text', serif; background-color:#fff; border:none; text-transform:uppercase; font-size:1em; padding: 8px 25px 5px 25px; color:#257caa; cursor:pointer; font-weight:600; margin:5% 0 0 0;}

.right-side .button:hover {background-color:#000; color:#fff;}

.right-side .error {margin:10% 0 0 0; text-transform:none; font-weight:400; background:rgba(255, 0, 0, 0.75); padding:5%; width:83%; border:1px solid #fff;}

.right-side ul {color:#fff; padding:100px 0 0 0;}

.right-side ul li {list-style:none; font-family: 'Lato', sans-serif; font-size:.9em; margin:0 0 15px 0; background-repeat:no-repeat; background-position:0px 2px; padding:4px 0 4px 26px; text-transform:uppercase;}

.right-side ul li a {color:#fff; text-decoration:none;}

.right-side ul li a:hover {text-decoration:underline;}

.right-side ul li.phone {background-image:url(../images/icon-phone.png);}

.right-side ul li.mail {background-image:url(../images/icon-mail.png);}


@media (max-width: 1250px) {
.wrapper {max-width:1030px;}
.bottom h1 {font-size:3em;}
.left-side .text {padding:0 5% 5% 25%;}
.right-side { padding:0 10% 5% 3%;}
}

@media (max-width: 1050px) {
.wrapper {max-width:820px;}
.bottom h1 {font-size:2.4em;}
.bottom h2 {font-size:1.2em;}
.left-side .text {padding:0 5% 5% 20%;}
.right-side { padding:0 6% 5% 3%;}
}

@media (max-width: 850px) {
body {margin: 0 0 230px 0 !important;}
.wrapper {max-width:650px;}
.bottom {height:230px;}
.bottom h1 {font-size:2em; line-height:80px;}
.bottom h2 {font-size:1em;}
.left-side .text {padding:0 5% 5% 9%;}
.right-side {padding:0 3% 5% 3%;}
.left-side .text h2 {font-size:1.2em; padding:60px 0 0 0;}
.left-side .text p {line-height:1.2em; font-size:1.15em; padding:20px 0 0 0;}
.right-side h2 {padding:50px 0 0 0;}
.right-side h3 {font-size:.8em;}
.right-side label {font-size:.8em;}
}

@media (max-width: 680px) {
body {margin: 0 0 120px 0 !important;}
.wrapper {max-width:400px;}
.header {text-align:center; padding:15px 0; height:90px;}
.header .logo {float:none; width:160px; height:auto;}
.header ul {float:none; color:#fff; margin:15px 0 0 0; text-align:center; display:inline-block;}
.header ul li:first-child {margin:0;}
.bottom {height:120px;}
.bottom h1 {display:none;}
.bottom h2 {line-height:50px;}
.left-side {float:none; width:100%; height:auto;}
.right-side {float:none; width:100%;  height:auto; padding:0 5% 5% 9%;}
.right-side ul {color:#fff; padding:25px 0 0 0;}
.right-side .button {margin:3% 0 0 0;}
.right-side .error {margin:5% 0 0 0; padding:5%; width:80%;}
}

@media (max-width: 650px) {
html, body {overflow:auto; }
.bottom {/*position:static;*/ margin:200px 0 0 0; height:auto;}
}

@media (max-width: 610px) {
.bottom h2 {line-height:25px; padding:15px 5px !important;}
}

@media (max-width: 420px) {
.wrapper {max-width:320px;}
.header {padding:10px 0; height:90px;}
.header .logo {width:140px;}
.header ul li {display:inline-block; text-align:center; margin:0 0 0 15px; font-size:.75em;}
.bottom h2 {line-height:22px; padding:12px 5px !important; font-size:.85em;}
}