@charset "UTF-8";
/* CSS Document */


/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

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: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
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;
}


-----------------

/**
 * @license
 * MyFonts Webfont Build ID 3141183, 2015-12-14T19:25:46-0500
 * 
 * The fonts listed in this notice are subject to the End User License
 * Agreement(s) entered into by the website owner. All other parties are 
 * explicitly restricted from using the Licensed Webfonts(s).
 * 
 * You may obtain a valid license at the URLs below.
 * 
 * Webfont: SofiaProBold by Mostardesign
 * URL: http://www.myfonts.com/fonts/mostardesign/sofia-pro/bold/
 * Copyright: Copyright (c) Olivier Gourvat - Mostardesign Studio, 2012. All rights reserved.
 * Licensed pageviews: 10,000
 * 
 * 
 * License: http://www.myfonts.com/viewlicense?type=web&buildid=3141183
 * 
 * © 2015 MyFonts Inc
*/


/* @import must be at top of file, otherwise CSS will not work */
@import url("//hello.myfonts.net/count/2fee3f");

  
@font-face {font-family: 'SofiaProBold';src: url('fonts/2FEE3F_0_0.eot');src: url('fonts/2FEE3F_0_0.eot?#iefix') format('embedded-opentype'),url('fonts/2FEE3F_0_0.woff2') format('woff2'),url('fonts/2FEE3F_0_0.woff') format('woff'),url('fonts/2FEE3F_0_0.ttf') format('truetype');}
 
 


body{
 background-color:black;
 width:100%;
 height:100%;
-webkit-transition: background-color 500ms ease-out;
-moz-transition: background-color 500ms ease-out;
-o-transition: background-color 500ms ease-out;
transition: background-color 500ms ease-out;
font:sans-serif;
font-weight:400;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

a{color:#777; text-decoration:underline;}
a:hover{color:#fff; text-decoration:none;}

.logo-wrap{width:75px; height:255px; position:absolute; top:5%; left:5%;}
.logo-wrap svg{width:100%; height:auto;}
#logo{fill:#fff;}

.text{color:#777; position:absolute; top:30%; left:5%; right:5%; width:90%;
-webkit-transition: all 500ms ease-out;
-moz-transition: all 500ms ease-out;
-o-transition: all 500ms ease-out;
transition: all 500ms ease-out;}
h1{font-size:30px; line-height:1.2; margin-bottom:1em; font-family:SofiaProBold; }
p{font-size:16px; line-height:1.444; font-family: 'Roboto', sans-serif;}

strong{font-weight:700;}

.background-panel{ position:absolute; top:66.66%; left:0; right:0; bottom:0; background: url(dots-white.svg) repeat; background-size:45px 25.981px; background-attachment:fixed;}

@media all and (min-width: 1px) {
body {background-color:black;}
}

@media all and (min-width: 600px) {
body {background-color:white;}
#logo{fill:#ed1c24;}
.text{color:#ed1c24; top:33.33%; left:33.33%; width:61.66%; }
h1{font-size:42px;}
.logo-wrap{width:98px; height:140px; position:absolute;  left:auto; top:5%; left:33.33%;}
.background-panel{ top:0; left:0; right:66.66%; bottom:0; background: url(dots-red.svg) repeat; background-size:90px 51.962px;}

a{color:#ed1c24; }
a:hover{color:#000;}

}

@media all and (min-width: 1400px) {
body {background-color:#ed1c24;}
.text{color:#fff; top:33.33%; left:33.33%; width:33.333%; }
h1{font-size:60px;  margin-bottom:1em;}
p{font-size:18px; }

#logo{fill:#fff;}
.logo-wrap{width:169px; height:255px; position:absolute;  left:auto; top:33.33%; right:5%;}
.background-panel{ top:0; left:0; right:66.66%; bottom:0; background: url(dots-white.svg) repeat; background-size:90px 51.962px;}

a{color:#fff; }
a:hover{color:#000;}
}

@media all and (max-width: 330px) {
.background-panel{ position:absolute; top:90%; left:0; right:0; bottom:0; background: url(dots-white.svg) repeat; background-size:45px 25.981px; background-attachment:fixed;}
}

@media all and (max-height: 375px) {
.text{top:66.66%; }
}

@media all and (max-height: 340px) {
.background-panel{ background: none; }
}