* { box-sizing: border-box; /* set box size to include padding and border across elements */ }
html{ scrollbar-width:none; }
html::-webkit-scrollbar { display:none; }
body { font-family:Jura; } /* set font to Jura across body by default */ 
body { margin:0px; }
div > img { display:block; }
a > img {display:block; }
body { -webkit-text-size-adjust: 100%; } 

/*-------------------------------- Start of section to build header ----------------------------------------------------*/
a:link, a:visited {
	text-decoration:none; /* ensure links are not underlined or formatted in any way */
}

header {
/*	position:fixed; top:0; left:0; *//* lock header at top of screen */

	display:flex; flex-flow:row nowrap; align-items:center; justify-content:center; /* make it flex container to make it responsive */

	width:100%; /* make sure it runs full length of screen */

	background:#F7F7F7;

	z-index:10; /* makes sure transformed floating elements do not go over header */

/*	border: 1px solid red; */
}
	
.brand {
	width:50%; min-width:200px; padding:5px; 

	background:#F7F7F7;

/*	font-weight:600;

	border: 1px solid pink; */
}
nav {
	display:flex; flex-flow:row wrap; align-items:center; justify-content:center; 

	width:50%; padding:5px;

	background:#7F7F7F;
	
/*	border: 1px solid green; */	
}

header  a{
	margin:5px;/*  make all links inside header to have equal margins */
}
.brand > a {
	display:block;

	padding:5px; border-radius:3px;

	background:#FDFDFD;

/*	text-transform:uppercase; */ text-align:center; color:#5F5F5F;
}
nav a {
	flex:1;

	min-width:90px; padding:5px; border-radius:3px;

	background:#878787;

	text-align:center; color:#FFFFFF;
}

.brand a:hover {
	background:#DFDFDF;
}
nav a:hover {
	background:#6F6F6F;
}
.inview{
	background:#FFFFFF; color:#3F3F3F;
}

/*------------------ Start of section to set up drop down unit in nav bar ------------------------------*/
.dropnav{
	position: relative; /* makes drop down element appear aligned to this element  as opposed to the beginning of next line */
}
.drops{ 
	display:block; /* makes span element take a fixed width instead of fitting it narrow content '...' */
}
.droplist{
	display:none; /* hides dropdown by default */
	position: absolute; left:0; z-index:5;  /* makes drop down appear directly below trigger as opposed to start below beginning of nav bar */
	color:#000000; background:#5F5F5F; 
}
.dropnav:hover {
	background:#5F5F5F; /* sets background color (match with dropdown) upon hover over trigger - includes margin around button */
	cursor: pointer; /* since dropdown is triggered as soon as margin is breached, for consistency, change cursor to pointer too */
	
}
.dropnav:hover > .droplist{
	display:block; /* makes drop down elements appear when mouse hovers over trigger */
} 
/*------------------ End of section to set up drop down unit in nav bar ------------------------------*/
/*------------------------------------------- Start of section to change brand based on screen size -------------*/

@media screen {
        #BrandShort { display: none; }
        #BrandLong { display: display; }
}
@media screen and (max-aspect-ratio: 1/1), screen and (max-width: 576px) {
        #BrandShort { display:block; }
        #BrandLong { display: none; }
}

/*--------------------------------------------- End of section to change brand based on screen size -------------*/


/*---------------------------------- End of section to build header ----------------------------------------------------*/
/*-------------------------------- Start of section to build main screen frame ----------------------------------------------------*/
.baseframe0 {

	display:flex; flex-flow:row wrap; justify-content:center; align-items:center;

	width:100%; 

	background:#000000; /* #DFDFDF;*/ 

/* 	border: 1px solid red; */
}
.baseframe1 {

	display:flex; flex-flow:row wrap; justify-content:center; align-items:stretch;

	width:100%; 

	background:#000000; /* #DFDFDF;*/ 

/* 	border: 1px solid red; */
}
.baseframe2 {

	display:flex; flex-flow:row wrap; justify-content:flex-start; align-items:flex-start; align-content:flex-start;

	width:100%; 

	background:#3F3F3F; color: #FFF;

/* 	border: 1px solid red; */
}

.baseframe3 {
	display:flex; flex-flow:row wrap; justify-content:center; align-items:center;

	width:100%; 

	background:#3F3F3F; color: #FFF;
}

.bsfrmA_Hmin {
	min-height: calc( 100vh - 48px );
}

.frm0link {

	width:50%; margin: auto; 
}

.frm0link > img {

	display:block;
	max-width:700px; width:100%; border: 5vmin solid white; margin:auto;  /* max-width to account for the limited size of a_.jpg */
}
.frm0link > video {

	display:block;
	max-width:700px; width:100%; border: 5vmin solid white; margin:auto;  /* max-width to account for the limited size of a_.jpg */
}
.frm1link {

	width:50%; margin: auto; 
}

.frm1link > img {

	display:block;
	max-width:700px; width:75%; border: 5vmin solid white; margin:auto;  /* width set to 75% for concept sketch full page scans */ 
}	

/*-------------- Start of section to change baseframeA link (4/3 image) width based on screen size -------------*/

@media screen {
        .frm0link { width:50%; }
}
@media screen and (max-aspect-ratio: 3/2) {
        .frm0link { width:60%; }
}
@media screen and (max-aspect-ratio: 5/4) {
        .frm0link { width:70%; }
}
@media screen and (max-aspect-ratio: 1/1) {
        .frm0link { width:80%; }
}
/*----------------- End of section to change baseframeA link (4/3 image) width based on screen size -------------*/


/*---------------------------------- Start of section to change font size in  main screen frame -----------------------------------*/
@media screen {
	.fntsz { font-size: 16px; }
}
@media screen and (max-width: 1200px) {
	.fntsz { font-size: 15px; }
}
@media screen and (max-width: 992px) {
	.fntsz { font-size: 14px; }
}
@media screen and (max-width: 768px) {
	.fntsz { font-size: 13px; }
}
@media screen and (max-width: 576px) {
	.fntsz { font-size: 12px; }
}
/*------------------------------------ End of section to change font size in  main screen frame -----------------------------------*/

/*---------------------------------- End of section to build main screen frame ----------------------------------------------------*/
/*--------------------------- Start of section to build main screen horizontal wrap split frame -----------------------------------*/
.frmVHlf{
	width:50%;
/*	text-align:center; */
}
.frmblk{ 
	background:#000000;
	color:#FFFFFF;
}
.frmwht{
	background:#FFFFFF;
	color:#000000;
}
.frmgry0{
	background:#888;
	color:#FFF;
}
.frmgry1{
	background:#111;
	color:#FFF;
}
.frmgry2{
	background:#EEE;
	color:#000;
}
@media screen and (orientation: portrait) {
	.frmVHlf { width:100%;}
} 
/*----------------------------- End of section to build main screen horizontal wrap split frame -----------------------------------*/

.frame10{
	margin:10% 10%;
	width:80%;
/*	border:1px solid blue; */
}
.frame2{
	margin: 2% 2%;
	width:96%;
}
.frame2x{
	margin: 2% 2%;
	width:96%;
	display:flex; justify-content:center;
}
.HframeImgA {
	width:67%;
	border:2vmin solid white; 
	background:white;
	margin: auto;
}
.HframeImgB {
	width:75%;
	border:2vmin solid white; 
	background:white;
	margin: auto;
}
.HframeImgC {
	width:100%;
	border:2vmin solid white; 
	background:white;
	margin: auto;
}
.imgWd1 {	max-width: 400px; 	}
.imgWd2 {	max-width: 600px;	}
.imgWd3 {	max-width: 700px;	}
.imgWd4 {	max-width: 800px;	}
.imgWd5 {	max-width: 1000px;	}

.mybutton {
	display:inline-block;	

	min-width:100px; padding:5px; border-radius:3px;

	background:#878787;

	text-align:center; color:#FFFFFF;
}
.mybutton:hover {
	background:#6F6F6F;
}