/* Global Reset */
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 {
border:0;
font:inherit;
font-size:100%;
margin:0;
padding:0;
vertical-align:baseline;
}

body {
line-height:1;
}

ol,ul {
list-style:none;
}

blockquote,q {
quotes:none;
}

blockquote:before,blockquote:after,q:before,q:after {
content:none;
}

table {
border-collapse:collapse;
border-spacing:0;
}


/* Font  */
@font-face {
  font-family: 'Archivo Narrow';
  font-style: normal;
  font-weight: 400;
  src: local('Archivo Narrow Regular'), local('ArchivoNarrow-Regular'), url(https://themes.googleusercontent.com/static/fonts/archivonarrow/v3/DsLzC9scoPnrGiwYYMQXphdbPw3QSf9R-kE0EsQUn2A.woff) format('woff');
}

body {
background:#b4bcc3 url(../images/metal-white.jpg) no-repeat center center fixed;
background-size:cover;
-webkit-background-size: cover;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/metal-white.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/metal-white.jpg', sizingMethod='scale')";
color:#666;
font:normal 1em/1.5 'Archivo Narrow';
}

.clearfix:before, .clearfix:after {
content:"\0020";
display:block;
height:0;
visibility:hidden;
}

.clearfix:after {clear:both;}
.clearfix {zoom:1;}

p {
margin-bottom:15px;
opacity:.7;
}

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

header {
width:660px;
border-bottom:2px dashed #e6e6e6;
margin:60px auto 5px;
}

h1 {
color:#d1d1d1;
font-size:3em;
font-weight:bold;
text-align:right;
text-shadow: 1px 1px 0 #fff;
}

.main {
background:#fff;
border-radius:5px;
box-shadow:0 2px 7px #c3c3c3;
margin:0 auto;
padding:10px;
width:750px;
}

.left {
float:left;
width:170px;
}

.right {
float:right;
margin-bottom:30px;
width:540px;
}

blockquote {
background:url(../images/openning-bracket.png) left top no-repeat, url(../images/closing-bracket.png) right top no-repeat;
height: 80px;
opacity:.7;
margin: 70px 0 35px;
}

blockquote p {
font-size:1.1em;
padding:.5em 0 0;
text-align:center;
}

p span {
color:#37aed6;
font-size:1.3em;
opacity: .6;
padding-right: 0.2em;
}

.social {
background: #ebebeb;
background: -moz-linear-gradient(top,  #ebebeb 1%, #f6f6f6 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#ebebeb), color-stop(100%,#f6f6f6));
background: -webkit-linear-gradient(top,  #ebebeb 1%,#f6f6f6 100%);
background: -o-linear-gradient(top,  #ebebeb 1%,#f6f6f6 100%);
background: -ms-linear-gradient(top,  #ebebeb 1%,#f6f6f6 100%);
background: linear-gradient(to bottom,  #ebebeb 1%,#f6f6f6 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ebebeb', endColorstr='#f6f6f6',GradientType=0 );
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
border-top:1px solid #d6d5d5;
height:30px;
padding:8px 0;
clear:both;
}

.social a {
color: #888;
float:right;
margin-right:5px;
display: block;
width:40px;
height: 40px;
}

.social a:hover {
color: #999;
}


/* Media Queries */

@media only screen { } /* Define mobile styles */
@media only screen and (max-width: 40em) {

body { background: #efefef; }

.main { width: 88%; }
header,.left,.right { width:100%; float:none; }

header {  margin: 1em 0 .3em; }

header h1 { text-align:center; }

.left img { display:block;width:10em;margin: 0 auto; }
blockquote { margin: 1em 0 2.6em; background: url(../images/openning-bracket.png) left center no-repeat, url(../images/closing-bracket.png) right center no-repeat; }
blockquote p { padding: 2% 8%; font-size: 1em; line-height: 1.2; }
.social { padding: .5em .3em; }
p { padding: 0 0.4em; }

} /* max-width 640px, mobile-only styles, use when QAing mobile issues */