

//----------- MAIN COLORS ------------

$background: #013E71
$maincolor: #FBFC65
$secondarycolor: #ff783b

$red: #FF5252
$orange: #FF7F00
$green: #39AA68

$gray: #AAAAAA
$lightgray: #eee


//----------- MEDIA QUERIES VARIABLES ------------

$media1: 1366px
$media2: 1280px
$media3: 1200px
$media4: 1024px
$media5: 980px
$media6: 823px
$media7: 812px
$media8: 768px
$media9: 736px
$media10: 640px
$media11: 600px
$media12: 480px
$media13: 412px
$media14: 360px
$media15: 320px



//----------- CURSORS ------------

//@mixin cursor
 //cursor: url('../images/cursors/cursor_black.png'), url('../images/cursors/cursor_black.cur'), default

//@mixin hand_cursor
 //cursor: url('../images/cursors/hand_cursor_black.png') 8 0, url('../images/cursors/hand_cursor_black.cur'), default */

@mixin cursor
 cursor: url('../images/cursors/cursor_black.png'), default

@mixin hand_cursor
 cursor: url('../images/cursors/hand_cursor_black.png') 8 0, pointer



//----------- FLEX CONFIGURATION ------------

@mixin flex
  display: flex
  flex-flow: row nowrap
  align-items: center

@mixin column-flex
  display: flex
  flex-flow: column nowrap
  align-items: center



//----------- HOVER ANIMATION ------------

@mixin hover_font-size
  opacity: .7
  font-size: 1.5em
  @include transition (all 300ms cubic-bezier(0.4, 0, 0.2, 1))

@mixin hover_scale
  opacity: .7
  @include transform(scale(1.2,1.2))
  @include transition (all 300ms cubic-bezier(0.4, 0, 0.2, 1))

@mixin hover_opacity
  opacity: .5
  @include transition (all 300ms cubic-bezier(0.4, 0, 0.2, 1))

@mixin hover_scale_rotation
  @include transform(scale(1.3,1.3) rotate(180deg))
  @include transition (all 300ms cubic-bezier(0.4, 0, 0.2, 1))

@mixin hover_scale_in
  opacity: .7
  @include transform(rotate(180deg) scale(1.2,1.2))
  @include transition (all 300ms cubic-bezier(0.4, 0, 0.2, 1))

@mixin hover_scale_out
  opacity: .7
  @include transform(scale(1.2,1.2))
  @include transition (all 300ms cubic-bezier(0.4, 0, 0.2, 1))


//----------- GENERAL MIXINS ------------

@mixin box-sizing ($box)
  -webkit-box-sizing: $box
  -moz-box-sizing: $box
  -ms-box-sizing: $box
  -o-box-sizing: $box
  box-sizing: $box

@mixin transition ($value)
  transition: $value
  -webkit-transition: $value
  -moz-transition: $value
  -ms-transition: $value
  -o-transition: $value

@mixin transitionn ($value1, $value2)
  transition: $value1, $value2
  -webkit-transition: $value1, $value2
  -moz-transition: $value1, $value2
  -ms-transition: $value1, $value2
  -o-transition: $value1, $value2

@mixin transition_default
  transition: (all 300ms cubic-bezier(0.4, 0, 0.2, 1))
  -webkit-transition: (all 300ms cubic-bezier(0.4, 0, 0.2, 1))
  -moz-transition: (all 300ms cubic-bezier(0.4, 0, 0.2, 1))
  -ms-transition: (all 300ms cubic-bezier(0.4, 0, 0.2, 1))
  -o-transition: (all 300ms cubic-bezier(0.4, 0, 0.2, 1))

@mixin transform ($value)
  -webkit-transform: $value
  -moz-transform: $value
  -ms-transform: $value
  -o-transform: $value
  transform: $value

@mixin transform-origin ($value)
  -webkit-transform-origin: $value
  -moz-transform-origin: $value
  -ms-transform-origin: $value
  -o-transform-origin: $value
  transform-origin: $value

@mixin text-stroke ($box)
  -webkit-text-stroke: $box
  -moz-text-stroke: $box
  -ms-text-stroke: $box
  -o-text-stroke: $box
  text-stroke: $box

@mixin box-shadow ($box)
  -webkit-box-shadow: $box
  -moz-box-shadow: $box
  -ms-box-shadow: $box
  -o-box-shadow: $box
  box-shadow: $box

@mixin backface-visibility ($value)
  -webkit-backface-visibility: $value
  -moz-backface-visibility: $value
  -ms-backface-visibility: $value
  -o-backface-visibility: $value
  backface-visibility: $value

@mixin no_select_text
  -webkit-user-select: none
  -moz-user-select: none
  -ms-user-select: none
  user-select: none
