/* Theme Name: APEX Theme Description: APEX Theme Version: 1.0 */ /* CSS Document Reset browser default styles All Header Top menu Content block Contact Page bike Bikes list Single bike Home block Footer Bottom menu Media Queries */ @font-face {font-family: 'Averta';src: url('fonts/AvertaStd-Regular.eot');src: url('fonts/AvertaStd-Regular.eot?#iefix') format('embedded-opentype'), url('fonts/AvertaStd-Regular.woff2') format('woff2'), url('fonts/AvertaStd-Regular.woff') format('woff'), url('fonts/AvertaStd-Regular.ttf') format('truetype'), url('fonts/AvertaStd-Regular.svg#AvertaStd-Regular') format('svg');font-weight: 400;font-style: normal;} @font-face {font-family: 'Averta';src: url('fonts/AvertaStd-Bold.eot');src: url('fonts/AvertaStd-Bold.eot?#iefix') format('embedded-opentype'), url('fonts/AvertaStd-Bold.woff2') format('woff2'), url('fonts/AvertaStd-Bold.woff') format('woff'), url('fonts/AvertaStd-Bold.ttf') format('truetype'), url('fonts/AvertaStd-Bold.svg#AvertaStd-Bold') format('svg');font-weight: 700;font-style: normal;} @font-face {font-family: 'Averta';src: url('fonts/AvertaStd-Black.eot');src: url('fonts/AvertaStd-Black.eot?#iefix') format('embedded-opentype'), url('fonts/AvertaStd-Black.woff2') format('woff2'), url('fonts/AvertaStd-Black.woff') format('woff'), url('fonts/AvertaStd-Black.ttf') format('truetype'), url('fonts/AvertaStd-Black.svg#AvertaStd-Black') format('svg');font-weight: 900;font-style: normal;} /* Reset browser default styles */ html, body {min-height:100%;-webkit-text-size-adjust:100%;overflow-x:hidden;} body {font:25px/38px 'Muli', sans-serif;color:#000;background:#fff;} div, html, body, p, ul, ol, li, a, form, img, table, td, h1, h2, h3, h4, h5, h6, blockquote, header, section, footer, aside, nav, article, figure, figcaption, dt, dd, dl {margin:0;padding:0;} header, section, footer, aside, nav, article, figure, figcaption {display:block;} table {border-collapse:collapse;} img {border:none;max-width:100%;height:auto;} iframe, object, embed {max-width:100%;} ul, li {list-style:none;} input {vertical-align:middle;} input:focus, textarea:focus {outline:none;} button, input[type="submit"] {cursor:pointer;-webkit-appearance:none;} a, a:active, a:visited {text-decoration:none;color:#000;transition:all ease-in-out .2s;} a:hover {text-decoration:none;color:#DD093B;} /* All */ .wrapper {max-width:1280px;margin:0 auto;position:relative;box-sizing:border-box;} .alignfull {margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);max-width:100vw;} .alignwide {margin-left:calc(25% - 25vw);margin-right:calc(25% - 25vw);max-width:100vw;} .hide {display:none;} /* Alignment */ .alignright img {float:right;margin:0 0 10px 10px;} .alignleft img {float:left;margin:0 10px 10px 0;} .aligncenter {text-align:center;} /* Posts navigation */ .posts_navigation {display:flex;flex-wrap:wrap;justify-content:space-between;} /* Data cover */ .cover {display:none;} *[data-cover] {min-height:200px;background:url(images/blank.gif) center center/cover no-repeat;} *[data-cover-srcset] {min-height:200px;position:relative;} *[data-cover-srcset] img[srcset] {position:absolute;top:0;left:0;object-fit:cover;height:100%;width:100%;} .page-id-27 .cover{ object-fit:cover; } /* Responsive video */ .video_wrap {position:relative;padding:0 0 56.25% 0;height:0;} .video_wrap iframe {position:absolute;top:0;left:0;width:100%;height:100%;} /* Typography */ h1 {font:900 91px/90px 'Averta';text-transform:uppercase;padding-bottom:30px;} h2 {font:900 81px 'Averta';text-transform:uppercase;padding-bottom:40px;} h3 {font:900 70px/60px 'Averta';text-transform:uppercase;padding-bottom:35px;} h4 {font:900 40px 'Averta';text-transform:uppercase;padding-bottom:25px;} h5 {font:900 33px 'Averta';text-transform:uppercase;padding-bottom:20px;} h6 {font:600 25px 'Averta';padding-bottom:30px;} p {padding-bottom:40px;} /* Form */ input[type="text"], input[type="email"] {font:300 12px 'Muli', sans-serif;color:#B2B2B2;border:1px solid #fff;background:none;border-radius:0;padding:0 15px;height:42px;width:100%;box-sizing:border-box;} .searchform > div {display:flex;flex-wrap:wrap;align-items:center;} .searchform label {display:block;min-width:100%;} .searchform input[type="text"] {flex:1;margin-right:20px;} /* Buttons */ .wp-block-button {display:inline;} .button, .button:visited, .wp-block-button__link, .wp-block-button__link:visited, .searchform input[type="submit"] {color:#000;padding:5px 0;font:italic 700 24px 'Muli';text-transform:uppercase;border:none;border-bottom:2px solid rgba(0,0,0,.5);border-radius:0;background:none;height:auto;text-align:center;display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;box-sizing:border-box;transition:all ease-in-out .2s;position:relative;} .button:hover, .wp-block-button__link:hover, .searchform input[type="submit"]:hover {color:#000;border-bottom-color:#000;} .button:after, .wp-block-button__link:after, .searchform input[type="submit"]:after {content:'';display:block;opacity:0;width:100%;height:2px;background:#000;position:absolute;top:calc(100% + 2px);left:0;transition:all ease-in-out .2s;} .button:hover:after, .wp-block-button__link:hover:after, .searchform input[type="submit"]:hover:after {opacity:1;} .is-style-outline .wp-block-button__link, .is-style-outline .wp-block-button__link:visited {color:#4e88aa;background:#fff;} .is-style-outline .wp-block-button__link:hover {color:#4e99aa;background:#fff;} /* Main Colors */ .has-primary-color-color {color:#DD093B;} .has-primary-color2-color {color:#1D96C2;} .has-primary-color3-color {color:#FF4747;} .has-primary-color4-color {color:#8F9A53;} .has-primary-color5-color {color:#002AD4;} .has-primary-color-background-color {background-color:#DD093B;} .has-primary-color2-background-color {background-color:#1D96C2;} .has-primary-color3-background-color {background-color:#FF4747;} .has-primary-color4-background-color {background-color:#8F9A53;} .has-primary-color5-background-color {background-color:#002AD4;} /* Header */ .header {position:absolute;top:0;left:0;width:100%;z-index:999;padding-top:45px;opacity:0;margin-top:-30px;transition:all ease-in-out 1s;} .start .header {opacity:1;margin-top:0;} .logged-in .header {top:32px;} .header .wrapper {display:flex;max-width:1520px;} .header .logo {display:inline-block;width:100%;max-width:465px;margin-right:7%;} .header .logo svg {width:100%;} .header .logo .st0 {fill:#fff;} .header .wpml-ls {width:30px;margin:3px 0 0 25px;} .header .wpml-ls > ul > li > a, .header .wpml-ls > ul > li > a:hover, .header .wpml-ls > ul > li:hover > a {padding:0;border:none;background:url(images/icons/globe.png) center center no-repeat;background-size:25px auto;font-size:0;line-height:0;display:block;width:30px;height:30px;} .header .wpml-ls > ul > li > a img, .header .wpml-ls > ul > li > a span, .header .wpml-ls > ul > li > a:after {display:none;} .header .wpml-ls > ul > li > a img {position: absolute;top: 40px;right: 3px;border: 2px solid white;} .header .wpml-ls > ul > li:hover > a img {display:block} .header .wpml-ls > ul > li > ul {border:none;min-width:40px;left:auto;margin-right:-5px;padding-top:18px;} .header .wpml-ls > ul > li > ul li {padding:0 0 5px 0;} .header .wpml-ls > ul > li > ul li a {padding:5px 10px;background:none;border:none;color:#fff;} .header .wpml-ls > ul > li > ul li img {} .header .wpml-ls > ul > li > ul li span {margin:0;} .header .wpml-ls-link {transition:none !important;} .header .wpml-ls-legacy-dropdown .wpml-ls-flag {width: 20px;height: 12px;} /* Top menu */ .menu_trigger {position:absolute;top:10px;right:10px;width:28px;height:22px;z-index:999;transform:rotate(0deg);transition:all ease-in-out 0.5s;cursor:pointer;display:none;} .menu_trigger span {display:block;position:absolute;height:4px;width:100%;background:white !important;border-radius:0px;opacity:1;left:0;transition:all ease-in-out 0.25s;} .menu_trigger span:nth-child(1) {top:0px;} .menu_trigger span:nth-child(2), .menu_trigger span:nth-child(3) {top:9px;} .menu_trigger span:nth-child(4) {top:18px;} .menu_trigger.active span:nth-child(1), .menu_trigger.active span:nth-child(4) {transform:scale(0, 0);} .menu_trigger.active span:nth-child(2) {transform:rotate(45deg);} .menu_trigger.active span:nth-child(3) {transform:rotate(-45deg);} .close_mobile_menu {opacity:0;position:fixed;top:0;left:100%;z-index:998;width:20%;height:100%;background:rgba(0,0,0,.4);transition:opacity ease-in-out .3s .3s;will-change:transform, opacity;} .close_mobile_menu.active {transform:translateX(-100%);opacity:1;} .header nav {flex:1;} .header nav ul {display:flex;justify-content:space-between;} .header nav ul li {font-weight:700;font-size:23px;text-transform:uppercase;white-space:nowrap;padding-left:15px;} .header nav ul li:first-child {padding-left:0;} .header nav ul li a, .header nav ul li a:visited {color:#fff;position:relative;} .header nav ul li a:hover {color:#fff;} .header nav ul li a:after {content:'';display:block;width:0;height:2px;background:#fff;transition:width .3s;} .header nav ul li a:hover:after {width:100%;} /* Heading */ .heading {min-height: 100vh /*calc(100vh + 170px)*/;padding:18% 0 300px 0;box-sizing:border-box;background-color:#1f1c1c;position:relative;overflow:hidden;} .heading:before {content:'';display:block;width:100%;height:170px;position:absolute;bottom:0;left:0;z-index:5;background:linear-gradient(to bottom, rgba(255,255,255,.0) 0%, #fff 100%);} .heading .wrapper {z-index:5;color:#fff;max-width:100%;margin-left:0;display:flex;} .heading .wrapper > div {padding:65px 20px 30px 70px;max-width:715px;box-sizing:border-box;} .heading .wrapper.right {justify-content:flex-end;} .heading .wrapper.right > div {padding-left:40px;} .heading .wrapper .bg {position:absolute;top:0;left:0;width:100%;height:100%;opacity:.5;z-index:1;} .heading .wrapper > div * {transform:translateX(-120%);transition:all ease-in-out 1s .3s;} .heading .wrapper.right > div * {transform:translateX(120%);} .heading .wrapper .bg {transition:all ease-in-out 1.2s;} .start .heading .wrapper > div * {transform:translateX(0%);} .heading .wrapper * {position:relative;z-index:2;} .heading .secondary_image {position:absolute;bottom:235px;left:70px;z-index:6;display:block;max-width:290px;opacity:0;margin-bottom:-30px;transition:all ease-in-out .8s;} .start .heading .secondary_image {margin-bottom:0;opacity:1;} .heading .center_animate {position:absolute;bottom:-20px;left:50%;display:block;text-align:center;margin-left:-325px;max-width:650px;opacity:0;transform:scale(0);transition:all ease-in-out 1.5s;} .start .heading .center_animate {opacity:1;transform:scale(1);} .heading [data-slide], .heading [single-slide] {opacity:0;display:block;width:52px;height:20px;position:absolute;bottom:235px;left:calc(50% - 25px);z-index:7;background:url(images/icons/arrow_down.svg) center center no-repeat;background-size:52px auto;cursor:pointer;animation:arrow_move 1.5s infinite;transition:all ease-in-out .7s;} .start .heading [data-slide], .start .heading [single-slide] {opacity:1;} @keyframes arrow_move {0% {margin-bottom:0;} 50% {margin-bottom:-10px;} 100% {margin-bottom:0;}} .home .heading {padding:8% 0 2% 0;} .home .heading:before {display:none;} .home .heading .wrapper > div {padding:25px 130px 0px 20px;max-width:970px;text-align:right;} .home .heading [data-slide] {bottom:70px;} .heading .home_bike {display:block;margin:-100px 0 0 -12%;width:1000px;} .home .heading .wrapper.right > div {padding:25px 20px 10px 50px;text-align:left;} .heading .right .home_bike {margin:-100px -12% 0 0;} .heading .heading_link {width:273px;height:67px;border-bottom:20px solid #000;background:#000;position:absolute;top:0;right:0;z-index:20;color:#fff;font:700 20px 'Averta';text-transform:uppercase;display:flex;align-items:center;justify-content:center;transform-origin:top right;transform:translateX(-67px) rotate(-90deg);transition:all ease-in-out .4s;} .heading .heading_link:hover {right:20px;} .heading .active .heading_link, .heading .active .heading_link:hover {right:100%;z-index:10;transition:all ease-in-out 1s;} .heading .wrapper:before {content:'';display:block;width:100vw;height:100vh;position:fixed;top:0;right:-100vw;z-index:10;background:#000;transition:all ease-in-out 1s;} .heading .active:before {right:0;} .heading .offset {position:absolute;top:-9999px;left:-9999px;width:1px;height:450px;} /* Content block */ .content_block {padding:120px 0;} .content_block article > ul, .content_block article > ol {margin-bottom:20px;} .content_block article > ul li {margin-left:17px;list-style-type:disc;} .content_block article > ol li {margin-left:17px;list-style-type:decimal;} .content_block blockquote {padding-left:40px;border-left:4px solid #666;margin-bottom:25px;} .has-drop-cap:not(:focus):first-letter {float:none;font:900 25px 'Averta';} .has-drop-cap strong {font:900 25px 'Averta';color:#DD093B;} /* Group block */ .wp-block-group {max-width:925px;margin:0 auto 130px auto;box-shadow:rgba(0,0,0,.29) 0px 3px 6px 0;padding:45px 50px 35px 50px;box-sizing:border-box;position:relative;top:30px;opacity:0;z-index:10;background:#fff;transition:all ease-in-out .6s;} .wp-block-group:last-of-type {margin-bottom:0;} .wp-block-group.in-view {top:0;opacity:1;} .wp-block-group .wp-block-columns {margin-bottom:0;} .group_bg {width:300vw;height:600px;background:#000;position:relative;top:0;left:-100vw;z-index:-1;margin:-365px 0 -235px 0;opacity:.63;} /* Image block */ .wp-block-image.alignfull {margin-bottom:0;} .wp-block-image.alignfull + .wp-block-group {margin-top:-100px;} .single .wp-block-image {font-size:0;line-height:0;} /* Cover block */ .wp-block-cover {width:auto;margin-bottom:0;} .wp-block-cover .wp-block-cover__inner-container {width:525px;padding:130px 0 95px 0;margin-right:calc(-50% + 200px);} .wp-block-cover .wp-block-cover__inner-container p strong {font-weight:900;color:#002ad4;} .wp-block-cover .wp-block-button__link, .wp-block-cover .wp-block-button__link:visited {color:#fff;border-bottom-color:#081866;} .wp-block-cover .wp-block-button__link:after {background:#081866;} .wp-block-cover .wp-block-cover__inner-container > * {position:relative;top:-30px;opacity:0;transition:all ease-in-out .8s;} .wp-block-cover .wp-block-cover__inner-container > .wp-block-button {top:0;} .wp-block-cover.in-view .wp-block-cover__inner-container > * {top:0;opacity:1;} /* Video block */ .wp-block-video {font-size:0;line-height:0;/*padding:200px 0*/;position:relative;} /*.wp-block-video:before {content:'';display:block;width:100%;height:300px;position:absolute;top:195px;left:0;z-index:5;background:linear-gradient(to bottom, #fff 0%, rgba(255,255,255,.0) 100%);}*/ /*.wp-block-video:after {content:'';display:block;width:100%;height:300px;position:absolute;bottom:195px;left:0;z-index:5;background:linear-gradient(to bottom, rgba(255,255,255,.0) 0%, #fff 100%);}*/ .wp-block-video video {min-width:100%;} .wp-block-video.desktop, .wp-block-image.desktop {display:block;} .wp-block-video.mobile, .wp-block-image.mobile {display:none;} /* Single iframe */ .content_block > iframe {border:none;width:100%;min-height:100vh;} /* Contact */ .page-contact .content_block p {padding-bottom:30px;} .page-contact .content_block ul {display:flex;font-size:0;line-height:0;margin-top:-20px;} .page-contact .content_block ul li {padding:0 25px 25px 0;} .page-contact .content_block ul li a {display:block;width:46px;height:46px;border-radius:50%;background:#DD093B url(images/blank.gif) center center no-repeat;} .page-contact .content_block ul li a:hover {background-color:#FF4747;} .page-contact .content_block ul li a[href*="facebook"] {background-image:url(images/icons/facebook.svg);} .page-contact .content_block ul li a[href*="twitter"] {background-image:url(images/icons/twitter.svg);} .page-contact .content_block ul li a[href*="instagram"] {background-image:url(images/icons/instagram.svg);} .page-contact .content_block ul li a[href*="youtube"] {background-image:url(images/icons/youtube.png);background-size: 63%;} .map_block {border-bottom:135px solid #ea6483;margin-top:-345px;} .acf-map {min-height:970px;position:relative;} .acf-map img {max-width:inherit !important;} /* Page bikes */ .page-bikes .heading {min-height:100vh;padding-bottom:100px;} .page-bikes .heading:before {display:none;} .page-bikes .heading .wrapper .bg {opacity:.8;} .page-bikes .heading .wrapper > div * {color:#000;} .page-bikes .heading [data-slide] {bottom:65px;} .page-bikes .bikes_categories ul li {overflow:hidden;background:#616161;position:relative;font-size:0;line-height:0;} .bikes_categories ul li a {display:block;} .bikes_categories ul li span {width:273px;height:67px;border-bottom:20px solid #000;background:#000;position:absolute;top:50%;right:0;color:#fff;font:700 20px 'Averta';text-transform:uppercase;display:flex;align-items:center;justify-content:center;transform:translate(-67px, -136px) rotate(-90deg);transform-origin:top right;transition:all ease-in-out .4s;} .bikes_categories ul li a:hover span {right:20px;} .bikes_categories ul li.active span, .bikes_categories ul li.active a:hover span {right:100%;z-index:10;transition:all ease-in-out 1s;} .bikes_categories ul li img {min-height:700px;object-fit:cover;transition:all ease-in-out .4s;} .bikes_categories ul li a:hover img {transform:scale(1.1);} .bikes_categories ul li:before {content:'';display:block;width:100vw;height:100vh;position:fixed;top:0;right:-100vw;z-index:10;background:#000;transition:all ease-in-out 1s;} .bikes_categories ul li.active:before {right:0;} /* Bikes list */ .tax-bikes_categories .heading {min-height:100vh;padding-bottom:100px;} .tax-bikes_categories .heading:before {display:none;} .tax-bikes_categories .heading [data-slide] {bottom:65px;} .bikes_list article {position:relative;min-height:700px;overflow:hidden;display:flex;align-items:center;justify-content:center;} .bikes_list article .link {font-size:0;line-height:0;display:block;width:100%;height:100%;position:absolute;top:0;left:0;z-index:2;} .bikes_list article .side_text {width:273px;height:67px;border-bottom:20px solid #000;background:#000;position:absolute;top:50%;color:#fff;font:700 20px 'Averta';text-transform:uppercase;display:flex;align-items:center;justify-content:center;transition:all ease-in-out .4s;} .bikes_list article:nth-of-type(odd) .side_text {right:0;transform-origin:top right;transform:translate(-67px, -136px) rotate(-90deg);} .bikes_list article:nth-of-type(odd):hover .side_text {right:20px;} .bikes_list article:nth-of-type(even) .side_text {left:0;transform-origin:top left;transform:translate(67px, -136px) rotate(90deg);} .bikes_list article:nth-of-type(even):hover .side_text {left:20px;} .bikes_list article figure {padding:30px 100px 15px 100px;display:flex;align-items:center;} .bikes_list article:nth-of-type(even) figure {justify-content:flex-end;} .bikes_list article:nth-of-type(even) figure figcaption {order:-1;} .bikes_list article figure > div {flex:1;max-width:1100px;min-width:60%;} .bikes_list article figure > div img {transition:all ease-in-out .4s;} .bikes_list article:hover figure > div img {transform:scale(1.05);} .bikes_list article figure figcaption {text-align:center;color:#fff;max-width:480px;position:relative;z-index:1;} .bikes_list article figure figcaption img {max-height:30px;width:auto;} .bikes_list article figure figcaption p {padding-bottom:0;} .bikes_list article.active .side_text, .bikes_list article.active:hover .side_text {z-index:10;transition:all ease-in-out 1s;} .bikes_list article.active:nth-of-type(even) .side_text, .bikes_list article.active:nth-of-type(even):hover .side_text {left:100%;} .bikes_list article.active:nth-of-type(odd) .side_text, .bikes_list article.active:nth-of-type(odd):hover .side_text {right:100%;} .bikes_list article:before {content:'';display:block;width:100vw;height:100vh;position:fixed;top:0;z-index:10;background:#000;transition:all ease-in-out 1s;} .bikes_list article:nth-of-type(even):before {left:-100vw;} .bikes_list article.active:nth-of-type(even):before {left:0;} .bikes_list article:nth-of-type(odd):before {right:-100vw;} .bikes_list article.active:nth-of-type(odd):before {right:0;} /* Single bike */ .stats_block {padding-top:180px;position:relative;} .stats_block h2 {text-align:center;} .stats_block .content {max-width:825px;margin:0 auto;} .stats_block .bike {position:absolute;top:200px;left:0;width:100%;z-index:5;transform:translateY(-100%);} .stats_block .bike.click {z-index:10;} .stats_block .bike img {max-height:690px;transform:translateX(-100%);} .stats_block .stats {margin:35px 0 120px 0;} .stats_block .stats li {display:flex;align-items:center;padding:2px 0;} .stats_block .stats li label {width:315px;} .stats_block .stats li div {background:#E8E8E8;height:17px;flex:1;position:relative;overflow:hidden;} .stats_block .stats li div span {position:absolute;top:0;left:0;display:block;width:0;height:100%;background:#A2A2A2;transform:translateX(-100%);transition:all ease-in-out .5s .3s;} .stats_block .stats.in-view li div span {transform:translateX(0);} /*Customize block*/ .customize_block_ani, .customize_block_ani .customize_block_ani_vid {width: 50vw; height: 50vw; margin-top: 5vh; display: inline-block;} .customize_block {width: 40vw; padding: 3vw; display: inline-block; padding-bottom: 10vw; vertical-align: top; margin-top: 5vh; } .customize_block p {width: 50%;} .fancybox-slide--iframe .fancybox-close-small{color: black; width:2vw; height: 2vw; margin-right:2vw; margin-top:1vw;} .fancybox-slide--iframe .fancybox-close-small:hover{color: grey; width:2vw; height: 2vw; margin-right:2vw; margin-top:1vw;} .fancybox-slide { transform: translate(0,0) !important;} /* Slider */ .slider {background:#000;position:relative;padding:160px 0 250px 0;} .slider:before, .slider:after {content:'';display:block;width:100vw;height:100%;position:absolute;top:0;left:100%;background:#000;} .slider:before {left:auto;right:100%;} .slider {max-width:1310px;margin:0 auto;} .slider .swiper-container {overflow:visible;} .slider .swiper-wrapper {display:flex;} .slider .swiper-slide {flex:0 0 546px;} .slider .swiper-slide a {display:block;width:100%;min-height:546px;position:relative;} .slider .swiper-slide a span {opacity:0;position:absolute;bottom:0;left:0;width:100%;height:100%;padding:0 10px 20px 10px;box-sizing:border-box;display:flex;align-items:flex-end;justify-content:center;text-align:center;text-transform:uppercase;color:#fff;background:linear-gradient(to bottom, rgba(0,0,0,.0) 0%, rgba(0,0,0,.0) 37%, #000 100%);transition:all ease-in-out .3s;} .slider .swiper-slide a:hover span {opacity:1;} .swiper-scrollbar {left:0;bottom:-100px !important;z-index:50;height:5px;width:100%;box-sizing:border-box;position:relative;-ms-touch-action:none;background:#fff;border-radius:0;} .swiper-scrollbar-drag {cursor:grab;border-radius:0;background:#aaa;} /* Home block */ .cm_block > figure {display:flex;align-items:center;} .cm_block > figure > div {flex:1 0 50%;min-height:700px;background:#000;position:relative;overflow:hidden;} .cm_block > figure > div .bike {position:absolute;top:0;left:0;width:100%;height:100%;display:flex;align-items:flex-end;justify-content:center;opacity:0;transition:all ease-in-out .8s .3s;font-size:0;line-height:0;} .cm_block > figure > div .bike.scale {transform:scale(0);} .cm_block > figure > div .link {width:100%;height:100%;display:block;position:absolute;top:0;left:0;z-index:10;font-size:0;line-height:0;} .cm_block > figure > div .name {width:273px;height:67px;background:#000;position:absolute;top:50%;color:#fff;font:700 20px 'Averta';text-transform:uppercase;display:flex;align-items:center;justify-content:center;transition:all ease-in-out 1.1s;} .cm_block > figure.left > div .name {right:-100%;transform:translate(-67px, -136px) rotate(-90deg);transform-origin:top right;} .cm_block > figure.right > div .name {left:-100%;transform-origin:top left;transform:translate(67px, -136px) rotate(90deg);} .cm_block > figure > div .bike_logo {position:absolute;bottom:70px;right:70px;max-width:300px;z-index:1;opacity:0;transition:all ease-in-out .8s;} .cm_block > figure.right > div .bike_logo {right:auto;left:70px;} .cm_block > figure > figcaption {flex:1 0 50%;order:-1;padding:50px 6%;box-sizing:border-box;} .cm_block > figure.right > figcaption {order:1;} .cm_block > figure > figcaption > * {max-width:550px;top:-30px;opacity:0;position:relative;transition:all ease-in-out .8s;} .cm_block > figure > figcaption > .button {top:0;} .cm_block.in-view > figure > div .bike, .cm_block.in-view > figure > div .bike_logo {opacity:1;} .cm_block.in-view > figure > div .bike.scale {transform:scale(1);} .cm_block.in-view > figure > figcaption > * {top:0;opacity:1;} .cm_block.in-view > figure.left > div .name {right:0;} .cm_block.in-view > figure.right > div .name {left:0;} .custom_riders {padding:130px 0 60px 0;} .custom_riders h3 {max-width:470px;padding:0 0 70px 130px;} .custom_riders li figure {display:none;} .custom_riders .bx-viewport li figure {display:block;} .custom_riders li {padding-left:30px;} .custom_riders li figure {min-height:350px;position:relative;} .custom_riders li figure .link {position:absolute;right:0;top:0;z-index:5;display:block;width:100%;height:100%;} .custom_riders li figure .bike {opacity:1;position:absolute;right:0;top:50%;transform:translateY(-50%);transition:all ease-in-out .4s;} .custom_riders li figure:hover .bike {opacity:0;} .custom_riders li figure .bike img {min-width:calc(100% + 30px);position:relative;right:30px;} .custom_riders li figure .logo {width:121px;height:38px;background:#000;position:absolute;bottom:60px;right:0;color:#fff;font:700 20px 'Averta';text-transform:uppercase;transform:translate(-38px, -60px) rotate(-90deg);transform-origin:top right;display:flex;align-items:center;justify-content:center;transition:all ease-in-out 1.1s;} .custom_riders li figure .logo img {max-width:100px;} .custom_riders li figure .name {position:absolute;bottom:0;left:calc(50% - 79px);width:158px;height:38px;background:#000;font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;color:#fff;box-sizing:border-box;padding:5px;text-transform:uppercase;z-index:2;} .custom_riders li figure figcaption {overflow:hidden;background:#000;position:absolute;top:100%;left:0;color:#fff;width:100%;height:100%;padding:10px;box-sizing:border-box;text-align:center;overflow:hidden;display:flex;align-items:center;justify-content:center;transition:all ease-in-out .4s;} .custom_riders li figure:hover figcaption {top:0;} .custom_riders li figure figcaption > div > p {font:19px 'Averta';} .custom_riders li figure figcaption > div blockquote {font:700 25px 'Averta';} .custom_riders li figure figcaption > div blockquote p:first-of-type:before {content:'“';font:italic 35px/15px Arial;padding-right:3px;} .custom_riders li figure figcaption > div blockquote p:last-of-type:after {content:'”';font:italic 35px/15px Arial;padding-left:3px;} .custom_riders .bx-controls-direction {display:flex;justify-content:center;align-items:center;padding:40px 0 0 25px;text-align:center;} .custom_riders .bx-prev, .custom_riders .bx-next {display:block;width:11px;height:11px;border-right:5px solid #C2C2C2;border-bottom:5px solid #C2C2C2;font-size:0;line-height:0;transform:rotate(135deg);margin:0 15px;} .custom_riders .bx-next {transform:rotate(-45deg);} /* Footer */ .prefooter .widget:nth-child(5){ padding:0 0 20px 0!important; } .prefooter {background:#000;color:#fff;font-size:12px;line-height:21px;font-weight:300;} .prefooter .wrapper {display:flex;flex-wrap:wrap;justify-content:space-between;padding-top:40px;max-width:445px;} .gform_ajax_spinner, .gform_wrapper .validation_error {display:none !important;} .gform_confirmation_message {font-size:14px;padding-bottom:35px;} .prefooter .gform_wrapper form {display:flex;flex-wrap:wrap;align-items:center;position:relative;margin-bottom:60px;} .prefooter .gform_wrapper .gform_heading {min-width:100%;text-align:center;margin-bottom:15px;} .prefooter .gform_wrapper .gform_heading h3 {font-size:30px;line-height:40px;padding-bottom:0;} .prefooter .gform_wrapper .gform_heading .gform_description {font-size:20px;text-transform:uppercase;} .prefooter .gform_wrapper .gform_body {flex:1;} .prefooter .gform_wrapper .gform_body li label {display:none;} .prefooter .gform_wrapper .gform_body ul li {position:relative;} .prefooter .gform_wrapper .gform_body ul li .validation_message {position:absolute;bottom:-30px;left:15px;z-index:2;font-size:12px;} .prefooter .gform_wrapper .gform_footer .button, .prefooter .gform_wrapper .gform_footer .button:visited {background:url(/wp-content/uploads/2020/03/next_white.svg) center center no-repeat;background-size:8px auto;padding:0;min-width:42px;height:42px;font-size:0;line-height:0;border:none;border:1px solid #fff;border-left:0;} .prefooter .widget {padding:0 10px 40px 10px;text-align:center;flex:1;} .prefooter .widget h6 {padding-bottom:10px;color:#B2B2B2;font:900 13px 'Averta';text-transform:uppercase;} .prefooter .gform_widget {padding:0;min-width:100%;} .prefooter .widget_nav_menu ul li {text-transform:uppercase;} .prefooter .widget_nav_menu:last-of-type {min-width:100%;padding-bottom:55px;} .prefooter .menu-social-menu-container ul, .prefooter .menu-social-menu-nl-container ul {display:flex;justify-content:center;align-items:center;font-size:0;line-height:0;} .prefooter .menu-social-menu-container ul li, .prefooter .menu-social-menu-nl-container ul li {padding:0 23px;} .prefooter .menu-social-menu-container ul li a, .prefooter .menu-social-menu-nl-container ul li a {display:block;width:20px;height:17px;background:url(images/blank.gif) center center no-repeat;background-size:auto 17px;opacity:1;transition:opacity ease-in-out .3s;} .prefooter .menu-social-menu-container ul li a:hover, .prefooter .menu-social-menu-nl-container ul li a:hover {opacity:.8;} .prefooter .menu-social-menu-container ul li a[href*="facebook"],.prefooter .menu-social-menu-nl-container ul li a[href*="facebook"] {background-image:url(images/icons/facebook.png);} .prefooter .menu-social-menu-container ul li a[href*="instagram"], .prefooter .menu-social-menu-nl-container ul li a[href*="instagram"] {background-image:url(images/icons/instagram.png);} .prefooter .menu-social-menu-container ul li a[href*="youtube"], .prefooter .menu-social-menu-nl-container ul li a[href*="youtube"] {background-image:url(images/icons/youtube.png);;background-size:auto 14px;} .footer {background:#000;color:#B2B2B2;border-top:1px solid #707070;padding:30px 0;text-align:right;font-size:12px;font-weight:300;} .footer .wrapper #footerImg {padding-left:190px;max-width:825px;background:url(images/logo.svg) left center no-repeat;background-size:180px auto; float: left; min-height: 20px; margin-left: 15%;} #footerCoers{margin-right: 8%;} @media only screen and (max-width: 625px){ #footerImg{ margin-left: 24% !important; margin-right: 28%; } } .footer a, .footer a:visited, .prefooter a, .prefooter a:visited {color:#B2B2B2;} .footer a:hover, .prefooter a:hover {color:#fff;} #gform_submit_button_1:hover {background-color:white;background-image: url(/wp-content/uploads/2020/03/next.svg);} #gform_submit_button_2:hover {background-color:white;background-image: url(/wp-content/uploads/2020/03/next.svg);} /*CONFIRMATION TEXT EDIT*/ .gform_confirmation_message_1{ font:900 30px 'Averta';text-transform:uppercase;padding-bottom:35px; } .gform_confirmation_message_2{ font:900 30px 'Averta';text-transform:uppercase;padding-bottom:35px; } /*EDITS FOR PAGES*/ .page-id-3 h2, .page-id-457 h2, .page-id-6 h2, .page-id-932 h2, .page-id-938 h2, .page-id-949 h2, .page-id-950 h2, .page-id-563 h2{ font-size: 40px; } .page-id-3 h3, .page-id-457 h3, .page-id-6 h3, .page-id-932 h3, .page-id-938 h3, .page-id-949 h3, .page-id-950 h3, .page-id-563 h3{ font-size: 30px; } .page-id-3 .heading, .page-id-457 .heading, .page-id-6 .heading, .page-id-932 .heading, .page-id-938 .heading, .page-id-949 .heading, .page-id-950 .heading, .page-id-563 .heading{ display: none; } .page-id-3 .header, .page-id-457 .header, .page-id-6 .header, .page-id-932 .header, .page-id-938 .header, .page-id-949 .header, .page-id-950 .header, .page-id-563 .header{ background-color: #1f1c1c; } .page-id-3 .header, .page-id-457 .header, .page-id-6 .header, .page-id-932 .header, .page-id-938 .header, .page-id-949 .header, .page-id-950 .header, .page-id-563 .header{ padding-bottom: 45px; } .page-id-3 .content_block, .page-id-457 .content_block, .page-id-6 .content_block, .page-id-932 .content_block, .page-id-938 .content_block, .page-id-949 .content_block, .page-id-950 .content_block, .page-id-563 .content_block{ padding-top: 200px; } /* fancy */ .fancybox-close-small{top: 0px;} .customizerdesktop{display: inline;} .customizermobile{display: none;} /* Media Queries */ /* Desktop */ @media only screen and (min-width: 960px) and (max-width: 1279px) { .wrapper {max-width:960px;} /* Home block */ .cm_block > figure > figcaption > h3 {font-size:60px;} } @media only screen and (min-width:959px) { .header .wpml-ls-menu-item {display:none;visibility:hidden;} .header ul.menu .logo {display:none;visibility:hidden;} } /* Tablets and mobiles */ @media only screen and (max-width: 959px) { .wrapper {padding:0 10px;} /* Typography */ h1 {font-size:70px;line-height:70px;} h2 {font-size:60px;line-height:60px;padding-bottom:30px;} h3 {font-size:50px;line-height:50px;} p {padding-bottom:30px;} /* Header */ .header {padding-top:30px;} .header .logo {max-width:200px;margin-right:0;} .header .wpml-ls {margin:0;position:absolute;top:6px;right:55px;} /* Top menu */ .menu_trigger {display:block;} .header nav {position:fixed;top:0;right:100%;width:80%;height:100%;overflow:auto;background:black;padding:30px 10px;z-index:999;box-sizing:border-box;transition:transform ease-in-out .3s;will-change:transform;} .header nav.active {transform:translateX(100%);} .header nav ul {display:block;} .header nav ul li {font-size:20px;white-space:wrap;padding:5px 30px;} .header nav ul li a, .header nav ul li a:visited {display:inline-block;} .header nav ul li:first-child {padding-left:30px;} .header .wpml-ls-menu-item {display:inline-block;padding:0;margin-top:50px;} .header .wpml-ls-first-item{padding-left:30px;padding-right:10px;} .header .wpml-ls-menu-item .wpml-ls-flag {width: 23px;height: 17px;} .header .wpml-ls {display:none;visibility:hidden;} /* Heading */ .heading {min-height:calc(100vh + 70px);padding:120px 0 250px 0;} .heading:before {height:70px;} .heading .wrapper > div {margin-left:-10px;padding-left:10px;max-width:620px;} .heading .wrapper.right > div {margin-left:0;margin-right:-10px;padding-left:20px;} .heading .secondary_image {bottom:205px;left:10px;} .heading .center_animate {margin-left:-225px;max-width:450px;} .heading [data-slide], .heading [single-slide] {bottom:165px;} .home .heading {min-height:100vh;padding-top:120px;} .home .heading .wrapper > div {padding:25px 10px 10px 10px;max-width:620px;} .heading .home_bike {margin:-10% 0 0 -10%;width:100%;} .home .heading .wrapper.right > div {padding:25px 10px 10px 10px;} .heading .right .home_bike {margin:-10% -10% 0 0;} /* Content block */ .content_block {padding:70px 0;} /* Group block */ .wp-block-group {padding:25px 30px;margin-bottom:60px;} /* Video block */ /*.wp-block-video {padding:60px 0;}*/ .wp-block-video:before {height:15%;top:55px;} .wp-block-video:after {height:15%;bottom:55px;} /* Contact */ .page-contact .content_block p {padding-bottom:30px;} .page-contact .content_block ul {display:flex;font-size:0;line-height:0;margin-top:-20px;} .page-contact .content_block ul li {padding:0 25px 25px 0;} .page-contact .content_block ul li a {display:block;width:46px;height:46px;border-radius:50%;background:#DD093B url(images/blank.gif) center center no-repeat;} .page-contact .content_block ul li a:hover {background-color:#FF4747;} .page-contact .content_block ul li a[href*="facebook"] {background-image:url(images/icons/facebook.svg);} .page-contact .content_block ul li a[href*="twitter"] {background-image:url(images/icons/twitter.svg);} .page-contact .content_block ul li a[href*="instagram"] {background-image:url(images/icons/instagram.svg);} .page-contact .content_block ul li a[href*="youtube"] {background-image:url(images/icons/youtube.png);} .map_block {border-bottom-width:60px;margin-top:-50px;} .acf-map {min-height:500px;} /* Page bikes */ .bikes_categories ul li img {min-height:550px;} /* Bikes list */ .bikes_list article {min-height:350px;} .bikes_list article figure {padding-left:15px;display:block;} .bikes_list article:nth-of-type(even) figure {padding-left:100px;padding-right:15px;} .bikes_list article figure > div {margin-bottom:10px;} .bikes_list article figure figcaption {margin:0 auto;} /* Single bike */ .stats_block {padding-top:90px;} .stats_block .bike {top:100px;} .stats_block .bike img {max-height:490px;} .stats_block .content {padding:0 20px;} .stats_block .stats {margin-bottom:60px;} .stats_block .stats li label {width:275px;} /*Customize block*/ .customize_block_ani, .customize_block_ani .customize_block_ani_vid {width: 100vw; height: 100vw; margin-top: 5vh; display: inline-block;} .customize_block {width: 80vw; padding: 3vw; display: inline-block; padding-bottom: 10vw; vertical-align: top; margin-top: 5vh; } .customize_block p {width: 100%;} .fancybox-slide--iframe .fancybox-close-small{color: black; width:20vw; height: 20vw; margin-right:2vw; margin-top:1vw;} .fancybox-slide--iframe .fancybox-close-small:hover{color: grey; width:20vw; height: 20vw; margin-right:2vw; margin-top:1vw;} .fancybox-slide {padding:0 !important; width: 100%; height: 100%; } /* Slider */ .slider {padding:50px 0 100px 0;} .slider .swiper-slide {flex-basis:350px;} .slider .swiper-slide a {min-height:350px;} .swiper-scrollbar {bottom:-50px !important;} /* Home block */ .cm_block > figure {display:block;} .cm_block > figure > div {min-height:450px;} .cm_block > figure > div .bike_logo {bottom:30px;right:30px;} .cm_block > figure.right > div .bike_logo {right:auto;left:30px;} .cm_block > figure > figcaption {padding:30px;} /* Footer */ .footer .wrapper {background-position:10px center;} #customVideo{width:100vw !important;} .customizerdesktop{display: none;} .customizermobile{display: inline;} } /* Mobile portrait and landscape modes */ @media only screen and (max-width: 767px) { .alignright, .alignleft {float:none;margin:0 0 10px 0;} /* Typography */ body {font-size:20px;line-height:33px;} h1 {font-size:55px;line-height:55px;} h2 {font-size:50px;line-height:50px;} h3 {font-size:40px;line-height:40px;} h4 {font-size:30px;line-height:37px;} h5 {font-size:25px;line-height:32px;} h6 {font-size:22px;line-height:29px;} .button, .button:visited, .wp-block-button__link, .wp-block-button__link:visited, .searchform input[type="submit"] {font-size:20px;} /* Heading */ .heading .wrapper > div {padding:30px 10px 20px 10px;} .heading .wrapper.right > div {padding-left:10px;} .heading .center_animate {margin-left:-175px;max-width:350px;} .heading .wrapper.mobile_block {display:block;} .heading .heading_link {width:80%;height:55px;border:2px solid #fff;background:rgba(255,255,255,.4);position:relative;margin:10vh auto 0 auto;font-size:18px;transform:translateX(0) rotate(0deg);} .heading .heading_link:hover, .heading .active .heading_link, .heading .active .heading_link:hover {right:0;} .heading .wrapper:before {display:none;} .heading .offset {height:130px;} /* Content block */ .has-drop-cap:not(:focus):first-letter, .has-drop-cap strong {font-size:20px;} /* Group block */ .group_bg {height:300px;margin:-180px 0 -120px 0;} /* Image block */ .wp-block-image.alignfull + .wp-block-group {margin-top:0;} /* Cover block */ .wp-block-cover {width:auto;margin-bottom:0;} .wp-block-cover .wp-block-cover__inner-container {width:auto;padding:60px 10px;margin-right:0;} .wp-block-video.desktop, .wp-block-image.desktop {display:none;} .wp-block-video.mobile, .wp-block-image.mobile {display:block;} /* Contact */ .page-contact .content_block p {padding-bottom:15px;} .page-contact .content_block ul {margin-top:-5px;} .map_block {border-bottom-width:30px;} .acf-map {min-height:350px;} /* Page bikes */ .bikes_categories ul li img {min-height:400px;} /* Single bike */ .stats_block .bike {top:80px;} .stats_block .stats li {display:block} .stats_block .stats li label {width:auto;} /* Home block */ .cm_block > figure > div {min-height:350px;} .cm_block > figure > div .bike_logo {max-width:150px;bottom:10px;right:10px;} .cm_block > figure.right > div .bike_logo {right:auto;left:10px;} .cm_block > figure > figcaption {padding:30px 10px;} .custom_riders {padding:50px 0 40px 0;} .custom_riders h3 {padding:0 0 40px 0;} .custom_riders li {padding-right:30px;} .custom_riders li figure {max-width:416px;margin:0 auto;} .custom_riders .bx-controlfss-direction {padding-left:0;} /* Footer */ .prefooter .wrapper {max-width:100%;} .footer {padding:20px 0;text-align:center;} .footer .wrapper {padding:50px 0 0 0;background-position:center 10px;} .prefooter .gform_wrapper .gform_heading h3 {font-size:23px;} .logo {padding-top:5px;} .customizerdesktop{display: none;} .customizermobile{display: inline;} } /* test */ .half-width{ display: none; vertical-align: middle; border: 0px; } .content_block article figure:nth-of-type(3){ margin-bottom: -1px; } @media screen and (max-width: 770px){ .half-width{ display: block; max-width: none !important; } .wp-image-314{ display: none !important; } .content_block article figure:nth-of-type(3){ padding-bottom: 100%; margin-top: -1px; margin-bottom: -1px; } .content_block article figure:nth-of-type(2) img{ margin-left: -15px; width: 210%; } .content_block article figure:nth-of-type(3) img, .content_block article figure:nth-of-type(4) img{ float: right; margin-right: -3vw; width: 280%; } } .single-bikes .content_block{ padding-bottom: 0px; } /*Old cookie plugin remove*/ .cookie-notice-container{ display: none; } /* * Page Bikes (Where it shows the categories / taxonomies) */ .bikes-categories { padding: 7rem 0; } .bikes-categories__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-column-gap: 30px; grid-row-gap: 30px; } @media only screen and (max-width: 767px) { .bikes-categories__grid { grid-template-columns: repeat(1, minmax(0, 1fr)); } } .bikes-categories__item { position: relative; display: flex; } .bikes-categories__item img { min-height: 400px; } .bikes-categories__item__background img { border-radius: 15px; } .bikes-categories__item .bike-overlay { position: absolute; bottom: 0; left: 0; right: 0; height: 100%; width: 100%; z-index: 50; transition: transform 1s; transform: translate(0, 0); } .bikes-categories__item .bike-overlay:hover { } .bikes-categories__item__overlay { position: absolute; bottom: 0; left: 0; right: 0; height: 100%; width: 100%; display: flex; align-items: center; justify-content: center; flex-direction: column; } .bikes-categories__item__overlay h2 { color: white; font-weight: bold; font-size: 38px; font-family: 'Averta'; padding: 0; margin-bottom: 15px; z-index: 60; } .bikes-categories__item__overlay .btn { font-size: 12px; text-transform: uppercase; background-color: #fff; color: #000; padding: 0 17px; font-weight: bold; z-index: 60; } .bikes-categories__item:hover .btn { background-color: #000; color: #fff; } /* * Bike Category / Taxonomy */ .bikes-overview { padding: 7rem 0; background-color: #F3F3F3; } @media (max-width: 768px) { .bikes-overview { } } .bikes-overview__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-column-gap: 100px; grid-row-gap: 100px; } @media (max-width: 768px) { .bikes-overview__grid { grid-template-columns: repeat(1, minmax(0, 1fr)); margin: 0 10px; } } .bikes-overview__grid .bike-item { background-color: #fff; border-radius: 10px; } .bikes-overview_item img { min-height: 400px; } /* * Single Bike inside Category Grid */ .bike-item { position: relative; border-top: 13px solid #0BC2AC; } .bike-item__type__wrapper { position: absolute; top: -13px; left: 0; width: 100%; display: flex; justify-content: center; } .bike-item__type { background: #000; color: #fff; font-size: 0.5rem; width: 120px; text-align: center; } .bike-item figure { margin: 0; padding: 0; position: relative; min-height: 450px; transition: all 1s; clip-path: polygon(0% 0%, 100% 0,150% 100%, 0% 100%); } .bike-item:hover figure img { right: -84px; cl2ip-path: polygon(2% 0%,100% 0%,100% 100%, 2% 100%) !important; } @media (max-width: 768px) { .bike-item figure { min-height: 280px; } .bike-item:hover figure img { right: -35px; } } .bike-item figure img { width: 120%; clip3-path: polygon(6% 0%,100% 0%,100% 100%, 6% 100%); max-width: unset; position: absolute; top: 0; right: -74px; transition: clip-path 0.4s ease-in-out, right 0.8s; } @media (max-width: 768px) { .bike-item figure img { width: 113%; right: -24px; } } .bike-info { display: flex; flex-direction: column; align-items: center; margin-bottom: 1rem; } .bike-info p { padding-bottom: 0; } .bike-info h2 { padding: 0; } .bike-info img { margin: 10px 0; -webkit-filter: invert(100%); filter: invert(100%); } .bike-info .slogan { font-size: 0.8rem; text-align: center; text-transform: uppercase; color: #000 !important; } .bike-info .price-from { font-size: 0.8rem; color: lightgrey; } /* * BLOCK - Soniq bike */ .soniq-bike { background-repeat: no-repeat; background-size: cover; background-position: center; background-color: #000; color: #fff; position: relative; } @media only screen and (max-width: 767px) { .soniq-bike { background-image: url('/wp-content/themes/APEX/images/soniq-mobile.jpg') !important; background-size: contain; background-position: bottom; } .soniq-bike .wrapper { display: flex; flex-direction: column; } } @media only screen and (min-width: 1900px) { .soniq-bike { background-size: 100vw; } } .soniq-bike__text { display: flex; flex-direction: column; /*min-height: 150vh; */ padding: 30vh 0; max-width: 25vw; color: #fff; } .soniq-bike__text h2 { } .soniq-bike__text h2 small { display: block; } @media only screen and (max-width: 767px) { .soniq-bike__text { max-width: 100%; padding: 0; margin-bottom: 27rem; order: 3; } } @media only screen and (min-width: 1900px) { .soniq-bike__text { } } .soniq-bike__text h2 { color: #fff; padding-bottom: 15px; } @media only screen and (max-width: 767px) { .soniq-bike__text h2 span { font-size: 21px; display: block; } } .soniq-bike__text p { padding-bottom: 20px; } .soniq-bike__text a { color: #fff; text-transform: uppercase; text-decoration: none; border-bottom: 1px solid #fff; padding-bottom: 8px; font-size: 18px; } .soniq-bike__text a:hover { border-bottom: 1px solid white; color: white; } @media only screen and (min-width: 768px) { color: #B2B2B2; border-bottom: 1px solid #B2B2B2; } .soniq-bike__highlight { } .soniq-bike__highlight__top { } .soniq-bike__highlight__bottom { } @media only screen and (max-width: 767px) { .soniq-bike__highlight { display: block; position: relative; height: 280px; margin-top: 3rem; } .soniq-bike__highlight__top, .soniq-bike__highlight__bottom { width: 43%; } .soniq-bike__highlight__top { position: absolute; top: 5%; left: 5%; } .soniq-bike__highlight__bottom { position: absolute; top: 13%; right: 5%; } } @media only screen and (min-width: 768px) { .soniq-bike__highlight__top { position: absolute; top: -10%; right: 15vw; } .soniq-bike__highlight__bottom { position: absolute; bottom: 3vh; right: -6vw; } } @media only screen and (min-width: 3100px) { .soniq-bike__highlight__top { position: absolute; top: -11%; right: 3vw; } .soniq-bike__highlight__bottom { position: absolute; bottom: 7vh; right: -9vw; } }