@font-face { font-family: Maven-B; src: url("./MavenPro-Bold.ttf"); font-display: auto;}
@font-face { font-family: Maven-M; src: url("./MavenPro-Medium.ttf"); font-display: auto;}
@font-face { font-family: Maven-R; src: url("./MavenPro-Regular.ttf"); font-display: auto;}
/* -------------------- */
header { background: white; position: absolute; width: 100%; margin-right: auto; margin-left: auto; z-index: 2; font-family: Maven-B, sans-serif;}
header .titre { float: left; width: 200px; height: 80px; margin-left: 10%; margin-top: 0; transition: all 0.5s;}
header .navigation { float: right; display: block; padding: 0; margin: 0 10% 0 0; width: 300px; height: 80px; }
header .navigation ul { height: 100%; margin: auto; padding: 0; }
header .navigation ul li { display: block; list-style: none; text-align: center; float: left; width: 24%; margin: 33px auto; transition: font-size 0.3s; }
header .navigation li:hover { font-size: 110%; width: 25%;}
header .titre:hover { font-size: 110%; width: 25%; margin-top: -6px;}

body:before { content: ""; position: absolute; background: url(../images/fond.jpg); border-radius: 5px; z-index: -1; min-height: 600px; height: 100vh; width: 98vw; left: 1%; top: 85px; -webkit-filter: blur(2px); background-size: 100vw 100vh; -webkit-background-size: 100vw 100vh; -moz-background-size: 100vw 100vh; -o-background-size: 100vw 100vh; }

body { overflow-x: hidden; background: white; padding: 0; margin: 0; width: 100%; min-height: 100vh; color: black; font-family: Maven-M, sans-serif; }
body a { text-decoration: none; color: black; }
body .corps { clear: both; position: relative; padding: 2% 1% 1% 1%; margin-right: auto; margin-left: auto; top: 120px; background-color: rgba(255, 255, 255, 0.6); border-radius: 2%; min-height: 420px; width: 65%; background-size: 200px; }
body .corps table { width: 100%; height: 80%; text-align: center; margin: auto; }
body .corps table td { min-width: 33%; }
body .corps form > select { margin-left: 30px; }
body .corps textarea { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; width: 98%; min-width: 98%; max-width: 98%; resize: none; }
body .corps .col-1 { width: 45%; float: left; /*border: 1px solid blue;*/ }
body .corps .col-1 img { margin-top: 20px; border-radius: 5%; position: relative; left: 25%; }
body .corps .col-2 { width: 55%; float: right; padding-top: 5%; /*border: 1px solid red;*/ }
body .corps .col-3 { clear: left; width: 48.5%; margin-left: 1%; padding-top: 1%; text-align: justify; /*  border: 1px solid green;*/ }

body .button-chat { position: fixed; bottom: 0px; right: 0; height: 25px; -webkit-border-top-left-radius: 10px; -moz-border-radius-topleft: 10px; border-top-left-radius: 10px; background-color: white; color: black; font-weight: bold; padding: 1%; line-height: 130%; transition: height 0.5s ease-out; text-align: center; }
body .button-chat:hover { height: 50px; transition: height 0.5s ease-out, line-height 0.3s ease-out; }
body #messages { position: relative; padding: 5px; margin-left: 10px; word-wrap: break-word; max-width: 100%; }

body .navbutton { display: block; clear: both; height: 15px;}
body .backbutton { -webkit-border-top-left-radius: 10px; -moz-border-radius-topleft: 10px; border-top-left-radius: 10px; -webkit-border-bottom-right-radius: 10px; -moz-border-radius-bottomright: 10px; border-bottom-right-radius: 10px; position: absolute; top: 0; left: 0; float:left; width:50px; border: 1px rgba(0, 0, 0, 0.4) dashed; padding: 1%; }
body .nextbutton { -webkit-border-top-right-radius: 10px; -moz-border-radius-topright: 10px; border-top-right-radius: 10px; -webkit-border-bottom-left-radius: 10px; -moz-border-radius-bottomleft: 10px; border-bottom-left-radius: 10px; position: absolute; top: 0; right: 0; float: right; width: 75px; border: 1px rgba(0, 0, 0, 0.4) dashed; padding: 1%; }

.texte-titre { font-family: Maven-B, sans-serif; font-size: 150%; text-align: center; padding-top: 1%; padding-bottom: 2%; }
.texte-sous-titre { font-family: Maven-B, sans-serif; text-align: center; font-size: 110%; margin: -2% 1% 2% 1%;}

[class^="texte-simple"] {font-size: 110%; margin: 1%;}
[class^="texte-petit"] {font-size: 75%; margin: 1%; font-family: Maven-R, sans-serif;}
[class^="texte-gros"], [class^="texte-grand"] {font-size: 125%; margin: 1%; font-family: Maven-B, sans-serif;}
[class^="texte-gras"] {font-size: 110%; margin: 1%; font-family: Maven-B, sans-serif;}
[class^="texte-bas"] {font-size: 110%; padding: 3% 1%;}
[class$="centre"] { text-align: center; }
[class~="telechargement"],[class~="link"] { border-bottom: 1px dotted black; }

input, select {padding: 3px; border-radius: 5px; border: 1px #484848 solid; min-height: 15px;}
button { padding: 3px 6px; }

#second_tr { margin-top: 15px; }
#second_tr th { width: 10%; margin: 10%; font-weight: normal;}
#second_td { padding-top: 3%; }
#stats #td_right, #second_td:first-child  { border-right: 1px solid black }

::-webkit-scrollbar {
    width: 1px;
    background: black;
}

/* -------------------- */

@keyframes boldTilt{
	0%{font-weight: normal;}
	100%{font-weight: bold;}
}

@keyframes errorIncreasing {
    0% {width: 0;}
    100% { width: 100%;}
}

@keyframes showSlowly {
	0%, 50%{opacity: 0;}
	25%, 100%{opacity: 1;}
}


.popup {
	position: fixed;
    top: 20vh;
    left: 30vw;
    padding: 10px;
    display: block;
    width: 35vw;
    text-align: center;
    color: black;
    background-color: rgb(255, 255, 255);
    border-radius: 5px;
    z-index: 999;
    box-shadow: 0px 0px 5px 1px black;
    animation: 1s ease-in-out 0s 1 showSlowly;
}

.popup > #popup-close{
	display: block;
	margin: 15px auto 0 auto;
	
}

#lineID { animation: 5s linear 0s 1 errorIncreasing; }
#lineID_3s { animation: 3s linear 0s 1 errorIncreasing; }
#lineID, #lineID_3s { width: 100%; position: fixed; top: 0; left:0 ; border-top: 2px solid black;}
#lineID, #lineID_3s > svg { height: 2px; width: 100%; position: fixed; top: 0; left:0 ; }

#tips {	animation: boldTilt 0.5s infinite ; position: relative; display: inline-block; /* border-bottom: 1px dotted black; */}
#tips #tip { font-weight: normal !important; text-align: justify; visibility: hidden; background-color: rgba(0, 0, 0, 0.8); width: 340px; color: #fff; padding: 10px; border-radius: 6px;position: absolute;z-index: 1;}
#tips:hover #tip {visibility: visible;}

/* -------------------- */
footer { position: fixed; bottom: 0; left:0 ; width: 100%; height: 15px; background-color: white; color: black; text-align: center; font-size: 10px; }

a span { position: absolute; margin-top: 3%; margin-left: -15%; color: black; background: rgba(255, 255, 255, 0.9); padding: 15px; border-radius: 3px; box-shadow: 0 0 2px rgba(0, 0, 0, 0.5); transform: scale(0) rotate(-12deg); transition: all .25s; opacity: 0; }
a:hover span, a:focus span { transform: scale(1) rotate(0); opacity: 0.7; }

/* Not by me. Credits to sixrevisions.com */
.ghost-button-full-color { display: inline-block; width: 200px; padding: 8px; color: #fff; background-color: transparent; border: 2px solid #fff; text-align: center; outline: none; text-decoration: none; transition: color 0.3s ease-out, background-color 0.3s ease-out, border-color 0.3s ease-out; }
.ghost-button-full-color:hover, .ghost-button-full-color:active { background-color: gray; border-color: black; color: black; transition: color 0.3s ease-in, background-color 0.3s ease-in, border-color 0.3s ease-in; }
.ghost-button-size-transition { display: inline-block; width: 120px; height: 20px; line-height: 15px; margin: 1% auto; padding: 3%; color: black; border: 2px solid #151515; text-align: center; vertical-align: middle; outline: none; text-decoration: none; transition: width 0.3s ease-out, height 0.3s ease-out, line-height 0.3s ease-out; font-size: 120%; }
.ghost-button { display: inline-block; width: 120px; height: 20px; line-height: 15px; margin: 1% auto; padding: 3%; color: black; border: 2px solid #151515; text-align: center; vertical-align: middle; outline: none; text-decoration: none; transition: width 0.3s ease-out, height 0.3s ease-out, line-height 0.3s ease-out; font-size: 120%; }
.ghost-button-size-transition:hover, .ghost-button-size-transition:active { width: 150px; height: 30px; border-width: 3px; font-size: 130%; transition: width 0.1s ease-in, height 0.1s ease-in, line-height 0.1s ease-in; }

.turbolinks-progress-bar { height: 2px; background-color: black; }