/* ================> SOSOL.COM CSS <================ */
/*
	font-size: 120% = 1.2em  = 19px = 14pt
	font-size: 100% = 1em    = 16px = 12pt
	font-size:  95% = 0.95em = 15px = 11pt
	font-size:  80% = 0.8em  = 13px = 10pt
	font-size:  75% = 0.75em = 12px =  9pt
	font-size:  70% = 0.7em  = 11px =  8pt
*/
* {box-sizing:border-box;}
/*-----> Copyrigt text - (updates all pages) */
.copyright::after{content:" Copyright MMXIX, SoSol Consulting";}
body{
	/* BG choices: bg_HudsonYards.jpg, bg_Oculus.jpg, bg_Oculus2.jpg */
	/* BG colors:  #eee7e2 = LightCream, #9e968b = CreamChocolate (darker) */
	background:#9e968b url('pix/bg_HudsonYards.jpg') no-repeat fixed center top;
	background-size:cover;
	margin:0px;
	font:normal 100% Helsinki, Tahoma, Arial, Calibri, sans-serif;
	color:black;
}
body.contact{
	background:#19181e url('pix/bgManhattanSat.jpg') no-repeat fixed center top; /* BG-Color: Black */
	background-size:cover;
}
/*===============> STANDARD LAYOUT DESIGNS <===============*/
/*---------------> MAIN Body (Flexbox) <---------------*/
main{
	display:flex;
	flex-flow:row wrap; /*-direction -wrap*/
	justify-content:center; /*Horizontal*/
	align-items:flex-start; /*Vertical*/
	align-content:stretch; /*stretches flex items rows (default)*/
	max-width:90%;
	margin:8px auto 50px auto; /*T R B L*/
}
/* Special flexbox style (contact.htm) */
main.contact{
	max-width:32em;
	margin:8em auto 50px auto; /*T R B L*/
}
main > * {
	flex:100%; /*-grow -shrink -basis (initial width)*/
	margin-top:8px;
	padding:10px;
	background-color:rgba(255,255,255,1);
	border:1px #333 solid;
	border-radius:4px;
}
main.contact > * {padding:10px 10px 10px 30px;}
main > header{
	margin:0px;
	background-color:rgba(255,255,255,1);
}
main > footer{
	text-align:center;
	margin-bottom:60px;
}
/*-----> 2-column Sub-Flexbox */
 /* symmetric */
main .twocol{
	display:flex;
	flex-flow:row nowrap; /*-direction -wrap*/
}
.twocol > * {flex:50%;}
.twoleft{margin-right:10px;}
.tworight{
	padding-left:10px;
	border-left:1px rgba(128,128,128,1) solid;
}
 /* asymmetric (auto-resize) */
.twocol-asym{
	display:flex;
	flex-flow:row nowrap; /*-direction -wrap*/
}
.twoasym-left{
	padding:16px 0px;
}
.twoasym-left > * {
	margin-left:0px;
	margin-right:16px;
	padding:2px;
}
.twoasym-right{
	padding:0px 0px 0px 16px;
}
/*-----> 3-column Sub-Flexbox */
main .threcol{
	display:flex;
	flex-flow:row wrap; /*-direction -wrap*/
}
main .threcol > header{flex:100%;}
.threleft{
	padding-right:10px;
	flex:30%;
}
.thremid{
	flex:40%;
	padding-left:10px;
	padding-right:10px;
	border-left:1px rgba(128,128,128,1) solid;
	border-right:1px rgba(128,128,128,1) solid;
}
.threright{
	flex:30%;
	padding-left:10px;
}
/*-----> Accordion (collapsible content) */
/* Button style */
.accordion{
	width:100%;
	margin:0px;
	padding:16px;
	background-color:white;
	border:none;
	border-bottom:1px black solid;
	border-radius:0px 0px 6px 6px;
	font-size:1em;
	color:#0033cc; /* RoyalBlue */
	text-align:left;
	outline:none;
	transition:0.4s;
}
.accordion:after{
	content:'\002B';
	float:right;
	margin-left:8px;
	text-align:right;
	font-size:1.2em;
	font-weight:bold;
}
.selected{background-color:#ccc;}
.selected:after{
    content:"\2212";
	float:right;
	margin-left:8px;
	font-size:1.2em;
	font-weight:bold;
}
.accordion:hover{
	background-color:rgba(47,137,189,1); /* PowderBlue */
}
.panel{
	padding:0 18px;
	background-color:white;
	max-height:0;
	overflow:hidden;
	transition:max-height 0.2s ease-out;
}
/*-----------------> Footer (Flexbox) <-----------------*/
footer.static{
	display:flex;
	flex-flow:row wrap;
    position:fixed;
    left:0px;
    bottom:0px;
    width:100%;
    margin:0px;
    padding:0px;
    padding:10px 20px;
	background-color:rgba(51,51,51,0.85); /* DarkGray (#333333) */
	justify-content:space-between; /* H-alignment (w/ even spacing) */
	align-items:center; /* V-alignment */
	border:1px black solid;
	z-index:10;
}
footer.static > div{
	padding:4px 2px;
	font-size:0.8em;
	color: white;
}
footer.static > div.footer_left{width:226px;text-align:left;}
footer.static > div.footer_center{text-align:center;}
footer.static > div.footer_right{width:226px;text-align:right;}
.spread{flex-basis:100%;}	
/*-------------> Responsive layouts (Flexbox) <-------------*/
/* Tablet (portrait) */
/* iPad viewport = 768 x 922 */
@media only screen and (max-width:850px){
	main .threcol{flex-flow:wrap;}
	main .threcol > * {flex:100%;border:none;}
	main .thremid{
		border-top:1px rgba(128,128,128,1) solid;
		border-bottom:1px rgba(128,128,128,1) solid;
	}
}
@media only screen and (max-width:675px){
	footer.static > div.footer_left{width:100%;text-align:center;}
	footer.static > div.footer_center{width:100%;text-align:center;}
	footer.static > div.footer_right{width:100%;text-align:center;}
}
/* mobile phone (landscape) */
/* iPhoneX viewport = 375 x 630 */
@media only screen and (max-width:600px){
	main * {font-size:0.95em;}
	main .twocol > * {flex:100%;border:none;}
	main .twocol{flex-flow:wrap;}
	main .twoleft{margin:0px;}
	main .tworight{border-top:1px rgba(128,128,128,1) solid;}
}
/* mobile phone (portrait) */
/* iPhoneX viewport = 375 x 630 */
@media only screen and (max-width:444px){
	body{background:#9e968b url('pix/bg_HudsonYardsS.jpg') no-repeat fixed center top;}
	body.contact{background:#19181e url('pix/bgManhattanSat_S.jpg') no-repeat fixed center top;}
}
/*-----> Navigation Button for 'Return to top' (normaly hidden) */
#btnTop{
	display:none;
	position:fixed;
	bottom:80px;
	right:30px;
	border:1px rgba(128,128,128,1) solid;
	border-radius:4px;
	outline:none;
	background-color:rgba(208,208,208,0.5);
	color:rgba(0,0,0,0.75);
	cursor:pointer;
	padding:4px 16px;
	z-index:31;
	transition:0.5s;
}
#btnTop-text{font-size:2em;}
#btnTop:hover{
	background-color:rgba(255,51,0,0.75);
	color:rgba(0,0,0,0.9)
}
/*-------------> TOP NAVIGATION BAR Style <-------------*/
/* https://www.w3schools.com/howto/howto_js_topnav_responsive.asp */
.navbar{
    list-style-type:none;
    position:fixed;
    top:0px;
    left:0px;
    width:100%;
    margin:0px;
    padding:0px;
    overflow:hidden;
    background-color:#333; /* DarkGrey*/
    z-index:11;
}
.navbar .active{background-color:#8b0000!important;color:white;}
/* Hide the link that should show only on small screens [≡] */
.navbar .icon{display:none;}
.navbar a{
	display:block;
	float:left;
	background-color:#333;
	border:none;
	border-top:6px solid transparent;
	border-bottom:6px solid transparent;
	border-right:1px white solid;
	border-radius:0px!important;
	padding:4px 16px;
	font-size:0.8em;
	color:white!important;
	text-align:center;
	text-decoration:none;
}
/* Change color on hover */
.navbar a:hover{
	background-color:transparent;
	border:none;
	border-top:6px solid transparent;
	border-bottom:6px rgba(47,137,189,1) solid; /* PowderBlue */
	border-right:1px white solid;
	border-radius:0px!important;
	color:white!important;
	text-decoration:none;
/*	background-color:#2f89bd!important;
	color:black!important; Un-comment this to highlight the whole box, instead of underline */
}
/*-----> NAVIGATION BAR (Menu) responsive layout <-----*/
@media only screen and (max-width:600px){
	/* Return-to-top nav button */
	#btnTop{bottom:95px;right:20px;padding:2px 8px;font-size:0.9em;}
	#btnTop-text{font-size:1.4em;}
	/* Hide Navigation Bar on small screens (except icon) */
	.navbar a:not(:last-child){display:none;}
	.navbar a.icon{display:block;float:left;}
	/* The 'responsive' class is added to the 'navbar' with JavaScript, when the user clicks on the icon. */
	.navbar.responsive{
		/* position:relative; (Un-comment this to flaot the navbar) */
		background-color:rgba(51,51,51,0.65)!important;
		z-index:11;
	}
	.navbar .active{background-color:rgba(125,0,0,0.70)!important;color:white!important;}
	.navbar.responsive a{
		background-color:rgba(51,51,51,0.65);
		display:block;
		float:none;
		text-align:left;
	}
	.navbar.responsive a.icon{position:absolute;right:0px;top:0px;}
}
/* Default styles for printing */
@media print{
	@page{margin:0.5in 0.5in 0.3in 0.5in;}
	nav, footer.static{display:none;}
	picture{visibility:hidden;}
	body:after{
		display:block;
		float:right;
		color:gray;
		font-size:0.8em;
		content:"\24b8  Copyright 2019, SoSol Consulting";
	}
}