/*------------------------------------------------------------------ [Table of contents] 1.Body 2.Typographics 2.1 Titles / .title / titles.less 2.2	Lists / ul, ol / typographics.less 2.3 Paragraphs / p / typographics.less 2.4 Links / .link / links.less 2.5 Blockqute / .blockqute / blockqute.less 2.6 Icons / .icon / icons.less 3.Layout 3.1 Page / .page / layout.less 3.2 Header / .header / layout.less 3.3 Footer / .footer / layout.less 3.4 Left column / .sidebar / sidebar.less 3.5 Right column / 3.5.1 Container / .container / content.less 3.5.2 Content / .content / content.less 3.5.3 Connection tabs_infoblocks.less / .tabs_infoblocks / content.less 4.Sections 4.1 Contacts / .contacts / contacts.less 4.2 Resume / .resume / resume.less 5.Components 5.1 Navigation / .nav / nav.less 5.2 Pagination / .pagination / pagination.less 5.3 Iconbox / .iconbox / iconbox.less 5.4 Progress bar / .progress-bars / progress-bar.less 5.5 Timeline / .timeline / timeline.less 5.6 Card / .card / card.less 5.7 Clients / .clients / clients.less 5.8 Pricing Table / .price-table / price_table.less 5.9 Contacts form / .form / .form.less 5.10 Popup / .popup / popup.less 5.11 Preloaders / .preloader / preloaders.less -------------------------------------------------------------------*/ /* *mixin for set default box-shadow */ /* *color variables */ * { margin: 0; padding: 0; border: none; } html { font-size: 10px; } @media screen and (max-width: 1024px) { html { font-size: 8px; } } @media screen and (max-width: 640px) { html { font-size: 6.5px; } } body { font-family: Arial, Helvetica, sans-serif; font-size: 1.4rem; background-color: #eee; } .responsive-img { max-width: 100%; height: auto; } h1, h2, h3, h4, h5, h6 { color: #000; box-sizing: border-box; } .title, h2 { font-size: 2.4rem; font-weight: 700; text-transform: uppercase; line-height: 3.5rem; } .title_middle, h3 { font-size: 2.2rem; line-height: 3rem; } .title_middle { margin-bottom: 3rem; } .title_small, h4 { font-size: 1.8rem; line-height: 2.5rem; } .title_little, h5 { font-size: 1.4rem; } .main-title { letter-spacing: .1rem; text-align: center; margin-bottom: 5rem; } .main-title__label { background-color: #fff; position: relative; } .main-title__label:before, .main-title__label:after { content: ""; display: block; width: 7.5rem; height: 1px; background-color: #C5CAE9; position: absolute; top: 50%; -webkit-transform: translate(0, -50%); transform: translate(0, -50%); } .main-title__label:before { left: -9.5rem; } .main-title__label:after { right: -9.5rem; } .title__label { display: inline-block; vertical-align: middle; } a { text-decoration: none; color: #3F51B5; transition: color 0.4s ease-out; } a:hover, a:focus { color: #303F9F; } .link-flat { display: inline-block; padding: 1rem 2rem; text-align: center; border: 0.1rem solid #303F9F; background-color: #fff; font-size: 1.2rem; font-weight: 700; color: #303F9F; text-transform: uppercase; } .link-flat:hover, .link-flat:focus { background-color: #303F9F; color: #fff; } .link-flat:hover .link__icon:before, .link-flat:focus .link__icon:before { color: #fff; } .blockquote { position: relative; padding: 0 3.5rem; box-sizing: border-box; border-left: 0.5rem solid #303F9F; } .blockquote__quote { position: absolute; } .blockquote__quote:before { color: #303F9F; } .blockquote__quote-left { top: 0; left: 1rem; } .blockquote__quote-right { bottom: 0; right: 1rem; } @font-face { font-family: 'icomoon'; src: url('../../../icons/icomoon.ttf?wt3z8g') format('truetype'), url('../../../icons/icomoon.woff?wt3z8g') format('woff'), url('../../../icons/icomoon.svg?wt3z8g#icomoon') format('svg'); font-weight: normal; font-style: normal; } [class^="icon-"], [class*=" icon-"] { /* use !important to prevent issues with browser extensions that change fonts */ font-family: 'icomoon' !important; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .icon-account_circle:before { content: "\e853"; } .icon-assignment:before { content: "\e85d"; } .icon-mode_edit:before { content: "\e254"; } .icon-laptop_windows:before { content: "\e321"; } .icon-person_pin_circle:before { content: "\e56a"; } .icon-local_offer:before { content: "\e54e"; } .icon-keyboard:before { content: "\e312"; } .icon-smile:before { content: "\e901"; } .icon-calendar:before { content: "\e900"; } .icon-mobile2:before { content: "\e902"; } .icon-location:before { content: "\e903"; } .icon-bubbles:before { content: "\e909"; } .icon-earth:before { content: "\e906"; } .icon-man-woman:before { content: "\e907"; } .icon-embed2:before { content: "\e90a"; } .icon-whatsapp:before { content: "\e908"; } .icon-book:before { content: "\e90b"; } .icon-address-book:before { content: "\e904"; } .icon-stats-bars:before { content: "\e905"; } .icon-coffee:before { content: "\f0f4"; } .icon-thumbs-up:before { content: "\f164"; } .icon-eye:before { content: "\f06e"; } .icon-laptop:before { content: "\f109"; } .icon-quote-left:before { content: "\f10d"; } .icon-quote-right:before { content: "\f10e"; } .icon-html5:before { content: "\f13b"; } .icon-bookmark:before { content: "\f02e"; } .icon-comments:before { content: "\f086"; } .icon-trophy:before { content: "\f091"; } .icon-users:before { content: "\f0c0"; } .icon-suitcase:before { content: "\f0f2"; } .icon-file-text-o:before { content: "\f0f6"; } .icon-windows:before { content: "\f17a"; } .icon-android:before { content: "\f17b"; } .icon-graduation-cap:before { content: "\f19d"; } .icon-diamond:before { content: "\f219"; } .icon-user:before { content: "\f007"; } .icon-twitter:before { content: "\f099"; } .icon-facebook:before { content: "\f09a"; } .icon-facebook-f:before { content: "\f09a"; } .icon-github:before { content: "\f09b"; } .icon-google-plus:before { content: "\f0d5"; } .icon-envelope:before { content: "\f0e0"; } .icon-linkedin:before { content: "\f0e1"; } .icon-cloud-download:before { content: "\f0ed"; } .icon-dollar:before { content: "\f155"; } .icon-usd:before { content: "\f155"; } .icon-skype:before { content: "\f17e"; } .icon-envelope-square:before { content: "\f199"; } .icon-tablet:before { content: "\f10a"; } .icon-support:before { content: "\f1cd"; } .icon { display: inline-block; vertical-align: middle; } .icon:before { font-size: 1.6rem; color: #3F51B5; } .icon_small:before { font-size: 2.4rem; } .icon_middle:before { font-size: 3.2rem; } .icon_large:before { font-size: 4.8rem; } .icon_white:before { color: #fff; } .main-icon:before { color: #303F9F; } ul, ol { list-style-position: inside; color: #3F51B5; } ul, ol, p { line-height: 2.5rem; margin-bottom: 1.5rem; } ul:last-of-type, ol:last-of-type, p:last-of-type { margin-bottom: 0; } /* *import CSS for layout */ .page { width: 100%; display: -webkit-flex; display: flex; } @media screen and (max-width: 1200px) { .page { -webkit-flex-wrap: wrap; flex-wrap: wrap; } } @media screen and (min-width: 1400px) { .header { height: 2.5vw; line-height: 2.5vw; } } @media screen and (min-width: 1201px) { .header { padding-top: 2vw; } } @media screen and (min-width: 1201px) and (max-width: 1399px) { .header { height: 3.5vw; line-height: 3.5vw; } } .sidebar { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.298039); } @media screen and (min-width: 1201px) { .sidebar { position: fixed; height: 100vh; } } @media screen and (orientation: portrait) and (max-width: 1200px) { .sidebar { height: 100vh; } } @media screen and (min-width: 1400px) { .sidebar { width: 35%; } } @media screen and (min-width: 1201px) and (max-width: 1399px) { .sidebar { width: 30%; } } @media screen and (max-width: 1200px) { .sidebar { width: 100%; } } .js-yes .sidebar { opacity: 0; transition: opacity 0.6s ease-out; } .page-loaded .sidebar { opacity: 1; } .avatar { height: 100%; /* background: url("http://placehold.it/1000x1500") no-repeat center center; */ background: url("../../../img/road.jpg") no-repeat center center; background-size: cover; } .mobile-avatar { display: none; } @media screen and (orientation: landscape) and (max-width: 1200px) { .avatar { display: none; } .mobile-avatar { display: block; width: 100%; } } .welcome { background-color: #3F51B5; width: 100%; box-sizing: border-box; position: absolute; left: 0; bottom: 0; padding: 1rem; text-align: center; } .welcome__msg { font-size: 2.2rem; font-weight: 400; color: #fff; } .welcome__label { font-weight: 400; font-size: 1.2rem; color: #C5CAE9; display: block; margin-top: .5rem; } .container { position: relative; box-sizing: border-box; } @media screen and (min-width: 1400px) { .container { width: 65%; margin-left: 35%; } } @media screen and (min-width: 1201px) and (max-width: 1399px) { .container { width: 70%; margin-left: 30%; } } .content { box-sizing: border-box; } @media screen and (min-width: 1400px) { .content { padding-top: .4vw; } } @media screen and (min-width: 1201px) and (max-width: 1399px) { .content { padding-top: .5vw; } } @media screen and (max-width: 1200px) and (min-width: 481px) { .content { padding-top: 7rem; } } @media screen and (max-width: 480px) { .content { padding-top: 9rem; } } .content__section { box-sizing: border-box; width: 100%; max-width: 100%; padding-bottom: 5rem; margin-bottom: 5rem; border-bottom: 0.1rem dashed #C5CAE9; } .content__section:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none; } .tabs-infoblocks { padding: 2vw 2vw 1rem; overflow-y: hidden; width: 100%; box-sizing: border-box; } @media screen and (min-width: 1023px) { .tabs-infoblocks { min-height: 100vh; } } .tabs-infoblock { box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.298039); background-color: #fff; position: relative; padding-top: 5rem; padding-bottom: 5rem; width: 100%; box-sizing: border-box; } .tabs-infoblock:after { content: ""; display: block; background-color: #303F9F; width: 4rem; height: 8rem; position: absolute; top: 0; } @media screen and (max-width: 1399px) { .tabs-infoblock:after { right: 2rem; } } @media screen and (min-width: 1400px) { .tabs-infoblock:after { right: 4rem; } } .js-yes .tabs-infoblock { padding: 0; height: 0; opacity: 0; -webkit-transform: translate3d(0, 120vh, 0); transform: translate3d(0, 120vh, 0); transition: -webkit-transform 0.7s cubic-bezier(0.98, 0.4, 0.01, 0.88); transition: transform 0.7s cubic-bezier(0.98, 0.4, 0.01, 0.88); transition: transform 0.7s cubic-bezier(0.98, 0.4, 0.01, 0.88), -webkit-transform 0.7s cubic-bezier(0.98, 0.4, 0.01, 0.88); } .js-yes .js-tabs-infoblock_active { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); height: auto; padding-top: 5rem; padding-bottom: 5rem; } @media screen and (max-width: 1399px) { .tabs-infoblock__inner { padding-right: 2rem; padding-left: 2rem; } } @media screen and (min-width: 1400px) { .tabs-infoblock__inner { padding-right: 4rem; padding-left: 4rem; } } .footer { padding: 2rem 0; text-align: center; font-size: 1.2rem; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } /* *import CSS for main sections */ .download-resume { display: block; margin: 3rem auto 0; width: 20rem; } .download-resume__label { display: inline-block; vertical-align: middle; margin-left: 1rem; } .js-yes .map { width: 100%; height: 400px; margin-top: 40px; } @media screen and (max-width: 480px) { .js-yes .map { height: 300px; } } .social { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-align-items: center; align-items: center; } .social__icon { width: 4rem; height: 4rem; line-height: 4rem; text-align: center; margin: 0 .5rem; border-radius: 50%; border: 0.1rem solid #303F9F; transition: background-color 0.4s ease-out; } .social__icon:hover, .social__icon:focus { background-color: #303F9F; } .social__icon:hover:before, .social__icon:focus:before { color: #fff; } .social__icon:focus { outline: none; } .contacts__social { -webkit-justify-content: center; justify-content: center; margin-top: 8rem; } .social__name { position: absolute; opacity: 0; left: -10000px; } /* *import CSS for components */ .nav { position: fixed; right: 2vw; top: 2vw; z-index: 10; display: -webkit-flex; display: flex; -webkit-justify-content: space-around; justify-content: space-around; width: 66%; background-color: #303F9F; box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.298039); } .js-yes .nav { -webkit-transform: translate3d(0, -100px, 0); transform: translate3d(0, -100px, 0); transition: -webkit-transform 0.2s ease-out; transition: transform 0.2s ease-out; transition: transform 0.2s ease-out, -webkit-transform 0.2s ease-out; } .page-loaded .nav { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .page-loaded .js-nav_fixed { -webkit-transform: translate3d(0, -20px, 0); transform: translate3d(0, -20px, 0); } @media screen and (min-width: 1400px) { .nav { width: 61%; height: 2.5vw; line-height: 2.5vw; } } @media screen and (min-width: 1201px) and (max-width: 1399px) { .nav { height: 3.5vw; line-height: 3.5vw; } } @media screen and (max-width: 1200px) { .nav { width: 96%; position: absolute; } .page-loaded .js-nav_fixed { position: fixed; left: 0; top: 0; -webkit-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0); width: 100%; } } .nav__link { display: inline-block; box-sizing: border-box; width: 16.666667%; color: #fff; font-weight: 700; letter-spacing: .05rem; text-transform: uppercase; text-align: center; transition: background-color 0.4s ease-out; } .nav__link:hover, .nav__link:focus { background-color: #fff; color: #303F9F; } .nav__link:hover .nav__icon:before, .nav__link:focus .nav__icon:before { color: #303F9F; } .page-loaded .js-nav__link_active { background-color: #fff; color: #303F9F; } .page-loaded .js-nav__link_active .nav__icon { -webkit-transform: rotateY(360deg); transform: rotateY(360deg); } .page-loaded .js-nav__link_active .nav__icon:before { color: #303F9F; } @media screen and (max-width: 1200px) { .nav__link { padding: 1.5rem 0; } } .page-loaded .nav__icon { transition: -webkit-transform 0.5s ease-out; transition: transform 0.5s ease-out; transition: transform 0.5s ease-out, -webkit-transform 0.5s ease-out; } @media screen and (max-width: 480px) { .nav__icon { display: block; margin-bottom: 0.5rem; } .nav__icon:before { font-size: 2.3rem; } } .nav__label { display: inline-block; vertical-align: middle; } @media screen and (max-width: 480px) { .nav__label { font-size: 1.25rem; } } .pagination { list-style: none; padding: 1rem 0; display: -webkit-flex; display: flex; } .pagination__item { margin-left: .5rem; margin-right: .5rem; } .pagination__element { padding: .8rem 1.5rem; border: 0.1rem solid #3F51B5; color: #3F51B5; } .pagination__element:hover, .pagination__element:focus { background-color: #3F51B5; color: #fff; } .pagination__element_active { border-color: #303F9F; background-color: #303F9F; color: #fff; } .iconboxs { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; } .iconbox { box-sizing: border-box; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; } .iconbox:nth-of-type(1), .iconbox:nth-of-type(2) { margin-top: 0; } @media screen and (min-width: 481px) { .iconbox { width: 23.5%; margin-top: 1.9vw; } .iconbox:nth-of-type(3), .iconbox:nth-of-type(4) { margin-top: 0; } .iconbox:nth-of-type(4n+2) { margin-left: 2%; margin-right: 1%; } .iconbox:nth-of-type(4n+3) { margin-right: 2%; margin-left: 1%; } } @media screen and (max-width: 480px) { .iconbox { width: 49%; margin-top: 2rem; } .iconbox:nth-of-type(3), .iconbox:nth-of-type(4) { margin-top: 2rem; } .iconbox:nth-of-type(2n+2) { margin-left: 1%; } .iconbox:nth-of-type(2n+1) { margin-right: 1%; } } .iconbox__icon { margin-right: .8rem; } .iconbox__icon:before { color: #303F9F; } .iconbox__label { display: block; color: #000; } .iconbox__name { font-size: 1.6rem; font-weight: 700; margin-bottom: .2rem; } .progress-bar { margin-top: 3rem; } .progress-bar:first-child { margin-top: 0; } .progress-bar__name { font-size: 1.4rem; font-weight: 700; color: #000; text-transform: uppercase; } .progress { width: 100%; height: .4rem; margin-top: 1rem; position: relative; background-color: #eee; } .progress__value { position: absolute; bottom: 0; left: 0; height: 100%; background-color: #3F51B5; } .timeline { border-left: 0.3rem solid #303F9F; position: relative; padding: 3rem 0 3rem 2rem; } .timeline__box { margin-bottom: 3rem; padding: 1rem 2rem; position: relative; border: 0.2rem solid #3F51B5; transition: border-color 0.4s ease-out; } .timeline__box:before, .timeline__box:after { content: ""; display: block; position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); background-color: #3F51B5; transition: background-color 0.4s ease-out; } .timeline__box:before { width: 1rem; height: 1rem; border-radius: 50%; left: -2.7rem; } .timeline__box:after { width: 2rem; height: .2rem; left: -2rem; } .timeline__box:last-child { margin-bottom: 0; } .timeline__box:hover { border-color: #303F9F; } .timeline__box:hover:before, .timeline__box:hover:after { background-color: #303F9F; } .timeline__caption { display: block; margin-top: .3rem; font-size: 1.2rem; font-weight: bold; color: #3F51B5; } .timeline__content { margin-top: 1rem; } .cards { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; } .card { box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.298039); background-color: #fff; box-sizing: border-box; margin-top: 1.5vw; } .card:nth-of-type(1), .card:nth-of-type(2) { margin-top: 0; } @media screen and (max-width: 1399px) { .card { width: 49%; } .card:nth-of-type(2n+2) { margin-left: 1%; } .card:nth-of-type(2n+1) { margin-right: 1%; } } @media screen and (min-width: 1400px) and (max-width: 2099px) { .card { width: 32.5%; margin-top: .7vw; } .card:nth-of-type(3) { margin-top: 0; } .card:nth-of-type(3n+2) { margin-left: 1%; margin-right: 1%; } } @media screen and (min-width: 2100px) { .card { width: 23.5%; margin-top: 1.9vw; } .card:nth-of-type(3), .card:nth-of-type(4) { margin-top: 0; } .card:nth-of-type(4n+2) { margin-left: 2%; margin-right: 1%; } .card:nth-of-type(4n+3) { margin-right: 2%; margin-left: 1%; } } @media screen and (max-width: 480px) { .card { width: 100%; margin-top: 2rem; } .card:nth-of-type(2), .card:nth-of-type(3), .card:nth-of-type(4) { margin-top: 2rem; } .card:nth-of-type(2n+2), .card:nth-of-type(2n+1) { margin-left: 0; margin-right: 0; } } .card_bg-yes { background-color: #3F51B5; color: #fff; } .card_bg-yes .card__title { color: #fff; } .card_bg-yes .card__caption { color: #C5CAE9; margin-top: .3rem; } .card_bg-yes .card__content { text-align: center; } .card__header { position: relative; overflow: hidden; border-bottom: 0.5rem solid #303F9F; font-size: 0; } .card__hashtag { position: absolute; right: 0; top: 0; z-index: 2; font-size: 1.2rem; color: #fff; padding: .5rem 2.5rem; background-color: #303F9F; box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.298039); } .card__iconbox { padding: 2rem 0; text-align: center; position: relative; } .card__iconbox:after { content: ""; display: block; background-color: #fff; width: 4rem; height: .3rem; position: absolute; left: 50%; bottom: 0; -webkit-transform: translate3d(-50%, 0, 0); transform: translate3d(-50%, 0, 0); } .card__icon { border: 0.3rem solid #fff; border-radius: 50%; position: relative; box-sizing: border-box; width: 8rem; height: 8rem; } .card__icon:before { position: absolute; top: 50%; left: 50%; -webkit-transform: translate3d(-50%, -50%, 0); transform: translate3d(-50%, -50%, 0); color: #fff; } .card__avatar { border: 0.5rem solid #fff; border-radius: 50%; position: relative; width: 10rem; height: 10rem; } .card__caption { display: block; font-weight: 400; color: #3F51B5; } .card__content { box-sizing: border-box; padding: 2rem; } .card__description { margin-top: 1.5rem; } .card__blockquote { padding: 0 2rem; box-sizing: border-box; position: relative; } .card__quote { position: absolute; } .card__quote:before { color: #fff; } .card__quote-left { top: 0; left: 0; } .card__quote-right { bottom: 0; right: 0; } .card__footer { border-top: 0.1rem solid #C5CAE9; padding: 2rem; display: -webkit-flex; display: flex; -webkit-justify-content: space-between; justify-content: space-between; -webkit-align-items: center; align-items: center; } .tags { max-width: 60%; line-height: 2.5rem; } .tags__item { display: inline-block; vertical-align: middle; margin-right: .5rem; font-weight: 700; } .tags__item:last-child { margin-right: 0; } .tags__hashtag { color: #303F9F; } .clients { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-align-items: center; align-items: center; -webkit-justify-content: flex-start; justify-content: flex-start; } .client { width: 23.5%; margin-top: 1.9vw; } .client:nth-of-type(1), .client:nth-of-type(2), .client:nth-of-type(3), .client:nth-of-type(4) { margin-top: 0; } .client:nth-of-type(4n+2) { margin-left: 2%; margin-right: 1%; } .client:nth-of-type(4n+3) { margin-right: 2%; margin-left: 1%; } .client__logo { transition: -webkit-filter 0.3s ease-out; transition: filter 0.3s ease-out; transition: filter 0.3s ease-out, -webkit-filter 0.3s ease-out; -webkit-filter: grayscale(100%) opacity(20%); filter: grayscale(100%) opacity(20%); } .client__logo:hover { -webkit-filter: grayscale(0) opacity(100%); filter: grayscale(0) opacity(100%); } .price-table { width: 100%; box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.298039); border-spacing: 0; border-collapse: collapse; } .price-table__thead { background-color: #3F51B5; color: #fff; } .price-table__td, .price-table__th { padding: 1.5rem; text-align: center; } .price-table__td:first-child, .price-table__th:first-child { text-align: left; font-weight: 700; } .price-table__tr { border-bottom: 0.1rem solid #C5CAE9; transition: background-color 0.2s ease-in; } .price-table__tr:last-of-type { border-bottom: none; } .price-table__tr:hover { background-color: #eee; } .form__group { margin-bottom: 2rem; position: relative; overflow: hidden; font-size: 0; } .form__inner { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; } .form__column { width: 49%; } .form__column:nth-of-type(2n+2) { margin-left: 1%; } .form__column:nth-of-type(2n+1) { margin-right: 1%; } .form__button-box { text-align: center; padding-top: 2rem; } .form__icon { position: absolute; top: .8rem; left: .5rem; } .form__element { display: inline-block; box-sizing: border-box; padding: .8rem 3rem; width: 100%; border: none; border-bottom: 0.2rem solid #eee; font-family: Arial, Helvetica, sans-serif; font-size: 1.4rem; color: #000; } .form__element::-webkit-input-placeholder { color: #000; } .form__element::-moz-placeholder { color: #000; } .form__element:-ms-input-placeholder { color: #000; } .field:focus { outline: none; } .field:focus ~ .form__decor-line { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .field_valid::-webkit-input-placeholder { color: #66ad69; } .field_valid::-moz-placeholder { color: #66ad69; } .field_valid:-ms-input-placeholder { color: #66ad69; } .field_valid ~ .form__icon:before { color: #66ad69; } .field_valid ~ .form__decor-line { background-color: #66ad69; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .field_invalid::-webkit-input-placeholder { color: #dc3232; } .field_invalid::-moz-placeholder { color: #dc3232; } .field_invalid:-ms-input-placeholder { color: #dc3232; } .field_invalid ~ .form__icon:before { color: #dc3232; } .field_invalid ~ .form__decor-line { background-color: #dc3232; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .form__decor-line { width: 100%; height: 0.2rem; background-color: #3F51B5; position: absolute; bottom: 0; left: 0; -webkit-transform: translate3d(-150%, 0, 0); transform: translate3d(-150%, 0, 0); transition: -webkit-transform 0.5s ease-out; transition: transform 0.5s ease-out; transition: transform 0.5s ease-out, -webkit-transform 0.5s ease-out; } .select { -webkit-appearance: none; -moz-appearance: none; appearance: none; } .select::-ms-expand { display: none; } .select:focus { outline: none; } .textarea { min-width: 100%; max-width: 100%; min-height: 5rem; max-height: 15rem; } .button { font-family: Arial, Helvetica, sans-serif; font-weight: 700; font-size: 1.2rem; color: #fff; text-transform: uppercase; display: inline-block; padding: 1rem 4rem; text-align: center; min-width: 150px; background-color: #3F51B5; cursor: pointer; transition: background-color 0.4s ease-out; } .button:hover, .button:focus { background-color: #303F9F; } .button:focus { outline-color: #303F9F; } .popup { width: 100%; height: 100vh; opacity: 0; background-color: #fff; box-sizing: border-box; position: fixed; top: 0; left: 0; z-index: 9999; transition: -webkit-transform 0.3s ease-out; transition: transform 0.3s ease-out; transition: transform 0.3s ease-out, -webkit-transform 0.3s ease-out; -webkit-transform: translate3d(-110%, 0, 0); transform: translate3d(-110%, 0, 0); } .js-modal-open { overflow: hidden; } .js-modal-open .popup { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .js-popup_active { opacity: 1; } .popup__inner { overflow-y: scroll; height: 100%; box-sizing: border-box; padding: 1rem; } .popup__layout { min-height: 100%; box-sizing: border-box; border: 5px solid #3F51B5; padding: 4rem 5rem; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .popup__layout blockquote { margin-top: 2rem; margin-bottom: 2rem; } .popup__layout img { display: block; margin: 0 auto; } .js-modal-open .popup__layout { overflow-x: hidden; } @media screen and (max-width: 640px) { .popup__layout { padding-left: 2rem; } } @media screen and (min-width: 1440px) { .popup__container { max-width: 1500px; margin: 0 auto; } } .popup__close { height: 3.5rem; width: 3.5rem; cursor: pointer; position: fixed; top: 2rem; right: 4rem; z-index: 2; } .popup__close:before, .popup__close:after { content: ""; display: block; background-color: #3F51B5; height: .2rem; width: 3.5rem; position: fixed; top: 4rem; right: 4rem; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } .popup__close:after { -webkit-transform: rotate(45deg); transform: rotate(45deg); } @media screen and (max-width: 640px) { .popup__close { right: 2.5rem; } .popup__close:before, .popup__close:after { right: 2.5rem; } } .popup__title { margin-bottom: 3rem; } .js-yes .overlay { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 9999; width: 100%; height: 100%; background-color: #303F9F; } .js-yes .preloader { position: fixed; top: 50%; left: 50%; z-index: 999; -webkit-transform: translate3d(-50%, -50%, 0); transform: translate3d(-50%, -50%, 0); } .page-loaded .overlay { -webkit-animation: fade-overlay 0.3s ease-out backwards; animation: fade-overlay 0.3s ease-out backwards; } .page-loaded .preloader { display: none; } @-webkit-keyframes fade-overlay { 70% { opacitty: 1; } 100% { opacity: 0; } } @keyframes fade-overlay { 70% { opacitty: 1; } 100% { opacity: 0; } } .js-yes .preloader_type1 { width: 5em; height: 5em; } .js-yes .preloader__item { position: relative; width: 5em; height: 5em; border-radius: 50%; } .js-yes .preloader__item:after { content: ""; background-color: #303F9F; width: 4em; height: 4em; border-radius: 50%; position: absolute; top: .5em; left: .5em; } .js-yes .preloader__rotator { position: relative; width: 5em; border-radius: 5em; overflow: hidden; -webkit-animation: rotate 2s infinite linear; animation: rotate 2s infinite linear; } .js-yes .preloader__rotator:before { content: ""; background-color: #fff; border: 3px solid #303F9F; border-radius: 100%; position: absolute; top: 0; left: 0; right: 0; bottom: 0; } .js-yes .preloader__rotator-element { background-color: #303F9F; border-radius: 50% 0 0 50%; -webkit-transform-origin: 2.5em 2.5em; transform-origin: 2.5em 2.5em; height: 5em; width: 2.5em; -webkit-animation: rotate_left 2.5s infinite cubic-bezier(0.445, 0.05, 0.55, 0.95); animation: rotate_left 2.5s infinite cubic-bezier(0.445, 0.05, 0.55, 0.95); } .js-yes .preloader__rotator-element:last-child { margin-top: -5em; border-radius: 0 50% 50% 0; float: right; -webkit-transform-origin: 0 50%; transform-origin: 0 50%; -webkit-animation: rotate_right 2.5s infinite cubic-bezier(0.445, 0.05, 0.55, 0.95); animation: rotate_right 2.5s infinite cubic-bezier(0.445, 0.05, 0.55, 0.95); } @-webkit-keyframes rotate { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes rotate { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @-webkit-keyframes rotate_left { 60%, 75%, 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes rotate_left { 60%, 75%, 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @-webkit-keyframes rotate_right { 0%, 25%, 45% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes rotate_right { 0%, 25%, 45% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } .js-yes .preloader_type2:before, .js-yes .preloader_type2:after { content: ""; display: inline-block; width: 3rem; height: 3rem; border-radius: 50%; background-color: #fff; box-shadow: 1.7rem 1.7rem 5rem rgba(0, 0, 0, 0.298039); } .js-yes .preloader_type2:before { -webkit-animation: animation_left_round 0.9s ease-in-out infinite alternate; animation: animation_left_round 0.9s ease-in-out infinite alternate; } .js-yes .preloader_type2:after { -webkit-animation: animation_right_round 0.9s ease-in-out infinite alternate; animation: animation_right_round 0.9s ease-in-out infinite alternate; } @-webkit-keyframes animation_left_round { 0% { -webkit-transform: translate3d(0, 0, 0) scale(1); transform: translate3d(0, 0, 0) scale(1); } 100% { -webkit-transform: translate3d(0, 0, 0) scale(0.3); transform: translate3d(0, 0, 0) scale(0.3); } } @keyframes animation_left_round { 0% { -webkit-transform: translate3d(0, 0, 0) scale(1); transform: translate3d(0, 0, 0) scale(1); } 100% { -webkit-transform: translate3d(0, 0, 0) scale(0.3); transform: translate3d(0, 0, 0) scale(0.3); } } @-webkit-keyframes animation_right_round { 0% { -webkit-transform: translate3d(-1rem, 0, 0) scale(0.3); transform: translate3d(-1rem, 0, 0) scale(0.3); } 100% { -webkit-transform: translate3d(-1rem, 0, 0) scale(1); transform: translate3d(-1rem, 0, 0) scale(1); } } @keyframes animation_right_round { 0% { -webkit-transform: translate3d(-1rem, 0, 0) scale(0.3); transform: translate3d(-1rem, 0, 0) scale(0.3); } 100% { -webkit-transform: translate3d(-1rem, 0, 0) scale(1); transform: translate3d(-1rem, 0, 0) scale(1); } } .js-yes .preloader_type3:before, .js-yes .preloader_type3:after, .js-yes .preloader__round { position: absolute; background-color: #fff; opacity: 0; width: 5rem; height: 5rem; border-radius: 50%; -webkit-animation: preloader3 1.5s 0s linear infinite; animation: preloader3 1.5s 0s linear infinite; } .js-yes .preloader_type3:before, .js-yes .preloader_type3:after { content: ""; display: block; } .js-yes .preloader_type3:before { -webkit-animation-delay: .33333s; animation-delay: .33333s; } .js-yes .preloader_type3:after { -webkit-animation-delay: .66666s; animation-delay: .66666s; } @-webkit-keyframes preloader3 { 0% { -webkit-transform: translate3d(0, 0, 0) scale(0); transform: translate3d(0, 0, 0) scale(0); } 5% { opacity: 1; } 100% { -webkit-transform: translate3d(0, 0, 0) scale(1); transform: translate3d(0, 0, 0) scale(1); } } @keyframes preloader3 { 0% { -webkit-transform: translate3d(0, 0, 0) scale(0); transform: translate3d(0, 0, 0) scale(0); } 5% { opacity: 1; } 100% { -webkit-transform: translate3d(0, 0, 0) scale(1); transform: translate3d(0, 0, 0) scale(1); } } .external-link:link, .external-link:visited, .external-link:hover, .external-link:active { text-decoration: none; font-weight: 400; font-size: 1.2rem; color: #C5CAE9; margin-top: .5rem; }