/** * reset */html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,time, mark, audio, video {	margin: 0;	padding: 0;	border: 0;	font-size: 100%;	font: inherit;	vertical-align: baseline;}/* HTML5 display-role reset for older browsers */article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {	display: block;}body {	line-height: 1;}ol, ul {	list-style: none;}blockquote, q {	quotes: none;}blockquote:before, blockquote:after,q:before, q:after {	content: '';	content: none;}table {	border-collapse: collapse;	border-spacing: 0;}
        
}
 body 
  overflow: hidden; /* Hide scrollbars */
{ 
  background-color: #cfe2f3;

  overflow-y: hidden; /* Hide vertical scrollbar */
  overflow-x: hidden; /* Hide horizontal scrollbar */
	font-family: 'Helvetica, Arial', sans-serif;
	font-size: 15px; 	
       font-weight: normal;
	line-height: 28px;
	margin:0px;
	padding:0px;	
       max-width: 100%;
}
.contain {
 max-width: 100%;
}


   .floating-button {
      z-index: 1000;
      position: fixed;
      text-decoration: none;
    }
    .floating-button:hover {
      text-decoration: none;
    }
    .floating-button.left {
      bottom: 1.5rem;
      left: 1.5rem;
      width: auto;
      right: auto;
      height: auto;
    }


.container {
  display: grid;
  padding: 0%;
  margin: 0%;
  width: 100%;
  grid-template-areas: "a-r2qvZ a-nRmoQ a-lRkmQ a-oZn0R a-46vqm a-pZoqw a-pZoq1";
  grid-template-columns: 1 2 3 4 5 6 7;
  grid-template-rows: 1fr;
}
.container > div {
  border: 0px dashed #888;
}
.a-r2qvZ {
  grid-area: a-r2qvZ;
   padding-left: 11px;
   padding-top: 11px;
}
.a-nRmoQ {
  grid-area: a-nRmoQ;
      padding-left: 11px;
   padding-top: 11px;
}
.a-lRkmQ {
  grid-area: a-lRkmQ;
   padding-left: 11px;
  padding-top: 11px;
}
.a-oZn0R {
  grid-area: a-oZn0R;
 padding-left: 14px;
  padding-top: 11px;
}
.a-46vqm {
  grid-area: a-46vqm;
   padding-right: 22px;
     padding-top: 11px;
}
.a-pZoqw {
  grid-area: a-pZoqw;
   padding-right: 22px;
     padding-top: 11px;
}
.a-pZoq1 {
  grid-area: a-pZoq1;
 padding-right: 22px;
     padding-top: 11px;
}

.menu {
   position: fixed;
   padding: 0px;  
   margin: 0px;
   width: 100%; 
  height: 8%;
    background-color: #ccbfdd;
    background-image: url("images/stardots.png");
    border-bottom: 4px solid #cfe2f3;
    filter: drop-shadow(5px 5px 4px #8D84A4   );
   }
.shadow {
filter: drop-shadow(1px 1px 1px #8D84A4);
   }
.center {
  margin: auto;
  width: 50%;
}
  .img {
  padding: 0px;
  padding-bottom:0px;
  margin: 0px;
   background-color: #A2D8E4;
   background-image:  url("images/collage1.png"),   url("images/stardots.png"), url("images/mmlog.png"),   linear-gradient(17deg, #fcc4dd 10%, #A2D8E4 86%   );
  background-attachment: fixed, scroll, fixed;
  background-repeat: repeat, repeat, no-repeat;
  background-position: center, center, center;  
  max-width: 100%;
   width: 100%;
  height: 765px;
   }
  .newboxitem {
   margin: auto;
   width: 90=5%;
  padding: 12px;
  border-radius: 2px;
  border: 4px dotted #f7eea4;
  background-image: url("images/transbgsan.png");
  background-attachment: fixed;
  background-repeat: repeat;
}
  .newboxadd {
   margin: auto;
   width: 95%;
  padding: 12px;
  border-radius: 2px;
  border: 4px dotted #f7eea4;
  background-image: url("images/stardots.png");
  background-attachment: fixed;
  background-repeat: repeat;
}
  .newbox {
   margin: auto;
   width: 82%;
  padding: 25px;
  border-radius: 20px;
  border: 4px dotted #f7eea4;
  background-image: url("images/transbgsan.png");
  background-attachment: fixed;
  background-repeat: repeat;
 background-position: center;  
}
  .sanboxitem {
  margin: auto;
  width: 95%;
  padding: 12px;
  border-radius: 2px;
  border: 4px dotted #d7aec7;
  background-attachment: fixed;
  background-repeat: repeat;

   }
.moonbox {
   margin: auto;
  width: 82%;
  padding: 25px;
  border-radius: 20px;
  border: 4px dotted #d7aec7;
    background-image: url("images/transbgb.png");
  background-attachment: fixed;
  background-repeat: repeat;
 background-position: center;  
}
.sanriobox {
   margin: auto;
 width: 82%;
  padding: 25px;
  border-radius: 20px;
border: 4px dotted #d7aec7;
  background-image: url("images/transbg.png"), url("images/sanrioal.png");
  background-attachment: fixed, fixed;
  background-repeat: repeat, repeat;
 background-position: center, center;  
}
.ninbox {
   margin: auto;
   width: 82%;
  padding: 25px;
  border-radius: 20px;
   border: 4px dotted #c6cc69;
  background-image: url("images/ninstars.png"),  url("images/transbgsan.png");
  background-attachment: fixed, fixed;
  background-position: top center;
  background-repeat: repeat, repeat;
}
.omakebox {
   margin: auto;
  width: 82%;
  padding: 25px;
  border-radius: 20px;
  border: 4px dotted #7f93b3;
  background-image: url("images/transbgsan.png"),  url("images/transb.png");
  background-attachment: fixed, fixed;
  background-position: center, center;
  background-repeat: repeat, repeat;
}

  ul.add-list li
{
background-image: url('images/ninbullet.png');
background-repeat: no-repeat;
background-position: 0px 7px;
padding-left: 20px;
text-align: left; 
line-height: 28px;
color :#7f93b3;
font-size: 15px;

}
  ul.moon-list li
{
background-image: url('images/bulletmoon.png');
background-repeat: no-repeat;
background-position: 0px 7px;
padding-left: 20px;
text-align: left; 
line-height: 28px;
}
  ul.nin-list li
{
background-image: url('images/ninbullet.png');
background-repeat: no-repeat;
background-position: 0px 7px;
padding-left: 20px;
text-align: left; 
line-height: 28px;
color:#bfd866;
}

  ul.san-list li
{
background-image: url('images/bulletsan.gif');
background-repeat: no-repeat;
background-position: 0px 7px;
padding-left: 20px;
text-align: left; 
line-height: 28px;
}
  ul.omake-list li
{
background-image: url('images/minimoon.png');
background-repeat: no-repeat;
background-position: 0px 7px;
padding-left: 20px;
text-align: left; 
line-height: 28px;
}
  ul.about-list li
{
background-image: url('images/minimoon.png');
background-repeat: no-repeat;
background-position: 0px 7px;
padding-left: 20px;
text-align: left; 
line-height: 28px;
}
.pageheader {
 color:#7f93b3;
 font-size: 20px;
 font-weight: bold;
}
.pageheadernin {
 color:#50918e;
 font-size: 20px;
 font-weight: bold;
}
.pageheadermoon {
color: #267a9f;
 font-size: 20px;
 font-weight: bold;
}
.pageheadernew {
color:  #149BB9;
 font-size: 20px;
 font-weight: bold;
}


a:link, a:visited
 {
   font-size: 15px;
  font-weight: normal;
  text-decoration:none; 
  color: #149BB9;
  line-height: 28px;
}
a:hover
 {
-webkit-animation:rainbow 2s infinite;
-ms-animation:rainbow 2s infinite;
-o-animation:rainbow 2s infinite;
animation:rainbow 2s infinite;
}
@-webkit-keyframes rainbow {
0% {color: #fffbd6;}
10% {color: #f8cdeb;}
20% {color: #f8cdeb;}
30% {color: #bae7f2;}
40% {color: #bae7f2;}
50% {color: #fffbd6;}
60% {color: #f8cdeb;}
70% {color: #d2acdc;}
80% {color: #f8cdeb;}
90% {color: #f8cdeb;}
100% {color: #f8cdeb;}
}
@-ms-keyframes rainbow {
0% {color: #f8cdeb;}
10% {color: #f8cdeb;}
20% {color: #f8cdeb;}
30% {color: #fffbd6;}
40% {color: #bae7f2;}
50% {color: #bae7f2;}
60% {color: #f8cdeb;}
70% {color: #d2acdc;}
80% {color: #f8cdeb;}
90% {color: #f8cdeb;}
100% {color: #f8cdeb;}
}
@-o-keyframes rainbow {
0% {color: #f8cdeb;}
10% {color: #f8cdeb;}
20% {color: #f8cdeb;}
30% {color: #bae7f2;}
40% {color: #fffbd6;}
50% {color: #bae7f2;}
60% {color: #f8cdeb;}
70% {color: #d2acdc;}
80% {color: #f8cdeb;}
90% {color: #f8cdeb;}
100% {color: #f8cdeb;}
}
@keyframes rainbow {
0% {color: #f8cdeb;}
10% {color: #f8cdeb;}
20% {color: #f8cdeb;}
30% {color: #bae7f2;}
40% {color: #bae7f2;}
50% {color: #fffbd6;}
60% {color: #f8cdeb;}
70% {color: #d2acdc;}
80% {color: #f8cdeb;}
90% {color: #f8cdeb;}
100% {color: #f8cdeb;}
}
/* unvisited link */
a:link {
    color:  #149BB9;
    text-decoration: none;
    font-weight: bold;
    font-size: 15px;
}
/* visited link */
a:visited {
    color: #C5A2E4;
    text-decoration: none;
   font-size:  15px;
}
/* selected link */
a:active {
    color: #149BB9;
    text-decoration: none;
    font-size:  15px;
}
.small {
font-size: 13.2px;
}
.b {
font-weight: bold;
}

/*HEADER SECTIONS*/
   .more {
      display: none;
}
.aboutsection {
   padding-top: 100px;
  padding-left: 200px;
padding-right: 200px;
padding-bottom: 55px;
    background-color: #A2D8E4;
   background-image: url("images/sanriolayer2.png"),  url("images/stardots.png"), linear-gradient(17deg, #fcc4dd 10%, #A2D8E4 86%   );
  background-repeat: no-repeat, repeat;
  background-attachment: fixed, fixed;
font-family: 'Helvetica, Arial', sans-serif;
  line-height: 26px;
    font-size: 15px;
    color:  #7f93b3;
     background-size: cover, 90px;
      background-position: bottom center center;  

  }
.moonsection {
  padding-left: 200px;
padding-right: 200px;
padding-top: 55px;
padding-bottom: 50px;
    background-color: #f2d6d7;
   background-image: url("images/moonbg2.png"),  url("images/smo2.png"), url("images/stardots.png");
  background-repeat: repeat, no-repeat, repeat;
  background-attachment: fixed, fixed, fixed;
font-family: 'Helvetica, Arial', sans-serif;
  line-height: 26px;
    font-size: 15px;
    color:  #267a9f;
   background-size: 220px, cover, 220px;
 background-position: center center center;  
  }
.sanriosection {
  padding-left: 200px;
padding-right: 200px;
padding-top: 60px;
padding-bottom: 50px;
    background-color: #A2D8E4;
   background-image: url("images/sanriopinkbg.png"),  url("images/stardots.png"), linear-gradient(17deg, #fcc4dd 10%, #A2D8E4 86%   );
  background-repeat: repeat, repeat;
  background-attachment: fixed, fixed;
font-family: 'Helvetica, Arial', sans-serif;
  line-height: 26px;
    font-size: 15px;
    color:  #7f93b3;


  }
.ninsection {
  padding-left: 200px;
padding-right: 200px;
padding-top: 60px;
padding-bottom: 50px;
    background-color: #7fdace;
   background-image: url("images/ninf2.png"), url("images/ninstars.png") ;
  background-repeat: repeat, repeat;
  background-attachment: fixed, fixed;
font-family: 'Helvetica, Arial', sans-serif;
  line-height: 26px;
    font-size: 15px;
   background-size: cover;
    background-position: top center;  
  }
.omakesection {
  padding-left: 200px;
padding-right: 200px;
padding-top: 60px;
padding-bottom: 50px;
    background-color: #d6ccc9;
   background-image: url("images/sanriolayer2.png"),  url("images/stardots.png"), linear-gradient(0deg, rgba(34,193,195,1) 0%, rgba(253,187,45,1) 100%  );
  background-repeat: no-repeat, repeat;
  background-attachment: fixed, fixed;
font-family: 'Helvetica, Arial', sans-serif;
  line-height: 26px;
    font-size: 15px;
    color:  #7f93b3;
   background-size: cover, 80px;
    background-position: bottom center;  

  }

ul.about-list li
{
background-image: url('images/bulleta.png');
background-repeat: no-repeat;
background-position: 0px 7px;
padding-left: 25px;
text-align: left; 
}
ul.moon-list li
{
background-image: url('images/bulletmoon.png');
background-repeat: no-repeat;
background-position: 0px 7px;
padding-left: 25px;
text-align: left; 
}
ul.sanrio-list li
{
background-image: url('images/bulletsan.gif');
background-repeat: no-repeat;
background-position: 0px 7px;
padding-left: 25px;
text-align: left; 
}
ul.nin-list li
{
background-image: url('images/ninbullet.png');
background-repeat: no-repeat;
background-position: 0px 7px;
padding-left: 25px;
text-align: left; 
color: #50918e;
}
ul.omake-list li
{
background-image: url('images/bulleta.png');
background-repeat: no-repeat;
background-position: 0px 7px;
padding-left: 25px;
text-align: left; 
}
/* width */
::-webkit-scrollbar {
  width: 1px;
}
/* Track */
::-webkit-scrollbar-track {
  background: #ccbfdd; 
}
/* Handle */
::-webkit-scrollbar-thumb {
  background: #cfe2f3; 

}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #ffffff; 
}


/* Mobile Responsive Menu */
}
@media only screen and (min-width: 768px) {
  /* For desktop: */
  .col-1 {width: 8.33%;}
  .col-2 {width: 16.66%;}
  .col-3 {width: 25%;}
  .col-4 {width: 33.33%;}
  .col-5 {width: 41.66%;}
  .col-6 {width: 50%;}
  .col-7 {width: 58.33%;}
  .col-8 {width: 66.66%;}
  .col-9 {width: 75%;}
  .col-10 {width: 83.33%;}
  .col-11 {width: 91.66%;}
  .col-12 {width: 100%;}
}
/* Hide element on Desktop */
@media only screen and (min-width: 981px) {
    .topnav {
    display: none !important;
    }
}
.topnav {
 padding-top: 14px;
 padding-bottom: 8px;
  width: 100%;
  background-color: #ccbfdd;
  position: sticky;
  z-index: 9999;
   position: fixed;
    background-image: url("images/stardots.png");
    border-bottom: 4px solid #cfe2f3;
    filter: drop-shadow(5px 5px 4px #8D84A4   );
}
/* Style navigation menu links */
.topnav a {
text-decoration: none;
font-family: 'Helvetica, Arial', sans-serif;
font-size: 14px; 	
font-weight: bold;
padding: 4px; margin: 4px;
}


/* Mobile Responsive Text Sections */

/* IMG BOX MOBILE */
@media only screen and (min-width: 981px) {
    .imgboxmobile {
    display: none !important;
    }
}
@media only screen and (max-width: 981px) {
    .img {
    display: none !important;
    }
}
@media screen and (min-width: 981px) {
            .imgboxmobile {
            max-width: 100%;
              }
        }
  .imgboxmobile {
   max-width: 100%;
  padding-top: 0px;
  padding-bottom: 0px;
  background-color: #ACCAE3;
  background-image: url("images/stardots.png");    
  background-attachment: fixed;
  background-repeat: repeat;
  background-position: center;     
  background-size: 70px;
}
.imgboxmobile img {
  width: 100%;
}


/* NEW ABOUT BOX MOBILE */
@media only screen and (min-width: 981px) {
    .newboxmobile {
    display: none !important;
    }
}
@media only screen and (max-width: 981px) {
    .aboutsection {
    display: none !important;
    }
}
@media screen and (min-width: 981px) {
            .newboxmobile {
          
            }
        }
  .newboxmobile {
 max-width: 100%;
  padding: 25px;
   background-image: url("images/sanriolayer2.png"),  url("images/stardots.png" );
  background-attachment: fixed, fixed;
 background-position: center, center;  
background-color: #ACCAE3;
  background-repeat: no-repeat, repeat;
 background-color: #A2D8E4;
 background-size: cover, 88px;
font-family: 'Helvetica, Arial', sans-serif;
  line-height: 26px;
      font-size: 18px;
    color:  #7f93b3;
}


/* MOON BOX MOBILE */
@media only screen and (min-width: 981px) {
    .moonboxmobile {
    display: none !important;
    }
}
@media only screen and (max-width: 981px) {
    .moonsection {
    display: none !important;
    }
}
@media screen and (min-width: 981px) {
            .moonboxmobile {
         
            }
        }
  .moonboxmobile {
   max-width: 100%;
  padding: 25px;
   background-image: url("images/moonbg.png");
  background-attachment: fixed;
 background-position: center;  
background-color: #eed5e3;
  background-repeat: repeat;
font-family: 'Helvetica, Arial', sans-serif;
  line-height: 26px;
    font-size: 18px;
   color:  #267a9f;
    
}

/* SANRIO BOX MOBILE */
@media only screen and (min-width: 981px) {
    .sanboxmobile {
    display: none !important;
    }
}
@media only screen and (max-width: 981px) {
    .sanriosection {
    display: none !important;
    }
}
@media screen and (min-width: 981px) {
            .sanboxmobile {

            }
        }
  .sanboxmobile {
 max-width: 100%;
  padding: 25px;
   background-image: url("images/sanriopinkbgm.png");
  background-attachment: fixed;
 background-position: center;  
background-color: #ACCAE3;
  background-repeat: repeat;
 background-color: #A2D8E4;
 background-size: 600px;
font-family: 'Helvetica, Arial', sans-serif;
  line-height: 26px;
      font-size: 18px;
    color:  #7f93b3;
}

/* NINTENDO BOX MOBILE */
@media only screen and (min-width: 981px) {
    .ninboxmobile {
    display: none !important;
    }
}
@media only screen and (max-width: 981px) {
    .ninsection {
    display: none !important;
    }
}
@media screen and (min-width: 981px) {
            .ninboxmobile {
     
            }
        }
  .ninboxmobile {
   max-width: 100%;
  padding: 25px;
   background-image: url("images/ninstars.png");
  background-attachment: fixed;
 background-position: center;  
  background-repeat: repeat;
    background-color: #7fdace;
font-family: 'Helvetica, Arial', sans-serif;
  line-height: 26px;
      font-size: 18px;
 color:#50918e;
}


/* OMAKE BOX MOBILE */
@media only screen and (min-width: 981px) {
    .omakeboxmobile {
    display: none !important;
    }
}
@media only screen and (max-width: 981px) {
    .omakesection {
    display: none !important;
    }
}
@media screen and (min-width: 981px) {
            .omakeboxmobile {
       
            }
        }
  .omakeboxmobile {
   max-width: 100%;
  padding: 25px;
   background-image: url("images/sanriolayer2.png"),  url("images/stardots.png" );
  background-attachment: fixed, fixed;
    background-position: top center;  
 background-color: #D8D162;
  background-repeat: no-repeat, repeat;
 background-size: cover, 88px;
font-family: 'Helvetica, Arial', sans-serif;
  line-height: 26px;
    font-size: 18px;
  color:  #7f93b3;
}

@media only screen and (max-width: 981px) {
html {
  scroll-padding-top: 198px;
}