/* ? ////////////////////////////////////////////////////////////////////////// * /
/* ? OD 870 PA NA MANJIM UREDJANIMA SE POJAVLJUJE SCROLLBAR PO X OSI */
/* ? GRESKA JE U #letter ELEMENTU I NJEGOVOM transform i width PROPERTIJU */
/* ? PROBLEM JE RESEN U STYULE.CSS PROERTIJEM overflow-x: hidden, na .pozivnica elementu */
/* ? ////////////////////////////////////////////////////////////////////////// */

/*********************/
/******* WIDTH *******/
/*********************/
@media only screen and (max-width: 2048px) {
   html {
      font-size: 70.5%;
   }
   #flip-card-front {
      transform: scale(1.7);
   }
}

@media only screen and (max-width: 1920px) {
   html {
      font-size: 68.5%;
   }
   #flip-card-front {
      transform: scale(1.4);
   }
}

@media only screen and (max-width: 1700px) {
   html {
      font-size: 65.5%;
   }
   #flip-card-front {
      transform: scale(1);
   }
   .penguin {
   left: 10%;
   }
   .foca {
   right: 0%;
   }
}

@media only screen and (max-width: 1550px) {
   html {
      font-size: 62.5%;
   }
}

@media only screen and (max-width: 1440px) {
   .sample-slider img {
      height: 220px;
   }
}

@media only screen and (max-width: 1315px) {
   .sample-slider img {
      height: 200px;
   }
   .foca {
   right: -10%;
   }
}
@media only screen and (max-width: 1200px) {
   .sample-slider img {
      height: 180px;
   }
   .penguin {
   left: 5%;
   }
   .foca {
   right: -20%;
   }
}

@media only screen and (max-width: 1024px) {
   .desktop {
      display: none;
   }
   /* .scroll-indicator-top img {
		width: 80px;
	} */
   .obavestenje,
   footer {
      background-attachment: unset;
   }
   .sample-slider img {
      height: 180px;
   }
}

@media only screen and (max-width: 992px) {
   .oText {
      width: 35%;
   }
   .penguin {
   left: 3%;
   }
   .foca {
   right: -25%;
   }
}

@media only screen and (max-width: 900px) {
   .sample-slider img {
      height: 170px;
   }
   .penguin {
   left: 0%;
   }
   .foca {
   right: -30%;
   }
}

@media only screen and (max-width: 850px) {
   .penguin {
   left: -5%;
   }
   .foca {
   right: -35%;
   }
}

@media only screen and (max-width: 768px) {
   header {
      height: 80vh;
      background-image: url('assets/1-mob.jpg');
   }
   .penguin {
      width: 150px;
      left: 0%;
   }
   .foca {
      width: 350px;
      right: -25%;
   }
   .form-container form,
   .form-container h2,
   .txt-dodatak {
      width: 90%;
   }
   .obavestenje {
      height: 30vh;
   }
   .sample-slider img {
      height: 160px;
   }
   footer {
      height: 30vh;
   }
   footer div,
   .obavestenje div {
      max-width: 80%;
      margin: 0 auto;
   }
   .obavestenje div {
   max-width: 320px;
}
   .scroll-indicator-top {
      display: flex;
      top: 40px;
   }
   .scroll-indicator-bottom {
      display: flex;
      top: -130px;
   }
   .oText {
      width: 60%;
      font-size: 2.6rem;
   }
}

@media only screen and (max-width: 630px) {
   .penguin {
      width: 120px;
      left: 0%;
   }
   .foca {
      width: 350px;
      right: -35%;
   }
   #flip-card-front {
      transform: scale(0.8);
   }
   /* .scroll-indicator-top {
		left: calc(50% - (60px / 2));
		transform: translateX(-50%);
	}
	.scroll-indicator-top img {
		width: 60px;
	} */
   .sample-slider img {
      height: 145px;
   }
}

@media only screen and (max-width: 576px) {
   .first-half,
   .second-half {
      flex-direction: column;
      align-items: flex-start;
   }
   .first-half label,
   .second-half label {
      width: 100%;
   }

   .first-half select,
   .second-half select {
      width: 100%;
   }
   .penguin {
      width: 100px;
      left: 0%;
   }
   .foca {
      width: 300px;
      right: -40%;
   }
}

@media only screen and (max-width: 550px) {
   .sample-slider img {
      height: 135px;
   }
   .foca {
      width: 250px;
      right: -30%;
   }
}

@media only screen and (max-width: 500px) {
   .sample-slider img {
      height: 125px;
   }
}

@media only screen and (max-width: 480px) {
   html {
      font-size: 56.5%;
   }
   header {
      height: 50vh;
      margin-bottom: -30vh;
   }
   .oText {
      font-size: 2.3rem;
   }
   #flip-card-front {
      transform: scale(0.7);
   }
   .scroll-indicator-top {
      top: 290px;
   }
   .scroll-indicator-top img,
   .scroll-indicator-bottom img {
      width: 16px;
   }
}

@media only screen and (max-width: 450px) {
   .sample-slider img {
      height: 110px;
   }
}

@media only screen and (max-width: 415px) {
   #flip-card-front {
      transform: scale(0.6);
   }
   .sample-slider img {
      height: 100px;
   }
}

@media only screen and (max-width: 414px) {
   .scroll-indicator-top {
      top: 315px;
   }
}
@media only screen and (max-width: 380px) {
   .foca {
    right: -40%;
  }
}

@media only screen and (max-width: 350px) {
   #flip-card-front {
      transform: scale(0.55);
   }
   #letter img {
      width: 80%;
   }
}

/**********************/
/******* HEIGHT *******/
/**********************/
@media only screen and (max-height: 1600px) {
   #flip-card-front {
      bottom: 35%;
   }
   .scroll-indicator-top {
      top: 430px;
   }
}

@media only screen and (max-height: 1300px) {
   #flip-card-front {
      bottom: 25%;
   }
}

@media only screen and (max-height: 1130px) {
   .scroll-indicator-top {
      top: 380px;
   }
}

@media only screen and (max-height: 1080px) {
   #flip-card-front {
      bottom: 20%;
   }
}

@media only screen and (max-height: 1000px) {
   .scroll-indicator-top {
      top: 345px;
   }
}

@media only screen and (max-height: 900px) {
   #flip-card-front {
      bottom: 15%;
   }
}

@media only screen and (max-height: 850px) {
   .scroll-indicator-top {
      top: 290px;
   }
}

@media only screen and (max-height: 780px) {
   .scroll-indicator-top {
      top: 265px;
   }
}

@media only screen and (max-height: 768px) {
   #flip-card-front {
      bottom: 10%;
   }
}

@media only screen and (max-height: 700px) {
   .scroll-indicator-top {
      top: 240px;
   }
}

@media only screen and (max-height: 660px) {
   #flip-card-front {
      bottom: 4%;
   }
}

@media only screen and (max-height: 630px) {
   .scroll-indicator-top {
      top: 215px;
   }
}

@media only screen and (max-height: 600px) {
   #flip-card-front {
      bottom: -6%;
   }
}

@media only screen and (max-height: 540px) {
   .scroll-indicator-top {
      top: 190px;
   }
}

@media only screen and (max-height: 530px) {
   #flip-card-front {
      bottom: -12%;
   }
}

@media only screen and (max-height: 480px) {
   #flip-card-front {
      bottom: -20%;
   }
}

@media only screen and (max-height: 460px) {
   .scroll-indicator-top {
      top: 160px;
   }
   .scroll-indicator-top img,
   .scroll-indicator-bottom img {
      width: 12px;
   }
}

@media only screen and (max-height: 350px) {
   #flip-card-front {
      bottom: -60%;
   }
}