.dot{
    position: fixed;
    margin-left: 20px;
    animation-name:dot 3s;
    size: auto;
    top:5px;
   }

#dotA{
    animation: wheel 3s ease infinite alternate;
    transform-origin:top;
}

#dotB{
    animation: ball 3s ease infinite alternate;
    transform-origin:center;
    transform: fill-box;
}

@keyframes wheel{
    0%{transform: rotateX(10deg);fill: black;}
    10%{transform: translateY(0%);fill:black;}
    30%{transform: translateY(10%);fill: #e4c8ff;}
    50%{transform: translateY(0%);fill:  black;}
    70%{transform: translate(-10px,15px);fill: #e0ff96;}
    80%{transform: skew(10deg,-10deg);fill: black;}
    90%{transform: rotateY(-10deg);fill:#e4c8ff;}
    100%{transform: skew(10deg,-10deg);fill: black;}
}

@keyframes ball{
    0%{fill: #e0ff96;}
    10%{fill: #e4c8ff;}
    30%{transform: translateY(10%);fill: black;}
    60%{transform: translateY(0%);fill:  black;}
    80%{transform: translate(20px, 15px);fill: #e0ff96;}
    90%{transform: translateX(50%);fill: black;}
    100%{transform: translate(15px,15px);fill: #e0ff96;}
    
}

    #toolset {
      display: none;
    }

    body {
      background-color: #fff;
      color: #000;
    }

   a:active {
      opacity: 0.7;
    }

    .page a.active {
    }

    i,
    em {
      font-style: italic;
    }

    b,
    strong {
      font-weight: bold;
    }

    sub,
    sup {
      position: relative;
      vertical-align: baseline;
    }

    sub {
      top: 0.3em;
    }

    sup {
      top: -0.4em;
    }

    s {
      text-decoration: line-through;
    }

    img {
      border: 0;
      padding: 0;
    }
    ul,
    ol {
      margin: 0;
      padding: 0 0 0 1em;
    }

    blockquote {
      margin: 0;
      padding: 0 0 0 1em;
    }

    hr {
      background: rgba(127, 127, 127, 0.2);
      border: 0;
      height: 1px;
      display: block;
    }

    .content img {
      float: none;
      margin-bottom: 1.5em;
    }
    .gallery_image_caption {
      margin-top: 1.5rem;
      margin-bottom: 0.5rem;
      font-size: 1.2rem;
      font-weight: 400;
      color: rgba(0, 0, 0, 0.25);
      font-family: 'Karla', Icons;
      font-style: normal;
      line-height: 1.3;
    }

    /**
 * Loading Animation
 */

    .loading[data-loading] {
      position: fixed;
      bottom: 8px;
      left: 8px;
    }

    /**
 * Editor styles
 */

    [data-predefined-style='true'] bodycopy {
      font-size: 1.2rem;
      font-weight: 400;
      color: rgba(0, 0, 0, 0.75);
      font-family: 'Karla', Icons;
      font-style: normal;
      line-height: 1.6;
    }

    [data-predefined-style='true'] bodycopy a {
      color: #000;
      text-decoration: none;
    }

    [data-predefined-style='true'] bodycopy a:hover {
      color: #808080;
    }

    bodycopy a.image-link,
    bodycopy a.icon-link,
    bodycopy a.image-link:hover,
    bodycopy a.icon-link:hover {
      background:none;
      border-bottom: 0;
      padding-bottom: 0;
    }

    [data-predefined-style='true'] h1 {    

      font-family: 'Karla', Icons;
      font-style: normal;
      font-weight: 700;
      padding: 0;
      margin: 0;
      font-size: 2.4rem;
      line-height: 1.1;
      color: rgba(0, 0, 0, 0.75);
    }

    [data-predefined-style='true'] h1 a {
      color: rgba(0, 0, 0, 0.75);
    }

    [data-predefined-style='true'] h2 {
      font-family: 'Karla', Icons;
      font-style: normal;
      font-weight: 400;
      padding: 0;
      margin: 0;
      color: rgba(0, 0, 0, 0.75);
      font-size: 2rem;
      line-height: 1.2;
    }

    [data-predefined-style='true'] h2 a {
      color: rgba(0, 0, 0, 0.75);
    }

    [data-predefined-style='true'] small {
      display: inline-block;
      font-size: 1.2rem;
      line-height: 1.3;
      font-family: 'Karla', Icons;
      font-style: normal;
      font-weight: 400;
      color: rgba(0, 0, 0, 0.25);
    }

    [data-predefined-style='true'] small a {
      color: rgba(0, 0, 0, 0.75);
      border-bottom-width: 0em;
    }

    /**
 * Breakpoints
 */

    [data-css-preset] .page {
      background-color: initial /*!page_bgcolor*/;
    }

    .mobile .page,
    [data-css-preset].mobile .page {
      position: relative;
      max-width: 100%;
      width: 100%;
      background-color: transparent /*!page_bgcolor*/;
    }

    [data-css-preset] .container {
      margin-left: auto /*!content_center*/;
      margin-right: auto /*!content_center*/;
      text-align: left /*!text_left*/;
    }

    [data-css-preset] body {
      background-color: transparent /*!body_bgcolor*/;
    }

    [data-css-preset] .container_width {
      width:55% /*!content_center*/;
      margin-left: 370px;
    }

    [data-css-preset] .content_padding {
      padding-top: 3rem /*!main_margin*/;
      padding-bottom: 5rem /*!main_margin*/;
      padding-left: 3rem /*!main_margin*/;
      padding-right: 3rem /*!main_margin*/;
    }

    /**
 * Thumbnails
 */

    div[thumbnails] {
      justify-content: flex-start;
      margin-left: 320px;
    }

    [data-css-preset] .thumbnails {
      background-color: transparent/*!thumbnails_bgcolor*/;
    }

    [data-css-preset] .thumbnails_width {
      width: 55%/*!thumbnails_width*/;
    }

    [data-css-preset] [thumbnails-pad] {
      padding: 0.7rem/*!thumbnails_padding*/;
    }

    [data-css-preset] [thumbnails-gutter] {
      margin: -1.4rem/*!thumbnails_padding*/;
    }

    [data-css-preset] [responsive-layout] [thumbnails-pad] {
      padding: 0.5rem/*!responsive_thumbnails_padding*/;
    }

    [data-css-preset] [responsive-layout] [thumbnails-gutter] {
      margin: -1rem/*!responsive_thumbnails_padding*/;
    }

    .thumbnails{
	  margin-left: 110px;
    }

    .thumbnails .thumb_image {
      outline: 0px solid rgba(0, 0, 0, 0.12);
      outline-offset: -1px;
    }

    .thumbnails .thumb_image:hover {
      cursor: pointer;
      transform: scale(1.03);
      opacity: 60%;
      transition: all .3s;
    }

    .thumbnails .title {
      margin-top: 0.8rem;
      margin-bottom: 0.3rem;
      background-position: cover;
      font-size: 1.3rem;
      font-weight: 400;
      color: rgba(0, 0, 0, 0.85);
      font-family: 'Karla', Icons;
      font-style: normal;
      line-height: 1.3;
    }

    .thumbnails .tags {
      margin-top: 0.8rem;
      margin-bottom: 1.5rem;
      font-size: 1.2rem;
      font-weight: 400;
      color: rgba(0, 0, 0, 0.25);
      font-family: 'Karla', Icons;
      font-style: normal;
      line-height: 1.3;
    }

    .thumbnails .tags a {
      border-bottom: 0;
      color: rgba(0, 0, 0, 0.25);
      text-decoration: none;
    }

    .thumbnails .has_title .tags {
      margin-top: 0rem;
    }

    /**
 * Site Menu Button
 */

    .site_header.scroll {
      position: absolute;
    }

    [data-css-preset] #site_menu_button {
      color: rgba(0, 0, 0, 0.75);
      line-height: 1;
      font-size: 2.2rem /*!site_menu_button*/;
      padding: 6px;
      position: fixed;
      top: 3rem /*!site_menu_button*/;
	  right: 3rem /*!site_menu_button*/;
    }

    body.mobile #site_menu_button {
      margin-top: 5px;
      color: #000;
    }

    #site_menu_button.custom_icon {
      width: 40px;
      height: auto;
    }

    #site_menu_button.active {
      display: none;
    }

    /**
 * Site Menu
 */

    .header_text {
      width: 180px;
      height: 50px;
      line-height: 50px;
      font-family: 'Karla';
      margin-top: 28px;
      margin-left: 18px;
      /* background: #fff; */
      margin-bottom: 2rem;
    }

    .header_text a {
      color: #000;
      font-size: 1.8rem;
      font-weight: bolder;
      font-family: 'Karla';
      text-decoration: none;
    }

    .header_text.active {
      background: none;
    }

    body.mobile #site_menu {
      width: 100%;
    }

    #site_menu {
	margin-top: 65px; 
}

    #site_menu .page-link a {
      color: rgba(255, 255, 255, 0.6);
      font-family: 'Karla';
      font-size: 1.4rem;
    }

    #site_menu .set-link > a {
      color: rgba(255, 255, 255, 0.9);
      font-size: 1.6rem;
      line-height: 1.6;
      font-weight: bold;
      font-family: 'Karla';
    }

    #site_menu a:active {
      color: #cffd62;
      text-decoration: underline;
      text-decoration-color: #00b8a3;
    }

    #site_menu a.active {
      color: #cc98ff;
      font-weight: bold;
    }

    #site_menu .close {
      display: none;
      color: rgba(255, 255, 255, 0.4);
    }

    body.mobile #site_menu .close {
      display: block;
      font-size:3.5rem;
      line-height: 1.5em;
    }

    #site_menu .break {
      height: 18px;
    }

    #site_menu .indent {
      margin-left: 0px;
    }

    /**
 * Navigation
 */

    .navigation {
      width: 300px;
      list-style: none;
      position: absolute;
      margin-left: 7px;
      top: 0;
      font-family: 'Karla', Icons;
      font-style: normal;
	  font-weight: 300;
}

    .navigation ul li {
      list-style: none;
    }

    .navigation ul.list {
      padding-top: 160px;
    }

    .navigation ul.list li.set_link {
      margin-bottom: 18px;
    }

    .navigation ul.list li.set_link a.set_name {
      font-size: 1.5rem;
      font-weight: 700;
      padding-bottom: 4px;
    }

    .navigation ul.list li.set_link a.set_name:hover {
      cursor: pointer;
      color: #8c8c8c;
    }

    .navigation ul.list li.set_link a.set_name.active {
      cursor: pointer;
      color: #cc98ff;
    }

    .navigation ul.set_wrapper {
      padding-left: 0;
    }

    .navigation ul.set_wrapper li.project_link a {
      font-size: 1.2rem;
      line-height: 1.6em;
      color: #000;
      text-decoration: none;
    }

    .navigation ul.set_wrapper li.project_link a:hover {
      background-color: #e0ff96;
      cursor: pointer;
    }

    .navigation ul.set_wrapper li.project_link a:active {
      background-color: #00b8a3;
      color: #fff;
    }

    .navigation ul.set_wrapper li.project_link a.active {
      background-color:#e4c8ff;
    }

    .information {
      font-size: 1.2rem;
      color: #000;
      text-decoration: none;
    }

    .information:hover {
      cursor: pointer;
      color: #8c8c8c;
    }

    /*
 * Shop Button
 */

    [data-css-preset] #shop_button {
      color: rgba(0, 0, 0, 0.85);
      background: transparent;
      font-size: 32px;
      font-style: normal;
      font-weight: 400;
      line-height: 1;
      position: fixed;
      padding: 6px;
      top: 1rem /*!shop_button*/;
      left: 1.5rem /*!shop_button*/;
    }

    #shop_button.text {
      font-size: 1.3rem;
      font-weight: 400;
      color: rgba(0, 0, 0, 0.75);
      font-family: 'Karla', Icons;
      padding: 0;
      line-height: 1.3;
      font-style: normal;
    }

    #shop_button.custom_icon {
      width: 40px;
      height: auto;
    }

    body.mobile #shop_button:not(.text) {
      margin: -6px;
      font-size: 40px;
    }

    /*
 * Shop Product Widget
 */

    .shop_product {
      width: 100%;
      max-width: 22rem;
      position: relative;
      display: block;
    }

    .shop_product .price {
      font-family: 'Karla', Icons;
      font-size: 1.3rem;
      line-height: 1.3;
      color: rgba(0, 0, 0, 0.75);
      display: block;
      margin-bottom: 1rem;
      font-style: normal;
      font-weight: 400;
    }

    .shop_product .dropdown {
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif, 'Sans Serif', Icons;
      font-size: 1.3rem;
      display: inline-block;
      width: 100%;
      border: 1px solid rgba(0, 0, 0, 0.2);
      background: white url(https://static.cargo.site/assets/images/select-line-arrows.svg) no-repeat right;
      margin-bottom: 1rem;
      line-height: 1.3;
      padding: 0.7rem 2.5rem 0.7rem 1rem;
      font-style: normal;
      font-weight: 400;
      color: rgba(0, 0, 0, 0.75);
    }

    .shop_product .button {
      font-family: 'Karla', Icons;
      font-size: 1.3rem;
      background: rgba(0, 0, 0, 0.75);
      color: rgba(255, 255, 255, 1);
      flex: 0 0 50%;
      text-align: left;
      display: inline-block;
      line-height: 1.3;
      padding: 0.8rem 1rem 0.9rem;
      font-style: normal;
      font-weight: 700;
    }

    /*
 * Image Zoom
 */

    .content img.image-zoom:active {
      opacity: 0.7;
    }

    /**
 * Quick View
 */

    [data-css-preset] .quick-view {
      padding-top: 4rem /*!quick_view_padding*/;
      padding-bottom: 4rem /*!quick_view_padding*/;
      padding-left: 4rem /*!quick_view_padding*/;
      padding-right: 4rem /*!quick_view_padding*/;
      height: 100% /*!quick_view_height*/;
      width: 100% /*!quick_view_width*/;
    }

    body.mobile .quick-view {
      width: 100%;
      height: 100%;
      margin: 0;
    }

    [data-css-preset] .quick-view-background {
      background: rgba(0, 0, 0, 0.75) /*!quick_view_bgcolor*/;
    }

    .quick-view-caption {
      font-family: 'Karla', Icons;
      transition: 100ms opacity ease-in-out;
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      margin: 3.5rem 0;
      text-align: center;
      font-size: 1.2rem;
      font-style: normal;
      font-weight: 400;
      line-height: 1.3;
    }

    .quick-view-caption span {
      padding: 0.5rem 1rem;
      display: inline-block;
      background: rgba(0, 0, 0, 0.4);
      color: white;
    }

    /**
 * Quick View Navigation 
 */

    .quick-view-navigation .left-arrow {
      left: 10px;
    }

    .quick-view-navigation .right-arrow {
      right: 10px;
    }

    .quick-view-navigation .left-arrow,
    .quick-view-navigation .right-arrow {
      /* Change height/width together to scale */
      height: 36px;
      width: 36px;
    }

    .quick-view-navigation .left-arrow .inner-color,
    .quick-view-navigation .right-arrow .inner-color {
      stroke: #fff;
      stroke-width: 0px;
    }

    .quick-view-navigation .left-arrow .outer-color,
    .quick-view-navigation .right-arrow .outer-color {
      stroke: rgba(0, 0, 0, 0.85);
      stroke-width: 2px;
    }

    .quick-view-navigation .close-button {
      top: 10px;
      right: 10px;
      /* Change height/width together to scale */
      width: 36px;
      height: 36px;
    }

    .quick-view-navigation .close-button .inner-color {
      stroke: #fff;
      stroke-width: 0px;
    }

    .quick-view-navigation .close-button .outer-color {
      stroke: rgba(0, 0, 0, 0.85);
      stroke-width: 2px;
    }

    /** 
 * Image Gallery Navigation Arrows 
 */
     
    .image-gallery-navigation .left-arrow,
    .image-gallery-navigation .right-arrow {
      /* Change height/width together to scale */
      height: 36px;
      width: 36px;
    }

    .image-gallery-navigation .left-arrow .inner-color,
    .image-gallery-navigation .right-arrow .inner-color {
      stroke: #fff;
      stroke-width: 1.5px;
    }

    .image-gallery-navigation .left-arrow .outer-color,
    .image-gallery-navigation .right-arrow .outer-color {
      stroke: rgba(0, 0, 0, 0.6);
      stroke-width: 2.5px;
    }

    /**
 * Wallpaper Backdrop Navigation Arrows 
 */

    .wallpaper-navigation .left-arrow,
    .wallpaper-navigation .right-arrow {
      /* Change height/width together to scale */
      width: 36px;
      height: 36px;
    }

    .wallpaper-navigation .left-arrow .inner-color,
    .wallpaper-navigation .right-arrow .inner-color {
      stroke: #fff;
      stroke-width: 1.5px;
    }

    .wallpaper-navigation .left-arrow .outer-color,
    .wallpaper-navigation .right-arrow .outer-color {
      stroke: rgba(0, 0, 0, 0.6);
      stroke-width: 2.5px;
    }

    /**
 * Feed
 */

    .feed .content_container .page {
      border-top: 0px dashed rgba(0, 0, 0, 0.2);
    }

    .feed .content_container .page_container:first-child .page {
      border-top: 0;
    }

    /*
 * Audio Player
 */

    .audio-player {
      max-width: 36rem;
      height: 3.3rem;
      outline: 1px solid rgba(0, 0, 0, 0.15);
      color: rgba(0, 0, 0, 0.6);
      background: #fff;
      font-size: 1.3rem;
      line-height: 1.6;
      font-family: 'Karla', Icons;
      font-style: normal;
      font-weight: 400;
      text-align: left;
      margin: 1px 1px 1em 1px;
    }

    body.mobile .audio-player {
      max-width: 100%;
    }

    .audio-player .separator {
      width: 1px;
      background-color: rgba(0, 0, 0, 0.15);
    }

    .audio-player .button {
      background: transparent;
      cursor: pointer;
      fill: rgba(0, 0, 0, 0.85);
    }

    .audio-player .icon {
      fill: rgba(0, 0, 0, 0.85);
      padding: 30%;
      width: 100%;
      margin: auto;
    }

    .audio-player .buffer {
      background: rgba(0, 0, 0, 0.03);
    }

    .audio-player .progress {
      background: rgba(0, 0, 0, 0.1);
    }

    .audio-player .progress-indicator {
      border: 1px solid rgba(0, 0, 0, 0.7);
      width: 1px;
      height: 100%;
      right: 0;
      position: absolute;
      cursor: ew-resize;
    }

    .audio-player .note-icon {
      height: 100%;
      width: 3.8rem;
      padding: 1rem;
      fill: rgba(0, 0, 0, 0.5);
    }

    .audio-player .current-time {
      padding-left: 1rem;
    }

    .audio-player .total-time {
      padding-right: 1rem;
    }

    .set_thumbs_wrapper.inactive {
      display: none;
    }
@media (max-width:1024px) {
    .page_content{
	width:130%;
}
    .dot{
      margin-left: 30px;
    }
    [data-css-preset] .container_width {
      margin-left: 295px;
    }
    .header_text {
      margin-left:17px;
      margin-top: 5px;
    }
    .header_text a {
      font-size: 1.2rem;
    }
    .navigation {
      margin-left: 6px;
    }
    .navigation ul.list {
      padding-top: 180px;
    }
    [data-predefined-style='true'] h1 { 
      font-size: 1.4rem;
    }
    [data-predefined-style='true'] small {
      font-size: .8rem;
    }
    .navigation ul.list li.set_link a.set_name {
      font-size: 1rem;
    }
    .navigation ul.set_wrapper li.project_link a {
      font-size: .8rem;
    }
    .information {
      font-size: .8rem;
    }
    [data-predefined-style='true'] bodycopy {
      font-size: .8rem;
    }
    bodycopy a.icon-link{
	  font-size: .8rem;
    }
    .thumbnails{
	  margin-left: -60px;
      width: 130%;
    }
    }
@media (max-width:784px){
    .dot {
      display:none;
    }
    .navigation {
      display: none;
    }
    .header_text {
      margin-top: 0px;
      margin-left: 0px;
    }
    .header_text a {
      font-size: 1.6rem;
    }
    [data-css-preset] .container_width {
      margin-left: 0px;
    }
    .thumbnails{
	  margin: 0px;
      width: 100%;
    }
    [data-predefined-style='true'] h1 { 
      font-size: 1.6rem;
    }
    [data-predefined-style='true'] bodycopy {
      font-size: 1.4rem;
    }
    [data-predefined-style='true'] small {
      font-size: 1.2rem;
    }
    bodycopy a.icon-link{
      color: rgba(0, 0, 0, 0.25);
	  font-size: 1.2rem;
    }
    .page_content{
	width:100%;
}
    .foot{
}
    }/*@media*/