/** {border: 1px solid red;}*/

body {
	background-color: #f7f7f7;
    font-family: 'Alinma TheSans' /*'Cairo', sans-serif;*/
    /*font-family: 'Cairo', sans-serif;*/
}

.primary-bg-gradient {
    background-image: linear-gradient(87deg, #01618e 0, #1a174d 100%) !important;
}
.primary-bg {
    background-image: linear-gradient(-45deg, #0a4194 0, #0a4194 100%) !important;
     /*background-image: linear-gradient(-45deg, #01618e 0, #045886 100%) !important;*/
}

/*----- Font Size ----*/

.xx-small {
	font-size: xx-small;
}
.x-small {
	font-size: x-small;
}
.small {
	font-size: small;
}
.medium {
	font-size: medium;
}
.large {
	font-size: large;
}
.x-large {
	font-size: x-large;
}
.xx-large {
	font-size: xx-large;
}

a {
  color: #000;
}

a:link {
  text-decoration: none;
}

a:visited {
  text-decoration: none;
}

a:hover {
  text-decoration: none;
}

a:active {
  text-decoration: none;
}


/*----- Index Header bg ----*/

.index-header-bg {
    min-height: 570px;
    position: relative;
    background: url(http://spacialtheme.herokuapp.com/3.0/images/unsplash/photo-1479243396208-be1751535cdb.jpg);
        background-position-x: 0%;
        background-position-y: 0%;
        background-size: auto;
    background-size: cover;
    background-position: center center;
}


/*----- form-check-switch ----*/

.form-check-switch {
  display: inline-block;
  width: 44px;
  height: 24px;
  position: relative;
  .form-check-input {
	display: none;
	&:checked + .form-check-label:after {
	  left: 50%;
	}
  }
  .form-check-label {
	border-radius: 12px;
	position: absolute;
	white-space:nowrap;
	font-size: 0;
	top:0;
	bottom:0;
	left:0;
	right:0;
	margin:0;
	padding:0;
	background: #ccc;
	transition: all .3s ease;
	&:after {
	  background: #fff;
	  border-radius: 50%;
	  content: "";
	  top: 2px;
	  left: 2px;
	  width: 20px;
	  height: 20px;
	  position: absolute;
	  transition: all .3s ease;
	}
  }
}

.form-check-primary {
  .form-check-input {
	&:checked + .form-check-label{
	  background: #007bff;
	}
  }
}
.form-check-secondary {
  .form-check-input {
	&:checked + .form-check-label{
	  background: #6c757d;
	}
  }
}
.form-check-success {
  .form-check-input {
	&:checked + .form-check-label{
	  background: #28a745;
	}
  }
}
.form-check-info {
  .form-check-input {
	&:checked + .form-check-label{
	  background: #17a2b8;
	}
  }
}
.form-check-warning {
  .form-check-input {
	&:checked + .form-check-label{
	  background: #ffc107;
	}
  }
}
.form-check-danger {
  .form-check-input {
	&:checked + .form-check-label{
	  background: #dc3545;
	}
  }
}


/*----- profile-tab ----*/

.profile-tab li a.nav-link.active,
.customtab li a.nav-link.active {
	border-bottom: 2px solid #1e88e5;
	color: #1e88e5;
}

.profile-tab li a.nav-link:hover,
.customtab li a.nav-link:hover {
	color: #1e88e5;
}

.profile-tab li a.nav-link,
.customtab li a.nav-link {
	border: 0px;
	padding: 15px 20px;
	color: #67757c;
}

.profile-tab li a.nav-link.active,
.customtab li a.nav-link.active {
	border-bottom: 2px solid #009efb;
	color: #009efb;
}

.profile-tab li a.nav-link:hover,
.customtab li a.nav-link:hover {
	color: #009efb;
}



.es-mh-200 {
	min-height: 200px;
}


/*----- like-button ----*/

/* Like Button */
.like-button {
	outline: none;
	border: none;
	color: #444;
	font-weight: 600;
	font-size: 14px;
	background-color: #fff;
	border: 1px solid #e0e0e0;
	border-radius: 50px;
	padding: 10px 25px;
	line-height: 24px;
	margin-bottom: 9px;
	transition: 0.3s;
	cursor: pointer;
}

.like-button:hover {
	background-color: #fafafa;
	border: 1px solid #ddd;
}

.listing-share .like-icon::before,
.listing-share .like-icon::after {
	top: 0;
}


/*----- .read-more ----*/

a.read-more {
	color: #66676b;
	margin: 23px 0 2px 0;
	display: inline-block;
}

a.read-more i {
	font-size: 20px;
	position: relative;
	padding-left: 4px;
	top: 1px;
	transition: 0.2s;
}

 a.read-more:hover i {
	padding-left: 7px;
}


/*----- badge ----*/

.badge {
    line-height: 1.1;
}

.es-badge-top {
	position: absolute !important;
	top: 0px !important;
	right: 0px !important;
}



/*----- tag ----*/

.es-tagtop-coupon {
	position: absolute;
	top: 16px;
	/*left: 0;*/
	padding: 20px 10px;
	margin: 0px 0px 0px 40px;
	background-color:
		#000;
		opacity: 0.3;
		border-radius: 0px 0px 50px 50px;
		box-sizing: border-box;
	}



/*----- sticky ----*/

.content {
  padding: 16px;
}

.sticky {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 9999;
}

.sticky + .content {
  padding-top: 102px;
}



/*----- dropdown-menu ----*/

.card-product .img-wrap {
    border-radius: 3px 3px 0 0;
    overflow: hidden;
    position: relative;
    /*height: 180px;*/
    text-align: center;
}
.card-product .img-wrap img {
    max-height: 100%;
    max-width: 100%;
    object-fit: cover;
}
.card-product .info-wrap {
    overflow: hidden;
    padding: 15px;
    border-top: 1px solid #eee;
}
.card-product .bottom-wrap {
    padding: 15px;
    /*border-top: 1px solid #eee;*/
}

.label-rating { margin-right:10px;
    color: #333;
    display: inline-block;
    vertical-align: middle;
}

.card-product .price-old {
    color: #999;
}





/*----- dropdown-menu ----*/

.dropdown-menu.show {
    display: block;
    margin: 5px 0 0 0 !important;
    box-shadow: 0px 1px 5px 
    rgba(39, 55, 76, 0.1)  !important;
}

/*----- navigation-box ----*/

.navigation-box {
    top: .4rem;
    right: .8rem;
    width: 2rem;
    position: absolute;
}
@media (min-width: 768px){
    .breaking-caret:after {
        content: "";
        width: 0;
        height: 0;
        border-top: 20px solid transparent;
        border-left: 15px solid #007bff;
        border-bottom: 20px solid transparent;
        position: absolute;
        right: -15px;
        top: 0;
    }
}


.page-footer {
	background-color: #2463a0;
	color: #fff;
}

.page-footer a {
	color: #fff;
}

.page-footer hr {
    margin-top: 1rem;
    margin-bottom: 1rem;
    border: 0;
        border-top-color: currentcolor;
        border-top-style: none;
        border-top-width: 0px;
    border-top: 1px solid rgba(255, 255, 255, 0.59);
	width: 60px;
	
}



/* Main Search Input */
.main-search-input {
	margin-top: 50px;
	border-radius: 50px;
	width: 100%;
	background-color: #fff;
	box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.12);
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	padding: 9px;
	max-height: 68px;
}

.main-search-input-item {
	flex: 1;
	border-left: 1px solid #e9e9e9;
	margin-top: 3px;
	position: relative;
	padding-right: 30px;
	padding-left: 30px;
}

.main-search-input  .main-search-input-item:nth-last-child(2) {
	border-left: none;
	padding-right: 15px;
	padding-left: 15px;
}

.main-search-input-item.location a {
	position: absolute;
	left: 20px;
	top: 50%;
	transform: translateY(-50%);
	color: #999;
	padding: 10px;
	background: #fff;
}

.main-search-input-item.location a:hover { color: #66676b; }

.main-search-input input,
.main-search-input input:focus {
	font-size: 16px;
	border: none;
	background: #fff;
	margin: 0;
	padding: 0;
	height: 44px;
	line-height: 44px;
    box-shadow: none;
}

.main-search-input button.button {
	font-size: 18px;
	font-weight: 600;
	padding: 0 40px;
	margin-left: 1px;
	height: 50px;
	outline: none;
}






@media (max-width: 767px) {
	
.profile-tab li a.nav-link,
.customtab li a.nav-link {
	border: 0px;
	padding: 10px 15px;
	color: #67757c;
}
	
}

.fullscreen {
    width:100%;
    height:100%;
    overflow:hidden;
    -webkit-box-align:center!important;
    -ms-flex-align:center!important;
    align-items:center!important;
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -ms-flex-wrap:wrap;
    flex-wrap:wrap;
    min-height:100vh
}
.fullscreen .container,
.fullscreen .container-wide {
    -ms-flex-preferred-size:0;
    flex-basis:0;
    -webkit-box-flex:1;
    -ms-flex-positive:1;
    flex-grow:1;
}
.fullscreen .container-fullscreen {
    width:100%
}





























.es-card-1 {
  position: relative;
  display: flex;
  flex-direction: column;
  /*width: 500px;*/
  background: white;
  color: currentColor;
  text-decoration: none;
  overflow: hidden;
  transition-property: color;
  transition-delay: 0.15s;
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
}
.es-card-1.hover {
  color: white;
  transition-delay: 0;
  
}
.es-card-1, .card__image, .card__image::after, .card__author, .card__body, .card__foot, .card__border {
  transition-duration: 0.4s;
  transition-timing-function: cubic-bezier(0.51, 0.92, 0.24, 1);
}
.card__head {
  position: relative;
  padding-top: 70%;
}
.card__author {
  position: absolute;
  padding: 1em 1em;
  right: 0;
  bottom: 0;
  color: white;
  transition-property: -webkit-transform;
  transition-property: transform;
  transition-property: transform, -webkit-transform;
  transition-delay: 0.15s;
}
.es-card-1.hover .card__author {
  transition-delay: 0;
}
.card__image {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-size: cover;
  background-position: center;
  -webkit-transform-origin: top center;
          transform-origin: top center;
  transition-property: -webkit-transform;
  transition-property: transform;
  transition-property: transform, -webkit-transform;
  transition-delay: 0.15s;
}
.card__image::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: .5;
  background: linear-gradient(30deg, rgba(26, 42, 99, 0.85), rgba(26, 42, 99, 0.5));
  transition-property: opacity;
  transition-delay: 0.15s;
}
.es-card-1.hover .card__image {
  transition-delay: 0;
}
.es-card-1.hover .card__image::after {
  opacity: 1;
  transition-delay: 0;
}
.card__body {
  position: relative;
  padding: 2em 1.5em;
  transition-property: -webkit-transform;
  transition-property: transform;
  transition-property: transform, -webkit-transform;
  transition-delay: 0.15s;
}
.es-card-1.hover .card__body {
  transition-delay: 0;

}
.card__headline {
  font-weight: 400;
  margin: 0 0 .8em;
  
}
.card__text {
  line-height: 1.5;
  margin: 0;
  opacity: .8;
  
   
}
.card__foot {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0 2em 2em;
  opacity: 0;
  transition-property: opacity;
}
.es-card-1.hover .card__foot {
  opacity: 1;
  transition-delay: 0.15s;
}
.card__link {
  color: currentColor;
  text-decoration: none;
  border-bottom: 2px solid #009efb;
}
.card__border {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 6px;
  background: #009efb;
  -webkit-transform: scaleY(0);
          transform: scaleY(0);
  transition-property: -webkit-transform;
  transition-property: transform;
  transition-property: transform, -webkit-transform;
}
.es-card-1.hover .card__border {
  -webkit-transform: none;
          transform: none;
  transition-delay: 0.15s;
}

.author {
  display: flex;
  align-items: center;
}
.author__image {
  flex-shrink: 0;
  margin-right: 1em 0em;
  width: 40px;
  height: 40px;
  border-radius: 100%;
  overflow: hidden;
}
.author__content {
  display: grid;
  grid-gap: 0em;
  font-size: .9em;
}
.author__header {
  margin: 0;
  font-weight: 600;
}
.author__subheader {
  margin: 0;
  opacity: .8;
}





/* Button styles: */
i.fb,       span.fb{         color: #3b5998; }
i.tw,       span.tw{     	color: #00aced; }
i.google,   span.google{ 	color: #dd4b39; }
i.linkin,   span.linkin{ 	color: #007bb6; }
i.pinterest,span.pinterest{ color: #cb2027; }






/*------- kt-sticky-toolbar --------*/

.es-sticky-toolbar {
 width:46px;
 position:fixed;
 top:50%;
 left:0;
 list-style:none;
 padding:5px 0;
 margin:0;
 z-index:50;
 background:#fff;
 display:-webkit-box;
 display:-ms-flexbox;
 display:flex;
 -webkit-box-pack:center;
 -ms-flex-pack:center;
 justify-content:center;
 -webkit-box-align:center;
 -ms-flex-align:center;
 align-items:center;
 -webkit-box-orient:vertical;
 -webkit-box-direction:normal;
 -ms-flex-direction:column;
 flex-direction:column;
 border-radius:3px 0 0 3px
}
.es-sticky-toolbar .es-sticky-toolbar_item {
 margin:0;
 padding:5px;
 text-align:center
}
.es-sticky-toolbar .es-sticky-toolbar_item>a {
 background:#f4f4f8;
 display:-webkit-box;
 display:-ms-flexbox;
 display:flex;
 -webkit-box-pack:center;
 -ms-flex-pack:center;
 justify-content:center;
 -webkit-box-align:center;
 -ms-flex-align:center;
 align-items:center;
 width:30px;
 height:30px;
 border-radius:3px;
 -webkit-transition:background .3s ease;
 transition:background .3s ease
}
.es-sticky-toolbar .es-sticky-toolbar_item>a>i {
 -webkit-transition:color .3s ease;
 transition:color .3s ease;
 font-size:1.3rem
}
.es-sticky-toolbar .es-sticky-toolbar_item>a:hover {
 -webkit-transition:background .3s ease;
 transition:background .3s ease
}
.es-sticky-toolbar .es-sticky-toolbar_item>a:hover>i {
 -webkit-transition:color .3s ease;
 transition:color .3s ease
}

.es-color-brand>a>i {
 color:#5d78ff;
}
.es-color-brand:hover>a {
 background:#5d78ff
}
.es-color-brand:hover>a>i {
 color:#fff
}
.es-color-light>a>i {
 color:#fff
}
.es-color-light:hover>a {
 background:#fff
}
.es-color-light:hover>a>i {
 color:#282a3c
}
.es-color-dark>a>i {
 color:#282a3c
}
.es-color-dark:hover>a {
 background:#282a3c
}
.es-color-dark:hover>a>i {
 color:#fff
}
.es-color-primary>a>i {
 color:#5867dd
}
.es-color-primary:hover>a {
 background:#5867dd
}
.es-color-primary:hover>a>i {
 color:#fff
}
.es-color-success>a>i {
 color:#0abb87;
}
.es-color-success:hover>a {
 background:#0abb87
}
.es-color-success:hover>a>i {
 color:#fff
}
.es-color-info>a>i {
 color:#5578eb
}
.es-color-info:hover>a {
 background:#5578eb
}
.es-color-info:hover>a>i {
 color:#fff
}
.es-color-warning>a>i {
 color:#ffb822;
}
.es-color-warning:hover>a {
 background:#ffb822
}
.es-color-warning:hover>a>i {
 color:#111
}
.es-color-danger>a>i {
 color:#fd397a;
}
.es-color-danger:hover>a {
 background:#fd397a
}
.es-color-danger:hover>a>i {
 color:#fff
}





/* item box */



.es-item-box img {
  width: 100%;
}
.es-item-box {
  position: relative;
}
.es-item-hover {
  background-color: #2229;
  color: #fff;
  position: absolute;
  bottom: -111px;
  left: 0;
  width: 100%;
  padding: 10px;
  text-align: center;
  -webkit-transition: .4s;
  transition:.4s
}
.es-item-hover h4 {
  font-size: 20px;
  text-transform: capitalize;
}
.es-item-hover h4 span {
  display: block;
  font-size: 14px;
  font-weight: 300;
  margin: 10px 0;
}
.es-item-hover a {
  display: inline-block;
  color: #fff;
  padding: 0 5px;
}
.es-item-box:hover .es-item-hover {
  bottom: 0;
}
.es-item-box:focus .es-item-hover {
  bottom: 0;
}
.es-item-box {
  overflow: hidden;
}


.dropdown-menu {
    left: auto !important;
    float: inherit;
}
    body {line-height: inherit;}

    
    .box-hover {
		transition: all .3s;
        border: 1px solid rgba(0, 0, 0, 0.06)
	}
	.box-hover:hover {
		background-color: #fdfdfd;
		border: 0px;
		border: 1px solid #2cabe2;
	}
		.box-hover:focus {
		background-color: #fdfdfd;
		border: 0px;
		border: 1px solid #2cabe2;
	}
	.box-hover img:hover {
		opacity: 0.8;
	}
	
	.border-bottom-light {
	border-bottom: 1px solid rgba(0, 0, 0, 0.06);
	}

.Payment-methods-icon  {height: 30px; width:auto;}

@media (width: 320px) {
	.Payment-methods-icon  {height: 30px; width:auto; }
}





.card_mockup {
    width: 100%;
    background: #151f57;
    position: relative;
    display: inline-block;
    margin: 1%;
    vertical-align: top;
    box-shadow: 0 0 4px rgba(0,0,0,.3);
    border-radius: 15px;
    background-image: url(../img/bg-card-mockup.png);
    background-position: right bottom;
    background-size: cover;
    background-repeat: repeat;
}
.card_mockup:before {
    content: '';
    display: block;
}

.titel-card_mockup {
    position: absolute;
    top: 15px;
    left: 30px;
    color: #fff;
    font-size: 20px;
    font-family: 'Alinma TheSans';
}

.card-ratio:before {
  padding-top: 65%;
}
 
 
    
.es-tagtop-coupon {
    position: absolute;
    top: 0px;
    right: 0;
    padding: 20px 10px;
    margin: 0px 30px 0px 0px;
    background-color: #ccc;
    opacity: 0.8;
    border-radius: 0px 0px 50px 50px;
    box-sizing: border-box;
    color: #151f57;
}
   
@media only screen and (min-width: 736px) {
.card_mockup {
    width: 400px;
}
    
}

.delivery-active {
    color: #212529;
    background-color: #ffc107;
    border-color: #ffc107;
}

.delivery-inactive {
    color: #ffc107;
    border-color: #ffc107;
}

.quantity input {
  -webkit-appearance: none;
  border: none;
  text-align: center;
  width: 32px;
  font-size: 16px;
  color: #43484D;
  font-weight: 300;
}
 
.quantity-button {
  width: 30px;
  height: 30px;
  background-color: #E1E8EE;
  border-radius: 6px;
  border: none;
  cursor: pointer;
}


.top-0 {top: 0 !important;}
.bottom-0 {bottom: 0 !important;}
.left-0 {left: 0 !important;}
.right-0 {right: 0 !important;}

.header-logo {
    height: 25px;
    width: auto;
}

.header-top {
	 /*border-bottom: 1px solid #e7e7e7;*/
	 padding: 1px 0;
	 background-color: #fff;
	 color: #67757c !important;
}

/* ratio-4-3 */
    .ratio-4-3{
      width:100%;
      position:relative;
      background:url() 50% 50% no-repeat;
      background-size:cover;
      background-clip:content-box;
    }
    .ratio-4-3:before{
    	display:block;
        content:"";
        padding-top: 75%; /*75%;*/
    }
/* ratio-4-3 */
  
  

.s55 {
position: absolute;
width: 100%;
height: 100%;
background-color: #2362a0ed;
z-index: 0;
top: 0;
transition: all 0s;
}  


.product-item-hover {
    border: 0px solid #fff;
    transition: all .3s;
}

.product-item-hover:hover {
    transform: translateY(-5px);
    box-shadow: 0 .125rem .25rem rgba(0, 0, 0, 0.3) !important;
}

.product-item-hover:focus {
    transform: translateY(-5px);
    box-shadow: 0 .125rem .25rem rgba(0, 0, 0, 0.3) !important;
}

.bg-img-product-item {
    background-position: center center, center center;
    background-size: cover, contain;
    background-repeat: no-repeat;
    border: 1px solid #f7f4f4;
}

.bg-gradient-default {
    background: linear-gradient(87deg, #172b4d 0, #1a174d 100%) !important;
}


.es-badge-amount-top {
    position: absolute !important;
    top: 0px !important;
    left: 0px !important;
}

.es-badge-tags-top {
    position: absolute !important;
    top: 0px !important;
    right: 0px !important;
}


/*------------------ swiper-slide ------------------*/

    .swiper-container {
      width: 100%;
      height: 100%;
    }

    .swiper-slide {
      text-align: center;
      font-size: 18px;
      background: #fff;

      /* Center slide text vertically */
      display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
    }


.header-contact {
	 align-items: center;
	 text-transform: uppercase;
}
 .header-contact i {
	 margin-right: 1.1rem;
     font-size: 18px;
}
}
 .header-contact img {
	 margin-right: 0.8rem;
}
 .header-contact h6 {
	 margin: 0;
	 font-size: 10px;
	 line-height: 1.3;
	 color: #777;
}


/*------------------ mega-dropdown ------------------*/


.mega-dropdown {
  position: static !important;
}
.mega-dropdown-menu {
    padding: 20px 0px;
    width: 100%;
    box-shadow: none;
    -webkit-box-shadow: none;
}
.mega-dropdown-menu > li > ul {
  padding: 0;
  margin: 0;
}
.mega-dropdown-menu > li > ul > li {
  list-style: none;
}
.mega-dropdown-menu > li > ul > li > a {
  display: block;
  color: #222;
  padding: 3px 5px;
}
.mega-dropdown-menu > li ul > li > a:hover,
.mega-dropdown-menu > li ul > li > a:focus {
  text-decoration: none;
}
.mega-dropdown-menu .dropdown-header {
  font-size: 18px;
  color: #ff3546;
  padding: 5px 60px 5px 5px;
  line-height: 30px;
}


.mega-dropdown-menu ul {
    line-height: normal;
    font-size: 15px;
}

.carousel-control {
  width: 30px;
  height: 30px;
  top: -35px;

}
.left.carousel-control {
  right: 30px;
  left: inherit;
}
.carousel-control .glyphicon-chevron-left, 
.carousel-control .glyphicon-chevron-right {
  font-size: 12px;
  background-color: #fff;
  line-height: 30px;
  text-shadow: none;
  color: #333;
  border: 1px solid #ddd;
}


.input-search {
    
}

.but-search {
 border-color: #ccc;   
}



.price-badge {
    position: absolute !important;
    top: 0px !important;
    left: 0px !important;
}

.old-price-badge {

}

.other-badge-item  {
    position: absolute !important;
    top: 0px !important;
    right: 0px !important;
}

.note-badge {
	position: absolute;
	top: -8px;
}

.product-item-logo {
    position: absolute;
    right: 0;
    top: -18px;
    background-color: #fff;
    height: 35px !important;
    width: 35px !important;
}   

.product-item-title {
    height: 30px !important;
}

.m-menu-title-homepage {
    font-size: 1vw;
}

@media only screen and (max-width: 575px) {
    .m-menu-title-homepage {
        font-size: 4vw
    }
}