@charset "utf-8";


@font-face { font-family: yusei;	src: url("./fontes/yusei.ttf");} 
@font-face { font-family: roboto;	src: url("./fontes/montserrat.ttf");} 
@font-face { font-family: opensans;	src: url("./fontes/montserrat.ttf");} 
@font-face { font-family: siracha;	src: url("./fontes/siracha.ttf");} 
@font-face { font-family: nunito;	src: url("./fontes/nunito.ttf");} 


body
{overflow-x: hidden;margin: 0px;font-size:80%;}   

.pwd_resetBox 
{ 
	width: 800px;
	margin:100px auto;
	font-family:roboto;
}

.pwd_resetBox .titre
{ font-size:2em}


#pageconnect .titre
{
	    margin-bottom: 2em;
}

#myprojdiv
{
	width:100% !important;
	
}

.unreadCommunity
{font-size:1.5em;width:40%;margin-left:30%;display:block;
 background:#F5F5F5;
 padding:10px;
 text-align:center;
 margin-top:-30px;
 color:#333;
 border-bottom-left-radius:10px;
 border-bottom-right-radius:10px;
 
 
}


#betatestbox
{
	background-color:#EAEAEA !important;
	padding:22px !important;
	margin: 20px 40px 20px 0px;
	clear: both;
}


#betatestbox ul
{
	column-count:2;
	
}

input[type=button]
{
	background:#305b6f;
	color:#EEE;
	border-radius:.3em;
	transition:box-shadow .4s, opacity .3s;
	
}


input[type=button]:hover
{
	box-shadow:0px 0px 5px 0px #555;
	
}

.bouton:hover:disabled
{box-shadow:0px 0px 5px 0px crimson;}



#pageconnect i 
{
	color:#000;
	padding-bottom:.5em;
	padding-top:2em;
	display:inline-block;
	font-size:1.8em;
}

#pageconnect .titre
{
	    margin-bottom: 2em;
}

#pagerecuppwd .texte
{
	font-size:1em !important;
	text-align:center;
}

#pagerecuppwd .texte input
{
	margin-top:1.3em;
}

#directlog:hover
{
	box-shadow:0px 0px 5px 2px #AAB;
}


#directlog
{
	/* background: #6fa071d6; */
	padding:.3em .6em;
	float:right;
	color: #333;
	text-transform:uppercase;
	text-align:center;
	font-family:poppins, system-ui;
	border:1px solid #888;
	border-radius:.8em;
	width:100px;
	margin-right:1.2em;
	cursor:pointer;
	transition:box-shadow .3s;
	margin-top: .9em;
}

#directlog img
{
	height:1.2em;
	width:auto;
	margin-bottom:-.16em;
	filter: invert(1);
	opacity: .7;
}

#home
{
	width: 35px;
	padding-right: 37px;
	cursor: pointer;
	margin-bottom: -2px !important;
	/* margin-left: -8px; */
}

#loadicon
{
	visibility:hidden;
	position:fixed;
	opacity:.3;
	width:105px;
	margin-top: -25px;
	margin-left: 3px;
	z-index:70000;
}


#burger
{
	display:block;
	cursor:pointer;
	float:right;
	width: 10%;
	margin-top: -10px;
	margin-right: 33px;
	max-width: 70px;
	min-width: 50px;
}

#menu.menuhidden
{
	right:-100%;
	opacity:1;
}

#menu.menuvisible
{
	right:0;
	opacity:1;
}

#menu
{width:300px;height:100%;position:fixed;top:100px;background:#F7F7F7FA;border-left:1px solid #DDD;box-shadow: -2px 0px 10px 0px #333;transition:right .6s, opacity .6s;opacity:0;z-index:60000;font-size: 1.3em;text-align: right;padding:20px 25px 20px 20px;font-family:opensans,system-ui, verdana;}


#menu ul li img
{
	height:25px;
	margin: 0 -20px -5px 5px;
	
}

#menu ul li
{line-height: 2.2em;}

#slogan{
	width: 100%;
	/*background:  url(./pics/backtexture3.png) repeat #081f29e0;*/
	/*box-shadow: 0px 8px 3px #333 inset;*/
	background-size: 440px;
	overflow: hidden;
	color:#FFF;
	/* padding-left: 5%; */
}

#slogan h2 {
    font-size: 2.5em;
    font-family: nunito;
    padding: 80px 20px 0;
    display: block;
    max-width: 880px;
    margin: 50px auto 100px;
    text-align: center;
    line-height: 1.9em;
}

#langswitch
{
	position:fixed;
	bottom:0;
	width:350px;
	margin-left:-20px;
	height:20px;
	text-align:center;
	padding: 0px 0px 12px;
	background: url(./pics/globe.png) 50px 11px no-repeat #254056ed;
    background-size: 19px;
    padding-top: 8px;
}

#langswitch select
{
	font-size:.75em;
	width:200px;
	text-align:center;
	color:#FFF;
	background:#254056;
	border-radius:17px;
	padding:5px;
	border:0
}


#baseline h1
{
	/*font-family:system-ui, calibri;*/
	font-family: yusei, sans-serif;
	padding-left: 120px;
	max-width:70%;
	display:block;
	min-height:55px;
	font-size: 2em;
	margin-bottom: -6px;
	padding-top: 6px;
	font-weight: 100;	
}

#cta_register
{
	font-size:2em;
	width:50%;
	margin: 0px 25% 100px 25%!important;
	background:#aed581;
	color:#FFF;
	font-family:opensans;
	border:0;
	padding:10px;
	cursor: pointer;
	transition:background .5s,  transform .3s;
	text-transform:uppercase
}

#cta_register:hover
{
	background:#5abab1;
	transform:scale(1.02)
	
}


#baseline:after
{
	content: "";
    display: block;
    background: url(./pics/bline5.png) no-repeat 0px -15px;
    height: 60px;
    background-size: 100% 60px;
    position: absolute;
    z-index: 1000;
    width: 100%;
	left:0;
	min-width:1280px;
	margin-top:0px;
	pointer-events:none;
}

#main_header
{
	position: fixed;
    z-index: 62000;
    top: 0;
	background:#FFF;
	margin:0;
	
	display: inline-block;
    width: 100%;
	
	/*border-bottom: 8px solid #000;
    box-shadow: 0px 3px 4px 0 #000*/
}
	
/* #baseline h1
	{
	margin-left: 180px;
    background: #FFF;
    padding: 25px 20px 25px 80px;
    border-radius: 60% 40% 50% 40%;
    border: 1px solid#000;
    margin-top: -10px;
    box-shadow: 5px 5px 20px 5px #000;
	}*/
	
#baseline
{width: 96%;max-width: 1280px;margin: auto;}

#main_highlite
{
 
    margin-top: -80px;
    overflow: hidden;
    padding-bottom: 0px;
    background-size: 100%;
}

.rand1 #main_highlite
{   
background: url(./pics/backmockup1.png?1) no-repeat #233444 center 162px;
}

.rand2 #main_highlite
{   
background: url(./pics/backmockup2.png?1) no-repeat #233444 center 162px;
}

.rand3 #main_highlite
{   
background: url(./pics/backmockup3.png?1) no-repeat #233444 center 162px;
}

.rand4 #main_highlite
{   
background: url(./pics/backmockup4.png?1) no-repeat #233444 center 116px;
}

h2 strong
{color: #769ebd;font-size:1.2em;}

.faketyper
{color: #8dc8e4;display:inline-block;background: #06202bb5;width:280px;border-bottom: 4px solid #8dc8E444;text-align:left;padding-left: 10px;vertical-align:bottom;height: 1.5em;line-height: 1.4em;font-weight: normal;font-size: 1em;/* font-weight: 800; */font-family:monospace, roboto;}


.ft_cursor
{
	color:#CCC;
	animation:blinker .5s linear infinite;
}


@keyframes blinker
{
	0%{opacity:1;}
	45%{opacity:1;}
	50%{opacity:0;}
	95%{opacity:0;}	
}

#afterBuy
{
    font-size: 1.4em !important;
	padding:20px;
	background:#10597a1c;
}

#caroussel
{
	overflow:hidden;
	position: relative;
	height:500px;
	background: url(/site/pics/logo_design.png) #0005 no-repeat center;
	max-width: 1280px;
	margin:auto;
	box-shadow: 0 -1px 2px #000;
	background-size: 880px !important;
	width: 100%;
	}

.slide
{
position: absolute;
background-position:center;
background: linear-gradient(90deg, transparent, black);

top:0;
min-height:500px;
background-repeat:no-repeat;
}


.slide .info
{
	display: block;
    color: #FFF;
    position: absolute;
    bottom: 0;
    font-family: opensans,verdana;
    text-align: right;
    padding: 10px 20px 20px 20px;
    /*background-color: #17232dd9;*/
    text-shadow: 2px 0px 0px black;
    left: 0px;
    width: 700px;
    font-size: 1.4em;
   height:50%;
	}

.slide .info h2, .slide .info span
{
	
    background:#17232dd9;
    padding:10px 30px;
    display:block;
    width:100%;
  
}

.slide .info h2
{transform: perspective(320px) rotateY(6deg) translateX(30px);background: #36525ee3;font-size:1.75em;opacity:0;box-shadow: 0px 5px 10px #000;}

.slide .info span
{transform: perspective(320px) rotateY(-6deg);background: #233444e4;font-size:1.25em;opacity:0;margin-top:-20px;box-shadow: 0px 1px 5px 2px #000;}

@keyframes enter_left
{
	0% { opacity:0; margin-left:1300px; }
	2% { opacity:1; margin-left:20px;transform: perspective(320px) rotateY(6deg); }
    19% { opacity:1; margin-left:20px;transform: perspective(320px) rotateY(2deg); }
    20% { opacity:0; margin-left:-1300px;transform: perspective(320px) rotateY(-20deg); }
}

@keyframes enter_right
{
	0% { opacity:0; margin-left:-1300px; }
	2% { opacity:1; margin-left:20px;transform: perspective(320px) rotateY(6deg); }
    19% { opacity:1; margin-left:20px;transform: perspective(320px) rotateY(2deg); }
    20% { opacity:0; margin-left:1300px;transform: perspective(320px) rotateY(-20deg); }
}

@keyframes enter_left_dec
{
	2% { opacity:0; margin-left:1300px; }
	4% { opacity:1; margin-left:20px; transform: perspective(320px) rotateY(-6deg);}
    20% { opacity:1; margin-left:20px;transform: perspective(320px) rotateY(-2deg); }
    21% { opacity:0; margin-left:-1300px;transform: perspective(320px) rotateY(20deg); }
}

@keyframes enter_right_dec
{
	2% { opacity:0; margin-left:-1300px; }
	4% { opacity:1; margin-left:-50px;transform: perspective(320px) rotateY(-6deg); }
    20% { opacity:1; margin-left:-50px;transform: perspective(320px) rotateY(-2deg); }
    21% { opacity:0; margin-left:1300px;transform: perspective(320px) rotateY(20deg); }
}



#jawalogo
{
	width: 90px;
	box-shadow:3px 3px 10px 0px #29608d;
	float:left;
	border-radius:50%;
	position:absolute;
	z-index:1300;
	top: 0px;
	margin-left: 10px;
	cursor:pointer;
}

.infoblocks
{
	font-family: opensans,verdana;
	width: 43%;
	max-width: 530px;
	background: #e5eab28f;
	margin: 20px;
	float: left;
	padding: 30px;
	font-size: 1.3em;
	transform:rotate(-1deg);
	box-shadow:4px 2px 20px 0px #444;
}

.infoblocks h2
{
	font-size: 1.3em;
	color: #FFF;
	text-shadow: 0px 0px 3px #000;
}

#block_features
{background: #3a7b75;opacity:0;line-height: 1.7em;color: #FFF;margin-top: -200px;}

#block_features:before 
	{
    content: "";
    width: 100%;
    height: 500px;
    position: absolute;
    background: url(./pics/coder.png) no-repeat;
    background-size: 100%;
    bottom: 100%;
    background-position: 25% 100%;
	margin-left: -30px;
}

#block_com:before {
    content: "";
    width: 100%;
    height: 463px;
    position: absolute;
    background: url(./pics/adv_banner.png) no-repeat;
    background-size: 100%;
    bottom: 100%;
    background-position: 0% 100%;
    margin-left: -30px;
}

#block_com
{background: #36525ee3;margin-right: 45%;opacity:0;color: #EEE;line-height: 1.7em;}

#spacer 
{display:inline-block;width: 32%;height: 891px;float:left;}

#main,#main_logged
{

max-width:1280px;
margin:auto;
}

ul
{
	list-style-type:circle;
	
}

#menu ul
{
list-style-type: none; 
}

#promesse,#promesse2
{
	clear:both;
}

#promesse h2,#samples h2, #pricing h2, #partners h2, #news h2
{
	font-size: 2.6em;
	text-align:center;
	padding:1.7em;
	text-shadow: 0px 0px 3px #FFF;
	margin:0;
	font-family:yusei,system-ui, arial;
	font-weight: 100 !important;
}

#promesse2 h2
{
	font-size: 2.5em;
	text-align:center;
	padding:1.7em;
	font-family:nunito,system-ui;
}

.info h2
{/* font-family:siracha,arial; */}

#samples
{
	width: 100%;
    max-width: 1280px;
    clear: both;
}

#partners 
{
margin:auto;
max-width:1280px;
padding-bottom:200px;
background: linear-gradient(0deg, #4980ac3d, transparent);
    
}


#more_infos
{
max-width:1280px;
margin:auto;
background:#FFF8;
}

#pricing
{
font-family: opensans,system-ui, calibri;
    font-size: 1em;
    padding-top: 120px;
   width: 100%;
    overflow-x: hidden;
    margin: auto;

	margin-bottom:200px;
}

#main_pricing,#main_partners
{
	width: 100%;
	padding-left: 0;
	
}

#main_body
{
	width: 100%;
	background: url(./pics/bglogged.png) no-repeat #FFF 20px 0px;
    background-size: 130%;
    background-attachment: fixed;
	background-position: -50px -200px;
}

@keyframes zoomslide
{
	0%
	{ transform:scale(1);}
	
	25%
	{ transform:scale(1.1);}
	100%
	{ transform:scale(1.1);}
}

.slidepic
{
width:auto;
height:500px;
opacity:.9;

}

#promesse
{
	background: linear-gradient(180deg, #4980ac3d, transparent);
	padding-bottom: 300px;
	padding-top:150px;
}

@keyframes showslides
{
0% {
	opacity:0;
	z-index:10;
	/* background-size:100%; */
	}
3% {
	opacity:0;
	z-index:20;	
	}
6%
	{
	opacity:1;
	}
24% {
	opacity:1;
	z-index:20;
	
	}
29% {
	opacity:0;
	z-index:10;
	background-size:103%;
	}
100% {
	opacity:0;
	z-index:10;
	}

}


.citation
{
	display:block;
	padding: 180px 30px 150px 30px;
	width: 36%;
	float: left;
}

.citation .citation_text
{
	
	font-size:2.6em;
	font-family:cursive;
    margin:60px;
    padding:40px;	
}

.citation .citation_text:before
{
	content:'“';
	color:#083a50;
	font-family:arial;
	font-size:6em;
	float:left;
	margin-top:-180px;
	transform:scaleY(-1);


}
.citation .citation_text:after
{
	content:'“';
	color:#083a50;
	font-family:arial;
	font-size:6em;
	float:right;
	margin-top: -15px;
	dissplay:block;
	transform:scaleX(-1);
	margin-right: -50px;
}

.citation .signature
{
font-size:1em;

display:block;
text-align:right;
color:#666;
font-family:roboto,system-ui, arial;
margin-right:100px;
margin-top:30px;

}

#last_news
{margin-top:70px;display:block;/* height: 374px; */}

#samples span, #partners span, #news span 
{
font-family:opensans,system-ui, calibri;
font-size:2em;
display:block;
width:100%;
text-align:center;
}

#partners span
{
padding:8%;
width:88%;
}

#partnersList
{
margin-left: 40px;
}

.partnerbox
{
	width:46%;
	margin:1%;
	height:300px;
	background-color: #233444d4;
	color:#a0bcca;
	border:1px solid #BCD;
	border-radius:2px;
	float:left;
	opacity:0;
	transition:filter .5s, box-shadow .5s;
	overflow: hidden;

}

.partnerbox:hover
{
	filter:brightness(1.3);
	box-shadow:5px 5px 20px 2px #000;
}

.partnerbox a
{ color:unset;
text-decoration:none;}
.partnerbox img
{
	filter:greyscale();
	opacity:.7;
	float:left;
	width:300px;
	height:300Px;
	
}
.partnerbox span
{
padding:20px 0px;
text-align:right !important;

	
}

.partnerbox h3
{
	font-size:2.5em;
	padding:20px;
	font-family:roboto;
	text-align:right;
	margin-bottom: 0;
}


#main_samples .cap
{
	margin:40px;
	
	max-height:420px;
	border:12px solid #FFF;
	border-bottom:32px solid #FFF;
	position:absolute;
	z-index:1;
	transform: perspective(300px) rotateY(3deg) translateX(30px);
	
}

@keyframes superspective 
    {
    	0%,100%{transform: perspective(300px) rotateY(3deg) translateX(30px);}
    	50%{transform: perspective(300px) rotateY(7deg) translateX(30px);}
    
    }






.gotosample
{
	display: block;
    background: #ffc10796;
    width: 250px;
    float: right;
    text-align: center;
    text-decoration: none;
    margin: 15px 0;
    border-radius: 20px;
    color: #FFF;
	position:absolute;
	right:0;
	
}

#getadmin
{
	margin-top: -29px;
    float: right;
    margin-right: 50px;
    padding: 10px 40px;
    font-size: 1.5em;
    background: #03a9f4cf;
    border-radius: 10px;
	cursor:pointer;
}

#main_samples .logo
{
	margin:20px;
	position:absolute;
	z-index:2;
	left:300px;
	box-shadow:0px 0px 10px #000;
	max-height:160px;
	bottom:0px;
	
}

.sample_info h3
{
	background:#3a9cc9bd;
	padding: 15px 30px 15px 15px;
	margin-right:-28px;
}

.sample_info .desc
{
background:#333A;
display:block;
padding:12px;
}

.sample_info .precisions
{
	font-style:italic;
	color:#CCC;
	display: block;
}

.sample_slide:after
{
	content:"";
	background:url(./pics/oblique.png) no-repeat;
	display:block;
	width:100px;
	height:600px;
	margin-left:-60px;
	filter:brightness(3);
	
}

.sample_info
{
	right:10px;
	width:600px;
    position:absolute;
    margin-top:30px;
    font-family:calibri;
    font-size:2em;
    z-index:30;
    text-shadow:0px 0px 4px #000;
    text-align:right;
	color:#FFF;
	height: 680px;
}



#main_samples {
    width: 100%;
    height: 600px;
    background: #0f1b26;
    background-size: 440px;
    overflow-y: hidden;
    overflow-x: hidden;
    cursor: grab;
}

#caroussel_samples,.sample_slide
{

position:relative;
max-width: 1280px;
height: 600px;
width: 100%;

}

#caroussel_samples
{
    overflow-x: visible;
    width: 10000px !important;
    margin: 0 !important;
    max-width: 10000px !important;
	transition:left 1.5s ease-in-out;
}

.sample_slide
{
	float:left;
	margin-right:100px;
}



#pricing span
{
	font-size:2em;
}

#prc_summary
{width:80%;display:block;margin:auto;background: #233444d4;border: 1px solid #555;padding: 10px 100px 10px 40px;margin-bottom: 50px;font-size: 1.7em;box-shadow: 1px 1px 4px 0 #000;max-width:850px;color:#EEE;opacity:0;}

#prc_summary:after
{
    content: "";
    width: 340px;
    height: 460px;
    background: url(./pics/pic_prices.gif) no-repeat;
    display: block;
    background-size: 330px;
    margin-top: -460px;
    margin-left: 800px;
}

#pricetable td
{
	vertical-align:top;
	min-width: 400px;
	padding:8px;
	font-family:roboto;
	font-size:1.5em;
	opacity:0;
}

#pricetable  .prcheader b
{
	font-size: 2.5em !important;
}

#pricetable  .prcheader i 
{
	font-size:1em !important;
	color: #444;
	
}

 
#pricetable
{
max-width: 1600px;
margin: auto;
}

.ptab_inter
{
text-align:center;
font-weight:bold;
font-family:monospace;
color:#EEE;
background:#2a3e47;
font-size:1.6em;
}

#pricing .pline strong
{
	color:#0c4a7b;
	font-size:1.7em;
}





#menu #login_button, #menu #signup_button, #menu #logout_button

{
	border-radius:18px;
	background:#96b76f; /*#FF5722;*/
	display:block;
	width:200px;
	float:right;
	color:#FFF;
	cursor:pointer;
    clear:both;
    margin:10px;
	padding-left: 20px;	
}

#menu #signup_button
{
	background:#3a7b75;
	margin-bottom: 1em;
}

#menu #logout_button
{
	background:#FF5722;
}


#menu #ressources
{
	margin-top: 100px;
	text-transform:uppercase;
	font-size: .7em;
	width:100%;
	display:block;
	font-weight:bold;
	border-bottom:1px solid #CCC;
	text-align: right;
	color: #999;
	padding-right: 1em !important;
}

#menu a 
{
	text-decoration:none;
	color:#555;
	margin-right:40px;
	padding-top: 12px;
    padding-bottom: 12px;
	
}


#footerlinks a:hover
{
	background-color:#065a80ba;
}

#footerlinks a
{padding:8px;transition:background-color .5s;text-decoration:none;color:#DDD;font-size:1.2em;font-family:roboto, verdana;display:inline-block;width:300px;float:right;text-align:right;/* border-right:1px solid #BBB; */padding-right:30px;margin-right:30px;height:50px;}

#main_footer
{
	width: 100%;
	background: #233444d4;
	box-shadow: 0px 8px 3px #333 inset;
	background-size: 440px;
	overflow: hidden;
	height: 800px;
	margin-bottom: -20px;
}

.boxcloser
{
	width:32px;
	float:right;
	cursor:pointer;
}
#footer
{
	width:1280px;
	margin:auto;
	
		text-shadow:0px 0px 2px #000;
	text-align:center;
}

#logobig
{
	width: 42%;
	margin-top: -30px;
	float:left;
	filter: drop-shadow(0px 0px 10px #000);
	
}

#footer_slogan
{
	font-size: 3em;
    margin: 50px 0px 20px 220px;
    display: block;
    color: #FFF;
    font-family: yusei;
    text-align: right;
    width: 80%;
}

#noproject
{
	font-size:1.6em;
	display:block;
	margin-bottom:30em;
}


#loginbox,#signupbox,#contactbox
{position: fixed;display:none;top:150px;width:500px;height:520px;box-shadow: 0px 0px 100px 50px #333;background:#F8F8F8;font-size:1.6em;font-family:roboto;z-index:60000;padding:20px;transition:right .6s, opacity .3s, top .2s;/* overflow: hidden; */}

#noaccountyet
{
	padding-top:2.5em;
	font-size:.7em
}

#signupbox #pwd_strength_checker
{
	padding-left:27%;
	width:62%;
	text-transform:uppercase;
	font-size:.75em;
	transform:translateY(-1em);
}

#signupbox label
{display: inline-block;padding: 1em 1%;width: 23%;text-align: right;height: .7em;font-size:.8em;}

#signupbox label i
{
	font-size:.8em;
	display: block;
}

#contactCaptcha
{
	margin-top: 9px;
}


#signupbox #jw_pwd, #signupbox #mdp_conf
{
	transform: translateY(-1em);
}


#signupbox .g-recaptcha
{
	width:74%;
	float:right;
	/* height: 50px; */
	margin-top:-90px;
}

#inpage_closer
{
	width:50px;
	height:50px;
	border-radius:50%;
	background:url("/site/pics/close.png") 10px #555 no-repeat;
	background-size:30px;
	position:fixed;
	border:1px solid #888;
	right: -20px;
	top: -20px;
	cursor:pointer;
}

#inpage
{width:80%;height:90%;left:10%;position:fixed;top:7%;font-family:roboto,arial;background: #FCFCFC;box-shadow: 0px 0px 20px 5px #333;transition: transform .8s;font-size: 1.1em;z-index: 339999 !important;}
#inpage_content
{overflow-y:auto;height: 95%;padding: 15px 30px;}

#inpage_content .table td
{
	background:#EEE;
	vertical-align:top;
	padding:20px
}


#cgubox
{
	/* background: #4caf5085; */
	padding: 4px;
	font-size: 0.72em;
	padding-left: 25.5%;
}
#cgubox a
{
color: #1f537b;
cursor:pointer;
}



#signupbox 
{
	width: 800px;
	height: 700px;
	overflow-y: hidden;
	overflow-x:hidden;
}

#contactbox 
{
	width: 630px;
	height: 600px;
}



#signupbox .discret
{
	font-style:italic;
	font-size: .7em;
}

#loginbox.boxvisible,#signupbox.boxvisible,#contactbox.boxvisible
{
right:400px;
opacity:1;
display:block;

}


#loginbox.boxhidden,#signupbox.boxhidden,#contactbox.boxhidden
{
right:-1100px;
opacity:0;

}

#contactpic
{
display:none;
}

#loginbox a 
{
	font-size:.7em !important;
	color:green;
	cursor:pointer;
}

#loginbox #loginform
{/* font-size:2em; *//* margin-top:-50px; */}

#signupBoxButton
{
	font-size: 1.5em !important;
}

#loginbox .titre,#signupbox h2,#contactbox .titre
{
	width: 100%;
	background:#254056;
	display:block;
	padding:20px;
	margin-left: -20px !important;
	color:#DDD;
	margin-top:-20px;
	font-size: 1.3em;
	}


#signupbox  #createAccountBt
{
	width:400px !important;
	margin-left: 25.5%;
	margin-top: 1em;
}

#signupInvite
{
	font-size: .8em;
	padding: .7em 7%;
	display:block;
	font-style:italic;
	text-align: left;
}

#loginbox .bouton,#signupbox .bouton
{
	width:86% !important;
	height:50px;
	cursor:pointer;
}

.bouton:disabled
{
	opacity:.5;
	cursor:not-allowed !important;
}


#loginbox input,#signupbox input,#signupbox select
{
	FONT-WEIGHT: 100;
	font-size:1em;
	border: 0px;
	border-bottom: 3px solid #3456;
}

#inactivitywarning
{
	width:90%;
	padding:5%;
	display:inline-block;
}

#signupbox input,#signupbox select
{
		width: 62%;

}

#signupbox input[type=checkbox]
{
		width: 4%;
		height: 20px;
}


#loginbox .texte
{
	font-size:.5em;
	margin-top:-20px !important;
	display:block;
}

.gratis
{
text-transform:uppercase;
font-size:.5em;
color:#aed581;

}

#hellobox {
    color: #EEE;
    font-size: 3em;
    font-family: roboto,arial;
    padding: 50px 3040px 10px 3040px;
    background: url(/site/pics/editback.png) #254056 no-repeat;
    width: 100%;
    margin-top: -95px;
    margin-left: -3000px;
    background-position: 57% -20px;
    box-shadow: 0px -1px 2px #000 inset;
}

#myspace
{
	max-width: 1280px !important;
	height:auto !important;
	background-size: 35%;
	padding: 3% 1%!important;
	min-height: 800px;
	min-width: 640px;
	width: 100%;
}

#pagejoueur
{
	
	height:auto !important;
	min-height:800px !important;
}

#pageinfoscompte
{
	/* height:1000px !important; */
}

.projectbox
{
	font-size:13px;
	width: 44%;
	background:#f1f3f4a8 !important;
	margin-bottom:10px;
	text-shadow:none;
	font-family:lato;
	height: 180px;
	overflow:hidden;
	padding:20px;
	border: 1px solid #EEE;
	/* border: 1px solid #25405633; */
	border-left: 5px solid #bbd999;
	/*border-radius: 12px;
    box-shadow: 0px 1px 0px 0 #333;*/
	margin: 2em 0;
	float: left;
	border-radius: 4px;
	width: 556px;
}

.projectbox.licenseNeeded
{
	border-left-color:orange !important;
	font-family:inherit;
	font-weight:bold;
	
}


.projectbox:nth-child(2n)
{
	margin-right:25px;
}

.projectButtons .bouton
{padding:6px}

.projectbox h3
{
	font-family: nunito;
	margin:0;
	display: inline-block;
	color:#222;
	/* margin-top: 12px; */
	font-size: 2em !important;
	width: 374px;
	height: 40px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.copyright
{
	color: #FFF;
    font-family: roboto;
}

.codev
{
	font-family: roboto;
    color: #334455d4;
    margin: -15px 0 5px;
    display: block;
}
.projectbox .bouton, #contactform .bouton
{
	width: 150px;
    background: #254056 !important;
    color: #EEE;
    margin: 10px;
    display: inline-block;
    font-family: roboto, tahoma !important;
    text-align: center;
    font-weight: bold;
    font-size: 1.3em;
    text-decoration: none;
	cursor:pointer;
}

#contactform textarea
{
	height: 200px;
	font-size:1em;
	width:600px;
}

#contactform .bouton 
{
    width: 300px;
    display: block;
    margin-top: -50px !important;
    /* margin-left: -120px !important; */
}

#contactform input[type=text]
{
font-size:1em;
}

#newprojbt
{
    font-size: 1em;
    color: #FFF;
    padding: 6px 20px 6px 20px;
    margin-top: -10px;
    border: 0px;
    cursor:pointer;
    margin-right: 50px;
}
.projectinfos
{
	margin-left:15px;
	padding-left:8px;
	color: #222;
	font-family:roboto,tahoma;
	
}

.projectpic
{width: 160px;margin: -25px 10px 0 -25px;float: left;padding-bottom: 100px;background: #EEE;/* margin: -25px; */padding: 0px 0px 140px 0px;}

#myspace #betatestbox
{
	/* background:#1f3142b8 !important; */
	color: #222;
	padding:15px;
	font-size:1.3em;
	border-left: 5px solid #102d3b;
	font-family: 'roboto';
}

#myspace #betatestbox h4
{
	font-size:1.3em;
	margin-top: 10px;
}

#myspace #betatestbox ul li
{
padding-bottom:20px;
cursor:pointer;
font-size: 1.2em;
}


#pageinfoscompte
{
	font-size:1.2em !important;
	/* font-family:roboto,arial; */
	padding: 30px 40px;
	transform-origin: 0 0;
	line-height: 30px;
	font-size: 1.6em !important;
	background: #FFFFFFAA;
}

#pageinfoscompte .accountbox
{
	width:100%;
	margin-bottom:20px;
	border-bottom: 1px solid #EEE;
	padding-bottom: 17px;
}

#pageinfoscompte #modifemail
{
	width: 100%;
	background:#EEE;
	/* padding: 2%; */
	float:right;
	clear:both;
	max-height:0;
	transition:max-height .5s;
	overflow:hidden;
	text-align: right;
	font-size: 1em;
}

#newmail
{
	width: 470px;
	font-size: 1em;
	border-radius: 3px;
}

#pageinfoscompte .accountLabel, #pageinfoscompte .accountData
{
	display:inline-block;
	width:48%;
	/* border-bottom:2px solid #CCC; */
	padding:2px;
	height: 18px;
	padding-top: 30px;
}

.accountLabel
{
	color:#777;
	padding-bottom:.2em !important
}

#pageinfoscompte .accountData
{
	font-weight:bold;
	/* border-bottom:2px solid#777; */
}

#pageinfoscompte .accountData select
{
	font-size: 1.2em;
	height:1.5em !important;
}


#mailconfirm_box
{
	text-align:center;
	font-size:2.3em !important;
	background:#EEE;
	font-family:lato, arial;
}

#pageinfoscompte .titre
{
	font-size:1.5em;
}
#pageinfoscompte td
{
	vertical-align:top !important;
}
#pageinfoscompte #delAccountBt
{
	background:crimson;
	color:#FFF;
	padding:20px;
	cursor:pointer;
	margin-top:20px !important;
	display:block;
	width:300px;
	text-transform: uppercase;
	text-align: center;
	float: right;
	margin: 36px;
}

#pageinfoscompte a 
{
	color:#254056;
	cursor:pointer;
}

#pageinfoscompte input[type=file]
{ width:400px}

.checkfield
{
	width:50px;
	height:30px;
	background:#254056;
	font-size:1em !important;
	text-align:center;
	color:#FFF
}

a.checkfield 
{
	color:#FFF !important;
}

#contactform
{
	font-size:.8em !important;
	color:#333 !important;
	
}

#myspace .titre, #shop h2.titre
{/* border-bottom: 1px solid #333; */font-size:32px;display:block;/* border-bottom: 1px solid #607d8b77; */padding-bottom: 10px;font-family: roboto,arial;}



#creategameform
{

	font-family:roboto;
	font-size:1.3em;
	font-weight:normal;
	min-height:1000px;
}

#creategameform .small_text
{
	 font-size:.8em	;
	padding-right:20px;
	display:block
}

#creategameform tr 
{
	margin-bottom:22px !important;

	
}
#creategameform td
{
	margin-bottom:22px !important;
	dsisplay:table-cell !important;
	/* border-bottom:1px solid #c9c9c9; */
	height: 99px !important;
	font-size: 1.3em;
}

#creategameform table
{
 background: #FFFA;
 padding:20px;
}


#creategameform td .pagebox
{height:120px !important;background:#0d3b60ab;padding:20px;border-radius:12px;color:#FFF;width:330px !important;font-size: .75em;}

#creategameform .bouton
{
	color:#FFF;
	font-size:25px !important;
	cursor:pointer;
}

#creategameform input
{
 font-size:20px;
}


#creategameform textarea
{
	width:99%;
	font-size:20px
}

#creategameform #createrrors
{
color:#FFF;
background:#b51308;
border:0px !important;
}

#creategameform #createrrors td
{
border:0px;
}

#userface
{
	display: block;
    cursor: pointer;
    float: right;
    font-size: 2.5em;
    font-family: roboto;
    font-weight: bold;
    color: #FFF;
    width: 46px;
    border-radius: 50%;
    background: #0b5677;
    text-align: center;
    vertical-align: middle;
    height: 45px;
    padding-bottom: 0px;
    text-transform: uppercase;
    margin-right: 20px;
    transform: scale(1.16);
	box-shadow: 1px -1px 0px 1px #000;
	overflow: hidden;
	margin-top: 4px;
}


#userface img
{
    width:110%;
   margin: -5% 0 0 -5%;
}

#main_contener
{width:100%;background: url(./pics/bglogged2.png) no-repeat -50px 120px #FFF;background-size:1600px 1200px;background-attachment: fixed;}

#main_logged
{
font-family:lato, arial;
font-size:1em;
margin-top:150px;
min-height:90%;
background:#FFF8;
padding-bottom: 60px;
}

#gamelistadmin
{
	font-size: 2em
}


#pageinfoscompte td label
{
display:none
}

.checkfield {

	cursor:pointer;
}

.notification
{
	width:93%;
	background:#8bc34a59;
	padding:10px;
}

.notification a 
{
	width:93%;
	color:#333;
	text-decoration:none;
}

.notification img
{
	background:#333;
	padding:4px 4px 5px 4px;
	margin-top:-24px;
	margin-right:-9px
}

#moreGames
{
	max-width: 920px;
    margin: auto;
    padding: 100px 180px;
    font-size: 2em;
    font-family: roboto,verdana;
    text-align: center;
    /*background: linear-gradient(180deg, #4980ac3d, transparent);*/
    
}

#moreGamesBt
{
	font-size: 1.5em;

}

#promesse .spheretitle:before, #promesse2 .spheretitle:before
{
	height:220px;
}



/*.spheretitle::after
{
	content:"";
	display:block;
	position:absolute;
	width:200px;
	height:200px;
	border:30px dashed #28587e;
	background:transparent;
	border-radius:50%;
	left:45%;
	margin-top: -160px;
	margin-left: -20px;
	z-index:-0;
	opacity:.1;
	animation:tourne 24s linear infinite;
}

@keyframes tourne
{
	from {transform:rotate(0deg);}
	to {transform:rotate(360deg)}
}
*/

.spheretitle
	{
		background: linear-gradient(45deg, transparent 10%, #197ece38 50%, transparent 90%);
		/* height:40px; */
		padding:20px !important;
		margin:100px 0 50px 0 !important;
		animation-delay:1s;
		opacity:0;
		animation:showtitle 1s ease forwards;
	}

@keyframes showtitle
{
	0% {opacity:0;transform:translateY(-40px);}
	100% {opacity:1;transform:translateY(0px);}
	
}

/*
.spheretitle::before
{
	content:"";
	display:block;
	position:absolute;
	width:100%;
	height:63px;
	background:linear-gradient(45deg, transparent, #197ece, transparent);	
	left:50%;
	margin-top: -6px;
	margin-left:-2000px;
	padding-left:3000px;
	z-index:-0;
	opacity:.1;
	
}*/


#shop
{
padding:20px;
font-size:1.5em;
font-family: 'roboto',verdana !important;
    padding-bottom: 150px;
}

.lboxprice
{
	width: 160px;
    float: right;
    height: 200px;
    padding-top: 50px;
    background: #133033;
    color: #EEE;
    margin: -20px;
    box-shadow: 3px 0 5px #000 inset;
	text-align:left;
	padding-left:40px;
}

.licenseBox img
{
width:200px;
}

.licenseBox
{
	max-width:400px;
	width:50%;
	float:left;
	border-radius:30px;
	border:5px solid #144e68;
	margin:20px; 
	overflow:hidden;
	text-align:center;
    background:#FFF;
    padding:12px;
    font-size:1.5em;
	cursor:pointer;
}

.licenseBox .lprice
{
	font-size:1.5em;
	color:#5da5c5;
	font-weight:bold;
	display:block;
}

/*.licenseBox .lprice:after
{
	content:"€";
	font-size:.6em !important;
	color:#CCC;
	transition:border-color 1s;
}*/

.licenseBox img
{
max-width:90% !important;
}

#aboutlicenses,.infolicense
{
	font-size:.8em;
	background:#12415654;
	width:95%;
	clear:both;
	border-left:10px solid #607D8B;
	padding:12px;
	
}

.infolicense
{
	border-color:orange;
}

#proceedBox
{
	padding:30px 20px;
}

#proceedBox button,#payBox #card-button,#shop button
{
 background: #15445a;
    font-size: 1.6em;
    color: #EEE;
    padding: 10px 30px;
    float: right;
    cursor: pointer;
    border: 1px solid #555;
    margin: 10px;
	
}

#licquantity
{
	float: right;
    font-size: 2em;
    width: 55px;
    padding: 10px;
    margin-top: 10px;
    height: 35px;
	text-align:center
}


#payDiscount
{
	font-size:.65em;
	padding-left:15px;
	float:right
	
}

#licDiscount
{ text-align:right;
 display:block;
 padding-right:10px
}

#shop #boss
{
	float:right;
	max-width:250px;
}

#payBox
{
	margin-top:30px;
	margin-bottom:30px;
	background:#062e40c4;
	padding: 20px;
	color:#DDD;
	line-height:1.8em;
	padding-bottom:100px;
	box-shadow:2px 2px #2px 0 #444;
	font-family:'roboto',arial;
}

#payBox input
{
	float:right;
	width:50%;
	font-family:monospace,tahoma;
	font-size:1em;

}

#payBox #card-elements
{
	padding: 30px;
    background: #3333;
    margin: 10px;
}

#payBox #cardinfos
{
	background: #3333;
    margin: 20px 10px 0px 10px;
    padding:0px 20px;
    display:block;
    font-size:.8em;
}

#payBox #card-errors,#payBox #errors
{color:#da9d9d;}

.field
{
width:100%;
overflow:hidden;
border-bottom:1px solid #666;
margin-bottom:10px

}

.licenseDetail
{
	padding:12px;
	border:1px solid #222;
	overflow:hidden;
}

.licenseDetail .serial
{
	font-family:monospace;
	color:#888;
	
}

.licenseAffect
{
	float:right;
	background:#223;
	padding:6px 10px;
	color:#EEE;
	margin:-14px;
	border-bottom-left-radius:20px;
	height:24px;
}

.licenseDetail a 
{
	float:right;
	text-decoration:none !important;
	color:#155571 !important;
	font-size:.75em;
}


.licenseAffect .checkfield
{
	margin:0 !important;
	padding-top:0 !important;

}



.error
{
	color:crimson;
	padding: 10px;
    border: 1px solid #DDD;
	border-left: 7px solid crimson;
    margin: 20px 0px;
    display: block;

}

.valid
{
	color: green;
    padding: 10px;
    border: 1px solid #DDD;
	border-left: 7px solid green;
    margin: 20px 0px;
    display: block;

}

#caroussel:before
{
	content:"";
	display:block;
	position:absolute;
	margin-left:-5000px;
	bottom:0px;
	width:20000px;
	height:502px;
	display:block;
	background:#0005;
}

@keyframes showlateral 
{
	0% { opacity:0;transform:translateX(300px);}
	100% { opacity:1;transform:none;}
	
}

@keyframes showLateralReg
{
	0% { opacity:0;transform:translateX(-300px);}
	100% { opacity:1;transform:none;}
	
}

@keyframes showLateralRegInv
{
	0% { opacity:0;transform:translateX(300px);}
	100% { opacity:1;transform:none;}
	
}

@keyframes flipInY {
  from {
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    animation-timing-function: ease-in;
    opacity: 0;
  }

  40% {
    transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    animation-timing-function: ease-in;
  }

  60% {
    transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    opacity: 1;
  }

  80% {
    transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
  }

  to {
    transform: perspective(400px);
	opacity:1;
  }
}


@keyframes showblock {
 from {
    opacity: 0;
    transform: scale(0.1) rotate(30deg);
    transform-origin: center bottom;
  }

  50% {
    transform: rotate(-10deg);
  }

  70% {
    transform: rotate(3deg);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}



#puzzle_gallery
{
	height: 300px;
	width: 1280px;
	display: table;
}


#puzzle_samples
{width:420px;opacity:.8;float:left;/* display: inline-block; */}

.puzzleSample
{
  width: 208px;
  height: 120px;
  background-color:#111;
  background-size:cover;
  background-position: 50% 50%;
  background-repeat:no-repeat;
  float:left;
  border-right: 1px solid #AAA;
  border-bottom: 1px solid #AAA;
}

@keyframes puzzleFlipper1
{
	0% { transform:perspective(300px) rotateX(0deg); }
	32% { transfdorm:perspective(300px) rotateX(0deg); }
	33% { trandsform:perspective(300px) rotateX(180deg); background-image:url(./pics/caps/puzzles/2);}
	34% { transfdorm:perspective(300px) rotateX(0deg); }
	
	65% { transfdorm:perspective(300px) rotateX(0deg); }
	66% { trandsform:perspective(300px) rotateX(180deg); background-image:url(./pics/caps/puzzles/3);}
	67% { transdform:perspective(300px) rotateX(0deg); }
	
	98% { transform:perspective(300px) rotateX(0deg); }
	99% { trandsform:perspective(300px) rotateX(180deg); background-image:url(./pics/caps/puzzles/1);}
	100% { transdform:perspective(300px) rotateX(0deg); }	
}

@keyframes puzzleFlipper2
{
	0% { transform:perspective(300px) rotateX(0deg); }
	32% { transfdorm:perspective(300px) rotateX(0deg); }
	33% { trandsform:perspective(300px) rotateX(180deg); background-image:url(./pics/caps/puzzles/5);}
	34% { transfdorm:perspective(300px) rotateX(0deg); }
	
	65% { transfdorm:perspective(300px) rotateX(0deg); }
	66% { trandsform:perspective(300px) rotateX(180deg); background-image:url(./pics/caps/puzzles/6);}
	67% { transdform:perspective(300px) rotateX(0deg); }
	
	98% { transform:perspective(300px) rotateX(0deg); }
	99% { trandsform:perspective(300px) rotateX(180deg); background-image:url(./pics/caps/puzzles/4);}
	100% { transdform:perspective(300px) rotateX(0deg); }	
}

@keyframes puzzleFlipper3
{
	0% { transform:perspective(300px) rotateX(0deg); }
	32% { transfdorm:perspective(300px) rotateX(0deg); }
	33% { trandsform:perspective(300px) rotateX(180deg); background-image:url(./pics/caps/puzzles/8);}
	34% { transfdorm:perspective(300px) rotateX(0deg); }
	
	65% { transfdorm:perspective(300px) rotateX(0deg); }
	66% { trandsform:perspective(300px) rotateX(180deg); background-image:url(./pics/caps/puzzles/9);}
	67% { transdform:perspective(300px) rotateX(0deg); }
	
	98% { transform:perspective(300px) rotateX(0deg); }
	99% { trandsform:perspective(300px) rotateX(180deg); background-image:url(./pics/caps/puzzles/7);}
	100% { transdform:perspective(300px) rotateX(0deg); }	
}

@keyframes puzzleFlipper4
{
	0% { transform:perspective(300px) rotateX(0deg); }
	32% { transfdorm:perspective(300px) rotateX(0deg); }
	33% { trandsform:perspective(300px) rotateX(180deg); background-image:url(./pics/caps/puzzles/11);}
	34% { transfdorm:perspective(300px) rotateX(0deg); }
	
	65% { transfdorm:perspective(300px) rotateX(0deg); }
	66% { trandsform:perspective(300px) rotateX(180deg); background-image:url(./pics/caps/puzzles/12);}
	67% { transdform:perspective(300px) rotateX(0deg); }
	
	98% { transform:perspective(300px) rotateX(0deg); }
	99% { trandsform:perspective(300px) rotateX(180deg); background-image:url(./pics/caps/puzzles/10);}
	100% { transdform:perspective(300px) rotateX(0deg); }	
}



#puzzles_about, #news_about
{
    font-family: roboto;
    float: left;
    width: 821px;
    font-size: 1.5em;
    padding: 1em;
    height: 203px;
    background: #E3E3E588;
    color: #333;
    line-height: 1.5em;
}

#newspic
{
	float:right;
	width:374px;
}




#shortcuts
{
	padding-top:165px;
	max-width: 1240px;
	margin:auto;
	/* float:right; */
	list-style:none;
	text-align: right;
	display: block;
}

#shortcuts li 
{
	float: right;
}

#shortcuts li a 
{
	font-size:1.3em;
	font-family:"roboto";
	font-weight:bold;
	color:#a9d1e4 !important;
	text-decoration:none;
	letter-spacing:3px;
	padding:0px 15px;
	cursor:pointer;
}

#menucloser
{
	position:absolute;
	width:20px;
	left:0px;
	top:10px;
	background:#2223;
	padding:10px;
	border-radius:50%;
	cursor:pointer;

}

#mailconfirm_box
{
	padding:1.5em;
	font-size:1.6em;
	margin:10%;
}


#mailconfirm_box .bouton
{
color:#FFF;
	background:#254056;
	font-size:1.3em;
	padding:.3em .6em;
	cursor:pointer;
	border:0;
}

#cmailfeedback
{ 
	display:block;
 text-align:center;
	filter:brightness(.8);
 }



.adminToolsbox .bouton
{
	margin-right:20px;
	
	color:#FFF;
	background:#345;
	padding:12px;
	text-decoration:none;
	border-radius:2px;
	font-size:1.15em;
	transition:background.4s;
}

.adminToolsbox .bouton:hover
{
	background:#789;
}


#signupbox iframe
{width:330px !important;height:84px}

#about_news
{
	padding:2em;
	max-width:1180px;
}









/* responsive / mobile */
@media only screen and (min-resolution: 117dpi) and (max-resolution: 119dpi), only screen and (min-resolution: 131dpi) and (max-resolution: 133dpi), only screen and (min-resolution: 145dpi) and (max-resolution: 154dpi), only screen and (min-resolution: 162dpi) and (max-resolution: 164dpi), only screen and (min-resolution: 169dpi) and (orientation: portrait), only screen and (max-width: 480px), only screen and (max-device-width: 480px)
/*@media only screen and (min-resolution: 117dpi) and (max-resolution: 119dpi), only screen and (min-resolution: 131dpi) and (max-resolution: 133dpi), only screen and (min-resolution: 145dpi) and (max-resolution: 154dpi), only screen and (min-resolution: 162dpi) and (max-resolution: 164dpi), only screen and (min-resolution: 169dpi)*/
{
	
#signupbox iframe {
    width: 312px !important;
}

#loginbox #submitResetPwd, #contactbox #sendMessageBt
	{
	margin-top: 200px !important;
	}
	
#signupbox label 
{
	width:95%;
	text-align:left;
	font-size:1.3em;
	height:unset;
	padding-bottom:0;
	padding-top: .4em;
}

#signupbox label i {
display:inline;
	float:right;
}

#signupbox #jw_pwd, #signupbox #mdp_conf, #signupbox #abo_nl, #signupbox #nl_sum {
    transform: none;
}

#signupbox input, #signupbox select 
{
    width: 95%;
    font-size:1.5em;
    margin-left: .4em;
	margin-bottom:.5em
}

#signupbox #pwd_strength_checker {
    padding-left: 2%;
    width: 62%;
    transform: translateY(-.5em);
}

#signupbox input[type=checkbox]
	{
	width:100px;
	height:70px;
	margin-bottom: 1em;
	float: left;
	}

#signupbox #nl_sum 
	{
		width:900px
}
	
#comhelp
{ display:none;}

#menucloser
{
	width: 65px;
	left:-250px;
	top: 90px;
	padding:50px;
	background:#222B;
}

#home
{
    width: 85px;
	margin-left: 5px;
    margin-right: 45px;
}

#directlog
{
display:none;
}

.checkfield
{
	height: 60px;
    width: 100px;
    padding-top: 0;
}


.licenseAffect select
{
font-size:.8em;
}

.licenseAffect
{
	width: 100%;
    margin-bottom: 25px;
	height: 60px;
}

#loginbox,#signupbox,#contactbox
{
	width: 1100px !important;
	height: 1700px;
	zztop:250px !important;
	transition:right .6s, transform .6s;
	box-shadow: 0px 0px 300px 350px #333;
}

#signupbox
{height: 2650px;}

#contactbox
{height: 1900px;}

#loginbox.boxvisible,#signupbox.boxvisible,#contactbox.boxvisible
{
right:70px !important;
display:block !important;
opacity:1;

}


#loginbox.boxhidden,#signupbox.boxhidden,#contactbox.boxhidden
{
right:-2000px !important;
display:block !important;
opacity:0;

}

.g-recaptcha
{
	transform: scale(3.65);
	transform-origin: 0 0;
	width: 100% !important;
	height: 80px;
	float: none !important;
	margin-top: -30px !important;
	overflow: hidden;
}

#contactbox .g-recaptcha, #loginbox .g-recaptcha
	{
	margin-top:10px !important;
	height: 80px !important;
	}

#loginbox .g-recaptcha
{float: left !important;}	
	
#contactform 
{
	font-size:50px !important;
	width:1120px;
}

#contactform .formline
{
	font-size:50px;
	padding-right:100px
}

#contactbox #contactform input
{
	width:97%;
	margin-bottom:30px;
}


#contactbox #contactform textarea
{
	width:97% !important;
	height:650px;
	margin-bottom:30px;
}

#contactform #sendMessageBt
{
	width: 600px !important;
    
    margin-bottom: -13px;
    transform: translateY(100px);
}



#create_compte
{
	font-size:1.6em;

}

#create_compte td
{
height:135px;
font-size: 45px;	
}

#loginform
{
margin-bottom:130px;
}


#loginbox .titre img, #signupbox h2 img, #contactbox .titre img
{
	width:80px;
	padding-top: .3em;
}

#loginbox .titre, #signupbox h2, #contactbox .titre
{
	font-size: 2.4em;
	line-height:120px;
}

#contactbox #sendMessageBt
{
	margin-left: -230px !important;
}
	
#loginbox form
{
	font-size: 2.5em !important;
}

#noaccountyet
	{
	font-size:1.7em	
	}

#loginbox .bouton,#signupbox .bouton, #contactbox .bouton
{
height:100px !important;
font-size:60px !important;

}

#signupbox .bouton
{
	width:94% !important;
	margin-top: 20px;
	height:150px !important;
}

#loginbox .texte
{
	font-size:1.2em !important;
}



#pricing
{
padding:0px !important;
}

#main_header{height:190px;/* width: 1280px !important; */}

#main_body
{
width:100%;
background-size: 300%;

}

#main_pricing,#main_partners
{
	width:100%;
	overflow:hidden;
	padding-left:0 !important;
	margin-left:0 !important;
}

	
#pricetable  .prcheader 
{
	font-size: 1.5em !important;
}

	
#footer_slogan
	{
	font-size: 3em;
	}

.infoblocks{
	width: 80%;
	max-width: 80%;
	margin-left:7%;
	font-size:3em;
}

.infoblocks li
	{
		padding-bottom:50px
	}
	
.sample_info h3 {
   
    margin-top: -60px;
    margin-bottom: 250px;
}
.citation
{
	width:80%;
	margin-left:4%;
	max-width:80%;
	text-align:right;
	padding: 180px 30px 550px 30px !important;
}

.citation .citation_text:before {
      margin-top: -380px;
}

#spacer
{
	display:none;
}

#block_features
{
	margin-right:7% !important;
	margin-top: 100px;
}

.slide
{ 
height:1000px;

}

#caroussel
{
	height: 1080px;
	background-position:center 50px;
	background-size:1000px auto !important;
}

#caroussel:before
{
	background:none;
}
.slide .info
{
	
max-width: 1180px;
	
width: 1160px;
	
font-size:2.3em;
	
background: linear-gradient(180deg, transparent, #385b77);
	
padding-right:70px !important;
	
padding-left:70px !important;
	
height: 580px;
	
bottom: -80px;
	
/* box-shadow: -20px -5px 20px 5px #000 inset; */
}

#baseline h1
{
	font-size:3.8em;
	max-width:50% !important;
	margin-top:20px;
	line-height: 1.2em;
	padding-left: 210px;
	font-weight: 100;
	color: #214c6f;
}


#promesse h2, #promesse2 h2
{
	font-size:3.8em;
	padding-bottom: 5em;
}

#promesse, #promesse2
{padding-top:400px;padding-bottom: 450px;}

#promesse2
{
padding-top:400px;
padding-bottom:50px;

}


#jawalogo
{
	margin-top: 56px !important;
    transform: scale(2) translateX(7px);
}

#baseline:after
{
	top:180px;
	
}

#cgubox
	{
	padding-left:0em;
	font-size:1em;
	margin-top: 260px;
	}

.ptab_inter {
   
    padding-top: 40px !important;
}


#samples,#partners
{
	padding-top:260px;
}

#samples span, #partners span,#news span
{
font-size: 2.9em !important;
    padding: 5% 10%;
    width: 80%;
}

#partners 
{
padding-bottom:200px;
}

#langswitch
{
	width: 810px !important;
    height: 100px !important;
	background: url(./pics/globe.png?) 90px 35px no-repeat #254056ed;
    background-size: 70px;
    padding-top: 30px;
}

#langswitch select
{
	font-size: .9em;
    width: 450px;
    padding: 10px 40px;
}

#promesse h2,#promesse2 h2, #samples h2, #pricing h2, #partners h2, #news h2
{
font-size:4em;
}


#newspic
{
	float:none;
	width:60%;
	margin-left:20%;
}
#news_about
{
	font-size:3em;
	width: 1180px !important;
	height:800px !important;
	margin-top:-80px;
}



.infoblocks h2
	{
	font-size:1.8em;
	}

#burger
{
	width: 15%;
    margin-top: 5px;
    margin-right: 10px;
	max-width: 150px;
}


.info h2
{
	font-size: 2em;
	line-height: 1.3em;
}

.info span
{
	font-size: 1.4em;
}
.faketyper
{
width: 590px !important;
font-size:1em;
transform:translateY(-5px);
}

#slogan h2 
{
font-size: 4.0Em;
    max-width: 94%;
 margin: 350px 3% 200px 3%;
}


#menu
{
width:60%;
font-size:4em;
font-family:opensans,system-ui,monospace;
box-shadow: -100px 0px 350px 150px;
}

#menu ul
{
list-style-image:none;
}

.sample_info
{
	font-size: 331%;
	width: 900px;
}

#main_samples .logo 
{left: 20px;top: 700px;width: 300px;max-height: 300px !important;height:300px;}

.precisions
{background:#333C;display: none !important;}

.gotosample
{
	font-size:1.7em;
	width:300px;
	bottom: -460px;
	padding-left: 30px;
    padding-right: 30px;
}


#main_samples {
padding-top:100px;
padding-bottom:100px;

}

body
{
	width: 1280px;
	font-size:100%;
	
	overflow-x: hidden;
}


#about_license
	{font-size:1.7em;padding:1em}
	
#myspace span.info
	{
		font-size:3em;
		text-align:center;
		width:980px;
		margin:30px;
		padding:30px
		
		
		
	}
	
#betatestbox
	{ font-size:2.4em !important}

#betatestbox ul
	{
		column-count:1
	}

.sample_info h3 {
    background: #3a9cc9bd;
    padding: 15px 30px 15px 15px;
    margin-right: -28px;
    margin-top: -76px;
    margin-bottom: 50px;
}

#main_samples::after,#main_samples::before
	{
	display:none;
	}
	

.sample_slide:after {
    
    height: 800px;
    margin-left: -80px;
    background-size: cover;
    margin-top: -100px;
    width: 100px;
	
}


#typegames
{
	width: 705px !important;
}

#menu #login_button, #menu #signup_button 
{
	width:600px;
}

.citation .citation_text {
    font-size: 5em;
	font-weight:bold;
}

.citation .citation_text:after {
    margin-right: -150px;
	    margin-top: -30px;
}


#prc_summary:after {
   
    width: 450px;
    height: 636px;
  
    background-size: 450px;
    margin-top: -640px;
    margin-left: 730px;
}


#prc_summary {
    width: 90%;
    margin: 50px;
    font-size: 2.8em;
	
}


#main_samples .cap 
{
    /* margin: 40px; */
    max-height: 680px;
    left: 40px;
    height: 680px;
}

#pricetable
{margin-top: 250px;
/* width: 800px; */
max-width: 1280px;
/* width: 1280px; */
transform-origin: 0% 0;
display: block;
}

#pricetable td.pline
{
    font-size: 40px;
    padding-top: 100px;
    padding-bottom: 100px;
}

#pricetable td.prcheader
{
	min-width: 150px !important;
	padding: 2em 1em;
}

#pricetable td.ptab_inter
{
    font-size: 2.5em;
    padding: 100px 40px !important;
}

#pricetable td.ptab_info,#pricetable td.ptab_more
{
    font-size: 9vw !important;
    padding: 45px 15px;
    min-width: 360px;
    width: 360px;
}

.citation .signature {
    font-size: 2.5em !important;
}

#about_games, #about_news
	{
	font-size:2.3em !important;
	padding:1em;
	}
	
#block_features:before 
	{
    height: 840px;
    /* background-size: 70% !important; */
    background-position: 30% 100%;
 }

#block_com:before {
    height: 650px;
}
#hellobox
{
	height: 130px;
    margin: 185px 0 0 0;
    font-size: 5em;
    padding-top: 95px;
    background-size: 300px;
    overflow-x: hidden;
    padding: 80px 0 0px 50px;
    background-position: 955px -34px;
	width: 1230px;
}

#userface
{
	width: 120px;
    height: 120px;
    margin-top: 20px;
    margin-right: 50px;
	font-size: 5em !important;
}

#myprojdiv h2.titre
{
	font-size:4em !important;
}

#myprojdiv .texte
{
	font-size:2.5em;
	padding-right: 60px !important;
    display: block;
	}

.notification
{
	font-size:2.5em;
}

.notification img
{
	width:70px;
	margin-top:-45px;
}

#myprojdiv,#main_logged
{
	width:1280px !important;
}

#main_logged
{
background-size:800px;
}

#myspace .projectbox
{
	font-size:2em !important;
	min-height:420px;
	border-left:20px solid #62b866a6;
	margin-bottom:50px;
	width: 1180px;
	max-width: 1180px;
	border-radius: 16px;
	height: 600px;
}

.projectbox h3
	{
		height:180px;
		width:760px;
	}
#main_contener
{
	background-size:2700px 3300px;
}

#myspace .projectpic
{
	width:300px;
	padding-bottom:600px
}

.projectbox .bouton
{
	width:390px;
	padding-top:20px !important;
	height:60px;
	margin:20px 0 !important;
}

.projectbox .bouton img
{
width:50px
}

#logout_button
{
	width: 600px !important;
}

#myspace
{
	min-height:1500px;
}

#pageinfoscompte
{
	padding-top:4em
}

#pageinfoscompte .accountLabel, #pageinfoscompte .accountData
	{
		width:98%;
		font-size: 2.2em;
	}

	
#pageinfoscompte .checkfield
{
	height: 106px;
	line-height: 1.5em;
	font-size: 4em !important;
}

#modifemail .checkfield
	{
	font-size:1.5em !important;
	}
	
#pageinfoscompte input,#pageinfoscompte select
{
	height:1.4em !important;
	width: 1100px !important;
}

	#pageinfoscompte .accountData select
	{ font-size:4.2em}

#pageinfoscompte input[type=file]
{width: 1100px !important;font-size: 4em;}

#pageinfoscompte .formline font
{display:none !important}



#moreGames
{
font-size:3em !important;
}


.spheretitle:before
{
	margin-left: 0;
    padding-left: 0;
    
    opacity: .3;
	height:120px;
	width: 1280px !important;
	left:0px;
}

#promesse .spheretitle:before,#promesse2 .spheretitle:before
{
	height:380px;
}


#main_highlite
{
	    background-position: center 270px !important;
    background-size: 100% 33%!important;
}

#menu ul li img
{
	width:62px !important;
	height:67px !important;
	
}

#shop
{
	font-size:2.8em !important;
}

#shop h2
{

	font-size:1.4em !important;
}

#shop .licenseBox
{
	max-width:540px !important;
	height:450px !important;
}

#shop .lboxprice
{
	width:220px;
	height:480px;
	padding-top:100px;
	font-size:.8em !important;

}

#shop .lboxprice input,#shop input[type=checkbox]
{
	transform:scale(3) translateX(-6px) translateY(-4px);
}

#shop .licenseBox img
{
width:350px;
padding-top:50px;
margin-left:-75px

}

#shop .infolicense,#shop #aboutlicenses
{
	font-size:1em;
}

#shop
{
	min-height:1700px !important;

}

#shop .field input
{
width:98%

}

#payBox
{
    padding-bottom: 200px !important;
    margin-bottom: 100px !important;

}

#cardinfos
{
margin-top: 80px !important;
}

#loadicon
	{	
	width: 200px;
    margin-top: -17px;
    margin-left: -30px;
	
	}
	
.licenseDetail a img
{
	width:35px
}

#footerlinks a
{
font-size: 1.5em;
width:300px;
}

#inpage_content
{
	font-size:2em;
}


#inpage_closer
{
	width:150px;
	height:150px;
	background:#222;
}

@keyframes enter_left_dec
{
	2% { opacity:0; margin-left:1300px; }
	4% { opacity:1; margin-left:-120px; transform: perspective(320px) rotateY(-6deg);}
    20% { opacity:1; margin-left:-120px;transform: perspective(320px) rotateY(-2deg); }
    21% { opacity:0; margin-left:-1300px;transform: perspective(320px) rotateY(20deg); }
}

#logobig
{
transform:scale(1.2);
}


@keyframes showtitle
{
	0% {opacity:0;transform:translateY(-140px);}
	100% {opacity:1;transform:translateY(0px);}
	
}

.partnerbox
{
	height: 450px !important;
    width: 80%;
    margin: 2px;
    overflow: hidden;
    margin: 1em 10%;
}

.partnerbox img
{
padding-bottom:300px;
width:450px;
height:450px;
background:#111
}

.partnerbox span
{
width:85% !important;
}

#partnersList
{
padding:0px !important;
margin:5px !important;
}

#pagerecuppwd .texte
{
	font-size:1.8em !important;
	
}


#puzzle_gallery
{
	
display:block;
	
/* margin-top: -200px; */
}

#puzzle_samples
{width:100%;/* margin-top:300px; */}


.puzzleSample
{
	width:50% !important;
	height:350px;
	border:0px;
}

#puzzles_about
{
	width: 1180px;
	padding: 50px;
	font-size:3em;
	height: 750px !important;
	border: 0;
}

#shortcuts
{
	display:none;
}

#mailconfirm_box
	{
	margin:3%;
	font-size:3.4em !important;
		line-height:1.6em;
		
	}

#mailconfirm_box button
	{
		max-width:100%;
		
	}

#homeValid
	{
	padding-top: 8em;
	}

#signupbox .discret
	{ font-size:35px !important}

	
#inactivitywarning
	{
	padding:1.5em !important
	}

#signupbox #createAccountBt
	{
    width: 80% !important;
    margin-left: 10%;	
	}

#cta_register
	{
		font-size:3.5em;
		margin:-100px 15% 350px 15% !important;
		width:70%;
		padding:1em
	}
	
	.pwd_resetBox
	{
		width:1100px;
		padding: 400px 5%;
		font-size:1.9em;
		margin:0 !important;
		
	}

	.pwd_resetBox .titre
	{
		font-weight:bold
	}

	.pwd_resetBox table
	{
		width:100%
	}

	.pwd_resetBox td input
	{
		font-size:1.9em !important;
		width:500px;
	}

	.pwd_resetBox td 
	{
	
		padding-bottom:120px !important;
		font-size:1.9em !important;
		vertical-align:top;
	}

	.pwd_resetBox td .bouton
	{
	 width:1000px !important;
		height:auto !important;
		margin-left:-500px;
		padding:50px;
		font-size:.9em !important;
	}
	
	#pageinfoscompte .titre
	{ 
		font-size:3.5em;
		padding-top:4em !important;
	}

	#pageinfoscompte .accountbox
	{
		margin: 40px 0 136px 0;
	}

	#pageinfoscompte #delAccountBt
	{
		width:85%;
		font-size:2em;
		padding:50px !important
	}
	
	#accountInfo
	{
	width:100%;
	margin:12em 4em;
	}
	
	#accountInfo font
	{
		font-size:2.5em
	}

	#pageinfoscompte #modifemail
	{
		margin-top:-100px;
		font-size:1.8em;
		width:100%;
	}

	#pageinfoscompte #newmail
	{ width:600px !important; height:75px !important}

#caroussel_samples
{height:1100px !important;}

#main_samples
	{
	height:1100px;
		
	}

.sample_info
{
	width:90%
}	
.sample_info h3
	{
	font-size:1.6em;
	}
	
.sample_info .desc
	{
	margin-top: 581px;
	width: 900px;
	float: right;
	height: 274px;
	background: #333D;
	}

.sample_slide:after
	{
		display:none;
	}

#pricetable .prcheader i
	{ font-size:1.4em !important}
	
	
}

.newprice
{ 
display:inline;
font-size:.8em !important;
	text-transform:uppercase;
	color:#225;
	font-weight:bold;
	background:gold;
	margin:3px;
	padding:3px;
	border-radius:3px;
}


/* mobile en landscape */
@media only screen and (max-height: 575.98px) and (orientation: landscape) 
{
  html, body, #main
	{
	 width:1280px !important;
	  overflow-x:hidden;
	  }
#shortcuts
	{visibility:hidden} 
}

/* fix tabs */

@media (min-width: 768px) and (max-width: 1024px)
{
html
	
	{
		width:1380px
	
	}

.spheretitle::before
	{
		display:none
	}
.spheretitle
	{
		background:linear-gradient(45deg, transparent 10%, #197ece61 50%, transparent 90%);
		height:40px;
		padding:20px !important;
		margin:100px 0 50px 0 !important;
		animation:showtitle 1s ease forwards;
		opacity:0;
		
	}
	
#menu
	{ font-size:220%}



}

@media (min-width: 768px)
{
	#main_samples::before,#main_samples::after
	{
		content:"";
		height: 600px;
		width:12%;
		display:block;
		position:absolute;
		background:linear-gradient(90deg,#071d27,#071d2700);
		z-index:200;
		pointer-events:none;
	}

	#main_samples::after
	{
		background: linear-gradient(90deg,#071d2700,#071d27);
		right: 0 !important;
		z-index: 201;
		margin-top: -600px;
		
	}
}