@charset "utf-8";
/* CSS Document */



@keyframes linkjump {
  
  10%  { transform: translateX(2px);  }
  
}


@keyframes fadeScaleAnimation { 
    0% { 
        opacity: 0; 
        transform: scale(1.10)
    } 
    100% { 
        opacity: 1; 
        transform: scale(1)
     } 
     
    
} 


@keyframes fadeInAnimation { 
    0% { 
        opacity: 0; 
    } 
    100% { 
        opacity: 1; 
     } 
     
    
} 



/* Colors


pink: #ed174b;
yellow: #dac335
grey: #323e48;


*/



body {overflow: visible;height: 100%;background: #111011 url("/images/chalkboard.jpg") no-repeat 0 0/cover; background-attachment:fixed;}

.wrap{white-space: nowrap;}
p, ul{font-size: 22px; line-height: 42px; font-family: 'Roboto', sans-serif; font-weight: 300;}
h1{font-family: 'Roboto Condensed', sans-serif; font-weight: 700; font-size: 4.6em; line-height: 1.2em;}
h2{font-size: 5em; font-family: 'Roboto Slab', serif; text-transform: uppercase; letter-spacing: 3px; color: #fff; margin-bottom: 15px; text-align: center;}
h3{font-size: 3.7em; font-family: 'Roboto Condensed', sans-serif; font-weight: 700;}
a:hover{color: #dac335;}
.v-align{display: table; box-sizing: border-box !important; min-height: 100vh;}
    .v-align > .middle{vertical-align: middle; display: table-cell;}
.center{text-align: center;}
.menu-icons{margin-top: 50px;}



 nav {display: none; position: fixed;top: 0;left: 0;right: 0;bottom: 0;background: rgba(0,0,0,1); z-index: 999;}
    nav .modal {padding: 20vh 0px;max-width: 100vw;width: 100%;height: 100vh;color: #fff;overflow-y: auto;-webkit-overflow-scrolling: touch; }
    nav .modal .row{position: relative;}
    nav .modal h2{font-size: 5em;}
    nav .modal ul{list-style: none; margin: 0px; padding: 0px;}
    nav .modal ul > li{border-bottom: 2px dotted #333; }
    nav .modal ul > li > a{display: block; padding: 25px 15px; color: #fff; font-size: 1.2em; text-align: center; text-transform: uppercase; letter-spacing: 5px;}
    nav  #close_nav{color: #fff; display: block; text-align: center; margin: 35px auto;}



   nav .modal ul > li > a:hover{
  animation: linkjump 1s ease;
  animation-iteration-count: 1;
  color: #dac335 !important;
    }



    .social{margin-top: 75px; text-align: center;}
    .social > a{display: inline-block; margin: 0 10px 0 10px;}

    .social > a:hover{
  transform: scale(1.05);
  transition: all ease 200ms;
}


 footer{padding: 25px 0 100px 0; }
 #footer_logo{display: block; margin: 0 auto 20px auto; max-width: 400px; }
 footer  ul{list-style: none; margin: 0px; padding: 0px;}
    footer ul > li{border-bottom: 2px dotted #333; }
    footer  ul > li > a{display: block; padding: 25px 15px; color: #fff; font-size: 1.1em; text-align: center; text-transform: uppercase; letter-spacing: 5px;}
    footer .social{text-align: center;}


   footer  ul > li >a:hover{
  animation: linkjump 1s ease;
  animation-iteration-count: 1;
    }


header{min-height: 100vh; position: relative;}
    #logo{width: 50%; position: absolute; top: 30vh; left: 25%; opacity: 0;   animation: fadeScaleAnimation ease 1.5s; 
    animation-iteration-count: 1; 
    animation-fill-mode: forwards;}
    
    
    
        


    
    
    
    #navmenu{position: relative; top: 8px;}
    .donate{color: #fff; font-size: 24px; padding: 10px 60px; border: 4px solid #ed174b; margin-left: 25px; display: inline-block;}
    .donate:hover{color: #fff; transform: scale(1.05); transition: all ease 200ms;}
 
 
 
 
#cocktail_of_week{min-height: 100vh; background-color: #000; padding: 100px 0px; position: relative; color: #fff;}
    #cocktail_of_week h1 > a{color: #fff;}
    .cocktail-image{background: url("/images/lady-in-blue.jpg") no-repeat center center/160%;  width: 50%; min-height: 100vh; position: absolute; top: 0px; right: 0px;}
    .cocktail-of-week-title{text-transform: uppercase; letter-spacing: 2px; color: #ed174b; font-weight: bold; margin: 0px; font-family: 'Roboto Slab', serif;}

    .cocktail-jump{display: inline-block; padding: 10px 30px; background-color: #ed174b; color: #fff; font-family: 'Roboto Slab', serif; text-align: center; font-weight: bold; margin-top: 50px;}
    .cocktail-jump:hover{color: #fff;   transform: scale(1.05); transition: all ease 200ms;}
    .cocktail-jump:focus{color: #fff;}  


#filter_recommendations{color: #fff; min-height: 100vh; padding: 100px 0px;}
.recomendations{display: inline-block; padding: 10px 30px; background-color: #ed174b; color: #fff; font-family: 'Roboto Slab', serif; text-align: center; font-weight: bold; margin-top: 50px; font-size: 22px;}
    .recomendations:hover{color: #fff;  transform: scale(1.05); transition: all ease 200ms;}
    .recomendations:focus{color: #fff;}

.add-filter{display: inline !important; color: #dac335;}
.add-filter:focus{color: #dac335;}

.remove-filter{float: right; color: #fff;}

.back-to-top h3{color: #dac335;}

#filtered h2 > strong{color: #dac335;}


#mixer{min-height: 100vh; width: 100%; background-color: rgba(0,0,0,.98); position: fixed; top: 0px; left: 0px; z-index: 998; color: #fff; display: none;}
    #mixer h3{margin-bottom: 50px;}
    #mixer img{height: 70px;}
#mixer .close-mixer{color: #fff; position: absolute; top: 50px; right: 50px;}

   #mixer #cocktail_amount{padding: 5px 7px; width: 110px; display: inline-block; margin: 0px 6px;}
           #mixer input.mix-it{background-color: #ed174b;; color: #fff; text-align: center; padding: 10px 30px; display: inline-block; border: none; margin-left: 15px; font-weight: bold; cursor: pointer;}
           #mixer input.mix-it:hover{transform: scale(1.05); transition: all ease 200ms;}



#menu{color: #fff; margin-top: 0px; margin-bottom: 100px;}
#return{display: none; position: fixed; bottom: 0px; left: 0px; padding: 25px 40px; background-color: #000; color: #fff; text-align: center;}
    #return img{margin-left: 4px; position: relative; bottom: 1px;}
    
   .title-card{min-height: 100vh; padding: 100px 0px;}
       
            .cocktail{border-bottom: 10px groove #fff;  margin-bottom: 75px; padding-bottom: 75px;}

             .cocktail ul{font-family: 'Roboto Slab', serif; list-style: none; padding: 0px; margin: 0px 0 25px 0; font-weight: bold;} 
              .cocktail ul > li >span{ color: #dac335; padding-right: 10px;}    
              .cocktail img{width: 80%; float: right;}
          .cocktail p > strong{color: #dac335;}
          .cocktail .size{display: none;}
          .cocktail .size strong{color: #fff;}
           
        .double-it{display: inline-block; padding: 10px 30px; background-color: #ed174b; color: #fff; font-family: 'Roboto Slab', serif; text-align: center; font-weight: bold; margin-top: 25px;}
        .double-it:hover{color: #fff;   transform: scale(1.05); transition: all ease 200ms;}
    
    
    
    .display{color: #ed174b;}


   
   
@media screen and (max-width: 63.9375em){
h2{margin: 0 50px 15px 50px; font-size: 3.2em;}
#logo{width: 80%; left: 10%;}
.cocktail-image{background-position: center center; background-size: 100%; width: 100%; min-height: 500px; position: relative; top: 0px; right: 0px;}



#cocktail_of_week .v-align{display: table; box-sizing: border-box !important; min-height: auto;}
   #cocktail_of_week .v-align > .middle{vertical-align: top; padding-top: 25px;}
    
.add-filter, .remove-filter{display: none !important;}
.filter-base, .filter-mixer{margin-bottom: 50px;}

.wrap{white-space: inherit}

#return{width: 100%; padding: 20px 20px;}
#return img{display: none;}

}
   
   
   
   
   
     
@media screen and (max-width: 39.9375em) {


p, ul{font-size: 18px; line-height: 26px;}

h2{font-size: 3em; letter-spacing: 1px; margin: 0 0 15px 0}
.back-to-top h3{font-size: 2em}
h3{font-size: 3em;}


#logo{position: absolute; width: 90%; left: 5%; top: 30%;  margin: 0 auto;}

#mixer h3{font-size: 3em;}

.cocktail-image{background-size: 175%; margin-bottom: 75px;}

.menu-icons{margin-top: 25px;}


nav .modal h2{font-size: 2em;}
nav .modal ul > li > a{padding: 12px 15px;font-size: 1em; letter-spacing: 5px;}

.donate{margin: 75px auto 0px auto; width: 80%; max-width: 80%; display: block; text-align: center; animation: fadeInAnimation ease 3s; 
    animation-iteration-count: 1; 
    animation-fill-mode: forwards;}

.add-filter, .remove-filter{display: none !important;}



.cocktail{text-align: center;}
.cocktail img{max-width: 125px; margin: 0 auto; float: none;}
 .cocktail ul > li >span{display: block;  font-size: .7em; line-height: .7em; text-transform: uppercase;}   

 .cocktail ul > li{margin-top: 20px;}

  


}