/* =================================================================== 
 *
 *  Transcend v1.0 Main Stylesheet
 *  03-19-2018
 *  ------------------------------------------------------------------
 *
 *  TOC:
 *  # base style overrides
 *    ## links
 *  # typography & general theme styles
 *    ## Lists
 *    ## responsive video container
 *    ## floated image
 *    ## tables
 *    ## Spacing 
 *    ## pace.js styles - minimal
 *  # preloader
 *  # forms
 *    ## Style Placeholder Text
 *    ## Change Autocomplete styles in Chrome
 *  # buttons
 *  # additional components
 *    ## alert box
 *    ## additional typo styles
 *    ## skillbars
 *  # reusable and common theme styles
 *    ## display headings
 *  # header styles
 *    ## header logo
 *    ## main navigation
 *    ## mobile menu toggle 
 *  # home
 *    ## home content
 *    ## home sidelinks
 *    ## home scroll
 *    ## home scroll
 *    ## home animations
 *  # about
 *    ## about process
 *  # services
 *    ## services list
 *  # works
 *    ## bricks/masonry
 *  # testimonials
 *  # stats 
 *  # contact 
 *    ## contact social
 *    ## subscribe
 *    ## copyright
 *    ## go to top
 *
 * =================================================================== */

/* ===================================================================
 * # base style overrides
 *
 * ------------------------------------------------------------------- */
body {
  direction: rtl;
}
.home-sidelinks {
  right: unset;
  left: 0;
}

.home-sidelinks li {
  text-align: right;
}
.home-content__main {
  padding-top: 15rem;
  padding-left: 20rem;
  position: relative;
}

.header-logo {
  right: 25px;
  left: unset;
  top: 55px;
}
@media only screen and (max-width: 1600px) {
  .header-menu-toggle {
    right: 60px;
  }
}
.header-menu-toggle {
  position: fixed;
  left: 25px;
  top: 42px;
  right: unset;
}
.header-menu-toggle::before {
  content: "القائمة";
  left: 100%;
  right: unset;
}
.home-content__main {
  padding-right: unset;
  padding-left: 20rem;
}
@media only screen and (max-width: 1600px) {
  .home-social {
    right: 60px;
    left: unset;
  }
}

.home-social {
  left: unset;
  right: 110px;
}

@media only screen and (max-width: 1600px) {
  .home-scroll {
    left: 60px;
    right: unset;
  }
}
.home-scroll {
  left: 110px;
  right: unset;
}

.home-scroll__text {
  left: 7.5rem;
  right: unset;
}
.home-scroll__icon {
  left: 0;
  right: unset;
}

.display-1 {
  font-family: "IBM Plex Sans Arabic", sans-serif;
}
* {
  font-family: "IBM Plex Sans Arabic", sans-serif;
}
.home-content h1 {
  font-family: "IBM Plex Sans Arabic", sans-serif;
}
.item-folio__title {
  font-family: "IBM Plex Sans Arabic", sans-serif;
  font-weight: bold;
}
.item-folio__cat {
  font-family: "IBM Plex Sans Arabic", sans-serif;
}
.home-sidelinks a {
  display: block;
  padding: 2.1rem 4rem 2.1rem 15rem;
  color: #ffffff;
}
.home-sidelinks li::before {
  right: 2rem;
  left: unset;
}
.menu-is-open .header-nav {
  -webkit-transform: translateX(0);
  -ms-transform: translateX(0);
  transform: translateX(0);
  visibility: visible;
  -webkit-overflow-scrolling: touch;
}
.header-nav {
  left: 0;
  top: 0;
  right: unset;
  overflow-y: hidden;
  overflow-x: auto;
  -webkit-transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  -webkit-transform: translateX(100%);
  -ms-transform: translateX(100%);
  transform: translateX(100%);
}
/*# sourceMappingURL=main.css.map */
@media only screen and (max-width: 600px) {
  .home-content__main {
    width: auto;
    padding-left: 35px;
    padding-right: 35px;
  }
}
@media only screen and (max-width: 800px) {
  .home-content__main {
    max-width: 580px;
  }
}

@media only screen and (max-width: 1000px) {
  .home-content__main {
    max-width: 650px;
    padding-right: 35px;
  }
}
@media only screen and (max-width: 1000px) {
  .home-content__main {
    max-width: 650px;
    /* padding-right: 0; */
  }
}
@media only screen and (max-width: 1200px) {
  .home-content__main {
    max-width: 850px;
  }
}
@media only screen and (max-width: 1400px) {
  .home-content__main {
    max-width: 1000px;
  }
}
@media only screen and (max-width: 1500px) {
  .home-content__main {
    max-width: 1100px;
  }
}
.home-social .home-social-title {
  /* padding-right: unset;
  margin-right: unset;
  padding-left: 4rem;
  margin-left: 0.8rem; */
}
.home-social {
  right: 110px;
  left: unset;
}
@media only screen and (max-width: 600px) {
  .home-social {
    right: 30px;
    left: unset;
    bottom: 6rem;
    bottom: 6rem;
  }
}

@media only screen and (max-width: 800px) {
  .home-social {
    right: 40px;
    left: unset;
  }
}
@media only screen and (max-width: 1600px) {
  .home-social {
    right: 60px;
    left: unset;
  }
}

@media only screen and (max-width: 600px) {
  .home-scroll {
    left: 30px;
    right: unset;
    bottom: 6rem;
  }
}
@media only screen and (max-width: 800px) {
  .home-scroll {
    left: 40px;
    right: unset;
  }
}
@media only screen and (max-width: 1600px) {
  .home-scroll {
    left: 40px;
    right: unset;
  }
}
.cl-go-top {
  right: unset;
}
@media only screen and (max-width: 1600px) {
  .cl-go-top {
    left: 55px;
    right: unset;
  }
}
.cl-go-top::after {
  content: "العودة إلى الأعلى";
}

p.lead {
  font-family: "IBM Plex Sans Arabic", sans-serif;
}
.subhead {
  font-family: "IBM Plex Sans Arabic", sans-serif;
}
.h4 {
  font-weight: bold;
  font-family: "IBM Plex Sans Arabic", sans-serif;
}
.header-nav h3 {
  text-align: left;
}
p {
  font-family: "IBM Plex Sans Arabic", sans-serif;
}
.mc-form input[type="phone"] {
  padding: 1.2rem 20px 1.2rem 150px;
}
.mc-form input[type="submit"] {
  right: unset;
  left: 0;
}
.btn,
button,
input[type="submit"],
input[type="reset"],
i§nput[type="button"] {
  font-size: 1.4rem;
  letter-spacing: unset;
}
.subscribe {
  font-family: "IBM Plex Sans Arabic", sans-serif;
}
.float{
	position:fixed;
	width:60px;
	height:60px;
  padding-top: 4px;
  padding-bottom: 5px;
	bottom:40px;
	left:25px;
	background-color:black;  
  filter: alpha(opacity=50);  
 -moz-opacity: 0.5;  
 -khtml-opacity: 0.5;  
  opacity: 0.5;
	color:#FFF;
	border-radius:50%;
	text-align:center;
  font-size:30px;	
  z-index:350340503450340;
}

.my-float{
	margin-top:16px;
}