@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;800&display=swap');

*{
  margin:0;
  padding:0;
  font-size:18px;
 /* list-style:none;*/
  text-decoration:none;
  outline:none;
  font-family: 'Poppins', sans-serif;
}
*{
  scrollbar-width:auto;
  scrollbar-color:#5e5e5e #fff
}
*::-webkit-scrollbar{
  width:9px
}
*::-webkit-scrollbar-track{
  background:#fff
}
*::-webkit-scrollbar-thumb{
  background-color:#ff0145;
  border:0 #fff
}
html{
  scroll-behavior:smooth;
  letter-spacing:.2px
}
body{
  background-color:#f9f9f9;
  font-family:geomanistregular;
  color:#3c424a;
  font-size:1.6rem
}
::selection{
  background:#ff0145;
  color:#fff;
  text-shadow:none
}
section{
  width:82%;
  margin:0 auto;
  display:table;
  position:relative
}
header {
  padding: 0;
  background-color: #ffffff;
  /*box-shadow: 2px 2px 20px #dedede;*/
  box-shadow: 0 22px 25px 0 rgb(0 0 0 / 6%);
  
}
#logo {
  float: left;
  font-size: 22px;
  line-height: 2rem;
  /* text-transform: uppercase; */
  color: #171817;
  padding: 5px 0;
  font-weight: 700;
  font-family: 'Poppins';
}
.logoimg {
  width: 33px;
  height: 33px;
  margin: -9px -1px;
}

.coloringpages {
  font-size: 17px;
  padding: 0px;
  margin: 0px;
}
.collection {
  font-size: 13px;
  margin-top: -17px;
  font-weight: 400;
  font-style: normal;
  letter-spacing: 6.5px;
}

.taghy {
  position: absolute;
  background-color: #ff0145;
  padding: 1px  10px;
  font-size: 14px;
  color: #fff;
  /* width: 60px; */
}
nav{
  width:auto;
  float:right;
  margin-top: 13px;
}
nav ul{
  display:table;
  float:right
}
nav ul li{
  float:left;
  list-style: none;
}
nav ul li:last-child{
  padding-right:0
}
nav ul li a {
  color: #131627;
  font-size: 15px;
  padding: 10px 8px;
  display: inline-block;
  transition: all .5s ease 0s;
  font-weight: 600;
}
nav ul li a:hover{
  color:#ff0145;
  transition:all .5s ease 0s
}
.toggle-menu ul{
  display:table;
  width:25px
}
.toggle-menu ul li {
  width: 100%;
  height: 4px;
  background-color: #949494;
  margin-bottom: 4px;
  list-style: none;
}
.toggle-menu ul li:last-child{
  margin-bottom:0
}
.toggle-menu ul{
  display:table;
  width:25px
}
input[type=checkbox],label{
  display:none
}

.exploreall{
  background-color: #ff0145;
  border-radius: 10px;
  color: #fff;
  border:1px solid #ff0145;
  transition: 0.3s;
}
.exploreall:hover{
  background-color: #fff;
  color: #ff0145;
  border:1px dashed #ff0145;
}
.adsbygoogle{
  text-align:center;
  margin:5px 0
}
.flx{
  display:flex
}
.secl{
  margin:20px 0;
  width:78%
}
.secr{
  margin:20px 0;
  width:22%
}
aside{
  position: sticky;
    top: 10px;
}

h1 {
  font-size: 30px;
  color: #0f1321;
  margin: 20px 0;
}
h2,h3{
  margin:25px 0 20px;
  font-size:25px;
  color: #0f1321;
  padding-top: 45px;
}
h3{
  margin:25px 0 20px;
  font-size:20px;
  color: #0f1321;
  padding-left: 15px;
}

h4{
  margin:25px 0 20px;
  font-size:18px
}
.letrcs{
  margin:25px 0 20px;
  font-size:18px
}
.date i{
font-size: 14px;
color:#282828;
}

p {
  color: #080808;
  line-height: 18px;
  font-weight: 500;
  margin: 20px 0;
  font-size: 18px;
  line-height: 30px;
  text-align: justify;
  padding-left: 15px;
  padding-right: 15px
}

.post_image img {
  width: 424px;
  height: 600px;
  box-shadow: 0px 0 60px 0 rgb(0 0 0 / 6%);
  background-image: url("images/loading.gif");
  background-repeat: no-repeat;
  background-size: cover;
}

.post_image_top img {
  width: calc(100% - 20px);
  
  margin: auto;
  display: block;
}

.post_image {
  text-align: center;
}


.breadcrumb {
  color: #8a8d8b;
  padding: 10px 0px 5px 0px;
  font-weight: 600 !important;
  font-size: 12px !important;
}


.breadcrumb a {
  color: #ff0145;
  font-weight: 600 !important;
  font-size: 12px !important;
  padding: 0px 4px;
}

.svgico {
  width: 30px;
  height: 30px;
  margin: 0px 10px;
  cursor: pointer;
  transition: 0.1s;
  border-radius: 6px;
}
.svgico:hover{
transform:scale(1.1);
}
.sbfbt {
  padding: 10px 4px 4px 4px;
  background-color: #ffffff;
  border: 1px solid #dedede;
  box-shadow: 2px 2px 8px #d9d4d4;
  border-radius: 10px;
  margin-right: 3px;
}
article a{
  color: #ff0145;
  font-weight: 700;
  text-decoration: underline;
}

article ul li{
  color:#080808;
  padding: 3px 0px;
}
article ul {
padding: 5px 5px 5px 30px;
    background-color: #fde4fb;
    border-radius: 10px;
    box-shadow: 2px 2px 20px aliceblue;
    border: 1px solid #f5d2f3;}

.point {
  background-color: #f7babb;
  padding: 10px;
  font-weight: 600;
  color: #000;
  width: auto;
  display: inline;
}

.note {
  background-color: #ffe4eb;
  padding: 10px;
  color: #221212;
  background: -moz-linear-gradient(-45deg,#fe127b 0%,#d913cb 52%,#6875dd 100%);
  /* background: -webkit-linear-gradient(-45deg,#fe127b 0%,#d913cb 52%,#6875dd 100%); */
  /* background: linear-gradient(135deg,#fe127b 0%,#d913cb 52%,#6875dd 100%); */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fe127b',endColorstr='#6875dd',GradientType=1);
  background-size: 350% 350%;
  animation: waveColors 8s ease infinite;
  /* font-weight: 600; */
  margin: 5px;
  border-radius: 5px;
  font-size: 16px;
}

.searchhy{
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="100" height="100" viewBox="0 0 48 48"><path fill="%23199be2" d="M35.983,32.448l-3.536,3.536l7.87,7.87c0.195,0.195,0.512,0.195,0.707,0l2.828-2.828c0.195-0.195,0.195-0.512,0-0.707L35.983,32.448z"></path><radialGradient id="KGt2acGa95QyN2j07oBX6a_KPmthqkeTgDN_gr1" cx="20.024" cy="20.096" r="19.604" gradientUnits="userSpaceOnUse"><stop offset=".693" stop-color="%23006185"></stop><stop offset=".921" stop-color="%2335c1f1"></stop></radialGradient><polygon fill="url(%23KGt2acGa95QyN2j07oBX6a_KPmthqkeTgDN_gr1)" points="31.601,28.065 28.065,31.601 32.448,35.983 35.983,32.448"></polygon><linearGradient id="KGt2acGa95QyN2j07oBX6b_KPmthqkeTgDN_gr2" x1="8.911" x2="31.339" y1="8.911" y2="31.339" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="%23a3ffff"></stop><stop offset=".223" stop-color="%239dfbff"></stop><stop offset=".53" stop-color="%238bf1ff"></stop><stop offset=".885" stop-color="%236ee0ff"></stop><stop offset="1" stop-color="%2363daff"></stop></linearGradient><circle cx="20" cy="20" r="16" fill="url(%23KGt2acGa95QyN2j07oBX6b_KPmthqkeTgDN_gr2)"></circle></svg>');
    background-size: 25px;
    width: 28px;
    height: 28px;
    background-repeat: no-repeat;
  }
  

  .ctgtitle {
    background-color: white;
    display: block;
    text-align: center;
    margin-top: auto;
    padding: 5px;
    border-radius: 10px;
    font-weight: 700;
    color: #1f1e1e;
    border: 1px solid #e7e7e7;
   margin: 10px; 
    display: inline-block;
}

.ctgimghy{
  width:145px;
  height: auto;
}



.ctgtitle:hover  .ctgimghy{
  background-color: #ff0145;
  opacity:0.8 !important;
}
.ctgtitle:hover{
  background-color: #ff0145; 
  color: #fff;
}

.note strong {
  font-weight: 700;
  font-size: 15px;
}

@-webkit-keyframes waveColors{0%{background-position:0% 7%}50%{background-position:100% 94%}100%{background-position:0% 7%}}@keyframes waveColors{0%{background-position:0% 7%}50%{background-position:100% 94%}100%{background-position:0% 7%}}

.categories{
  background-color:#fff;
  padding:10px;
  box-shadow:0 0 20px #e1e1e1;
  border-radius:10px;
  margin:auto 5px;
  position: sticky;
  top:0px;
  display: block;
}
.categories ul li{
  margin:5px 0;
  list-style: none;
}
.categories ul li a:hover{
  color:#ff0145
}
.categname {
  padding: 10px;
  text-align: center;
  font-weight: 800;
  color: #191919;
  border-radius: 5px;
  background-color: #ffe4eb;
}
.categories a {
  padding: 5px 0 5px 15px;
  color: #0f1321;
  font-weight: 600;
  font-size: 15px;
  display: block;
  text-transform: capitalize;
  border-bottom: 2px dashed #c9e2d4;
}

.categad{
  margin-top:30px;
  text-align:center;
  background-color:#fff;
  padding:10px;
  box-shadow:2px 2px 2px #f2f2f2;
  border-radius:10px
}
.ad{
  position:sticky;
  top:0;
  display: none;
}


.toc{
  max-width:560px;
  border:1px solid #f2f2f2;
  box-shadow:2px 2px 8px #f2f2f2;
  border-radius:10px;
  background-color:#fff;
  padding:5px;
  margin:20px 0;
  -webkit-user-select:none;
  -ms-user-select:none;
  user-select:none
}
.crdh{
  margin:auto;
  text-align:center;
  font-size:16px;
  overflow:hidden;
  text-overflow:ellipsis;
  display:-webkit-box;
  -webkit-line-clamp:2;
  line-clamp:2;
  -webkit-box-orient:vertical
}

.toc{max-width:500px;border:1px solid #f2f2f2;box-shadow:2px 2px 8px #f2f2f2;border-radius:10px;background-color:#fff;padding:5px;margin:20px 0;-webkit-user-select:none;-ms-user-select:none;user-select:none}.crdh{margin:auto;text-align:center;font-size:16px;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical}.toctit{display:flex}.toctitleft{width:80%;padding:5px 10px;font-weight:600;text-transform:UPPERCASE}.toctitright{}
.toccont{padding:10px;display:none;}
.toccont ul{
list-style: none;}

.toccont ul li a {
  text-decoration: none;
  color: #3c424a;
  transition: .3s;
  font-weight: 500;
  font-size: 16px;
  list-style: none;
}
.toccont ul li a:hover{color:#ff0145}
.toccont ul li a::before {
  content: "#";
  padding: 1px 6px;
  color: #ffffff;
  background-color: #000;
  width: 20px;
  height: 20px;
  border-radius: 27px;
  margin: 6px;
  font-size: 15px;
  text-align: center;
}
.toccont ul li{padding:2px 0}
#hide {
  margin: 6px 0;
  background-color: #f7babb;
  background-image: linear-gradient(315deg,#f7babb 0%,#ff9bbd 74%);
  color: #313131;
  font-size: 15px;
  font-weight: 600;
  border-radius: 15px;
  outline: none;
  padding: 2px 15px;
  cursor: pointer;
  border: none;
  box-shadow: 2px 2px 6px #edbaf7;
  width: 50px;
  text-align: center;
}
hr{
  height:0;
  outline:none;
  border-bottom:2px dashed #afabab;
  border-top:none;
  width:30%;
  margin:24px auto
}

.related {
  margin: 15px 0px;
  font-weight: 700;
  color: #1e1e1e;
  padding: 5px 8px;
  border: 1px solid #ededed;
  border-left: 15px solid #ff0145;
  width: auto;
  display: inline-block;
  border-radius: 10px;
  box-shadow: 2px 2px 20px #e3fff0;
}
.related a {
  color: #ff0145;
  text-decoration: none;
}

footer {
  background-color: #282828;
  padding: 20px 0px;
}

.fotr a {
  color: #fff;
  font-size: 14px;
  padding: 5px;
}


.herosection {
  text-align: center;
  display: block;
  background-color: #eaeef6;
  border-radius: 20px;
}
.hero_img {
  width: 180px;
  height: 180px;
  margin: auto;
}

.hero_sec_card {
  /* display: flex; */
  /* width: calc(100% - 30px); */
  /* height: auto; */
  margin: 20px;
  padding: 20px 10px;
  border-radius: 23px;
}
.hero_card_title {
  padding: 5px;
  font-weight: 600;
  color: #994eff;
  margin-top: 10px;
  background-color: #f1eeff;
}
.homepage_cards {
  display: block;
  margin: 20px 10px;
  text-align: center;

}

.load_morex {
  margin-top: 20px !important;
  width: 140px !important;
  background-color: #eaeef6 !important;
  padding: 5px !important;
  font-weight: 600 !important;
  color: #a264f7 !important;
  border: 2px solid #e8d9fc !important;
  /* box-shadow: 2px 2px 20px #dce7ff; */
  border-radius: 33px !important;
  height: 28px !important;
}

.homepage_cards a {
  color: #282828;
  margin: 6px;
  width: 260px;
  height: 225px;
  display: inline-grid;
  background-color: #ffffff;
  border: 1px solid #f2f2f2;
  border-radius: 10px;
  padding: 10px;
  transition: 0.3s;
  box-shadow: 4px 4px 17px 3px #f0f0f0;
}

.homepage_cards a:hover {
  transform: scale(1.01);
  box-shadow: 5px 4px 17px 3px #e0dada;
}

.homepage_card_image img {
  width: 260px;
  height: 170px;
}
.homepage_card_title {
  font-weight: 600;
  font-size: 16px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  text-align: left;
}

.all_share{
  display: inline-flex;
}
.sharename {
  display: block;
  transform: rotate(-90deg);
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
  font-size: 14px;
  padding: 1px;
  margin-right: -20px;
  color: #6c6c6c;
}
.read_more_post {
  width: calc(100% - 10px);
}
.read_more_post::before {
  content: "READ MORE";
  background-color: #ff0145;
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fe127b',endColorstr='#6875dd',GradientType=1);
  background-size: 350% 350%;
  animation: waveColors 8s ease infinite;
  color: #ffffff;
  padding: 10px;
  font-weight: 600;
  margin: 0px 0px;
  display: inline-block;
  border-radius: 10px 10px 0px 0px;
}
.read_more_post .homepage_cards {
  margin: 0px;
  border: 1px solid #ffeded;
  padding: 12px 0px;
}




.subx::before{
  content: "-" !important;
  background-color: #ffffff !important;
  padding: 1px 8px !important;
  font-size: 14px !important;
  margin-left: 15px !important;
  color:#282828 !important;
  
}



.articlebtn {
  padding: 10px 20px;
  background-color: #ff0145;
  margin: 5px auto;
  display: block;
  width: 150px;
  text-decoration: none;
  color: #fff;
  text-align: center;
  border-radius: 10px;
  border:3px solid #ff0145;
  transition: 0.3s;
  margin-bottom: 25px;
}
.articlebtn:hover {
  background-color: #fff;
  color: #ff0145; 
  border:3px dashed #ff0145;
}
.printbtn{
  outline: none;
  padding: 10px 20px;
  background-color: #ff0145;
  margin: 5px auto;
  display: block;
  text-decoration: none;
  color: #fff;
  text-align: center;
  border-radius: 10px; 
  border:3px solid #ff0145;
  cursor: pointer;
}

.printbtn:hover{
  background-color: #fff;
  color: #ff0145; 
  border:3px dashed #ff0145;
}
.spacediv{
  padding: 10px 0px;
}
.printimg{
  width:714px !important;
  height: 1010px !important;
}
@page { size: auto;  margin: 0mm; }





@media print {
  header, footer, button, .spacediv, .printbtn {
      display: none;
  }
  .post_image img{
box-shadow: none;
  }
}

@media only screen and (max-width:980px){
  header {
    padding: 8px 0;
}
  #logo{
      padding:0
  }
  input[type=checkbox]{
      position:absolute;
      top:-9999px;
      left:-9999px;
      background:0 0
  }
  input[type=checkbox]:fous{
      background:0 0
  }
  label{
      float:right;
      padding:19px 0;
      display:inline-block;
      cursor:pointer
  }
  input[type=checkbox]:checked~nav{
      display:block
  }
  nav{
      display:none;
      position:absolute;
      right:0;
      top:40px;
      background-color:#fff;
      padding:0;
      z-index:99;
      border-radius:0 0 10px 10px;
      box-shadow:2px 2px 15px #c7c4c4
  }
  nav ul{
      width:auto
  }
  nav ul li{
      float:none;
      padding:0;
      width:100%;
      display:table
  }
  nav ul li a{
      color:#363636;
      font-size:15px;
      padding:15px 30px;
      display:block;
      border-bottom:1px solid rgba(225,225,225,.1)
  }
  nav ul li a i{
      color:#fde428;
      padding-right:13px
  }
  section{
      width:96%
  }
}
@media only screen and (max-width:960px){
  .flx{
      display:block
  }
  .secl{
      width:100%
  }
  .secr{
      width:100%
  }
  article{
      padding:5px
  }
  .codeinfo{
      text-align:center
  }
  .readcard{
      width:46%
  }




}
@media only screen and (max-width:720px){
  .cinfocrd{
      width:calc(100% - 40px)
  }
  .cardtbl{
      margin:auto;
      width:calc(100% - 40px)
  }
  .printimg{
    width:354px !important;
    height: 500px !important;
  }
}
@media only screen and (max-width:660px){
  .readcard{
      width:calc(100% - 20px)
  }
  .post_image img {
    width: calc(100% - 20px);
    height: 100%;
  }
}
@media only screen and (max-width:420px){
  .altcd{
      width:96%
  }
  .homepage_cards a {
    width: calc(100% - 20px);
    height: 100%;
}

  .homepage_card_image img {
    width: calc(100% - 10px);
    height: 100%;
}

.printimg{
  width: calc(100% - 30px) !important;
  height: auto !important;
}
}
@media only screen and (max-width:420px){
  .printimg{
    width: 200px !important;
    height: 283px !important;
  }

}