@import url(http://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900,900italic);
@import url(http://fonts.googleapis.com/css?family=Roboto+Condensed:300italic,400italic,700italic,400,300,700);

$fontr: 'Roboto', sans-serif;
$fontrc: 'Roboto Condensed', sans-serif;

$color: #3e3e4a;
$color1: #757575;
$color2: #b0b0b4;
$color3: #b8b8c6;
$color4: #909195;

$color-hover: #f15c22;
$color-hover2: #cc9889;

$color-hover3: #ca2520;
$color-hover4: #941905;

$border-01: #e9e7e8;
$border-02: #dfdfdf;
$border-03: #60606a;


$bg1: #32323c;
$bg2: #696872;
$bg3: #f8f8f8;
$bg4: #d1d1d1;
$bg5: #1a1a1f;
$bg6: #ccc;
$bg7: #f3f3f3;

$bg8: #7a7a7a;
$bg9: #3e3e3e;
$bg10: #f5f5f5;


$font-size: 13px;
$line-height: 20px;
$text-color: $color1;

$top: 50%; 

/*---  %Name  ---*/

%transition {
    transition: all .3s;
    -ms-transition: all .3s;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
}

%fa {
    display: inline-block;
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

%text_format {
    font-size: $font-size;
    line-height: $line-height;
    color: $text-color;
    font-weight: normal;
    font-style: normal;
}

%list_reset {
    list-style: none;
    padding: 0;
    ul, ol{
        list-style: none;
        padding: 0; 
    }
}

%list_format {
    li:first-child {
        margin: 0;
        padding: 0;
        border: 0;
    }
}

%clearfix {
    &:before,
    &:after {
        content: "";
        display: table;
    }
    &:after {
        clear: both;
    }
}

/*--- Functions ---*/

@mixin border($border) {
    border: 1px solid $border;
}

@mixin opacity($opacity) {
    /* IE 8 */
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity="+ $opacity * 100 + ")";
    /* IE 5-7 */
    filter: alpha(opacity= $opacity * 100);
    /* Netscape */
    -moz-opacity: $opacity;
    /* Safari 1.x */
    -khtml-opacity: $opacity;
    /* Good browsers */
    opacity: $opacity;
}

@mixin transition($time) {
    transition: all $time;
    -ms-transition: all $time;
    -webkit-transition: all $time;
    -moz-transition: all $time;
}
@mixin transition_m($var, $time) {
    transition: $var $time;
    -ms-transition: $var $time;
    -webkit-transition: $var $time;
    -moz-transition: $var $time;
}
@mixin scale($scale) {
    -webkit-transform: scale($scale);
    -moz-transform: scale($scale);
    -o-transform: scale($scale);
    transform: scale($scale);
}
@mixin skew($skew) {
    -webkit-transform: skew($skew);
    -moz-transform: skew($skew);
    -o-transform: skew($skew);
    transform: skew($skew);
}
@mixin rotate($rotate) {
    -ms-transform: rotate($rotate);
    -webkit-transform: rotate($rotate);
    transform: rotate($rotate);
}
@mixin translateY($translateY) {
    -webkit-transform: translateY($translateY);
    -moz-transform: translateY($translateY);
    -ms-transform: translateY($translateY);
    transform: translateY($translateY);
}
@mixin text_format($font-family, $font-size, $line-height, $text-color) {
    font-family: $font-family;
    font-size: $font-size;
    line-height: $line-height;
    color: $text-color;
}

@mixin list_format($margin, $padding, $border) {
    li:first-child {
        margin: $margin;
        padding: $padding;
        border: $border;
    }
}

@mixin list_t($margin-t, $padding-t, $border-t) {
    margin-top: $margin-t;
    padding-top: $padding-t;
    border-top: $border-t;
}
@mixin list_r($margin-r, $padding-r, $border-r) {
    margin-right: $margin-r;
    padding-right: $padding-r;
    border-right: $border-r;
}

@mixin list_b($margin-b, $padding-b, $border-b) {
    margin-bottom: $margin-b;
    padding-bottom: $padding-b;
    border-bottom: $border-b;
}
@mixin list_l($margin-l, $padding-l, $border-l) {
    margin-left: $margin-l;
    padding-left: $padding-l;
    border-left: $border-l;
}

@mixin icon($width, $height, $line-height, $font-size, $background) {
    display: inline-block;
    text-align: center;
    width: $width;
    height: $height;
    line-height: $line-height;
    font-size: $font-size;
    background: $background;
}

@mixin button($width, $height, $line-height, $font-size, $top) {
    text-align: center;
    width: $width;
    height: $height;
    line-height: $line-height;
    font-size: $font-size;
    position: absolute;
    top: $top;
    margin-top: -$height / 2;
    margin-left: -$width / 2;
}

@mixin counter($num) {
    width: $num + px;
    margin-left: -$num / 2 + px;
}

@mixin clearfix {
    &:before,
    &:after {
        content: "";
        display: table;
    }
    &:after {
        clear: both;
    }
}

@mixin box-sizing($box-model) {
    -webkit-box-sizing: $box-model;
    -moz-box-sizing: $box-model;
    box-sizing: $box-model;
}



@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
          border-radius: $radius;
}
@mixin border($border) {
  border: 1px solid $border;
}

@mixin box-shadow($width,$color) {
  box-shadow: 0 0 0 $width $color;
  -ms-box-shadow: 0 0 0 $width $color;
  -moz-box-shadow: 0 0 0 $width $color;
  -webkit-box-shadow: 0 0 0 $width $color;
}

@mixin kopa-float($float,$margin,$list-style) {
  float: $float;
  margin: $margin;
  list-style: $list-style;
}

@mixin before-left($top,$bottom,$right,$color,$topp) {
    content: '';
    position: absolute;
    border-top: $top solid transparent;
    border-bottom: $bottom solid transparent;
    border-right: $right solid $color;
    top: $topp;
    left: -$right;
}
@mixin before-right($top,$bottom,$left,$color,$topp) {
    content: '';
    position: absolute;
    border-top: $top solid transparent;
    border-bottom: $bottom solid transparent;
    border-left: $left solid $color;
    top: $topp;
    right: -$left;
}
@mixin before-bottom($left,$right,$top,$color,$bottom) {
    content: '';
    position: absolute;
    border-left: $left solid transparent;
    border-right: $right solid transparent;
    border-top: $top solid $color;
    bottom: $bottom;
    left: 50%;
    margin-left: -$left;
}

@mixin before-top($left,$right,$bottom,$color,$top) {
    content: '';
    position: absolute;
    border-left: $left solid transparent;
    border-right: $right solid transparent;
    border-bottom: $bottom solid $color;
    top: $top;
    left: 50%;
    margin-left: -$left;
}