﻿@font-face {
    font-family: DINNextLTArabic-Light;
    src: url('../Fonts/DINNextLTArabic-Light.ttf'), url('../Fonts/DINNextLTArabic-Light.eot');
}

body {
    /*background: #f4f5fb !important;*/
    color: #282b3a;
    margin: 0px;
    padding: 0px;
    font-family: 'DINNextLTArabic-Light' !important;
    font-size: 16px;
    line-height: 22px;
    background-image: url('../Images/body_bg.png');
    background-size: contain;
    background-repeat: no-repeat;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'DINNextLTArabic-Light' !important;
    margin: 0 !important;
}

h1 {
    font-size: 35px;
    color: #3B467E;
    font-weight: bold;
    text-align: center;
}

.uxmapCarousel {
    top: 94px !important;
}

header {
    min-height: 210px;
    background: #282b3a;
    width: 100%;
    margin: 0;
    padding: 0 0 0;
}

footer {
    min-height: 200px;
    width: 100%;
    margin: 0;
    padding: 20px;
}

    footer img {
        position: relative;
        left: 50%;
        transform: translate(-50%);
    }

    footer p {
        margin: 0 auto;
        text-align: center;
        font-weight: bold;
    }

.head_Container {
    width: 100%;
    padding: 1% 15% 0;
    margin: 0 auto;
}

    .head_Container img {
        float: left;
    }

.Photo-OriginalSize {
    position: relative;
    left: 50%;
    transform: translate(-50%);
}

.l4-row {
    width: 100%;
    height: auto;
    min-height: 500px;
    margin: 0px 0px;
    border: solid 1px #d5b86d;
    background-image: url(../images/header-slider-image.jpg);
    background-size: auto 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #f4f5fb;
}

.head1-ul {
    list-style-type: none;
    width: 100%;
    float: right;
    padding: 0px 0 0;
    margin: 0px;
}

    .head1-ul li {
        float: inherit;
        padding: 15px;
    }

    .head1-ul .social_Icon:hover {
        background-color: #808080;
        border-radius: 50px;
        transition: all 2s ease 0s, transform 0s ease 0s;
    }

    .head1-ul .search_Icon {
        padding: 0;
        margin-top: 15px;
        width: 25%;
    }

.search-query {
    text-align: left;
    direction: ltr;
}

.btn-searchColor {
    background-color: #6dbed5;
}

.head1-ul-sep {
    width: 1px;
    height: 35px;
    background-color: #d5b86d;
    float: left;
    margin-top: 20px;
}

.contentPage {
    min-height: 600px;
    width: 100%;
    margin: 0;
    padding: 0% 15% 0;
}

.webContentPage {
    min-height: 400px;
    background: #fff;
    padding: 30px 20px;
    border-bottom: 6px solid #d5b86d;
    overflow: auto;
}

.head-Sep {
    height: 10px;
    width: 100%;
    background-color: #6dbed5;
    margin-bottom: 30px;
}

.Slider_Height {
    max-height: 475px;
}

/*.carousel-indicators {
    left: 0% !important;
    width: 20% !important;
    padding-left: 0 !important;
    margin-left: 2% !important;
    margin-bottom: -0% !important;
    text-align: left !important;
    list-style: none !important;
    bottom: 0 !important;
}*/
.imgSlider {
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
}

.Slider_Hint p {
    text-align: right;
    margin: 0 25px;
    font-weight: bold;
    padding: 20px 0;
    font-size: 16px;
}

.Slider_Hint {
    margin: 0% !important;
    width: 80% !important;
    height: 40px;
    background-color: rgba(109,190,213,0.9) !important;
    left: 50% !important;
    max-width: 800px;
    transform: translate(-50%);
    padding: 10px !important;
    border-radius: 74px;
}

.new-slider {
    max-width: 810px;
    margin: 0 auto;
}

.carousel-controlLeft {
    background-color: rgba(255,255,255,0.7);
    border-radius: 50px;
    width: 50px !important;
    height: 50px;
    z-index: 2;
    top: 40% !important;
    left: 15px !important;
}

.carousel-controlRight {
    background-color: rgba(255,255,255,0.7);
    border-radius: 50px;
    width: 50px !important;
    height: 50px;
    z-index: 2;
    top: 40% !important;
    right: 15px !important;
}

.carousel-indicators li {
    /*border-radius: unset !important;*/
    margin: 0 4px !important;
    background: rgba(0,0,0,.1) !important;
    border-radius: 10px;
    border: 1px solid #fff !important;
}

.carousel-indicators .active {
    background: #fff !important;
}

.Continer-New {
    min-height: 400px;
    background: #fff;
    padding: 30px 20px 0;
    margin-top: 30px;
    border-bottom: 6px solid #d5b86d;
}

.Continer-Student {
    min-height: 400px;
    background: #fff;
    padding: 0px 0 0;
    margin-top: 30px;
    border-bottom: 6px solid #6dbed5;
}

.Continer-Teacher {
    min-height: 400px;
    background: #fff;
    padding: 0px;
    margin-top: 30px;
    border-bottom: 6px solid #6dbed5;
}

.Continer-Map {
    min-height: 400px;
    background-color: #fff;
    background-image: url('../Images/ma.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 100%;
    padding: 30px;
    margin-top: 30px;
}

.Continer-BK-Login {
    width: 100%;
    min-height: 260px;
    background: #fff;
    margin-top: 30px;
    border-bottom: 6px solid #fff;
    background-image: url('../Images/login_bg.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 75%;
    background-attachment: fixed;
}

.Continer-Login {
    width: 100%;
    padding: 1% 15% 0;
    margin: 0 auto;
}

.Event-Title {
    min-height: 100px;
    border-bottom: 6px solid #f4f5fb;
    text-align: left;
}

.webContent-Title {
    border-bottom: 6px solid #f4f5fb;
    text-align: left;
}

    .webContent-Title h1 {
        font-size: 35px;
        color: #3B467E;
        font-weight: bold;
        text-align: left;
        padding-bottom: 25px;
        direction: ltr;
    }

.Event-Slider {
    min-height: 250px;
    text-align: left;
}

.Event-Title h3 {
    color: #A7ABBD;
}

.Event-Title h1 {
    font-size: 35px;
    color: #3B467E;
    font-weight: bold;
    text-align: left;
}

.eSchool-Title {
    text-align: center;
    color: #fff;
    font-weight: bold;
    padding-bottom: 2%;
}

.systemLogin {
    background-position: center center;
    background-repeat: no-repeat;
    display: block;
    height: 105px;
    padding-top: 100px;
    width: 100%;
    transition: all .5s;
    transition-delay: .5s;
    margin-bottom: 5px;
}

.systemLoginhover:hover {
    text-decoration: none;
}

.Teacher {
    background-image: url('../Images/Login/TeacherLogin.png');
}

.Student {
    background-image: url('../Images/Login/StudentLogin.png');
}

.Adviser {
    background-image: url('../Images/Login/ManagerLogin.png');
}

.Employee {
    background-image: url('../Images/Login/EmployeeLogin.png');
}

.Parent {
    background-image: url('../Images/Login/ManagerLogin.png');
}

.systemLogin-Title {
    color: #fff;
    text-align: center;
}

.Continer-Student h1 {
    margin-bottom: 43px !important;
    padding-top: 20px;
}

.Continer-Teacher h1 {
    margin-bottom: 43px !important;
    padding-top: 20px;
}

.StudentSlider {
    width: 100%;
    height: 300px;
}

    .StudentSlider img {
        width: 150px;
        height: 175px !important;
        margin: 0 auto;
    }

    .StudentSlider h5 {
        text-align: center;
        margin: 15px 0 0 !important;
        font-size: 15px;
        font-weight: bold;
    }

    .StudentSlider h6 {
        text-align: center;
        margin: 5px 0 0 !important;
        color: #6dbed5;
    }

.TeacherSlider {
    width: 100%;
    height: 300px;
}

    .TeacherSlider img {
        width: 150px;
        height: 175px !important;
        margin: 0 auto;
    }

    .TeacherSlider h5 {
        text-align: center;
        margin: 15px 0 0 !important;
        font-size: 15px;
        font-weight: bold;
        margin: 0 auto;
    }

    .TeacherSlider h6 {
        text-align: center;
        margin: 5px 0 0 !important;
        color: #d5b86d;
    }

.announcementSlider {
    background-size: cover;
    background-position: 50%;
    background-repeat: no-repeat;
    width: 100%;
    height: 475px;
}

.webContent-Details {
    text-align: left;
    padding-top: 25px;
    direction: ltr;
}

.webContent-Profile {
    width: 50%;
    float: left;
    margin: 0px 0 0 25px;
}

.webContent-Gallery {
    min-height: 400px;
    background: #fff;
    padding: 0px 0 30px;
    margin-top: 30px;
    border-bottom: 6px solid #6dbed5;
}

    .webContent-Gallery h1 {
        margin-bottom: 20px !important;
        padding-top: 20px;
    }

.webContent-Attachment {
    min-height: 400px;
    background: #fff;
    padding: 0px 0 30px;
    margin-top: 30px;
    border-bottom: 6px solid #6dbed5;
    width: 100%;
    clear: both;
}

    .webContent-Attachment h1 {
        margin-bottom: 20px !important;
        padding-top: 20px;
    }



    .webContent-Attachment a img {
        width: 100%;
        height: 125px;
        padding: 0px;
        margin-bottom: 5px;
        margin: 20px 0 10px 00px;
    }

    .webContent-Attachment a p {
        width: 100%;
        color: #000;
        margin: 0;
        text-align: center;
    }

.Continer-Psots {
    min-height: 420px;
    background: #fff;
    padding: 0px 0 0;
    margin: 30px 0;
    border-bottom: 6px solid #f4f5fb;
}

.posts-Image {
    height: 250px !important;
    width: 100%;
}

.Continer-Psots h3 {
    font-size: 22px;
    color: #3B467E;
    font-weight: bold;
    text-align: center;
    padding: 10px;
}

.posts-Date {
    width: 100%;
    height: auto;
    text-align: center;
    clear: none;
    min-height: 0px;
    min-width: 0px;
    color: #d5b86d;
}

@media screen and (max-width: 1680px) {
    header {
        min-height: 235px;
    }

    .testimonial .testimonial-prof {
        padding-left: 38% !important;
    }
}

@media screen and (max-width: 1600px) {
    header {
        min-height: 230px;
    }

    .testimonial .testimonial-prof {
        padding-left: 40% !important;
    }

    .testimonial .testimonial-title {
        font-size: 20px !important;
    }
}

@media screen and (max-width: 1440px) {
    .uxmapCarousel {
        top: 66px !important;
    }

    .announcementSlider {
        background-size: cover;
        background-position: 50%;
        background-repeat: no-repeat;
        width: 100%;
        height: 400px;
    }

    .testimonial .testimonial-prof {
        padding-left: 45% !important;
    }

    .testimonial .testimonial-title {
        font-size: 17px !important;
    }

    .Continer-Student {
        min-height: 325px;
    }

    .Continer-Teacher {
        min-height: 325px;
    }

    .Continer-Map {
        min-height: 325px;
    }

    .StudentSlider {
        height: 225px;
    }

    .TeacherSlider {
        height: 225px;
    }

    .Continer-Student h1 {
        margin-bottom: 25px !important;
        padding-top: 10px;
    }

    .Continer-Teacher h1 {
        margin-bottom: 25px !important;
        padding-top: 10px;
    }

    .StudentSlider {
        height: 255px;
    }

    .TeacherSlider {
        height: 255px;
    }
}

@media screen and (max-width: 1366px) {
    header {
        min-height: 225px;
    }
}

@media screen and (max-width: 1280px) {

    .testimonial .testimonial-prof {
        padding-left: 50% !important;
    }
}

@media screen and (max-width: 1200px) {
    .l4-row {
        min-height: 400px;
    }

    .testimonial .testimonial-prof {
        padding-left: 40% !important;
    }

    .head_Container {
        padding: 2% 2% 0;
    }

    .contentPage {
        padding: 0% 2% 0;
    }

    .Continer-Login {
        padding: 1% 2% 0;
    }
}

@media screen and (max-width: 1024px) {
    .testimonial .testimonial-prof {
        padding-left: 50% !important;
    }

    header {
        min-height: 220px;
    }
}

@media screen and (max-width: 768px) {
    .webContent-Profile {
        width: 35%;
    }

    .head1-ul-sep {
        display: none;
    }

    .testimonial .testimonial-prof {
        padding-left: 30% !important;
    }
}

@media screen and (max-width: 640px) {
    .l4-row {
        min-height: 300px;
        background-size: 100% auto;
    }

    .webContent-Profile {
        width: 45%;
    }

    .row {
        margin-left: 0 !important;
        margin-left: 0 !important;
    }

    .eSchool-Title {
        margin-top: 2% !important;
        margin-bottom: 4% !important;
    }

    .systemLogin-Title {
        margin: 20px 0 !important;
    }

    .testimonial .testimonial-prof {
        padding-left: 0% !important;
        text-align: center !important;
    }

    .testimonial .testimonial-title {
        text-align: center !important;
        margin-top: 15px !important;
    }

    .testimonial .testimonial-post {
        text-align: center !important;
    }

    .head1-ul {
        padding: 0;
    }

    .head_Container img {
        float: left;
        margin: 0 auto;
        position: relative;
        left: 50%;
        transform: translate(-50%);
    }

    .carouselinner {
        margin-bottom: 30px;
    }

    .colsm3 {
        width: 50%;
    }

    .head1-ul .search_Icon {
        width: 99%;
    }

    .head1-ul li {
        padding: 15px 58px;
    }
}

@media screen and (max-width: 485px) {
    .webContent-Profile {
        width: 100%;
    }

    .head1-ul li {
        padding: 15px 38px;
    }
}

@media screen and (max-width: 360px) {
    .head1-ul li {
        padding: 15px 24px;
    }

    .colsm3 {
        width: 100%;
    }
}

@media screen and (max-width: 320px) {
    .head1-ul li {
        padding: 15px 18px;
    }
}
