body{
    overflow-x: hidden !important;
    margin: 0px auto;
}

@font-face {
  font-family: mm1;
  src: url(../fonts/Barlow-Regular.ttf);
}

@font-face {
  font-family: mm2;
  src: url(../fonts/BARLOW-EXTRABOLD.TTF);
}

/*-------------------------------------------------------header start---------------------------------------------------------*/
.hdr{
    position: fixed;
    top: 0%;
    width: 101%;
    z-index: 9999999;
    background: linear-gradient(0deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.298) 2%, rgba(255, 255, 255, 0.3) 3%, rgba(255, 255, 255, 0.3) 6%, rgba(255, 255, 255, 0.35) 12%, rgba(255, 255, 255, 0.4) 17%, rgba(255, 255, 255, 0.45) 21%, rgba(255, 255, 255, 0.5) 26%, rgba(255, 255, 255, 0.5) 30%, rgb(255, 255, 255) 80%, rgb(255, 255, 255) 100%);
}

.insld .item{
  animation: rotateInDownLeft 1s;
}
#line11{
  text-align: center;
   padding: 2% 0% 2% 0%;
}
.line1 a{
   font-family: mm1;
   font-size: 1.2vw;
   color: #000;
   padding: 0% 4% 0% 4%;
   transition: all 0.5s;
   font-weight: bold;
}

.line1 a:hover{
    color: #ff0000;
    text-decoration: none;
}

#hdrimg{
    width: 60%;
        padding: 2% 0% 0% 4%;
        transition: all 1s;
}
.logo1 img:hover {
    width: 62%;
}
.logo1{
    width: 100%;
}

#social1{
  text-align: right; 
  padding: 2% 2% 2% 0%;
}
.social img{
    padding: 2% 3% 2% 3%;
    width: 15%;
    transition: all 0.5s;
}
.social img:hover{
    opacity: 0.5;
}










/*-------------------------------------------------------header end---------------------------------------------------------*/

/*-------------------------------------------------------index start---------------------------------------------------------*/

.dairy{
    background: url(../assets/img/Rectangle-1.jpg);
    padding: 40% 0% 60% 0%;
    text-align: center;
    background-repeat: no-repeat;
    position: relative;
    background-position: 60% 0%;
    background-size: 65%;
}

.dairy1{
    position: absolute;
    left: 12%;
    top: 32%;
    width: 17%;
}

.dairy2{
    position: absolute;
    right: 0%;
    bottom: 0%;
    width: 54%;
}

.dairy3 p{
    font-size: 1vw;
    font-family: mm1;
    text-align: justify;
    color: #000;
        font-weight: bold;
        padding: 0% 23% 2% 0%;
}

.dairy3 h3{
    font-size: 4vw;
    font-family: mm2;
    text-align: justify;
    color: #c70114;
    padding-bottom: 5%;
}
.button1{
    background-color: #c70114;
        border-radius: 10px;
    font-size: 1vw;
    color: white;
    font-family: 'mm1';
    border: none;
    padding: 1% 3% 1% 3%;
    transition: all 0.5s;
    width: 24%;
}

.button1:hover {
  background-color: #9aa44b;
}

.cow{
    background: url(../assets/img/Layer-811-copy.jpg);
    background-size: 100%;
    background-repeat: no-repeat;
       padding: 4% 2% 5% 3%;
}

.cow1 h3{
    font-size: 4vw;
    font-family: mm2;
    color: #c70114;
    text-align: center; 
    padding-bottom: 8%;
}

.cow2 img{
    width: 100%;
}

.brand h3{
     font-size: 4vw;
    font-family: mm2;
    color: #c70114;
    text-align: center; 
        padding: 7% 0% 5% 0%;
}
.logo2 img{
     width: 85%;
}

.test p{
    font-size: 1vw;
    font-family: mm1;
    color: #000;
    text-align: justify;
        padding: 0% 56% 3% 15%;
        font-weight: bold;
}
.test h3{
    font-size: 4vw;
    font-family: mm2;
    color: #c70114;
    text-align: justify;
    padding-bottom: 2%;
    padding-left: 15%;
}
.test{
    background-color: #f3f3f3;
}

.test h4{
    font-size: 1.3vw;
    font-weight: bold;
    font-family: mm1;
    color: #000;
    text-align: justify;
    padding-top: 5%;
    padding-left: 15%;
}
.red{
    background-color: #ca0213;
    width: 30%;
    position: absolute;
        right: 15%;
    bottom: 55%;
    padding: 3% 3% 3% 3%;
}
.red p{
    font-family: mm1;
    font-size: 1.2vw;
    color: #fff;
    text-align: justify;
}
.red h4{
    font-family: mm1;
    font-size: 1.2vw;
    color: #fff;
       text-align: center;
    padding-top: 47%;
}
.red1 img{
    width: 65%;
        padding-top: 3%;    
}

.hr1{
     border: 0.4px solid #fff;
}
.owl-prev{
    position: absolute;
    top: 25%;
    left: -3%;
    height: 12%;
    font-size: 6vw !important;
}
.owl-next{
    position: absolute;
    top: 25%;
    right: -3%;
    height: 12%;
    font-size: 6vw !important;
}

.carousel-inner{
    position: relative;
}
.item1{
    position: absolute;
    top: 77%;
    left: 11%;
    width: 6%;
}
.item2{
    position: absolute;
    top: 46%;
    right: 8.3%;
    width: 6%;
}
.item3{
    position: absolute;
    top: 74%;
    left: 14%; 
    width: 6%;
}
.item4{
    position: absolute;
       top: 69%;
    right: 19.5%;
    width: 6%;
}
.btn1{
    border-radius: 10px;
    background-color: #cb0215;
    color: #fff;
    font-size: 1vw;
    font-family: mm2;
    padding: 10% 15% 10% 15%;
    border: none;
    transition: all 0.5s;
    width: 100%;
}
.btn1:hover{
  background-color: #9aa44b; 

}


.carousel-control {
    top: 50%!important;
    bottom: unset!important; 
}
.owl-carousel img{
  border: 1px solid #b9acac;
}
.owl-carousel .owl-item img {
    width: 90% !important;
    margin: auto;
}

/*
#slides {
  position: relative;
  width: 100%;
  height: 100%;
}
#slides .slide {
  position: absolute;
  display: -webkit-box;
  display: flex;
  width: 100%;
  height: 100%;
}
#slides .slide .title {
  position: absolute;
  top: calc(50% - 0.5em);
  left: 20px;
  z-index: 2;
  padding-top: 5px;
  font-family: "Reem Kufi", sans-serif;
  font-size: 5em;
  color: white;
  overflow: hidden;
}
#slides .slide .title .title-text {
  display: block;
  -webkit-transform: translateY(1.2em);
          transform: translateY(1.2em);
  -webkit-transition: -webkit-transform 1s ease-in-out;
  transition: -webkit-transform 1s ease-in-out;
  transition: transform 1s ease-in-out;
  transition: transform 1s ease-in-out, -webkit-transform 1s ease-in-out;
}
#slides .slide .slide-partial {
  position: absolute;
  width: 50%;
  height: 100%;
  overflow: hidden;
  -webkit-transition: -webkit-transform 1s ease-in-out;
  transition: -webkit-transform 1s ease-in-out;
  transition: transform 1s ease-in-out;
  transition: transform 1s ease-in-out, -webkit-transform 1s ease-in-out;
}
#slides .slide .slide-partial img {
  position: absolute;
  z-index: 1;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -webkit-transition: -webkit-transform 1s ease-in-out;
  transition: -webkit-transform 1s ease-in-out;
  transition: transform 1s ease-in-out;
  transition: transform 1s ease-in-out, -webkit-transform 1s ease-in-out;
}
#slides .slide .slide-left {
  top: 0;
  left: 0;
  -webkit-transform: translateX(-100%);
          transform: translateX(-100%);
}
#slides .slide .slide-left img {
  top: 0;
  right: 0;
  -o-object-position: 100% 50%;
     object-position: 100% 50%;
  -webkit-transform: translateX(50%);
          transform: translateX(50%);
}
#slides .slide .slide-right {
  top: 0;
  right: 0;
  -webkit-transform: translateX(100%);
          transform: translateX(100%);
  -webkit-transition-delay: 0.2s;
          transition-delay: 0.2s;
}
#slides .slide .slide-right img {
  top: 0;
  left: 0;
  -o-object-position: 0% 50%;
     object-position: 0% 50%;
  -webkit-transition-delay: 0.2s;
          transition-delay: 0.2s;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}
#slides .slide.active .title .title-text {
  -webkit-transform: translate(0);
          transform: translate(0);
  -webkit-transition-delay: 0.3s;
          transition-delay: 0.3s;
}
#slides .slide.active .slide-partial, #slides .slide.active .slide-partial img {
  -webkit-transform: translateX(0);
          transform: translateX(0);
}

#slide-select {
  position: absolute;
  bottom: 20px;
  left: 20px;
  z-index: 100;
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
          align-items: center;
  justify-content: space-around;
  font-family: "Reem Kufi", sans-serif;
  font-size: 1.5em;
  font-weight: lighter;
  color: white;
}
#slide-select li {
  position: relative;
  cursor: pointer;
  margin: 0 5px;
}
#slide-select li.prev:hover {
  -webkit-transform: translateX(-2px);
          transform: translateX(-2px);
}
#slide-select li.next:hover {
  -webkit-transform: translateX(2px);
          transform: translateX(2px);
}
#slide-select .selector {
  height: 14px;
  width: 14px;
  border: 2px solid white;
  background-color: transparent;
  -webkit-transition: background-color 0.5s ease-in-out;
  transition: background-color 0.5s ease-in-out;
}
#slide-select .selector.current {
  background-color: white;
}

.codepen-link {
  position: absolute;
  bottom: 20px;
  right: 20px;
  height: 40px;
  width: 40px;
  z-index: 10;
  border-radius: 50%;
  box-sizing: border-box;
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/544318/logo.jpg");
  background-position: center center;
  background-size: cover;
  opacity: 0.5;
  -webkit-transition: all 0.25s;
  transition: all 0.25s;
}
.codepen-link:hover {
  opacity: 0.8;
  box-shadow: 0 2px 6px #0c0c0c;
}*/

/*-------------------------------------------------------index end---------------------------------------------------------*/

/*-------------------------------------------------------footer start---------------------------------------------------------*/

.foot{
    background: url(../assets/img/Layer-820.jpg);
    background-repeat: no-repeat;
    background-size: 100%;
        padding: 10% 0% 5% 0%;
}
.foot p{
    font-family: mm1;
    font-size: 1.3vw;
    color: #fff;
    text-align: center;
    padding-bottom: 2%;
}

.line2 a{
   font-family: mm1;
   font-size: 1.2vw;
   color: #fff;
   padding: 0% 3% 0% 3%;
   transition: all 0.5s;
}
.line2 a:hover{
    color: #bfb6d0;
    text-decoration: none;
}
.line2{
    text-align: center;
}

.foot h4{
    font-family: mm1;
    font-size: 1.7vw;
    color: #fff;
    text-align: center;
        padding: 3% 0% 0% 0%;
}

.social1{
    text-align: center;
}

.social1 img{
     width: 4.9%;
    padding: 1%;
    transition: all 0.5s;
}
.social1 img:hover{
    opacity: 0.5;
}

.fot3{
    text-align: center;
    font-size: 1vw;
    font-family: mm1;
        padding: 0.5% 0% 0.5% 0%;
}

#myBtn {
  display: none; /* Hidden by default */
  position: fixed; /* Fixed/sticky position */
  bottom: 20px; /* Place the button at the bottom of the page */
  right: 30px; /* Place the button 30px from the right */
  z-index: 99; /* Make sure it does not overlap */
  border: none; /* Remove borders */
  outline: none; /* Remove outline */
  background-color: #cb0214; /* Set a background color */
  color: white; /* Text color */
  cursor: pointer; /* Add a mouse pointer on hover */
  padding: 10px; /* Some padding */
  border-radius: 50px; /* Rounded corners */
  font-size: 30px; /* Increase font size */
  transition: all 0.5s;
}

#myBtn:hover {
  background-color: #9aa44b; /* Add a dark-grey background on hover */
  color: #000;
}







/*-------------------------------------------------------footer end---------------------------------------------------------*/





/*-------------------------------------------------------products start---------------------------------------------------------*/


.btnp{
     background-color: #c90314;
    border-radius: 10px;
    color: #fff;
    font-size: 2vw;
    font-family: mm2;
    padding: 1% 2% 1% 2%;
    border: none;
    position: absolute;
    right: 16%;
    bottom: 0%;
    width: 16%;
    transition: all 0.5s;
}
.btnp:hover{
  background-color: #9aa44b;

}

.pro1{
  background: url(../assets/img/Layer-81133.jpg);
  background-repeat: no-repeat;
  background-size: 100%;
  padding: 10% 0% 7% 0%;
  position: relative;
}

.btn12{
  position: relative;

  }

.btn21{
     background-color: #9aa44b;
    border-radius: 10px;
    color: #fff;
    font-size: 1vw;
    font-family: mm2;
    padding: 8% 9% 8% 9%;
    border: none;
    transition: all 0.5s;
    width: 100%;
}
.btn21:hover{
  background-color: #c90314; 

}

.btn22{
  position: relative;
  width: 60%;
  margin: auto;
  text-align: center;
padding: 3% 0% 3% 0%;
}

.pimg img{
  width: 100%;
      border: 1px solid #b9acac;
}
.pimg{
  text-align: center;
      padding-bottom: 5%;
}



.prodwgt{
    position: absolute;
    top: 0%;
    left: 0%;
    height: 100%;
    width: 100%;
    display: grid;
    align-items: center;
    background: #fff6f6c9;
    text-shadow: 0px 0px 15px #fff;
    font-family: mm2;
    animation:fadeIn 0.4s;
    font-size: 2vw;
    padding: 10%;
}
.prodwgt h3 {
    font-size: 2.5vw;
    text-decoration: underline;
}


/*-------------------------------------------------------products end---------------------------------------------------------*/


/*-------------------------------------------------------productdetail start---------------------------------------------------------*/
.prodi{
    width: 80%;
    margin: auto;
    padding: 5% 0% 5% 0%;
}
.prodiimg img{
    width: 100%;
}
.protbl td{
    border: 1px solid #9f9f9f;
    padding: 1.5%;
    font-family: mm1;
    font-size: calc(0.7vw + 0.6vh);
    color: #000;
}
.protbl th{
    padding: 1.5%;
    font-family: mm2;
    text-align: center;
    background-color: #c90314;
    font-size: calc(0.8vw + 0.7vh);
    color: #fff;
}
.nuttbl{
    width: 100%;
}
.txtctr{
    text-align: center;
}
.prodtl h3{
    font-family: mm2;
    font-size: calc(0.8vw + 0.7vh);
    color: #000;
}
.prodtl p{
    font-family: mm1;
    font-size: calc(0.7vw + 0.6vh);
    color: #000;
    text-align: justify;
}
/*-------------------------------------------------------productdetail end---------------------------------------------------------*/


/*-------------------------------------------------------about start---------------------------------------------------------*/


.pro2{
  background: url(../assets/img/Layer-81122.jpg);
  background-repeat: no-repeat;
  background-size: 100%;
  padding: 10% 0% 7% 0%;
  position: relative;
}
.ab{
  width: 90%;
  padding-top: 5%;
  float: right;
}
.abt{
  text-align: center;
}

.ab1{
  width: 90%;
  padding-top: 5%;
  float: left;
}
.ab2{
  width: 90.5%;
  padding-top: 2%;
}

.abt h4{
  font-size: 1.3vw;
    font-weight: bold;
    font-family: mm1;
    color: #000;
    text-align: justify;
}
.abt h3 {
    font-size: 3.5vw;
    font-family: mm2;
    color: #c70114;
    text-align: justify;   
}
.abt h5 {
    font-size: 3.5vw;
    font-family: mm2;
    color: #c70114;
    text-align: center;   
}
.abt p {
    font-size: 1.1vw;
    font-family: mm1;
    color: #000;
    text-align: justify;
        font-weight: bold;
}

.happy img{
  width: 95%;
}


.parallax {
  background: url(../assets/img/Layer-822.jpg);
position: relative;
   
    background-size:cover;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    padding: 15% 0% 15% 0%;
    display: block!important;
    text-align: center;
    font-size: 3vw;
    line-height: 1.1;
   
    color: #fff;
}

.parallax h4{
    font-size: 4vw;
    font-family: mm2;
    color: #fff;
    text-align: center;
    padding-top: 8%;
   
}

.hr2 {
    border: 0.4px solid #fff;
    width: 37%;
}
.his{
  background-color: #f3f3f3;
}
.his1{
  background-color: #f3f3f3;
  padding: 5% 0% 5% 0%;
}
.his2{
  width: 70%;
  text-align: center;
  margin: auto;
}
.his2 img{
  width: 100%;
  padding: 4% 3% 4% 3%;
  background-color: #fff;
}
.infa{
  width: 70%; margin: auto;
}
.infa h4{
      font-size: 3.5vw;
    font-family: mm2;
    color: #c70114;
    text-align: center;
    padding-top: 3%;
}
.hiss{
  
    position: absolute;
    top: 24%;
    left: 0%;
    padding: 0% 2% 0% 2%;
    width: 100%;
    margin-top: -15%;
}
.hiss h4{
  color: #c70114;
   font-size: 3.5vw;
    font-family: mm2;
    text-align: center;
}

.hiss h3 {
    font-size: 4vw;
    font-family: mm2;
    color: #c70114;
    text-align: justify;   
}

.hiss p {
    font-size: 1.1vw;
    font-family: mm1;
    color: #000;
    text-align: justify;
        padding: 0% 5% 0% 0%;
        font-weight: bold;
}

.his3{
      width: 97%;
    padding: 11% 0% 0% 0%;
    position: relative;
}

.our{
  background-color: #ce0618;
  box-shadow: 0px 0px 25px #525151
}
.our1{
  background-color: #9aa44b;
}

.our h3, .our1 h3{
    font-size: 3.5vw;
    font-family: mm2;
    color: #fff;
       text-align: center;
    padding: 0% 10% 0% 10%;
}

.our p, .our1 p{
  font-family: mm1;
  font-size: 1.1vw;
  color: #fff;
  text-align: center;
  padding: 0% 4% 2% 4%;
}

.our2 img{
  width: 85%;
}

.dir{
  position: absolute;
  bottom: 1%;
    left: 21%;
}
.dir1{
  position: absolute;
  bottom: 1%;
    right: 26%;
}

.dir h3, .dir1 h3{
  font-size: 1.5vw;
  color: #fff;
  font-family: mm2;
  margin: 0%;
}
.dir p, .dir1 p{
      font-size: 1vw;
    color: #fff;
    font-family: mm1;
    margin: 0%;
    text-align: center;
}
.team{
  width: 68%;
   margin: auto;
   padding-bottom: 5%;
}

/*-------------------------------------------------------about end---------------------------------------------------------*/

/*-------------------------------------------------------contact start---------------------------------------------------------*/

.pro3{
  background: url(../assets/img/Layer-8111.jpg);
  background-repeat: no-repeat;
  background-size: 100%;
  padding: 10% 0% 7% 0%;
  position: relative;
}



.our11 h3, .our22 h3{
    font-size: 2vw;
    font-family: mm2;
    color: #fff;
    height: 5vw;
    text-align: justify;
    padding: 0% 0% 0% 10%;
}

.our11 p, .our22 p{
  font-family: mm1;
  font-size: 1vw;
  color: #fff;
    padding: 0% 0% 5% 10%;
}


.our11{
  background-color: #ce0618;
}
.our22{
  background-color: #9aa44b;
}

.our11 h4, .our22 h4{
    font-size: 1.1vw;
    font-family: mm1;
    font-weight: bold;
    color: #fff;
    text-align: justify;
    padding: 0% 0% 0% 10%;
}

.cnt1{
  background-color: #ce0618;
  width: 100%;
  text-align: center;
  margin: auto;
}

.cnt1 h3{
    font-size: 3.5vw;
    font-family: mm2;
    color: #fff;
    height: 3vw;
    text-align: center;
    padding: 0% 0% 0% 0%;
}

.cnt1 h4{
    font-size: 1.1vw;
    font-weight: bold;
    font-family: mm1;
    color: #fff;
    text-align: center;
    padding: 1% 0% 0% 0%;
}


.frm{
      padding: 3% 0% 3% 15%;
    width: 85%;
}

.cnt{
  padding-bottom: 5%;
}

.btn211{
     background-color: #9aa44b;
    border-radius: 10px;
    color: #fff;
    font-size: 1vw;
    font-family: mm1;
    padding: 4% 5% 4% 5%;
    border: none;
    transition: all 0.5s;
    width: 50%;
}

.map1{
  width: 100%;
  margin: 0%;
  padding: 0% !important;
}
.cnt1{
  margin: 0%;
  padding: 0%;
}

.map1 iframe{
  width: 100%;
  height: 100%;
}

.cntimg img{
  width: 100%;
  padding-left: 20%;
}
.frm input, .frm textarea{
  font-size: 1vw;
}

.map3{
  width: 100%;
  text-align: center;
  margin: auto;
  background-color: #e6e5e5;
  padding: 1% 0% 4% 0%;
}
.map3 h3{
  font-size: 1.2vw;
  font-family: mm2;
  color: #000;
  padding-bottom: 3%;
}









/*-------------------------------------------------------contact end---------------------------------------------------------*/

.menu ul li, .hidden-menu {
    list-style:none;
    margin:0;
    padding:0;
}   

.mobile-menu-bar {
    height: 50px;
    width: 100%;
    background: #fff;
    top: 0;
    border-bottom: 1px solid #ddd;
    z-index:101;
    display: none;
    position: absolute;
    right: 0%;
}
.mm-top-bar {
    width: 100%;
    height: 50px;
    position: relative;
}
.mm-top-bar .logo {
    position: absolute;
    right: 10px;
    height: 50px;
}
.mm-top-bar .logo img {
    height: 40px;
    margin: 5px;
}
.mm-top-bar > .menu {
    height:50px;
      width: 100%;
    text-align: right;
}
.mm-top-bar > .menu > img{
    width:50px;
}
.hidden-menu {
    position: absolute;
    left: 0;
    top:50.5px;
    width: 100%;
    height:0px;
    transition:height 1s ;
    overflow:hidden;
}
.hidden-menu.active {
    top: 55.5px;
    display:block;
    width: 100%;
    height:300px;
}
.hidden-menu li {
    width: 100%;
    background: rgba(249, 249, 249, 0.7);
    height: 50px;
    text-align: center;
    font-size: 24px;
    line-height: 50px;
    border-bottom: 1px solid #ddd;
}
.hidden-menu li > a {
    color: #333;
    text-decoration: none;
    font-weight: bold;
    display: block;
    width: 100%;
    height: 50px;
    border-bottom:1px solid #ddd;
    font-size: 14px;
}
















#preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 50000 ;
}
#loader-img {
    display: block;
    position: relative;
    top: 35%;
    width: 31%;
    height: 27%;
    margin: auto;
    z-index: 1001;  
    background-image: url(../assets/img/sshape-1.png);
    background-repeat: no-repeat;
    background-size: 50%;
    background-position: center;
    animation: bounce  2s  infinite;
    
    z-index: 1020;
}
@-webkit-keyframes spin {
    0%   {
        -webkit-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
@keyframes spin {
    0%   {
        -webkit-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

.loader-section {
    position: fixed;
    top: 0;
    width: 51%;
    height: 100%;  
    background: #fff;
    z-index: 1000;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0)
}

.loader-section.section-left {
    left: 0;
}

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

.panel_left {
    -webkit-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    transform: translateX(-100%);
    -webkit-transition: all .7s .3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
    transition: all .7s .3s cubic-bezier(0.645, 0.045, 0.355, 1.000)
}

.panel_right {
    -webkit-transform: translateX(100%);
    -ms-transform: translateX(100%);
    transform: translateX(100%);
    -webkit-transition: all .7s .3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
    transition: all .7s .3s cubic-bezier(0.645, 0.045, 0.355, 1.000)
}

.loaded-circle {
    opacity: 0;
    -webkit-transition: all .3s ease-out;
    transition: all .3s ease-out
}

.loaded-img {
    visibility: hidden;
    -webkit-transform: translateY(-100%);
    -ms-transform: translateY(-100%);
    transform: translateY(-100%);
    -webkit-transition: all .3s 1s ease-out;
    transition: all .3s 1s ease-out
}

.hiss2 img{
     width: 100%;
   
    position: relative;
    
}
.hiss2{
    width:50%;
           padding: 3% 1.5% 1.5% 3%;
            background-color: #fff;
}
.hiss3 {
    width: 50%;
    padding: 1.5% 1.5% 3% 3%;
    background-color: #fff;
}
  .hiss3 img{
     width: 100%;
   
    position: relative;
    
}

.hiss4 img{
     width: 100%;
   
    position: relative;
    
}
.hiss4{
    width:50%;
           padding: 3% 3% 1.5% 1.5%;
            background-color: #fff;
}
.hiss5 img{
     width: 100%;
   
    position: relative;
    
}
.hiss5{
    width:50%;
           padding: 1.5% 3% 3% 1.5%;;
            background-color: #fff;
}