html {height: 100%; width: 100%;}
body {height: 100%; width: 100%; margin: 0px;position: relative;}

h1, h2, h3, h4, p { font-family: "Segoe UI Light"; color: #FAF8F6;}

nav       { top: 0px; left: 0px; width: 220px; height: 100%; float: left; position: fixed; box-shadow: 8px 0px 12px #0C0C0C; z-index:100; }
nav ul {margin: 0; padding: 0; height: 100%; background-color:#0C0C0C; }
nav h1 {color: #828B85;}
#Home  {height: 100%; background-color: #171717;}
#LogoTeam {height: 50%; width: 50%; margin: 0px auto; background-color: #0C0C0C;position: relative;}
.Etoile {width:15%; position: absolute;}
#E1 {top: 30%; left: 15%;}
#E2 {top: 10%; left: 25.8%;}
#E3 {top: 0%; left: 42.5%;}
#E4 {top: 10%; left: 59.1%;}
#E5 {top: 30%; left: 70%;}
.Drapeau {height: 15%; width: 5%; position: absolute; top: 40%;}
#Bleu {background-color: blue; left: 42.5%; }
#Blanc {background-color: white; left: 47.5%; }
#Rouge {background-color: red; left: 52.5%; }
#LogoTeam h1 {position: absolute; margin: 30% 22%; font-size: 180px;color: #828B85;}

.MenuHeader {background-color: #171717; height: 50px;}
.SubMenuHeader {background-color: #171717;}
.MenuIcon {height: 20px; padding: 15px; float: right;
    -webkit-transition : all 0.2s; -ms-transition : all 0.2s; -moz-transition : all 0.2s; -o-transition : all 0.2s; transition :all 0.2s;}
.MenuIcon:hover {height: 25px; padding: 12.5px;
    -webkit-transition : all 0.2s; -ms-transition : all 0.2s; -moz-transition : all 0.2s; -o-transition : all 0.2s; transition :all 0.2s;}
nav li { list-style-type:none; width:calc(100% -7px); height: 50px;  transition:all 0.3s;}
.MenuItem:hover {background-color: #171717; padding-left: 7px; transition:all 0.3s;}

.SoldierMenu {height: 25px; margin: 10px 10px 10px 30px; float: left; border-radius: 12.5px;}
.ItemMenuIcon {height: 20px; margin: 15px 15px 15px 30px; float: left; }
nav h1 { height: 25px; font-size: 16px; padding: 12.5px 12px; margin: 0;float: left;  }

#Content    {width:calc(100% - 220px); margin-left: 220px; height: 100%; }
.Player     {height: 100%; width: 100%; float: left;  position: relative;}
#PlayerDescription       { width: 40%; float: left; height: 100%; background-color:#171717;}
#PlayerStats       { width: 60%; height: 100%; float: left;   background-color:#0C0C0C;}
.Competence {margin: 10% 25% 10% 10%;}
.StatChart {margin: 10% 10% 0% 10%;}

.Video {height: 100%; width: 100%; float: left;  background-color:#1A1B20;  position: relative;}
.Arme {height: 100%; width: 100%; float: left;  background-color:#1A1B20;  position: relative;}
h1 {font-size: 55px;  margin: 15% 10% 0% 10%; color: #3A4A40;}
h2 {color: #3A4A40; font-size: 32px; margin: 0% 10% 5% 10%;}
h3 {font-size: 22px; margin: 10%;}
h4 {margin: 2% 0 2% 0;}
p {text-align: justify; font-size: 18px; margin: 10%;}
.Soldat {position: absolute; height: 50%; top: 50%; left: 30%;}

Wep { margin-left: 12%;}

#contact-form {height: 100%; width: 100%; background-color:#171717; float: left;	}
#contact-form h1 {text-align: center;}
#contact-form ol {  list-style-type: none; padding: 20px; }
.FormImageDiv {height: 50px; width: 50px; float: left; background-color: #0C0C0C}
.FormImageDiv img {height: 20px; width: 3=20px; margin: 15px;}
#FormImageMessage {height: 165px;}
form {height: 100%;	text-align:left;  }
form h1 {color: #828B85; margin: 5%;}
form li {width: 500px; margin: 0 auto;}
label, submit, input, textarea {
	border:0; padding:0; margin:0; background:none;}
	
	
input, textarea {
	 width: 430px; border-radius: 0px; font-size: 18px;
     display: block; padding:5px; background-color: #3D3D3D;
     border: #3D3D3D solid 2px;
	}
input:focus {border-color: #3A4A40;}
input {
	 height: 35px; margin-top: 30px; 	}

textarea {
	height: 150px;
	margin-bottom: 16px; margin-top:30px;
	}

.submit {
	width:150px; height:50px;
	margin-left:250px;
	margin-bottom: 50px;
	font-size:18px;
	margin-left : auto; margin-right: auto ;
	display: block;
    color: #595959;
    background-color: #0C0C0C;
	}
.submit:hover { background-color:#171717;}



@media only screen and (max-width: 1024px) {
    .Player     {height: 200%;}
    #PlayerDescription       { width: 100%; height: 50%;}
    #PlayerStats       { width: 100%; height: 50%;}
    .Soldat {height: 20%; top: 80%; left: 70%;}
}

@media only screen and (max-width: 768px) {
nav       {left: -170px;  box-shadow: none; transition : left 0.6s; overflow:scroll;}
.navShowing {top: 0px; left: 0px; width: 220px; float: left; position: fixed; box-shadow: 8px 0px 12px #0C0C0C; z-index:100; transition : left 0.6s;}
#Content    {width: 100%; margin-left: 0;}
nav ul {display: none; }
.ulShowing {display: block; margin: 0; padding: 0; background-color:#0C0C0C; }
.Soldat {display: none;}
.Competence {margin: 5% 15%;}
h1 {font-size: 32px; margin: 10% 15% 0% 15%; }
h2 {font-size: 26px;  margin: 0% 0% 5% 15%;}
h3 {font-size: 14px; margin: 10% 15%;}
h4 {font-size: 14px; }
p {font-size: 12px; margin: 5% 15% ;}



}

@media only screen and (max-width: 480px) {
	
form li {width: 90%;margin: 5%;}
input, textarea { width: 70%;font-size: 14px; margin-top: 15px;  }
input {	 height: 15px;	}
.FormImageDiv {height: 30px; width: 30px; float: left; background-color: #0C0C0C}
.FormImageDiv img {height: 15px; width: 15px; margin: 7.5px;}
}