@charset "UTF-8";
*{
  margin: 0;
  padding: 0;
}



.fixed-logo {
  position: fixed;
  top: 50px;
  right: 50px;
  width: 200px;
  height: auto;
  z-index: 2000;
}

img {
  width: 200px;
  height: 200px;
  margin-left: 5%;
}

body{
  color: white;
  background-image: url(pozadina/Pozadina.jpg);
  font-family: Arial, Sans-serif;
  font-size: 18px;
  line-height: 1.6em;
  margin: auto;
  width: 100%;
  background-attachment: fixed;
  background-size: cover;
}

h3{
  animation: myAnim 2s ease 0s 1 normal forwards;
  color: white;
  font-family: Arial, Sans-serif;
  font-size: 200px;
  line-height: 1.6em;
  font-style: bold;
  margin-left: 10%;
}

@keyframes myAnim {
	0% {
		animation-timing-function: ease-in;
		opacity: 0;
		transform: translateY(-250px);
	}

	38% {
		animation-timing-function: ease-out;
		opacity: 1;
		transform: translateY(0);
	}

	55% {
		animation-timing-function: ease-in;
		transform: translateY(-65px);
	}

	72% {
		animation-timing-function: ease-out;
		transform: translateY(0);
	}

	81% {
		animation-timing-function: ease-in;
		transform: translateY(-28px);
	}

	90% {
		animation-timing-function: ease-out;
		transform: translateY(0);
	}

	95% {
		animation-timing-function: ease-in;
		transform: translateY(-8px);
	}

	100% {
		animation-timing-function: ease-out;
		transform: translateY(0);
	}
}

.rotate-vert-center {
	animation: rotate-vert-center 1s cubic-bezier(0.455, 0.030, 0.515, 0.955) 0.5s both;
}

@keyframes rotate-vert-center {
  0% {
    transform: rotateY(0);
  }
  100% {
    transform: rotateY(180deg);
  }
}



h1{
  color: white;
  font-family: Arial, Sans-serif;
  font-size: 60px;
  line-height: 1.6em;
  font-style: bold;
  margin-left: 10%;
}

h2{
  animation: myAnim1 2s ease 0s 1 normal forwards;
  color: white;
  font-family: Arial, Sans-serif;
  font-size: 32px;
  line-height: 1.6em;
  margin-left: 10%;

}

h4{

  color: white;
  font-family: Arial, Sans-serif;
  font-size: 32px;
  line-height: 1.6em;
  margin-left: 10%;

}


@keyframes myAnim1 {
	0% {
		opacity: 0;
		transform: scale(0.6);
	}

	100% {
		opacity: 1;
		transform: scale(1);
	}
}

p{
  color: white;
  font-family: Arial, Sans-serif;
  font-size: 18px;
  line-height: 1.6em;
  margin-left: 10%;
}

a{
  animation: myAnim1 2s ease 0s 1 normal forwards;
  text-decoration: none;
  color: white;
  line-height: 3em;
  background-attachment: fixed;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 1%;
  padding-right: 1%;
  border: 3px;
  border-style: solid;
  border-color: white;
  border-spacing: 5px;
  margin-left: 10%;
  border-radius: 10px;
  border-width: thick;


}
a:hover{
  color: white ;
  background-color: #FF0000;
  border-color: 	#8F00FF;
  border-width: thick;
}

.boxB{
transition: width 2s;
transition-delay: 3s;

  background-color: rgba(15, 82, 186, 0.8);
  color: #fff;
  border-bottom: 10px, cyan, solid;
  padding-top: 10%;
  padding-bottom: 10%;
  padding-left: 20%;
  padding-right: 25%;

}

.boxB:hover {
  background-color: rgba(15, 82, 186, 0.9);

  }

.boxB {
  transition: width 2s, height 4s;
}
.boxB h1{
  color: white;
  font-style: bold;
  margin: 0;
}

.boxP{
transition: width 2s;
transition-delay: 3s;

  background-color: rgba(252, 15, 192, 0.8);
  color: #fff;
  border-bottom: 10px, cyan, solid;
  padding-top: 10%;
  padding-bottom: 10%;
  padding-left: 20%;
  padding-right: 25%;

}

.boxP:hover {
  background-color: rgba(252, 15, 192, 0.9);

  }

.boxP {
  transition: width 2s, height 4s;
}
.boxP h1{
  color: white;
  font-style: bold;
  margin: 0;
}


.boxG{
transition: width 2s;
transition-delay: 3s;

  background-color: rgba(0, 100, 0, 0.8);
  color: #fff;
  border-bottom: 10px, cyan, solid;
  padding-top: 10%;
  padding-bottom: 10%;
  padding-left: 20%;
  padding-right: 25%;

}

.boxG:hover {
  background-color: rgba(0, 100, 0, 0.9);

  }

.boxG {
  transition: width 2s, height 4s;
}
.boxG h1{
  color: white;
  font-style: bold;
  margin: 0;
}

.boxO{
transition: width 2s;
transition-delay: 3s;

  background-color: rgba(255, 165, 0, 0.8);
  color: #fff;
  border-bottom: 10px, cyan, solid;
  padding-top: 10%;
  padding-bottom: 10%;
  padding-left: 20%;
  padding-right: 25%;

}

.boxO:hover {
  background-color: rgba(255, 165, 0, 0.9);

  }

.boxO {
  transition: width 2s, height 4s;
}
.boxO h1{
  color: white;
  font-style: bold;
  margin: 0;
}


.boxY{
transition: width 2s;
transition-delay: 3s;

  background-color: rgba(255, 255, 0, 0.8);
  color: #fff;
  border-bottom: 10px, cyan, solid;
  padding-top: 10%;
  padding-bottom: 10%;
  padding-left: 20%;
  padding-right: 25%;

}

.boxY:hover {
  background-color: rgba(255, 255, 0, 0.9);

  }

.boxY {
  transition: width 2s, height 4s;
}
.boxY h1{
  color: white;
  font-style: bold;
  margin: 0;
}

.boxV{
transition: width 2s;
transition-delay: 3s;

  background-color: rgba(127, 0, 255, 0.8);
  color: #fff;
  border-bottom: 10px, cyan, solid;
  padding-top: 10%;
  padding-bottom: 10%;
  padding-left: 20%;
  padding-right: 25%;

}

.boxV:hover {
  background-color: rgba(127, 0, 255, 0.9);

  }

.boxV {
  transition: width 2s, height 4s;
}
.boxV h1{
  color: white;
  font-style: bold;
  margin: 0;
}



.kupon h4{
  font-style: bold;
  margin: 0;
}

.kupon p{
  margin: 0;
}

.box2{

  color: #000;
  padding: 1%;
}

.box3{
  position: fixed;
  background-color: #333;
  color: #fff;
  padding: 1%;

}

.box3 a{
  margin-left: 0%;
  margin-right: 0%;
  padding: 1%;
}
.box4{
  opacity: 100%;
  background-color: #FF0000;
  color: #FF0000;
  padding: 1%;
}
iframe {
  opacity: 100%;
  background-color: rgba(60, 60, 60, 0.8);
}

.box6{

  background-color: rgba(60, 60, 60, 0.8);
  color: #fff;
  border-bottom: 10px, cyan, solid;
  padding-top: 1%;
  padding-bottom: 1%;
  padding-left: 15%;
  padding-right: 0%;
}



#zadatak2 > ul {
    border-top: 1px solid black;
    border-bottom: 1px solid black;

    width: 500px;
    padding: 20px 0;

    list-style-type: none;
}

#zadatak2 ul ul {
    font-family: Arial, Sans-serif;
    color: white;
}


.kupon {
  animation: rotate-vert-center;
  animation: myAnim3 2s ease 1s 5 normal forwards;
  width: 400px;
  height: 200px;
  transition: width 2s;
  background-color: rgba(255, 255, 255, 0.8);
  color: #fff;
  margin-left: 70%;
  margin-top: 20%;
  margin-right: 30px;
  margin-bottom: 30px;
  position: fixed;
  text-decoration: none;
  color: black;
  line-height: 3em;
  background-attachment: fixed;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 1%;
  padding-right: 1%;
  border: 3px;
  border-style: solid;
  border-color: white;
  border-spacing: 5px;
  border-radius: 30px;
  border-width: thin;
  text-align: center;
}

@keyframes myAnim3 {
	0%,
	100% {
		transform: translateX(0%);
		transform-origin: 50% 50%;
	}

	15% {
		transform: translateX(-30px) rotate(-6deg);
	}

	30% {
		transform: translateX(15px) rotate(6deg);
	}

	45% {
		transform: translateX(-15px) rotate(-3.6deg);
	}

	60% {
		transform: translateX(9px) rotate(2.4deg);
	}

	75% {
		transform: translateX(-6px) rotate(-1.2deg);
	}
}

.kupon:hover {

  background-color: #6E1313;
  }



/*prvi sign up*/

* {box-sizing: border-box}

/* Full-width input fields */
  input[type=text], input[type=password], input[type=date] {
  width: 100%;
  padding: 15px;
  margin: 5px 0 22px 0;
  display: inline-block;
  border: none;
  background: #f1f1f1;
}

input[type=text]:focus, input[type=password]:focus {
  background-color: #ddd;
  outline: none;
}

hr {
  border: 1px solid #f1f1f1;
  margin-bottom: 25px;
}

/* Set a style for all buttons */
button {
  background-color: #04AA6D;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  cursor: pointer;
  width: 100%;
  opacity: 0.8;
}

button:hover {
  opacity:1;
}

/* Extra styles for the cancel button */
.cancelbtn {
  padding: 14px 20px;
  background-color: #f44336;
}

/* Float cancel and signup buttons and add an equal width */
.cancelbtn, .signupbtn {
  float: left;
  width: 40%;
}

/* Add padding to container elements */
.container {
  padding: 20%;
}

/* Clear floats */
.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

/* Change styles for cancel button and signup button on extra small screens */
@media screen and (max-width: 300px) {
  .cancelbtn, .signupbtn {
    width: 100%;
  }
}

th{
  background-color: #7F6146;
    border-radius: 10px;
  font-size: 28;
  padding: 15px;
  text-align: left;
  border: 1px solid #ddd;
}

td {
    border-radius: 10px;
  padding: 15px;
  text-align: left;
  border: 1px solid #ddd;
}

tr:hover {
  color: white ;
  background-color: #7F6146;
  border-color: #7F6146;
}



.gallery a{
  margin-left: 0%;
  margin-right: 0%;
  text-decoration: none;
  color: black;
  line-height: 0em;
  background-attachment: none;
  padding-top: 0px;
  padding-bottom: 0px;
  padding-left: 0%;
  padding-right: 0%;
  border: 0px;
  border-color: black;
  border-spacing: 0px;
  margin-left: 0%;
  border-radius: 10px;
  border-width: thin;

}
.gallery a:hover{
  color: white ;
  background-color: #FF0000;
  border-color: #FF0000;
}




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

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

* {
  box-sizing: border-box;
}

.responsive {
  padding: 6px 6px;
  float: left;
  width: 32.99999%;
}

@media only screen and (max-width: 700px) {
  .responsive {
    width: 49.99999%;
    margin: 0px 0;
  }
}

@media only screen and (max-width: 500px) {
  .responsive {
    width: 100%;
  }
}

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

video {
  animation: myAnim1 2s ease 0s 1 normal forwards;
  max-width: 100%;
  height: auto;
  border-radius: 20px;
}

.prism {
	animation: rotate-vert-center 10s linear infinite alternate forwards;
}

@keyframes rotate-vert-center {
  0% {
    transform: rotateY(0);
  }
  100% {
    transform: rotateY(360deg);
  }
}

/* NON CRITICAL */
main {
  padding: .5rem;
  border: black 1px solid;
}



.prism {

  margin-right: 5%;
  width: 100px;
 aspect-ratio: 1 / 1;
}

.side {
  border: 1px solid black;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.one {
  background-image: url( galerija/zalogajcic.jpg);
}

.two {
  background-color: #ea8685;
}

.three {
  background-color: #f5cd79;
}

/* CRITICAL */

.prism {
  transition: transform 0s linear;
  transform-style: preserve-3d;
}

.side {
  position: absolute;
  height: 100%;
  width: 100%;
}

.side.one {
  transform: rotateY(0deg) translateZ(29px);
}

.side.two {
  transform: rotateY(120deg) translateZ(29px);
}

.side.three {
  transform: rotateY(240deg) translateZ(29px);
}


#wrap {
    padding:100px 0 0 200px;
	-webkit-perspective: 800px;
	-webkit-perspective-origin: 50% 200px;
}
#prism {
    -webkit-transform-style:preserve-3d;
    /*position:relative;*/
    width:400px;
    /*-webkit-transform-origin: 0 0 ;*/
    -webkit-transform:rotateY(-45deg);
    -webkit-animation:spin 5s linear infinite;
}

@-webkit-keyframes spin {
    from { -webkit-transform: rotate3d(1,1,1,0deg); }
    to { -webkit-transform: rotate3d(1,1,1,360deg); }
}
#prism div {
    position:absolute;
    height:200px;
    background-color:transparent;
    border: 1px solid gray;
    color:gray;
    text-align:center;
    line-height:200px;
    font-weight:bold;

    box-shadow: 0px 0px 20px inset;

}

#front {
  background-image: url( galerija/slatki_gusti.jpg);
   width:400px;
   -webkit-transform-origin: 50% 100%;
   -webkit-transform:translateZ(100px)  rotateX(30deg);
}

#back {
  background-image: url( galerija/jutarnji_gust.jpg);
  width:400px;
  -webkit-transform-origin: 50% 100%;
  -webkit-transform: translateZ(-100px) rotateY(180deg)  rotateX(30deg)


}


#bottom {
  background-image: url( galerija/zalogajcic.jpg);
  width:400px;
  -webkit-transform: rotateX(270deg) translateY(100px);
	-webkit-transform-origin: bottom center;


}

.slika {

  transform:
    perspective(750px)
    translate3d(0px, 0px, -250px)
    rotateX(27deg)
    scale(0.9, 0.9);
  border-radius: 5px;
  border: 2px solid #e6e6e6;
  box-shadow: 0 70px 40px -20px rgba(0, 0, 0, 0.2);
  transition: 0.4s ease-in-out transform;

  &:hover {
    transform: translate3d(0px, 0px, -250px);


}