@import url("https://fonts.googleapis.com/css2?family=Mulish:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,200;1,300;1,400;1,500;1,600;1,700;1,800&display=swap");
@font-face {font-family: "Turbinado Pro Regular";
src: url(//tropidog.pl/wp-content/themes/tropical-brands/assets/fonts/4341c77b7f74e789b3913578ed8be061.eot); src: url(//tropidog.pl/wp-content/themes/tropical-brands/assets/fonts/4341c77b7f74e789b3913578ed8be061.eot?#iefix) format("embedded-opentype"), url(//tropidog.pl/wp-content/themes/tropical-brands/assets/fonts/4341c77b7f74e789b3913578ed8be061.woff2) format("woff2"), url(//tropidog.pl/wp-content/themes/tropical-brands/assets/fonts/4341c77b7f74e789b3913578ed8be061.woff) format("woff"), url(//tropidog.pl/wp-content/themes/tropical-brands/assets/fonts/4341c77b7f74e789b3913578ed8be061.ttf) format("truetype"), url(//tropidog.pl/wp-content/themes/tropical-brands/assets/fonts/4341c77b7f74e789b3913578ed8be061.svg#Turbinado Pro Regular) format("svg"); }
body, html {
font-family: 'Mulish', sans-serif;
font-size: 100%;
color: #2B2B2B;
}
.btn-check:checked+.btn {
background-color: #ecf4ec !important;
border-color: #3a8b38 !important;
color: #3a8b38 !important
}
.btn-check + .btn {
border-color: #646464;
}
.btn-check:disabled + .btn {
opacity: .5 !important;
cursor: no-drop;
}
p { font-size: clamp(0.875rem, 0.8281rem + 0.2083vw, 1rem);
}
strong {
font-family: 'Mulish', sans-serif;
font-weight: 800;
}
h2, .h2 {
font-size: clamp(1.4rem, 1.175rem + 1vw, 2rem);
}
.anim-in {
opacity: 0;
}
.anim-in.show {
-webkit-animation: fade-in 0.3s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
animation: fade-in 0.3s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
}
@-webkit-keyframes fade-in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes fade-in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.form-control {
height: 50px;
}
textarea.form-control {
height: 120px;
}
.wpcf7-not-valid-tip {
font-size: 12px;
}
.products-card-nav {
height: 100px;
position: relative;
}
.products-card-nav .nav, .products-card-nav .dropdown {
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 0;
}
.products-card-nav .nav.affixed, .products-card-nav .dropdown.affixed {
top: 10px;
bottom: auto;
position: fixed;
}
.products-card-nav .nav-link {
color: #000;
font-weight: 600;
background-color: #fff;
border: 1px solid #000;
}
.nav-pills .nav-link.active, .nav-pills .show>.nav-link {
background-color: var(--wp--preset--color--secondary-dark);
}
.main--header .dropdown-item {
font-size: clamp(0.875rem, 0.8516rem + 0.1042vw, 0.9375rem);
color: #000;
font-family: 'Mulish', sans-serif;
font-weight:700;
}
.btn.btn-outline-dark.show {
border-radius: 24px 24px 0 0 !important;
background-color: #fff !important;
color:var(--wp--preset--color--secondary-dark) !important;
}
.btn.btn-outline-dark.show + .dropdown-menu{
transform: translate(0px, 48px) !important;
}
.btn-outline-primary {
background-color: transparent !important;
color: var(--wp--preset--color--primary-green) !important;
border-color: var(--wp--preset--color--primary-green) !important;
}
.hero--carousel {
min-height: 434px;
}
.handwriting {
font-family:"Turbinado Pro Regular";
}
.card-icons--section h3 {
font-size: 40px;
}
.card-icons--section p {
font-size: 16px;
}
.products--icons .ico {
width: 45px;
height: 45px;
}
.product--view {
position: relative;
}
.product--view img {
z-index: 2;
position: relative;
}
.product--view .deco {
content:"";
display: inline-block;
width: 75%;
height: 75%;
position: absolute;
left: 50%;
top: 50%;
z-index: 1;
transform: translate(-50%, -50%);
background-color: var(--wp--preset--color--primary-green);
border-radius: 100%;
}
.products--carousel .product--view img {
max-height: 525px;
}
.product-card {
text-decoration: none;
color: var(--wp--preset--color--secondary-dark);
}
.product-card .product--view .deco {
width: 75%;
height: 75%;
}
.slides--section h3 {
font-size: clamp(2.1875rem, 1.8359rem + 1.5625vw, 3.125rem);
} .media-cta--section .media-wrapper {
background-position: center;
background-size: cover;
background-repeat: no-repeat;
min-height: 600px;
font-size: clamp(1rem, 0.9063rem + 0.4167vw, 1.25rem);
position: relative;
}
.media-cta--section .media-wrapper::before {
content: "";
display: block;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 1;
background: rgb(0,0,0);
background: -moz-linear-gradient(100deg, rgba(0,0,0,0.7525385154061625) 0%, rgba(0,0,0,0) 100%);
background: -webkit-linear-gradient(100deg, rgba(0,0,0,0.7525385154061625) 0%, rgba(0,0,0,0) 100%);
background: linear-gradient(100deg, rgba(0,0,0,0.7525385154061625) 0%, rgba(0,0,0,0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#000000",endColorstr="#000000",GradientType=1);
}
.media-cta--section .media-wrapper h3 {
font-size: clamp(2.125rem, 1.6328rem + 2.1875vw, 3.4375rem);
}
.media-cta--section .media-wrapper .lead {
text-transform: uppercase;
font-family: 'Mulish', sans-serif;
font-weight: 800;
font-size: clamp(1.25rem, 0.9688rem + 1.25vw, 2rem);
}
.col-cta--section .col-media-wrapper {
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
.col-cta--section h3 {
text-transform: uppercase;
font-family: 'Mulish', sans-serif;
font-weight: 800;
font-size: clamp(1.25rem, 0.9688rem + 1.25vw, 2rem);
}
.col-cta--section p, .col-cta--section ol, .col-cta--section ul {
font-size: clamp(1rem, 0.9063rem + 0.4167vw, 1.25rem);
} .form-check-input[type=checkbox] {
border-radius: 16px;
}
.form-check-input:checked {
background-color: var(--wp--preset--color--primary-green);
border-color: var(--wp--preset--color--primary-green);
}
.form-check-input:focus {
box-shadow: 0 0 0 0.25rem rgba(58,139,56,.25);
}
.products-list--section .form-check {
text-transform: uppercase;
} .products--carousel.slick-slider {
position: relative;
}
.slick-arrow, .post-page-numbers  {
width: 45px;
height: 45px;
border-radius: 45px;
border: none;
background-color: #2B2B2B;
display: flex;
font-size: 0px;
color:#2B2B2B;
overflow: hidden;
padding: 0;
position: absolute;
top: 50%;
left: -22.5px;
z-index: 1;
transform: translateY(-50%);
}
.slick-arrow.slick-next {
left: auto;
right: -22.5px;
}
.slick-arrow:after {
content: "->";
position: absolute;
font-family: "Turbinado Pro Regular";
font-size: 40px;
color: #fff;
left: 0;
top: 0;
line-height: 47px;
width: 100%;
height: 100%;
}
.slick-arrow.slick-prev:after {
transform: rotate(180deg);
}
.slick-arrow.slick-disabled {
background-color: #EFEFEF;
cursor: not-allowed;
}
.slick-arrow.slick-disabled::after {
color: #2B2B2B
}
.post-page-numbers {
position: relative !important;
top: 0 !important;
left: 0 !important;
background-color: #EFEFEF !important;
transform: translateY(0%) !important;
justify-content: center;
align-items: center;
font-weight: 700!important;
font-size: .875em;
text-decoration: none;
}
.post-page-numbers.current {
background-color: #3a8b38 !important;
color: #fff
}
.products--carousel .item.slick-slide:not(.slick-active) .product--view img,
.heroProductCarousel .slick-slide:not(.slick-active) .product--view img {
-webkit-transform: translateX(-1000px);
transform: translateX(-1000px);
opacity: 0;
}
.products--carousel .item.slick-slide.slide-out .product--view img,
.heroProductCarousel .slick-slide.slide-out .product--view img {
-webkit-animation: slide-out-left 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
animation: slide-out-left 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
}
.products--carousel .item.slick-slide.slick-current.slick-active .product--view img,
.heroProductCarousel .slick-slide.slick-current.slick-active .product--view img {
-webkit-animation: slide-in-left 0.5s cubic-bezier(0, 0.48, 0.3, 1.08) .3s both;
animation: slide-in-left 0.5s cubic-bezier(0, 0.48, 0.3, 1.08) .3s both;
}
.products--carousel .item.slick-slide:not(.slick-active) h3, .products--carousel .item.slick-slide:not(.slick-active) h3 + p, .products--carousel .item.slick-slide:not(.slick-active) .products--icons, .products--carousel .item.slick-slide:not(.slick-active) .products--icons + p, .products--carousel .item.slick-slide:not(.slick-active) .btn {
-webkit-transform: translateY(50px);
transform: translateY(50px);
opacity: 0;
}
.products--carousel .item.slick-slide.slick-current.slick-active h3 {
-webkit-animation: slide-in-bottom 0.3s cubic-bezier(0, 0.33, 0.17, 1) .5s both;
animation: slide-in-bottom 0.3s cubic-bezier(0, 0.33, 0.17, 1) .5s both;
}
.products--carousel .item.slick-slide.slick-current.slick-active h3 + p {
-webkit-animation: slide-in-bottom 0.3s cubic-bezier(0, 0.33, 0.17, 1) .55s both;
animation: slide-in-bottom 0.3s cubic-bezier(0, 0.33, 0.17, 1) .55s both;
}
.products--carousel .item.slick-slide.slick-current.slick-active .products--icons {
-webkit-animation: slide-in-bottom 0.3s cubic-bezier(0, 0.33, 0.17, 1) .6s both;
animation: slide-in-bottom 0.3s cubic-bezier(0, 0.33, 0.17, 1) .6s both;
}
.products--carousel .item.slick-slide.slick-current.slick-active .products--icons + p {
-webkit-animation: slide-in-bottom 0.3s cubic-bezier(0, 0.33, 0.17, 1) .65s both;
animation: slide-in-bottom 0.3s cubic-bezier(0, 0.33, 0.17, 1) .65s both;
}
.products--carousel .item.slick-slide.slide-out h3 {
-webkit-animation: slide-out-bottom 0.3s cubic-bezier(0.02, 0.71, 0.39, 0.99) .25s both;
animation: slide-out-bottom 0.3s cubic-bezier(0.02, 0.71, 0.39, 0.99) .25s both;
}
.products--carousel .item.slick-slide.slide-out h3 + p {
-webkit-animation: slide-out-bottom 0.3s cubic-bezier(0.02, 0.71, 0.39, 0.99) .2s both;
animation: slide-out-bottom 0.3s cubic-bezier(0.02, 0.71, 0.39, 0.99) .2s both;
}
.products--carousel .item.slick-slide.slide-out .products--icons {
-webkit-animation: slide-out-bottom 0.3s cubic-bezier(0.02, 0.71, 0.39, 0.99) .15s both;
animation: slide-out-bottom 0.3s cubic-bezier(0.02, 0.71, 0.39, 0.99) .15s both;
}
.products--carousel .item.slick-slide.slide-out .products--icons + p {
-webkit-animation: slide-out-bottom 0.3s cubic-bezier(0.02, 0.71, 0.39, 0.99) .1s both;
animation: slide-out-bottom 0.3s cubic-bezier(0.02, 0.71, 0.39, 0.99) .1s both;
}
.products--carousel .item.slick-slide.slide-out .btn {
-webkit-animation: slide-out-bottom 0.3s cubic-bezier(0.02, 0.71, 0.39, 0.99) both;
animation: slide-out-bottom 0.3s cubic-bezier(0.02, 0.71, 0.39, 0.99) both;
}
@-webkit-keyframes slide-in-left { 
0% {
-webkit-transform: translateX(-1000px);
transform: translateX(-1000px);
opacity: 0;
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
opacity: 1;
}
}
@keyframes slide-in-left {
0% {
-webkit-transform: translateX(-1000px);
transform: translateX(-1000px);
opacity: 0;
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
opacity: 1;
}
}
@-webkit-keyframes slide-out-left {
0% {
-webkit-transform: translateX(0);
transform: translateX(0);
opacity: 1;
}
100% {
-webkit-transform: translateX(-1000px);
transform: translateX(-1000px);
opacity: 0;
}
}
@keyframes slide-out-left {
0% {
-webkit-transform: translateX(0);
transform: translateX(0);
opacity: 1;
}
100% {
-webkit-transform: translateX(-1000px);
transform: translateX(-1000px);
opacity: 0;
}
}
@-webkit-keyframes slide-in-bottom {
0% {
-webkit-transform: translateY(50px);
transform: translateY(50px);
opacity: 0;
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
opacity: 1;
}
}
@keyframes slide-in-bottom {
0% {
-webkit-transform: translateY(50px);
transform: translateY(50px);
opacity: 0;
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
opacity: 1;
}
}
@-webkit-keyframes slide-out-bottom {
0% {
-webkit-transform: translateY(0);
transform: translateY(0);
opacity: 1;
}
100% {
-webkit-transform: translateY(50px);
transform: translateY(50px);
opacity: 0;
}
}
@keyframes slide-out-bottom {
0% {
-webkit-transform: translateY(0);
transform: translateY(0);
opacity: 1;
}
100% {
-webkit-transform: translateY(50px);
transform: translateY(50px);
opacity: 0;
}
}
.quiz-filter--section .quiz-wrapper .choice {
text-decoration: none;
color: #2B2B2B;
text-transform: uppercase;
}
.quiz-filter--section .quiz-wrapper p {
font-size: 16px;
}
.quiz-filter--section .quiz-wrapper .choice .icon {
transition: all .2s cubic-bezier(0.250, 0.460, 0.450, 0.940);
color: var(--wp--preset--color--primary-green);
}
.quiz-filter--section .quiz-wrapper .choice:hover .icon {
transform: scale(.9);
}
.quiz-filter--section .quiz-wrapper .choice.selected .icon {
transform: scale(.9);
}
.quiz-filter--section .quiz-wrapper .choice.selected .icon path {
fill: var(--wp--preset--color--secondary-dark);
}
.quiz-filter--section .quiz-wrapper .btn-next {
font-size: 35px;
width: 45px;
height: 45px;
font-family: "Turbinado Pro Regular";
line-height: 50px;
cursor: pointer;
}
.quiz-filter--section .quiz-wrapper .cta-step {
background-position: right bottom;
background-repeat: no-repeat;
background-size: 80%;
}
.slick-dots {
display: flex;
justify-content: center;
padding: 0;
margin: 0;
position: absolute;
bottom: 24px;
left: 50%;
transform: translateX(-50%);
z-index: 2;
}
.slick-dots li {
display: flex;
padding: 5px;
}
.slick-dots li button {
display: flex;
border-radius: 20px;
border: 0;
box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important;
width: 20px;
height: 20px;
background-color: #fff;
overflow: hidden;
text-indent: -9999px;
}
.slick-dots li.slick-active button {
box-shadow: none !important;
} .main--footer .custom-logo {
max-width: 180px;
height: auto;
margin-bottom: 24px;
}
.main--footer p {
font-size: 16px;
}
.main--footer .nav .nav-link {
font-weight: 700;
color: #2B2B2B;
}
.hero--section h1 {
font-size: clamp(4rem, 3.5313rem + 2.0833vw, 5.25rem);
}
.hero--section p {
font-size: clamp(1rem, 0.9063rem + 0.4167vw, 1.25rem);
} .bg-primary {
background-color: var(--wp--preset--color--primary-green) !important;
}
.btn-primary {
background-color: var(--wp--preset--color--primary-green) !important;
border-color: var(--wp--preset--color--primary-green) !important;
}
.text-primary {
color:var(--wp--preset--color--primary-green) !important;
}
.btn-secondary {
background-color: var(--wp--preset--color--secondary-dark) !important;
border-color: var(--wp--preset--color--secondary-dark) !important;
}
.btn-info {
background-color: var(--wp--preset--color--light-blue) !important;
border-color: var(--wp--preset--color--light-blue) !important;
}
.bg-info {
background-color: var(--wp--preset--color--light-blue) !important;
} .newsletter--section h3 {
font-size: clamp(2rem, 1.625rem + 1.6667vw, 3rem);
}
.newsletter--section .lead {
font-size: clamp(1.125rem, 0.9844rem + 0.625vw, 1.5rem);
} .socialmedia--section .instagram-media {
height: 330px;
}
.main--wrapper {
padding-top: 146px !important;
}
body.products-template-default .main--wrapper,
body.page-template-products .main--wrapper,
body.page-template-blog .main--wrapper,
body.post-template-default .main--wrapper,
body.hodowle-template-default .main--wrapper {
padding-top: 0 !important;
}
body.products-template-default .main--wrapper .product--hero,
body.page-template-products .main--wrapper .product--hero,
body.page-template-blog .main--wrapper .blog--hero,
body.post-template-default .main--wrapper .posts--hero,
body.hodowle-template-default .main--wrapper .posts--hero {
padding-top: 146px !important;
}
body.products-template-default .main--wrapper .product--hero p,
body.page-template-products .main--wrapper .product--hero p,
body.page-template-blog .main--wrapper .blog--hero p,
body.post-template-default .main--wrapper .posts--hero p,
body.hodowle-template-default .main--wrapper .posts--hero p {
font-size: clamp(0.875rem, 0.8281rem + 0.2083vw, 1rem);
}
.cover--hero {
background-repeat: no-repeat;
background-size: cover;
background-position: center;
min-height: 430px;
position: relative;
}
.cover--hero::before {
content: "";
display: block;
width: 50%;
top: 0;
left: 0;
height: 100%;
position: absolute;
pointer-events: none;
background: rgb(0,0,0);
background: -moz-linear-gradient(100deg, rgba(0,0,0,0.7525385154061625) 0%, rgba(0,0,0,0) 100%);
background: -webkit-linear-gradient(100deg, rgba(0,0,0,0.7525385154061625) 0%, rgba(0,0,0,0) 100%);
background: linear-gradient(100deg, rgba(0,0,0,0.7525385154061625) 0%, rgba(0,0,0,0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#000000",endColorstr="#000000",GradientType=1);
z-index: 0;
}
.svg-map path {
cursor: pointer;
}
.svg-map path:hover {
opacity: .5;
}
.svg-map path.active {
fill: var(--wp--preset--color--secondary-dark);
}
.product--hero .overlay {
pointer-events: none;
}
.main--header {
position: absolute;
z-index: 10;
top: 0;
left: 0;
width: 100%;
}
.main--header .custom-logo {
max-height: 44px;
width: auto;
}
.main--header .dropdown-menu {
min-width: 1px ;
} .main--header .nav-item {
position: relative;
}
.main--header .nav-link {
font-size: 15px;
color: #000;
font-family: 'Mulish', sans-serif;
font-weight: 700;
padding-left:2rem !important;
padding-right: 2rem !important;
line-height: 1;
position: relative;
transition: all .2s ease-out;
}
.main--header .dropdown-item {
padding-left:2rem !important;
padding-right: 2rem !important;
}
.main--header .nav-item::after {
content: "";
width: 6px;
height: 6px;
display: block;
position: absolute;
border-radius: 6px;
background-color: var(--wp--preset--color--primary-green);
bottom: 0;
left: calc(50% - 3px);
transform: translateY(-11px);
transition: all .2s ease-out;
opacity: 0;
}
.main--header .nav-item:hover::after,
.main--header .nav-item.current-menu-item::after {
transform: translateY(0);
opacity: 1;
}
.main--header .nav-item:hover .nav-link,
.main--header .nav-item.current-menu-item .nav-link {
transform: translateY(-3px);
}
.nav-tabs {
border-bottom: 2px solid var(--wp--preset--color--primary-green)
}
.nav-tabs .nav-link {
color: var(--wp--preset--color--secondary-dark);
}
.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
color: #fff;
background-color: var(--wp--preset--color--primary-green);
border-color: var(--wp--preset--color--primary-green);
}
.full-width-image .col-md-6 {
position: relative;
z-index: 1;
}
.full-width-image .background {
position: absolute;
height: 70%;
width: 100%;
top: 50%;
left: 0;
z-index: 0;
transform: translateY(-50%);
}
section.dose .overflow-scroll {
overflow: visible!important;
}
@media (max-width: 1199.98px) {
.main--header .nav-link, .main--header .dropdown-item {
padding-left: 1.5rem !important;
padding-right: 1.5rem !important;
}
}
@media (max-width: 991.98px) {
.main--header .nav-link, .main--header .dropdown-item {
padding-left: 1rem !important;
padding-right: 1rem !important;
}
.main--header .custom-logo {
max-height: 32px;
}
.full-width-image .background {
height: 225px;
}
}
@media (max-width: 767.98px) {
.main--header .nav-link, .main--header .dropdown-item {
font-size: 18px;
padding-left: 0 !important;
padding-right: 0 !important;
}
section.dose .overflow-scroll {
overflow: scroll!important;
}
.slick-arrow {
left: 0px;
}
.products--carousel .slick-arrow {
}
.slick-arrow.slick-next {
right: 0px;
}
.main--header .dropdown .nav-link {
font-size: 14px;
}
.media-cta--section .media-wrapper {
min-height: 400px;
}
.col-cta--section .col-media-wrapper {
background-image: none !important;
}
.col-cta--section .col-media-wrapper img {
opacity: 1 !important;
}
.quiz-filter--section .quiz-wrapper .cta-step {
background-image: none !important;
min-height: 1px;
}
.cover--hero {
min-height: 100px;
}
.main--wrapper {
padding-top: 70px !important;
}
body.products-template-default .main--wrapper .product--hero, body.page-template-products .main--wrapper .product--hero, body.page-template-blog .main--wrapper .blog--hero, body.post-template-default .main--wrapper .posts--hero {
padding-top: 80px !important;
}
.main--header .nav-item::after {
left: 0;
bottom: auto;
top: calc(50% - 3px);
transform: translateX(-11px);
}
.main--header .nav-item:hover::after,
.main--header .nav-item.current-menu-item::after {
transform: translateX(0);
}
.main--header .nav-item:hover .nav-link,
.main--header .nav-item.current-menu-item .nav-link {
transform: translateX(12px);
}
.quiz-filter--section .quiz-wrapper .choice {
width: 50% !important;
}
.quiz-filter--section .quiz-wrapper .choice { 
border: none !important
}
.quiz-filter--section .quiz-wrapper .mobile-col-2 .choice {
width: 50% !important;
}
.full-width-image .background {
height: calc(100% - 92px);
top: 100px;
transform: translateY(0);
}
.products--carousel .slick-arrow {
transform: translateY(0);
top: 25%
}
}
@media (max-width: 400px) {
.products--carousel .slick-arrow {
transform: translateY(0);
top: 20%
}
}