blob: a32b515fdff7106ddd74f2e4d4f196dac836ba80 [file] [log] [blame]
.innerhero--tooling{
padding-bottom: 22rem;
padding-top: 13rem;
}
.innerhero--tooling .innerhero__main{
max-width: none;
width: auto;
}
.innerhero__pic--tooling{
right: -295px;
bottom: -400px;
}
.tooling-leading {
text-align: center;
padding-top: 11rem;
padding-bottom: 19rem;
}
.toolingbox {
padding-bottom: 13rem;
}
.toolingbox__title {
justify-content: center;
display: flex;
align-items: center;
flex-flow: row nowrap;
justify-content: center;
position: relative;
}
.toolingbox__title img{
display: block;
width: 4.8rem;
height: 4.8rem;
flex-shrink: 0;
margin-right: 2rem;
}
.toolingbox__picwrap {
padding-top: 4rem;
display: block;
position: relative;
z-index: 10;
}
.toolingbox__picwrap img{
display: block;
margin: 0 auto;
width: 100%;
object-fit: contain;
max-width: 837px;
}
.toolingbox__bg {
padding-top: 160px;
border-radius: 1rem;
background: var(--grey);
margin-top: -11rem;
position: relative;
z-index: 1;
padding: 16rem 8rem 8rem;
}
.toolingbox__picdescr {
text-align: center;
}
.toolvarlist1 {
text-align: left;
padding: 8rem 0 0;
display: flex;
flex-flow: row nowrap;
align-items: flex-start;
justify-content: space-between;
}
.toolvarlist1__left {
max-width: 350px;
position: relative;
padding-bottom: 100px;
}
.toolvarlist1__title {
font-size: 2.4rem;
line-height: 1.5;
}
.toolvarlist1__list {
padding-top: 2rem;
}
.toolvarlist1__dl {
position: relative;
padding-left: 44px;
background: url(../img/features/icon-check-ok.svg) left top no-repeat;
background-size: 24px;
padding-bottom: 2rem;
}
.toolvarlist1__dl:last-child{
padding-bottom: 0;
}
.toolvarlist1__dl dt:not(:last-child){
padding-bottom: 1rem;
}
.toolvarlist1__dl dd p:not(:last-child){
padding-bottom: 1rem;
}
.toolvarlist1__more {
position: absolute;
bottom: 0;
left: 0;
}
.toolvarlist1__more .button{
padding-left: 6rem;
padding-right: 6rem;
}
.toolvarlist1__right {
position: relative;
padding-bottom: 100px;
}
.toolvarlist1__descr {
padding-top: 2rem;
}
.toolvarlist1--simple .toolvarlist1__dl{
padding-bottom: 3rem;
}
.toolvarlist1--simple .toolvarlist1__left,
.toolvarlist1--simple .toolvarlist1__right{
padding-bottom: 3rem;
}
.toolvarlist1-bottom .button{
width: 200px;
margin-left: auto;
margin-right: auto;
}
.toolvarlist2 {
display: grid;
padding: 5rem 0;
grid-template-columns: repeat(3, 1fr);
grid-gap: 8rem;
grid-auto-rows: auto;
}
.toolvarlist2__item {
text-align: left;
position: relative;
padding-top: 44px;
background: url(../img/features/icon-check-ok.svg) left top no-repeat;
background-size: 24px;
max-width: 300px;
}
.toolingbox4__wrap {
display: grid;
grid-template-columns: 60% 40%;
grid-auto-rows: auto;
grid-gap: 3rem;
justify-content: space-between;
padding-top: 5rem;
}
.toolingbox4__title {
font-size: 2.4rem;
line-height: 1.5;
padding-bottom: 3rem;
}
.toolingbox4__numblock {
padding-top: 6rem;
}
.toolingbox4__numtitle {
font-size: 2.4rem;
line-height: 1.5;
font-weight: 700;
}
.toolingbox4__numwrap {
display: flex;
flex-flow: row nowrap;
align-items: flex-start;
justify-content: space-between;
padding-bottom: 4rem;
}
.toolingbox4__numitem {
max-width: 300px;
}
.toolingbox4__numitem i{
font-style: normal;
font-weight: 700;
color:var(--blue);
font-weight: 700;
font-size: 20px;
line-height: 1;
padding-bottom: 1.5rem;
display: block;
}
.toolingbox4__numitem p{
padding-bottom: 1rem;
}
.toolingbox4__small {
color:var(--grey4);
}
.toolingend{
padding-bottom: 9rem;
}
.toolingend .container{
background: url(../img/features/more-learn-planet.png) var(--blue) right -10px no-repeat;
background-size: 370px;
align-items: center;
justify-content: space-between;
border-radius: 1rem;
}
.toolingend__main {
padding-left: 8rem;
flex-basis: 50%;
flex-grow: 1;
min-height: 263px;
display: flex;
flex-flow: column nowrap;
align-items: flex-start;
justify-content: center;
color:#fff;
}
.toolingend__title {
position: relative;
font-weight: 700;
}
.toolingend__action {
margin-right: 10rem;
width: auto;
flex-shrink: 0;
}
.toolingend__action .button{
color:var(--blue);
background: #fff;
padding-left: 20px;
padding-right: 20px;
height: 50px;
}
.toolingend__action .button:hover{
background: var(--grey);
}
@media (max-width:1199px){
.innerhero--tooling{
padding-top: 8rem;
padding-bottom: 8rem;
height: calc(100vh - 80px);
min-height: 450px;
}
.innerhero__h1{
font-size: 6rem;
line-height: 1.2;
}
.innerhero__pic--tooling{
width: 500px;
bottom: -230px;
right: -200px;
}
.toolvarlist1--simple .toolvarlist1__left, .toolvarlist1--simple .toolvarlist1__right{
max-width: calc(50% - 30px);
}
.toolingbox4__numitem{
max-width: calc(100% / 3 - 30px);
}
.toolingend__main{
padding-left: 30px;
}
.toolingend__title{
padding-left: 0;
}
.toolingend br{
display: none;
}
.toolingend__action{
margin-left: 40px;
margin-right: 30px;
}
.toolingend__title::after{
top: 2px;
left: -45px;
}
} /* END MEDIA 1199px */
@media (max-width:992px){
.innerhero__pic--tooling{
display: none;
}
.innerhero--tooling{
min-height: auto;
height: auto;
}
.innerhero__h1 br{
display: none;
}
.toolvarlist1{
flex-flow: column nowrap;
align-items: stretch;
}
.toolvarlist1__more{
position: relative;
bottom: auto;
width: 200px;
margin-top: 30px;
}
.toolvarlist1__right{
padding-bottom: 0;
}
.toolvarlist1__dl{
background-size: 20px;
background-position-y: 0;
padding-top: 2px;
padding-left: 30px;
min-height: 20px;
}
.toolvarlist2{
grid-gap: 3rem;
}
.toolingbox4__numitem{
max-width: calc(100% / 3 - 15px);
}
.toolingend{
background-size: 200px;
padding-bottom: 0;
}
.toolingend .container{
border-radius: 0;
flex-flow: column nowrap;
align-items: stretch;
padding-top: 100px;
padding-bottom: 70px;
}
.toolingend__title::after{
position: relative;
left: 0;
top: -40px;
position: absolute;
}
.toolingend__main{
flex-basis: auto;
flex-grow: 0;
justify-content: flex-start;
min-height: auto;
}
.toolingend__action{
width: auto;
margin-left: 0;
padding-top: 30px;
}
.toolingend__action .button{
width: 340px;
}
} /* END MEDIA 992px */
@media (max-width:767px){
.innerhero__descr{
font-size: 2rem;
line-height: 1.6;
}
.tooling-leading{
padding-top: 7rem;
padding-bottom: 10rem;
}
.toolingbox{
padding-bottom: 8rem;
}
.toolingbox__title{
font-size: 2.2rem;
line-height: 1.3;
}
.toolingbox__title img{
margin-right: 10px;
}
.toolingbox__picwrap{
padding-top: 3rem;
}
.toolingbox__bg{
margin-top: 0;
padding: 3rem 2rem 4rem;
border-radius: 0 0 1rem 1rem;
}
.toolingbox__bg br{
display: none;
}
.toolingbox__picdescr{
text-align: left;
}
.toolvarlist1{
padding-top: 3rem;
}
.toolvarlist1__left{
padding-bottom: 8rem;
}
.toolvarlist1--simple .toolvarlist1__left, .toolvarlist1--simple .toolvarlist1__right{
max-width: none;
padding-bottom: 0;
padding-top: 0;
}
.toolvarlist1--simple .toolvarlist1__dl:last-child{
padding-bottom: 1rem;
}
.toolvarlist1-bottom{
padding-top: 3rem;
}
.toolvarlist1-bottom .button{
margin: 0;
}
.toolvarlist2{
grid-template-columns: 1fr;
grid-gap: 4rem;
padding-bottom: 0;
}
.toolvarlist2__item{
padding-top: 35px;
}
.toolingbox4__wrap{
grid-template-columns: 1fr;
padding-top: 0;
}
.toolingbox4__numwrap{
flex-flow: column nowrap;
align-items: stretch;
padding-bottom: 0;
}
.toolingbox4__numitem{
max-width: none;
padding-bottom: 3rem;
}
.toolingbox4__numitem:last-child{
padding-bottom: 0;
}
.toolingend .container{
padding: 7rem 15px 7rem;
background-size: 50%;
background-position: right bottom;
}
.toolingend__main{
max-width: 340px;
padding-left: 0;
}
.toolingend__action .button{
width: auto;
display: inline-flex;
padding:0 20px;
height: 45px;
font-size: 1.8rem;
}
.toolingend__title::after{
top: -35px;
}
.toolingend__action{
padding-top: 20px;
}
} /* END MEDIA 992px */