body{
  margin:2px;
  padding:5px;
  height:auto;
  min-height:100vh;
}
.preloader{
  justify-content: center;
  text-align: center;
  display:flex;
  margin:2px auto;
  justify-content: center;
  align-items: center;
}
.preloader-container{
  position:relative;
  width:30%;
  height:30%;
  justify-content: center;
  text-align: center;
  display:flex;
  top:50px;
  z-index: 999;
  justify-content: center;
  align-items: center;
}
@keyframes spin1{
  0%{
    transform:rotate(0deg);
  }
  100%{
    transform:rotate(360deg);
  }
}
@keyframes spin2{
  0%{
    transform:rotate(0deg);
  }
  100%{
    transform:rotate(-360deg);
  }
}
.rings{
  border:5px transparent solid;
  border-left:8px #A917CC solid;
  width:200px;
  height:200px;
  border-radius:50%;
  position:absolute;
  top:200px;
  animation:spin1 linear 1.5s infinite;
}
.rings:nth-child(1)::before{
  content: "";
  position:absolute;
  width:40px;
  height:40px;
  background: #A917CC;
  left:30px;
  border-radius:50%;
}
.rings:nth-child(2){
  left:80px;
  top:80px;
  border-left:8px #B716C4 solid;
  animation:spin1 linear 2s infinite;
}
.rings:nth-child(2)::before{
  content: "";
  position:absolute;
  width:40px;
  height:40px;
  background: #B716C4;
  left:30px;
  border-radius:50%;
}
.rings:nth-child(3){
  right:80px;
  top:80px;
  border:8px transparent solid;
  border-right:8px #F908DD solid;
  animation:spin2 linear 2s infinite;
}
.rings:nth-child(3)::before{
  content: "";
  position:absolute;
  width:40px;
  height:40px;
  background: #F908DD;
  right:30px;
  border-radius:50%;
}
.preloader .loader-section{
  position: fixed;
  top: 0;
  width: 51%;
  height: 100%;
  background: #380532;
  z-index: 99;
}
.preloader .loader-section.section-left {
  left: 0;
}

.preloader .loader-section.section-right {
  right: 0;
}

/* Loaded styles */
.loaded .preloader .loader-section.section-left {
  -webkit-transform: translateY(-100%);
          transform: translateY(-100%);
  -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.loaded .preloader .loader-section.section-right {
  -webkit-transform: translateX(100%);
          transform: translateX(100%);
  -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.loaded .preloader-container {
  opacity: 0;
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}

.loaded #loader-wrapper {
  visibility: hidden;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  -webkit-transition: all 0.3s 1s ease-out;
  transition: all 0.3s 1s ease-out;
}

.main{
  margin:2px;
  padding:3px;
}
.header{
  display:flex;
  width:100%;
  background-image:linear-gradient(35deg,#A00B95,#7973ef);
  height:180px;
  position:relative;
}

.logo-area{
  width:170px;
  height:170px;
  margin-top:3px;
  margin-left: 7px;
  border-radius:50%;
  position:relative;
  background: white;
  transition: 1s;
  transition-delay: 1s;
  transform: translateY(-200px);
  opacity: 0;
}
.loaded .logo-area{
  transform: translateY(0);
  opacity:1;
  transform: rotateY(360deg);
}
.logo-area>img{
  width:100%;
  height:100%;
  border-radius:50%;
}
.menu-area{
  display:flex;
}
ol.main-menu{
  margin-right:30px;
  margin-top:50px;
  margin-left:50px;
  position:relative;
  top:30px;
}
ol.main-menu>li{
  list-style: none;
  padding:6px;
  display:inline;
  margin-left:8px;
}
ol.main-menu>li>a{
  text-decoration: none;
  font-family:roboto;
  font-size:30px;
  transition: 0.5s;
  position:relative;
  color:white;
}
ol.main-menu>li>a:hover{
  font-size:35px;
  shadow:1px 2px 1px rgba(0,0,0,0.5);
}
ol.main-menu>li>a:hover
.line{
  width:100%;
}
.line{
  position:absolute;
  bottom:-2px;
  left:1px;
  width:0;
  height:3px;
  background: #b0ade4;
  border-radius:3px;
  transition:0.5s;
}
/*login header*/
.login_container{
  width:150px;
  height:60px;
  border:2px solid #ccc;
  margin-top:60px;
  padding:3px;
  border-radius: 5px;
  box-shadow: 3px 5px 3px rgba(0,0,0,0.5);
}
.avatar{
  width:50px;
  height:50px;
  border-radius:50%;
}
.login_container>span{
  font-size:20px;
  color:white;
  font-family:arial;
  font-weight:bold;
  letter-spacing: 2px;
  position:relative;
  top:-15px;
}
.login_container:hover{
  box-shadow: 3px 5px 3px rgba(255,255,255,0.6);
}
/*login header ends here*/
/*banner section*/
.banner{
  width:100%;
  height:700px;
  margin-top:10px;
  overflow:hidden;
}
.banner-items>input[type="radio"]{
  display:none;
}
.banner-items{
  display:flex;
  width:450%;
  height:100%;
}
#first{
  transition: 1s;
}
.banner-content{
  width:100%;
  height:100%;
}
.banner-content>img{
  width:100%;
  height:100%;
}
.manual-btns{
  position: absolute;
  height:70px;
  display: flex;
  right:13px;
}
.m-crt{
  width:50px;
  height:50px;
  border: 2px #fff solid;
  margin-left:5px;
  margin-top:5px;
  border-radius:50%;
}
.m-crt:active{
  background: white;
}
.auto-btns{
  position:absolute;
  height:70px;
  right:12px;
  display:flex;
}
.a-crt{
  width:50px;
  height:50px;
  border: 2px #fff solid;
  margin-left:5px;
  margin-top:5px;
  border-radius:50%;
}
 .radio1:checked ~ #first{
    margin-left:0;
  }
  .radio2:checked ~ #first{
    margin-left:-50%;
  }
  .radio3:checked ~ #first{
    margin-left:-100%;
  }
  .radio4:checked ~ #first{
    margin-left:-340%;
  }
.radio1:checked ~.auto-btns #auto-crt1{
  background: white;
}
.radio2:checked ~.auto-btns #auto-crt2{
  background: white;
}
.radio3:checked ~.auto-btns #auto-crt3{
  background: white;
}
.radio4:checked ~ .auto-btns #auto-crt4{
  background: white;
}
/*banner overlay content*/
.banner-item-content{
  width:98%;
  height:700px;
  position:absolute;
  background-image: linear-gradient(45deg,rgba(255,255,255,0.5), rgba(0, 0, 0,0.5));
}
.banner-overlay-content{
  justify-content: center;
  text-align: center;
  color: #ffffff;
  position:relative;
  height:100%;
  top:-34px;
  background-image: linear-gradient(45deg, rgba(0,0,0,0.7),transparent);
}
.banner-overlay-content>h3{
  transition:1s;
  font-size: 35px;
  position:relative;
  top:150px;
  transition: 1.5s;
  transition-delay: 0.5s;
  transform: translateY(-200px);
  opacity: 0;
	font-family:arial;
}
.loaded .banner-overlay-content>h3{
  transform: translateY(-0);
  opacity: 1;
}
.banner-overlay-content>h4{
  font-size: 28px;
  transition-delay: 2.5s;
  position:relative;
  top:150px;
  opacity: 0;
  transition: 2s;
}
.loaded .banner-overlay-content>h4{
  opacity: 1;
  transform: rotateY(360deg);
	font-family:arial narrow;
}
.banner-overlay-content>p{
  transition:1s;
  font-size: 28px;
  transition-delay: 1.5s;
  transform: translateX(-500px);
  position:relative;
  top:150px;
  opacity: 0;
  transition: 1.5s;
}
.loaded .banner-overlay-content>p{
  transform: translateX(0);
  opacity: 1;
	font-family:arial;
}
.button-list{
  text-align:center;
  position:relative;
  top:150px;
  display: flex;
  width:100%;
  justify-content: center;
}
.button-list>div{
  margin-left: 8px;
  display:inline;
  background-image: linear-gradient(45deg,  #481277,#E229D5);
  width:200px;
  height:50px;
  border-radius: 5px;
  border:1px #ffffff sollid;
  box-shadow: 6px 8px 6px rgba(0,0,0,0.6);
  padding-top:4px;
  transition: 1.5s;
  transition-delay: 1.5s;
  opacity: 0;
}
.loaded .button-list>div:nth-child(1){
  transform: translateY(0);
  opacity: 1;
}
.loaded .button-list>div:nth-child(2){
  transform: translateY(0);
  opacity: 1;
}
.button-list>div:nth-child(1){
  transform: translateY(-200px);
}
.button-list>div:nth-child(2){
  transform: translateY(200px);
}
.button-list>div:hover{
  background-image: linear-gradient(45deg, #7C0B6C,#04A39B);
  width:210px;
  height:60px;
}
.button-list>div>a{
  color:white;
  text-decoration: none;
  font-size:25px;
  font-family:roboto;
  margin:5px auto;
}
/*gallery css starts here*/
.category-gallery{
  text-align: center;
  justify-content:center;
  position:relative;
}
.category-gallery>h3{
  color:#000099;
  font-size: 40px;
  font-family:roboto;
}
.gallery-container{
  width:100%;
  height:auto;
  display:flex;
  flex-wrap:wrap;
  justify-content: center;
  text-align: center;
  position:relative;
}
.gallery-item{
  width:45%;
  margin-left:20px;
  position:relative;
  display:flex;
  justify-content: center;
  text-align:center;
  flex:25%;
  margin-top:10px;
}
.gallery-image{
  width:80%;
  vertical-align: center;
  height:auto;
}
.gallery-overlay{
  position:absolute;
  width:98%;
  height:0;
  background: linear-gradient(45deg, rgba(130,8,119,0.8),rgba(198,34,179,0.5));
  top:4px;
  color:white;
  transition: 0.5s;
}
.gallery-overlay>p{
  font-size:30px;
  display:none;
  transition:0.7s;
  font-family:roboto;
}
.gallery-overlay>p>b{
  font-family:chiller;
  font-size:40px;
  letter-spacing:2px;
  color:#000;
}
.gallery-item:hover
.gallery-overlay{
  height:98%;
}
.gallery-item:hover
.gallery-overlay>p{
  display:block;
}
/*gallery css ends here*/

/*shopping chart starts here*/
.chart-container{
  width:100%;
  height:auto;
  text-align:center;
  margin-top:-10px;
}
.chart-container>h3{
  color:#000;
  font-size:32px;
  font-family:roboto;
}
.chart-item-container{
  width:100%;
  height:auto;
  margin-top:-10px;
  display:flex;
  justify-content: center;
  flex:25%;
}
.chart-item{
  border:1px blue solid;
  padding:4px;
  width:30%;
  margin-left:9px;
  min-height:200px;
}
.chart-piece{
  width:100%;
  height:250px;
}
.chart-item>div{
  background: #7F0B77;
  width:100%;
  height:200px;
  color:white;
  font-size:25px;
  font-family:Newforum;
  margin-top:8px;
}
.buy-btn{
  background-image: linear-gradient(45deg, #481277,#E229D5);
  width:200px;
  height:auto;
  border:none;
  color:white;
  font-size:35px;
  font-family:chiller;
  font-weight:bold;
  letter-spacing:3px;
  margin-top:10px;
  border-radius:5px;
  box-shadow: 6px 8px 6px rgba(0,0,0,0.6);
}
.buy-btn:hover{
  box-shadow: 6px 8px 6px rgba(255,255,255,0.6);
}
/*shoping chart ends here*/

/*orders start here*/
.uploaded-orders{
  width:100%;
  height:auto;
  display:flex;
  flex-wrap:wrap;
  justify-content: center;
  align-items: center;
}
.uploaded-orders .chart-item{
  text-align: center;
  margin-top: 10px;
}
.order-container h3{
  font-size:30px;
}
.order-container form{
  margin-top: -20px;
  width:60%
}
.order-container form>input[type="text"],
.order-container form>input[type="email"],
.order-container form>input[type="submit"],
.order-container form>input[type="file"],
 .order-container form>select,
 .order-container form>textarea{
  width:60%;
  height:30px;
  margin-top: 5px;
  font-size: 18px;
  border-radius:10px;
}
.order-container form>textarea{
  height:60px;
}
.order-container form>input:focus{
  box-shadow: 0 0 0 4px rbga(0,0,0,0.4);
}
#order .chart-item{
  border:1px blue solid;
  padding:4px;
  width:30%;
  margin-left:9px;
  flex:25%;
}
#order{
  display:flex;
  flex-wrap:wrap;
  width:100%;
}
.chart-piece{
  width:100%;
  height:250px;
}
#order .chart-item>div{
  background: #7F0B77;
  width:100%;
  min-height:150px;
  height:auto;
  color:white;
  font-size:25px;
  font-family:Newforum;
  margin-top:8px;
}
/*orders */

/*sample gallery start here*/
.gallery-sample-container{
  width:100%;
  height:auto;
  justify-content: right;
  text-align:right;
  background-image:linear-gradient(45deg,#60095A,#7F0B77);
}

.gallery-sample-container>h3{
  font-size:32px;
  font-family:roboto;
  color:white;
  text-align: center;
}
.gallery-sample{
  justify-content: left;
  text-align: left;
  margin-left:50px;
  display:flex;
}
.sample-item>img{
  width:200px;
  height:200px;
  border-radius: 50%;
}
.sample-item>span{
  font-size:25px;
  color:white;
  font-family:new times romans;
}
.sample-item{
  margin-left:30px;
}
.view-more{
  width:150px;
  height:50px;
  margin-bottom: 5px;
  margin-right:6px;
  box-shadow: 3px 5px 3px rgba(0,0,0,0.5);
}
.view-more>a{
  text-decoration: none;
  font-size: 20px;
  color:#000;
  font-family: arial;
}
/*sample gallery ends here*/

/*footer*/
footer{
  width:100%;
  height:auto;
  background:#3F083B;
  color:#fff;
  margin-top:-18px;
}
footer>h3{
  text-align: center;
  font-size:30px;
	font-family:roboto;
}
.talk-to-us{
  width:100%;
  display: flex;
}
.talk-to-us>ul>li{
  list-style:none;
  margin-left: 0;
}
.talk-to-us>ul>li>a{
  text-decoration: none;
  font-size:18px;
  color:#fff;
}
.subscibe{
  width:60%;
  height:70px;
  border-radius:30px;
  position: relative;
  margin-top:50px;
  margin-left: 10px;
}
#subscibe_email{
  width:68%;
  height:65px;
  border-bottom-left-radius: 30px;
  border-top-left-radius: 30px;
  font-style: italic;
  font-size: 21px;
  padding-left:10px;
  font-family: Pristina;
}
#subscibe_email:focus{
  box-shadow:2px 3px 2px 3px rgba(255,255,255,0.5);
}
#subscibe_btn{
  width:27%;
  height:65px;
  border-bottom-right-radius: 30px;
  border-top-right-radius: 30px;
  position: absolute;
  font-size:30px;
  text-align: center;
  font-family: Roboto;
  box-shadow: 1px 2px 1px 2px  rgba(0,0,0,0.6);
  cursor: pointer;
  background: #5B0655;
  color:#fff;
  transition: 0.5s;
}
#subscibe_btn:hover{
  background: #C61EBA;
  text-decoration: underline;
}
.end-footer{
  font-size:18px;
  color:white;
  margin:1px auto;
}
/*footer ends here*/

/*login form*/
.login_form{
  width:50%;
  height:400px;
  position:fixed;
  background-image:linear-gradient(45deg,#A00B95,#7973ef);
  z-index: 9999;
  left:25%;
  top:5%;
  border-radius:10px;
  justify-content: center;
  text-align: center;
  color:#FFF;
  display:none;
  box-shadow:2px 3px 2px 3px rgba(0,0,0,0.5);
}
.login_form>.title{
  width:96%;
  height:50px;
  background: white;
  margin:15px auto;
  color:#000;
  font-size: 39px;
  text-decoration: underline;
  font-weight: bold;
  font-family:times new roman;
}
.login_form>form>table{
  width:96%;
  height:80%;
  margin:10px auto;
}
.field-head{
  width:35%;
  border-radius: 10px;
  border:2px #000 solid;
  font-size:25px;
}
.field>input{
  width:99%;
  height:40px;
  border-radius: 10px;
  font-size:18px;
}
.form-btns{
  width:150px;
  height:50px;
  font-size: 18px;
  font-weight: bold;
  color:#fff;
  background-image: linear-gradient(45deg, #481277,#E229D5);
  border-radius:10px;
}
/*login form ends here*/
/*logout starts*/
.logout-cont{
  position:absolute;
  right:10px;
  top:8px;
}
.logout{
  width:120px;
  height:60px;
  font-size:20px;
  text-decoration: underline;
  background: transparent;
  border:2px solid #000;
  color:#fff;
}