///////////////////// fonts
@font-face {
  font-family: 'sahel';
  src: url("../fonts/sahel/Sahel-FD.eot"),
  url("../fonts/sahel/Sahel-FD.ttf"),
  url("../fonts/sahel/Sahel-FD.woff") ;
}

@font-face {
  font-family: 'sahel-bold';
  src: url("../fonts/sahel/Sahel-Bold-FD.eot"),
  url("../fonts/sahel/Sahel-Bold-FD.ttf"),
  url("../fonts/sahel/Sahel-Bold-FD.woff") ;
}

@font-face {
  font-family: 'sahel-black';
  src: url("../fonts/sahel/Sahel-Black-FD.eot"),
  url("../fonts/sahel/Sahel-Black-FD.ttf"),
  url("../fonts/sahel/Sahel-Black-FD.woff") ;
}


///////////////////// mixins
@mixin transition($p) {
  transition: $p;
  -webkit-transition: $p;
  -moz-transition: $p;
  -ms-transition: $p;
  -o-transition: $p;
}

@mixin transform($p) {
  transform: $p;
  -webkit-transform: $p;
  -moz-transform: $p;
  -ms-transform: $p;
  -o-transform: $p;
}

@mixin borderRadius($p) {
  border-radius: $p;
  -webkit-border-radius: $p;
  -moz-border-radius: $p;
}

///////////////////// variables
%appearance {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

%userSelect {
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

///////////////////// variables
$theme: #1B407C;
$bg: #F0F0F0;
$darkGray: #303030;


////// global

body {
  direction: rtl;

  &:lang(en) {
    direction: ltr;
  }
}

p, a, span, b, i {
  font-family: 'sahel';
  color: rgba(0, 0, 0, 0.7);
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'sahel-bold';
}

/////// global classes
.logo {
  display: inline-block;
  width: 50px;

  svg {
    width: 100%;
  }
}

.lang--bar {
  background: $darkGray;
  height: 25px;

  p {
    color: rgba(255, 255, 255, 0.7);
    font-size: 13px;
    line-height: 25px;
    float: left;
  }

  select {
    @extend %appearance;
    @extend %userSelect;
    background: $darkGray;
    color: #fff;
    font-family: sans-serif;
    border: none;

    option{
      padding: 5px;
      background: #fff;
      color: #000;
    }
  }
}

.header {

}