@charset "utf-8"; @font-face { font-family: 'Material Icons'; font-style: normal; font-weight: 400; src: url(../fonts/MaterialIcons-Regular.eot); src: local('Material Icons'), local('MaterialIcons-Regular'), url(../fonts/MaterialIcons-Regular.woff2) format('woff2'), url(../fonts/MaterialIcons-Regular.woff) format('woff'), url(../fonts/MaterialIcons-Regular.ttf) format('truetype');}
.material-icons { font-family: 'Material Icons'; font-weight: normal; font-style: normal; font-size: 24px; display: inline-block; line-height: 1; text-transform: none; letter-spacing: normal; word-wrap: normal; white-space: nowrap; direction: ltr; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; -moz-osx-font-smoothing: grayscale; font-feature-settings: 'liga';}
a { cursor: pointer; text-decoration:none; color:#0098FF; outline:none; -webkit-transition:none; -moz-transition:none; -o-transition:none; -ms-transition:none;transition:none;}
a:hover { text-decoration:underline;}
html { -webkit-text-size-adjust: 100% !important; -ms-text-size-adjust: 100%; } body { background: #F6F8FA; margin:20px; image-rendering:auto; color:#2A2C2E; font-family:"Barlow Condensed", Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight:400; font-size:20px; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; -moz-osx-font-smoothing: grayscale; font-feature-settings: 'liga';} html , body { -ms-overflow-style:none; cursor:default; margin:0; } .showRess { position:relative; text-align:left !important; white-space:normal !important; display:inline-block; line-height:100% !important; padding-right:1.4em !important;} .showRess img { position:absolute; right:0.05em; height:1.16em; top:-0.02em; } .separe { margin:50px 0; position:relative; overflow:hidden; color:#C4C6C8; font-size:90%;}
.separe span { position:relative; padding:0 5px; display:inline-block;}
.separe span:before , .separe span:after { position:absolute; top:50%; margin:3px 0; height:1px; background:#EBEDEF; width:700px; content:"";}
.separe span:before { right:100%;}
.separe span:after { left:100%;} .folio { font-size:0; margin:15px -2px;}
.folio a , .folio span { text-decoration:none; display:inline-block; font-size:14px; margin:0.1em; text-align:center; min-width:16px; color:#96989A; background:#F6F8FA; padding:1px 5px; -webkit-border-radius:3px; -moz-border-radius:3px; -o-border-radius:3px; -ms-border-radius:3px;border-radius:3px; line-height:26px; height:26px; font-weight:400; overflow:hidden;}
.folio .actif { font-weight:600; color:#ed6362; cursor:default; }
.folio .ellips { background:none; font-size:14px; line-height:18px; padding:0 3px; color:#96989A;}
.folio .nav a , .folio .nav span { font-size:22px; line-height:19px; color:#2A2C2E; margin:0.1em 0.06em;}
.folio .nav span { cursor:default; opacity:0.3; }
.folio a:hover { color:#2A2C2E;}
.folio .nav { float:right; font-style:normal;} .error { color:#FF4C65;}
.green { color:#02D0AC;}
.smallLH { line-height:125% !important;} #headBackground.small { height:360px; -webkit-transform:skewY(-5deg); -moz-transform:skewY(-5deg); -o-transform:skewY(-5deg); -ms-transform:skewY(-5deg);transform:skewY(-5deg);} #content .center { margin-top:0;}
#content { background:#FFF; margin:140px 0;}
#content:before, #content:after { position:absolute; content:""; height:200px; margin:-100px 0; width:100%; left:0; background:#FFF; -webkit-transform:skewY(-5deg); -moz-transform:skewY(-5deg); -o-transform:skewY(-5deg); -ms-transform:skewY(-5deg);transform:skewY(-5deg);}
#content:after { bottom:0;}
#content .center { position:relative; z-index:3; margin-top:30px; margin-bottom:30px;} #headBackground { height:760px; width:100%; -webkit-transform:skewY(-5deg); -moz-transform:skewY(-5deg); -o-transform:skewY(-5deg); -ms-transform:skewY(-5deg);transform:skewY(-5deg); position:absolute; top:-180px; left:0; overflow:hidden; background:#c11d13; background: linear-gradient(150deg,#c11d13 15%,#D45018 70%,#fabe2a 94%);}
#headBackground.medium { height:620px; } #userBlock { position:absolute; right:50px; margin-top:55px; background:#FFF; padding:5px; color:#2A2C2E; -webkit-border-radius:40px; -moz-border-radius:40px; -o-border-radius:40px; -ms-border-radius:40px;border-radius:40px; line-height:42px; box-shadow:0 0 0 4px rgba(0,10,20,0.15);} #userBlock a.name { float:left; color:#2A2C2E; font-size:14px; margin-right:8px; height:38px; padding:3px 8px 0 48px; line-height:16px; position:relative; border-right:1px solid rgba(0,10,20,0.2); }
#userBlock a.name span.picture { position:absolute; top:0; box-shadow:0 0 3px rgba(0,10,20,0.2) inset; left:0; width:42px; height:42px; background:#EBEDEF no-repeat center center; -webkit-border-radius:100%; -moz-border-radius:100%; -o-border-radius:100%; -ms-border-radius:100%;border-radius:100%; -webkit-background-size:cover; -moz-background-size:cover; -o-background-size:cover; -ms-background-size:cover;background-size:cover;}
#userBlock a.name strong { display:block; font-weight:600; font-size:20px; overflow:hidden; padding:3px 0; max-width:150px; white-space:nowrap; text-overflow:ellipsis;}
#userBlock p.buttons { float:right; margin:0;}
#userBlock p.buttons a { display:block; -webkit-transition:none; -moz-transition:none; -o-transition:none; -ms-transition:none;transition:none; font-size:20px; margin:0; -webkit-border-radius:40px; -moz-border-radius:40px; -o-border-radius:40px; -ms-border-radius:40px;border-radius:40px; box-shadow:none; padding:0 20px; line-height:42px; animation-duration: 1.5s; animation-name: bounceOpacity; animation-iteration-count: infinite; animation-timing-function:ease-out; }
#userBlock p.buttons a:hover {opacity:1 !important;} .overlay { position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,5,10,0.85); z-index:100;} #ranks p { display:block; border:1px solid #EBEDEF; border-width:1px 0; margin:-1px 0 0 0; height:30px; line-height:30px; position:relative; padding:12px 0; font-size:80%; padding-left:150px; padding-right:80px; -webkit-transition:background-color 0.3s; -moz-transition:background-color 0.3s; -o-transition:background-color 0.3s; -ms-transition:background-color 0.3s;transition:background-color 0.3s; } #ranks p img { position:absolute; left:65px; height:24px; margin:3px 0; }
#ranks p .rank { position:absolute; left:15px; width:54px; font-weight:600; text-align:left; }
#ranks p .avatar { position:absolute; width:30px; height:30px; -webkit-border-radius:100%; -moz-border-radius:100%; -o-border-radius:100%; -ms-border-radius:100%;border-radius:100%; background:#EBEDEF no-repeat center center; -webkit-background-size:cover; -moz-background-size:cover; -o-background-size:cover; -ms-background-size:cover;background-size:cover; left:110px; box-shadow:0 0 5px rgba(0,10,20,0.1) inset; }
#ranks p strong { display:block; overflow:hidden; text-overflow:ellipsis; font-weight:400; white-space:nowrap;}
#ranks p .points { position:absolute; right:15px; width:60px; text-align:left; color:#96989A; text-align:right; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#ranks p .points.red { color:#FF4C65; font-weight:600;}
#ranks p.itsMe strong , #ranks p.itsMe .points { font-weight:600; color:#2A2C2E;}
#ranks p.itsMe { background:rgba(230,230,50,0.15);} p.onglets { margin:-15px -1px 25px -1px;}
p.onglets a { display:inline-block; padding:6px; margin:1px; color:#96989A; background:#F6F8FA; text-transform:uppercase; font-size:14px; text-decoration:none; -webkit-border-radius:3px; -moz-border-radius:3px; -o-border-radius:3px; -ms-border-radius:3px;border-radius:3px; font-weight:600;} p.onglets a.actif { opacity:1; background:#96989A; color:#FFF;} @keyframes bounceOpacity{ 0% , 100% { opacity:1;} 50% {opacity:0.7;}
} #headBackground.blue { background:#0b1881; background: linear-gradient(150deg,#0b1881 15%,#0d55af 70%,#0575d4 94%);} #mapView { position:absolute; opacity:0.1; width:100%; height:100%; background:url(../images/map.png) no-repeat center center; -webkit-background-size:cover; -moz-background-size:cover; -o-background-size:cover; -ms-background-size:cover;background-size:cover; top:0; left:0;}
#characters { z-index:2; width:900px; height:580px; background:url(../images/characters.png) no-repeat 0 bottom; -webkit-background-size:contain; -moz-background-size:contain; -o-background-size:contain; -ms-background-size:contain;background-size:contain; position:absolute; bottom:-60px; left:50%; margin-left:30px; -webkit-transform:skewY(5deg); -moz-transform:skewY(5deg); -o-transform:skewY(5deg); -ms-transform:skewY(5deg);transform:skewY(5deg);} #characters-2 { z-index:2; width:640px; height:340px; background:url(../images/characters-2.png) no-repeat 0 bottom; -webkit-background-size:contain; -moz-background-size:contain; -o-background-size:contain; -ms-background-size:contain;background-size:contain; position:absolute; bottom:-30px; left:55%; margin-left:30px; -webkit-transform:skewY(5deg); -moz-transform:skewY(5deg); -o-transform:skewY(5deg); -ms-transform:skewY(5deg);transform:skewY(5deg);} section { position:relative; z-index:3; padding:5px 0;} section.content .center { padding-top:15px; padding-bottom:15px; height:1200px;} h1, h2, h3 , h4, h5 { font-weight:600;}
.ariane { margin:1.5em 0; font-size:90%; line-height:110%;}
h1 + .ariane { margin-top:-1em;}
p { margin:0.4em 0; }
h1 { font-size:190%; margin:0.6em 0 0.6em 0; line-height:110%;}
h2 { font-size:150%; margin:0.8em 0 0.6em 0; line-height:110%;}
h3 { font-size:120%; margin:0.8em 0 0.6em 0; line-height:110%;}
h4 { font-size:100%; margin:0.8em 0 0.6em 0; line-height:110%;} .center { margin:50px auto; max-width:1200px; box-sizing:border-box; padding:0 50px;}
.grey { color:#96989A;} header { position:relative; padding:50px 0; height:30px; line-height:30px; z-index:4; } header .center { margin:0 auto; position:relative;}
header a, header a:hover { color:#FFF; text-decoration:none;}
#logo { height:150px; float:left; background:url(../images/logo.png) 0 center no-repeat; -webkit-background-size:contain; -moz-background-size:contain; -o-background-size:contain; -ms-background-size:contain;background-size:contain; width:250px; position:absolute; margin:-40px -15px;}
header #menu { float:right; margin:0 -8px;}
header #menu a { float:left; margin:0 5px; padding:0 3px; font-size:18px; opacity:0.6; position:relative;}
header #menu a:hover , header #menu a.actif { opacity:1; -webkit-transition:opacity 0.2s; -moz-transition:opacity 0.2s; -o-transition:opacity 0.2s; -ms-transition:opacity 0.2s;transition:opacity 0.2s;}
header #menu a.actif:before { position:absolute; width:100%; left:0; bottom:-1px; height:2px; -webkit-border-radius:3px; -moz-border-radius:3px; -o-border-radius:3px; -ms-border-radius:3px;border-radius:3px; background:rgba(255,255,255,0.8); content:""; }
header #menu a i { display:inline-block; font-size:21px; vertical-align:middle; margin-top:-3px; margin-right:3px;}
#intro { color:#FFF; padding-top:40px; min-height:450px;}
#intro h1 { width:65%;max-width:600px;}
#intro p { width:60%; max-width:500px;} #intro.medium { height:260px; min-height:0;} #intro.medium h1 { width:60%; max-width:640px;}
#intro.medium p { width:60%; max-width:600px;} .dbleBlock { margin:50px auto; max-width:720px; position:relative; padding:5px 0; }
.dbleBlock h3 { margin:0 0 30px 0;}
.dbleBlock p { margin-top:10px; margin-bottom:0;}
.dbleBlock .separe { width:2px; height:100%; top:0; left:50%; margin:0 1px; background:#EBEDEF; position:absolute;}
.dbleBlock .col { padding:0 0 0 50px;}
.dbleBlock .col.al-r { text-align:right; padding:0 50px 0 0;}
.dbleBlock .col.al-r p { margin-left:auto; margin-right:0;} .dbleBlock p.or { position:absolute; width:40px; height:40px; -webkit-border-radius:100%; -moz-border-radius:100%; -o-border-radius:100%; -ms-border-radius:100%;border-radius:100%; margin:-22px; top:50%; left:50%; background:#FFF; border:2px solid #EBEDEF; text-align:center; line-height:40px; color:#96989A; text-transform:uppercase; font-weight:600; font-size:14px; z-index:2;} .dbleBlock ul { list-style:none; font-size:14px; color:#96989A; margin:30px 0 0 0; position:relative;}
.dbleBlock ul li { margin:6px 0 0 0; position:relative;}
.dbleBlock ul li i { position:absolute; margin-left:-22px; top:-2px; font-size:20px; color:#02D0AC;} p.buttons a.buttonSocial { background:linear-gradient(to bottom, #4267b6 0%,#4160a1 100%); margin: 0; padding-left:48px; }
p.buttons a.buttonSocial.google { background:linear-gradient(to bottom, #e15b4f 0%,#d15348 100%);}
p.buttons a.buttonSocial strong { position:absolute; left:0; top:0; height:100%; border-right:1px solid rgba(0,0,0,0.2); box-shadow:0 0 0 1px rgba(255,255,255,0.12); padding:10px 0; margin:-10px -48px; width:36px; background:url(../images/pictos/socials/buttons/facebook.svg) no-repeat center center; }
p.buttons a.buttonSocial.google strong { background-image:url(../images/pictos/socials/buttons/google.svg); } hr { margin:50px auto; border:none; border-top:1px solid rgba(0,10,20,0.08); border-bottom:1px solid #FFF;} .buttons.big a i { font-size:21px; }
.buttons.big a { padding:16px 18px; font-size:20px;}
.buttons { font-size:0; line-height:0; margin:30px -6px;}
.buttons a { display:inline-block; overflow:hidden; position:relative; box-shadow:0 3px 6px 0 rgba(0,0,0,0.25); margin: 4px; padding:10px 14px; border-radius:3px; line-height:18px; font-size:16px; text-transform:uppercase; text-align:center; min-width:54px; font-weight:600; background:#0098FF; color:#FFF; text-decoration:none; white-space:nowrap; max-width:100%; box-sizing:border-box; text-overflow:ellipsis; }
.buttons a:hover { }
.buttons a i { float:left; line-height:18px; position:relative; z-index:3; font-size:21px; margin-right:5px; margin-left:-3px; }
.buttons a span { position:relative; z-index:3;}
.buttons a.disable , p.buttons a.disable:hover { color:#C4C6C8; cursor:default; background:#F6F8FA; opacity:0.9; box-shadow:0 3px 6px 0 rgba(0,0,0,0.05);} .buttons a:before { position:absolute; z-index:2; width:0; height:0; -webkit-border-radius:80%; -moz-border-radius:80%; -o-border-radius:80%; -ms-border-radius:80%;border-radius:80%; left:50%; top:50%; background:#2A2C2E; content:""; -webkit-transition:all 0.2s; -moz-transition:all 0.2s; -o-transition:all 0.2s; -ms-transition:all 0.2s;transition:all 0.2s; transition-timing-function:ease-in-out; opacity:0;} img.picto { display:block; margin:5px auto 15px auto; width:54px; height:54px;} .checkOk { padding-left:30px; position:relative;}
.checkOk i { position:absolute; left:0; color:#02D0AC;} .buttons a.grey { color:#0098FF; background:#FFF; box-shadow:0 3px 6px 0 rgba(0,0,0,0.12);}
.buttons a.grey:hover { color:#0098FF; } .buttons a.grey:before { background:#2A2C2E; } .clear { clear:both;}
.small { font-size:90%;} .white { background:#FFF;}
img.block { display:block; width:100%; height:auto; max-width:600px; margin:20px auto;} .al-c { text-align:center;} .columns { margin:0 -15px;}
.col { padding:0 15px; box-sizing:border-box; float:left; }
.col-50 { width:50%;}
.col-33 { width:33.33%;}
.col-25 { width:25%;}
.col-20 { width:20%;} .med-size { margin-left:auto; margin-right:auto; max-width:740px;} .buttons a.red { background:#FF4C65; } .buttons a.orange { background:#EF9950; } .buttons a.green { background:#02D0AC; } .buttons a.disable:before , .buttons a.disable:after { display:none; } form.classic.loading:before { position:absolute; top:0; left:0; width:100%; height:100%; z-index:50; content:""; }
form.classic.loading .submitForm span { opacity:0.15;}
form.classic.loading .submitForm span span { opacity:1;} .quote { font-family:"Cormorant", Georgia, "Times New Roman", Times, serif; font-size:170%; line-height:110%; font-weight:300; color:#2A2C2E; font-style:italic; opacity:0.8; letter-spacing:-0.03em;} #devices { margin-top:150px;}
#devices img.devices { position:absolute; right:50%; width:50%; z-index:2; margin-top:-170px; margin-right:15px; max-width:740px; min-width:540px;}
#devices .center { position:relative; z-index:3; margin-top:-10px;}
#devices .center h1, #devices .center h3, #devices .center p { margin-left:50%; }
#devices .center p { max-width:460px;}
#headDevices { height:500px; width:100%; -webkit-transform:skewY(-5deg); -moz-transform:skewY(-5deg); -o-transform:skewY(-5deg); -ms-transform:skewY(-5deg);transform:skewY(-5deg); position:absolute; top:-80px; left:0; overflow:hidden; background:#FFF;} footer .copy { font-size:14px; color:#C4C6C8;}
footer { position:relative; margin-top:120px; padding:1px 0; }
footer h3 { opacity:0.9;}
footer a { color:#96989A;} footer .col p.buttons { margin-top:0;} #headFooter { height:200px; padding:0; width:100%; -webkit-transform:skewY(-5deg); -moz-transform:skewY(-5deg); -o-transform:skewY(-5deg); -ms-transform:skewY(-5deg);transform:skewY(-5deg); position:absolute; top:-90px; left:0; overflow:hidden; background:#F6F8FA;} footer .center { position:relative; z-index:3; color:#96989A; font-size:80%; } #devices .columns { padding-left:50%; position:relative; z-index:3; margin:30px -5px;color:#96989A; font-size:13px;}
#devices .columns .picto { width:34px; height:34px; margin:0px 0 8px -2px;} #devices .columns .col { padding:0 5px; width:80px; height:90px;}
#devices .columns .col span { display:block;} a.language { float:left; line-height:22px; height:24px; position:relative; background:#FFF; padding:5px 30px 5px 5px; margin:-5px 0; -webkit-border-radius:30px; -moz-border-radius:30px; -o-border-radius:30px; -ms-border-radius:30px;border-radius:30px; font-weight:bold; color:#0098FF;}
a.language i { position:absolute; right:5px; top:50%; width:24px; height:24px; margin:-12px 0; color:#C4C6C8;}
a.language img { height:24px; float:left; margin:0 6px 0 0;} .champClassic::-webkit-input-placeholder { color: #C4C6C8; opacity: 1; font-weight:500; font-weight:400;
}
.champClassic:-moz-placeholder { color: #C4C6C8; opacity: 1; font-weight:500; font-weight:400;
}
.champClassic::-moz-placeholder { color: #C4C6C8; opacity: 1; font-weight:500; font-weight:400;
}
.champClassic:-ms-input-placeholder { color: #C4C6C8; opacity: 1; font-weight:500; font-weight:400;
}
.champClassic ::-ms-input-placeholder { color: #C4C6C8; opacity: 1; font-weight:500; font-weight:400;
} .champClassic.titleForums { font-size:110%; font-weight:400; margin:20px 0 10px 0;}
.champClassic { font-size:90%; color:#2A2C2E; resize: none; display:block; border: 1px solid #EBEDEF; box-shadow: 0 1px 3px 0 rgba(0,10,20,0.08); -webkit-transition: box-shadow 150ms ease,border-color 150ms ease; -moz-transition: box-shadow 150ms ease,border-color 150ms ease; -o-transition: box-shadow 150ms ease,border-color 150ms ease; -ms-transition: box-shadow 150ms ease,border-color 150ms ease;transition: box-shadow 150ms ease,border-color 150ms ease; -webkit-border-radius:3px; -moz-border-radius:3px; -o-border-radius:3px; -ms-border-radius:3px;border-radius:3px; background:#FFF; padding:0.49em 0.55em; width:100%; box-sizing:border-box; font-family:"Barlow Condensed", Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight:400;} .champClassic.readOnly , .champClassic.readOnly:focus { cursor:default; background-color:#F6F8FA; border-color:#EBEDEF; opacity:0.8; border-style:dashed; box-shadow:none;} .champClassic:focus { box-shadow: 0 1px 3px 0 rgba(0,10,20,0.3); border-color:#C4C6C8;
} .fightLog { position:relative; }
.fightLog strong.name { display:block; font-weight:600; font-size:130%; }
.fightLog strong.name strong { float:right; font-weight:600; font-size:65%; margin:2px 0 0 10px; color:#96989A;}
.fightLog div { padding:8px 0 12px 0; font-weight:400; font-size:80%; background: no-repeat 2px 0; margin:0; border-bottom:1px solid #EBEDEF; }
.fightLog div.me { color:#02D0AC; }
.fightLog div.other { color:#FF4C65; } .fightLog div.critical .damage { font-weight:600; display:inline-block; padding-right:16px; background:url(../images/pictos/thunder.svg) no-repeat right center; -webkit-background-size:contain; -moz-background-size:contain; -o-background-size:contain; -ms-background-size:contain;background-size:contain;}
.fightLog div.riposte { padding-left:40px; background-image:url(../images/pictos/riposte.svg);} .fightLog div.looseItem { line-height:30px; overflow:hidden; text-overflow:ellipsis; font-weight:600; white-space:nowrap; text-transform:uppercase; color:#EF9950; } .versus a { position:absolute; text-align:center; width:56px; height:56px; top:120px; left:50%; margin:0 -23px; cursor:pointer; z-index:5;}
.versus a i { font-size:54px;}
.versus a span { position:absolute; top:100%; left:50%; width:200px; margin:0 -100px; font-size:16px; text-transform:uppercase; font-weight:600; height:0;}
.versus { position:relative;}
.versus:before { content:""; position:absolute; top:0; padding:10px 0; left:50%; width:2px; background:#C4C6C8; height:100px; margin:-22px -1px; -webkit-transform:rotate(20deg); -moz-transform:rotate(20deg); -o-transform:rotate(20deg); -ms-transform:rotate(20deg);transform:rotate(20deg);}
.versus:after { content:""; position:absolute; top:50px; left:50%; width:80px; height:70px; margin:-46px -40px; background:url(../images/vs.png) no-repeat center center; -webkit-background-size:contain; -moz-background-size:contain; -o-background-size:contain; -ms-background-size:contain;background-size:contain;} .versus .col { width:50%; padding:0; position:relative; min-height:120px;}
.versus .col.left { text-align:right; padding-right:180px;}
.versus .col.right { text-align:left; padding-left:180px;} .versus .col.left .picture { right:60px;}
.versus .col.right .picture { left:60px;} .versus .col .picture { position:absolute; margin:-15px 0; height:100px; width:100px; background:#F6F8FA no-repeat center center; -webkit-background-size:cover; -moz-background-size:cover; -o-background-size:cover; -ms-background-size:cover;background-size:cover; -webkit-border-radius:100%; -moz-border-radius:100%; -o-border-radius:100%; -ms-border-radius:100%;border-radius:100%; box-shadow:0 0 4px rgba(0,10,20,0.2) inset;} .versus .col .picture strong { position:absolute; font-size:34px; font-weight:600; bottom:6px; width:100%; text-align:center; left:0; color:#FFF; text-shadow:2px 0 0 #000, -2px 0 0 #000, 0 2px 0 #000, 0 -2px 0 #000, 1px 1px #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000; } .versus h2 , .versus h3 { margin:0; white-space:nowrap; overflow:hidden; padding:3px 0; line-height:110%; text-overflow:ellipsis;}
.versus h2 { font-size:130%;}
.versus h3 { font-weight:400; margin-top:-6px; font-size:90%;} .versus hr { display:inline-block; width:40px; height:3px; -webkit-border-radius:3px; -moz-border-radius:3px; -o-border-radius:3px; -ms-border-radius:3px;border-radius:3px; background:#EBEDEF; border:none; margin:15px 0 10px 0;} .versus p { padding:0 0 0 35px; margin:3px 0; overflow:hidden; white-space:nowrap; font-size:75%; font-weight:300; line-height:110%;line-height:26px; height:28px; position:relative; text-overflow:ellipsis; }
.versus .left p { padding:0 35px 0 0;}
.versus p span { width:28px; height:28px; -webkit-border-radius:100%; -moz-border-radius:100%; -o-border-radius:100%; -ms-border-radius:100%;border-radius:100%; left:0; background:#FFF no-repeat center center; position:absolute; box-shadow:0 0 3px rgba(0,10,20,0.2) inset; -webkit-background-size:30px; -moz-background-size:30px; -o-background-size:30px; -ms-background-size:30px;background-size:30px;}
.versus p.weapon span { -webkit-background-size:24px; -moz-background-size:24px; -o-background-size:24px; -ms-background-size:24px;background-size:24px; }
.versus .left p span { left:auto; right:0;}
.versus .error { padding-left:0; line-height:120%;} .fightResume { text-align:center; margin:30px 0;}
.fightResume h1 { margin:30px 0; line-height:100%;}
.fightResume h2 { font-weight:400; line-height:100%; margin:15px 0; font-size:110%;} @media screen and (max-width: 900px) { .versus .col .picture { margin:-10px 0; height:80px; width:80px;} .versus .col.left { padding-right:150px;} .versus .col.right { padding-left:150px;} .versus .col.left .picture { right:50px;} .versus .col.right .picture { left:50px;} .versus .col .picture strong { font-size:28px; bottom:5px; } } @media screen and (max-width: 680px) { .versus .col { padding-top:30px; z-index:2;} .versus .col .picture { margin:-60px 0; height:60px; width:60px;} .versus .col.left { padding-right:40px;} .versus .col.right { padding-left:40px;} .versus .col.left .picture { right:35px;} .versus .col.right .picture { left:35px;} .versus .col .picture strong { font-size:22px; bottom:3px; } .versus:before { display:none;} .versus:after { top:0; width:60px; height:50px; margin:-25px -30px;} .versus a { width:44px; height:44px; top:120px; left:50%; margin:0 -22px; cursor:pointer; z-index:5;} .versus a i { font-size:40px;} .versus a span { font-size:10px; } }.absoluteRight { float:right; margin:0 0 10px 20px;} .forumEntry.clan {margin-bottom:20px;}
.forumEntry , .forumPost { border:1px solid #EBEDEF; padding:15px 18px; position:relative; margin:-1px 0 0 0; -webkit-transition:background 0.3s; -moz-transition:background 0.3s; -o-transition:background 0.3s; -ms-transition:background 0.3s;transition:background 0.3s;}
.forumEntry:hover { background-color:#F6F8FA;} .forumEntry p.title { margin:0; padding-right:48%; padding-left:50px; position:relative;}
.forumEntry p.title img { position:absolute; margin:5px 0 0 -50px; height:32px; border:none;}
.forumEntry p.title strong { display:block; line-height:110%; margin-bottom:3px; }
.forumEntry p.title .description { display:block; font-size:80%;} .forumEntry p.resume , .forumEntry p.last { margin:0; left:54%; width:13%; color:#96989A; overflow:hidden; position:absolute; top:15px; line-height:130%;font-size:14px; border-left:1px solid #EBEDEF; padding:3px 0 3px 15px;} .forumEntry p.last { right:0; width:26%; left:auto; }
.forumEntry p.last span , .forumEntry p.resume span { display:block; font-weight:300; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-right:10px; }
.forumEntry p.last span strong { font-size:110%;} .forumEntry p.last.reply span { padding-left:28px;}
.forumEntry p.last.reply .material-icons { position:absolute; color:#C4C6C8; -webkit-transition:color 0.2s; -moz-transition:color 0.2s; -o-transition:color 0.2s; -ms-transition:color 0.2s;transition:color 0.2s; -webkit-transform:scaleX(-1); -moz-transform:scaleX(-1); -o-transform:scaleX(-1); -ms-transform:scaleX(-1);transform:scaleX(-1); height:24px; width:24px; line-height:24px; text-align:center; font-size:21px; margin:-2px 0 0 0;}
.forumEntry p.last.reply .material-icons:hover { color:#96989A; text-decoration:none;} .forumEntry p.last .material-icons.reply { float:left; color:#C4C6C8; -webkit-transition:color 0.2s; -moz-transition:color 0.2s; -o-transition:color 0.2s; -ms-transition:color 0.2s;transition:color 0.2s; -webkit-transform:scaleX(-1); -moz-transform:scaleX(-1); -o-transform:scaleX(-1); -ms-transform:scaleX(-1);transform:scaleX(-1); height:24px; width:24px; line-height:24px; text-align:center; font-size:21px; margin:-2px 0 0 -3px;}
.forumEntry p.last .material-icons.reply:hover { color:#96989A; text-decoration:none;} .forumPost p.title { font-weight:600; margin-bottom:0; font-size:90%;}
.forumPost p.date { color:#96989A; margin-top:0; font-size:80%; font-weight:300;}
.forumPost hr { margin:20px 0; border-color:rgba(0,10,20,0.06); border-width:1px 0 0 0;} .forumPost { padding:15px 220px 15px 30px; overflow:hidden;}
.forumPost.dark { background-color:#FAFBFC;}
.forumPost , .forumEntries { box-shadow:0 0 10px 0 rgba(0,10,20,0.04); margin:15px 0;}
.message { min-height:50px; margin:15px 0; color:rgba(0,10,20,0.7);}
.message p , .message ul , .message ol { font-weight:300; font-size:90%; max-width:740px; margin-top:15px; margin-bottom:15px; line-height:170%; }
.message strong { font-weight:500 !important; color:#2A2C2E; } .forumPost blockquote { border-left:5px solid #EBEDEF !important; margin-left:0; padding:1px 0 1px 30px !important; font-style:italic;} .forumPost .editor { margin:5px -5px 15px -5px;} .forumPost .errorForm { } #infoMessageForum { max-width:1800px;} .dark .userBox { background-color:#FAFBFC;}
.userBox { position:absolute; background:#FFF; text-align:center; border-left:1px solid rgba(0,10,20,0.06); width:190px; padding:20px; height:100%; right:0; top:0; box-sizing:border-box;}
.userBox a { color:#2A2C2E;}
.userBox .picture { display:block; margin:8px auto; width:80px; height:80px; -webkit-border-radius:100%; -moz-border-radius:100%; -o-border-radius:100%; -ms-border-radius:100%;border-radius:100%; background:rgba(0,10,20,0.05) no-repeat center center; box-shadow:0 0 5px rgba(0,0,0,0.10) inset; -webkit-background-size:cover; -moz-background-size:cover; -o-background-size:cover; -ms-background-size:cover;background-size:cover;} .userBox p { line-height:100%; font-size:90%;}
.userBox p span { font-size:14px; font-weight:400;} .ck-toolbar { background:#FFF !important; border:none !important;}
.ck-content { border:1px solid #EBEDEF !important; margin-top:15px; box-shadow: 0 1px 3px 0 rgba(0,10,20,0.08); min-height:150px; cursor:text;}
.ck-content:focus { box-shadow: 0 1px 3px 0 rgba(0,10,20,0.3) !important; border-color:#C4C6C8 !important;}
.ck-content strong { font-weight:600;}
.loader { animation: animate-loading 1.5s linear infinite; clip: rect(0, 60px, 60px, 30px); height: 60px; width: 60px; position: absolute; z-index:50; left: calc(50% - 30px); top: calc(50% - 30px);
} .loader:after { animation: animate-loading-light 1.5s ease-in-out infinite; clip: rect(0, 60px, 60px, 30px); content:''; -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; -ms-border-radius: 50%;border-radius: 50%; height: 100%; width: 100%; position: absolute; } .loader.dark:after { animation: animate-loading-bat 1.5s ease-in-out infinite;
} .subLoader { position:relative; height:10px; margin:30px 0 15px 0 !important;}
.loaderPoint { position:absolute; }
.loaderPoint span { float:left; -webkit-transform: scale(0.8); -moz-transform: scale(0.8); -o-transform: scale(0.8); -ms-transform: scale(0.8);transform: scale(0.8); opacity:0.2; margin:2px; width:8px; height:8px; background:#2A2C2E; -webkit-border-radius:100% !important; -moz-border-radius:100% !important; -o-border-radius:100% !important; -ms-border-radius:100% !important;border-radius:100% !important; z-index:20; animation: animate-loading-point .9s linear infinite;} .loaderPoint span:nth-child(2) { animation-delay:0.3s; }
.loaderPoint span:nth-child(3) { animation-delay:0.6s; } .submitForm .loaderPoint { z-index:3; right:10px; top:50%; margin:-5px 0 !important; opacity:0.8 !important;}
.submitForm .loaderPoint span { position:static; } #popup .loaderPoint { margin:-15px; opacity:0.6; } .buttons .loaderPoint { display:none;}
.buttons .loaderPoint span { background:#FFF;}
.loading .buttons .loaderPoint { display:block;} @keyframes animate-loading-point { 0% , 100% { -webkit-transform: scale(0.2); -moz-transform: scale(0.2); -o-transform: scale(0.2); -ms-transform: scale(0.2);transform: scale(0.2); opacity:0.2; } 50% { transform: scale(1); opacity:1; }
} @keyframes animate-loading { 0% { transform: rotate(0deg) } 100% { transform: rotate(220deg) }
} @keyframes animate-loading-light { 0% { box-shadow: inset #fff 0 0 0 8px; -webkit-transform: rotate(-140deg); -moz-transform: rotate(-140deg); -o-transform: rotate(-140deg); -ms-transform: rotate(-140deg);transform: rotate(-140deg); } 50% { box-shadow: inset #fff 0 0 0 2px; } 100% { box-shadow: inset #fff 0 0 0 8px; -webkit-transform: rotate(140deg); -moz-transform: rotate(140deg); -o-transform: rotate(140deg); -ms-transform: rotate(140deg);transform: rotate(140deg); }
} @keyframes animate-loading-bat { 0% { box-shadow: inset rgba(0,5,10,0.15) 0 0 0 6px; -webkit-transform: rotate(-140deg); -moz-transform: rotate(-140deg); -o-transform: rotate(-140deg); -ms-transform: rotate(-140deg);transform: rotate(-140deg); } 50% { box-shadow: inset rgba(0,5,10,0.15) 0 0 0 2px; } 100% { box-shadow: inset rgba(0,5,10,0.15) 0 0 0 6px; -webkit-transform: rotate(140deg); -moz-transform: rotate(140deg); -o-transform: rotate(140deg); -ms-transform: rotate(140deg);transform: rotate(140deg); }
}@media screen and (min-width: 1040px) {
.buttons a:hover:before , p.buttons a:hover:after { left:-10%; top:-60%; width:120%; height:220%; opacity:0.35; }
.buttons a.grey:hover:before { opacity:0.08; }
.buttons a:after , p.buttons a:hover:after { background:#FFF; opacity:1; z-index:1; }
} @media screen and (max-width: 900px) { header #menu { display:none; } #userBlock { margin-top:-10px; } #logo { height:130px; width:200px; } body { font-size:18px;} .center { padding:0 30px;} #intro h1 { width:70%;} #intro p { width:70%;} #headBackground { height:700px; } #intro { margin-top:-30px;} #devices .center h1, #devices .center h3, #devices .center p { margin-left:45%; } #devices .columns { padding-left:45%; } #devices img.devices { position:absolute; right:55%; width:50%; z-index:2; margin-top:-100px; margin-right:0px; min-width:320px;} #devices .columns .col { padding:0 5px; width:auto; height:90px;} .forumEntry p.last { display:none; } .forumEntry p.resume{ right:0; left:auto; width:25%; } .forumEntry p.title { padding-right:32%; } #intros .columns { margin-left:0; margin-right:0;} .message { min-height:50px;}
} @media screen and (max-width: 680px) { .userBox { right:auto; left:20px; top:9px; border:none; background:none !important; width:auto; margin:0; padding:0; width:32px; height:32px; } .userBox p { display:none;} .userBox .picture { width:32px; height:32px; } .forumPost { padding:10px 20px; margin:0 -15px -1px -15px; border-width:1px 0; box-shadow:none;} .forumPost p.title , .forumPost p.date { padding-left:40px;} .forumEntry { border-width:1px 0;} .forumEntry p.resume{ display:none; } .forumEntry p.title { padding-right:0; } .forumEntries { margin:10px -15px; } .message { min-height:10px;} .absoluteRight { display:none; } #userBlock { margin-top:-15px; } #userBlock a.name { font-size:0; margin:0 5px 0 0; padding:0 0 0 42px; border:none; } #userBlock a.name strong { display:none;} .center { padding:0 15px; margin:40px auto;} #logo { height:110px; float:left; width:160px; position:absolute; margin:-40px -5px;} #characters { z-index:2; width:800px; height:480px; opacity:0.4; left:30%; margin-left:20px; } #intro h1 { width:auto;max-width:800px;} #intro p { width:auto; max-width:800px;} #headBackground { height:680px; } #intro { min-height:350px; margin-top:-60px; text-align:center;} #intros .col { border-top:1px solid rgba(0,0,0,0.08); border-bottom:1px solid #FFF; padding:25px 0;} #intros .col.first { border-top:none;} #intros .col.last { border-bottom:none; padding-bottom:0;} .col-33 { width:100%;} #devices { text-align:center;} #devices .center h1, #devices .center h3, #devices .center p { margin:20px auto; } #devices .center h1, #devices .center h3 { margin-top:80px;} #devices .col { width:20%;} #devices .columns { display:none; } #headDevices { height:380px; } #devices img.devices { position:absolute; right:50%; width:50%; margin:-130px -160px; width:320px;} .dbleBlock { padding:0; margin:15px 0;} .dbleBlock .col , .dbleBlock .col.al-r { width:100%; text-align:center; padding:0; float:none;} .dbleBlock .separe { width:auto; top:auto; height:2px; left:auto; margin:30px 0; background:#EBEDEF; position:relative;} #content { background:#FFF; margin:40px 0;} #content:before, #content:after { position:absolute; content:""; height:90px; margin:-50px 0; width:100%; left:0; background:#FFF; -webkit-transform:skewY(-5deg); -moz-transform:skewY(-5deg); -o-transform:skewY(-5deg); -ms-transform:skewY(-5deg);transform:skewY(-5deg);} }