/*! HTML5 Boilerplate v7.2.0 | MIT License | https://html5boilerplate.com/ */
/* main.css 2.0.0 | MIT License | https://github.com/h5bp/main.css#readme */
/*
* What follows is the result of much research on cross-browser styling.
* Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
* Kroc Camen, and the H5BP dev community and team.
*/
/* ==========================================================================
Base styles: opinionated defaults
========================================================================== */
html, body {
color: #222;
font-size: 1em;
line-height: 1.4;
width: 100%;
margin: 0px;
padding: 0px;
overflow-x: hidden;
font-family: 'Lato', sans-serif;
font-weight: 400;
box-sizing: border-box;
}
/*
* Remove text-shadow in selection highlight:
* https://twitter.com/miketaylr/status/12228805301
*
* Vendor-prefixed and regular ::selection selectors cannot be combined:
* https://stackoverflow.com/a/16982510/7133471
*
* Customize the background color to match your design.
*/
::-moz-selection {
background: #b3d4fc;
text-shadow: none;
}
::selection {
background: #b3d4fc;
text-shadow: none;
}
/*
* A better looking default horizontal rule
*/
hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid #ccc;
margin: 1em 0;
padding: 0;
}
/*
* Remove the gap between audio, canvas, iframes,
* images, videos and the bottom of their containers:
* https://github.com/h5bp/html5-boilerplate/issues/440
*/
audio,
canvas,
iframe,
img,
svg,
video {
vertical-align: middle;
}
/*
* Remove default fieldset styles.
*/
fieldset {
border: 0;
margin: 0;
padding: 0;
}
/*
* Allow only vertical resizing of textareas.
*/
textarea {
resize: vertical;
}
/* ==========================================================================
Browser Upgrade Prompt
========================================================================== */
.browserupgrade {
margin: 0.2em 0;
background: #ccc;
color: #000;
padding: 0.2em 0;
}
/* ==========================================================================
Author's custom styles
========================================================================== */
/* General */
.no-gutters {
margin-right: 0;
margin-left: 0;
}
.no-gutters .col,
.no-gutters [class*="col-"] {
padding-right: 0;
padding-left: 0;
}
.content-width {
max-width: 1138px;
margin-left: auto;
margin-right: auto;
}
body {
font-family: "Lato", Arial, Sans-serif;
}
h1,h2,h3,h4,h5,h6,p,li,ul {
font-family: "Lato", Arial, Sans-serif;
}
/* Header */
header {
background-color: #323B3A;
height: 60px;
line-height: 100px;
color: #fff;
}
.col {
margin-top: -23px;
}
.col.logo {
max-width: 150px;
margin-top: -20.2px;
}
header h1 {
padding-top: 10px;
font-weight: 500;
font-size: 24px;
text-transform: uppercase;
}
.text-right h1 {
margin-bottom: 13px;
font-family: 'Lato';
font-weight: 400;
}
#lang-selector {
float: left;
margin-right: 15px;
}
/* Hero */
.hero .cta:hover {
color: #000 !important;
}
.hero {
background-color: #110e0f;
color: #fff;
}
.hero .container-fluid {
max-width: 1300px;
}
.hero-bg {
background-size: cover;
background-position: center top;
background-repeat: no-repeat;
}
#tanita-hero-img {
width: 100%;
height: auto;
}
.hero h2 {
width: 100%;
text-align: center;
font-size: 22px;
font-weight: 500;
margin-top: 40px;
margin-bottom: 30px;
}
.orange-tick li {
list-style-type: none;
position: relative;
min-height: 30px;
line-height: 110%;
margin-bottom: 20px;
padding-left: 60px;
font-size: 22px;
}
.orange-tick li::before {
content: " ";
background-image: url('../img/icn-orange-tick.png');
background-position: center center;
background-repeat: no-repeat;
position: absolute;
left: 0px;
top: 6px;
width: 34px;
height: 28px;
}
.hero ul {
max-width: 400px;
margin-left: auto;
margin-right: auto;
margin-top: 20px;
}
a.btn.cta.large {
background-color: #FF9428;
color: #fff;
letter-spacing: 3px;
display: inline-block;
text-transform: uppercase;
font-weight: 600;
font-size: 18px;
min-width: 200px;
text-align: center;
border-radius: 100px;
margin-top: 20px;
margin-bottom: 40px;
}
.description-content {
font-size: 16px;
margin-top: -40px;
padding-bottom: 30px;
}
.arrow.cta img {
transition: all 0.5s;
}
.arrow.cta.open img {
transform: rotate(90deg);
}
/* Green cta */
.green-darker {
background-color: #d8e2e1;
padding-top: 10px;
padding-bottom: 27px;
}
.green-darker h3 {
color: #316d67;
margin-bottom: 40px;
font-size: 32px;
font-weight: 400;
}
.green-darker .container-fluid {
max-width: 800px;
}
/* Light green cta */
.green-lighter {
background-color: #f9fdfd;
margin:0;
padding: 10px;
}
.green-lighter .orange-tick li::before {
content: " ";
background-image: url('../img/icn-orange-tick-light.png');
background-position: center center;
background-repeat: no-repeat;
position: absolute;
left: 0px;
top: 6px;
width: 34px;
height: 28px;
}
.green-lighter h2 {
color: #316d67;
font-size: 28px;
margin-bottom: 40px;
font-weight: 600;
}
.green-lighter h3 {
color: #316d67;
font-size: 24px;
margin-bottom: 40px;
font-weight: 600;
}
.green-lighter ul {
max-width: 450px;
margin-left: auto;
margin-right: auto;
margin-top: 20px;
}
.green-lighter img {
margin-top: 30px;
margin-bottom: 30px;
}
.green-lighter .details-link a.cta {
color: #ff9428 !important;
text-decoration: none;
font-size: 22px;
font-weight: 600;
margin-top: 40px;
margin-bottom: 60px;
display: inline-block;
}
.green-lighter .cta img {
margin-right: 10px;
margin-top: 0px;
margin-bottom: 0px;
position: relative;
top: -2px;
}
.green-lighter .large-cta-row h2 {
font-size: 48px;
}
.green-lighter .large-cta-row {
padding-top: 30px;
padding-bottom: 30px;
}
a.btn.cta.xlarge {
background-color: #FF9428;
color: #fff;
letter-spacing: 3px;
display: inline-block;
text-transform: uppercase;
font-weight: 600;
font-size: 28px;
min-width: 300px;
padding-top: 10px;
padding-bottom: 10px;
text-align: center;
border-radius: 100px;
margin-top: 20px;
margin-bottom: 40px;
}
/* Testimonials */
.green-darker.testimonials h4 {
color: #316d67;
margin-bottom: 40px;
font-size: 36px;
font-weight: 600;
line-height: 135%;
}
.green-darker.testimonials .container-fluid {
max-width: 984px;
}
.col.testimonial-image {
max-width: 295px;
}
.testimonial-content {
background-color: #e8efef;
padding: 20px;
}
.right .testimonial-content {
padding-left: 60px;
}
.right img {
position: relative;
right: -40px;
z-index: 100;
}
.right.testimonial-row h5 {
padding-left: 80px;
margin-top: 30px;
}
.left .testimonial-content {
padding-right: 110px;
position: relative;
left: 60px;
margin-top: 60px;
}
.testimonial-content p {
margin-bottom: 0px;
}
.testimonial-row {
margin-top: 30px;
}
.left img {
position: relative;
left: -40px;
z-index: 100;
}
.left.testimonial-row h5 {
float: right;
padding-right: 80px;
margin-top: 30px;
}
.testimonial-row h5 {
font-weight: 400;
color: #316d67;
font-size: 18px;
margin-bottom: 20px;
}
.testimonial-row h5 strong {
font-weight: 600;
}
/* App */
.app {
background-image:url(../img/bg-app.jpg);
background-size: cover;
background-position: center top;
background-repeat: no-repeat;
padding-top: 100px;
padding-bottom: 50px;
height: 1000px;
background-attachment:local;
max-width: 100%;
}
.app h2 {
color: #316d67;
margin-bottom: 30px;
font-size: 24px;
font-weight: 600;
line-height: 135%;
}
.app h3 {
color: #316d67;
margin-bottom: 100px;
font-size: 24px;
font-weight: 400;
line-height: 135%;
}
.app img {
transition: all 0.5s;
}
.app img:hover {
transform: scale(1.05);
}
/* Footer */
footer {
padding-top: 15px;
padding-bottom: 30px;
font-size: 14px;
line-height: 135%;
}
footer a {
color: #000;
}
footer a:hover {
text-decoration: none;
color: #316d67;
}
footer .align-text-bottom {
position: relative;
}
footer .align-text-bottom p {
padding-top: 70px;
}
/* ==========================================================================
Helper classes
========================================================================== */
/*
* Hide visually and from screen readers
*/
.hidden {
display: none !important;
}
/*
* Hide only visually, but have it available for screen readers:
* https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
*
* 1. For long content, line feeds are not interpreted as spaces and small width
* causes content to wrap 1 word per line:
* https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
*/
.sr-only {
border: 0;
clip: rect(0, 0, 0, 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
white-space: nowrap;
width: 1px;
/* 1 */
}
/*
* Extends the .sr-only class to allow the element
* to be focusable when navigated to via the keyboard:
* https://www.drupal.org/node/897638
*/
.sr-only.focusable:active,
.sr-only.focusable:focus {
clip: auto;
height: auto;
margin: 0;
overflow: visible;
position: static;
white-space: inherit;
width: auto;
}
/*
* Hide visually and from screen readers, but maintain layout
*/
.invisible {
visibility: hidden;
}
/*
* Clearfix: contain floats
*
* For modern browsers
* 1. The space content is one way to avoid an Opera bug when the
* `contenteditable` attribute is included anywhere else in the document.
* Otherwise it causes space to appear at the top and bottom of elements
* that receive the `clearfix` class.
* 2. The use of `table` rather than `block` is only necessary if using
* `:before` to contain the top-margins of child elements.
*/
.clearfix:before,
.clearfix:after {
content: " ";
/* 1 */
display: table;
/* 2 */
}
.clearfix:after {
clear: both;
}
/* ==========================================================================
EXAMPLE Media Queries for Responsive Design.
These examples override the primary ('mobile first') styles.
Modify as content requires.
========================================================================== */
@media only screen and (min-width: 35em) {
/* Style adjustments for viewports that meet the condition */
}
@media print,
(-webkit-min-device-pixel-ratio: 1.25),
(min-resolution: 1.25dppx),
(min-resolution: 120dpi) {
/* Style adjustments for high resolution devices */
}
/* ==========================================================================
Print styles.
Inlined to avoid the additional HTTP request:
https://www.phpied.com/delay-loading-your-print-css/
========================================================================== */
@media print {
*,
*:before,
*:after {
background: transparent !important;
color: #000 !important;
/* Black prints faster */
-webkit-box-shadow: none !important;
box-shadow: none !important;
text-shadow: none !important;
}
a,
a:visited {
text-decoration: underline;
}
a[href]:after {
content: " (" attr(href) ")";
}
abbr[title]:after {
content: " (" attr(title) ")";
}
/*
* Don't show links that are fragment identifiers,
* or use the `javascript:` pseudo protocol
*/
a[href^="#"]:after,
a[href^="javascript:"]:after {
content: "";
}
pre {
white-space: pre-wrap !important;
}
pre,
blockquote {
border: 1px solid #999;
page-break-inside: avoid;
}
/*
* Printing Tables:
* https://web.archive.org/web/20180815150934/http://css-discuss.incutio.com/wiki/Printing_Tables
*/
thead {
display: table-header-group;
}
tr,
img {
page-break-inside: avoid;
}
p,
h2,
h3 {
orphans: 3;
widows: 3;
}
h2,
h3 {
page-break-after: avoid;
}
}
/* cena */
.cena h7 {
text-decoration: line-through;
font-size: 22px;
}
.znizenacena h3 {
font-size: 38px;
}
/*positon cena */
.cenik1 {
position:relative;
top: -40px;
right: 20px;
}
.col-sm-2 a {
font-family: Roboto, 'Segoe UI', Tahoma, sans-serif;
font-size: 131.25%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
#col-sm-2 h4 {
position: relative;
top:162px;
}
.ikone {
width: 100%;
margin: 24px auto;
height: auto;
max-width: 1900px;
padding-left: 40px;
}
.ikone a {
display: table-cell;
text-align: center;
width: 16%;
height: auto;
padding-right: 100px;
}
.ikone img {
width: 70px;
height: 70px;
}
.caption {
color: #008080;
font-weight: 570;
font-size: 11.6px;
margin-top: -20px;
width: 90px;
}
.navbar navbar-expand-lg navbar-light bg-light rounded {
background-color: transparent;
}
/* CSS used here will be applied after bootstrap.css */.btn-input {
display: block;
}
.btn-input .btn.form-control {
text-align: left;
}
.btn-input .btn.form-control span:first-child {
left: 10px;
overflow: hidden;
position: absolute;
right: 25px;
}
.btn-input .btn.form-control .caret {
margin-top: -1px;
position: absolute;
right: 10px;
top: 50%;
}
div.col.text-right h1 {
text-align: right;
margin-top: 29px;
font-size: 26px;
padding-right: 131px;
max-width: 100%;
}
div.col.text-right.cart {
margin-left: 100px;
margin-top: -80px;
}
/* Google Play button */
.app .google-button img{
max-width: 100%;
height: auto;
width:232px;
height:110px;
float: right;
margin-top: 520px;
margin-right: 180px;
}
/* App Store button */
.app .apple-button img{
max-width: 100%;
height: auto;
width: 203px;
height: 77px;
float: right;
margin-top: 640px;
margin-right: -218px;
}
.buttons .google-button img {
display: none;
}
.buttons .apple-button img {
display: none;
}
@media only screen and (max-width:800px) {
/* For mobile phones: */
div.col.text-right h1 {
display: none;
}
div.btn-group {
width: 50%;
}
div.col.text-right.cart {
display: contents;
}
.app {
background-image:url(../img/bg-app.jpg);
background-size: cover;
background-position: center top;
background-repeat: no-repeat;
padding-top: 100px;
padding-bottom: 50px;
height: 370px;
max-width: 800px;
width: 100%;
}
.hero {
padding-left: 10px;
padding-right: 40px;
}
.row {
padding-left: 25px;
}
.app {
margin: 0 auto;
height: 400px;
display: flex;
}
div.col-sm-6 {
padding-right: 55px;
}
div.row.text-center.large-cta-row {
margin: 0 auto;
}
.large-list {
display: contents;
}
.col-sm-2 h4 {
text-align: center;
margin-right: 35px;
}
div.col-sm-2 a {
margin-right: 35px;
}
div.col-sm-2 .infoo {
text-align: center;
}
div.col-sm-12 {
padding-right: 40px;
max-width: 100%;
}
.ikone img {
width: 100%;
height: auto;
}
.imglevo {
margin-left: 60px;
}
div.col.text-right.cart {
max-width: 100%;
top: -113px;
float: right;
margin-right: -160px;
}
.col-sm-6 .bc601 {
max-width: 100%;
height: auto;
}
.flags .german-flag {
margin: 0 auto;
height: 100%;
width: 100%;
height: 44px;
position: absolute;
padding-left: 20px;
margin-top: 34px;
}
div.col {
padding-top: 5px;
}
div.row.brand-icons .col {
padding-bottom: 25px;
}
.ikone a{
display: none;
max-width: 100%;
height: auto;
float: left;
width: 40%;
padding-bottom: -15px;
padding-left: 30px;
}
.ikone img {
width: 60px;
height: 60px
}
/* Google Play button */
.app .google-button img {
height: 100%;
max-width: 100%;
width: 145px;
height: 68px;
float: right;
margin-top: 196px;
margin-left: 150px;
display: none;
}
.app .apple-button img {
position: relative;
width: 30%;
height: 100%;
height: 47px;
margin-top: 208px;
margin-right: 457px;
margin-left: 48px;
padding-left: 16px;
display: none;
}
footer {
padding-top: 1px;
padding-bottom: 20px;
font-size: 14px;
line-height: 55%;
margin-top: -40px;
}
#col-sm-2 h4 {
position: relative;
margin-top: -80px;
}
.col-sm-2 {
padding-top: 30px;
}
.col.logo {
max-width: 150px;
margin-top: -22px;
}
.buttons .google-button img {
width: 34%;
padding-top: 40px;
margin-left: 10px;
display: grid;
}
.buttons .apple-button img {
width: 30%;
display: grid;
height: 40px;
float: right;
margin-right: 20px;
margin-top: -46px;
}
}
@media(max-width: 920px) {
footer .align-text-bottom p {
padding-top: 50px;
line-height: 150%;
}
}
.buttons {
padding-top: 20px;
padding-bottom :20px;
}
.buttons img {
max-width: 250px;
}
@media(max-width: 768px) {
.buttons div {
text-align: center !important;
}
.buttons img {
padding: 20px;
}
}
@media(max-width: 480px) {
.container-fluid {
width: 100%;
padding-right: 5px;
padding-left: 5px;
margin-right: auto;
margin-left: auto;
}
.green-lighter h2 {
color: #316d67;
font-size: 30px !important;
margin-bottom: 40px;
font-weight: 600;
}
a.btn.cta.xlarge {
background-color: #FF9428;
color: #fff;
letter-spacing: 1px;
display: inline-block;
text-transform: uppercase;
font-weight: 600;
font-size: 22px !important;
min-width: 260px;
padding-top: 10px;
padding-bottom: 10px;
text-align: center;
border-radius: 100px;
margin-top: 20px;
margin-bottom: 40px;
}
.green-darker.testimonials h4 {
color: #316d67;
margin-bottom: 40px;
font-size: 24px;
font-weight: 600;
line-height: 125%;
}
.orange-tick li {
list-style-type: none;
position: relative;
min-height: 30px;
line-height: 110%;
margin-bottom: 20px;
padding-left: 60px;
font-size: 18px;
}
.right img {
position: relative;
right: -0px;
z-index: 100;
}
.left img {
position: relative;
left: -0px;
z-index: 100;
}
.imglevo {
margin-left: 0px;
}
.testimonial-content {
background-color: #e8efef;
padding: 20px;
}
.right .testimonial-content {
padding-left: 20px;
}
}
.cart {
display: none !important;
}