/* 
    Created on : 10.09.2015, 13:43:56
    Author     : Евгений
*/

.bg_facebook_icon{
    width:            36px;
    height:           36px;
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAYAAADhAJiYAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABx0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTNui8sowAAAAWdEVYdENyZWF0aW9uIFRpbWUAMDgvMTcvMTXk9H3AAAADT0lEQVRYhcXYzatVVRjH8c/ZnnutKGuSmilRQVDQ6Kko7yAIrRzYC/aClBMHjSIaGNWgNyeVk4jGNUgiKgXDgWUhBGqGPX9B9IZUvkRkkna9V2+Dta+djud69j4K/mZ7vfzWd++113qetTozMzOaKjMrXI87sQbLsaiv2SHsxVbsw48RcbrpGJ0mQJnZwYN4vAYZa+g/VYN9hE8jYuhgQ4EycxWex90NIebSV3gzInaMBJSZl2AjntX8iwzTFN7GSxHxT2OgzFyMD3DPBQLp1y48EREHhwJl5hJsw+0tB5nECUzPeuMyXDpH+/14OCJ+mRMoM+dhB1a2ADmC95WVdbAG6yjTsx7PnKPvF1gVEadmC7p9Dd5oCfM91kbE/kGVmfnzkP4r6zGfmy2oejqvwIYWMKewcS6YWpc38NmQmff+Dygzx/BqCxj4Vfnk59Kxhl4v1wxnpux+TLQE+gtHewsycz4ewzL8qfn0T9QM27s12ZMtYeA0+veMm/EOrhzBb11mflZhKR4awWDBAKBxXDGCFyU0Le0qgXK8RccjOIyfBtQdVQLqAmX5L8a1DX3HcVcXj7aAgXfxlrIBTvbVfae8aaeuf0pZ1k31SFf7n/l4RBweVFGnGb/PPmdm239peYWFLTvNa9F2WUvvRV1ltVTDWvZoLDM7g3KbzOxiSf04jetaAp3uDx1NtA53ZOYBPB0Rx3vqbsR7uEqJZTe1Ne9q93Uo07BMCaTz0Qs0hltqoFFUVbXxKPpDiWe9mnL2ymujQxW+HrFzpSzvYWVttKfCx+dhcKG1pcI3OHmxSRSGfRUOKCnrxdY2HKgiYlpJQS+2NkfE9OyS34ndLQ1mnB3tB5U10W58Tr0HRcQUXmlp0nH2HjbqKnutZvjPMCJ2YVMLk2n83Vd2TNmL2mhTRHw5+9AfOl7ArVjVwGgeFmbmCeXFTii5T5twtKMe84wGHRQXY4vhacmkkqRNKdN0Skldl2qWEezFmv7T61xH6auxGfc1MB5FO7FuUF41MLBGxBE8oGR7F3LTPFl7rp4ryWtyHbMCLzr/i4ddeL33Bx4JqAdstXJZtVbzQ8FJfIitEbG9SYfGQD1gN+A25XAwgWv6mvyGPfgE30bED238/wV6xwtKWwrOxgAAAABJRU5ErkJggg==');
}



.bg_app_icon{
    width:64px; height:64px; 
}


.sprites{ background:url("sprites.png") top left no-repeat; }
.bg_video_play{ width:88px; height:88px; background-position:-10px -10px; }
.bg_appstore{ width:225px; height:78px; background-position:-10px -108px; }
.bg_googleplay{ width:225px; height:78px; background-position:-10px -196px; }
.bg_arrow_left_b{ width:24px; height:61px; background-position:-108px -10px; }
.bg_arrow_right_b{ width:24px; height:61px; background-position:-142px -10px; }
.bg_ipad_pic{ width:40px; height:50px; background-position:-176px -10px; }
.bg_imac_pic{ width:54px; height:44px; background-position:-10px -284px; }
.bg_up_arrow_circle{ width:36px; height:36px; background-position:-74px -284px; }
.bg_twitt{ width:36px; height:36px; background-position:-120px -284px; }
.bg_facebook{ width:36px; height:36px; background-position:-166px -284px; }
.bg_gplus{ width:36px; height:36px; background-position:-10px -338px; }
.bg_iphone_pic{ width:18px; height:34px; background-position:-212px -284px; }
.bg_left_arrow_triangle{ width:12px; height:30px; background-position:-56px -338px; }
.bg_page_dot{ width:12px; height:12px; background-position:-78px -338px; }



.wrapper{
    width: 100%;
    margin: 0;
    overflow: hidden;
}
.content-container{
    width: 90%;
    margin: 0 5%;
    position: relative;
}

body.screens_page{
    font-size: 18px;
    line-height: 1.2em;
}

.clr-l-blue{
    color: #357DC1;
}
.clr-ll-blue{
    color: #99E5FF;
}

.clr-g-blue{
    color: #8CAAC5;
}
.clr-d-blue{
    color: #0B3157;
}
.clr-gray{
    color: #4C6D8E;
}

.f-size-xxl{
    font-size: 48px;
    line-height: 54px;
}
.f-size-l{
    font-size: 24px;
    line-height: 29px;
}
.f-size-m{
    font-size: 18px;
}
.f-size-s{
    font-size: 16px;
    line-height: 19px;
}
.f-size-xs{
    font-size: 14px;
    line-height: 17px;
}
.wrapper.main {
    padding-top: 120px
}
p+p{
    margin-top: 20px;
}

.wrapper.header{
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 5;
}
.wrapper.main > article{
    padding: 40px 0;
}
.page-section.light-bg{
    /* background-color: rgba(18,34,56, 0.5);*/
}
.page-section{
    padding: 4% 0;
}
#top{
    padding: 0;
}
.wrapper{
    min-width: 315px;
}
em{
    font-style: normal;
}

@media only screen and (min-width: 1860px) {

    /* ===============
        Maximal Width
       =============== */

    .wrapper {
        max-width: 1920px;
        margin: 0 auto;
    }
}
@media only screen and (min-width: 1200px) {

    /* ===============
        Maximal content Width
       =============== */

    .content-container {
        width: 1080px; /* 1200px - 10% for margins */
        margin: 0 auto;
    }
}

a {
    color: inherit;
    text-decoration: none;
}
.alink{
    color: #0085B2;
}
h1{
    font-size: 32px;
    margin: 14px 0 0px;
    font-weight: normal;
}
h2{
    font-size: 24px;
    margin: 25px 0 35px;
    font-weight: normal;
}
h3{
    font-weight: normal;
    margin-top: 0.5em;
    font-size: 24px;
    margin-bottom: 0.5em;
}
h4{
    font-weight: normal;
    font-size: 20px;
    margin-bottom: 0.5em;
}


/* ===============
        header
       =============== */

.header{
    padding: 20px 0;

}
.logo-text {
    font-family: "Myriad Pro", "Gill Sans", "Gill Sans MT", Calibri, sans-serif;
}
.scrolled .header{
   
}
.header .back-arrow{
    position: absolute;
    left: -3%;
    top: 0;
    bottom: 0;
    margin:auto;
}
.header .logo-icon{
    margin-right: 12px;
    border-radius: 12px;
}

.main-logo{
    max-width: 330px;
}
.slogan{
    font-style: italic;
    margin-right: 20px;
    font-size: 21px;
}
.header aside{
    padding: 14px 0;
}

/* ===============
        main
       =============== */
.section-header{
    padding: 0 10px;
}
.section-header > span{
    margin: 0 10px;
}
.screens-section + .screens-section{
    margin-top: 7%;
}

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

}

@media only screen and (min-width: 961px) {

}

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

}



#copyright{
    min-width: 50%;
    min-width: calc(50% - 44px);
}

.contact-wrap {
    /*max-width: 450px;
    margin: 10% 0;*/
}
.contact-wrap p:first-of-type{
    margin-top: 0;
}
.markets-wrap{
    font-size: 0;
    text-align: center;
}
.markets-wrap p{
    font-size: 16px;
    text-align: left;
    padding: 20px 0 0;
}
.copyright-wrap {
    margin: 4% 0 5%;
    height: 100px;
    position: relative;
}
.copyright-wrap a.bg_up_arrow_circle{
    position: absolute;
    left: 0; right: 0; bottom: -20px;
    margin: auto;
}
.m-link-wrap{
    width: 50%;
    text-align: center;
    min-width: 260px;
    padding: 10px 0;
}



/* ===============
        screens
       =============== */
.screens-body{
        line-height: 0;
    font-size: 0;
    text-align: center;
}
.screenshot-wrap{
    padding: 10px;
    position: relative;
    cursor: pointer;
    box-sizing: border-box;
    display: inline-block;
}
.screenshot-wrap > a{
    max-height: 100%;
    max-width: 100%;
        display: block;
}
.screenshot-wrap > a > img{
    max-height: 100%;
    max-width: 100%;
}
@media only screen and (max-width: 359px) {
    .iphone-screens .screenshot-wrap{
        width: 90%;
    }
    .ipad-screens .screenshot-wrap{
        width: 90%;
    }
    .imac-screens .screenshot-wrap{
        width: 90%;
    }
}
@media only screen and (min-width: 360px) {
    .iphone-screens .screenshot-wrap{
        width: 50%;
    }
    .ipad-screens .screenshot-wrap{
        width: 90%;
    }
    .imac-screens .screenshot-wrap{
        width: 90%;
    }
}
@media only screen and (min-width: 480px) {
    .iphone-screens .screenshot-wrap{
        width: 33%;
    }
    .ipad-screens .screenshot-wrap{
        width: 50%;
    }
    .imac-screens .screenshot-wrap{
        width: 50%;
    }
}
@media only screen and (min-width: 890px) {
    .iphone-screens .screenshot-wrap{
        width: 25%;
    }
    .ipad-screens .screenshot-wrap{
        width: 33%;
    }
    .imac-screens .screenshot-wrap{
        width: 33%;
    }
}
@media only screen and (min-width: 1024px) {
    .ipad-screens .screenshot-wrap{
        width: 25%;
    }
    .imac-screens .screenshot-wrap{
        width: 25%;
    }
}
@media only screen and (min-width: 1200px) {
    .iphone-screens .screenshot-wrap{
        width: 16.6%;
    }
    .ipad-screens .screenshot-wrap{
        width: 20%;
    }
    .imac-screens .screenshot-wrap{
        width: 20%;
    }
}


@media only screen and (max-width: 680px) {
    .wrapper.header{
        position: static;
    }
    .wrapper.main {
        padding-top: 0;
    }
    .f-size-xxl{
        font-size: 32px;
        line-height: 36px;
    }

}

.bb.animated::before, .bb.animated::after {
  position: absolute;
  top: 50%;
    bottom: 0;
    left: 50%;
    right: 0;
  padding: 0px;
  border: 2px solid white;
}

.bb {
  position: relative;
  padding: 2px;
}
.bb.animated:hover::before, .bb.animated:hover::after{
  content: '';
  z-index: -1;
  margin: auto;
  animation: clipMe 6s linear infinite;
}
.bb.animated:hover::before {
  animation-delay: -3s;
}


@keyframes clipMe {
  0%, 100% {
    top: 50%;
    bottom: 0;
    left: 50%;
    right: 0;
    /*border: none;
    border-right: 1px solid red;
    border-bottom: 1px solid red;*/
  }
  12.5%{
    top: 0;
    left: 98%;
    right: 0;
    bottom: 0;
    /*border: none;
    border-top: 1px solid red;
    border-right: 1px solid red;*/
  }
  25% {
    top: 0;
    bottom: 50%;
    left: 50%;
    right: 0;
  /*  border: none;
    border-top: 1px solid red;
    border-right: 1px solid red;*/
  }
  37.5%{
    top: 0%;
    left: 0%;
    bottom: 98%;
    right: 0;
  /*  border: none;
    border-top: 1px solid red;*/
  }
  50% {
    top: 0%;
    bottom: 50%;
    left: 0%;
    right: 50%;
   /* border: none;
    border-top: 1px solid red;
    border-left: 1px solid red;*/
  }
  62.5%{
    left: 0%;
    right: 98%;
    bottom: 0%;
    top: 0%;
 /*  border: none;
    border-left: 1px solid red;*/
  }
  75% {
    top: 50%;
    bottom: 0;
    left: 0%;
    right: 50%;
/*    border: none;
    border-left: 1px solid red;
    border-bottom: 1px solid red;*/
  }
  87.5%{
      top: 98%;
      left: 0%;
      right: 0;
      bottom: 0;
  /*    border: none;
      border-bottom: 1px solid red;*/
  }
}

@-webkit-keyframes shake {
  from, to, 25% {
    -webkit-transform: translate3d(0, 0, 0) rotateZ(0);
    transform: translate3d(0, 0, 0) rotateZ(0);
  }

  5%, 15% {
    -webkit-transform: translate3d(-5px, 0, 0) rotateZ(-5deg);
    transform: translate3d(-10px, 0, 0)  rotateZ(-10deg);
  }

  10%, 20% {
    -webkit-transform: translate3d(5px, 0, 0) rotateZ(5deg);
    transform: translate3d(10px, 0, 0) rotateZ(10deg);
  }
  
}

@keyframes shake {
  from, to, 25% {
    -webkit-transform: translate3d(0, 0, 0) rotateZ(0);
    transform: translate3d(0, 0, 0) rotateZ(0);
  }

  5%, 15% {
    -webkit-transform: translate3d(-5px, 0, 0) rotateZ(-5deg);
    transform: translate3d(-10px, 0, 0)  rotateZ(-10deg);
  }

  10%, 20% {
    -webkit-transform: translate3d(5px, 0, 0) rotateZ(5deg);
    transform: translate3d(10px, 0, 0) rotateZ(10deg);
  }
  
}

.animated.shake {
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
  -webkit-animation-name: shake;
  animation-name: shake;
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
  -webkit-animation-delay: 1s;
  animation-delay: 1s;
  -webkit-animation-fill-mode: none;
  animation-fill-mode: none;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}
.animated.shake.delay_1{
    -webkit-animation-delay: 1s;
  animation-delay: 1s;
}
.animated.shake.delay_2{
    -webkit-animation-delay: 1.5s;
  animation-delay: 1.5s;
}
.animated.shake.delay_3{
    -webkit-animation-delay: 2s;
  animation-delay: 2s;
}