/* CSS */
/* fonts */
@font-face{
    font-family: "os";
    src: url("../fonts/os.eot");
    src: url("../fonts/os.ttf") format("truetype"),
    url("../fonts/os.eot#iefix") format("embedded-opentype");
}

@font-face{
    font-family: "osb";
    src: url("../fonts/OpenSans-Bold.eot");
    src: url("../fonts/OpenSans-Bold.otf") format("opentype"),
    url("../fonts/OpenSans-Bold.ttf") format("truetype"),
    url("../fonts/OpenSans-Bold.eot#iefix") format("embedded-opentype");
}

@font-face{
    font-family: "ro";
    src: url("../fonts/RobotoSlab-Regular.eot");
    src: url("../fonts/RobotoSlab-Regular.otf") format("opentype"),
    url("../fonts/RobotoSlab-Regular.ttf") format("truetype"),
    url("../fonts/RobotoSlab-Regular.eot#iefix") format("embedded-opentype");
}

@font-face{
    font-family: "rol";
    src: url("../fonts/RobotoSlab-Light.eot");
    src: url("../fonts/RobotoSlab-Light.otf") format("opentype"),
    url("../fonts/RobotoSlab-Light.ttf") format("truetype"),
    url("../fonts/RobotoSlab-Light.eot#iefix") format("embedded-opentype");
}

@font-face{
    font-family: "rob";
    src: url("../fonts/RobotoSlab-Bold.eot");
    src: url("../fonts/RobotoSlab-Bold.otf") format("opentype"),
    url("../fonts/RobotoSlab-Bold.ttf") format("truetype"),
    url("../fonts/RobotoSlab-Bold.eot#iefix") format("embedded-opentype");
}

/* =Reset default browser CSS. Based on work by Eric Meyer: http://meyerweb.com/eric/tools/css/reset/index.html
-------------------------------------------------------------- */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
    background: transparent;
    border: 0;
    margin: 0;
    padding: 0;
    vertical-align: baseline;
}
body {line-height: 1; background-color:#282251; min-width:320px;}
h1, h2, h3, h4, h5, h6 {font-weight: normal;}
ol, ul {list-style: none;}
blockquote {quotes: none;}
blockquote:before, blockquote:after {content: ''; content: none;}
del {text-decoration: line-through;}

/* tables still need 'cellspacing="0"' in the markup */
table {border-collapse: collapse; border-spacing: 0;}
a img {border: none;}

/* mi css */
p {margin-bottom: 24px;}
img {max-width: 100%;}

#wrapper {background: #ffffff;}

/* header */
#header {margin: 0; padding: 0; border-bottom: 10px solid #ffffff;}
#header .top {background: #282251; height: 37px; text-align: right;}
#header .top ul {margin: 0; list-style: none; padding-top: 8px;}
#header .top ul li {display: inline-block; vertical-align: top; margin: 0 6px;}
#header .nav { padding:0 20px; min-height: 109px; background: url('../img/header_left.png') no-repeat top left; background-color: #282251;}
#header #site-logo {float: left; margin-top: 20px;}
#access {float: right; margin-top: 24px;}
.btn_access:link, .btn_access:visited, .btn_access:hover, .btn_access:active {position: relative; cursor: pointer; padding: 15px 40px; font-family: "osb"; font-size: 32px; line-height: 60px; text-transform: none; text-decoration: none; color:#ffffff; background-color: #ef0d4c; border-radius: 5px;}
#access ul {margin: 0; list-style: none; text-align: right;}
#access ul li {display: inline-block; vertical-align: top; position: relative; padding: 4px; padding-bottom: 0; border-radius: 5px 5px 0 0; text-align: center; background: url('../img/scontainer.jpg');}
#access ul li a {padding: 7px 20px; line-height: 35px; text-decoration: none; text-transform: uppercase; font-family: "osb"; font-size: 15px; color :#fff; border-radius: 5px 5px 0 0;}
#access ul li.current a, #access ul li:hover a {background: url('../img/menu.png') no-repeat top left; color: #DEDC03;}
#access select {display: none; margin: 0 auto; height: 25px; padding: 3px;}

/* main */
#main {background: #282251;}

.block {
    background-color: #615ca8;
}
.block-header, .block-content {
    color: #fff;
}

/* slider */
.slider-container {background: #615ca8; min-height: 15px;}
#slider, #slider .item {height: 400px; width: 100%; text-align: center;}
.slider_image {margin:0 auto; padding:0; width:520px;}
.slider_image img {display:block; margin:0; padding:0; border:none; box-sizing:border-box;}

#slider .item {padding-top: 25px; padding-bottom: 25px; font-family: "rol"; font-size: 17px; line-height: 20px; color: #fff;}
#slider .item h2 {font-family: "rob"; font-size: 38px; line-height: 40px; color: #fff; margin-bottom: 20px;}
#slider .item a, a.play {background-color: #ef0d4c; padding: 15px 40px; text-transform: uppercase; text-decoration: none; font-family: "osb"; font-size: 22px; line-height: 60px; color: #ffffff; border-radius: 5px;}

/* page */
.pcontent{padding: 65px 0; font-family: "rol"; font-size: 19px; line-height: 26px; color: #ffffff;}
.pcontent h2 { font-family: "rob"; font-size: 34px; line-height: 20px; color: #ffffff; margin-bottom: 15px;}
.pcontent h4 {font-family: "rob"; font-size: 26px; line-height: 26px; margin-bottom: 15px; color: #ffffff;}
.pcontent .ptitle {margin-bottom: 45px;}
.pcontent .pimage {padding: 4px; background: #fff; border: 1px solid #E7E7E7; border-radius: 5px; margin-bottom: 60px;}
.pcontent .thum {margin-bottom: 30px;}

/* games */
.game{height: 400px; padding: 15px; border: 1px solid #282251; text-align: center; font-family: "rol"; font-size: 16px; color: #ffffff; line-height: 20px; background-color:#615ca8;}
.game img {margin-bottom: 30px;}
.game h3, .game h3 a {font-family: "rob"; font-size: 20px; text-decoration: none; color: #ffffff; line-height: 20px; margin-bottom: 10px;}
.game .btn, .item .btn {position: relative; cursor: pointer; padding: 15px 40px; font-family: "osb"; font-size: 16px; line-height: 60px; text-transform: uppercase; text-decoration: none; color: #ffffff; background-color:#ef0d4c; border-radius: 5px;}
.game .viewgame, .item .viewgame {position: absolute; right: 25px; top: 15px; margin: 0;}

#game-slider, #game-slider .item {width: 100%; text-align: center;}
#game-slider .item {min-height: 455px;}
#pager {text-align: center; padding-top: 25px; margin-bottom: 60px;}
#pager a {font-size: 4px; padding: 3px 5px; background: #C2C4C6; color: #C2C4C6; margin: 0 6px; border-radius: 50%;}
#pager a.activeSlide {background: #F5B63E; color: #F5B63E;}

/* more games */
#more-games {margin-top: 100px;}
#more-games .item {padding-bottom: 30px; margin-bottom: 30px; border-bottom: 1px solid #EDEEEE;}
#more-games .item:last-child {border-bottom: none;}
#more-games h4 a {text-decoration: none; color: #00508E; }

/* footer */
#footer {clear:both; margin:0; padding:0; background-color: #282251;}

.footer_links {margin:0; padding:12px 0; text-align:center; background-color:#433c72;}
.footer_links a:link, .footer_links a:visited, .footer_links a:active {display:inline-block; margin:0 8px; padding:0; font-family: "os"; font-size:15px; line-height:16px; color:#ffffff; text-decoration:underline; text-align:left;}
.footer_links a:hover {text-decoration:none;}

#footer .copy {margin:0; padding: 25px 0; text-align: center; font-family: "os"; font-size: 15px; line-height: 16px; color: #9D9FA2;}
#footer .copy a:link, #footer .copy a:visited, #footer .copy a:hover, #footer .copy a:active {color:#9D9FA2; text-decoration:none;}

/* icons */
.icon-download {background-image: url('../img/icon-download.png');}

/* banners */
#top-ad {width:729px; height:90px; margin: 20px auto 0px auto;}
#bottom-ad {width:729px; height:90px; margin: -50px auto 40px auto;}

/*--- form ---*/
.form_container {margin:0; padding:25px 0 40px 0;}

.form {margin:0; padding:0;}

.form_title {margin:0; padding: 15px 0; text-align: center; font-family: "os"; font-size:26px; line-height:1; color: #ffffff;}

.form_row {margin:0; padding: 0 0 15px 0;}
.form_row.small { margin: 0 auto; padding: 0 0 10px 0; width:60%;}

.form_desc {margin:0; padding: 10px 0; text-align:left; font-family: "os"; font-size: 16px; line-height:1.1; color: #ffffff;}

.cost:link, .cost:visited, .cost:active {margin:0; padding:0; text-align: center; font-family: "os"; font-size: 16px; line-height:1.1; color:#ffffff; text-decoration:underline;}
.cost:hover {text-decoration:none;}

.form_label {margin:0; padding: 5px 0; text-align:left; font-family: "os"; font-size: 16px; line-height: 1.1; color: #ffffff; overflow: hidden;}

.form_input {margin:0; padding: 0 8px; width: 100%; height: 38px; line-height: 38px; font-family: "os"; font-size: 16px; color: #000000; border:1px solid #d9d9d9; border-radius: 2px; -webkit-appearance: none; box-sizing:border-box;}

.buttons {margin:0; padding: 15px 0 0 0; text-align: center;}
.button {position: relative; border:none; padding: 15px 40px; font-family: "osb"; font-size: 20px; line-height: 32px; text-transform: none; text-decoration: none; color:#ffffff; background-color:#ef0d4c; border-radius: 5px; cursor:pointer; -webkit-appearance: none;}

.registration_rules {margin: 10px 0; padding: 10px; border: 1px solid #bbb; border-radius: 2px; font-size: 12px; overflow: auto; max-height: 200px;}
.registration_rules h2 {margin:0; padding:0; text-align: center; font-family: "os"; font-size: 16px; font-weight:600; line-height: 16px; color: #ffffff;}
.rules {margin:0; padding:0; text-align:left; font-family: "os"; font-size: 14px; line-height: 16px; color: #ffffff;}

.checkbox_label {margin:0; padding: 10px 0; text-align:left; font-family: "os"; font-size: 14px; line-height: 16px; color: #ffffff;}
/*--- end: form ---*/

@media only screen and (max-width:1024px){
    #slider .item h2 {font-size: 20px; line-height: 24px; margin-bottom: 10px;}
}

@media only screen and (max-width:900px){
    #game-slider .grid33 {width: 100%; margin-right: 0; float: none; margin-bottom: 20px; text-align: center;}

    #slider {height:330px;}
    #slider .item {/*height: 200px;*/ padding-top:25px; padding-bottom:25px;}
    .slider_image {width:420px;}

    .form_container {padding:10px 0;}
}

@media only screen and (max-width:700px){
    #header {text-align: center;}
    #header .nav { min-height: 196px; background:none; background-color: #282251;}
    #header #site-logo {float: none; margin: 20px auto;}
    #header .top {text-align: center;}
    #access {float: none; clear: both; margin-top: 0;}
    #access ul {text-align: center;}

    #slider {height:300px;}
    #slider .item {/*height: 485px;*/ padding-top:25px; padding-bottom:0px;}
    .slider_image {width:380px;}

    .pcontent {padding: 25px 0; font-size: 16px; line-height: 20px; text-align: center;}
    .pcontent h2 {font-size: 20px; line-height: 24px; margin-bottom:10px;}
    .pcontent h4 {font-size: 18px; line-height: 18px;}
    .game h3 {font-size: 18px; line-height: 18px;}
    #game-slider .item .grid33:last-child .game {padding-bottom: 60px;}

    #slider .grid50, .pcontent .grid50, .pcontent .grid30, .pcontent .grid70 {width: 100%; margin-right: 0; float: none; margin-bottom: 20px; text-align: center;}
    #slider .item {padding-bottom: 0;}
}

@media only screen and (max-width:470px){
    #header .nav {min-height: 109px; padding-bottom: 20px;}
    .btn_access:link, .btn_access:visited, .btn_access:hover, .btn_access:active {padding: 7px 20px; font-size: 20px; line-height: 30px; background-color:#ef0d4c; border-radius:5px;}
    #access ul {display:none;}
    #access select {display:block;}

    #slider {height:240px;}
    #slider .item {height:200px; padding-top:20px; padding-bottom:20px;}
    .slider_image {width:300px;}

    /*--- form ---*/
    .form_container {padding:10px 0 20px 0;}
    .form_title {padding: 5px 0; font-size:18px;}
    .form_row {padding: 0 0 10px 0;}
    .form_desc {padding: 5px 0; font-size: 14px;}
    .cost:link, .cost:visited, .cost:active {font-size: 12px;}
    .form_label {padding: 5px 0; font-size: 14px;}
    .form_input {padding: 0 8px; height: 28px; line-height: 26px; font-size: 12px;}
    .buttons {padding: 10px 0 0 0;}
    .button {padding: 10px 20px; font-size: 16px; line-height: 18px;}
    .registration_rules {margin:10px 0; padding: 10px; font-size: 12px; max-height: 200px;}
    .registration_rules h2 {font-size: 12px; line-height: 16px;}
    .rules {font-size: 12px; line-height: 14px;;}
    .checkbox_label {padding: 10px 0; font-size: 12px; line-height: 14px;}
    /*--- end: form ---*/
}