html {
font-family: sans-serif;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%
}
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary { display: block }
a { background-color: transparent }
a:active, a:hover { outline: 0 }
abbr[title] { border-bottom: 1px dotted }
b, strong { font-weight: 700 }
small { font-size: 80% }
body {
margin: 0;
background: #000 url(../img/bg.jpg) repeat-x fixed left top;
background-size: cover;
font-family: Oswald, Arial, Helvetica, Verdana, sans-serif;
color: #222;
font-size: 14px;
font-weight: 400;
}
a {
color: #777;
-webkit-transition: all .2s ease-out;
-moz-transition: all .2s ease-out;
-o-transition: all .2s ease-out;
transition: all .2s ease-out
}
a:hover { color: #fff }
*:after, *:before, * { box-sizing: border-box }
.container {
width: 980px;
margin: 0 auto
}
header, main, footer {
clear: both;
display: table;
padding: 20px 0;
width: 100%
}
.logo {
float: left;
height: 100px;
position: relative;
width: 241px;
}
.logo span {
float: left;
vertical-align: top;
}
.logo div {
color: #fff;
font-size: 38px;
line-height: 38px;
margin: 20px 0 0 5px;
vertical-align: middle;
display:none;
}
.logo-sm {
display: block;
height: 80px;
margin: -50px auto 5px;
position: relative;
text-align: center;
width: 200px
}
.logo-sm img {
height: 100%;
width: auto;
}
header {
background: #b3b18f;
color: #0078d7;
position: relative
}
.top {
float: right;
text-align: right;
margin: 20px 0 0
}
.top > h2.title,  .top > h1 {
font-size: 1.8em;
line-height: 1em;
letter-spacing: -1px;
color: white;
margin: 10px 0;
}
.top > h2 {
font-size: 1.3em;
letter-spacing: 0;
line-height: 1em;
color: white;
}
h1, h2, h3, h4 { font-weight: 300 }
h2 {
font-size: 2em;
letter-spacing: -2px;
color: #111
}
h1 {
font-size: 2em;
margin: .67em 0
}
h3 {
margin-bottom: 10px;
color: white;
font-size: 1.5em
}
.h3 {
background: #6c4232;
background: -moz-linear-gradient(top, rgba(108,66,50,1) 0, rgba(67,55,41,1) 100%);
background: -webkit-linear-gradient(top, rgba(108,66,50,1) 0, rgba(67,55,41,1) 100%);
background: linear-gradient(to bottom, rgba(108,66,50,1) 0, rgba(67,55,41,1) 100%);
 filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#6c4232', endColorstr='#433729', GradientType=0);
border-radius: 20px 20px 0 0;
padding: 10px;
}
.topmenu {
background: rgba(56, 52, 65, 0.9);
display: block;
float: left;
text-align: center;
width: 100%;
padding: 10px 0;
}
#area ul {
list-style: none;
margin: 0;
padding: 0;
}
#area li { display: inline-block;margin: 0 5px; }
main {
padding: 0;
background: rgba(56, 52, 65, 0.8)
}
.row-color h1 {
font-size: 3em;
text-shadow: 0 2px 5px rgba(0,0,0,0.6);
font-weight: bold;
color: #fff
}
.screenshot {
margin: -150px 0 0;
position: relative;
text-align: center
}
.margin-none { margin: 0; }
img.responsive {
border-radius: 20px;
box-shadow: 0 0 0 6px #b3b18f
}
.lead {
color: #8c8c8c;
font-size: 16px;
font-weight: lighter;
margin: 6px 0 0;
padding: 0;
width: 58%
}
.content-top {
padding: 0;
position: relative;
display: table;
width: 100%
}
.col30 {
float: left;
width: 33.33%
}
.col30>p, .col30>h3 {
margin-left: 10px;
margin-right: 10px
}
.col40 {
float: left;
width: 40%
}
.col50 {
float: left;
width: 50%
}
.col60 {
float: left;
width: 60%;
padding-right: 40px
}
.description {
float: left;
padding: 5%;
text-align: center;
width: 100%
}
table { width: 100%; }
.description h2 { margin-top: 0 }
.content-middle p { padding: 30px }
article p p { margin-top: 10px }
.content-middle {
background: #fcfff4;
background: -moz-linear-gradient(top, #fcfff4 0%, #e9e9ce 100%);
background: -webkit-linear-gradient(top, #fcfff4 0%, #e9e9ce 100%);
background: linear-gradient(to bottom, #fcfff4 0%, #e9e9ce 100%);
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfff4', endColorstr='#e9e9ce', GradientType=0 );
border-radius: 20px 20px 0 0;
bottom: -1px;
font-size: 16px;
color: #111;
padding: 0;
position: relative;
display: table;
width: 100%
}
.content-middle ul {
list-style: none;
margin: 0;
width: 100%;
padding: 30px
}
.content-bottom {
background: #b3b18f;
border-radius: 0 0 20px 20px;
color: #fff;
display: table;
width: 100%;
padding: 30px
}
.wide-bottom {
background: rgba(56, 52, 65, 0.6);
display: table;
padding-bottom: 50px;
width: 100%
}
.itemsrow {
background: #ddd;
color: #fff;
display: table;
list-style: none;
margin: 0;
padding: 30px;
width: 100%
}
#area li a {
background: rgba(56, 52, 65, 0.8);
border-radius: 2px;
color: #fff;
cursor: pointer;
text-transform: uppercase;
display: inline-block;
font-size: 16px;
font-weight: 700;
line-height: 20px;
margin: 0;
padding: 5px 10px;
position: relative;
text-align: left;
text-decoration: none;
text-shadow: 0 1px 1px rgba(56, 52, 65, 0.8);
white-space: nowrap
}
#area li a.active,  #area li a:hover {
background: #b3b18f;
color: #fff
}
.download {
background: #ad0;
background: -moz-linear-gradient(top, #ad0 0, #8cb700 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ad0), color-stop(100%, #8cb700));
background: -webkit-linear-gradient(top, #ad0 0, #8cb700 100%);
background: -o-linear-gradient(top, #ad0 0, #8cb700 100%);
background: -ms-linear-gradient(top, #ad0 0, #8cb700 100%);
background: linear-gradient(to bottom, #ad0 0, #8cb700 100%);
 filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#aadd00', endColorstr='#8cb700', GradientType=0);
border-bottom: 3px solid #6e8900;
border-radius: 12px;
color: #fff;
cursor: pointer;
display: inline-block;
font-size: 30px;
height: 65px;
line-height: 60px;
margin: 0;
padding: 0 0 0 80px;
position: relative;
text-align: left;
text-decoration: none;
text-shadow: 0 1px 1px #6e8900;
white-space: nowrap;
width: 400px
}
.download em, .download-icon, .social a, h2, h2 span { display: block }
.download:hover {
background: #dbf043;
background: -moz-linear-gradient(top, #dbf043 0, #c3d825 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #dbf043), color-stop(100%, #c3d825));
background: -webkit-linear-gradient(top, #dbf043 0, #c3d825 100%);
background: -o-linear-gradient(top, #dbf043 0, #c3d825 100%);
background: -ms-linear-gradient(top, #dbf043 0, #c3d825 100%);
background: linear-gradient(to bottom, #dbf043 0, #c3d825 100%);
 filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dbf043', endColorstr='#c3d825', GradientType=0);
border-bottom: 3px solid #6e8900;
color: #fff
}
.download>strong {
display: block;
line-height: 30px;
font-weight: bold;
text-transform: uppercase;
margin-top: 10px
}
.download em {
font-family: arial;
font-size: 12px;
font-weight: bold;
line-height: 16px
}
.download-icon {
background: url(../img/sprite.png) center -236px no-repeat;
height: 40px;
left: 5%;
position: absolute;
width: 36px;
top: 12px
}
.col50 h3, .col50 p {
margin-left: 30px;
margin-right: 20px
}
.icon {
background-image: url(../img/sprite.png);
vertical-align: middle;
width: 40px;
height: 40px;
display: inline-block;
margin-right: 5px;
border-radius: 20px
}
.content-bottom img {
height: auto;
width: 100%
}
.screenshot img { width: 45%; }
.screenshot-alt img { width: 100%; }
iframe { width: 100%; }
footer {
background: #111;
padding-top: 10px;
display: block
}
.site-info {
font-family: Arial;
color: #777;
margin: 0;
padding: 20px;
font-size: 11px;
text-align: center
}
.social {
display: table;
margin: 0 auto;
position: relative;
right: 0;
top: 0
}
.social a {
color: #999;
display: inline-block;
float: left;
font-size: 12px;
margin: 0 0 0 1px;
padding: 5px 8px;
text-decoration: none
}
.btn-facebook { border-bottom: 1px solid #204385 }
.btn-twitter { border-bottom: 1px solid #2aa9e0 }
.btn-gplus { border-bottom: 1px solid #d3492c }
.btn-facebook:hover {
background: #204385;
color: #fff
}
.btn-twitter:hover {
background: #2aa9e0;
color: #fff
}
.btn-gplus:hover {
background: #d3492c;
color: #fff
}
.submenu ul {
list-style: none;
margin: 0;
padding: 0;
}
.submenu li { display: inline-block; }
.submenu li a { padding: 0 3px; }
.submenu li > a.active { color: #fff; }
#btn-area[type="checkbox"], label.btn-area { display: none }
label.btn-area { display: none }
 @media(max-width:991px) {
.container { width: 760px }
.content-middle {
padding: 20px 0;
width: 100%
}
.content-top img { margin-top: 50px }
.screenshot { margin: 0 }
.lead { width: 100% }
.row-color h1 {
font-size: 2em;
margin: 0;
}
.description { padding: 5% 0 0; }
.content-middle p {
margin: 0;
padding: 10px 30px;
}
.row-color h1 {
font-size: 2em;
margin: 0.5em 0;
}
.content-middle p { margin: 0; }
}
 @media(max-width:778px) {
.container {
padding: 0 20px;
width: 100%
}
.social {
position: fixed;
right: 2%
}
.row-color { padding-top: 0 }
.content-top {
display: table;
padding: 0 20px 20px 20px;
height: auto
}
.itemsrow { margin-bottom: 30px }
.col50, .col30 {
margin: 0 5%;
width: 90%
}
.col60 {
width: 100%;
padding: 0 40px;
text-align: center
}
.col40 {
width: 100%;
text-align: center
}
.screenshot img {
height: auto;
width: 100%
}
.content-bottom>h2 { text-align: center }
.download {
height: auto;
margin: 0;
padding: 10px 0 20px;
text-align: center;
width: 100%
}
.download-icon {
margin: 0 auto;
position: static
}
.download>strong { margin-top: 0 }
h3 {
font-size: 28px;
margin: 0
}
.col50 h3 { text-align: center }
.icon {
display: block;
margin: 0 auto
}
.social { width: 100% }
.social a { float: none }
.col50 {
width: 100%;
margin: 0
}
.social {
bottom: 0;
right: 0;
position: fixed;
z-index: 9999;
text-align: center;
background: black;
top: inherit
}
.social a {
display: block;
float: left;
width: 33%
}
.social a { width: 32% }
.lead {
color: darkred;
font-size: 18px
}
.row-color h1 { margin-top: 0 }
.top { margin: 0 }
#btn-area[type="checkbox"], label.btn-area { display: none }
#area { display: none }
label.btn-area {
background: url(../img/sprite.png) no-repeat center -107px;
border-radius: 2px;
color: #fff;
cursor: pointer;
display: block;
float: right;
height: 55px;
margin: 0;
position: relative;
width: 60px;
z-index: 9999
}
#btn-area[type="checkbox"]:checked ~ nav#area {
background: rgba(0, 0, 0, 0.9);
box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.3);
display: block;
height: 100%;
left: 0;
padding: 100px 0 0;
position: absolute;
top: 0;
width: 100%;
z-index: 999;
}
#area { text-align: center; }
label.btn-area {
display: table;
float: none;
margin: 0 auto;
}
#area li a {
border-radius: 6px;
font-size: 14px;
line-height: 16px;
margin: 5px 0;
}
}
 @media(max-width:530px) {
.top { width: 100% }
.logo {
display: table;
float: none;
margin: 0 auto
}
.lead {
clear: both;
float: none;
text-align: center;
width: 100%
}
.content-bottom { padding: 30px 0 }
.responsive {
width: 100%;
display: block;
height: auto
}
.screenshot img {
width: 90%;
margin: 0 5%
}
#area li a { white-space: normal }
.top { text-align: center; }
}
 @media(max-width:480px) {
.container { padding: 0 }
.logo { font-size: 26px }
header { padding: 20px }
.site-info {
padding-bottom: 40px;
line-height: 16px;
font-size: 12px
}
}
 @media(max-width:380px) {
.description { padding: 0 }
.itemsrow { padding: 0 }
.row-color h1 { font-size: 2em }
.content-bottom { padding: 30px 0 }
}
.logo img {
    position: relative;

    -moz-animation-name: dropLogo;
    -moz-animation-iteration-count: 1;
    -moz-animation-timing-function: ease-out;
    -moz-animation-duration: 0.6s;

    -webkit-animation-name: dropLogo;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: ease-out;
    -webkit-animation-duration: 0.6s;

    animation-name: dropLogo;
    animation-iteration-count: 1;
    animation-timing-function: ease-out;
    animation-duration: 0.6s;
}

@-moz-keyframes dropLogo {
    0% {
        -moz-transform: translateY(-80px);-moz-transform: translateX(-80px);transform: scale(5);
    }
    100% {
        -moz-transform: translateY(0);-moz-transform: translateX(0);transform: scale(1);
    }
}
@-webkit-keyframes dropLogo {
    0% {
        -webkit-transform: translateY(-80px);-webkit-transform: translateX(-80px);transform: scale(5);
    }
    100% {
        -webkit-transform: translateY(0);-webkit-transform: translateX(0);transform: scale(1);
    }
}
@keyframes dropLogo {
    0% {
        transform: translateY(-80px);transform: translateX(-80px);transform: scale(5);
    }
    100% {
        transform: translateY(0);transform: translateX(0);transform: scale(1);
    }
}