@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 100;
src: url(//ldirect.hr/wp-content/themes/ldirect/fonts/roboto-v20-latin-ext_latin-100.eot);
src: local('Roboto Thin'), local('Roboto-Thin'),
url(//ldirect.hr/wp-content/themes/ldirect/fonts/roboto-v20-latin-ext_latin-100.eot?#iefix) format('embedded-opentype'),
url(//ldirect.hr/wp-content/themes/ldirect/fonts/roboto-v20-latin-ext_latin-100.woff2) format('woff2'),
url(//ldirect.hr/wp-content/themes/ldirect/fonts/roboto-v20-latin-ext_latin-100.woff) format('woff'),
url(//ldirect.hr/wp-content/themes/ldirect/fonts/roboto-v20-latin-ext_latin-100.ttf) format('truetype'),
url(//ldirect.hr/wp-content/themes/ldirect/fonts/roboto-v20-latin-ext_latin-100.svg#Roboto) format('svg');
}
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
src: url(//ldirect.hr/wp-content/themes/ldirect/fonts/roboto-v20-latin-ext_latin-regular.eot);
src: local('Roboto'), local('Roboto-Regular'),
url(//ldirect.hr/wp-content/themes/ldirect/fonts/roboto-v20-latin-ext_latin-regular.eot?#iefix) format('embedded-opentype'),
url(//ldirect.hr/wp-content/themes/ldirect/fonts/roboto-v20-latin-ext_latin-regular.woff2) format('woff2'),
url(//ldirect.hr/wp-content/themes/ldirect/fonts/roboto-v20-latin-ext_latin-regular.woff) format('woff'),
url(//ldirect.hr/wp-content/themes/ldirect/fonts/roboto-v20-latin-ext_latin-regular.ttf) format('truetype'),
url(//ldirect.hr/wp-content/themes/ldirect/fonts/roboto-v20-latin-ext_latin-regular.svg#Roboto) format('svg');
}
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 700;
src: url(//ldirect.hr/wp-content/themes/ldirect/fonts/roboto-v20-latin-ext_latin-700.eot);
src: local('Roboto Bold'), local('Roboto-Bold'),
url(//ldirect.hr/wp-content/themes/ldirect/fonts/roboto-v20-latin-ext_latin-700.eot?#iefix) format('embedded-opentype'),
url(//ldirect.hr/wp-content/themes/ldirect/fonts/roboto-v20-latin-ext_latin-700.woff2) format('woff2'),
url(//ldirect.hr/wp-content/themes/ldirect/fonts/roboto-v20-latin-ext_latin-700.woff) format('woff'),
url(//ldirect.hr/wp-content/themes/ldirect/fonts/roboto-v20-latin-ext_latin-700.ttf) format('truetype'),
url(//ldirect.hr/wp-content/themes/ldirect/fonts/roboto-v20-latin-ext_latin-700.svg#Roboto) format('svg');
}
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 900;
src: url(//ldirect.hr/wp-content/themes/ldirect/fonts/roboto-v20-latin-ext_latin-900.eot);
src: local('Roboto Black'), local('Roboto-Black'),
url(//ldirect.hr/wp-content/themes/ldirect/fonts/roboto-v20-latin-ext_latin-900.eot?#iefix) format('embedded-opentype'),
url(//ldirect.hr/wp-content/themes/ldirect/fonts/roboto-v20-latin-ext_latin-900.woff2) format('woff2'),
url(//ldirect.hr/wp-content/themes/ldirect/fonts/roboto-v20-latin-ext_latin-900.woff) format('woff'),
url(//ldirect.hr/wp-content/themes/ldirect/fonts/roboto-v20-latin-ext_latin-900.ttf) format('truetype'),
url(//ldirect.hr/wp-content/themes/ldirect/fonts/roboto-v20-latin-ext_latin-900.svg#Roboto) format('svg');
}
* {
font-family: 'Roboto', sans-serif;
color: #888;
outline: none !important;
}
body {
font-size: 1.125rem;
}
.h2,
h2 {
font-size: 2.625rem;
}
a,
a:hover {
color: #2b338c;
}
.font-light {
font-weight: 100;
}
.font-bold,
strong {
font-weight: 700;
}
.font-black {
font-weight: 900;
}
.size-54 {
font-size: 3.375rem;
line-height: 1;
}
.color-white,
.color-white * {
color: #fff;
}
.color-blue,
.color-blue *,
th {
color: #2B338C;
}
.col.no-gutter {
padding-left: 0;
padding-right: 0;
}
a.color-white:hover {
color: rgba(255, 255, 255, 0.6);
}
.table td,
.table th {
padding-left: 0;
max-width: 300px;
}
.table th {
text-transform: uppercase;
font-size: 0.875remx;
}
body.home .table td:last-child,
body.home .table th:last-child {
text-align: right;
}
body.home .table {
border-bottom: 1px solid #eee;
}
header {
background: linear-gradient(132.63deg, #2B328C 0%, #3378B8 100.42%);
background-size: contain;
max-width: 100%;
padding: 0;
margin: 0 auto;
height: 180px;
max-height: 180px;
}
body.home header {
height: 100%;
max-height: 100%;
}
.logo img {
width: 150px;
height: 180px;
}
.header-bg {
width: 100%;
margin-bottom: -1%;
margin-top: -300px;
}
.header-content-img {
position: relative;
}
nav a {
font-size: 0.875rem;
}
nav .list-group-item {
background-color: transparent;
border: none;
text-transform: uppercase;
font-weight: 900;
padding: 0 0.7rem;
}
.menu-open {
overflow: hidden;
}
.menu-open .navbar {
height: 190px;
}
.menu-open .navbar-brand {
position: fixed;
z-index: 2;
}
ul {
list-style-position: inside;
padding-left: 0;
}
.header-cta-container {
padding-top: 1rem;
}
.header-cta-container a {
margin: 0 10px;
}
.video-wrapper {
position: relative;
padding-bottom: 56.25%;
background-color: #000;
}
.video-wrapper:after {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
.video-wrapper iframe,
.video-container video {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
}
.elements-wrapper {
background: linear-gradient(170deg, #2B328C, #3378B8);
}
.ldirect .slick-dots li button:before {
font-size: 1.5rem;
}
.btn {
border-radius: 6rem;
font-family: Roboto;
font-style: normal;
font-weight: 900;
font-size: 0.875rem;
text-transform: uppercase;
}
.btn-light,
.btn-primary {
color: #2C3D93;
border: 0px;
padding: 15px 28px;
}
.btn-light:hover,
.btn-primary:hover {
background: linear-gradient(110.38deg, #FECD19 10.33%, #E98F00 89.7%);
border: 0px;
color: white;
}
.btn-outline-light {
padding: 13px 28px;
}
.btn-outline-light:hover {
color: #2C3D93;
}
.btn-primary {
color: #ffffff;
background: linear-gradient(156.88deg, #2B328C 0%, #3378B8 100.42%);
padding: 15px 60px;
}
.featured {
padding: 30px 15px;
height: 200px;
}
.featured:hover {
-webkit-box-shadow: 0px 10px 20px 5px rgba(0, 0, 0, 0.05);
-moz-box-shadow: 0px 10px 20px 5px rgba(0, 0, 0, 0.05);
box-shadow: 0px 10px 20px 5px rgba(0, 0, 0, 0.05);
cursor: pointer;
border-radius: 10px;
}
.featured img {
margin-bottom: 30px;
}
.featured p {
font-size: 1.3125rem;
line-height: 1.75rem;
margin: 0;
}
.featured:hover p {
color: #2E2E2E;
}
.pain-selector {
padding: 25px 10px;
border-left: solid 4px transparent;
transition: all .3s linear;
} .pain-selector.active {
border-left-color: #F3AD0C;
cursor: pointer;
}
.pain-selector h4 {
margin: 0;
}
.pain-selector p {
transition: all .3s linear;
} .pain-selector.active p {
color: #2E2E2E;
}
.question-slider {
background: #F5F5F5;
}
.list-group-item,
.btn {
white-space: nowrap;
}
.circle-pin {
opacity: 0.3;
cursor: pointer;
transition: all .3s linear;
}
.circle-pin.active {
opacity: 1;
}
[data-add] {
width: 32px;
height: 32px;
display: inline-block;
overflow: hidden;
text-indent: -999999px;
}
[data-add="1"] {
background: url(//ldirect.hr/wp-content/themes/ldirect/images/plus.svg) no-repeat 0 0;
}
[data-add="-1"] {
background: url(//ldirect.hr/wp-content/themes/ldirect/images/minus.svg) no-repeat 0 0;
}
#c-kolicina {
height: 32px;
line-height: 32px;
width: auto;
padding: 0 20px;
display: inline-block;
overflow: hidden;
text-align: center;
font-size: 2rem;
}
.cijena {
font-size: 2remx;
line-height: 1;
}
.sum {
padding-top: 30px;
padding-bottom: 10px;
margin-bottom: 10px;
border-bottom: 1px solid #e5e5e5;
}
.question-slider,
.order-block {
background: #F9F9F9;
}
.order-block {
margin-top: 20px;
}
.order-block .col-md {
padding-bottom: 20px;
}
.order-block,
.order-info-block {
padding: 30px;
}
.order-block .col {
margin-bottom: 15px;
}
.order-block .form-control input {
border: 1px solid #E5E5E5;
box-sizing: border-box;
border-radius: 5px;
}
.order-block input::placeholder {
color: #CDCDCD;
}
.collapsing {
transition: none !important;
opacity: 0;
}
.navbar-toggler {
position: fixed;
right: 5%;
z-index: 10;
border: 0;
font-size: 1.875rem;
}
.custom-toggler .navbar-toggler-icon {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(185, 185, 185, 0.95)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}
.nav-order {
display: flex;
align-items: center;
}
.nav-order-num {
padding: 0 15px;
font-weight: 900;
}
.navbar-ldirect {
margin-right: auto;
}
.header-content-title {
padding-top: 0;
}
.header-content-title h3 {
font-size: 3.375rem;
font-weight: bold;
}
.desna p {
margin: 0;
}
#field-privola,
#field-newsletter {
width: 30px;
height: 30px;
cursor: pointer;
}
.chem-elem-txt {
padding: 10px 0;
}
.chem-elem-txt p {
margin: 0;
font-size: 1.5rem;
line-height: 1;
}
.l-r-block {
align-items: center;
}
.sastojci-img {
display: block;
}
#Sastojci .left-block,
#Composition .left-block {
position: sticky;
top: 0;
}
#Sastojci .l-r-block,
#Naruci .l-r-block,
#Composition .l-r-block {
align-items: flex-start;
}
#Naruci .right-block {
margin-top: 20px;
}
#Naruci img {
margin-top: 50px;
}
.ldirect .slick-dots li.slick-active button:before {
color: #2B338C;
}
.ldirect .slick-dots li button:before {
font-size: 3.375rem;
}
.slider .slick-next:before,
.slick-prev:before {
color: #D9D9D9;
font-size: 1.875rem;
}
.slider p {
font-size: 1.5rem;
}
#Uloga .right-block {}
.xl-link-container {
display: flex;
margin-bottom: 0;
align-items: center;
}
.xl-link-container .triangle {
margin-right: 10px;
}
.xl-link {
font-size: 1.5rem;
font-weight: bold;
display: block;
}
.triangle {
position: relative;
background-color: #2B338C;
text-align: left;
display: flex;
}
.triangle:before,
.triangle:after {
content: '';
position: absolute;
background-color: inherit;
}
.triangle,
.triangle:before,
.triangle:after {
width: 0.5em;
height: 0.5em;
border-top-right-radius: 30%;
}
.triangle {
transform: rotate(30deg) skewX(-30deg) scale(1, .866);
}
.triangle:before {
transform: rotate(-135deg) skewX(-45deg) scale(1.414, .707) translate(0, -50%);
}
.triangle:after {
transform: rotate(135deg) skewY(-45deg) scale(.707, 1.414) translate(50%);
}
#c-cijena {
font-size: 2rem;
}
.quantity {
margin-right: 30px;
}
.btn.disabled,
.btn:disabled {
opacity: 0.35;
}
.small-txt {
line-height: 1.3;
font-size: 1.1875rem;
display: block;
}
.custom-control-label:before {
width: 30px;
height: 30px;
cursor: pointer;
}
.custom-checkbox .custom-control-input:checked ~ .custom-control-label::before {
background-color: black;
}
@media (min-width:1200px) and (max-width:1400px) {
.header-bg {
margin-top: -250px;
}
}
@media (min-width:992px) and (max-width:1200px) {
.nav-order-num {
display: none;
}
}
@media (max-width: 1200px) {
.header-bg {
margin-top: 0;
}
}
@media (max-width: 991px) {
#Sastojci .left-block,
#Composition .left-block {
position: relative;
}
.navbar-collapse {
position: fixed;
background: linear-gradient(169.82deg, #2B328C 0%, #3378B8 100.42%);
width: 100vw;
height: 100vh;
top: 0;
left: 50%;
transform: translate(-50%, 0);
z-index: 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
align-content: center;
}
.navbar {
justify-content: center;
padding: 0;
}
.navbar-ldirect {
margin-right: unset;
text-align: center;
}
.list-group-item a {
font-size: 1.875rem;
line-height: 3;
}
.nav-order {
text-align: center;
position: fixed;
bottom: 10%;
flex-direction: column;
}
}
@media (max-width: 992px) {
.navbar-brand {
margin: 0;
}
.header-content {
text-align: center;
}
.header-content-img {
padding-top: 50px;
}
.featured-container {
padding: 15px;
}
.featured {
-webkit-box-shadow: 0px 10px 20px 5px rgba(0, 0, 0, 0.05);
-moz-box-shadow: 0px 10px 20px 5px rgba(0, 0, 0, 0.05);
box-shadow: 0px 10px 20px 5px rgba(0, 0, 0, 0.05);
cursor: pointer;
border-radius: 10px;
margin: 10px;
}
.sastojci-img {
display: none;
}
.desna {
padding-top: 0;
padding-bottom: 0;
flex-direction: row;
overflow: hidden;
}
.pain-slider .slick-dots {
bottom: 0;
}
.pain-slider .slick-slide {
padding-bottom: 30px;
}
.pain-selector {
margin: 0;
padding: 0;
border: none;
transition: all .3s linear;
width: 100%;
min-width: 320px;
text-align: center;
}
.pain-selector.active {
border: 0 solid transparent;
}
.pain-img {
max-width: 440px;
margin: 0 auto;
}
.order-block {
padding: 30px;
}
.slick-arrow {
display: none !important;
}
.slider p {
font-size: 1.125rem;
}
.slider p small {
line-height: 1;
}
#Naruci .right-block {
padding-top: 50px;
display: flex;
flex-direction: column-reverse;
}
.naruci-content {
text-align: center;
}
.xl-link-container {
padding: 15px 0;
}
}
@media (max-width: 768px) {
.chem-elem-left {
padding-bottom: 30px;
}
.chem-elem-txt {
max-width: 330px;
}
.order-block {
background: transparent;
}
}
@media (max-width: 576px) {
.logo img {
max-height: 110px;
}
.header-cta-container {
display: flex;
justify-content: center;
}
.btn-light,
.btn-primary {
color: #2C3D93;
border: 0px;
padding: 15px 20px;
}
.featured-container {
padding: 0;
}
.featured p {
font-size: 1.1rem;
line-height: 1.3;
margin: 0;
}
.menu-open .navbar {
height: 120px;
}
li.list-group-item {
margin: 5% 0;
}
.list-group-item a {
font-size: 1.5rem;
line-height: 1;
}
.list-group-item,
.btn {
white-space: initial;
}
}