/*Start General Rules*/
body {
    font-family: 'DroidKufi-Regular', 'Droid Sans', sans-serif;
    background: url("../images/mainBackground.jpg") fixed; /*Remove Comment For Better Look But Low Performance*/
    font-size: 16px;
    overflow: hidden;
}
h1 { color: white; position: relative; top: 25px; }
a, a:hover, a:active, a:focus { text-decoration: none; color: black }
h4.panel-title > a::after {
    font-family: "Glyphicons Halflings";
    content: "\e258";
    float: left;
    transform: rotate(90deg);
    transition: all 0.2s ease-in-out;
}
h4.panel-title > a.collapsed::after {
    transform: rotate(180deg);
}
textarea { resize: vertical; }
.form-group { position: relative; }
.pagination>li:first-child>a { border-radius: 0 4px 4px 0 }
.pagination>li:last-child>a { border-radius: 4px 0 0 4px }
/*End General Rules*/

/*Start Framework*/
.text-black { color: grey; }
.text-green { color: green; }
.text-white { color: white; }

.bg-olive { background-color: #16a085; }
.bg-green { background-color: #78d342; }
.bg-purple { background-color: #baa9ff; }
.bg-lightgreen { background-color: #c1e2b3; }

div.main-container { background-color: #fbfbfb; padding-top: 80px; box-shadow: 0px 0px 12px 1px #ccc; }
.main-heading {
    padding: 0 10px;
    background-color: #ddd;
    color: #3989ab;
    border-bottom: 5px solid crimson;
    border-radius: 10px;
    box-shadow: 4px 4px 20px 0px rgba(0, 0, 0, 0.41);
}
.none { position: static; margin: 50px 0; }
div.redirect { margin-top: 100px !important; }
span.required {
    position: absolute;
    top: 12px;
    left: 10px;
    z-index: 2;
    font-size: 20px;
    color: crimson;
}
span.date { float:left; opacity: 0.8; font-size: 13px; }
span.news { position:absolute; left: 5px; bottom: 5px; opacity: 0.8; }
span.required {
    position: absolute;
    top: 7px;
    left: 10px;
    z-index: 2;
    font-size: 20px;
    color: crimson;
}
.search {
    margin-bottom: 50px;
}
.select2-container .select2-selection--single { height: 32px!important; }
.select2-container--default .select2-results>.select2-results__options { max-height: 500px!important; }
div.col-sm-3.select { padding-top: 3px; }
/*End Framework*/

/*Start Loading Screen*/
section.loading-screen { position:fixed; top:0; bottom:0; left:0; right:0; background-color: #0d8aa5; z-index: 999999; }
section.loading-screen h1 { position: absolute; width: 100%; margin: 0; padding: 0; }
section.loading-screen h1:first-of-type { top: calc(50% - 150px); }
section.loading-screen h1:last-of-type { top: calc(50% + 110px); }
.loading {
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -60px 0 0 -60px;
    background: #fff;
    width: 100px;
    height: 100px;
    border-radius: 100%;
    border: 10px solid #19bee1;
}
.loading:after {
    content: '';
    background: transparent;
    width: 140%;
    height: 140%;
    position: absolute;
    border-radius: 100%;
    top: -20%;
    left: -20%;
    opacity: 0.7;
    box-shadow: rgba(255, 255, 255, 0.6) -4px -5px 3px -3px;
    animation: rotate 2s infinite linear;
}

@keyframes rotate {
    0% {
        transform: rotateZ(0deg);
    }
    100% {
        transform: rotateZ(360deg);
    }
}
/*End Loading Screen*/

/*End Top Button*/

/*Google translate style*/
#google_translate_element {
    position:fixed;
    z-index:2;
    top:10px;
    left:10px;
}

.skiptranslate.goog-te-gadget {
    font-size: 0
}

.skiptranslate.goog-te-gadget a {
    display: none;
}

.skiptranslate.goog-te-gadget select {
    font-size: 20px
}

/*Google translate style*/

/*Start Navbar*/
.nav>li>a { padding: 15px 10px }
section.top-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 7px 30px;
    background: #57bdda;
}

section.top-nav img { filter: drop-shadow(1px 1px 5px #0000005c); }
hr.header-nav-hr { border: 1px solid #45717d; margin: 0; }
.navbar { border-radius: 0; font-size: 1.1em; margin-bottom: 0; display: none; z-index: 99999999 }
.navbar-default {
    border: none;
    background-color: white;
    box-shadow: 0px 0px 3px #0000005c;
}
.dropdown-menu { border: none; }
.navbar-brand { position: relative }
.navbar-brand img { height: 50px; position: relative; top: -15px; }
.navbar-default .navbar-nav>li>a { transition: all 0.1s ease-in-out }
.navbar-default .navbar-nav>li>a:hover { background-color: #4ac1da; color: white }
.navbar-toggle {
    float: right;
    margin-left: 0;
    margin-right: 15px;
}
.dropdown-menu { background-color: #027ea0 }
.dropdown-menu>li>a { background-color: white !important; font-size: 1.1em; padding: 10px 20px; }
.hvr-sweep-to-left:before { background-color: #4ac1da !important }
.dropdown-menu>li>a:hover { color: white; }
.dropdown-menu .divider { margin: 0; }
.dropdown-menu .divider:last-of-type { display: none }
span.icon-bar { transition: all 0.2s ease-in-out; }
span.icon-bar.cool:nth-of-type(1) { transform: rotateZ(45deg) translateX(4px) translateY(4px); }
span.icon-bar.cool:nth-of-type(2) { opacity: 0; }
span.icon-bar.cool:nth-of-type(3) { transform: rotateZ(-45deg)translateX(4px) translateY(-4px); }
/*End Navbar*/

/*Start Index Page*/

/*Start Slider*/
div.slide { position: relative }
div.slide div.slide-caption { position: absolute; bottom: 0; width: 100%; }
div.slide a {
    display: block; max-width: 1000px; margin: auto; padding: 10px;
    border-radius: 5px 5px 0 0; background-color: rgba(99, 99, 99, 0.83);
    color: white;
    transition: all 0.1s ease-in-out;
}
div.slide a:hover { background-color: #027ea0; }

/*Start Welcome*/
section.welcome h2 { color: #027ea0; }
section.welcome div.youtube h3 { color: white; background-color: #3f9dbc; margin-bottom: 0; padding: 10px 0; }
section.welcome div.youtube iframe { width: 100%; border: 6px solid #3f9dbc; }
/*End Welcome*/
/*Start Medical Staff*/
.doctors-slides .doctor {
    position: relative;
    z-index: 99;
    perspective: 1800px;
    margin-bottom: 50px;
}
.doctors-slides .doctor:hover .iFront { transform: rotateY(-180deg); }
.doctors-slides .doctor:hover .iBack { transform: rotateY(0deg); }
.doctors-slides .doctor .iFront {
    transition: 1s ease;
    backface-visibility: hidden;
    background-color: rgba(255, 255, 255, 0.7);
    border-radius: 20px;
    overflow: hidden;
}
.doctors-slides .doctor .iFront h2 {
    padding: 10px;
    background-color: #3989ab;
    margin: 0;
    font-size: 20px;
}
.doctors-slides .doctor .iFront img { display: block; width: 100%; height: auto; }
.doctors-slides .doctor .iBack {
    position: absolute;
    top: 0;
    width: 100%;
    backface-visibility: hidden;
    transform: rotatey(180deg);
    transition: 1s ease;
    color: black;
    height: 100%;
    background-color: rgba(221, 221, 221, 0.7);
    border-radius: 20px;
    text-align: center;
}
.doctors-slides .doctor .iBack h2 { font-size: 20px; }
.doctors-slides .doctor .iBack p { padding: 10px; }
/*End Medical Staff*/

/*End Index Page*/

/*Start Text Type*/
section.type-text div.thumbnail { box-shadow: 0px 0px 12px 1px #ccc; padding: 0 25px; }
section.type-text h2 { padding: 10px 0; border-bottom: 2px solid #4598b7; }
section.type-text img { max-height: 300px; margin: 0}
/*End Text Type*/

/*Start Thumbnail Type*/
section.type-thumbnail div.pic { position: relative; }
section.type-thumbnail div.pic img { height: 300px; width: 100%; }
section.type-thumbnail div.pic div.overlay {
    text-align: center;
    position: absolute;
    top: 0;
    width: 100%; height: 100%;
    background-color: rgba(255, 255, 255, 0.5);
    opacity: 0;
    transition: all 0.2s ease-in-out;
}
section.type-thumbnail div.pic div.overlay:hover { opacity: 1; }
section.type-thumbnail div.pic div.overlay a { position: absolute; left: calc(50% - 40px); top: calc(50% - 23px) }
section.type-thumbnail div.caption { height: 100px; overflow:hidden; }
/*End Thumbnail Type*/

/*Start Of Icon Type*/
section.type-icon a.icon { display: block; color: black; }
section.type-icon img { height: auto;  border: 1px solid #333; transition: all 0.1s ease-in-out; }
section.type-icon img:hover { background-color: white; padding: 3px; border: 1px solid #333; }
/*End Of Icon Type*/

/*Start Panel Type*/
section.type-panel h1 { position: static; margin: 50px 0; }
/*End Panel Type*/

/*Start Accordion Type*/
section.type-accordion h1 { position: static; margin: 50px 0; }
section.type-accordion img.img-responsive { max-height: 300px; margin-bottom: 10px;}
/*End Accordion Type*/

/*Start Tab Type*/
section.type-tab div.tab-pane { padding: 10px; }
section.type-tab  li.active a , section.type-tab  li.active a:hover , section.type-tab  li.active a:focus { background-color: #3ea8c5; color: white; }
/*End Tab Type*/

/*Start None Type*/
/*End None Type*/

/*Start Multimedia Section*/
.video-thumbnail { height: 350px; }
section.multi-media { margin-top: 50px; background: url('../images/swirl_pattern (2).png') fixed; padding-bottom: 50px; }
.video-js { width: 100%; height: 270px; }
section.multi-media div.tab-content { overflow: hidden; background-color: white; padding: 10px 0; }
section.multi-media div.tab-content div.caption, section.videos div.caption, section.photos div.caption { padding: 0px; }
.video-thumbnail div.caption { height: 76px; overflow-y: auto !important; }
a.video-caption { color: black; z-index: 2; padding: 6px; }
section.multi-media li a { color: white; }
section.multi-media li a:hover { color: black; }
/*End Multimedia Section*/

/*Start Videos Section*/
.youtubeVdieoTitle {
    background: black;
    padding: 6px;
}
.youtubeVdieoTitle > a {
    color: white;
}

.youtubeVdieoFill { background: black; height: 39px; }

.text-black { color: black!important; }
/*End Videos Section*/

/*Start FAQ Section*/
section.FAQ span.required { top: 12px }
/*End FAQ Section*/

/*Start Jobs*/
section.jobs form fieldset { padding-bottom: 25px; }
section.jobs form legend { font-weight: bold; padding-bottom: 5px; }
section.jobs form select { height: 40px; }
section.jobs form .required { left: -5px; }
section.jobs div[data-value] { display: none }
section.jobs div.wrapper { overflow: hidden; padding: 20px 0 }
/*End Jobs*/

/*Start JobTitle*/
.jobTitle {
    padding: 10px 15px;
    border-radius: 10px 25px 10px 25px;
    transition: all 0.25s;
    cursor: pointer
}

.jobTitle.col-md-4 {
    width: 30%;
    margin: 1.5%
}

.jobTitle:hover {
    color: black;
    background-color: white;
    box-shadow: 4px 4px 20px 0px rgba(0, 0, 0, 0.41) ;
}
/*End JobTitle*/

/*Start Footer*/
section.contact div.row { padding: 0 10px 10px 10px; }
section.contact div.row > div { color: white; border-radius: 10px; border-right: 5px solid #fbfbfb; margin-bottom: 10px; }
section.contact div.row > div h2 { margin: 0; padding: 10px; }
section.contact div.message { border-right: none !important; background-color: #0d8aa5; padding-bottom: 16px; }
div.map { overflow: hidden; padding-bottom: 13px; background-color: #3c96b5; }
#map { height: 253px; width: 100%; border: 1px solid #ddd; overflow: hidden; }
section.contact div.facebook { padding-bottom: 9px; background-color: #3b5998; }

section.statistics div.status { display: inline-block; background-color: #333; border-radius: 0 15px 0 15px; padding: 15px; }
span.site-view {
    margin-left: 2px;
    padding: 0px 7px;
    background-color: #3c96b5;
    border: 1px solid white;
    color: white;
}

section.statistics div.status i { color: white; padding: 7px 3px; border: 2px solid #ffffff; }

section.footer {
    margin-top: 25px;
    background-color: #333;
    color: white;
    font-size: 15px;
    padding: 10px 0;
}
section.footer p { margin: 0; }
section.footer p.copy { padding-top: 10px; }

/*End Footer*/

/*Start Social Media*/
section.social-media { position: fixed; left:0; top: calc(50% - 100px); z-index: 999 }
section.social-media a {
    float: left;
    padding: 10px 5px;
    background-color: #3b5998;
    border-radius: 0 5px 5px 0;
    color: white;
    transition: padding 0.1s ease-in-out;
    margin-bottom: 2px;
}
section.social-media a.youtube { background-color: #FF0000 }
section.social-media a[href='#contact'] { background-color: #3c96b5 }
section.social-media div:hover > a { padding-left: 25px }
section.social-media iframe.facebook-page { height: 0; border: 0px solid #3b5998; transition: border-radius 0.2s ease-in-out; }

/*End Social Media*/

/*Start Top Button*/
section.top-btn i{
    position: fixed;
    z-index: 9999;
    right: 20px;
    bottom: 20px;
    color: #3c96b5;
    cursor: pointer;
    display: none;
    opacity: 0.8;
    transition: opacity 0.1s ease-in-out;
    animation: up 0.4s ease-in-out alternate infinite;
}
section.top-btn i:hover { opacity: 1; }

@keyframes up {
    from { bottom: 20px; }
    to { bottom: 30px; }
}
/*End Top Button*/

/*Start Font Face*/
@font-face {
    font-family:'DroidKufi-Regular';
    src:url('//www.fontstatic.com/fonts/DroidKufi-Regular/DroidKufi-Regular.eot?#iefix');
    src:local('درويد كوفي'),
    local('DroidKufi-Regular'),
    url('//www.fontstatic.com/fonts/DroidKufi-Regular/DroidKufi-Regular.woff')
    format('woff');
}
/*End Font Face*/

/*Fix Framework*/
.table-responsive {
    overflow-x: auto !important;
}
/*Fix Framework*/

/*
@media (max-width: 901px) {
    .navbar-header {
        float: none;
    }
    .navbar-left,.navbar-right {
        float: none !important;
    }
    .navbar-toggle {
        display: block;
    }
    .navbar-collapse {
        border-top: 1px solid transparent;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
    }
    .navbar-fixed-top {
        top: 0;
        border-width: 0 0 1px;
    }
    .navbar-collapse.collapse {
        display: none!important;
    }
    .navbar-nav {
        float: none!important;
        margin-top: 7.5px;
    }
    .navbar-nav>li {
        float: none;
    }
    .navbar-nav>li>a {
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .collapse.in{
        display:block !important;
    }
}*/