/*                                   ,
                               ,   ,'|
                             ,/|.-'   \.
                          .-'  '       |.
                    ,  .-'              |
                   /|,'                 |'
                  / '                    |  ,
                 /                       ,'/
              .  |          _              /
               \`' .-.    ,' `.           |
                \ /   \ /      \          /
                 \|    V        |        |  ,
                  (           ) /.--.   ''"/
                  "b.`. ,' _.ee'' 6)|   ,-'
                    \"= --""  )   ' /.-'
  xxELITExx          \ / `---"   ."|'
  BW GRAPHICS         \"..-    .'  |.
  FORCE                `-__..-','   |
                     __.) ' .-'/    /\._
               _.--'/----..--------. _.-""-._
            .-'_)   \.   /     __..-'     _.-'--.
           / -'/      """""""""         ,'-.   . `.
          | ' /                        /    `   `. \
          |   |                        |         | |
           \ .'\                       |     \     |
          / '  | ,'               . -  \`.    |  / /
         / /   | |                      `/"--. -' /\
        | |     \ \                     /     \     |
        | \      | \                  .-|      |    |

*/


@font-face {
    font-family:'BWHaasHead';
    src: url('bwhaasgroteskhead-95black.eot?#iefix') format('eot'),
         url('bwhaasgroteskhead-95black.woff') format('woff'),
         url('bwhaasgroteskhead-95black.ttf') format('truetype');
    font-style: normal;
    font-weight: 700;
    font-stretch: normal;
  }
@font-face {
    font-family:'BWHaasMedium';
    src: url('bwhaasgroteskhead-65medium.eot?#iefix') format('eot'),
         url('bwhaasgroteskhead-65medium.woff') format('woff'),
         url('bwhaasgrotesktext-65medium.ttf') format('truetype');
    font-style: normal;
    font-weight: 700;
    font-stretch: normal;
  }


body {
    font-size: 12px;
	font-family: 'BWHaasMedium', helvetica, arial, sans-serif;
	letter-spacing: 0.05em;
	font-weight: 100; 
    line-height: 22px;
	padding: 0;margin:0;}


/* cool fonts */
h1 {
  display: inline-block;
  margin: 5px 0;
  font-family: 'BWHaasHead';
  font-size: 30px;
  line-height: 30px;
}

.bigtitle{color: #fff;font-size:96px; font-family: 'BWHaasHead'; line-height:100px; -webkit-text-stroke: 1px black;text-align: center;
	text-shadow:
	-1px -1px 0 #000,  
    1px -1px 0 #000,
    -1px 1px 0 #000,
     1px 1px 0 #000;
    text-rendering: optimizeLegibility;
	text-rendering: geometricPrecision;
	font-smooth: always;
	font-smooth: never;
	font-smoothing: antialiased;
	-moz-font-smoothing: antialiased;
	}


.articlelink {
  background-color:#000;
  white-space:pre-wrap;
  border:0 solid #000;
  border-width:0.25em 0;
  opacity: 0.8;
  font-size: 20px;
  position:relative;
  line-height:1.6em;
  white-space:pre-wrap;
  padding: 4px 0px;
  top: 15px;
  left: 10px;
  background: black;
  box-shadow: 10px 0 0 black, -10px 0 0 black;
}
.articlelink:after{
		background-color:#000;
        content:"";
}



.box a {color:#fff; display: block;width: 100%;height: 100%; transition: all .2s linear 0;}
.box a:hover{color:#ff8d00;}

.biglink{font-size:50px; line-height:50px;font-family: 'BWHaasHead';}
.biglink a{color: #fff; 
	transition: all .3s linear 0;
	-webkit-text-stroke: 1px black;
	text-shadow:
	-1px -1px 0 #000,  
    1px -1px 0 #000,
    -1px 1px 0 #000,
     1px 1px 0 #000;
    text-rendering: optimizeLegibility;
	text-rendering: geometricPrecision;
	font-smooth: always;
	font-smooth: never;
	font-smoothing: antialiased;
	-moz-font-smoothing: antialiased;
	
}
.biglink a:hover{color: #000;}

.bigbox{height:300px;}

.author{font-size: 12px;line-height: 12px;}

.centered{margin-left: auto;margin-right: auto;}

.box {background-size: cover;}

.pullquote{font-size: 28px; text-align: center;position: relative;outline: solid black 1px;outline-offset: -10px;line-height: 32px;
    -webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s ease;
    -ms-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all 0.2s ease;}
.pullquote a {color: #000}
.pullquote:hover{outline-offset:0px;}

.lilrotate{-webkit-transition-duration: 0.8s;
-moz-transition-duration: 0.2s;
-o-transition-duration: 0.2s;
transition-duration: 0.2s;}
.lilrotate:hover{-ms-transform: rotate(-6deg); /* IE 9 */
    	-webkit-transform: rotate(-6deg); /* Chrome, Safari, Opera */
		transform: rotate(-6deg);}

.middle{
	padding: 15px;
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%); }

header {
  background: white;
  border-bottom: 1px solid black;
  padding: 10px;
  letter-spacing: 0px;
  display: block;
  height: 60px;
  min-width: 500px;
}

a {text-decoration: none; color: #000;}


#liveblog{position: fixed;top:100px;right:15px;width:140px;height:184px;z-index: 1000;}
#liveblog img{width:100%;height: auto;}
#footer{border-top: 1px solid #000;margin-top:45px;padding:20px}


	
#header-social {
  display: inline-block;
  float: right;
  cursor: pointer;
   overflow: visible;
}

.social {
	margin-right: 10px;
    position: relative;
    top:-5px;
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
   overflow: visible;
   height: 60px;
   display: inline-block;
}
.social i {
    margin: 0;
    position: relative;
    top: 13px;
    font-size: 26px;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
   overflow: visible;
   z-index: 5555;
}
.social:hover i {top: 5px;}



#return-to-top {
    position: fixed;
    bottom: 30px;
    right: 20px;
    width: 50px;
    height: 50px;
    display: block;
    text-decoration: none;
    display: none;
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
#return-to-top i {
    color: #000;
    margin: 0;
    position: relative;
    left: 16px;
    top: 13px;
    font-size: 30px;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
#return-to-top:hover i {top: 5px;}

.video {
  width: 100%    !important;
  height: auto   !important;
}

.timestamp{font-family: 'Press Start 2P', cursive;color: #00ff4e;font-size: 8px;}

/* custom column thing */

#wrapper{max-width: 970px;min-width:500px;margin-left: auto;margin-right: auto;margin-top: 45px;}
*,
*:after,
*:before {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}
.frame {margin: 0 auto;}
.frame:after {  content: "";  display: table;  clear: both;}
[class*='bwg-'] {  float: left;  padding: 0.6em;}
[class*='bwg-']:last-of-type {  float: right;}

/* Main Widths */
.bwg-1  { width: 100%; }
.bwg-2  { width: 50%; }
.bwg-3  { width: 33.33%;}
.bwg-4  { width: 25%; }
.bwg-66  { width: 66.66%; }



/* mobile */
@media (max-width: 800px) {
	.bwg-1, .bwg-3,.bwg-66 {width: 100%;}
	.bigtitle{font-size:70px; line-height:70px;border: solid 1px black;}
	.biglink{font-size:40px; line-height:40px;}
  #header-social{margin-left: 10px;}
  header{height: 54px;}
  .social i{font-size: 16px;}
  h1{font-size: 24px; line-height: 24px;}
  .bigbox{height:150px;}
  #liveblog{position:absolute;top:50px;right:0;width:100px;height:144px;}
}

/*base mobile styles - everything 100%*/
@media (max-width: 480px) {
  .bwg-1,
  .bwg-3,
  .bwg-66 {width: 100%;}
  h1{font-size: 20px; line-height: 20px;}
  .bigtitle{font-size:50px; line-height:50px;border: solid 1px black;}
.biglink{font-size:30px; line-height:30px;}
  header{height: 50px;}

}

.frame img{width:100%; height: auto;}