@charset "utf-8";
/* flatpax.css - styles for flatpaxology.com
   Begun 10/11/2020     */

@font-face {
    font-family: 'League Spartan Bold';
    src: url('fonts/LeagueSpartan-Bold.woff') format('woff');
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

.central {
    text-align: center;
}

.contained {
    margin-bottom: 0;
}

/* sections and divisions */
div#page {
    font-family: 'Libre Baskerville', serif;
    font-size: 16px;
}

div.hero {
    margin-bottom: -0.25em;
    position: relative;
    top: -1.5em;
}

div.sentinel {
    margin-bottom: 0.5em;
}

div.sentinel h2 {
    padding: 0.5em 0;
    line-height: 125%;
}

div.standout, section.cta {
    padding: 1em;
    border: 1px solid #9204b3;
}

div.standout {
    margin-top: 1.25em;
}

section.cta {
    margin-top: 3.75em;
}

div.pictorial {
    display: flex;
}

div.secondary, div.special {
    display: none;
}

div.unit, section.unit {
    margin-bottom: 1.25em;
}

div#hero-text {
    padding: 1.5em 2em 1.25em;
}

footer {
    padding: 1.2em 0;
}

footer p {
    text-align: center;
}

header {
    padding-top: 0.25em;
}

main {
    padding: 1.25em 5vw 2.5em;
}

header h2 {
    line-height: 125%;
    padding-left: 5vw;
    padding-right: 7vw;
    padding-bottom: 0.75em;
}

section.additional {
    max-width: 615px;
    margin-top: 1.25em;
}

section.expo, section.lead-in {
    padding: 1.25em 5vw;
}

section.expo {
    margin-bottom: 1.25em;
}

section.extra {
    display: none;
}

section.options {
    margin-top: 1.25em;
}

section.lead-in p {
    line-height: 150%;
}

section.legal ol {
    padding-left: 5vw;
}

section.refs {
    padding: 1.25em 2.5vw;
}

/* navigation */
nav ul {
    list-style: none;
    display: flex;
    justify-content: space-around;
}

nav ul li {
    display: inline-block;
    font-weight: bold;
    margin-top: 1em;
    margin-bottom: 0.75em;
}

nav ul li a {
    display: block;
    width: 100%;
    padding: 0.25em 2vw 0.5em;
}

nav ul li a:hover	{
	text-decoration: none;
}

li.here {
    padding: 0.25em 2vw 0.5em;
}

/* media */
figure.entire, figure.partial {
    max-width: 615px;
}

figure.entire {
    margin: 0 auto;
}

figure.partial, img.icon {
    display: none;
}

figcaption {
    font-style: italic;
}

img {
	max-width: 100%;
	height: auto;
}

img.filler, img.lpic {
    display: none;
}

img.inset {
    float: left;
}

/* forms */
button {
    font-size: 1em;
    padding: 0.5em 1em;
    margin: 1em 0;
}

div.row {
    margin-top: 1.25em;
}

form {
    margin-bottom: 1.25em;
}

input, label {
    display: block;
}

input {
    width: 100%;
    height: 2.5em;
    padding-left: 1em;
}

input, textarea {
	font-family: 'Courier New', monospace ;
    font-size: 1.125em;
}

textarea {
    width: 100%;
    height: 7.5em;
    padding: 0.6125em 1em;
    resize: vertical;
}

/* tables */
table {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    margin-bottom: 1.25em;
}

td, th { 
    width: 50%;
    padding: 0.5em; 
    border: 1px solid #9204b3; 
    text-align: left; 
}

th { 
    font-weight: bold;
}

tr:nth-of-type(even) { 
  background: #eef; 
}

/* elements */
a:link, a:visited	{
	text-decoration: none;
}

a:hover	{
	text-decoration: underline;
}

a.button:hover {
    text-decoration: none;
}

h1, h2, h3, h4 {
    font-family: 'League Spartan Bold', sans-serif;
}

h1 {
    font-size: 2em;
    line-height: 125%;
}

h1.hero {
    text-transform: uppercase;
    font-size: 2.5em;
    text-align: center;
    position: relative;
    z-index: 10;
}

h1.page-head {
    text-transform: uppercase;
}

h2 {
    font-size: 1.5em;
    line-height: 175%;
}

h3 {
    font-size: 1.25em;
    line-height: 100%;
    padding-top: 0.5em;
}

h3::before {
    content: url(media/psquare.png) "\00a0";
}

h3.spartan::before {
    content: "";
}

h4 {
    font-size: 1em;
    line-height: 125%;
}

hr.hard {
    border: 2px solid #b38104;
}

hr.soft {
    border: 1px dashed #d177e6;
}

li, p {
    line-height: 150%;
    margin-bottom: 1.5em;
}

p.button-holder {
    line-height: 625%;
}

p.hyper, p.super {
    line-height: 175%;
}

p.logos img {
    display: block;
    margin: 0 auto;
}

p.secondary {
    display: none;
}

span.prompt {
    cursor: pointer;
}

 span.spacer {
    display: none;
}

span.to-show {
    display: none;
}

ul.assertive {
  list-style: none;
}

ul.assertive li::before {
  content: "\2022";  /* CSS Code/Unicode for a bullet */
  color: #b38104;
  font-weight: bold;
  display: inline-block;
  width: 1em;
}

ul#offer {
    list-style: none;
}


/* colours */
/* Possible palette:
    #9204b3 (a purple)
    #d177e6 (a lighter purple)
    #3a13a5 (a navy blue - the key colour)
    #f5f20c (a contrasting bright yellow)
    #b38104 (a mellow brown)
*/

/* Possible alternatives to white,
    as a background colour:
    #eef (a blue-white)
    #fef (a purple-white)
    #ccd4e8 (a related grey)
    #d4cce8 (a slightly darker grey)
    #e0f1ff (a bluer blue white)
*/

a:link	{
	color: #5555ff;
}

a:visited	{
	color: #a841ff;
}

a:hover	{
	color: #5555ff;
}

a:active {
    color: red;
}

a.button {
    background: #f5f20c;
    border-radius: 1000px;
    box-shadow: 4px 8px rgba(0, 0, 0, 0.25);
    padding: 0.75em 2em;
    color: #3a13a5;
    display: inline-block;
    font: normal bold 2em/1 "Calibri", sans-serif;
    text-align: center;
    transition: all 0.5s;
}

a.button:hover {
    background-color: #3a13a5;
    color: #f5f20c;
}

a.button:active { 
    transform: scale(0.98); 
    box-shadow: 2px 4px rgba(0, 0, 0, 0.25); 
} 

nav ul li a:link, nav ul li a:visited {
    background-color: inherit;
    color: white;
}

nav ul li a:hover {
    background-color: dimgrey;
    color: white;
}

body {
    background: url(media/ikea-furniture-1.jpg) left top/100% auto no-repeat #3a13a5;
    background-blend-mode: multiply;
}

div#hero-image {
    background-color: black;
}

div#hero-text {
    background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 50%, rgba(192,192,192,1) 100%);
    color: #f5f20c;
}

div#page {
    background-color: #fef;
    color: #333;
}

figure {
    padding: 0.6125em;
    background-color: white;
}

footer {
    background-color: #b38104;
    color: white;
}

header {
    background-color: #f5f20c;
}

h1.hero, h1.page-head, span.ab {
    background-color: inherit;
    color: #9204b3;
}

nav {
    background-color: black;
}

nav ul li.here {
    color: darkgrey;
}

div.standout, section.cta, table {
    background-color: white;
}

section.legal {
    background-color: #e884ff;
}

section.refs, section.unit, form {
    background-color: #e0f1ff;
}

span.prompt {
    background-color: inherit;
    color: red;
}

th { 
    background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 50%, rgba(192,192,192,1) 100%);
    color: #f5f20c; 
}

/* display adjustments */
/* widths variable by design */
@media screen and (min-width: 466px) {
  span.spacer {
    display: inline;
  }
  section.unit {
    display: flex;
  }
}

@media screen and (min-width: 480px) {
  .mobile {
    display: none;
  }
  div.sentinel {
    margin-left: 1em;
  }
  h1.hero {
    text-align: left;
    padding-left: 0.75em;
  }
  p.logos img {
    display: inline-block;
    vertical-align: middle;
  }
}

@media screen and (min-width: 600px) {
  div.note {
    display: flex;
  }
  div.note p {
    width: 40%;
  }
  div.note p:first-of-type {
    padding-right: 10%;
    width: 60%;
  }
  div.hero {
    margin-bottom: -0.5em;
    top: -1.75em;
  }
  h1.hero {
    font-size: 3em;
    padding-left: 0.667em;
  }
}

@media screen and (min-width: 700px) {
  section.initial {
    width: 45%;
    padding-right: 5%;
    float: left;
  }
  section.unit {
    clear: both;
  }
  img.filler {
    display: inline;
    padding: 0.75em 2em 0.75em 1em;
    shape-outside: circle(50%);
  }
  hr.restful {
    clear: left;
  }
  p.secondary {
    display: block;
  }
}

@media screen and (min-width: 760px) {
  .restful {
    display: none;
  }
  div.cabinet {
    display: flex;
    position: relative;
  }
  div.alpha, div.beta {
    width: 50%;
  }
  div.major {
    width: 60%;
  }
  div.minor {
    width: 40%;
  }
  div.alpha h3.senior {
    padding-top: 1.3em;
  }
  div.alpha img.filler {
    padding-top: 1.75em;
  }
  div.alpha p, div.alpha ul {
    padding-right: 5%;
  }
  div.follower {
    margin-top: 2.5em;
  }
  div.follow-on {
    border-top: 1px solid #3a13a5;
  }
  div.follow-on p:first-of-type {
    padding-top: 0.6em;
  }
  div.illustrative {
    display: none;
  }
  div.invitation {
    align-self: center;
  }
  div.lead-in section {
    padding-right: 5%;
    text-align: right;
  }
  div.secondary, div.special {
    display: block;
  }
  div.services {
    margin-top: 1.25em;
    display: flex;
  }
  div.service1 {
    max-width: 40%;
    align-self: center;
  }
  div.tabular {
    margin-top: 0.5em;
    max-width: 615px;
  }
  div.sub {
    padding-right: 5%;
  }
  div.triplet, section.triplet {
    width: 30%;
    margin-right: 5%;
  }
  div.final, div.special, section.final {
    margin-right: 0;
  }
  figure.entire {
    display: none;
  }
  figure.partial {
    display: block;
  }
  figure#cb-pic {
    margin-bottom: 0.75em;
  }
  img.spic {
    display: none;
  }
  img.lpic {
    display: block;
  }
  p.hyper {
    line-height: 150%;
  }
  p.secondary {
    display: none;
  }
  section.options {
    display: none;
  }
  section.unit {
    display: block;
  }
  section.unit img.medium {
    display: none;
  }
  section.unit img.icon {
    display: inline;
    float: left;
  }
}

@media screen and (min-width: 872px) {
  header {
    display: flex;
  }
  header h2 {
    padding: 0 1vw 0 0;
    margin: auto;
  }
  nav ul {
    padding-left: 50%;
  }
}

@media screen and (min-width: 1024px) {
  main {
    padding: 1.25em 3vw 2.5em;
  }
  div.hero {
    margin-bottom: -1em;
    top: -2.25em;
    display: flex;
  }
  div#hero-image {
    flex: 3;
  }
  div#hero-text {
    padding-top: 1.5em;
    flex: 1;
  }
  h1.hero {
    font-size: 4em;
    padding-top: 0.25em;
    padding-left: 0.5em;
  }
}

@media screen and (min-width: 1120px) {
  div#hero-image {
    flex: 4;
  }
  div.follower {
    margin-top: 1.25em;
  }
  div.services {
    display: none;
  }
  div.service1 {
    align-self: flex-start;
  }
  div.service1 section:first-of-type {
    margin-bottom: 1.25em;
  }
  div.service1 section.extra {
    display: block;
    margin-bottom: 2.5em;
  }
}

@media screen and (min-width: 1168px) {
  div.follower {
    margin-top: 2.5em;
  }
}

@media screen and (min-width: 1220px) {
  div.service1 section:first-of-type {
    margin-bottom: 2.5em;
  }
  div.service1 section.extra {
    display: block;
    margin-bottom: 3.75em;
  }
}

@media screen and (min-width: 1280px) {
  div.hero {
    margin-bottom: -1.5em;
    top: -3em;
  }
  div.note p:first-of-type {
    width: 50%;
  }
  div#hero-text {
    padding-top: 2.5em;
  }
  div#hero-text h3 {
    padding-bottom: 0.5em;
  }
  div#hero-text p, ul#offer li {
    font-size: 1.125em;
  }
  h1.hero {
    font-size: 5em;
    padding-left: 0.333em;
  }
  div.service1 {
    max-width: 100%;
    position: absolute;
    left: 50%;
  }
  div.service1 section {
    background-color: white;
    min-height: 150px;
    margin-top: 1.25em;
    padding: 1em 5%;
    border: 1px dotted #333;
    border-radius: 40px;
  }
  div.service1 section:first-of-type, div.service1 section.extra {
    margin-bottom: 0;
  }
  p.concluding {
    margin-bottom: 0;
  }
}

@media screen and (min-width: 1360px) {
  div.hero {
    margin-bottom: -2em;
    top: -4em;
  }
  div#hero-text {
    padding-top: 3.5em;
  }
  h1.hero {
    font-size: 6em;
    padding-top: 0.125em;
    padding-left: 0.25em;
  }
}

@media screen and (min-width: 1400px) {
  div.service1 section:first-of-type, div.service1 section.extra {
    margin-top: 2.5em;
  }
}

@media screen and (min-width: 1440px) {
  div#page {
	max-width: 1440px;
	margin: 0 auto;
  }
  main {
    padding: 1.25em 2vw 2.5em;
  }
  div#hero-text {
    padding: 3em 2em 0;
  }
  div#hero-text h3 {
    font-size: 1.5em;
    line-height: 125%;
    padding-bottom: 0.5em;
  }
  ul#offer li {
    font-size: 1.25em;
    line-height: 150%;
  }
}

/* EOF */