// flexi-typo framework @import “flexi-typo/mixin”;

html{

@include html(16,10);

}

// body and headline font-size and font-family @include body-headline(16,10);

// link elements a{

@include link(#C02942); // define the color for the link elements, you can change the color number is you wish

}

// blockqoute elements blockquote{

@include blockquote(16,#C02942);
@extend %margin;

}

// define pre,code, and kbd elements pre{

@include pre();
@extend %margin;

}

code{

@include code();

}

kbd{

@include kbd();

}

// define the fixed font pre, code{

font-family : Consolas, Courier New, monospace;
line-height : inherit;

}

// define italic & bold elements em, i, blockquote{

font-style : italic;

} b, strong{

color : inherit;
font-weight: bold;

}

// define the ol, ul list ul{list-style-type: disc; @extend %margin;} ol{list-style-type: decimal;@extend %margin;}

// others defines abbr, abbr{

cursor: help;
border-bottom: 1px dotted;

} abbr.initialism {

font-size: 90%;
text-transform: uppercase;

} small, .small{font-size: 80%;}

// modifers .text-left{text-align: left;} .text-right{text-align: right;} .text-center{text-align: center;} .text-justify{text-align: justify;}

// center elements .center{

&-img{
display: block;
margin-left:auto;
margin-right:auto;}
&-block{
margin-left:auto;
margin-right:auto;}
&-veritcal{
min-height: 12em;
display : table-cell;
vertical-align: middle;}
}

// align elements
.align{
&-top{margin-top:px($font-size);} 
&-bottom{margin-bottom:px($font-size);}
&-left{margin-left:px($font-size);}
&-right{margin-right:px($font-size);}
}

// image responsive
.img-respv{
height:auto;
max-width:100%;}

@media screen and (max-width:600px){
    @include mobile(13,10);
}

// end of the file // ————————————————