.content {max-width: 1280px}

/* video */

	video,iframe {width: 100%;}

	#video {position: relative; background-color: white}

	#overlay{display: none;
			 position: absolute;
			 width: calc( 100% - 100px );
			 top: 0;
			 left: 50px;
			 pointer-events:none;
			 text-align: center;
			 color: white;
			 text-shadow: 0 0 10px black;
			 z-index: 5;
			 background-color: dimgray;
			 background-image: url("/img/overlay.jpg");
			 background-size: 100%;
			 background-position: center;
	}

	
	#overlay.youtubeless {
		pointer-events: auto;
		cursor: pointer
	}

	#overlay span { font-size: 210px;
					color: GhostWhite;
					font-family: SoftrosWeb;
					position: absolute;
					width: 100%;
					left:0;
					top:40%
	}

	#overlay.youtubeless span{
		pointer-events: auto;
		cursor: pointer;
	}

	#overlay:hover span {color:#f22808}

	#overlay div {position: absolute;
				  bottom: 45px;
				  left: 45px;
				  transition: all ease-out 0.3s;
				  width: calc(100% - 100px);
				  text-align: left;
	}
	
	#overlay div img {margin: 0 15px}

	#overlay h1{color: white;
				padding: 10px;
				transition:0s;
				position:absolute;
				width: calc(100% - 20px);
	}
	
	#withCalls {
		position: absolute;
		right: 80px;
		top: 30px;
		z-index: 8;
		border-radius: 200px;
	}
	#withCalls:hover
	{
		filter: drop-shadow(0 0 20px #ffffff)
				drop-shadow(0 0 20px #ffffff);
	}
	
	
/* rightmost */
	#rightmost {float: right;
				width: 222px;
				margin-left: 30px;
				text-align: center;
	}
	.shots-link img {
		margin-bottom: -20px;
		margin-top: -10px;
		width: 211px;
		height: 386px;
		transform: none;
	}
	
	.shots-link.mac img{
		margin-bottom: -40px;
		margin-left: -32px;
		width: 286px;
		margin-top: -20px;
	}
	
/* ul list */

	ul {width: calc(100% - 222px - 30px - 20px);
		padding: 0 20px 0 0;
		column-count: 2;
		column-gap: 50px;
	}	

/* narrow view */
@media all and (max-width: 1300px)
{

	#overlay div {bottom: 3vw;
				  left: 3vw;
	}
	#overlay div img {margin: 0 1vw;
					max-height: 7vw}
	#withCalls {
		right: calc(50px + 2vw);
		top: 2vw;
	}
	#withCalls img
	{
		max-width: 15vw;
	}
	
	
	#menu2 h2 {margin-right: 1.5%}
	#menu2 a {margin: 0 1.2% 0 1.2%}
	
}
/* super narrow view */
@media all and (max-width: 1100px)
{
	#menu2 a {font-size: 15px}
	#menu2 h2 {font-size: 20px}

	#overlay img:last-child{left:auto; right: 70px;}
	#overlay h1 {margin-top: 6%}

	#menu2 nav {padding: 0 5px}
}

/* mobile view */
@media all and (max-width: 880px)
{
	#withCalls {right:10px}
	
	#menu2 a {font-size: 18px; margin: 0 30px 0 30px;}
	#menu2 h2 {font-size: 24px}

	#overlay img {display: none}
	#overlay span { display: none}
	#overlay{ position:inherit;
			  background:none;
			  text-shadow: none;
			  width: auto;
			  left:inherit;
			  display: block}

	#video {padding: 0}
	iframe{filter:none}
	#overlay h1{color: black; margin-top: 0; font-size: 18px; filter:none; font-weight: normal; position: inherit}
	
	#download a{width: 70%; margin: 15px 2px 2px 0}
	#download a:hover{margin: 17px 0 0 2px;}

	ul {column-count: 1; width: 100%}
	#rightmost {float:none; margin: auto; width: auto;}
	#rightmost a:first-child{display: block; width: 222px; margin: auto;}
}