html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 62.5%; font: inherit; vertical-align: baseline; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body {line-height:1;} ol, ul {list-style:none;} blockquote, q {quotes:none;} blockquote:before, blockquote:after, q:before, q:after {content:'';content: none;} table {border-collapse:collapse;border-spacing:0;} .group:before, .group:after {content:"";display:table;} .group:after {clear:both;} .group {zoom:1;}

@media screen and (min-width: 500px) {
.col {} .row:after {content: ""; clear: both; display: table;} .col {float: left; width: 100%; box-sizing: border-box;}
}

*, *:after, *:before { box-sizing: border-box; }
html, body { padding 0; margin: 0; background: #231f20; color: #434958; font-family: -apple-system, "Helvetica Neue", Helvetica, "Segoe UI", Ubuntu, arial, sans-serif; }
    html, body, #clients, #projects { color: #fcfcfc; }
    #header { color: #f9f9f9; }
    input, textarea { background: #231F20; border: 0px !important; }
    footer { color: #777; }


#header { color: #fcfcfc; padding: 3rem 1.6rem 1rem; font-size: 2rem; line-height: 2.3rem; }
#header img { width: 90px !important; margin: 0 0 1rem 0; float: left; }
#bert { float: left; width: calc(100% - 120px); margin-left: 1.6rem; }
#secretkeys { width: calc(100% - 160px); color: #F05758; padding-bottom: 1.4rem; font-weight: 500; font-size: 1.4rem; line-height: 1.4rem; }
#header h2 { font-size: 1.4rem; line-height: 1.8rem; }
#get_in_touch_top { padding: 1.2rem 1.6rem; transition: all .2s ease-in-out; display: inline-block; border: 1px solid #F05758; border-radius: 2.2rem; text-decoration: none; color: #F05758; margin-top: 1.4rem; line-height: 1.1rem; font-size: 1.1rem; }
#get_in_touch_top:hover { transform: scale(1.01); background: #F05758; color: #231f20; }

#about, #contact, #history { padding: 1.6rem; }
#about h2, #contact h2, #history h2 { font-size: 1.6rem; border-bottom: 0.5px solid #F05758; padding-bottom: .8rem; margin-bottom: .8rem; }
#about p, #history p, #contact p { margin-bottom: 16px; line-height: 1.6rem; }
#who { margin-top: 2.4rem !important; }
#rymc { display: none; width: 120px; height: 120px; border-radius: 160px; float: right; }

#clients { padding: 16px; }
#logos { width: 90%; margin-top: .5rem; }

#get_in_touch_bottom { text-decoration: none; float: right; padding: 1rem 2.4rem; color: #F05758; border: 1px solid #F05758; transition: all .2s ease-in-out; font-size: 1.2rem; border-radius: 2.1rem; background: transparent; }
#get_in_touch_bottom:hover { transform: scale(1.01); background: #F05758; color: #231f20; cursor: pointer; }

footer { position: relative; z-index: 1; margin-top: 1.6rem; padding: 1.6rem; color: #f9f9f9; font-size: .8rem; line-height: 1.2rem; background: #110F0F; }
#footerInner { max-width: 740px; margin: 0 auto; }
#founder { float: right; width: 120px; margin: 5px 0 1.2rem 1.2rem; }

#wrapper { position: relative; z-index: 1; }
#bg {
    position: fixed;
    width: 100%;
    height: 100%;
    padding: 0;
    top: 0;
    left: 0;
    z-index: 0; 
}

@keyframes blink {
  0%    { opacity: 0; }
  25%   { opacity: 0.25; }
  50%   { opacity: 0.5; }
  75%   { opacity: 0.25; }
  100%  { opacity: 0; }
}

.px { position: relative; background: #323232; width: 25%; float: left; opacity: 0.0; animation: blink 8s infinite; }
.px:before { content: ' '; display: block; width: 100%; padding-top: 100%; }
.px:nth-child(3n) { animation-delay: .5s; }
.px:nth-child(4n) { animation-delay: .25s; }
.px:nth-child(5n) { animation-delay: .75s; }
.px:nth-child(10), .px:nth-child(20), .px:nth-child(40), .px:nth-child(21), .px:nth-child(33), .px:nth-child(35), .px:nth-child(15), .px:nth-child(45), .px:nth-child(54) { animation-delay: .55s !important; }

.project_cards {
    width: 100%;
    display: grid;
    padding: 1.6rem;
    grid-template-columns: 2.5fr;
    grid-gap: 1.6rem;
}

.project_cards a, .project_cards a:visited {
    background: #110F0F;
    padding: 20px;
    border-radius: 1.6rem;
    display: block; 
    text-decoration: none;
    color: #fcfcfc;
    font-size: .9rem;
    line-height: 1.2rem;
}

.project_cards a:hover { background: black; }

.project_cards h2 { color:#F05758; }
.project_cards h2, .project_cards p { text-align: center; }
a, a:visited { color: #F05758; }
#bert2 a:hover, #footerInner a:hover { color: #FA7C7D; }

.hex:before {
    content: " ";
    width: 0; height: 0;
    border-bottom: 22px solid #F05758;
    border-left: 40px solid transparent;
    border-right: 40px solid transparent;
    border-radius: 1px;
    position: absolute;
    top: -22px;
}

.hex {
    border-radius: 1px;
    margin: 30px auto 40px;
    width: 80px;
    height: 42px;
    background-color: #F05758;
    position: relative;
}

.hex:after {
    content: "";
    width: 0;
    position: absolute;
    bottom: -22px;
    border-radius: 1px;
    border-top: 22px solid #F05758;
    border-left: 40px solid transparent;
    border-right: 40px solid transparent;
}

.hex svg { position: absolute; top: -18px; left: 0; }
.ap svg { left: -2px; }
.g svg { top: 0; left: 22px; }
.pp svg { top: 4px; left: 10px; }
.kcw svg { top: 0; left: 20px; }
.os svg { top: -3px; left: 14px; }
.tk svg { width: 70px; top: 4px; left: 20px; fill: #fcfcfc; }

@media (min-width: 800px) {
    #wrapper { width: 800px; margin: 0 auto; }
    .px { width: 10% !important; }
    #secretkeys { margin-top: 1rem; }
    #header h2 { font-size: 2rem; line-height: 2.4rem; }
	.project_cards { grid-template-columns: 5fr 5fr 5fr; }
}