body { 
  background-color: dodgerblue;
  background-attachment: fixed;
  background-repeat: repeat;
  background-position: top;
  
  }


#logo2 { 
 border-radius: 50%;
  border: 0px solid #0057e8;
  padding: 0px;
  width: 500px;
  display: inline-block;
  margin-left: auto;
  margin-right: auto;
 }
 
 #logo3 { 
 border-radius: 50%;
  border: 0px solid #0057e8;
  padding: 0px;
  width: 500px;
  margin-left: auto;
  margin-right: auto;
 }
 
.logo1 { 
  position: relative;
   
    }
	
.logo1 .img-top { 
  display:none;
  position:absolute;
  top:0;
  left:0;
  z-index: 99;  
  }
  
.logo1:hover .img-top { 
  display: inline;
 }


#icons {
  display: inline-block;  width:45px;  position:relative; float:left; left:10%;
    }
 
 #icons2 {
  display: inline-block;  width:55px;  position:relative; float:left; left:20%;
    }
	
 #icons3 {
  display: inline-block;  width:50px;  position:relative; float:right; right:10%;
    }

 #icons4 {
  display: inline-block;  width:55px;  position:relative; float:right; right:20%;
    }	
 
#bg1 {
  display: block; margin-left: auto; margin-right: auto; width:200px; 
    }	

#bg2 {
  opacity: 0.2;
    }		

#bg3 {
  opacity: 0.5; width:50%; position:fixed; 
    }	

#kontakt {
  display: block; margin-left: auto; margin-right: auto; padding: 20px 5px; width: 100%; 
    }
	
.img-responsive {
  display: inline-block;
  height: auto;
  max-width: 100%;
  background-attachment: fixed;
  
}


	
/*banner*/
.banner{position: absolute;top: 0;left:0; right: 0; bottom: 0; width:auto; height:120%; background: rgba(0,30,60,0); background-repeat: repeat;}
.banner .caption{position: sticky;top: 0;left:0; right: 0; bottom: 0; height: 100%; width: auto;  }
.banner .caption-wrapper{display: table;height: auto;width: auto; margin-left: auto; margin-right: auto; height:100%;  }
.banner .caption-info{display: block; margin-left: auto; margin-right: auto; margin-top: auto; vertical-align: middle;text-align: center; background: rgba(0,30,60,0.3); background-repeat:repeat; height:1400px; width:500px; position:relative; outline: 2px solid white; animation-name: barve; animation-iteration-count: infinite; animation-duration: 10s; }
.banner .caption-galerija{display: block; margin-left: auto; margin-right: auto; margin-top: auto; vertical-align: middle;text-align: center; background: rgba(0,30,60,0.3); background-repeat:repeat; height:1800px; width:500px; position:relative; outline: 2px solid white; animation-name: barve; animation-iteration-count: infinite; animation-duration: 10s; }
.banner .caption-ponudba{display: block; margin-left: auto; margin-right: auto; margin-top: auto; vertical-align: middle;text-align: center; background: rgba(0,30,60,0.3); background-repeat:repeat; height:1500px; width:500px; position:relative; outline: 2px solid white; animation-name: barve; animation-iteration-count: infinite; animation-duration: 10s; }
.banner .caption-info h1{text-transform:capitalize; font-family: 'Artifika'; color: white; font-size:50px; }
.banner .caption-info h2{font-family: 'Artifika'; color: lightblue; font-size:18px;}
.banner .caption-info h3{font-family: 'Arizonia'; font-size:40px ;color: gold;  }
.banner a.explore{color: #fff;}
.explore{margin: 0 1em;}
.colortext1 {  animation-name: naslov1; animation-iteration-count: infinite; animation-duration: 10s;   }


h4 {font-family: 'Artifika';font-size: 20px ;color: white; }
h5 {font-family: 'Artifika';font-size: 30px ;color: white; position:relative; bottom:30px; }
h6 {font-family: 'Arizonia';font-size: 40px ;color: rgba(255,255,255,0.4); position:relative; bottom:100px;}
h7 {font-family: 'Arizonia';font-size: 40px ;color: gold; position:relative; top:0; }

.smallicon { display: inline-block; width:30px; position:relative; top:9px; }

/*.logo1:hover .banner2{position:fixed; display:inline; background:rgba(60,0,30,0); height: 40%;width: 100%; border-radius: 100%; } */

/*footer*/
.podpis {position: fixed;bottom: 0; text-align: center; width: 100%; }
.podpis p1{ font-family:'Artifika'; font-size: 10px; color: lightblue; }

/*buttons*/
.btn{border:0px double lightblue;border-radius: 10rem;padding: 1em 1em;background: rgba(0,10,60,0.2); font:15px Arial ; color:lightblue ; font-family: 'Artifika';  }
.btn:hover,.btn:active{color: dodgerblue; padding: 2em 2.2em; border-radius: 10rem;}
.btn2{border:0px; border-radius: 10rem; width: auto;background: rgba(0,10,60,0.2); font-size:12px; color:lightblue ; font-family: 'Artifika'; position:fixed;}
.btn2:hover,.btn:active{border-radius: 10rem; padding: 1em 1.2em; width: auto; color: dodgerblue; cursor: pointer;}
.btn-default{color: lightblue;border: none; }
.btn-default:hover,.btn-default:active{background: rgba(0,0,0,0.5); width:auto; height:auto; padding: 1em 1em; }
.btn-default2:hover,.btn-default2:active{background: rgba(0,0,0,0.5); width:auto; height:auto; padding: 1em 1em;}
.btn-primary{color: #ff1672;background:#ff1672;width: 100%;outline: none;}
.btn-primary:hover,.btn-primary:active,.btn-primary:focus{background:#ff1672;box-shadow: none;}

/*TITLE*/
.quality {position:relative; bottom:50px;}
.since {position:relative; bottom:80px;}

.infomain {position:relative; bottom:-50px;}


/*POPUP MENU*/
.popup1, .ponudba:hover>div {
	display: none; 
}


.ponudba:hover>.popup1 {
	display:block; margin-left: auto; margin-right: auto; margin-top: auto; padding: 20px 5px;  
}


.ponudba:hover, .ponudba {background: rgba(0,10,60,0);}

.ponudba { display:block; position:relative; bottom:250px; left:150px; background: rgba(0,60,140,1); margin-right: auto; border-radius: 1rem; text-align: center; width:200px; height:75px; border: solid 2px rgba(255,255,255,0.9);}

.popup1 { background: rgba(0,70,140,0.95); opacity: 100%; border-radius: 1rem; width: 500px; height: 850px; position:relative; bottom:600px ; left:-152px; border: solid 2px rgba(255,255,255,0.95); text-align:left; }


.capt1 { font-family: 'Artifika'; color: white; font-size: 16px; text-align: left; position: absolute; top:0; }	
.capt1s { font-family: 'Artifika'; color: white; font-size: 16px; text-align: left; position: absolute; top:0; }	
.captpon { font-family: 'Artifika'; color: white; font-size: 16px; text-align: left; position: absolute; top:275px; }	

#pon1 { width:150px; height:150px; border-radius: 50%; }



/*POPUP MENU 2*/

.popup2, .onas:hover>div {
	display: none;
}

.onas:hover>.popup2 {
	display: block; margin-left: auto; margin-right: auto; margin-top: auto; padding: 20px 5px;   
}

.onas:hover, .onas {background: rgba(0,10,60,0);}

.onas { display:block; position:relative;  left:150px; background: rgba(0,40,80,0.6); margin-right: auto; border-radius: 1rem; text-align: center; width:200px; height:45px; border: 2px solid rgba(255,255,255,0); }
.onas2 { position:relative; top:20px; }

.popup2 { position:relative; bottom:550px; left:-152px; background: rgba(0,70,140,0.95); opacity: 100%; border-radius: 1rem; width: 500px; height: 600px; border: solid 2px rgba(255,255,255,0.95);}


#pon2 { width:100px; display:inline-block; position:relative; }

.info1 { position:absolute; bottom:0; font-family: 'Artifika'; color: white; font-size: 16px; }
.info2 { color: white; text-align: left; position:absolute; bottom:220px;}

.info1s { position:absolute; top:500px; left:100px; font-family: 'Artifika'; color: white; font-size: 16px; }
.info2s { color: white; text-align: left; position:absolute; top:20px; left:0;}

/*POPUP mail*/

.btn2, .mail:hover>div {
	display: none;
}

.mail:hover>.btn2 {
	display: block; margin-left: auto; margin-right: auto; margin-top: auto; padding: 20px 5px; float:left;
}

.mail { position:absolute; top:-0px; left:10px; background: rgba(0,10,60,0); opacity: 100%; height:50px; width: 50px;  }




/*SLIDESHOW*//*SLIDESHOW*//*SLIDESHOW*//*SLIDESHOW*//*SLIDESHOW*//*SLIDESHOW*//*SLIDESHOW*//*SLIDESHOW*//*SLIDESHOW*//*SLIDESHOW*//*SLIDESHOW*//*SLIDESHOW*/


.slidecont { position:fixed;  display:block; top:0px; left:0; }
.galleryimg { max-width:500px; max-height:280px; border: 2px solid rgba(255,255,255,0.5); border-radius:1rem; max-width: 100%;}

* {box-sizing:border-box}

/* Slideshow container */
.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
}

.slideshow-container2 {
  max-width: 700px;
  width:500px;
  height:200px;
  position: relative;
  margin-top: 50px;
  
}


/* Hide the images by default */
.mySlides {
  display: none;
}

/* Next & previous buttons */
.prev {
  cursor: pointer;
  position: absolute;
  width: auto;
  top: 230px;
  left:0;
  margin-top: -22px;
  padding: 16px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

.next {
  cursor: pointer;
  position: absolute;
  width: auto;
  top: 230px;
  right:0;
  margin-top: -22px;
  padding: 16px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}

/* Caption text */
.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* The dots/bullets/indicators */
.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active, .dot:hover {
  background-color: #717171;
}

/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 2s;
  animation-name: fade;
  animation-duration: 2s;
}

@-webkit-keyframes fade {
  from {opacity: .5}
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .5}
  to {opacity: 1}
}



/* GALERIJA */

div.gallery {
  margin: 35px;
  border: 1px solid #ccc;
  float: left;
  width: 180px;
  
}

div.gallery:hover {
  border: 1px solid #777; transform: scale(1.5);
}

div.gallery img {
  width: 100%;
  height: auto;
}

div.desc {
  padding: 0;
  text-align: center;
}