/*
Title: CSS Reset 
Author: Tom Smith
Update: October 15, 2014 by Tom Smith
*/

/* --- RESETS --- */
html, body, div, span, object, 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, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { margin: 0; padding: 0; font-size: 1em; font-weight: inherit; font-style: normal; vertical-align: baseline; background: transparent; border: 0; outline: 0; }

article, aside, figure, figure img, hgroup, footer, header, nav, section { display: block; }

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; }

input, select { vertical-align: middle; }

a img { border: 0; }

:focus { outline: 0; }

a:hover, a:active { outline: none; }

body { cursor: default; color: #424242; font-size: 125%; font-family: "adelle-sans", sans-serif; background: #F7F7F7; height: 100%; -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

::selection { background: rgba(100, 198, 226, 0.5); }

::-moz-selection { background: rgba(100, 198, 226, 0.5); }

img::selection { background: transparent; }

img::-moz-selection { background: transparent; }

body { -webkit-tap-highlight-color: rgba(100, 198, 226, 0.5); }

a, a:visited { position: relative; color: #1BA39C; text-decoration: none; font-weight: normal; -webkit-transition: all 0.25s ease; -moz-transition: all 0.25s ease; -o-transition: all 0.25s ease; transition: all 0.25s ease; }

a.redacted { text-decoration: line-through; }

a span.animate {transition: all 300ms cubic-bezier(1.175, 0.885, 0.32, 1.275) 0s; overflow: hidden; position: absolute; left: 0px; bottom: -3px; display: block; width: 0px; height: 1.5px !important; max-height: 2px !important; background: none repeat scroll 0% 0% #1BA39C;}

a:hover span.animate {width: 100%;}

#container { position: absolute; top: 0; bottom: 0; width: 33%; height: 100%; min-height: 100%; color: #fff; color: rgba(250, 250, 250, 0.9); }

.group { padding-bottom: 5%; background: rgba(0,0,0,.6); }

p { margin: 0 0 1.5em; padding: 0 10%; line-height: 1.5em; }

p:first-child { padding-top: 20%; }

#intro {font-family: "utopia-std-display", serif; font-size: 250%; line-height: 1em; font-weight: 400; margin: 0px 0px .5em;}

/* --------------
FANCY ANIMATIONS */

span.link-animate {margin: 0px; padding: 0px; display: inline-block; position: relative;  white-space: nowrap;}

.link-animate a:before {white-space: nowrap; position: absolute; top: 0; left: 0; overflow: hidden!important; max-width: 0; content: attr(data-hover); -webkit-transition: max-width 0.4s; -moz-transition: max-width 0.5s; transition: max-width 0.4s;}

.link-animate a:hover:before, .link-animate a:focus:before {max-width: 100%;}


/* --------------
CURRENTLY DOING BOX */

#right_marquee {display:block; position:fixed; width:33%; right:0px;}

.mobile_marquee {display: none;}

#current_title {font-family: "utopia-std-display", serif; font-size: 250%; font-weight: 400; margin: 0px 0px .5em; line-height: 1rem; padding-top: 26%;}

.title {font-size: 1.75rem;}


/* --------------
LATEST TWEET */

div.user{display: none;}
.timePosted, .interact {padding: 0px; margin: 0;}

.timePosted {padding-left: 10%; font-size: 50%; display: inline-block;}

.interact {padding-left: 10%; display: inline-block;}

.interact a {margin-right: .5em; font-size: 75%;}

p.tweet {margin-bottom: .5em; font-size: 1rem;}

.tweet img {display: none;}

.media img { display: none;}

.current > p {margin-top: 10px;}

/* --------------
MEDIA QUERIES */

@media only screen and (max-width: 767px) { 
html {font-size: 100%;}
	#container { position: relative; width: 100%; padding: 0; background: rgba(255, 255, 255, 0.75); }
  .group { width: 90%; padding: 0 5% 10%; background: transparent; color: rgba(10, 10, 10, .8); }
  p { padding: 0; }
  p:first-child { padding-top: 15%; } 
#right_marquee {display: none;}
.mobile_marquee {display: block; position: relative; width: 100%; max-width: 600px; margin: auto;}
.media img {display: block; width: 100%; height: auto; border-radius: 4px;}
.interact, .timePosted {padding-left: 0px;}
.interact {float: right;}
.interact a {font-size: 100%;}
.timePosted {margin-bottom: 8px;}
.mobile_marquee > p {margin-top: 10px;}

}