html,
body {
    margin: 0 0 0 0;
    background-color: #3A4254;
    color: white;
}

img.bands {
    width: 64px;
    height: 64px;
    border: 2px black solid;
}

.aminoseeblue {
    background-color: #012345;
}


/* DEBUG MODE SETTINGS
div, body {
  border: 1px white dotted;
  background: rgba( 250,250,100,0.01);
} */

body {
    height: 100%;
    /* force the BODY element to match the height of the HTML element */
    font-size: 22px;
    background-attachment: fixed;
    background-size: contain;
}

html,
body,
p,
h2,
h3,
h4,
h5,
h6,
a,
input,
textarea,
keygen,
select,
button,
select,
textarea,
span,
table,
td,
tr,
input.textbox,
input.textfield {
    font-family: "Yanone Kaffeesatz";
    font-style: normal;
    font-weight: 200;
    font-size: 1rem;
}

p.center,
h2,
h3 {
    text-align: center;
}

h2 {
    font-size: 1.5rem;
}

h3 {
    font-size: 1.2rem;
}

.vertcenter {
    position: fixed;
    left: 50%;
    top: 25%;
    width: 35%;
    height: 60%;
    transform: translate(-50%, 0);
    overflow-y: scroll;
    z-index: 8;
    background-color: rgb(40, 45, 50);
    background-color: rgba(20, 21, 22, 0.4);
    border-width: 2px;
    border-style: solid;
    border-color: #fff #888 #000 #888;
}

.user-is-touching {
    background-color: rgba(10, 20, 30, 0.2);
    /* background-blend-mode: lighten; */
}

.aminoseeblue {
    /* background-color: #012345; */
    background-color: rgba(1, 35, 69, 0.5);
}

.blackbg {
    background-color: #182032;
}

.large,
h1 {
    font-size: 1.5em;
}

.mc_embed_signup {
    position: fixed;
    left: 1rem;
    bottom: 1rem;
    z-index: 5;
}

.ytwrap {
    position: fixed;
    top: 50%;
    bottom: 50%;
    left: 1rem;
    z-index: 4;
}

.searchbox {
    position: fixed;
    width: 20%;
    max-width: 256px;
    min-width: 128px;
    top: 20%;
    right: 1rem;
    max-height: 64px;
    z-index: 10;
    background: rgba(128, 0, 0, 0.3);
}

.aminoseewrap {
    top: 65%;
    bottom: 35%;
    right: 1rem;
    text-align: center;
    width: 160px;
    position: fixed;
    z-index: 5;
}

.youtube {
    position: fixed;
    bottom: 50%;
    left: 1rem;
    height: auto;
}

.aminosee {
    position: fixed;
    bottom: 40%;
    right: 1rem;
    height: auto;
}

img.youtube {
    width: 7%;
    min-width: 40px;
    max-width: 100px;
    height: auto;
}

.current {
    width: calc(80px + 10%);
    height: auto;
    display: inline-flex;
}

.googlecse {}

.small,
.grey,
.red,
.black {
    font-size: 0.5rem;
}


/*HOME EVERYTHING SECTION*/

#homepageheading {
    position: fixed;
    top: 2rem;
    right: 4rem;
    /* left: 50%; */
    /* transform: translateX(-50%); */
    z-index: 5;
    /* pointer-events: none; */
    width: auto;
    height: 7rem;
    overflow-y: visible;
    white-space: nowrap;
}

#homepageslug {
    position: relative;
    top: calc(0 + 20%);
    right: calc(0 + 10%);
    /* left: 50%; */
    /* transform: rotate(1deg) translate(-50%, 60px); */
    white-space: nowrap;
    /* pointer-events: none; */
    color: white;
    -webkit-text-stroke: 0.2px black;
    -webkit-text-fill-color: white;
    /*text-shadow:
	1px 1px 0 #fff,
	-1px -1px 0 #000,
	1px 	-1px 0 #000,
	-1px  1px 0 #000,
	1px  1px 0 #000;*/
    z-index: 5;
}

.debug,
#debugOutput {
    /*visibility: hidden;*/
    /*text-align: center;*/
    /*opacity: 0.6;*/
    position: relative;
    /*left: 40%;*/
    right: 0px;
    top: 0;
    /*bottom: 40%;*/
    /*height: 200px;*/
    /*width: 200px;*/
    z-index: 100;
    /*transform: translate(50px, -200px);*/
}

.lobster {
    white-space: nowrap;
    /*transform: rotate(3deg);*/
    color: white;
    font-family: 'Lobster', arial, serif;
    padding: 0;
    /* WebKit (Safari/Chrome) Only */
    -webkit-text-stroke: 1px black;
    -webkit-text-fill-color: white;
    text-shadow: 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}


/*   END OF HOME EVERYTHING SECTION*/

.absofloatly {
    position: absolute;
    left: -50%;
}

.wrapper {
    position: relative;
    width: 100%;
    height: 100%;
}

.static {
    /* display: none; */
    position: fixed;
    left: 50%;
    right: 50%;
    top: 50%;
    bottom: 50%;
    transform: translate(-50%, -50%);
    width: 50%;
    z-index: 0;
    pointer-events: none;
}

.glassbutton {
    background-color: rgb(50, 50, 50);
    background-color: rgba(20, 20, 20, 0.4);
    border-width: 2px;
    border-style: solid;
    border-color: #fff #888 #000 #888;
    white-space: nowrap;
    padding: 8px;
}

.footer {
    position: fixed;
    transform: rotate(-5deg) translateY(-30px);
    bottom: 1rem;
    right: 1rem;
    z-index: 5;
    /*width: 120px;*/
    /*height: 100px;*/
    padding-left: 10px;
}

.rightside {
    position: absolute;
    width: 95%;
    right: 200px;
    z-index: 5;
    max-width: 220px;
    bottom: -20px;
}

.centered {
    position: fixed;
    transform: translate(-50%, 0);
    width: 50%;
    left: 50%;
    z-index: 5;
    /*height: 340px;*/
    top: 1px;
    /*overflow-y: hidden;*/
}


/* THIS IS TO HIDE THE LOGO IN THE MENU */


/* nav img, nav #menuhomelink, nav li #menuhomelink {
	display: none;
} */


/*  THIS MAKES THE MENU SMALLER FOR HOMEPAGE  */

nav #returntofunk,
nav li #returntofunk,
nav #returntofunk ul ul li,
#returntofunk a {
    visibility: hidden;
    display: none;
}


/* GET RID OF FUNK LOGO - ITS ON THE HOMEPAGE ALREADY  */


/* nav li #menuhomelink::before {
    content: url(/images/nav/funk-logo-glowing-srq-ratio-600px.png);
} */

nav ul ul,
#returntofunk nav ul ul li a:hover {
    background: #5f6975;
    /* border-radius: 1px;
  border-color: black; */
    padding: 8px 8px;
    position: absolute;
    top: 100%;
}

#homelogo {
    position: fixed;
    left: 2rem;
    top: 5rem;
    max-width: 23%;
    min-width: 120px;
    width: 42%;
    height: auto;
    z-index: 1;
    /* border: 180px black solid; */
    /* background-color: rgba(50,0,0,0.3); */
    padding: 0.2rem;
    opacity: 90%;
}

.grey {
    color: #666666;
}

.red {
    color: #cc0000;
}

.black {
    color: #000;
}

a {
    text-decoration: none;
    color: #fff;
    font-weight: bolder;
    /* background-color: rgb(8, 16, 20);
  background-color: rgba(8, 16, 20, 0.3); */
    padding: 5px;
}

a:hover,
a:active {
    text-decoration: underline;
}


/* a:visited {
  background-color: rgb(8, 16, 20);
  background-color: rgba(5, 5, 40, 0.9);
} */

a:hover {
    background-color: #fff;
    background-color: rgb(255, 255, 230);
    background-color: rgba(255, 255, 240, 0.7);
    color: #000;
}


/* a:active a:visited {
  color: #f00;
  background-color: #3A4254;
  background-color: rgba(58, 66, 84, 0.7);
} */

a:active {
    background-color: rgb(15, 4, 1);
    color: red;
}

.elementtostretch {
    left: 50%;
    width: 50%;
    height: 50%;
    position: relative;
}

#thelabid {
    position: fixed;
    bottom: 0;
    transform: translate(-50%, 0);
    left: 50%;
    margin: auto;
    overflow: auto;
    right: 0;
    top: 0;
    z-index: 2;
    pointer-events: none;
    width: auto;
    /*visibility: hidden;*/
}

#fb-root {
    position: relative;
    width: 50%;
    left: 50%;
    margin: 16px;
    padding: 10px;
}

#fb-wrapper {
    border: 1px dotted grey;
    width: 70%;
    background-color: rgba(0, 0, 32, 0.5);
    position: relative;
    transform: translate(-50%, 0);
    left: 50%;
}


/* ---------------------------------------------------------- */


/*                                                            */


/* A media query that captures:                               */


/*                                                            */


/* - Retina iOS devices                                       */


/* - Retina Macs running Safari                               */


/* - High DPI Windows PCs running IE 8 and above              */


/* - Low DPI Windows PCs running IE, zoomed in                */


/* - Low DPI Windows PCs and Macs running Firefox, zoomed in  */


/* - Android hdpi devices and above                           */


/* - Android tvdpi devices, including Google Nexus 7          */


/* - Chrome running on high DPI Macs and PCs                  */


/* - Opera running on high DPI Macs, PCs and mobile devices   */


/*                                                            */


/* Please note that that this code assumes you'll swap a      */


/* 2× version of your images. If you'd like to supply         */


/* finer increments, other thresholds might be appropriate.   */


/*                                                            */


/* A test for CSS pixel densites can be found here:           */


/* http://bjango.com/articles/min-device-pixel-ratio/         */


/*                                                            */


/*                                  @marcedwards from @bjango */


/*                                                            */


/* ---------------------------------------------------------- */

@media	only screen and (-webkit-min-device-pixel-ratio: 1.3),
only screen and (-o-min-device-pixel-ratio: 13/10),
only screen and (min-resolution: 120dpi) {
    /* Your code to swap higher DPI images */
    body,
    html {
        /* background-color: #3A4254; */
        /* font-size: 18px; */
    }
    /* #homepageheading {
		background-color: yellow;
	} */
}

@media	only screen and (-webkit-max-device-pixel-ratio: 1.3),
only screen and (-o-max-device-pixel-ratio: 13/10),
only screen and (max-resolution: 120dpi) {
    /* Your code to swap lower DPI images */
    body,
    html {
        font-size: 18px;
    }
    .vertcenter {
        width: 40%;
    }
}

@media (orientation: portrait) {
    body,
    html {
        /* background-color: purple; */
        /* font-size: 18px; */
    }
    #thelabid {
        /*transform: translate(-50%,0);*/
        height: 100%;
    }
    .mc_embed_signup {
        transform: rotate(-5deg);
    }
    .homelogo {
        top: 0;
    }
    .vertcenter {
        /*top: 30%;*/
        width: 55%;
    }
    img.aminosee {
        width: 32px;
    }
    .googlecse {
        visibility: hidden;
    }
}

@media (orientation: portrait) and (min-height: 950px) {
    body,
    html {
        font-size: 18px;
        /* background-color: green; */
    }
    #homelogo {
        top: 3rem;
    }
    #homepageslug,
    #homepageheading {
        display: none;
    }
    .googlecse {
        position: fixed;
        visibility: hidden;
    }
}

nav ul {
    padding-inline-start: 32px;
}

@media (orientation: portrait) and (max-height: 950px) {
    body,
    html {
        /* background-color: orange; */
    }
    html,
    body,
    p,
    h2,
    h3,
    h4,
    h5,
    h6,
    a,
    input,
    textarea,
    keygen,
    select,
    button,
    select,
    textarea,
    span,
    table,
    td,
    tr,
    .grey,
    .red,
    .black,
    .medium,
    .small,
    .large,
    input.textbox,
    input.textfield,
    nav {
        font-size: 10px;
    }
    nav ul {
        padding-inline-start: 8px;
    }
    #homelogo {
        top: 3rem;
    }
    #homepageslug,
    #homepageheading {
        display: none;
    }
    .googlecse,
    .aminoseewrap,
    .ytwrap {
        display: none;
        visibility: hidden;
    }
}


/* PORTRAIT MOBILE PHONES Extra Scrunch!!! THE ORANGE PROFILE  */

@media (orientation: portrait) and (max-width: 600px) {
    body,
    html {
        font-size: 14px;
        /* background-color: blue;  */
    }
    /* .googlecse, .aminoseewrap, .ytwrap {
    display: none;
    visibility: hidden;
  } */
    p.nav {
        font-size: 12px;
    }
    .vertcenter p.vertcenter {
        top: 10%;
    }
    #thelabid {
        transform: translate(-50%, 10%) scale(0.8);
        top: -20%;
    }
    #fb-root {
        visibility: hidden;
    }
    .mc_embed_signup {
        transform: rotate(-14deg)
    }
    img.youtube {
        width: 40px;
        left: 0;
    }
    /*HOME EVERYTHING SECTION*/
    /* #homepageheading, */
    #homepageslug {
        display: none;
        /* width: 50%; */
        /* left: 50%; */
    }
    /*   END OF HOME EVERYTHING SECTION*/
}


/**************** LANDSCAPE / WIDESCREEN ********** */

@media (orientation: landscape) {
    .elementtostretch {
        /*width: calc( 1600px * 1.56969 );*/
        /*height: calc( 1200px * 1.56969 );*/
    }
    #thelabid {
        /*height: 100%;
		width: auto;
		transform: translate(-50%,0) scale(2.36969);*/
    }
    body,
    html {}
}


/* HIGH RES SCREENS OVER 1600PX USE FULL HEIGHT */

@media (orientation: landscape) and (min-width: 1600px) {}


/*PHOTOGRAPHIC RATIO BOUNDARY @ 134/100 - SWITCH TO FULL WIDTH */

@media (orientation: landscape) and (min-aspect-ratio: 134/100) {
    .elementtostretch {
        width: calc(1600px * 1.56969);
        /*height: calc( 1200px * 1.56969 );*/
    }
    .vertcenter {
        top: 15%;
        width: 35%;
    }
    #thelabid {
        height: 100%;
        width: auto;
        transform: translate(-50%, 0) scale(1.4);
    }
    body,
    html {
        /*background-color: teal;*/
    }
}


/*PHOTOGRAPHIC RATIO BOUNDARY @ 134/100 - SWITCH TO FULL HEIGHT */

@media (orientation: landscape) and (max-aspect-ratio: 134/100) {
    /*html, body {*/
    /*}*/
    .elementtostretch {
        width: calc(1600px * 2.56969);
        /*height: calc( 1200px * 1.56969 );*/
    }
    .vertcenter {
        top: 15%;
        width: 35%;
    }
    #thelabid {
        height: 100%;
        width: auto;
        transform: translate(-50%, 0) scale(1.6);
    }
    body,
    html {}
}

@media (orientation: landscape) {
    #thelabid {
        /*position: fixed;*/
        /*bottom: 0;*/
        /*transform: translate(-50%,0);*/
        /*left: 50%;*/
        /*margin: auto;*/
        /*overflow: auto;*/
        /*right: 0;*/
        top: -25%;
        /*pointer-events: none;*/
        /*width: auto;*/
    }
}


/* ULTRA severely small screens*/

@media (orientation: landscape) and (max-height: 376px) {
    html,
    body {
        font-size: 13px;
        /* background: yellow; */
    }
    h2 {
        font-size: 0.7rem;
    }
    .hidable {
        display: none;
        visibility: hidden;
    }
    .googlecse,
    .aminoseewrap,
    .ytwrap {
        display: none;
        visibility: hidden;
    }
}


/* QUITE WIDESCREEN DESKTOP */


/*@media (min-aspect-ratio: 2/1) and (max-height: 400px) and (max-width: 1600px) {*/


/*#thelabid {*/


/*width: 100%;*/


/*height: auto;*/


/*}*/


/*}*/


/*PHOTOGRAPHIC RATIO BOUNDARY @ 134/100 - SWITCH TO FULL WIDTH */

@media (orientation: landscape) and (max-aspect-ratio: 134/100) {
    /*#thelabid {*/
    /*height: 100%;*/
    /*}*/
    #thelabid {
        width: 100%;
        height: auto;
    }
}


/*4K ULTRA HD DISPLAYS */

@media (min-width: 2600px) {
    html,
    body {
        font-size: 1.6rem;
    }
    .ytwrap,
    .youtube {
        left: 6rem;
    }
    #homepageheading {
        right: 18rem;
    }
}


/* THIS IS WHERE THE HOMEPAGEHEADING DISAPPEARS! */


/* TINY SCREEN IPHONE 4 LANDSCAPE  MOBILE PHONES */

@media (orientation: landscape) and (max-device-width: 900px),
(orientation: landscape) and (max-width: 1020px) {
    html,
    body {
        font-size: 16px;
        /* background-color: teal; */
    }
    /* , #homepageheading  */
    .toppages,
    .hidable {
        visibility: hidden;
        display: none;
    }
    .footer {
        bottom: 0;
        right: 0;
    }
    .elementtostretch {
        left: 50%;
    }
    #homelogo {
        top: -1rem;
        right: 1rem;
        left: auto;
        position: fixed;
    }
    .bands {
        width: calc(30px + 6%);
        height: auto;
    }
    .current {
        width: calc(60px + 10%);
        height: auto;
    }
}


/* WIDESCREEN PHONES */

@media (orientation: landscape) and (min-height: 321px) and (min-width: 578px) and (max-width: 1600px) {}


/* landscape crossover ratio: 1.34 or*/


/* SUPER WIDE SCREENS GET FULL WIDTH */

@media (orientation: landscape) and (min-aspect-ratio: 134/100) {
    .footer {
        transform: rotate(-1deg);
    }
    .elementtostretch {
        width: calc(1600px * 1.56969);
        /*height: calc( 1200px * 1.56969 );*/
    }
    #thelabid {
        width: 100%;
        height: auto;
    }
}

.backtape {
    background-color: #1B1F29;
}

input,
input.textbox,
select,
textarea,
input.textfield {
    background-color: #eeeeee;
    color: black;
    /* border-width: 1; */
}


/*fix for Mac OS X removing scrollbars in os */

::-webkit-scrollbar {
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 7px;
}

::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background-color: rgb(0, 0, 0);
    background-color: rgba(0, 0, 0, .5);
    -webkit-box-shadow: 0 0 1px rgba(255, 255, 255, .5);
    -moz-box-shadow: 0 0 1px rgba(255, 255, 255, .5);
    box-shadow: 0 0 1px rgba(255, 255, 255, .5);
}

@font-face {
    font-family: 'Lobster';
    font-style: normal;
    font-weight: 400;
    src: local('Lobster'), local('Lobster-Regular'), url(https://fonts.gstatic.com/s/lobster/v16/NIaFDq6p6eLpSvtV2DTNDQLUuEpTyoUstqEm5AMlJo4.woff) format('woff');
}

@font-face {
    font-family: 'Lobster Two';
    font-style: normal;
    font-weight: 400;
    src: local('Lobster Two'), local('LobsterTwo'), url(https://fonts.gstatic.com/s/lobstertwo/v8/Law3VVulBOoxyKPkrNsAaLrIa-7acMAeDBVuclsi6Gc.woff) format('woff');
}

@font-face {
    font-family: 'Yanone Kaffeesatz';
    font-style: normal;
    font-weight: 400;
    src: local('Yanone Kaffeesatz Regular'), local('YanoneKaffeesatz-Regular'), url(https://fonts.gstatic.com/s/yanonekaffeesatz/v7/YDAoLskQQ5MOAgvHUQCcLQa6gm6bS00u2Qn-iPLo1Go.woff) format('woff');
}