body {
    width:100%;
    font-family: 'Open Sans', sans-serif;
    font-size:14px;
    line-height:1.3em;
    overflow-x:hidden;
    /*background:url(../img/bg.png);*/
}

h1{
    line-height: 1.4em;
}

.vk-holder { 
    position:fixed; 
    top:200px;
    left:20px; 
    z-index:99; 
}


::-moz-selection{background: #ec4149; color: #fff;} 
::webkit-selection{background: #ec4149; color: #fff;} 
::selection{background: #ec4149; color: #fff;}
img::-moz-selection{background: none transparent;} 
img::webkit-selection{background: none transparent;} 
img::selection{background: none transparent;}

.wrapper {
    width:100%;
    max-width:960px;
    padding:0 20px;
    margin:0 auto;
}

.adzdesktop {
    display:block
}

.adzmobile {
    display:none;
}

/*
section .wrapper {
        background: #fff;
    box-shadow: 0 0 10px #e3e3e3;
    margin-top: 20px;
    padding-bottom: 20px;
}
*/

header .wrapper {
    padding: 0;
    max-width: 1000px;
}

a {
    text-decoration:none;
    cursor:pointer;
    color:#006bef;
}

article a {transition:.3s;}
article a:hover {
    color:#1d5187;
    /*opacity:.75;*/
}

nav.topnav a {
    text-decoration:none;
}

a:visited {
    color:#006bef;
}

a:hover {
    text-decoration:underline;

}

img {
    max-width:100%;
    height:auto;
}

ul {
    list-style-type:none;
    margin:0;
    padding-left:0;
}


.page-nav {
    display:flex;
    flex-wrap:nowrap;
    background:#f6f6f6;
    border-top:1px dashed #ccc;
    border-bottom:1px dashed #ccc;
    margin-bottom:15px;
}

.page-nav .nav-prev {
    flex-basis:50%;
    padding-left:10px;
}

.page-nav .nav-next {
    flex-basis:50%;
    padding-right:10px;
    text-align:right;
}

.page-nav .nav-prev a i {
    margin-right:4px;
}
.page-nav .nav-next a i {
    margin-left:10px;
}

.page-nav a {
    display:inline-block;
    min-width:140px;
    line-height:30px;
}

hr + .page-nav {
    margin-top:-10px;
}

.page-nav + hr {
    display:none;
}

.page-nav a:hover {
    color:#333;
    text-decoration:none;
}

#vk_comments {
    width:100%!important;
}

ul li {padding-left:0;}

nav.topnav {
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#006bef+46,006bef+46,193dd1+100 */
    background: #006bef; /* Old browsers */
    background: -moz-linear-gradient(top, #006bef 46%, #006bef 46%, #193dd1 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #006bef 46%,#006bef 46%,#193dd1 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #006bef 46%,#006bef 46%,#193dd1 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#006bef', endColorstr='#193dd1',GradientType=0 ); /* IE6-9 */

    box-shadow:0 0 10px #333;
    border-bottom:1px solid #025BE0;
}

/*
hr:before {
        display:block;
        width:100%;
        height:1px;
        border-top:1px dahsed #ccc;
        content:'';
}*/

p {
    margin-top:10px;
}

hr {
    height: 0;
    display: block;
    width: 100%;
    background: #fff;
    color: #fff;
    border:0 none;
    border-bottom: 1px dashed #ccc;

    margin-top: 10px;
}


.bottom-img {
    width: 100%;
    border: 1px solid #ccc;
    margin-top: 20px;
}

ul.topnav {
    width:100%;
    display:block;
    clear:both;
    font-size:0;
}

ul.topnav > li {
    display:inline-block;
    text-align:center;
    transition:.3s;
    font-size:14px!important;
    position:relative;
    transition:.3s;
    transform:skew(-10deg);
}

ul.topnav > li > ul {
    position:absolute;
    z-index:20;
}

ul.topnav > li ul {
    display:none;
}



ul.topnav > li > ul {
    width:202px;
    background:#fff;
    border:1px solid #e3e3e3;
    border-top:1px solid #025be0;
    box-shadow:0 0 3px #6E7077;
    transform:skew(10deg);
    margin-left:-33px;
}

ul.topnav > li > ul li {
    display: inline-block;
    text-align: left;
    width: 100px;
    float:left;
    text-align:center;
    border-top: 1px solid #e3e3e3;
}

ul.topnav > li > ul li:nth-child(odd) {
    border-right:1px solid #efefef
}

ul.topnav > li > ul li.last-odd {
    width:100%;

}

ul.topnav > li > ul li:hover {
    background:#efefef;
}

ul.topnav > li > ul li a {
    padding:10px;
    display:inline-block;
}

ul.topnav > li > a {
    color:#fff;
    padding:15px 26px;
    display:inline-block;
    border-left:1px solid #193dd1;
}

ul.topnav > li:hover {
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#005ad1+0,006bef+100 */
    background: rgb(0,90,209); /* Old browsers */
    background: -moz-linear-gradient(top, rgba(0,90,209,1) 0%, rgba(0,107,239,1) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(0,90,209,1) 0%,rgba(0,107,239,1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, rgba(0,90,209,1) 0%,rgba(0,107,239,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#005ad1', endColorstr='#006bef',GradientType=0 ); /* IE6-9 */
}

ul.topnav i.fa-caret-down {color:skyblue;}

ul.topnav > li:hover i.fa-caret-down {
    color:#fff;
    opacity:.75;
}


ul.topnav > li:first-child a {
    border-left:0 none;
}



.nav-trigger {
    display:none;
}

a.nav-trigger i.fa-times {
    display:none;
}

a.nav-trigger.opened i.fa-times {
    display:inline-block;
}

a.nav-trigger.opened i.fa-bars {
    display:none;
}

header {
    background:#e8f0f2;
    border-bottom:1px solid #e3e3e3;
    position:relative;
    z-index:1;
    overflow:hidden;
}


header:before {
    background:#fff;
    opacity:.5;
    left:-110%;
    top:0;	
    display:inline-block;
    transition:.5s;
    content:'';
    z-index:2;
    transform:skew(-10deg);
    width:50%;
    height:150px;
    position:absolute;
}
header:hover:before{
    left:0%;
    margin-left:-140px;
}


a.logo {
    display:inline-block;
    width:300px;
    height:59px;
    margin:10px;
    background:url(../img/logo.png) left 0 no-repeat;
    background-size:300px auto;
    position:relative;
    z-index:3;
}

a.logo:hover  {
    background:url(../img/logo.png) left -67px no-repeat;
    background-size:300px auto;
}

.content {
    display:flex;
    flex-wrap:nowrap;
}

article {
    flex-basis:99%;
    margin:20px 0;
    line-height:1.8em;
}

aside {
    margin:20px 0;
    flex-basis:28%; 
    padding-left:1%; 
    margin-left:1%;
    border-left:1px dashed #e3e3e3;
    text-align:center;
}

div.aside-bottom {
    display:none; 
}

footer {
    font-size:12px;
    background:#e8f0f2;
    padding:20px 0;
    margin-top:30px;
    border-top:1px dashed #e3e3e3;
}

.linklist a {
    display:block;
}

.footer-logo {
    background:url(../img/logo.png) left 0 no-repeat;
    background-size:150px auto;
    display: inline-block;
    float: left;
    margin-right: 30px;
    width:150px;
    height:30px;
}

.italic {
    font-style:italic;
}

.flex-c {display:flex;}

footer .flex-c, 
header .flex-c {
    align-items:center;
    width:100%;
}

footer .flex-c .flex-b, 
header .flex-c .flex-b {
    flex-grow:1;
}

.ta-right {
    text-align:right;
}

header .flex-c .flex-b + .flex-b {
    text-align:right;
}

iframe {
    width:100%;
    max-width:100%;
}

.page_bottom-adz,
.adz-content {
    margin:10px 0;
}

.adz-top {
    margin-bottom:20px;
    margin-top: 35px;
}

.adz {
    margin-bottom:10px;
}

aside .adz-bottom {
    margin:20px 0;
}



a.game-trigger {
    color:#333;
    width:100%;
    display:block;
    line-height:50px;
    font-size:26px;
    margin:10px auto;
    min-width:300px;
    text-align:center;
    transition:.3s;
}



a.game-trigger:hover {
    text-decoration:none!important;
    color:#006bef;
}

a.game-trigger span.trigger-icon {
    background:url(../img/game/game-trigger.png) center right no-repeat;
    background-size:contain;
    display:inline-block;
    min-height:50px;
    vertical-align:middle;
    min-width:80px;
    margin-right:15px;
}

a.game-trigger:hover span.underline {
    text-decoration:underline;
}

.flex-table {
    display:flex;
    flex-wrap:wrap;
    width:100%;
}

.flex-col {
    flex-basis:49%;
    text-align:center;
    border: solid 1px #66afe9;
}

.flex-col3 {
    flex-basis:31%;
    margin-right:2%;
    text-align:center;
    border: solid 1px #66afe9;
}

.flex-col6 {
    flex-basis:62%;
    margin-right:4%;
    text-align:center;
    border: solid 1px #66afe9;
}

.flex-col10 {
    flex-basis:98%;
    text-align:center;
    border: solid 1px #66afe9;
}

.center {
    text-align:center;
}
.skewb a strong,
.rubic2x2 a strong,
.rubic3x3 a strong,
.rubic4x4 a strong,
.rubic5x5 a strong {
    white-space:nowrap;
}

.skewb,
.rubic2x2,
.rubic3x3,
.rubic4x4, 
.rubic5x5 {
    border-left:3px solid #e3e3e3;
    padding-left:20px;
    margin-left:60px;
    position:relative;
}

.skewb:before {
    position:absolute;
    left:-60px;
    top:0;
    content:'';
    display:inline-block;
    width:50px;
    height:50px;
    background:url(../img/skewb.png) top left no-repeat;
    background-size:cover;
    opacity:.5;
}

.rubic2x2:before {
    position:absolute;
    left:-60px;
    top:0;
    content:'';
    display:inline-block;
    width:50px;
    height:50px;
    background:url(../img/r2x2.png) top left no-repeat;
    background-size:cover;
    opacity:.5;
}

.rubic3x3:before {
    position:absolute;
    left:-60px;
    top:0;
    content:'';
    display:inline-block;
    width:50px;
    height:50px;
    background:url(../img/r3x3.png) top left no-repeat;
    background-size:cover;
    opacity:.5;
}

.rubic4x4:before {
    position:absolute;
    left:-60px;
    top:0;
    content:'';
    display:inline-block;
    width:50px;
    height:50px;
    background:url(../img/r4x4.png) top left no-repeat;
    background-size:cover;
    opacity:.5;
}

.rubic5x5:before {
    position:absolute;
    left:-60px;
    top:0;
    content:'';
    display:inline-block;
    width:50px;
    height:50px;
    background:url(../img/r5x5.png) top left no-repeat;
    background-size:cover;
    opacity:.5;
}


.ZAGLUSHKA {
    background:#e3e3e3;
    line-height:80px;
    text-align:center;
    color:#333;
    height:80px;
    display:block;
}


@media screen and (min-width:1000px) {
    ul.topnav {
        display:block!important;

    }

    ul.topnav > li:hover > ul {
        display:block!important;
    }

    .noskew{ 
        display:inline-block; 
        transform:skewX(10deg); 
    }
}

@media screen and (max-width:1000px) {
    .desktop-only {display:none;}
    .vk-holder { 
        position:relative; 
        clear: both; 
        margin: 10px 0 0 0; 
        text-align: center; 
        top:0; 
        right:0; 
    }

    ul.topnav > li {
        transform: skew(0deg);
    }
    ul.topnav > li > ul {
        margin-left:0;
        transform: skew(0deg);	
    }


    body {
        background:#fff;
    }

    header:hover:before{
        left:0;
        margin-left:-20px;
        width:45%;
        min-width:360px
    }

    header .wrapper,
    .wrapper {
        max-width:calc(100% - 20px);
        padding:0 10px;
        min-width:300px;
    }

    a.logo {margin:10px 0;}

    .content {flex-direction:column;}

    article {
        margin:0;
        flex-basis:100%;
        order:1;
    }

    aside { 
        order:0;
        flex-basis:100%;
        margin:10px 0 0 0;
        padding:10px 0 10px 0;
        border-left:0 none;
        /*overflow-x:hidden;*/
        border-bottom:1px dashed #e3e3e3;

    }


    div.aside-bottom {
        width:100%;
        display:inline-block;
        margin:10px 0 0 0;
        padding:10px 0 0 0;
        border-left:0 none;
        border-top:1px dashed #e3e3e3;
    }

    ul.topnav {
        display:none;
        padding-bottom:10px;
        border-top:1px dashed #193dd1;
    }

    .nav-trigger {
        padding:10px 0;
        text-align:center;
        display:block;
        color:#fff;
    }


    .adz-top {
        margin-bottom:0;
    }


    ul.topnav > li {
        width:100%;
    }
    ul.topnav > li:last-child {
        width:100%;
    }

    ul.topnav > li > a {
        padding:10px 0;
        width:100%;
        border-left:0 none;
    }



    ul.topnav > li > ul {
        position:relative;
        width:100%;
        background:#fff;
    }

    ul.topnav > li > ul li {
        width:50%;
        background:#fff;
    }

    ul.topnav > li:hover > ul {
        display:none;
    }

    ul.topnav > li > ul li:nth-child(odd) {
        border-right:0 none;
    }

    ul.topnav > li > ul {
        border:0 none;
    }

    ul.topnav > li > ul li a {
        width:100%;
        padding:10px 0;
    }

    section .wrapper {
        margin-top:0;
        padding-bottom:0;
        box-shadow:none;
    }



}

@media screen and (max-width:800px) { 
    footer .flex-c {flex-wrap:wrap;}
    footer .flex-b {
        flex-basis:50%;
    }


    .footer1 {order:0;}
    .footer2 {order:2;}
    .footer3 {order:1;}
    .footer4 {order:4;}

}

@media screen and (max-width:600px) {
    header .flex-b + .flex-b {
        display:none;
        flex-basis:100%;
    }

    .adzdesktop {
        display:none;
    }

    .adzmobile {display:block;}

    header:before {
        display:none;
    }

    header .wrapper {
        padding:0;
    }

    header a.logo {
        margin:10px auto;
        display:block;
    }

    article {
        line-height:1.3em;
    }

    .linklist a {
        margin-bottom:1em;
        text-align:center;
    }

}

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

    .skewb,
    .rubic3x3,
    .rubic4x4,
    .rubic5x5 {
        border-left:0 none;
        padding:0!important;
        margin:0!important
    }

    .skewb:before,
    .rubic3x3:before,
    .rubic4x4:before,
    .rubic5x5:before {
        display:none;
    }

    .contact-content {
        text-align:center;
    }

    .footer1 {order:0;}
    .footer2 {order:1; text-align:center;}
    .footer3 {order:2; display:none;}
    .footer4 {order:3; margin-top:20px;}

    #rubik {zoom:.6;}

    footer .flex-c {
        flex-direction:column;
    } 

    footer .flex-c .flex-b:first-child {
        margin-bottom:20px;
    }


}


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

    .flex-col10 img,
    .flex-col6 img,
    .flex-col3 img,
    .flex-col img {
        margin-top:10px;
    }



    .flex-col10,
    .flex-col6,
    .flex-col3,
    .flex-col {
        margin-left:0;
        margin-right:0;
        flex-basis:100%;
        margin-bottom:10px;
    }


}