/*=========================*\

Travelers Marketing Style Sheet

© 2015 - Atlantis Technology

CONTENTS

1. GLOBAL
  Base attributes and reseting bootstrap defaults

2. UTILITIES
  Common classes that perform specific functions

3. COMPONENTS
  3.1 - Navbar
  3.2 - Hero
  3.3 - Travelers Marketing Stats
  3.4 - What We Do/Services
  3.5 - Portfolio/Programs
  3.6 - Testimonials
  3.7 - Contact
  3.8 - Footer

4. Media Queries

COLOR PALETTE

Yellow - #ebc01d
Blue - #5b7088
White - #FFFFFF
Grey - #e6e7e8
Dark Grey - #939598

\*=========================*/

/*=========================*\
  #Global
\*=========================*/

  body{
    color: #5b7088;
    font-family: 'Roboto', sans-serif;
    padding-top: 90px;
    position: relative;
  }
  .h2, .h3{
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: bolder;
  }

/*=========================*\
  #Utilities
\*=========================*/

  .subtitle{
    font-weight: 300;
  }

  .navtarget{
    display: block;
    position: relative;
    padding-top: 60px;
    margin-top: -60px;
    z-index: -1;
  }

  .section-{
    padding: 50px 0;
    position: relative;
  }

  .underscore{
    height: 1px;
    margin: 0 auto 20px;
    width: 50px;
  }

  .arrow-down {
  	border-left: 20px solid transparent;
  	border-right: 20px solid transparent;
    height: 0;
    left: 50%;
    margin-left: -20px;
    position: absolute;
    width: 0;
    z-index: 1;
  }
  .arrow-down-blue{
    border-top: 20px solid #5b7088;
  }
  .arrow-down-yellow{
    border-top: 20px solid #ebc01d;
  }
  .arrow-down-grey{
    border-top: 20px solid #e6e7e8;
  }
.arrow-down-grey{
    border-top: 20px solid #FFFFFF;
  }
  .blue{
    background-color: #5b7088;
    color: white;
  }
  .yellow{
    background-color: #ebc01d;
    color: white;
  }
  .grey{
    background-color: #e6e7e8;
  }
  .white{
    background-color: white;
  }

  .text-grey{
    color: #414042;
  }
  .text-allcaps{
    text-transform: uppercase;
  }

.btn.yellow:hover {
    background-color: #cdb34f;
}

.btn.blue:hover {
    background-color: #5a6776;
}

/*=========================*\
  #Components
\*=========================*/
  /*-----------------------*\
    #Navbar
  \*-----------------------*/

    .navbar{
      background-color: white;
      min-height: 89px;
    }

      .navbar-header{
      }

        .navbar-brand{
          margin: 15px 0 0 15px;
          max-width: 300px;
          padding: 10px 0;
          width: calc(100% - 87px);
        }

          .logo{
            max-width: 100%;
          }

.logo2{
            max-width: 120%;
          }

      .navlist--item{
        border-bottom: 1px solid rgba(0, 0, 0, 0);
        transition: border-bottom .2s;
      }
      .navlist--item.active{
        border-bottom: 1px solid #ebc01d;
      }

        .navbar-default .navbar-nav .navlist--item-link{
          color: black;
          margin-top: 20px;
          text-transform: uppercase;
          transition: background-color .2s, color .2s;
        }
        .navbar-default .navbar-nav .navlist--item-link:hover,
        .navbar-default .navbar-nav .active .navlist--item-link,
        .navbar-default .navbar-nav .active .navlist--item-link:hover,
        .navbar-default .navbar-nav .active .navlist--item-link:focus {
          background-color: rgba(0, 0, 0 ,0);
          color: #ebc01d;
        }

      .navbar-toggle{
        border: 0;
        margin: 29px 15px 28px;
        transition: background-color .2s;
      }
      .navbar-default .navbar-toggle:hover{
        background-color: #F1F1F1;
      }

        .navbar-default .navbar-toggle .icon-bar{
          background-color: #009CDC;
        }

      .navbar-collapse.collapse.in .navlist--item-link:hover{
        background-color: #F1F1F1;
      }

  /*-----------------------*\
    #Hero
  \*-----------------------*/

    .image-underlay{
      background-image: url(../images/photos/hero_optimized.jpg);
      background-position: 50% 35%;
      background-repeat: no-repeat;
      background-size: cover;
      position: fixed;
      width: 100%;
    }

       .image-overlay{
        background-color: rgba(0, 0, 0, 0.35);
      }

        .skrim{
          background-color: rgba(0, 0, 0, .25);
          background: url(../images/skrim_overlay.png);
          height: 600px;
          width: 100%;
        }

    .jumbotron{
      background: transparent;
      color: white;
      margin: 0;
    }

      .jumbotron p{
        font-weight: 300;
      }

      .btn-rect{
        border: 0;
        border-radius: 0;
        padding: 15px 45px;
        text-transform: uppercase;
      }

 .image-underlay-2{
      background-image: url("../images/photos/AdobeStock_285773476_cropped.jpg");
      background-position: 50% 35%;
      background-repeat: no-repeat;
      background-size: cover;
      position: fixed;
      width: 100%;
    }
 		.image-overlay-2{
    	    background-color: rgba(0, 0, 0, 0.55);
     	 }

        .skrim-2{
          background-color: rgba(0, 0, 0, .25);
          background: url(../images/skrim_overlay.png);
          height: 600px;
          width: 100%;
        }

.image-underlay-3{
      background-image: url("../images/photos/hero_optimized_txdot.png");
      background-position: 20% 85%;
      background-repeat: no-repeat;
      background-size: cover;
      position: fixed;
      width: 100%;
    }

       .image-overlay-3{
        background-color: rgba(0, 0, 0, 0.35);
      }

        .skrim-3{
          background-color: rgba(0, 0, 0, .25);
          background: url(../images/skrim_overlay.png);
          height: 600px;
          width: 100%;
        }
  /*-----------------------*\
    #TravelersMarketingStats
  \*-----------------------*/

    .pull-stat{
      color: #5b7088;
      font-family: 'Roboto Condensed', sans-serif;
      font-size: 60px;
      font-weight: bolder;
      line-height: 1em;
      margin: 0 0 10px 0;
    }
    .pull-stat small{
      display: inline-block;
      margin-bottom: -3px;
    }

  /*-----------------------*\
    #WhatWeDo/Services
  \*-----------------------*/

    .whatwedo-{
      padding-bottom: 0;
    }

      .flowchart-{
        margin: 60px -15px;
      }

        .semi-circle{
          background-color: #5b7088;
          border-radius: 200px 200px 0 0;
          height:100px;
          position: relative;
          width:200px;
          margin: 0 auto;
        }

          .flowchart--graphic{
            bottom: 0;
            left: 0;
            margin: auto;
            position: absolute;
            right: 0;
          }

        .flowchart--arrows{
          left: 0;
          margin: 0 auto;
          position: absolute;
          right: 0;
          top: -210px;
        }
        .flowchart--dots{
          background-image: url(../images/icons/yellow_dot.png);
          height: 2px;
          position: absolute;
          top: -166px;
          width: calc(100% - 75px);
        }
        .flowchart--dots-left{
          left: 15px;
        }
        .flowchart--dots-right{
          right: 15px;
        }

        .tab-toggle:hover{
          cursor: pointer;
        }

      .tab-blocks-{
        background-color: #e6e7e8;
        border: 1px solid #5b7088;
        margin-top: 30px;
      }
        .tab-blocks--block{
          background-color: rgba(0, 0, 0, 0);
          border-bottom: 1px solid rgba(0, 0, 0, 0);
          padding: 15px;
          transition: background-color .2s, border-bottom-color .2s;
        }
        .tab-blocks--block.active{
          background-color: #5b7088;
          border-bottom-color: white;
        }
        .tab-blocks--link{
          color: #5b7088;
          display: block;
          min-height: 65px;
          text-decoration: underline rgba(0, 0, 0, 0);
          transition: text-decoration-color .2s, color .2s;
        }
        .tab-blocks--link:hover{
          color: #5b7088;
          text-decoration-color: #414042;
        }
        .tab-blocks--link.active{
          color: white;
        }

      .tab-content-{
        padding: 60px 0 15px;
      }
        .tab-content--panel{
          margin-bottom: 45px;
        }
        .tab-content--graphic{
          margin-bottom: 15px;
        }
        .tab-content--subhead{
          text-transform: uppercase;
        }

  /*-----------------------*\
    #Portfolio/Programs
  \*-----------------------*/

    .portfolio--grid{
      border: 0px solid #939598;
      margin: 30px 0 15px;
    }
      .portfolio--tile{
        padding: 0;
        transition: background-color .2s, color .2s;
      }
        .portfolio--tile-thumbnail{
          background-position: center;
          background-size: cover;
          padding-bottom: 50%;
        }
          .portfolio--tile-safetyservice{
            background-image: url(../images/photos/safetyservice_small.jpg);
          }
          .portfolio--tile-safephone{
            background-image: url(../images/photos/safephonezone_small.jpg);
          }
          .portfolio--tile-serviceplaza{
            background-image: url(../images/photos/serviceplaza_small.jpg);
          }
          .portfolio--tile-tollplaza{
            background-image: url(../images/photos/tollplaza_small.jpg);
          }
          .portfolio--tile-bikeshare{
            background-image: url(../images/photos/tpas_small.jpg);
          }
          .portfolio--tile-superviseddriving{
            background-image: url(../images/photos/roadready_small.jpg);
          }
          .portfolio--tile-sah{
            background-image: url(../images/photos/sah_small.jpg);
          }
		  .portfolio--tile-logosigns{
            background-image: url("../images/photos/logosigns_small.jpg");
          }

          .portfolio--tile .text-grey{
            transition: color .2s;
          }

          .portfolio--tile-arrow{
            border-bottom: 20px solid transparent;
            border-top: 20px solid transparent;
            margin-top: -20px;
            position: absolute;
            height: 0;
            top: 50%;
            width: 0;
          }
          .arrow-left{
            border-right: 20px solid #e6e7e8;
            right: 0;
            transition: border-right-color .2s;
          }
          .arrow-right {
          	border-left: 20px solid #e6e7e8;
            left: 0;
            transition: border-left-color .2s;
          }

      .portfolio--tile:hover{
        background-color: #ebc01d;
        color: white;
        cursor: pointer;
      }
        .portfolio--tile:hover .text-grey{
          color: white;
        }
        .portfolio--tile:hover .arrow-left{
          border-right-color: #ebc01d;
        }
        .portfolio--tile:hover .arrow-right{
          border-left-color: #ebc01d;
        }

    /*-- Popout --*/
    .popout-{
      display: none;
      margin: 30px 0 15px;
      position: relative;
    }
      .popout--photo{
        padding: 0;
      }
      .popout--photo-img{
        width: 100%;
      }
      .popout--description{
        padding-bottom: 10px;
      }
      .popout--exit{
        display: block;
        padding: 10px;
        position: absolute;
        top: 0;
        right: 0;
      }
      .popout--exit:hover,
      .popout--exit:focus{
        color: inherit;
        text-decoration: none;
      }

  /*-----------------------*\
    #Testimonials
  \*-----------------------*/

    #testimonials-carousel{
      min-height: 340px;
    }
      .carousel-control.left,
      .carousel-control.right{
        background: none;
        text-shadow: none;
        width: 8.33%;
      }
      .carousel-control .glyphicon-chevron-left{
        left: 0;
        top: 30px;
      }
      .carousel-control .glyphicon-chevron-right{
        right: 0;
        top: 30px;
      }

      .testimonial{
        font-weight: 400;
      }

  /*-----------------------*\
    #Contact
  \*-----------------------*/

    .contact-form-{
      margin-top: 20px;
    }

      .btn-submit{
        clear: both;
        display: block;
        margin: 0 auto;
      }

    .contact-method-{
      margin-top: 20px;
    }
      .contact-method--icon{
        margin-right: 15px;
      }
      .contact-method--text{
        display: inline-block;
        vertical-align: middle;
      }

  /*-----------------------*\
    #Footer
  \*-----------------------*/

    footer{
      padding: 15px 0;
      position: relative;
    }

    .social-icon{
      margin: 10px;
      width: 45px;
    }

    .footer-logo{
      display: block;
      margin: 15px auto;
      max-width: 285px;
    }

    .copyright{
      text-align: center;
    }

    .footnav-{
      float: right;
      margin: 0 -15px 0 0;
      padding: 0;
    }
      .footnav--item{
        float: left;
        list-style: none;
      }
        .footnav--item-link,
        .footnav--item-link:hover,
        .footnav--item-link:active,
        .footnav--item-link:focus{
          color: white;
          display: block;
          font-size: 14px;
          padding: 15px;
          text-decoration: none;
          text-transform: uppercase;
          transition: background-color .2s;
        }
        .footnav--item-link:hover,
        .footnav--item-link:active,
        .footnav--item-link:focus{
          background-color: rgba(0, 0, 0, 0.4);
        }


/*=========================*\
  #Media Queries
\*=========================*/

  @media (min-width: 768px){

    .navbar-brand{
      width: 100%;
    }

    .tab-blocks-{
      margin-top: 0;
    }
    .tab-blocks--link{
      min-height: 45px;
    }

    .tab-content-{
      padding: 45px 0 0;
    }

    .portfolio--grid, .popout-{
      margin: 30px -15px 15px;
    }

    #testimonials-carousel{
      min-height: 310px;
    }

    .btn-submit{
      float: right;
    }

    .footnav--item-link:hover,
    .footnav--item-link:active,
    .footnav--item-link:focus{
      background-color: rgba(0, 0, 0, 0.4);
    }

    .footer-logo{
      margin: 15px 0 5px 0;
    }
    .social-icons{
      float: right;
    }
      .social-icon{
        width: 30px;
        margin: 0  0  0 10px;
      }
    .copyright{
      margin: 15px 0 15px;
      text-align: left;
    }

  }

  @media (min-width: 992px){

    #collapsable-nav{
      background-color: white;
      min-height: 89px;
    }

    .flowchart--arrows{
      top: -180px;
    }
    .flowchart--arrows-right{
      left: auto;
      right: 25px;
    }
    .flowchart--arrows-left{
      left: 25px;
      right: auto;
    }

    .tab-blocks--link{
      min-height: auto;
    }

    #testimonials-carousel{
      min-height: 250px;
    }

  }

  @media (min-width: 1200px){

    #testimonials-carousel{
      min-height: 220px;
    }

  }
.map-embed {
  border-radius: 6px;
  overflow: hidden;            /* rounds the iframe corners */
  box-shadow: 0 6px 18px rgba(0,0,0,.12);
}

/* HERO Benefits – sleek cards */
#hero-benefits .section-intro {
  margin-top: 14px;
  margin-bottom: 10px;
  font-size: 18px;
  line-height: 1.6;
}

#hero-benefits .benefit-cards {
  max-width: 880px;   /* keeps lines readable on wide screens */
  margin: 22px auto;
}

#hero-benefits .benefit {
  position: relative;
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  border-left: 6px solid #1f6fb7; /* match your blue accent */
  border-radius: 8px;
  padding: 18px 18px 16px;
  margin-bottom: 14px;
  box-shadow: 0 8px 20px rgba(0,0,0,.05);
}

#hero-benefits .benefit-title {
  margin: 0 0 6px 0;
  font-size: 20px;        /* larger, easier to scan */
  font-weight: 700;
  text-transform: none;   /* keep friendly sentence case */
}

#hero-benefits .benefit-text {
  margin: 0;
  font-size: 17px;
  line-height: 1.65;
  color: #333;
}

/* optional: subtle checkmark badge for each card */
#hero-benefits .benefit::before {
  content: "✓";
  position: absolute;
  left: -16px;
  top: 14px;
  font-size: 14px;
  color: #fff;
  background: #1f6fb7;
  width: 24px;
  height: 24px;
  line-height: 24px;
  text-align: center;
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(0,0,0,.15);
}
/* Testimonials clean style (kept) */
.testimonial-quote {
  font-size: 20px;
  line-height: 1.6;
  color: #fff;
  margin: 0 auto 12px;
  max-width: 820px;
}
.testimonial-attrib {
  font-size: 16px;
  color: #e9f2fb;
  margin-bottom: 20px;
}

/* Consistent height + centering WITHOUT touching .item */
#hero-testimonials .testimonial-slide {
  min-height: 240px;              /* set shared height here */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;             /* centers the text */
  padding: 6px 0;
}

/* Indicators below the quotes */
.testimonial-indicators { bottom: -35px; }
.testimonial-indicators li { border-color: #fff; }
.testimonial-indicators .active { background-color: #fff; }

/* Optional: tweak on very small screens */
@media (max-width: 480px) {
  #hero-testimonials .testimonial-slide { min-height: 280px; }
  .testimonial-quote { font-size: 18px; }
}
/* Adjust carousel arrow position for HERO testimonials */
#hero-testimonials .left.carousel-control,
#hero-testimonials .right.carousel-control {
  top: 40%;         /* move arrows down (default ~30%) */
  transform: translateY(-40%); /* keep them centered at new position */
  height: auto;     /* ensures no full-height ghost area */
}
#hero-benefits .eligibility-note {
  font-size: 13px;
  color: #666;     /* subtle gray, not competing with main copy */
  margin-top: 20px;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.4;
}
/* Subpage only: anchor offset for fixed navbar */
.navtarget { position: relative; top: -70px; display: block; height: 0; visibility: hidden; }
/* Respect reduced motion for testimonials */
@media (prefers-reduced-motion: reduce) {
  #hero-testimonials { -webkit-overflow-scrolling: auto; }
  #hero-testimonials .carousel-inner > .item { transition: none !important; }
}