/*
Drag Around - Draggable Responsive Template
-------------------------------------------
This file contains theme specific rules.

[Color codes]
Body: #696969
Heading: #513c40
Heading Secondary: #ef3e54
Button: #ef3e54
Scroll Bar: #e38295 to #ef3e54
Owl Arrow: #ef3e54
Owl Dot: rgba(203, 85, 108, 0.3)
Active Owl Dot: rgba(203, 85, 108, 1)

[Font Families]
Body and Paragraphs: "Montserrat", sans-serif
Heading: "Montserrat", sans-serif
Heading Secondary: "Amatic SC", cursive


Table of Contents

1. Heading And Typography
2. Grid Item
3. Buttons
4. Logo & Nav
5. Scrollbar
6. Carousels
7. About Page
8. Utils & Miscellaneous
9. Responsive

*/

/* ==========================================================================
1. Heading And Typography
========================================================================== */

p {
  font-size: 13px;
  line-height: 24px;
  font-family: "Montserrat", sans-serif;
  font-weight: 400;
}

h1 {
  font-family: "Montserrat", sans-serif;
  font-size: 48px;
  color: #513c40;
}

h2 {
  font-family: "Montserrat", sans-serif;
  font-size: 28px;
  color: #513c40;
  margin-bottom: 15px;
}

h3 {
  font-family: "Montserrat", sans-serif;
  font-size: 20px;
  color: #513c40;
  margin-bottom: 15px;
}

.item-details h2 {
  font-size: 62px;
}

h2 .line-1 {
  font-family: "Montserrat", sans-serif;
  font-size: 18px;
  font-weight: 500;
  display: block;
  color: #ef3e54;
}

h2 .line-2 {
  font-family: "Amatic SC", cursive;
  font-size: 42px;
  display: block;
  font-weight: 700;
}

.item-details h2 .line-1,
.item-details-without-image h2 .line-1,
h2.large .line-1 {
  font-size: 28px;
}

.item-details h2 .line-2,
.item-details-without-image h2 .line-2,
h2.large .line-2 {
  font-size: 62px;
  margin-bottom: 36px;
}

h2.animation-slide .line-1:last-of-type {
  margin-bottom: 15px;
}

/* ==========================================================================
2. Grid Item
========================================================================== */

.grid-item {
  background: #fbf9f6;
  border-radius: 19px 10px 149px 165px / 121px 197px 16px 17px;
}

.grid-item-l {
  border-radius: 243px 18px 120px 15px / 17px 200px 16px 174px;
}

.grid-item.transparent.bordered {
  border: 2px solid #c9a8ae;
  background: url(../../img/fun/back.jpg);
  background-size: contain;
}


/* ==========================================================================
3. Buttons
========================================================================== */

a.button {
  border: 1px solid #ef3e54;
  background-image: linear-gradient(to left, #ef3e54 50%, rgba(0, 0, 0, 0) 50%);
  border-radius: 243px 18px 120px 15px / 17px 200px 16px 174px;
  font-family: "Amatic SC", cursive;
  font-weight: 700;
  font-size: 20px;
  color: #ef3e54;
}
a.button:hover,
a.button:active {
  background-image: linear-gradient(
    to right,
    rgba(0, 0, 0, 0) 50%,
    #ef3e54 50%
  );
  background-position: -100% 0;
  color: #ffffff;
}
a.button.filled,
.owl-navs-dots .owl-arrow {
  background-position: -100% 0;
  color: #ffffff;
}

a.button.filled.white {
  background-position: -100% 0;
  border-radius: 243px 18px 120px 15px / 17px 200px 16px 174px;
  background-image: linear-gradient(to left, #fff 50%, rgba(0, 0, 0, 0) 50%);
  color: #ef3e54;
}
a.button.white {
  color: #fff;
  border: 1px solid #fff;
  border-radius: 243px 18px 120px 15px / 17px 200px 16px 174px;
  background-image: linear-gradient(to left, #fff 50%, rgba(0, 0, 0, 0) 50%);
  border-image-slice: 2;
}
a.button.white:hover,
a.button.white:active {
  color: #ef3e54;
}
.svg-container path {
  stroke: #ef3e54;
  stroke-width: 1px;
  stroke-dasharray: 3px, 4px;
}
.sequence-button {
  background: #1b1b1b;
  border: 1px solid #1b1b1b;
  border-radius: 24px 14px 26px 14px / 17px 23px 18px 24px !important;
}
.sequence-button .fa {
  color: white;
}
.sequence-button:hover {
  background: #ece6da;
}

.sequence-button:hover .fa {
  color: #ef3e54;
}

.grid-item [data-type="gallery"] .close-button {
  background: #5a544d;
  color: white;
}

.play-button {
  color: #fbf9f6;
}

/* ==========================================================================
4. Logo & Nav
========================================================================== */

.grid-item.logo-nav {
  background: url("../../img/fun/cool-logo-back.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}


.nav {
  font-family: "Amatic SC", cursive;
  font-weight: 700;
  font-size: 30px;
}
.nav li a {
  color: #ef3e54;
}
.nav li a:hover,
.nav li a:focus {
  color: #000;
}


.logo-decoration-1 {
  position: absolute;
  left: -10px;
  bottom: -61px;
}
.logo-decoration-2 {
  position: absolute;
  right: -40px;
  top: 7px;
}
.logo-decoration-3 {
  position: absolute;
  left: -60px;
  top: 6px;
}

.drag-indicator .title {
  color: #70303d;
  font-family: "Montserrat", sans-serif;
  font-size: 13px;
  font-weight: 500;
   position: absolute;
  left: -160px;
  top: -100px;
}

/* ==========================================================================
5. Scrollbar
========================================================================== */

.mCSB_scrollTools .mCSB_draggerRail {
  background: rgb(203, 85, 108);
  background: linear-gradient(to bottom, #e38295 0%, #ef3e54 100%);
}
.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
  width: 6px;
  background: rgb(203, 85, 108);
  background: linear-gradient(to bottom, #e38295 0%, #ef3e54 100%);
}
.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar,
.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar {
  background: rgb(203, 85, 108);
  background: linear-gradient(to bottom, #e38295 0%, #ef3e54 100%);
}

/* ==========================================================================
6. Carousels
========================================================================== */

.owl-dots .owl-dot {
  width: 9px;
  height: 9px;
  border-radius: 8px;
  background: rgba(203, 85, 108, 0.3);
  cursor: pointer;
  display: inline-block;
  margin: 1px 4px;
}
.owl-dots .owl-dot.active {
  background: rgba(203, 85, 108, 1);
}

.slider-nav .owl-next,
.slider-nav .owl-prev {
  vertical-align: middle;
  margin: 0 24px;
  font-size: 27px;
  color: #ef3e54;
}
.dot {
  background-color: #ef3e54;
  height: 5px;
  width: 5px;
  border-radius: 15px;
  position: absolute;
  top: 50%;
  left: 50%;
  box-shadow: 0 0 2px #ef3e54;
}
.owl-dots {
  display: inline-block;
  vertical-align: sub;
}

.grid-item[data-type="gallery"] .owl-nav .owl-next,
.grid-item[data-type="gallery"] .owl-nav .owl-prev {
  color: #5a544d;
  border: 1px solid #5a544d;
}
.grid-item[data-type="gallery"] .owl-nav .owl-next:hover,
.grid-item[data-type="gallery"] .owl-nav .owl-prev:hover {
  background: #5a544d;
  color: #fff;
  border: 1px solid #5a544d;
}

/* ==========================================================================
7. About Page
========================================================================== */

.team-card {
  background: #fbf9f6;
}
.about-toys-icon-text i {
  color: #ef3e54;
}
.about-heading {
  background: url(/img/fun/subpage-1.jpg);
}
.about-toys-icon-text i {
  font-size: 40px;
}
.team {
  background: url(/img/fun/subpage-3.jpg);
}
.about-toys {
  background: url(/img/fun/back.jpg);
}
.footer {
  background: url(/img/fun/subpage-2.jpg);
}

/* ==========================================================================
8. Utils & Miscellaneous
========================================================================== */

body {
  font-family: "Montserrat", sans-serif;
  color: #696969;
  background: url(../../img/fun/back.jpg);
  background-size: contain;
}

.foreground {
  background: url(../../img/fun/dots-2.png);
}

.colored {
  color: #ef3e54;
}

input,
textarea {
  font-size: 14px;
  line-height: 22px;
  font-family: "Montserrat", sans-serif;
  font-weight: 300;
  border-radius: 243px 18px 120px 15px / 17px 200px 16px 174px;
}

/* ==========================================================================
9. Responsive
========================================================================== */

@media only screen and (max-width: 1200px) {
  .logo-decoration-1 {
    left: -5px;
    bottom: -35px;
    width: 240px;
  }

  .logo-decoration-2 {
    right: -31px;
    top: 0px;
    width: 75px;
  }

  .logo-decoration-3 {
    left: -40px;
    top: 10px;
    width: 70px;
  }
}

@media only screen and (max-width: 991px) {
  .nav {
    font-size: 24px;
  }
}

@media only screen and (max-width: 767px) {
  body {
    background: #e8dfda;
  }
  .logo-decoration-3 {
    left: -62px;
    top: 10px;
    width: 100px;
  }

  .logo-decoration-2 {
    width: 96px;
    right: -4px;
  }
  .logo-decoration-1 {
    width: 260px;
    left: -5px;
  }
}

@media only screen and (max-width: 480px) {
  .logo-decoration-1 {
    left: 0px;
    width: 210px;
    bottom: -35px;
  }

  .logo-decoration-2 {
    width: 80px;
  }

  .logo-decoration-3 {
    left: -50px;
    top: 10px;
    width: 90px;
  }

  .nav {
    font-size: 24px;
  }

  .drag-indicator {
    bottom: 30px;
  }
}


.main-content {
    position: relative;
    
    display: flex;
    align-items: center;
    justify-content: center;
    flex-flow: column;
    
    height: 100vh;
    
    background: #673ab7;
    color: #fff;
    text-align: center;
}

.noise {
    z-index: 100;
    position: absolute;
    top: 0;
    left: 0;
    
    width: 100%;
    height: 100%;
    
    pointer-events: none;
    opacity: .05;
}