/*------------------ ------------------*/ /* RESET */ /*------------------ ------------------*/ a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,dialog,div,dl,dt,em,embed,fieldset,figcaption,figure,font,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,hr,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,meter,nav,object,ol,output,p,pre,progress,q,rp,rt,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video,xmp { border: 0; margin: 0; padding: 0; font-size: 100%; } html,body{height: 100%;} article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {display: block;} b,strong{font-weight: bold;} img{color: transparent;font-size: 0;vertical-align: middle;max-width: 100%;max-height: 100%;width: auto;height: auto;-ms-interpolation-mode: bicubic;} ol,ul{list-style: none;} li {display: list-item;} table{border-collapse: collapse;border-spacing: 0;} th,td,caption{font-weight: normal;vertical-align: top;text-align: left;} q {quotes: none;} q:before,q:after{content: '';content: none;} sub,sup,small {font-size: 75%;} sub,sup {line-height: 0;position: relative;vertical-align: baseline;} sub {bottom: -0.25em;} sup {top: -0.5em;} svg {overflow: hidden;} .clr,.clear {display: block; clear: both;overflow: hidden;line-height: 0 !important;height: 0 !important;font-size: 0;margin: 0;padding: 0;} .clearfix:before,.clearfix:after {content: ""; display: block;overflow: hidden;visibility: hidden;width: 0;height: 0;} .clearfix:after {clear: both;} .clearfix {zoom: 1;} /*------------------ ------------------*/ /* TEXT */ /*------------------ ------------------*/ html {overflow-x: hidden;} body .oh {overflow: hidden;} hr {border: 0 #ccc solid;border-top-width: 1px;clear: both;height: 0;} /* Separator dlya h2 */ .box-sep{text-align: center;position: relative;overflow: hidden;margin-bottom: 10px;} .box-sep:before, .box-sep:after{content: '';display: block;background: #3f3f3f; width: 100%;height: 1px;position: absolute; top: 50%;} .box-sep:before{right: 50%;margin-right: 30px;} .box-sep:after{left: 50%;margin-left: 30px;} .box-sep img {width: 35px;} /*Headings*/ /*Spacing*/ ol {list-style: decimal;} ul {list-style: disc;} li {margin-left: 30px;} p,dl,hr,ol,ul,pre,table,address,fieldset,figure {margin-top: 0;} h2.swal2-title {line-height: 1.5em !important;} .hr-shadow {position: relative;overflow: hidden;height: 25px;} .hr-shadow:after {position: absolute;content: '';z-index: 1;height: 20px;top: -20px;left: 50%;width: 100%;margin-left: -50%;-webkit-border-radius: 200px / 10px;-moz-border-radius: 200px / 10px;border-radius: 200px / 10px;box-shadow: 0 0 30px rgba(0, 0, 0, 0.28);} /*------------------ ------------------*/ /* PLANB */ /*------------------ ------------------*/ ::selection {background: #4562AC;color: #fff;} /*------------------ -------------------*/ /* COMMON */ /*------------------ -------------------*/ :root { --maincolor: #4562ac; --maincolor2: #f37335; --textcolor: #1E3246; --hcolor: #1e3246; --red: #e84118; --orange: #f3a416; --blue: #ebf4fa; --green: #4ba767; --grey: #f7f8fa; --yellow: #f7ffec; --white: #fff; --dark: #1b1f2a; --darkgrey: #8599A9; --boxshadow: 0 0 10px rgb(0 0 0 / 25%); } .maincolor {color: var(--maincolor)} .maincolor2 {color: var(--maincolor2)} .maincolor2darker {color: var(--maincolor2darker)} .textcolor {color: var(--textcolor)} .hcolor {color: var(--hcolor)} .red {color: var(--red)} .blue {color: var(--blue)} .green {color: var(--green)} .grey {color: var(--grey)} .darkgrey {color: var(--darkgrey)} .yellow {color: var(--yellow)} .white {color: var(--white)} .dark {color: var(--dark)} .orange {color: var(--orange)} .bg-maincolor {background: var(--maincolor);} .bg-maincolor2 {background: var(--maincolor2);} .bg-textcolor {background: var(--textcolor);} .bg-hcolor {background: var(--hcolor);} .bg-red {background: var(--red);} .bg-blue {background: var(--blue);} .bg-green {background: var(--green);} .bg-grey {background: var(--grey);} .bg-yellow {background: var(--yellow);} .bg-white {background: var(--white);} .bg-dark {background: var(--dark);} .bg-orange {background: var(--orange);} .fw:before,.fw:after {content: '';display: block;background: inherit;position: absolute;height: 100%;width: 10000px;top: 0;} .fw:before{right: 100%;} .fw:after{left: 100%;} /* Список - галочки ---------------------- */ ul.check-list li {list-style-type: none;padding-left: 40px;position: relative;margin-bottom: 5px;margin-left: 0;} ul.check-list li:before {color: #F37335;position: absolute;font-family: 'FontAwesome';content: "\f00c";display: inline-block;left: 0px;} /* Список кружочки ---------------------- */ .circle-list li {list-style-type: none;margin-bottom: 8px;position: relative;} .circle-list li:before {right: calc(100% + 12px);top: 6px;border: 3px solid #F37335;width: 10px;height: 10px;border-radius: 100px;position: absolute;display: block;content: '';} /* ol li customization ---------------------- */ ol.numbered {counter-reset: myCounter;} ol.numbered li {margin-bottom: 5px;list-style-type: none;padding-left: 20px;position: relative;} ol.numbered li:before {background:#49cb5c;counter-increment:myCounter;content:counter(myCounter);position:absolute;left:-14px;top:0;color:#fff;display:inline-block;text-align:center;margin:5px 10px;width:17px;height:17px;line-height:17px;border-radius:20px;font-size:.7em} /*Верстка*/ .main {max-width: 1420px;clear: both;box-sizing: border-box;margin: 0 auto;padding: 0 10px;position: relative;z-index: 2;} h2.linebehind {font-size: 42px;line-height: 48px;text-align: center;color: #000;} .grey {background: #f7f7f7;} /*flex .flex {display: flex;flex-wrap: wrap;justify-content: space-between;} .flex > * {box-sizing: border-box;margin: 1%;} .flex .block10 {flex-basis: 5%;} .flex .block15 {flex-basis: 13%;} .flex .block20 {flex-basis: calc(20% - 2%);} .flex .block25 {flex-basis: calc(25% - 2%);} .flex .block30 {flex-basis: calc(30% - 2%);} .flex .block33 {flex-basis: calc(100% / 3 - 2%);} .flex .block40 {flex-basis: calc(40% - 2%);} .flex .block45 {flex-basis: calc(45% - 2%)} .flex .block50 {flex-basis: calc(50% - 2%);} .flex .block60 {flex-basis: calc(60% - 2%);} .flex .block66 {flex-basis: calc(100% / 3 * 2 - 1%);} .flex .block70 {flex-basis: calc(70% - 2%);} .flex .block80 {flex-basis: calc(80% - 2%);} .flex .block85 {flex-basis: calc(85% - 2%);} .flex .block90 {flex-basis: 85%;} .flex .block100 {flex-basis: 100%;}*/ .dj-offcanvas-pusher-in {overflow-x: hidden;} body {font-size: 18px;line-height: 30px;font-family: 'Montserrat', sans-serif;color: #2b2b2b;} p {margin-bottom: 20px;} a {font-weight:400;color: #4562AC;outline: none;text-decoration: none;} h1 {font-size: 48px;line-height: 56px;font-weight: 700;margin-bottom: 50px;} h2 {color: #2b2b2b;font-size: 48px;line-height: 60px;font-weight: 700;margin-bottom: 40px;} h2 > span {color: #f37335;} h3 {font-size: 28px;} h4 {font-size: 22px;} .fw300 {font-weight: 300;} .fw400 {font-weight: 400;} .tac {text-align: center;} .tal {text-align: left;} .tar {text-align: right;} .padding {padding: 100px 0;} .aic {align-items: center;} .bshad {box-shadow: 0 0 20px rgba(21,87,153,.09);} .p10 {padding: 10px;} .p20 {padding: 20px;} .pb0 {padding-bottom: 0;} .pt0 {padding-top: 0;} .brad10 {border-radius: 10px;} .blue {background: #f2f7fd;} .orange {color: #f37335;} .telegram_fixed_but {position: fixed;right: 20px;bottom: 40px;z-index: 5;} .telegram_fixed_but > img {width: 60px;border-radius: 100%;box-shadow: 1px 0px 5px #aad8fa;transition: .5s;animation: shake 2s;animation-iteration-count: infinite;} .telegram_fixed_but > img:hover {transform: rotate(-360deg);} .curp {cursor: pointer;} @keyframes shake { 100% {box-shadow: 1px 0px 20px #aad8fa;} } h2.style {position: relative;padding-left: 100px;} h2.style:before {content: "";position: absolute;top: -40px;left: 10px;width: 114px;height: 108px;background-image: url(/assets/img/sec-bg.png);background-repeat: no-repeat;z-index: -1;} .button-arrow {color: #fff;font-weight: 500;font-family: Poppins,sans-serif;background: #135e9e;box-shadow: 0 0 10px #9aa5a9;height: 40px;line-height: 40px;padding: 0 60px;border-radius: 30px;position: relative;display: inline-block;border: 0;outline: none;cursor: pointer;white-space: nowrap;} .button-arrow:before {width: 30px;height: 30px;background: url(/assets/img/icons/right-arrow.svg) 50% 50%/100% no-repeat;left: 10px;top: 50%;transform: translateY(-50%);position: absolute;content: '';display: block;} body::-webkit-scrollbar {width: 10px;background: transparent;} body::-webkit-scrollbar-track {background: transparent;} body::-webkit-scrollbar-thumb {background-color: #F37335;border-radius: 10px;} .small {font-size: .85em;line-height: 1.3em;} /* promocode */ .promocode-wrapper { background: #fff; padding: 5px 10px; display: inline-block; border-radius: 10px; } .promocode-wrapper img { display: inline-block; vertical-align: middle; width: 20px; } [data-copy-to-clipboard] {cursor: pointer;} /*----- MODAL*/ /*behavior*/ .fon_modal {z-index: 10001;top: 0;left: 0;bottom: 0;right: 0;position: fixed;display: none;} .modalwrapper {-webkit-overflow-scrolling: touch;perspective: 1000px;overflow-y: scroll;z-index: 1000;top: 0;right: 0;width: 100%;height: 100%;display: none;position: fixed;} .modal {left: 50%;transform: translate(-50%, 0%) rotateX(50deg) scale(.6);bottom: auto;opacity: 0;z-index: 10002;box-sizing: border-box;transition: 1s;display: none;position: absolute;} .modal.poehali {transform: translate(-50%, -50%);opacity: 1;margin-top: 0;} .modal .close_modal {position: absolute;z-index: 999999;/* color: #fff; */text-align: center;cursor: pointer;transition: .5s;} /*modal width & position*/ .modal {width: 450px;top: 50%;} .modal.poehali {transform: translate(-50%, -50%);opacity: 1;margin-top: 0;} /*style*/ .modalwrapper {background: rgba(0, 0, 0, 0.7);} .modal {background: linear-gradient(90deg,#fdc830,#f37335);box-shadow: 5px 5px 15px #000;padding: 40px;font-weight: 500;} .modal .close_modal {color: #000;background: transparent;width: 35px;height: 35px;line-height: 35px;font-size: 30px;border-radius: 5px;right: 15px;top: 15px;} .modal .close_modal:hover {transform: rotate(90deg);} .modal h3 {color: #000;font-weight: 700;font-size: 20px;line-height: 24px;padding: 20px 0;text-align: center;} .modal .block50 {flex-basis: 100%} /* .modal .button-arrow {width: 100%;} */ #modal_5 {width: 700px;background: url(/assets/img/christmas.jpg) 50% 50%/cover no-repeat;} #modal_5 img {width: 130px;} #modal_5 .close_modal {color: #fff} /* HEADER ----------------------------- */ #header {border-bottom: 2px solid #dbe4ef;left: 0;top: 0;width: 100%;position: fixed;z-index: 3;} #header .main {height: 100px;transition: .5s;} #header .main > * {position: absolute;top: 50%;transform: translateY(-50%);} #header .logo {height: 80px;left: 10px;transition:.5s;} .top_icon_block {width: 250px;font-weight: .8;} .top_icon_block {position: relative;padding-left: 30px;} .top_icon_block img {left: 0;top: 3px;position: absolute;} .top_icon_block p {margin-bottom: 0;color: #575757;font-weight: 500;font-size: 16px;transition:.5s;} .top_icon_block b {margin-bottom: 5px;font-weight: 500;display: inline-block;color: #000;} .top_icon_block a {text-decoration: none;color: #575757;font-weight: 500;} .top_icon_block1 {right: 410px ;} .top_icon_block2 {right: 210px;} .top_icon_block3 {right: 10px;} #header.scrolled {background: #fff;} #header.scrolled .main {height: 60px;} #header.scrolled .logo {height: 50px;} #header.scrolled .top_icon_block p {line-height: 18px;} #header .menu {left: 450px;} #header .menu li {margin: 0 30px 0 0; list-style: none;display: inline-block;} #header .menu li > a {color: var(--maincolor);font-size: 17px;font-weight: 600;} #header .menu li > a:hover {color: var(--maincolor2);} #header .tels {right: 250px;} #header .tel {color: #222;displaY: block;font-size: 24px;font-weight: 700;} #header .socials > a {display: inline-block;margin: -5px 0 0 -3px;width: 28px;} #header .button-arrow {right: 10px;} /* BANNER -------------*/ #banner {position: relative;padding-top: 100px;} .oh {min-height: 2000px;} #banner .krug {top: -350px;top: -350px;right: -350px;width: 1300px;height: 1000px;background: #F2F7FD;border-radius: 100%;position: absolute;transform: rotate(-30deg);} #banner .main {height: 600px;} .banner-text {width: 50%;top: 50%;transform: translateY(-50%);position: absolute;} .banner-text p {font-weight: 500;} #banner .img {position: absolute;border-radius: 100%;z-index: 3;transition:.2s linear;} #banner .img1 {top: 100px;right: 250px;width: 270px;} #banner .img2 {top: 430px;right: 260px;width: 160px;} #banner .img3 {top: 290px;right: 30px;width: 210px;} #banner .decor {position: absolute;border-radius: 100%;z-index: 2;transition:.2s linear;} #banner .decor1 {right: 10px;top: 100px;height: 100px;width: 100px;background: #F37335;} #banner .decor2 {right: 160px;top: 220px;height: 50px;width: 50px;background: linear-gradient(to top, #F37635, #FCC130);} #banner .decor3 {right: 480px;top: 410px;height: 80px;width: 80px;background: #FDC830;} /* Attention -------------*/ #attention {margin-top: 100px;} #attention .main {background: linear-gradient(90deg,#f7f7e9,#e7d371);background-repeat: no-repeat;padding: 50px 100px;border-radius: 40px;position: relative} /* Why -------------*/ #why {padding: 100px 0;} #why .whyblock {background: #fff;padding: 25px 20px 19px;} #why .whyblock img {width: 45px;display: block;} /* To Know ---------------*/ #toknow .text_box1, #toknow .text_box3 {border-left: 6px solid #f37335;border-radius: 5px;padding-left: 50px;} #toknow .text_box2, #toknow .text_box4 {border-right: 6px solid #0056b3;border-radius: 5px;padding-right: 50px;} /* About ----------------*/ #about .aboutblock1 {padding: 20px;} #about .aboutblock1 p {font-size: 16px;line-height: 23px;font-weight: 400;margin-top: 20px;padding-top: 20px;border-top: 1px solid #41434a;} #about .aboutblock2 {padding-left: 50px;} #uchebprogr .block:nth-child(2) {border: 5px solid var(--maincolor2);transform: translateY(-10px);} #uchebprogr .block img {width: 50px;} #uchebprogr .popular {background: var(--maincolor2);position: absolute;top: 0;right: 0;color: #fff;padding: 5px 10px;border-radius: 0 0 0 10px;} #onlineobuch img, #homeschool img {width: 250px;margin: 0 auto;display: block;} /* Teacher -----------*/ #teacher h2 {margin-bottom: 60px;} #teacher h4 {font-size: 19px;line-height: 25px;margin: 0 0 10px;font-weight: 600;} #teacher .who {font-size: .8em;line-height: 1.5em;font-weight: 300;margin-bottom: 5px;} #teacher .img {position: relative;margin-bottom: 30px;} #teacher .img img {border-radius: 20px;} #teacher .img .subject {font-size: .7em;line-height: 25px;background-color: #ffd31d;bottom: 0;left: 25px;margin: 0;white-space: nowrap;padding: 0 10px;border-radius: 100px;transform: translateY(50%);position: absolute;} #teacher .img .subject img {display: inline-block;vertical-align: middle;width: 15px;border-radius: 0;margin-right: 7px;} /* OWL Gallery */ .owl-carousel .owl-stage-outer {overflow: visible !important} .owl-item.active {transform: none !important;opacity: 1;} .owl-item {transform: scale(.8) !important;transition: linear .5s;opacity:.5;} /* owl-dots */ .owl-carousel .owl-dots {width: 100%;text-align:center;box-sizing: border-box;} .owl-carousel .owl-dots .owl-dot{display:inline-block;outline: none;height:5px;width:30px;background:#dcdde1;border-radius:2px;margin:0 10px} .owl-carousel .owl-dots .owl-dot.active{background: #f37335;} /* owl-nav */ .owl-carousel .owl-nav {right: 0;position: absolute;top: -135px;transform: translateY(50%);} .owl-carousel .owl-nav button {width: 50px;height: 50px;line-height: 40px !important;background: rgb(243 115 53) !important;color: #fff !important;border-radius: 5px;font-size: 26px!important;outline: none;margin-left: 10px;} .owl-carousel .owl-nav button:hover {background:#245ea3!important;color:#fff!important} .owl-carousel .owl-nav button.disabled {background: #ccc !important;cursor: initial;} /* Offline school ----------*/ .additional-block.padding {padding: 10px 0 100px;} .additional-block .main {background: linear-gradient(90deg,#f2f7fd,#4c92ce);background-repeat: no-repeat;padding: 57px 100px 55px;border-radius: 40px;position: relative;} .additional-block .main:before {content: "";position: absolute;bottom: 46px;left: 0;width: 59px;height: 115px;background-image: url(/assets/img/06.form/form-bg1.png);background-repeat: no-repeat;z-index: 2;} .additional-block .main:after {content: "";position: absolute;bottom: 15px;right: 0;width: 78px;height: 100px;background-image: url(/assets/img/06.form/form-bg2.png);background-repeat: no-repeat;z-index: 2;} .additional-block h3 {color: #2b2b2b;font-size: 28px;line-height: 36px;font-weight: 700;margin-bottom: 20px;} .additional-block2 .main {background: linear-gradient(90deg,#f2fdf5,#97e76d);} .additional-block3 .main {background: linear-gradient(90deg,#f7f7e9,#e7d371);} .additional-block .button-arrow {background: var(--maincolor2);color: #fff;text-align: center;line-height: 70px;height: 70px;} .additional-block .text-center {text-align: center;margin: 30px auto 0;} .additional-block .button-arrow:before {content: none;} /* Price ---------------*/ #price img {border-radius: 10px 10px 0 0;/* min-height: 100px; */border-bottom: 8px solid #1161a0;} #price .info {padding: 40px 15px 27px;} #price .flex.price-wrapper > div {border: 1px solid #d6d6d6;border-radius: 10px;position: relative;padding-bottom: 50px;} #price .flex.price-wrapper > div .button-arrow { position: absolute; bottom: 30px; width: calc(100% - 30px); box-sizing: border-box; text-align: center; } #price .info {border-radius: 0 0 10px 10px;} #price .flex.price-wrapper .block100 {border: 0} #price .info h2 {position: relative;font-size: 25px;line-height: 30px;margin-bottom: 20px;/* font-weight: 500; */} #price .info h2 span {font-size: 1.5em;font-weight: 700;} #price .info h2:before {content: "";position: absolute;top: -20px;left: -10px;width: 75px;height: 71px;background: url(/assets/img/sec-bg.png) 50% 50%/100%;z-index: -1;} #price .price {color: var(--maincolor2);font-size: 24px;font-weight: 700;text-align: right; margin: 15px 0 30px;} #price .price.old_price {text-decoration: line-through;font-size: 22px;color: #1161a0;font-weight: 700;display: block;text-align: right;margin: 15px 0 20px;} /* Learning ---------------*/ #learning h2 {margin-bottom: 80px;} #learning .lblock {margin-bottom: 50px;} #learning .lblock img {border-radius: 100%;width: 215px;box-shadow: 0 0 20px rgb(60 60 60 / 26%);margin-bottom: 15px;} #learning .lblock h4 {font-size: 18px;line-height: 24px;} #learning .lblock p {font-size: 16px; line-height: 24px;} #learning .lblock h4, #learning .lblock p {max-width: 380px;margin-left: auto;margin-right: auto;} /* FAQ ---------------*/ #faq .q{padding: 30px 20px;border-left: 7px solid #1161a0;border-radius: 10px;box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.14);cursor:pointer;margin-bottom:20px;position: relative;} #faq .q:after {right: 30px;top: 50%;transform: translateY(-50%);width: 30px;height: 30px;background: url(/assets/img/icons/plus.svg) 0 0/100% no-repeat;content: '';position: absolute;display: block;transition: .5s;transform-origin: 50% 50%;} #faq .q.open:after {transform: translateY(-50%) rotate(45deg);} #faq .a{padding: 20px;margin-bottom: 20px;display: none;line-height: 26px;border: 1px solid #dadada;border-radius: 10px;margin-top: 20px;} /* form ----------*/ #form {transform: translateY(50%);} #form form {position: relative;z-index: 3;} #form .main {background: linear-gradient(90deg,#fdc830,#f37335);background-repeat: no-repeat;padding: 57px 100px 55px;border-radius: 40px;position: relative;} #form .main:before {content: "";position: absolute;bottom: 46px;left: 0;width: 59px;height: 115px;background-image: url(/assets/img/06.form/form-bg1.png);background-repeat: no-repeat;z-index: 2;} #form .main:after {content: "";position: absolute;bottom: 15px;right: 0;width: 78px;height: 100px;background-image: url(/assets/img/06.form/form-bg2.png);background-repeat: no-repeat;z-index: 2;} input[type="text"], textarea, select {width: 100%;background: #fddead;border-radius: 20px;border: 0;padding: 6px 20px;box-sizing: border-box;font: inherit;outline: none;line-height: 40px;min-height: 40px;} select {-webkit-appearance: none;color: #8c877f;background: url(/assets/img/icons/arrowdown.svg) no-repeat 95% 21px #fddead;background-size: 10px auto;} select option {color: #8c877f;} textarea {height: 70px;line-height: 25px;} #form h3 {font-size: 36px;line-height: 50px;margin-bottom: 70px;} #form h3 span {color: #fff;} #form .button-arrow {font: inherit} /* contacts ----------*/ #contacts {background: #f2f7fd;padding: 250px 0 100px;} #contacts .contact2 img {max-width: 35px;} #contacts .contact2 a {padding-left: 10px;text-align: left;font-weight: 600;color: #000;} .copyright {font-size: .8em;display: inline-block;color: #000;text-decoration: none;transform: translateY(90px);} .copyright:hover {text-decoration: underline;} .copyright img {width: 50px;} /* success-page-banner ----------*/ .success-page-banner .image {min-height: 450px;} .success-page-banner .image:after {display:block;content:'';background: url(/assets/img/02.banner/img4.jpg) 50% 50%/cover no-repeat;position:absolute;left: 0;top:0;width: calc(100% + 50%);height:100%;z-index:2;} .success-page-banner .image2:after {content:'';background: url(/assets/img/02.banner/img5.jpg) 50% 50%/cover no-repeat;} .success-page-banner .bigbutton {font-size: 15px;background: var(--maincolor2);border: none;outline: none;font-weight: 800;line-height: 50px;box-sizing: border-box;display:inline-block;color:#fff;padding: 0 45px;border-radius: 30px;transition: .5s;} .success-page-banner .bigbutton:hover {background: #2f3a83;cursor: pointer;} .success-page-banner .effect{position:relative;overflow:hidden} .success-page-banner .effect:before{content:'';width:100%;height:60px;display:block;position:absolute;z-index:3;border-left:100px solid rgba(255,255,255,.3);box-shadow:-20px 30px 30px rgba(255,255,255,.3);background:0 0;top:0;left:-100px;margin-left:-1px;transition:all 0s ease-in-out;transform:translate(0,0)} .success-page-banner .effect:hover:before{-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;transition:all .4s ease-in-out;-webkit-transform:translate(115%,0);-moz-transform:translate(115%,0);-ms-transform:translate(115%,0);-o-transform:translate(115%,0);transform:translate(115%,0)} .success-page-steps .steps-number {width: 80px;height: 80px;font-size: 30px;line-height: 80px;font-weight: 800;text-align: center;} #vasha-zayavka-otpravlena #contacts {padding: 100px 0 0;} @media all and (max-width: 1220px) { .main {width: 990px;} /* header -------------*/ #form h3 {font-size: 28px;line-height: 40px;margin-bottom: 30px;} /* BANNER -------------*/ #banner .img, #banner .decor {transform: none !important;} #banner .img1 {right: 210px;} #banner .img2 {right: 240px;} #banner .img3 {right: 10px;} #banner .decor2 {right: 130px;} #banner .decor3 {right: 420px;} /* about -------------*/ #about .button-arrow {font-size: .9em;} } @media all and (max-width: 980px) { .main {width:770px;} h1 {font-size: 35px;line-height: 45px;} h2.heading {font-size: 36px;line-height: 46px;} /* header -------------*/ .top_icon_block2 {display: none;} .top_icon_block1 {right: 200px;} /* BANNER -------------*/ #banner .img1 {right: 115px;width: 240px;} #banner .img2 {top: 380px;right: 180px;width: 140px;} #banner .img3 {right: 0px;width: 150px;} #banner .decor1 {right: 0px;top: 100px;height: 80px;width: 80px;} #banner .decor2 {right: 50px;} #banner .decor3 {right: 290px;top: 335px;width: 40px;height: 40px;} .additional-block h2 {font-size: 36px;line-height: 46px;margin-bottom: 30px;} /* Why -------------*/ #why .whyblock {flex-basis: 47%;} #why .flex {justify-content: center;} /* Price ---------------*/ #price .flex.price-wrapper > div {flex-basis: 100%;} .flex.price-wrapper > div > img {width: 100%;} /* To Know ---------------*/ #toknow {padding-bottom: 0;} .text_box, .image_box {margin-bottom: 100px;} /* form ----------*/ #form {transform: none;} #form h3 {font-size: 28px;line-height: 40px;margin-bottom: 20px;} #form .block40, #form .block60, #contacts .block50 {flex-basis: 100%;} #form, #contacts {padding: 50px 0;} /* contacts ----------*/ .copyright {transform: translateY(40px);} .success-page-banner .image2:after {content:'';background: url(/assets/img/02.banner/img5.jpg) 50% 10%/cover no-repeat;left: -25px;} /* success-page ----------*/ .success-page-banner .bigbutton {font-size: 14px;padding: 0 25px;} } @media all and (max-width: 768px) { .main {width: 100%;} .padding {padding: 50px 0;} h2.heading {font-size: 28px;line-height: 35px;margin-bottom: 30px;} .button-arrow {height: auto; line-height: 20px;padding: 10px 50px;} /* modal*/ .modal {padding: 20px;left: 0;top: 0;transform: none !important;width: 100%;min-height: 100%;border-radius: 0;} .modal .close_modal {top: 5px;right: 5px;} .modal .comment {text-align: left;} #modal_1 .modal_boxs {width: 500px; margin: 0 auto; text-align: center;} /* BANNER -------------*/ .banner-text {position: initial;} .top_icon_block3 {display: none;} .top_icon_block1 {right: -80px;} .banner-text {width: 100%;top: 40px;transform: none;} #banner {padding-top: 150px;} #banner .img1 {top: 409px;right: 230px;width: 200px;} #banner .img2 {top: 391px;right: 470px;width: 100px;} #banner .img3 {top: 376px;right: 30px;width: 150px;} #banner .decor1 {right: 50px;top: 300px;height: 50px;width: 50px;} #banner .decor2 {right: 220px;top: 409px;height: 30px;width: 30px;} #banner .decor3 {right: 481px;top: 526px;height: 40px;width: 40px;} /* Why -------------*/ #why .whyblock:nth-child(3) {flex-basis: 100%} .additional-block h2 {font-size: 34px;line-height: 40px;margin-bottom: 30px;} /* About ----------------*/ #about .block50 {flex-basis: 100%;} #about .aboutblock2 {padding-left: 0;} /* Teacher -----------*/ .owl-carousel .owl-nav {display: none !important;} /* Price ---------------*/ #price .info h2:before {left: 0;} #price .block45 {flex-basis: 100%;} /* FAQ ---------------*/ #faq .q:after {right: 12px;} #faq .q {padding: 20px 10px;} /* form */ #form .main {padding: 30px 45px;} #form .block50 {flex-basis: 100%;} #header .tels {right: 10px;} /* contacts ----------*/ #contacts {padding: 100px 0 50px;} .discount-block {position: absolute;top: 50%;transform: translateY(-50%);} #modal_5 {width: 100%;} /* success-page ----------*/ .success-page-banner .bigbutton {font-size: 14px;padding: 0 15px;} } @media all and (max-width: 570px) { .main {width: auto;} h2.style:before {top: -10px;left: 0;width: 52px;height: 58px;background: url(/assets/img/sec-bg.png) 50% 50%/100% no-repeat;} h2.style {margin-bottom: 50px;} h4 {font-size: 18px;line-height: 22px; margin: 10px 0;} h3 {font-size: 23px;} h2 {font-size: 28px;line-height: 40px} h2.style {padding-left: 50px;} /* header -------------*/ .oh {padding-top: 75px;} #header {position: fixed;left: 0;top: 0;width: 100%;height: 75px;z-index: 5;background: #fff;padding-top: 0;} #header .main {height: 75px;} #header .logo {height: 62px;} .top_icon_block1 {right: -90px;} .top_icon_block p {line-height: 18px;} #header.scrolled {height: 60px;} /* BANNER -------------*/ #banner {padding-top: 0;} #banner .krug {top: -410px;right: -111px;width: 960px;height: 890px;transform: rotate(0deg);} .banner-text {padding-top: 20px;} h1 {font-size: 29px;line-height: 36px;margin-bottom: 30px;} #banner .main {height: 500px;} #banner .img1, #banner .img2,#banner .img3,#banner .decor1,#banner .decor2,#banner .decor3 {display: none;} /* Attention -------------*/ #attention {margin-top: 0;} #attention .main {padding: 30px;} /* why -------------*/ #why {padding-top: 50px;} #why .whyblock, #learning .block50 {flex-basis: 100%;} #learning .lblock img {width: 160px;} /* Teacher -----------*/ .owl-carousel {padding-right: 45px;box-sizing: border-box;} .owl-carousel .owl-dots .owl-dot {width: 20px;margin: 0px 7px;} /* Price ---------------*/ #price .flex.price-wrapper > div {flex-basis: 100%;} .additional-block.padding {padding: 10px 0 50px;} .additional-block .main {padding: 45px 35px 45px;border-radius: 40px;position: relative;} .additional-block h2 {font-size: 26px;line-height: 30px;margin-bottom: 20px;} .additional-block h3 {font-size: 19px;line-height: 25px;margin-bottom: 10px;} .additional-block .button-arrow {line-height: 50px;height: 50px;} /* to know -------------*/ #toknow .text_box1, #toknow .text_box3 {padding-left: 10px;} #toknow .text_box2, #toknow .text_box4 {padding-right: 10px;} .text_box {margin-bottom: 0;} .image_box {margin-bottom: 100px;} #toknow p {font-size: 15px;line-height: 18px;} #toknow .block40, #toknow .block60 {flex-basis: 100%;} #toknow p {font: inherit;} #toknow .text_box1 {order: 1;} #toknow .image_box1 {order: 2;} #toknow .text_box2 {order: 3;} #toknow .image_box2 {order: 4;} #toknow .text_box3 {order: 5;} #toknow .image_box3 {order: 6;} #toknow .text_box4 {order: 7;} #toknow .image_box4 {order: 8;} /* FAQ ---------------*/ #faq .q {padding: 20px 50px 20px 10px;} #form h3 {font-size: 22px;line-height: 28px;} #form .main {padding: 15px 20px;} /* form ----------*/ #form, #contacts {padding: 20px 0 !important;} /* contacts ----------*/ #contacts .block40, #contacts .block60 {flex-basis: 100%;} .copyright {transform: translateY(20px);} /* success-page ----------*/ .success-page-banner .image:after {content:'';left: -25px;} .success-page-banner .image {min-height: 250px;} }