<Comment>/*</Comment><br/>
<Comment> * SCSS Syntax Highlight Sample File (Standard)</Comment><br/>
<Comment> *</Comment><br/>
<Comment> * This file contains most SCSS syntax, CSS3 properties, advanced code structure.</Comment><br/>
<Comment> * It is NOT a valid SCSS file that can be compiled by SCSS preprocessors.</Comment><br/>
<Comment> *</Comment><br/>
<Comment> * @author  Guo Yunhe guoyunhebrave@gmail.com</Comment><br/>
<Comment> * @date    2016-09-15</Comment><br/>
<Comment> */</Comment><br/>
<Normal Text></Normal Text><br/>
<Comment>/*</Comment><br/>
<Comment> * Block comment</Comment><br/>
<Comment> *</Comment><br/>
<Comment> * Alert keywords:</Comment><br/>
<Comment> * </Comment><Alert Level 2>TODO</Alert Level 2><Comment> </Comment><Alert Level 2>BUG</Alert Level 2><Comment> </Comment><Alert Level 2>FIXME</Alert Level 2><br/>
<Comment> */</Comment><br/>
<Normal Text></Normal Text><br/>
<At Rule>@charset</At Rule><Normal Text> </Normal Text><String>"UTF-8"</String><Separator Symbol>;</Separator Symbol><br/>
<Normal Text></Normal Text><br/>
<At Rule>@import</At Rule><Normal Text> </Normal Text><String>"mixins/button"</String><Separator Symbol>;</Separator Symbol><br/>
<Normal Text></Normal Text><br/>
<Comment>// Variable define</Comment><br/>
<Normal Text></Normal Text><br/>
<Variable>$image-path</Variable><Normal Text>:            </Normal Text><String>"../../static/images"</String><Separator Symbol>;</Separator Symbol><br/>
<Variable>$default-text-color</Variable><Normal Text>:    </Normal Text><Color>#333</Color><Normal Text> </Normal Text><Annotation>!default</Annotation><Separator Symbol>;</Separator Symbol><Normal Text> </Normal Text><Comment>// Default can be overrided</Comment><br/>
<Variable>$default-font-size</Variable><Normal Text>:     </Normal Text><Number>16</Number><Unit>px</Unit><Normal Text> </Normal Text><Annotation>!default</Annotation><Separator Symbol>;</Separator Symbol><br/>
<Variable>$default-font-family</Variable><Normal Text>:   Roboto</Normal Text><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><String>"Droid Sans"</String><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Value>sans-serif</Value><Separator Symbol>;</Separator Symbol><br/>
<Variable>$default-font-weight</Variable><Normal Text>:   </Normal Text><Number>400</Number><Separator Symbol>;</Separator Symbol><br/>
<Variable>$default-line-height</Variable><Normal Text>:   </Normal Text><Variable>$default-font-size</Variable><Normal Text> </Normal Text><Operator>*</Operator><Normal Text> </Normal Text><Number>1.8</Number><Separator Symbol>;</Separator Symbol><br/>
<Variable>$shadow-transparence</Variable><Normal Text>:   </Normal Text><Number>0.25</Number><Separator Symbol>;</Separator Symbol><br/>
<Variable>$box-shadow</Variable><Normal Text>:            </Normal Text><Number>0</Number><Normal Text> </Normal Text><Number>0</Number><Normal Text> </Normal Text><Number>3</Number><Unit>px</Unit><Normal Text> </Normal Text><Function>rgba(</Function><Number>0</Number><Separator Symbol>,</Separator Symbol><Number>0</Number><Separator Symbol>,</Separator Symbol><Number>0</Number><Separator Symbol>,</Separator Symbol><Variable>$shadow-transparence</Variable><Function>)</Function><Separator Symbol>;</Separator Symbol><br/>
<Variable>$page-width</Variable><Normal Text>:            </Normal Text><Number>100</Number><Unit>rem</Unit><Separator Symbol>;</Separator Symbol><Normal Text> </Normal Text><Comment>// kabab-case</Comment><br/>
<Variable>$gapOfArticle</Variable><Normal Text>:          </Normal Text><Number>20</Number><Unit>px</Unit><Separator Symbol>;</Separator Symbol><Normal Text>   </Normal Text><Comment>// camelCase</Comment><br/>
<Variable>$body_background_color</Variable><Normal Text>: </Normal Text><Color>white</Color><Separator Symbol>;</Separator Symbol><Normal Text>  </Normal Text><Comment>// snake_case</Comment><br/>
<Normal Text></Normal Text><br/>
<Comment>// Mixins</Comment><br/>
<Normal Text></Normal Text><br/>
<At Rule>@mixin</At Rule><Normal Text> </Normal Text><Function>border-radius</Function><Normal Text>(</Normal Text><Variable>$radius</Variable><Normal Text>) {</Normal Text><br/>
<Normal Text>  </Normal Text><Property>-webkit-border-radius</Property><Normal Text>: </Normal Text><Variable>$radius</Variable><Separator Symbol>;</Separator Symbol><br/>
<Normal Text>     </Normal Text><Property>-moz-border-radius</Property><Normal Text>: </Normal Text><Variable>$radius</Variable><Separator Symbol>;</Separator Symbol><br/>
<Normal Text>      </Normal Text><Unknown Property>-ms-border-radius</Unknown Property><Normal Text>: </Normal Text><Variable>$radius</Variable><Separator Symbol>;</Separator Symbol><br/>
<Normal Text>          </Normal Text><Property>border-radius</Property><Normal Text>: </Normal Text><Variable>$radius</Variable><Separator Symbol>;</Separator Symbol><br/>
<Normal Text>}</Normal Text><br/>
<Normal Text></Normal Text><br/>
<Selector Class>.box</Selector Class><Normal Text> { </Normal Text><At Rule>@include</At Rule><Normal Text> </Normal Text><Function>border-radius(</Function><Number>10</Number><Unit>px</Unit><Function>)</Function><Separator Symbol>;</Separator Symbol><Normal Text> }</Normal Text><br/>
<Normal Text></Normal Text><br/>
<Comment>// Nesting</Comment><br/>
<Normal Text></Normal Text><br/>
<Selector Id>#home-page</Selector Id><Normal Text> {</Normal Text><br/>
<Normal Text></Normal Text><br/>
<Normal Text>    </Normal Text><Selector Tag>header</Selector Tag><Normal Text> {</Normal Text><br/>
<Normal Text>        </Normal Text><Property>width</Property><Normal Text>: </Normal Text><Number>80</Number><Unit>%</Unit><Separator Symbol>;</Separator Symbol><br/>
<Normal Text>        </Normal Text><Property>margin</Property><Normal Text>: </Normal Text><Number>0</Number><Normal Text> </Normal Text><Value Keyword>auto</Value Keyword><Separator Symbol>;</Separator Symbol><br/>
<Normal Text></Normal Text><br/>
<Normal Text>        </Normal Text><Selector Class>.cover</Selector Class><Normal Text> {</Normal Text><br/>
<Normal Text>            </Normal Text><At Rule>@include</At Rule><Normal Text> </Normal Text><Function>border-radius(</Function><Number>20</Number><Unit>px</Unit><Function>)</Function><Separator Symbol>;</Separator Symbol><br/>
<Normal Text>            </Normal Text><Property>max-width</Property><Normal Text>: </Normal Text><Number>100</Number><Unit>%</Unit><Separator Symbol>;</Separator Symbol><br/>
<Normal Text></Normal Text><br/>
<Normal Text>            </Normal Text><Operator>&</Operator><Selector Pseudo>:hover</Selector Pseudo><Normal Text> {</Normal Text><br/>
<Normal Text>                </Normal Text><Property>background</Property><Normal Text>: </Normal Text><Color>#ffffff</Color><Separator Symbol>;</Separator Symbol><br/>
<Normal Text>            }</Normal Text><br/>
<Normal Text></Normal Text><br/>
<Normal Text>            </Normal Text><Selector Class>.like-button</Selector Class><Normal Text> {</Normal Text><br/>
<Normal Text>                </Normal Text><Property>font-size</Property><Normal Text>: </Normal Text><Variable>$default-font-size</Variable><Normal Text> </Normal Text><Operator>*</Operator><Normal Text> </Normal Text><Number>0.8</Number><Separator Symbol>;</Separator Symbol><br/>
<Normal Text></Normal Text><br/>
<Normal Text>                </Normal Text><At Rule>@media</At Rule><Normal Text> (</Normal Text><Property>max-width</Property><Normal Text>: </Normal Text><Number>300</Number><Unit>px</Unit><Normal Text>) </Normal Text><Keyword>and</Keyword><Normal Text> (</Normal Text><Property>min-width</Property><Normal Text>: </Normal Text><Number>200</Number><Unit>px</Unit><Normal Text>) {</Normal Text><br/>
<Normal Text>                    </Normal Text><Property>font-size</Property><Normal Text>: </Normal Text><Variable>$default-font-size</Variable><Normal Text> </Normal Text><Operator>*</Operator><Normal Text> </Normal Text><Number>0.8</Number><Separator Symbol>;</Separator Symbol><br/>
<Normal Text></Normal Text><br/>
<Normal Text>                    </Normal Text><Selector Class>.icon</Selector Class><Normal Text> {</Normal Text><br/>
<Normal Text>                        </Normal Text><Property>width</Property><Normal Text>: </Normal Text><Number>20</Number><Unit>px</Unit><Separator Symbol>;</Separator Symbol><br/>
<Normal Text>                        </Normal Text><Property>height</Property><Normal Text>: </Normal Text><Number>20</Number><Unit>px</Unit><Separator Symbol>;</Separator Symbol><br/>
<Normal Text>                    }</Normal Text><br/>
<Normal Text>                }</Normal Text><br/>
<Normal Text></Normal Text><br/>
<Normal Text>                </Normal Text><At Rule>@media</At Rule><Normal Text> </Normal Text><Value>print</Value><Normal Text> {</Normal Text><br/>
<Normal Text>                    </Normal Text><Property>display</Property><Normal Text>: </Normal Text><Value>none</Value><Separator Symbol>;</Separator Symbol><br/>
<Normal Text>                }</Normal Text><br/>
<Normal Text>            }</Normal Text><br/>
<Normal Text>        }</Normal Text><br/>
<Normal Text>    }</Normal Text><br/>
<Normal Text>}</Normal Text><br/>
<Normal Text></Normal Text><br/>
<Comment>// Extend and inheritance</Comment><br/>
<Normal Text></Normal Text><br/>
<Selector Class>.message</Selector Class><Normal Text> {</Normal Text><br/>
<Normal Text>    </Normal Text><Property>border</Property><Normal Text>: </Normal Text><Variable>$border-light</Variable><Separator Symbol>;</Separator Symbol><br/>
<Normal Text>    </Normal Text><Property>background-color</Property><Normal Text>: </Normal Text><Color>#f0f0f0</Color><Separator Symbol>;</Separator Symbol><br/>
<Normal Text>}</Normal Text><br/>
<Normal Text></Normal Text><br/>
<Selector Class>.message-danger</Selector Class><Normal Text> {</Normal Text><br/>
<Normal Text>    </Normal Text><At Rule>@extend</At Rule><Normal Text> </Normal Text><Selector Class>.message</Selector Class><Separator Symbol>;</Separator Symbol><br/>
<Normal Text>}</Normal Text><br/>
<Normal Text></Normal Text><br/>
<Normal Text></Normal Text><br/>
<Comment>// Control structures</Comment><br/>
<Normal Text></Normal Text><br/>
<At Rule>@mixin</At Rule><Normal Text> </Normal Text><Function>does-parent-exist</Function><Normal Text> {</Normal Text><br/>
<Normal Text>    </Normal Text><At Rule>@if</At Rule><Normal Text> & {</Normal Text><br/>
<Normal Text>        </Normal Text><Operator>&</Operator><Selector Pseudo>:hover</Selector Pseudo><Normal Text> {</Normal Text><br/>
<Normal Text>            </Normal Text><Property>color</Property><Normal Text>: </Normal Text><Color>red</Color><Separator Symbol>;</Separator Symbol><br/>
<Normal Text>        }</Normal Text><br/>
<Normal Text>    } </Normal Text><At Rule>@else</At Rule><Normal Text> {</Normal Text><br/>
<Normal Text>        </Normal Text><Selector Tag>a</Selector Tag><Normal Text> {</Normal Text><br/>
<Normal Text>            </Normal Text><Property>color</Property><Normal Text>: </Normal Text><Color>red</Color><Separator Symbol>;</Separator Symbol><br/>
<Normal Text>        }</Normal Text><br/>
<Normal Text>    }</Normal Text><br/>
<Normal Text>}</Normal Text><br/>
<Normal Text></Normal Text><br/>
<Normal Text></Normal Text><br/>
<Comment>// Operators</Comment><br/>
<Normal Text></Normal Text><br/>
<Selector Class>.container</Selector Class><Normal Text> { </Normal Text><Property>width</Property><Normal Text>: </Normal Text><Number>100</Number><Unit>%</Unit><Separator Symbol>;</Separator Symbol><Normal Text> }</Normal Text><br/>
<Normal Text></Normal Text><br/>
<Selector Tag>article</Selector Tag><Selector Attribute>[role</Selector Attribute><Operator>=</Operator><String>"main"</String><Selector Attribute>]</Selector Attribute><Normal Text> {</Normal Text><br/>
<Normal Text>  </Normal Text><Property>float</Property><Normal Text>: </Normal Text><Value>left</Value><Separator Symbol>;</Separator Symbol><br/>
<Normal Text>  </Normal Text><Property>width</Property><Normal Text>: </Normal Text><Number>600</Number><Unit>px</Unit><Normal Text> </Normal Text><Operator>/</Operator><Normal Text> </Normal Text><Number>960</Number><Unit>px</Unit><Normal Text> </Normal Text><Operator>*</Operator><Normal Text> </Normal Text><Number>100</Number><Unit>%</Unit><Separator Symbol>;</Separator Symbol><br/>
<Normal Text>}</Normal Text><br/>
<Normal Text></Normal Text><br/>
<Selector Tag>aside</Selector Tag><Selector Attribute>[role</Selector Attribute><Operator>=</Operator><String>"complementary"</String><Selector Attribute>]</Selector Attribute><Normal Text> {</Normal Text><br/>
<Normal Text>  </Normal Text><Property>float</Property><Normal Text>: </Normal Text><Value>right</Value><Separator Symbol>;</Separator Symbol><br/>
<Normal Text>  </Normal Text><Property>width</Property><Normal Text>: </Normal Text><Number>300</Number><Unit>px</Unit><Normal Text> </Normal Text><Operator>/</Operator><Normal Text> </Normal Text><Number>960</Number><Unit>px</Unit><Normal Text> </Normal Text><Operator>*</Operator><Normal Text> </Normal Text><Number>100</Number><Unit>%</Unit><Separator Symbol>;</Separator Symbol><br/>
<Normal Text>}</Normal Text><br/>
<Normal Text></Normal Text><br/>
<Normal Text></Normal Text><br/>
<Comment>// Functions - see http://sass-lang.com/documentation/Sass/Script/Functions.html</Comment><br/>
<Normal Text></Normal Text><br/>
<Variable>$color1</Variable><Normal Text>: </Normal Text><Function>hsl(</Function><Number>120</Number><Unit>deg</Unit><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Number>100</Number><Unit>%</Unit><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Number>50</Number><Unit>%</Unit><Function>)</Function><Separator Symbol>;</Separator Symbol><br/>
<Variable>$color2</Variable><Normal Text>: </Normal Text><Function>rgb(</Function><Variable>$red</Variable><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Variable>$green</Variable><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Function>blue(</Function><Variable>$color1</Variable><Function>))</Function><Separator Symbol>;</Separator Symbol><br/>
<Variable>$color3</Variable><Normal Text>: </Normal Text><Function>mix(</Function><Variable>$color1</Variable><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Variable>$color2</Variable><Separator Symbol>,</Separator Symbol><Normal Text> [</Normal Text><Variable>$weight</Variable><Normal Text>]</Normal Text><Function>)</Function><Separator Symbol>;</Separator Symbol><br/>
<Normal Text></Normal Text><br/>
<Normal Text></Normal Text><br/>
<Comment>// Properties</Comment><br/>
<Normal Text></Normal Text><br/>
<Selector Tag>html</Selector Tag><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Selector Tag>body</Selector Tag><Normal Text> {</Normal Text><br/>
<Normal Text>    </Normal Text><Property>font-family</Property><Normal Text>: </Normal Text><String>"Droid Sans"</String><Separator Symbol>,</Separator Symbol><Normal Text> Arial</Normal Text><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Value>sans-serif</Value><Separator Symbol>;</Separator Symbol><br/>
<Normal Text>    </Normal Text><Property>font-size</Property><Normal Text>: </Normal Text><Number>11</Number><Unit>pt</Unit><Separator Symbol>;</Separator Symbol><br/>
<Normal Text>    </Normal Text><Property>line-height</Property><Normal Text>: </Normal Text><Number>1.5</Number><Unit>em</Unit><Separator Symbol>;</Separator Symbol><br/>
<Normal Text>    </Normal Text><Property>max-width</Property><Normal Text>: </Normal Text><Number>300</Number><Unit>px</Unit><Normal Text> </Normal Text><Operator>+</Operator><Normal Text> </Normal Text><Variable>$page-width</Variable><Normal Text> </Normal Text><Operator>-</Operator><Normal Text> </Normal Text><Variable>$gap</Variable><Normal Text> </Normal Text><Operator>/</Operator><Normal Text> </Normal Text><Number>2</Number><Separator Symbol>;</Separator Symbol><br/>
<Normal Text>    </Normal Text><Property>background</Property><Normal Text>: </Normal Text><Variable>$bg_color</Variable><Separator Symbol>;</Separator Symbol><br/>
<Normal Text>    </Normal Text><Property>text-shadow</Property><Normal Text>: </Normal Text><Number>0</Number><Normal Text> </Normal Text><Number>0</Number><Normal Text> </Normal Text><Number>2</Number><Unit>px</Unit><Normal Text> </Normal Text><Function>rgba(</Function><Number>0</Number><Separator Symbol>,</Separator Symbol><Number>0</Number><Separator Symbol>,</Separator Symbol><Number>0</Number><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Variable>$transparence</Variable><Function>)</Function><Separator Symbol>;</Separator Symbol><br/>
<Normal Text>    </Normal Text><Property>box-sizing</Property><Normal Text>: </Normal Text><Value>border-box</Value><Separator Symbol>;</Separator Symbol><br/>
<Normal Text>}</Normal Text><br/>
<Normal Text></Normal Text><br/>
<Normal Text></Normal Text><br/>
<Comment>// Selectors</Comment><br/>
<Normal Text></Normal Text><br/>
<Selector Tag>blockquote</Selector Tag><Normal Text> {</Normal Text><br/>
<Normal Text>    </Normal Text><Property>margin</Property><Normal Text>: </Normal Text><Number>0</Number><Separator Symbol>;</Separator Symbol><br/>
<Normal Text>}</Normal Text><br/>
<Normal Text></Normal Text><br/>
<Selector Tag>header</Selector Tag><Normal Text> </Normal Text><Selector Id>#logo</Selector Id><Normal Text> {</Normal Text><br/>
<Normal Text>    </Normal Text><Property>width</Property><Normal Text>: </Normal Text><Number>100</Number><Unit>px</Unit><Separator Symbol>;</Separator Symbol><br/>
<Normal Text>}</Normal Text><br/>
<Normal Text></Normal Text><br/>
<Selector Tag>div</Selector Tag><Selector Id>#footer</Selector Id><Normal Text> </Normal Text><Selector Class>.link</Selector Class><Normal Text> {</Normal Text><br/>
<Normal Text>    </Normal Text><Property>color</Property><Normal Text>: </Normal Text><Color>blue</Color><Separator Symbol>;</Separator Symbol><br/>
<Normal Text>}</Normal Text><br/>
<Normal Text></Normal Text><br/>
<Selector Tag>sidebar</Selector Tag><Normal Text> </Normal Text><Selector Id>#subscribe</Selector Id><Normal Text> </Normal Text><Selector Class>.subscribe_form</Selector Class><Normal Text> </Normal Text><Selector Tag>input</Selector Tag><Selector Attribute>[type</Selector Attribute><Operator>=</Operator><String>"text"</String><Selector Attribute>]</Selector Attribute><Normal Text> {</Normal Text><br/>
<Normal Text>    </Normal Text><Property>font-size</Property><Normal Text>: </Normal Text><Number>20</Number><Unit>px</Unit><Separator Symbol>;</Separator Symbol><br/>
<Normal Text>}</Normal Text><br/>
<Normal Text></Normal Text><br/>
<Selector Tag>sidebar</Selector Tag><Normal Text> </Normal Text><Selector Id>#subscribe</Selector Id><Normal Text> </Normal Text><Selector Class>.subscribe_form</Selector Class><Selector Pseudo>:nth-child(2n + 1):hover</Selector Pseudo><Normal Text> </Normal Text><Selector Tag>input</Selector Tag><Selector Attribute>[class</Selector Attribute><Operator>*=</Operator><String>"small-"</String><Selector Attribute>]</Selector Attribute><Normal Text> {</Normal Text><br/>
<Normal Text>    </Normal Text><Property>font-weight</Property><Normal Text>: </Normal Text><Value>bold</Value><Separator Symbol>;</Separator Symbol><br/>
<Normal Text>}</Normal Text><br/>
<Normal Text></Normal Text><br/>
<Normal Text></Normal Text><br/>
<Comment>// Media Queries</Comment><br/>
<Normal Text></Normal Text><br/>
<At Rule>@media</At Rule><Normal Text> </Normal Text><Value>print</Value><Normal Text> {</Normal Text><br/>
<Normal Text>    </Normal Text><Selector Class>.container</Selector Class><Normal Text> {</Normal Text><br/>
<Normal Text>        </Normal Text><Property>width</Property><Normal Text>: </Normal Text><Number>100</Number><Unit>%</Unit><Separator Symbol>;</Separator Symbol><br/>
<Normal Text>    }</Normal Text><br/>
<Normal Text>}</Normal Text><br/>
<Normal Text></Normal Text><br/>
<At Rule>@media</At Rule><Normal Text> </Normal Text><Value>screen</Value><Normal Text> </Normal Text><Keyword>and</Keyword><Normal Text> (</Normal Text><Property>min-width</Property><Normal Text>: </Normal Text><Number>768</Number><Unit>px</Unit><Normal Text>) {</Normal Text><br/>
<Normal Text>    </Normal Text><Selector Class>.container</Selector Class><Normal Text> {</Normal Text><br/>
<Normal Text>        </Normal Text><Property>width</Property><Normal Text>: </Normal Text><Number>600</Number><Unit>px</Unit><Separator Symbol>;</Separator Symbol><br/>
<Normal Text>    }</Normal Text><br/>
<Normal Text>}</Normal Text><br/>
<Normal Text></Normal Text><br/>
<At Rule>@media</At Rule><Normal Text> </Normal Text><Value>screen</Value><Normal Text> </Normal Text><Keyword>and</Keyword><Normal Text> (</Normal Text><Property>min-width</Property><Normal Text>: </Normal Text><Number>768</Number><Unit>px</Unit><Normal Text>) </Normal Text><Keyword>and</Keyword><Normal Text> (</Normal Text><Property>max-width</Property><Normal Text>: </Normal Text><Number>960</Number><Unit>px</Unit><Normal Text>) {</Normal Text><br/>
<Normal Text>    </Normal Text><Selector Class>.container</Selector Class><Normal Text> {</Normal Text><br/>
<Normal Text>        </Normal Text><Property>width</Property><Normal Text>: </Normal Text><Number>720</Number><Unit>px</Unit><Separator Symbol>;</Separator Symbol><br/>
<Normal Text>    }</Normal Text><br/>
<Normal Text>}</Normal Text><br/>
<Normal Text></Normal Text><br/>
<Normal Text></Normal Text><br/>
<Comment>// Fontface</Comment><br/>
<Normal Text></Normal Text><br/>
<At Rule>@font-face</At Rule><Normal Text> {</Normal Text><br/>
<Normal Text>    </Normal Text><Property>font-family</Property><Normal Text>: MyHelvetica</Normal Text><Separator Symbol>;</Separator Symbol><br/>
<Normal Text>    </Normal Text><Property>src</Property><Normal Text>: </Normal Text><Function>local(</Function><String>"Helvetica Neue Bold"</String><Function>)</Function><Separator Symbol>,</Separator Symbol><br/>
<Normal Text>        </Normal Text><Function>local(</Function><String>"HelveticaNeue-Bold"</String><Function>)</Function><Separator Symbol>,</Separator Symbol><br/>
<Normal Text>        </Normal Text><Function>url(</Function><String>MgOpenModernaBold.ttf</String><Function>)</Function><Separator Symbol>;</Separator Symbol><br/>
<Normal Text>    </Normal Text><Property>font-weight</Property><Normal Text>: </Normal Text><Value>bold</Value><Separator Symbol>;</Separator Symbol><br/>
<Normal Text>}</Normal Text><br/>
<Normal Text></Normal Text><br/>
<Comment>// Animation (Keyframes)</Comment><br/>
<Normal Text></Normal Text><br/>
<At Rule>@keyframes</At Rule><Normal Text> slidein {</Normal Text><br/>
<Normal Text>    </Normal Text><Value>from</Value><Normal Text> {</Normal Text><br/>
<Normal Text>        </Normal Text><Property>margin-left</Property><Normal Text>: </Normal Text><Number>100</Number><Unit>%</Unit><Separator Symbol>;</Separator Symbol><br/>
<Normal Text>        </Normal Text><Property>width</Property><Normal Text>: </Normal Text><Number>300</Number><Unit>%</Unit><Separator Symbol>;</Separator Symbol><br/>
<Normal Text>    }</Normal Text><br/>
<Normal Text></Normal Text><br/>
<Normal Text>    </Normal Text><Value>to</Value><Normal Text> {</Normal Text><br/>
<Normal Text>        </Normal Text><Property>margin-left</Property><Normal Text>: </Normal Text><Number>0</Number><Unit>%</Unit><Separator Symbol>;</Separator Symbol><br/>
<Normal Text>        </Normal Text><Property>width</Property><Normal Text>: </Normal Text><Number>100</Number><Unit>%</Unit><Separator Symbol>;</Separator Symbol><br/>
<Normal Text>    }</Normal Text><br/>
<Normal Text>}</Normal Text><br/>
