@import "https://ag.edu.iq/static/fonts/fonts/styles.css";

* {
    font-family: 'URWDINArabic-Regular';

}

a {
    color: inherit;
}

.row {
    position: relative;
}

.column {
    margin-bottom: 5px;
}

img:not(.img) {
    width: 100%;
    height: auto;
}

@keyframes imgbg {
    0% {
        background-position: 100% 0%;
    }
    100% {
        background-position: 0% 100%;
    }
}

a:hover {
    color: inherit;
}

.imgbg {
    width: 100%;
    height: 200px;
    background-position: 100% 0%;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.imgbg:hover {
    /*animation: imgbg 3s linear;
    background-position: 0% 100%;*/
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'HacenLinerXL';
}

body {
    background: #edf2f6;
}

.fluid {
    max-width: 100%;
}

/********************************* New Css ******************************************/
.header {
    background-color: #edf2f6;
    height: 33px;
}

.header_social {
    width: 360px;
    float: left;
    padding-top: 6px;
}

.social_media_text {
    margin-left: 6px;
    width: fit-content;
    float: left;
    font-size: 11.5px;
}

.social_media_img {
    float: left;
}

.header_social_item {
    margin-right: 7px;
    padding-right: 9px;
    border-right: solid 1px red;
    height: 18px;
    width: fit-content;
    float: left;
}

.header_2 {
    height: 92px;
    background-image: url('https://ag.edu.iq/static/images/site/header_bg.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.logo {
    margin-right: 18px;
    width: 322px;
    float: right;
    margin-top: 7px;
}

.alkafeel_logo {
    margin-right: 42px;
    width: fit-content;
    float: right;
    margin-top: 7px;
}

.header_menu {
    height: 10px;
    background-color: #2e718d;
}

.header_menu_2 {
    height: 95px;
    background-color: rgba(36, 139, 185, 0.8);
    z-index: 11111111111111111111111;
    position: relative;
}

.menu {
    color: #fff;
}

.dropdown.menu > li.opens-left > .is-dropdown-submenu {
    width: 329px;
}

.dropdown .is-dropdown-submenu a {
    padding-top: 6px;
    color: #000;
    text-align: center;
}

.is-dropdown-submenu > li {
    width: 164px;
    float: right;
}

.dropdown.menu > li.opens-left > .is-dropdown-submenu {
    border: solid 0px red;
    top: 127%;
    right: -115px;
    height: 30px;
    background-color: rgba(255, 255, 255, 0.502);
}


.dropdown.menu .is-active > a {
    color: #fff;
}

.dropdown.menu > li.is-dropdown-submenu-parent > a::after {
    border-color: transparent transparent transparent;
}

.is-dropdown-submenu > li a:hover {
    color: #000;
}

.menu_li {
    margin-top: 3px;
    border-left: 1px solid #0f5e6f;
    height: 30px;
    padding-left: 2px;
    padding-right: 2px;
}

.menu_li:hover {
    background-color: rgba(255, 255, 255, 0.502);
    color: #000;
}

.is-active {
    color: #000 !important;
}

.menu_li a {
    padding-top: 6px !important;
}

.menu_li a:active {
    color: #000;
}

.dropdown.menu .is-active > a {
    color: #000;
}

.header_serch {
    width: 375px;
    height: 25px;
    float: left;
}

.header_input_search {
    width: 197px;
    height: 25px;
    background-color: #cde6f1;
    float: right;
}

.button_sub {
    background-image: url('https://ag.edu.iq/static/images/site/search.png');
    background-repeat: no-repeat;;
    width: 30px;
    float: left;
    height: 30px;
}

.select_ {
    width: 133px;
    height: 26px;
    background-color: #cde6f1;
    float: right;
    font-size: 14px;
    margin-left: 15px;
    padding: 0px;
    padding-right: 8px;
}
.image_slider {
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}
.image_slider_title {
    font-weight: bold;
background:linear-gradient(3deg,rgba(0,39,64,.77) 16%,rgba(134,59,97,0) 76%);
   bottom: 120px;
    width: 100%;
    height: 150px;
    position: absolute;
    color: #FFFFFF;
    font-size: 14px;
    line-height: 1.2;
    text-align: center;
    padding-top:90px;
}

/**************************************** End  New Css  *****************************/
/**************************************** News Css  *****************************/
.news_icon{
    margin-top: 11px;
    float: right;
    margin-left: 6px;
}
.news_cat{
 margin-bottom: 15px;
float:right;
  color: rgb(92, 92, 92);
   line-height: 1.2;
   font-size: 23px;
}
.div_content{
    padding-top: 9px;
    box-shadow: 0 1px 3px #c1c1c1;
    background: #fff;
    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
        -webkit-box-shadow: 0 0 70px rgb(0 0 0 / 5%);
        -ms-box-shadow: 0 0 70px rgba(0,0,0,.05);
        -o-box-shadow: 0 0 70px rgba(0,0,0,.05);
        box-shadow: 0 0 70px rgb(0 0 0 / 5%);
        overflow: hidden;
        box-shadow: rgb(0 0 0 / 10%) 0 10px 50px;
max-width:1240px!important;
padding:33px 50px;

}
.news_view_more {
    -webkit-transition: .1s ease-in-out;
    transition: .1s ease-in-out;
    color: #fff;
    float: left;
    padding-top: 2px;
    text-align: center;
    width: 79px;
    height: 32px;
    border: rgb(235, 235, 235) solid 1px;
    background-color:rgb(0 174 230);
}
.news_view_more:hover {
  background-color: #4a4a4a;
  color:#fff;
}
.figure_2 {
    overflow: hidden;
}
.column_news#zoomIn .image_slider {
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transition: .5s ease-in-out;
    transition: .5s ease-in-out;
}

.column_news .image_slider {
    display: block;
    width: 100%;
}
.column_news .image_slider {
    display: block;
    width: 100%;
}
.image_slider {
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}
.news_image {
    height: 182px;
}
.hj_title_news_ {
margin-top: 24px;
    font-size: 14px;
    height: 54px;
    color: rgb(0 0 0);
    line-height: 1.7;
}
.date {
    padding-top: 11px;
    direction: ltr;
        font-size: 12px;
        font-family: "URWDINArabic";
        color: rgb(153, 153, 153);
        line-height: 1.2;
}
.hj_content_news_ {
margin-top: -48px;
    font-size: 14px;
    color: rgb(77, 77, 77);
    line-height: 1.7;
}
.column_news#zoomIn:hover .image_slider {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
}
.row {
    padding: 0px 9px;
}
.row:last-child {
 padding-left: 0px;
}
.row:first-child {
    padding-right: 0px;
}
.line_{
margin-top:30px;
margin-bottom:20px;
height:1px;
background:#d9d9d9;
}
/**************************************** End  News Css  *****************************/
/**************************************** Articles Css  *****************************/
.article_{
padding: 14px;

    background-color: rgb(237, 242, 246);
    height: 300px;
    width: 100%;
}
.first_article{
width:339px;
float:right;
}
.first_article_img {
    background-position: center;
    width: 145px;
    height: 178px;
    background-size: cover;
    background-repeat: no-repeat;
    float:right;
}
.featured_article{
text-align:center;
width:192px;
float:right;
}
.article_bottom{
    width: 100%;
    float: right;

}
.author_{
}
.first_article_title{
font-size:13px;

}
.second_article{
width:370px;
float:right;
}
.article_row{
margin-bottom: 11px;
    background-color: rgb(255, 255, 255);
    width: 370px;
    height: 83px;
    border-top: 4px solid #9a9a9a;
}
.article_row_image{
    background-position: center;
    height: 60px;
    width: 60px;
    background-size: cover;
    background-repeat: no-repeat;
float:right;
margin-left:8px;
}
.second_article_title{
padding: 5px;
font-size:13px;
height:40px;
}
.author_2 {
    width: fit-content;
    color: red;
    float: left;
    font-size: 12px;
    margin-top: -1px;
    margin-left: 14px;
}
.article_row:hover {
color:#fff;
  background-color: rgb(94, 177, 215);
}
/**************************************** End  Articles Css  *****************************/
/**************************************** educational centers Css  *****************************/
.E_C_image_slider{
height: 340px
background-position:center;
background-size:cover;
background-repeat:non-repeat;
}
.E_C_slider_title{
    font-weight: bold;
padding:10px;
    text-align: center;
}
.E_C_slider_title_2{
    margin-top: 10px;
font-size:12px;
display:block;
    font-weight: 100;
    text-align: center;
}
/**************************************** End  educational centers Css  *****************************/
/**************************************** statistics Css  *****************************/
.statistics{
    padding: 20px 0px;
    background-color: rgb(237, 242, 246);
    height: 230px;
    width:100%;
   padding: 66px 0px;
}
.number_{
text-align:center;
   color: #00aee6;
    line-height: 1.2;
        font-size: 20px;
        font-family: "Tahoma";
}
.name_school{
text-align:center;
    font-size: 12px;

    color: rgb(206, 23, 23);
    line-height: 1.2;
}
/**************************************** End statistics Css  *****************************/
/**************************************** Videos view list *****************************/

    .video_section {
        height: 346px;
    }
    .jssor_hover_2 {
        position: absolute;
    }

    /***************** */
    @keyframes videoiconclick {
        from {
            transform: scale3d(1, 1, 1);
            background-color: #C00
        }
        50% {
            transform: scale3d(1.1, 1.1, 1.1);
            background-color: rgba(0, 0, 0, .5)
        }
        to {
            transform: scale3d(1, 1, 1);
            background-color: #C00
        }
    }

    @-webkit-keyframes videoiconclick {
        from {
            transform: scale3d(1, 1, 1);
            background-color: #C00
        }
        50% {
            transform: scale3d(1.1, 1.1, 1.1);
            background-color: rgba(0, 0, 0, .5)
        }
        to {
            transform: scale3d(1, 1, 1);
            background-color: #C00
        }
    }

    /************** end anmation */
    .blog-pic-wrap {
        position: relative;
    }

    .video-icon {
        width: 66px;
        height: 66px;
        border-radius: 50%;
        -webkit-border-radius: 50%;
        background-color: rgba(0, 0, 0, .5);
        background-color: rgba(255, 4, 4, 1);
        position: absolute;
        z-index: 1;
        display: block;
        top: 50%;
        left: 50%;
        margin-top: -33px;
        margin-left: -33px;
        cursor: pointer;
        transition: background-color 0.3s, opacity 0.3s, visibility 0.3s, border-color 0.3s;
        -webkit-transition: background-color 0.3s, opacity 0.3s, visibility 0.3s, border-color 0.3s;
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
        transform: translate3d(0, 0, 0);
        -webkit-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);

    }

    .video-icon:hover {
        animation: videoiconclick 1.5s infinite ease-in-out;
        -webkit-animation: videoiconclick 1.5s infinite ease-in-out;
    }

    .jssor_hover_2:hover .video-icon {
        background-color: #C00;
        animation: videoiconclick 1.5s infinite ease-in-out;
        -webkit-animation: videoiconclick 1.5s infinite ease-in-out;
    }


    .video-icon:after {
        content: '';
        display: block;
        position: absolute;
        width: 0;
        height: 0;
        border: solid transparent;
        border-width: 15px 25px;
        /*   border-left-color: rgba(255,255,255,.5); */
        border-left-color: rgba(255, 4, 4, 1);

        top: 50%;
        left: 50%;
        margin-top: -15px;
        margin-left: -8px;
        transition: border-color 0.3s;
        -webkit-transition: border-color 0.3s;
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
        transform: translate3d(0, 0, 0);
        -webkit-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
    }

    .jssor_hover_2:hover .video-icon:after {
        border-left-color: #FFF;
    }

    .post-item-wrap:hover .video-icon:after {
        border-left-color: #FFF;
    }

    .video_icon_second {
        top: 76px;
        left: 144px;
        margin-top: 0;
        margin-left: 0;
        z-index: 0;
        width: 44px;
        height: 44px;

    }

    .video_icon_second:after {


        border-width: 10px 16px;
        border-left-color: rgba(255, 255, 255, 1);
        top: 50%;
        left: 50%;
        margin-top: -10px;
        margin-left: -5px;
        transition: border-color 0.3s;
        -webkit-transition: border-color 0.3s;
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
        transform: translate3d(0, 0, 0);
        -webkit-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
    }
    .root_left{

        transform: rotate(180deg);
        width: 19px;
        margin-right: 11px;
    }
    /****************************************************************************/
    /**************** End Video Section ******************************************/

    .jssor_hover_2 {
        height: 266px;
        position: relative;
        display: inline-block;
        overflow: hidden;
        /*background: #fff;*/
        /*box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.3);*/
        /*-moz-box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.3);*/
        /*-webkit-box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.3);*/
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        width:100%;
    }

    .jssor_hover_2 .layer_2 {
        position: absolute;
        top: 0px;
        right: 0px;
        bottom: 52px;
        left: 0px
    }

    .jssor_hover_2:hover .layer_2 {
        box-shadow: inset 0px 0px 120px rgba(0, 0, 0, 0.9);
        -moz-box-shadow: inset 0px 0px 120px rgba(0, 0, 0, 0.9);
        -webkit-box-shadow: inset 0px 0px 120px rgba(0, 0, 0, 0.9)
    }

    .jssor_hover_2 .layer_2 {
        transition: all 0.6s ease-in-out;
        -webkit-transition: all 0.6s ease-in-out;
        -moz-transition: all 0.6s ease-in-out;
        -ms-transition: all 0.6s ease-in-out;
        -o-transition: all 0.6s ease-in-out;
    }

    .jssor_hover_2:hover .layer_2 {
        transition: all 0.6s ease-in-out;
        -webkit-transition: all 0.6s ease-in-out;
        -moz-transition: all 0.6s ease-in-out;
        -ms-transition: all 0.6s ease-in-out;
        -o-transition: all 0.6s ease-in-out;
    }
    .jssor_image_2{
        -webkit-transition: all 0.6s ease 0s;
        -moz-transition: all 0.6s ease 0s;
        -ms-transition: all 0.6s ease 0s;
        -o-transition: all 0.6s ease 0s;
        transition: all 0.6s ease 0s;
    }
    .jssor_image_2:hover{
        /*opacity: 0.7;*/
    }
    .view_all {
        padding: 0px 9px;
        font-size: 18px;
        font-family: "BBCNassim";
        color: rgb(34, 144, 195);
        font-weight: bold;
        line-height: 1.2;
        width: 76px;
        height: 24px;
        border-width: 1px;
        border-color: rgb(173, 171, 171);
        border-style: solid;
        border-radius: 3px;
        background-color: rgb(243, 243, 243);
    }
    .video_number{
        width: 200px;
        font-size: 16px;
        color: rgb(0, 0, 0);
        font-weight: bold;
        line-height: 1.2;
        float: right;
        margin-right: 70px;
        margin-top: 2px;
    }

    .video_number span {
        font-size: 16px;
        color: rgb(255, 162, 0);
        vertical-align: bottom;

    }
    .jssor_image_2{
        background-size: 134%;
    }
    .video_title_2 a {
        overflow: hidden;
        text-overflow: ellipsis;
        color: #000;
        padding-left: 2px;
        display: block;
        height: 27px;
    }

    /*jssor slider loading skin spin css*/
    .jssorl-009-spin img {
        animation-name: jssorl-009-spin;
        animation-duration: 1.6s;
        animation-iteration-count: infinite;
        animation-timing-function: linear;
    }

    @keyframes jssorl-009-spin {
        from {
            transform: rotate(0deg);
        }
        to {
            transform: rotate(360deg);
        }
    }

    /*jssor slider bullet skin 057 css*/
    .jssorb057 .i {
        position: absolute;
        cursor: pointer;
    }

    .jssorb057 .i .b {
        fill: none;
        stroke: #fff;
        stroke-width: 2000;
        stroke-miterlimit: 10;
        stroke-opacity: 0.4;
    }

    .jssorb057 .i:hover .b {
        stroke-opacity: .7;
    }

    .jssorb057 .iav .b {
        stroke-opacity: 1;
    }

    .jssorb057 .i.idn {
        opacity: .3;
    }

    /*jssor slider arrow skin 074 css*/
    .jssora074 {
        top: -8px!important;
        display: block;
        position: absolute;
        cursor: pointer;
    }

    .jssora074 .a {
        fill: #333;
        fill-opacity: .7;
        stroke: #fff;
        /*stroke-width: 160;*/
        stroke-width: 960;
        stroke-miterlimit: 10;
        stroke-opacity: .7;
    }

    .jssora074:hover {
        opacity: .8;
    }

    .jssora074.jssora074dn {
        opacity: .4;
    }

    .jssora074.jssora074ds {
        opacity: .3;
        pointer-events: none;
    }
    .jssor_image_2 {
        height: 180px;
        height:213px;
        width:100%;
        background-repeat: no-repeat;
        background-position: center;

    }
    .link_hover {

        display: block;
    }
@media screen and (max-width: 800px){
.search_in_site{
    font-size: 13px;
    display:none;
}
.header_input_search{
    width: 186px;
}

}
/**************************************** End  Videos list *****************************/
/**************************************** Footer *****************************/
.footer{
 background-color: rgb(74, 74, 74);
   height: 500px;
}
.footer_info{
width:271px;
text-align:center;
color:#fff;
    font-size: 14px;
}
.footer_info_text{
font-size: 12px;
margin-top: 6px;
font-family: sans-serif;


}
.footer_info_text p{
text-align: right;
margin-bottom: 3px;
}
.footer_info_line{
height: 1px;
background-color: #868686;
 margin-top: 12px;
 margin-bottom: 12px;

}
.mob_app{
    margin-bottom: 9px;
margin-top: 6px;
    margin-right: -28px;
    color: #fff;
    font-size: 15px;
}
.input_{
    height: 30px;
        font-size: 14px;
            border-radius: .3rem;
}
textarea{
font-size: 14px;
}
.contact_us_button{
    padding: 0px;
 background-color:#00aee6;
    width: 100%;
        margin-top: -9px;
    height: 33px;
    border-radius: .3rem;
}
.map_{
   height:225px;
}
textarea {
    border-radius: .3rem;
    }
/**************************************** End Footer *****************************/
.E_learning_description{
    padding-right: 28px;
font-size:13px;
}
.E_learning_form{
position: relative;
    width: 294px;
    height: 289px;
    border: solid #5c5c5c 1px;
    margin-right: 28px;
    margin-top: 6px;
    background: #fff;
    z-index: 1111111111111111111;
    z-index: 16;
}
.E_learning_login{
    text-align: center;
    font-size: 20px;
    font-weight: bold;
    padding-top: 8px;
}
.label_form{
    padding-right: 15px;
    font-size: 12px;
    padding-top: 3px;
}
.check_box{
    margin-top: 4px;
    float: right;
    margin-right: 47px;
    margin-left: 7px;
}
.remember{
float: right;
font-size:13px;
}
.login_{
    margin-right: 50%;
    font-size: 14px;
    width: 50px;
    height: 30px;
    border: solid #cecece 0.5px;
}
.cookies{
font-size: 13px;
    text-align: center;
    margin-top: 17px;

}
.background_form{
    z-index: 1;
    background-color: rgb(151, 204, 236);
    width: 353px;
    height: 104px;
    margin-top: -78px;
    position: relative;
}
/******************  gallery***********************************************/
.first_gallery{
width:361px;
height:213px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
/*****************End gallery***********************************************/
/*****************End gallery***********************************************/
.news_row {
    -webkit-transition: all 0.5s ease 0s;
    -moz-transition: all 0.5s ease 0s;
    -ms-transition: all 0.5s ease 0s;
    -o-transition: all 0.5s ease 0s;
    transition: all 0.5s ease 0s;
    padding-left: 40px;
    padding-right: 24px;
    padding-bottom: 24px;
    padding-top: 23px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3), 0 0 40px rgba(255, 255, 255, 0.1) inset;
    margin-top: 20px;
    height: 237px;

    background-color: rgb(237, 242, 246);
    /*box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.52);*/
    box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.52);
}
.news_row:hover{
    background-color: rgba(183, 183, 183, 0.09);
    box-shadow: 0px 0px 4px 0px rgb(31, 102, 191);
    box-shadow: 0px 0px 4px 0px rgb(31, 102, 191);
}
     .link_hover{
                display: block;
                height: 187px;
            }
            .dot {
                float: left;
                background: #cfd8dc;
                height: 5px;
                width: 5px;
                border-radius: 50%;

                margin: 10px 5px;
            }
            .news_views {
                width: fit-content;
                float: left;
                /* color: #cfd8dc; */
                color: #677175;
                font-size: 14px;
            }

            .news_time_list {
            margin-bottom: 20px;
                color: #9facb5;
                color: #7890af;
                font-size: 14px;
            }
            .news_image_list {
                background-position: center;
                width: 265px;
                height: 187px;
                background-size: cover;
                background-repeat: no-repeat;
            }
            .news_title_list {
                    min-height: 93px;
            }
            .news_title_list a {
                font-size: 16px;
                color: rgb(0, 0, 0);
                font-weight: bold;
                line-height: 1.7;
            }
            .news_info {
                margin-top: 40px;
            }
            .heart:hover {
                color: #00b1ff;
            }

            .heart {
                -webkit-transition: all 0.5s ease 0s;
                -moz-transition: all 0.5s ease 0s;
                -ms-transition: all 0.5s ease 0s;
                -o-transition: all 0.5s ease 0s;
                transition: all 0.5s ease 0s;
                text-align: left;
                font-size: 24px;
                color: #cfd8dc;
                margin-left: 4px;
            }
/*****************End gallery***********************************************/
.slider_{
padding-top: 42px;
padding-right: 20px;
}
.content_8{
padding-left: 19px;

}
/*********************************Articles css**************************************************/
.articles_category{
    padding-right: 40px;
    background-color: rgb(76, 160, 197);
    height: 40px;
    width: 100%;
    color: #fff;
    font-weight: bold;
    padding-top: 6px;
}
.art_section{
height:450px;
background:#edf2f6;
padding: 0px 25px;
}
.art_section_row{
    padding: 13px;
margin-top:18px;
    height: 106px;
  background-color: rgb(255, 255, 255);
}
.art_title{
margin-top: 5px;

}
.art_author{
    font-size: 14px;
    color: rgb(230, 0, 0);
    font-weight: bold;
    line-height: 1.2;
    margin-top: 10px;
    width: fit-content;
    float: right;

}
.reveal-overlay{
    z-index: 111111111111111111111111111111;

}
.facebook_title_page{
color: #000;
    font-weight: bold;
    text-align: center;
}
.facebook_title_page2{
text-align:center;
    font-size: 13px;
    margin-bottom: 6px;
    margin-top: 5px;
}
.facebook_section{
background-color: rgb(237, 242, 246);

padding-top: 4px;
    padding-bottom: 9px;
}
.E_learning_row_form{
width: 265px;
padding: 0px 20px;
}
/**********************************End Articles css ********************************************/
/*********************************************************************************************************************/
/*  css of mobile */
    * {
        margin: 0;
        padding: 0;
    }
    .gsc-control-cse{
        display: none;
    }
    /* Icon 1 */
     #nav-icon3{
         margin-right: 0px;
         margin-top: 15px;
         margin-left: 20px;
         zoom: .5;
        width: 60px;
            margin-right: 20px;
        height: 45px;
        position: relative;
         float: right;
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
        -webkit-transition: .5s ease-in-out;
        -moz-transition: .5s ease-in-out;
        -o-transition: .5s ease-in-out;
        transition: .5s ease-in-out;
        cursor: pointer;
    }
   #nav-icon3 span{
        display: block;
        position: absolute;
        height: 9px;
        width: 100%;
        background: #fff;
        border-radius: 9px;
        opacity: 1;
        left: 0;
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
        -webkit-transition: .25s ease-in-out;
        -moz-transition: .25s ease-in-out;
        -o-transition: .25s ease-in-out;
        transition: .25s ease-in-out;
    }
    /* Icon 3 */
    #nav-icon3 span:nth-child(1) {
        top: 0px;
    }
    #nav-icon3 span:nth-child(2),#nav-icon3 span:nth-child(3) {
        top: 18px;
    }
    #nav-icon3 span:nth-child(4) {
        top: 36px;
    }
    #nav-icon3.open span:nth-child(1) {
        top: 18px;
        width: 0%;
        left: 50%;
    }
    #nav-icon3.open span:nth-child(2) {
        -webkit-transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        -o-transform: rotate(45deg);
        transform: rotate(45deg);
    }
    #nav-icon3.open span:nth-child(3) {
        -webkit-transform: rotate(-45deg);
        -moz-transform: rotate(-45deg);
        -o-transform: rotate(-45deg);
        transform: rotate(-45deg);
    }
    #nav-icon3.open span:nth-child(4) {
        top: 18px;
        width: 0%;
        left: 50%;
    }
    @keyframes transformscale {
        0% {opacity:0.0;transform:scale(0.1);}
        100% {opacity:1;transform:scale(1);}
    }
.menumobile{
    transform:scale(1,1)!important;
    height: auto !important;
}
.menumobile .accordion-menu li{
opacity:1!important;
}
#menu .accordion-menu li{
    -webkit-transition: .1s ease-in-out;
    transition: .1s ease-in-out;
opacity:0;
}
#menu{
    z-index: 111111111111111111111111111111111111111111111111;
}
    #menu{
        font-weight: bold;
        color: #ffffff;
        transform:scale(1,0);
        margin-top: 47px;
        background: #0077b5;
        background: #4a4a4a;
        position: absolute;
        min-width: 200px;
            min-width: 100%;
        -o-transition-property: all;
        transition-property: all;
        -webkit-transition-duration: .3s;
        -moz-transition-duration: .3s;
        -o-transition-duration: .3s;
        transition-duration: .3s;
        -webkit-transition-timing-function: ease;
        -moz-transition-timing-function: ease;
        -o-transition-timing-function: ease;
        transition-timing-function: ease;
        transform-origin:100%   0% ;
            height:auto;
    }
   /* end css mobile */
/**********************************  css ********************************************/
.padding_right_25{
padding-right: 25px;
}
.video_section_home{
padding-right:50px;
padding-top: 50px;
}
@media screen and (max-width: 1300px){
.first_date , .featured_article , .author_{
display:none;
}

.first_article {
    width: 270px;
    }
.article_row{
width:270px;
}
.second_article {
    width: 270px;
    }
}
@media screen and (max-width: 1024px){
.name_school{
margin-bottom:10px;
}
.statistics{
height:auto;
}
}
@media screen and (max-width: 800px){
.top_news_title{
font-size: 16px!important;
    margin-top: 15px;
}
.image_back{
    height: 200px!important;
}
.news_title_list a{
letter-spacing: 0px;
}
.view_all{
font-size:17px;
}
.video_number span{

    margin-left: 10px;
}
.news_cat{
font-size:19px;
}
.news_view_more {
    float: left!important;
    }
.video_number{

    margin-right: 10px;
        width: fit-content;
}
.padding_right_25{
padding-right:0px;
}
.book_row{
    padding-left: 0px!important;
}
.news_info{
margin-top: -25px;
}
.news_image_list{
width:100%;
}
.news_row{
height:auto;
}
.footer{
padding:0px 10px;
height:auto;
}
.cookies{
    margin-top: 10px;
}
.jssorb072{
right:0px!important;
}
.slider_{
padding-right:0px;
}
.article_row,.second_article{
width:100%;
}


}
.title_slider_mobile{
    font-size: 65px;
    padding: 54px 62px;
    z-index: 1;
    color: #fff;
        background: rgb(0 0 0 / 40%);
    position: absolute;
    top: 513px;
    display:none;
}
.image_slider_mobile{
height: 1300px!important;
}
@media screen and (max-width: 600px){
.school_back{
height:16rem!important;
}
* {
    letter-spacing: 0px;
    }
.download_this_link{
margin-right:0px!important;
}
.art_info{
float: right;
    width: 100%;
}
.ads_section{
margin-top: 26px!important;
}
.jssorb072{
transform: scale(1)!important;
    margin-top: -1px!important;
}
.news_cell{
     margin: 0px 0px 0px 0px!important;
}
.large-3:first-child .news_cell {
margin: 0px 0px 0px 0px!important;
}
.header_serch {
    margin-left: 14px;
        margin-top: -40px;
}
.app_s {
width: 271px!important;
}
.statistics{
    padding: 20px 0px!important;
}
.name_school {
    margin-bottom: 28px;
    font-weight: bold;
}
.title_slider_mobile{
display:block;
height: 322px;
}
.grid figure{
display:none;
}
.jssor_1_row{
margin-top: 0px!important;
}
.header_social_item{
    margin-right: 4px!important;
}
.art_section_row{
height:auto!important;
}
iframe{
    width: 100%!important;
}
a{
max-width:100%;
word-wrap:break-word;
}
.footer_padding_top{
padding-top: 0px!important;
}
.article_{
min-height: 100%;
    padding: 0px 0px!important;
        border: 0!important;
}
.first_article_title{
    font-size: 14px;
    margin: 13px 0px;
}
.first_article{
    width: 100%;
}
.first_article_img{
width:100%;
}
.jssora074{
display:none!important;
}
.video_section_home{
padding-right:0px;
}
.news_view_more{
    margin-left: 0px!important;
    margin-top: -40px;
}
.footer_info{
    margin-right: auto;
    margin-left: auto;
}
.saraj2{
    margin-right: auto!important;
    margin-left: auto!important;
    display: block;
    float: inherit!important;
}
.content_8{
padding-left: 0px;
}
.row:first-child{
padding-right: 9px;
}
.E_learning_row_form{
width:100%;
}
.div_content {
padding: 32px 8px!important;
}
.first_gallery{
width:100%;
}
.E_learning_form{
width:100%;
margin-right:0px;
}
.background_form{
width:100%;
}
.header_social{
margin-left:6px!important;

}

.image_slider_title{
top:678px;
}
.header_serch {
    width: 100%;
    margin-left: 0px;
        margin-top: -12px;
}
.button_sub{
float:right;
}
.header_input_search{
    border: 0px;
        box-shadow: none;
}
.select_ {
    box-shadow: none;
    width: 113px;
        height: 28px;
        border:0px;
}
.header_input_search{
 height: 28px;
}
.header_menu_2{
height: 48px;
}
#nav-icon3{
margin-top: 17px;
}
.logo{
width: 267px;
    margin-right: 10px!important;
          margin-top: 16px;
}
.alkafeel_logo{
max-width: 57px;
margin-top: 16px;
    max-height: 61px;
}
.alkafeel_logo_image{
  max-height: 61px;
}
.pagination li{
    margin-top: 16px!important;
}
}

@media screen and (max-width: 480px){
.g-recaptcha{
margin-right: -22px;
}
.E_C_slider_title_2{
display:none;
}
.E_C_slider_title a{
font-size:22px;
}
.marqaib_section{
padding: 0px 9px;
}
.row:last-child{
    padding: 0px 9px;
}
.news_icon{
margin-right: 13px;
}
.jssora051{
display:none!important;
}
.grid figure .media_image{
margin-right:auto;
margin-left:auto;
max-width: 58%!important;
}
.statistics .small-4 .img{
margin-top:10px;
}
.title_school{
font-size: 18px!important;
}
.root_right{
    right: -16px!important;
}
.video_number {
display:none;
}
.header_serch{
    margin-top: -12px;
}
.alkafeel_logo {
    margin-right: 10px;
}

}
@media screen and (max-width: 360px){
.header_input_search{
width: 165px;
}
.select_{
    font-size: 13px;
    padding: 0px;
        width: 87px;
}

}
@media screen and (max-width: 300px){
.logo {
    width: 195px!important;
    }
    .alkafeel_logo_image{

    }
}
/**********************************End   css ********************************************/
.liked_text {
    margin-left: 151px;
    margin-top: 3px;
    color: #0161b7;
    font-size: 13px;
   /* width: 60px;   */
       margin-left: 149px!important;
           margin-top: 20px;
   width: 117px;
    float: right;
}
.liked_heart {
    vertical-align: sub;
    font-size: 18px;
    margin-right: 4px;
}
.close-button {
    font-size: 45px!important;
    position: absolute;
    color: #000000;
    cursor: pointer;
    font-weight: bold;
}

#mobileexampleModal11{
bottom:0px!important;
    height: auto!important;
}
.reveal-overlay{
    overflow-y: auto!important;
}
body.is-reveal-open {
    overflow: scroll!important;
    overflow: auto!important;
}

.accordion-menu a{
font-weight: 100;
}

.accordion-menu li {
    border-bottom: 1px solid #949494;
    min-height: 47px;
    width: 100%;
    padding-top: 3px;
    text-align: center;
    text-align: right;
}
.accordion-menu .is-accordion-submenu a{
color: #fff;
}
.accordion-menu .is-accordion-submenu-parent:not(.has-submenu-toggle) > a::after{
    border-color: #ffffff transparent transparent;
}
/*28-11-2021 ******************/
.news_cell{
    height: 290px;
     -webkit-box-shadow: 0 0 70px rgb(0 0 0 / 5%);
    -ms-box-shadow: 0 0 70px rgba(0,0,0,.05);
    -o-box-shadow: 0 0 70px rgba(0,0,0,.05);
    box-shadow: 0 0 70px rgb(0 0 0 / 5%);

    box-shadow: rgb(0 0 0 / 10%) 0 10px 50px;
margin: 0px 10px 0px  10px;
padding:0px!important;
}
.hj_title_news_ {
padding: 0px 6px;
}
.date {
padding-left: 11px;
}
.large-3:first-child .news_cell{
    margin: 0px 0px 0px 8px;
}
.large-3:last-child .news_cell{
    margin: 0px 8px 0px 0px;
}
.ads_section{
margin-top: 50px;
}
.menu_spain_title{
font-size: 17px;
    margin-right: 6px;
    vertical-align: baseline;
}
.pagination li{
    display: inline-block!important;
}
.date_span{
    display: inline-block;
    top: -3px;
    position: relative;
    margin-left: -3px;
}
.date_icon {
        margin-right: 4px;
        font-size: 22px;
        color: #999999;
    }
    .home_news_date{
    position: inherit;top: -100px;float: left;width: fit-content;padding-left: 8px;padding-top: 7px;padding-right: 7px;
    }
    #makes{
        min-height: 300px;
    }
/*28-11-2021 ******************/