/*---Reset---------------------------------------------------------------------*/ *, *:before, *:after {box-sizing: border-box;margin: 0;padding: 0;} body, header, footer, nav, p, ul, ol, li, h1, h2, h3, h4, h5, h6, form, input, textarea, fieldset, blockquote, section, article, aside, dl, dt, dd, table, td, th, tr, button, div, span {margin: 0;padding: 0;font-size: 100%;font-weight: normal;box-sizing: border-box;} table {border-collapse: collapse;border-spacing: 0} ul, ol {list-style: none;} img, fieldset {border: 0;} hr {display: none;} sup {vertical-align: super;font-size: .7em;line-height: .8em;} sub {vertical-align: sub;font-size: .7em;line-height: .8em;} address {font-style: normal;} a, a:hover, a:visited, a:focus, a:active {text-decoration: none;box-sizing: border-box;} button, button:hover, button:visited, button:focus, button:active {border: none;outline: none;cursor: pointer;} input, button, textarea, select, optgroup, option {font-family: inherit;font-size: inherit;box-sizing: border-box;} button img {pointer-events: none;} pre {background-color: #373737;color: #fff;margin-bottom: 15px;font-size: 11px;} input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {-webkit-appearance: none;margin: 0;} /* input[type=number] {-moz-appearance: textfield;} */ /*---Fonts---------------------------------------------------------------------*/ @font-face {font-family: 'Mont-Regular';src: url('../fonts/Mont-Regular.ttf') format('truetype');} @font-face {font-family: 'Mont-Black';src: url('../fonts/Mont-Black.ttf') format('truetype');} @font-face {font-family: 'Mont-Light';src: url('../fonts/Mont-Light.ttf') format('truetype');} @font-face {font-family: 'Mont-SemiBold';src: url('../fonts/Mont-SemiBold.ttf') format('truetype');} @font-face {font-family: 'Mont-Bold';src: url('../fonts/Mont-Bold.ttf') format('truetype');} /*---General-------------------------------------------------------------------*/ :root { --black: #000; --grey-100: #F0F0F0; --grey-200: #d8d8d8; --grey-300: #c9c9c9; --grey-400: #808080; --grey-500: #494949; --grey-600: #292929; --blue-mm: #07a4b9; --blue-200: #00545E; --yellow: #FFC503; --anim-time: .25s; } html {overflow: hidden;} body {font-family: 'Mont-Regular', sans-serif;font-size: 14px;height: 100vh;overflow-x: hidden;overflow-y: scroll;} a font {pointer-events: none;} .left {float: left} .right {float: right;} .clearfix {clear: both;} .hidden {display: none !important;} .text-center {text-align: center;} .text-right {text-align: right;} .text-full-center {text-align: center;position: relative;top: 50%;left: 0;transform: translateY(-50%);} .flex-center-text {display: flex;justify-content: center;align-items: center;} strong {font-family: 'Mont-SemiBold';font-weight: 400;} .fs18 {font-size: 18px !important;line-height: 26px !important;} .fs20 {font-size: 20px !important;line-height: 31px !important;} .fs30 {font-size: 30px !important;line-height: 45px !important;} .fs40 {font-size: 40px !important;line-height: 59px !important;} .oh {overflow: hidden;} .red {color: red;} .madblue {color: var(--blue-mm);} .nomarging {margin-top: 0 !important;} .flex {display: flex;align-content: center;} .soft-grey {background-color: var(--grey-100);} /*---Layout--------------------------------------------------------------------*/ main.out>* { animation: outPage var(--anim-time) ease-in-out forwards; } main.in>* { animation: inPage var(--anim-time) ease-in-out forwards; } #subnav.out { z-index: 0; animation: outSubnav var(--anim-time) ease-in-out forwards; } #subnav.in { animation: inSubnav var(--anim-time) ease-in-out forwards; } .center-wrapper {width: 1200px;margin: 0 auto;padding: 60px 0;} .center-wrapper h2 {font-size: 30px;font-family: 'Mont-Bold';margin-bottom: 20px;} @keyframes outSubnav { 0% {top: 0} 100% {top: -50px;display: none;} } @keyframes inSubnav { 0% {top: -50px} 100% {top: 0;} } @keyframes inPage { 0% {translate: 0 -30px;opacity: 0;} 50% {opacity: 0;} 100% {opacity: 1;translate: 0 0;} } @keyframes outPage { 0% {translate: 0 0;opacity: 1;} 50% {opacity: 1;} 100% {opacity: 0;translate: 0 -30px;display: none;} } /*---Loader--------------------------------------------------------------------*/ #loader-wrapper {display: grid;justify-content: center;align-items: center;padding: 30px;} .loader {width: 48px;height: 48px;border-radius: 50%;position: relative;animation: rotate 1s linear infinite} .loader::before , .loader::after {content: "";box-sizing: border-box;position: absolute;inset: 0px;border-radius: 50%;border: 5px solid #000;animation: prixClipFix 2s linear infinite ;}.loader::after{border-color: var(--blue-mm);animation: prixClipFix 2s linear infinite , rotate 0.5s linear infinite reverse;inset: 6px;} @keyframes rotate { 0% {transform: rotate(0deg)} 100% {transform: rotate(360deg)} } @keyframes prixClipFix { 0% {clip-path:polygon(50% 50%,0 0,0 0,0 0,0 0,0 0)} 25% {clip-path:polygon(50% 50%,0 0,100% 0,100% 0,100% 0,100% 0)} 50% {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,100% 100%,100% 100%)} 75% {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,0 100%,0 100%)} 100% {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,0 100%,0 0)} } /*---Header--------------------------------------------------------------------*/ header {color: #000;overflow: hidden;position: sticky;top: 0;width: 100%;z-index: 12;height: 70px;} /* .slideHide {top: -70px;transition: top .2s ease-out;} */ .banner {position: sticky;top: 0;z-index: 21;} .announcement {height: 40px;background-color: var(--yellow);font-family: 'Mont-SemiBold', sans-serif;line-height: 40px;} header.mntc {top: 40px;} .commercial {height: 80px;background-color: #000;font-family: 'Mont-SemiBold', sans-serif;line-height: 26px;font-size: /*clamp(1rem, 0.8511rem + 1.2766vw, 2rem)*/24px;display: grid;align-items: center;} .commercial>div {background-image: linear-gradient(to right, #fff 0%, rgb(100% 0 88%) 20% , rgb(94% 100% 0) 60%, rgb(0 81% 100%) 90%);background-clip: text;color: transparent} header.cmcl {top: 80px;} #topnav {padding: 19px 42px 0;background-color: #fff;overflow: hidden;position: relative;z-index: 12;} #mainLogo {display: block;float: left;margin-right: 78px;} #mainLogo img {pointer-events: none;} #sandwitch, #topnav .home {display: none;} #topnav nav {float: left;padding-top: 4px;} #topnav nav li {height: 47px;font-family: 'Mont-Regular', sans-serif;display: inline-block;margin-right: 30px;} #topnav nav li:last-child {margin-right: 0;} #topnav nav li:hover, #topnav nav li.current {border-bottom: 4px solid;font-family: 'Mont-Bold', sans-serif;} #topnav nav a {color: #000;font-size: 14px;display: block;height: 47px;} #topnav button, #toAccount {background-color: #fff;color: #000;margin: 0;height: 28px;min-width: 28px;line-height: 28px;border-radius: 14px;} #topnav button img {vertical-align: middle;} #topnav button.right + button.right {margin-right: 12px;} #toAccount, #cartHeader, #toLogin {font-size: 12px;} #cartHeader, #toLogin {padding: 0 10px;} #cartHeader {border: 1px solid #fff;} #toLogin {border: 1px solid #fff;line-height: 26px;} #toAccount {padding: 0 14px;border: 1px solid #000;line-height: 26px;margin-right: 6px;} #toAccount span {pointer-events: none;position: relative;top: 2px} #toAccount img {pointer-events: none;position: relative;top: 4px} #toAccount.current, #toAccount:hover, #cartHeader:hover {color: #fff;background-color: #000;border: 1px solid #000;} #toLogin:hover {color: #000;border: 1px solid #000;} #toAccount.current img, #toAccount:hover img, #cartHeader:hover img {filter: invert(1);} #cartCountItem {font-size: 12px;position: relative;top: 1px;} #logName {position: relative;top: 1px;} #subnav {position: relative;height: 50px;background-color: #000;color: #fff;width: 100%;z-index: 11;padding-right: 125px;} #subTitleNav {padding-left: 30px;line-height: 50px;display: inline-block;width: 199px;} #subTitleNav img {vertical-align: middle;margin-right: 8px;} #subTitleNav img.white {filter: invert(1)} #subTitleNav span {font-family: 'Mont-SemiBold', sans-serif;font-size: 14px;padding: 3px 0 3px 1em;pointer-events: none;} #subnav ul, #subnav li {display: inline-block;} #subnav li a {color: #949494;font-size: 12px;padding-block: 18px;} #subnav li a:hover, #subnav li.current a {color: #fff} #subnav li + li {margin-left: 45px;} .specialBtn {position: absolute;right: 0;top: 0;width: 124px;height: 50px;margin: 0;padding: 0;} .specialBtn button, .specialBtn a {width: 100%;height: 100%;} #seeOffer {background-color: hsl(49, 99%, 50%);color: hsl(0, 0%, 0%);font-size: 12px;} #seeOffer:hover {background-color: #FFC503;} #toLogout, .specialBtn #manual {background-color: hsl(0,0%,87%);color: hsl(0, 0%, 0%);font-size: 12px;width: 100%;height: 50px;} #toLogout:hover {border: 0;background-color: var(--grey-300);} .specialBtn #manual {display: block;line-height: 50px;text-align: center;background: hsl(0,0%,87%) url('../images/donwloadArrow.svg') right 26px center no-repeat;} .specialBtn #manual:hover {background-color: var(--grey-300);} /*---Slide Hide----------------------------------------------------------------*/ header.withsub {height: 120px;transition: height .2s ease-in;} header.withsub.slideHide {height: 50px;transition: height .2s ease-out;} #mainHeader {top: 0;position: relative;z-index: 2;transition: top .2s ease-in;} .slideHide #mainHeader {top: -70px;transition: top .2s ease-out;} /* #mainHeader.withsub {top: 0;height: 120px;transition: top .2s ease-in, height .2s ease-in;} .slideHide #mainHeader {top: -70px;height: 50px;transition: top .2s ease-out, height .2s ease-out;} */ /*to change when banner is hidden*/ #wrapperWithSub {scroll-behavior: smooth;} /*---Parallax hero-------------------------------------------------------------*/ .headerBanner {width: 100%;height: 620px;max-height: 620px;position: relative;overflow: hidden;} .headerBanner img {position: absolute;top: 0;left: 0;width: 100%;height: auto;} .headerBanner .attached-text {position: absolute;top: 50%;left: 100px;color: #fff;} #madaiBanner {background: url('../images/madai-banner_alt2.jpg') center 0px / cover no-repeat;} #madlaserBanner {background: url('../images/laserToolkit.jpg') center 0px / cover no-repeat;} #featureBanner {background: url('../images/ExpoElectro-JulieGuiches06_MOD.jpg') center 0px / cover no-repeat;} #tutorialBanner {background: url('../images/tutorials.jpg') center 0px / cover no-repeat;} #extension-tutorialBanner {background: url('../images/MPC_Tutorials_2880.jpg') center 0px / cover no-repeat;} #tutorialMLBanner {background: url('../images/Party_LeMeillour.jpg') center 0px / cover no-repeat;} #extensionsBanner {background: url('../images/extensions.jpg') center 0px / cover no-repeat;} #trainingBanner {background: url('../images/training_pg.jpg') center 0px / cover no-repeat;} #usersMeetupBanner {background: url('../images/MUM_night.jpg') center 0px / cover no-repeat;} #compendiumBanner {background: url('../images/compendium_page1.jpg') center 0px / cover no-repeat;} #compendiumBannerAccount {background: url('../images/compendium_page3.jpg') center 0px / cover no-repeat;} /*---Footer--------------------------------------------------------------------*/ footer {background-color: #000;color: #fff;font-size: 12px;padding: 78px 75px 48px;font-family: 'Mont-Light', sans-serif;} footer .fat {display: flex;flex-direction: row;justify-content: space-between;margin-bottom: 30px;} footer a {color: #fff;} footer a:hover {color: var(--blue-mm);} footer img {height: 52px;margin-right: 170px} footer h4 {font-family: 'Mont-Bold', sans-serif;font-size: 14px;margin-bottom: 25px;text-transform: uppercase;} footer nav ul li + li {margin-top: 8px;} #newsletter p {margin-bottom: 10px;} footer form {display: flex;} footer form button {background-color: var(--blue-mm);color: #fff;height: 30px;line-height: 30px;width: 74px;text-align: center;} footer form input {height: 30px;line-height: 30px;font-size: 12px;padding: 0 10px;width: 200px;} footer #copyright {font-size: 11px;} #galleryListFooter {display: flex;flex-direction: row;gap: 10px;justify-content: flex-start;justify-items: flex-start;--square-side: 82px;} #galleryListFooter li, #galleryListFooter li a, #galleryListFooter li a img {width: var(--square-side);height: var(--square-side);display: block;} #galleryListFooter li a img {pointer-events: none;} /*---Overlay-------------------------------------------------------------------*/ #overlay {position: fixed;top: 0;right: 0;bottom: 0;left: 0;z-index: 14;background: rgba(0, 0, 0, 0.7);display: none;} /*---Login & SignUp------------------------------------------------------------*/ #loginSignUpForms {position: fixed;top: 0;right: -400px;width: 400px;height: 100vh;z-index: 22;transition: right .2s;background-color: #000;color: #fff;overflow: hidden;} #loginSignUpForms.open {right: 0;transition: right .2s;display: block;} #loginSignUpForms form {min-height: calc(100vh - 104px);position: relative;display: flex;flex-direction: column;justify-content: space-between;} #loginSignUpForms form h3 {text-transform: uppercase;font-size: 14px;padding: 70px 0 20px} #loginSignUpForms .warning {width: calc(100% - 116px);margin: 0 auto 40px;color: #fff !important} #loginSignUpForms form .fields, #couponCode span {position: relative;} #couponCode span {display: inline-block;width: calc(100% - 74px);} #loginSignUpForms form .fields.error {padding-bottom: 40px;} #loginSignUpForms form .fields>span {display: block;width: calc(100% - 116px);position: relative;margin: 0 auto;} #loginSignUpForms form .fields>span + span {margin-top: 70px;} #loginSignUpForms form > .fields input {display: block;font-size: 20px;background-color: #000;color: #fff;border: 0;border-bottom: 1px solid;font-family: 'Mont-Bold', sans-serif;margin-top: 70px;} #loginSignUpForms form div input:first-child {margin-top: 0;} #forgot-password {color: #fff;font-size: 10px;text-decoration: underline;} #forgot-password:hover {text-decoration: none;} #loginSignUpForms input::placeholder {color: #fff;} #loginSignUpForms #toSignUpWrapper {margin: 50px 0 30px;} #loginSignUpForms p#forgotPasswd {width: calc(100% - 116px);margin: 0 auto;font-size: 12px;line-height: 20px;} #loginSignUpForms form .fields span::before, #couponCode span::before {width: 100%;position: absolute;top: 120%;left: 0;font-size: 12px;} #couponCode span::before {top: calc(100% + 3px);} #loginSignUpForms form .fields::before {width: 100%;position: absolute;bottom: 5px;left: 0;font-size: 12px;padding: 0 58px;} #loginSignUpForms form .fields.error::before, #loginSignUpForms form .fields .error::before, #couponCode span.error::before {content: attr(data-content);color: red;} #loginSignUpForms form .fields .instruct::before {content: attr(data-instruct);color: var(--grey-200);} #loginSignUpForms #signUpForm .fields span#pw.suggest::before {content: attr(data-suggestion);color: var(--grey-200);top: 40px;} #loginSignUpForms #signUpForm .fields span#pw.error::before {top: 40px;} #loginSignUpForms button[type="submit"] {width: calc(100% - 116px);padding: 28px 0;color: #fff;border: 1px solid #fff;margin: 28px auto 14px;display: block;background-color: #000;text-transform: uppercase;} #loginSignUpForms button[type="submit"]:hover {color: #000;background-color: #fff;} .cancelForm {position: absolute;top: 0;right: 0;padding: 0;margin: 25px 25px 0 0;border: 0;background-color: #000;z-index: 10;} #toSignUp {text-transform: uppercase;font-size: 14px;color: #fff;text-decoration: underline;} #toSignUp:hover {text-decoration: none;} #formsRail {width: 500%;height: 100%;transform: translateX(0);transition: transform .21s ease-in;position: absolute;left: 0;overflow: hidden;display: flex;flex-direction: row;} #formsRail section {width: 20%;height: 100%;overflow-y: auto;position: relative;} #formsRail.slideToSignUp {transform: translateX(-20%);transition: transform .21s ease-out;} #formsRail.slideToThanksSignUp {transform: translateX(-40%);transition: transform .21s ease-out;} #formsRail.slideToForgotPassword {transform: translateX(-60%);transition: transform .21s ease-out;} #formsRail.slideToForgotPasswordNextStep {transform: translateX(-80%);transition: transform .21s ease-out;} #loggedName {padding:3px 12px;margin: 14px 15px;font-size: 12px;text-transform: uppercase;} .strength {display: flex;position: absolute;bottom: -8px;width: 100%;height: 4px;gap: 3px;z-index: 4;} .strength>span {display: none;height: 4px;width: 20%;} .strength span:first-child {background-color: orangered;} .strength span:nth-child(2) {background-color: orange;} .strength span:nth-child(3) {background-color: yellow;} .strength span:nth-child(4) {background-color: yellowgreen;} .strength span:last-child {background-color: green;} #signUpResponse, #forgotPasswordResponse {position: relative;} #signUpResponse h2, #forgotPasswordResponse h2 {position: absolute;top: 50%;left: 50%;width: calc(100% - 116px);font-size: 25px;font-family: 'Mont-Bold', sans-serif;transform: translate(-50%, -50%);} .error {color: red;} /*---Reset password page--------------------------------------------------------*/ #resetPassword {width: 402px;} #resetPassword button[type="submit"] {font-size: 14px;margin: 25px 0;float: right;color: #fff;background-color: #000;text-transform: uppercase;border: 1px solid #000;height: 40px;line-height: 38px;width: 220px;} #resetPassword button[type="submit"]:hover {color: #000;background-color: #fff;} #resetPassword button[type="submit"]:disabled {border: 1px solid #c8c8c8;padding: 2px 11px;background: grey;color: #c8c8c8;cursor: default;} /*---Title with icon-----------------------------------------------------------*/ .productIcon {background-size: auto 1em;background-repeat: no-repeat;background-position: 0 .2em;pointer-events: none;} h1.productIcon {background-size: auto .7em;background-repeat: no-repeat;background-position: 0 .2em;} #subTitleNav .productIcon {background-position: 0 center;} #subTitleNav span.madmapperIcon {background-image: url('../images/logo_mm.svg');} #subTitleNav span.minimadIcon {background-image: url('../images/minimad-logo.svg');padding-left: 2.3em;background-size: 25px auto;background-position: 0 4px;} #subTitleNav span.madlaserIcon {background-image: url('../images/madlaserIcon.svg');padding-left: 2.3em;background-size: auto .5em;background-position: 0 4px;} /* .madmapperBlackIcon {background-image: url('../images/logo_mm_black.svg');} */ .madlaserBigIcon {padding-left: 0} /*---Layout--------------------------------------------------------------------*/ #wrapper {min-height: calc(100vh - 70px);} /*ToChange when banner is hidden*/ #wrapperWithSub {min-height: calc(100vh - 120px);} #wrapper.flexCenter, #wrapperWithSub.flexCenter {display: flex;justify-content: center;align-items: center;} /*---Component-----------------------------------------------------------------*/ .highTextWithTitle {padding: 90px;text-align: center;} .highTextWithTitle h2 {font-size: 30px;font-family: 'Mont-Bold';margin-bottom: 20px;} .highTextWithTitle p {font-size: 14px;font-family: 'Mont-Regular';width: 80ch;margin: auto;} /*---Definition----------------------------------------------------------------*/ .definition {padding: 30px 124px;} .definition h2 {font-size: 20px;} .definition h2 strong {font-family: 'Mont-SemiBold', sans-serif;} .definition h2 span {display: block;font-size: 14px;color: var(--grey-500);} .definition ol {width: 850px;font-size: 16px;margin: 10px 0 0 50px;list-style: numeric;} /*---Home----------------------------------------------------------------------*/ #homeHero {width: 100%;min-height: 650px;position: relative;overflow: hidden;} #homeHero .swiper-slide .heroImage {background-position: 300px center;background-repeat: no-repeat;background-size: cover;width: 100%;min-height: 650px;} #homeHero .swiper-slide aside {position: absolute;top: 0;left: 0;bottom: 0;width: 300px;background-color: #000;color: #fff;padding: 270px 45px 0;z-index: 2;} #homeHero aside h1 {font-size: 20px;font-family: 'Mont-SemiBold', sans-serif;margin-bottom: 35px;} #homeHero .text {font-size: 14px;line-height: 20px;margin-bottom: 35px;} #homeHero a {width: 100%;height: 40px;line-height: 40px;border: 1px solid #fff;background-color: transparent;color: #fff;display: block;text-align: center;} #homeHero a:hover {background-color: #fff;color: #000;} #homeHero img {position: absolute;left: 299px;z-index: 1;height: 650px;} #bandeau {position: absolute;background-color: #000;color: #fff;height: 140px;line-height: 140px;font-family: 'Mont-Bold', sans-serif;font-size: 3vw;top: 0;text-align: center;width: 100%} #homeHero #bandeau {left: 300px;width: calc(100% - 300px);} .swiper-pagination-bullet {background-color: #fff;opacity: .5;} .swiper-pagination-bullet-active {background-color: var(--blue-mm);opacity: 1;} .discover {background-color: var(--grey-100);padding: 85px 25px 70px;} .discover h2 {font-family: 'Mont-Bold';font-size: 40px;text-align: center;} .grid2r2c {display: grid;grid-template-columns: 1fr 1fr;grid-template-rows: 1fr 1fr;gap: 20px; grid-template-areas: 'a1 a1' 'a2 a3';margin: 0 auto;width: 1380px;} .box-a {background-color: #fff;} .box-a h3 {font-family: 'Mont-Bold', sans-serif;} .box-a p {font-size: 20px;} .box-a a {font-size: 14px;background-color: transparent;border: 1px solid;color: #000;height: 80px;line-height: 80px;width: 294px;margin: 30px auto 40px;display: block;text-align: center;} .box-a a:hover {background-color: #000;border-color: #000;color: #fff;} .a1 {grid-area: a1;display: flex;flex-direction: row;align-items: center;} .a2 {grid-area: a2;text-align: center;position: relative;} .a3 {grid-area: a3;text-align: center;} .a2 h3 {font-size: 40px;padding-top: 450px;} .a3 h3 {font-size: 40px;} .a2 img {position: absolute;top: 0;left: 50%;transform: translateX(-50%);} .a2 p {padding: 0 20%;} #logoMadLaser {margin: 110px 0 100px;} #mmHomeBig {text-align: center;width: 100%;} #mmHomeBig h3 {font-size: 60px;display: inline-block;} #mmHomeBig button {margin-top: 77px;} /*---Content demo modal--------------------------------------------------------*/ #demoEmailConfirm :is(p, ul) {margin-bottom: 16px;font-size: 14px;} #demoEmailConfirm li {list-style: '- ' inside;} #demoEmailConfirm span {position: relative;} #demoEmailConfirm span::before {position: absolute;font-size: 12px;top: calc(50% - 8px);right: 4px;} #demoEmailConfirm span.error::before {content: attr(data-content);color: red;} /*---Content MadMapper---------------------------------------------------------*/ #hero, #heroEdu {display: flex;flex-direction: row;justify-content: space-between;position: relative;} #hero {height: 700px;} #heroEdu {height: auto;} #madmapperHero {width: 100%;background-image: url('../images/MAC_3d_building.png');background-repeat: no-repeat;background-position: right -384px top 50%;padding-right: 290px;padding-left: 5%;} #educationnalIntro, #educationalIntro {width: 100%;padding: 5% 0 5% 8%;background-color: var(--grey-100);} #hero h1 {font-size: 60px;font-family: 'Mont-Bold', sans-serif;} #heroEdu h1 {font-size: 45px;font-family: 'Mont-Bold', sans-serif;} #hero p {font-size: 20px;font-family: 'Mont-Regular';} #heroEdu p {font-size: 18px;font-family: 'Mont-Regular';} #madmapperHero h1 {display: inline-block;} #madmapperHero p {width: 333px;text-align: left;display: inline-block;} #educationnalIntro p, #educationalIntro p {padding-right: 150px;} #hero .cta-box, #heroEdu .cta-box {height: 100%;width: 64%;background-image: linear-gradient(45deg, var(--blue-mm), var(--blue-200));border-color: #fff;border-width: 0 0 10px 10px;border-style: solid;color: #fff;padding: 0 8% 0 4.5%;} #educationnal #heroEdu .cta-box, #educational #heroEdu .cta-box {border-width: 0 0 0 10px;height: auto;} .mm #hero .cta-box .vert-center {width: 400px;} #hero .cta-box h2 {font-size: 40px;font-family: 'Mont-Bold', sans-serif;margin-bottom: 30px;} #hero .cta-box p {margin-bottom: 30px;line-height: 20px;font-size: 14px;} #heroEdu .cta-box.edu h2 {font-size: 45px;font-family: 'Mont-Bold', sans-serif;} #heroEdu .cta-box.edu p {width: 405px;} #hero .cta-box a {width: 260px;height: 80px;line-height: 80px;text-transform: uppercase;background-color: transparent;border: 1px solid #fff;color: #fff;display: block;text-align: center;} #hero .cta-box a .fullPrice {color: var(--grey-200);font-family: 'Mont-Regular', sans-serif;} #hero .cta-box a span {pointer-events: none;} #hero .cta-box a:hover {background-color: #fff;border: 1px solid #fff;color: var(--blue-mm);} #hero .cta-box a:hover .fullPrice {color: var(--grey-400);} .fullPrice, .lineThrough {position: relative;} .fullPrice::after, .lineThrough::after {content: '';position: absolute;width: 100%;height: 3px;background-color: currentcolor;top: calc(50% - 3px);left: 0;} #tempPrice .fullPrice::after, #perpetPrice .fullPrice::after {height: 1px;top: calc(50% - 1px);} #educationnal .grid2col, #educational .grid2col {width: 1000px;margin: 0 auto;padding: 60px 0 80px;} #educationnal .grid2col h2, #educational .grid2col h2 {font-size: 20px;font-family: 'Mont-Bold', sans-serif;padding-right: 110px;margin-bottom: 60px;} #educationnal .grid2col p, #educational .grid2col p {margin-bottom: 20px;line-height: 20px;} #educationnal .grid2col ul, #educational .grid2col ul {list-style: '- ' inside;margin-bottom: 20px;line-height: 20px;} #educationnal .grid2col a, #educationnal .grid2col button, #educational .grid2col a, #educational .grid2col button {line-height: 78px;width: fit-content;color: #fff;background-color: #000;text-transform: uppercase;border: 1px solid #000;display: block;text-align: center;padding: 0 30px;} #educationnal .grid2col a:hover, #educationnal .grid2col button:hover, #educational .grid2col a:hover, #educational .grid2col button:hover {color: #000;background-color: #fff;} .vert-center {position: relative;top: 50%;transform: translateY(-50%);} .poster, .poster>a {position: relative;} .side-by-side {display: flex;height: 500px;} .poster img {width: 100%;height: auto;display: block;} .side-by-side img {object-fit: cover;width: 100%;height: 100%;} .poster .attached-text {position: absolute;bottom: 50px;left: 100px;color: #fff;} .attached-text h1, .attached-text h2 {font-size: 60px;font-family: 'Mont-Bold', sans-serif;margin-bottom: 20px;text-shadow: 0px 0px 10px rgba(0 0 0 / 0.8);} .attached-text p {font-size: 20px;width: 460px;text-shadow: 0px 0px 6px rgba(0 0 0 / 0.6);} .poster button, .poster a {border: 1px solid #fff;color: #fff;line-height: 80px;width: 290px;height: 80px;text-transform: uppercase;margin-top: 60px;background-color: transparent;display: block;text-align: center;} .poster button, .poster a.inner-link {border: none;width: auto;height: auto;text-transform: none;margin-top: 0px;background-color: transparent;display: block;line-height: normal;text-align: left;} .poster button, .poster a.inner-link * {pointer-events: none;} .poster button:hover, .poster a:hover {color: #000;background-color: #fff;} .hook {width: 830px;margin: 0 auto 50px;font-size: 20px;height: 205px;padding: 85px 0 0;} #ultimate {position: relative;width: 1440px;margin: 0 auto;} #ultimate2 {position: relative;width: 1440px;margin: 0 auto;overflow: hidden;} #ultimate3 {position: relative;width: 1440px;margin: 0 auto;} #ultimate4 {position: relative;width: 1440px;margin: 0 auto;} .parallax-content h2, .static-content h2, #ultimate h2, #ultimate2 h2 {font-family: 'Mont-Bold', sans-serif;font-size: 30px;margin-bottom: 30px;} #ultimate .left .content, #ultimate3 .static-content, #ultimate4 .static-content {padding: 200px 0 0 200px;} #ultimate2 .right .content {padding: 200px 200px 0 0;} #ultimate .content, #ultimate2 .content, #ultimate3 .static-content {width: 490px;} #ultimate4 .static-content {width: 690px;} #ultimate .swiper, #ultimate2 .swiper, #ultimate3 .macImg {width: 930px;height: 682px;} #ultimate4 .snap {width: 730px;} #ultimate4 .snap img {height: auto;width: 90%;} #ultimate2 .swiper {float: left;} #ultimate .swiper img, #ultimate2 .swiper img, #ultimate3 .macImg img {width: 930px;height: auto;} .parallax-content p, .static-content p, #ultimate .content p , #ultimate2 .content p {color: #000;opacity: .3;font-size: 14px;line-height: 20px;position: relative;} .parallax-content p + p, #ultimate .content p + p, #ultimate2 .content p + p {margin-top: 20px;} .parallax-content p.ok, .static-content p, #ultimate .content p.ok, #ultimate2 .content p.ok {opacity: 1;} .content-catch {padding: 80px 0;} .content-catch>div {max-width: 830px;margin: 0 auto;} .content-catch h3 {font-size: 20px;margin-bottom: 30px;} .content-catch p {font-size: 16px;line-height: 21px;} .poster-catch {display: flex;flex-direction: row;align-items: center;margin: 45px auto 70px;width: 1252px;} .poster-catch .content {flex: 1 1 0;} .poster-catch .img {flex: 2 1 0;} .poster-catch .img img {display: block;width: 100%;height: auto;} .poster-catch .content h2 {font-size: 40px;font-family: 'Mont-Bold', sans-serif;margin-bottom: 20px;} .poster-catch .content p {font-size: 16px;line-height: 24px;} .poster-catch div:first-child h2, .poster-catch div:first-child p {padding: 0 80px 0 45px;} .poster-catch div:last-child h2, .poster-catch div:last-child p {padding: 0 0 0 70px;} #picsFeatures {background-color: var(--grey-100);padding: 86px 0;} #picsFeatures h2 {font-family: 'Mont-Bold', sans-serif;font-size: 40px;margin: 0 0 70px;} #picsFeatures > .flex-wrap {display: flex;gap: 20px;flex-direction: row;flex-wrap: wrap;width: 1200px;margin: 0 auto;} #picsFeatures > .flex-wrap > div {height: 480px;background: #fff;padding: 48px 30px 20px;position: relative;} #picsFeatures > .flex-wrap > .blk {background-color: #000;color: #fff;} #picsFeatures .blue100 {color: var(--blue-mm);} #picsFeatures > .flex-wrap > .w40 {width: calc(40% - 10px);} #picsFeatures > .flex-wrap > .w60 {width: calc(60% - 10px);} #picsFeatures > .flex-wrap > .w33 {width: calc(33% - 10px);} #picsFeatures .text {position: absolute;bottom: 30px;left: 30px;width: calc(100% - 70px);} #picsFeatures > .flex-wrap > div > img {margin: 40px auto 0;display: block;width: 100%;height: auto;} #picsFeatures > .flex-wrap > div > img.ml-33 {margin-left: -33px;} #picsFeatures > .flex-wrap > div > img.mt-40 {margin-top: -40px;} #picsFeatures > .flex-wrap > div > img.mt50 {margin-top: 50px;} #picsFeatures > .flex-wrap > div > img.jpg {width: 100%;height: auto;position: absolute;top: 0;left: 0;margin-top: 0;} #picsFeatures > .flex-wrap > div h3 {font-size: 30px;font-family: 'Mont-Bold', sans-serif;margin-bottom: 15px;} #picsFeatures > .flex-wrap > div h3.mb12 {margin-bottom: 12px;} #picsFeatures > .flex-wrap > .w60 h3 {font-size: 40px;} #picsFeatures .text p {font-size: 16px;line-height: 26px;} #picsFeatures > .flex-wrap > div#multihardware > ul {background-image: linear-gradient(#3d6fae, #b23230, #edd256, #579256);color: transparent;background-clip: text;font-size: 2em;height: 70%;display: flex;flex-direction: column;justify-content: space-between;} #picsFeatures > .flex-wrap > div#multihardware > ul:has(> :last-child:nth-child(1)) {font-size: 2em;} #picsFeatures > .flex-wrap > div#multihardware > ul:has(> :last-child:nth-child(2)) {font-size: 2em;} #picsFeatures > .flex-wrap > div#multihardware > ul:has(> :last-child:nth-child(3)) {font-size: 2em;} #picsFeatures > .flex-wrap > div#multihardware > ul:has(> :last-child:nth-child(4)) {font-size: 2em;} #picsFeatures > .flex-wrap > div#multihardware > ul:has(> :last-child:nth-child(5)) {font-size: 2em;} #picsFeatures > .flex-wrap > div#multihardware > ul:has(> :last-child:nth-child(6)) {font-size: 2em;} #picsFeatures > .flex-wrap > div#multihardware > ul:has(> :last-child:nth-child(7)) {font-size: 2em;} #picsFeatures > .flex-wrap > div#multihardware > ul:has(> :last-child:nth-child(8)) {font-size: 2em;} #picsFeatures > .flex-wrap > div#multihardware > ul:has(> :last-child:nth-child(9)) {font-size: 1.9em;} #picsFeatures > .flex-wrap > div#multihardware > ul:has(> :last-child:nth-child(10)) {font-size: 1.8em;} #allFeatures {padding: 85px 0 60px;position: relative;} #allFeatures h2 {font-size: 40px;font-family: 'Mont-Bold', sans-serif;margin-bottom: 20px;} #allFeatures h3 {font-size: 20px;font-family: 'Mont-Regular', sans-serif;margin-bottom: 95px;} #allFeatures > div:first-child {position: relative;} #allFeatures h4 {font-size: 30px;font-family: 'Mont-Bold', sans-serif;} .flexRow {display: flex;flex-direction: row;width: 830px;margin: 0 auto;} .flexRow + .flexRow {margin-top: 60px;} .flexRow > * {width: 50%;} .flexRow ul + ul {margin-top: 20px;} .flexRow ul li {position: relative;line-height: 20px;} .flexRow .new {color: var(--blue-mm);} .flexRow .new::before {content: 'new';position: absolute;font-size: 10px;background-color: var(--blue-mm);color: #fff;line-height: 15px;border-radius: 2px;padding: 0 5px;left: -50px;top: 2px;} /*---MadLaser content----------------------------------------------------------*/ #madlaserHero {height: 700px;display: flex;flex-direction: row;justify-content: space-around;position: relative;} #madlaserHero > div {flex: 1 1 0;} #madlaserHero h1 {font-size: 60px;font-family: 'Mont-Bold', sans-serif;} #madlaserHero #logoML {width: auto;height: 338px;} #logoml {padding-left: 100px;} #logoml p {font-size: 20px;} .highText h2 {margin: 60px auto;max-width: 830px;font-size: 20px;line-height: 31px;} .highText.user-meetup h2 {max-width: 900px;} /*---MadBundle content---------------------------------------------------------*/ #madbundleHero {height: 700px;display: flex;flex-direction: row;justify-content: space-around;position: relative;} #madbundleHero > div {flex: 1 1 0;} #madbundleHero h1 {font-size: 60px;font-family: 'Mont-Bold', sans-serif;} #madbundleHero #logoMB {width: auto;height: 338px;} #logomb {padding-left: 100px;} #logomb p {font-size: 20px;} .highText h2 {margin: 60px auto;max-width: 830px;font-size: 20px;line-height: 31px;} /*---Product-------------------------------------------------------------------*/ #products {background-color: #F0F0F0;padding: 50px 0;font-size: 20px;} #products p.small {font-size: 14px;} .product-flex {display: flex;flex-direction: row;align-content: stretch;justify-content: center;align-items: stretch;flex-wrap: nowrap;gap: 70px;margin-top: 25px;} .purchase-horz {margin-top: 25px;} #products h2 {text-align: center;font-size: 40px;font-family: 'Mont-Bold', sans-serif;} #products h3 {text-align: center;font-size: 30px;font-family: 'Mont-Bold', sans-serif;padding: 0 25px 25px;} #products .product-horz h3 {padding: 0 25px 10px;} #extension #products h3 {padding: 0 30px 10px;} #products h3 span {font-size: 20px;} #products h4 {font-size: 14px;padding: 0 20px;margin: 0 10px;} .product {width: 300px;font-size: 14px;background-color: #fff;padding-top: 44px;display: flex;flex-direction: column;justify-content: space-between;gap: 25px;} #demoWithPreorder {padding-top: 50px;} .product-demo, .product-horz {width: 1040px;height: 200px;font-size: 14px;background-color: #fff;display: grid;margin: 0 auto;gap: 70px;justify-content: center;align-items: center;grid-template-columns: repeat(3, 1fr);} .product-demo > div, .product-horz > div {width: 300px;} .product-demo > div > .priceFrom, .product-horz > div > .priceFrom {margin-bottom: 0;} @supports not (gap: 70px) { .product-flex {margin: 25px 0;} .product {margin-left: 70px;} } #platform-choice {height: 80px;border-top: 4px solid var(--grey-100);border-bottom: 4px solid var(--grey-100);display: flex;gap: 4px;background-color: var(--grey-100);} #platform-choice > button {flex-grow: 1;background-color: #fff;text-align: center;} #platform-choice > button img {filter: invert(1);} #platform-choice > button:hover, #platform-choice > button.activ {background-color: #000;} #platform-choice > button:hover img, #platform-choice > button.activ img {filter: invert(0);} .product-demo #platform-choice {height: 100px;border-top: 0;} .product-demo #freeDownload {height: 100px;} .addToCart, #freeDownload {width: 300px;height: 80px;text-align: center;font-size: 18px;line-height: 80px;margin: 0;padding: 0;background-color: #000;border: 1px solid #000;color: #fff;position: relative;text-transform: uppercase;position: relative;} .addToCart:hover, #freeDownload:hover {border: 1px solid var(--grey-600); ;background-color: var(--grey-600);} .addToCart::before {content: '';width: 300px;height: 4px;background-color: var(--grey-100);position: absolute;top: -5px;left: -1px;} .addToCart:disabled, .addToCart:disabled:hover, #validCoupon:disabled {background-color: hsl(0,0%,50%);border-color: hsl(0,0%,50%);color: #fff;cursor: default;} .addToCart>span {pointer-events: none;} #tempPrice, #perpetPrice, #preorderPrice, #creditsPrice {position: relative;font-size: 28px;font-family: 'Mont-Regular', sans-serif;} #tempPrice .fullPrice, #perpetPrice .fullPrice, #preorderPrice .fullPrice {position: absolute;color: var(--grey-300);top: -11px;right: 4px;height: 10px;font-size: 11px;text-align: right;line-height: 10px;display: none;} #creditsPrice .fullPrice {display: none;} .addToCart>button {position: absolute;top: 19px;font-size: 34px;background-color: #383838;color: #fff;margin: 0; padding: 0;font-family: 'Mont-Light';width: 40px;height: 40px;line-height: 40px;border-radius: 50%;} #creditsCount.lineNumber {border-top: 0;} #save-money {height: 44px;line-height: 44px;text-align: center;color: #000;background-color: #FFC503;border-top: 4px solid var(--grey-100);} .lineNumber {overflow: hidden;position: relative;border-top: 4px solid var(--grey-100);background-color: #fff;} .lineNumber>button {position: absolute;top: 19px;font-size: 34px;background-color: #fff;color: #000;margin: 0; padding: 0;font-family: 'Mont-Light';width: 40px;height: 40px;line-height: 40px;border-radius: 50%;} .lineNumber>button:hover {background-color: #000;color: #fff;margin: 0; padding: 0;} .lineNumber>label {position: absolute;top: 3px;left: 20px;font-size: 14px;color: hsl(0,0%,50%);} #temporarySeat, #perpetualSeat {margin-bottom: 4px;} .lineNumber>.decrement, .addToCart>.decrement-price {left: 10px;} .lineNumber>.increment, .addToCart>.increment-price {right: 10px;line-height: 47px;} .product form input[name="upgradeSerial"] {display: block;width: 90%;font-size: 12px;color: hsl(0,0%,50%);padding: 16px 16px 13px 16px;border: 1px solid hsl(0,0%,87%);border-radius: 2px;margin: 15px auto;} .product form input[type="number"], .product-horz form input[type="number"] {display: block;width: 40%;text-align: center;border: 0;margin: 9px auto 6px;font-size: 24px;padding:10px;line-height: 41px;} .product form input[type="number"]:disabled, .product-horz form input[type="number"]:disabled {color: #000;background-color: #fff;} .product form input:focus, .product form input:focus-visible, .product-horz form input:focus, .product-horz form input:focus-visible {outline: 0} .priceFrom {color: #00A7BC;font-family: 'Mont-Bold', sans-serif;text-align: left;margin: 12px 20px 21px 30px;line-height: 25px;} #initRentPrice .fullPrice, #initBuyPrice .fullPrice, #initBuyWithPreorderPrice .fullPrice, #initCreditPrice .fullPrice {color: var(--grey-400);font-family: 'Mont-SemiBold', sans-serif;} #initRentPrice .fullPrice, #initBuyPrice .fullPrice, #initBuyWithPreorderPrice .fullPrice {display: block;width: fit-content;font-size: 20px;} .entire-price {display: block;} .product-horz .entire-price {display: inline-block;} .product-horz h4, .product-horz .priceFrom {text-align: center;} .blue-price {font-size: 40px} .blue-free-price {font-size: 40px} #perpetForm .push {height: 80px;} .product ul li, .product-demo ul li, .product-horz ul li {padding: 0 0 0 16px;background: url('/images/listItem.svg') 0 5px no-repeat;margin: 0 30px 20px;} .product-demo ul li, .product-horz ul li {margin-bottom: 0;} .product-demo ul li + li, .product-horz ul li + li {margin-top: 10px;} #upgradeForm .error {width: 90%;text-align: center;margin: 10px auto;} #upgradelicenselist {padding: 0 20px;height: 250px;overflow: auto;} #upgradelicenselist p + p {margin-top: 10px;} #upgradelicenselist p button {width: 100%} /*---Cart----------------------------------------------------------------------*/ #cart {position: fixed;top: 0;right: -400px;width: 400px;height: 100svh;z-index: 21;transition: right .2s ease-in;background-color: #fff;} #cart.open {right: 0;transition: right .2s ease-out;} #closeCart {position: absolute;top: 17px;left: 10px;z-index: 5;cursor: pointer;} #closeCart img {display: block;} #cart h2 {background-color: #fff;padding: 9px 20px 9px 47px;margin-bottom: 0;font-size: 20px;border-bottom: 1px solid;} #cart h2 span {font-size: 11px;line-height: 30px;color: red;} #totalPrice {padding-block: 20px 0;margin-inline: 20px;border-top: 1px solid var(--grey-200);} #nothingInDaCart {padding: 20px;} #cartList {height: calc(100svh - 262px);overflow-y: auto;padding-left: 20px;} #cart[mode="discounted"] #cartList {height: calc(100svh - 172px);} #couponCode {margin-bottom: 15px;} .removeCoupon {background-color: transparent;text-decoration: underline;} .removeCoupon:hover {background-color: transparent;text-decoration: none;} #cartList li {position: relative;padding: 30px 10px;overflow: hidden;display: grid;grid-template-columns: 108px 206px;align-items: center;} #cartList li .quantpicto {position: relative;} #cartList li .name {position: relative;padding: 0 0 0 23px;} #cartList li + li {margin-bottom: 10px;} #cartList li + li::before {content: '';width: calc(100% - 20px);height: 1px;background-color: var(--grey-100);position: absolute;top: 0;} #cartList li .config {color: var(--blue-mm);} #cartList h4, #cartList .price {font-size: 14px;font-family: 'Mont-SemiBold', sans-serif;} #cartList .price .lineThrough {font-family: 'Mont-Regular', sans-serif;color: var(--grey-400);} #cartList .price {font-family: 'Mont-SemiBold', sans-serif;} #cartList .price .small, #cartList .price .small.lineThrough {font-size: 11px;font-family: 'Mont-Regular', sans-serif;} #cartList .price .small.lineThrough {font-family: 'Mont-Light', sans-serif;} #cartList .normal .totalDicountPrice {font-family: 'Mont-SemiBold', sans-serif;} #cartList .small .totalDicountPrice {font-family: 'Mont-Regular', sans-serif;} #cartList .warning {font-size: 12px;font-family: 'Mont-Regular', sans-serif;} #cartList small {font-size: 10px;font-family: 'Mont-Regular', sans-serif;} #cartList .quantpicto .quantity {position: absolute;top: 50%;left: 0;margin: 0;transform: translate(50%, -50%);display: inline-block;width: 20px;height: 20px;color: #fff;background-color: #000;line-height: 20px;text-align: center;font-size: 11px;font-family: 'Mont-Bold';border-radius: 50%;} #cartList .quantpicto .picto {width: 65px;height: 52px;margin-left: 48px;} .remove {margin: 0;padding: 0;border: none;text-decoration: underline;font-size: 10px;position: absolute;top: 50%;right: -25px;transform: translate(0, -50%);width: 13.84px;height: 15px;text-indent: -999px;overflow: hidden;background: transparent url('../images/poubelles.svg') 0 0 no-repeat;} .remove:hover {text-decoration: none;background: transparent url('../images/poubelles.svg') -13.84px 0 no-repeat;} #couponCode {margin: 0 20px 20px;padding: 20px 0 0;border-top: 1px solid var(--grey-200);} #cart[mode="discounted"] #couponCode {display: none;} #couponCode.line input {width: 100%;} #validCoupon {line-height: 48px;background-color: #000;color: #fff;height: 48px;width: 72px;margin-left: 2px;border-radius: 2px;font-size: 12px;vertical-align: top;text-transform: uppercase;} #checkoutFromCart {margin: 20px;width: calc(100% - 40px);background-color: #000;color: #fff;height: 48px;text-transform: uppercase;font-size: 14px;} #cartList .madmapper .quantpicto .picto {background: url('../images/logo_mm_black.svg') center 0 / auto 100% no-repeat;} #cartList .madlaser .quantpicto .picto {background: url('../images/logoMadLaser-final.svg') center 0 / auto 100% no-repeat;} #cartList .madbundle .quantpicto .picto {background: url('../images/cartBundleLogo.svg') center 0 no-repeat;} /*---Minimad------------------------------------------------------------------*/ #minimadHero {overflow: hidden;display: flex;height: 700px;} #minimadHero .img img {display: block;transform: translateY(-50%);position: relative;top: 50%;} #minimadHero>div:last-child {padding: 0 94px;} #minimadHero p {font-family: 'Mont-Regular', sans-serif;font-size: 20px;line-height: 31px;margin-bottom: 50px;} #minimadHero #minimadPrice {font-family: 'Mont-Bold';margin-bottom: 0;} #minimadHero h1 {font-family: 'Mont-Bold', sans-serif;font-size: 40px;line-height: 59px;margin-bottom: 6px;} #minimadHero a {width: 100%;line-height: 78px;text-transform: uppercase;color: #fff;background-color: #000;border: 1px solid #000;margin-bottom: 40px;display: block;text-align: center;} #minimadHero a:hover {background-color: #fff;color: #000;} #minimadHero #include {font-family: 'Mont-SemiBold', sans-serif;font-size: 14px;text-transform: uppercase;border-bottom: 1px solid;margin-bottom: 27px;} #minimadHero ul li {padding-left: 20px;} #minimadHero ul li + li {margin-top: 20px;} #includeSDcard {background: url('../images/sdcard-icon.svg') 0 0 no-repeat;} #includePower {background: url('../images/power-icon.svg') 0 center no-repeat;padding: 2px 0;} #spec {height: 160px;max-width: 1038px;margin: 40px auto;} #specTabs {display: block;width: 100%;position: relative;border-bottom: 1px solid var(--grey-200);min-height: 29px;} #specTabs .tab {float: left;display: block;} #specTabs .tab>input[type="radio"] {position: absolute;top: -9999px;left: -9999px;} #specTabs .tab>label {display: block;padding: 6px 15px 6px 0;font-size: 12px;text-transform: uppercase;cursor: pointer;position: relative;color: #808080;background: transparent;margin-right: 30px;height: 29px;text-align: left;} #specTabs .tab>label:hover, #specTabs>.tab>[id^="tab"]:checked + label {color: #000;border-bottom: 1px solid #000;} #specTabs .content {display: none;overflow: hidden;width: 100%;height: 100px;padding: 25px 0 0;position: absolute;top: 27px;left: 0;opacity:0;transition: opacity 400ms ease-out;flex-direction: row;} #specTabs .content ul {flex: 1 1 0;} #specTabs>.tab>[id^="tab"]:checked ~ [id^="tab-content"] {display: flex;opacity: 1;transition: opacity 400ms ease-out;} #advertMinimad {display: flex;} #minimadtopview {width: 65%;height: 615px;background: url('../images/miniMADblackTop2_MOD.jpg') right 0 center / cover no-repeat;flex: 2 1 0} #advertText {flex: 1 1 0} #advertText h2 {font-family: 'Mont-Bold', sans-serif;font-size: 30px;margin-bottom: 25px;padding-right: 115px;} #advertText p {padding-right: 165px;} #advertText p + p {margin-top: 20px;} #minimadExplode {position: relative;padding: 90px 0;} #minimadExplode .pics img {position: static;object-fit: none;width: auto;height: auto;position: relative;top: 200px;} #allTexts {position: absolute;inset: 0px;width: 1252px;margin: 263px auto;} #allTexts .text {width: 18vw;position: absolute;} #small {top: 0;left: 0;} #discreet {top: 50%;right: 0;transform: translateY(-50%);} #power {bottom: 0;left: 0;} #allTexts .text h2 {font-family: 'Mont-Bold', sans-serif;font-size: 30px;line-height: 35px;margin-bottom: 25px;} #allTexts .text p {line-height: 20px;} /*---MiniMad Downloads---------------------------------------------------------*/ #minimadDL {min-height: calc(100vh - 440px);} /*---Tutorials-----------------------------------------------------------------*/ .videos, .guides {padding: 85px 0 0 0;} .videos h2, .guides h2 {font-family: 'Mont-Bold', sans-serif;font-size: 30px;} .videos iframe {display: block;} #videoBig h2 {margin-bottom: 14px;} #videoBig p {margin-bottom: 38px;text-align: center;} #videoBig iframe {margin: 0 auto 70px;width: 1252px;} #videoFlex {width: 1252px;margin: 0 auto 120px;display: flex;gap: 20px;} #videoFlex iframe {margin-bottom: 33px;} #toYTchannel, .toYTchannel {text-transform: uppercase;color: #000;border: 1px solid #000;display: block;width: 268px;line-height: 78px;text-align: center;margin: 0 auto 80px;} .toYTchannel.first {margin: 20px auto 0;} #toYTchannel:hover, .toYTchannel:hover {background-color: #000;color: #fff;} #tuts-wrapper {position: relative;min-height: 150vh;} .guides h2 {margin-bottom: 70px;} .guides .grid4col {width: 1252px;margin: 0 auto;display: grid;grid-template-columns: repeat(4, 1fr);} .guide {width: 300px;margin-bottom: 60px;} .guide .illustrationGuide {width: 300px;height: 300px;background: url('../images/dummyGuideImg.jpg') 0 0 / cover no-repeat;margin-bottom: 34px;} .guide .illustrationGuide img {width: 100%;height: auto;} .guide h3 {font-size: 20px;font-family: 'Mont-Bold', sans-serif;margin-bottom: 24px;} .guide a {line-height: 38px;color: #000;width: 205px;display: block;border: 1px solid #000;text-transform: uppercase;text-align: center;} .guide a:hover {background-color: #000;color: #fff;} /*---Support-------------------------------------------------------------------*/ #support .flex {padding: 60px 200px 60px 94px;background-color: var(--grey-100);display: flex;} #support .flex>div {width: 530px;} #support .flex>div p {padding-right: 210px;} #support h1 {font-family: 'Mont-Bold', sans-serif;font-size: 60px;} #support form {width: calc(100% - 530px);} #support form p:not(.hidden) + p {margin-top: 30px;} #support label {color: #808080;font-size: 12px;margin-bottom: 9px;} #support input, #support textarea, #modal-form input, #modal-form textarea {color: #171717;background-color: var(--grey-100);width: 100%;display: block;border: 1px solid #000;border-radius: 2px;padding: 16px 16px 13px 16px;} #support textarea, #modal-form textarea {height: 200px;} #support button[type="submit"] {color: #fff;border: 1px solid #000;background-color: #000;text-transform: uppercase;line-height: 38px;width: 205px;margin-top: 8px;} #support .cachecache {display: none;} #support form span, #modal-form .line span {position: relative;display: block;} #support form span::before, #modal-form .line span::before {position: absolute;font-size: 12px;top: -16px;right: 4px;} #support form span.error::before {content: attr(data-content);color: red;} /*---forms modal----------------------------------------------------------------*/ #modal-form .line + .line {margin-top: 14px;} #modal-form .line span.error::before {content: attr(data-content);color: red;} /*---legal text----------------------------------------------------------------*/ #legalContent, #aboutusContent {padding-top: 70px;} #legalText, .aboutusText, .madText {width: 1200px;margin: 0 auto;padding: 60px 0;} .txt {font-size: 16px;} .txt h1 {font-size: 60px;font-family: 'Mont-Bold', sans-serif;margin-bottom: 35px;} #legalText h1, #legalText h2, .aboutusText h1 {font-size: 20px;font-family: 'Mont-Bold', sans-serif;margin-bottom: 30px;} #legalText strong {font-family: 'Mont-SemiBold', sans-serif;} .aboutusText h2, .txt h2 {font-size: 16px;font-family: 'Mont-SemiBold', sans-serif;margin-bottom: 20px;} #legalText h2 {margin-top: 30px;} #legalText h3 , .txt h3 {margin-top: 15px;font-family: 'Mont-SemiBold', sans-serif;} #legalText p, #legalText ul, #legalText ol, .aboutusText p {line-height: 20px;margin-top: 20px;} #legalText h3 + p, .txt h3 + p {margin-top: 10px;} #legalText ul, #legalText ol, .txt ul, .txt ol {margin-left: 10px;} #legalText ul li, .txt ul li {list-style: '- ' inside;} #legalText ul li ul, .txt ul li ul {margin-top: 0;margin-left: 20px;} #legalText ol.alpha li, .txt ol.alpha li {list-style: lower-alpha inside;} #legalText p.flex, .txt .flex {display: flex;} #legalText .flex-address {display: flex;gap: 30px} #legalText a, .aboutusText a, .txt a {color: var(--blue-mm);text-decoration: underline;} #legalText a:hover, .aboutusText a:hover, .txt a:hover {text-decoration: none;} .txt p + p, .txt ul + p {margin-top: 10px;} .txt .strong {font-family: 'Mont-SemiBold', sans-serif;} .big {font-size: 20px;} /*---Compendium----------------------------------------------------------------*/ #compBtn, #toCompAccountPage, #toLectureForm {display: inline-block;margin-top: 14px;color: #fff;border: 1px solid #000;background-color: #000;text-transform: uppercase;line-height: 38px;padding: 4px 10px;text-decoration: none;} #compBtn:hover, #toCompAccountPage:hover, #toLectureForm:hover {color: #000;background-color: #fff;} /*---FAQ-----------------------------------------------------------------------*/ #faq {display: flex;flex-direction: row;gap: 80px;padding-bottom: 100px;background-color: var(--grey-100);} #faqNav {width: fit-content;padding-left: 94px;width: 480px;} #faqMenu {position: sticky;top:120px;bottom: 280px} #faqNav .pusher {height: 280px;} #faqMenu .pusher {height: 120px;} #faqNav h4 {font-family: 'Mont-Bold', sans-serif;font-size: 20px;margin-bottom: 20px;} #faqNav h4 + ul {margin-bottom: 30px;} #faqNav li + li {margin-top: 18px;} #faqNav a {color: #000;} #faqNav a.activ {font-size: 20px;font-family: 'Mont-SemiBold', sans-serif;margin-left: 13px;} #faqContent {width: 80%;padding-right: 94px;padding-top: 100px;} .faqs + .faqs {margin-top: 20px;} .faqs h2, #faqContent h2 {font-family: 'Mont-Bold', sans-serif;font-size: 60px;margin-bottom: 100px;} .faqs h3 {font-family: 'Mont-Bold', sans-serif;font-size: 45px;margin-bottom: 40px;} .qandaContent {columns: 2 20vw;column-gap: 127px;} .qanda {display: inline-block;} .qanda h4 {font-family: 'Mont-Bold', sans-serif;font-size: 30px;line-height: 44px;margin-bottom: 30px;} .qanda p {font-size: 14px;line-height: 20px;} .qanda p + p {margin-top: 20px;} .qanda ul, .qanda ul li p {margin-bottom: 20px;} .qanda ul li {list-style: '- ' inside;} .qanda p:last-child {margin-bottom: 80px;} .qanda a {color: var(--blue-mm);} /*---Account license-----------------------------------------------------------*/ #productTabs {width: 100%;display: block;position: relative;overflow: hidden;margin-bottom: 40px;} #productTabs .tab {float: left;display: block;line-height: 31px;padding: 0 16px;border-radius: 16px;cursor: pointer;background-color: var(--grey-100);} #productTabs .tab:hover {background-color: var(--grey-200);} #productTabs .tab.on {background-color: var(--grey-600);color: #fff} #productTabs .tab + .tab {margin-left: 15px;} /* #productTabs .productIcon {background-position: 0 center;} */ /* #productTabs span.madmapperIcon {background-image: url('../images/logo_mm_black.svg');} */ /* #productTabs span.madlaserIcon {background-image: url('../images/madlaserIcon.svg');padding-left: 2em;background-size: auto .5em;background-position: 0 2px;} */ #productActive {width: 100%;overflow: hidden;display: flex;flex-direction: row;margin: 40px 0;} #productActive li {flex: 1 1 0;position: relative;color: #b3b3b3;text-transform: uppercase;font-size: 12px;font-family: 'Mont-Regular', sans-serif;text-align: center;line-height: 30px;cursor: pointer;border-bottom: 1px solid;} #productActive li::before {content: '';background-color: #000;width: 100%;height: 1px;position: absolute;bottom: -1px;left: 0;transform-origin: center;transform: scaleX(0);transition: transform 250ms ease-in-out;} #productActive li.on {color: #000;border-color: #000;} #productActive li:hover {color: #000;border-color: #b3b3b3;} #productActive li:hover::before, #productActive li.on::before {transform: scaleX(1);transition: transform 250ms ease-in-out;} #productContent {width: 100%;} .titlePage h1 {font-size: 50px;font-family: 'Mont-Bold', sans-serif;width: 70%;padding-right: 30px;position: sticky;top: 60px;} .titlePage h1 p.warning {font-size: 14px;font-family: 'Mont-Regular', sans-serif;white-space: nowrap;} #licensesList li, .licensesList li {line-height: 30px;position: relative;overflow: hidden;} #licensesList>li, .licensesList>li {background-color: var(--grey-100);} .begray #licensesList>li, .begray .licensesList>li {background-color: var(--grey-200);} #licensesList>li.noLicense, .licensesList>li.noLicense {background-color: transparent;text-align: center;} #licensesList>li + li, .licensesList>li + li {margin-top: 15px;} .license-title {display: flex;justify-content: space-between;align-items: center;border-bottom: 1px solid #fff;padding:8px 16px;gap: 10px;} #licensesList li h3, .licensesList li h3 {color: #000;} #licensesList li h3 .expire, .licensesList li h3 .expire {font-size: 0.8rem;} #licensesList li .license-block, .licensesList li .license-block {color: #000;font-family: 'Mont-SemiBold';padding:8px 16px;} #licensesList li .license-block p, .licensesList li .license-block p {font-size: 12px;font-family: 'Mont-Regular', sans-serif;} #licensesList li.expired h3, #licensesList li.expired .license-block, .licensesList li.expired h3, .licensesList li.expired .license-block {color: #8c8c8c;} .expired .activation {background: #8c8c8c} #licensesList li.locked, .licensesList li.locked {background-color: tomato;} .lid {position: absolute;top: 85px;right: 0;font-family: 'Mont-Bold', sans-serif;font-size: 8rem;color: #d2d2d2;} .locked .lid {color: #ff0000;} .credits p {align-content: center;} .buy-more {margin-left: 10px;background-color: #000;color: #fff;padding: 4px 6px;text-box-trim: trim-both;} .buy-more:hover {background-color: var(--yellow);color: #000;} .upgrade, .upgradeRK, .alreadyInCart, .preorder {padding: 5px;font-size: 14px;border: 1px solid;line-height: 16px;color: #000;} .alreadyInCart {background-color: var(--grey-300);color: #000;} .upgrade, .upgradeRK, .preorder {background-color: var(--grey-100);} .upgradeRK {margin-right: 10px;display: inline-block;width: 104px;} .upgradeRK > span {pointer-events: none;} .upgradeRK:disabled, .upgradeRK:disabled:hover {color: var(--grey-400);cursor: default;background-color: var(--grey-100);} .upgrade:hover, .upgrade:focus, .upgradeRK:hover, .upgradeRK:focus, .preorder:hover, .preorder:focus {border: 1px solid;background-color: #000;color: #fff;} .machines {position: relative;} .availabilityStamp {position: absolute;font-size: 12px;z-index: 4;color: #fff;top: 14px;left: 16px;overflow: hidden;} .availabilityStamp p {display: block;line-height: 22px;} .availabilityStamp .user-reset-left {opacity: .6;} .activation {background: #000;color: #fff;padding:8px 16px;border-bottom: 1px solid var(--grey-100);} .activation p {line-height: 50px;} .activation .m2 {display: flex;align-items: center;} .activation .m2 p {line-height: 20px;margin-top: 3px;} .activation .m2 .serial-machine {font-size: 12px;opacity: .6;} .activation .resetBtn {border: 1px solid #fff;padding: 2px 11px;margin: 14px 30px 14px 15px;background-color: #000;color: #fff;} .activation .resetBtn:hover {border: 1px solid #fff;padding: 2px 11px;background: #fff;color: #000;} .activation .resetBtn:disabled {border: 1px solid #c8c8c8;padding: 2px 11px;background: grey;color: #c8c8c8;cursor: default;} /*---switch button---------------------*/ #newsletter {margin: 35px 0 0;} .tgl {display: none;} .tgl-btn {display: inline-block;} .tgl, .tgl:after, .tgl:before, .tgl *, .tgl *:after, .tgl *:before, .tgl + .tgl-btn {box-sizing: border-box} .tgl::-moz-selection, .tgl:after::-moz-selection, .tgl:before::-moz-selection, .tgl *::-moz-selection, .tgl *:after::-moz-selection, .tgl *:before::-moz-selection, .tgl + .tgl-btn::-moz-selection {background: none;} .tgl::selection, .tgl:after::selection, .tgl:before::selection, .tgl *::selection, .tgl *:after::selection, .tgl *:before::selection, .tgl + .tgl-btn::selection {background: none;} .tgl + .tgl-btn {outline: 0;display: inline-block;width: 24px;height: 14px;position: relative;top: 2px;cursor: pointer;user-select: none;} .tgl + .tgl-btn:after, .tgl + .tgl-btn:before {position: relative;display: block;content: "";width: 50%;height: 100%;} .tgl + .tgl-btn:after {left: 0;} .tgl + .tgl-btn:before {display: none;} .tgl:checked + .tgl-btn:after {left: 50%;} .tgl-light + .tgl-btn {background: #a5a5a5;border-radius: 2em;padding: 2px;transition: all 0.4s ease;} .tgl-btn + span {color: #000;font-family: 'Mont-Bold', sans-serif;font-size: 14px;line-height: 16px;margin-left: 6px;margin-bottom: 6px;display: inline-block;} .tgl-light + .tgl-btn:after {border-radius: 50%;background: #fff;transition: all 0.2s ease;} .tgl-light:checked + .tgl-btn {background: #000;} .tgl-light:checked + .tgl-btn + span {color: #000;} .tgl-light:disabled + .tgl-btn {background-color: #a5a5a5;} .tgl-light:disabled + .tgl-btn + span {color: #a5a5a5;} .switch p {opacity: .6;font-size: 10px;padding-left: 33px;} .changeSeat {margin: 0 14px;} #legacyLicense p {font-size: 12px;margin-bottom: 10px;} #legacyLicense button[type="submit"] {font-size: 14px;margin-top: 25px;float: right;color: #fff;background-color: #000;text-transform: uppercase;border: 1px solid #000;height: 40px;line-height: 38px;width: 220px;} #legacyLicense button[type="submit"]:hover {color: #000;background-color: #fff;} #legacyLicense button[type="submit"]:disabled {border: 1px solid #c8c8c8;padding: 2px 11px;background: grey;color: #c8c8c8;cursor: default;} #legacyLicense .error {color: red;margin: 10px 0;font-size: 12px;} #oldSerial {width: 100%;border: 1px solid #000;line-height: 40px;border-radius: 2px;padding: 5px 20px;font-size: 20px;} #oldSerial:disabled {background-color: var(--grey-100);border-color: var(--grey-200);} .grid {display: grid;grid-template-columns: repeat(3, 1fr);grid-template-rows: 'auto';grid-gap: 0;grid-template-areas: "b1 b2 b3";margin: 0;position: relative;z-index: 1;} .grid h4, .grid2 h4 {font-size: 14px;} .grid2 {display: grid;grid-template-columns: repeat(3, 1fr);grid-template-rows: 'auto';grid-gap: 0;grid-template-areas: "b1 b2 b2";margin: 0;position: relative;z-index: 1;border-top: 1px solid #fff;} .b1 {grid-area: b1;} .b2 {grid-area: b2;width: 300px;width: 320px;overflow-wrap: break-word;} .b3 {grid-area: b3;} .flex-full {display: flex;justify-content: space-between;gap: 8px;flex: 1 0 auto;} .flex-full h3 {flex: 0 0 auto;} .licenseName {position: relative;flex: 1 0 auto;} .licenseName .flex {display: flex;justify-content: space-between;font-family: 'Mont-Regular', sans-serif;flex: 1 0 auto;} .licenseName .flex .name {padding-left: 5px;} .licenseName .flex button {font-size: 14px;font-family: 'Mont-Regular', sans-serif;width: max-content;padding: 2px 4px;background: transparent;border: 1px solid;height: 28px;margin-top: 1px;} .licenseName .flex button:hover {background-color: #000;color: #fff;border-color: #000;} .licenseName form {position: absolute;top: 0;left: 0;width: 100%;padding: 0;display: none;} .licenseName form input[name="license_name"] {padding: 6px 110px 6px 4px;width: 100%;border-radius: 0;border: 1px solid #888} .licenseName form .actionBtns {position: absolute;top: 0;right: 8px;} .licenseName form input[type="submit"], .licenseName form .cancelNaming {border-radius: 0;border: 1px solid #000;padding-inline: 4px;cursor: pointer;background-color: #000;color: #fff;} .licenseName form input[type="submit"]:hover, .licenseName form .cancelNaming:hover {background-color: transparent;color: #000;} .upgrade-btns {flex-basis: auto;} .gridAccount {display: grid;grid-template-columns: repeat(3, 1fr);grid-template-rows: 'auto';grid-gap: 0;grid-template-areas: "l1 l2 l2";padding: 50px 124px;} .l1 {grid-area: l1;} .l2 {grid-area: l2;} .gridAccount.begray, .begray {background-color: var(--grey-100);} #authdeauth {width: 100%;height: auto;aspect-ratio: 1.77;} .gridMachine, .gridOrder {display: grid;grid-template-columns: 1fr 2fr;grid-gap: 0;grid-template-areas: "m1 m2";} .gridMachine + .gridMachine {border-top: 1px solid hsl(0,0%,87%);} .m1 {grid-area: m1;} .m2 {grid-area: m2;} .activation .m2 {padding-left: 33.3%;} #titleLicenses {grid-area: l1;} .subPageContent {grid-area: l2;} /*Address*/ #accountAddress {padding-bottom: 85px;} #accountAddress .grid {display: grid;grid-template-columns: 344px 152px;grid-gap: 12px;} /*Orders*/ .gridOrder {display: grid;grid-template-columns: 1fr 4fr;grid-gap: 0;grid-template-areas: "m1 m2";} .invoice {margin: 8px 0;} .invoice a {padding: 4px 0 4px 16px;background: url('../images/invoice.svg') 0 center no-repeat;text-decoration: underline;font-size: 14px;color: #000;} .invoice:hover a {text-decoration: none;} #ordersList {padding-bottom: 60px;} li.orderElement {padding: 0 0 10px;grid-area: m2;} li.orderElement h4 {font-size: 20px;margin-bottom: 6px;text-decoration: underline;} li.orderElement p.price {font-size: 20px;margin-top: 5px;font-family: 'Mont-Bold', sans-serif;} li.orderElement + li.orderElement {margin-top: 10px;border-top: 1px solid;padding-top: 20px;} .cartElement > li {padding-left: 26px;line-height: 22px;} span.quantity {display: block;width:16px;height: 16px;color: #fff;background-color: #000;line-height: 18px;text-align: center;font-size: 9px;font-family: 'Mont-Bold';border-radius: 50%;float: left;margin-left: -26px;position: relative;top: 3px;} .cartElement {font-size: 14px;margin-top: 10px;} .cartElement .price {float: right} form#account, #change-password {width: 402px;} .grid2col {display: grid;grid-template-columns: 1fr 1fr;grid-template-rows: 'auto';grid-gap: 14px;} .line + .line {margin-top: 14px;} .line input, .line p {width: 100%;font-size: 12px;color: hsl(0,0%,50%);padding: 16px 16px 13px 16px;border: 1px solid hsl(0,0%,87%);border-radius: 2px;} .line p {color: #000;border-color: #000;border-width: 0;} .line small {margin-top: 7px;font-size: 10px;color: hsl(0,0%,50%);} .accountButton {text-transform: uppercase;background-color: #000;color: #fff;line-height: 40px;margin-top: 45px;width: 191px;} /*Downloads*/ h2.downloads, .downloadGuide h2 {padding: 15px 17px;font-size: 20px;font-family: 'Mont-Bold';color: #fff;background-color: #000;} #allDownloads {padding-bottom: 60px;} .downloadsApps, .downloadGuide {margin-bottom: 25px;background-color: var(--grey-100);font-size: 14px;} .downloadsApps p:not(.first), .downloadGuide p {padding: 17px 0;margin: 0 17px;} .downloadsApps p + p, .downloadGuide p + p {border-top: 1px solid var(--grey-200)} .downloadsApps .first {background-color: #000;color: #fff;padding: 5px 17px 15px;} .downloadsApps .first a {color: #fff} .downloadsApps a {color: #000;text-decoration: underline;opacity: .7;} .downloadsApps a + a {margin-left: 30px;} .downloadsApps a:hover {text-decoration: none;opacity: 1;} .appleLink, .appleSiliconLink, .windowsLink, .download, .visit {text-indent: -99999px;display: inline-block;height: 20px;filter: invert(1);position: relative;top: -4px;} .appleLink {width: 36px;background: url('../images/apple-intel.svg') center center / auto 14px no-repeat;filter: invert(0);} .appleSiliconLink {width: 36px;background: url('../images/apple-m.svg') center center / auto 14px no-repeat;filter: invert(0);} .windowsLink {width: 20px;background: url('../images/windows.svg') center center / 14px 14px no-repeat;} .download {width: 20px;background: url('../images/donwloadArrow.svg') center center / 14px 14px no-repeat;filter: invert(0)} .visit {width: 20px;background: url('../images/visitArrow.svg') center center / 14px 14px no-repeat;filter: invert(0)} .first .windowsLink {filter: invert(0);} .first .appleLink, .first .appleSiliconLink {filter: invert(1);} /*---Account------------------------------*/ :is(form#account, form#change-password, form#resetPassword) .line span {position: relative;} :is(form#account, form#change-password, form#resetPassword) .line span::before {width: 100%;position: absolute;top: 50%;right: 0;font-size: 12px;text-align: right;transform: translate(-3%, -50%);} :is(form#account, form#change-password, form#resetPassword) .line span.error::before {content: attr(data-content);color: red;} :is(form#change-password, form#resetPassword) .line span.error::before {width: 50%;} :is(form#change-password, form#resetPassword) .line span.suggest::before {content: attr(data-suggestion);right: -100%;text-align: left;transform: translate(3%, -50%);} :is(form#change-password, form#resetPassword) .line span .strength {bottom: -20px;} form#resetPassword .fields span#pw.suggest::before {content: attr(data-suggestion);top: 7px;} form#resetPassword .fields span#pw.error::before {top: 7px;} .rule p {font-size: 18px;} .rule p + p {margin-top: 16px;} #resetLicenseDialog p + p {margin-top: 10px;} #commentReset {width: 100%;margin-top: 10px;} #resetLicenseDialog .error {position: relative;display: block;} #resetLicenseDialog .error label {color: #000;} #resetLicenseDialog .error::before {content: attr(data-content);width: fit-content;position: absolute;font-size: 12px;text-align: right;color: red;padding: 0 5px;background-color: #fff;} #resetLicenseDialog .ta .error::before {transform: translate(-5%, 25%);top: 0;right: 0;} #resetLicenseDialog .cb .error::before {transform: translate(-3%, 0);top: 0;right: 0;} /*--ffmpeg--------------------------------*/ #ffmpeg {padding: 90px 20px;max-width: 1200px;margin: 0 auto;min-height: calc(100vh - 270px);display: grid;align-items: center;justify-content: center;} #ffmpeg a {color: var(--blue-mm)} .flexMpeg {display: flex;justify-content: space-evenly;margin: 50px 0;} /*---Gallery------------------------------*/ #gallery {padding: 30px 6%;overflow: hidden;} #gallery li {float: left;margin: 2px;} #gallery li img {cursor: pointer;display: block;width: 100%;height: 100%;object-fit: cover;} #swiperGallery {position: fixed;width: 100%;height: 100vh;top: 0;left: 0;z-index: 22;background: linear-gradient(0deg, rgba(0, 0, 0, .95) 9%, rgba(0, 12, 14, .85) 100%);} #swiperGallery .swiper-slide {padding: 20px;} #swiperGallery .swiper-slide img {height: calc(100% - 140px);width: auto;position: relative;left: 50%;transform: translate(-50%, 0);margin-bottom: 20px;box-shadow: 0px 0px 30px rgba(0, 0, 0, .1);} #swiperGallery .swiper-slide .text-item {color: #fff;padding: 0 15%;} #swiperGallery .swiper-slide .text-item h3 {font-family: 'Mont-SemiBold';font-size: 20px;margin-bottom: 10px;} #swiperGallery .swiper-slide .text-item .text {margin-bottom: 10px;} #swiperGallery .swiper-slide .text-item a {color: var(--blue-mm);} .swiper-button-prev {color: var(--blue-mm)} .swiper-button-next {color: var(--blue-mm)} .swiper-button-close {position: absolute;top: 10px;right: 10px;z-index: 1;width: 22px;height: 22px;background: url('../images/swiper-close.svg') center center / cover no-repeat;cursor: pointer;} /*---Trainers & Schools----------------------*/ #trainersAndSchools {width: 1200px;margin: 0 auto;padding-block: 50px 200px;display: grid;gap: 10px;--col-size: 290px;grid-template-columns: repeat(auto-fill, minmax(min(var(--col-size), 100%), 1fr));} .pics {position: relative;aspect-ratio: 1;} .pics img {position: absolute;object-fit: cover;width: 100%;height: 100%;} .trainer {padding: 5px;--alpha:.6} .trainer a {color: #000;display: block;padding: 5px;border-radius: 3px;transition: box-shadow 500ms;} .trainer a:hover {box-shadow: 0px 0px 5px rgba(0 0 0 / var(--alpha));} .trainer .pics {pointer-events: none;} .trainer h3, .speaker h3 {font-family: 'Mont-Bold', sans-serif;font-size: 20px;margin-top: 17px;pointer-events: none;} .trainer h4 {font-family: 'Mont-Bold', sans-serif;font-size: 14px;margin-top: 4px;pointer-events: none;} .trainer .short-description {margin-top: 17px;font-size: 14px;pointer-events: none;overflow: hidden;line-clamp: 6;-webkit-line-clamp: 6;-webkit-box-orient: vertical;box-orient: vertical;display: -webkit-box;} .view-profile, .speaker a {margin-top: 17px;font-family: 'Mont-Bold', sans-serif;font-size: 12px;display: block;pointer-events: none;} .speaker a {color: var(--blue-mm);text-decoration: underline;pointer-events: fill;} .trainer a:hover .view-profile, .speaker a:hover {color: var(--blue-200);text-decoration: none;} #madmap {aspect-ratio: 2.6;} .marker {width: 20px;height: 20px;background: url('../images/geospot-trainer.svg') center center / contain no-repeat;} #trainer {width: 1200px;margin: 0 auto;padding: 60px 0 200px;} .grid3 {display: grid;grid-template-columns: 3fr 1fr;gap: 30px;} #trainer-phone {display: none;} #trainer-info {} #trainer-info h2 {font-family: 'Mont-Bold', sans-serif;font-size: 60px;} #trainer-info h3 {font-family: 'Mont-Bold', sans-serif;font-size: 20px;margin-top: 5px;} #trainer-socials {} .trainer-datainfo {margin-top: 30px;} #trainer-lang h4, #trainer-socials-links h4 {font-size: 16px;font-family: 'Mont-Light', sans-serif;} #trainer-lang p, #trainer-socials-links ul {font-family: 'Mont-SemiBold', sans-serif;} #trainer-socials-links a {color: #000;} #trainer-socials-links a:hover {color: var(--blue-mm);} #trainer-intro-description {font-size: 20px;margin-top: 70px;width: 70%;} #contact-trainer {width: 100%;background-color: #000;border: 1px solid #000;height: 77px;color: #fff;font-size: 1rem;padding-inline: 8px;} #contact-trainer:hover {background-color: #fff;color: #000;} #contact-trainer strong span {display: block;} #getToFullBio {display: inline-block;margin-top: 30px;padding-left: 16px;background: url('../images/down-arrow2.svg') left center no-repeat;color: #000;} #madmapper-projects {margin-top: 50px;} #gallery-trainer {--gallery-col-size: 300px;display: grid;grid-template-columns: repeat(auto-fit, minmax(min(var(--gallery-col-size), 100%), 1fr));gap: 30px;margin-top: 18px;} .trainer-project {display: grid;align-items: end;} .trainer-project[href=""] {cursor: default;} .trainer-project h3 {color: #000;font-family: 'Mont-SemiBold', sans-serif;font-size: 20px;align-self: self-start;} .trainer-project:hover h3 {color: var(--blue-mm);} #gallery-trainer .pics {aspect-ratio: 16/9;margin-top: 8px;} #gallery-trainer .gallery-text {color: #000;margin-top: 6px;} #trainer-description {font-size: 14px;margin-top: 60px;width: 70%;} .description {margin-top: 30px;} .description h2, #madmapper-projects h2 {font-size: 24px;font-family: 'Mont-SemiBold', sans-serif;} .text-content {margin-top: 20px;} #skills {margin-top: 40px;display: flex;gap: 9px;flex-wrap: wrap;} #skills span {font-size: 16px;display: inline-block;background-color: var(--grey-300);border-radius: 4px;padding: 6px 12px;} /*----Users Meetup------------*/ #user-meetup-speakers {padding-block: 50px 200px;display: grid;gap: 10px;--col-size: 290px;grid-template-columns: repeat(auto-fill, minmax(min(var(--col-size), 100%), 1fr));} #meetupTicket, .big-blue-btn {background-color: var(--blue-mm);color: #fff !important;text-decoration: none !important;font-size: 20px;padding: 18px 30px 14px;text-decoration: none;font-family: 'Mont-SemiBold', sans-serif;border-radius: 3px;} #meetupTicket:hover, .big-blue-btn:hover {background-color: var(--blue-200);} #addImages {padding: 4px 10px;background-color: #000;color: #fff;border: 1px solid #000;} #addImages:hover {background-color: transparent;color: #000;} #formMeetup input[type="file"] {display: none;} #imagesList li {display: grid;grid-template-columns: auto auto;justify-content: space-between;} #imagesList .delete {width: 16px;height: 16px;background: url('../images/xClose-red.svg') center / contain no-repeat;} /**/ .timer {display: block;z-index: 10;background: -webkit-linear-gradient(left, var(--blue-mm) 50%, #eee 50%);border-radius: 100%;height: calc(var(--size) * 1px);width: calc(var(--size) * 1px);position: absolute;top: calc(50% - calc(var(--size) * .5px));left: calc(var(--size) * -1.5px);animation: time calc(var(--duration) * 1s) steps(1000, start) forwards;mask: radial-gradient(transparent 50%,#000 50%);} .mask {display: block;border-radius: 100% 0 0 100% / 50% 0 0 50%;height: 100%;left: 0;position: absolute;top: 0;width: 50%;animation: mask calc(var(--duration) * 1s) steps(500, start) forwards;transform-origin: 100% 50%;} .mask::before {content: '';background-color: #fff;height: calc(var(--size) * .5px);width: calc(var(--size) * .5px);position: absolute;border-radius: 50%;top: calc(calc(var(--size) * 1px) * .25);left: 50%;} @keyframes time { 100% {transform: rotate(360deg);} } @keyframes mask { 0% {background: #eee;transform: rotate(0deg);} 50% {background: #eee;transform: rotate(-180deg);} 50.01% {background: var(--blue-mm);transform: rotate(0deg);} 100% {background: var(--blue-mm);transform: rotate(-180deg);} } /*--Modal------------*/ #modal h2 {font-size: 1.5rem;margin-bottom: 1.5rem;font-family: 'Mont-Bold', sans-serif;} #confirm button {background: #000;color: #fff;padding:3px 12px;font-size: 11px;text-transform: uppercase;margin: 1.5rem 0 14px 0;} #confirm button:hover {background: #fff;color: #000;padding:0 6px;border: 1px solid #000;} #confirm #modalCancel {margin: 1.5rem 0 14px 15px;} #modal #closeBtn {background-image: url('../images/xClose-white.svg');background-repeat: no-repeat;background-position: center center;background-color: #000;} #modal #closeBtn:hover {background-image: url('../images/xClose.svg');background-color: #fff;} #modal .formRow label {display: block;margin-bottom: 6px;} #modal .formRow input {width: 100%;padding: 10px 5px;border-radius: 2px;border: 1px solid;} @media screen and (max-width: 1440px) { .grid2r2c {width: 100%;} .a1>img {width: 45vw;} } @media screen and (max-width: 1280px) { #picsFeatures .flex-wrap {width: 1000px;} #trainer, #trainersAndSchools {width: 1000px;} #trainersAndSchools {--col-size: 200px;} /*---legal, about us-----------------------*/ #legalText, .aboutusText, .madText {width: 960px;} } @media screen and (max-width: 1112px) { /*tablet TODO menu*/ /*---Header------------------------*/ #mainLogo {margin-right: 44px;} header nav li {margin-right: 15px;} #subTitleNav {width: 179px;} #subnav li + li {margin-left: 30px;} } @media screen and (max-width: 1024px) { /*tablet TODO menu*/ /*---Header------------------------*/ #topnav {padding: 19px 30px 0;} #mainLogo {margin-right: 24px;} #cartHeader, #toLogin {padding: 0 5px;} header button.right + button.right {margin-right: 6px;} .commercial {font-size: 22px;} /*---Footer------------------------*/ footer {padding: 65px 60px 90px;flex-direction: column;height: auto;} /*---Home--------------------------*/ .grid2r2c {grid-template-columns: 1fr;grid-template-rows: 1fr 1fr 1fr;width: 100%;margin: 0;gap: 18px; grid-template-areas: 'a1' 'a2' 'a3';} .a1 {justify-content: flex-start;} .a1 img {position: relative;left: -53%;width: 100%;} #mmHomeBig {position: relative;left: -50%;} .box-a {position: relative;overflow: hidden;padding: 0 25px;} .box-a h3, #mmHomeBig h3 {font-size: 40px;} .box-a p {font-size: 18px;} .box-a a {width: 100%;} /*---Content MadMapper---------------------------------------------------------*/ /*---software---*/ #hero {flex-direction: column;height: auto;} #hero #madmapperHero {width: 100%;height: auto;padding: 25% 0 25% 36px;background-position: right -384px bottom 40%;} #hero #madmapperHero h1 {font-size: 42px;text-align: left;display: block;} #hero #madmapperHero p {margin-left: 0;display: block;font-size: 14px;padding-right: 36px;} #hero .cta-box {width: 100%;border: 0;padding: 113px 18px 113px 36px;} #hero .cta-box a {height: 40px;line-height: 40px;} #hero .cta-box .vert-center, #hero #madmapperHero .vert-center {position: static;transform: translateX(0);} .mm #hero .cta-box .vert-center {width: auto;} /* #hero {height: 700px;display: flex;flex-direction: row;justify-content: space-between;position: relative;} #hero h1 {font-size: 60px;font-family: 'Mont-Bold', sans-serif;} #hero p {font-size: 20px;font-family: 'Mont-Regular';} */ #picsFeatures .flex-wrap {width: 1000px;} .product-flex {flex-direction: column;align-items: center;} .product, .addToCart, #freeDownload {width: 450px;} #ultimate {width: 100%;} .hook {width: auto;} #ultimate .left .content, #ultimate3 .static-content, #ultimate4 .static-content {padding: 20px 0 0 50px;width: 300px;} #ultimate .swiper, #ultimate2 .swiper, #ultimate3 .macImg {width: calc(100% - 320px);height: auto;} /*---legal, about us-----------------------*/ #legalText, .aboutusText, .madText {width: 800px;} /*---Tutorials--------------------*/ #videoBig iframe {width: calc(100% - 36px);height: 234px;margin: 0 auto 70px;} #videoFlex {display: block;width: 100%;margin-bottom: 0;} #videoFlex iframe {width: calc(100% - 36px);height: 234px;margin: 0 auto 21px;} #videoFlex h2 {padding: 0 18px;margin-bottom: 50px;font-size: 20px;} .guides .grid4col {width: 100%;margin: 0 auto;display: grid;grid-template-columns: repeat(2, 1fr);} /* .guide {width: 100%;} .guide .illustrationGuide {width: 100%;aspect-ratio: 1;height: auto;} .guide a {width: 100%;} */ /*---Support-----------------------*/ #support .flex {padding: 34px 18px 27px;display: block;} #support .flex div:first-child {margin-bottom: 60px;} #support form {width: 100%;} #support form .text-right button {width: 100%;} /*---FAQ---------------------------*/ #faq {display: block;padding: 34px 18px 27px;} .faqs {padding: 0;} .faqs h2 {font-size: 40px;line-height: 50px;margin-bottom: 50px;} .faqs + .faqs {margin-top: 0;} #faqNav {display: none;} #faqContent {padding-right: 0;width: 100%;} .qandaContent {columns: 1 100vw;} .qanda h4 {font-size: 20px;line-height: 30px;} .qanda p:last-child {margin-bottom: 50px;} /*---Account-------------------------------*/ .gridAccount {overflow: hidden;} .gridAccount, .gridAccount + .gridAccount {display: block;padding: 40px 18px;} .gridAccount + .gridAccount {padding: 30px 18px;} .titlePage h1 {padding: 0;width: 100%;font-size: 30px;margin-bottom: 40px;} form#account, #change-password {width: 100%;} .availabilityStamp {position: static;padding: 8px 16px;background-color: #000;border-bottom: 1px solid #585858;overflow: hidden;display: flex;justify-content: space-between;height: 60px;} .availabilityStamp p {justify-items: center;line-height: 44px;font-size: 12px;} .activation .resetBtn {margin-left: 0;font-size: 10px;} .grid h4, .grid2 h4 {font-size: 12px;} #licensesList li .license-block p, .licensesList li .license-block p {font-size: 10px;} .activation .m2 {padding-left: 0;font-size: 12px;} li.orderElement h4 {font-size: 14px;} .gridOrder {display: block;} .gridOrder .o1 {display: flex;justify-content: space-between;} li.orderElement p.price {margin-top: -25px;font-size: 16px;} .cartElement {font-size: 11px;} .cartElement li + li {margin-top: 6px;} .invoice {margin-top: 8px;} .orderSerial {display: none;} /*---Trainers-------------------------------*/ #trainer, #trainersAndSchools {width: 780px;} #trainersAndSchools {--col-size: 190px;} #skills span {font-size: 12px;} } @media screen and (max-width: 768px) { /*tablet TODO menu*/ .commercial {font-size: 18px;} /*---Header------------------------*/ header {position: sticky;width: 100%;overflow: initial;background-color: rgba(255, 255, 255, 1);} header.cmcl {top: 110px;} #topnav {padding: 19px 19px 0;height: 70px;position: relative;} #topnav.on {height: 100vh;} header button {background-color: transparent;} #mainLogo {float: none;position: absolute;left: 50%;top: 17px;transform: translate(-50%, 0%);} #topnav nav {position: absolute;top: 70px;left: 0;width: 100%;height: 0;background-color: #fff;display: none;} #topnav nav.on {height: calc(100vh - 70px);transition: height 250ms ease-in-out;display: block;} #topnav nav li, #topnav nav li.home {display: block;margin: 0 18px;line-height: 60px;border-bottom: 1px solid var(--grey-100);height: 60px;} #topnav nav li + li {margin: 0 18px;} #topnav nav li.current, #topnav nav li:hover {border-bottom: 1px solid var(--grey-100);} #topnav #sandwitch {display: block;position: absolute;top: 28px;left: 18px;width: 22px;height: 16px;background: url('../images/sandwitch.svg') 0 0 no-repeat;} #toAccount, #toLogin {margin-right: 4px;} #logName {display: none;} /*---legal, about us-----------------------*/ #legalText, .aboutusText, .madText {width: 100%;padding-left: 25px;padding-right: 25px;} /*---Subnav------------------------*/ #subTitleNav {padding: 0;display: block;width: auto;text-align: center;background: url('../images/subnavArrowDown.svg') right 34.5px center no-repeat;} .open #subTitleNav {background: url('../images/subnavArrowUp.svg') right 34.5px center no-repeat;} #subnav {padding-right: 0;} #subnav ul {background-color: #000;border-top: 1px solid #fff;position: absolute;top: 50px;left: 0;width: 100%;display: none;z-index: 10;} #subnav.open ul {display: block;} #subnav li {line-height: 44px;border-bottom: 1px solid var(--grey-400);padding: 0 36px;display: block;} #subnav li + li {margin: 0;} #subnav li.specialBtn {position: static;width: 100%;margin: 30px 36px 36px;width: calc(100% - 72px);border-bottom: 0;} #picsFeatures .flex-wrap {width: 740px;} /*---Trainers-------------------------------*/ #trainer, #trainersAndSchools {width: 740px;} #trainersAndSchools {--col-size: 210px;} } @media screen and (max-width: 500px) { body {width: 100%;overflow-x: hidden;} .warned #wrapperWithSub {padding-top: 180px;} /*---Component-----------------------------------------------------------------*/ .highTextWithTitle {padding: 30px 20px;text-align: center;} .highTextWithTitle p {width: auto;margin: auto;} /*---header------------------------*/ .banner {position: sticky;} .announcement {height: 60px;line-height: 20px;padding: 10px;} .commercial {height: 110px;line-height: 32px;padding: 22px 10px;font-size: 20px;} .banner>div {position: absolute;top: 50%;translate: 0 -50%;width: calc(100% - 20px);} /*---footer------------------------*/ footer .fat {flex-direction: column;gap: 50px;} /*---Home--------------------------*/ #homeHero {min-height: 450px;} #homeHero .swiper-slide .heroImage {background-position: left top;background-size: auto 250px;background-repeat: no-repeat;height: 570px;min-height: 570px;} #homeHero .swiper-slide aside {width: 100%;padding: 36px 40px;height: auto;bottom: 0;top: unset;left: unset;} #homeHero #bandeau, #bandeau {left: 0;width: 100%;height: 60px;line-height: 60px;display: none;} .a1 {flex-direction: column;} .a1 img {position: relative;left: -70%;width: 250%;} #mmHomeBig {left: auto;} #mmHomeBig h3.productIcon {padding-left: 0;} #mmHomeBig h3.madmapperBlackIcon {background-image: none;} .a2, .a3 {display: block;} /*---Login & SignUp----------------*/ #loginSignUpForms {width: 100%;right: -100%;} /*---Cart--------------------------*/ #cart {width: 100%;right: -100%;} /*---Layout------------------------*/ #wrapper {width: 100%;} .mntc #wrapper {width: 100%;} .cmcl #wrapper {width: 100%;} .mntc #wrapperWithSub {width: 100%;} .cmcl #wrapperWithSub {width: 100%;} /*---Products------------------------*/ #products {padding: 60px 18px;} .product-flex {flex-direction: column;} .product {width: 100%;} .product-demo {width: 100%;height: auto;display: block;padding-top: 44px;} .product-demo > div {width: 100%;} .product-demo #free {margin-top: 55px;} .product-demo > div > .priceFrom {margin-bottom: 21px;} .addToCart, #freeDownload {width: 100%;} .product-horz {width: 300px;height: auto;display: block;padding-top: 20px;} .product-horz > div {margin-bottom: 45px;} .product-horz .entire-price {display: block;} .product-horz h4, .product-horz .priceFrom {text-align: left;} /*---Madmapper-----------------------*/ /*---software---*/ #hero, #heroEdu {flex-direction: column;height: auto;} #hero #madmapperHero {width: 100%;height: auto;padding: 80px 0 150% 36px;background-position: right -384px bottom 5%;} #hero #madmapperHero h1, #heroEdu h1 {font-size: 42px;text-align: left;display: block;} #hero #madmapperHero p {margin-left: 0;display: block;font-size: 14px;padding-right: 36px;} #hero .cta-box, #heroEdu .cta-box {width: 100%;border: 0;padding: 113px 18px 113px 18px;} #hero .cta-box a {height: 40px;line-height: 40px;} #heroEdu .cta-box.edu h2 {font-size: 60px;} #hero .cta-box .vert-center, #hero #madmapperHero .vert-center, #heroEdu .cta-box .vert-center {position: static;transform: translateX(0);} .mm #hero .cta-box .vert-center {width: auto;} #ultimate, #ultimate2, #ultimate3, #ultimate4 {width: 100%;padding: 42px 18px;} .hook {width: 100%;height: auto;text-align: left;padding: 0;} #ultimate2 .wrapper {display: flex;flex-direction: column-reverse;} #ultimate .content, #ultimate2 .content, #ultimate3 .static-content, #ultimate4 .static-content {width: 100%;} #ultimate .left .content, #ultimate3 .static-content, #ultimate2 .right .content, #ultimate4 .static-content {padding: 0;} #ultimate .swiper, #ultimate2 .swiper, #ultimate3 .macImg {width: 100%;height: auto;} #ultimate .swiper img, #ultimate2 .swiper img, #ultimate3 .macImg img, #ultimate4 .snap img {width: 100%;} #ultimate .content p , #ultimate2 .content p {margin-left: 30px;} /*---Posters-----------------------*/ .poster {height: calc(100vh - 70px);width: 100%;overflow: hidden;} .poster img {height: 100%;width: auto;position: absolute;left: 0;} .poster img.l10 {transform: translateX(-10%);} .poster img.l20 {transform: translateX(-20%);} .poster img.l30 {transform: translateX(-30%);} .poster img.l35 {transform: translateX(-35%);} .poster img.l40 {transform: translateX(-40%);} .poster img.l45 {transform: translateX(-45%);} .poster img.l50 {transform: translateX(-50%);} .poster img.l55 {transform: translateX(-55%);} .poster img.l60 {transform: translateX(-60%);} .poster img.l70 {transform: translateX(-70%);} .poster .attached-text {left: 18px;width: calc(100% - 36px);} .poster .attached-text h2 {font-size: 40px;} .poster .attached-text p {width: 100%;} .poster button, .poster a {width: 100%;} #latest-news.poster a {height: 50%;} #latest-news.poster h2 {line-height: 40px !important;} #latest-news.poster .attached-text p {font-size: 16px;} #new-product.poster a {height: 100%;} /*---features---*/ .headerBanner {aspect-ratio: auto;height: 620px;} .headerBanner.l10 {background-position: 10% 0 !important;} .headerBanner.l20 {background-position: 20% 0 !important;} .headerBanner.l30 {background-position: 30% 0 !important;} .headerBanner.l40 {background-position: 40% 0 !important;} .headerBanner.l50 {background-position: 50% 0 !important;} .headerBanner.l60 {background-position: 60% 0 !important;} .headerBanner.l70 {background-position: 70% 0 !important;} .headerBanner.l80 {background-position: 80% 0 !important;} .headerBanner.l90 {background-position: 90% 0 !important;} .headerBanner.l100 {background-position: 100% 0 !important;} .headerBanner .attached-text {left: 18px;width: calc(100% - 36px);bottom: 50px;top: unset;transform: none;} .headerBanner .attached-text h2 {font-size: 40px;} .headerBanner .attached-text p {width: 100%;} .content-catch {padding: 70px 18px 80px;} .content-catch .text-center {text-align: left;} .poster-catch {flex-direction: column;width: 100%;margin: 0 0 90px} .poster-catch img {margin-bottom: 38px;} #catch1, #catch3 {flex-direction: column-reverse;} #catch2 h2, #catch2 p {padding: 0 80px 0 45px;} #picsFeatures .flex-wrap {width: 100%;padding-left: 18px;padding-right: 18px;} #picsFeatures > .flex-wrap > div {height: auto;padding: 20px 15px;} #picsFeatures .flex-wrap > .w40, #picsFeatures .flex-wrap > .w60, #picsFeatures .flex-wrap > .w33 {width: 100%;} #picsFeatures > .flex-wrap > div > img {margin: 0 auto !important;} #picsFeatures > .flex-wrap > div#multihardware > img {margin: 0 0 0 -24px !important;} #picsFeatures > .flex-wrap > div#multihardware > ul {font-size: 20px;} #picsFeatures .text {position: static;width: 100%;margin-top: 20px;} .mm #picsFeatures > .flex-wrap > div:nth-child(3) > img {width: 100%;margin: 60px 0 0;} .mm #picsFeatures > .flex-wrap > div:nth-child(9) > img {width: 60% !important;margin: 10px auto 0;} .mm #picsFeatures > .flex-wrap > div:nth-child(10) > img {margin: 60px auto 0;} .mm #picsFeatures > .flex-wrap > div:nth-child(11) > img {width: 60% !important;margin: 0px auto 0;} #picsFeatures > .flex-wrap > div > img.jpg {position: static;width: calc(100% + 30px);margin: -20px -15px 0 -15px !important;} #allFeatures {padding-left: 18px;padding-right: 18px;} #allFeatures h2 {font-size: 30px;} #allFeatures h3 {font-size: 16px;} #allFeatures h4 {font-size: 20px;margin-bottom: 20px;padding-left: 48px;} .flexRow {width: 100%;flex-direction: column;} .flexRow > * {width: 100%;} .flexRow ul {padding-left: 48px;} /*---educational--------------------*/ #educationnalIntro, #educationalIntro {padding: 60px 36px 65px;} #educationnalIntro h1, #educationalIntro h1 {font-size: 50px;line-height: 50px;margin-bottom: 30px;} #educationnalIntro .vert-center, #educationalIntro .vert-center {position: static;transform: none;} #educationnalIntro p, #educationalIntro p {padding: 0;font-size: 14px;line-height: 20px;} #educationnal .grid2col, #educational .grid2col {width: 100%;display: block;padding: 40px 18px 180px;position: relative;} #educationnal .grid2col h2, #educational .grid2col h2 {padding-right: 0;} #educationnal .grid2col div:first-child a, #educational .grid2col div:first-child a {position: absolute;bottom: 80px;width: calc(100% - 36px);background-color: transparent;color: #000;} /*---Tutorials--------------------*/ #videoBig iframe {width: calc(100% - 36px);height: 234px;margin: 0 auto 70px;} #videoFlex {display: block;width: 100%;margin-bottom: 0;} #videoFlex iframe {width: calc(100% - 36px);height: 234px;margin: 0 auto 21px;} #videoFlex h2 {padding: 0 18px;margin-bottom: 50px;font-size: 20px;} .guides .grid4col {display: block;padding-left: 18px;padding-right: 18px;width: 100%;} .guide {width: 100%;} .guide .illustrationGuide {width: 100%;aspect-ratio: 1;height: auto;} .guide a {width: 100%;} /*---MadBundle, Madlaser---------------------*/ #madbundleHero, #madlaserHero {display: block;padding: 90px 18px 50px;height: auto;} #madbundleHero .vert-center, #madlaserHero .vert-center {transform: none;position: static;} #madbundleHero #logoMB, #madlaserHero #logoML {height: 169px;} #logomb, #logoml {padding-left: 0;margin-bottom: 60px;} /*---MiniMad-----------------------*/ #minimadHero {display: block;height: auto;} #minimadHero .vert-center, #advertMinimad .vert-center {transform: none;position: static;top: unset;} #minimadHero .img img {width: 100%;transform: none;position: static;} #minimadHero>div:last-child {padding: 20px 18px 0;} #minimadHero a {position: fixed;z-index: 10;bottom: 0;left: 0;margin-bottom: 0;} #spec {width: 100%;padding: 0 18px;} #specTabs .content {height: 160px;gap: 20px;} .highText {padding-left: 18px;padding-right: 18px;} #advertMinimad {display: block;} #minimadtopview {width: 100%;height: 414px;} #advertText {padding: 0 36px;} #advertText h2, #advertText p {padding: 0;} #minimadExplode .pics {padding: 0 18px;} #minimadExplode .pics img {width: 100%;} #allTexts {display: none;} /*---legal, about us-----------------------*/ #legalText, .aboutusText, .madText {width: 100%;padding-left: 18px;padding-right: 18px;} #center-wrapper {padding-inline: 18px;} /*---Gallery-------------------------------*/ #gallery {padding: 30px 6%;overflow: hidden;} #gallery li {float: left;margin: 2px;} #gallery li img {cursor: pointer;display: block;width: 100%;} #swiperGallery {position: fixed;width: 100%;height: 100vh;top: 0;left: 0;z-index: 20;background: linear-gradient(0deg, rgba(0, 0, 0, .95) 9%, rgba(0, 12, 14, .85) 100%);} #swiperGallery .swiper-slide {padding: 20px;} #swiperGallery .swiper-slide img {height: calc(100% - 140px);width: auto;position: relative;left: 50%;transform: translate(-50%, 0);margin-bottom: 20px;box-shadow: 0px 0px 30px rgba(0, 0, 0, .1);} #swiperGallery .swiper-slide .text-item {color: #fff;padding: 0 15%;} #swiperGallery .swiper-slide .text-item h3 {font-family: 'Mont-SemiBold';font-size: 20px;margin-bottom: 10px;} #swiperGallery .swiper-slide .text-item .text {margin-bottom: 10px;} #swiperGallery .swiper-slide .text-item a {color: var(--blue-mm);} .swiper-button-prev {color: var(--blue-mm)} .swiper-button-next {color: var(--blue-mm)} .swiper-button-close {position: absolute;top: 10px;right: 10px;z-index: 1;width: 22px;height: 22px;background: url('../images/swiper-close.svg') center center / cover no-repeat;cursor: pointer;} /*---Account--------------------------------*/ #accountAddress .grid {display: grid;grid-template-columns: 60% calc(40% - 12px);grid-gap: 12px;} /*---Trainers-------------------------------*/ #trainer, #trainersAndSchools, .center-wrapper {width: 100%;padding: 30px 20px 100px;} #trainersAndSchools, #user-meetup-speakers {--col-size: auto;} #madmap {display: none;} .grid3 {display: none;} #trainer-phone {display: block;} #trainer-info h2 {font-size: 50px;} #trainer-info h3 {font-size: 18px;} #trainer-info .pics {margin-top: 20px;} #trainer-intro-description {width: 100%;} .speaker {width: 100%;} /*---Definition----------------------------------------------------------------*/ .definition {padding: 30px 20px;} .definition h2 {font-size: 20px;} .definition h2 strong {font-family: 'Mont-SemiBold', sans-serif;} .definition h2 span {display: block;font-size: 14px;color: var(--grey-500);} .definition ol {width: 100%;font-size: 16px;margin: 10px 0 0 50px;list-style: numeric;} }