@import url("https://fonts.googleapis.com/css?family=Montserrat:100,200,300,400,500,700,900&display=swap");
body {
  background: #2e2e2e;
}

body * {
  -webkit-transition: .5s !important;
  transition: .5s !important;
}

.container {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  height: 90%;
  width: 75%;
  border-radius: 30px;
  background: whitesmoke;
}

.container .ad-left {
  height: auto;
  width: 100%;
  position: absolute;
}

.container .nav {
  font-family: Montserrat;
}

.container .nav ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  list-style: none;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.container .nav ul li {
  padding: 10px 70px 10px 10px;
}

.container .nav ul li img {
  height: 30px;
}

.container .nav ul li .search {
  background: white;
  padding: 5px 10px;
  border-radius: 30px;
  width: 100%;
}

.container .nav ul li .search i {
  color: #bbbbbb;
}

.container .nav ul li .search input {
  width: 80%;
  border: none;
  padding: 5px;
}

.container .nav ul li .search input::-webkit-input-placeholder {
  color: #838383;
}

.container .nav ul li .search input:-ms-input-placeholder {
  color: #838383;
}

.container .nav ul li .search input::-ms-input-placeholder {
  color: #838383;
}

.container .nav ul li .search input::placeholder {
  color: #838383;
}

.container .nav ul li span {
  color: black;
  font-size: .7em;
  font-weight: 900;
}

.container .main {
  position: relative;
  top: 10%;
  height: 60%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  overflow-x: scroll;
  overflow-y: hidden;
  -ms-scroll-snap-type: x mandatory;
      scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
}

.container .main * {
  margin: 40px;
}

.container .main .character {
  position: relative;
  top: 20%;
  font-family: Montserrat;
  height: 60%;
  padding: 10px 50px;
  border-radius: 30px;
  scroll-snap-align: start;
}

.container .main .character img {
  position: absolute;
  top: -55%;
  left: 30%;
  height: 90%;
  width: auto;
}

.container .main .character h3 {
  position: relative;
  top: 35%;
  left: -20%;
  color: whitesmoke;
  font-size: 2.8em;
  font-weight: 500;
  letter-spacing: -1px;
}

.container .main .character h4 {
  color: whitesmoke;
  position: relative;
  top: 22%;
  left: -20%;
  color: whitesmoke;
  font-size: 1em;
  font-weight: 300;
  width: 180px;
}

.container .main .blossom {
  background-image: linear-gradient(45deg, #e71e1e, #ff8f8f);
  -webkit-box-shadow: -5px 0px 30px rgba(255, 68, 68, 0.486);
          box-shadow: -5px 0px 30px rgba(255, 68, 68, 0.486);
}

.container .main .dexter {
  background-image: linear-gradient(45deg, #1b35c7, #7187ff);
  -webkit-box-shadow: -5px 0px 30px rgba(27, 53, 199, 0.507);
          box-shadow: -5px 0px 30px rgba(27, 53, 199, 0.507);
}

.container .main .dexter img {
  position: absolute;
  top: -40%;
  left: 30%;
  height: 70%;
  width: auto;
}

.container .main .jhonny {
  background-image: linear-gradient(45deg, #f2ca2f, #ffeea8);
  -webkit-box-shadow: -5px 0px 30px #f2cb2f7a;
          box-shadow: -5px 0px 30px #f2cb2f7a;
}

.container .main .jhonny img {
  position: absolute;
  top: -50%;
  left: 20%;
  height: 80%;
  width: auto;
}

.container .main .jhonny * {
  color: black !important;
}

.container .main .jack {
  background-image: linear-gradient(45deg, #e71e1e, #ff8f8f);
  -webkit-box-shadow: -5px 0px 30px rgba(255, 68, 68, 0.486);
          box-shadow: -5px 0px 30px rgba(255, 68, 68, 0.486);
}

.container .main .tom {
  background-image: linear-gradient(45deg, #757575, #b9b9b9);
  -webkit-box-shadow: -5px 0px 30px rgba(114, 114, 114, 0.438);
          box-shadow: -5px 0px 30px rgba(114, 114, 114, 0.438);
}

.container .main .ed {
  background-image: linear-gradient(45deg, #84a029, #e4fa9a);
  -webkit-box-shadow: -5px 0px 30px #84a02971;
          box-shadow: -5px 0px 30px #84a02971;
}

.container .main .courage {
  background-image: linear-gradient(45deg, #aa04b9, #f691ff);
  -webkit-box-shadow: -5px 0px 30px #aa04b983;
          box-shadow: -5px 0px 30px #aa04b983;
}

.container .main .grim {
  background-image: linear-gradient(45deg, #000000, #868686);
  -webkit-box-shadow: -5px 0px 30px #0000006b;
          box-shadow: -5px 0px 30px #0000006b;
}

.container .main .scooby {
  background-image: linear-gradient(45deg, #7e3a13, #ffab7a);
  -webkit-box-shadow: -5px 0px 30px #7e3a137a;
          box-shadow: -5px 0px 30px #7e3a137a;
}

.container .main .close {
  display: none;
}

.container .footer {
  position: relative;
  top: 10%;
}

.container .footer ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  list-style: none;
  font-family: Montserrat;
  font-weight: 600;
  font-size: 1.3em;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  padding: 0px 10px;
}

.container .footer ul li {
  padding: 5px 20px;
  cursor: pointer;
}

.footer_open {
  display: none;
}

.main_open {
  position: fixed !important;
  top: 0% !important;
  left: 0% !important;
  height: 100% !important;
  width: 90% !important;
}

.main_open .character:not(.open) {
  display: none;
}

.main_open .close {
  display: block !important;
  z-index: 10000000000000000000 !important;
  padding: 0;
  margin: 0;
  position: absolute;
  top: 25%;
  left: 90%;
}

.main_open .close i {
  font-size: 3em;
  color: whitesmoke;
}

.open {
  position: fixed !important;
  height: 70% !important;
  width: 80% !important;
  z-index: 10000000000 !important;
  -webkit-transition: .5s;
  transition: .5s;
}

.open img {
  position: absolute !important;
  top: -30% !important;
  left: 10% !important;
  height: 70% !important;
  width: auto !important;
}

.open h3 {
  position: relative !important;
  top: -40% !important;
  left: -48% !important;
  -webkit-transform: rotate(270deg);
          transform: rotate(270deg);
  color: whitesmoke !important;
  font-size: 5em !important;
  font-weight: 900 !important;
}

.open h4 {
  position: relative !important;
  top: 30% !important;
  left: 5% !important;
  color: whitesmoke !important;
  font-size: 3em !important;
  font-weight: 500 !important;
  width: 600px !important;
}

@media only screen and (max-width: 600px) {
  .main_open {
    position: fixed !important;
    top: -10% !important;
    left: 0% !important;
    height: 50% !important;
    width: 50% !important;
    border-radius: 0px;
  }
  .main_open .character:not(.open) {
    display: none;
  }
  .main_open .close {
    display: block !important;
    padding: 0;
    margin: 0;
    position: fixed;
    top: 20%;
    left: 60%;
    z-index: 1000000000000000000000000000000000000 !important;
  }
  .main_open .close i {
    z-index: 1000000000000000000000000000000000000 !important;
    font-size: 2.3em;
    color: #f8f8f8;
  }
  .open {
    position: fixed !important;
    left: -10%;
    height: 70% !important;
    width: 70% !important;
    z-index: 10000 !important;
    -webkit-transition: .5s;
    transition: .5s;
  }
  .open img {
    position: absolute !important;
    top: -35% !important;
    left: 20% !important;
    height: 55% !important;
    width: auto !important;
  }
  .open h3 {
    position: relative !important;
    top: 20% !important;
    left: -48% !important;
    -webkit-transform: rotate(270deg);
            transform: rotate(270deg);
    color: whitesmoke !important;
    font-size: 2.5em !important;
    font-weight: 900 !important;
  }
  .open h4 {
    position: relative !important;
    top: 30% !important;
    left: 0% !important;
    color: whitesmoke !important;
    font-size: 1.3em !important;
    font-weight: 500 !important;
    width: 600px !important;
  }
  .container {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
    height: 100%;
    width: 100%;
    border-radius: 00px;
    background: whitesmoke;
  }
  .container .nav {
    font-family: Montserrat;
  }
  .container .nav ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    list-style: none;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }
  .container .nav ul li:nth-child(2), .container .nav ul li:nth-child(3) {
    padding: 10px 70px 10px 10px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    display: none;
  }
  .container .nav ul li:nth-child(2) img, .container .nav ul li:nth-child(3) img {
    height: 30px;
  }
  .container .nav ul li:nth-child(2) .search, .container .nav ul li:nth-child(3) .search {
    background: white;
    padding: 5px 10px;
    border-radius: 20px;
    width: 100%;
  }
  .container .nav ul li:nth-child(2) .search i, .container .nav ul li:nth-child(3) .search i {
    color: #bbbbbb;
  }
  .container .nav ul li:nth-child(2) .search input, .container .nav ul li:nth-child(3) .search input {
    width: 40%;
    border: none;
    padding: 2px;
  }
  .container .nav ul li:nth-child(2) .search input::-webkit-input-placeholder, .container .nav ul li:nth-child(3) .search input::-webkit-input-placeholder {
    color: #838383;
  }
  .container .nav ul li:nth-child(2) .search input:-ms-input-placeholder, .container .nav ul li:nth-child(3) .search input:-ms-input-placeholder {
    color: #838383;
  }
  .container .nav ul li:nth-child(2) .search input::-ms-input-placeholder, .container .nav ul li:nth-child(3) .search input::-ms-input-placeholder {
    color: #838383;
  }
  .container .nav ul li:nth-child(2) .search input::placeholder, .container .nav ul li:nth-child(3) .search input::placeholder {
    color: #838383;
  }
  .container .nav ul li:nth-child(2) span, .container .nav ul li:nth-child(3) span {
    color: black;
    font-size: .7em;
    font-weight: 900;
  }
  .container .main {
    position: relative;
    top: 10%;
    left: -5%;
    height: 60%;
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    overflow-x: scroll;
    overflow-y: hidden;
    -ms-scroll-snap-type: x mandatory;
        scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
  }
  .container .main * {
    margin: 40px;
  }
  .container .main .character {
    position: relative;
    top: 20%;
    font-family: Montserrat;
    height: 60%;
    width: 56%;
    padding: 10px 50px;
    scroll-snap-align: start;
  }
  .container .main .character img {
    position: absolute;
    top: -55%;
    left: 30%;
    height: 90%;
    width: auto;
  }
  .container .main .character h3 {
    position: relative;
    top: 35%;
    left: -20%;
    color: whitesmoke;
    font-size: 2.8em;
    font-weight: 500;
    letter-spacing: -1px;
  }
  .container .main .character h4 {
    color: whitesmoke;
    position: relative;
    top: 22%;
    left: -20%;
    color: whitesmoke;
    font-size: 1em;
    font-weight: 300;
    width: 180px;
  }
  .container .main .blossom {
    background-image: linear-gradient(45deg, #e71e1e, #ff8f8f);
    -webkit-box-shadow: -5px 0px 30px rgba(255, 68, 68, 0.486);
            box-shadow: -5px 0px 30px rgba(255, 68, 68, 0.486);
  }
  .container .main .dexter {
    background-image: linear-gradient(45deg, #1b35c7, #7187ff);
    -webkit-box-shadow: -5px 0px 30px rgba(27, 53, 199, 0.507);
            box-shadow: -5px 0px 30px rgba(27, 53, 199, 0.507);
  }
  .container .main .dexter img {
    position: absolute;
    top: -40%;
    left: 30%;
    height: 70%;
    width: auto;
  }
  .container .main .jhonny {
    background-image: linear-gradient(45deg, #f2ca2f, #ffeea8);
    -webkit-box-shadow: -5px 0px 30px #f2cb2f7a;
            box-shadow: -5px 0px 30px #f2cb2f7a;
  }
  .container .main .jhonny img {
    position: absolute;
    top: -50%;
    left: 20%;
    height: 80%;
    width: auto;
  }
  .container .main .jhonny * {
    color: black !important;
  }
  .container .main .jack {
    background-image: linear-gradient(45deg, #e71e1e, #ff8f8f);
    -webkit-box-shadow: -5px 0px 30px rgba(255, 68, 68, 0.486);
            box-shadow: -5px 0px 30px rgba(255, 68, 68, 0.486);
  }
  .container .main .tom {
    background-image: linear-gradient(45deg, #757575, #b9b9b9);
    -webkit-box-shadow: -5px 0px 30px rgba(114, 114, 114, 0.438);
            box-shadow: -5px 0px 30px rgba(114, 114, 114, 0.438);
  }
  .container .main .ed {
    background-image: linear-gradient(45deg, #84a029, #e4fa9a);
    -webkit-box-shadow: -5px 0px 30px #84a02971;
            box-shadow: -5px 0px 30px #84a02971;
  }
  .container .main .courage {
    background-image: linear-gradient(45deg, #aa04b9, #f691ff);
    -webkit-box-shadow: -5px 0px 30px #aa04b983;
            box-shadow: -5px 0px 30px #aa04b983;
  }
  .container .main .grim {
    background-image: linear-gradient(45deg, #000000, #868686);
    -webkit-box-shadow: -5px 0px 30px #0000006b;
            box-shadow: -5px 0px 30px #0000006b;
  }
  .container .main .scooby {
    background-image: linear-gradient(45deg, #7e3a13, #ffab7a);
    -webkit-box-shadow: -5px 0px 30px #7e3a137a;
            box-shadow: -5px 0px 30px #7e3a137a;
  }
  .container .main .close {
    display: none;
  }
  .container .footer {
    position: relative;
    top: 10%;
    display: none;
  }
  .container .footer ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    list-style: none;
    font-family: Montserrat;
    font-weight: 600;
    font-size: 1.3em;
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
    padding: 0px 10px;
  }
  .container .footer ul li {
    padding: 5px 20px;
    cursor: pointer;
  }
}

/* width */
::-webkit-scrollbar {
  height: .1px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #f5f5f5;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #f5f5f5;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #f5f5f5;
}
/*# sourceMappingURL=main.css.map */