/***********************
 *
 *  Responsive HEADER
 *
 ***/

.header-container {
  height: 100px; /* being a table row needs to have explicit height */
}


/***  NAV  ***/

nav {
  width: 100%;
}
nav > .container {
   padding: 0 6px;
}

	.nav a {
	  display: inline-block;
	  padding: .25em;
	}
    .nav a span {
       display: inline-block;
       padding: .5em 0 .375em;    /* 8px/16px 6px/16px with 2px border at bottom */
    }
    .nav a span.menu-item {
      border-bottom-width: 3px;
      border-bottom-style: solid;
      border-bottom-color: transparent;
      white-space: nowrap;
    }

.navbar {
  height: 50px;
  margin-bottom: 0;
  border: none;
  border-radius: 0;
  position: fixed;
  max-height: 50px;
  z-index: 150;
}
.navbar-right {
	margin-right: 0;
}

.navbar-brand {
  padding-left: 2.5em;
}

/* dropdown menu */
#inverseNavbar1 {
  position: absolute;
  top: 24px;      /* to keep menu UNDER sandwich-icon, not shading it */
  right: 0;
  padding: 25px 3.5em 15px;
  box-shadow: none;
}

.nav > li a {
  padding: 5px 10px;
  font-weight: normal;
}

/* overriding bootstrap style */
.navbar-nav > li a:focus, 
.navbar-nav > li a:hover {
  color: #FFF;
  background-color: transparent;
}

/***  /NAV  ***/

/***  BANNER  ***/

header {
  position: relative;
  width: 100%;
  z-index: 70;
  top: 41px;
} 

	.header {
    display: table;  
    width: 100%;
    padding: 4px 0 10px 0;
	}

		.header .col-1, .header .col-2, .header .buffer, .header .col-3 {
		  display: table-cell;
		  vertical-align: middle;
		  box-sizing: border-box;
		}

	.header .col-1 {
		width: auto;
	  padding: 0;
	}
      .logo {
				width: 100%;
				max-width: 100%;  /* fix for IE svg scaling issue */
				height: auto;
      }

		.header .col-2 {
			position: absolute;
			top: -35px;
			left: 0;
		  padding: 10px 6px 0 15px;
		  text-align: right;
      opacity: 0;
		}
			.header .col-2 span {
			  display: inline-block;
			  line-height: 1.2;
			  border-right-width: 2px;
			  border-right-color: transparent;
			}

		/* this is a buffer between col-2 and col-3
		   with a thin vertical line in the center */
		.header .buffer { 
			width: 50px;
			text-align: center;
			vertical-align: middle;
		  display: none;
		}
      .header .buffer > div{
        display: inline-block;
        width: 2px;
        height: 40px;
        background-color: #888;
      }

		.header .col-3 {
			width: 150px;
		  padding: 0;
		  white-space: nowrap;
		}
			.header .col-3 > div {
				position: relative;
				text-align: right;
			}
				.phone-icon {
					display: table-cell;
					vertical-align: middle;
				  height: 30px;
		      padding-left: 35px;  /* 30px icon width plus 5px-span */
				  background: url(../images/call.svg) no-repeat;
				}

			/***  Changing part of col-3 ***/
      .phone-link {
      }
      .office-hours {
        font-family: "Trebuchet MS", sans-serif;
      }
      .phone-text,.office-hours {
        display: none;
      }      
       .link-number {
        display: inline-block;
      }

			/*** /Changing part of col-3 ***/

  .inverseNavbar-container {
    position: relative;
    width: 100%;
    top: 0;
    z-index: 70;
  }

.navbar-inverse .navbar-brand {
  color: #C1C1C1;
}
.navbar-inverse .navbar-brand:hover {
  color: #C1C1C1;
}


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

@media (min-width: 320px) {
}


@media (min-width: 360px) {
	.header-container {
	  height: 105px;
	}
}


@media (min-width: 380px) {
	.header-container {
	  height: 111px;
	}
	.header .col-1 {
		width: 199px;
	}
}


@media (min-width: 414px) {
	.header-container {
	  height: 118px;
	}
	/* dropdown menu: adjust vertical position */
	.header .col-1 {
		width: 48.0676vw;         /* 199px/414px */
	}
}


@media (min-width: 480px) {
	.header-container {
	  height: 130px;
	}
	.header .col-3 .phone-link {
		font-size: 3.3333vw;  /* 16px/480px */
	}
}


@media (min-width: 612px) {
	.header-container {
	  height: 152px;
	}
	.header .col-1 {
		width: 294px;
		max-width: 294px;
	}
}


@media (min-width: 720px) {
	.phone-icon {
		font-size: 24px;         /* stop growing */
	}
}


@media (min-width: 768px) {
  .inverseNavbar-container {
    position: fixed;
  }
	#inverseNavbar1 {
    top: 0px;
	  padding: 0 5px;
	}
  .navbar {
    z-index: 50;
  }

	.header .col-2 {
		position: static;
		width: auto;
		padding-top: 0;
    opacity: 1;
	}
		.header .buffer {
			display: table-cell;
		}
  .navbar-brand {
    display: none;
  }

	/***  Changing part of col-3 ***/
  .header .col-3 > div {
    top: 5px;
  }

  .office-hours {
     display: block;
     padding-top: 5px;
  }
		.range:first-child {
			margin-left: 36px;
		}

	/*** /Changing part of col-3 ***/
}

@media (min-width: 1400px) {
	.header .col-2 span {
		width: 14em;    /* 261.3338px/18.6667px : because .container starts growing */
	}
}


@media (min-width: 1500px) {
	.header .buffer {
		width: 3.333vw  /* 50px/1500px */
	}
}


@media (max-height: 459px) and (orientation: landscape) {
	.homepage-features {
		display: none !important;
	}
}


@media (max-height: 320px) and (orientation: landscape) {
	.homepage-motto {
		display: none !important;
	}
}

#version {
  position: absolute;
  z-index: 1000;
  top: 0;
  left: 0;
  padding: 5px 0 15px 15px;
  font: normal 12px sans-serif;
  color: #999;
}
.off { opacity: 0; }