body {
    font-family: "JF Flat Regular";
    direction: rtl;
}

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

Navigation

-------------------------------- */
.cd-side-navigation {
    right: 0;
    left: auto;
}

.cd-side-navigation::before {
    right: 0;
    left: auto;
}

.cd-side-navigation a svg {
    right: 50%;
    left: auto;
}

.cd-side-navigation a .Border {
    left: -4px;
    right: auto;
}

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

}


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

 Main Content

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

.cd-section {
    right: 0;
    padding-right: 106px;
    left: auto;
    padding-left: 0;
}

.cd-section header i {
    right: 0;
    left: 0;
}



.cd-title {
    right: 0;
    left: auto;
}
/* -------------------------------- 

 Loading Bar

-------------------------------- */
#cd-loading-bar {
    right: 70px;
    left: auto;
}

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

    /* -------------------------------- 
    
     Loading Bar
    
    -------------------------------- */
    #cd-loading-bar {
        right: 70px;
        left: auto;
    }

}


/*
* End Of Library
*/
/* -------------------------------- 

Main Components 

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

.cd-horizontal-timeline .events-wrapper::before {
    right: 0;
    background-image: -webkit-linear-gradient( right , #f8f8f8, rgba(248, 248, 248, 0));
    background-image: linear-gradient(to left, #f8f8f8, rgba(248, 248, 248, 0));
    left: auto;
}

.cd-horizontal-timeline .events-wrapper::after {
    left: 0;
    background-image: -webkit-linear-gradient( left , #f8f8f8, rgba(248, 248, 248, 0));
    background-image: linear-gradient(to right, #f8f8f8, rgba(248, 248, 248, 0));
    right: auto;
}

.cd-horizontal-timeline .events {
    right: 0;
    left: auto;
}

.cd-horizontal-timeline .filling-line {
    right: 0;
    -webkit-transform-origin: right center;
    -moz-transform-origin: right center;
    -ms-transform-origin: right center;
    -o-transform-origin: right center;
    transform-origin: right center;
    left: auto;
}

.cd-horizontal-timeline .events a::after {
    right: 50%;
    left: auto;
}

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

}

.cd-timeline-navigation a::after {
    right: 50%;
    left: auto;
}

.cd-timeline-navigation a.prev {
    right: 0;
    left: auto;
}

.cd-timeline-navigation a.next {
    left: 0;
    right: auto;
}

.cd-horizontal-timeline .events-content li {
    right: 0;
    left: auto;
}

.cd-horizontal-timeline .events-content li.enter-left, .cd-horizontal-timeline .events-content li.leave-left {
    -webkit-animation-name: cd-enter-left;
    -moz-animation-name: cd-enter-left;
    animation-name: cd-enter-left;
}

.cd-horizontal-timeline .events-content li.enter-right, .cd-horizontal-timeline .events-content li.leave-right {
    -webkit-animation-name: cd-enter-right;
    -moz-animation-name: cd-enter-right;
    animation-name: cd-enter-right;
}

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

}


/*
* When Page Load
*/

/*
* Mouse Background
*/

/* Common style */

.grid figure figcaption,
.grid figure figcaption > a {
    right: 0;
    left: auto;
}

figure.effect-julia p {
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
    -webkit-transform: translate3d(420px,0,0);
    transform: translate3d(420px,0,0);
}
/* Anchor will cover the whole item by default */
/* For some effects it will show as a button */

/* Individual effects */
/*---------------*/
/***** Julia Blogger Design *****/
/*---------------*/

figure.effect-julia figcaption {
    text-align: right;
}

/* ContactUs Button Rayen */

.button--rayen::before {
    right: 0;
    left: auto;
}

/* Grid */

/* General link styles Big Title */

/* Mallki */

.link--mallki::before {
    right: 0;
    left: auto;
}

.link--mallki span {
    right: 0;
    left: auto;
}

.link--mallki span::before {
    right: 0;
    left: auto;
}


/**************************************************
***************** SiteContainer *******************
**************************************************/

.RightContainer {
    padding-right: 110px;
    padding-left: 0;
}

.SiteContainer .Menu {
    right: 0;
    left: auto;
}

.SiteContainer .Menu li a {
    text-align: right !important;
    padding: 10px 10px 20px 0;
}


/**************************************************
******************* AboutUs  **********************
**************************************************/

.SmallDes {
    text-align: right;
}
.AboutMe .NewTitle {
    font-family: "JF Flat Medium";
    margin-bottom: 20px;
}
.AboutMe .NewDes {

line-height: 25px;
font-weight: normal;
}
.AboutMe .Details {
    margin-right: 55px;
    margin-left: auto;
}

.AboutMe h1 {
    margin-right: 0;
    margin-left: auto;
}

.AboutMe h1:after {
    border-right: 0;
    left: -20px;
    right: auto;
    border-left: none;
}

.AboutMe h1:before {
    border-left: 0;
    right: -20px;
    left: auto;
    border-right: none;
}

.AboutMe .Details .Photo {
    float: right;
    margin-left: 25px;
    margin-right: auto;
}

.AboutMe .Details .Photo:after {
    border-right: 0;
    left: -20px;
    right: auto;
    border-left: none;
}

.AboutMe .Details .Photo:before {
    border-left: 0;
    right: -20px;
    left: auto;
    border-right: none;
}

.AboutMe .Details .Des {
    float: right;
}


/*    .AboutMe .SmallSizeOnly */

/**************************************************
***************** Responsive *********************
**************************************************/



/**************************************************
*********** PersonalInformation   ****************
**************************************************/

.Paragraphes p {
    padding-right: 35px;
    padding-left: 0;
}

.Paragraphes p:before {
    border-right: 1px solid #d0d0d0;
    right: 20px;
    left: auto;
    border-left: none;
}

/**************************************************
***************** Responsive *********************
**************************************************/

@media screen and (min-width:0px) and (max-width:780px) {

    .Paragraphes p:before {
        border-right: 1px solid #d0d0d0;
        right: 20px;
        left: auto;
        border-left: none;
    }

}

@media screen and (min-width:0px) and (max-width:780px) {

    .Paragraphes p:before {
        border-right: 1px solid #d0d0d0;
        right: 20px;
        left: auto;
        border-left: none;
    }
}

/**************************************************
************* ContactInformation   ****************
**************************************************/

/**************************************************
***************** Responsive *********************
**************************************************/
@media screen and (min-width:780px) and (max-width:1200px) {

}

@media screen and (min-width:0px) and (max-width:780px) {

}

@media screen and (min-width:0px) and (max-width:480px) {

}


/**************************************************
************* Education   ****************
**************************************************/

.EducationPage .Title span {
    left: 5px;
    right: auto;
}

.EducationPage ul li {
    padding-right: 15px;
    padding-left: 0;
}

.EducationPage ul li:before {
    right: 0;
    left: auto;
}

.EducationPage ul li p {
    margin-right: 0;
    margin-left: auto;
}

.EducationPage .col-md-4:first-child ul li:nth-child(2):after {
    left: 20px;
    right: auto;
}

.EducationPage .col-md-4:nth-child(2) ul li:nth-child(3):after {
    right: -90px;
    left: auto;
}


.EducationPage .col-md-4:nth-child(2) ul li:nth-child(3):after {
    right: 10px;
    left: auto;
}



/**************************************************
**************** WorkExperience   ****************
**************************************************/

.WorkExperience .Paragraphes p span:not(:first-child) {
    padding-right: 80px;
    padding-left: 0;
}

.WorkExperienceTimeline .OneExperinece {
    padding-right: 220px;
    padding-left: 0;
}

.WorkExperienceTimeline .OneExperinece .RightSide {
    right: 40px;
    left: auto;
}

.WorkExperienceTimeline .OneExperinece .RightSide:before {
    right: 0;
    left: 0;
}

.WorkExperienceTimeline .OneExperinece .RightSide:after {
    right: 0;
    left: 0;
}

.WorkExperienceTimeline .OneExperinece .RightSide .Date {
    text-align: left;
    left: 140px;
    right: auto;
}

.WorkExperienceTimeline .OneExperinece .Title {
    margin-right: -12px;
    margin-left: auto;
}

.WorkExperienceTimeline .OneExperinece .Title:before {
    right: -10px;
    left: auto;
}

.WorkExperienceTimeline .OneExperinece .Des p:before {
    margin-left: 7px;
    margin-right: auto;
}

.WorkExperienceTimeline .OneExperinece .Des p span {
    margin-right: 10px;
    margin-left: auto;
}


.WorkSlider .Date:after {
    left: 0;
    right: 0;
}

.WorkSlider .Details li {
    float: right;
    text-align: left;
}

.WorkSlider .Details li .Number {
    text-align: left;
}

.WorkSlider .Details li p {
    text-align: left;
    text-align: left;
}

.WorkSlider .Details li p:before {
    left: -40px;
    right: auto;
}

.WorkSlider .Details li:nth-child(2n) {
    float: left;
    text-align: right;
}

.WorkSlider .Details li:nth-child(2n) p:before {
    left: initial;
    right: -40px;
}

.WorkSlider .Details li:nth-child(2n) .Number,
.WorkSlider .Details li:nth-child(2n) p {
    text-align: right;
}

.WorkSlider .Details li p:after {
    right:0;
    left: auto;
}

@media screen and (min-width:0px) and (max-width:480px) {
    .WorkExperience .cd-content {
        padding: 50px 0;
    }
    .SmallDes {
        font-size: 20px;
    }
}

@media screen and (min-width:0px) and (max-width:660px) {
    .WorkSlider .Details li {
        max-width: 100%;
        float: none;
        text-align: right;
        padding-right: 40px;
        padding-left: auto;
    }
    .WorkSlider .Details li p {
        text-align: left;
    }
    .WorkSlider .Details li p::before {
        left: initial;
        right: -40px;
    }
    .WorkSlider .Details li .Number {
        text-align: right;
    }
    .WorkSlider .Details {
        background-image: none;
        padding: 0 15px;
    }
    .WorkSlider .Date::after {
        display: none;
    }
    .WorkSlider .Date{
        margin-bottom: 30px;
    }

}


/**************************************************
******************** Blogger  *********************
**************************************************/
.ViewTopic .Details,
.ShareTopic {
    direction: ltr;
}
.ViewTopic .Details li i {
    -ms-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}
.ViewTopic .Details li i {
    margin-left: 10px;
    margin-right: auto;
}

.ViewTopic .Details li:last-child {
    float: left;
}


/**************************************************
******************** Blogger  *********************
**************************************************/

.ViewTopic .Details li i {
    margin-right: 10px;
    margin-left: auto;
}

.ViewTopic .Details li:last-child {
    float: right;
}
#toast-container {
    font-size: 18px;
    font-family: "JF Flat Regular";
}


.ResponsiveMenu {
    margin-right: 20px;
    margin-left: auto;
}

.cd-section.Close {
    padding-right: 56px;
    padding-left: 0;
}

.BigTitle  {
    padding-bottom: 10px;
}

.link--mallki span:first-child::before {
    top: 0px;
}

.link--mallki span:nth-child(2)::before {
    bottom: 10px;
}
/* -------------------------------- 

Modules - reusable parts of our design

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

#cd-timeline::before {
    right: 18px;
    left: auto;
}

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

    #cd-timeline::before {
        right: 50%;
        margin-right: -2px;
        left: auto;
        margin-left: auto;
    }
}
.cd-timeline-img {
    right: 0;
    left: auto;
}

.cd-timeline-img img {
    right: 50%;
    margin-right: -12px;
    left: auto;
    margin-left: auto;
}

.cd-timeline-img img.CategoryPhoto {
    right: initial;
    left: auto;
}



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

    .cd-timeline-img {
        right: 50%;
        margin-right: -30px;
        left: auto;
        margin-left: auto;
    }

}

.cd-timeline-content {
    margin-right: 60px;
    margin-left: auto;
}

.cd-timeline-content .cd-read-more {
    float: left;
}

.cd-timeline-content .cd-date {
    float: right;
}

.cd-timeline-content::before {
    left: 100%;
    border-left: 7px solid white;
    right: auto;
    border-right: none;
}
.cd-timeline-block .cd-timeline-content::before {
    -ms-transform: rotate(180deg); /* IE 9 */
    -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
    transform: rotate(180deg);
}

.cd-timeline-block:nth-child(even) .cd-timeline-content::before {
    -ms-transform: rotate(0deg); /* IE 9 */
    -webkit-transform: rotate(0deg); /* Chrome, Safari, Opera */
    transform: rotate(0deg);
}

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


    .cd-timeline-content {
        margin-right: 0;
        margin-left: auto;
    }

    .cd-timeline-content::before {
        right: 100%;
        border-right-color: white;
        left: auto;
    }

    .cd-timeline-content .cd-read-more {
        float: right;
    }

    .cd-timeline-content .cd-date {
        right: 122%;
        left: auto;
    }

    .cd-timeline-block:nth-child(even) .cd-timeline-content {
        float: left;
    }

    .cd-timeline-block:nth-child(even) .cd-timeline-content::before {
        right: auto;
        left: 100%;
        border-left-color: white;
    }

    .cd-timeline-block:nth-child(even) .cd-timeline-content .cd-read-more {
        float: left;
    }

    .cd-timeline-block:nth-child(even) .cd-timeline-content .cd-date {
        right: auto;
        left: 122%;
        text-align: left;
    }
}
@media screen and (min-width:0px) and (max-width:1170px) {
    .cd-timeline-block .cd-timeline-content::before {
        -ms-transform: rotate(0deg); /* IE 9 */
        -webkit-transform: rotate(0deg); /* Chrome, Safari, Opera */
        transform: rotate(0deg);
    }

}
@media screen and (min-width:780px) and (max-width:1200px) {
    /*    .Consulting .BigTitle,
        .Skills .BigTitle{
            border: 6px solid;
            font-size: 50px;
            max-width: 100%;
        }*/

}
@media screen and (min-width:0px) and (max-width:780px) {
/*        .Consulting .BigTitle,
        .Skills .BigTitle{
            border: 3px solid;
            font-size: 25px;
            max-width: 100%;
        }*/

    .BigTitle  {
        padding-bottom: 5px;
    }
    .link--mallki span:nth-child(2)::before {
        bottom: 5px;
    }
}