/*
*/



html{color:#000;background:#FFF}
body,img,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td, figure {margin:0;padding:0}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal}ol,ul{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}q:before,q:after{content:''}abbr,acronym{border:0;font-variant:normal}sup{vertical-align:text-top}sub{vertical-align:text-bottom}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;*font-size:100%}legend{color:#000}#yui3-css-stamp.cssreset{display:none}span {text-decoration: none;}

html {background: #FFF;}
body {background: #FFF; color: #000; font-family:; font-size: 100%; line-height: 1.25em; overflow-y: ;}

body.ready {overflow-y: auto;}
body.ready .overlay {display: none;} 

body {}

::selection {background: red; color: black;}
::-moz-selection {background: red; color: black;}
strong {font-weight: bold;}
.wrapper {padding:1.5rem; max-width: 1400px; margin:0 auto; width: calc(100% - 3rem); overflow-x: hidden;}

.flexer {display: flex; justify-content: space-between;}



#audioplayerwrapper {width: 100%; position: fixed; bottom: 0; background: red; padding:0.5rem; display: none;}
#audioplayerwrapper audio {width: 100%; font-family: Times New Roman, Times, Serif; font-weight: bold;}


.overlay {width: 100%; height: 100%; position: fixed; background: #E5e5e5; display: flex; z-index: 999999999999; align-items: center; justify-content: space-between; flex-direction: column; box-sizing: border-box;}
.overlay button {text-align: center; color: red; text-transform: uppercase; font-weight: bold; font-size: 90px; line-height: 90px; text-decoration: underline; outline: none; border:none; background: none; font-family: Times New Roman, Times, Serif;}
.overlay button:hover {text-decoration: none;}


.overlay .overlayFlex {display: flex; gap:10px; font-family: arial; padding:1.5rem 1.5rem 0; justify-content: space-between; align-items: space-between; width: 100%; box-sizing: border-box;}
.overlayFlex div {max-width: 300px;}
.overlayblue {color: blue; font-size: 70%; line-height: 1.25em;}
.inneroverlayflex {display: flex; justify-content: space-between; margin: 0 auto;}
.inneroverlayflex div {max-width: 75px;}
.inneroverlayflex div img {width: 100%; height: auto;}

.bottomoverly {width: 100%;max-height: 40svh;}
.bottomoverly img {width: 100%; height: auto; display: block;}



#audio-player-container button {
    padding: 0;
    border: 0;
    background: transparent;
    outline: none;
    width:1em;
    display: block;
}
#audio-player-container button img {width: 1em; height: auto;}

#audio-player-container button img#play-button {display: block;}
#audio-player-container button img#pause-button {display: none}

#audio-player-container button.playing img#play-button {display: none}
#audio-player-container button.playing img#pause-button {display: block;}

#audio-player-container {
    --seek-before-width: 0%;
    --volume-before-width: 100%;
    --buffered-width: 0%;
    width: 100%;
    background: red;
    color: white;
    display: none;
    padding:1.25rem 1.25rem 6.25rem;
    align-items: center;
    gap: 1.25rem;
    box-sizing: border-box;
    font-family: Times New Roman, Times, Serif; font-weight: bold;
    position: fixed;
    bottom: -5rem;
    z-index: 999999999;
}
.ready #audio-player-container {display: flex;}



#play-icon {
  padding: 0.25rem;
  margin: -0.25rem;
  width: 1em;
  font-size: 40px;
}


.time {
    display: inline-block;
    width: 37px;
    text-align: center;
    font-size: 20px;
    margin: 0;
}
#time-divider {width: auto; font-weight: normal}

output {
    display: inline-block;
    width: 32px;
    text-align: center;
    font-size: 20px;
    margin: 10px 2.5% 0 5%;
    float: left;
    clear: left;
}
#volume-slider {
    margin: 0;
    width: 100%;
}
#volume-slider::-webkit-slider-runnable-track {
    background: rgba(255, 255, 255, 1);
}
#volume-slider::-moz-range-track {
    background: rgba(255, 255, 255, 1);
}
#volume-slider::-ms-fill-upper {
    background: rgba(255, 255, 255, 1);
}
#volume-slider::before {
    width: var(--volume-before-width);
}
input[type="range"] {
    position: relative;
    -webkit-appearance: none;
    width: 100%;
    margin: 0;
    padding: 0;
    height: 19px;
    margin: 0;
    outline: none;
    background: red;
}
input[type="range"]::-webkit-slider-runnable-track {
    width: 100%;
    height: 5px;
    background: linear-gradient(to right, rgba(225, 225, 225, 1) var(--buffered-width), rgba(225, 225, 225, 1) var(--buffered-width));
}
input[type="range"]::before {
    position: absolute;
    content: "";
    top: 7px;
    left: 0;
    width: var(--seek-before-width);
    height: 5px;
    background-color: black;
    /*blue before*/
}
input[type="range"]::-webkit-slider-thumb {
    font-size: 40px;
    position: relative;
    -webkit-appearance: none;
    box-sizing: content-box;
    height: 1em;
    width: 1em;
    margin: -0.5em 0 0 0;
    background-image: url('player/progress.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    background-color: transparent;
    appearance: none;
    outline: none;
    box-shadow: none;
}
input[type="range"]:active::-webkit-slider-thumb {
    transform: scale(1.2);
}
input[type="range"]::-moz-range-track {
    width: 100%;
    height: 5px;
    background: linear-gradient(to right, rgba(225, 225, 225, 1) var(--buffered-width), rgba(225, 225, 225, 1) var(--buffered-width));
}
input[type="range"]::-moz-range-progress {
    background-color: black;
}
input[type="range"]::-moz-focus-outer {
    border: 0;
}
input[type="range"]::-moz-range-thumb {
    box-sizing: content-box;
    height: 1em;
    width: 1em;
    font-size: 40px;
    margin: -0.5em 0 0 0;
    position: relative;
    background-image: url('player/progress.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    background-color: transparent;
    appearance: none;
    outline: none;
}
input[type="range"]:active::-moz-range-thumb {
    transform: scale(1.2);
    /*background: #007db5;*/
}
input[type="range"]::-ms-track {
    width: 100%;
    height: 5px;
    background: transparent;
    border: solid transparent;
    color: transparent;
}
input[type="range"]::-ms-fill-lower {
    background-color: black;
}
input[type="range"]::-ms-fill-upper {
    background: linear-gradient(to right, rgba(225, 225, 225, 1) var(--buffered-width), rgba(225, 225, 225, 1) var(--buffered-width));
}
input[type="range"]::-ms-thumb {
    box-sizing: content-box;
    height: 1em;
    width: 1em;
    font-size: 40px;
    margin: -0.5em 0 0 0;
    position: relative;
    background-image: url('player/progress.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    background-color: transparent;
    appearance: none;
    outline: none;
}
input[type="range"]:active::-ms-thumb {
    transform: scale(1.2);
    /*background: #007db5;*/
}

#volume-controls output {display: none;}
#volume-controls button#mute-icon {display: none;}

#volume-controls-controller {width: 15%; position: relative;}
#volume-controls-controller span {text-align: center; display: block; font-family: arial; text-transform: uppercase; color: black;}
#volume-controls {position: absolute; top:0; display: none;}
#volume-controls-controller.active #volume-controls {display: block;}
#time-controller {white-space: nowrap;}






.scread {display: none;}

.homewrapper {width: 100%; height: 100%;}
.homewrapper a.dlink {text-align: center; max-width: 400px; width:50%; z-index: 99;position: absolute; left: 50%;top: 50%; -webkit-transform: translate(-50%, -50%);transform: translate(-50%, -50%); }
.homewrapper a.dlink svg {width:100%; height:auto; }
.homewrapper a.hlink {width: 100vw; max-width: 100vw; height: 100vh; background: white; position:absolute; top:0; z-index: 1;}

.wrapper-bg {width: 100%; height: 100vh; background-size: cover; background-position: center top;}


.homiepage .dlink svg path {fill: white;}
.homiepage a.hlink {background: black;}

.blur {padding:1rem; bottom: 5rem; position: fixed;}
.blur h1 {color: #FFF;
font-family: Inter;
font-size: 4rem;
font-style: normal;
font-weight: 600;
line-height: normal; position: relative;}
.blur h1 span {
  filter: blur(2px);
  -webkit-text-stroke-width: 1;
-webkit-text-stroke-color: #000;
}
.blur p {
  color: #F00;
font-family: Inter;
font-size: 1.2rem;
font-style: normal;
font-weight: 400;
line-height: normal;
filter: blur(1.5px);
margin-top:2rem;
}
.blur h1 svg {position: absolute; top: 100%; left: 0; max-width:90%; }

#frogbillyc .rollover {position: absolute;
  left: 50%;
  top: 35%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%); width: 33%; padding-bottom: 33%; background: transparent;}
#frogbillyc .rollover a {display: block; width: 100%; height: 100%;}

.popupsvg {display:none;position: absolute;left: 50%;
  top: 35%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%); width: 25%;}
.popupsvg img {width: 100%; height: auto;}

.rolloverr {width: 100%; height: 100%; position: relative;z-index: 99; display: none;}
.rolloverr a {position: absolute;left: 50%;top: 45%; -webkit-transform: translate(-50%, -50%);transform: translate(-50%, -50%); text-align: center; display: block;}
.rolloverr img {max-height: 90vh; max-width: 90vw; display: inline-block;}

.chrissyDfrog {width: 100%; height: 100vh; position: relative; }
.chrissyDfrog img {width: 100%; height: auto;}
.chrissyDfrog .screenshot1 {position: absolute; top: 5rem; left: 0; width:45%;}
.chrissyDfrog .screenshot1 .froggie {position: absolute; top: 7.5%; left: 70%; width:8%; height: 3%; background: transparent;}
.chrissyDfrog .froggieroll {position: absolute; left: 50%;top: 50%; -webkit-transform: translate(-50%, -50%);transform: translate(-50%, -50%); display: none;}
.chrissyDfrog .screenshot2 {position: absolute; top: 1rem; right: 0; width: 45%;}

.chrissyDfrog .screenshot3 {position: absolute; top: 1rem; left: 5%; width: 20%;}
.chrissyDfrog .screenshot4 {position: absolute; top: 30%; left: 30%; width: 20%;}
.chrissyDfrog .screenshot5 {position: absolute; top: 60%; left: 55%; width: 20%;}

.chrissyDfrog .screenshot6 {position: absolute; top: calc(100% - 10rem); right: 0; width: 10%;}


#p-1, #p-1-1, #p-1-2, #p-2, #p-3, #p-3-1, #p-3-2, #roto-fabrik-swiss {width: 100%;height: auto;padding-bottom: 4.25rem;}
#p-1 img, #p-1-1 img, #p-1-2 img, #p-2 img, #p-3 img, #p-3-1 img, #p-3-2 img {width: 100%; height: auto;}

#p-1 {background: #00FF38; }
#p-1-1 {background: red;}
#p-1-2 {background: black; position: relative;}
#p-2 {background: black; position: relative;}
#p-3 {background: black; position: relative;}
#p-3-1, #p-3-2 {background: white;}

#p-1-2 a.g44 {position: absolute; top: 55%; z-index: 999; left: 15%; width: 30%;}
#p-2 .img_6027 {position: absolute; width: 15%; top: calc(36.7% - 4.25rem); z-index: 999; left: 42.82%;}


#p-3 a {display: block; position: absolute; top: 8.75%; z-index: 999; background: transparent; width: 24%; padding-bottom: 22%;}
#p-3 a.p-3-a-1 {left: 12.75%;}
#p-3 a.p-3-a-2 {right: 12.75%;}

#p-3-2 {height: calc(100svh - 4.25rem); padding-bottom: 4.25rem;}
#p-3-2 img {width: 100%; height: auto;}

#roto-fabrik-swiss {position: relative; width: 100vw; height: 100svh; background-size: contain; background-position: center center; position: relative;}
#roto-fabrik-swiss .g45 {display: block; position: absolute; z-index: 99; width: 30%; left: 5%; top: 50%; opacity: 1;}
#roto-fabrik-swiss .g45 img {width: 100%; height: auto; display: block;}
#roto-fabrik-swiss .vidwrap {z-index: 999; position: absolute;top:20%; left: 25%; width: 50%; border: 1em solid #fff; background: #fff;}
#roto-fabrik-swiss .vidwrap video {width: 100%; height: auto;}

#france {width: 100%; position: relative;}
#france img {width: 100%; height: auto;}
#france .france_a {position: absolute; z-index: 99; width: 30%; left: 3%; top: 26%; opacity: 0.5; background: transparent; padding-bottom: 37%;}
#france .france_b {position: absolute; z-index: 99; width: 28%; right: 3%; top: 28.25%; opacity: 0.5; background: transparent; padding-bottom: 23%;}
#france .france_c {position: absolute; z-index: 99; width: 95%; left: 2.5%; top: 20%; opacity: 0.5; background: transparent; height: 4rem;}
#france .france_d {position: absolute; z-index: 99; width: 50%; left: 22%; top: 36.75%; opacity: 0.5; background: transparent; padding-bottom: 31%;}
#france .france_e {position: absolute; z-index: 99; width: 44%; left: 25%; top: 53%; opacity: 0.5; background: transparent; padding-bottom:7%;}

#france .france_f {position: absolute; z-index: 99; width: 30.5%; left: 35%; top: 63.2%; opacity: 0.5; background:transparent; padding-bottom: 20%;}
#france .france_g {position: absolute; z-index: 99; width: 30%; left: 65.5%; top: 63.2%; opacity: 0.5; background: transparent; padding-bottom: 20%;}

#france .france_h {position: absolute; z-index: 99; width: 84%; left: 8%; top: 66.75%; opacity: 0.5; background: transparent; padding-bottom: 6%;}

#france .france_pencil {position: absolute; z-index: 999; width: 97%; left: 1%; top: 20.25%;}
#france .mm {position: absolute; z-index: 99; width: 100%; left: 0; top: 20.65%;background: #fff; max-height: 8.25%; overflow: hidden;}
#france .mm video {width: 100%; height: auto; display: block;}

#france .bars {position: absolute; z-index: 999; width: 29%; left: 3.25%; top: 26.25%; background: transparent; padding-bottom: 37%;}
#france .guillo {position: absolute; z-index: 999; width: 27%; right: 3.65%; top: 28.45%; background: transparent; padding-bottom: 23%;}

#france .best {position: absolute; z-index: 99; width: 100%; left: 0; top: 94.55%;background: #fff; max-height: 8.25%; overflow: hidden;}
#france .best video {width: 100%; height: auto; display: block;}

#france .vidwrap {z-index: 999; position: absolute; top:2.5%; left: 25%; width: 50%; background: #fff;}
#france .vidwrap video {width: 100%; height: auto; display: block;}

#trash {width: 100%; position: relative; padding-bottom: 4.25rem;}
#trash img {width: 100%; height: auto;}
#trash .bins {position: absolute; z-index: 99; width: 50%; left: 25%; top: 5%; opacity: 0.5; background: transparent; }
#trash .trash {z-index: 999; position: absolute; top:12%; left: 20%; width: 60%; background: #fff;}
#trash .trash video {width: 100%; height: auto; display: block;}
#trash .animal {position: absolute; z-index: 99; width: 48%; left: 1%; top: 49.5%; background: transparent; }
#trash .together {position: absolute; z-index: 99; width: 50%; left: 0%; top: 82.25%; opacity: 0.5; background: transparent; padding-bottom:50%; }
#trash .society {position: absolute; z-index: 99; width: 50%; right: 0%; top: 82.25%; opacity: 0.5; background: transparent; padding-bottom:50%; }

#ai-faces {background: #D9D9D9; height: calc(100svh - 4.25rem); display: flex; align-items: center;}
#ai-faces .grid {display: flex; padding:3%; flex-wrap: wrap; gap: 3%;}
#ai-faces .grid img {width: 48.5%; height: auto; padding-bottom: 3%;}
#ai-faces .which {position: absolute;left: 50%;top: 45%; -webkit-transform: translate(-50%, -50%);transform: translate(-50%, -50%); width: 80%;}
#ai-faces .which img {width: 100%; height: auto;}
#ai-faces .whichwhich {position: absolute;position: absolute;left: 75%;top: 45%; -webkit-transform: translate(-50%, -50%);transform: translate(-50%, -50%); width: 35%; background: transparent; opacity: 0.5; padding-bottom: 10%;}

#animal-friends {height: calc(100svh - 4.25rem); position: relative;}
#animal-friends .animal-friends-video {width: 100%; height: 100%;}
#animal-friends .animal-friends-video video, #animal-friends .animal-friends-video img {height: 100%;}
#animal-friends .friendz {position: absolute; bottom: 4%; right: 2%; width: 50%;}

#eye {height: calc(100svh - 4.25rem); position: relative;}
#eye .eye-video {width: 100%; height: 100%;}
#eye .eye-video video, #eye .eye-video img {height: calc(100svh - 4.25rem); min-width: 100%; position: absolute; left: 50%;top: 50%; -webkit-transform: translate(-50%, -50%);transform: translate(-50%, -50%);}


#together {position: relative; padding-bottom: 3.85rem;}
#together img {width: 100%; height: auto;}
#together .together {position: absolute; top: 56%; left: 2%; width: 30%; padding-bottom: 8%; background: transparent; opacity: 0.5;}


#turing {position: relative; padding-bottom: 3rem}
#turing img {width: 100%; height: auto;}
#turing .turing-vid {z-index: 999; position: absolute; top:5%; left: 17%; width: 66%; background: #000;}
#turing .turing-vid video {width: 100%; height: auto; display: block;}

#turing .clank {position: absolute; top:12%; left: 11.75%; width: 25%; background: transparent; z-index: 9999;}
#turing .jetson {position: absolute; top:10.5%; right: 12%; width: 14%; background: transparent; z-index: 9999;}
#turing .turing-gif {position: absolute; top:18%; width: 20%; left: 40%;}

#turing .grimes {position: absolute; top:55%; left: 28.75%; width: 42.5%; background: transparent; opacity:0.5; padding-bottom:24%; }
#turing .clippy {position: absolute; bottom:3%; right: 5%; width: 22%; background: transparent; opacity:0.5; padding-top:24%; }

#frog-jail {background: #4531BF; min-height: 100svh; font-family: "Abyssinica SIL", serif; font-weight: 400; font-style: normal; width:100%; padding-bottom: 3.85rem; text-align: center;}
#frog-jail p {color: #fff; font-family: "Abyssinica SIL", serif; text-align: center; width: 96%; padding-left: 2%; padding-top:50px;padding-bottom: 20px; font-size: 20px; line-height: 1.4em;}
#frog-jail p a {color: #fff; text-decoration: none;}
#frog-jail img {width: 100%; height: auto; display: block;}
#frog-jail img.frogjail {max-width: 600px; display: inline-block; margin-bottom: -0.5rem;}
#frog-jail .zh9 {position: relative;}
#frog-jail .zh9 .zh9-l1 {position: absolute; padding-bottom: 8.5%; width: 28.5%; top:30%; left: 2%; background: transparent; opacity: 0.5;}
#frog-jail .zh9 .zh9-l2 {position: absolute; padding-bottom: 9%; width: 30%;top:60%; left: 52%; background: transparent; opacity: 0.5; z-index: 99;}


#society {background: #FFF; min-height: 100svh; font-family: "Abyssinica SIL", serif; font-weight: 400; font-style: normal; width:100%; padding-bottom: 3.85rem; text-align: center;}
#society img {width: 100%; height: auto;}
#society p { font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400; text-align: center; width: 96%; padding-left: 2%; padding-top:50px;padding-bottom: 20px; font-size: 20px; line-height: 1.4em;}
#society p a {color: #000; text-decoration: none;}

#society .wes {width: 60%; padding-left: 20%; padding-top: 2rem;padding-bottom: 2rem; position: relative;}
#society .wes a {position: absolute; top:35%; left: 58%; width: 8.5%; padding-bottom: 10%; opacity: 0.5; background: transparent;}
#society .burb {width: 80%; padding-left: 10%;}
#society .bran {width: 80%; padding-left: 10%; position: relative;}
#society .bran a.bran-l1 {position: absolute; top:3%; left: 58%; width: 8.5%; padding-bottom: 8%; opacity: 0.5; background: transparent;}
#society .bran a.bran-l2 {position: absolute; top:5%; left: 43.5%; width: 8.5%; padding-bottom: 8%; opacity: 0.5; background: transparent;}


#sabotage {position: relative;padding-bottom: 3rem;}
#sabotage img {width: 100%; height: auto;}
#sabotage a.paris {position: absolute; top:7%; right: 7%; width: 30%; padding-bottom: 25%; opacity: 0.5; background: transparent;}
#sabotage a.phone {position: absolute; top:45%; right: 5%; width: 90%; padding-bottom: 20%; opacity: 0.5; background: transparent;}


#corporate-officers {padding-bottom: 3rem; text-align: center;}
#corporate-officers img {width: 100%; height: auto; display: inline-block; padding-bottom: 5%;}

#corporate-officers img.corp1 {width: 50%;padding-top: 5%;}
#corporate-officers img.corp2 {width: 60%;}
#corporate-officers img.corp3 {width: 90%;}
#corporate-officers img.corp4 {width: 50%;}
#corporate-officers img.corp5 {width: 55%;}
#corporate-officers img.corp6 {width: 90%;}
#corporate-officers img.corp7 {width: 60%;}
#corporate-officers img.corp8 {width: 75%;}
#corporate-officers img.corp9 {width: 75%;}
#corporate-officers img.corp10 {width: 40%;}
#corporate-officers img.corp11 {width: 60%;}
#corporate-officers img.corp12 {width: 60%;}
#corporate-officers img.corp13 {width: 80%;}
#corporate-officers img.corp14 {width: 80%;}
#corporate-officers img.corp15 {width: 80%;}
#corporate-officers img.corp16 {width: 80%;}


#survival {min-height: 100svh; padding-bottom: 3rem; background: #2DC758; padding-top: 3rem; text-align: center;}
#survival img {width: 100%; height: auto; display: inline-block;}
#survival img.g60 {width: 95%;}
#survival img.life-after {width: 75%; padding-top: 3rem; padding-bottom: 3rem;}
#survival img.What, #survival img.there {width: 95%;}
#survival .nature {width: 95%; padding-left: 2.5%; padding-top: 3rem; position: relative; padding-bottom: 3rem;}
#survival .nature a {position: absolute; bottom: 10%; padding-bottom: 15%; background: transparent; width: 15%; left: 42.5%; opacity: 0.5}

#survival img.hunt {width: 95%; padding-bottom: 3rem;}
#survival .g61 {width: 90%; padding-left: 5%; position: relative;}
#survival .g61 a {position: absolute; top: 66.5%; left: 37%; width: 31.5%; padding-bottom: 40%; background: transparent; opacity: 0.5;}

#survival img.there {padding-top: 3rem; padding-bottom: 3rem;}
#survival img.imgsurv {width: 70%; padding-bottom: 3rem;}

#revelation {background:#FFE500; min-height: 100svh; padding-bottom: 3rem;}
#revelation img {width: 100%; height: auto;}

#revelation .rewrapper {position: relative; }
#revelation a {position: absolute; opacity: 0.5;}

#revelation a.revelation1 {top:3%; left: 7%; width: 10%; padding-bottom: 8%; background: transparent; opacity: 0.5}
#revelation a.revelation2 {top:19%; right: 11.5%; width: 18%; padding-bottom: 5%; background: transparent; opacity: 0.5}
#revelation a.revelation3 {top:30.5%; right: 10%; width: 20%; padding-bottom: 5%; background: transparent; opacity: 0.5}
#revelation a.revelation4 {top:47.5%; right: 11.5%; width: 18%; padding-bottom: 5%; background: transparent; opacity: 0.5}
#revelation a.revelation5 {top:72.75%; right: 11%; width: 19%; padding-bottom: 5%; background: transparent; opacity: 0.5}


#frogmen {background:#03C3FF; min-height:100svh;position: relative;}
#frogmen .frogmen {border-radius: 500px; max-height: 70%; max-width: 70%; width: auto; height: auto; position: absolute;left: 50%;top: 45%; -webkit-transform: translate(-50%, -50%);transform: translate(-50%, -50%);}
#frogmen .notwho { position: absolute;left: 50%;top: 70%; -webkit-transform: translate(-50%, -50%);transform: translate(-50%, -50%); width: 80%;}


#its-over {min-height:100svh;  position: relative;}
#its-over img {width: 90%; height: auto;position: absolute;left: 50%;top: 45%; -webkit-transform: translate(-50%, -50%);transform: translate(-50%, -50%);}



#chaos {background-size: cover; background-position: center center; height: 100svh; width: 100%;}
#chaos .chaosrel {position: absolute;left: 50%;top: 50%; -webkit-transform: translate(-50%, -50%);transform: translate(-50%, -50%); width: 95%;}
#chaos .chaosrel img {width: 100%; height: auto;}
#chaos .chaosrel a.chaos1 {position: absolute; top: 19%; left: 10.5%; width: 26.5%; padding-bottom: 5%; background: transparent; opacity: 0.5}
#chaos .chaosrel a.chaos2 {position: absolute; bottom: 0; right: 40%; width: 20%; padding-bottom: 4%; background: transparent; opacity: 0.5}



#diiv-not-cool {text-align: center; padding-top: 3rem; width: 85%; padding-left: 7.5%; padding-right: 7.5%; padding-bottom: 3rem;}
#diiv-not-cool img {width: 100%; height: auto; display: inline-block;}
#diiv-not-cool .obvious {position: relative;}
#diiv-not-cool .obvious a {position: absolute; top:50%; left: 0; width: 30%; padding-bottom: 4.5%; background: transparent; opacity: 0.5;}

#diiv-not-cool .suspicious {position: relative; padding-top: 5%; padding-bottom: 5%;}
#diiv-not-cool .suspicious a {position: absolute; top:51.5%; right: 0; width: 51%; padding-bottom: 34%; background: transparent; opacity: 0.5;}

#diiv-not-cool .join {padding: 1rem 0 3rem; display: inline-block;}

#frog-hell {background-size: cover; background-position: center center; height: 100svh; width: 100%; position: relative;}

#frog-hell .huh {position: absolute; bottom: 4rem; right: 0; width: 40%;}

#frog-hell .clicker {position: absolute; top: 5%; left: 5%; width: 30%; padding-bottom: 20%; background: transparent;}

#fourth-wall {height: calc(100svh - 4rem); background: #000;}
#fourth-wall img {height: 100%; width: auto;}


#random {background: #E49700; padding-top: 4%; position: relative;}
#random img {width: 100%; height: auto;}
#random a.randoml1 {position: absolute; top: 18%; left: 22%; width: 20%; padding-bottom: 15%; background: transparent; opacity: 0.5;}
#random a.randoml2 {position: absolute; top: 6%; right: 10%; width: 13%; padding-bottom: 7%; background: transparent; opacity: 0.5;}
#random a.randoml3 {position: absolute; top: 19.5%; right: 3.5%; width: 39%; padding-bottom: 30%; background: transparent; opacity: 0.5;}
#random .ein {width: 80%; padding: 5% 10%;}
#random .tri {width: 75%; padding: 0 12.5%;}
#random .scr {width: 60%; padding: 5% 20% 10%; }

#new-age {background: #B16CF5; min-height: 100svh;}
#new-age img {width: 100%; height: auto;}

#new-age .new-age-new {width: 90%; padding: 5% 5%; position: relative;}
#new-age a.new-age-l1 {position: absolute; bottom:10%; right: 20%; width: 22%; padding-bottom: 5%; background: transparent; opacity: 0.5}
#new-age a.new-age-l2 {position: absolute; bottom:27%; left: 11%; width: 14%; padding-bottom: 10%; background: transparent; opacity: 0.5}

#new-age .scr1, #new-age .scr2, #new-age .scr3 {position: relative;}
#new-age .scr1 {width: 80%; padding: 0 10% 5%; }
#new-age .scr2 {width: 50%; padding: 5% 25% 10%; }
#new-age .scr3 {width: 30%; padding: 0 5% 10% 65%;}

#new-age .scr1 a {position: absolute; bottom:50%; left: 46%; width: 14%; padding-bottom: 5%; background: transparent; opacity: 0.5}

#new-age .scr2 a.over {position: absolute; top:32%; left: 35%; width: 7%; padding-bottom: 5%; background: transparent; opacity: 0.5}
#new-age .scr2 a.p3 {position: absolute; top:32%; right: 37%; width: 7%; padding-bottom: 5%; background: transparent; opacity: 0.5}


#ashcroft {}
#ashcroft img {width: 100%; height: auto; padding-bottom: 3rem}

#khashoggi {padding-bottom: 4rem;}
#khashoggi a {display: flex;}
#khashoggi a img {width: 50%; height: auto;}

#clintons {height: calc(100svh - 3.8rem); position: relative; width: 100%; background: #000;}
#clintons .clit {position: absolute; right: 0; top: 0; height: 100%;}
#clintons .clit img {height: 100%; width: auto;}
#clintons .clithid {position: absolute; top: 48%; left: 44%; -webkit-transform: translate(-50%, -50%);transform: translate(-50%, -50%); z-index: 9999}
#clintons .badguy {height: calc( 100% - 4rem); width: auto; z-index: 999; position: absolute; left: 2%; top:2%;}

#hidden-message {font-family: Inter;
font-size: 2rem;
line-height: 1.2em;
font-style: normal;
font-weight: 400;}
#hidden-message a {text-decoration: none; color: #000;}
#hidden-message a p + p {padding-top: 1.2em;}
#hidden-message img {width: 70%; padding: 5% 15% 15%;}


#stockholm {position: relative; padding-bottom: 3.7rem}
#stockholm .youcan {position: absolute; top:50%; right: 0; width: 75%;}


#bad-aachen {position: relative; height: calc(100svh - 3.5rem); background-size: cover; background-position: center center; width: 100%;}
#bad-aachen .youcan {position: absolute; top:2%; left: 2%; height: 90%;}


#daydream {position: relative; height: calc(100svh - 3.5rem); background-size: contain; background-position: left top; width: 100%; background-repeat: no-repeat;}

#daydream img {height: 32%; position: absolute; top: 27%; max-width: 100%;}

#tumbleweed-soul-net-grift { display:flex; padding-bottom:5rem; }
#tumbleweed-soul-net-grift a {width: 50%;}
#tumbleweed-soul-net-grift img {width: 100%; height: auto;}

#fuck-GWB { display:flex; padding-bottom:5rem; }
#fuck-GWB a {width: 50%; box-sizing: border-box;}
#fuck-GWB img {width: 100%; height: auto;}
#fuck-GWB a:first-child {padding-left: 10%;}

#fuck-diiv {background-size: cover; background-repeat: no-repeat; background-position: center right; position: relative; height: calc(100svh - 3rem);}
#fuck-diiv .fuck {padding: 2.5%; background: white; border-radius: 50px; height: 80%; display: inline-block; position: absolute; left: 5%; top: 5%; max-width: 80%;}

#fuck-diiv .bailey {position: absolute; top: 25%; right: 35%; z-index: 999;}


#fuck-diiv .fuck img {height: 100%; width: auto; max-width: 100%; max-height: 100%;}

#bailey-hands {background-size: cover; background-repeat: no-repeat; background-position: center center; position: relative; height: calc(100svh - 3rem);}
#bailey-hands a {width: 100%; height: 100%; display: block;}

#absurdity {background-size: cover; background-repeat: no-repeat; background-position: center center; position: relative; height: calc(100svh - 3rem);}
#absurdity img {position: absolute; width: 90%; bottom: 5%; left: 2%;}

#frogmorph { height: calc(100svh - 3rem); position: relative;}
#frogmorph .vidwrap video {width: auto; height: 100svh; position:absolute; top: 48%; left: 50%; -webkit-transform: translate(-50%, -50%);transform: translate(-50%, -50%);}

#fader {position: relative;}
#fader img {width: 100%; height: auto;}
#fader a {position: absolute;}

#fader p.fader-l1 {position: absolute;top:4%; left: 5%; width: 25%; padding-bottom: 12%; background: transparent; opacity: 0.5}
a.fader-l1-image {position: fixed; top: 5%; left: 15%; width: 70%; z-index: 99; height: 70%; display: none;}
#fader p.fader-l1:hover + a.fader-l1-image, a.fader-l1-image:hover {display: block;}

#fader a.fader-l2 {top:8%; right: 8%; width: 29%; padding-bottom: 30%; background: transparent; opacity: 0.5}

#fader p.fader-l3 {position: absolute;top:58%; right: 7.5%; width: 9%; padding-bottom: 8%; background: transparent; opacity: 0.5; display: block;}
#fader p.fader-l3:hover + .fader-l3-image {display: block;}
.fader-l3-image {position: fixed; top: 5%; left: 15%; width: 70%; z-index: 99; height: 70%; display: none;}

#fader a.fader-l4 {top:64%; right: 11.5%; width: 37%; padding-bottom: 38%; background: transparent; opacity: 0.5}
#fader a.fader-l5 {top:89%; left: 1%; width: 80.5%; padding-bottom: 15%; background: transparent; opacity: 0.5}


#bestcopy {background-size: contain; background-repeat: no-repeat; background-position: center center; position: relative; height: calc(100svh - 3rem); width: 100%;}

#bestcopy a.middle {position:absolute; top: 48%; left: 50%; -webkit-transform: translate(-50%, -50%);transform: translate(-50%, -50%); text-align:center; }
#bestcopy a.middle img {width: 25%;}

#bestcopy a.p3 {width: 100%; height: 100%; position: absolute;}

#frame-28 {background-size: cover; background-repeat: no-repeat; background-position: center center; position: relative; height: calc(100svh - 3rem); width: 100%;}

#frame-28 a {width: 100%; height: 100%;}

#bryans-links {font-family: "Arial Black"; padding:2rem 2rem 8rem;}
#bryans-links img {width: 80%; padding-bottom: 3rem;}
#bryans-links a {color: black; text-decoration: underline; margin-bottom: 2rem; display: inline-block;}

#bumpersticker {position: relative; width: 100%; padding-bottom: 3.8rem}
#bumpersticker img.bump {width: 100%; height: auto;}
#bumpersticker a.bumpersticker1 {position: absolute;bottom:33.4%; right: 44%; width: 27%; padding-bottom: 8%; background: transparent; opacity: 0.5; display: block;}
#bumpersticker a.bumpersticker2 {position: absolute;bottom:8.5%; right: 1%; width: 31%; padding-bottom: 20.5%; background: transparent; opacity: 0.5; display: block;}


#anonymous-vid {background-size: cover; background-repeat: no-repeat; background-position: center center; position: relative; height: calc(100svh - 3rem); width: 100%;}

#anonymous-vid .vidwrap {width: 80%; position:absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%);transform: translate(-50%, -50%); }
#anonymous-vid .vidwrap video {width: 100%; height: auto;}

#not-for-sale {position: relative; width: 100%; padding-bottom: 3.8rem;}
#not-for-sale .img {width: 100%; height: auto;}
#not-for-sale .scr {position: absolute; bottom: 15%; left: 1%; width: 31%; background: transparent; display: block;}
#not-for-sale .hello {position: absolute; bottom: 15%; right:3%; width: 38%; background: transparent; opacity: 0.5; display: block; padding-bottom: 25%;}

#zuck {background: black; height: calc(100svh - 3.8rem); position: relative;}
#zuck img {width: 100%; height: auto;}
#zuck .zuckclip {max-height: 100svh; overflow: hidden;}
#zuck .fuck {width: 55%; position: absolute; top: 0; right: 0; mix-blend-mode: multiply;}
#zuck .phoebelaugh {position: absolute; top: 20%; left: 35%; width: 21%; background: transparent;  padding-bottom: 30%; opacity: 0.5; display: block; z-index: 99}

#phoebelaugh {position: relative; height: calc(100svh - 4rem); overflow:hidden; background: black;}
#phoebelaugh img {width: 100%; height: auto;}

#phoebelaugh .main {height: calc(100svh - 4rem); overflow:hidden;}

#phoebelaugh .phoebelaugh1 {width: 35%;position: absolute; bottom: 7%; left: 15%;max-height: 400px; }
#phoebelaugh .phoebelaugh1 img {width: auto; height: auto; max-width: 100%; max-height: 100%;}
#phoebelaugh .phoebelaugh2 {width: 25%;position: absolute; bottom: 7%; right: 5%; max-height: 400px; overflow: hidden;}
#phoebelaugh .phoebelaugh2 img {width: auto; height: auto; max-width: 100%; max-height: 100%;}

#pelosihandscolinarabic {position: relative; height: calc(100svh - 4rem); overflow:hidden; width: 100%;}
#pelosihandscolinarabic img {width: 100%; height: auto;}
#pelosihandscolinarabic img.numbers {width: 80%;}

#pelosihandscolinarabic .pelosihover {width: 40%; position:absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%);transform: translate(-50%, -50%); z-index: 999;}
#pelosihandscolinarabic .pelosileave {position:absolute; bottom: 1%; right: 1%;}

#pelosihandscolinarabic .playing {opacity: 0;}

.pelosivideo {width: 50%; position:absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%);transform: translate(-50%, -50%);}
.pelosivideo video {width: 100%; height: auto;}

#diiv-are-your-enemies {position: relative; background: black; height: calc(100svh - 4rem);}
#diiv-are-your-enemies img {width: 100%; height: auto;}

#diiv-are-your-enemies .main {position: relative;}
#diiv-are-your-enemies .true {position: absolute; top: 4%; left: 30%; width: 40%;}

#diiv-are-your-enemies .hoveraiter {position: absolute; bottom: 2%; right: 1%; width: 10%; padding-bottom: 25%; background: transparent;}

#diiv-are-your-enemies .darkcole {width: 60%; position:absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%);transform: translate(-50%, -50%); display: none;}

#bidennetanyahu {background-size: cover; background-position: center center; height: 100svh; width: 100%; position: relative;}

#bidennetanyahu img {width: 100%; height: auto;}

#bidennetanyahu .bidennetanyahu1 {position: absolute; top: 22.5%; left: 5%; width: 55%;}
#bidennetanyahu .bidennetanyahu2 {position: absolute; top: 15%; right: 3%; width: 25%;}
#bidennetanyahu .bidennetanyahu3 {position: absolute; bottom: 12%; right: 1%; width: 20%;}
#bidennetanyahu .bidennetanyahu4 {width: 75%; position:absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%);transform: translate(-50%, -50%); display: none;}

#mugshot {background-size: cover; background-position: center center; height: 100svh; width: 100%; position: relative;}
#mugshot img {width: 100%; height: auto;}
#mugshot .join {position: absolute; top: 0; right: 0; width: 70%;}
#mugshot .cole {width: 40%;  position:absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%);transform: translate(-50%, -50%);}
#mugshot .cole .sadcole {}

#mugshot .cole .happycole {position: absolute; top: 0; left: 0; display: none}
#mugshot .cole .sadcole:hover + .happycole, .happycole:hover {display: block;}

#genius-test, #genius-test-answers {padding-bottom: 3.5rem; position: relative;}
#genius-test img, #genius-test-answers img {width: 100%; height: auto;}

#genius-test .answers {position: absolute; top: 27%; left: 7%; width: 34%; padding-bottom: 10%; background: transparent; opacity: 0.5}

#genius-test .splash, #genius-test-answers .splash  {position: absolute; top: 34%; right: 0; width: 23%; padding-bottom: 27%; background: transparent; opacity: 0.5}

#splash-mountain {position: relative;}
#splash-mountain img {width: 100%; height: auto;}

#splash-mountain a {position: absolute; top: 19%; right: 11%; width: 34%; padding-bottom: 30%; background: transparent; opacity: 0.5}


#exposing-soul-net {background-size: cover; background-position: center center;  width: 100%; position: relative; height: 100%;display: flex; padding-bottom: 4rem;}
#exposing-soul-net img {width: 100%; height: auto;}
#exposing-soul-net .sidewrapper {display: flex; padding: 1rem; }
#exposing-soul-net .sidewrapper > div {width: 50%; position: relative;}
#exposing-soul-net a.p1 {position: absolute; top: 53%; left: 0; width: 34%; padding-bottom: 28%; background: transparent; opacity: 0.5}
#exposing-soul-net a.p1ag {position: absolute; top: 75%; left: 0; width: 34%; padding-bottom: 33%; background: transparent; opacity: 0.5}
#exposing-soul-net a.askabtme {position: absolute; bottom: 1%; right: 20%; width: 40%; padding-bottom: 23%; background: transparent; opacity: 0.5}
#exposing-soul-net a.survival {position: absolute; top: 9%; right: 20%; width: 40%; padding-bottom: 33%; background: transparent; opacity: 0.5}

#askabtme {padding-bottom: 3.7rem;}
#askabtme img {display: block; width: 100%; height: auto;}

#exposing-soul-net-pt2 {background-size: cover; background-position: center center;  width: 100%; position: relative; height: 100%;display: flex; padding-bottom: 4rem;}
#exposing-soul-net-pt2 img {width: 100%; height: auto;}
#exposing-soul-net-pt2 .sidewrapper {position: relative;}
#exposing-soul-net-pt2 a.p-3-1 {position: absolute; bottom: 5%; left: 1%; width: 18%; padding-bottom: 20%; background: transparent; opacity: 0.5}
#exposing-soul-net-pt2 a.internal {position: absolute; bottom: 3%; right: 0; width: 12%; padding-bottom: 12%; background: transparent; opacity: 0.5}

#fibw-internal-memo {position: relative;}
#fibw-internal-memo img {width: 100%; height: auto;}
#fibw-internal-memo .fibwhover {position: absolute; top: 3%; right: 0; width: 24%; padding-bottom: 20%; background: purple; opacity: 0.5}
.fibwvideo {width: 60%; position:fixed; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%);transform: translate(-50%, -50%); z-index: 999; display: none;}
.fibwvideo video {width: 100%; height: auto;}






@media only screen and (max-width: 800px) {
  .home a {max-width: 50%;display:inline-block; }
  .blur h1 {font-size: 2.5rem;}
  .blur h1 span {filter: blur(1.5px);}
  .blur p {font-size: 1rem;filter: blur(1px);}
  #p-1, #p-1-1, #p-1-2, #p-2, #p-3, #p-3-1, #p-3-2 {padding-bottom: 3.85rem;}
  #p-3-2 {height: calc(100svh - 3.85rem); padding-bottom: 3.85rem; position: relative;}
  #p-3-2 img {min-height: 100svh;}
  #ai-faces {height: calc(100svh - 3.85rem);}
  #animal-friends, #eye, #eye .eye-video video, #eye .eye-video img {height: calc(100svh - 3.85rem);}
  #khashoggi a, #tumbleweed-soul-net-grift, #fuck-GWB {display: flex; flex-wrap: wrap;}
  #khashoggi a img, #tumbleweed-soul-net-grift a, #fuck-GWB a {width: 100%; height: auto;}
}







@media only screen and (max-width: 600px) {
  #play-icon {font-size: 30px;}
  input[type="range"]::-webkit-slider-thumb {font-size: 30px;}
  input[type="range"]::-moz-range-thumb {font-size: 30px;}
  input[type="range"]::-ms-thumb {font-size: 30px;}
  #volume-controls-controller {display: none;}
}



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

}



body a {cursor: url('cursor/cursor-pointer-20.png'), pointer; cursor: image-set( "cursor/cursor-pointer-20.png" 1x, "cursor/cursor-pointer-80.png" 4x, "cursor/cursor-pointer-160.png" 8x), pointer;}

/* default cursor */
body, body a.hlink {cursor: url('cursor/cursor-20.png'), default; cursor: image-set( "cursor/cursor-20.png" 1x, "cursor/cursor-80.png" 4x, "cursor/cursor-160.png" 8x), default;}

/* pointer cursor */
.mailchimp button, #audio-player-container button, #volume-controls-controller span, .guestform .submit-block button, #audio-player-container input, body.ready a, .chrissyDfrog .screenshot1 .froggie  {cursor: url('cursor/cursor-pointer-20.png'), pointer !important; cursor: image-set( "cursor/cursor-pointer-20.png" 1x, "cursor/cursor-pointer-80.png" 4x, "cursor/cursor-pointer-160.png" 8x), pointer !important; }



input[type="range"]::-webkit-slider-runnable-track {cursor: url('cursor/cursor-pointer-20.png'), pointer; cursor: image-set( "cursor/cursor-pointer-20.png" 1x, "cursor/cursor-pointer-80.png" 4x, "cursor/cursor-pointer-160.png" 8x), pointer; }
input[type="range"]::before {cursor: url('cursor/cursor-pointer-20.png'), pointer; cursor: image-set( "cursor/cursor-pointer-20.png" 1x, "cursor/cursor-pointer-80.png" 4x, "cursor/cursor-pointer-160.png" 8x), pointer; }
input[type="range"]::-webkit-slider-thumb {cursor: url('cursor/cursor-pointer-20.png'), pointer; cursor: image-set( "cursor/cursor-pointer-20.png" 1x, "cursor/cursor-pointer-80.png" 4x, "cursor/cursor-pointer-160.png" 8x), pointer; }
input[type="range"]::-moz-range-track {cursor: url('cursor/cursor-pointer-20.png'), pointer; cursor: image-set( "cursor/cursor-pointer-20.png" 1x, "cursor/cursor-pointer-80.png" 4x, "cursor/cursor-pointer-160.png" 8x), pointer; }
input[type="range"]::-moz-range-thumb {cursor: url('cursor/cursor-pointer-20.png'), pointer; cursor: image-set( "cursor/cursor-pointer-20.png" 1x, "cursor/cursor-pointer-80.png" 4x, "cursor/cursor-pointer-160.png" 8x), pointer; }
input[type="range"]::-ms-thumb {cursor: url('cursor/cursor-pointer-20.png'), pointer; cursor: image-set( "cursor/cursor-pointer-20.png" 1x, "cursor/cursor-pointer-80.png" 4x, "cursor/cursor-pointer-160.png" 8x), pointer; }
.overlay button {cursor: url('cursor/cursor-pointer-20.png'), pointer; cursor: image-set( "cursor/cursor-pointer-20.png" 1x, "cursor/cursor-pointer-80.png" 4x, "cursor/cursor-pointer-160.png" 8x), pointer; }

/* text cursor */
input, textarea {cursor: url('cursor/cursor-text-20.png'), text; cursor: image-set( "cursor/cursor-text-20.png" 1x, "cursor/cursor-text-80.png" 4x, "cursor/cursor-text-160.png" 8x), text !important;}