@import url(http://fonts.googleapis.com/css?family=Roboto:100,300,700);

/*css 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,form,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;text-decoration:none}
article,aside,details,figcaption,figure, footer,header,hgroup,menu,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}



/*style*/
html{height:100%;}
body{font-family:'Roboto', sans-serif; font-size: 14px; color:#000000;background: #ffffff; text-align: center; height:100%;}
i{font-style:italic}
b,strong{font-weight:bold}

header {width:100%; height:27%;}
h1 { color: #333; font-weight:700; font-size: 70px; text-transform: uppercase;  margin:0; width:100%; text-align:center; padding:3% 0 1% 0; text-shadow: 0 1px 0 #fff;}
h2 {font-weight: 100; color: #FFF; font-size: 36px; text-transform: uppercase;  width:100%;}
h2 span{background: #DD473C; padding: 0.5% 1.5%; }

div.bg {width:100%; height:100%; max-height:590px; margin:0 auto; height:73%; background-repeat:no-repeat; background-position:center; background-size:auto 100%;}

a.logo {position:absolute; right:20px; bottom:20px;}
a.logo img {width: 100px; border:0;} 



/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
h1 {font-weight: 700; font-size:30px; padding-top:4%; padding-bottom:2%;}
h2 {font-size: 20px;}
a.logo {right:7px; bottom:5px;}
a.logo img {width: 60px;} 
}