/*!* Jasny Bootstrap v3.1.0 (http://jasny.github.com/bootstrap)* Copyright 2011-2014 Arnold Daniels.* Licensed under Apache-2.0 (https://github.com/jasny/bootstrap/blob/master/LICENSE)*/.nav-tabs-bottom{border-bottom:0;border-top:1px solid #ddd}.nav-tabs-bottom>li{margin-bottom:0;margin-top:-1px}.nav-tabs-bottom>li>a{border-radius:0 0 4px 4px}.nav-tabs-bottom>li>a:hover,.nav-tabs-bottom>li>a:focus,.nav-tabs-bottom>li.active>a,.nav-tabs-bottom>li.active>a:hover,.nav-tabs-bottom>li.active>a:focus{border:1px solid #ddd;border-top-color:transparent}.nav-tabs-left{border-bottom:0;border-right:1px solid #ddd}.nav-tabs-left>li{margin-bottom:0;margin-right:-1px;float:none}.nav-tabs-left>li>a{border-radius:4px 0 0 4px;margin-right:0;margin-bottom:2px}.nav-tabs-left>li>a:hover,.nav-tabs-left>li>a:focus,.nav-tabs-left>li.active>a,.nav-tabs-left>li.active>a:hover,.nav-tabs-left>li.active>a:focus{border:1px solid #ddd;border-right-color:transparent}.row>.nav-tabs-left{padding-right:0;padding-left:15px;margin-right:-1px;position:relative;z-index:1}.row>.nav-tabs-left+.tab-content{border-left:1px solid #ddd}.nav-tabs-right{border-bottom:0;border-left:1px solid #ddd}.nav-tabs-right>li{margin-bottom:0;margin-left:-1px;float:none}.nav-tabs-right>li>a{border-radius:0 4px 4px 0;margin-left:0;margin-bottom:2px}.nav-tabs-right>li>a:hover,.nav-tabs-right>li>a:focus,.nav-tabs-right>li.active>a,.nav-tabs-right>li.active>a:hover,.nav-tabs-right>li.active>a:focus{border:1px solid #ddd;border-left-color:transparent}.row>.nav-tabs-right{padding-left:0;padding-right:15px}.navmenu,.navbar-offcanvas{width:300px;height:auto;border-width:1px;border-style:solid;border-radius:4px}.navmenu-fixed-left,.navmenu-fixed-right,.navbar-offcanvas{position:fixed;z-index:1030;top:0;bottom:0;overflow-y:auto;border-radius:0}.navmenu-fixed-left,.navbar-offcanvas.navmenu-fixed-left{left:0;right:auto;border-width:0 1px 0 0}.navmenu-fixed-right,.navbar-offcanvas{left:auto;right:0;border-width:0 0 0 1px}.navmenu-nav{margin-bottom:10px}.navmenu-nav.dropdown-menu{position:static;margin:0;padding-top:0;float:none;border:none;-webkit-box-shadow:none;box-shadow:none;border-radius:0}.navbar-offcanvas .navbar-nav{margin:0}@media (min-width:768px){.navbar-offcanvas{width:auto;border-top:0;box-shadow:none}.navbar-offcanvas.offcanvas{position:static;display:block !important;height:auto !important;padding-bottom:0;overflow:visible !important}.navbar-offcanvas .navbar-nav.navbar-left:first-child{margin-left:-15px}.navbar-offcanvas .navbar-nav.navbar-right:last-child{margin-right:-15px}.navbar-offcanvas .navmenu-brand{display:none}}.navmenu-brand{display:block;font-size:18px;line-height:20px;padding:10px 15px;margin:10px 0}.navmenu-brand:hover,.navmenu-brand:focus{text-decoration:none}.navmenu-default,.navbar-default .navbar-offcanvas{background-color:#f8f8f8;border-color:#e7e7e7}.navmenu-default .navmenu-brand,.navbar-default .navbar-offcanvas .navmenu-brand{color:#777}.navmenu-default .navmenu-brand:hover,.navbar-default .navbar-offcanvas .navmenu-brand:hover,.navmenu-default .navmenu-brand:focus,.navbar-default .navbar-offcanvas .navmenu-brand:focus{color:#5e5e5e;background-color:transparent}.navmenu-default .navmenu-text,.navbar-default .navbar-offcanvas .navmenu-text{color:#777}.navmenu-default .navmenu-nav>.dropdown>a:hover .caret,.navbar-default .navbar-offcanvas .navmenu-nav>.dropdown>a:hover .caret,.navmenu-default .navmenu-nav>.dropdown>a:focus .caret,.navbar-default .navbar-offcanvas .navmenu-nav>.dropdown>a:focus .caret{border-top-color:#333;border-bottom-color:#333}.navmenu-default .navmenu-nav>.open>a,.navbar-default .navbar-offcanvas .navmenu-nav>.open>a,.navmenu-default .navmenu-nav>.open>a:hover,.navbar-default .navbar-offcanvas .navmenu-nav>.open>a:hover,.navmenu-default .navmenu-nav>.open>a:focus,.navbar-default .navbar-offcanvas .navmenu-nav>.open>a:focus{background-color:#e7e7e7;color:#555}.navmenu-default .navmenu-nav>.open>a .caret,.navbar-default .navbar-offcanvas .navmenu-nav>.open>a .caret,.navmenu-default .navmenu-nav>.open>a:hover .caret,.navbar-default .navbar-offcanvas .navmenu-nav>.open>a:hover .caret,.navmenu-default .navmenu-nav>.open>a:focus .caret,.navbar-default .navbar-offcanvas .navmenu-nav>.open>a:focus .caret{border-top-color:#555;border-bottom-color:#555}.navmenu-default .navmenu-nav>.dropdown>a .caret,.navbar-default .navbar-offcanvas .navmenu-nav>.dropdown>a .caret{border-top-color:#777;border-bottom-color:#777}.navmenu-default .navmenu-nav.dropdown-menu,.navbar-default .navbar-offcanvas .navmenu-nav.dropdown-menu{background-color:#e7e7e7}.navmenu-default .navmenu-nav.dropdown-menu>.divider,.navbar-default .navbar-offcanvas .navmenu-nav.dropdown-menu>.divider{background-color:#f8f8f8}.navmenu-default .navmenu-nav.dropdown-menu>.active>a,.navbar-default .navbar-offcanvas .navmenu-nav.dropdown-menu>.active>a,.navmenu-default .navmenu-nav.dropdown-menu>.active>a:hover,.navbar-default .navbar-offcanvas .navmenu-nav.dropdown-menu>.active>a:hover,.navmenu-default .navmenu-nav.dropdown-menu>.active>a:focus,.navbar-default .navbar-offcanvas .navmenu-nav.dropdown-menu>.active>a:focus{background-color:#d7d7d7}.navmenu-default .navmenu-nav>li>a,.navbar-default .navbar-offcanvas .navmenu-nav>li>a{color:#777}.navmenu-default .navmenu-nav>li>a:hover,.navbar-default .navbar-offcanvas .navmenu-nav>li>a:hover,.navmenu-default .navmenu-nav>li>a:focus,.navbar-default .navbar-offcanvas .navmenu-nav>li>a:focus{color:#333;background-color:transparent}.navmenu-default .navmenu-nav>.active>a,.navbar-default .navbar-offcanvas .navmenu-nav>.active>a,.navmenu-default .navmenu-nav>.active>a:hover,.navbar-default .navbar-offcanvas .navmenu-nav>.active>a:hover,.navmenu-default .navmenu-nav>.active>a:focus,.navbar-default .navbar-offcanvas .navmenu-nav>.active>a:focus{color:#555;background-color:#e7e7e7}.navmenu-default .navmenu-nav>.disabled>a,.navbar-default .navbar-offcanvas .navmenu-nav>.disabled>a,.navmenu-default .navmenu-nav>.disabled>a:hover,.navbar-default .navbar-offcanvas .navmenu-nav>.disabled>a:hover,.navmenu-default .navmenu-nav>.disabled>a:focus,.navbar-default .navbar-offcanvas .navmenu-nav>.disabled>a:focus{color:#ccc;background-color:transparent}.navmenu-inverse,.navbar-inverse .navbar-offcanvas{background-color:#222;border-color:#080808}.navmenu-inverse .navmenu-brand,.navbar-inverse .navbar-offcanvas .navmenu-brand{color:#999}.navmenu-inverse .navmenu-brand:hover,.navbar-inverse .navbar-offcanvas .navmenu-brand:hover,.navmenu-inverse .navmenu-brand:focus,.navbar-inverse .navbar-offcanvas .navmenu-brand:focus{color:#fff;background-color:transparent}.navmenu-inverse .navmenu-text,.navbar-inverse .navbar-offcanvas .navmenu-text{color:#999}.navmenu-inverse .navmenu-nav>.dropdown>a:hover .caret,.navbar-inverse .navbar-offcanvas .navmenu-nav>.dropdown>a:hover .caret,.navmenu-inverse .navmenu-nav>.dropdown>a:focus .caret,.navbar-inverse .navbar-offcanvas .navmenu-nav>.dropdown>a:focus .caret{border-top-color:#fff;border-bottom-color:#fff}.navmenu-inverse .navmenu-nav>.open>a,.navbar-inverse .navbar-offcanvas .navmenu-nav>.open>a,.navmenu-inverse .navmenu-nav>.open>a:hover,.navbar-inverse .navbar-offcanvas .navmenu-nav>.open>a:hover,.navmenu-inverse .navmenu-nav>.open>a:focus,.navbar-inverse .navbar-offcanvas .navmenu-nav>.open>a:focus{background-color:#080808;color:#fff}.navmenu-inverse .navmenu-nav>.open>a .caret,.navbar-inverse .navbar-offcanvas .navmenu-nav>.open>a .caret,.navmenu-inverse .navmenu-nav>.open>a:hover .caret,.navbar-inverse .navbar-offcanvas .navmenu-nav>.open>a:hover .caret,.navmenu-inverse .navmenu-nav>.open>a:focus .caret,.navbar-inverse .navbar-offcanvas .navmenu-nav>.open>a:focus .caret{border-top-color:#fff;border-bottom-color:#fff}.navmenu-inverse .navmenu-nav>.dropdown>a .caret,.navbar-inverse .navbar-offcanvas .navmenu-nav>.dropdown>a .caret{border-top-color:#999;border-bottom-color:#999}.navmenu-inverse .navmenu-nav.dropdown-menu,.navbar-inverse .navbar-offcanvas .navmenu-nav.dropdown-menu{background-color:#080808}.navmenu-inverse .navmenu-nav.dropdown-menu>.divider,.navbar-inverse .navbar-offcanvas .navmenu-nav.dropdown-menu>.divider{background-color:#222}.navmenu-inverse .navmenu-nav.dropdown-menu>.active>a,.navbar-inverse .navbar-offcanvas .navmenu-nav.dropdown-menu>.active>a,.navmenu-inverse .navmenu-nav.dropdown-menu>.active>a:hover,.navbar-inverse .navbar-offcanvas .navmenu-nav.dropdown-menu>.active>a:hover,.navmenu-inverse .navmenu-nav.dropdown-menu>.active>a:focus,.navbar-inverse .navbar-offcanvas .navmenu-nav.dropdown-menu>.active>a:focus{background-color:#000}.navmenu-inverse .navmenu-nav>li>a,.navbar-inverse .navbar-offcanvas .navmenu-nav>li>a{color:#999}.navmenu-inverse .navmenu-nav>li>a:hover,.navbar-inverse .navbar-offcanvas .navmenu-nav>li>a:hover,.navmenu-inverse .navmenu-nav>li>a:focus,.navbar-inverse .navbar-offcanvas .navmenu-nav>li>a:focus{color:#fff;background-color:transparent}.navmenu-inverse .navmenu-nav>.active>a,.navbar-inverse .navbar-offcanvas .navmenu-nav>.active>a,.navmenu-inverse .navmenu-nav>.active>a:hover,.navbar-inverse .navbar-offcanvas .navmenu-nav>.active>a:hover,.navmenu-inverse .navmenu-nav>.active>a:focus,.navbar-inverse .navbar-offcanvas .navmenu-nav>.active>a:focus{color:#fff;background-color:#080808}.navmenu-inverse .navmenu-nav>.disabled>a,.navbar-inverse .navbar-offcanvas .navmenu-nav>.disabled>a,.navmenu-inverse .navmenu-nav>.disabled>a:hover,.navbar-inverse .navbar-offcanvas .navmenu-nav>.disabled>a:hover,.navmenu-inverse .navmenu-nav>.disabled>a:focus,.navbar-inverse .navbar-offcanvas .navmenu-nav>.disabled>a:focus{color:#444;background-color:transparent}.offcanvas{display:none}.offcanvas.in{display:block}@media (max-width:767px){.offcanvas-xs{display:none}.offcanvas-xs.in{display:block}}@media (max-width:991px){.offcanvas-sm{display:none}.offcanvas-sm.in{display:block}}@media (max-width:1199px){.offcanvas-md{display:none}.offcanvas-md.in{display:block}}.offcanvas-lg{display:none}.offcanvas-lg.in{display:block}.canvas-sliding{-webkit-transition:top 0.35s, left 0.35s, bottom 0.35s, right 0.35s;transition:top 0.35s, left 0.35s, bottom 0.35s, right 0.35s}.offcanvas-clone{height:0px !important;width:0px !important;overflow:hidden !important;border:none !important;margin:0px !important;padding:0px !important;position:absolute !important;top:auto !important;left:auto !important;bottom:0px !important;right:0px !important;opacity:0 !important}

/*----------------GENERIC TYPOGRAPHY AND COLORS--------------*\
Red: 		#ED1C24;
Magenta		#96070a;
Metallic: 	#A6B2B9;
Navy:		#041B28;
Off-white: 	#f7f9fa;
\*-----------------------------------------------------------*/

html {
  font-size: 20px;
  overflow-x: hidden;
}

body{
  font-family:'Titillium Web', sans-serif;
  text-align: center;
  font-size: 1rem;
  background-image: url(../img/bros-bg-big.jpg);
  color: white;
  overflow-x: hidden; /*Keep horizontal scrollbar from even appearing*/
}

.content-area {
  background: #f7f9fa;
  color: black;
}
.content-area ul {
  max-width: 300px;
  text-align: left;
  margin-left: auto;
  margin-right: auto;
}
.extra-content-area {
  color: white;
  background-color: white;
}
.text-large {
  font-size: 1.5rem;
  font-weight: 600;
}
.text-very-large {
  font-size: 3.5rem;
  text-transform: uppercase;
  font-weight: 700;
}

a {
  color: #ED1C24;
}
a:hover {
  color: #A6B2B9;
  text-decoration: none;
}
/*a*/.natural {
  color: inherit;
}
/*a*/.natural:hover {
  color: #ED1C24;
}
.mobile-inline-block {
  display: none !important;
}

.no-break {
  white-space: nowrap;
}

/*----------------GENERAL POSITIONING------------*\

\*-----------------------------------------------*/

section {
  padding-top: 4rem;
  padding-bottom: 4rem;
}
.callout {
  padding-top: 3rem;
  padding-bottom: 3rem;
}
.main-focus {
  padding-bottom: 0;
  position: relative;
  height: 368px;
}
.extra-content-area {
  position: relative;
  padding-top: 0;
}

.mT-4 { margin-top: 4rem; }
.mT-2 { margin-top: 2rem; }
.mB-4 { margin-bottom: 4rem; }
.mB-2 { margin-bottom: 2rem; }

img {
  max-width: 100%;
  display: block;
  margin-left: auto;
  margin-right: auto;
  vertical-align: middle;
  height: auto; /*Avoid applying height attr inserted by WP in certain cases*/
}
.wide-image img {
  max-width: 100%; /*100% of window width*/
  width: 1404px; /*Explicitly set 1.2x the container size*/
}
p { margin-bottom: 0; }
.content-area p { margin-bottom: 1em; }
h1 { margin: 0 0 1em 0; }
h2 { margin: 0; }
h4 { margin: 0; }

/*---------------SKINS----------------------------*\
1. Gradient border (.gradient-border) effect:
  - applies ONLY to borders
  - actual background and hover effects for buttons fall under BUTTONS AND FORMS
2. Hover effects for images ()
\*------------------------------------------------*/

h1 { /*Content page title*/
  font-size: 1.8rem;
  text-transform: uppercase;
  font-weight: 700;
}
h2 { /*info-card title*/
  font-size: 1.5rem;
  color: #96070a;
  text-transform: uppercase;
  font-weight: 600;
}

ul.info-card-list {
  list-style-type: none;
  max-width: none;
}
.info-card-list>li {
  background-image: url(../img/bullet.png);
  background-repeat: no-repeat;
  background-position: left 9px;
  padding-left: 15px;
}
.info-card-list>li.no-bullet {
  background: transparent;
}
.list-heading { /*First line of some lists*/
  font-style: italic;
  position: relative;
  left: -18px;
}

.gradient-border {
  border-top: 4px solid;
  border-bottom: 4px solid;
  position: relative; /*To align and :before and :after */
}
.gradient-border:before,
.gradient-border:after {
  content: '';
  background-repeat: no-repeat;
  background-size: 4px 100%;
  position: absolute;
  top: -4px; /*Expanded beyond the main element to avoid 'cut-off' appearance in some places*/
  bottom: -4px;
  width: 100%;
  border: none;
  }
  .gradient-border:before {
  left: -1px;
  background-position: left;
  }
  .gradient-border:after {
  right: -1px;
  background-position: right;
  }
.metallic-border { border-color: #A6B2B9; }
.metallic-border:before,
.metallic-border:after {
  background-image: -webkit-linear-gradient(#A6B2B9, white, #A6B2B9);
  background-image:    -moz-linear-gradient(#A6B2B9, white, #A6B2B9);
  background-image:      -o-linear-gradient(#A6B2B9, white, #A6B2B9);
  background-image:         linear-gradient(#A6B2B9, white, #A6B2B9);
}

.magenta-border { border-color: #96070a; }
.magenta-border:before,
.magenta-border:after {
  background-image: -webkit-linear-gradient(#96070a, #ed1c24, #96070a);
  background-image:    -moz-linear-gradient(#96070a, #ed1c24, #96070a);
  background-image:      -o-linear-gradient(#96070a, #ed1c24, #96070a);
  background-image:         linear-gradient(#96070a, #ed1c24, #96070a);
}

.navy-border { border-color: #041B28; }
.navy-border:before,
.navy-border:after {
  background-image: -webkit-linear-gradient(#041B28, #50555a, #041B28);
  background-image:    -moz-linear-gradient(#041B28, #50555a, #041B28);
  background-image:      -o-linear-gradient(#041B28, #50555a, #041B28);
  background-image:         linear-gradient(#041B28, #50555a, #041B28);
}


/*Provides hover effect on images, eg on the Rentals page*/
.active-card {
  position: relative;
  z-index: 1;
}
a:hover .active-card:before {
  z-index: 4;
  content: 'SEE ALL';
  background: transparent;
  padding-top: 100px;
  color: white;
  font-weight: 700;
}
a:hover .active-card:after {
  opacity: 0.7;
  z-index: 3;
  background-size: 100%;
  background-position: center center;
  left: -1px;
  right: -1px;
  background-image: -webkit-linear-gradient(#96070A, #ED1C24);
  background-image:    -moz-linear-gradient(#96070A, #ED1C24);
  background-image:      -o-linear-gradient(#96070A, #ED1C24);
  background-image:         linear-gradient(#96070A, #ED1C24);
}

/*--------------NAV-------------------------------*\
Main navigation menu height: 120px;
Logo size is adjusted downwards on all pages except home
\*------------------------------------------------*/

nav {
  height: 120px;
  position: relative; /*Solely to activate z-index*/
  z-index: 10; /*To position in front of truck*/
}
body:not(.home) .logo {
  height: 90px;
}
.navbar-nav>li>a {
  line-height: 120px;
  padding: 0 25px;
  font-size: 24px;
  color: white;
}
.navbar-nav>li.active>a,
.navbar-nav>li:hover>a,
.navbar-nav>li>a:hover,
.navbar-nav>li>a:focus {
  color: #ED1C24;
  background: transparent;
}
.hidden-xs #menu-item-127 { /*Hide "home" in the main nav menu*/
  display: none;
}

/*--------Mobile nav--------*/
.mobile-nav {
  position: relative;
  height: 70px;
}
.mobile-nav .navbar-brand {
  width: 100%;
  padding: 10px;
}
.bros-toggle{ /*Two elements - inside mobile nav ul and fixed to page*/
  position: fixed;
  z-index: 10;
  background:#000;
  margin: 0;
  top: 8px;
  left: 8px;
}
  .bros-toggle .icon-bar {
  background-color: white;
  color: white;
  }

#bros_m {
  width:100%;
  background-color: black;
  background-image: url(../img/bros-bg-big.jpg);
}
#bros_m .bros-toggle {
  position: absolute;
}
#bros_m .navbar-brand {
  position: absolute;
  top: 0;
  right: 0;
}
 #bros_m ul {
  width: 100%;
  margin: 50px 0 0 0;
  padding: 15px;
}
#bros_m ul>li>a {
  font-size: 40px;
  line-height: 2em;
}

/*--------------FORMS AND BUTTONS-----------------*\


\*------------------------------------------------*/

form {
  padding-top: 2rem;
}
.form-group {
  margin-bottom: 2rem;
}

.btn {
  border-radius: 0;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  background-color: transparent;
  font-size: 1.5rem;
  font-weight: 600;
  text-transform: uppercase;
  padding: 0.5em 2rem 0.5em 2rem;
  min-width: 300px;
  color: white;
  -webkit-transition: 0.5s;
  transition: 0.5s;
}
.btn:hover {
  -webkit-transition: 0.5s;
  transition: 0.5s;
}
.content-area .btn {
  color: #041B28;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  border-color: #96070a;
  background-color: #96070a;
  background-image: -webkit-linear-gradient(#96070a, #9b4a4c);
  background-image:    -moz-linear-gradient(#96070a, #9b4a4c);
  background-image:      -o-linear-gradient(#96070a, #9b4a4c);
  background-image:         linear-gradient(#96070a, #9b4a4c);
}
.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:active  {
  color: white;
  background-color: #041B28;
  background-image: -webkit-linear-gradient(#041B28, #4f5459);
  background-image:    -moz-linear-gradient(#041B28, #4f5459);
  background-image:      -o-linear-gradient(#041B28, #4f5459);
  background-image:         linear-gradient(#041B28, #4f5459);

}
.btn-submit:hover,
.btn-submit:focus,
.btn-submit:active  {
  color: black;
  background-color: #A6B2B9;
  background-image: -webkit-linear-gradient(#A6B2B9, #e8eaec);
  background-image:    -moz-linear-gradient(#A6B2B9, #e8eaec);
  background-image:      -o-linear-gradient(#A6B2B9, #e8eaec);
  background-image:         linear-gradient(#A6B2B9, #e8eaec);
}

/*Overrides*/
label { display: none; } /*Using placeholders*/
textarea.form-control { height: 100px; }

.form-control {
  color: black;
  font-weight: 600;
}

/*Gradients onto the form elements*/
input.form-control, textarea.form-control {
  background-image: -webkit-linear-gradient(#A6B2B9, #e8eaec);
  background-image:    -moz-linear-gradient(#A6B2B9, #e8eaec);
  background-image:      -o-linear-gradient(#A6B2B9, #e8eaec);
  background-image:         linear-gradient(#A6B2B9, #e8eaec);
}


/*Styling of placeholder text*/
/*Stolen from http://stackoverflow.com/questions/2610497/change-an-inputs-html5-placeholder-color-with-css*/
/*But does not seem to work in Chrome*/
input.form-control::-webkit-input-placeholder,
textarea.form-control::-webkit-input-placeholder { /* WebKit browsers */
    color: black;
  font-weight: 600;
}
input.form-control:-moz-placeholder,
textarea.form-control:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
  	color: black;
  font-weight: 600;
  opacity: 1;
}
input.form-control::-moz-placeholder,
textarea.form-control::-moz-placeholder { /* Mozilla Firefox 19+ */
  color: black;
  font-weight: 600;
  opacity: 1;
}
input.form-control:-ms-input-placeholder,
textarea.form-control:-ms-input-placeholder { /* Internet Explorer 10+ */
   color: black;
   font-weight: 600;
}



/*-------------------OTHER WIDGETS-----------------*\
1. Main focus
  - truck and lights are positioned absolute, relative to container and to each other
  - nudged upwards to cover the menu
  - site title is simply floated right and size of each line adjusted to give a smooth,
  jsutified appearance

2. Red curve
  - the red curve acts like a background image by positioning aboslute and locking to all
  four edges

3. Home callouts
  - the home callouts background must cover half of all available window width.
  - They therefore exist outside the container (but inside the row) with the background clip property
  changed to border-box
  - the button in each callout is meant to be positioned relative to the bottom of the box

4. info-card

5. Image card
  - static size (224px width, 224px height with title below) "floated center" by displaying as inline-block

\*-------------------------------------------------*/

/*-------- Home: Main focus --------*/

/*Allows click events through the heading on the homepage*/

.main-focus .truck {
  position: absolute;
  left: -6%;
  margin-top: -50px;
  width: 82%;
}
.main-focus .truck {
  z-index: 2;
}
.main-focus .truck img {
  width: 100%;
}

.site-title {
  z-index: 1;
  float: right;
  text-align: right;
  font-size: 1.6rem;
  margin: 4rem 0 0 0;
}
  /*.site-title span*/.title-line {
  display: block;
  letter-spacing: 1.5px;
  line-height: 0.75em;
  }
  .site-title .line-1 { font-size: 2.54em; }
  .site-title .line-2 { font-size: 2.04em; }
  .site-title .line-3 { font-size: 2.40em; }
  .site-title .line-4 { font-size: 1.70em; }



/*--------Home and Services: Red Curve----------*/

.main-focus .container{
  position:relative;
  z-index: 2;
}
.wide-image {
  z-index: 2;
  position: relative;
}
.red-curve {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  pointer-events: none;
  z-index: 0;
}

.red-curve 			{ top: 0;     }

.red-curve img {
  height: 100%;
  width: 100%;
}

/*-----------------Home callouts-----------------*/

/*section*/.home-callouts {
  padding: 0;
  background: white;
}
.home-callout {
  padding: 2rem;
  height: 600px;
  position: relative;
  background-size: cover;
  background-clip: border-box;
}
.home-callout img {
  display: inline;
}
.home-callout a {
  position: absolute;
  bottom: 2rem;
  right: 18%;
}
.home-callout.text-left a {
  left: 18%;
  right: auto;
}
.callout-rentals {
  background-image: url(../img/blue-filter-bg.jpg);
}
.callout-gear {
  background-image: url(../img/gear-bg-texture-full.png);
}

/*-----------------Info cards----------------*/

.info-card {
  text-align: left;
  padding: 15px;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}
.rental-info {
  min-height: 224px;
}

/*----------------Image card----------------*/

.image-card {
  display: inline-block;
  margin: 1rem 8px 1rem 8px;
}
.card-image-wrapper {
  width: 224px;
  height: 224px;
  line-height: 224px;
  vertical-align: middle;
  padding: 0;
  overflow: hidden;
  margin-left: 8px;
  margin-right: 8px;
}
.card-image-wrapper img {
  display: inline;
}
.rental-picture .card-image-wrapper {
  float: right;
}
.rental-info p {
  margin-bottom: 0.1em;
}

/*---------------------FOOTER----------------------*\
1. The graphos logo is position absolute (relative to the footer) to place it outside the container
2. The footer arrow is positioned absolute to avoid padding effects and place it right next to the white
section above it
3. Each element within the final line of the footer should have padding-bottom (1.5rem)
\*-------------------------------------------------*/


footer {
  position: relative;
  background-image: url(../img/footer-swoosh.png);
  background-repeat: no-repeat;
  background-size: auto 100%;
}

.footer-text {
  font-size: 0.8rem;
  padding-bottom: 1.5rem;
}

.footer-arrow {
  position: absolute;
  top: 0;
  width: 100%;
}
.footer-arrow-image {
  margin-top: -1px;
  width: 158px;
}

.graphos-logo {
  position: absolute;
  bottom: 0;
  right: 0;
  padding: 0 1.5rem 1.5rem 0;
}

/*------------MEDIA QUERIES---------------------*\



\*----------------------------------------------*/

@media (max-width: 1360px) {

  /*Move Graphos logo below the address information*/
  .graphos-logo {
  position: static;
  text-align: center;
  }

}

@media (max-width: 1199px) {
  /*Reposition and resize the truck to keep it from hiding the logo*/
  .main-focus .truck {
  width: 76%;
  margin-top: 0px;
  }

  /*Resize home callouts*/
  .home-callout {
  height: 500px;
  }

}

@media (max-width: 991px) {
  h3 {margin-top: 8px;}

  /*------------------------------------------------*\
  Expand the amount of space available to the menu by:
  - shrinking the logo
  - expanding the container to the window width
  - hide the "Home" link in the menu
  - remove padding on the nav ul
  - shrink padding on menu li items
  \*------------------------------------------------*/
  .home .logo {
  height: 90px;
  }

  nav .container,
  .main-focus .container {
  width: 100%;
  padding: 0;
  }

  body .logo.logo {
  height: 70px;
  margin-top: 10px;
  }

  nav .navbar-collapse {
  width: 100%;
  }

  .navbar-nav>li>a {
  /*line-height: 80px; /*Keep centered relative to logo*/
  padding: 0 15px;
  font-size: 20px;
  }

  /*Allow the main focus area including background and red curve to expand to include the title*/
  .main-focus {
  height: auto;
  }
  .main-focus .truck {
  position: static;
  width: 100%;
  margin-top: -100px;
  }
  .main-focus .lights {
  display: none;
  }

  /*Remove red resizable curve and replace with a simple linear background*/
  .red-curve img { display: none; }

  .red-curve,
  .extra-content-area .red-curve {
  background-image: -webkit-linear-gradient(#ED1C24, #96070A);
  background-image:    -moz-linear-gradient(#ED1C24, #96070A);
  background-image:      -o-linear-gradient(#ED1C24, #96070A);
  background-image:         linear-gradient(#ED1C24, #96070A);
  top: 25%;
  bottom: 0;
  }


  /*Get rid of special title sizing and positioning and just throw it under the truck*/
  .site-title {
  float: none;
  text-align: center;
  font-size: 3rem;
  margin-top: 0;
  margin-bottom: 1rem;
  }


  /*span*/.title-line {
  display: inline;
  font-size: inherit !important; /*Declared under .site-title*/
  }

  /*resize home callout*/
  .home-callout {
  height: 425px;
  }

  /*Move the rental card back to the left so it lines up with text below it.*/
  .rental-picture .card-image-wrapper {
  float: none;
  }
}

@media (max-width: 767px) {

  section {
  padding-top: 2rem;
  padding-bottom: 2rem;
  }
  footer {
  padding-top: 4rem;
  }
  .site-title {
  font-size: 1.67rem;
  }
  .text-large {
  font-size: 1rem;
  }
  h2 {
  padding-bottom: 1em;
  }

  body .logo.logo {
  height: 50px;
  margin-top: 0;
  }

  .main-focus .truck {
  margin-top: -8%;
  }

  footer {background: transparent;}

  /*Remove the huge image*/
  .wide-image {
  display: none;
  }

  /*Resize home callout*/
  .home-callout {
  height: 500px;
  }

  /*Remove graphos logo*/
  .graphos-logo {
  display: none;
  }

  /*Remove max-width on buttons and allow them to collapse with the screen*/
  .btn {
  min-width: 0;
  max-width: 100%;
  white-space: normal;
  }
  .mobile-inline-block {
   display: inline-block !important;
  }
}

@media (max-width: 500px) {
  /*change layout of Rentals inner (category) page competely.
  Single column with everything centered to the middle*/
  .rental-picture {
  width: 100%;
  float: none;

  }
  .card-image-wrapper {
  display: block;
  margin-left: auto;
  margin-right: auto;
  }
  .rental-picture .card-image-wrapper,
  .rental-info {
  float: none;
  }
  .rental-info {
  text-align: center;
  width: 100%;
  margin-top: 1rem;
  margin-bottom: 0;
  min-height: initial;
  }
}

@media (max-width: 449px) {

  /*Resize home callouts*/
  .home-callout {
  height: 400px;
  }

}

@media (max-width: 349px) {

}