style.css

@font-face {
    font-family: 'Ultra';
    src: url('/font/Ultra-webfont.eot');
    src: url('/font/Ultra-webfont.eot?#iefix') format('embedded-opentype'),
         url('/font/Ultra-webfont.woff') format('woff'),
         url('/font/Ultra-webfont.ttf') format('truetype'),
         url('/font/Ultra-webfont.svg#ultraregular') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'RalewayBold';
    src: url('/font/raleway-extrabold-webfont.eot');
    src: url('/font/raleway-extrabold-webfont.eot?#iefix') format('embedded-opentype'),
         url('/font/raleway-extrabold-webfont.woff2') format('woff2'),
         url('/font/raleway-extrabold-webfont.woff') format('woff'),
         url('/font/raleway-extrabold-webfont.ttf') format('truetype'),
         url('/font/raleway-extrabold-webfont.svg#ralewayextrabold') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'RalewayMedium';
    src: url('/font/raleway-medium-webfont.eot');
    src: url('/font/raleway-medium-webfont.eot?#iefix') format('embedded-opentype'),
         url('/font/raleway-medium-webfont.woff2') format('woff2'),
         url('/font/raleway-medium-webfont.woff') format('woff'),
         url('/font/raleway-medium-webfont.ttf') format('truetype'),
         url('/font/raleway-medium-webfont.svg#ralewaymedium') format('svg');
    font-weight: normal;
    font-style: normal;
}

body {
	margin: 0;
	margin-bottom:7em;
	background: linear-gradient(#eee, #fff 10%);
	background-attachment: fixed;
	font-family: RalewayMedium, Lucida, 'Lucida Grande', sans-serif;
	font-weight: normal;
}
h1, h2, h3, h4 { font-family: RalewayBold; font-weight: normal; }

h1, h2, #call ol li:before { font-family: 'Ultra'; font-weight:100; line-height:1.1em; }
h3 span, ul#prop li a span { color: #0098a2; font-family: 'Ultra'; font-weight:100; font-size: 1.3em;}
h1 { font-size:4em; text-align:center; color: #333; margin: .8em 1em .3em -2em; x-webkit-text-stroke: 2px #057; xtext-shadow:black .05em .05em 0em; 
   	background: -webkit-linear-gradient(#0098a2, #0098a2 80%);
  	-webkit-background-clip: text;
  	-webkit-text-fill-color: transparent;
  	line-height:1.15em;
  	-webkit-transform: rotate(-3deg);
  	transform: rotate(-3deg);
}
h1 div { line-height:.8em;}
h2 { font-size:2.5em; text-align: center; margin: .5em 0 0 0; }
/*#maincont { display: relative;} */
h2#countdown {
	position: absolute;
	top: 3em;
	right: 10%;
	margin: 0 auto;
	text-align: center;
	font-family: RalewayBold, Lucida, 'Lucida Grande', sans-serif;
	font-size: 1em;
	font-weight: normal;
	color: #e53414;
	opacity: 0;
	-webkit-transition: opacity .3s;
	transition: opacity .3s;
}
h2#countdown div {
	font-family: 'Ultra';
	font-size:5em;
	line-height:1em;
	font-weight: normal;
}
h3 { font-size: 1.4em; }
h3.now { font-family:'RalewayMedium'; font-weight: 400; margin: 2em 0; line-height: 1.35em;}
h3.join { text-align: center; margin: 2.5em 0 3em 0; }
h3.join:before {
	content: "☟";
	color: #ddd;
	font-size: 5em;
	position: absolute;
	z-index: -1;
	left: 50%;
	margin-left: -.5em;
	margin-top: -.5em;
}

abbr { border-bottom: 1px dashed #999;}

.cont {
	margin: 0 auto;
	max-width:760px;
	box-sizing: border-box;
}
#call.cont { background: #0098a2; color: #fff; margin-top: 3em; padding: .1em 0;}
#call.cont p, #call.cont form {
	margin: 1em 2em; 
}

#callform {
	overflow: hidden;
}
#callinput {
	margin-top:1em;
	text-align: center;
	padding: .5em 0;
}
#phonenumber {
	background: #fff;
	display: inline-block;
	border: 2px inset #ccc;
	padding: .2em;
}
#callinput select {
	font-size:.8em;
	position: relative;
	top: -.2em;
}
#callinput input[type=submit] {
	-webkit-appearance: none;
	font-size: 1em;
	border: 0;
	cursor: pointer;
}
#callform #thankyou { display: none; text-align: center; padding: 1em; line-height:1.7em;}
#callform #thankyou h3 { display: inline;}

#callinput input[type=submit], #thankyou a {
	padding: .4em .6em;
	background: #f5ab00;
	color: #fff;
	border-radius: 1em;
	text-decoration: none;
}
#callinput input[type=tel] {
	border: 0;
	font-size: 1.2em;
}
#mepprofile {
	width: 73%;
	overflow: hidden;
	background: #eee;
	color: #000;
	margin: 0 auto;
	box-shadow: .2em .2em 1em rgba(0,0,0,.4);
	position: relative;
}
#mepprofile h3#mep_name {
	font-size: 1.3em;
}
#mep_party {
	height: 1.3em;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
}
#mepprofile #showmepcontainer {
	position: absolute;
	bottom: .7em;
	width: 100%;
	font-size:.8em;
	margin-top: .5em;
	padding-right: .5em;
	padding-left: 110px;
	box-sizing: border-box;
	text-align: right;
	opacity: .6;
}
#timeoverlay {
	display: none;
	width: 300px;
	overflow: hidden;
	background: #eee;
	color: #000;
	box-shadow: .2em .2em 1em rgba(0,0,0,.4);
	position: absolute;
	z-index: 98;
	margin-top: 30px;
	padding: 20px;
}
#timeoverlay h3 {
	padding:0 !important;
}

abbr.help {
	display: inline-block;
	background: #fff;
	width:1.5em;
	height: 1.5em;
	border-radius: .75em;
	text-align: center;
	font-weight: bold;
	border: 0;
}

#lang { background: #0098a2; padding: .2em 0;}
#lang select { background: none; color: #fff; }
#lang select option { color: #000; }

ul#prop { height: 5.5em; clear:both; list-style: none; margin: 2em 0 0 0; padding:0; overflow: hidden; background: linear-gradient(90deg, #ccc, white 4%, white 96%, #ccc); xbox-shadow: inset 0 0 1em 0 rgba(0,0,0,.2);}
ul#prop li { display: none; margin:0; padding:0; float:left; width:25%; -webkit-transition: margin-left .1s, margin-right .1s, opacity .2s; transition: margin-left .1s, margin-right .1s, opacity .2s; opacity: 0; cursor: pointer; border-right: 2px dotted #ccc; box-sizing: border-box; }
ul#prop li:nth-child(1),
ul#prop li:nth-child(2),
ul#prop li:nth-child(3),
ul#prop li:nth-child(4) { display: block; opacity: 1;}
ul#prop li a { display: block; height: 4.5em; font-size: 1.2em; padding-top:.3em; text-decoration: none; color:inherit; text-align: center; /* border-top-left-radius: .5em; border-top-right-radius: .5em; */ }
ul#prop li a span { display: block; }

/*
ul#prop { clear:both; list-style: none; margin: 2em 0; padding:0 0 3em 0; overflow: scroll; height: 15.5em; box-shadow: inset 0 0 1em 0 rgba(0,0,0,.4);}
ul#prop li { margin:0; padding:0; cursor: pointer; }
ul#prop li a { display: block; font-size: 1.1em; margin-top:.2em; margin-right:.5em; text-decoration: none; color:inherit; border-top-left-radius: .5em; border-top-right-radius: .5em; padding:.3em .6em; }
ul#prop li a span { ;}
*/
a.btn {
  background: #0098a2;
  padding: .3em 1em;
  color: #fff;
  display: block;
  text-decoration: none;
  font-weight: bold;
  font-size: 1.5em;
  border-radius: 1em;
  margin-top: .5em;
  text-align: center;
  width: 7em;
  max-width: 70%;
  margin: .7em auto 0 auto;
}

iframe#yt { max-width:100%; }
iframe { border: 0; margin: 0 auto; }
a { color: inherit; }
p { line-height: 1.4em;}

h3 u, #call u { background: #ffe8b9; text-decoration: none; padding: 0 .2em;}
#call u { color: #000;}

strong.but { font-family: RalewayBold; font-weight: normal; color: #e53414; }
#call ol li strong { font-family: RalewayBold; font-weight: normal; }
h3.but { background: #e53414; color: #fff; border-radius:2em; padding: .15em; margin-top: 2em;}
h3.but span { display: inline-block; background: #fff; color: #e53414; width:2.5em; height:2.5em; border-radius:2em; line-height:0; padding-top:1.25em; padding-left:.2em; box-sizing:border-box; margin-right: .2em; }
p.but { color: #e53414; margin-bottom: 2em;}

ol#agenda li { display: none;}

#propcontainer { position: relative;}
.popover { display: none; background: #eee; width:100%; padding: 1.2em; box-sizing:border-box; overflow: hidden; color: #666; line-height:1.3em; }
.popover img { border-radius: .4em; float: left; margin-right: 1em }
.popover h3 { margin: 0 0 .2em 0; color: #000;}
.popover .wrong { color: #666; margin-bottom: .8em; margin-top: .5em;}
.popover .right a { margin-left: .5em; color: #999;}

body.state-atcall #callnow { display: none; }
#callnow { position: fixed; left:0; bottom: 0; width:100%; box-sizing: border-box; background: #0098a2; padding: .7em 1em; color: #fff; box-shadow: #fff 0 -.3em 1em; z-index: 99; text-align: center; cursor: pointer;}
#callnow h3 { margin: 0;}
#callnow h3 span { color: #fff; }
a.nav { position: absolute; box-sizing: border-box; display: block; top: 0; font-size: 3em; text-decoration: none; padding: .05em .1em; background: #f5ab00; color: #fff; height: 1.3em; width: 1.3em; margin-top:.3em; border-top-right-radius: 0.75em; border-bottom-right-radius: 0.75em;}
a#prev { -webkit-transform: rotate(-180deg); transform: rotate(-180deg); left: -1.3em; }
a#next { right: -1.3em; }
a.nav:hover { background-color: #ffe8b9 }

#call h2 { font-size: 2.8em; }
#call ol { list-style-type: none; counter-reset: ol-counter; margin: 1em 1.5em .5em; padding: 1em; background: #fff; color: #000; border-radius: 1em; position: relative;}
#call ol:before { content: ""; width: 0; height: 0; position: absolute; top: -1.9em; border: 1em solid transparent; border-bottom-color: #fff;}
#call h3 { margin: 0; xborder-top: 3px dotted #fff; padding-top: .5em; padding-left: 1.6em; xbackground:linear-gradient(#279, #0098a2);}
#call ol li {
	padding-left: 3em;
	margin-top: 1em;
	line-height: 1.3em;
	margin-bottom: 1em;
}
#call ol li:before {
	content: counter(ol-counter);
	counter-increment: ol-counter;
	width:1.5em; height:1.5em; 
	display: block;
	float: left;
	background: #e53414;
	color: #fff;
	border-radius: 0.75em;
	text-align: center;
	margin-right: .3em; margin-left: -1.8em;
	line-height: 1.5em;
	font-size: 1.8em;
}
#call #what { float: right; margin-right: 2em; margin-top: 1em;}
#call ol li .am {
}
#call ol li .do:before {
	content: "➜ ";
}
#call ol li .tip {
	background: url(img/lightbulb.png) top left no-repeat;
	padding-left: 1.2em;
	color: #888;
}
#call ol li .do {
	color: #0098a2;
	margin: .2em 0;
}
#call .showmore { text-align: center; color:rgba(255,255,255,.6); font-size:.8em; margin-bottom:1em; }

.share {
	width: 280px;
	margin: 3em auto 5em;
}
.share a img {
	width: 130px;
	border-radius: .5em;
}
.share a+a {
	margin-left: 15px;
}

h2#tell {
	float: left;
	width: 30%;
	-webkit-transform: rotate(-2deg);
	transform: rotate(-2deg);
	line-height: 1em;
}
#icalled {
	float: right;
	width:28%;
}

#credits {
	color: #bbb;
	font-size:.7em;
	text-align: center;
}

#propcontainer.state-lsr li.lsr a,
#propcontainer.state-geoblocking li.geoblocking a,
#propcontainer.state-borders li.borders a,
#propcontainer.state-contracts li.contracts a,
#propcontainer.state-quotes li.quotes a,
#propcontainer.state-link li.link a,
#propcontainer.state-publicdomain li.publicdomain a,
#propcontainer.state-libraries li.libraries a,
#propcontainer.state-panorama li.panorama a,
#propcontainer.state-education li.education a,
#propcontainer.state-term li.term a,
#propcontainer.state-drm li.drm a,
#propcontainer.state-filesharing li.filesharing a
{
	background:#eee;
}
#propcontainer.state-lsr #lsr,
#propcontainer.state-geoblocking #geoblocking,
#propcontainer.state-borders #borders,
#propcontainer.state-contracts #contracts,
#propcontainer.state-quotes #quotes,
#propcontainer.state-link #link,
#propcontainer.state-publicdomain #publicdomain,
#propcontainer.state-libraries #libraries,
#propcontainer.state-panorama #panorama,
#propcontainer.state-education #education,
#propcontainer.state-term #term,
#propcontainer.state-drm #drm,
#propcontainer.state-filesharing #filesharing
{
	display: block;
}
body.state-lsr ol#agenda li.lsr,
body.state-geoblocking ol#agenda li.geoblocking,
body.state-borders ol#agenda li.borders,
body.state-contracts ol#agenda li.contracts,
body.state-quotes ol#agenda li.quotes,
body.state-link ol#agenda li.link,
body.state-publicdomain ol#agenda li.publicdomain,
body.state-libraries ol#agenda li.libraries,
body.state-panorama ol#agenda li.panorama,
body.state-education ol#agenda li.education,
body.state-term ol#agenda li.term,
body.state-drm ol#agenda li.drm,
body.state-filesharing ol#agenda li.filesharing
{
	display: block;
}

body.state-noselection ol#agenda li.lsr,
body.state-noselection ol#agenda li.geoblocking,
body.state-noselection ol#agenda li.quotes,
body.state-noselection ol#agenda li.panorama {
	display: block;
}

body.state-lsr #lsr a.btn:before,
body.state-geoblocking #geoblocking a.btn:before,
body.state-borders #borders a.btn:before,
body.state-contracts #contracts a.btn:before,
body.state-quotes #quotes a.btn:before,
body.state-link #link a.btn:before,
body.state-publicdomain #publicdomain a.btn:before,
body.state-libraries #libraries a.btn:before,
body.state-panorama #panorama a.btn:before,
body.state-education #education a.btn:before,
body.state-term #term a.btn:before,
body.state-drm #drm a.btn:before,
body.state-filesharing #filesharing a.btn:before
{
	content: "✓ ";
}
a.btn:active::before {
	color: #e53414;
}


@media screen and (max-width: 880px) { 
	h2#countdown { right: 5%; width: 6em;}
	.cont {
		max-width:90%;
	}
	ul#prop li {
		width: 33.3%;
	}
	#propcontainer {
		width: 90%;
		left: 5%;		
	}
	.share { width: 220px;}
	.share a img {
		width: 100px;
		height: 100px;
	}
	#mepprofile {
		width: 80%;
	}
	iframe.yt { width: 100%;}
}

@media screen and (max-width: 660px) { 
	h1 { font-size: 3.2em;}
	h2#countdown { right: .5em; }
	h2#countdown div { font-size: 3em;}
	.cont {
		max-width:95%;
	}
	ul#prop li {
		width: 50%;
	}
	#propcontainer {
		width: 80%;
		left: 10%;		
	}
	.popover img {
		width: 120px;
		height: 120px;
	}
	#mepprofile {
		width: 90%;
	}
	h2#tell, #icalled {
		float: none;
		width: 100%;
	}
	#icalled {
		width: 70%;
		margin: 1em auto 0;
	}
	.share {
		margin-top: 1em;
	}
}

@media screen and (max-width: 440px) { 
	h1 { font-size: 2.2em;}
	h2#countdown {
		position: static;
	}
	h3.now { margin-top: 1em;}
	ul#prop li {
		width: 100%;
	}
	#propcontainer {
		width: 70%;
		left: 15%;		
	}
	.popover {
		padding-top: 0;
	}
	.popover img {
		float: none !important;
		display: block;
		width: 170px;
		height: 170px;
		margin-right: 0;
		margin: 0 auto;
	}
	#mepprofile #showmepcontainer {
		position: static;
		margin-bottom: .5em;
	}
	#mepprofile {
		width: 100%;
	}
	#call.cont p, #call.cont form {
		margin: .5em 1em;
	}
	#call ol {
		margin: .5em .75em .5em;
	}
	#call #what {
		display: none;
	}
}

abbr {
    position: relative;
}

abbr:hover::after {
    position: absolute;
    bottom: 100%;
    left: 100%;
    display: block;
    padding: 1em;
    background: #fff;
    color: #000;
    font-size: .9em;
    content: attr(title);
    width: 250px;
    box-shadow: 0 0 1em rgba(0,0,0,.5);
}

#mailbutton {
	padding: 0.4em 0.6em;
	background: #F5AB00 none repeat scroll 0% 0%;
	color: #FFF;
	border-radius: 1em;
	text-decoration: none;
	border: 0px none;
	cursor: pointer;
	width: auto;
}

#email {
	width: 73%;
	text-align: center;
}