/* Oh hi there, Nosey Nellie! */
/* (c) Lee Crockford - although this style sheet does utilise many elements of GetSkeleton.com and a range of code snippets from across the web. Obvs the copyright of those elements remain with the original creators.  */

/* Reset
–––––––––––––––––––––––––––––––––––––––––––––––––– */

html, body {margin: 0; padding: 0; height: 100%; width: 100%;}
html { -webkit-box-sizing: border-box; box-sizing: border-box; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; background: #25252d; }
body { margin: 0; font: 16px/1 sans-serif; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; font-weight: 400; font-family: "Lato", "HelveticaNeue", Helvetica, Arial, sans-serif; color: #fff; }
*, *:before, *:after { -webkit-box-sizing: border-box; box-sizing: border-box; }
::-moz-focus-inner { padding: 0; border: 0; }
::-moz-selection { background: #9edfd1; color: #25252d; }
::selection { background: #9edfd1 ; color: #25252d;}
img { max-width: 100%; height: auto; border: 0; }
h1, h2, h3, h4, p, blockquote, figure, ol, ul { margin: 0; padding: 0;}
h1, h2, h3, h4 { font-size: inherit; }

/* System & Layout
–––––––––––––––––––––––––––––––––––––––––––––––––– */

main, li { display: block; }
* { -webkit-transition: all .5s; -o-transition: all .5s; transition: all .5s; }
button { overflow: visible; border: 0; font: inherit; -webkit-font-smoothing: inherit; letter-spacing: inherit; background: none; cursor: pointer; }
p, ul li, th, td, label, legend {margin: 1rem 0; line-height: 1.5; padding-bottom: .5rem; font-size: .9rem;}
h1, h2, h3 { font-weight: 600; }
h1, h2 { font-family: "Montserrat", "HelveticaNeue", Helvetica, Arial, sans-serif; margin-bottom: 1.5rem; font-weight: 500; }
h1 { font-size: 2.0rem; }
h2 { font-size: 1.6rem; }
h3 { font-size: 1.4rem;  }
a { color: #398bce;  text-decoration: none; font-weight: 700; }
a:hover { color: #8e9092; }
ul { list-style: circle inside; }
ol { list-style: decimal inside; }
ol, ul { padding-left: 0; margin-top: 0; }
ul ul, ul ol, ol ol, ol ul { margin: 1.5rem 0 1.5rem 3rem; font-size: 90%; }
li { margin-bottom: 0; display: list-item;}
.custom-list { list-style: none; padding-left: 0;}
.custom-list li { position: relative; margin-left: 1rem; padding-left: 1.5rem;  padding-bottom: 0; }
.custom-list li:before { content: ''; width: .7rem; height: .7rem; position: absolute; background-image: url('/images/dot-citrus.svg'); background-size: cover; background-position: center; left: 0; top: 50%; transform: translateY(-50%); }
.caption {  font-family: 'Playfair Display', serif; font-style: italic; color: #fff}

code { padding: .2rem .5rem; margin: 0 .2rem; font-size: 90%; white-space: nowrap; background: #f9f9f9; border: 1px solid #f6f6f6; border-radius: .5rem; }
pre > code { display: block; padding: 1rem 1.5rem; white-space: pre; }
table { border-collapse: collapse; }
th, td { padding: 1.5rem .5rem;} 
td:first-of-type {font-weight: 700;}
th {border-bottom: 3px solid #398bce;}
.totals { border-top: 1px solid #c6c7c9;} 

.container { position: relative; width: 95%; margin-left: 2%; /*background: rgba(255,0,0,.25)*/;}
.container:after { content: ""; display: table; clear: both; }
/*.wow { visibility: hidden; }*/
.split {height: 6rem; }
.center {text-align: center; }
.left {text-align: left; }
.right {text-align: right; }
.float-right { float: right; }
.float-left { float: left; }
.relative {position: relative; }
.absolute {position: absolute; }
strong { font-weight: 700;}
hr { margin-top: 3rem; margin-bottom: 3.5rem; border-width: 0; border-top: .5px solid #c6c7c9; width:85%; margin-left: 15%;} 

.is-fullheight { min-height: 100vh; }
.is-80height { min-height: 80vh; }
.is-halfheight { min-height: 50vh; }
.grid { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; }
.grid-item { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; margin: .5rem; padding: 1rem; }
.grid .grid-item .grid  { margin: 0; padding: 0 .5rem; }
.grid .grid-item .grid .grid-item {margin: 0; padding: 0 .5rem; }
.is-top { -ms-flex-item-align: start; align-self: flex-start; }
.is-bottom { -ms-flex-item-align: end; align-self: flex-end; }
.is-left {justify-content: left;}
.is-middle { -ms-flex-item-align: center; align-self: center;  -webkit-box-align: center;  -ms-flex-align: center;  align-items: center; }
.is-middle-and-fullheight { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }
.is-half { -webkit-box-flex: 0; -ms-flex: 0 0 50%; flex: 0 0 50%; }
.is-third { -webkit-box-flex: 0; -ms-flex: 0 0 33.3333%; flex: 0 0 33.3333%; }
.is-quarter { -webkit-box-flex: 0; -ms-flex: 0 0 25%; flex: 0 0 25%; }
.is-fifth { -webkit-box-flex: 0; -ms-flex: 0 0 20%; flex: 0 0 20%; }
.is-15th { -webkit-box-flex: 0; -ms-flex: 0 0 15%; flex: 0 0 15%; }
.is-tenth { -webkit-box-flex: 0; -ms-flex: 0 0 10%; flex: 0 0 10%; }

.u-halfwidth {width: 50%; }
.u-fullwidth { width: 100%; }
.u-thirdwidth { width: 33.3333333333%; }
.u-quarterwidth { width: 25%; }
.is-night {background: #25252d; color: #fff;}

.i-5 {width: 5%}
.i-10 {width: 10%}
.i-15 {width: 15%}
.i-20 {width: 20%}
.i-25 {width: 25%}
.i-33 {width: 33%}
.i-50 {width: 50%}
.i-66 {width: 66%}
.i-75 {width: 75%}
.i-80 {width: 80%}
.i-85 {width: 85%}

/* Buttons & Forms
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.button, button, input[type="submit"], input[type="reset"], input[type="button"] { display: inline-block; height: auto; padding: 0 2rem; color: #2a2a2a; text-align: center; font-size: 1rem; line-height: 3.4;text-decoration: none; white-space: nowrap; background-color: transparent; border:none; cursor: pointer; }
.button:hover, button:hover, input[type="submit"]:hover, input[type="reset"]:hover, input[type="button"]:hover, .button:focus, button:focus, input[type="submit"]:focus, input[type="reset"]:focus, input[type="button"]:focus { color: #333; border-color: #eee; outline: 0; }
.button.button-primary, button.button-primary, input[type="submit"].button-primary, input[type="reset"].button-primary, input[type="button"].button-primary { color: #FFF; background-color: #33C3F0; border-color: #33C3F0; }
.button.button-primary:hover, button.button-primary:hover, input[type="submit"].button-primary:hover, input[type="reset"].button-primary:hover, input[type="button"].button-primary:hover, .button.button-primary:focus, button.button-primary:focus, input[type="submit"].button-primary:focus, input[type="reset"].button-primary:focus, input[type="button"].button-primary:focus { color: #FFF; background-color: #1EAEDB; border-color: #1EAEDB; }
input, textarea, select, fieldset { margin-bottom: 1.5rem; font-family: "Lato", sans-serif;}
input[type="email"], input[type="number"], input[type="search"], input[type="text"], input[type="tel"], input[type="url"], input[type="password"], textarea, select { color: #fff; width: 100%; padding: 1.5rem 1rem 1rem; background-color: #3c3c47; border:none; border-bottom: 3px solid #3c3c47; box-shadow: none; font-size: .8rem; line-height: 1.5;}
input[type="email"], input[type="number"], input[type="search"], input[type="text"], input[type="tel"], input[type="url"], input[type="password"], textarea { -webkit-appearance: none; -moz-appearance: none; appearance: none; }  
input[type="email"]:focus, input[type="number"]:focus, input[type="search"]:focus, input[type="text"]:focus, input[type="tel"]:focus, input[type="url"]:focus, input[type="password"]:focus, textarea:focus, select:focus { border-bottom: 3px solid #398bce; outline: 0; }
input[type="text"], input[type="email"] {width: 66%}
textarea { min-height: 7rem; padding-top: 1rem; padding-bottom: 1rem; }

fieldset { padding: 0; border-width: 0; }
input[type="checkbox"], input[type="radio"] { display: inline; } 
label > .label-paragraph { display: inline-block; margin-left: .5rem; font-weight: normal; }
.input-checkbox { width: 2rem; height: 2rem; position: relative; margin: 0 1.5rem; background:none; }
.input-checkbox label { width: 2rem; height: 2rem; position: absolute; cursor: pointer; background: #fff; top: 0; border: .2px solid #c6c7c9; }
.input-checkbox label:after { content: ''; width: 1rem; height: .5rem; position: absolute; top: .65rem; left: .5rem; border: 3px solid #398bce;   border-top: none;   border-right: none;   background: transparent; opacity: 0; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); transition: all .3s; }
.input-checkbox label:hover::after { opacity: 0.2; }
.input-checkbox input[type=checkbox] { visibility: hidden; }
.input-checkbox input[type=checkbox]:checked + label:after { opacity: 1; }

.input-slider { -webkit-appearance: none; width: 50%; height: .5px; border-radius: .5rem; background: rgba(28,33,38,.25); outline: none; }
.input-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 1.25rem; height: 1.25rem; border-radius: 50%; background: #398bce; cursor: pointer; }
.input-slider::-moz-range-thumb { width: 1.25rem; height: 1.25rem; border-radius: 50%; background: #398bce; cursor: pointer; }
.input-slider::-moz-range-thumb:hover, .slider::-webkit-slider-thumb { width: 1.5rem; height: 1.5rem; }

.input-select { position: relative; height: 3rem; background: #fff; box-shadow: none; border: .25px solid #c6c7c9; }
.input-select:after { content: ''; position: absolute; top: 0; width: 0; height: 0; right: 10px; bottom: 0; margin: auto; border-style: solid; border-width: 5px 5px 0 5px; border-color: red transparent transparent transparent; pointer-events: none;}
.input-select:before { width: 30px; position: absolute; top: 1px; right: 1px; bottom: 1px; background: #fff; content: ''; pointer-events: none; }
.input-select select { font-size: 14px; border: none; box-shadow: none; border-radius: 0; background: transparent; height: 100%; width: 100%; cursor: pointer; outline: none; padding-right: 35px; padding-left: 15px; moz-appearance: none; -webkit-appearance:none;}
.input-select select:-moz-focusring { color: transparent; text-shadow: 0 0 0 #000; }
.input-select select::-ms-expand { display: none; }
.input-select select:focus { border-color: #c6c7c9; }

.popup { width: 100%; background: #fff; box-shadow: 0 0 1rem rgba(28,33,38,.05); padding: 2rem 1rem; }

form {padding: 2rem 2rem 0;}

/* Custom Universal
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.opacity-half {opacity: .5;}
.opacity-full {opacity: 1;}
.d-hide {display: none; }
.background {} /*This is a place holder. Technically it does nothing, until accessibility is clicked. Don't remove from HTML, even though it looks redundant)*/
.no-border {border:none !important;}
.test {background: rgba(255,0,0,.5); }
.is-icon { -webkit-box-flex: 0; -ms-flex: 0 0 5%; flex: 0 0 5%; }
.glyph {margin-right: 0rem; width: 1rem;}
p .glyph {margin: 0rem .5rem; width: .8rem;}
.arrow-right:hover {margin-right: -.25rem;}
.arrow-down:hover {margin-bottom: -.25rem;}
.swatch {width: 1.5rem;}
.big-letter {font-size: 2rem; margin-left: 1rem;}
.image-2-1 { width: 100%; padding-top: 50%; overflow: hidden; position: relative; }
.image-2-1 img, .image-2-1 video {width: 100%; height: auto; margin: auto; position: absolute; top: -100%; right: -100%; bottom: -100%; left: -100%; }
img + .caption, iframe + .caption, .image-2-1 + .caption {margin: 2px 0 0 0; font-size: .7rem; text-align: right;}
a:hover svg {cursor: pointer;}
.text-div {padding-bottom: 0; padding-top: 0;margin-bottom: 0; margin-top: 0; }
.bookmark {width: 15vw; align-content: left; }
.bookmark p {font-family: "Playfair Display", serif; font-style: italic; color: #fff; padding: 0; margin:0; font-size: .9rem}
.bookmark h1 {line-height: 1.1; padding: .5rem 0; margin:0; font-size: 1.5rem;}
.is-night .bookmark p {opacity: 1;}

.line-v-snow {height: 3rem; width: 1px; background: #fff; margin-left: 2rem;}
.line-v-night {height: 3rem; width: 1px; background: #c8c8c8; margin: 0 0 1rem 50%; }
.line-v-citrus {height: 3rem; width: 1px; background: #398bce; margin: 0 0 1rem 50%; }

.more, .previous { color: #fff; font-weight: 400; font-family: "Playfair-Display", serif; font-style:italic; position: relative;}
.more:hover, .previous:hover {color: #c6c7c9;}
.more:after { content: "";   background-image:url(/images/glyphs/g-arrow-right.svg);   background-size: 100% 100%;   display: inline-block; margin-left: 1rem;   height: .8rem;   width:1rem;   transition: all .5s;   position:relative;   }
.more:hover:after { margin-right: -.25rem; margin-left: 1.25rem; }

.previous:before { content: "";   background-image:url(/images/glyphs/g-arrow-left.svg);   background-size: 100% 100%;   display: inline-block; margin-right: 1rem;   height: .8rem;   width:1rem;   transition: all .5s;   position:relative;   }
.previous:hover:before { margin-left: -.25rem; margin-right: 1.25rem; }

iframe {background: #fff;}
video {width: 80%; height: auto; margin: 0; padding:0; }
.youtube { position: relative; overflow: hidden; padding-top: 56.25%; width: 100%; }
.youtube iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }

.push-20 { margin-left: 20%; }
.no-padding {padding: 0 !important;}

.banner {width: 100vw; height: 100vh; overflow-y: hidden; background-image: url('/images/dot-citrus.svg'); background-size: cover;}
.banner img {position: absolute; width: 100%;}

/* Accessibility */
#a-toggle {position: fixed; bottom: 1rem; left: 0; z-index: 1000; background: #fff; color: #25252d; padding: .5rem 1rem .5rem 2rem;}
#a-toggle a {color: #25252d;}
.a-white {background: #fff !important;}
.a-black {color: #000 !important; opacity: 1 !important;}
.a-link {color: #0000ff !important; text-decoration: underline !important; }
.a-1rem {font-size: 1.3rem !important;}
.a-2rem {font-size: 2rem !important;}
.a-3rem {font-size: 3rem !important;}
.a-hamburger, .a-hamburger::before, .a-hamburger::after  {background-color: #000 !important;}
.a-field {border: 2px solid #000 !important; }
.a-button {color: #fff !important; background: #0000ff !important; font-size: 1.5rem !important; }

.citrus-text {color: #398bce}
.citrus {background: #398bce;}
.citrus a {opacity: .5}
.citrus h1, .citrus h2, .citrus h3, .citrus p, .citrus a,  .citrus .more, .citrus label {color: #fff; opacity: 1}
.citrus .more:after { background-image:url(/images/glyphs/g-arrow-right-snow.svg); }

.sky {background: #435ddd;}
.sky h1, .sky h2, .sky h3,  .sky a,  .sky .more {color: #9edfd1; opacity: 1}
.sky p, .sky .caption {color: #fff;}
.sky .more:after { background-image:url(/images/glyphs/g-arrow-right-snow.svg); }

.pool {background: #9edfd1;} 
.night50 {background: #8e9092;} 

.night {background: #25252d}
.night a {opacity: .5}
.night h1, .night h2, .night h3, .night p, .night a,  .night .more {color: #fff; opacity: 1}
.night .grid , .citrus .grid {padding: 4rem;}
.image-v-center { display: flex;align-items:center; }

.night25 {background: #c6c7c9}
.night25 h1, .night25 h2, .night25 h3, .night25 p, .night25 a,  .night25 .more, .night25 label {color: #fff; opacity: 1}

.citrus50 {background: #398bce; opacity: .5}
.citrus25 {background: #398bce; opacity: .25}

.snow {background: #fff;}
.theme { line-height: 1; font-size: 1.25rem; }
.theme span { display: inline-block; position: relative; }
.theme span:before { content: ""; position: absolute; height: 1px; border-top: 1px solid #c6c7c9; top: .6rem; width: 3rem; }
.theme span:before { right: 100%; margin-right: 1rem; }

.grid .grid-item .grid, .grid .grid-item .grid .grid-item:first-of-type {padding-left: 0;}

.statement {font-size: 1.25rem; font-weight: 700; color: #398bce; }

/* Sections
–––––––––––––––––––––––––––––––––––––––––––––––––– */

#menu-d { position: fixed; z-index: 5000;  width: 100%;}
#menu-d, #menu-d .grid, #menu-d .grid .grid-item  { /*pointer-events: none*/}
#menu-d a{ display: inline-block; position: relative; font-size: .9rem; margin-left: 3rem; color: #fff; pointer-events: auto}
.another-project { margin-left:.5rem !important; font-size: .6rem !important; color: rgba(255,255,255,.5) !important;}
.another-project:hover { color: rgba(255,255,255,1) !important;}
#menu-d a:before { content: ""; position: absolute; border-top: 1.2px solid #398bce; top: .7rem; width: 1.2rem; opacity: 0}
#menu-d a:before { right: 100%; margin-right:1rem; }
#menu-d a.active:before { margin-right:.2rem; opacity:1;}
#menu-d a:hover{ color: #398bce; }
#menu-d a:last-of-type { margin-right: 3vw; }
#menu-d svg { width: 1rem;  margin-left:1rem; }
#menu-d a.active  {color: #398bce;}
#dottur-master #dottur-a { transform-origin: 100px 105px; }
#dottur-master #dottur-b { transform-origin: 100px 340px; }
#dottur-master #dottur-a, #dottur-master #dottur-b  { fill: #fff; transition: all .3s; }
#dottur-master:hover #dottur-a, #dottur-master:hover #dottur-b { fill: #398bce; }
#dottur-master:hover #dottur-a { -webkit-animation: dottur-a-rotate 1.5s ease infinite; -moz-animation: dottur-a-rotate 1.5s ease infinite; -o-animation: dottur-a-rotate 1.5s ease infinite; animation: dottur-a-rotate 1.5s ease infinite; }
#dottur-master:hover #dottur-a-container { -webkit-animation: dottur-a-translate 1.5s ease infinite; -moz-animation: dottur-a-translate 1.5s ease infinite; -o-animation: dottur-a-translate 1.5s ease infinite; animation: dottur-a-translate 1.5s ease infinite; }
#dottur-master:hover #dottur-b { -webkit-animation: dottur-b-rotate 1.5s ease infinite; -moz-animation: dottur-b-rotate 1.5s ease infinite; -o-animation: dottur-b-rotate 1.5s ease infinite; animation: dottur-b-rotate 1.5s ease infinite; }
#dottur-master:hover #dottur-b-container { -webkit-animation: dottur-b-translate 1.5s ease infinite; -moz-animation: dottur-b-translate 1.5s ease infinite; -o-animation: dottur-b-translate 1.5s ease infinite; animation: dottur-b-translate 1.5s ease infinite; }

.google-studio {width: 100%; min-height: 90vh; }
.form {}

/* Showcase */
#home-showcase h2{ color:#8e9092; font-size: 1.2rem}
#home-showcase h2:before {height: 10px; width: 3rem; background: #c8c8c8; margin: 0 0 1rem 50%; }
#home-showcase p:last-of-type { margin-bottom: 0; }
#home-showcase p.caption {padding-bottom: 0;}
#home-showcase, #projects-showcase img:hover { transform: translateY(-.5rem); }
#home-showcase .more { line-height: 1; }

#screenshot-hero img {margin: 0 2vw;}
.timestamp { position: absolute; bottom: -2.8rem; right: 1rem; padding: 1rem 2rem; font-size: .8rem; }
.recording { padding-right: .5em; -webkit-animation: animation-recording 1.5s infinite;   -moz-animation: animation-recording 1.5s infinite;   -o-animation: animation-recording 1.5s  infinite;   animation: animation-recording 1.5s infinite; }

#services .more {padding-bottom: 0; }

#client-grid img {width: 12%; padding: 0; margin: 1%;}

#core-team h2 {margin-bottom: .25rem;}
#core-team h2 + p {margin: 0; padding: 0;}
#core-team .glyph {margin: 0 .25rem; width: .8rem}
#core-team .glyph:hover {opacity: .5}

/* Icons */
.icons img {background: white; margin-left:2rem;}


/* Footer */
footer {border-top: .5px solid #c6c7c9; width: 85%; margin-left:15%;}
footer img {height: 1rem;}
footer p {font-size: .7rem;}
footer a {color: #8e9092; font-weight: 400; font-size: .8rem}
footer a:hover {color: #398bce;}
footer a:hover img {opacity: .5}
footer span {padding: 0 .5rem}
footer .glyph {padding: 0 .25rem; width: 1rem;}
footer .glyph:hover  path {fill: #398bce;}
footer .grid {padding-top: .5rem; padding-bottom: 1rem;}

.social-media { margin: 0 1rem; }
.social-media path {fill: #398bce; transition: all .3s}
.social-media:hover path {fill: #8e9092;}

/* Page Transition*/

@-webkit-keyframes smoothFadeIn { 0% {opacity: 0; }  100% { opacity: 1; } }
@-moz-keyframes smoothFadeIn { 0% {opacity: 0; }  100% { opacity: 1; } }
@-o-keyframes smoothFadeIn { 0% {opacity: 0; }  100% { opacity: 1; } }
@keyframes smoothFadeIn { 0% {opacity: 0; }  100% { opacity: 1; } }

@-webkit-keyframes smoothFadeOut { 0% { opacity: 1; } 100% { opacity: 0; } }
@-moz-keyframes smoothFadeOut { 0% { opacity: 1; } 100% { opacity: 0; } }
@-o-keyframes smoothFadeOut { 0% { opacity: 1; } 100% { opacity: 0; } }
@keyframes smoothFadeOut { 0% { opacity: 1; } 100% { opacity: 0; } }


.m-scene .scene_element, .m-scene .is-exiting { animation-duration: .5s; transition-timing-function: ease-in; animation-fill-mode: both; }
.m-scene .scene_element--fadein { animation-name: smoothFadeIn; }
.m-scene .is-exiting { animation-name: smoothFadeOut; }

/* Animations
–––––––––––––––––––––––––––––––––––––––––––––––––– */

@-webkit-keyframes dottur-a-rotate { 0%, 75%, 100%{ transform: rotate(0deg); } 25%, 59% {transform: rotate(180deg); } }
@-moz-keyframes dottur-a-rotate { 0%, 75%, 100%{ transform: rotate(0deg); } 25%, 59% {transform: rotate(180deg); } }
@-o-keyframes dottur-a-rotate { 0%, 75%, 100%{ transform: rotate(0deg); } 25%, 59% {transform: rotate(180deg); } }
@keyframes dottur-a-rotate { 0%, 75%, 100%{ transform: rotate(0deg); } 25%, 59% {transform: rotate(180deg); } }

@-webkit-keyframes dottur-a-translate { 0%, 100%{ transform: translate(0);} 50% { transform: translate(0,265px);} }
@-moz-keyframes dottur-a-translate { 0%, 100%{ transform: translate(0);} 50% { transform: translate(0,265px);} }
@-o-keyframes dottur-a-translate { 0%, 100%{ transform: translate(0);} 50% { transform: translate(0,265px);} }
@keyframes dottur-a-translate { 0%, 100%{ transform: translate(0);} 50% { transform: translate(0,265px);} }

@-webkit-keyframes dottur-b-rotate { 0%, 75%, 100%{ transform: rotate(0deg); } 25%, 59% {transform: rotate(-180deg); } }
@-moz-keyframes dottur-b-rotate { 0%, 75%, 100%{ transform: rotate(0deg); } 25%, 59% {transform: rotate(-180deg); } }
@-o-keyframes dottur-b-rotate { 0%, 75%, 100%{ transform: rotate(0deg); } 25%, 59% {transform: rotate(-180deg); } }
@keyframes dottur-b-rotate { 0%, 75%, 100%{ transform: rotate(0deg); } 25%, 59% {transform: rotate(-180deg); } }

@-webkit-keyframes dottur-b-translate { 0%, 100% { transform: translate(0);} 50% { transform: translate(0,-240px);} }
@-moz-keyframes dottur-b-translate { 0%, 100% { transform: translate(0);} 50% { transform: translate(0,-240px);} }
@-o-keyframes dottur-b-translate { 0%, 100% { transform: translate(0);} 50% { transform: translate(0,-240px);} }
@keyframes dottur-b-translate { 0%, 100% { transform: translate(0);} 50% { transform: translate(0,-240px);} }

@-webkit-keyframes fancy-dottur-rotate-clockwise { 0%, 100%{ transform: rotate(0deg); } 50% {transform: rotate(360deg); } }
@-moz-keyframes fancy-dottur-rotate-clockwise { 0%, 100%{ transform: rotate(0deg); } 50% {transform: rotate(360deg); } }
@-o-keyframes fancy-dottur-rotate-clockwise { 0%, 100%{ transform: rotate(0deg); } 50% {transform: rotate(360deg); } }
@keyframes fancy-dottur-rotate-clockwise { 0%, 100%{ transform: rotate(0deg); } 50% {transform: rotate(360deg); } }

@-webkit-keyframes fancy-dottur-rotate-anticlockwise { 0%, 100%{ transform: rotate(0deg); } 50% {transform: rotate(-360deg); } }
@-moz-keyframes fancy-dottur-rotate-anticlockwise { 0%, 100%{ transform: rotate(0deg); } 50% {transform: rotate(-360deg); } }
@-o-keyframes fancy-dottur-rotate-anticlockwise { 0%, 100%{ transform: rotate(0deg); } 50% {transform: rotate(-360deg); } }
@keyframes fancy-dottur-rotate-anticlockwise { 0%, 100%{ transform: rotate(0deg); } 50% {transform: rotate(-360deg); } }

.animation-blink { -webkit-animation: animation-blink 2s infinite; animation:  animation-blink 2s infinite; }

@-webkit-keyframes animation-blink { 0%, 100% {opacity: 0;} 50% {opacity: 1;} }
@-moz-keyframes animation-blink { 0%, 100% {opacity: 0;} 50% {opacity: 1;} }
@-o-keyframes animation-blink { 0%, 100% {opacity: 0;} 50% {opacity: 1;} }
@keyframes animation-blink { 0%, 100% {opacity: 0;} 50% {opacity: 1;} }

/* ANIMATION - RECORDING ----- */
@-webkit-keyframes animation-recording { 0%, 100% { opacity: 0; } 50% { opacity: 1;   } }
@-moz-keyframes animation-recording { 0%, 100% { opacity: 0; } 50% { opacity: 1;   } }
@-o-keyframes animation-recording { 0%, 100% { opacity: 0; } 50% { opacity: 1;   } }
@keyframes animation-recording { 0%, 100% { opacity: 0; } 50% { opacity: 1;   } }


/* Mobile  
––––––––––––––––––– */

@media screen and (max-width: 600px) {
	
	.container { width: 95%; padding: 0 3% 0 2%; }
	th, td { padding: 1rem;} 

	.m-center {text-align: center;}
	.m-left {text-align: left;}
	.m-right {text-align: right;}
	.m-hide {display: none;}
	.d-hide {display: block;}

	.m-is-top { -ms-flex-item-align: start; align-self: flex-start; }
	.m-is-middle { -ms-flex-item-align: center; align-self: center;  -webkit-box-align: center;  -ms-flex-align: center;  align-items: center; }
	.m-is-bottom { -ms-flex-item-align: end; align-self: flex-end; }

	.grid-item { -webkit-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; }
	.m-is-half {-webkit-box-flex: 0;-ms-flex: 0 0 44%;flex: 0 0 44%;}
	.m-is-tenth {-webkit-box-flex: 0;-ms-flex: 0 0 9%;flex: 0 0 9%;}
	.m-is-fifth {-webkit-box-flex: 0;-ms-flex: 0 0 18%;flex: 0 0 18%;}
	.m-is-rest {-webkit-box-flex: 0;-ms-flex: 0 0 80%;flex: 0 0 80%;}
	.m-is-third {-webkit-box-flex: 0;-ms-flex: 0 0 29%;flex: 0 0 29%; }
	.m-is-quarter {-webkit-box-flex: 0;-ms-flex: 0 0 21%;flex: 0 0 21%; }
	.m-is-twothirds {-webkit-box-flex: 0;-ms-flex: 0 0 65%;flex: 0 0 65%; }
	.m-is-autoheight { min-height: 10vh; }
	.swatch {width: 2rem; padding-top: .5rem; padding-bottom: .5rem;}

	.m-i-5 {width: 5%}
	.m-i-10 {width: 10%}
	.m-i-15 {width: 15%}
	.m-i-20 {width: 20%}
	.m-i-25 {width: 25%}
	.m-i-33 {width: 33%}
	.m-i-50 {width: 50%}
	.m-i-66 {width: 66%}
	.m-i-75 {width: 75%}
	.m-i-80 {width: 80%}
	.m-i-85 {width: 85%}
	.m-i-100 {width: 100%}

	#hamburger {display: block;}
	#side-bar { left:-40vw; width: 40vw; position: fixed; }
	#brandbook { margin-left: 0; }
	.bookmark {width: 20vw;}
	.bookmark h1 {font-size: 1.25rem;}
	.icons img {margin: .5rem;}
	.accessibility-ratio {margin-left: 0;width: 100%;}
	.accessibility-ratio img { width: 1rem; margin: 0 .25rem; }

	#menu-d {background: #25252d; }
	#menu-d .grid, #menu-d .grid .grid-item {padding:0; margin:0;}
	#menu-d a{ font-size: .8rem; margin-left: 1rem; color: #fff;}
	#menu-d svg { width: .5rem;  margin-left:.5rem; }
	#menu-d a:before { display: none}
	#client-grid img {width: 18%; padding: 0; margin: 1%;}
	footer {width: 100%; margin-left:0;}
	.night .grid , .citrus .grid {padding: 1rem;}
	.timestamp { bottom: -1.8rem; right: 1rem; padding: .5rem 2rem; }

}