body
{
background: #65c8f1 url(bg.png) fixed no-repeat right bottom;
background-size: auto 100vh;
font: 16px/1.6  "Rubik", Arial, sans-serif;
color: #003756;
margin: 0;
counter-reset: ol-counter h2-counter;
}

b, i,  em, strong
{
color: #007ba3;
}

.site a
{
color: #003756;
font-weight: normal;
}

a
{
color: #fff;
font-weight: bold;
letter-spacing: -.5px;
text-decoration: none;
-webkit-transition: all 0.1s ease-out; 
-moz-transition: all 0.1s ease-out; 
-o-transition: all 0.1s ease-out; 
transition: all 0.1s ease-out;
border-bottom: 1px solid;
}

a:hover
{
border-bottom: 3px solid;
}

figure a, figure a:hover
{
border: 0;
}

#content
{
padding: 5vw 0 6vw 8vw;
width: 39vw;
}

p
{
margin: 1.75em 0;
}

h1
{
font: bold 2.25em/1.2 "Contrail One", sans-serif, Arial;
letter-spacing: -1.5px;
margin-top: 2em;
}

header h1
{
font-size: 6em;
margin-top: 1em;
line-height: 0;
text-transform: uppercase;
letter-spacing: -5px;
}

header span
{
display: block;
font-size: .8em;
font-style: italic;
margin-top: -2em;
margin-left: 6em;
}

h2
{
font: bold 2.25em/1.2 "Contrail One", sans-serif, Arial;
margin: 5em 0 1em -8vw;
letter-spacing: -1px;
padding: .4em 0 .4em 8vw;
position: relative;
color: #65c8f1;
}

h2:after
{
content: '';
position: absolute;
top: 0;
left: -1em;
width: calc(100% + 1em);
height: 100%;
z-index: -100;
transform: skew(-30deg);
background-color: #00324a;
}

h2:before
{
counter-increment: h2-counter;
content: counter(h2-counter) ". ";
color: #fff;
font-family: Rubik;
line-height: 0;
margin: 0 .4em 0 -1.2em;
font-weight: bold;
display: inline-block;
}

/**** FIGURES ****/

figure
{
width: 29%;
margin: 0 0 .5em 0;
padding: .7em;
text-align: center;
}

figure.left
{
float: left;
margin-right: 1.5em;
}

figure.right
{
float: right;
}

figure.large
{
width: 80%;
margin: 2.25em auto;
}

figure.sprite img
{
width: auto !important;
max-width: 100%;
}

figure img
{
width: 100%;
}

.tooltip-hook
{
display: inline-block;
padding: 0 .2em;
line-height: 0;
font-size: 1.25em;
color: #fff;
cursor: pointer;
}

.tooltip-hook:hover
{
transform: scale(1.5, 1.5);
transition: all 0.1s ease-out;
}

blockquote
{
background-color: #00324a;
color: #e4f7ff;
padding: 1em 2em;
clear: both;
margin: 3em 0;
}

blockquote, .note, figcaption, .tooltipster-base
{
font-size: .8em;
}


blockquote b:first-child:before
{
content: '\25FC \00A0 \00A0 ';
}

/**** TOOLTIPSTER HAX *****/

.tooltipster-base
{
max-width: 22vw !important;
left: 47.5vw !important;
}

.tooltipster-box
{
border: 0 !important;
background-color: #00324a !important;
}

.tooltipster-content
{
line-height: 1.5 !important;
color: #e4f7ff !important;
}

.tooltipster-arrow-border
{
border-right-color: #00324a !important;
}

.tooltipster-arrow-background
{
border-right-color: transparent !important;
}

.tooltipster-content b, .tooltipster-content i, .tooltipster-content em, .tooltipster-content strong, blockquote b, blockquote i, blockquote em, blockquote strong
{
color: #94c3d9;
}

.tooltip_templates
{
display: none;
}

#tooltip-joelsfashionsense
{
display: inline-block;
width: 10vw !important;
text-align: center;
}


/* TABLE OF CONTENTS */

.table-of-contents ol
{
padding-left: 0;
list-style-type: none;
}

.table-of-contents ol li a
{
page-break-inside: avoid;
display: inline-block;
padding: 0 1em;
width: 100%;
border-bottom: 0;
position: relative;
}


.table-of-contents ol li a:before
{
counter-increment: ol-counter;
content: counter(ol-counter) ". ";
margin-right: 1em;
font-size: 1.25em;
}

.table-of-contents ol li a:after
{
background-color: #00324a;
content: '';
width:0;
height: 100%;
display: block;
top: 0;
left: 0;
position: absolute;
z-index: -100;
transform: skew(-30deg);
-webkit-transition: all 0.2s ease-out; 
-moz-transition: all 0.2s ease-out; 
-o-transition: all 0.2s ease-out; 
transition: all 0.2s ease-out;
}

.table-of-contents ol li a:hover:after
{
width: 100%;

}



/* ADAPTATIONS */

@media screen and (max-width: 980px) {

body
{
background-image: none;
font-size: .8rem;
}

#content
{
width: 80vw;
padding: 0;
padding-bottom: 3em;
margin: 0 auto;
}

body:before
{
display: block;
content: '';
width: 100%;
height: 100vh;
background: #65c8f1 url(bg2.png) no-repeat right bottom;
background-size: auto 100vh;
}

header
{
text-align: center;
}

h2
{
margin-left: 0;
}

h2:before
{
font-size: 1em;
margin: 0 1em 0 0;
}

}

@media screen and (orientation: portrait) {

body:before
{
background-size: cover;
    height: 37vh;
    background-position: right top;
    position: absolute;
    top: 0;
}


figure
{
width: 40%;
}

header h1
{
padding-top: 3rem;
margin-bottom: 2.5rem;
}

#content
{
margin-top: 37vh;
    position: relative;
}

.table-of-contents ol li a
{
font-size: 2em;
}

header h1
{
line-height: .5;
font-size: 20vw;
}

header span
{
margin-left: 0;
}

header
{
padding-bottom: 2vh;
}

#content
{
padding-top: 0 !important;
}

.tooltip-hook, .tooltipster-base
{
font-size: 5vw !important;
}

.tooltipster-base
{
max-width: 90vw !important;
left: 0 !important;
}

.tooltipster-content
{
padding: 3vw !important;
}
}