/* General Blueprint Style */
@import url('https://fonts.googleapis.com/css2?family=Grandstander:ital,wght@0,100..900;1,100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&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";
}
.icon-google-plus:before {
  content: "\f0d5";
}
.icon-instagram:before {
  content: "\f16d";
}
.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:#ffc20f;
}
.icon-cross:before {
  content: "\e907";
}
.icon-grid:before {
  content: "\e908";
}
.icon-location-pin:before {
  content: "\e90d";
  vertical-align: middle;
  color:#ffc20f;
  font-size: 20pt;
  margin: 0;
  vertical-align: middle;
}
.icon-minus:before {
  content: "\e909";
}
.icon-mobile:before {
  content: "\e90e";
  vertical-align: middle;
  color:#ffc20f;
}
.icon-plus:before {
  content: "\e90a";
}
.icon-popup:before {
  content: "\e90b";
}

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

.pin { color:#cf3381;}
.pur { color:#7e69af;}
.whi { color:#fff;}
.blu { color:#71cfeb;}
.gre { color:#1cb8a4;}
.ora { color:#ff8f4b;}
.yell { color:#ffc20f;}
.yel { color:#ffe84c;}
.bro { color:#4b2f1c;}
.black { color: #353d3c;}
.md { font-weight:600;}

a.act { color:#ff8ec4; border-bottom: 1px solid #ff8ec4;}
.title { font-family: 'Grandstander', sans-serif; font-size: 45pt; line-height:41pt; font-weight: 800;}
.title2 { font-family: 'Grandstander', sans-serif; font-size: 8vw;font-weight: 800;}
.tit-2 { font-family: 'Grandstander', sans-serif; font-size: 41pt; line-height:37pt; font-weight: 700;} 
.sub { font-family: 'Poppins', sans-serif; font-size: 20pt; line-height:24pt;font-weight: 200;}
.text { font-family: 'Poppins', sans-serif; font-size: 15pt; line-height:19pt;font-weight: 300;}

/*SLIDE*/
.slide-txt {
    font-size: 28pt; font-weight: 300; line-height: 28pt; font-family: 'Poppins', sans-serif; letter-spacing: 1px;
}
a .slide-txt:hover {font-size: 30pt; line-height: 30pt;}

h1, h1 a { font-family: 'Grandstander', serif; font-size: 8.4vw; text-transform: uppercase; color: #ffe84c; font-weight: 800;}
h1 a:hover { color:#fff;}
.menu a { font-family: 'Poppins', sans-serif; font-size: 14pt; line-height:24pt;font-weight: 500; margin-right: 10px;letter-spacing: 0.5px; transition: 0.5s ease;}
.menu a:hover { color:#ff8ec4; border-bottom: 1px solid #ff8ec4; transition: 0.5s ease;}

.taste3 .title { font-family: 'Grandstander', serif; font-size: 41pt; line-height: 38pt; font-weight: 700;}

#col2 .title { color:#cf3381; font-size: 29pt; text-transform: uppercase; font-weight: 700; line-height: 27pt; display: block; margin: 0 0 2%;}

footer.text { font-size: 10pt; line-height: 14pt;}
footer a.act { color:#fff; border-bottom: 1px solid #fff;}
footer a:hover { color:#4b2f1c;}
#copy, #copy a { font-size: 7pt; text-transform: uppercase; letter-spacing: 1pt; font-weight: 500; color:#55351e;}
#copy a:hover { color: #fff;}

/* DEMO-SPECIFIC STYLES */
.typewriter {
  color: #ffe84c;
  font-family: monospace;
  overflow: hidden; /* Ensures the content is not revealed until the animation */
  border-right: .15em solid orange; /* The typwriter cursor */
  white-space: nowrap; /* Keeps the content on a single line */
  margin: 0 auto; /* Gives that scrolling effect as the typing happens */
  letter-spacing: .15em; /* Adjust as needed */
  animation: 
    typing 3.5s steps(30, end),
    blink-caret .5s step-end infinite;
}

/* The typing effect */
@keyframes typing {
  from { width: 0 }
  to { width: 100% }
}

/* The typewriter cursor effect */
@keyframes blink-caret {
  from, to { border-color: transparent }
  50% { border-color: orange }
}

@media screen and (max-width: 769px) {
/*SLIDE*/
.slide-txt { font-size: 22pt; line-height: 22pt; }
a .slide-txt:hover {font-size: 24pt; line-height: 24pt;}
    
.title { font-size: 40pt; line-height:35pt;}
.tit-2 { font-size: 38pt; line-height:35pt;} 
.sub { font-size: 17pt; line-height:20pt;}
.text { font-size: 14pt; line-height:18pt;font-weight: 300;}
h1, h1 a { font-size: 8.6vw;}
.title2 { font-size: 55pt;}
#col2 .title { font-size: 26pt; line-height: 24pt; margin: 0 0 2%;}
#col1.text, #col2.text { font-size: 13pt; line-height:17pt;}
}

@media screen and (max-width: 581px) {
h1, h1 a { font-size: 34pt;}
.title { font-size: 38pt; line-height:33pt;}
.title2 { font-size: 48pt;}
.sub { font-size: 15pt; line-height:18pt;}
.text { font-size: 13pt; line-height:17pt;}
.menu a { font-size: 14pt; margin-right: 15px;}
a .slide-txt {color: #fff;}   
a .slide-txt:hover {font-size: 22pt; line-height: 22pt;}
    
footer.text { font-size: 11pt; line-height: 17pt;}
#copy, #copy a { font-size: 7pt; line-height: 8pt;}

}