html{
    background-color: #D6EECD;
    /*E54D38   اللون الثاني*/ 
}
*{
    font-family: 'Almarai', sans-serif; 
}
body{
    background-color: #D6EECD;
}
.bg-light {
    background-color: #090808  !important;
}

#navbar{
    width: 100%;
}
.navbar-light .navbar-nav .nav-link {
    color: #d6eecd;
}.navbar-light .navbar-nav .nav-link:hover {
    color: #f8b936;
}
.navbar-toggler-icon {
    background: #f8b936;
}
#navbarSupportedContent li{
    color: #111;
}
.navbar-brand{
    font-size: 24px;
}
#btn-scren-buy{
    color: green;
    font-size: 22px;
    font-weight: bold;
}
#btn-scren-buy:hover{
    color: red;
}
#footer_fixed{
      position: fixed;
      bottom: 0;
      width: 100%; 
}
#topcontrol {
    z-index: 2;
    background: #090808 url(../img/separate.png) no-repeat center -410px;
    background-color: rgb(255, 133, 0);
    width: 30px;
    height: 30px;
    text-indent: -99999px;
    border-radius: 50px;
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
    position: fixed;
    bottom: -100px;
    right: 10px;
    cursor: pointer;
    -webkit-transition: all .7s ease-in-out;
    -moz-transition: all .7s ease-in-out;
    -o-transition: all .7s ease-in-out;
    -ms-transition: all .7s ease-in-out;
    transition: all .7s ease-in-out;
    overflow: auto;
    background-color: #090808 !important;
}

/* login */
#site_login{
    width: 25%;
    margin: 0 auto;
}
#login{
    padding: 10px;
    border: 5px solid;
    border-radius: 20px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
}
#login>h3{
    text-align: center;
    background: #000;
    padding: 5px;
    color: #fff;
    border-radius: 20px;
}
#img-login-h h1{
    font-size: 24px;
}
#img-login-h img{
    width: 80px;
}
/* login */

/*scren*/
#scren{
    width: 100%;
    height: auto;
    padding-top: 68px;
    text-align: center;
}
.scr{
    margin: 10px auto;
    max-width: 160px;
    border-radius: 20px;
    box-shadow: 2px 2px 6px #000;
    position: relative;
    height: 207px;
    overflow: hidden;
    background: #eff8f1d1;
    padding: 0px;
    margin-left: 10px;
}.scr:hover{
    box-shadow: 3px 2px 3px red;
    border:1px solid #000;
}
.btn.btn-increment{
    background: #28a745 !important;
    color: #fff !important;
    opacity: 0.6;
}.btn.btn-increment:hover{
    opacity: 1;
}.btn.btn-increment:active{
    background: gold !important;
    color: #000 !important;
}
.btn.btn-decrement{
    background: #dc3545 !important;
    color: #fff !important;
    opacity: 0.6;
}.btn.btn-decrement:hover{
    opacity: 1;
}.btn.btn-decrement:active{
    background: gold !important;
    color: #000 !important;
}
.input-group > .form-control:not(:first-child)
{
    text-align: center;
    font-weight: bold !important;
    font-size: 24px !important;
}
/*scren*/
@media screen and (min-width: 300px)and (max-width: 700px) {

    .navbar-brand{
    font-size: 19px;
    }
    /* login */
    #login {
    width: 90%;
    }
    /* login */
        
}