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-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}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}body,html{width:100%;height:100%}*{box-sizing:border-box;-moz-box-sizing:border-box}

/*
Colour 1 : 10, 2, 71
Colour 2 : 20, 12, 81
Colour 3 : 111, 164, 218

Weights: 400 (i), 700, 800
*/

body {font-family: "Open Sans",sans-serif;font-weight:400;color:#666;font-size:14px;background:#f6f6f6;}
body > header {position:fixed;left:0;top:0;bottom:0;padding:3em;width:20em;background:rgb(10, 2, 71);color:#fff;overflow:hidden;}
body > header h2 {opacity:0.8;}
h1 {font-weight:400;font-size:2.5em;max-width:7.5em;font-family: "modesto-text",sans-serif;line-height:1.2em;}
h2 {font-weight:400;font-size:1.8em;font-family: "modesto-text",sans-serif;}
h3 {margin-top:1em;font-size:1.3em;opacity:0.5;font-style:italic;font-family: "modesto-text",sans-serif;}

section {padding:3em;overflow:auto;}
section h2 {margin-bottom:1em;}
.day {overflow:auto;clear:both;}
.day + .day {margin-top:2.5em;}
.day .heading {font-size:1.3em;font-weight:700;margin-bottom:1em;}

section:not(#intro) h2 + p {color:#999;margin-bottom:2em;font-style:italic;}

section:not(#intro) + section {border-top:1px dotted #ddd;margin-top:0.5em;}

.match {background:#fff;border-left:3px solid #ddd;padding:1.8em;display:block;float:left;width:23.5%;}
.match.parc-des-princes {border-color:#4494d2;}
.match.stade-auguste-delaune {border-color:#ffd556;}
.match.stade-des-lumieres {border-color:#255477;}
.match.stade-de-la-route-de-lorient {border-color:#ff4949;}
/*.match.nice {border-color:#555;}*/
.match.allianz-riviera {border-color:#da3862;}
.match.stade-du-hainaut {border-color:#aa7fc5;}
.match.stade-des-alpes {border-color:#c1a962;}
.match.stade-de-la-mosson {border-color:#37c76d;}
.match.stade-oceane {border-color:#76d0e3;}
.match + .match {margin-left:2%;}
.match time {opacity:0.8;color:#aaa;padding-left:1.4em;background:url(clock.svg) no-repeat left center;height:13px;line-height:13px;background-size:12px;}
.match address {padding-left:1.4em;background:url(pin.svg) no-repeat left center;height:13px;line-height:13px;background-size:12px;color:#999;}
.match .teams {text-align:center;min-height:4em;margin:1.6em 0 2.8em;}
.match .teams .versus {line-height:4em;font-weight:700;opacity:0.5;width:10%;}
.match .teams > span {float:left;}
.match .teams .team {width:45%;font-weight:700;position:relative;}
.match .teams .team .flag {margin-bottom:0.7em;}

.played .teams .team:after {content:attr(data-score);position:absolute;right:50%;margin-right:-40px;height:16px;width:16px;text-align:center;line-height:16px;font-size:0.8em;border-radius:100%;background:#777;color:#fff;top:-5px;font-weight:700;}
.played .teams .team.win:after {background:#66c64c;}
.played .teams .team.loss:after {background:#c64c4c;}

#main {padding-left:20em;}

#intro {background:rgb(60, 73, 110);}
#intro p {margin-top:0.8em;font-style:italic;color:rgba(255,255,255,0.9);line-height:1.5em;max-width:46em;font-size:1em;}
#intro p small {opacity:.4;font-size:.9em;}
#intro p small a {color:#fff;}
#intro h2 {color:rgba(255,255,255,1);}

a {cursor:pointer;text-decoration:none;color:rgb(111, 164, 218);border-bottom:1px dotted transparent;}
a:hover {border-bottom:1px dotted rgb(111, 164, 218);}

.cta {background:rgb(111, 164, 218);padding:1em;color:#fff;font-weight:700;display:inline-block;border-radius:4px;text-align:center;border-bottom:none!important;
transition: all .2s;
-moz-transition: all .2s;
-webkit-transition: all .2s;
-o-transition: all .2s;
}

body > header > div {position:relative;height:100%;z-index:5;}
body > header .cta {background:rgba(255,255,255,0.15) url(calendar.svg) no-repeat 1em center;margin:2em 0 .5em;/*position:absolute;bottom:0;left:0;*/width:100%;text-align:left;padding:1.1em 1em .9em 3em;}
body > header .cta:hover {background-color:rgba(0,0,0,0.2);}
body > header .cta + .cta {margin:.5em 0 2em;background-image:url(rss.svg);}
body > header h2 {margin-top:0.5em;}

body > header footer {position:absolute;bottom:0;left:0;right:0;font-size:.8em;opacity:0.5;}
body > header a {color:#fff;margin-top:1em;border-bottom:none !important}
body > header p {margin-top:1em;}
body > header p a {font-style:italic;padding-left:1.2em;background:transparent url(open.svg) no-repeat left center;display:block;padding-top:0.2em;background-size:10px;}
body > header footer a {float:left;line-height:17px;display:inline-block;}
body > header a.social {float:right;width:16px;height:16px;display:block;background:url(dribbble.svg) no-repeat center;}
body > header a.social + a.social {margin-right:0.5em;background:url(twitter.svg) no-repeat center;}

#leaf {position:fixed;top:70%;left:0;margin:-12em;width:28em;opacity:0.2;z-index:-1;}

body > header br {display:none;}

h2 span {display:none;}

@media screen and (max-width:1620px){

section {padding:2.4em;}
body > header {padding:2.5em;width:20em;}
#main {padding-left:18em;}
h1 {font-size:2.7em;}
#leaf {width:30em;margin:-15em;}
.match time {font-size:.85em;}
.match address {font-size:0.85em;height:12px;line-height:12px;}
.match {padding:1.5em;}

}

@media screen and (max-width:1500px){

body {font-size:13px;}
h1 {font-size:2em;}
body > header p a {font-size:.9em;}
body > header {padding:2.5em 2em;width:18em;}
.match .teams {min-height:3.5em;}
.match .teams .team h5 {font-size:.9em;}
.match .teams .team .flag {width:4em;}
	
}

@media screen and (max-width:1270px){

body > header {position:relative;width:100%;}
#main {padding-left:0;}
body > header .cta {position:absolute;top:0;right:0;width:13em;margin-top:0;}
body > header .cta + .cta {margin-top:4em;}
body > header p {display:inline-block;}
body > header p + p {margin-left:1em;}
body > header footer {position:static;}
#leaf {position:absolute;left:45%;width:60em;top:30%;}
body > header h2 {margin-top:0.3em;}
h3 {margin-top:0.7em;}
	
}

@media screen and (max-width:1200px){

.match {width:32%;}
.match:nth-child(5) {margin-left:0;margin-top:1em;}
#leaf {width:50em;top:45%;margin:-10em;}

}

@media screen and (max-width:900px){
	
body {font-size:12px;}	
#intro p {font-size:1.1em;}	
.match .teams .team .flag {width:35px;}
.match .teams {margin:1em 0;}
#leaf {left:45%;width:45em;top:35%;}
h3 {display:none;}

}

@media screen and (max-width:800px){

.match {width:49%;}
.match:nth-child(4) {margin-left:0;margin-top:1em;}
.match:nth-child(5) {margin-left:2%;}
body > header br {display:block;}
body > header .cta {position:static;}
body > header .cta + .cta {margin-left:1em;margin-top:2em;margin-bottom:0;}
body > header a.social {float:left;margin-right:0.5em;}
body > header a.social + a.social + a {margin-left:0.5em;}
body > header footer {margin-top:0.5em;}
#leaf {left:auto;top:5%;right:10%;margin-right:-25em;width:48em;}
	
}

@media screen and (max-width:700px){

h2 {font-size:1.6em;}
#leaf {width:35em;top:20%;}
body > header p, body > header p + p {margin-left:0;display:block;}
body > header a.social {float:right;}
body > header a.social + a.social + a {margin-left:0;}
body > header a.social {margin-right:0;}
#leaf {width:43em;top:35%;right:5%;}
h2 span {display:none;}

}

@media screen and (max-width:560px){

body {font-size:13px;}
h1 {font-size:2.8em;}
.match {width:100%;margin-left:0 !important;}
.match + .match {margin-top:1em;}
body > header .cta {display:block;margin-top:2em;font-size:1.2em;padding-top:1em;}
body > header .cta + .cta {margin-left:0;margin-top:1em;}

}

@media screen and (max-width:400px){

h1 {font-size:12vw;}

}

@media screen and (max-width:328px){

h1 {font-size:10vw;}

}