/******* customize page background color ********/
/* body, footer .topback{
  background-color: rgb(61, 61, 61);
} */


/******* Activate the following code if the page is darker ********/
/* h1, h2, h3, h4, a, p, .text, .date, .authorname, .author, .social a svg, .social a svg path, .social-icons a svg, .social-icons a svg path{
  color:rgb(255, 255, 255) !important;
  fill: white !important;
}
aside h4, .related-tag, .tippy-popper a svg, .tippy-popper a svg path, .tippy-popper a{
  color:#7e7e7e !important;
  fill: #7e7e7e !important;
} */


.cover {
  margin-bottom: 40px;
  margin-top: 0px;
  height: 65vh;
  background-image: url("../img/cover.jpg");
  background-size: cover;
  background-position: center;
  /* background-position: bottom;  to avoid graphic crop */
}

.spark {
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
}




.size {
  width: 100%;
  max-width: 660px;
  margin: 0 auto;
}


#myImg {
  transform: rotate(90deg);
  border: solid 1px rgb(197, 197, 197);
}

#myImg2 {
  transform: rotate(120deg);
  border: solid 1px rgb(197, 197, 197);
  width: 165%;
  margin-top: 55px;
  margin-left: -5px;
}

#myImg3 {
  transform: rotate(162deg);
  border: solid 1px rgb(197, 197, 197);
}

#myImg4 {
  transform: rotate(198deg);
  border: solid 1px rgb(197, 197, 197);
}

#myImg5 {
  transform: rotate(234deg);
  border: solid 1px rgb(197, 197, 197);
}

#myImg6 {
  transform: rotate(270deg);
  border: solid 1px rgb(197, 197, 197);
}

#myImg7 {
  transform: rotate(306deg);
  border: solid 1px rgb(197, 197, 197);
}

#myImg8 {
  transform: rotate(342deg);
  border: solid 1px rgb(197, 197, 197);
}

#myImg9 {
  transform: rotate(15deg);
  border: solid 1px rgb(197, 197, 197);
  width: 165%;
  margin-top: 38px;
  margin-left: -20px;
}

#myImg10 {
  transform: rotate(410deg);
  border: solid 1px rgb(197, 197, 197);
}





/*------------------------- | top 10 image | -----------------------------*/

.circle-container {
  position: relative; /* 1 */
  width: 350px;
  height: 350px;
  padding: 0;
  border-radius: 50%;
  list-style: none; /* 2 */
  box-sizing: content-box; /* 3 */
  margin: 100px auto 0;
  border: solid 0px rgb(0, 0, 0);
}


.circle-container > * { /* 4 */
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 110px;
  height: 110px;
  margin-top: -90px;
  margin-left: -85px;
}


.circle-container > :nth-of-type(1) {
  transform: rotate(0deg) translate(320px) rotate(0deg);
}
.circle-container > :nth-of-type(2) {
  transform: rotate(35deg) translate(255px) rotate(-29deg);
}
.circle-container > :nth-of-type(3) {
  transform: rotate(72deg) translate(310px) rotate(-72deg);
}
.circle-container > :nth-of-type(4) {
  transform: rotate(105deg) translate(310px) rotate(-108deg);
}
.circle-container > :nth-of-type(5) {
  transform: rotate(140deg) translate(310px) rotate(-142deg);
}
.circle-container > :nth-of-type(6) {
  transform: rotate(178deg) translate(310px) rotate(-178deg);
}
.circle-container > :nth-of-type(7) {
  transform: rotate(214deg) translate(310px) rotate(-214deg);
}
.circle-container > :nth-of-type(8) {
  transform: rotate(250deg) translate(310px) rotate(-250deg);
}
.circle-container > :nth-of-type(9) {
  transform: rotate(286deg) translate(280px) rotate(-286deg);
}
.circle-container > :nth-of-type(10) {
  transform: rotate(326deg) translate(325px) rotate(-322deg);
}


.circle-container img {
  display: block;
  width: 100%;
  border-radius: 0%;
  filter: grayscale(100%);
}


.circle-container img:hover {
  filter: grayscale(0);
  scale: 150%;
}


.circle-image {
  rotate: 90deg;
  width: 100%;
  height: 100%;
  position: center; /* Allows for centering */
  top: -66%;
  margin-left: -200px;
  transform: translate(-50%, -50%); /* Centers the image */
}


.circle-container .circle-image:hover {
  filter: grayscale(0);
  scale: 100%;
}

/*------------------------- | end of top 10 image | -----------------------------*/



/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 30px; /* Location of the box */
  left: 0;
  top: 25px;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: hidden auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}

/* Modal Content (Image) */
.modal-content {
  /* margin-top: -40px; */
  /* margin-left: 75px;
  margin-right: 75px; */
  margin-bottom: 75px;
  display: block;
  margin: 30px auto;
  max-width: 75%;
}

/* Caption of Modal Image (Image Text) - Same Width as the Image */
#caption {
  position: absolute;
  /* margin-left: 80px; */
  display: block;
  width: 80%;
  left: calc(50% - 249px);
  max-width: 490px;
  text-align: left;
  color: #ffffff;
  padding: 10px 0;
  height: 150px;
}

/* Add Animation - Zoom in the Modal */
.modal-content, #caption {
  animation-name: zoom;
  animation-duration: 0.6s;
}

@keyframes zoom {
  from {transform:scale(0)}
  to {transform:scale(1)}
}

/* The Close Button */
.close {
  position: fixed;
  top: 50px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
  z-index: 20;
}

.close:hover,
.close:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}



.mbhd {
  display: block;
}

.mbsh {
  display: none;
}


.mbsh2 {
  display: none;
}














/*------------------------- | MEDIA QUERIES | -----------------------------*/

@media only screen and (max-width: 1600px) {

  .spark {
    max-width: 1200px;
  }

}

@media only screen and (max-width: 1200px) {

  .spark {
    max-width: 960px;
  }

}

@media only screen and (max-width:1024px) {}

@media only screen and (max-width: 960px) {

  .spark {
    max-width: 660px;
  }







  /*------------------------- | top 10 image | -----------------------------*/

.circle-container {
  position: relative; /* 1 */
  width: 230px;
  height: 230px;
  padding: 0;
  border-radius: 50%;
  list-style: none; /* 2 */
  box-sizing: content-box; /* 3 */
  margin: 100px auto 0;
  border: solid 0px rgb(0, 0, 0);
}


.circle-container > * { /* 4 */
  display: block;
  position: absolute;
  top: 50%;
  left: 30%;
  width: 100px;
  height: 100px;
  margin-top: -80px;
  margin-left: -55px;
}


.circle-container > :nth-of-type(1) {
  transform: rotate(0deg) translate(225px) rotate(0deg);
}
.circle-container > :nth-of-type(2) {
  transform: rotate(36deg) translate(160px) rotate(-36deg);
}
.circle-container > :nth-of-type(3) {
  transform: rotate(72deg) translate(220px) rotate(-72deg);
}
.circle-container > :nth-of-type(4) {
  transform: rotate(108deg) translate(220px) rotate(-108deg);
}
.circle-container > :nth-of-type(5) {
  transform: rotate(142deg) translate(220px) rotate(-142deg);
}
.circle-container > :nth-of-type(6) {
  transform: rotate(178deg) translate(220px) rotate(-178deg);
}
.circle-container > :nth-of-type(7) {
  transform: rotate(214deg) translate(220px) rotate(-214deg);
}
.circle-container > :nth-of-type(8) {
  transform: rotate(250deg) translate(220px) rotate(-250deg);
}
.circle-container > :nth-of-type(9) {
  transform: rotate(286deg) translate(197px) rotate(-286deg);
}
.circle-container > :nth-of-type(10) {
  transform: rotate(322deg) translate(225px) rotate(-322deg);
}


.circle-container img {
  display: block;
  width: 100%;
  border-radius: 0%;
  filter: grayscale(100%);
}


.circle-container img:hover {
  filter: grayscale(0);
  scale: 120%;
}


.circle-image {
  rotate: 90deg;
  width: 100%;
  height: 100%;
  position: center; /* Allows for centering */
  top: -63%;
  margin-left: -118px;
  transform: translate(-50%, -50%); /* Centers the image */
}

.circle-container .circle-image:hover {
  filter: grayscale(0);
  scale: 100%;
}


/*------------------------- | end of top 10 image | -----------------------------*/


/* Modal Content (Image) */
.modal-content {
  /* margin-top: -40px; */
  /* margin-left: 75px;
  margin-right: 75px; */
  margin-bottom: 75px;
  display: block;
  margin: 30px auto;
  max-width: 90%;
  margin-top: 32px;
}


/* Caption of Modal Image (Image Text) - Same Width as the Image */
#caption {
  position: absolute;
  display: block;
  width: 80%;
  left: calc(50% - 200px);
  max-width: 400px;
  text-align: left;
  color: #ffffff;
  padding: 10px 0;
  height: 150px;
}








}

@media only screen and (max-width: 660px) {

  .spark {
    max-width: 360px;
  }

  .size {
    max-width: 360px;
  }


}

@media only screen and (max-width: 580px) {}

@media only screen and (max-width: 480px) {
  img.circle-image{
    display: none;
  }
  
  .circle-container{
    display: flex;
    margin: 0 auto;
    width: 100%;
    height: 100%;
    rotate: 0deg !important;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    align-items: center;
    gap: 3px;
    margin-top: -200px;
    margin-bottom: -300px;
  }

  .circle-container li {
    position: static;
    margin: 0 auto;
    width: 45%;
    height: auto;
    transform: rotate(0deg) translate(0) rotate(0deg) !important;
  }

  
  
/* .circle-container > :nth-of-type(2) {
  transform: rotate(36deg) translate(160px) rotate(-36deg);
}
.circle-container > :nth-of-type(3) {
  transform: rotate(72deg) translate(220px) rotate(-72deg);
}
.circle-container > :nth-of-type(4) {
  transform: rotate(108deg) translate(220px) rotate(-108deg);
}
.circle-container > :nth-of-type(5) {
  transform: rotate(142deg) translate(220px) rotate(-142deg);
}
.circle-container > :nth-of-type(6) {
  transform: rotate(178deg) translate(220px) rotate(-178deg);
}
.circle-container > :nth-of-type(7) {
  transform: rotate(214deg) translate(220px) rotate(-214deg);
}
.circle-container > :nth-of-type(8) {
  transform: rotate(250deg) translate(220px) rotate(-250deg);
}
.circle-container > :nth-of-type(9) {
  transform: rotate(286deg) translate(197px) rotate(-286deg);
}
.circle-container > :nth-of-type(10) {
  transform: rotate(322deg) translate(225px) rotate(-322deg);
} */

  #myImg {
    transform: rotate(0deg);
    max-width: 100%;
    width: auto;
  }

  #myImg2 {
    transform: rotate(-90deg);
    max-width: 100%;
    scale: 1.65;
    margin: 0 auto;
  }

  #myImg3 {
    transform: rotate(0deg);
    max-width: 100%;
    width: auto;
  }

  #myImg4 {
    transform: rotate(0deg);
    max-width: 100%;
    width: auto;
  }

  #myImg5 {
    transform: rotate(0deg);
    max-width: 100%;
    width: auto;
}

  #myImg6 {
    transform: rotate(0deg);
    max-width: 100%;
    width: auto;
  }

  #myImg7 {
    transform: rotate(0deg);
    max-width: 100%;
    width: auto;
  }

  #myImg8 {
    transform: rotate(0deg);
    max-width: 100%;
    width: auto;
  }

  #myImg9 {
    transform: rotate(-90deg);
    max-width: 100%;
    scale: 1.65;
    margin: 0 auto;
  }

  #myImg10 {
    transform: rotate(0deg);
    max-width: 100%;
    width: auto;
  }


  .modal-content {
  margin-bottom: 75px;
  display: block;
  margin: 30px auto;
  width: 290px;
  margin-top: -17px;
}

/* Caption of Modal Image (Image Text) - Same Width as the Image */
#caption {
  position: absolute;
  display: block;
  left: 10%;
  max-width: 70%;
  text-align: left;
  color: #ffffff;
  padding: 5px 0;
  /* height: 150px; */
}

.mbhd {
  display: none;
}

.mbsh {
  display: block;
  text-align: right;
  margin-top: -41px;
  font-size: small;
  font-style: italic;
}
  

.mbsh2 {
  display: block;
  transform: translateY(480px);
  position: relative;
  z-index: 10;}




}

@media only screen and (max-width: 400px) {}

@media only screen and (max-width: 360px) {



}