/*--------------------- Globals ---------------------*/
a, a:active, a:focus {
	outline: none;
}
a { color: #fff; display: block; position: absolute; overflow: hidden; text-decoration: none; }
a:hover { color: #555; }
button:focus { outline:0 !important; }
:focus { outline:none; }
::-moz-focus-inner { border:0; }
img {
    -khtml-user-select: none;
    -o-user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    user-select: none;
}
iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, hgroup, nav, section, menu, time, mark, audio, vidseo { background: transparent; border: 0; font-size: 100%; margin: 0; outline: 0; padding: 0; vertical-align: baseline; }

button,
input,
select,
textarea {
    font-size: 100%; /* 1 */
    margin: 0; /* 2 */
    vertical-align: baseline; /* 3 */
    *vertical-align: middle; /* 3 */
}

a:focus, a:active, 
button::-moz-focus-inner,
textarea::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner,
input[type=email]::-moz-focus-inner,
input[type=number]::-moz-focus-inner,
input[type=password]::-moz-focus-inner,
select::-moz-focus-inner,
input[type="file"] > input[type="button"]::-moz-focus-inner {
    border: 0;
    outline : 0;
    -webkit-border-radius: 0;
    -webkit-appearance: none;
}
textarea {
	resize: vertical;
	-moz-appearance:none;
	outline:0px none transparent;
	-webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}

textarea,
input[type="text"],
input[type="button"],
input[type=email],
input[type=number],
input[type=password],
input[type="submit"] {
     -webkit-appearance: none;
     border-radius: 0;
}

textarea:focus, input:focus{
    outline: 0;
}

*:focus {
    outline: 0;
}
html, body { background-color: #272727; margin: 0; padding: 0; }
#rd { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; overflow: hidden;
transform-style: preserve-3d;
perspective: 400;
-webkit-transform-style: preserve-3d;
-webkit-perspective: 400;
background: #272727;
color: #fff; font-family: 'Muli',Helvetica,Arial,sans-serif; font-size: 100%; font-weight: normal; line-height: 100%; text-transform: uppercase;
cursor: url("cursor_hover.png"), auto;
}
#rd svg { position: absolute; overflow: hidden; }
#rd div { display: block; overflow: hidden; position: absolute; background: transparent; }
#rd img { display: block; width: 100%; height: 100%; position: absolute; }
#rd .lockup { width: 300px; height: 250px; }

#rd #logo:hover { cursor: url("cursor.png"), auto; }
#rd #logo_rd { top: 22px; left: 22px; }
#rd #logo_v3 { left: 50%; margin-left: -35px; }

#rd #social { background: transparent; width: 100%; height: 20px; position: fixed; top: 17px; text-align: center; list-style: none; }
#rd #social li { background: transparent; width: 20px; height: 20px; position: absolute; }
#rd #social li a { display: block; overflow: hidden; width: 100%; height: 100%; }
#rd #social li a:hover { cursor: url("cursor.png"), auto; }
#rd #social li a svg { left: 0; top: 0; }
/* #rd #social li a svg:hover path { fill: #ffa800; } */
#rd #social #twitter { right: 102px; }
#rd #social #linkedin { right: 62px; }
#rd #social #facebook { right: 22px;; }

#rd #wnw { display: block; overflow: hidden; width: 118px; height: 45px; position: fixed; top: 12px; right: 92px; transform: scale(.6); transform-origin: 0 0; }
/* #rd #wnw:hover svg path { fill: #ffa800; } */
#rd #wnw:hover { cursor: url("cursor.png"), auto; }

#rd nav { background: #373737; position: absolute; width: 100%; height: 70px; bottom: 0; }
#rd nav #btn_logo { width: 62px; height: 41px; left: 50%; top: 50%; margin: -20.5px 0 0 -31px; }
#rd nav #btn_logo #logo { width: 62px; height: 41px; top: 0; left: 0; }
#rd nav .btn { background: #373737; width: 70px; height: 70px; border: 7px solid #272727; border-top: 0; border-bottom: 0; cursor: pointer; }
#rd nav .btn:hover { cursor: url("cursor.png"), auto; }
#rd nav .btn .bar { position: relative; background: #272727; width: 50px; height: 10px; margin: 10px 10px; }
/* #rd nav .btn:hover .bar { background: #ffa800; } */
#rd nav #btn_filter { right: 0; }
#rd nav #btn_filter .box { background: #272727; width: 12px; height: 12px; top: 13px; left: 10px; }
#rd nav #btn_filter #box_mid { left: 29px; }
#rd nav #btn_filter #box_right { left: 48px; }
#rd nav #btn_filter #box_btm { top: 47px; left: 29px; }
#rd nav #btn_filter .line { background: #272727; width: 2px; height: 11px; top: 26px; left: 15px; }
#rd nav #btn_filter #line_ver_mid { height: 20px; left: 34px; }
#rd nav #btn_filter #line_ver_right { left: 53px; }
#rd nav #btn_filter #line_hor { width: 40px; height: 2px; top: 35px; left: 15px; }
/* #rd nav #btn_filter:hover .box { background: #ffa800; } */
#rd nav #btn_replay { right: 77px; }

#rd .container { background: #373737; position: absolute; width: 100%; height: 0; bottom: 0; margin: 0; padding: 0; display: none; border-top: 7px solid #272727; }
#rd #menu li { position: relative; background: transparent; width: 100%; height: 20%; display: flex; justify-content: center; align-items: center; cursor: pointer; user-select: none; }
#rd #menu li.selected,
#rd #menu li:hover { background: #272727; cursor: url("cursor.png"), auto; }
#rd #menu li p { color: #ffa800; font-size: 40px; width: 222px; text-align: left; margin-left: 20px; }
#rd #menu li svg { position: relative; }
#rd #menu li .btns { position: absolute; width: 100%; height: 100%; }
#rd #menu li.selected svg path,
#rd #menu li:hover svg path { fill: #373737; }

#rd #reel,
#rd #filters { overflow-y: scroll; }
#rd #reel,
#rd #filters {
  --scrollbarBG: #272727;
  --thumbBG: #373737;
}
#rd #reel::-webkit-scrollbar,
#rd #filters::-webkit-scrollbar {
  width: 11px;
}
#rd #reel::-webkit-scrollbar-track,
#rd #filters::-webkit-scrollbar-track {
  background: var(--scrollbarBG);
}
#rd #reel::-webkit-scrollbar-thumb,
#rd #filters::-webkit-scrollbar-thumb {
  background-color: var(--thumbBG) ;
  border-radius: 6px;
  border: 3px solid var(--scrollbarBG);
}
#rd #reel,
#rd #filters {
  scrollbar-width: thin;
  scrollbar-color: var(--thumbBG) var(--scrollbarBG);
}
#rd #filters li { position: relative; background: transparent; width: 100%; height: 200px; display: flex; justify-content: center; align-items: center; cursor: pointer; user-select: none; }
#rd #filters li:hover { background: #272727; cursor: url("cursor.png"), auto; }
#rd #filters li p { color: #ffa800; font-size: 52px; position: absolute; opacity: 0; }
#rd #filters .cover { background: transparent; width: 100%; height: 100%; }
#rd #filters li .brand { position: absolute; width: 100%; height: 100%; }
#rd #filters li:hover .cover { background: #272727; }
#rd #filters li:hover p { opacity: 1; }

#rd #current_filter { background: #373737; position: relative; width: 100%; height: 70px; top: 70px; border-top: 7px solid #272727;  border-bottom: 7px solid #272727; display: flex; align-items: center; opacity: 0; }
#rd #current_filter #divider { background: #272727; width: 7px; height: 100%; left: 50%; margin-left: -3.5px; }
#rd #current_filter p { color: #272727; position: absolute; font-size: 37px; left: 50%; margin-left: 50px; }
#rd #current_filter img { position: absolute; height: 70px; width: auto; left: 50%; margin-left: -150px; }

#rd .content { background: transparent; width: 100%; height: 100%; }
#rd #contact,
#rd #reel,
#rd #partners,
#rd #work { display: flex; align-items: center; justify-content: center; }
#rd #work #vids { position: relative; background: transparent; width: 100%; height: 100%; margin-top: 0px; display: flex; align-items: center; justify-content: center; visibility: hidden; }
#rd #work p { color: #373737; position: absolute; font-size: 30px; width: auto; bottom: 111px; }
#rd #work #arrow_l { left: 0; }
#rd #work #arrow_r { right: 0; }
#rd #work .arrow:hover { cursor: url("cursor.png"), auto; }
#rd #work #gifs .loader,
#rd #work #vids .loader { position: relative; width: 25px; height: 25px; margin-top: 0px; }
#rd #work #vids #frame,
#rd #work #vids #vid { position: absolute; width: 100%; height: 100%; visibility: hidden; }
#rd #work #vids #vid { width: 85%; }
#rd #work #magnify { display: none; width: 40px; height: 40px; position: absolute; bottom: 102px; right: 50%; margin-right: -80px; }
#rd #work #magnify:hover { cursor: url("cursor.png"), auto; }
#rd #work #magnify svg { width: 100%; height: 100%; }
#rd #work #gifs { height: 100%; width: auto; display: flex; align-items: center; justify-content: center; visibility: hidden; }
#rd #work #gifs .loader { position: absolute; }
#rd #work #gifs #gif { position: relative; width: auto; height: 100%; }
#rd #work #fullscreen { position: fixed; top: 44px; transform: scale(.7); transform-origin: 50% 50%; visibility: hidden; }

#rd #reel { display: inline-block; text-align: center; }
#rd #reel video { position: relative; width: 77%; margin-top: 70px; }
#rd #reel #instafeed { position: relative; width: 80%; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); grip-gap: 1rem; padding-bottom: 85px; }
#rd #reel #instafeed a { position: relative; padding: 1rem; display: grid; place-items: center; }
#rd #reel #instafeed a::before { content: ""; display: block; padding-bottom: 100%; grid-area: 1 / 1 / 2 / 2; }
#rd #reel #instafeed a:hover { cursor: url("cursor.png"), auto; }
#rd #reel #instafeed a img { width: 100%; grid-area: 1 / 1 / 2 / 2; }
#rd #reel #ig_header { background: transparent; display: flex; position: relative; width: 77.4%; margin: 12px auto 0; padding: 10px 0; }
#rd #reel #ig_header img { position: relative; float: left; width: auto; height: 70px; margin-left: 10px; }
#rd #reel #ig_header p { color: #373737; position: absolute; right: 10px; text-transform: none; align-self: center; }

#rd #contact #info { color: #ffa800; background-color: transparent; width: 100%; height: auto; font-size: 138.5%; line-height: 100%; text-transform: none; position: relative;
	display: flex; flex-direction: column; align-items: center; list-style: none;
}

#rd #contact #info li { padding: 10px 0 0px 20px; height: 30px; }

#rd #contact #info li a { color: #ffa800; height: 30px; position: relative; overflow: hidden; padding-left: 35px; }

#rd #contact #info li:nth-child(2) a span { background: transparent url('icon_phone.svg') -12px -14px no-repeat; width: 50px; height: 50px; position: absolute; top: 0; left: 0; }

#rd #contact #info li:nth-child(3) a span { background: transparent url('btn_contact.svg') -3px 0 no-repeat; width: 28px; height: 28px; position: absolute; top: 0; left: 0; }

#rd #contact,
#rd #reel,
#rd #partners { visibility: hidden; }
#rd #contact p,
#rd #reel p,
#rd #partners p { color: #ffa800; font-size: 50px; }

/*--------------------- IE/Utilities ---------------------*/

#rd .hide { display: none; }

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

/* Smartphones ----------- */
@media only screen and (max-width: 640px) {
	#rd nav #btn_replay,
	#rd #logo_v3 { display: none; }
/* 	#rd #work #vids { width: 65%; height: 65%; margin-top: -50px; } */
	#rd #work p { bottom: 83px; }
	#rd #work #magnify { right: 100px; margin: 0; bottom: 78px; }
	#rd #contact p,
	#rd #reel p,
	#rd #partners p { font-size: 30px; }
	#rd #reel video { width: 100%; background: transparent url("poster.png") 50% 50% / cover no-repeat ; }
	#rd #reel video[poster] { object-fit: fill; }
	#rd #reel #instafeed { width: 100%; }
	#rd #reel #instafeed a { padding: 1rem 0; }
	#rd #reel #ig_header { justify-content: center; }
	#rd #reel #ig_header p { display: none; }
}