/* -------------------------------- Leadspace and image gallery -------------------------------- */ bike-images #bike-featured-image { width:100%;height:95vh; background-size:cover; background-position:center; } bike-images #bike-image-gallery { width:100%; height:96vh; background-color: rgba(18,18,18,.85); z-index:2;position:absolute; top:0px; left:0; display:none; } bike-images .image-gallery-trigger { z-index: 3; left: 5%; margin-top:-95px; height: 54px; width: 54px; background-image: url('../../images/base/icon-camera-ee3658.png'); background-color: #ffffff; position: absolute; cursor: pointer; background-size:25px; background-repeat:no-repeat; background-position: center center; transition: 0.4s ease;} bike-images .image-gallery-trigger:hover { background-color: rgb(255,255,255); } #bike-image-gallery-container {background-color:#ffffff;width:100%;height:400px;} #bike-image-gallery-container h2 {font-size:1.6em;margin-bottom:5px;} #bike-image-gallery-container p.subtitle {font-size:.9em;color:#7f8c8d;padding-bottom: 10px;} #bike-image-gallery-container p.instruction-subtitle {font-size:.7em;color:#7f8c8d;padding-bottom: 10px;margin-top:10px;} bike-images p.bike-image-title {position: absolute;right: 3%;margin-top: -50px;color: #101010;font-size: .75em;font-weight: 600;} #photoreel { width: 100%; height: 200px; visibility: hidden; margin-left: auto; margin-right:auto; margin-top: 15px; background: #f1f1f1; cursor: hand; cursor: -moz-grab; cursor: -webkit-grab; cursor: grab; border-top: solid; border-top-color:#f2f2f2; border-top-width:1px; border-bottom: solid; border-bottom-color:#f2f2f2; border-bottom-width:1px; } #photoreel .item { background: #ffffff; } #photoreel .item:nth-child(2n+0) { /* background: #cccccc;*/ } #photoreel .image-container { padding: 25px; height: 90%; width: 85%; margin-left: auto; margin-right: auto; border: solid; cursor: pointer; margin-top: 10px; border-width: 1px; border-color: #121212; background-size:cover; background-position:center; } #photoreel .image-container:hover {border-color: #ee3658;transition: 0.4s ease;} #photoreel .image-container-selected {border-color: #ee3658 !important; } /* -------------------------------- Bike introduction -------------------------------- */ #bike-title-container {background-color: rgba(255,255,255,.75);padding:15px 0px 15px 0px;margin-top:-56px;position:absolute;width:100%;padding-left: 5%;} #bike-title-container h2 {font-size:1.6em;} #bike-title-container .grid-pad {padding-top: 0px !important;} #bike-title-container a {margin-left:7px;margin-right:7px;} #bike-introduction-container {background-color:#101010;width:100%;padding-top:5%;padding-left: 5%;padding-bottom:10%;padding-right:5%} #bike-introduction-container h2 {color:#ffffff;font-size:1.8em;padding-bottom:25px;} #bike-introduction-container p {color:#ffffff;font-size:.9em;line-height:1.5em;margin-bottom:30px;} #bike-introduction-container p.desc {margin-bottom:45px !important;} #bike-introduction-container .btn-black {font-size:.8em;} #bike-introduction-container .with-top-margin-top {margin-top:30px;} @media only screen and (max-width: 758px) { #bike-title-container{padding:10px 0px 10px 0px;} } @media only screen and (max-width: 768px) { #bike-title-container{padding-left:0px;padding-right:0px !important;} #bike-introduction-container {padding-left:0px;padding-right:0px !important;} #bike-related-link-container {padding-left:0px !important;padding-right:0px !important;} #bike-spec-selector-container .grid-pad {padding-left:0px !important; padding-right:0px !important;} } @media only screen and (max-width: 1000px) { #bike-related-link-container .realted-link {background-size: 75%;} } @media only screen and (max-width: 767px) { #bike-related-link-container .realted-link {background-size:180px ;} } @media only screen and (max-width: 400px) { bike-images #bike-image-gallery-container {margin-top:8% ;} #photoreel {margin-top:0px;} } /* -------------------------------- Bike specifications -------------------------------- */ #bike-specs-container {background-color:#ffffff;width:100%;} #bike-specs-container #bike-spec-selector-container {width:100%;background-color:#f2f2f2;} #bike-spec-selector .spec-component {height:100px;background-repeat:no-repeat;background-position: 15px center; background-size:65px;color:#101010;max-height:100px;padding-top: 76px !important;cursor:pointer;background-position: center 15px;transition: 0.4s ease;} #bike-spec-selector p {font-size: .8em;width: 100%;text-align: center;height: 100%;text-: bottom;} #bike-spec-selector .spec-component:hover{color:#ee3658;} #bike-spec-selector .spec-component-selected {height:100px;background-repeat:no-repeat;background-position: center 15px; background-size:65px;color:#101010;max-height:100px;padding-top: 76px !important;cursor:pointer;color:#ee3658;} #bike-spec-selector .spec-frameandfork-icon {background-image:url('../../images/templates/bike/frame-line.png');transition: 0.4s ease;-webkit-transition:0.4s ease;} #bike-spec-selector .spec-frameandfork-icon:hover {background-image:url('../../images/templates/bike/frame-fill.png');} #bike-spec-selector .spec-frameandfork-icon-selected {background-image:url('../../images/templates/bike/frame-fill.png');} #bike-spec-selector .spec-drivetrain-icon {background-image:url('../../images/templates/bike/crank-line.png');} #bike-spec-selector .spec-drivetrain-icon:hover {background-image:url('../../images/templates/bike/crank-fill.png');} #bike-spec-selector .spec-drivetrain-icon-selected {background-image:url('../../images/templates/bike/crank-fill.png');} #bike-spec-selector .spec-wheelsandhubs-icon {background-image:url('../../images/templates/bike/hub-line.png');} #bike-spec-selector .spec-wheelsandhubs-icon:hover {background-image:url('../../images/templates/bike/hub-fill.png');} #bike-spec-selector .spec-wheelsandhubs-icon-selected {background-image:url('../../images/templates/bike/hub-fill.png');} #bike-spec-selector .spec-cockpit-icon {background-image:url('../../images/templates/bike/handlebars-line.png');} #bike-spec-selector .spec-cockpit-icon:hover {background-image:url('../../images/templates/bike/handlebars-fill.png');} #bike-spec-selector .spec-cockpit-icon-selected {background-image:url('../../images/templates/bike/handlebars-fill.png');} #bike-spec-selector .spec-seatandpedals-icon {background-image:url('../../images/templates/bike/seat-line.png');} #bike-spec-selector .spec-seatandpedals-icon:hover {background-image:url('../../images/templates/bike/seat-fill.png');} #bike-spec-selector .spec-seatandpedals-icon-selected {background-image:url('../../images/templates/bike/seat-fill.png');} #bike-spec-selector .spec-brakes-icon {background-image:url('../../images/templates/bike/brake-line.png');} #bike-spec-selector .spec-brakes-icon:hover {background-image:url('../../images/templates/bike/brake-fill.png');} #bike-spec-selector .spec-brakes-icon-selected {background-image:url('../../images/templates/bike/brake-fill.png');} #bike-specs-container .container-flexgrid { display: flex; display:-webkit-flex } #bike-specs-container .left-half { background-color: #ffffff; flex: 1; -webkit-flex:1; padding: 1rem; background-size:cover; background-position:center; min-height:500px; } #bike-specs-container .right-half { background-color: #ffffff; flex: 1; -webkit-flex:1; padding:20px; min-height:400px; } #bike-specs-container .visible-specs {display:block;} #bike-specs-container .hidden-specs {display:none;} #spec-table { font-size:.8em;} #spec-table table {width:100%;} #spec-table tr { border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; } #spec-table td { padding-top:10px; padding-bottom:10px; } #spec-table td span {font-weight:600;} @media only screen and (max-width: 758px) { #bike-title-container{padding:10px 0px 10px 0px;} #bike-introduction-container .with-top-margin-top {margin-top:15px;} #bike-introduction-container .with-top-margin-bottom {margin-top:50px;} } @media only screen and (max-width: 667px) { #bike-specs-container .left-half {display:none;} } @media only screen and (max-width: 663px) { #bike-spec-selector .spec-component {font-size: .9em;} } /* -------------------------------- Bike realted links -------------------------------- */ #bike-related-link-container {background-color:#101010;width:100%;padding-top:5%;padding-left: 5%;padding-bottom:5%;padding-right:5%} #bike-related-link-container h2 {color:#ffffff;font-size:1.8em;padding-bottom:25px;} #bike-related-link-container p {color:#ffffff;font-size:.9em;line-height:1.5em;} #bike-related-link-container p span {color:#ffffff;font-size:1.3em;line-height:1.5em;font-weight:600;padding-left:5px;padding-right:5;} #bike-related-link-container p.desc {margin-bottom:45px !important;padding-top:8px;padding-right:5px;padding-left:5px;} #bike-related-link-container .btn-black {font-size:.8em;} #bike-related-link-container .with-top-margin-top {margin-top:30px;} #bike-related-link-container .realted-link {height:100px;background-color:#222222;background-repeat:no-repeat;background-position:center;margin-bottom:15px;cursor:pointer;transition: 0.4s ease;} #bike-related-link-container .realted-link:hover {background-color: #292929;} /* -------------------------------- Bike promotion spot at bottom -------------------------------- */ #bottom-promotion-container {height:200px;width:100%;background-image:url('../../images/base/banner-merchandise.jpg');background-size:cover;background-position:center;} #bottom-promotion-container img {width:45px;display:block;margin:auto;margin-bottom: 15px;margin-top:30px;} #bottom-promotion-container p {text-align: center;font-size:1.4em;color:#ffffff;}