/*



THIS IS SCRATCH STYLES



*/


/*
root.cssdebug * {
border: 1px dotted red;
background: rgba(255, 0, 255, 0.1);
}

remember CSS reset */


/* header/nav */





body
{
background-color: black;
font-family: "avenir next";
color: white;
font-weight:lighter;
}


/* hide page scrollbar */
html { scrollbar-width: thin; } /* Firefox */
body { -ms-overflow-style: none; } /* IE and Edge */
body::-webkit-scrollbar, body::-webkit-scrollbar-button { display: none; } /* Chrome */
/* end hide page scrollbar */












/* note that header element is a child of the videoBox element */
header
{
margin: 100px;
display: flex;
justify-content:center;
align-items: center;
box-sizing: border-box;
padding: 0px;
z-index:1;
background:rbga(0,0,0,0);
position:absolute; bottom: 100px;
border: solid 1px white;
/*background-color: black;*/
}

ul li
{
display:inline
}

#startimg
{
position: relative;
}


header #startimg
{
display: block;
visibility: visible;
opacity: 1;
transition-property: visibility display opacity;
transition-duration: 5s;
transition-behavior: allow-discrete;
}

#logocontainer
{
position: relative;
width: 100px;
}

.image
{
display: block;
width: 100px;
height: 100px;
}

#logohover
{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100px;
width: 100px;

box-shadow: 
0px 0px 5px 2px rgb(255, 253, 197),
0px 0px 50px 5px rgb(255, 253, 197),
0px 0px 5px 2px rgb(255, 253, 197) inset,
0px 0px 50px 5px rgb(255, 253, 197) inset;

border-radius: 50px;
opacity: 0;
transition: .2s ease-out;
}

#logocontainer:hover #logohover {
opacity: 1;
}
	




/****** end header ******/




















.mainBox
{
display:flex;
justify-content:center;
text-align:center;
width:100%;
/*height:100%;*/
min-height:100vh;
position: relative; /*ensures that the child position:absolute video element contained within remains within*/
overflow: hidden; /* if child video dimensions are greater than the div's, cut off edges*/
/* ^ three gradient values is three color bands. the second is meant to push the bottom band away from the middle */
}


.mainBox video
{
object-fit:cover;
min-width: 100%;
height: 100%;
z-index:-1; /*behind parent div content/*
/* v v v makes sure video is centered when resizing page v v v */
position:absolute; /*requires that the parent div movieBox is position:relative; to remain within parent*/
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

.mainBox h1
{
position:absolute; left:; bottom:3%;
font-size: calc(20px + 3vw);
opacity: .4;
/*writing-mode: vertical-lr;
text-orientation: upright;*/
}





#heroBox
{
	background: linear-gradient(0deg, rgba(0,0,0,1),rgba(0,0,0,0), rgba(0,0,0,0));
	width:100%; /*explicitly setting width allows centering of child elements (header)*/
	overflow:hidden;
}



#box2
{
	background: linear-gradient(0deg, rgba(0,0,0,1),rgba(0,0,0,0), rgba(0,0,0,0));
}


.video-container
{

display: flex;
justify-content: center;
align-items: center;

margin-top: 30px; margin-bottom: 90px;

width: 80%; min-width: 400px;
height: auto;
min-height:50vh;
padding: 0;
margin-left: auto; margin-right: auto;
overflow: visible;
/*box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);*/
cursor: pointer;
transition: box-shadow 0.3s ease-in-out;
}


.video-container p
{
size:10vw;
position:absolute;
}


.video {
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0.7;
transition: opacity 0.3s, transform 0.3s;
transform: scale(1);

position:relative;top:0;left:0;
}

.video-container:hover
{
box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.6);
}

.video-container:hover .video
{
opacity: 1;
transform: scale(1.03);
}

























#top {
margin-top: 60;
font-size: calc(12px + .7vw);;
text-align: center;
}
#middle {
margin-top: 60px;
font-size: calc(12px + .7vw);;
text-align: center;
}
#bottom {
margin: 0 0 0 60;
font-size: calc(12px + .7vw);;
text-align: center;
}















.videobox
{
box-sizing: border-box;
width: 100%;
height: 100%;
border: solid 30px white;
}


.videobox iframe {
object-fit: cover;
width: 100%; height: 100%;
}


.videobox video
{
object-fit: cover;
width: 100%; height: 100%;
}








div.scroll-container {
overflow: auto;
white-space: nowrap;
padding: 30px;
}

div.scroll-container iframe {
padding: 10px;
}







footer {
	margin-top:20px;margin-bottom:20px;
	font-weight:300;
	display:flex;
	align-content:center;
	justify-content: center;
}