@font-face {
    font-family: "Hot Spot";
    src: url('../fonts/Hot Spot.ttf') format('truetype');
}
@font-face {
    font-family: "Fast Forward";
    src: url('../fonts/Fast Forward.ttf') format('truetype');
}
@font-face {
    font-family: "Fifa";
    src: url('../fonts/Fifa.ttf') format('truetype');
}
body
{
    margin:0;
    padding:0;
    background-attachment:fixed;
    background-repeat: no-repeat;
    background-size:100% 100%;
    background-image:url("../img/fond.jpg");
    background-position:top center;
    /*Pour ne pas rendre le texte sélectionnable, évite les backgrounds bleus*/
    /*    -moz-user-select: none;  Firefox 
        -webkit-user-select: none;  Chrome, Safari, Opéra depuis la version 15 
        -ms-user-select: none;  Internet explorer depuis la version 10 et Edge 
        user-select: none;  Propriété standard */
}

nav
{
    font-family:'Fifa';
    font-size:30px; 
    height:50px;
    /*background:rgba(255,255,255,0.3);*/
    /*background:linear-gradient(0.25turn, #3f87a6, #ebf8e1, #f69d3c);*/
    background:linear-gradient(rgba(0,0,0,0)15%, rgba(0,0,255,0.7), rgba(0,0,0,0));
    /*box-shadow:0px 3px 6px black;*/ 
    margin:auto;
}
.navbar-nav
{
    text-align: center;
}
nav a
{
    text-align:center;
    margin:5px 20px;
    color:#A00;
    text-shadow:1px 1px 2px white;
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transition: .2s ease-in-out;
    transition: .2s ease-in-out;
}
nav a:hover
{
    color:#A00;
    text-shadow:1px 1px 2px yellow;
    -webkit-transform: scale(1.5);
    transform: scale(1.5);
}
.navbar
{
    text-align:center;
    margin:auto;
}
.menuLeft,
.menuRight
{
    vertical-align: top;
    width:15%;
    margin-top:30px;
    position:fixed;
    text-align:center;    
    display:inline-block;
    /*border:red 1px solid;*/
}
.menuLeft
{
    left:0;
}
.menuRight
{
    right:0;
}
.middle
{
    margin:20px 0px 50px 15%;
    color:white;
    font-size:20px;
    background-color:rgba(0,0,255,0.5);
    width:68%;
    min-height:300px;
    padding:20px;
    border-radius:15px;
    box-shadow:3px 3px 8px black;
    text-align:justify;
    display:inline-block;
    /*border:1px greenyellow solid;*/
}
img.presentation
{
    height:80px;    
}
footer
{
    bottom:0;
    left:0;
    width:100%;
    line-height:30px;
    height:30px;
    font-size:25px;
    margin:auto;
    position:fixed;
    color:white;
    text-shadow:2px 2px 2px black;
    background:linear-gradient(to top, red, rgba(0,0,0,0)90%);
    text-align: center;
}
.contact ul li
{
    list-style-type: none;
}
.contact ul
{
    padding:0px;
}
.contact input[type=text],
.contact textarea,
.contact input[type=submit]
{
    border-radius:10px;
    margin-bottom:5px;
    box-shadow:3px 3px 5px black;
    padding-left:10px;

}
.imgAnim
{
    border:3px solid yellowgreen;
    border-radius:10px;
    box-shadow:3px 3px 6px black;
    width:70%;
    -webkit-transition: all 0.3s ease; /* Safari et Chrome */
    -moz-transition: all 0.3s ease; /* Firefox */
    -ms-transition: all 0.3s ease; /* Internet Explorer 9 */
    -o-transition: all 0.3s ease; /* Opera */
    transition: all 0.3s ease;
    z-index:3;
} 
.imgAnim:hover
{
    transform:rotate(0deg);
    box-shadow:5px 5px 15px yellow;
}
.rotate-5
{
    transform:rotate(-5deg);
}
.rotate5
{
    transform:rotate(5deg);
}
.rotate-10
{
    transform:rotate(-10deg);
}
.rotate10
{
    transform:rotate(10deg);
}
.rotate-7
{
    transform:rotate(-7deg);
}
.rotate7
{
    transform:rotate(7deg);
}
/*nav button
{
    color:white;
    text-shadow:1px 1px 2px black;
}*/

.container2 {
    margin: 0 auto;
    width: 500px;
    height: 300px;
    position: relative;
    perspective: 700px;
}
.containerImg
{
    width:300px;
    height:300px;
    display:block;
    /*border:red 3px solid;*/
    z-index:10;
    position:fixed;
    top:10em;
    left:50%;
    right:50%;  
    text-align: center;
    padding:auto;
    vertical-align: middle;
}
.containerImg img
{
    box-shadow:5px 5px 10px green;
}
.rea
{
    width:30%;
    background:linear-gradient(to top, white, rgba(0,0,0,0)90%);
    border-bottom-left-radius:10px;
    border-bottom-right-radius:10px;
    box-shadow:5px 5px 5px black;
    display:inline-block;
    padding:0 px;
    border:1px black solid;
    margin:10px;
    vertical-align: top;
    overflow:hidden;
}
.rea img
{
    width:100%;
    text-align: center;
    box-shadow:0px 5px 5px black;
    margin:auto;
    margin-bottom:15px;
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transition: .4s ease-in-out;
    transition: .4s ease-in-out;
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
    -webkit-transition: .4s ease-in-out;
    transition: .4s ease-in-out;
}
.rea img:hover
{
    box-shadow:0 5px 5px red;
    -webkit-filter: grayscale(0);
    filter: grayscale(0);
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
}
.rea span
{
    color:red;
    font-weight:bold;
    display:block;
}
.rea p
{
    font-size:16px;
    color:black;
    text-align: center;
    height:100px;
    margin:10px;
}
.gauges
{
    padding:20px;
    text-align:center;
}
.gauge
{
    width:45%;
    padding:20px;
    margin:10px;
    display:inline-block;
    box-shadow:3px 3px 5px black;
    border-radius:10px;
}
.gauge p
{
    font-weight: bold;
    text-align:center;
    color:white;
    text-shadow:2px 2px 3px black;
}
.levelfull,
.levelempty
{
    height:30px;
    border:2px white solid;
    margin:0;
    box-shadow:5px 5px 5px black;
}
.levelfull
{
    background-color:rgba(255,0,0,0.5);
    border-top-left-radius: 15px;
    border-bottom-left-radius:15px;
    border-right:none;
    float:left;
    line-height:30px;
    color:white;
    font-style:italic;
    text-align:right;
    padding:0px 10px;
}
.levelempty
{
    background-color:rgba(0,0,255,0.5);
    border-top-right-radius: 15px;
    border-bottom-right-radius:15px;
    border-left:none;
    float:right;
}
h2
{
    text-shadow:3px 3px 3px black;
    margin:0 0 30px 10px;
}
h3
{
    font-size:18px;
    text-shadow:3px 3px 3px black;
    margin-top:20px;
    text-align:left;
    background:linear-gradient(rgba(0,0,0,0)15%, rgba(255,0,0,0.7), rgba(0,0,0,0));
    padding-left:10px;
    width:50%;
}
p.alert
{
    display:none;
    color:red;
    font-weight:bold;
    margin-top:0px;
    margin-bottom:10px;
    font-size:16px;
    line-height:18px;
    vertical-align:top;
}
#connect
{
    display:none;
    position:absolute;
    height:200px;
    width:400px;
    background-color:rgba(255,0,0,0.7);
    padding:10px;
    left:40%;
    top:200px;
    border-radius:15px;
    vertical-align:middle;
    z-index:5;
    box-shadow:5px 5px 10px black;
}
.experience
{
    border-radius: 10px;
    background-color:rgba(255,255,255,0.2);
    /*border:2px white solid;*/
    box-shadow: 3px 3px 5px black;
    /*margin:0px 15px 40px 15px;*/
    padding:10px;
    color:white;
}
.experience h2,
.experience h3,
.experience h4
{
    text-shadow:2px 2px 3px black;
    font-size:25px;
    background-color:transparent;
    background:none;
    margin:10px;
}
.experience h3
{
    font-size:19px;
    margin-left:15px;
}
.experience h4
{
    font-style:italic;
    font-size:16px;
    margin-left:25px;
}
.experience p
{
    font-style:normal;
    font-size:16px;
    margin-left:40px;
    text-align: justify;
}
.anchor
{
    min-height:30px;
    border:none;
    background:none;
    
}