| .innerhero__pic--native{ |
| width: 49rem; |
| height: auto; |
| top: auto; |
| bottom: -13rem; |
| transform: none; |
| left: 75%; |
| } |
| .native1 { |
| padding-top: 12rem; |
| justify-content: space-between; |
| align-items: stretch; |
| } |
| .native1__block { |
| width: calc(50% - 17px); |
| background: var(--blue4); |
| border-radius: 10px; |
| padding: 4rem; |
| } |
| .native1__icon { |
| width: 32px; |
| height: 32px; |
| display: block; |
| } |
| .native1__block--bad { |
| background: var(--red5); |
| } |
| .native1__title{ |
| max-width: 500px; |
| } |
| |
| |
| .native2 { |
| padding-top: 7rem; |
| } |
| .native2__grid { |
| display: grid; |
| grid-template-columns: repeat(3, 1fr); |
| grid-gap: 3rem; |
| grid-auto-rows: auto; |
| } |
| .native2item { |
| position: relative; |
| max-width: 300px; |
| padding-top: 1.5rem; |
| } |
| .native2item::before{ |
| content:""; |
| display: block; |
| position: absolute; |
| top: 0; |
| left: 0; |
| border-radius: 6px; |
| width: 4rem; |
| height: 3px; |
| background: var(--blue); |
| } |
| |
| |
| .native-howwork { |
| padding-top: 10rem; |
| padding-bottom: 7rem; |
| } |
| .native-howwork__wrap { |
| position: relative; |
| } |
| .native-howwork__left { |
| max-width: 540px; |
| flex-basis: 50%; |
| flex-shrink: 0; |
| } |
| .native-howwork__left .h5 { |
| font-weight: 700; |
| } |
| .native-howwork__right { |
| padding-left: 11rem; |
| max-width: 54rem; |
| font-style: italic; |
| color:var(--grey5); |
| } |
| .native-howwork__right p{ |
| font-style: italic; |
| } |
| |
| |
| .native-points { |
| padding-top: 6rem |
| } |
| .native-points__grid { |
| display: grid; |
| grid-template-columns: 1fr 1fr; |
| grid-gap: 40px; |
| grid-auto-rows: auto; |
| } |
| .native-points__item { |
| position: relative; |
| min-height: 12rem; |
| background: #FFFFFF; |
| border: 1px solid var(--grey2); |
| box-sizing: border-box; |
| border-radius: 10px; |
| padding: 3.5rem 5rem 3rem 7.7rem; |
| } |
| .native-points__item::before{ |
| content: ""; |
| position: absolute; |
| display: block; |
| width: 24px; |
| height: 24px; |
| left: 3rem; |
| top: 3.5rem; |
| background: url(../img/features/icon-check-ok.svg) no-repeat; |
| background-size: contain; |
| } |
| |
| |
| .native-steps { |
| padding-top: 12rem; |
| } |
| .native-steps__pic { |
| margin-top: 5rem; |
| width: 100%; |
| height: auto; |
| display: block; |
| } |
| .native-steps__grid { |
| padding-top: 5.5rem; |
| display: grid; |
| grid-template-columns: repeat(3, 1fr); |
| grid-gap: 3rem; |
| grid-auto-rows: auto; |
| } |
| .nativestepitem { |
| max-width: 340px; |
| } |
| .nativestepitem i{ |
| font-style: normal; |
| font-weight: 700; |
| color:var(--blue); |
| display: block; |
| } |
| .nativestepitem__title { |
| font-weight: 700; |
| } |
| .nativestepitem__text { |
| } |
| .nativestepitem__text p:not(:last-child){ |
| padding-bottom: 1rem; |
| } |
| .nativestepitem__small { |
| font-size: 1.3rem; |
| line-height: 1.6; |
| color: var(--grey5); |
| } |
| |
| |
| .nativecode { |
| padding-top: 12rem; |
| } |
| .nativecode__tabctrls { |
| padding-top: 5rem; |
| } |
| .nativecode__link { |
| display: block; |
| background: #fff; |
| color:#000; |
| border-radius: 20px; |
| line-height: 4rem; |
| text-decoration: none; |
| padding: 0 4rem; |
| margin-right: 1rem; |
| } |
| .nativecode__link:hover{ |
| color:#000; |
| background: var(--grey); |
| text-decoration: none; |
| } |
| .nativecode__link.active{ |
| background: #2D2D2D; |
| color:#fff; |
| } |
| .nativecode__tabs { |
| padding-top: 1rem; |
| max-width: 900px; |
| } |
| .nativecode__tab{ |
| display: none; |
| } |
| .nativecode__tab.active{ |
| display: block; |
| } |
| .nativecode__codebox{ |
| display: block; |
| margin-top: -24px; |
| } |
| .nativecode__codebox code { |
| display: block; |
| overflow: hidden; |
| border-radius: 1rem; |
| } |
| |
| |
| |
| .native-bottom { |
| padding-top: 12rem; |
| padding-bottom: 10rem; |
| } |
| .native-bottom__grid { |
| display: grid; |
| grid-template-columns: repeat(2, 1fr); |
| grid-gap: 3rem; |
| grid-auto-rows: auto; |
| } |
| .nativebotblock { |
| min-height: 390px; |
| background: url(../img/features/more-learn-planet.png) var(--blue) right bottom no-repeat; |
| background-size: 50%; |
| border-radius: 10px; |
| padding: 7rem 6rem 5rem; |
| color:#fff; |
| position: relative; |
| transition: box-shadow 0.2s ease, background 0.2s ease; |
| } |
| .nativebotblock--learn{ |
| background: url(../img/features/more-learn-book.png) #CE2034 right bottom no-repeat; |
| background-size: 45%; |
| } |
| .nativebotblock__title { |
| font-weight: 700; |
| position: relative; |
| padding-left: 4rem; |
| } |
| .nativebotblock__icon { |
| position: absolute; |
| display: block; |
| width: 26px; |
| height: 26px; |
| object-fit: contain; |
| object-position: left center; |
| height: auto; |
| left: -1px; |
| top: 5px; |
| } |
| .nativebotblock__text { |
| padding-top: 2rem; |
| color:var(--grey5); |
| max-width: 440px; |
| color:#fff; |
| } |
| .nativebotblock__text a{ |
| color:#fff; |
| } |
| .nativebotblock__text a:hover{ |
| color:#f0f0f0; |
| } |
| .nativebotblock__link { |
| margin-top: 2rem; |
| position: absolute; |
| bottom: 8rem; |
| left: 6rem; |
| display: inline-block; |
| color:#fff; |
| } |
| .nativebotblock__link:hover{ |
| color:#fff; |
| } |
| .nativebotblock__link::after{ |
| background-image: url(../img/icon-arrow-white.svg); |
| } |
| .nativebotblock:hover{ |
| box-shadow: 2px 2px 10px 4px rgba(0, 112, 204, 0.3); |
| background-position-x: 101%; |
| } |
| .nativebotblock--learn:hover{ |
| box-shadow: 2px 2px 10px 4px rgba(207, 127, 136, 0.3); |
| } |
| |
| |
| @media (max-width:1199px){ |
| .native-bottom{ |
| padding-top: 8rem; |
| padding-bottom: 8rem; |
| } |
| .nativebotblock__icon{ |
| top: 5px; |
| transform: none; |
| } |
| .nativebotblock{ |
| min-height: 35rem; |
| padding: 5rem; |
| } |
| .nativebotblock__link{ |
| left: 5rem; |
| } |
| } |
| |
| @media (max-width:992px){ |
| .native-bottom{ |
| padding-bottom: 8rem; |
| padding-top: 8rem; |
| } |
| .nativebotblock{ |
| padding-left: 3rem; |
| padding-right: 3rem; |
| min-height: auto; |
| } |
| .nativebotblock__link{ |
| position: relative; |
| bottom: auto; |
| left: auto; |
| } |
| .nativebotblock__icon{ |
| width: 22px; |
| height: 22px; |
| object-fit: contain; |
| top: 0; |
| } |
| .nativebotblock__title{ |
| padding-left: 4rem; |
| font-size: 2.3rem; |
| line-height: 1.2; |
| } |
| } |
| |
| @media (max-width:767px){ |
| .native1{ |
| padding-top: 4rem; |
| flex-flow: column nowrap; |
| align-items: stretch; |
| } |
| .native1__block{ |
| width: 100%; |
| margin-bottom: 2rem; |
| padding: 3rem 2rem; |
| } |
| .native1__block br{ |
| display: none; |
| } |
| .native1__icon{ |
| width: 24px; |
| height: 24px; |
| } |
| .native2{ |
| padding-top: 5rem; |
| } |
| .native2__grid{ |
| grid-template-columns: 1fr; |
| } |
| .native-howwork{ |
| padding-top: 8rem; |
| } |
| .native-howwork__wrap{ |
| flex-flow: column nowrap; |
| align-items: stretch; |
| } |
| .native-howwork__right{ |
| padding-left: 0; |
| padding-top: 4rem; |
| } |
| .native-points{ |
| padding-top: 2rem; |
| } |
| .native-points br, |
| .native-steps br{ |
| display: none; |
| } |
| .native-points__grid{ |
| grid-template-columns: 1fr; |
| grid-gap: 2rem; |
| padding-top: 2rem; |
| } |
| .native-steps{ |
| padding-top: 8rem; |
| } |
| .native-steps__pic{ |
| margin-top: 3rem; |
| margin-left: -15px; |
| margin-right: -15px; |
| width: calc(100% + 30px); |
| } |
| .native-steps__grid{ |
| grid-template-columns: 1fr; |
| grid-gap: 4rem; |
| padding-top: 4rem; |
| } |
| .nativestepitem i{ |
| font-size: 2rem; |
| line-height: 1; |
| } |
| .nativestepitem__title{ |
| font-size: 2rem; |
| } |
| .nativecode{ |
| padding-top: 8rem; |
| } |
| .nativecode__tabs{ |
| padding-top: 2rem; |
| } |
| .nativecode__tabctrls{ |
| padding-top: 3rem; |
| } |
| .nativecode__link{ |
| margin-right: 0; |
| width: calc(100% / 3); |
| text-align: center; |
| } |
| .native-bottom{ |
| padding-top: 5rem; |
| padding-bottom: 6rem; |
| } |
| .native-bottom__grid{ |
| grid-template-columns: 1fr; |
| grid-gap: 2rem; |
| padding-top: 0; |
| } |
| .nativebotblock{ |
| padding: 4rem 2rem; |
| min-height: auto; |
| } |
| .nativebotblock__link{ |
| margin-top: 3rem; |
| } |
| .nativebotblock__title{ |
| padding-left: 3.6rem; |
| } |
| .nativebotblock__icon{ |
| width: 20px; |
| height: 20px; |
| } |
| .nativebotblock__text{ |
| padding-top: 2rem; |
| max-width: 75%; |
| } |
| .nativebotblock__text br{ |
| display: none; |
| } |
| }/* END MEDIA 767px */ |
