header.templated-header[data-state="hidden"]{
	display: none;
}
header.templated-header{
  position: relative;
  height: calc(100vh - 30px);
  background-color: #000;
  padding: 15px;
  border-top: 0px solid #000;
	overflow: hidden;
}

header.templated-header>video{
  width: calc(100% + 30px);
    min-height: calc(100% + 88px);
    margin: -15px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    object-fit: cover;
	filter: brightness(0.5);
}
header.templated-header:after{
  content: "";
  position: absolute;
  left: 0px;
  top: 0px;
  right: 0px;
  bottom: 0px;
  background: linear-gradient(0deg,rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.2) 30%);
  z-index: 9;
  display: block;
  height: calc(100% + 30px);
}
header.templated-header img.live-calling{
  position: absolute;
    height: 90px;
    left: 50%;
    bottom: 187px;
    z-index: 99;
    transform: translateX(-50%) translateY(-50%);
    border-radius: 50%;
    background-color: transparent;
    padding: 0px;
    display: none;
	cursor: pointer;
}




body[data-authenticated="1"][data-hash="#live"] header.templated-header img.live-calling{
	display: block;
}

header.templated-header>a>img.dimvid-logo{
  position: absolute;
  height: 180px;
  left: 80px;
  top: 80px;
  z-index: 99;
	transition: all 0.3s;
	display: none;
}

body[data-authenticated="1"] header.templated-header > a > img.dimvid-logo {
	height: 100px;
	left: 20px;
	top: 20px;
	display: block;
}
header.templated-header>nav{
  position: absolute;
  right: 0px;
  top: 0px;
  cursor: default;
  z-index: 99;
  transition: all 0.3s;
  background-color: rgba(0, 0, 0, 0);
  padding: 0px;
  padding-left: 0px;
  padding-right: 0px;
	display: none;
}
body[data-authenticated="1"] header.templated-header>nav{
	display: block;
}
header.templated-header>nav:hover{
  background-color: rgba(0,0,0,0.8);
}
header.templated-header>nav>a{
	position: relative;
}
body[data-authenticated="1"] header.templated-header>nav>a[href="#notifications"]:before{
	content: attr(data-count);
    position: absolute;
    color: #fff;
    background-color: #ff00ff;
    padding: 0px;
    display: block;
    border-radius: 50%;
    text-align: center;
    bottom: -13px;
    left: 4px;
    width: 18px;
    line-height: 18px;
    font-size: 9px;
    font-family: helvetica;
}

header.templated-header>nav>a>button{
  border: none;
  background: none;
  color: #fff;
  cursor: pointer;
  transition: all 0.3s;
  padding: 10px;
  padding-left: 10px;
  padding-right: 10px;
  position: relative;
  overflow: hidden;
  width: 140px;
  height: 50px;
}
header.templated-header>nav>a>button>img{
	height: 18px;
    vertical-align: middle;
    margin-right: 10px;
}
header.templated-header>nav>a>button.selected{
  color: magenta;
}
header.templated-header>nav>a>button:hover{
  color: magenta;
}
header.templated-header>nav>a>button:after{
  width: 100%;
  height: 1px;
  background-color: #0c98fc;
  transform: translateX(100%);
  transition: all 0.3s;
  position: absolute;
  bottom: 0px;
  left: 0px;
  display: block;
  content: "";
}
header.templated-header .preview-menu-item{
  width: 120px;
  background-color: rgba(0,0,0,0.7);
  transform: translateY(100%);
  transition: all 0.6s;
  position: absolute;
  border-radius: 10px;
  border: solid 2px magenta;
  top: 60px;
  right: calc(100% - 120px);
  display: block;
  content: "";
  z-index:999;
  opacity: 0;
  color: magenta;
  padding:10px;
  box-shadow: 0px 0px 10px 4px #1867fc;
  pointer-events: none;
}
header.templated-header .preview-menu-item>img{
  width: 100%;
  display: block;
  margin: auto;
  margin-top: 10px;
  margin-bottom: 10px;
  display: none;
}
header.templated-header .preview-menu-item>h1>img{
  width: 80px;
  display: block;
  margin: auto;
  vertical-align: middle;
  margin-top: -5px;
}
header.templated-header .preview-menu-item>h1>img.smaller{
  width: 60px;
  margin-top: 10px;
  margin-bottom: 10px;
}
header.templated-header .preview-menu-item>h1{
  text-align: center;
  margin: 0px;
  text-transform: uppercase;
  font-size: 17px;
  margin-top: 15px;
}
header.templated-header .preview-menu-item>p{
  text-align: center;
  color: #fff;
  margin-top: 15px;
  margin-bottom: 15px;
  font-size: 12px;
}
body[data-preview="#live"] header.templated-header .preview-live{
  transform: translateY(0%);
  opacity: 1;
  right: 439px;
}
body[data-preview="#technology"] header.templated-header .preview-technology{
  transform: translateY(0%);
  opacity: 1;
  right: 295px;
}
body[data-preview="#use-cases"] header.templated-header .preview-usecases{
  transform: translateY(0%);
  opacity: 1;
  right: 151px;
}
body[data-preview="#about"] header.templated-header .preview-about{
  transform: translateY(0%);
  opacity: 1;
  right: 5px;
}
header.templated-header>nav>a>button:hover:after{
  transform: translateX(0%);
  background-color: magenta;
}
header.templated-header>nav>a>button.selected:after{
  transform: translateX(0%);
  background-color: magenta;
}

@media (max-width: 960px) {
	header.templated-header>a>img.dimvid-logo {
		height: 140px;
		left: 40px;
		top: 40px;
	}
}

@media (max-width: 860px) {
	header.templated-header>a>img.dimvid-logo {
		height: 100px !important;
		left: 20px !important;
		top: 20px !important;
	}
}

@media (max-width: 800px) {
	
	header.templated-header>nav{
		left: 80px;
	}
	header.templated-header > nav > a > button{
		width: calc(25% - 4px);
	}
	header.templated-header>a>img.dimvid-logo {
        height: 42px !important;
        left: 8px !important;
        top: 8px !important;
        transform: none !important;
    }
	
	body[data-preview="#live"] header.templated-header .preview-live{
	  transform: translateY(0%);
	  opacity: 1;
	  right: calc(75% + 7px);
	}
	body[data-preview="#technology"] header.templated-header .preview-technology{
	  transform: translateY(0%);
	  opacity: 1;
	  right: calc(50% + 6px);
	}
	body[data-preview="#use-cases"] header.templated-header .preview-usecases{
	  transform: translateY(0%);
	  opacity: 1;
	  right: calc(25% + 5px);
	}
	body[data-preview="#about"] header.templated-header .preview-about{
	  transform: translateY(0%);
	  opacity: 1;
	  right: calc(0% + 4px);
	}
}
@media (max-width: 620px) {
	header.templated-header>nav>a>button{
		padding-left: 0px;
    	padding-right: 0px;
	}
}
@media (max-width: 540px) {
	header.templated-header>nav>a>button>img {
		        height: 18px;
        margin-right: auto;
        display: block;
        margin-left: auto;
	}
	header.templated-header>nav>a>button{
		font-size: 11px;
	}
}
@media (max-width: 480px) {
	header.templated-header>nav {
        left: 0px;
    }
	body[data-authenticated="1"] header.templated-header > a > img.dimvid-logo{
		display: none;
	}
}