/* *** *** *** ***
	Custom Stylesheet
	Author: J.Marsh Studios LLC | jmarshstudios.com
*** *** *** *** */

/* Sanitize Box Model */
pre,textarea{overflow:auto}:root,[aria-disabled]{ cursor:default; }[hidden],audio:not([controls]),template{display:none}button{overflow:visible}details,main,summary{display:block}input[type=number]{width:auto}input[type=search]{-webkit-appearance:textfield}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}progress{display:inline-block}small{font-size:75%}textarea{resize:vertical}*,::after,::before{-webkit-box-sizing:inherit;box-sizing:inherit;border-style:solid;border-width:0}*{background-color:inherit;font-size:inherit;line-height:inherit;margin:0;padding:0}::after,::before{text-decoration:inherit;vertical-align:inherit}:root{-ms-overflow-style:-ms-autohiding-scrollbar;overflow-y:scroll;-webkit-text-size-adjust:100%;-webkit-box-sizing:border-box;box-sizing:border-box;font:1pc/1.5 sans-serif;text-rendering:optimizeLegibility}html{background-color:#FFF;color:#000}a{text-decoration:none}audio,canvas,iframe,img,svg,video{vertical-align:middle}button,input,select,textarea{background-color:transparent;color:inherit;font-family:inherit;font-style:inherit;font-weight:inherit}[type=number],[type=search],[type=submit],[type=tel],[type=text],[type=time],[type=url],[type=week],[type=button],[type=date],[type=datetime],[type=datetime-local],[type=email],[type=month],[type=password],[type=reset],button,select,textarea{min-height:1.5em}code,kbd,pre,samp{font-family:monospace,monospace}nav ol,nav ul{list-style:none}select{-moz-appearance:none;-webkit-appearance:none}select::-ms-expand{display:none}select::-ms-value{color:currentColor}table{border-collapse:collapse;border-spacing:0}::-moz-selection{background-color:#B3D4FC;text-shadow:none}::selection{background-color:#B3D4FC;text-shadow:none}[aria-busy=true]{cursor:progress}[aria-controls]{ cursor:pointer; }[hidden][aria-hidden=false]{clip:rect(0 0 0 0);display:inherit;position:absolute}[hidden][aria-hidden=false]:focus{clip:auto}

/* global styles */
* { transition:color 0,5=s,background-color 0.3s,border-color 0.3s,width 0.3s,height 0.3s,padding 0.3s,margin 0.3s,opacity 0.3s,position 1s; }
html, body { width:100%; height:100%; margin:0; padding:0; }
body { font-family:'Inter',sans-serif; }

body, p { font-size:16px; line-height:normal; }
@media (max-width: 768px) { p { font-size:calc(0vw + 16px); } }
@media (max-width: 640px) { p { font-size:16px; } }
@media (min-width: 769px) { p { font-size:calc(0.17361111vw + 14.66666667px); } }
@media (min-width: 1920px) { p { font-size:20px; } }

h1,h2,h3,h4,h5,h6 { font-family:'Zilla Slab',serif; }

h1 { font-size: 36px; lin-height:31px; }
	@media (max-width: 768px) { h1 { font-size: calc(0vw + 36px); line-height:calc(0vw + 36px); } }
	@media (min-width: 768px) { h1 { font-size: calc(3.125vw + 12px); line-height:calc(3.125vw + 12px); } }
	@media (min-width: 1920px){ h1 { font-size: 72px; } line-height:72px; }
h2 { font-size: 30px; line-height:30px; }
	@media (max-width: 768px) { h2 { font-size: calc(0vw + 30px); line-height:calc(0vw + 30px); } }
	@media (min-width: 768px) { h2 { font-size: calc(2.60416667vw + 10px); line-height:calc(2.60416667vw + 10px); } }
	@media (min-width: 1920px){ h2 { font-size: 60px; line-height:60px; } }
h3 { font-size: 24px; line-height:24px; }
	@media (max-width: 768px) { h3 { font-size: calc(0vw + 24px); line-height:calc(0vw + 24px); } }
	@media (min-width: 768px) { h3 { font-size: calc(2.08333333vw + 8px); line-height:calc(2.08333333vw + 8px); } }
	@media (min-width: 1920px){ h3 { font-size: 48px; line-height:48px; } }
h4 { font-size: 18px; line-height: 18px;}
	@media (max-width: 768px) { h4 { font-size: calc(0vw + 18px); line-height:calc(0vw + 18px); } }
	@media (min-width: 768px) { h4 { font-size: calc(1.5625vw + 6px); line-height:calc(1.5625vw + 6px); } }
	@media (min-width: 1920px){ h4 { font-size: 36px; line-height:36px; } }
h5 { font-size: 14px; line-height:14px; }
	@media (max-width: 768px) { h5 { font-size: calc(0vw + 14px); line-height:calc(0vw + 14px); } }
	@media (min-width: 768px) { h5 { font-size: calc(0.86805556vw + 7.33333333px); line-height:calc(0.86805556vw + 7.33333333px); } }
	@media (min-width: 1920px) { h5 { font-size: 24px; line-height:24px; } }
h6 { font-size: 10px; line-height:10px; }
	@media (max-width: 768px) { h6 { font-size: calc(0vw + 10px); } line-height:calc(0vw + 10px); } }
	@media (min-width: 768px) { h6 { font-size: calc(0.69444444vw + 4.66666667px); line-height:calc(0.69444444vw + 4.66666667px); } }
	@media (min-width: 1920px) { h6 { font-size: 18px; line-height:18px; } }
select:focus, textarea:focus, input:focus, button:focus, a:focus { outline:none; }

a { color:#333; white-space:nowrap; }
a:hover { opacity:0.7; }

/* targeted styles */
.container { padding:30px 50px; margin:auto; max-width:1366px; }
	@media (max-width:742px) { .container { padding:25px; } }
	header { border-bottom:1px solid #dedede; padding:25px; display:flex; }
		header > #brand, header > .socialrow { flex:1 0 50%; }
		header > #brand > #moz-logo { display:inline-block; min-width:95px; max-width:180px; width:8vw; }
			header > #brand > #moz-logo > img { width:100%; height:auto; }
	header > .socialrow { text-align:right;}
		header > .socialrow > a { padding:0; margin:0; margin-left:10px; }
		header > .socialrow > .icon { display:inline-block; background-repeat:no-repeat; background-size:contain; min-width:24px; min-height:24px; max-width:32px; max-height:32px; width:3vw; height:3vw; }
		header > .socialrow > .ig { background-image:URL('images/instagram.svg'); }
		header > .socialrow > .tw { background-image:URL('images/twitter.svg'); }
	#footer { border-top:1px solid #dedede; padding:50px; text-align:center; }
	#footer a { text-decoration:underline; }

#lifeboat, #sorted { display:flex; flex-direction:row; flex-wrap:wrap; justify-content:space-between; align-content:space-between; align-items:flex-start; margin-top:40px; }
#lifeboat .cola, #lifeboat .colb { display:flex; flex-wrap:wrap; flex-direction:column; flex:1 1 48%; flex-grow:0 !important; }
	@media (max-width:742px) { #lifeboat .cola, #lifeboat .colb { flex:0 0 100%; } }
#lifeboat .person, #sorted .person { position:relative; margin-top:2vw; padding:20px; flex:0 0 100%; border-radius:10px; border:1px solid #dedede; display:flex; flex-direction:column; }
	#lifeboat .person > p, #sorted .person > p { margin-bottom:5px; }
	#lifeboat .person .n, #sorted .person .n { margin-bottom:10px; }
	#lifeboat .person .t, #sorted .person .t {  }
	#lifeboat .person .d, #sorted .person .d {  }
	#lifeboat .person .l, #sorted .person .l { margin-bottom:20px; }
	#lifeboat .person .li, #sorted .person .li { margin-bottom:10px; padding-left:40px;; background-image:url('images/linkedin.svg'); background-repeat:no-repeat; background-position:left top; }
	#lifeboat .person .tw, #sorted .person .tw { margin-bottom:10px; padding-left:40px;; background-image:url('images/twitter.svg'); background-repeat:no-repeat; background-position:left top; }
	#lifeboat .person .url, #sorted .person .url { margin-bottom:10px; padding-left:40px;; background-image:url('images/url.svg'); background-repeat:no-repeat; background-position:left top; }
	.extlink { position:absolute; display:inline-block; width:16px; height:16px; background-image:url('images/newwin.svg'); background-repeat:no-repeat; background-position:left top; right:20px; background-size:contain; }
	#lifeboat .person .a, #sorted .person .a { padding-left:40px; background-image:url('favicon.ico'); background-repeat:no-repeat; background-position:left top; background-size:24px auto; }
#sortable { margin-top:30px; display:flex; flex-wrap:wrap; }
	#sortable > div { flex:1; }
	#sortable h5 { margin-bottom:10px; }
	#sortable a.button:link, a.button:active, a.button:visited,
	#sortable select { border-radius:10px; border:1px solid #dedede; padding:10px 20px; margin-right:15px; color:#333; display:inline-block; width:10vw; min-width:175px; max-width:350px; }
	#sortable select:hover { cursor:pointer; }
	#sortable a.button:hover,
	#sortable select:hover { border-color:#00458b; color:#00458b; background-color:rgba(0,255,255,0.2); }
	#sortable a.button.active,
	#sortable select.active { background-color:rgba(84,255,189,0.6); border-color:#005e5e; color:#005e5e; }
		#sortable a.button .check { background-color:transparent; display:none; color:#005e5e; }
		#sortable a.button.active .check { display:inline-block; }
