/**** CSS Reset ****/

* {
	border: 0;
	box-sizing: border-box;
	font: inherit;	
	font-size: 100%;
	margin: 0;
	padding: 0;
	position: relative;
	vertical-align: baseline;
}

article {
	display: block;
}



/**** Base Styles ****/

html, body {
	background: rgb(37,161,196);
	background: -moz-radial-gradient(center, ellipse cover, rgb(37,161,196) 0%, rgb(15,69,84) 100%);
	background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgb(37,161,196)), color-stop(100%,rgb(15,69,84)));
	background: -webkit-radial-gradient(center, ellipse cover, rgb(37,161,196) 0%,rgb(15,69,84) 100%);
	background: -o-radial-gradient(center, ellipse cover, rgb(37,161,196) 0%,rgb(15,69,84) 100%);
	background: -ms-radial-gradient(center, ellipse cover, rgb(37,161,196) 0%,rgb(15,69,84) 100%);
	background: radial-gradient(ellipse at center, rgb(37,161,196) 0%,rgb(15,69,84) 100%);
	font-family: "source-sans-pro", Helvetica, Arial, sans-serif;
	font-style: normal;
	font-weight: 400;
	height: 100%;
	min-height: 690px;
	width: 100%;	
}

header, footer {
	margin: 0 auto;
	width: 900px;
}

article {
	left: 50%;
	margin: -240px 0 0 -332px;
	position: absolute;
	top: 46%;
}

footer {
	bottom: 20px;
	left: 50%;
	margin: 0 0 0 -421px;
	position: absolute;
	z-index: 99;
}

h1 {
	color: #fff;
	font-size: 28pt;
	font-weight: 700;
	text-transform: uppercase;
	padding: 20px 0 0 0;
}

header h1 span.char2 {
	letter-spacing: -2px;
}

header h1 span.char3 {
	letter-spacing: 1px;
}

header h1 span.char7 {
	letter-spacing: 1px;
}

header h1 span.char15 {
	letter-spacing: -1px;
}

header h2 {
	color: #d0d0d0;
	float: right;
	margin: -36px 0 0 0;
}

h2 a {
	border-bottom: 1px solid #fff;
	color: #fff;
	text-decoration: none;
	padding: 0 0 1px 0;
	-webkit-transition: all 0.3s;
}

h2 a:hover {
	border-bottom: 1px solid #d0d0d0;
	color: #d0d0d0;
}

footer p {
	color: #d0d0d0;
	line-height: 150%;
	font-size: 12pt;
	width: 842px;
}

footer p a {
	border-bottom: 1px solid #fff;
	color: #fff;
	text-decoration: none;
	-webkit-transition: all 0.3s;
}

footer p a:hover {
	border-bottom: 1px solid #d0d0d0;
	color: #d0d0d0;
}

.twitter-share-button {
	float: right;
	margin: -35px 140px 0 0;
}

.twitter-follow-button {
	float: right;
	margin: -35px 0 0 0;
}




/**** Table ****/

#table {
	background: rgba(0, 0, 0, 0.5);
	border-radius: 5px;
	width: 665px;
	height: 480px;
	padding: 0 10px 0 10px;
	-webkit-animation: expandIn 1s 1.2s;
	-webkit-animation-fill-mode: both;
}

hgroup {
	-webkit-animation: fadeIn 1.6s 2.2s ;
	-webkit-animation-fill-mode: both;
}

hgroup h1 {
	font-weight: 700;
	letter-spacing: 0.05em;
	padding: 15px 0 0 127px;
}

hgroup h1 span.char8 {
	letter-spacing: 0.1em;
}

hgroup h1 span.char9 {
	text-transform: lowercase;
}

hgroup h1 span.char10 {
	text-transform: lowercase;
}

hgroup h2 {
	color: #fff;
	font-size: 16.5pt;
	text-transform: uppercase;
	font-weight: 600;
	letter-spacing: 0.05em;
	padding: 0 0 10px 127px;
}

hgroup h3 {
	color: #fff;
	float: right;
	font-size: 14.5pt;
	font-weight: 600;
	margin: -38px 24px 0 0;
}

#bar {
	background: #fff;
	border-radius: 4px;
	color: #1d1d1d;
	font-size: 16pt;
	height: 32px;
	margin: 0 0 5px 0;
	padding-top: 3px;
	width: 645px;
}

#bar:nth-of-type(even) {
	background: #ededed;
}

#bar p, #bar span {
	display: inline-block;
	font-weight: 600;
}

#bar p {
	margin-left: 22px;
	width: 443px;
}

span.c {
	font-family: "ubuntu-mono",sans-serif;
	font-style: normal;
	font-weight: 700;
	letter-spacing: 0.05em;
	margin-left: 70px;
}

.b1 {
	-webkit-animation: fadeInDown 0.6s 2.7s;
	-webkit-animation-fill-mode: both;
}

.b2 {
	-webkit-animation: fadeInDown 0.6s 3s;
	-webkit-animation-fill-mode: both;
}

.b3 {
	-webkit-animation: fadeInDown 0.6s 3.3s;
	-webkit-animation-fill-mode: both;
}

.b4 {
	-webkit-animation: fadeInDown 0.6s 3.6s;
	-webkit-animation-fill-mode: both;
}

.b5 {
	-webkit-animation: fadeInDown 0.6s 3.9s;
	-webkit-animation-fill-mode: both;
}

.b6 {
	-webkit-animation: fadeInDown 0.6s 4.2s;
	-webkit-animation-fill-mode: both;
}

.b7 {
	-webkit-animation: fadeInDown 0.6s 4.5s;
	-webkit-animation-fill-mode: both;
}

.b8 {
	-webkit-animation: fadeInDown 0.6s 4.8s;
	-webkit-animation-fill-mode: both;
}

.b9 {
	-webkit-animation: fadeInDown 0.6s 5.1s;
	-webkit-animation-fill-mode: both;
}

.b10 {
	-webkit-animation: fadeInDown 0.6s 5.4s;
	-webkit-animation-fill-mode: both;
}

.flag {
	border-radius: 4px;
	left: 0;
	position: absolute;
	top: 0;
}

.pictogram {
	left: 60px;
	position: absolute;
	top: 12px;
}

.logo {
	position: absolute;
	right: 24px;
	top: 24px;
}



/**** Animations ****/

@-webkit-keyframes expandIn {
	0% {height: 0px;}	
	100% {height: 480px;}
}

@keyframes expandIn {
	0% {height: 0px;}	
	100% {height: 480px;}
}

.expandIn {
	-webkit-animation-name: expandIn;
	animation-name: expandIn;
}

@-webkit-keyframes expandIniPhoneL {
	0% {height: 0px;}	
	100% {height: 390px;}
}

@keyframes expandIniPhoneL {
	0% {height: 0px;}	
	100% {height: 390px;}
}

.expandIniPhoneL {
	-webkit-animation-name: expandIniPhoneL;
	animation-name: expandIniPhoneL;
}

@-webkit-keyframes expandIniPhoneP {
	0% {height: 0px;}	
	100% {height: 310px;}
}

@keyframes expandIniPhoneP {
	0% {height: 0px;}	
	100% {height: 310px;}
}

.expandIniPhoneP {
	-webkit-animation-name: expandIniPhoneP;
	animation-name: expandIniPhoneP;
}

@-webkit-keyframes fadeIn {
	0% {opacity: 0;}	
	100% {opacity: 1;}
}

@keyframes fadeIn {
	0% {opacity: 0;}	
	100% {opacity: 1;}
}

.fadeIn {
	-webkit-animation-name: fadeIn;
	animation-name: fadeIn;
}

@-webkit-keyframes fadeInDown {
	0% {
		opacity: 0;
		-webkit-transform: translateY(-10px);
	}

	100% {
		opacity: 1;
		-webkit-transform: translateY(0);
	}
}

@keyframes fadeInDown {
	0% {
		opacity: 0;
		transform: translateY(-10px);
	}

	100% {
		opacity: 1;
		transform: translateY(0);
	}
}

.fadeInDown {
	-webkit-animation-name: fadeInDown;
	animation-name: fadeInDown;
}



/**** iPad landscape ****/

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {
html, body {
	width: 1024px;
	overflow-x: hidden;
	min-height: 730px
}
header, footer {
	width: 90%;
}
footer p {
	width: 850px;
}
article {
	left: 50%;
	margin: 20px 0 0 -332px;
	position: relative;
	top: 0;	
}
}



/**** iPad portrait ****/

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
html, body {
	width: 768px;
	overflow-x: hidden;
	max-height: 1024px
}
header, footer {
	width: 90%;
}
footer p {
	width: 700px;
}
footer {
	margin: 0 0 0 -350px;
}
}



/*** iPhone landscape ****/

@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (orientation: landscape) {
html, body {
	width: 480px;
	height: 835px;
	overflow-x: hidden;
}
header, footer {
	width: 90%;
}
header h1 {
	text-align: center;
	padding-top: 10px;
}
article {
	left: 50%;
	margin: 40px 0 0 -230px;
	position: relative;
	top: 0;	
}
footer p {
	width: 400px;
}
footer {
	margin: 0 0 0 -200px;
}
.twitter-share-button {
	margin: 0px 230px 0 0;
}

.twitter-follow-button {
	margin: -20px 90px 0 0;
}
#table {
	height: 390px;
	width: 460px;
	-webkit-animation: expandIniPhoneL 1s 1.2s;
	-webkit-animation-fill-mode: both;
}
hgroup h1, hgroup h2 {
	padding-left: 100px;
}
hgroup h1 {
	font-size: 19pt;
}
hgroup h2 {
	font-size: 12pt;
}
hgroup h3 {
	font-size: 11pt;
	margin: -30px 20px 0 0;
}
#bar {
	height: 26px;
	width: 440px;
	font-size: 12pt;
	margin-bottom: 4px;
}
#bar p {
	margin-left: 17px;
	width: 285px; 
}
.flag {
	max-height: 26px;
	max-width: 39px;
}
span.c {
	margin-left: 55px;
}
.b1, .b2, .b3, .b4, .b5, .b6, .b7, .b8, .b9, .b10 {
	-webkit-animation: fadeInDown 0.6s 2.7s;
	-webkit-animation-fill-mode: both;
}
.pictogram {
	left: 50px;
	max-height: 60px;
	max-width: 37px;
}
.logo {
	max-height: 26px;
	max-width: 55px;
	right: 20px;
	top: 20px;
}
}



/*** iPhone portrait ****/

@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (orientation: portrait) {
html, body {
	width: 320px;
	overflow-x: hidden;
}
header, footer {
	width: 90%;
}
header h1 {
	font-size: 20pt;
	text-align: center;
	padding-top: 10px;
}
article {
	left: 50%;
	margin: 40px 0 0 -150px;
	position: relative;
	top: 0;	
}
.twitter-share-button {
	margin: 0px 160px 0 0;
}

.twitter-follow-button {
	margin: -20px 20px 0 0;
}
#table {
	height: 310px;
	width: 300px;
	-webkit-animation: expandIniPhoneP 1s 1.2s;
	-webkit-animation-fill-mode: both;
}
hgroup h1, hgroup h2 {
	padding-left: 68px;
}
hgroup h1 {
	font-size: 13pt;
	padding-top: 10px;
}
hgroup h2 {
	font-size: 8.5pt;
	padding-bottom: 5px;
}
hgroup h3 {
	font-size: 7.5pt;
	margin: -20px 5px 0 0;
}
#bar {
	height: 22px;
	width: 280px;
	font-size: 9pt;
	margin-bottom: 3px;
}
#bar p {
	margin-left: 7px;
	width: 180px; 
}
.flag {
	max-height: 22px;
	max-width: 33px;
}
span.c {
	margin-left: 40px;
}
.pictogram {
	left: 35px;
	max-height: 40px;
	max-width: 25px;
	top: 9px;
}
.logo {
	max-height: 18px;
	max-width: 38px;
	right: 5px;
	top: 13px;
}
footer p {
	font-size: 11pt;
	width: 280px;
}
footer {
	margin: 0 0 0 -140px;
}
}