@charset "UTF-8";
/* CSS Document */
* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin: 0;
  box-sizing: border-box;
}
html {
  font-size: 10px;
}
/*hide scrollbar*/
body {
  -ms-overflow-style: none; /* for Internet Explorer, Edge */
  scrollbar-width: none; /* for Firefox */
  overflow-y: scroll;
}
body::-webkit-scrollbar {
  display: none; /* for Chrome, Safari, and Opera */
}
body {
  font-family: bely-display, sans-serif;
  font-weight: 400;
  font-style: normal;
  background-color: #050505 !important;
  overflow-x: hidden;
}
#grain {
  background-color: #050505 !important;
}
#grain:after {
  animation: grain 8s steps(10) infinite;
  background-image: url("img/webP/noise.webp");
  content: "";
  height: 300%;
  left: -50%;
  opacity: .1;
  position: fixed;
  top: -110%;
  width: 300%;
  z-index: -1;
}

@keyframes grain {
  0%, 100% {
    transform: translate(0, 0)
  }
  10% {
    transform: translate(-5%, -10%)
  }
  20% {
    transform: translate(-15%, 5%)
  }
  30% {
    transform: translate(7%, -25%)
  }
  40% {
    transform: translate(-5%, 25%)
  }
  50% {
    transform: translate(-15%, 10%)
  }
  60% {
    transform: translate(15%, 0%)
  }
  70% {
    transform: translate(0%, 15%)
  }
  80% {
    transform: translate(3%, 35%)
  }
  90% {
    transform: translate(-10%, 10%)
  }
}
h1 {
  color: white !important;
  font-family: bely-display, sans-serif !important;
  font-size: 100px !important;
  align-self: center !important;
  margin-bottom: 25px !important;
}

#about-site{	
	position: absolute;
	width: 100vw;
	display: none;
	background-color: #050505;
	z-index: 1;
}

#contact-site {
	position: fixed;
	overflow-y: hidden;
	height: 100vh !important;
    height: calc(var(--vh, 1vh) * 100) !important;
	width: 100vw;
	display: none;
	background-color: #050505;
	z-index: 1;
}

.home-active:after {
  animation: grain 8s steps(10) infinite !important;
  background-image: url("img/webP/noise.webp") !important;
  content: "" !important;
  height: 300% !important;
  left: -50% !important;
  opacity: .1 !important;
  position: fixed !important;
  top: -110% !important;
  width: 300% !important;
  z-index: 0 !important;
}

#about-site:after {
  animation: grain 8s steps(10) infinite !important;
  background-image: url("img/webP/noise.webp") !important;
  content: "" !important;
  height: 300% !important;
  left: -50% !important;
  opacity: .1 !important;
  position: fixed !important;
  top: -110% !important;
  width: 300% !important;
  z-index: 0 !important;
}

#contact-site:after {
  animation: grain 8s steps(10) infinite !important;
  background-image: url("img/webP/noise.webp") !important;
  content: "" !important;
  height: 300% !important;
  left: -50% !important;
  opacity: .1 !important;
  position: fixed !important;
  top: -110% !important;
  width: 300% !important;
  z-index: 0 !important;
}

.logo {
	cursor: pointer;
	visibility: hidden;
}

.sectionheader {
  display: flex !important;
  justify-content: center !important;
  flex-direction: column !important;
  height: 100vh !important;
  height: calc(var(--vh, 1vh) * 100) !important;
  z-index: 10 !important;
  position: relative !important;
  bottom: 15px !important;
  align-items: center !important;
}
h2 {
  color: #CCCC47 !important;
  align-self: center !important;
  font-family: bely, serif !important;
  font-weight: 700 !important;
  font-style: normal !important;
  font-size: 35px !important;
}
h4 {
  color: white !important;
  align-self: center !important;
  font-family: bely, serif !important;
  font-weight: 700 !important;
  font-style: normal !important;
  font-size: 20px !important;
  cursor: pointer !important;
}
h3 {
  color: #CCCC47 !important;
  font-weight: 400 !important;
  font-family: bely-display, sans-serif !important;
}
a {
  text-decoration: none !important;
  color: currentcolor !important;
}
#projects {
  padding: 8em;
}
.ImageContainer_image {
  width: 100%;
  height: 100%;
  position: relative;
  padding-left: 25px;
  padding-right: 25px;
  cursor: pointer;
}
.ImageContainer_image2 {
  width: 100%;
  height: 100%;
  position: relative;
  /*	padding-left: 0px !important;
    padding-right: 0px !important;*/
  cursor: pointer;
}
.img1, .img2 {
  position: relative;
  /*	padding-left: 25px !important;
    padding-right: 25px !important;*/
}
.img1 {
  margin-bottom: 50px;
}
.active-vid {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  padding-left: 25px;
  padding-right: 25px;
  opacity: 0;
}

.ImageContainer_image:hover ~ .active-vid {
	opacity: 1;
}

.ImageContainer_image2:hover ~ .active-vid {
	opacity: 1;
}

.ImageContainer_image:hover {
  opacity: 0;
}
.ImageContainer_image2:hover {
  opacity: 0;
}
.col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9 {
  padding: 0 !important;
  margin-bottom: 50px;
}
.float_r {
  float: right !important;
}
.figure-caption {
  position: absolute;
  left: 25px;
  bottom: -32.5px;
  color: #CCCC47 !important;
  font-size: 2em !important;
  font-family: bely, serif;
  font-weight: 700;
}
#nav {
  position: fixed;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-right: 5em;
  padding-left: 5em;
  padding-top: 2.5em;
  z-index: 1000;
  width: 100%;
}
.list {
  display: flex;
  height: 100vh;
  height: calc(var(--vh, 1vh) * 100);
  flex-direction: column;
  justify-content: center;
  margin-left: 10vw;
  cursor: pointer;
}
.big h3 {
  font-family: bely-display, sans-serif !important;
  color: #CCCC47 !important;
  margin-bottom: 0.35em !important;
  font-size: 100px !important;
  cursor: pointer;
}
.small h3 {
  color: white !important;
  margin-bottom: 0.35em !important;
  font-family: bely, serif !important;
  font-weight: 700 !important;
  font-style: normal !important;
  font-size: 35px !important;
  z-index: 1000;
  cursor: pointer;
}
/*
#toggle-menu > .menu-bg > .small > .list > a:is(:link, :active, :visited).big {
	color: #CCCC47 !important;
	margin-bottom: 0.35em !important;	
	font-size: 100px !important;	
}
*/
h3 {
  z-index: 1000000 !important;
  position: relative !important;
}
.myvid {
  	width: 100vw !important;
	height: 100vh !important;
	height: calc(var(--vh, 1vh) * 100) !important;
}
#vid-container {
  display: flex !important;
  align-items: center !important;
  height: 100vh !important;
  height: calc(var(--vh, 1vh) * 100) !important;

}
.video-player {
  flex-direction: column !important;
  display: flex !important;
}
#btncontrols {
  flex-direction: row;
  display: none;
  width: 90vw;
  align-self: center;
  align-items: center;
  position: absolute;
  bottom: 40px;
}
.vid-progress {
  position: relative;
  width: 100%;
  height: 3px;
  background-color: #A0A0A0;
  margin-left: 2em;
  cursor: pointer;
}
.vid-progress-filled {
  position: absolute;
  width: 0%;
  height: 100%;
  background-color: #CCCC47;
}
#mutebtn h4 {
  margin-left: 1em;
}
#vid-progress-width {
  width: 100%;
  align-self: center;
  align-items: center;
}
.typing::after {
  content: "";
  position: absolute;
  opacity: 0;
  margin-left: 5px;
  width: 1px;
  height: 10%;
  border-right: 2px solid white;
  animation: blink 7.5s ease;
}
.typing2::after {
  content: "";
  position: absolute;
  opacity: 0;
  margin-left: 5px;
  width: 1px;
  height: 5%;
  border-right: 2px solid white;
  animation: blink 5s ease;
}
.typing2 {
  cursor: pointer;
}
@keyframes blink {
  0% {
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  12% {
    opacity: 0;
  }
  20% {
    opacity: 0;
  }
  30% {
    opacity: 1;
  }
  32% {
    opacity: 0;
  }
  40% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  52% {
    opacity: 0;
  }
  60% {
    opacity: 0;
  }
  70% {
    opacity: 1;
  }
  72% {
    opacity: 0;
  }
  80% {
    opacity: 0;
  }
  90% {
    opacity: 1;
  }
  92% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
.lgit h1, .ms h1 {
  color: #CCCC47 !important;
  z-index: 1000;
}
.lgit h2, .ms h2 {
  color: white !important;
  font-weight: 400 !important;
z-index: 1000;
}
.socials {
  display: flex !important;
}

.informations {
	display: flex;
	flex-direction: column;
}

.informations h2 {
	margin-right: auto;
}

.mp {
	display: inline-block;
}

.contact-box {
  display: flex !important;
  height: 100vh !important;
  height: calc(var(--vh, 1vh) * 100) !important;
  flex-direction: column !important;
  justify-content: center !important;
  margin-left: 10vw !important;
  margin-right: 9vw;
  font-size: 16px;
}

.contact-box a::after, .about-box a::after {
  content: '';
  width: 0px;
  height: 1px;
  display: block;
  transition: all 300ms;
  background: white;
}

.lgit h2 {
  margin-bottom: 35px !important;
}
.lgit h1, .ms h1 {
  margin-bottom: 35px !important;
}
.ms h2 {
  margin-right: 35px !important;
}
.lgit {
  margin-bottom: 65px !important;
  z-index: 100000;
}
.ms{z-index: 100000;}

.about-box h1 {
  color: #CCCC47 !important;
  margin-bottom: 0em !important;
  font-size: 90px !important;
}
.about-box h2 {
  color: white !important;
  font-weight: 400 !important;
  font-size: 34px !important;
  margin-bottom: 0.5em;
}
.about-box {
  display: flex !important;
  min-height: calc(var(--vh, 1vh) * 100) !important;
  justify-content: center !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  font-size: 16px;
  padding: 0em;
}

.about-box a:hover::after, .contact-box a:hover::after{
	width: 100%;
}

.about-img {
  display: flex !important;
  align-items: center !important;
  flex-basis: 675px !important;
  margin-bottom: 0;
  align-self: end;
}
.about-text {
  flex-basis: 75ch !important;
  line-height: 49px !important;
  margin-left: 2.5em !important;
  z-index: 2;
	
}
.about-img img {
  width: 100%;
}
.burger {
  display: flex;
  outline: none !important;
  border: 0px !important;
  padding: 0px !important;
  background: transparent;
  transition: all 250ms ease-out;
  cursor: pointer;
  width: 30px;
  height: 30px;
  align-items: center;
  appearance: none !important;
}
#checkboxbtn {
  appearance: none !important;
  -webkit-appearance: none;
  outline: 0;
  user-select: none;
}
.burger:before, .burger:after {
  content: '';
  width: 30px;
  height: 1.5px;
  position: absolute;
  background: white;
  transition: all 250ms ease-out;
  will-change: transform;
}
.burger:before {
  transform: translateY(-3px);
}
.burger:after {
  transform: translateY(3px);
}
.burger:hover:after {
  width: 9px;
}
.active.burger:before {
  transform: translateY(0) rotate(45deg);
}
.active.burger:after {
  transform: translateY(0) rotate(-45deg);
}
.active.burger:hover:after {
  width: 30px;
}
.active.burger:before, .active.burger:after {
  position: fixed;
}
.goback {
  position: fixed;
  z-index: 1000;
  left: 8.5em;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-right: 5em;
  padding-left: 5em;
  padding-top: 2.5em;
  width: 50%;
  opacity: 1;
}


.menu {
  width: 100vw !important;
  position: absolute !important;
  background-color: #050505 !important;
  z-index: 1;
  top: -1440px !important;
  transition: all .80s ease !important;
}
.active-menu {
  width: 100vw !important;
  position: fixed !important;
  background-color: #050505 !important;
  z-index: 999;
  top: 0 !important;
  transition: all .70s ease !important;
}
.active-menu:after {
  animation: grain 8s steps(10) infinite !important;
  background-image: url("img/webP/noise.webp") !important;
  content: "" !important;
  height: 300% !important;
  left: -50% !important;
  opacity: .1 !important;
  position: fixed !important;
  top: -110% !important;
  width: 300% !important;
  z-index: 0 !important;
}
.active-menu ~ .goback {
  z-index: -10;
}


.home-active {
	top: 0;
	transition: all .70s ease;
	position: fixed;
	overflow-y: hidden;
	height: 100vh !important;
    height: calc(var(--vh, 1vh) * 100) !important;
	width: 100vw;
	display: block;
	background-color: #050505;
	z-index: 199;
}

.home {
	position: absolute;
	top: -100vh;
	transition: all .80s ease;
	height: 100vh !important;
    height: calc(var(--vh, 1vh) * 100) !important;
	width: 100vw;
	display: block;
	background-color: #050505;
	z-index: 1;
}

#vplayer {
  display: none;
  position: fixed;
  z-index: 1;
  background-color: #050505 !important;
}
.video-js {
  display: none;
}
.goback {
  display: none;
}
#vplayer:after {
  animation: grain 8s steps(10) infinite !important;
  background-image: url("img/webP/noise.webp") !important;
  content: "" !important;
  height: 300% !important;
  left: -50% !important;
  opacity: .1 !important;
  position: fixed !important;
  top: -110% !important;
  width: 300% !important;
  z-index: -1 !important;
}

  .wideBoxxx {
    width: 100% !important;
    height: 27.5vw;
  }

#V04 {object-fit: cover;}

@media only screen and (max-width: 1650px) {
  .about-img {
    flex-basis: 550px !important;
  }
}
@media only screen and (max-width: 1600px) {
  .about-img {
    flex-basis: 525px !important;
  }
  .about-text {
    font-size: 11px;
    flex-basis: 100ch !important;
    margin-top: 2em !important;
  }
}
@media only screen and (max-width: 1530px) {
  .about-text {
    transform: scale(.9);
    margin-left: 0 !important;
  }
  .about-img {
    flex-basis: 475px !important;
  }
}
@media only screen and (max-width: 1490px) {
  .about-text {
    transform: scale(.85);
    margin-left: -1.5em !important;
  }
  .about-img {
    flex-basis: 450px !important;
  }
}
@media only screen and (max-width: 1385px) {
  .about-img {
    flex-basis: 425px !important;
  }
  .about-text {
    transform: scale(.8);
    margin-left: -3em !important;
  }
}
@media only screen and (max-width: 1340px) {
  .about-img {
    flex-basis: 400px !important;
  }
  .about-text {
    transform: scale(.775);
    margin-left: -3.5em !important;
  }
}
@media only screen and (max-width: 1350px) {
  .figure-caption {
    left: 20px !important;
    bottom: -30px !important;
    font-size: 1.85em !important;
  }
  .ImageContainer_image, .active-vid {
    padding-left: 20px;
    padding-right: 20px;
  }
  .col-sm-4, .col-sm-8, .img1 {
    margin-bottom: 40px;
  }
  #projects {
    padding: 6em;
  }
}
@media only screen and (max-width: 1310px) {
  .about-img {
    flex-basis: 800px !important;
  }
  .about-text {
    transform: scale(1);
    margin-left: 0 !important;
    margin-top: 4em !important;
    padding-bottom: 6em;
  }
}
@media only screen and (max-width: 1125px) {
  /*.figure-caption{
	left: 17.5px!important;
	bottom: -25px!important;
	font-size: 1.7em!important;
	}*/
  .col-sm-4 {
    width: 50% !important;
  }
  .wideBox {
    width: 100% !important;
    height: 27.5vw;
  }
  .ImageContainer_image {
    object-fit: cover;
  }
  .col-sm-8 {
    width: 50% !important;
    height: max-content;
  }
	
	.wideBoxxx {
    width: 100% !important;
    height: 27.5vw;
  }
	
  .img2 {
    width: 200% !important;
    left: -100%;
    height: 27.5vw;
  }
  .float_r .img2 {
    left: 0 !important;
  }
}
@media only screen and (max-width: 1050px) {
  .lgit h1, .ms h1, .about-text h1 {
    font-size: 94px !important;
  }
}
@media only screen and (max-width: 995px) {
  .lgit h1, .ms h1, .about-text h1 {
    font-size: 89px !important;
  }
}
@media only screen and (max-width: 945px) {
  .lgit h1, .ms h1, .about-text h1 {
    font-size: 84px !important;
  }
}
@media only screen and (max-width: 900px) {
  .figure-caption {
    left: 12.5px !important;
    bottom: -20px !important;
    font-size: 1.5em !important;
  }
  .ImageContainer_image, .active-vid {
    padding-left: 12.5px;
    padding-right: 12.5px;
  }
  .col-sm-4, .col-sm-8, .img1 {
    margin-bottom: 25px;
  }
}
@media only screen and (max-width: 895px) {
  .lgit h1, .ms h1, .about-text h1 {
    font-size: 79px !important;
  }
}
@media only screen and (max-width: 840px) {
  .lgit h1, .ms h1, .about-text h1 {
    font-size: 74px !important;
  }
}
@media only screen and (max-width: 800px) {
  h1 {
    font-size: 75px !important;
  }
  h2 {
    font-size: 30px !important;
  }
  #projects {
    padding: 6em;
  }
}
@media only screen and (max-width: 790px) {
  .lgit h1, .ms h1, .about-text h1 {
    font-size: 69px !important;
  }
}
@media only screen and (max-width: 840px) {
  .contact-box {
    margin-right: 8vw;
  }
}
@media only screen and (max-width: 730px) {
  .figure-caption {
    left: 12.5px !important;
    bottom: -20px !important;
    font-size: 1.35em !important;
  }
  .lgit h1, .ms h1, .about-text h1 {
    font-size: 68px !important;
  }
}
@media only screen and (max-width: 710px) {
  .lgit h1, .ms h1, .about-text h1 {
    font-size: 59px !important;
  }
}
@media only screen and (max-width: 670px) {
  .about-text {
    padding-bottom: 0;
  }
}
@media only screen and (max-width: 650px) {
  .figure-caption {
    left: 12.5px !important;
    bottom: -17.5px !important;
    font-size: 1.125em !important;
  }
}
@media only screen and (max-width: 635px) {
  .lgit h1, .ms h1, .about-text h1 {
    font-size: 54px !important;
  }
}
@media only screen and (max-width: 600px) {
  h1 {
    font-size: 65px !important;
  }
  h2 {
    font-size: 25px !important;
  }
  .typing2::after {
    height: 3.25%;
  }
  .about-text h1 {
    font-size: 50px !important;
  }
}
@media only screen and (max-width: 575px) {
  .figure-caption {
    left: 12.5px !important;
    bottom: -30px !important;
    font-size: 2em !important;
  }
	
	.contact-box {
    margin-right: 7vw;
  }
	
  .col-sm-4, .col-sm-8, .img1 {
    margin-bottom: 40px;
  }
  .col-sm-4 {
    width: 100% !important;
  }
  .img2, .wideBox {
    width: 100% !important;
    height: auto !important;
  }
  .ImageContainer_image {
    object-fit: cover;
  }
  .col-sm-8 {
    width: 100% !important;
  }
  .img2 {
    width: 100% !important;
    left: 0;
  }
  #projects {
    padding: 4em;
  }
  .about-box {
    padding: 4em;
  }
	
	.shaka-current-time {
		margin-left: 0;
	}
	
	.shaka-range-container {
		width: 60vw !important;
/*		opacity: 1;
*/	}
	
	.shaka-video-container * {
		display: flex;
		align-items: center;
	}
	
	.shaka-controls-container {
		justify-content: center;
		top: 110px;
/*		opacity: 1;
*/	}
	
	.shaka-spinner-container {
		opacity: 0;
	}
	
}
@media only screen and (max-width: 565px) {
  .about-text h1 {
    margin-bottom: 0.25em !important;
  }
  .lgit h1, .ms h1, .about-text h1 {
    font-size: 46px !important;
  }
	
	  .big h3 {
    margin-bottom: 0.1em !important;
    font-size: 85px !important;
  }
	
}
@media only screen and (max-width: 500px) {
  h1 {
    font-size: 55px !important;
  }
  h2 {
    font-size: 20px !important;
  }
}
@media only screen and (max-width: 485px) {
  .lgit h1, .ms h1, .about-text h1 {
    font-size: 39px !important;
  }
}
@media only screen and (max-width: 455px) {
  .lgit h1, .ms h1, .about-text h1 {
    font-size: 37px !important;
	  
  }

@media only screen and (max-width: 437px) {
	.goback {
  padding-right: 0em;
  padding-left: 0em;
}
	}
	
}
@media only screen and (max-width: 435px) {
  h1 {
    font-size: 50px !important;
  }
  h2 {
    font-size: 17.5px !important;
  }
  .about-box h2 {
    font-size: 20px !important;
  }
  .about-box {
    padding: 2em;
  }
	
	
  #nav {
    padding-left: 2em;
    padding-right: 2em;
  }
  .about-text {
    margin-top: -0em !important;
  }
  .about-box h2 {
    line-height: 1.75;
  }
	
	  .big h3 {
    margin-bottom: 0.1em !important;
    font-size: 75px !important;
  }
	
}
@media only screen and (max-width: 405px) {
  .lgit h1, .ms h1, .about-text h1 {
    font-size: 36px !important;
  }
}
@media only screen and (max-width: 400px) {
  .about-text {
    margin-top: 0.5em !important;
  }
  .lgit h1, .ms h1, .about-text h1 {
    font-size: 33px !important;
  }
}
@media only screen and (max-width: 376px) {
  #nav {
    padding-left: 2em;
    padding-right: 2em;
  }
  .big h3 {
    margin-bottom: 0.1em !important;
    font-size: 50px !important;
  }
  .small h3 {
    font-size: 30px !important;
  }
  h1 {
    font-size: 42px !important;
  }
  .typing::after {
    height: 6%;
  }
  .about-box {
    padding: 2em;
  }
  .about-text {
    margin-top: 1.75em !important;
    padding-bottom: 2em !important;
  }
  .about-box h2 {
    line-height: 1.75;
  }
  .lgit h1, .ms h1, .about-text h1 {
    font-size: 34px !important;
  }
}
@media only screen and (max-width: 361px) {
  .about-box h1 {
    font-size: 40px !important;
  }
  .about-box h2 {
    font-size: 18px !important;
  }
  .about-text {
    margin-top: 1.5em !important;
  }
  .lgit h1, .ms h1, .about-text h1 {
    font-size: 26px !important;
  }
}
@media only screen and (hover:none) {
  .burger:hover:after {
    width: 30px;
  }
	.ImageContainer_image:hover {
		opacity: 1;
	}
	.ImageContainer_image2:hover {
		opacity: 1;
	}
}

.turn {
	display: none;
	z-index: 10000000;
	background-color: #050505;
	position: fixed;
	width: 100vw;
	height: 100vh;
	height: calc(var(--vh, 1vh) * 100);
	opacity: 0;
}

.turn:after {
  animation: grain 8s steps(10) infinite !important;
  background-image: url("img/webP/noise.webp") !important;
  content: "" !important;
  height: 300% !important;
  left: -50% !important;
  opacity: .1 !important;
  position: fixed !important;
  top: -110% !important;
  width: 300% !important;
  z-index: 0 !important;
}

.turn h2 {
	display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
	height: calc(var(--vh, 1vh) * 100);
}

/*@media only screen and (orientation:landscape) and (max-width: 844px) {
  .turn { display:block;}
  .turn h2 { display: flex;}
  .goback, #nav {padding-top: 0;}
	#home{z-index: 1000;}
	#about-site{z-index: 1000;}
	#contact-site{z-index: 1000;}
}*/

@media only screen and (orientation: landscape) and (max-width: 767px) {
	.sectionheader{bottom: -15px !important;}
  .col-sm-4 {
    width: 50% !important;
  }
  .wideBox {
    width: 100% !important;
    height: 27.5vw;
  }
  .ImageContainer_image {
    object-fit: cover;
  }
  .col-sm-8 {
    width: 50% !important;
    height: max-content;
  }
  .img2 {
    width: 200% !important;
    left: -100%;
    height: 27.5vw !important;
	}

  #contact-site, #about-site {
    transform: rotate(-90deg);
    transform-origin: left top;
    overflow-x: hidden;
    position: absolute;
    top: 100%;
    left: 0;
	width: 100vh;
	height: 100vw !important;
  }
	
	#contact-site{
		transform: rotate(-90deg);
		transform-origin: left top;
		overflow-x: hidden;
		top: 100%;
		left: 0;
		width: 100vh;
		height: 100vw !important;
		position: fixed;
	}
	
	.contact-box{margin-left: 1vw !important;height: 100vw !important;}
	.ms, .lgit {transform: scale(.85);}
	
	#vplayer {
		height: calc(var(--vh, 1vh) * 100);
		position: absolute;
		overflow-y: auto;
	}
	
}
	

.shaka-range-container {
  position: relative;
  width: 80vw;
  display: flex;
  justify-content: center;
  align-content: center;
  margin: 0;
  height: 4px;
  border-radius: 4px;
  background: #fff;
 /* opacity: 1;*/
}

.shaka-spacer,
.shaka-overflow-menu-button,
.shaka-volume-bar-container,
.shaka-fullscreen-button,
.shaka-skim-container,
.shaka-play-button{
  display: none !important;
}

.shaka-controls-button-panel {
/*  opacity: 1 !important;*/
}

.shaka-settings-menu,
.shaka-scrim-container {
  opacity: 0 !important;
}

.shaka-bottom-controls {
display: flex;
align-items: center;
width: 100%;
justify-content: center;
}

.shaka-controls-container {
	/*opacity: 1 !important;*/
}

.shaka-video-container * {
    font-family: 'bely';
    font-weight: bold;
}

.shaka-current-time {
	font-size: 17.5px;
}