/*	--------------------------------------------------
	:: Text formatting
	-------------------------------------------------- */

/*
'Futura Pro Light'
'Futura Pro Book'
'Futura Pro Medium'
'Futura Pro Bold'

font-family: 'Muli', sans-serif;
*/

#mfPreviewBarShow {
    display: none;
}


/*	--------------------------------------------------
	:: Scaffolding
	-------------------------------------------------- */


body {
    height: 100%;
    font-family: 'Muli', Tahoma, Helvetica, sans-serif;
    color: #000000;
    font-size: 18px;
    font-weight: 400;
}

html {
}

.sfPublicWrapper {
    overflow: hidden;
}

#HeaderWrapper {
}


    #HeaderWrapper .container-fluid {
        position: relative;
    }


#MainWrapper {
    height: 100%;
    min-height: 100%;
    width: 100%;
}

    #MainWrapper .page-content {
        /*	width: 100%;
	max-width:1920px;
	padding: 0 5% 60px 5%;*/
        padding-bottom: 50px;
        /*	margin-top: -85px;
	float: left;*/
        margin-right: auto;
        margin-left: auto;
    }

.page-container {
    margin-top: 20px;
}

#FooterWrapper {
}

.circle-image {
    border-radius: 50%;
}

/*	--------------------------------------------------
	:: Full Size Page Banner Image
	-------------------------------------------------- */



@media (min-width: 992px) {

    .full-size-container {
        max-width: 1320px;
        margin-left: auto;
        margin-right: auto;
        background-color: #ffffff;
    }
}


@media (min-width: 1320px) {
    .full-size-container {
        width: 1320px;
        margin-left: auto;
        margin-right: auto;
    }
}

.container-wide img,
.page-content img,
.container-wide .page-header-container img {
    max-width: 100%;
}



/*	--------------------------------------------------
	:: Custom HTML Styles
	-------------------------------------------------- */

h1 {
    color: #000000;
    font-family: 'Muli';
    font-size: 45px;
    margin-top: 15px;
    margin-bottom: 0;
    font-weight: 800;
}

@media (min-width:426px) {

    h1 {
        font-size: 58px;
    }
}

h2 {
    color: #000000;
    font-family: 'Muli';
    font-size: 30px;
    font-weight: 700;
    margin-bottom: 1.5em;
    /*	background-color: rgba(0,42,72,.05);
	padding: 20px ;
	margin-left:-20px;*/
}


h3 {
    font-family: 'Muli';
    font-size: 24px;
    font-weight: 700;
    margin-top: 1em;
    margin-bottom: .5em;
}

h4 {
    font-family: 'Muli';
    font-size: 18px;
    font-weight: 700;
}

.h5, h5 {
    font-size: 36px;
    margin-bottom: 36px;
}


h6 {
}


p {
}

.note {
    font-size: .8em;
}

.developer-note {
    font-size: 1.1em;
    color: #ee3a43;
    font-style: italic;
}

@media (max-width:415px) {
    p {
        font-size: 1.2em;
    }
}

hr {
    border-top: 1px dotted #006bb7;
    margin: 15px 0;
}

a:link, a:visited, a:hover, a:active {
    color: #006bb7;
    text-decoration: none;
}

a:hover, a:active, a:focus {
    text-decoration: underline;
    color: #006bb7
}

    a:hover img {
        opacity: .6;
    }

.col-xs-15 {
    width: 20%;
}


.hidden-xs-460 {
    display: none;
}

.ptl {
    margin: 25px 0 0 25px;
}

.pt {
    margin-top: 25px;
}

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

    .hidden-xs-460 {
        display: block;
    }
}


.hidden-xs-460.vertical-center {
    display: none;
}

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

    .hidden-xs-460.vertical-center {
        display: flex;
    }
}
@media (min-width: 768px) {
    .pe-md-5 {
        padding-right: 0.5rem !important;
    }
    .ps-md-5 {
        padding-right: 0.5rem !important;
    }
}

/*	--------------------------------------------------
	:: Horizontal Main Navigation
	-------------------------------------------------- */

.navbar-default {
    background-color: #ffffff;
    border-color: #ffffff;
    border: 0 none;
    margin-bottom: 0;
    text-align: center;
    min-height: 75px;
}

@media (min-width: 768px) {
    .navbar-default {
        text-align: left;
        min-height: auto;
        border: 0 none;
    }

    .navbar-nav.navbar-right {
        float: right !important;
        margin-right: 15px;
    }
}


.navbar-default .nav.navbar-nav {
    text-align: left;
    margin-top: 10px;
}

@media only screen and (min-device-width:768px) and (max-device-width: 859px) {
    /* default iPad screens */
    .nav.navbar-nav > li > a {
        padding: 10px 5px;
    }
}


.navbar-nav > li > a {
    font-size: 18px;
    color: #000000;
}

@media (min-width: 768px) {
    .navbar-default .navbar-nav > li > a {
        padding-top: 5px;
        padding-bottom: 5px;
        /* padding: 0 15px; */ /* Add for shorter pipes */
        /* border-right: 1px solid #777;*/ /* Add for shorter pipes */
    }

    .navbar-default .navbar-nav > li {
        /* padding: 10px 0;*/ /*incomment for shorter pipes */
        border-right: 1px solid #777; /* remove for shorter pipes */
    }

        /*for taller pipes */
        .navbar-default .navbar-nav > li.home-link,
        .navbar-default .navbar-nav > li.search-link {
            border-right: 0 none;
        }

            /*add for shorter pipes*/
            .navbar-default .navbar-nav > li.home-link > a,
            .navbar-default .navbar-nav > li > a#search-toggle {
                border-right: 0 none;
            }

        .navbar-default .navbar-nav > li > a .caret {
            display: none;
        }
}

.dropdown-menu > li > a {
    font-size: 16px;
}

.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:focus,
.navbar-default .navbar-nav > .open > a:hover {
    background-color: #ffffff;
}

.dropdown-menu > .active > a, .dropdown-menu > .active > a:focus, .dropdown-menu > .active > a:hover {
    color: #333;
    text-decoration: none;
    outline: 0;
    background-color: #ffffff;
}

.collapse.navbar-collapse {
    clear: right;
}






.navbar-default .navbar-toggle {
    margin-top: 15px;
    margin-bottom: 0;
    background-color: #ffffff;
    border: 1px solid #ffffff;
    float: left;
}

    .navbar-default .navbar-toggle:focus, .navbar-default .navbar-toggle:hover {
        background-color: #ffffff;
    }


    .navbar-default .navbar-toggle .icon-bar {
        width: 40px;
        height: 6px;
        background-color: #a0a0a0;
        border-radius: 5px;
    }

.icon-remove:before {
    content: "\f00d";
    font-family: 'FontAwesome';
    color: #a0a0a0;
}

.navbar-toggle.collapsed .icon-bar {
    display: block;
}

.navbar-toggle .icon-bar {
    display: none;
}

.navbar-toggle .icon-remove {
    display: block;
    margin-top: -15px;
    width: 40px;
}

.navbar-toggle.collapsed .icon-remove {
    display: none;
}

@media (max-width: 767px) {

    .navbar.navbar-default {
        margin-left: -15px;
    }

    .navbar-collapse {
    }

    .collapse.in .nav.navbar-nav {
        position: relative;
        margin-left: -15px;
        margin-top: -1px;
    }

    .navbar-collapse .nav > li {
        margin-left: 50px;
    }

    .nav > li.home-link {
        position: absolute;
        top: 0;
        left: 0;
        margin-left: 0;
    }

    .nav > li.search-link {
        position: absolute;
        top: 51px;
        left: 0;
        margin-left: 0;
    }

    .collapse.in .glyphicon.glyphicon-home {
        background-color: #ee3a43;
        color: #ffffff;
        height: 50px;
        width: 50px;
        line-height: 50px;
        text-align: center;
        font-size: 120%;
    }

    .collapse.in .fa.fa-search {
        background-color: #006bb7;
        color: #ffffff;
        height: 50px;
        width: 50px;
        line-height: 50px;
        text-align: center;
        font-size: 120%;
    }

    .collapse.in .navbar-nav > li.home-link > a,
    .collapse.in .navbar-nav > li.search-link > a {
        padding: 0;
    }

    .navbar-default .navbar-nav .open .dropdown-menu > li > a {
        font-size: 1.2em;
    }

    .navbar-nav .open .dropdown-menu .dropdown-header, .navbar-nav .open .dropdown-menu > li > a {
        padding: .5em 1em .5em 1.5em;
    }

    .navbar-default .navbar-nav .open .dropdown-menu > .active > a, .navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus, .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover {
        background-color: #ffffff;
    }
}
/*	--------------------------------------------------
	:: LOGO, Log In Button, and Search Button
	-------------------------------------------------- */

#HeaderWrapper {
    border-bottom: 1px solid #cccccc; /*margin-bottom:25px;*/
}

@media (min-width: 768px) {
    #HeaderWrapper {
        border-bottom: 0 none;
        margin-bottom: 0;
        position: relative;
    }
}

@media (min-width: 1920px) {

    #HeaderWrapper.container-fluid {
        max-width: 1920px;
        padding: 0 5% 0 5%;
    }
}




.navbar-brand {
    width: 40%;
    line-height: inherit;
    height: inherit;
    float: none;
    display: inline-block;
}



@media (min-width: 768px) {
    .navbar-brand {
        float: left;
        width: auto;
    }
}


.navbar-brand img {
    width: 100%;
    max-width: 250px;
}

/* Login Button */
.parallelogram {
    -webkit-transform: skew(-20deg);
    -moz-transform: skew(-20deg);
    -o-transform: skew(-20deg);
}

    .parallelogram a {
        display: inline-block;
        -webkit-transform: skew(20deg);
        -moz-transform: skew(20deg);
        -o-transform: skew(20deg);
    }


#HeaderWrapper .btn.btn-login {
    float: right;
    margin-top: 15px;
}

@media (min-width: 768px) {

    #HeaderWrapper .btn.btn-login {
        margin-right: 30px;
    }
}

.btn.btn-login a {
    color: #000000;
    font-weight: 400;
}

    .btn.btn-login a:hover,
    .btn.btn-login:hover a,
    .btn.btn-login:focus a {
        color: #ffffff;
        text-decoration: none;
    }


.btn.btn-login,
.btn.btn-login:visited {
    color: #000000;
    background-color: #ffffff;
    border-color: #000000;
    border-radius: 3px 6px 3px;
    padding: 5px 10px;
    line-height: 1.1;
}


#HeaderWrapper .btn.btn-login,
#HeaderWrapper .btn.btn-login:visited {
    font-size: 14px;
}

@media (min-width: 400px) {

    #HeaderWrapper .btn.btn-login,
    #HeaderWrapper .btn.btn-login:visited {
        font-size: 18px;
    }
}




.btn.btn-login:hover,
.btn.btn-login:focus {
    color: #ffffff;
    background-color: #000000;
    border-color: #000000;
}

.btn-login:active {
    -webkit-box-shadow: none;
    box-shadow: none;
}


a.external-link {
    font-weight: bold;
}

    a.external-link:after {
        font-family: 'FontAwesome';
        content: " \f08e";
        padding-left: 5px;
    }

.sfSubmitBtnWrp .btn-login.parallelogram {
    margin-right: 10px;
}

.search-button {
    margin-top: 20px;
    text-align: left;
}

@media (min-width: 768px) {
    .search-button {
        margin-top: 20px;
        text-align: center;
    }
}

.search-button .fa-search {
    margin-left: 8px;
}

/* Dropdown Button */
.dropbtn {
    color: #000000;
    background-color: #ffffff;
    border-radius: 3px 6px 3px;
    padding: 5px 10px;
    line-height: 1;
    margin: 10px 40px 0 0;
    font-size: 18px;
    font-weight: 400;
    text-align: center;
    vertical-align: middle;
    touch-action: manipulation;
    cursor: pointer;
    border: 1px solid #000000;
    white-space: nowrap;
    line-height: 1.428571429;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
    position: relative;
    display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #ffffff;
    right: 47px;
    border: 1px solid rgba(0,0,0,.15);
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    left: -235px;
    padding: 15px;
}

    /* Links inside the dropdown */
    .dropdown-content a {
        color: black;
        padding: 6px 6px;
        text-decoration: none;
        display: block;
        white-space: nowrap;
    }


.my-plm {
    padding-left: 0;
    list-style: none;
}

    .my-plm li ul {
        padding-left: 35px;
        list-style: disc;
    }

    .my-plm li {
    }

.login-dropdown .btn-login {
    color: #ffffff;
    background-color: #000000;
    border-color: #000000;
    border-radius: 3px 6px 3px;
    padding: 5px 10px;
    line-height: 1;
    margin: 10px 40px 0 0;
    font-size: 18px;
    font-weight: 400;
    text-align: center;
    vertical-align: middle;
    touch-action: manipulation;
    cursor: pointer;
    border: 1px solid #000000;
    white-space: nowrap;
    line-height: 1.428571429;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.login-dropdown .dropdown-menu {
    border: 1px solid rgba(0,0,0,.15);
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    padding: 10px 15px 5px 15px;
    /*position: absolute;
    top: 100%;
    left: -210px;
    right: 47px;
    z-index: 1000;
    float: left;
    min-width: 160px;*/
    right: 47px;
    margin: 2px 0 0;
    list-style: none;
    text-align: left;
    background-color: #fff;
    border: 1px solid #ccc;
    border: 1px solid rgba(0,0,0,.15);
    border-radius: 0;
    -webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175);
    box-shadow: 0 6px 12px rgba(0,0,0,.175);
    background-clip: padding-box;
    font-family: 'Muli', Tahoma, Helvetica, sans-serif;
    color: #000;
    font-size: 16px;
   white-space: nowrap;
}


    .login-dropdown .dropdown-menu ul {
        margin-bottom: 10px;
   padding-left: 20px;
    }

    .login-dropdown .dropdown-menu a {
        color: black;
        padding: 6px 6px;
        text-decoration: none;
        display: block;
        white-space: nowrap;
        font-family: 'Muli', Tahoma, Helvetica, sans-serif;
        color: #000;
        font-size: 16px;
    }


@media (max-width: 500px) {
	.login-dropdown.pull-right>.dropdown-menu {
	    right: 0;
	    left: auto;
	    min-width: inherit;
	    	white-space: inherit;
	}
	.login-dropdown .dropdown-menu a {
	white-space: inherit;
	}
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {
    background-color: #f5f5f5;
}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
    display: block;
}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
    color: #ffffff;
    background-color: #000000;
    border-color: #000000;
}


/*	--------------------------------------------------
	:: BUTTONS
	-------------------------------------------------- */
.btn-default,
a.btn-default {
    background-color: #ee3a43;
    color: #ffffff;
    border-color: #ee3a43;
    font-size: 18px;
    font-weight: 400;
}

    .btn-default:hover,
    a.btn-default:hover {
        background-color: #ffffff;
        color: #ee3a43;
        border-color: #ee3a43;
    }

.btn-rent-now-fixed {
    text-align: center;
    position: fixed;
    top: 106px;
    right: 100px;
    z-index: 9999;
}


    .btn-rent-now-fixed .btn-default {
        font-size: 20px;
        text-transform: uppercase;
        font-weight: 700;
    }

button.btn-default {
    background-color: #ee3a43;
    color: #ffffff;
    border-color: #ee3a43;
    font-size: 18px;
    font-weight: 400;
    background-image: none;
}

/*	--------------------------------------------------
	:: HOME PAGE CAROUSEL
	-------------------------------------------------- */


.carousel-inner > .item > a > img,
.carousel-inner > .item > img {
    width: 100%;
}

.carousel-control .glyphicon-menu-right:before,
.carousel-control .glyphicon-menu-left:before {
    font-size: 30px;
}

.carousel-control .glyphicon {
    top: 50%;
}

a.carousel-control {
    color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,.6);
    text-align: center;
}

.carousel-fade .carousel-inner .item {
    transition-property: opacity;
}

.carousel-fade .carousel-inner .item,
.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
    opacity: 0;
}

.carousel-fade .carousel-inner .active,
.carousel-fade .carousel-inner .next.left,
.carousel-fade .carousel-inner .prev.right {
    opacity: 1;
}

    .carousel-fade .carousel-inner .next,
    .carousel-fade .carousel-inner .prev,
    .carousel-fade .carousel-inner .active.left,
    .carousel-fade .carousel-inner .active.right {
        left: 0;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }

/*	--------------------------------------------------
	:: HOME PAGE TITLE AND TAGLINE
	-------------------------------------------------- */


.tagline {
    text-align: center;
    font-size: 30px;
    margin-top: 20px;
    font-weight: 700;
}

.tagline-md {
    text-align: center;
    font-size: 26px;
    margin: 20px 0;
}



@media (min-width: 768px) {


    .tagline {
        text-align: center;
        font-size: 68px;
        font-size: 4.1vw;
        margin-top: 20px;
        font-weight: 700;
    }

    .tagline-md {
        text-align: center;
        font-size: 49px;
        font-size: 2.9vw;
        margin: 20px 0;
    }
}

/*	--------------------------------------------------
	:: HOME PAGE COLOR BLOCKS
	-------------------------------------------------- */


.color-block1,
.color-block2,
.color-block3 {
    color: #ffffff;
    font-size: 28px;
    text-align: center;
    /* May want to do this if there is risk the container may be narrower than the element inside
  white-space: nowrap; */
    height: 200px;
}


.color-block1 {
    margin-top: 20px;
}

.color-block3 {
    margin-bottom: 20px;
}

@media (min-width: 768px) {
    .color-block1,
    .color-block2,
    .color-block3 {
        margin: 50px 0;
    }
}

/* The ghost, nudged to maintain perfect centering */
.color-block1:before,
.color-block2:before,
.color-block3:before {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    margin-right: -0.25em; /* Adjusts for spacing */
}

/* The element to be centered, can also be of any width and height */
.color-block1 > div,
.color-block2 > div,
.color-block3 > div {
    display: inline-block;
    vertical-align: middle;
}

.color-block1 a {
    color: #ffffff;
}

.color-block2 a {
    color: #ffffff;
}

.color-block3 a {
    color: #ffffff;
}


.color-block1 {
    background-color: #bcbec0;
}

.color-block2 {
    background-color: #808285;
}

.color-block3 {
    background-color: #bcbec0;
}

/*	--------------------------------------------------
	:: PAGE FOOTER IMAGE AND CONTACT CIRCLE IMAGE
	-------------------------------------------------- */


.page-footer-image {
    position: relative;
}

    .page-footer-image img {
        width: 100%;
        max-width: 100%;
    }

    .page-footer-image .contact-circle img {
        width: auto;
    }

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

    .page-footer-image img {
        margin-bottom: -90px;
    }
}

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

    .page-footer-image img {
        width: 100%;
        margin-bottom: -200px;
    }
}


.contact-circle {
    position: relative;
    z-index: 10;
    margin-bottom: 20px;
    text-align: center;
    top: inherit;
    left: inherit;
}


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

    .contact-circle {
        position: absolute;
        top: 16px;
        left: 24px;
        z-index: 10;
    }
}

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

    .contact-circle {
        position: absolute;
        top: 50px;
        left: 200px;
        z-index: 10;
    }
}


.row.color-blocks {
    margin-left: 0;
}



/*	--------------------------------------------------
	:: Full Size Page Banner Image
	-------------------------------------------------- */



@media (min-width: 992px) {

    .full-size-container {
        max-width: 1320px;
        margin-left: auto;
        margin-right: auto;
        background-color: #ffffff;
    }
}


@media (min-width: 1320px) {
    .full-size-container {
        width: 1320px;
        margin-left: auto;
        margin-right: auto;
    }
}



/*	--------------------------------------------------
	:: Page Headers and Circle Quote
	http://codepen.io/Merri/pen/gimKw
	-------------------------------------------------- */



.banner-strip {
    background: #006bb7; /* Old browsers */
    background: -moz-linear-gradient(top, #ffffff 0%, #ffffff 30%, #006bb7 30%, #006bb7 65%, #ffffff 65%, #ffffff 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #ffffff 0%, #ffffff 30%, #006bb7 30%, #006bb7 65%, #ffffff 65%, #ffffff 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #ffffff 0%, #ffffff 30%, #006bb7 30%, #006bb7 65%, #ffffff 65%, #ffffff 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#006bb7 ', endColorstr='#006bb7 ',GradientType=0 ); /* IE6-9 */
    /* inline-box hack to eliminate white space */
    font-size: 0;
    /*  text-align: center;*/
    text-align: right;
    padding-right: 50px;
    clear: both;
}

.banner-stripe {
    display: flex;
    justify-content: flex-end; /* align horizontal */
    flex-direction: row;
    align-items: center; /* align vertical */
}

    .banner-stripe.red {
        background: #58585a; /* Old browsers */
        background: -moz-linear-gradient(top, #ffffff 0%, #ffffff 30%, #58585a 30%, #58585a 65%, #ffffff 65%, #ffffff 100%); /* FF3.6-15 */
        background: -webkit-linear-gradient(top, #ffffff 0%, #ffffff 30%, #58585a 30%, #58585a 65%, #ffffff 65%, #ffffff 100%); /* Chrome10-25,Safari5.1-6 */
        background: linear-gradient(to bottom, #ffffff 0%, #ffffff 30%, #58585a 30%, #58585a 65%, #ffffff 65%, #ffffff 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#58585a ', endColorstr='#58585a ',GradientType=0 ); /* IE6-9 */
        /* inline-box hack to eliminate white space */
        font-size: 0;
        /*  text-align: center;*/
        text-align: right;
        padding-right: 30px;
        padding-left: 30px;
        clear: both;
    }

.banner-strip.blue {
    background: #006bb7; /* Old browsers */
    background: -moz-linear-gradient(top, #ffffff 0%, #ffffff 30%, #006bb7 30%, #006bb7 65%, #ffffff 65%, #ffffff 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #ffffff 0%, #ffffff 30%, #006bb7 30%, #006bb7 65%, #ffffff 65%, #ffffff 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #ffffff 0%, #ffffff 30%, #006bb7 30%, #006bb7 65%, #ffffff 65%, #ffffff 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#006bb7 ', endColorstr='#006bb7 ',GradientType=0 ); /* IE6-9 */
    /* inline-box hack to eliminate white space */
    font-size: 0;
    /*  text-align: center;*/
    text-align: right;
    padding-right: 30px;
    clear: both;
}

.banner-strip.black {
    background: #000000; /* Old browsers */
    background: -moz-linear-gradient(top, #ffffff 0%, #ffffff 30%, #000000 30%, #000000 65%, #ffffff 65%, #ffffff 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #ffffff 0%, #ffffff 30%, #000000 30%, #000000 65%, #ffffff 65%, #ffffff 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #ffffff 0%, #ffffff 30%, #000000 30%, #000000 65%, #ffffff 65%, #ffffff 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000 ', endColorstr='#000000 ',GradientType=0 ); /* IE6-9 */
    /* inline-box hack to eliminate white space */
    font-size: 0;
    /*  text-align: center;*/
    text-align: right;
    padding-right: 30px;
    clear: both;
}


.banner-strip:after, .banner-strip:before {
    display: table;
    content: " ";
}

.circle {
    display: inline-block;
    /*min-width: 28%;*/
    /* to allow placement of numbers on top of circles instead of below them */
    white-space: nowrap;
    text-align: center;
    border: 10px solid #ffffff;
    border-radius: 50%;
}

    .circle:before {
        border-radius: 50%;
        /* = 15%, almost gives us viewport width unit (15vw) */
        width: 100%;
        padding-bottom: 100%;
        /* this way we should have 1px gap between circles */
        margin: 0;
        background: #58585a;
        content: '';
        display: inline-block;
        /* circle to the middle, so that... [1] */
        vertical-align: middle;
        /* to use viewport based units we can safely override the old units in this way */
        padding-bottom: 0vw;
        width: 28vw;
        height: 28vw;
        max-width: 538px;
        max-height: 538px;
    }

    .circle div.callout {
        display: inline-block;
        font-size: 1.7vw;
        /* -.5em = white space between p elements... */
        margin: 0 -.5em 0 -100%;
        padding: 10px;
        /* ... text can be middle too! [1] */
        vertical-align: middle;
        white-space: normal;
        width: 100%;
        /* for some reason that I can't figure out right now...
    viewport units eliminate the white space issue */
        margin: 0 0 0 -28vw;
        width: 28vw;
        color: #ffffff;
        font-weight: 400;
        max-width: 538px;
        max-height: 538px;
    }

@media (min-width: 1920px) {

    .circle div.callout {
        font-size: 32px;
        margin-left: -538px;
    }
}


.circle div.callout img {
    border-radius: 50%;
    max-width: 100%;
}

.banner-header {
    display: inline-block;
    white-space: nowrap;
    text-align: left;
    float: left;
    padding-left: 5%;
}

    .banner-header:before {
        /* = 15%, almost gives us viewport width unit (15vw) */
        width: 100%;
        padding-bottom: 100%;
        /* this way we should have 1px gap between circles */
        margin: 0;
        content: '';
        display: inline-block;
        /* circle to the middle, so that... [1] */
        vertical-align: middle;
        /* to use viewport based units we can safely override the old units in this way */
        padding-bottom: 0vw;
        width: 50vw;
        height: 28vw;
    }

@media (min-width: 1920px) {

    .banner-header:before {
        max-width: 960px;
        max-height: 538px;
    }
}



.banner-header h1 {
    display: inline-block;
    font-size: 4.3vw;
    /* -.5em = white space between p elements... */
    margin: 0 -.5em 0 -100%;
    padding: 0;
    /* ... text can be middle too! [1] */
    vertical-align: middle;
    /*white-space: normal;*/
    width: 100%;
    /* for some reason that I can't figure out right now...
    viewport units eliminate the white space issue */
    margin: 0 0 0 -50vw;
    width: 50vw;
    color: #ffffff;
    font-weight: 400;
}

@media (min-width: 1920px) {
    .banner-header h1 {
        margin-left: -960px;
        font-size: 82px;
    }
}


@media only screen and (max-width: 768px) {

    .banner-strip,
    .banner-strip.red,
    .banner-strip.blue,
    .banner-strip.black {
        padding-right: 0;
        text-align: center;
    }

    .banner-header {
        text-align: center;
        float: none;
        padding-left: 0;
    }

    .header-arrow {
        padding-left: 30px;
    }

        .header-arrow img {
            width: 75px;
        }



    .banner-circle-header h1 {
        font-size: 6vw;
        color: #000000;
        height: 1.5em;
        margin: 0;
        display: inline-block;
        vertical-align: middle;
        width: 100%;
        font-weight: 400;
        padding-left: 30px;
    }

    .banner-header h1 {
        font-size: 7vw;
        width: 100%;
        color: #000000;
        height: 1.5em;
    }

    .circle:before {
        width: 50vw;
        height: 50vw;
    }

    .circle div.callout {
        margin: 0 0 0 -50vw;
        width: 50vw;
        font-size: 4vw;
        padding: 0 35px;
    }

    .banner-header:before {
        width: 100%;
        padding-bottom: 100%;
        margin: 0;
        content: '';
        display: inline-block;
        vertical-align: middle;
        padding-bottom: 0vw;
        width: 50vw;
        height: 10vw;
    }
}


/*	--------------------------------------------------
	:: Fleet Management Pages Header Text and Image
	-------------------------------------------------- */
@media (min-width: 768px) {
    .banner-title:before {
        content: "";
        display: inline-block;
        width: 114px;
        height: 78px;
        background-image: url("../images/arrow-red.png");
        background-repeat: no-repeat;
        position: relative;
        left: 39px;
        top: -30px;
        margin-left: -39px;
    }
}

/* wheel image */
.banner-strip {
    position: relative;
}


@media (min-width: 768px) and (max-width: 1000px) {

    .banner-strip .banner-title {
        position: absolute;
        top: 20px;
        left: 45px;
    }
}

@media (min-width: 1001px) and (max-width: 1190px) {

    .banner-strip .banner-title {
        position: absolute;
        top: 60px;
        left: 45px;
    }
}



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

    .banner-strip .banner-title {
        position: absolute;
        top: 90px;
        left: 45px;
    }
}


/* inner image (or text?) for wheel */
.header-wheel div.callout {
    display: inline-block;
    font-size: 1.7vw;
    /* -.5em = white space between p elements... */
    margin: 0 -.5em 0 -100%;
    padding: 70px;
    /* ... text can be middle too! [1] */
    vertical-align: middle;
    white-space: normal;
    width: 100%;
    /* for some reason that I can't figure out right now...
    viewport units eliminate the white space issue */
    margin: 0 0 0 -50vw;
    width: 50vw;
    color: #ffffff;
    font-weight: 400;
}

    .header-wheel div.callout img {
        position: relative;
        z-index: 20;
        border-radius: 50%;
        max-width: 365px;
        margin-top: 20px;
        margin-left: 35px;
    }


/* wheel banner title */
.wheel-banner-header {
    display: inline-block;
    /*white-space: nowrap;*/
    text-align: left;
    float: left;
    padding-left: 5%;
}

    .wheel-banner-header:before {
        /* = 15%, almost gives us viewport width unit (15vw) */
        width: 100%;
        padding-bottom: 100%;
        /* this way we should have 1px gap between circles */
        margin: 0;
        content: '';
        display: inline-block;
        /* circle to the middle, so that... [1] */
        vertical-align: middle;
        /* to use viewport based units we can safely override the old units in this way */
        padding-bottom: 0vw;
        width: 40vw;
        height: 50vw;
        max-height: 607px;
    }


    .wheel-banner-header img.arrow {
        display: inline-block;
        width: 100%;
    }

    .wheel-banner-header h1 {
        display: inline-block;
        font-size: 4.3vw;
        /* -.5em = white space between p elements... */
        margin: 0 -.5em 0 -100%;
        padding: 0 30px;
        /* ... text can be middle too! [1] */
        vertical-align: middle;
        /*white-space: normal;*/
        width: 100%;
        /* for some reason that I can't figure out right now...
    viewport units eliminate the white space issue */
        margin: 0 0 0 -40vw;
        width: 40vw;
        color: #000000;
        font-weight: 800;
    }





    .wheel-banner-header p {
        display: inline-block;
        font-size: 1.9vw;
        /* -.5em = white space between p elements... */
        margin: 0 -.5em 0 -100%;
        padding: 0; /*7% 0 0 0;*/
        /* ... text can be middle too! [1] */
        vertical-align: middle;
        white-space: normal;
        width: 100%;
        /* for some reason that I can't figure out right now...
    viewport units eliminate the white space issue */
        margin: 0 0 0 -40vw;
        width: 40vw;
        color: #ffffff;
        font-weight: 400;
    }


.header-highlight {
    background: #ee3a43;
    padding: 15px 30px;
    margin: 0 0 15px 0;
}

    .header-highlight p {
        color: #ffffff;
    }

@media only screen and (max-width: 768px) {
}




/*.disposition img.wheel-image {transform: rotate(-2deg); transform-origin: 50% 50%; } 
.financial-policy img.wheel-image {transform: rotate(-48deg); transform-origin: 50% 50%; }
.fleet-planning img.wheel-image {transform: rotate(-92deg); transform-origin: 50% 50%; }
.application-design img.wheel-image {transform: rotate(-137deg); transform-origin: 50% 50%; }
.maintain img.wheel-image {transform: rotate(-182deg); transform-origin: 50% 50%; }
.reports-analysis img.wheel-image {transform: rotate(-227deg); transform-origin: 50% 50%; }
.safety-compliance img.wheel-image {transform: rotate(-272deg); transform-origin: 50% 50%; }
.rental-equipment img.wheel-image {transform: rotate(-317deg); transform-origin: 50% 50%; }*/





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


    .page-header-container.site-header.red {
        /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,ffffff+25,ee3a43+25,ee3a43+25,ee3a43+71,ee3a43+71,ffffff+72,ffffff+72,ffffff+100 */
        background: #ee3a43; /* Old browsers */
        background: -moz-linear-gradient(top, #ffffff 0%, #ffffff 25%, #ee3a43 25%, #ee3a43 25%, #ee3a43 75%, #ffffff 75%, #ffffff 100%); /* FF3.6-15 */
        background: -webkit-linear-gradient(top, #ffffff 0%, #ffffff 25%, #ee3a43 25%, #ee3a43 25%, #ee3a43 75%, #ffffff 75%, #ffffff 100%); /* Chrome10-25,Safari5.1-6 */
        background: linear-gradient(to bottom, #ffffff 0%, #ffffff 25%, #ee3a43 25%, #ee3a43 25%, #ee3a43 75%, #ffffff 75%, #ffffff 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ee3a43', endColorstr='#ee3a43',GradientType=0 ); /* IE6-9 */
        margin-bottom: 0;
    }
}

.page-header-container.fleet-management-header.red .visible-xs-colorband {
    background: inherit;
}

@media only screen and (max-width: 768px) {

    .page-header-container.fleet-management-header.red .visible-xs-colorband {
        /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,ffffff+25,ee3a43+25,ee3a43+25,ee3a43+71,ee3a43+71,ffffff+72,ffffff+72,ffffff+100 */
        background: #ee3a43; /* Old browsers */
        background: -moz-linear-gradient(top, #ffffff 0%, #ffffff 25%, #ee3a43 25%, #ee3a43 25%, #ee3a43 75%, #ffffff 75%, #ffffff 100%); /* FF3.6-15 */
        background: -webkit-linear-gradient(top, #ffffff 0%, #ffffff 25%, #ee3a43 25%, #ee3a43 25%, #ee3a43 75%, #ffffff 75%, #ffffff 100%); /* Chrome10-25,Safari5.1-6 */
        background: linear-gradient(to bottom, #ffffff 0%, #ffffff 25%, #ee3a43 25%, #ee3a43 25%, #ee3a43 75%, #ffffff 75%, #ffffff 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ee3a43', endColorstr='#ee3a43',GradientType=0 ); /* IE6-9 */
        margin-bottom: 0;
    }
}



.page-header-container.blue {
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,ffffff+25,ee3a43+25,ee3a43+25,ee3a43+71,ee3a43+71,ffffff+72,ffffff+72,ffffff+100 */
    background: #006bb7; /* Old browsers */
    background: -moz-linear-gradient(top, #ffffff 0%, #ffffff 31%, #006bb7 31%, #006bb7 25%, #006bb7 72%, #ffffff 72%, #ffffff 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #ffffff 0%, #ffffff 31%, #006bb7 31%, #006bb7 31%, #006bb7 72%, #ffffff 72%, #ffffff 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #ffffff 0%, #ffffff 31%, #006bb7 2531, #006bb7 31%, #006bb7 72%, #ffffff 72%, #ffffff 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#006bb7', endColorstr='#006bb7',GradientType=0 ); /* IE6-9 */
}

.page-header-container.black {
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,ffffff+25,ee3a43+25,ee3a43+25,ee3a43+71,ee3a43+71,ffffff+72,ffffff+72,ffffff+100 */
    background: #000000; /* Old browsers */
    background: -moz-linear-gradient(top, #ffffff 0%, #ffffff 31%, #000000 31%, #000000 25%, #000000 72%, #ffffff 72%, #ffffff 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #ffffff 0%, #ffffff 31%, #000000 31%, #000000 31%, #000000 72%, #ffffff 72%, #ffffff 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #ffffff 0%, #ffffff 31%, #000000 2531, #000000 31%, #000000 72%, #ffffff 72%, #ffffff 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#000000',GradientType=0 ); /* IE6-9 */
}

@media only screen and (max-width: 768px) {

    .red .page-header-highlight {
        background: #ee3a43;
    }
}

.vertical-center,
.page-title .zeDockZoneEmpty,
.page-banner-highlight {
    min-height: 25px;
    margin: 0 0 30px 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-direction: row;
    display: -webkit-flex; /* For Safari */
    -webkit-justify-content: flex-start; /* For Safari */
    -webkit-align-items: center; /* For Safari */
}

/*
.page-title {  

  resize: vertical;
  overflow: hidden;
 
  }
  
  .page-title {
  position: relative;
}


.page-title:before {
  content: " ";
  display: inline-block;
  height: 100%;
  width: 1%;
  vertical-align: middle;
}
*/


.page-title .page-title-h1 {
    display: inline-block;
    vertical-align: middle;
    margin: 0;
}

    .page-title .page-title-h1 h1 {
        display: inline-block;
        font-size: 4.3vw;
        /* -.5em = white space between p elements... */
        margin: 0;
        padding: 0 30px;
        /* ... text can be middle too! [1] */
        vertical-align: middle;
        /*white-space: normal;*/
        width: 100%;
        /* for some reason that I can't figure out right now...
    viewport units eliminate the white space issue */
        color: #ffffff;
        font-weight: 700;
    }

@media only screen and (min-width:461px) and (max-width: 767px) {
    .page-title .page-title-h1 h1 {
        color: #000000;
        font-size: 58px;
    }
}

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

    .page-title .page-title-h1 h1 {
        color: #ffffff;
        font-size: 58px;
    }
}

.page-header-circle {
    text-align: center;
    margin: 0 auto;
}

    .page-header-circle .page-banner-highlight {
        background-color: #000000;
        margin: 0 auto;
        width: 420px;
        height: 420px;
        color: #ffffff;
        border-radius: 50%;
        padding: 50px;
        border: 10px solid #ffffff;
    }

        .page-header-circle .page-banner-highlight p,
        .page-header-circle .page-banner-highlight {
            color: #ffffff;
            font-size: 22px;
            padding: 0;
        }


/* used .page-content-left on Maintain page (FLeet Management) */
/*.page-content-left-fm {margin-top:0;font-size:20px;}*/

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

    .page-content-left-fm {
        margin-top: -100px;
    }
}

.page-content-left {
    margin-top: 0;
}

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

    .page-content-left {
        margin-top: -50px;
    }
}

.page-content-left2 {
    margin-top: -20px;
    font-size: 20px;
    padding-right: 100px;
}


/*	--------------------------------------------------
	:: Footer Top and Bottom
	-------------------------------------------------- */




/* To position while editing the page */
body.sfPageEditor .footer-top {
}

.footer {
    background-color: #58585a;
    color: #ffffff;
}

.footer-bottom,
.footer-top {
    padding: 20px 0;
    margin: 0 3%;
}

.footer-top {
    display: none;
}

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

    .footer-top {
        display: block;
    }
}



.footer-bottom .container-fluid {
    border-top: 1px solid #ffffff;
    padding: 10px 0 0 0;
    font-size: 14px;
}

.nav.nav-utility {
    font-size: 13px;
    margin-top: 10px;
}

.nav.utility-nav > li > a {
    color: #ffffff;
    font-size: 16px;
    padding-left: 0;
}

@media (min-width: 768px) {
    .nav.utility-nav > li > a {
        color: #ffffff;
        font-size: 13px;
        padding-left: 0;
        padding-right: 20px;
    }
}

.footer-utility-nav .nav > li > a:focus, .footer-utility-nav .nav > li > a:hover {
    text-decoration: none;
    background-color: transparent;
}


.copyright {
    text-align: center;
    font-size: 13px;
    color: #ffffff;
    margin-top: 15px;
}

@media (min-width: 768px) {
    .copyright {
        text-align: left;
        float: right;
        font-size: 13px;
        color: #ffffff;
        margin-top: 15px;
    }
}


.footer a {
    color: #ffffff;
    text-decoration: none;
}


.footer-top .nav-stacked {
    text-align: center;
}

@media (min-width: 992px) {
    .footer-top .nav-stacked {
        text-align: left;
    }
}

.nav-stacked ul {
    margin-left: 0;
    padding: 0;
    list-style-type: none;
}

.footer-top .nav-stacked li {
    margin-bottom: 6px;
}


@media (min-width: 992px) {
    .footer-top .nav-stacked li {
        margin-bottom: 1px;
    }
}

.footer .navParent {
    font-size: 22px;
    margin: 20px 0 10px 0;
    display: block;
}


@media (min-width: 992px) {
    .footer .navParent {
        font-size: 18px;
        margin-bottom: 20px;
        display: block;
    }
}

.footer .navChild {
    font-size: 18px;
}

@media (min-width: 768px) {
    .footer .navChild {
        font-size: 14px;
    }
}


.footer .show-selected-pages .navParent {
    font-size: 18px;
    margin: 0;
    display: inline;
}

@media (min-width: 768px) {
    .footer .show-selected-pages .navParent {
        font-size: 14px;
        margin: 0;
        display: inline;
    }
}

.footer .show-selected-pages li {
    margin: 0 0 1px 0;
}

@media (min-width: 768px) {
    .footer .show-selected-pages .li {
        margin: 0 0 1px 0;
    }
}

.footer .show-selected-pages li:first-child .navParent {
    margin-bottom: 20px 0 20px 0;
    font-size: 22px;
    margin: 20px 0 10px 0;
    display: block;
}

@media (min-width: 992px) {
    .footer .show-selected-pages li:first-child .navParent {
        margin-bottom: 20px 0 20px 0;
        ;
        font-size: 18px;
        margin-bottom: 20px;
        display: block;
    }
}


.footer .nav.nav-pills > li.active > a, .footer .nav-pills > li.active > a:focus, .footer .nav-pills > li.active > a:hover {
    color: #fff;
    background-color: transparent;
}

.footer .nav.nav-pills > li > a {
    padding: 0;
}

.footer .nav > li > a:focus, .footer .nav > li > a:hover {
    text-decoration: none;
    background-color: transparent;
}



.nav-footer .nav > li > a,
.nav-footer .nav > li > a:focus,
.nav-footer .nav > li > a:hover {
    color: #ffffff;
    background-color: transparent;
}

.nav-footer .nav > li > a {
    padding: 3px 0;
}

@media (max-width: 767px) {

    .navbar-nav.utility-nav {
        margin: 7.5px 0;
    }
}

.cws {
    font-size: 10px;
    text-align: center;
    margin-top: 20px;
}


@media (min-width: 768px) {

    .cws {
        font-size: 11px;
        text-align: right;
        margin-top: 0;
    }
}





/*	--------------------------------------------------
	:: BUTTONS
	-------------------------------------------------- */

.btn-primary {
    color: #fff;
    background-color: #ee3a43;
    border-color: #ee3a43;
}

    .btn-primary.active, .btn-primary:active, .btn-primary:hover, .open > .btn-primary.dropdown-toggle,
    .btn-primary.active.focus, .btn-primary.active:focus, .btn-primary.active:hover, .btn-primary:active.focus, .btn-primary:active:focus, .btn-primary:active:hover, .open > .btn-primary.dropdown-toggle.focus, .open > .btn-primary.dropdown-toggle:focus, .open > .btn-primary.dropdown-toggle:hover {
        color: #fff;
        background-color: #ee3a43;
        border-color: #ee3a43;
    }


/*	--------------------------------------------------
	:: Language, Search Slideout
	-------------------------------------------------- */

/***** :: HEADER COVER FOR SLIDE OUTs :: *****/

.header-top {
    position: relative;
}

.header-top-nav-cover {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 50;
    display: none;
    background: rgba(0, 0, 0, 0.6);
}




/********** :: SEARCH SLIDE-OUT :: **********/
/* Search Box */

div.visible-xs-inline .sfsearchBox {
    float: right;
    margin: 10px 20px 0 0;
}

.search-panel-navbar .sfsearchBox {
    float: right;
}

.search-panel-top-header .sfsearchBox {
    /*  float: left;
    margin-top: 30px;
    */
}


.sfsearchTxt {
    width: 215px;
    color: #555;
    padding: 3px;
}

/* turned off autocomplete */
.sfsearchBox .k-autocomplete .k-input {
    color: #707070;
    background-color: #ffffff;
    font-family: Arial;
    font-weight: normal;
    font-size: 14px;
    height: 31px;
    padding: .177em 0;
    text-indent: .33em;
    /* border: 1px solid #ffffff;*/
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    margin-top: -5px;
    margin-bottom: 0;
    margin-left: -3px;
    box-shadow: none;
}

.search-panel-top-header .sfsearchBox .k-autocomplete .k-input {
    width: 227px !important;
}

.mobile-nav-search .sfsearchBox .k-autocomplete .k-input {
    width: 86% !important;
}

.sfsearchBox .k-widget.k-autocomplete.sfsearchTxt.k-state-default.k-state-hover,
.sfsearchBox .k-widget.k-autocomplete.k-header.sfsearchTxt.k-state-default {
    color: #707070;
    background-color: #ffffff;
    font-family: Arial;
    font-weight: normal;
    font-size: 14px;
    height: 31px;
    padding: .177em 0;
    text-indent: .33em;
    /* border: 1px solid #ffffff;*/
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    width: 224px !important;
    margin-top: -5px;
    margin-bottom: 0;
    box-shadow: none;
}


.sfsearchBox input[type="submit"] {
    background-image: none;
    border: none;
    background-color: #ad208e;
    color: #ffffff;
    text-transform: uppercase;
    font-weight: normal;
    font-size: 18px;
    line-height: 31px;
    text-align: center;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    height: 31px;
    /*padding: .177em .3em .177em .177em;*/
    font-family: 'cachet-medium', arial, sans-serif;
}

.k-list.k-reset {
    padding: 0 10px;
    list-style: none;
}

.sfsearchBox .k-autocomplete {
    border: 0 none;
}


.k-animation-container .k-popup .k-list .k-state-hover,
.k-animation-container .k-popup .k-list .k-state-focused,
.k-animation-container .k-popup .k-list .k-state-selected,
.k-animation-container .k-autocomplete.k-state-hover {
    background-color: #ffffff;
    background-image: none;
    color: #707070;
    font-family: Arial;
    font-size: 16px;
    cursor: pointer;
    margin: 6px 0;
    background-color: #ffffff;
    border: 0;
}

.k-animation-container .k-popup.k-list-container {
    background-color: #ffffff;
    border: 0 none;
    -moz-box-shadow: 2px 6px 10px #3c3a38;
    -webkit-box-shadow: 2px 6px 10px #3c3a38;
    box-shadow: 2px 6px 10px #3c3a38;
}

.k-animation-container .k-popup .k-list .k-item {
    color: #707070;
    font-family: Arial;
    font-size: 16px;
    border: 0 none;
    margin: 6px 0;
    font-weight: normal;
    line-height: 1.3em;
}


#search-toggle {
    width: 40px;
    height: 40px;
    text-align: center;
    cursor: pointer;
}

.sf_cols.search-panel-top-header {
    min-width: inherit;
}

.search-panel-top-header {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    margin-right: -450px;
    padding: 40px 0 0 20px;
    background-color: rgba(0,0,0,.8);
    color: #fff;
    font-weight: bold;
    display: none;
    z-index: 999;
    height: auto;
    width: 100%;
}

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

    .search-panel-top-header {
        width: 450px;
    }
}

.close-search-panel {
    clear: both;
    cursor: pointer;
    color: #ee3a43;
    background-color: white;
    text-align: center;
    font-weight: bold;
    text-transform: uppercase;
    padding: 2px 6px 5px 9px;
    line-height: 1em;
    font-family: 'Century Gothic', Arial, sans-Serif;
    font-size: 11px;
    letter-spacing: .08em;
    border-radius: 5px;
    box-shadow: 0px 0px 3px 0px #ad208e;
    position: absolute;
    bottom: 30px;
    right: 25px;
}


    .close-search-panel:after {
        content: "\e258";
        color: #ee3a43;
        position: relative;
        top: 2px;
        display: inline-block;
        font-family: 'Glyphicons Halflings';
        font-style: normal;
        font-weight: normal;
        line-height: 1;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        font-size: 12px;
        padding-left: 3px;
        padding-top: 1px;
    }

.search-panel-navbar {
    position: absolute;
    top: 56px;
    right: 0;
    display: none;
    z-index: 999;
    width: 100%;
    background-color: #cccccc;
    padding: 10px 30px 10px 0;
    box-shadow: 0 3px 6px rgba(0,0,0,.5);
}


/*	--------------------------------------------------
	:: SITE SEARCH SEARCH RESULTS
	-------------------------------------------------- */

.sfHighlightCWS {
    background-color: rgba(255, 255, 0, 0.46);
}

.sfsearchResultHighLighter {
    margin-bottom: 20px;
}


.k-header, .k-grid-header-wrap, .k-grid .k-grouping-header, .k-grid-header, .k-pager-wrap, .k-pager-wrap .k-textbox, .k-pager-wrap .k-link, .k-grouping-header .k-group-indicator {
    border: none !important;
}

.k-pager-numbers.k-reset li {
    list-style: none !important;
    margin: 0 !important;
}

.k-pager-numbers .k-state-selected {
    border: none;
    background-color: #333;
    border-radius: 0;
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
}

.k-pager-numbers .k-state-selected {
    vertical-align: middle !important;
    border: none !important;
}

.k-pager-numbers .k-link:hover, .k-pager-numbers .k-state-selected, .k-link.k-pager-nav:hover {
    border-radius: 5px !important;
    -moz-border-radius: 5px !important;
    -webkit-border-radius: 5px !important;
}

.k-pager-numbers .k-state-selected {
    border-style: none;
    line-height: 22px;
    padding: 0 7px;
    border-radius: 13px;
    background-color: #107ED7;
    color: #ffffff;
}

.search-result:nth-child(even) {
    background-color: #f9f9f9;
}

.search-result:nth-child(odd) {
    background-color: #fff;
}


.sf-search-results {
    margin-top: 20px;
}


/*	--------------------------------------------------
	:: NEWS / EVENTS / BLOG LISTINGS
	-------------------------------------------------- */


.sfnewsListItem {
    margin-bottom: 30px;
}

    .sfnewsListItem h3 {
        margin-bottom: 0;
    }

.sfeventTitle, .sfnewsTitle {
    margin: 0;
}

.sfnewsListItem {
    border-bottom: 1px dotted #ee3a43;
    padding-bottom: 20px;
}



/*	--------------------------------------------------
	:: TILES
	-------------------------------------------------- */



/*	--------------------------------------------------
	:: TABS
	-------------------------------------------------- */

.tab-content {
    padding: 20px;
}



/*	--------------------------------------------------
	:: NEWS / PRESS RELEASES
	-------------------------------------------------- */

.itemContent {
    margin-top: 20px;
}

/*	--------------------------------------------------
	:: TABLES
	-------------------------------------------------- */


/*	--------------------------------------------------
	:: USED TRAILERS SEARCH CRITERIA
	-------------------------------------------------- */

.filters .k-draghandle:hover,
.filters .k-draghandle.k-state-selected:hover,
.filters .k-state-selected,
.filters .k-state-selected:link {
    border-color: #efefef;
    background-color: #ee3a43;
}



.filters .k-slider-selection {
    background-color: #ee3a43;
}

.filters .k-autocomplete.k-state-default,
.filters .k-dropdown-wrap.k-state-default,
.filters .k-numeric-wrap.k-state-default,
.filters .k-picker-wrap.k-state-default {
    background-color: #ffffff;
}

.filters .k-autocomplete.k-state-hover,
.filters .k-dropdown-wrap.k-state-hover,
.filters .k-numeric-wrap.k-state-hover,
.filters .k-picker-wrap.k-state-hover,
.filters .k-autocomplete.k-state-focused,
.filters .k-dropdown-wrap.k-state-focused,
.filters .k-multiselect.k-header.k-state-focused,
.filters .k-numeric-wrap.k-state-focused,
.filters .k-picker-wrap.k-state-focused {
    background-color: #efefef;
}

.used-trailer-listing.k-widget * {
    .-webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.used-trailer-listing.k-widget {
    list-style-type: none;
    margin: 0;
    padding: 0;
    border: 0 none;
}

/*	--------------------------------------------------
	:: USED TRAILERS RESULTS
	-------------------------------------------------- */

.modal-dialog { /*width:55%; margin-left:auto; margin-right:auto;*/
}

.container-fluid.modial-inner-content {
    padding: 0 30px;
}

.modial-inner-header {
    background-color: #006bb7;
    color: #fff;
    padding: 10px 0px;
    font-size: 20px;
    margin-bottom: 30px;
}

.used-trailer-header {
    margin-bottom: 20px;
    background-color: #006bb7;
    color: #ffffff;
    font-size: 20px;
    padding: 5px 0;
}

.used-trailer-cta {
    padding: 25px 0;
}

.bootstrap-dialog.type-primary .modal-header {
    background-color: #efefef;
}

.bootstrap-dialog .bootstrap-dialog-title {
    font-size: 20px;
    color: #006bb7;
}

.modal-body {
    position: relative;
    padding: 15px 0;
}

.trailer-image-list img {
    max-width: 100%;
    margin-bottom: 20px;
}

@media (min-width: 768px) {
    .modal-dialog {
        width: 80%;
        margin: 30px auto;
    }
}

/*	--------------------------------------------------
	:: CUSTOM STYLE ELEMENTS
	-------------------------------------------------- */


#curvedarrow {
    position: relative;
    width: 0;
    height: 0;
    border-top: 9px solid transparent;
    border-right: 9px solid #ee3a43;
    -webkit-transform: rotate(10deg);
    -moz-transform: rotate(10deg);
    -ms-transform: rotate(10deg);
    -o-transform: rotate(10deg);
    margin: 15px 0 0 20px;
}

    #curvedarrow:after {
        content: "";
        position: absolute;
        border: 0 solid transparent;
        border-top: 3px solid #ee3a43;
        border-radius: 20px 0 0 0;
        top: -12px;
        left: -9px;
        width: 12px;
        height: 12px;
        -webkit-transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        -o-transform: rotate(45deg);
    }

#LayoutEditor1, #LayoutEditor1 *, .sfMessagePane, .sfMessagePane *, .sfLayoutPropsContainer, .sfLayoutPropsContainer *, .ZoneEditorToolboxContainer, .ZoneEditorToolboxContainer *, .RadWindow, .RadWindow *, .rmSlide, .rmSlide *, .ui-dialog, .ui-dialog *, .rtbSlide, .rtbSlide * {
    box-sizing: content-box;
}

#locationsList {
    list-style-type: none;
    margin: 30px 0 0 0;
    padding: 0;
}

@media screen and (min-width: 768px) {
    #locationsList {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-gap: 20px;
    }
}

.location {
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    margin: 0;
    border-bottom: 1px dotted black;
    padding-bottom: 20px;
    margin-bottom: 20px;
    font-size: 16px;
}

@media screen and (min-width: 768px) {
    .location {
        border: 0 none;
        padding: 0;
        margin: 0;
    }
}

#map { /*max-width: 800px;*/}

    #map .fa.fa-truck,
    #map .number-location {
        display: none;
    }

#locationsList .number-location {
    color: white;
    position: absolute;
    top: 8px;
    left: 23px;
    z-index: 10;
    font-weight: bold;
}

#locationsList .fa.fa-truck {
    font-size: 3em;
}

.location-name {
    font-size: 1.3em;
    font-weight: 700;
}

@media screen and (max-width: 767px) {
}


/*	--------------------------------------------------
	:: Card Template (Associations page)
	-------------------------------------------------- */


.thumbnail {
    display: flex;
    flex-direction: column;
}

.card-image {
    flex: 1 0 auto;
    justify-content: center;
    align-items: center;
    display: flex;
    max-height: 300px;
}

    .card-image img {
        max-height: 300px;
    }

.thumbnail .caption {
    color: #000000;
}

.display-flex {
    display: flex;
}

    .display-flex .col-md-4 {
        display: flex;
    }

.card-cta {
    display: flex;
    flex: 1 0 auto;
}

.card-ctaLink {
    display: flex;
    align-self: flex-end;
}

/*	--------------------------------------------------
	:: Interactive Wheel
	-------------------------------------------------- */

.wheel {
    position: relative;
    width: 100%;
}

    .wheel img {
        width: auto;
        max-width: 493px;
    }

.wheel-text {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
    height: 50%;
    width: 25%;
    text-align: center;
    font-size: 2.52em;
    padding: 2% 1%;
    max-width: 350px;
    font-weight: bold;
    background-color: white;
    border-radius: 50%;
}



/*	--------------------------------------------------
	:: FORM ELEMENTS
	-------------------------------------------------- */

.g-recaptcha {
    margin-bottom: 20px;
}


/* default styles here for older browsers. 
       I tend to go for a 600px - 960px width max but using percentages
    */
@media only screen and (min-width:960px) {
    /* styles for browsers larger than 960px; */
}

@media only screen and (min-width:1440px) {
    /* styles for browsers larger than 1440px; */
}

@media only screen and (min-width:2000px) {
    /* for sumo sized (mac) screens */
}

@media only screen and (max-device-width:480px) {
    /* styles for mobile browsers smaller than 480px; (iPhone) */
}

@media only screen and (device-width:768px) {
    /* default iPad screens */
}
/* different techniques for iPad screening */
@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {
    /* For portrait layouts only */
}

@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {
    /* For landscape layouts only */
}



body.sfPageEditor .banner-header {
}

    body.sfPageEditor .banner-header:before {
    }

    body.sfPageEditor .banner-header h1 {
        margin: 0;
    }



/*	--------------------------------------------------
	:: Leadership Page Hover ELEMENTS
	-------------------------------------------------- */


.hover-item {
    display: block;
    margin-bottom: 50px;
}



    .hover-item img {
        max-width: 200px;
        width: auto;
    }

    .hover-item div.hoverContent img {
        max-width: 120px;
        width: auto;
        opacity: 1;
    }

    .hover-item > div.ahover .creator_info h3 {
    }

    .hover-item > div.ahover .creator_info h4 {
    }

    .hover-item > div.ahover .creator_info p {
        padding: 0 30px;
    }

    .hover-item > div.ahover .creator_info > div u {
    }

    .hover-item > div.ahover {
        display: none;
        /* width: 48%;*/
        width: 100%;
        height: 100%; /*410px;*/
        margin: 0 1% 2% 0;
        padding: 0;
        /*  overflow: hidden; */
        position: relative;
        -webkit-transition: all 0s;
        transition: all 0s;
        cursor: pointer;
        color: #000;
        text-align: center;
    }

        .hover-item > div.ahover:hover { /*cursor:help;*/
        }

        .hover-item > div.ahover .creator_info:after {
            /* margin-top: -13px;
  right: 100%;
  top: 50%;
  position: absolute;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  pointer-events: none;
  border-color: rgba(255,255,255,0);
  border-width: 13px;
  border-right-color: #fff;
  z-index: 0;
  */
        }

        .hover-item > div.ahover .creator_info {
            -webkit-transition: all 300ms ease;
            transition: all 300ms ease;
        }

        .hover-item > div.ahover .creator_info {
            height: 100%;
            /*width: 220px;
  padding: 20px;*/
            /*position: absolute;
  top: 0;
  right: 0;*/
            background: #fff;
        }


            .hover-item > div.ahover .creator_info > div.hoverContent {
                display: none;
                height: 100%;
                width: 100%;
                position: absolute;
                top: 0;
                left: 0;
                background: #fff;
                opacity: 0;
                -webkit-transition: all 150ms ease;
                transition: all 150ms ease;
                color: #fff;
                font-size: 16px;
                z-index: 2;
                background-color: rgba(35, 31, 32, .97);
                padding: 10px 0;
                min-height: 350px;
                border-radius: 10px;
            }

@media (min-width: 1400px) {
    .hover-item > div.ahover .creator_info > div.hoverContent {
        width: 180%;
        left: -40%;
    }
}

.hover-item > div.ahover .creator_info > div.hoverContent h3 {
    font-size: 20px;
    margin: .5em 0 .5em 0;
}


.hover-item > div.ahover .creator_info > * {
    z-index: 1;
}


.hover-item > div.ahover .creator_info > div.hoverContent:before {
}

.hover-item > div.ahover .creator_info.hover > div.hoverContent:before {
}

.hover-item > div.ahover .creator_info > div.hoverContent span {
    width: 70%;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    text-align: center;
}

.hover-item > div.ahover .creator_info.hover > div.hoverContent {
    opacity: 1;
    display: table;
}



.req label:before,
.reqcheckbox strong:before {
    content: '* ';
    color: #ef3d41;
    font-size: 1.1em;
    font-weight: bold;
}


.form-section h2 {
    border-bottom: 2px solid #999999;
    font-size: 25px;
    margin: 25px 0;
    font-weight: 800;
}


textarea {
    width: 100%;
    height: 170px;
    padding: 6px 12px;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    -webkit-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}

textarea {
    font-size: 14px;
    line-height: 1.428571429;
    color: #555;
    display: block;
}

.col-small {
    max-width: 145px;
}



.sfPageContainer .page-content .zeDockZoneEmpty,
.zeContentMode .sfPageContainer .page-content .zeDockZoneEmpty {
    background-color: #78a7d4;
    color: #FFF;
}

.page-content .zeDockZoneLabel {
    color: #FFF;
}

.sfPageContainer .page-content .zeDockZoneEmpty:hover,
.sfPageContainer .page-content .zeDockZoneEmpty:focus,
.zeContentMode .sfPageContainer .page-content .zeDockZoneEmpty:hover,
.zeContentMode .sfPageContainer .page-content .zeDockZoneEmpty:focus,
.zeContentMode .sfPageContainer .page-content .zeDockZoneEmpty.zePlaceholderHighlighted {
    background-color: #006bb7;
    color: #FFF;
}