html { scroll-behavior: smooth; }
              
              body {
                  margin: 0;
                  padding: 0;
                  font-family:arial,helvetica,sans-serif,verdana,'Open Sans';
                  font-size: 18px;
                  overflow-x: hidden;
              }


             .main-loader {
              position: fixed;
              left: 0px;
              top: 0;
              width: 100%;
              height: 100%;
              z-index: 9999;
              background: url(../logo/spinner.gif) center no-repeat #000000; /* LOADING ANIMATION */  
              background-size:250px;
            }  
            
             table {
              border-collapse: collapse;
              width: 100%;
            }
      
      
              td, tr {
              text-align: center;
              padding-top: 10px;
              padding-bottom: 10px;
            }
            
            /* The popup form - hidden by default */
             .form-popup {
            display: none;
            position: fixed;
            top: 35px;
            bottom: 10;
            right: 20px;
            left: 20px;
            border-radius: 15px;
            z-index: 9;
            background-color: white;
            opacity: 0.98;
          }
          
             .close {
            position: fixed;
            right: 6px;
            top: 24px;
            width: 45px;
            height: 45px;
            color:white;
            background-color: red;
            border-radius: 20px;
          }
        
        
          .center {
          display: block;
          margin-left: auto;
          margin-right: auto;
          }
          
          i {
          margin-top: 15px;
          }
                        
      
          #shadowBox {
            background-color: rgba(0, 0, 0, 0);
          }
          
          .rainbow {
            text-align: center;
            animation: colorRotate 6s linear 0s infinite;
          }
          
           /*- notifications */
          
          a{
            text-decoration: none;
          }
          
          .box::-webkit-scrollbar-track
          {
          	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
          	background-color: #F5F5F5;
            border-radius: 5px
          }
          
          .box::-webkit-scrollbar
          {
          	width: 10px;
          	background-color: #F5F5F5;
            border-radius: 5px
          }
          
          .box::-webkit-scrollbar-thumb
          {
            border-radius: 5px
          }
          
          
          h1{
           float: left;
            padding: 10px 30px
          }
          
          
          
          .icons{
            display: inline;
            float: center;
            right: 5px;
          }
          
          .notification{
            /* padding-top: 10px;*/
            position: relative;
            display: inline-block;
          }
          
          .number{
            height: 17px;
            width:  17px;
            background-color: #d63031;
            border-radius: 20px;
            color: white;
            text-align: center;
            position: absolute;
            top: -22px;
            left: 15px;
            padding: 3px;
            border-style: solid;
            border-width: 2px;
          }
          
          .number:empty {
             display: none;
          }
          
          .notBtn{
            transition: 0.5s;
            cursor: pointer
          }
           
          .box{
            width: 370px;
            height: 0px;
            border-radius: 10px;
            transition: 0.5s;
            position: absolute;
            overflow-y: scroll;
            padding: 0px;
            left: -370px;
            margin-top: 2px;
            margin-left: 30px;
            -webkit-box-shadow: 10px 10px 23px 0px rgba(0,0,0,0.2);
            -moz-box-shadow: 10px 10px 23px 0px rgba(0,0,0,0.1);
            box-shadow: 10px 10px 23px 0px rgba(0,0,0,0.1);
            cursor: context-menu;
          }
          
          .notBtn:hover > .box{
            height: 30vh
          }
          
          
          .display{
            position: relative;
          }
          
          .cont{
            position: absolute;
            top: 0;
            width: 100%;
            height: 100%;
          }
          
          .cont:empty{
            display: none;
          }
          
          .sec{
            padding: 15px 5px;
            transition: 0.5s;
          }
          
          .profCont{
            padding-left: 10px;
          }
          
          .profile{
            -webkit-clip-path: circle(50% at 50% 50%);
            clip-path: circle(50% at 50% 50%);
            width: 75px;
            float: left;
          }
          
          .txt{
            vertical-align: top;
            font-size: 16px;
          }
          
          .new{
            border-style: none none solid none;
          }
          

          /***  rotation screen   ***/       
          /* (A) WRONG ORIENTATION - SHOW MESSAGE HIDE CONTENT */
          @media only screen and (orientation:landscape) {
            #turn { display:block; }
            #container { display:none; }
          }
           
          /* (B) CORRECT ORIENTATION - SHOW CONTENT HIDE MESSAGE */
          @media only screen and (orientation:portrait) {
            #turn { display:none; }
            #container { display:block; }
          }       


ul {
    padding: 0;
    margin: 0;
}


nav > ul > li { list-style: none; }

a { 
	  color: #3CF;
    text-decoration: none;
    transition: all 0.3s ease; 
}

p { 
    line-height: 1.8; 
    margin-top: 0;
}

h2 { margin-top: 0; }


.tm-container { padding: 30px; }

.tm-row {
    display: flex;
    justify-content: space-between;
}

.tm-left,
.tm-right {
    width: 50%;
}

.tm-left-inner { position: fixed; }

.tm-site-header {
    background-color: white;
    color: #099;
    width: 100%;
    height: 160px; 
    display: flex;
    align-items: center;
    justify-content: center;   
}

.tm-site-logo { margin-right: 30px; }

.tm-site-name {
    font-size: 2.2rem;
    font-style: italic;    
}

.tm-left-inner {
    max-width: 500px;
    width: 100%;
}

.tm-site-nav-ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.tm-page-nav-item { margin-top: 10px;}

.tm-page-link {
    min-width: 240px;
    height: 55px;
    display: flex;
    text-decoration: none;
    align-items: center;      
    font-size: 1.2rem;
    border-radius: 35px;
    box-shadow: 4px 4px 3px #5e5e5e;
}

.tm-page-link-notif {
    min-width: 240px;
    height: 70px;
    display: flex;
    text-decoration: none;
    /*align-items: center;*/      
    font-size: 1.2rem;
    border-radius: 15px;
}

.tm-page-link-icon {
    margin-top: 0px;
    margin-right: 25px;
    margin-left: 25px;
    font-size: 1.7rem;
}

.tm-black-bg {
    background-color: rgba(0,0,0,0.05);
    color: white;
    border-radius: 5px;
}

.tm-drinks-nav > ul > li { display: inline-block; }

.tm-drinks-nav > ul > li > a {
    font-size: 1.2rem;
    padding-top: 15px;
    padding-bottom: 5px;
    border-bottom: 3px solid transparent;
}

.tm-drinks-nav { height: 80px; }
.tm-main { max-width: 660px; }

.tm-drinks-nav > ul {
    display: flex;
    align-items: center;
    justify-content: space-around;
    height: 100%;
}



.tm-list-item {
    display: flex;
    //align-items: center;
    justify-content: space-between;
    margin-top: 20px;
}

.tm-list-item-2 { align-items: flex-start; }

.tm-list-item-img {
    margin-right: 20px;
    width: 160px;
    height: 160px;
    background-color: #099;
}

.tm-list-item-img-big {
    margin-right: 25px;
    width: 200px;
    height: 200px;
}

.tm-list-item-text {
    /*padding: 0px 5px 0px;*/
    flex: 1;
}

.tm-list-item-text-2 { flex: 1; }

.tm-list-item-name {
    display: flex;
    justify-content: space-between;
    margin-top: 0;
}

.tm-list-item-price { color: #96FEFF; }
.tm-site-footer { margin-top: 15px; }

.tm-footer-text {
    padding: 10px 65px 10px 20px;
    display: inline-block;
}

.tm-footer-link { color: white; }
.tm-tab-content { animation: fadeEffect 1s; }
.tm-page-content { animation: fadeEffect 1s; }
.tm-page-content-notif { animation: fadeEffect 1s; }

.tm-text-primary { color: #3CC;}
.tm-mb-20 { margin-bottom: 20px; }
.tm-mb-30 { margin-bottom: 30px; }
.tm-img-right { 
    margin-left: 30px; 
    margin-right: 0;
}

/* Go from zero to full opacity */
@keyframes fadeEffect {
    from { opacity: 0.3; }
    to { opacity: 1; }
}

/* About */
.tm-about-box-1 { padding: 40px 30px 50px 0; }
.tm-about-box-2 { padding: 50px 40px 30px; }
.tm-about-header { margin-left: 220px; }

/* Special */
.tm-special-items {
    display: flex;
    flex-wrap: wrap;
    margin: -30px -10px 0;
}

.tm-special-item {
    max-width: 320px;
    margin: 30px 10px;
}

.tm-special-item-title { font-size: 1.4rem; }
.tm-special-item-description { padding: 25px 30px; }

/* Contact */
.tm-contact-text-container {
    padding: 45px 50px;
    margin-bottom: 20px;    
}

.tm-contact-form-container {
    max-width: 460px;
    padding: 40px 50px;
    box-sizing: border-box;
}

.tm-form-group { margin-bottom: 25px; }

.tm-form-control {
    display: block;
    box-sizing: border-box;
    width: 100%;
    padding: 15px;
	  font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    font-size: 1rem;
    line-height: 1.5;
    color: #fff;
    background-color: transparent;
    background-clip: padding-box;
    border: 0;
    border-bottom: 1px solid white;
}

.tm-form-control::-webkit-input-placeholder { color: white; } /* Edge */  
.tm-form-control:-ms-input-placeholder { color: white; } /* Internet Explorer 10-11 */  
.tm-form-control::placeholder { color: white; }

.tm-btn-primary {
    border: 0;
    padding: 12px 30px;
    font-size: 1.2rem;
    cursor: pointer;
    transition: all 0.3s ease;
    border-radius: 15px; 
}

.tm-btn-primary:hover {
    border-radius: 15px;
}

.tm-align-right {
    display: block;
    margin-left: auto;
    margin-right: 0;
}

.tm-mb-30 { margin-bottom: 30px; }

@media (max-width: 1130px) and (min-width: 992px) {
    .tm-left-inner { max-width: 380px; }
    .tm-site-name { font-size: 2.6rem; }
    .tm-site-logo { margin-right: 20px; }
    .tm-page-link { width: 100%; }
    .tm-page-link-notif { width: 100%; }
    .tm-page-link-icon { margin-right: 15px; }
    .tm-left { width: 45%; }
    .tm-right { width: 55%; }
}

@media (max-width: 991px) {
    .tm-left-inner { position: static; }
    .tm-left, .tm-right { width: 100%; }
    .tm-left { margin-bottom: 50px; }
    .tm-row { display: block; }
}

@media (max-width: 574px) {
    .tm-site-nav-ul { display: block; }
}

@media (max-width: 550px) and (min-width: 501px) {
    .tm-list-item-img-big {
        width: 160px;
        height: 160px;
    }

    .tm-about-header { margin-left: 180px; }
}

@media (max-width: 500px) {
    .tm-about-header { margin-left: 0; }
    .tm-list-item-2 { flex-direction: column; }
    .tm-about-box-1 { padding-left: 30px; }

    .tm-list-item-img-big {
        margin-right: 0;
        margin-bottom: 25px;
    }

    .tm-img-right { margin-left: 0; }
}

@media (max-width: 479px) {
    .tm-site-name { font-size: 2.6rem; }
    .tm-site-logo { margin-right: 20px; }

    .tm-list-item {
        flex-direction: column;
        margin-top: 40px;     
    }

    .tm-list-item-img {
        margin-right: 0;
        margin-bottom: 15px;        
    }

    .tm-drinks-nav { height: auto; }

    .tm-drinks-nav > ul {
        flex-direction: column;
        padding: 15px;
    }

    .tm-drinks-nav > ul > li { margin-bottom: 10px; }
    .tm-drinks-nav > ul > li > a { display: block; }
}




      /* rating stars */
 

      @import url(https://fonts.googleapis.com/css?family=Roboto:500,100,300,700,400);
      *{
        margin: 0;
        padding: 0;
        font-family: roboto;
      }
     
      
      hr{
        margin: 20px;
        border: none;
        border-bottom: thin solid rgba(255,255,255,.1);
      }
      
      div.title{
        font-size: 2em;
      }
      
      
      div.stars{
        width: 270px;
        display: inline-block;
      }
      
      input.star,input.star1,input.star2,input.star3{
        display: none;
      }
      
      
       input.star:checked ~ label.star:before, input.star1:checked ~ label.star1:before, input.star2:checked ~ label.star2:before, input.star3:checked ~ label.star3:before{
        content:'\f586';
        color: #FD4;
        transition: all .25s;
      }
      
      
      input.star-5:checked ~ label.star:before, input.star1-5:checked ~ label.star1:before, input.star2-5:checked ~ label.star2:before, input.star3-5:checked ~ label.star3:before {
        color:#FE7;
        text-shadow: 0 0 20px #952;
      }
      
      input.star-1:checked ~ label.star:before, input.star1-1:checked ~ label.star1:before, input.star2-1:checked ~ label.star2:before, input.star3-1:checked ~ label.star3:before {
        color: #F62;
      }
      
      label.star,label.star1, label.star2, label.star3 {
            float: right;
            padding: 10px;
            font-size: 30px;
            transition: all .2s;
          }      
      
      label.star:hover, label.star1:hover, label.star2:hover, label.star3:hover{
        transform: rotate(-15deg) scale(1.3);
      }
      
      label.star:before, label.star1:before, label.star2:before, label.star3:before{
        content:'\f588';
        font-family: bootstrap-icons;
      }
      
      
      
      /* The Modal Langage (background) */
          .modal {
            display: none; /* Hidden by default */
            position: fixed; /* Stay in place */
            z-index: 1; /* Sit on top */
            padding-top: 200px; /* Location of the box */
            left: 0;
            top: 0;
            width: 100%; /* Full width */
            height: 100%; /* Full height */
            overflow: auto; /* Enable scroll if needed */
            background-color: rgb(0,0,0); /* Fallback color */
            background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
          }
          
          /* Langage Modal Content */
          .modal-content {
            border-radius: 10px;
            background-color: #fefefe;
            margin: auto;
            padding: 20px;
            border: 1px solid #888;
            width: 80%;
            color: #000000;
            text-align: center;
          }
          
          /* The Close Button modal langage*/
          .close_modal {
            color: #ff000a;
            float: right;
            font-size: 50px;
            font-weight: bold;
          }
          
          .close_modal:hover,
          .close_modal:focus {
            color: #000;
            text-decoration: none;
            cursor: pointer;
          }