@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');

body{background:black;color:white;   font-family: "Open Sans", sans-serif;
  font-weight: 700;margin:0; padding:0; font size: 16px;}
a{color:white; text-decoration: none;}
.logo img{max-width: 280px; width: 60vw; padding-top:.5em;}
img{width:100%;}
img.poster {max-width: 1000px; text-align: center; margin-top:3em;}
.nav{position:fixed; z-index:100; text-transform: uppercase;}
.nav .logo img{opacity:0;}
a li{list-style: none;}
  .socials a{display: inline-block; margin:.4em;font-size:1.4em;}
  .socials a:hover{color:#5fccf5;}
  .socials{position:fixed; text-align:center; width: 100vw; bottom:0; padding-bottom:1em; background:black;}
.menu{padding: 1em 0;
  position: fixed;
  text-align: center;
  width: 100%;
  top: 0;
  background: linear-gradient(180deg,rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%);}
  .menu a{  text-decoration: none; display: inline-block; font-size: 15px; margin: 0 .3em;}
  .menu a:hover{color:#5fccf5; transition: all .2s;}

  #home{flex-flow: column;
  justify-content: space-between;
  align-items: center;
  height: 90vh;
  margin-left: auto;
  margin-right: auto;
  padding-top: 60px;
  padding-bottom: 60px;
  display: flex;background:url('images/mobile_bg.jpg') center top scroll; background-size:cover;-webkit-background-size: cover; background-repeat:no-repeat;
  -moz-background-size: cover;
  -o-background-size: cover;}
  .text-overlay{text-align:center;flex-flow: column;
    text-transform: uppercase;
  justify-content: center;
  align-items: center;
  width: 50vh;
  display: block;/*background: #000000;
background: linear-gradient(180deg,rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.72) 100%);*/}
  a .button{display:block; padding:.4em; text-transform: uppercase;width: 90%; max-width: 300px; margin: 1em auto; background: white; color:black;}
  a .button:hover{transition: all 0.3s; background: #5fccf5;}

section.normal h1{margin-top:2em;text-align: center; padding:2em;}
#home h1{margin-bottom:0;}
h2{font-size:1.2em;margin-top:0;}
#home h1, #home h2{text-shadow: 1px 1px 5px black;}
.container{width: 90%; max-width: 1400px;margin: 0 auto; text-align: center;}
  .product{display: inline-block; width: 100%; max-width: 300px; text-align: center; padding: 1em;}
  .product img{ width:100%; max-width: 300px; }

  /*video*/
  .embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

/*footer*/
.footer{width: 100%; padding: 2em 0; text-align: center; font-size: .8em; font-weight: lighter;}

.footer{ background:black; width: 100%; bottom:38px; position: fixed; text-align: center; border-top: 1px solid white;}
.footer.position{border-top: none!important; margin: 1em auto;}

.position{position: relative; padding:3em 0;}
.hide{display: none;}
button{border-radius: 0 !important;
font-family: "Open Sans", sans-serif;
box-shadow: none !important;
font-size: .8em;
border: 1px solid white;
color:black;
background: white;
cursor: pointer;
padding: .1em 1em;}
button:hover{background:#5fccf5;}

#home.logo{opacity:0;}

/*media queries*/
@media screen and (min-width: 1000px){
  .footer{bottom:0;}
    .left, .right{ display:inline-block; margin: 2em;}
  .text-overlay{flex-flow: initial; width: 100%;}
  #home{background:url('images/OJV - Blue - Press - Sep2025 - 1 skycopy 3 copy 3.jpg') center fixed; background-size:cover;-webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;}
	.menu{  background: linear-gradient(180deg,rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 100%);width: auto;padding:0; background:none;}
	.menu a{font-size: 1.2em;}
	.nav a{display: inline-block; margin:.5em 1em 0 0;}
.socials, .menu, .logo{background:none;display: inline-block; width: 33%;text-align: center;vertical-align: middle;}
.socials{position: initial;bottom: inherit;}
.socials a{margin: 0.5em;
    font-size: 1.2em;}
.menu{top:1%;}
.socials{font-size:1.2em;}
.nav{background: linear-gradient(180deg,rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0) 100%);
    width: 100%;}
}