/* ------------------------------------------------------
 custom UI By :
 Husien Adel  حسين عادل
 Senior UI designer
 Elearning Deanship @ KFU 2017
 ------------------------------------------------------ */
@import url("../fonts/font-awesome.min.css");


@font-face {
  font-family: 'hell';
  src: url("../fonts/HelveticaNeueW23forSKY-Reg.eot");
  /* IE9 Compat Modes */
  src: url("../fonts/HelveticaNeueW23forSKY-Reg.eot?#iefix") format("embedded-opentype"), url("../fonts/HelveticaNeueW23forSKY-Reg.woff") format("woff"), url("../fonts/HelveticaNeueW23forSKY-Reg.ttf") format("truetype");
  /* Safari, Android, iOS */ }


@font-face {
  font-family: 'noto';
  src: url("../fonts/NotoNaskhArabicUI-Reg.eot");
  /* IE9 Compat Modes */
  src: url("../fonts/NotoNaskhArabicUI.eot?#iefix") format("embedded-opentype"), url("../fonts/NotoNaskhArabicUI.woff") format("woff"),
  url("../fonts/NotoNaskhArabicUI.ttf") format("truetype");
}

* {
  padding: 0;
  padding: 0;
  border: none;
  text-decoration: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  }

html {
  font-size: 15px;

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  }

body {
  padding: 0;
  margin: 0;
  background-color: #fff;

  font-size: 15px; }

.tab-container {
  width: 100%;
  margin: 25px auto; }

.etabs {
  width: 100%;
  height: 100px;
  padding: 0;
  margin: 0; }

.etabs li {
  list-style: none;
  display: block; }

.icon {
  display: block;
  font-size: 1.3rem;
  width: 45px;
  height: 45px;
  border-radius: 45px;
  margin: 0 auto;
  line-height: 45px !important;

  border: 2px solid #fff;
  -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.3);
  box-shadow: 0 0 10px rgba(0,0,0,0.3);

 }

.etabs li a {
  background: #3d719f url('../img/pat.png') repeat;
  color: #fff;
  text-align: center;
  float: right;
  padding: 15px 10px;
  margin-left: 0px;
  width: calc(100% / 7);
  width: 14.28571428571429%;
  height: 100px;
  border-left: 1px solid rgba(0, 0, 0, 0.1);
  font: 1rem 'hell',Arial,sans-serif;
  line-height: 30px;
  box-sizing: border-box; }

.etabs li:first-child a {
  border-top-right-radius: 10px; }

.etabs li:last-child a {
  border-top-left-radius: 10px; }

.etabs li.active a {
background: #e76b25 url('../img/pat2.png') repeat;

  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3); }

.etabs li a:hover {
  text-decoration: none !important;
  background-color: #e76b25; }

.etabs li a:focus {
  text-decoration: none !important; }

#tabs1, #tabs3, #tabs4, #tabs5, #tabs6, #tabs7, #tabs2 {
  width: 100%;
  background: #356a98 url('../img/pat.png') repeat;
  color: #fff;
  overflow: hidden;


  margin: 0px auto;
  padding: 30px 30px 30px;

  border-top: 1px solid rgba(0, 0, 0, 0.2);
  box-shadow: inset 0px 1px 4px rgba(0, 0, 0, 0.2); }

#tabs2 {
  background-color: #356a98;
  width: 100%;
  margin: 0px auto;
overflow: hidden;
padding-bottom: 50px;
  border-top: 1px solid rgba(0, 0, 0, 0.2);
  box-shadow: inset 0px 1px 4px rgba(0, 0, 0, 0.2); }

#tabs1 h1, #tabs2 h1, #tabs3 h1, #tabs4 h1, #tabs5 h1, #tabs6 h1, #tabs7 h1 {
  font: 1.2rem 'hell',Arial,sans-serif;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); }


  #tabs1 h2, #tabs2 h2, #tabs3 h2, #tabs4 h2, #tabs5 h2, #tabs6 h2, #tabs7 h2 {
    font: 1.4rem 'hell',Arial,sans-serif;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
border-bottom: 1px solid rgba(255,255,255,0.1);
padding-bottom: 10px;

     }

     #tabs1 h3, #tabs2 h3, #tabs3 h3, #tabs4 h3, #tabs5 h3, #tabs6 h3, #tabs7 h3 {
       font: 1.4rem 'hell',Arial,sans-serif;
       text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
   border-bottom: 1px solid rgba(255,255,255,0.1);
   padding-bottom: 10px;
        }


#tabs1 ol, #tabs2 ol, #tabs3 ol, #tabs4 ol, #tabs5 ol, #tabs6 ol,  #tabs7 ol {
margin: 25px 0; overflow: hidden;
font: 1.1em 'noto',Arial,sans-serif;
padding-bottom: 10px;
}


  #tabs1 ol li,
  #tabs2 ol li,
   #tabs3 ol li,
    #tabs4 ol li,
     #tabs5 ol li,
      #tabs6 ol li,
      #tabs7 ol li,

      #tabs1 ul li,
      #tabs2 ul li,
       #tabs3 ul li,
        #tabs4 ul li,
         #tabs5 ul li,
          #tabs6 ul li,
          #tabs7 ul li

       {list-style-position: inside; line-height: 2.5;
width: 100%;

       }


       #tabs1 ol.full li,
       #tabs2 ol.full li,
        #tabs3 ol.full li,
         #tabs4 ol.full li,
          #tabs5 ol.full li,
           #tabs6 ol.full li,
           #tabs7 ol.full li
            {list-style-position: inside; line-height: 2.5;
     width: 50%; float: right;

            }

            #tabs1 li.full li,
            #tabs2 li.full li,
             #tabs3 li.full li,
              #tabs4 li.full li,
               #tabs5 li.full li,
                #tabs6 li.full li
                 {list-style-position: inside; line-height: 2.5;
          width: 50%; float: right;

                 }

 #tabs4, #tabs5 {padding: 0;}

.xlink {display: block; color: #fff; font: 1.1rem 'noto',Arial,sans-serif;
padding: 20px 35px; border-bottom: 1px solid rgba(255,255,255,0.1); text-shadow: 0 2px 2px rgba(0,0,0,0.2);
}
.xlink:hover, .xlink:visited, .xlink:focus {color: #fff; text-decoration: none;
background-color: rgba(0,0,0,0.1);

}
.xlink i {margin-left: 5px; font-size:1.3rem; vertical-align: middle;
-webkit-transition: all .3s;
-o-transition: all .3s;
transition: all .3s;
}


.xlink:hover i {color: #e76b25; padding-right:2px;}
    #tabs1 ul li, #tabs2 ul li, #tabs3 ul li, #tabs4 ul li, #tabs5 ul li, #tabs6 ul li, {list-style-position: inside; line-height: 2;}



.thum {
  float: left;
  margin: 20px 25px 35px 0;
  text-align: center;
  font: 0.95rem 'noto',Arial,sans-serif;
  width: 182px;
overflow: hidden;
text-shadow: 0 1px 1px #000;

  }

.thum img {
  width: 172px;
  height: 250px;
  margin-bottom: 10px;
  border-radius: 25px;
  border: 5px solid #fff;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.4); }

#tabs1 p, #tabs3 p, #tabs5 p, #tabs6 p, #tabs7 p {
  text-align: justify;
  font: 1.1em 'noto',Arial,sans-serif ;
  text-shadow: 0 1px 1px rgba(0,0,0,0.2);
  line-height: 2; }


    #tabs3 ul li a, #tabs4 ul li a, #tabs5 ul li a, #tabs6 ul li a, #tabs7 ul li a {
      color: #fff;
      background-color: #c1690e;
      padding: 5px; }
      #tabs3 ul li a:hover, #tabs4 ul li a:hover, #tabs5 ul li a:hover, #tabs6 ul li a:hover, #tabs7 ul li a:hover {
        text-decoration: none; }


    #tabs3 ol li a {
      color: #fff;
      background-color: #c1690e;
      padding: 5px; }
      #tabs3 ol li a:hover {
        text-decoration: none; }

.accordion {
  margin: 0px; }
  .accordion dt, .accordion dd {
    border-bottom: 0; }
  .accordion dt a {
    display: block;
    clear: both;
    background-color: #356a98;
    padding: 20px 15px;
    box-sizing: border-box;
    font: 1.1rem 'hell',Arial,sans-serif;
    color: #fff;
    box-shadow: 5px 0px 10px rgba(0, 0, 0, 0.3);
    transition: all .3s; }
    .accordion dt a:hover {
      text-decoration: none;
      background-color: #245680; }
      .accordion dt a:hover i {
        background-color: #c1690e !important;
        box-shadow: 0 0 15px rgba(0, 0, 0, 0.5); }
    .accordion dt a:focus {
      text-decoration: none; }
    .accordion dt a i {
      display: inline-block;
      width: 50px;
      height: 50px;
      background-color: rgba(0, 0, 0, 0.5);
      text-align: center;
      font-size: 1.5rem;
      line-height: 50px;
      border-radius: 50px;
      margin-left: 5px; }
  .accordion dd {
    display: block;
    width: 100%; }
    .accordion dd a {
      display: block;
      width: calc(100%/5);
      float: right;
      text-align: right;
      background-color: #c1690e !important;
      border-left: 1px solid rgba(255, 255, 255, 0.3);
      font: 1rem hell,Arial,sans-serif;
      border-bottom: 1px solid rgba(0, 0, 0, 0.2);
      padding: 20px 15px;
      box-sizing: border-box;
      color: #fff; }
      .accordion dd a:hover {
        text-decoration: none;
        background-color: #ac5f10 !important;
        box-shadow: inset 0px 0 10px rgba(0, 0, 0, 0.2); }
      .accordion dd a:focus {
        text-decoration: none; }
    .accordion dd:last-of-type {
      position: relative;
      top: -1px; }

.list4 dd a {
  width: calc(100%/4) !important; }

.accordion:nth-of-type(2n) dt a {
  background-color: #2a5f8c; }
  .accordion:nth-of-type(2n) dt a:hover {
    text-decoration: none;
    background-color: #245680; }

.card {
  width: 100%;
  margin: 0 auto 40px;
  overflow: hidden; }
  .card .photoThum {
    float: right; }
    .card .photoThum img {
      border: 4px solid #fff;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
      margin-left: 20px;
      overflow: hidden; }
  .card h3 {
    font: 1.1rem 'hell',Arial,sans-serif;
    padding: 0;
    margin: 0;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5); }
  .card h4 {
    font: 0.9rem Arial,sans-serif;
    text-transform: uppercase;
    padding: 0;
    margin: 0;
    letter-spacing: 1px; }
  .card .desc {
    font: 0.9rem 'hell',Arial,sans-serif;
    color: #badfff;
    padding: 5px 0;
    overflow: hidden;
    display: block; }
  .card .meta ul {
    padding: 5;
    margin: 0; }
    .card .meta ul li {
      list-style: none;
      line-height: 1.6 !important;
      font: 0.9rem Arial,sans-serif;
      letter-spacing: 1px; }
      .card .meta ul li i {
        vertical-align: middle;
        margin-left: 5px; }




.customTable {text-shadow: 0 1px 1px rgba(0,0,0,0.4); font-family: 'noto'; text-align: center; -webkit-box-shadow: 0 0 5px rgba(0,0,0,0.2); font-size: 1.1rem !important;
box-shadow: 0 0 5px rgba(0,0,0,0.2);}
.customTable thead {background-color: #e76b25; }
.customTable thead tr td {padding: 20px 10px;}
.customTable tbody tr td:nth-of-type(3) {background-color: rgba(0,0,0,0.2); }

.customTable tbody tr td:nth-of-type(4) {background-color: rgba(0,0,0,0.3); }
.customTable tbody tr td:nth-of-type(3), .customTable tbody tr td:nth-of-type(4) {text-align: center;}
.customTable i {margin-left: 5px;}








.customTable2 {text-shadow: 0 1px 1px rgba(0,0,0,0.4); font-family: 'noto'; text-align: center; -webkit-box-shadow: 0 0 5px rgba(0,0,0,0.2);
font-size: 1.1rem; margin: 0;
box-shadow: 0 0 5px rgba(0,0,0,0.2);}
.customTable2 thead {background-color: rgba(0,0,0,0.3) ;  text-align: center; vertical-align: middle;}

.customTable2 tr td:nth-child(1) {width: 10%; vertical-align: middle; text-align: center;
background-color: rgba(0,0,0,0.2);  line-height: 2 !important;
}
.customTable2 tr td:nth-child(2) {width: 15%; vertical-align: middle; text-align: center;}
.customTable2 tr td:nth-child(3) {width: 20%; vertical-align: middle; text-align: center;
background-color: rgba(0,0,0,0.2);
}
.customTable2 tr td {position: relative;}
.customTable2 tr td:nth-child(3) >  ul li {list-style: none; text-align: center;  position: relative;}

.customTable2 tr td:nth-child(2)::before {
content: "\f19c"; font-family: 'fontAwesome'; color: rgba(255,255,255,0.04); text-shadow: none;
font-size: 3rem; position: absolute; bottom: 5%; right: 0; left: 0; margin: 0 auto;
}
.customTable2 tr {-webkit-box-shadow: 0px 1px 2px 3px rgba(0,0,0,0.1);
box-shadow: 0px 1px 2px 3px rgba(0,0,0,0.1);
border: none;
}

.customTable2 tr td:nth-child(4) {width: 55%; vertical-align: middle;}
.customTable2 tr td:nth-child(4) ol li {text-align: justify; padding: 0 15px; line-height: 3; font-size: 1rem; }


.customTable2 thead tr td {padding: 20px 10px;}
.customTable2 tbody tr td:nth-of-type(3) { }

.customTable2 tbody tr td:nth-of-type(4) {background-color: rgba(0,0,0,0.1); }
.customTable2 tbody tr td:nth-of-type(3), . tbody tr td:nth-of-type(4) {text-align: center;}










.bigSize {font-size: 1.6rem !important; padding: 0 0 15px 0; font-family: 'noto' !important; color: #fff;}



.contactBlock {width: 75%; background-color: #fff; color: #356a98; text-align: center;
height: 350px; padding: 40px 0;  border-radius: 50px; margin: 25px auto;
-webkit-box-shadow: 0 0 25px rgba(0,0,0,0.3);
box-shadow: 0 0 25px rgba(0,0,0,0.3);
}
.contactBlock h4 {font-size: 1.8rem; color: #000; font-family: 'hell';}
.contactBlock .cicon {display: block;  background-color: #e76b25; color: #fff;
width: 90px; height: 90px; border-radius: 90px; font-size: 2.7rem; line-height: 100px; text-align: center; margin: 0 auto; text-shadow: 0 1px 5px rgba(0,0,0,0.3);
}
.contactBlock ul { margin: 0; padding: 15px 0;}
.contactBlock ul li {list-style: none;
font: 1.1rem 'Noto Naskh Arabic',Arial,sans-serif; color: #444;  text-align: center;
 line-height: 2.1 !important;

}


#tabs4 {padding-bottom: 30px;}
#tabs4 h3 {border: none;  background-color: rgba(0,0,0,0.2); padding-bottom: 15px !important;
-webkit-box-shadow: 0px 1px 2px rgba(0,0,0,0.2);
box-shadow: 0px 1px 2px rgba(0,0,0,0.2);
}
#tabs4 p, #tabs4 h3, #tabs4 h4, #tabs4 ol,  #tabs4 ul {padding: 15px 30px 0 15px; margin: 0;}

.notesItems li {list-style: none; border-bottom: 1px dotted  rgba(255,255,255,0.1);

}
.notesItems li i {margin-left: 5px;}
#tabs4 {font-family: 'noto';}
#tabs4 h4 {font-size: 1.2rem; margin-top: 15px;}
#tabs4 p, #tabs4 ul li {font-size: 1.1rem;}

.female  {background-color: rgba(0,0,0,0.2);}


@media screen and (max-width:550px) {

.etabs li a {font-size: 0.90em; line-height: 1.4 !important;
padding:30px 0;
}
.etabs li a .icon {display: none;}

}



.postItem {width: 94%;

padding: 15px 25px 25px;
margin: 25px auto;
 border: 1px solid rgba(255,255,255,0.2);
border-radius: 30px;
-webkit-box-shadow: 0 0 25px rgba(0,0,0,0.5);
box-shadow: 0 0 25px rgba(0,0,0,0.5);
background-color: rgba(0,0,0,0.3);
overflow: hidden;


}
.postItem h2 {color: #fff; font: 1rem 'hell',Arial,sans-serif; border: none !important; }
.postItem img {float: right; margin: 0 15px 15px;  border: 5px solid #fff;
-webkit-box-shadow: 0 0 10px rgba(0,0,0,0.2); border-radius: 20px;

box-shadow: 0 0 10px rgba(0,0,0,0.2); }

.postItem p {color: #fff; font: 1.1rem 'Noto',Arial,sans-serif; line-height: 2.1; text-align: justify;}

#tabs2 .postItem:nth-of-type(even) img  {float: left;}



.pagination {width:40%; margin: 15px auto; padding: 10px; display: block; }
.pagination #btns {padding: 0;   }
.pagination #btns li {list-style: none;    }
.pagination #btns li a {color: #fff;  padding:4px 15px; text-align: center; border: 1px solid #fff; margin-left: 15px;  display: inline-block;  float: right; margin-left: 10px; font-size: 1.2rem;
-webkit-box-shadow: 0 0 5px rgba(0,0,0,0.4);
box-shadow: 0 0 5px rgba(0,0,0,0.4);
 }
.pagination #btns li.current  a {background-color: rgba(0,0,0,0.3); text-decoration: none;}
.pagination #btns li a:hover {text-decoration: none;  background-color: rgba(0,0,0,0.3); text-decoration: none;}