@font-face {
font-family:bein;
src:url(../font-awesome/fonts/bein-ar-normal.ttf)
}
body {
 font-family:bein;
  font-size:16px;}
.my-4 { text-align: right;}
body {
  padding-top: 54px;
}
.fixed-top { position:absolute; }
@media (min-width: 992px) {
  body {
    padding-top: 56px;
  }
  
}

.carousel-item {
  height: 65vh;
  min-height: 300px;
  background: no-repeat center center scroll;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.portfolio-item {
  margin-bottom: 30px;
}

.navbar { padding:20px 0 20px 0;}
.nav-item a:hover, a:focus, a:active {
    color: #00608d;
    text-decoration: none;
}
.nav-item a {
    position: relative;
    transition: color 0.1s, background-color 0.1s;
      letter-spacing: 0.7px;
}

.nav-item a::before {
    content: '';
    display: block;
    position: absolute;
    bottom: 1px;
    left: 0;
    height: 3px;
    width: 100%;
    background-color: #ffde8f;
    transform-origin: right top;
    transform: scale(0, 1);
    transition: color 0.1s,transform 0.3s ease-out;
}
.nav-item a:active::before {
    background-color: #00608d;
}
.nav-item a:hover::before, a:focus::before {
    transform-origin: left top;
    transform: scale(1, 1);
}

.my-4 {margin-top:1.5rem !important;}


.colorchange {
            position: fixed;
            top:80%;
            left: 5px;
            z-index: 100000;
            width: auto;
            margin: 5px;
            
        }
        #chng {
            background: #b7b7b7;
            width: 20px; height: 20px;
            border: 0; border-radius: 3px;
            margin: 5px;
        }
        #white {
            background: #fff;
            width: 20px; height: 20px;
            border: 0; border-radius: 3px;
            margin: 5px;
        }
footer a:hover { color:#ffe286;}
footer .social a:hover { color:#fff}    
  
.alert-success { background:#fff3d7}
.bg-college { background:#e9ecef}
.bg-bcollege { background:#E3E3E3}
.sidenav {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    right: 0;
    background-color: #111;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 150px;
    
}

.sidenav a {
    padding: 8px 35px;
    text-decoration: none;
    font-size: 25px;
    color: #818181;
    display: block;
    transition: 0.3s;
    text-align:right;
}

.sidenav a:hover {
    color: #f1f1f1;
}

.sidenav .closebtn {
    position: absolute;
    top: 100px;
    right: 5px;
    font-size: 20px;
    color:red;
    
}


#main {
    transition: margin-left .5s;
    
}

@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}
.dropdown-menu { background-color:#f8f8f8;}
.bsh {box-shadow: 0px 1px 2px #fff}
.submenu {box-shadow: 0px 0px 2px; padding-top:50px}
.submenu .dropdown-menu
{
    background-color:#bac0c6;
     
}
.submenu a { color:#000;}

.namecol { display:block;} 
.pb-5,.py-5 { padding-bottom:5px !important;padding-top:15px !important; margin-top: 40px; vertical-align:middle;}

.navbar-collapse { direction: rtl;
text-align: right;}
.navbar-toggler { margin-right:10px;}
.submenu .navbar { padding:0;}
.bgcol { background:#f00;}
.ef {padding:5px 0px;box-shadow: 0px 1px 4px #717171}
.header .row .col-lg-4 { text-align:center; }

@media screen and (max-width: 700px) 
{
#main {
    transition: margin-left .5s;
    padding: 0px 15px;
}
.pb-5,.py-5 { padding-bottom:1rem !important;padding-top:1rem !important;  vertical-align:middle;}

.namecol {font-size: 1.2em;padding-right: 20px;}
.header .row { max-height: 20px;font-size: 12px;text-align: center; font-weight:bold;}
.header .col-sm-3  {padding-right:0; padding-left:0}
}
@media screen and (max-width: 370px) 
{
.h370 {  overflow:hidden;}
.f370 { font-size:1em; }

    }
@media screen and (max-width: 330px) 
{
.pb-5,.py-5 {  margin-top: 40px;}
.f370 { font-size:0.9em}

    }
@media screen and (max-width: 300px) 
{
.h290 { display:none }
.f290 a { font-size:0.6em}
body { padding:0; margin:0}

    }
    
#search { display:none; text-align:right;}
#search input { border: #e3e3e3;
background: #fff;
padding: 2px 5px;}
.btn-group form { background:#fff}
.btn-light:focus {box-shadow:none;}
#navbar1 .nav-item a::before {
    background-color: #00608d;
}
body>.container { margin-top:10px;}
.bb>p { border-bottom:1px solid #000}
.alert-dismissible {padding-right: 1rem;}

/*.card,.list-group {box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 4px -1px;}*/
.btn-danger {
    color: #fff;
    background-color: #00608d;
    border-color: #e9ecef;
}