| .fronttop{ |
| overflow: hidden; |
| background: url(../img/frontpage/hero.svg) var(--dark) calc(50% + 405px) top no-repeat; |
| } |
| @media (min-width:1600px){ |
| .fronttop{ |
| background-position: right top; |
| } |
| } |
| .fronttop .hdr{ |
| background: none; |
| } |
| .fronthero { |
| background: none; |
| padding-bottom: 19rem; |
| padding-top: 9rem; |
| } |
| .fronthero__button{ |
| width: 190px; |
| height: 50px; |
| font-size: 1.8rem; |
| } |
| |
| |
| .frontblue { |
| position: relative; |
| background: var(--blue4); |
| } |
| .fronttopcards { |
| align-items: stretch; |
| justify-content: space-between; |
| transform: translateY(-60px); |
| } |
| .frontcard { |
| width: calc(50% - 15px); |
| background: #FFFFFF; |
| border-radius: 1rem; |
| padding: 40px; |
| } |
| .frontcard__prises { |
| align-items: center; |
| } |
| .frontcard__price { |
| width: calc(100% / 3); |
| overflow: hidden; |
| align-items: center; |
| } |
| .frontcard__iconwrap { |
| flex-shrink: 0; |
| width: 7rem; |
| height: 7rem; |
| display: flex; |
| flex-flow: row nowrap; |
| align-items: center; |
| justify-content: center; |
| border-radius: 10rem; |
| background: #FAE1E2; |
| margin-right: 10px; |
| } |
| .frontcard__iconwrap--blue { |
| background: var(--blue4); |
| } |
| .frontcard__iconwrap--grey { |
| background: var(--grey3); |
| } |
| .frontcard__iconwrap img{ |
| display: block; |
| margin: auto; |
| width: 43px; |
| height: 43px; |
| transform: translateY(2px); |
| } |
| .frontcard__network img{ |
| display: block; |
| width: 65px; |
| height: 65px; |
| } |
| |
| |
| .forntcodes { |
| padding-top: calc(15rem - 65px); |
| padding-bottom: 10rem; |
| } |
| .forntcodes__menu { |
| padding-top: 3.2rem; |
| width: 30rem; |
| flex-shrink: 0; |
| } |
| .forntcodes__menu li:not(:last-child){ |
| margin-bottom: 4.3rem; |
| } |
| .forntcodes__menu ul a{ |
| display: block; |
| color:#000; |
| position: relative; |
| } |
| .forntcodes__menu ul a:hover{ |
| text-decoration: none; |
| color:var(--blue); |
| } |
| .forntcodes__menu ul a.actie:hover{ |
| color:#000; |
| } |
| .forntcodes__menu ul a.active{ |
| padding-left: 23px; |
| font-weight: 700; |
| } |
| .forntcodes__menu a.active::before{ |
| content:""; |
| display: block; |
| position: absolute; |
| top: 50%; |
| left: 0; |
| width: 6px; |
| height: 34px; |
| background: #000; |
| transform: translateY(-50%); |
| } |
| .forntcodes__menumore { |
| margin-top: 5.5rem; |
| display: inline-block; |
| color:#000; |
| text-decoration: underline; |
| } |
| .forntcodes__menumore:hover{ |
| text-decoration: underline; |
| } |
| |
| |
| |
| .forntcodes__tabwraps { |
| position: relative; |
| min-width: 0; |
| flex-grow: 1; |
| max-width: 866px; |
| } |
| .forntcodes__tab { |
| display: none; |
| } |
| .forntcodes__tab>p{ |
| max-width: 750px; |
| } |
| .forntcodes__tab.active{ |
| display: block; |
| } |
| .forntcodes__tabtitle { |
| font-weight: 700; |
| } |
| .forntcodes__tab .nativecode__link:not(.active){ |
| background: transparent; |
| } |
| .forntcodes__tab .nativecode__link:not(.active):hover{ |
| background: #fff; |
| } |
| .forntcodes__bottom { |
| padding-top: 5rem; |
| text-align: center; |
| } |
| .forntcodes__bottom .button{ |
| padding-left: 45px; |
| padding-right: 45px; |
| font-size: 20px; |
| height: 53px; |
| display: inline-flex; |
| } |
| .forntcodes__innertabs .nativecode__tabctrls{ |
| padding-top: 4rem; |
| } |
| |
| |
| |
| |
| .frontnewcards { |
| padding-top: 13rem; |
| padding-bottom: 6rem; |
| } |
| .frontnewcards__wrap { |
| display: grid; |
| grid-template-columns: repeat(3, 1fr); |
| grid-auto-rows: auto; |
| grid-gap: 3rem; |
| } |
| .frontsimplecard{ |
| padding: 4rem 3.5rem 13rem; |
| } |
| .frontsimplecard .cardsimple__title{ |
| padding-bottom: 2rem; |
| } |
| .frontsimplecard .cardsimple__bottom{ |
| left: 3.5rem; |
| bottom: 3.5rem; |
| } |
| |
| |
| |
| .frontstories { |
| padding-top: 7rem; |
| padding-bottom: 6rem; |
| } |
| .frontstories__checkers { |
| display: grid; |
| grid-template-columns: 3fr 2fr 2fr 2fr; |
| grid-gap: 40px 0; |
| max-width: 920px; |
| } |
| .frontstories__checkers li{ |
| position: relative; |
| padding-left: 35px; |
| line-height: 24px; |
| background: url(../img/frontpage/icon-done.svg) left top no-repeat; |
| background-size: 24px; |
| } |
| .frontstories__checkers li:nth-child(3){ |
| grid-column: span 2; |
| } |
| .frontstories__sliderwrap { |
| margin-top: 6rem; |
| position: relative; |
| margin-bottom: 33px; |
| } |
| .ctrl { |
| width: 3.6rem; |
| height: 3.6rem; |
| border-radius: 60px; |
| border:none; |
| background: none; |
| cursor: pointer; |
| position: absolute; |
| top: 50%; |
| margin-top: -2rem; |
| z-index: 10; |
| } |
| .ctrl img{ |
| display: block; |
| width: 100%; |
| height: 100%; |
| } |
| .ctrl:hover img{ |
| filter: brightness(1.02); |
| } |
| .ctrl--prev{ |
| left: -70px; |
| } |
| .ctrl--next { |
| right: -70px; |
| } |
| .ctrl--next img{ |
| transform: rotate(180deg); |
| } |
| |
| @media (max-width:1439px){ |
| .jsFrontVideosSwiper { |
| margin-left: 20px; |
| margin-right: 20px; |
| } |
| .ctrl--prev{ |
| left: -30px; |
| } |
| .ctrl--next{ |
| right: -30px; |
| } |
| } |
| |
| .frontstories__pag{ |
| position: absolute; |
| width: 100%; |
| bottom: -30px !important; |
| height: 3px; |
| left: 0; |
| display: flex; |
| flex-flow: row nowrap; |
| align-items: stretch; |
| justify-content: center; |
| } |
| .frontstories .comvideo .comvideo__descr{ |
| display: none; |
| } |
| .swiper-pagination-bullet{ |
| width: 20px; |
| border-radius: 0; |
| opacity: 1; |
| background: var(--grey2); |
| height: auto; |
| } |
| .swiper-pagination-bullet:hover{ |
| background: var(--grey4); |
| } |
| .swiper-pagination-bullet-active{ |
| background: var(--blue); |
| } |
| .frontstories__bottom{ |
| text-align: center; |
| } |
| .frontstories__bottom .button{ |
| display: inline-flex; |
| width: 195px; |
| } |
| |
| |
| |
| .frontconfs { |
| padding-top: 7rem; |
| } |
| .frontconfs__wrap { |
| padding-top: 6rem; |
| display: grid; |
| grid-template-columns: repeat(3, 1fr); |
| grid-auto-rows: auto; |
| grid-gap: 3rem; |
| } |
| .frontconfcard { |
| display: block; |
| color:#000; |
| background: var(--grey3); |
| border-radius: 10px; |
| padding: 35px 35px 135px; |
| transition: box-shadow 0.25s ease; |
| position: relative; |
| } |
| .frontconfcard:hover{ |
| color:#000; |
| text-decoration: none; |
| box-shadow: 8px 8px 10px rgba(0, 0, 0, 0.1); |
| } |
| .frontconfcard--red { |
| background: #FEEFF0; |
| } |
| .frontconfcard--blue{ |
| background: var(--blue4); |
| } |
| .frontconfs__iconwrap { |
| height: 7rem; |
| display: flex; |
| flex-flow: row nowrap; |
| align-items: center; |
| justify-content: flex-start; |
| box-sizing: content-box; |
| } |
| .frontconfs__iconwrap img{ |
| display: block; |
| max-height: 100%; |
| } |
| .frontconfcard__title { |
| font-weight: 700; |
| } |
| .frontconfcard__bottom { |
| position: absolute; |
| bottom: 0; |
| left: 0; |
| padding: 35px; |
| right: 0; |
| display: block; |
| } |
| .frontconfcard__bottom .capstext small{ |
| text-transform: none; |
| letter-spacing: normal; |
| font-size: 100%; |
| } |
| .frontconfcard__cal { |
| margin-top: 1rem; |
| padding-left: 26px; |
| line-height: 20px; |
| background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15.188 1.594h-3.282V.344a.157.157 0 0 0-.156-.156h-1.094a.157.157 0 0 0-.156.156v1.25h-5V.344a.157.157 0 0 0-.156-.156H4.25a.157.157 0 0 0-.156.156v1.25H.812a.624.624 0 0 0-.625.625v12.969c0 .345.28.624.625.624h14.376c.345 0 .624-.279.624-.624V2.217a.624.624 0 0 0-.624-.624Zm-.782 12.812H1.594V6.984h12.812v7.422ZM1.594 5.656V3h2.5v.938c0 .085.07.156.156.156h1.094c.086 0 .156-.07.156-.157V3h5v.938c0 .085.07.156.156.156h1.094c.086 0 .156-.07.156-.157V3h2.5v2.656H1.594Z' fill='%232d2d2d'/%3E%3C/svg%3E"); |
| background-repeat: no-repeat; |
| background-position: 0 center; |
| background-size: 16px; |
| } |
| .frontconfcard--red .frontconfcard__cal { |
| background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15.188 1.594h-3.282V.344a.157.157 0 0 0-.156-.156h-1.094a.157.157 0 0 0-.156.156v1.25h-5V.344a.157.157 0 0 0-.156-.156H4.25a.157.157 0 0 0-.156.156v1.25H.812a.624.624 0 0 0-.625.625v12.969c0 .345.28.624.625.624h14.376c.345 0 .624-.279.624-.624V2.217a.624.624 0 0 0-.624-.624Zm-.782 12.812H1.594V6.984h12.812v7.422ZM1.594 5.656V3h2.5v.938c0 .085.07.156.156.156h1.094c.086 0 .156-.07.156-.157V3h5v.938c0 .085.07.156.156.156h1.094c.086 0 .156-.07.156-.157V3h2.5v2.656H1.594Z' fill='%23CE2034'/%3E%3C/svg%3E"); |
| } |
| .frontconfcard--blue .frontconfcard__cal { |
| background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15.188 1.594h-3.282V.344a.157.157 0 0 0-.156-.156h-1.094a.157.157 0 0 0-.156.156v1.25h-5V.344a.157.157 0 0 0-.156-.156H4.25a.157.157 0 0 0-.156.156v1.25H.812a.624.624 0 0 0-.625.625v12.969c0 .345.28.624.625.624h14.376c.345 0 .624-.279.624-.624V2.217a.624.624 0 0 0-.624-.624Zm-.782 12.812H1.594V6.984h12.812v7.422ZM1.594 5.656V3h2.5v.938c0 .085.07.156.156.156h1.094c.086 0 .156-.07.156-.157V3h5v.938c0 .085.07.156.156.156h1.094c.086 0 .156-.07.156-.157V3h2.5v2.656H1.594Z' fill='%230070cc'/%3E%3C/svg%3E"); |
| } |
| .frontconfs__bottom { |
| text-align: center; |
| } |
| .frontconfs__bottom .button{ |
| display: inline-flex; |
| width: 195px; |
| } |
| |
| |
| |
| |
| .fronteventsbanner { |
| padding-top: 6rem; |
| padding-bottom: 6rem; |
| } |
| |
| |
| |
| .frontresourse { |
| padding-top: 7rem; |
| padding-bottom: 6rem; |
| } |
| .frontresourse__subtitle { |
| font-size: 3.2rem; |
| line-height: 1.3; |
| } |
| .frontresourse__wrap { |
| padding-top: 10rem; |
| justify-content: space-between; |
| } |
| .frontresourse__col { |
| width: calc(50% - 15px); |
| } |
| .frontresitem { |
| height: 120px; |
| border-radius: 1rem; |
| margin-bottom: 1rem; |
| display: flex; |
| flex-flow: column nowrap; |
| align-items: flex-start; |
| justify-content: center; |
| position: relative; |
| background: var(--grey); |
| padding-left: 10rem; |
| padding-right: 6rem; |
| } |
| .frontresitem__icon { |
| position: absolute; |
| left: 28px; |
| top: 50%; |
| width: 48px; |
| height: 48px; |
| margin-top: -24px; |
| } |
| .frontresitem__icon img{ |
| display: block; |
| width: 100%; |
| height: 100%; |
| object-fit: contain; |
| } |
| .frontresitem--black { |
| background: var(--dark); |
| color:#fff; |
| } |
| .frontresitem--red { |
| background: var(--red2); |
| color:#fff; |
| } |
| .frontresitem--rose { |
| background: var(--red5); |
| } |
| |
| |
| |
| .toolingend--front{ |
| margin-top: 6rem; |
| } |
| .toolingend--front .toolingend__main{ |
| min-height: auto; |
| padding: 6rem 0 6rem 8rem; |
| } |
| .toolingend--front .button{ |
| padding-left: 4rem; |
| padding-right: 4rem; |
| } |
| .toolingend--front .toolingend__action{ |
| margin-left: auto; |
| font-size: 20px; |
| padding-right: 8rem; |
| margin-right: 0; |
| } |
| .toolingend--front .button{ |
| font-size: 20px; |
| height: 60px; |
| } |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| @media (max-width:1199px){ |
| .fronttop{ |
| background-position-x: calc(50% + 260px); |
| } |
| .frontcard__prises{ |
| align-items: flex-start; |
| margin-bottom: -2rem; |
| } |
| .frontcard__price{ |
| flex-flow: column nowrap; |
| align-items: flex-start; |
| justify-content: flex-start; |
| } |
| .frontcard__iconwrap{ |
| width: 6rem; |
| height: 6rem; |
| margin-bottom: 1rem; |
| } |
| .frontcard__iconwrap img{ |
| width: 60%; |
| height: 60%; |
| } |
| .frontconfs__wrap{ |
| grid-gap: 15px; |
| } |
| .frontconfcard{ |
| padding-left: 15px; |
| padding-right: 15px; |
| } |
| .frontresitem__icon{ |
| left: 2rem; |
| } |
| .frontresitem__text{ |
| font-size: 15px; |
| } |
| .toolingend--front .toolingend__main{ |
| padding-left: 3rem; |
| } |
| .toolingend--front .toolingend__action{ |
| padding-right: 3rem; |
| } |
| } /* END MEDIA 1199px */ |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| @media (max-width:992px){ |
| .forntcodes__menu{ |
| width: 25rem; |
| } |
| .frontconfs__wrap{ |
| grid-gap: 3rem; |
| grid-template-columns: 1fr; |
| } |
| .frontnewcards__wrap{ |
| grid-gap: 3rem; |
| grid-template-columns: 1fr; |
| } |
| .frontresourse{ |
| padding-bottom: 0; |
| } |
| .frontresourse__wrap{ |
| flex-flow: column nowrap; |
| } |
| .frontresourse__col{ |
| width: 100%; |
| } |
| .frontresourse__col:first-child{ |
| padding-bottom: 6rem; |
| } |
| .frontresourse__col .capstext{ |
| padding-bottom: 2rem; |
| } |
| .toolingend--front{ |
| padding-bottom: 5rem; |
| } |
| .toolingend--front .container{ |
| padding: 5rem; |
| border-radius: 1rem; |
| } |
| .toolingend--front .toolingend__main{ |
| padding: 0; |
| } |
| .toolingend--front .toolingend__action{ |
| margin-left: 0; |
| } |
| } /* END MEDIA 992px */ |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| @media (max-width:767px){ |
| .fronthero{ |
| padding-top: 7rem; |
| padding-bottom: 17rem; |
| } |
| .fronthero .innerhero__pre{ |
| line-height: 1.8; |
| max-width: 80%; |
| } |
| .fronthero .h1{ |
| font-size: 6rem; |
| } |
| .fronthero .innerhero__action { |
| padding-top: 3rem; |
| } |
| .fronthero__button{ |
| font-size: 16px; |
| } |
| .fronttopcards{ |
| flex-flow: column nowrap; |
| align-items: stretch; |
| } |
| .frontcard{ |
| width: 100%; |
| padding: 3rem; |
| } |
| .frontcard:first-child{ |
| border-radius: 1rem 1rem 0 0; |
| border-bottom: 1px solid var(--grey3); |
| } |
| .frontcard:last-child{ |
| border-radius: 0 0 1rem 1rem; |
| } |
| .frontcard__prises{ |
| margin-bottom: 0; |
| } |
| .frontcard__network img{ |
| width: 6rem; |
| height: 6rem; |
| } |
| .frontcard__title.pt-3{ |
| padding-top: 2rem; |
| } |
| .forntcodes{ |
| padding-top: 0; |
| padding-bottom: 7rem; |
| } |
| .forntcodes br, |
| .frontconfs br, |
| .frontresourse br{ |
| display: none; |
| } |
| .forntcodes__wrap { |
| flex-flow: column nowrap; |
| } |
| .forntcodes__menu{ |
| width: 100%; |
| } |
| .forntcodes__menu li:not(:last-child){ |
| margin-bottom: 2rem; |
| } |
| .forntcodes__menu a.active::before{ |
| height: 3rem; |
| width: 3px; |
| margin-top: -1px; |
| } |
| .forntcodes__menu ul a.active{ |
| padding-left: 2rem; |
| color:#000 !important; |
| } |
| .forntcodes__menumore{ |
| display: none; |
| } |
| .forntcodes__tabwraps{ |
| padding-top: 5rem; |
| width: 100%; |
| overflow: hidden; |
| } |
| .forntcodes__tabwraps .nativecode__link{ |
| padding-left: 3rem; |
| padding-right: 3rem; |
| width: auto; |
| } |
| .forntcodes__bottom{ |
| padding-top: 3rem; |
| } |
| .forntcodes__bottom .button{ |
| font-size: 14px; |
| } |
| .frontnewcards{ |
| padding-top: 7rem; |
| padding-bottom: 0; |
| } |
| .frontnewcards__wrap{ |
| padding-top: 2rem; |
| } |
| .frontsimplecard{ |
| padding: 3rem; |
| } |
| .frontsimplecard .cardsimple__bottom{ |
| position: relative; |
| left: auto; |
| bottom: auto; |
| } |
| .frontstories{ |
| padding-bottom: 0; |
| } |
| .frontstories__checkers{ |
| padding-top:3rem; |
| grid-template-columns: 1fr; |
| grid-gap: 10px; |
| } |
| .frontstories__checkers li:nth-child(3){ |
| grid-column: auto; |
| } |
| .ctrl--prev{ |
| left: -7px; |
| } |
| .ctrl--next{ |
| right: -7px; |
| } |
| .jsFrontVideosSwiper{ |
| margin-left: 30px; |
| margin-right: 30px; |
| } |
| .frontstories__bottom{ |
| padding-top: 3rem; |
| } |
| .frontconfs__wrap{ |
| padding-top: 3rem; |
| } |
| .frontconfcard{ |
| padding: 3rem 2rem; |
| } |
| .frontconfcard__bottom{ |
| position: relative; |
| left: auto; |
| bottom: auto; |
| padding-left: 0; |
| padding-right: 0; |
| padding-bottom: 0; |
| padding-top: 3rem; |
| } |
| .fronteventsbanner{ |
| padding-bottom: 0; |
| } |
| .frontresourse__wrap{ |
| padding-top: 3rem; |
| } |
| .toolingend--front .container{ |
| border-radius: 0; |
| } |
| .toolingend--front .button{ |
| font-size: 17px; |
| width: 100%; |
| } |
| .toolingend--front .toolingend__action{ |
| padding-right: 0; |
| padding-top: 4rem; |
| } |
| } /* END MEDIA 767px */ |
