/* ====================================== Custom CSS Code =================================================*/

/* you can add any custom css code for any class, id, tags and anything here, it will be active.. */


.subtitle
{
position: relative;
top: -22px;
color: #000;
font-size: 12px;
}

.navigation
{
font-size: 1.1em;
}

code
{
display: inline-block;
border-radius: 0.8em;
background-color: #EEE;
padding: 0 0.5em 0 0.5em;
color: #000;
}

#useCases li
{
clear: both;
margin-bottom: 2em;
padding: 0;
}

img.floatRight
{
float: right;
margin: 0 0 0 1em;
}

.content
{
min-height: 600px;
line-height: 1.5em;
text-align: left;
font-size: 1.2em;
}

.content ol, .content ul
{
padding-left: 25px;
}

.content ol
{
list-style: decimal;
}

.content ul
{
list-style: disc;
}

.content p a
{
text-decoration: underline;
}

.slides
{
list-style: none !important;
padding: 0 !important;
}

#first
{
border-bottom: 5px solid #e64141;
width: 990px;
height: 300px;
position: relative;
left: -15px;
overflow: hidden;
text-align: right;
top: -20px;
}

#first .man
{
display: block;
width: 300px;
height: 300px;
background: url(/i/man.jpg) center center no-repeat;
position: absolute;
}

#first .manok
{
display: block;
width: 300px;
height: 300px;
background: url(/i/man2.jpg) center center no-repeat;
position: absolute;
animation-delay: 4s;
animation-duration: 0.1s;
}

#first .slogan
{
background-color: #61A6C1;
color: #FFF;
display: inline-block;
font-size: 38px;
font-weight: bold;
line-height: 1.3em;
padding: 0 0.5em;
margin-top: 0.5em;
}

#first .slogan.second
{
animation-delay: 1s;
}

#first .oses
{
margin: 1em 0 2em 0;
display: none;
}

#first .os
{
width: 50px;
height: 50px;
display: inline-block;
background-image: url(/i/os.png);
background-repeat: no-repeat;
margin-right: 1em;
}

#first .os.win
{
background-position: -50px center;
animation-delay: 2s;
}

#first .os.mac
{
background-position: 5px center;
animation-delay: 2.5s;
}

#first .os.linux
{
background-position: -100px center;
animation-delay: 3s;
}

#shadow
{
position: fixed;
z-index: 9999;
background-color: rgba(0,0,0,0.8);
width: 100%;
height: 100%;
left: 0;
top: 0;
display: none;
}

.title
{
font-weight: bold;
}

.descr
{
font-size: 0.9em;
}

.inline
{
display: inline;
}

#info
{
position: relative;
left: 50%;
transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
top: 50%;
padding: 2em;
background-color: #DDD;
color: #000 !important;
border: 1px solid #000;
display: inline-block;
line-height: 2em;
border-radius: 1em;
box-shadow: 0 0 30px #000;
}

.warning
{
color: #900;
padding: 2em;
}

#info div
{
white-space: nowrap;
}

#info div.buttons
{
text-align: center;
}

#info label, #info span
{
width: 20%;
text-align: right;
display: inline-block;
margin: 0 1em 0 1em;
}

#info span
{
color: #999;
}

#info span.required
{
color: red;
}

#code
{
padding: 0.2em;
font-size: 1.2em;
padding-left: 40px;
}

#codeCheck
{
border: 1px solid #000;
background-color: #BCB;
padding: 0.25em 0.5em;
color: #000;
cursor: pointer;
}

#price.success
{
padding-left: 26px;
}

#proceed, #cancel
{
background-color: #9D9;
padding: 0.5em 1em;
border: 1px solid #000;
margin: 1em 1em;
}

#cancel
{
background-color: #CCC;
color: #999;
border: 1px solid #999;
}

input[type="image"]
{
margin: 0.5em;
transition: all 0.5s ease;
}

input[type="image"]:hover
{
transform: scale(1.2);
}

#lang
{
position: absolute;
left: 50%;
top: 30px;
margin-left: 495px;
z-index: 1;
}


#lang a
{
display: block;
width: 27px;
height: 21px;
background-position: right center;
background-repeat: no-repeat;
-webkit-box-shadow: inset 5px 0px 5px 0px rgba(0,0,0,0.3);
-moz-box-shadow: inset 5px 0px 5px 0px rgba(0,0,0,0.3);
box-shadow: inset 5px 0px 5px 0px rgba(0,0,0,0.3);
margin: 5px 0 10px 0;
border-top: 1px solid #000;
border-right: 1px solid #000;
border-bottom: 1px solid #000;
opacity: 0.4;
}

#lang a:hover
{
width: 32px;
opacity: 1;
}

#lang a.ru
{
background-image: url(/i/ru.png);
}

#lang a.en
{
background-image: url(/i/en.png);
}

#lang a.pt
{
background-image: url(/i/pt.png);
}

#slider
{
margin: 0;
}

.softwareTitle
{
font-weight: bold;
}

body .mac, body .win, body .unix
{
display: none;
}

body.mac img.mac, body.mac span.mac, body.mac a.mac,
body.win img.win, body.win span.win, body.win a.win,
body.unix img.unix, body.unix span.unix, body.unix a.unix
{
display: inline-block;
}

body.mac div.mac, body.mac p.mac,
body.win div.win, body.win p.win,
body.unix div.unix, body.unix p.unix
{
display: block;
}


a.buy {
	position: relative;
    color: rgba(255,255,255,1) !important;
    text-decoration: none;
    font-weight: bold;
margin: 0 1em 1em 1em;
text-indent: 0;
display: inline-block;
    padding: 4px 1em 4px 1em;
text-decoration: none !important;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    background-color: hsl(100, 50%, 40%);
    -webkit-box-shadow: 0px 9px 0px hsl(100, 50%, 20%), 0px 9px 25px rgba(0,0,0,.7);
    -moz-box-shadow: 0px 9px 0px hsl(100, 50%, 20%), 0px 9px 25px rgba(0,0,0,.7);
    box-shadow: 0px 9px 0px hsl(100, 50%, 20%), 0px 9px 25px rgba(0,0,0,.7);
	text-align: center;
text-shadow: -1px -1px 0 #333;
 	 	 -moz-transition: all 0.5s ease-in-out;
 	 	 -o-transition: all 0.5s ease-in-out;
 	 	 transition: all 0.5s ease-in-out;
 	 	 -webkit-transition: all 0.5s ease-in-out;
}

a.buy.red, body.win a.buy.win, body.mac a.buy.mac, body.unix a.buy.unix
{
background-color: hsl(0, 50%, 40%);
-webkit-box-shadow: 0px 9px 0px hsl(0, 50%, 20%), 0px 9px 25px rgba(0,0,0,.7);
-moz-box-shadow: 0px 9px 0px hsl(0, 50%, 20%), 0px 9px 25px rgba(0,0,0,.7);
box-shadow: 0px 9px 0px hsl(0, 50%, 20%), 0px 9px 25px rgba(0,0,0,.7);
}



a.buy:hover
{
background-color: hsl(100, 50%, 50%);
transform: translate(0px, -6px);
-webkit-transform: translate(0px, -6px);
-moz-transform: translate(0px, -6px);
-o-transform: translate(0px, -6px);
-ms-transform: translate(0px, -6px);
-webkit-box-shadow: 0px 9px 0px hsl(100, 50%, 20%), 0px 15px 45px rgba(0,0,0,.3);
-moz-box-shadow: 0px 9px 0px hsl(100, 50%, 20%), 0px 15px 45px rgba(0,0,0,.3);
box-shadow: 0px 9px 0px hsl(100, 50%, 20%), 0px 15px 45px rgba(0,0,0,.3);
}

a.buy.red:hover, body.win a.buy.win:hover, body.mac a.buy.mac:hover, body.unix a.buy.unix:hover
{
background-color: hsl(0, 50%, 50%);
-webkit-box-shadow: 0px 9px 0px hsl(0, 50%, 20%), 0px 15px 45px rgba(0,0,0,.3);
-moz-box-shadow: 0px 9px 0px hsl(0, 50%, 20%), 0px 15px 45px rgba(0,0,0,.3);
box-shadow: 0px 9px 0px hsl(0, 50%, 20%), 0px 15px 45px rgba(0,0,0,.3);
}

a.buy:active 
{
    -webkit-box-shadow: 0px 3px 0px hsl(100, 50%, 20%), 0px 3px 6px rgba(0,0,0,.9);
    -moz-box-shadow: 0px 3px 0px hsl(100, 50%, 20%), 0px 3px 6px rgba(0,0,0,.9);
    box-shadow: 0px 3px 0px hsl(100, 50%, 20%), 0px 3px 6px rgba(0,0,0,.9);
    position: relative;
    top: 6px;
}

a.buy.red:active, body.win a.buy.win:active, body.mac a.buy.mac:active, body.unix a.buy.unix:active
{
-webkit-box-shadow: 0px 3px 0px hsl(0, 50%, 20%), 0px 3px 6px rgba(0,0,0,.9);
-moz-box-shadow: 0px 3px 0px hsl(0, 50%, 20%), 0px 3px 6px rgba(0,0,0,.9);
box-shadow: 0px 3px 0px hsl(0, 50%, 20%), 0px 3px 6px rgba(0,0,0,.9);

}

a.show
{
display: inline-block !important;
}


p.buyButtons
{
text-align: center;
margin-top: 1em;
}

img.screen
{
box-shadow: 0 0 20px #999;
margin: 1em 0 1em 0;
}

.action
{
position: relative;
top: 4em;
}

.right
{
left: auto;
right: 20px;
}

.top
{
bottom: 200px;
}

@media only screen and (max-width: 1024px) and (min-width: 768px) {

.subtitle{
font-size: 13px;
width: 160px;
top: -12px;
}

#first
{
width: 100%;
background: #FFF;
}

#first .slogan
{
font-size: 30px;
}

#lang
{
left: auto;
right: 0;
top: 0;
z-index: 999;
}

#lang a
{
border-top: 0;
border-left: 1px solid #000;
box-shadow: none;
-webkit-box-shadow: none;
}

}



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

#first
{
width: 100%;
background: #FFF;
}

#first .slogan
{
font-size: 20px;
}

#first .man
{
transform: scale(0.8) translate(-20%, 20%);
}

.subtitle
{
font-size: 13px;
width: 130px;
top: -12px;
}

img.floatRight
{
max-width: 100%;
float: none;
}

#lang
{
left: auto;
right: 0;
top: 0;
z-index: 999;
}

#lang a
{
border-top: 0;
border-left: 1px solid #000;
box-shadow: none;
-webkit-box-shadow: none;
}

}