/*
FLEXI
subtext.studio
*/

/*/////////////////////////////////////////////////MAIN/*/

*, *:after, *:before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;

-webkit-text-size-adjust: 100%; /*https://blog.55minutes.com/2012/04/iphone-text-resizing/*/
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}

html,
body {
font-family: 'font1', Times, serif;
}

body,section,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,p,blockquote,table,thead,tbody,tr,th,td,span,b,a,select,iframe,img,figure,label,button,input, textarea,small {
margin: 0;
padding: 0;
}
.bl-sm {
font-size: 0.7500em;
line-height: 2.0000em;
}
.bl-sm-pad-h-l {
padding-left: calc(0.5*2.0000em);
}
.bl-sm-pad-h {
padding: calc(0.5*2.0000em);
}
.bl-sm-pad-h-sid {
padding-left: calc(0.5*2.0000em);
padding-right: calc(0.5*2.0000em);
}
.bl-sm-mar-h {
margin: calc(0.5*2.0000em);
}
.bl-sm-mar-h-v {
margin-top: calc(0.5*2.0000em);
margin-bottom: calc(0.5*2.0000em);
}
.bl-sm-mar-1 {
margin: 2.0000em;
}
body,section,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,p,blockquote,table,thead,tbody,tr,th,td,span,b,a,select,iframe,img,figure,label,button,input, textarea,small {
font-size: 1.0000em;
line-height: 1.5000em;
}
.bl-pad-h {
padding: calc(0.5*1.5000em);
}
.bl-pad-1 {
padding: 1.5000em;
}
.bl-pad-1-t {
padding-top: 1.5000em;
}
.bl-pad-5-t {
padding-top: calc(5*1.5000em);
}
.bl-pad-2 {
padding: calc(2*1.5000em);
}
.bl-pad-2-s {
padding-left: calc(2*1.5000em);
padding-right: calc(2*1.5000em);
}
.bl-mar-h-b {
margin-bottom: 1.5000em;
}
.bl-mar-1 {
margin: 1.5000em;
}
.bl-mar-1-s {
margin-left: 1.5000em;
margin-right: 1.5000em;
}
.bl-mar-5-b {
margin-bottom: calc(5*1.5000em);
}
.bl-body {
padding: calc(5*1.5000em) 0 calc(3*1.5000em) 0;
}
h1 {
font-size: 3.0000em;
line-height: 1.0000em;
}
.bl-pad-1-h1 {
padding: calc(1*1.0000em);
}
h2 {
font-size: 1.5000em;
line-height: 1.0000em;
}
.bl-mar-1-h2-bot {
padding-bottom: calc(1*1.0000em);
}
.bl-mar-1-h2-v {
margin-top: 1.0000em;
margin-bottom: 1.0000em;
}
.bl {
background: linear-gradient(lightgrey, transparent 1px);
background-size: auto 1.5em;
background-attachment: local;
}

a,
a:focus,
a:hover {
text-decoration: none;
color: black;
display: inline-block;
}

ul {
list-style-type: none;
}

::selection {
background: transparent;
color: gold;
}
::-moz-selection {
background: transparent;
color: gold;
}

input {
align-self: center;
vertical-align: middle;
}
input[type="text"],
input[type="email"] {
background-color: white;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
box-shadow: none;
border: none;
outline: 1px solid rgba(0,0,0,0.1);
outline-offset: -1px;
}
input::-webkit-input-placeholder { color: rgba(0,0,0,0.1); }
input::-moz-placeholder { color: rgba(0,0,0,0.1); }
input:-ms-input-placeholder { color: rgba(0,0,0,0.1); }
input:-moz-placeholder { color: rgba(0,0,0,0.1); }
input[type="file"] {
display: none;
}
input[type="file"] + label {
margin: auto;
display: block;
outline: 1px solid rgba(0,0,0,0.1);
outline-offset: -1px;
color: rgba(0,0,0,0.1);
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
input[type="radio"],
input[type="checkbox"] {
width: 1em;
height: 1em;
margin-right: .6em;
margin-left: .3em;
}

textarea {
background-color: white;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
box-shadow: none;
display: block;
border: none;
outline: 1px solid rgba(0,0,0,0.1);
outline-offset: -1px;
resize: none;
}
textarea::-webkit-input-placeholder { color: rgba(0,0,0,0.1); }
textarea::-moz-placeholder { color: rgba(0,0,0,0.1); }
textarea:-ms-input-placeholder { color: rgba(0,0,0,0.1); }
textarea:-moz-placeholder { color: rgba(0,0,0,0.1); }

select {
background-color: transparent;
background-image: none;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
box-shadow: none;
border: none;
outline: 1px solid rgba(0,0,0,0.1);
outline-offset: -1px;
cursor: pointer;
}

button {
background-color: white;
color: black;
text-decoration: none;
border: none;
outline: 1px solid rgba(0,0,0,0.1);
outline-offset: -1px;
cursor: pointer;
}
button:hover {
background-color: black;
color: white;
}

small {
vertical-align: text-top;
font-size: .6em;
}

/*/////////////////////////////////////////////////PAGES/*/

.editor h1 {
margin-bottom: 1.0000em;
}
.editor h4,
.editor p,
.editor li {
margin-bottom: 1.5000em;
}
.editor h1 {
font-weight: normal;
font-size: 3.0000em;
line-height: 1.0000em;
text-align: center;
overflow: visible;
}
.editor h2 {
font-weight: normal;
}
.editor h3 { font-weight: bold; }
.editor h4 { font-weight: normal; }
.editor strong { font-weight: bold; }
.editor em { font-style: italic; }
.editor ul { list-style-type: disc; }
/* .editor .bullet:before {
content: '\f105';
font-family: 'FontAwesome';
float: left;
margin-left: -1.5em;
color: #000000;
} */

.txt-shad { text-shadow: -.3em .3em rgba(0,0,0,.1); }
.txt-center { text-align: center; }

.row {
width: 100%;
display: flex;
flex-direction: row;
flex-wrap: wrap;
/* http://stackoverflow.com/a/33644245/7662622 */
align-items: stretch;
align-content: stretch;
}
.row-reverse {
flex-direction: row-reverse;
}
.row-center {
justify-content: center;
}
.row-left {
justify-content: flex-start;
}
.col {
overflow: hidden;
}
.col-100 {
flex-basis: 100%;
}
.col-70 {
flex-basis: 70%;
}
.col-60 {
flex-basis: 60%;
}
.col-40 {
flex-basis: 40%;
}
.col-30 {
flex-basis: 30%;
}
@media screen and (max-width: 720px) {
	.col {
	flex-basis: 100% !important;
	}
}

.w-30 { width: 30%; }
.w-40 { width: 40%; }
.w-50 { width: 50%; }
.w-60 { width: 60%; }
.w-70 { width: 70%; }
@media screen and (max-width: 48rem) {
	.w-0 { width: 100%; }
}

.bg {
position: relative;
overflow: hidden;
}
.bg-floating {
max-width: 1200px;
margin: 0 auto;
}
.bg-cover {
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.bg-dark {
color: white;
background-color: rgba(0,0,0,.7);
}
.bg-light {
color: black;
background-color: rgba(255,255,255,.7);
}
.bg-lt { background-position: left top; }
.bg-ct { background-position: center top; }
.bg-rt { background-position: right top; }
.bg-lc { background-position: left center; }
.bg-cc { background-position: center center; }
.bg-rc { background-position: right center; }
.bg-lb { background-position: left bottom; }
.bg-cb { background-position: center bottom; }
.bg-rb { background-position: right bottom; }

.link p {
display: inline-block;
color: YellowGreen;
outline-color: YellowGreen;
outline: 2px solid;
background-color: white;
font-weight: bold;
outline-offset: -1px;
}
.link p:hover {
background-color: YellowGreen;
outline-offset: .2em;
color: white;
}

.sticker {
max-width: 100%;
position: absolute;
top: 100%;
left: 0;
background-color: gold;
color: white;
border-radius: 5px;
font-weight: bold;
}
.sticker:after {
content: '';
position: absolute;
top: -0.5000em;
left: 50%;
width: 1.0000em;
height: 1.0000em;
transform-origin: 50% 50%;
transform: rotate(45deg);
transform: rotate(45deg);
border-radius: 4px 0 0 0;
background-color: gold;
}

/*/////////////////////////////////////////////////LAYOUT/*/

#splash img {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
max-width: 95%;
max-height: 95%;
z-index: -15;
}

#cache {
background-color: white;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -10;
}

#header {
position: -webkit-sticky;
position: sticky;
/* overflow: hidden; */
top: -1px;
left: 0;
width: 100vw;
height: 3em;
background-color: white;
z-index: 10;
}
/* #header.open { height: 100vh; } */
#header figure { float: left; height: 3em; }
#header figure a {
padding: .2em 1.5em;
height: 3em;
width: auto;
cursor: pointer;
}
#header img { height: 100%; width: auto; }
#header nav { float: left; }
#header nav ul.desktop>li {
margin: 0 .5em;
display: inline-block;
}
#header nav .mobile {
display: none;
overflow: hidden;
width: 100vw;
text-align: center;
}
@media screen and (max-width: 720px) {
	#header nav .desktop {
	display: none;
	}
	#header nav .mobile {
	display: block;
	}
}
#header nav a { color: darkgrey; }
#header nav a:hover { color: black; }
#header nav a.current { color: black; }

.collapsing {
width: 100%;
background-color: white;
z-index: -10;
max-height: 100vh;
}
.collapsing.collapsed {
max-height: 0px;
}

#bar,
#bar a {
background-color: DarkSlateGrey;
color: white;
}
#bar p,
#bar img,
#bar svg {
display: inline-block;
vertical-align: middle;
max-height: 1.5000em;
fill: white;
}

#content {
width: 100%;
min-height: 100vh;
overflow-x: hidden;
background-color: white;
}

#footer {
position: fixed;
bottom: 0;
width: 100%;
height: auto;
z-index: -5;
}

#contact-form {
position: fixed;
top: 0;
left: 0;
background-color: rgba(0,0,0,0.5);
width: 100vw;
height: 100vh;
z-index: 30;
overflow-y: scroll;
display: none;
opacity: 0;
}
#contact-form > div {
position: relative;
top: -150px;
margin: 1.5000em auto;
padding: 3.5000em 1.5000em 1.5000em 1.5000em;
width: 90vw;
max-width: 640px;
background-color: white;
border: 1px solid lightgrey;
border-radius: 1.0000em;
-moz-box-shadow: 0 .5em 1em rgba(0,0,0,0.1);
-webkit-box-shadow: 0 .5em 1em rgba(0,0,0,0.1);
box-shadow: 0 .5em 1em rgba(0,0,0,0.1);
}
#contact-form > div > span {
position: absolute;
margin: 1.0000em;
top: 0;
right: 0;
width: 1.5000em;
height: 1.5000em;
text-align: center;
cursor: pointer;
user-select: none;
}

/*/////////////////////////////////////////////////MISC/*/

.anim {
-webkit-transition: .2s ease-in-out;
-moz-transition: .2s ease-in-out;
-o-transition: .2s ease-in-out;
transition: .2s ease-in-out;
}

.grow:hover { transform: scale(1.3); }

.height-70 {
height: 70vh;
}

.hidden {
opacity: 0;
}
.none {
display: none;
}
.overflow {
overflow: hidden;
}
.block {
display: block;
}
.inline-block {
display: inline-block;
}

.bor-l {
border-left: 1px solid lightgrey;
border-collapse: collapse;
}

.shad {
-moz-box-shadow: 0 .5em 1em rgba(0,0,0,0.1);
-webkit-box-shadow: 0 .5em 1em rgba(0,0,0,0.1);
box-shadow: 0 .5em 1em rgba(0,0,0,0.1);
}

.shad-in {
-moz-box-shadow: inset 0 0 .5em #000000;
-webkit-box-shadow: inset 0 0 .5em #000000;
box-shadow: inset 0 0 .5em #000000;
}

.desktop { display: block; }
.mobile { display: none; }
@media screen and (max-width: 720px) {
  .desktop { display: none; }
  .mobile { display: block; }
}

.absolute {
position: absolute;
}
.relative {
position: relative;
}

.img-center {
display: block;
margin-left: auto;
margin-right: auto;
}

.lc {
display: flex;
justify-content: flex-end;
align-items: center;
}

.pointer {
cursor: pointer;
}

/* links line animation */
.link-line a {
position: relative;
}
.link-line a::after {
content: '';
display: block;
position: absolute;
bottom: -1px;
width: 0;
height: 2px;
background: lightgrey;
transition: .2s ease-in-out;
}
.link-line a.current::after,
.link-line a:hover::after {
width: 100%;
}

/*hamburger button*/
#hb-button {
position: absolute;
top: 0;
right: 0;
width: 2em;
height: 2em;
cursor: pointer;
background-color: rgba(150, 150, 150, .5);
border-radius: 2px;
padding: .3em;
margin: .5em;
}
.bar,
.bar:after,
.bar:before {
width: 1.4em;
height: 0.4em;
}
.bar {
position: relative;
transform: translateY(.5em);
background: rgba(250, 250, 250, 1);
transition: all 0ms 300ms;
}
.bar.animate {
background: rgba(250, 250, 250, 0);
}
.bar:before {
content: "";
position: absolute;
left: 0;
bottom: .6em;
background: rgba(250, 250, 250, 1);
transition: bottom 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
}
.bar:after {
content: "";
position: absolute;
left: 0;
top: .6em;
background: rgba(250, 250, 250, 1);
transition: top 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
}
.bar.animate:after {
top: 0;
transform: rotate(45deg);
transition: top 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1);;
}
.bar.animate:before {
bottom: 0;
transform: rotate(-45deg);
transition: bottom 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1);;
}