html {
scroll-behavior: smooth;
margin: 0;
padding: 0;
}
body {
margin: 0;
padding: 0;
background-color: #333;
color: #f1f1f1;
overflow-x:hidden;
font-family: 'Montserrat';
}
.hero-image {
background-color: #cccccc;
height: 500px;
background-image: url('../media/basic/oasis-center-bkg.jpg');
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
}
.hero-text {
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
}
.hero-logo {
height: 70px;
}
.btnHld {
padding-top: 40px;
}
.white-border-solid {
border: 1px #fff solid;
}
.socNetwIcon {
height: 50px;
margin: 0 10px;
}
.blueBkg {
background-color: #046b3c;
color: #fff;
}
.greenBkg {
background-color: #f7f7f7;
color: #13265C;
}
.container {
max-width:1200px;
margin:auto;
text-align:center;
}
.textCenter {
text-align:center;
}
.w-100{
width: 100%; }
.loader {
height: 50px;
transform-origin: bottom center;
animation: rotate 2s linear infinite;
}
.circle {
display: inline-block;
background-color: var(--bkgRed);
height: 40px;
width: 40px;
border-radius: 50%;
transform: scale(0);
animation: grow 1s linear infinite;
margin: -10px;
}
.parallax {
padding: 4rem 5rem;
background-size: cover;
color: #13265C;
overflow: hidden;
}
.parallax1 {
background-image: url(../media/tretmani/red-carpet-hd.jpg);
background-position-x: center;
background-position-y: center;
background-size: initial;
background-repeat: no-repeat;
background-attachment: fixed;
background-origin: initial;
background-clip: initial;
background-color: initial;
}
.parallax2 {
background-image: url(../media/tretmani/mumija-tretman-hd.jpg);
background-position-x: center;
background-position-y: center;
background-size: initial;
background-repeat-x: no-repeat;
background-repeat-y: no-repeat;
background-attachment: fixed;
background-origin: initial;
background-clip: initial;
background-color: initial;
}
.parallax div {
padding: 2rem;
background-color: rgba(255,255,255,0.75);
border-radius: 5px
}
.parallax h2 {
letter-spacing: 2px;
font-size: 35px;
}
.parallax h3 {
text-align: center;
line-height: 2;
letter-spacing: 1px;
}
.parallax .btnHld {
text-align: right;
padding-top: 20px;
}
.bkg {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
background-color: #111;
opacity: 0.8;
background-image: url("slike/palm-grid.jpg");
background-size: contain;
/*
background-image: radial-gradient(#369f53 1.5px, transparent 1.5px), radial-gradient(#369f53 1.5px, transparent 1.5px);
background-size: 41px 41px;
background-position: 0 0, 20.5px 20.5px;
background-color: #225a5d;*/
z-index: -1;
}
header, section {
z-index: 2;
min-height: 100vh;
}
a {
text-decoration: none;
color: #000;
}
header h1 {
font-size: 70px;
}
.bow {
background-color: #86b9fe;
color: #111;
}
.bowHead {
background-color: #4d94d2;
/*background-image: url('../slike/oblaci-pozadina.jpg');
background-repeat: no-repeat;
background-size: cover;*/
color: #5EB275;
}
.bold {
font-weight: bold;
}
.wob {
background-color: #222;
color: #f1f1f1;
}
.boor {
opacity: 0.7;
background-image: radial-gradient(#f8a90b 1.5px, transparent 1.5px), radial-gradient(#f8a90b 1.5px, transparent 1.5px);
background-size: 41px 41px;
background-position: 0 0, 20.5px 20.5px;
background-color: #0c6fca;
color: #fff;
}
nav {
position: absolute;
top: 0;
padding-top: 5px;
padding-bottom: 5px;
height: 50px;
width: 100%;
z-index: 1500;
position: fixed;
transition: all 600ms ease-in-out;
}
nav.scrolled-nav {
background-color: #f7f7f7;
opacity: 0.9;
border-bottom: 1px solid #000;
}
nav.scrolled-nav li a{
color: #13265C;
}
nav ul {
display: inline-block;
}
#logoWide {
display: inline-block;
text-decoration: none;
vertical-align: top;
margin-left: 7%;
}
#logoWide a {
text-decoration: none;
display: inline-block;
vertical-align: middle;
padding-left: 5px;
font-size: 25px;
color: #fff;
}
#logoWide #logo-img {
display: inline-block;
}
#logoWide #logo-txt {
display: inline-block;
position: relative;
top: -17px;
left: 10px;
}
ul {
text-align: right;
width: 75%;
margin: 0 auto;
padding: 0;
display: inline-block;
}
ul li {
list-style: none;
display: inline-block;
padding: 15px;
cursor: pointer;
-webkit-transition: background-color 400ms linear;
-moz-transition: background-color 400ms linear;
-o-transition: background-color 400ms linear;
transition: background-color 400ms linear;
color: #5EB275;
}
ul li a {
text-decoration: none;
color: #fff;
-webkit-transition: color 400ms linear;
-moz-transition: color 400ms linear;
-o-transition: color 400ms linear;
transition: color 400ms linear;
}
ul li a:hover {
/*color: #225470; videcu vec sta cu */
}
nav ul li.return a {
font-weight: bold;
color: #5EB275;
}
nav.scrolled-nav ul li.return a {
color: #5EB275;
}
#shrinked {
height: 55px;
}
.toggle {
width: 100%;
height: 100%;
background-color: transparent;
box-sizing: border-box;
color: #fff;
font-size: 30px;
display: none;
visibility: hidden;
opacity: 0;
-webkit-transition: opacity 600ms, visibility 600ms;
transition: opacity 600ms, visibility 600ms;
}
.toggle .imgIcon {
float:right;
height: 30px;
padding: 13px 12px;
cursor: pointer;
color: #5EB275;;
}
nav.scrolled-nav .toggle .imgIcon {
color: #5EB275;;
}
.toggle a {
margin-left: 5%;
}
header .row {
padding-top: 150px;
}
.row {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
section h2 {
font-weight: bold;
letter-spacing: 3px;
}
.half {
width: 50%;
}
.half23 {
display: inline-block;
width: 65%;
}
.half23 p {
padding: 10px 15px;
font-size: 24px;
line-height: 1.5;
}
.half23 div {
padding: 7px 10px;
font-size: 17px;
}
.half23 h2 {
font-size: 35px;
}
.half13 h3 {
font-size: 24px;
}
.half23 img {
width: 100%;
border-radius: 4px;
}
h2 img.headlineIcon {
height:45px;
filter:none;
width: auto;
}
a img.headlineIcon, p img.headlineIcon {
height:30px;
padding-bottom: 2px;
filter:none;
width: auto;
display: inline-block;
vertical-align: bottom;
}
.sideImg {
display: inline-block;
height: 100%;
object-fit: cover;
}
.half13 {
width: 32%;
display: inline-block;
}
.txtHld {
padding: 23px 20px 15px 25px;
font-size: 22px;
}
.txtHld img {
width: 90%;
max-height: 420px;
}
.txt-holder {
position: relative;
padding: 1.5rem;
font-size: 1.25em;
}
.txt-holder a {
padding: 10px 0;
color: #13265C;
cursor: pointer;
}
.socNetIconsHolder a i {
font-size: 36px;
margin: 0 10px;
}
.txt-holder a:hover {
text-decoration: underline;
}
.card-text {
padding-left: 1.5rem;
padding-right: 1.5rem;
}
.angled {
position: absolute;
background-color: #f7f7f7;
overflow: hidden;
height: 18%;
width: 110%;
transform-origin: top left;
transform: rotate(-10deg);
z-index: 0;
}
.blogCard {
background-color: #f7f7f7;
color: #13265C;
position: relative;
overflow: hidden;
cursor: pointer;
}
.blogCard a, .blogCard p {
position: relative;
z-index: 2;
text-align: right;
color: #13265C;
}
.blogCardText {
position: relative;
padding-left: 5%;
padding-right: 5%;
}
.blogCardText i {
position: absolute;
left: 5%;
bottom: 15%;
color: #777;
font-size: 30px;
opacity: 0.4;
}
section .half13, section .half23{
position: relative;
}
section .bkgImg {
position: absolute;
top: 110px;
left: 15px;
max-height: 80vh;
width: auto;
overflow: hidden;
}
section .bkgImg.artclImg {
top: 50%;
left: 7%;
}
.z20 {
position: relative;
z-index: 20;
}
#usluge .half23 .bkgImg {
left: 180px;
}
.inline {
display: inline;
}
.pt-20 {
padding-top: 20px;
}
.pt-50 {
padding-top: 50px;
}
.pt-125 {
padding-top: 125px;
}
.pt-175 {
padding-top: 175px;
}
.btnHld {
font-size: 25px;
}
.btn {
padding: 10px 15px;
background-color: #046b3c;
position: relative;
color: #fff;
border-radius: 4px;
}
.col {
flex: 1;
}
.col2 {
flex: 1;
}
.col3 {
display: inline-block;
width: 30%;
}
.relative {
position: relative;
}
.sliderimg {
position: absolute;
left: 50%;
top: 10px;
transform: translate(-50%);
width: 100%;
max-height: 400px;
width: auto;
border-radius: 25px;
opacity:0;
transition:opacity 0.4s ease-in-out
}
.sliderimg.curr {
opacity: 1;
}
.imgs img {
width: 90%;
}
/*.imgs img:last-of-type {
width: 96%;
}*/
.overlaid, .overlaid2, .overlaid3 {
position: fixed; /* Sit on top of the page content */
display: none; /* Hidden by default */
width: 100%; /* Full width (cover the whole page) */
height: 100%; /* Full height (cover the whole page) */
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0,0,0,0.75); /* Black background with opacity */
z-index: 50; /* Specify a stack order in case you're using a different order for other elements */
cursor: pointer; /* Add a pointer on hover */
}
.overlay-appear {
display: block;
}
.credits {
font-size: 10px;
}
.infoCard {
vertical-align: top;
background-color: #f7f7f7;
color: #f66412;
margin: 1rem;
padding: 1rem;
vertical-align: middle;
max-width: 650px;
min-width: 320px;
border: 2px #888 solid;
}
.blogCardImageHolder{
position: relative;
}
.maliLogo {
height: 13%;
width: auto !important;
position: absolute;
right: 5%;
bottom: 5%;
z-index: 10;
}
.px20 {
padding: 10px 40px;
}
.half23 {
display: inline-block;
width: 65%;
}
.half13 h3 {
font-size: 24px;
}
.half13 {
width: 32%;
display: inline-block;
}
.blogCard1 {
margin-bottom: 15px;
padding: 15px;
width: 320px;
background-color: skyblue;
}
.blogCard2 {
margin-bottom: 15px;
padding: 15px;
width: 320px;
background-color: #f7f7f7;
color: #222;
}
.blogCard2 hr {
border-top: 1px solid #555;
}
.blogCard2 h3 {
color: #13265C;
}
.px20 span::nth-of-type(2) {
float: right;
}
.rightFloat {
float: right;
}
.smallCard {
width: 320px;
height: 90px;
margin-bottom: 1rem;
display: flex;
color: #222;
}
.smallCard img {
display: inline-block;
height: 100%;
width: 70px;
object-fit: cover;
}
.smallCard .cardTxt {
display: inline-block;
display: flex;
flex-direction: column;
justify-content: center;
padding: 0 7px;
color: #222;
}
.cardTxt h4 {
font-size: 20px;
vertical-align: middle;
color: #13265C;
}
.backButtonHolder {
padding-bottom: 35px;
padding-top: 25px;
}
.backButton {
background-color: #046b3c;
padding: 9px 12px;
border-radius: 4px;
font-size: 20px;
color: #fff;
border: 1px #fff solid;
}
.backButton img {
height: 22px;
vertical-align: bottom;
}
.contactSectionLogo {
width:70%;
padding: 120px 0 30px 0;
}
.bottomRibbon {
background-color: #f2f2f2;
color: #333;
padding: 10px 0;
text-align: center;
}
.bottomRibbon h4 {
margin: 7px 0;
padding-left: 10px;
}
.bottomRibbon h4 a {
font-weight: bold;
font-size: 18px;
}
.cardHolder {
display: flex;
flex-direction:row;
flex-wrap: wrap;
align-items: flex-start;
}
#contact {
position: relative;
/* background: url(../slike/kontakt-background.jpg) no-repeat center right; */
background-color: #f7f7f7;
min-height: 0px;
height: auto;
}
#contact .txt-holder p{
text-align: center;
}
.contact-overlay {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
background-color: rgba(0,0,0,0.7);
z-index: 0;
}
.input-form {
padding: 2rem 4rem;
text-align: center;
}
.input {
display: block;
margin-bottom: 1rem;
padding: 5px;
width: 100%;
font-size: 1rem;
}
.my-button {
border: 2px solid #ddd;
border-radius: 2px;
background-color: #333;
color: #ddd;
padding: 5px 10px;
font-family: 'Exo 2', sans-serif;
font-size: 16px;
cursor: pointer;
}
.under-button {
font-size: 16px;
}
.popupNotif {
display: none;
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
font-size: 1.2em;
padding: 10px 25px;
border: 2px solid #000;
background-color: rgba(255, 255, 255, 0.8);
z-index: 999;
}
.lead {
font-size: 1.3em;
}
.emphasized {
font-weight: bold;
color: #000;
font-style: normal;
}
.txtHld img.half23Img {
margin: 20px auto;
width: 70%;
height: auto;
max-height: none;
}
.logoImgIcon {
padding-top: 4px;
height: 47px;
}
#kontakt {background-color: #f7f7f7;
color: #13265C;
}
/* CSS talk bubble */
.talk-bubble {
opacity: 0;
margin: 40px;
display: inline-block;
position: fixed;
bottom: 120px;
right: 10px;
width: 200px;
height: auto;
background-color: #f2f2f2;
transition: opacity 1s;
transition: all 700ms ease-in-out;
z-index: 10;
}
.border{
border: 8px solid #666;
}
.round{
border-radius: 30px;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
}
.infoBtn {
display: none;
position: fixed;
bottom: 30px;
right: 30px;
background-color: #046b3c;
padding: 20px;
border-radius: 50%;
cursor: pointer;
transition: all 700ms ease-in-out;
z-index: 100;
}
.infoBtn i {
font-size: 50px;
color: #fff;
}
/* talk bubble contents */
.talktext{
padding: 1em;
text-align: left;
line-height: 1.5em;
z-index: 100;
}
.talktext p{
color: #333;
/* remove webkit p margins */
-webkit-margin-before: 0em;
-webkit-margin-after: 0em;
}
.popupNotif, .popupNotif2 {
display: none;
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
font-size: 1.2em;
padding: 10px 25px;
border: 2px solid #000;
background-color: rgba(255, 255, 255, 0.8);
color: #13265C;
z-index: 999;
}
.overlayAppear {
display: block;
animation: fade 1s;
}
#osnivac .titleHold{
padding: 15px;
}
#osnivac h2 {
padding: 0 20px;
font-size: 35px;
}
.speci1 {
display: none;
}
.speci2 {
width: 5px;
position: absolute;
right: 0;
visibility: hidden;
}
.speci3 {
width: 6px;
z-index: -1;
opacity: 0;
position: absolute;
right: 0;
}
.gallery{
min-height: 100vh;
background:#eee;
padding-bottom: 100px;
}
.gallery h2{
text-align: center;
color: #13265C;
}
.gallery .controls{
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
padding:20px 0;
list-style: none;
}
.gallery .controls .buttons{
padding: 10px 15px;
background-color: #046b3c;
position: relative;
color: #fff;
border-radius: 4px;
font-size: 20px;
line-height: 40px;
cursor: pointer;
margin:20px;
box-shadow: 0 3px 5px rgba(0,0,0,.3);
text-align: center;
}
.gallery .controls .buttons.active{
background:#13265C;
color:#fff;
}
.gallery .image-container{
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
}
.gallery .image-container .image{
height:250px;
width: 350px;
overflow: hidden;
border:15px solid #fff;
box-shadow: 0 3px 5px rgba(0,0,0,.3);
margin: 20px;
}
.gallery .image-container .image img{
height: 100%;
width:100%;
object-fit: cover;
transition: all 2s ease;
}
.gallery .image-container .image:hover img{
transform: scale(1.2);
}
@media(max-width: 1500px) {
nav ul li.return a {
color: #5EB275;
}
.toggle {
display: block;
visibility: visible;
opacity: 1;
animation: fade 1s;
}
#logoWide {
display: none;
}
ul {
position: absolute;
right: 0;
background: #f7f7f7;
padding: 0;
width: 65%;
transform-origin: right;
transform: translateX(100%);
transition: 0.5s;
}
ul li {
display: block;
text-align: center;
border: 1px solid #13265C;
z-index: 25;
}
ul li a {
display: block;
color: #13265C;
z-index: 30;
}
.active1 {
transform: translateX(0%);
}
.active2 {
overflow: visible;
-webkit-transition: visibility 600ms;
transition: visibility 600ms;
}
}
@media(max-width: 1050px) {
header .row {
padding-top: 50px;
}
#contact .txt-holder p,h5 {
text-align: left;
}
.half {
width: 100%;
}
.half23, .half13 {
width: 100%;
display: block;
}
.blogCard1, .blogCard2 {
margin: 15px auto;
}
section .bkgImg {
top: 10px;
height: 90%;
width: auto;
}
#usluge .half23 .bkgImg {
left:10px;
width: 90%;
}
nav .ulNav{
margin: 0;
background-color: #10539a;
}
.ulNav {
position: absolute;
right: 0;
background-color: #10539a;
padding: 0;
width: 65%;
transform-origin: right;
transform: translateX(100%);
transition: 0.5s;
}
.ulNav .liNav {
display: block;
text-align: center;
border: 1px solid #fff;
z-index: 25;
}
.ulNav .liNav a {
color: #fff;
display: block;
z-index: 30;
}
.liFont {
display: block;
width: 100%;
height: auto;
}
.liFont span {
height:100%;
display: inline-block;
width: 92px;
}
header h1 {
font-size: 55px;
}
header .half:first-of-type {
order: 2;
padding-top: 250px;
}
header .half:last-of-type {
order: 1;
}
header .half:last-of-type img {
height: 260px;
width: auto;
}
.btnHld {
padding-top: 5px;
font-size: 25px;
}
}
@media(max-width: 768px) {
.hero-image {
background-image: url('../media/basic/oasis-center-bkg-small.jpg');
}
.hero-text {
top: 40%;
}
.btnHld {
font-size: 20px;
}
.parallax {
padding: 1rem;
}
.parallax div {
padding: 1rem;
}
.parallax1 {
background-image: url(../slike/red-carpet.jpg);
background-position-x: center;
background-position-y: center;
background-size: initial;
background-repeat: no-repeat;
background-attachment: fixed;
background-origin: initial;
background-clip: initial;
background-color: initial;
}
#kontakt {
background-image: url(../slike/contact-background-small.jpg);
background-position-x: center;
background-position-y: right;
background-repeat-x: no-repeat;
background-repeat-y: no-repeat;
}
/*
#contact {
background: url(../slike/contact-background.jpg) no-repeat center right;
}*/
.txtHld img.half23Img {
width: 90%;
}
.backButtonHolder{
text-align: center;
}
.backButton {
display: block;
margin: 0 auto;
width: 80%;
}
.half23 img {
width: 100%;
}
.half23 img.bkgImg {
left: 20px;
width: 90%;
}
.pt-sm-25{
padding-top: 25px;
}
.pt-sm-50{
padding-top: 50px;
}
.half23 h2 {
padding-left: 13px;
}
.half23 p {
font-size: 22px;
}
header .row {
padding-top: 50px;
}
.credits {
display: block;
}
.half13.pt-50:nth-of-type(2) {
padding-top: 15px;
}
.col {
width: 100%;
}
.col2 {
display: inline-block;
width: 40%;
}
.col3 {
display: block;
width: 100%;
}
.infoCard {
min-width: 260px;
}
#kontakt .col3 img {
padding-bottom: 90px;
}
.txtHld img {
width: 80%;
}
.infoBtn {
padding: 15px;
}
.infoBtn i {
font-size: 40px;
}
.parallax2 {
background-image: url(../slike/tretman-mumija-bkg-small.jpg);
background-position-x: center;
background-position-y: bottom;
background-size: initial;
background-repeat-x: no-repeat;
background-repeat-y: no-repeat;
background-attachment: fixed;
background-origin: initial;
background-clip: initial;
background-color: initial;
}
}
@media(max-width: 560px) {
.btnHld {
font-size: 15px;
}
header .row {
padding-top: 80px;
}
header .half:last-of-type img {
width: 80%;
height: auto;
}
section .bkgImg {
top: 180px;
width: 90%;
height: auto;
}/*
#contact {
background: url(../slike/kontakt-background.jpg) no-repeat center center;
}*/
.popupNotif {
width: 80%;
}
.hdln {
font-size: 30px;
}.blog {
margin: 15px 10px;
padding: 10px;
width: 280px;
}
.smallCard {
width: 280px;
height: 100px;
margin-bottom: 1rem;
display: flex;
}
}
@keyframes rotate {
to {
transform: rotate(360deg);
}
}
@keyframes fadingIn {
from {opacity: 0;}
to {opacity:1;}
}
@keyframes pulse {
0% {
-webkit-transform: scale3d(1, 1, 1) translateY(0);
transform: scale3d(1, 1, 1) translateY(0);
}
75% {
-webkit-transform: scale3d(1, 1, 1) translateY(0);
transform: scale3d(1, 1, 1) translateY(0);
}
/* Finish changes by here */
80% {
-webkit-transform: scale3d(1.25, 1.25, 1.25) translateY(-15px) translateX(-15px);
transform: scale3d(1.25, 1.25, 1.25) translateY(-15px) translateX(-15px);
}
/* Between 20% and 100%, nothing changes */
100% {
-webkit-transform: scale3d(1, 1, 1) translateY(0);
transform: scale3d(1, 1, 1) translateY(0);
}
}
.pulse {
-webkit-animation-name: pulse;
animation-name: pulse;
animation-duration: 7s;
animation-timing-function:ease-in-out;
animation-iteration-count: infinite;
}
@keyframes fade {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@media(min-width: 1600px) {
.txtHld img {
width: 90%;
max-height: none;
}
.sliderimg{
width: 90%;
max-height: none;
}
}
/* number of images
.photoCarousel {
margin: 0;
height: 100vh;
padding-left: 35px;
display: grid;
place-content: center start;
background: #CDB380;
}
.gallery {
--d: 10s;
display: grid;
width: 220px;
}
.gallery > img {
grid-area: 1/1;
width: 100%;
aspect-ratio: 1;
object-fit: cover;
border: 10px solid #f2f2f2;
box-shadow: 0 0 4px #0007;
z-index: 2;
animation: slide var(--d) infinite, z-order var(--d) infinite steps(1);
}
.gallery img:last-child {
animation-name: slide, z-order-last;
}
.gallery > img:nth-child(1) {
animation-delay: calc(0*var(--d));
--r: 18deg;
}
.gallery > img:nth-child(2) {
animation-delay: calc(-0.2*var(--d));
--r: 16deg;
}
.gallery > img:nth-child(3) {
animation-delay: calc(-0.4*var(--d));
--r: -4deg;
}
.gallery > img:nth-child(4) {
animation-delay: calc(-0.6*var(--d));
--r: -4deg;
}
.gallery > img:nth-child(5) {
animation-delay: calc(-0.8*var(--d));
--r: 6deg;
}
@keyframes slide {
10% {
transform: translateX(100%) translateY(-80%) rotate(var(--r));
}
0%, 100%, 20% {
transform: translateX(0%) translateY(0%) rotate(var(--r));
}
}
@keyframes z-order {
10%, 20% {
z-index: 1;
}
80% {
z-index: 2;
}
}
@keyframes z-order-last {
10%, 20% {
z-index: 1;
}
90% {
z-index: 2;
}
}
@media(max-width: 768px) {
.photoCarousel {
height: 70vh;
} } */