@font-face {
    font-family: 'PT Sans';
    font-style: normal;
    font-weight: 400;
    src: local('PT Sans'), local('PTSans-Regular'), url('PTSans_normal.woff') format('woff');
}
@font-face {
    font-family: 'PT Sans';
    font-style: normal;
    font-weight: 700;
    src: local('PT Sans Bold'), local('PTSans-Bold'), url('PTSans_bold.woff') format('woff');
}
@font-face {
    font-family: 'PT Sans';
    font-style: italic;
    font-weight: 400;
    src: local('PT Sans Italic'), local('PTSans-Italic'), url('PTSans_italic.woff') format('woff');
}
@font-face {
    font-family: 'PT Sans';
    font-style: italic;
    font-weight: 700;
    src: local('PT Sans Bold Italic'), local('PTSans-BoldItalic'), url('PTSans_bold_italic.woff') format('woff');
}

@media screen and (min-width: 946px) {
    .wrapper, .reccomendations{
        margin: 0 auto;
        width: 945px;
    }
    .wrapper2{
        margin: 0 auto;
        width: 945px;
        margin-bottom: 90px;
    }
    /*HEADER*/
    header{
        height: 80px;
    } 
    header img {
        margin-top: 20px;
    }
    header > nav {
        display: inline-block;
        margin-left: 40px;
        vertical-align: top;
    }
    .header-nav li{
        display: inline-block;
        padding-top: 30px;
        padding-right: 10px; 
    }
    .header-nav li:last-child{
        padding-left: 10px;
    }
    .header-nav a{
        color:#ff7e00;
        font-family: 'PT Sans';
        font-size: 19px;
        text-transform: uppercase;
        text-decoration: none;
        font-weight: bold;
    }
    .header-nav a:hover{
        color:#fe4419;
    }
    form[name="signUp"] {
        display: inline-block;
        vertical-align: top;
        margin-top:23px;
        margin-left: 10px;
    }
    form[name="signUp"] button {
        background-color:#259be6; 
        border-style: none;
        border-radius: 15px;
        font-family: 'PT Sans';
        font-size: 15px;
        color:white;
        width: 80px;
        height: 30px;
        -webkit-box-shadow: 0px 2px 0px 0px rgba(5, 120, 193, 1);
        -moz-box-shadow:    0px 2px 0px 0px rgba(5, 120, 193, 1);
        box-shadow:         0px 2px 0px 0px rgba(5, 120, 193, 1);
    }
    form[name="signUp"] button:hover{
        cursor: pointer;
        background-color: rgba(5, 120, 193, 1);
    }
    form[name="signUp"] span{
        color: #999999;
        font-family: 'PT Sans';
        font-size: 15px;
    }
    form[name="signUp"] .register-link {
        font-family: 'PT Sans';
        font-size: 15px;
        color:#259be6;
        text-decoration: none;
        border-bottom:1px dashed #259be6;
    }
    form[name="signUp"] .register-link:hover {
        color: rgba(5, 120, 193, 1);
    }
    form[name="lang"] {
        display: inline-block;
        vertical-align: top;
        margin-top:25px;
        margin-left: 20px;
    }
    form[name="lang"] button {
        background-color:#00a917; 
        border-style: none;
        border-radius: 5px;
        font-family: 'PT Sans';
        font-size: 13px;
        color:white;
        height: 23px;
        -webkit-box-shadow: 0px 2px 0px 0px rgba(3, 135, 2, 1);
        -moz-box-shadow:    0px 2px 0px 0px rgba(3, 135, 2, 1);
        box-shadow:         0px 2px 0px 0px rgba(3, 135, 2, 1);
    }
    form[name="lang"] button:hover{
        cursor: pointer;
        background-color: rgba(3, 105, 22, 1);
    }
    form[name="lang"] .variants{
        border: 2px solid green;
        margin-top: 10px;

    }
    form[name="lang"] .variants ul li{
        display: inline-block;
        margin-right: 10px;
    }
    .variants {
        display: none;
        position: relative;
        background: white;
        border: 2px solid green;
        font-family: 'PT Sans';
        font-size: 13px;
        color:green;
        padding-left: 10px;
        padding-top: 10px;
        padding-bottom: 10px;
        margin-left: -180px;
    }
    .variants a{
        text-decoration:none;
        color:green;
    }    
    .variants a:hover{
        color:#37aeda;
    }
    .variants ul li:last-child{
        margin-right: 0;
    }
    .variants:after, .variants:before {
        bottom: 100%;
        left: 95%;
        border: solid transparent;
        content: " ";
        height: 0;
        width: 0;
        position: absolute;
        pointer-events: none;
    }

    .variants:after {
        border-color: rgba(255, 255, 255, 0);
        border-bottom-color: white;
        border-width: 5px;
        margin-left: -5px;
    }
    .variants:before {
        border-color: rgba(0, 183, 0, 0);
        border-bottom-color: green;
        border-width: 8px;
        margin-left: -8px;
    }

    /*ILLUSTRATION*/
    .illustration{
        width: 100%;
        height: 800px;
        overflow: hidden;   
        -webkit-box-shadow: inset 0px 10px 10px -10px rgba(0,0,0,0.44);
        -moz-box-shadow: inset 0px 10px 10px -10px rgba(0,0,0,0.44);
        box-shadow: inset 0px 10px 10px -10px rgba(0,0,0,0.44);
        background: #afe9fe; /* Old browsers */
        background: -moz-linear-gradient(top,  #afe9fe 61%, #ffffff 100%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(61%,#afe9fe), color-stop(100%,#ffffff)); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top,  #afe9fe 61%,#ffffff 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top,  #afe9fe 61%,#ffffff 100%); /* Opera 11.10+ */
        background: -ms-linear-gradient(top,  #afe9fe 61%,#ffffff 100%); /* IE10+ */
        background: linear-gradient(to bottom,  #afe9fe 61%,#ffffff 100%); /* W3C */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#afe9fe', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
    }
    /*clouds*/
    .clouds{
        position: relative;
    }
    .fly{
        position: absolute;
        z-index: 1;    
        -webkit-animation: spinfly 5s linear infinite;
        -moz-animation: spinfly 5s linear infinite;
        -o-animation: spinfly 5s linear infinite;
    }
    .cloud{
        position: absolute;
        z-index: 2;
        -webkit-animation: moveclouds 15s linear infinite;
        -moz-animation: moveclouds 15s linear infinite;
        -o-animation: moveclouds 15s linear infinite;
    }
    #cloud1{
        top:50px;
        left:80%;
    }
    #cloud2{
        top:400px;
        left:80%;
    }
    #cloud3{
        top:100px;
        left:-5%;
    }
    #cloud4{
        top:400px;
        left:10%;
    }
    #cloud5{
        top:150px;
        left:15%;
    }
    #cloud6{
        top:290px;
        left:-3%;
    }
    #cloud7{
        top:40px;
        left:95%;
    }
    #cloud8{
        top:180px;
        left:80%;
    }
    #cloud9{
        top:65px;
        left:50%;
    }
    #cloud9{
        top:65px;
        left:50%;
    }
    #fly1{
        top:80px;
        left:1%;
        z-index: 3;
    }
    #fly2{
        top:80px;
        right:-5%;
    }
    #fly3{
        top:100px;
        left:0%;
        z-index: 3;
    }
    #fly4{
        top:90px;
        right:15%;
    }
    #fly5{
        top:460px;
        left:10%;
    }
    #fly6{
        top:400px;
        right:5%;
    }
    @-webkit-keyframes moveclouds {
        0% {margin-left: 0px;}
        50% {margin-left: -50px;}
        100% {margin-left: 0px;}
    }
    @-moz-keyframes moveclouds {
        0% {margin-left: 0px;}
        50% {margin-left: -50px;}
        100% {margin-left: 0px;}
    }
    @-o-keyframes moveclouds {
        0% {margin-left: 0px;}
        50% {margin-left: -50px;}
        100% {margin-left: 0px;}
    }
    @-webkit-keyframes moveclouds {
        0% {margin-left: 0px;}
        50% {margin-left: -50px;}
        100% {margin-left: 0px;}
    }
    @-moz-keyframes moveclouds {
        0% {margin-left: 0px;}
        50% {margin-left: -50px;}
        100% {margin-left: 0px;}
    }
    @-o-keyframes moveclouds {
        0% {margin-left: 0px;}
        50% {margin-left: -50px;}
        100% {margin-left: 0px;}
    }
    @-ms-keyframes spinfly { 
        0% { -ms-transform: rotate(0deg); }
        50% { -ms-transform: rotate(10deg); }
        100% { -ms-transform: rotate(0deg); }
        }
    @-moz-keyframes spinfly { 
        0% { -moz-transform: rotate(0deg); }
        50% { -moz-transform: rotate(10deg); }
        100% { -moz-transform: rotate(0deg); }
        }
        @-webkit-keyframes spinfly { 
    0% { -webkit-transform: rotate(0deg); }
        50% { -webkit-transform: rotate(10deg); }
        100% { -webkit-transform: rotate(0deg); }
        }
    @keyframes spinfly { 
        0% { transform: rotate(0deg); }
        50% { transform: rotate(10deg); }
        100% { transform: rotate(0deg); }
    }
    .content{
        margin: auto; 
        width: 945px;
        z-index: 10;    
        display: table;
    }
    .center{
        text-align: center;
    }
    .content .logo{
        margin-top:145px;
    }
    .content h2{
        margin-top:60px;
        font-family: 'PT Sans';
        font-size: 30px;
        text-transform: uppercase;
        font-weight: bold;
        color:#23a3d3;
    }

    form[name="register"] , form[name="register_bottom"] {
        margin-top:70px;
    }
    form[name="register"] button , form[name="register_bottom"] button{
        background-color:#ff7e00; 
        border-style: none;
        border-radius: 25px;
        font-family: 'PT Sans';
        font-size: 25px;
        color:white;
        height: 60px;
        padding-left: 25px;
        padding-right: 25px;
        -webkit-box-shadow: 0px 2px 0px 0px rgba(251, 83, 0, 1);
        -moz-box-shadow:    0px 2px 0px 0px rgba(251, 83, 0, 1);
        box-shadow:         0px 2px 0px 0px rgba(251, 83, 0, 1);
        opacity: .99;
    }
     form[name="register"] button:hover, form[name="register_bottom"] button:hover{
        cursor: pointer;
        background-color: rgba(251, 83, 0, 1);
    }
    .content h3{
        margin-top:75px;
        font-family: 'PT Sans';
        font-size: 25px;
        color:#23a3d3;
        opacity: .99;
    }

    .bottomImg{
        width: 100%;
        min-width: 945px;
        margin-top: -110px;
        margin-left: auto;
        min-height: 300px;
    }
    .bottomCl{
        height: 100px;
        background: url(../img/cloud_bottom.png) repeat-x;
        margin-top: -70px;
    }

    /*TEXT*/

    .text{
        margin-top: 75px;
        margin-bottom: 75px;
    }
    .left, .right{
        width: 50%;
    }
    .right{
        float:right;
    }
    .left{
        float:left;
    }
    .left img{
        margin-left:60px;
    }
    .right img{
        margin-left:40px;
    }
    .text:after,.text2:after{
        content: '';
        display: block;
        clear: both;
    } 
    .text h2, .text h3{
        font-family: 'PT Sans';
    }
    .text h2 {
        font-size: 27px;
        text-transform: uppercase;
        font-weight: bold;
        color:#ff7e00;
        margin-top: 40px;
    }
    .text h3{
        font-size: 20px;
        line-height: 25px;
        margin-top: 20px;
    }
    .text2{
        margin-top: 50px;
    }
    .text2 h2, .text2 h3{
        white-space: pre-wrap;
        font-family: 'PT Sans';
    }
    .text2 h2 {
        font-size: 27px;
        text-transform: uppercase;
        font-weight: bold;
        color:green;
        margin-top: 10px;
    }
    .text2 h3{
        font-size: 20px;
        line-height: 25px;
        margin-top: 20px;
    }

    /*BOTTOM*/
    .tarife_block{
        width: 100%;;
        background: #d1f2ff;
        overflow: hidden;
        opacity: 0.99;
    }
    .cloud_bottom2{
        height: 57px;
        background: url(../img/cloud_bottom2.png) repeat-x;
    }
    .tarife_block h2, .reccomendations h2{
        margin-top: 70px;
        text-align: left;
        font-size: 27px;
        text-transform: uppercase;
        font-weight: bold;
        color:#00a917;
    }
    .tarifes{
      margin-top: 50px;
    }
    .tarifes ul{
      list-style:none;
    }
    .tarifes ul li{
      display:inline-block;
      vertical-align: middle;
      position:relative;
      height:274px;  
      margin-right: 33px;
    }
    .tarifes .tarife{
      height:250px;
      width:290px;
      background:white; 
      text-align: center;
    }
    .tarifes  ul li:last-child{
        margin-right: 0px; 
    }

    .tarife h1,.tarife h3{
        white-space: pre-wrap;
        font-family: 'PT Sans';
        padding-top: 30px;

    }
    #tarife3 h1{
        font-size: 37px;
    }
    #tarife2 h1{
        font-size: 48px;
    }
    #tarife2 h3{
        padding-left: 54px;
        padding-right: 54px;
    }
    #tarife1 h1{
        font-size: 40px;
    }
    #tarife1 h3{
        padding-left: 54px;
        padding-right: 54px;
    }
    .tarife h3{
        font-size: 18px;
        margin-top:0;
        color:black; 
    }
    .bigger h1{
        padding-top: 48px;
    }
    .tarifes .bigger{
        height:290px;
        width:330px; 
        border:4px solid #00a917;
        z-index: 10;
        margin-top: -24px;
        margin-right: -24px;
        margin-left: -24px;
    }
    #tarife1{
        color:#ff7e00;
    }
    #tarife2{
        color:#00a917;
    }
    #tarife3{
        color:#37aeda;
    }
    form[name="details_fremium"] , form[name="details_premium"] , form[name="details_credits"] {
        margin-top:30px;
    }
    form[name="details_fremium"] button , form[name="details_premium"] button,  form[name="details_credits"] button{
        border-style: none;
        border-radius: 20px;
        font-family: 'PT Sans';
        font-size: 16px;
        color:white;
        height: 40px;
        padding-left: 15px;
        padding-right: 15px;
    }
    form[name="details_fremium"] button:hover , form[name="details_premium"] button,  form[name="details_credits"] button{
        cursor: pointer;
    }
    form[name="details_fremium"] button{
        background: #ff7e00;
        -webkit-box-shadow: 0px 2px 0px 0px rgba(251, 83, 0, 1);
        -moz-box-shadow:    0px 2px 0px 0px rgba(251, 83, 0, 1);
        box-shadow:         0px 2px 0px 0px rgba(251, 83, 0, 1);
    }
    form[name="details_fremium"] button:hover{
        background: rgba(251, 83, 0, 1);
    }
    form[name="details_premium"] button{
        margin-top: -6px;
        background: #00a917;
        -webkit-box-shadow: 0px 2px 0px 0px rgba(0, 141, 19, 1);
        -moz-box-shadow:    0px 2px 0px 0px rgba(0, 141, 19, 1);
        box-shadow:         0px 2px 0px 0px rgba(0, 141, 19, 1);
    }
    form[name="details_premium"] button:hover{
        background: rgba(0, 141, 19, 1);
    }
    form[name="details_credits"] button{
        background: #37aeda;
        -webkit-box-shadow: 0px 2px 0px 0px rgba(5, 151, 193, 1);
        -moz-box-shadow:    0px 2px 0px 0px rgba(5, 151, 193, 1);
        box-shadow:         0px 2px 0px 0px rgba(5, 151, 193, 1);
    }
    form[name="details_credits"] button:hover{
        background: rgba(5, 151, 193, 1);
    }
    form[name="register_bottom"]{
        margin-top:40px;
    }
    form[name="register_bottom"] + h3 {
        margin-top:50px; 
    }
    .cloud_bottom3{
        margin-top:57px; 
        height: 57px;
        background: url(../img/cloud_bottom3.png) repeat-x;
    }
    /*slider*/
    .reccomendations .slider-container{
        margin-top: 30px;
        height: 300px;
    }

    .slider{
        font-family: 'PT Sans';
        font-size: 15px;
        font-style: italic;
        width: 810px;
        overflow: hidden;
        display: inline-block;
    }
    .slider ul{
        width: 99999px;
    }
    .slider ul li{
        float: left;
    }
    .slider blockquote img{
        margin-left: 100px;
        float: left;
        margin-top: 30px;
        margin-right:10px; 
    }
    .slider cite{
        font-family: 'PT Sans';
        font-size: 15px;
        font-style: normal;
        color: grey;
        margin-left: 120px;

    }
     .slider cite p{
        margin-top: 50px;
     }
    .slider strong{
        color:black;
    }
    .slider section{
        width: 785px;
        margin-left: 15px;
        margin-right: 15px;
    }
    .slider section:after{
        content: '';
        display: block;
        clear: both;
    }
    .slider-container .button,.slider section{
        display: inline-block;
    }
    .slider-container .button{
        font-size: 50px;
        width: 60px;
        vertical-align: top;
        margin-top: 50px;
    }
    .slider-container .button:hover{
        cursor: pointer;
    }



    /*footer*/
    footer{
        width: 100%;
        height: 105px;
        background: #d1f2ff;
        padding-top: 25px;
    }
    .logo-footer,.navigation-footer, .social{
        display: inline-block;    
        margin-left: 30px;
        vertical-align: top;
    }
    footer li{
        display: inline-block;
        padding-right: 10px; 
    }
    .docs-footer{
        margin-top: 30px;
    }
    .docs-footer li:last-child,.sitemap-footer li:last-child{
        padding-left: 10px;
    }

    .docs-footer a, .sitemap-footer a{
        color:#1b88b0;
        font-family: 'PT Sans';
        text-decoration: none;
    }
    .sitemap-footer a{
        font-size: 19px;
        text-transform: uppercase;
        font-weight: bold;
    }
    .docs-footer a{
        font-size:14px; 
    }
    .docs-footer a:hover, .sitemap-footer a:hover{
        color:#1b6a9c;
    }
    .social{
        margin-left: 0;
        display: inline-block;
    }
    #social{
        margin-left: 20px;
    }
    .social-icon{
        height: 20px;
        background: url(../img/social.png) no-repeat;
        display: inline-block;
        margin-right: 20px;
    }
    #social a:last-child{
        margin-right: 0;
    }
    .vk{
        width: 12px;
        background-position: 0 0;
    }
    .fb{
        width: 8px;
        background-position: -12px 0;
    }
    .gp{
        width: 20px;
        background-position: -20px 0;
    }
    .tw{
        width: 20px;
        background-position: -40px 0;
    }
    form[name="signUp_bottom"] {
        margin-top:20px;
    }
    form[name="signUp_bottom"] button {
        background-color:#1b88b0; 
        border-style: none;
        border-radius: 17px;
        font-family: 'PT Sans';
        font-size: 15px;
        color:white;
        height: 35px;
        width: 178px;

    }
     form[name="signUp_bottom"] button:hover{
        cursor: pointer;
        background-color: #1b6a9c;
    }

}






/***********************************************************************************/


@media screen and (max-width: 946px) {
    .wrapper, .reccomendations{
        margin: 0 auto;
        width: 100%;
    }
    .wrapper2{
        margin: 0 auto;
        width: 100%;
        margin-bottom: 90px;
    }
    /*HEADER*/
    header{
        text-align: center;
        padding-bottom: 60px;
        height: 100px;
    }
    header img {
        margin-top: 20px;
    }
    header > nav {
        display: inline-block;
        margin-left: 40px;
        vertical-align: top;
        margin-right: 50px;
    }
    .header-nav li{
        display: inline-block;
        padding-top: 30px;
        padding-right: 10px; 
    }
    .header-nav li:last-child{
        padding-left: 10px;
    }
    .header-nav a{
        color:#ff7e00;
        font-family: 'PT Sans';
        font-size: 19px;
        text-transform: uppercase;
        text-decoration: none;
        font-weight: bold;
    }
    .header-nav a:hover{
        color:#fe4419;
    }
    form[name="signUp"] {
        display: inline-block;
        vertical-align: top;
        margin-top:23px;
        margin-left: 10px;
    }
    form[name="signUp"] button {
        background-color:#259be6; 
        border-style: none;
        border-radius: 15px;
        font-family: 'PT Sans';
        font-size: 15px;
        color:white;
        width: 80px;
        height: 30px;
        -webkit-box-shadow: 0px 2px 0px 0px rgba(5, 120, 193, 1);
        -moz-box-shadow:    0px 2px 0px 0px rgba(5, 120, 193, 1);
        box-shadow:         0px 2px 0px 0px rgba(5, 120, 193, 1);
    }
    form[name="signUp"] button:hover{
        cursor: pointer;
        background-color: rgba(5, 120, 193, 1);
    }
    form[name="signUp"] span{
        color: #999999;
        font-family: 'PT Sans';
        font-size: 15px;
    }
    form[name="signUp"] .register-link {
        font-family: 'PT Sans';
        font-size: 15px;
        color:#259be6;
        text-decoration: none;
        border-bottom:1px dashed #259be6;
    }

    form[name="signUp"] .register-link:hover {
        color: rgba(5, 120, 193, 1);
    }
    form[name="lang"] {
        display: inline-block;
        vertical-align: top;
        margin-top:25px;
        margin-left: 20px;
    }
    form[name="lang"] button {
        background-color:#00a917; 
        border-style: none;
        border-radius: 5px;
        font-family: 'PT Sans';
        font-size: 13px;
        color:white;
        height: 23px;
        -webkit-box-shadow: 0px 2px 0px 0px rgba(3, 135, 2, 1);
        -moz-box-shadow:    0px 2px 0px 0px rgba(3, 135, 2, 1);
        box-shadow:         0px 2px 0px 0px rgba(3, 135, 2, 1);
    }
    form[name="lang"] button:hover{
        cursor: pointer;
        background-color: rgba(3, 105, 22, 1);
    }
    form[name="lang"] .variants{
        border: 2px solid green;
        margin-top: 10px;

    }
    form[name="lang"] .variants ul li{
        display: inline-block;
        margin-right: 10px;
    }
    .variants {
        display: none;
        position: relative;
        background: white;
        border: 2px solid green;
        font-family: 'PT Sans';
        font-size: 13px;
        color:green;
        padding-left: 10px;
        padding-top: 10px;
        padding-bottom: 10px;
        margin-left: -180px;
    }
    .variants a{
        text-decoration:none;
        color:green;
    }    
    .variants a:hover{
        color:#37aeda;
    }
    .variants ul li:last-child{
        margin-right: 0;
    }
    .variants:after, .variants:before {
        bottom: 100%;
        left: 95%;
        border: solid transparent;
        content: " ";
        height: 0;
        width: 0;
        position: absolute;
        pointer-events: none;
    }

    .variants:after {
        border-color: rgba(255, 255, 255, 0);
        border-bottom-color: white;
        border-width: 5px;
        margin-left: -5px;
    }
    .variants:before {
        border-color: rgba(0, 183, 0, 0);
        border-bottom-color: green;
        border-width: 8px;
        margin-left: -8px;
    }
    /*ILLUSTRATION*/
    .illustration{
        width: 100%;
        height: 800px;
        overflow: hidden;   
        -webkit-box-shadow: inset 0px 10px 10px -10px rgba(0,0,0,0.44);
        -moz-box-shadow: inset 0px 10px 10px -10px rgba(0,0,0,0.44);
        box-shadow: inset 0px 10px 10px -10px rgba(0,0,0,0.44);
        background: #afe9fe; /* Old browsers */
        background: -moz-linear-gradient(top,  #afe9fe 61%, #ffffff 100%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(61%,#afe9fe), color-stop(100%,#ffffff)); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top,  #afe9fe 61%,#ffffff 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top,  #afe9fe 61%,#ffffff 100%); /* Opera 11.10+ */
        background: -ms-linear-gradient(top,  #afe9fe 61%,#ffffff 100%); /* IE10+ */
        background: linear-gradient(to bottom,  #afe9fe 61%,#ffffff 100%); /* W3C */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#afe9fe', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
    }
    /*clouds*/
    .clouds{
        position: relative;
    }
    .fly{
        position: absolute;
        z-index: 1;    
        -webkit-animation: spinfly 5s linear infinite;
        -moz-animation: spinfly 5s linear infinite;
        -o-animation: spinfly 5s linear infinite;
    }
    .cloud{
        position: absolute;
        z-index: 2;
        -webkit-animation: moveclouds 15s linear infinite;
        -moz-animation: moveclouds 15s linear infinite;
        -o-animation: moveclouds 15s linear infinite;
    }
    #cloud1{
        top:50px;
        left:80%;
    }
    #cloud2{
        top:400px;
        left:80%;
    }
    #cloud3{
        top:100px;
        left:-5%;
    }
    #cloud4{
        top:400px;
        left:10%;
    }
    #cloud5{
        top:150px;
        left:15%;
    }
    #cloud6{
        top:290px;
        left:-3%;
    }
    #cloud7{
        top:40px;
        left:95%;
    }
    #cloud8{
        top:180px;
        left:80%;
    }
    #cloud9{
        top:65px;
        left:50%;
    }
    #cloud9{
        top:65px;
        left:50%;
    }
    #fly1{
        top:80px;
        left:1%;
        z-index: 3;
    }
    #fly2{
        top:80px;
        right:-5%;
    }
    #fly3{
        top:100px;
        left:0%;
        z-index: 3;
    }
    #fly4{
        top:90px;
        right:15%;
    }
    #fly5{
        top:460px;
        left:10%;
    }
    #fly6{
        top:400px;
        right:5%;
    }
    @-webkit-keyframes moveclouds {
        0% {margin-left: 0px;}
        50% {margin-left: -50px;}
        100% {margin-left: 0px;}
    }
    @-moz-keyframes moveclouds {
        0% {margin-left: 0px;}
        50% {margin-left: -50px;}
        100% {margin-left: 0px;}
    }
    @-o-keyframes moveclouds {
        0% {margin-left: 0px;}
        50% {margin-left: -50px;}
        100% {margin-left: 0px;}
    }
    @-webkit-keyframes moveclouds {
        0% {margin-left: 0px;}
        50% {margin-left: -50px;}
        100% {margin-left: 0px;}
    }
    @-moz-keyframes moveclouds {
        0% {margin-left: 0px;}
        50% {margin-left: -50px;}
        100% {margin-left: 0px;}
    }
    @-o-keyframes moveclouds {
        0% {margin-left: 0px;}
        50% {margin-left: -50px;}
        100% {margin-left: 0px;}
    }
    @-ms-keyframes spinfly { 
        0% { -ms-transform: rotate(0deg); }
        50% { -ms-transform: rotate(10deg); }
        100% { -ms-transform: rotate(0deg); }
        }
    @-moz-keyframes spinfly { 
        0% { -moz-transform: rotate(0deg); }
        50% { -moz-transform: rotate(10deg); }
        100% { -moz-transform: rotate(0deg); }
        }
        @-webkit-keyframes spinfly { 
    0% { -webkit-transform: rotate(0deg); }
        50% { -webkit-transform: rotate(10deg); }
        100% { -webkit-transform: rotate(0deg); }
        }
    @keyframes spinfly { 
        0% { transform: rotate(0deg); }
        50% { transform: rotate(10deg); }
        100% { transform: rotate(0deg); }
    }
    .content{
        margin: auto; 
        width: 100%;
        z-index: 10;    
        display: table;
    }
    .center{
        text-align: center;
    }
    .content .logo{
        margin-top:145px;
    }
    .content h2{
        margin-top:60px;
        font-family: 'PT Sans';
        font-size: 30px;
        text-transform: uppercase;
        font-weight: bold;
        color:#23a3d3;
    }

    form[name="register"] , form[name="register_bottom"] {
        margin-top:70px;
    }
    form[name="register"] button , form[name="register_bottom"] button{
        background-color:#ff7e00; 
        border-style: none;
        border-radius: 25px;
        font-family: 'PT Sans';
        font-size: 25px;
        color:white;
        height: 60px;
        padding-left: 25px;
        padding-right: 25px;
        -webkit-box-shadow: 0px 2px 0px 0px rgba(251, 83, 0, 1);
        -moz-box-shadow:    0px 2px 0px 0px rgba(251, 83, 0, 1);
        box-shadow:         0px 2px 0px 0px rgba(251, 83, 0, 1);
        opacity: .99;
    }
     form[name="register"] button:hover, form[name="register_bottom"] button:hover{
        cursor: pointer;
        background-color: rgba(251, 83, 0, 1);
    }
    .content h3{
        margin-top:75px;
        font-family: 'PT Sans';
        font-size: 25px;
        color:#23a3d3;
        opacity: .99;
    }

    .bottomImg{
        width: 100%;
        margin-top: -110px;
        margin-left: auto;
        min-height: 300px;
    }
    .bottomCl{
        height: 100px;
        background: url(../img/cloud_bottom.png) repeat-x;
        margin-top: -70px;
    }

    /*TEXT*/

    .text{
        margin-top: 75px;
        margin-bottom: 75px;
    }
    .left, .right{
        width: 50%;
    }
    .right{
        float:right;
    }
    .left{
        float:left;
    }
    .left img{
        margin-left:60px;
    }
    .right img{
        margin-left:40px;
    }
    .text:after,.text2:after{
        content: '';
        display: block;
        clear: both;
    } 
    .text h2, .text h3{
        font-family: 'PT Sans';
    }
    .text h2 {
        font-size: 27px;
        text-transform: uppercase;
        font-weight: bold;
        color:#ff7e00;
        margin-top: 40px;
    }
    .text h3{
        font-size: 20px;
        line-height: 25px;
        margin-top: 20px;
    }
    .text2{
        margin-top: 50px;
    }
    .text2 h2, .text2 h3{
        white-space: pre-wrap;
        font-family: 'PT Sans';
    }
    .text2 h2 {
        font-size: 27px;
        text-transform: uppercase;
        font-weight: bold;
        color:green;
        margin-top: 10px;
    }
    .text2 h3{
        font-size: 20px;
        line-height: 25px;
        margin-top: 20px;
    }

    /*BOTTOM*/
    .tarife_block{
        width: 100%;;
        background: #d1f2ff;
        overflow: hidden;
        opacity: 0.99;
    }
    .cloud_bottom2{
        height: 57px;
        background: url(../img/cloud_bottom2.png) repeat-x;
    }
    .tarife_block h2, .reccomendations h2{
        margin-top: 70px;
        text-align: left;
        font-size: 27px;
        text-transform: uppercase;
        font-weight: bold;
        color:#00a917;
    }
    .tarifes{
      margin-top: 50px;
    }
    .tarifes ul{
      list-style:none;
    }
    .tarifes ul li{
      display:inline-block;
      vertical-align: middle;
      position:relative;
      height:224px;  
      margin-right: 33px;
    }
    .tarifes .tarife{
      height:200px;
      width:240px;
      background:white; 
      text-align: center;
    }
    .tarifes  ul li:last-child{
        margin-right: 0px; 
    }

    .tarife h1,.tarife h3{
        white-space: pre-wrap;
        font-family: 'PT Sans';
        padding-top: 10px;

    }
    #tarife3 h1{
        font-size: 27px;
    }
    #tarife2 h1{
        font-size: 38px;
    }
    #tarife2 h3{
        padding-left: 30px;
        padding-right: 30px;
    }
    #tarife1 h1{
        font-size: 20px;
    }
    #tarife1 h3{
        padding-left: 24px;
        padding-right: 24px;
    }
    .tarife h3{
        font-size: 12px;
        margin-top:0;
        color:black; 
    }
    .bigger h1{
        padding-top: 28px;
    }
    .tarifes .bigger{
        height:240px;
        width:290px; 
        border:4px solid #00a917;
        z-index: 10;
        margin-top: -24px;
        margin-right: -24px;
        margin-left: -24px;
    }
    #tarife1{
        color:#ff7e00;
    }
    #tarife2{
        color:#00a917;
    }
    #tarife3{
        color:#37aeda;
    }
    form[name="details_fremium"] , form[name="details_premium"] , form[name="details_credits"] {
        margin-top:30px;
    }
    form[name="details_fremium"] button , form[name="details_premium"] button,  form[name="details_credits"] button{
        border-style: none;
        border-radius: 20px;
        font-family: 'PT Sans';
        font-size: 16px;
        color:white;
        height: 40px;
        padding-left: 15px;
        padding-right: 15px;
    }
    form[name="details_fremium"] button:hover , form[name="details_premium"] button,  form[name="details_credits"] button{
        cursor: pointer;
    }
    form[name="details_fremium"] button{
        background: #ff7e00;
        -webkit-box-shadow: 0px 2px 0px 0px rgba(251, 83, 0, 1);
        -moz-box-shadow:    0px 2px 0px 0px rgba(251, 83, 0, 1);
        box-shadow:         0px 2px 0px 0px rgba(251, 83, 0, 1);
    }
    form[name="details_fremium"] button:hover{
        background: rgba(251, 83, 0, 1);
    }
    form[name="details_premium"] button{
        margin-top: -6px;
        background: #00a917;
        -webkit-box-shadow: 0px 2px 0px 0px rgba(0, 141, 19, 1);
        -moz-box-shadow:    0px 2px 0px 0px rgba(0, 141, 19, 1);
        box-shadow:         0px 2px 0px 0px rgba(0, 141, 19, 1);
    }
    form[name="details_premium"] button:hover{
        background: rgba(0, 141, 19, 1);
    }
    form[name="details_credits"] button{
        background: #37aeda;
        -webkit-box-shadow: 0px 2px 0px 0px rgba(5, 151, 193, 1);
        -moz-box-shadow:    0px 2px 0px 0px rgba(5, 151, 193, 1);
        box-shadow:         0px 2px 0px 0px rgba(5, 151, 193, 1);
    }
    form[name="details_credits"] button:hover{
        background: rgba(5, 151, 193, 1);
    }
    form[name="register_bottom"]{
        margin-top:40px;
    }
    form[name="register_bottom"] + h3 {
        margin-top:50px; 
    }
    .cloud_bottom3{
        margin-top:57px; 
        height: 57px;
        background: url(../img/cloud_bottom3.png) repeat-x;
    }
    /*slider*/
    .reccomendations .slider-container{
        margin-top: 30px;
        height: 300px;
        text-align: center;
    }

    .slider{
        font-family: 'PT Sans';
        font-size: 15px;
        font-style: italic;
        width: 710px;
        overflow: hidden;
        display: inline-block;
    }
    .slider ul{
        width: 99999px;
    }
    .slider ul li{
        float: left;
    }
    .slider blockquote img{
        margin-left: 100px;
        float: left;
        margin-top: 30px;
        margin-right:10px; 
    }
    .slider cite{
        font-family: 'PT Sans';
        font-size: 15px;
        font-style: normal;
        color: grey;
        margin-left: 120px;

    }
     .slider cite p{
        margin-top: 50px;
     }
    .slider strong{
        color:black;
    }
    .slider section{
        width: 685px;
        margin-left: 15px;
        margin-right: 15px;
    }
    .slider section:after{
        content: '';
        display: block;
        clear: both;
    }
    .slider-container .button,.slider section{
        display: inline-block;
    }
    .slider-container .button{
        font-size: 50px;
        width: 60px;
        vertical-align: top;
        margin-top: 50px;
    }
    .slider-container .button:hover{
        cursor: pointer;
    }

    /*footer*/
    footer{
        width: 100%;
        background: #d1f2ff;
        padding-top: 25px;
    }
    .logo-footer,.navigation-footer, .social{
        display: inline-block;    
        margin-left: 30px;
        vertical-align: top;
    }
    footer li{
        display: inline-block;
        padding-right: 10px; 
    }
    .docs-footer{
        margin-top: 30px;
    }
    .docs-footer li:last-child,.sitemap-footer li:last-child{
        padding-left: 10px;
    }

    .docs-footer a, .sitemap-footer a{
        color:#1b88b0;
        font-family: 'PT Sans';
        text-decoration: none;
    }
    .sitemap-footer a{
        font-size: 19px;
        text-transform: uppercase;
        font-weight: bold;
    }
    .docs-footer a{
        font-size:14px; 
    }
    .docs-footer a:hover, .sitemap-footer a:hover{
        color:#1b6a9c;
    }
    .social{
        margin-left: 0;
        display: inline-block;
    }
    #social{
        margin-left: 20px;
    }
    .social-icon{
        height: 20px;
        background: url(../img/social.png) no-repeat;
        display: inline-block;
        margin-right: 20px;
    }
    #social a:last-child{
        margin-right: 0;
    }
    .vk{
        width: 12px;
        background-position: 0 0;
    }
    .fb{
        width: 8px;
        background-position: -12px 0;
    }
    .gp{
        width: 20px;
        background-position: -20px 0;
    }
    .tw{
        width: 20px;
        background-position: -40px 0;
    }
    form[name="signUp_bottom"] {
        margin-top:20px;
    }
    form[name="signUp_bottom"] button {
        background-color:#1b88b0; 
        border-style: none;
        border-radius: 17px;
        font-family: 'PT Sans';
        font-size: 15px;
        color:white;
        height: 35px;
        width: 178px;

    }
     form[name="signUp_bottom"] button:hover{
        cursor: pointer;
        background-color: #1b6a9c;
    }
    .clouds{
        display: none;
    }

}



/********************************************************************************/

@media screen and (max-width: 900px) {
    .wrapper, .reccomendations{
        margin: 0 auto;
        width: 100$;
    }
    .wrapper2{
        margin: 0 auto;
        width: 100%;
        margin-bottom: 90px;
    }
    /*HEADER*/
    header{
        text-align: center;
        padding-bottom: 60px;
        height: 100px;
    }
    header img {
        margin-top: 20px;
    }
    header > nav {
        display: inline-block;
        margin-left: 40px;
        vertical-align: top;
    }
    .header-nav li{
        display: inline-block;
        padding-top: 30px;
        padding-right: 10px; 
    }
    .header-nav li:last-child{
        padding-left: 10px;
    }
    .header-nav a{
        color:#ff7e00;
        font-family: 'PT Sans';
        font-size: 19px;
        text-transform: uppercase;
        text-decoration: none;
        font-weight: bold;
    }
    .header-nav a:hover{
        color:#fe4419;
    }
    form[name="signUp"] {
        display: inline-block;
        vertical-align: top;
        margin-top:23px;
        margin-left: 10px;
    }
    form[name="signUp"] button {
        background-color:#259be6; 
        border-style: none;
        border-radius: 15px;
        font-family: 'PT Sans';
        font-size: 15px;
        color:white;
        width: 80px;
        height: 30px;
        -webkit-box-shadow: 0px 2px 0px 0px rgba(5, 120, 193, 1);
        -moz-box-shadow:    0px 2px 0px 0px rgba(5, 120, 193, 1);
        box-shadow:         0px 2px 0px 0px rgba(5, 120, 193, 1);
    }
    form[name="signUp"] button:hover{
        cursor: pointer;
        background-color: rgba(5, 120, 193, 1);
    }
    form[name="signUp"] span{
        color: #999999;
        font-family: 'PT Sans';
        font-size: 15px;
    }
    form[name="signUp"] .register-link {
        font-family: 'PT Sans';
        font-size: 15px;
        color:#259be6;
        text-decoration: none;
        border-bottom:1px dashed #259be6;
    }
    form[name="signUp"] .register-link:hover {
        color: rgba(5, 120, 193, 1);
    }
    form[name="lang"] {
        display: inline-block;
        vertical-align: top;
        margin-top:25px;
        margin-left: 20px;
    }
    form[name="lang"] button {
        background-color:#00a917; 
        border-style: none;
        border-radius: 5px;
        font-family: 'PT Sans';
        font-size: 13px;
        color:white;
        height: 23px;
        -webkit-box-shadow: 0px 2px 0px 0px rgba(3, 135, 2, 1);
        -moz-box-shadow:    0px 2px 0px 0px rgba(3, 135, 2, 1);
        box-shadow:         0px 2px 0px 0px rgba(3, 135, 2, 1);
    }
    form[name="lang"] button:hover{
        cursor: pointer;
        background-color: rgba(3, 105, 22, 1);
    }
    form[name="lang"] .variants{
        border: 2px solid green;
        margin-top: 10px;

    }
    form[name="lang"] .variants ul li{
        display: inline-block;
        margin-right: 10px;
    }
    .variants {
        display: none;
        position: relative;
        background: white;
        border: 2px solid green;
        font-family: 'PT Sans';
        font-size: 13px;
        color:green;
        padding-left: 10px;
        padding-top: 10px;
        padding-bottom: 10px;
        margin-left: -180px;
    }
    .variants a{
        text-decoration:none;
        color:green;
    }    
    .variants a:hover{
        color:#37aeda;
    }
    .variants ul li:last-child{
        margin-right: 0;
    }
    .variants:after, .variants:before {
        bottom: 100%;
        left: 95%;
        border: solid transparent;
        content: " ";
        height: 0;
        width: 0;
        position: absolute;
        pointer-events: none;
    }

    .variants:after {
        border-color: rgba(255, 255, 255, 0);
        border-bottom-color: white;
        border-width: 5px;
        margin-left: -5px;
    }
    .variants:before {
        border-color: rgba(0, 183, 0, 0);
        border-bottom-color: green;
        border-width: 8px;
        margin-left: -8px;
    }
    /*ILLUSTRATION*/
    .illustration{
        width: 100%;
        height: 800px;
        overflow: hidden;   
        -webkit-box-shadow: inset 0px 10px 10px -10px rgba(0,0,0,0.44);
        -moz-box-shadow: inset 0px 10px 10px -10px rgba(0,0,0,0.44);
        box-shadow: inset 0px 10px 10px -10px rgba(0,0,0,0.44);
        background: #afe9fe; /* Old browsers */
        background: -moz-linear-gradient(top,  #afe9fe 61%, #ffffff 100%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(61%,#afe9fe), color-stop(100%,#ffffff)); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top,  #afe9fe 61%,#ffffff 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top,  #afe9fe 61%,#ffffff 100%); /* Opera 11.10+ */
        background: -ms-linear-gradient(top,  #afe9fe 61%,#ffffff 100%); /* IE10+ */
        background: linear-gradient(to bottom,  #afe9fe 61%,#ffffff 100%); /* W3C */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#afe9fe', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
    }
    /*clouds*/
    .clouds{
        position: relative;
    }
    .fly{
        position: absolute;
        z-index: 1;    
        -webkit-animation: spinfly 5s linear infinite;
        -moz-animation: spinfly 5s linear infinite;
        -o-animation: spinfly 5s linear infinite;
    }
    .cloud{
        position: absolute;
        z-index: 2;
        -webkit-animation: moveclouds 15s linear infinite;
        -moz-animation: moveclouds 15s linear infinite;
        -o-animation: moveclouds 15s linear infinite;
    }
    #cloud1{
        top:50px;
        left:80%;
    }
    #cloud2{
        top:400px;
        left:80%;
    }
    #cloud3{
        top:100px;
        left:-5%;
    }
    #cloud4{
        top:400px;
        left:10%;
    }
    #cloud5{
        top:150px;
        left:15%;
    }
    #cloud6{
        top:290px;
        left:-3%;
    }
    #cloud7{
        top:40px;
        left:95%;
    }
    #cloud8{
        top:180px;
        left:80%;
    }
    #cloud9{
        top:65px;
        left:50%;
    }
    #cloud9{
        top:65px;
        left:50%;
    }
    #fly1{
        top:80px;
        left:1%;
        z-index: 3;
    }
    #fly2{
        top:80px;
        right:-5%;
    }
    #fly3{
        top:100px;
        left:0%;
        z-index: 3;
    }
    #fly4{
        top:90px;
        right:15%;
    }
    #fly5{
        top:460px;
        left:10%;
    }
    #fly6{
        top:400px;
        right:5%;
    }
    @-webkit-keyframes moveclouds {
        0% {margin-left: 0px;}
        50% {margin-left: -50px;}
        100% {margin-left: 0px;}
    }
    @-moz-keyframes moveclouds {
        0% {margin-left: 0px;}
        50% {margin-left: -50px;}
        100% {margin-left: 0px;}
    }
    @-o-keyframes moveclouds {
        0% {margin-left: 0px;}
        50% {margin-left: -50px;}
        100% {margin-left: 0px;}
    }
    @-webkit-keyframes moveclouds {
        0% {margin-left: 0px;}
        50% {margin-left: -50px;}
        100% {margin-left: 0px;}
    }
    @-moz-keyframes moveclouds {
        0% {margin-left: 0px;}
        50% {margin-left: -50px;}
        100% {margin-left: 0px;}
    }
    @-o-keyframes moveclouds {
        0% {margin-left: 0px;}
        50% {margin-left: -50px;}
        100% {margin-left: 0px;}
    }
    @-ms-keyframes spinfly { 
        0% { -ms-transform: rotate(0deg); }
        50% { -ms-transform: rotate(10deg); }
        100% { -ms-transform: rotate(0deg); }
        }
    @-moz-keyframes spinfly { 
        0% { -moz-transform: rotate(0deg); }
        50% { -moz-transform: rotate(10deg); }
        100% { -moz-transform: rotate(0deg); }
        }
        @-webkit-keyframes spinfly { 
    0% { -webkit-transform: rotate(0deg); }
        50% { -webkit-transform: rotate(10deg); }
        100% { -webkit-transform: rotate(0deg); }
        }
    @keyframes spinfly { 
        0% { transform: rotate(0deg); }
        50% { transform: rotate(10deg); }
        100% { transform: rotate(0deg); }
    }
    .content{
        margin: auto; 
        width: 100%;
        z-index: 10;    
        display: table;
    }
    .center{
        text-align: center;
    }
    .content .logo{
        margin-top:145px;
    }
    .content h2{
        margin-top:60px;
        font-family: 'PT Sans';
        font-size: 30px;
        text-transform: uppercase;
        font-weight: bold;
        color:#23a3d3;
    }

    form[name="register"] , form[name="register_bottom"] {
        margin-top:70px;
    }
    form[name="register"] button , form[name="register_bottom"] button{
        background-color:#ff7e00; 
        border-style: none;
        border-radius: 25px;
        font-family: 'PT Sans';
        font-size: 25px;
        color:white;
        height: 60px;
        padding-left: 25px;
        padding-right: 25px;
        -webkit-box-shadow: 0px 2px 0px 0px rgba(251, 83, 0, 1);
        -moz-box-shadow:    0px 2px 0px 0px rgba(251, 83, 0, 1);
        box-shadow:         0px 2px 0px 0px rgba(251, 83, 0, 1);
        opacity: .99;
    }
     form[name="register"] button:hover, form[name="register_bottom"] button:hover{
        cursor: pointer;
        background-color: rgba(251, 83, 0, 1);
    }
    .content h3{
        margin-top:75px;
        font-family: 'PT Sans';
        font-size: 25px;
        color:#23a3d3;
        opacity: .99;
    }

    .bottomImg{
        width: 100%;
        margin-top: -110px;
        margin-left: auto;
        min-height: 300px;
    }
    .bottomCl{
        height: 100px;
        background: url(../img/cloud_bottom.png) repeat-x;
        margin-top: -70px;
    }

    /*TEXT*/

    .text{
        margin-top: 75px;
        margin-bottom: 75px;
    }
    .left, .right{
        width: 50%;
    }
    .right{
        float:right;
    }
    .left{
        float:left;
    }
    .left img{
        margin-left:60px;
    }
    .right img{
        margin-left:40px;
    }
    .text:after,.text2:after{
        content: '';
        display: block;
        clear: both;
    } 
    .text h2, .text h3{
        font-family: 'PT Sans';
    }
    .text h2 {
        font-size: 27px;
        text-transform: uppercase;
        font-weight: bold;
        color:#ff7e00;
        margin-top: 40px;
    }
    .text h3{
        font-size: 20px;
        line-height: 25px;
        margin-top: 20px;
    }
    .text2{
        margin-top: 50px;
    }
    .text2 h2, .text2 h3{
        white-space: pre-wrap;
        font-family: 'PT Sans';
    }
    .text2 h2 {
        font-size: 27px;
        text-transform: uppercase;
        font-weight: bold;
        color:green;
        margin-top: 10px;
    }
    .text2 h3{
        font-size: 20px;
        line-height: 25px;
        margin-top: 20px;
    }

    /*BOTTOM*/
    .tarife_block{
        width: 100%;;
        background: #d1f2ff;
        overflow: hidden;
        opacity: 0.99;
    }
    .cloud_bottom2{
        height: 57px;
        background: url(../img/cloud_bottom2.png) repeat-x;
    }
    .tarife_block h2, .reccomendations h2{
        margin-top: 70px;
        text-align: left;
        font-size: 27px;
        text-transform: uppercase;
        font-weight: bold;
        color:#00a917;
    }
    .tarifes{
      margin-top: 50px;
    }
    .tarifes ul{
      list-style:none;
    }
    .tarifes ul li{
      display:inline-block;
      vertical-align: middle;
      position:relative;
      height:224px;  
      margin-right: 33px;
    }
    .tarifes .tarife{
      height:200px;
      width:240px;
      background:white; 
      text-align: center;
    }
    .tarifes  ul li:last-child{
        margin-right: 0px; 
    }

    .tarife h1,.tarife h3{
        white-space: pre-wrap;
        font-family: 'PT Sans';
        padding-top: 10px;

    }
    #tarife3 h1{
        font-size: 27px;
    }
    #tarife2 h1{
        font-size: 38px;
    }
    #tarife2 h3{
        padding-left: 30px;
        padding-right: 30px;
    }
    #tarife1 h1{
        font-size: 20px;
    }
    #tarife1 h3{
        padding-left: 24px;
        padding-right: 24px;
    }
    .tarife h3{
        font-size: 12px;
        margin-top:0;
        color:black; 
    }

    #tarife1{
        color:#ff7e00;
    }
    #tarife2{
        color:#00a917;
    }
    #tarife3{
        color:#37aeda;
    }
    form[name="details_fremium"] , form[name="details_premium"] , form[name="details_credits"] {
        margin-top:30px;
    }
    form[name="details_fremium"] button , form[name="details_premium"] button,  form[name="details_credits"] button{
        border-style: none;
        border-radius: 20px;
        font-family: 'PT Sans';
        font-size: 16px;
        color:white;
        height: 40px;
        padding-left: 15px;
        padding-right: 15px;
    }
    form[name="details_fremium"] button:hover , form[name="details_premium"] button,  form[name="details_credits"] button{
        cursor: pointer;
    }
    form[name="details_fremium"] button{
        background: #ff7e00;
        -webkit-box-shadow: 0px 2px 0px 0px rgba(251, 83, 0, 1);
        -moz-box-shadow:    0px 2px 0px 0px rgba(251, 83, 0, 1);
        box-shadow:         0px 2px 0px 0px rgba(251, 83, 0, 1);
    }
    form[name="details_fremium"] button:hover{
        background: rgba(251, 83, 0, 1);
    }
    form[name="details_premium"] button{
        margin-top: -6px;
        background: #00a917;
        -webkit-box-shadow: 0px 2px 0px 0px rgba(0, 141, 19, 1);
        -moz-box-shadow:    0px 2px 0px 0px rgba(0, 141, 19, 1);
        box-shadow:         0px 2px 0px 0px rgba(0, 141, 19, 1);
    }
    form[name="details_premium"] button:hover{
        background: rgba(0, 141, 19, 1);
    }
    form[name="details_credits"] button{
        background: #37aeda;
        -webkit-box-shadow: 0px 2px 0px 0px rgba(5, 151, 193, 1);
        -moz-box-shadow:    0px 2px 0px 0px rgba(5, 151, 193, 1);
        box-shadow:         0px 2px 0px 0px rgba(5, 151, 193, 1);
    }
    form[name="details_credits"] button:hover{
        background: rgba(5, 151, 193, 1);
    }
    form[name="register_bottom"]{
        margin-top:40px;
    }
    form[name="register_bottom"] + h3 {
        margin-top:50px; 
    }
    .cloud_bottom3{
        margin-top:57px; 
        height: 57px;
        background: url(../img/cloud_bottom3.png) repeat-x;
    }
    /*slider*/
    .reccomendations .slider-container{
        margin-top: 30px;
        height: 300px;
        text-align: center;
    }

    .slider{
        font-family: 'PT Sans';
        font-size: 15px;
        font-style: italic;
        width: 510px;
        overflow: hidden;
        display: inline-block;
    }
    .slider ul{
        width: 99999px;
    }
    .slider ul li{
        float: left;
    }
    .slider blockquote img{
        margin-left: 100px;
        float: left;
        margin-top: 30px;
        margin-right:10px; 
    }
    .slider cite{
        font-family: 'PT Sans';
        font-size: 15px;
        font-style: normal;
        color: grey;
        margin-left: 120px;

    }
     .slider cite p{
        margin-top: 50px;
     }
    .slider strong{
        color:black;
    }
    .slider section{
        width: 485px;
        margin-left: 15px;
        margin-right: 15px;
    }
    .slider section:after{
        content: '';
        display: block;
        clear: both;
    }
    .slider-container .button,.slider section{
        display: inline-block;
    }
    .slider-container .button{
        font-size: 50px;
        width: 60px;
        vertical-align: top;
        margin-top: 50px;
    }
    .slider-container .button:hover{
        cursor: pointer;
    }

    /*footer*/
    footer{
        width: 100%;
        background: #d1f2ff;
        padding-top: 25px;
    }
    .logo-footer,.navigation-footer, .social{
        display: inline-block;    
        margin-left: 30px;
        vertical-align: top;
    }
    footer li{
        display: inline-block;
        padding-right: 10px; 
    }
    .docs-footer{
        margin-top: 30px;
    }
    .docs-footer li:last-child,.sitemap-footer li:last-child{
        padding-left: 10px;
    }

    .docs-footer a, .sitemap-footer a{
        color:#1b88b0;
        font-family: 'PT Sans';
        text-decoration: none;
    }
    .sitemap-footer a{
        font-size: 19px;
        text-transform: uppercase;
        font-weight: bold;
    }
    .docs-footer a{
        font-size:14px; 
    }
    .docs-footer a:hover, .sitemap-footer a:hover{
        color:#1b6a9c;
    }
    .social{
        margin-left: 0;
        display: inline-block;
    }
    #social{
        margin-left: 20px;
    }
    .social-icon{
        height: 20px;
        background: url(../img/social.png) no-repeat;
        display: inline-block;
        margin-right: 20px;
    }
    #social a:last-child{
        margin-right: 0;
    }
    .vk{
        width: 12px;
        background-position: 0 0;
    }
    .fb{
        width: 8px;
        background-position: -12px 0;
    }
    .gp{
        width: 20px;
        background-position: -20px 0;
    }
    .tw{
        width: 20px;
        background-position: -40px 0;
    }
    form[name="signUp_bottom"] {
        margin-top:20px;
    }
    form[name="signUp_bottom"] button {
        background-color:#1b88b0; 
        border-style: none;
        border-radius: 17px;
        font-family: 'PT Sans';
        font-size: 15px;
        color:white;
        height: 35px;
        width: 178px;

    }
     form[name="signUp_bottom"] button:hover{
        cursor: pointer;
        background-color: #1b6a9c;
    }
    .clouds{
        display: none;
    }
    .bottomImg, .bottomCl{
        display: none;
    }
    .inner img{
        display: none;
    }
    .left,.right{
        width: 100%;
    }
    .wrapper2{
        text-align: center;
    }
    .text, .text2{
        margin:auto; 
        width: 100%;
    }
    .tarifes ul li{
        display: block;
        margin-bottom:30px; 
    }
    .tarifes ul{
        display: inline-block;
    }
    .tarifes{
        text-align: center;
    }
    .tarifes .bigger {
         border: 2px solid #00a917; 
        z-index: 10;
        margin-top: 0;
        margin-right: 0;
        margin-left: -2px;
    }
   form[name="register_bottom"]{
    display: inline-block;
   }
}