/*
Theme Name: Bari Gallery
Author: THE ONE AND THE ONLY
Description: Responsive lightweight theme that powers Bari Gallery.
Text Domain: barigallery
*/

/*-----------------------------------------*/
/*-----------------------------------------*/


@font-face {
  font-family: 'ar';
  src: url('fonts/ar.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap; /* this is to fix goole page speed performance for "Ensure text remains visible during webfont load" */
}


/*..................................................................*/


@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/materialicons.woff2') format('woff2');
}



.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;  /* Preferred icon size */
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;

  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;

  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;

  /* Support for IE. */
  font-feature-settings: 'liga';
}

/*..................................................................*/


/* the fn class is for author name in the comments in blog posts, the comment-awaiting-moderation class speaks for it self */
.rtl h1, .rtl h2, .rtl h3, .rtl h4, .rtl h5, .rtl h6, .rtl p, .rtl a, .rtl .fn, .rtl figcaption, .rtl .comment-awaiting-moderation, .rtl input, .rtl textarea, .rtl label, .rtl span, .rtl ol, .rtl li, .rtl button, .rtl tr, .rtl div{
  font-family: 'ar' !important;
}

/* had to use search icon to oprn a box .. if it wasn't inside <a> tag it just feels weird to click on .. this make sure all icons indise a tag have the material font applied to them other wise the inforce font will take over since it has !important on it*/
.rtl .material-icons, .ltr .material-icons{
    font-family: 'Material Icons' !important;
  }

.material-icons.has-black-text {
color: black; /* to overide my a tage default color */
}

/* this to ovveride BS standard font-weight:500 which makes the fonts too bold on Chrome */
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
  font-weight: 400;
}

/* English text appears too bold for my taste */
.ltr p, .ltr a, .ltr .fn, .ltr figcaption, .ltr .comment-awaiting-moderation, .ltr input, .ltr textarea, .ltr label, .ltr span, .ltr ol, .ltr li, .ltr button {
  font-weight: 400;
}



/*-----------------------------------------*/
/*-----------------------------------------*/

* {
	outline: none !important;
}



html {
  scroll-behavior: smooth;
}


/* For anchors pc screens */
@media only screen and (min-width: 992px){
html {
  scroll-padding-top: 92px; /* height of sticky header */
}
}


/* this for batteling right padding that firefox adds to ul lists .. kinda risky .. if it turns out that it works well, make sure to remove all the mozzila comments and css lines u did */
/* used for my-account-page .. right all the places this was used in and didn't have its own CSS line */
.rtl ul {
  padding-right: 0px;
  list-style: none;
}

.ltr ul {
  padding-left: 0px;
  list-style: none;
}

/* So I found out the above CSS does in fact ruin woocommerce notices .. the below CSS is to re-inforce woocommerce CSS on its notices */
.rtl .woocommerce-error, .rtl .woocommerce-info, .rtl .woocommerce-message {
  padding: 1em 3.5em 1em 2em !important;
}

.ltr .woocommerce-error, .ltr .woocommerce-info, .ltr .woocommerce-message {
  padding: 1em 2em 1em 3.5em !important;
}


a {
  color: #3083c6;
}

/* a bit risky */
a:hover{
  text-decoration: none;
}


/* Overriding Bootstrap CSS */
/*-----------------------------------------*/

strong{
  font-weight: bold;
}

h1{
  font-size: 30px;
}

.rtl body {
  font-weight: 100;
}


body.rtl {
  text-align: right;
}

.rtl .dropdown-menu{
  text-align: right;
}


.container {
  max-width: 1200px;
  width: 90%;
  position: relative;
}


img {
  max-width: 100%;
  height: auto;
  /*width: 100%*/
}

.btn.focus, .btn:focus {
  box-shadow: none;
}


.has-full-width-img img{
  width: 100%;
  height: 100%;
  object-fit: 100%;
}

/* used these properties  on some images before I came up with this css classes - you know what to do if you want to clean up */
.has-centered-img img {
  margin-right: auto;
  margin-left: auto;
  display: block;
}

.container-fluid {
  padding:0;
}





/*-----------------------------------------*/
/*-----------------------------------------*/






/* Overriding wordpress blok CSS ............................................................. */

.wp-block-columns {
  margin-top: 1.75em;
  margin-bottom: 0.75em;
}










/*-----------------------------------------*/
/*-----------------------------------------*/





/*  General Styling  */
/*----------------------------------------------------------------------------------*/



/* Makes scroll bar visible at all time -- To prevent the jumping effect */
html {
    overflow: -moz-scrollbars-vertical;
    overflow-y: scroll;
}


/* For Clearing stuff */
.clear-section{
  clear: both;
}




@media only screen and (min-width: 992px){
  /* Page content top padding to account for header */
  .page-content{
    padding-top: 114px;
  }


/* this was replaced by scroll-padding-top: 70px; */
  /* This is to offset all anchors to account for the sticky headers on PC .. will keep adding classes here ..
  /* this one for anchors that refresh the page .. cause the main heaer will not be shrinked
  .my-single-post-comments-section .comment::before, .my-single-post-comments-section .comment-respond::before  {
    content: "";
    display: block;
    /*height: 94px; - was working just right then suddenly I had to increase it .. must be some css lne that I added or something .. NVM found out its the shrinking header
    /* margin: -94px 0 0; - was working just right then suddenly I had to increase it .. must be some css lne that I added or something .. NVM found out its the shrinking header
    height: 128px;
    margin: -128px 0 0;
  }

  /* this one for anchors that don't refresh the page .. cause the main heaer will be shrinked
  .anchor-section-wrapper::before{
    content: "";
    display: block;
    height: 93px;
    margin: -93px 0 0;
}*/
}



/* Should have used this class in early development but Unfortunitely the idea only came up when I was trying to hide menu items on PC screens .. Probably should also create another class for .PC-only */
@media only screen and (min-width: 992px){
.mobile-only, .wpml-ls-menu-item {
  display: none;
}
}


/* Defines spacing between section and spacing for columns */
.container-padding{
  padding-bottom: 33px;
  padding-top: 33px;
}

.row-top-margin{
  margin-top: 18px;
}

.column-padding {
  padding-top: 15px;
  padding-bottom: 15px;
}



/* General Buttons */ /*for woocommerce, this is being used on add to cart + loging signup forms + track your order page */ /* nore some have .rtl.woocommerce (for single product pages and other woocommerce pages) and some have .rtl .woocommerce (for my pages that have woocommerce elements in them like the tracking page and what not)*/
.rtl .button, .rtl.woocommerce div.product form.cart .button, .rtl .woocommerce .woocommerce-form-login .woocommerce-form-login__submit, .rtl .woocommerce button.button:disabled[disabled], .rtl .woocommerce .woocommerce-form-register .woocommerce-form-register__submit, .rtl .woocommerce #respond input#submit, .rtl .woocommerce a.button, .rtl .woocommerce button.button, .rtl .woocommerce input.button, .rtl.woocommerce a.button {
  background: none;
  color: #3083c6;
  padding: 15px 30px 17px;
  border: 1px solid;
  border-radius: 3px;
  font-weight: 100;
}

/*for woocommerce, this is being used on add to cart + loging signup forms + track your order page*/
.rtl .button:hover, .rtl.woocommerce div.product form.cart .button:hover, .rtl .woocommerce .woocommerce-form-login .woocommerce-form-login__submit:hover, .rtl .woocommerce button.button:disabled[disabled]:hover, .rtl .woocommerce .woocommerce-form-register .woocommerce-form-register__submit:hover, .rtl .woocommerce #respond input#submit:hover, .rtl .woocommerce a.button:hover, .rtl .woocommerce button.button:hover, .rtl .woocommerce input.button:hover, .rtl.woocommerce a.button:hover {
  background-color: #3083c6;
  color: white;
  padding: 15px 30px 17px;
  border: 1px solid transparent;
  border-radius: 3px;
  font-weight: 100;
}

/*for woocommerce, this is being used on add to cart + loging signup forms + track your order page*/
.ltr .button, .ltr.woocommerce div.product form.cart .button, .ltr .woocommerce .woocommerce-form-login .woocommerce-form-login__submit, .ltr .woocommerce button.button:disabled[disabled], .ltr .woocommerce .woocommerce-form-register .woocommerce-form-register__submit, .ltr .woocommerce #respond input#submit, .ltr .woocommerce a.button, .ltr .woocommerce button.button, .ltr .woocommerce input.button, .ltr.woocommerce a.button {
  background: none;
  color: #3083c6;
  padding: 16px 30px;
  border: 1px solid;
  border-radius: 3px;
  font-weight: 100;
}

/*for woocommerce, this is being used on add to cart + loging signup forms + track your order page*/
.ltr .button:hover, .ltr.woocommerce div.product form.cart .button:hover, .ltr .woocommerce .woocommerce-form-login .woocommerce-form-login__submit:hover, .ltr .woocommerce button.button:disabled[disabled]:hover, .ltr .woocommerce .woocommerce-form-register .woocommerce-form-register__submit:hover, .ltr .woocommerce #respond input#submit:hover, .ltr .woocommerce a.button:hover, .ltr .woocommerce button.button:hover, .ltr .woocommerce input.button:hover, .ltr.woocommerce a.button:hover {
  background-color: #3083c6;
  color: white;
  padding: 16px 30px;
  border: 1px solid transparent;
  border-radius: 3px;
  font-weight: 100;
}


/* white blue buttons - use for dark backgrounds */
.my-white-blue-button {
  background: none;
  color: white;
  padding: 5px 15px 10px 15px;
  border: 1px solid;
  border-radius: 3px;
  font-size: 20px;
  font-weight: 100;
}


.my-white-blue-button:hover{
  background-color: #3083c6;
  color: white;
  padding: 5px 15px 10px 15px;
  border: 1px solid transparent;
  border-radius: 3px;
  font-size: 20px;
  font-weight: 100;
}

.ltr .my-white-blue-button {
  padding: 10px 15px;
  font-weight: 300;
}


.ltr .my-white-blue-button:hover{
  padding: 10px 15px;
  font-weight: 300;
}





/* white dark-blue buttons */
.my-white-d-blue-button {
  background: none;
  color: white;
  padding: 5px 15px 10px 15px;
  border: 1px solid;
  border-radius: 3px;
  font-size: 20px;
  font-weight: 100;
}


.my-white-d-blue-button:hover{
  background-color: #283038;
  color: white;
  padding: 5px 15px 10px 15px;
  border: 1px solid transparent;
  border-radius: 3px;
  font-size: 20px;
  font-weight: 100;
}


.ltr .my-white-d-blue-button {
  padding: 10px 15px;
  font-weight: 300;
}


.ltr .my-white-d-blue-button:hover{
  padding: 10px 15px;
  font-weight: 300;
}





/* blue blue buttons */
.my-blue-blue-button {
  background: none;
  color: #3083c6;
  padding: 5px 15px 10px 15px;
  border: 1px solid;
  border-radius: 3px;
  font-size: 20px;
  font-weight: 100;
}


.my-blue-blue-button:hover{
  background-color: #3083c6;
  color: white;
  padding: 5px 15px 10px 15px;
  border: 1px solid transparent;
  border-radius: 3px;
  font-size: 20px;
  font-weight: 100;
}


.ltr .my-blue-blue-button {
  padding: 10px 15px;
  font-weight: 300;
}


.ltr .my-blue-blue-button:hover{
  padding: 10px 15px;
  font-weight: 300;
}


/* white white buttons */ /*has no visual effect on hover */
.my-white-white-d-button {
  background: none;
  color: #283038;
  padding: 5px 15px 10px 15px;
  border: 1px solid;
  border-radius: 3px;
  font-size: 20px;
  font-weight: 100;
}

.ltr .my-white-white-d-button {
  padding: 10px 15px;
  font-weight: 300;
}


.ltr .my-white-white-d-button:hover{
  padding: 10px 15px;
  font-weight: 300;
}


/* pink pink buttons */
.my-subscribe-button{
  background-color: #ed5362;
  color: white;
  padding: 5px 15px 10px 15px;
  border: 1px solid transparent;
  border-radius: 3px;
  font-size: 20px;
  font-weight: 100;
}

.my-subscribe-button:hover {
  background-color: #57ccc4;
  color: white;
  padding: 5px 15px 10px 15px;
  border: 1px solid transparent;
  border-radius: 3px;
  font-size: 20px;
  font-weight: 100;
}

.ltr .my-subscribe-button {
  padding: 10px 15px;
  font-weight: 300;
}


.ltr .my-subscribe-button:hover{
  padding: 10px 15px;
  font-weight: 300;
}



/* art placer buttons */
.my-arpl-botton{
  background-color: #fff;
  color: #283038;
  padding: 12px 15px 17px 15px;
  border: 1px solid #3083c6;
  /*border-radius: 3px;*/
  font-size: 18px;
  font-weight: 100;
}

.my-arpl-botton:hover {
  background-color: #fff;
  color: #283038;
  padding: 12px 15px 17px 15px;
  border: 1px solid #283038;
  /*border-radius: 3px;*/
  font-size: 18px;
  font-weight: 100;
}

.ltr .my-arpl-botton {
  padding: 12px 15px;
  font-weight: 300;
}


.ltr .my-arpl-botton:hover{
  padding: 12px 15px;
  font-weight: 300;
}



/* Border Radius Control */
.has-border-radius, .image-has-border-radius img{
  border-radius: 5px;
}

.has-top-border-radius, .image-has-top-border-radius img {
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}

.has-bottom-border-radius, .image-has-bottom-border-radius img {
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
}





/* Text Color and spacing control */

/* You might want to use this in blog pages and texts that have multiple lines */
.has-large-line-height p{
    line-height: 1.7em;
}

.has-white-text p, .has-white-text h1, .has-white-text h2, .has-white-text h3, .has-white-text h4, .has-white-text a {
  color: white;
}

.has-black-text p, .has-black-text h1, .has-black-text h2, .has-black-text h3, .has-black-text a {
  color: black
}

/* black links with grey on hover */
.has-black-text a:hover {
  color: #666;
  text-decoration: none;
}

.has-no-margin-blow-text p, .has-no-margin-blow-text h1, .has-no-margin-blow-text h2, .has-no-margin-blow-text h3 {
  margin-bottom: 0px;
}

.has-no-text-decoration a{
  text-decoration: none;
}

/* Don't add h1 or other headers here .. create new class and call it has-faded-h1 or something */
.has-faded-text p, .has-faded-text a, .has-faded-text option, .has-faded-text select, .card-body.has-faded-text li, .has-faded-paragraph p, .card-body.has-faded-paragraph li{
  color: #666;
}

.has-faded-input input {
  color: #666;
}

.has-faded-text-on-hover a:hover{
  color: #666;
  text-decoration: none;
}

.has-faded-paragraph p {
  color: #666;
}

/* Defines backgrounds colors to elemnts */
/* Light Blue */
.has-primary-color-background{
  background-color: #3083c6;
}

/* Dark Blue */
.has-secondary-color-background{
  background-color: #283038;
}

/* Old Grey */
.has-tertiary-color-background{
  background-color: #f1f1f1;
}

/* New Grey */ /* may be consider using fbfbfd instead ? */
.has-quaternary-color-background
{
  background-color: #f7f7f7;
}

.has-white-background{
  background-color: white;
}

.has-black-background{
  background-color: black;
}



/* Defines colors to elemnts */
/* Light Blue */
.has-primary-color{
  color: #3083c6;
}


/* Dark Blue */
.has-secondary-color, .has-secondary-color a{
  color: #283038;
}

.has-has-secondary-color-p p{
    color: #283038;
}

/* Old Grey */
.has-tertiary-color{
  color: #f1f1f1;
}

/* New Grey */
.has-quaternary-color{
  color: #f7f7f7;
}

/* green but not green */
.has-5th-color {
  color: #57ccc4;
}




/*Blurp Styling (had to add !important for those because the caching plugin would load the Material icons css after this stylesheet .. could probably figure how to load thie stylesheet after the material icons styles but that would take so much time now wouldn't it ?)*/
.blurp-icon, .blurp-text{
  display: table-cell !important;
  vertical-align: top !important;
}

.blurp-icon{
  font-size: 38px !important;
}

.blurp-text h4{
  font-size: 1.2rem;
}

.blurp-text p{
  color: #666;
}

.ltr .blurp-text {
  padding-left: 1rem;
}

.rtl .blurp-text {
  padding-right: 1rem;
}




/* Color Sequare Styling */

/* Dark Blue */
.color-sequare-db {
  background-color: #283038;
  padding: 40px;
  color: white;
}

/* Pink */
.color-sequare-p {
  background-color: #ed5362;
  padding: 40px;
  color: white;
}

/* Light Blue */
.color-sequare-lb {
  background-color: #3083c6;
  padding: 40px;
  color: white;
}

.color-sequare-db h4, .color-sequare-p h4, .color-sequare-lb h4 {
  margin-bottom: 1rem;
}


.small-separator{
  position: relative;
  display: block;
  margin: 15px auto 9px auto;
  background-color: #3083c6;
}





/* Accordions */
.card-header {
  padding: 20px;
}

.card-header a{
  color: #283038;
}

.rtl .card-body ul {
  padding-right: 16px;
}

.ltr .card-body ul {
  padding-left: 16px;
}

.card-body ul {
  list-style: decimal;
  margin-bottom: 0;
}

.card-body ul li ul {
  list-style: disc;
  margin-bottom: 0;
}

.card-body p, .card-body ul li, .card-body ul li ul{
  padding: 5px 0px;
}




/* Ordering pages columns so they look the same on the ENglish version as they do on the arabic version */ /* This was only added later in site dev so most arabic version columns were stacked using BS order-1 ... etc */
@media only screen and (min-width: 992px){
 .ltr .my-1st-col {
    order: 2;
  }

  .rtl .my-2nd-col {
    order: 1;
  }
  }


@media only screen and (max-width: 991px){
  .my-1st-col {
    order: 2;
  }

  .my-2nd-col {
  order: 1;
  }
  }

/*-----------------------------------------*/
/*-----------------------------------------*/


























/* Footer Stlying */
/*----------------------------------------------------------------------------------*/


.site-1st-footer .row {
  margin-right: -35px;
  margin-left: -35px;
}

.site-1st-footer .col-3 {
  padding-right: 35px;
  padding-left: 35px;
}

.site-1st-footer .container {
  max-width: 1500px;
  width: 90%;
  position: relative;
}

.site-1st-footer .footer-first-col a{
  display: inline-block;
}

.site-1st-footer .footer-second-col a, .site-1st-footer .footer-third-col a, .site-1st-footer .footer-fourth-col a{
  display: block;
  font-size: 15px;
  margin: 10px 0px;
}

@media only screen and (min-width: 992px){
.site-1st-footer .footer-second-col a, .site-1st-footer .footer-third-col a, .site-1st-footer .footer-fourth-col a{
  margin-right: 5px;
  margin-left: 5px;
}
}

.site-1st-footer a:hover{
  color: #3083c6;
}

.site-1st-footer img{
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.site-2nd-footer {
  background-color: black;
}

.site-2nd-footer .container {
  padding: 15px;
}

.footer-h4 {
  font-size: 20px
}


/* Subscribe to news letter styling */

/* Mail chimp had this stupid html div that I don't know what it does and it had style="position: absolute; left: -5000px;" which was causing issues on RTL so I had to remove it from there and replace it with the following class and do it this way */
.rtl .mailchimp-rtl-ltr {
position: absolute;
right: -5000px;
}

.ltr .mailchimp-rtl-ltr {
position: absolute;
left: -5000px;
}


/* to remove the annyoing blue border when the form is active and removing the border which was causing jumping affect when form is active / inactive */
.site-1st-footer .form-control, .site-1st-footer .form-control:focus {
  box-shadow: none;
  border:0;
}


/* Styling the GEO Message */
.geo-location-message-cont{
  display: none;
  position: fixed;
  bottom: 0;
  width: 100%;
  box-shadow: 0px 0px 5px #8080802b;
  z-index: 999;
}


/*-----------------------------------------*/
/*-----------------------------------------*/






















/* Header Styling */
/*----------------------------------------------------------------------------------*/

/*----------------------*/
/* Secondary Menu */
/*----------------------*/

/* removes the margin added by wcml for currency switcher on single page products */

.woocommerce .secondary-menu .wcml-dropdown.product {
  margin: 0;
}


.secondary-menu-contact-info, .secondary-menu-pc-section {
  margin-right: -7px;
  margin-left: -7px;
}

.secondary-menu{
  /* This sets the top margin for the Secondary Menu */
  padding-top:6px;
  padding-bottom: 0px;
}

.secondary-menu-contact-info p, .secondary-menu-contact-info a, .secondary-menu-pc-section a{
  padding-right: 7px;
  padding-left: 7px;
  /* This sets the bottom margin for the Secondary Menu */
  padding-bottom: 11px
}


/* Hiding the username .. login .. track your order .. on mobile */
@media only screen and (max-width: 991px){
.secondary-menu-contact-info{
  margin:auto;
  justify-content: center;
}
}

/* Somehow, for some reason, Mozilla adds right padding to ul elemts only on PC screens when declaring RTL .. this CSS line is merely a giant middle fingre to Mozilla */
.rtl .secondary-menu-pc-section ul{
  padding-right: 0px;
}

/* This is to fix the + sign on contact number */
.rtl .secondary-menu-contact-info p {
  direction: ltr;
}




/*-------------------------------------------*/
/* Currency Switcher in the Secondary Menu */
.secondary-menu-pc-section .wcml-dropdown li {
  background: none;
  border: none;
}


.secondary-menu-pc-section .wcml-dropdown a {
  line-height: inherit;
  padding-top: 0;
}

.secondary-menu-pc-section .wcml-dropdown a.wcml-cs-item-toggle::after{
  top: calc(40% - .175em);
}

.rtl .secondary-menu-pc-section .wcml-dropdown a.wcml-cs-item-toggle {
  padding-right: 6px;
}

.ltr .secondary-menu-pc-section .wcml-dropdown a.wcml-cs-item-toggle {
  padding-left: 6px;
}

.secondary-menu-pc-section .wcml-dropdown{
  width: auto;
}

.secondary-menu-pc-section .wcml-dropdown li:hover, .secondary-menu-pc-section .wcml-dropdown-click li:focus{
  background: none;
}

.secondary-menu-pc-section a:not([href]):hover {
  color: white;
}

.wcml-spinner {
  width: 10px;
}


.secondary-menu-pc-section .wcml-dropdown .wcml-cs-submenu {
    border-radius: 0;
    border-top: 3px solid #3083c6;
    background: #283038;
}

.secondary-menu-pc-section .wcml-dropdown .wcml-cs-submenu li{
  border: none;
}

.secondary-menu-pc-section .wcml-dropdown .wcml-cs-submenu a{
  padding-bottom: 0;
}


.secondary-menu-pc-section .wcml-cs-submenu li {
  margin: 10px 10px 13px 10px;
}






/*----------------------*/
/* Main Menu */
/*----------------------*/


.rtl .main-menu {
  direction: ltr;
}

/* to counter BS css which was causing the drop down links to flash on click */
.dropdown-item:active {
  color: #16181b;
  text-decoration: none;
  background-color: #f0f0f070;
}

/* To remove BS effect in whcih it sets the active link (aka, menu items) to black and the other links to light grey */
.main-menu .navbar-nav .nav-link {
  color: black;
}

/* RTLing pages menu so they are stacked correctly */
.rtl .main-menu ul {
  direction: rtl;
/* Somehow, for some reason, Mozilla adds right padding to ul elemts only on PC screens when declaring RTL .. this CSS line is merely a giant middle fingre to Mozilla */
  padding-right: 0px;
}

/* Main menu items font size & spacing */
.main-menu ul a{
  font-size: 17px;
}

/* Main menu bottom border */
.main-menu {
  border-bottom: 1px solid #e8e7e7;
}

/* To counter padding on the main menu items */
.collapsed-main-menu {
  margin-right: -0.5rem;
}

/* To still stay above the woocommerce overlay on the checkout when updating items and shipping (has z index of 1000) but still appear below the magnific pop-up (has z index of 1043)*/
.main-header {
  z-index: 1001;
}


.main-header  .collapsed-main-menu .dropdown-menu{
  border-radius: 0;
  border-top: 3px solid #3083c6;
  margin-top: 0;
  background: #f7f7f7;
  border-right: 0;
  border-left: 0;
  border-bottom: 0;
}

.main-header .navbar{
  padding-right: 0;
  padding-left: 0;
}

.main-header .main-menu.navbar {
  padding: 0;
}

.main-header  .main-menu.navbar-expand-lg > .container {
  padding-right: 15px;
  padding-left: 15px;
}

/* Styling the drowpdown arrow om menu items with children item */
  .rtl .main-menu .dropdown-toggle::after {
    margin-right: 10px;
  }

  .ltr .main-menu .dropdown-toggle::after {
    margin-left: 10px;
  }

/* Dropdown menu items background color on hover */
  .main-menu .dropdown-item:focus, .main-menu .dropdown-item:hover {
    background-color: #f0f0f070;
  }



  /* Search box styling .......................................................................................................................... */
  .search-icon-primary-menu {
    font-size:  25px;
    /* to prevent jumping while the material icon fonts loads */
    width: 45px;
    text-align: right; /*so the searched icon is alligned right in the English version */
    overflow: hidden;
    padding-top: 2px;
    cursor: pointer;
  }



  .menu-search-box{
    background: #f7f7f7;
    position: absolute;
    top: 0px;
    right: 15px;
    display: none;
    transition: 0.4s;
    z-index: 999;
  }

  .rtl .menu-search-box {
    direction: rtl;
  }

  @media only screen and (min-width: 992px){
    .menu-search-box{
      width: 650px;
    }
  }

  @media only screen and (max-width: 991px){
    .menu-search-box{
      width: 50%;
    }


    .menu-search-box{
      width: 100%;
    }

    .search-icon-primary-menu span{
      font-size: 26px;
    }
  }

  .menu-search-box .searchform{
    width: 100%;
  }

  .menu-search-box input[type="text"]{
    /*width: 300px;*/
    width: 100%;
    padding: 27px 0px;
    outline: none;
    border: 0px;
    background-color: #f7f7f7;
    transition: 0.4s;
  }

  .shrink .menu-search-box input[type="text"] {
    padding: 14px 0px;
    transition: 0.4s;
  }



  .close-search-icon-primary-menu {
    display: inline;
    padding-top: 30px;
    transition: 0.4s;
    cursor: pointer;
  }

  .shrink .close-search-icon-primary-menu {
    padding: 14px 0px;
    transition: 0.4s;
  }

  .close-search-icon-primary-menu span {
    font-size: 22px;
  }


/* PC screens */

@media only screen and (min-width: 992px){

  /* Controls spacing between main menu items */
  .main-menu ul a{
    margin-left: 10px;
  }

  /* Making dropdown on hover */
  .main-header .main-menu.navbar .dropdown:hover .dropdown-menu {
      display: block !important; /*important so it counters the important on the next xss line */
   }

   .main-header .dropdown-menu {
   display: none !important; /* important so it counter the display: block css thats added by bootstrap JS upon clicking on an item which will
   cause the dropdown not close even if user hovers aways. */
 }

  /* This control the height of the UNSHRINKED  main menu on PC */
  .main-menu .nav-link{
    /* margin-top: 18px;  /*disabled this because I changed the behaviour to dropdown on hover and this allows the dropdown menue to show even if the user hovers above the link */
    margin-bottom: 18px;
    transition: 0.4s;
  }

  /* This is what controls the UNSHRINKED height now (only the top side tho :) ) */
  .main-menu .navbar-collapse{
    padding-top: 18px;
    transition: 0.4s;
  }



  /* For shrinking the main menu on scroll -- the class .shrink is being added by JS on scroll */

  /* This control the height of the SHRINKED  main menu on PC */
  .shrink .main-menu .nav-link{
    /* margin-top: 7px; /*disabled this because I changed the behaviour to dropdown on hover and this allows the dropdown menue to show even if the user hovers above the link */
    margin-bottom: 7px;
  }

  /* This is what controls the SHRINKED height now (only the top side tho :) ) */
  .shrink .main-menu .navbar-collapse{
    padding-top: 7px;
    transition: 0.4s;
  }

  .main-menu .custom-logo-link img {
    transition: 0.4s;
  }

  .shrink .main-menu .custom-logo-link img{
    width: 70%;
    transition: 0.4s;
  }

  .rtl .main-menu .custom-logo-link img {
    float: left;
  }


  .main-header {
    position: fixed;
    right: 0;
    left: 0;
    /*z-index: 1000;*/
  }


/* Unsetting BS left=0 line to preoperly position dropdown menus and styling dropdown menus */
  .main-menu .dropdown-menu {
      left: auto;
      padding: 25px 0px;
      width: 240px;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    }

  .main-menu .dropdown-menu .menu-item{
    padding: 0px 20px;
  }

/* Padding control for dropdown menus in the main menue */
  .main-menu .dropdown-item  {
  width: 200px;
  padding: 10px 20px; /*was 6 */
  /* to remove margin that is set to control main menu items spacing */
  margin: 0px;
  }

}





/* Mobile Screens */

@media only screen and (max-width: 991px){

  .collapsed-main-menu .nav.navbar-nav{
    margin-top: 0px;
    border-top: 3px solid #3083c6;
    position: absolute;
    background: #f7f7f7;
    width: 100%;
    z-index: 1000;
    left: 0;
    padding: 5%;
    border-radius: 0;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.18);
  }

  /* This controls the height of the main menu on Mobile */
  .main-menu .custom-logo-link{
    margin-top: 21px;
    margin-bottom: 21px;
    margin-right: auto;
  }


  .collapsed-main-menu li a{
    padding: 10px 2%;
    border-bottom: 1px solid rgba(0, 0, 0, 0.03);
    color: rgba(0,0,0,.7);
  }


/* This is stupid .. countering bootstrap JS with CSS .. funny solution tho ! */
  .collapsed-main-menu{
    height: 100% !important;
  }

  .collapsed-main-menu.collapsing{
    transition: none;
  }

  .main-menu .navbar-toggler {
    padding: 0px;
    border: 0;
  }

  .main-menu .navbar-toggler-icon{
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgb(48, 131, 198)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e")
  }

  /* This is CSS is from wpml to add space between flag and language name */
  .wpml-ls-menu-item .wpml-ls-flag {
   display:inline;
   vertical-align:baseline
  }
  .wpml-ls-menu-item .wpml-ls-flag+span {
   margin-left:.3em
  }
  .rtl .wpml-ls-menu-item .wpml-ls-flag+span {
   margin-left:0;
   margin-right:.3em
  }

}






/* WooCommerce Cart Icon in Main Header */

/*
.nav-cart {
  background-image: url("../../uploads/cart-Icon.png");
  background-size: 22px;
  background-repeat: no-repeat;
  width: 30px;
  height: 36px;
  background-position: 0px 10px;
  display: inline-block;
}

.nav-cart-total-items{
  font-size: 12px;
  position: relative;
  display: inline-block;
  left: 20px;
  top: -2px;
  width: 17px;
  height: 18px;
  color: white;
  text-align: center;
  background-color: #57ccc4;
  border-radius: 10px;
}
*/


/* In the secondary Menu */ /*

.nav-cart-total-items-secondary {
    position: relative;
    top: -5px;
    color: #57ccc4;
  }

.ltr .nav-cart-total-items-secondary{
  right: 16.3px;
}

.rtl .nav-cart-total-items-secondary{
  left: 14.8px;
}


.ltr .nav-cart-secondary{
  margin-left: 3px;
  }

.rtl .nav-cart-secondary{
    margin-right: 3px;
}

*/

/* Styiling cart icon on secondary menue on PC */

.nav-cart-total-items-secondary{
  position: relative;
  top: -3px;
  color: white;
  font-size: 10px;
}

.rtl .nav-cart-total-items-secondary {
  right: -16.3px;
}

.ltr .nav-cart-total-items-secondary {
  left: -15.2px;
}

.nav-cart-secondary svg{
  vertical-align: revert;
}

.rtl .nav-cart-secondary a{
  padding-left: 0px;
  margin-left: 2px;
}

.ltr .nav-cart-secondary a{
  padding-right: 0px;
  margin-left: -2px;
}

/* Handeling the seprator after the cart icon in the secondary menu */
.rtl .nav-cart-separator-secondary {
  color: white;
  padding-left: 4px;
}

.ltr .nav-cart-separator-secondary {
  color: white;
  padding-right: 4px;
  padding-left: 2px;
}



/* Styling Cart In the Main Menu on PC */

/*.nav-cart-total-items-main {
    position: relative;
    right: 22.5px;
    top: -7px;
    color: #283038;
}*/

/* did this for the arabic version cause item count was showing ok firefox but not on iphone, when I fix for iphone, firefox is not ok :p */
.rtl .nav-cart-total-items-main {
    position: absolute;
    transform: translate(-50%,-50%);
    left: 45%;
    top: 15%;
    color: #283038;
}

.ltr .nav-cart-total-items-main {
    position: absolute;
    right: 10px;
    top: -8px;
    color: #283038;
}


.ltr .nav-cart-main a{
  float: right;
}



@media only screen and (min-width: 992px){
.nav-cart-main {
  display: none;
}
}


/* Arabic and English fonts disrepency .. had to adjust mobile cart and search icons on the english version so they look better in place */
.ltr .nav-cart-main {
  padding-top: 2px;
}

/* same as avoce .. this is to ovveride the 2px padding on the arabic version */
@media only screen and (max-width: 991px){
.ltr .search-icon-primary-menu {
  padding-top: 6px;
}
}


/*-----------------------------------------*/
/*-----------------------------------------*/




















/* Welcome Message Styling */
/*----------------------------------------------------------------------------------*/

.welcome-message{
  border-radius: 5px 5px 5px 5px;
  overflow: hidden;
  border-width: 1px;
  border-style: dashed;
  border-color: #3083c6;
}

.welcome-message p {
  margin: auto;
  font-weight: 400;
}

@media only screen and (min-width: 576px){
  .welcome-message p{
    font-size: 26px;
  }
}

@media only screen and (max-width: 575px){
  .welcome-message p{
    font-size: 16px;
  }
}





/*-----------------------------------------*/
/*-----------------------------------------*/
























/* Main Page top banner Styling*/
/*----------------------------------------------------------------------------------*/


.main-page-top-banner img {
  width: 100%;
}



/* Mobile Screens */
@media only screen and (max-width: 991px){

  /* First Column */
  .main-page-top-banner-col-2 img{
    border-top-right-radius: 5px;
    border-top-left-radius: 5px;
  }



  /* Second Column */
  .main-page-top-banner-col-1 {
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    margin-bottom: 30px;
  }

  .main-page-top-banner-col-1 h1 {
    font-size: 25px;
    margin-bottom: 15px;
  }

  .main-page-top-banner-col-1 .wrapper {
    margin: auto;
    padding: 20px;
  }


  /* Third Coumn */
  .main-page-top-banner-col-3 .image-container img{
    border-radius: 5px;
  }

  .main-page-top-banner-col-3 .image-container {
    margin-bottom: 30px;
  }

  .main-page-top-banner-col-3 .wrapper {
    padding: 20px;
    border-radius: 5px;
  }
}




/* PC Screens */
@media only screen and (min-width: 992px){

  /* Main Row */
  .main-page-top-banner-row{
    height: 372px;
  }


  /* First Column */
  .main-page-top-banner-col-1
  {
    max-width: 21%;
    flex: 0 0 21%;
  }

  .ltr .main-page-top-banner-col-1 {
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
  }

  .rtl .main-page-top-banner-col-1 {
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
  }

  .main-page-top-banner-col-1 .wrapper {
    padding: 25px;
  }

  .main-page-top-banner-col-1 .wrapper h1 {
    font-size: 25px;
    margin-bottom: 12px;
  }


  /* Second Column */
  .main-page-top-banner-col-2
  {
    max-width: 45%;
    flex: 0 0 45%;
  }

  .main-page-top-banner-col-2 img{
    height: 100%;
    object-fit: cover;
  }

  .ltr .main-page-top-banner-col-2 img {
    border-bottom-right-radius: 5px;
    border-top-right-radius: 5px;
  }

  .rtl .main-page-top-banner-col-2 img {
    border-bottom-left-radius: 5px;
    border-top-left-radius: 5px;
  }

  /*Third Column */
  .main-page-top-banner-col-3
  {
    max-width: 32.8%;
    flex: 0 0 32.8%;
  }

  .ltr .main-page-top-banner-col-3 {
    margin-left: 1.2%;
  }

  .rtl .main-page-top-banner-col-3 {
    margin-right: 1.2%;
  }

  .main-page-top-banner-col-3 img{
    border-radius: 5px;
    object-fit: cover;
    height: 100%
  }

  .main-page-top-banner-col-3 .image-container{
    margin-bottom: 14px;
    max-height: 73%;
    height: 100%;
  }

  .main-page-top-banner-col-3 .wrapper{
      display: flex;
      align-items: center;
      border-radius: 5px;
      height: 23.2%;
      /*padding: 29.4px 0;*/
    }

  .main-page-top-banner-col-3 .wrapper p{
    font-size: 18px;
    font-weight: 400;
  }

  .ltr .main-page-top-banner-col-3 .wrapper p {
    padding-left: 19px;
  }

  .rtl .main-page-top-banner-col-3 .wrapper p {
    padding-right: 19px;
  }

}


/*-----------------------------------------*/
/*-----------------------------------------*/




















/* Main Page blurps Styling*/
/*----------------------------------------------------------------------------------*/


@media only screen and (min-width: 992px){
  .main-page-blurps-row{
    width: 95%;
    margin: auto;
    }}


/*-----------------------------------------*/
/*-----------------------------------------*/



















/* WooCommerce Styling*/
/*----------------------------------------------------------------------------------*/


/*----------------------*/
/* Main Page and WooCommerce Overrides --- Woocmmerce Uses one break point at max-wdith = 768 */
/*----------------------*/

/* Fixing BootStrap Conflict with woocommerce */
.woocommerce .col-1, .woocommerce .col-2{
  max-width:none;
}

.woocommerce-columns .col-1, .woocommerce-columns .col-2 {
  padding-right: 0;
  padding-left: 0;
}

@media only screen and (max-width: 768px){
.woocommerce ul.products[class*="columns-"] li.product, .woocommerce-page ul.products[class*="columns-"] li.product {
  width: 45%;
  }
}


/* Set WooCommerce Price color */
.woocommerce ul.products li.product .price{
  color: #666;
}


/* Sets Woocommerce Product title Color */
.woocommerce ul.products li.product .woocommerce-loop-category__title, .woocommerce ul.products li.product .woocommerce-loop-product__title, .woocommerce ul.products li.product h3{
  color: #283038;
}


/* WooCommerce spacing between product image and product title */
.woocommerce ul.products li.product a img {
  margin-bottom: 0.5em;
}


/* Woocmmerce spacing between artist name and price in catalog pages (main page, category pages, related products in single products pages, bottom of blog posts ... etc) */
.artist_name_cp {
  margin-bottom: 5px;
}

/*-----------------------------------------*/
/*-----------------------------------------*/




/*----------------------*/
/* Single Product Pages */
/*----------------------*/



/* Top Background */
.single-product-page-container .product-page-background{
  background-image: url("../../uploads/Products-Background.jpg");
  height: 330px;
}

@media only screen and (max-width: 991px) {
.single-product-page-container .product-page-background {
  height: 250px;
}
}


/* Container -- the min-height line is there to prevent the flashing of the background before enough content is loaded to strech the container vertically en*/
.single-product-page-container .single-product-1st-section{
  margin-top: -150px;
  padding: 20px;
  min-height: 300px;
  max-width: 1160px;
}

.single-product-1st-section .arpl-bottons-container .view-in-space {
  /*float: right;*/
  width: 100%;
  margin: 30px 0px;
}

/*.single-product-1st-section .arpl-bottons-container .view-on-wall {
  float: left;
  width: 49%;
  margin: 30px 0px;
}*/

@media only screen and (max-width: 768px) { /* may be it should be 767 as woocommerce advices ? who knows */
  .single-product-1st-section .arpl-bottons-container .view-in-space, .single-product-1st-section .arpl-bottons-container .view-on-wall  {
    font-size: 15px;
  }
}



@media only screen and (min-width: 769px) { /* may be it should be 768 as woocommerce advices ? who knows */

/* Take float and width properties out of the galley and add it back to its container for better control to add the viw on wall buttons */
/* old comment -  Control the floating of the image vs product details columns althrough they are not really colmuns but we want the image on the left and details on the right in the Arabic version as well */
.woocommerce .single-product-1st-section div.product div.images {
  float: none;
  width: 100%;
}

.single-product-1st-section .woocommerce-product-gallery-container {
  float: left;
  width: 48%;
}

.rtl .single-product-1st-section .product .summary {
  float: right;
}

/* Even with the above code, the above code, the on sale tag still stays on the right .. this is to fix that */
.rtl .single-product-1st-section .product .onsale {
  left: -.5em;
  right: auto; /* to overrite the right: -.5em css by woocommerce */
}
}

/* Title */
.single-product-page-container div.product .product_title {
  font-size: 30px;
}


/* Separator under the title */
.single-product-page-container .small-separator.product-title-bottom-separator {
  height: 1px;
  width: 100%;
  background-color: #d3d3d3;
  margin: 6% 0;
}


/* Price */
.single-product-page-container div.product p.price, .woocommerce div.product span.price{
  color: #3083c6;
  font-weight: 400;
}


/* Artist name */
.artist-name-pp {
  font-size: 18px;
  margin-bottom: 15px;
}

.artist-name-pp p {
  display: inline;
}

.artist-name-pp a{
  color: #ed5362;
}


/* Discription & variations */
.single-product-1st-section  .woocommerce-product-details__short-description, .single-product-1st-section .variations, .single-product-1st-section .variations select, .single-product-1st-section .product_meta {
  color: #666;
}

.rtl .single-product-1st-section .variations {
  margin-right: 20px;
}

.ltr .single-product-1st-section .variations {
  margin-left: 20px;
}

.single-product-1st-section .variations select {
  padding: 5px;
}

/* Add to cart container from woocommerce */
.single-product-page-container div.product form.cart{
  margin: 30px 0;
}

/* Quantity */
.single-product-page-container .quantity .qty  {
  background: none;
  color: #3083c6;
  height: 50px;;
  border: 1px solid;
  border-radius: 3px;
  font-size: 20px;
}

.rtl .single-product-page-container .quantity .qty {
  margin-right: 20px;
}

.ltr .single-product-page-container .quantity .qty {
  margin-left: 20px;
}

/* Variable product price */
.single-product-page-container .woocommerce-variation-price{
  margin-bottom: 15px;
}

.rtl .single-product-page-container .woocommerce-variation-price{
  margin-right: 20px;
}

.ltr .single-product-page-container .woocommerce-variation-price{
  margin-left: 20px;
}

/* Removes underline from woocommerce price in variable products */
ins {
  text-decoration: none;
}

/* Variations font weight and font color control */
.single-product-page-container div.product form.cart .variations label, .single-product-page-container div.product form.cart .variations select{
  font-size: 14px;
}

/* fixing font size so iphone doesn't zoom in when user tries to select */ /* was fixed by adding maximum-scale=1 in header
@media only screen and (max-width: 991px) {
  .single-product-page-container div.product form.cart .variations label, .single-product-page-container div.product form.cart .variations select{
    font-size: 16px;
  }
} */

/* Framing options title */
.single-product-page-container .section-title{
  padding: 20px 0;
}




/* Tabs -------------------------------------------------------------- */
/* ------------------------------------------------------------------- */

.single-product-page-container .general-product-info-tabs .nav-tabs .nav-link {
  color: black;
}

.single-product-page-container .general-product-info-tabs {
  border: 1px solid #d9d9d9;
}

.single-product-page-container .general-product-info-tabs .tab-content {
  padding: 30px;
}

.single-product-page-container .general-product-info-tabs .nav-tabs .nav-link{
  background-color: #f7f7f7;
  border-left: 0px;
  border-top: 0px;
  border-color: #d9d9d9;
  border-right: 1px solid #d9d9d9;
  border-radius: 0;
  padding: 15px 5px;
}

.rtl .single-product-page-container .general-product-info-tabs .nav-tabs li:first-child .nav-link{
  border-right: 0;
}

.ltr .single-product-page-container .general-product-info-tabs .nav-tabs li:last-child .nav-link{
  border-right: 0;
}

.single-product-page-container .general-product-info-tabs .nav-tabs .nav-link.active{
  background-color: white;
  border-bottom: 1px solid white;
}

@media only screen and (max-width: 991px){
  .single-product-page-container .general-product-info-tabs .nav-tabs .nav-link, .single-product-page-container .general-product-info-tabs .nav-tabs .nav-link.active{
    border-bottom: 2px solid #d9d9d9;
    border-right: 0;
  }

  .single-product-page-container .general-product-info-tabs .nav-tabs li:last-child .nav-link {
    border-bottom: 0px;
  }

  .single-product-page-container .general-product-info-tabs .nav-tabs {
    border-bottom: 2px solid #d9d9d9;
  }
}

/* End tabs --------------------------------------------------------- */
/* ------------------------------------------------------------------- */







/* Giving the Guarntee section a black background */
.single-product-page-container .single-product-2nd-section{
  background-color: black;
}


/* Realted products section */
.single-product-page-container .single-product-3rd-section {
  padding: 20px;
}


/* Related Products title */
.single-product-page-container .single-product-3rd-section h2 {
  margin-bottom: 50px;
}






/*-----------------------------------------*/
/*-----------------------------------------*/











/*----------------------*/
/* Category Pages */
/*----------------------*/


/* Styling for buttons that switch product views (removed because I updated the buttons from a form method to a more function based correct way)
.producttype-buttons {
    border: none;
    outline: none;
    padding: 0;
    text-decoration: underline;
    font-family: inherit;
    font-size: inherit;
}
*/



/* Sidebar --------------------------------------------------------- */
/* ------------------------------------------------------------------- */

/* applies the grey line vertical divider */

@media only screen and (min-width: 992px) {
.product-category-container::before {
    position: absolute;
    top: 0;
    width: 1px;
    height: 100%;
    background-color: #e2e2e2;
    content: "";
}

.rtl .product-category-container::before {
  right: 22%;
}

.ltr .product-category-container::before {
  left: 22%;
}

}



@media only screen and (min-width: 992px) {
/* Controlling side bar width */
.sidebar-container{
  max-width: 22%;
}

.rtl .sidebar-container{
  padding-left: 50px;
}

.ltr .sidebar-container{
  padding-right: 50px;
}
}



@media only screen and (min-width: 992px) {
/* Controlling products section width */
.product-list-container{
  max-width: 78%;
}

.rtl .product-list-container{
  padding-right: 50px;
}

.ltr .product-list-container{
  padding-left: 50px;
}
}


/* Sidebar Sections */
.sidebar-section{
  margin-bottom: 30px;
}


/* Sidebar Section titles */
.sidebar-section-title {
    border-bottom: solid 1px #3083c6;
    margin-bottom: 15px;
    font-size: 18px;
    padding-bottom: 10px;
}

/* Sidebar section list */
/* Somehow, for some reason, Mozilla adds right padding to ul elemts only on PC screens when declaring RTL .. this CSS line is merely a giant middle fingre to Mozilla */
.sidebar-section-list {
  padding-right: 0px;
}


/* Sidebar section items */
.sidebar-section-items {
  list-style: none;
  padding: 0px;
  text-decoration: none;
  margin-bottom: 0.5em;
  font-size: 14px;
}

.woocommerce .product-list-container ul.products {
  padding-top: 40px;
}






/*-----------------------------------------*/
/*-----------------------------------------*/













/*----------------------*/
/* My Account Page */
/*----------------------*/


/* the whole thing was copied from original barigallery site with minor changes */
/* Change WC Acct Page Column Widths */
@media only screen and (min-width: 992px) {
.myaccount-page-container .woocommerce-MyAccount-navigation {
    width: 22%;
  }
.myaccount-page-container .woocommerce-MyAccount-content {
    width: 75%;
  }
}


/* Style WC Account Endpoint Links */
.myaccount-page-container nav.woocommerce-MyAccount-navigation ul {
  list-style-type: none;
  padding-left: 0;
  /*max-width:200px;*/
  font-size: 17px;
  line-height: 26px;
  margin-bottom: 30px;
}

.myaccount-page-container nav.woocommerce-MyAccount-navigation ul li {
  padding: 8px 20px;
  background-color: rgba(0,0,0,0.05);
  border-bottom: 1px solid rgba(0,0,0,0.05);
}

.myaccount-page-container nav.woocommerce-MyAccount-navigation ul li.is-active {
  background-color: rgba(0,0,0,0.1);
}

.myaccount-page-container nav.woocommerce-MyAccount-navigation ul li.is-active a {
  color: rgba(0,0,0,0.8);
  cursor: default;
}


/* English */
.ltr .myaccount-page-container nav.woocommerce-MyAccount-navigation ul li.is-active:after {
  content: "";
  height: 0;
  width: 0;
  border-top: 20px solid transparent;
  border-left: 14px solid rgba(0,0,0,0.1);
  border-bottom: 20px solid transparent;
  float: right;
  margin-right: -34px;
  margin-top: -7px;
}
.ltr .myaccount-page-container nav.woocommerce-MyAccount-navigation ul li:not(.is-active):hover {
  background-color: rgba(0,0,0,0.07);
}
.ltr .myaccount-page-container nav.woocommerce-MyAccount-navigation ul li:not(.is-active):hover:after {
  content: "";
  height: 0;
  width: 0;
  border-top: 20px solid transparent;
  border-left: 14px solid rgba(0,0,0,0.07);
  border-bottom: 20px solid transparent;
  float: right;
  margin-right: -34px;
  margin-top: -7px;
}

/* Arabic */
.rtl .myaccount-page-container nav.woocommerce-MyAccount-navigation ul li.is-active:after {
  content: "";
  height: 0;
  width: 0;
  border-top: 20px solid transparent;
  border-right: 14px solid rgba(0,0,0,0.1);
  border-bottom: 20px solid transparent;
  float: left;
  margin-left: -34px;
  margin-top: -7px;
}
.rtl .myaccount-page-container nav.woocommerce-MyAccount-navigation ul li:not(.is-active):hover {
  background-color: rgba(0,0,0,0.07);
}
.rtl .myaccount-page-container nav.woocommerce-MyAccount-navigation ul li:not(.is-active):hover:after {
  content: "";
  height: 0;
  width: 0;
  border-top: 20px solid transparent;
  border-right: 14px solid rgba(0,0,0,0.07);
  border-bottom: 20px solid transparent;
  float: left;
  margin-left: -34px;
  margin-top: -7px;
}



/*-----------------------------------------*/
/*-----------------------------------------*/




/*----------------------*/
/* Cart Page */
/*----------------------*/



/* Handel the width of the cuppon field */
.my-cart .woocommerce table.cart td.actions .input-text, .my-cart .woocommerce-page table.cart td.actions .input-text {
padding: 12px;
}

@media only screen and (min-width: 769px) { /* may be it should be 768 as woocommerce advices ? who knows */
.my-cart .woocommerce table.cart td.actions .input-text, .my-cart .woocommerce-page table.cart td.actions .input-text {
  width: auto;
}
}

@media only screen and (max-width: 768px) {
.global .woocommerce #shipping_method.woocommerce-shipping-methods {
  padding-top: 15px;
  clear: both;
}

.rtl.gloabl .woocommerce #shipping_method.woocommerce-shipping-methods, .rtl.gloabl .woocommerce-shipping-destination, .rtl.gloabl .woocommerce-shipping-calculator{
  text-align: right;
}

.ltr.global .woocommerce #shipping_method.woocommerce-shipping-methods, .ltr.global .woocommerce-shipping-destination, .ltr.global .woocommerce-shipping-calculator{
  text-align: left;
}
}






/*-----------------------------------------*/
/*-----------------------------------------*/









/*----------------------*/
/* Checkout Page Page */
/*----------------------*/

/* Hide the cuppon notice */
.woocommerce-checkout .woocommerce-form-coupon-toggle {
  display: none;
}


/* To clear all the floating happening on woocommerce checkout page */
.my-footer {
  clear: both;
}

@media only screen and (min-width: 992px) {

/* since the <form> has no body because all elemnts inside it are floated, This makes the <form> has a body so bottom margin of parent div will aaply */
.my-checkout .checkout{
  overflow: hidden;
}

/* Floating MAIN columns (woocommerce doesn't see them as columns but we do :)) */
/* First column */
.my-checkout .col2-set {
  float: right;
  width: 48%;
}

/* Second column */
.my-checkout .woocommerce-checkout-review-order, .my-checkout #order_review_heading {
  float: right;
  width: 48%;
  margin-right: 4%;
}


/* Adjusting columns width within the first column to 100% so they stack under each other */
.my-checkout .woocommerce .col2-set .col-1, .my-checkout .woocommerce .col2-set .col-2 {
  width: 100%;
}


/* Fields on the right */
.my-checkout #billing_company_field, .my-checkout #billing_address_1_field, .my-checkout #billing_city_field, .my-checkout #billing_postcode_field, .my-checkout #billing_email_field, .my-checkout #shipping_company_field, .my-checkout #shipping_address_1_field, .my-checkout #shipping_city_field, .my-checkout #shipping_postcode_field {
  float: right;
  width: 47%;
  clear: right;
}

/* Fields on the left */
.my-checkout #billing_country_field, .my-checkout #billing_address_2_field, .my-checkout #billing_state_field, .my-checkout #billing_phone_field, .my-checkout #shipping_country_field, .my-checkout #shipping_address_2_field, .my-checkout #shipping_state_field, .my-checkout #shipping_phone_field {
  float: left;
  width: 47%;
  clear: left;
}


/* Now for English version */
/* Fields on the right */
.ltr .my-checkout #billing_company_field, .ltr .my-checkout #billing_address_1_field, .ltr .my-checkout #billing_city_field, .ltr .my-checkout #billing_postcode_field, .ltr .my-checkout #billing_email_field, .ltr .my-checkout #shipping_company_field, .ltr .my-checkout #shipping_address_1_field, .ltr .my-checkout #shipping_city_field, .ltr .my-checkout #shipping_postcode_field {
  float: left;
  width: 47%;
  clear: left;
}

/* Fields on the left */
.ltr .my-checkout #billing_country_field, .ltr .my-checkout #billing_address_2_field, .ltr .my-checkout #billing_state_field, .ltr .my-checkout #billing_phone_field, .ltr .my-checkout #shipping_country_field, .ltr .my-checkout #shipping_address_2_field, .ltr .my-checkout #shipping_state_field, .ltr .my-checkout #shipping_phone_field {
  float: right;
  width: 47%;
  clear: right;
}

}

/* Shipping methods look bold on checkout page .. this fixes that */
.woocommerce table.shop_table tfoot td {
  font-weight: normal;
}

/* Adding space to the do you want to ship to diffrent location column */
.my-checkout .col-2, .my-checkout .col-1 {
  margin-bottom: 30px;
}


/* Removing column padding set by classes col-1 and col-2 bootstrap conflict */
.my-checkout .col-1, .my-checkout .col-2 {
  padding: 0px;
}

/* Removing horizontal padding from fields */
.my-checkout .woocommerce form .form-row{
  padding: 0px;
}


/* You might want to do universal styling for input fields .. so far you have those with contact forms, track order page, contact us page, checkout page, and god knows where else */
/* .my-checkout .woocommerce form .form-row input.input-text, .my-checkout .woocommerce form .form-row textarea { */ /* temp apply thos to all woocommerce forms */
.woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea {
    width: 100%;
    padding: 15px;
    margin-bottom: 10px;
    border: 1px solid #bbb;
    border-radius: 5px;
}

/* The country list drop down styling */ /* since it is diffrent than the above fields :p */
.my-checkout .select2-selection {
  height: 54px;
  margin-bottom: 10px;
}


.my-checkout .select2-selection__rendered {
  padding-top: 11px;
}

/* Increase the width of the discription fields in the shop items table */
.my-checkout .woocommerce table.shop_table td {
  /*width: 100%;*/
  width: 50%;
}


/*style the payment options box in checkout page */
.woocommerce-checkout #payment {
    background: #fff;
    border-radius: 5px;
    border: 1px solid #3083c6;
}

.woocommerce-checkout #payment div.payment_box {
    background-color: #f7f7f7;
}

.woocommerce-checkout #payment div.payment_box::before {
  border: 1em solid #3083c6;
  border-left-color: transparent;
  border-right-color: transparent;
  border-top-color: transparent;
}




/* Styling Stripe fields */

/* Remove stripe image
.woocommerce-checkout #payment ul.payment_methods li img {
  display: none;
}*/

/* styling credit card images .. don't let this scare you, ots just 4 classes one for the placeholder image and 3 for each diffrent brand */
.rtl .woocommerce-checkout #payment ul.payment_methods li .stripe-credit-card-brand, .rtl .woocommerce-checkout #payment ul.payment_methods li .stripe-visa-brand, .rtl .woocommerce-checkout #payment ul.payment_methods li .stripe-mastercard-brand, .rtl .woocommerce-checkout #payment ul.payment_methods li .stripe-amex-brand{
  right: auto;
  left: 10px;
}

.wc-stripe-elements-field{
  padding: 15px !important;
  border-radius: 5px;
}

.woocommerce-checkout #payment div.payment_box .form-row {
  padding: 0px 10px;
}

@media only screen and (max-width: 991px){
  .woocommerce .woocommerce-checkout-payment .form-row {
    width: 100%;
  }
}



/* style place order button in checkout page */
#place_order {
    width: 100%;
    margin-top: 10px;
}


/* Changing Pay on Delivery text to red color */
.woocommerce-checkout #payment div.payment_box p:last-child {
    color: red;
}




/*-----------------------------------------*/
/*-----------------------------------------*/










/*----------------------*/
/* Woocommerce Notices */
/*----------------------*/



/* Styling notices */
.woocommerce-message::before {
  color: #3083c6;
}

.woocommerce-message {
  border-top-color: #3083c6;
  // below is kinda risky .. check to make sure it looks nice everywhere other than notice on adding product to cart
  border-bottom-right-radius: 5px;
  border-bottom-left-radius: 5px;
}




/*-----------------------------------------*/
/*-----------------------------------------*/










/*----------------------*/
/* Track Order Page */
/*----------------------*/



.my-track-order .woocommerce form .form-row{
    padding: 10px 0px;
}

.my-track-order .woocommerce form .form-row input.input-text {
  padding: 15px;
}

.my-track-order .woocommerce-order-details__title {
  margin-bottom: 25px;
}

/* Making fields full width on mobile */
@media only screen and (max-width: 991px){
.my-track-order .woocommerce .form-row {
  float: none;
  width: auto;
}
}


/*-----------------------------------------------------*/
/*-----------------------------------------------------*/







/*----------------------*/
/* Woocommerce headers in track order, cart, checkout pages, search reults, category titels */
/*----------------------*/


/*.my-track-order .woocommerce-order-details__title, .my-cart .cart_totals h2, .my-checkout .cart_totals h2, .page-title, {
  margin-bottom: 25px;
}*/

.woocommerce-order-details__title, .woocommerce-column__title, .cart_totals h2, .page-title {
  margin-bottom: 25px;
}


/*-----------------------------------------------------*/
/*-----------------------------------------------------*/



/*----------------------*/
/* Woocommerce order details */
/*----------------------*/



.woocommerce-column {
  margin-bottom: 2em;
}


/*-----------------------------------------------------*/
/*-----------------------------------------------------*/





/*----------------------*/
/* Woocommerce pagination */
/*----------------------*/

.woocommerce-pagination {
  margin: 0 0 2.992em;
}



/*-----------------------------------------------------*/
/*-----------------------------------------------------*/






/* Blog Styling*/
/*----------------------------------------------------------------------------------*/


/* Color Theme of Blog Main page and Blog posts */

/* Seperators color */
.post-color-theme .small-separator, .my-single-post .comment-body .reply a:hover, .my-single-post .comment-form-container .form-submit input:hover {
  background-color: #ed5362;
}

.post-color-theme p, .post-color-theme a, .post-color-theme span, .my-single-post .comment-meta a, .my-single-post .comment-body .reply a, .my-single-post .logged-in-as a, .post-color-theme h2, .my-single-post .comment-form-container .form-submit input, .my-single-post .comment-form-container .comment-reply-title a, .my-blog-post-content h2/*, .my-blog-post-content a*/{
  color: #ed5362;
}

.my-single-post .sidebar-section-title {
   border-color: #ed5362;
 }

/* Main blog page and single post pages and category pages*/
.my-post-meta p, .my-single-post-meta p{
  display: inline-block;
}


/*----------------------*/
/* Blog Main Page */
/*----------------------*/

.page-header-container {
background-image: url("../../uploads/Barigallery-blog-header.jpg");
background-size: cover;
background-position: center;
}



@media only screen and (min-width: 992px){

/* Sets height for the header section */
.page-header-container {
  height: 64vh;
}

/* Handeling the overlay inside the header */
.page-header-overlay {
    padding: 50px;
    /*background: rgba(40, 48, 56, 0.81); this is our secondary color but the other one looks better I guess*/
    background: rgba(39,45,55,0.81);
    width: 705px;
    margin: 0px 7%;
}

/* Handling title inisde the header */
.page-header-overlay h1{
  color: white;
  font-size: 80px;
  width: 440px;
}

/* Handling text inisde the header  */
.page-header-overlay p{
  padding-bottom: 22vh;
}

}

@media only screen and (max-width: 991px){

.page-header-container{
  padding: 50px 0px;
}

/* Handeling the overlay inside the header */
.page-header-overlay {
    padding: 50px;
    /*background: rgba(40, 48, 56, 0.81); this is our secondary color but the other one looks better I guess*/
    background: rgba(39,45,55,0.81);
    width: 90%;
    margin: auto;
}



/* Handling title inisde the header */
.page-header-overlay h1{
  color: white;
  font-size: 55px;
}

}

/* Handling text inisde the header  */
.page-header-overlay p{
  color: white;
}

/* Setting border for each blog post */
.my-posts-list .post-summary-border {
  border: 1px solid #d8d8d8;
}

/* Controlling gutter width of columns */ /*this was stupid, could have just used mx-n4 on row and px-4 on column .. forget this trick when I was styling this */
@media only screen and (min-width: 992px){
.my-posts-list.row {
  margin-right: -25px;
  margin-left: -25px;
}

.my-posts-list .col-lg-4 {
  padding-right: 25px;
  padding-left: 25px;
}
}

/* Post title */
.my-posts-list .my-post-title{
font-size: 18px;
}



/* Posts images */
.my-posts-list img {
  width: 100%;
  height: 250px;
  object-fit: cover;
}





/*----------------------*/
/* Blog Posts Single pages */
/*----------------------*/

/* changing general width to make blog posts look sleeker on larger screens */
.my-single-post .my-post-containers {
  max-width: 1080px;
  padding-left: 0px;
  padding-right: 0px;
}

.my-single-post .my-single-post-meta{
  font-size: 20px;
}


.my-single-post .my-single-post-image img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}


@media only screen and (min-width: 992px) {

/* Centers title .. the auto margin because when you give an element a specific width, it jumps to the start of the row instead of being alligned to center */
/* Single post title font size */
.my-single-post .my-single-post-title h1{
  font-size: 51px;
  margin-right: auto;
  margin-left: auto;
  width: 580px;
}

.my-single-post .my-single-post-image{
    height: 50vh;
}



.my-single-post .my-single-post-sidebar {
  border-left: 1px solid #e2e2e2;
  padding-left: 40px;
}
}


@media only screen and (max-width: 991px) {

.my-single-post .my-single-post-title h1{
  font-size: 37px;
}

.my-single-post .my-single-post-image{
      height: 30vh;
}

}

/* Shoadow to define the post content area */
.my-single-post .my-post-content-container {
  box-shadow: 0 5px 10px 0px #ececec;
}

.my-single-post .my-post-titles-in-sidebar {
    list-style: none;
    /* Somehow, for some reason, Mozilla adds right padding to ul elemts only on PC screens when declaring RTL .. this CSS line is merely a giant middle fingre to Mozilla */
    padding-right: 15px; /*I think because its in a col or something as we usually use 0 padding*/
}

.ltr .my-single-post .my-post-titles-in-sidebar {
    list-style: none;
    /* Somehow, for some reason, Mozilla adds right padding to ul elemts only on PC screens when declaring RTL .. this CSS line is merely a giant middle fingre to Mozilla */
    padding-left: 15px; /*I think because its in a col or something as we usually use 0 padding*/
}

.my-single-post .my-post-titles-in-sidebar a {
  font-size: 14px;
}


.my-single-post .my-single-post-aboutus-section {
  background-color: black;
}



/* temp */
/*.my-single-post-comments-section .says {
  display: none;
}*/


.my-single-post .my-single-post-comments-section {
  /*padding: 0px 50px 50px 50px;*/
  /*border: 1px solid #e2e2e2;*/
}

/* Those texts have no html elemnts and had to target their parents */
.my-single-post .my-single-post-comments-section .fn, .my-single-post .my-single-post-comments-section .comment-awaiting-moderation {
  font-style: normal;
}

/* hass to add the .pp-user-avatar because for some reason Bari Gallery avatar doesn't have the parent div with the my-avatar-container class */
.rtl .my-single-post .my-avatar-container, .rtl .my-single-post .pp-user-avatar {
  position: absolute;
  top: 35px; /*30px px padding of column + 5px to accomedate for the 5px padding on text + px to accomodate for font*/
  right: 0;
}

.ltr .my-single-post .my-avatar-container, .ltr .my-single-post .pp-user-avatar {
  position: absolute;
  top: 35px; /*30px px padding of column + 5px to accomedate for the 5px padding on text + px to accomodate for font*/
  left: 0;
}

/* inline block to allow for normal padding */
.my-single-post .my-single-post-comments-section .comment-author .fn {
  display: inline-block;
}

/* Padding between author name, comment awaiting moderation, date and the comment itself .. pushing all these elemnts to account for the absolute poistioning of the avatar */
.my-single-post .my-single-post-comments-section .comment-author .fn, .my-single-post-comments-section .comment-meta, .my-single-post-comments-section .comment-body p, .comment-awaiting-moderation{
  padding: 5px 0px;
}


/* This to allow for the usage of position: absolute on the reply button and avatar */
.my-single-post .comment-body {
  position: relative;
}

/* This fixes any long urls in the comments which will go out of the page on Mobile. */
.my-single-post .comment-body p {
  word-wrap: break-word;
}

@media only screen and (min-width: 992px){

/* reply button styling */
.rtl .my-single-post .reply {
  position: absolute;
  top: 50%;
  left: 0;
}

.ltr .my-single-post .reply {
  position: absolute;
  top: 50%;
  right: 0;
}

/* comments seperators */
.my-single-post .comment-body{
  padding: 30px 80px;
  border-bottom: 1px dotted;
}

/* pushing children replies a bit */
.rtl .my-single-post .children {
  padding-right: 40px;
}

.ltr .my-single-post .children {
  padding-left: 40px;
}

}

@media only screen and (max-width: 991px){
/* comments seperators */
.rtl .my-single-post .comment-body{
  padding: 30px 80px 30px 0px;
  border-bottom: 1px dotted;
}

.ltr .my-single-post .comment-body{
  padding: 30px 0px 30px 80px;
  border-bottom: 1px dotted;
}
}


.my-single-post .reply a {
  background: none;
  color: #3083c6;
  border: 1px solid;
  border-radius: 3px;
  font-size: 20px;
  font-weight: 100;
  padding: 2px 15px 10px 15px;
}

.my-single-post .reply a:hover {
  background-color: #3083c6;
  color: white;
  border: 1px solid transparent;
  border-radius: 3px;
  font-size: 20px;
  font-weight: 100;
  padding: 2px 15px 10px 15px;
  text-decoration: none;
}

.ltr .my-single-post .reply a{
  font-weight: 300;
  padding: 10px 15px;
  font-size: 16px;
}

.ltr .my-single-post .reply a:hover {
  font-weight: 300;
  padding: 10px 15px;
  font-size: 16px;
}



/* Comment reply title */
.my-single-post .comment-reply-title {
  margin-bottom: 20px;
}

/* Comment fields */
.my-single-post .my-post-commentform-field{
  display: block;
  width: 100%;
}

.my-single-post .my-post-commentform-email, .my-single-post .my-post-commentform-name {
  width: 49%;
}


.rtl .my-single-post .my-post-commentform-name {
  float: right;
}

.ltr .my-single-post .my-post-commentform-name {
  float: left;
}


.rtl .my-single-post .my-post-commentform-email {
  float: left;
}

.ltr .my-single-post .my-post-commentform-email {
  float: right;
}


.my-single-post .my-post-commentform-field, .my-single-post .my-post-commentform-email, .my-single-post .my-post-commentform-name{
  border: none;
  padding: 15px;
  margin-bottom: 20px;
}

/* to clear all the above floating */
.my-single-post .comment-form .comment-form-cookies-consent {
  clear: both;
}

/* Ovveride BS inline for label on small screen */
.my-single-post .comment-form .comment-form-cookies-consent label{
  display: inline;
  padding: 0px 7px;
}

/* Submit Comment button */
.my-single-post .form-submit input{
  background: none;
  color: #3083c6;
  border: 1px solid;
  border-radius: 3px;
  font-size: 20px;
  font-weight: 100;
  padding: 2px 15px 10px 15px;
}

.my-single-post .form-submit input:hover {
  background-color: #3083c6;
  color: white;
  border: 1px solid transparent;
  border-radius: 3px;
  font-size: 20px;
  font-weight: 100;
  padding: 2px 15px 10px 15px;
  text-decoration: none;
}

.ltr .my-single-post .form-submit input {
  font-weight: 300;
  padding: 10px 15px;
}

.ltr .my-single-post .form-submit input:hover {
  font-weight: 300;
  padding: 10px 15px;
}






/* Styling post texts ----------------------------------- */


/* Controling font size and heading margins .. a bit risky TBH */
.my-blog-post-content p, .my-blog-post-content li{
  font-size: 17px;
  line-height: 1.7em;
}

@media only screen and (min-width: 992px) {
  .my-blog-post-content p, .my-blog-post-content li {
    text-align: justify;
}
  /* to counter the above when I want to center elemnts */
  .my-blog-post-content .has-text-align-center {
  text-align: center;
  }
}

.my-blog-post-content h2{
  font-size: 24px;
  /*padding-top: 40px;*/
  /*padding-bottom: 20px;*/
  margin-top: 3rem;
  margin-bottom: 1.5rem;
}

.my-blog-post-content .wp-block-image figcaption{
  font-size: 14px;
}

/* spacimg images, videos, and galleries */
.my-blog-post-content .wp-block-image, .my-blog-post-content .wp-block-embed, .my-blog-post-content .wp-block-gallery {
  margin: 1.3em 0;
}

/* Spacing columns .. this is a must since margin on images won't intertwine with magrin from text above the columns since the images will be inside the columns block .. this results in more space at the top than in the bottom since the above paragraph will have a bottom margin but the bottom paragrapth won't have a top margin*/
.my-blog-post-content .wp-block-columns {
    margin-top: 1rem;
    margin-bottom: 1rem;
}


/* Dealing with orderd lists */
.my-blog-post-content ol li {
  margin: 1rem 0;
}



/*-----------------------------------------------------*/
/*-----------------------------------------------------*/







/* Blog Posts Single pages Sections */
/*----------------------------------------------------------------------------------*/



/*----------------------*/
/* Content Table  */
/*----------------------*/


.my-blog-post-content .my-content-table {
  border: 1px solid #0000003b;
  padding: 20px;
  margin-top: 49px;
}


.my-blog-post-content .my-content-table ol{
  padding-right: 0px;
  margin-bottom: 8px;
  list-style: inside decimal;
}

/*.my-blog-post-content .my-content-table ol li{
  padding: 5px 0px;;
}*/

.my-blog-post-content .my-content-table h2 {
  padding-top: 10px;
  margin-top: 0px;
}


/*-----------------------------------------------------*/
/*-----------------------------------------------------*/





/*----------------------*/
/* My CARD  */
/*----------------------*/

.my-blog-post-content .my-card {
  border: 1px solid #0000003b;
  padding: 1.2rem 1.2rem 0.2rem 1.2rem;
  margin: 1.5rem 0px;;
}

.my-card.blue {
  border-color: #3083c6;
}

.my-card.pink {
  border-color: #ed5362;
}

.my-blog-post-content h5{
  margin-bottom: 1rem;
}


/*-----------------------------------------------------*/
/*-----------------------------------------------------*/








/*-----------------------------------------------------------------------------------*/
/* Editor Styles To be Copied to Style.CSS */
/*-----------------------------------------------------------------------------------*/

/* Ligh blue */
.has-blog-1st-background-color {
	background-color: #3083c6;
}

.has-blog-1st-color {
	color: #3083c6;
}


/* Dark blue */
.has-blog-2nd-background-color {
	background-color: #283038;
}

.has-blog-2nd-color {
	color: #283038;
}


/* Old grey */
.has-blog-3rd-background-color {
	background-color: #f1f1f1;
}

.has-blog-3rd-color {
	color: #f1f1f1;
}


/* New grey */
.has-blog-4th-background-color {
	background-color: #f7f7f7;
}

.has-blog-4th-color {
	color: #f7f7f7;
}


/* Green but not really green */
.has-blog-5th-background-color {
	background-color: #57ccc4;
}

.has-blog-5th-color {
	color: #57ccc4;
}


/* Pink */
.has-blog-6th-background-color {
	background-color: #ed5362;
}

.has-blog-6th-color {
	color: #ed5362;
}
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/































/* Upload image page Styling*/
/*----------------------------------------------------------------------------------*/



.page-header-container-uip {
background-image: url("../../uploads/Upload-Pic-1.jpg");
background-size: cover;
background-position: center;
}


/* Handeling title and discreiption padding in header  */
.page-header-title-dis-uip h1, .page-header-title-dis-uip p{
  padding: 10px;
}

.page-header-title-dis-uip h1 {
  font-size: 44px;
}


@media only screen and (min-width: 992px) {

/* tittle and discription container and button */
  .page-header-title-dis-uip {
  padding: 90px 30px;
}

/* this line because the laptop image doesn't look good in the center, its visuals require this */
.margin-adjust-uip img{
  margin-right: 0;
}
}


@media only screen and (max-width: 991px) {

/* tittle and discription container and button */
.page-header-title-dis-uip {
  padding: 40px 30px;
}

/*Controlling Font sizes *//*
.uip-content-container h2{
  font-size: 26px;
}

.uip-content-container p {
  font-size: 14px;
}
*/
}


/* last section */
.last-section-uip {
    max-width: 500px;
    margin-right: auto;
    margin-left: auto;
}

/* spading between the title and text in the last section  */
.last-section-uip h2, .last-section-uip p{
  padding: 15px;
}








/*-----------------------------------------------------*/
/*-----------------------------------------------------*/















/* Contact Page Styling*/
/*----------------------------------------------------------------------------------*/

/* Wasn't able to use BS css here and had to do it the manual way .. have no time to figureout how to use a walker for cf7 */

@media only screen and (min-width: 992px){
.contact-us-container {
  background-image: url("../../uploads/Contact-Us-Bari-Gallery.jpg");
  background-size: cover;
  background-position: center;
}
}

@media only screen and (max-width: 991px){
.contact-us-container {
  background-color: #d8d8d8;
}
}

/* To ovverdie dir="ltr" set by cf7 */
.rtl .contact-us-container .wpcf7 {
  direction: rtl;
}

/* Stupid cf7 adds <br> between fields for one reason on another */
.contact-us-container .wpcf7 br{
  display: none;
}


/* Styling input fields */
.contact-us-container .wpcf7 .au-name, .contact-us-container .wpcf7 .au-email {
  width: 49%;
}

.rtl .contact-us-container .wpcf7 .au-name {
  float: right;
}

.ltr .contact-us-container .wpcf7 .au-name {
  float: left;
}

.rtl .contact-us-container .wpcf7 .au-email {
  float: left;
}

.ltr .contact-us-container .wpcf7 .au-email {
  float: right;
}


.contact-us-container .wpcf7 .wpcf7-text, .contact-us-container .wpcf7 .wpcf7-textarea {
  width: 100%;
  border: none;
  padding: 15px;
  margin-bottom: 20px;
  background-color: #f1f1f1;
  border-radius: 5px;
}


/* Styling the Sumbit button .. this is copy paste from my-blue-blue-button */
.contact-us-container .wpcf7-submit {
  background: none;
  color: #3083c6;
  padding: 5px 15px 10px 15px;
  border: 1px solid;
  border-radius: 3px;
  font-size: 20px;
  font-weight: 100;
}

.ltr .contact-us-container .wpcf7-submit {
  padding: 5px 15px;
  font-weight: 300;
}


.contact-us-container .wpcf7-submit:hover{
  background-color: #3083c6;
  color: white;
  padding: 5px 15px 10px 15px;
  border: 1px solid transparent;
  border-radius: 3px;
  font-size: 20px;
  font-weight: 100;
}

.ltr .contact-us-container .wpcf7-submit:hover {
  padding: 5px 15px;
  font-weight: 300;
}


/*-----------------------------------------------------*/
/*-----------------------------------------------------*/








/* Contact forms Styling*/
/*----------------------------------------------------------------------------------*/


/* To ovverdie dir="ltr" set by cf7 */
.rtl .my-form-submission .wpcf7 {
  direction: rtl;
}

.my-form-submission .wpcf7 p label {
  width: 100%;
}

.my-form-submission .wpcf7 p label input {
  margin-top: 10px;
}

.my-form-submission .wpcf7 .wpcf7-text, .my-form-submission .wpcf7 .wpcf7-number {
  width: 100%;
  padding: 15px;
  margin-bottom: 10px;
  border: 1px solid #bbb;
}

/* Styling the Sumbit button .. this is copy paste from my-blue-blue-button */
.my-form-submission  .wpcf7-submit {
  background: none;
  color: #3083c6;
  padding: 5px 15px 10px 15px;
  border: 1px solid;
  border-radius: 3px;
  font-size: 20px;
  font-weight: 100;
}


.my-form-submission  .wpcf7-submit:hover{
  background-color: #3083c6;
  color: white;
  padding: 5px 15px 10px 15px;
  border: 1px solid transparent;
  border-radius: 3px;
  font-size: 20px;
  font-weight: 100;
}


/* to hide the stupid error messages displaying twice */
.screen-reader-response {
  display: none;
}


/* Make error messages in red */
.wpcf7-not-valid-tip, .wpcf7-response-output {
  color: red;
}



/*-----------------------------------------------------*/
/*-----------------------------------------------------*/






/* Print Size Styling*/
/*----------------------------------------------------------------------------------*/


/* Styling the calculated field inside Printing Size post .. You need to change this if you change the padding and margins of h2 on blog posts */
.my-post-containers #fbuilder .field {
  /*background-color: #f2f2f2;*/
  border: none;
  padding: 7px 10px;
  border-radius: 5px;
  color: #666;
}

.my-post-containers #fbuilder  {
  padding-top: 10px;
}

.my-post-containers #fbuilder .fform h2 {
  padding-bottom: 10px;
}

.my-post-containers #fbuilder .section_break {
  margin: 30px 0px;
}

.my-post-containers #fbuilder .cff-comment-under-field {
  margin-top: 14px;
}

/*-----------------------------------------------------*/
/*-----------------------------------------------------*/










/* Flex Slider and Magnific Popup Styling*/
/*----------------------------------------------------------------------------------*/

/* Forgot what does this do */ /*this ended up screwing the youtube video on main page*/
.mfp-iframe-holder .mfp-content {
  /*max-width: 1920px !important;*/
}

/* fix Magnific Popup Counter that counts the number of images */
.mfp-counter {
  direction: ltr;
}

/* set the curoser to pointer on the X mark that closes the popup instead of the zoom pointer */
.mfp-zoom-out-cur .mfp-image-holder .mfp-close {
  cursor: pointer !important;
}


/* Styling the Nav Arrows */

.flex-direction-nav a {
  font-family: 'Material Icons' !important;
  font-size: 30px;
}


/* position the arrow out of the gallery image and hide it to then position it back on hovere inside to and show it to creat the moving arrow effect */
li.flex-nav-prev {
  position: absolute;
  top: 50%;
  left: -10%;
  z-index: 99;
  transform: translate(0%,-50%);
  transition: all 0.2s ease-in-out;
  opacity: 0;
}

/* Position it back inside and show it on hover */
.gallery:hover li.flex-nav-prev {
  left: 0;
  opacity: 1;
}

/* position the arrow out of the gallery image and hide it to then position it back on hovere inside to and show it to creat the moving arrow effect */
li.flex-nav-next {
  position: absolute;
  top: 50%;
  right: -10%;
  z-index: 99;
  transform: translate(0%,-50%);
  transition: all 0.2s ease-in-out;
  opacity: 0;
}

/* Position it back inside and show it on hover */
.gallery:hover li.flex-nav-next {
  right: 0;
  opacity: 1;
}

/* Overrite the above CSS to make arrows always visiable not just on hover */
@media only screen and (max-width: 991px){
  li.flex-nav-prev {
    left: 0;
    opacity: 1;
  }

  li.flex-nav-next {
    right: 0;
    opacity: 1;
  }

}



/* Styling the Nav controls */
/* Copy Paste from flex slider css to style controls - changed them a bit tho*/ /* because I am not loading the flex slider css on woocommerce pages cause its just too much work .. or is it ?*/
.flex-control-nav {
    width: 100%;
    position: absolute;
    bottom: -40px;
    text-align: center;
}
.slides, .slides > li, .flex-control-nav, .flex-direction-nav {
    margin: 0;
    padding: 0;
    list-style: none;
}

.flex-control-nav li {
    margin: 0 6px;
    display: inline-block;
    zoom: 1;
    /*display: inline;*/
}


.flex-control-paging li a.flex-active {
    background: #3083c6;
    cursor: default;
}

.flex-control-paging li a {
    width: 11px;
    height: 11px;
    display: block;
    background: #666;
    background: rgb(192, 192, 192);
    cursor: pointer;
    text-indent: -9999px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
}


/* This is essential to hide the 1px or 2px overlap on the slick slider .. was removed because changed the slider to fade and it fixed the issue since slides aren't stacked next to eachother anymore
.woocommerce-product-gallery__image{
   position: relative;
   right: -1px;
}*/


/* To avoid jumping affect -- those images will be set to display block when the js loads */
.woocommerce div.product div.images .woocommerce-product-gallery__image:nth-child(n+2){
  display: none;
}

/* Javascript be doing height calculations and stuff .. this line gets shit done the right way (so when f12 is toggeled the images will be in the right height) */
.woocommerce-product-gallery .flex-viewport {
  height: 100% !important;
}

/* Javascript be adding inline transitions and fading in effects .. this line gets shit done the right way (so gallery images show right when you load the page) */
.woocommerce-product-gallery {
  transition: none !important;
}



/*-----------------------------------------------------*/
/*-----------------------------------------------------*/


/* Log in And Sign up Pages Styling*/
/*----------------------------------------------------------------------------------*/


.headless-page-content{
  background-image: url("../../uploads/loging-signup-background-lock0.jpg");
  background-size: cover;
  background-position: right;
  display: flex;
}


.login-signup-container {
  margin-top: auto;
  margin-bottom: auto;
  max-width: 830px;
}

.login-signup-container p{
  font-size: 14px;
}

/* to prevent iphone from zooming in on user input */
.login-signup-container input {
  font-size: 16px;
}

.login-signup-container .row{
  background-color: white;
}


/* For PC */
@media only screen and (min-width: 992px){
.headless-page-content{
  height: 100vh;
}
}

/* For Mobile */
@media only screen and (max-width: 991px){
.login-signup-container{
  width: 100%;
}
}



/* The form column .................. */


/* Close form */
.close-login-signup {
  position: absolute;
  top: 10px;
  right: 10px;
}

.login-signup-container .login-signup-form-col h2{
  font-size: 26px;
  padding-bottom: 10px;
}

.login-signup-container .login-signup-header-container {
  margin-bottom: 40px;
}

/* overriding BootStrap Conflict with woocommerce and making colom full width and adding margin for styles */
.login-signup-container .woocommerce .col-1, .login-signup-container .woocommerce .col-2{
  max-width: none;
  width: 100%;
  margin-bottom: 30px;
  padding: 0px;
}

/* Hidig Sign up form on Login Page and Hiding Log in form on Sign up page */
.login-signup-container.my-login-form .u-column2{
  display: none;
}

.login-signup-container.my-signup-form .u-column1{
  display: none;
}


/* Hiding default woo commerce form title */
.login-signup-container .woocommerce h2 {
  display: none;
}

.login-signup-container .woocommerce form.login, .login-signup-container .woocommerce form.register {
  border: none;
  margin: 0px;
  padding: 0px;
}


.login-signup-container .woocommerce form .form-row input.input-text, .login-signup-container .woocommerce form .form-row textarea {
  border: 0;
  border-bottom: 1px solid black;
  margin-bottom: 30px;
  outline: none;
  border-radius: 0;
}

/* Fixes the password eye icon poisiton */
.woocommerce form .show-password-input, .woocommerce-page form .show-password-input {
  top: 0em;
}


/* Fixes Woocommerce login and Sign up forms conflict with bootstrap .. because the label and input field come next to each other*/
.woocommerce .form-row, .woocommerce .woocommerce-form-login .woocommerce-form-login__rememberme {
  display: block;
}


.login-signup-container .anr_captcha_field {
  margin-top: 10px;
}

.login-signup-container .woocommerce .woocommerce-form-login .woocommerce-form-login__submit,  /* add tis if you want to use recaptcha V3 >> .login-signup-container .woocommerce .woocommerce-form-register .woocommerce-form-register__submit */{
  margin-top: 15px;
}

.login-signup-container .woocommerce {
  margin-bottom: 20px;
}







/* The Image column .................. */
.login-signup-container .login-signup-img-col{
  background-image: url("../../uploads/Login-and-Sign-Up-welcome.jpg");
  background-size: cover;
}

.login-signup-container .login-signup-img-col h2, .login-signup-container .login-signup-img-col p {
  color: white;
}

.login-signup-container .login-signup-img-col h2 {
  margin: 30% 0px 20% 0%;
  width: 80%;
  font-size: 38px;
  font-weight: bold;
}

.login-signup-container .login-signup-img-col p {
  width: 80%;
}



/*-----------------------------------------------------*/
/*-----------------------------------------------------*/













/* Styling for pages like prcing page, upload image form page, sell your art page .. etc*/
/*----------------------------------------------------------------------------------*/

.sell-art-note {
    border: 1px solid #3083c6;
    padding: 15px 15px 5px;
    margin: 0px 0px 40px;
}



/*-----------------------------------------------------*/
/*-----------------------------------------------------*/

















/* Styling 404 Page*/
/*----------------------------------------------------------------------------------*/

.page-container-404 h1{
  font-size: 80px;
  color: #484848;
  font-weight: 600;
}

.page-container-404 h2{
  font-size: 20px;
  color: #484848;
}







/*-----------------------------------------------------*/
/*-----------------------------------------------------*/






/* Back to top button */
/*----------------------------------------------------------------------------------*/



/* Had to use the classes together so this CSS would be above the .material-icons icons CSS which has the class display:inline-block .. another cache issue */
.topbutton.material-icons {
     position: fixed;
     bottom: 125px;
     display: none;
     cursor: pointer;
     border-top-left-radius: 5px;
     border-bottom-left-radius: 5px;
     color:white;
     background: rgba(0, 0, 0, 0.4);
     padding: 10px;
     z-index: 9999;
     right: 0;
}


/*-----------------------------------------------------*/
/*-----------------------------------------------------*/







/* Styling Size Calculator page*/
/*----------------------------------------------------------------------------------*/



/* Page header */
.page-header-container-sc {
background-image: url("../../uploads/size-calculator-background.jpg");
background-size: cover;
background-position: center;
}


@media only screen and (min-width: 992px){
/* Sets height for the header section */
.page-header-container-sc {
  height: 64vh;
}
}

@media only screen and (max-width: 991px){
.page-header-container-sc{
  padding: 50px 0px;
}
}



/* Styling header
.size-calculator-header {
  position: relative;
}


  .size-calculator-header::before {
  content: "";
  position: absolute;
  display: block;
  height: 50vh;
  left: 0;
  right: 0;
  background-color: #D9F7FA;
  -webkit-transform: skewY(6.25deg);
  transform: skewY(6.25deg);
  -webkit-transform-origin: 100%;
  transform-origin: 100%;
}*/



/* Stying card */
.size-calculator {
  /*margin-top: -500px;*/
  border-radius: 10px;
  max-width: 100%; /* to stop the whole calculator from shifting left when the image name is too long */
}

/* Border radius for the first card */
.mycalcard-first .mycalcard-label {
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
}

/*Border radius and divider for the last cards on pc and mobile */
@media only screen and (min-width: 992px){

  .mycalcard-1st-last{
    border-left: 1px solid #57ccc4;
  }

  .rtl .mycalcard-1st-last .mycalcard-footer{
    border-bottom-right-radius: 10px;
  }

  .rtl .mycalcard-2nd-last .mycalcard-footer{
    border-bottom-left-radius: 10px;
}

  .ltr .mycalcard-1st-last .mycalcard-footer{
    border-bottom-left-radius: 10px;
  }

  .ltr .mycalcard-2nd-last .mycalcard-footer{
    border-bottom-right-radius: 10px;
  }

}

@media only screen and (max-width: 991px){

  .mycalcard-1st-last{
    border-bottom: 1px solid #57ccc4;
  }

  .mycalcard-2nd-last .mycalcard-footer {
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
  }

}

/* Stying card header and footer */
.size-calculator .mycalcard .mycalcard-label, .size-calculator .mycalcard .mycalcard-footer  {
background-color: #232a31;
}


/* Stilying the file drop area */
.file-drop-area {
  position: relative;
  max-width: 100%;
  padding: 50px;
  border: 1px dashed #57ccc4;
  border-radius: 10px;
  transition: 0.2s;
  background-color: rgba(255, 255, 255, 0.04);
  margin: auto;
}

.file-drop-area.is-active {
  background-color: rgba(255, 255, 255, 0.05);
}

.fake-btn {
  display: inline-block;
  flex-shrink: 0;
  background-color: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 3px;
  padding: 8px 15px;
  margin: 10px;
  font-size: 12px;
  text-transform: uppercase;
}

.file-msg {
  font-size: small;
  font-weight: 300;
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block; /* so we can use the following CSS */
  max-width: 100%; /* to force the text to respect the padding and not break out of the parent Div */
}

.file-input {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  cursor: pointer;
  opacity: 0;
}

.file-input:focus {
  outline: none;
}



/* Styling input fields in the calculator*/
#mywidth, #myheight, #arwidth-1, #arheight-2 {
  border-bottom: 1px solid #57ccc4;
  border-radius: 0px;
  width: 80px;
  margin: auto;
}



/* this removes the steppers on input fiels */
/* Chrome, Safari, Edge, Opera */
.size-calculator input::-webkit-outer-spin-button,
. size-calculator input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
.size-calculator input[type=number] {
  -moz-appearance: textfield;
}

.size-calculator input, .size-calculator input[readonly] {
border: 0px;
background: #283038 !important;
box-shadow: none !important;
}



/*-----------------------------------------------------*/
/*-----------------------------------------------------*/



.page-header-container-sc {
  /*height: auto;*/
}

.page-header-bg{
  background-image: url("../../uploads/size-calculator-background.jpg");
  border-radius: 10px;
}

/* .............................................................. */



.close-message-container{
  /*display: none;*/
  display: flex;
  position: absolute;
  inset: 0px;
  width: 100%;
  height: 100%;
  background-color: #040404d9;
  z-index: 9999;
}


.close-message-wrapper {
  max-width: 600px;
}