body{
	background:#1c1a28;
	font-family:Calibri, sans-serif;
	font-size:16px;
	font-weight:lighter;
	margin:0;
	padding:0;
}

a, input, button{
    -webkit-appearance: none;
    font-family:Calibri, sans-serif;
}

a, input[type="button"]{
	cursor:pointer;
}

var{
	font-style: normal;
}

div.naturalSpace{
    height: 50px;
}

div.counterSpace{
    margin-top: -50px;
}

.hide{
	display:none;
}

.headerBack{
	background:url(img/header.jpg)no-repeat bottom;
    background-size: cover;
    background-position: calc(100% - -533px), 0px;
	height:	880px;
	margin:0 auto;
	border-bottom: 2px solid #1e1a42;
}

.motif{
    min-height:100%;
	width:100%;
}

.motif2{
	background:url(img/motif2.png)repeat;
    min-height:100%;
	width:100%;
}

img.logo{
	margin:0 auto;
	display:block;
	position: absolute;
    left: calc(50% - 625px);
	top:397px;
}

nav{
	background: #000;
	border-top:1px solid #222131;
	height:56px;
	width:100%;
	position:fixed;
	left:0;
	z-index: 1;
}

nav a{
	text-decoration:none;
	height: 30px;
    display: inline-block;
    color: #fff0;
	padding:13px;
}

nav .accueil{
	background: url(img/menu/accueil.png)no-repeat center;
    background-position:0;
}

nav .media{
	background: url(img/menu/media.png)no-repeat center;
    background-position:0;
}

nav .document{
	background: url(img/menu/infos.png)no-repeat center;
    background-position:0;
}

nav .account{
	background: url(img/menu/account.png)no-repeat center;
    background-position:0;
}

nav .store{
	background: url(img/menu/store.png)no-repeat center;
    background-position:0;
}

nav .setting{
	background: url(img/menu/setting.png)no-repeat center;
    background-position:0;
}

nav .logout{
	background: url(img/menu/logout.png)no-repeat center;
    background-position:0;
	cursor:pointer;
}

nav .login{
	background: url(img/menu/login.png)no-repeat center;
    background-position:0;
	cursor:pointer;
}

nav .update{
	background: url(img/menu/update.png)no-repeat center;
    background-position:0;
}


nav div.secure{
	display:inline-block;
}

nav a:hover{
	color:#fff;
	display:block;
}

nav a div{
	/*margin-top:50px;*/
	display: inline-block;
	padding: 7px 0 0 25px;
	/*margin-left:-80px;
	display:none;*/
    color:#fff;
	
}

/*nav a:hover div{
	background:#000;
	-webkit-box-sizing: content-box;
	-moz-box-sizing: content-box;
	box-sizing: content-box;
	width: 160px;
	border: none;
	color: #fff;
	text-align: center;
	-o-text-overflow: ellipsis;
	text-overflow: ellipsis;
	display: table-caption;
}*/

div.content{
	margin:0 auto;
	width:80%;
}

.headerBack div.desc{
	padding-top:20px;
	font-size:20px;
	font-weight:lighter;
	color:#fff;
	width:100%;
    text-align: justify;
    padding-bottom: 20px;
    text-shadow: 0 0 20px #00000061;
}

.headerBack p.desc{
    margin:0;
}

.headerBack .content a.next{
	text-decoration:none;
	font-size:14px;
	font-weight:bold;
	color:#c0c0c0;
	float: right;
    margin-right: 150px;
}

.dNav{
	position: fixed;
    left: calc(50% - 325px);
    top: 26px;
	z-index:1;
}

div.left{
	float:left;
}

div.right{
	float:right;
}

div.clear{
    clear:both;
}

div#logoXosh{
    background:url(img/menu/xosh.png) no-repeat;
    height: 57px;
    width: 122px;
    background-size: 100%;
    margin: 0 auto;
    opacity:0;
}

img.patreon{
    max-width:604px;
    max-height:150px;
    width:auto;
    height:auto;
    cursor:pointer;
}
/*progress bar*/

/* Basic resets */


/* Styling an indeterminate progress bar */

progress:not(value) {
    /* Add your styles here. As part of this walkthrough we will focus only on determinate progress bars. */
}

/* Styling the determinate progress element */

progress[value] {
    /* Get rid of the default appearance */
    appearance: none;
    
    /* This unfortunately leaves a trail of border behind in Firefox and Opera. We can remove that by setting the border to none. */
    border: none;
    
    /* Add dimensions */
    width: 560px; height: 25px;
    
    /* Although firefox doesn't provide any additional pseudo class to style the progress element container, any style applied here works on the container. */
      background-color: #1c1b2e;
      box-shadow: 0 2px 3px rgba(0,0,0,.5) inset;
    
    /* Of all IE, only IE10 supports progress element that too partially. It only allows to change the background-color of the progress value using the 'color' attribute. */
    color: #167da8;
    
    position: relative;
    margin: 0 0 1.5em;
	border: 1px solid #494465;
	display:block;
}

progress[value].setting{
    width: calc(100% - 38px);
    float: right;
    margin-top: 12px
}
/*
Webkit browsers provide two pseudo classes that can be use to style HTML5 progress element.
-webkit-progress-bar -> To style the progress element container
-webkit-progress-value -> To style the progress element value.
*/

progress[value]::-webkit-progress-bar {
    background-color: #1c1b2e;
}

progress[value]::-webkit-progress-value {
    position: relative;
    
    background-size: 75px 40px, 100% 100%, 100% 100%;
    
    /* Let's animate this */
}

/* Let's spice up things little bit by using pseudo elements. */

progress[value]::-webkit-progress-value:after {
    /* Only webkit/blink browsers understand pseudo elements on pseudo classes. A rare phenomenon! */
    content: '';
    position: absolute;
    
    width:5px; height:5px;
    top:7px; right:7px;
    
    background-color: #000;
}

/* Firefox provides a single pseudo class to style the progress element value and not for container. -moz-progress-bar */

progress[value]::-moz-progress-bar {
    /* Gradient background with Stripes */
    background-image:
    -moz-linear-gradient( 135deg,
                                                     transparent,
                                                     transparent 33%,
                                                     rgba(0,0,0,.1) 33%,
                                                     rgba(0,0,0,.1) 66%,
                                                     transparent 66%),
    -moz-linear-gradient( top,
                                                        rgba(255, 255, 255, .25),
                                                        rgba(0,0,0,.2)),
     -moz-linear-gradient( left, #171333, #00b9ff);
    
    background-size: 75px 40px, 100% 100%, 100% 100%;
    
    /* Firefox doesn't support CSS3 keyframe animations on progress element. Hence, we did not include animate-stripes in this code block */
}

/* Fallback technique styles */
.progress-bar {
    background-color: #000;
    box-shadow: 0 2px 3px rgba(0,0,0,.5) inset;

    /* Dimensions should be similar to the parent progress element. */
    width: 100%; height:80px;
}

.progress-bar span {
    background-color: #000;
    
    display: block;
    text-indent: -9999px;
}

p[data-value] { 
  
  position: relative; 
}

/* The percentage will automatically fall in place as soon as we make the width fluid. Now making widths fluid. */

p[data-value]:after {
    content: attr(data-value) '%';
    position: absolute; right:0;
}





.campaing::-webkit-progress-value{
    /* Gradient background with Stripes */
    background-image:
    -webkit-linear-gradient( 135deg,
                                                     transparent,
                                                     transparent 33%,
                                                     rgba(0,0,0,.1) 33%,
                                                     rgba(0,0,0,.1) 66%,
                                                     transparent 66%),
    -webkit-linear-gradient( top,
                                                        rgba(255, 255, 255, .25),
                                                        rgba(0,0,0,.2)),
     -webkit-linear-gradient( left, #171333, #00b9ff);
}

.campaing::-moz-progress-bar{
    /* Gradient background with Stripes */
    background-image:
   
    -moz-linear-gradient( top,
                                                        rgba(255, 255, 255, .25),
                                                        rgba(0,0,0,.2)),
     -moz-linear-gradient( left, #171333, #00b9ff);
}

.containsRightTop{
    box-sizing: border-box;
    float: right;
    width: calc(90% - 604px);
    margin-top:-900px;
    height:812px;
}

.containsRightTop img{
    margin: 0 auto;
    display:block;
    max-width: 60%;
    max-height: 390px;
}

.containsRightTop .attentionContains{
    margin:200px 0 auto;
    text-align: center;
}

.containsRightTop .attentionContains a{
    display:inline-block;
    padding:15px 30px 15px 30px;
    background:#cf2226;
    color:#fff;
    font-size:30px;
    font-weight: bold;
    text-transform: uppercase;
    text-shadow: 0 0 20px #00000061;
    margin:10px;
    transition: background .3s, text-shadow .3s;
}

.containsRightTop .attentionContains a:hover{
    background:#ff0000;
    text-shadow: 0 0 20px #fff;
    transition: background .3s, text-shadow .3s;
}

.textProgress{
	font-size: 28px;
	color:#fff;
    /* font-weight: bold; */
    text-align: center;
    display: inline-block;
    width: 560px;
    margin-top: -63px;
    position: absolute;
    text-shadow: 0 0 10px #1c1b2e;
}

.textProgress.setting{
	width: calc(100% - 69px);
    margin: 10px 39px 0 0;
    font-size: 21px;
    right: 15;
}

.campaingBlock{
    background: url(img/infosSideBack.png)no-repeat;
    background-position: calc(100% - 430px);
    width: 1150px;
    height: 793px;
    padding: 90px 0 0 10%;
}

.campaingLogoBlock{
	margin:0 auto;
	width:230px;
}

.campaingBlock p{
	color:#fff;
	margin: 0 0 10px 0;
    font-size:20px;
    text-shadow: 0 0 20px #00000061;
}

.campaingBlock a{
    text-decoration: none;
}

div.rollHeader{
    width:604px;
}

div.link{
    margin:0 auto;
    width: 170px;
}

div.support{
    margin: 0 0 10px 10px;
    padding: 12 12px 12px 45px;
    font-size: 22px;
    color: #fff;
    font-weight: bold;
    cursor:pointer;
}

div.facebook{
    background: #395692;
    background-image: url(img/network/fb.jpg);
    background-repeat: no-repeat;
    background-position: 5px;
    width: 0px;
    padding: 20px;
    display: inline-block;
}

div.twitter{
    background: #1c88cc;
    background-image: url(img/network/tw.jpg);
    background-repeat: no-repeat;
    background-position: 5px;
    width: 0px;
    padding: 20px;
    display: inline-block;
}

div.youtube{
    background: #cf2226;
    background-image: url(img/network/yt.jpg);
    background-repeat: no-repeat;
    background-position: 5px;
    width: 0px;
    padding: 20px;
    display: inline-block;
}

/*DESCRIPTION*/

section.backDesc{
    height: 800px;
    margin: 0 auto;
    transition: height .3s;
    border-bottom: 2px solid #120f27;
}

section.des1{
    background:url(img/description.jpg)no-repeat center;
    background-position: center;
    background-size: cover;
}

section.des2{
    background:url(img/description2.jpg)no-repeat center top;
    background-position: center;
    background-size: cover;
}

section.des3{
    background:url(img/description3.jpg)no-repeat center top;
    background-position: center;
    background-size: cover;
}

section.des1.open{
    height:328px;
}

section.des2.open{
    height:307px;
}

section.des3.open{
    height:288px;
}

section.backDesc.bigger{
	height:700px;
}

section div.block33:first-of-type{
	margin-left:0;
    padding-top: 70px;
    transition:padding-top 0.3s;
}

section div.block33{
	color:#fff;
	font-size:18px;
    width:55%;
    max-width:1000px;
	padding:2px;
	text-align:justify;
	margin:0 auto;
	transition:width .3s;
}

section div.block33 p{
	font-size:20px;
}

section div.block33 div.backTitle{
    background:#cf222600;
    margin: 0;
    width: fit-content;
    transition:background 0.3s;
    margin:0 0 15px 15px;
}

section div.block33 h3{
	padding:10px;
	font-size:22px;
	margin:0;
    text-transform: uppercase;
	cursor:pointer;
    transition: box-shadow 0.3s;
    text-shadow: 0 0 20px #00000061;
}

section div.block33 div.detail{
    padding:0 0 20px 0;
    text-align: center;
}

section.backDesc div.block33 div.backTitle{
    background:#cf2226;
}

section div.block33 span{
    display: block;
	transition:font-size .3s;
}

section div.block33.miniature{
	width: 90px;
}

section div.block33.miniature span{
	font-size:0;
	padding:22px;
}

section div.block33.miniature img{
	display:block;
	margin:0 auto;
}


section div.block33.openResume p{
	display:block;
	font-size:18px;
	padding:0 10px;
}

section div.block33.openResume{
    padding-top:44px;
}

section div.block33 div.blockContent p:first-of-type {
    margin-top: 0;
}

section div.block33 div.blockContent p:last-of-type {
    margin-bottom: 0;
}

section div.block33 div.blockContent{
    background:#000000d1;
    padding: 55px;
    border: 1px solid #222c40;
    box-shadow: 0 0 60px #00000080;
}

section div.block33 span.resume{
    display: block;
	text-align:center;
    margin: 0;
    padding:10px;
	font-size:18px;
	background: #167da8;
	cursor:pointer;
	border-top: 1px solid #07122b;
    box-shadow: 0 1px 0 #2c3b5a inset;
background-image:
    -webkit-linear-gradient( 135deg,
                                                     transparent,
                                                     transparent 16%,
                                                     rgba(0,0,0,.1) 16%,
                                                     rgba(0,0,0,.1) 33%,
                                                     transparent 33%),
	-webkit-linear-gradient( 135deg,
                                                     transparent,
                                                     transparent 66%,
                                                     rgba(0,0,0,.1) 66%,
                                                     rgba(0,0,0,.1) 100%,
                                                     transparent 100%),
    -webkit-linear-gradient( top,
                                                        rgba(255, 255, 255, .25),
                                                        rgba(0,0,0,.2)),
														
     -webkit-linear-gradient( left, #171333, #00b9ff);

    /* Gradient background with Stripes */
    background-image:
   
    -moz-linear-gradient( top,
                                                        rgba(255, 255, 255, .25),
                                                        rgba(0,0,0,.2)),
     -moz-linear-gradient( left, #171333, #248d16);
	 
}
@-moz-document url-prefix() {
	section div.block33 span.resume{
	background-image:
		-moz-linear-gradient( 135deg,
														 transparent,
														 transparent 33%,
														 rgba(0,0,0,.1) 33%,
														 rgba(0,0,0,.1) 66%,
														 transparent 66%),
		-moz-linear-gradient( top,
															rgba(255, 255, 255, .25),
															rgba(0,0,0,.2)),
		 -moz-linear-gradient( left, #171333, #00b9ff);
		
		background-size: 230px 44px, 100% 100%, 100% 100%;
	}
}
section.backShow{
	background:url(img/backShow.jpg)no-repeat center bottom fixed;
	background-size: cover;
	height:900px /*1044px*/;
	margin:0 auto;
}

section img.sep{
	margin:0 auto;
	display:block;
	margin-top: -8px;
}

#dotContainer{
    position:relative;
    margin: 0 auto;
    display:table;
    padding: 0 0 60px;
}

div.dotShort{
    background: linear-gradient(#cfd7e2, #708aad);
    width: 15px;
    height: 15px;
    border: 1px solid #929292;
    float: left;
    border-radius: 50%;
    margin: 6px;
    cursor:pointer;
}

div.dotShort:hover{
    background: linear-gradient(#afe628, #c6c921);
    border-color: #8c0000;
}

div.dotShort.select{
    background: linear-gradient(#841417, #c92125);
    border-color: #8c0000;
}

#title{
    background: #cf2226;
    color:#fff;
	font-weight:bold;
	display:inline-block;
    padding: 10px;
    font-size: 22px;
    margin: 0;
    text-transform: uppercase;
    transition: box-shadow 0.3s;
    text-shadow: 0 0 20px #00000061;
    margin: -1px;
}

.us{
    background: unset!important;
}

div.blockTitle{
    position: absolute;
    margin: 70px 0 0 0;
    background: #000000e3;
    border: 1px solid #222c40;
    box-shadow: 0 0 60px #00000080;
}

div.titleContains{
	display:table;
}

div.titleContains.other{
    margin: 9px auto;
}

#title.other{
    background:unset;
}

div.titleContains.mainPage{
	padding-top:0;
}

img.dot{
	margin-bottom:-18px;
	margin-left: -57px;
}

img#infoImg{
	margin:-25px auto;
	display:block;
}

div.information{
    text-align: center;
    margin-top: -116px;
    color: #fff;
    font-size: 18px;
    padding: 50px;
}

div.information p{
    padding:10px;
}

div.imagesContainer{
	overflow:hidden;
	width:100%;
	height:900px;
	box-shadow: 0px 0px 100px hsla(237, 13%, 1%, 0.28);
}

section.smallPage div.imagesContainer{
	height:735px;
}

div.imagesContainer.mainPage{
	margin-top:0;
}

div.imagesContainer img{
	object-fit: contain;
    width: 100%;
}

div.imagesContainer.mainPage img{
	opacity:1;
	object-fit: contain;
    width: 100%;
}

div.arrow{
	background:url(img/arrow.png)no-repeat;
	height:92px;
	width:72px;
	position:absolute;
	bottom: calc(50% - 46px);
	right:20px;
}

div.arrowF{
	background:url(img/arrowF.png)no-repeat;
	height:92px;
	width:72px;
	position:absolute;
	bottom: 0;
	right:20px;
}

div.prev{
	transform: scaleX(-1);
	left:20px;
}

div.arrow:hover{
	background:url(img/arrowh.png)no-repeat;
	cursor:pointer;
}

div.arrowF:hover{
	background:url(img/arrowFh.png)no-repeat;
	cursor:pointer;
}

div.carroussel{
	position:relative;
}

div.carroussel.home{
    margin: 0 auto;
    width: 100%;
    position:absolute;
}

#description{
    position: inherit;
    color: #fff;
    padding: 50px 0 0;
    margin: 0;
    top: 169px;
    text-align: center;
    max-width: 600px;
}
/*mini carroussel*/

div.miniCarroussel{
	position:relative;
}

div.arrow.mini{
	top:68px;
}

div.arrowF.mini{
	top:68px;
}

div.arrow.avatar{
	top:252px;
}

div.imagesMiniContainer{
	overflow:hidden;
	margin:40px 40px 40px 0;
	width: calc(100% / 4 - 30px);
	box-shadow: 0px 0px 100px hsla(237, 13%, 1%, 0.28);
	float:left;
}

div.imagesMiniContainer:nth-child(4){
	margin:40px 0 40px 0;
}

img.miniImage{
	width: calc(100% - 10px);
    object-fit: contain;
	opacity:0.6;
	border: 5px solid #1b2454;
}

img.miniImage.select{
	opacity:1;
    border-bottom: 5px solid #7aff00;
}

img.miniImage:hover{
	opacity:1;
	cursor:pointer;
}
/*us*/

.authorPic{
	width: 66px;
    border: 2px solid #10285d;
    object-fit: contain;
    box-shadow: 0 0 50px #07071f;
}

.authorP{
	float: right;
    width: calc(100% - 101px);
    margin:0;
    margin-top: -9px;
    box-sizing: border-box;
}

/*maj*/

div.content.news a.news{
    display:block;
    margin-bottom:40px;
    color:#fff;
    text-decoration:none;
    background:#000;
    width: calc(100% / 2 - 20px);
    float: left;
    margin-right: 20px;
}

div.content.news a.title{
    color:#fff;
    text-decoration:none;
}

div.content.news div.more{
    color: #fff;
    background: #f00;
    width: auto;
    float: right;
    padding: 14px;
    margin: -46px 0 0 0;
    font-weight: bold;
    opacity:0;
}

div.content.news a:hover div.more{
    opacity:1;
}


div.content.news div.screenImg{
    overflow: hidden;
    width: 100%;
    height: 300px;
}

div.content.news div.screenImg img{
    width: 157%;
}

div.content.news div.infos{
    padding:15px;
}

div.content.news div.infos div.date{
    margin-top:5px;  
    font-size:14px;
    display:table-cell;
}

div.content.news div.infos div.title{
    font-weight:bold;
    display:inline-block;
    font-size:24px;
}
    
section.smallPage{
	min-height:1072px;
    background: url(img/backCo.png) no-repeat;
    width: 100%;
    background-size: cover;
}

img.backImage{
	position:fixed;
	top:0;
	left:calc(100% / 2 - 960px);
	z-index:-1;
}

table {
	background:#0b0918;
	color:#fff;
	width:100%;
	box-shadow: 0px 0px 100px hsla(237, 13%, 1%, 0.28);
}

table td{
	background:#1a1828;
}

div#setting table td{
    text-align: left;
    width: 70%;
    padding:5px
}

table tr:nth-child(odd) td{
	background:#0b0918;
}

table th, table td{
	text-align: left;
	padding:10px;
}

table th:first-of-type, table td:first-of-type{
	text-align:center;
}

table tr:hover td{
	background:#0d142d;
	cursor:pointer;
}

article.update{
	box-shadow: 0 0 50px #00000052;
	background:#0d142d;
	color:#fff;
}

article.update div{
	background:#0b0918;
	padding:10px;
	font-size:24px;
}

article.update span{
	float:right;
}

article.update p{
	padding:45px;
    margin:0;
    box-sizing: border-box;
}

article.update img{
	padding: 0 45px 0 45px;
    box-sizing: border-box;
}

article.update img.full{
    width:100%;
}

article.update img.half{
    width:50%;
}

/*connexion and subscription & setting*/

div.messageAccount{
    padding: 10px;
    background: #700;
    color: #fff;
    text-align: center;
}

div.messageAccount.success{
    background:#3e538c;
}

p.certificate{
    color:#fff;
    padding:0 15px 0;
    text-align:justify;
}

div.level{
	color: #fff;
    font-size: 16px;
    float: right;
    text-align: center;
    width: 33px;
    font-weight: bold;
    margin-top: 12px;
    padding: 2px;
    max-height: 19px;
    border: 1px solid #494465;
    border-left: none;
    background: #1c1b2e;
}

div.messageBox{
	position: fixed;
    top: 57px;
    width: 100%;
    color: #fff;
    text-align: center;
    background: #750000;
    z-index: 1;
    box-shadow: 0 23px 39px #00000040;
}

div.messageBox.success{
	background:#09618a;
}

div.messageBox.wait{
	background:#c59c06;
}


div#backWindow{
	background:url(img/backCo.png) center top fixed no-repeat;
	width:100%;
	height:100%;
	position:fixed;
	z-index:2;
    background-size:cover;
}

div.form{
	position: fixed;
    top: 73px;
	right: calc(100% / 2 - 250px);
	top:calc(100% / 2 - 200px);
    width: 500px;
	z-index:3;
}

div#setting.form{
    right: calc(100% / 2 - 383.5px);
    width: 767px;
    
}

div.name{
    font-weight: bold;
    font-family: roboto;
    font-size: 30px;
    color: #fff;
    width: calc(100% - 190px);
    position: absolute;
    right: 0;
    text-align: center;
    margin-top: -102px;
}

div#setting.form div.contains{
    min-height:233px;
}

div.form .contains{
    width: 100%;
    background: #000;
	box-sizing:border-box;
}

div.form form{
	margin:0;
}

div.form input{
	width: calc(100% - 40px);
    margin: 20px 20px 0 20px;
	padding:10px;
	border:none;
	outline-style:none;
    background: #001859;
	color:#fff;
    border-radius: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

div.form input:last-of-type{
	margin: 20px;
}

div.form textarea{
	width: calc(100% - 40px);
    margin: 0px 20px 20px;
    padding: 10px;
    border: none;
    outline-style: none;
    background: rgb(0, 24, 89);
    height: 150px;
	resize: vertical;
	color:#fff;
}

div.form input[type="submit"], div.form a{
	width:100%;
	background:#000;
	color:#fff;
	font-weight:lighter;
	margin:20px 0 0 0 ;
	padding:15px;
	display:block;
	box-sizing:border-box;
	text-align:center;
	font-family: calibri;
    font-size: 20px;
	cursor:pointer;
}

div.form input[type="submit"]:hover , div.form a:hover{
	background: #001859;
}

div.form input.setting[type="submit"], div.form a.setting{
	background: #001859;
	float: right;
    width: calc(100% - 142px);
    margin-top: -73px;
	padding:24px;
}

div.directionSetting{
	background: #001859;
	height: 54px;
    color: #fff;
    text-align: left;
    font-size: 20;
}

div.directionSetting a{
	width: fit-content;
    background: #011240;
    margin: 0;
    padding: 15px;
    border-right: 1px solid #172d49;
	float:left;
}

img.avatar{
	width:160px;
    margin-right:13px;
	cursor:pointer;
}

img.avatar:hover{
	width: 154px;
    outline: 3px solid #001859;
    padding: 3px;
}

img.avatar.list{
	width:154px;
}

img.avatar.list:hover{
	width:148px;
    outline: 3px solid #001859;
    padding: 3px;
}

div.form input.setting[type="submit"]:hover , div.form a.setting:hover{
	background: #051646;
}

div.form .title{
	color:#fff;
	background:#000;
	width:100%;
	padding:15px;
	box-sizing:border-box;
	margin: 0 0 20px 0;
}

div.form .title img{
	position:absolute;
	top:6px;
	cursor:pointer;
}

div.form h3{
	text-align:center;
	width:100%;
	margin:0;
}

/*STORE*/

div.blockItem{
    width: calc(33% - 40px);
    float: left;
    margin: 20px;
}

div.blockItem img{
    margin: 0 auto;
    display: block;
    padding: 20px;
    box-sizing: border-box;
    width: 270px;
}

div.blockItem button{
    width: calc(100% - 80px);
    background: #234d9c;
    border: none;
    color: #fff;
    font-family: calibri;
    font-size: 25px;
    padding: 15px;
    box-sizing: border-box;
    outline-style: none;
    margin:40px;
    cursor:pointer;
    transition:background 0.3s;
}

div.blockItem button:hover{
    background:#000;
}

div.inner img{
    float:left;
    margin:20px 40px 20px 0;
}

div #nbrPoints{
    font-weight:bold;
}

/*FOOTER*/

.baseFlag{
    background:url('img/lg.jpg');
    width:189px;
    height:43px;
    cursor:pointer;
    display: inline-block;
    margin-left: -194px;
}

.shape1{
    -webkit-clip-path: polygon(15% 0, 36% 0, 22% 100%, 0 100%);
    clip-path: polygon(15% 0, 36% 0, 22% 100%, 0 100%);
}

.shape2{
    -webkit-clip-path: polygon(36% 0, 57% 0, 42% 100%, 22% 100%);
    clip-path: polygon(36% 0, 57% 0, 42% 100%, 22% 100%);
}

.shape3{
    -webkit-clip-path: polygon(57% 0, 78% 0, 64% 100%, 43% 100%);
    clip-path: polygon(57% 0, 78% 0, 64% 100%, 43% 100%);
}

.shape4{
    -webkit-clip-path: polygon(79% 0, 100% 0, 85% 100%, 64% 100%);
    clip-path: polygon(79% 0, 100% 0, 85% 100%, 64% 100%);
}

footer{
	background:#1a1828;
	height:120px;
	padding: 50px 20px 50px 20px;
    margin-top: -32px;
}

.dFooter{
    margin: 0 auto;
    display: block;
    margin-top: -31px;
}

.ue4{
	display:inline-block;
	background:url(img/footer/ue4.jpg)no-repeat;
	height:65px;
	width:65px;
	margin-right:20px;
	float:left;
}

.blender{
	display:inline-block;
	background:url(img/footer/blender.jpg)no-repeat;
	height:65px;
	width:65px;
	margin-right:40px;
	float:left;
}

.pegi{
	display:inline-block;
	background:url(img/footer/pegi.jpg)no-repeat;
	height:69px;
	width:266px;
	float:right;
}

footer p{
	float:right;
	color:#8d8aa6;
	margin-right:10px;
    font-size:12px;
}

div.tab{
	float:left;
	margin-right:40px;
	margin-top: -16px;
}

footer h4{
	color:#fff;
}

footer li, footer ul{
	list-style:none;
	margin:0;
	padding:0;
}

footer a{
	color:#8d8aa6;
	text-decoration:none;
}

div.flagContains{
    float:right;
}

/*admin*/

textarea.admin{
	background: #1c1b2e9e;
    color: #ffffff;
    padding: 12px;
    overflow: hidden;
    border: none;
	outline-style:none;
	border: 1px solid #335c79;
	resize:vertical;
}

textarea.adminAll{
	background: #1a1828;
    color: #335c79;
    padding: 12px;
    overflow: hidden;
    border: none;
	outline-style:none;
	border: 1px solid #335c79;
    border-bottom:none;
	resize:vertical;
    width: 100%;
}

textarea.adminAll:hover{
    background: #1c1b2e9e;
    color: #ffffff;
    padding: 12px;
    overflow: hidden;
    border: none;
	outline-style:none;
	border: 1px solid #335c79;
	resize:vertical;
}

input.admin[type="button"]{
	width: 100%;
    padding: 5px;
    background: #1c1b2e;
    box-sizing: border-box;
    border: none;
    font-weight: bold;
    color: #fff;
    margin: 0;
}

a.buttonAdmin{
    background: #1f165f;
    color: #fff;
    font-weight: bold;
    width: 100%;
    display: block;
    padding: 10px;
    text-align: center;
}

.blockVideo{
    box-shadow: 0 0 159px #34324a inset;
    max-width:604px;
    max-height:492px;
    width: auto;
    height: auto;
    background: url(img/banner1.jpg) no-repeat;
    display: table;
    margin: 0;
    background-size: 100%;
}

.soon{
    color: #fff;
    font-family: century gothic, calibri, sans-serif;
    font-size: 16px;
    text-shadow: 0 0 78px #c3bfef;
    text-align: center;
    width:604px;
    margin-top:-200px;
    position:absolute;
}

.soon div{
    background: #000000c4;
    width: 190px;
    padding: 20px;
    margin: 0 auto;
    border-radius: 5px;
    font-weight: bold;
}

@media only screen and (max-width:800px) {
    div.blockItem{
        width:100%;
        float:none;
        margin: 20px auto;
    }
    
    div.blockItem button {
        width: calc(100% - 80px);
    }
    
}

@media only screen and (max-width:1300px) {
    div.content.news a.news{
        width: 100%;
    }

    
    div.rollHeader{
        width:100%;
    }
    
    .containsLogo{
        display:none;
    }
    
    div#logoXosh {
        opacity:1;
    }
    
    .blockVideo{
        width: calc(100% - 20px);
        max-width:none;
        max-height:none;
        margin:10px;
        position:inherit;
    }
    
    section div.block33 div.backTitle{
        width:100%;
    }
    
    .motif{
        height:auto;
    }
    
    img.patreon{
        max-width:none;
        max-height: none;
        width: 100%;
        margin:0;
    }
    
    div.support {
        margin:0 0 10px 0;    
    }
    
    .soon{
        width:100%;
        margin-top:-150px;
    }
    
    body{
        
        overflow-x: hidden;
        width:100%;
    }
    
    nav{
        width: 100%;
    }
    
    
    div.content {
        margin: 0 auto;
        width: 98%;
    }
    
    .dNav {
        position: relative;
    }
    
    nav{
        position: relative;
        z-index:2;
    }
    
    nav a:hover div {
        display: none;
    }
    
    nav a{
        width: 30px;
    }

    nav a div{
        margin-top:50px;
        margin-left:-80px;
        display:none;

    }
    
    .headerBack{
        position:relative;
        width: 100%;
        margin-top: -57px;
        padding-top: 57px;
        height:auto;
    }
    
    .headerBack p.desc {
        width:100%;
        padding: 20px 5px 10px;
        box-sizing: border-box;
    }
    
    .campaingBlock, .campaing, .textProgress, .campaingLogoBlock{
        width: 100%;
        margin: 0;
    }
    
    .textProgress{
        margin-top: -40px;
    }
    
    progress[value] {
        width:100%;
        max-width:560px;
        margin:0 auto;
    }
    
    .campaingBlock{
        padding:10px;
        box-sizing: border-box;
        background:#1c1a28;
        height:auto;
    }
    
    .campaing{
        padding: 5px;
    }
    
    .logoCampaing{
        display: block;
        margin: -47px auto;
        margin-bottom: -15px;
    }
    
    img.logo {
       
    }
    
    nav .accueil, nav .media, nav .document, nav .account, nav .store, nav .setting, nav .logout, nav .login, nav .update{
        background-size: 50%;
        position:relative;
        z-index:2;
    }
    
    div.containsMainLogo{
        overflow: hidden;
        width: 100%;
        height: 479px;
        /* display: block; */
        /* margin: 0 auto; */
        /* display: block; */
        position: absolute;
        top: 352px;
    }
    
    img.logo {
        margin: 0;
        position: absolute;
        top: 0;
    }
    
    section div.block33 {
        width:100%;
        box-sizing: border-box;
    }

    section.backDesc.bigger {
        height: 704px;
    }
    
    section div.block33 h3 {
        display:table;
        margin: 0 auto;
    }
    
    #title{
        width:100%;
        box-sizing: border-box;
        margin:-1px 0;
    }
    
    div.titleContains{
        width:100%;
    }
    
    div.blockTitle{
        margin: 57% 0 0;
        width: calc(100% - 15px);
        box-sizing: border-box;
    }
    
    section div.block33.miniature {
        display: none;
    }
    
    div.form {
        position:absolute;
        width:calc(100% - 20px);
        left:10px;
        top: 10px;
    }
    
    div.form#contact{
        position:fixed;
    }

    div.arrow {
        right:-15px;
        top: 40%;
        transform: scale(0.8);
    }
    
    div.prev{
        left:-15px;
        transform: scale(-0.8);
    }
    
    
    section div.block33 span.resume {
        padding:20px;      
    }
    
    div.carroussel #description {
        position: relative;
        width: calc(100% - 10px);
        box-sizing: border-box;
        padding: 5px;
        margin: 5px;
    }
    
    section.backShow {
        height: auto;
    }
    
    .motif2{
        height: auto;   
    }
    
    .containsExtern{
        overflow: hidden;
        width: 100%;
        position: absolute;
        top: 0px;
    }
    
    .containsExternFooter{
        overflow: hidden;
        width: 100%;
        position: relative;
        
        margin-bottom: -31px;
    }
    
    
    div.imagesContainer {
        height:auto;   
    }
    
    div.footerInfos{
        float:right;
        margin: -62px auto;
        padding:10px;
        width: auto;
        box-sizing: border-box;
    }
    
    .pegi {
        float:none;
        margin: 0 auto;
        display: block;
    }
    
    footer{
        height:auto;
        min-height: 120px;
        margin-top: 0;
    }
    
    footer p{
        text-align:center;
        float: none;
    }
    
    div.tab {
        margin-top: -66px;
        width: 57px
    }

    .dFooter{
        position: relative;
        margin:0;
        margin-top: -31px;
        left: calc(50% - 325px);
    }
    
    .containsLogoFooter{
        width:65px;
    }
    
    .blender {
        margin-right: 20px;
    }
    
    section.smallPage {
        min-height: 385px;
    }
    
    div.imagesMiniContainer {
        margin: 10px 10px 10px 0;
        width: calc(100% / 4 - 8px);
    }
    
    div.imagesMiniContainer:nth-child(4) {
        margin: 10px 0 10px 0;
    }
    
    div.naturalSpace{
        height: 0;
    }
    
    div.counterSpace{
        margin-top: 0;
    }
    
    div.arrow.mini {
        display: none;
    }
    
    div.messageBox {
        position: absolute;
    }
    
    div.form input.setting[type="submit"], div.form a.setting {
        padding: 10px;
        max-height: 73px;
    }
    
    .textProgress.setting {
        display: none;
    }
    
    div.directionSetting a {
        width: auto;
    }
    
    .shape1{
        margin:0;
    }
    
    div.flagContains{
        float:none;
        margin:0 auto;
        width: 193px;
    }
    
    section div.block33 h3:hover{
        box-shadow: none;
    }
}

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

    div.footerInfos{
        margin: 0 auto;
        width: 100%;
    }
    
    .authorP{
        width:100%;
    }
    .authorPic{
        display: none;   
    }
}

@ms-viewport {
    width: 500px;
    min-zoom: 1;
    zoom: 1;
    max-zoom: 1;
}

@viewport {
    width: 500px;
    min-zoom: 1;
    zoom: 1;
    max-zoom: 1;
}