.tabs {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
    width: 70vw;
    position: relative;
    align-content: flex-start;
    max-width: 100%;
}

.tabs > label svg{
    margin-right: 6px;
}

.tabs > label[for='tabthree'] svg{
    margin-right: 3px;
}
.hide{
    display: none;
}
.tabs > label {
    order: 1;
    display: flex;
    padding: 2px 8px;
    border-top-right-radius: 4px;
    border-top-left-radius: 4px;
    margin-right: 8px;
    cursor: pointer;
    background: white;
    font-size: 14px;
    align-items: center;
    transition: .2s;
    height: 28px;
	}
.tabs .tab {
	order: 99;
	flex-grow: 1;
	width: 100%;
	display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    border-top: 5px solid #014040;
    background: white;
    box-shadow: rgba(0, 0, 0, 0.048) 0px 4px 12px;
    padding: .5%;
    padding-bottom: .6%;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    align-content: flex-start;
    min-height: calc(72vw / 2);
}
.tab.pi7{
    min-height: calc(61vw / 2)!important;
}
.tabs input[type="radio"] {
	display: none;
}
.tabs input[type="radio"]:checked + label {
	background: #014040;
    color: white;
}
.tabs input[type="radio"]:checked + label svg{
    fill: white;
}
.tab > div{
    width: 24%;
    aspect-ratio: 1/1;
    margin: .5%;
}
.tab > div[xtpx='FB']{
    aspect-ratio: 1/2!important;
}
.gallerytab .tab > div[xtpx='FB']{
    aspect-ratio: auto!important;
}
.tab > div[xtpx='FB'] .zoomind{
    width: 50vh!important;
    left: calc((min(70vw,100%) - 53vh) / 2)!important;
}
.tab > div[xtpx='FB'] .zoomind .ximg{
    box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
}
.tab > div > div{
    transition: .3s;
    width: 100%;
    height: 100%;
    display: flex;
    position: relative;
}
.zoomind{
    width: 80vh!important;
    z-index: 9;
    height: 80vh!important;
    display: flex;
    transition: none!important;
    left:  calc((min(70vw,100%) - 80vh) / 2);
    top: 45px;
    position: absolute!important;
}
.tab > div > div::before{
    content: '';
    width: 30px;
    height: 30px;
    border: 4px solid #014040;
    border-bottom-color: white;
    border-radius: 50px;
    bottom: 4%;
    right: 1.5%;
    display: block;
    position: absolute;
    -webkit-animation: rotating 1s linear infinite;
}
.reloadbtn_rotate svg{
    -webkit-animation: rotating 1s linear infinite;
}
.tab div .ximg{
    max-width: 100%;
    border-radius: 4px;
    height: auto;
    z-index: 0;
    position: inherit;
    cursor: pointer;
}
.reloadbtnx{
    position: absolute;
    right: -9px;
}
.tab div .dicn,.tab div .fullimg,.closesvg,.likebbtn{
    position: absolute;
    top: 2px;
    width: 24px;
    height: 24px;
    z-index: 1;
    background:white;
    border-radius: 3px;
    padding: 3px;
    right: 2px;
    cursor: pointer;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
}
.likebbtn{
    top: 68px;
}
.tab div .fullimg,.closesvg{
    top: 35px;
}
.zoomind .fullimg,.closesvg{
    display: none!important;
}
.zoomind .closesvg{
    display: inline-block!important;
}
.tab > div{
    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
}

.zoomind::before{
    display: none!important;
}
@-webkit-keyframes rotating {
    from{
        -webkit-transform: rotate(0deg);
    }
    to{
        -webkit-transform: rotate(360deg);
    }
}


.heartsvg{
     cursor:pointer; overflow:visible; width: 40px; position: relative; top: -8px; left: -8px;
    .pthheart{transform-origin:center; animation:animateHeartOut .3s linear forwards;}
    .main-circ{transform-origin:29.5px 29.5px;}
  }
  
  .checkboxhrt{display:none;}
  
  .checkboxhrt:checked + label svg{
      .pthheart{transform:scale(.2); fill:#E2264D; animation:animateHeart .3s linear forwards .25s;}
      .main-circ{transition:all 2s; animation:animateCircle .3s linear forwards; opacity:1;}
      .grp1{
        opacity:1; transition:.1s all .3s;
        .oval1{
          transform:scale(0) translate(0, -30px);
          transform-origin:0 0 0;
          transition:.5s transform .3s;}
        .oval2{
          transform:scale(0) translate(10px, -50px);
          transform-origin:0 0 0;
          transition:1.5s transform .3s;}
      }
      .grp2{
        opacity:1; transition:.1s all .3s;
        .oval1{
          transform:scale(0) translate(30px, -15px); 
          transform-origin:0 0 0;
          transition:.5s transform .3s;}
        .oval2{
          transform:scale(0) translate(60px, -15px); 
          transform-origin:0 0 0;
          transition:1.5s transform .3s;}
      }
      .grp3{
        opacity:1; transition:.1s all .3s;
        .oval1{
          transform:scale(0) translate(30px, 0px);
          transform-origin:0 0 0;
          transition:.5s transform .3s;}
        .oval2{
          transform:scale(0) translate(60px, 10px);
          transform-origin:0 0 0;
          transition:1.5s transform .3s;}
      }
      .grp4{
        opacity:1; transition:.1s all .3s;
        .oval1{
          transform:scale(0) translate(30px, 15px);
          transform-origin:0 0 0;
          transition:.5s transform .3s;}
        .oval2{
          transform:scale(0) translate(40px, 50px);
          transform-origin:0 0 0;
          transition:1.5s transform .3s;}
      }
      .grp5{
        opacity:1; transition:.1s all .3s;
        .oval1{
          transform:scale(0) translate(-10px, 20px);
          transform-origin:0 0 0;
          transition:.5s transform .3s;}
        .oval2{
          transform:scale(0) translate(-60px, 30px);
          transform-origin:0 0 0;
          transition:1.5s transform .3s;}
      }
      .grp6{
        opacity:1; transition:.1s all .3s;
        .oval1{
          transform:scale(0) translate(-30px, 0px);
          transform-origin:0 0 0;
          transition:.5s transform .3s;}
        .oval2{
          transform:scale(0) translate(-60px, -5px);
          transform-origin:0 0 0;
          transition:1.5s transform .3s;}
      }
      .grp7{
        opacity:1; transition:.1s all .3s;
        .oval1{
          transform:scale(0) translate(-30px, -15px);
          transform-origin:0 0 0;
          transition:.5s transform .3s;}
        .oval2{
          transform:scale(0) translate(-55px, -30px);
          transform-origin:0 0 0;
          transition:1.5s transform .3s;}
      }
      .grp2{opacity:1; transition:.1s opacity .3s;}
      .grp3{opacity:1; transition:.1s opacity .3s;}
      .grp4{opacity:1; transition:.1s opacity .3s;}
      .grp5{opacity:1; transition:.1s opacity .3s;}
      .grp6{opacity:1; transition:.1s opacity .3s;}
      .grp7{opacity:1; transition:.1s opacity .3s;}
  }
  
  @keyframes animateCircle{
    40%{transform:scale(10); opacity:1; fill:#DD4688;}
    55%{transform:scale(11); opacity:1; fill:#D46ABF;}
    65%{transform:scale(12); opacity:1; fill:#CC8EF5;}
    75%{transform:scale(13); opacity:1; fill:transparent; stroke:#CC8EF5; stroke-width:.5;}
    85%{transform:scale(17); opacity:1; fill:transparent; stroke:#CC8EF5; stroke-width:.2;}
    95%{transform:scale(18); opacity:1; fill:transparent; stroke:#CC8EF5; stroke-width:.1;}
    100%{transform:scale(19); opacity:1; fill:transparent; stroke:#CC8EF5; stroke-width:0;}
  }
  
  @keyframes animateHeart{
    0%{transform:scale(.2);}
    40%{transform:scale(1.2);}
    100%{transform:scale(1);}
  }
  
  @keyframes animateHeartOut{
    0%{transform:scale(1.4);}
    100%{transform:scale(1);}
  }



@media (max-width: 1000px) {
    .tab{
        height: 182vw!important;
    }
    .tabs{
        margin-top: 18px!important;
    }
    .zoomind{
        width: 88vw!important;
        height: 88vw!important;
        left: -1.5vw!important;
    }
    .tab > div[xtpx='FB'] .zoomind{
        left: -1.5vw!important;
    }
	.tab > div{
        width: 49%;
        margin-bottom: .5%;
    }
    .tabs > label span{
        display: none;
    }
    .tabs svg{
        margin: 0!important;
    }
    .tabs {width: 90vw};
    
}


#fullView #xfulimg{
    max-height: 75vh;
}
#fullView{
    width: min(130vh);
    height: 75vh!important;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    background: white;
    display: flex;
    left: 5vw;
    border-radius: 8px;
    position: absolute;
    z-index: 2;
    top: 12vh;
}

#fullView .closex{
    top: 6px;
    right: 6px;
    position: absolute;
    width: 28px;
    height: 28px;
    
}
.xdownbt a{
    background: #93599f;
    color: white;
    border-radius: 3px;
    padding: 4px 13px;
    font-size: 15px;
    margin-bottom: 16px;
    display: inline-block;
    width: 65%;
}
.xdownbt a#xhdb{
    background: #009688;
}

.xdownbt{
    margin-top: 70px;
    margin-bottom: 25px;
}
.donsidex{
    width: 50%;
}
#addownb{
    height: 280px;
    background: url(/static/ads_container.png);
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 296px 130px !important;
    width: 300px;
}
.hide{
    display: none!important;
}
.likebbtn {
    top: 37px!important;
}
.xmsge{
    width: 100%;
    margin-top: 50px;
    opacity: .7;
    color: #FF5722;
}
.xmsge span{
    font-size: 44px;
    margin-bottom: 6px;
    display: inline-block;
}


@media (max-width: 1000px) {
    footer{
        flex-direction: column-reverse;
    }
    .favgbtn,.galhomebtn{
        display: none;
    }
    footer span{
        margin-top: 10px;
    }
    .writingsec{
        width: 92%;
        text-align: left;
    }
    h1{
        line-height: 36px;
    }
    h2, h3{
        line-height: 28px;
    }
     .maintopadsc{
        flex-direction: column;
    }
    .sidebarsx{
      display:none
    }
    #fullView{
        flex-direction: column;
        width: 90%;
        height:auto;
    }
    #fullView #xfulimg{
        max-width: 100%;
        max-height: auto;
    }
    .donsidex {
        width: 100%;
    }
    .xdownbt {
        margin-top: 30px;
        margin-bottom: 7px;
    }
}