:root{
  --primary-color:#7b8b43;
  --primary-color-800:#4d5728;
  --gold-color:#ac8f1e;
  --gold-color-t:#dcc877b4;
  --gold-color-400:#c9a723;
  --custom-red-color:#ae191b
}

.wow {
  visibility: hidden;
}

.text-gold-400{
  color:var(--gold-color-400)
}

.fade-box{
  border-image: linear-gradient(#f6b73c, #4d9f0c) 30;
border-width: 4px;
border-style: solid;
}

section#first{
    /* background: url(../img/FONDO.jpg) center center no-repeat; */
    background-position-y:-100px;
    height: 100vh;
}

h2, h1,h3{
  color: var(--primary-color);
}
#sixth, #sixth h3{
  color: var(--primary-color-800);
}

#fourth h3{
  color: var(--gold-color-400);
}

.bg-custom-red{
  background-color: var(--custom-red-color) !important;
}

p{
  color:#c9a723;
}

.bg-gold-t{
  background: var(--gold-color-t)
}

.text-gold{
  color:var(--gold-color)
}

section#sixth{
  background:url("../img/PATTERN-1.jpg?v=1");
  background-repeat: repeat;
}

section#third{
  background:url("../img/flowers-p.jpg?v=1.2") repeat;
}

#liverpool{
  background-color: #e10198;
}

.title-s3{
  width:300px;
}

.color-1{
  background-color: rgba(255, 255, 255, 0.546);
}

.vertical-center {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
  }

section#form #background{
  background: url(../img/anillos-boda.jpg);
  background-blend-mode: lighten;
  background-size: cover;
}
.loader-wrapper{
  top:50%;
  bottom:50%;
}


.phrase{
    font-family: 'Libre Bodoni', serif;
}

.poppins-font{
  font-family: 'Poppins', sans-serif;
}

.border-gold{
  border-image: linear-gradient(to right, #ccac00, #ffe140) 1;
}

.img-label{
    color: white;
    text-align: center;
}



section#third .red-color-t{
  background:#820e0eed;
}

.button, .timeline-year-label, .timeline::before, .timeline-end {
    background:  var(--primary-color)
}

.timeline-item-title {

    border-bottom: 1px solid #7b8b43;
    color: var(--primary-color)
}

.form-body{
    width:80%;
    margin:auto;
    background-color: rgba(49, 46, 46, 0.531);
}

form .form-control{
  color:rgb(27, 26, 26);
}
.timeline-item-description {
  font-size: 1.25rem;
  text-align: center;
  margin-top: 1remwedding-couple;
}

.timeline-item-image {
  max-width: 40%;
  width: 40%;
  margin: auto;
}

/* spinner */

lds-ring {
    left:calc(50% - 104px);
    top:calc(50% - 104px);
  }
  .lds-ring div {
    box-sizing: border-box;
    display: block;
    position: absolute;
    left:50%;
    width: 120px;
    height: 120px;
    margin: 8px;
    border: 8px solid #fff;
    border-radius: 50%;
    animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
    border-color: #fff transparent transparent transparent;
  }
  .lds-ring div:nth-child(1) {
    animation-delay: -0.45s;
  }
  .lds-ring div:nth-child(2) {
    animation-delay: -0.3s;
  }
  .lds-ring div:nth-child(3) {
    animation-delay: -0.15s;
  }
  @keyframes lds-ring {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }

  .flip-y{
    transform: scaleX(-1);
  }

  .tracking-widest{
    letter-spacing: 1.25em;
  }

  .carousel-cell img{
    height: 600px;
    object-fit: cover;
    width: 100%;
    float: left;
  }

  .swiper-slide img{
    margin:auto;
  } 

  .swiper {
    max-width: 80%;
    height: auto;
  }
  

  #item-2-4{
    min-height: 550px;
    }
  

  @media only screen and (min-width: 580px) {

    section#form #background{
      background: url(../img/anillos-boda.jpg);
      background-size:contain;
      background-repeat: no-repeat;
      background-position: center;
    }

    .swiper {
      width: 400px;
      height: 500px;
    }

    section#fourth div{
      grid-template-columns:1fr 2fr 2fr 1fr;
    }
    
    #item-1-4{
      grid-column: 2 / 3;
    }

    #item-2-4{
      grid-column: 3 / 4;
    }
    
    section#first{
      min-height: 750px;
    }

    img.main-text{
      max-width:300px ;
    }

    p#main-phrase{
      max-width:400px;
    }

    .timeline-item-body a img{
      max-width: 140px;
    }

  }