/* Background Images And Fonts  */
  @font-face {
  font-family: myFont;
  src: url(/fonts/HelveticaNeueThin.otf);
  font-display: swap;
  }
  @font-face {
  font-family: mainFont;
  src: url(/fonts/HelveticaNeue.otf);
  font-display: swap;
  }

                                                                                                             /* Body Elements  */

  h1 {
  font-family:myFont;
  font-size:5em;
  line-height:1
  }
  h2, h3, h4, h5, p {
  font-family:Helvetica
  }
  h6 {
  font-weight:500;
  font-size:12px
  }
  .hb {
  width: 40px;
  margin-right:-10px;
  display: block;
  }
  .video-background {
      position: absolute;
      top: 0;
      left: 0;
      min-width: 100%;
      height: 25vh;
      object-fit: cover;
      z-index: -1;
  }
											  /* Header Responsive Content Overlay */

  .header-box {
    width:100%;
    height:auto;
    display:flex;
    justify-content:center;
    align-items:center;
    position:relative;
    overflow:hidden
  }
  .header-image {
      position: relative;
      z-index: 1;
      display: flex;
      justify-content:center;
      align-items:center;
      color: white;
      width: 100%;
      margin: -400px auto;
      height:100%;
      overflow: hidden;
      background: rgba(0, 0, 0, 0.8); /* optional overlay for readability */
  }
  .header-image .image {
    display:block;
    position:absolute;
    width:50%;
    margin:auto;
    overflow:hidden;
    height:100%;
    justify-content:center;
    align-items:center
  }

	                                                                                                   /* Random Content */
  .UHD-Intro, #HD-Intro, #HD-Small-Intro {
  background-color:lightgrey;
  text-align:center;
  line-height:1
  }
  .intro-paragraph {
  background-color:white;
  border:1px solid #000;
  border-radius:7px;
  margin-bottom:20px
  }
  .intro-paragraph p {
  line-height:1;
  margin:auto;
  padding:10px;
  text-align:center;
  width:80%
  }

                                                                                                   /* Navbar Contents */

  .navbar {
  z-index:1;
  padding: 0 0 0 4px
  }
  .navbar .nav-link {
  font-size:26px;
  font-family:Helvetica;
  font-weight:800
  }
  .nav-item .nav-link {
  font-size:20px;
  font-family:Helvetica;
  font-family:500
  }
  .navbar .icon {
  height:40px;
  width:40px;
  margin:-3px 10px 0 0
  }
  .logo {
  position:absolute;
  width:120px;
  left:30px;
  max-width:15%;
  height:auto;
  margin:0;
  }
  .live-button {
  display:block;
  width:80px;
  height:auto;
  cursor:pointer;
  opacity:.8
  }
  .live-button img {
  width:100%;
  }
  .live-button:hover {
  opacity:1
  }
  .live-box {
  position:absolute;
  width:auto;
  top:20px;
  right:20px;
  margin:0;
  }
  .fb {
  position:absolute;
  width:20px;
  height:40px;
  right:20px;
  float:right
  }
  .fb-icon {
  width:30px;
  height:30px;
  margin-top:4px;
  opacity:.8
  }
  .fb-icon:hover {
  cursor:pointer
  }
  .tweeting {
  position:absolute;
  width:40px;
  right:40px;
  float:right
  }
  .x-icon {
  width:30px;
  height:auto;
  opacity:.8
  }
  .x-icon:hover, .fb-icon:hover {
  opacity:1
  }
  footer a:link {
  color:lightgrey
  }

                                                                                                     /* Lightbox Contents */


  .lightbox {
  /* Overlay entire screen */
  position: fixed;
  z-index: 99999;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;

  /* A bit of padding around image */
  padding: 1em;

  /* Translucent background */
  background: rgba(0, 0, 0, 0.9);
  }
  .lightbox a {
  color:#FFF;
  font-size:50px;
  text-decoration:none;
  text-shadow:2px 2px #000;
  position:absolute;
  right:20px;
  top:20px;
  margin:20px;
  display:block;
  z-index:99999
  }
  /* Unhide the lightbox when it's the target */
  .lightbox:target {
  display: flex;
  top:0;
  left:0;
  height:100%;
  width:100%;
  justify-content:center;
  align-items:center
  }

  .lightbox img {
  /* Full width and height */
  display: block;
  width: 100%;
  height: auto;

  /* Size and position background image */
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  }
  .tab-section {
  display:block;
  position: -webkit-sticky;
  position:sticky;
  top:70px
  }
  .content-box {
  position:relative;
  height:120px;
  display:flex;
  width:100%;
  border:1px solid #000;
  background-color:#555;
  flex-flow:column;
  justify-content:center;
  align-items:center;
  left:0;
  top:0;
  border:1px solid gold;
  margin-bottom:10px
  }
  .section-box {
  background-color:#FFF;
  padding:0;
  margin:0;
  width:100%
  }
  .section-box img {
  width:100%;
  }
  .section-box h4, .section-box h5, .section-box p {
  padding:5px
  }
  .section-box p {
  padding-top:0;
  line-height:1.1;
  margin-top:-10px
  }
  .full-image {
  max-width:100%;
  height:auto;
  margin:auto;
  cursor:pointer
  }
  .icon-logo {
  width:80px;
  height:auto;
  cursor:pointer;
  border-radius:5px
  }
  .stream-to {
  display:flex;
  width:100%;
  height:auto;
  border-radius: 8px;
  top:0;
  left:0;
  justify-content:center;
  align-items:center;
  flex-flow:column;
  margin-top:20px
  }
  .stream-to-row {
  background-color:#FFF;
  border:1px solid grey;
  border-radius:7px;
  display:flex;
  width:100%;
  height:100%;
  top:0;
  left:0;
  justify-content:center;
  align-items:center;
  flex-flow:row;
  padding:0 4px
  }
  .stream-links {
  width:80px;
  max-width:100%;
  display:block;
  height:auto
  }
  .stream-links h5 {
  font-size:10px;
  margin:-5px auto 0 auto;
  padding:0;
  text-align:center
  }
  .link-logo {
  max-width:80px;
  width:90%;
  display:block;
  height:auto;
  margin:5px
  }
 .fakeimg, .icon, .airbnb, .icon-logo {
  opacity:.9
  }
  .fakeimg:hover, .icon:hover, .airbnb:hover, .icon-logo:hover, .full-image:hover {
  opacity:1
  }



												  /* Apple Map Contents */
  .pure-google-map {
  width:100%;
  height:100%;
  z-index:0;
  margin:0;
  padding:0;
  display:block;
  position :relative
  }
  .pure-google-map h3, .pure-google-map h4 {
  display:none
  }


                                                                                                     /* Hero Related Contents */

  .hero-image {
  background-color: #cccccc;
  height: 200px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  margin-bottom:5px
  }
  .adjust {
  background-color: #cccccc;
  height: 200px;
  background-position: top;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  margin-bottom:5px
  }
  .hero-text {
  display:flex;
  flex-flow:column;
  text-align: center;
  position: absolute;
  width:100%;
  height:100%!important;
  align-items:center;
  justify-content:center!important;
  top: 0;
  left: 0;
  color: white;
  text-shadow:2px 2px #000
  }
  .hero-image .hero-text h3 {
  font-size:4em;
  font-family:myFont;
  line-height:1
  }
  .hero-image .hero-text h4 {
  font-size:1.9em;
  font-family:HelveticaNeue;
  line-height:1
  }
  .hero-text-p {
  font-size:2.2em!important;
  line-height:1
  }
                                                                                                   /* Footer Contents */

  .footer-container {
  padding-top:10px;
  position:relative;
  display:flex;
  height:auto;
  width:100%;
  top:0;
  left:0;
  justify-content:center;
  align-items:center;
  flex-flow:column
  }
  .footer-box {
  flex-flow:row;
  display:flex;
  width:auto;
  height:50px;
  margin-bottom:20px;
  justify-content:center
  }
  .footer-items-box {
  display:flex;
  flex-flow:row;
  top:0;
  left:0;
  width:100%;
  justify-content:center;
  align-items:center
  }
 .footer-items {
  margin:auto;
  display:flex;
  height:auto;
  top:0;
  left:0;
  justify-content:center;
  align-items:center;
  flex-flow:column
  }
  .footer-items h4 {
  font-size:20px;
  color:lightgrey;
  margin:auto;
  width:100%;
  text-align:center
  }
  .footer-listing {
  display:flex;
  flex-flow:column;
  top:0;
  left:0;
  justify-content:center;
  align-items:center;
  height:100%;
  width:100%;
  border:1px solid gray;
  border-radius:5px;
  margin:10px;
  text-align:center
  } 
  .background {
  background-color:#FFF;
  border-radius:5px
  }
  .footer-listing a h5 {	  
  font-size:24px;
  line-height:1
  }
  .footer-listing a {
  text-decoration:none;
  }
  .footer-listing h5, footer h6 {
  font-size: 11px;
  width:auto;
  margin:auto;
  text-align:center
  }
  #myBtn {
  display: none;
  position: fixed;
  bottom: 40px;
  right: 20px;
  opacity:.7;
  z-index: 99;
  font-family:Helvetica;
  font-weight:800;
  font-size: 14px;
  border: none;
  outline: none;
  background-color: grey;
  color: white;
  cursor: pointer;
  padding: 5px;
  border-radius: 4px;
  }
  #myBtn:hover {
  background-color: #555;
  }

                                                                                                   /* Nav Pills Contents */

  .nav-pills {
  background-color:transparent
  }
  .nav-pills a.nav-link {
  background-color:#FFF;
  color:#000;
  margin:0 1px;
  border:1px solid #000;
  border-radius:5px 5px 0 0
  }
  .nav-pills a.nav-link:hover {
  background-color:lightgrey;
  color:#000;
  text-shadow:1px 1px transparent
  }
  .nav-pills a.nav-link.active {
  background:#333;
  color:#FFF;
  }
  .tab-content {
  background-color:#333;
  color:#FFF;
  border-radius: 0 0 10px 10px;
  margin-bottom:20px
  }
  .sidebar-title {
  background-color:#000;
  color:#FFF
  }
  .sidebar-title h3 {
  color:hotpink
  }


                                                                                                     /* Responsive Media Queries */


  @media only screen and (min-width: 1500px) {
	  .footer-listing {
	  width:auto;
	  }
  }
  @media only screen and (max-width: 1500px) {
          .nav-pills {
          display:flex;
          width:100%;
          justify-content:center;
          align-items:center;
          top:0;
          left:0;
	  margin-bottom:5px
          }
          .nav-item {
          width:100%;
          margin:auto
          }
	  .my-link a h5 {
          width:auto
          }
  }
  @media only screen and (max-width: 1200px) {
          .nav-pills a {
          font-size:14px;
          padding:4px
          }
          .header-box {
          flex-flow:column
          }
          .footer-items-box {
          flex-flow:column
          }
          .logo {
          position:relative;
          width:144px;
          height:auto;
          max-width:70%;
          margin:auto;
          display:block;
          left:0;
          right:0;
          }
  }
  @media only screen and (max-width: 992px) {
          h1 {
          font-size:3em
          }
	  .titles h1 {
          font-size:25px
          }
          .titles h2 {
          font-size:22px
          }
          .my-email, .my-phone {
          padding:10px
          }
          header {
          height:230px
          }
          header img {
          margin-top:0
          }
	  .navbar {
	  width:100%;
	  text-align:center;
	  margin:auto
	  }
  }
  @media only screen and (max-width: 992px) and (orientation: landscape) {
          header {
          height:100px!important
	  }
  }
  @media only screen and (max-width: 768px) {
	  h1, h2, h3, h4, h5, h6 {
	  line-height:1
	  }
	  h1 {
          font-size:2.5em
          }
	  .tweeting, .fb {
          position:relative;
          right:-10px;
          float:none
          }
	  .pure-google-map img {
	  width:100%;
	  height:auto;
	  }
	  .tab-section {
  	  padding-top:10px;
	  margin-bottom:20px
     	  }
	  #sections {
          display:none
          }
          .nav-pills a {
          font-size:16px;
          padding:10px
          }
	  .titles h1 {
          font-size:19px
          }
          .titles h2 { 
          font-size:17px
          }
     	  .footer-box {
  	  flex-flow:column;
  	  width:150px;
  	  height:100%;
  	  margin:10px;
  	  justify-content:center
  	  }
	  .footer-container {
          padding-bottom:10px
          }
  	  .social-icon {
  	  height:25px;
  	  width:25px;
  	  }
          .footer-items {
          flex-flow:column;
          width:auto;
          justify-content:space-around;
          align-items:center;
          }
  	  .footer-items h4 {
   	  font-size:24px;
  	  color:lightgrey;
    	  margin:auto;
  	  width:auto;
  	  text-align:center
  	  }
          .footer-listing {
          width:auto;
	  flex-flow:column;
          margin:10px
          }
	  .background {
	  height:30px
	  }
	  .my-link a h5 {
  	  margin-top:5px; 
  	  font-size:24px;
  	  line-height:1
  	  }
    }
  @media only screen and (max-width: 575px) {
          h1 {
          font-size:1em:
          }
	  .live-button {
          width:50px;
          height:auto;
          }
          .link-logo {
          margin:5px 10px
          }
          .live-box {
          top:20px;
          right:20px;
          }
          header {
          height:210px
          }
    }