/* Проект: Курсы Создатель: Рекламное агенство "Hello, brand!" - http://hello-brand.ru/ Дата: 09.02.2015 Версия: 1.0 */ /*---------------- Fonts ----------------*/ @font-face { font-family: 'Din'; src: url('../fonts/DINProRegular_0.eot'); src: url('../fonts/DINProRegular_0.eot') format('embedded-opentype'), url('../fonts/DINProRegular_0.woff') format('woff'), url('../fonts/DINProRegular_0.ttf') format('truetype'), url('../fonts/DINProRegular_0.svg#DINProRegular_0') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'Din'; src: url('../fonts/DINProLight_0.eot'); src: url('../fonts/DINProLight_0.eot') format('embedded-opentype'), url('../fonts/DINProLight_0.woff') format('woff'), url('../fonts/DINProLight_0.ttf') format('truetype'), url('../fonts/DINProLight_0.svg#DINProLight_0') format('svg'); font-weight: 300; font-style: normal; } @font-face { font-family: 'Din'; src: url('../fonts/DINProMedium_0.eot'); src: url('../fonts/DINProMedium_0.eot') format('embedded-opentype'), url('../fonts/DINProMedium_0.woff') format('woff'), url('../fonts/DINProMedium_0.ttf') format('truetype'), url('../fonts/DINProMedium_0.svg#DINProMedium_0') format('svg'); font-weight: 500; font-style: normal; } @font-face { font-family: 'Din'; src: url('../fonts/DINProBold_0.eot'); src: url('../fonts/DINProBold_0.eot') format('embedded-opentype'), url('../fonts/DINProBold_0.woff') format('woff'), url('../fonts/DINProBold_0.ttf') format('truetype'), url('../fonts/DINProBold_0.svg#DINProBold_0') format('svg'); font-weight: 700; font-style: normal; } /*---------------- Animation ----------------*/ /*---------------- Animation ----------------*/ /* Shake */ @-webkit-keyframes shake {0%, 100% {-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0);} 10%, 30%, 50%, 70%, 90% {-webkit-transform: translate3d(-10px, 0, 0);transform: translate3d(-10px, 0, 0);}20%, 40%, 60%, 80% {-webkit-transform: translate3d(10px, 0, 0);transform: translate3d(10px, 0, 0);}} @-moz-keyframes shake {0%, 100% {-moz-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0);} 10%, 30%, 50%, 70%, 90% {-moz-transform: translate3d(-10px, 0, 0);transform: translate3d(-10px, 0, 0);}20%, 40%, 60%, 80% {-moz-transform: translate3d(10px, 0, 0);transform: translate3d(10px, 0, 0);}} @-o-keyframes shake {0%, 100% {-o-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0);} 10%, 30%, 50%, 70%, 90% {-o-transform: translate3d(-10px, 0, 0);transform: translate3d(-10px, 0, 0);}20%, 40%, 60%, 80% {-o-transform: translate3d(10px, 0, 0);transform: translate3d(10px, 0, 0);}} @keyframes shake {0%, 100% {-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0);} 10%, 30%, 50%, 70%, 90% {-webkit-transform: translate3d(-10px, 0, 0);transform: translate3d(-10px, 0, 0);}20%, 40%, 60%, 80% {-webkit-transform: translate3d(10px, 0, 0);transform: translate3d(10px, 0, 0);}} /* Float 1 */ @-webkit-keyframes floating{from {-webkit-transform:translate(0, 0px);}55% {-webkit-transform:translate(-5px, 10px);}to {-webkit-transform: translate(0, -0px);}} @-moz-keyframes floating{from {-moz-transform:translate(0, 0px);}65% {-moz-transform:translate(-5px, 10px);}to {-moz-transform: translate(0, -0px);}} @-o-keyframes floating{from {-o-transform:translate(0, 0px);}65% {-o-transform:translate(-5px, 10px);}to {-o-transform: translate(0, -0px);}} @keyframes floating{from {transform:translate(0, 0px);}65% {transform:translate(-5px, 10px);}to {transform: translate(0, -0px);}} /* Float 2 */ @-webkit-keyframes floating2{from {-webkit-transform:translate(0, 0px);}55% {-webkit-transform:translate(5px, 10px);}to {-webkit-transform: translate(0, -0px);}} @-moz-keyframes floating2{from {-moz-transform:translate(0, 0px);}65% {-moz-transform:translate(5px, 10px);}to {-moz-transform: translate(0, -0px);}} @-o-keyframes floating2{from {-o-transform:translate(0, 0px);}65% {-o-transform:translate(5px, 10px);}to {-o-transform: translate(0, -0px);}} @keyframes floating2{from {transform:translate(0, 0px);}65% {transform:translate(5px, 10px);}to {transform: translate(0, -0px);}} /* Float 3 */ @-webkit-keyframes floating3{from {-webkit-transform:translate(0, 0px);}55% {-webkit-transform:translate(0px, 10px);}to {-webkit-transform: translate(0, -0px);}} @-moz-keyframes floating3{from {-moz-transform:translate(0, 0px);}65% {-moz-transform:translate(0px, 10px);}to {-moz-transform: translate(0, -0px);}} @-o-keyframes floating3{from {-o-transform:translate(0, 0px);}65% {-o-transform:translate(0px, 10px);}to {-o-transform: translate(0, -0px);}} @keyframes floating3{from {transform:translate(0, 0px);}65% {transform:translate(0px, 10px);}to {transform: translate(0, -0px);}} /* Float 4 */ @-webkit-keyframes floating4{from {-webkit-transform:translate(0, 0px);}55% {-webkit-transform:translate(-10px, -10px);}to {-webkit-transform: translate(0, -0px);}} @-moz-keyframes floating4{from {-moz-transform:translate(0, 0px);}65% {-moz-transform:translate(-10px, -10px);}to {-moz-transform: translate(0, -0px);}} @-o-keyframes floating4{from {-o-transform:translate(0, 0px);}65% {-o-transform:translate(-10px, -10px);}to {-o-transform: translate(0, -0px);}} @keyframes floating4{from {transform:translate(0, 0px);}65% {transform:translate(-10px, -10px);}to {transform: translate(0, -0px);}} /* Scale 1 */ @-webkit-keyframes scale{from {-webkit-transform:scale(1);}55% {-webkit-transform:scale(1.3);}to {-webkit-transform: scale(1);}} @-moz-keyframes scale{from {-moz-transform:scale(1);}65% {-moz-transform:scale(1.3);}to {-moz-transform:scale(1);}} @-o-keyframes scale{from {-o-transform:scale(1);}65% {-o-transform:scale(1.3);}to {-o-transform:scale(1);}} @keyframes scale{from {transform:scale(1);}65% {transform:scale(1.3);}to {transform:scale(1);}} /* Scale 2 */ @-webkit-keyframes scale2{from {-webkit-transform:scale(1) rotate(-4deg);}55% {-webkit-transform:scale(1.3) rotate(4deg) translate(-5px, -10px);}to {-webkit-transform: scale(1) rotate(-4deg);}} @-moz-keyframes scale2{from {-moz-transform:scale(1) rotate(-4deg);}65% {-moz-transform:scale(1.3) rotate(4deg) translate(-5px, -10px);}to {-moz-transform:scale(1) rotate(-4deg);}} @-o-keyframes scale2{from {-o-transform:scale(1) rotate(-4deg);}65% {-o-transform:scale(1.3) rotate(4deg) translate(-5px, -10px);}to {-o-transform:scale(1) rotate(-4deg);}} @keyframes scale2{from {transform:scale(1) rotate(-4deg);}65% {transform:scale(1.3) rotate(4deg) translate(-5px, -10px);}to {transform:scale(1) rotate(-4deg);}} /* Shadow Floating */ @-webkit-keyframes shadow-floating{from {-webkit-box-shadow:-5px 0 0 #27607c;-webkit-transform:translate(2px, 0px);}55% {-webkit-box-shadow:5px 0 0 #27607c;-webkit-transform:translate(-2px, 0px);}to {-webkit-box-shadow:-5px 0 0 #27607c;-webkit-transform:translate(2px, 0px);}} @-moz-keyframes shadow-floating{from {-moz-box-shadow:-5px 0 0 #27607c;-moz-transform:translate(2px, 0px);}65% {-moz-box-shadow:-5px 0 0 #27607c;-moz-transform:translate(-2px, 0px);}to {-moz-box-shadow:-5px 0 0 #27607c;-moz-transform:translate(2px, 0px);}} @-o-keyframes shadow-floating{from {-o-box-shadow:-5px 0 0 #27607c;-o-transform:translate(2px, 0px);}65% {-o-box-shadow:-5px 0 0 #27607c;-o-transform:translate(-2px, 0px);}to {-o-box-shadow:-5px 0 0 #27607c;-o-transform:translate(2px, 0px);}} @keyframes shadow-floating{from {box-shadow:-5px 0 0 #27607c;transform:translate(2px, 0px);}65% {box-shadow:-5px 0 0 #27607c;transform:translate(-2px, 0px);}to {box-shadow:-5px 0 0 #27607c;transform:translate(2px, 0px);}} .si-floating{-webkit-animation:floating infinite ease-in-out 3s;-moz-animation:floating infinite ease-in-out 3s;-o-animation:floating infinite ease-in-out 3s;animation:floating infinite ease-in-out 3s;} .si-floating2{-webkit-animation:floating2 infinite ease-in-out 3s;-moz-animation:floating2 infinite ease-in-out 3s;-o-animation:floating2 infinite ease-in-out 3s;animation:floating2 infinite ease-in-out 3s;} .si-floating3{-webkit-animation:floating3 infinite ease-in-out 3s;-moz-animation:floating3 infinite ease-in-out 3s;-o-animation:floating3 infinite ease-in-out 3s;animation:floating3 infinite ease-in-out 3s;} .si-floating4{-webkit-animation:floating4 infinite ease-in-out 3s;-moz-animation:floating4 infinite ease-in-out 3s;-o-animation:floating4 infinite ease-in-out 3s;animation:floating4 infinite ease-in-out 3s;} .si-scale{-webkit-animation:scale infinite ease-in-out 2s;-moz-animation:scale infinite ease-in-out 2s;-o-animation:scale infinite ease-in-out 2s;animation:scale infinite ease-in-out 2s;} .si-scale2{-webkit-animation:scale2 infinite ease-in-out 2s;-moz-animation:scale2 infinite ease-in-out 2s;-o-animation:scale2 infinite ease-in-out 2s;animation:scale2 infinite ease-in-out 2s;} .shadow-floating{-webkit-animation:shadow-floating infinite ease-in-out 3.4s;-moz-animation:shadow-floating infinite ease-in-out 3.4s;-o-animation:shadow-floating infinite ease-in-out 3.4s;animation:shadow-floating infinite ease-in-out 3.4s;} .si-error{-webkit-animation:shake 1 linear 0.8s;-moz-animation:shake 1 linear 0.8s;-o-animation:shake 1 linear 0.8s;animation:shake 1 linear 0.8s;} /*---------------- Reset ----------------*/ html,body,div,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,input,button,textarea,p,blockquote,th,td{margin:0;padding:0} table{border-collapse:collapse;border-spacing:0} button,img{border:0;vertical-align:middle} ul,li{list-style:none} caption,th{text-align:left} h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal} input,button,textarea,select,optgroup,option{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit} input,button,textarea,select{font-size:100%;} body,td,div,input,textarea,select {font-style:normal;font-weight:normal;} *:focus{outline:none} header,footer,nav,section,article,aside{display:block} iframe{border:0} input::-webkit-input-placeholder,textarea::-webkit-input-placeholder{color:#2c2c2c;} input::-moz-placeholder,textarea::-moz-placeholder{color:#2c2c2c;} input::-ms-input-placeholder,textarea::-ms-input-placeholder {color:#2c2c2c;} input.placeholder,textarea.placeholder{color:#2c2c2c;} input.si-error::-webkit-input-placeholder,textarea.si-error::-webkit-input-placeholder{color:#cb0707;} input.si-error::-moz-placeholder,textarea.si-error::-moz-placeholder{color:#cb0707;} input.si-error::-ms-input-placeholder,textarea.si-error::-ms-input-placeholder {color:#cb0707;} input.si-error.placeholder,textarea.si-error.placeholder{color:#cb0707;} label{cursor:pointer} input[type=text],input[type=password],input[type=email],input[type=tel],textarea{position:relative;border:0;margin:5px 0;background:#fff;padding:13px 10px 14px 10px;text-align:center;font:500 18px Din;width:320px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;-webkit-border-radius:30px;-moz-border-radius:30px;border-radius:30px;-webkit-box-shadow:inset 0 4px 0 #e0e0e0;-moz-box-shadow:inset 0 4px 0 #e0e0e0;box-shadow:inset 0 4px 0 #e0e0e0;behavior:url(/PIE/PIE.php);-webkit-transition:all 0.2s ease-out 0;-moz-transition:all 0.2s ease-out 0;-o-transition:all 0.2s ease-out 0;transition:all 0.2s ease-out 0;} input[type=text]:focus,input[type=password]:focus,input[type=email]:focus,input[type=tel]:focus,textarea:focus{-webkit-box-shadow:inset 0 4px 0 #f77c50;-moz-box-shadow:inset 0 4px 0 #f77c50;box-shadow:inset 0 4px 0 #f77c50;} input[type=text].si-error,input[type=password].si-error,input[type=email].si-error,input[type=tel].si-error,textarea.si-error{color:#cb0707;border-color:#cb0707;-webkit-box-shadow:inset 0 4px 0 #cb0707;-moz-box-shadow:inset 0 4px 0 #cb0707;box-shadow:inset 0 4px 0 #cb0707;} textarea{resize:none;} input[type=submit],button{-webkit-appearance:none;position:relative;cursor:pointer;border:0;font:700 18px/22px Din;color:#f77c50;background:transparent;border:3px solid #f77c50;padding:12px 0;margin:5px 0;width:320px;-webkit-border-radius:30px;-moz-border-radius:30px;border-radius:30px;behavior:url(/PIE/PIE.php);-webkit-transition:all 0.2s ease-out 0;-moz-transition:all 0.2s ease-out 0;-o-transition:all 0.2s ease-out 0;transition:all 0.2s ease-out 0;} input[type=submit]:hover,button:hover{background:#f77c50;color:#fff} input[type=submit]:active,button:active{background:#cf6843;color:#fff} input[type=submit].orange,button.orange{background:#f77c50;color:#fff} input[type=submit].orange:hover,button.orange:hover{background:#f78e69;color:#fff} input[type=submit].orange:active,button.orange:active{background:#cf6843;color:#fff} /*---------------- Styles ----------------*/ html{background:#fff;color:#2c2c2c;font:18px/22px Din} body{} html,body{min-width:1150px} #global-wrapper{overflow:hidden;position:relative} h1{color:#fff;font:700 24px/30px Din;text-align:center;left:0;width:100%;top:75px;position:absolute;} h2{text-align:center;font:700 36px/40px Din} h2.white{color:#fff} h2 i{display:block;font:500 24px/30px Din} h3{font:700 24px/30px Din;text-align:center;padding:10px 0} h4{font:700 18px/22px Din;padding:10px 0;text-transform:uppercase} h5{} h6{} p{padding:5px 0} ul{} ul li{margin:15px 0;font:500 18px/22px Din} ul.minus li{padding:0 0 0 30px;background:url(../images/li-minus.png) left 3px no-repeat;} ul.plus li{padding:0 0 0 30px;background:url(../images/li-plus.png) left 3px no-repeat;} a{text-decoration:none;} a:hover{} a.button{display:inline-block;padding:10px 30px 12px;margin:20px 0;color:#fff;font:700 18px/22px Din;background:#f77c50;position:relative;-webkit-border-radius:30px;-moz-border-radius:30px;border-radius:30px;behavior:url(/PIE/PIE.php);-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;} a.button:hover{background:#ffc878} a.button:active{position:relative;top:2px;border-top:4px solid #d1a462;padding:7px 30px 11px} a.button.small{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;width:150px;margin:0} a.button.yellow{background:#ffc878;} a.button.yellow:hover{background:#e5b46c;} a.button.yellow:active{background:#e5b46c;border-color:#c59b5d} a.button.green{background:#76c1a0;} a.button.green:hover{background:#6aad90;} a.button.green:active{background:#6aad90;border-color:#5b957c} a.button.red{background:#f77c50;} a.button.red:hover{background:#de6f48;} a.button.red:active{background:#de6f48;border-color:#bf603e} a.button.white{background:transparent;color:#fff;padding:10px 40px 12px;border:3px solid #fff;-webkit-transition:all 0.2s ease-out 0;-moz-transition:all 0.2s ease-out 0;-o-transition:all 0.2s ease-out 0;transition:all 0.2s ease-out 0;} a.button.white:hover{background:#fff;color:#277ca6;} a.button.white:active{background:#cadfea;border-color:#cadfea;color:#277ca6;padding:10px 40px 12px;} .clear {clear:both} .centered{width:1100px;margin:0 auto;position:relative} .last-line-hack{width:100%;display:inline-block;height:0;visibility:hidden} .invisible{display:none} .blue{color:#5ab7e4} .orange{color:#f77c50} .icon{display:inline-block;vertical-align:top;position:relative;background:url(../images/icons.png) no-repeat} .mouse-icon{width:27px;height:47px;background-position:0 0;display:block;margin:0 auto 0} .header-next:hover .mouse-icon{background-position:0 -50px} .arrow-icon{width:10px;height:31px;background-position:-30px 0;display:block;margin:5px auto 0} .header-next:hover .arrow-icon{background-position:-30px -50px} .check-icon{width:19px;height:19px;background-position:-42px -62px} .how-usp-icon{width:22px;height:19px;background-position:-63px -62px;margin:13px 15px 0 0;display:block;float:left} header{height:872px;background:url(../images/header-bg.jpg) center top no-repeat;color:#fff} .logo{display:block;width:269px;height:126px;background:url(../images/logo.png) no-repeat;position:relative;top:60px;left:0} .top-phone{position:absolute;top:78px;right:0;text-align:right} .top-phone .phone-link{font:700 24px/28px Din;color:#fff;-webkit-transition:all 0.2s ease-out 0;-moz-transition:all 0.2s ease-out 0;-o-transition:all 0.2s ease-out 0;transition:all 0.2s ease-out 0;} .top-phone .phone-link:hover{color:#ccc} .top-phone .modal-link{font:500 18px/22px Din;color:#fff;border-bottom:1px dotted;-webkit-transition:all 0.2s ease-out 0;-moz-transition:all 0.2s ease-out 0;-o-transition:all 0.2s ease-out 0;transition:all 0.2s ease-out 0;} .top-phone .modal-link:hover{border:0;} .header-image{width:534px;height:537px;background:url(../images/header-image.png) no-repeat;position:absolute;top:230px;left:283px;z-index:3} .header-text{position:absolute;top:427px;left:0;z-index:4} .header-text .bg{background:#2c2c2c;color:#fff;font:700 36px/42px Din;display:inline-block;padding:10px 20px 10px 15px;position:relative;margin-top:-15px;} .header-text .bg.orange{color:#ffc878;} .header-text .button{margin-left:30px} .header-next{color:#fff;font:500 18px/22px Din;display:block;text-align:center;position:absolute;top:625px;left:504px;width:100px;z-index:6} .header-next:hover{color:#ccc} .header-parallax{position:absolute;z-index:5} .header-parallax.p-1{left:610px;top:220px;} .header-parallax.p-2{left:496px;top:300px;} .header-parallax.p-3{left:567px;top:483px;} .header-parallax.p-4{left:567px;top:483px;} .header-parallax.p-5{left:880px;top:354px;} .header-parallax.p-6{left:280px;top:250px;} .header-parallax.p-7{left:250px;top:360px;} .header-parallax.p-8{left:540px;top:380px;} .header-parallax.p-9{left:200px;top:765px;} .header-parallax.p-10{left:-86px;top:480px;} .header-parallax.p-11{left:114px;top:250px;} .header-parallax.p-12{left:960px;top:225px;} .header-parallax.p-13{left:860px;top:660px;} .header-parallax.p-14{left:190px;top:255px;} .header-parallax.p-15{left:135px;top:200px;} .header-parallax.p-16{left:168px;top:343px;} .header-parallax.p-17{left:795px;top:295px;z-index:2} .header-parallax.p-18{left:880px;top:450px} .header-parallax.p-19{left:870px;top:380px} .header-parallax.p-20{left:765px;top:430px} .header-parallax.p-21{left:738px;top:708px} .header-parallax.p-22{left:777px;top:300px} #problems{padding:80px 0} .problems{text-align:justify;padding:80px 0 50px} .problem-item{display:inline-block;vertical-align:top;width:350px;text-align:center;font:500 18px/22px Din} .problem-item.small{width:270px} .problem-image{width:148px;height:148px;background:url(../images/icons.png) no-repeat;margin:0 0 5px} .problem-image.i-1{background-position:0 -100px} .problem-image.i-2{background-position:-150px -100px} .problem-image.i-3{background-position:-300px -100px} .problem-image2{height:60px;background:url(../images/icons.png) no-repeat;margin:0 auto 10px;display:block !important} .problem-image2.i-1{background-position:-42px 0;width:61px;} .problem-image2.i-2{background-position:-105px 0;width:66px;} .problem-image2.i-3{background-position:-173px 0;width:73px;} .problem-image2.i-4{background-position:-248px 0;width:62px;} .questions{width:829px;height:571px;background:url(../images/questions.png) no-repeat;margin:0 auto 0 auto;position:relative;right:-30px;z-index:3} .questions-text{color:#fff;font:500 18px/22px Din;position:absolute;top:90px;left:257px} .parallax-question{z-index:2;position:absolute;} .parallax-question.q-1{top:20px;left:-45px} .parallax-question.q-2{top:160px;left:-115px} .parallax-question.q-3{top:325px;left:-44px} .parallax-question.q-4{top:345px;left:160px} .parallax-question.q-5{top:475px;left:150px} #usp{height:1504px;background:url(../images/usp-bg.jpg) center top no-repeat;color:#fff;padding:90px 0;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;position:relative;margin-top:-108px;} .usp-text{padding:30px 0;text-align:center;font:500 24px/30px Din} .usp{text-align:center;padding:20px 0 0} .usp-item{display:inline-block;vertical-align:top;width:360px;font:500 18px/22px Din;color:#fff;margin:0 0 10px} .usp-image{width:148px;height:148px;margin:0 auto 10px;background:url(../images/usp.png) no-repeat;position:relative;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;behavior:url(/PIE/PIE.php);} .usp-image.i-1{background-position:0 0} .usp-image.i-2{background-position:-150px 0} .usp-image.i-3{background-position:-300px 0} .usp-image.i-4{background-position:-450px 0} .usp-image.i-5{background-position:-600px 0} .page-form-block{width:1038px;height:437px;background:url(../images/page-form-bg.png) no-repeat;margin:70px auto 0;position:relative} .page-form-block.small-pad{margin-top:30px} .page-form{padding:80px 0 0 530px;text-align:center;width:465px;} .page-form .form-title{font:700 30px/34px Din;color:#f77c50;padding:0 0 10px} .page-form .form-title span{display:block;font:500 18px/22px Din;color:#2c2c2c;padding:5px 0} .page-form .form-title span b{color:#f77c50;} #why{padding:60px 0} .why-item-wrapper{position:relative;float:left;width:410px;margin:10px 0 30px 50px} .why-item-wrapper.right{float:right;margin:10px 40px 30px 0;width:460px} .why-image{position:absolute;top:0;-moz-transform:translate(0px, 0px);-webkit-transform:translate(0px, 0px);-o-transform:translate(0px, 0px);-ms-transform:translate(0px, 0px);transform:translate(0px, 0px);-webkit-transition:all 1.5s cubic-bezier(0.175, 0.885, 0.320, 1.275) 0s;-moz-transition:all 1.5s cubic-bezier(0.175, 0.885, 0.320, 1.275) 0s;-o-transition:all 1.5s cubic-bezier(0.175, 0.885, 0.320, 1.275) 0s;transition:all 1.5s cubic-bezier(0.175, 0.885, 0.320, 1.275) 0s;} .why-image.no-show{-moz-transform:translate(0px, 255px);-webkit-transform:translate(0px, 255px);-o-transform:translate(0px, 255px);-ms-transform:translate(0px, 255px);transform:translate(0px, 255px);} .why-image.i-1{top:50px;left:-30px;} .why-image.i-2{top:10px;left:106px;} .why-item-wrapper .why-text{margin:260px 0 0;background:#e7e1db;padding:10px 17px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;position:relative;z-index:2} .why-text-wrapper{position:relative;z-index:3;right:10px;width:935px;height:430px;background:url(../images/why-text.png) no-repeat;margin:40px auto 0} .why-text-wrapper .why-text{padding:65px 0 0 375px;color:#fff;font:500 18px/22px Din} #tariffs{height:1462px;position:relative;margin-top:-83px;background:url(../images/tariffs-bg.jpg) center top no-repeat;padding:110px 0 0;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;} .tariffs-table{border-spacing:2px;border-collapse:separate;width:1050px;margin:0 auto} .tariffs-table td{padding:14px 13px 14px 23px;background:#fff;font:500 16px/20px Din;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;} .tariffs-table td.price-cell{font:700 24px/30px Din} .tariffs-table td.no-bg{background:none !important} .tariffs-table td.col-1{font:700 16px/20px Din} .tariffs-table td.col-5{border:4px solid #f77c50;border-width:0 4px } .tariffs-table td.col-5.last{border:4px solid #f77c50;border-width:0 4px 4px 4px} .tariffs-table td.col-3,.tariffs-table td.col-4,.tariffs-table td.col-5{text-align:center} .tariffs-table .colored td{background:#e7e1db} .tariffs-table .title-row td{background:none;} .tariffs-table .buttons-row td{padding:14px 0;border:0 !important} .tariffs-table .title-row td.table-title{color:#fff;text-transform:uppercase;font:700 35px/42px Din;padding:14px 0;} .tariffs-table .title-row td.tariff-title{width:153px;text-align:center;color:#fff;background:url(../images/tariffs.png) no-repeat;font:700 18px/22px Din;height:81px} .tariffs-table .title-row td.tariff-title.yellow{background-position:0 0} .tariffs-table .title-row td.tariff-title.green{background-position:-155px 0} .tariffs-table .title-row td.tariff-title.red{background-position:-308px 0} #questions{padding:110px 0 0} #questions h2{margin:0 0 80px} .question-item{margin:30px 0;text-align:center;font:500 18px/22px Din} .question-image{width:148px;height:148px;background:url(../images/icons.png) no-repeat;margin:10px auto} .question-image.i-1{background-position:0 -250px;} .question-image.i-2{background-position:-150px -250px;} .question-image.i-3{background-position:-300px -250px;} .question-parallax{position:absolute;} .question-parallax.p-1{left:545px;top:-50px;} .question-parallax.p-2{left:385px;top:70px;} .question-parallax.p-3{left:700px;top:180px;} .question-parallax.p-4{left:270px;top:790px;} .question-parallax.p-5{left:775px;top:145px;} .question-parallax.p-6{left:340px;top:230px;} .question-parallax.p-7{left:775px;top:240px;} .question-parallax.p-8{left:305px;top:520px;} .question-parallax.p-9{left:710px;top:570px;} .question-parallax.p-10{left:790px;top:800px;} .question-parallax.p-11{left:390px;top:860px;} .question-parallax.p-12{left:710px;top:900px;} .question-parallax.p-13{left:635px;top:1150px;} .question-real-parallax{position:absolute;} .question-real-parallax.p-1{top:-35px;margin-left:105px} .question-real-parallax.p-2{top:-15px;margin-left:0px} .question-real-parallax.p-3{top:35px;margin-left:920px} .question-real-parallax.p-4{top:80px;margin-left:950px} .question-real-parallax.p-5{top:245px;margin-left:925px} .question-real-parallax.p-6{top:330px;margin-left:970px} .question-real-parallax.p-7{top:445px;margin-left:925px} .question-real-parallax.p-8{top:510px;margin-left:920px} .question-real-parallax.p-9{top:505px;margin-left:930px} .question-real-parallax.p-10{top:550px;margin-left:1024px} .question-real-parallax.p-11{top:740px;margin-left:950px} .question-real-parallax.p-12{top:840px;margin-left:950px} .question-real-parallax.p-13{top:820px;margin-left:920px} .question-real-parallax.p-14{top:1025px;margin-left:870px} .question-real-parallax.p-15{top:1120px;margin-left:895px} .question-real-parallax.p-16{top:175px;margin-left:185px} .question-real-parallax.p-17{top:185px;margin-left:60px} .question-real-parallax.p-18{top:125px;margin-left:100px} .question-real-parallax.p-19{top:155px;margin-left:100px} .question-real-parallax.p-20{top:360px;margin-left:70px} .question-real-parallax.p-21{top:495px;margin-left:125px} .question-real-parallax.p-22{top:535px;margin-left:0px} .question-real-parallax.p-23{top:515px;margin-left:10px} .question-real-parallax.p-24{top:715px;margin-left:20px} .question-real-parallax.p-25{top:845px;margin-left:80px} .question-real-parallax.p-26{top:1015px;margin-left:140px} .question-real-parallax.p-27{top:1080px;margin-left:100px} .question-real-parallax.p-28{margin-left:700px;top:1170px;} #how{height:1316px;background:url(../images/how-bg.jpg) center top no-repeat;padding:100px 0 0;margin:60px 0 0;color:#fff;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;} .how{height:800px;background:url(../images/how-arrow.png) center top no-repeat;margin:60px 0 0} .how-item{position:absolute;text-align:center;width:280px;font:500 18px/22px Din} .how-item.text-item{font:500 24px/30px Din;width:auto} .how-item.small-text{font:500 16px/20px Din} .how-item.i-1{top:84px;left:393px} .how-item.i-2{top:175px;left:46px} .how-item.i-3{top:175px;left:409px} .how-item.i-4{top:175px;left:781px} .how-item.i-5{top:446px;left:423px} .how-item.i-6{top:540px;left:-9px} .how-item.i-7{top:540px;left:269px} .how-item.i-8{top:540px;left:550px} .how-item.i-9{top:540px;left:835px} .how-icon{height:76px;background:url(../images/how.png) no-repeat;margin:0 auto} .how-icon.i-1{width:69px;background-position:0 0} .how-icon.i-2{width:73px;background-position:-71px 0} .how-icon.i-3{width:62px;background-position:-146px 0} .how-icon.i-4{width:57px;background-position:-210px 0} .how-icon.i-5{width:71px;background-position:-269px 0} .how-icon.i-6{width:68px;background-position:-342px 0} .how-icon.i-7{width:60px;background-position:-412px 0} .how-price{font:500 18px/22px Din} .how-line{width:32px;height:3px;background:#fff;margin:15px auto} .how-usp{padding:10px 0 0} .how-usp-item{width:540px;padding:0 0 0 10px;float:left;} .how-usp-text{overflow:hidden;text-transform:uppercase;} #reviews{padding:60px 0 0;position:relative;z-index:3} .reviews{margin:70px 0 0} .review-item{float:left;width:550px;font-weight:500} .review-author{font:700 18px/22px Din} .review-titles{margin:10px 0} .review-titles span{display:inline-block;color:#fff;text-transform:uppercase;padding:8px 10px;font:500 18px/22px Din} .review-titles.problem-title span{background:#f77c50} .review-titles.solution-title span{background:#76c1a0} .review-titles.itog-title span{background:#5ab7e4} .owl-controls{z-index:2;} .owl-nav{position:absolute;top:200px;width:100%;left:0;z-index:2;} .owl-prev, .owl-next{display:block;width:31px;height:56px;background:url(../images/icons.png) no-repeat;position:absolute;top:0;color:transparent;font-size:0;z-index:10} .owl-prev{background-position:-312px 0;left:-90px} .owl-prev:hover{background-position:-378px 0} .owl-next{background-position:-345px 0;right:-60px} .owl-next:hover{background-position:-411px 0} .owl-dots{text-align:center;margin:50px 0 0} .owl-dot{display:inline-block;cursor:pointer;background:#fff;border:2px solid #64bbe6;width:12px;height:12px;margin:0 5px;position:relative;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;behavior:url(/PIE/PIE.php);} .owl-dot.active,.owl-dot:hover{background:#64bbe6} footer{height:581px;background:url(../images/footer-bg.jpg) center top no-repeat;position:relative;margin-top:-130px} footer .centered{height:581px} .footer-logo{top:374px} .footer-phone{top:390px} .creator{position:absolute;right:0;top:480px;font:500 13px/15px Din;color:#fff} .creator a{color:#ffc878} .creator a:hover{color:#ffc878;text-decoration:underline} .footer-data{top:483px;position:absolute;left:0;font:500 18px/22px Din;color:#fff;z-index:3} .footer-image{width:479px;height:436px;background:url(../images/footer-image.png) no-repeat;position:absolute;bottom:0;left:320px} .footer-parallax{position:absolute;} .footer-parallax.p-1{left:410px;top:230px;} .footer-parallax.p-2{left:840px;top:285px;} .footer-parallax.p-3{left:840px;top:390px;} .footer-parallax.p-4{left:270px;top:405px;} .footer-parallax.p-5{left:205px;top:290px;} .footer-parallax.p-6{left:760px;top:415px;} .footer-parallax.p-7{left:-85px;top:405px;} .footer-parallax.p-8{left:120px;top:185px;} .footer-parallax.p-9{left:960px;top:150px;} .footer-parallax.p-10{left:790px;top:250px;} .footer-parallax.p-11{left:1090px;top:30px;} .footer-parallax.p-12{left:990px;top:185px;} .footer-parallax.p-13{left:800px;top:150px;} .footer-parallax.p-14{left:20px;top:155px;} .footer-parallax.p-15{left:-15px;top:225px;} .footer-parallax.p-16{left:-65px;top:225px;} .footer-parallax.p-17{left:205px;top:205px;} html.si-lock{overflow-y:hidden !important;} .si-lock body{overflow-y:hidden !important;padding-right:17px !important;} .si-overlay, .si-overlay-2{display:none;background:url(../images/si-overlay.png);position:absolute;top:0;left:0;right:0;bottom:0;z-index:103} .si-overlay-2{z-index:105} .si-modals-wrapper, .si-modals-wrapper-2{display:none;position:fixed;top:0;left:0;right:0;bottom:0;z-index:103;overflow:auto;} .si-modals-wrapper-2{z-index:105} .si-modal{display:block;background:url(../images/modal-bg.png) no-repeat;color:#fff;text-align:center;width:521px;height:460px;margin:50px auto;position:relative} .si-modal .form-title{padding:50px 0 0;font:700 30px/36px Din} .si-modal .form-time{padding:15px 0;font:500 18px/22px Din} .si-close{display:block;width:54px;height:54px;background:url(../images/icons.png) 0 -402px no-repeat;position:absolute;right:-10px;top:-14px;} .si-close:hover{background-position:-56px -402px} .si-success-modal{display:none;background:url(../images/modal-bg.png) no-repeat;color:#fff;text-align:center;width:521px;height:460px;margin:50px auto;position:relative;font:500 24px/30px Din;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;padding:0 0 0 20px} .si-success-modal h2{font:700 36px/42px Din;color:#fff;padding:130px 0 20px;text-transform:uppercase} .success-time{padding:20px 0 0} /*modal*/ /* Стили модального окна и содержания -------------------------------------------------------------------------------*/ /* слой затемнения */ .dm-overlay { position: fixed; top: 0; left: 0; background: rgba(0, 0, 0, 0.65); display: none; overflow: auto; width: 100%; height: 100%; z-index: 1000; } /* активируем модальное окно */ .dm-overlay:target { display: block; -webkit-animation: fade .6s; animation: fade .6s; } /* блочная таблица */ .dm-table { display: table; width: 100%; height: 100%; } /* ячейка блочной таблицы */ .dm-cell { display: table-cell; padding: 0 1em; vertical-align: middle; text-align: center; } /* модальный блок */ .dm-modal { display: block; padding: 20px; max-width: 50em; background: #607d8b; box-shadow: 0px 15px 20px rgba(0, 0, 0, 0.22), 0px 19px 60px rgba(0, 0, 0, 0.3); color: #cfd8dc; text-align: left; margin-left: 3em; } /* изображения в модальном окне */ .dm-modal img { width: 100%; height: auto; } /* миниатюры изображений */ .pl-left, .pl-right { width: 25%; height: auto; } /* миниатюра справа */ .pl-right { float: right; margin: 5px 0 5px 15px; } /* миниатюра слева */ .pl-left { float: left; margin: 5px 15px 5px 0; } /* встраиваемое видео в модальном окне */ .video { position: relative; overflow: hidden; padding-bottom: 56.25%; height: 0; } .video iframe, .video object, .video embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } /* рисуем кнопарь закрытия */ .close { z-index: 9999; float: right; width: 30px; height: 30px; color: #cfd8dc; text-align: center; text-decoration: none; line-height: 26px; cursor: pointer; margin-bottom: 10px; } .close:after { display: block; border: 2px solid #cfd8dc; border-radius: 50%; content: 'X'; -webkit-transition: all 0.6s; transition: all 0.6s; -webkit-transform: scale(0.85); transform: scale(0.85); } /* кнопка закрытия при наведении */ .close:hover:after { border-color: #fff; color: #fff; -webkit-transform: scale(1); transform: scale(1); } /* варианты фонвой заливки модального блока */ .green { background: #388e3c!important; } .cyan { background: #0097a7!important; } .teal { background: #00796b!important; } /* движуха при появлении блоков с содержанием */ @-webkit-keyframes fade { from { opacity: 0; } to { opacity: 1 } } @keyframes fade { from { opacity: 0; } to { opacity: 1 } } /*Скрываем неактивные модальные формы(при клике открывалось сразу 3 формы)*/ .phone-modal, .tariff-modal, .simple-modal{display:none;}