/*** Content */

.scrollable {
height:300px;border-left:1px solid #ccc;
    overflow:auto;padding-left:20px;
}

.tinyspace {
	height:1.5rem; width:100%;
}

a:active {
}

.page a.active { 	text-decoration:underline;

}

i,
em {border-bottom:1px solid black; 
    margin-bottom:5px!important;
	font-style: normal!important;font-size:90px;
}

b,
strong {
background-color:rgba(228, 228, 228, 1);
padding:0px  5px 0px 5px;
}

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

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

.hover-image {
    display: none;
}

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

.hover-image {
    position: fixed;
    top:0%;
    left: 0%;
    z-index: -10;
    pointer-events: none;
    flex-direction: column;
/* Change width and height to scale images */
    width: 100vw;
    height: auto;
}

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

ul,
ol {
	margin:0px; 
	padding: 0 0 0  0.7rem;
}


ul {

}

li {
  padding-left:0em;
  text-indent: -0em;
}

li:before {
  content: "";
  padding-right: 0px;
}


blockquote {margin:0rem;
margin-left:0px;
padding-left:1rem;

}

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

.content img { 
    height:auto!important;
	float: none;
	margin-bottom: 0rem;
    vertical-align: bottom;
}

.no-shadow img {
    box-shadow: none !important;
}


.gallery_card:hover > .gallery_image_caption { 
    display:block; }

.library .gallery_image_caption {
	 z-index:99999;}

.gallery_image_caption {
margin-top:0px; display:block;font-size:1.3rem!important;text-align:left}

/**
 * Loading Animation
 */

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

/*** Editor styles */

[data-predefined-style="true"] *, bodycopy {
	font-size: 1.1rem;
	color: rgba(0, 0, 0, 1);
	font-family: "Helvetica Neue", Helvetica, sans-serif, "Helvetica Neue Regular", Icons;
	line-height:1.2;
	font-style: normal;
	font-weight: normal;
}

[data-predefined-style="true"] * a, bodycopy a {
	text-decoration:none;
	
}

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 {margin:0px;
}

[data-predefined-style="true"]  h1 a{
}

[data-predefined-style="true"] h2 {
}

[data-predefined-style="true"] h2 a {}


[data-predefined-style="true"] small {
}

[data-predefined-style="true"] small a {}

/**
 * Breakpoints
 */

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

.mobile .page,
[data-css-preset].mobile .page {
	position: relative;
	min-height: 10px;
	max-width: 100%;
	width: 100%;
}

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

[data-css-preset] body {
	background-color: rgb(255, 255, 255) /*!body_bgcolor*/;
}

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

[data-css-preset] .content_padding { 
	padding-top: 3rem /*!main_margin*/;
	padding-bottom: 3rem /*!main_margin*/;
	padding-left: 3rem /*!main_margin*/;
	padding-right: 3rem /*!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: 80%/*!thumbnails_width*/;
}

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

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

.thumbnails .title {
    margin-top: .2rem;
    margin-bottom: .2rem;
}

.thumbnails .tags {
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.thumbnails .tags a {}

.thumbnails .has_title .tags {}

/*** Site Menu */

[data-css-preset] #site_menu_button {
	color: rgba(0, 0, 0, 0.85);
	line-height: 1;
	padding: 6px;
	line-height: 1;
	background: rgba(33, 32, 46, 0);
	position: fixed;
	font-size: 28px /*!site_menu_button*/;
	left: 3rem /*!site_menu_button*/;
	top: 3rem /*!site_menu_button*/;
}

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

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

#site_menu_button.active {
	display: none;
}

#site_menu {
	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);
}

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

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

#site_menu .close {
	display: none;
	line-height: .85em;
}

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

#site_menu .break {
	height: 28px;
}

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

/*** Shop Button */

[data-css-preset] #shop_button { 
	font-family: 'Nitti Grotesk', Social;
    background: transparent;
    z-index:3!important;
	bottom: 8rem /*!shop_button*/;
    position:fixed;
	right: 4rem /*!shop_button*/;
    display:none;
}

#shop_button.text {}

#shop_button.custom_icon {
	
}

body.mobile #shop_button:not(.text) {

}

/*** Shop Product Widget */

.dropdownheader .dropbtn {
  font-size: 16px;  
  border: none;
  outline: none;
  color: black;
  padding: 0;
  cursor: pointer;
 
}

.dropdownheader-content {
  display: none;
  position: absolute;
    
}

.dropdownheader-content a {
  float: none;
  color: black;
  padding:0;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdownheader-content a:hover {
  border-bottom: 1px solid;
      text-align: left;

}

.dropdownheader:hover .dropdownheader-content {
  display: block;
}

 .dropdownheader {  
    float:left;
    width: 35%;
    background-image: url("https://freight.cargo.site/t/original/i/b3ecde5984376d63b47cc29b905e5995386e1ef1e8661b0a0b6042fe478dbfe8/chevron-down-mini-512.png")!important;
    background-position: right; /* Center the image */
    background-repeat: no-repeat; /* Do not repeat the image */
    background-size: contain; /* Resize the background image to cover the entire container */
	font-weight: 400;
}


.shop_product { margin-left:10px; background-color: #eee!important;}



.dropdown:after {
	content: '<ki>';
  font: 17px "Consolas", monospace;
  color: #333;
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
  right: 11px;
  position: absolute;
  pointer-events: none;
}

 .dropdown {border: 0px; margin-right:10px;}

.shop_product ,  .dropdown .button .price 
{padding:5px!important;}


/*** Image Zoom */

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

/**
 * Quick View
 */

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

.quick-view-caption {
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif;
    transition: 100ms opacity ease-in-out;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 2rem 0;
    text-align: center;
    font-size: 1.8rem;
}

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

/*** Image Zoom Navigation Arrows */

.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, .slick-slider
.image-gallery-navigation .right-arrow {
    /* Change height/width together to scale */
}

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

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

/*** 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 {
    max-width: 26rem;
    height: 3.3rem;
    outline: 1px solid rgba(0,0,0,0.15);
    color: rgba(0, 0, 0, 0.6);
    background: transparent;
    line-height: 1.3;
    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);
}

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

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

.draggable_element {
	cursor: move;
}

/*** custom */
.topright {
    z-index:9; 
    position:fixed;
    right:0px;
    top:4px; 
	margin: 4rem /*!main_margin*/;
	text-align:right;}

.samt{ font-size:17px; 
    cursor: pointer;  word-spacing: 10px;

}

.samt::after {
  	content: "?  ص مت";
	transition-duration: 0.2s;
}
.close::after {
  	content: "x  ص مت";
	transition-duration: 0.2s;
}

.about { 
    z-index:8;
	width:35%;
    position:fixed;
    left:-35%;
    overflow: scroll;
    padding: 4rem /*!main_margin*/;
    background-color:rgba(255, 255, 255, 1);
    height:100%;
	transition-duration: 0.2s;
}

.abouton {
    left:0%;
	transition-duration: 0.2s;
}

.page_container{

	margin-left:0%;
	transition-duration: 0.2s;
}

.page_container_off {
	margin-left:15%;
	transition-duration: 0.2s;
}


.library img {
	border-bottom:1px solid #eee!important;
    border-left:10px solid #eee!important;
	border-right:1px solid #eee!important;
	border-top:1px solid #eee!important;
}


.play {cursor: pointer;}
.videocontrols {margin-top:10px;}
.videocontrols span {margin-right:30px;}
video {width:100%!important;}

.space {width:100%;height:10vw;background:rgba(0, 0, 255, 0);}
.header-space {width:100%;height:5vw;background:rgba(0, 0, 255, 0);}
.prog {height:50px;position:relative; }
.progress-container {float:right;height:40px;border-left:1px solid rgba(120, 120, 120, 0.15); position:absolute; top:30%; right:0px; display:none;}
.progress-bar {max-height:40px;height:0px;margin-left:-1px;border-left:1px solid rgba(98, 98, 98, 0.82);}

.hide {
	display:none;
}

.shadow1 {
	background-color: rgb(255, 255, 255); /* Needed for IEs */
	-moz-box-shadow: 3px 3px 3px rgba(220, 220, 220, 0.6);
	-webkit-box-shadow: 3px 3px 3px rgba(234, 234, 234, 0.6);
	box-shadow: 3px 3px 3px rgba(241, 241, 241, 0.6);

	filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=3,MakeShadow=true,ShadowOpacity=0.30);
	-ms-filter: "progid:DXImageTransform.Microsoft.Blur(PixelRadius=3,MakeShadow=true,ShadowOpacity=0.30)";
	zoom: 1;
}
.shadow1  {
	position: relative; /* This protects the inner element from being blurred */
	padding: 1px;
	background-color: #DDD;
}

.header-text {
	text-decoration:none;
}

.controls {
	display:none; 
    position:fixed;
    right:21rem;
    top:4.1rem;
    cursor:pointer;
    
}

.bgcontrol {
	background-color:black!important;
}
.fontcontrol{
    color:white !important;
}

.material-icons {
	font-size:0.9rem!important;
}

.box {
	height:30rem; overflow-y: auto;
}


.floating { 
    animation-name: floating;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    margin-left: -8px;
    margin-top: -10px;
width:100%!important;
}
 
@keyframes floating {
    0% { transform: translate(0,  0px); }
    50%  { transform: translate(0, 15px); }
    100%   { transform: translate(0, -0px); }   
}


.apply {border-bottom:1px solid;
    font-size:1.6rem;}

.nest  { margin:10px!important;
	line-height: 9px!important;
}