﻿html {
    scroll-behavior: smooth;
}
body {
    font-size:1.2rem;
    line-height:1.8;
    direction:rtl;
    }
#title {
    direction: ltr;
}
.nav-item{
    color:#ffffff;
    font-weight:bold;
    font-size: 1rem;
/*    padding: 0 2px;*/
/*    width:auto;*/
/*    width:100%;*/
/*    direction:rtl;*/
/*    text-align:right;*/
   
}
.active {
    background-color: #136608;
}
.navbar-brand {
    padding: 0;
}
.nav-link:hover {
    background-color: #136608;
}

#imgLogo {
    width: 18%;
    height:10%;   

}

#Header {
    width: 90%;
    margin: 4% auto 5px auto;
    background: url('../Images/‏‏headingJosefPilates1.PNG') no-repeat;
    background-size: 100%;
    font-size: 3.1rem;
    animation-name: fade_in_Heading;
    animation-duration: 7s;
}
@keyframes fade_in_Heading{
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
    from {
        background-size: 0%;
    }

    to {
        background-size: 100%;
    }


}
/*.carousel-item {
    animation-name: fade_in_caruselItem;
    animation-duration: 7s;
}
@keyframes fade_in_caruselItem {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}*/
#Contact_buttons {
    display: inline-block;
    margin: 2% auto;
    text-align: center;
    width: 90%;
}
.contact_icon {
    font-size: 2rem;
    background-color: #136608;
    color: white;
    padding: 2%;
    margin: 10px 20px 10px 20px;
    border: solid;
    border-radius: 20%;
    display: inline-block;
    width: 100px;
    text-align: center;
}
    .contact_icon:hover {
        font-size: 2rem;
        background-color: white;
        color: #136608;
        padding: 2%;
        margin: 10px 20px 10px 20px;
        border: solid;
        border-radius: 20%;
        display: inline-block;
        width: 100px;
        text-align: center;
    }




#embeded-video-intro {
    /*width: 65%;*/
    margin: 2% auto 5px auto;
}

#embeded-image-intro {
   /* width: 100%;*/
    margin: 5% auto 5px auto;
}

    #imagesSlide {
        height: auto;
        margin: 2px auto;
        padding: 0 10%;
    }

    .carousel-inner img {
        width: 100%;
/*        height: 500px;*/
        margin: 0;
    }

    #PageContent {
        width: 75%;
        margin: 0 auto 5px auto;
        text-align: right;
    }

    #PageContentAboutPilates {
        width: 75%;
        margin: 5% auto 5px auto;
        text-align: right;
    }

    #InstractorsPageContent {
        width: 75%;
        margin: 10% auto;
        text-align: right;
        line-height: 2.5;
    }
#LessonsType{
    width:90%;
    margin:auto;
}

#carousel-feedbacks {
    width: 75%;
    margin: 5% auto;
    text-align: center;
    line-height: 2.5;
    background-color: #136608;
    color: white;
}


.feedback {
    padding: 2%;
    height: 250px;
    animation-name: fade_in_caruselItem;
    animation-timing-function: ease;
    animation-duration: 4s;
}
#gallery-section {
    margin: 10% auto;
    width: 90%;
}
.photo-gallery {
    color: #313437;
    background-color: #fff;
}

    .photo-gallery p {
        color: #7d8285;
    }

    .photo-gallery h2 {
        font-weight: bold;
        margin-bottom: 40px;
        padding-top: 40px;
        color: inherit;
    }
    .photo-gallery .intro {
        font-size: 16px;
        max-width: 500px;
        margin: 0 auto 40px;
    }

        .photo-gallery .intro p {
            margin-bottom: 0;
        }

    .photo-gallery .photos {
        padding-bottom: 20px;
    }

    .photo-gallery .item {
        padding-bottom: 30px;
    }

.carousel-item {
    animation-name: fade_in_caruselItem;
    animation-duration: 7s;
}
@keyframes fade_in_caruselItem {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.heading {
    margin: 20px auto;
    color: #136608;
    font-weight: bold;
    text-align: center;
}
.heading_messages {
    color: #136608;
    font-weight: bold;
    text-align: right;
}
.heading_Lessons {
    color: #136608;
    font-weight: bold;
    text-align:center;
}

.heading_AboutPilates {
    color: #136608;
    font-weight: bold;
}

    .principle_item {
        padding: 6px 0;
    }

    .WeeklyHeaderWrapper {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    }

    .dayHeader {
        position:fixed;
        background-color: #136608;
        color: white;
        font-size: 30px;
        font-weight: bold;
        text-align: center;
    }

    .WeeklyContentWrapper {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    }

        .dayContentlessons {
            width: 98%;
            background-color: #dfd6d6;
        }
    .WeeklyContentWrapper_evening {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    }
       .eveningContentlessons {
          width: 98%;
          background-color: #dfd6d6;

    }


#mainUser {
    margin: 10% auto;
}

#weeklyLessons_currentWeek {
    text-align:center;
    border: double;
    background-color:lightgray;

}
#messagesSection {
    text-align: right;
    border:thick
}
.card-body{
    text-align:right;
}
.card-img-top {
    height: 250px;
    margin: 0 auto;
}

.modelLesson {
    width: 85%;
}

#weeklyLessons {
    margin:10% auto;
    width: 95%;
    text-align: center;
    border: double;
    background-color: lightgray
}
.LessonInfo {
    width: 100%;
    font-size: 1.2rem;
    padding: 5px;
    text-align: right;
}
#MessageLessons_upper {
    font-size: 1.2rem;
}

#MessageLessons_lower {
    font-size: 1.2rem;
}

    .DateHeader {
        background-color: #136608;
        color: white;
        font-size: 1.5rem;
        font-weight: bold;
        text-align: center;
        /*    position:fixed;*/
    }

    .EventHeader {
        text-align: center;
        color: #CC0066;
        font-size: 1.5rem;
        font-weight: bold;
        /*    position: fixed;*/
    }

.buttonLinkLesson_1 {
    width: 100%;
    font-size: 0.5rem;
    color: #ed15d9;
    border-color: #ed15d9;
    background-color: #c4cbc8;
    cursor: pointer;
}

.buttonLinkLesson_2 {
    width: 100%;
    font-size: 0.5rem;
    color: #08489b;
    border-color: #08489b;
    background-color: #c4cbc8;
    border-color: cursor: pointer;
}
.buttonLinkLesson_3 {
    width: 100%;
    font-size: 0.5rem;
    color: #e16b0c;
    border-color: #e16b0c;
    background-color: #c4cbc8;
    cursor: pointer;
}

    .buttonLinkLesson_1:hover {
        text-decoration-line: none;
        background-color: #94c28e;
        color: black;
    }

    .buttonLinkLesson_2:hover {
        text-decoration-line: none;
        background-color: #94c28e;
        color: black;
    }
    .buttonLinkLesson_3:hover {
    text-decoration-line: none;
    background-color: #94c28e;
    color: black;
}

    .Buttons {
        text-align: center;
        margin: 5px;
        
    }

    .NextPrev_button {
        margin: 10px 30px;
        font-weight: bold;
        background-color: #136608;
        color: white;
        font-size: 1.5rem;
    }

    #EnrolForm {
        width: 65%;
        background-color: #d0dee7;
        font-size: 1rem;
        margin: 10% auto 5% auto;
        text-align: right;
        padding: 1%;
    }
    #ContactForm {
    width: 65%;
    background-color: #d0dee7;
    font-size: 1rem;
    margin: 5% auto 5% auto;
    text-align: right;
    padding: 1%;
}

    .pageTapet {
        background: no-repeat center fixed;
        background-image: url('../Images/‏‏image_studio3.PNG');
        background-size: cover;
        opacity: 0.92;
    }

    #btnEnrole {
        background: #3498db;
        background-image: -webkit-linear-gradient(top, #3498db, #2980b9);
        background-image: -moz-linear-gradient(top, #3498db, #2980b9);
        background-image: -ms-linear-gradient(top, #3498db, #2980b9);
        background-image: -o-linear-gradient(top, #3498db, #2980b9);
        background-image: linear-gradient(to bottom, #3498db, #2980b9);
        -webkit-border-radius: 28;
        -moz-border-radius: 28;
        border-radius: 28px;
        font-family: Arial;
        color: #ffffff;
        font-size: 25px;
        font-weight: bold;
        padding: 10px 20px 10px 20px;
        text-decoration: none;
    }

    #btnEnrole:hover {
        background: #3cb0fd;
        background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db);
        background-image: -moz-linear-gradient(top, #3cb0fd, #3498db);
/*        background-image: -ms-linear-gradient(top, #3cb0fd, #3498db);*/
        background-image: -o-linear-gradient(top, #3cb0fd, #3498db);
        background-image: linear-gradient(to bottom, #3cb0fd, #3498db);
        text-decoration: none;
    }

    #btnClose {
        background: #34d9a7;
        background-image: -webkit-linear-gradient(top, #34d9a7, #319e06);
        background-image: -moz-linear-gradient(top, #34d9a7, #319e06);
        background-image: -ms-linear-gradient(top, #34d9a7, #319e06);
        background-image: -o-linear-gradient(top, #34d9a7, #319e06);
        background-image: linear-gradient(to bottom, #34d9a7, #319e06);
        -webkit-border-radius: 28;
        -moz-border-radius: 28;
        border-radius: 28px;
        font-family: Arial;
        color: #ffffff;
        font-size: 42px;
        font-weight: bold;
        padding: 10px 20px 10px 20px;
        text-decoration: none;
    }

    #btnClose:hover {
        background: #459909;
        text-decoration: none;
    }

    .sendEnrolment {
        text-align: center;
        margin: 5%
    }

    #ImageSuccesfullySend {
        width: 40%;
    }

    #ImageLOGOSuccesfully {
        width: 10%;
    }

    #loginSection {
        background-color: #d0dee7;
        width: 50%;
        margin: 10% auto;
        padding: 15px;
        text-align: center;
        border: 5px solid blue;
        border-color: blue;
    }
    #ChangePassword {
    background-color: #d0dee7;
    width: 50%;
    margin: 10% auto;
    padding: 15px;
    text-align: center;
    border: 5px solid blue;
    border-color: blue;
}

    #btnLogin {
        font-size: 1.2rem;
    }

    #alertMessage_upper {
        font-size: 2.5rem;
        text-align: center;
    }

    #alertMessage_lower {
        font-size: 2.5rem;
        text-align: center;
    }

    #BlogContent {
        margin: 10% auto;
        width: 90%;
    }

.accordion-body {
    direction: rtl;
    text-align: right;
    padding: 1% 1%;
    background-color: #d0dee7;
}
    /*.linkButton{
    width:100%;
    
}*/
@media (max-width:767px) {
    .photo-gallery h2 {
        margin-bottom: 25px;
        padding-top: 25px;
        font-size: 24px;
    }
}

    @media (max-width:1028px) {
        body {
            font-size: 2.5rem;
            line-height: 1.8;
            direction: rtl;
        }
        .navbar-toggler-icon {
            background-color: #136608;
            font-weight:bold;
            border-style:double;
            border-width:thick;
            height:3.5em;
            width:3.5em;
        }
        .card {
            padding-bottom: 0;
        }

        .nav-item {
            color: #ffffff;
            font-weight: bold;
            font-size: 2.5rem;
        }

/*        .navbar-toggler {
                    width:10%;
        height:40%;
        }*/

        #imgLogo {
            width: 30%;
            height: 20%;
        }

        .carousel-inner img {
            width: 100%;
            height: 100%;
        }

        #Header {
            width: 90%;
            text-align: center;
            margin: 20% auto 5px auto;
            background: url('../Images/‏‏headingJosefPilates2.PNG') no-repeat;
            background-size: 100%;
            font-size: 2rem;
            animation-name: fade_in_Heading;
            animation-duration: 7s;
        }

        @keyframes fade_in_Heading {
            from {
                opacity: 0;
            }

            to {
                opacity: 1;
            }

            from {
                background-size: 0%;
            }

            to {
                background-size: 100%;
            }
        }

        #Contact_buttons {
            display: inline-block;
            margin: 5% auto;
            text-align: center;
            width: 90%;
        }

        .contact_icon {
            font-size: 3rem;
            background-color: #136608;
            color: white;
            padding: 1%;
            margin: 5% 1% 5% 1%;
            border: solid;
            border-radius: 20%;
            /*        display: inline-block;*/
            width: 85px;
            text-align: center;
        }

            .contact_icon:hover {
                font-size: 3rem;
                background-color: white;
                color: #136608;
                padding: 1%;
                margin: 5% 1% 5% 1%;
                border: solid;
                border-radius: 20%;
                display: inline-block;
                width: 85px;
                text-align: center;
            }

        #embeded-video-intro {
            /*width: 65%;*/
            margin: 2% auto 5px auto;
            text-align: center;
        }

        #embeded-image-intro {
            width: 100%;
            margin: 2% auto 5px auto;
        }

        .heading {
            margin: 5px auto;
            color: #136608;
            font-weight: bold;
            text-align: center;
            font-size: 2.5rem;
        }

        #carousel-feedbacks {
            width: 75%;
            margin: 5% auto;
            text-align: center;
            line-height: 1.8;
            background-color: #136608;
            color: white;
        }


        .feedback {
            padding: 10%;
            height: 100%;
            animation-name: fade_in_caruselItem;
            animation-timing-function: ease;
            animation-duration: 4s;
        }

        /*.carousel-item {
    animation-name: fade_in_caruselItem;
    animation-duration: 7s;
}*/
        @keyframes fade_in_caruselItem {
            from {
                opacity: 0;
            }

            to {
                opacity: 1;
            }
        }

        .heading_AboutPilates {
            color: #136608;
            font-weight: bold;
            font-size: 2.5rem;
        }

        #PageContentAboutPilates {
            width: 75%;
            margin: 20% auto 5px auto;
            text-align: right;
        }

        #InstractorsPageContent {
            width: 75%;
            margin: 30% auto;
            text-align: right;
            line-height: 2.5;
        }

        #gallery-section {
            margin: 30% auto;
            width: 90%;
        }

        #mainUser {
            margin: 30% auto;
        }

        #weeklyLessons {
            width: 95%;
            margin: 30% auto;
            text-align: center;
            border: double;
            background-color: lightgray
        }

        #messagesSection {
            text-align: right;
            border: thick;
            margin: 1%;
        }

        .card {
            margin-bottom: 3%;
            border: double;
        }

        .card-img-top {
            height: 300px;
            margin: 0 auto;
        }

        .card-title {
            font-size: 2.5rem;
        }

        .card-body {
            height:auto;
        }

        .btn {
            font-size: 2.5rem;
        }

        /*    .btn btn-secondary {
        font-size: 2.5rem;
    }*/

        .modal-title {
            font-size: 2.5rem;
        }

        .WeeklyHeaderWrapper {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
        }

        .WeeklyContentWrapper {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
        }

        .dayContentlessons {
            width: 100%;
/*            margin: 5px auto;*/
            background-color: #dfd6d6;
        }
        .WeeklyContentWrapper_evening {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
        }

        .eveningContentlessons {
            width: 100%;
/*            margin: 5px auto;*/
            background-color: #dfd6d6;
        }
        #MessageLessons_upper {
            font-size:2rem;
        }
        #MessageLessons_lower {
            font-size: 2rem;
        }

        .LessonInfo {
            width: 100%;
            font-size: 0.8rem;
            text-align: right;
        }

        .modal-dialog {
            max-width: 85%;
        }

        .DateHeader {
            background-color: #136608;
            color: white;
            font-size: 1.2rem;
            font-weight: bold;
            text-align: center;
        }

        .EventHeader {
            text-align: center;
            color: #CC0066;
            font-size: 1.2rem;
            font-weight: bold;
        }

        .NextPrev_button {
            margin: 10px 30px;
            font-weight: bold;
            background-color: #136608;
            color: white;
            font-size: 3.5rem;
        }

        #EnrolForm {
            width: 85%;
            background-color: #d0dee7;
            font-size: 2.5rem;
            margin: 30% auto 5% auto;
            text-align: right;
            padding: 3%;
        }
        #ContactForm {
            width: 85%;
            background-color: #d0dee7;
            font-size: 2.5rem;
            margin: 5% auto 5% auto;
            text-align: right;
            padding: 3%;
        }

        .input_text {
            font-size: 2.5rem;          
            
        }
        #year{

            height:80px;
        }

        #month{
            height: 80px;
        }

        #day {
            height: 80px;
        }


        .bigCheck {
            width: 50px;
            height: 50px;
        }

        h2 {
            font-size: 2.8rem;
        }

        #btnEnrole {
            background: #3498db;
            background-image: -webkit-linear-gradient(top, #3498db, #2980b9);
            background-image: -moz-linear-gradient(top, #3498db, #2980b9);
            background-image: -ms-linear-gradient(top, #3498db, #2980b9);
            background-image: -o-linear-gradient(top, #3498db, #2980b9);
            background-image: linear-gradient(to bottom, #3498db, #2980b9);
            -webkit-border-radius: 28;
            -moz-border-radius: 28;
            border-radius: 28px;
            font-family: Arial;
            color: #ffffff;
            font-size: 2.5rem;
            font-weight: bold;
            padding: 10px 20px 10px 20px;
            text-decoration: none;
        }

            #btnEnrole:hover {
                background: #3cb0fd;
                background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db);
                background-image: -moz-linear-gradient(top, #3cb0fd, #3498db);
                background-image: -ms-linear-gradient(top, #3cb0fd, #3498db);
                background-image: -o-linear-gradient(top, #3cb0fd, #3498db);
                background-image: linear-gradient(to bottom, #3cb0fd, #3498db);
                text-decoration: none;
            }

        #btnClose {
            font-size: 3rem;
        }

        #ImageSuccesfullySend {
            width: 70%;
        }

        #ImageLOGOSuccesfully {
            width: 50%;
        }

        #txtUserName {
            font-size: 2rem;
        }

        #txtPassword {
            font-size: 2rem;
        }
        #txtPasswordVerification {
            font-size: 2rem;
        }
        #ChangePassword {
            margin: 30% auto;
        }

        #btnLogin {
            font-size: 2rem;
        }

        #BlogContent {
            margin: 30% auto;
            width: 90%;
        }
        .photo-gallery h2 {
            margin-bottom: 25px;
            padding-top: 25px;
            font-size: 24px;
        }
    }