@import url('https://fonts.googleapis.com/css2?family=Hepta+Slab:wght@1..900&family=Parkinsans:wght@300..800&family=Playwrite+CU:wght@100..400&display=swap');

@font-face {
  font-family: 'icomoon';
  src:  url('fonts/icomoon.eot?7zf9h5');
  src:  url('fonts/icomoon.eot?7zf9h5#iefix') format('embedded-opentype'),
    url('fonts/icomoon.ttf?7zf9h5') format('truetype'),
    url('fonts/icomoon.woff?7zf9h5') format('woff'),
    url('fonts/icomoon.svg?7zf9h5#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-tiktok:before {
  content: "\e901";
}
.icon-clock:before {
  content: "\e900";
}
.icon-map-marker:before {
  content: "\f041";
}
.icon-facebook:before {
  content: "\f09a";
}
.icon-facebook-f:before {
  content: "\f09a";
  margin-right: 1px;
}
.icon-google-plus:before {
  content: "\f0d5";
}
.icon-instagram:before {
  content: "\f16d";
  margin-right: 2px;
}
.icon-whatsapp:before {
  content: "\f232";
}
.icon-map-signs:before {
  content: "\f277";
}
.icon-chevron-left1:before {
  content: "\e907";
}
.icon-chevron-right:before {
  content: "\e908";
}
.icon-cross:before {
  content: "\e905";
}
.icon-mail:before {
  content: "\e903";
}
.icon-menu:before {
  content: "\e902";
}
.icon-mobile:before {
  content: "\e904";
}
.icon-phone:before {
  content: "\e906";
}

.contact .icon-facebook-f , .contact .icon-google-plus, .contact .icon-instagram { color:#ec008c; transition: 0.5s ease; font-size: 30pt;}
.contact .icon-facebook-f:hover, .contact .icon-instagram:hover, .contact .icon-google-plus:hover { color:#26bcb4; transition: 0.5s ease; cursor: pointer;}

a { text-decoration:none;}
a:link { text-decoration:none;}
.sub a:link, .sub a:active, .sub a:visited { color:#c79132;}
.sub a:hover { color:#dd4726;}

.nar { color:#f47920;}
.blue { color:#26bcb4;}
.bl2 { color: #2769b3;}
.bl3 { color: #95d2b5;}
.oran { color:#ec008c;}
.yell { color:#f7b402;}
.brown { color:#3e1500;}
.bla { color:#000;}
.whi { color:#fff;}
.beige { color:#f7bf5d;}
.bold { font-weight: 800;}
.med { font-weight: 600;}
.lig { font-weight: 300;}


h1 { font-family: 'Parkinsans', sans-serif; margin: 0; font-weight: 700; font-size: 30pt;}
h2 { font-family: 'Hepta Slab', serif;font-size: 44pt; font-weight: 300; margin: 0; line-height: 48pt;}
h3 { font-family: 'Playwrite CU', serif; font-size: 8vw; line-height: 5.2vw; font-weight: 800; margin: 0;}
h4 { font-family: 'Parkinsans', sans-serif; margin: 0; font-size: 22pt; line-height: 27pt;}
.sub, h6 { font-family: 'Hepta Slab', sans-serif; font-size: 35pt;line-height:38pt; font-weight: 300; margin: 0;}
.text3, h5 { font-family: 'Hepta Slab', sans-serif; font-size: 14pt; line-height: 20pt; font-weight: 500; margin: 0;}
.text, p { font-family: 'Parkinsans', sans-serif; font-size: 13pt; line-height: 17pt; font-weight:200; margin: 0;}

/*HEAD*/
#authen h2 { font-size: 3vw; line-height: 3vw; font-weight: 800;}
#authen p { font-size: 2.2vw; }

#title-sec h3 { text-shadow: 3px 7px 3px rgb(0,0,0,0.2);}

.title { font-family: 'Playwrite CU', serif; font-size:9vw; line-height:5.2vw;}
.slide-txt p { font-weight: 600; font-size: 26pt;}
.slide-txt h2 { font-size: 46pt; line-height: 50pt; font-weight: 300;}

/*PORTAL*/
.portal h4 { letter-spacing: 2pt;}
.portal2 p { font-family: 'Parkinsans', sans-serif; font-size: 10pt; font-weight: 400; line-height: 13pt; background: #2769b3; display: block; float: left; width: 86%; margin: 6% 0 0; border-radius: 25px; padding: 4% 7%; text-shadow: none; color: #fff;}

/*MODULO HOME*/
#mod-1 p, #mod-2 p { font-family: 'Parkinsans', sans-serif; font-size: 2.4vw; color: #fff; line-height: 2.8vw; font-weight: 200; margin: 0;}
#mod-1 h2 { font-size: 3.2vw; color:#f7b402; font-weight: 700; margin: 0; line-height: 3.2vw;}
#mod-2 h2 { font-size: 3.2vw; color:#351f16; font-weight: 700;margin: 0; line-height: 3.2vw;}

/*TAKE*/
#take .title { font-family: 'Hepta Slab', serif; font-size:9vw; line-height:5.2vw; font-weight: 900; color: #fff; }
.check-2 { font-family: 'Parkinsans', sans-serif; font-size: 4.5vw;line-height:3.7vw; font-weight: 300;}

#header-2 .title { font-family: 'Hepta Slab', serif; font-size:4vw; line-height:4.2vw;}
#header-2 .sub { font-family: 'Parkinsans', sans-serif; font-size:2.5vw;line-height:3vw; font-weight:800;}


/*SECTION MENU*/
.TabbedPanelsContent p b { font-weight: 600;}
.opt { display: block; margin-left: 5%; font-weight: 400;}
.TabbedPanelsContent h3 { font-size: 55pt;}

/*SPECIALS-DRINKS*/
#section3 .sub, #section6 .sub, #section9 .sub, #section10 .sub {font-family: 'Parkinsans', sans-serif; font-size: 28pt;line-height:30pt; font-weight:800;}
#section4 #cl-3 #cl-title .sub {font-family: 'Parkinsans', sans-serif; font-size: 28pt;line-height:30pt;}
#section .title2, #section2 .title2, #ritas-1 .title2 { font-size:4vw; line-height: 4.2vw;}
#section .title, #section2 .title, #section3 .title, #section4 .title, #section6 .title {font-family: 'Playwrite CU', serif; font-size:3.9vw; line-height:30pt;}
#section .text2, #section2 .text2, #section3 .text2, #section4 .text2, #section5 .text2, #section6 .text2, #section7 .text2 {font-family: 'Parkinsans', sans-serif; font-size: 13pt; line-height: 17pt; font-weight:700;}
#location .text { font-family: 'Parkinsans', sans-serif; font-size: 22pt; line-height: 32pt; font-weight:200;}
#location .title2 { font-size:32pt; line-height:42pt;}

.info { font-family: 'Parkinsans', sans-serif; color:#6b3a33; font-size: 3vw;}
.text2 {font-family: 'Parkinsans', sans-serif; font-size: 15pt; line-height: 18pt; font-weight:600;}

#ritas-1 .text3 { font-family: 'Hepta Slab', sans-serif; font-size: 14pt; line-height: 18pt; font-weight:200;}
#ritas-2 .sub, #ritas-3 .sub, #ritas-4 .sub, #drinks2 #cl-title .sub {font-family: 'Parkinsans', sans-serif; font-size: 42pt;line-height:44pt;}

#section-spe4 h1 { font-size: 18pt; line-height: 22pt;}
#cl-title i { font-size: 11pt; line-height: 11pt;}


/*FOOTER*/
footer p {font-family: 'Parkinsans', sans-serif; font-size: 9.5pt; line-height: 13pt; color: #fff;}
footer p b { font-weight: 600;}
footer p a:link, footer p a:visited, footer p a:active { font-size: 9pt; color:#fff; line-height: 10pt; letter-spacing: 0;}
footer p a:hover { color:#1eb4d1;}
footer h1 { font-size: 14pt; line-height: 19pt; color:#1eb4d1; font-weight: 600; color: #fff;}
footer h2 { font-size: 16pt; line-height: 19pt; font-weight: 700;}
footer p.copy, footer p.copy a { font-size: 9pt; line-height: 13pt; letter-spacing:0; color:#89959B;}
footer i { font-size: 9pt; line-height: 13pt;}
#locations h1, #locations2 h1, #locations h1 a { font-size: 11pt; color: #fff; letter-spacing: 0.2px; font-weight: 500; line-height: 14pt;}
footer .icon-phone:before { font-size: 13pt; color:#ea9f1c;}
footer .icon-facebook-f, footer .icon-google-plus, footer .icon-instagram { color: #1eb4d1; transition: 0.5s ease;   font-size: 24pt; margin-right: 1px; line-height: 45pt;}
footer .icon-facebook-f:hover, footer .icon-instagram:hover, footer .icon-google-plus:hover { color:#fff; transition: 0.5s ease; cursor: pointer;}


@media screen and (max-width: 800px) {
.title { font-size:68pt; line-height:50pt;}
.sub {  font-size: 28pt; line-height:32pt;}
.info {  font-size: 18pt;}
h1 { font-size: 25pt; line-height: 30pt;}
h2 { font-size:33pt; line-height: 35pt;}    
    
#section4 #cl-3 #cl-title .sub  {font-size: 34pt;line-height:30pt;}
#section .title2, #section2 .title2, #ritas-1 .title2 { font-family: 'Hepta Slab', serif;font-size:35pt; line-height: 35pt;}
#section .title, #section2 .title, #section3 .title, #section4 .title, #section6 .title {font-family: 'Playwrite CU', serif; font-size:35pt; line-height:34pt; }
    
/*PORTAL*/
.portal h4 { font-size: 18pt;}
    
/*MODULO HOME*/
#mod-1 p, #mod-2 p { font-size: 22pt; line-height: 24pt;}
#mod-1 h2, #mod-2 h2 { font-size: 32pt;}
    
/*TAKE*/
#take .title { font-size: 65pt; line-height: 15pt; text-shadow: 0px 0px 35px rgb(0,0,0,0.4);}
.check-2 { font-size: 30pt; line-height: 40pt;}
    
/*FOOTER*/
footer p { font-size: 9pt; line-height: 13pt;}
footer p a:link, footer p a:visited, footer p a:active { font-size: 9pt; line-height: 10pt; }
#locations h1, #locations2 h1 { font-size: 11pt; line-height: 14pt;}
footer i { font-size: 8pt; line-height: 12pt;}
}

@media screen and (max-width: 581px) {
.title { font-size:50pt; line-height:32pt;}
.sub {  font-size: 20pt; line-height:24pt;}
.text, p {  font-size: 13pt; line-height: 18pt;}
.text2 {font-size: 14pt; line-height: 18pt;}
h1 { font-size: 21pt; line-height: 25pt;}
h2 { font-size: 28pt; line-height: 40pt;}
h3 { font-size: 40pt;}
    
.portal h4 { font-size: 15pt;}
.slide-txt p { font-size: 22pt;}
.slide-txt h2 { font-size: 40pt; line-height: 43pt;}

#header-3 .title { font-size:40pt;}
#section .title, #section2 .title, #section3 .title, #section4 .title, #section6 .title { font-size:34pt; line-height:34pt;}
#section .title2, #section2 .title2, #ritas-1 .title2 { font-size:29pt; line-height: 32pt;}
#section4 #cl-3 #cl-title .sub  {font-size: 30pt;line-height:30pt;}
    
.TabbedPanelsContent h3 { font-size: 30pt;}
#title-sec h3 { text-shadow: 3px 7px 3px rgb(0,0,0,0.1);}
    
/*MODULO HOME*/
#mod-1 p, #mod-2 p { font-size: 25pt; line-height: 28pt;}
#mod-1 h2, #mod-2 h2 { font-size: 35pt; line-height: 38pt;}
    
/*TAKE*/
#take .title { font-size: 65pt; line-height: 10pt; text-shadow: 0px 0px 35px rgb(0,0,0,0.4);}
.check-2 { font-size: 22pt; line-height:26pt;}
    
/*FOOTER*/
footer h1 { font-size: 13pt;}
footer .icon-facebook-f, footer .icon-google-plus, footer .icon-instagram { font-size: 20pt; margin-right: 1px; line-height: 35pt;}
}



