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

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

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

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

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

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

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

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

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

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

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

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

.fontpagecontainer{
  width:100%;
  position:relative;
  background-color: rgb(230, 60, 127);
  background-image: url("../jpg/background.webp");
  background-size: cover;
  height:100%;
  overflow:hidden;
}

.logo{
  width:clamp(12.5rem, 9.2174rem + 19.1303vw, 36.125rem);
  position:absolute;
  top:3%;
  left:3%;
  max-width:clamp(12.5rem, 9.2174rem + 19.1303vw, 36.125rem);
  object-fit:scale-down;
}

.titleContainer{
  width:100%;
  position:absolute;
  top:10%;
  display:flex;
  justify-content: center;
  align-items: center;
  z-index:3000;
}

.catalogDiv{
  width:100%;
  gap:10px;
  position:absolute;
  top:53%;
  display:flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.catalogDiv img{
  width:37%;
  margin:0 auto;
  object-fit: scale-down;
}

.cat1{
  animation: myAnim 1s ease 0s 1 normal forwards;
}
.cat2{
  animation: myAnim2 1.5s ease 0s 1 normal forwards;
}
.cat3{
  animation: myAnim3 2s ease 0s 1 normal forwards;
}
@media screen and (max-width:1670px) {
  .catalogDiv{
    top:50%;
  }
  }

@media screen and (max-width:1200px) {
  .catalogDiv{
    top:44%;
  }
  }

  @media screen and (max-width:1200px)and (min-width:930px){
    .catalogDiv{
      top:45%;
    }
    }


  @media screen and (max-width:1200px)and (min-width:930px)and (min-height:1078px){
    .catalogDiv{
      top:45%;
    }
    }

@media screen and (min-width:1800px) {
  .catalogDiv{
    top:53%;
  }
  .catalogDiv img{
    width:30%;
  }
}

@media screen and (max-width:1200px) {
  .catalogDiv img{
    width:45%;
  }
}

@media screen and (max-width:900px) {
  .catalogDiv{
    top:43%;
  }
  .catalogDiv img{
    width:50%;
  }
}
@media screen and (min-width:1200px) and (max-width:1600px) {
  .catalogDiv{
    top:50%;
  }
  .catalogDiv img{
    width:45%;
  }
}


.title{
  max-width:clamp(26.875rem, 20.807rem + 21.575vw, 51.875rem);
  max-height:calc(100vh * 0.38);
  object-fit:scale-down;
}

.yellowBar{
  position:absolute;
  bottom:0;
  width:100%;
  background-color: #3098CE;
  height:auto;
}

.flower{
  position:absolute;
  top:0;
  right:-20px;
  width:25%;
  max-width:450px;
  object-fit: scale-down;
}

.small_flower{
  display:none;
  position:absolute;
  bottom:150px;
  left:-20px;
  width:30%;
  object-fit: scale-down;
}

.left_asset{
  position:absolute;
  bottom:-80px;
  left:-55px;
  width:clamp(34.375rem, 1.0417rem + 44.4444vw, 46.875rem);
  object-fit: scale-down;
}

.left_asset_small{
  display:none;
}

@media screen and (min-width:1250px) and (max-width:1500px) {
  .left_asset{
    bottom:-60px;
  }
}



.right_asset{
  position:absolute;
  bottom:-60px;
  right:-55px;
  width:clamp(32.5rem, 15.8333rem + 20.2222vw, 38.75rem);
  object-fit: scale-down;
}



@media only screen and (orientation: landscape) {
  .catalogDiv img{
    max-height: calc(100vh * 0.08);
  }

  .flower{
    max-height: calc(100vh * 0.4);
  }
  
  .left_asset{
    max-height: calc(100vh * 0.4);
  }

  .right_asset{
    max-height: calc(100vh * 0.47);
  }

}

@media screen and (min-width:1050px) and (max-width:1600px) {
  .left_asset{
    left:-90px;
    bottom:-70px;
    max-height: calc(100vh * 0.42);
  }
  .right_asset{
    right:-90px;
    max-height: calc(100vh * 0.43);
  }
}

@media screen and (orientation: landscape) and (max-width: 1150px) {
  .left_asset{
    bottom:-50px;
    max-height: calc(100vh * 0.4);
    left:-90px;
  }

  .right_asset{
    max-height: calc(100vh * 0.4);
    right:-120px;
  }

}

@media screen and (orientation: portrait) and (max-width: 1100px) {
  .left_asset{
    bottom:-50px;
    max-height: calc(100vh * 0.4);
    left:-90px;
  }

  .right_asset{
    max-height: calc(100vh * 0.4);
    right:-90px;
  }

}

@media screen and (orientation: landscape) and (max-height: 1200px) {
  .flower{
   width:auto;
  }

}

@media screen and (orientation: landscape) and (max-height: 950px) {
  .left_asset{
    bottom: -50px;
  }

  .right_asset{
    bottom:-50px;
  }

}

@media only screen and (orientation: portrait) {
  .title{
    max-width:90%;
    max-height: calc(100vh * 0.3);
  }

  .logo{
    top:2%;
  }
  .yellowBar{
    height:35px;
  }

  .flower{
    display:block;
    max-width:min(40vw,200px);
    top:-30px;
    z-index:1000;
  }

  .small_flower{
    display:block;
    bottom:220px;
  }
  

  .left_asset{
    position:absolute;
    bottom:-20px;
    left:-40px;
    width:55%;
    max-width:500px;
    display:none;
  }

  .right_asset{
    max-width:50%;
    right:-40px;
  }

  .left_asset_small{
    display:block;
  }


}

@media screen and (orientation: portrait) and (max-width:750px) {
  .left_asset{
    bottom:-20px;
  }


  .small_flower{
    bottom:clamp(8.125rem, 0.625rem + 30vw, 13.75rem);
  }

  .right_asset{
    bottom:-20px;
  }

  .catalogDiv{
    top:42%;
  }
  .catalogDiv img{
    width:90%;
    max-height: calc(100vh * 0.08);
  }


.titleContainer{
  top:10%;
}
.left_asset{
  bottom:0px;
}

.right_asset{
  bottom:0px;
}
}

@media screen and (orientation: portrait) and (max-width:550px) {
  .catalogDiv{
    top:42%;
  }
}

@media screen and (max-width:1200px) and (max-height: 1200px) {
  .flower{
   width:auto;
  }

}

@media screen and (max-height:880px) and (max-width:900px) {
  .catalogDiv img{
    max-height: calc(100vh * 0.07);
  }
  .title {
    max-height: calc(100vh * 0.3);
}
.titleContainer {
  top: 10%;
}
}

@media screen and (max-height:670px) and (max-width:768px) {
  .right_asset{
    right:-140px;
  }

.left_asset {
    bottom: -30px;
    max-height: calc(100vh * 0.35);
    left: -100px;
}
}


@media screen and (max-height:670px) and (max-width:660px) {

.catalog{
  top:50px;

}
.titleContainer {
  top: 13%;
}
}

@media screen and (max-height:670px) and (max-width:660px) {
.catalogDiv{
  top:45%;
}
.right_asset{
  right:-20px;
  bottom:0;
  max-height: calc(100vh * 0.30);
  width: auto;
}

.left_asset {
  bottom: 0px;
  max-height: calc(100vh * 0.25);
  left: -55px;
  width: auto;
}
  }

  @media screen and (max-height:670px) and (max-width:370px) {
    .right_asset{
      bottom: 7px;
      right: -35px;
    }
    
    .left_asset {
      bottom: 15px;
      max-height: calc(100vh * 0.18);
    }
      }


  @media screen and (max-height:560px) and (max-width:570px) {
    .right_asset{
      max-height: calc(100vh * 0.3);
    }
    
    .left_asset {
      max-height: calc(100vh * 0.27);
    }
      }


      @media screen and (max-height:560px) and (max-width:430px) {
        .right_asset{
          max-height: calc(100vh * 0.3);
        }
        
        .left_asset {
          max-height: calc(100vh * 0.27);
        }
          }

          @media screen and (max-height:560px) and (max-width:330px) {
            .right_asset{
              max-height: calc(100vh * 0.3);
            }
            
            .left_asset {
              max-height: calc(100vh * 0.24);
            }
              }
  @media screen and (min-height:1100px) and (max-width:1050px) {
    .catalogDiv {
      top: 45%;
  }
  .small_flower {
    bottom: 230px;
}
      }
      @media screen and (min-height:1060px) and (max-width:700px) {
      .catalogDiv {
        top: 43%;
    }}

    @media screen and (min-height:1060px) and (max-width:1050px) {
      .catalogDiv {
        top: 42%;
    }
    }

    @media screen and (orientation: portrait) and (max-width: 750px) and (max-height: 967px) and (min-width: 600px)  {
      .right_asset{
        max-height: calc(100vh * 0.3);
      }
      
      .left_asset {
        max-height: calc(100vh * 0.3);
      }
      .catalogDiv img {
        max-height: calc(100vh * 0.07);
    }
  }

  @media screen and (min-width: 1200px) and (max-width: 1600px) and (min-height:1150px){
.catalogDiv {
    top: 47%;
}
}


@media screen and (orientation: landscape)  and (max-width: 1200px) and (max-height:880px){
  .catalogDiv {
      top: 45%;
  }
  }


@media screen and (orientation: landscape)  and (max-width: 1200px)   and (min-width: 900px) and (max-height:880px){
  .catalogDiv {
      top: 48%;
  }
  }

  @media screen and (orientation: portrait)  and (max-width: 710px) and (max-height:710px){
    .catalogDiv {
        top: 45%;
    }
    .titleContainer{
      top:12%;
    }
    }

    @media only screen and (max-width: 350px) {
      .catalogDiv {
         z-index:4000;
      }


      }
      @media only screen and (max-height: 350px) {
        .catalogDiv {
           z-index:4000;
        }
  

        }

        @media screen and (orientation: portrait) and (max-width: 1000px) and (min-height: 1100px) {
          .catalogDiv img {
            width:60%;
        }
      }

      @media screen and (orientation: portrait) and (max-width:750px) {
        .catalogDiv img{
          width:90%;
          max-height: calc(100vh * 0.08);
        }

      }

      .yellowBar h1{
        text-align: center;
        font-size: 8px;
        margin: 10px;
        text-align:center;
        color:aliceblue
      }

      @media screen and (orientation: portrait) and (max-width:768px) {
        .yellowBar h1{
          font-size: 8px;
          margin: 10px;
        }

      }