/* Rollover image/hover change image*/
    /*
      Rollover Image
     */
    .figure {
        position: relative;
        width: 460px; /* can be omitted for a regular non-lazy image */
        max-width: 100%;
    }
    .figure img.image-hover {
      position: absolute;
      top: 0;
      right: 0;
      left: 0;
      bottom: 0;
      object-fit: contain;
      opacity: 0;
      transition: opacity .2s;
    }
    .figure:hover img.image-hover {
      opacity: 1;
    }

/* end Rollover image/hover change image*/





/*custom cursor not working?*/

body[data-page-id="27158041"] {
    cursor: url("https://freight.cargo.site/t/original/i/8815b69ac3b8114b4cc84c26354bf0b8b005deaa3c61aeee6b122d2be2b7bbc7/shoes-cursor.png"), auto !important;
}

/*custom cursor end*/


body {
  margin: 0;
}
iframe {
  height:calc(80vh);
  width:calc(80vw);
  box-sizing: border-box;
}

/*RESPONSIVE IFRAME*/
.videoWrapper {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 25px;
	height: 0;
}
.videoWrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}


/*FLIP CARD*/
/* The flip card container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */
.flip-card {
  background-color: transparent;
  width: 300px;
  height: 200px;
  border: 1px solid #f1f1f1;
  perspective: 1000px; /* Remove this if you don't want the 3D effect */
}

/* This container is needed to position the front and back side */
.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

/* Position the front and back side */
.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden; /* Safari */
  backface-visibility: hidden;
}

/* Style the front side (fallback if image is missing) */
.flip-card-front {
  background-color: #bbb;
  color: black;
}

/* Style the back side */
.flip-card-back {
  background-color: dodgerblue;
  color: white;
  transform: rotateY(180deg);
}


/*END FLIP CARD*/


/*TRY */


.hover-title-2 {
    display: inline;
    pointer-events: auto;
    cursor: pointer;
}

.hover-image-2 {
    visibility: hidden;
}

body:not(.mobile) .hover-title-2:hover + .hover-image-2 {
    visibility: visible;
    pointer-events: none;
}

.hover-image-2 {
    display: flex;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 11;
    pointer-events: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;

/* Change width and height to scale images */
    width: 50vw;
    height: 50vh;
}

/* end try */



.object-and-details {
  display: inline-block;
  position: relative;
}

summary {
  color: #fff;
  background: #000;
  width: 2rem;
  height: 2rem;
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  z-index: 2;
  border-radius: 50%;
  background-image: url("https://assets.codepen.io/128034/play_circle_filled-24px.svg");
  background-size: 90% auto;
  background-repeat: no-repeat;
  background-position: center;
  background-color: white;
}

[open] summary {
  background-image: url("https://assets.codepen.io/128034/pause_circle_filled-24px.svg");
  box-shadow: 0 0 0 2px #fff;
  background-color: white;
}

/* for firefox */
details > summary:first-of-type {
  list-style: none;
}

summary + * {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 1rem;
  padding-top: 3rem;
  background: #000;
  color: #fff;
  overflow-y: auto;
}

summary + * a {
  color: #fff;
}
summary:focus {
  box-shadow: 0 0 0 0.25rem #aade87;
  outline: transparent;
}

.object-and-details1 img {
  display: inline-block;
  position: absolute;
  top: 0px;
  left: 0px;
  overflow: visible;
}


/*end trial*/



.draggable_handle {
    background: #fff;
    color: #a0ee6c;
}

[data-draggable] .draggable_handle > a {
    color:white;
    display: inline-block;
    padding: 0.0rem 0.0rem 0rem 0.0rem; 
}




.flier {
	pointer-events: none;
}

.flier > * {
/* Adjust animation duration to change the element’s speed */
        animation: fly 100s linear infinite;
        pointer-events: none !important;
	top: 0;
	left: 0;
	transform: translateX(-100%) translateY(-100%) rotateZ(0);
	position: fixed;
	animation-delay: 2s;
	z-index: 999999;
}

 /* Keyframe values control where the element will begin
    and end its trajectory across the screen. Each rule
    represents a path the element follows across the screen. */


@keyframes fly {

	98.001%, 0% {
                display: block;
		transform: translateX(-200%) translateY(100vh) rotateZ(0deg)
	}

	15% {
		transform: translateX(100vw) translateY(-100%) rotateZ(180deg)
	}

	15.001%, 18% {
		transform: translateX(100vw) translateY(-30%) rotateZ(0deg)
	}

	40% {
		transform: translateX(-200%) translateY(3vh) rotateZ(-180deg)
	}

	40.001%, 43% {
		transform: translateX(-200%) translateY(-100%) rotateZ(-180deg)
	}

	65% {
		transform: translateX(100vw) translateY(50vh) rotateZ(0deg)
	}

	65.001%, 68% {
		transform: translateX(20vw) translateY(-200%) rotateZ(180deg)
	}

	95% {
		transform: translateX(10vw) translateY(100vh) rotateZ(0deg)
	}
}




.cycle_content {
    opacity: 0;
    white-space: nowrap;
    display: inline-block;
    pointer-events: none;
}
 
.cycle_container {
    position: fixed;
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
    font-size: 1rem;
    line-height: 1 !important;
}




.hover-title {
    display: inline;
    pointer-events: auto;
    cursor: pointer;
}

.hover-image {
    visibility: hidden;
}

body:not(.mobile) .hover-title:hover + .hover-image {
    visibility: visible;
    pointer-events: none;
}

.hover-image {
    display: flex;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 11;
    pointer-events: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;

/* Change width and height to scale images */
    width: 90vw;
    height: 90vh;
}

.hover-image img {
    max-width: 100% !important;
    max-height: 100% !important;
    width: auto !important;
    height: auto !important;
    margin-bottom: 0;
}




.blink:hover {
    animation: 1s infinite blink;
    display: inline-block;
}
@keyframes blink {
    0%, 15% {
        opacity: 0;
    }
    16%, 100% {
        opacity: 1;
    }
}



.rotate {
    display: inline-block;
    -webkit-animation: rotate 50s linear infinite;
    animation: rotate 50s linear infinite;
}

@keyframes rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}



body[data-page-id="23121502"] {
    cursor: url("https://freight.cargo.site/t/original/i/92dddd858f82c3a77f4cd323534885cd4029edadc5d158c4015f8c64fd4c2881/lamp.png"), auto !important;
}


/**
 * Content
 */

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

a:active {
	opacity: 0.7;
}

.page a.active {
	color: rgba(0, 0, 0, 0.85);
}

i,
em {
	font-style: italic;
}

b,
strong {
	font-weight: bolder;
}

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 2rem;
}

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

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

.content img {
	float: none;
	margin-bottom: 0.5rem;
    vertical-align: bottom;
}

.cycle_content {
    opacity: 0;
    white-space: nowrap;
    display: inline-block;
    pointer-events: none;
}
 
.cycle_container {
    position: fixed;
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
    font-size: 1rem;
    line-height: 1 !important;
}

.gallery_image_caption {
    margin-top: .8em;
    margin-bottom: 0.5rem;
    font-size: 1.1rem;
	font-weight: 400;
	color: rgba(255, 255, 255, 1);
	font-family: "TeX Gyre Heros Condensed", Icons;
	font-style: normal;
	line-height: 1.3;
    text-align: left;
	letter-spacing: 0.02em;
}

/**
 * Loading Animation
 */

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

/**
 * Editor styles
 */

[data-predefined-style="true"] bodycopy {
	font-family: "Benton Sans Condensed", Icons;
	font-size: 1.7rem;
	line-height: 1.4;
	font-style: normal;
	font-weight: 400;
	color: rgb(0, 0, 0);
}

[data-predefined-style="true"] bodycopy a {
	color: rgba(255, 255, 255, 1);
	padding-bottom: 0.1em;
	border-bottom: 0.0em solid rgba(127, 127, 127, 0.2);
	text-decoration: none;
}

[data-predefined-style="true"] bodycopy a:hover {

}

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

[data-predefined-style="true"] h1 {
	
    font-family: Sprat, Icons;
    transform: skewY;
	font-weight: 900;
	font-style: normal;
    font-size: 4.8rem;
    font-stretch: extra-expanded;
	line-height: 1.5;
	color: rgb(0, 0, 0);
	}

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

[data-predefined-style="true"] h2 {
	font-family: "TeX Gyre Heros Condensed", Icons;
	font-style: normal;
	font-weight: 400;
	padding: 0;
	margin: 0;
	color: rgba(255, 255, 255, 1);
	font-size: 2.2rem;
	    line-height: 1.1;
    
}

[data-predefined-style="true"] h2 a {
	color: rgba(255, 255, 255, 1);
}

[data-predefined-style="true"] small {
	display: inline-block;
	font-size: 0.668rem;
	line-height: 1.3;
	font-family: "TeX Gyre Heros Condensed", Icons;
	font-style: normal;
	font-weight: 400;
	color: rgb(0, 0, 0);
    letter-spacing: 0.01em;
}

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

/**
 * Breakpoints
 */

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

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

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

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

[data-css-preset] .container_width {
	width: 100% /*!content_left*/;
}

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


[data-css-preset] text-limit {
	display: inline-block /*!text_width*/;
	max-width: 66rem/*!text_width*/;
}

/**
 * Thumbnails
 */

div[thumbnails] {
	justify-content: flex-start;
}

[data-css-preset] .thumbnails {
   	background-color: rgba(0, 0, 0, 0)/*!thumbnails_bgcolor*/;   
}

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

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

[data-css-preset] [thumbnails-gutter] {
    margin: -3.9rem/*!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 .thumb_image {
	outline: 0px solid rgba(0,0,0,.12);
    outline-offset: -1px;
}

.thumbnails .title {
    margin-top: .8rem;
    margin-bottom: .1rem;
font-family: "Benton Sans Condensed", Icons;
	font-size: 1.7rem;
	line-height: 1.4;
	font-style: normal;
	font-weight: 700;
	color: rgb(255, 255, 255);
}

.thumbnails .tags {
    margin-top: 1rem;
    margin-bottom: 0.5rem;
    font-size: 1.1rem;
	font-weight: 400;
	color: rgba(255, 255, 255, 1);
	font-family: "TeX Gyre Heros Condensed", Icons;
	font-style: normal;
	line-height: 1.3;
}

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

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

/**
 * Site Menu
 */

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

body.mobile #site_menu_button {
	margin: -6px;
	font-size: 34px;
}

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

#site_menu_button.active {
	display: none;
}

/**
 * Site Menu
 */

#site_menu {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, "Sans Serif", Icons;
	background: transparent;
	font-size: 20px;
	font-style: normal;
	font-weight: 400;
	padding: 20px 30px 90px 30px;
	max-width: 400px;
	min-width: 300px;
	text-align: left;
	display: flex;
	justify-content: flex-start;
}

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

#site_menu .page-link a {
	color: rgba(255, 255, 255, 0.75);
}

#site_menu .set-link > a {
	color: rgba(255, 255, 255, 0.75);
	font-weight: bold;
}

#site_menu a:active {
	opacity: .7;
}

#site_menu a.active {
	opacity: .4;
}

#site_menu .close {
	display: none;
	color: rgba(255, 255, 255, 0.4);
	line-height: .85em;
	font-size: 45px;
}

body.mobile #site_menu .close {
	display: block;
	font-size: 50px;
	line-height: 1em;
}

#site_menu .break {
	height: 28px;
}

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

/**
 * Shop Button
 */

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

#shop_button.text {
    font-family: "TeX Gyre Heros Condensed", Icons;
	font-size: 2rem;
    padding: 0;
	font-weight: 400;
	color: rgba(255, 255, 255, 1);
	font-style: normal;
    line-height: 1.2;
}

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

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

/**
 * Shop Product Widget
 */

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

.shop_product .price {
	font-family: "TeX Gyre Heros Condensed", Icons;
	font-size: 2.2rem;
	line-height: 1;
	color: rgba(255, 255, 255, 1);
    display: block;
    margin-bottom: 1rem;
	font-style: normal;
	font-weight: 400;
}

.shop_product .dropdown {
    font-family: "TeX Gyre Heros Condensed", Icons;
    font-size: 2.2rem;
    display: inline-block;
	width: 100%;
    border: 1px solid rgba(255, 255, 255, 0.6);
    background:  #fff url(https://static.cargo.site/assets/images/select-line-arrows.svg) no-repeat right;
    margin-bottom: 1rem;
    line-height: 1.4;
    padding: .3rem 3rem .7rem 1.2rem;
	font-style: normal;
	font-weight: 400;
}

.shop_product .button {
    font-family: "TeX Gyre Heros Condensed", Icons;
	font-size: 2.2rem;
    background: rgba(0, 0, 0, 0.7);
    color: rgba(255,255,255,1);
    flex: 0 0 50%;
    text-align: left;
    display: inline-block;
	line-height: 1.4;
    padding: .5rem 1.3rem .7rem;
	font-style: normal;
	font-weight: 400;
}

/**
 * Image Zoom
 */

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

/**
 * Quick View
 */

[data-css-preset] .quick-view {
    padding-top: 2.5rem /*!quick_view_padding*/;
    padding-bottom: 2.5rem /*!quick_view_padding*/;
    padding-left: 2.5rem /*!quick_view_padding*/;
    padding-right: 2.5rem /*!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.8) /*!quick_view_bgcolor*/;
}

.quick-view-caption {
    font-family: "TeX Gyre Heros Condensed", 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.1rem;
	font-style: normal;
	font-weight: 400;
    letter-spacing: 0.02em;
}

.quick-view-caption span {
    padding: 0.5rem 1rem;
    display: inline-block;
    background: rgba(0,0,0,0.5);
    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: 1.5px;
}

.quick-view-navigation .left-arrow .outer-color,
.quick-view-navigation .right-arrow .outer-color {
    stroke: #000;
    stroke-width: 2.5px;
    opacity: 0.6;
}

.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: 1.5px;
}

.quick-view-navigation .close-button .outer-color {
    stroke: #000;
    stroke-width: 2.5px;
    opacity: 0.6;
}

/** 
 * 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: rgba(0, 0, 0, 0.85);
    stroke-width: 1.5px;
}

.image-gallery-navigation .left-arrow .outer-color,
.image-gallery-navigation .right-arrow .outer-color {
    stroke: #000;
    stroke-width: 2.5px;
    opacity: 0;
}

/**
 * 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: #000;
    stroke-width: 2.5px;
    opacity: 0.6;
}

/**
 * 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 {
    display: flex !important;
    max-width: 100%;
    height: 4rem;
    border-top: 1px solid rgba(7, 7, 7, 1);
    color: rgba(0, 0, 0, 1);
    background: transparent;
    font-size: 1.6rem;
    line-height: 1.3;
    font-family: "TeX Gyre Heros Condensed", Icons;
    font-style: normal;
    font-weight: 400;
    text-align: left;
    margin: 0;
    padding-left: 1rem;
    text-transform: uppercase;
    width: 100% !important;
}

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

.audio-player .separator {
    width: 1px;
    background-color: transparent;
}

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

.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.10);
}

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

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

.audio-player .note-icon {
    height: 100%;
    width: 3.8rem;
    padding: 1rem;
    fill: transparent;
}

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

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

.bodycopy.preserve-3d {
	transform-style: inherit;
}
[data-draggable] {
	background-color: transparent !important;
}

.hide {
  display: none;
}

.drag-hover:hover > .hide {
  display: block;
    font-family: Sprat, Icons;
	font-weight: 400;
	font-style: normal;
    font-size: 1.4rem;
    font-stretch: extra-expanded;
	line-height: 1.1;
	color: rgb(255, 162, 0);
	}

.text-hover {
	display: block;
    max-width: 18rem;
}

.text-hover:hover > .hide {
  	display: inline-block;
    font-family: "Benton Sans Condensed", Icons;
	font-size: 1.4rem;
	line-height: 1.2;
	font-style: normal;
	font-weight: 400;
	color: rgb(255, 255, 255);
    position: fixed;
	top: 32.5rem;
	left: 21rem
	}

.tab {
  float: left;
  width: 15rem;
}

/* Style the buttons that are used to open the tab content */
.tab button {
  display: block;
  background: transparent;
  color: white;
    font-weight: 900;
	font-style: normal;
    font-size: 1.8rem;
  padding: 4px 1px;
  width: 110%;
  border: none;
  outline: none;
  text-align: e;
  cursor: pointer;
  transition: 0.3s;
}


/* Create an active/current "tab button" class */
.tab button.active {
  color: black;
}

/* Style the tab content */
.tabcontent {
  	display: block;
    font-family: "Benton Sans Condensed", Icons;
	font-size: 1.7rem;
	line-height: 1.6;
    margin-left: 5%;
	font-style: normal;
	font-weight: 400;
	color: rgb(255, 255, 255);
      float: left;
  padding: 0px 0px;
     width: 80%;
  border-left: none;
  height: 650px;
}

/* Style The Dropdown Button */
.dropbtn {
  background-color: #ffa200;
  color: white;
  padding: 10px;
  font-size: 1.2rem;
  border: none;
  cursor: pointer;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
  position: relative;
  display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: none;
  position: absolute;
    right:0%;
  background-color: #ffa200;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
    font-family: Sprat, Icons;
    transform: skewY(-4deg);
	font-weight: 900;
	font-style: normal;
    font-size: 2.5rem;
    font-stretch: extra-expanded;
	line-height: 1.5;
}

/* Links inside the dropdown */
.dropdown-content a {
    color: #1d45c8;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #b20717}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
  display: block;
}




.draggable_handle {
   text-align: center;
    font-size: 1.5rem;
    line-height: 2.5;
    color: black;
}

.flier {
	pointer-events: none;
}

.flier > * {
/* Adjust animation duration to change the element’s speed */
        animation: fly 50s linear infinite;
        pointer-events: none !important;
	top: 0;
	left: 0;
	transform: translateX(-120%) translateY(-120%) rotateZ(0);
	position: fixed;
	animation-delay: 1.5s;
	z-index: 999999;
}

 /* Keyframe values control where the element will begin
    and end its trajectory across the screen. Each rule
    represents a path the element follows across the screen. */


@keyframes fly {

	98.001%, 0% {
                display: block;
		transform: translateX(-200%) translateY(100vh) rotateZ(5deg)
	}

	15% {
		transform: translateX(100vw) translateY(-100%) rotateZ(87deg)
	}

	15.001%, 18% {
		transform: translateX(100vw) translateY(-30%) rotateZ(12deg)
	}

	40% {
		transform: translateX(-200%) translateY(3vh) rotateZ(-53deg)
	}

	40.001%, 43% {
		transform: translateX(-200%) translateY(-100%) rotateZ(22deg)
	}

	65% {
		transform: translateX(100vw) translateY(50vh) rotateZ(11deg)
	}

    	65.001%, 68% {
		transform: translateX(20vw) translateY(-200%) rotateZ(-30deg)
	}
    
	95% {
		transform: translateX(10vw) translateY(100vh) rotateZ(65deg)
	}

}

.flier2 {
	pointer-events: none;
}

.flier2 > * {
/* Adjust animation duration to change the element’s speed */
        animation: fly2 50s linear infinite;
        pointer-events: none !important;
	top: 0;
	left: 0;
	transform: translateX(-120%) translateY(-120%) rotateZ(0);
	position: fixed;
	animation-delay: 2s;
	z-index: 999999;
}

 /* Keyframe values control where the element will begin
    and end its trajectory across the screen. Each rule
    represents a path the element follows across the screen. */


@keyframes fly2 {

	98.001%, 0% {
                display: block;
		transform: translateX(-200%) translateY(100vh) rotateZ(33deg)
	}

	35% {
		transform: translateX(20vw) translateY(100vh) rotateZ(-71deg)
	}

	15.001%, 18% {
		transform: translateX(100vw) translateY(-30%) rotateZ(11deg)
	}

	40% {
		transform: translateX(-200%) translateY(3vh) rotateZ(69deg)
	}

	40.001%, 43% {
		transform: translateX(-200%) translateY(-100%) rotateZ(-25deg)
	}


	65.001%, 68% {
		transform: translateX(20vw) translateY(-200%) rotateZ(5deg)
	}

	95% {
		transform: translateX(10vw) translateY(100vh) rotateZ(88deg)
	}
}

.flier3 {
	pointer-events: none;
}

.flier3 > * {
/* Adjust animation duration to change the element’s speed */
        animation: fly3 50s linear infinite;
        pointer-events: none !important;
	top: 0;
	left: 0;
	transform: translateX(-120%) translateY(-120%) rotateZ(0);
	position: fixed;
	animation-delay: 1s;
	z-index: 999999;
}

 /* Keyframe values control where the element will begin
    and end its trajectory across the screen. Each rule
    represents a path the element follows across the screen. */


@keyframes fly3 {

	98.001%, 0% {
                display: block;
		transform: translateX(100vw) translateY(-30%) rotateZ(12deg)
	}

	15% {
		transform: translateX(100vw) translateY(-100%) rotateZ(70deg)
	}

	15.001%, 18% {
		transform: translateX(-200%) translateY(100vh) rotateZ(-25deg)
	}

	40% {
		transform: translateX(100vw) translateY(50vh) rotateZ(45deg)
	}

	40.001%, 43% {
		transform: translateX(-200%) translateY(-100%) rotateZ(110deg)
	}

	65% {
		transform: translateX(-200%) translateY(3vh) rotateZ(-34deg)
	}

	65.001%, 68% {
		transform: translateX(20vw) translateY(-200%) rotateZ(170deg)
	}

	95% {
		transform: translateX(10vw) translateY(100vh) rotateZ(0deg)
	}
}

.bounce {
  position: absolute;
  bottom: 30px;
  left: 50%;
  margin-left: -16px;
  display: block;
  width: 32px;
  height: 32px;
  
  z-index: 2;
  -webkit-animation: bounce 2s infinite 2s;
  animation: bounce 2s infinite 2s;
  -webkit-transition: all .2s ease-in;
  transition: all .2s ease-in;
}

@keyframes bounce {
  0%,
  100%,
  20%,
  50%,
  80% {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
  40% {
    -webkit-transform: translateY(-10px);
    -ms-transform: translateY(-10px);
    transform: translateY(-10px);
  }
  60% {
    -webkit-transform: translateY(-5px);
    -ms-transform: translateY(-5px);
    transform: translateY(-5px);
  }
}

.bounce2 {
  position: absolute;
  bottom: 30px;
  left: 50%;
  margin-left: -16px;
  display: block;
  width: 32px;
  height: 32px;
  
  z-index: 2;
  -webkit-animation: bounce2 8s infinite 8s;
  animation: bounce2 8s infinite 8s;
  -webkit-transition: all .2s ease-in;
  transition: all .2s ease-in;
}

@keyframes bounce2 {
  0%,
  100%,
  20%,
  50%,
  80% {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
  40% {
    -webkit-transform: translateY(-10px);
    -ms-transform: translateY(-10px);
    transform: translateY(-10px);
  }
  60% {
    -webkit-transform: translateY(-5px);
    -ms-transform: translateY(-5px);
    transform: translateY(-5px);
  }
}

#menuDIV
{
	display: none;
}

.rotate {
    display: inline-block;
    -webkit-animation: rotate 4s linear infinite;
    animation: rotate 4s linear infinite;
}

@keyframes rotate {
    0% {
        transform: rotate(-20deg);
    }
    40% {
        transform: rotate(30deg);
    }
    to {
        transform: rotate(-20deg);
    }
}

.rotate2 {
    display: inline-block;
    -webkit-animation: rotate2 15s linear infinite;
    animation: rotate2 15s linear infinite;
}

@keyframes rotate2 {
       0% {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.rotate3 {
    display: inline-block;
    -webkit-animation: rotate3 4s linear infinite;
    animation: rotate3 4s linear infinite;
}

@keyframes rotate3 {
    0% {
        transform: rotate(40deg);
    }
    70% {
        transform: rotate(-25deg);
    }
    to {
        transform: rotate(40deg);
    }
}