/* Couleurs :	Rouge : #e30613 | Gris clair : #e5e5e5 */
:root{
	--team1: #e30613;
	--team2: #9d2236;
	--blue: #c2e6e5;
	--grey: #eceeef;
	--black: #282828;
	--white: #fff;
	
	--my-blue: #29367a;
	--my-green: #7ed71e;
	--my-grey: #ccc;
	--agenda: 33px;
	--pc-width: 500px;
	--navbar: 65px;
}

body {
	font: 400 16px 'Roboto', Sans-serif;
	line-height: 1.5;
	color: var(--black);
	background-image: linear-gradient(to bottom, rgba(255, 255, 255, 1), rgba(243, 243, 243, 1));
	background-attachment: fixed;
	position: relative;
}
h1 {
	font-weight: 500;
	font-size: 27px;
	line-height: 1.5;
	color: var(--black);
}
h1 .fa {
	font-size: 16px;
	vertical-align: middle;
}
h2 {
	font-size: 19px;
	color: var(--black);
}
h3 {
	font-size: 17px;
	color: var(--black);
}
p {
	margin-bottom: 15px;
}
label {
	font-weight: 500;
}
img {
	max-width: 100%;
}
a {
	/*color: #e68f1e;*/
	color: var(--black);
}
a:hover {
	text-decoration: none;
	color: inherit;
}
a.link {
	font-size: 14px;
	text-decoration: underline;
	color: #777;
}
a.btn:not([href]) {
    color: #fff;
}
.underline {
	text-decoration: underline;
}
.notification {
	margin-bottom: 15px;
	padding: 15px;
	border-radius: 3px;
	font-size: 15px;
}
.notification p {
	margin: 0;
}
.error {
	background-color: #ffc9c9;
	color: #ac1818;
}
.success {
	background-color: #bdedbc;
	color: #045702;
}
input[name=email1], input[name=email2], input[name=email3] {
	display: none;
}

header {
	background-color: #002e78;
}
.logo {
	height: 120px;
}
.by {
	display: inline-block;
	vertical-align: bottom;
	font-weight: bold;
	color: #00213d;
}
.by img {
	height: 40px;
	vertical-align: bottom;
}
header .btn {
	font-size: 15px;
}
header .btn img {
	height: 19px;
}

footer {
	color: #fff;
}

.company-logo {
	max-height: 100px;
}

/* PC HOME */
.pc {
	height: 100vh;
	max-width: 1200px;
	margin: auto;
	display: flex;
	flex-direction: column;
	justify-content: center;
	font-size: 17px;
}
.pc img {
	max-height: 90vh;
	max-width: none;
}
.webapp-icon {
	margin-left: -5px;
	width: 100px;
}

/* NAVBAR */
#navbar {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	height: var(--navbar);
	background-color: #fff;
	box-shadow: 0 0 5px rgba(0, 0, 0, 0.25);
	z-index: 20;
	color: #fff;
}
/*.team1 #navbar {
	background-color: var(--team1);
}
.team2 #navbar {
	background-color: var(--team2);
}*/
.team1 #navbar a {
	color: var(--white);
}
.team2 #navbar a {
	color: var(--white);
}
#navbar img {
	width: 50px;
	vertical-align: top;
}
#navbar .fa {
	font-size: 31px;
	line-height: 50px;
	width: 50px;
	text-align: center;
}
.team1 #navbar .fa {
	color: var(--team1);
}
.team2 #navbar .fa {
	color: var(--team2);
}
#navbar .fa-calendar {
	font-size: 23px;
	vertical-align: top;
}
.timeline {
	position: relative;
	display: inline-block;
	/*width: calc(100% - 140px);*/
	width: calc(100% - 90px);
	margin: 0 15px;
	height: 50px;
	vertical-align: top;
}
.timeline .progress {
	height: 5px;
	margin-top: 22.5px;
	background-color: var(--grey);
}
.timeline span {
	position: absolute;
	top: 12.5px;
	left: 0%;
	background-color: #ddd;
	color: #fff;
	width: 20px;
	line-height: 20px;
	margin-left: -10px;
	text-align: center;
	font-size: 9px;
	border-radius: 50%;
}
#j7 {
	left: 50%;
}
#j14 {
	left: 100%;
}
.team1 .progress-bar {
	background-color: var(--team1);
}
.team2 .progress-bar {
	background-color: var(--team2);
}
/*.team2 .timeline .progress {
	background-color: var(--white);
}*/


/* HOME */
#home-screen {
	position: fixed;
	width: 100%;
	height: 100vh;
	/*background: #aedadb no-repeat center bottom url('../images/home.png');*/
	background: #c5eae9 no-repeat center bottom url('../images/home.png');
	background-size: contain;
	z-index: 30;
}
#home-screen img {
	max-width: 300px;
	width: 40%;
}
#home-screen p {
	font-size: 13px;
	font-weight: 500;
}
/*.home-button {
	position: absolute;
	bottom: 35%;
	left: 0;
	width: 100%;
}*/
.home-button div {
	display: inline-block;
	background-color: var(--team1);
	color: #fff;
	font-weight: 500;
	font-size: 18px;
	padding: .5rem 1.5rem;
	line-height: 1.5;
	border-radius: .25rem;
}

.home {
	position: relative;
	height: calc(100vh - 65px);
	max-width: var(--pc-width);
	margin: auto;
	background-color: var(--team1);
	background: url(../images/home.png) center;
	background-size: cover;
	text-align: center;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.home img {
	max-width: 75%;
}
.home .intro {
	color: #fff;
	font-size: 22px;
	font-style: italic;
	line-height: 3.5rem;
}
.home-block {
	display: block;
	height: calc(33.33vh - 32.5px);
	background-color: #fff;
	box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
}
.home-img {
	height: calc(100% - 50px);
	background: #ccc no-repeat center center;
	background-size: cover;
}
.hb-4 {
	height: calc(25vh - 26px);
}
.home .hb-4 h1 {
	font-size: 25px;
}
.home .hb-4 h2 {
	font-size: 18px;
	line-height: 42px;
}
.hb-4 .home-img {
	height: calc(100% - 42px);
}
.hb-5 {
	height: calc(20vh - 22.5px);
}
.home .hb-5 h1 {
	font-size: 22px;
}
.home .hb-5 h2 {
	font-size: 17px;
	line-height: 35px;
}
.hb-5 .home-img {
	height: calc(100% - 35px);
}

/*.home-block > div {
	position: absolute;
	bottom: 0;
	width: 100%;
}*/
/*.home img {
	height: 120px;
	width: 100%;
	display: block;
	box-shadow: 0 0 30px 30px rgba(0, 0, 0, 1) inset;
}*/
.home h1 {
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	font-size: 28px;
	font-weight: 300;
	background-color: rgba(0, 33, 61, 0.2);
	color: #fff;
	text-shadow: 0 0 3px #00213d;
}
.home h2 {
	line-height: 50px;
	font-weight: 400;
}

a.home-link {
	color: #fff;
	text-decoration: underline;
	font-size: 14px;
}

/* PAGE */
.page {
	position: relative;
	min-height: 100vh;
	background-color: #fff;
	margin: auto;
	padding-bottom: var(--navbar);
	max-width: var(--pc-width);
}
.page.no-img {
	padding-bottom: 0;
}
.bottom-img {
	position: absolute;
	bottom: 0;
	width: 100%;
	/*height: 30%;*/
	height: 180px;
	background: #ccc no-repeat center center url('../images/page.jpg');
	background-size: cover;
	/*background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));*/
	box-shadow: 0 120px 120px 0 rgba(255, 255, 255, 1) inset;
	z-index: 0;
}


/* QUESTION */
.button, a.button {
	display: inline-block;
	line-height: 1.5;
	border-radius: .25rem;
	background-color: var(--team1);
	color: #fff;
	font-weight: 500;
	padding: .5rem 1.5rem;
	border: none;
}
.button:focus {
	outline: 0px dotted;
}
.home .button {
	background-color: #fff;
	color: var(--team1);
}

/* SHEET LIST */
#sheets {
	margin: 0;
	list-style: none;
	/*background-image: linear-gradient(to bottom, rgba(255, 255, 255, 1), rgba(243, 243, 243, 1));*/
}
#sheets li {
	height: 85px;
	overflow: hidden;
	background-color: #fff; 
	box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
	line-height: 1.3;
}
#sheets li b {
	text-transform: uppercase;
	font-size: 10px;
	color: #bbb;
}
#sheets li h4 {
	font-size: 14px;
	margin: 0;
	color: #bbb;
}
#sheets li a h4 {
	color: var(--black);
}
#sheets li p {
	font-size: 14px;
	color: #bbb;
}
#sheets li a p {
	color: var(--black);
}
.sheet-img {
	height: 100%;
	width: 85px;
	float: left;
	background: #ccc no-repeat center center;
	background-size: cover;
}

/* SHEET */
.sheet h1 {
	font-size: 24px;
	line-height: 1.2;
}
.sheet h2 {
	border-bottom: solid 1px;
}
.sheet b {
	color: var(--team1);
}
.top-img {
/*	position: absolute;
	top: 0;*/
	width: 100%;
	height: 180px;
	background: #ccc no-repeat center center;
	background-size: cover;
	box-shadow: 0 45px 45px 0 rgba(255, 255, 255, 1) inset;
	/*z-index: -1;*/
	font-size: 16px;
}
.intro {
	/*font-weight: bold;*/
	font-style: italic;
	/*color: #777;*/
}
.tips {
	background-color: #d9dde0;
	/*color: #045702;*/
}
.tips h2 {
	/*color: #045702;*/
	border: none;
}


/* MATCH */
.max-10 {
	margin: 0 -10px;
}
.max-10 .fa-fw {
	width: 1.1em;
}
.rating .fa-star {
	color: #eceeef;
	font-size: 36px;
	cursor: pointer;
}
.rating .max-10 .fa-star {
	font-size: 31.5px;
}
.stars-1 .fa-star.on {
	color: var(--team1);
}
.stars-2 .fa-star.on {
	color: var(--team2);
}
/*.stars-1 {
	height: 36px;
}*/
.stars-1 div {
	display: inline-block;
	position: relative;
	width: 35px;
	height: 33px;
	margin: 0 6px; 
}
.stars-1 div .fa-star {
	position: absolute;
	top: 0;
	left: 0;
	width: 33px;
	overflow: hidden;
}
.average {
	color: var(--team1);
	font-weight: bold;
}


.next {
	color: var(--black);
	text-decoration: underline;
}
.rating p {
	font-size: 18px;
}
.rating .notification p {
	font-size: 15px;
}

/* COMMENTAIRES */
.suggestions label {
	display: block;
	text-align: left;
}
.suggestions label.on {
	background-color: var(--team1);
	/*background-color: rgba(243, 6, 19, 0.8);*/
	color: white;
}
.suggestions label.free {
	background-color: #eee;
}
/*.suggestions label.free-1 {	background-color: rgba(189, 237, 188, 0.2); }
.suggestions label.free-2 {	background-color: rgba(189, 237, 188, 0.4); }
.suggestions label.free-3 {	background-color: rgba(189, 237, 188, 0.6); }
.suggestions label.free-4 {	background-color: rgba(189, 237, 188, 0.8); }
.suggestions label.free-5 {	background-color: rgba(189, 237, 188, 1); }*/

.suggestions label.free-1 {	background-color: rgba(159, 237, 158, 0.2); }
.suggestions label.free-2 {	background-color: rgba(159, 237, 158, 0.4); }
.suggestions label.free-3 {	background-color: rgba(159, 237, 158, 0.6); }
.suggestions label.free-4 {	background-color: rgba(159, 237, 158, 0.8); }
.suggestions label.free-5 {	background-color: rgba(159, 237, 158, 1); }

/*.suggestions label.free-1 {	background-color: rgba(169, 237, 168, 0.2); }
.suggestions label.free-2 {	background-color: rgba(169, 237, 168, 0.4); }
.suggestions label.free-3 {	background-color: rgba(169, 237, 168, 0.6); }
.suggestions label.free-4 {	background-color: rgba(169, 237, 168, 0.8); }
.suggestions label.free-5 {	background-color: rgba(169, 237, 168, 1); }*/

.suggestions label p {
	font-weight: normal;
	font-size: 14px;
}

/* MUR DE MOTS */
.wall1, .wall1 h2 {
	color: var(--team1);
}
.wall2, .wall2 h2 {
	color: var(--team2);
}
.words {
	/*overflow-wrap: break-word;*/
	/*word-wrap: break-word;*/
	/*word-break: break-all;*/
/*	word-break: break-word;
	hyphens: auto;*/
}
.words span {
	/*white-space: nowrap;*/
	display: inline-block;
	line-height: 1.2;
	padding: 5px;
	vertical-align: middle;
}
#form-wall input[type=text] {
	line-height: 34px;
	width: calc(100% - 115px);
}

ul.trainings {
	list-style: none;
}
ul.trainings a {
	text-decoration: underline;
}
video {
	width: 100%;
}
audio {
	width: 100%;
}