* {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

*, *::before, *::after {
  box-sizing: border-box;
}

a {
text-decoration:none;
}

a:link {
    color: #1976D2;
   }

a:visited {
    color: #1976D2;
   }

:root {
 /* width */
 --slide-width: 100%;
 /* aspect ratio (width/height) */
 --slide-aspect: 10;
 /* animation time */
 --slide-time: 14s;
}

@font-face {
    font-family: 'Nunito-Bold';
    src: url('/style/fonts/nunito/eot/Nunito-Bold.eot'); /* IE9 Compat Modes */
    src: url('/style/fonts/nunito/eot/Nunito-Bold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('/style/fonts/nunito/woff/Nunito-Bold.woff') format('woff'), /* Modern Browsers */
         url('/style/fonts/nunito/ttf/Nunito-Bold.ttf')  format('truetype'), /* Safari, Android, iOS */
}

@font-face {
    font-family: 'Nunito-BoldItalic';
    src: url('/style/fonts/nunito/eot/Nunito-BoldItalic.eot'); /* IE9 Compat Modes */
    src: url('/style/fonts/nunito/eot/Nunito-BoldItalic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('/style/fonts/nunito/woff/Nunito-BoldItalic.woff') format('woff'), /* Modern Browsers */
         url('/style/fonts/nunito/ttf/Nunito-BoldItalic.ttf')  format('truetype'), /* Safari, Android, iOS */
}

@font-face {
    font-family: 'Nunito-ExtraLight';
    src: url('/style/fonts/nunito/eot/Nunito-ExtraLight.eot'); /* IE9 Compat Modes */
    src: url('/style/fonts/nunito/eot/Nunito-ExtraLight.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('/style/fonts/nunito/woff/Nunito-ExtraLight.woff') format('woff'), /* Modern Browsers */
         url('/style/fonts/nunito/ttf/Nunito-ExtraLight.ttf')  format('truetype'), /* Safari, Android, iOS */
}

@font-face {
    font-family: 'Nunito-ExtraLightItalic';
    src: url('/style/fonts/nunito/eot/Nunito-ExtraLightItalic.'); /* IE9 Compat Modes */
    src: url('/style/fonts/nunito/eot/Nunito-ExtraLightItalic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('/style/fonts/nunito/woff/Nunito-ExtraLightItalic.woff') format('woff'), /* Modern Browsers */
         url('/style/fonts/nunito/ttf/Nunito-ExtraLightItalic.ttf')  format('truetype'), /* Safari, Android, iOS */
}

@font-face {
    font-family: 'Nunito-Italic';
    src: url('/style/fonts/nunito/eot/Nunito-Italic.eot'); /* IE9 Compat Modes */
    src: url('/style/fonts/nunito/eot/Nunito-Italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('/style/fonts/nunito/woff/Nunito-Italic.woff') format(''), /* Modern Browsers */
         url('/style/fonts/nunito/ttf/Nunito-Italic.ttf')  format('truetype'), /* Safari, Android, iOS */
}

@font-face {
    font-family: 'Nunito-Light';
    src: url('/style/fonts/nunito/eot/Nunito-Light.eot'); /* IE9 Compat Modes */
    src: url('/style/fonts/nunito/eot/Nunito-Light.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('/style/fonts/nunito/woff/Nunito-Light.woff') format('woff'), /* Modern Browsers */
         url('/style/fonts/nunito/ttf/Nunito-Light.ttf')  format('truetype'), /* Safari, Android, iOS */
}

@font-face {
    font-family: 'Nunito-LightItalic';
    src: url('/style/fonts/nunito/eot/Nunito-LightItalic.eot'); /* IE9 Compat Modes */
    src: url('/style/fonts/nunito/eot/Nunito-LightItalic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('/style/fonts/nunito/woff/Nunito-LightItalic.woff') format('woff'), /* Modern Browsers */
         url('/style/fonts/nunito/ttf/Nunito-LightItalic.ttf')  format('truetype'), /* Safari, Android, iOS */
}

@font-face {
    font-family: 'Nunito-Medium';
    src: url('/style/fonts/nunito/eot/Nunito-Medium.eot'); /* IE9 Compat Modes */
    src: url('/style/fonts/nunito/eot/Nunito-Medium.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('/style/fonts/nunito/woff/Nunito-Medium.woff') format('woff'), /* Modern Browsers */
         url('/style/fonts/nunito/ttf/Nunito-Medium.ttf')  format('truetype'), /* Safari, Android, iOS */
}

@font-face {
    font-family: 'Nunito-MediumItalic';
    src: url('/style/fonts/nunito/eot/Nunito-MediumItalic.eot'); /* IE9 Compat Modes */
    src: url('/style/fonts/nunito/eot/Nunito-MediumItalic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('/style/fonts/nunito/woff/Nunito-MediumItalic.woff') format('woff'), /* Modern Browsers */
         url('/style/fonts/nunito/ttf/Nunito-MediumItalic.ttf')  format('truetype'), /* Safari, Android, iOS */
}

@font-face {
    font-family: 'Nunito-Regular';
    src: url('/style/fonts/nunito/eot/Nunito-Regular.eot'); /* IE9 Compat Modes */
    src: url('/style/fonts/nunito/eot/Nunito-Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('/style/fonts/nunito/woff/Nunito-Regular.woff') format('woff'), /* Modern Browsers */
         url('/style/fonts/nunito/ttf/Nunito-Regular.ttf')  format('truetype'), /* Safari, Android, iOS */
}

@font-face {
    font-family: 'Nunito-SemiBold';
    src: url('/style/fonts/nunito/eot/Nunito-SemiBold.eot'); /* IE9 Compat Modes */
    src: url('/style/fonts/nunito/eot/Nunito-SemiBold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('/style/fonts/nunito/woff/Nunito-SemiBold.woff') format('woff'), /* Modern Browsers */
         url('/style/fonts/nunito/ttf/Nunito-SemiBold.ttf')  format('truetype'), /* Safari, Android, iOS */
}

@font-face {
    font-family: 'Nunito-SemiBoldItalic';
    src: url('/style/fonts/nunito/eot/Nunito-SemiBoldItalic.eot'); /* IE9 Compat Modes */
    src: url('/style/fonts/nunito/eot/Nunito-SemiBoldItalic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('/style/fonts/nunito/woff/Nunito-SemiBoldItalic.woff') format('woff'), /* Modern Browsers */
         url('/style/fonts/nunito/ttf/Nunito-SemiBoldItalic.ttf')  format('truetype'), /* Safari, Android, iOS */
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { 
    display: block;
}

img {
   max-width: 100%;
   height: auto;
   width: auto\9; /* ie8 */
}



body {
    font-family: 'Nunito-Regular';
    background-color: #E5E7EB;
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
}




/*  MAX =================================================================================================================================================================  */

@media (min-width: 850px){


header {
    display: block;
    
}

.header {
    background-color: #1976D2;
    min-height: 64px;
    
    padding: 5px 10px 5px 20px;
    margin: 0 auto;
}

.header_logo {
    height: 50px;
    width: 50px;
    background-image: url(/img/logo/logo_white.png);
    background-size: cover;
    float: left;
}


.header_signbutton {
    height:40px;
    padding: 0px 37px 0px 10px;
    cursor: pointer;
    min-width: 64px;
    color: #1976D2;
    background-color: #ffffff;
    box-shadow: none;
    outline: 0px;
    text-decoration: none;
    font-weight: bold;
    border-width: 0px;
    transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1), border-color 250ms cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 12px;
    margin: 7px 20px 7px 20px;
    float: right;
    text-align: center;
    vertical-align: middle;
    line-height: 40px;    
    background-image: url(/img/pic/pic-pac.svg);
    background-repeat: no-repeat;
    background-position-x: 95%;
    background-position-y: center;
}

.header_signbutton:hover {
    background-color: #DDEAF8;    
    transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1), border-color 250ms cubic-bezier(0.4, 0, 0.2, 1);    
}

.header_regbutton {
    height:40px;
    padding: 0px 40px 0px 30px;
    cursor: pointer;
    color: #ffffff;
    box-shadow: none;
    outline: 0px;
    text-decoration: none;
    font-weight: bold;
    border-width: 0px;
    transition: all 0.2s ease-out; 
    margin: 7px 30px 7px 30px;
    float: right;
    text-align: center;
    vertical-align: middle;
    line-height: 40px;  
    background-image: url(/img/pic/pic-key.svg);
    background-repeat: no-repeat;
    background-position-x: 95%;
    background-position-y: center;    

}

.header_regbutton:hover {
    color: #DDEAF8;
    transition: all 0.2s ease-out;    
}

.header_name{
    height:40px;
    padding: 0px 40px 0px 30px;
    cursor: pointer;
    color: #ffffff;
    box-shadow: none;
    outline: 0px;
    text-decoration: none;
    font-weight: bold;
    border-width: 0px;
    transition: all 0.2s ease-out;
    margin: 7px 30px 7px 30px;
    float: right;
    text-align: center;
    vertical-align: middle;
    line-height: 40px;
    background-image: url(/img/pic/pic-user.svg);
    background-repeat: no-repeat;
    background-position-x: 95%;
    background-position-y: center;

}

.header_name:hover {
    color: #DDEAF8;
    transition: all 0.2s ease-out;
}

.header_exitbutton {
    height:40px;
    padding: 0px 40px 0px 30px;
    cursor: pointer;
    color: #ffffff;
    box-shadow: none;
    outline: 0px;
    text-decoration: none;
    font-weight: bold;
    border-width: 0px;
    transition: all 0.2s ease-out;
    margin: 7px 30px 7px 30px;
    float: right;
    text-align: center;
    vertical-align: middle;
    line-height: 40px;
    background-image: url(/img/pic/pic-exit.svg);
    background-repeat: no-repeat;
    background-position-x: 95%;
    background-position-y: center;

}

.header_exitbutton:hover {
    color: #DDEAF8;
    transition: all 0.2s ease-out;
}

.header_slogan {
    height:40px;
    padding: 0px 30px 0px 30px;
    color: #ffffff;
    box-shadow: none;
    cursor: default;
    outline: 0px;
    text-decoration: none;
    margin: 7px 30px 7px 30px;
    float: left;
    text-align: center;
    vertical-align: middle;
    line-height: 40px;  
    font-size:26px;
    font-family: 'Nunito-ExtraLightItalic';    

}


.left-panel
 {
    float:left;
    position: relative;
    background-color: #FFFFFF;
    display: table;
    min-height: 80vh;
    border-radius: 0px 0px 12px 0px;
    overflow: hidden;
    width: 255px;

}

.panel-hr
{
    background-color:#F2F4F7;
    border: none;
    height: 1px;
    margin-left:15px;
    margin-right:15px;
}






.left-panel-spec
 {
    background-color: #1976D2;
    display: flex;
    width: 100%-16px;
    margin: 16px 8px 16px 8px;
    padding: 10px 8px 10px 40px;
    color:#FFFFFF;
    font-weight:bold;
    cursor: pointer;
    border-radius: 12px;
    overflow: hidden;
    max-width: 255px;
    background-image: url(/img/pic/pic-steam.svg);
    background-repeat: no-repeat;
    background-position-x: 5%;
    background-position-y: center;
    background-size: 20px 20px;
    transition: all 0.2s ease-out;

}

.left-panel-spec:hover
 {
     background-color: #3C89D1;
     transition: all 0.2s ease-out;
 }
 
 
 



.itm-cons{
    background-color: #FFFFFF;
    display: flex;
    width: 100%-16px;
    margin: 5px 8px 5px 8px;
    padding: 10px 8px 10px 45px;
    color:#6C737F;
    cursor: pointer;
    border-radius: 12px;
    overflow: hidden;
    max-width: 255px;
    
    background-image: url(/img/pic/pic-console-blue.svg);    
    background-repeat: no-repeat;
    background-position-x: 5%;
    background-position-y: center;
    background-size: 20px 20px;
    transition: all 0.2s ease-out;

}

.itm-cons:hover
 {
     background-color: #F6FAFD;
     color:#000000;
     transition: all 0.2s ease-out;
 }

.itm-cons-sel{
    background-color: #1976D2;
    display: flex;
    width: 100%-16px;
    margin: 5px 8px 5px 8px;
    padding: 10px 8px 10px 45px;
    color:#FFFFFF;
    cursor: pointer;
    border-radius: 12px;
    overflow: hidden;
    max-width: 255px;

    background-image: url(/img/pic/pic-console.svg);    
    background-repeat: no-repeat;
    background-position-x: 5%;
    background-position-y: center;
    background-size: 20px 20px;
    transition: all 0.2s ease-out;

}

.itm-cons-sel:hover
 {
     background-color: #3C89D1;
     transition: all 0.2s ease-out;
 }
 

 
 
 
 
 
 .itm-pc{
    background-color: #FFFFFF;
    display: flex;
    width: 100%-16px;
    margin: 5px 8px 5px 8px;
    padding: 10px 8px 10px 45px;
    color:#6C737F;
    cursor: pointer;
    border-radius: 12px;
    overflow: hidden;
    max-width: 255px;
    
    background-image: url(/img/pic/pic-pc-blue.svg);    
    background-repeat: no-repeat;
    background-position-x: 5%;
    background-position-y: center;
    background-size: 20px 20px;
    transition: all 0.2s ease-out;

}

.itm-pc:hover
 {
     background-color: #F6FAFD;
     color:#000000;
     transition: all 0.2s ease-out;
 }

.itm-pc-sel{
    background-color: #1976D2;
    display: flex;
    width: 100%-16px;
    margin: 5px 8px 5px 8px;
    padding: 10px 8px 10px 45px;
    color:#FFFFFF;
    cursor: pointer;
    border-radius: 12px;
    overflow: hidden;
    max-width: 255px;

    background-image: url(/img/pic/pic-pc.svg);    
    background-repeat: no-repeat;
    background-position-x: 5%;
    background-position-y: center;
    background-size: 20px 20px;
    transition: all 0.2s ease-out;

}

.itm-pc-sel:hover
 {
     background-color: #3C89D1;
     transition: all 0.2s ease-out;
 }






.itm-dlc{
    background-color: #FFFFFF;
    display: flex;
    width: 100%-16px;
    margin: 5px 8px 5px 8px;
    padding: 10px 8px 10px 45px;
    color:#6C737F;
    cursor: pointer;
    border-radius: 12px;
    overflow: hidden;
    max-width: 255px;
    
    background-image: url(/img/pic/pic-dlc-blue.svg);    
    background-repeat: no-repeat;
    background-position-x: 5%;
    background-position-y: center;
    background-size: 20px 20px;
    transition: all 0.2s ease-out;

}

.itm-dlc:hover
 {
     background-color: #F6FAFD;
     color:#000000;
     transition: all 0.2s ease-out;
 }

.itm-dlc-sel{
    background-color: #1976D2;
    display: flex;
    width: 100%-16px;
    margin: 5px 8px 5px 8px;
    padding: 10px 8px 10px 45px;
    color:#FFFFFF;
    cursor: pointer;
    border-radius: 12px;
    overflow: hidden;
    max-width: 255px;

    background-image: url(/img/pic/pic-dlc.svg);    
    background-repeat: no-repeat;
    background-position-x: 5%;
    background-position-y: center;
    background-size: 20px 20px;
    transition: all 0.2s ease-out;

}

.itm-dlc-sel:hover
 {
     background-color: #3C89D1;
     transition: all 0.2s ease-out;
 }
 
 
 
 
 
 
 .itm-ingame{
    background-color: #FFFFFF;
    display: flex;
    width: 100%-16px;
    margin: 5px 8px 5px 8px;
    padding: 10px 8px 10px 45px;
    color:#6C737F;
    cursor: pointer;
    border-radius: 12px;
    overflow: hidden;
    max-width: 255px;
    
    background-image: url(/img/pic/pic-money-blue.svg);    
    background-repeat: no-repeat;
    background-position-x: 5%;
    background-position-y: center;
    background-size: 20px 20px;
    transition: all 0.2s ease-out;

}

.itm-ingame:hover
 {
     background-color: #F6FAFD;
     color:#000000;
     transition: all 0.2s ease-out;
 }

.itm-ingame-sel{
    background-color: #1976D2;
    display: flex;
    width: 100%-16px;
    margin: 5px 8px 5px 8px;
    padding: 10px 8px 10px 45px;
    color:#FFFFFF;
    cursor: pointer;
    border-radius: 12px;
    overflow: hidden;
    max-width: 255px;

    background-image: url(/img/pic/pic-money.svg);    
    background-repeat: no-repeat;
    background-position-x: 5%;
    background-position-y: center;
    background-size: 20px 20px;
    transition: all 0.2s ease-out;

}

.itm-ingame-sel:hover
 {
     background-color: #3C89D1;
     transition: all 0.2s ease-out;
 }
 
 
 
 
.left-bott
 {
    font-size:14px;
    margin: 5px;
    position: absolute;
    bottom: 0;
 }
 
 
.main-container
 {
    padding:0px;
    margin-top:10px;
    margin-right:10px;
    margin-left: 265px;
    min-height: 700px;

 }
 
 .main-content
 {
    padding:10px;
    margin:0 auto;
    max-width:1200px;
    min-height: 600px; 
    
    background-color:#FFFFFF;

 }
 



.tcSlider {
 width: var(--slide-width);
 aspect-ratio: var(--slide-aspect) / 1;
 background-color: #222;
 overflow: hidden;
 border-radius: 12px;
}
.slider {
 animation-name: tc_slider;
 animation-duration: var(--slide-time);
 animation-iteration-count: infinite;
}
.slide {
 position: relative;
}
.slider_img {
 width: var(--slide-width);
 aspect-ratio: var(--slide-aspect) / 1;
 background-position: center center;
 background-size: cover;
}
.slider_link {
 color: #fff;
 background-color: rgba(0, 0, 0, 0.5);
 border-radius: 20px;
 text-decoration: none;
 padding: 5px 15px;
 position: absolute;
 bottom: 20px;
 left: 20px;
}
@keyframes tc_slider {
 0% {
 margin-top: 0;
 }
 31% {
 margin-top: 0;
 }
 36% {
 margin-top: calc(var(--slide-width) / var(--slide-aspect) * -1);
 }
 64% {
 margin-top: calc(var(--slide-width) / var(--slide-aspect) * -1);
 }
 69% {
 margin-top: calc(var(--slide-width) / var(--slide-aspect) * -2);
 }
 97% {
 margin-top: calc(var(--slide-width) / var(--slide-aspect) * -2);
 }
}




.left-bott
{
    background-color: #FFFFFF;
    display: flex;
    width: 100%-16px;
    margin: 5px 8px 5px 8px;
    padding: 10px 8px 10px 45px;
    color:#6C737F;
    overflow: hidden;
    max-width: 255px;

    
}


.left-fromto
{
    width:110px;
    height:110px;
    margin: 0 auto;
    background-image: url(/img/joy-left.png); 
    background-size: cover;
    
    
}


.left-itm-text
{
    display: flex;
    width: 100%-16px;
    margin: 4px 8px 4px 8px;
    padding: 4px 8px 4px 8px;
    color:#6C737F;
    cursor: pointer;
    border-radius: 12px;
    overflow: hidden;
    max-width: 255px;

}


.h1-main
{
    font-size:26px; 
    display:block;
    margin:30px 10px 10px 10px;
    padding:0px;
    color:#111111;
}

.p-h-text
{
    font-size:19px; 
    font-weight:bold;
    display:block;
    margin:10px 10px 2px 10px;
    padding:0px;
    color:#2D2D2D;
}

.p-text
{
    font-size:16px; 
    display:block;
    margin:2px 10px 10px 10px;
    padding:0px; 
    color:#2D2D2D;
}


.foot
{
    position : fixed;
    bottom : 0;

    width:100%;
    height:30px;
    background-color:#1976D2;
    margin:40px 0px 0px 0px;
}



.tabs-docs {
	display: flex;
	flex-wrap: wrap;
} 

.tabs-docs label {
    background-color: #FFFFFF;
    margin: 5px 5px 5px 5px;
    padding: 5px  10px 5px 10px;
    color:#6C737F;
    cursor: pointer;
    border-radius: 12px;
    overflow: hidden;

	order: 1; 
	display: block;
    font-weight: bold;
    transition: background ease 0.2s;
}
.tabs-docs label:hover {
     background-color: #F6FAFD;
     color:#000000;
     transition: all 0.2s ease-out;
    
}

.tabs-docs .tab-docs {
  order: 99; 
    flex-grow: 1;
	width: 100%;
	display: none;
    padding: 1rem;
    background: #fff;
}
.tabs-docs input[type="radio"] {
	display: none;
}
.tabs-docs input[type="radio"]:checked + label {
	background: #1976D2;
	color:#FFFFFF;
}
.tabs-docs input[type="radio"]:checked + label + .tab-docs {
	display: block;
}

.cont-block-wrappper
{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    
}

.cont-block-tp
{
    background: #FFFFFF;
    width:400px;
    min-height:300px;
    padding: 10px 10px 10px 10px;
    margin: 10px 40px 10px 40px;
    display: inline-block;

    color:#FFFFFF;
    border-radius: 12px;
    border:1px solid #1976D2;
    overflow: hidden;
    
    background-image: url(/img/fon-tp.png);    
    background-repeat: no-repeat;
    background-position-x: center;
    background-position-y: 150px;
    

}

.cont-block-sotr
{
    background: #FFFFFF;
    width:400px;
    min-height:300px;
    padding: 10px 10px 10px 10px;
    margin: 10px 40px 10px 40px;
    display: inline-block;

    color:#FFFFFF;
    border-radius: 12px;
    border:1px solid #1976D2;
    overflow: hidden;
    
    background-image: url(/img/fon-sotr.png);    
    background-repeat: no-repeat;
    background-position-x: center;
    background-position-y: 150px;    

}


}

/*  MIN ===============================================================================================================================================================  */

@media (max-width: 849px) and (min-width: 660px){
 
 
 
header {
    display: block;
    
}

.header {
    background-color: #1976D2;
    min-height: 64px;
    
    padding: 5px 10px 5px 20px;
    margin: 0 auto;
}

.header_logo {
    height: 50px;
    width: 50px;
    background-image: url(/img/logo/logo_white.png);
    background-size: cover;
    float: left;
}


.header_signbutton {
    height:40px;
    padding: 0px 37px 0px 10px;
    cursor: pointer;
    min-width: 64px;
    color: #1976D2;
    background-color: #ffffff;
    box-shadow: none;
    outline: 0px;
    text-decoration: none;
    font-weight: bold;
    border-width: 0px;
    transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1), border-color 250ms cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 12px;
    margin: 7px 20px 7px 20px;
    float: right;
    text-align: center;
    vertical-align: middle;
    line-height: 40px;    
    background-image: url(/img/pic/pic-pac.svg);
    background-repeat: no-repeat;
    background-position-x: 95%;
    background-position-y: center;
}

.header_signbutton:hover {
    background-color: #DDEAF8;    
    transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1), border-color 250ms cubic-bezier(0.4, 0, 0.2, 1);    
}

.header_regbutton {
    height:40px;
    padding: 0px 40px 0px 30px;
    cursor: pointer;
    color: #ffffff;
    box-shadow: none;
    outline: 0px;
    text-decoration: none;
    font-weight: bold;
    border-width: 0px;
    transition: all 0.2s ease-out; 
    margin: 7px 30px 7px 30px;
    float: right;
    text-align: center;
    vertical-align: middle;
    line-height: 40px;  
    background-image: url(/img/pic/pic-key.svg);
    background-repeat: no-repeat;
    background-position-x: 95%;
    background-position-y: center;    

}

.header_regbutton:hover {
    color: #DDEAF8;
    transition: all 0.2s ease-out;    
}


.header_slogan {
    display: none;   

}

.left-panel
 {
    float:left;
    position: relative;
    background-color: #FFFFFF;
    display: table;
    min-height: 80vh;
    border-radius: 0px 0px 12px 0px;
    overflow: hidden;
    width: 255px;

}

.panel-hr
{
    background-color:#F2F4F7;
    border: none;
    height: 1px;
    margin-left:15px;
    margin-right:15px;
}






.left-panel-spec
 {
    background-color: #1976D2;
    display: flex;
    width: 100%-16px;
    margin: 16px 8px 16px 8px;
    padding: 10px 8px 10px 40px;
    color:#FFFFFF;
    font-weight:bold;
    cursor: pointer;
    border-radius: 12px;
    overflow: hidden;
    max-width: 255px;
    background-image: url(/img/pic/pic-steam.svg);
    background-repeat: no-repeat;
    background-position-x: 5%;
    background-position-y: center;
    background-size: 20px 20px;
    transition: all 0.2s ease-out;

}

.left-panel-spec:hover
 {
     background-color: #3C89D1;
     transition: all 0.2s ease-out;
 }
 
 
 



.itm-cons{
    background-color: #FFFFFF;
    display: flex;
    width: 100%-16px;
    margin: 5px 8px 5px 8px;
    padding: 10px 8px 10px 45px;
    color:#6C737F;
    cursor: pointer;
    border-radius: 12px;
    overflow: hidden;
    max-width: 255px;
    
    background-image: url(/img/pic/pic-console-blue.svg);    
    background-repeat: no-repeat;
    background-position-x: 5%;
    background-position-y: center;
    background-size: 20px 20px;
    transition: all 0.2s ease-out;

}

.itm-cons:hover
 {
     background-color: #F6FAFD;
     color:#000000;
     transition: all 0.2s ease-out;
 }

.itm-cons-sel{
    background-color: #1976D2;
    display: flex;
    width: 100%-16px;
    margin: 5px 8px 5px 8px;
    padding: 10px 8px 10px 45px;
    color:#FFFFFF;
    cursor: pointer;
    border-radius: 12px;
    overflow: hidden;
    max-width: 255px;

    background-image: url(/img/pic/pic-console.svg);    
    background-repeat: no-repeat;
    background-position-x: 5%;
    background-position-y: center;
    background-size: 20px 20px;
    transition: all 0.2s ease-out;

}

.itm-cons-sel:hover
 {
     background-color: #3C89D1;
     transition: all 0.2s ease-out;
 }
 

 
 
 
 
 
 .itm-pc{
    background-color: #FFFFFF;
    display: flex;
    width: 100%-16px;
    margin: 5px 8px 5px 8px;
    padding: 10px 8px 10px 45px;
    color:#6C737F;
    cursor: pointer;
    border-radius: 12px;
    overflow: hidden;
    max-width: 255px;
    
    background-image: url(/img/pic/pic-pc-blue.svg);    
    background-repeat: no-repeat;
    background-position-x: 5%;
    background-position-y: center;
    background-size: 20px 20px;
    transition: all 0.2s ease-out;

}

.itm-pc:hover
 {
     background-color: #F6FAFD;
     color:#000000;
     transition: all 0.2s ease-out;
 }

.itm-pc-sel{
    background-color: #1976D2;
    display: flex;
    width: 100%-16px;
    margin: 5px 8px 5px 8px;
    padding: 10px 8px 10px 45px;
    color:#FFFFFF;
    cursor: pointer;
    border-radius: 12px;
    overflow: hidden;
    max-width: 255px;

    background-image: url(/img/pic/pic-pc.svg);    
    background-repeat: no-repeat;
    background-position-x: 5%;
    background-position-y: center;
    background-size: 20px 20px;
    transition: all 0.2s ease-out;

}

.itm-pc-sel:hover
 {
     background-color: #3C89D1;
     transition: all 0.2s ease-out;
 }






.itm-dlc{
    background-color: #FFFFFF;
    display: flex;
    width: 100%-16px;
    margin: 5px 8px 5px 8px;
    padding: 10px 8px 10px 45px;
    color:#6C737F;
    cursor: pointer;
    border-radius: 12px;
    overflow: hidden;
    max-width: 255px;
    
    background-image: url(/img/pic/pic-dlc-blue.svg);    
    background-repeat: no-repeat;
    background-position-x: 5%;
    background-position-y: center;
    background-size: 20px 20px;
    transition: all 0.2s ease-out;

}

.itm-dlc:hover
 {
     background-color: #F6FAFD;
     color:#000000;
     transition: all 0.2s ease-out;
 }

.itm-dlc-sel{
    background-color: #1976D2;
    display: flex;
    width: 100%-16px;
    margin: 5px 8px 5px 8px;
    padding: 10px 8px 10px 45px;
    color:#FFFFFF;
    cursor: pointer;
    border-radius: 12px;
    overflow: hidden;
    max-width: 255px;

    background-image: url(/img/pic/pic-dlc.svg);    
    background-repeat: no-repeat;
    background-position-x: 5%;
    background-position-y: center;
    background-size: 20px 20px;
    transition: all 0.2s ease-out;

}

.itm-dlc-sel:hover
 {
     background-color: #3C89D1;
     transition: all 0.2s ease-out;
 }
 
 
 
 
 
 
 .itm-ingame{
    background-color: #FFFFFF;
    display: flex;
    width: 100%-16px;
    margin: 5px 8px 5px 8px;
    padding: 10px 8px 10px 45px;
    color:#6C737F;
    cursor: pointer;
    border-radius: 12px;
    overflow: hidden;
    max-width: 255px;
    
    background-image: url(/img/pic/pic-money-blue.svg);    
    background-repeat: no-repeat;
    background-position-x: 5%;
    background-position-y: center;
    background-size: 20px 20px;
    transition: all 0.2s ease-out;

}

.itm-ingame:hover
 {
     background-color: #F6FAFD;
     color:#000000;
     transition: all 0.2s ease-out;
 }

.itm-ingame-sel{
    background-color: #1976D2;
    display: flex;
    width: 100%-16px;
    margin: 5px 8px 5px 8px;
    padding: 10px 8px 10px 45px;
    color:#FFFFFF;
    cursor: pointer;
    border-radius: 12px;
    overflow: hidden;
    max-width: 255px;

    background-image: url(/img/pic/pic-money.svg);    
    background-repeat: no-repeat;
    background-position-x: 5%;
    background-position-y: center;
    background-size: 20px 20px;
    transition: all 0.2s ease-out;

}

.itm-ingame-sel:hover
 {
     background-color: #3C89D1;
     transition: all 0.2s ease-out;
 }
 
 
 
 
 .left-bott
 {
    background-color: red;
    position: absolute;
    bottom: 0;
 }
 
 


    
}



/*  MICRO ===================================================================  */

@media (max-width: 659px){
    


header {
    display: block;
    
}

.header {
    background-color: #1976D2;
    min-height: 94px;
    
    padding: 5px 10px 5px 20px;
    margin: 0 auto;
}

.header_logo {
    height: 80px;
    width: 80px;
    background-image: url(/img/logo/logo_white.png);
    background-size: cover;
    float: left;
}


.header_signbutton {
    height:40px;
    padding: 0px 37px 0px 10px;
    width: 230px;
    cursor: pointer;
    min-width: 64px;
    color: #1976D2;
    background-color: #ffffff;
    box-shadow: none;
    outline: 0px;
    text-decoration: none;
    font-weight: bold;
    border-width: 0px;
    border-radius: 12px;
    margin: 7px 20px 7px 100px;
    text-align: center;
    vertical-align: middle;
    line-height: 40px;    
    background-image: url(/img/pic/pic-pac.svg);
    background-repeat: no-repeat;
    background-position-x: 95%;
    background-position-y: center;

}


.header_regbutton {
    height:40px;
    padding: 0px 40px 0px 30px;
    width: 230px;
    cursor: pointer;
    color: #ffffff;
    box-shadow: none;
    outline: 0px;
    text-decoration: none;
    font-weight: bold;
    border-width: 0px;
    transition: all 0.2s ease-out; 
    margin: 7px 30px 7px 100px;
    text-align: center;
    vertical-align: middle;
    line-height: 40px;  
    background-image: url(/img/pic/pic-key.svg);
    background-repeat: no-repeat;
    background-position-x: 95%;
    background-position-y: center;    

}



.header_slogan {
    display: none;   

}


.left-panel
 {
    position: relative;
    background-color: #FFFFFF;
    overflow: hidden;
    width: 100%;

}

.panel-hr
{
    display:none;
}






.left-panel-spec
 {
    background-color: #1976D2;
    display: inline-block;
    width: 200px;
    margin: 3px 8px 3px 8px;
    padding: 7px 8px 7px 45px;
    color:#FFFFFF;
    font-weight:bold;
    cursor: pointer;
    border-radius: 12px;
    overflow: hidden;
    max-width: 255px;
    background-image: url(/img/pic/pic-steam.svg);
    background-repeat: no-repeat;
    background-position-x: 5%;
    background-position-y: center;
    background-size: 20px 20px;
    transition: all 0.2s ease-out;

}

.left-panel-spec:hover
 {
     background-color: #3C89D1;
     transition: all 0.2s ease-out;
 }
 
 
 



.itm-cons{
    background-color: #FFFFFF;
    display: inline-block;
    width: 200px;
    margin: 3px 8px 3px 8px;
    padding: 7px 8px 7px 45px;
    color:#6C737F;
    cursor: pointer;
    border-radius: 12px;
    overflow: hidden;
    max-width: 255px;
    
    background-image: url(/img/pic/pic-console-blue.svg);    
    background-repeat: no-repeat;
    background-position-x: 5%;
    background-position-y: center;
    background-size: 20px 20px;
    transition: all 0.2s ease-out;

}

.itm-cons:hover
 {
     background-color: #F6FAFD;
     color:#000000;
     transition: all 0.2s ease-out;
 }

.itm-cons-sel{
    background-color: #1976D2;
    display: inline-block;
    width: 200px;
    margin: 3px 8px 3px 8px;
    padding: 7px 8px 7px 45px;
    color:#FFFFFF;
    cursor: pointer;
    border-radius: 12px;
    overflow: hidden;
    max-width: 255px;

    background-image: url(/img/pic/pic-console.svg);    
    background-repeat: no-repeat;
    background-position-x: 5%;
    background-position-y: center;
    background-size: 20px 20px;
    transition: all 0.2s ease-out;

}

.itm-cons-sel:hover
 {
     background-color: #3C89D1;
     transition: all 0.2s ease-out;
 }
 

 
 
 
 
 
 .itm-pc{
    background-color: #FFFFFF;
    display: inline-block;
    width: 200px;
    margin: 3px 8px 3px 8px;
    padding: 7px 8px 7px 45px;
    color:#6C737F;
    cursor: pointer;
    border-radius: 12px;
    overflow: hidden;
    max-width: 255px;
    
    background-image: url(/img/pic/pic-pc-blue.svg);    
    background-repeat: no-repeat;
    background-position-x: 5%;
    background-position-y: center;
    background-size: 20px 20px;
    transition: all 0.2s ease-out;

}

.itm-pc:hover
 {
     background-color: #F6FAFD;
     color:#000000;
     transition: all 0.2s ease-out;
 }

.itm-pc-sel{
    background-color: #1976D2;
    display: inline-block;
    width: 200px;
    margin: 3px 8px 3px 8px;
    padding: 7px 8px 7px 45px;
    color:#FFFFFF;
    cursor: pointer;
    border-radius: 12px;
    overflow: hidden;
    max-width: 255px;

    background-image: url(/img/pic/pic-pc.svg);    
    background-repeat: no-repeat;
    background-position-x: 5%;
    background-position-y: center;
    background-size: 20px 20px;
    transition: all 0.2s ease-out;

}

.itm-pc-sel:hover
 {
     background-color: #3C89D1;
     transition: all 0.2s ease-out;
 }






.itm-dlc{
    background-color: #FFFFFF;
    display: inline-block;
    width: 200px;
    margin: 3px 8px 3px 8px;
    padding: 7px 8px 7px 45px;
    color:#6C737F;
    cursor: pointer;
    border-radius: 12px;
    overflow: hidden;
    max-width: 255px;
    
    background-image: url(/img/pic/pic-dlc-blue.svg);    
    background-repeat: no-repeat;
    background-position-x: 5%;
    background-position-y: center;
    background-size: 20px 20px;
    transition: all 0.2s ease-out;

}

.itm-dlc:hover
 {
     background-color: #F6FAFD;
     color:#000000;
     transition: all 0.2s ease-out;
 }

.itm-dlc-sel{
    background-color: #1976D2;
    display: inline-block;
    width: 200px;
    margin: 3px 8px 3px 8px;
    padding: 7px 8px 7px 45px;
    color:#FFFFFF;
    cursor: pointer;
    border-radius: 12px;
    overflow: hidden;
    max-width: 255px;

    background-image: url(/img/pic/pic-dlc.svg);    
    background-repeat: no-repeat;
    background-position-x: 5%;
    background-position-y: center;
    background-size: 20px 20px;
    transition: all 0.2s ease-out;

}

.itm-dlc-sel:hover
 {
     background-color: #3C89D1;
     transition: all 0.2s ease-out;
 }
 
 
 
 
 
 
 .itm-ingame{
    background-color: #FFFFFF;
    display: inline-block;
    width: 200px;
    margin: 3px 8px 3px 8px;
    padding: 7px 8px 7px 45px;
    color:#6C737F;
    cursor: pointer;
    border-radius: 12px;
    overflow: hidden;
    max-width: 255px;
    
    background-image: url(/img/pic/pic-money-blue.svg);    
    background-repeat: no-repeat;
    background-position-x: 5%;
    background-position-y: center;
    background-size: 20px 20px;
    transition: all 0.2s ease-out;

}

.itm-ingame:hover
 {
     background-color: #F6FAFD;
     color:#000000;
     transition: all 0.2s ease-out;
 }

.itm-ingame-sel{
    background-color: #1976D2;
    display: inline-block;
    width: 200px;
    margin: 3px 8px 3px 8px;
    padding: 7px 8px 7px 45px;
    color:#FFFFFF;
    cursor: pointer;
    border-radius: 12px;
    overflow: hidden;
    max-width: 255px;

    background-image: url(/img/pic/pic-money.svg);    
    background-repeat: no-repeat;
    background-position-x: 5%;
    background-position-y: center;
    background-size: 20px 20px;
    transition: all 0.2s ease-out;

}

.itm-ingame-sel:hover
 {
     background-color: #3C89D1;
     transition: all 0.2s ease-out;
 }
 
 
 
 
 .left-bott
 {
    display:none;
 }

    
    
}