@media screen and (min-width: 488px) and (max-width: 575px){

    .col-xs-1 { width: 8.33%;}
    .col-xs-2 { width: 16.66%;}
    .col-xs-3 { width: 25%;}
    .col-xs-4 { width: 33.33%;}
    .col-xs-5 { width: 41.66%;}
    .col-xs-6 { width: 50%;}
    .col-xs-7 { width: 58.33%;}
    .col-xs-8 { width: 66.66%;}
    .col-xs-9 { width: 75%;}
    .col-10{ width: 83.33%; }
    .col-11{ width: 91.66%; }
    .col-12{ width: 100%; }
}

.container{
    /*border: 1px solid red;*/
}

.img-responsive{
    height: 100%;
    width: 100%;
}

.main-logo {
    height: 130px;

 }

.center-object {
    margin-left: auto;
    margin-right: auto;
    display: block;
}
.main-logo img {
    height: 120px;
    margin-left: auto;
    margin-right: auto;
    display: block;
    margin-top: 10px;
}

.border-bottom-set {
    border-bottom: 1px solid brown;
}

/*Transfarent Background*/

.logo-background {
    background: url("../images/1-bean-banner.jpg");
    background-size: cover;
}
.logo-transback {
    background-color: white;
    opacity: 0.85;
    filter: alpha(opacity=60); /* For IE8 and earlier */
}

/*Transfarent Background*/


.nav-background {
    background-color: #ffd740;
}
.section-background {
    background-image: url("../images/background-repeat-1.jpg");
    background-size: 10% 100%;
    background-attachment: fixed;
}
.food-banner {
    background-image: url("../images/food/banner-food.jpg");
    background-size: 100% 100%;
    background-attachment: fixed;
}
.about-banner {
    background-image: url("../images/photograph/about.jpg");
    background-size: 100% 100%;
    background-attachment: fixed;
}

.footer-background {
    background: url("../images/photograph/footer.jpg");
    background-size: 100% 100%;
    background-attachment: fixed;
}

.drinks-banner {
    background-image: url("../images/coffee/drinks-banner.jpg");
    background-size: 100% 100%;
    background-attachment: fixed;
}
.banner-height {
    height: 200px;
    margin-top: 80px;
}


/*map*/
.mapouter {
    text-align:right;
    height:500px;
    /*width:600px;*/
}
.gmap_canvas {
    overflow:hidden;
    background:none!important;
    height:500px;
    /*width:600px;*/
}

.mapouter iframe {
    width: 100%;
    height: 500px;
}

/*map*/


.client-center {
    padding: 50px;
}
.client-center img {
    border-radius: 50%;
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 10%;
}

/*my Footer*/
#myFooter .logo img {
    margin-top: 10px;
    width: 200px;
}

#myFooter {
    background-color: #3c3d41;
    color: white;
    padding-top: 30px;
}

#myFooter .footer-copyright {
    background-color: #333333;
    padding-top: 3px;
    padding-bottom: 3px;
    text-align: center;

}

#myFooter .row {
    margin-bottom: 60px;
}

#myFooter .navbar-brand {
    margin-top: 45px;
    height: 65px;
}

#myFooter .footer-copyright p {
    margin: 10px;
    color: #ccc;
}

#myFooter ul {
    list-style-type: none;
    padding-left: 0;
    line-height: 1.7;
}

#myFooter h5 {
    font-size: 18px;
    color: white;
    font-weight: bold;
    margin-top: 30px;
}

#myFooter h2 a{
    font-size: 50px;
    text-align: center;
    color: #fff;
}

#myFooter a {
    color: #d2d1d1;
    text-decoration: none;
}

#myFooter a:hover,
#myFooter a:focus {
    text-decoration: none;
    color: white;
}

#myFooter .social-networks {
    text-align: center;
    padding-top: 30px;
    padding-bottom: 16px;
}

#myFooter .social-networks a {
    font-size: 32px;
    color: #f9f9f9;
    padding: 10px;
    transition: 0.2s;
}

#myFooter .social-networks a:hover {
    text-decoration: none;
}

#myFooter .facebook:hover {
    color: #0077e2;
}

#myFooter .google:hover {
    color: #ef1a1a;
}

#myFooter .twitter:hover {
    color: #00aced;
}

#myFooter .btn {
    color: white;
    background-color: #d84b6b;
    border-radius: 20px;
    border: none;
    width: 150px;
    display: block;
    margin: 0 auto;
    margin-top: 10px;
    line-height: 25px;
}

#myFooter{
    flex: 0 0 auto;
    -webkit-flex: 0 0 auto;
}
/*my Footer*/







/*Modal/////////////////////////////////////////*/


#login-modal .modal-dialog {
    width: 350px;
}

#login-modal input[type=text], input[type=password] {
    margin-top: 10px;
}

#div-login-msg,
#div-lost-msg,
#div-register-msg {
    border: 1px solid #dadfe1;
    height: 30px;
    line-height: 28px;
    transition: all ease-in-out 500ms;
}

#div-login-msg.success,
#div-lost-msg.success,
#div-register-msg.success {
    border: 1px solid #68c3a3;
    background-color: #c8f7c5;
}

#div-login-msg.error,
#div-lost-msg.error,
#div-register-msg.error {
    border: 1px solid #eb575b;
    background-color: #ffcad1;
}

#icon-login-msg,
#icon-lost-msg,
#icon-register-msg {
    width: 30px;
    float: left;
    line-height: 28px;
    text-align: center;
    background-color: #dadfe1;
    margin-right: 5px;
    transition: all ease-in-out 500ms;
}

#icon-login-msg.success,
#icon-lost-msg.success,
#icon-register-msg.success {
    background-color: #68c3a3 !important;
}

#icon-login-msg.error,
#icon-lost-msg.error,
#icon-register-msg.error {
    background-color: #eb575b !important;
}

#img_logo {
    max-height: 100%;
    max-width: 100%;
}

/* #########################################
   #    override the bootstrap configs     #
   ######################################### */

.modal-backdrop.in {
    filter: alpha(opacity=50);
    opacity: .8;
}

.modal-content {
    background-color: #ececec;
    border: 1px solid #bdc3c7;
    border-radius: 0px;
    outline: 0;
}

.modal-header {
    min-height: 16.43px;
    padding: 15px 15px 15px 15px;
    border-bottom: 0px;
}

.modal-body {
    position: relative;
    padding: 5px 15px 5px 15px;
}

.modal-footer {
    padding: 15px 15px 15px 15px;
    text-align: left;
    border-top: 0px;
}

.checkbox {
    margin-bottom: 0px;
}

.btn {
    border-radius: 0px;
}

.btn:focus,
.btn:active:focus,
.btn.active:focus,
.btn.focus,
.btn:active.focus,
.btn.active.focus {
    outline: none;
}

.btn-lg, .btn-group-lg>.btn {
    border-radius: 0px;
}

.btn-link {
    padding: 5px 10px 0px 0px;
    color: #95a5a6;
}

.btn-link:hover, .btn-link:focus {
    color: #2c3e50;
    text-decoration: none;
}

.glyphicon {
    top: 0px;
}

.form-control {
    border-radius: 0px;
}

/*Modal/////////////////////////////////////////*/

/*Welcome Modal*/
#modal-btn {
    position: fixed;
    bottom: 20px;
    left: 0px;
    width: 8%;
}
#modal-btn img {
    height: 100%;
    width: 100%;

}

#myModal2 img {
    height: 100%;
    width: 100%;
}

#modal-btn-img {
    position: absolute;
}
/*Welcome Modal*/



/*fixed on scroll navbar on bootstrap*/

.affix {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1030;
    transition: 1s;
    padding: 8px;
    box-shadow: 1px 2px 20px grey;
    opacity: 0.9;
}

/* fixed to top styles */
.affix.navbar {
    background-color: #333;
}
.affix.navbar .nav-item>a,
.affix.navbar .navbar-brand {
    color: #fff;
}

/*fixed on scroll navbar on bootstrap*/

/*back to top button*/

#scroll {
    position:fixed;
    right:10px;
    bottom:10px;
    cursor:pointer;
    width:50px;
    height:50px;
    background-color:#3498db;
    text-indent:-9999px;
    display:none;
    -webkit-border-radius:60px;
    -moz-border-radius:60px;
    border-radius:60px
}
#scroll span {
    position:absolute;
    top:50%;
    left:50%;
    margin-left:-8px;
    margin-top:-12px;
    height:0;
    width:0;
    border:8px solid transparent;
    border-bottom-color:#ffffff;
}
#scroll:hover {
    background-color:#e74c3c;
    opacity:1;filter:"alpha(opacity=100)";
    -ms-filter:"alpha(opacity=100)";
}
/*back to top button*/