@import url("text-and-nav-styles.css");
@import url("utility.css");

/* CSS Document */

/* ==================== GENERAL ==================== */

body {
  font: 400 17px/24px "pt-sans", sans-serif;
  margin: 0;
  padding: 0;
  position: relative;
  overflow-x: hidden;
}

.container {
  margin: 0 auto;
  position: relative;
  width: 90%;
}

/* ==================== TOP ==================== */

.top {
  background: #E9E9E9;
  margin: 0 0 15px;
  position: relative;
  z-index: 57;
}

.top span {
  display: block;
  float: left;
  font: 700 8px/30px "proxima-nova", sans-serif;
  margin: 0 10px 0 0;
}

.top img {
  display: block;
  margin: 4px 0 0;
  float: right;
}

/* ==================== HEADER ==================== */

header {
  height: 170px;
  text-align: center;
  position: relative;
  z-index: 56;
}

header img {
  margin: 0 0 10px;
}

.contact {
	width:80%;
	margin:5px 0;
}

#ph-icon {
	width:25px;
	float:right;
}

#ph-txt {
	width:200px;
	float:right;
	margin:0 0 0 5px;
}

/* ==================== BOXES ==================== */

.boxes {
  font-size: 0;
  margin: 0 auto;
  padding: 20px 0 0;
  position: relative;
  text-align: center;
  width: 100%;
  z-index: 55;
}

.box {
  display: inline-block;
 *display: inline;
  margin: 0 1% 50px !important;
  width: 90%;
  zoom: 1;
}

.box a {
  display: block;
  text-decoration: none;
}

.box a:hover {
  text-decoration: none !important;
}

.box img {
  display: block;
  margin: 0 !important;
  width: 100%;
}

/* ==================== CONTENT ==================== */

.content {
  background: url(/images/graphics/content.png) no-repeat left top;
  border-bottom: 1px dashed #999999;
  padding: 0 0 20px;
}

.content .container {
  position: relative;
  z-index: 50;
}

.content img {
  margin: 0 0 20px;
  width: 100%;
}

.content a {
  color: #1AB7EA;
  text-decoration: none;
}

.content a:hover {
  text-decoration: underline;
}

.content a.arrow {
  background: url(/images/graphics/blue-arrow.png) no-repeat left center;
  font: 700 18px/30px "proxima-nova", sans-serif;
  padding: 0 0 0 33px;
}

form {
  margin: 30px 0;
  width: 100%;
}

form .title {
  color: #273693;
  font: 700 24px/30px "proxima-nova", sans-serif;
  margin: 0 0 10px;
  text-align: center;
}

input, 
label {
  display: block;
}

label {
  margin: 4px 0;
}

input,
select,
textarea {
  border: 1px solid #666666;
  box-sizing: border-box;
  font: 400 17px/28px "pt-sans", sans-serif;
  height: 28px;
  margin: 0 0 15px;
  padding: 2px 4px;
  width: 100%;
}

textarea {
  height: 120px;
}

input[type="checkbox"] {
  float: left;
  margin: 0 10px 0 0;
  padding: 5px;
  width: auto;
}

input[type="button"],
input[type="submit"] {
  background: #273693;
  border: 0 none;
  color: #ffffff;
  font: 400 24px/40px "proxima-nova", sans-serif;
  height: 40px;
}

input[type="button"]:hover,
input[type="submit"]:hover {
  cursor: pointer;  
}

#submit {
  display: none;
}

.branch-map {
  margin: 30px 0 0;
}

.branch-map img {
  float: left;
  margin: 0 60px 30px 0;
}

.branch-map table {
  border: 0 none;
  border-collapse: collapse;
  padding: 0;
}

.branch-map td {
  padding: 5px 20px;
}

.branch-map tr:first-child td {
  color: #273693;
  font: 700 20px/28px "proxima-nova", sans-serif;
}

.branch-map tr td:first-child {
  font-weight: bold;
}

.branch {
  border-bottom: 1px solid #cccccc;
  clear: both;
  margin: 0 0 15px;
  padding: 0 0 15px;
}

.branch h2 {
  line-height: 20px;
  padding: 0 0 10px;
}

.branch:last-child {
  border: none;
  margin: 0;
  padding: 0;
}

.news .content img {
  clear: right;
  float: right;
  margin: 0 0 30px 60px;
}

/* ==================== SLIDER ==================== */

.slider {
  display: none;
  margin: 5px 0 0;
  position: relative;
}

/* ==================== FOOTER ==================== */

footer {
  font-size: 0;
  margin: 20px auto 0;
  position: relative;
  width: 90%;
  z-index: 20;
}

footer .col:nth-child(2),
footer .col:nth-child(3) {
  display: none;
}

.footer-nav {
  text-align: left;
}

.address {
  color: #ffffff;
  font: 500 15px/16px "proxima-nova", sans-serif;
  margin: 60px 0 20px;
  text-align: right;
}

.red {
  background: url(/images/graphics/footer.png) no-repeat -70px bottom;
  bottom: 100px;
  height: 100%;
  left: 0;
  position: absolute;
  width: 100%;
}

/* ==================== COPYRIGHT ==================== */

.copyright {
  background: #999999;
  padding: 15px 0;
  text-align: center;
}

#remarketing-code iframe{
	height:0px;
	margin:0;
	padding:0;
	position:absolute;	
}

/* ==================== MEDIA QUERIES ==================== */

@media only screen and (min-width: 500px) {

  .top ul {
    text-align: right;
  }
  
  .boxes {
    text-align: left;
    width: 90%;
  }
  
  .box {
    vertical-align: top;
    width: 48%;
  }
  
  .content a.arrow {
    font-size: 21px;
  }
  
  .red {
    background-position: 0 bottom;
  }
}

@media only screen and (min-width: 575px) {

  h1,
   h2 {
    text-align: left;
  }
  
  .content img {
    width: auto;
  }
  
  header {
    height: 110px;
  }
  
  .logo {
    float: left;
	width:45%;
	text-align:left;
  }
  
  .logo img {
	  width:98%;
  }
  
  .contact {
	width:50%;
	margin:12px 0 0 0;
	float:right;
  }
  
  .box img {
    width: 100%;
  }
  
  .footer-nav {
    margin: 0 10px 20px;
  }
  
  .copyright {
    text-align: left;
  }
  
  .copyright a {
    display: block;
    float: left;
    margin: 0 20px 0 0;
  }
  
  .copyright a:last-child {
    float: right;
    margin: 0;
  }
  
  .red {
    background-position: 50px bottom;
    bottom: 65px;
  }
}

@media only screen and (min-width: 664px) {

  .wrap {
    background: none;
  }
  
  form {
    float: right;
    margin: 30px 0 0 30px;
    width: 340px;
  }
  
  footer {
    margin: 0 auto;
    width: 580px;
  }
  
  .footer-nav {
    margin: 0 0 20px;
  }
  
  .equal-04 {
    width: 50%;
  }
  
  footer .col:nth-child(2n),
   footer .col:nth-child(3n) {
    display: inline-block !important;
  }
  
  .red {
    background-position: left bottom;
    left: 40% !important;
  }
  
  .address {
    margin: 80px 0 20px;
  }
}

@media only screen and (min-width: 700px) {

  body {
    position: relative;
  }
  
  .top {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 100;
  }
  
  header {
    background: #ffffff;
    padding: 10px 0;
    position: fixed;
    top: 31px;
    width: 100%;
    z-index: 100;
  }
  
  .navbar {
    margin: 0;
    position: fixed;
    top: 141px;
    width: 100%;
    z-index: 100;
  }
  
  .slider {
    margin: 181px 0 0;
  }
  
  .container,
   .wrap {
    display: block;
    margin: 0 auto;
    position: relative;
    width: 640px;
  }
  
  .slider {
    display: block;
  }
  
  .slider img {
    display: block;
    width: 100%;
  }
  
  #home .caption {
    width: 390px;
  }
  
  .caption {
    background: none;
    left: 0;
    padding: 30px 0 0;
    position: absolute;
    width: 200px;
    top: 0;
  }
  
  #home .caption h2 {
    width: 275px;
  }
  
  .caption h2 {
    color: #ffffff;
    font: 700 17px/30px "proxima-nova", sans-serif;
    margin: 0 0 10px;
    padding: 0;
    width: 150px;
  }
  
  .caption h3 {
    color: #ffffff;
    font: 500 14px/25px "proxima-nova", sans-serif;
    margin: 0 0 10px;
    text-transform: uppercase;
  }
  
  .caption ul {
    margin: 0;
    padding: 0;
  }
  
  .caption li {
    background: url(/images/graphics/slider-arrow.png) no-repeat left top;
    font: 500 13px/30px "proxima-nova", sans-serif;
    list-style: none;
    margin: 0 0 10px;
    padding: 0 0 0 33px;
  }
  
  .caption a {
    color: #1AB7EA;
    text-decoration: none;
  }
  
  .background {
    display: block !important;
    height: 100%;
    overflow: hidden;
    position: absolute;
    width: 50%;
  }
  
  .slider .left {
    background-color: #333333;
    right: 100%;
  }
  
  .slider .right {
    background-color: #1AB7EA;
    left: 100%;
  }
  
  .boxes {
    padding: 30px 0 0;
  }
  
  .column {
    float: right;
    margin: 0 0 0 20px;
    width: 45%;
  }
  
  .content .left {
    background-color: #ffffff;
    right: 100%;
  }
  
  .content .right {
    background-color: #F2F2F2;
    max-height: 750px !important;
    left: 100%;
  }
  
  footer .left {
    background-color: #ffffff;
    right: 100%;
  }
  
  footer .right {
    background-color: #1AB7EA;
    left: 100%;
  }
  
  .content {
    background: none;
  }
  
  .branch {
    height: 200px;
  }
  
  .wrap {
    background: url(/images/graphics/content.png) no-repeat 115px top;
  }
  
  footer {
    position: relative;
    width: 100%;
  }
  
  .red {
    background-position: left bottom;
    left: 65%;
  }
}

@media only screen and (min-width: 800px) {

  .navbar {
    background: #ffffff;
    top: 151px;
  }
  
  .container,
   .slider img,
   nav ul {
    background: none !important;
    display: block;
    margin: 0 auto;
    width: 760px;
  }
  
  #navigationHeader {
    display: none;
  }
  
  .slider {
    margin: 196px 0 0;
  }
  
  .logo img {
	  width:325px;
  }
  
  .contact {
	margin:22px 0 0 0;
  }
  
  #home .caption {
    width: 330px;
  }
  
  .caption {
    width: 250px;
  }
  
  .caption h2 {
    font: 700 21px/30px "proxima-nova", sans-serif;
    padding: 0;
    width: 170px;
  }
  
  .caption h3 {
    font: 500 18px/30px "proxima-nova", sans-serif;
  }
  
  .caption ul {
    margin: 20px 0 0;
  }
  
  .caption a {
    font: 500 16px/30px "proxima-nova", sans-serif;
  }
  
  .boxes {
    width: 100%;
  }
  
  .box {
    width: 23%;
  }
  
  .more-btn {
    font-size: 14px;
    text-align: left;
  }
  
  .wrap {
    background-position: 138px top !important;
    width: 760px;
  }
  
  .content .right {
    max-height: 890px !important;
  }
  
    .equal-04 {
    width: 50% !important;
  }
  
  .red {
    left: 55% !important;
  }
  
  .address {
    margin: 145px 0 20px !important;
  }
}

@media only screen and (min-width: 982px) {

  .container,
   .slider img,
   .wrap,
   nav ul {
    width: 960px;
  }
  
  .caption {
    width: 375px;
  }
  
  #home .caption h2 {
    width: 320px;
  }
  
  .caption h2 {
    font: 700 26px/40px "proxima-nova", sans-serif;
    width: 300px;
  }
  
  .caption h3 {
    font: 500 20px/30px "proxima-nova", sans-serif;
  }  
  
  .caption ul {
    margin: 20px 0 0;
  }
  
  .caption a {
    font: 700 22px/30px "proxima-nova", sans-serif;
  }
  
  .wrap {
    background-position: 175px top !important;
  }
  
  .content .right {
    max-height: 1120px !important;
  }
  
  .content .container p {
    font: 400 17px/24px "pt-sans", sans-serif;
  }
  
  .map {
    float: left;
    margin: 0 50px 20px 0 !important;
  }
  
  .equal-04 {
    width: 25% !important;
  }
  
  .address {
    margin: 100px 0 20px !important;
  }
  
  .red {
    left: 60% !important;
  }
}

@media only screen and (min-width: 1200px) {

  .container,
   .wrap,
   nav ul,
   .boxes,
   footer {
    margin: 0 auto;
    width: 1170px;
  }
  
  .top ul {
    margin: 0 auto;
    width: 1170px;
  }
 
  .caption {
    padding: 60px 0 0;
    width: 380px;
  }
  
  .caption h2 {
    font-size: 30px;
    margin: 0 0 20px;
  }
  
  .caption h3 {
    margin: 0 0 20px;
  }
  
  #home .caption h2 {
    width: 380px;
  }
  
  .caption ul {
    margin: 65px 0 0;
  }
  
  .caption li {
    margin: 0 0 30px;
  }
  
  .slider img {
    width: 1170px;
  }
  
  .box {
    margin: 0 0 50px 15px !important;
    width: 280px;
  }
  
  .box:first-child,
  .box:nth-child(5),
  .box:nth-child(9),
  .box:nth-child(13),
  .box:nth-child(17) {
    margin: 0 0 50px !important;
  }
  
  .more-btn {
    font-size: 18px !important;
    text-align: left !important;
  }
  
  .wrap {
    background-position: 210px top !important;
  }
  
  .content .right {
    max-height: 1370px !important;
  }
  
  footer .col {
    margin: 0 0 20px;
  }
  
  .address {
    margin: 85px 0 0 !important;
  }
  
  .red {
    background-position: 220px bottom !important;
    left: 50% !important;
  }
 
}