/* ================================================================================================================== */ /* corpo */ /* ================================================================================================================== */ #rent { display: block; position: relative; width: 100%; margin: 0; padding: 0; } /* ================================================================================================================== */ /* conteudo */ /* ================================================================================================================== */ #rent div.content { display: block; position: relative; width: auto; height: auto; margin: 50px 0 0 0; z-index: 2; } #rent div.content div.col { display: inline-block; position: relative; width: auto; height: auto; vertical-align: top; } #rent div.content div.col.left { width: 60%; padding: 0 100px 0 0; } #rent div.content div.col.right { width: 40%; } #rent div.content span.bike_vector { display: block; position: relative; width: 461px; height: 546px; background: transparent url(../images/bike_vector.png) no-repeat center top; background-size: contain; margin: -100px 0 0 0; } #rent div.content div.inside_cols { display: flex; justify-content: space-between; } #rent div.content div.inside_cols div.text { display: inline-block; position: relative; vertical-align: top; } #rent div.content div.inside_cols div.testing { display: inline-block; position: relative; vertical-align: top; width: 200px; height: auto; } #rent div.content div.inside_cols div.testing h3 { display: block; position: relative; background-image: linear-gradient(to left, #00abea, #0081b8); padding: 15px 35px; text-align: center; color: #ffffff; } #rent div.content div.inside_cols div.testing div.block { display: block; position: relative; background-color: #ededeb; margin: 5px 0 0 0; padding: 15px; } #rent div.content div.inside_cols div.testing div.block span { display: block; position: relative; width: 52px; height: 53px; background: transparent url(../images/testing.png) no-repeat; margin: 0 auto; } #rent div.content div.inside_cols div.testing div.block span.maintenance { background-position-x: 0; } #rent div.content div.inside_cols div.testing div.block span.rent { background-position-x: -52px; } #rent div.content div.inside_cols div.testing div.block p { display: block; position: relative; font-size: 0.875em; color: #121c4d; text-align: center; margin: 5px 0 0 0; } #rent div.content h1 { display: block; position: relative; font-size: 2.187em; color: #00aeef; } #rent div.content h2 { display: block; position: relative; margin: 35px 0; color: #121c4d; } #rent div.content a { display: inline-block; position: relative; border: 1px solid #00aeef; padding: 5px 50px; color: #00aeef; text-decoration: none; margin: 25px 0 0 0; } #rent div.content a:hover { background-color: #00aeef; color: #ffffff; } @media all and ( max-width: 1165px ) { #rent div.content div.col.left { width: 100%; padding: 0; } #rent div.content div.col.right { display: none; } } @media all and ( max-width: 750px ) { #rent div.content { text-align: center; } #rent div.content div.inside_cols { display: block; } #rent div.content div.inside_cols div.text { display: block; } #rent div.content div.inside_cols div.testing { margin-top: 50px; } } /* ================================================================================================================== */ /* formulario */ /* ================================================================================================================== */ #rent form { display: block; position: relative; width: auto; margin: 50px 0 0 0; padding: 50px 25px; background-image: linear-gradient(to left, #00abea, #0081b8); text-align: center; } #rent form div.inside { display: inline-block; position: relative; width: auto; text-align: left; } #rent form div.inside label { display: inline-block; position: relative; width: 500px; margin: 15px 50px 15px 0; vertical-align: bottom; } #rent form div.inside label div.input { display: flex; justify-content: space-between; position: relative; height: 36px; background-color: #ffffff; margin: 3px 0 0 0; cursor: pointer; } #rent form div.inside label div.input span.icon { display: inline-block; position: relative; width: 36px; height: 36px; background: transparent url(../images/icons.png) no-repeat; vertical-align: middle; } #rent form div.inside label div.input span.icon.location { background-position-x: 0; } #rent form div.inside label div.input span.icon.date { background-position-x: -36px; } #rent form div.inside label div.input span.icon.hour { background-position-x: -72px; } #rent form div.inside label div.input span.icon.bike { background-position-x: -108px; } #rent form div.inside label div.input select, #rent form div.inside label div.input p { display: inline-block; position: relative; width: 100%; background-color: #ffffff; border: none; cursor: pointer; line-height: 36px; } #rent form div.inside label div.input select option { font-size: 0.75em; } #rent form div.inside label div.input.no_cursor, #rent form div.inside label div.input.no_cursor p { cursor: default; } #rent form div.inside div.col { display: inline-block; position: relative; width: 500px; margin: 15px 0 15px 0; vertical-align: bottom; } #rent form div.inside .small { width: 225px; } #rent form div.inside div.col.small { width: 225px; } #rent form div.inside div.col p { display: block; position: relative; width: 100%; border: 1px solid #ffffff; color: #ffffff; background-color: transparent; text-align: center; cursor: default; } #rent form input[type="submit"] { display: block; position: relative; width: 100%; line-height: 35px; border: 1px solid #ffffff; color: #ffffff; cursor: pointer; background-color: transparent; } #rent form input[type="submit"]:hover { background-color: #ffffff; color: #00abea; } #rent form div.datepicker { position: absolute; top: 38px; left: 0; z-index: 10; padding: 5px; background-color: #ffffff; width: auto; height: 275px; cursor: default; white-space: nowrap; } #rent form div.datepicker[data-status="closed"] { display: none; } #rent form div.datepicker[data-status="opened"] { display: block; } #rent form div.datepicker div.arrow { display: inline-block; position: relative; width: 30px; height: 100%; cursor: pointer; text-align: center; vertical-align: top; } #rent form div.datepicker div.arrow:hover { background-color: #f1f1f2; } #rent form div.datepicker div.arrow span { display: inline-block; position: relative; width: auto; background-color: transparent; cursor: pointer; font-size: 1.25em; vertical-align: middle; } #rent form div.datepicker div.arrow:hover span { color: #00aeef; } #rent form div.datepicker div.months { display: inline-block; position: relative; width: auto; height: auto; margin: 15px 0; vertical-align: top; } #rent form div.datepicker div.month { display: inline-block; position: relative; width: auto; height: auto; margin: 0 25px; vertical-align: top; } #rent form div.datepicker div.month h3 { display: block; position: relative; color: #00aeef; } #rent form div.datepicker div.month table { position: relative; width: 100%; margin: 10px 0 0 0; } #rent form div.datepicker div.month table th { position: relative; font-size: 0.875em; color: #b7b7b7; text-align: center; padding: 0 5px 15px 5px; } #rent form div.datepicker div.month table td { position: relative; text-align: center; } #rent form div.datepicker div.month table td p { display: block; position: relative; font-size: 0.75em; line-height: 25px; width: 25px; text-align: center; margin: 0 auto } #rent form div.datepicker div.month table td, #rent form div.datepicker div.month table td[data-no-stock='false'] p { cursor: pointer; } #rent form div.datepicker div.month table td[data-no-stock='true'] p { color: #d0d2d3; } #rent form div.datepicker div.month table td[data-no-stock='false']:hover p { border-radius: 100%; background-color: #cdeffb; } #rent form div.datepicker div.month table td div { display: none; position: absolute; bottom: 25px; left: 0; padding: 10px; background-color: red; } #rent form div.datepicker div.month table td[data-no-stock='true']:hover div { display: none; background-color: red; } #rent form div.datepicker div.month table td[data-selected='true'] p { border-radius: 100%; background-color: #37b34a; } #rent form div.datepicker div.month table td[data-selected='true']:hover p { border-radius: 100%; background-color: #37b34a; } #rent form div.datepicker span.separator { display: inline-block; position: relative; width: 2px; height: 100%; background-color: #d0d2d3; vertical-align: top; margin: 0; } @media all and ( max-width: 750px ) { #rent form { padding: 25px 15px; } #rent form div.inside label { width: 100%; } #rent form div.inside div.col { width: 100%; } #rent form div.inside .small { width: 100%; } #rent form div.inside div.col.small { width: 100%; } #rent form div.datepicker { height: auto; } #rent form div.datepicker div.arrow { vertical-align: middle; height: 30px; } #rent form div.datepicker div.months { margin: 0; vertical-align: middle; } #rent form div.datepicker div.month { display: block; margin: 0; } #rent form div.datepicker div.month table th { padding: 0 3px 5px 3px; } #rent form div.datepicker div.month table td p { width: 20px; line-height: 25px; } } /* ================================================================================================================== */ /* contactos */ /* ================================================================================================================== */ #rent div.contacts { display: block; position: relative; margin: 5px 0 0 0; } #rent div.contacts h1 { display: block; position: relative; padding: 5px 100px; font-size: 1.312em; background-color: #d0d2d3; } #rent div.contacts div.text { display: block; position: relative; padding: 30px 100px; background-color: #ededeb; } #rent div.contacts div.col { display: inline-block; position: relative; padding: 0 25px; width: 33%; vertical-align: top; } #rent div.contacts a { display: inline-block; position: relative; vertical-align: top; border: 1px solid #121c4d; padding: 5px 25px; margin: 35px 0 0 0; text-decoration: none; } #rent div.contacts a:hover { border: 1px solid #00aeef; background-color: #00aeef; } #rent div.contacts a p { display: inline-block; position: relative; vertical-align: middle; font-size: 0.875em; margin: 0 10px 0 0; } #rent div.contacts a:hover p { color: #ffffff; } #rent div.contacts a span { display: inline-block; position: relative; vertical-align: middle; width: 23px; height: 23px; background: transparent url(../images/location_icon.png) no-repeat; } #rent div.contacts a:hover span { background-position-y: -23px; } @media all and ( max-width: 850px ) { #rent div.contacts h1 { padding: 5px 10px; } #rent div.contacts div.text { padding: 30px 20px; } } @media all and ( max-width: 750px ) { #rent div.contacts div.col { width: 50%; padding: 0 15px 25px 15px; text-align: center; } } @media all and ( max-width: 500px ) { #rent div.contacts div.col { width: 100%; } } /* ================================================================================================================== */ /* ultimo passo da encomenda */ /* ================================================================================================================== */ #rent form.last { background-color: transparent; text-align: left; padding: 0; background-image: none; margin: 0; } #rent div.last_order { display: inline-block; position: relative; vertical-align: top; margin: 50px 0 0 0; } #rent div.last_order.left { width: 55%; } #rent div.last_order.right { width: 45%; padding: 0 0 0 25px } #rent div.last_order h1 { display: block; position: relative; font-size: 1.312em; margin: 0 0 25px 0; } #rent div.last_order h2 { display: block; position: relative; font-size: 2.187em; margin: 0 0 25px 0; color: #00aeef; } #rent div.last_order div.dark { display: block; position: relative; width: auto; padding: 45px; background-color: #ededeb; } #rent div.last_order div.split { display: inline-block; position: relative; width: 100%; vertical-align: top; } #rent div.last_order div.split div.text { display: block; position: relative; } #rent div.last_order div.split div.text p { display: inline-block; position: relative; vertical-align: top; line-height: 36px; } #rent div.last_order div.split div.text span.icon { display: inline-block; position: relative; width: 36px; height: 36px; background: transparent url(../images/icons.png) no-repeat; vertical-align: top; } #rent div.last_order div.split div.text span.icon.location { background-position-x: 0; } #rent div.last_order div.split div.text span.icon.date { background-position-x: -36px; } #rent div.last_order div.split div.text span.icon.hour { background-position-x: -72px; } #rent div.last_order div.split div.text span.icon.bike { background-position-x: -108px; } #rent div.last_order span.separator { display: block; position: relative; width: 100%; height: 1px; background-color: #e2e4e5; margin: 15px 0; } #rent div.last_order label { display: inline-block; position: relative; width: 50%; padding: 0 25px 0 0; margin: 0 0 10px 0; } #rent div.last_order label.full { width: 100%; } #rent div.last_order label p { display: block; position: relative; } #rent div.last_order label input[type="text"] { display: block; position: relative; width: 100%; border: none; background-color: #ffffff; font-size: 0.875em; line-height: 25px; } #rent div.last_order div.submit { margin: 25px 0 0 0; overflow: hidden; } #rent div.last_order div.submit[data-status="false"] { opacity: 0; height: 0; } #rent div.last_order div.submit[data-status="true"] { opacity: 1; height: auto; } #rent div.last_order input[type="submit"] { display: block; position: relative; width: 100%; height: auto; background-color: #00aeef; border: none; color: #ffffff; cursor: pointer; line-height: 35px; } #rent div.last_order input[type="submit"]:hover { background-color: #121c4d; } #rent div.last_order label.payment { display: flex; align-items: center; justify-content: space-between; position: relative; width: auto; border-bottom: 2px solid #cfd2d3; padding: 15px 10px; } #rent div.last_order label.payment:last-child { border-bottom: none; } #rent div.last_order label.payment div.details { display: inline-block; position: relative; width: auto; vertical-align: middle; text-align: right; line-height: 25px; } #rent div.last_order label.payment div.details input { display: inline-block; position: relative; width: auto; vertical-align: middle; } #rent div.last_order label.payment div.details p { display: inline-block; position: relative; width: auto; vertical-align: middle; margin: 0 0 0 10px; } #rent div.last_order label.payment span { display: inline-block; position: relative; width: 150px; vertical-align: middle; height: 50px; } #rent div.last_order label.payment span.paypal { background: transparent url(../images/paypal.png) no-repeat center right; background-size: contain; } #rent div.last_order label.payment span.wiretransfer { background: transparent url(../images/wiretransfer.png) no-repeat center right; background-size: contain; } #rent div.last_order p.price { display: block; position: relative; width: auto; background-color: #ec1c24; text-align: center; color: #ffffff; margin: 25px 0; line-height: 35px; } #rent div.last_order div[data-hidden="true"] { display: none; } #rent div.last_order div[data-hidden="false"] { display: block; } @media all and ( max-width: 1800px ) { #rent div.last_order.left { width: 50%; } #rent div.last_order.right { width: 50%; padding: 0 0 0 25px; } } @media all and ( max-width: 1250px ) { #rent div.last_order label { width: 100%; padding: 0; } } @media all and ( max-width: 950px ) { #rent div.last_order div.dark { padding: 10px; } #rent div.last_order.left { width: 100%; text-align: center; } #rent div.last_order.right { width: 100%; padding: 0; text-align: center; } } @media all and ( max-width: 450px ) { #rent div.last_order div.split div.text p { margin-bottom: 10px; } #rent div.last_order div.split div.text span.icon { display: none; } }