@charset "UTF-8";
 html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
} article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
display: block;
}
body {
line-height: 1;
}
ol,
ul {
list-style: none;
}
blockquote,
q {
quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
content: "";
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
html {
box-sizing: border-box;
font-family: "Montserrat", sans-serif;
font-weight: 300;
font-size: 18px;
background-color: white;
color: black;
animation: fadein 1s;
}
@keyframes fadein {
from {
opacity: 0.9;
}
to {
opacity: 1;
}
}
body {
height: 100%;
}
*,
*:before,
*:after {
font-family: inherit;
box-sizing: inherit;
}
img {
max-width: 100%;
}
h1 {
font-size: 2rem;
}
h2 {
font-size: 1.5rem;
}
h3 {
font-size: 1rem;
}
li {
list-style: none;
}
a {
color: black;
text-decoration: none;
}
span {
color: black;
}
svg {
width: 3em;
height: 2em;
}
.container {
width: 80%;
max-width: 150rem;
margin: 0 auto;
}
.visually-hidden {
clip: rect(0 0 0 0);
clip-path: inset(50%);
height: 1px;
overflow: hidden;
position: absolute;
white-space: nowrap;
width: 1px;
}
@media screen and (max-width: 950px) {
html {
min-height: 0;
height: 100%;
overflow-x: hidden;
width: 100%;
}
body {
width: 100%;
scrollbar-width: none;
overflow-x: hidden;
max-height: 100%;
}
.bodyHidden {
overflow: hidden;
scrollbar-width: none;
}
}
.landing {
min-height: 100vh;
background-image: url(//turiya.com.hr/wp-content/themes/turiya/web/assets/landingpage.jpg);
background-repeat: no-repeat;
background-size: cover;
position: relative;
}
.landing__logo {
text-align: center;
position: absolute;
top: 40%;
left: 18.3%;
width: 60%;
transition: 0.5s;
}
.landing__logo:hover {
transition: 2.5s;
filter: invert(94%) sepia(94%) saturate(0%) hue-rotate(186deg) brightness(100%) contrast(100%);
}
@media screen and (max-width: 950px) {
.landing {
background-image: none;
}
.landing__logo {
width: 100%;
left: 0;
}
}
.navigation {
top: 0;
left: 0;
background-color: #f9f6f2;
height: 5rem;
padding-top: 1em;
width: 100%;
position: sticky;
z-index: 9999;
}
.navigation__wrapper {
display: flex;
align-items: center;
justify-content: space-between;
}
.navigation img {
width: 15rem;
height: 3rem;
}
.navigation ul {
display: flex;
justify-content: space-around;
width: 50%;
height: 3rem;
background: #f9f6f2;
list-style: none;
margin: 0;
padding-left: 0;
text-align: center;
box-sizing: content-box;
}
.navigation li {
color: transparent;
background: #f9f6f2;
font-size: 1rem;
display: block;
float: left;
padding-top: 1em;
padding-bottom: 1em;
transition: 0.5s;
position: relative;
text-decoration: none;
min-width: 8rem;
}
.navigation li a {
color: black;
}
.navigation li:hover {
background: LightGray;
cursor: pointer;
}
.navigation ul li ul {
visibility: hidden;
opacity: 0;
width: 100%;
position: relative;
transition: all 0.5s ease;
margin-top: 1rem;
left: 0;
display: none;
}
.navigation ul li:hover > ul,
.navigation ul li:focus-within > ul,
.navigation ul li ul:hover {
visibility: visible;
opacity: 1;
display: block;
}
.navigation ul li ul li {
clear: both;
padding-top: 1.5em;
padding-bottom: 1em;
min-width: 8rem;
}
.burger {
display: none;
}
.burger div {
display: block;
width: 20px;
height: 2px;
background-color: black;
margin: 5px;
transition: all 0.7s ease;
overflow-x: hidden;
}
@media screen and (max-width: 950px) {
.navigation .list {
position: absolute;
right: 0px;
top: 90%;
background-color: #f9f6f2;
z-index: 1000;
padding-top: 2rem;
color: black;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
width: 100%;
transform: translateX(100%);
transition: transform 0.4s ease-in;
-webkit-transition: transform 0.4s ease-in;
-moz-transition: transform 0.4s ease-in;
}
.navigation .list li {
opacity: 0;
width: 100%;
background-color: #f9f6f2;
font-size: 1.5rem;
}
.navigation ul li ul {
width: 100%;
align-items: center;
position: relative;
}
.navigation ul li ul li {
display: inline-block;
font-size: 1.2rem;
}
.burger {
display: block;
cursor: pointer;
}
.navigation .navigation__wrapper-active {
position: absolute;
transform: translateX(0%);
overflow-x: hidden;
z-index: 9999;
height: 100vh;
}
@keyframes listFade {
from {
opacity: 0;
transform: translateX(50px);
}
to {
opacity: 1;
transform: translateX(0px);
}
}
.toggle .line1 {
transition: transform 0.5s ease-in;
transform: rotate(-45deg) translate(-5px, 5px);
}
.toggle .line2 {
opacity: 0;
}
.toggle .line3 {
transition: transform 0.5s ease-in;
transform: rotate(45deg) translate(-5px, -5px);
}
}
section {
width: 100%;
height: 90vh;
overflow: auto;
}
.homeslider {
background-repeat: no-repeat;
background-position-x: center;
background-size: cover;
background-position: 0 100%;
animation: changeBckg 50s ease infinite alternate;
-webkit-animation: changeBckg changeDelay 50s ease infinite alternate;
-moz-animation: changeBckg changeDelay 50s ease infinite alternate, changeDelay 50s ease infinite alternate;
-ms-animation: changeBckg changeDelay 50s ease infinite alternate;
-o-animation: changeBckg changeDelay 50s ease infinite alternate;
}
@-webkit-keyframes changeBckg {
0% {
background-image: url(//turiya.com.hr/wp-content/themes/turiya/web/assets/home1.jpg), url(//turiya.com.hr/wp-content/themes/turiya/web/assets/home2.jpg);
}
25% {
background-image: url(//turiya.com.hr/wp-content/themes/turiya/web/assets/home2.jpg), url(//turiya.com.hr/wp-content/themes/turiya/web/assets/home3.jpg);
}
50% {
background-image: url(//turiya.com.hr/wp-content/themes/turiya/web/assets/home3.jpg), url(//turiya.com.hr/wp-content/themes/turiya/web/assets/home4.jpg);
}
75% {
background-image: url(//turiya.com.hr/wp-content/themes/turiya/web/assets/home4.jpg), url(//turiya.com.hr/wp-content/themes/turiya/web/assets/home5.jpg);
}
100% {
background-image: url(//turiya.com.hr/wp-content/themes/turiya/web/assets/home5.jpg);
}
}
@keyframes changeBckg {
0% {
background-image: url(//turiya.com.hr/wp-content/themes/turiya/web/assets/home1.jpg), url(//turiya.com.hr/wp-content/themes/turiya/web/assets/home2.jpg);
}
25% {
background-image: url(//turiya.com.hr/wp-content/themes/turiya/web/assets/home2.jpg), url(//turiya.com.hr/wp-content/themes/turiya/web/assets/home3.jpg);
}
50% {
background-image: url(//turiya.com.hr/wp-content/themes/turiya/web/assets/home3.jpg), url(//turiya.com.hr/wp-content/themes/turiya/web/assets/home4.jpg);
}
75% {
background-image: url(//turiya.com.hr/wp-content/themes/turiya/web/assets/home4.jpg), url(//turiya.com.hr/wp-content/themes/turiya/web/assets/home5.jpg);
}
100% {
background-image: url(//turiya.com.hr/wp-content/themes/turiya/web/assets/home5.jpg);
}
}
@-moz-keyframes changeBckg {
0% {
-moz-background-image: url(//turiya.com.hr/wp-content/themes/turiya/web/assets/home1.jpg), url(//turiya.com.hr/wp-content/themes/turiya/web/assets/home2.jpg);
}
25% {
-moz-background-image: url(//turiya.com.hr/wp-content/themes/turiya/web/assets/home2.jpg), url(//turiya.com.hr/wp-content/themes/turiya/web/assets/home3.jpg);
}
50% {
-moz-background-image: url(//turiya.com.hr/wp-content/themes/turiya/web/assets/home3.jpg), url(//turiya.com.hr/wp-content/themes/turiya/web/assets/home4.jpg);
}
75% {
-moz-background-image: url(//turiya.com.hr/wp-content/themes/turiya/web/assets/home4.jpg), url(//turiya.com.hr/wp-content/themes/turiya/web/assets/home5.jpg);
}
100% {
-moz-background-image: url(//turiya.com.hr/wp-content/themes/turiya/web/assets/home5.jpg);
}
}
@keyframes changeDelay {
0% {
animation-timing-function: 0s;
}
25% {
animation-timing-function: 6s;
}
50% {
animation-timing-function: 12s;
}
75% {
animation-timing-function: 18s;
}
100% {
animation-timing-function: 24s;
}
}
@-webkit-keyframes changeDelay {
0% {
animation-timing-function: 0s;
}
25% {
animation-timing-function: 6s;
}
50% {
animation-timing-function: 12s;
}
75% {
animation-timing-function: 18s;
}
100% {
animation-timing-function: 24s;
}
}
@-moz-keyframes changeDelay {
0% {
-moz-animation-timing-function: 0s;
}
25% {
-moz-animation-timing-function: 6s;
}
50% {
-moz-animation-timing-function: 12s;
}
75% {
-moz-animation-timing-function: 18s;
}
100% {
-moz-animation-timing-function: 24s;
}
}
.dea {
background: url(//turiya.com.hr/wp-content/themes/turiya/web/assets/dea.jpg);
background-repeat: no-repeat;
background-position-x: center;
background-size: cover;
background-position: 0 20%;
}
.bojan {
background: url(//turiya.com.hr/wp-content/themes/turiya/web/assets/bojan.jpg);
background-repeat: no-repeat;
background-position-x: center;
background-size: cover;
background-position: 0 40%;
}
.whatwedo {
background: url(//turiya.com.hr/wp-content/themes/turiya/web/assets/whatwedo.jpg);
background-repeat: no-repeat;
background-position-x: center;
background-size: cover;
background-position: 0 80%;
}
.contacts {
background: url(//turiya.com.hr/wp-content/themes/turiya/web/assets/contacts.jpg);
background-repeat: no-repeat;
background-position-x: center;
background-size: cover;
}
.friends {
background: url(//turiya.com.hr/wp-content/themes/turiya/web/assets/friends.jpg);
background-repeat: no-repeat;
background-position-x: center;
background-size: cover;
}
@media screen and (max-width: 1024px) {
section {
min-height: 100%;
margin-top: 0;
}
}
@media screen and (max-width: 950px) {
section {
min-height: 90%;
height: auto;
color: black;
}
.homeslider { background-position: center;
z-index: -1000;
}
.dea {
background: none;
}
.bojan {
background: none;
}
.whatwedo {
background: none;
}
.contacts {
background: none;
}
.friends {
background: none;
}
}
.left__wrapper_first {
display: block;
animation: fade 2s;
z-index: -9999;
padding-bottom: 4rem;
}
.left__wrapper_first1 {
display: none;
z-index: -9999;
}
.left__wrapper_second {
display: none;
z-index: -9999;
}
.left__wrapper_second1 {
display: block;
animation: fade 2s;
z-index: -9999;
padding-bottom: 4rem;
}
.left__main {
padding-top: 2rem;
padding-bottom: 2rem;
color: white;
}
.left__smain {
font-size: 2rem;
padding-top: 2rem;
padding-bottom: 2rem;
color: white;
}
.left__submain {
font-size: 2rem;
padding-top: 4rem;
padding-bottom: 2rem;
color: white;
}
.left__text {
color: white;
max-width: 40rem;
line-height: 1.5rem;
font-size: 1.3rem;
padding-bottom: 1.5em;
}
.left__text a {
color: white;
}
.left__wrapper_img {
display: flex;
flex-direction: row;
}
.left__wrapper_img img {
width: 80%;
}
.left__wrapper_imgg {
display: none;
}
@keyframes fade {
0%, 50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@media screen and (max-width: 950px) {
.left__main {
color: black;
text-align: center;
font-size: 2rem;
}
.left__wrapper_small p {
font-size: 0.8rem;
text-align: center;
}
.left__wrapper_img {
display: none;
}
.left__wrapper_imgg {
display: flex;
flex-direction: column;
}
.left__submain {
color: black;
text-align: center;
font-size: 2rem;
}
.left__smain {
font-size: 2rem;
color: black;
}
.left__text {
color: black;
font-size: 1rem;
}
.left__text a {
color: black;
}
}
.right__wrapper {
display: flex;
justify-content: space-between;
padding-bottom: 4rem;
}
.right__main {
padding-top: 1.2em;
padding-bottom: 1.5rem;
color: white;
}
.right__text {
color: white;
height: auto;
max-width: 40rem;
line-height: 1.5rem;
font-size: 1.2rem;
font-weight: 350;
padding-bottom: 1.5em;
}
@media screen and (min-width: 951px) and (max-width: 1600px) {
.right__main {
color: white;
}
.right__submain {
color: white;
}
.right__text {
color: white;
font-size: 1rem;
line-height: 1.5;
}
.right__text a {
color: white;
}
}
@media screen and (min-width: 689px) and (max-width: 950px) {
.right__main {
color: black;
font-size: 3rem;
text-align: center;
}
.right__submain {
color: black;
text-align: center;
}
.right__text {
color: black;
font-size: 1.5rem;
text-align: center;
line-height: 1.5;
}
.right__text a {
color: black;
}
}
@media screen and (max-width: 688px) {
.right__main {
color: black;
font-size: 2rem;
text-align: center;
}
.right__submain {
color: black;
text-align: center;
}
.right__text {
color: black;
font-size: 1rem;
text-align: center;
}
.right__text a {
color: black;
}
.empty {
display: none;
}
}
.contentBox {
padding-top: 2rem;
padding-bottom: 4rem;
}
.contentBox__main {
background-color: transparent;
color: #f9f6f2;
cursor: pointer;
padding: 18px;
width: 60%;
border: none;
font-weight: lighter;
text-align: left;
outline: none;
font-size: 2rem;
transition: 0.4s;
}
.contentBox__main:after {
content: "+";
color: transparent;
float: right;
margin-left: 0.5rem;
}
.contentBox__text {
width: 60%;
padding: 0 18px;
background-color: transparent;
max-height: 0;
overflow: hidden;
transition: max-height 0.4s ease-out;
margin-top: 0.5rem;
margin-bottom: 0.5rem;
line-height: 1.5em;
}
.contentBox__text_para {
padding: 0.5em 0 0.5em 0.5em;
color: white;
text-indent: -1.1em;
font-size: 1.2rem;
}
.active,
.contentBox__main:hover {
background-color: #f9f6f2;
color: black;
}
.active:after {
content: "−";
}
@media screen and (max-width: 1630px) {
.contentBox__main {
color: white;
width: 100%;
font-size: 2rem;
}
}
@media screen and (max-width: 1005px) {
.contentBox__main {
font-size: 1.8rem;
}
}
@media screen and (max-width: 950px) {
.contentBox__main {
text-align: center;
color: black;
width: 100%;
font-size: 1.5rem;
}
.contentBox__text {
width: 100%;
text-align: center;
}
.contentBox__text_para {
font-size: 1rem;
color: black;
}
}
@media screen and (max-width: 688px) {
.contentBox__main {
text-align: center;
color: black;
width: 100%;
font-size: 1.5rem;
}
.contentBox__text {
width: 100%;
text-align: center;
}
.contentBox__text_para {
font-size: 1rem;
color: black;
}
}
.footer {
bottom: 0;
left: 0;
position: fixed;
margin: 0 auto -8.8rem;
transition: all 1s ease;
width: 100%;
background-color: #f9f6f2;
height: 9.5rem;
padding: 1em;
}
.footer__dots {
display: flex;
flex-direction: row;
justify-content: center;
position: relative;
top: -10%;
}
.footer__dots_dot {
border: 1px solid LightGray;
background-color: LightGray;
width: 5px;
height: 5px;
border-radius: 50%;
margin-left: 0.5rem;
}
.footer__title {
margin-bottom: 2rem;
}
.footer__list {
margin-top: 1rem;
}
.footer__list_item {
font-size: 0.8rem;
display: flex;
flex-direction: column;
line-height: 0.5em;
}
.footer__social {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 1em;
padding-bottom: 1em;
font-size: 0.8rem;
}
.footer:hover {
transition: all 1s ease;
margin: 0 auto;
}
@media screen and (max-width: 950px) {
.footer {
position: relative;
height: auto;
}
.footer__dots_dot {
display: none;
}
.footer__hide {
display: none;
}
.footer__info {
text-align: center;
}
.footer__social {
display: flex;
flex-direction: column-reverse;
flex-wrap: wrap;
}
.footer__social_icons {
padding-top: 0.5rem;
}
.footer__social_span {
padding-top: 1rem;
}
}