/* General Blueprint Style */
@import url('https://fonts.googleapis.com/css2?family=Climate+Crisis&family=Fuzzy+Bubbles:wght@400;700&family=Parkinsans:wght@300..800&family=Zilla+Slab:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap');

@font-face {
  font-family: 'icomoon';
  src:  url('fonts/icomoon.eot?6y9lb8');
  src:  url('fonts/icomoon.eot?6y9lb8#iefix') format('embedded-opentype'),
    url('fonts/icomoon.ttf?6y9lb8') format('truetype'),
    url('fonts/icomoon.woff?6y9lb8') format('woff'),
    url('fonts/icomoon.svg?6y9lb8#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


.icon-fire:before {
  content: "\e910";
  color: #ff5c0b;
  font-size: 13pt;
}
.icon-asterisk:before {
  content: "\f069";
}
.icon-star:before {
  content: "\f005";
}
.icon-clock-o:before {
  content: "\f017";
  vertical-align: middle;
  color:#ED0B07;
}
.icon-facebook-square:before {
  content: "\f082";
  vertical-align: middle;
  font-size: 20pt;
  margin: 0 5px 0 0;
  line-height: 32pt;
}
.icon-google-plus:before {
  content: "\f0d5";
  vertical-align: middle;
  font-size: 20pt;
  margin: 0;
  line-height: 32pt;
}
.icon-envelope:before {
  content: "\f0e0";
  color: #2EA032;
  margin: 10px 0 0 8px;
}
.icon-instagram:before {
  content: "\f16d";
  vertical-align: middle;
  font-size: 20pt;
  line-height: 32pt;
  margin: 0 4px 0 0;
}
.icon-whatsapp:before {
  content: "\f232";
}
.icon-map-pin:before {
  content: "\f276";
  vertical-align: middle;
  color:#ED0B07;
  font-size: 20pt;
  margin: 0;
}
.icon-chevron-left:before {
  content: "\e900";
}
.icon-chevron-right:before {
  content: "\e901";
}
.icon-controller-paus:before {
  content: "\e902";
}
.icon-controller-play:before {
  content: "\e903";
}
.icon-download:before {
  content: "\e904";
}
.icon-resize-100:before {
  content: "\e905";
}
.icon-resize-full-screen:before {
  content: "\e906";
}
.icon-cross:before {
  content: "\e907";
}
.icon-grid:before {
  content: "\e908";
}
.icon-leaf:before {
  content: "\e90c";
  color: #709130;
  font-size: 12pt;
  vertical-align: top;
}
.icon-menu:before {
  content: "\e90f";
}
.icon-minus:before {
  content: "\e909";
}
.icon-mobile:before {
  content: "\e90e";
  vertical-align: middle;
  color:#2EA032;
  font-size: 12pt;
}
.icon-paper-plane:before {
  content: "\e90d";
}
.icon-plus:before {
  content: "\e90a";
}
.icon-popup:before {
  content: "\e90b";
}

.icon-instagram, .icon-facebook-square, .icon-google-plus { color: #fff;}
.icon-instagram:hover, .icon-facebook-square:hover, .icon-google-plus:hover { color: #4ACC53; transition: 0.5s ease;}

a:link { color: #fff; text-decoration:none; }
a:visited { color: #fff }

.yel { color: #f99c36;}
.yel2 { color: #FFB824;}
.whi { color: #fff;}
.red { color: #ED0B07;}
.gre2 { color: #4ACC53;}
.gre { color: #2EA032;}
.bei { color: #fff2cc;}
.bla { color: #000;}


h1 { font-family: 'Fuzzy Bubbles', sans-serif; font-size: 33pt; line-height: 25pt;  margin: 0; font-weight: 600;}
h2 { font-family: 'Climate Crisis', serif; font-size: 41pt; line-height:40pt; margin: 0; font-weight: 100;}
h3 { font-family: 'Zilla Slab', serif; font-size: 35pt; line-height: 40pt;  margin: 0; font-weight: 200;}
h3 b { font-weight: 600;}
p { font-family: 'Parkinsans', sans-serif; font-size: 13pt; line-height: 18pt; font-weight: 300; margin: 0;}
p.bd { font-weight: 500;}

.club footer { font-family: 'Zilla Slab', serif; font-size: 15pt; line-height: 22pt; color: #fff;}

/**SLIDE*/
#slide .txt { display: block; width: 70%; text-align: center; position: absolute; z-index: 3000; color: #fff;  margin: 22% 15% 0;}
#slide .txt h2 { font-family: 'Climate Crisis', sans-serif; font-size: 50pt; line-height: 90px;}
#slide .txt .pur { font-family: 'Parkinsans', sans-serif; background: #FFB824; width: 50%; color: #000; margin: 0 auto 0; padding: 3px 10px; font-size: 15pt; border-radius: 10px; z-index: 200;}
#header h1 { margin: 11% 10% 5%; width: 80%; text-align: center; font-size: 60pt;}

/**HOME*/
#mod p {  font-size: 1.5vw; line-height: 2vw; font-weight: 300;}
#mod h2 { font-size: 5vw; line-height:4.2vw;}
#mod h3 { font-size: 3.1vw; line-height: 4.2vw;  margin: 0; font-weight: 100; font-style: italic;}
#welcome h3 { font-size: 57pt; line-height:35pt;  margin: 0; font-weight: 600;}

/**SECTION MENU*/
.food h1 { font-weight: 800;}
.food h2 { font-size: 36pt; line-height:40pt;}
.food h3 { font-size: 50pt; font-style: italic; font-weight: 100;}
h4 { font-family: 'Parkinsans', sans-serif; font-weight: 600; font-size: 11pt; line-height: 12pt; display: block; width: 70%;  float: left; margin: 4% 5% 1% 0; text-transform: uppercase; letter-spacing: 1.3px;}
h5 { font-family: 'Parkinsans', sans-serif; font-weight: 400; width: 25%; clear: none; display: block; float: right; text-align: right; line-height: 12pt; font-size: 11pt; margin: 4% 0 1% 0; color: #ED0B07; letter-spacing: 0;}
.des { font-family: 'Zilla Slab', serif; font-size: 19pt; font-weight: 200; line-height: 22pt; display: block; margin: 0 auto; font-style: italic;}
#title .des { width: 80%;}

.food p { font-family: 'Parkinsans', sans-serif; font-weight: 400; font-size: 10.5pt; line-height: 14pt; letter-spacing: 0; display: block; float: left; width: 85%;}
.food i { font-weight: 300; text-transform: capitalize; letter-spacing: 0;}
.opt { font-weight: 400; margin: 0 0 0 4%; display: block; color: #ED0B07;}
.food p b { font-size: 10pt; font-weight: 600; text-transform: uppercase; letter-spacing: 1.5px; color: #2EA032;}
p .opt b { font-weight:600;color: #000; letter-spacing: 0px;}
#content p { width: 100%;}
#content .des { width: 100%; margin-bottom: 3%; line-height: 20pt; font-style: normal;}
.des b { font-weight: 600;}

.employ a { color: #000;}

/*SECTION SPECIALS*/
.specials #group1 h2, .specials #group2 h2 { font-size: 5vw; line-height: 4.7vw;}
.specials #group1 h3, .specials #group2 h3 { font-size: 28pt; line-height: 28pt;}
.specials #group1 p, .specials #group2 p { font-size: 14pt; line-height: 16pt;}
.specials p i { font-size: 10pt; line-height: 9pt;}

/*BOTONES*/
a.button { background: #2EA032; color: #FFB824; padding: 2.4% 8%; border-radius: 60px; font-family: 'Parkinsans', sans-serif; font-weight: 500; font-size: 17pt; transition: 0.5s ease; margin-top: 3%;}
#group1 a.button { background: #2EA032; color: #FFB824;}
#group2 a.button { background: #ED0B07; color: #f8e4ba;}
#group1 a.button:hover, #group2 a.button:hover, .club a.button:hover { background: #fff; color: #000; transition: 0.5s ease;}

/**POPUP*/
.popup h2 { font-size: 30pt; line-height: 30pt;}
.popup h1 { font-size: 20pt; line-height: 22pt; }
.pop { font-family: 'Zilla Slab', serif; font-size: 17pt; font-weight: 300; background: #4ACC53; padding: 6px 17px 8px; border-radius: 50px; color: #fff; cursor: pointer; transition: 0.5s ease;}
.pop:hover { background: #f99c36; transition: 0.5s ease; font-size: 18pt;}


/**FOOTER*/
footer p, footer p a { font-size: 9.5pt; line-height: 15pt;}
footer p b { font-weight: 600; text-transform: uppercase; letter-spacing: 1.5px;}
#copy p, #copy a { color: #fff; font-size: 8pt;}
#copy .gri, #copy .gri a { color: #6c6c76;}

@media screen and (max-width: 900px) {
    h1 { font-size: 25pt; line-height: 20pt;}
    h2 { font-size: 41pt; line-height: 50pt; margin: 0; font-weight: 200;}
    h3 { font-size: 30pt; line-height: 32pt;}
    p { font-size: 12pt; line-height: 17pt;}
    #header h1 { margin: 8% 10%; width: 80%; text-align: center; font-size: 50pt;}
    .food h2 {font-size: 32pt;}
    .food h3 { font-size: 44pt; line-height: 32pt;}
    h4 { font-size: 12pt; line-height: 15pt; margin: 5% 5% 1% 0; letter-spacing: 2px;}
    h5 { font-size: 12pt; line-height: 15pt; margin: 5% 0 1% 0;}
    .food p { font-size: 11pt; line-height: 15pt;}
    .des { font-size: 16pt;}
    #slide .txt { margin: 26% 15% 0;}
    
    a.button { font-size: 15pt; margin-top: 4%; padding: 3% 9%;}
    #welcome h3 { font-size: 42pt; line-height:25pt;}
    #mod p {  font-size: 14pt; line-height: 16pt;}
    #mod h2 { font-size: 32pt; line-height: 28pt;}
    #mod h3 { font-size: 20pt; line-height: 28pt;}
    
/*SECTION SPECIALS*/
.specials #group1 h2, .specials #group2 h2 { font-size: 50pt; line-height: 48pt;}
.specials #group1 h3, .specials #group2 h3 { font-size: 32pt; line-height: 30pt;}
}

@media screen and (max-width: 581px) {
    h1 { font-size: 22pt; line-height: 15pt;}
    h2 { font-size: 30pt;line-height: 36pt;}
    h3 { font-size: 25pt; line-height: 30pt;}
    p { font-size: 12pt; line-height:17pt;}
    #header h1 { margin: 15% 10% 5%; width: 80%; text-align: center; font-size: 40pt;}
    .food h2 {font-size: 25pt; line-height:30pt;}
    .food h3 { font-size: 35pt; line-height: 35pt;}
    .des { font-size: 16pt; line-height: 20pt;}
    
    #slide .txt { width: 90%; color: #fff;  margin: 55% 5% 0;}
    #slide .txt h2 { font-size: 32pt; line-height: 65px;}

    #welcome h3 { font-size: 34pt; line-height:20pt;}
    #mod p {  font-size: 12pt; line-height: 15pt;}
    #mod h2 { font-size: 40pt; line-height: 35pt;}
    #mod h3 { font-size: 30pt; line-height: 25pt;}
    
/*SECTION SPECIALS*/
.specials #group1 h2, .specials #group2 h2 { font-size: 40pt; line-height: 35pt;}
.specials #group1 h3, .specials #group2 h3 { font-size: 28pt; line-height: 26pt;}
}