/* HTML5 display-role reset for older browsers */
  article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
   display: block; }

  ol, ul {
    list-style: none; }

  a:hover, a:focus {
    text-decoration: none;
    outline: none; }

  ::selection {
    color: #fff;
    background: #899bcf; }

  a {
    background-color: transparent; }

  a:active,
  a:hover {
    outline: 0; }

  small {
    font-size: 80%; }

  svg:not(:root) {
    overflow: hidden; }

  hr {
    box-sizing: content-box;
    height: 0; }

  button,
  input,
  optgroup,
  select,
  textarea {
    color: inherit;
    font: inherit;
    margin: 0; }

  button {
    overflow: visible; }

  button,
  select {
    text-transform: none; }

  button::-moz-focus-inner,
  input::-moz-focus-inner {
    border: 0;
    padding: 0; }

  input {
    line-height: normal; }

  table {
    border-collapse: collapse;
    border-spacing: 0; }

  td,
  th {
    padding: 0; }

  article,
  aside,
  details,
  figcaption,
  figure,
  footer,
  header,
  hgroup,
  main,
  menu,
  nav,
  section,
  summary {
    display: block; }

 /**   Common css for all the pages   **/
  body p {
    font-size: 16px;
    line-height: 26px; }
      @media screen and (max-width: 768px) {
        body {
          line-height: 44px; }
        body p {
          font-size: 14px;
          line-height: 24px; } }

/*
========================================================================
Typographs css
------------------------------------------------------------------------
*/
  h1 {
    font-size: 42px;
    line-height: 54px;
    font-family: 'Roboto', sans-serif; }
      @media screen and (max-width: 768px) {
        h1{
          font-size: 32px;
          line-height: 42px; } }

  h2 {
    font-size: 32px;
    font-weight: 300;
    line-height: 42px; }
    @media screen and (max-width: 768px) {
      h2 {
        font-size: 26px;
        line-height: 34px; } }

/* sub-heading  */
  h3 {
    font-size: 24px;
    line-height: 34px; }
    @media screen and (max-width: 768px) {
      h3 {
        font-size: 20px;
        line-height: 30px; } }

  h4 {
    font-size: 22px;
    line-height: 32px; }


/** --------------------------
      Header
  ------------------------------- **/

  #vt-header-menu{
    padding:15px 0;
    -webkit-transition:all 0.8s;
    transition: all 0.8s;}

  #vt-header-menu.navbar-default{
    background-color: rgba(51,122,183,0);
    border-color:rgba(51,122,183,0);
    margin-bottom:0;}

  #vt-header-menu.navbar-default .navbar-nav>li>a{
    color: #ffffff;
    text-transform: uppercase;
    display: inline-block;
    font-size: 14px;
    font-weight: 550;
    margin: 18px 5px;
    padding: 5px 10px;}

  #vt-header-menu.navbar-default.on .navbar-nav > li > a {
    margin: 12px 5px; }  /** change in margin of navigation bar after scroll**/

  #vt-header-menu.navbar-default .navbar-nav > li:last-child > a {
    margin-right: 0; }

  #vt-header-menu.navbar-default .navbar-nav > li > a > i {
    font-size: 18px; }

  #vt-header-menu.navbar-default .navbar-nav>li>a:hover,
  #vt-header-menu.navbar-default .navbar-nav>li>a:focus{
    color: #fff;}  /** color of menu on focus and hover before scroll**/

  .navbar-brand{
    width:250px;}

  .navbar-nav{
    width:890px;}
    @media screen and (max-width: 320px){
      .navbar-nav{
        width:310px; } }

/** On scroller brand logo change **/
  .navbar-default .navbar-brand .vt-on-img,
  .navbar-default.on .navbar-brand .vt-img {
    display: none; }

  .navbar-default.on .navbar-brand .vt-on-img {
    display: block; }

/** while scrolling the header nav changing **/
  .navbar-default, .navbar-default.on {
    -webkit-transition: box-shadow .5s, opacity .3s, min-height .4s;
    transition: box-shadow 0.5s, opacity 0.3s, min-height 0.4s; }

  .navbar-default.on {
    background-color: #04415f !important;  /** color of navbar background after scroll**/
    padding: 0 !important;}

  .navbar-default.on .nav > li>a{
    color: #fff !important; }  /**   color of menu after scroll big screen view**/

  .navbar-default.on .nav > li>a:hover{
    color: #fff !important; }

  .navbar-default.on .nav > li>a:focus{
    color: #fff !important; }

  .navbar-default.on .nav li .dropdown-list-item:hover a {
    color: #fff; }

  .navbar-default .navbar-nav>.active>a{
    background-color: transparent;}

/** underline effect **/
  .navbar-nav li .vt-effect-items::before {
    background-color: transparent;
    position: absolute;
    content: "";
    width: 0%;
    height: 3px;
    bottom: 0;
    transition: 0.8s all;
    -webkit-transition: 0.8s all;
    -ms-transition: 0.8s all;
    -moz-transition: 0.8s all;
    display: inline-block; }

  .navbar-nav li .vt-effect-items:hover::before {
    background-color: #f74d65;   /** color of underline before scroll**/
    width: 80%; }

  .navbar-default.on .navbar-nav li .vt-effect-items:hover::before {
    background-color: #f74d65; }   /** color of underline after scroll**/
      @media screen and (max-width: 768px) {
        .navbar-default.on .navbar-nav li .vt-effect-items:hover::before {
          background-color: #f74d65; } }  /** color of underline in mobile view**/

/**animation of icon-bar**/

  @media screen and (max-width: 768px){
    .navbar-nav{
      width:100%;}

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

    .navbar-default .navbar-collapse{
      background: #ffffff;}

    .vt-img,.vt-on-img{
      width:120px !important;
      margin-left:20px;}



    .navbar-default.on .navbar-toggle .icon-bar, .navbar-default.on:hover .navbar-toggle .icon-bar{
      background-color: #fff;}  /** color of icon-bar after scroll**/

    #vt-header-menu {
    padding: 15px 0; }

    #vt-header-menu .navbar-header .navbar-brand {
      padding: 0 15px;
      margin: 12px 0 0 0;
      height: 30px;
      width: 50px !important}

    #vt-header-menu .navbar-header .navbar-toggle {
      border: none;
      background: transparent !important; }

    .navbar-header .navbar-toggle .icon-bar {
      width: 22px;
      transition: all 0.2s; }

    #vt-header-menu .navbar-toggle .top-bar {
      transform: rotate(45deg);
      transform-origin: 10% 10%; }

    #vt-header-menu .navbar-header .navbar-toggle .middle-bar {
      opacity: 0; }

    #vt-header-menu .navbar-header .navbar-toggle .bottom-bar {
      transform: rotate(-45deg);
      transform-origin: 10% 90%; }

    #vt-header-menu .navbar-header .navbar-toggle.collapsed .top-bar {
      transform: rotate(0); }

    #vt-header-menu .navbar-header .navbar-toggle.collapsed .middle-bar {
      opacity: 1; }

    #vt-header-menu .navbar-header .navbar-toggle.collapsed .bottom-bar {
      transform: rotate(0); }

    #vt-header-menu.navbar-default .navbar-nav > li > a{
      margin: 10px 15px;
      color: #333333 !important; }  /** color of menu in mobile view before scroll**/

    #vt-header-menu.navbar-default .navbar-nav > li > a:hover, #vt-header-menu.navbar-default .navbar-nav > li > a:focus {
      color: #f74d65 !important;}}

/**======================================
             contact us content
--------------------------------\-------**/

/*--- banner **/

  .banner{
    height:300px;
    overflow: visible;
    display: block;
    position: relative;
    background-repeat: no-repeat;
    background: url(../images/services-main.png);
    background-size: cover;}

  .banner_text{
    padding-top:200px;}

  .banner_text h1{
    color: #fff;
    font-size:60px;
    letter-spacing:5px;
    font-family:'Raleway';}

  .banner_text h5,.banner_text h5 a{
    color: #fff;
    letter-spacing:2px;
    font-family:'Roboto Condensed';}

  .banner_text h5 a:hover{
    color: #f74d65;
    letter-spacing:5px;
    font-family:'Roboto Condensed';}

  .form_submit{
    width: 100%;
    background: #337ab7;
    border-radius: 0px;
    color: #fff;
    padding-top: 13px;
    padding-bottom: 10px;
    transition: all 1s;	}

/** contact form **/

  .vt-contact_form h3 {
    margin-top: 20px;
    color:#04415f;
    font-weight: 700;  }

  .vt-contact_form #vt-form {
    margin-top: 40px; }

  .vt-contact_form #vt-form .form-control {
    margin: 25px 0; }

/** over-riding bootstrap-form css **/
  #vt-form input[type=text], #vt-form input[type=email], #vt-form input[type=tel], #vt-form select {
    height: 55px; }

  #vt-form .form-control {
    border-color: #fff;
    padding: 15px 25px;
    box-shadow: 2px 2px 5px #337ab7;
    -webkit-box-shadow: 2px 2px 5px #337ab7;
    -moz-box-shadow: 2px 2px 5px #337ab7;
    border-radius: 0;
    margin: 15px 0; }

	/** ---- Map ----**/
  .vt-contact_map {
    margin-top: 20px;
    margin-bottom: 10px;
    background: url(../images/map-image.jpg);}

  .vt-contact_map .vt-thumb_nails {
    border: none;
    padding: 50px 25px 0px 25px;
    margin-bottom: 0px; }

  .vt-contact_map .vt-thumb_nails .map {
    position: relative; }

  .vt-contact_map .vt-thumb_nails .map .vt-patch {
    position: absolute;
    top: 0;
    left: 0;
    background-color: #284593;
    color: white;
    padding: 10px 15px;
    text-transform: uppercase;
    font-size: 16px;
    line-height: 26px; }

  @media screen and (max-width: 768px) {
    .vt-contact_map .vt-thumb_nails {
      padding: 25px 0px 0px 0px; } }

  .vt-contact_map h3,  .vt-contact_map h5 {
    margin-top: 20px;
    color:#fff;
    font-weight: 700;  }

  .vt-map_content {
    padding: 30px; }

  .vt-map_content .vt_address {
    padding: 20px 0; }

  .vt-map_content .vt_address h5 {
    margin-bottom: 15px;
    font-size: 18px;
    line-height: 28px; }
    @media screen and (max-width: 768px) {
      .vt-map_content {
        padding: 15px 5px; }
        .vt-map_content .vt_address {
          padding: 15px 0; } }

  address {
    color: #fff;
    font-size: 14px;
    font-weight: 300;
    line-height: 25px; }

  address span {
    font-weight: 500; }


/*------------------------------------
                 Footer
--------------------------------------*/
  footer#SITE-FOOTER {
    background-color: #eee;
    border-top: 1px solid #ccc;
    color: #888;
    font-size: 12px;
    padding: 70px 0;}

  .ft-title{
    border-bottom: 1px solid #ccc;
    color: #04415f;
    font-size: 1em;
    font-weight:700;
    margin-bottom: 0.5em;
    padding-bottom: 0.5em;
    text-transform: uppercase;}
      @media screen and (max-width: 768px){
        .ft-title{height:20px;}}

  footer#SITE-FOOTER ul{
    padding:0px;}

  footer#SITE-FOOTER li a{
    font-family:Raleway;
    color: #666;
    display: block;
    font-size: 10px;
    font-weight: 300;
    line-height: 22px;
    text-transform: uppercase;}

  footer#SITE-FOOTER li a:hover,footer#site-footer li a:focus{
    color:#f74d65;
    font-weight: 600;
    font-size: 11px;}

  footer#SITE-FOOTER #COPYRIGHT{
    border: 1px solid #ccc;
    border-left: none;
    border-right: none;
    margin-bottom: 9px;
    margin-top: 55px;
    padding: 9px 0;}