/* General Blueprint Style */
@import url('https://fonts.googleapis.com/css2?family=Climate+Crisis&family=Englebert&family=Fuzzy+Bubbles:wght@400;700&family=Henny+Penny&family=Parkinsans:wght@300..800&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-facebook-square:before {
  content: "\f082";
  vertical-align: middle;
  font-size: 28pt;
  margin: 0 5px 0 0;
  line-height: 35pt;
}
.icon-google-plus:before {
  content: "\f0d5";
  vertical-align: middle;
  font-size: 28pt;
  margin: 0;
  line-height: 35pt;
}
.icon-instagram:before {
  content: "\f16d";
  vertical-align: middle;
  font-size: 28pt;
  line-height: 35pt;
  margin: 0 4px 0 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-clock:before {
  content: "\e90c";
  vertical-align: middle;
  color:#FF4F87;
}
.icon-cross:before {
  content: "\e907";
}
.icon-grid:before {
  content: "\e908";
}
.icon-location-pin:before {
  content: "\e90d";
  vertical-align: middle;
  color:#FF4F87;
  font-size: 20pt;
  margin: 0;
}
.icon-minus:before {
  content: "\e909";
}
.icon-mobile:before {
  content: "\e90e";
  vertical-align: middle;
  color:#FF4F87;
}
.icon-plus:before {
  content: "\e90a";
}
.icon-popup:before {
  content: "\e90b";
}

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

.contact .icon-facebook-square:hover, .contact .icon-google-plus:hover { color: #FF4F87;}
.contact .icon-facebook-square, .contact .icon-google-plus { color: #b7c34f;}

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

.yel { color: #f0ca44;}
.whi { color:#fff;}
.pur { color:#af6ee1;}
.blu { color: #6adfe1;}
.bla { color: #352931;}
.pin { color: #FF4F87;}
.gre { color: #b7c34f;}
.bd { font-weight:500;}

h1 { font-family: 'Henny Penny', sans-serif; font-size: 9.3vw; line-height: 8.3vw;   margin: 0; font-weight: 100;}
h2 { font-family: "Englebert", cursive; font-size: 25pt; line-height:26pt; margin: 0; font-weight: 200;}
h3 { font-family: 'Parkinsans', serif; font-size: 4.2vw; line-height: 4vw; font-weight: 200; margin: 0;}
h4 { font-family: 'Parkinsans', serif; font-size: 65pt; line-height: 60pt; font-weight: 900; margin: 0;}
p { font-family: 'Parkinsans', sans-serif; font-size: 11.5pt; line-height: 16pt; font-weight: 100; margin: 0;}
#dulce h5 { color: #352931;}
#dulce h4 { color: #fff;}

section #mod1 h3 b, section #mod4 h3 b { font-weight: 800; font-size: 6.7vw; line-height: 5.5vw;color: #f0ca44;}

/**SLIDE*/
.sli-txt { display: block; position: absolute; margin: 25% 5% 0 0; width: 95%; font-size: 70pt; text-align: right; font-family: "Climate Crisis", sans-serif; color: #fff; line-height: 50pt; z-index: 2000;}
#slide .button { margin-top: -10%; background: #ab7bff; color: #fff; padding: 1.5% 4%; line-height: 20pt; font-size: 18pt; font-size: 500;}
#slide .button:hover { background: #fff; color: #ab7bff; }

/**SECTION CONTACT*/
.contact p b { font-size: 16pt; line-height: 20pt; font-weight: 300; margin: 0;}

/**SECTION MENU*/
.food h1 { font-size: 50pt; line-height: 46pt;}
.food h2 {font-size: 50pt; line-height: 50pt;font-weight: 100;}
.food h3 { font-family: 'Fuzzy bubbles'; font-size: 24pt; line-height: 20pt; font-weight: 600;color: #b7c34f; margin: 0 0 3%;}
.food h4 { font-family: 'Parkinsans', sans-serif; font-weight: 600; font-size: 12pt; line-height: 14pt; display: block; width: 70%;  float: left; margin: 4% 5% 1% 0;}
h5 { font-family: 'Parkinsans', sans-serif; font-weight: 400; width: 25%; clear: none; display: block; float: right; text-align: right; line-height: 14pt; font-size: 12pt; margin: 4% 0 1% 0; color: #af6ee1; letter-spacing: 0;}
h6 { margin: 0; font-family: 'Fuzzy bubbles'; font-size: 14pt; line-height: 17pt;}
.food p { font-family: 'Parkinsans', sans-serif; font-weight: 300; font-size: 11pt; line-height: 14.5pt; letter-spacing: 0; display: block; float: left; width: 85%; color: #e9337a;}
.opt { font-weight: 500; margin: 0 0 0 3%; display: block; line-height: 15pt; font-size: 10.5pt; color: #352931;}
.food p b { color: #352931;}
.food p .opt b { font-weight: 600; letter-spacing: 0.5px;}
.food p i { color:#7d8c8e;}
p.des { color: #352931;}

#img h4 { font-family: 'Fuzzy bubbles';}
#img h5 { color: #fff;}
#img.pan h5, #img.fre h5 { color: #352931;}

#header h2 { font-family: 'Englebert', sans-serif; margin: 16% 10% 6%; width: 80%; text-align: center; font-size: 70pt; font-weight: 800;}

a.button { background: none; color: #352931; padding: 2.4% 7%; border: 2px solid #352931; border-radius: 60px; font-family: 'Parkinsans', sans-serif; font-weight: 600; font-size: 15pt; transition: 0.5s ease;}
a.button:hover { background: #fff; color: #af6ee1; transition: 0.5s ease; border: 2px solid #fff;}

/**FOOTER*/
footer p, footer p a { font-size: 10pt; line-height: 14pt;}
footer p a:hover { color: #f0ca44;}
footer #mod3 p, footer #mod3 a { color: #fe709c; font-size: 8pt; line-height: 10pt;}
footer #mod3 p.gre a { color: #b7c34f; font-size: 9pt;}
footer #mod3 a:hover { color: #b7c34f;}

@media screen and (max-width: 1100px) {
    .food h3 {margin: 5% 0 0;}
}
@media screen and (max-width: 900px) {
    h2 { font-size: 21pt; line-height:23pt;}
    h3 { font-size: 45pt; line-height: 30pt;}
    a.button { padding: 3% 7%; font-size: 14pt;}
    #header h2 { margin: 32% 0 5%; width: 100%; text-align: center; font-size: 66pt;}
    
/**SLIDE*/
.sli-txt { font-size: 60pt; line-height: 50pt; text-align: center; margin: 55% 5% 0; width: 90%;}
    
    .food h1 { font-size: 44pt; line-height: 45pt;}
    .food h2 {font-size: 45pt; line-height: 50pt;}
    .food h3 { font-size: 26pt; line-height: 26pt; margin: 4% 0 0; }
    .food h4 { font-size: 12.5pt; line-height: 14pt; width: 70%; margin: 4% 5% 1% 0;}
    h5 { font-size: 12.5pt; line-height: 14pt; margin: 4% 0 1% 0; width: 25%;}
    .food p { font-size: 10.5pt; line-height: 14.5pt;}
}

@media screen and (max-width: 581px) {
    h1 { font-size: 58pt; line-height:51pt;}
    h2 { font-size: 20pt;line-height: 22pt;}
    h3 { font-size: 32pt; line-height: 36pt;}
    p { font-size: 12pt; line-height:17pt;}
    h4 { font-size: 56pt; line-height: 55pt;}
/**SLIDE*/
.sli-txt { font-size: 32pt; line-height: 36pt; margin: 55% 5% 0; width: 90%;}
#slide .button { line-height: 18pt; font-size: 16pt; padding: 10px 20px;}
    
    section #mod1 h3 b, section #mod4 h3 b { font-size: 42pt; line-height: 30pt;}
    #header h2 { margin: 15% 10% 5%; width: 80%; text-align: center; font-size: 40pt;}
    footer p { font-size: 10pt; line-height: 14pt;}
    .food h1 { font-size: 35pt; line-height: 35pt;}
    .food h2 {font-size: 35pt; line-height:30pt;}
    .des { font-size: 16pt; line-height: 20pt;}
    .food h3 { font-size: 20pt; line-height: 22pt; margin: 5% 0 0; }

}