* { margin:0; padding:0; }

html, body { height:100%; }

img, a img { border:none; }
a { outline:none; text-decoration:none; }

.wrapper { width:100%; height:100%; position:relative; overflow:hidden;
background: #fefefe; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPHJhZGlhbEdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iNzUlIj4KICAgIDxzdG9wIG9mZnNldD0iMzElIiBzdG9wLWNvbG9yPSIjZmVmZWZlIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2JiYmRiZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9yYWRpYWxHcmFkaWVudD4KICA8cmVjdCB4PSItNTAiIHk9Ii01MCIgd2lkdGg9IjEwMSIgaGVpZ2h0PSIxMDEiIGZpbGw9InVybCgjZ3JhZC11Y2dnLWdlbmVyYXRlZCkiIC8+Cjwvc3ZnPg==);
background: -moz-radial-gradient(center, ellipse cover,  #fefefe 31%, #bbbdbf 100%); /* FF3.6+ */
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(31%,#fefefe), color-stop(100%,#bbbdbf)); /* Chrome,Safari4+ */
background: -webkit-radial-gradient(center, ellipse cover,  #fefefe 31%,#bbbdbf 100%); /* Chrome10+,Safari5.1+ */
background: -o-radial-gradient(center, ellipse cover,  #fefefe 31%,#bbbdbf 100%); /* Opera 12+ */
background: -ms-radial-gradient(center, ellipse cover,  #fefefe 31%,#bbbdbf 100%); /* IE10+ */
background: radial-gradient(ellipse at center,  #fefefe 31%,#bbbdbf 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fefefe', endColorstr='#bbbdbf',GradientType=1 ); /* IE6-8 fallback on horizontal gradient */
}

.logo { width:20%; height:auto; position:absolute; top:30px; left:3%; z-index:3; }
.logo img { width:100%; height:auto; }

.message { width:300px; height:300px; position:absolute; top:50%; left:50%; margin:-200px 0 0 -150px; z-index:2; background:transparent url(../images/message.png) no-repeat 50% 50%; background-size:100% 100%; }

.footer-message { position:absolute; bottom:30px; left:3%; right:3%; background-color:#c31784; }
.footer-message span { width:30%; display:inline-block; float:right; padding:10px; color:#fff; font:normal 12px/18px Arial; }


@media only screen and (min-width: 1px) {
.logo { width:60%; top:20px; left:20%; }
.message { width:240px; height:240px; margin:-160px 0 0 -120px; }
.footer-message { bottom:20px; }
.footer-message span { width:auto; }
}

@media only screen and (min-width: 600px) {
.logo { width:20%; top:30px; left:3%;  }
}

@media only screen and (min-width: 1020px) {
.logo { width:20%; top:30px; left:3%; }
.message { width:300px; height:300px; margin:-180px 0 0 -150px; }
.footer-message { bottom:30px; }
.footer-message span { width:30%; float:right; } 
}

@media only screen and (min-width: 1400px) {
.message { width:400px; height:400px; margin:-200px 0 0 -200px; }
}

@media only screen and (min-width: 1670px) {
.message { width:560px; height:560px; margin:-300px 0 0 -280px; }
}