/*** by mineweb.rs!
     desktop first ***/

@font-face {font-family: "Noteworthy";
    src: url("https://db.onlinewebfonts.com/t/f4bc352b52c96ca087093d36bd2396bb.eot"); /* IE9*/
    src: url("https://db.onlinewebfonts.com/t/f4bc352b52c96ca087093d36bd2396bb.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
    url("https://db.onlinewebfonts.com/t/f4bc352b52c96ca087093d36bd2396bb.woff2") format("woff2"), /* chrome firefox */
    url("https://db.onlinewebfonts.com/t/f4bc352b52c96ca087093d36bd2396bb.woff") format("woff"), /* chrome firefox */
    url("https://db.onlinewebfonts.com/t/f4bc352b52c96ca087093d36bd2396bb.ttf") format("truetype"), /* chrome firefox opera Safari, Android, iOS 4.2+*/
    url("https://db.onlinewebfonts.com/t/f4bc352b52c96ca087093d36bd2396bb.svg#Noteworthy") format("svg"); /* iOS 4.1- */
}
@font-face {
    font-family: 'BloggerSansLight';
    src: url('BloggerSans-Light.eot'); /* IE9 Compat Modes */
    src: url('BloggerSans-Light.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('BloggerSans-Light.woff') format('woff'), /* Modern Browsers */
         url('BloggerSans-Light.ttf') format('truetype'), /* Safari, Android, iOS */
         url('BloggerSans-Light.svg#BloggerSans-Light') format('svg'); /* Legacy iOS */
    font-style: normal;
    font-weight: normal;
    text-rendering: optimizeLegibility;
}

body {
  background-color: #FEFDF9;
  font-family: "BloggerSansLight", Georgia;
  font-size: 24px;
}

h1,
h2,
h3,
h4 {
  font-family: 'Noteworthy';
  font-weight: bold;
}

h1 {
  font-size: 50px;
  margin-bottom: 20px;
}

h2 {
  font-size: 34px;
}

h3 {
  color: #f0bd47;
  font-size: 34px;
}

/*** global ***/


/*** layout ***/
.d-flex-custom {
    min-height: 100vh;
    display: flex;
    flex-flow: column;
    justify-content: center;
    padding: 200px 0;
}

.mb-40 {
  margin-bottom: 40px;
}

.mb-60 {
  margin-bottom: 60px;
}

.mb-20 {
  margin-bottom: 20px;
}

.mbt-40 {
  margin: 40px 0;
}
/*** specific ***/

.section-1 {
  min-height: 100vh;
}

.dust-1 {
  position: absolute;
  top: 0;
  left: 0;
  width: 25%;
}

.dust-2 {
  position: absolute;
  top: 0;
  right: 0;
  width: 25%;
}

.dust-3 {
  position: absolute;
  top: 15%;
  right: 5%;
  width: 25%;
  z-index: 999;
}

.jar {
  position: absolute;
  right: 0;
}

.btn-order {
  width: 210px;
  height: auto;-webkit-animation: bounce 1s infinite alternate;
  -moz-animation: bounce 1s infinite alternate;
  animation: bounce 1s infinite alternate;
}
@-webkit-keyframes bounce {
  to { -webkit-transform: scale(1.1); }
}
@-moz-keyframes bounce {
  to { -moz-transform: scale(1.1); }
}
@keyframes bounce {
  to { transform: scale(1.1); }
}

.section-2 {
  background-image: url('../img/prasina-bg.png');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  padding: 100px 0;
  margin-top: -100px;
}

.section-2 article {
  padding: 60px;
  -webkit-box-shadow: 1px -5px 22px 9px rgba(255,238,199,0.2);
-moz-box-shadow: 1px -5px 22px 9px rgba(255,238,199,0.2);
box-shadow: 1px -5px 22px 9px rgba(255,238,199,0.2);
border-radius: 4%;
  margin-bottom: 20px;
}

.section-2 article h4 {
    margin-bottom: 30px;
}

.section-2 article h4::after {
  content: " ";
  display: block;
  width: 250px;
  height: 20px;
  background-image: url('../img/line-h4.png');
  margin-top: 10px;
}

.section-2 article p {
  font-size: 20px;
  line-height: 2;
}

.section-3 {
  background-image: url('../img/bajka-u-tegli-ispis.png');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  padding: 20px 0 200px;
  margin-top: -50px;
}

.section-4 {
  margin-top: -100px;
}

.section-5 {
  background-image: url('../img/prasina-bg-2.png');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  padding: 100px 0 300px;
}

.section-6 {
  margin-top: -200px;
  z-index: 999999;
position: relative;
}

.form-section {
  border-radius: 15px;
  padding: 50px 0;
}

form {
  max-width: 350px;
  margin: auto;
  text-align: center;
}


footer {
  background-image: url('../img/footer-bg.png');
  background-repeat: no-repeat;
  background-position: top;
  background-size: cover;
  padding: 500px 0 50px;
  color: white;
  margin-top: -400px;
}
.social {
  margin-bottom: 40px;
}
.social img {
  width: 60px;
}

.form-control {
  background: transparent;
  border: none;
  border-radius: 0;
  font-size: 18px;
  padding-left: 0;
}

button {
  background: transparent;
  border: none;
  border-radius: 0;
  margin: 30px 0 40px;
}

.input-line {
  display: block;
  width: 320px;
  height: 15px;
  background-image: url('../img/line-input.png');
  background-repeat: no-repeat;
  margin-top: -5px;
  margin-bottom: 10px;
}

textarea:focus, input:focus, button:focus, .form-control {
    outline: none;
    border: none;
    box-shadow: none!important;
}

.info-text {
      font-size: 18px;
      padding: 0 15px;
      opacity: 0.5;
}

.col-md p {
  font-size: 20px;
}

.col-md p a {
  color: #000;
}

.alert {
      font-size: 18px;
}

/*** helper ***/

/*** specific ***/

@media screen and (max-width: 768px) {
  body {
    font-size: 18px;
}
    .jar {
      position: relative;
    }

    .d-flex-custom {
      min-height: auto;
      padding: 20px 15px;
    }
    h1 {
    font-size: 40px;
    margin-bottom: 20px;
    text-align: center;
}
.btn-naruci-a {
  text-align: center;
}
.section-1 p {
  text-align: center;
}

h2 {
    font-size: 25px;
}

.section-2 {
  padding-top: 50px;
  margin-top: 0;
}
.section-2 article h4::after {
    width: 175px;
}

.section-2 article {
    padding: 30px;
  }

  a {
    color: #000;
  }

  .form-section {
    padding-top: 0;
  }
  .input-line {
    max-width: 100%;
  }
  .section-2 article p {
    font-size: 18px;
    line-height: 1.6;
}
}