.display-1 {
font-size: {{fontSizeDisplay1[0] + 'px'}};
line-height: {{lineHeightDisplay1[0] + 'px'}};
font-family: {{fontFamilyDisplay1[0]}};
font-weight: {{fontWeightDisplay1[0]}};
color: {{fontColorDisplay1[0]}};
}
@media only screen and (min-width: 576px) {
.display-1 {
font-size: {{fontSizeDisplay1[1] + 'px'}};
line-height: {{lineHeightDisplay1[1] + 'px'}};
font-family: {{fontFamilyDisplay1[1]}};
font-weight: {{fontWeightDisplay1[1]}};
color: {{fontColorDisplay1[1]}};
}
}
@media only screen and (min-width: 768px) {
.display-1 {
font-size: {{fontSizeDisplay1[2] + 'px'}};
line-height: {{lineHeightDisplay1[2] + 'px'}};
font-family: {{fontFamilyDisplay1[2]}};
font-weight: {{fontWeightDisplay1[2]}};
color: {{fontColorDisplay1[2]}};
}
}
@media only screen and (min-width: 992px) {
.display-1 {
font-size: {{fontSizeDisplay1[3] + 'px'}};
line-height: {{lineHeightDisplay1[3] + 'px'}};
font-family: {{fontFamilyDisplay1[3]}};
font-weight: {{fontWeightDisplay1[3]}};
color: {{fontColorDisplay1[3]}};
}
}
@media only screen and (min-width: 1200px) {
.display-1 {
font-size: {{fontSizeDisplay1[4] + 'px'}};
line-height: {{lineHeightDisplay1[4] + 'px'}};
font-family: {{fontFamilyDisplay1[4]}};
font-weight: {{fontWeightDisplay1[4]}};
color: {{fontColorDisplay1[4]}};
}
}
.display-2 {
font-size: {{fontSizeDisplay2[0] + 'px'}};
line-height: {{lineHeightDisplay2[0] + 'px'}};
font-family: {{fontFamilyDisplay2[0]}};
font-weight: {{fontWeightDisplay2[0]}};
color: {{fontColorDisplay2[0]}};
}
@media only screen and (min-width: 576px) {
.display-2 {
font-size: {{fontSizeDisplay2[1] + 'px'}};
line-height: {{lineHeightDisplay2[1] + 'px'}};
font-family: {{fontFamilyDisplay2[1]}};
font-weight: {{fontWeightDisplay2[1]}};
color: {{fontColorDisplay2[1]}};
}
}
@media only screen and (min-width: 768px) {
.display-2 {
font-size: {{fontSizeDisplay2[2] + 'px'}};
line-height: {{lineHeightDisplay2[2] + 'px'}};
font-family: {{fontFamilyDisplay2[2]}};
font-weight: {{fontWeightDisplay2[2]}};
color: {{fontColorDisplay2[2]}};
}
}
@media only screen and (min-width: 992px) {
.display-2 {
font-size: {{fontSizeDisplay2[3] + 'px'}};
line-height: {{lineHeightDisplay2[3] + 'px'}};
font-family: {{fontFamilyDisplay2[3]}};
font-weight: {{fontWeightDisplay2[3]}};
color: {{fontColorDisplay2[3]}};
}
}
@media only screen and (min-width: 1200px) {
.display-2 {
font-size: {{fontSizeDisplay2[4] + 'px'}};
line-height: {{lineHeightDisplay2[4] + 'px'}};
font-family: {{fontFamilyDisplay2[4]}};
font-weight: {{fontWeightDisplay2[4]}};
color: {{fontColorDisplay2[4]}};
}
}
.display-3 {
font-size: {{fontSizeDisplay3[0] + 'px'}};
line-height: {{lineHeightDisplay3[0] + 'px'}};
font-family: {{fontFamilyDisplay3[0]}};
font-weight: {{fontWeightDisplay3[0]}};
color: {{fontColorDisplay3[0]}};
}
@media only screen and (min-width: 576px) {
.display-3 {
font-size: {{fontSizeDisplay3[1] + 'px'}};
line-height: {{lineHeightDisplay3[1] + 'px'}};
font-family: {{fontFamilyDisplay3[1]}};
font-weight: {{fontWeightDisplay3[1]}};
color: {{fontColorDisplay3[1]}};
}
}
@media only screen and (min-width: 768px) {
.display-3 {
font-size: {{fontSizeDisplay3[2] + 'px'}};
line-height: {{lineHeightDisplay3[2] + 'px'}};
font-family: {{fontFamilyDisplay3[2]}};
font-weight: {{fontWeightDisplay3[2]}};
color: {{fontColorDisplay3[2]}};
}
}
@media only screen and (min-width: 992px) {
.display-3 {
font-size: {{fontSizeDisplay3[3] + 'px'}};
line-height: {{lineHeightDisplay3[3] + 'px'}};
font-family: {{fontFamilyDisplay3[3]}};
font-weight: {{fontWeightDisplay3[3]}};
color: {{fontColorDisplay3[3]}};
}
}
@media only screen and (min-width: 1200px) {
.display-3 {
font-size: {{fontSizeDisplay3[4] + 'px'}};
line-height: {{lineHeightDisplay3[4] + 'px'}};
font-family: {{fontFamilyDisplay3[4]}};
font-weight: {{fontWeightDisplay3[4]}};
color: {{fontColorDisplay3[4]}};
}
}
.display-4 {
font-size: {{fontSizeDisplay4[0] + 'px'}};
line-height: {{lineHeightDisplay4[0] + 'px'}};
font-family: {{fontFamilyDisplay4[0]}};
font-weight: {{fontWeightDisplay4[0]}};
color: {{fontColorDisplay4[0]}};
}
@media only screen and (min-width: 576px) {
.display-4 {
font-size: {{fontSizeDisplay4[1] + 'px'}};
line-height: {{lineHeightDisplay4[1] + 'px'}};
font-family: {{fontFamilyDisplay4[1]}};
font-weight: {{fontWeightDisplay4[1]}};
color: {{fontColorDisplay4[1]}};
}
}
@media only screen and (min-width: 768px) {
.display-4 {
font-size: {{fontSizeDisplay4[2] + 'px'}};
line-height: {{lineHeightDisplay4[2] + 'px'}};
font-family: {{fontFamilyDisplay4[2]}};
font-weight: {{fontWeightDisplay4[2]}};
color: {{fontColorDisplay4[2]}};
}
}
@media only screen and (min-width: 992px) {
.display-4 {
font-size: {{fontSizeDisplay4[3] + 'px'}};
line-height: {{lineHeightDisplay4[3] + 'px'}};
font-family: {{fontFamilyDisplay4[3]}};
font-weight: {{fontWeightDisplay4[3]}};
color: {{fontColorDisplay4[3]}};
}
}
@media only screen and (min-width: 1200px) {
.display-4 {
font-size: {{fontSizeDisplay4[4] + 'px'}};
line-height: {{lineHeightDisplay4[4] + 'px'}};
font-family: {{fontFamilyDisplay4[4]}};
font-weight: {{fontWeightDisplay4[4]}};
color: {{fontColorDisplay4[4]}};
}
}
h1,.h1 {
font-size: {{fontSizeH1[0] + 'px'}};
line-height: {{lineHeightH1[0] + 'px'}};
font-family: {{fontFamilyH1[0]}};
font-weight: {{fontWeightH1[0]}};
color: {{fontColorH1[0]}};
}
@media only screen and (min-width: 576px) {
h1,.h1 {
font-size: {{fontSizeH1[1] + 'px'}};
line-height: {{lineHeightH1[1] + 'px'}};
font-family: {{fontFamilyH1[1]}};
font-weight: {{fontWeightH1[1]}};
color: {{fontColorH1[1]}};
}
}
@media only screen and (min-width: 768px) {
h1,.h1 {
font-size: {{fontSizeH1[2] + 'px'}};
line-height: {{lineHeightH1[2] + 'px'}};
font-family: {{fontFamilyH1[2]}};
font-weight: {{fontWeightH1[2]}};
color: {{fontColorH1[2]}};
}
}
@media only screen and (min-width: 992px) {
h1,.h1 {
font-size: {{fontSizeH1[3] + 'px'}};
line-height: {{lineHeightH1[3] + 'px'}};
font-family: {{fontFamilyH1[3]}};
font-weight: {{fontWeightH1[3]}};
color: {{fontColorH1[3]}};
}
}
@media only screen and (min-width: 1200px) {
h1,.h1 {
font-size: {{fontSizeH1[4] + 'px'}};
line-height: {{lineHeightH1[4] + 'px'}};
font-family: {{fontFamilyH1[4]}};
font-weight: {{fontWeightH1[4]}};
color: {{fontColorH1[4]}};
}
}
h2,.h2 {
font-size: {{fontSizeH2[0] + 'px'}};
line-height: {{lineHeightH2[0] + 'px'}};
font-family: {{fontFamilyH2[0]}};
font-weight: {{fontWeightH2[0]}};
color: {{fontColorH2[0]}};
}
@media only screen and (min-width: 576px) {
h2,.h2 {
font-size: {{fontSizeH2[1] + 'px'}};
line-height: {{lineHeightH2[1] + 'px'}};
font-family: {{fontFamilyH2[1]}};
font-weight: {{fontWeightH2[1]}};
color: {{fontColorH2[1]}};
}
}
@media only screen and (min-width: 768px) {
h2,.h2 {
font-size: {{fontSizeH2[2] + 'px'}};
line-height: {{lineHeightH2[2] + 'px'}};
font-family: {{fontFamilyH2[2]}};
font-weight: {{fontWeightH2[2]}};
color: {{fontColorH2[2]}};
}
}
@media only screen and (min-width: 992px) {
h2,.h2 {
font-size: {{fontSizeH2[3] + 'px'}};
line-height: {{lineHeightH2[3] + 'px'}};
font-family: {{fontFamilyH2[3]}};
font-weight: {{fontWeightH2[3]}};
color: {{fontColorH2[3]}};
}
}
@media only screen and (min-width: 1200px) {
h2,.h2 {
font-size: {{fontSizeH2[4] + 'px'}};
line-height: {{lineHeightH2[4] + 'px'}};
font-family: {{fontFamilyH2[4]}};
font-weight: {{fontWeightH2[4]}};
color: {{fontColorH2[4]}};
}
}
h3,.h3 {
font-size: {{fontSizeH3[0] + 'px'}};
line-height: {{lineHeightH3[0] + 'px'}};
font-family: {{fontFamilyH3[0]}};
font-weight: {{fontWeightH3[0]}};
color: {{fontColorH3[0]}};
}
@media only screen and (min-width: 576px) {
h3,.h3 {
font-size: {{fontSizeH3[1] + 'px'}};
line-height: {{lineHeightH3[1] + 'px'}};
font-family: {{fontFamilyH3[1]}};
font-weight: {{fontWeightH3[1]}};
color: {{fontColorH3[1]}};
}
}
@media only screen and (min-width: 768px) {
h3,.h3 {
font-size: {{fontSizeH3[2] + 'px'}};
line-height: {{lineHeightH3[2] + 'px'}};
font-family: {{fontFamilyH3[2]}};
font-weight: {{fontWeightH3[2]}};
color: {{fontColorH3[2]}};
}
}
@media only screen and (min-width: 992px) {
h3,.h3 {
font-size: {{fontSizeH3[3] + 'px'}};
line-height: {{lineHeightH3[3] + 'px'}};
font-family: {{fontFamilyH3[3]}};
font-weight: {{fontWeightH3[3]}};
color: {{fontColorH3[3]}};
}
}
@media only screen and (min-width: 1200px) {
h3,.h3 {
font-size: {{fontSizeH3[4] + 'px'}};
line-height: {{lineHeightH3[4] + 'px'}};
font-family: {{fontFamilyH3[4]}};
font-weight: {{fontWeightH3[4]}};
color: {{fontColorH3[4]}};
}
}
h4,.h4 {
font-size: {{fontSizeH4[0] + 'px'}};
line-height: {{lineHeightH4[0] + 'px'}};
font-family: {{fontFamilyH4[0]}};
font-weight: {{fontWeightH4[0]}};
color: {{fontColorH4[0]}};
}
@media only screen and (min-width: 576px) {
h4,.h4 {
font-size: {{fontSizeH4[1] + 'px'}};
line-height: {{lineHeightH4[1] + 'px'}};
font-family: {{fontFamilyH4[1]}};
font-weight: {{fontWeightH4[1]}};
color: {{fontColorH4[1]}};
}
}
@media only screen and (min-width: 768px) {
h4,.h4 {
font-size: {{fontSizeH4[2] + 'px'}};
line-height: {{lineHeightH4[2] + 'px'}};
font-family: {{fontFamilyH4[2]}};
font-weight: {{fontWeightH4[2]}};
color: {{fontColorH4[2]}};
}
}
@media only screen and (min-width: 992px) {
h4,.h4 {
font-size: {{fontSizeH4[3] + 'px'}};
line-height: {{lineHeightH4[3] + 'px'}};
font-family: {{fontFamilyH4[3]}};
font-weight: {{fontWeightH4[3]}};
color: {{fontColorH4[3]}};
}
}
@media only screen and (min-width: 1200px) {
h4,.h4 {
font-size: {{fontSizeH4[4] + 'px'}};
line-height: {{lineHeightH4[4] + 'px'}};
font-family: {{fontFamilyH4[4]}};
font-weight: {{fontWeightH4[4]}};
color: {{fontColorH4[4]}};
}
}
h5,.h5 {
font-size: {{fontSizeH5[0] + 'px'}};
line-height: {{lineHeightH5[0] + 'px'}};
font-family: {{fontFamilyH5[0]}};
font-weight: {{fontWeightH5[0]}};
color: {{fontColorH5[0]}};
}
@media only screen and (min-width: 576px) {
h5,.h5 {
font-size: {{fontSizeH5[1] + 'px'}};
line-height: {{lineHeightH5[1] + 'px'}};
font-family: {{fontFamilyH5[1]}};
font-weight: {{fontWeightH5[1]}};
color: {{fontColorH5[1]}};
}
}
@media only screen and (min-width: 768px) {
h5,.h5 {
font-size: {{fontSizeH5[2] + 'px'}};
line-height: {{lineHeightH5[2] + 'px'}};
font-family: {{fontFamilyH5[2]}};
font-weight: {{fontWeightH5[2]}};
color: {{fontColorH5[2]}};
}
}
@media only screen and (min-width: 992px) {
h5,.h5 {
font-size: {{fontSizeH5[3] + 'px'}};
line-height: {{lineHeightH5[3] + 'px'}};
font-family: {{fontFamilyH5[3]}};
font-weight: {{fontWeightH5[3]}};
color: {{fontColorH5[3]}};
}
}
@media only screen and (min-width: 1200px) {
h5,.h5 {
font-size: {{fontSizeH5[4] + 'px'}};
line-height: {{lineHeightH5[4] + 'px'}};
font-family: {{fontFamilyH5[4]}};
font-weight: {{fontWeightH5[4]}};
color: {{fontColorH5[4]}};
}
}
h6,.h6 {
font-size: {{fontSizeH6[0] + 'px'}};
line-height: {{lineHeightH6[0] + 'px'}};
font-family: {{fontFamilyH6[0]}};
font-weight: {{fontWeightH6[0]}};
color: {{fontColorH6[0]}};
}
@media only screen and (min-width: 576px) {
h6,.h6 {
font-size: {{fontSizeH6[1] + 'px'}};
line-height: {{lineHeightH6[1] + 'px'}};
font-family: {{fontFamilyH6[1]}};
font-weight: {{fontWeightH6[1]}};
color: {{fontColorH6[1]}};
}
}
@media only screen and (min-width: 768px) {
h6,.h6 {
font-size: {{fontSizeH6[2] + 'px'}};
line-height: {{lineHeightH6[2] + 'px'}};
font-family: {{fontFamilyH6[2]}};
font-weight: {{fontWeightH6[2]}};
color: {{fontColorH6[2]}};
}
}
@media only screen and (min-width: 992px) {
h6,.h6 {
font-size: {{fontSizeH6[3] + 'px'}};
line-height: {{lineHeightH6[3] + 'px'}};
font-family: {{fontFamilyH6[3]}};
font-weight: {{fontWeightH6[3]}};
color: {{fontColorH6[3]}};
}
}
@media only screen and (min-width: 1200px) {
h6,.h6 {
font-size: {{fontSizeH6[4] + 'px'}};
line-height: {{lineHeightH6[4] + 'px'}};
font-family: {{fontFamilyH6[4]}};
font-weight: {{fontWeightH6[4]}};
color: {{fontColorH6[4]}};
}
}
p {
font-size: {{fontSizeP[0] + 'px'}};
line-height: {{lineHeightP[0] + 'px'}};
font-family: {{fontFamilyP[0]}};
font-weight: {{fontWeightP[0]}};
color: {{fontColorP[0]}};
}
@media only screen and (min-width: 576px) {
p {
font-size: {{fontSizeP[1] + 'px'}};
line-height: {{lineHeightP[1] + 'px'}};
font-family: {{fontFamilyP[1]}};
font-weight: {{fontWeightP[1]}};
color: {{fontColorP[1]}};
}
}
@media only screen and (min-width: 768px) {
p {
font-size: {{fontSizeP[2] + 'px'}};
line-height: {{lineHeightP[2] + 'px'}};
font-family: {{fontFamilyP[2]}};
font-weight: {{fontWeightP[2]}};
color: {{fontColorP[2]}};
}
}
@media only screen and (min-width: 992px) {
p {
font-size: {{fontSizeP[3] + 'px'}};
line-height: {{lineHeightP[3] + 'px'}};
font-family: {{fontFamilyP[3]}};
font-weight: {{fontWeightP[3]}};
color: {{fontColorP[3]}};
}
}
@media only screen and (min-width: 1200px) {
p {
font-size: {{fontSizeP[4] + 'px'}};
line-height: {{lineHeightP[4] + 'px'}};
font-family: {{fontFamilyP[4]}};
font-weight: {{fontWeightP[4]}};
color: {{fontColorP[4]}};
}
}
{{message}}
{{message | uppercase}}