/*!
Theme Name: css3files
Theme URI: http://css3files.com/
Description: Custom theme for css3files.com
Author: Christian Krammer (ck@css3files.com)
Version: 2.0
Tags: none
*/

* {
    margin: 0;
    padding: 0
}
form *,
img,
hr {
    border: 0
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section {
    display: block
}
html {
    font-size: 62.5%;
    overflow-y: scroll;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    line-height: 1.5
}
body,
button,
input,
select,
textarea,
a {
    font-family: "Open Sans", Helvetica, sans-serif;
    color: #000
}
::-moz-selection {
    background: #4207C9;
    color: #fff;
    text-shadow: none
}
::selection {
    background: #4207C9;
    color: #fff;
    text-shadow: none
}
a:focus {
    outline: thin dotted
}
a:hover,
a:active {
    outline: 0
}
del a {
    text-decoration: line-through
}
ins {
    text-decoration: none
}
img {
    vertical-align: middle
}
hr {
    display: block;
    height: 1px;
    border-top: 1px solid #ccc;
    margin: 1em 0
}
q {
    quotes: none
}
q:before,
q:after {
    content: ""
}
ul {
    list-style: none
}
button {
    width: auto;
    overflow: visible
}
button,
input,
select,
textarea {
    font-size: 100%;
    vertical-align: baseline;
    line-height: normal
}
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
    cursor: pointer;
    -webkit-appearance: button
}
button::-moz-focus-inner,
input::-moz-focus-inner {
    border: 0;
    padding: 0
}
input[type="search"] {
    -webkit-appearance: textfield
}
input[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none
}
input::-webkit-input-placeholder,
isindex::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
    color: #6d6d6d
}
input:-moz-placeholder {
    color: #6d6d6d
}
textarea {
    overflow: auto
}
@-webkit-keyframes point {
    50% {
        right: 1%
    }
}
@keyframes point {
    50% {
        right: 1%
    }
}
@-webkit-keyframes point2 {
    50% {
        left: 1%
    }
}
@keyframes point2 {
    50% {
        left: 1%
    }
}
a,
a code {
    text-decoration: none;
    font-weight: bold
}
p,
td,
li,
pre {
    font-size: 1.4em
}
li li {
    font-size: 1em
}
textarea,
input[type=text],
input[type=email] {
    background: url(img/bg_code.gif) #f2f2f2;
    font-size: 1.4em;
    padding: .3em .5em;
    width: 76.9%;
    border: 1px solid #666;
}
textarea:focus,
input[type=text]:focus {
    box-shadow: 0.15em 0.15em 0.3em rgba(0, 0, 0, 0.1) inset
}
footer button {
    color: #fff;
    font-size: 1.8em;
    font-weight: bold;
    background: #ff6100;
    background: -moz-linear-gradient(#ff6100, #da5300);
    background: -webkit-gradient(linear, 0 0, 0 100%, from(#ff6100), to(#da5300));
    background: -webkit-linear-gradient(#ff6100, #da5300);
    background: -o-linear-gradient(#ff6100, #da5300);
    background: linear-gradient(#4207C9, #7B51D9);
    text-shadow: 0.1em 0.1em 0 rgba(0, 0, 0, 0.3);
    padding: .25em .8em;
    box-shadow: 0 0 0.3em rgba(0, 0, 0, 0.4);
    cursor: pointer
}
footer button:hover {
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.2) inset;
    background: -moz-linear-gradient(#da5300, #ff6100);
    background: -webkit-gradient(linear, 0 0, 0 100%, from(#da5300), to(#ff6100));
    background: -webkit-linear-gradient(#da5300, #ff6100);
    background: -o-linear-gradient(#da5300, #ff6100);
    background: linear-gradient(#4207C9, #4207C9);
    text-shadow: none
}
@font-face {
    font-family: 'SecretTypewriterRegular';
    src: url("fonts/veteran_typewriter-webfont.eot");
    src: url("fonts/veteran_typewriter-webfont.eot?iefix") format("eot"), url("fonts/veteran_typewriter-webfont.woff") format("woff"), url("fonts/veteran_typewriter-webfont.ttf") format("truetype"), url("fonts/veteran_typewriter-webfont.svg#SecretTypewriterRegular") format("svg");
    font-weight: normal;
    font-style: normal
}
@font-face {
    font-family: 'LeagueGothic';
    src: url("fonts/league_gothic-webfont.eot");
    src: url("fonts/league_gothic-webfont.eot?iefix") format("eot"), url("fonts/league_gothic-webfont.woff") format("woff"), url("fonts/league_gothic-webfont.ttf") format("truetype"), url("fonts/league_gothic-webfont.svg#LeagueGothic") format("svg");
    font-weight: normal;
    font-style: normal
}
@font-face {
    font-family: 'icomoon';
    src: url("fonts/icomoon.eot");
    src: url("fonts/icomoon.eot?#iefix") format("embedded-opentype"), url("fonts/icomoon.woff") format("woff"), url("fonts/icomoon.ttf") format("truetype");
    font-weight: normal;
    font-style: normal
}
[data-icon]:before,
header.gen form:before,
header.gen .subNav a:before,
footer.gen .sec li a:before,
.content_cat article nav li a:before,
.content aside li a:before,
.content_cat .comp>p:before,
.content_blog article footer>a:before,
.content_blog article ul li:before,
.content_blog article blockquote:before,
.content_blog article blockquote:after,
.content_blog article .more a:before,
.content_blog nav a:before,
.ex a.off:before,
.ex a.st:before,
.content aside .apost h3 a:before,
.content aside section li.all a:before {
    font-family: 'icomoon';
    speak: none;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    position: absolute;
    left: 0
}
[data-icon]:before {
    content: attr(data-icon)
}
h1,
h1 a,
h2,
h2 a,
h3,
nav li a,
header.gen .meta a,
.comm address,
.comm address a,
.comm li .feat span a,
.content_contact .comm .wpcf7-response-output {
    font-family: "Montserrat", "Arial", "Helvetica", sans-serif;
    font-weight: normal;
    clear: both;
    line-height: 1;
    //text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.8)
}
header.gen nav h2 {
    font-family: "Open Sans", sans-serif;
    color: #393636;
    font-size: 18px !important;
}
code,
code *,
pre,
.content_cat .val li b,
.ex .liv {
    font-family: "Droid Sans Mono", "Courier New", monospace;
    font-weight: normal;
    -webkit-text-stroke: 1px transparent;
    font-size: .9em;
    text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.8)
}
body,
.wrapper {
    position: relative
}
.wrapper {
    overflow: hidden
}
textarea,
input[type=text],
footer button,
.content_cat .val .cd strong,
.ex a.off,
.ex a.st,
.content aside .apost li:first-child:before {
    //border-radius: .4em
}
.content_cat .comp ul,
.content_cat .val .cd strong b,
.content_cat .val li b,
.inpop a:first-of-type,
.content_cat article nav {
    border-radius: 1em
}
form *,
header.gen .subNav a,
footer.gen section,
footer.gen p.legal,
.content_cat article nav,
.content_cat .val .cd strong b,
.content_cat .val li,
.content_cat .val li b,
.content_blog article footer img,
.content_blog nav a,
.ex .liv,
.inpop a:first-of-type {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}
textarea:focus,
input[type=text]:focus,
.content p a:hover,
.content article li a:hover,
footer.gen a:hover,
.content_blog article footer>a:hover,
.content_blog article .more a:hover,
.content_blog nav a:hover,
.content .share li:hover {
    opacity: .7
}
header.gen {
    position: absolute;
    left: 0;
    top: 0;
    background: #fff;
    height: 6.7em;
    width: 100%;
    z-index: 1
}
header.gen h1,
header.gen form label,
header.gen form button,
footer.gen h2,
.content_cat>h1,
.content_cat>nav h2,
.content aside h2,
.content_blog nav h2 {
    display: none
}
header.gen #top {
    position: absolute;
    left: 4%;
    top: 1em;
    display: block;
    width: 15.8%
}
header.gen #top img {
    max-width: 100%;
    margin-left: -1.3em;
    height: auto
}
header.gen nav {
    position: absolute;
    left: 19.3%;
    bottom: 0;
    width: 76.7%
}
header.gen nav h2 {
    font-size: 2.8em;
    position: absolute;
    left: 0;
    top: -1.6em;
    text-shadow: none
}
.no-fontface header.gen nav h2 {
    font-size: 2.4em;
    top: -1.5em
}
header.gen nav>ul>li {
    position: relative;
    font-size: 2.4em;
    float: left;
    margin-left: 1%;
    background-color: #4207C9;
    //border-radius: .4em .4em 0 0;
    text-align: center
}
header.gen nav>ul>li:hover{
    background-color: #000;
    //border: 1px solid #000;
}
.no-fontface header.gen nav>ul>li {
    font-size: 2em;
    letter-spacing: -1px
}
header.gen nav .an {
    width: 11.2%
}
header.gen nav .bg {
    width: 12.9%
}
header.gen nav .bo {
    width: 8%
}
header.gen nav .co {
    width: 6.6%
}
header.gen nav .fo {
    width: 5.8%
}
header.gen nav .gr {
    width: 10%
}
header.gen nav .sh {
    width: 9%
}
header.gen nav .te {
    width: 5.5%
}
header.gen nav .tf {
    width: 11%
}
header.gen nav .ts {
    width: 11%
}
/* header.gen nav>ul>li:before {
    content: "";
    position: absolute;
    left: 0;
    bottom: -.25em;
    width: 100%;
    height: .25em;
    background: #ccc;
    //border-radius: 0 0 .5em .5em/0 0 .4em .4em;
    -moz-transition: all .15s;
    -webkit-transition: all .15s;
    -o-transition: all .15s;
    transition: all .15s
} */
header.gen nav>ul>li:hover:before {
    background: #ff6100
}
header.gen nav>ul>li:first-child {
    margin-left: 0
}
header.gen nav>ul>li a {
    display: block;
    padding: 8px;
    font-size: 16px !important;
    color: #fff;
}
.bd_animation header.gen .an:before,
.bd_background header.gen .bg:before,
.bd_border header.gen .bo:before,
.bd_color header.gen .co:before,
.bd_font header.gen .fo:before,
.bd_gradient header.gen .gr:before,
.bd_shadow header.gen .sh:before,
.bd_text header.gen .te:before,
.bd_transform header.gen .tf:before,
.bd_transition header.gen .ts:before {
    background: #ff6100 !important
}
header.gen form {
    position: absolute;
    right: 4%;
    top: .6em;
    width: 19%;
    z-index: 1
}
header.gen form input {
    font-size: 1.5em;
    color: #6d6d6d;
    background: rgba(255, 255, 255, 0.3);
    padding: .2em .5em .2em .6em;
    width: 100%;
    //border-radius: .5em;
    box-shadow: 0.15em 0.15em 0.2em rgba(0, 0, 0, 0.2) inset;
    position: relative;
    z-index: 1
}
header.gen form input.off {
    background-image: none
}
header.gen form input:focus {
    background: rgba(255, 255, 255, 0.6);
    box-shadow: 0.15em 0.15em 0.2em rgba(0, 0, 0, 0.2) inset
}
header.gen form ul {
    background: #f5f5f5;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 0 0.6em rgba(0, 0, 0, 0.16);
    border-radius: .7em;
    padding: .2em .8em;
    position: absolute;
    top: 2.65em !important;
    left: .2em !important;
    min-width: 15.6em;
    cursor: pointer
}
header.gen form li a {
    font-family: Arial, sans-serif;
    font-size: .9em;
    font-weight: normal !important;
    display: block;
    color: #000;
    border-top: 1px dotted #d2d2d2;
    padding: .5em 0
}
header.gen form li a:hover,
header.gen form li a .ui-state-hover {
    color: #929292;
    color: rgba(0, 0, 0, 0.4)
}
header.gen form li:first-child a {
    border: 0;
    margin: 0
}
header.gen form .ui-autocomplete {
    z-index: 3 !important;
    max-height: 41.3em;
    overflow: auto
}
header.gen form:before {
    content: "\e000";
    font-size: 3.8em;
    left: auto;
    right: -.5em;
    top: -.3em;
    color: #b5b5b5;
    color: rgba(0, 0, 0, 0.6);
    z-index: 2
}
header.gen .subNav {
    position: absolute;
    right: 24.5%;
    top: .55em;
    font-size: 1.4em;
    color: #fff
}
header.gen .subNav a {
    display: block;
    float: left;
    padding: .25em .6em .25em 34px;
    color: #fff;
    font-weight: normal;
    border-radius: .6em;
    background: #9abfd3;
    background: rgba(65, 167, 211, 0.4);
    line-height: 1.2;
    position: relative
}
header.gen .subNav a:hover {
    background-color: #41a7d3
}
header.gen .subNav a:before {
    left: .4em;
    top: 50%;
    content: "\e001";
    font-size: 1.33333em;
    margin-top: -.55em
}
.content {
    padding: 11.9em 4% 4em;
    position: relative
}
header.gen .subNav a,
.content a,
.content .share li,
footer.gen a,
:before {
    -moz-transition: all .3s;
    -webkit-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s
}
.content h1 {
    font-size: 5em;
    color: #4207C9;
}
.content h1 a {
    color: #ff6100
}
.content section h2 {
    color: #000;
    margin: 1.4em 0 .5em -.1em;
    padding-left: .1em;
    font-size: 3.4em;
    clear: both;
    background: url(img/line.png) 0 100% no-repeat;
    width: 33%;
    line-height: 1.1
}
.no-fontface .content section h2 {
    font-size: 2.4em;
    letter-spacing: -1px;
    line-height: 1.2
}
.content p code,
.val li code,
.content pre,
.content_blog li code,
.content_blog figcaption code {
    //background: url(img/bg_code.gif) #efefef;
    padding: 0 .3em;
    white-space: nowrap;
    overflow: auto
}
.content pre,
.content pre code {
    display: block;
    padding: .2em .5em;
    white-space: pre;
    font-size: 1.3em
}
.content pre code {
    padding: 0;
    font-size: 1em;
    background: none
}
.content p,
.content pre {
    margin: 1.4em 0;
    clear: both;
    max-width: 34em
}
.content pre {
    max-width: 35.3em
}
.content li {
    max-width: 34em
}
.content blockquote {
    max-width: 47em;
    font-size: 1.2em
}
.content p a,
.content article li a {
    color: #4207C9;
    font-weight: bold;
    position: relative;
    border-bottom: 1px dotted #4207C9;
}
.content p a:hover,
.content article li a:hover {
    border-bottom-style: solid
}
.content_blog_start p a,
.content_blog_start article li a,
.content_blog_start article blockquote p {
    color: #000 !important
}
.content_blog_start article blockquote {
    background-image: url(img/quote.png) !important
}
.content_blog_start article blockquote:before {
    background-image: url(img/quote2.png) !important
}
.content_blog_start p a,
.content_blog_start article li a {
    border-color: #000
}
.content a.c:before {
    bottom: -.1em
}
footer.gen {
    background: url(img/bg_footer.gif) #1e1e1e;
    padding: 1.5em 4% 0;
    font-size: .9em;
    position: relative
}
footer.gen a {
    font-weight: normal
}
footer.gen .sec {
    float: left;
    width: 35%;
    vertical-align: top;
    margin: 0 1em 1.3em 0
}
footer.gen .sec:nth-of-type(4) {
    margin-right: 0
}
footer.gen .sec li {
    margin-bottom: .4em;
    position: relative
}
footer.gen .sec li a {
    padding-left: 26px
}
footer.gen .sec li a:before {
    top: 50%;
    content: "\e001";
    font-size: 1.4em;
    margin-top: -.5em;
    color: #fff
}
footer.gen .sec li:first-child+li a:before {
    font-size: 1.3em;
    content: "\f0e0"
}
footer.gen h3 {
    font-size: 2.2em;
    margin-bottom: .25em;
    color: #fff;
    text-shadow: none
}
.no-fontface footer.gen h3 {
    font-size: 2em;
    letter-spacing: -1px
}
footer.gen p {
    clear: both;
    color: #c4c4c4
}
footer.gen p *,
footer.gen a {
    color: #c4c4c4;
    position: relative
}
footer.gen a {
    border-bottom-color: #888
}
footer.gen a:hover:before {
    border-bottom-style: solid
}
footer.gen p b {
    padding-left: 16px;
    background: url(img/flag_at.gif) 0 50% no-repeat;
    font-weight: normal
}
footer.gen .sec:nth-child(2) a:before,
footer.gen .sec:nth-child(3) a:before {
    border: 0
}
footer.gen .sec:nth-child(4) a {
    display: inline-block
}
footer.gen .sec:nth-child(4) a:before {
    bottom: .2em
}
footer.gen p.legal {
    border-top: 2px dotted #606060;
    padding: 1em 120px 1.2em 0;
    position: relative;
    font-style: italic;
    line-height: 1.3;
    clear: both
}
footer.gen p.legal a.logo {
    position: absolute;
    right: 0;
    top: 50%;
    margin-top: -22px
}
footer.gen p.legal a.logo:hover {
    opacity: 1
}
footer.gen p.legal a.logo:before {
    border: 0
}
footer.gen p.legal a.logo img {
    width: 106px;
    height: 47px
}
.content_cat {
    padding-top: 2.7em
}
.content_cat>nav {
    position: absolute;
    left: 0;
    top: 6.7em;
    width: 100%;
    height: 4.3em;
    //background: url(img/bg_subnav.gif) #dadada
}
.content_cat>nav ul {
    position: absolute;
    left: 19.3%;
    //bottom: 0;
    float: left;
    margin-top: 15px;
}
.content_cat>nav li {
    position: relative;
    float: left;
    font-size: 2.3em;
    background: #f2f2f2;
    background: rgba(255, 255, 255, 0.5);
    margin-left: .4em;
    //border-radius: .5em .5em 0 0
}
.no-fontface .content_cat>nav li {
    font-size: 1.9em;
    letter-spacing: -1px
}
.content_cat>nav li:first-child {
    margin: 0
}
.content_cat>nav li:before {
    content: "";
    position: absolute;
    left: 0;
    bottom: -.27em;
    width: 100%;
    height: .27em;
    //background: #dbdbdb;
   //border-radius: 0 0 .5em .5em/0 0 .4em .4em
}
.content_cat>nav li:hover:before {
    //background: #ff6100
}
.content_cat>nav li a {
    display: block;
    padding: .15em .35em .05em;
    min-width: 1.6em;
    text-align: center;
    font-size: 15px;
}
.content_cat>nav li a:hover{
	color: #4207C9;
}
.content_cat_gradient>nav li:nth-child(2):after,
.content_cat_gradient>nav li:nth-child(4):after {
    top: -.7em
}
.content_cat_gradient>nav li:nth-child(4):after {
    -moz-transform: rotate(5deg);
    -webkit-transform: rotate(5deg);
    -o-transform: rotate(5deg);
    -ms-transform: rotate(5deg);
    transform: rotate(5deg)
}
.content_cat article {
    position: relative;
    clear: both;
    margin-bottom: 9em
}
.content_cat article:last-of-type {
    margin: 0
}
.content_cat article h1 {
    position: relative;
    font-family: "SecretTypewriterRegular", "Arial Narrow", sans-serif;
    font-size: 5em;
    color: #000;
    margin: 0 0 .25em -.05em;
    padding-left: .05em;
    background: url(img/line.png) 0 100% repeat-x
}
.content_cat article p {
    max-width: none;
    width: 69%
}
.content_cat article p.desc {
    position: relative;
    font-size: 1.7em;
    margin: 0;
    line-height: 1.4
}
.content_cat article nav,
.content aside section {
    position: absolute;
    right: 0;
    top: 5em;
    width: 20%;
    min-width: 19em;
    //background: url(img/bg_articlenav.gif) #f1f1f1;
    padding: .8em 1.2em .9em;
    border-radius: 0 0 1em 1em;
    z-index: 0
}
.content_cat article nav h3,
.content aside h3 {
    font-size: 2.5em;
    margin-bottom: .2em
}
.no-fontface .content_cat article nav h3,
.no-fontface .content aside h3 {
    font-size: 1.8em;
    letter-spacing: -1px
}
.content_cat article nav li,
.content aside li {
    margin-top: .3em;
    position: relative
}
.content_cat article nav li a,
.content aside li a {
    font-family: Arial, sans-serif;
    font-size: .92em;
    white-space: normal;
    padding: 0 0 0 11px;
    display: block;
    border-radius: 0;
    color: #6b6b6b;
    line-height: 1.4 !important
}
.content_cat article nav li a:before,
.content aside li a:before {
    content: "\e005";
    top: .8em;
    font-size: 6px
}
.content_cat article nav li a:hover,
.content aside li a:hover {
    background-color: transparent;
    opacity: .6
}
.content_cat article nav li a,
.content aside li a {
    border: 0
}
.content_cat article nav li.top a,
.content aside section li.all a {
    padding-left: 14px;
    margin-left: -.2em;
    position: relative
}
.content_cat article nav li.top a:before {
    content: "\e00b";
    top: 50%;
    font-size: 11px;
    margin-top: -.5em
}
.content_cat article nav li.top a:hover:before {
    top: 0%;
    opacity: 0
}
.content_cat article nav ul ul {
    margin: 0 0 .4em .7em
}
.content_cat article nav li li {
    margin-top: .3em
}
.content_cat article nav li li:first-child {
    margin-top: .2em
}
.content_cat article nav li li a {
    font-size: .78em;
    font-weight: normal;
    padding-left: 10px
}
.content_cat .comp h2 {
    margin-top: 1em
}
.content_cat .comp ul {
    margin-bottom: 1.3em;
    width: 36.5%;
    min-width: 31em;
    overflow: hidden;
    background: url(img/bg_code.gif) #ededed
}
.content_cat_border .comp ul {
    min-width: 35em
}
.content_cat .comp li {
    padding: .3em .6em;
    position: relative;
    overflow: hidden;
    max-width: none;
    height: 1%
}
.no-opacity .content_cat .comp>ul>li {
    border-top: 2px solid #fff
}
.no-opacity .content_cat .comp>ul>li:first-child {
    border: 0
}
.content_cat .comp li:nth-of-type(even) {
    background: #e4e4e4;
    background: rgba(0, 0, 0, 0.07)
}
.content_cat .comp li:last-child {
    border-radius: 0 0 .8em .8em
}
.content_cat .comp li code {
    font-size: 1.1em;
    white-space: nowrap
}
.content_cat .comp li span {
    position: absolute;
    right: .7em;
    top: .15em
}
.content_cat .comp li b {
    display: inline-block;
    height: 1em;
    width: .8em;
    text-indent: -9999px;
    margin-left: -.05em;
    -moz-transform: skew(-10deg);
    -webkit-transform: skew(-10deg);
    -o-transform: skew(-10deg);
    -ms-transform: skew(-10deg);
    transform: skew(-10deg);
    box-shadow: .1em .1em 0 #fff;
    border-radius: .15em;
    margin-top: .4em
}
.content .comp .moz {
    background: #ff8800 !important
}
.content .comp .mozx {
    background: #e05e00 !important
}
.content .comp .web {
    background: #b8a900 !important
}
.content .comp .webx {
    background: #786e00 !important
}
.content .comp .chr {
    background: #39c900 !important
}
.content .comp .ie {
    background: #569eff !important
}
.content .comp .iex {
    background: #3a6bac !important
}
.content .comp .opr {
    background: #f00000 !important
}
.content .comp .oprx {
    background: #b80000 !important
}
.content .comp .mob {
    background: #b3b3b3 !important;
    position: relative;
    overflow: hidden;
    vertical-align: top
}
.content .comp .mob i {
    position: relative;
    font-style: normal;
    z-index: 2
}
.content .comp .mob:before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 200%;
    z-index: 1;
    -webkit-transform: rotate(40deg);
    -ms-transform: rotate(40deg);
    transform: rotate(40deg);
    -webkit-transform-origin: 0 100%;
    -moz-transform-origin: 0 100%;
    -ms-transform-origin: 0 100%;
    -o-transform-origin: 0 100%;
    transform-origin: 0 100%
}
.content .comp .ios:before {
    background: #00a3e0
}
.content .comp .and:before {
    background: #69e000
}
.content .comp .opm:before {
    background: #ff3838
}
.content .comp .bbr:before {
    background: #555
}
.content .comp .iem:before {
    background: #00ab75
}
.content .leg .mob:before {
    width: 1.4em;
    left: auto;
    right: .3em
}
.no-csstransforms .content .comp .mob:before {
    height: 30%
}
.no-csstransforms .content .leg .mob:before {
    width: 100%;
    left: 0;
    bottom: 0
}
.content_cat .comp ul ul {
    border-radius: 0;
    border-top: 1px solid #d8d8d8;
    margin: .1em -.5em;
    overflow: hidden;
    float: none;
    clear: both;
    background: none
}
.content_cat .comp li:nth-child(even) ul {
    border-top: 1px solid #bdbdbd
}
.content_cat .comp li li {
    background: none !important;
    padding: 0 1.2em;
    font-size: .8em
}
.no-opacity .content_cat .comp li li {
    border-top: 1px dotted #cccccc
}
.content_cat .comp li li code {
    color: #7c7c7c
}
.content_cat .comp li li:first-child {
    border-top: 1px solid #fff;
    padding-top: .2em
}
.content_cat .comp li:nth-child(even) li:first-child {
    border-top: 1px solid #f4f4f4;
    padding-top: .2em
}
.content_cat .comp>p {
    font-size: 1.2em;
    margin-bottom: 1.1em;
    padding-left: 2em;
    width: 67%;
    line-height: 1.4;
    position: relative
}
.content_cat .comp>p+p:before {
    content: "";
    display: none
}
.content_cat .comp>p:before {
    content: "\e009";
    position: absolute;
    top: 50%;
    margin-top: -.5em;
    font-size: 2em;
    color: #04a800
}
.content_cat .comp .fa:before {
    font-size: 36px;
    left: -.2em;
    content: "\e00a";
    color: #ff0808
}
.content_cat .comp .fa+p {
    background: none;
    padding: 0;
    font-size: 1.1em;
    margin-top: -.3em;
    max-width: none
}
.content_cat .comp .leg {
    overflow: hidden;
    cursor: default;
    display: inline-block
}
.content_cat .comp .leg ul {
    margin-bottom: .4em;
    width: auto !important;
    background: none;
    max-width: none
}
.content_cat .comp .leg li {
    color: #fff;
    font-size: .9em;
    float: left;
    margin-right: 1px;
    overflow: hidden;
    padding: .1em .4em !important
}
.content_cat .comp .leg li:first-child {
    border-radius: .5em 0 0 .5em
}
.content_cat .comp .leg li:last-child {
    border-radius: 0 .5em .5em 0
}
.content_cat .comp .leg p {
    font-size: .9em;
    opacity: .6;
    margin: 0;
    max-width: none;
    width: 100%
}
.content_cat .val p {
    margin: 0
}
.content_cat .val .vbl {
    margin-top: 2.4em;
    padding-top: 2.5em;
    border-top: 1px dotted #cbcbcb;
    position: relative
}
.content_cat .val div.vbl:first-of-type {
    margin: 0;
    padding: 0;
    border: 0
}
.content_cat .val .vbl {
    margin-top: 2.4em;
    padding-top: 2.5em;
    border-top: 1px dotted #cbcbcb;
    position: relative
}
.content_cat h3 {
    margin-bottom: .6em;
    font-size: 2.4em
}
.content_cat .val .vbl p.desc {
    font-size: 1.4em;
    margin: -.4em 0 1.3em;
    width: 64%
}
.content_cat .val .cd {
    width: 72%;
    max-width: none
}
.content_cat .val pre.cd {
    padding: 0;
    margin: 0;
    font-size: 1.4em;
    overflow: visible;
    width: auto;
    display: inline-block;
    max-width: none !important;
    border-radius: .7em .7em .7em 0
}
.content_cat .vbl_nhl .cd+.cd {
    margin-top: .2em
}
.content_cat .vbl_mu div+.cd {
    margin-top: 1.5em
}
.content_cat .val .cd code {
    padding: .3em .8em .4em;
    font-size: 1em;
    display: inline-block;
    line-height: 2.2;
    margin: 0;
    white-space: normal;
    overflow: visible;
    //background: url(img/bg_code.gif) #ededed;
    border-radius: .7em .7em .7em 0
}
.content_cat .val pre.cd code {
    line-height: 2.4;
    padding: 0 1em 0 .8em;
    white-space: pre
}
.content_cat .vbl_nhl .cd code {
    border-radius: .7em
}
.content_cat .vbl_mu pre.cd code {
    line-height: 1.8;
    padding: .4em 1em .5em .8em
}
.content_cat .val .cd strong {
    background: #4207C9;
    padding: .1em .5em .2em;
    position: relative;
    min-width: 2em;
    text-align: center;
    display: inline-block;
    line-height: 1.4;
    text-shadow: 0.1em 0.1em 0 rgba(0, 0, 0, 0.5);
    color: #fff
}
.content_cat .val .cd strong.min {
    padding: 0 .6em
}
.content_cat .val .cd strong b {
    position: absolute;
    left: 1em;
    top: -1.4em;
    font-size: .8em;
    color: #fff;
    background: #000;
    width: 1.5em;
    height: 1.5em;
    text-align: center;
    line-height: 1;
    text-shadow: none;
    padding-top: .25em
}
.content_cat .val .cd strong b:before {
    content: "";
    left: 52%;
    bottom: -.275em;
    margin-left: -.5em;
    border: .5em solid transparent;
    border-bottom-width: 0;
    border-top-color: #000;
    position: absolute;
    display: inline-block
}
.content_cat .val pre.cd strong b:before {
    top: 1.3em
}
.content_cat .val .cd.off strong {
    background-color: transparent;
    padding: 0;
    min-width: 0;
    text-shadow: none;
    color: #000
}
.content_cat .val .cd strong strong {
    font-size: 1em;
    background: #888;
    padding: 0 .3em;
    margin-top: .1em
}
.content_cat .val .sw {
    //background: url(img/switch_hi1.png) 92% 50% no-repeat #efefef;
    //background: url(img/switch_hi1.png) 92% 50% no-repeat, url(img/bg_code.gif) #efefef;
    font-size: 1em;
    font-weight: normal;
    padding: .1em 2.9em .1em 1em;
    margin-top: .1em;
    display: inline-block;
    border-radius: 0 0 .6em .6em
}
.content_cat .val .sw.on {
    //background: url(img/switch_hi0.png) 92% 50% no-repeat #efefef;
    //background: url(img/switch_hi0.png) 92% 50% no-repeat, url(img/bg_code.gif) #ededed
}
.content_cat .val .cd.off strong b {
    display: none
}
.content_cat .val ul {
    overflow: hidden;
    margin-top: 1.6em;
    clear: both;
    max-width: 64%;
    display: inline-block
}
.content_cat .val li {
    max-width: none;
    position: relative;
    margin-top: .5em;
    padding: .5em 0 0 1.9em;
    border-top: 1px dotted #eaeaea
}
.content_cat .val li:first-child {
    margin-top: 0;
    padding-top: 0;
    border: 0
}
.content_cat .val li:last-child {
    padding-bottom: .2em
}
.content_cat .val li:first-child b,
.content_cat .val .cond li b {
    top: 0
}
.content_cat .val .cond li {
    margin: 0 1.2em .9em 0;
    padding: 0 0 0 1.9em;
    float: left;
    white-space: no-wrap;
    border: 0
}
.content_cat .val li b {
    position: absolute;
    left: 0;
    top: .5em;
    background: #000;
    font-size: 1em;
    color: #fff;
    width: 1.5em;
    height: 1.5em;
    line-height: .9;
    text-align: center;
    padding-top: .25em;
    text-shadow: none
}
.content_cat .val li.o b {
    background: #8c8c8c
}
.content_cat .val li b.sm {
    font-size: .75em;
    display: inline-block;
    float: none;
    position: relative;
    top: -.12em;
    margin: 0 .15em;
    background: #000 !important
}
.content_cat .val li strong {
    text-transform: uppercase
}
.content_cat .val li strong.t {
    text-transform: none
}
.content_cat .val li i {
    color: #808080;
    font-size: .9em;
    font-weight: bold;
    margin-right: .3em
}
.content_cat .val p+ul {
    margin-top: 0
}
.content_cat .note h2 {
    margin-bottom: .4em
}
.content_cat .note h2+p {
    margin: 0
}
.content_cat .val .ex {
    position: absolute;
    right: 0;
    top: 2.5em;
    text-align: right
}
.content_cat .val .ex img {
    display: block
}
.content_cat .val .ex br {
    display: none
}
.content_cat .val .ex br+img {
    margin-top: 1.3em
}
.content_cat .val .vbl:first-of-type .ex {
    top: 0
}
.ex img.auto {
    width: auto !important;
    height: auto !important
}
.content_cat #borderradius .ex img {
    width: 102px;
    height: 102px
}
.content_cat #background .ex img,
.content_cat #backgroundsize .ex img {
    width: 119px;
    height: 119px
}
.content_cat #lineargradient .ex img {
    width: 111px;
    height: 111px
}
.content_cat_color .ex img {
    width: 131px;
    height: 93px
}
#opacity .ex img {
    width: 101px;
    height: 101px
}
.content_cat #transition .ex img {
    width: 117px;
    height: 117px
}
#transformorigin .val_ex .vbl1 {
    min-height: 15em
}
#textoverflow .ex img {
    width: 141px;
    height: 119px
}
#wordwrap .ex img {
    width: 140px
}
.content_cat_sing {
    padding-top: 0 !important
}
.content_cat_sing h1 {
    margin-top: 0
}
.comm form {
    width: 72%
}
.comm form div {
    margin-top: .8em;
    padding-top: .8em;
    border-top: 1px dotted #eaeaea;
    position: relative;
    width: 100%;
    clear: both
}
.comm form div:first-child {
    margin: 0;
    padding: 0;
    border: 0
}
.comm form div em {
    display: block;
    font-size: 1em;
    color: #808080;
    margin: .2em 0 -.3em 23.1%;
    line-height: 1.1;
    overflow: visible
}
.comm form label {
    font-size: 1.6em;
    font-weight: bold;
    width: 23.1%;
    float: left;
    vertical-align: top;
    margin-top: .3em;
    position: relative;
    color: #4c4c4c
}
.comm form label b,
.comm form footer b {
    display: inline-block;
    width: 10px;
    height: 10px;
    font-size: 16px;
    color: #fff;
    line-height: 1.1;
    text-align: center;
    font-weight: normal;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
    background: #4207C9;
    vertical-align: middle;
    position: relative;
    top: -.1em
}
.comm form footer {
    margin: 2.2em 0 0 23.1%
}
.comm form footer strong {
    font-size: 1.4em;
    color: #4207C9;
    margin-left: 1.5em
}
#disqus_thread {
    width: 72%;
    margin-top: 7em
}
.content_blog {
    position: relative;
    margin-top: -.7em
}
.content_blog>h1 {
    display: none
}
.content_blog article {
    position: relative;
    padding: 0 0 3em 16.6%;
    width: 55.4%;
    border-bottom: 2px dotted #ededed;
    margin-bottom: 3.7em
}
.content_blog article.sticky {
    padding: 1em 2% 1.1em 18.1%;
    width: 53.4%;
    margin: 0 3% 5em -1.5%;
    border-radius: 1.5em;
    border: 0
}
.content_blog article.sticky h2 a {
    color: #666;
    color: rgba(0, 0, 0, 0.6)
    font-size: 34px;
}
.content_blog article.sticky footer {
    left: 2.1%;
    top: 5.9em;
    color: transparent
}
.content_blog article.sticky footer img {
    display: block
}
.content_blog article.sticky footer>a,
.content_blog article.sticky footer time {
    display: none
}
.content_blog article.sticky footer img {
    border-color: #666;
    border-color: rgba(0, 0, 0, 0.6)
}
.content_blog article.sticky footer i {
    display: none
}
.content_blog article.sticky p:last-child {
    margin-bottom: 0
}
.content_blog_sing {
    min-height: 90em
}
.content_blog_sing article {
    border: 0;
    margin-bottom: 0;
    padding-bottom: 0
}
.content_blog article h2 {
    font-size: 4em;
    line-height: .9;
    color: #4207C9 !important;
}
.no-fontface .content_blog article h2 {
    font-size: 3em;
    letter-spacing: -1px
}
.content_blog article h2 a {
    color: #4207C9;
    line-height: .9
    font-size: 28px !important;
}
.content_blog article p.nb {
    margin-bottom: 0
}
.content_blog article p.nb+pre {
    margin-top: 0
}
.content_blog article footer {
    position: absolute;
    top: 4.9em;
    left: 0;
    width: 20%;
    font-size: 1.2em;
    font-style: normal;
    color: #8e8e8e;
    line-height: 1.5
}
.content_blog article footer * {
    color: #8e8e8e
}
.content_blog article footer a {
    font-weight: normal
}
.content_blog article footer>a {
    display: block
}
.content_blog article footer i {
    font-style: normal
}
.content_blog article footer address {
    display: inline;
    font-style: normal
}
.content_blog article footer img {
    display: block;
    max-width: 62%;
    border: .5em solid #ff6100;
    border-radius: .7em;
    margin-bottom: .4em
}
.content_blog_start article footer img {
    display: none
}
.content_blog_sing article footer img {
    max-width: 75%;
    border-width: .6em
}
.content_blog article {
    width: 50% !important;
    /*min-height: 1700px;*/
}
.content_blog article footer>a {
    display: block;
    color: #ff6100;
    margin-top: .7em;
    font-weight: bold;
    line-height: 1.1;
    padding: .2em 0 .2em 20px;
    position: relative
}
.content_blog article footer>a:before {
    content: "\e003";
    top: .3rem;
    font-size: 1.1em
}
.content_blog_start article footer>a {
    color: #000
}
.content_blog article footer time {
    display: block;
    font-weight: bold
}
.content_blog article footer .dsq-postid {
    color: #FF6100
}
.content_blog article h3 {
    font-size: 2.8em;
    margin: 1em 0 -.4em
}
.content_blog article ul li {
    margin-left: -1em;
    padding-left: 1em;
    position: relative
}
.content_blog article ul li:before {
    content: "\e005";
    top: 1.1em;
    font-size: .4em
}
.content_blog article blockquote {
    padding: 0 2.5em;
    position: relative;
    margin: 1.68em 0 1.68em -2.5em !important;
    max-width: 39em;
    font-style: italic;
    color: #ff6100
}
.content_blog article blockquote p {
    margin: 0
}
.content_blog article blockquote b {
    position: absolute;
    left: 2.6em;
    bottom: -1.6em;
    font-size: .7em;
    color: #666;
    display: block;
    font-weight: normal
}
.content_blog article blockquote.att {
    margin-bottom: 3.1em !important
}
.content_blog article blockquote:before,
.content_blog article blockquote:after {
    content: "\e00c";
    top: .2em;
    font-size: 1.4em;
    font-style: normal
}
.content_blog article blockquote:after {
    content: "\e00d";
    left: auto;
    top: auto;
    right: 0;
    bottom: .3em
}
.content_blog article figure {
    margin: 2em 0
}
.content_blog article figure img {
    max-width: 100%;
    height: auto;
    box-shadow: 0 0 1.2em rgba(0, 0, 0, 0.4)
}
.content_blog article figure.no img {
    box-shadow: none
}
.content_blog article figure pre {
    margin-bottom: 0
}
.content_blog figcaption {
    font-size: 1.2em;
    margin-top: .4em;
    color: #666;
    font-style: italic
}
.content_blog p>code {
    white-space: normal
}
.content_blog article .more a {
    font-size: 1.4em;
    padding-right: 1em;
    position: relative
}
.content_blog article .more a:before {
    content: "\e004";
    left: auto;
    right: 0;
    top: 50%;
    font-size: 0.73333em;
    margin-top: -.45em
}
.content_blog nav {
    width: 72%;
    overflow: hidden
}
.content_blog nav a {
    font-size: 1.5em;
    color: #4207C9;
    padding-left: 19px;
    width: 50%;
    float: left;
    position: relative
}
.content_blog nav a:before {
    content: "\e006";
    top: 50%;
    font-size: 1em;
    margin-top: -.5em
}
.content_blog nav b a {
    padding: 0 19px 0 0;
    text-align: right;
    float: right
}
.content_blog nav b a:before {
    content: "\e004";
    right: 0;
    left: auto
}
.content_blog_all>h1 {
    display: block;
    padding-left: 16.6%;
    color: #000;
    margin-bottom: .7em
}
.content_blog_all .post-635 {
    display: none
}
.content_blog article.quick footer>a {
    display: none
}
.content_blog article.quick footer img {
    background: #ffefe2
}
.content_blog article h3+ul {
    margin-top: 1.8em
}
.content_contact {
    min-height: 60em
}
.content_contact .in {
    padding-left: 16.6%;
    width: 54.5%;
    position: relative
}
.content_contact h1+p {
    margin-top: .8em
}
.content_contact h2 {
    font-size: 2.8em;
    margin: 1em 0 -.3em
}
.content_contact img {
    max-width: 17%;
    position: absolute;
    left: 0;
    top: 5em;
    border: .5em solid #ff6100;
    border-radius: .5em
}
.content_contact .comm {
    width: auto;
    margin-top: 2em
}
.content_contact .comm form div:first-child+div {
    margin: 0;
    padding: 0;
    border: 0
}
.content_contact .comm form div br {
    display: none
}
.content_contact .comm form footer {
    margin-top: 1.9em
}
.content_contact .comm .wpcf7-response-output {
    margin: 1.2em 0 0;
    font-size: 4em;
    border: 0;
    padding: 0
}
.content_contact .comm .wpcf7-validation-errors {
    color: #c70000
}
.content_contact .comm .wpcf7-mail-sent-ok {
    color: #007100
}
.content_contact .comm .wpcf7-not-valid-tip {
    position: relative;
    top: 0;
    left: 0;
    background: transparent;
    display: block;
    font-size: 1.2em;
    color: #c70000;
    font-weight: bold;
    margin: -1.6em 0 0 24.4%;
    padding: 0 0 .35em 0;
    border: 0;
    width: auto
}
.content_contact .comm form div:nth-of-type(5) .wpcf7-not-valid-tip {
    margin-top: -1.9em
}
.content .share {
    width: 72%;
    margin-top: 3em;
    overflow: hidden
}
.content_contact .share,
.content_aboutme .share {
    display: none
}
.content_blog .share {
    width: 55.4%;
    margin: 3em 0 -.6em 16.6%
}
.content .share li {
    background-repeat: no-repeat !important;
    display: inline-block;
    margin: 0 2em .6em 0
}
.content .share li:last-child {
    margin: 0
}
.content .share li a {
    display: block;
    background-repeat: no-repeat !important;
    padding-left: 37px;
    height: 30px;
    line-height: 1.9
}
.content .share li:first-child a {
    background-image: url(img/share_twitter.png)
}
.content .share li:first-child+li a {
    background-image: url(img/share_faceb.png)
}
.content .share li:first-child+li+li a {
    background-image: url(img/share_delic.png)
}
.content .share li:first-child+li+li+li a {
    background-image: url(img/share_stumple.png)
}
.content_404 {
    position: relative;
    padding-top: 8em;
    min-height: 60em
}
.content_404 h1 {
    font-size: 15em !important;
    font-family: SecretTypewriterRegular;
    color: #ebebeb;
    -moz-transform: rotate(-30deg);
    -webkit-transform: rotate(-30deg);
    -o-transform: rotate(-30deg);
    -ms-transform: rotate(-30deg);
    transform: rotate(-30deg);
    -moz-transform-origin: 100% 0%;
    -webkit-transform-origin: 100% 0%;
    -o-transform-origin: 100% 0%;
    -ms-transform-origin: 100% 0%;
    transform-origin: 100% 0%;
    position: absolute;
    left: 50%;
    top: 0;
    margin-left: -2.6em;
    z-index: 0
}
.no-opacity .content_404 h1 {
    position: static;
    margin: 0 0 -.16em 0
}
.content_404 p {
    z-index: 1;
    position: relative;
    max-width: none
}
.content_404 p:first-of-type {
    font-size: 1.7em;
    font-weight: bold;
    margin-top: .8em
}
.content_404 p+p {
    max-width: 40em
}
.inpop {
    font-size: 1.2em;
    display: none;
    position: fixed;
    width: 28em;
    background: #fff;
    z-index: 1;
    left: 50%;
    top: 50%;
    margin: -6em 0 0 -14em;
    color: #000;
    padding: .7em 1em;
    opacity: .95;
    line-height: 1.4;
    box-shadow: 0 0 1.5em rgba(0, 0, 0, 0.6);
    border-radius: .5em
}
.inpop a {
    color: #000;
    font-weight: bold;
    text-decoration: underline
}
.inpop a:first-of-type {
    position: absolute;
    top: -.5em;
    right: -.5em;
    color: #fff;
    background: #ff6100;
    width: 1.15em;
    height: 1.15em;
    text-align: center;
    font-size: 2em;
    line-height: 1;
    padding-bottom: .15em;
    text-shadow: 1px 1px rgba(0, 0, 0, 0.5);
    text-decoration: none
}
.ex a.off,
.ex a.st {
    font-size: 1.2em;
    color: #fff;
    position: absolute;
    right: -.6em;
    white-space: nowrap;
    padding: .3em 1.6em .3em .5em;
    background: #b3b3b3
}
.ex a.off:before,
.ex a.st:before {
    left: auto;
    right: 4%;
    top: 50%;
    content: "\e008";
    font-size: .69230769230769em;
    margin-top: -.5em
}
.ex a.off.on,
.ex a.st.on {
    padding: .3em .5em .3em 1.6em
}
.ex a.off.on:before,
.ex a.st.on:before {
    content: "\e007";
    right: auto;
    left: 4%
}
.ex a.off.on:hover,
.ex a.st.on:hover {
    background-color: #808080
}
.ex a.off.on:hover:before,
.ex a.st.on:hover:before {
    -webkit-animation: point2 0.8s infinite;
    animation: point2 0.8s infinite
}
.ex a.off:hover:before,
.ex a.st:hover:before {
    -webkit-animation: point 0.8s infinite;
    animation: point 0.8s infinite
}
.ex .liv {
    display: inline-block;
    font-style: italic;
    color: #fff;
    background: #cd0000;
    text-align: center;
    padding-top: 1em;
    font-size: 1.1em;
    text-shadow: 1px 1px #000;
    position: relative
}
.ex div {
    width: auto
}
.ex div:nth-of-type(2) a {
    background: #fff;
    color: #000;
    box-shadow: 0 0 0.5em rgba(0, 0, 0, 0.6);
    width: 1.3em;
    height: 1.3em;
    line-height: 1.2;
    display: inline-block;
    font-size: .9em;
    margin-left: .5em;
    font-style: normal;
    border-radius: 1.5em;
    text-shadow: none
}
.ex p {
    display: none
}
.content aside {
    position: absolute;
    right: 0;
    top: 0;
    width: 25%
}
.content aside section {
    position: static;
    margin-bottom: 2.4em;
    padding-top: 1em;
    width: auto;
    min-width: 0;
    border-radius: 1em
}
.content aside section h3 {
    color: #000;
}
.content aside section li {
    margin-top: .5em
}
.content aside section li.all a{
    color: #4207C9;
}
.content aside section li a {
    background-position: 0 .4em;
    line-height: 1.2 !important
}
.content aside .arss h3 {
    background: url(img/rss.png) 1.4em 50% no-repeat
}
.no-fontface .content aside .arss h3 {
    background: url(img/rss.png) 2.3em 50% no-repeat
}
.content aside .apost h3 {
    position: relative
}
.content aside .apost h3 a {
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
    width: 0.66667em;
    height: 0.66667em;
    -webkit-border-radius: 0.12em;
    -moz-border-radius: 0.12em;
    -ms-border-radius: 0.12em;
    -o-border-radius: 0.12em;
    border-radius: 0.12em;
    background: #e3712e;
    background: -webkit-linear-gradient(-45deg, #e3712e, #f99b39, #e3712e);
    background: -moz-linear-gradient(-45deg, #e3712e, #f99b39, #e3712e);
    background: -o-linear-gradient(-45deg, #e3712e, #f99b39, #e3712e);
    background: linear-gradient(-45deg, #e3712e, #f99b39, #e3712e);
    display: block;
    position: absolute;
    left: 4.6em;
    top: 50%;
    margin-top: -9px
    margin-left: 90px;
    display: none;
}
.content aside .apost h3 a:before {
    text-indent: 0;
    content: "\e002";
    top: 0;
    font-size: 0.44444em;
    text-align: center;
    line-height: 1.6em;
    width: 100%;
    height: 100%;
    color: #fff
}
.content aside .apost li:first-child {
    padding-right: 1.5em
}
.content aside .apost li:first-child:before {
    content: "New!";
    background: #4207C9;
    padding: .1em .4em;
    color: #fff !important;
    font-size: .8em;
    position: absolute;
    right: -1.6em;
    top: -.2em;
    -moz-transform: rotate(-5deg);
    -webkit-transform: rotate(-5deg);
    -o-transform: rotate(-5deg);
    -ms-transform: rotate(-5deg);
    -webkit-transform: rotate(-5deg);
    font-weight: bold
}
.content aside section li.all a {
    background: none
}
.content aside section li.all a:before {
    content: "\e004";
    left: 0;
    top: 50%;
    font-size: 11px;
    margin-top: -.45em
}
.content aside section li i {
    font-weight: normal;
    font-size: .8em
}
.content aside .twitter h3 {
    color: #41B0D3;
    background: url(img/twitter2_col.png) 4.5em 50% no-repeat
}
.content aside .twitter .twitter-timestamp {
    padding-left: 11px;
    font-size: .8em;
    display: block;
    color: #6b6b6b
}
.content aside .twitter abbr {
    border: 0
}
.content aside .ads {
    padding-bottom: 1.5em
}
.content aside .ads img {
    max-width: 100%;
    display: block
}
.content aside .ads h3 {
    margin-bottom: .3em;
    color: #666;
    color: rgba(0, 0, 0, 0.6)
}
.content aside .ads a {
    display: block
}
.content aside .ads a+a {
    margin-top: 2em
}
@media screen and (max-width: 1030px){
	header.gen nav>ul>li a{
		font-size: 13px !important;
	}
}
@media all and (max-width: 799px) {
    header.gen {
        height: 11em
    }
    header.gen #top {
        background: url(img/logo.png);
        background-size: 100% auto;
        width: 112px;
        height: auto;
        margin-left: -1.3em;
        top: .8em
    }
    header.gen #top img {
        opacity: 0
    }
    header.gen nav {
        left: 4%;
        width: 92%
    }
    header.gen nav h2 {
        left: auto;
        right: 0;
        top: -1.1em
    }
    header.gen nav>ul>li {
        font-size: 2.2em
    }
    .no-fontface header.gen nav>ul>li {
        font-size: 1.8em
    }
    header.gen form {
        top: 1.9em;
        width: 22%
    }
    header.gen .subNav {
        top: 1.5em;
        right: 27.8%
    }
    .content {
        padding-top: 14em
    }
    .content_cat {
        padding-top: 4em
    }
    .content_cat>nav {
        top: 11em;
        height: 4em
    }
    .content_cat>nav ul {
        left: 4%
    }
    .content_cat>nav li {
        font-size: 2.2em
    }
    .content_cat .note p {
        width: auto;
        max-width: 34em
    }
    .content_blog {
        margin-top: 0
    }
    .content_blog article.sticky {
        margin-top: 0
    }
}
@media all and (max-width: 640px) {
    header.gen {
        position: static;
        padding-top: .8em;
        height: auto
    }
    header.gen nav {
        height: auto;
        position: static;
        margin: 7.9em 0 0 4%;
        overflow: hidden
    }
    header.gen nav h2,
    header.gen nav>ul>li:before,
    footer.gen p.legal a.logo,
    .content_cat>nav li:before,
    .content_cat article nav h3,
    .content_cat article nav li ul,
    .content_cat .val .ex a {
        display: none
    }
    header.gen nav>ul {
        overflow: hidden;
        margin: 0 0 0 -.8em
    }
    header.gen nav>ul>li {
        width: auto !important;
        margin: 0 0 .5em .4em !important;
        border-radius: 0.4em
    }
    header.gen nav>ul>li:hover {
        opacity: .6
    }
    header.gen nav>ul>li a {
        padding: .15em .4em
    }
    header.gen nav .gr:after,
    .content_cat_gradient>nav li:nth-child(2):after,
    .content_cat_gradient>nav li:nth-child(4):after {
        content: normal
    }
    .bd_animation header.gen .an,
    .bd_background header.gen .bg,
    .bd_border header.gen .bo,
    .bd_color header.gen .co,
    .bd_font header.gen .fo,
    .bd_gradient header.gen .gr,
    .bd_shadow header.gen .sh,
    .bd_text header.gen .te,
    .bd_transform header.gen .tf,
    .bd_transition header.gen .ts {
        background: #ff6100 !important;
        opacity: 1
    }
    .bd_animation header.gen .an a,
    .bd_background header.gen .bg a,
    .bd_border header.gen .bo a,
    .bd_color header.gen .co a,
    .bd_font header.gen .fo a,
    .bd_gradient header.gen .gr a,
    .bd_shadow header.gen .sh a,
    .bd_text header.gen .te a,
    .bd_transform header.gen .tf a,
    .bd_transition header.gen .ts a {
        color: #fff;
        text-shadow: 1px 1px 1px #000
    }
    header.gen form {
        right: 4%;
        top: 1.4em;
        width: 53%;
        max-width: 17em
    }
    header.gen .subNav {
        right: 4%;
        top: 3.5em;
        width: 53%;
        max-width: 12.2em
    }
    header.gen .subNav a {
        float: none
    }
    .content {
        padding: 2em 4% 2.6em
    }
    footer.gen .sec {
        width: 47%
    }
    footer.gen .sec:nth-of-type(2) {
        margin-right: 0
    }
    footer.gen .sec:nth-of-type(3) {
        clear: both
    }
    footer.gen p.legal {
        padding-right: 0
    }
    .content_cat {
        padding: 0
    }
    .bd_animation .content,
    .bd_background .content,
    .bd_border .content,
    .bd_color .content,
    .bd_font .content,
    .bd_gradient .content,
    .bd_shadow .content,
    .bd_text .content,
    .bd_transform .content,
    .bd_transition .content {
        padding: 0
    }
    .content_cat>nav {
        position: static;
        padding: 1em 4% 0;
        margin-bottom: 2em;
        height: auto;
        overflow: hidden;
        width: 92%
    }
    .content_cat>nav ul {
        position: static;
        overflow: hidden;
        margin-left: -.8em
    }
    .content_cat>nav li {
        font-size: 2em;
        background: #f1f1f1;
        background: rgba(255, 255, 255, 0.6);
        margin: 0 0 .5em .4em !important;
        border-radius: .4em;
        -moz-transition: all .15s;
        -webkit-transition: all .15s;
        -o-transition: all .15s;
        transition: all .15s
    }
    .content_cat>nav li:hover {
        opacity: .6
    }
    .content_cat>nav li a {
        padding: .15em .4em
    }
    .content_cat article {
        padding: 0 4% 2.6em
    }
    .content_cat article h1 {
        line-height: .8;
        font-size: 4em;
        padding-bottom: .15em
    }
    .content_cat article p {
        max-width: 34em;
        width: auto !important
    }
    .content_cat article nav {
        position: static;
        margin: 2.5em 0 1.5em;
        width: 100%;
        background: none;
        padding: 0;
        overflow: hidden
    }
    .content_cat article nav ul {
        margin-left: -.75em
    }
    .content_cat article nav li {
        float: left;
        font-size: 1.6em;
        background: url(img/bg_code.gif) #f1f1f1;
        margin: 0 0 .6em .5em;
        border-radius: 0.4em
    }
    .content_cat article nav li a {
        padding: .2em .5em !important;
        color: #000;
        background: none !important
    }
    .content_cat article nav li a:before {
        display: none;
        content: normal
    }
    .content section h2 {
        width: 100% !important
    }
    .content_cat .comp ul {
        width: 100%;
        min-width: 0;
        max-width: 30em
    }
    .content_cat .comp>p {
        width: auto !important
    }
    .content_cat .val ul {
        max-width: none
    }
    .content_cat .val li {
        max-width: 34em
    }
    .content_cat .val .ex {
        position: static;
        text-align: left;
        margin: 2em 0 3.2em
    }
    .content_cat .share {
        margin: 3em 4% 0
    }
    .content_cat .share li {
        margin-bottom: .5em
    }
    .content_cat_sing {
        padding-top: 2em !important
    }
    textarea,
    input[type=text],
    input[type=email] {
        width: 100%
    }
    .comm header,
    .comm form {
        width: 100%
    }
    .comm form div {
        width: 100%;
        padding: 0;
        border: 0;
        margin-top: 1.6em
    }
    .comm form div em {
        margin-left: 0
    }
    .comm form label {
        display: block;
        float: none;
        width: auto
    }
    .comm form footer {
        margin-left: 0 !important
    }
    .content_contact .comm .wpcf7-not-valid-tip {
        margin-left: .6em;
        height: 1.6em
    }
    #disqus_thread {
        width: 92%;
        padding: 0 4%
    }
    .comm li {
        width: 100%
    }
    .comm li .in {
        padding: 0 6% 0 0;
        width: 94%
    }
    .comm li .in footer {
        position: relative;
        padding-left: 64px;
        margin-bottom: -.2em
    }
    .comm address {
        padding-top: .2em
    }
    .comm address img {
        top: -.2em
    }
    .comm time {
        position: static;
        width: auto;
        margin-top: .3em
    }
    .comm li li {
        background-position: 4% 0
    }
    .comm li li .in {
        padding: .3em 8% 0 9%;
        width: 83%
    }
    .content aside {
        position: static
    }
    .content_blog article {
        padding: 0 0 3.5em 0;
        width: 100%
    }
    .content_blog article.sticky {
        padding: 1em 2.5% !important;
        margin: 0 0 5em 0 !important;
        width: 95% !important;
    }
    .content_blog article{
    	width: 95% !important;
    }
    .content_blog article.sticky header,
    .content_blog article.sticky footer,
    .content_blog_sing article header {
        //padding-left: 90px
    }
    .content_blog article.sticky header,
    .content_blog_sing article header {
        padding-top: 2.1em
    }
    .content_blog article.sticky footer img {
        left: 2.5%;
        top: .9em
    }
    .content_blog article h2,
    .content_blog article h2 a {
        line-height: .9 !important;
        margin-bottom: 0
    }
    .content_blog article footer {
        position: static;
        width: auto;
        margin-top: .2em
    }
    .content_blog_sing article footer {
        padding-left: 90px
    }
    .content_blog article footer a {
        display: inline
    }
    .content_blog article footer time {
        display: inline;
        margin-right: 2em
    }
    .content_blog article footer img {
        position: absolute;
        left: 0;
        top: 0;
        max-width: none;
        width: 63px;
        -moz-box-sizing: content-box;
        -webkit-box-sizing: content-box;
        box-sizing: content-box;
        border-width: 6px
    }
    .content_blog article footer>a {
        white-space: nowrap
    }
    .content_blog article .entry-summary {
        margin-top: -.5em
    }
    .content_blog article ul li {
        margin-left: 0
    }
    .content_blog article ol li {
        margin-left: 1.4em
    }
    .content_blog article p code {
        white-space: normal
    }
    .content_blog article blockquote {
        margin-left: 0
    }
    .content_blog nav {
        width: 100%;
        margin-left: 0;
        max-width: none
    }
    .content_blog_sing article {
        padding-bottom: 0
    }
    .content_contact .in {
        padding-left: 0;
        width: auto
    }
    .content_contact img {
        position: static;
        float: left;
        max-width: none;
        width: 80px;
        margin: .6em 1em .1em 0;
        border: .5em solid #ff6100;
        border-radius: .5em
    }
    .content_404 {
        overflow: hidden;
        padding-bottom: 10em
    }
    .content aside {
        width: 100%;
        margin-top: 4em;
        max-width: 35em
    }
    .content aside section:last-of-type {
        margin: 0
    }
    .content_blog .share {
        width: auto;
        margin: 3em 0 0 0
    }
}
@media all and (min-width: 1125px) {
    html {
        font-size: 68%
    }
    body {
        //background: url(img/bg_site.gif);
	background-color: #ccc;
    }
    .wrapper {
        max-width: 1100px;
        border: 0 solid #898989;
        border-width: 0 8px;
        margin: 0 auto;
        background: #fff;
        box-shadow: 0 0 12px 2px rgba(0, 0, 0, 0.2)
    }
    header.gen #top {
        top: 13px
    }
}
.no-cssanimations .content_cat_animation .ex,
.no-multiplebgs .content_cat_background .ex div a,
.no-borderimage #borderimage .ex div a,
.no-borderradius #borderradius .ex div a,
.no-hsla #hsla .ex div a,
.no-rgba #rgba .ex div a,
.no-opacity #opacity .ex div a,
.no-cssgradients .content_cat_gradient .ex div a,
.no-boxshadow #boxshadow .ex div a,
.no-textshadow #textshadow .ex div a,
.no-csstransforms .content_cat_transform .ex div a,
.no-csstransitions .content_cat_transition .ex div a {
    display: none
}
#animation .liv {
    width: 110px;
    height: 110px;
    border-radius: 10em;
    background: #ff6100;
    display: block !important;
    padding-top: 3em
}
#animation .ex a.st {
    top: 122px;
    background-color: #b3b3b3;
    background-color: rgba(0, 0, 0, 0.3)
}
#animation .ex div:first-child {
    display: none
}
#animation .val_gen .liv:target {
    -moz-animation: moveMe 5s linear 1.5s infinite alternate;
    -webkit-animation: moveMe 5s linear 1.5s infinite alternate;
    animation: moveMe 5s linear 1.5s infinite alternate
}
@-moz-keyframes moveMe {
    0% {
        top: 0px
    }
    33% {
        top: 50px;
        -moz-animation-timing-function: ease-out
    }
    100% {
        top: 100px;
        left: 10px
    }
}
@-webkit-keyframes moveMe {
    0% {
        top: 0px
    }
    33% {
        top: 50px;
        -webkit-animation-timing-function: ease-out
    }
    100% {
        top: 100px;
        left: 10px
    }
}
@keyframes moveMe {
    0% {
        top: 0px
    }
    33% {
        top: 50px;
        animation-timing-function: ease-out
    }
    100% {
        top: 100px;
        left: 10px
    }
}
#animation .val_ex .vbl1 .liv {
    background: red;
    border: 3px solid blue
}
#animation .val_ex .ex .liv:target {
    -moz-animation: changeColor 3s infinite, changeSize 2s ease-in 1s infinite;
    -webkit-animation: changeColor 3s infinite, changeSize 2s ease-in 1s infinite;
    animation: changeColor 3s infinite, changeSize 2s ease-in 1s infinite
}
@-moz-keyframes changeColor {
    0% {
        background-color: red;
        border-color: black
    }
    100% {
        background-color: green;
        border-color: yellow
    }
}
@-moz-keyframes changeSize {
    0% {
        -moz-transform: scale(1)
    }
    65% {
        -moz-transform: scale(1.2)
    }
    100% {
        -moz-transform: scale(1.4)
    }
}
@-webkit-keyframes changeColor {
    0% {
        background-color: red;
        border-color: black
    }
    100% {
        background-color: green;
        border-color: yellow
    }
}
@-webkit-keyframes changeSize {
    0% {
        -webkit-transform: scale(1)
    }
    65% {
        -webkit-transform: scale(1.2)
    }
    100% {
        -webkit-transform: scale(1.4)
    }
}
@keyframes changeColor {
    0% {
        background-color: red;
        border-color: black
    }
    100% {
        background-color: green;
        border-color: yellow
    }
}
@keyframes changeSize {
    0% {
        transform: scale(1)
    }
    65% {
        transform: scale(1.2)
    }
    100% {
        transform: scale(1.4)
    }
}
#animation .val_ex .vbl2 .liv {
    background: black
}
#animation .val_ex .vbl2 .ex .liv:target {
    -moz-animation: blink 1s step-end infinite
}
#animation .val_ex .vbl2 .ex .liv:target {
    -webkit-animation: blink 1s step-end infinite
}
#animation .val_ex .vbl2 .ex .liv:target {
    animation: blink 1s step-end infinite
}
@-moz-keyframes blink {
    0% {
        background-color: blue
    }
    50% {
        background-color: black
    }
}
@-webkit-keyframes blink {
    0% {
        background-color: blue
    }
    50% {
        background-color: black
    }
}
@keyframes blink {
    0% {
        background-color: blue
    }
    50% {
        background-color: black
    }
}
#background .ex .liv {
    background: none;
    width: 119px;
    height: 119px
}
#background .ex a.off,
#backgroundorigin .ex a.off,
#backgroundclip .val_ex .ex a.off,
#backgroundsize .ex a.off {
    top: 135px
}
#background .val_gen .liv {
    background-repeat: no-repeat !important;
    background: url(img/examp/li/background01.png), url(img/examp/li/background02.png), url(img/examp/li/background03.png) rgba(0, 0, 0, 0.06)
}
#background .val_ex .liv {
    background-repeat: no-repeat !important;
    background: url(img/examp/li/background11.png) 100% 100%, url(img/examp/li/background12.png) 50%, url(img/examp/li/background13.png) rgba(0, 0, 0, 0.06)
}
#backgroundorigin .ex a.off,
#backgroundclip .ex a.off {
    top: 166px
}
#backgroundclip .liv,
#backgroundorigin .liv {
    border: 5px solid rgba(0, 0, 0, 0.14);
    width: 119px;
    height: 119px
}
#backgroundclip .val_gen .liv {
    margin-top: 31px
}
#backgroundclip .val_ex .vbl1 .liv {
    -moz-background-clip: padding;
    background-clip: padding-box
}
#backgroundclip .val_ex .vbl2 .ex a.off {
    top: 161px
}
#backgroundclip .val_ex .vbl2 .liv {
    margin-top: 26px;
    padding: 7px;
    background-clip: content-box
}
#backgroundorigin .liv {
    -moz-background-size: contain !important;
    background-size: contain !important;
    background: url(img/examp/li/backgroundorigin.png) rgba(0, 0, 0, 0.06) no-repeat
}
#backgroundorigin .val_gen .liv {
    margin-top: 31px
}
#backgroundorigin .val_ex .vbl1 .ex a.off {
    top: 135px
}
#backgroundorigin .val_ex .vbl1 .liv {
    background-origin: border-box;
    -moz-background-origin: border
}
#backgroundorigin .val_ex .vbl2 .ex a.off {
    top: 161px
}
#backgroundorigin .val_ex .vbl2 .liv {
    margin-top: 26px;
    padding: 8px;
    -moz-background-origin: content;
    background-origin: content-box
}
#backgroundsize .liv {
    width: 119px;
    height: 119px;
    background: url(img/examp/li/backgroundsize.png) rgba(0, 0, 0, 0.06) no-repeat
}
#backgroundsize .val_ex .vbl1 .ex a.off {
    top: 189px
}
#backgroundsize .val_ex .vbl1 .liv {
    background-repeat: no-repeat !important;
    background: url(img/examp/li/backgroundsize.png) 0 100%, url(img/examp/li/backgroundsize.png) 100% 100% rgba(0, 0, 0, 0.06);
    background-size: 50% 100%, 33% 33%;
    -moz-background-size: 50% 100%, 33% 33%;
    margin-top: 54px
}
#backgroundsize .val_ex .vbl2 .liv {
    -moz-background-size: cover;
    background-size: cover
}
#backgroundsize .val_ex .vbl3 .liv {
    -moz-background-size: contain;
    background-size: contain
}
#borderradius .ex .liv {
    width: 100px;
    height: 100px
}
#borderradius .ex a.off {
    top: 118px
}
#borderradius .vbl1 .ex .liv {
    -moz-border-radius: 8px 13px 10px 5px;
    -webkit-border-radius: 8px 13px 10px 5px;
    border-radius: 8px 13px 10px 5px
}
#borderradius .vbl2 .ex .liv {
    -moz-border-radius: 8px 13px 5px;
    -webkit-border-radius: 8px 13px 5px;
    border-radius: 8px 13px 5px
}
#borderradius .vbl3 .ex .liv {
    -moz-border-radius: 8px 13px;
    -webkit-border-radius: 8px 13px 8px 13px;
    border-radius: 8px 13px
}
#borderradius .vbl4 .ex .liv {
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    border-radius: 8px
}
#borderradius .vbl5 .ex .liv {
    -moz-border-radius: 8px / 13px;
    -webkit-border-radius: 8px / 13px;
    border-radius: 8px / 13px
}
#borderradius .vbl6 .ex .liv {
    -moz-border-radius: 8px 13px / 10px 5px;
    -webkit-border-radius: 8px 13px / 10px 5px;
    border-radius: 8px 13px / 10px 5px
}
#borderimage .ex .liv {
    background: none
}
#borderimage .ex a.off {
    top: 93px
}
#borderimage .vbl3 .ex a.off {
    top: 114px
}
#borderimage .vbl1 .ex .liv {
    width: 81px;
    height: 81px;
    border: 9px solid;
    -moz-border-image: url(img/examp/li/borderimage1.png) 9 round;
    -webkit-border-image: url(img/examp/li/borderimage1.png) 9 round;
    -o-border-image: url(img/examp/li/borderimage1.png) 9 round;
    border-image: url(img/examp/li/borderimage1.png) 9 round
}
#borderimage .vbl2 .ex .liv {
    width: 79px;
    height: 77px;
    border: 7px solid;
    border-width: 7px 15px;
    -moz-border-image: url(img/examp/li/borderimage2.png) 7 15 round stretch;
    -webkit-border-image: url(img/examp/li/borderimage2.png) 7 15 round stretch;
    -o-border-image: url(img/examp/li/borderimage2.png) 7 15 round stretch;
    border-image: url(img/examp/li/borderimage2.png) 7 15 round stretch
}
#borderimage .vbl3 .ex .liv {
    width: 93px;
    height: 98px;
    -webkit-border-image: url(img/examp/li/borderimage3.png) 26/13px repeat
}
.content_cat_color .ex a {
    top: 104px
}
.content_cat_color .liv {
    width: 131px;
    height: 93px
}
.content_cat_color .liv:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    background: url(img/examp/li/color_mask.png);
    width: 100%;
    height: 100%;
    z-index: 1
}
#hsla .val_gen .liv {
    background: rgba(255, 238, 0, 0.3)
}
#hsla .val_ex .vbl1 .liv {
    background: rgba(128, 255, 128, 0.7)
}
#hsla .val_ex .vbl2 .liv {
    background: rgba(191, 64, 87, 0.8)
}
#rgba .val_gen .liv {
    background: rgba(98, 33, 129, 0.5)
}
#rgba .val_ex .vbl1 .liv {
    background: rgba(255, 127, 0, 0.2)
}
#rgba .val_ex .vbl2 .liv {
    background: rgba(0, 0, 255, 0.8)
}
#opacity .ex a {
    top: 117px
}
#opacity .liv {
    width: 99px;
    height: 99px;
    margin: 1px 1px 0 0
}
#opacity .liv:before {
    opacity: 0
}
#opacity .liv {
    background: #ff6100;
    opacity: .1
}
#opacity .val_ex .vbl1 .liv {
    opacity: .6
}
.content_cat_gradient .liv {
    width: 109px;
    height: 109px;
    margin: 2px 0 0 0
}
.content_cat_gradient .ex a {
    top: 126px
}
#lineargradient .val_gen .liv {
    background: -moz-linear-gradient(left, red, blue 30%, green);
    background: -webkit-gradient(linear, 0% 0%, 100% 0%, from(red), color-stop(0.3, blue), to(green));
    background: -webkit-linear-gradient(left, red, blue 30%, green);
    background: -o-linear-gradient(left, red, blue 30%, green);
    background: linear-gradient(left, #ff0000, #0000ff 30%, #008000)
}
#lineargradient .val_ex .vbl1 .liv {
    background: -moz-linear-gradient(225deg, red, green 20%, #ff0 70%, #000);
    background: -webkit-gradient(linear, 100% 0%, 0% 100%, from(red), color-stop(0.2, green), color-stop(0.7, #ff0), to(#000));
    background: -webkit-linear-gradient(225deg, red, green 20%, #ff0 70%, #000);
    background: -o-linear-gradient(225deg, red, green 20%, #ff0 70%, #000);
    background: linear-gradient(225deg, #ff0000, #008000 20%, #ffff00 70%, #000000)
}
#lineargradient .val_ex .vbl2 .liv {
    background: -moz-linear-gradient(105deg, #000 20%, #f0f 80%);
    background: -webkit-gradient(linear, 66% 110%, 34% -10%, color-stop(0.2, #000), color-stop(0.8, #f0f));
    background: -webkit-linear-gradient(105deg, #000 20%, #f0f 80%);
    background: -o-linear-gradient(105deg, #000 20%, #f0f 80%);
    background: linear-gradient(105deg, #000000 20%, #ff00ff 80%)
}
#radialgradient .val_gen .liv {
    background: -moz-radial-gradient(60px 45px, circle closest-side, red, blue 60%, green);
    background: -webkit-radial-gradient(60px 45px, circle closest-side, red, blue 60%, green);
    background: -o-radial-gradient(60px 45px, circle closest-side, red, blue 60%, green);
    background: radial-gradient(60px 45px, circle closest-side, #ff0000, #0000ff 60%, #008000)
}
#radialgradient .val_ex .vbl1 .liv {
    background: -moz-radial-gradient(60% 55%, circle closest-corner, red, green 20%, #ff0 70%, #000);
    background: -webkit-radial-gradient(60% 55%, circle closest-corner, red, green 20%, #ff0 70%, #000);
    background: -o-radial-gradient(60% 55%, circle closest-corner, red, green 20%, #ff0 70%, #000);
    background: radial-gradient(60% 55%, circle closest-corner, #ff0000, #008000 20%, #ffff00 70%, #000000)
}
#radialgradient .val_ex .vbl2 .liv {
    background: -moz-radial-gradient(20px 40px, farthest-side, #fff 20%, #f0f);
    background: -webkit-radial-gradient(20px 40px, farthest-side, #fff 20%, #f0f);
    background: -o-radial-gradient(20px 40px, farthest-side, #fff 20%, #f0f);
    background: radial-gradient(20px 40px, farthest-side, #ffffff 20%, #ff00ff)
}
#repeatinglineargradient .val_ex .vbl1 .liv {
    background: -moz-repeating-linear-gradient(red, green 18%, blue 25%);
    background: -webkit-repeating-linear-gradient(red, green 18%, blue 25%);
    background: -o-repeating-linear-gradient(red, green 18%, blue 25%);
    background: repeating-linear-gradient(red, green 18%, blue 25%)
}
#repeatinglineargradient .val_ex .vbl2 .liv {
    background: -moz-repeating-linear-gradient(red, red 11px, #000 11px, #000 22px);
    background: -webkit-repeating-linear-gradient(red, red 11px, #000 11px, #000 22px);
    background: -o-repeating-linear-gradient(red, red 11px, #000 11px, #000 22px);
    background: repeating-linear-gradient(red, red 11px, #000 11px, #000 22px)
}
#repeatingradialgradient .val_ex .vbl1 .liv {
    background: -moz-repeating-radial-gradient(closest-side, red, green 20%, blue 50%);
    background: -webkit-repeating-radial-gradient(closest-side, red, green 20%, blue 50%);
    background: -o-repeating-radial-gradient(closest-side, red, green 20%, blue 50%);
    background: repeating-radial-gradient(closest-side, red, green 20%, blue 50%)
}
#repeatingradialgradient .val_ex .vbl2 .liv {
    background: -moz-repeating-radial-gradient(30% 40%, red, red 11px, #000 11px, #000 22px);
    background: -webkit-repeating-radial-gradient(30% 40%, red, red 11px, #000 11px, #000 22px);
    background: -o-repeating-radial-gradient(30% 40%, red, red 11px, #000 11px, #000 22px);
    background: repeating-radial-gradient(30% 40%, red, red 11px, #000 11px, #000 22px)
}
.content_cat_shadow .liv {
    width: 89px;
    height: 89px
}
#boxshadow .val_gen .ex a {
    top: 125px
}
#boxshadow .val_gen .liv {
    -moz-box-shadow: 4px 4px 16px #fff;
    -webkit-box-shadow: 4px 4px 16px #fff;
    box-shadow: 4px 4px 16px #969696;
    margin: 10px 19px 0 0
}
#boxshadow .val_ex .vbl1 .ex a {
    top: 142px
}
#boxshadow .val_ex .vbl1 .liv {
    -moz-box-shadow: -5px 5px 15px 7px #fff;
    -webkit-box-shadow: -5px 5px 15px 7px #fff;
    box-shadow: -5px 5px 15px 7px #969696;
    margin: 18px 18px 0 0
}
#boxshadow .val_ex .vbl2 .ex a {
    top: 105px
}
#boxshadow .val_ex .vbl2 .liv {
    -moz-box-shadow: 6px 6px 12px #000 inset;
    -webkit-box-shadow: 6px 6px 12px #000 inset;
    box-shadow: 6px 6px 14px #000 inset
}
#textshadow .liv {
    background: none;
    height: auto;
    width: auto
}
#textshadow .liv span {
    color: #cd0000;
    font-style: normal;
    text-shadow: none;
    display: block;
    line-height: 1
}
#textshadow .val_gen .ex a {
    top: 137px
}
#textshadow .val_gen .liv span {
    font-family: "Times", "Times New Roman", Georgia, serif;
    font-size: 12em;
    text-shadow: 4px 4px 14px #969696;
    margin: -.18em .1em -.62em 0
}
#textshadow .val_ex .vbl1 .ex a {
    top: 93px
}
#textshadow .val_ex .vbl1 .liv span {
    font-family: Arial, "Helvetica Neue", "Helvetica", sans-serif;
    font-size: 6.8em;
    font-weight: bold;
    text-shadow: -5px -5px 12px #969696;
    margin: -.03em .07em -.7em 0
}
#textoverflow .ex a {
    top: 135px
}
#textoverflow .vbl2 .ex a {
    top: 39px
}
.content_cat_text .liv {
    width: 119px;
    height: 119px;
    padding: 3px 6px;
    margin-right: 22px;
    position: relative;
    background: rgba(0, 0, 0, 0.06)
}
.content_cat_text .liv p {
    text-overflow: ellipsis;
    overflow: hidden;
    text-shadow: none;
    text-align: left;
    font-style: normal;
    display: block;
    font-size: 1em;
    width: 100%;
    line-height: 1.34;
    color: #000;
    font-family: Arial, sans-serif;
    font-size: 12px
}
.content_cat_text .liv span {
    width: 119px;
    text-align: center;
    position: absolute;
    top: 1em;
    left: 0;
    color: #fff;
    text-shadow: 1px 1px #000;
    font-style: italic
}
.content_cat_text .liv span a {
    position: static
}
.content_cat_text .liv span a:before {
    display: none
}
#overflowwrap .ex a {
    top: 117px
}
#overflowwrap .liv {
    margin-right: 21px;
    height: 101px
}
#overflowwrap .liv p {
    text-overflow: clip;
    overflow: visible;
    word-wrap: normal
}
#overflowwrap .vbl1 .ex a {
    top: 133px
}
#overflowwrap .vbl1 .liv {
    height: 117px
}
#overflowwrap .vbl1 .liv p {
    word-wrap: break-word
}
#textoverflow .val_gen .liv p {
    text-overflow: clip;
    overflow: visible
}
#textoverflow .vbl2 .liv {
    padding-top: 4px;
    height: 23px
}
#textoverflow .vbl2 .liv p {
    white-space: nowrap;
    overflow: hidden
}
.content_cat_transform .liv {
    width: 100px;
    height: 100px
}
#rotate .val_gen .ex a {
    top: 161px
}
#rotate .val_gen .liv {
    -moz-transform: rotate(30deg);
    -webkit-transform: rotate(30deg);
    -o-transform: rotate(30deg);
    -ms-transform: rotate(30deg);
    transform: rotate(30deg);
    margin: 32px 17px 0 0
}
#rotate .val_ex .vbl1 .ex a {
    top: 164px
}
#rotate .val_ex .vbl1 .liv {
    -moz-transform: rotate(-40deg);
    -webkit-transform: rotate(-40deg);
    -o-transform: rotate(-40deg);
    -ms-transform: rotate(-40deg);
    transform: rotate(-40deg);
    margin: 33px 20px 0 0
}
#scale .val_gen .liv {
    width: 70px;
    height: 70px
}
#scale .val_gen .ex a {
    top: 122px
}
#scale .val_gen .vbl1 .liv {
    -moz-transform: scale(2, 1.5);
    -webkit-transform: scale(2, 1.5);
    -o-transform: scale(2, 1.5);
    -ms-transform: scale(2, 1.5);
    transform: scale(2, 1.5);
    margin: 17px 35px 0 0
}
#scale .val_gen .vbl2 .ex a {
    top: 87px
}
#scale .val_gen .vbl2 .liv {
    -moz-transform: scaleX(2);
    -webkit-transform: scaleX(2);
    -o-transform: scaleX(2);
    -ms-transform: scaleX(2);
    transform: scaleX(2);
    margin-right: 35px
}
#scale .val_gen .vbl3 .liv {
    -moz-transform: scaleY(1.5);
    -webkit-transform: scaleY(1.5);
    -o-transform: scaleY(1.5);
    -ms-transform: scaleY(1.5);
    transform: scaleY(1.5);
    margin-top: 17px
}
#skew .val_gen .liv,
#translate.val_gen .liv,
#transformorigin .val_gen .liv {
    width: 101px;
    height: 101px
}
#skew .val_gen .ex a {
    top: 131px
}
#skew .val_gen .vbl1 .liv {
    -moz-transform: skew(30deg, 10deg);
    -webkit-transform: skew(30deg, 10deg);
    -o-transform: skew(30deg, 10deg);
    -ms-transform: skew(30deg, 10deg);
    transform: skew(30deg, 10deg);
    margin: 12px 29px 0 0
}
#skew .val_gen .vbl2 .liv {
    -moz-transform: skewX(30deg);
    -webkit-transform: skewX(30deg);
    -o-transform: skewX(30deg);
    -ms-transform: skewX(30deg);
    transform: skewX(30deg);
    margin: 14px 29px 0 0
}
#skew .val_gen .vbl3 .liv {
    -moz-transform: skewY(10deg);
    -webkit-transform: skewY(10deg);
    -o-transform: skewY(10deg);
    -ms-transform: skewY(10deg);
    transform: skewY(10deg);
    margin: 9px 21px 0 0
}
#translate .val_gen .ex a {
    top: 127px
}
#translate .val_gen .vbl1 .liv {
    -moz-transform: translate(100px, 20px);
    -webkit-transform: translate(100px, 20px);
    -o-transform: translate(100px, 20px);
    -ms-transform: translate(100px, 20px);
    transform: translate(100px, 20px);
    margin: -10px 100px 0 0
}
#translate .val_gen .vbl2 .ex a {
    top: 118px
}
#translate .val_gen .vbl2 .liv {
    -moz-transform: translateX(100px);
    -webkit-transform: translateX(100px);
    -o-transform: translateX(100px);
    -ms-transform: translateX(100px);
    transform: translateX(100px);
    margin-right: 100px
}
#translate .val_gen .vbl3 .liv {
    -moz-transform: translateY(20px);
    -webkit-transform: translateY(20px);
    -o-transform: translateY(20px);
    -ms-transform: translateY(20px);
    transform: translateY(20px);
    margin-top: -10px
}
#transformorigin .liv {
    -moz-transform: rotate(15deg);
    -webkit-transform: rotate(15deg);
    -o-transform: rotate(15deg);
    -ms-transform: rotate(15deg);
    transform: rotate(15deg)
}
#transformorigin .val_gen .ex a {
    top: 146px
}
#transformorigin .val_gen .liv {
    -moz-transform-origin: left top;
    -webkit-transform-origin: left top;
    -o-transform-origin: left top;
    -ms-transform-origin: left top;
    transform-origin: left top;
    margin-top: 12px
}
#transformorigin .val_ex .vbl1 .ex a {
    top: 142px
}
#transformorigin .val_ex .vbl1 .liv {
    -moz-transform-origin: right;
    -webkit-transform-origin: right;
    -o-transform-origin: right;
    -ms-transform-origin: right;
    transform-origin: right;
    margin: 25px 28px 0 0
}
#transformorigin .val_ex .vbl2 .ex a {
    top: 134px
}
#transformorigin .val_ex .vbl2 .liv {
    -moz-transform-origin: 25% 75%;
    -webkit-transform-origin: 25% 75%;
    -o-transform-origin: 25% 75%;
    -ms-transform-origin: 25% 75%;
    transform-origin: 25% 75%;
    margin: 5px 17px 0 0
}
#transition .liv {
    width: 117px;
    height: 117px;
    background: #ff0000;
    -moz-transition: background-color 2s 0.5s linear;
    -webkit-transition: background-color 2s 0.5s linear;
    -o-transition: background-color 2s 0.5s linear;
    transition: background-color 2s 0.5s linear
}
#transition .liv:hover {
    background: #0006ff
}
#transition .ex a {
    top: 133px
}
.pexamp figcaption {
    margin-top: .8em
}
.pexamp .pointerevents .ex {
    width: 300px;
    font-size: 1.5em;
    font-weight: bold;
    background: #FF6100;
    border-radius: 12px;
    color: #fff;
    line-height: 1.3;
    position: relative;
    margin: 2.4em 0 0 15px
}
.pexamp .pointerevents .ex a {
    display: block;
    padding: 8px 14px
}
.pexamp .pointerevents .ex:before {
    content: "";
    width: 95%;
    height: 95%;
    position: absolute;
    left: -15px;
    top: -15px;
    background: url(img/posts/pointerevents_pattern.png);
    opacity: .85
}
.pexamp .pointerevents .ex2:before {
    pointer-events: none
}
.pexamp .placeholder .placeh {
    color: #999
}
@media print {
    header.gen *,
    .content h1,
    .content_blog footer a,
    nav,
    aside,
    footer.gen,
    .comm,
    article footer img,
    .content_cat .comp .leg,
    .content_cat .val .sw,
    .content_cat .val .ex a,
    .content_cat .note,
    .content_blog figure br,
    .inpop,
    .content_contact h2,
    .content_contact h2+p,
    .share {
        display: none
    }
    article img {
        display: block;
        max-width: 500px;
        height: auto
    }
    article h1 {
        display: block !important
    }
    q {
        quotes: none
    }
    q:before,
    q:after {
        content: ""
    }
    body {
        font: 12pt Georgia, "Times New Roman", Times, serif;
        line-height: 1.3;
        background: #fff;
        color: #000
    }
    a {
        color: #000
    }
    a:after {
        content: " (http://css3files.com/" attr(href) ")";
        font-size: 80%;
        word-wrap: break-word
    }
    a[href*="http://"]:after,
    a[href*="https://"]:after {
        content: " (" attr(href) ")"
    }
    a[href^="#"]:after,
    article figure a:after,
    .content_blog h2 a:after,
    .content_cat .comp li b:first-child:before {
        display: none
    }
    h1,
    h2 {
        font-size: 24pt;
        line-height: 1
    }
    h3 {
        font-size: 16pt;
        margin: 25px 0 0
    }
    blockquote {
        font-size: 14pt;
        font-style: italic
    }
    header.gen h1 {
        display: block;
        font-size: 30pt;
        margin: 0
    }
    header.gen:after {
        font-style: italic;
        content: "CSS3 propertys explained. A project by Christian Krammer.";
        font-size: 10pt
    }
    .content_blog h2,
    article h1 {
        margin: 44px 0 16px
    }
    .content_blog h2 a {
        text-decoration: none
    }
    .content_blog figcaption {
        font-style: italic;
        font-size: 10pt;
        margin-top: 4px
    }
    .content_cat h2 {
        font-size: 18pt;
        margin-top: 24px;
        padding-top: 24px;
        border-top: 1px solid #ccc
    }
    .content_cat h3 {
        font-size: 14pt;
        margin: 30px 0 -6px
    }
    .content_cat article>.desc {
        font-size: 13pt
    }
    .content_cat article+article {
        page-break-before: always
    }
    .content_cat .comp li span {
        font-size: 10pt
    }
    .content_cat .comp li span:before {
        content: "("
    }
    .content_cat .comp li span:after {
        content: ")"
    }
    .content_cat .comp li b:before {
        content: ", "
    }
    .content_cat .comp p {
        font-size: 10pt
    }
    .content_cat .val .cd {
        border: 1px solid #999;
        padding: 3px 5px
    }
    .content_cat .val b:before {
        content: "("
    }
    .content_cat .val b:after {
        content: ") "
    }
    .content_cat .val strong {
        font-weight: normal
    }
    .content_cat .val strong b:after {
        margin: 0 -6px 0 -9px
    }
    .content_contact img {
        width: 150px;
        float: left;
        margin: 7px 15px 5px 0
    }
}
#post-635 .vcard {
    display: none;
}
.equal {
    width: 100%;
    margin: 5px;
    padding: 6px 10px 1px 10px;
    border: 1px solid #444;
}
.equal td {
    vertical-align: top;
}
.equal table {
    margin: 0px auto;
    width: 700px;
}
.equal .duece {
    padding-top: 15px;
}
.equal .duece a {
    color: #333;
    font-weight: bold;
}
.single-post .type-post {
    margin-left: 0px;
}
.single-post .type-post footer {
    display: none;
}
.content aside {
    width: 30% !important;
}
#disqus_thread {
    width: 65% !important;
}
.entry-summary img.aligncenter.size-full{
	max-width: 500px !important;
	height: auto;
	margin-left: -20px;
}
a.read-more{
	color: #4207C9 !important;
}
article img.aligncenter.size-full{
	max-width: 450px !important;
	height: auto;
}